/* ================= Chat 页专属样式 ================= */
/* 只服务于 templates/chat.html。这里只做视觉层的事：
   - 全局唯一强调色改成 #D6A0AC（Rosewood Grey-Pink），通过在这里重新声明 style.css 已经在用的
     --accent 变量来做到"全局只有一处定义、处处生效"——不新增第二套颜色变量，也不碰 style.css。
   - 顶部导航 / 消息列表 / Story Card / 输入栏改成毛玻璃 + 柔和阴影 + 奶白基底的视觉语言。
   不涉及任何数据结构、发送/接收逻辑、Prompt——chat.js 的 appendStoryCard() 生成的 DOM 结构
   （.storycard-header / -avatar-col / -index / -meta / -actions / -body 等）完全没有改动，
   这里只是重新给这些既有的类名换皮。 */

:root{
    --accent:#d6a0ac;         /* 唯一强调色：Rosewood Grey-Pink */
    --accent-hover:#c1909b;
    --accent-active:#ab808a;
    --accent-tint:#f8eef0;     /* 极浅色调，用于 hover 底色 / 引用标签底色 */
    --accent-ink:#5e4147;      /* 深色调，用于浅色底上的图标/文字，保证可读 */
}

/* ---------- ⓪ "消息"/"朋友圈" tab：底部固定导航栏，图标+文字竖排，
   iOS Tab Bar 那种视觉——固定在 .app-shell 这个 flex 列的最后一个位置
   （chat-inputbar 只在"消息" tab 可见，隐藏时这条栏自然贴到内容区正下方，
   不需要 position:fixed；.app-shell 桌面端是居中卡片，用 fixed 会贴在
   浏览器视口边缘而不是卡片边缘，见 style.css 里 .app-shell 的说明）。 ---------- */

.chat-tabs-bottom{
    flex-shrink:0;
    display:flex;
    background:rgba(255,250,244,.9);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-top:1px solid var(--line);
    padding:6px 0 calc(env(safe-area-inset-bottom,0px) + 6px);
}

.chat-tab-btn{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;
    border:none;
    background:none;
    padding:4px 0;
    color:var(--text-2);
    cursor:pointer;
    transition:color .2s ease;
}

.chat-tab-icon{
    width:23px;
    height:23px;
    display:flex;
}

.chat-tab-icon svg{
    width:100%;
    height:100%;
}

.chat-tab-label{
    font-size:10.5px;
    font-weight:600;
}

.chat-tab-btn.is-active{
    color:var(--accent);
}

/* ---------- ① 顶部导航：毛玻璃 + 在线状态点 + 收藏按钮 ---------- */

.chat-topbar{
    background:rgba(255,253,250,.62);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
}

.chat-back:hover,
.chat-settings:hover,
.chat-favorite:hover{
    background:var(--accent-tint);
    color:var(--accent-ink);
}

.chat-status{
    display:flex;
    align-items:center;
    gap:5px;
}

.chat-status::before{
    content:"";
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--accent);
    flex-shrink:0;
}

.nav-actions{
    display:flex;
    align-items:center;
    gap:2px;
    margin-left:auto;
}

.nav-actions .chat-settings{
    margin-left:0;
}

.chat-favorite{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:none;
    color:var(--text-1);
    flex-shrink:0;
    cursor:pointer;
    transition:background .2s ease,color .2s ease,transform .3s var(--spring);
}

.chat-favorite svg{
    width:18px;
    height:18px;
}

.chat-favorite:active{
    transform:scale(.9);
}

/* ---------- 消息滚动区：奶白背景 + 极淡纹理，不引入除强调色外的其它颜色 ---------- */

#chat-messages{
    padding-left:18px;
    padding-right:18px;
    gap:18px;
    background-color:var(--bg-1);
    background-image:radial-gradient(rgba(43,36,32,.035) .6px,transparent .6px);
    background-size:16px 16px;
}

/* ---------- ② Story Card：玻璃卡片壳层 ---------- */

.storycard{
    position:relative;
    width:100%;
    flex-shrink:0; /* #chat-messages 是 flex column，.storycard 又有 overflow:hidden——
                       flex 规范里 overflow 非 visible 的 flex item 默认最小高度是 0 而不是内容高度，
                       会被压缩裁切正文；设成 flex-shrink:0 让卡片永远按内容撑开，不参与压缩 */
    background:rgba(255,255,255,.86);
    border:1px solid rgba(255,255,255,.7);
    border-radius:26px;
    padding:18px 20px 20px 22px;
    box-shadow:0 1px 2px rgba(43,36,32,.05),0 16px 34px -16px rgba(43,36,32,.22);
    overflow:hidden;
}

.storycard::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(165deg,rgba(255,255,255,.45),rgba(255,255,255,0) 40%);
    pointer-events:none;
}

/* 身份色带：陆骁是中性墨色，我是唯一强调色——不用左右气泡区分身份 */

