/* =========================================
   视觉精修层（polish.css）
   -----------------------------------------
   本文件只做"美化增量"，不覆盖功能布局：
   在 common/theme/chat/... 之后加载，用更具体的选择器或纯新增类实现。

   设计取向：
   - 全部走主题变量，日夜模式自动适配，不引入任何硬编码配色
   - 全程尊重 prefers-reduced-motion
   - 动效只做"锦上添花"：首屏入场、气泡浮现、悬停反馈，不做持续动画
   ========================================= */

/* =========================================
   1. 欢迎屏（空会话/空联系人状态）
   -----------------------------------------
   原来的空状态只有一个小小的灰色插画，大片留白显得像"页面坏了"。
   改为一张有层次的欢迎卡：柔和渐变 + 漂浮装饰 + 随时段变化的问候语，
   让"还没选会话"这件事看起来是设计好的，而不是缺内容。
   ========================================= */

.welcome-screen {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* 极淡的径向渐变，给平面化的底色一点纵深 */
    background:
        radial-gradient(circle at 22% 18%, rgba(7, 193, 96, 0.06), transparent 42%),
        radial-gradient(circle at 78% 82%, rgba(7, 193, 96, 0.045), transparent 46%),
        var(--bg-chat);
}

/* 漂浮装饰：两个模糊光斑，缓慢漂移，营造"呼吸感" */
.welcome-screen::before,
.welcome-screen::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: var(--primary-color);
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.welcome-screen::before {
    width: 220px;
    height: 220px;
    top: 12%;
    left: 14%;
    opacity: 0.055;
    animation: welcomeFloat 14s ease-in-out infinite;
}

.welcome-screen::after {
    width: 260px;
    height: 260px;
    right: 10%;
    bottom: 10%;
    opacity: 0.04;
    animation: welcomeFloat 18s ease-in-out infinite reverse;
}

@keyframes welcomeFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(18px, -22px, 0) scale(1.08); }
}

.welcome-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px;
    max-width: 460px;
}

/* 欢迎屏头像（当前模板未使用，保留为可复用样式）
   注意：不要给它加带 opacity 的关键帧动画，
   否则 animation-fill-mode: both 会用动画结束值覆盖静态属性。 */
.welcome-avatar {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--bg-tertiary);
    /* 双层描边：内白环 + 外淡影，让头像从背景里"浮"起来 */
    box-shadow:
        0 0 0 3px var(--bg-secondary),
        0 0 0 4px var(--border-color),
        0 10px 24px rgba(0, 0, 0, 0.10);
}

.welcome-greeting {
    margin-top: 26px;
    font-size: 21px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--text-primary);
    animation: welcomeRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.06s both;
}

