:root{
  --bg:#0b0b0f; --bg-2:#0e0e13;
  --surface:#15151c; --elevated:#1b1b23; --hover:#22222c;
  --border:rgba(255,255,255,.08); --border-strong:rgba(255,255,255,.14);
  --text:#ececf1; --muted:#9a9aa8; --faint:#6a6a78;
  --accent:#6d5efc; --accent-2:#9d8bff; --accent-glow:rgba(109,94,252,.45);
  --user-bubble:#1d1e27; --code-bg:#0c0c11; --danger:#ff5c6c; --ok:#3ddc97;
  --radius:14px; --radius-lg:20px;
  --shadow:0 8px 30px rgba(0,0,0,.4);
  --shadow-lg:0 20px 60px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow:hidden}
[hidden]{display:none !important}
button,input,textarea,select{font:inherit;color:inherit}
::selection{background:var(--accent-glow)}
.muted{color:var(--muted)} .err{color:var(--danger);font-size:.85rem;text-align:center}

/* Hintergrund-Glow */
.bg-glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(680px 380px at 78% -8%, rgba(109,94,252,.16), transparent 70%),
    radial-gradient(560px 360px at 8% 108%, rgba(61,220,151,.06), transparent 70%);}

/* Icons */
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;vertical-align:-.15em}

/* Logo-Orb */
.logo-orb{display:inline-block;width:26px;height:26px;border-radius:9px;
  background:conic-gradient(from 200deg,var(--accent),var(--accent-2),#5ad,var(--accent));
  box-shadow:0 0 22px var(--accent-glow),inset 0 0 8px rgba(255,255,255,.25);
  position:relative}
.logo-orb.sm{width:20px;height:20px;border-radius:7px}
.logo-orb::after{content:"";position:absolute;inset:4px;border-radius:inherit;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.55),transparent 60%)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--elevated);border:1px solid var(--border);color:var(--text);
  padding:10px 16px;border-radius:11px;cursor:pointer;font-weight:600;transition:.16s;white-space:nowrap}
.btn:hover{border-color:var(--border-strong);background:var(--hover);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border-color:transparent;color:#fff;
  box-shadow:0 6px 20px -6px var(--accent-glow)}
.btn.primary:hover{box-shadow:0 10px 26px -6px var(--accent-glow);filter:brightness(1.06)}
.btn.block{width:100%} .btn.lg{padding:13px 18px;font-size:1rem;border-radius:13px}
.btn.small{padding:7px 13px;font-size:.85rem;border-radius:9px}
.icon-btn{display:grid;place-items:center;background:transparent;border:1px solid transparent;
  color:var(--muted);cursor:pointer;font-size:1.15rem;width:38px;height:38px;border-radius:10px;transition:.15s}
.icon-btn:hover{color:var(--text);background:var(--surface);border-color:var(--border)}
.icon-btn.sm{width:30px;height:30px;font-size:1rem}

/* ---------- Login ---------- */
.login-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;
  background:radial-gradient(900px 500px at 50% -10%,rgba(109,94,252,.18),transparent 65%),var(--bg)}
.login-card{position:relative;width:min(380px,92vw);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01));
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:38px 32px;text-align:center;
  box-shadow:var(--shadow-lg);backdrop-filter:blur(12px)}
.login-logo{display:flex;justify-content:center;margin-bottom:16px}
.login-logo .logo-orb{width:52px;height:52px;border-radius:16px}
.login-title{margin:0;font-size:1.9rem;font-weight:800;letter-spacing:-.02em}
.login-sub{color:var(--muted);margin:6px 0 26px;font-size:.92rem}
.login-divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:.8rem;margin:18px 0 14px}
.login-divider::before,.login-divider::after{content:"";flex:1;height:1px;background:var(--border)}
.login-card input{width:100%;background:var(--surface);border:1px solid var(--border);
  padding:12px 14px;border-radius:11px;outline:none;margin-bottom:10px;transition:.15s}