.storycard::before{
    content:"";
    position:absolute;
    left:0;top:14px;bottom:14px;
    width:2.5px;
    border-radius:2px;
    background:var(--text-2);
    opacity:.3;
}

.storycard.user::before{
    background:var(--accent);
    opacity:1;
}

/* 这一段 header/avatar-col/meta/actions/body 的排版属性（display:flex、gap、padding……）
   在之前一版重写里被整份覆盖时漏掉了，导致头像/名字/时间/操作按钮各自独占一行往下堆，
   卡片被撑得又高又松散——这里补回来，颜色/圆角/阴影/字体一个值都没改，只是让布局重新
   变回横向紧凑排列，卡片高度自然跟着内容走，不再需要任何 min-height。 */

.storycard-header{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin-bottom:16px;
    padding-bottom:14px;
    border-bottom:1px dashed var(--line);
}

/* 编号徽标：这一版视觉上不需要，隐藏即可，不用改 chat.js 的 DOM 结构 */

.storycard-index{
    display:none;
}

.storycard-avatar-col{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    flex-shrink:0;
}

.storycard-avatar{
    width:38px;
    height:38px;
    box-shadow:0 1px 2px rgba(43,36,32,.05),0 6px 14px -8px rgba(43,36,32,.25);
}

.storycard-meta{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
    padding-top:2px;
}

.storycard-name{
    font-size:16px;
    font-weight:700;
    color:var(--text-1);
    line-height:1.3;
}

.storycard-time{
    font-size:12px;
    color:var(--text-2);
    line-height:1.3;
}

.storycard-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    padding-top:4px;
}

.storycard-action-btn{
    width:20px;
    height:20px;
    border:none;
    background:none;
    padding:0;
    color:var(--text-2);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:color .2s ease,transform .2s ease;
}

.storycard-action-btn svg{
    width:100%;
    height:100%;
}

.storycard-action-btn:hover{
    color:var(--accent-ink);
}

.storycard-action-btn:active{
    transform:scale(.88);
}

.storycard-body{
    position:relative;
    font-size:16px;
    line-height:1.9;
    color:var(--chat-font-color,var(--text-1));
    word-break:break-word;
    letter-spacing:.2px;
}

.storycard-body p{
    margin:0 0 16px;
    text-indent:2em;
}

.storycard-body p:last-child{
    margin-bottom:0;
}

.storycard-body strong{
    font-weight:700;
}

.storycard-body[contenteditable]{
    outline-color:var(--accent);
}

.storycard-tag{
    font-style:italic;
}

/* 【动作】【环境】【心理】标签统一成中性弱化色，不引入除强调色外的第二种颜色 */

.storycard-tag-action,
.storycard-tag-scene,
.storycard-tag-mind,
.storycard-tag-generic{
    color:var(--text-2);
}

/* 引用文字：唯一强调色的浅色调标签 */

.storycard-quote{
    display:inline;
    background:var(--accent-tint);
    color:var(--accent-ink);
    padding:2px 10px;
    border-radius:999px;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
}

.storycard-blockquote{
    margin:0 0 16px;
    padding-left:14px;
    border-left:3px solid var(--accent);
    color:var(--text-2);
    font-style:italic;
}

.storycard-blockquote:last-child{
    margin-bottom:0;
}

/* ---------- ④ 输入栏：毛玻璃 + 胶囊输入框 + 协调的圆形按钮 ---------- */

.chat-inputbar{
    align-items:center; /* style.css 里原来是 flex-end（底对齐），导致发送按钮跟输入框看起来没对齐 */
    background:rgba(255,253,250,.6);
    backdrop-filter:blur(24px) saturate(180%);
    -webkit-backdrop-filter:blur(24px) saturate(180%);
    /* 底部 tab 栏去掉之后，输入栏变成 .app-shell 里最后一个元素，
       要自己补上安全区内边距（原来是靠下面的 .chat-tabs-bottom 撑着）。 */
    padding-bottom:calc(14px + env(safe-area-inset-bottom,0px));
}

.chat-input{
    background:rgba(255,255,255,.55);
    border:1px solid var(--line);
}

.chat-input:focus{
    outline:none;
    border-color:var(--accent);
    background:rgba(255,255,255,.75);
}

.send-btn{
    background:linear-gradient(150deg,var(--accent-tint),var(--accent));
    color:var(--accent-ink);
    box-shadow:0 8px 18px -8px rgba(182,130,145,.55);
}

.send-btn svg{
    width:16px;
    height:16px;
    fill:currentColor;
}

.send-btn:hover{
    background:linear-gradient(150deg,var(--accent-tint),var(--accent-hover));
}

.send-btn:active{
    background:linear-gradient(150deg,var(--accent-tint),var(--accent-active));
}

