/* 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-lang-float {
      position: absolute;
      top: max(16px, env(safe-area-inset-top, 0px));
      right: max(16px, env(safe-area-inset-right, 0px));
      z-index: 5;
      display: inline-flex;
      align-items: center;
      gap: 2px;
      padding: 4px 6px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(15, 23, 42, 0.08);
      box-shadow: var(--shadow-sm);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .login-lang-chip {
      border: none;
      background: transparent;
      color: var(--color-slate);
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      padding: 8px 10px;
      border-radius: 999px;
      cursor: pointer;
      font-family: inherit;
    }
    .login-lang-chip.is-active {
      background: var(--color-ink-black);
      color: #fff;
    }
    .login-lang-chip:focus-visible {
      outline: 2px solid var(--color-ink-black);
      outline-offset: 2px;
    }
    .login-lang-sep {
      color: rgba(15, 23, 42, 0.28);
      font-size: 11px;
      font-weight: 600;
      user-select: none;
      padding: 0 1px;
    }
    .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);
    }
    .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;
      box-shadow: none !important;
      filter: none;
      text-shadow: none;
    }
    .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; }
    a.btn-pill {
      text-decoration: none;
      color: inherit;
    }
    a.btn-pill:hover,
    a.btn-pill:focus-visible {
      text-decoration: none;
    }

    /* 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);
    }
    .sidebar-lang-switch {
      display: flex;
      gap: 6px;
      margin: 0 0 10px;
      padding: 0 2px;
    }
    .sidebar-lang-btn {
      flex: 1;
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: rgba(255, 255, 255, 0.7);
      color: var(--color-slate);
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      padding: 8px 10px;
      cursor: pointer;
    }
    .sidebar-lang-btn.is-active {
      background: var(--color-ink-black);
      border-color: var(--color-ink-black);
      color: #fff;
    }
    .sidebar-notify-btn {
      flex-shrink: 0;
      width: 32px;
      height: 32px;
      padding: 0;
      border: none;
      border-radius: 50%;
      cursor: pointer;
      color: var(--color-slate);
      background: rgba(255, 255, 255, 0.85);
      box-shadow: var(--shadow-sm);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: color 0.15s ease, background 0.15s ease;
    }
    .sidebar-notify-btn:hover {
      color: var(--color-ink-black);
      background: #fff;
    }
    .sidebar-notify-btn:focus-visible {
      outline: 2px solid var(--color-ink-black);
      outline-offset: 2px;
    }
    .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: center;
      flex-shrink: 0;
      flex-wrap: wrap;
      gap: 10px;
      padding-top: 2px;
    }
    /* —— 聯絡方式（嵌入渠道）—— */
    .contact-methods-add-row {
      margin-top: 20px;
      padding-top: 16px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-top: 1px dashed rgba(15, 23, 42, 0.1);
    }
    .contact-methods-add-row .btn-pill {
      min-width: 148px;
      justify-content: center;
    }
    .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: 20px;
      padding-bottom: 16px;
      margin-bottom: 24px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      background-color: var(--color-canvas);
      box-shadow: none !important;
    }
    #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;
      box-shadow: none !important;
      filter: none;
    }
    .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 */
    #view-inbox.view.active {
      overflow: hidden;
      padding: 8px 28px 16px;
      max-width: none;
      width: 100%;
    }
    #view-inbox .page-head--inbox {
      margin-bottom: 12px;
      align-items: center;
      gap: 12px 16px;
      flex-wrap: wrap;
      padding: 4px 0;
    }
    @media (min-width: 1200px) {
      #view-inbox .page-head--inbox {
        flex-wrap: nowrap;
      }
    }
    #view-inbox .page-head--inbox .page-title {
      margin: 0;
      padding-top: 8px;
      padding-bottom: 8px;
      flex: 0 0 auto;
      min-width: 0;
      white-space: nowrap;
    }
    #view-inbox .page-head--inbox .page-head-actions {
      flex: 1 1 auto;
      min-width: 0;
      padding-top: 0;
      justify-content: flex-end;
    }
    .inbox-wrap { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 0; }
    .inbox-toolbar {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      align-items: center;
      flex-shrink: 1;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 0;
      max-width: 100%;
    }
    .tabs { display: flex; gap: 4px; flex-wrap: nowrap; flex-shrink: 0; }
    .tab-pill {
      padding: 8px 12px; border-radius: var(--radius-pillbuttons);
      border: none;
      background: transparent;
      color: rgba(0, 0, 0, 0.85);
      cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 400;
      transition: background-color 0.2s ease;
      white-space: nowrap;
    }
    .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 1 140px; min-width: 120px; max-width: 220px; }
    #convChannelFilter {
      flex: 0 0 auto;
      max-width: 96px !important;
      min-width: 72px;
      width: auto;
    }
    #inboxNotifyPrefsOpenBtn,
    #inboxShortcutPrefsOpenBtn,
    #refreshBtn {
      flex-shrink: 0;
      white-space: nowrap;
      padding-left: 12px;
      padding-right: 12px;
    }
    #inboxNotifyPrefsOpenBtn .inbox-notify-btn-label,
    #inboxShortcutPrefsOpenBtn .inbox-notify-btn-label {
      margin-left: 6px;
    }
    @media (max-width: 1100px) {
      #inboxShortcutPrefsOpenBtn .inbox-notify-btn-label,
      #inboxNotifyPrefsOpenBtn .inbox-notify-btn-label {
        display: none;
      }
    }
    @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: 14px;
      font-size: 14px;
      color: var(--color-ink-black);
      cursor: pointer;
      line-height: 1.45;
    }
    .agent-notify-pref-row input {
      margin-top: 4px;
      flex-shrink: 0;
      width: 18px;
      height: 18px;
    }
    .agent-notify-pref-copy {
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .agent-notify-pref-copy strong {
      font-weight: 500;
    }
    .agent-notify-pref-copy small {
      font-size: 12px;
      line-height: 1.45;
      color: var(--color-graphite);
      font-weight: 400;
    }

    .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, 340px) minmax(0, 1fr);
      flex: 1;
      min-height: 0;
      height: 100%;
    }
    .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;
    }
    .detail-lead-meta.detail-channel-pill {
      color: #fff;
    }
    @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;
    }
    /* 列表頂列左側：最後更新時間 */
    .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-meta-row--group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 6px 10px;
      margin-bottom: 8px;
    }
    .conv-card-group-name {
      font-size: 12px;
      font-weight: 600;
      line-height: 1.45;
      color: var(--color-ink-black);
      word-break: break-word;
      min-width: 0;
    }
    .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-channel-pill,
    .detail-channel-pill {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.3;
      padding: 3px 8px;
      border-radius: 999px;
      color: #fff;
      word-break: break-word;
    }
    .conv-channel-pill--whatsapp,
    .detail-channel-pill--whatsapp {
      background: #25D366;
    }
    .conv-channel-pill--group,
    .detail-channel-pill--group {
      background: #0d9488;
    }
    .conv-channel-pill--telegram,
    .detail-channel-pill--telegram {
      background: #229ED9;
    }
    .tg-bot-tutorial-body {
      font-size: 14px;
      line-height: 1.55;
      color: var(--color-graphite);
    }
    .tg-bot-tutorial-steps {
      margin: 0;
      padding-left: 1.25rem;
    }
    .tg-bot-tutorial-steps li + li {
      margin-top: 10px;
    }
    .tg-bot-tutorial-steps code {
      font-size: 12px;
    }
    .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: 10px 16px 6px;
      text-align: center;
      background: transparent;
      border: none;
    }
    .conv-load-older-btn {
      font-size: 12px;
      padding: 4px 10px;
      min-height: 0;
    }
    .wa-group-info-trigger {
      cursor: pointer;
    }
    .conv-detail-id-trigger.wa-group-info-trigger:hover #detailTitle {
      text-decoration: underline;
      text-decoration-style: dotted;
      text-underline-offset: 3px;
    }
    .detail-lead-meta.wa-group-info-trigger.detail-channel-pill:hover {
      filter: brightness(0.95);
    }
    .wa-group-members-modal-panel {
      max-width: 480px;
    }
    .wa-group-members-modal-body {
      padding: 0 16px 8px;
    }
    .wa-group-members-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .wa-group-members-table th,
    .wa-group-members-table td {
      padding: 10px 8px;
      text-align: left;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      vertical-align: top;
    }
    .wa-group-members-table th {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-graphite);
    }
    .wa-group-members-empty {
      margin: 8px 0;
      font-size: 13px;
      line-height: 1.5;
    }
    .msg-scroll-outer {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      background:
        linear-gradient(180deg, rgba(248, 250, 252, 0.65) 0%, rgba(255, 255, 255, 0.4) 48%, rgba(248, 250, 252, 0.8) 100%);
    }
    .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: 12px 14px 12px 12px;
      cursor: pointer;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      border-left: 2px 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: 600;
      letter-spacing: 0.01em;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .badge--active {
      color: #047857;
      background: rgba(16, 185, 129, 0.14);
      border-color: rgba(16, 185, 129, 0.28);
    }
    .badge--archived {
      color: #64748b;
      background: rgba(100, 116, 139, 0.12);
      border-color: rgba(100, 116, 139, 0.22);
    }
    .badge--closed {
      color: #1d4ed8;
      background: rgba(59, 130, 246, 0.12);
      border-color: rgba(59, 130, 246, 0.22);
    }
    .badge--waiting {
      color: #b45309;
      background: rgba(245, 158, 11, 0.14);
      border-color: rgba(245, 158, 11, 0.28);
    }
    .badge--manual {
      color: #6d28d9;
      background: rgba(124, 58, 237, 0.12);
      border-color: rgba(124, 58, 237, 0.22);
    }
    .badge--muted {
      color: var(--color-graphite);
      background: rgba(0, 0, 0, 0.06);
      border-color: rgba(0, 0, 0, 0.06);
    }
    .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 6px;
      }
    }

    .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: 12px 16px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 10px;
      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: 14px 16px 18px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      background: transparent;
    }
    /* 訊息少時貼齊底部（輸入框上方）；訊息多時頂部 spacer 收合，可正常往上捲 */
    .msg-scroll::before {
      content: "";
      flex: 1 1 auto;
      min-height: 0;
      pointer-events: none;
    }
    .msg-scroll > .bubble-row,
    .msg-scroll > .conv-day-sep,
    .msg-scroll > .msg-day-divider {
      flex: 0 0 auto;
    }
    /* 客服台慣例：訪客在左、客服／AI／Bot 在右 */
    .bubble-row { display: flex; width: 100%; }
    .bubble-row.from-v { justify-content: flex-start; }
    .bubble-row.from-ai,
    .bubble-row.from-bot,
    .bubble-row.from-agent { justify-content: flex-end; }
    .bubble-row.from-sys { justify-content: center; }
    .bubble {
      max-width: min(78%, 520px);
      padding: 8px 12px 9px;
      border-radius: 16px;
      font-size: 14px;
      line-height: 1.5;
      word-break: break-word;
      position: relative;
      box-sizing: border-box;
      border: none;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }
    .bubble.from-v {
      background: #ffffff;
      color: var(--color-ink-black);
      border-bottom-left-radius: 5px;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07), 0 0 0 1px rgba(15, 23, 42, 0.04);
    }
    .bubble.from-ai,
    .bubble.from-agent {
      background: #e8f1ff;
      color: var(--color-ink-black);
      border-bottom-right-radius: 5px;
    }
    .bubble.from-ai {
      background: #eef2f7;
    }
    .bubble.from-sys {
      max-width: 92%;
      background: transparent;
      color: var(--color-graphite);
      font-size: 12px;
      box-shadow: none;
      text-align: center;
      padding: 4px 10px;
    }
    .bubble-meta {
      display: flex;
      justify-content: flex-start;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 6px 10px;
      margin-bottom: 4px;
    }
    .bubble.from-agent .bubble-meta,
    .bubble.from-ai .bubble-meta,
    .bubble.from-bot .bubble-meta {
      justify-content: flex-end;
    }
    .bubble .who {
      font-size: 11px;
      margin: 0;
      letter-spacing: 0.01em;
      color: var(--color-slate);
      font-weight: 600;
    }
    .bubble-meta .ts,
    .bubble-meta .delivery-status {
      font-size: 11px;
      color: var(--color-steel);
      font-weight: 400;
      flex-shrink: 0;
      opacity: 0.9;
    }
    .bubble-meta .delivery-status--failed {
      color: #b42318;
      font-weight: 600;
    }
    .delivery-error-hint {
      margin: 0 0 6px;
      padding: 6px 8px;
      border-radius: 8px;
      font-size: 11px;
      line-height: 1.45;
      color: #912018;
      background: #fef3f2;
      border: 1px solid rgba(180, 35, 24, 0.15);
      word-break: break-word;
    }
    .bubble-body {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .bubble-text {
      white-space: pre-wrap;
      word-break: break-word;
    }
    /* WhatsApp 模板訊息：白卡片即主體，避免雙層底色與文字截斷 */
    .bubble.bubble--wa-template-msg {
      max-width: min(88%, 320px);
      padding: 0;
      background: transparent;
      box-shadow: none;
    }
    .bubble.bubble--wa-template-msg .bubble-meta {
      padding: 0 2px 6px;
      margin-bottom: 0;
    }
    .bubble.bubble--wa-template-msg .bubble-body {
      gap: 0;
    }
    .bubble-wa-template {
      display: flex;
      flex-direction: column;
      width: 100%;
      min-width: 0;
      max-width: 300px;
      border-radius: 10px;
      overflow: hidden;
      border: none;
      background: #fff;
      box-shadow:
        0 1px 0.5px rgba(11, 20, 26, 0.13),
        0 0 0 1px rgba(11, 20, 26, 0.06);
    }
    .bubble-wa-template__content {
      padding: 10px 12px 8px;
      min-width: 0;
    }
    .bubble-wa-template__header {
      font-size: 16px;
      font-weight: 600;
      line-height: 1.35;
      padding: 0 0 6px;
      color: #111b21;
      word-break: break-word;
    }
    .bubble-wa-template__body {
      font-size: 14.2px;
      line-height: 1.45;
      white-space: pre-wrap;
      word-break: break-word;
      overflow-wrap: anywhere;
      color: #111b21;
    }
    .bubble-wa-template__footer {
      margin-top: 6px;
      font-size: 13px;
      line-height: 1.4;
      color: rgba(17, 27, 33, 0.55);
      word-break: break-word;
    }
    .bubble-wa-template__buttons {
      display: flex;
      flex-direction: column;
      margin-top: 0;
      border-top: 1px solid rgba(17, 27, 33, 0.08);
      background: #fff;
    }
    .bubble-wa-template__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      min-height: 44px;
      padding: 10px 14px;
      font-size: 14px;
      font-weight: 500;
      line-height: 1.3;
      text-align: center;
      color: #008069;
      text-decoration: none;
      background: #fff;
      border: none;
      border-top: 1px solid rgba(17, 27, 33, 0.08);
      cursor: pointer;
      transition: background 0.15s ease;
      box-sizing: border-box;
      word-break: break-word;
    }
    .bubble-wa-template__buttons > .bubble-wa-template__btn:first-child {
      border-top: none;
    }
    .bubble-wa-template__btn i {
      font-size: 13px;
      opacity: 0.92;
      flex-shrink: 0;
    }
    .bubble-wa-template__btn:hover {
      background: rgba(0, 128, 105, 0.06);
      text-decoration: none;
      color: #006e5a;
    }
    .bubble-wa-template__btn--static {
      color: #54656f;
      cursor: default;
    }
    .bubble-wa-template__btn--static:hover {
      background: #fff;
      color: #54656f;
    }
    .bubble-att-img {
      max-width: 100%;
      max-height: 220px;
      border-radius: 10px;
      display: block;
      object-fit: contain;
    }
    .bubble-att-file {
      font-size: 13px;
    }
    .bubble-wa-attachment {
      display: flex;
      flex-direction: column;
      gap: 6px;
      min-width: 220px;
      padding: 4px 0;
    }
    .bubble-wa-attachment audio {
      width: 100%;
      height: 36px;
      border-radius: 8px;
    }
    .bubble-wa-attachment video {
      max-width: 100%;
      border-radius: 10px;
    }
    .bubble-att-video {
      max-height: 260px;
      border-radius: 10px;
      background: #0f172a;
    }
    .bubble-att-gif {
      max-width: min(280px, 100%);
      max-height: 280px;
      border-radius: 10px;
    }
    .bubble-wa-attachment--error {
      color: var(--color-graphite);
      font-size: 12px;
    }
    .bubble.from-sys .bubble-body {
      font-size: 12px;
      align-items: center;
    }

    .composer {
      padding: 12px 14px 14px;
      border-top: 1px solid rgba(15, 23, 42, 0.08);
      display: flex;
      flex-direction: column;
      gap: 8px;
      flex-shrink: 0;
      background: #fff;
    }
    .composer-policy-hint {
      margin: 0;
      padding: 8px 10px;
      border-radius: 10px;
      font-size: 12px;
      line-height: 1.45;
      color: #9a3412;
      background: #fff7ed;
      border: 1px solid rgba(234, 88, 12, 0.22);
    }
    .composer-attach-preview {
      width: 100%;
    }
    .composer-attach-preview__card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(37, 99, 235, 0.28);
      background: linear-gradient(180deg, rgba(37, 99, 235, 0.08) 0%, #ffffff 100%);
      box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
    }
    .composer-attach-preview__card--loading {
      position: relative;
    }
    .composer-attach-preview__media {
      position: relative;
      flex: 0 0 auto;
      width: 80px;
      height: 80px;
    }
    .composer-attach-preview__thumb {
      display: block;
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 12px;
      border: 1px solid rgba(15, 23, 42, 0.1);
      background: #ffffff;
    }
    .composer-attach-preview__file-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 80px;
      border-radius: 12px;
      border: 1px solid rgba(15, 23, 42, 0.1);
      background: #ffffff;
      color: var(--color-graphite);
      font-size: 28px;
    }
    .composer-attach-preview__loading {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.72);
      color: var(--color-accent, #2563eb);
      font-size: 22px;
    }
    .composer-attach-preview__meta {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .composer-attach-preview__name {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-ink-black);
      line-height: 1.4;
      word-break: break-all;
    }
    .composer-attach-preview__hint {
      font-size: 12px;
      line-height: 1.45;
      color: var(--color-graphite);
    }
    .composer-attach-preview__remove {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      padding: 0;
      border: none;
      border-radius: 9999px;
      background: rgba(15, 23, 42, 0.06);
      color: var(--color-graphite);
      cursor: pointer;
      transition: background 0.15s ease, color 0.15s ease;
    }
    .composer-attach-preview__remove:hover {
      background: rgba(239, 68, 68, 0.12);
      color: #b42318;
    }
    .composer-main {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .composer-input {
      width: 100%;
      min-height: 72px;
      max-height: 180px;
      resize: vertical;
      line-height: 1.5;
      padding: 10px 12px;
      border-radius: 12px;
      box-sizing: border-box;
      field-sizing: content;
    }
    .composer-input:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      background: #f8fafc;
    }
    .composer-toolbar {
      display: flex;
      gap: 8px;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .composer-template-select {
      flex: 1 1 180px;
      min-width: 160px;
      max-width: 100%;
    }
    .composer-actions {
      display: flex;
      gap: 8px;
      margin-left: auto;
      align-items: center;
    }
    #sendAttachBtn.has-attachment {
      border-color: var(--color-accent, #2563eb);
      color: var(--color-accent, #2563eb);
      background: rgba(37, 99, 235, 0.08);
    }
    .wa-template-modal-panel {
      width: min(520px, calc(100vw - 32px));
    }
    .wa-mgmt-tabs {
      margin-bottom: 16px;
      padding: 4px;
      border-radius: 14px;
      background: rgba(0, 0, 0, 0.04);
      width: 100%;
      max-width: 100%;
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      overflow: visible;
      box-sizing: border-box;
    }
    #view-whatsapp .wa-mgmt-tabs .tab-pill {
      flex: 0 0 auto;
      min-height: 34px;
      padding: 7px 14px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.62);
      line-height: 1.2;
    }
    #view-whatsapp .wa-mgmt-tabs .tab-pill:hover {
      background: rgba(255, 255, 255, 0.7);
      color: rgba(0, 0, 0, 0.85);
    }
    #view-whatsapp .wa-mgmt-tabs .tab-pill.active {
      background: #fff;
      color: var(--color-ink-black, #111);
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
      font-weight: 600;
    }
    #view-whatsapp .wa-back-link {
      margin: 0 0 10px;
    }
    #view-whatsapp .wa-back-to-api {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 500;
      color: var(--color-graphite);
      text-decoration: none;
    }
    #view-whatsapp .wa-back-to-api:hover {
      color: var(--color-ink-black);
      text-decoration: underline;
    }
    #view-whatsapp .page-head--split {
      align-items: center;
    }
    #view-whatsapp .page-head-actions {
      padding-top: 0;
      align-self: stretch;
      width: 100%;
      max-width: 640px;
    }
    #view-whatsapp .wa-head-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 0;
      width: 100%;
    }
    #view-whatsapp .wa-connected-account {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 12px 14px;
      width: 100%;
      padding: 14px 52px 14px 16px;
      border-radius: 16px;
      border: 2px solid rgba(37, 211, 102, 0.45);
      background: linear-gradient(135deg, rgba(37, 211, 102, 0.14) 0%, rgba(255, 255, 255, 0.98) 55%);
      box-shadow: 0 2px 10px rgba(37, 211, 102, 0.12);
    }
    #view-whatsapp .wa-connected-account.is-empty {
      border-color: rgba(15, 23, 42, 0.12);
      background: #f8fafc;
      box-shadow: none;
    }
    #view-whatsapp .wa-connected-account__icon {
      flex: 0 0 auto;
      width: 44px;
      height: 44px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #128c7e;
      background: rgba(255, 255, 255, 0.92);
      box-shadow: 0 1px 4px rgba(18, 140, 126, 0.18);
    }
    #view-whatsapp .wa-connected-account__body {
      flex: 1 1 160px;
      min-width: 0;
    }
    #view-whatsapp .wa-connected-account__label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #128c7e;
      margin-bottom: 4px;
    }
    #view-whatsapp .wa-connected-account__name {
      font-size: 18px;
      font-weight: 700;
      line-height: 1.25;
      color: var(--color-ink-black);
      letter-spacing: -0.02em;
      word-break: break-word;
    }
    #view-whatsapp .wa-connected-account__meta {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-top: 6px;
    }
    #view-whatsapp .wa-connected-account__phone {
      font-size: 13px;
      font-weight: 500;
      color: var(--color-graphite);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    }
    #view-whatsapp .wa-connected-account__switch {
      flex: 1 1 100%;
      width: 100%;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding-top: 4px;
      border-top: 1px solid rgba(37, 211, 102, 0.18);
    }
    #view-whatsapp .wa-connected-account__switch[hidden] {
      display: none !important;
    }
    #view-whatsapp .wa-connected-account__switch-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--color-graphite);
    }
    #view-whatsapp .wa-connected-account__refresh {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 34px;
      height: 34px;
      padding: 0;
      border: 1px solid rgba(15, 23, 42, 0.1);
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.95);
      color: var(--color-graphite);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }
    #view-whatsapp .wa-connected-account__refresh:hover {
      background: #ffffff;
      color: #128c7e;
      border-color: rgba(37, 211, 102, 0.35);
    }
    #view-whatsapp .wa-head-toolbar .wa-account-select {
      width: 100%;
      min-width: 0;
      max-width: none;
      margin: 0;
      padding: 10px 36px 10px 12px;
      min-height: 40px;
      border-radius: 12px;
      border: 1px solid rgba(37, 211, 102, 0.35);
      box-shadow: none;
      background: rgba(255, 255, 255, 0.95);
      font-size: 13px;
      font-weight: 600;
      line-height: 1.35;
    }
    #view-whatsapp .wa-head-toolbar .wa-account-select:focus {
      box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
    }
    #view-whatsapp .wa-panel-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-bottom: 14px;
    }
    #view-whatsapp .wa-profile-intro {
      margin: 0 0 16px;
      font-size: 13px;
      line-height: 1.55;
    }
    #view-whatsapp .wa-profile-name-card {
      margin: 0 0 20px;
      padding: 16px;
      border-radius: 14px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      background: #f8fafc;
    }
    #view-whatsapp .wa-profile-name-card h4 {
      margin: 0 0 6px;
      font-size: 15px;
    }
    #view-whatsapp .wa-profile-name-hint {
      margin: 0 0 12px;
      font-size: 12px;
      line-height: 1.5;
    }
    #view-whatsapp .wa-profile-name-status {
      margin-bottom: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    #view-whatsapp .wa-profile-name-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: 13px;
    }
    #view-whatsapp .wa-profile-name-k {
      color: #64748b;
      min-width: 88px;
    }
    #view-whatsapp .wa-profile-layout {
      display: grid;
      grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
      gap: 24px;
      align-items: start;
    }
    @media (max-width: 760px) {
      #view-whatsapp .wa-profile-layout {
        grid-template-columns: 1fr;
      }
    }
    #view-whatsapp .wa-profile-avatar-block {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    #view-whatsapp .wa-profile-avatar-wrap {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      overflow: hidden;
      background: #ecfdf5;
      border: 1px solid rgba(0, 0, 0, 0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      position: relative;
    }
    #view-whatsapp .wa-profile-avatar {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      border: 0;
    }
    #view-whatsapp .wa-profile-avatar[hidden],
    #view-whatsapp .wa-profile-avatar-placeholder[hidden] {
      display: none !important;
    }
    #view-whatsapp .wa-profile-avatar-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      font-size: 42px;
      color: #25d366;
      line-height: 1;
    }
    #view-whatsapp .wa-profile-avatar-placeholder i {
      display: block;
      line-height: 1;
    }
    #view-whatsapp .wa-profile-fields .field {
      margin-bottom: 12px;
    }
    #view-whatsapp .wa-tpl-pending-hint {
      margin: 0 0 12px;
      font-size: 12px;
      line-height: 1.5;
    }
    #view-whatsapp .wa-tpl-note {
      font-size: 12px;
      color: #64748b;
      line-height: 1.45;
    }
    #view-whatsapp .wa-mgmt-panel {
      margin-top: 0;
    }
    #view-whatsapp .wa-webhook-summary {
      padding: 14px 16px;
      margin-bottom: 14px;
      border-radius: 14px;
      background: #f8fafc;
      border: 1px solid rgba(0, 0, 0, 0.06);
      font-size: 13px;
      line-height: 1.55;
      color: var(--color-graphite);
    }
    #view-whatsapp .wa-webhook-summary code {
      font-size: 12px;
      word-break: break-all;
    }
    #view-whatsapp .wa-webhook-summary__row {
      margin: 0;
      line-height: 1.5;
    }
    #view-whatsapp .wa-webhook-summary__row + .wa-webhook-summary__row {
      margin-top: 8px;
    }
    #view-whatsapp .wa-webhook-summary__row strong {
      display: block;
      margin-bottom: 4px;
      font-size: 12px;
      color: var(--color-ink-black);
    }
    #view-whatsapp .wa-tpl-create-form {
      margin-top: 16px;
      padding: 16px;
      border-radius: 16px;
      background: #f8fafc;
      border: 1px solid rgba(0, 0, 0, 0.06);
    }
    .wa-tpl-create-modal-panel {
      width: min(960px, calc(100vw - 24px));
      max-width: 960px;
      height: min(92vh, 820px);
      max-height: min(92vh, 820px);
    }
    .wa-tpl-create-modal-sub {
      margin: 4px 0 0;
      font-size: 12px;
      line-height: 1.45;
      color: var(--color-silver-mist);
      font-weight: 400;
    }
    .wa-tpl-create-modal-body {
      padding: 0;
      overflow: hidden;
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .wa-tpl-create-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
    }
    .wa-tpl-create-editor {
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 18px 20px;
      border-right: 1px solid rgba(15, 23, 42, 0.08);
    }
    .wa-tpl-create-preview {
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
      padding: 18px 16px;
      background: linear-gradient(180deg, #eef2f6 0%, #e7edf3 100%);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .wa-tpl-preview-label {
      margin: 0;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--color-graphite);
    }
    .wa-tpl-preview-phone {
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(15, 23, 42, 0.12);
      background: #ece5dd;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    }
    .wa-tpl-preview-phone__bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 10px 12px;
      background: #075e54;
      color: #fff;
      font-size: 13px;
      font-weight: 600;
    }
    .wa-tpl-preview-phone__dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #25d366;
      flex-shrink: 0;
    }
    .wa-tpl-preview-phone__chat {
      min-height: 220px;
      padding: 16px 12px 20px;
      background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.35) 0, transparent 42%),
        #ece5dd;
    }
    .wa-tpl-preview-bubble-wrap {
      display: flex;
      justify-content: flex-end;
    }
    .wa-tpl-preview-bubble-wrap .bubble-wa-template {
      max-width: 100%;
      width: 100%;
    }
    .wa-tpl-preview-empty {
      width: 100%;
      padding: 28px 12px;
      text-align: center;
      font-size: 12px;
      color: rgba(17, 27, 33, 0.55);
      border: 1px dashed rgba(17, 27, 33, 0.18);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.45);
    }
    .wa-tpl-preview-note {
      margin: 0;
      font-size: 11px;
      line-height: 1.45;
    }
    .wa-tpl-create-modal-foot {
      justify-content: flex-end;
      gap: 10px;
    }
    .wa-tpl-section {
      margin-bottom: 22px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.07);
    }
    .wa-tpl-section:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border-bottom: none;
    }
    .wa-tpl-section__title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 14px;
      font-size: 14px;
      font-weight: 600;
      color: var(--color-ink-black);
    }
    .wa-tpl-section__title i {
      color: #008069;
      font-size: 13px;
    }
    .wa-tpl-section__title-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
    }
    .wa-tpl-section__title-row .wa-tpl-section__title {
      margin-bottom: 0;
    }
    .wa-tpl-section__label {
      display: block;
      margin-bottom: 8px;
      font-size: 13px;
      color: var(--color-silver-mist);
    }
    .wa-tpl-field-hint,
    .wa-tpl-optional,
    .wa-tpl-required {
      font-size: 11px;
      font-weight: 500;
    }
    .wa-tpl-field-hint {
      margin: 6px 0 0;
      color: var(--color-silver-mist);
    }
    .wa-tpl-optional {
      color: var(--color-silver-mist);
    }
    .wa-tpl-required {
      color: #b42318;
    }
    .wa-tpl-char-count {
      margin: 6px 0 0;
      font-size: 11px;
      color: var(--color-silver-mist);
      text-align: right;
    }
    .wa-tpl-char-count--warn {
      color: #b45309;
      font-weight: 600;
    }
    .wa-tpl-category-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .wa-tpl-category-card {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      padding: 12px;
      border-radius: 14px;
      border: 1px solid rgba(15, 23, 42, 0.1);
      background: #fff;
      cursor: pointer;
      text-align: left;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }
    .wa-tpl-category-card:hover {
      border-color: rgba(0, 128, 105, 0.35);
    }
    .wa-tpl-category-card.active {
      border-color: rgba(0, 128, 105, 0.55);
      background: rgba(0, 128, 105, 0.06);
      box-shadow: 0 0 0 2px rgba(0, 128, 105, 0.12);
    }
    .wa-tpl-category-card__icon {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 128, 105, 0.1);
      color: #008069;
      font-size: 13px;
    }
    .wa-tpl-category-card__name {
      font-size: 13px;
      font-weight: 600;
      color: var(--color-ink-black);
    }
    .wa-tpl-category-card__desc {
      font-size: 11px;
      line-height: 1.4;
      color: var(--color-silver-mist);
    }
    .wa-tpl-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--color-graphite);
      cursor: pointer;
      user-select: none;
    }
    .wa-tpl-button-fields {
      margin-top: 4px;
    }
    .wa-tpl-body-input {
      min-height: 132px;
      font-family: inherit;
      line-height: 1.55;
    }
    #view-whatsapp .wa-tpl-create-form h4 {
      margin: 0 0 12px;
      font-size: 15px;
      font-weight: 600;
      color: var(--color-ink-black);
    }
    #view-whatsapp .wa-tpl-create-hint {
      margin: 0 0 12px;
      font-size: 12px;
      line-height: 1.5;
    }
    .wa-tpl-body-field > label {
      margin-bottom: 0;
    }
    .wa-tpl-body-head {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
      justify-content: space-between;
      gap: 10px 16px;
      margin-bottom: 8px;
    }
    .wa-tpl-var-toolbar {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px 10px;
      width: 100%;
    }
    .wa-tpl-var-toolbar__label {
      font-size: 12px;
      color: var(--color-silver-mist);
      margin: 0;
    }
    .wa-tpl-var-pick {
      width: auto;
      min-width: 108px;
      max-width: 140px;
      padding-top: 7px;
      padding-bottom: 7px;
      font-size: 13px;
    }
    .wa-tpl-var-chips {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }
    .wa-tpl-var-chip {
      border: 1px solid rgba(0, 128, 105, 0.28);
      background: rgba(0, 128, 105, 0.08);
      color: #006e5a;
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: background 0.15s ease, border-color 0.15s ease;
      white-space: nowrap;
    }
    .wa-tpl-var-hint {
      margin: 0 0 8px;
    }
    .wa-tpl-var-used {
      margin: 0 0 10px;
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(0, 128, 105, 0.06);
      border: 1px solid rgba(0, 128, 105, 0.14);
    }
    .wa-tpl-var-used__title {
      margin: 0 0 6px;
      font-size: 11px;
      color: var(--color-silver-mist);
    }
    .wa-tpl-var-used__hint {
      margin-left: 6px;
      font-weight: 400;
      color: var(--color-steel);
    }
    .wa-tpl-var-used__item {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      margin: 0 8px 6px 0;
      padding: 4px 8px;
      border-radius: 999px;
      background: #fff;
      font-size: 12px;
      color: var(--color-ink-black);
    }
    .wa-tpl-var-used__item code {
      font-size: 11px;
      color: #006e5a;
      background: transparent;
      padding: 0;
    }
    .wa-tpl-var-remove {
      border: 0;
      background: transparent;
      color: var(--color-graphite);
      cursor: pointer;
      font-size: 14px;
      line-height: 1;
      padding: 0 2px;
      margin-left: 2px;
    }
    .wa-tpl-var-remove:hover {
      color: var(--color-red-accent);
    }
    .wa-tpl-var-example-field__head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
    }
    .wa-tpl-var-example-field__head label {
      margin: 0;
    }
    .wa-tpl-var-examples__hint {
      margin: 0 0 10px;
    }
    .wa-tpl-var-slot-tag {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 11px;
      color: #006e5a;
      font-weight: 500;
    }
    .wa-tpl-var-chip:hover {
      background: rgba(0, 128, 105, 0.14);
      border-color: rgba(0, 128, 105, 0.45);
    }
    .wa-tpl-var-examples {
      margin-top: 12px;
      padding: 12px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(15, 23, 42, 0.08);
    }
    .wa-tpl-var-examples__title {
      margin: 0 0 10px;
      font-size: 12px;
      color: var(--color-silver-mist);
    }
    .wa-tpl-var-examples__grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 10px;
    }
    .wa-tpl-var-example-field {
      margin-bottom: 0;
    }
    .wa-tpl-var-example-field label {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      color: #006e5a;
    }
    @media (max-width: 860px) {
      .wa-tpl-create-modal-panel {
        height: min(94dvh, 94vh);
        max-height: min(94dvh, 94vh);
      }
      .wa-tpl-create-modal-body {
        overflow-y: auto;
      }
      .wa-tpl-create-layout {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        flex: none;
        min-height: auto;
      }
      .wa-tpl-create-editor {
        border-right: none;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        overflow: visible;
        flex: none;
      }
      .wa-tpl-create-preview {
        overflow: visible;
        flex: none;
      }
      .wa-tpl-category-grid {
        grid-template-columns: 1fr;
      }
    }
    #view-whatsapp .wa-bot-intro {
      margin: 0 0 14px;
      font-size: 13px;
      line-height: 1.55;
    }
    #view-whatsapp .wa-import {
      display: grid;
      gap: 20px;
      max-width: 960px;
    }
    #view-whatsapp .wa-import__lead {
      margin: 0;
      font-size: 13px;
      line-height: 1.55;
      color: var(--color-graphite, #64748b);
    }
    #view-whatsapp .wa-import-steps {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 14px;
    }
    #view-whatsapp .wa-import-step {
      margin: 0;
      padding: 16px 18px;
      border-radius: 14px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: #f8fafc;
    }
    #view-whatsapp .wa-import-step__head {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 12px;
    }
    #view-whatsapp .wa-import-step__head strong {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-ink-black, #0f172a);
    }
    #view-whatsapp .wa-import-step__num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 24px;
      height: 24px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
      color: #fff;
      background: #128c7e;
      flex-shrink: 0;
    }
    #view-whatsapp .wa-import-step__body {
      display: grid;
      gap: 12px;
    }
    #view-whatsapp .wa-import-step__body .field {
      margin: 0;
    }
    #view-whatsapp .wa-import-hint {
      margin: 6px 0 0;
      font-size: 12px;
      line-height: 1.5;
      color: var(--color-graphite, #64748b);
    }
    #view-whatsapp .wa-import-hint--strong {
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(37, 211, 102, 0.1);
      border: 1px solid rgba(18, 140, 126, 0.22);
      color: #0f766e;
    }
    #view-whatsapp .wa-import-hint--note {
      margin: 0;
      padding: 10px 12px;
      border-radius: 10px;
      background: #fff7ed;
      border: 1px solid rgba(234, 88, 12, 0.2);
      color: #9a3412;
      font-size: 12px;
      line-height: 1.5;
    }
    #view-whatsapp .wa-import-map-table-wrap {
      overflow-x: auto;
    }
    #view-whatsapp .wa-import-map-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid rgba(15, 23, 42, 0.08);
    }
    #view-whatsapp .wa-import-map-table th,
    #view-whatsapp .wa-import-map-table td {
      padding: 10px 12px;
      text-align: left;
      vertical-align: top;
      border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }
    #view-whatsapp .wa-import-map-table th {
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.03em;
      color: var(--color-graphite, #64748b);
      background: #f1f5f9;
    }
    #view-whatsapp .wa-import-map-table tr:last-child td {
      border-bottom: 0;
    }
    #view-whatsapp .wa-import-map-table .input {
      width: 100%;
      min-width: 120px;
    }
    #view-whatsapp .wa-import-role-toggle {
      display: inline-flex;
      border: 1px solid rgba(15, 23, 42, 0.12);
      border-radius: 10px;
      overflow: hidden;
      background: #fff;
    }
    #view-whatsapp .wa-import-role-btn {
      border: 0;
      background: transparent;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      color: var(--color-graphite, #64748b);
      line-height: 1.2;
    }
    #view-whatsapp .wa-import-role-btn.is-active[data-role-value="visitor"] {
      background: #ecfdf5;
      color: #047857;
    }
    #view-whatsapp .wa-import-role-btn.is-active[data-role-value="agent"] {
      background: #e8f1ff;
      color: #1d4ed8;
    }
    #view-whatsapp .wa-import-row-hint {
      margin-top: 4px;
      font-size: 11px;
    }
    .bubble .delivery-status--imported {
      opacity: 0.75;
    }
    .bubble.from-v .delivery-status--imported {
      color: var(--color-steel, #94a3b8);
    }
    #view-whatsapp .wa-import-meta-card {
      padding: 12px 14px;
      border-radius: 10px;
      background: #fff;
      border: 1px solid rgba(15, 23, 42, 0.08);
      font-size: 13px;
      line-height: 1.45;
      color: var(--color-ink-black, #0f172a);
    }
    #view-whatsapp .wa-import-meta-card__sub {
      font-size: 12px;
      font-weight: 400;
    }
      display: flex;
      flex-wrap: wrap;
      gap: 8px 12px;
      margin-top: 8px;
      font-size: 12px;
      color: var(--color-graphite, #64748b);
      align-items: center;
    }
    #view-whatsapp .wa-import-sample {
      margin-top: 4px;
    }
    #view-whatsapp .wa-import-sample__title {
      margin: 0 0 6px;
      font-size: 12px;
      color: var(--color-graphite, #64748b);
    }
    #view-whatsapp .wa-import-sample-list {
      margin: 0;
      padding-left: 18px;
      font-size: 12px;
      line-height: 1.45;
      max-height: 180px;
      overflow: auto;
      color: var(--color-ink-black, #0f172a);
    }
    #view-whatsapp .wa-import-preview__meta {
      font-size: 13px;
      line-height: 1.45;
    }
    #view-whatsapp .wa-import-history h4 {
      margin: 0 0 8px;
      font-size: 13px;
      color: var(--color-ink-black, #0f172a);
    }
    #view-whatsapp .wa-import #waImportAccountSelect,
    #view-whatsapp .wa-import #waImportFile {
      width: 100%;
      max-width: 100%;
    }
    #view-whatsapp .wa-bot-active-check {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 12px;
      font-size: 13px;
      color: var(--color-silver-mist);
      cursor: pointer;
    }
    .bubble.from-bot,
    .bubble-row.from-bot .bubble {
      background: #e8f1ff;
      color: var(--color-ink-black);
      border-bottom-right-radius: 5px;
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
    }
    .bubble.from-bot .who {
      color: #2563eb;
    }
    #view-whatsapp .wa-qr-layout {
      display: grid;
      grid-template-columns: minmax(240px, 272px) minmax(0, 1fr);
      gap: 20px;
      align-items: start;
    }
    #view-whatsapp .wa-qr-create {
      display: grid;
      gap: 12px;
      margin-bottom: 0;
      padding: 16px;
      border-radius: 16px;
      background: #f8fafc;
      border: 1px solid rgba(0, 0, 0, 0.06);
      position: sticky;
      top: 12px;
    }
    #view-whatsapp .wa-qr-create .field {
      margin-bottom: 0;
    }
    #view-whatsapp .wa-qr-create .pill-actions {
      margin-top: 0;
    }
    #view-whatsapp .wa-qr-create-btn {
      width: 100%;
      justify-content: center;
    }
    #view-whatsapp .wa-qr-create-hint {
      margin: 0;
      font-size: 12px;
      line-height: 1.5;
    }
    #view-whatsapp .wa-qr-list-wrap {
      min-width: 0;
    }
    #view-whatsapp .wa-qr-intro {
      margin: 0 0 4px;
      line-height: 1.55;
      font-size: 13px;
    }
    .wa-qr-list-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
    }
    .wa-qr-list-title {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-ink-black);
    }
    .wa-qr-list-count {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 28px;
      height: 28px;
      padding: 0 10px;
      border-radius: 9999px;
      font-size: 12px;
      font-weight: 600;
      color: #0f766e;
      background: rgba(20, 184, 166, 0.12);
    }
    .wa-qr-empty {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 280px;
      padding: 36px 24px;
      border-radius: 18px;
      border: 2px dashed rgba(15, 23, 42, 0.12);
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      text-align: center;
    }
    .wa-qr-empty__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      margin-bottom: 14px;
      border-radius: 16px;
      background: rgba(20, 184, 166, 0.1);
      color: #0f766e;
      font-size: 24px;
    }
    .wa-qr-empty__title {
      margin: 0 0 6px;
      font-size: 15px;
      font-weight: 600;
      color: var(--color-ink-black);
    }
    .wa-qr-empty__hint {
      margin: 0;
      max-width: 320px;
      font-size: 13px;
      line-height: 1.55;
    }
    @media (max-width: 640px) {
      #view-whatsapp .page-head--split {
        align-items: flex-start;
      }
      #view-whatsapp .page-head-actions {
        width: 100%;
        max-width: none;
      }
      #view-whatsapp .wa-connected-account {
        padding-right: 48px;
      }
      #view-whatsapp .wa-qr-layout {
        grid-template-columns: 1fr;
      }
      #view-whatsapp .wa-qr-create {
        position: static;
      }
      #view-whatsapp .wa-qr-grid {
        grid-template-columns: 1fr;
      }
      .wa-qr-card {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
      }
      .wa-qr-card__body {
        width: 100%;
        align-items: center;
      }
      .wa-qr-card__actions {
        justify-content: center;
      }
    }
    .wa-mgmt-panel[hidden] {
      display: none !important;
    }
    .wa-analytics-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
      gap: 12px;
    }
    .wa-stat-card {
      padding: 16px;
      border-radius: 14px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      border: 1px solid rgba(0, 0, 0, 0.06);
      box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }
    .wa-stat-card:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
    }
    .wa-stat-label {
      font-size: 12px;
      color: var(--color-ash-gray);
      margin-bottom: 8px;
      line-height: 1.35;
    }
    .wa-stat-value {
      font-size: 24px;
      font-weight: 700;
      color: var(--color-ink-black);
      letter-spacing: -0.02em;
    }
    .wa-qr-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 14px;
    }
    .wa-qr-card {
      display: grid;
      grid-template-columns: 148px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
      padding: 16px;
      border-radius: 18px;
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      border: 1px solid rgba(0, 0, 0, 0.06);
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    }
    .wa-qr-card__media {
      flex: 0 0 auto;
    }
    .wa-qr-card__body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .wa-qr-card__title {
      font-size: 15px;
      font-weight: 600;
      color: var(--color-ink-black);
      line-height: 1.45;
      word-break: break-word;
    }
    .wa-qr-card__link {
      display: block;
      font-size: 12px;
      color: var(--color-accent, #2563eb);
      word-break: break-all;
      text-decoration: none;
      line-height: 1.45;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(37, 99, 235, 0.06);
      border: 1px solid rgba(37, 99, 235, 0.1);
    }
    .wa-qr-card__link:hover {
      text-decoration: underline;
      background: rgba(37, 99, 235, 0.1);
    }
    .wa-qr-card__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: auto;
      padding-top: 4px;
    }
    .wa-qr-img {
      display: block;
      width: 140px;
      height: 140px;
      object-fit: contain;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 12px;
      background: #ffffff;
    }
    .btn-pill--sm {
      padding: 4px 10px;
      font-size: 12px;
    }
    /* —— WhatsApp 表格／帳戶卡片（管理頁 + API 設定）—— */
    .wa-table-wrap {
      overflow-x: auto;
      border-radius: 14px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }
    .wa-data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      line-height: 1.45;
    }
    .wa-data-table thead th {
      padding: 11px 14px;
      text-align: left;
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: var(--color-graphite);
      background: #f8fafc;
      border-bottom: 1px solid rgba(15, 23, 42, 0.08);
      white-space: nowrap;
    }
    .wa-data-table tbody td {
      padding: 12px 14px;
      vertical-align: middle;
      border-bottom: 1px solid rgba(15, 23, 42, 0.06);
      color: var(--color-ink-black);
    }
    .wa-data-table tbody tr:last-child td {
      border-bottom: none;
    }
    .wa-data-table tbody tr:hover td {
      background: rgba(37, 211, 102, 0.04);
    }
    .wa-data-table .wa-cell-mono {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-size: 12px;
      color: var(--color-graphite);
      word-break: break-all;
    }
    .wa-data-table .wa-cell-error {
      display: inline-block;
      max-width: 280px;
      font-size: 12px;
      line-height: 1.4;
      color: #b42318;
      word-break: break-word;
    }
    .wa-data-table .wa-cell-muted {
      color: var(--color-steel);
      font-size: 12px;
    }
    .wa-data-table .wa-cell-time {
      white-space: nowrap;
      font-size: 12px;
      color: var(--color-graphite);
    }
    .wa-data-table .wa-cell-name {
      font-weight: 600;
      font-size: 13px;
    }
    .wa-data-table .wa-cell-phone {
      font-weight: 500;
      white-space: nowrap;
    }
    .wa-data-table .wa-cell-actions {
      text-align: right;
      white-space: nowrap;
    }
    .wa-data-table td.wa-empty-row {
      text-align: center;
      padding: 28px 16px;
      color: var(--color-graphite);
    }
    .wa-pill {
      display: inline-flex;
      align-items: center;
      padding: 3px 9px;
      border-radius: 9999px;
      font-size: 11px;
      font-weight: 600;
      line-height: 1.3;
      white-space: nowrap;
      border: 1px solid transparent;
    }
    .wa-pill--ok {
      color: #166534;
      background: rgba(34, 197, 94, 0.12);
      border-color: rgba(34, 197, 94, 0.2);
    }
    .wa-pill--bad {
      color: #b42318;
      background: rgba(239, 68, 68, 0.1);
      border-color: rgba(239, 68, 68, 0.22);
    }
    .wa-pill--warn {
      color: #b45309;
      background: rgba(245, 158, 11, 0.12);
      border-color: rgba(245, 158, 11, 0.22);
    }
    .wa-pill--info {
      color: #1d4ed8;
      background: rgba(59, 130, 246, 0.1);
      border-color: rgba(59, 130, 246, 0.2);
    }
    .wa-pill--muted {
      color: var(--color-graphite);
      background: rgba(15, 23, 42, 0.06);
      border-color: rgba(15, 23, 42, 0.08);
    }
    .wa-pill--id {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      font-variant-numeric: tabular-nums;
      letter-spacing: -0.02em;
    }
    .wa-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 36px 20px;
      border-radius: 14px;
      border: 1px dashed rgba(15, 23, 42, 0.12);
      background: #f8fafc;
      color: var(--color-graphite);
      font-size: 13px;
      line-height: 1.55;
      text-align: center;
    }
    .wa-empty-state i {
      font-size: 28px;
      color: rgba(37, 211, 102, 0.65);
    }
    .wa-empty-state p {
      margin: 0;
    }
    .wa-account-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 12px;
    }
    .wa-account-card {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 16px;
      border: 1px solid rgba(15, 23, 42, 0.08);
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
    }
    .wa-account-card--linked {
      border-color: rgba(37, 211, 102, 0.45);
      background: linear-gradient(180deg, #f3fff8 0%, #ffffff 55%);
      box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.12), 0 4px 14px rgba(16, 185, 129, 0.08);
    }
    .wa-account-card__meta-note--ok {
      color: #067647;
    }
    .wa-post-link-banner {
      margin: 0 0 14px;
    }
    .wa-post-link-banner__inner {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 14px;
      border: 1px solid rgba(18, 183, 106, 0.28);
      background: linear-gradient(180deg, #ecfdf3 0%, #f6fef9 100%);
    }
    .wa-post-link-banner__icon {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #067647;
      background: rgba(18, 183, 106, 0.16);
      font-size: 14px;
    }
    .wa-post-link-banner__text {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    .wa-post-link-banner__text strong {
      font-size: 14px;
      color: #067647;
    }
    .wa-post-link-banner__text span {
      font-size: 12px;
      color: #344054;
      line-height: 1.45;
    }
    #waConnectStatus.wa-connect-status {
      font-size: 12px;
      margin: 0 0 10px;
      line-height: 1.45;
    }
    #waConnectStatus.wa-connect-status--ok {
      color: #067647 !important;
      font-weight: 600;
    }
    #waConnectStatus.wa-connect-status--err {
      color: #b42318 !important;
    }
    .wa-account-card__main {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      min-width: 0;
      flex: 1 1 220px;
    }
    .wa-account-card__icon {
      flex: 0 0 auto;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: #128c7e;
      background: rgba(37, 211, 102, 0.14);
    }
    .wa-account-card__title {
      font-size: 15px;
      font-weight: 600;
      color: var(--color-ink-black);
      margin-bottom: 6px;
    }
    .wa-account-card__meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
    }
    .wa-account-card__meta-note {
      font-size: 12px;
      color: var(--color-ash-gray);
      margin-top: 6px;
      line-height: 1.45;
      word-break: break-word;
    }
    .wa-account-card__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
      flex: 0 1 auto;
    }
    #view-whatsapp .wa-mgmt-panel .wa-table-wrap {
      margin-top: 4px;
    }
    @media (max-width: 720px) {
      .wa-account-card {
        flex-direction: column;
      }
      .wa-account-card__actions {
        width: 100%;
        justify-content: flex-start;
      }
      .wa-data-table thead {
        display: none;
      }
      .wa-data-table tbody tr {
        display: block;
        padding: 12px 14px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.06);
      }
      .wa-data-table tbody tr:last-child {
        border-bottom: none;
      }
      .wa-data-table tbody td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border: none;
      }
      .wa-data-table tbody td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        color: var(--color-graphite);
        text-transform: uppercase;
        flex-shrink: 0;
      }
      .wa-data-table .wa-cell-actions {
        justify-content: flex-end;
      }
    }
    .wa-template-modal-lead {
      margin: 0 0 14px;
      font-size: 13px;
      line-height: 1.55;
      color: var(--color-graphite);
    }
    .wa-template-modal-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
      max-height: min(360px, 52vh);
      overflow-y: auto;
    }
    .wa-template-item {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 4px;
      width: 100%;
      padding: 12px 14px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 14px;
      background: #fff;
      text-align: left;
      cursor: pointer;
      transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    }
    .wa-template-item:hover {
      border-color: rgba(3, 88, 247, 0.25);
      box-shadow: 0 4px 16px rgba(3, 88, 247, 0.08);
    }
    .wa-template-item.is-selected {
      border-color: rgba(3, 88, 247, 0.55);
      background: rgba(3, 88, 247, 0.05);
      box-shadow: 0 0 0 1px rgba(3, 88, 247, 0.12);
    }
    .wa-template-item__name {
      font-size: 14px;
      font-weight: 500;
      color: var(--color-ink-black);
    }
    .wa-template-item__meta {
      font-size: 12px;
      line-height: 1.45;
      color: var(--color-ash-gray);
    }
    .wa-template-modal-empty {
      padding: 28px 16px;
      text-align: center;
      border: 1px dashed rgba(0, 0, 0, 0.1);
      border-radius: 14px;
      color: var(--color-graphite);
      font-size: 13px;
      line-height: 1.55;
    }
    .wa-template-modal-foot {
      justify-content: flex-end;
      gap: 8px;
    }
    .wa-existing-waba-modal-panel {
      width: min(720px, calc(100vw - 32px));
      max-width: min(720px, calc(100vw - 32px));
    }
    .wa-existing-waba-modal-hint {
      margin: 0 0 14px;
      font-size: 14px;
      line-height: 1.6;
    }
    .wa-existing-waba-modal-foot {
      justify-content: flex-end;
      gap: 8px;
    }
    .wa-manual-import-body .two-col {
      margin-bottom: 12px;
    }
    .wa-manual-import-action {
      display: flex;
      align-items: center;
      margin: 4px 0 12px;
    }
    .wa-manual-import-action .btn-pill {
      min-width: 200px;
    }
    .wa-existing-waba-modal-footnote {
      margin: 4px 0 0;
      font-size: 12px;
      line-height: 1.55;
    }
    .wa-meta-auth-details {
      margin-top: 18px;
      padding-top: 14px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    .wa-meta-auth-details summary {
      cursor: pointer;
      font-size: 13px;
      color: var(--color-graphite);
      user-select: none;
    }
    .agent-notify-unlock-banner {
      position: fixed;
      left: 50%;
      bottom: max(18px, env(safe-area-inset-bottom));
      transform: translateX(-50%);
      z-index: 1200;
      display: flex;
      align-items: center;
      gap: 12px;
      max-width: min(520px, calc(100vw - 24px));
      padding: 12px 14px;
      border-radius: 14px;
      background: rgba(20, 20, 20, 0.92);
      color: #fff;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
      cursor: pointer;
      font-size: 13px;
      line-height: 1.45;
    }
    .agent-notify-unlock-banner__text {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex: 1;
    }
    .tg-inbox-user-modal-panel { width: min(520px, calc(100vw - 32px)); }
    .tg-inbox-user-modal-foot { justify-content: flex-end; gap: 8px; }
    .wa-template-item__preview {
      font-size: 12px;
      line-height: 1.45;
      color: var(--color-graphite);
      margin-top: 2px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    .wa-template-param-wrap {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
    }
    .wa-template-param-title {
      margin: 0 0 10px;
      font-size: 13px;
      font-weight: 500;
      color: var(--color-ink-black);
    }
    .wa-template-param-fields {
      display: grid;
      gap: 10px;
    }
    .wa-template-param-fields .field {
      margin: 0;
    }

    .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);
    }

    /* API 設定：各整合區塊標題 + Logo
       注意：.view.active 為 flex column；若卡片再設 overflow:hidden，
       flex 最小高度會變成 0，輸入框／按鈕會被裁切。 */
    #view-api.view.active {
      display: block;
      overflow-x: hidden;
      overflow-y: auto;
    }
    #view-api .api-integration-card {
      margin-top: 18px;
      padding: 0 !important;
      overflow: visible;
      flex-shrink: 0;
      height: auto;
      min-height: auto;
      border: 1px solid rgba(15, 23, 42, 0.06);
    }
    #view-api > .api-sticky-top {
      margin-bottom: 28px;
      box-shadow: none !important;
    }
    #view-api .api-primary-save-btn {
      min-width: 132px;
      padding: 10px 18px;
      font-size: 14px;
      font-weight: 500;
      box-shadow: none !important;
      filter: none;
    }
    #view-api .api-primary-save-btn i {
      font-size: 13px;
    }
    #view-api .api-card-head-actions .btn-pill--accent {
      min-width: 72px;
    }
    #view-api .api-integration-card:first-of-type,
    #view-api #apiAiDisabledBanner + .api-integration-card {
      margin-top: 28px;
    }
    #view-api .api-integration-card--whatsapp .api-card-body {
      padding-top: 22px;
    }
    #view-api .api-card-head {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px 20px 14px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.06);
      background: linear-gradient(135deg, rgba(248, 250, 252, 0.95), rgba(255, 255, 255, 0.6));
      border-radius: var(--radius-cards) var(--radius-cards) 0 0;
    }
    #view-api .api-integration-card--whatsapp .api-card-head {
      background: linear-gradient(135deg, rgba(37, 211, 102, 0.12), rgba(255, 255, 255, 0.85));
    }
    #view-api .api-integration-card--telegram .api-card-head {
      background: linear-gradient(135deg, rgba(36, 161, 222, 0.12), rgba(255, 255, 255, 0.85));
    }
    #view-api .api-integration-card--telegram-inbox .api-card-head {
      background: linear-gradient(135deg, rgba(14, 165, 233, 0.14), rgba(255, 255, 255, 0.85));
    }
    #view-api .api-integration-card--llm .api-card-head {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(255, 255, 255, 0.85));
    }
    #view-api .api-integration-card--jina .api-card-head {
      background: linear-gradient(135deg, rgba(14, 165, 233, 0.1), rgba(255, 255, 255, 0.85));
    }
    #view-api .api-card-head-text {
      min-width: 0;
      flex: 1;
    }
    #view-api .api-card-head-actions {
      flex-shrink: 0;
      margin-left: auto;
      align-self: flex-start;
    }
    #view-api .api-card-head-text h4 {
      margin: 0 0 4px;
      font-size: 17px;
    }
    #view-api .api-card-head-text p {
      margin: 0;
      font-size: 13px;
      line-height: 1.45;
      color: var(--color-ash-gray);
    }
    #view-api .api-card-body {
      padding: 16px 20px 22px;
      overflow: visible;
    }
    #view-api .api-card-body .input,
    #view-api .api-card-body select.input,
    #view-api .api-card-body textarea.area-lg {
      display: block;
      width: 100%;
      min-height: 44px;
      box-sizing: border-box;
      background-color: #ffffff;
      box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.14);
    }
    #view-api .api-card-body textarea.area-lg {
      min-height: 96px;
    }
    #view-api .api-card-body .two-col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      align-items: start;
    }
    #view-api .api-card-body .field {
      margin-bottom: 16px;
      min-width: 0;
    }
    #view-api .api-card-subhead {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 10px;
    }
    #view-api .api-card-subhead h4 {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      font-family: var(--font-body, inherit);
    }
    #view-api .api-brand-logo {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 22px;
      color: #fff;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12);
    }
    #view-api .api-brand-logo--sm {
      width: 28px;
      height: 28px;
      border-radius: 8px;
      font-size: 13px;
      box-shadow: none;
    }
    #view-api .api-brand-logo--whatsapp {
      background: linear-gradient(145deg, #25d366, #128c7e);
    }
    #view-api .api-brand-logo--telegram {
      background: linear-gradient(145deg, #2aabee, #229ed9);
    }
    #view-api .api-brand-logo--llm {
      background: linear-gradient(145deg, #6366f1, #4f46e5);
    }
    #view-api .api-brand-logo--jina {
      background: linear-gradient(145deg, #0ea5e9, #0284c7);
    }
    #view-api .api-brand-logo--erp {
      background: linear-gradient(145deg, #0f766e, #115e59);
    }
    #view-api .api-integration-card--erp .api-card-head {
      background: linear-gradient(135deg, rgba(15, 118, 110, 0.1), rgba(255, 255, 255, 0.88));
    }
    #view-api .erp-head-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    #view-api .erp-status-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 30px;
      padding: 0 11px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.01em;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    #view-api .erp-status-pill .erp-status-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
    }
    #view-api .erp-status-pill.is-off {
      color: #92400e;
      background: rgba(245, 158, 11, 0.12);
      border-color: rgba(245, 158, 11, 0.22);
    }
    #view-api .erp-status-pill.is-on {
      color: #166534;
      background: rgba(34, 197, 94, 0.12);
      border-color: rgba(34, 197, 94, 0.22);
    }
    #view-api .erp-section {
      margin-bottom: 18px;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(15, 23, 42, 0.06);
    }
    #view-api .erp-section:last-child {
      border-bottom: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    #view-api .erp-section--row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }
    #view-api .erp-section-label {
      margin: 0 0 12px;
      font-size: 12px;
      font-weight: 600;
      color: var(--color-ash-gray);
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    #view-api .erp-field-hint {
      margin: 6px 0 0;
      font-size: 12px;
      line-height: 1.4;
      color: var(--color-ash-gray);
      min-height: 1.2em;
    }
    #view-api .erp-note {
      margin: 0;
      font-size: 12px;
      line-height: 1.5;
      color: var(--color-ash-gray);
    }
    #view-api .erp-toggle {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      cursor: pointer;
      min-width: 0;
      flex: 1;
    }
    #view-api .erp-toggle input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
    }
    #view-api .erp-toggle-ui {
      width: 42px;
      height: 24px;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.14);
      position: relative;
      flex-shrink: 0;
      margin-top: 2px;
      transition: background 0.18s ease;
    }
    #view-api .erp-toggle-ui::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 1px 3px rgba(15, 23, 42, 0.2);
      transition: transform 0.18s ease;
    }
    #view-api .erp-toggle input:checked + .erp-toggle-ui {
      background: #0f766e;
    }
    #view-api .erp-toggle input:checked + .erp-toggle-ui::after {
      transform: translateX(18px);
    }
    #view-api .erp-toggle-copy {
      display: flex;
      flex-direction: column;
      gap: 2px;
      min-width: 0;
    }
    #view-api .erp-toggle-copy strong {
      font-size: 14px;
      font-weight: 600;
      color: var(--color-graphite, #334155);
    }
    #view-api .erp-toggle-copy small {
      font-size: 12px;
      line-height: 1.45;
      color: var(--color-ash-gray);
    }
    #view-api .erp-test-result {
      margin: 0 0 16px;
      padding: 12px 14px;
      border-radius: 10px;
      font-size: 13px;
      line-height: 1.5;
      background: rgba(15, 23, 42, 0.03);
      border: 1px solid rgba(15, 23, 42, 0.08);
      color: var(--color-graphite, #334155);
    }
    #view-api .erp-test-result.is-ok {
      background: rgba(34, 197, 94, 0.08);
      border-color: rgba(34, 197, 94, 0.22);
      color: #166534;
    }
    #view-api .erp-test-result.is-fail {
      background: rgba(239, 68, 68, 0.08);
      border-color: rgba(239, 68, 68, 0.22);
      color: #b91c1c;
    }
    #view-api .erp-meta {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 18px;
      padding: 12px 14px;
      border-radius: 12px;
      background: rgba(15, 23, 42, 0.025);
      border: 1px solid rgba(15, 23, 42, 0.06);
    }
    #view-api .erp-meta-item {
      min-width: 0;
    }
    #view-api .erp-meta-label {
      display: block;
      margin-bottom: 4px;
      font-size: 11px;
      color: var(--color-ash-gray);
    }
    #view-api .erp-meta-value {
      display: block;
      font-size: 13px;
      line-height: 1.4;
      color: var(--color-graphite, #334155);
      word-break: break-word;
    }
    #view-api .erp-commands {
      margin-top: 2px;
    }
    #view-api .erp-command-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    #view-api .erp-command-item {
      display: flex;
      flex-direction: column;
      gap: 6px;
      padding: 12px 14px;
      border-radius: 12px;
      background: #fff;
      border: 1px solid rgba(15, 23, 42, 0.08);
    }
    #view-api .erp-command-item span {
      font-size: 12px;
      color: var(--color-ash-gray);
    }
    #view-api .erp-command-item code {
      font-size: 13px;
      font-weight: 600;
      color: #0f766e;
      background: rgba(15, 118, 110, 0.08);
      border-radius: 8px;
      padding: 6px 8px;
      width: fit-content;
      max-width: 100%;
      overflow-wrap: anywhere;
    }
    @media (max-width: 700px) {
      #view-api .erp-meta,
      #view-api .erp-command-grid {
        grid-template-columns: 1fr;
      }
      #view-api .erp-section--row {
        align-items: stretch;
      }
      #view-api .erp-section--row .btn-pill {
        width: 100%;
        justify-content: center;
      }
    }
    #view-api .api-brand-logo--embed {
      background: linear-gradient(145deg, #64748b, #475569);
    }
    #view-api .api-brand-logo--learn {
      background: linear-gradient(145deg, #f59e0b, #d97706);
    }

    /* 系統設定 · 資料隱私與保留：兩段職責分區，以分隔線區隔（避免巢狀框感） */
    .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;
    }
    /* 連結既有 WABA Modal：必須覆蓋預設 440px 寬度 */
    .biz-hours-modal-panel.wa-existing-waba-modal-panel {
      width: min(720px, calc(100vw - 32px));
      max-width: min(720px, calc(100vw - 32px));
    }
    /* WhatsApp 模板建立 Modal：必須覆蓋預設 440px 寬度 */
    .biz-hours-modal-panel.wa-tpl-create-modal-panel {
      width: min(960px, calc(100vw - 32px));
      max-width: min(960px, calc(100vw - 32px));
      height: min(92vh, 820px);
      max-height: min(92vh, 820px);
    }
    .biz-hours-modal-panel.wa-tpl-create-modal-panel .biz-hours-modal-body.wa-tpl-create-modal-body {
      padding: 0;
      overflow: hidden;
      flex: 1 1 auto;
      min-height: 0;
      display: flex;
      flex-direction: column;
    }
    .biz-hours-modal-panel.wa-tpl-create-modal-panel .wa-tpl-create-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(260px, 320px);
      width: 100%;
      flex: 1 1 auto;
      min-height: 0;
      height: auto;
    }
    .biz-hours-modal-panel.wa-tpl-create-modal-panel .wa-tpl-create-editor {
      min-width: 0;
      min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      padding: 18px 20px;
      border-right: 1px solid rgba(15, 23, 42, 0.08);
    }
    .biz-hours-modal-panel.wa-tpl-create-modal-panel .wa-tpl-create-preview {
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 18px 16px;
      background: linear-gradient(180deg, #eef2f6 0%, #e7edf3 100%);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .biz-hours-modal-panel.wa-tpl-create-modal-panel .wa-tpl-create-modal-foot {
      justify-content: flex-end;
      gap: 10px;
    }
    .biz-hours-modal-panel.wa-tpl-create-modal-panel .wa-tpl-category-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
    }
    .biz-hours-modal-panel.wa-tpl-create-modal-panel .two-col {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }
    .biz-hours-modal-panel.wa-tpl-create-modal-panel .field {
      min-width: 0;
    }
    .biz-hours-modal-panel.wa-tpl-create-modal-panel .input,
    .biz-hours-modal-panel.wa-tpl-create-modal-panel select.input {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }
    .biz-hours-modal-panel.wa-tpl-create-modal-panel .wa-tpl-create-modal-head {
      align-items: flex-start;
    }
    @media (max-width: 860px) {
      .biz-hours-modal-panel.wa-tpl-create-modal-panel {
        height: min(94dvh, 94vh);
        max-height: min(94dvh, 94vh);
      }
      .biz-hours-modal-panel.wa-tpl-create-modal-panel .biz-hours-modal-body.wa-tpl-create-modal-body {
        overflow-y: auto;
      }
      .biz-hours-modal-panel.wa-tpl-create-modal-panel .wa-tpl-create-layout {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
        flex: none;
        min-height: auto;
        height: auto;
      }
      .biz-hours-modal-panel.wa-tpl-create-modal-panel .wa-tpl-create-editor {
        border-right: none;
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
        overflow: visible;
        flex: none;
      }
      .biz-hours-modal-panel.wa-tpl-create-modal-panel .wa-tpl-create-preview {
        overflow: visible;
        flex: none;
      }
      .biz-hours-modal-panel.wa-tpl-create-modal-panel .wa-tpl-category-grid {
        grid-template-columns: 1fr;
      }
    }
    .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 .page-head--inbox .inbox-toolbar,
      #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;
      }
    }