/* mobiel.css -- the studio on a phone (#0000-1404). Every colour is a token from core.css, so it is
 * light and dark like the rest. Body text is 17 px (never below 16: a smaller field makes a phone zoom),
 * every thing you press is at least 44 px high, and nothing is wider than the screen: texts wrap
 * anywhere instead of pushing the page sideways. body.mob hides the desktop client and shows #mob. */

#mob-pill { display: none; }
@media (max-width: 700px) {
  body:not(.mob) #mob-pill {
    display: block; position: fixed; right: 12px; bottom: 12px; z-index: 900;
    min-height: 44px; padding: 0 18px; border-radius: 22px;
    background: var(--accent); color: var(--accent-tx); font-weight: 600;
    box-shadow: var(--shadow-card);
  }
}

body.mob > *:not(#mob):not(script):not(#tfaroot):not(#accountroot):not(.dna):not(#dlgroot):not(.mcs-scrim):not(.crm-scrim):not(.liv-scrim):not(.vr-scrim):not(.lns-scrim):not(.scr-phone):not(.fb-scrim):not(.fb-phone):not(.fb-toast):not(.bj-lb) { display: none !important; }   /* #0000-3083: the attachment viewer; #0000-3094: so may the feedback window, its button and its message; #0000-2748: so may the Lanes; #0000-2724: so may the Questions; #0000-1435: the two-step card may show; #0000-2289: so may MCP services; #0000-1927: so may the welcome tour */
body.mob #mob { display: flex; }

#mob {
  display: none;
  position: fixed; inset: 0;
  height: 100vh; height: 100dvh;
  flex-direction: column;
  background: var(--bg); color: var(--text);
  font: 17px/1.45 var(--font-ui);
  -webkit-user-select: text; user-select: text;
  overflow-wrap: anywhere;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
#mob button { -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#mob *:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* ---- the bar on top ---------------------------------------------------------------------------- */
.mob-top {
  flex: none; display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 4px 12px; padding-top: calc(4px + env(safe-area-inset-top));
  background: var(--chrome); border-bottom: 1px solid var(--rule);
}
/* #0000-2724: more icons than a phone is wide: the bar wraps, so every one stays within reach */
@media (max-width: 520px) { .mob-top { flex-wrap: wrap; row-gap: 0; } }
.mob-name { font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.mob-conn { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--text-dim); font-size: 15px; }
.mob-conntext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--text-muted); }
.mob-dot[data-state="ok"] { background: var(--ok); }
.mob-dot[data-state="gone"] { background: var(--danger); }
.mob-full {
  flex: none; min-height: 44px; padding: 0 6px; color: var(--accent-hi); font-size: 15px;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---- one screen -------------------------------------------------------------------------------- */
.mob-main { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 14px 24px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.mob-head { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; }
.mob-title { flex: 1; margin: 0; font-size: 24px; line-height: 1.2; color: var(--text-strong); font-weight: 600; }
.mob-back {
  flex: none; min-height: 44px; min-width: 44px; padding: 0 12px 0 0; color: var(--accent-hi); font-weight: 600;
}
.mob-sub { margin: 0 0 8px; color: var(--text-dim); font-size: 15px; }
.mob-sub2 { margin: 6px 0 4px; font-size: 20px; line-height: 1.25; color: var(--text-strong); font-weight: 600; }
.mob-label { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--text-dim); }
h3.mob-label { margin-top: 14px; }
.mob-empty { padding: 22px 6px; text-align: center; color: var(--text-dim); }
.mob-msg { margin: 8px 0 0; color: var(--text); }
.mob-msg.bad { color: var(--danger-tx); }
.mob-list { display: flex; flex-direction: column; gap: 10px; }

/* ---- a card (a decision, an agent, a box) ------------------------------------------------------ */
.mob-card {
  padding: 12px 14px 14px; background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.mob-card.urgent { border-left: 4px solid var(--attn); }
.mob-build { margin: 6px 0 14px; }
.mob-card-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.mob-from { flex: 1; font-weight: 600; color: var(--text-strong); }
.mob-due { flex: none; font-size: 15px; color: var(--text-dim); }
.mob-due.over { color: var(--danger-tx); }
.mob-text { margin: 4px 0 8px; color: var(--text-strong); }
.mob-tags { margin: 2px 0 6px; font-size: 15px; color: var(--text-dim); }
.mob-note { margin: 4px 0; font-size: 15px; color: var(--text); }
.mob-note b { color: var(--text-dim); font-weight: 600; }

.mob-state-dot { flex: none; align-self: center; width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted); }
.mob-agent.run .mob-state-dot { background: var(--statusbg); }
.mob-agent.wait .mob-state-dot { background: var(--attn); }
.mob-agent.done .mob-state-dot { background: var(--ok); }
.mob-agent.fail .mob-state-dot { background: var(--danger); }
.mob-agent.done.nobuild .mob-state-dot { background: var(--attn); }
.mob-agent.nobuild .mob-tags, .mob-build.bad, .mob-build-bad { color: var(--attn); }
.mob-agent.wait { border-left: 4px solid var(--attn); }

/* ---- buttons and fields: big enough for a thumb ------------------------------------------------ */
.mob-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.mob-btn {
  flex: 1 1 auto; min-width: 88px; min-height: 48px; padding: 0 16px;
  background: var(--surface2); color: var(--text-strong); border: 1px solid var(--rule);
  border-radius: var(--radius-md); font-weight: 600; text-align: center;
}
a.mob-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; }   /* #0000-1455: Open page is a link */
.mob-btn:active { background: var(--hover); }
.mob-btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-tx); }
.mob-btn.quiet { background: none; color: var(--text); }
.mob-btn.danger { background: none; color: var(--danger-tx); border-color: var(--danger); }
.mob-btn.wide { display: block; width: 100%; margin-top: 8px; }
.mob-btn:disabled { opacity: .55; }
.mob-input {
  display: block; width: 100%; min-height: 48px; padding: 10px 12px;
  background: var(--bg); color: var(--text-strong); border: 1px solid var(--rule); border-radius: var(--radius-md);
  font: inherit; font-size: 17px; -webkit-user-select: text; user-select: text;
}
.mob-input::placeholder { color: var(--text-muted); }
.mob-area { resize: vertical; min-height: 80px; }
.mob-own { display: flex; gap: 8px; margin-top: 8px; }
.mob-own .mob-input { flex: 1; min-width: 0; }
.mob-own .mob-btn { flex: none; min-width: 80px; }

