/* Archagency app styles */
:root{
  --surface-0:#0f0f11; --surface-1:#1a1a1d; --surface-2:#202024; --surface-3:#26262b;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.16);
  --text-primary:#f4f4f2; --text-secondary:#a6a5a0; --text-muted:#6f6e6a;
  --accent:#3f8ae0;
  --bg-accent:rgba(63,138,224,.16); --text-accent:#79b3f2;
  --bg-success:rgba(41,175,124,.16); --text-success:#4fd6a4;
  --bg-warning:rgba(233,159,39,.16); --text-warning:#f0b968;
  --bg-pro:rgba(127,119,221,.18); --text-pro:#a89ff0;
  --bg-danger:rgba(226,75,74,.16); --text-danger:#f08585;
  --radius:8px;
}
[data-theme="light"]{
  --surface-0:#f6f6f4; --surface-1:#efeee9; --surface-2:#ffffff; --surface-3:#ffffff;
  --border:rgba(0,0,0,.09); --border-strong:rgba(0,0,0,.18);
  --text-primary:#1a1a18; --text-secondary:#5f5e5a; --text-muted:#8a8985;
  --accent:#2a78d6;
  --bg-accent:#e6f1fb; --text-accent:#185fa5;
  --bg-success:#e1f5ee; --text-success:#0f6e56;
  --bg-warning:#faeeda; --text-warning:#854f0b;
  --bg-pro:#eeedfe; --text-pro:#3c3489;
  --bg-danger:#fcebeb; --text-danger:#a32d2d;
}
@media (prefers-color-scheme: light){
  [data-theme="auto"]{
    --surface-0:#f6f6f4; --surface-1:#efeee9; --surface-2:#ffffff; --surface-3:#ffffff;
    --border:rgba(0,0,0,.09); --border-strong:rgba(0,0,0,.18);
    --text-primary:#1a1a18; --text-secondary:#5f5e5a; --text-muted:#8a8985;
    --accent:#2a78d6;
    --bg-accent:#e6f1fb; --text-accent:#185fa5;
    --bg-success:#e1f5ee; --text-success:#0f6e56;
    --bg-warning:#faeeda; --text-warning:#854f0b;
    --bg-pro:#eeedfe; --text-pro:#3c3489;
    --bg-danger:#fcebeb; --text-danger:#a32d2d;
  }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:'Inter',system-ui,sans-serif;background:var(--surface-0);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-size:15px}
button{font-family:inherit}
.boot{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:var(--text-muted);font-size:14px}
.boot-mark{width:52px;height:52px;border-radius:14px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.55;transform:scale(.95)}}

.app{display:flex;min-height:100vh}
.sidebar{width:222px;flex:none;background:var(--surface-1);border-right:.5px solid var(--border);padding:20px 14px;display:flex;flex-direction:column;gap:3px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;cursor:pointer}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px}
.brand b{font-size:17px;font-weight:600}
.brand .v{font-size:10px;color:var(--text-muted);margin-top:3px}
.nav{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius);font-size:14px;color:var(--text-secondary);cursor:pointer;border:none;background:none;width:100%;text-align:left}
.nav i{font-size:19px}
.nav:hover{background:var(--surface-2);color:var(--text-primary)}
.nav.on{background:var(--bg-accent);color:var(--text-accent)}
.nav .k{margin-left:auto;font-size:10px;color:var(--text-muted);border:.5px solid var(--border);border-radius:4px;padding:1px 5px}
.navsep{font-size:11px;color:var(--text-muted);padding:14px 12px 5px;text-transform:uppercase;letter-spacing:.06em}
.side-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 8px 0;border-top:.5px solid var(--border);cursor:pointer}
.side-foot .av{width:30px;height:30px;border-radius:50%;background:var(--bg-pro);color:var(--text-pro);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex:none}
.side-foot .who{font-size:13px;color:var(--text-secondary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side-foot .who{font-weight:600;color:var(--text-primary)}
.side-foot .side-sub{font-size:11px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.main{flex:1;min-width:0;padding:26px 30px 70px;max-width:1240px}
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:22px}
h1{font-size:22px;font-weight:600;margin:0}
h2{font-size:17px;font-weight:600;margin:0}
h3{font-size:14px;font-weight:600;margin:0}
.sub{font-size:13px;color:var(--text-muted);margin-top:3px}
.pill{font-size:12px;padding:5px 11px;border-radius:20px;font-weight:500;display:inline-flex;align-items:center;gap:7px}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.dot.live{animation:pulse 1.6s infinite}

.btn{font-size:13px;padding:8px 14px;border-radius:var(--radius);border:.5px solid var(--border-strong);background:none;color:var(--text-primary);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{opacity:.9}
.btn.sm{padding:5px 10px;font-size:12px}
.btn i{font-size:16px}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.segbtn{background:transparent;border:none;color:var(--text-secondary);padding:6px 14px;font-size:13px;font-weight:500;cursor:pointer;border-right:1px solid var(--border)}
.segbtn:last-child{border-right:none}
.segbtn.on{background:var(--accent);color:#fff}
.btn.danger{color:var(--text-danger);border-color:var(--border)}
.iconbtn{background:none;border:.5px solid var(--border-strong);color:var(--text-secondary);width:36px;height:36px;border-radius:var(--radius);cursor:pointer;font-size:18px;display:inline-flex;align-items:center;justify-content:center}
.iconbtn:hover{color:var(--text-primary);background:var(--surface-2)}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px}
.kpi{background:var(--surface-1);border-radius:var(--radius);padding:16px}
.kpi .lbl{font-size:13px;color:var(--text-muted)}
.kpi .val{font-size:26px;font-weight:600;margin-top:5px;font-variant-numeric:tabular-nums}
.kpi .delta{font-size:12px;margin-top:3px}
.up{color:var(--text-success)} .down{color:var(--text-danger)} .flat{color:var(--text-secondary)}

.card{background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;padding:18px 20px;margin-bottom:20px}
.card-h{font-size:13px;color:var(--text-secondary);margin-bottom:16px;display:flex;align-items:center}
.card-h .r{margin-left:auto;font-size:12px;color:var(--text-muted)}

.sec-h{display:flex;align-items:center;margin-bottom:12px;gap:10px}
.sec-h .hint{margin-left:auto;font-size:12px;color:var(--text-muted)}

.agents-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:24px}
.agent{background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;padding:16px;transition:border-color .12s;cursor:pointer}
.agent:hover{border-color:var(--border-strong)}
.agent-top{display:flex;align-items:center;gap:12px}
.ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none}
.agent .nm{font-size:15px;font-weight:600}
.agent .rl{font-size:12px;color:var(--text-muted);margin-top:1px}
.agent .stat{font-size:12px;color:var(--text-secondary);margin-top:12px}
.agent.off{opacity:.55}
.sw{width:38px;height:22px;border-radius:20px;position:relative;flex:none;background:var(--text-success);transition:background .15s;cursor:pointer;border:none;padding:0}
.sw i{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s,right .15s}
.sw.off{background:var(--border-strong)}
.sw.off i{right:auto;left:2px}

.feed{background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;overflow:hidden}
.row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:.5px solid var(--border)}
.row:last-child{border-bottom:none}
.row.click{cursor:pointer}
.row.click:hover{background:var(--surface-3)}
.row .t{font-size:12px;color:var(--text-muted);width:58px;flex:none}
.row .who{font-size:13px;color:var(--text-secondary);width:104px;flex:none}
.row .subj{font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .dur{font-size:12px;color:var(--text-muted);width:56px;flex:none;text-align:right}
.row.new{animation:slidein .4s ease}
@keyframes slidein{from{background:var(--bg-accent)}to{background:transparent}}
.badge{font-size:11px;padding:4px 9px;border-radius:20px;font-weight:500;flex:none;white-space:nowrap}
.empty{padding:40px 20px;text-align:center;color:var(--text-muted);font-size:13px}
.empty i{font-size:32px;display:block;margin-bottom:10px;opacity:.5}

.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:6px}
.help{font-size:12px;color:var(--text-muted);margin-top:5px}
.input,select.input,textarea.input{width:100%;font-family:inherit;font-size:14px;color:var(--text-primary);background:var(--surface-1);border:.5px solid var(--border);border-radius:var(--radius);padding:9px 11px;outline:none}
.input:focus{border-color:var(--accent)}
textarea.input{resize:vertical;min-height:70px;line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.listrow{display:flex;gap:8px;margin-bottom:8px;align-items:center}
.listrow .input{flex:1}
.listrow .grip{color:var(--text-muted);cursor:grab;font-size:15px}
.del{background:none;border:.5px solid var(--border-strong);color:var(--text-muted);width:34px;height:34px;border-radius:var(--radius);cursor:pointer;flex:none;font-size:16px}
.del:hover{color:var(--text-danger)}
.addlink{font-size:13px;color:var(--text-accent);background:none;border:none;cursor:pointer;padding:2px 0;display:inline-flex;align-items:center;gap:5px}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;padding:22px 20px;display:flex;flex-direction:column}
.plan.feat{border:1.5px solid var(--accent)}
.plan .pn{font-size:15px;font-weight:600}
.plan .pr{font-size:30px;font-weight:600;margin:12px 0 2px}
.plan .pr small{font-size:13px;font-weight:400;color:var(--text-muted)}
.plan ul{list-style:none;padding:0;margin:16px 0 20px;display:flex;flex-direction:column;gap:9px}
.plan li{font-size:13px;color:var(--text-secondary);display:flex;gap:9px;align-items:flex-start}
.plan li i{color:var(--text-success);font-size:17px;flex:none}
.plan .cur{margin-top:auto}

.setrow{display:flex;align-items:center;gap:14px;padding:15px 18px;border-bottom:.5px solid var(--border)}
.setrow:last-child{border-bottom:none}
.setrow .ic{width:36px;height:36px;background:var(--surface-1);color:var(--text-secondary);font-size:18px}
.setrow .g{flex:1;min-width:0}
.setrow .g .n{font-size:14px;font-weight:500}
.setrow .g .d{font-size:12px;color:var(--text-muted);margin-top:2px}

.chat{display:flex;flex-direction:column;height:calc(100vh - 210px);min-height:380px}
.chat-log{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:12px;padding:6px 2px 16px}
.bubble{max-width:76%;padding:10px 14px;border-radius:14px;font-size:14px;line-height:1.55;white-space:pre-wrap}
.bubble.a{align-self:flex-start;background:var(--surface-2);border:.5px solid var(--border);border-bottom-left-radius:4px}
.bubble.u{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:4px}
.bubble .meta{font-size:13px;font-weight:700;margin-bottom:1px;color:var(--text-secondary)}
.bubble.u .meta{color:rgba(255,255,255,.9)}
/* aesthetic notification cards (Manager "What you need to know") */
.notif-feed{display:flex;flex-direction:column;gap:6px}
.notif{display:flex;gap:11px;align-items:center;padding:8px 11px;border-radius:11px;background:var(--surface-2);border:.5px solid var(--border);transition:background .15s,transform .1s;text-align:left}
.notif.click{cursor:pointer}
.notif.click:hover{background:var(--surface-3);transform:translateX(2px)}
.notif.read{opacity:.55}
.notif-ic{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;flex:none}
.notif-ic.s{background:var(--bg-success);color:var(--text-success)}
.notif-ic.w{background:var(--bg-warning);color:var(--text-warning)}
.notif-ic.i{background:var(--bg-accent);color:var(--text-accent)}
.notif-b{flex:1;min-width:0}
.notif-t{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-d{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.notif-x{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none}
.notif-time{font-size:11px;color:var(--text-muted);white-space:nowrap}
.notif-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
/* appearance: theme boxes + colour swatches */
.theme-box{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:12px 13px;border:1.5px solid var(--border);border-radius:12px;background:var(--surface-1);cursor:pointer;text-align:left;transition:border-color .15s}
.theme-box.on,.theme-box:hover{border-color:var(--accent)}
.theme-swatch{display:flex;gap:4px;margin-bottom:2px}
.theme-swatch span{width:22px;height:22px;border-radius:5px;border:.5px solid rgba(255,255,255,.12)}
.theme-name{font-size:13px;font-weight:600}
.theme-desc{font-size:11px;color:var(--text-muted)}
.colour-box{display:flex;gap:3px;padding:6px;border:2px solid var(--border);border-radius:10px;background:var(--surface-1);cursor:pointer;transition:border-color .15s}
.colour-box.on,.colour-box:hover{border-color:var(--cw)}
.colour-box span{width:16px;height:16px;border-radius:4px}
/* layout themes recolour the whole UI */
:root[data-layout="matrix"]{
  --surface-0:#020a05;--surface-1:#05160b;--surface-2:#071d0f;--surface-3:#0a2614;
  --border:rgba(55,224,125,.14);--border-strong:rgba(55,224,125,.3);
  --text-primary:#cffad6;--text-secondary:#6fc389;--text-muted:#3f7a53;
  --accent:#25d366;--text-accent:#37e07d;--bg-accent:rgba(37,211,102,.16);
}
:root[data-layout="cherry"]{
  --surface-0:#160a10;--surface-1:#20101a;--surface-2:#2a1622;--surface-3:#341b2b;
  --border:rgba(241,140,173,.16);--border-strong:rgba(241,140,173,.32);
  --text-primary:#fbe4ec;--text-secondary:#cf95ab;--text-muted:#8a5c6e;
  --accent:#e86a92;--text-accent:#f18cad;--bg-accent:rgba(232,106,146,.16);
}
/* live full-screen background layer (matrix rain / cherry-tree video) */
#layout-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#000}
#layout-bg video,#layout-bg canvas{width:100%;height:100%;object-fit:cover;display:block}
:root[data-layout="cherry"] #layout-bg{background:#160a10}
/* with a live background on: transparent app + glassy translucent panels so it shows through */
:root[data-layout="matrix"] body,:root[data-layout="cherry"] body,
:root[data-layout="matrix"] .app,:root[data-layout="cherry"] .app{background:transparent}
:root[data-layout="matrix"] .card{background:rgba(6,26,14,.80);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
:root[data-layout="matrix"] .sidebar{background:rgba(4,18,10,.86);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
:root[data-layout="cherry"] .card{background:rgba(38,20,30,.78);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
:root[data-layout="cherry"] .sidebar{background:rgba(30,14,24,.86);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px)}
/* guided tour spotlight + tooltip */
/* overlay lets clicks through (dimming is just the hole's box-shadow) so you can fill boxes in mid-tour; only the tooltip captures clicks */
#tour-ov{position:fixed;inset:0;z-index:9999;pointer-events:none}
#tour-pop{background:var(--surface-2);border:1px solid var(--accent);border-radius:14px;padding:16px 18px;box-shadow:0 12px 40px rgba(0,0,0,.5);z-index:10000;pointer-events:auto}
#tour-pop .tour-step{font-size:11px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
#tour-pop .tour-title{font-size:16px;font-weight:600;margin-bottom:6px}
#tour-pop .tour-body{font-size:13px;line-height:1.5;color:var(--text-secondary);margin-bottom:14px}
#tour-pop .tour-nav{display:flex;justify-content:space-between;align-items:center;gap:8px}
.bubble.typing span{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--text-muted);margin-right:4px;animation:blink 1.2s infinite}
.bubble.typing span:nth-child(2){animation-delay:.2s}
.bubble.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{50%{opacity:.25}}
.chat-in{display:flex;gap:10px;padding-top:12px;border-top:.5px solid var(--border)}
.chat-in .input{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:5px 11px;border-radius:20px;border:.5px solid var(--border-strong);background:none;color:var(--text-secondary);cursor:pointer}
.chip:hover{background:var(--surface-2);color:var(--text-primary)}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}

.kanban{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.kcol{background:var(--surface-1);border-radius:12px;padding:12px;min-height:200px}
.kanban.compact .kcol{min-height:44px;padding:8px}
.kanban.compact .kh{margin-bottom:5px}
.kanban.compact .empty{padding:4px !important;font-size:11px;opacity:.6}
.kanban.compact .empty i{font-size:14px}
.livedot{width:9px;height:9px;border-radius:50%;background:var(--text-muted);display:inline-block;margin-right:8px;flex:none}
.livedot.on{background:var(--text-success);animation:livepulse 1.4s infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(63,208,122,.5)}70%{box-shadow:0 0 0 8px rgba(63,208,122,0)}100%{box-shadow:0 0 0 0 rgba(63,208,122,0)}}
.kanban.compact .empty{padding:10px !important;font-size:12px}
.kcol .kh{font-size:12px;color:var(--text-muted);font-weight:500;margin-bottom:10px;display:flex;gap:7px;align-items:center;text-transform:uppercase;letter-spacing:.05em}
.kcol .kh .n{background:var(--surface-3);border-radius:10px;padding:1px 8px;font-size:11px}
.kcard{background:var(--surface-2);border:.5px solid var(--border);border-radius:10px;padding:12px;margin-bottom:9px;cursor:pointer}
.kcard:hover{border-color:var(--border-strong)}
.kcard .kt{font-size:13px;font-weight:500;line-height:1.4}
.kcard .kd{font-size:12px;color:var(--text-muted);margin-top:5px;line-height:1.45}
.kcard .kfoot{display:flex;gap:6px;margin-top:9px}

.cal{background:var(--surface-2);border:.5px solid var(--border);border-radius:12px;overflow:hidden}
.cal-head{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:.5px solid var(--border)}
.cal-head div{padding:9px;font-size:11px;color:var(--text-muted);text-align:center;text-transform:uppercase;letter-spacing:.05em}
/* equal-height rows sized to the viewport so the month always fits the frame; every cell the same size whatever's in it */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:1fr;height:clamp(330px, calc(100vh - 232px), 860px)}
.cal-cell{min-height:0;border-bottom:.5px solid var(--border);border-right:.5px solid var(--border);padding:6px;font-size:12px;overflow:hidden;display:flex;flex-direction:column}
.cal-cell.has{cursor:pointer;transition:background .12s}
.cal-cell.has:hover{background:var(--bg-accent)}
.cal-cell:nth-child(7n){border-right:none}
.cal-cell .d{color:var(--text-muted);font-size:11px}
.cal-cell.today .d{background:var(--accent);color:#fff;border-radius:50%;width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center}
.cal-cell.gone{opacity:.45;background:repeating-linear-gradient(-45deg,transparent,transparent 7px,color-mix(in srgb,var(--border) 55%,transparent) 7px,color-mix(in srgb,var(--border) 55%,transparent) 8px)}
.cal-cell.gone .d{text-decoration:line-through;color:var(--text-muted)}
.cal-cell.dim{opacity:.35}
.evt{background:var(--bg-success);color:var(--text-success);border-radius:5px;padding:2px 6px;font-size:10.5px;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default}
.evt.past{background:var(--surface-3);color:var(--text-muted)}

.transcript{display:flex;flex-direction:column;gap:10px}
.transcript .bubble{max-width:82%;font-size:13px}
.tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted)}

