/* Lightwave workspace.
   Theming comes from tokens.css, which is the Flomation Editor's palette
   verbatim. Nothing here invents a colour: if a role is missing, add it there
   so the Editor and Lightwave move together. */

/* Must come first: @import is only valid before other rules. */
@import './tokens.css';

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute must beat layout.
   [hidden] in the UA stylesheet is an attribute selector, so any class rule
   setting display silently outranks it and the element stays on screen while
   JS believes it is hidden. !important is correct rather than lazy: hidden is
   a statement about whether the element exists for the user. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, .brandish { font-family: var(--font-heading); letter-spacing: -0.01em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.shell { height: 100%; }
.shell[data-view="start"] #view-room  { display: none; }
.shell[data-view="room"]  #view-start { display: none; }

/* -------------------------------------------------------------- controls -- */
.btn {
  font: inherit; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.005em;
  padding: 0.5rem 0.85rem;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--rule-2); border-radius: var(--radius-md);
  cursor: pointer; white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--faint); }
.btn:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary {
  background: var(--grad-cta); color: var(--action-ink);
  border-color: var(--action); box-shadow: var(--glow-cta);
}
.btn.primary:hover:not(:disabled) { box-shadow: var(--glow-cta-strong); border-color: var(--action); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--dim); }
.btn.ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--rule-2); color: var(--text); }
.btn.small { padding: 0.3rem 0.55rem; font-size: 0.76rem; }
.btn.big { padding: 0.75rem 1.4rem; font-size: 0.95rem; }
.btn.danger { color: var(--danger); border-color: var(--danger); background: transparent; }

.icon-btn {
  display: grid; place-items: center;
  width: 2rem; height: 2rem; flex: 0 0 auto;
  background: transparent; color: var(--dim);
  border: 1px solid transparent; border-radius: var(--radius-md);
  cursor: pointer;
}
.icon-btn svg { width: 1.05rem; height: 1.05rem; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--rule-2); }
.icon-btn:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }

input[type="text"], textarea {
  font: inherit; font-size: 0.88rem;
  padding: 0.5rem 0.65rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--rule-2); border-radius: var(--radius-md);
  min-width: 0; width: 100%;
}
textarea { resize: none; line-height: 1.45; }
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
::placeholder { color: var(--faint); }

.row { display: flex; gap: 0.5rem; align-items: stretch; }
.hint { font-size: 0.85rem; color: var(--dim); }
.note { font-size: 0.8rem; color: var(--success); font-weight: 500; }
.err  { font-size: 0.85rem; color: var(--danger); }
.foot { font-size: 0.78rem; color: var(--faint); line-height: 1.6; }
code {
  font-family: var(--font-body); font-weight: 600; font-size: 0.92em;
  letter-spacing: 0.02em; color: var(--dim);
}

.section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.section-head h2 { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.01em; }

/* ----------------------------------------------------------------- start -- */
.start { min-height: 100%; display: grid; place-items: center; padding: 1.5rem; }
.start-inner { width: 100%; max-width: 33rem; display: flex; flex-direction: column; gap: 1.3rem; }
.hero-logo { line-height: 0; }
.hero-logo img { width: 100%; max-width: 23rem; height: auto; display: block; }
.pitch { font-size: 1.02rem; color: var(--dim); max-width: 38ch; }
.start-actions { display: flex; gap: 0.6rem; }

.rooms, .joinbox {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg);
  box-shadow: var(--lift);
  padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.7rem;
}
.joinbox summary { font-size: 0.85rem; font-weight: 600; cursor: pointer; color: var(--dim); }
.joinbox summary:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.joinbox[open] summary { color: var(--text); }

.roomlist { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.roomlist li { display: flex; align-items: center; gap: 0.4rem; }
.roomlist .open {
  flex: 1 1 auto; min-width: 0; font: inherit; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.45rem 0.55rem; border-radius: var(--radius-md);
  background: transparent; border: 1px solid transparent; color: inherit;
}
.roomlist .open:hover { background: var(--surface-2); border-color: var(--rule-2); }
.roomlist .open:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }
.roomlist .rid {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.roomlist .meta { font-size: 0.72rem; color: var(--faint); }
.roomlist .meta .soon { color: var(--warning); }
.roomlist .forget {
  flex: 0 0 auto; background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--faint); font-size: 0.74rem; font-weight: 500;
  padding: 0.3rem 0.4rem; border-radius: var(--radius-md);
}
.roomlist .forget:hover { color: var(--danger); background: var(--danger-fill); }
.roomlist .forget:focus-visible { outline: 2px solid var(--action); outline-offset: 1px; }

/* ------------------------------------------------------------- workspace -- */

/* Flex, not grid, and deliberately so.
   With `grid-template-rows: auto auto 1fr` a display:none child is not placed
   at all, so hiding the share panel moved .body from the 1fr row up into an
   auto row — the workspace stopped filling the window and collapsed to its
   content the moment Invite was dismissed. Flex skips hidden children without
   renumbering anything, so the growing item stays the growing item. */
