/* StarChat - own stylesheet (charter 13.6/13.7: no CSS frameworks).
 *
 * Replaces vendor/bootstrap.min.css (227 KB) with just the subset this page
 * uses. Class names and the --bs-* tokens are kept so the rest of the markup
 * and the inline pastel block keep working unchanged.
 * The theme is always dark (charter 12.2, m6101): one palette on :root.
 */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  --sc-bg: #1e232a;
  --sc-panel: #262c34;
  --sc-muted: #9aa4b2;
  --sc-out: #2f4030;
  --sc-in: #2b323b;
  --sc-accent: #6f93ba;
  --sc-accent-ink: #0d1620;
  --sc-border: #3a434e;
  --bs-body-bg: var(--sc-bg);
  --bs-body-color: #e6ebf1;
  --bs-border-color: var(--sc-border);
}

/* ── reset / base ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
}
h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; font-weight: 600; line-height: 1.25; }
h6 { font-size: 1rem; }
p { margin: 0 0 .5rem; }
small, .small { font-size: .875em; }
a { color: var(--sc-accent); }
button, input, textarea, select { font: inherit; color: inherit; }
code { word-break: break-all; }

/* ── layout ─────────────────────────────────────────────────────────────── */
.container-fluid { width: 100%; }
.app { height: 100vh; display: flex; flex-direction: column; }
.row { display: flex; flex-wrap: wrap; }
.h-100 { height: 100%; }
.g-0 { gap: 0; }

.col-12 { flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
}
@media (min-width: 992px) {
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
}

aside.sidebar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sc-panel);
}
main, .chat-area {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--sc-bg);
}

