/* =========================================================
   octochat. · identidade OctoBoard (Painel do Dia)
   tinta #1d1a16 · verde #7acc00 · off-white #f4efe6
   ========================================================= */
:root {
  --font: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --green: #7acc00;
  --green-deep: #5f9f00;
  --red: #e0453a;
  --radius: 14px;
  --radius-sm: 9px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

:root, [data-theme="light"] {
  --bg: #f4efe6;          /* área principal (off-white) */
  --bg-2: #ece6db;        /* coluna de canais */
  --bg-3: #e3dccf;        /* trilho */
  --surface: #fbf8f2;     /* campos, cartões */
  --tile: #e8e1d4;        /* blocos da chamada */
  --ink: #1d1a16;
  --ink-2: #5a544c;
  --ink-3: #8d867b;
  --line: rgba(29, 26, 22, .10);
  --hover: rgba(29, 26, 22, .055);
  --active: rgba(29, 26, 22, .09);
  --accent-text: #4f8a00;   /* verde legível sobre claro */
  --on-green: #1d1a16;
  --shadow: 0 1px 0 rgba(29, 26, 22, .04), 0 12px 32px -12px rgba(29, 26, 22, .18);
  --octo-ink: #1d1a16;
  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #272523;          /* preto acinzentado, quente */
  --bg-2: #211f1d;
  --bg-3: #1b1a18;
  --surface: #312e2b;
  --tile: #312e2b;
  --ink: #f4efe6;
  --ink-2: #bdb5a9;
  --ink-3: #8b8479;
  --line: rgba(244, 239, 230, .08);
  --hover: rgba(244, 239, 230, .05);
  --active: rgba(244, 239, 230, .09);
  --accent-text: #8fdc1a;
  --on-green: #1d1a16;
  --shadow: 0 1px 0 rgba(0, 0, 0, .2), 0 16px 40px -14px rgba(0, 0, 0, .55);
  --octo-ink: #e9e3d8;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
input, textarea { font: inherit; color: inherit; }
::selection { background: var(--green); color: var(--on-green); }

/* ---------- títulos no estilo "Finanças / de outubro." ---------- */
.headline {
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: .95;
  font-size: clamp(44px, 7vw, 84px);
  margin: 0;
}
.headline em { font-style: normal; color: var(--green); }
.headline-sm { font-size: 34px; }
.brand { font-weight: 800; letter-spacing: -0.05em; font-size: 26px; line-height: 1; }
.brand span { color: var(--green); }
.brand-sm { font-size: 22px; }

/* ---------- ícones ---------- */
i[data-icon] { display: inline-flex; width: 20px; height: 20px; flex: none; }
i[data-icon] svg { width: 100%; height: 100%; }

/* ---------- botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px;
  font-weight: 700; letter-spacing: -0.01em;
  transition: transform .15s var(--ease), background .15s, opacity .15s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--green); color: var(--on-green); }
.btn-primary:hover { background: #86d90c; }
.btn-primary:disabled { opacity: .55; cursor: progress; }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--hover); color: var(--ink); }
.btn-block { width: 100%; }
.danger-text { color: var(--red); }
.danger-text:hover { color: var(--red); background: rgba(224, 69, 58, .1); }

.icon-btn {
  width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); flex: none;
  transition: background .12s, color .12s;
}
.icon-btn:hover { background: var(--hover); color: var(--ink); }
.icon-btn.is-off { color: var(--red); }
.icon-btn.danger:hover { color: var(--red); }
.icon-btn i[data-icon] { width: 19px; height: 19px; }

/* ---------- campos ---------- */
.field { display: grid; gap: 7px; margin-bottom: 16px; }
.field > span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.field input {
  width: 100%; height: 46px; padding: 0 14px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  outline: none; transition: border-color .15s;
}
.field input:focus { border-color: var(--green); }
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 46px; }
.pass-toggle { position: absolute; right: 6px; top: 6px; width: 34px; height: 34px; border-radius: 8px; color: var(--ink-3); display: grid; place-items: center; }
.pass-toggle:hover { color: var(--ink); background: var(--hover); }
.pass-toggle i[data-icon] { width: 18px; height: 18px; }
.form-error { color: var(--red); font-size: 14px; font-weight: 600; min-height: 0; margin: 0 0 12px; }
.form-error:empty { display: none; }

/* ---------- seletor de tema ---------- */
.theme-switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--active); }
.theme-switch button { height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.theme-switch button i[data-icon] { width: 15px; height: 15px; }
.theme-switch button.is-active { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.theme-switch-lg button { height: 36px; padding: 0 16px; }

/* ---------- avatares ---------- */
.av { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; position: relative; border-radius: 50%; }
.av svg { width: 100%; height: 100%; display: block; }
.av-xl { width: 76px; height: 76px; }
.av.speaking::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  box-shadow: 0 0 0 2.5px var(--green);
}

.avatar-picker { display: grid; gap: 12px; }
.ap-shapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ap-shape {
  aspect-ratio: 1; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--line);
  display: grid; place-items: center; padding: 8px; transition: border-color .12s, transform .12s;
}
.ap-shape:hover { transform: translateY(-2px); }
.ap-shape.is-active { border-color: var(--green); box-shadow: 0 0 0 3px rgba(122, 204, 0, .22); }
.ap-shape svg { width: 100%; height: 100%; }
.ap-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.ap-color { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--bg); box-shadow: 0 0 0 1.5px var(--line); }
.ap-color.is-active { box-shadow: 0 0 0 2.5px var(--ink); }

