/* mobile.css — HAMCTRL Mobile: real responsive layout, no fixed-1440
   scale-transform scheme (see style.css's RESPONSIVE comment for why
   that scheme doesn't fit a phone). Same color tokens as style.css for
   visual consistency, otherwise a fresh, simple, single-column layout. */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

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

:root {
  /* Paleta "SDR Studio Pro" (przejeta z forka 2026-10-16, patrz style.css) */
  --bg:      #070b14;
  --panel:   #0d1424;
  --panel2:  #131c31;
  --border:  rgba(56,189,248,0.14);
  --border2: rgba(56,189,248,0.30);
  --green:   #38bdf8;
  --green2:  #0284c7;
  --amber:   #fbbf24;
  --red:     #f43f5e;
  --green-rgb:  56,189,248;
  --amber-rgb:  251,191,36;
  --red-rgb:    244,63,94;
  --dim:     rgba(148,163,184,0.65);
  --text:    #f1f5f9;
  --on-accent: #070b14;
  --mono:    'JetBrains Mono', 'Share Tech Mono', monospace;
  --ui:      'Plus Jakarta Sans', 'Inter', sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ui);
  min-height: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

body {
  padding-bottom: calc(64px + var(--safe-bot));
}

button, a { font-family: inherit; color: inherit; }
input, textarea { font-family: inherit; }

/* ── Top bar ── */
.m-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(10px + var(--safe-top)) 14px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.m-conn { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.m-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.m-dot.ok { background: var(--green); box-shadow: 0 0 6px rgba(var(--green-rgb),0.7); }
.m-user { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12px; }
.m-role { font-size: 9px; color: var(--amber); border: 1px solid var(--border2); border-radius: 3px; padding: 2px 5px; letter-spacing: 0.5px; }
.m-logout {
  background: transparent; border: 1px solid var(--border2); border-radius: 4px;
  color: var(--dim); font-size: 11px; padding: 6px 9px; cursor: pointer;
}
.m-logout:active { border-color: var(--red); color: var(--red); }
.m-icon-btn {
  background: transparent; border: 1px solid var(--border2); border-radius: 4px;
  color: var(--dim); font-size: 13px; padding: 5px 8px; cursor: pointer; line-height: 1;
}
.m-icon-btn.active { border-color: var(--green); color: var(--green); }

/* ── Radio-lock bar — sticky, shared across every tab: nothing is
   controllable without it, so it must stay visible regardless of which
   tab is open. ── */
.m-lockbar {
  position: sticky; top: 45px; z-index: 19;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 14px; background: var(--panel2); border-bottom: 1px solid var(--border);
  font-size: 12px;
}
#m-lock-status { color: var(--dim); flex: 1; }

/* ── Toast ── */
.m-toast {
  position: fixed; left: 12px; right: 12px; top: calc(96px + var(--safe-top));
  z-index: 30; padding: 10px 14px; border-radius: 8px;
  background: var(--panel2); border: 1px solid var(--border2);
  font-size: 13px; text-align: center;
}
.m-toast.error { border-color: var(--red); color: var(--red); }

/* ── Layout ── */
.m-main { max-width: 480px; margin: 0 auto; padding: 10px 12px; }
.m-tabpanel { display: none; flex-direction: column; gap: 10px; }
.m-tabpanel.active { display: flex; }
.m-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px;
}
.m-card-title { font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 1px; margin-bottom: 8px; text-transform: uppercase; }
.m-card-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.m-card-title-row .m-card-title { margin-bottom: 0; }

/* ── Bottom tab bar ── */
.m-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  display: flex; background: var(--panel); border-top: 1px solid var(--border);
  padding-bottom: var(--safe-bot);
}
.m-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: transparent; border: none; padding: 8px 4px 6px; cursor: pointer;
  color: var(--dim); font-size: 10px; letter-spacing: 0.5px;
}
.m-tab span { font-family: var(--ui); }
.m-tab.active { color: var(--green); }

