/* Hermes Mirror · desktop web layout (>= 1100 px). Design: design/desktop-web/*.png, numbers from Hermes Desktop's
   styles.css: sidebar 237 px, tab strip 40 px, status bar 24 px, composer 52 px, right rail 300 px (560 px with the bot
   screen open, 40 px strip when collapsed), transcript column max 900 px with a 36 px inset.
   Below 1100 px nothing in this file applies except the one rule that keeps the desktop chrome hidden, so the phone
   layout is untouched. Colours, fonts and radii are the style tokens from app.css / themes.css (all seven styles). */
.dt-el { display: none; }

@media (min-width: 1100px) {
  :root {
    --dt-side-bg: color-mix(in srgb, var(--card) 55%, var(--bg));
    --dt-top-bg: var(--tab-bg); --dt-top-line: var(--line);
    --dt-col: 900px; --dt-sun-r: 380px;
  }
  [data-theme="arcade"] { --dt-top-bg: linear-gradient(90deg, #0b0a0c 0%, #1a1016 50%, #2e1218 100%); --dt-top-line: #ff7a1a; --dt-side-bg: #100e11; }
  [data-theme="phosphor"] { --dt-top-bg: #030a05; --dt-top-line: #33ff66; --dt-side-bg: #030a05; }
  [data-theme="blueprint"] { --dt-top-bg: rgb(11 48 112 / .92); --dt-top-line: #e8f1ff; --dt-side-bg: rgb(11 48 112 / .62); }
  [data-theme="mac"] { --dt-top-bg: #ffffff; --dt-top-line: #000000; --dt-side-bg: #ffffff; }
  [data-theme="hal"] { --dt-top-bg: #05070a; --dt-top-line: #1c2128; --dt-side-bg: #05070a; }
  [data-theme="outrun"] { --dt-top-bg: rgb(10 0 24 / .92); --dt-top-line: #ff2fb2; --dt-side-bg: rgb(20 0 46 / .72); }
  [data-theme="zine"] { --dt-top-bg: #ffffff; --dt-top-line: #0a0a0a; --dt-side-bg: #ffffff; }

  /* ---------------------------------------------------------------- grid */
  :root #app {
    max-width: none; margin: 0; display: grid;
    grid-template-columns: 237px minmax(0, 1fr) 0 var(--dt-rail-w, 40px);
    grid-template-rows: 40px minmax(0, 1fr) 24px;
    grid-template-areas: "brand top top top" "side main drawer rail" "side status status status";
  }
  body.dt-rail-open #app { --dt-rail-w: 300px; }
  body.dt-screen-rail #app { --dt-rail-w: 560px; }
  :root body.dt-drawer #app { grid-template-columns: 237px minmax(0, 1fr) clamp(360px, 30vw, 440px) 40px; }
  [data-theme="mac"] #app { padding-top: 26px; }
  :root #tabs { display: none; }
  :root #app > .view { grid-area: main; min-width: 0; min-height: 0; padding: 22px 36px 0; gap: 14px; }
  body[data-dt-under="chat"] #v-chat.hidden, body[data-dt-under="kboard"] #v-kboard.hidden { display: flex !important; }
  :root #app > #v-kcard, :root #app > #v-tool { grid-area: drawer; padding: 16px 20px 0; border-left: 1px solid var(--line); background: var(--dt-side-bg); }
  body.dt-screen-rail #dt-rail { display: none; }
  :root body.dt-screen-rail #app > #v-screen { grid-area: rail; padding: 12px 14px 14px; gap: 10px; border-left: 1px solid var(--line); background: var(--dt-side-bg); }

  /* phone header decor belongs to the phone layout; desktop decor lives in the tab strip */
  :root .view > .hdr::before, :root .view > .hdr::after, :root .chat-hdr::before { content: none !important; display: none !important; }
  :root #conn-pill { display: none; }
  :root .ksheet, :root .model-overlay { align-items: center; }
  :root .ksheet-card { max-width: 520px; border-radius: var(--r-card); padding-bottom: 18px; }
  :root .model-sheet { width: min(100%, 620px); max-height: 82vh; border-radius: var(--r-card); }
  :root .toast { bottom: 44px; }
  :root .media-viewer { z-index: 120; }

  /* ---------------------------------------------------------------- brand + tab strip */
  #dt-brand { grid-area: brand; display: flex; align-items: center; gap: 10px; padding: 0 14px; min-width: 0;
    background: var(--dt-top-bg); border-bottom: 2px solid var(--dt-top-line); border-right: 1px solid var(--line); font-size: 13.5px; white-space: nowrap; }
  #dt-brand b { color: var(--text); font-family: var(--font-display); }
  .dt-logo { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--logo-bg); color: var(--logo-fg); font: 700 13px/1 var(--font-display); }
  [data-theme="hal"] .dt-logo { border-radius: 50%; border: 1px solid #8a8f96; box-shadow: 0 0 10px rgb(227 0 27 / .45); }
  [data-theme="blueprint"] .dt-logo, [data-theme="phosphor"] .dt-logo, [data-theme="mac"] .dt-logo { border: 1px solid currentColor; color: var(--text); }
  #dt-top { grid-area: top; display: flex; align-items: stretch; min-width: 0; position: relative; isolation: isolate;
    background: var(--dt-top-bg); border-bottom: 2px solid var(--dt-top-line); }
  .dt-tabs { display: flex; min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .dt-tab { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 260px; padding: 0 8px 0 16px;
    color: var(--muted); font-size: 13px; cursor: pointer; white-space: nowrap; border-right: 1px solid var(--line-soft); }
  .dt-tab:hover { color: var(--text); }
  .dt-tab.on { color: var(--text); font-weight: 700; }
  .dt-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--accent2); }
  .dt-tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .dt-tab .prompt-badge { flex: none; }
  .dt-tx { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 0; padding: 0; background: none; color: var(--dim); border-radius: var(--r-badge); }
  .dt-tx:hover { color: var(--text); background: var(--card2); }
  .dt-tx svg { width: 13px; height: 13px; }
  .dt-ib { flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--muted); border-radius: var(--r-sm); align-self: center; }
  .dt-ib:hover { color: var(--text); background: var(--card2); }
  .dt-ib svg { width: 18px; height: 18px; }
  #dt-tab-new { margin-left: 4px; }
  .dt-top-r { margin-left: auto; display: flex; align-items: center; gap: 4px; padding: 0 12px 0 8px; }
  #dt-conn { margin-left: 6px; }
  #dt-conn.pill-on b { font-size: 0; }
  #dt-conn.pill-on b::after { content: var(--conn-txt, "Connected"); font-size: 12px; }
  .dt-live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--live, var(--amber)); }
  /* per-style decor in the strip (CSS only, behind the tabs) */
  .dt-sun { position: absolute; z-index: -1; pointer-events: none; }
  [data-theme="arcade"] .dt-sun { right: var(--dt-sun-r); bottom: 0; width: 62px; height: 24px; border-radius: 62px 62px 0 0;
    background: linear-gradient(transparent 0 13px, #2a1117 13px 15px, transparent 15px 17px, #2a1117 17px 19px, transparent 19px 21px, #2a1117 21px), linear-gradient(#ffd23f, #ff7a1a);
    box-shadow: 0 0 28px 6px rgb(255 122 26 / .25); }
  [data-theme="hal"] .dt-sun { right: var(--dt-sun-r); top: 6px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #8a8f96;
    background: radial-gradient(circle 9px, #fff7b0 0, #ffb000 2px, #e3001b 5px, #5a0008 8px, #120002 10px, transparent 11px), radial-gradient(circle, #3a3a3a 0, #111 100%);
    box-shadow: 0 0 16px 3px rgb(227 0 27 / .3); animation: hm-hal 5s ease-in-out infinite; }
  [data-theme="outrun"] .dt-sun { right: var(--dt-sun-r); bottom: 0; width: 70px; height: 26px; border-radius: 70px 70px 0 0; background: linear-gradient(#ffd166, #ff2fb2); opacity: .7;
    -webkit-mask-image: linear-gradient(#000 0 50%, transparent 50% 58%, #000 58% 70%, transparent 70% 78%, #000 78%); mask-image: linear-gradient(#000 0 50%, transparent 50% 58%, #000 58% 70%, transparent 70% 78%, #000 78%); }
  [data-theme="phosphor"] .dt-sun { right: var(--dt-sun-r); top: 13px; font-size: 10px; letter-spacing: 1px; color: #1fa84a; white-space: nowrap; }
  [data-theme="phosphor"] .dt-sun::before { content: "HERMES-OS v2.6 · TTY1 · 9600 BAUD"; }
  [data-theme="blueprint"] .dt-sun { right: var(--dt-sun-r); top: 12px; font-size: 9px; color: #7fd3ff; white-space: nowrap; }
  [data-theme="blueprint"] .dt-sun::before { content: "DWG HM-01 · SHEET 1/6 · REV C"; }
  [data-theme="mac"] .dt-sun { left: 0; right: 0; top: 0; bottom: 0; background: none; }
  [data-theme="zine"] .dt-sun { right: var(--dt-sun-r); top: 9px; transform: rotate(-4deg); padding: 2px 12px; background: rgb(245 255 59 / .9); font: 700 11px/16px var(--mono); letter-spacing: 2px; color: #0a0a0a; }
  [data-theme="zine"] .dt-sun::before { content: "ISSUE #07"; }
  [data-theme="zine"] #dt-top, [data-theme="zine"] #dt-brand { border-bottom-width: 3px; }

  /* ---------------------------------------------------------------- sidebar */
  #dt-side { grid-area: side; position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0;
    padding: 8px 8px 0; background: var(--dt-side-bg); border-right: 1px solid var(--line); }
  .dt-stabs { flex: none; display: flex; gap: 22px; padding: 4px 8px 0; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
  .dt-stabs button { border: 0; background: none; padding: 6px 0 7px; color: var(--dim); font: 600 11.5px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }
  .dt-stabs button.on { color: var(--text); box-shadow: inset 0 -2px var(--accent); }
  .dt-nav { flex: none; display: flex; flex-direction: column; gap: 1px; }
  .dt-nav button { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 10px; border: 0; border-radius: var(--r-sm);
    background: none; color: var(--soft); font-size: 13.5px; text-align: left; }
  .dt-nav button:hover, .dt-row:hover { background: color-mix(in srgb, var(--card2) 70%, transparent); }
  .dt-nav button svg { flex: none; width: 17px; height: 17px; color: var(--muted); }
  .dt-nav button span { flex: 1; min-width: 0; }
  .dt-nav button.on { background: var(--card2); color: var(--text); font-weight: 700; box-shadow: inset 2px 0 var(--accent); }
  .dt-nav kbd, .dt-search kbd { flex: none; font: 10.5px var(--mono); color: var(--dim); }
  .dt-nd { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex: none; }
  :root .dt-search { height: 32px; margin: 8px 2px 4px; padding: 0 10px; gap: 8px; }
  .dt-search input { font-size: 13px; min-width: 0; }
  .dt-search input::-webkit-search-cancel-button { display: none; }
  .dt-list { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-bottom: 8px; scrollbar-width: thin; }
  .dt-sec { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 12px 10px 5px; }
  :root .dt-sec .sec { margin: 0; font-size: 11px; min-width: 0; text-overflow: ellipsis; }
  .dt-sec b { color: var(--dim); font-size: 11px; font-weight: 500; }
  .dt-row { position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 6px 10px; margin: 1px 0; border: 0; border-radius: var(--r-sm);
    background: none; color: var(--text); text-align: left; }
  .dt-row.on { background: var(--card2); }
  .dt-row.on::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--accent); }
  .dt-rm { flex: 1; min-width: 0; }
  .dt-rl { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
  .dt-rt { flex: 1; min-width: 0; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dt-row.on .dt-rt { font-weight: 700; }
  .dt-rs { margin-top: 1px; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dt-rb { margin-top: 2px; }
  .dt-rr { flex: none; display: flex; align-items: center; gap: 6px; color: var(--dim); font-size: 11.5px; }
  .dt-rr .unread { width: 7px; height: 7px; }
  :root .dt-av { width: 30px; height: 30px; font-size: 11px; }
  .dt-empty { color: var(--dim); font-size: 12.5px; padding: 8px 10px; }
  .dt-prof { flex: none; display: flex; align-items: center; gap: 10px; margin: 0 -8px; padding: 10px 14px 12px; border: 0; border-top: 1px solid var(--line);
    background: none; color: var(--text); text-align: left; }
  .dt-prof > svg { width: 16px; height: 16px; color: var(--muted); }
  .dt-pm { flex: 1; min-width: 0; display: flex; flex-direction: column; }
  .dt-pm b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dt-pm span { color: var(--muted); font-size: 11.5px; }
  .dt-profmenu { position: absolute; z-index: 30; left: 8px; right: 8px; bottom: 64px; max-height: min(62vh, 560px); overflow-y: auto; padding: 6px;
    background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--card-shadow), 0 14px 40px rgb(0 0 0 / .4); }
  .dt-pmh { padding: 6px 8px; color: var(--label); font-size: 11px; font-weight: 600; letter-spacing: var(--label-ls); text-transform: var(--tt-label); }
  .dt-profmenu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 5px 8px; border: 0; border-radius: var(--r-sm); background: none; color: var(--text); text-align: left; font-size: 13px; }
  .dt-profmenu button:hover, .dt-profmenu button.on { background: var(--card2); }
  .dt-profmenu button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .dt-profmenu em { font-style: normal; font-size: 11px; color: var(--link); opacity: 0; }
  .dt-profmenu button:hover em { opacity: 1; }
  .dt-profmenu .dt-pmall { color: var(--link); justify-content: center; margin-top: 4px; }
  .dt-profmenu .av { width: 24px; height: 24px; font-size: 10px; }

  /* ---------------------------------------------------------------- right rail */
  #dt-rail { grid-area: rail; display: flex; min-width: 0; min-height: 0; overflow: hidden; background: var(--dt-side-bg); border-left: 1px solid var(--line); }
  .dt-strip { flex: none; width: 39px; display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 16px 0; }
  .dt-strip button { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 4px 0; border: 0; background: none; color: var(--muted);
    font: 600 10px/1 var(--font); letter-spacing: .2em; text-transform: uppercase; }
  .dt-strip button:hover { color: var(--text); }
  .dt-strip svg { width: 16px; height: 16px; }
  .dt-strip span { writing-mode: vertical-rl; }
  .dt-panel { display: none; flex: 1; min-width: 0; flex-direction: column; gap: 18px; padding: 12px 14px 14px; overflow-y: auto; }
  body.dt-rail-open .dt-strip { display: none; }
  body.dt-rail-open .dt-panel { display: flex; }
  body.dt-drawer #dt-rail .dt-strip button { cursor: default; opacity: .6; }
  .dt-rsec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
  .dt-rkanban { padding-top: 16px; border-top: 1px solid var(--line); }
  .dt-rh { display: flex; align-items: center; gap: 8px; color: var(--muted); min-height: 24px; }
  .dt-rh > svg { flex: none; width: 16px; height: 16px; }
  :root .dt-rh .sec { flex: 1; margin: 0; font-size: 11px; }
  .dt-rh .dt-ib { width: 24px; height: 24px; }
  .dt-rh .dt-ib svg { width: 15px; height: 15px; }
  .dt-rboard { flex: none; max-width: 52%; border: 0; background: none; padding: 0; color: var(--muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dt-rboard:hover { color: var(--link); }
  .dt-scrcard { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 16 / 10; padding: 14px; overflow: hidden;
    background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r-card); color: var(--muted); font-size: 12px; text-align: center; }
  .dt-scrcard.on { color: var(--text); border-color: var(--ok-line); }
  .dt-scrcard:hover { border-color: var(--accent); }
  .dt-scrwin { position: absolute; left: 10px; right: 10px; top: 9px; display: flex; gap: 6px; }
  .dt-scrwin i { width: 22px; height: 5px; border-radius: 3px; background: var(--line); }
  .dt-scrmsg { position: relative; max-width: 90%; }
  .dt-vo { position: absolute; left: 9px; bottom: 9px; display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; }
  .dt-rec { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
  .dt-scrmeta { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; min-width: 0; }
  .dt-scrmeta b { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dt-scrmeta span { color: var(--muted); }
  .dt-kc { position: relative; display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 8px 28px 8px 11px; border: var(--card-bw, 1px) solid var(--card-line, var(--line));
    border-left: 3px solid var(--tone); border-radius: var(--r-sm); background: var(--card-bg); box-shadow: var(--card-shadow); color: var(--text); text-align: left; }
  .dt-kc:hover { border-color: var(--accent); border-left-color: var(--tone); }
  .dt-kt { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dt-ks { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dt-kc i { position: absolute; right: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--tone); }
  .dt-kmore { align-self: flex-start; border: 0; background: none; padding: 2px 0; color: var(--link); font-size: 12px; }
  #dt-rkanban { display: flex; flex-direction: column; gap: 8px; }

  /* ---------------------------------------------------------------- status bar */
  #dt-status { grid-area: status; display: flex; align-items: center; gap: 28px; min-width: 0; padding: 0 14px; overflow: hidden; white-space: nowrap;
    background: var(--dt-side-bg); border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; }
  .dt-st-conn { display: inline-flex; align-items: center; gap: 7px; color: var(--soft); }
  .dt-st-conn i { width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
  .dt-st-conn.on i { background: var(--green); }
  #dt-st-mid { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #dt-st-r { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

  /* ---------------------------------------------------------------- list views in the main column */
  :root #app > :is(#v-sessions, #v-live, #v-kanban, #v-profiles, #v-pair, #v-style, #v-new) > * { width: 100%; max-width: var(--dt-col); margin-inline: auto; }
  :root #app > #v-sessions > .chips { margin-inline: auto; padding: 0; }
  :root #app > :is(#v-sessions, #v-live, #v-kanban, #v-profiles) .list { padding-bottom: 24px; }
  :root #app > #v-pair > .scroll { max-width: 640px; }
  :root #app > #v-pair > .pair-foot { max-width: 640px; }
  :root .sgrid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  :root #app > #v-new > .composer { margin-bottom: 18px; }

  /* ---------------------------------------------------------------- chat */
  :root #app > #v-chat, :root #app > #v-group { padding: 0; gap: 0; }
  :root #v-chat > .chat-hdr, :root #v-group > .chat-hdr { min-height: 52px; padding: 8px max(36px, calc((100% - var(--dt-col)) / 2)); border-bottom: 1px solid var(--line-soft); }
  :root #v-chat .back, :root #v-group .back, :root #v-kboard .back { display: none; }
  :root #transcript { padding: 22px max(36px, calc((100% - var(--dt-col)) / 2)) 24px; gap: 14px; }
  :root #transcript .u { align-self: stretch; max-width: none; border-radius: var(--r-input); padding: 12px 16px; }
  :root #transcript .tool { min-height: 38px; padding: 8px 12px; }
  :root #chat-prompt { margin: 14px max(36px, calc((100% - var(--dt-col)) / 2)) 0; max-height: 64%; }
  :root .prompt-card { border-color: var(--amber); }
  :root .prompt-actions { justify-content: flex-end; }
  :root .prompt-actions button { flex: 0 0 auto; width: auto; min-width: 110px; height: 40px; padding: 0 20px; margin: 0; font-size: 14px; }
  :root #composer { min-height: 52px; align-items: center; margin: 0 max(24px, calc((100% - var(--dt-col) - 48px) / 2)) 16px; padding: 7px 7px 7px 16px; }
  :root #composer #chat-model { max-width: 48%; display: inline-flex; align-items: center; gap: 0; padding: 6px 10px; font-size: 0; color: var(--text); background: var(--card2); border-radius: var(--r-sm); }
  :root #composer #chat-model::before { content: attr(data-m); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 12px/1.2 var(--font); color: var(--text); }
  :root #composer #chat-model::after { content: "\00a0·\00a0This chat only ▾"; flex: none; font: 12px/1.2 var(--font); color: var(--accent2); white-space: nowrap; }
  :root #group-log { padding: 20px max(36px, calc((100% - var(--dt-col)) / 2)) 24px; }
  :root #v-group .group-foot { padding: 10px max(24px, calc((100% - var(--dt-col) - 48px) / 2)) 16px; }

  /* ---------------------------------------------------------------- tool call drawer */
  :root #app > #v-tool > .scroll { padding-bottom: 18px; }
  :root #v-tool .code { max-height: 38vh; }

  /* ---------------------------------------------------------------- kanban: columns side by side, card as drawer */
  :root #app > #v-kboard { padding: 18px 24px 16px; gap: 12px; }
  :root #kb-colnav { margin: 0; padding: 0; flex-wrap: wrap; overflow: visible; }
  :root .kcols { margin: 0; padding: 0 0 4px; gap: 10px; scroll-snap-type: none; scrollbar-width: thin; }
  :root .kcol { flex: 1 1 0; width: auto; min-width: 150px; }
  /* empty columns: the status chips above already show them (a tap on a 0 chip opens the column) */
  :root .kcol.rail { display: none; }
  body.dt-drawer .kcol { min-width: 128px; }
  :root #app > #v-kcard { gap: 12px; }
  :root #v-kcard .kcard { padding-bottom: 24px; }
  :root #v-kanban .list { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 10px; align-content: start; }
  :root #v-kanban .list .row { margin: 0; }

  /* ---------------------------------------------------------------- bot screen */
  :root #app > #v-screen { padding: 18px 36px 16px; }
  :root #scr-rot { display: none; }  /* rotation is for portrait phones */
  body.dt-screen-rail #v-screen .chat-title h2 { font-size: 14px; }
  body.dt-screen-rail #v-screen .scr-foot { flex-wrap: wrap; }
}