.login-card input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.ragnaid-mark{width:16px;height:16px;border-radius:5px;background:conic-gradient(from 160deg,#fff,#cfc6ff,#fff)}

/* ---------- Layout ---------- */
.app{position:relative;z-index:1;display:flex;height:100vh;overflow:hidden}
.sidebar{width:280px;flex-shrink:0;background:rgba(18,18,24,.72);backdrop-filter:blur(14px);
  border-right:1px solid var(--border);display:flex;flex-direction:column;transition:margin .22s ease}
.sidebar.collapsed{margin-left:-280px}
.side-head{padding:16px 14px 12px;display:flex;flex-direction:column;gap:14px}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:-.01em;font-size:1.05rem}
.new-btn{font-size:.92rem}
.side-scroll{flex:1;overflow-y:auto;padding:6px 8px}
.side-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);
  padding:8px 8px 6px;font-weight:600}
.conv{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:10px;cursor:pointer;
  color:var(--muted);transition:.13s;position:relative;margin-bottom:2px}
.conv::before{content:"";position:absolute;left:0;top:50%;translate:0 -50%;width:3px;height:0;
  background:var(--accent);border-radius:3px;transition:height .18s}
.conv:hover{background:var(--surface);color:var(--text)}
.conv.active{background:var(--surface);color:var(--text)}
.conv.active::before{height:60%}
.conv .title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem}
.conv .del{opacity:0;border:none;background:transparent;color:var(--faint);cursor:pointer;
  font-size:.9rem;padding:3px 5px;border-radius:6px;transition:.13s}
.conv:hover .del{opacity:1}
.conv .del:hover{color:var(--danger);background:rgba(255,92,108,.12)}
.side-foot{padding:10px 12px;border-top:1px solid var(--border)}
.user-chip{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 8px;border-radius:11px;transition:.15s}
.user-chip:hover{background:var(--surface)}
.user-ava{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:.8rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;flex-shrink:0}
.user-name{flex:1;font-size:.88rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:10px;padding:11px 16px;
  border-bottom:1px solid var(--border);background:rgba(11,11,15,.55);backdrop-filter:blur(10px)}
.spacer{flex:1}
.model-pill{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);
  padding:6px 10px 6px 12px;border-radius:11px;transition:.15s;cursor:pointer}
.model-pill:hover{border-color:var(--border-strong)}
.model-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.model-pill select{background:transparent;border:none;outline:none;cursor:pointer;font-weight:600;
  max-width:200px;padding-right:2px;appearance:none;-webkit-appearance:none}
.model-pill select option{background:var(--elevated);color:var(--text)}
.model-pill .chev{width:15px;height:15px;color:var(--muted)}

/* Settings */
.settings-panel{padding:16px;border-bottom:1px solid var(--border);background:var(--bg-2);
  animation:slideDown .2s ease}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.settings-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;max-width:900px;margin:0 auto}
.field{display:flex;flex-direction:column;gap:7px}
.field-label{font-size:.82rem;color:var(--muted);font-weight:600}
.field-label b{color:var(--accent-2)}
.field-hint{font-size:.74rem;color:var(--faint)}
.settings-panel textarea{background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:10px;resize:vertical;outline:none;color:var(--text);transition:.15s}
.settings-panel textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.settings-panel input[type=range]{accent-color:var(--accent);width:100%}
.settings-actions{max-width:900px;margin:14px auto 0;display:flex;justify-content:flex-end}
@media(max-width:640px){.settings-grid{grid-template-columns:1fr}}

