/* ─── CSS Variables ─── */
:root {
    --accent: #6B8FA8;
    --accent-light: #8AADC4;
    --accent-dim: rgba(107, 143, 168, 0.15);

    --bg: #F5F0E8;
    --bg2: #EDE7DC;
    --bg3: #E2DAD0;
    --surface: #FFFFFF;
    --surface2: #F0EAE1;

    --text: #1A1310;
    --text2: #5C4B42;
    --text3: #9C8A81;

    --border: rgba(26, 19, 16, 0.08);
    --shadow: rgba(26, 19, 16, 0.10);

    --bubble-user: #B8C4CF;
    --bubble-user-text: #1C2128;
    --bubble-ai: rgba(255, 255, 255, 0.82);
    --bubble-ai-text: #1C2128;

    --nav-h: 56px;
    --bottom-h: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;

    --font-display: 'Lora', Georgia, serif;
    --font-body: 'DM Sans', sans-serif;

    --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* 字体大小（运行时由 JS 控制） */
    --font-size: 14px;
}

[data-theme="dark"] {
    --bg: #1C1F24;
    --bg2: #23272E;
    --bg3: #2A2F38;
    --surface: #2A2F38;
    --surface2: #313640;

    --text: #F5F0E8;
    --text2: #C4B0A6;
    --text3: #7A6860;

    --border: rgba(245, 240, 232, 0.07);
    --shadow: rgba(0, 0, 0, 0.30);

    --bubble-ai: rgba(42, 47, 56, 0.88);
    --bubble-ai-text: #E8EBF0;
    --bubble-user: #3D5060;
    --bubble-user-text: #E8EBF0;
    --accent: #7AA3BC;
}

/* ─── Reset ─── */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    transition: background var(--transition), color var(--transition);
}
button {
    border: none;
    background: none;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}
input,
textarea {
    font-family: inherit;
    outline: none;
    border: none;
    background: none;
}
ul,
li {
    list-style: none;
}

/* ─── App Shell ─── */
#app {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    height: var(--app-height, 100dvh);
    max-height: var(--app-height, 100dvh);
    display: flex;
    flex-direction: column;
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
}

/* ─── Pages ─── */
.page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--bg);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}
.page.active {
    transform: none;
    will-change: auto;
}
.page.behind {
    transform: translateX(-28%);
}

/* ─── Top Nav ─── */
.topbar {
    height: var(--nav-h);
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    gap: 8px;
    position: relative;
    padding-top: env(safe-area-inset-top, 0px);
}
.topbar-title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 600;
    color: var(--text);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
.topbar-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 20px;
    transition: background var(--transition);
    flex-shrink: 0;
}
.topbar-btn:active {
    background: var(--accent-dim);
}
.topbar-right {
    margin-left: auto;
}

/* ─── Bottom Nav ─── */
.bottomnav {
    height: calc(var(--bottom-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    display: flex;
    align-items: center;
    background: var(--bg);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.bottomnav-item {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text3);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
    transition: color var(--transition);
    padding-top: 8px;
}
.bottomnav-item.active {
    color: var(--accent);
}
.bottomnav-item svg {
    width: 22px;
    height: 22px;
}

/* ─── Scrollable Content ─── */
.scroll-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.scroll-area::-webkit-scrollbar {
    display: none;
}

/* ════════════════════════════════
   PAGE 1 — CONVERSATION LIST
════════════════════════════════ */

.search-bar {
    padding: 10px 16px;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.search-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg2);
    border-radius: var(--radius-lg);
    padding: 8px 14px;
}
.search-inner svg {
    color: var(--text3);
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}
.search-inner input {
    flex: 1;
    font-size: 14px;
    color: var(--text);
    background: transparent;
}
.search-inner input::placeholder {
    color: var(--text3);
}

.conv-list {
    padding: 6px 0;
}

/* ─── 对话项侧滑 ─── */
.conv-item {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;
}
.conv-item-content {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
    background: var(--bg);
    transition: transform 0.2s ease;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.conv-item.pinned .conv-item-content {
    background: var(--bg2);
}
.conv-item-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    z-index: 0;
}
.conv-action-btn {
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: opacity 0.15s;
    user-select: none;
    padding: 0 4px;
    text-align: center;
}
.conv-action-btn:active {
    opacity: 0.7;
}
.conv-action-pin {
    background: var(--accent);
}
.conv-action-archive {
    background: #6A9FB5;
}
.conv-action-move {
    background: #7E6AA8;
}

.conv-pin-badge {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    position: absolute;
    top: 14px;
    right: 12px;
    flex-shrink: 0;
}

.conv-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 18px;
    color: var(--accent);
    flex-shrink: 0;
    overflow: hidden;
}
.conv-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.conv-info {
    flex: 1;
    min-width: 0;
}
.conv-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.conv-preview {
    font-size: 13px;
    color: var(--text3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conv-time {
    font-size: 11px;
    color: var(--text3);
    flex-shrink: 0;
    align-self: flex-start;
    padding-top: 2px;
}

.conv-divider {
    height: 1px;
    background: var(--border);
    margin: 0 16px 0 76px;
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 32px;
    gap: 12px;
}
.empty-state svg {
    color: var(--text3);
    opacity: 0.4;
    width: 48px;
    height: 48px;
}
.empty-state p {
    color: var(--text3);
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
}

/* ─── 侧边栏 ─── */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}
.sidebar-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    background: var(--bg);
    z-index: 51;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    box-shadow: 4px 0 20px var(--shadow);
}
.sidebar-overlay.open .sidebar {
    transform: translateX(0);
}

.sidebar-header {
    padding: 60px 20px 16px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.sidebar-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}
.sidebar-subtitle {
    font-size: 12px;
    color: var(--text3);
    margin-top: 4px;
}
.sidebar-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 16px 20px 8px;
    flex-shrink: 0;
}
.sidebar-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 20px;
}
.sidebar-list::-webkit-scrollbar {
    display: none;
}
.sidebar-main {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}
.sidebar-main::-webkit-scrollbar {
    display: none;
}
.sidebar-list.compact {
    flex: 0 0 auto;
    overflow: hidden;
    padding-bottom: 4px;
}
.sidebar-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.sidebar-section-toggle span:last-child {
    font-size: 13px;
    transition: transform var(--transition);
}
.sidebar-section-toggle.open span:last-child {
    transform: rotate(90deg);
}
.sidebar-collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-collapse.open {
    max-height: 360px;
}
.sidebar-assistant-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
}
.sidebar-current-body {
    flex: 1;
    min-width: 0;
}
.sidebar-current-label {
    font-size: 11px;
    color: var(--text3);
}
.sidebar-current-name {
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-mini-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg2);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sidebar-user-card {
    margin: 10px 14px 14px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg2);
    cursor: pointer;
}
.sidebar-user-card:active {
    opacity: 0.75;
}
.sidebar-user-meta {
    flex: 1;
    min-width: 0;
}
.sidebar-user-title {
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-user-subtitle {
    font-size: 11px;
    color: var(--text3);
    margin-top: 2px;
}
.sidebar-conv-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    gap: 10px;
    cursor: pointer;
    transition: background 0.12s;
}
.sidebar-conv-item:active {
    background: var(--bg2);
}
.sidebar-conv-name {
    flex: 1;
    font-size: 14px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-conv-unarchive {
    font-size: 11px;
    color: var(--accent);
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}
.sidebar-conv-unarchive:active {
    background: var(--accent-dim);
}
.sidebar-conv-item.active {
    background: var(--accent-dim);
}
.sidebar-empty {
    padding: 32px 20px;
    font-size: 13px;
    color: var(--text3);
    text-align: center;
}

/* ════════════════════════════════
   PAGE 2 — CHAT
════════════════════════════════ */

#page-chat>.topbar {
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    border-bottom: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
    pointer-events: none;
}
#page-chat.page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: var(--bg);
}
#page-chat>.topbar>* {
    pointer-events: auto;
}
#page-chat>.topbar .topbar-title {
    position: static;
    transform: none;
    margin-left: auto;
    margin-right: 8px;
    font-size: 15px;
    color: var(--text2);
    max-width: 34%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-model-btn {
    max-width: 112px;
    height: 32px;
    padding: 0 10px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    color: var(--accent);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: none;
}
.chat-model-btn span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.chat-model-btn svg {
    flex-shrink: 0;
}
	        .model-sheet-scroll {
	            max-height: none;
	            flex: 1;
	            overflow-y: auto;
	            -webkit-overflow-scrolling: touch;
	            padding-right: 2px;
	        }
.model-sheet-scroll::-webkit-scrollbar {
    display: none;
}
.model-provider-group {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
    margin-bottom: 8px;
}
.model-provider-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 12px;
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}
.model-provider-head span:last-child {
    color: var(--text3);
    font-size: 12px;
}
.model-provider-models {
    display: none;
    border-top: 1px solid var(--border);
    padding: 6px;
    max-height: min(46vh, 360px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
}
.model-provider-models::-webkit-scrollbar {
    display: none;
}
.model-provider-group.open .model-provider-models {
    display: block;
}
.model-option-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px;
    border-radius: var(--radius-sm);
    color: var(--text);
    text-align: left;
}
.model-option-row.active {
    background: var(--accent-dim);
    color: var(--accent);
}
.model-option-row small {
    color: var(--text3);
    font-size: 11px;
}
.provider-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 10px;
    background: var(--surface);
    margin-bottom: 10px;
}
.provider-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.provider-card-head .edit-sheet-input {
    min-width: 0;
}
.provider-model-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 6px;
    align-items: center;
    margin-top: 6px;
}
.provider-action-row {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}
.tiny-btn {
    padding: 6px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg2);
    color: var(--accent);
    font-size: 12px;
    flex-shrink: 0;
}
.tiny-btn.danger {
    color: #D94040;
}
.memory-list,
.summary-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 180px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.memory-item,
.summary-item {
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg2);
    font-size: 12px;
    line-height: 1.5;
    color: var(--text2);
    white-space: pre-wrap;
    word-break: break-word;
}
.mention-chip {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 11px;
    margin-right: 4px;
}

.typing-status {
    display: none;
    font-size: 12px;
    color: var(--text3);
    padding: 0 4px;
    animation: typingPulse 1.5s ease infinite;
    margin-left: 4px;
}
.typing-status.active {
    display: inline;
}
.reply-notice {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 12px);
    left: 50%;
    width: min(440px, calc(100vw - 24px));
    transform: translate(-50%, -16px);
    opacity: 0;
    z-index: 320;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    align-items: center;
    padding: 11px 14px;
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: 0 8px 28px var(--shadow);
    transition: opacity 0.18s ease, transform 0.18s ease;
    text-align: left;
}
.reply-notice.show {
    opacity: 1;
    transform: translate(-50%, 0);
}
.reply-notice-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
}
.reply-notice-time {
    font-size: 11px;
    color: var(--text3);
}
.reply-notice-text {
    grid-column: 1 / -1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text2);
}
@keyframes typingPulse {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
    padding-top: calc(var(--nav-h) + 12px + env(safe-area-inset-top, 0px));
    transition: padding-bottom 0.2s ease;
    position: relative;
    z-index: 1;
}
.chat-messages::-webkit-scrollbar {
    display: none;
}

.date-stamp {
    text-align: center;
    font-size: 11px;
    color: var(--text3);
    padding: 8px 0;
    font-weight: 500;
    letter-spacing: 0.4px;
}

.msg-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    max-width: 100%;
}
.msg-row.user {
    flex-direction: row-reverse;
}

.msg-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--accent);
    flex-shrink: 0;
    overflow: hidden;
    align-self: flex-end;
}
.msg-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.msg-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: calc(100% - 80px);
}
.msg-row.user .msg-body {
    align-items: flex-end;
}