.workspace { height: 100%; display: flex; flex-direction: column; }
.workspace > .topbar,
.workspace > .share { flex: 0 0 auto; }

.topbar {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.9rem;
  background: var(--surface); border-bottom: 1px solid var(--rule-2);
}
.topbar-logo { height: 1.35rem; width: auto; display: block; flex: 0 0 auto; }
.status { display: flex; gap: 0.3rem; flex-wrap: wrap; margin-left: auto; }
.chip {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.16rem 0.42rem; border-radius: 3px; white-space: nowrap;
  background: var(--success-fill); color: var(--success); border: 1px solid transparent;
}
.chip.neutral { background: var(--neutral-fill); color: var(--neutral); }
.chip.live    { background: var(--teal-fill); color: var(--teal); }
.chip.warn    { background: var(--warning-fill); color: var(--warning); }
.only-narrow { display: none; }

.share {
  padding: 0.9rem; background: var(--surface); border-bottom: 1px solid var(--rule-2);
  display: flex; flex-direction: column; gap: 0.7rem;
}
.share-meta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-size: 0.76rem; color: var(--faint);
  border-top: 1px solid var(--rule-2); padding-top: 0.7rem;
}
.qr-wrap { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.share-right { flex: 1 1 18rem; display: flex; flex-direction: column; gap: 0.5rem; }
/* Always dark on light, in both themes: inverted codes defeat some scanners,
   and this is the flow that must work first time on an unfamiliar phone. */
.qr {
  flex: 0 0 auto; line-height: 0;
  background: #FFFFFF; padding: 0.45rem; border-radius: 4px; border: 1px solid var(--rule-2);
}
.qr svg { display: block; width: 8.5rem; height: 8.5rem; }
.qr-note { font-size: 0.8rem; color: var(--dim); }

.body {
  flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 15rem minmax(0, 1fr);
}

/* --------------------------------------------------------------- sidebar -- */
.sidebar {
  background: var(--surface); border-right: 1px solid var(--rule-2);
  display: flex; flex-direction: column; gap: 1rem;
  padding: 0.8rem 0.6rem; overflow-y: auto;
}
.side-section { display: flex; flex-direction: column; gap: 0.3rem; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: 0 0.3rem; }
.side-head h2 {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--faint);
}

.channel-list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.side-item {
  width: 100%; font: inherit; font-size: 0.86rem; text-align: left; cursor: pointer;
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.38rem 0.5rem; border-radius: var(--radius-md);
  background: transparent; border: 1px solid transparent; color: var(--dim);
}
.side-item:hover { background: var(--surface-2); color: var(--text); }
.side-item:focus-visible { outline: 2px solid var(--action); outline-offset: -1px; }
.side-item[aria-current="true"] {
  background: var(--paper-lilac); color: var(--violet); font-weight: 600;
  border-color: var(--rule-2);
}
.side-item .hash { color: var(--faint); font-weight: 500; flex: 0 0 auto; }
.side-item .ico { width: 0.95rem; height: 0.95rem; flex: 0 0 auto; color: var(--faint); }
.side-item .label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-item .count {
  flex: 0 0 auto; font-size: 0.7rem; font-weight: 600; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.side-item.unread { color: var(--text); font-weight: 600; }
.side-item.unread .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--violet); flex: 0 0 auto;
}
.side-item.archived .label { opacity: 0.55; font-style: italic; }

.new-channel-form { padding: 0.2rem 0.3rem 0; }

.side-foot { margin-top: auto; padding: 0.5rem 0.4rem 0; border-top: 1px solid var(--rule-2); }
.usage { display: flex; flex-direction: column; gap: 0.3rem; }
.usage-row { font-size: 0.72rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.bar { height: 3px; background: var(--surface-2); border-radius: 2px; overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--teal-mid); transition: width 0.2s linear; }
.bar > i.full { background: var(--danger); }

/* ------------------------------------------------------------- main pane -- */
.pane { min-width: 0; min-height: 0; display: grid; }
.view { min-height: 0; display: flex; flex-direction: column; }
.view > .pane-head,
.view > .alerts,
.view > .composer { flex: 0 0 auto; }
.view > .log,
.view > .browser { flex: 1 1 auto; min-height: 0; }