table.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:left;font-size:11px;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.05em;padding:10px 14px;border-bottom:.5px solid var(--border)}
.tbl td{padding:12px 14px;border-bottom:.5px solid var(--border)}
.tbl tr:last-child td{border-bottom:none}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover td{background:var(--surface-3)}

.modal-wrap{position:fixed;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal{background:var(--surface-2);border:.5px solid var(--border-strong);border-radius:14px;width:min(560px,100%);max-height:86vh;overflow:auto;padding:22px}
.modal h2{margin-bottom:16px}
.modal .x{float:right;background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer}
.modal.wide{width:min(720px,100%)}

.toasts{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:10px;z-index:80}
.toast{background:var(--surface-3);border:.5px solid var(--border-strong);border-radius:10px;padding:12px 16px;font-size:13px;display:flex;align-items:center;gap:10px;min-width:240px;max-width:340px;animation:toastin .25s ease;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.toast i{font-size:18px;flex:none}
@keyframes toastin{from{transform:translateY(8px);opacity:0}}

.palette-wrap{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:70;display:flex;justify-content:center;padding-top:12vh}
.palette{background:var(--surface-2);border:.5px solid var(--border-strong);border-radius:14px;width:min(520px,92%);height:fit-content;max-height:60vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.4)}
.palette input{background:none;border:none;outline:none;color:var(--text-primary);font-size:16px;padding:16px 18px;font-family:inherit;border-bottom:.5px solid var(--border)}
.palette .list{overflow-y:auto}
.pitem{display:flex;align-items:center;gap:12px;padding:11px 18px;font-size:14px;cursor:pointer;color:var(--text-secondary)}
.pitem i{font-size:18px}
.pitem.sel,.pitem:hover{background:var(--bg-accent);color:var(--text-accent)}

.searchbar{position:relative;flex:none}
.searchbar input{width:230px}
.searchbar i{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:16px}
.searchbar .input{padding-left:32px}

.mobilenav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--surface-1);border-top:.5px solid var(--border);padding:8px 4px calc(8px + env(safe-area-inset-bottom));z-index:20}
.mobilenav .inner{display:flex;justify-content:space-around}
.mnav{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--text-muted);font-size:10.5px;cursor:pointer;padding:4px 8px;border-radius:var(--radius)}
.mnav i{font-size:21px}
.mnav.on{color:var(--text-accent)}