.bubble {
    padding: 8px 12px;
    border-radius: var(--radius-lg);
    font-size: var(--font-size, 14px);
    line-height: 1.55;
    word-break: break-word;
    position: relative;
}
.msg-row.ai .bubble {
    background: var(--bubble-ai);
    color: var(--bubble-ai-text);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.msg-row.user .bubble {
    background: var(--bubble-user);
    color: var(--bubble-user-text);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.msg-row.ai .action-line {
    margin: 6px 0;
    padding-left: 10px;
    font-size: 0.92em;
    line-height: 1.6;
    font-style: italic;
    color: var(--text3);
    opacity: 0.78;
    border-left: 2px solid var(--line-soft);
    word-break: break-word;
    max-width: 100%;
}

.bubble-time {
    font-size: calc(var(--font-size, 14px) - 4px);
    color: var(--text3);
    padding: 0 4px;
    align-self: flex-end;
}
.msg-row.user .bubble-time {
    align-self: flex-end;
}

/* ─── Thinking Ball ─── */
.thinking-ball {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 6px;
    border-radius: 10px;
    background: var(--bg2);
    border: 1px solid var(--border);
    font-size: 11px;
    color: var(--text3);
    cursor: pointer;
    margin-bottom: 4px;
    user-select: none;
    transition: all 0.18s ease;
    max-width: fit-content;
}
.thinking-ball:active {
    transform: scale(0.94);
    background: var(--bg3);
}
.thinking-ball-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    position: relative;
    overflow: hidden;
}
.thinking-ball-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, transparent 40%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.05) 42%, transparent 42%),
        linear-gradient(225deg, transparent 38%, rgba(0, 0, 0, 0.04) 38%, rgba(0, 0, 0, 0.04) 41%, transparent 41%),
        linear-gradient(315deg, transparent 44%, rgba(0, 0, 0, 0.03) 44%, rgba(0, 0, 0, 0.03) 46%, transparent 46%);
    border-radius: 50%;
}
.thinking-ball-label {
    font-weight: 500;
}
.thinking-ball-dur {
    opacity: 0.7;
}

.thinking-live-ball {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 6px;
    border-radius: 10px;
    background: var(--bg2);
    border: 1px solid var(--border);
    font-size: 11px;
    color: var(--text3);
    cursor: pointer;
    margin-bottom: 4px;
    max-width: fit-content;
    user-select: none;
}
.thinking-live-spinner {
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--text3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.thinking-live-label {
    font-weight: 500;
}
.thinking-live-timer {
    opacity: 0.6;
}

.thinking-detail-body {
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text2);
    white-space: pre-wrap;
    word-break: break-word;
    padding: 12px 0;
    font-style: italic;
}
.thinking-detail-body::-webkit-scrollbar {
    display: none;
}

/* ─── Markdown 渲染样式 ─── */
.bubble.markdown-body h1,
.bubble.markdown-body h2,
.bubble.markdown-body h3 {
    font-family: var(--font-display);
    margin: 8px 0 4px;
    line-height: 1.35;
}
.bubble.markdown-body h1 {
    font-size: 17px;
}
.bubble.markdown-body h2 {
    font-size: 15px;
}
.bubble.markdown-body h3 {
    font-size: 14px;
}
.bubble.markdown-body p {
    margin: 4px 0;
}
.bubble.markdown-body ul,
.bubble.markdown-body ol {
    padding-left: 18px;
    margin: 4px 0;
}
.bubble.markdown-body li {
    margin: 2px 0;
    list-style: revert;
}
.bubble.markdown-body code {
    background: var(--bg2);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}
.bubble.markdown-body pre {
    background: var(--bg2);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    overflow-x: auto;
    margin: 6px 0;
    position: relative;
}
.bubble.markdown-body pre code {
    background: none;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
}
.bubble.markdown-body blockquote {
    border-left: 3px solid var(--accent);
    padding-left: 10px;
    margin: 6px 0;
    color: var(--text2);
}
.bubble.markdown-body a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: var(--accent-dim);
}
.bubble.markdown-body hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 0;
}
.bubble.markdown-body table {
    border-collapse: collapse;
    width: 100%;
    font-size: 12.5px;
    margin: 6px 0;
}
.bubble.markdown-body th,
.bubble.markdown-body td {
    border: 1px solid var(--border);
    padding: 5px 8px;
    text-align: left;
}
.bubble.markdown-body th {
    background: var(--bg2);
    font-weight: 600;
}
.bubble.markdown-body img {
    max-width: 100%;
    border-radius: var(--radius-sm);
}

.code-copy-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--text3);
    background: var(--surface);
    border-radius: 4px;
    border: 1px solid var(--border);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.bubble.markdown-body pre:hover .code-copy-btn {
    opacity: 1;
}

.typing-indicator {
    display: flex;
    gap: 4px;
    align-items: center;
    padding: 12px 14px;
}
.typing-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text3);
    animation: typingBounce 1.2s infinite ease-in-out;
}
.typing-dot:nth-child(2) {
    animation-delay: 0.2s;
}
.typing-dot:nth-child(3) {
    animation-delay: 0.4s;
}
@keyframes typingBounce {
    0%,
    60%,
    100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-5px);
        opacity: 1;
    }
}

.staged-area {
    padding: 8px 12px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-top: 1px solid var(--border);
}
.staged-bubble {
    align-self: flex-end;
    background: var(--accent-dim);
    color: var(--accent);
    border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
    padding: 7px 12px;
    font-size: 13px;
    line-height: 1.5;
    max-width: 80%;
    word-break: break-word;
    display: flex;
    align-items: center;
    gap: 8px;
}
.staged-remove {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.attach-panel {
    max-height: 0;
    overflow: hidden;
    background: var(--bg);
    border-top: 1px solid var(--border);
    transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.attach-panel.open {
    max-height: 340px;
}

.attach-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 14px 16px;
}
.attach-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 4px;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition);
}
.attach-menu-item:active {
    background: var(--bg2);
}
.attach-menu-item.disabled {
    opacity: 0.35;
    pointer-events: none;
}
.attach-menu-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--bg2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.attach-menu-label {
    font-size: 11px;
    color: var(--text2);
    font-weight: 500;
}

.attach-sticker-view {
    display: none;
    flex-direction: column;
    height: 240px;
}
.attach-sticker-view.active {
    display: flex;
}
.attach-sticker-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    flex-shrink: 0;
}
.attach-sticker-back {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    transition: background var(--transition);
}
.attach-sticker-back:active {
    background: var(--accent-dim);
}
.attach-sticker-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
}

.attach-sticker-grid {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 4px 12px 12px;
    align-content: start;
}
.attach-sticker-grid::-webkit-scrollbar {
    display: none;
}

.attach-sticker-item {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg2);
    transition: transform 0.15s ease;
    position: relative;
}
.attach-sticker-item:active {
    transform: scale(0.92);
}
.attach-sticker-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.attach-sticker-item-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 9px;
    color: white;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
    padding: 8px 3px 2px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.attach-sticker-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--text3);
}

.input-plus {
    transition: background var(--transition), transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.input-plus.active {
    transform: rotate(45deg);
    background: var(--accent-dim);
    color: var(--accent);
}

.input-bar {
    padding: 8px 12px calc(8px + var(--safe-bottom));
    background: var(--bg);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
    position: relative;
    z-index: 4;
}
.group-reply-targets {
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 0;
    background: var(--bg);
    border-top: 1px solid var(--border);
    flex-wrap: nowrap;
    overflow-x: auto;
    flex-shrink: 0;
}
.group-reply-targets.active {
    display: flex;
}
.group-reply-target-label {
    color: var(--text3);
    font-size: 12px;
    flex: 0 0 auto;
}
.group-reply-target-chip {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 5px 10px;
    background: var(--bg2);
    color: var(--text2);
    border: 1px solid var(--border);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
}
.group-reply-target-chip.active {
    background: var(--accent-dim);
    color: var(--accent);
    border-color: var(--accent);
}
.input-plus {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text2);
    font-size: 20px;
    flex-shrink: 0;
    transition: background var(--transition);
    align-self: flex-end;
}
.input-plus:active {
    background: var(--accent-dim);
    color: var(--accent);
}

.input-wrap {
    flex: 1;
    background: var(--bg2);
    border-radius: var(--radius-xl);
    border: 1.5px solid transparent;
    transition: border-color var(--transition);
    padding: 8px 12px;
    display: flex;
    align-items: flex-end;
}
.input-wrap:focus-within {
    border-color: var(--accent);
}
.input-wrap textarea {
    width: 100%;
    resize: none;
    font-size: var(--font-size, 14px);
    line-height: 1.5;
    color: var(--text);
    max-height: 120px;
    overflow-y: auto;
    background: transparent;
}
.input-wrap textarea::placeholder {
    color: var(--text3);
}
.input-wrap textarea::-webkit-scrollbar {
    display: none;
}

.send-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
    align-self: flex-end;
    transition: opacity var(--transition), transform var(--transition);
    opacity: 0.4;
    pointer-events: none;
}
.send-btn.ready {
    opacity: 1;
    pointer-events: auto;
}
.send-btn:active {
    transform: scale(0.92);
}
.send-btn svg {
    width: 16px;
    height: 16px;
}

/* ════════════════════════════════
   PAGE 3 — SETTINGS
════════════════════════════════ */

.settings-list {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.settings-section {
    background: var(--surface);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 1px 4px var(--shadow);
}
.settings-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 14px 16px 6px;
}
.settings-row {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    gap: 12px;
    border-top: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--transition);
}
.settings-row:first-of-type {
    border-top: none;
}
.settings-row:active {
    background: var(--bg2);
}
.settings-row-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.settings-row-label {
    flex: 1;
    font-size: 15px;
    color: var(--text);
}
.settings-row-value {
    font-size: 14px;
    color: var(--text3);
}
.settings-chevron {
    color: var(--text3);
}

.toggle {
    width: 44px;
    height: 26px;
    border-radius: 13px;
    background: var(--bg3);
    position: relative;
    transition: background var(--transition);
    flex-shrink: 0;
}
.toggle.on {
    background: var(--accent);
}
.toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: transform var(--transition);
}
.toggle.on::after {
    transform: translateX(18px);
}

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}
.modal-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
	        .modal-sheet {
	            width: 100%;
	            max-width: 480px;
	            max-height: min(88vh, 720px);
	            margin: 0 auto;
	            background: var(--surface);
	            border-radius: var(--radius-xl) var(--radius-xl) 0 0;
	            padding: 24px 20px calc(24px + var(--safe-bottom));
	            transform: translateY(100%);
	            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	            display: flex;
	            flex-direction: column;
	            overflow: hidden;
	        }
.modal-overlay.show .modal-sheet {
    transform: translateY(0);
}
.modal-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--bg3);
    margin: 0 auto 20px;
}
	        .modal-title {
	            font-family: var(--font-display);
	            font-size: 18px;
	            font-weight: 600;
	            color: var(--text);
	            margin-bottom: 16px;
	            flex-shrink: 0;
	        }
.modal-input {
    width: 100%;
    background: var(--bg2);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    font-size: 15px;
    color: var(--text);
    transition: border-color var(--transition);
    margin-bottom: 12px;
}
.modal-input:focus {
    border-color: var(--accent);
}
.modal-input::placeholder {
    color: var(--text3);
}
.modal-btn {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: white;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-body);
    transition: opacity var(--transition);
}
.modal-btn:active {
    opacity: 0.85;
}

.format-picker {
    display: flex;
    width: 100%;
    background: var(--bg2);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 3px;
}
.format-btn {
    flex: 1;
    padding: 8px 4px;
    border-radius: calc(var(--radius-md) - 2px);
    font-size: 13px;
    font-weight: 500;
    color: var(--text3);
    transition: background var(--transition), color var(--transition);
}
.format-btn.active {
    background: var(--surface);
    color: var(--accent);
    box-shadow: 0 1px 3px var(--shadow);
}

.settings-field-row {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 10px;
    border-top: 1px solid var(--border);
}
.field-label {
    font-size: 13px;
    color: var(--text2);
    flex-shrink: 0;
    width: 72px;
}
.field-input {
    flex: 1;
    font-size: 14px;
    color: var(--text);
    background: var(--bg2);
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    transition: border-color var(--transition);
}
.field-input:focus {
    border-color: var(--accent);
}
.field-input::placeholder {
    color: var(--text3);
}
.field-textarea {
    width: 100%;
    font-size: 13px;
    color: var(--text);
    background: var(--bg2);
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    resize: vertical;
    line-height: 1.5;
    transition: border-color var(--transition);
}
.field-textarea:focus {
    border-color: var(--accent);
}
.field-textarea::placeholder {
    color: var(--text3);
}

.save-btn {
    width: 100%;
    padding: 14px;
    background: var(--accent);
    color: white;
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 500;
    font-family: var(--font-body);
    transition: opacity var(--transition);
    margin-top: 4px;
}
.save-btn:active {
    opacity: 0.85;
}