/* ── flex / spacing utilities ───────────────────────────────────────────── */
.d-flex { display: flex; }
.d-none { display: none !important; }
.flex-column { flex-direction: column; }
.flex-grow-1 { flex-grow: 1; }
.flex-fill { flex: 1 1 auto; }
.align-items-center { align-items: center; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.p-0 { padding: 0; }
.p-2 { padding: .5rem; }
.p-3 { padding: 1rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.pt-2 { padding-top: .5rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.ms-2 { margin-left: .5rem; }
.me-auto { margin-right: auto; }
.me-2 { margin-right: .5rem; }
.w-100 { width: 100%; }
.text-center { text-align: center; }
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overflow-auto { overflow: auto; }
.rounded { border-radius: .375rem; }
.border { border: 1px solid var(--bs-border-color); }
.border-top { border-top: 1px solid var(--bs-border-color); }
.border-bottom { border-bottom: 1px solid var(--bs-border-color); }
.border-end { border-right: 1px solid var(--bs-border-color); }
.text-secondary, .text-body-secondary { color: var(--sc-muted) !important; }
.text-decoration-none { text-decoration: none; }
.link-secondary { color: var(--sc-muted); }
.link-secondary:hover { color: var(--sc-accent); }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  padding: .375rem .75rem;
  border: 1px solid transparent;
  border-radius: .375rem;
  background: var(--sc-panel);
  color: var(--bs-body-color);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s;
}
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-sm { padding: .2rem .5rem; font-size: .85rem; }
.btn-primary {
  background: var(--sc-accent);
  border-color: var(--sc-accent);
  color: var(--sc-accent-ink);
}
.btn-primary:hover { background: #6f9bc9; border-color: #6f9bc9; }
.btn-success { background: #9ed3a6; border-color: #9ed3a6; color: #17321c; }
.btn-success:hover { background: #8cc796; border-color: #8cc796; }
.btn-secondary { background: #c6ccd4; border-color: #c6ccd4; color: #1f2833; }
[data-bs-theme="dark"] .btn-secondary { background: #4a5460; border-color: #4a5460; color: #e6ebf1; }
.btn-outline-primary { border-color: var(--sc-accent); color: var(--sc-accent); background: transparent; }
.btn-outline-primary:hover { background: var(--sc-accent); color: var(--sc-accent-ink); }
.btn-outline-secondary { border-color: var(--bs-border-color); color: var(--bs-body-color); background: transparent; }
.btn-outline-secondary:hover { background: rgba(127, 127, 127, .12); }
.btn-outline-danger { border-color: #d98b8b; color: #b44a4a; background: transparent; }
.btn-outline-danger:hover { background: #d98b8b; color: #fff; }
[data-bs-theme="dark"] .btn-outline-danger { border-color: #a86969; color: #e79a9a; }

/* ── forms ──────────────────────────────────────────────────────────────── */
.form-label { display: block; margin-bottom: .25rem; }
.form-control {
  display: block;
  width: 100%;
  padding: .375rem .6rem;
  border: 1px solid var(--bs-border-color);
  border-radius: .375rem;
  background: var(--sc-panel);
  color: var(--bs-body-color);
}
.form-control:focus {
  outline: 2px solid var(--sc-accent);
  outline-offset: 1px;
  border-color: var(--sc-accent);
}
.form-control-sm { padding: .2rem .45rem; font-size: .9rem; }
.form-check { display: flex; align-items: center; gap: .4rem; }
.form-check-input { width: 1rem; height: 1rem; accent-color: var(--sc-accent); }
.form-check-label { font-size: .9rem; }
.form-switch .form-check-input { width: 2rem; height: 1.1rem; }

/* ── surfaces ───────────────────────────────────────────────────────────── */
.card {
  background: var(--sc-panel);
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
}
.list-group { margin: 0; padding: 0; list-style: none; }
.list-group-flush > .list-group-item { border-left: 0; border-right: 0; }
.list-group-item {
  display: flex;
  padding: .5rem .75rem;
  background: transparent;
  border-bottom: 1px solid var(--bs-border-color);
}

/* ── app components ─────────────────────────────────────────────────────── */
.sidebar-header { display: flex; align-items: center; gap: .5rem; }
.chat-header { display: flex; align-items: center; gap: .5rem; }
.lamp {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #ccc;
  vertical-align: middle;
}
.hint { color: var(--sc-muted); }
#log, .log {
  white-space: pre-wrap;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .8rem;
}
#chat { display: flex; flex-direction: column; gap: 6px; overflow: auto; }
.bubble {
  max-width: 76%;
  padding: 6px 10px;
  border-radius: 10px;
  word-break: break-word;
  background: var(--sc-in);
  color: var(--bs-body-color);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}
.bubble.out { align-self: flex-start; background: var(--sc-out); }
.bubble img { display: block; max-width: 240px; max-height: 240px; border-radius: 6px; }
.bubble a { color: var(--sc-accent); }
.contact-row { cursor: pointer; }
.contact-row:active { background: rgba(127, 127, 127, .12); }

/* Presence dot next to a contact name (charter §12): green = online,
 * red = offline, grey = not known yet (never a false offline, §5.6). */
.presence-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: #b9c0c8; box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset; }
.presence-dot.on { background: #2e9e4f; }
.presence-dot.off { background: #c62828; }


/* Markdown bubbles (charter 12.3) */
.md-p { margin: 0 0 4px; }
.md-p:last-child { margin-bottom: 0; }
.md-code { background: rgba(127,127,127,.14); padding: 6px; border-radius: 6px;
  font-family: ui-monospace, monospace; font-size: .82rem; overflow-x: auto; white-space: pre; }
.md-list { margin: 2px 0 4px 18px; padding: 0; }
.md-quote { margin: 2px 0 4px; padding-left: 8px; border-left: 3px solid var(--sc-accent); color: var(--sc-muted); }
.bubble code { font-family: ui-monospace, monospace; font-size: .82rem; background: rgba(127,127,127,.16); padding: 0 3px; border-radius: 4px; }
/* APK QR link in the sidebar footer */
.apk-qr { display: inline-block; margin-right: 8px; padding: 1px 6px; border: 1px solid var(--sc-muted);
  background: transparent;
  border-radius: 5px; font-size: .72rem; line-height: 1.4; color: var(--sc-muted); text-decoration: none; }
.apk-qr:hover { background: rgba(127,127,127,.14); }
/* Android robot sits next to the APK QR/download pair (charter §12). */
.android-mark { display: inline-flex; align-items: center; vertical-align: middle; }
.android-logo { width: 18px; height: 18px; margin-right: 4px; }
/* Legal links: required on the entry screen and under the APK download. */
.legal-links { color: var(--sc-muted); }
.legal-links a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.legal-links a:hover { color: var(--sc-text, inherit); }

/* Message block: blue rule, then "author date time", then the markdown body. */
.msg-sep { height: 2px; background: var(--sc-accent); margin: -6px -10px 6px; border-radius: 2px; }
.msg-meta { font-size: 11px; color: var(--sc-muted); margin-bottom: 4px; }
.md-p { white-space: pre-wrap; margin: 0 0 4px; }
.md-table { border-collapse: collapse; margin: 4px 0; font-size: 12px; }
.md-table th, .md-table td { border: 1px solid var(--sc-muted); padding: 2px 6px; text-align: left; }
.md-table th { background: rgba(127,127,127,.12); }

/* Per-message delete (charter 12.3): a small red cross at the right of
   the author/time line. */
.msg-meta { display: flex; align-items: center; gap: 8px; width: 100%; }
.msg-meta > span:first-child { margin-right: auto; }
.msg-del { margin-left: auto; border: 0; background: transparent; color: #c62828;
  font-size: 13px; line-height: 1; padding: 0 2px; cursor: pointer; }
.msg-del:hover { color: #8e0000; }

/* ── page layout: only the message list scrolls (charter 12, m3093) ───────
 * The screen itself never scrolls and the sidebar is fixed; the only scroll
 * containers are the contacts list and the message list. The contacts panel
 * still takes the leftover height, otherwise its list could not scroll. */
html, body { height: 100%; overflow: hidden; }
.app { height: 100vh; overflow: hidden; }
.app > .row { height: 100%; }
aside.sidebar { height: 100%; overflow: hidden; }
aside.sidebar > * { flex: 0 0 auto; }
aside.sidebar > #contacts-panel { flex: 1 1 auto; min-height: 0; }
#contacts { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
main.chat-area { height: 100%; min-height: 0; overflow: hidden; }
#chat { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

/* Narrow screens stack the two panes (col-12), so the page must scroll to
 * reach the chat: the fixed-pane rule above only applies to the two-column
 * layout. */
@media (max-width: 767.98px) {
  html, body { overflow: auto; }
  .app { height: auto; overflow: visible; }
  .app > .row { height: auto; }
  aside.sidebar { height: auto; overflow: visible; }
  aside.sidebar > #contacts-panel { min-height: 240px; }
  main.chat-area { height: auto; overflow: visible; }
  #chat { max-height: 70vh; }
}

/* Boot failure panel (charter 12, m3091): visible, never a silent retry. */
.boot-error { position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 9999;
  padding: 8px; border-radius: 6px; background: #c62828; color: #fff;
  font: 12px/1.4 ui-monospace, monospace; white-space: pre-wrap; }

/* Login screensaver (charter 12): while logged out the right pane is a black
   starfield; the chat header, message list, compose row and log are hidden so
   no "select a contact" hint or composer is shown before login. */
#stars { display: none; flex: 1 1 auto; width: 100%; min-height: 0; background: #000; }
.app.sc-no-login #stars { display: block; }
.app.sc-no-login main.chat-area { background: #000; }
.app.sc-no-login main.chat-area > .chat-header,
.app.sc-no-login main.chat-area > #chat,
.app.sc-no-login main.chat-area > .p-2.border-top,
.app.sc-no-login main.chat-area > #log { display: none; }


/* Randomness collector at account creation (charter 5.5/12, m3102). */
.sc-entropy { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center;
  justify-content: center; background: rgba(4, 6, 12, 0.72); }
.sc-entropy-card { width: min(520px, 92vw); padding: 16px; border-radius: 12px;
  background: var(--sc-panel, #151a24); color: var(--bs-body-color, #e8ecf3);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); }
.sc-entropy-title { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.sc-entropy-hint { font-size: 12px; opacity: 0.8; margin-bottom: 10px; line-height: 1.35; }
.sc-entropy-pad { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1;
  border-radius: 8px; background: #05070d; cursor: crosshair; touch-action: none;
  border: 1px solid var(--sc-border, #2a3242); }
.sc-entropy-bar { height: 10px; margin-top: 10px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.sc-entropy-fill { height: 100%; width: 0; background: #d32f2f;
  transition: width 120ms linear, background-color 120ms linear; }
.sc-entropy-count { margin-top: 6px; font-size: 12px; text-align: right; opacity: 0.85; }

/* Message actions (charter 12): [C] copies the raw text, [≡] opens reply/delete. */
.msg-actions { display: inline-flex; gap: 4px; margin-left: auto; position: relative; }
.msg-act { border: 0; background: transparent; color: var(--sc-muted); font: 11px/1 ui-monospace, monospace;
  padding: 2px 4px; border-radius: 4px; cursor: pointer; opacity: .55; }
.msg-head:hover .msg-act, .msg-act:focus-visible { opacity: 1; }
.msg-act:hover { background: rgba(127,127,127,.16); color: var(--bs-body-color); }
.msg-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 20; min-width: 132px; padding: 4px;
  background: var(--sc-panel); color: var(--bs-body-color); border: 1px solid var(--sc-border, #2a3242);
  border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.22); display: flex; flex-direction: column; }
.msg-menu-item { border: 0; background: transparent; text-align: left; font-size: 13px; padding: 6px 8px;
  border-radius: 6px; color: inherit; cursor: pointer; }
.msg-menu-item:hover { background: rgba(127,127,127,.16); }
.msg-menu-del { color: #c62828; }

/* Message modal close X (charter 12): every dialog has a visible close control. */
.msg-x { position: absolute; top: 4px; right: 8px; border: 0; background: transparent;
  font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer;
  color: var(--bs-secondary-color, #6c757d); }
.msg-x:hover { color: var(--bs-body-color, #212529); }

/* Composer resize handle (charter 12, m3106): drag up/down to grow the input. */
#composer-resize { flex: 0 0 auto; height: 6px; cursor: row-resize; background: transparent;
  border-top: 1px solid var(--sc-border, #2a3242); touch-action: none; }
#composer-resize:hover, #composer-resize.dragging { background: rgba(127,127,127,.28); }
#composer { flex: 0 0 auto; }
#message { resize: none; }

/* Master-password visibility toggle (charter §12, m3109). */
.pw-wrap { position: relative; }
.pw-wrap .form-control { padding-right: 2.2rem; }
.pw-eye { position: absolute; top: 0; right: 0; height: 100%; width: 2rem; border: 0;
  background: transparent; color: var(--sc-muted); font-size: 14px; line-height: 1;
  cursor: pointer; border-radius: 0 6px 6px 0; }
.pw-eye:hover { color: var(--bs-body-color); background: rgba(127,127,127,.12); }

/* Language selector: native <select> popups follow color-scheme; explicit
   theme colors keep the closed control and every option readable. */
#btn-lang { color-scheme: light; background-color: #ffffff !important;
  color: #1d2530 !important; border-color: #5b6470 !important; }
#btn-lang option, #btn-lang optgroup { background-color: #ffffff !important;
  color: #1d2530 !important; }
[data-bs-theme="dark"] #btn-lang { color-scheme: dark;
  background-color: #262c34 !important; color: #e6ebf1 !important;
  border-color: #9aa4b2 !important; }
[data-bs-theme="dark"] #btn-lang option,
[data-bs-theme="dark"] #btn-lang optgroup {
  background-color: #262c34 !important; color: #e6ebf1 !important; }