/* Dia Browser–style reference (light, frosted stationery). ABC Oracle → DM Sans as substitute. */
    :root {
      --color-ink-black: #000000;
      --color-snow: #ffffff;
      --color-canvas: #f8f8f8;
      --color-fog: #efefef;
      --color-pebble: #d9d9d9;
      --color-graphite: #636363;
      --color-slate: #959595;
      --color-steel: #aeaeae;
      --color-ash: #7c7c7c;
      --gradient-spectrum-gradient: linear-gradient(90deg, rgb(198, 121, 196) 0%, rgb(250, 61, 29) 25%, rgb(255, 176, 5) 50%, rgb(225, 225, 254) 75%, rgb(3, 88, 247) 100%);
      --color-rose-quartz: #c679c4;
      --color-marigold: #ffb005;
      --color-signal-blue: #0358f7;
      --color-hot-pink: #fd02f5;
      --color-red-accent: #fa3d1d;
      --shadow-sm: none;
      --font-abc-oracle: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --page-max-width: 1200px;
      --radius-images: 10px;
      --radius-navitems: 16px;
      --radius-cards: 30px;
      --radius-buttons: 30px;
      --radius-containers: 40px;
      --radius-pillbuttons: 9999px;
      --radius-inputs: 16px;
      --font-display: var(--font-abc-oracle);
      --font-body: var(--font-abc-oracle);
      /* Inline / legacy hooks → Dia palette */
      --color-ash-gray: var(--color-graphite);
      --color-silver-mist: var(--color-slate);
      --color-slate-dust: var(--color-steel);
      --color-accent: var(--color-signal-blue);
      --color-electric-blue: var(--color-signal-blue);
    }
    *, *::before, *::after { box-sizing: border-box; }
    html, body {
      margin: 0; height: 100%;
      background: var(--color-canvas);
      color: var(--color-ink-black);
      font-family: var(--font-body);
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
    }
    a {
      color: var(--color-ink-black);
      text-decoration: underline;
      text-underline-offset: 2px;
      transition: text-decoration-color 0.2s ease, opacity 0.2s ease;
    }
    a:hover { text-decoration-color: var(--color-steel); }
    .hidden { display: none !important; }

    /* Login */
    .login-screen {
      min-height: 100vh; display: flex; align-items: center; justify-content: center;
      padding: var(--spacing-32, 32px);
      background: var(--color-canvas);
      position: relative; overflow: hidden;
    }
    .login-screen::before {
      content: ""; position: absolute; inset: -40% -20% auto -20%; height: 70%;
      background: var(--gradient-spectrum-gradient);
      opacity: 0.12; filter: blur(80px); pointer-events: none;
    }
    .login-card {
      position: relative; width: 100%; max-width: 400px;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-radius: var(--radius-cards);
      padding: var(--spacing-32, 32px);
      box-shadow: var(--shadow-sm);
    }
    .login-brand-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      gap: 10px;
      margin-bottom: var(--spacing-6, 6px);
    }
    .login-brand-wrap .login-brand { margin-bottom: 0; }
    .login-brand {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: var(--text-heading-sm, 22px);
      line-height: 1.25;
      letter-spacing: -0.44px;
      margin-bottom: var(--spacing-6, 6px);
      color: var(--color-ink-black);
    }
    .login-sub { color: var(--color-graphite); font-size: 14px; margin-bottom: 28px; font-weight: 400; }
    .field { margin-bottom: 16px; }
    .field label { display: block; font-size: 12px; color: var(--color-slate); margin-bottom: 6px; font-weight: 500; }
    .input {
      width: 100%; padding: 12px 14px; border-radius: var(--radius-inputs);
      border: none;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
      color: var(--color-ink-black); font-family: inherit; font-size: 14px; font-weight: 400;
    }
    .input::placeholder { color: var(--color-steel); }
    .input:focus { outline: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }
    select.input {
      appearance: auto;
      -webkit-appearance: menulist;
      cursor: pointer;
      min-height: 44px;
      color: var(--color-ink-black);
      background-color: #ffffff;
    }
    select.input option {
      color: var(--color-ink-black);
      background-color: #ffffff;
    }

    .btn-pill {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 10px 20px; border-radius: var(--radius-buttons); border: none; cursor: pointer;
      font-family: inherit; font-size: 14px; font-weight: 500;
      transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    }
    .btn-pill--primary {
      background: var(--color-pebble);
      color: rgba(0, 0, 0, 0.85);
      border: 1px solid rgba(0, 0, 0, 0.12);
    }
    .btn-pill--primary:hover { background: var(--color-ink-black); color: var(--color-snow); }
    .btn-pill--ghost {
      background: rgba(255, 255, 255, 0.95);
      color: rgba(0, 0, 0, 0.85);
      border-radius: var(--radius-pillbuttons);
      border: 1px solid rgba(0, 0, 0, 0.12);
    }
    .btn-pill--ghost:hover { background: rgba(0, 0, 0, 0.04); }
    .btn-pill--accent {
      background: var(--color-pebble);
      color: rgba(0, 0, 0, 0.85);
      border: 1px solid rgba(0, 0, 0, 0.12);
    }
    .btn-pill--accent:hover { background: var(--color-ink-black); color: var(--color-snow); }
    .btn-pill--danger {
      background: transparent;
      color: var(--color-red-accent);
      border: 1px solid rgba(250, 61, 29, 0.35);
      border-radius: var(--radius-buttons);
    }
    .btn-pill--danger:hover { background: rgba(250, 61, 29, 0.06); }
    .btn-pill:disabled { opacity: .45; cursor: not-allowed; }

    /* App shell：鎖定視窗高度，主內容區捲動；側欄底部（帳號／登出）固定可見 */
    .app-shell {
      display: flex;
      min-height: 100vh;
      height: 100vh;
      max-height: 100vh;
      overflow: hidden;
      background: var(--color-canvas);
    }
    .sidebar {
      width: 260px;
      flex-shrink: 0;
      align-self: stretch;
      min-height: 0;
      max-height: 100vh;
      overflow: hidden;
      background: rgba(239, 239, 239, 0.85);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-right: 1px solid rgba(0, 0, 0, 0.06);
      display: flex;
      flex-direction: column;
      padding: 20px 14px;
    }
    .sidebar-brand {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 8px 10px 24px;
      flex-shrink: 0;
    }
    .brand-logo-img {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      flex-shrink: 0;
      object-fit: cover;
      box-shadow: var(--shadow-sm);
      border: 1px solid rgba(0, 0, 0, 0.06);
    }
    .brand-logo-img--login {
      width: 64px;
      height: 64px;
    }
    .sidebar-brand strong {
      display: block; font-family: var(--font-display); font-size: 15px; font-weight: 500;
      letter-spacing: -0.02em; color: var(--color-ink-black);
    }
    .sidebar-brand span.muted { font-size: 11px; color: var(--color-slate); font-weight: 400; }

    .sidebar-nav {
      flex: 1;
      min-height: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }
    .nav-link {
      display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--radius-navitems);
      color: var(--color-graphite); text-decoration: none; font-size: 14px; font-weight: 400;
      cursor: pointer; border: none; border-left: 3px solid transparent; background: transparent;
      width: 100%; text-align: left; font-family: inherit;
      transition: background-color 0.2s ease, color 0.2s ease;
    }
    .nav-link:hover { background: rgba(0, 0, 0, 0.04); color: var(--color-ink-black); }
    .nav-link.active {
      background: rgba(0, 0, 0, 0.06);
      color: var(--color-ink-black);
      font-weight: 500;
      border-left-color: var(--color-ink-black);
    }
    /* Font Awesome（側欄已載入 all.min.css） */
    .nav-icon {
      width: 1.125rem;
      font-size: 15px;
      line-height: 1;
      flex-shrink: 0;
      opacity: 0.92;
      color: inherit;
    }
    .nav-icon--sub {
      width: 0.95rem;
      font-size: 13px;
      opacity: 0.88;
    }
    .mobile-nav-toggle-icon {
      font-size: 1.125rem;
      line-height: 1;
      display: block;
    }

    .tenant-ai-sidebar-kb {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .nav-subwrap { margin-left: 8px; border-left: 1px solid rgba(0, 0, 0, 0.08); padding-left: 8px; margin-top: 4px; margin-bottom: 8px; }
    .nav-subwrap.collapsed { display: none; }

    .sidebar-footer {
      flex-shrink: 0;
      margin-top: auto;
      padding-top: 12px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
    }
    .sidebar-footer-tenant-review-wrap {
      margin-bottom: 10px;
    }
    .sidebar-footer-tenant-review {
      border-left: 3px solid transparent;
    }
    .sidebar-footer-tenant-review.active {
      background: rgba(0, 0, 0, 0.06);
      color: var(--color-ink-black);
      font-weight: 500;
      border-left-color: var(--color-ink-black);
    }
    .sidebar-logout-btn {
      width: 100%;
      margin-top: 10px;
    }
    .sidebar-user-block {
      margin-bottom: 0;
    }
    .sidebar-user {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px; border-radius: var(--radius-navitems);
      background: rgba(255, 255, 255, 0.65);
      backdrop-filter: blur(12px);
      box-shadow: var(--shadow-sm);
    }
    .presence-switch {
      position: relative;
      flex-shrink: 0;
      width: 46px;
      height: 28px;
      padding: 0;
      border: none;
      border-radius: 999px;
      cursor: pointer;
      background: rgba(148, 163, 184, 0.45);
      transition: background 0.2s ease;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06);
    }
    .presence-switch.is-on {
      background: rgba(34, 197, 94, 0.55);
    }
    .presence-switch:focus-visible {
      outline: 2px solid var(--color-ink-black);
      outline-offset: 2px;
    }
    .presence-switch-thumb {
      position: absolute;
      top: 3px;
      left: 3px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
      transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
      pointer-events: none;
    }
    .presence-switch.is-on .presence-switch-thumb {
      transform: translateX(18px);
    }
    .presence-switch:hover {
      filter: brightness(1.03);
    }
    .sidebar-user .avatar {
      width: 36px; height: 36px; border-radius: 50%; background: var(--color-pebble); color: var(--color-ink-black);
      display: inline-flex; align-items: center; justify-content: center; font-weight: 500; flex-shrink: 0;
    }
    .sidebar-user .meta {
      flex: 1;
      min-width: 0;
      display: block;
    }
    .sidebar-user .name { font-weight: 500; font-size: 13px; color: var(--color-ink-black); }
    .sidebar-user .email { font-size: 11px; color: var(--color-slate); overflow: hidden; text-overflow: ellipsis; font-weight: 400; }

    .main-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      background: var(--color-canvas);
      position: relative;
    }
    /* 知識庫／問答管理：主面板與 section 不捲動，內容區各自捲動 */
    .main-panel:has(#view-kb-web.active),
    .main-panel:has(#view-kb-qa.active) {
      overflow: hidden;
    }
    #view-kb-web.view.active,
    #view-kb-qa.view.active {
      overflow: hidden;
      flex: 1;
      min-height: 0;
    }
    .main-panel::before {
      content: ""; position: absolute; pointer-events: none;
      top: 10%; right: -10%; width: 55%; max-width: 520px; aspect-ratio: 1;
      background: var(--gradient-spectrum-gradient);
      opacity: 0.06; filter: blur(100px);
    }
    .view {
      display: none; flex: 1; flex-direction: column; min-height: 0;
      padding: 0px 32px 48px;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      max-width: var(--page-max-width); margin: 0 auto; width: 100%;
      position: relative; z-index: 1;
    }
    .view.active { display: flex; }

    .page-head { margin-bottom: 28px; flex-shrink: 0; }
    .page-title {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 500;
      line-height: 1.25;
      letter-spacing: -0.44px;
      margin: 0 0 8px;
      color: var(--color-ink-black);
      padding-top: 20px;
    }
    .page-desc { margin: 0; color: var(--color-graphite); font-size: 14px; font-weight: 400; }
    .page-head--split {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 16px;
      flex-wrap: wrap;
    }
    .page-head--split .page-title { flex: 1; min-width: 200px; }
    .page-head-actions {
      display: flex;
      align-items: flex-start;
      flex-shrink: 0;
      padding-top: 2px;
    }
    /* —— 聯絡方式（嵌入渠道）—— */
    .contact-methods-add-row {
      margin-top: 16px;
      padding-top: 4px;
    }
    .contact-methods-empty {
      text-align: center;
      padding: 28px 16px 8px;
    }
    .contact-methods-empty__icon {
      display: inline-flex;
      width: 56px;
      height: 56px;
      border-radius: 18px;
      align-items: center;
      justify-content: center;
      font-size: 26px;
      color: var(--color-graphite);
      background: rgba(0, 0, 0, 0.04);
      margin-bottom: 12px;
    }
    .contact-methods-empty__title {
      margin: 0 0 8px;
      font-size: 15px;
      font-weight: 500;
      color: var(--color-ink-black);
    }
    .contact-methods-empty__hint {
      margin: 0;
      font-size: 13px;
      color: var(--color-graphite);
      line-height: 1.45;
      max-width: 360px;
      margin-left: auto;
      margin-right: auto;
    }

    .channels-editor-mount {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .channel-editor-card {
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: var(--radius-images);
      padding: 16px 16px 14px;
      background: rgba(255, 255, 255, 0.85);
      box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    }
    .channel-card__toolbar {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 14px;
    }
    .channel-card__badge {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      background: rgba(3, 88, 247, 0.08);
      border: 1px solid rgba(3, 88, 247, 0.2);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: var(--color-signal-blue);
    }
    .channel-card__title-col {
      flex: 1;
      min-width: 0;
    }
    .channel-card__label-input {
      width: 100%;
      margin-bottom: 0;
    }
    .channel-card__actions {
      display: flex;
      flex-shrink: 0;
      gap: 6px;
      align-items: center;
    }
    .channel-card__icon-btn {
      width: 38px;
      height: 38px;
      padding: 0;
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      background: rgba(255, 255, 255, 0.9);
      color: var(--color-graphite);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .channel-card__icon-btn:hover:not(:disabled) {
      background: rgba(0, 0, 0, 0.04);
      border-color: rgba(0, 0, 0, 0.14);
      color: var(--color-ink-black);
    }
    .channel-card__icon-btn:disabled {
      opacity: 0.35;
      cursor: not-allowed;
    }
    .channel-card__icon-btn--danger {
      color: var(--color-red-accent);
      border-color: rgba(250, 61, 29, 0.25);
    }
    .channel-card__icon-btn--danger:hover:not(:disabled) {
      background: rgba(250, 61, 29, 0.08);
      border-color: rgba(250, 61, 29, 0.35);
      color: var(--color-red-accent);
    }

    .channel-type-picker {
      margin-bottom: 10px;
    }
    .channel-type-picker__label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.02em;
      color: var(--color-graphite);
      margin-bottom: 8px;
    }
    .channel-type-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
      gap: 10px;
    }
    .channel-type-tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 10px 6px 8px;
      margin: 0;
      border-radius: 14px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      background: rgba(0, 0, 0, 0.03);
      color: var(--color-graphite);
      cursor: pointer;
      font: inherit;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
    }
    .channel-type-tile i {
      font-size: 20px;
      line-height: 1;
    }
    .channel-type-tile__cap {
      font-size: 11px;
      line-height: 1.2;
      text-align: center;
      word-break: break-word;
      max-width: 100%;
    }
    .channel-type-tile:hover {
      background: rgba(255, 255, 255, 0.95);
      border-color: rgba(0, 0, 0, 0.12);
    }
    .channel-type-tile--active {
      background: rgba(255, 255, 255, 0.98);
      border-color: var(--color-signal-blue);
      color: var(--color-ink-black);
      box-shadow: 0 0 0 1px rgba(3, 88, 247, 0.15);
    }
    .channel-type-tile--active i {
      color: var(--color-signal-blue);
    }

    .channel-card__hint {
      font-size: 12px;
      color: var(--color-graphite);
      margin: 0 0 12px;
      line-height: 1.45;
    }
    .channel-card__meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 14px 20px;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .channel-meta-checkbox {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--color-ink-black);
      cursor: pointer;
      user-select: none;
    }
    .channel-meta-checkbox input {
      width: 16px;
      height: 16px;
      accent-color: var(--color-signal-blue);
    }
    .channel-device-group {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .channel-device-group__lbl {
      font-size: 12px;
      color: var(--color-graphite);
      margin-right: 2px;
    }
    .channel-device-toggle {
      width: 40px;
      height: 40px;
      padding: 0;
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      background: rgba(0, 0, 0, 0.04);
      color: var(--color-steel);
      cursor: pointer;
      font-size: 16px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    }
    .channel-device-toggle:hover {
      border-color: rgba(0, 0, 0, 0.14);
      color: var(--color-graphite);
    }
    .channel-device-toggle--on {
      background: rgba(3, 88, 247, 0.12);
      border-color: rgba(3, 88, 247, 0.35);
      color: var(--color-signal-blue);
    }
    .channel-card__fields .input {
      width: 100%;
    }
    .channel-card__upload-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-top: 10px;
    }
    .channel-card__upload-row input[type="file"] {
      max-width: 220px;
      font-size: 13px;
    }
    .channel-upload-hint {
      font-size: 12px;
      color: var(--color-graphite);
      flex: 1;
      min-width: 120px;
    }
    .channel-file-input-auto {
      flex: 1;
      min-width: 0;
      max-width: min(100%, 280px);
      font-size: 13px;
    }
    .channel-card__asset-ok {
      font-size: 12px;
      color: var(--color-graphite);
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .channel-card__asset-ok i {
      color: #16a34a;
      font-size: 13px;
    }
    /* API 設定／系統設定／聯絡方式：黏頂標題列；底色與版面一致（與 #view-api 相同間距） */
    #view-api > .api-sticky-top,
    #view-settings > .api-sticky-top,
    #view-contact-methods > .api-sticky-top {
      position: sticky;
      top: 0;
      z-index: 12;
      margin-left: -32px;
      margin-right: -32px;
      margin-top: -32px;
      padding-left: 32px;
      padding-right: 32px;
      padding-top: 0px;
      padding-bottom: 12px;
      margin-bottom: 20px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      background-color: var(--color-canvas);
      box-shadow: none;
    }
    #view-api > .api-sticky-top .api-page-head-inner,
    #view-settings > .api-sticky-top .api-page-head-inner,
    #view-contact-methods > .api-sticky-top .api-page-head-inner {
      margin-bottom: 10px;
    }
    /* 標題（含副標）與右側儲存鈕垂直置中，避免鈕貼頂而顯得「太靠上」 */
    #view-api > .api-sticky-top .api-page-head-inner.page-head--split,
    #view-settings > .api-sticky-top .api-page-head-inner.page-head--split,
    #view-contact-methods > .api-sticky-top .api-page-head-inner.page-head--split {
      align-items: center;
    }
    #view-api > .api-sticky-top .api-page-head-inner.page-head--split .page-head-actions,
    #view-settings > .api-sticky-top .api-page-head-inner.page-head--split .page-head-actions,
    #view-contact-methods > .api-sticky-top .api-page-head-inner.page-head--split .page-head-actions {
      padding-top: 0;
      align-self: center;
    }

    /* Playground · REF（只顯示與提問相關的正文片段） */
    .pg-refs-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .pg-ref-card {
      padding: 10px 12px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--color-ink-black);
      background: rgba(0, 0, 0, 0.03);
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.06);
    }
    .pg-ref-meta {
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--color-graphite);
      font-size: 12px;
    }
    .pg-ref-snippet {
      font-size: 12px;
      color: var(--color-graphite);
      white-space: pre-wrap;
      word-break: break-word;
    }
    .pg-ref-snippet--empty {
      color: var(--color-steel);
      font-style: italic;
    }

    .btn-pill--sticky-save {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #000;
      color: #fff;
      border: 1px solid #000;
    }
    .btn-pill--sticky-save:hover {
      background: #f3f4f6;
      color: #000;
      border-color: #e5e7eb;
      filter: none;
    }
    .btn-pill--sticky-save:active {
      filter: brightness(0.97);
    }

    /* Dashboard cards — frosted */
    .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-bottom: 28px; }
    .stat-card {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-radius: var(--radius-cards);
      padding: var(--spacing-32, 32px);
      box-shadow: var(--shadow-sm);
    }
    .stat-card .num {
      font-family: var(--font-display);
      font-size: 40px;
      font-weight: 300;
      letter-spacing: -0.04em;
      line-height: 1.15;
      color: var(--color-ink-black);
    }
    .stat-card .lbl { color: var(--color-slate); font-size: 12px; margin-top: 8px; font-weight: 400; }

    /* Inbox */
    .inbox-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 18px; }
    .inbox-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; flex-shrink: 0; }
    .tabs { display: flex; gap: 8px; flex-wrap: wrap; }
    .tab-pill {
      padding: 8px 16px; border-radius: var(--radius-pillbuttons);
      border: none;
      background: transparent;
      color: rgba(0, 0, 0, 0.85);
      cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 400;
      transition: background-color 0.2s ease;
    }
    .tab-pill:hover { background: rgba(0, 0, 0, 0.04); }
    .tab-pill.active {
      background: rgba(0, 0, 0, 0.06);
      color: var(--color-ink-black);
      font-weight: 500;
    }
    .search-input { flex: 1; min-width: 200px; max-width: 360px; }
    #inboxNotifyPrefsOpenBtn .inbox-notify-btn-label {
      margin-left: 6px;
    }
    @media (max-width: 520px) {
      #inboxNotifyPrefsOpenBtn .inbox-notify-btn-label {
        display: none;
      }
    }
    .agent-notify-prefs-panel {
      max-width: min(440px, 100vw - 20px);
    }
    .agent-notify-prefs-body .agent-notify-prefs-lead {
      margin: 0 0 14px;
      font-size: 13px;
      line-height: 1.5;
      color: var(--color-graphite);
    }
    .agent-notify-pref-row {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 4px;
      font-size: 14px;
      color: var(--color-ink-black);
      cursor: pointer;
      line-height: 1.45;
    }
    .agent-notify-pref-row input {
      margin-top: 3px;
      flex-shrink: 0;
    }

    .inbox-layout-main {
      flex: 1; display: flex; flex-direction: column; min-height: 0;
      border-radius: var(--radius-cards); overflow: hidden;
      border: 1px solid rgba(0, 0, 0, 0.08);
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
    }
    .inbox-layout-main.inbox-split {
      display: grid;
      grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
      flex: 1;
      min-height: min(520px, 70vh);
    }
    .inbox-split .conv-list-col {
      flex: unset;
      overflow-y: auto;
      min-height: 0;
      background: rgba(255, 255, 255, 0.88);
      border-right: 1px solid rgba(0, 0, 0, 0.06);
    }
    .conv-detail-pane {
      display: flex;
      flex-direction: column;
      min-height: 0;
      min-width: 0;
      background: rgba(255, 255, 255, 0.96);
    }
    .conv-detail-active {
      flex: 1;
      display: flex;
      flex-direction: column;
      min-height: 0;
    }
    .conv-detail-empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 36px 24px;
      text-align: center;
      min-height: 260px;
    }
    .conv-detail-empty-visual {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-images);
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(0, 0, 0, 0.06);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-steel);
      margin-bottom: 16px;
    }
    .conv-detail-empty-visual svg {
      width: 22px;
      height: 22px;
      stroke: currentColor;
      fill: none;
    }
    .conv-detail-empty-title {
      margin: 0 0 8px;
      font-size: 15px;
      font-weight: 500;
      color: var(--color-ink-black);
    }
    .conv-detail-empty-desc {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: var(--color-graphite);
      max-width: 280px;
    }
    .conv-detail-head-main {
      flex: 1;
      min-width: 0;
    }
    .conv-detail-title-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px 10px;
      margin-bottom: 2px;
    }
    .conv-detail-title-row h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 500;
      color: var(--color-ink-black);
    }
    /** 會話編號：桌面維持標題外觀；手機可點開詳情彈窗 */
    .conv-detail-id-trigger {
      margin: 0;
      padding: 0;
      border: none;
      background: transparent;
      font: inherit;
      font-size: 13px;
      font-weight: 600;
      color: var(--color-ink-black);
      cursor: default;
      text-align: left;
      border-radius: 8px;
      -webkit-tap-highlight-color: transparent;
    }
    .conv-detail-id-trigger:focus-visible {
      outline: 2px solid rgba(0, 0, 0, 0.2);
      outline-offset: 2px;
    }
    @media (max-width: 960px) {
      .conv-detail-id-trigger.conv-detail-id-trigger--populated {
        cursor: pointer;
        text-decoration: underline;
        text-decoration-style: dotted;
        text-underline-offset: 3px;
      }
    }
    .detail-lead-meta {
      font-size: 11px;
      font-weight: 500;
      color: var(--color-graphite);
      line-height: 1.25;
      min-width: 0;
    }
    @media (max-width: 960px) {
      .conv-detail-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        margin-bottom: 2px;
      }
    }
    .conv-mobile-back {
      display: none;
      align-items: center;
      gap: 2px;
      margin: 0;
      padding: 6px 10px 6px 2px;
      border: none;
      background: transparent;
      color: var(--color-ink-black);
      font: inherit;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
      border-radius: var(--radius-pillbuttons);
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .conv-mobile-back:active {
      background: rgba(0, 0, 0, 0.06);
    }
    .conv-mobile-back-icon {
      font-size: 24px;
      line-height: 1;
      font-weight: 400;
      margin-right: 2px;
    }
    .conv-mobile-back-text {
      font-size: 14px;
    }
    /* 會話詳情副資訊：極省空間（兩行：訪客／環境、時間） */
    .detail-meta-lines {
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-top: 0;
      max-width: 100%;
    }
    .detail-meta-kv-row {
      display: grid;
      grid-template-columns: minmax(52px, 18%) minmax(0, 1fr);
      gap: 4px 6px;
      align-items: center;
      padding: 1px 0;
      border-bottom: none;
      font-size: 10px;
      line-height: 1.2;
    }
    .detail-meta-kv-row + .detail-meta-kv-row {
      margin-top: 2px;
      padding-top: 2px;
      border-top: 1px solid rgba(0, 0, 0, 0.05);
    }
    .detail-meta-k {
      color: var(--color-ash-gray);
      font-weight: 500;
      flex-shrink: 0;
      white-space: nowrap;
    }
    .detail-meta-v {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 10px;
      font-weight: 400;
      color: var(--color-ink-black);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      word-break: normal;
    }
    .detail-meta-empty {
      margin: 0;
      font-size: 13px;
      color: var(--color-ash-gray);
    }
    @media (max-width: 960px) {
      .detail-meta-lines.detail-meta-mobile-collapse {
        display: none !important;
      }
    }
    .conv-detail-meta-body {
      font-size: 11px;
      line-height: 1.25;
      color: var(--color-graphite);
      word-break: break-word;
    }
    .conv-detail-meta-body .detail-meta-kv-row {
      padding: 2px 0;
      font-size: 11px;
    }
    .conv-detail-meta-body .detail-meta-k {
      font-size: 11px;
    }
    .conv-detail-meta-body .detail-meta-v {
      font-size: 11px;
    }
    @media (max-width: 960px) {
      .conv-detail-meta-modal.open {
        align-items: flex-end;
        padding: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
      }
      .conv-detail-meta-modal .biz-hours-modal-panel {
        align-self: flex-end;
        width: 100%;
        max-width: none;
        border-radius: var(--radius-cards) var(--radius-cards) 0 0;
        max-height: min(78dvh, 480px);
      }
    }
    .conv-detail-head-actions {
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    /* 操作：單一按鈕 + 滑過／點開顯示 接管／已完成／封存 */
    .conv-op-dropdown {
      position: relative;
      z-index: 25;
      display: inline-flex;
      flex-direction: column;
      align-items: flex-end;
    }
    .conv-op-dropdown::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      height: 10px;
      pointer-events: auto;
    }
    .conv-op-panel {
      display: none;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      flex-direction: column;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 0;
      padding: 6px 0;
      margin: 0;
      list-style: none;
      min-width: max(140px, max-content);
      max-width: min(100vw - 24px, 420px);
      border-radius: 14px;
      background: rgba(255, 255, 255, 0.98);
      border: 1px solid rgba(0, 0, 0, 0.08);
      box-shadow: 0 10px 32px rgba(0, 0, 0, 0.12);
      overflow: hidden;
    }
    @media (hover: hover) and (pointer: fine) {
      .conv-op-dropdown:hover .conv-op-panel {
        display: flex;
      }
    }
    .conv-op-dropdown.is-open .conv-op-panel {
      display: flex;
    }
    .conv-op-tab {
      appearance: none;
      -webkit-appearance: none;
      margin: 0;
      font: inherit;
      font-size: 13px;
      font-weight: 500;
      line-height: 1.25;
      padding: 10px 16px;
      border: none;
      border-radius: 0;
      background: transparent;
      color: var(--color-ink-black);
      cursor: pointer;
      white-space: nowrap;
      text-align: left;
      width: 100%;
      transition: background 0.15s ease;
    }
    .conv-op-tab:not(:last-child) {
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    }
    .conv-op-tab:hover {
      background: rgba(0, 0, 0, 0.05);
    }
    .conv-op-tab:active {
      background: rgba(0, 0, 0, 0.09);
    }
    .conv-clear-btn {
      font-size: 12px;
      padding: 6px 12px;
    }
    .conv-source-strip {
      flex-shrink: 0;
      padding: 8px 14px;
      font-size: 12px;
      background: rgba(245, 247, 250, 0.95);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .conv-source-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 8px 14px;
      line-height: 1.45;
    }
    .conv-source-label {
      font-weight: 600;
      color: var(--color-graphite);
      flex-shrink: 0;
    }
    .conv-source-link {
      color: #2563eb;
      word-break: break-all;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .conv-source-none {
      color: var(--color-slate);
      font-size: 12px;
    }
    .conv-card-top {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 6px;
    }
    /* 列表頂列左側：最後更新時間 · 時區／語系／IP（取代 #編號） */
    .conv-card-lead-meta {
      flex: 1;
      min-width: 0;
      font-size: 12px;
      line-height: 1.45;
      font-weight: 400;
      color: var(--color-graphite);
      word-break: break-word;
    }
    .conv-card-time {
      font-size: 12px;
      font-weight: 500;
      color: var(--color-ink-black);
      margin-bottom: 6px;
    }
    .conv-card-meta-row {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 8px;
      flex-wrap: wrap;
    }
    .conv-card-meta-row .conv-card-time {
      margin-bottom: 0;
      flex-shrink: 0;
    }
    .conv-card-meta-inline {
      font-size: 11px;
      line-height: 1.35;
      color: var(--color-graphite);
      text-align: right;
      word-break: break-word;
      min-width: 0;
      flex: 1;
    }
    .conv-card-meta-row--contact {
      display: block;
      margin-bottom: 8px;
    }
    .conv-card-contact-line {
      display: block;
      font-size: 12px;
      line-height: 1.45;
      font-weight: 500;
      color: var(--color-ink-black);
      word-break: break-word;
    }
    .conv-card-meta-one {
      font-size: 11px;
      line-height: 1.35;
      color: var(--color-graphite);
      margin-bottom: 8px;
      word-break: break-word;
    }
    .conv-load-older-wrap {
      flex-shrink: 0;
      padding: 8px 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      text-align: center;
      background: rgba(248, 250, 252, 0.98);
    }
    .conv-load-older-btn {
      font-size: 12px;
    }
    .conv-card-dl {
      margin: 0 0 10px;
      padding: 0;
      font-size: 11px;
      color: var(--color-graphite);
    }
    .conv-card-dl > div {
      display: grid;
      grid-template-columns: 72px 1fr;
      gap: 6px 10px;
      margin-bottom: 4px;
      align-items: start;
    }
    .conv-card-dl dt {
      margin: 0;
      color: var(--color-slate);
      font-weight: 500;
    }
    .conv-card-dl dd {
      margin: 0;
      word-break: break-word;
      font-weight: 400;
    }
    .conv-list-col { background: rgba(255, 255, 255, 0.85); overflow-y: auto; flex: 1; min-height: 280px; }
    .conv-card {
      padding: 14px 16px; cursor: pointer; border-bottom: 1px solid rgba(0, 0, 0, 0.06); border-left: 3px solid transparent;
      transition: background-color 0.2s ease;
    }
    .conv-card:hover { background: rgba(0, 0, 0, 0.03); }
    .conv-card.selected {
      background: rgba(0, 0, 0, 0.05);
      border-left-color: var(--color-ink-black);
    }
    .conv-card .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
    .badge {
      font-size: 10px; padding: 4px 10px; border-radius: var(--radius-pillbuttons);
      background: rgba(0, 0, 0, 0.06);
      color: var(--color-ink-black);
      font-weight: 500;
    }
    .conv-id { font-size: 11px; color: var(--color-steel); word-break: break-all; font-weight: 400; }
    .conv-snippet {
      font-size: 13px; color: var(--color-graphite);
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
      font-weight: 400;
    }
    .conv-meta { font-size: 11px; color: var(--color-slate); margin-top: 8px; }

    @media (max-width: 960px) {
      #view-inbox > .page-head {
        display: none;
      }
      #refreshBtn {
        display: none !important;
      }
      .inbox-wrap {
        gap: 12px;
      }
      .inbox-layout-main.inbox-split {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: min(680px, calc(100dvh - 140px));
        grid-template-columns: unset;
        grid-template-rows: unset;
      }
      .inbox-layout-main.inbox-split:not(.inbox-mobile-detail-open) .conv-detail-pane {
        display: none;
      }
      .inbox-layout-main.inbox-split.inbox-mobile-detail-open .conv-list-col {
        display: none;
      }
      .inbox-split .conv-list-col {
        flex: 1;
        min-height: 0;
        max-height: none;
        border-right: none;
        border-bottom: none;
      }
      .inbox-layout-main.inbox-split.inbox-mobile-detail-open {
        min-height: min(680px, calc(100dvh - 120px));
      }
      .inbox-layout-main.inbox-split.inbox-mobile-detail-open .conv-detail-pane {
        flex: 1;
        min-height: 0;
        display: flex;
      }
      .conv-mobile-back {
        display: inline-flex;
      }
      /* 手機版：載入更早訊息僅保留按鈕，不要整條色塊與上下框線 */
      .conv-load-older-wrap {
        padding: 10px 12px 12px;
        background: transparent;
        border-bottom: none;
        border-top: none;
      }
    }

    .conv-modal-root {
      position: fixed; inset: 0; z-index: 300; display: none;
      align-items: center; justify-content: center; padding: 16px;
    }
    .conv-modal-root.open { display: flex; }
    .conv-modal-backdrop {
      position: absolute; inset: 0;
      background: rgba(0, 0, 0, 0.42);
    }
    .conv-modal-panel {
      position: relative; z-index: 1;
      width: 100%; max-width: 720px;
      max-height: min(92vh, 880px);
      background: var(--color-snow);
      border-radius: var(--radius-cards);
      border: 1px solid rgba(0, 0, 0, 0.1);
      display: flex; flex-direction: column;
      overflow: hidden;
    }
    .conv-modal-topbar {
      display: flex; align-items: center; justify-content: flex-end;
      padding: 8px 10px; flex-shrink: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      background: var(--color-snow);
    }
    .conv-modal-close {
      border: 1px solid rgba(0, 0, 0, 0.12);
      background: rgba(255, 255, 255, 0.95);
      border-radius: var(--radius-pillbuttons);
      width: 38px; height: 38px;
      cursor: pointer; font-size: 22px; line-height: 1;
      color: var(--color-ink-black);
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0;
    }
    .conv-detail-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; min-width: 0; }
    .conv-detail-head {
      padding: 6px 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 6px;
      flex-shrink: 0;
      flex-wrap: wrap;
      background: rgba(255, 255, 255, 0.72);
    }
    .conv-detail-head .btn-pill {
      padding: 4px 10px;
      font-size: 12px;
      min-height: 0;
    }
    .conv-detail-head .badge {
      font-size: 11px;
      padding: 2px 8px;
    }
    .conv-detail-head .conv-detail-title-row h3 {
      margin: 0;
      font-size: 15px;
      font-weight: 500;
      color: var(--color-ink-black);
    }
    .msg-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 10px 12px 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .bubble-row { display: flex; width: 100%; }
    .bubble-row.from-v { justify-content: flex-end; }
    .bubble-row.from-ai, .bubble-row.from-agent, .bubble-row.from-sys { justify-content: flex-start; }
    .bubble {
      max-width: 88%;
      padding: 6px 10px 7px;
      border-radius: 12px;
      font-size: 13px;
      line-height: 1.45;
      word-break: break-word;
      position: relative;
      box-sizing: border-box;
      border: 1px solid rgba(15, 23, 42, 0.08);
    }
    /* 訪客：右側、偏藍底 */
    .bubble.from-v {
      background: rgba(239, 246, 255, 0.95);
      color: var(--color-ink-black);
      border-color: rgba(59, 130, 246, 0.22);
      border-right: 3px solid rgba(59, 130, 246, 0.55);
      border-bottom-right-radius: 4px;
    }
    /* AI／客服／系統：統一白底 + 左側色條區分角色 */
    .bubble.from-ai,
    .bubble.from-agent,
    .bubble.from-sys {
      background: #fafbfc;
      color: var(--color-ink-black);
      border-bottom-left-radius: 4px;
      border-left-width: 3px;
      border-left-style: solid;
    }
    .bubble.from-ai { border-left-color: #64748b; }
    .bubble.from-agent { border-left-color: #2563eb; }
    .bubble.from-sys {
      border-left-color: #94a3b8;
      background: #f4f6f8;
      color: var(--color-graphite);
      font-size: 12px;
    }
    .bubble-meta {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 10px;
      margin-bottom: 3px;
    }
    .bubble .who {
      font-size: 10px;
      margin: 0;
      letter-spacing: 0.02em;
      color: var(--color-slate);
      font-weight: 600;
    }
    .bubble-meta .ts {
      font-size: 10px;
      color: var(--color-steel);
      font-weight: 400;
      flex-shrink: 0;
      opacity: 0.88;
    }
    .bubble-body {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .bubble-text {
      white-space: pre-wrap;
      word-break: break-word;
    }
    .bubble-att-img {
      max-width: 100%;
      max-height: 220px;
      border-radius: 8px;
      display: block;
      object-fit: contain;
    }
    .bubble-att-file {
      font-size: 13px;
    }
    .bubble.from-sys .bubble-body {
      font-size: 12px;
    }

    .composer {
      padding: 10px 14px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      display: flex;
      gap: 8px;
      flex-shrink: 0;
      background: rgba(255, 255, 255, 0.9);
    }
    .composer input { flex: 1; }

    .empty-state {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      padding: 32px 28px; text-align: center; min-height: 260px;
    }
    .empty-state-visual {
      width: 52px; height: 52px; border-radius: var(--radius-images);
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid rgba(0, 0, 0, 0.06);
      box-shadow: var(--shadow-sm);
      display: flex; align-items: center; justify-content: center;
      margin-bottom: 18px; color: var(--color-steel);
    }
    .empty-state-visual svg { width: 24px; height: 24px; stroke: currentColor; fill: none; }
    .empty-state-title {
      margin: 0 0 8px; font-size: 15px; font-weight: 500; color: var(--color-ink-black);
      letter-spacing: -0.02em;
    }
    .empty-state-text {
      margin: 0; font-size: 13px; line-height: 1.55; color: var(--color-graphite); max-width: 320px; font-weight: 400;
    }
    .conv-list-empty {
      padding: 36px 22px; text-align: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .conv-list-empty-visual {
      width: 40px; height: 40px; margin: 0 auto 14px; border-radius: var(--radius-images);
      background: rgba(255, 255, 255, 0.65);
      border: 1px solid rgba(0, 0, 0, 0.06);
      display: flex; align-items: center; justify-content: center;
      color: var(--color-steel);
      box-shadow: var(--shadow-sm);
    }
    .conv-list-empty-visual svg { width: 20px; height: 20px; stroke: currentColor; fill: none; }
    .conv-list-empty-title { margin: 0 0 6px; font-size: 13px; font-weight: 500; color: var(--color-ink-black); }
    .conv-list-empty-desc { margin: 0; font-size: 12px; line-height: 1.5; color: var(--color-graphite); font-weight: 400; }

    /* Cards generic */
    .panel-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; flex: 1; min-height: 0; overflow-y: auto; }
    @media (max-width: 1100px) { .panel-grid { grid-template-columns: 1fr; } }
    /* 知識庫 · 問答管理：雙欄填滿剩餘高度，捲動只在編輯區／列表內 */
    #view-kb-web .panel-grid.panel-grid--kb,
    #view-kb-qa .panel-grid.panel-grid--kb {
      overflow: hidden;
      flex: 1;
      min-height: 0;
      align-items: stretch;
      grid-template-columns: minmax(0, 1.25fr) minmax(300px, 440px);
      gap: 28px;
    }
    #view-kb-web .panel-grid--kb > div,
    #view-kb-qa .panel-grid--kb > div {
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    #view-kb-web .kb-editor-card {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    /* 左欄同時含「問答編輯」與「批量匯入」：視窗較矮時勿用 flex 把編輯區壓成高度 0，改為整欄可捲動並保留編輯區最小高度 */
    #view-kb-qa .panel-grid--kb > div:first-child {
      gap: 20px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    #view-kb-qa .faq-editor-panel {
      flex: 1 1 auto;
      min-height: min(420px, 58vh);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #view-kb-qa .faq-bulk-card {
      flex-shrink: 0;
    }
    #view-kb-web .kb-editor-card > h4,
    #view-kb-web .kb-editor-card > .kb-editor-hint {
      flex-shrink: 0;
    }
    #view-kb-qa .faq-editor-panel > h4,
    #view-kb-qa .faq-editor-panel > .kb-editor-hint {
      flex-shrink: 0;
    }
    #view-kb-web .kb-editor-wrap {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      gap: 14px;
    }
    #view-kb-qa .faq-editor-wrap {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      gap: 14px;
    }
    #view-kb-web .kb-editor-wrap > .field:first-of-type {
      flex-shrink: 0;
    }
    #view-kb-qa .faq-editor-wrap > .field:first-of-type,
    #view-kb-qa .faq-editor-q-field {
      flex: 0 0 auto;
      width: 100%;
      min-width: 0;
      margin-bottom: 0;
    }
    #view-kb-qa .faq-editor-q-field .input {
      min-height: 44px;
      box-sizing: border-box;
      flex: none;
    }
    #view-kb-web .kb-editor-body-field {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    #view-kb-qa .faq-editor-body-field {
      flex: 1 1 0;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 0;
    }
    #view-kb-web .kb-editor-body-field label {
      flex-shrink: 0;
    }
    #view-kb-qa .faq-editor-body-field label {
      flex-shrink: 0;
    }
    #view-kb-web textarea.kb-editor-body-input {
      flex: 1 1 auto;
      min-height: 200px;
      max-height: none;
      resize: vertical;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    #view-kb-qa textarea.faq-editor-body-input {
      flex: 1 1 0;
      min-height: 0;
      max-height: none;
      resize: vertical;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
      word-break: break-word;
    }
    /* 在 flex 壓縮時仍保留可讀編輯高度（與 .area-lg 的 min-height 疊加） */
    #view-kb-qa .faq-editor-body-field textarea.faq-editor-body-input {
      min-height: max(200px, 22vh);
    }
    #view-kb-web .kb-editor-actions {
      flex-shrink: 0;
    }
    #view-kb-qa .faq-editor-actions {
      flex-shrink: 0;
    }
    #view-kb-web .panel-grid--kb > div:last-child .card-panel {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #view-kb-qa .panel-grid--kb > div:last-child .card-panel {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    #view-kb-web .panel-grid--kb > div:last-child .card-panel > h4 {
      flex-shrink: 0;
    }
    #view-kb-qa .panel-grid--kb > div:last-child .card-panel > h4 {
      flex-shrink: 0;
    }
    #view-kb-web .kb-source-list {
      overflow-y: auto;
      flex: 1;
      min-height: 120px;
      -webkit-overflow-scrolling: touch;
    }
    #view-kb-qa .faq-source-list {
      overflow-y: auto;
      flex: 1;
      min-height: 120px;
      -webkit-overflow-scrolling: touch;
    }
    .faq-list-meta {
      font-size: 13px;
      color: var(--color-graphite);
      margin: 0 0 12px;
      line-height: 1.45;
      flex-shrink: 0;
    }
    @media (max-width: 1100px) {
      #view-kb-web .panel-grid.panel-grid--kb,
      #view-kb-qa .panel-grid.panel-grid--kb {
        grid-template-columns: 1fr;
      }
      /* 窄螢幕：先選列表再編輯 */
      #view-kb-web .panel-grid.panel-grid--kb > div:first-child {
        order: 2;
      }
      #view-kb-web .panel-grid.panel-grid--kb > div:last-child {
        order: 1;
      }
      #view-kb-qa .panel-grid.panel-grid--kb > div:first-child {
        order: 2;
      }
      #view-kb-qa .panel-grid.panel-grid--kb > div:last-child {
        order: 1;
      }
    }

    .kb-editor-hint {
      font-size: 13px;
      color: var(--color-ash-gray);
      margin: 0 0 12px;
      line-height: 1.45;
    }
    .kb-source-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      font-size: 13px;
    }
    .kb-source-empty {
      color: var(--color-silver-mist);
      font-size: 13px;
    }
    .kb-source-row {
      display: flex;
      align-items: stretch;
      gap: 8px;
      min-width: 0;
    }
    .kb-source-item {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      gap: 10px;
      margin: 0;
      text-align: left;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      background: rgba(255, 255, 255, 0.92);
      cursor: pointer;
      font: inherit;
      color: inherit;
      transition: background 0.15s ease, border-color 0.15s ease;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .kb-source-item:hover {
      background: rgba(0, 0, 0, 0.03);
    }
    .kb-source-item.selected {
      border-color: var(--color-ink-black);
      background: rgba(0, 0, 0, 0.04);
    }
    .kb-source-id {
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 500;
      color: var(--color-steel);
    }
    .kb-source-tag {
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 500;
      padding: 2px 6px;
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.05);
      color: var(--color-graphite);
    }
    .kb-source-title {
      flex: 1;
      min-width: 0;
      font-size: 13px;
      font-weight: 500;
      color: var(--color-ink-black);
      line-height: 1.45;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .kb-source-chunks {
      flex-shrink: 0;
      font-size: 11px;
      color: var(--color-slate);
      white-space: nowrap;
      align-self: center;
      padding-top: 2px;
    }
    .kb-source-del {
      flex-shrink: 0;
      align-self: center;
      padding: 5px 9px;
      font-size: 11px;
      font-weight: 500;
      border-radius: 6px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      background: rgba(255, 255, 255, 0.95);
      color: var(--color-graphite);
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .kb-source-del:hover {
      background: rgba(220, 38, 38, 0.08);
      color: #b91c1c;
      border-color: rgba(220, 38, 38, 0.28);
    }
    .kb-modal-choice-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .kb-modal-panel {
      max-width: min(520px, 94vw);
    }

    .card-panel {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border-radius: var(--radius-cards);
      padding: var(--spacing-32, 32px);
      box-shadow: var(--shadow-sm);
      margin-top: 32px;
    }
    .card-panel h4 {
      margin: 0 0 16px;
      font-size: 18px;
      line-height: 1.33;
      font-family: var(--font-display);
      font-weight: 500;
      color: var(--color-ink-black);
    }

    /* 系統設定 · 資料隱私與保留：兩段職責分區，以分隔線區隔（避免巢狀框感） */
    .privacy-panel__lead {
      margin: 0 0 18px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--color-ash-gray);
    }
    .privacy-panel__block {
      margin: 0;
    }
    .privacy-panel__block-title {
      margin: 0 0 8px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1.35;
      font-family: var(--font-body);
      color: var(--color-ink-black);
    }
    .privacy-panel__block-desc {
      margin: 0 0 12px;
      font-size: 13px;
      line-height: 1.45;
      color: var(--color-graphite);
    }
    .privacy-panel .pill-actions {
      margin-top: 12px;
    }
    .privacy-panel__divider {
      height: 0;
      margin: 22px 0;
      border: 0;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    .privacy-panel__feedback {
      margin: 12px 0 0;
      font-size: 13px;
      line-height: 1.5;
      color: var(--color-graphite);
    }
    .privacy-panel__feedback[hidden] {
      display: none !important;
    }

    /* 系統設定 · 資料隱私：精簡入口列 + 彈窗內操作 */
    .privacy-panel-compact {
      padding: 14px 16px;
    }
    .privacy-panel-compact-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }
    .privacy-panel-compact-text {
      flex: 1;
      min-width: 0;
    }
    .privacy-panel-compact-title {
      margin: 0 0 4px;
      font-size: 15px;
      font-weight: 600;
      color: var(--color-ink-black);
    }
    .privacy-panel-compact-desc {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--color-ash-gray);
    }
    .privacy-data-modal-panel {
      max-width: min(440px, 100vw - 24px);
      max-height: min(88vh, 620px);
    }
    .privacy-data-modal-body .field.super-admin-only {
      margin-bottom: 12px;
    }
    .privacy-data-modal-section {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    .privacy-data-modal-section:first-of-type {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }
    .privacy-data-modal-section-title {
      margin: 0 0 6px;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-ink-black);
    }

    /* 詢前表單：摘要列 + 彈窗設定必填項目 */
    .prechat-configure-row {
      display: none;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 14px;
      margin: 0 0 6px 22px;
      max-width: 100%;
    }
    .prechat-fields-summary {
      flex: 1;
      min-width: min(100%, 220px);
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--color-graphite);
    }
    .prechat-fields-summary--warn {
      color: var(--color-red-accent);
    }
    .prechat-modal-checks {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 4px;
    }
    .prechat-modal-check {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      font-size: 14px;
      color: var(--color-ink-black);
      user-select: none;
    }
    .prechat-modal-check input {
      width: 18px;
      height: 18px;
      accent-color: var(--color-signal-blue);
    }

    /* Super Admin · 租戶審核：表格留白與橫向捲動（配合左側側欄版面） */
    .tenant-review-card .tenant-review-table-wrap {
      overflow-x: auto;
      margin-top: 4px;
      -webkit-overflow-scrolling: touch;
    }
    .tenant-review-table {
      width: 100%;
      min-width: 720px;
      border-collapse: collapse;
      font-size: 13px;
    }
    .tenant-review-table th,
    .tenant-review-table td {
      padding: 12px 16px;
      text-align: left;
      vertical-align: middle;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }
    .tenant-review-table thead th {
      font-weight: 500;
      color: var(--color-graphite);
      font-size: 12px;
      letter-spacing: 0.02em;
    }
    .tenant-review-feature-cell label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-right: 14px;
      white-space: nowrap;
      cursor: pointer;
      font-size: 13px;
      color: var(--color-ink-black);
    }
    .tenant-review-feature-cell input[type="checkbox"] {
      width: 15px;
      height: 15px;
      accent-color: var(--color-ink-black);
    }

    /* 在線時段：標題列右側「新增時段」 */
    .biz-hours-panel-head {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .biz-hours-panel-head h4 {
      margin: 0;
      flex: 1;
      min-width: 200px;
    }

    .icon-preset-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      max-width: 280px;
      margin-top: 10px;
    }
    /* 後台預覽：僅小型黑色 SVG，無深色圓形背景（右下角前台浮標維持既有樣式） */
    .icon-preset-btn {
      width: 44px;
      height: 44px;
      min-width: 44px;
      padding: 0;
      border-radius: 8px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      background: transparent;
      box-shadow: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: border-color 0.15s ease, background 0.15s ease;
    }
    .icon-preset-btn:hover {
      border-color: rgba(0, 0, 0, 0.22);
      background: rgba(0, 0, 0, 0.03);
    }
    .icon-preset-btn.selected {
      border-color: var(--color-ink-black);
      background: rgba(0, 0, 0, 0.04);
      box-shadow: none;
    }
    .icon-preset-svg-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      pointer-events: none;
    }
    .icon-preset-svg-wrap svg {
      width: 22px;
      height: 22px;
      display: block;
    }
    .icon-preset-svg-wrap img {
      width: 20px;
      height: 20px;
      display: block;
      object-fit: contain;
      filter: brightness(0);
      opacity: 1;
    }
    textarea.area-lg {
      width: 100%; min-height: 140px; padding: 12px 14px; border-radius: var(--radius-inputs);
      border: none;
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
      background: rgba(255, 255, 255, 0.95);
      color: var(--color-ink-black);
      font-family: ui-monospace, monospace; font-size: 12px; resize: vertical;
      font-weight: 400;
    }
    .fmt-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
    .fmt-tab {
      padding: 8px 16px; border-radius: var(--radius-pillbuttons);
      border: none;
      background: transparent;
      color: rgba(0, 0, 0, 0.85);
      cursor: pointer; font-size: 13px; font-weight: 400;
      transition: background-color 0.2s ease;
    }
    .fmt-tab:hover { background: rgba(0, 0, 0, 0.04); }
    .fmt-tab.active {
      background: rgba(0, 0, 0, 0.06);
      color: var(--color-ink-black);
      font-weight: 500;
    }

    .faq-item {
      padding: 16px; border-radius: var(--radius-navitems);
      background: rgba(255, 255, 255, 0.65);
      margin-bottom: 12px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      position: relative;
    }
    .faq-item .q { font-weight: 500; margin-bottom: 8px; color: var(--color-ink-black); }
    .faq-item .a { font-size: 13px; color: var(--color-graphite); font-weight: 400; line-height: 1.5; }
    .faq-item .faq-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; max-width: 52%; }
    .faq-item .faq-actions button { padding: 6px 10px; font-size: 12px; }

    .embed-box {
      font-family: ui-monospace, monospace; font-size: 11px;
      background: var(--color-fog);
      padding: 14px; border-radius: var(--radius-images);
      word-break: break-all; color: var(--color-graphite);
      border: 1px solid rgba(0, 0, 0, 0.08);
      min-height: 3.5rem;
    }

    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    @media (max-width: 700px) { .two-col { grid-template-columns: 1fr; } }

    .color-preview {
      width: 44px; height: 44px; border-radius: var(--radius-images);
      border: 1px solid rgba(0, 0, 0, 0.15); flex-shrink: 0;
    }

    .brand-color-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px 12px;
    }
    .brand-color-native {
      width: 48px;
      height: 40px;
      padding: 0;
      border: 1px solid rgba(0, 0, 0, 0.12);
      border-radius: 10px;
      background: #fff;
      cursor: pointer;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .brand-color-hex {
      flex: 1;
      min-width: 120px;
      max-width: 220px;
    }
    .brand-color-swatches {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .brand-color-swatch {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 2px solid rgba(0, 0, 0, 0.12);
      cursor: pointer;
      padding: 0;
      flex-shrink: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }
    .brand-color-swatch.is-selected {
      outline: 2px solid var(--color-ink-black);
      outline-offset: 2px;
    }

    .pill-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

    .biz-range-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 16px;
      margin-bottom: 10px;
      border-radius: var(--radius-navitems);
      border: 1px solid rgba(0, 0, 0, 0.08);
      background: rgba(255, 255, 255, 0.98);
      transition: border-color 0.15s ease;
    }
    .biz-range-card:hover { border-color: rgba(0, 0, 0, 0.14); }
    .biz-range-card-summary {
      font-size: 14px;
      color: var(--color-ink-black);
      line-height: 1.5;
      flex: 1;
      min-width: 0;
      font-weight: 400;
    }
    .biz-range-card-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      flex-shrink: 0;
      align-items: center;
    }

    .biz-day-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 6px;
    }
    .biz-day-chip {
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid rgba(0, 0, 0, 0.12);
      background: #ffffff;
      cursor: pointer;
      font-size: 13px;
      font-family: inherit;
      font-weight: 400;
      color: var(--color-graphite);
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    .biz-day-chip:hover {
      border-color: rgba(0, 0, 0, 0.22);
    }
    .biz-day-chip--on {
      background: var(--color-ink-black);
      color: #ffffff;
      border-color: var(--color-ink-black);
    }

    .biz-hours-modal-root {
      position: fixed;
      inset: 0;
      z-index: 320;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .biz-hours-modal-root.open { display: flex; }
    .biz-hours-modal-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
    }
    .biz-hours-modal-panel {
      position: relative;
      z-index: 1;
      width: 100%;
      max-width: 440px;
      max-height: min(92vh, 560px);
      background: var(--color-snow);
      border-radius: var(--radius-cards);
      border: 1px solid rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .biz-hours-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 16px 18px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      flex-shrink: 0;
    }
    .biz-hours-modal-head h3 {
      margin: 0;
      font-size: 17px;
      font-weight: 500;
      font-family: var(--font-display);
      color: var(--color-ink-black);
    }
    .biz-hours-modal-body {
      padding: 18px;
      overflow-y: auto;
    }
    .biz-hours-modal-foot {
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      padding: 14px 18px;
      border-top: 1px solid rgba(0, 0, 0, 0.06);
      background: rgba(248, 248, 248, 0.75);
      flex-shrink: 0;
    }
    .biz-modal-hint {
      margin: 10px 0 0;
      font-size: 12px;
      color: var(--color-slate);
      line-height: 1.45;
    }

    /* Mobile / narrow — app-like shell */
    .mobile-nav-header {
      display: none;
      align-items: center;
      gap: 10px;
      flex-shrink: 0;
      padding: 10px 14px;
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
      padding-top: max(10px, env(safe-area-inset-top));
      background: rgba(239, 239, 239, 0.92);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      position: sticky;
      top: 0;
      z-index: 85;
    }
    .mobile-nav-toggle {
      flex-shrink: 0;
      width: 44px;
      height: 44px;
      margin: -6px 0 -6px -8px;
      border: none;
      border-radius: 12px;
      background: transparent;
      color: var(--color-ink-black);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .mobile-nav-toggle:active { background: rgba(0, 0, 0, 0.06); }
    .mobile-nav-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: 17px;
      letter-spacing: -0.02em;
      color: var(--color-ink-black);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .sidebar-backdrop {
      display: none;
      pointer-events: none;
      position: fixed;
      inset: 0;
      z-index: 90;
      background: rgba(0, 0, 0, 0.38);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
    }
    .sidebar-backdrop.visible {
      display: block;
      pointer-events: auto;
    }
    body.mobile-nav-open {
      overflow: hidden;
      touch-action: none;
    }

    @media (max-width: 960px) {
      .mobile-nav-header {
        display: flex;
      }
      .app-shell {
        flex-direction: column;
      }
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: min(300px, 88vw);
        z-index: 100;
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: none;
      }
      .sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 12px 0 48px rgba(0, 0, 0, 0.14);
      }
      .main-panel {
        width: 100%;
        min-height: 0;
        flex: 1;
      }
      .view {
        padding: 16px 14px max(24px, env(safe-area-inset-bottom));
        max-width: none;
      }
      .page-head { margin-bottom: 18px; }
      #view-api > .api-sticky-top,
      #view-settings > .api-sticky-top,
      #view-contact-methods > .api-sticky-top {
        position: static;
        top: auto;
        z-index: auto;
        margin-left: -14px;
        margin-right: -14px;
        margin-top: -16px;
        padding-left: 14px;
        padding-right: 14px;
        padding-top: 24px;
        margin-bottom: 16px;
        padding-bottom: 10px;
      }
      .page-title { font-size: 20px; }
      .page-desc { font-size: 13px; }
      .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }
      .stat-card { padding: 20px; }
      .stat-card .num { font-size: 28px; }
      .card-panel { padding: 20px; margin-bottom: 14px; }
      .panel-grid { grid-template-columns: 1fr; gap: 16px; }
      .two-col { grid-template-columns: 1fr !important; }
      /* 手機版會話中心：隱藏篩選與搜尋列以騰出垂直空間 */
      #view-inbox .inbox-toolbar {
        display: none;
      }
      .conv-modal-root {
        align-items: flex-end;
        padding: 0;
      }
      .conv-modal-panel {
        max-width: none;
        width: 100%;
        max-height: min(100dvh, 100vh);
        border-radius: var(--radius-cards) var(--radius-cards) 0 0;
      }
      .biz-hours-modal-root {
        align-items: flex-end;
        padding: 0;
      }
      .biz-hours-modal-panel {
        max-width: none;
        width: 100%;
        border-radius: var(--radius-cards) var(--radius-cards) 0 0;
        max-height: min(92dvh, 92vh);
      }
      .embed-box { font-size: 11px; word-break: break-all; }
      .tab-pill, .nav-link[data-nav] {
        min-height: 44px;
      }
    }

    strong, b { font-weight: 500; }
    code {
      font-family: ui-monospace, monospace;
      font-size: 0.92em;
      background: rgba(0, 0, 0, 0.04);
      padding: 2px 8px;
      border-radius: 10px;
      font-weight: 400;
    }

    /* 後台：加入主畫面捷徑（四格預覽 + 單一檔案列 + 單一瀏覽器） */
    .admin-shortcut-card-lead {
      font-size: 12px;
      color: var(--color-graphite);
      margin: 0 0 12px;
      line-height: 1.45;
    }
    .admin-shortcut-tg-field {
      max-width: 420px;
      margin-top: 14px;
    }
    .admin-shortcut-tg-hint {
      font-size: 11px;
      color: var(--color-graphite);
      margin: 6px 0 0;
      line-height: 1.4;
    }
    .as-logo-strip-wrap {
      margin-top: 4px;
    }
    .as-shortcut-toolbar-row {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 16px 24px;
      max-width: 640px;
    }
    .as-shortcut-left {
      flex: 1 1 260px;
      min-width: 0;
    }
    .as-shortcut-right {
      flex: 1 1 200px;
      min-width: 180px;
      max-width: 300px;
    }
    .as-shortcut-right .as-global-browser-field {
      margin-top: 0;
      max-width: none;
    }
    .as-logo-strip-caption {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-graphite);
      margin: 0 0 10px;
      line-height: 1.4;
    }
    .as-logo-strip-row {
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
      justify-content: space-between;
      max-width: none;
    }
    .as-logo-slot {
      flex: 1 1 0;
      min-width: 0;
      max-width: 84px;
      padding: 8px 4px 6px;
      margin: 0;
      border-radius: 12px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      background: var(--color-snow);
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      font: inherit;
      color: inherit;
      transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    }
    .as-logo-slot:hover {
      border-color: rgba(0, 0, 0, 0.22);
      background: rgba(0, 0, 0, 0.02);
    }
    .as-logo-slot.is-selected {
      border-color: var(--color-ink-black);
      border-width: 2px;
      background: rgba(0, 0, 0, 0.04);
      padding: 7px 3px 5px;
    }
    .as-logo-slot-num {
      font-size: 10px;
      font-weight: 600;
      color: var(--color-graphite);
      line-height: 1;
    }
    .as-logo-thumb-wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(0, 0, 0, 0.08);
      background: var(--color-fog);
      pointer-events: none;
    }
    .as-logo-slot .as-thumb {
      width: 56px;
      height: 56px;
      object-fit: cover;
      display: block;
    }
    .as-shortcut-file-wrap {
      margin-top: 14px;
      max-width: 420px;
      padding: 10px 12px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 9999px;
      background: var(--color-snow);
    }
    .as-shortcut-shared-file {
      width: 100%;
      padding: 6px 4px;
      font-size: 13px;
      border: none;
      background: transparent;
    }
    .as-shortcut-shared-file:focus {
      outline: none;
    }
    .as-shortcut-global-hint {
      font-size: 11px;
      color: var(--color-graphite);
      min-height: 1.35em;
      margin: 8px 0 0;
      max-width: 420px;
    }
    .as-global-browser-field {
      margin-top: 14px;
      max-width: 420px;
    }
    .as-global-browser-label {
      font-size: 12px;
      font-weight: 600;
      color: var(--color-graphite);
    }
    .as-single-browser-input {
      margin-top: 6px;
    }
    @media (max-width: 720px) {
      .as-shortcut-toolbar-row {
        flex-direction: column;
        max-width: none;
      }
      .as-shortcut-right {
        max-width: none;
        width: 100%;
      }
      .as-logo-strip-row {
        flex-wrap: wrap;
        max-width: none;
      }
      .as-logo-slot {
        flex: 1 1 calc(50% - 6px);
        max-width: none;
      }
    }
    .admin-shortcut-modal-panel {
      max-width: 560px;
    }
    .admin-shortcut-modal-body {
      max-height: min(78vh, 520px);
      overflow: auto;
    }
    .admin-shortcut-modal-lead {
      font-size: 12px;
      color: var(--color-graphite);
      line-height: 1.45;
      margin: 0 0 12px;
    }

    /* 後台手機／窄螢幕：隱藏右下角掛件預覽（外站嵌入不受影響；預覽節點由 widget.js 加上 .inky-widget--admin-preview） */
    @media (max-width: 768px) {
      .inky-widget.inky-widget--admin-preview {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
      }
    }