.ctx-menu {
    position: fixed;
    z-index: 95;
    background: var(--surface);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 24px var(--shadow), 0 0 0 1px var(--border);
    min-width: 140px;
    overflow: hidden;
    transform-origin: top center;
    animation: ctxPop 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
}
@keyframes ctxPop {
    from {
        opacity: 0;
        transform: scale(0.88);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.ctx-menu-item {
    padding: 12px 18px;
    font-size: 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.12s;
}
.ctx-menu-item:last-child {
    border-bottom: none;
}
.ctx-menu-item:active {
    background: var(--bg2);
}
.ctx-menu-item.danger {
    color: #D94040;
}
.ctx-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 94;
}

.tool-log-row {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}
.tool-log {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text3);
    background: var(--bg2);
    padding: 4px 14px;
    border-radius: 12px;
    user-select: none;
}
.tool-log-spinner {
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--text3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}
.tool-log-icon {
    font-size: 13px;
}
@keyframes toolLogFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.tool-log-row {
    animation: toolLogFade 0.2s ease;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 3px;
}
.gallery-item {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s ease;
}
.gallery-item:active img {
    transform: scale(1.05);
}
.gallery-item-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
    color: white;
    font-size: 11px;
    padding: 16px 6px 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gallery-item-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.gallery-item:active .gallery-item-delete {
    opacity: 1;
}

@keyframes bubbleIn {
    from {
        opacity: 0;
        transform: scale(0.88) translateY(6px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.bubble {
    animation: bubbleIn 0.18s ease-out;
}

#page-chat .chat-messages {
    background: transparent;
    transition: background var(--transition);
}

	        .edit-sheet-content {
	            display: flex;
	            flex-direction: column;
	            gap: 12px;
	            overflow-y: auto;
	            -webkit-overflow-scrolling: touch;
	            min-height: 0;
	        }
	        .edit-sheet-content::-webkit-scrollbar {
	            display: none;
	        }

.edit-sheet-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edit-sheet-label {
    font-size: 12px;
    color: var(--text2);
    font-weight: 500;
}

.edit-sheet-input,
.edit-sheet-textarea {
    width: 100%;
    background: var(--bg2);
    color: var(--text);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    padding: 11px 12px;
    font-size: 14px;
    transition: border-color var(--transition);
}

.edit-sheet-input:focus,
.edit-sheet-textarea:focus {
    border-color: var(--accent);
}

.edit-sheet-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 12px;
}

	        .edit-sheet-actions {
	            display: flex;
	            gap: 10px;
	            margin-top: 4px;
	            flex-shrink: 0;
	        }

.edit-sheet-actions .modal-btn {
    flex: 1;
}

.modal-btn.secondary {
    background: var(--bg2);
    color: var(--text2);
}

.modal-btn.danger {
    background: transparent;
    color: #D94040;
    border: 1.5px solid #D94040;
}

.conv-icon-preview {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-dim);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: var(--font-display);
    font-size: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.conv-icon-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-preview {
    width: 100%;
    height: 92px;
    border-radius: var(--radius-md);
    background: var(--bg2);
    background-size: cover;
    background-position: center;
    border: 1px solid var(--border);
}

.gallery-edit-preview {
    width: 100%;
    max-height: 240px;
    object-fit: contain;
    border-radius: var(--radius-md);
    background: var(--bg2);
}

.tools-board {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px 24px;
}
.tools-board::-webkit-scrollbar {
    display: none;
}
.tools-section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text3);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 8px 4px 10px;
}
.tool-card {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    box-shadow: 0 1px 4px var(--shadow);
    display: flex;
    align-items: center;
    gap: 12px;
}
.tool-card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}
.tool-card-info {
    flex: 1;
    min-width: 0;
}
.tool-card-name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
}
.tool-card-desc {
    font-size: 12px;
    color: var(--text3);
    margin-top: 2px;
}
.tool-card-funcs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.tool-func-tag {
    font-size: 10px;
    color: var(--accent);
    background: var(--accent-dim);
    padding: 2px 7px;
    border-radius: 6px;
}
.tool-card-meta {
    font-size: 11px;
    color: var(--text3);
    margin-top: 4px;
}
.tool-card-manage {
    font-size: 11px;
    color: var(--accent);
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--accent-dim);
    cursor: pointer;
    transition: background 0.12s;
}
.tool-card-manage:active {
    background: var(--bg3);
}

.voice-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--accent-dim);
    border-radius: var(--radius-lg);
    padding: 10px 16px;
    cursor: pointer;
    margin: 4px 0;
    transition: background 0.15s ease;
    max-width: 200px;
}
.voice-msg:active {
    opacity: 0.8;
}
.voice-msg-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}
.voice-msg-bars {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 24px;
    flex: 1;
}
.voice-msg-bars span {
    width: 3px;
    background: var(--accent);
    border-radius: 1.5px;
    transition: height 0.12s ease;
}
.voice-msg.playing .voice-msg-bars span {
    animation: vWave 0.6s ease-in-out infinite alternate;
}
.voice-msg.playing .voice-msg-bars span:nth-child(2n) {
    animation-delay: 0.15s;
}
.voice-msg.playing .voice-msg-bars span:nth-child(3n) {
    animation-delay: 0.3s;
}
@keyframes vWave {
    0% {
        height: 4px;
    }
    100% {
        height: 18px;
    }
}
.voice-msg-dur {
    font-size: 11px;
    color: var(--text3);
    flex-shrink: 0;
}

.load-more-btn {
    text-align: center;
    font-size: 12px;
    color: var(--accent);
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}
.load-more-btn:active {
    opacity: 0.6;
}

#page-memo-edit {
    z-index: 21;
}
.memo-edit-title {
    width: 100%;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    background: transparent;
    border-bottom: 1.5px solid var(--border);
    padding: 14px 16px;
    outline: none;
    transition: border-color var(--transition);
}
.memo-edit-title:focus {
    border-color: var(--accent);
}
.memo-edit-body {
    flex: 1;
    width: 100%;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text);
    background: transparent;
    padding: 14px 16px;
    outline: none;
    resize: none;
    overflow-y: auto;
}
.memo-edit-body::-webkit-scrollbar {
    display: none;
}

.memo-list {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.memo-item {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    box-shadow: 0 1px 3px var(--shadow);
    cursor: pointer;
    transition: background var(--transition);
    border-left: 3px solid var(--accent);
}
.memo-item:active {
    background: var(--bg2);
}
.memo-item-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.memo-item-preview {
    font-size: 12px;
    color: var(--text3);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.memo-item-time {
    font-size: 11px;
    color: var(--text3);
    margin-top: 5px;
}

.tickle-row {
    display: flex;
    justify-content: center;
    padding: 6px 0;
}
.tickle-text {
    font-size: 11px;
    color: var(--text3);
    background: var(--bg2);
    padding: 3px 12px;
    border-radius: 10px;
    user-select: none;
}
@keyframes headShake {
    0% {
        transform: rotate(0);
    }
    15% {
        transform: rotate(-12deg) scale(1.1);
    }
    30% {
        transform: rotate(10deg) scale(1.15);
    }
    45% {
        transform: rotate(-8deg) scale(1.1);
    }
    60% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-2deg);
    }
    100% {
        transform: rotate(0);
    }
}
.msg-avatar.shaking {
    animation: headShake 0.6s ease;
}

.chat-search-bar {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    z-index: 6;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    border-bottom: 1px solid var(--border);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.22s ease, opacity 0.22s ease;
    pointer-events: none;
    box-shadow: 0 5px 16px rgba(26, 19, 16, 0.06);
}
.chat-search-bar.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.chat-search-bar input {
    min-width: 0;
    font-size: 14px;
    color: var(--text);
    background: var(--bg2);
    border-radius: var(--radius-md);
    padding: 9px 11px;
    border: 1.5px solid transparent;
    transition: border-color var(--transition);
}
.chat-search-bar input:focus {
    border-color: var(--accent);
}
.chat-search-bar input::placeholder {
    color: var(--text3);
}
.chat-search-nav {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--text3);
    white-space: nowrap;
    min-width: 94px;
    justify-content: flex-end;
}
.chat-search-nav button {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
}
.chat-search-nav button:active {
    background: var(--accent-dim);
}
.chat-search-close {
    width: 40px;
    height: 30px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text2);
    font-size: 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.chat-search-close:active {
    background: var(--bg2);
}
@media (max-width: 360px) {
    .chat-search-bar {
        grid-template-columns: minmax(0, 1fr) auto;
    }
    .chat-search-nav {
        grid-column: 1 / -1;
        justify-content: space-between;
        min-width: 0;
    }
}

.search-highlight {
    background: rgba(218, 119, 86, 0.3);
    border-radius: 2px;
}
.search-highlight.active {
    background: rgba(218, 119, 86, 0.6);
}

/* ─── 语音气泡 ─── */
.voice-bubble {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: opacity 0.12s;
    min-width: 140px;
    max-width: 220px;
    position: relative;
}
.msg-row.ai .voice-bubble {
    background: var(--bubble-ai);
    color: var(--bubble-ai-text);
    border-bottom-left-radius: var(--radius-sm);
    box-shadow: 0 1px 3px var(--shadow);
}
.msg-row.user .voice-bubble {
    background: var(--bubble-user);
    color: var(--bubble-user-text);
    border-bottom-right-radius: var(--radius-sm);
}
.voice-bubble:active {
    opacity: 0.8;
}

.voice-play-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.voice-play-btn:active {
    transform: scale(0.9);
}
.msg-row.user .voice-play-btn {
    background: rgba(26, 19, 16, 0.18);
    color: var(--bubble-user-text);
}

.voice-wave {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 28px;
}
.voice-wave-bar {
    width: 3px;
    border-radius: 1.5px;
    background: currentColor;
    opacity: 0.4;
    transition: height 0.1s ease;
}
.voice-bubble.playing .voice-wave-bar {
    animation: vBar 0.5s ease-in-out infinite alternate;
    opacity: 0.8;
}
.voice-bubble.playing .voice-wave-bar:nth-child(2n) {
    animation-delay: 0.1s;
}
.voice-bubble.playing .voice-wave-bar:nth-child(3n) {
    animation-delay: 0.2s;
}
.voice-bubble.playing .voice-wave-bar:nth-child(5n) {
    animation-delay: 0.3s;
}
@keyframes vBar {
    0% {
        height: 4px;
    }
    100% {
        height: 20px;
    }
}

.voice-duration {
    font-size: 11px;
    opacity: 0.7;
    flex-shrink: 0;
    min-width: 24px;
    text-align: right;
}

.voice-transcript {
    font-size: 12px;
    line-height: 1.5;
    color: var(--text2);
    padding: 6px 14px 10px;
    border-top: 1px solid var(--border);
    margin-top: 4px;
    opacity: 0.8;
}
.voice-transcript.translation {
    border-top: 0;
    background: var(--surface2);
    border-radius: var(--radius-sm);
    margin-top: 6px;
    padding: 8px 10px;
}

.voice-loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border-radius: var(--radius-lg);
    font-size: 12px;
    color: var(--text3);
}
.msg-row.ai .voice-loading {
    background: var(--bubble-ai);
    border-bottom-left-radius: var(--radius-sm);
    box-shadow: 0 1px 3px var(--shadow);
}

/* ─── 引用 ─── */
.quote-preview {
    background: var(--bg2);
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 6px 10px;
    margin: 0 12px 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text2);
    line-height: 1.4;
}
.quote-preview-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quote-preview-close {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text3);
    font-size: 14px;
    flex-shrink: 0;
    cursor: pointer;
}
.quote-preview-close:active {
    background: var(--bg3);
}

/* 气泡内引用块 */
.bubble-quote {
    background: var(--bg2);
    border-left: 2px solid var(--accent);
    border-radius: 0 4px 4px 0;
    padding: 4px 8px;
    margin-bottom: 6px;
    font-size: 12px;
    color: var(--text3);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msg-row.user .bubble-quote {
    background: rgba(255, 255, 255, 0.15);
    border-left-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.75);
}

/* ─── 特效 ─── */
#effect-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 999;
    overflow: hidden;
}
.effect-particle {
    position: absolute;
    pointer-events: none;
    will-change: transform, opacity;
    user-select: none;
}
@keyframes roseFall {
    0% {
        transform: translateY(0) rotate(0deg) scale(0.6);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(10px) rotate(10deg) scale(1);
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 100px)) rotate(720deg) scale(0.4);
        opacity: 0;
    }
}
@keyframes cutePopup {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }
    40% {
        transform: translate(-50%, -50%) scale(1.4);
        opacity: 1;
    }
    70% {
        transform: translate(-50%, -50%) scale(0.9);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}
@keyframes heartRain {
    0% {
        transform: translateY(0) rotate(0deg) scale(0.5);
        opacity: 0;
    }
    15% {
        opacity: 1;
        transform: translateY(15px) rotate(15deg) scale(1);
    }
    85% {
        opacity: 1;
    }
    100% {
        transform: translateY(calc(100vh + 80px)) rotate(1080deg) scale(0.3);
        opacity: 0;
    }
}
.bomb-shake {
    animation: bombShake 0.5s ease;
}
@keyframes bombShake {
    0%,
    100% {
        transform: translate(0);
    }
    10% {
        transform: translate(-8px, 4px);
    }
    20% {
        transform: translate(6px, -6px);
    }
    30% {
        transform: translate(-4px, 8px);
    }
    40% {
        transform: translate(2px, -4px);
    }
    50% {
        transform: translate(-6px, 2px);
    }
    60% {
        transform: translate(4px, -2px);
    }
    70% {
        transform: translate(-2px, 6px);
    }
    80% {
        transform: translate(3px, -3px);
    }
    90% {
        transform: translate(-4px, 2px);
    }
}
.bomb-flash {
    position: fixed;
    inset: 0;
    background: rgba(255, 200, 150, 0.6);
    z-index: 998;
    pointer-events: none;
    animation: bombFlash 0.6s ease forwards;
}
@keyframes bombFlash {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* ─── 红包 ─── */
.red-packet {
    width: 180px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s, opacity 0.15s;
    user-select: none;
    animation: bubbleIn 0.18s ease-out;
}
.red-packet:active {
    transform: scale(0.96);
}
.red-packet.pending {
    background: linear-gradient(135deg, #E84040 0%, #C03030 100%);
    color: white;
}
.red-packet.claimed {
    background: var(--bg3);
    color: var(--text3);
    cursor: default;
    opacity: 0.75;
}
.red-packet-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 10px;
}
.red-packet-icon {
    font-size: 28px;
}
.red-packet-info {
    flex: 1;
}
.red-packet-amount {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0;
}
.red-packet-label {
    font-size: 11px;
    opacity: 0.8;
    margin-top: 2px;
}
.red-packet-footer {
    font-size: 11px;
    padding: 8px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    opacity: 0.7;
}
.red-packet.claimed .red-packet-footer {
    border-top-color: var(--border);
}

.rp-action-row {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}
.rp-action-text {
    font-size: 11px;
    color: var(--text3);
    background: var(--bg2);
    padding: 3px 12px;
    border-radius: 10px;
    user-select: none;
}

.silence-row {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}
.silence-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text3);
    background: var(--bg2);
    padding: 3px 12px;
    border-radius: 10px;
    user-select: none;
}
.silence-icon {
    font-size: 13px;
}
.effect-row {
    display: flex;
    justify-content: center;
    padding: 4px 0;
}
.effect-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text3);
    background: var(--bg2);
    padding: 3px 12px;
    border-radius: 10px;
    user-select: none;
}