/* Loading：等待 API 返回期间（沿用既有的 sendBtn.disabled，没有新增任何 JS 逻辑），
   按钮上叠一个用强调色画的旋转圆环 */

.send-btn:disabled{
    position:relative;
    color:transparent;
}

.send-btn:disabled::after{
    content:"";
    position:absolute;
    inset:8px;
    border-radius:50%;
    border:2px solid var(--accent-tint);
    border-top-color:var(--accent-ink);
    animation:send-btn-spin .8s linear infinite;
}

@keyframes send-btn-spin{
    to{transform:rotate(360deg);}
}

@media (prefers-reduced-motion:reduce){
    .send-btn:disabled::after{animation:none;}
}

.refresh-btn:hover{
    background:var(--accent-tint);
    color:var(--accent-ink);
}

.refresh-btn:active{
    background:var(--accent-tint);
}

/* ---------- ⑤ 语音消息：输入栏的录音按钮 + 消息里的语音气泡 ---------- */

.mic-btn{
    flex-shrink:0;
    width:40px;
    height:40px;
    border:1px solid var(--line);
    border-radius:50%;
    background:rgba(255,255,255,.55);
    color:var(--text-2);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .2s ease,color .2s ease,border-color .2s ease,transform .15s ease;
}

.mic-btn svg{
    width:17px;
    height:17px;
}

.mic-btn:hover{
    background:var(--accent-tint);
    color:var(--accent-ink);
    border-color:var(--accent-tint);
}

.mic-btn:active{
    transform:scale(.92);
}

/* 录音中：填充强调色 + 柔和的脉冲光晕，跟静止状态的描边按钮明显区分开，
   不用另外加文字提示"正在录音"。 */

.mic-btn.recording{
    background:var(--accent);
    color:#ffffff;
    border-color:var(--accent);
    animation:mic-btn-pulse 1.4s ease-in-out infinite;
}

@keyframes mic-btn-pulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(214,160,172,.5); }
    50%{ box-shadow:0 0 0 9px rgba(214,160,172,0); }
}

@media (prefers-reduced-motion:reduce){
    .mic-btn.recording{ animation:none; }
}

/* 语音气泡：嵌进 .storycard-body 里的自定义正文——播放按钮 + 装饰性波形 +
   "文字"展开按钮，点开才露出下面折叠的转写文字。跟普通文字正文共用同一个
   卡片外壳（头像/名字/时间/删除按钮），只是这一块内容不一样。 */

.voice-bubble{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:12px;
    padding:4px 2px;
}

.voice-play-btn{
    flex-shrink:0;
    width:38px;
    height:38px;
    border:none;
    border-radius:50%;
    background:linear-gradient(150deg,var(--accent-tint),var(--accent));
    color:var(--accent-ink);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:transform .15s ease;
}

.voice-play-btn svg{
    width:15px;
    height:15px;
    fill:currentColor;
}

.voice-play-btn:active{
    transform:scale(.9);
}

.voice-play-btn.loading{
    position:relative;
    color:transparent;
}

.voice-play-btn.loading::after{
    content:"";
    position:absolute;
    inset:9px;
    border-radius:50%;
    border:2px solid var(--accent-tint);
    border-top-color:var(--accent-ink);
    animation:send-btn-spin .8s linear infinite;
}

.voice-wave{
    flex:1;
    min-width:60px;
    display:flex;
    align-items:center;
    gap:3px;
    height:20px;
}

.voice-wave i{
    display:block;
    width:3px;
    border-radius:2px;
    background:var(--text-2);
    opacity:.5;
}

.voice-wave i:nth-child(1){ height:8px; }
.voice-wave i:nth-child(2){ height:16px; }
.voice-wave i:nth-child(3){ height:11px; }
.voice-wave i:nth-child(4){ height:18px; }
.voice-wave i:nth-child(5){ height:9px; }

/* 纯 CSS 响应播放状态：playBtn 一 toggle .playing 类，波形跟着变色，
   不需要额外的 JS 去单独操作 wave 的样式。 */

.voice-play-btn.playing ~ .voice-wave i{
    background:var(--accent);
    opacity:.9;
}

.voice-text-toggle{
    flex-shrink:0;
    border:1px solid var(--line);
    border-radius:999px;
    background:none;
    color:var(--text-2);
    font-size:12px;
    line-height:1;
    padding:6px 12px;
    cursor:pointer;
    transition:background .2s ease,color .2s ease,border-color .2s ease;
}

.voice-text-toggle:hover,
.voice-text-toggle.active{
    background:var(--accent-tint);
    color:var(--accent-ink);
    border-color:var(--accent-tint);
}

.voice-transcript{
    flex-basis:100%;
    margin-top:10px;
    padding-top:10px;
    border-top:1px dashed var(--line);
    color:var(--text-2);
    font-size:14px;
    line-height:1.7;
}

.storycard-body .voice-transcript p{
    margin:0;
    text-indent:0;
}