/* ============================================================
   minutes — Mobile web app
   Mobile-browser layout for the 3-column workspace + settings,
   from the designer's pack (minutes/Minutes Mobile.html + mobile.css).
   The desktop 3 columns collapse into a navigable single column:
   list → meeting detail (Transcript/Translation toggle) → settings,
   with the bottom-sheet patterns. Built on fs-* + the app kit (m-*).
   Active only at <=760px (gated by JS rendering the .mob shell).
   ============================================================ */

/* meeting-type icon colors */
:root {
  --mt-upload: #DD5A1A;
  --mt-teams:  #5B5BD6;
  --mt-web:    #8A8782;
  --mt-meet:   #2563EB;
  --mt-ink:    #1B1A17;
}

/* fill the viewport + let the inner region scroll (the design mock used a fixed device frame) */
@media (max-width: 760px) {
  html, body { height: 100%; }
  #root.m-app { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
}

/* ---------- app screen ---------- */
.mob { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--fs-bg); position: relative; overflow: hidden; }
.mob__scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* app topbar */
.mtop { height: 54px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--fs-surface); border-bottom: 1px solid var(--fs-border); }
.mtop__brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 18px; letter-spacing: -0.02em; }
.mtop__brand img { width: 26px; height: 26px; border-radius: 7px; display: block; }
.mtop__sp { flex: 1; }
.icon-btn { width: 38px; height: 38px; border-radius: var(--fs-radius); display: grid; place-items: center; color: var(--fs-ink-secondary); background: transparent; border: none; cursor: pointer; }
.icon-btn:hover { background: var(--fs-surface-2); color: var(--fs-ink); }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--fs-ink); color: var(--fs-surface); display: grid; place-items: center; font-size: 12px; font-weight: 600; flex: none; cursor: pointer; }

/* list header */
.mlhead { display: flex; align-items: center; justify-content: space-between; padding: 18px 18px 10px; }
.mlhead h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; margin: 0; }
.mlhead__actions { display: flex; align-items: center; gap: 8px; }
.mlhead__up { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-text-sm); font-weight: 500; color: var(--fs-ink-secondary); padding: 8px 12px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius-pill); background: var(--fs-surface); cursor: pointer; }
.mlhead__up svg { width: 14px; height: 14px; }