/* ─── 转盘结果 ─── */
.wheel-result-row {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}
.wheel-result {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: var(--surface);
    border: 1.5px solid var(--accent);
    border-radius: var(--radius-md);
    padding: 12px 24px;
    box-shadow: 0 2px 12px var(--shadow);
    animation: wheelPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wheel-result-emoji {
    font-size: 28px;
    animation: wheelSpin 0.6s ease-out;
}
@keyframes wheelSpin {
    0% {
        transform: rotate(0deg) scale(0.5);
        opacity: 0;
    }
    60% {
        transform: rotate(720deg) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: rotate(1080deg) scale(1);
    }
}
@keyframes wheelPop {
    from {
        opacity: 0;
        transform: scale(0.7);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.wheel-result-text {
    font-size: 15px;
    font-weight: 600;
    color: var(--accent);
    font-family: var(--font-display);
}
.wheel-result-label {
    font-size: 11px;
    color: var(--text3);
}

/* ════════════════════════════════
   小宠物系统 CSS
   ════════════════════════════════ */

/* ─── 侧边栏宠物卡片 ─── */
.sidebar-pet-card {
    margin: 0 16px 12px;
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: 0 1px 6px var(--shadow);
    cursor: pointer;
    transition: transform 0.15s;
}
.sidebar-pet-card:active {
    transform: scale(0.97);
}

.pet-display {
    display: flex;
    align-items: center;
    gap: 14px;
}
.pet-avatar-wrap {
    position: relative;
    width: 68px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    filter: drop-shadow(0 8px 12px rgba(26, 19, 16, 0.14));
    font-size: 68px;
}
.pet-avatar-wrap.large {
    width: 132px;
    height: 132px;
    margin: 2px auto 12px;
    cursor: pointer;
    font-size: 132px;
}
.pet-avatar-creature {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: 50% 84%;
    transition: transform 0.16s ease;
}
.pet-avatar-creature.idle {
    animation: petIdle 3.2s ease-in-out infinite;
}
.pet-avatar-creature.duang {
    animation: petDuang 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pet-body {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 20%;
    bottom: 9%;
    z-index: 2;
    border-radius: 48% 48% 44% 44%;
    background:
        radial-gradient(circle at 32% 30%, rgba(255,255,255,0.92) 0 8%, transparent 9%),
        linear-gradient(150deg, #FFE7D6 0%, #F6B08D 52%, #D96F51 100%);
    border: 2px solid rgba(255, 255, 255, 0.82);
    box-shadow: inset -8px -10px 16px rgba(128, 57, 36, 0.15), inset 6px 7px 12px rgba(255,255,255,0.55);
}
.pet-tail {
    position: absolute;
    right: 4%;
    top: 47%;
    width: 24%;
    height: 13%;
    z-index: 1;
    border-radius: 999px 999px 999px 20px;
    background: linear-gradient(110deg, #D96F51 0%, #F6A783 72%, #FFE1CF 100%);
    border: 2px solid rgba(255,255,255,0.62);
    box-shadow: inset -4px -3px 7px rgba(128, 57, 36, 0.16);
    transform-origin: 8% 58%;
    animation: petTailWag 0.82s ease-in-out infinite;
}
.pet-ear {
    position: absolute;
    top: 14%;
    width: 28%;
    height: 34%;
    z-index: 1;
    border-radius: 70% 70% 46% 46%;
    background:
        radial-gradient(ellipse at 50% 58%, #F8C4AC 0 34%, transparent 36%),
        linear-gradient(165deg, #DD7656 0%, #9E4D3B 100%);
    border: 2px solid rgba(255,255,255,0.55);
    transform-origin: 50% 18%;
}
.pet-ear.left {
    left: 13%;
    transform: rotate(-26deg);
}
.pet-ear.right {
    right: 13%;
    transform: rotate(26deg);
}
.pet-face {
    position: absolute;
    inset: 0;
    z-index: 4;
}
.pet-blaze {
    position: absolute;
    left: 50%;
    top: 25%;
    width: 22%;
    height: 30%;
    border-radius: 50% 50% 44% 44%;
    transform: translateX(-50%);
    background: rgba(255, 248, 238, 0.82);
    box-shadow: 0 1px 0 rgba(255,255,255,0.55);
}
.pet-eye {
    position: absolute;
    top: 45%;
    width: 8.5%;
    height: 10.5%;
    border-radius: 50%;
    background: #35231D;
    box-shadow: inset 1px 1px 0 rgba(255,255,255,0.55), 0 1px 0 rgba(255,255,255,0.4);
    transform-origin: 50% 50%;
    animation: petBlink 5.8s ease-in-out infinite;
}
.pet-eye.left {
    left: 34%;
}
.pet-eye.right {
    right: 34%;
}
.pet-muzzle {
    position: absolute;
    left: 50%;
    top: 52%;
    width: 31%;
    height: 24%;
    border-radius: 48% 48% 46% 46%;
    transform: translateX(-50%);
    background: rgba(255, 246, 235, 0.9);
    box-shadow: inset 0 -2px 4px rgba(124, 67, 48, 0.08);
}
.pet-nose {
    position: absolute;
    left: 50%;
    top: 55%;
    width: 9%;
    height: 6.5%;
    border-radius: 58% 58% 48% 48%;
    transform: translateX(-50%);
    background: #4A2C24;
    z-index: 2;
}
.pet-cheek {
    position: absolute;
    top: 59%;
    width: 10%;
    height: 6.5%;
    border-radius: 50%;
    background: rgba(255, 126, 118, 0.24);
}
.pet-cheek.left {
    left: 26%;
}
.pet-cheek.right {
    right: 26%;
}
.pet-mouth {
    position: absolute;
    left: 50%;
    top: 59%;
    width: 13%;
    height: 9%;
    border-bottom: 2px solid #6A3A2E;
    border-radius: 0 0 60% 60%;
    transform: translateX(-50%);
    z-index: 2;
}
.pet-paw {
    position: absolute;
    z-index: 5;
    bottom: 10%;
    width: 12%;
    height: 9%;
    border-radius: 50%;
    background: rgba(255, 246, 238, 0.9);
    box-shadow: inset 0 -1px 2px rgba(124, 67, 48, 0.08);
}
.pet-paw.left {
    left: 28%;
}
.pet-paw.right {
    right: 28%;
}
.pet-acc-head {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 38%;
    height: 24%;
    z-index: 7;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}
.pet-acc-face {
    position: absolute;
    top: 39%;
    left: 50%;
    transform: translateX(-50%);
    width: 43%;
    height: 13%;
    z-index: 8;
}
.pet-acc-neck {
    position: absolute;
    left: 50%;
    top: 68%;
    width: 52%;
    height: 20%;
    transform: translateX(-50%);
    z-index: 7;
    pointer-events: none;
}
.pet-acc-shape,
.pet-acc-shape::before,
.pet-acc-shape::after {
    box-sizing: border-box;
}
.pet-acc-head.acc-hat::before {
    content: '';
    position: absolute;
    left: 28%;
    top: 0;
    width: 44%;
    height: 58%;
    border-radius: 8% 8% 3px 3px;
    background: linear-gradient(#2B2521, #111);
    border: 1px solid rgba(255,255,255,0.24);
}
.pet-acc-head.acc-hat::after {
    content: '';
    position: absolute;
    left: 8%;
    top: 51%;
    width: 84%;
    height: 18%;
    border-radius: 999px;
    background: #17110F;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.16);
}
.pet-acc-head.acc-crown {
    top: 0;
}
.pet-acc-head.acc-crown::before {
    content: '';
    position: absolute;
    left: 12%;
    top: 20%;
    width: 76%;
    height: 54%;
    clip-path: polygon(0 100%, 8% 32%, 28% 66%, 50% 10%, 72% 66%, 92% 32%, 100% 100%);
    background: linear-gradient(#FFE070, #D9A321);
    border-radius: 0 0 6px 6px;
    filter: drop-shadow(0 1px 0 rgba(120, 82, 0, 0.32));
}
.pet-acc-head.acc-ribbon::before,
.pet-acc-head.acc-ribbon::after {
    content: '';
    position: absolute;
    top: 34%;
    width: 36%;
    height: 34%;
    background: #F06D9F;
    border: 1px solid rgba(255,255,255,0.55);
}
.pet-acc-head.acc-ribbon::before {
    left: 13%;
    border-radius: 60% 12% 60% 18%;
    transform: rotate(-16deg);
}
.pet-acc-head.acc-ribbon::after {
    right: 13%;
    border-radius: 12% 60% 18% 60%;
    transform: rotate(16deg);
}
.pet-acc-head.acc-ribbon .pet-acc-knot,
.pet-acc-neck.acc-bowtie .pet-acc-knot {
    position: absolute;
    left: 50%;
    top: 42%;
    width: 16%;
    height: 22%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #D9487E;
    z-index: 1;
}
.pet-acc-head.acc-flower::before {
    content: '';
    position: absolute;
    left: 35%;
    top: 24%;
    width: 30%;
    height: 30%;
    border-radius: 50%;
    background: #FFD36B;
    box-shadow:
        0 -12px 0 #FF93B8,
        11px -4px 0 #FF93B8,
        7px 10px 0 #FF93B8,
        -7px 10px 0 #FF93B8,
        -11px -4px 0 #FF93B8;
}
.pet-acc-face.acc-sunglasses::before,
.pet-acc-face.acc-glasses::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    height: 74%;
    border-radius: 999px;
}
.pet-acc-face.acc-sunglasses::before {
    background:
        radial-gradient(ellipse at 30% 50%, #1B1715 0 22%, transparent 24%),
        radial-gradient(ellipse at 70% 50%, #1B1715 0 22%, transparent 24%),
        linear-gradient(90deg, transparent 0 43%, #1B1715 43% 57%, transparent 57%);
}
.pet-acc-face.acc-glasses::before {
    background:
        radial-gradient(ellipse at 30% 50%, transparent 0 21%, #47352F 23% 28%, transparent 30%),
        radial-gradient(ellipse at 70% 50%, transparent 0 21%, #47352F 23% 28%, transparent 30%),
        linear-gradient(90deg, transparent 0 44%, #47352F 44% 56%, transparent 56%);
}
.pet-acc-neck.acc-scarf::before {
    content: '';
    position: absolute;
    left: 4%;
    top: 9%;
    width: 92%;
    height: 42%;
    border-radius: 999px;
    background: linear-gradient(90deg, #D73545, #F05C5F 44%, #B51F38);
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 2px 4px rgba(93, 28, 26, 0.18);
}
.pet-acc-neck.acc-scarf::after {
    content: '';
    position: absolute;
    left: 56%;
    top: 38%;
    width: 21%;
    height: 58%;
    border-radius: 4px 4px 8px 8px;
    background: linear-gradient(180deg, #C6203D, #EF5159);
    transform: rotate(-8deg);
    box-shadow: inset 2px 0 0 rgba(255,255,255,0.2);
}
.pet-acc-neck.acc-bowtie::before,
.pet-acc-neck.acc-bowtie::after {
    content: '';
    position: absolute;
    top: 20%;
    width: 36%;
    height: 42%;
    background: #E84E8A;
    border: 1px solid rgba(255,255,255,0.52);
}
.pet-acc-neck.acc-bowtie::before {
    left: 12%;
    border-radius: 70% 12% 70% 18%;
    transform: rotate(-12deg);
}
.pet-acc-neck.acc-bowtie::after {
    right: 12%;
    border-radius: 12% 70% 18% 70%;
    transform: rotate(12deg);
}
.pet-avatar-emoji {
    position: relative;
    z-index: 1;
    transition: transform 0.15s;
}
.pet-avatar-emoji.duang {
    animation: petDuang 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes petDuang {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.18, 0.84) rotate(-6deg);
    }
    50% {
        transform: scale(0.86, 1.18) rotate(5deg);
    }
    70% {
        transform: scale(1.08, 0.94) rotate(-3deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}
@keyframes petIdle {
    0%, 100% {
        transform: translateY(0) scale(1);
    }
    50% {
        transform: translateY(-3px) scale(1.02, 0.98);
    }
}
@keyframes petBlink {
    0%, 45%, 49%, 100% {
        transform: scaleY(1);
    }
    47% {
        transform: scaleY(0.08);
    }
}
@keyframes petTailWag {
    0%, 100% {
        transform: rotate(-16deg);
    }
    50% {
        transform: rotate(18deg);
    }
}
@keyframes petNibble {
    0% {
        transform: translate(-50%, 8px) scale(0.7);
        opacity: 0;
    }
    35% {
        transform: translate(-50%, -12px) scale(1.15);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -30px) scale(0.9);
        opacity: 0;
    }
}

.pet-info {
    flex: 1;
}
.pet-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.pet-name {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}
.pet-mood-tag {
    font-size: 10px;
    padding: 1px 8px;
    border-radius: 8px;
    font-weight: 500;
}
.pet-mood-tag.happy {
    background: #E8F5E9;
    color: #43A047;
}
.pet-mood-tag.ok {
    background: #FFF8E1;
    color: #F9A825;
}
.pet-mood-tag.sad {
    background: #FFEBEE;
    color: #E53935;
}

.pet-stat-bars {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.pet-stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: var(--text3);
}
.pet-stat-label {
    width: 14px;
    text-align: center;
}
.pet-stat-track {
    flex: 1;
    height: 4px;
    background: var(--bg3);
    border-radius: 2px;
    overflow: hidden;
}
.pet-stat-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.5s ease;
}
.pet-stat-fill.satiety {
    background: #66BB6A;
}
.pet-stat-fill.mood {
    background: #FFA726;
}
.pet-stat-fill.energy {
    background: #42A5F5;
}

.pet-line {
    font-size: 11px;
    color: var(--text3);
    font-style: italic;
    margin-top: 8px;
    line-height: 1.5;
}

/* ─── 宠物面板 ─── */
.pet-panel-section {
    margin-bottom: 16px;
}
.pet-stage {
    position: relative;
    padding: 10px 0 2px;
    border-radius: var(--radius-md);
    background: linear-gradient(180deg, var(--surface2), transparent);
    overflow: hidden;
}
.pet-stage-treat {
    position: absolute;
    left: 50%;
    top: 58%;
    z-index: 8;
    font-size: 24px;
    pointer-events: none;
    animation: petNibble 0.85s ease-out forwards;
}
.pet-panel-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text3);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.pet-food-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(66px, 1fr));
    gap: 8px;
}
.pet-food-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: var(--radius-sm);
    background: var(--bg2);
    cursor: pointer;
    transition: transform 0.12s, background 0.12s;
    min-height: 72px;
}
.pet-food-item:active {
    transform: scale(0.92);
    background: var(--accent-dim);
}
.pet-food-emoji {
    font-size: 24px;
}
.pet-food-name {
    font-size: 10px;
    color: var(--text2);
}
.pet-food-stat {
    font-size: 9px;
    color: var(--text3);
}

.pet-acc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    gap: 8px;
}
.pet-acc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 64px;
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    background: var(--bg2);
    cursor: pointer;
    font-size: 12px;
    transition: all 0.12s;
    border: 1.5px solid transparent;
    text-align: center;
}
.pet-acc-emoji {
    font-size: 20px;
    line-height: 1;
}
.pet-acc-name {
    color: var(--text2);
}
.pet-acc-item:active {
    transform: scale(0.95);
}
.pet-acc-item.equipped {
    border-color: var(--accent);
    background: var(--accent-dim);
}

.pet-log-list {
    max-height: 160px;
    overflow-y: auto;
    font-size: 12px;
    line-height: 1.7;
    color: var(--text2);
}
.pet-log-list::-webkit-scrollbar {
    display: none;
}
.pet-log-entry {
    display: flex;
    gap: 6px;
}
.pet-log-time {
    color: var(--text3);
    flex-shrink: 0;
    font-size: 11px;
}
.pet-log-who {
    color: var(--accent);
    font-weight: 500;
    flex-shrink: 0;
}

.pet-add-food {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    border-radius: var(--radius-sm);
    border: 1.5px dashed var(--border);
    cursor: pointer;
    font-size: 20px;
    color: var(--text3);
    transition: all 0.12s;
}
.pet-add-food:active {
    background: var(--bg2);
}

.pet-edit-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.pet-edit-row input {
    flex: 1;
    font-size: 14px;
    color: var(--text);
    background: var(--bg2);
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    padding: 7px 10px;
}
.pet-edit-row input:focus {
    border-color: var(--accent);
}

#modal-pet .modal-sheet {
    max-height: 85vh;
    overflow-y: auto;
}
#modal-pet .modal-sheet::-webkit-scrollbar {
    display: none;
}

/* ════════════════════════════════
   Paper Journal Visual Refresh
   CSS-only polish: warm paper, soft cards, private chat feel
════════════════════════════════ */
:root {
    --paper: #FAF9F6;
    --paper-deep: #F2F1ED;
    --card: rgba(255, 252, 246, 0.92);
    --card-soft: rgba(255, 249, 240, 0.72);
    --line-soft: rgba(92, 67, 49, 0.105);
    --shadow-soft: none;
    --shadow-card: none;
    --radius-card: 18px;
    --radius-bubble: 20px;
    --accent: #6B8FA8;
    --accent-light: #8AADC4;
    --accent-dim: rgba(107, 143, 168, 0.15);
    --bg: var(--paper);
    --bg2: #F2F1ED;
    --bg3: #E7E5DF;
    --surface: var(--card);
    --surface2: var(--card-soft);
    --text: #241913;
    --text2: #655044;
    --text3: #A08A7B;
    --border: var(--line-soft);
    --shadow: transparent;
    --bubble-user: #B8C4CF;
    --bubble-user-text: #1C2128;
    --bubble-ai: rgba(255, 255, 255, 0.82);
    --bubble-ai-text: #1C2128;
    --radius-sm: 10px;
    --radius-md: 12px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-theme="dark"] {
    --paper: #1C1F24;
    --paper-deep: #23272E;
    --card: rgba(42, 47, 56, 0.94);
    --card-soft: rgba(49, 54, 64, 0.70);
    --line-soft: rgba(238, 218, 196, 0.105);
    --shadow-soft: none;
    --shadow-card: none;
    --accent: #7AA3BC;
    --accent-light: #8AADC4;
    --accent-dim: rgba(122, 163, 188, 0.16);
    --bg: #1C1F24;
    --bg2: #23272E;
    --bg3: #2A2F38;
    --surface: #2A2F38;
    --surface2: #313640;
    --text: #F5E9DC;
    --text2: #D0BAA8;
    --text3: #988274;
    --border: var(--line-soft);
    --shadow: transparent;
    --bubble-user: #3D5060;
    --bubble-user-text: #E8EBF0;
    --bubble-ai: rgba(42, 47, 56, 0.88);
    --bubble-ai-text: #E8EBF0;
}

body,
.page {
    background: var(--bg);
}
[data-theme="dark"] body,
[data-theme="dark"] .page {
    background: var(--bg);
}
#app {
    background: var(--bg);
}
button,
.conv-item-content,
.settings-row,
.model-option-row,
.attach-menu-item,
.sidebar-conv-item {
    -webkit-tap-highlight-color: transparent;
}
button:active,
.conv-item-content:active,
.settings-row:active,
.model-option-row:active,
.attach-menu-item:active {
    transform: translateY(1px);
}

.topbar {
    margin: 8px 10px 0;
    width: calc(100% - 20px);
    height: calc(var(--nav-h) - 6px);
    padding: env(safe-area-inset-top, 0px) 10px 0;
    background: var(--card);
    background: color-mix(in srgb, var(--card) 86%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    box-shadow: var(--shadow-soft);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}
.topbar-title {
    font-size: 18px;
    letter-spacing: 0;
    color: var(--text);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
[data-theme="dark"] .topbar-title {
    text-shadow: none;
}
.topbar-btn,
.sidebar-mini-btn,
.chat-search-nav button,
.chat-search-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--card-soft) 88%, transparent);
    border: 1px solid var(--line-soft);
    color: var(--accent);
    box-shadow: 0 2px 8px rgba(74, 45, 28, 0.055);
    transition: background var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.topbar-btn:active,
.sidebar-mini-btn:active,
.chat-search-nav button:active,
.chat-search-close:active {
    background: var(--accent-dim);
    box-shadow: none;
}
#page-chat>.topbar {
    margin-top: 8px;
    left: 10px;
    right: 10px;
    width: auto;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    box-shadow: none;
    padding-left: 8px;
    padding-right: 8px;
}
#page-chat>.topbar .topbar-title {
    color: var(--text2);
    font-size: 15px;
}
.chat-model-btn {
    background: var(--card);
    background: color-mix(in srgb, var(--card) 90%, transparent);
    border-color: var(--line-soft);
    box-shadow: none;
    border-radius: 999px;
}

.bottomnav {
    margin: 0 10px 8px;
    width: calc(100% - 20px);
    height: calc(var(--bottom-h) - 6px + var(--safe-bottom));
    padding: 4px 6px var(--safe-bottom);
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}
.bottomnav-item {
    border-radius: 18px;
    transition: color var(--transition), background var(--transition), transform var(--transition);
}
.bottomnav-item.active {
    background: var(--accent-dim);
}
.bottomnav-item:active {
    transform: translateY(1px);
    background: color-mix(in srgb, var(--accent-dim) 70%, transparent);
}
#page-settings > .topbar .topbar-btn,
#page-tools > .topbar .topbar-btn {
    visibility: hidden;
    pointer-events: none;
}
#page-gallery > .bottomnav {
    display: none;
}

.search-bar {
    padding: 14px 16px 8px;
    background: transparent;
    border-bottom: none;
}
.search-inner,
.chat-search-bar input {
    background: color-mix(in srgb, var(--card) 86%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(74, 45, 28, 0.055) inset, 0 1px 0 rgba(255,255,255,0.55);
}
.search-inner {
    padding: 10px 14px;
}
.conv-list {
    padding: 8px 12px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.conv-item {
    --swipe-action-opacity: 0.08;
    --swipe-btn-opacity: 0.28;
    --swipe-saturation: 0.45;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: transparent;
}
.conv-item-content {
    padding: 12px 12px;
    gap: 12px;
    background: #FFF9F0;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
[data-theme="dark"] .conv-item-content {
    background: #30241E;
}
.conv-item-content:active {
    background: #F8EBDD;
}
[data-theme="dark"] .conv-item-content:active {
    background: #392A23;
}
.conv-item.pinned .conv-item-content {
    background: linear-gradient(135deg, #FFF1E6, #FFF9F0);
    border-color: color-mix(in srgb, var(--accent) 22%, var(--line-soft));
}
[data-theme="dark"] .conv-item.pinned .conv-item-content {
    background: linear-gradient(135deg, #3A2A22, #30241E);
}
.conv-item-actions {
    opacity: var(--swipe-action-opacity);
    transition: opacity 0.16s ease;
}
.conv-action-btn {
    color: #FFF8F0;
    font-weight: 600;
    opacity: var(--swipe-btn-opacity);
    transition: opacity 0.16s ease, filter 0.16s ease;
    filter: saturate(var(--swipe-saturation));
}
.conv-action-pin {
    background: #C97354;
}
.conv-action-archive {
    background: #8C9A8A;
}
.conv-action-move {
    background: #9B8372;
}
.conv-divider {
    display: none;
}
.conv-avatar,
.msg-avatar,
.conv-icon-preview {
    background: linear-gradient(145deg, rgba(255,255,255,0.36), var(--accent-dim));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line-soft));
    box-shadow: 0 5px 14px rgba(74, 45, 28, 0.10);
}
.conv-avatar {
    width: 50px;
    height: 50px;
}
.conv-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
}
.conv-preview,
.conv-time {
    color: var(--text3);
}
.conv-pin-badge {
    width: 4px;
    height: 30px;
    top: 50%;
    left: 0;
    right: auto;
    transform: translateY(-50%);
    padding: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 72%, var(--paper-deep));
    box-shadow: 0 0 0 1px rgba(255,255,255,0.26), 0 4px 10px rgba(147, 78, 54, 0.16);
}
.conv-pin-badge::after {
    content: none;
}

.sidebar-overlay {
    background: rgba(36, 25, 19, 0.28);
    backdrop-filter: blur(3px);
}
.sidebar {
    background: var(--bg);
    border-right: 1px solid var(--line-soft);
    box-shadow: 12px 0 34px rgba(74, 45, 28, 0.16);
}
.sidebar-header {
    border-bottom-color: var(--line-soft);
}
.sidebar-user-card,
.sidebar-pet-card,
.tool-card,
.memo-item {
    background: var(--card);
    border: 1px solid var(--line-soft);
    box-shadow: var(--shadow-card);
    border-radius: var(--radius-card);
}
.sidebar-conv-item {
    margin: 2px 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
}
.sidebar-conv-item.active,
.sidebar-conv-item:active {
    background: var(--accent-dim);
}

.chat-messages {
    padding: 22px 12px;
    padding-top: calc(var(--nav-h) + 26px + env(safe-area-inset-top, 0px));
    gap: 9px;
    background: transparent;
    position: relative;
    z-index: 1;
}
.date-stamp,
.tickle-text,
.rp-action-text,
.silence-box {
    background: color-mix(in srgb, var(--card-soft) 86%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    padding: 4px 12px;
    box-shadow: 0 2px 8px rgba(74, 45, 28, 0.04);
}
.msg-row {
    gap: 9px;
    margin: 1px 0;
    align-items: flex-end;
}
.msg-avatar {
    width: 36px;
    height: 36px;
    font-size: 14px;
}
.msg-body {
    gap: 4px;
    max-width: min(78%, calc(100% - 76px));
}
.bubble,
.voice-bubble,
.voice-loading {
    border-radius: var(--radius-lg);
    line-height: 1.62;
}
.msg-row.ai .bubble,
.msg-row.ai .voice-bubble,
.msg-row.ai .voice-loading {
    background: var(--bubble-ai);
    color: var(--bubble-ai-text);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.msg-row.user .bubble,
.msg-row.user .voice-bubble {
    background: var(--bubble-user);
    color: var(--bubble-user-text);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.bubble-time {
    color: color-mix(in srgb, var(--text3) 88%, transparent);
    padding: 0 7px;
}
.mention-chip {
    background: var(--accent-dim);
    color: var(--accent);
    border-radius: 999px;
    padding: 2px 8px;
    margin-right: 6px;
    font-size: 11px;
    font-weight: 600;
}
.bubble.markdown-body p {
    margin: 6px 0;
}
.bubble.markdown-body ul,
.bubble.markdown-body ol {
    margin: 6px 0;
    padding-left: 20px;
}
.bubble.markdown-body li {
    margin: 3px 0;
}
.bubble.markdown-body code {
    background: color-mix(in srgb, var(--paper-deep) 72%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 7px;
    padding: 1px 6px;
}
.bubble.markdown-body pre {
    background: color-mix(in srgb, var(--paper-deep) 78%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    padding: 12px 13px;
}
.bubble.markdown-body blockquote,
.bubble-quote,
.quote-preview {
    background: color-mix(in srgb, var(--paper-deep) 54%, transparent);
    border-left-color: var(--accent);
    border-radius: 10px;
}
.quote-preview {
    margin: 0 12px 8px;
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--accent);
    box-shadow: var(--shadow-soft);
}
.thinking-ball,
.thinking-live-ball,
.tool-log {
    background: color-mix(in srgb, var(--card-soft) 90%, transparent);
    border: 1px solid var(--line-soft);
    color: var(--text2);
    border-radius: 999px;
    box-shadow: 0 3px 12px rgba(74, 45, 28, 0.055);
}
.thinking-ball-icon {
    background: var(--accent-dim);
    color: var(--accent);
}
.tool-log-row {
    padding: 5px 0;
}
.tool-log {
    padding: 5px 13px;
}

.attach-panel,
.staged-area,
.group-reply-targets {
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    border-top: 1px solid var(--line-soft);
}
.input-bar {
    margin: 0 10px calc(8px + var(--safe-bottom));
    padding: 7px;
    background: var(--bg);
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    border: 1px solid var(--border);
    border-radius: 30px;
    box-shadow: none;
}
.input-wrap {
    min-height: 38px;
    background: var(--bg2);
    border: 1.5px solid var(--border);
    border-radius: 24px;
    padding: 8px 12px;
    box-shadow: none;
}
.input-wrap:focus-within {
    border-color: var(--accent);
    background: var(--bg2);
    box-shadow: none;
}
#page-chat .bubble,
#page-chat .chat-model-btn,
#page-chat .input-wrap,
#page-chat .input-bar {
    box-shadow: none;
}
#page-chat *,
#page-chat *::before,
#page-chat *::after {
    box-shadow: none;
}
#page-chat>.topbar {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
#page-chat .send-btn {
    background: var(--accent);
}
.input-plus,
.send-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    box-shadow: 0 5px 12px rgba(74, 45, 28, 0.10);
}
.input-plus {
    background: color-mix(in srgb, var(--paper-deep) 72%, transparent);
    border: 1px solid var(--line-soft);
}
.send-btn {
    background: linear-gradient(180deg, var(--accent-light), var(--accent));
}
.send-btn:active,
.input-plus:active {
    transform: translateY(1px) scale(0.98);
}
.group-reply-targets {
    padding: 8px 12px 6px;
}
.group-reply-target-chip,
.staged-bubble,
.attach-menu-icon,
.attach-menu-item,
.pet-food-item,
.pet-acc-item {
    border: 1px solid var(--line-soft);
    box-shadow: 0 2px 8px rgba(74, 45, 28, 0.045);
}
.group-reply-target-chip.active {
    box-shadow: 0 0 0 2px var(--accent-dim);
}
.attach-menu {
    padding: 16px;
}
.attach-menu-item {
    background: color-mix(in srgb, var(--card-soft) 78%, transparent);
}

.settings-list,
.tools-board,
.memo-list {
    padding: 18px 14px 28px;
}
.settings-section {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.settings-section-title {
    padding: 15px 16px 7px;
    letter-spacing: 0.6px;
    color: var(--text3);
}
.settings-row,
.settings-field-row {
    border-top-color: var(--line-soft);
}
.settings-row:active {
    background: color-mix(in srgb, var(--paper-deep) 46%, transparent);
}
.settings-row-icon {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.42);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.36);
}
.field-input,
.field-textarea,
.edit-sheet-input,
.edit-sheet-textarea,
.modal-input,
.pet-edit-row input {
    background: color-mix(in srgb, var(--paper-deep) 62%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    box-shadow: inset 0 1px 5px rgba(74, 45, 28, 0.04);
}
.field-input:focus,
.field-textarea:focus,
.edit-sheet-input:focus,
.edit-sheet-textarea:focus,
.modal-input:focus,
.pet-edit-row input:focus {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line-soft));
    box-shadow: 0 0 0 3px var(--accent-dim), inset 0 1px 5px rgba(74, 45, 28, 0.035);
}
.toggle {
    background: color-mix(in srgb, var(--paper-deep) 80%, transparent);
    border: 1px solid var(--line-soft);
    box-shadow: inset 0 1px 5px rgba(74, 45, 28, 0.08);
}
.toggle.on {
    background: color-mix(in srgb, var(--accent) 88%, var(--paper-deep));
}

.modal-overlay {
    background: rgba(44, 31, 23, 0.30);
    backdrop-filter: blur(4px);
}
[data-theme="dark"] .modal-overlay {
    background: rgba(11, 7, 5, 0.48);
}
.modal-sheet {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--card) 96%, white 4%), var(--card)),
        var(--card);
    border: 1px solid var(--line-soft);
    border-bottom: none;
    border-radius: 28px 28px 0 0;
    box-shadow: 0 -14px 40px rgba(74, 45, 28, 0.16);
}
.modal-handle {
    width: 42px;
    height: 5px;
    background: color-mix(in srgb, var(--text3) 34%, transparent);
}
.modal-title {
    letter-spacing: 0;
}
.modal-btn,
.save-btn {
    border-radius: 16px;
    background: linear-gradient(180deg, var(--accent-light), var(--accent));
    box-shadow: 0 8px 18px rgba(147, 78, 54, 0.16);
    transition: opacity var(--transition), transform var(--transition), box-shadow var(--transition);
}
.modal-btn:active,
.save-btn:active {
    opacity: 1;
    transform: translateY(1px);
    box-shadow: 0 4px 10px rgba(147, 78, 54, 0.12);
}
.modal-btn.secondary {
    background: color-mix(in srgb, var(--paper-deep) 70%, transparent);
    color: var(--text2);
    border: 1px solid var(--line-soft);
    box-shadow: 0 3px 10px rgba(74, 45, 28, 0.06);
}
.modal-btn.danger {
    background: color-mix(in srgb, #D94040 8%, transparent);
    color: #B84C42;
    border: 1px solid rgba(184, 76, 66, 0.38);
    box-shadow: none;
}
[data-theme="dark"] .modal-btn.danger {
    color: #E39A90;
    border-color: rgba(227, 154, 144, 0.34);
}
.format-picker,
.model-provider-group,
.provider-card,
.memory-item {
    background: color-mix(in srgb, var(--card-soft) 88%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: 0 3px 12px rgba(74, 45, 28, 0.045);
}
.format-btn.active,
.model-option-row.active {
    background: var(--card);
    color: var(--accent);
    box-shadow: 0 3px 10px rgba(74, 45, 28, 0.08);
}
.model-provider-head,
.model-option-row {
    border-bottom-color: var(--line-soft);
}
.tiny-btn {
    border-radius: 999px;
    border: 1px solid var(--line-soft);
    background: color-mix(in srgb, var(--paper-deep) 62%, transparent);
}
.tiny-btn.danger {
    background: rgba(217, 64, 64, 0.08);
}
.ctx-menu {
    background: var(--card);
    border: 1px solid var(--line-soft);
    box-shadow: 0 14px 36px rgba(74, 45, 28, 0.18);
    border-radius: var(--radius-card);
}
.ctx-menu-item {
    border-bottom-color: var(--line-soft);
}

.sidebar-gallery-card {
    width: calc(100% - 32px);
    margin: 0 16px 12px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    text-align: left;
}
.sidebar-gallery-card:active {
    transform: translateY(1px);
}
.sidebar-gallery-frame {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.80), rgba(255,255,255,0.22)),
        var(--paper-deep);
    border: 3px solid color-mix(in srgb, var(--card) 88%, white);
    box-shadow: 0 0 0 1px var(--line-soft), 0 5px 14px rgba(74,45,28,0.10);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    padding: 4px;
}
.sidebar-gallery-frame span {
    border-radius: 5px;
    background: var(--accent-dim);
}
.sidebar-gallery-frame span:nth-child(2) {
    background: rgba(140, 154, 138, 0.22);
}
.sidebar-gallery-frame span:nth-child(3) {
    background: rgba(155, 131, 114, 0.20);
}
.sidebar-gallery-frame span:nth-child(4) {
    background: rgba(232, 161, 127, 0.26);
}

.discover-board {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px 28px;
}
.discover-board::-webkit-scrollbar {
    display: none;
}
.discover-profile,
.discover-composer,
.discover-post {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
.discover-profile {
    min-height: 148px;
    padding: 0 16px 16px;
    background:
        linear-gradient(135deg, rgba(232, 161, 127, 0.24), transparent 58%),
        var(--card);
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
}
.discover-profile::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 96px;
    background:
        radial-gradient(circle at 18% 30%, rgba(255,255,255,0.46), transparent 28%),
        linear-gradient(135deg, #E8A17F 0%, #EED8B9 48%, #B8A58F 100%);
    opacity: 0.72;
}
.discover-profile::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 70px;
    height: 48px;
    background: linear-gradient(180deg, transparent, var(--card));
}
.discover-profile > * {
    position: relative;
    z-index: 1;
}
.discover-avatar {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent-dim);
    border: 2px solid rgba(255,255,255,0.65);
    box-shadow: 0 6px 16px rgba(74,45,28,0.13);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 20px;
}
.discover-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.discover-name {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 600;
}
.discover-sub {
    font-size: 12px;
    color: var(--text3);
    margin-top: 2px;
}
.discover-composer {
    padding: 12px;
    margin-bottom: 12px;
}
.discover-title-input,
.discover-body-input,
.discover-comment-input {
    width: 100%;
    background: color-mix(in srgb, var(--paper-deep) 58%, transparent);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    color: var(--text);
    padding: 9px 11px;
    font-size: 14px;
}
.discover-body-input {
    min-height: 74px;
    resize: vertical;
    margin-top: 8px;
    line-height: 1.55;
}
.discover-post-btn {
    margin-top: 8px;
    width: auto;
    min-width: 86px;
    padding: 9px 14px;
    float: right;
}
.discover-feed {
    display: flex;
    flex-direction: column;
    gap: 12px;
    clear: both;
}
.discover-post {
    padding: 13px;
}
.discover-post-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text3);
    font-size: 11px;
    margin-bottom: 8px;
}
.discover-author {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.discover-author-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--accent-dim);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.discover-author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.discover-post-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}
.discover-post-body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text2);
    white-space: pre-wrap;
}
.discover-actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}
.discover-action {
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--accent-dim);
    color: var(--accent);
    font-size: 12px;
}
.discover-action.danger {
    margin-left: auto;
    background: rgba(217, 64, 64, 0.08);
    color: #B84C42;
}
.discover-comments {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line-soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.discover-comment {
    font-size: 12px;
    color: var(--text2);
    background: color-mix(in srgb, var(--paper-deep) 46%, transparent);
    border-radius: 10px;
    padding: 6px 8px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
}
.discover-comment-main {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    min-width: 0;
}
.discover-comment-main .discover-author-avatar {
    width: 22px;
    height: 22px;
    font-size: 10px;
}
.discover-comment-delete {
    color: #B84C42;
    font-size: 11px;
    flex-shrink: 0;
}
.discover-comment-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.discover-comment-row button {
    flex: 0 0 auto;
}
.discover-filter {
    max-width: 118px;
    height: 34px;
    border-radius: 999px;
    padding: 0 10px;
    background: color-mix(in srgb, var(--card) 90%, var(--paper));
    border: 1px solid var(--line-soft);
    color: var(--text2);
    font-size: 12px;
    margin-left: auto;
}

/* Flat controls */
button,
button::before,
button::after,
.topbar,
.topbar-btn,
.sidebar-mini-btn,
.chat-search-nav button,
.chat-search-close,
.chat-model-btn,
.bottomnav,
.bottomnav-item,
.conv-action-btn,
.input-plus,
.send-btn,
.group-reply-target-chip,
.attach-menu-icon,
.attach-menu-item,
.staged-bubble,
.modal-btn,
.save-btn,
.format-btn,
.format-btn.active,
.model-option-row,
.model-option-row.active,
.toggle,
.toggle::after,
.tool-card-manage,
.discover-action,
.discover-post-btn,
.discover-comment-row button,
.tiny-btn,
.load-more-btn,
.voice-play-btn,
.code-copy-btn {
    box-shadow: none;
    text-shadow: none;
}
button:active,
.topbar-btn:active,
.sidebar-mini-btn:active,
.chat-search-nav button:active,
.chat-search-close:active,
.bottomnav-item:active,
.conv-action-btn:active,
.input-plus:active,
.send-btn:active,
.modal-btn:active,
.save-btn:active,
.format-btn:active,
.model-option-row:active,
.attach-menu-item:active,
.group-reply-target-chip:active,
.tool-card-manage:active,
.discover-action:active,
.tiny-btn:active,
.load-more-btn:active,
.voice-play-btn:active,
.code-copy-btn:active {
    transform: none;
    box-shadow: none;
}
.send-btn,
.modal-btn,
.save-btn,
.discover-post-btn {
    background: var(--accent);
}
.modal-btn.secondary,
.input-plus,
.format-btn.active,
.model-option-row.active {
    background: color-mix(in srgb, var(--accent-dim) 70%, transparent);
}
.toggle,
.toggle::after,
.field-input:focus,
.field-textarea:focus,
.edit-sheet-input:focus,
.edit-sheet-textarea:focus,
.modal-input:focus,
.pet-edit-row input:focus {
    box-shadow: none;
}

/* ════════════════════════════════
   Calm Product Visual System
   Clean chat layout with subtle warm paper only in the base tone.
════════════════════════════════ */
:root {
    --accent: #5F746E;
    --accent-light: #7F918B;
    --accent-dim: rgba(95, 116, 110, 0.10);
    --bg: #FAF9F6;
    --bg2: #F2F1ED;
    --bg3: #E7E5DF;
    --surface: #FFFFFF;
    --surface2: #F7F6F2;
    --text: #20211F;
    --text2: #5D615B;
    --text3: #8E928B;
    --border: rgba(32, 33, 31, 0.09);
    --shadow: rgba(32, 33, 31, 0.08);
    --bubble-user: #E6ECE9;
    --bubble-user-text: #1F2724;
    --bubble-ai: transparent;
    --bubble-ai-text: #20211F;
    --paper: var(--bg);
    --paper-deep: var(--bg2);
    --card: var(--surface);
    --card-soft: var(--surface2);
    --line-soft: var(--border);
    --shadow-soft: none;
    --shadow-card: none;
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-card: 12px;
    --radius-bubble: 16px;
    --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
    --transition: 0.16s ease;
}

[data-theme="dark"] {
    --accent: #9CAEA8;
    --accent-light: #B2C0BB;
    --accent-dim: rgba(156, 174, 168, 0.13);
    --bg: #171816;
    --bg2: #20211F;
    --bg3: #2A2C29;
    --surface: #1F211F;
    --surface2: #252724;
    --text: #F3F2EE;
    --text2: #C9CAC4;
    --text3: #92958E;
    --border: rgba(243, 242, 238, 0.10);
    --shadow: rgba(0, 0, 0, 0.28);
    --bubble-user: #2D3935;
    --bubble-user-text: #F3F2EE;
    --bubble-ai: transparent;
    --bubble-ai-text: #F3F2EE;
    --paper: var(--bg);
    --paper-deep: var(--bg2);
    --card: var(--surface);
    --card-soft: var(--surface2);
    --line-soft: var(--border);
}

html,
body,
.page,
#app,
[data-theme="dark"] body,
[data-theme="dark"] .page {
    background: var(--bg);
    background-image: none;
}
body {
    font-family: var(--font-body);
    letter-spacing: 0;
}
* {
    text-shadow: none;
}
#app {
    max-width: none;
    width: 100%;
}

