/* Language Book Messenger: simple, standard UI in the layout of the client's reference screens.
   Deep red header band, flat lists, white cards. Light by default, dark on request. */
/* Concept A (client's vision): vibrant emerald with gold accents. */
:root, [data-theme="light"] {
  color-scheme: light;
  --bg: #f0f6f2; --card: #ffffff; --card2: #f3f8f5; --line: #dce8e1; --line2: #ebf3ee;
  --tx: #0f1d17; --tx2: #58695f; --tx3: #97a89e;
  --head: #047857; --head-grad: linear-gradient(135deg, #064e3b 0%, #047857 38%, #059669 72%, #10b981 100%);
  --on-head: #ffffff; --on-head2: rgba(255, 255, 255, .8); --head-field: rgba(255, 255, 255, .17);
  --accent: #047857; --accent-bright: #10b981; --accent-soft: #e1f5ea; --accent-text: #047857;
  --gold: #e0a100; --gold-soft: #fff6db; --gold-text: #936400;
  --green: #0fa968; --green-soft: #e1f5ea; --red: #e0383e; --orange: #e08a00; --orange-soft: #fdf1da;
  --violet: #6d45d6; --violet-soft: #efe9fd;
  --bin: #ffffff; --bin-line: #dce8e1; --bout: linear-gradient(160deg, #068a61, #047857); --out-tx: #ffffff; --chat-bg: #e7f1eb;
  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "SF Mono", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
}
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a110e; --card: #111b16; --card2: #16221c; --line: #20302a; --line2: #1a2822;
  --tx: #eef5f1; --tx2: #98ada2; --tx3: #5d7068;
  --head: #065f46; --head-grad: linear-gradient(135deg, #052e22 0%, #064e3b 45%, #047857 100%); --head-field: rgba(255, 255, 255, .1);
  --accent: #059669; --accent-bright: #10b981; --accent-soft: rgba(16, 185, 129, .16); --accent-text: #34d399;
  --gold: #e8b020; --gold-soft: rgba(232, 176, 32, .15); --gold-text: #f5c95a;
  --green: #2fc47a; --green-soft: rgba(47, 196, 122, .15); --red: #ff5a5f; --orange: #f2a226; --orange-soft: rgba(242, 162, 38, .15);
  --violet: #a58bfa; --violet-soft: rgba(165, 139, 250, .15);
  --bin: #16221c; --bin-line: #20302a; --bout: #047857; --out-tx: #ffffff; --chat-bg: #0a110e;
}
[hidden] { display: none !important; }

.app { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--tx); font: 16px/1.35 var(--font); -webkit-font-smoothing: antialiased; --sat: max(env(safe-area-inset-top, 0px), 10px); --sab: env(safe-area-inset-bottom, 0px); }
.app.framed { --sat: 48px; --sab: 20px; border-radius: 44px; }
.app *, .app *::before, .app *::after { box-sizing: border-box; }
:where(.app) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; -webkit-tap-highlight-color: transparent; }
.app :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
.app input::placeholder, .app textarea::placeholder { color: var(--tx3); }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* phone chrome */
.sbar { position: absolute; inset: 0 0 auto; height: 48px; z-index: 80; display: flex; align-items: center; justify-content: space-between; padding: 4px 30px 0 40px; font-size: 15px; font-weight: 600; color: #fff; pointer-events: none; font-variant-numeric: tabular-nums; }
.app:has(.scr.auth:last-child) .sbar { color: var(--tx); }
.sb-icons { display: flex; gap: 6px; align-items: center; }
.sb-icons svg { fill: currentColor; }
.island { position: absolute; left: 50%; top: 11px; width: 112px; height: 32px; border-radius: 20px; background: #000; transform: translateX(-50%); }
.homebar { position: absolute; left: 50%; bottom: 7px; width: 130px; height: 5px; border-radius: 3px; background: var(--tx); opacity: .3; transform: translateX(-50%); z-index: 90; pointer-events: none; }

/* screens */
.scr-wrap { position: absolute; inset: 0; }
.scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.scr.in-push { animation: inPush .3s cubic-bezier(.2, .8, .2, 1) both; }
.scr.out-push { animation: outPush .3s cubic-bezier(.2, .8, .2, 1) both; }
.scr.in-pop { animation: inPop .3s cubic-bezier(.2, .8, .2, 1) both; }
.scr.out-pop { animation: outPop .3s cubic-bezier(.2, .8, .2, 1) both; z-index: 2; }
.scr.in-fade > .body { animation: fadeIn .18s ease both; }
@keyframes inPush { from { transform: translateX(100%); } }
@keyframes outPush { to { transform: translateX(-25%); opacity: .6; } }
@keyframes inPop { from { transform: translateX(-25%); opacity: .6; } }
@keyframes outPop { to { transform: translateX(100%); } }
@keyframes fadeIn { from { opacity: 0; } }
.body { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 14px 16px 24px; scrollbar-width: none; overscroll-behavior: contain; }
.body::-webkit-scrollbar { display: none; }

/* header band (as in the reference screens) */
.hd { flex: none; background: var(--head-grad, var(--head)); color: var(--on-head); padding: calc(var(--sat) + 6px) 18px 16px; }
.hd-top { display: flex; align-items: center; gap: 12px; }
.hd-av { flex: none; display: block; }
.hd-av .av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .28); }
.hd-t { flex: 1; min-width: 0; }
.hd-t small { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--on-head2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-t small .ic { width: 13px; height: 13px; color: #8ee6b4; }
.hd-t h1 { margin: 2px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.hd-r { display: flex; gap: 8px; flex: none; }
.hd-btn { position: relative; width: 42px; height: 42px; border-radius: 21px; background: var(--head-field); display: grid; place-items: center; color: #fff; }
.hd-btn .ic { width: 21px; height: 21px; }
.hd-dot { position: absolute; top: 9px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: #f5b83d; box-shadow: 0 0 0 2px var(--head); }
.hd-search { display: flex; align-items: center; gap: 10px; margin-top: 14px; height: 46px; padding: 0 14px; border-radius: 14px; background: var(--head-field); color: var(--on-head2); }
.hd-search .ic { width: 19px; height: 19px; }
.hd-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: #fff; font: inherit; font-size: 16px; }
.hd-search input::placeholder { color: var(--on-head2); }
.hd .seg { margin-top: 14px; background: var(--head-field); border: 0; }
.hd .seg button { color: var(--on-head2); }
.hd .seg button.on { background: #fff; color: var(--head); }

/* compact nav (chat and sign-in steps) */
.nav { flex: none; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; padding: var(--sat) 10px 10px 6px; min-height: calc(var(--sat) + 56px); background: var(--head-grad, var(--head)); color: var(--on-head); }
.nav-l { min-width: 0; }
.nav-c { min-width: 0; display: flex; }
.nav-r { display: flex; gap: 6px; }
.nav-title { font-weight: 700; font-size: 17px; }
.nav-back { display: flex; align-items: center; padding: 6px 2px; color: inherit; }
.nav-back span { display: none; }
.nav-back .ic { width: 28px; height: 28px; stroke-width: 2.4; }
.nav-ico { width: 42px; height: 42px; border-radius: 21px; display: grid; place-items: center; color: #fff; background: var(--head-field); font-size: 13px; letter-spacing: 1px; }
.nav-ico .ic { width: 21px; height: 21px; }
.scr.auth .nav { background: transparent; color: var(--tx); }
.thead { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; }
.thead > span:last-child { min-width: 0; }
.thead b { display: block; font-size: 16.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 190px; }
.thead small { display: block; font-size: 12.5px; color: var(--on-head2); white-space: nowrap; }
.thead small.green { color: #93efbd; } .thead small.blue { color: #fff; } .thead small.orange { color: #ffd38c; }
.thead-btn { display: block; min-width: 0; }

/* tab bar with a centre action button */
.tabbar { flex: none; position: relative; display: flex; align-items: flex-end; padding: 6px 4px calc(max(var(--sab), 6px) + 2px); background: var(--card); border-top: 1px solid var(--line); }
.tab { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; font-size: 11.5px; font-weight: 600; color: var(--tx3); text-align: center; }
.tab.on { color: var(--accent-text); }
.tab-i { position: relative; display: block; }
.tab-i .ic { width: 26px; height: 26px; }
.tab.on .ic { stroke-width: 2.3; }
.tab .badge { position: absolute; top: -6px; left: 15px; min-width: 20px; height: 20px; font-size: 11.5px; box-shadow: 0 0 0 2px var(--card); }
.fab { flex: none; align-self: center; width: 58px; height: 58px; border-radius: 29px; margin: -30px 6px 0; background: var(--accent); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 5px var(--card), 0 6px 14px rgba(125, 20, 39, .3); }
.fab .ic { width: 25px; height: 25px; }

/* avatars, dots, badges, tags */
.av { width: var(--s); height: var(--s); border-radius: 50%; display: inline-grid; place-items: center; background: var(--ab, #e9ebf0); color: var(--af, #555); font-weight: 700; font-size: calc(var(--s) * .36); letter-spacing: .01em; flex: none; user-select: none; }
[data-theme="dark"] .av:not(.logo) { background: color-mix(in srgb, var(--af, #888) 30%, #17191f); color: color-mix(in srgb, var(--af, #888) 45%, #fff); }
.av.logo { background: #161616; border-radius: 28%; overflow: hidden; }
.av.logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avw { position: relative; flex: none; display: block; }
.dot { position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; border-radius: 50%; border: 2.5px solid var(--bg); background: var(--green); }
.dot.away { background: var(--orange); } .dot.off { background: #b8bdc9; }
.badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--green); color: #fff; font-size: 12.5px; font-weight: 700; font-style: normal; line-height: 1; flex: none; }
.badge.red { background: var(--red); }
.vf { width: 17px; height: 17px; flex: none; }
.tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 8px; background: var(--card2); color: var(--tx2); flex: none; border: 1px solid var(--line); }
.tag .ic { width: 12px; height: 12px; }
.tag.main { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.tag.red { background: var(--accent-soft); color: var(--red); border-color: transparent; }
.tag.ai { background: var(--violet-soft); color: var(--violet); border-color: transparent; }

/* chips + flat lists */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px 8px; padding: 2px 16px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chipf { flex: none; padding: 9px 17px; border-radius: 22px; font-size: 14.5px; font-weight: 600; background: var(--card); color: var(--tx); border: 1px solid var(--line); }
.chipf.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.list { margin: 0 -16px; }
.row.chat { display: flex; gap: 14px; width: 100%; padding: 11px 16px; align-items: center; text-align: left; }
.row.chat:active { background: var(--card2); }
.rmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rtop { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rtop b { font-weight: 700; font-size: 16.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; min-width: 0; }
.rtop time { margin-left: auto; font-size: 13.5px; color: var(--tx3); flex: none; font-variant-numeric: tabular-nums; }
.row.unread .rtop time { color: var(--green); font-weight: 600; }
.rbot { display: flex; align-items: center; gap: 8px; min-height: 20px; }
.prev { flex: 1; min-width: 0; color: var(--tx2); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prev em { font-style: normal; color: var(--green); }
.prev em.ai { color: var(--violet); }
.muted { color: var(--tx3); }
.pinic { width: 15px !important; height: 15px !important; color: var(--tx3); }

/* cards, groups, settings rows */
.note { display: flex; gap: 12px; padding: 14px; margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.note > .ic { width: 20px; height: 20px; color: var(--accent-text); margin-top: 1px; }
.note b { font-size: 15px; }
.note p { margin: 3px 0 0; font-size: 13.5px; color: var(--tx2); line-height: 1.45; }
.sec-h { font-size: 12.5px; font-weight: 700; color: var(--tx3); letter-spacing: .06em; text-transform: uppercase; margin: 22px 4px 8px; display: flex; align-items: center; justify-content: space-between; }
.body > .sec-h:first-child, .body > div > .sec-h:first-child { margin-top: 4px; }
.group { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.group + .group { margin-top: 16px; }
.group > .row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; min-height: 52px; text-align: left; }
.group > .row + .row { border-top: 1px solid var(--line2); }
.row.kv > span:first-child { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; font-size: 15.5px; }
.row.kv .ic { width: 20px; height: 20px; color: var(--tx2); }
.row.kv > b { font-weight: 500; color: var(--tx2); font-size: 14px; text-align: right; }
.row.kv .two { display: flex; flex-direction: column; min-width: 0; }
.row.kv .two b { font-size: 15px; } .row.kv .two small { font-size: 12.5px; color: var(--tx2); }
.chev { width: 18px !important; height: 18px !important; color: var(--tx3) !important; }
.row.danger, .row.danger .ic { color: var(--red) !important; }
.row.mem small, .row.inv small, .row.audit small { display: block; font-size: 13px; color: var(--tx2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row.mem .rtop b, .row.inv .rtop b { font-size: 15.5px; }
.row.audit b { font-size: 14px; font-weight: 600; white-space: normal; }
.foot { font-size: 13px; color: var(--tx2); margin: 8px 4px 0; line-height: 1.45; }
.foot .ic { width: 13px; height: 13px; vertical-align: -2px; }
.empty { text-align: center; color: var(--tx2); font-size: 14px; padding: 22px 12px; }
.tgl { width: 50px; height: 30px; border-radius: 15px; background: #d4d7df; position: relative; flex: none; transition: background .2s; }
[data-theme="dark"] .tgl { background: #3a3e48; }
.tgl i { position: absolute; top: 2px; left: 2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.tgl.on { background: var(--green); }
.tgl.on i { transform: translateX(20px); }
.seg { display: flex; background: var(--card2); border: 1px solid var(--line); padding: 3px; border-radius: 13px; gap: 2px; }
.seg button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--tx2); }
.seg button.on { background: var(--accent); color: #fff; }
.seg .ic { width: 16px; height: 16px; }
.seg.sm button { padding: 5px 10px; font-size: 13px; }
.sdot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats > div { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.stats b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stats small { font-size: 12px; color: var(--tx2); }
.profile { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 14px; }
.profile > div { min-width: 0; }
.profile b { display: block; font-size: 18px; }
.profile small { font-size: 13.5px; color: var(--tx2); overflow-wrap: anywhere; }

/* admin status card */
.statuscard { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.sc-top { display: flex; gap: 12px; align-items: center; }
.sc-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; background: var(--green-soft); color: var(--green); }
.statuscard.away .sc-ic { background: var(--violet-soft); color: var(--violet); }
.sc-top b { font-size: 16px; }
.sc-top p { margin: 2px 0 0; font-size: 13.5px; color: var(--tx2); line-height: 1.4; }
.statuscard.active .seg button.on { background: var(--green); }
.statuscard.away .seg button.on { background: var(--orange); }
.sc-ai { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; padding-top: 12px; border-top: 1px solid var(--line2); }
.sc-ai span { display: flex; gap: 8px; align-items: center; }
.sc-ai .ic { width: 18px; height: 18px; color: var(--violet); }
.team-strip { display: flex; align-items: center; padding-top: 12px; border-top: 1px solid var(--line2); }
.team-strip .avw { margin-right: -6px; }
.team-strip .av { box-shadow: 0 0 0 2px var(--card); font-size: 9.5px; }
.team-strip .dot { width: 9px; height: 9px; border-width: 1.5px; border-color: var(--card); }
.team-strip > span:last-child { margin-left: 16px; font-size: 13px; color: var(--tx2); }