/* ---- rows: tickets and mail ------------------------------------------------------------------- */
.mob-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.mob-chip { min-height: 44px; padding: 0 18px; border: 1px solid var(--rule); border-radius: 22px; color: var(--text); }
.mob-boxes { flex-wrap: nowrap; gap: 6px; }
.mob-boxes .mob-chip { flex: 1 1 0; min-width: 0; padding: 0 2px; text-align: center; font-size: 15px; white-space: nowrap; }
.mob-chip.on { background: var(--accent); border-color: var(--accent); color: var(--accent-tx); }
.mob-row {
  display: flex; flex-direction: column; gap: 2px; width: 100%; min-height: 64px; padding: 10px 14px; text-align: left;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-md);
}
.mob-row:active { background: var(--hover); }
.mob-row-top { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--text-dim); min-width: 0; }
.mob-row-id { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-row-when { flex: none; }
.mob-row-title { color: var(--text-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mob-row.unread .mob-row-id, .mob-row.unread .mob-row-title { font-weight: 700; }
.mob-row.unread { border-left: 4px solid var(--accent-hi); }
.mob-row.status-done .mob-row-title { color: var(--text-dim); }
.mob-pill { flex: none; padding: 0 8px; border-radius: 10px; background: var(--surface2); font-size: 13px; line-height: 20px; color: var(--text); }
.mob-pill.prio-p0 { background: var(--danger); color: var(--accent-tx); }
.mob-pill.prio-p1 { background: var(--attn); color: var(--bg); }
.mob-pill.st-doing { background: var(--statusbg); color: var(--accent-tx); }
.mob-pill.st-done { color: var(--text-dim); }

/* ---- text that is read: output, a ticket, a mail --------------------------------------------- */
.mob-out, .mob-body {
  margin: 4px 0 8px; padding: 12px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-md);
  font: 15px/1.5 var(--font-code); color: var(--text); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word;
}
.mob-body { font: 17px/1.5 var(--font-ui); }
.mob-conv { margin: 16px 0 4px; }
.mob-conv .mob-row { margin-bottom: 6px; }
.mob-out { max-height: 40vh; overflow-y: auto; }

/* ---- the bar at the bottom --------------------------------------------------------------------- */
.mob-tabs {
  flex: none; display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--chrome); border-top: 1px solid var(--rule);
}
.mob-tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px; padding: 6px 2px; color: var(--text-dim); font-size: 14px; font-weight: 600;
}
.mob-tab.on { color: var(--accent-hi); }
.mob-tab-ico { display: flex; }
.mob-tab-n {
  position: absolute; top: 4px; left: calc(50% + 8px); min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px; background: var(--attn); color: var(--bg); font-size: 12px; line-height: 20px; text-align: center;
}

/* ---- the additions of #0000-1409/#0000-1410/#0000-1411 -------------------------------------------------- */
.mob-build-line { margin: 4px 0 8px; font-size: 15px; color: var(--text); }
.mob-build-line.bad { color: var(--danger-tx); font-weight: 600; }
.mob-say { margin: 10px 0 4px; }
.mob-write {
  flex: none; min-height: 44px; padding: 0 18px; border-radius: var(--radius-md);
  background: var(--accent); color: var(--accent-tx); font-weight: 600;
}
.mob-select { appearance: auto; -webkit-appearance: menulist; text-overflow: ellipsis; }
.mob-quick { margin: 6px 0 10px; }
.mob-quick .mob-own .mob-select { flex: 1; min-width: 0; }
.mob-labelpick { margin: 0 0 10px; }
.mob-compose .mob-label { margin-top: 10px; }
.mob-compose .mob-label:first-child { margin-top: 0; }
.mob-row-labels { font-size: 14px; color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-row.held { border-left: 4px solid var(--attn); }
.mob-pill.held { background: var(--attn); color: var(--bg); }

/* #0000-1435: the lock in the top bar, and a dialog card that fits a phone */
#mob .mob-lock { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0; }
body.mob .dlgcard { min-width: 0; width: calc(100vw - 32px); max-width: 480px; box-sizing: border-box; }

/* #0000-1477: "Chosen by Jev (82%)" on an agent's card, with Change */
.mob-jev { margin: 2px 0 6px; font-size: 13px; opacity: .85; }
.mob-jev-change { min-height: 44px; padding: 0 8px; }
/* #0000-1586: a mail that waits for you, with Approve / Discard under it */
.mob-wait { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.mob-wait-acts { display: flex; gap: 8px; }

/* the ticket editor on a phone (#0000-2935): status, priority, who has it, a wait, a comment */
.mob-edit { margin: 4px 0 8px; }
.mob-tk-cbox { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.mob-tk-ctext { width: 100%; box-sizing: border-box; resize: vertical; min-height: 4.5em; font: inherit; }
.mob-tk-wait { flex: 1; align-self: center; color: var(--text-dim); }