.topbar,
#page-chat>.topbar {
    margin: 0;
    width: 100%;
    height: calc(52px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) 12px 0;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
#page-chat>.topbar {
    left: 0;
    right: 0;
    top: 0;
    pointer-events: none;
}
#page-chat>.topbar>* {
    pointer-events: auto;
}
.topbar-title,
.modal-title,
.discover-name,
.bubble.markdown-body h1,
.bubble.markdown-body h2,
.bubble.markdown-body h3 {
    font-family: var(--font-body);
    letter-spacing: 0;
}
.topbar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}
#page-chat>.topbar .topbar-title {
    position: static;
    transform: none;
    margin-left: 4px;
    margin-right: auto;
    max-width: min(44vw, 260px);
    color: var(--text);
    font-size: 14px;
    text-align: left;
}
.topbar-btn,
.sidebar-mini-btn,
.chat-search-nav button,
.chat-search-close {
    width: 34px;
    height: 34px;
    background: transparent;
    border: 0;
    color: var(--text2);
    box-shadow: none;
}
.topbar-btn:active,
.sidebar-mini-btn:active,
.chat-search-nav button:active,
.chat-search-close:active {
    background: var(--bg2);
}
.chat-model-btn {
    height: 32px;
    max-width: 130px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text2);
    font-size: 12px;
    font-weight: 500;
}

.bottomnav {
    margin: 0;
    width: 100%;
    height: calc(58px + var(--safe-bottom));
    padding: 4px 10px var(--safe-bottom);
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}
.bottomnav-item {
    border-radius: 10px;
    font-size: 11px;
    color: var(--text3);
    gap: 2px;
    padding-top: 4px;
    background: transparent;
}
.bottomnav-item.active {
    color: var(--text);
    background: var(--bg2);
}

.search-bar {
    padding: 12px 14px 8px;
    background: var(--bg);
    border-bottom: 0;
}
.search-inner,
.chat-search-bar input {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
}
.search-inner {
    padding: 9px 12px;
}
.conv-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px 14px;
}
.conv-item {
    border-radius: 10px;
}
.conv-item-content {
    padding: 10px 10px;
    gap: 10px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
}
.conv-item-content:active,
.conv-item.pinned .conv-item-content {
    background: var(--bg2);
}
.conv-avatar,
.msg-avatar,
.conv-icon-preview,
.discover-avatar,
.discover-author-avatar {
    background: var(--bg2);
    border: 1px solid var(--border);
    box-shadow: none;
    color: var(--text2);
    font-family: var(--font-body);
}
.conv-avatar {
    width: 34px;
    height: 34px;
    font-size: 13px;
}
.conv-name {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 2px;
}
.conv-preview {
    font-size: 12px;
}
.conv-time {
    font-size: 11px;
}
.conv-pin-badge {
    width: 6px;
    height: 6px;
    top: 12px;
    right: 10px;
    left: auto;
    transform: none;
    background: var(--accent);
    box-shadow: none;
}
.conv-action-pin,
.conv-action-archive,
.conv-action-move {
    background: #6F7671;
}

.sidebar-overlay {
    background: rgba(32, 33, 31, 0.18);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.sidebar {
    width: min(292px, 86vw);
    background: var(--surface2);
    border-right: 1px solid var(--border);
    box-shadow: 8px 0 28px rgba(32, 33, 31, 0.10);
}
.sidebar-header {
    padding: calc(18px + env(safe-area-inset-top, 0px)) 14px 12px;
    border-bottom: 0;
}
.sidebar-title {
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 650;
}
.sidebar-subtitle {
    display: none;
}
.sidebar-main {
    padding: 4px 8px 12px;
}
.sidebar-section-title,
.sidebar-section-toggle {
    padding: 12px 8px 6px;
    color: var(--text3);
    font-size: 11px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 600;
}
.sidebar-conv-item,
.sidebar-user-card,
.sidebar-pet-card,
.sidebar-gallery-card,
.sidebar-assistant-current {
    margin: 0;
    padding: 9px 8px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    box-shadow: none;
}
.sidebar-conv-item.active,
.sidebar-conv-item:active,
.sidebar-user-card:active,
.sidebar-gallery-card:active {
    background: var(--bg3);
}
.sidebar-gallery-frame {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg2);
    box-shadow: none;
}
.sidebar-user-title,
.sidebar-current-name,
.sidebar-conv-name {
    font-weight: 500;
}

