/* Aurora Classic surface (moved out of app.css to keep files under 20 KB,charter 13.6). Loaded after app.css;the theme is always dark (charter §12.2,m6101). */
/* ── web_v1 "Aurora Classic" (approved;production web theme) ───────────────
* Dark glass/aurora surface shared with the APK v001. All legacy --sc-* and
* --bs-* tokens are remapped here so every existing component follows v1
* without changing protocol/JS behavior. */
:root{
color-scheme:dark;
--sc-bg:#05080d;
--sc-panel:rgba(14,22,29,.90);
--sc-panel2:rgba(12,19,26,.78);
--sc-field:rgba(17,28,36,.72);
--sc-muted:#8fa4a7;
--sc-out:#1b3d33;
--sc-in:#132029;
--sc-accent:#a8e6c8;
--sc-accent-ink:#072018;
--sc-border:rgba(168,230,200,.14);
--sc-soft:rgba(168,230,200,.10);
--sc-row-hot:rgba(168,230,200,.055);
--bs-body-bg:#05080d;
--bs-body-color:#edf6f2;
--bs-border-color:rgba(168,230,200,.14);
--bs-secondary-color:#8fa4a7;
}
html,body{ height:100%;background:#05080d;color:#edf6f2;}
body{
font-family:"Segoe UI",Roboto,system-ui,-apple-system,sans-serif;
-webkit-font-smoothing:antialiased;
background:
radial-gradient(700px 470px at 10% -6%,rgba(92,207,169,.22),transparent 68%),
radial-gradient(680px 520px at 96% 72%,rgba(102,151,255,.18),transparent 72%),
radial-gradient(560px 380px at 48% 112%,rgba(168,230,200,.07),transparent 74%),
#05080d;
background-attachment:fixed;
}
body::after{
content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.38;
background-image:
radial-gradient(1px 1px at 8% 16%,#fff,transparent),
radial-gradient(1px 1px at 23% 42%,#fff,transparent),
radial-gradient(1px 1px at 37% 12%,#fff,transparent),
radial-gradient(1px 1px at 55% 34%,#fff,transparent),
radial-gradient(1px 1px at 71% 8%,#fff,transparent),
radial-gradient(1px 1px at 84% 57%,#fff,transparent),
radial-gradient(1px 1px at 93% 24%,#fff,transparent),
radial-gradient(1px 1px at 15% 78%,#fff,transparent),
radial-gradient(1px 1px at 65% 82%,#fff,transparent);
background-size:100% 100%;
}
.app{ height:100vh;background:transparent;position:relative;z-index:1;}
.app > .row{
height:100%;padding:5px;gap:18px;flex-wrap:nowrap;align-items:stretch;
}
aside.sidebar,main.chat-area{
border:1px solid var(--sc-border);
border-radius:7px;
background:var(--sc-panel);
box-shadow:0 24px 70px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.045);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
overflow:hidden;
}
aside.sidebar{ flex:0 0 380px;max-width:380px;border-right:0;}
main.chat-area{ flex:1 1 auto;max-width:none;background:var(--sc-panel);}
@media (max-width:900px){
.app > .row{ flex-wrap:wrap;padding:5px;gap:10px;height:auto;min-height:100%;}
aside.sidebar{ flex:1 1 100%;max-width:none;width:100%;}
main.chat-area{ flex:1 1 100%;width:100%;min-height:70vh;}
}
.sidebar-header{
flex:0 0 70px;padding:0 18px;border-bottom:1px solid var(--sc-border);
background:rgba(7,12,17,.40);
}
#brand{ font-size:22px;font-weight:400;letter-spacing:-.6px;}
.lamp{ width:7px;height:7px;border-radius:50%;box-shadow:0 0 10px currentColor;}
#stats{ font-size:10px;letter-spacing:.2px;}
#ver{ font-size:9px;letter-spacing:.4px;}
.sidebar-header .btn,.sidebar-header select{ border-radius:999px;}
/* Entry panel - "glass" variant (charter §12,m9001 2026-11-03):gradient border,
38 px fields,accent-dot labels,one primary CTA;the delete action is an icon
inside the account row (not a glyph next to "Create account"). */
#connect-panel{
margin:14px;padding:18px;border:1px solid transparent;border-radius:22px;
background:
linear-gradient(180deg,rgba(24,30,37,.96),rgba(18,24,30,.98)) padding-box,
linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 42%,rgba(111,147,186,.34)) border-box;
box-shadow:0 22px 60px rgba(0,0,0,.32),inset 0 1px 0 rgba(255,255,255,.05);
}
#connect-panel .form-label{
display:flex;align-items:center;gap:6px;margin:0 0 6px;
font-size:11px;font-weight:600;letter-spacing:.085em;text-transform:uppercase;
color:var(--sc-muted);
}
#connect-panel .form-label::before{
content:"";flex:0 0 4px;width:4px;height:4px;border-radius:50%;
background:var(--sc-accent);box-shadow:0 0 8px var(--sc-accent);
}
#connect-panel .form-control{
height:38px;padding:0 11px;border-radius:11px;
border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.035);
color:var(--bs-body-color);font-size:13.5px;box-shadow:none;
}
#connect-panel .form-control::placeholder{ color:#6e7987;}
#connect-panel .form-control:focus{
border-color:var(--sc-accent);background:rgba(255,255,255,.05);
box-shadow:0 0 0 3px rgba(111,147,186,.18);
}
#connect-panel .pw-wrap{ margin-bottom:14px;}
#connect-panel .pw-wrap .form-control{ padding-right:40px;}
#connect-panel .pw-eye{
top:50%;right:5px;transform:translateY(-50%);width:28px;height:28px;
display:inline-flex;align-items:center;justify-content:center;
border:0;border-radius:8px;background:transparent;color:var(--sc-muted);font-size:0;
}
#connect-panel .pw-eye .ico{ width:16px;height:16px;}
#connect-panel .pw-eye:hover{ color:var(--bs-body-color);background:rgba(255,255,255,.07);}
#connect-panel .auth-account{ display:flex;gap:8px;margin-bottom:14px;}
#connect-panel .auth-select{ position:relative;flex:1 1 auto;min-width:0;}
#connect-panel .auth-select .form-control{
appearance:none;-webkit-appearance:none;padding-right:32px;cursor:pointer;
}
#connect-panel .auth-chev{
position:absolute;right:10px;top:50%;transform:translateY(-50%);
width:14px;height:14px;color:var(--sc-muted);pointer-events:none;
}
#connect-panel .auth-del{
flex:0 0 38px;width:38px;height:38px;display:inline-flex;align-items:center;
justify-content:center;border:1px solid rgba(255,255,255,.10);border-radius:11px;
background:rgba(255,255,255,.03);color:var(--sc-muted);cursor:pointer;
transition:background .15s,border-color .15s,color .15s;
}
#connect-panel .auth-del:hover{
border-color:#a86969;color:#e79a9a;background:rgba(231,154,154,.10);
}
#connect-panel .auth-actions{ display:flex;flex-direction:column;gap:8px;margin-top:16px;}
#connect-panel .btn{ height:38px;border-radius:11px;font-size:12.5px;font-weight:600;}
#connect-panel .auth-primary{
background:linear-gradient(180deg,#8fb2d8,#6f93ba);border:1px solid rgba(255,255,255,.20);
color:var(--sc-accent-ink);
box-shadow:0 8px 24px rgba(111,147,186,.28),inset 0 1px 0 rgba(255,255,255,.40);
}
#connect-panel .auth-primary:hover{ background:linear-gradient(180deg,#9cc0e4,#7ea6cf);}
#connect-panel .auth-split{ display:grid;grid-template-columns:1fr 1fr;gap:8px;}
#connect-panel .auth-outline{
border:1px solid rgba(111,147,186,.55);color:#a9c6e4;background:rgba(255,255,255,.02);
}
#connect-panel .auth-outline:hover{ background:rgba(111,147,186,.14);color:#c3dcf5;}
#connect-panel .auth-ghost{
border:1px solid var(--sc-border);color:var(--bs-body-color);background:rgba(255,255,255,.02);
}
#connect-panel .auth-ghost:hover{ border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);}
#connect-panel .auth-link{
height:30px;border:0;background:none;color:var(--sc-muted);
font-weight:500;font-size:11.5px;
}
#connect-panel .auth-link:hover{ color:var(--bs-body-color);background:rgba(255,255,255,.05);}
#connect-panel #my-name{ margin-bottom:0;}
#connect-panel #pair-panel{ margin-top:12px;}
#connect-panel .btn:focus-visible,#connect-panel .auth-del:focus-visible,
#connect-panel .pw-eye:focus-visible{
outline:2px solid var(--sc-accent);outline-offset:2px;
}
#connect-panel .auth-fine{
margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(255,255,255,.07);
font-size:10.5px;line-height:1.55;color:var(--sc-muted);text-align:center;
}
#contacts-panel{ min-height:0;}
#me-fp{ color:var(--sc-muted);font-size:10.5px;}
/* Charter §12.4 (2026-10-29):the "Your address:" row and its value are white in
the dark skin;the copy action is an SVG icon. */
#address-row,#address-row #address{ color:#fff !important;}
/* Copy action:the single SVG icon from index.html (charter §0,2026-11-02). */
#btn-copy-address{ color:var(--sc-accent);text-decoration:none;}
.ico{ width:1.05em;height:1.05em;display:block;}
.ico-btn{ display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;background:transparent;border:1px solid var(--sc-border);border-radius:9px;color:var(--sc-accent);}
.ico-btn:hover{ background:var(--sc-soft);}
.ico-btn.is-ok{ color:#9ed3a6;border-color:#9ed3a6;}
#contacts{ padding:0 10px 10px;}
.list-group-item{
background:transparent;color:#edf6f2;border:0;border-radius:15px;
padding:9px 10px;margin:3px 0;
}
.list-group-item:hover{ background:var(--sc-row-hot);}
.list-group-item.active{ background:var(--sc-row-hot);box-shadow:inset 2px 0 0 var(--sc-accent);}
.list-group-item .small,.list-group-item .text-secondary{ color:var(--sc-muted) !important;}
.chat-header{
flex:0 0 70px;padding:0 18px;border-bottom:1px solid var(--sc-border);
background:rgba(7,12,17,.55);
}
#peer-name{ font-size:14px;font-weight:680;}
#peer-presence{ font-size:10px;color:var(--sc-accent) !important;}
/* History pagination (charter §12):ghost strip,centered above the message list.
Only page numbers and chevron icons;the active page gets a mint dot (variant 2). */
.chat-pager{
flex:0 0 auto;display:flex;justify-content:center;align-items:center;
padding:9px 12px 7px;
}
.chat-pager[hidden]{ display:none !important;}
.chat-pager .pager{ display:inline-flex;align-items:center;justify-content:center;gap:2px;}
.chat-pager .pg{
display:inline-flex;align-items:center;justify-content:center;
width:30px;height:30px;padding:0;border:0;border-radius:8px;
background:transparent;color:var(--sc-muted);
font:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;
transition:background .12s ease,color .12s ease;
}
.chat-pager .pg:hover{ background:var(--sc-soft);color:#fff;}
.chat-pager .pg:focus-visible{ outline:2px solid var(--sc-accent);outline-offset:1px;}
.chat-pager .pg[disabled]{ opacity:.34;cursor:default;background:transparent;}
.chat-pager .pg svg{ display:block;}
.chat-pager .pg-sep{ width:22px;text-align:center;color:var(--sc-muted);font-size:13px;user-select:none;}
.chat-pager .pg.is-active{ background:transparent;color:var(--sc-accent);position:relative;}
.chat-pager .pg.is-active::after{
content:"";position:absolute;left:50%;bottom:1px;transform:translateX(-50%);
width:4px;height:4px;border-radius:50%;background:var(--sc-accent);
}
.chat-pager .pg.is-active:hover{ background:transparent;color:var(--sc-accent);}
@media (max-width:620px){
.chat-pager{ padding:6px 6px 4px;}
.chat-pager .pg{ width:27px;height:27px;font-size:12px;}
}
#chat{
padding:18px 24px 12px;overflow-y:auto;
background:radial-gradient(520px 380px at 76% 18%,rgba(97,170,255,.06),transparent 72%);
}
.bubble{
width:100%;max-width:100%;padding:0 10px;border-radius:15px;
background:#132029;border:1px solid rgba(255,255,255,.045);
color:#edf6f2;font-size:15px;line-height:1.45;
}
.bubble:not(.out){ border-bottom-left-radius:5px;}
/* Charter §12 (m3406):both directions are left-aligned;only the colour differs. */
.bubble.out{
align-self:stretch;background:#1b3d33;
border-color:rgba(168,230,200,.12);border-bottom-right-radius:5px;
}
.bubble a{ color:var(--sc-accent);}
.bubble code{ background:rgba(168,230,200,.10);color:#dff7ec;border-radius:5px;}
.bubble img{ border-radius:12px;}
.sys-msg,.day{ color:var(--sc-muted);font-size:9px;}
#composer{
flex:0 0 76px;padding:10px 18px 14px;gap:9px;
border-top:1px solid var(--sc-border);background:rgba(7,12,17,.64);
}
#composer #message{
min-height:44px;max-height:100%;border-radius:14px;
background:var(--sc-field);border:1px solid var(--sc-border);color:#edf6f2;
}
#btn-send,#btn-attach{
flex:0 0 38px;width:38px;height:38px;padding:0;border-radius:50%;
background:var(--sc-accent);border-color:var(--sc-accent);color:var(--sc-accent-ink);
font-size:17px;
}
#btn-attach{ background:var(--sc-soft);border-color:var(--sc-border);color:var(--sc-accent);}
#composer-resize{ border-top-color:var(--sc-border);}
#log{ background:rgba(7,12,17,.38);color:var(--sc-muted);font-size:10px;}
/* Charter §12.4 (m3407):the address QR keeps a 10 px quiet zone on white. */
#card-qr{
padding:10px;background:#fff;border-radius:10px;
box-sizing:content-box;
}
#card-str{ font-family:ui-monospace,monospace;}
/* forms,buttons and dialogs */
.form-control,.form-select{
background-color:var(--sc-field);border:1px solid var(--sc-border);
border-radius:13px;color:#edf6f2;color-scheme:dark;
}
/* Native <select> popups are painted by the OS with its own palette unless the
control opts into a dark scheme;without this the account/language lists were
white-on-white against the dark panel (charter §12.2). */
.form-select option,#connect-panel .form-control option{
background-color:#131b22;color:#edf6f2;
}
.form-control::placeholder{ color:var(--sc-muted);}
.form-control:focus,.form-select:focus{
background-color:var(--sc-field);border-color:var(--sc-accent);
color:#edf6f2;box-shadow:0 0 0 3px var(--sc-soft);
}
.form-label,.hint,.text-secondary,.text-body-secondary{ color:var(--sc-muted) !important;}
.btn{ border-radius:13px;font-weight:650;}
/* One gap for every button group (charter §12.2): rows and stacked rows share
   the same 8px step; `display:none` children add no gap. */
.btn-row{ display:flex;gap:8px;}
.btn-stack{ display:flex;flex-direction:column;gap:8px;}
.btn-stack > *{ margin:0;}
.btn-primary{ background:var(--sc-accent);border-color:var(--sc-accent);color:var(--sc-accent-ink);box-shadow:0 10px 26px -12px var(--sc-accent);}
.btn-primary:hover{ background:#b9efd5;border-color:#b9efd5;color:var(--sc-accent-ink);}
.btn-secondary{ background:var(--sc-soft);border-color:var(--sc-border);color:#edf6f2;}
.btn-secondary:hover{ background:rgba(168,230,200,.16);color:#fff;}
.btn-outline-primary{ border-color:var(--sc-border);color:var(--sc-accent);background:transparent;}
.btn-outline-primary:hover{ background:var(--sc-soft);color:var(--sc-accent);}
.btn-outline-secondary{ border-color:var(--sc-border);color:#edf6f2;background:transparent;}
.btn-outline-secondary:hover{ background:var(--sc-soft);}
.btn-outline-danger{ border-color:rgba(255,140,140,.35);color:#ffb4b4;background:transparent;}
.btn-outline-danger:hover{ background:rgba(255,120,120,.14);color:#ffd7d7;}
.form-check-input{ accent-color:var(--sc-accent);}
.card{
background:var(--sc-panel2);border:1px solid var(--sc-border);
border-radius:22px;color:#edf6f2;box-shadow:0 22px 60px rgba(0,0,0,.32);
}
.modal-content,.msg-menu{ background:var(--sc-panel2);border-color:var(--sc-border);color:#edf6f2;}
.msg-menu-item:hover{ background:var(--sc-soft);}
/* The shared modal X is styled once in app.css (charter §12.2). */
.pw-eye{ color:var(--sc-muted);}
.pw-eye:hover{ color:var(--sc-accent);background:var(--sc-soft);}
#btn-lang,[data-bs-theme="dark"] #btn-lang{
color-scheme:dark;background-color:var(--sc-field) !important;
color:#edf6f2 !important;border-color:var(--sc-border) !important;
}
#btn-lang option,#btn-lang optgroup,
[data-bs-theme="dark"] #btn-lang option,[data-bs-theme="dark"] #btn-lang optgroup{
background-color:#0c131a !important;color:#edf6f2 !important;
}
#card-modal,#key-modal,#sessions-modal,#invites-modal,#group-modal,#msg-modal{
background:rgba(0,0,0,.62) !important;
}
/* Shared confirm/notice modal (charter §12):the same glass surface as the
wallet and entry cards,so “Are you sure?” never appears as a bare default
Bootstrap box next to the rest of the interface. */
#msg-modal .card{
padding:18px !important;border-radius:18px;border:1px solid transparent;
background:
linear-gradient(180deg,rgba(24,30,37,.97),rgba(16,22,28,.99)) padding-box,
linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.02) 42%,rgba(111,147,186,.34)) border-box;
box-shadow:0 30px 80px rgba(0,0,0,.55);color:#edf6f2;
}
#msg-modal #msg-title{ font-size:15px;font-weight:650;letter-spacing:-.01em;}
#msg-modal #msg-text{ color:var(--sc-muted);font-size:13px;line-height:1.55;}
#msg-modal .btn{ min-height:34px;border-radius:10px;padding:0 14px;}
#msg-modal .btn-outline-secondary{ color:#edf6f2;}
.apk-qr{ border-color:var(--sc-border);color:var(--sc-muted);border-radius:999px;}
.apk-qr:hover{ color:var(--sc-accent);background:var(--sc-soft);}
/* M82:compact panels requested by the user (charter §12). */
#connect-panel{ border-radius:5px;margin:4px;}
aside.sidebar{border-radius:7px;padding:5px;}
aside.bar{border-radius:5px;padding:5px;}
/* Wallet dialog (charter §7.11.3):the same glass surface as the other modals,
with tabular numbers so balances do not jitter while they load. */
.wallet-modal{ position:fixed;inset:0;z-index:1085;display:flex;align-items:center;justify-content:center;padding:10px;background:rgba(0,0,0,.62);}
.wallet-card{ width:min(560px,100%);border:1px solid var(--sc-border);border-radius:18px;padding:18px;background:var(--sc-panel);box-shadow:0 28px 80px rgba(0,0,0,.5);}
.wallet-head{ display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.wallet-balance{ display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;padding:12px;border:1px solid var(--sc-border);border-radius:14px;background:var(--sc-field);font-variant-numeric:tabular-nums;}
.wallet-balance b{ color:var(--sc-accent);font-weight:650;}
.wallet-balance small{ color:var(--sc-muted);margin-left:5px;font-size:10px;}
.wallet-k{ color:var(--sc-muted);font-size:12px;}
.wallet-row{ display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap;}
.wallet-row code{ color:#fff;word-break:break-all;}
.wallet-ico{ background:transparent;border:1px solid var(--sc-border);border-radius:9px;color:var(--sc-accent);width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;line-height:1.1;}
.wallet-ico:hover{ background:var(--sc-soft);}
.wallet-keyarea{ margin-top:8px;padding-top:6px;border-top:1px dashed var(--sc-border);}
.wallet-warn{ color:#ffca9e;font-size:11.5px;margin:8px 0 0;}
.wallet-keyval{ font-size:11px;color:var(--sc-accent);}
.wallet-actions{ display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
/* Wallet send form (charter 7.11.3):fields stack inside the dialog. */
.wallet-send{ margin-top:12px;padding-top:12px;border-top:1px solid var(--sc-border);display:grid;gap:6px;}
.wallet-send.d-none{ display:none;}
.wallet-send .form-control,.wallet-send .form-select{ background:var(--sc-field);border-color:var(--sc-border);color:#edf6f2;}
.wallet-send .wallet-actions{ margin-top:4px;}
#send-result{ margin:2px 0 0;word-break:break-all;}
#send-result a{ color:var(--sc-accent);}
/* Access payment panel (charter 7.9.1):packages,exact amount,treasury
address,wallet/MetaMask paths. Compact glass surface like the wallet. */
.buy-box{ margin:0 0 8px;}
.buy-panel{ padding:10px;border:1px solid var(--sc-border);border-radius:12px;background:var(--sc-field);display:grid;gap:4px;}
.buy-panel.d-none{ display:none;}
.buy-panel .form-select,.buy-panel .form-control{ background:var(--sc-panel);border-color:var(--sc-border);color:#edf6f2;}
.buy-k{ color:var(--sc-muted);font-size:12px;}
.buy-line{ display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0;font-size:13px;}
.buy-line code{ color:#fff;word-break:break-all;font-size:11.5px;}
.buy-actions{ display:flex;gap:8px;flex-wrap:wrap;margin-top:6px;}
.buy-wallet{ display:grid;gap:4px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--sc-border);}
.buy-wallet.d-none{ display:none;}
.buy-result{ margin:6px 0 0;font-size:11.5px;color:var(--sc-accent);word-break:break-all;}
.buy-result a{ color:var(--sc-accent);}
/* Private-room note badge (charter §7.13):📝 note / 📌 pinned. */
.note-badge{ font-size:12px;line-height:1;opacity:.85;}
/* Label folders above "General" (charter §7.13,M120 S13). */
.folder-head{ padding:2px 8px;opacity:.75;letter-spacing:.04em;}