/* meeting list */
.mlist { padding: 4px 10px 16px; display: flex; flex-direction: column; }
.mrow { display: flex; align-items: center; gap: 13px; padding: 13px 12px; border-radius: var(--fs-radius-lg); cursor: pointer; position: relative; }
.mrow:active { background: var(--fs-surface-2); }
.mrow.is-selected { background: var(--fs-accent-soft); }
.mrow + .mrow { border-top: 1px solid color-mix(in srgb, var(--fs-border) 60%, transparent); }
.mrow.is-selected + .mrow, .mrow + .mrow.is-selected { border-top-color: transparent; }
.mt-ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 15px; font-family: var(--fs-font-sans); }
.mt-ic--upload { background: var(--mt-upload); }
.mt-ic--teams  { background: var(--mt-teams); }
.mt-ic--web    { background: var(--mt-web); }
.mt-ic--meet   { background: var(--mt-meet); }
.mt-ic--ink    { background: var(--mt-ink); }
.mrow__main { flex: 1; min-width: 0; }
.mrow__name { font-size: var(--fs-text-md); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mrow__sub { font-family: var(--fs-font-mono); font-size: 11px; color: var(--fs-ink-muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; }
.mrow__chev { color: var(--fs-ink-muted); flex: none; }

/* ---------- meeting detail ---------- */
.mdhead { flex: none; background: var(--fs-surface); border-bottom: 1px solid var(--fs-border); }
.mdhead__top { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 6px; }
.mdback { display: inline-flex; align-items: center; gap: 3px; padding: 8px 8px 8px 6px; border: none; background: transparent; color: var(--fs-ink); font-family: var(--fs-font-sans); font-size: var(--fs-text-md); font-weight: 500; cursor: pointer; border-radius: var(--fs-radius); }
.mdback:hover { background: var(--fs-surface-2); }
.mdhead__title { flex: 1; min-width: 0; }
.mdhead__title b { display: block; font-size: var(--fs-text-md); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdhead__title span { font-family: var(--fs-font-mono); font-size: 11px; color: var(--fs-ink-muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
/* segmented Transcript / Translation */
.mseg { display: flex; gap: 0; padding: 4px 12px 12px; }
.mseg__track { display: flex; width: 100%; padding: 3px; gap: 3px; background: var(--fs-surface-3); border: 1px solid var(--fs-border); border-radius: var(--fs-radius); }
.mseg__item { flex: 1; appearance: none; border: none; background: transparent; font-family: var(--fs-font-sans); font-size: var(--fs-text-sm); font-weight: 500; color: var(--fs-ink-secondary); padding: 8px 10px; border-radius: calc(var(--fs-radius) - 4px); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.mseg__item.is-selected { background: var(--fs-surface); color: var(--fs-ink); box-shadow: var(--fs-shadow-sm); }
.mseg__item .tgt { font-family: var(--fs-font-mono); font-size: 10px; color: var(--fs-ink-muted); }
.mseg__item.is-selected .tgt { color: var(--fs-accent); }

/* transcript / translation stream (mobile, stacked lines) */
.mstream { padding: 6px 18px 24px; }
.mline { padding: 13px 0; border-bottom: 1px dashed var(--fs-border); }
.mline:last-child { border-bottom: 0; }
.mline__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mline__lang { font-family: var(--fs-font-mono); font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; background: var(--fs-ink); color: var(--fs-surface); }
.mline__time { font-family: var(--fs-font-mono); font-size: 11px; color: var(--fs-ink-muted); }
.mline__text { font-size: var(--fs-text-md); line-height: 1.5; color: var(--fs-ink); text-wrap: pretty; }
.mline--tr .mline__text { color: var(--fs-ink-secondary); }
.mline__already { font-size: var(--fs-text-base); color: var(--fs-ink-muted); font-style: italic; }
.mline__link { color: var(--fs-accent); font-size: var(--fs-text-base); cursor: pointer; }
.mline__failed { color: var(--fs-danger); font-size: var(--fs-text-base); }
.mline__failed button { background: none; border: none; color: var(--fs-accent); cursor: pointer; font: inherit; text-decoration: underline; padding: 0 0 0 4px; }
/* RTL */
.mline[dir="rtl"] .mline__meta { flex-direction: row-reverse; }
.mline[dir="rtl"] .mline__text { text-align: right; direction: rtl; font-size: 17px; }

/* live interim footer */
.minterim { display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-top: 1px solid var(--fs-border); background: var(--fs-surface-2); font-family: var(--fs-font-mono); font-size: 12px; color: var(--fs-ink-muted); flex: none; }
.minterim .caret { width: 8px; height: 14px; background: var(--fs-accent); animation: mcaret 1s steps(2,end) infinite; }
@keyframes mcaret { 50% { opacity: 0; } }

/* ---------- bottom sheet ---------- */
.mob__dim { position: absolute; inset: 0; background: rgba(27,26,23,0.34); z-index: 8; }
.msheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 9;
  background: var(--fs-surface); border-radius: 22px 22px 0 0;
  box-shadow: 0 -8px 40px rgba(27,26,23,0.18); padding: 8px 0 0;
  max-height: 86%; overflow-y: auto;
}
.msheet__grab { width: 38px; height: 5px; border-radius: 3px; background: var(--fs-border-strong); margin: 8px auto 6px; }
.msheet__title { font-size: var(--fs-text-md); font-weight: 600; padding: 8px 20px 12px; display: flex; align-items: center; gap: 9px; }
.msheet__title .sub { font-family: var(--fs-font-mono); font-size: 11px; color: var(--fs-ink-muted); font-weight: 400; margin-left: auto; }
.msheet__sec { padding: 8px 20px; }
.msheet__sec + .msheet__sec { border-top: 1px solid var(--fs-border); }
.msheet__lab { font-family: var(--fs-font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fs-ink-muted); margin-bottom: 10px; }
.msheet__pad { height: 14px; }

/* sheet action items */
.mact { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 20px; border: none; background: transparent; font-family: var(--fs-font-sans); font-size: var(--fs-text-md); color: var(--fs-ink); cursor: pointer; text-align: left; }
.mact:active { background: var(--fs-surface-2); }
.mact + .mact { border-top: 1px solid var(--fs-border); }
.mact svg { width: 19px; height: 19px; color: var(--fs-ink-secondary); flex: none; }
.mact__sub { margin-left: auto; font-family: var(--fs-font-mono); font-size: 12px; color: var(--fs-ink-muted); }
.mact--danger { color: var(--fs-danger); }
.mact--danger svg { color: var(--fs-danger); }

/* segmented inside sheets (output language / model) */
.mchips { display: flex; gap: 8px; flex-wrap: wrap; }
.mchip { font-family: var(--fs-font-sans); font-size: var(--fs-text-sm); font-weight: 500; padding: 8px 14px; border-radius: var(--fs-radius-pill); border: 1px solid var(--fs-border); background: var(--fs-surface); color: var(--fs-ink); cursor: pointer; }
.mchip.is-selected { background: var(--fs-ink); color: var(--fs-surface); border-color: var(--fs-ink); }
.mchip__mono { font-family: var(--fs-font-mono); font-size: 10px; opacity: 0.7; margin-left: 5px; }

/* account menu rows */
.mmenu__head { display: flex; align-items: center; gap: 13px; padding: 6px 20px 16px; border-bottom: 1px solid var(--fs-border); }
.mmenu__head .avatar { width: 40px; height: 40px; font-size: 14px; }
.mmenu__head b { font-size: var(--fs-text-md); font-weight: 600; }
.mmenu__head span { font-family: var(--fs-font-mono); font-size: 11px; color: var(--fs-ink-muted); display: block; margin-top: 2px; }

/* share chip in sheet */
.msharebox { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface-2); margin-top: 8px; }
.msharebox__url { font-family: var(--fs-font-mono); font-size: 12px; color: var(--fs-ink-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }

/* ---------- settings ---------- */
.msettings { padding: 6px 0 24px; }
.msettings__head { display: flex; align-items: center; gap: 10px; padding: 10px 14px 6px; }
.msettings__head h1 { font-size: 24px; font-weight: 600; letter-spacing: -0.03em; margin: 0; }
.mtabs { display: flex; gap: 6px; padding: 8px 16px 0; overflow-x: auto; border-bottom: 1px solid var(--fs-border); }
.mtab { appearance: none; border: none; background: transparent; font-family: var(--fs-font-sans); font-size: var(--fs-text-md); font-weight: 500; color: var(--fs-ink-secondary); padding: 10px 4px; white-space: nowrap; cursor: pointer; position: relative; }
.mtab.is-selected { color: var(--fs-ink); }
.mtab.is-selected::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--fs-accent); border-radius: 2px; }
.mtab + .mtab { margin-left: 14px; }

/* ============================================================
   Installed-PWA safe areas (iOS standalone / Add-to-Home-Screen)
   ------------------------------------------------------------
   index.html declares viewport-fit=cover + apple-mobile-web-app-status-bar-style
   black-translucent, so once installed the web view renders EDGE-TO-EDGE: content
   sits behind the status bar (top) and the home indicator (bottom). In a normal
   browser tab env(safe-area-inset-*) is 0, so these rules are no-ops until the app
   is added to the home screen. Each view's top bar grows by the top inset (its own
   surface background fills behind the status bar); scroll regions + bottom-pinned
   decks clear the home indicator. (.a2hs in recordflow.css already insets itself.)
   ============================================================ */
/* list view topbar (brand + account/settings avatar — the tap targets that were
   hidden under the clock/battery) */
.mtop { height: calc(54px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
/* meeting-detail + new-recording header (back / title / ⋮ menu / Transcript·Translation tabs) */
.mdhead { padding-top: env(safe-area-inset-top); }
/* settings view: its header scrolls at the very top, so inset the content itself */
.msettings { padding-top: calc(6px + env(safe-area-inset-top)); }
/* every scroll region clears the home indicator so the last row is reachable */
.mob__scroll { padding-bottom: env(safe-area-inset-bottom); }
/* live-interim footer sits directly on the home indicator */
.minterim { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }