:root {
      color-scheme:dark;
      --bg:#0a0e12; --surface:#111820; --surface2:#171f28; --surface3:#1d2733;
      --border:#243040; --border-hover:#2e4058;
      --ink:#e4eaf0; --muted:#6b7f92; --dim:#394860;
      --emerald:#2dd4a0; --emerald-dim:#1a8a68; --emerald-glow:rgba(45,212,160,.12);
      --cyan:#38bdf8; --red:#f87171; --amber:#fbbf24;
      --grad-emerald:linear-gradient(135deg,#1a8a68,#2dd4a0);
      --grad-header:linear-gradient(90deg,#0a0e12 0%,#111820 100%);
      --grid-line:rgba(36,48,64,.3);
      --glass:rgba(17,24,32,.72); --glass-border:rgba(45,212,160,.08);
      --radius:10px; --radius-lg:14px;
    }
    @keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
    @keyframes pulse { 0%,100% { opacity:.6; } 50% { opacity:1; } }
    @keyframes scanLine { 0% { top:0; } 100% { top:100%; } }
    @keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
    * { box-sizing:border-box; margin:0; padding:0; }
    html,body { height:100%; }
    body {
      min-height:100dvh; display:flex; flex-direction:column;
      font:14px/1.55 'DM Sans',system-ui,sans-serif; color:var(--ink);
      background:
        radial-gradient(circle at top left, rgba(45,212,160,.08), transparent 28%),
        radial-gradient(circle at top right, rgba(56,189,248,.08), transparent 24%),
        linear-gradient(180deg, #0b0f14 0%, #091016 100%);
      -webkit-font-smoothing:antialiased;
    }
    body.app-shell { overflow:hidden; }
    ::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-track { background:transparent; } ::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px; }
    button,input,select,textarea { font:inherit; color:var(--ink); }
    button { border:1px solid var(--border); background:var(--surface2); border-radius:var(--radius); padding:9px 16px; cursor:pointer; transition:all .2s; letter-spacing:.01em; }
    button:hover { border-color:var(--border-hover); background:var(--surface3); }
    button.primary { background:var(--grad-emerald); color:#0a0e12; border-color:transparent; font-weight:600; }
    button.primary:hover { filter:brightness(1.12); box-shadow:0 0 20px var(--emerald-glow); }
    button.danger { color:var(--red); border-color:rgba(248,113,113,.25); }
    button.ghost { background:transparent; border-color:transparent; color:var(--muted); padding:8px 10px; }
    button.ghost:hover { color:var(--ink); border-color:var(--border); background:var(--surface2); }
    button.back-red { color:var(--red); font-weight:600; }
    button.back-red:hover { color:#ff6b6b; border-color:rgba(248,113,113,.3); background:rgba(248,113,113,.08); }
    input,select,textarea { border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; background:var(--surface); min-width:0; transition:border-color .2s; }
    input:focus,select:focus,textarea:focus { outline:none; border-color:var(--emerald-dim); box-shadow:0 0 0 3px var(--emerald-glow); }
    label { font-size:12px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }
    .login { min-height:100vh; display:grid; place-items:center; padding:20px; background:radial-gradient(ellipse at 50% 0%,rgba(45,212,160,.06),transparent 60%),var(--bg); }
    .login form { width:min(400px,100%); background:var(--glass); backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:var(--radius-lg); padding:32px; animation:fadeUp .5s ease-out; }
    .login h1 { margin:0 0 6px; font-size:26px; font-weight:700; background:var(--grad-emerald); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
    .login .subtitle { color:var(--muted); margin-bottom:20px; font-size:13px; }
    .field { display:grid; gap:6px; margin:14px 0; }
    .error { color:var(--red); margin-top:12px; min-height:20px; font-size:13px; }
    #app { min-height:100dvh; height:100dvh; display:grid; grid-template-rows:auto minmax(0,1fr); overflow:hidden; position:relative; }
    header {
      display:flex; align-items:center; gap:14px; padding:14px 20px;
      border-bottom:1px solid var(--border); background:var(--grad-header);
      backdrop-filter:blur(12px); position:sticky; top:0; z-index:50;
    }
    header h1 { min-width:0; font-size:17px; font-weight:700; display:flex; align-items:center; gap:8px; white-space:nowrap; flex-shrink:0; }
    header h1 .logo { width:8px; height:8px; border-radius:50%; background:var(--emerald); box-shadow:0 0 8px var(--emerald-glow); animation:pulse 2.5s infinite; }
    .nav-account-select { flex:0 0 auto; font-size:12px; padding:8px 12px; min-width:0; max-width:180px; text-overflow:ellipsis; }
    .nav-tabs {
      display:flex; gap:8px; align-items:center; justify-content:flex-start; flex:1; min-width:0;
      overflow-x:auto; padding-bottom:2px; scrollbar-width:none;
    }
    .nav-tabs::-webkit-scrollbar { display:none; }
    .nav-tabs button { white-space:nowrap; flex:0 0 auto; min-height:42px; padding-inline:16px; }
    .nav-logout { margin-left:auto; }
    .nav-tabs button.active { border-color:var(--emerald-dim); color:var(--emerald); background:var(--emerald-glow); }
    main { flex:1; min-height:0; overflow:hidden; }
    .view { display:none; height:100%; }
    .view.active { display:flex; flex-direction:column; height:100%; min-height:0; overflow:hidden; }
    .chat-shell { height:100%; display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0; padding:14px; gap:12px; overflow:hidden; }
    .chat-layout { display:grid; grid-template-columns:minmax(280px,340px) minmax(0,1fr); height:100%; min-height:0; min-width:0; gap:12px; }
    .unreplied-card {
      background:
        linear-gradient(180deg, rgba(18,25,34,.94), rgba(15,22,30,.98)),
        linear-gradient(90deg, transparent 0, transparent calc(100% - 1px), var(--grid-line) calc(100% - 1px)),
        linear-gradient(0deg, transparent 0, transparent calc(100% - 1px), var(--grid-line) calc(100% - 1px));
      background-size:auto, 28px 28px, 28px 28px;
      border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px 16px;
      box-shadow:0 18px 48px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.02);
    }
    .unreplied-card b { font-size:13px; color:var(--amber); }
    .unreplied-head { flex-wrap:wrap; align-items:center; margin-bottom:12px; }
    .unreplied-head button { white-space:nowrap; min-height:42px; }
    .unreplied-list {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:12px;
      align-content:start;
      max-height:244px;
      overflow:auto;
      padding:2px 0 4px;
    }
    .unreplied-item {
      min-width:0;
      border:1px solid rgba(48,64,84,.9); border-radius:12px; padding:14px;
      cursor:pointer; background:linear-gradient(180deg, rgba(26,35,46,.9), rgba(20,28,37,.94));
      transition:all .2s; display:grid; gap:9px; position:relative; overflow:hidden;
    }
    .unreplied-item::before {
      content:''; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg, rgba(251,191,36,.85), rgba(45,212,160,.5));
      opacity:.8;
    }
    .unreplied-item:hover { border-color:var(--emerald-dim); background:var(--surface3); transform:translateY(-1px); }
    .unreplied-item.active { border-color:rgba(45,212,160,.28); background:linear-gradient(180deg, rgba(23,46,42,.82), rgba(19,31,38,.94)); }
    .unreplied-stack { display:grid; gap:5px; min-width:0; }
    .pill {
      display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:22px;
      padding:0 8px; border-radius:999px; font-size:11px; font-weight:700;
      border:1px solid rgba(45,212,160,.22); background:rgba(45,212,160,.12); color:var(--emerald);
    }
    .pill.warn { border-color:rgba(251,191,36,.24); background:rgba(251,191,36,.12); color:var(--amber); }
    .pill.ignored { border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.06); color:var(--dim); font-size:10px; }
    .pill.done { border-color:rgba(45,212,160,.22); background:rgba(45,212,160,.1); color:var(--emerald); font-size:10px; }
    .sidebar {
      border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface);
      display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden;
      box-shadow:0 18px 48px rgba(0,0,0,.18);
    }
    .search { padding:12px; border-bottom:1px solid var(--border); background:rgba(255,255,255,.02); display:flex; gap:8px; align-items:center; }
    .search input { flex:1; background:var(--surface2); font-size:13px; min-width:0; }
    .search-btn { padding:10px 14px; font-size:12px; white-space:nowrap; flex-shrink:0; }
    .search-clear {
      display:inline-flex; align-items:center; justify-content:center;
      width:34px; height:34px; padding:0; border-radius:50%;
      border:1px solid rgba(248,113,113,.25); background:transparent;
      color:var(--red); font-size:18px; cursor:pointer; flex-shrink:0;
    }
    .search-clear:hover { background:rgba(248,113,113,.12); border-color:var(--red); }
    .new-contact-bar { padding:8px 12px; border-bottom:1px solid var(--border); }
    .new-contact-btn {
      width:100%; padding:8px 14px; font-size:12px; font-weight:600;
      border:1px dashed var(--emerald-dim); background:transparent; color:var(--emerald);
      border-radius:var(--radius); cursor:pointer; transition:all .2s;
    }
    .new-contact-btn:hover { background:var(--emerald-glow); border-style:solid; }
    .new-contact-form {
      padding:10px 12px; border-bottom:1px solid var(--border);
      background:rgba(45,212,160,.04); display:grid; gap:8px;
    }
    .new-contact-inputs { display:flex; gap:8px; }
    .new-contact-inputs .country-code { width:72px; flex-shrink:0; font-size:13px; text-align:center; }
    .new-contact-inputs .phone-number { flex:1; min-width:0; font-size:13px; }
    .new-contact-actions { display:flex; gap:8px; }
    .new-contact-actions button { flex:1; padding:8px 12px; font-size:12px; min-height:38px; }
    .new-contact-error { color:var(--red); font-size:12px; padding:4px 0; }
    .chat-list { overflow-y:auto; flex:1; min-height:0; }
    .chat-item {
      padding:13px 14px; border-bottom:1px solid rgba(36,48,64,.5); cursor:pointer;
      display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 12px; align-items:start;
      transition:background .15s, border-color .15s, box-shadow .15s;
    }
    .chat-item:hover { background:rgba(29,39,51,.88); }
    .chat-item.active {
      background:linear-gradient(180deg, rgba(18,46,43,.78), rgba(20,31,40,.96));
      border-left:3px solid var(--emerald); padding-left:11px;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    .chat-avatar {
      width:42px; height:42px; border-radius:14px; display:grid; place-items:center;
      background:linear-gradient(180deg, rgba(45,212,160,.2), rgba(56,189,248,.12));
      border:1px solid rgba(45,212,160,.18); color:var(--ink); font-size:12px; font-weight:700;
      letter-spacing:.04em;
    }
    .chat-copy { min-width:0; display:grid; gap:8px; }
    .chat-meta { display:flex; align-items:center; gap:8px; min-width:0; flex-wrap:wrap; }
    .chat-preview { color:rgba(148,163,184,.74); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; line-height:1.45; }
    .chat-stats { display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-width:0; }
    .chat-stat {
      color:var(--muted); font-size:11px; white-space:nowrap;
      padding:2px 7px; border-radius:999px; background:rgba(255,255,255,.03);
    }
    .chat-stat strong { color:var(--ink); font-weight:600; }
    .chat-item.active .chat-preview { color:rgba(226,232,240,.88); }
    .chat-item.active .name { color:var(--ink); }
    .chat-list-empty { padding:18px 14px; color:var(--muted); font-size:12.5px; }
    .row { display:flex; align-items:center; justify-content:space-between; gap:12px; }
    .name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13.5px; }
    .muted { color:var(--muted); font-size:11.5px; }
    .last { color:var(--dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12.5px; }
    .conversation {
      display:flex; flex-direction:column; min-width:0; min-height:0; height:100%;
      border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
      background:linear-gradient(180deg, rgba(18,25,34,.98), rgba(11,17,24,.99));
      box-shadow:0 18px 48px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.02);
    }
    .conv-head {
      padding:15px 18px; border-bottom:1px solid var(--border);
      background:linear-gradient(180deg, rgba(18,25,34,.98), rgba(18,25,34,.9));
      display:flex; align-items:center; justify-content:space-between; gap:12px;
      position:relative;
    }
    .conv-head-main { min-width:0; flex:1; }
    .conv-head-meta-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:2px; }
    .conv-head-actions { display:flex; align-items:center; gap:8px; flex-shrink:0; }
    .conv-head .name { font-size:15px; }
    .messages {
      flex:1; overflow-y:auto; padding:20px 20px 18px; display:flex; flex-direction:column; gap:12px; min-height:0;
      overscroll-behavior:contain; scroll-behavior:smooth;
      background:
        radial-gradient(circle at top left, rgba(45,212,160,.05), transparent 26%),
        linear-gradient(180deg, rgba(8,13,18,.08), rgba(8,13,18,0)),
        repeating-linear-gradient(0deg,transparent,transparent 40px,rgba(36,48,64,.15) 40px,rgba(36,48,64,.15) 41px);
    }
    .messages.empty { justify-content:center; align-items:center; }
    .messages-loading { display:flex; justify-content:center; align-items:center; height:100%; }
    .loading-spinner {
      width:32px; height:32px; border:3px solid var(--border);
      border-top-color:var(--emerald); border-radius:50%;
      animation:spin .7s linear infinite;
    }
    @keyframes spin { to { transform:rotate(360deg); } }
    .boot-loader {
      position:absolute; inset:0; z-index:100;
      display:flex; align-items:center; justify-content:center;
      background:var(--bg);
    }
    .boot-loader-content { text-align:center; animation:fadeUp .4s ease-out; }
    .boot-spinner { width:40px; height:40px; margin:0 auto 14px; border-width:3px; }
    .boot-text { color:var(--muted); font-size:13px; letter-spacing:.02em; }
    .conversation-empty {
      width:min(460px,100%); padding:24px; border-radius:var(--radius-lg);
      border:1px solid rgba(45,212,160,.1); background:rgba(13,20,27,.72);
      text-align:center; box-shadow:0 18px 48px rgba(0,0,0,.16);
    }
    .conversation-empty b { display:block; font-size:18px; margin-bottom:6px; }
    .conversation-empty .muted { font-size:12.5px; }
    .msg {
      max-width:min(700px,82%); padding:12px 15px; border-radius:18px 18px 18px 6px;
      background:linear-gradient(180deg, rgba(28,37,48,.95), rgba(23,31,40,.98));
      border:1px solid rgba(49,63,81,.92); animation:fadeUp .2s ease-out;
      box-shadow:0 10px 22px rgba(0,0,0,.16);
    }
    .msg.me {
      align-self:flex-end; background:linear-gradient(180deg, rgba(27,67,58,.82), rgba(21,48,45,.94));
      border-color:rgba(45,212,160,.18); border-radius:18px 18px 6px 18px;
    }
    .msg.optimistic-msg { opacity:0.7; }
    .msg .body { white-space:pre-wrap; overflow-wrap:anywhere; font-size:13.5px; line-height:1.5; }
    .msg .muted { margin-bottom:6px; font-size:11px; letter-spacing:.01em; }
    .msg-source {
      display:inline-flex; align-items:center; height:16px; padding:0 6px; margin-left:6px;
      border-radius:999px; font-size:9.5px; font-weight:700; letter-spacing:.02em; vertical-align:middle;
    }
    .msg-source.src-fixed { border:1px solid rgba(96,165,250,.28); background:rgba(96,165,250,.14); color:#60a5fa; }
    .msg-source.src-structured { border:1px solid rgba(167,139,250,.28); background:rgba(167,139,250,.14); color:#a78bfa; }
    .msg-source.src-batch { border:1px solid rgba(251,191,36,.28); background:rgba(251,191,36,.14); color:#fbbf24; }
    .msg-source.src-timer { border:1px solid rgba(56,189,248,.28); background:rgba(56,189,248,.14); color:#38bdf8; }
    .msg-deleted-badge { font-size:0.78em; padding:1px 6px; border-radius:4px; border:1px solid rgba(239,68,68,.3); background:rgba(239,68,68,.12); color:#ef4444; }
    .msg.deleted { opacity:0.55; }
    .msg.deleted .body, .msg.deleted .media-image, .msg.deleted .media-video, .msg.deleted .media-audio, .msg.deleted .media-link { text-decoration:line-through; text-decoration-color:rgba(239,68,68,.4); }
    .media-frame {
      display:inline-block; margin-top:8px; border-radius:14px; overflow:hidden;
      border:1px solid rgba(45,212,160,.18); background:rgba(255,255,255,.02);
    }
    .media-image {
      display:block; width:180px; height:120px; object-fit:cover;
      background:var(--surface3);
    }
    .media-audio {
      display:block; margin-top:8px; width:min(100%, 280px);
      height:38px; border-radius:12px;
    }
    .media-video {
      display:block; margin-top:8px; width:min(100%, 360px);
      max-height:280px; border-radius:14px; border:1px solid rgba(45,212,160,.18);
      background:var(--surface3); object-fit:contain;
    }
    .media-link {
      display:inline-flex; align-items:center; gap:8px; margin-top:8px; color:var(--cyan);
      text-decoration:none; border-bottom:1px solid transparent;
    }
    .media-link:hover { border-bottom-color:rgba(56,189,248,.35); }
    .image-modal {
      position:fixed; inset:0; z-index:200;
      display:none; align-items:center; justify-content:center;
      background:rgba(6,10,14,.85); backdrop-filter:blur(3px);
      padding:22px;
    }
    .image-modal.open { display:flex; }
    .image-modal img {
      max-width:min(92vw, 1280px); max-height:88vh;
      border-radius:14px; border:1px solid rgba(255,255,255,.18);
      box-shadow:0 30px 70px rgba(0,0,0,.45);
      object-fit:contain;
    }
    .image-modal button {
      position:absolute; top:18px; right:18px;
      min-height:36px; padding:8px 12px;
    }
    .composer {
      border-top:1px solid var(--border); padding:14px 18px; background:rgba(12,18,25,.94);
      display:grid; gap:10px;
    }
    .composer-row { display:flex; gap:10px; align-items:end; }
    .composer-row textarea {
      flex:1; min-width:0; min-height:52px; max-height:180px; resize:none;
      padding:14px 16px; border-radius:16px; line-height:1.5;
      background:linear-gradient(180deg, rgba(23,31,40,.96), rgba(17,24,32,.96));
    }
    .composer-row button.primary { min-width:90px; min-height:52px; border-radius:16px; flex-shrink:0; }
    .composer-row button.danger { min-height:52px; border-radius:16px; flex-shrink:0; }
    .composer-row .done-btn { min-height:52px; border-radius:16px; flex-shrink:0; background:transparent; border:1px solid var(--emerald-dim); color:var(--emerald); font-weight:600; transition:all .2s; }
    .composer-row .done-btn:hover { background:var(--emerald-glow); border-color:var(--emerald); box-shadow:0 0 16px var(--emerald-glow); }
    .composer-row .done-btn:disabled { opacity:.4; cursor:default; border-color:var(--border); color:var(--dim); background:transparent; box-shadow:none; }
    .composer-meta { display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; }
    .file-pill {
      display:inline-flex; align-items:center; gap:8px; border:1px dashed var(--border-hover);
      border-radius:999px; padding:9px 12px; cursor:pointer; color:var(--muted);
      background:rgba(255,255,255,.02); transition:all .2s;
    }
    .file-pill:hover { color:var(--ink); border-color:var(--emerald-dim); background:rgba(45,212,160,.06); }
    .file-queue { display:flex; flex-wrap:wrap; gap:8px; }
    .file-item {
      position:relative; display:flex; flex-direction:column; align-items:center; gap:4px;
      padding:8px 10px; border:1px solid var(--border); border-radius:10px;
      background:var(--surface2); max-width:120px; min-width:0;
    }
    .file-item img { width:80px; height:56px; object-fit:cover; border-radius:6px; }
    .file-item-name { font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100px; }
    .file-item-remove {
      position:absolute; top:-6px; right:-6px; width:20px; height:20px;
      border-radius:50%; border:1px solid var(--border); background:var(--surface);
      color:var(--red); font-size:14px; line-height:1; cursor:pointer;
      display:flex; align-items:center; justify-content:center; padding:0;
    }
    .file-item-remove:hover { background:rgba(248,113,113,.15); border-color:var(--red); }
    .stats { padding:20px 24px 32px; overflow-y:auto; height:100%; }
    .stats-range-bar { display:flex; align-items:center; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
    .stats-range-bar button { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:6px 14px; color:var(--muted); font-size:12px; cursor:pointer; transition:all .2s; font-family:inherit; }
    .stats-range-bar button:hover { border-color:var(--emerald-dim); color:var(--ink); }
    .stats-range-bar button.active { background:var(--emerald-dim); border-color:var(--emerald); color:#fff; }
    .custom-range { display:inline-flex; align-items:center; gap:6px; }
    .custom-range input[type="date"] { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:5px 8px; color:var(--ink); font-size:12px; font-family:inherit; color-scheme:dark; }
    .custom-range button { background:var(--emerald-dim); border:1px solid var(--emerald); }
    .kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:22px; animation:fadeUp .5s ease both; }
    .kpi-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px 18px; transition:all .25s; position:relative; overflow:hidden; }
    .kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--grad-emerald); opacity:0; transition:opacity .25s; }
    .kpi-card:hover { border-color:var(--emerald-dim); transform:translateY(-1px); box-shadow:0 4px 20px rgba(45,212,160,.06); }
    .kpi-card:hover::before { opacity:1; }
    .kpi-card .kpi-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:6px; display:flex; align-items:center; gap:6px; }
    .kpi-card .kpi-label .dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
    .kpi-card .kpi-value { font-size:28px; font-weight:700; font-family:'JetBrains Mono',monospace; background:var(--grad-emerald); -webkit-background-clip:text; -webkit-text-fill-color:transparent; line-height:1.2; }
    .kpi-card .kpi-sub { font-size:11px; color:var(--dim); margin-top:4px; font-family:'JetBrains Mono',monospace; }
    .kpi-card.muted-card { border-color:rgba(36,48,64,.5); }
    .kpi-card.muted-card .kpi-value { font-size:22px; background:none; -webkit-text-fill-color:var(--muted); }
    .kpi-card.muted-card:hover { border-color:var(--border-hover); transform:none; box-shadow:none; }
    .kpi-card.muted-card::before { display:none; }
    .kpi-card.warn .kpi-value { background:linear-gradient(135deg,var(--amber),#f97316); -webkit-background-clip:text; }
    .kpi-card.danger .kpi-value { background:linear-gradient(135deg,#e85d5d,var(--red)); -webkit-background-clip:text; }
    .stats-mid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:22px; animation:fadeUp .5s ease .1s both; }
    .stats-section { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px; }
    .section-title { font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; margin-bottom:16px; }
    .donut-wrap { display:flex; align-items:center; gap:28px; }
    .donut-svg { flex-shrink:0; }
    .donut-center { text-anchor:middle; dominant-baseline:central; }
    .donut-center-value { font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:700; fill:var(--ink); }
    .donut-center-label { font-family:'DM Sans',sans-serif; font-size:10px; fill:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
    .donut-segment { transition:opacity .2s; cursor:pointer; }
    .donut-segment:hover { opacity:.8; filter:drop-shadow(0 0 6px currentColor); }
    .legend-list { display:flex; flex-direction:column; gap:10px; flex:1; min-width:0; }
    .legend-item { display:flex; align-items:center; gap:10px; font-size:13px; }
    .legend-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
    .legend-name { flex:1; min-width:0; color:var(--ink); }
    .legend-count { font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--ink); font-size:13px; }
    .legend-pct { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); width:42px; text-align:right; }
    .efficiency-grid { display:flex; flex-direction:column; gap:18px; }
    .eff-row { display:flex; align-items:center; gap:24px; }
    .eff-bars { flex:1; }
    .eff-ring-wrap { flex-shrink:0; text-align:center; }
    .bar-item { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .bar-label { font-size:12px; color:var(--muted); width:72px; flex-shrink:0; }
    .bar-track { flex:1; height:22px; background:var(--surface2); border-radius:4px; overflow:hidden; position:relative; }
    .bar-fill { height:100%; border-radius:4px; transition:width .6s ease; display:flex; align-items:center; padding-left:8px; }
    .bar-fill span { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; color:rgba(0,0,0,.7); }
    .ring-label { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:8px; }
    .ring-value { font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; }
    .table-section { animation:fadeUp .5s ease .2s both; margin-bottom:18px; }
    .table-filters { display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
    .table-filters button { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:5px 14px; color:var(--muted); font-size:11px; font-weight:600; cursor:pointer; transition:all .2s; font-family:inherit; text-transform:uppercase; letter-spacing:.04em; }
    .table-filters button:hover { border-color:var(--border-hover); color:var(--ink); }
    .table-filters button.active { color:#fff; }
    .table-filters button.active[data-filter="all"] { background:var(--emerald-dim); border-color:var(--emerald); }
    .table-filters button.active[data-filter="Retail"] { background:rgba(45,212,160,.2); border-color:var(--emerald); color:var(--emerald); }
    .table-filters button.active[data-filter="Installer"] { background:rgba(56,189,248,.2); border-color:var(--cyan); color:var(--cyan); }
    .table-filters button.active[data-filter="Distributor"] { background:rgba(168,85,247,.2); border-color:#a855f7; color:#a855f7; }
    .table-filters button.active[data-filter="Supplier"] { background:rgba(244,114,182,.2); border-color:#f472b6; color:#f472b6; }
    .table-filters button.active[data-filter="Ads"] { background:rgba(251,191,36,.2); border-color:var(--amber); color:var(--amber); }
    .table-filters button.active[data-filter="Ungrouped"] { background:rgba(57,72,96,.3); border-color:var(--dim); color:var(--muted); }
    .unreplied-badge { display:inline-flex; align-items:center; justify-content:center; background:rgba(248,113,113,.15); color:var(--red); border-radius:4px; padding:1px 6px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:600; }
    .excluded-footer { display:flex; align-items:center; justify-content:center; gap:20px; padding:14px; border-top:1px solid rgba(36,48,64,.4); color:var(--dim); font-size:12px; animation:fadeUp .5s ease .3s both; }
    .excluded-footer .ef-item { display:flex; align-items:center; gap:6px; }
    .excluded-footer .ef-dot { width:6px; height:6px; border-radius:50%; display:inline-block; }
    .excluded-footer .ef-count { font-family:'JetBrains Mono',monospace; font-weight:600; color:var(--muted); }
    .panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px; min-width:0; }
    .table-shell { overflow:auto; border-radius:var(--radius-lg); border:1px solid var(--border); }
    table { width:100%; min-width:900px; border-collapse:collapse; background:var(--surface); }
    th,td { text-align:left; padding:10px 12px; border-bottom:1px solid rgba(36,48,64,.5); vertical-align:middle; font-size:12.5px; }
    th { color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; background:var(--surface2); cursor:pointer; user-select:none; white-space:nowrap; transition:color .2s; }
    th:hover { color:var(--ink); }
    th .sort-arrow { font-size:10px; margin-left:4px; opacity:.4; }
    th.sorted .sort-arrow { opacity:1; color:var(--emerald); }
    td.mono { font-family:'JetBrains Mono',monospace; font-size:12px; }
    tr:hover td { background:rgba(45,212,160,.03); }
    .reports-shell,.automation-grid { display:grid; gap:16px; height:100%; padding:18px; overflow:hidden; }
    .reports-shell { grid-template-columns:minmax(260px,320px) minmax(0,1fr); }
    .automation-grid { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; overflow:auto; }
    .ar-header { display:flex; align-items:center; gap:10px; }
    .ar-pill-on { background:rgba(45,212,160,.15); color:var(--emerald); }
    .ar-pill-off { background:var(--surface2); color:var(--muted); }
    .ar-mode-bar,.ar-dur-bar,.bc-tab-bar { display:flex; gap:6px; flex-wrap:wrap; }
    .ar-mode-btn,.ar-dur-btn,.bc-tab-btn { padding:6px 14px; font-size:12px; border-radius:999px; background:var(--surface2); border:1px solid var(--border); color:var(--muted); cursor:pointer; transition:all .2s; white-space:nowrap; }
    .ar-mode-btn:hover,.ar-dur-btn:hover,.bc-tab-btn:hover { border-color:var(--border-hover); color:var(--ink); }
    .ar-mode-btn.active,.ar-dur-btn.active,.bc-tab-btn.active { background:rgba(45,212,160,.1); border-color:var(--emerald-dim); color:var(--emerald); }
    .ar-chat-toggle { display:inline-flex; align-items:center; gap:6px; cursor:pointer; user-select:none; border:none; background:none; padding:4px 0; }
    .ar-chat-slider { width:34px; height:18px; border-radius:9px; background:var(--dim); position:relative; transition:background .2s; flex-shrink:0; }
    .ar-chat-slider::after { content:''; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform .2s; }
    .ar-chat-toggle.on .ar-chat-slider { background:var(--emerald); }
    .ar-chat-toggle.on .ar-chat-slider::after { transform:translateX(16px); }
    .ar-chat-label { font-size:11px; color:var(--muted); white-space:nowrap; }
    .ar-actions { display:flex; gap:8px; }
    .ar-limit-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .ar-limit-row input { width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:8px 12px; color:var(--ink); font-size:13px; }
    .ar-status-bar { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:var(--surface2); border-radius:var(--radius); font-size:12px; }
    .ar-log-list { display:flex; flex-direction:column; gap:6px; max-height:240px; overflow-y:auto; }
    .ar-log-item { padding:8px 10px; background:var(--surface2); border-radius:var(--radius); font-size:12px; }
    .ar-log-name { font-weight:500; color:var(--ink); margin-bottom:2px; }
    .ar-log-preview { font-size:11px; line-height:1.4; }
    .ar-log-meta { font-size:10px; margin-top:2px; }
    .bc-group-checks { display:flex; flex-wrap:wrap; gap:8px; }
    .bc-check { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink); cursor:pointer; }
    .bc-check input[type="checkbox"] { accent-color:var(--emerald); }
    .bc-job-item { padding:8px 10px; background:var(--surface2); border-radius:var(--radius); margin-bottom:4px; }
    .bc-job-row { display:flex; justify-content:space-between; align-items:center; }
    .bc-job-status { font-size:12px; font-weight:500; }
    .bc-job-done .bc-job-status { color:var(--emerald); }
    .bc-job-running .bc-job-status { color:var(--cyan); }
    .bc-job-err .bc-job-status { color:var(--red); }
    .reports-controls { display:flex; flex-direction:column; gap:16px; overflow-y:auto; align-self:stretch; max-height:100%; }
    .reports-controls-title { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink); }
    .rpt-icon { color:var(--emerald); flex-shrink:0; }
    .reports-period-bar { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
    .rpt-period-btn { padding:5px 12px; font-size:12px; border-radius:999px; background:var(--surface2); border:1px solid var(--border); color:var(--muted); cursor:pointer; transition:all .2s; white-space:nowrap; }
    .rpt-period-btn:hover { border-color:var(--border-hover); color:var(--ink); }
    .rpt-period-btn.active { background:var(--emerald-dim); border-color:var(--emerald); color:#fff; }
    .reports-custom-range { display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap; }
    .reports-custom-range input[type="date"] { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:6px 10px; color:var(--ink); font-size:12px; font-family:inherit; color-scheme:dark; flex:1; min-width:120px; }
    .reports-range-sep { color:var(--dim); font-size:12px; flex-shrink:0; }
    .field-optional { font-size:10px; color:var(--dim); text-transform:none; letter-spacing:0; font-weight:400; margin-left:4px; }
    .reports-format-toggle { display:flex; gap:6px; margin-top:4px; }
    .rpt-fmt-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 14px; font-size:12px; font-weight:500; border-radius:var(--radius); background:var(--surface2); border:1px solid var(--border); color:var(--muted); cursor:pointer; transition:all .2s; flex:1; justify-content:center; }
    .rpt-fmt-btn:hover { border-color:var(--border-hover); color:var(--ink); }
    .rpt-fmt-btn.active { background:rgba(45,212,160,.1); border-color:var(--emerald-dim); color:var(--emerald); }
    .reports-actions { display:flex; flex-direction:column; gap:8px; }
    .reports-generate-btn { display:flex; align-items:center; justify-content:center; gap:8px; min-height:42px; }
    @keyframes spin { to { transform:rotate(360deg); } }
    .reports-generate-btn.loading .rpt-btn-icon { animation:spin .7s linear infinite; }
    .rpt-btn-icon { flex-shrink:0; }
    .reports-export-btn { display:flex; align-items:center; justify-content:center; gap:8px; min-height:38px; font-size:12px; border:1px dashed var(--border-hover); border-radius:var(--radius); background:transparent; color:var(--muted); cursor:pointer; transition:all .2s; }
    .reports-export-btn:hover { border-color:var(--cyan); color:var(--cyan); background:rgba(56,189,248,.06); }
    .reports-status { font-size:12px; color:var(--muted); min-height:18px; line-height:1.5; }
    .reports-status.error { color:var(--red); }
    .reports-status.ok { color:var(--emerald); }
    .reports-history-section { border-top:1px solid var(--border); padding-top:12px; margin-top:4px; display:flex; flex-direction:column; flex-shrink:0; }
    .reports-history-title { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:8px; flex-shrink:0; }
    .reports-history-title svg { color:var(--dim); }
    .reports-history-list { display:flex; flex-direction:column; gap:4px; min-height:60px; }
    .rpt-history-item { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:var(--radius); background:var(--surface2); border:1px solid transparent; cursor:pointer; transition:all .15s; font-size:12px; }
    .rpt-history-item:hover { border-color:var(--border-hover); background:var(--surface3); }
    .rpt-history-item.active { border-color:var(--emerald-dim); background:rgba(45,212,160,.08); }
    .rpt-history-info { flex:1; min-width:0; }
    .rpt-history-period { color:var(--ink); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .rpt-history-time { color:var(--dim); font-size:11px; margin-top:2px; }
    .rpt-history-actions { display:flex; gap:4px; flex-shrink:0; }
    .rpt-history-btn { padding:4px 6px; border:none; background:transparent; color:var(--dim); cursor:pointer; border-radius:var(--radius-sm); transition:all .15s; }
    .rpt-history-btn:hover { color:var(--emerald); background:rgba(45,212,160,.1); }
    .rpt-history-btn svg { display:block; }
    .rpt-type-badge { display:inline-flex; padding:1px 5px; border-radius:4px; font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; margin-right:4px; }
    .rpt-type-badge.report { background:rgba(45,212,160,.15); color:var(--emerald); }
    .rpt-type-badge.export { background:rgba(56,189,248,.15); color:var(--cyan); }
    .reports-output-wrap { display:flex; flex-direction:column; min-height:0; height:100%; overflow:hidden; padding:0; }
    .reports-output-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:100%; color:var(--dim); font-size:13px; text-align:center; padding:32px; }
    .reports-output-empty .muted { font-size:12px; }
    .reports-frame { flex:1; width:100%; height:100%; border:none; border-radius:var(--radius-lg); background:var(--bg); display:block; }
    pre.qr { display:block; max-width:100%; background:var(--surface); color:var(--emerald); padding:16px; border-radius:var(--radius-lg); overflow:auto; font:11px/1.15 'JetBrains Mono',monospace; border:1px solid var(--border); position:relative; white-space:pre; }
    .auth-panel { text-align:center; overflow:hidden; }
    .auth-panel .status-bar { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:20px; font-size:12px; margin:10px 0 14px; }
    .auth-panel .status-bar.ok { background:rgba(45,212,160,.1); color:var(--emerald); border:1px solid rgba(45,212,160,.2); }
    .auth-panel .status-bar.err { background:rgba(248,113,113,.1); color:var(--red); border:1px solid rgba(248,113,113,.2); }
    .auth-panel .status-bar.pending { background:rgba(251,191,36,.1); color:var(--amber); border:1px solid rgba(251,191,36,.2); }
    .auth-hint { max-width:560px; margin:10px auto; padding:12px 16px; border-radius:var(--radius); background:rgba(248,113,113,.08); border:1px solid rgba(248,113,113,.15); color:var(--red); font-size:12px; font-family:'JetBrains Mono',monospace; text-align:left; word-break:break-all; }
    .qr-wrap { position:relative; display:block; width:max-content; max-width:100%; margin:12px auto; }
    .qr-wrap::after { content:''; position:absolute; left:0; right:0; height:2px; background:var(--emerald); box-shadow:0 0 12px var(--emerald); animation:scanLine 2.5s linear infinite; pointer-events:none; }
    .stack { display:grid; gap:14px; }
    .mobile-only { display:none; }
    .group-pill {
      display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:999px;
      font-size:11px; font-weight:600; cursor:pointer; transition:all .2s;
      border:1px solid var(--border); background:var(--surface2); color:var(--muted);
      text-transform:uppercase; letter-spacing:.04em;
    }
    .group-pill:hover { border-color:var(--emerald-dim); color:var(--ink); }
    .group-pill[data-group="Retail"] { border-color:rgba(45,212,160,.3); background:rgba(45,212,160,.1); color:var(--emerald); }
    .group-pill[data-group="Installer"] { border-color:rgba(56,189,248,.3); background:rgba(56,189,248,.1); color:var(--cyan); }
    .group-pill[data-group="Distributor"] { border-color:rgba(168,85,247,.3); background:rgba(168,85,247,.1); color:#a855f7; }
    .group-pill[data-group="Supplier"] { border-color:rgba(244,114,182,.3); background:rgba(244,114,182,.1); color:#f472b6; }
    .group-pill[data-group="Ads"] { border-color:rgba(251,191,36,.3); background:rgba(251,191,36,.1); color:var(--amber); }
    .group-pill[data-group="Spam"] { border-color:rgba(248,113,113,.3); background:rgba(248,113,113,.1); color:var(--red); }
    .group-pill-sm {
      display:inline-flex; padding:1px 6px; border-radius:999px; font-size:10px; font-weight:600;
      text-transform:uppercase; letter-spacing:.03em; line-height:1.4;
    }
    .group-pill-sm[data-group="Retail"] { background:rgba(45,212,160,.12); color:var(--emerald); }
    .group-pill-sm[data-group="Installer"] { background:rgba(56,189,248,.12); color:var(--cyan); }
    .group-pill-sm[data-group="Distributor"] { background:rgba(168,85,247,.12); color:#a855f7; }
    .group-pill-sm[data-group="Supplier"] { background:rgba(244,114,182,.12); color:#f472b6; }
    .group-pill-sm[data-group="Ads"] { background:rgba(251,191,36,.12); color:var(--amber); }
    .group-pill-sm[data-group="Spam"] { background:rgba(248,113,113,.12); color:var(--red); }
    .group-dropdown {
      display:flex; gap:6px; padding:10px 14px; flex-wrap:wrap;
      background:var(--surface); border-bottom:1px solid var(--border);
    }
    .group-dropdown button {
      padding:6px 12px; font-size:11px; font-weight:600; border-radius:999px;
      text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
    }
    .spam-section {
      border-top:1px solid rgba(248,113,113,.15); background:rgba(248,113,113,.03);
    }
    .spam-toggle {
      display:flex; align-items:center; gap:8px; padding:10px 14px;
      cursor:pointer; color:var(--red); font-size:12px; font-weight:600;
      border:none; background:transparent; width:100%; text-align:left;
    }
    .spam-toggle:hover { background:rgba(248,113,113,.06); }
    .spam-toggle .arrow { transition:transform .2s; display:inline-block; }
    .spam-toggle .arrow.open { transform:rotate(90deg); }
    .spam-list { display:none; }
    .spam-list.open { display:block; }
    .media-panel {
      border-bottom:1px solid var(--border); background:var(--surface);
      max-height:50vh; overflow-y:auto; animation:fadeUp .2s ease-out;
    }
    .media-panel-head {
      display:flex; align-items:center; justify-content:space-between;
      padding:12px 18px; border-bottom:1px solid var(--border);
      position:sticky; top:0; background:var(--surface); z-index:2;
    }
    .media-panel-head b { font-size:13px; }
    .media-close-btn {
      color:var(--red); font-size:22px; line-height:1; padding:4px 8px;
      border:1px solid rgba(248,113,113,.25); border-radius:50%;
      width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center;
    }
    .media-close-btn:hover { background:rgba(248,113,113,.12); border-color:var(--red); }
    .media-grid {
      display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
      gap:10px; padding:14px 18px;
    }
    .media-card {
      position:relative; border:1px solid var(--border); border-radius:10px;
      overflow:hidden; background:var(--surface2); transition:border-color .2s;
    }
    .media-card:hover { border-color:var(--emerald-dim); }
    .media-card img {
      display:block; width:100%; height:90px; object-fit:cover; cursor:pointer;
      background:var(--surface3);
    }
    .media-card-info {
      padding:6px 8px; font-size:11px; color:var(--muted);
      overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    }
    .media-card-actions {
      display:flex; gap:4px; padding:4px 8px 8px;
    }
    .media-card-actions a, .media-card-actions button {
      font-size:10px; padding:3px 8px; border-radius:6px; text-decoration:none;
    }
    .media-card-actions a { color:var(--cyan); border:1px solid rgba(56,189,248,.2); background:transparent; }
    .media-card-actions a:hover { background:rgba(56,189,248,.08); }
    .media-card-delete {
      color:var(--red); border:1px solid rgba(248,113,113,.2); background:transparent;
      cursor:pointer; font-size:10px; padding:3px 8px; border-radius:6px;
    }
    .media-card-delete:hover { background:rgba(248,113,113,.08); }
    .media-card-file {
      display:flex; flex-direction:column; align-items:center; justify-content:center;
      height:90px; background:var(--surface3); color:var(--muted); font-size:24px; cursor:pointer;
    }
    .media-card-file span { font-size:10px; margin-top:4px; text-transform:uppercase; }
    .media-card-video {
      display:block; width:100%; height:90px; object-fit:cover;
      background:var(--surface3); border-radius:0;
    }
    .media-card-play {
      position:absolute; top:28px; left:50%; transform:translateX(-50%);
      width:32px; height:32px; border-radius:50%;
      background:rgba(0,0,0,.55); color:#fff; font-size:14px;
      display:flex; align-items:center; justify-content:center;
      pointer-events:none; backdrop-filter:blur(4px);
      border:1px solid rgba(255,255,255,.2);
    }
    @media (max-width: 820px) {
      html { overflow-x:hidden; }
      body { overflow-x:hidden; }
      #app { min-height:100dvh; height:100dvh; width:100%; max-width:100vw; grid-template-columns:minmax(0,1fr); overflow:hidden; }
      body.app-shell { overflow:hidden; }
      main { overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch; width:100%; }
      .view.active { height:auto; min-height:100%; overflow-x:hidden; overflow-y:visible; width:100%; max-width:100%; }
      header {
        flex-wrap:wrap; padding:12px 14px; gap:8px;
        position:sticky; top:0; z-index:50;
      }
      header h1 { flex:0 0 auto; min-width:0; }
      .nav-account-select { order:1; max-width:140px; padding:6px 10px; font-size:11px; }
      .nav-tabs {
        order:2; flex:1 0 100%;
        justify-content:flex-start;
        min-height:38px;
        padding:2px 0 4px;
        gap:6px;
        max-width:100%;
      }
      .nav-tabs button { padding-inline:12px; min-height:38px; font-size:13px; }
      .nav-logout {
        order:0; margin-left:auto;
        min-height:36px; padding:8px 12px;
        white-space:nowrap; font-size:12px;
      }
      .chat-shell { padding:0; overflow:hidden; height:100%; width:100%; }
      .chat-layout { grid-template-columns:minmax(0,1fr); gap:0; height:100%; width:100%; }
      .sidebar { border-radius:0; border-left:0; border-right:0; }
      .conversation { border-radius:0; border-left:0; border-right:0; }
      #chat:not(.chat-selected) .conversation { display:none; }
      #chat.chat-selected .sidebar { display:none; }
      #chat.chat-selected .conversation { display:flex; height:calc(100dvh - 110px); }
      #chat:not(.chat-selected) .sidebar { height:calc(100dvh - 110px); }
      #unreplied:not(.chat-selected) .conversation { display:none; }
      #unreplied.chat-selected .sidebar { display:none; }
      #unreplied.chat-selected .conversation { display:flex; height:calc(100dvh - 110px); }
      #unreplied:not(.chat-selected) .sidebar { height:calc(100dvh - 110px); }
      .unreplied-list { grid-template-columns:1fr; max-height:none; }
      .conv-head { padding:10px 12px; flex-direction:column; align-items:stretch; gap:8px; }
      .conv-head-main { flex:none; min-width:0; padding-right:84px; }
      .conv-head .name { font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .conv-head-meta-row { gap:6px; margin-top:2px; }
      .conv-head-meta-row .muted { font-size:10.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
      .conv-head-actions {
        flex-wrap:wrap; gap:6px; font-size:12px;
      }
      .conv-head-actions > * { font-size:12px; }
      .conv-head-actions .ghost { padding:5px 10px; min-height:30px; font-size:12px; }
      .conv-head-actions .back-red {
        position:absolute;
        top:10px;
        right:12px;
        z-index:1;
      }
      .conv-head-actions .ar-chat-toggle { gap:5px; }
      .conv-head-actions .ar-chat-label { font-size:12px; }
      .conv-head-actions .ar-chat-slider { width:30px; height:16px; }
      .conv-head-actions .ar-chat-slider::after { width:12px; height:12px; }
      .conv-head-actions .ar-chat-toggle.on .ar-chat-slider::after { transform:translateX(14px); }
      .messages { padding:12px; gap:10px; }
      .composer { padding:10px 12px; }
      .composer-row { flex-wrap:nowrap; gap:8px; }
      .composer-row textarea { min-height:44px; padding:10px 14px; border-radius:14px; }
      .composer-row button.primary { min-width:64px; min-height:44px; border-radius:14px; padding:10px 14px; font-size:13px; }
      .composer-row button.danger { min-height:44px; border-radius:14px; padding:10px 12px; font-size:12px; }
      .composer-row .done-btn { min-height:44px; border-radius:14px; padding:10px 12px; font-size:12px; }
      .composer-meta { flex-direction:row; align-items:center; flex-wrap:wrap; gap:8px; }
      .reports-shell { grid-template-columns:1fr; padding:12px; gap:12px; height:auto; overflow:auto; }
      .reports-output-wrap { height:60vh; min-height:280px; }
      .automation-grid { grid-template-columns:1fr; padding:12px; gap:12px; height:auto; overflow:auto; align-items:stretch; }
      .stats { padding:12px; overflow:auto; height:auto; }
      .stats-range-bar { gap:6px; }
      .stats-range-bar button { padding:6px 10px; font-size:11px; }
      .kpi-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
      .kpi-card .kpi-value { font-size:22px; }
      .stats-mid { grid-template-columns:1fr; }
      .donut-wrap { flex-direction:column; align-items:flex-start; }
      .eff-row { flex-direction:column; }
      .panel { padding:14px; }
      .table-shell { -webkit-overflow-scrolling:touch; }
      .auth-panel h2 { font-size:16px !important; }
      .auth-panel .status-bar { max-width:100%; justify-content:center; white-space:normal; text-align:center; }
      .auth-hint { max-width:100%; font-size:11px; }
      pre.qr {
        max-width:min(100%, calc(100vw - 52px));
        padding:12px;
        font-size:clamp(5px, 1.55vw, 11px);
        line-height:1.08;
      }
      .mobile-only { display:inline-flex; }
      .image-modal img { max-width:96vw; max-height:80vh; border-radius:10px; }
      .image-modal button { top:12px; right:12px; }
    }
    @media (max-width: 560px) {
      header { gap:6px; padding:10px 12px; }
      header h1 { font-size:14px; gap:6px; }
      .nav-account-select { max-width:110px; font-size:10px; }
      .nav-tabs button { padding-inline:10px; min-height:34px; font-size:12px; }
      .nav-logout { padding:6px 10px; font-size:11px; min-height:34px; }
      #chat.chat-selected .conversation,
      #unreplied.chat-selected .conversation { height:calc(100dvh - 96px); }
      #chat:not(.chat-selected) .sidebar,
      #unreplied:not(.chat-selected) .sidebar { height:calc(100dvh - 96px); }
      .kpi-grid { grid-template-columns:1fr; }
      .kpi-card .kpi-value { font-size:20px; }
      .unreplied-card { padding:10px; }
      .unreplied-head { align-items:flex-start; flex-direction:column; gap:8px; }
      .unreplied-head button { width:100%; }
      .chat-item { padding:10px 12px; gap:0 10px; }
      .chat-avatar { width:36px; height:36px; border-radius:10px; font-size:11px; }
      .chat-meta { gap:6px; }
      .msg { max-width:92%; padding:10px 13px; }
      .msg .body { font-size:12.5px; line-height:1.45; }
      .msg .muted { font-size:10px; }
      .conv-head .name { font-size:13.5px; }
      .conv-head-actions .ghost { padding:4px 8px; min-height:28px; font-size:11px; }
      .conv-head-actions .ar-chat-label { display:none; }
      .composer-row textarea { font-size:14px; }
      .search input { font-size:14px; }
      .custom-range { flex-wrap:wrap; }
      .custom-range input[type="date"] { font-size:11px; padding:4px 6px; }
    }
    @media (max-width: 380px) {
      header h1 .logo + span,
      header h1 { font-size:13px; }
      .nav-tabs button { padding-inline:8px; font-size:11px; min-height:32px; }
      .nav-account-select { max-width:90px; }
      .composer-row button.primary { min-width:56px; font-size:12px; }
      .search-btn { padding:8px 10px; font-size:11px; }
      .conv-head .name { font-size:13px; }
      .conv-head-actions .ghost { padding:4px 6px; min-height:26px; font-size:10px; }
      .msg .body { font-size:12px; }
      .msg { padding:8px 11px; }
    }
    @supports (padding: env(safe-area-inset-bottom)) {
      .composer { padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
      @media (max-width: 820px) {
        .composer { padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
      }
    }
    .read-ticks { font-size:0.85em; color:var(--muted); letter-spacing:-2px; }
    .read-ticks.read { color:#53bdeb; }