.welcome-sub {
    margin-top: 9px;
    font-size: 14px;
    line-height: 1.75;
    color: var(--text-secondary);
    animation: welcomeRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

/* 中央插画：用 mask 上色，随主题变化。
   压得很低：它是氛围元素而非主体，太实会盖过问候语、也会让整屏"绿得发闷"。

   ⚠️ 这里刻意【不加】welcomeRise 动画：该关键帧会把 opacity 从 0 动到 1，
   配合 animation-fill-mode: both，动画结束值(1)会永久覆盖此处声明的
   opacity，导致插画变成实心绿（实测计算值确实为 1 而非 0.13）。
   入场节奏由问候语、提示条、按钮的错峰上浮来体现，插画保持静态即可。 */
.welcome-art {
    width: 86px;
    height: 86px;
    margin: 0 0 2px;
    background-color: var(--primary-color);
    opacity: 0.13;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.welcome-art-chat {
    -webkit-mask-image: url('../img/empty-chat.svg');
    mask-image: url('../img/empty-chat.svg');
}

.welcome-art-contacts {
    -webkit-mask-image: url('../img/empty-contacts.svg');
    mask-image: url('../img/empty-contacts.svg');
}

/* 提示条：胶囊形，图标 + 文案 */
.welcome-hints {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 26px;
    animation: welcomeRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both;
}

.welcome-hint {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.welcome-hint i {
    font-size: 12px;
    color: var(--primary-color);
}

.welcome-hint:hover {
    transform: translateY(-2px);
    color: var(--text-primary);
    border-color: var(--primary-color);
}

/* 主行动按钮 */
.welcome-action {
    margin-top: 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 26px;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    background: var(--primary-gradient);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(7, 193, 96, 0.28);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
    animation: welcomeRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.welcome-action:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 10px 26px rgba(7, 193, 96, 0.36);
}

.welcome-action:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3);
}

@keyframes welcomeRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =========================================
   2. 列表入场：逐条上浮，形成节奏感
   -----------------------------------------
   ⚠️ 必须限定在 html.app-booted 之下，且配合 app.js 里的一次性标记。

   原因：Vue 重新渲染列表项时会重新插入 DOM 节点，纯 CSS 动画会随之重放。
   若不加限制，每收到一条新消息 / 每次轮询刷新，整个列表和所有气泡都会
   重新"浮现"一次，表现为持续闪烁 —— 比不做动画更糟。
   这里让入场动画只在首屏加载后触发一次。
   ========================================= */

@keyframes listItemIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

html.app-booted .list-item {
    animation: listItemIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 前 10 条错开出现；再多就统一延迟，避免最后几条等太久 */
html.app-booted .list-item:nth-child(1)  { animation-delay: 0.01s; }
html.app-booted .list-item:nth-child(2)  { animation-delay: 0.035s; }
html.app-booted .list-item:nth-child(3)  { animation-delay: 0.06s; }
html.app-booted .list-item:nth-child(4)  { animation-delay: 0.085s; }
html.app-booted .list-item:nth-child(5)  { animation-delay: 0.11s; }
html.app-booted .list-item:nth-child(6)  { animation-delay: 0.135s; }
html.app-booted .list-item:nth-child(7)  { animation-delay: 0.16s; }
html.app-booted .list-item:nth-child(8)  { animation-delay: 0.185s; }
html.app-booted .list-item:nth-child(9)  { animation-delay: 0.21s; }
html.app-booted .list-item:nth-child(n+10) { animation-delay: 0.23s; }

/* 头像悬停时轻微放大，让整行有"活"的感觉 */
.list-item-avatar {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.list-item:hover .list-item-avatar {
    transform: scale(1.06);
}

/* 未读红点呼吸（仅在有未读时出现，不会一直闪） */
@keyframes badgePulse {
    0%   { box-shadow: 0 0 0 0 rgba(250, 81, 81, 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(250, 81, 81, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 81, 81, 0); }
}

.list-item .badge,
.tab-item .tab-badge {
    animation: badgePulse 2.4s ease-out infinite;
}

/* =========================================
   3. 消息气泡：入场与质感
   -----------------------------------------
   同样限定在 html.app-booted 下：气泡节点在每次刷新消息列表时都会重建，
   不加限制会导致新消息到达时整屏气泡一起闪动。
   代价是新气泡没有单独入场动画 —— 但"不闪"比"有动画"重要得多。
   ========================================= */

@keyframes bubbleIn {
    from { opacity: 0; transform: translateY(9px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

html.app-booted .message-item {
    animation: bubbleIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 气泡质感：更柔的圆角 + 克制的投影，
   避免原来的方块感与过重阴影 */
.message-bubble {
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.2s ease;
}

.message-item:hover .message-bubble {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 气泡小尾巴：用伪元素画一个三角，贴合一侧 */
.message-bubble::after {
    content: '';
    position: absolute;
    top: 11px;
    width: 0;
    height: 0;
    border: 5px solid transparent;
}

.message-item.received .message-bubble::after {
    left: -8px;
    border-right-color: var(--bubble-received);
}

.message-item.sent .message-bubble::after {
    right: -8px;
    border-left-color: var(--bubble-sent);
}

/* =========================================
   4. 顶栏与详情面板
   ========================================= */

.chat-header,
.list-header {
    backdrop-filter: saturate(180%) blur(12px);
}

/* 详情面板在切换会话时有极淡的淡入，避免生硬替换 */
.detail-panel > * {
    animation: panelFade 0.28s ease both;
}

@keyframes panelFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* =========================================
   5. 登录页精修
   ========================================= */

/* 让深绿渐变有层次：叠加两团柔光，避免大片死板纯色 */
.login-page {
    position: relative;
    overflow: hidden;
}

.login-page::before,
.login-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
}

.login-page::before {
    width: 420px;
    height: 420px;
    top: -120px;
    left: -100px;
    background: rgba(7, 193, 96, 0.22);
    animation: welcomeFloat 20s ease-in-out infinite;
}

.login-page::after {
    width: 460px;
    height: 460px;
    right: -140px;
    bottom: -160px;
    background: rgba(7, 193, 96, 0.14);
    animation: welcomeFloat 26s ease-in-out infinite reverse;
}

/* 登录卡片：玻璃感 + 入场动画 */
.login-container {
    position: relative;
    z-index: 1;
    border-radius: 18px;
    border: 1px solid var(--border-color);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.30);
    animation: loginCardIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes loginCardIn {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 输入框聚焦反馈：绿色描边 + 柔和外发光 */
.login-form input {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.login-form input:focus {
    outline: none;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(7, 193, 96, 0.14);
}

/* 主按钮：轻微的抬升与按压反馈 */
.login-form .btn-primary,
.btn-primary {
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease, filter 0.2s ease;
}

.login-form .btn-primary:hover,
.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(7, 193, 96, 0.30);
    filter: brightness(1.03);
}

.login-form .btn-primary:active,
.btn-primary:active {
    transform: translateY(0) scale(0.995);
    box-shadow: 0 3px 10px rgba(7, 193, 96, 0.26);
}

/* =========================================
   6. 滚动条：融入主题，不抢视线
   ========================================= */

.list-body::-webkit-scrollbar,
.chat-messages::-webkit-scrollbar,
.moment-list::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.list-body::-webkit-scrollbar-track,
.chat-messages::-webkit-scrollbar-track,
.moment-list::-webkit-scrollbar-track {
    background: transparent;
}

.list-body::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb,
.moment-list::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 999px;
    /* 用透明边框做内缩，滚动条更细更轻 */
    border: 2px solid transparent;
    background-clip: content-box;
}

.list-body::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover,
.moment-list::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
    background-clip: content-box;
}

/* =========================================
   7. 侧边栏激活项：左侧指示条 + 图标微动
   ========================================= */

.menu-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 22px;
    border-radius: 0 3px 3px 0;
    background: var(--primary-color);
    animation: indicatorIn 0.28s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes indicatorIn {
    from { height: 0; opacity: 0; }
    to   { height: 22px; opacity: 1; }
}

.menu-item .icon,
.menu-item .fas {
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.menu-item:hover .icon,
.menu-item:hover .fas {
    transform: scale(1.08);
}

/* =========================================
   8. 移动端聊天输入区：三行压成一行（对齐微信）
   -----------------------------------------
   原结构在移动端是纵向三段：
     ① .input-toolbar  一行三个图标（表情/图片/文件）
     ② .input-box      一行输入框
     ③ 发送按钮出现时再占一行
   在 390×844 的手机上这三段合计约 140px，全部压在消息区上方 ——
   聊天时可用内容被严重挤占，也与微信"图标 + 输入框 + 按钮同一行"
   的紧凑结构完全不同。

   这里用绝对定位把工具栏与发送按钮叠到输入框两侧，输入框本身用等宽
   padding 让出空间。好处是不必改模板结构，桌面端布局完全不受影响
   （以下规则全部限定在 max-width: 768px 内）。
   ========================================= */

@media (max-width: 768px) {
    /* 单行基准高度（= 输入框行高），供两侧按钮与内边距对齐 */
    .chat-input-area {
        --input-row-h: 44px;
        position: relative;
        padding-left: 60px;    /* 左侧两个图标的空间 */
        padding-right: 66px;   /* 右侧发送按钮的空间 */
        padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    }

    /* 图标栏与发送按钮贴到同一行的底部对齐 */
    .input-toolbar,
    .input-actions {
        position: absolute;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        padding: 0;
        background: transparent;
        border: none;
        display: flex;
        align-items: center;
    }

    .input-toolbar { left: 10px; gap: 2px; }
    .input-actions { right: 12px; }

    /* 触摸目标保持 44×44（iOS 推荐最小值），视觉上不显笨重 */
    .input-toolbar .toolbar-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        padding: 0;
        font-size: 21px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }

    /* 输入框：高度与两侧按钮对齐 */
    .input-box {
        padding: 0;
        gap: 0;
    }

    .input-box textarea,
    .input-text-display {
        min-height: var(--input-row-h);
        max-height: 96px;
        padding: 11px 14px;
        /* 16px 以下 iOS 聚焦输入框会自动放大整页，必须保持 16px */
        font-size: 16px;
        line-height: 22px;
        border-radius: 6px;
        background: var(--bg-tertiary);
        box-sizing: border-box;
    }

    .input-box textarea:focus {
        background: var(--bg-tertiary);
    }

    /* 发送按钮：与输入框同高 */
    .btn-send {
        height: var(--input-row-h);
        padding: 0 16px;
        border-radius: 6px;
        font-size: 15px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* 引用预览与表情面板需撑满整宽，抵消上面给输入区加的左右内边距 */
    .quote-input-preview,
    .quote-message-preview {
        margin-left: -48px;
        margin-right: -54px;
    }

    .emoji-panel {
        margin-left: -48px;
        margin-right: -54px;
        margin-bottom: -8px;
        max-height: 46vh;
    }
}

/* =========================================
   9. 减少动效偏好
   -----------------------------------------
   系统开启"减少动态效果"时，全部动画与过渡关闭，
   只保留静态配色，避免造成不适。
   ========================================= */

@media (prefers-reduced-motion: reduce) {
    .welcome-screen::before,
    .welcome-screen::after,
    .login-page::before,
    .login-page::after,
    html.app-booted .list-item,
    html.app-booted .message-item,
    .welcome-greeting,
    .welcome-sub,
    .welcome-hints,
    .welcome-action,
    .login-container,
    .menu-item.active::before,
    .list-item .badge,
    .tab-item .tab-badge {
        animation: none !important;
    }

    .list-item-avatar,
    .menu-item .icon,
    .menu-item .fas,
    .welcome-hint,
    .welcome-action,
    .btn-primary,
    .message-bubble {
        transition: none !important;
    }
}