/* =========================================================
   agentyoo.com 深渊树洞 - 全局样式
   ========================================================= */

/* ── CSS变量 ── */
:root {
    --bg: #0a0a0f;
    --bg-card: rgba(18,18,28,0.7);
    --bg-modal: #14141f;
    --border: rgba(100,150,255,0.15);
    --border-hover: rgba(100,150,255,0.35);
    --primary: #8ab4f8;
    --primary-dim: rgba(100,150,255,0.08);
    --accent: #c8a2ff;
    --danger: #ff6b7a;
    --text: #e0e0e0;
    --text-dim: #7a8aaa;
    --text-muted: #484860;
    --font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --radius: 10px;
    --radius-sm: 8px;
    --transition: 0.25s;
}

/* ── Reset ── */
* { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; -webkit-text-size-adjust:100%; color-scheme:dark; }
body {
    font-family:var(--font);
    background:var(--bg);
    color:var(--text);
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
    line-height:1.6;
}

/* ── 滚动条 ── */
::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:rgba(10,10,20,0.4); }
::-webkit-scrollbar-thumb { background:rgba(100,150,255,0.2); border-radius:3px; }

/* ── 加载过渡 ── */
#loadingOverlay {
    position:fixed; top:0; left:0; width:100%; height:100%;
    background:#0a0a0f; z-index:9999;
    animation:loadingFadeOut 1.5s ease-out 0.5s forwards;
    pointer-events:none;
}
@keyframes loadingFadeOut { 0%{ opacity:1; } 100%{ opacity:0; visibility:hidden; } }
.loading-text {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    color:rgba(100,150,255,0.3); font-size:1em; letter-spacing:6px;
    animation:loadingPulse 1.5s ease-in-out infinite;
}
@keyframes loadingPulse { 0%,100%{ opacity:0.3; } 50%{ opacity:0.8; } }

/* ── 星空背景 ── */
#stars { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.star { animation:twinkle var(--duration) ease-in-out infinite, starAppear 0.8s ease-out both; animation-delay:var(--delay), calc(var(--delay) + 0.5s); }
@keyframes starAppear { 0%{ opacity:0; transform:scale(0); } 100%{ opacity:0.2; transform:scale(1); } }
.star {
    position:absolute; background:#fff; border-radius:50%;
    animation:twinkle var(--duration) ease-in-out infinite;
    animation-delay:var(--delay);
}
@keyframes twinkle {
    0%,100%{ opacity:0.2; transform:scale(1); }
    25%{ opacity:0.8; transform:scale(1.2); }
    50%{ opacity:0.4; transform:scale(0.8); }
    75%{ opacity:1; transform:scale(1.5); }
}

/* ── 深海波浪 ── */
.ocean { position:fixed; bottom:0; left:0; width:100%; height:100%; z-index:0; overflow:hidden; pointer-events:none; }
.wave {
    position:absolute; bottom:0; left:-100%; width:300%; height:100px;
    background:linear-gradient(180deg,transparent,rgba(0,100,200,0.08));
    animation:wave 15s linear infinite;
}
.wave:nth-child(2){ bottom:10px; opacity:0.5; animation:wave 18s linear infinite reverse; }
@keyframes wave { 0%{ transform:translateX(0); } 100%{ transform:translateX(33.33%); } }

/* ── 容器 ── */
.container { position:relative; z-index:1; max-width:600px; margin:0 auto; padding:20px 16px; min-height:100vh; }

/* ── 标题区 ── */
.header { text-align:center; padding:36px 16px 20px; position:sticky; top:0; z-index:50; background:rgba(10,10,15,0.85); backdrop-filter:blur(12px); }
.title {
    font-size:2em; font-weight:300; color:#fff; letter-spacing:4px; margin-bottom:8px;
    text-shadow:0 0 20px rgba(100,150,255,0.5);
}
.slogan { font-size:0.95em; color:var(--primary); opacity:0.8; letter-spacing:2px; margin-bottom:2px; }
.slogan-sub { font-size:0.76em; color:var(--text-muted); letter-spacing:1.5px; margin-top:4px; font-style:italic; opacity:0.65; }
.subtitle { font-size:0.78em; color:var(--text-muted); letter-spacing:1px; }