.backlink{background:none;border:none;color:var(--text-secondary);font-size:13px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:4px 0;margin-bottom:14px}
.backlink:hover{color:var(--text-primary)}
.savebar{display:flex;align-items:center;gap:12px;margin-top:6px;padding-top:18px;border-top:.5px solid var(--border)}
.unsaved{font-size:12px;color:var(--text-warning)}

.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.auth-box{background:var(--surface-2);border:.5px solid var(--border);border-radius:16px;padding:32px 30px;width:min(380px,100%);text-align:center}
.auth-logo{width:48px;height:48px;border-radius:13px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:25px;margin:0 auto 18px}
.blur{filter:blur(5px);transition:filter .15s;cursor:default}
.blur:hover{filter:none}
.c-blue{background:var(--bg-accent);color:var(--text-accent)}
.c-green{background:var(--bg-success);color:var(--text-success)}
.c-amber{background:var(--bg-warning);color:var(--text-warning)}
.c-purple{background:var(--bg-pro);color:var(--text-pro)}
.c-red{background:var(--bg-danger);color:var(--text-danger)}
.c-gray{background:var(--surface-3);color:var(--text-secondary)}
/* Live-chat: the whole app glows at the edges while the Manager is replying */
.edge-glow{position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:0;transition:opacity .35s;border-radius:2px}
.edge-glow.on{opacity:1;animation:edgepulse 1.5s ease-in-out infinite}
@keyframes edgepulse{
  0%,100%{box-shadow:inset 0 0 0 2px rgba(63,138,224,.85), inset 0 0 24px 4px rgba(63,138,224,.35)}
  50%{box-shadow:inset 0 0 0 3px rgba(63,138,224,1), inset 0 0 60px 14px rgba(63,138,224,.7)}
}

@media (max-width:1024px){
  .sidebar{display:none}
  .main{padding:18px 16px 100px;max-width:none}
  .kpis{grid-template-columns:repeat(2,1fr);gap:12px}
  .kpi .val{font-size:22px}
  .agents-grid{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .grid2,.grid3{grid-template-columns:1fr}
  .kanban{grid-template-columns:1fr}
  .mobilenav{display:block}
  .row .who,.row .dur{display:none}
  .searchbar input{width:130px}
  .chat{height:calc(100vh - 260px)}
  .cal-cell{min-height:56px}
  h1{font-size:20px}
}