/* ── Generic buttons ── */
.m-btn {
  border: 1px solid var(--border2); border-radius: 8px; background: var(--panel2);
  color: var(--text); font-size: 13px; font-weight: 600; padding: 10px 14px; cursor: pointer;
  min-height: 44px;
}
.m-btn-sm { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.m-btn-amber { border-color: var(--amber); color: var(--amber); }
.m-btn-amber:active { background: var(--amber); color: var(--on-accent); }
.m-btn-red { border-color: var(--red); color: var(--red); }
.m-btn-red:active { background: var(--red); color: var(--on-accent); }
.m-btn.active { border-color: var(--green); color: var(--green); background: rgba(var(--green-rgb),0.12); }
.m-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.m-mini-btn {
  background: transparent; border: 1px solid var(--border2); border-radius: 6px;
  color: var(--dim); font-size: 10px; padding: 4px 8px; cursor: pointer;
}

/* ── Radio lock (legacy card class kept for JS compat, bar above is used) ── */
.m-lock { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ── Frequency / VFO ── */
.m-vfo-row { display: flex; gap: 8px; margin-bottom: 8px; }
.m-vfo-btn {
  flex: 1; border: 1px solid var(--border2); border-radius: 8px; background: var(--panel2);
  color: var(--dim); font-family: var(--mono); font-size: 12px; font-weight: 600;
  padding: 8px; cursor: pointer; min-height: 36px;
}
.m-vfo-btn.active { border-color: var(--green); color: var(--green); background: rgba(var(--green-rgb),0.12); }

.m-freq {
  font-family: var(--mono); font-size: 32px; text-align: center; color: var(--green);
  letter-spacing: 1px; word-break: break-all;
  user-select: none; -webkit-touch-callout: none; /* long-press opens the edit modal, not text-select/context menu */
}
#m-freq-other { user-select: none; -webkit-touch-callout: none; }
.m-freq-other-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: 13px; color: var(--dim); margin: 2px 0 10px;
}
.m-freq-other { color: var(--amber); }
.m-freq-hint {
  text-align: center; font-size: 10px; color: var(--dim); margin: -6px 0 8px;
  font-family: var(--mono); letter-spacing: 0.3px;
}

.m-chip-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.m-chip-row::-webkit-scrollbar { display: none; }
.m-chip {
  flex: 0 0 auto; border: 1px solid var(--border2); border-radius: 20px; background: var(--panel2);
  color: var(--dim); font-family: var(--mono); font-size: 12px; padding: 8px 14px; cursor: pointer;
  min-height: 40px;
}
.m-chip.active { border-color: var(--green); color: var(--green); background: rgba(var(--green-rgb),0.12); }
.m-band-row.m-chip-row .m-chip.active { border-color: var(--amber); color: var(--amber); background: rgba(var(--amber-rgb),0.10); }

.m-freq-strip {
  margin: 12px 0; height: 56px; border-radius: 10px; background: var(--panel2);
  border: 1px solid var(--border); position: relative; overflow: hidden;
  touch-action: none; user-select: none;
}
.m-freq-strip-track { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.m-freq-strip-hint { font-size: 11px; color: var(--dim); font-family: var(--mono); letter-spacing: 1px; pointer-events: none; }
.m-freq-strip.dragging { border-color: var(--green); }
.m-freq-strip[data-disabled="1"] { opacity: 0.4; touch-action: auto; }

.m-vfo-actions { display: flex; gap: 6px; margin-top: 10px; }
.m-vfo-actions .m-btn { flex: 1; }

/* ── Radio functions (radiofunctions.js reuse) — .rf-* / .rf-slider-*
   are the SAME class names the module itself generates, same idea as
   the wj-*/cw-* reuse elsewhere in this file. ── */
.m-sub-lbl { display: block; font-family: var(--mono); font-size: 9px; color: var(--dim); letter-spacing: 1px; margin-bottom: 4px; }
.m-select {
  width: 100%; border: 1px solid var(--border2); border-radius: 8px; background: var(--panel2);
  color: var(--text); font-family: var(--mono); font-size: 13px; padding: 8px; min-height: 40px;
}
.m-select-row { margin-top: 10px; }

/* ── Collapsible sections (native <details>/<summary> — no JS needed) ── */
.m-collapsible summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  user-select: none;
}
.m-collapsible summary::-webkit-details-marker { display: none; }
.m-collapsible summary::before {
  content: '▸'; color: var(--dim); font-size: 10px; transition: transform 0.15s;
}
.m-collapsible[open] summary::before { transform: rotate(90deg); }
.m-collapsible summary.m-card-title { margin-bottom: 0; }
.m-collapsible[open] summary.m-card-title { margin-bottom: 8px; }
.rf-buttons-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
.rf-buttons-row::-webkit-scrollbar { display: none; }
.rf-btn {
  flex: 0 0 auto; border: 1px solid var(--border2); border-radius: 20px; background: var(--panel2);
  color: var(--dim); font-family: var(--mono); font-size: 11px; padding: 8px 12px; cursor: pointer;
  min-height: 38px; white-space: nowrap;
}
.rf-btn.active { border-color: var(--green); color: var(--green); background: rgba(var(--green-rgb),0.12); }
.rf-btn-power.active { border-color: var(--red); color: var(--red); background: rgba(var(--red-rgb),0.12); }
.rf-slider-tile { margin-top: 12px; }
.rf-slider-tile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.rf-slider-tile-left { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.rf-slider-tile-val { font-family: var(--mono); font-size: 12px; color: var(--green); }
.rf-range { width: 100%; accent-color: var(--green); }

/* ── CW WPM ── */
.m-wpm-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.m-wpm-row .m-sub-lbl { margin-bottom: 0; }
.m-wpm-slider { flex: 1; accent-color: var(--green); }
.m-wpm-val { font-family: var(--mono); font-size: 13px; color: var(--green); width: 22px; text-align: right; }

/* ── Quick QSO log ── */
.m-qlog-row { display: flex; gap: 6px; margin-bottom: 8px; }
.m-qlog-field { flex: 1; min-width: 0; }
.m-qlog-status { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 6px; min-height: 1.2em; }

/* ── Meters ── */
.m-meters { display: flex; justify-content: space-between; text-align: center; padding: 10px 8px; gap: 4px; }
.m-meter { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.m-meter-lbl { font-size: 9px; color: var(--dim); letter-spacing: 1px; }
.m-meter-val { font-family: var(--mono); font-size: 17px; color: var(--green); }

/* ── PTT ── */
.m-ptt-card { display: flex; justify-content: center; }
.m-ptt-btn {
  width: 100%; max-width: 260px; height: 84px; border-radius: 16px;
  background: var(--panel2); border: 2px solid var(--border2); color: var(--dim);
  font-family: var(--mono); font-size: 20px; font-weight: 700; letter-spacing: 3px;
  cursor: pointer; touch-action: none; user-select: none;
}
.m-ptt-btn.active { background: var(--red); border-color: var(--red); color: var(--on-accent); box-shadow: 0 0 20px rgba(var(--red-rgb),0.6); }
.m-ptt-btn:disabled { opacity: 0.4; }

/* ── FT8/FT4 — most of this section reuses desktop's own generated
   classes (wsjtx.js writes wj-* class names regardless of which page
   loaded it), so the rules below target THOSE, not invented m-* names,
   otherwise wsjtx.js's real output would render unstyled. ── */
.wj-mode-switch { display: flex; gap: 6px; margin-bottom: 8px; }
.wj-mode-btn {
  flex: 1; border: 1px solid var(--border2); border-radius: 8px; background: var(--panel2);
  color: var(--dim); font-family: var(--mono); font-size: 13px; font-weight: 700;
  padding: 10px; cursor: pointer; min-height: 40px;
}
.wj-mode-btn.active { border-color: var(--green); color: var(--green); background: rgba(var(--green-rgb),0.12); }
.wj-band-select {
  width: 100%; border: 1px solid var(--border2); border-radius: 8px; background: var(--panel2);
  color: var(--text); font-family: var(--mono); font-size: 13px; padding: 10px; min-height: 44px;
}

/* ── FT8 top row (mode switch + clock + status pill), scope, TX settings ── */
.m-ft8-top-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.m-ft8-top-row .wj-mode-switch { flex: 1; margin-bottom: 0; }
.wsjtx-status-pill {
  font-family: var(--mono); font-size: 10px; color: var(--dim); white-space: nowrap;
  border: 1px solid var(--border2); border-radius: 10px; padding: 4px 8px; background: var(--panel2);
}
.wsjtx-clock-wrap { display: flex; align-items: center; gap: 3px; }
.m-ft8-clock-s { font-family: var(--mono); font-size: 13px; color: var(--text); min-width: 16px; text-align: right; }

.m-ft8-check-row { display: flex; gap: 10px; margin-top: 8px; }
.m-switch-row-inline {
  display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; color: var(--dim);
}
.m-switch-row-inline input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--green); }
.m-hound-check {
  color: #f90; border: 1px solid rgba(255,140,0,0.3); border-radius: 4px; padding: 2px 6px;
}
.m-hound-check input[type="checkbox"] { accent-color: #f90; }

/* Master RX switch (WSJTX.toggleOwnRx) - full width, prominent, since
   nothing else on the FT8 tab works until this is on. */
.m-ft8-own-rx-btn { width: 100%; margin-bottom: 8px; font-weight: 600; }

/* Mini-wodospad: wsjtx_scope.js czeka na realny rozmiar canvasu (getBoundingClientRect)
   zanim zainicjuje WebGL - musi mieć jawną wysokość, nie auto/0. */
.m-ft8-scope-card { padding: 8px; }
.m-ft8-scope-wrap { position: relative; width: 100%; height: 120px; border-radius: 6px; overflow: hidden; }
.m-ft8-scope-canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.m-ft8-df-row {
  display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px;
  color: var(--dim); margin-top: 4px;
}
.m-ft8-df-row span span { color: var(--green); }

/* ── Operatorzy (RadioLock/OpPanel reuse, public/js/radiolock.js) ── */
.m-op-count {
  font-family: var(--mono); font-size: 10px; color: var(--green); background: var(--panel2);
  border: 1px solid var(--border2); border-radius: 10px; padding: 1px 7px; margin-left: auto;
}
.m-op-list { display: flex; flex-direction: column; gap: 3px; max-height: 160px; overflow-y: auto; margin-bottom: 8px; }
.m-op-lock-status {
  font-family: var(--mono); font-size: 11px; text-align: center; color: var(--dim);
  padding: 4px 0; margin-bottom: 6px;
}
.m-confirm-msg { font-family: var(--mono); font-size: 13px; color: var(--text); white-space: pre-line; margin: 8px 0 4px; }

.m-ft8-period-switch { display: flex; gap: 6px; margin-bottom: 8px; }
.m-ft8-freq-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.m-ft8-freq-row .m-sub-lbl { margin-bottom: 0; white-space: nowrap; }
.m-ft8-freq-input {
  flex: 1; text-align: right; font-family: var(--mono);
}
.m-ft8-fake-split-target { font-family: var(--mono); font-size: 9px; color: var(--dim); margin-top: 2px; }
.m-switch-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; padding: 4px 0;
}
.m-switch-row input[type="checkbox"] { width: 40px; height: 24px; accent-color: var(--green); }
.m-ft8-status { font-size: 13px; color: var(--text); margin-bottom: 8px; }
.m-ft8-status.active { color: var(--green); }
.m-ft8-status.done { color: var(--amber); }
.m-ft8-timer-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.m-ft8-timer { font-family: var(--mono); font-size: 12px; color: var(--dim); }
.m-ft8-actions { display: flex; gap: 6px; margin-top: 4px; }
.m-ft8-actions .m-btn { flex: 1; }

.m-tx-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.m-tx-btn {
  border: 1px solid var(--border2); border-radius: 8px; background: var(--panel2);
  color: var(--text); padding: 8px 4px; cursor: pointer; min-height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.m-tx-btn-lbl { font-family: var(--mono); font-weight: 700; font-size: 12px; color: var(--amber); }
.m-tx-btn-txt { font-size: 9px; color: var(--dim); text-align: center; word-break: break-word; line-height: 1.2; }
.m-tx-btn.active { border-color: var(--red); background: rgba(var(--red-rgb),0.15); }

.m-ft8-decodes-card { padding-bottom: 10px; }
.m-ft8-decodes { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.wj-empty { color: var(--dim); font-size: 12px; text-align: center; padding: 10px 0; }
.wj-period-sep { border-top: 1px dashed var(--border2); margin: 2px 0; }
/* .wj-decode-row / .wj-d-* — generated by wsjtx.js::_decodeRowHtml.
   Colors per _classify(): wj-cq/wj-worked/wj-73/wj-mycall/wj-own-tx. */
.wj-decode-row {
  display: flex; flex-wrap: wrap; gap: 4px 8px; font-family: var(--mono); font-size: 11px;
  padding: 7px 8px; background: var(--panel2); border-radius: 6px; cursor: pointer;
}
.wj-decode-row.selected { outline: 1px solid var(--green); }
.wj-decode-row.wj-cq { color: var(--green); }
.wj-decode-row.wj-worked { color: var(--dim); }
.wj-decode-row.wj-73 { color: var(--amber); }
.wj-decode-row.wj-mycall { color: var(--text); background: rgba(var(--green-rgb),0.16); }
.wj-decode-row.wj-own-tx { background: rgba(255,200,0,0.10); border-left: 3px solid var(--amber); }
.wj-d-time { color: var(--dim); }
.wj-d-snr { width: 30px; flex: 0 0 auto; }
.wj-d-dt { color: var(--dim); width: 34px; flex: 0 0 auto; }
.wj-d-freq { color: var(--dim); width: 40px; flex: 0 0 auto; }
.wj-d-msg { flex: 1 1 100%; word-break: break-word; }
.wj-d-grid, .wj-d-country { color: var(--dim); }

/* ── CW ── */
.m-cw-status { font-size: 13px; color: var(--dim); margin-bottom: 10px; text-align: center; }
.m-cw-status.tx { color: var(--red); }
.m-macro-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.m-macro-card {
  border: 1px solid var(--border2); border-radius: 10px; background: var(--panel2);
  padding: 10px 8px; cursor: pointer; min-height: 60px;
  display: flex; flex-direction: column; gap: 3px; align-items: center; justify-content: center;
}
.m-macro-lbl { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--amber); }
.m-macro-txt { font-size: 10px; color: var(--dim); text-align: center; word-break: break-word; line-height: 1.25; }
.m-macro-card.empty { opacity: 0.4; }
.m-cw-hint { text-align: center; font-size: 10px; color: var(--dim); margin-bottom: 10px; }
.m-cw-custom-row { display: flex; gap: 6px; margin-bottom: 10px; }
.m-cw-custom-row .m-text-input { flex: 1; }

.m-text-input, .m-textarea {
  border: 1px solid var(--border2); border-radius: 8px; background: var(--panel2);
  color: var(--text); font-size: 13px; padding: 10px; width: 100%;
}
.m-textarea { min-height: 70px; resize: vertical; margin: 8px 0; }

/* ── QSO log ── */
.m-log-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.m-log-empty { color: var(--dim); font-size: 12px; text-align: center; padding: 10px 0; }
.m-log-item {
  display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono);
  font-size: 12px; padding: 8px 10px; background: var(--panel2); border-radius: 6px;
}
.m-log-call { color: var(--green); font-weight: 700; }
.m-log-meta { color: var(--dim); }

/* ── Rotor (rotormini.js reuse — #rot-* ids, same idea as elsewhere) ── */
/* rotormini.js::updateUI() does panel.style.display='flex' with no
   direction — desktop's own stylesheet sets flex-direction:column for
   this id (it's a narrow sidebar there), but mobile.css never did, so
   the default row stacked the compass/input/buttons side-by-side
   ("cały układ w poziomie" reported live 2026-08-23). */
#rot-side-panel { flex-direction: column; }
.m-rot-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.m-rot-badge { font-family: var(--mono); font-size: 10px; color: var(--dim); }
.m-rot-compass-wrap { position: relative; display: flex; justify-content: center; margin-bottom: 10px; }
.m-rot-compass-wrap canvas { width: 205px; height: 205px; max-width: 100%; }
.m-rot-az-overlay {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--mono); font-size: 20px; color: var(--green); font-weight: 700;
  pointer-events: none;
}
.m-rot-name { text-align: center; font-family: var(--mono); font-size: 11px; color: var(--dim); margin-bottom: 8px; }
.m-rot-preview { font-family: var(--mono); font-size: 11px; min-height: 1.2em; margin-top: 4px; }