#page-chat {
    background: var(--bg);
}
#chat-bg-layer {
    display: block;
    overflow: hidden;
}
#chat-bg-layer > div {
    transition: opacity var(--transition), background var(--transition);
}
.chat-messages {
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    padding: calc(64px + env(safe-area-inset-top, 0px)) 18px 18px;
    gap: 12px;
    background: transparent;
}
.date-stamp,
.tickle-text,
.rp-action-text,
.silence-box {
    align-self: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--text3);
    padding: 8px 0;
}
.msg-row {
    gap: 10px;
    margin: 0;
    align-items: flex-start;
}
.msg-row.user {
    justify-content: flex-end;
    padding-left: clamp(36px, 18vw, 160px);
}
.msg-avatar {
    width: 30px;
    height: 30px;
    font-size: 12px;
    margin-top: 2px;
}
.msg-body {
    max-width: min(78%, 620px);
    gap: 3px;
    min-width: 0;
}
.msg-row.ai .msg-body {
    max-width: min(86%, 680px);
}
.msg-row.user .msg-body {
    max-width: min(72%, 560px);
}
.bubble,
.voice-bubble,
.voice-loading {
    padding: 8px 11px;
    border-radius: 14px;
    line-height: 1.62;
    box-shadow: none;
}
.msg-row.ai .bubble,
.msg-row.ai .voice-bubble,
.msg-row.ai .voice-loading {
    background: transparent;
    border: 0;
    color: var(--bubble-ai-text);
    padding-left: 0;
    padding-right: 0;
}
.msg-row.user .bubble,
.msg-row.user .voice-bubble {
    background: var(--bubble-user);
    color: var(--bubble-user-text);
    border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--border));
    width: fit-content;
    max-width: 100%;
}
.bubble-time {
    font-size: 11px;
    color: var(--text3);
    padding: 0 2px;
}
.msg-row.ai .bubble-time {
    padding-left: 0;
}
.thinking-ball,
.thinking-live-ball,
.tool-log {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    border-radius: 999px;
    box-shadow: none;
}
.thinking-ball-icon::before {
    display: none;
}
.bubble.markdown-body code,
.bubble.markdown-body pre {
    background: var(--surface2);
    border: 1px solid var(--border);
}
.bubble.markdown-body blockquote,
.bubble-quote,
.quote-preview {
    background: var(--surface2);
    border-color: var(--border);
    border-left: 3px solid var(--accent);
}

.input-bar {
    width: min(820px, calc(100% - 24px));
    margin: 0 auto calc(12px + var(--safe-bottom));
    padding: 7px;
    gap: 7px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    box-shadow: 0 8px 28px rgba(32, 33, 31, 0.08);
}
.input-wrap {
    min-height: 40px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    border-radius: 18px;
    box-shadow: none;
}
.input-wrap:focus-within {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}
.input-plus,
.send-btn {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--text2);
}
.input-plus:active {
    background: var(--bg2);
}
.send-btn {
    background: var(--text);
    color: var(--bg);
    opacity: 0.25;
}
.send-btn.ready {
    opacity: 1;
}
.attach-panel,
.staged-area,
.group-reply-targets {
    max-width: 820px;
    width: min(820px, calc(100% - 24px));
    margin-left: auto;
    margin-right: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
    box-shadow: none;
}
.attach-menu-item,
.attach-menu-icon,
.group-reply-target-chip,
.staged-bubble {
    background: var(--surface2);
    border: 1px solid var(--border);
    box-shadow: none;
}

.settings-list,
.tools-board,
.memo-list,
.discover-board {
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 18px 16px 28px;
}
.settings-section,
.provider-card,
.model-provider-group,
.format-picker,
.tool-card,
.memo-item,
.discover-profile,
.discover-composer,
.discover-post {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: none;
}
.settings-section {
    overflow: hidden;
}
.settings-row-icon,
.tool-card-icon {
    background: var(--surface2) !important;
    border: 1px solid var(--border);
    box-shadow: none;
}
.field-input,
.field-textarea,
.edit-sheet-input,
.edit-sheet-textarea,
.modal-input,
.discover-title-input,
.discover-body-input,
.discover-comment-input,
.pet-edit-row input {
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none;
}
.field-input:focus,
.field-textarea:focus,
.edit-sheet-input:focus,
.edit-sheet-textarea:focus,
.modal-input:focus,
.discover-title-input:focus,
.discover-body-input:focus,
.discover-comment-input:focus,
.pet-edit-row input:focus {
    border-color: color-mix(in srgb, var(--accent) 42%, var(--border));
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.modal-overlay {
    background: rgba(32, 33, 31, 0.24);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
.modal-sheet {
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -16px 40px rgba(32, 33, 31, 0.12);
}
.modal-btn,
.save-btn,
.discover-post-btn {
    width: auto;
    min-width: 84px;
    padding: 9px 13px;
    border-radius: 10px;
    background: var(--text);
    color: var(--bg);
    box-shadow: none;
    font-size: 14px;
}
.save-btn {
    width: 100%;
}
.modal-btn.secondary,
.tiny-btn,
.tool-card-manage,
.discover-action {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
    box-shadow: none;
}
.modal-btn.danger,
.discover-action.danger,
.tiny-btn.danger {
    background: transparent;
    border-color: rgba(190, 72, 72, 0.24);
    color: #B34D4D;
}
.toggle {
    background: var(--bg3);
    border: 0;
    box-shadow: none;
}
.toggle.on {
    background: var(--accent);
}

.discover-board {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.discover-profile {
    min-height: 168px;
    padding: 0 16px 16px;
    margin: 0;
    background: var(--surface);
    align-items: flex-end;
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.24)), var(--discover-bg, none);
    background-size: cover;
    background-position: center;
}
.discover-profile::before,
.discover-profile::after {
    display: none;
}
.discover-profile:not(.has-bg) {
    background-image: linear-gradient(135deg, var(--surface), var(--surface2));
}
.discover-profile-main {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.discover-profile.has-bg .discover-name,
.discover-profile.has-bg .discover-sub {
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
}
.discover-profile-actions {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 6px;
}
.discover-profile-action {
    height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
    color: var(--text2);
    font-size: 12px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.discover-profile.has-bg .discover-profile-action {
    background: rgba(255, 255, 255, 0.82);
    color: #20211F;
    border-color: rgba(255, 255, 255, 0.42);
}
.discover-avatar {
    width: 42px;
    height: 42px;
    font-size: 15px;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.discover-name {
    font-size: 15px;
    font-weight: 600;
}
.discover-composer {
    margin: 0;
}
.discover-feed {
    gap: 10px;
}
.discover-post-title {
    font-size: 15px;
    font-weight: 600;
}
.discover-comment {
    background: var(--surface2);
    border-radius: 8px;
}
.discover-filter {
    background: var(--surface2);
    border: 1px solid var(--border);
    color: var(--text2);
}
.discover-crop-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 7;
    overflow: hidden;
    border-radius: 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    margin-bottom: 12px;
}
.discover-crop-frame img {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    transform-origin: center;
    user-select: none;
    pointer-events: none;
}
.discover-crop-range {
    flex: 1;
}

#page-chat > :not(#chat-bg-layer):not(.topbar) {
    position: relative;
    z-index: 1;
}
#page-chat > .topbar {
    position: absolute;
    z-index: 6;
}
#page-chat .chat-search-bar {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    width: calc(100% - 24px);
    margin: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 8px) auto 0;
    box-sizing: border-box;
    padding: 8px;
    display: none;
    grid-template-columns: minmax(0, 1fr) auto 34px;
    gap: 6px;
    align-items: center;
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(32, 33, 31, 0.10);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    pointer-events: auto;
    transform: none;
    z-index: 7;
    flex-shrink: 0;
}
#page-chat .chat-search-bar.open {
    display: grid;
}
#page-chat.search-open .chat-messages {
    padding-top: 12px;
    scroll-padding-top: 12px;
}
#page-chat .chat-search-bar input {
    width: 100%;
    min-width: 0;
    height: 36px;
    padding: 0 12px;
    background: var(--surface2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none;
    font-size: 14px;
}
#page-chat .chat-search-bar input:focus {
    border-color: color-mix(in srgb, var(--accent) 44%, var(--border));
    box-shadow: 0 0 0 3px var(--accent-dim);
}
#page-chat .chat-search-nav {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    color: var(--text3);
    font-size: 12px;
    white-space: nowrap;
}
#page-chat #chat-search-count {
    min-width: 42px;
    text-align: right;
    color: var(--text3);
}
#page-chat .chat-search-nav button,
#page-chat .chat-search-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: transparent;
    border: 0;
    color: var(--text2);
    box-shadow: none;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
#page-chat .chat-search-nav button:disabled {
    color: color-mix(in srgb, var(--text3) 55%, transparent);
    opacity: 0.5;
    pointer-events: none;
}
#page-chat .chat-search-nav button:active,
#page-chat .chat-search-close:active {
    background: var(--bg2);
}
#page-chat .search-highlight {
    background: color-mix(in srgb, #ffd84d 55%, transparent);
    border-radius: 3px;
    box-shadow: 0 0 0 1px color-mix(in srgb, #ffd84d 42%, transparent);
    color: inherit;
}
#page-chat .search-highlight.active {
    background: color-mix(in srgb, #ff9f43 72%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, #ff9f43 34%, transparent);
}
#page-chat .chat-messages {
    z-index: 1;
}
#page-chat .quote-preview,
#page-chat .staged-area,
#page-chat .group-reply-targets {
    z-index: 4;
}
#page-chat .attach-panel {
    position: relative;
    z-index: 5;
    overflow: hidden;
}
#page-chat .attach-panel.open {
    overflow: visible;
}
#page-chat .input-bar {
    position: relative;
    z-index: 6;
}
#page-chat.page {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
#page-chat .chat-messages,
.chat-messages {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}
#page-chat .input-bar,
.input-bar {
    flex: 0 0 auto;
    margin: 0 auto;
    padding-bottom: calc(7px + var(--safe-bottom));
}
#page-chat .attach-panel,
#page-chat .staged-area,
#page-chat .group-reply-targets {
    flex: 0 0 auto;
}
#page-chat .msg-row.user {
    flex-direction: row-reverse;
    justify-content: flex-start;
    padding-left: 0;
}
#page-chat .msg-row.user .msg-body {
    align-items: flex-end;
}
#page-chat .msg-row.user .bubble,
#page-chat .msg-row.user .voice-bubble {
    margin-left: auto;
}

@media (min-width: 900px) {
    #app {
        left: 300px;
        width: calc(100% - 300px);
    }
    .sidebar-overlay {
        width: 300px;
        right: auto;
        opacity: 1;
        pointer-events: none;
        background: transparent;
    }
    .sidebar {
        width: 300px;
        transform: none;
        box-shadow: none;
        pointer-events: auto;
    }
    #btn-sidebar {
        visibility: hidden;
        pointer-events: none;
    }
    .page {
        max-width: none;
    }
    .chat-messages {
        padding-left: 28px;
        padding-right: 28px;
    }
    .msg-body {
        max-width: min(68%, 650px);
    }
    .msg-row.ai .msg-body {
        max-width: min(76%, 700px);
    }
    .msg-row.user .msg-body {
        max-width: min(64%, 580px);
    }
}

@media (max-width: 390px) {
    .topbar {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    .bottomnav {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
    #page-chat>.topbar {
        left: 0;
        right: 0;
        width: 100%;
    }
    .conv-list {
        padding-left: 8px;
        padding-right: 8px;
    }
    .chat-messages {
        padding-left: 14px;
        padding-right: 14px;
    }
    .msg-body {
        max-width: min(78%, calc(100% - 56px));
    }
    .msg-row.ai .msg-body {
        max-width: min(84%, calc(100% - 52px));
    }
    .msg-row.user {
        padding-left: 42px;
    }
    .msg-row.user .msg-body {
        max-width: min(76%, calc(100% - 54px));
    }
    #page-chat .msg-row.user {
        padding-left: 0;
    }
    .input-bar {
        width: calc(100% - 20px);
        gap: 7px;
    }
    .chat-model-btn {
        max-width: 96px;
    }
    #page-chat .chat-search-bar {
        width: calc(100% - 16px);
        grid-template-columns: minmax(0, 1fr) 34px;
        margin-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px) + 8px);
    }
    #page-chat.search-open .chat-messages {
        padding-top: 10px;
        scroll-padding-top: 10px;
    }
    #page-chat .chat-search-nav {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-end;
        padding-top: 2px;
    }
    #page-chat .chat-search-close {
        grid-column: 2;
        grid-row: 1;
    }
}

#page-chat #chat-messages::before {
    content: '';
    display: block;
    margin-top: auto;
    flex: 0 0 auto;
}
#chat-date-stamp:empty {
    display: none;
}
#input-bar,
#attach-panel {
    transform: none !important;
}