:root {
  --bg:#09100f; --rail:#0d1715; --surface:#121d1a; --surface-2:#182723;
  --line:#263d37; --text:#effaf5; --muted:#91a79e; --green:#65efb2;
  --amber:#f5c86b; --red:#ff8d8d;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--text); background:var(--bg);
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
body { margin:0; min-width:320px; background:radial-gradient(circle at top right,#17332a 0,transparent 32rem),var(--bg); }
button,input,select { font:inherit; }
button { cursor:pointer; }
button:disabled { opacity:.55; cursor:wait; }

.login-page { min-height:100vh; display:grid; place-items:center; padding:1.5rem; }
.login-card { width:min(100%,26rem); padding:2.25rem; background:rgba(18,29,26,.96); border:1px solid var(--line); border-radius:1.25rem; box-shadow:0 2rem 6rem #0008; }
.brand-mark { display:inline-grid; place-items:center; width:2rem; height:2rem; margin-right:.5rem; border-radius:.65rem; color:#092018; background:var(--green); font-weight:900; font-size:1.25rem; }
.eyebrow { margin:0 0:.28rem; color:var(--green); font-size:.67rem; font-weight:850; letter-spacing:.14em; }
h1 { margin:0; font-size:1.45rem; letter-spacing:-.035em; }
h2 { margin:0; font-size:1.15rem; }
h3 { margin:0 0:.18rem; font-size:.95rem; }
.muted,.small-message { color:var(--muted); line-height:1.5; }
form { margin-top:1.6rem; }
label { display:grid; gap:.45rem; margin-top:1rem; color:#d7e6df; font-size:.9rem; font-weight:650; }
input,select { width:100%; padding:.7rem .8rem; color:var(--text); background:#0c1513; border:1px solid #375149; border-radius:.6rem; outline:none; }
input:focus,select:focus { border-color:var(--green); box-shadow:0 0 0 3px #65efb21f; }
.subtle { color:var(--muted); font-weight:400; }
.form-error { padding:.7rem; color:#ffdada; background:#6b252533; border:1px solid #a84949; border-radius:.5rem; }
.button { border:1px solid #3e5c54; border-radius:.58rem; padding:.58rem .78rem; color:var(--text); background:#1a2a26; font-weight:750; font-size:.8rem; }
.button:hover { background:#274039; }
.button.primary { color:#062016; background:var(--green); border-color:var(--green); }
.button.primary:hover { background:#94ffd0; }
.button.danger { color:#fff0f0; border-color:#984848; background:#512626; }
.button.full { width:100%; margin-top:1.5rem; padding:.75rem; }
.button.small { font-size:.7rem; padding:.36rem .5rem; }

.app-page { height:100vh; overflow:hidden; background:#080d0c; }
.messenger-shell { display:grid; grid-template-columns:5.75rem minmax(0,1fr) auto; height:100vh; }
.service-rail { position:relative; z-index:3; display:flex; flex-direction:column; align-items:stretch; gap:1rem; padding:.9rem .55rem; border-right:1px solid var(--line); background:linear-gradient(180deg,#101c19,#0a1210); }
.rail-brand { align-self:center; display:grid; place-items:center; width:2.8rem; height:2.8rem; border-radius:.9rem; color:#062016; background:var(--green); font-size:1.35rem; font-weight:900; text-decoration:none; box-shadow:0 .65rem 1.8rem #65efb226; }
.service-list,.rail-tools { display:flex; flex-direction:column; gap:.42rem; }
.service-list { margin-top:.35rem; }
.rail-tools { margin-top:auto; }
.service-button { position:relative; display:flex; flex-direction:column; align-items:center; gap:.28rem; width:100%; padding:.52rem .2rem; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:.8rem; font-size:.62rem; font-weight:750; }
.service-button:hover { color:var(--text); background:#182622; }
.service-button.active { color:var(--text); background:#1b2d28; border-color:#315047; }
.service-button.active::before { content:""; position:absolute; left:-.58rem; top:25%; width:.2rem; height:50%; border-radius:0 .2rem .2rem 0; background:var(--green); }
.service-glyph,.tool-glyph { display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:.78rem; color:white; font-size:.7rem; font-weight:900; letter-spacing:-.03em; }
.whatsapp-glyph { background:linear-gradient(145deg,#35d882,#168c57); }
.telegram-glyph { background:linear-gradient(145deg,#4eb9ef,#2583c6); }
.tool-glyph { color:#cce2d8; background:#20322d; font-size:1.05rem; }
.rail-identity { display:grid; justify-items:center; gap:.05rem; padding:.55rem .1rem; color:var(--muted); font-size:.58rem; overflow:hidden; }
.rail-identity strong { max-width:100%; color:#d8e9e1; font-size:.66rem; overflow:hidden; text-overflow:ellipsis; }

.conversation-stage { min-width:0; display:flex; flex-direction:column; background:#080d0c; }
.stage-toolbar { min-height:5.45rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.85rem 1.25rem; border-bottom:1px solid var(--line); background:#101916e8; backdrop-filter:blur(14px); }
.service-heading { display:flex; align-items:center; gap:.8rem; }
.active-app-dot { width:.75rem; height:.75rem; border-radius:50%; box-shadow:0 0 0 .35rem #35d88218; }
.whatsapp-dot { background:#35d882; }
.telegram-dot { background:#43aee8; box-shadow:0 0 0 .35rem #43aee818; }
.session-controls { display:flex; align-items:center; justify-content:flex-end; gap:1rem; }
.session-state { display:flex; align-items:center; gap:.48rem; color:var(--muted); font-size:.74rem; white-space:nowrap; }
.live-dot { width:.42rem; height:.42rem; border-radius:50%; background:var(--green); box-shadow:0 0 .8rem var(--green); }
.control-actions { display:flex; gap:.45rem; }
.status-own { color:var(--green); }
.status-view { color:var(--amber); }
.status-idle { color:var(--muted); }
.service-message { margin:0; padding:.48rem 1.1rem; color:#ffe8ba; background:#4b381e; border-bottom:1px solid #6e542f; font-size:.76rem; }
.remote-frame-wrap { position:relative; flex:1; min-height:0; background:#030504; }
#remote-frame { position:absolute; inset:0; width:100%; height:100%; border:0; }
.stage-footer { min-height:2.35rem; display:flex; align-items:center; justify-content:center; gap:.55rem; padding:.45rem 1rem; color:#72877f; border-top:1px solid var(--line); background:#0e1715; font-size:.65rem; }

.tool-drawer { width:min(25rem,36vw); min-width:21rem; overflow:auto; border-left:1px solid var(--line); background:#101a17; box-shadow:-1.5rem 0 4rem #0005; }
.drawer-header { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; min-height:5.45rem; padding:1rem; border-bottom:1px solid var(--line); background:#101a17ee; backdrop-filter:blur(12px); }
.icon-button { display:grid; place-items:center; min-width:2.15rem; height:2.15rem; padding:0; color:var(--green); background:#192723; border:1px solid #304b43; border-radius:.58rem; font-size:1.25rem; }
.drawer-view { padding-bottom:1rem; }
.drawer-section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem; }
.drawer-section-heading p { margin:.2rem 0 0; color:var(--muted); font-size:.72rem; }
.upload-form { display:grid; grid-template-columns:1fr auto; gap:.5rem; margin:0 1rem 1rem; }
.library-search { display:grid; gap:.4rem; margin:0 1rem 1rem; }
.library-search input,.tag-input { padding:.58rem .7rem; font-size:.78rem; }
.library-search span { color:var(--muted); font-size:.68rem; }
.tag-input { grid-column:1 / -1; }
.file-picker { display:block; margin:0; padding:.62rem .75rem; overflow:hidden; border:1px dashed #49675e; border-radius:.58rem; color:var(--muted); font-size:.78rem; cursor:pointer; }
.file-picker input { position:absolute; inline-size:1px; block-size:1px; opacity:0; }
.small-message { margin:.4rem 1rem; font-size:.74rem; }
.drawer-tip { margin:1rem; padding:.8rem; color:#9bb1a8; background:#172420; border:1px solid #294239; border-radius:.65rem; font-size:.72rem; line-height:1.45; }
.image-list,.user-list { display:flex; flex-direction:column; gap:.65rem; padding:0 1rem; max-height:38rem; overflow:auto; }
.image-row { display:grid; grid-template-columns:3.3rem minmax(0,1fr); gap:.68rem; padding:.65rem; border:1px solid #243a34; border-radius:.72rem; background:#0d1614; }
.image-preview { width:3.3rem; height:3.3rem; border-radius:.52rem; overflow:hidden; background:#070c0b; }
.image-preview img { width:100%; height:100%; object-fit:cover; }
.image-info { min-width:0; display:flex; flex-direction:column; gap:.18rem; }
.image-info strong,.image-meta,code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.image-info strong { font-size:.8rem; }
.image-meta { color:var(--muted); font-size:.67rem; }
.image-tags { color:#72dba9; font-size:.66rem; }
code { color:#9dd8bd; font-size:.64rem; }
.image-actions { grid-column:2; display:flex; gap:.35rem; }
.empty-state { margin:.5rem 0; color:var(--muted); font-size:.82rem; }
.stacked-form { display:grid; gap:.5rem; margin:0 1rem 1rem; }
.stacked-form input,.stacked-form select { padding:.55rem .65rem; font-size:.78rem; }
.user-row { display:flex; justify-content:space-between; align-items:center; gap:.7rem; padding:.65rem; border:1px solid #243a34; border-radius:.65rem; background:#0d1614; }
.user-row > div:first-child { display:grid; gap:.12rem; }
.user-row strong { font-size:.82rem; }
.user-row span,.audit-row { color:var(--muted); font-size:.69rem; }
.user-actions { display:flex; align-items:center; gap:.28rem; }
.role-select { width:auto; padding:.33rem; font-size:.68rem; }
.audit { margin:1rem; }
.audit summary { color:#cbe5d9; font-size:.76rem; cursor:pointer; }
.audit-list { display:grid; gap:.35rem; max-height:15rem; overflow:auto; padding-top:.65rem; }
.security-card { margin:0 1rem 1rem; padding:1rem; border:1px solid var(--line); border-radius:var(--radius); background:#0c1513; }
.security-card h3 { margin:0 0 .45rem; }
.security-card .stacked-form { margin:1rem 0 0; }
.enrollment-card { text-align:center; }
.mfa-qr { display:block; width:15rem; max-width:100%; margin:1rem auto; padding:.6rem; border-radius:.75rem; background:white; }
.secret-code { display:block; margin:.75rem 0 1rem; padding:.75rem; overflow-wrap:anywhere; white-space:normal; border:1px dashed var(--line-strong); border-radius:.6rem; color:var(--accent); text-align:center; }
.recovery-code-list { margin:.8rem 0; padding:1rem; border-radius:.65rem; background:#07100e; color:#d8fff0; font:600 .9rem/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.08em; }
.session-heading { margin-top:1.5rem; }
.session-list { display:grid; gap:.65rem; padding:0 1rem 1rem; }
.session-row { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.8rem; border:1px solid var(--line); border-radius:.7rem; background:#0c1513; }
.session-row strong,.session-row span { display:block; }
.session-row span { margin-top:.2rem; color:var(--muted); font-size:.75rem; overflow-wrap:anywhere; }

.remote-page { height:100vh; overflow:hidden; background:#000; }
#remote-canvas { width:100%; height:100%; }
#remote-canvas canvas { outline:0; }
.remote-overlay { position:fixed; inset:0; display:grid; place-items:center; padding:2rem; color:var(--text); background:#08110ece; text-align:center; font-size:.9rem; }
.remote-overlay[hidden] { display:none; }

@media (max-width:1000px) {
  .tool-drawer { position:fixed; z-index:5; top:0; right:0; bottom:0; width:min(25rem,92vw); min-width:0; }
}
@media (max-width:700px) {
  .messenger-shell { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 4.6rem; }
  .service-rail { grid-row:2; flex-direction:row; align-items:center; padding:.35rem .5rem; border-top:1px solid var(--line); border-right:0; }
  .rail-brand,.rail-identity { display:none; }
  .service-list,.rail-tools { flex-direction:row; margin:0; }
  .rail-tools { margin-left:auto; }
  .service-button { width:4rem; padding:.25rem; }
  .service-button.active::before { left:25%; top:auto; bottom:-.35rem; width:50%; height:.18rem; border-radius:.2rem .2rem 0 0; }
  .service-button > span:last-child { font-size:.55rem; }
  .service-glyph,.tool-glyph { width:1.9rem; height:1.9rem; }
  .conversation-stage { grid-row:1; min-height:0; }
  .stage-toolbar { align-items:flex-start; min-height:6.6rem; padding:.7rem; }
  .session-controls { align-items:flex-end; flex-direction:column; gap:.45rem; }
  .session-state { font-size:.65rem; }
  .stage-footer { display:none; }
}