/*
       * 「翠徽」— teach-impeccable + design-taste-frontend（纯 CSS 落地）
       * 弹簧曲线、扩散阴影、内高光、触感反馈、固定颗粒层、100dvh；无纯黑、单强调色。
       */

      :root {
        --brand:        #00724c;
        --brand-deep:   #005a3d;
        --brand-light:  #009966;
        --brand-pale:   #d8efe6;
        --brand-whisper:#ecf6f2;

        --bg:           #e9f2ed;
        --bg-mesh-1:    rgba(0, 114, 76, 0.06);
        --bg-mesh-2:    rgba(0, 90, 61, 0.04);

        --white:        #ffffff;
        --text:         #152a22;
        --text-sub:     #3d534a;
        --text-light:   #5c7369;
        --border:       #c5ddd2;
        --border-soft:  #e0ebe6;

        --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
        --ease-soft:    cubic-bezier(0.45, 0, 0.55, 1);

        --shadow-sm:    0 2px 10px rgba(0, 60, 45, 0.07);
        --shadow-md:    0 20px 48px -12px rgba(0, 60, 45, 0.14);
        --shadow-inset-light: inset 0 1px 0 rgba(255, 255, 255, 0.52);

        --focus-ring:   0 0 0 3px rgba(0, 114, 76, 0.35);

        --error:         #b42318;
        --error-on:      #601410;
        --error-surface: #fef3f2;
        --error-border:  #fecdca;
        --error-icon:    #d92d20;

        --radius-bubble: 16px;
        --radius-shell:  22px;
      }

      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

      body {
        position: relative;
        font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
        font-size: 15px;
        background-color: var(--bg);
        background-image:
          radial-gradient(ellipse 120% 80% at 0% -20%, var(--bg-mesh-1) 0%, transparent 55%),
          radial-gradient(ellipse 80% 60% at 100% 100%, var(--bg-mesh-2) 0%, transparent 50%);
        min-height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text);
        -webkit-font-smoothing: antialiased;
      }

      /* 固定颗粒层：pointer-events-none，避免滚动重绘（taste performance） */
      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        opacity: 0.042;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      }

      @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
        .skip-link { transition: none; }
        .header-status svg { animation: none !important; }
        .voice-btn.is-listening { animation: none; }
      }

      .skip-link {
        position: absolute;
        left: 12px;
        top: 12px;
        z-index: 3000;
        padding: 10px 16px;
        background: var(--brand);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        border-radius: 10px;
        text-decoration: none;
        transform: translateY(-130%);
        transition: transform 0.2s ease-out;
      }
      .skip-link:focus {
        transform: translateY(0);
        outline: none;
        box-shadow: var(--focus-ring);
      }

      :where(.upload-btn, .voice-btn:not(:disabled), .send-btn:not(:disabled), .lightbox-close, .img-editor .img-editor-close, .img-editor-foot button, .img-editor-toolbar button, .copy-btn, .img-thumb-remove, .img-thumb-edit, .reasoning-toggle, .jump-latest-host .jump-latest-btn):focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
      }
      .chat-header .new-chat-btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.55);
      }

      .chat-app {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 840px;
        height: 96vh;
        max-height: min(900px, 96dvh);
        background: var(--white);
        border-radius: var(--radius-shell);
        overflow: hidden;
        box-shadow:
          var(--shadow-md),
          0 0 0 1px rgba(0, 114, 76, 0.05),
          var(--shadow-inset-light);
        border: 1px solid rgba(255, 255, 255, 0.65);
        margin: 16px;
      }

      /* 桌面：仅对话区滚动；移动端由媒体查询改为整段（顶栏+对话）在 .chat-scroll 内滚动 */
      .chat-scroll {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      /* ── 顶栏：烟草品牌绿横幅 ── */
      .chat-header {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 20px;
        background: linear-gradient(165deg, var(--brand) 0%, var(--brand-deep) 100%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        flex-shrink: 0;
        flex-wrap: wrap;
        box-shadow:
          0 4px 20px rgba(0, 60, 45, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.14);
      }

      .chat-header .hd-info {
        flex: 1;
        min-width: 140px;
      }
      .hd-title-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
      }
      .hd-title-icon {
        flex-shrink: 0;
        color: rgba(255, 255, 255, 0.92);
        margin-top: 1px;
        display: flex;
      }
      .hd-title-icon svg {
        width: 22px;
        height: 22px;
        display: block;
      }
      .hd-title-text {
        flex: 1;
        min-width: 0;
      }
      .chat-header .hd-title {
        font-family: "Outfit", "Noto Sans SC", sans-serif;
        font-size: 17px;
        font-weight: 600;
        color: #fff;
        line-height: 1.32;
        letter-spacing: -0.01em;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
      }
      .hd-title-full {
        display: block;
      }
      .hd-title-short {
        display: none;
      }
      .chat-header .hd-sub {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.92);
        text-shadow: 0 1px 2px rgba(0, 40, 30, 0.35);
        margin-top: 4px;
        line-height: 1.45;
      }

      /* Lucide circle-check：在线状态 */
      .header-status {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #d1fae5;
        opacity: 0.96;
      }
      .header-status svg {
        width: 18px;
        height: 18px;
        display: block;
        will-change: transform;
        animation: status-breathe 3.2s var(--ease-soft) infinite;
      }
      @keyframes status-breathe {
        0%, 100% { transform: scale(1); }
        50%       { transform: scale(1.05); }
      }

      .new-chat-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 8px 16px;
        border: 1.5px solid rgba(255, 255, 255, 0.55);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
        font-size: 13px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        flex-shrink: 0;
        transition:
          background 0.28s var(--ease-out),
          border-color 0.28s var(--ease-out),
          box-shadow 0.28s var(--ease-out),
          transform 0.12s var(--ease-out);
        white-space: nowrap;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
      }
      .new-chat-btn .btn-ico {
        display: flex;
        color: inherit;
      }
      .new-chat-btn .btn-ico svg {
        width: 16px;
        height: 16px;
        display: block;
      }
      .new-chat-btn:hover {
        background: rgba(255, 255, 255, 0.22);
        border-color: rgba(255, 255, 255, 0.9);
        box-shadow:
          0 6px 18px rgba(0, 0, 0, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.18);
      }
      .new-chat-btn:active:not(:disabled) {
        transform: scale(0.98);
      }
      .new-chat-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        box-shadow: none;
      }

      .chat-log {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        padding: 22px 18px;
        background: var(--brand-whisper);
        background-image:
          radial-gradient(circle at 20% 30%, rgba(0, 114, 76, 0.04) 0%, transparent 45%),
          radial-gradient(circle at 90% 80%, rgba(0, 90, 61, 0.03) 0%, transparent 40%);
        display: flex;
        flex-direction: column;
        gap: 18px;
        scroll-behavior: smooth;
      }
      .chat-log::-webkit-scrollbar { width: 5px; }
      .chat-log::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 10px;
      }

      .welcome-hint {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        font-size: 14px;
        line-height: 1.65;
        color: var(--text-sub);
        background: var(--white);
        border-radius: 14px;
        padding: 16px 18px;
        border: 1px solid var(--border-soft);
        border-left: 4px solid var(--brand);
        box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.72);
        align-self: center;
        max-width: 92%;
        animation: msg-enter 0.52s var(--ease-out) both;
      }
      .welcome-hint .hint-icon {
        flex-shrink: 0;
        color: var(--brand);
        margin-top: 1px;
        display: flex;
      }
      .welcome-hint .hint-icon svg {
        width: 22px;
        height: 22px;
        display: block;
      }
      .welcome-hint p {
        margin: 0;
        max-width: 62ch;
        text-wrap: pretty;
      }
      .welcome-hint strong { color: var(--brand-deep); font-weight: 600; }

      .msg {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        max-width: 85%;
        animation: msg-enter 0.42s var(--ease-out) both;
      }
      @keyframes msg-enter {
        from {
          opacity: 0;
          transform: translateY(8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .msg-bot  { align-self: flex-start; }
      .msg-user { align-self: flex-end; flex-direction: row-reverse; }

      /* 助手头像：品牌绿渐变 + 白描边对话图标（无外部图片） */
      .avatar-bot-mark {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        flex-shrink: 0;
        box-shadow: 0 2px 12px rgba(0, 114, 76, 0.35);
        background: linear-gradient(
          155deg,
          var(--brand-light) 0%,
          var(--brand) 42%,
          var(--brand-deep) 100%
        );
        border: 2px solid rgba(255, 255, 255, 0.55);
        display: flex;
        align-items: center;
        justify-content: center;
        color: rgba(255, 255, 255, 0.95);
      }
      .avatar-bot-mark svg {
        display: block;
        width: 20px;
        height: 20px;
      }

      .avatar-user {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        flex-shrink: 0;
        box-shadow: var(--shadow-sm);
        background: linear-gradient(145deg, var(--brand) 0%, var(--brand-deep) 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        border: 2px solid rgba(255, 255, 255, 0.75);
      }
      .avatar-user svg {
        display: block;
        fill: rgba(255, 255, 255, 0.95);
      }

      .msg-body {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
      }
      /* 助手侧含 KaTeX 时分式会超出现有行盒，避免上下被裁切 */
      .msg-bot .msg-body {
        align-items: flex-start;
        overflow: visible;
      }
      .msg-user .msg-body { align-items: flex-end; }

      .bubble {
        padding: 12px 16px;
        border-radius: var(--radius-bubble);
        font-size: 14.5px;
        line-height: 1.65;
        width: 100%;
        box-sizing: border-box;
        word-break: break-word;
        overflow-wrap: break-word;
        position: relative;
        overflow: hidden;
      }

      .bubble-bot {
        background: var(--white);
        color: var(--text);
        box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.85);
        border: 1px solid var(--border-soft);
        overflow-x: hidden;
        overflow-y: visible;
      }

      .bubble-user {
        background: linear-gradient(145deg, var(--brand) 0%, var(--brand-deep) 100%);
        color: #fff;
        box-shadow:
          0 4px 16px rgba(0, 114, 76, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.16);
      }
      .bubble-user .bubble-text { color: #fff; }

      .msg-time {
        font-size: 11px;
        color: var(--text-light);
        padding: 0 4px;
      }

      /* 思考正文 + 紧挨其下的「显示/隐藏思考过程」；复制在 .answer-wrap 内右上角 */
      .answer-wrap {
        position: relative;
        min-width: 0;
        width: 100%;
      }
      .answer-wrap > .answer {
        padding-right: 34px;
        box-sizing: border-box;
      }
      .answer-wrap > .answer.answer-error {
        padding-right: 40px;
      }
      .reasoning-box {
        width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }
      .reasoning-box > .reasoning-toggle {
        align-self: flex-start;
        margin-top: 1px;
        padding-top: 2px;
        border-top: none;
      }
      .reasoning-box[hidden] {
        display: none !important;
      }
      .reasoning-toggle {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 2px;
        margin: -2px;
        font-size: 11.5px;
        line-height: 1.2;
        font-family: inherit;
        font-weight: 600;
        background: transparent;
        color: var(--brand-deep);
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition:
          color 0.22s var(--ease-out),
          background 0.22s var(--ease-out),
          transform 0.1s var(--ease-out);
      }
      .reasoning-toggle:active {
        transform: scale(0.98);
      }
      .reasoning-toggle:hover {
        color: var(--brand);
        background: rgba(216, 239, 230, 0.65);
      }
      .reasoning-toggle svg {
        flex-shrink: 0;
        display: block;
        vertical-align: middle;
        width: 11px;
        height: 11px;
      }

      .reasoning-inner {
        font-size: 12.5px;
        color: var(--text-sub);
        background: var(--brand-whisper);
        border: 1px solid var(--border-soft);
        border-left: 3px solid var(--brand);
        border-radius: 10px;
        padding: 10px 12px;
        white-space: pre-wrap;
        word-break: break-word;
        overflow-wrap: break-word;
        height: auto;
        max-height: 200px;
        overflow-y: auto;
        line-height: 1.6;
        margin-top: 0;
        margin-bottom: 0;
        scroll-behavior: smooth;
        transition: opacity 0.35s ease;
      }
      .reasoning-inner.collapsing {
        opacity: 0;
        pointer-events: none;
      }
      .reasoning-inner.expanded {
        height: auto;
        max-height: 400px;
      }
      .reasoning-inner::-webkit-scrollbar { width: 4px; }
      .reasoning-inner::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: 4px;
      }

      .answer-md {
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
      }
      .msg.msg-bot .answer-md p,
      .msg.msg-bot .answer-md ul,
      .msg.msg-bot .answer-md ol {
        max-width: 65ch;
      }
      .answer-md p,
      .answer-md li {
        text-wrap: pretty;
      }
      .answer-md p {
        margin: 0.5em 0;
        line-height: 1.75;
      }
      .answer-md p:first-child { margin-top: 0; }
      .answer-md p:last-child  { margin-bottom: 0; }
      .answer-md h1, .answer-md h2, .answer-md h3 {
        font-weight: 700;
        line-height: 1.35;
        margin: 0.8em 0 0.35em;
      }
      .answer-md h1 { font-size: 1.2em; }
      .answer-md h2 { font-size: 1.1em; color: var(--brand-deep); }
      .answer-md h3 { font-size: 1em; }
      .answer-md ul, .answer-md ol { padding-left: 1.4em; margin: 0.4em 0; }
      .answer-md li { margin: 0.2em 0; }
      .answer-md pre {
        background: #f0f7f4;
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        padding: 10px 12px;
        overflow-x: auto;
        font-size: 13px;
        margin: 0.6em 0;
        max-width: 100%;
        box-sizing: border-box;
      }
      .answer-md code {
        font-family: Consolas, "SF Mono", monospace;
        font-size: 0.9em;
        background: var(--brand-pale);
        color: var(--brand-deep);
        padding: 0.12em 0.35em;
        border-radius: 4px;
      }
      .answer-md pre code { background: transparent; color: var(--text); padding: 0; }
      .answer-md blockquote {
        border-left: 3px solid var(--brand);
        padding-left: 12px;
        color: var(--text-sub);
        margin: 0.5em 0;
      }
      /* 必须用 table 布局，display:block 会破坏 rowspan/colspan */
      .answer-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        margin: 0.6em 0;
      }
      .answer-md table {
        display: table;
        border-collapse: collapse;
        width: auto;
        min-width: min(100%, 320px);
        max-width: none;
        margin: 0;
        font-size: 13.5px;
        table-layout: auto;
        font-variant-numeric: tabular-nums;
      }
      .answer-md th, .answer-md td {
        border: 1px solid var(--border);
        padding: 6px 10px;
        text-align: left;
        vertical-align: middle;
      }
      .answer-md th { background: var(--brand-pale); color: var(--brand-deep); }
      .answer-md strong { font-weight: 700; }
      .answer-md img {
        max-width: 100%;
        height: auto;
        display: block;
        border-radius: 8px;
        margin: 0.5em 0;
      }

      .answer-md .katex-display {
        margin: 0.75em 0;
        padding: 0.35em 0;
        overflow-x: auto;
        overflow-y: visible;
        text-align: center;
      }
      .answer-md .katex {
        font-size: 1.05em;
        /* 行内公式：为分子分母留出上下行盒空间 */
        padding: 0.1em 0;
        vertical-align: middle;
      }

      .answer-waiting { color: var(--text-light); font-style: italic; }

      /* 接口/流式错误：语义色 + 左边框，避免与正文灰字混淆 */
      .bubble-bot .answer.answer-error {
        box-sizing: border-box;
        margin: 0;
        padding: 12px 14px;
        border-radius: calc(var(--radius-bubble) - 4px);
        background: var(--error-surface);
        color: var(--error-on);
        border: 1px solid var(--error-border);
        border-left: 4px solid var(--error-icon);
        font-size: 14px;
        line-height: 1.55;
        font-style: normal;
        font-weight: 500;
      }
      .bubble-bot .answer.answer-error button {
        margin-top: 6px;
      }
      .bubble-bot .answer.answer-error button:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.35);
      }
      .bubble-bot:has(.answer-error) .copy-btn {
        opacity: 0;
        pointer-events: none;
      }

      .reasoning-thinking {
        color: var(--text-light);
        font-style: italic;
        animation: thinking-pulse 1.4s ease-in-out infinite;
      }
      @keyframes thinking-pulse {
        0%, 100% { opacity: 0.45; }
        50%       { opacity: 1; }
      }

      .lightbox {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1000;
        background: rgba(15, 42, 34, 0.91);
        align-items: center;
        justify-content: center;
        cursor: zoom-out;
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
      }
      .lightbox.open { display: flex; }
      .lightbox img {
        max-width: 92vw;
        max-height: 88vh;
        border-radius: 12px;
        box-shadow:
          0 24px 64px rgba(0, 45, 35, 0.45),
          0 0 0 1px rgba(255, 255, 255, 0.08);
        object-fit: contain;
        cursor: default;
        animation: lb-in 0.32s var(--ease-out) both;
      }
      .lightbox-close {
        position: absolute;
        top: 18px;
        right: 22px;
        width: 44px;
        height: 44px;
        border: 1px solid rgba(255, 255, 255, 0.38);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.26s var(--ease-out), transform 0.12s var(--ease-out);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
      }
      .lightbox-close:hover { background: rgba(255, 255, 255, 0.2); }
      .lightbox-close:active {
        transform: scale(0.96);
      }
      @keyframes lb-in {
        from { transform: scale(0.94) translateY(6px); opacity: 0; }
        to   { transform: scale(1) translateY(0); opacity: 1; }
      }

      /* ── 待发送图片：裁剪 / 旋转编辑器 ── */
      .img-editor {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1100;
        background: rgba(15, 42, 34, 0.55);
        align-items: center;
        justify-content: center;
        padding: 16px;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
      }
      .img-editor.open {
        display: flex;
      }
      .img-editor-panel {
        width: min(560px, 100%);
        max-height: min(96dvh, 920px);
        display: flex;
        flex-direction: column;
        background: var(--white);
        border-radius: var(--radius-shell);
        border: 1px solid var(--border-soft);
        box-shadow: var(--shadow-md), var(--shadow-inset-light);
        overflow: hidden;
      }
      .img-editor-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 14px;
        border-bottom: 1px solid var(--border-soft);
        background: linear-gradient(180deg, var(--brand-whisper) 0%, var(--white) 100%);
      }
      .img-editor-title {
        font-size: 15px;
        font-weight: 600;
        color: var(--text);
      }
      .img-editor-close {
        width: 36px;
        height: 36px;
        border: 1.5px solid var(--border);
        border-radius: 10px;
        background: var(--white);
        color: var(--text-sub);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition:
          border-color 0.22s var(--ease-out),
          color 0.22s var(--ease-out),
          background 0.22s var(--ease-out);
      }
      .img-editor-close:hover {
        border-color: var(--brand);
        color: var(--brand);
      }
      .img-editor-toolbar {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--border-soft);
      }
      .img-editor-toolbar button {
        padding: 8px 12px;
        border-radius: 10px;
        border: 1.5px solid var(--border);
        background: var(--white);
        color: var(--text-sub);
        font-size: 13px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        transition:
          border-color 0.22s var(--ease-out),
          color 0.22s var(--ease-out),
          background 0.22s var(--ease-out);
      }
      .img-editor-toolbar button:hover {
        border-color: var(--brand);
        color: var(--brand);
        background: var(--brand-pale);
      }
      .img-editor-toolbar button.is-active {
        border-color: var(--brand);
        color: var(--brand);
        background: var(--brand-pale);
      }
      .img-editor-stage {
        position: relative;
        flex: 1;
        min-height: 180px;
        max-height: min(52dvh, 420px);
        margin: 12px;
        border-radius: 14px;
        border: 1.5px dashed var(--border);
        background: var(--brand-whisper);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        touch-action: none;
      }
      /* 由 JS 按图片横竖比收紧舞台宽度，避免竖图在横向条里过小 */
      .img-editor-stage.img-editor-fit {
        flex: 0 0 auto;
        align-self: center;
      }
      /* 裁剪模式：加大预览区，必要时纵向滚动，虚框对比更明显 */
      .img-editor-stage.is-crop-mode {
        min-height: 220px;
        max-height: min(72dvh, 680px);
        border: 2px dashed rgba(0, 90, 61, 0.45);
        overflow: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
      }
      .img-editor-stage canvas {
        display: block;
        max-width: 100%;
        max-height: min(52dvh, 420px);
        width: auto;
        height: auto;
        cursor: crosshair;
      }
      .img-editor-stage.is-crop-mode canvas {
        max-height: min(72dvh, 680px);
      }
      .img-editor-stage:not(.is-crop-mode) canvas {
        cursor: default;
      }
      .img-editor-hint {
        font-size: 12px;
        color: var(--text-light);
        padding: 0 16px 8px;
        line-height: 1.45;
      }
      .img-editor-foot {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        padding: 12px 14px;
        border-top: 1px solid var(--border-soft);
        background: var(--brand-whisper);
      }
      .img-editor-foot button {
        padding: 10px 18px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        border: 1.5px solid transparent;
        transition:
          transform 0.12s var(--ease-out),
          box-shadow 0.22s var(--ease-out);
      }
      .img-editor-foot .img-editor-cancel {
        background: var(--white);
        border-color: var(--border);
        color: var(--text-sub);
      }
      .img-editor-foot .img-editor-cancel:hover {
        border-color: var(--brand);
        color: var(--brand);
      }
      .img-editor-foot .img-editor-apply {
        background: linear-gradient(145deg, var(--brand) 0%, var(--brand-deep) 100%);
        color: #fff;
        box-shadow: 0 3px 14px rgba(0, 114, 76, 0.28);
      }
      .img-editor-foot .img-editor-apply:hover {
        filter: brightness(1.06);
      }
      .img-editor-foot .img-editor-apply:active,
      .img-editor-foot .img-editor-cancel:active {
        transform: scale(0.98);
      }

      .answer-wrap .copy-btn {
        position: absolute;
        top: 2px;
        right: 2px;
        z-index: 2;
        min-width: 28px;
        min-height: 28px;
        width: 28px;
        height: 28px;
        border: 1px solid var(--border-soft);
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.94);
        color: var(--text-sub);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.38;
        transition:
          opacity 0.22s var(--ease-out),
          background 0.22s var(--ease-out),
          color 0.22s var(--ease-out),
          transform 0.1s var(--ease-out);
        box-shadow: 0 1px 4px rgba(0, 60, 45, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.88);
      }
      .copy-btn:active {
        transform: scale(0.95);
      }
      .bubble-bot:hover .answer-wrap .copy-btn,
      .bubble-bot:focus-within .answer-wrap .copy-btn,
      .answer-wrap .copy-btn:focus-visible {
        opacity: 1;
      }
      .answer-wrap .copy-btn:hover {
        background: #fff;
        color: var(--brand);
      }
      /* [hidden] 的 display:none 特异性低于 .answer-wrap .copy-btn 的 display:flex，会漏出按钮 */
      .answer-wrap .copy-btn[hidden] {
        display: none !important;
        pointer-events: none;
      }

      /* 零高度占位：只占一颗药丸，不出现通栏白底 */
      .jump-latest-host {
        position: relative;
        height: 0;
        flex-shrink: 0;
        z-index: 25;
        pointer-events: none;
      }
      .jump-latest-host .jump-latest-btn {
        pointer-events: auto;
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, -6px);
        margin: 0;
        padding: 6px 14px;
        font-size: 12.5px;
        font-weight: 600;
        font-family: inherit;
        letter-spacing: 0.02em;
        color: var(--brand-deep);
        background: var(--white);
        border: 1px solid var(--border);
        border-radius: 999px;
        cursor: pointer;
        box-shadow:
          var(--shadow-sm),
          0 4px 14px rgba(0, 60, 45, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.85);
        transition:
          background 0.22s var(--ease-out),
          border-color 0.22s var(--ease-out),
          color 0.22s var(--ease-out),
          box-shadow 0.22s var(--ease-out),
          transform 0.1s var(--ease-out);
      }
      .jump-latest-host .jump-latest-btn:hover {
        border-color: var(--brand);
        color: var(--brand);
        background: var(--brand-whisper);
      }
      .jump-latest-host .jump-latest-btn:active {
        transform: translate(-50%, -6px) scale(0.98);
      }
      .jump-latest-host .jump-latest-btn .jump-latest-ico {
        display: inline-block;
        margin-right: 5px;
        font-size: 0.95em;
        vertical-align: -0.05em;
      }

      .chat-footer {
        padding: 0;
        background: var(--white);
        border-top: 1px solid var(--border-soft);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-shrink: 0;
      }
      .chat-footer-inner {
        display: flex;
        align-items: flex-end;
        gap: 10px;
        padding: 14px 16px;
      }
      .chat-footer textarea {
        flex: 1;
        resize: none;
        overflow-y: hidden;
        border: 1.5px solid var(--border);
        border-radius: 14px;
        padding: 12px 15px;
        font-size: 14px;
        font-family: inherit;
        color: var(--text);
        outline: none;
        min-height: 46px;
        max-height: 120px;
        line-height: 1.55;
        transition: border-color 0.28s var(--ease-out), box-shadow 0.28s var(--ease-out);
        background: var(--brand-whisper);
        box-shadow: inset 0 1px 2px rgba(0, 60, 45, 0.04);
      }
      .chat-footer textarea:focus {
        border-color: var(--brand);
        box-shadow: 0 0 0 3px rgba(0, 114, 76, 0.15);
      }
      .chat-footer textarea::placeholder { color: var(--text-light); }

      .upload-btn {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        border: 1.5px solid var(--border);
        border-radius: 50%;
        background: var(--white);
        color: var(--text-sub);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition:
          border-color 0.26s var(--ease-out),
          color 0.26s var(--ease-out),
          background 0.26s var(--ease-out),
          transform 0.12s var(--ease-out);
        box-shadow: var(--shadow-inset-light), 0 1px 2px rgba(0, 60, 45, 0.05);
      }
      .upload-btn:hover {
        border-color: var(--brand);
        color: var(--brand);
        background: var(--brand-pale);
      }
      .upload-btn:active {
        transform: scale(0.97);
      }
      .upload-btn svg { width: 20px; height: 20px; }

      .voice-btn {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        border: 1.5px solid var(--border);
        border-radius: 50%;
        background: var(--white);
        color: var(--text-sub);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        transition:
          border-color 0.26s var(--ease-out),
          color 0.26s var(--ease-out),
          background 0.26s var(--ease-out),
          transform 0.12s var(--ease-out);
        box-shadow: var(--shadow-inset-light), 0 1px 2px rgba(0, 60, 45, 0.05);
      }
      .voice-btn:hover:not(:disabled) {
        border-color: var(--brand);
        color: var(--brand);
        background: var(--brand-pale);
      }
      .voice-btn:active:not(:disabled) {
        transform: scale(0.97);
      }
      .voice-btn:disabled {
        opacity: 0.45;
        cursor: not-allowed;
      }
      .voice-btn.is-listening {
        border-color: var(--brand);
        color: var(--brand);
        background: var(--brand-pale);
        animation: voice-pulse 1.2s var(--ease-soft) infinite;
      }
      @keyframes voice-pulse {
        0%,
        100% {
          box-shadow:
            var(--shadow-inset-light),
            0 1px 2px rgba(0, 60, 45, 0.05),
            0 0 0 0 rgba(0, 114, 76, 0.22);
        }
        50% {
          box-shadow:
            var(--shadow-inset-light),
            0 1px 2px rgba(0, 60, 45, 0.08),
            0 0 0 7px rgba(0, 114, 76, 0);
        }
      }
      .voice-btn svg {
        width: 20px;
        height: 20px;
      }

      .img-preview-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px 0;
        flex-wrap: wrap;
      }
      .img-preview-bar:empty { display: none; }
      .img-thumb-wrap {
        position: relative;
        width: 64px;
        height: 64px;
        border-radius: 10px;
        overflow: hidden;
        border: 1.5px solid var(--border);
        background: var(--brand-pale);
        flex-shrink: 0;
        isolation: isolate;
      }
      .img-thumb-wrap img {
        position: relative;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        cursor: zoom-in;
        transition: opacity 0.15s ease;
        pointer-events: auto;
      }
      .img-thumb-wrap img:hover {
        opacity: 0.88;
      }
      .img-thumb-remove {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 4;
        touch-action: manipulation;
        pointer-events: auto;
        width: 28px;
        height: 28px;
        border-radius: 0 8px 0 9px;
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
      }
      .img-thumb-remove:hover { background: rgba(0, 0, 0, 0.8); }

      .img-thumb-edit {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 4;
        min-width: 28px;
        min-height: 28px;
        width: 28px;
        height: 28px;
        border-radius: 0 9px 0 8px;
        background: rgba(0, 114, 76, 0.88);
        color: #fff;
        border: none;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        box-shadow: 0 1px 4px rgba(0, 45, 35, 0.35);
        transition: background 0.2s ease, transform 0.1s ease;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        pointer-events: auto;
      }
      .img-thumb-edit:hover {
        background: var(--brand-deep);
      }
      .img-thumb-edit:active {
        transform: scale(0.95);
      }

      .send-btn {
        min-width: 44px;
        min-height: 44px;
        width: 44px;
        height: 44px;
        border: none;
        border-radius: 50%;
        background: linear-gradient(145deg, var(--brand) 0%, var(--brand-deep) 100%);
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        box-shadow:
          0 4px 16px rgba(0, 114, 76, 0.35),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transition:
          box-shadow 0.28s var(--ease-out),
          filter 0.28s var(--ease-out),
          transform 0.12s var(--ease-out);
      }
      .send-btn:hover:not(:disabled) {
        box-shadow:
          0 8px 26px rgba(0, 114, 76, 0.38),
          inset 0 1px 0 rgba(255, 255, 255, 0.22);
        filter: brightness(1.05);
      }
      .send-btn:active:not(:disabled) {
        transform: scale(0.96);
      }
      .send-btn:disabled {
        opacity: 0.42;
        cursor: not-allowed;
        box-shadow: none;
      }
      .send-btn svg { width: 20px; height: 20px; }

      /* ── 移动端：助手区域尽量满宽（少换行、少竖向滚动），参考主流对话 App 全宽正文区 ── */
      @media (max-width: 600px) {
        body {
          align-items: stretch;
        }
        .chat-app {
          margin: 0;
          max-width: none;
          width: 100%;
          height: 100dvh;
          max-height: none;
          border-radius: 0;
          border-left: none;
          border-right: none;
        }
        .chat-header {
          padding: 10px 12px;
          gap: 8px;
          flex-wrap: nowrap;
          align-items: center;
        }
        .chat-header .hd-info {
          min-width: 0;
        }
        .hd-title-full {
          display: none;
        }
        .hd-title-short {
          display: block;
        }
        .chat-header .hd-title {
          font-size: 16px;
          line-height: 1.28;
        }
        .hd-sub {
          display: none;
        }
        .header-status {
          display: none;
        }
        .new-chat-btn-label {
          display: none;
        }
        .new-chat-btn {
          padding: 8px 10px;
          gap: 0;
          min-width: 40px;
          min-height: 40px;
        }
        .chat-scroll {
          overflow-y: auto;
          overflow-x: hidden;
          -webkit-overflow-scrolling: touch;
          scroll-behavior: smooth;
        }
        .chat-log {
          flex: 0 0 auto;
          overflow: visible;
          min-height: 0;
          padding: 10px 6px;
          gap: 14px;
        }
        .welcome-hint {
          max-width: none;
          align-self: stretch;
          margin: 0 2px;
          padding: 14px 12px;
        }
        .welcome-hint p {
          max-width: none;
        }
        /* 纵向：头像与气泡左缘对齐，气泡占满屏宽，避免气泡缩在头像右侧 */
        .msg.msg-bot {
          align-self: stretch;
          max-width: none;
          width: 100%;
          flex-direction: column;
          align-items: flex-start;
          gap: 8px;
        }
        .msg.msg-bot .avatar-bot-mark {
          width: 32px;
          height: 32px;
        }
        .msg.msg-bot .avatar-bot-mark svg {
          width: 16px;
          height: 16px;
        }
        .msg.msg-bot .msg-body {
          width: 100%;
          min-width: 0;
        }
        .msg.msg-bot .bubble-bot {
          padding: 11px 12px;
        }
        /* 复制钮仅占右上角：取消「整段」右侧 padding（原先会少打好几个字）；首段保留避让，图表/单图首块仍全宽 */
        .answer-wrap > .answer {
          padding-right: 0;
        }
        .answer-wrap > .answer.answer-error {
          padding-right: 0;
        }
        .answer-wrap:has(.copy-btn:not([hidden])) > .answer.answer-md > *:first-child {
          padding-right: 36px;
          box-sizing: border-box;
        }
        .answer-wrap:has(.copy-btn:not([hidden])) > .answer.answer-md > *:first-child:is(.answer-table-wrap, table, figure, .katex-display),
        .answer-wrap:has(.copy-btn:not([hidden])) > .answer.answer-md > *:first-child:has(table),
        .answer-wrap:has(.copy-btn:not([hidden])) > .answer.answer-md > *:first-child:has(> img:only-child) {
          padding-right: 0;
        }
        .msg.msg-user {
          max-width: min(92%, 100%);
        }
        /* pretty 会偏向「行尾整齐」，窄屏下易多断行；改回自动换行以拉长每行 */
        .msg.msg-bot .answer-md p,
        .msg.msg-bot .answer-md li {
          text-wrap: wrap;
        }
        /* 悬浮输入栏：浅底条带 + 安全区，与白底正文区错层 */
        .chat-footer {
          background: var(--bg);
          border-top: none;
          padding-top: 6px;
          padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
        }
        .img-preview-bar {
          padding: 8px 10px 0;
        }
        .chat-footer-inner {
          align-items: center;
          margin: 0 10px 10px;
          padding: 8px 10px;
          gap: 6px;
          background: var(--white);
          border-radius: 24px;
          border: 1px solid rgba(0, 114, 76, 0.06);
          box-shadow:
            var(--shadow-inset-light),
            0 6px 24px rgba(0, 60, 45, 0.1),
            0 2px 8px rgba(0, 60, 45, 0.06);
        }
        .chat-footer-inner .upload-btn,
        .chat-footer-inner .voice-btn,
        .chat-footer-inner .send-btn {
          width: 40px;
          height: 40px;
        }
        .chat-footer-inner .upload-btn svg,
        .chat-footer-inner .voice-btn svg,
        .chat-footer-inner .send-btn svg {
          width: 18px;
          height: 18px;
        }
        /* iOS Safari：聚焦字号小于 16px 的表单控件会自动放大整页；这里用 16px 保持视口不缩放 */
        .chat-footer textarea {
          font-size: 16px;
          line-height: 1.45;
          background: transparent;
          border: none;
          box-shadow: none;
          padding: 8px 5px;
          min-height: 42px;
        }
        .chat-footer textarea:focus {
          outline: none;
          border-color: transparent;
          box-shadow: inset 0 0 0 1.5px var(--brand);
        }
        .chat-footer textarea:focus-visible {
          outline: none;
          box-shadow: inset 0 0 0 1.5px var(--brand);
        }
        .jump-latest-host .jump-latest-btn {
          padding: 5px 12px;
          font-size: 12px;
          transform: translate(-50%, -4px);
        }
        .jump-latest-host .jump-latest-btn:active {
          transform: translate(-50%, -4px) scale(0.98);
        }
      }