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

    /* ══ CHATPLACE THEME ══ */
    :root {
      --bg: #FFFFFF;
      --surface: #FFFFFF;
      --surface2: #F8F8F8;
      --border: #E8E8E8;
      --border2: #F3F3F3;
      --primary: #000000;
      --primary-dark: #000000;
      --primary-dim: rgba(0, 0, 0, 0.05);
      --primary-brd: rgba(0, 0, 0, 0.15);
      --indigo: #000000;
      --text: #171717;
      --text-sec: #737373;
      --text-dim: #A3A3A3;
      --green: #22c55e;
      --red: #ef4444;
      --yellow: #f59e0b;
      --cyan: #06b6d4;
      --shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
      --radius-pill: 9999px;
      --radius-card: 20px;
      --radius-btn: 12px;
      --radius-input: 12px;
    }

    [data-theme="dark"] {
      --bg: #0a0a0a;
      --surface: #141414;
      --surface2: #0f0f0f;
      --border: #262626;
      --border2: #1a1a1a;
      --primary: #FFFFFF;
      --primary-dim: rgba(255, 255, 255, 0.08);
      --primary-brd: rgba(255, 255, 255, 0.2);
      --indigo: #FFFFFF;
      --text: #f5f5f5;
      --text-sec: #a3a3a3;
      --text-dim: #525252;
      --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    }

    [data-theme="dark"] .btn-primary,
    [data-theme="dark"] .btn-modal-ok,
    [data-theme="dark"] .create-agent-btn {
      color: #000;
    }

    [data-theme="dark"] .btn-primary:hover,
    [data-theme="dark"] .btn-modal-ok:hover {
      background: #e0e0e0;
    }

    [data-theme="dark"] .pb-fill {
      background: linear-gradient(90deg, #fff 40%, #ccc 55%, #fff 70%);
      background-size: 200% 100%;
    }

    [data-theme="dark"] .form-input:focus {
      border-color: #fff;
      box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg);
      color: var(--text);
      height: 100vh;
      display: flex;
      overflow: hidden;
    }

    ::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: var(--border);
      border-radius: 4px;
    }

    /* ══════════════════════════════
       SIDEBAR
    ══════════════════════════════ */
    .sidebar {
      width: 230px;
      min-width: 230px;
      background: var(--surface);
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      transition: width 0.2s ease, min-width 0.2s ease, background 0.25s, border-color 0.25s;
    }

    .sidebar-logo {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 16px;
      border-bottom: 1px solid var(--border);
      position: relative;
    }

    /* ── Sidebar Collapse Toggle ── */
    .sb-collapse-btn {
      margin-left: auto;
      background: none;
      border: none;
      color: var(--text-dim);
      cursor: pointer;
      padding: 4px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s, color 0.15s, transform 0.2s;
      flex-shrink: 0;
    }
    .sb-collapse-btn:hover {
      background: var(--primary-dim);
      color: var(--text);
    }

    /* ── Collapsed sidebar state ── */
    .sidebar.sb-collapsed {
      width: 60px;
      min-width: 60px;
    }
    .sidebar.sb-collapsed .sb-collapse-btn {
      transform: rotate(180deg);
      margin-left: 0;
    }
    .sidebar.sb-collapsed .sidebar-logo {
      justify-content: center;
      padding: 16px 8px;
      gap: 0;
    }
    .sidebar.sb-collapsed .sb-label {
      display: none;
    }
    .sidebar.sb-collapsed .sb-switcher {
      padding: 0;
    }
    .sidebar.sb-collapsed .sb-bot-btn {
      justify-content: center;
      padding: 11px 8px;
      gap: 0;
    }
    .sidebar.sb-collapsed .sb-bot-info,
    .sidebar.sb-collapsed .sb-switcher-chevron {
      display: none;
    }
    .sidebar.sb-collapsed .sidebar-scroll {
      padding: 4px;
    }
    .sidebar.sb-collapsed .nav-item {
      justify-content: center;
      padding: 10px 0;
      gap: 0;
      position: relative;
    }
    .sidebar.sb-collapsed .nav-ico {
      font-size: 16px;
      width: auto;
    }
    .sidebar.sb-collapsed .sb-divider {
      margin: 6px 8px 2px !important;
    }
    /* Collapsed footer */
    .sidebar.sb-collapsed .sidebar-footer {
      padding: 8px 4px;
    }
    .sidebar.sb-collapsed .sb-user-row {
      justify-content: center;
      padding: 9px 4px;
      gap: 0;
    }
    .sidebar.sb-collapsed .sb-user-info,
    .sidebar.sb-collapsed .sb-user-chevron {
      display: none;
    }
    .sidebar.sb-collapsed .ai-requests {
      justify-content: center;
      padding: 8px 4px;
    }
    .sidebar.sb-collapsed .ai-requests > div {
      display: none;
    }
    .sidebar.sb-collapsed .ai-requests > span {
      display: none;
    }
    .sidebar.sb-collapsed .ai-req-bar {
      margin: 4px 4px 0;
    }
    .sidebar.sb-collapsed .ai-req-label,
    .sidebar.sb-collapsed .ai-req-sub {
      display: none;
    }
    /* Collapsed switcher dropdown stays full width */
    .sidebar.sb-collapsed .sb-switcher-dd {
      left: 60px;
      right: auto;
      top: 0;
      width: 220px;
    }
    /* Tooltip on hover in collapsed mode */
    .sidebar.sb-collapsed .nav-item[data-tooltip]:hover::after {
      content: attr(data-tooltip);
      position: absolute;
      left: calc(100% + 8px);
      top: 50%;
      transform: translateY(-50%);
      background: var(--text);
      color: var(--bg);
      padding: 5px 10px;
      border-radius: 6px;
      font-size: 0.72rem;
      font-weight: 500;
      white-space: nowrap;
      z-index: 1100;
      pointer-events: none;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    /* ── Sidebar Bot Switcher ── */
    .sb-switcher {
      position: relative;
      border-bottom: 1px solid var(--border);
    }

    .sb-bot-btn {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 11px 14px;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s;
    }

    .sb-bot-btn:hover {
      background: var(--primary-dim);
    }

    .sb-bot-av {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
      overflow: hidden;
    }

    .sb-bot-av img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 50%;
    }

    .sb-bot-info {
      min-width: 0;
      flex: 1;
    }

    .sb-bot-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
    }

    .sb-bot-status {
      font-size: 11px;
      color: var(--text-sec);
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .sb-bot-status::before {
      content: '';
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: var(--green);
    }

    .sb-bot-status.offline::before {
      background: var(--text-dim);
    }

    .sb-switcher-chevron {
      color: var(--text-dim);
      transition: transform 0.2s;
    }

    .sb-switcher-dd {
      position: absolute;
      top: 100%;
      left: 8px;
      right: 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      z-index: 1000;
      padding: 6px;
      margin-top: 4px;
      display: none;
      max-height: 300px;
      overflow-y: auto;
    }

    .sb-dd-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s;
    }

    .sb-dd-item:hover {
      background: var(--surface2);
    }

    .sb-dd-av {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
      color: #fff;
    }

    .sb-dd-name {
      font-size: 13px;
      font-weight: 500;
      min-width: 0;
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sb-dd-check {
      color: var(--primary);
      opacity: 0;
    }

    .sb-dd-item.active .sb-dd-check {
      opacity: 1;
    }

    /* ── Project Switcher (Dropdown) ── */
    .proj-switcher-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.2s;
      min-width: 140px;
      max-width: 240px;
    }

    .proj-switcher-btn:hover {
      border-color: var(--primary-brd);
      background: var(--surface);
    }

    .proj-sw-icon {
      font-size: 16px;
    }

    .proj-sw-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
      text-align: left;
    }

    .proj-sw-chevron {
      color: var(--text-sec);
      font-size: 10px;
    }

    .proj-dd {
      position: absolute;
      top: 100%;
      left: 0;
      margin-top: 8px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
      min-width: 220px;
      max-width: 300px;
      z-index: 10000;
      padding: 6px;
      display: none;
      animation: ddFadeIn 0.2s ease-out;
    }

    @keyframes ddFadeIn {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .proj-dd-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s;
      font-size: 14px;
      color: var(--text);
      text-align: left;
      width: 100%;
      background: none;
      border: none;
      font-family: inherit;
    }

    .proj-dd-item:hover {
      background: var(--surface2);
    }

    .proj-dd-item.active {
      background: var(--primary-dim);
      color: var(--primary);
    }

    .proj-dd-check {
      margin-left: auto;
      font-size: 12px;
      opacity: 0;
    }

    .proj-dd-item.active .proj-dd-check {
      opacity: 1;
    }

    .proj-dd-divider {
      height: 1px;
      background: var(--border);
      margin: 6px 0;
    }

    .proj-dd-add {
      color: var(--primary);
      font-weight: 600;
    }

    .logo-text {
      font-size: 0.88rem;
      font-weight: 800;
    }

    /* Main top-level nav tabs */

    .sidebar-scroll {
      flex: 1;
      overflow-y: auto;
      padding: 8px;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      border-radius: 8px;
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--text-sec);
      cursor: pointer;
      transition: all 0.15s;
      margin-bottom: 1px;
      border: 1px solid transparent;
    }

    .nav-item:hover {
      background: var(--primary-dim);
      color: var(--text);
    }

    .nav-item.active {
      background: var(--primary-dim);
      color: var(--indigo);
      border-color: var(--primary-brd);
    }

    .nav-item:active {
      animation: jelly 0.35s ease;
    }

    .nav-ico {
      font-size: 13px;
      width: 16px;
      text-align: center;
      flex-shrink: 0;
    }

    /* ══ KB NAV GROUP ══ */

    /* ── Create Agent button ── */
    .create-agent-btn {
      width: calc(100% - 16px);
      margin: 10px 8px 6px;
      padding: 10px 14px;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: var(--radius-pill);
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: all 0.2s;
      user-select: none;
    }

    .create-agent-btn:hover {
      opacity: 0.88;
    }

    .create-agent-btn:active {
      animation: jelly 0.4s ease;
    }

    /* ── Bot nav list ── */
    .bot-nav-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 8px;
      font-size: 0.8rem;
      color: var(--text-sec);
      cursor: pointer;
      transition: all 0.15s;
      margin-bottom: 2px;
      border: 1px solid transparent;
    }

    .bot-nav-item:hover {
      background: var(--primary-dim);
      color: var(--text);
    }

    .bot-nav-item.active {
      background: var(--primary-dim);
      color: var(--indigo);
      border-color: var(--primary-brd);
    }

    .bot-nav-av {
      width: 22px;
      height: 22px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
      overflow: hidden;
    }

    .bot-nav-av img,
    .ov-bot-av img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: inherit;
    }

    /* ── Home screen ── */
    .home-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 60px 40px;
      gap: 16px;
      max-width: 520px;
      margin: 0 auto;
    }

    .home-hero-icon {
      font-size: 64px;
      margin-bottom: 4px;
    }

    .home-hero-title {
      font-size: 1.5rem;
      font-weight: 800;
      color: var(--text);
    }

    .home-hero-sub {
      font-size: 0.88rem;
      color: var(--text-sec);
      line-height: 1.6;
      max-width: 360px;
    }

    .home-steps {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-top: 8px;
      width: 100%;
      text-align: left;
    }

    .home-step {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px;
    }

    .home-step-ico {
      font-size: 22px;
      margin-bottom: 8px;
    }

    .home-step-ttl {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 3px;
    }

    .home-step-sub {
      font-size: 0.7rem;
      color: var(--text-sec);
      line-height: 1.4;
    }

    /* ── Bot overview ── */
    .ov-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px 22px;
      margin-bottom: 14px;
      position: sticky;
      top: 0;
      z-index: 20;
    }

    .ov-bot-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ov-bot-info {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .ov-bot-av {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      font-weight: 800;
      color: #fff;
      flex-shrink: 0;
    }

    .ov-bot-name {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--text);
    }

    .ov-bot-username {
      font-size: 0.78rem;
      color: var(--text-sec);
      margin-top: 2px;
    }

    /* ═══ ONBOARDING GUIDE TIPS ═══ */
    .guide-tip {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(59, 130, 246, 0.06));
      border: 1px solid rgba(99, 102, 241, 0.2);
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 16px;
      display: flex;
      align-items: flex-start;
      gap: 12px;
      animation: guideFadeIn 0.3s ease;
    }

    [data-theme="dark"] .guide-tip {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(59, 130, 246, 0.08));
      border-color: rgba(99, 102, 241, 0.3);
    }

    @keyframes guideFadeIn {
      from {
        opacity: 0;
        transform: translateY(-8px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .guide-tip-icon {
      font-size: 1.3rem;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .guide-tip-body {
      flex: 1;
      min-width: 0;
    }

    .guide-tip-title {
      font-weight: 700;
      font-size: 0.85rem;
      margin-bottom: 4px;
      color: var(--text);
    }

    .guide-tip-text {
      font-size: 0.78rem;
      color: var(--text-sec);
      line-height: 1.5;
    }

    .guide-tip-actions {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      align-items: center;
    }

    .guide-tip-next {
      background: var(--primary);
      color: var(--bg);
      border: none;
      border-radius: 8px;
      padding: 6px 14px;
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    .guide-tip-next:hover {
      opacity: 0.85;
    }

    .guide-tip-close {
      background: none;
      border: none;
      color: var(--text-dim);
      cursor: pointer;
      position: absolute;
      top: 10px;
      right: 10px;
    }

    /* ══ KB DRAWER, STATUS BAR & CONFIRM (scoped to chat overlay) ══ */

    /* Status bar */
    #onboarding-chat-overlay .chatos-statusbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 5px 14px;
      background: #fff;
      border-bottom: 1px solid rgba(15, 23, 42, .07);
      flex-shrink: 0;
    }

    #onboarding-chat-overlay .cs-left {
      display: flex;
      align-items: center;
      gap: 5px;
      flex-wrap: wrap;
    }

    #onboarding-chat-overlay .cs-pill {
      font-size: 11px;
      font-weight: 600;
      color: #475569;
      background: transparent;
      border: none;
      padding: 2px 0;
      white-space: nowrap;
    }

    #onboarding-chat-overlay .cs-pill+.cs-pill::before {
      content: '·';
      margin-right: 5px;
      color: #cbd5e1;
    }

    /* KB backdrop */
    #onboarding-chat-overlay .kb-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(2, 6, 23, .35);
      z-index: 80;
    }

    #onboarding-chat-overlay .kb-backdrop.hidden {
      display: none !important;
    }

    /* KB drawer */
    #onboarding-chat-overlay .kb-drawer {
      position: fixed;
      top: 0;
      right: 0;
      height: 100dvh;
      width: min(420px, 92vw);
      z-index: 90;
      background: #fff;
      border-left: 1px solid rgba(15, 23, 42, .08);
      box-shadow: -20px 0 40px rgba(15, 23, 42, .12);
      display: flex;
      flex-direction: column;
    }

    #onboarding-chat-overlay .kb-drawer.hidden {
      display: none !important;
    }

    #onboarding-chat-overlay .kb-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      border-bottom: 1px solid rgba(15, 23, 42, .08);
    }

    #onboarding-chat-overlay .kb-title {
      font-size: 14.5px;
      font-weight: 750;
      color: #0f172a;
    }

    #onboarding-chat-overlay .kb-close {
      width: 34px;
      height: 34px;
      border-radius: 10px;
      border: 1px solid rgba(15, 23, 42, .10);
      background: #fff;
      cursor: pointer;
    }

    #onboarding-chat-overlay .kb-close:hover {
      background: rgba(15, 23, 42, .04);
    }

    #onboarding-chat-overlay .kb-body {
      padding: 14px;
      overflow: auto;
      flex: 1 1 auto;
    }

    #onboarding-chat-overlay .kb-empty {
      border: 1px dashed rgba(15, 23, 42, .18);
      border-radius: 14px;
      padding: 16px;
      background: rgba(15, 23, 42, .02);
    }

    #onboarding-chat-overlay .kb-empty-title {
      font-weight: 750;
      font-size: 13.5px;
      color: #0f172a;
    }

    #onboarding-chat-overlay .kb-empty-sub {
      margin-top: 5px;
      font-size: 12.5px;
      color: #475569;
      line-height: 1.4;
    }

    #onboarding-chat-overlay .kb-empty-actions {
      margin-top: 12px;
      display: flex;
      gap: 8px;
    }

    #onboarding-chat-overlay .kb-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    #onboarding-chat-overlay .kb-item {
      border: 1px solid rgba(15, 23, 42, .08);
      border-radius: 14px;
      padding: 12px;
      background: #fff;
    }

    #onboarding-chat-overlay .kb-item-title {
      font-weight: 700;
      font-size: 13px;
      color: #0f172a;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    #onboarding-chat-overlay .kb-item-sub {
      margin-top: 4px;
      font-size: 12px;
      color: #64748b;
      display: flex;
      justify-content: space-between;
      gap: 8px;
    }

    #onboarding-chat-overlay .kb-item-actions {
      margin-top: 10px;
      display: flex;
      gap: 8px;
    }

    #onboarding-chat-overlay .kb-btn {
      border-radius: 10px;
      border: 1px solid rgba(15, 23, 42, .12);
      background: #fff;
      padding: 7px 11px;
      cursor: pointer;
      font-weight: 700;
      font-size: 12px;
    }

    #onboarding-chat-overlay .kb-btn:hover {
      background: rgba(15, 23, 42, .04);
    }

    #onboarding-chat-overlay .kb-btn-delete {
      color: #ef4444;
      border-color: rgba(239, 68, 68, .25);
    }

    #onboarding-chat-overlay .kb-btn-delete:hover {
      background: rgba(239, 68, 68, .05);
    }

    #onboarding-chat-overlay .kb-refresh-btn {
      border-radius: 10px;
      border: 1px solid rgba(15, 23, 42, .12);
      background: #fff;
      padding: 8px 12px;
      cursor: pointer;
      font-weight: 700;
      font-size: 12.5px;
    }

    #onboarding-chat-overlay .kb-refresh-btn:hover {
      background: rgba(15, 23, 42, .04);
    }

    /* ══ CHAT OS UX v2 ══ */

    /* 1. Animated typing indicator */
    #chat-os-typing {
      padding: 10px 14px !important;
      display: flex !important;
      align-items: center;
      gap: 4px;
    }

    .cos-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #94a3b8;
      animation: cosDotBounce 1.2s infinite ease-in-out;
      flex-shrink: 0;
    }

    .cos-dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .cos-dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes cosDotBounce {

      0%,
      60%,
      100% {
        transform: translateY(0);
        opacity: 0.55;
      }

      30% {
        transform: translateY(-7px);
        opacity: 1;
      }
    }

    /* 2. Timestamps */
    .cos-time {
      font-size: 11px;
      color: #8d9ea9;
      text-align: right;
      margin-top: 4px;
      line-height: 1;
      user-select: none;
    }

    .msg-user .cos-time {
      color: #5fa377;
    }

    /* 3. Message grouping */
    .msg-grp.msg-bot {
      border-top-left-radius: 2px;
      margin-top: 1px;
    }

    .msg-grp.msg-user {
      border-top-right-radius: 2px;
      margin-top: 1px;
    }

    /* 5. Markdown */
    .cos-code {
      font-family: 'SF Mono', 'Fira Code', monospace;
      background: rgba(15, 23, 42, .08);
      padding: 1px 5px;
      border-radius: 4px;
      font-size: 0.87em;
    }

    .cos-pre {
      background: rgba(15, 23, 42, .07);
      border-radius: 8px;
      padding: 10px 12px;
      margin: 4px 0;
      overflow-x: auto;
      font-family: 'SF Mono', monospace;
      font-size: 0.84em;
    }

    .msg-bot ul,
    .msg-user ul {
      margin: 5px 0 2px 14px;
      padding: 0;
    }

    .msg-bot li,
    .msg-user li {
      margin-bottom: 3px;
    }

    /* 6. Scroll-to-bottom button */
    .cos-scroll-btn {
      position: sticky;
      bottom: 10px;
      right: 0;
      align-self: flex-end;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: #fff;
      border: none;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
      cursor: pointer;
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
      transition: opacity .2s, transform .2s;
      margin-right: 4px;
    }

    .cos-scroll-btn.hidden {
      opacity: 0;
      pointer-events: none;
      transform: scale(0.7);
    }

    /* 7. Empty state */
    .cos-empty {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      text-align: center;
      padding: 40px 20px;
      pointer-events: none;
      user-select: none;
    }

    .cos-empty.hidden {
      display: none;
    }

    .cos-empty-icon {
      font-size: 44px;
      opacity: 0.35;
    }

    .cos-empty-title {
      font-weight: 700;
      font-size: 15px;
      color: #0f172a;
      opacity: 0.5;
    }

    .cos-empty-sub {
      font-size: 12.5px;
      color: #64748b;
      opacity: 0.65;
      line-height: 1.45;
      max-width: 200px;
    }

    /* 8. Copy button */
    .cos-copy-btn {
      position: absolute;
      top: 5px;
      right: 5px;
      opacity: 0;
      transition: opacity .15s;
      background: rgba(15, 23, 42, .07);
      border: none;
      border-radius: 6px;
      padding: 2px 6px;
      cursor: pointer;
      font-size: 12px;
      color: #475569;
      line-height: 1.4;
    }

    .msg-bot:hover .cos-copy-btn {
      opacity: 1;
    }

    /* 9. Reactions */
    .cos-reactions {
      display: flex;
      gap: 4px;
      margin-top: 3px;
      align-self: flex-start;
      margin-bottom: 6px;
    }

    .cos-react {
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .1);
      border-radius: 14px;
      padding: 2px 9px;
      cursor: pointer;
      font-size: 14px;
      transition: all .15s;
      line-height: 1.6;
    }

    .cos-react:hover {
      border-color: rgba(0, 0, 0, .22);
      transform: scale(1.08);
    }

    .cos-react.active {
      background: #effdde;
      border-color: #4caf50;
    }

    /* 4. Textarea auto-grow */
    textarea.chat-ob-input {
      resize: none;
      overflow: hidden;
      max-height: 120px;
      line-height: 1.4;
      padding-top: 8px;
      padding-bottom: 8px;
      display: block;
    }

    /* In-chat confirm modal */
    #onboarding-chat-overlay .chat-confirm {
      position: fixed;
      inset: 0;
      z-index: 120;
      background: rgba(2, 6, 23, .35);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 18px;
    }

    #onboarding-chat-overlay .chat-confirm.hidden {
      display: none !important;
    }

    #onboarding-chat-overlay .cc-card {
      width: min(380px, 92vw);
      background: #fff;
      border-radius: 18px;
      border: 1px solid rgba(15, 23, 42, .08);
      box-shadow: 0 20px 50px rgba(15, 23, 42, .18);
      padding: 18px;
    }

    #onboarding-chat-overlay .cc-title {
      font-weight: 800;
      font-size: 14.5px;
      color: #0f172a;
    }

    #onboarding-chat-overlay .cc-text {
      margin-top: 7px;
      font-size: 13px;
      color: #475569;
      line-height: 1.4;
    }

    #onboarding-chat-overlay .cc-actions {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }

    #onboarding-chat-overlay .cc-btn {
      border-radius: 10px;
      border: 1px solid rgba(15, 23, 42, .12);
      background: #fff;
      padding: 9px 14px;
      cursor: pointer;
      font-weight: 800;
      font-size: 13px;
    }

    #onboarding-chat-overlay .cc-btn--ghost:hover {
      background: rgba(15, 23, 42, .04);
    }

    #onboarding-chat-overlay .cc-btn--danger {
      border-color: rgba(239, 68, 68, .3);
      color: #ef4444;
    }

    #onboarding-chat-overlay .cc-btn--danger:hover {
      background: rgba(239, 68, 68, .06);
    }

    .hidden {
      display: none !important;
    }

    /* ── Skeleton loader ── */
    .cos-skeleton-wrap {
      display: flex;
      flex-direction: column;
      gap: 7px;
      max-width: 68%;
      align-self: flex-start;
      padding: 10px 14px;
      background: #fff;
      border-radius: 0 10px 10px 10px;
    }

    .cos-skeleton-wrap+.cos-skeleton-wrap {
      margin-top: 4px;
      border-top-left-radius: 3px;
    }

    .cos-skeleton-line {
      height: 13px;
      border-radius: 6px;
      background: linear-gradient(90deg, #f0f2f5 25%, #e4e8ec 50%, #f0f2f5 75%);
      background-size: 200% 100%;
      animation: cosSkeletonShimmer 1.6s infinite;
    }

    @keyframes cosSkeletonShimmer {
      0% {
        background-position: 200% 0;
      }

      100% {
        background-position: -200% 0;
      }
    }

    /* ── Connection status ── */
    #cos-conn-status {
      display: none;
      text-align: center;
      font-size: 11.5px;
      color: #707579;
      padding: 5px 12px;
      background: rgba(255, 193, 7, .1);
      border-bottom: 1px solid rgba(255, 193, 7, .25);
    }

    #cos-conn-status.visible {
      display: block;
    }

    /* ── Message send-status ── */
    .cos-send-status {
      display: inline-block;
      font-size: 10px;
      color: #a8b8c0;
      margin-left: 3px;
      vertical-align: middle;
      user-select: none;
    }

    .cos-send-status.failed {
      color: #ef4444;
      cursor: pointer;
      text-decoration: underline dotted;
    }

    /* ── Refresh button ── */
    #refresh-chat-btn {
      font-size: 15px;
    }

    /* ── Welcome config card ── */
    .welcome-config-card {
      background: #fff;
      border: 1px solid rgba(51, 144, 236, .22);
      border-radius: 14px;
      padding: 14px;
      margin: 4px 0;
      font-size: 13px;
    }

    .welcome-config-title {
      font-weight: 700;
      font-size: 14px;
      color: #3390ec;
      margin-bottom: 8px;
    }

    .welcome-preview-label {
      font-size: 11px;
      color: #8d9ea9;
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 5px;
    }

    .welcome-tg-preview {
      background: #effdde;
      border-radius: 0 10px 10px 10px;
      padding: 10px 13px;
      font-size: 13px;
      line-height: 1.55;
      white-space: pre-wrap;
      word-break: break-word;
      max-height: 130px;
      overflow-y: auto;
      margin-bottom: 6px;
    }

    .welcome-kb-preview {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-bottom: 10px;
      min-height: 22px;
    }

    .welcome-kb-btn {
      background: #fff;
      border: 1px solid rgba(51, 144, 236, .35);
      border-radius: 16px;
      padding: 3px 10px;
      font-size: 12px;
      font-weight: 600;
      color: #3390ec;
    }

    .welcome-field-label {
      font-size: 11px;
      color: #8d9ea9;
      margin-bottom: 4px;
    }

    .welcome-edit-area {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px;
      font-size: 13px;
      font-family: inherit;
      resize: vertical;
      min-height: 72px;
    }

    .welcome-edit-area:focus {
      outline: none;
      border-color: #3390ec;
    }

    .welcome-kb-inputs {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 6px 0;
    }

    .welcome-kb-input {
      width: calc(50% - 3px);
      box-sizing: border-box;
      border: 1px solid #e2e8f0;
      border-radius: 6px;
      padding: 5px 8px;
      font-size: 12.5px;
      font-family: inherit;
    }

    .welcome-kb-input:focus {
      outline: none;
      border-color: #3390ec;
    }

    .welcome-actions {
      display: flex;
      gap: 8px;
      margin-top: 10px;
    }

    .welcome-save-btn {
      background: #3390ec;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 8px 18px;
      font-weight: 700;
      cursor: pointer;
      font-size: 13px;
    }

    .welcome-save-btn:hover {
      background: #2778d0;
    }

    .welcome-save-btn:disabled {
      opacity: .6;
      cursor: default;
    }

    .welcome-ai-btn {
      background: none;
      border: 1px solid #e2e8f0;
      border-radius: 8px;
      padding: 8px 14px;
      cursor: pointer;
      font-size: 13px;
    }

    .welcome-ai-btn:hover {
      background: #f8f9fa;
    }

    .welcome-status {
      font-size: 11.5px;
      color: #4caf50;
      margin-top: 6px;
      display: none;
    }

    .welcome-status.visible {
      display: block;
    }

    /* ── Test Mode / Test Report card ── */
    .test-report-card {
      background: #fff;
      border: 1px solid rgba(76, 175, 80, .25);
      border-radius: 14px;
      padding: 14px;
      margin: 6px 0;
    }

    .tr-title {
      font-weight: 700;
      font-size: 14px;
      color: #2e7d32;
      margin-bottom: 10px;
    }

    .tr-stats {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 10px;
    }

    .tr-stat {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 12.5px;
      padding: 4px 0;
      border-bottom: 1px solid #f0f2f5;
    }

    .tr-stat:last-child {
      border-bottom: none;
    }

    .tr-stat-label {
      color: #64748b;
    }

    .tr-stat-val {
      font-weight: 600;
    }

    .tr-ok {
      color: #4caf50;
    }

    .tr-warn {
      color: #f59e0b;
    }

    .tr-section {
      margin-bottom: 10px;
    }

    .tr-label {
      font-size: 11.5px;
      font-weight: 700;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 4px;
    }

    .tr-rec {
      font-size: 12.5px;
      color: #374151;
      line-height: 1.5;
      padding: 2px 0;
    }

    .tr-rec.ok-text {
      color: #4caf50;
    }

    .tr-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 10px;
    }

    .tr-btn {
      border: 1px solid #e2e8f0;
      background: none;
      border-radius: 8px;
      padding: 7px 14px;
      cursor: pointer;
      font-size: 12.5px;
      transition: background .15s;
    }

    .tr-btn:hover {
      background: #f8f9fa;
    }

    .tr-btn-primary {
      background: #3390ec;
      color: #fff;
      border-color: #3390ec;
      font-weight: 700;
    }

    .tr-btn-primary:hover {
      background: #2778d0;
      border-color: #2778d0;
    }

    /* ── Info ⓘ button ── */
    .info-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: rgba(51, 144, 236, .12);
      color: #3390ec;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
      border: 1.5px solid rgba(51, 144, 236, .25);
      flex-shrink: 0;
      transition: background .15s;
      vertical-align: middle;
    }

    .info-btn:hover {
      background: rgba(51, 144, 236, .22);
    }

    /* ── Info popover overlay (bottom sheet) ── */
    .info-popover-overlay {
      position: fixed;
      inset: 0;
      z-index: 8500;
      background: rgba(0, 0, 0, .38);
      display: flex;
      align-items: flex-end;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease;
    }

    .info-popover-overlay.visible {
      opacity: 1;
      pointer-events: auto;
    }

    .info-popover {
      background: #fff;
      border-radius: 18px 18px 0 0;
      padding: 16px 20px 36px;
      width: 100%;
      max-width: 520px;
      max-height: 78vh;
      overflow-y: auto;
      transform: translateY(48px);
      transition: transform .18s ease;
      box-shadow: 0 -8px 40px rgba(0, 0, 0, .14);
    }

    .info-popover-overlay.visible .info-popover {
      transform: translateY(0);
    }

    .ip-handle {
      width: 40px;
      height: 4px;
      border-radius: 2px;
      background: #e2e8f0;
      margin: 0 auto 16px;
    }

    .ip-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .ip-title {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      flex: 1;
      line-height: 1.4;
    }

    .ip-close {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 22px;
      color: #94a3b8;
      line-height: 1;
      padding: 0 4px;
      flex-shrink: 0;
    }

    .ip-close:hover {
      color: #475569;
    }

    .ip-section {
      margin-bottom: 12px;
    }

    .ip-section-label {
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .07em;
      color: #64748b;
      margin-bottom: 6px;
    }

    .ip-section-body {
      font-size: 13.5px;
      color: #374151;
      line-height: 1.65;
    }

    .ip-section-body ol {
      margin: 2px 0 0 18px;
      padding: 0;
    }

    .ip-section-body li {
      margin-bottom: 4px;
    }

    .ip-divider {
      border: none;
      border-top: 1px solid #f1f5f9;
      margin: 12px 0;
    }

    /* ── Page label row (for ⓘ placement) ── */
    .page-label-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 16px;
    }

    .page-label-row .page-label {
      margin: 0;
    }

    /* ── Field caption ── */
    .field-caption {
      font-size: 11.5px;
      color: #94a3b8;
      margin-top: 5px;
      line-height: 1.5;
    }

    /* ── KB Status Card (in chat) ── */
    .kb-status-card {
      background: #fff;
      border: 1px solid rgba(51, 144, 236, .2);
      border-radius: 12px;
      padding: 12px 14px;
      margin: 4px 0;
      font-size: 13px;
    }

    .ksc-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }

    .ksc-icon {
      font-size: 16px;
      flex-shrink: 0;
    }

    .ksc-title {
      font-weight: 700;
      color: #374151;
      flex: 1;
      font-size: 13.5px;
    }

    .ksc-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 9px;
      border-radius: 20px;
      flex-shrink: 0;
    }

    .ksc-badge.pending {
      background: rgba(59, 130, 246, .1);
      color: #3b82f6;
    }

    .ksc-badge.ready {
      background: rgba(34, 197, 94, .12);
      color: #16a34a;
    }

    .ksc-badge.warn {
      background: rgba(245, 158, 11, .1);
      color: #d97706;
    }

    .ksc-badge.error {
      background: rgba(239, 68, 68, .1);
      color: #dc2626;
    }

    .ksc-body {
      font-size: 12.5px;
      color: #64748b;
      margin-bottom: 8px;
      line-height: 1.5;
    }

    .ksc-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    .ksc-btn {
      border: 1px solid rgba(51, 144, 236, .3);
      background: none;
      border-radius: 8px;
      padding: 5px 12px;
      font-size: 12px;
      cursor: pointer;
      color: #3390ec;
      transition: background .15s;
    }

    .ksc-btn:hover {
      background: rgba(51, 144, 236, .06);
    }

    .ksc-btn-ghost {
      border-color: rgba(0, 0, 0, .1);
      color: #374151;
    }

    .guide-tip-close:hover {
      color: var(--text);
    }

    /* ═══ CHAT OS (Default App Interface) ═══ */
    /* ═══ CHAT OS (Standalone Messenger UI) ═══ */
    #onboarding-chat-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #f0f2f5;
      /* Neutral light gray/beige page background */
      z-index: 10000;
      display: flex;
      /* Active by default */
      flex-direction: column;
      align-items: center;
      /* Center horizontally */
      justify-content: center;
      /* Center vertically on desktop */
      padding: 0;
      /* Add padding later via media query if needed for mobile */
    }

    /* Wrap the inner content to restrict width for better readability */
    .chat-ob-wrapper {
      width: 100%;
      max-width: 800px;
      height: 100%;
      background: #ffffff;
      /* Pure white chat body */
      display: flex;
      flex-direction: column;
      position: relative;
    }

    /* Desktop distinct floating window */
    @media (min-width: 768px) {
      .chat-ob-wrapper {
        height: 90vh;
        /* Don't stretch full screen, float inside */
        max-height: 900px;
        min-height: 500px;
        border-radius: 16px;
        /* Rounded corners */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        /* Soft shadow per requirements */
        border: 1px solid rgba(0, 0, 0, 0.05);
        /* Subtle border */
        overflow: hidden;
        /* Keep children inside border radius */
      }
    }

    .chat-ob-header {
      width: 100%;
      padding: 10px 16px;
      background: #fff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 56px;
      flex-shrink: 0;
      z-index: 10;
    }

    .chat-header-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: rgba(15, 23, 42, .55);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      flex-shrink: 0;
      transition: background .12s ease;
    }

    .chat-header-btn:hover {
      background: rgba(15, 23, 42, .06);
    }

    .chat-header-btn:active {
      transform: translateY(1px);
    }

    .chat-ob-messages {
      flex: 1;
      width: 100%;
      overflow-y: auto;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      -webkit-overflow-scrolling: touch;
      background-color: #efeae2;
    }

    .msg-bot,
    .msg-user {
      max-width: 78%;
      padding: 7px 12px 8px;
      font-size: 0.94rem;
      line-height: 1.45;
      animation: msgPop 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.13);
      position: relative;
      word-break: break-word;
    }

    .msg-bot {
      background: #fff;
      color: #000;
      align-self: flex-start;
      border-radius: 0 8px 8px 8px;
      margin-bottom: 2px;
    }

    .msg-user {
      background: #effdde;
      color: #000;
      align-self: flex-end;
      border-radius: 8px 8px 0 8px;
      margin-bottom: 2px;
    }

    @keyframes msgPop {
      0% {
        opacity: 0;
        transform: translateY(10px) scale(0.95);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* ===== Upload Bubble (Telegram-style) ===== */
    .upload-bubble {
      align-self: flex-end;
      width: min(400px, 85%);
      border-radius: 18px;
      border: 1px solid #e5e7eb;
      background:
        radial-gradient(120% 120% at 0% 0%, rgba(88, 166, 255, .18) 0%, rgba(255, 255, 255, .72) 55%, rgba(255, 255, 255, .92) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .92));
      box-shadow: 0 12px 28px rgba(15, 23, 42, .10);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      padding: 12px 12px 10px;
      animation: msgPop 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28) both;
    }

    .ub-row {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }

    .ub-icon {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 12px;
      color: #fff;
      box-shadow: 0 8px 18px rgba(0, 0, 0, .12);
      user-select: none;
      flex: 0 0 auto;
    }

    .ub-icon[data-kind="pdf"] {
      background: linear-gradient(135deg, #ff4d4d, #d11b1b);
    }

    .ub-icon[data-kind="doc"] {
      background: linear-gradient(135deg, #2f80ff, #1f5eff);
    }

    .ub-icon[data-kind="img"] {
      background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    }

    .ub-icon[data-kind="zip"] {
      background: linear-gradient(135deg, #f59e0b, #d97706);
    }

    .ub-icon[data-kind="txt"] {
      background: linear-gradient(135deg, #10b981, #059669);
    }

    .ub-icon[data-kind="csv"] {
      background: linear-gradient(135deg, #10b981, #059669);
    }

    .ub-main {
      flex: 1 1 auto;
      min-width: 0;
    }

    .ub-title {
      font-size: 14px;
      font-weight: 650;
      color: #0f172a;
      line-height: 1.2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
    }

    .ub-sub {
      margin-top: 6px;
      display: flex;
      justify-content: space-between;
      gap: 10px;
      color: #64748b;
      font-size: 12px;
    }

    .ub-status {
      font-weight: 600;
    }

    .ub-meta {
      white-space: nowrap;
    }

    .ub-bar {
      margin-top: 8px;
      width: 100%;
      height: 7px;
      border-radius: 999px;
      background: rgba(15, 23, 42, .08);
      overflow: hidden;
    }

    .ub-bar-fill {
      height: 100%;
      border-radius: 999px;
      background: linear-gradient(90deg, #2f80ff, #58a6ff);
      box-shadow: 0 4px 12px rgba(47, 128, 255, .22);
      transition: width .18s ease;
    }

    .ub-x {
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      border-radius: 8px;
      border: 1px solid rgba(15, 23, 42, .10);
      background: rgba(255, 255, 255, .55);
      color: rgba(15, 23, 42, .55);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      transition: background .12s ease;
    }

    .ub-x:hover {
      background: rgba(255, 255, 255, .9);
    }

    .ub-processing,
    .ub-done,
    .ub-error {
      display: none;
      margin-top: 10px;
      font-size: 12px;
      gap: 8px;
      align-items: center;
    }

    .ub-done {
      color: rgba(16, 185, 129, .95);
      font-weight: 600;
    }

    .ub-error {
      color: rgba(239, 68, 68, .95);
      font-weight: 600;
    }

    .ub-spinner {
      width: 14px;
      height: 14px;
      border-radius: 50%;
      border: 2px solid rgba(47, 128, 255, .25);
      border-top-color: rgba(47, 128, 255, .95);
      display: inline-block;
      animation: ubSpin .8s linear infinite;
    }

    @keyframes ubSpin {
      to {
        transform: rotate(360deg);
      }
    }

    .ub-check,
    .ub-warn {
      width: 18px;
      height: 18px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
    }

    .ub-check {
      background: rgba(16, 185, 129, .15);
      border: 1px solid rgba(16, 185, 129, .35);
    }

    .ub-warn {
      background: rgba(239, 68, 68, .12);
      border: 1px solid rgba(239, 68, 68, .35);
    }

    /* State machine */

    .chat-ob-chips {
      padding: 8px 14px 6px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      background: #efeae2;
    }

    .ob-chip {
      background: #fff;
      border: none;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
      color: #3390ec;
      padding: 7px 14px;
      border-radius: 20px;
      font-size: 0.84rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.15s;
    }

    .ob-chip:hover {
      background: #f0f7ff;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    .ob-chip.active {
      background: #3390ec;
      color: #fff;
      box-shadow: 0 1px 4px rgba(51, 144, 236, .3);
    }

    /* ── KB Add Panel ── */
    .kb-add-panel {
      background: #fff;
      border-top: 1px solid rgba(0, 0, 0, .06);
      padding: 10px 14px 12px;
      animation: kap-in .18s ease;
    }

    .kb-add-panel.hidden {
      display: none;
    }

    @keyframes kap-in {
      from {
        opacity: 0;
        transform: translateY(6px)
      }

      to {
        opacity: 1;
        transform: translateY(0)
      }
    }

    .kap-btns {
      display: flex;
      gap: 8px;
      margin-bottom: 10px;
    }

    .kap-hint-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }

    .kap-hint {
      font-size: 11px;
      color: #94a3b8;
      line-height: 1.5;
    }

    .kap-help-btn {
      background: none;
      border: none;
      font-size: 11px;
      color: #3390ec;
      cursor: pointer;
      padding: 2px 0;
      white-space: nowrap;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .kap-url-input {
      width: 100%;
      border: 1.5px solid #e2e8f0;
      border-radius: 10px;
      padding: 9px 12px;
      font-size: 13px;
      outline: none;
      margin-bottom: 8px;
      transition: border-color .15s;
      box-sizing: border-box;
    }

    .kap-url-input:focus {
      border-color: #3390ec;
    }

    .kap-url-input.kap-error {
      border-color: #ef4444;
    }

    .kap-actions-row {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      margin-bottom: 8px;
    }

    .kap-submit-btn {
      background: #3390ec;
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 8px 16px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s;
    }

    .kap-submit-btn:hover {
      background: #2271c3;
    }

    .kap-submit-btn:disabled {
      background: #a0c4f1;
      cursor: not-allowed;
    }

    .kap-status-bar {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 10px;
      font-size: 12.5px;
      margin-bottom: 8px;
    }

    .kap-status-bar.kap-pending {
      background: rgba(51, 144, 236, .1);
      color: #2563eb;
    }

    .kap-status-bar.kap-error {
      background: rgba(239, 68, 68, .08);
      color: #dc2626;
    }

    .kap-back-link {
      display: inline-block;
      font-size: 11.5px;
      color: #94a3b8;
      cursor: pointer;
      margin-top: 4px;
    }

    .kap-back-link:hover {
      color: #3390ec;
    }

    /* ── 👎 Feedback form ── */
    .cos-feedback-form {
      margin: 4px 0 8px;
      background: #fff;
      border-radius: 10px;
      padding: 10px 12px;
      box-shadow: 0 1px 5px rgba(0, 0, 0, .10);
      max-width: 320px;
    }

    .cos-feedback-label {
      font-size: 12px;
      color: #707579;
      margin-bottom: 6px;
    }

    .cos-feedback-input {
      width: 100%;
      box-sizing: border-box;
      border: 1px solid #dde1e7;
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 0.83rem;
      resize: none;
      font-family: inherit;
      line-height: 1.4;
    }

    .cos-feedback-input:focus {
      outline: none;
      border-color: #3390ec;
    }

    .cos-feedback-btns {
      display: flex;
      gap: 6px;
      margin-top: 7px;
    }

    .cos-fb-send,
    .cos-fb-cancel {
      font-size: 0.8rem;
      padding: 5px 12px;
      border-radius: 8px;
      border: none;
      cursor: pointer;
    }

    .cos-fb-send {
      background: #3390ec;
      color: #fff;
      font-weight: 600;
    }

    .cos-fb-send:hover {
      background: #2778d0;
    }

    .cos-fb-cancel {
      background: #f0f2f5;
      color: #707579;
    }

    /* ── KB Suggestions section ── */
    #onboarding-chat-overlay .kb-sug-divider {
      border: none;
      border-top: 1px solid rgba(15, 23, 42, .07);
      margin: 10px 0;
    }

    #onboarding-chat-overlay .kb-suggestions {
      padding: 0 14px 10px;
    }

    #onboarding-chat-overlay .kb-suggestions-hdr {
      font-size: 11.5px;
      font-weight: 700;
      color: #8d9ea9;
      text-transform: uppercase;
      letter-spacing: .04em;
      margin-bottom: 10px;
    }

    #onboarding-chat-overlay .kb-sug-card {
      background: #fff;
      border: 1px solid rgba(15, 23, 42, .08);
      border-radius: 12px;
      padding: 10px 12px;
      margin-bottom: 8px;
    }

    #onboarding-chat-overlay .kb-sug-meta {
      font-size: 11px;
      color: #8d9ea9;
      margin-bottom: 4px;
    }

    #onboarding-chat-overlay .kb-sug-text {
      font-size: 13px;
      color: #0f172a;
      line-height: 1.4;
      margin-bottom: 8px;
    }

    #onboarding-chat-overlay .kb-sug-actions {
      display: flex;
      gap: 6px;
    }

    #onboarding-chat-overlay .kb-sug-btn {
      font-size: 12px;
      padding: 4px 10px;
      border-radius: 8px;
      border: 1px solid rgba(15, 23, 42, .12);
      background: #fff;
      cursor: pointer;
      font-weight: 600;
    }

    #onboarding-chat-overlay .kb-sug-btn.approve {
      background: #dcf8c6;
      border-color: #4caf50;
      color: #2e7d32;
    }

    #onboarding-chat-overlay .kb-sug-btn.reject {
      background: #fef0f0;
      border-color: #ef4444;
      color: #b91c1c;
    }

    #onboarding-chat-overlay .kb-sug-btn:hover {
      opacity: .85;
    }

    .chat-ob-input-area {
      width: 100%;
      padding: 8px 10px 12px;
      background: #fff;
      display: flex;
      justify-content: center;
      border-top: 1px solid rgba(0, 0, 0, 0.08);
      flex-shrink: 0;
    }

    .chat-ob-input-row {
      width: 100%;
      display: flex;
      gap: 4px;
      background: #f0f2f5;
      border-radius: 24px;
      padding: 4px 4px 4px 14px;
      align-items: center;
    }

    .chat-ob-input {
      flex: 1;
      border: none;
      background: transparent;
      outline: none;
      color: #000;
      font-size: 1rem;
      font-family: inherit;
    }

    .chat-ob-input::placeholder {
      color: #999;
    }

    .chat-ob-send {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      background: #3390ec;
      color: #fff;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: background 0.15s;
      flex-shrink: 0;
    }

    .chat-ob-send svg {
      width: 20px;
      height: 20px;
    }

    .chat-ob-send:hover:not(:disabled) {
      background: #2778d0;
    }

    .chat-ob-send:disabled {
      background: #c9d6e4;
      cursor: default;
    }

    /* ═══ STEP TABS ═══ */
    .step-tabs {
      display: flex;
      gap: 4px;
      margin-top: 16px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 2px;
    }

    .step-tabs::-webkit-scrollbar {
      display: none;
    }

    .step-tab {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 14px;
      border: 1px solid var(--border);
      border-radius: 20px;
      background: var(--surface);
      color: var(--text-sec);
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.2s;
    }

    .step-tab:hover {
      background: var(--surface2);
      border-color: var(--text-dim);
    }

    .step-tab.active {
      background: #1a1a1a;
      color: #fff;
      border-color: #1a1a1a;
    }

    .step-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: #000;
      color: #fff;
      font-size: 0.7rem;
      font-weight: 700;
    }

    .step-tab.active .step-num {
      background: rgba(255, 255, 255, 0.25);
    }

    [data-theme="dark"] .step-tab.active {
      background: #ffffff;
      color: #0a0a0a;
      border-color: #ffffff;
    }

    [data-theme="dark"] .step-tab.active .step-num {
      background: rgba(0, 0, 0, 0.2);
    }

    @media (max-width: 600px) {

      /* Step tabs → horizontal scroll pills */
      .step-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding: 4px 0 8px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
      }

      .step-tab {
        min-width: max-content;
        padding: 7px 12px;
        font-size: 0.7rem;
        gap: 5px;
        flex: 0 0 auto;
        scroll-snap-align: start;
        border-radius: 20px;
        min-height: 36px;
      }

      .step-num {
        width: 18px;
        height: 18px;
        font-size: 0.6rem;
      }

      /* OV card — compact */
      .ov-card {
        padding: 12px;
        border-radius: 12px;
        position: relative;
      }

      .ov-bot-av {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 15px;
      }

      .ov-bot-name {
        font-size: 0.92rem;
      }

      .ov-bot-username {
        font-size: 0.72rem;
      }

      /* KPI — 3 in a row */
      .kpi-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
      }

      .kpi-card {
        padding: 10px 8px;
      }

      .kpi-lbl {
        font-size: 0.58rem;
      }

      .kpi-val {
        font-size: 1.1rem;
      }

      /* Topbar — compact */
      .topbar {
        height: 44px;
        padding: 0 10px;
      }

      .topbar-title {
        font-size: 0.8rem;
      }

      .theme-btn {
        padding: 4px 8px;
        font-size: 12px;
      }

      /* Forms — full-width, prevent iOS zoom */
      .form-input {
        width: 100%;
        font-size: 16px;
      }
    }

    /* ── Wizard template cards ── */
    .wz-tpl-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin: 12px 0;
    }

    .wz-tpl-card {
      padding: 12px 14px;
      background: var(--surface2);
      border: 1.5px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.15s;
      font-size: 0.8rem;
    }

    .wz-tpl-card:hover {
      border-color: var(--primary-brd);
      background: var(--primary-dim);
    }

    .wz-tpl-card.selected {
      border-color: var(--primary);
      background: var(--primary-dim);
      color: var(--indigo);
    }

    .wz-tpl-ico {
      font-size: 20px;
      margin-bottom: 4px;
    }

    .wz-tpl-name {
      font-weight: 700;
      color: var(--text);
    }

    .wz-tpl-sub {
      font-size: 0.68rem;
      color: var(--text-sec);
      margin-top: 2px;
    }

    /* Account list items */
    .acc-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 10px;
      border-radius: 8px;
      font-size: 0.78rem;
      color: var(--text-sec);
      cursor: pointer;
      transition: all 0.15s;
      margin-bottom: 1px;
    }

    .acc-item:hover {
      background: var(--primary-dim);
      color: var(--text);
    }

    .acc-item.active {
      background: var(--primary-dim);
      color: var(--indigo);
    }

    /* ── Bot switcher ── */
    .bot-switcher {
      position: relative;
      display: none;
    }

    .bot-sw-av {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }

    .bot-sw-item {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.8rem;
      color: var(--text);
      transition: background 0.12s;
    }

    .bot-sw-item:hover {
      background: var(--primary-dim);
    }

    .bot-sw-item.current {
      background: var(--primary-dim);
      color: var(--indigo);
      font-weight: 600;
    }

    .acc-av {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }

    .acc-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .sidebar-footer {
      border-top: 1px solid var(--border);
      padding: 10px 8px;
    }

    /* ── Sidebar user row ── */
    .sb-user-row {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 9px 10px;
      border-radius: 9px;
      cursor: pointer;
      transition: background 0.12s;
      margin-bottom: 2px;
      position: relative;
    }
    .sb-user-row:hover { background: var(--surface2); }
    .sb-user-av {
      width: 30px; height: 30px;
      border-radius: 50%;
      background: linear-gradient(135deg, #6366f1, #3068ff);
      color: #fff;
      display: flex; align-items: center; justify-content: center;
      font-size: 12px; font-weight: 800;
      flex-shrink: 0;
    }
    .sb-user-info { flex: 1; min-width: 0; }
    .sb-user-name { font-size: 0.75rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sb-user-sub { font-size: 0.65rem; color: var(--text-dim); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sb-user-chevron { font-size: 11px; color: var(--text-dim); flex-shrink: 0; }

    .ai-requests {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 10px;
      border-radius: 8px;
      cursor: pointer;
      transition: background 0.15s;
    }

    .ai-requests:hover {
      background: var(--primary-dim);
    }

    .ai-req-label {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--text);
    }

    .ai-req-sub {
      font-size: 0.65rem;
      color: var(--text-sec);
      margin-top: 1px;
    }

    .ai-req-bar {
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      margin-top: 6px;
      overflow: hidden;
    }

    .ai-req-fill {
      height: 100%;
      background: var(--green);
      border-radius: 2px;
      width: 85%;
    }

    /* ══════════════════════════════
       MAIN
    ════════════════════════    /* Main content hidden for Chat OS natively */
    #main-content {
      display: none !important;
    }

    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .topbar {
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      height: 52px;
      flex-shrink: 0;
      transition: background 0.25s, box-shadow 0.25s;
    }

    [data-theme="light"] .topbar {
      box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
    }

    .topbar-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .topbar-title {
      font-size: 0.95rem;
      font-weight: 700;
    }

    .topbar-count {
      font-size: 0.9rem;
      font-weight: 700;
      color: var(--indigo);
    }

    .topbar-right {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .search-box {
      display: flex;
      align-items: center;
      gap: 7px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 0.78rem;
      color: var(--text-dim);
      cursor: text;
      width: 200px;
    }

    .search-box input {
      background: transparent;
      border: none;
      outline: none;
      font-size: 0.78rem;
      color: var(--text);
      width: 100%;
      font-family: inherit;
    }

    .search-box input::placeholder {
      color: var(--text-dim);
    }

    .theme-btn {
      background: var(--primary-dim);
      border: 1px solid var(--primary-brd);
      border-radius: 8px;
      padding: 6px 10px;
      cursor: pointer;
      font-size: 14px;
      transition: all 0.15s;
      color: var(--text);
    }

    .theme-btn:hover {
      background: rgba(99, 102, 241, 0.25);
    }

    @keyframes jelly {
      0% {
        transform: scale(1);
      }

      30% {
        transform: scale(0.88, 0.92);
      }

      55% {
        transform: scale(1.06, 0.97);
      }

      75% {
        transform: scale(0.97, 1.03);
      }

      90% {
        transform: scale(1.02, 0.99);
      }

      100% {
        transform: scale(1);
      }
    }

    @keyframes pb-shimmer {
      0% {
        background-position: -200% center;
      }

      100% {
        background-position: 200% center;
      }
    }

    .pb-fill {
      height: 100%;
      border-radius: 3px;
      background: linear-gradient(90deg, #000 40%, #333 55%, #000 70%);
      background-size: 200% 100%;
      animation: pb-shimmer 1.6s linear infinite;
      transition: width 0.6s ease;
    }

    .btn-primary {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--primary);
      border: none;
      border-radius: var(--radius-pill);
      padding: 8px 18px;
      font-size: 0.78rem;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      transition: all 0.2s;
      user-select: none;
    }

    .btn-primary:hover {
      background: #262626;
      transform: translateY(-1px);
    }

    .btn-primary:active {
      animation: jelly 0.4s ease;
    }

    .btn-secondary {
      display: flex;
      align-items: center;
      gap: 6px;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-pill);
      padding: 8px 18px;
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      transition: all 0.2s;
      user-select: none;
    }

    .btn-secondary:hover {
      border-color: var(--text);
    }

    .btn-secondary:active {
      animation: jelly 0.4s ease;
    }

    .content {
      flex: 1;
      overflow-y: auto;
      padding: 20px;
    }

    /* Sidebar hidden for Chat OS */
    .sidebar {
      display: none !important;
    }

    /* ══ SCREENS ══ */
    .screen {
      display: none;
    }

    .screen.active {
      display: block;
    }

    /* ══ EMPTY STATE ══ */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      text-align: center;
    }

    .empty-icon {
      font-size: 48px;
      margin-bottom: 16px;
      opacity: 0.5;
    }

    .empty-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
    }

    .empty-sub {
      font-size: 0.78rem;
      color: var(--text-sec);
      max-width: 280px;
      line-height: 1.55;
    }

    /* ══ AUTOMATIONS GRID ══ */
    .auto-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
    }

    .auto-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px 18px;
      cursor: pointer;
      transition: all 0.15s;
      position: relative;
    }

    .auto-card:hover {
      border-color: var(--primary-brd);
      box-shadow: var(--shadow);
    }

    .auto-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

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

    .auto-logo {
      font-size: 16px;
      color: var(--primary);
    }

    .auto-name {
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--text);
    }

    .auto-more {
      color: var(--text-dim);
      cursor: pointer;
      font-size: 16px;
      padding: 0 4px;
    }

    .auto-stats {
      display: flex;
      gap: 28px;
      margin-bottom: 12px;
    }

    .auto-stat-label {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--text-dim);
      margin-bottom: 3px;
    }

    .auto-stat-val {
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--text);
    }

    .auto-account {
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 0.72rem;
      color: var(--text-sec);
    }

    .auto-acc-av {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }

    /* Promo card */

    /* ══ ANALYTICS ══ */
    .page-label {
      font-size: 0.65rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text);
      margin-bottom: 16px;
    }

    .tab-row {
      display: flex;
      gap: 4px;
      margin-bottom: 16px;
    }

    .tab-btn {
      padding: 5px 14px;
      border-radius: 7px;
      font-size: 0.75rem;
      font-weight: 600;
      cursor: pointer;
      border: 1px solid transparent;
      background: transparent;
      color: var(--text-dim);
      transition: all 0.15s;
    }

    .tab-btn:hover {
      color: var(--text);
    }

    .tab-btn.active {
      background: var(--primary-dim);
      color: var(--indigo);
      border-color: var(--primary-brd);
    }

    .tab-btn:active {
      animation: jelly 0.35s ease;
    }

    .hero-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px 24px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .donut-wrap {
      position: relative;
      width: 120px;
      height: 64px;
      flex-shrink: 0;
      overflow: hidden;
    }

    .donut-wrap svg {
      width: 120px;
      height: 120px;
      position: absolute;
      top: -58px;
    }

    .donut-label {
      position: absolute;
      bottom: 0;
      width: 100%;
      text-align: center;
    }

    .donut-pct {
      font-size: 1.4rem;
      font-weight: 800;
    }

    .stat-rows {
      flex: 1;
    }

    .stat-row {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.78rem;
      color: var(--text-sec);
      padding: 5px 0;
      border-bottom: 1px solid var(--border2);
    }

    .stat-row:last-child {
      border-bottom: none;
    }

    .stat-dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    .stat-val {
      margin-left: auto;
      font-weight: 700;
      color: var(--text);
    }

    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-bottom: 20px;
    }

    .kpi-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px 16px;
    }

    .kpi-lbl {
      font-size: 0.62rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-dim);
      margin-bottom: 5px;
    }

    .kpi-val {
      font-size: 1.5rem;
      font-weight: 800;
    }

    .kpi-sub {
      font-size: 0.62rem;
      color: var(--text-dim);
      margin-top: 3px;
    }

    .section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }

    .section-lbl {
      font-size: 0.62rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--text-dim);
    }

    .link-btn {
      font-size: 0.72rem;
      color: var(--indigo);
      background: none;
      border: none;
      cursor: pointer;
    }

    .link-btn:hover {
      text-decoration: underline;
    }

    .q-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 20px;
    }

    .q-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 12px;
    }

    .q-text {
      font-size: 0.78rem;
      color: var(--text);
      line-height: 1.5;
      margin-bottom: 10px;
    }

    .q-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .q-count {
      font-size: 0.68rem;
      color: var(--text-dim);
    }

    .btn-sm {
      background: var(--primary-dim);
      border: 1px solid var(--primary-brd);
      border-radius: 6px;
      padding: 3px 9px;
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--indigo);
      cursor: pointer;
      transition: all 0.15s;
    }

    .btn-sm:hover {
      background: rgba(99, 102, 241, 0.25);
    }

    /* ══ CHAT ══ */
    .chat-layout {
      display: flex;
      gap: 16px;
    }

    .chat-box {
      flex: 1;
      max-width: 420px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      display: flex;
      flex-direction: column;
      min-height: 420px;
      max-height: 520px;
      overflow: hidden;
    }

    .chat-head {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 13px 15px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }

    .chat-av {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background: #000000;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }

    .chat-head-name {
      font-size: 0.82rem;
      font-weight: 700;
    }

    .chat-head-online {
      font-size: 0.65rem;
      color: var(--green);
    }

    .chat-msgs {
      flex: 1;
      overflow-y: auto;
      padding: 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .date-sep {
      text-align: center;
      font-size: 0.65rem;
      color: var(--text-dim);
    }

    .msg-row {
      display: flex;
      flex-direction: column;
    }

    .msg-row.user {
      align-items: flex-end;
    }

    .bubble {
      max-width: 70%;
      padding: 9px 13px;
      border-radius: 14px 14px 14px 4px;
      font-size: 0.8rem;
      line-height: 1.55;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text);
      word-break: break-word;
      overflow-wrap: break-word;
    }

    .bubble.user {
      background: var(--primary);
      border-color: var(--primary);
      border-radius: 14px 14px 4px 14px;
      color: #fff;
    }

    .msg-time {
      font-size: 0.6rem;
      color: var(--text-dim);
      margin-top: 3px;
    }

    .chat-foot {
      padding: 10px 13px;
      border-top: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 7px;
      flex-shrink: 0;
    }

    .chat-inp {
      flex: 1;
      background: transparent;
      border: none;
      outline: none;
      font-size: 0.8rem;
      color: var(--text);
      font-family: inherit;
    }

    .chat-inp::placeholder {
      color: var(--text-dim);
    }

    .icon-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-dim);
      font-size: 14px;
    }

    .send-btn {
      background: var(--primary);
      border: none;
      border-radius: 7px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      color: #fff;
      flex-shrink: 0;
      transition: opacity 0.15s;
    }

    .send-btn:hover {
      opacity: 0.85;
    }

    .send-btn:active {
      animation: jelly 0.35s ease;
    }

    .sug-panel {
      width: 240px;
      flex-shrink: 0;
    }

    .sug-label {
      font-size: 0.68rem;
      color: var(--text-sec);
      text-align: center;
      margin-bottom: 10px;
    }

    .sug-list {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }

    .sug-item {
      display: flex;
      align-items: flex-start;
      gap: 7px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 9px 11px;
      font-size: 0.75rem;
      color: var(--text);
      cursor: pointer;
      transition: all 0.15s;
      line-height: 1.45;
    }

    .sug-item:hover {
      border-color: var(--primary-brd);
      color: var(--indigo);
      background: var(--primary-dim);
    }

    .sug-ico {
      font-size: 11px;
      flex-shrink: 0;
      margin-top: 1px;
      color: var(--yellow);
    }

    .sug-foot {
      text-align: center;
      margin-top: 8px;
      font-size: 0.65rem;
      color: var(--text-dim);
    }

    .sug-foot a {
      color: var(--indigo);
    }

    /* ══ KNOWLEDGE ══ */
    .kb-wrap {
      max-width: 460px;
    }

    .kb-big-title {
      font-size: 1rem;
      font-weight: 700;
      margin-bottom: 16px;
    }

    .kb-option {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 11px;
      padding: 14px 16px;
      margin-bottom: 9px;
      cursor: pointer;
      transition: all 0.15s;
    }

    .kb-option:hover {
      border-color: var(--primary-brd);
      background: var(--primary-dim);
    }

    .kb-opt-left {
      display: flex;
      align-items: center;
      gap: 11px;
    }

    .kb-ico {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background: var(--primary-dim);
      border: 1px solid var(--primary-brd);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 15px;
    }

    .kb-opt-name {
      font-size: 0.85rem;
      font-weight: 600;
    }

    .kb-commons-label {
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-dim);
      margin: 18px 0 8px;
    }

    .kb-common {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 10px 0;
      font-size: 0.8rem;
      color: var(--text-sec);
      border-bottom: 1px solid var(--border2);
      cursor: pointer;
      transition: color 0.15s;
    }

    .kb-common:hover {
      color: var(--indigo);
    }

    .kb-common:last-child {
      border-bottom: none;
    }

    /* ══ UNANSWERED ══ */
    .unans-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 9px;
    }

    .unans-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 13px;
    }

    .unans-text {
      font-size: 0.78rem;
      color: var(--text);
      line-height: 1.5;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .unans-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .btn-add {
      display: flex;
      align-items: center;
      gap: 4px;
      background: var(--primary-dim);
      border: 1px solid var(--primary-brd);
      border-radius: 6px;
      padding: 4px 9px;
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--indigo);
      cursor: pointer;
      transition: all 0.15s;
    }

    .btn-add:hover {
      background: rgba(99, 102, 241, 0.25);
    }

    .topic-dropdown {
      position: absolute;
      right: 0;
      top: 100%;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      z-index: 100;
      min-width: 180px;
      padding: 4px;
    }

    .topic-dropdown button {
      display: block;
      width: 100%;
      text-align: left;
      background: none;
      border: none;
      padding: 8px 12px;
      font-size: 0.78rem;
      cursor: pointer;
      border-radius: 6px;
      color: var(--text);
    }

    .topic-dropdown button:hover {
      background: var(--surface2);
    }

    .link-btn {
      background: none;
      border: none;
      cursor: pointer;
      font-size: 0.78rem;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    /* ══ TOPICS TABLE ══ */
    .table-wrap {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
    }

    .data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.8rem;
    }

    .data-table thead th {
      background: var(--surface2);
      color: var(--text-dim);
      font-size: 0.6rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 10px 12px;
      text-align: left;
      border-bottom: 2px solid var(--border);
      position: sticky;
      top: 0;
    }

    .data-table tbody tr {
      border-bottom: 1px solid var(--border2);
    }

    .data-table tbody tr:last-child {
      border-bottom: none;
    }

    .data-table tbody tr:hover {
      background: var(--primary-dim);
    }

    .data-table td {
      padding: 10px 12px;
      vertical-align: middle;
    }

    .td-name {
      display: flex;
      align-items: center;
      gap: 9px;
      color: var(--text);
    }

    .td-muted {
      color: var(--text-sec);
      font-size: 0.75rem;
    }

    /* ══ MODAL ══ */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.55);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }

    .modal-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .modal {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 28px;
      width: 420px;
      max-width: 95vw;
      box-shadow: var(--shadow);
      transform: translateY(16px);
      transition: transform 0.2s;
    }

    .modal-overlay.open .modal {
      transform: translateY(0);
    }

    .modal-title {
      font-size: 1rem;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .modal-sub {
      font-size: 0.78rem;
      color: var(--text-sec);
      margin-bottom: 20px;
      line-height: 1.5;
    }

    .form-label {
      font-size: 0.68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.07em;
      color: var(--text-dim);
      margin-bottom: 6px;
      display: block;
    }

    .form-input {
      width: 100%;
      background: var(--surface);
      border: 1.5px solid var(--border);
      border-radius: var(--radius-input);
      color: var(--text);
      font-size: 0.82rem;
      padding: 10px 12px;
      outline: none;
      transition: border-color 0.2s;
      font-family: inherit;
      margin-bottom: 14px;
    }

    .form-input:focus {
      border-color: #000000;
      box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
    }

    .form-input::placeholder {
      color: var(--text-dim);
    }

    .modal-footer {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
    }

    .btn-ghost {
      background: transparent;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-pill);
      padding: 8px 16px;
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-sec);
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-ghost:hover {
      border-color: var(--text);
      color: var(--text);
    }

    .btn-modal-ok {
      background: var(--primary);
      border: none;
      border-radius: var(--radius-pill);
      padding: 8px 20px;
      font-size: 0.8rem;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      transition: all 0.2s;
    }

    .btn-modal-ok:hover {
      background: #262626;
      transform: translateY(-1px);
    }

    .auth-overlay {
      position: fixed;
      inset: 0;
      background: var(--bg);
      z-index: 10001;
      transition: opacity 0.3s;
      overflow-y: auto;
      scroll-behavior: smooth;
    }

    .auth-overlay.has-landing {
      display: block;
    }

    .auth-overlay:not(.has-landing) {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .auth-overlay.hidden {
      opacity: 0;
      pointer-events: none;
      display: none !important;
    }

    /* ══ LANDING PAGE ══ */
    @keyframes gradientShift {

      0%,
      100% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-12px);
      }
    }

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: .4
      }

      50% {
        opacity: .8
      }
    }

    /* Integrations bar */

    /* Features grid */
    .lp-features {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;
    }

    /* Demo chat */

    /* Pricing */
    .lp-pricing {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      max-width: 700px;
      margin: 0 auto;
    }

    /* Stats bar */

    /* Footer */

    /* Auth section within landing */
    .lp-auth-section {
      min-height: 80vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 24px;
    }

    /* Reveal animation */
    .lp-reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: all 0.6s ease;
    }

    .lp-reveal.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Modal animations */
    @keyframes modalFadeIn {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    @keyframes modalSlideUp {
      from {
        opacity: 0;
        transform: translateY(20px) scale(0.97);
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .modal-overlay.open {
      animation: modalFadeIn 0.2s ease;
    }

    .modal-overlay.open .modal {
      animation: modalSlideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    @media (max-width: 640px) {
      .lp-pricing {
        grid-template-columns: 1fr;
      }
    }

    .auth-spinner {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      border: 3px solid var(--border);
      border-top-color: var(--primary);
      animation: spin 0.7s linear infinite;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .auth-box {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 36px;
      width: 380px;
      max-width: 95vw;
      box-shadow: var(--shadow);
    }

    .auth-logo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      margin-bottom: 24px;
    }

    .auth-logo-text {
      font-size: 1.2rem;
      font-weight: 800;
    }

    .auth-title {
      font-size: 1.05rem;
      font-weight: 700;
      text-align: center;
      margin-bottom: 6px;
    }

    .auth-sub {
      font-size: 0.78rem;
      color: var(--text-sec);
      text-align: center;
      margin-bottom: 22px;
    }

    .auth-tabs {
      display: flex;
      background: var(--bg);
      border-radius: 9px;
      padding: 3px;
      margin-bottom: 20px;
    }

    .auth-tab {
      flex: 1;
      text-align: center;
      padding: 7px;
      border-radius: 7px;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      color: var(--text-dim);
      transition: all 0.15s;
      border: none;
      background: transparent;
    }

    .auth-tab.active {
      background: var(--surface);
      color: var(--text);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

    .auth-error {
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid rgba(239, 68, 68, 0.3);
      border-radius: 8px;
      padding: 9px 12px;
      font-size: 0.75rem;
      color: var(--red);
      margin-bottom: 12px;
      display: none;
    }

    .auth-error.show {
      display: block;
    }

    .btn-google {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 9px;
      padding: 11px;
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--text);
      cursor: pointer;
      transition: all 0.15s;
      margin-bottom: 14px;
    }

    .btn-google:hover {
      border-color: var(--primary-brd);
    }

    .auth-divider {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 14px;
    }

    .auth-divider-line {
      flex: 1;
      height: 1px;
      background: var(--border);
    }

    .auth-divider-text {
      font-size: 0.7rem;
      color: var(--text-dim);
    }

    .btn-auth {
      width: 100%;
      background: var(--primary);
      border: none;
      border-radius: 9px;
      padding: 11px;
      font-size: 0.85rem;
      font-weight: 700;
      color: #fff;
      cursor: pointer;
      transition: opacity 0.15s;
      margin-top: 4px;
    }

    .btn-auth:hover {
      opacity: 0.88;
    }

    /* ══ USER AVATAR in topbar ══ */
    .user-pill {
      display: flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 4px 10px 4px 4px;
      transition: all 0.15s;
    }

    .user-pill:hover {
      border-color: var(--primary-brd);
    }

    .user-av-sm {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: #000000;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }

    .user-email {
      font-size: 0.72rem;
      color: var(--text-sec);
      max-width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    /* ══ AVATAR DROPDOWN ══ */
    .user-pill {
      position: relative;
    }

    .av-dropdown {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      min-width: 200px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      box-shadow: var(--shadow);
      z-index: 9000;
      overflow: hidden;
      display: none;
    }

    .av-dropdown.open {
      display: block;
    }

    .av-dd-header {
      padding: 12px 14px;
      border-bottom: 1px solid var(--border);
    }

    .av-dd-name {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text);
    }

    .av-dd-email {
      font-size: 0.68rem;
      color: var(--text-dim);
      margin-top: 2px;
    }

    .av-dd-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 14px;
      font-size: 0.78rem;
      color: var(--text-sec);
      cursor: pointer;
      transition: background 0.12s;
    }

    .av-dd-item:hover {
      background: var(--surface2);
      color: var(--text);
    }

    .av-dd-item .av-dd-ico {
      font-size: 15px;
      width: 20px;
      text-align: center;
    }

    .av-dd-sep {
      height: 1px;
      background: var(--border);
      margin: 4px 0;
    }

    .av-dd-item.danger {
      color: var(--red);
    }

    /* ══ SETTINGS OVERLAY ══ */
    .settings-overlay {
      position: fixed;
      inset: 0;
      z-index: 100010;
      background: var(--bg);
      display: none;
      flex-direction: row;
    }

    .settings-overlay.open {
      display: flex;
    }

    .settings-sidebar {
      width: 240px;
      min-width: 240px;
      background: #1a1d27;
      border-right: 1px solid rgba(255,255,255,0.06);
      display: flex;
      flex-direction: column;
      padding: 0;
      overflow-y: auto;
    }

    .settings-header {
      padding: 20px 18px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .settings-back {
      width: 30px;
      height: 30px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.12);
      background: none;
      cursor: pointer;
      color: rgba(255,255,255,0.6);
      font-size: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .settings-back:hover {
      background: rgba(255,255,255,0.08);
      color: #fff;
    }

    .settings-logo {
      font-size: 15px;
      font-weight: 700;
      color: #fff;
      font-family: 'Inter', sans-serif;
    }

    .settings-nav-group {
      padding: 10px 10px 0;
    }

    .settings-nav-label {
      font-size: 11px;
      font-weight: 600;
      color: rgba(255,255,255,0.3);
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 8px 10px 4px;
      font-family: 'Inter', sans-serif;
    }

    .settings-nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 9px 10px;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 400;
      color: rgba(255,255,255,0.65);
      cursor: pointer;
      transition: background 0.12s, color 0.12s;
      margin-bottom: 1px;
      font-family: 'Inter', sans-serif;
      border: none;
      background: none;
      width: 100%;
      text-align: left;
    }

    .settings-nav-item:hover {
      background: rgba(255,255,255,0.08);
      color: #fff;
    }

    .settings-nav-item.active {
      background: rgba(255,255,255,0.12);
      color: #fff;
      font-weight: 500;
    }

    .settings-nav-item svg {
      flex-shrink: 0;
      opacity: 0.7;
      stroke: currentColor;
    }

    .settings-nav-item.active svg {
      opacity: 1;
    }

    .settings-nav-sub {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 7px 10px 7px 36px;
      border-radius: 8px;
      font-size: 0.75rem;
      color: var(--text-sec);
      cursor: pointer;
      transition: all 0.12s;
      margin-bottom: 1px;
    }

    .settings-nav-sub:hover {
      background: var(--surface2);
      color: var(--text);
    }

    .settings-nav-sub.active {
      background: var(--primary-dim);
      color: var(--indigo);
      font-weight: 700;
    }

    .settings-content {
      flex: 1;
      overflow-y: auto;
      padding: 32px 40px;
      max-width: 860px;
    }

    .s-section {
      display: none;
    }

    .s-section.active {
      display: block;
    }

    .s-title {
      font-size: 1.2rem;
      font-weight: 800;
      color: var(--text);
      margin-bottom: 6px;
    }

    .s-subtitle {
      font-size: 0.78rem;
      color: var(--text-dim);
      margin-bottom: 24px;
    }

    .s-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px;
      margin-bottom: 16px;
    }

    .s-card-title {
      font-size: 0.85rem;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 14px;
    }

    .s-field {
      margin-bottom: 14px;
    }

    .s-label {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--text-dim);
      text-transform: uppercase;
      letter-spacing: 0.06em;
      margin-bottom: 5px;
    }

    .s-input {
      width: 100%;
      padding: 9px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 0.82rem;
      outline: none;
      transition: border-color 0.15s;
    }

    .s-input:focus {
      border-color: var(--primary-brd);
    }

    .s-input[readonly] {
      opacity: 0.5;
      cursor: default;
    }

    .s-btn {
      padding: 9px 20px;
      border-radius: 8px;
      border: none;
      font-size: 0.78rem;
      font-weight: 700;
      cursor: pointer;
      transition: opacity 0.15s;
    }

    .s-btn:hover {
      opacity: 0.85;
    }

    .s-btn-primary {
      background: var(--primary);
      color: #fff;
    }

    .s-btn-secondary {
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text-sec);
    }

    .s-btn-danger {
      background: rgba(239, 68, 68, 0.12);
      color: var(--red);
      border: 1px solid rgba(239, 68, 68, 0.25);
    }

    .s-stat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 16px;
    }

    .s-stat-card {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 16px;
      text-align: center;
    }

    .s-stat-val {
      font-size: 1.4rem;
      font-weight: 800;
      color: var(--indigo);
    }

    .s-stat-lbl {
      font-size: 0.68rem;
      color: var(--text-dim);
      margin-top: 4px;
    }

    .s-prog-wrap {
      background: var(--border);
      border-radius: 6px;
      height: 8px;
      overflow: hidden;
      margin: 8px 0;
    }

    .s-prog-fill {
      height: 100%;
      background: linear-gradient(90deg, var(--indigo), #8b5cf6);
      border-radius: 6px;
      transition: width 0.5s;
    }

    .s-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.77rem;
    }

    .s-table th {
      padding: 8px 10px;
      text-align: left;
      color: var(--text-dim);
      font-size: 0.68rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      border-bottom: 1px solid var(--border);
    }

    .s-table td {
      padding: 10px 10px;
      border-bottom: 1px solid var(--border2);
      color: var(--text-sec);
    }

    .s-table tr:last-child td {
      border-bottom: none;
    }

    .s-badge {
      display: inline-block;
      padding: 2px 8px;
      border-radius: 20px;
      font-size: 0.65rem;
      font-weight: 700;
    }

    .s-badge-green {
      background: rgba(34, 197, 94, 0.12);
      color: var(--green);
    }

    .s-limit-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      border-bottom: 1px solid var(--border2);
      font-size: 0.8rem;
    }

    .s-limit-row:last-child {
      border-bottom: none;
    }

    .s-copy-wrap {
      display: flex;
      gap: 8px;
      align-items: center;
    }

    .s-copy-input {
      flex: 1;
      padding: 9px 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text-sec);
      font-size: 0.75rem;
      outline: none;
    }

    .s-copy-btn {
      padding: 9px 14px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      cursor: pointer;
      font-size: 0.75rem;
      color: var(--text-sec);
      white-space: nowrap;
    }

    .s-copy-btn:hover {
      border-color: var(--primary-brd);
      color: var(--indigo);
    }

    /* ══ STATUS TOGGLE ══ */

    .status-lbl {
      font-size: 0.58rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-dim);
    }

    .toggle-wrap {
      display: flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      user-select: none;
    }

    .toggle-wrap:active {
      animation: jelly 0.35s ease;
    }

    .toggle-text {
      font-size: 0.65rem;
      font-weight: 700;
    }

    .toggle-text.on {
      color: var(--green);
    }

    .toggle-text.off {
      color: var(--text-dim);
    }

    .toggle-sw {
      width: 32px;
      height: 17px;
      border-radius: 9px;
      background: var(--border);
      position: relative;
      transition: background 0.2s;
    }

    .toggle-sw.on {
      background: var(--green);
    }

    .toggle-sw::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: #fff;
      transition: left 0.2s;
    }

    .toggle-sw.on::after {
      left: 17px;
    }

    /* ══ RULES SCREEN ══ */
    .rules-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 20px;
      margin-bottom: 14px;
    }

    .rules-card-title {
      font-size: 0.88rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .rules-card-sub {
      font-size: 0.75rem;
      color: var(--text-sec);
      line-height: 1.55;
      margin-bottom: 14px;
    }

    .rules-textarea {
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 0.8rem;
      padding: 12px;
      outline: none;
      transition: border-color 0.2s;
      font-family: inherit;
      resize: vertical;
      min-height: 180px;
      line-height: 1.6;
    }

    .rules-textarea:focus {
      border-color: var(--primary);
    }

    .rules-textarea::placeholder {
      color: var(--text-dim);
    }

    .rules-actions {
      display: flex;
      gap: 8px;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    .check-row {
      display: flex;
      gap: 8px;
      align-items: flex-start;
      font-size: 0.78rem;
      color: var(--text-sec);
      margin-bottom: 6px;
    }

    .check-ico {
      color: var(--green);
      font-size: 12px;
      flex-shrink: 0;
      margin-top: 2px;
    }

    /* ══ INACTIVE BANNER ══ */
    .inactive-banner {
      background: rgba(239, 68, 68, 0.1);
      border: 1px solid rgba(239, 68, 68, 0.3);
      border-radius: 10px;
      padding: 12px 16px;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.8rem;
      color: var(--red);
    }

    /* ══ FILE DROP ZONE ══ */
    .drop-zone {
      border: 2px dashed var(--border);
      border-radius: 12px;
      padding: 30px 20px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      margin-bottom: 14px;
    }

    .drop-zone:hover,
    .drop-zone.drag-over {
      border-color: var(--primary);
      background: var(--primary-dim);
    }

    .drop-zone-ico {
      font-size: 32px;
      margin-bottom: 8px;
    }

    .drop-zone-text {
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text);
      margin-bottom: 4px;
    }

    .drop-zone-sub {
      font-size: 0.72rem;
      color: var(--text-dim);
    }

    .file-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 14px;
    }

    .file-item {
      display: flex;
      align-items: center;
      gap: 8px;
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 0.78rem;
    }

    .file-item-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text);
    }

    .file-item-size {
      color: var(--text-dim);
      font-size: 0.65rem;
    }

    .file-item-rm {
      background: none;
      border: none;
      cursor: pointer;
      color: var(--text-dim);
      font-size: 13px;
    }

    /* ══ TOAST ══ */
    .toast {
      position: fixed;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%) translateY(60px);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 20px;
      font-size: 0.78rem;
      color: var(--text);
      z-index: 9999;
      box-shadow: var(--shadow);
      transition: transform 0.25s;
      pointer-events: none;
    }

    .toast.show {
      transform: translateX(-50%) translateY(0);
    }

    /* ══ CHAT CONTROLS ══ */
    .chat-ctrl-btn {
      background: var(--surface2);
      border: 1px solid var(--border);
      border-radius: 7px;
      padding: 4px 10px;
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--text-sec);
      cursor: pointer;
      transition: all 0.15s;
    }

    .chat-ctrl-btn:hover {
      border-color: var(--primary-brd);
      color: var(--indigo);
    }

    /* ══ KB ITEM STATUS ══ */

    /* ══ TARIFF ══ */
    .tariff-toggle-btn {
      padding: 7px 16px;
      border-radius: 8px;
      border: 1.5px solid var(--border);
      background: var(--surface);
      color: var(--text-sec);
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
    }

    .tariff-toggle-btn.active {
      border-color: var(--primary);
      background: var(--primary-dim);
      color: var(--indigo);
    }

    .tariff-feature-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 9px 14px;
      border-bottom: 1px solid var(--border);
      font-size: 0.75rem;
      color: var(--text-sec);
    }

    .tariff-feature-row b {
      color: var(--text);
      font-size: 0.78rem;
    }

    /* ══ AI SETTINGS ══ */

    .model-select {
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 0.82rem;
      padding: 10px 12px;
      outline: none;
      margin-bottom: 14px;
      font-family: inherit;
      cursor: pointer;
    }

    .model-select:focus {
      border-color: var(--primary);
    }

    .uid-box {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 10px 12px;
      font-family: monospace;
      font-size: 0.72rem;
      color: var(--text-dim);
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 6px;
    }

    .copy-btn {
      background: var(--primary-dim);
      border: 1px solid var(--primary-brd);
      border-radius: 6px;
      padding: 3px 9px;
      font-size: 0.68rem;
      font-weight: 600;
      color: var(--indigo);
      cursor: pointer;
      white-space: nowrap;
      user-select: none;
    }

    .copy-btn:hover {
      background: rgba(99, 102, 241, 0.25);
    }

    .copy-btn:active {
      animation: jelly 0.35s ease;
    }

    .step-num {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--primary);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 800;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* ══ CHATS SCREEN ══ */
    #screen-chats.active {
      display: flex !important;
    }

    /* ══ CONTACTS SCREEN ══ */
    #screen-contacts.active { display: flex !important; }

    .cnt-list-item {
      padding: 11px 14px;
      cursor: pointer;
      border-bottom: 1px solid var(--border2);
      transition: background 0.12s;
    }
    .cnt-list-item:hover { background: var(--primary-dim); }
    .cnt-list-item.active { background: var(--primary-dim); border-left: 3px solid var(--primary); }

    .cnt-av {
      width: 36px; height: 36px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 0.85rem; font-weight: 700; color: #fff; flex-shrink: 0;
    }
    .cnt-name {
      font-size: 0.81rem; font-weight: 700; color: var(--text);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .cnt-sub {
      font-size: 0.68rem; color: var(--text-sec);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px;
    }
    .cnt-badge {
      font-size: 0.58rem; padding: 2px 6px; border-radius: 20px; font-weight: 700; flex-shrink: 0;
    }
    .cnt-badge-new { background: rgba(99,102,241,0.12); color: var(--indigo); }
    .cnt-badge-active { background: rgba(34,197,94,0.12); color: var(--green); }

    .cnt-detail-info {
      display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
      padding: 14px 16px; border-bottom: 1px solid var(--border);
    }
    .cnt-detail-row { display: flex; flex-direction: column; gap: 1px; }
    .cnt-detail-label { font-size: 0.6rem; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
    .cnt-detail-val { font-size: 0.78rem; color: var(--text); word-break: break-all; }
    .cnt-search {
      width: 100%; padding: 7px 10px; border: 1px solid var(--border);
      border-radius: 8px; background: var(--surface2); color: var(--text);
      font-size: 0.78rem; outline: none;
    }
    .cnt-search:focus { border-color: var(--primary-brd); }

    .chat-list-item {
      display: flex;align-items: flex-start;gap: 10px;
      padding: 9px 14px;cursor: pointer;
      border-bottom: 1px solid rgba(0,0,0,.04);
      transition: background 0.1s;position: relative;
    }
    .chat-list-item:hover { background: #f5f5f5; }
    .chat-list-item.active { background: #d6eaf5; }

    .chat-list-av {
      width: 46px;height: 46px;border-radius: 50%;
      display: flex;align-items: center;justify-content: center;
      font-size: 17px;font-weight: 700;color: #fff;
      flex-shrink: 0;position: relative;border: none;
    }

    .chat-list-name {
      font-size: 14px;font-weight: 600;color: #000;
      white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
      display: flex;align-items: center;gap: 6px;
    }
    .chat-list-preview {
      font-size: 13px;color: #676767;
      white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
      display: flex;align-items: center;gap: 4px;
    }
    .chat-list-time {
      font-size: 12px;color: #a0acb8;white-space: nowrap;flex-shrink: 0;margin-left: 6px;
    }

    /* ══ CHAT FILTER TABS ══ */
    .chat-filter-tabs {
      display: flex;gap: 6px;padding: 8px 12px;
      border-bottom: 1px solid var(--border);flex-shrink: 0;
      overflow-x: auto;background: #fff;
    }
    .chat-filter-tabs::-webkit-scrollbar { display: none; }
    .chat-ftab {
      padding: 5px 13px;border-radius: 99px;
      font-size: 13px;font-weight: 500;color: #676767;
      border: 1px solid var(--border);background: transparent;
      cursor: pointer;white-space: nowrap;font-family: var(--font);
      transition: all 0.14s;
    }
    .chat-ftab:hover { background: #f8f8f8; }
    .chat-ftab.on { background: #2AABEE;color: #fff;border-color: #2AABEE; }

    /* ══ CHAT SEARCH ══ */
    .chat-search-wrap {
      padding: 8px 10px;border-bottom: 1px solid var(--border);flex-shrink: 0;
    }
    .chat-search-inner {
      display: flex;align-items: center;gap: 7px;
      background: #f1f3f5;border-radius: 10px;padding: 7px 11px;
    }
    .chat-search-inner svg { width: 14px;height: 14px;color: #a0acb8;flex-shrink: 0; }
    .chat-search-inner input {
      background: transparent;border: none;outline: none;
      font-size: 13px;color: #000;width: 100%;font-family: var(--font);
    }
    .chat-search-inner input::placeholder { color: #a0acb8; }

    /* ══ CHAT LIST HEADER ══ */
    .chat-list-header {
      display: flex;align-items: center;justify-content: space-between;
      padding: 7px 14px 5px;flex-shrink: 0;
    }
    .chat-list-count {
      font-size: 12px;font-weight: 600;color: #676767;
      text-transform: uppercase;letter-spacing: .04em;
    }
    .chat-sort-btn {
      display: flex;align-items: center;gap: 4px;
      font-size: 12px;color: #2AABEE;cursor: pointer;font-weight: 500;
    }

    /* ══ USER CARD ══ */
    .user-card-av {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      font-weight: 700;
      color: #fff;
      flex-shrink: 0;
    }

    .notes-area {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface2);
      color: var(--text);
      font-size: 0.75rem;
      padding: 7px 10px;
      resize: none;
      outline: none;
      font-family: inherit;
      box-sizing: border-box;
      transition: border-color 0.15s;
    }

    .notes-area:focus {
      border-color: var(--primary-brd);
    }

    /* ══ BROADCAST ══ */
    .bc-seg-label {
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 0.78rem;
      cursor: pointer;
      padding: 5px 10px;
      border-radius: 7px;
      border: 1px solid var(--border);
      background: var(--surface2);
    }

    .bc-seg-label input {
      accent-color: var(--primary);
    }

    .msg-bubble-user {
      background: #eaffd4;color: #000;
      padding: 8px 12px;
      border-radius: 15px 15px 4px 15px;
      font-size: 14px;line-height: 1.45;max-width: 68%;
      box-shadow: 0 1px 2px rgba(0,0,0,.08);
      word-break: break-word;position: relative;
    }
    .msg-bubble-bot {
      background: #fff;color: #000;
      padding: 8px 12px;
      border-radius: 4px 15px 15px 15px;
      font-size: 14px;line-height: 1.45;max-width: 68%;
      box-shadow: 0 1px 2px rgba(0,0,0,.08);
      word-break: break-word;position: relative;border: none;
    }
    .msg-meta {
      display: flex;align-items: center;gap: 3px;
      font-size: 11px;color: rgba(0,0,0,.4);
      float: right;margin-left: 8px;margin-top: 2px;
    }
    .msg-sender-name {
      font-size: 12px;font-weight: 600;color: #2AABEE;margin-bottom: 2px;
    }
    .msg-date-label {
      align-self: center;
      background: rgba(116,150,172,.9);color: #fff;
      font-size: 12px;font-weight: 500;
      padding: 4px 12px;border-radius: 99px;margin: 8px 0;
    }
    .msg-op-tag {
      display: inline-flex;align-items: center;gap: 4px;
      font-size: 11px;font-weight: 600;
      padding: 3px 8px;border-radius: 4px;
      background: rgba(42,171,238,.08);color: #2AABEE;margin-bottom: 6px;
    }

    /* ══ CHAT TOPBAR (Telegram style) ══ */
    .chat-topbar {
      height: 54px;flex-shrink: 0;
      background: #fff;border-bottom: 1px solid var(--border);
      display: flex;align-items: center;padding: 0 16px;gap: 12px;
      box-shadow: 0 1px 2px rgba(0,0,0,.08);position: relative;z-index: 2;
    }
    .chat-topbar-av {
      width: 36px;height: 36px;border-radius: 50%;
      display: flex;align-items: center;justify-content: center;
      font-size: 14px;font-weight: 700;color: #fff;flex-shrink: 0;
    }
    .chat-topbar-info { flex: 1;min-width: 0; }
    .chat-topbar-name { font-size: 15px;font-weight: 600;color: #000; }
    .chat-topbar-status { font-size: 12px;color: #676767; }
    .chat-topbar-actions { display: flex;gap: 8px;margin-left: auto; }

    /* ══ CHAT MESSAGES AREA ══ */
    .chat-msgs-area {
      flex: 1;overflow-y: auto;padding: 12px 16px;
      display: flex;flex-direction: column;gap: 2px;
      background: #ebedf0;
    }
    .chat-msgs-area::-webkit-scrollbar { width: 4px; }
    .chat-msgs-area::-webkit-scrollbar-thumb { background: rgba(0,0,0,.15);border-radius: 99px; }

    .msg-wrap { display: flex;flex-direction: column; }
    .msg-wrap.in { align-items: flex-start;padding-left: 2px; }
    .msg-wrap.out { align-items: flex-end;padding-right: 2px; }
    .msg-row { display: flex;align-items: flex-end;gap: 6px; }
    .msg-wrap.out .msg-row { flex-direction: row-reverse; }
    .msg-av {
      width: 28px;height: 28px;border-radius: 50%;
      display: flex;align-items: center;justify-content: center;
      font-size: 11px;font-weight: 700;color: #fff;flex-shrink: 0;margin-bottom: 2px;
    }

    /* ══ CHAT INPUT TOOLBAR ══ */
    .chat-input-toolbar {
      background: #fff;border-top: 1px solid var(--border);
      flex-shrink: 0;position: relative;z-index: 2;
    }
    .chat-input-row {
      display: flex;align-items: flex-end;gap: 8px;padding: 8px 12px 10px;
    }
    .chat-inp-box {
      flex: 1;background: #f1f3f5;border-radius: 22px;
      padding: 8px 14px;display: flex;align-items: flex-end;gap: 8px;min-height: 36px;
    }
    .chat-inp-box textarea {
      flex: 1;background: transparent;border: none;outline: none;
      resize: none;font-size: 14px;color: #000;
      font-family: var(--font);line-height: 1.45;max-height: 120px;overflow-y: auto;
    }
    .chat-inp-box textarea::-webkit-scrollbar { display: none; }
    .chat-inp-box textarea::placeholder { color: #a0acb8; }
    .chat-send-btn {
      width: 38px;height: 38px;border-radius: 50%;
      background: #2AABEE;border: none;
      display: flex;align-items: center;justify-content: center;
      cursor: pointer;transition: background 0.14s,transform 0.1s;flex-shrink: 0;
    }
    .chat-send-btn:hover { background: #1a96d4; }
    .chat-send-btn:active { transform: scale(.93); }
    .chat-send-btn svg { width: 17px;height: 17px;color: #fff;margin-left: 2px; }

    /* ══ HANDOFF MODE BADGE ══ */
    .mode-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      font-size: 0.68rem;
      font-weight: 700;
      border-radius: 20px;
      padding: 4px 10px;
      transition: all 0.3s;
      white-space: nowrap;
    }

    .mode-badge.ai {
      background: var(--primary-dim);
      color: var(--indigo);
      border: 1px solid var(--primary-brd);
    }

    .mode-badge.human {
      background: rgba(34, 197, 94, 0.12);
      color: var(--green);
      border: 1px solid rgba(34, 197, 94, 0.3);
    }

    .admin-reply-input {
      flex: 1;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      color: var(--text);
      font-size: 0.82rem;
      padding: 9px 12px;
      outline: none;
      resize: none;
      font-family: inherit;
      min-height: 40px;
      max-height: 120px;
      transition: border-color 0.2s;
      line-height: 1.4;
    }

    .admin-reply-input:focus {
      border-color: var(--primary);
    }

    .admin-reply-input::placeholder {
      color: var(--text-dim);
    }

    /* ══ AI KPI grid (5-col desktop, 2-col mobile) ══ */
    .aiu-kpi-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 10px;
      margin-bottom: 20px;
    }

    .aiu-tables-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px;
      margin-bottom: 20px;
    }

    /* ── Project AI Billing Analytics ── */
    .proj-analytics-card { margin-top: 14px; }
    .proj-analytics-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
    .proj-analytics-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
    .proj-analytics-kpi { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
    .proj-analytics-kpi-item { flex: 1 1 80px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
    .proj-analytics-kpi-lbl { font-size: 0.67rem; font-weight: 600; color: var(--text-sec); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
    .proj-analytics-kpi-val { font-size: 1rem; font-weight: 700; color: var(--text); line-height: 1.2; }
    .proj-analytics-chart-wrap { position: relative; height: 100px; display: flex; align-items: flex-end; gap: 2px; padding: 0 2px; }
    .proj-analytics-bar { flex: 1; background: var(--primary); border-radius: 3px 3px 0 0; opacity: .78; min-height: 2px; position: relative; cursor: default; transition: opacity .15s; }
    .proj-analytics-bar:hover { opacity: 1; }
    .proj-analytics-bar-tip { display: none; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); font-size: 0.65rem; white-space: nowrap; padding: 2px 6px; border-radius: 4px; pointer-events: none; }
    .proj-analytics-bar:hover .proj-analytics-bar-tip { display: block; }
    .proj-analytics-tbl { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
    .proj-analytics-tbl th { text-align: left; padding: 6px 10px; font-size: 0.72rem; color: var(--text-sec); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
    .proj-analytics-tbl td { padding: 6px 10px; border-bottom: 1px solid var(--border); }
    .proj-analytics-tbl tr:last-child td { border-bottom: none; }
    .proj-analytics-section-title { font-size: 0.78rem; font-weight: 700; color: var(--text-sec); text-transform: uppercase; letter-spacing: .05em; margin: 14px 0 6px; }
    .proj-analytics-empty { text-align: center; padding: 20px; color: var(--text-dim); font-size: 0.82rem; }
    .proj-analytics-error-badge { display: inline-block; background: rgba(239,68,68,.1); color: #dc2626; border-radius: 4px; padding: 1px 6px; font-size: 0.72rem; font-weight: 700; }

    /* ── AI Budget Status ── */
    .aiu-budget-card { margin-top: 14px; margin-bottom: 0; }
    .aiu-budget-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
    .aiu-budget-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
    .aiu-budget-badge.healthy  { background: rgba(16,185,129,.12); color: #059669; }
    .aiu-budget-badge.warning  { background: rgba(245,158,11,.13); color: #d97706; }
    .aiu-budget-badge.critical { background: rgba(239,68,68,.12);  color: #dc2626; }
    .aiu-budget-badge.blocked  { background: rgba(239,68,68,.2);   color: #b91c1c; }
    .aiu-budget-kpi { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
    .aiu-budget-kpi-item { flex: 1 1 90px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
    .aiu-budget-kpi-lbl { font-size: 0.68rem; font-weight: 600; color: var(--text-sec); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
    .aiu-budget-kpi-val { font-size: 1.05rem; font-weight: 700; color: var(--text); line-height: 1.2; }
    .aiu-budget-bar-wrap { position: relative; height: 8px; background: var(--border); border-radius: 99px; overflow: visible; margin-bottom: 6px; }
    .aiu-budget-bar { height: 100%; border-radius: 99px; transition: width .5s ease, background .3s; }
    .aiu-budget-bar.healthy  { background: linear-gradient(90deg,#10b981,#34d399); }
    .aiu-budget-bar.warning  { background: linear-gradient(90deg,#f59e0b,#fbbf24); }
    .aiu-budget-bar.critical { background: linear-gradient(90deg,#ef4444,#f87171); }
    .aiu-budget-bar.blocked  { background: linear-gradient(90deg,#dc2626,#ef4444); }
    .aiu-budget-bar-soft { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(0,0,0,.22); border-radius: 1px; pointer-events: none; }
    .aiu-budget-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 0.71rem; color: var(--text-dim); margin-bottom: 12px; }
    .aiu-budget-mode-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .aiu-budget-mode-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 0.71rem; font-weight: 600; color: var(--text-sec); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; }
    .aiu-budget-hint { font-size: 0.75rem; padding: 9px 13px; border-radius: 8px; line-height: 1.5; margin-top: 12px; }
    .aiu-budget-hint.warning  { background: rgba(245,158,11,.07); color: #92400e; border: 1px solid rgba(245,158,11,.2); }
    .aiu-budget-hint.critical { background: rgba(239,68,68,.06); color: #991b1b; border: 1px solid rgba(239,68,68,.18); }
    .aiu-budget-hint.blocked  { background: rgba(185,28,28,.08); color: #7f1d1d; border: 1px solid rgba(185,28,28,.22); }
    .aiu-budget-empty { text-align: center; padding: 28px 16px; }
    .aiu-budget-empty-ico { font-size: 2rem; margin-bottom: 8px; }
    .aiu-budget-empty-title { font-weight: 700; font-size: 0.88rem; margin-bottom: 5px; }
    .aiu-budget-empty-sub { font-size: 0.75rem; color: var(--text-sec); margin-bottom: 16px; line-height: 1.55; max-width: 320px; margin-left: auto; margin-right: auto; }
    @media (max-width: 600px) {
      .aiu-budget-kpi-item { flex: 1 1 calc(50% - 5px); }
      .aiu-budget-kpi-val { font-size: 0.95rem; }
      .proj-analytics-kpi-item { flex: 1 1 calc(50% - 5px); }
    }

    /* ══ MOBILE OVERLAY ══ */
    .mob-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0, 0, 0, 0.45);
      z-index: 900;
      backdrop-filter: blur(1px);
    }

    .mob-overlay.open {
      display: block;
    }

    /* ══ MOBILE HAMBURGER (hidden on desktop) ══ */
    .mob-menu-btn {
      display: none;
      background: var(--primary-dim);
      border: 1px solid var(--primary-brd);
      border-radius: 8px;
      width: 36px;
      height: 36px;
      font-size: 16px;
      cursor: pointer;
      color: var(--indigo);
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* ══ MOBILE STICKY CTA (hidden on desktop) ══ */
    .mob-cta {
      display: none;
      position: fixed;
      bottom: calc(12px + env(safe-area-inset-bottom, 0px));
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 32px);
      max-width: 400px;
      z-index: 200;
      background: var(--primary);
      color: #fff;
      border: none;
      border-radius: var(--radius-pill);
      padding: 14px 20px;
      font-size: 0.9rem;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .mob-cta:active {
      opacity: 0.88;
    }

    /* ══ MOBILE RESPONSIVE ══ */
    @media (max-width: 768px) {
      body {
        overflow: auto;
      }

      /* Hide desktop collapse on mobile */
      .sb-collapse-btn { display: none !important; }
      /* Reset collapsed state on mobile */
      .sidebar.sb-collapsed { width: 260px; min-width: unset; }
      .sidebar.sb-collapsed .sb-label { display: inline; }
      .sidebar.sb-collapsed .sb-bot-info,
      .sidebar.sb-collapsed .sb-switcher-chevron,
      .sidebar.sb-collapsed .sb-user-info,
      .sidebar.sb-collapsed .sb-user-chevron,
      .sidebar.sb-collapsed .ai-requests > div,
      .sidebar.sb-collapsed .ai-requests > span { display: revert; }
      .sidebar.sb-collapsed .nav-item { justify-content: flex-start; padding: 8px 10px; gap: 8px; }
      .sidebar.sb-collapsed .sb-bot-btn { justify-content: flex-start; padding: 11px 14px; gap: 9px; }
      .sidebar.sb-collapsed .nav-item[data-tooltip]:hover::after { display: none; }

      /* Sidebar → left drawer */
      .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 260px;
        min-width: unset;
        height: 100vh;
        flex-direction: column;
        border-right: 1px solid var(--border);
        border-top: none;
        z-index: 1000;
        overflow-y: auto;
        overflow-x: hidden;
        transform: translateX(-100%);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: none;
      }

      .sidebar.mob-open {
        transform: translateX(0);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
      }

      /* Restore vertical nav items */
      #nav-agent {
        display: block;
        padding: 0;
      }

      .nav-item {
        min-width: unset;
        min-height: 44px;
        white-space: normal;
        flex-direction: row;
        align-items: center;
        font-size: 0.8rem;
        padding: 8px 10px;
        border-radius: 8px;
        border: 1px solid transparent;
        gap: 8px;
      }

      .acc-item {
        min-height: 44px;
      }

      .nav-ico {
        font-size: 13px;
      }

      .sidebar-logo {
        display: flex !important;
      }

      .sidebar-footer {
        display: flex !important;
      }

      /* Main area — space for sticky CTA at bottom */
      .main {
        margin-left: 0;
        padding-bottom: 76px;
      }

      /* Content — tighter horizontal padding */
      .content {
        padding: 14px 10px;
      }

      /* Topbar */
      .topbar {
        padding: 10px 12px;
      }

      .topbar-title {
        font-size: 0.85rem;
      }

      /* Hamburger visible on mobile */
      .mob-menu-btn {
        display: flex;
      }

      /* Mobile sticky CTA */
      .mob-cta {
        display: flex;
      }

      /* Screen */
      .screen {
        padding: 12px;
      }

      /* Analytics: KPI grids handled in 600px query */

      .aiu-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .aiu-tables-grid {
        grid-template-columns: 1fr;
      }

      /* Hide secondary tables on mobile (collapsible) */
      .mob-collapsible {
        display: none;
      }

      /* Chats layout */
      #screen-chats>div {
        flex-direction: column;
      }

      #screen-chats>div>div:first-child {
        width: 100%;
        min-width: unset;
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid var(--border);
      }

      /* Settings */
      .settings-overlay {
        flex-direction: column;
      }

      .settings-sidebar {
        width: 100%;
        min-width: unset;
        border-right: none;
        border-bottom: 1px solid var(--border);
        max-height: 200px;
        overflow-y: auto;
      }

      /* Modals */
      .modal {
        width: 95vw !important;
        max-width: 95vw !important;
      }

      /* Misc */
      .home-hero {
        padding: 40px 16px;
      }

      .home-steps {
        grid-template-columns: 1fr;
      }

      .wz-tpl-grid {
        grid-template-columns: 1fr 1fr;
      }

      /* Search — hide on mobile (icon-only topbar) */
      .search-box {
        display: none;
      }

      /* Chat testing — full-width, hide suggestions panel */
      .chat-layout {
        flex-direction: column;
      }

      .sug-panel {
        display: none !important;
      }

      .chat-box {
        min-height: 65vh;
      }

      .bubble {
        max-width: 88%;
      }

      /* Chat messages real view */
      .msg-bubble-user,
      .msg-bubble-bot {
        max-width: 85%;
        word-break: break-word;
      }

      /* Bot switcher — truncate long names */
    }

    /* ══ TRAINER ══ */
    .btn-sm { padding: 5px 12px; font-size: 0.82rem; }