/* =========================================================
   CARREGANDO
   ========================================================= */
.boot { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); }
.boot-octo { width: 56px; height: 56px; animation: spin 2.4s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { from { transform: translateY(-4px) rotate(-4deg); } to { transform: translateY(4px) rotate(4deg); } }

/* =========================================================
   LOGIN
   ========================================================= */
.auth { position: fixed; inset: 0; overflow-y: auto; display: flex; flex-direction: column; padding: 24px clamp(20px, 5vw, 64px); }
.auth-top { display: flex; align-items: center; justify-content: space-between; }
.auth-body { flex: 1; display: grid; grid-template-columns: 1.15fr minmax(320px, 420px); gap: clamp(32px, 6vw, 96px); align-items: center; max-width: 1180px; width: 100%; margin: 0 auto; padding: 40px 0; }
.auth-sub { font-size: 18px; color: var(--ink-2); max-width: 30ch; margin: 22px 0 0; }
.auth-octos { display: flex; gap: 10px; margin-top: 36px; }
.auth-octos .av { width: 52px; height: 52px; animation: bob 1.6s var(--ease) infinite alternate; }
.auth-octos .av:nth-child(2n) { animation-delay: -.5s; }
.auth-octos .av:nth-child(3n) { animation-delay: -1s; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 26px; box-shadow: var(--shadow); }
[data-theme="dark"] .auth-card { background: var(--bg-2); }
[data-theme="dark"] .auth-card .field input { background: var(--surface); }
.tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; background: var(--active); border-radius: 999px; margin-bottom: 22px; }
.tab { height: 38px; border-radius: 999px; font-weight: 700; color: var(--ink-2); }
.tab.is-active { background: var(--bg); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.auth-foot { font-size: 13px; color: var(--ink-3); text-align: center; margin: 14px 0 0; }

@media (max-width: 860px) {
  .auth-body { grid-template-columns: 1fr; padding: 28px 0; gap: 28px; }
  .auth-octos { display: none; }
  .auth-sub { font-size: 16px; margin-top: 14px; }
}

/* =========================================================
   APP · layout de 4 colunas (trilho · canais · conteúdo · membros)
   ========================================================= */
.app { position: fixed; inset: 0; display: grid; grid-template-columns: 72px 248px 1fr; }

.rail { background: var(--bg-3); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 8px; }
.rail-home { width: 48px; height: 48px; border-radius: 16px; background: #ff571a; display: grid; place-items: center; padding: 10px; position: relative; transition: border-radius .2s var(--ease); }
.rail-home::before { content: ''; position: absolute; left: -12px; width: 4px; height: 36px; border-radius: 0 4px 4px 0; background: var(--ink); }
.rail-home svg { width: 100%; height: 100%; }
.rail-sep { width: 32px; height: 2px; border-radius: 2px; background: var(--line); }

.side { background: var(--bg-2); display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.side-head { height: 56px; padding: 0 16px; display: flex; align-items: center; border-bottom: 1px solid var(--line); flex: none; }
.side-scroll { flex: 1; overflow-y: auto; padding: 14px 8px; }
.cat { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); padding: 14px 8px 6px; }
.cat:first-child { padding-top: 2px; }
.chan {
  width: 100%; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 9px;
  border-radius: 8px; color: var(--ink-2); font-weight: 600; text-align: left;
}
.chan i[data-icon] { width: 19px; height: 19px; color: var(--ink-3); }
.chan span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan small { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.chan:hover { background: var(--hover); color: var(--ink); }
.chan.is-active { background: var(--active); color: var(--ink); }
.chan.has-unread { color: var(--ink); }
.unread { width: 8px; height: 8px; border-radius: 50%; background: var(--green); }

.voice-members { list-style: none; margin: 2px 0 6px; padding: 0 0 0 26px; }
.vm { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 8px; border-radius: 7px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.vm .av { width: 24px; height: 24px; }
.vm .vm-nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vm .vm-icons { display: flex; gap: 3px; color: var(--ink-3); }
.vm .vm-icons i[data-icon] { width: 15px; height: 15px; }
.vm .vm-icons .off { color: var(--red); }
.live { font-size: 10px; font-weight: 800; letter-spacing: .04em; background: var(--red); color: #fff; border-radius: 4px; padding: 1px 5px; line-height: 1.4; }

.voice-panel { display: flex; align-items: center; gap: 2px; padding: 10px 8px 10px 14px; border-top: 1px solid var(--line); flex: none; }
.vp-info { flex: 1; min-width: 0; }
.vp-status { display: flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 700; font-size: 14px; }
.vp-status i[data-icon] { width: 16px; height: 16px; }
.vp-status.is-wait { color: var(--ink-3); }
.vp-room { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.user-panel { display: flex; align-items: center; gap: 2px; padding: 8px; background: var(--bg-3); flex: none; }
[data-theme="light"] .user-panel { background: #e6dfd2; }
.up-me { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; padding: 4px 6px; border-radius: 8px; text-align: left; }
.up-me:hover { background: var(--hover); }
.up-names { min-width: 0; display: grid; line-height: 1.2; }
.up-names b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-names small { font-size: 12px; color: var(--ink-3); }

.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.main-head { height: 56px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--line); }
.mh-title { display: flex; align-items: center; gap: 6px; font-size: 16px; }
.mh-title i[data-icon] { color: var(--ink-3); }
.mh-sub { color: var(--ink-3); font-size: 14px; padding-left: 12px; margin-left: 4px; border-left: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mh-actions { margin-left: auto; display: flex; gap: 4px; }
.main-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 240px; }
.app.no-members .main-body { grid-template-columns: 1fr; }
.app.no-members .members { display: none; }
.view { min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* ---------- mensagens ---------- */
.messages { flex: 1; overflow-y: auto; padding: 20px 0 8px; display: flex; flex-direction: column; }
.msg-empty { margin-top: auto; padding: 0 20px 20px; }
.msg-empty p { color: var(--ink-3); margin: 12px 0 0; }
.day { display: flex; align-items: center; gap: 12px; margin: 18px 20px 6px; font-size: 12px; font-weight: 700; color: var(--ink-3); }
.day::before, .day::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.msg { display: grid; grid-template-columns: 40px 1fr; gap: 0 14px; padding: 2px 20px; position: relative; }
.msg:hover { background: var(--hover); }
.msg.first { margin-top: 14px; padding-top: 4px; }
.msg .av { width: 40px; height: 40px; grid-row: span 2; }
.msg .meta { display: flex; align-items: baseline; gap: 8px; }
.msg .meta b { font-weight: 700; }
.msg .meta time { font-size: 12px; color: var(--ink-3); }
.msg .body { white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; color: var(--ink); }
.msg .body a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.msg .body a:hover { text-decoration: underline; }
.msg:not(.first) .stamp { position: absolute; left: 20px; width: 40px; text-align: center; top: 5px; font-size: 11px; color: var(--ink-3); opacity: 0; }
.msg:not(.first):hover .stamp { opacity: 1; }
.msg.is-me .meta b { color: var(--accent-text); }

.composer { flex: none; margin: 0 16px 18px; display: flex; align-items: flex-end; gap: 8px; background: var(--surface); border: 1.5px solid var(--line); border-radius: 16px; padding: 6px 6px 6px 16px; transition: border-color .15s; }
.composer:focus-within { border-color: var(--green); }
.composer textarea { flex: 1; border: 0; outline: 0; background: transparent; resize: none; padding: 9px 0; max-height: 180px; line-height: 1.4; }
.composer textarea::placeholder { color: var(--ink-3); }
.send-btn { width: 38px; height: 38px; border-radius: 11px; background: var(--green); color: var(--on-green); display: grid; place-items: center; flex: none; }
.send-btn i[data-icon] { width: 18px; height: 18px; }

/* ---------- membros ---------- */
.members { background: var(--bg-2); overflow-y: auto; padding: 16px 8px; border-left: 1px solid var(--line); }
.members .cat { padding-top: 6px; }
.mem { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; font-weight: 600; color: var(--ink-2); }
.mem:hover { background: var(--hover); color: var(--ink); }
.mem .av { width: 32px; height: 32px; }
.mem .av::before { content: ''; position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); border: 2.5px solid var(--bg-2); }
.mem.off { opacity: .45; }
.mem.off .av::before { background: var(--ink-3); }
.mem .mem-nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem i[data-icon] { width: 15px; height: 15px; color: var(--accent-text); }

/* ---------- voz / palco ---------- */
.view-voice { position: relative; background: var(--bg); }
[data-theme="dark"] .view-voice { background: #1f1d1b; }
.stage { flex: 1; min-height: 0; padding: 16px; display: grid; gap: 12px; align-content: center; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); overflow-y: auto; }
.stage.has-focus { grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-content: stretch; }
.stage.has-focus .tile:not(.focused) { display: none; }
.tile {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden;
  background: var(--tile); display: grid; place-items: center; min-height: 0;
  outline: 2.5px solid transparent; outline-offset: -2.5px; transition: outline-color .12s;
}
.tile.speaking { outline-color: var(--green); }
.tile.focused { aspect-ratio: auto; height: 100%; }
/* modo tela: tela grande em cima, miniaturas das pessoas embaixo */
.stage.has-screen { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px; overflow: hidden; --mini-h: 104px; }
.stage.has-screen .tile.wide { flex: 0 0 calc((100% - 10px * (var(--scols, 1) - 1)) / var(--scols, 1)); aspect-ratio: auto; height: calc((100% - var(--mini-h) - 10px * var(--srows, 1)) / var(--srows, 1)); }
.stage.has-screen .tile:not(.wide) { flex: 0 0 auto; width: calc(var(--mini-h) * 16 / 9); height: var(--mini-h); aspect-ratio: auto; border-radius: 10px; }
.stage.has-screen .tile:not(.wide) .av { width: 44px; }
.stage.has-screen .tile:not(.wide) .tile-label { left: 6px; bottom: 6px; padding: 2px 7px; font-size: 12px; }
.stage.has-screen .tile:not(.wide) .tile-tools button { width: 26px; height: 26px; }
@media (max-width: 760px) {
  .stage.has-screen { --mini-h: 76px; --scols: 1 !important; }
}

.tile .tile-bg { position: absolute; inset: 0; opacity: .14; }
.tile .av { width: clamp(64px, 22%, 120px); height: auto; aspect-ratio: 1; }
.tile.speaking .av::after { display: none; }
.tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #151413; }
.tile.is-screen video { object-fit: contain; }
.tile video.mirror { transform: scaleX(-1); }
.tile-label {
  position: absolute; left: 10px; bottom: 10px; display: flex; align-items: center; gap: 6px;
  background: rgba(29, 26, 22, .72); color: #f4efe6; border-radius: 8px; padding: 4px 9px;
  font-size: 13px; font-weight: 600; max-width: calc(100% - 20px);
  backdrop-filter: blur(6px);
}
.tile-label span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-label i[data-icon] { width: 15px; height: 15px; }
.tile-label .off { color: #ff8379; }
.tile-tools { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.tile:hover .tile-tools { opacity: 1; }
.tile-tools button { width: 32px; height: 32px; border-radius: 8px; background: rgba(29, 26, 22, .72); color: #f4efe6; display: grid; place-items: center; }
.tile-tools i[data-icon] { width: 16px; height: 16px; }
.tile .conn { position: absolute; top: 10px; left: 10px; font-size: 12px; font-weight: 600; background: rgba(29,26,22,.72); color: #f4efe6; padding: 3px 8px; border-radius: 6px; }

.stage-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 10px; padding: 24px; }
.stage-empty p { color: var(--ink-3); margin: 6px 0 14px; }
.se-octos { display: flex; gap: 6px; margin-bottom: 14px; }
.se-octos .av { width: 46px; height: 46px; animation: bob 1.5s var(--ease) infinite alternate; }
.se-octos .av:nth-child(2n) { animation-delay: -.6s; }

.controls { flex: none; display: flex; justify-content: center; gap: 10px; padding: 12px 16px 20px; }
.ctl { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); color: var(--ink); display: grid; place-items: center; box-shadow: var(--shadow); transition: transform .12s var(--ease), background .15s; }
[data-theme="dark"] .ctl { background: #393532; }
.ctl:hover { transform: translateY(-2px); }
.ctl i[data-icon] { width: 22px; height: 22px; }
.ctl.is-on { background: var(--green); color: var(--on-green); }
.ctl.is-off { background: var(--red); color: #fff; }
.ctl-leave { background: var(--red) !important; color: #fff; width: 64px; border-radius: 26px; }

/* ---------- modal ---------- */
.modal { border: 0; padding: 0; background: transparent; color: var(--ink); max-width: 480px; width: calc(100% - 32px); }
.modal::backdrop { background: rgba(20, 18, 16, .55); backdrop-filter: blur(3px); }
.modal-card { background: var(--bg); border-radius: 22px; padding: 24px; box-shadow: var(--shadow); max-height: calc(100vh - 48px); overflow-y: auto; }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.profile-preview { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; padding: 14px; border-radius: var(--radius); background: var(--bg-2); }
.profile-preview b { font-size: 20px; letter-spacing: -0.02em; display: block; }
.profile-preview small { color: var(--ink-3); }
.modal .avatar-picker { margin-bottom: 22px; }
.modal-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }

/* ---------- toasts ---------- */
.toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 100; pointer-events: none; }
.toast { background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow); animation: toast-in .25s var(--ease); }
.toast.err { background: var(--red); color: #fff; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

.scrim { display: none; }
.only-mobile { display: none; }

/* ---------- celular ---------- */
@media (max-width: 900px) {
  .main-body { grid-template-columns: 1fr; }
  .members { display: none; }
  .hide-mobile { display: none; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .only-mobile { display: inline-flex; }
  .rail, .side { position: fixed; top: 0; bottom: 0; z-index: 20; transition: transform .25s var(--ease); }
  .rail { left: 0; width: 72px; }
  .side { left: 72px; width: min(280px, calc(100vw - 88px)); }
  .app:not(.drawer-open) .rail, .app:not(.drawer-open) .side { transform: translateX(-120%); }
  .app:not(.drawer-open) .side { transform: translateX(calc(-100% - 72px)); }
  .app.drawer-open .scrim { display: block; position: fixed; inset: 0; z-index: 10; background: rgba(20, 18, 16, .45); }
  .main-head { padding-left: 8px; }
  .mh-sub { display: none; }
  .stage { --cols: 1 !important; padding: 10px; }
  .composer { margin: 0 10px 12px; }
  .msg { padding: 2px 12px; }
  .ctl { width: 48px; height: 48px; }
  body { padding-bottom: env(safe-area-inset-bottom); }
}

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

.app-ver { font-size: 12px; color: var(--ink-3); margin: 0 0 10px; text-align: right; }

/* =========================================================
   DONO · canais editáveis, coroa, cartão de perfil
   ========================================================= */
.chan-row { position: relative; }
.chan-row .chan { padding-right: 34px; }
.chan-edit {
  position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 6px;
  display: grid; place-items: center; color: var(--ink-3); opacity: 0; transition: opacity .12s, background .12s;
}
.chan-edit i[data-icon] { width: 14px; height: 14px; }
.chan-row:hover .chan-edit, .chan-edit:focus-visible { opacity: 1; }
.chan-edit:hover { background: var(--active); color: var(--ink); }
.chan-row:hover .chan small { opacity: 0; }
@media (hover: none) { .chan-edit { opacity: 1; } .chan-row .chan small { display: none; } }

.crown { display: inline-flex; width: 14px; height: 14px; color: #e6a817; vertical-align: -2px; margin-left: 4px; flex: none; }
.crown svg { width: 100%; height: 100%; }
.owner-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  color: #8a6200; background: rgba(230, 168, 23, .18); border-radius: 6px; padding: 3px 7px; }
[data-theme="dark"] .owner-badge { color: #f2c24b; }
.owner-badge i[data-icon] { width: 13px; height: 13px; }

.mem { cursor: pointer; text-align: left; width: 100%; }
.mem .mem-text { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.mem .mem-nick { display: flex; align-items: center; }
.mem .mem-nick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem .mem-since { font-size: 11.5px; font-weight: 500; color: var(--ink-3); }

.msg .av, .msg .meta b { cursor: pointer; }
.msg .meta b:hover { text-decoration: underline; }
.msg.is-deleted .meta b { color: var(--ink-3); text-decoration: line-through; }

.modal-sm { max-width: 380px; }
.profile-card { padding: 0; overflow: hidden; position: relative; }
.pc-close { position: absolute; right: 10px; top: 10px; z-index: 2; background: rgba(29, 26, 22, .35); color: #fff; }
.pc-close:hover { background: rgba(29, 26, 22, .55); color: #fff; }
.pc-banner { height: 96px; background: var(--green); }
.pc-av { width: 92px; height: 92px; margin: -50px 0 0 20px; padding: 6px; background: var(--bg); border-radius: 50%; }
.pc-body { padding: 8px 22px 22px; }
.pc-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pc-name b { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; }
.pc-status { font-size: 13px; color: var(--ink-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; }
.pc-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); }
.pc-status.on::before { background: var(--green); }
.pc-since { margin: 18px 0 16px; padding: 14px 16px; border-radius: var(--radius); background: var(--bg-2); display: grid; gap: 2px; }
.pc-label { font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.pc-year { font-size: 46px; color: var(--green); }
.pc-date { font-size: 13px; color: var(--ink-2); }
#pcDelete.confirm { background: var(--red); color: #fff; }

.rename-wrap { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 14px; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm); }
.rename-wrap:focus-within { border-color: var(--green); }
.rename-wrap i[data-icon] { color: var(--ink-3); width: 18px; height: 18px; }
.rename-wrap input { flex: 1; border: 0; outline: 0; background: transparent; height: 100%; padding: 0; }
.field-hint { font-size: 13px; color: var(--ink-3); margin: -8px 0 12px; }

/* logo: símbolo + escrito */
.brand { display: inline-flex; align-items: center; }
.brand-mark { display: inline-flex; width: 1.05em; height: 1.05em; margin-right: .32em; flex: none; }
.brand-mark svg, .logo-mark { width: 100%; height: 100%; display: block; }
.brand:hover .brand-mark svg { animation: spin 1.2s var(--ease); }