:root{
    --blue-900:#1e3a8a; --blue-700:#1d4ed8; --blue-600:#2563eb; --blue-500:#3b82f6; --blue-50:#eef4ff;
    --ink:#0f172a; --muted:#26303f; --faint:#46566c; --line:#e7ecf4; --bg:#eef2f8; --panel:#ffffff;
    --tint:#f5f8ff; --grad:linear-gradient(135deg,#1e3a8a,#2563eb);
    --sh-sm:0 1px 2px rgba(15,23,42,.06); --sh-md:0 6px 20px rgba(15,23,42,.10);
    --sh-lg:0 18px 50px rgba(15,23,42,.18);
    --sans:'Plus Jakarta Sans',-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  *{box-sizing:border-box;margin:0;padding:0;font-family:var(--sans)}
  body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  .grad{background:var(--grad)}
  .hide{display:none!important}
  .mono{font-family:var(--mono)}
  ::-webkit-scrollbar{width:9px;height:9px}
  ::-webkit-scrollbar-thumb{background:#cfdaeb;border-radius:9px;border:2px solid transparent;background-clip:padding-box}
  ::-webkit-scrollbar-thumb:hover{background:#b6c5dc;background-clip:padding-box}
  @media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

  /* ============ LOGIN ============ */
  .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;
    background:radial-gradient(1100px 520px at 50% -8%, #d7e6ff 0%, var(--bg) 58%)}
  .card{background:#fff;border-radius:22px;box-shadow:var(--sh-lg)}
  .login{width:392px;max-width:100%;padding:38px}
  .brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .brand .logo{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;box-shadow:0 6px 16px rgba(37,99,235,.35)}
  .brand h1{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
  .brand h1 span{color:var(--ink)}
  .login .tag{color:var(--muted);font-size:13.5px;margin:0 0 26px 54px}
  label.lbl{font-size:12px;color:var(--muted);font-weight:600;display:block;margin:0 0 6px 2px}
  input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;font-size:14px;outline:none;background:#fff;transition:border .15s,box-shadow .15s;color:var(--ink)}
  input::placeholder{color:#b3bfd0}
  input:focus{border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(37,99,235,.14)}
  .login input{margin-bottom:16px}
  .btn{width:100%;padding:13px;border:none;border-radius:12px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;transition:filter .15s,transform .05s,box-shadow .15s;box-shadow:0 6px 16px rgba(37,99,235,.28)}
  .btn:hover{filter:brightness(1.05)}.btn:active{transform:translateY(1px)}
  .err{color:#b91c1c;font-size:13px;margin-bottom:14px;background:#fef2f2;border:1px solid #fecaca;padding:9px 12px;border-radius:10px}

  /* ============ APP SHELL ============ */
  .app{position:relative;display:grid;grid-template-rows:60px 1fr;height:100vh;overflow:hidden;padding-left:60px}

  /* ===== shared left navigation rail (all pages) ===== */
  .rail{position:fixed;left:0;top:0;bottom:0;width:60px;background:var(--grad);display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:6px;z-index:60}
  .rail .r-logo{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.2);display:grid;place-items:center;color:#fff;font-weight:800;font-size:17px;margin-bottom:10px;text-decoration:none}
  .rail a.r-item{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;color:rgba(255,255,255,.78);text-decoration:none;transition:.15s;position:relative}
  .rail a.r-item:hover{background:rgba(255,255,255,.16);color:#fff}
  .rail a.r-item.active{background:rgba(255,255,255,.28);color:#fff}
  .rail a.r-item svg{width:21px;height:21px}
  .rail a.r-item .tip{position:absolute;left:52px;top:50%;transform:translateY(-50%);background:#0f172a;color:#fff;font-size:11.5px;font-weight:700;padding:5px 9px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:.12s;z-index:5}
  .rail a.r-item:hover .tip{opacity:1}
  .rail .r-sp{flex:1}
  .rail .r-admin{display:none}
  body.role-admin .rail .r-admin{display:grid}
  .suggest-chips{display:flex;gap:8px;flex-wrap:wrap;padding:8px 14px 0;align-items:center}
  .suggest-chips .lbl{font-size:11px;font-weight:800;color:var(--faint);text-transform:uppercase;letter-spacing:.04em}
  .schip{border:1px solid var(--blue-50);background:var(--tint);color:var(--blue-700);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:18px;cursor:pointer;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:.12s}
  .schip:hover{background:var(--blue-50);border-color:var(--blue-500)}
  body.dark .schip{background:#16223a;border-color:#26406e;color:#9bc0ff}
  @media (max-width:680px){ .rail{width:52px} .app{padding-left:52px} }
  /* top app bar */
  .appbar{display:flex;align-items:center;gap:16px;padding:0 18px;background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-sm);z-index:20}
  .appbar .ab-brand{display:flex;align-items:center;gap:11px;flex:0 0 auto;width:252px}
  .appbar .ab-brand .logo{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:16px;box-shadow:0 4px 12px rgba(37,99,235,.32)}
  .appbar .ab-brand .wm{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
  .appbar .ab-brand .wm span{color:var(--ink)}
  .gsearch{flex:1;max-width:560px;display:flex;align-items:center;gap:10px;background:#eef2f8;border:1px solid transparent;border-radius:999px;padding:10px 18px;transition:.18s}
  .gsearch:focus-within{background:#fff;border-color:#d6e0f0;box-shadow:0 4px 16px rgba(15,23,42,.08)}
  .gsearch svg{color:var(--faint);flex:0 0 auto}
  .gsearch input{border:none;background:transparent;padding:0;font-size:14px}
  .gsearch input:focus{box-shadow:none}
  .ab-right{flex:0 0 auto;margin-left:auto;display:flex;align-items:center;gap:10px}
  .iconbtn{background:#eef2f8;border:none;color:#41506a;padding:9px 13px;border-radius:10px;cursor:pointer;font-size:13px;font-weight:600;display:inline-flex;gap:7px;align-items:center;transition:.15s}
  .iconbtn:hover{background:#e2e9f4;color:var(--ink)}
  .ab-div{width:1px;height:26px;background:var(--line)}
  .profile{display:flex;align-items:center;gap:9px}
  .profile small{font-size:13px;font-weight:700}
  .ghost{background:none;border:none;color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;padding:8px 10px;border-radius:9px}
  .ghost:hover{background:#f1f5fb;color:var(--ink)}

  .panes{display:grid;grid-template-columns:330px 1fr 296px;min-height:0;height:100%}
  .col{background:var(--panel);display:flex;flex-direction:column;overflow:hidden;min-width:0;min-height:0}
  .col.left{border-right:1px solid var(--line)}
  .col.right{border-left:1px solid var(--line);background:#fbfcfe}

  /* avatars */
  .av{border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;flex:0 0 auto;text-transform:uppercase;letter-spacing:.02em}
  .av.sm{width:44px;height:44px;font-size:15px}
  .av.md{width:34px;height:34px;font-size:13px}
  .av.lg{width:72px;height:72px;font-size:26px;box-shadow:0 8px 22px rgba(15,23,42,.16)}
  .av.xs{width:30px;height:30px;font-size:12px}

  /* segmented tabs */
  .inbox-tabs{display:flex;gap:5px;padding:12px 14px 8px;background:#fff}
  .inbox-tabs button{flex:1;border:none;cursor:pointer;background:#eef2f8;color:#5b6b86;font-weight:700;font-size:13px;padding:10px;border-radius:11px;display:flex;align-items:center;justify-content:center;gap:7px;transition:.16s}
  .inbox-tabs button:hover{background:#e3eaf5}
  .inbox-tabs button.active{background:var(--grad);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.28)}
  .inbox-tabs button:hover.active{filter:brightness(1.04)}
  .inbox-tabs button .cnt{font-size:11px;font-weight:700;background:rgba(15,23,42,.10);padding:1px 8px;border-radius:20px;min-width:20px}
  .inbox-tabs button.active .cnt{background:rgba(255,255,255,.26)}

  /* conversation list */
  .convs{overflow-y:auto;flex:1;padding:4px 8px 12px}
  .conv{display:flex;gap:12px;padding:12px 12px;cursor:pointer;border-radius:14px;position:relative;transition:background .13s;margin-bottom:2px}
  .conv:hover{background:var(--tint)}
  .conv.active{background:var(--blue-50)}
  .conv.active::before{content:"";position:absolute;left:-8px;top:10px;bottom:10px;width:4px;border-radius:4px;background:var(--grad)}
  .conv .body{min-width:0;flex:1}
  .conv .top{display:flex;justify-content:space-between;align-items:center;gap:8px}
  .conv .name{font-weight:700;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em}
  .conv .time{font-size:11px;color:var(--faint);flex:0 0 auto;font-weight:600}
  .conv .prev{font-size:12.5px;color:#14202e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;line-height:1.4}
  .conv .meta{display:flex;align-items:center;gap:6px;margin-top:8px}
  .chip{font-size:10.5px;padding:3px 10px 3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;font-weight:700;text-transform:capitalize}
  .chip .d{width:6px;height:6px;border-radius:50%}
  .c-messenger{background:#e6efff;color:#1d4ed8}.c-messenger .d{background:#1d4ed8}
  .c-instagram{background:#fde6f1;color:#be185d}.c-instagram .d{background:#be185d}
  .c-whatsapp{background:#dcfce7;color:#15803d}.c-whatsapp .d{background:#15803d}
  .cmt-chip{font-size:10.5px;font-weight:700;color:#2563eb;background:#dbe8ff;padding:3px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:4px}
  .post-ref{font-size:11px;color:#475569;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}

  /* ===== Rich social cards (Comments) ===== */
  .ccard{display:flex;gap:0;margin:8px 12px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.04);transition:box-shadow .15s,transform .06s,border-color .15s}
  .ccard:hover{box-shadow:0 6px 18px rgba(15,23,42,.09);transform:translateY(-1px)}
  .ccard.active{border-color:#2563eb;box-shadow:0 6px 18px rgba(37,99,235,.16)}
  .cc-body{flex:1;min-width:0;padding:10px 13px;display:flex;flex-direction:column;gap:5px}
  .cc-top{display:flex;align-items:center;gap:8px}
  .cc-comment{font-size:13px;color:#0f172a;line-height:1.4;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .cc-who{font-weight:800;color:#7c3aed;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cc-foot{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:1px}
  .cc-time{margin-left:auto;font-size:11px;color:var(--faint);font-weight:600;white-space:nowrap}
  .cc-top .resolved-pill{margin-left:auto}
  .cc-link{font-size:11px;font-weight:700;color:#2563eb;text-decoration:none}
  .cc-link:hover{text-decoration:underline}
  body.dark .ccard{background:var(--panel);border-color:var(--line);box-shadow:none}
  body.dark .ccard:hover{box-shadow:0 8px 22px rgba(0,0,0,.4)}
  body.dark .ccard.active{border-color:#3b6fe0}
  body.dark .cc-media{background-color:#141c28}
  body.dark .cc-media-ph{background:linear-gradient(135deg,#141c28,#0e151f);color:#46566c}
  body.dark .cc-comment{color:#e6edf6}
  body.dark .cc-who{color:#c4b5fd}

  /* details panel product block */
  .dpost{margin-bottom:8px}
  .dpost-img{width:100%;height:150px;border-radius:12px;background:#e8edf5 center/cover no-repeat;border:1px solid var(--line)}
  .dpost-ph{display:flex;align-items:center;justify-content:center;font-size:30px;color:#94a3b8;background:linear-gradient(135deg,#eef2f8,#dbe4f0)}
  .dpost-title{font-size:13px;font-weight:700;color:var(--ink);line-height:1.4;margin-top:9px}
  .dpost-link{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;color:#2563eb;text-decoration:none}
  .dpost-link:hover{text-decoration:underline}
  body.dark .dpost-img{background-color:#141c28}
  body.dark .dpost-ph{background:linear-gradient(135deg,#141c28,#0e151f);color:#46566c}
  .head-post{font-size:11.5px;color:var(--muted);margin-top:3px;font-weight:600;max-width:520px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.dark .post-ref{color:#9fb0c8}
  .resolved-pill{font-size:10px;color:#16a34a;background:#dcfce7;padding:3px 9px;border-radius:20px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
  .list-empty{padding:48px 22px;text-align:center;color:var(--faint);font-size:13px;line-height:1.6}

  /* ============ CHAT ============ */
  .chat{background:#f4f8fd;display:flex;flex-direction:column;height:100%;min-width:0;min-height:0;overflow:hidden}
  .chat-head{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:12px;flex:0 0 auto}
  .chat-head .left{display:flex;align-items:center;gap:12px;min-width:0}
  .chat-head .who{font-weight:700;font-size:15.5px;letter-spacing:-.01em}
  .chat-head .sub{font-size:12px;color:var(--muted);margin-top:1px}
  #backBtn{display:none;background:#eef2f8;border:none;width:36px;height:36px;border-radius:10px;align-items:center;justify-content:center;cursor:pointer;color:#41506a;flex:0 0 auto}
  .btn-soft{border:1px solid var(--line);background:#fff;color:var(--ink);padding:8px 14px;border-radius:10px;font-size:13px;cursor:pointer;font-weight:600;transition:.15s}
  .btn-soft:hover{background:#f3f6fb;border-color:#d6e0f0}
  .resolve{background:var(--grad);color:#fff;border:none;padding:10px 18px;border-radius:11px;font-size:13px;cursor:pointer;font-weight:700;box-shadow:0 4px 12px rgba(37,99,235,.26);transition:filter .15s,transform .05s}
  .resolve:hover{filter:brightness(1.06)}.resolve:active{transform:translateY(1px)}
  .resolve:hover{filter:brightness(1.06)}.resolve:active{transform:translateY(1px)}
  .thread{flex:1;overflow-y:auto;padding:24px 28px;display:flex;flex-direction:column;gap:2px;animation:fade .25s ease}
  @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .daysep{align-self:center;background:#e3ecf8;color:#5b6b82;font-size:11px;font-weight:700;padding:5px 14px;border-radius:20px;margin:16px 0 12px}
  .eventsep{display:flex;align-items:center;gap:10px;margin:18px 4px 10px;align-self:stretch}
  .eventsep .line{flex:1;height:1px;background:#cfe6d6}
  .eventsep .txt{font-size:11.5px;font-weight:700;color:#15803d;background:#dcfce7;padding:4px 13px;border-radius:20px;white-space:nowrap}
  .msgrow{display:flex;gap:10px;align-items:flex-end;margin-top:10px}
  .msgrow.out{flex-direction:row-reverse}
  .msgrow .av{margin-bottom:20px}
  .bwrap{max-width:66%;display:flex;flex-direction:column}
  .msgrow.out .bwrap{align-items:flex-end}
  .bub{padding:11px 15px;font-size:14px;line-height:1.5;word-wrap:break-word;border-radius:18px}
  .bub.in{background:#fff;border:1px solid #e9eef6;border-bottom-left-radius:6px;box-shadow:var(--sh-sm);color:var(--ink)}
  .bub.out{color:#fff;border-bottom-right-radius:6px;box-shadow:0 4px 14px rgba(37,99,235,.26)}
  .stamp{font-size:10.5px;color:var(--faint);margin:5px 6px 0;font-weight:600}
  .grouped{margin-top:3px}
  .chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--faint);gap:14px;text-align:center;padding:24px}
  .chat-empty .circ{width:84px;height:84px;border-radius:24px;background:linear-gradient(135deg,#e7f0fb,#dbe8ff);display:flex;align-items:center;justify-content:center;color:#8fb2e8}
  .chat-empty .t{font-size:15px;font-weight:700;color:#64748b}
  .chat-empty .s{font-size:13px;color:var(--faint);max-width:240px;line-height:1.5}

  /* composer */
  .composer{padding:14px 20px;background:#fff;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center;flex:0 0 auto}
  .composer .field{flex:1;display:flex;align-items:center;gap:10px;background:#eef2f8;border:1px solid transparent;border-radius:26px;padding:6px 8px 6px 18px;transition:.15s}
  .composer .field:focus-within{background:#fff;border-color:#d6e0f0;box-shadow:0 2px 10px rgba(15,23,42,.06)}
  .composer input{border:none;background:transparent;padding:9px 0;font-size:14px}
  .composer input:focus{box-shadow:none}
  .send{border:none;color:#fff;width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:transform .05s,filter .15s}
  .send.primary{background:var(--grad);box-shadow:0 4px 14px rgba(37,99,235,.3)}
  .send.primary:hover{filter:brightness(1.07)}.send:active{transform:scale(.93)}
  .send.muted{background:#eef2f8;color:#8190a8}
  .send.attach{background:#eef2f8;color:#5b6b86;cursor:pointer}
  .send.ai-btn{background:#f3eaff;color:#7c3aed;cursor:pointer}
  .send.ai-btn:hover{filter:brightness(.97)}
  .send.ai-btn.busy{opacity:.6;pointer-events:none}
  body.dark .send.ai-btn{background:#221a36;color:#c4b5fd}
  .send.attach:hover{background:#e2e9f4;color:var(--blue-600)}

  /* message media */
  .bub.has-media{padding:5px;background:#fff;border:1px solid #e9eef6}
  .msgrow.out .bub.has-media{background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.18)}
  .msg-img{display:block;max-width:260px;max-height:300px;width:auto;border-radius:13px;cursor:zoom-in}
  .msg-audio{display:block;width:240px;max-width:60vw;margin:2px}
  .msg-video{display:block;max-width:280px;border-radius:13px}
  .msg-file{display:inline-block;padding:10px 14px;font-size:13px;font-weight:700;color:var(--blue-700);text-decoration:none}
  .bub.has-media .cap{padding:7px 10px 5px;font-size:14px;line-height:1.45;color:var(--ink)}
  .msgrow.out .bub.has-media .cap{color:var(--blue-900)}

  /* page tag in list */
  .pgtag{font-size:10.5px;font-weight:600;color:var(--faint);background:#f1f5fb;padding:2px 8px;border-radius:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px}

  /* lightbox */
  .lightbox{position:fixed;inset:0;background:rgba(7,12,24,.86);display:flex;align-items:center;justify-content:center;z-index:60;cursor:zoom-out;animation:fade .15s ease;padding:24px}
  .lightbox img{max-width:92vw;max-height:90vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.5)}

  /* ============ RIGHT INFO ============ */
  .info-head{height:48px;display:flex;align-items:center;padding:0 18px;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);border-bottom:1px solid var(--line)}
  .info{padding:20px 16px;overflow-y:auto;flex:1}
  .info .head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:6px 0 20px;border-bottom:1px solid var(--line)}
  .info .head .nm{font-weight:700;font-size:16px;letter-spacing:-.01em}
  .info .head .ch{font-size:12px;color:var(--muted)}
  .info .sec-title{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--faint);margin:20px 0 8px;font-weight:800}
  .info .k{font-size:11px;color:var(--faint);margin-top:11px;font-weight:600}
  .info .v{font-size:13.5px;margin-top:2px;line-height:1.45}
  .info .finput{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font-size:13.5px;margin-top:4px}
  .status-pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;padding:5px 12px;border-radius:20px}
  .status-pill.open{background:#dcfce7;color:#15803d}
  .status-pill .d{width:7px;height:7px;border-radius:50%;background:currentColor}
  .info-empty{color:var(--faint);font-size:13px;text-align:center;padding:54px 24px;line-height:1.6}
  .ok{color:#16a34a;font-size:13px;margin-top:8px;font-weight:700}

  /* ============ SETTINGS MODAL (modular) ============ */
  .overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:50;animation:fade .2s ease;padding:20px}
  .modal{background:#fff;border-radius:20px;box-shadow:var(--sh-lg)}
  .modal.wide{width:820px;max-width:100%;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;padding:0}
  .modal-top{display:flex;align-items:center;justify-content:space-between;padding:22px 26px 16px;border-bottom:1px solid var(--line)}
  .modal h2{font-size:20px;font-weight:800;letter-spacing:-.01em}
  .modal-grid{display:grid;grid-template-columns:188px 1fr;min-height:0;flex:1}
  .mod-nav{border-right:1px solid var(--line);padding:16px 12px;display:flex;flex-direction:column;gap:4px;background:#fbfcfe}
  .mod-link{display:flex;align-items:center;gap:10px;border:none;background:none;cursor:pointer;font-size:14px;font-weight:700;color:#5b6b86;padding:11px 13px;border-radius:11px;text-align:left;transition:.14s}
  .mod-link:hover{background:#eef2f8;color:var(--ink)}
  .mod-link.active{background:var(--blue-50);color:var(--blue-700)}
  .mod-link.active svg{color:var(--blue-600)}
  .mod-body{padding:22px 26px;overflow-y:auto}
  .mod-panel{animation:fade .2s ease}
  .ar-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
  .lbl-sm{display:block;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin:6px 0 5px}
  .ar-area{width:100%;min-height:64px;resize:vertical;font-family:inherit;font-size:13.5px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);box-sizing:border-box}
  .ar-area:focus{outline:none;border-color:var(--blue-600)}
  .ar-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink);margin-top:10px;cursor:pointer}
  .ar-test{display:flex;gap:8px}
  .ar-test input{flex:1;margin:0}
  .ar-test-out{margin-top:10px}
  .ar-test-ok{background:#e8f8ee;border:1px solid #bbe7c9;border-radius:11px;padding:11px 13px;font-size:13px;color:#14532d}
  .ar-test-no{background:#fdeaea;border:1px solid #f3c6c6;border-radius:11px;padding:11px 13px;font-size:13px;color:#7f1d1d}
  .ar-page{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;margin-bottom:9px;font-size:13.5px;font-weight:600;background:#fbfcfe}
  .ar-item{border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:11px;background:#fbfcfe}
  .ar-item-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .ar-name{font-weight:800;font-size:14px}
  .ar-scope{font-size:11px;color:var(--muted);background:#eef2f8;padding:2px 9px;border-radius:20px;font-weight:600}
  .ar-hits{margin-left:auto;font-size:11px;color:var(--faint);font-weight:700}
  .ar-tag{font-size:10px;font-weight:800;text-transform:uppercase;padding:2px 8px;border-radius:20px}
  .ar-tag.def{background:#dbe8ff;color:#1d4ed8}
  .ar-tag.off{background:#f1f5f9;color:#64748b}
  .ar-tag.mode{background:#e0e7ff;color:#4338ca}
  .ar-tag.pri{background:#fef3c7;color:#92400e}
  .ar-tag.var{background:#dcfce7;color:#166534}
  .ar-bulk{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:11px 13px;background:#fbfcfe}
  .ar-bulk summary{cursor:pointer;font-weight:700;font-size:13.5px;color:var(--blue-700)}
  .ar-bulk code{background:#eef2f8;padding:1px 6px;border-radius:5px;font-size:12px}
  body.dark .ar-bulk{background:#101722}
  body.dark .ar-bulk code{background:#1a2330}
  .ar-kw{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.4}
  .ar-rep{font-size:13px;color:var(--ink);margin-top:6px;line-height:1.45}
  .ar-actions{display:flex;gap:7px;margin-top:11px;flex-wrap:wrap}
  .switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto}
  .switch input{opacity:0;width:0;height:0}
  .switch .track{position:absolute;inset:0;background:#cbd5e1;border-radius:24px;transition:.2s;cursor:pointer}
  .switch .track:before{content:"";position:absolute;height:18px;width:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
  .switch input:checked + .track{background:#16a34a}
  .switch input:checked + .track:before{transform:translateX(18px)}
  body.dark .ar-area,body.dark .ar-page,body.dark .ar-item{background:#101722;border-color:var(--line);color:var(--ink)}
  body.dark .ar-scope{background:#1a2330;color:#aeb9cc}
  body.dark .ar-test-ok{background:#13251a;border-color:#234b32;color:#86efac}
  body.dark .ar-test-no{background:#2a1418;border-color:#5b2330;color:#fca5a5}
  body.dark .switch .track{background:#3b4a66}
  .modal .sub{color:var(--muted);font-size:13px;margin-bottom:20px;line-height:1.5}
  .modal h4{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:22px 0 11px;font-weight:800}
  .modal label{font-size:12px;color:var(--muted);font-weight:600;display:block;margin-bottom:6px}
  .modal select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:12px;font-size:14px;margin-bottom:14px;background:#fff;outline:none;color:var(--ink)}
  .modal select:focus{border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(37,99,235,.12)}
  .modal input{margin-bottom:14px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .page-item{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:11px;display:flex;flex-direction:column;gap:3px;background:#fbfcfe}
  .page-item .pn{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
  .page-item .pe{font-size:12px;color:var(--muted);word-break:break-all;font-family:var(--mono)}
  .page-remove{margin-left:auto;border:1px solid #fecaca;background:#fff;color:#b91c1c;font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:8px;cursor:pointer;transition:.13s}
  .page-remove:hover{background:#fef2f2}
  .role-tag{font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:2px 8px;border-radius:20px;background:#e2e8f0;color:#475569}
  .role-tag.role-admin{background:#ede9fe;color:#6d28d9}
  .role-tag.role-agent{background:#dbeafe;color:#1d4ed8}
  .role-tag.role-viewer{background:#e2e8f0;color:#475569}
  .readonly-bar{display:flex;align-items:center;justify-content:center;gap:8px;padding:14px 18px;background:#f8fafc;border-top:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:600}
  .mini{padding:10px 15px;border:none;border-radius:10px;color:#fff;font-size:13px;cursor:pointer;font-weight:700;white-space:nowrap;box-shadow:0 4px 12px rgba(37,99,235,.24)}
  .closeX{cursor:pointer;color:var(--faint);font-size:26px;line-height:1;border:none;background:none}
  .closeX:hover{color:var(--ink)}

  /* user cards + page access */
  .user-item{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:11px;background:#fbfcfe}
  .user-item .uhead{display:flex;align-items:center;gap:11px}
  .user-item .uinfo{min-width:0;flex:1}
  .user-item .un{font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
  .user-item .ue{font-size:12px;color:var(--muted);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .uactions{display:flex;gap:7px;flex:0 0 auto;flex-wrap:wrap;justify-content:flex-end}
  .ubtn{font-size:12px;font-weight:700;padding:7px 13px;border-radius:9px;border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;transition:background .12s,border-color .12s}
  .ubtn:hover{background:#f1f5fb}
  .ubtn-danger{color:#b91c1c;border-color:#f3c6c6}
  .ubtn-danger:hover{background:#fdeaea}
  .ubtn-ok{color:#15803d;border-color:#bbe7c9}
  .ubtn-ok:hover{background:#e8f8ee}
  .uedit{margin-top:12px;padding-top:13px;border-top:1px dashed var(--line)}
  .uedit-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .uedit-actions{display:flex;gap:9px;align-items:center;margin-top:11px}
  body.dark .ubtn{background:#101722;border-color:var(--line);color:var(--ink)}
  body.dark .ubtn:hover{background:#161f2d}
  body.dark .ubtn-danger{color:#fca5a5;border-color:#5b2330}
  body.dark .ubtn-danger:hover{background:#2a1418}
  body.dark .ubtn-ok{color:#86efac;border-color:#234b32}
  body.dark .ubtn-ok:hover{background:#13251a}
  @media(max-width:640px){ .uedit-grid{grid-template-columns:1fr} }
  .role-badge{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:20px}
  .role-admin{background:#ede9fe;color:#6d28d9}
  .role-agent{background:#dbeafe;color:#1d4ed8}
  .role-viewer{background:#e2e8f0;color:#475569}
  .inactive-badge{font-size:10px;font-weight:700;color:#b91c1c;background:#fee2e2;padding:3px 9px;border-radius:20px}
  .udeact{margin-left:auto;border:1px solid var(--line);background:#fff;color:#b91c1c;font-size:12px;font-weight:700;padding:7px 12px;border-radius:9px;cursor:pointer;white-space:nowrap}
  .udeact:hover{background:#fef2f2;border-color:#fecaca}
  .access-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin:13px 0 9px}
  .access-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .acc{display:flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 11px;cursor:pointer;font-size:13px;font-weight:600;transition:.13s;user-select:none}
  .acc:hover{border-color:#cdd9ee;background:#f7faff}
  .acc.on{border-color:var(--blue-600);background:var(--blue-50);color:var(--blue-700)}
  .acc .box{width:18px;height:18px;border-radius:6px;border:2px solid #c5d0e2;display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.13s}
  .acc.on .box{background:var(--blue-600);border-color:var(--blue-600)}
  .acc .box svg{opacity:0;color:#fff}
  .acc.on .box svg{opacity:1}
  .acc .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .acc.locked{opacity:.7;cursor:not-allowed;background:#f1f5fb}
  .access-all{font-size:12.5px;color:#6d28d9;background:#f5f3ff;border:1px solid #e6e0fb;border-radius:10px;padding:10px 12px;font-weight:600}

  /* facebook auto-connect */
  .fb-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#1877f2;color:#fff;border:none;border-radius:12px;padding:13px;font-size:14.5px;font-weight:700;cursor:pointer;box-shadow:0 6px 16px rgba(24,119,242,.3);transition:filter .15s,transform .05s}
  .fb-btn:hover{filter:brightness(1.05)}.fb-btn:active{transform:translateY(1px)}
  .fb-hint{font-size:13px;color:var(--muted);margin-top:10px;text-align:center;background:#f3f6fb;border-radius:10px;padding:9px 12px}
  .fb-picker{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:8px;background:#fbfcfe}
  .fb-pick-h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);padding:8px 8px 6px}
  .fb-empty{font-size:13px;color:var(--muted);padding:14px;line-height:1.5}
  .fb-row{display:flex;align-items:center;gap:10px;padding:10px;border-radius:11px;transition:background .12s}
  .fb-row:hover{background:#fff}
  .fb-meta{min-width:0;flex:1}
  .fb-nm{font-weight:700;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .fb-id{font-size:11px;color:var(--muted)}
  .fb-conn{font-size:12px;font-weight:700;color:#15803d;background:#dcfce7;padding:7px 12px;border-radius:9px;white-space:nowrap}

  /* whatsapp QR connect */
  .wa-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;background:#25d366;color:#06351b;border:none;border-radius:12px;padding:13px;font-size:14.5px;font-weight:800;cursor:pointer;margin-top:11px;box-shadow:0 6px 16px rgba(37,211,102,.28);transition:filter .15s,transform .05s}
  .wa-btn:hover{filter:brightness(1.05)}.wa-btn:active{transform:translateY(1px)}
  .wa-panel{margin-top:12px;border:1px solid var(--line);border-radius:14px;padding:14px;background:#fbfcfe}
  .wa-row{display:flex;gap:8px}
  .wa-row input{margin:0;flex:1}
  .wa-qr-wrap{margin-top:14px;display:flex;flex-direction:column;align-items:center;gap:10px}
  .wa-qr-wrap img{width:230px;height:230px;border-radius:12px;background:#fff;padding:8px;box-shadow:var(--sh-sm)}
  .wa-qr-status{font-size:13px;font-weight:600;color:var(--muted);text-align:center}
  body.dark .wa-panel{background:#101722;border-color:var(--line)}
  body.dark .wa-qr-wrap img{background:#fff}
  details.manual{margin-top:18px;border-top:1px solid var(--line);padding-top:4px}
  details.manual>summary{cursor:pointer;list-style:none;font-size:13px;font-weight:700;color:var(--muted);padding:12px 2px;display:flex;align-items:center;gap:7px}
  details.manual>summary::-webkit-details-marker{display:none}
  details.manual>summary::before{content:"+";font-size:16px;color:var(--faint);font-weight:700}
  details.manual[open]>summary::before{content:"–"}
  details.manual>summary:hover{color:var(--ink)}
  .manual-body{padding-top:8px}

  .theme-toggle .ic-sun{display:none}
  body.dark .theme-toggle .ic-moon{display:none}
  body.dark .theme-toggle .ic-sun{display:inline}

  /* ============ DARK MODE ============ */
  body.dark{
    --ink:#e6edf6; --muted:#9fadc4; --faint:#6c7a93;
    --line:#202b40; --bg:#070b12; --panel:#0e151f; --tint:#141c28; --blue-50:#1b2a4d;
    --sh-sm:0 1px 2px rgba(0,0,0,.45); --sh-md:0 6px 20px rgba(0,0,0,.5); --sh-lg:0 18px 50px rgba(0,0,0,.6);
    background:var(--bg); color:var(--ink);
  }
  body.dark ::-webkit-scrollbar-thumb{background:#2f3d54;background-clip:padding-box}
  body.dark ::-webkit-scrollbar-thumb:hover{background:#3a4a64;background-clip:padding-box}

  body.dark .appbar{background:#0a0f17;border-color:var(--line)}
  body.dark .gsearch{background:#141c28}
  body.dark .gsearch:focus-within{background:#0a0f17;border-color:#33415c;box-shadow:0 4px 16px rgba(0,0,0,.4)}
  body.dark .iconbtn{background:#141c28;color:#c4d0e4}
  body.dark .iconbtn:hover{background:#1b2638;color:#fff}
  body.dark .ab-div{background:var(--line)}
  body.dark .ghost{color:var(--muted)}
  body.dark .ghost:hover{background:#141c28;color:var(--ink)}

  body.dark .col.right{background:#0a0f17}
  body.dark .inbox-tabs{background:var(--panel)}
  body.dark .inbox-tabs button{background:#141c28;color:#9fb0c9}
  body.dark .inbox-tabs button:hover{background:#1b2638}
  body.dark .conv.active{background:#1b2a4d}
  body.dark .pgtag{background:#141c28;color:#8595ad}
  body.dark .chip.c-messenger{background:rgba(37,99,235,.2);color:#9bb8ff}
  body.dark .chip.c-instagram{background:rgba(219,39,119,.2);color:#f9a8d4}
  body.dark .chip.c-whatsapp{background:rgba(22,163,74,.2);color:#86efac}
  body.dark .cmt-chip{background:rgba(37,99,235,.22);color:#9bb8ff}
  body.dark .resolved-pill{background:rgba(22,163,74,.2);color:#86efac}

  body.dark .chat{background:#080d14}
  body.dark .chat-head{background:var(--panel);border-color:var(--line)}
  body.dark #backBtn{background:#141c28;color:#c4d0e4}
  body.dark .btn-soft{background:#101722;color:var(--ink);border-color:var(--line)}
  body.dark .btn-soft:hover{background:#222e40;border-color:#33415c}
  body.dark .daysep{background:#1a2436;color:#9fb0c9}
  body.dark .eventsep .line{background:#202b40}
  body.dark .eventsep .txt{background:rgba(22,163,74,.2);color:#86efac}
  body.dark .bub.in{background:#121a26;border-color:#202b40;color:var(--ink)}
  body.dark .bub.has-media{background:#121a26;border-color:#202b40}
  body.dark .msgrow.out .bub.has-media{background:rgba(37,99,235,.18);border-color:rgba(37,99,235,.32)}
  body.dark .bub.has-media .cap{color:var(--ink)}
  body.dark .msgrow.out .bub.has-media .cap{color:#cfe0ff}
  body.dark .msg-file{color:#93b4ff}
  body.dark .chat-empty .circ{background:linear-gradient(135deg,#10192b,#16223a);color:#5f7fb5}

  body.dark .composer{background:var(--panel);border-color:var(--line)}
  body.dark .composer .field{background:#141c28}
  body.dark .composer .field:focus-within{background:#0a0f17;border-color:#33415c}
  body.dark .send.muted,body.dark .send.attach{background:#141c28;color:#9fb0c9}
  body.dark .send.attach:hover{background:#1b2638;color:#93b4ff}
  body.dark .readonly-bar{background:#0a0f17;border-color:var(--line);color:var(--muted)}
  body.dark .info-head{border-color:var(--line)}

  body.dark input,body.dark .modal select,body.dark .finput{background:#0a0f17;border-color:var(--line);color:var(--ink)}
  body.dark input::placeholder{color:#5a6b85}
  body.dark input:focus,body.dark .modal select:focus{border-color:var(--blue-600);box-shadow:0 0 0 3px rgba(37,99,235,.22)}

  body.dark .card{background:var(--panel)}
  body.dark .login-wrap{background:radial-gradient(1100px 520px at 50% -8%, #13243f 0%, var(--bg) 58%)}
  body.dark .err{background:#2a1414;border-color:#5b2626;color:#fca5a5}

  body.dark .modal{background:var(--panel)}
  body.dark .modal-top{border-color:var(--line)}
  body.dark .mod-nav{background:#0a0f17;border-color:var(--line)}
  body.dark .mod-link{color:#9fb0c9}
  body.dark .mod-link:hover{background:#141c28;color:var(--ink)}
  body.dark .mod-link.active{background:#1b2a4d;color:#93b4ff}
  body.dark .mod-link.active svg{color:#93b4ff}
  body.dark .page-item,body.dark .user-item{background:#101722;border-color:var(--line)}
  body.dark .page-remove{background:#101722;border-color:#5b2626;color:#f87171}
  body.dark .page-remove:hover{background:#2a1414}
  body.dark .acc{background:#0e151f;border-color:var(--line)}
  body.dark .acc:hover{background:#141c28;border-color:#33415c}
  body.dark .acc.on{background:#1b2a4d;border-color:var(--blue-600);color:#93b4ff}
  body.dark .acc .box{border-color:#3b4a66}
  body.dark .access-all{background:#1f1b33;border-color:#332b55;color:#c4b5fd}
  body.dark .udeact{background:#101722;border-color:#5b2626;color:#f87171}
  body.dark .udeact:hover{background:#2a1414}

  body.dark .fb-hint{background:#101722;color:var(--muted)}
  body.dark .fb-picker{background:#101722;border-color:var(--line)}
  body.dark .fb-row:hover{background:#141c28}
  body.dark .fb-conn{background:rgba(22,163,74,.2);color:#86efac}

  body.dark .role-admin{background:#2a2154;color:#c4b5fd}
  body.dark .role-agent{background:#15294f;color:#9bb8ff}
  body.dark .role-viewer{background:#1b2638;color:#aab8cc}
  body.dark .role-tag{background:#1b2638;color:#aab8cc}
  body.dark .inactive-badge{background:#2a1414;color:#f87171}

  /* ============ RESPONSIVE ============ */
  @media(max-width:860px){
    .modal-grid{grid-template-columns:1fr}
    .mod-nav{flex-direction:row;border-right:none;border-bottom:1px solid var(--line);padding:10px}
    .mod-link{flex:1;justify-content:center}
    .access-grid{grid-template-columns:1fr}
  }
  @media(max-width:1180px){
    .panes{grid-template-columns:300px 1fr}
    .col.right{display:none}
    .appbar .ab-brand{width:auto}
  }
  @media(max-width:760px){
    .app{grid-template-rows:56px 1fr}
    .panes{grid-template-columns:1fr}
    .appbar{gap:10px;padding:0 12px}
    .appbar .ab-brand .wm{display:none}
    .gsearch{padding:9px 14px}
    .profile small{display:none}
    .chat{position:absolute;inset:56px 0 0 0;transform:translateX(100%);transition:transform .26s ease;z-index:15}
    body.show-chat .chat{transform:none}
    #backBtn{display:flex}
  }
  /* avatars stay neutral (set in JS); chips & status badges keep their channel colors */
  body.dark .conv .prev{ color:#aeb9cc; }