/* ═══════════════════════════════════════════════════════════════
   沐曦玩具测试 - 语音对话界面样式（与「语音对话 demo」一致）
   ═══════════════════════════════════════════════════════════════ */
      :root {
        --bg-page: #f6f4fb;
        --bg-surface: #ffffff;
        --primary: #5b7cfa;
        --primary-hover: #4a6be6;
        --primary-light: #f3f0fb;
        --primary-grad: linear-gradient(135deg, #5b7cfa, #7c9bff);
        --recording-grad: linear-gradient(135deg, #ef4444, #f97066);
        --user-bubble: #5b7cfa;
        --bot-bubble: #ffffff;
        --text-primary: #1e293b;
        --text-secondary: #7c8ab5;
        --text-muted: #9aa6c9;
        --border: #ece7f5;
        --border-light: #f3eff8;
        --online: #34d399;
        --recording: #ef4444;
        --shadow: 0 8px 32px rgba(91, 124, 250, 0.12);
        --shadow-bubble-user: 0 10px 22px -12px rgba(91, 124, 250, 0.6);
        --shadow-bubble-bot: 0 8px 20px -12px rgba(37, 60, 140, 0.3);
        --shadow-card: 0 40px 80px -30px rgba(37, 60, 140, 0.32);
        --radius-lg: 24px;
        --radius-md: 18px;
        --radius-sm: 14px;
        --radius-xs: 10px;
        --ease: cubic-bezier(0.4, 0, 0.2, 1);
        --font-sans:
          "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont,
          "Segoe UI", sans-serif;
      }

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

      html,
      body {
        height: 100%;
        overflow: hidden;
      }

      body {
        font-family: var(--font-sans);
        background: radial-gradient(ellipse 34% 58% at 1% 34%, rgba(190, 240, 232, .28) 0%, rgba(214, 245, 239, .22) 37%, transparent 76%), radial-gradient(ellipse 25% 47% at 46% 98%, rgba(247, 217, 188, .16) 0%, rgba(250, 230, 210, .22) 32%, transparent 76%), radial-gradient(ellipse 34% 60% at 98% 28%, rgba(228, 219, 246, .28) 0%, rgba(240, 234, 250, .24) 37%, transparent 77%), linear-gradient(180deg, #fcfcfd 0%, #fffefc 72%, #ffffff 100%);
        color: var(--text-primary);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        line-height: 1.5;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px;
      }
      /* 移动端交互优化（iOS / Android 通用） */
      html,
      body {
        overscroll-behavior: none;
        -webkit-overflow-scrolling: touch;
      }
      button,
      input,
      textarea,
      [role="button"] {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
      }
      input,
      textarea {
        -webkit-appearance: none;
        border-radius: 0;
      }
      /* 防止 iOS 长按时出现菜单/放大镜 */
      .app {
        -webkit-user-select: none;
        user-select: none;
      }
      .chat-main,
      #messageInput {
        -webkit-user-select: auto;
        user-select: auto;
      }

      /* 加载提示 */
      #scriptStatus {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: radial-gradient(ellipse 34% 58% at 1% 34%, rgba(190, 240, 232, .28) 0%, rgba(214, 245, 239, .22) 37%, transparent 76%), radial-gradient(ellipse 25% 47% at 46% 98%, rgba(247, 217, 188, .16) 0%, rgba(250, 230, 210, .22) 32%, transparent 76%), radial-gradient(ellipse 34% 60% at 98% 28%, rgba(228, 219, 246, .28) 0%, rgba(240, 234, 250, .24) 37%, transparent 77%), linear-gradient(180deg, #fcfcfd 0%, #fffefc 72%, #ffffff 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        font-size: 14px;
        color: var(--text-secondary);
      }

      /* 提示条 */
      .toast-container {
        position: fixed;
        top: 72px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1000;
        display: flex;
        flex-direction: column;
        gap: 8px;
        pointer-events: none;
      }
      .toast {
        background: rgba(30, 41, 59, 0.9);
        color: #fff;
        padding: 10px 18px;
        border-radius: 20px;
        font-size: 13px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
        animation: toastIn 0.3s var(--ease);
      }
      @keyframes toastIn {
        from {
          opacity: 0;
          transform: translateY(-8px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* ═══ 应用容器（居中卡片）═══ */
      .app {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 1000px;
        height: 840px;
        max-height: calc(100vh - 80px);
        background: linear-gradient(180deg, #fdfcfa 0%, #f8f6fb 100%);
        border: 1px solid #ece7f5;
        border-radius: 26px;
        overflow: hidden;
      }

      /* ═══ 顶部 Header ═══ */
      .app-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 96px;
        flex-shrink: 0;
        padding: 0 28px;
        background: #fff;
        border-bottom: 1px solid var(--border-light);
        z-index: 2;
      }

      .header-left {
        display: flex;
        align-items: center;
        gap: 14px;
      }

      .avatar {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid var(--border);
        background: var(--primary-light);
        box-shadow: 0 0 0 3px rgba(124, 155, 255, 0.18);
        animation: floaty 4s ease-in-out infinite;
      }
      @keyframes floaty {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-7px);
        }
      }

      /* 头像在线状态小圆点 */
      .avatar-wrap {
        position: relative;
        width: 56px;
        height: 56px;
      }
      .avatar-wrap .online-dot {
        position: absolute;
        right: 2px;
        bottom: 2px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: var(--online);
        border: 2.5px solid #fff;
      }

      .header-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }

      .header-name-row {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .header-name {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
        line-height: 1.15;
      }

      .header-badge {
        font-size: 11px;
        font-weight: 600;
        color: #7c6bfa;
        background: #f0edff;
        padding: 2px 8px;
        border-radius: 6px;
        letter-spacing: 0.04em;
      }

      .header-subtitle {
        font-size: 13px;
        color: var(--primary);
        font-weight: 500;
      }

      .header-right {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .status-badge {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
        color: var(--online);
        background: #eef2ff;
      }
      .status-badge .dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--online);
      }
      .status-badge.disconnected {
        color: var(--recording);
        background: #fef2f2;
      }
      .status-badge.disconnected .dot {
        background: var(--recording);
      }
      .status-badge.connecting {
        color: var(--primary);
        background: var(--primary-light);
      }
      .status-badge.connecting .dot {
        background: var(--primary);
        animation: pulse 1.5s infinite;
      }
      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.4;
        }
      }

      /* 呼吸动画：背景层缩放 + 光晕变化，文字层不参与动画 */
      @keyframes wakeBreath {
        0%,
        100% {
          transform: scale(1);
          box-shadow: 0 8px 18px -8px rgba(91, 124, 250, 0.7);
        }
        50% {
          transform: scale(1.06);
          box-shadow: 0 14px 28px -8px rgba(91, 124, 250, 0.95);
        }
      }

      /* 唤醒按钮 */
      .wake-btn {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 56px;
        height: 40px;
        border-radius: 12px;
        border: none;
        background: transparent;
        color: #fff;
        cursor: pointer;
        isolation: isolate;
      }
      /* 背景层：承担渐变与呼吸缩放，文字不受影响 */
      .wake-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--primary-grad);
        box-shadow: 0 8px 18px -8px rgba(91, 124, 250, 0.7);
        animation: wakeBreath 1.6s ease-in-out infinite;
        z-index: -1;
      }
      .wake-btn:hover::before {
        box-shadow: 0 12px 24px -8px rgba(91, 124, 250, 0.9);
      }
      .wake-btn:disabled::before {
        background: var(--text-muted);
        cursor: not-allowed;
        box-shadow: none;
        animation: none;
      }
      .wake-btn .wake-label {
        font-size: 10px;
        font-weight: 600;
        line-height: 1;
      }
      .wake-btn.active::before {
        background: var(--recording-grad);
        animation: none;
      }

      .settings-btn {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        border: none;
        background: #f1f4fe;
        color: var(--text-secondary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s var(--ease);
      }
      .settings-btn:hover {
        background: var(--primary-light);
        color: var(--primary);
      }

      /* ═══ 聊天主区域 ═══ */
      .chat-main {
        flex: 1;
        overflow-y: auto;
        padding: 26px 20px 16px;
        scroll-behavior: smooth;
        display: flex;
        justify-content: center;
      }
      .chat-main::-webkit-scrollbar {
        width: 8px;
      }
      .chat-main::-webkit-scrollbar-thumb {
        background: rgba(100, 116, 139, 0.3);
        border-radius: 8px;
      }
      .chat-inner {
        width: 100%;
        max-width: 700px;
        display: flex;
        flex-direction: column;
        gap: 18px;
      }

      /* 欢迎区 */
      .welcome {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 6px 0 10px;
      }
      .welcome-avatar {
        width: 132px;
        height: 132px;
        border-radius: 28px;
        object-fit: cover;
        background: #fff;
        box-shadow: 0 16px 34px -18px rgba(37, 60, 140, 0.4);
      }
      .welcome-text {
        font-size: 13px;
        color: #8290b8;
      }

      /* 消息列表 */
      .messages {
        display: flex;
        flex-direction: column;
        gap: 18px;
      }

      .message {
        display: flex;
        gap: 12px;
        max-width: 82%;
        align-items: flex-end;
        animation: msgIn 0.3s var(--ease);
      }
      @keyframes msgIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .message.user {
        align-self: flex-end;
        flex-direction: row-reverse;
      }
      .message.bot {
        align-self: flex-start;
      }

      .message-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
        border: 1.5px solid var(--border);
        flex-shrink: 0;
      }
      /* 用户头像完整显示，避免裁剪图片内容 */
      .message.user .message-avatar {
        object-fit: contain;
        background: #f0f4ff;
      }
      

      .message-content {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      /* 消息时间戳 */
      .message-time {
        font-size: 11px;
        color: var(--text-muted);
        font-family: "SF Mono", "Menlo", "Consolas", monospace;
        line-height: 1;
        padding: 0 4px;
        letter-spacing: 0.2px;
      }

      /* 用户消息时间戳靠右 */
      .message.user .message-content {
        align-items: flex-end;
      }
      /* AI 消息时间戳靠左 */
      .message.bot .message-content {
        align-items: flex-start;
      }

      .bubble {
        padding: 14px 18px;
        font-size: 15px;
        line-height: 1.55;
        word-break: break-word;
      }

      .message.bot .bubble {
        background: #fff;
        color: var(--text-primary);
        border-radius: 6px 22px 22px 22px;
        box-shadow: var(--shadow-bubble-bot);
        font-size: 15px;
        line-height: 1.65;
      }

      .message.user .bubble {
        background: var(--primary-grad);
        color: #fff;
        border-radius: 22px 6px 22px 22px;
        box-shadow: var(--shadow-bubble-user);
      }

      /* 语音消息气泡 */
      .voice-bubble {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        min-width: 120px;
        cursor: pointer;
        user-select: none;
      }
      .voice-bubble .mic-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
      }
      .voice-bubble .waveform {
        display: flex;
        align-items: center;
        gap: 3px;
        height: 24px;
      }
      .voice-bubble .waveform span {
        width: 3px;
        height: 22px;
        background: currentColor;
        border-radius: 2px;
        opacity: 0.9;
        animation: waveA 0.9s ease-in-out infinite;
        transform-origin: center;
      }
      .voice-bubble .waveform span:nth-child(1) {
        animation-delay: 0s;
      }
      .voice-bubble .waveform span:nth-child(2) {
        animation-delay: -0.15s;
      }
      .voice-bubble .waveform span:nth-child(3) {
        animation-delay: -0.3s;
      }
      .voice-bubble .waveform span:nth-child(4) {
        animation-delay: -0.45s;
      }
      .voice-bubble .waveform span:nth-child(5) {
        animation-delay: -0.2s;
      }
      @keyframes waveA {
        0%,
        100% {
          transform: scaleY(0.28);
        }
        50% {
          transform: scaleY(1);
        }
      }
      .voice-bubble .duration {
        font-size: 13px;
        opacity: 0.9;
        white-space: nowrap;
      }

      /* ═══ 底部输入栏 ═══ */
      .input-bar {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 18px 24px 24px;
        background: #fff;
        border-top: 1px solid var(--border-light);
        flex-shrink: 0;
        justify-content: center;
        z-index: 2;
      }

      .input-wrapper {
        flex: 1;
        max-width: 560px;
        display: flex;
        align-items: center;
        gap: 10px;
        background: var(--bg-page);
        border: 1.5px solid var(--border);
        border-radius: 999px;
        padding: 0 8px 0 20px;
        height: 54px;
        transition: border-color 0.2s var(--ease);
      }
      .input-wrapper:focus-within {
        border-color: var(--primary);
        background: #fff;
      }

      #messageInput {
        flex: 1;
        border: none;
        outline: none;
        background: transparent;
        font-size: 15px;
        color: var(--text-primary);
        font-family: inherit;
      }
      #messageInput::placeholder {
        color: var(--text-muted);
      }

      .send-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: none;
        background: #eaf0ff;
        color: var(--primary);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s var(--ease);
        flex-shrink: 0;
      }
      .send-btn:hover:not(:disabled) {
        background: var(--primary-light);
      }
      .send-btn:disabled {
        background: var(--bg-page);
        color: var(--text-muted);
        cursor: not-allowed;
      }

      .mic-btn {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        width: 64px;
        height: 54px;
        border-radius: 18px;
        border: none;
        background: var(--primary-grad);
        color: #fff;
        cursor: pointer;
        transition: all 0.2s var(--ease);
        flex-shrink: 0;
        box-shadow: 0 12px 24px -10px rgba(91, 124, 250, 0.7);
        user-select: none;
      }
      .mic-btn:hover:not(:disabled) {
        transform: translateY(-1px);
      }
      .mic-btn:disabled {
        background: var(--text-muted);
        cursor: not-allowed;
        box-shadow: none;
      }
      .mic-btn.recording {
        background: var(--recording-grad);
        animation: recpulse 1s ease-in-out infinite;
      }
      @keyframes recpulse {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.08);
        }
      }
      .mic-btn svg {
        width: 22px;
        height: 22px;
      }
      .mic-btn .mic-label {
        font-size: 10px;
        font-weight: 600;
      }

      /* 录音状态栏：占据输入栏位置，与输入框二选一显示（微信风格） */
      .recording-overlay {
        display: none;
        align-items: center;
        justify-content: center;
        padding: 18px 24px 24px;
        background: #fff;
        border-top: 1px solid var(--border-light);
        flex-shrink: 0;
        z-index: 2;
        cursor: pointer;
      }
      .recording-overlay.active {
        display: flex;
      }
      /* 录音时隐藏输入栏 */
      .recording-overlay.active ~ .input-bar {
        display: none;
      }
      /* 内部录音条：圆角胶囊，模拟 input-wrapper 样式 */
      .recording-overlay .rec-inner {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        max-width: 560px;
        height: 54px;
        padding: 0 20px;
        border-radius: 999px;
        background: #fef2f2;
        border: 1.5px solid #fecaca;
        transition: all 0.2s var(--ease);
      }
      .recording-overlay .rec-inner:hover {
        background: #fee2e2;
        border-color: var(--recording);
      }
      .recording-overlay .rec-dot {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--recording);
        flex-shrink: 0;
        animation: blink 1s infinite;
      }
      .recording-overlay .rec-wave {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 2px;
        height: 30px;
        overflow: hidden;
      }
      .recording-overlay .rec-wave span {
        width: 3px;
        height: 26px;
        flex-shrink: 0;
        border-radius: 2px;
        background: var(--recording);
        transform-origin: center;
        transform: scaleY(0.2);
      }
      .recording-overlay .rec-hint {
        font-size: 13px;
        color: var(--recording);
        font-weight: 600;
        white-space: nowrap;
      }
      @keyframes blink {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.4;
        }
      }

      /* 设置面板 */
      .settings-panel {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 360px;
        max-width: 90%;
        height: 100%;
        background: var(--bg-surface);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.08);
        z-index: 2000;
        flex-direction: column;
        border-radius: 26px;
        overflow: hidden;
      }
      .settings-panel.active {
        display: flex;
      }
      .settings-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20px 24px;
        border-bottom: 1px solid var(--border-light);
      }
      .settings-header h3 {
        font-size: 17px;
        font-weight: 700;
        color: var(--text-primary);
      }
      .settings-close {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 9px;
        background: #f1f4fe;
        color: var(--text-secondary);
        font-size: 18px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .settings-close:hover {
        background: var(--primary-light);
        color: var(--primary);
      }
      .settings-body {
        flex: 1;
        overflow-y: auto;
        padding: 20px 24px;
        display: flex;
        flex-direction: column;
        gap: 16px;
      }
      .settings-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      .settings-group label {
        font-size: 13px;
        font-weight: 600;
        color: #475569;
      }
      .settings-group input,
      .settings-group select {
        padding: 12px 14px;
        border: 1.5px solid var(--border);
        border-radius: 12px;
        font-size: 14px;
        outline: none;
        background: #f8faff;
        font-family: inherit;
        transition: border-color 0.2s, box-shadow 0.2s;
      }
      .settings-group input:focus,
      .settings-group select:focus {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
      }
      /* 下拉框专用样式：自定义箭头、等宽字体、hover 反馈 */
      .settings-group select {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding-right: 40px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='4,6 8,10 12,6'/></svg>");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 12px;
        font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
        letter-spacing: 0.3px;
        cursor: pointer;
        transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
      }
      .settings-group select:hover {
        border-color: #94a3b8;
        background-color: #f1f5ff;
      }
      .settings-group select:focus {
        background-color: #fff;
      }
      .settings-group select option {
        padding: 10px 14px;
        font-family: "SF Mono", "JetBrains Mono", Consolas, monospace;
        font-size: 14px;
        color: #1e293b;
        background: #fff;
      }
      .settings-actions {
        display: flex;
        gap: 10px;
        margin-top: auto;
      }
      .settings-actions .btn {
        flex: 1;
      }

      /* 通用按钮 */
      .btn {
        padding: 11px 22px;
        border: none;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s var(--ease);
        font-family: inherit;
      }
      .btn-primary {
        background: var(--primary-grad);
        color: #fff;
      }
      .btn-primary:hover {
        opacity: 0.9;
      }
      .btn-secondary {
        background: #f1f4fe;
        color: var(--text-secondary);
        border: none;
      }
      .btn-secondary:hover {
        color: var(--primary);
      }

      /* 遮罩 */
      .overlay-backdrop {
        display: none;
        position: absolute;
        inset: 0;
        background: rgba(20, 30, 66, 0.35);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        z-index: 1999;
        border-radius: 26px;
      }
      .overlay-backdrop.active {
        display: block;
      }

      /* 响应式 - 适配手机端 */
      @media (max-width: 640px) {
        html, body {
          height: 100%;
          overflow: hidden;
        }
        /* iOS/Android 专项优化 */
        html, body {
          overscroll-behavior: none;
        }
        #messageInput {
          font-size: 16px; /* 防止 iOS 聚焦时自动缩放 */
        }
        .mic-btn,
        .send-btn,
        .setting-btn,
        .close-settings {
          min-height: 44px; /* iOS 建议可点击区域最小 44px */
        }
        .mic-btn {
          -webkit-touch-callout: none;
        }
        .recording-overlay {
          -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
        }

        body {
          padding: 0;
        }
        .app {
          max-width: 100%;
          width: 100%;
          height: 100vh;
          height: 100dvh;
          max-height: none;
          border-radius: 0;
          border: none;
          box-shadow: none;
        }
        .app-header {
          height: 64px;
          padding: 0 14px;
        }
        .avatar,
        .avatar-wrap {
          width: 40px;
          height: 40px;
        }
        .avatar-wrap .online-dot {
          width: 10px;
          height: 10px;
          border-width: 2px;
          right: 1px;
          bottom: 1px;
        }
        .header-name {
          font-size: 16px;
        }
        .header-badge {
          font-size: 9px;
          padding: 2px 6px;
        }
        .header-subtitle {
          font-size: 11px;
        }
        .status-badge {
          font-size: 11px;
          padding: 4px 8px;
          gap: 4px;
        }
        .chat-main {
          padding: 12px 12px 8px;
        }
        .chat-inner {
          gap: 12px;
          max-width: 100%;
        }
        .welcome {
          gap: 8px;
          padding: 4px 0 8px;
        }
        .welcome-avatar {
          width: 80px;
          height: 80px;
          border-radius: 20px;
        }
        .welcome-text {
          font-size: 12px;
        }
        .messages {
          gap: 12px;
        }
        .message {
          max-width: 96%;
          gap: 8px;
        }
        .message-avatar {
          width: 32px;
          height: 32px;
        }
        /* 移动端用户头像完整显示，避免裁剪图片内容 */
        .message.user .message-avatar {
          object-fit: contain;
        }
        .bubble {
          padding: 10px 14px;
          font-size: 14px;
          line-height: 1.5;
        }
        .message.bot .bubble {
          font-size: 14px;
          border-radius: 4px 18px 18px 18px;
        }
        .message.user .bubble {
          border-radius: 18px 4px 18px 18px;
        }
        .voice-bubble {
          min-width: 100px;
          gap: 8px;
        }
        .voice-bubble .mic-icon {
          width: 16px;
          height: 16px;
        }
        .voice-bubble .waveform span {
          width: 2px;
          height: 16px;
        }
        .voice-bubble .duration {
          font-size: 12px;
        }
        .input-bar {
          padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
          gap: 8px;
        }
        .input-wrapper {
          max-width: none;
          height: 48px;
          padding: 0 6px 0 14px;
          border-radius: 999px;
        }
        #messageInput {
          font-size: 14px;
        }
        .send-btn {
          width: 36px;
          height: 36px;
        }
        .mic-btn {
          width: 56px;
          height: 48px;
          border-radius: 14px;
        }
        .mic-btn svg {
          width: 20px;
          height: 20px;
        }
        .mic-btn .mic-label {
          font-size: 9px;
        }
        /* 移动端录音状态栏：padding 紧凑，高度含安全区 */
        .recording-overlay {
          padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
        }
        .recording-overlay .rec-inner {
          max-width: none;
          height: 48px;
          padding: 0 16px;
          gap: 10px;
        }
        .recording-overlay .rec-wave {
          height: 24px;
        }
        .recording-overlay .rec-wave span {
          height: 20px;
        }
        .recording-overlay .rec-hint {
          font-size: 12px;
        }
        .toast-container {
          top: 64px;
          width: 92%;
          left: 50%;
          transform: translateX(-50%);
          align-items: center;
        }
        .toast {
          font-size: 12px;
          padding: 8px 14px;
          border-radius: 16px;
        }
        /* 设置面板：fixed 定位 + transform 滑入，修复 absolute 被裁剪及类名不匹配导致的 iOS 黑屏 */
        .settings-panel {
          position: fixed;
          top: 0;
          right: 0;
          display: flex;
          width: 92vw;
          max-width: 360px;
          height: 100vh;
          height: 100dvh;
          border-radius: 0;
          padding: 0;
          visibility: hidden;
          transform: translateX(100%);
          transition: transform 0.28s var(--ease), visibility 0s linear 0.28s;
          will-change: transform;
        }
        .settings-panel.active {
          visibility: visible;
          transform: translateX(0);
          transition: transform 0.28s var(--ease);
        }
        .settings-body {
          -webkit-overflow-scrolling: touch;
          padding: 20px 18px calc(24px + env(safe-area-inset-bottom, 0px));
        }
        /* 遮罩：移动端用 fixed 全屏覆盖，去掉 backdrop-filter 避免 iOS Safari 渲染黑块 */
        .overlay-backdrop {
          position: fixed;
          border-radius: 0;
          background: rgba(20, 30, 66, 0.45);
          -webkit-backdrop-filter: none;
          backdrop-filter: none;
        }
        .typing-indicator {
          padding: 10px 14px;
        }
        .typing-dot {
          width: 6px;
          height: 6px;
        }
      }

      @media (max-width: 380px) {
        .header-badge {
          display: none;
        }
        .input-wrapper {
          padding: 0 4px 0 10px;
        }
        .mic-btn {
          width: 48px;
        }
      }