.m-desktop-link {
  display: block; text-align: center; padding: 10px; font-size: 12px;
  color: var(--dim); text-decoration: none;
}
.m-desktop-link:active { color: var(--green); }

/* ── Modal (CW macro edit) ── */
.m-modal {
  position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.m-modal-box {
  background: var(--panel); border: 1px solid var(--border2); border-radius: 12px;
  padding: 16px; width: 100%; max-width: 340px;
}
.m-modal-actions { display: flex; gap: 8px; justify-content: flex-end; }

/* ── CZAT (2026-09-03) ── */
.m-chat-badge {
  position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px;
  border-radius: 8px; background: var(--red); color: #fff; font-size: 9px;
  line-height: 15px; text-align: center; padding: 0 3px; font-weight: bold;
}
.m-chat-modal-box { max-width: 420px; display: flex; flex-direction: column; max-height: 80vh; }
.m-chat-messages {
  flex: 1; min-height: 200px; max-height: 50vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 5px; margin: 8px 0;
  padding: 6px; background: var(--panel2); border-radius: 6px;
}
.m-chat-input-row { display: flex; gap: 6px; margin-bottom: 10px; }
.m-chat-input-row .m-text-input { flex: 1; }

/* Message rendering (chat.js's appendMessage - shared verbatim with
   desktop, see style.css's own "CHAT" section for the desktop copy of
   these same classes). mobile.html doesn't load style.css at all, so
   these need their own definitions here too. */
.chat-msg { font-family: var(--mono); font-size: 11px; line-height: 1.4; padding: 4px 6px;
  border-radius: 4px; background: transparent; }
.chat-msg.chat-mine { background: rgba(var(--green-rgb),0.08); }
.chat-msg.chat-system { display: flex; align-items: center; gap: 5px; color: var(--dim);
  font-size: 10px; padding: 2px 6px; }
.chat-header { display: flex; align-items: center; gap: 4px; margin-bottom: 1px; }
.chat-role-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.chat-user { font-weight: bold; }
.chat-call { color: var(--dim); font-size: 10px; }
.chat-time { color: var(--dim); font-size: 9px; margin-left: auto; }
.chat-text { color: var(--text); word-break: break-word; }
.chat-sys-text { font-style: italic; }

/* Slightly wider treatment for tablets/landscape phones, still one column */
@media (min-width: 600px) {
  .m-main { max-width: 560px; }
  .m-freq { font-size: 38px; }
}