.pane-head {
  display: flex; align-items: center; gap: 0.8rem; justify-content: space-between;
  padding: 0.65rem 1rem; border-bottom: 1px solid var(--rule-2); background: var(--surface);
}
.pane-head h2 { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.pane-head h2 .hash { color: var(--faint); font-weight: 400; margin-right: 0.1rem; }
.pane-actions { display: flex; gap: 0.4rem; align-items: center; }
.pane-actions input[type="text"] { width: 12rem; }

/* ------------------------------------------------------------------ log -- */
.log { overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.empty { margin: auto; text-align: center; color: var(--faint); display: flex; flex-direction: column; gap: 0.25rem; padding: 2rem 1rem; }
.empty-title { font-size: 1rem; font-weight: 600; color: var(--dim); }

.msg {
  max-width: min(44rem, 86%);
  padding: 0.5rem 0.75rem;
  background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--radius-md);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.msg.mine {
  align-self: flex-end;
  background: var(--paper-lilac); border-color: var(--rule-3);
}
.msg.pending { opacity: 0.6; }
.msg .who {
  font-size: 0.7rem; font-weight: 600; color: var(--faint);
  display: flex; gap: 0.5rem; align-items: baseline;
}
.msg .when { font-weight: 400; font-variant-numeric: tabular-nums; }
.msg .text { white-space: pre-wrap; overflow-wrap: anywhere; }

.msg.file .fbody { display: flex; align-items: center; gap: 0.6rem; padding-top: 0.15rem; }
.msg.file .icon {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--rule-2);
  display: grid; place-items: center;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.02em;
  color: var(--faint); text-transform: uppercase; overflow: hidden;
}
.msg.file .fmeta { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.msg.file .fname { font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg.file .fsize { font-size: 0.72rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.msg.file.failed .fsize { color: var(--danger); }
.msg .bar { margin-top: 0.3rem; }

/* --------------------------------------------------------------- alerts -- */
.alerts { display: flex; flex-direction: column; gap: 1px; }
.alert {
  font-size: 0.78rem; line-height: 1.5; padding: 0.45rem 1rem;
  background: var(--danger-fill); color: var(--danger);
  border-top: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  display: flex; gap: 0.6rem; align-items: baseline;
}
.alert.warn { background: var(--warning-fill); color: var(--warning); border-top-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.alert .x { margin-left: auto; cursor: pointer; background: none; border: 0; color: inherit; font: inherit; padding: 0 0.2rem; }
.alert .x:focus-visible { outline: 1px solid currentColor; }

/* ------------------------------------------------------------- composer -- */
.composer {
  display: flex; gap: 0.5rem; align-items: flex-end;
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  background: var(--surface); border-top: 1px solid var(--rule-2);
}
.composer textarea { max-height: 8rem; }

/* -------------------------------------------------------- file browser -- */
.browser { overflow: auto; }
table.files { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
table.files th {
  position: sticky; top: 0; z-index: 1;
  text-align: left; font-size: 0.68rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--faint);
  background: var(--bg); padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--rule-2); white-space: nowrap;
}
table.files th.num { text-align: right; }
table.files th.sortable { cursor: pointer; user-select: none; }
table.files th.sortable:hover { color: var(--text); }
table.files th[aria-sort] { color: var(--violet); }
table.files th[aria-sort]::after { content: ' ↓'; }
table.files th[aria-sort="ascending"]::after { content: ' ↑'; }

table.files td {
  padding: 0.5rem 0.8rem; border-bottom: 1px solid var(--rule-2); vertical-align: middle;
}
table.files tbody tr:hover { background: var(--surface); }
table.files td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--dim); }
table.files td.dim { color: var(--faint); font-size: 0.8rem; }
table.files td.actions { text-align: right; white-space: nowrap; }

.fcell { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.fcell .icon {
  flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border-radius: 4px;
  background: var(--surface-2); border: 1px solid var(--rule-2);
  display: grid; place-items: center;
  font-size: 0.55rem; font-weight: 700; color: var(--faint); text-transform: uppercase;
}
.fcell .fname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcell .fstate { font-size: 0.72rem; color: var(--faint); }
.fcell .fstate.bad { color: var(--danger); }

/* ---------------------------------------------------------------- narrow -- */
.scrim { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(2px); z-index: 5; }

@media (max-width: 760px) {
  .only-narrow { display: grid; }
  .body { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; z-index: 6; top: 0; bottom: 0; left: 0; width: 15rem;
    transform: translateX(-100%); transition: transform 0.18s ease;
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.25);
  }
  .shell[data-sidebar="open"] .sidebar { transform: none; }
  .topbar-logo { height: 1.15rem; }
  .status { display: none; }
  .pane-actions input[type="text"] { width: 8rem; }
  table.files .hide-narrow { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* -------------------------------------------------------------- sign-in -- */

/* Who you are, stated quietly. It matters when a workspace refuses an upload,
   and not much otherwise. */
.identity {
  font-size: 0.72rem; font-weight: 600; color: var(--dim);
  padding: 0.2rem 0.5rem; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--rule);
  max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.signed-in { font-size: 0.82rem; color: var(--dim); }
.signed-in b { color: var(--violet); font-weight: 600; }
.signed-in button {
  font: inherit; font-size: inherit; background: none; border: 0; padding: 0;
  color: var(--violet); text-decoration: underline; cursor: pointer;
}
.signed-in button:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }