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

    body {
      font-family: 'Microsoft JhengHei', '微軟正黑體', 'Noto Sans TC', Arial, sans-serif;
      height: 100vh;
      overflow: hidden;
      color: #333;
      font-size: 14px;
    }

    .app { display: flex; height: 100vh; }

    /* ── Sidebar ── */
    .sidebar {
      width: 252px;
      flex-shrink: 0;
      background: #fff;
      border-right: 1px solid #e5e7eb;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      transition: width 0.25s ease, border-color 0.25s ease;
    }
    .sidebar.collapsed { width: 0; border-right-color: transparent; }

    .sidebar-logo {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 14px 12px;
      border-bottom: 1px solid #f0f0f0;
    }
    .logo-wrap { display: flex; align-items: center; gap: 10px; }
    .logo-emblem { width: 40px; height: 40px; flex-shrink: 0; }
    .logo-text-block { line-height: 1.4; }
    .logo-text-block .org-name { font-size: 13px; font-weight: 700; color: #1a5fa8; letter-spacing: 0.02em; }
    .logo-text-block .org-en  { font-size: 9px; color: #999; letter-spacing: 0.03em; }
    .hamburger-btn { background: none; border: none; cursor: pointer; color: #666; padding: 4px; display: flex; align-items: center; }

    .sidebar-new-activity { padding: 12px 10px 6px; }
    .section-head { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #888; padding: 2px 6px 8px; }

    .nav-item { display: flex; flex-direction: column; padding: 9px 12px; border-radius: 8px; cursor: pointer; margin-bottom: 3px; transition: background 0.15s; }
    .nav-item:hover:not(.active) { background: #f5f7fa; }
    .nav-item.active { background: #2b7fc8; color: #fff; }
    .nav-item-row { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; }
    .nav-item-sub { font-size: 11px; color: #888; margin-top: 2px; padding-left: 24px; }
    .nav-item.active .nav-item-sub { color: rgba(255,255,255,0.75); }

    .sidebar-activities { padding: 10px 10px 6px; border-top: 1px solid #f0f0f0; flex-shrink: 0; }
    .activity-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; padding: 2px 4px 8px; }
    .search-input { width: 100%; padding: 7px 14px; border: 1px solid #e0e0e0; border-radius: 20px; font-size: 12px; color: #555; background: #f8f9fb; outline: none; margin-bottom: 6px; font-family: inherit; }
    .search-input::placeholder { color: #aaa; }
    .activity-list { overflow-y: auto; }
    .activity-item { padding: 8px 10px; font-size: 13px; color: #444; cursor: pointer; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .activity-item:hover { background: #f5f7fa; }

    .sidebar-footer { margin-top: auto; border-top: 1px solid #f0f0f0; padding: 10px 12px 12px; }
    .footer-actions { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; }
    .goto-backend { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #555; cursor: pointer; }
    .font-size-ctrl { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #555; }
    .font-btn { background: none; border: none; cursor: pointer; font-family: inherit; color: #555; padding: 1px 3px; }
    .user-row { display: flex; align-items: center; gap: 9px; }
    .user-avatar { width: 34px; height: 34px; background: #1a5fa8; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0; }
    .user-info { flex: 1; min-width: 0; }
    .user-name { font-size: 13px; font-weight: 600; }
    .user-role { font-size: 11px; color: #888; }
    .user-more-btn { background: none; border: none; cursor: pointer; color: #999; font-size: 16px; padding: 2px 4px; }

    /* ── Main ── */
    .main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

    .main-header {
      padding: 13px 20px;
      background: #fff;
      border-bottom: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
    }
    .sidebar-toggle-btn { background: none; border: none; color: #2b8fc4; padding: 2px; display: flex; align-items: center; flex-shrink: 0; }
    .sidebar-toggle-btn:hover { color: #1e7ab0; }
    .main-header-title { font-size: 15px; font-weight: 500; }

    /* ── Main body: two equal columns ── */
    .main-body {
      --left-panel-width: 50%;
      flex: 1;
      display: flex;
      position: relative;
      min-height: 0;
      overflow: hidden;
    }
    .main-body.upload-collapsed .left-col {
      display: none;
    }
    .main-body.upload-collapsed .right-col {
      flex: 1 1 100%;
    }
    .column-resizer {
      position: absolute;
      top: 0;
      bottom: 0;
      left: var(--left-panel-width);
      z-index: 3;
      width: 14px;
      cursor: col-resize;
      transform: translateX(-50%);
      touch-action: none;
      user-select: none;
    }
    .column-resizer::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 50%;
      width: 1px;
      background: #d0dae6;
      transform: translateX(-50%);
      transition: background 0.2s, box-shadow 0.2s;
    }
    .column-resizer::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 82px;
      width: 4px;
      height: 36px;
      border-radius: 999px;
      background: #8eb8dd;
      transform: translateX(-50%);
      opacity: 0;
      transition: opacity 0.2s;
    }
    .column-resizer:hover::before,
    .column-resizer.dragging::before,
    .column-resizer:focus-visible::before {
      background: #2b8fc4;
      box-shadow: 0 0 0 2px rgba(43, 143, 196, 0.14);
    }
    .column-resizer:hover::after,
    .column-resizer.dragging::after,
    .column-resizer:focus-visible::after {
      opacity: 1;
    }
    .column-resizer:focus-visible {
      outline: 2px solid #1a5fa8;
      outline-offset: -2px;
    }
    .main-body.upload-collapsed .column-resizer {
      display: none;
    }
    .upload-toggle-btn {
      position: absolute;
      bottom: 24px;
      left: var(--left-panel-width);
      z-index: 5;
      width: 34px;
      height: 42px;
      border: 1px solid #cbdced;
      background: #fff;
      color: #1a5fa8;
      border-radius: 999px;
      box-shadow: 0 6px 18px rgba(26, 95, 168, 0.14);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transform: translateX(-50%);
      transition: background 0.2s, border-color 0.2s, color 0.2s, left 0.25s ease;
    }
    .upload-toggle-btn:hover {
      background: #f3f8fd;
      border-color: #9fc5e8;
      color: #14508f;
    }
    .upload-toggle-icon { flex-shrink: 0; }
    .main-body.upload-collapsed .upload-toggle-btn {
      left: 17px;
    }

    .analysis-overlay {
      position: absolute;
      inset: 0;
      z-index: 4;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: rgba(244, 247, 251, 0.82);
      backdrop-filter: blur(5px);
    }
    .analysis-overlay.visible { display: flex; }
    .analysis-card {
      width: min(360px, 100%);
      padding: 26px 28px 24px;
      background: rgba(255, 255, 255, 0.96);
      border: 1px solid #d7e5f2;
      border-radius: 8px;
      box-shadow: 0 18px 45px rgba(26, 95, 168, 0.16);
      text-align: center;
    }
    .analysis-orbit {
      position: relative;
      width: 70px;
      height: 70px;
      margin: 0 auto 14px;
      border: 1px solid #cfe2f3;
      border-radius: 50%;
      animation: analysisSpin 1.8s linear infinite;
    }
    .analysis-orbit::before {
      content: "";
      position: absolute;
      inset: 16px;
      border-radius: 50%;
      background: #eef6fc;
      border: 1px solid #d6e9f7;
    }
    .analysis-orbit span {
      position: absolute;
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #2b8fc4;
      box-shadow: 0 0 0 5px rgba(43, 143, 196, 0.12);
    }
    .analysis-orbit span:nth-child(1) { top: -4px; left: 30px; }
    .analysis-orbit span:nth-child(2) { right: 4px; bottom: 9px; background: #1a5fa8; }
    .analysis-orbit span:nth-child(3) { left: 4px; bottom: 9px; background: #7fb7df; }
    .analysis-title {
      font-size: 18px;
      font-weight: 700;
      color: #1a5fa8;
      margin-bottom: 8px;
    }
    .analysis-text {
      min-height: 20px;
      font-size: 13px;
      color: #666;
      margin-bottom: 18px;
    }
    .analysis-progress {
      height: 5px;
      overflow: hidden;
      border-radius: 999px;
      background: #e8f1f8;
    }
    .analysis-progress span {
      display: block;
      width: 42%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, #2b8fc4, #1a5fa8);
      animation: analysisProgress 1.15s ease-in-out infinite;
    }
    @keyframes analysisSpin { to { transform: rotate(360deg); } }
    @keyframes analysisProgress {
      0% { transform: translateX(-120%); }
      100% { transform: translateX(260%); }
    }

    /* Left column: upload → review */
    .left-col {
      flex: 0 0 var(--left-panel-width);
      min-width: 0;
      border-right: 1px solid #d0dae6;
      background: #f4f7fb;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    /* Right column: chat */
    .right-col {
      flex: 1;
      min-width: 0;
      background: #fff;
      display: flex;
      overflow: hidden;
    }

    /* ── Upload welcome (initial left state) ── */
    .upload-welcome {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 14px;
      padding: 30px 44px 26px;
      overflow-y: auto;
    }
    .upload-welcome-title {
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      color: #444;
      flex-shrink: 0;
    }

    /* ── Upload zone ── */
    .upload-zone {
      flex: 1;
      width: 100%;
      background: rgba(255,255,255,0.45);
      border: 2px dashed #5aace0;
      border-radius: 12px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      cursor: pointer;
      transition: border-color 0.2s, background 0.2s;
    }
    .upload-zone:hover { border-color: #2b7fc8; background: #f5faff; }
    .upload-zone.dragover { border-color: #2b7fc8; background: #f0f8ff; }
    .upload-zone.done { border-color: #2a9d5c; }
    .upload-zone-text { font-size: 14px; color: #666; text-align: center; }

    .upload-btn {
      background: #2b8fc4; color: #fff; border: none;
      padding: 10px 28px; border-radius: 22px; font-size: 14px;
      cursor: pointer; font-family: inherit; transition: background 0.2s;
    }
    .upload-btn:hover { background: #1e7ab0; }
    .upload-btn:disabled { background: #a0c4de; cursor: not-allowed; }

    .upload-formats { font-size: 12px; color: #aaa; text-align: center; flex-shrink: 0; }

    .upload-status { font-size: 12.5px; min-height: 18px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; }
    .upload-status.pending   { color: #2b7fc8; }
    .upload-status.uploading { color: #2b8fc4; }
    .upload-status.success   { color: #2a9d5c; }
    .upload-status.error     { color: #d94040; }

    .spinner {
      width: 14px; height: 14px;
      border: 2px solid rgba(43,143,196,0.25);
      border-top-color: #2b8fc4;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      flex-shrink: 0;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── Review state (lives in left column) ── */
    .review-state {
      flex: 1;
      display: none;
      flex-direction: column;
      overflow: hidden;
    }
    .review-state.visible { display: flex; }

    .review-nav {
      display: flex;
      gap: 6px;
      padding: 10px 14px;
      background: #fff;
      border-bottom: 1px solid #e5e7eb;
      overflow-x: auto;
      flex-shrink: 0;
    }
    .review-nav-item {
      padding: 7px 13px;
      border-radius: 18px;
      cursor: pointer;
      font-size: 12.5px;
      color: #555;
      white-space: nowrap;
      border: 1px solid #d8e2ee;
      background: #fff;
      transition: all 0.15s;
    }
    .review-nav-item:hover:not(.active) { background: #f5f7fa; }
    .review-nav-item.active {
      background: #2b7fc8;
      border-color: #2b7fc8;
      color: #fff;
      font-weight: 600;
    }

    .review-content {
      flex: 1;
      min-height: 0;
      position: relative;
      overflow-y: auto;
      padding: 16px;
      background: #edf2f7;
      display: flex;
      flex-direction: column;
      gap: 16px;
      scroll-behavior: smooth;
    }
    /* blocks keep their natural height (no flex compression); scroll when total is too tall */
    .review-content > .s-card { flex-shrink: 0; }

    /* ── Section cards ── */
    .s-card {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.07);
      overflow: hidden;
    }
    .s-card-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 12px 16px;
      font-size: 13.5px;
      font-weight: 600;
      color: #1a5fa8;
      background: #f0f6fc;
      border-bottom: 1px solid #dce8f5;
      cursor: pointer;
      user-select: none;
    }
    .s-card-body { padding: 16px; display: flex; flex-direction: column; gap: 11px; }

    /* ── Collapsible blocks ── */
    .collapse-chevron {
      margin-left: auto;
      display: flex;
      align-items: center;
      color: currentColor;
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }
    .s-card.collapsed .collapse-chevron { transform: rotate(-90deg); }
    /* hide everything except the header when collapsed */
    .s-card.collapsed > :not(.s-card-header) { display: none; }
    .s-card.collapsed .s-card-header { border-bottom: none; }

    .field-row { display: flex; gap: 10px; }
    .field-label { font-size: 12px; color: #888; flex-shrink: 0; width: 72px; padding-top: 2px; line-height: 1.5; }
    .plan-name-label { font-weight: 700; color: #333; }
    .field-value { font-size: 13px; color: #333; line-height: 1.65; flex: 1; white-space: pre-line; }
    .plan-name-value { font-weight: 700; color: #222; }

    .work-item-list { display: flex; flex-direction: column; gap: 3px; }
    .work-item { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; color: #444; line-height: 1.55; }
    .work-item-dot { width: 6px; height: 6px; background: #2b8fc4; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }

    .divider { border: none; border-top: 1px solid #f0f2f5; margin: 2px 0; }

    .analysis-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    .analysis-block { border-radius: 8px; padding: 9px 11px; border-left: 3px solid; }
    .analysis-block.sim  { background: #f0faf4; border-color: #2a9d5c; }
    .analysis-block.dif  { background: #fff8f0; border-color: #e07c00; }
    .analysis-block.sug  { background: #f0f6fc; border-color: #2b7fc8; }
    .analysis-label { font-size: 11px; font-weight: 700; margin-bottom: 4px; }
    .analysis-block.sim .analysis-label { color: #2a9d5c; }
    .analysis-block.dif .analysis-label { color: #e07c00; }
    .analysis-block.sug .analysis-label { color: #2b7fc8; }
    .analysis-text { font-size: 12px; color: #444; line-height: 1.6; white-space: pre-line; }

    /* ── Carousel ── */
    .carousel-wrap { position: relative; }
    .carousel-viewport { overflow: hidden; }
    .carousel-track { display: flex; transition: transform 0.32s ease; }
    .carousel-slide { min-width: 100%; }

    .carousel-footer {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      padding: 10px 16px 14px;
      background: #fff;
      border-top: 1px solid #f0f2f5;
    }
    .carousel-btn {
      width: 28px; height: 28px;
      border-radius: 50%;
      border: 1px solid #d0dae6;
      background: #fff;
      color: #666;
      font-size: 14px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.15s;
      flex-shrink: 0;
    }
    .carousel-btn:hover { background: #f0f6fc; border-color: #2b8fc4; color: #2b8fc4; }
    .carousel-btn:disabled { opacity: 0.35; cursor: not-allowed; }
    .carousel-dots { display: flex; gap: 6px; }
    .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: #cce; cursor: pointer; transition: background 0.2s; border: none; padding: 0; }
    .carousel-dot.active { background: #2b7fc8; }

    /* ── Overall criteria ── */
    .criteria-num-tabs {
      display: flex;
      gap: 6px;
      padding: 12px 16px;
      flex-wrap: wrap;
    }
    .criteria-num-tab {
      width: 30px; height: 30px;
      border-radius: 50%;
      border: 1.5px solid #d0dae6;
      background: #fff;
      font-size: 13px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: all 0.15s;
      color: #555;
    }
    .criteria-num-tab:hover:not(.active) { background: #eef5fc; border-color: #2b8fc4; }
    .criteria-num-tab.active { background: #2b7fc8; color: #fff; border-color: #2b7fc8; font-weight: 700; }

    .criteria-panel { padding: 0 16px 16px; display: none; }
    .criteria-panel.active { display: block; }

    .criteria-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 12px; }

    .criterion-item {
      border: 1px solid #eaecef;
      border-radius: 10px;
      padding: 14px 16px;
      margin-bottom: 12px;
      background: #fafbfc;
    }
    .criterion-item:last-of-type { margin-bottom: 0; }

    .criterion-group-title {
      display: inline-flex;
      align-items: center;
      margin-bottom: 8px;
      padding: 3px 8px;
      border-radius: 6px;
      background: #edf5fb;
      color: #1f6ca8;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.4;
    }

    .criterion-q { font-size: 13px; color: #333; line-height: 1.65; white-space: pre-line; }

    .ai-verdict-row {
      display: flex; align-items: center; gap: 12px;
      margin-top: 10px; flex-wrap: wrap;
    }
    .verdict-label { font-size: 12px; color: #888; flex-shrink: 0; }
    .verdict-opts { display: flex; gap: 14px; }
    .verdict-opt {
      display: flex; align-items: center; gap: 5px;
      font-size: 13px; cursor: pointer; color: #555;
    }
    .verdict-dot {
      width: 10px; height: 10px; border-radius: 50%;
      background: #d0d7e0; border: 1.5px solid #b0bac8;
      flex-shrink: 0; transition: all 0.15s;
    }
    .verdict-opt.selected .verdict-dot { background: #2b7fc8; border-color: #2b7fc8; }
    .verdict-opt.selected { color: #1a5fa8; font-weight: 600; }

    .feedback-row {
      display: flex; align-items: center; gap: 8px;
      margin-top: 12px; flex-wrap: wrap;
    }
    .feedback-label { font-size: 12px; color: #777; }
    .feedback-btn {
      border: none; background: none; cursor: pointer;
      font-size: 12px; color: #333;
      padding: 2px 0; border-radius: 4px;
      font-family: inherit;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: color 0.15s;
    }
    .feedback-btn:hover { color: #1a5fa8; }
    .feedback-btn:focus-visible,
    .feedback-action-btn:focus-visible,
    .version-nav-btn:focus-visible,
    .ai-expand-btn:focus-visible {
      outline: 2px solid #1a5fa8;
      outline-offset: 2px;
    }
    .feedback-btn.active { color: #111; font-weight: 500; }
    .feedback-face {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      line-height: 1;
      border: 1px solid #cfd5dc;
      color: #555;
      background: #e6e8eb;
      flex-shrink: 0;
    }
    .feedback-face.happy {
      background: #e9eaec;
      color: #5f4b00;
    }
    .feedback-face.neutral,
    .feedback-face.sad {
      background: #e9eaec;
      color: #666;
    }
    .feedback-divider {
      width: 1px;
      height: 14px;
      background: #e4e8ed;
      margin: 0 8px;
    }
    .feedback-action-btn,
    .version-nav-btn {
      border: none;
      background: none;
      color: #1a78bd;
      cursor: pointer;
      font-family: inherit;
      font-size: 12px;
      padding: 2px 0;
    }
    .feedback-action-btn:hover,
    .version-nav-btn:hover { color: #14508f; text-decoration: underline; }
    .version-records {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: #8b97a3;
      font-size: 12px;
    }

    .criterion-source { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
    .criterion-source-link {
      font-size: 12px; color: #2b7fc8; cursor: pointer;
      text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
    }
    .criterion-source-link:hover { text-decoration: underline; }

    .ai-expand-btn {
      margin-top: 12px; font-size: 12px; color: #1586c9;
      cursor: pointer; border: 1px solid #1aa0e8; background: #fff;
      border-radius: 999px;
      font-family: inherit; padding: 7px 14px;
      display: flex; align-items: center; gap: 4px;
      width: fit-content;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .ai-expand-btn:hover { background: #eef9ff; color: #096ea8; border-color: #0d8fd4; }
    .ai-expand-content {
      display: none; margin-top: 8px;
      padding: 10px 12px;
      background: #f4f7fb;
      border-radius: 8px;
      font-size: 12.5px; color: #444; line-height: 1.65;
      white-space: pre-line;
      border-left: 3px solid #2b8fc4;
    }
    .ai-expand-content.open { display: block; }
    .ai-expand-source { margin-top: 6px; font-size: 11.5px; color: #999; }

    .next-criterion-btn {
      display: block; width: 100%;
      padding: 11px 20px;
      background: #1a5fa8; color: #fff; border: none;
      border-radius: 22px; font-size: 13.5px; font-weight: 500;
      cursor: pointer; font-family: inherit;
      margin-top: 16px;
      transition: background 0.2s;
    }
    .next-criterion-btn:hover { background: #14508f; }
    .next-criterion-btn:disabled { background: #7a9ec4; cursor: not-allowed; }

    /* ── Chat (right column) ── */
    .chat-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      background: #edf6fc;
    }
    .chat-panel.welcome { justify-content: flex-start; }

    .chat-intro {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 0 24px 20px;
      text-align: center;
      flex-shrink: 0;
    }
    .chat-panel.welcome .chat-intro {
      margin-top: auto;
      margin-bottom: auto;
    }
    .chat-panel:not(.welcome) .chat-intro { display: none; }
    .chat-intro-title { font-size: 22px; font-weight: 700; color: #2b7fc8; }
    .chat-intro-sub { font-size: 12.5px; color: #888; }

    .chat-messages {
      flex: 1;
      overflow-y: auto;
      padding: 26px 40px 12px;
      display: flex;
      flex-direction: column;
      gap: 26px;
    }
    .chat-panel.welcome .chat-messages { display: none; }

    .chat-msg-row {
      display: flex;
      align-items: flex-start;
      width: 100%;
      gap: 12px;
    }
    .chat-msg-row-user {
      justify-content: flex-end;
    }
    .chat-msg-row-assistant {
      justify-content: flex-start;
    }
    .chat-msg-avatar {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      flex: 0 0 34px;
    }
    .chat-msg-user-avatar {
      display: flex;
      align-items: center;
      justify-content: center;
      background: #1a5fa8;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }
    .chat-msg-operator-avatar {
      display: block;
      object-fit: cover;
      object-position: left center;
      background: #fff;
      border: 1px solid #d6e4ee;
    }

    .chat-msg-q {
      display: inline-block;
      background: rgba(255, 255, 255, 0.86);
      color: #333;
      padding: 10px 18px;
      border: 1px solid #d6dce2;
      border-radius: 13px;
      box-shadow: 0 1px 0 rgba(30, 95, 140, 0.04);
      font-size: 13px;
      line-height: 1.55;
      max-width: min(calc(86% - 46px), 520px);
      word-break: break-word;
    }

    .chat-msg-a {
      flex: 1;
      min-width: 0;
      font-size: 13px;
      color: #3b3f45;
      line-height: 1.75;
      max-width: 100%;
      word-break: break-word;
    }

    .chat-typing {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 4px 2px;
    }
    .chat-typing span {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #2b8fc4;
      opacity: 0.4;
      animation: chat-bounce 1.2s ease-in-out infinite;
    }
    .chat-typing span:nth-child(2) { animation-delay: 0.2s; }
    .chat-typing span:nth-child(3) { animation-delay: 0.4s; }
    @keyframes chat-bounce {
      0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
      40%            { transform: translateY(-6px); opacity: 1; }
    }

    .chat-msg-a-text {
      white-space: normal;
    }

    .chat-msg-a-source {
      margin-top: 18px;
      font-size: 13px;
      color: #4f5660;
      line-height: 1.85;
    }

    .chat-msg-a-source-title {
      display: flex;
      align-items: center;
      gap: 5px;
      color: #168bd3;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .source-bookmark-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }

    .chat-msg-a-source-text {
      color: #4f5660;
    }

    .chat-msg-a-source-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .chat-msg-a-source-list li {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      color: #4f5660;
      line-height: 1.6;
    }
    .chat-msg-a-source-list li::before {
      content: "·";
      color: #168bd3;
      font-weight: 700;
      flex-shrink: 0;
    }

    .md-table-wrap {
      overflow-x: auto;
      margin: 10px 0;
      border-radius: 6px;
      border: 1px solid #d6e4ee;
    }
    .md-table {
      border-collapse: collapse;
      table-layout: fixed;
      width: 100%;
      font-size: 13px;
      line-height: 1.6;
    }
    .md-table th,
    .md-table td {
      padding: 7px 12px;
      border: 1px solid #d6e4ee;
      text-align: left;
      overflow-wrap: break-word;
      word-break: break-word;
      min-width: 60px;
    }
    .md-table th {
      background: #eaf4fb;
      color: #1a6e9e;
      font-weight: 600;
    }
    .md-table tbody tr:nth-child(even) { background: #f7fbfe; }
    .md-table tbody tr:hover { background: #e8f3fb; }
    .md-h1, .md-h2, .md-h3 {
      font-weight: 700;
      color: #1a5fa8;
      margin: 14px 0 6px;
      line-height: 1.4;
    }
    .md-h1 { font-size: 17px; }
    .md-h2 { font-size: 15px; }
    .md-h3 { font-size: 13.5px; }
    .md-code {
      background: #f0f4f8;
      border: 1px solid #d0dde8;
      border-radius: 3px;
      padding: 1px 5px;
      font-family: 'Menlo', 'Consolas', monospace;
      font-size: 0.88em;
      color: #c0392b;
    }

    .chat-msg-feedback {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 22px;
      flex-wrap: wrap;
      color: #7e8994;
    }
    .chat-msg-feedback span { font-size: 12px; color: #7e8994; }
    .chat-feedback-label { margin-right: 2px; }
    .chat-feedback-btn,
    .chat-copy-btn {
      border: none;
      background: transparent;
      color: #5f6b76;
      cursor: pointer;
      font-family: inherit;
      font-size: 12px;
      line-height: 1.4;
      padding: 2px 3px;
      border-radius: 4px;
    }
    .chat-feedback-btn.active {
      color: #333;
      font-weight: 600;
    }
    .chat-feedback-btn:hover,
    .chat-copy-btn:hover {
      color: #168bd3;
      background: rgba(22, 139, 211, 0.08);
    }
    .chat-feedback-btn:focus-visible,
    .chat-copy-btn:focus-visible {
      outline: 2px solid #168bd3;
      outline-offset: 2px;
    }
    .chat-feedback-divider {
      width: 1px;
      height: 18px;
      background: #ccd6df;
      margin: 0 12px;
    }
    .chat-copy-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #168bd3;
      padding: 4px;
    }
    .chat-copy-status {
      min-width: 3.5em;
      color: #4f6475;
      font-size: 0.75rem;
    }

    @media (max-width: 760px) {
      .chat-messages {
        padding: 20px 18px 10px;
      }
      .chat-msg-q,
      .chat-msg-a {
        font-size: 12px;
      }
      .chat-msg-row {
        gap: 8px;
      }
      .chat-msg-avatar {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
      }
      .chat-msg-user-avatar {
        font-size: 12px;
      }
      .chat-msg-q {
        max-width: calc(100% - 38px);
      }
      .chat-feedback-divider {
        margin: 0 6px;
      }
    }

    .chat-compose { flex-shrink: 0; padding: 8px 18px 14px; }
    .chat-input-row {
      display: flex;
      align-items: flex-end;
      gap: 8px;
    }
    .chat-input {
      flex: 1;
      min-height: 44px;
      max-height: 160px;
      border: 1px solid #d0d7e2;
      border-radius: 12px;
      padding: 11px 14px;
      font-size: 13px;
      font-family: inherit;
      resize: none;
      outline: none;
      transition: border-color 0.2s;
      color: #333;
      line-height: 1.6;
    }
    .chat-panel.welcome .chat-input { min-height: 120px; }
    .chat-input:focus { border-color: #2b8fc4; }
    .chat-input::placeholder { color: #bbb; }
    .chat-send-btn {
      width: 38px; height: 38px;
      border-radius: 50%;
      background: #2b7fc8; color: #fff;
      border: none; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: background 0.2s;
    }
    .chat-send-btn:hover { background: #1e6fb8; }

    .ai-disclaimer {
      font-size: 11px;
      color: #bbb;
      text-align: center;
      margin-top: 8px;
    }