/* ---------- Messages ---------- */
.messages{flex:1;overflow-y:auto;padding:28px 0;overflow-anchor:none}
.msg .content{contain:layout style}
.msg{max-width:840px;margin:0 auto 26px;padding:0 22px;display:flex;gap:15px;animation:fadeUp .28s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg .avatar{width:32px;height:32px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;
  font-size:.72rem;font-weight:700;letter-spacing:.02em}
.msg.user .avatar{background:var(--user-bubble);border:1px solid var(--border-strong);color:var(--muted)}
.msg.assistant .avatar{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  box-shadow:0 4px 14px -4px var(--accent-glow)}
.msg .body{flex:1;min-width:0}
.msg .role{font-size:.76rem;color:var(--faint);margin-bottom:5px;font-weight:600;letter-spacing:.01em}
.msg.user .content{background:var(--user-bubble);border:1px solid var(--border);border-radius:4px 14px 14px 14px;
  padding:11px 15px;display:inline-block;max-width:100%}
.msg .content{overflow-wrap:break-word}
.msg .content>*:first-child{margin-top:0}.msg .content>*:last-child{margin-bottom:0}
.msg .content p{margin:.55em 0}
.msg .content ul,.msg .content ol{margin:.55em 0;padding-left:1.4em}
.msg .content li{margin:.18em 0}
.msg .content h1,.msg .content h2,.msg .content h3{margin:.85em 0 .35em;line-height:1.3;font-weight:700}
.msg .content h1{font-size:1.3rem}.msg .content h2{font-size:1.15rem}.msg .content h3{font-size:1.03rem}
.msg .content a{color:var(--accent-2);text-decoration:none;border-bottom:1px solid rgba(157,139,255,.35)}
.msg .content a:hover{border-color:var(--accent-2)}
.msg .content blockquote{border-left:3px solid var(--accent);margin:.6em 0;padding:.15em 0 .15em 14px;color:var(--muted)}
.msg .content hr{border:none;border-top:1px solid var(--border);margin:1em 0}
.msg .content code.inline{background:var(--code-bg);border:1px solid var(--border);padding:1px 6px;border-radius:6px;
  font-size:.86em;font-family:"JetBrains Mono",ui-monospace,monospace}
.codeblock{background:var(--code-bg);border:1px solid var(--border);border-radius:12px;margin:.75em 0;overflow:hidden}
.codeblock .cb-head{display:flex;justify-content:space-between;align-items:center;padding:7px 13px;
  border-bottom:1px solid var(--border);font-size:.74rem;color:var(--muted);
  font-family:"JetBrains Mono",monospace;background:rgba(255,255,255,.02)}
.codeblock .copy{background:transparent;border:none;color:var(--muted);cursor:pointer;font-size:.74rem;
  padding:2px 7px;border-radius:6px;transition:.13s}
.codeblock .copy:hover{color:var(--text);background:var(--hover)}
.codeblock--open{border-color:rgba(109,94,252,.4);box-shadow:0 0 0 3px rgba(109,94,252,.08)}
.cb-live{color:var(--accent-2);font-size:.72rem;display:inline-flex;align-items:center;gap:5px;
  animation:pulse 1.3s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.codeblock pre{margin:0;padding:14px;overflow-x:auto}
.codeblock code{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:.85rem;line-height:1.55}
.msg .actions{display:flex;gap:4px;margin-top:8px;opacity:0;transition:.15s}
.msg:hover .actions{opacity:1}
.msg .actions button{display:inline-flex;align-items:center;gap:5px;background:transparent;border:1px solid transparent;
  color:var(--faint);cursor:pointer;font-size:.76rem;padding:4px 9px;border-radius:8px;transition:.13s}
.msg .actions button:hover{color:var(--text);background:var(--surface);border-color:var(--border)}
.cursor-blink{display:inline-block;width:8px;height:1.05em;background:var(--accent-2);border-radius:2px;
  vertical-align:text-bottom;animation:blink 1s steps(2) infinite;margin-left:2px}
@keyframes blink{50%{opacity:0}}

/* Willkommens-Screen */
.welcome{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;padding:24px;text-align:center;animation:fadeUp .4s ease}
.welcome .logo-orb{width:60px;height:60px;border-radius:18px;margin-bottom:6px}
.welcome h2{margin:0;font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.welcome p{color:var(--muted);margin:0 0 22px}
.suggestions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  width:100%;max-width:640px}
.sugg{text-align:left;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01));
  border:1px solid var(--border);border-radius:14px;padding:14px 16px;cursor:pointer;transition:.16s}
.sugg:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.sugg .st{font-weight:600;font-size:.92rem;margin-bottom:3px}
.sugg .sd{font-size:.82rem;color:var(--faint)}
@media(max-width:560px){.suggestions{grid-template-columns:1fr}}

/* ---------- Composer ---------- */
.composer{padding:14px 16px 16px;background:linear-gradient(180deg,transparent,var(--bg) 40%)}
.composer-inner{max-width:840px;margin:0 auto;display:flex;gap:8px;align-items:flex-end;
  background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:8px 8px 8px 16px;
  transition:.18s;box-shadow:var(--shadow)}
.composer-inner:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow),var(--shadow)}
.composer textarea{flex:1;background:transparent;border:none;outline:none;resize:none;
  max-height:220px;padding:8px 0;color:var(--text);line-height:1.5}
.composer textarea::placeholder{color:var(--faint)}
.send-btn{width:40px;height:40px;flex-shrink:0;border:none;border-radius:12px;cursor:pointer;
  display:grid;place-items:center;font-size:1rem;transition:.16s;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;
  box-shadow:0 6px 16px -6px var(--accent-glow)}
.send-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.send-btn.stop{background:var(--danger);box-shadow:0 6px 16px -6px rgba(255,92,108,.5)}
.send-btn:disabled{opacity:.4;cursor:default;transform:none}
.composer-hint{text-align:center;font-size:.73rem;color:var(--faint);margin-top:10px}

/* ---------- Modal / API-Panel ---------- */
.modal-overlay{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:20px;
  background:rgba(0,0,0,.6);backdrop-filter:blur(6px);animation:fadeUp .18s ease}
.modal{width:min(620px,94vw);max-height:88vh;overflow-y:auto;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg)}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
  border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}
.modal-head h3{margin:0;font-size:1.15rem;font-weight:700}
.modal-body{padding:20px}
.api-url{display:block;background:var(--code-bg);border:1px solid var(--border);border-radius:9px;
  padding:9px 12px;font-family:"JetBrains Mono",monospace;font-size:.85rem;color:var(--accent-2)}
.api-curl{background:var(--code-bg);border:1px solid var(--border);border-radius:10px;padding:12px;
  overflow-x:auto;margin:6px 0 0}
.api-curl code{font-family:"JetBrains Mono",monospace;font-size:.78rem;line-height:1.5;color:var(--text)}
.new-key-box{margin-top:18px;background:rgba(61,220,151,.08);border:1px solid rgba(61,220,151,.35);
  border-radius:12px;padding:14px}
.nk-warn{font-size:.82rem;color:var(--ok);margin-bottom:10px}
.key-reveal{display:flex;gap:8px;align-items:center}
.key-reveal code{flex:1;background:var(--code-bg);border:1px solid var(--border);border-radius:8px;
  padding:9px 12px;font-family:"JetBrains Mono",monospace;font-size:.82rem;overflow-x:auto;white-space:nowrap}
.keys-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 12px}
.keys-head h4{margin:0;font-size:1rem}
.keys-list{display:flex;flex-direction:column;gap:10px}
.key-item{display:flex;align-items:center;gap:12px;background:var(--elevated);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px}
.key-item .ki-main{flex:1;min-width:0}
.key-item .ki-name{font-weight:600;font-size:.92rem}
.key-item .ki-meta{font-size:.76rem;color:var(--faint);font-family:"JetBrains Mono",monospace;margin-top:2px}
.key-item .ki-usage{text-align:right;font-size:.78rem;color:var(--muted);white-space:nowrap}
.key-item .ki-bar{width:90px;height:5px;border-radius:3px;background:var(--border);overflow:hidden;margin-top:4px}
.key-item .ki-bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.key-item .ki-del{border:none;background:transparent;color:var(--faint);cursor:pointer;font-size:1rem;
  padding:4px 6px;border-radius:7px}
.key-item .ki-del:hover{color:var(--danger);background:rgba(255,92,108,.12)}
.keys-empty{color:var(--faint);font-size:.86rem;text-align:center;padding:16px}

/* User-Chip Rolle/Level */
.user-meta{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.user-role{font-size:.7rem;color:var(--faint);display:flex;align-items:center;gap:5px}
.lvl-badge{display:inline-flex;align-items:center;gap:3px;font-size:.64rem;font-weight:700;
  padding:1px 6px;border-radius:20px;background:rgba(109,94,252,.16);color:var(--accent-2);border:1px solid rgba(109,94,252,.3)}
.lvl-badge.admin{background:linear-gradient(135deg,rgba(255,193,80,.18),rgba(255,140,80,.14));
  color:#ffc866;border-color:rgba(255,193,80,.35)}
.admin-entry{margin-bottom:10px;color:var(--accent-2)}
.admin-entry:hover{border-color:var(--accent)}

/* Admin-Dashboard */
.modal-lg{width:min(880px,96vw)}
.admin-tabs{display:flex;gap:4px;padding:0 20px;border-bottom:1px solid var(--border);
  position:sticky;top:61px;background:var(--surface);z-index:1}
.atab{background:transparent;border:none;color:var(--muted);cursor:pointer;padding:12px 14px;
  font-weight:600;font-size:.9rem;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s}
.atab:hover{color:var(--text)}
.atab.is-active{color:var(--accent-2);border-bottom-color:var(--accent)}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat-card{background:var(--elevated);border:1px solid var(--border);border-radius:14px;padding:16px}
.stat-card .sv{font-size:1.7rem;font-weight:800;letter-spacing:-.02em}
.stat-card .sl{font-size:.78rem;color:var(--muted);margin-top:2px}
.model-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.mchip{font-size:.8rem;background:var(--elevated);border:1px solid var(--border);border-radius:20px;
  padding:5px 12px;font-family:"JetBrains Mono",monospace}
.mchip.cloud{border-color:rgba(109,94,252,.4);color:var(--accent-2)}
.admin-users{display:flex;flex-direction:column;gap:8px}
.urow{display:grid;grid-template-columns:1fr auto auto auto;align-items:center;gap:12px;
  background:var(--elevated);border:1px solid var(--border);border-radius:12px;padding:11px 14px}
.urow.blocked{opacity:.55}
.urow .u-name{font-weight:600;font-size:.92rem;display:flex;align-items:center;gap:7px}
.urow .u-sub{font-size:.72rem;color:var(--faint);font-family:"JetBrains Mono",monospace;margin-top:2px}
.urow .u-usage{font-size:.8rem;color:var(--muted);text-align:right;white-space:nowrap}
.urow .u-limit{display:flex;align-items:center;gap:6px}
.urow .u-limit input{width:74px;background:var(--surface);border:1px solid var(--border);border-radius:8px;
  padding:6px 8px;outline:none;text-align:right}
.urow .u-limit input:focus{border-color:var(--accent)}
.urow .u-block{border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;
  padding:6px 11px;border-radius:9px;font-size:.8rem;font-weight:600;transition:.15s;white-space:nowrap}
.urow .u-block:hover{border-color:var(--danger);color:var(--danger)}
.urow.blocked .u-block{color:var(--ok);border-color:rgba(61,220,151,.4)}
.cfg-section{background:var(--elevated);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:14px}
.cfg-section h4{margin:0 0 4px;font-size:.98rem}
.cfg-section .field{margin-top:12px}
.cfg-section input{background:var(--surface);border:1px solid var(--border);border-radius:9px;
  padding:10px 12px;outline:none;color:var(--text);width:100%;transition:.15s}
.cfg-section input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.cfg-row{display:flex;gap:12px}
.cfg-row .field{flex:1}
.offers-tbl{width:100%;border-collapse:collapse;margin-top:12px;font-size:.82rem}
.offers-tbl th{text-align:left;color:var(--faint);font-weight:600;padding:6px 10px;border-bottom:1px solid var(--border)}
.offers-tbl td{padding:8px 10px;border-bottom:1px solid var(--border)}
.offers-tbl td.dph{color:var(--ok);font-weight:700;font-family:"JetBrains Mono",monospace}
.offers-tbl tr:hover td{background:var(--elevated)}
.offers-note{font-size:.8rem;color:var(--muted);margin-top:10px}

/* Scrollbars */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.09);border-radius:6px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16);background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

@media(max-width:760px){
  .sidebar{position:absolute;z-index:20;height:100%;box-shadow:var(--shadow-lg)}
  .msg{padding:0 14px} .messages{padding:20px 0}
}