/* ── 输入区 ── */
.input-section { margin-bottom:16px; background:rgba(12,12,20,0.3); backdrop-filter:blur(12px); border:1px solid rgba(100,150,255,0.05); border-radius:var(--radius); padding:16px; position:relative; }
.input-label { font-size:0.84em; color:var(--text-dim); margin-bottom:10px; text-align:center; letter-spacing:1px; }

/* 输入框包装（含麦克风按钮） */
.input-wrapper { position:relative; }
.text-input {
    width:100%; min-height:160px; background:rgba(12,12,20,0.8);
    border:1px solid var(--border); border-radius:var(--radius);
    padding:16px 50px 16px 16px; color:var(--text); font-size:0.95em;
    font-family:var(--font); line-height:1.7; resize:vertical;
    outline:none; transition:border-color var(--transition);
}
.text-input:focus { border-color:var(--primary); }

/* ── 麦克风按钮 ── */
.mic-btn {
    position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%;
    background:var(--primary-dim); border:1px solid var(--border);
    color:var(--primary); font-size:1.05em; cursor:pointer; z-index:5;
    display:flex; align-items:center; justify-content:center;
    transition:all var(--transition);
}
.mic-btn:hover { background:rgba(100,150,255,0.18); border-color:var(--border-hover); color:#8ab4f8; }
.mic-btn.recording {
    border-color:var(--danger); color:var(--danger);
    background:rgba(255,100,100,0.12);
    box-shadow:0 0 16px rgba(255,100,100,0.25);
    animation:micPulse 1s ease-in-out infinite;
}
@keyframes micPulse { 0%,100%{ box-shadow:0 0 8px rgba(255,100,100,0.15); } 50%{ box-shadow:0 0 20px rgba(255,100,100,0.35); } }

/* 麦克风hover提示 */
.mic-tip {
    position:absolute; bottom:calc(100% + 8px); right:0;
    background:rgba(16,16,28,0.97); border:1px solid var(--border);
    color:#b0b8cc; font-size:0.72em; padding:6px 10px; border-radius:7px;
    white-space:nowrap; pointer-events:none; z-index:60; display:none; line-height:1.5;
}
.mic-tip::after {
    content:''; position:absolute; bottom:-10px; right:12px;
    border:5px solid transparent; border-top-color:rgba(100,150,255,0.25);
}
.mic-btn:hover .mic-tip { display:block; }

/* 波形动画 */
.waveform-wrap { display:none; height:40px; margin:8px 0; align-items:center; justify-content:center; gap:3px; }
.waveform-wrap.active { display:flex; }
.wave-bar { width:3px; background:var(--primary); border-radius:2px; animation:waveBar 0.6s ease-in-out infinite alternate; }
@keyframes waveBar { 0%{ height:8px; } 100%{ height:30px; } }

/* 字符计数行 */
.char-count-row { display:flex; justify-content:space-between; align-items:center; margin:6px 0 12px; }
.char-count { font-size:0.78em; color:var(--text-muted); display:flex; gap:4px; }
.char-remain { font-size:0.78em; color:var(--text-muted); }
.char-remain.warn { color:#ff9966; }
.char-remain.danger { color:var(--danger); }
.recording-status { display:none; align-items:center; gap:8px; font-size:0.82em; color:var(--danger); }
.recording-status.active { display:flex; }
.rec-dot { width:8px; height:8px; border-radius:50%; background:var(--danger); animation:recBlink 0.8s step-end infinite; }
@keyframes recBlink { 50%{ opacity:0.3; } }
.rec-time { font-variant-numeric:tabular-nums; }

/* ── 按钮组 ── */
.button-group { display:flex; gap:14px; margin-bottom:8px; }
.btn {
    flex:1; padding:14px 8px; border-radius:var(--radius); font-size:0.88em;
    font-family:var(--font); cursor:pointer; transition:all var(--transition);
    text-align:center; letter-spacing:0.5px; border:1px solid var(--border);
    position:relative; overflow:hidden; user-select:none;
}
.btn:active { transform:scale(0.96); }
.btn:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; }
.btn-crush { background:rgba(255,100,100,0.08); color:var(--danger); border-color:rgba(255,100,100,0.15); font-weight:500; }
.btn-crush:hover { background:rgba(255,100,100,0.2); border-color:rgba(255,100,100,0.5); box-shadow:0 0 20px rgba(255,100,100,0.15); transform:translateY(-2px); }
.btn-wall { background:var(--primary-dim); color:var(--primary); border-color:var(--border); font-weight:500; }
.btn-wall:hover { background:rgba(100,150,255,0.22); border-color:var(--border-hover); box-shadow:0 0 20px rgba(100,150,255,0.15); transform:translateY(-2px); }
.btn-ai { background:rgba(200,162,255,0.08); color:var(--accent); border-color:rgba(200,162,255,0.15); font-weight:500; }
.btn-ai:hover { background:rgba(200,162,255,0.2); border-color:rgba(200,162,255,0.5); box-shadow:0 0 20px rgba(200,162,255,0.15); transform:translateY(-2px); }

/* hover提示 */
.has-tip { position:relative; flex:1; display:flex; }
.tip {
    position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
    background:rgba(16,16,28,0.97); border:1px solid var(--border);
    color:#b0b8cc; font-size:0.7em; padding:6px 10px; border-radius:7px;
    white-space:nowrap; pointer-events:none; z-index:60; display:none;
    line-height:1.5; letter-spacing:0.3px;
}
.tip::after { content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:rgba(100,150,255,0.25); }
.has-tip:hover .tip { display:block; }

/* ── 漂流瓶条 ── */
.bottle-bar {
    display:flex; align-items:center; gap:10px; margin:4px 0 12px;
    padding:10px 16px; background:rgba(100,150,255,0.03);
    border:1px solid rgba(100,150,255,0.08); border-radius:var(--radius-sm);
    cursor:pointer; transition:all var(--transition); user-select:none;
}
.bottle-bar:hover { background:rgba(100,150,255,0.07); border-color:rgba(100,150,255,0.18); }
.bottle-bar:active { transform:scale(0.98); }
.bottle-bar.disabled { opacity:0.45; cursor:not-allowed; }
.bottle-bar.disabled:hover { background:rgba(100,150,255,0.03); border-color:rgba(100,150,255,0.08); }
.bottle-bar.has-bottles .bottle-bar-icon { animation:bottleBreathe 3s ease-in-out infinite; }
@keyframes bottleBreathe { 0%,100%{ text-shadow:0 0 0 transparent; } 50%{ text-shadow:0 0 12px rgba(100,150,255,0.5); } }
.bottle-bar-icon { font-size:1.35em; line-height:1; display:flex; align-items:center; }
.bottle-bar-text { font-size:0.78em; color:#5a6a8a; flex:1; text-align:center; }
.bottle-bar-count { font-size:0.72em; color:#4a5a7a; background:rgba(100,150,255,0.1); padding:2px 10px; border-radius:10px; white-space:nowrap; }

/* ── 隐私说明 ── */
.privacy-note {
    text-align:center; font-size:0.74em; color:var(--text-muted);
    margin-bottom:18px; padding:8px 0; line-height:1.6;
    border-top:1px solid rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.03);
}

/* ── 共鸣墙 ── */
.wall-section { margin-top:20px; background:rgba(12,12,20,0.25); backdrop-filter:blur(8px); border:1px solid rgba(100,150,255,0.04); border-radius:var(--radius); padding:18px 16px; position:relative; }
.wall-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:4px; }
.wall-title { font-size:1.1em; font-weight:400; color:#b8bcd0; letter-spacing:2px; }
.btn-refresh {
    background:var(--primary-dim); border:1px solid var(--border);
    color:var(--primary); padding:6px 16px; border-radius:14px;
    cursor:pointer; font-size:0.78em; transition:all var(--transition); letter-spacing:0.3px;
}
.btn-refresh:hover { background:rgba(100,150,255,0.18); border-color:var(--border-hover); }
.wall-subtitle { font-size:0.78em; color:var(--text-muted); margin-bottom:14px; letter-spacing:0.5px; }

/* 共鸣墙通知 */
.wall-new-badge {
    display:none; text-align:center; padding:8px; margin-bottom:10px;
    background:rgba(100,150,255,0.08); border:1px solid rgba(100,150,255,0.2);
    border-radius:var(--radius-sm); color:var(--primary); font-size:0.82em;
    cursor:pointer; transition:all var(--transition);
}
.wall-new-badge.show { display:block; }
.wall-more { text-align:center; padding:14px; margin-top:4px; background:rgba(100,150,255,0.04); border:1px dashed rgba(100,150,255,0.12); border-radius:var(--radius-sm); cursor:pointer; transition:all var(--transition); font-size:0.82em; color:var(--text-dim); letter-spacing:0.5px; }
.wall-more:hover { background:rgba(100,150,255,0.08); border-color:var(--border-hover); color:var(--primary); }
.wall-more.loading { opacity:0.5; cursor:wait; }
.wall-new-badge:hover { background:rgba(100,150,255,0.15); }

/* 卡片 */
.echo-card {
    background:var(--bg-card); backdrop-filter:blur(10px);
    border:1px solid rgba(100,150,255,0.08); border-radius:var(--radius);
    padding:16px 18px; margin-bottom:13px; transition:all var(--transition);
}
.echo-card:hover { border-color:rgba(100,150,255,0.2); transform:translateY(-1px); }
.echo-card.new-item {
    border-color:rgba(100,150,255,0.3);
    background:rgba(100,150,255,0.05);
    animation:fadeNew 3s ease-out forwards;
}
@keyframes fadeNew { 0%{ background:rgba(100,150,255,0.12); } 100%{ background:var(--bg-card); } }
.echo-content { color:#d0d4dc; line-height:1.7; margin-bottom:10px; font-size:0.95em; word-break:break-word; }
.echo-meta { display:flex; justify-content:space-between; align-items:center; font-size:0.78em; color:#555; }
.echo-time { color:var(--text-muted); font-size:0.76em; letter-spacing:0.3px; }

/* 点赞按钮 */
.like-btn {
    display:flex; align-items:center; gap:5px; background:none;
    border:1px solid rgba(100,150,255,0.2); color:var(--primary);
    padding:4px 12px; border-radius:14px; cursor:pointer; font-size:0.88em;
    transition:all var(--transition); user-select:none;
}
.like-btn:hover { background:var(--primary-dim); border-color:var(--border-hover); }
.like-btn.liked { background:rgba(100,150,255,0.18); border-color:var(--primary); color:#a0c4ff; }
.like-btn.bounce { animation:likeBounce 0.35s cubic-bezier(.22,1,.36,1); }
@keyframes likeBounce { 0%{ transform:scale(1); } 30%{ transform:scale(1.35); } 60%{ transform:scale(0.92); } 100%{ transform:scale(1); } }

.empty-state { text-align:center; padding:36px 20px; color:var(--text-muted); }
.empty-icon { font-size:2.6em; margin-bottom:12px; opacity:0.35; }

/* ── 举报按钮 ── */
.report-btn {
    background:none; border:none; color:var(--text-muted); font-size:0.72em;
    cursor:pointer; padding:2px 6px; transition:color var(--transition);
    opacity:0.4;
}
.echo-card:hover .report-btn { opacity:0.8; }
.report-btn:hover { color:var(--danger); opacity:1; }

/* ── 页脚隐私条 ── */
.footer-icp { text-align:center; padding:8px 16px 50px; font-size:0.65em; color:var(--text-muted); opacity:0.5; letter-spacing:0.3px; }
.footer-icp a { color:inherit; text-decoration:none; }
.footer-icp a:hover { color:var(--text-dim); }

.footer-privacy {
    position:fixed; bottom:0; left:0; width:100%;
    background:rgba(10,10,15,0.92); backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,0.04); padding:10px 16px;
    text-align:center; font-size:0.7em; color:var(--text-muted); z-index:50;
    letter-spacing:0.3px; line-height:1.5;
}

/* ── Toast ── */
.toast {
    position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-100px);
    background:rgba(16,16,28,0.97); border:1px solid var(--border);
    color:#d8dce8; padding:12px 28px; border-radius:9px; z-index:2000;
    transition:transform 0.3s cubic-bezier(.22,1,.36,1); font-size:0.88em;
    letter-spacing:0.5px; white-space:nowrap; max-width:90vw;
}
.toast.show { transform:translateX(-50%) translateY(0); }

/* ── 模态框通用 ── */
.modal {
    display:none; position:fixed; top:0; left:0; width:100%; height:100%;
    background:rgba(0,0,0,0.75); align-items:center; justify-content:center;
    padding:20px; z-index:1000; overflow-y:auto;
    animation:modalFadeIn 0.25s ease;
}
.modal.active { display:flex; }
@keyframes modalFadeIn { 0%{ opacity:0; } 100%{ opacity:1; } }
.modal-content { animation:modalSlideIn 0.3s cubic-bezier(.22,1,.36,1); }
@keyframes modalSlideIn { 0%{ opacity:0; transform:translateY(20px) scale(0.96); } 100%{ opacity:1; transform:translateY(0) scale(1); } }
.modal-content {
    background:var(--bg-modal); border:1px solid var(--border);
    border-radius:16px; padding:28px; max-width:500px; width:100%;
    max-height:85vh; overflow-y:auto; position:relative;
}
.modal-title { color:var(--accent); font-size:1.05em; margin-bottom:18px; text-align:center; letter-spacing:1px; font-weight:400; }
.modal-text { color:#b4b8c8; line-height:1.85; margin-bottom:20px; font-size:0.96em; }
.modal-close {
    background:rgba(60,60,80,0.3); border:1px solid rgba(100,100,130,0.25);
    color:#9a9eb8; padding:10px 32px; border-radius:var(--radius);
    cursor:pointer; display:block; margin:16px auto 0; transition:all var(--transition);
    font-size:0.88em; letter-spacing:0.5px; min-height:42px;
}
.modal-close:hover { background:rgba(60,60,80,0.5); color:#c0c4cc; transform:translateY(-1px); }

.modal-x-close {
    position:absolute; top:12px; right:14px; width:30px; height:30px;
    border-radius:50%; background:none; border:none; color:var(--text-muted);
    font-size:1.1em; cursor:pointer; transition:all var(--transition);
    display:flex; align-items:center; justify-content:center; line-height:1;
}
.modal-x-close:hover { background:rgba(255,255,255,0.06); color:#c0c4cc; }

/* ── 新手引导 ── */
.guide-item { margin-bottom:16px; }
.guide-q { color:var(--primary); font-size:0.9em; font-weight:500; margin-bottom:5px; }
.guide-a { color:#9a9eb8; font-size:0.86em; line-height:1.7; }

/* ── 漂流瓶弹窗 ── */
.bottle-modal .bottle-content {
    background:rgba(10,10,20,0.5); border:1px solid var(--border);
    border-radius:var(--radius); padding:20px; margin-bottom:18px;
    font-size:0.96em; color:#c8ccd8; line-height:1.85; min-height:60px;
}
.bottle-modal .bottle-time { font-size:0.72em; color:var(--text-muted); margin-top:8px; text-align:right; }
.bottle-actions { display:flex; flex-direction:column; gap:8px; }
.bottle-action-row { display:flex; gap:8px; }
.bottle-act-btn {
    flex:1; padding:11px 8px; border-radius:9px; font-size:0.84em;
    cursor:pointer; transition:all var(--transition); text-align:center;
    display:flex; align-items:center; justify-content:center; gap:5px;
    letter-spacing:0.3px; border:1px solid transparent; user-select:none;
}
.bottle-act-btn:active { transform:scale(0.96); }
.ba-putback { background:rgba(60,60,80,0.4); border-color:rgba(100,100,130,0.25); color:#7a8aaa; }
.ba-putback:hover { background:rgba(60,60,80,0.6); color:#9a9ab8; }
.ba-like { background:rgba(255,100,100,0.08); border-color:rgba(255,100,100,0.2); color:#ff8080; }
.ba-like:hover { background:rgba(255,100,100,0.15); }
.ba-like.liked { background:rgba(255,100,100,0.18); border-color:rgba(255,100,100,0.5); }
.ba-respond { background:var(--primary-dim); border-color:var(--border); color:var(--primary); }
.ba-respond:hover { background:rgba(100,150,255,0.2); }
.ba-respond:disabled { opacity:0.4; cursor:not-allowed; }

/* 回应输入 */
.bottle-respond-form { margin-top:12px; }
.bottle-respond-input {
    width:100%; background:rgba(10,10,20,0.5); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:10px 12px; color:#dde0e8;
    font-size:0.88em; resize:none; outline:none; line-height:1.7; min-height:60px;
    font-family:var(--font); transition:border-color var(--transition);
}
.bottle-respond-input:focus { border-color:var(--primary); }
.bottle-respond-submit {
    margin-top:8px; width:100%; padding:11px; border-radius:var(--radius-sm);
    background:linear-gradient(135deg,#0f3460,#16213e);
    border:1px solid var(--border); color:var(--primary); font-size:0.84em;
    cursor:pointer; transition:all var(--transition); letter-spacing:0.5px;
}
.bottle-respond-submit:hover { background:linear-gradient(135deg,#1a4070,#1e2e4e); transform:translateY(-1px); }
.bottle-respond-cancel {
    font-size:0.76em; color:var(--text-muted); background:none; border:none;
    cursor:pointer; display:block; margin:6px auto 0; padding:4px 12px;
    transition:color var(--transition);
}
.bottle-respond-cancel:hover { color:var(--danger); }

/* ── 个人中心弹窗 ── */
.profile-section { margin-bottom:16px; }
.profile-section-title { font-size:0.9em; color:var(--primary); margin-bottom:8px; letter-spacing:0.5px; }
.profile-list { max-height:200px; overflow-y:auto; }
.profile-item {
    display:flex; justify-content:space-between; align-items:center;
    padding:8px 12px; background:rgba(10,10,20,0.3); border-radius:var(--radius-sm);
    margin-bottom:6px; font-size:0.82em;
}
.profile-item-text { flex:1; color:#c0c4cc; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:8px; }
.profile-item-meta { font-size:0.78em; color:var(--text-muted); white-space:nowrap; }
.profile-empty { color:var(--text-muted); font-size:0.82em; text-align:center; padding:16px; }

/* ── 举报弹窗 ── */
.report-textarea {
    width:100%; min-height:80px; background:rgba(10,10,20,0.5);
    border:1px solid var(--border); border-radius:var(--radius-sm);
    padding:10px 12px; color:var(--text); font-size:0.88em;
    font-family:var(--font); resize:none; outline:none; line-height:1.7;
    transition:border-color var(--transition); margin-bottom:12px;
}
.report-textarea:focus { border-color:var(--primary); }
.report-submit {
    width:100%; padding:11px; border-radius:var(--radius-sm);
    background:rgba(255,100,100,0.1); border:1px solid rgba(255,100,100,0.3);
    color:var(--danger); font-size:0.86em; cursor:pointer;
    transition:all var(--transition); letter-spacing:0.5px;
}
.report-submit:hover { background:rgba(255,100,100,0.2); }

/* ── 加载 ── */
.loading { display:none; text-align:center; padding:20px; color:#555; }
.loading.active { display:block; }
.spinner {
    border:2px solid rgba(100,150,255,0.1); border-top:2px solid var(--primary);
    border-radius:50%; width:36px; height:36px;
    animation:spin 0.9s linear infinite; margin:0 auto 10px;
}
@keyframes spin { 0%{ transform:rotate(0deg); } 100%{ transform:rotate(360deg); } }

/* ── 帮助按钮 ── */
.help-btn {
    position:fixed; bottom:70px; right:20px; width:36px; height:36px; border-radius:50%;
    background:rgba(20,20,34,0.9); border:1px solid var(--border);
    color:var(--primary); font-size:0.95em; cursor:pointer; z-index:100;
    display:flex; align-items:center; justify-content:center;
    transition:all var(--transition); backdrop-filter:blur(8px);
}
.help-btn:hover { border-color:var(--border-hover); color:#8ab4f8; box-shadow:0 0 12px rgba(100,150,255,0.15); }

/* ── 回到顶部 ── */
.back-top {
    position:fixed; bottom:24px; right:20px; width:36px; height:36px; border-radius:50%;
    background:rgba(20,20,34,0.85); border:1px solid var(--border);
    color:var(--text-dim); font-size:1em; cursor:pointer; z-index:100;
    display:none; align-items:center; justify-content:center;
    transition:all var(--transition); backdrop-filter:blur(8px);
}
.back-top.show { display:flex; }
.back-top:hover { border-color:var(--border-hover); color:var(--primary); box-shadow:0 0 12px rgba(100,150,255,0.15); transform:translateY(-2px); }

/* ── 我的按钮 ── */
.profile-btn {
    position:fixed; bottom:115px; right:20px; width:36px; height:36px; border-radius:50%;
    background:rgba(20,20,34,0.9); border:1px solid var(--border);
    color:var(--accent); font-size:0.95em; cursor:pointer; z-index:100;
    display:flex; align-items:center; justify-content:center;
    transition:all var(--transition); backdrop-filter:blur(8px);
}
.profile-btn:hover { border-color:rgba(200,162,255,0.5); color:#d4b0ff; box-shadow:0 0 12px rgba(200,162,255,0.15); }

/* ── 用户头像占位 ── */
.avatar-placeholder {
    width:60px; height:60px; border-radius:50%; margin:0 auto 16px;
    background:linear-gradient(135deg,rgba(100,150,255,0.2),rgba(200,162,255,0.2));
    display:flex; align-items:center; justify-content:center;
    font-size:2em; border:1px solid var(--border);
}

/* ── 语音识别结果 ── */
.voice-result { font-size:0.78em; color:var(--text-dim); text-align:center; margin-top:4px; display:none; }
.voice-result.show { display:block; }

/* ── 响应式 ── */
@media (max-width:480px) {
    .container { padding:14px 12px; }
    .title { font-size:1.6em; }
    .slogan { font-size:0.84em; }
    .text-input { min-height:120px; font-size:16px; padding:14px 44px 14px 14px; }
    .btn { padding:14px 6px; font-size:0.84em; min-height:48px; }
    .button-group { gap:8px; }
    .bottle-bar { padding:10px 12px; }
    .bottle-bar-text { font-size:0.74em; }
    .modal-content { padding:22px 16px; }
    .has-tip .tip { font-size:0.68em; white-space:normal; width:130px; text-align:center; left:50%; transform:translateX(-50%); }
    .mic-btn { width:38px; height:38px; font-size:1.1em; }
    .bottle-bar-icon { font-size:1.4em; }
    .help-btn, .profile-btn { width:40px; height:40px; font-size:1em; }
    .footer-icp { text-align:center; padding:8px 16px 50px; font-size:0.65em; color:var(--text-muted); opacity:0.5; letter-spacing:0.3px; }
.footer-icp a { color:inherit; text-decoration:none; }
.footer-icp a:hover { color:var(--text-dim); }

.footer-privacy { font-size:0.65em; padding:8px 12px; }
    .echo-card { padding:14px; }
    .like-btn { padding:6px 14px; font-size:0.92em; }
}

/* 软键盘适配 */
@media (max-height:500px) {
    .header { padding:16px 16px 12px; }
    .title { font-size:1.3em; }
    .text-input { min-height:90px; }
}