/* TattooStax workspace shell and Home. App layout lives in app-shell.css. */
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { font-family: var(--os-font, "DM Sans", system-ui, sans-serif); background: var(--stax-ink); color: var(--stax-text); }
button, input, select, textarea { font: inherit; }
.tx-hidden, [hidden] { display: none !important; }

#tx-shell { display: flex; width: 100%; height: 100%; height: 100dvh; max-height: 100dvh; min-width: 0; min-height: 0; overflow: hidden; background: var(--stax-ink); }
#tx-workspace-main { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; }
#tx-workspace-main:has(> #tx-work-context), #tx-workspace-main:has(> #staxos-update-ready) { display: flex; flex-direction: column; }
#tx-workspace-main:has(> #tx-work-context) > :is(#tx-home, #tx-app-view) { flex: 1; min-height: 0; height: auto; }
#tx-work-context { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; padding: 4px 12px; flex: 0 0 auto; background: var(--stax-surface); color: var(--stax-text); border-bottom: 1px solid var(--stax-gold); font-size: 13px; overflow-wrap: anywhere; }
#tx-work-context button { min-height: 44px; border: 0; color: var(--stax-gold-text); background: transparent; text-decoration: underline; cursor: pointer; }
#tx-work-context button:focus-visible { outline: 2px solid var(--stax-gold); }
#tx-home { position: relative; width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; }
#tx-app-view { display: flex; width: 100%; height: 100%; flex-direction: column; overflow: hidden; }
#tx-app-bar { display: flex; flex: 0 0 var(--app-header-row); align-items: center; gap: var(--stax-space-3); min-height: var(--app-header-row); padding: var(--stax-space-1) var(--stax-space-4); border-bottom: 1px solid var(--stax-border); background: var(--stax-surface); }
#tx-back-btn { flex: 0 0 auto; min-width: var(--app-target); min-height: var(--app-target); padding: 0 var(--stax-space-3); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-gold-text); font-weight: 750; white-space: nowrap; cursor: pointer; }
#tx-app-title { min-width: 0; flex: 1; overflow: hidden; color: var(--stax-text); font-size: var(--stax-fs-lg); font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
#tx-panel-btn { display: inline-grid; width: var(--app-target); height: var(--app-target); flex: 0 0 var(--app-target); place-items: center; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); cursor: pointer; }
#tx-panel-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
#tx-app-content { display: flex; flex: 1 1 auto; width: 100%; min-width: 0; min-height: 0; overflow: hidden; padding: 0; }
#tx-app-content > * { width: 100%; min-width: 0; min-height: 0; }

/* Unknown-number conversations include reply controls and the composer in one pane. */
.msg-unlinked-view { height: 100%; min-height: 0; overflow: hidden; }
.msg-unlinked-view .msg-thread-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-block: 8px; }
.msg-unlinked-view .msg-composer { flex: 0 0 auto; }
.msg-public-composer { display: grid; gap: 6px; padding: 8px 12px max(10px, var(--app-safe-bottom, 0px)); border-top: 1px solid var(--stax-border); }
.msg-public-composer .stax-conversation-note { margin: 0; }
.msg-thread-alert { flex: 0 0 auto; margin: 0; padding: 6px 12px; }

.tx-home-header { position: sticky; inset-block-start: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--stax-space-3); min-height: 72px; padding: var(--stax-space-3) var(--stax-space-6); border-bottom: 1px solid var(--stax-border); background: color-mix(in srgb, var(--stax-ink) 92%, transparent); backdrop-filter: blur(16px); }
.tx-home-brand { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.tx-home-title { color: var(--stax-text); font-size: 1.35rem; font-weight: 800; letter-spacing: -0.025em; }
.tx-home-profile { min-height: var(--app-target); padding: 0; border: 0; background: transparent; text-align: start; cursor: pointer; }
.tx-home-profile:focus-visible { outline: 2px solid var(--stax-gold); outline-offset: 3px; border-radius: var(--stax-radius); }
.tx-home-sub { overflow: hidden; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.tx-home-actions { display: flex; align-items: center; gap: var(--stax-space-2); }
.tx-home-needs-you { display: inline-flex; align-items: center; gap: 6px; min-height: var(--app-target); padding: 0 12px 0 8px; border: 1px solid var(--stax-gold); border-radius: 999px; background: var(--stax-gold-soft); color: var(--stax-text); font: inherit; font-size: var(--stax-fs-xs); font-weight: 700; cursor: pointer; }
.tx-home-needs-you:hover, .tx-home-needs-you:focus-visible { background: var(--stax-gold); color: var(--stax-on-gold, var(--stax-ink)); }
.tx-home-needs-you:focus-visible { outline: 2px solid var(--stax-gold); outline-offset: 2px; }
.tx-home-needs-you-count { display: grid; min-width: 22px; height: 22px; place-items: center; padding-inline: 6px; border-radius: 999px; background: var(--stax-gold); color: var(--stax-on-gold, var(--stax-ink)); font-size: var(--stax-fs-xs); font-weight: 800; }
.tx-home-needs-you:hover .tx-home-needs-you-count, .tx-home-needs-you:focus-visible .tx-home-needs-you-count { background: var(--stax-on-gold, var(--stax-ink)); color: var(--stax-gold-text); }
.tx-home-needs-you--failed { border-color: var(--stax-danger); background: var(--stax-surface); }
.tx-home-needs-you--failed .tx-home-needs-you-count { background: var(--stax-danger); color: var(--stax-surface); }
.tx-home-work-head-actions { display: inline-flex; gap: 8px; }
.tx-icon-btn, .tx-box-status-refresh { display: inline-grid; width: var(--app-target); height: var(--app-target); place-items: center; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface); color: var(--stax-gold-text); cursor: pointer; }
.tx-home-overflow { position: relative; }
.tx-home-overflow > summary { display: grid; width: var(--app-target); height: var(--app-target); place-items: center; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface); color: var(--stax-gold-text); cursor: pointer; list-style: none; }
.tx-home-overflow > summary::-webkit-details-marker { display: none; }
.tx-home-overflow > summary:hover, .tx-home-overflow > summary:focus-visible, .tx-home-overflow[open] > summary { border-color: var(--stax-gold-border); background: var(--stax-surface-2); }
.tx-home-overflow-menu { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; z-index: 12; display: grid; width: min(270px, calc(100vw - 24px)); gap: 3px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); padding: 6px; background: var(--stax-surface); box-shadow: var(--stax-shadow-float); }
.tx-home-overflow:not([open]) .tx-home-overflow-menu { display: none; }
.tx-home-overflow-menu button { display: grid; min-height: var(--app-target); grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; border: 0; border-radius: var(--stax-radius); padding: 0 10px; background: transparent; color: var(--stax-text); text-align: start; cursor: pointer; }
.tx-home-overflow-menu button:hover, .tx-home-overflow-menu button:focus-visible { background: var(--stax-surface-2); color: var(--stax-gold-text); }
.tx-home-mode-pane { width: min(100%, 560px); margin-inline: auto; padding: 12px 16px 24px; }
.tx-home-mode-pane h1 { margin: 0 0 16px; color: var(--stax-text); font-size: 1.5rem; }
.tx-home-mode-pane[hidden], .tx-stax-start[hidden], .tx-stax-identity h1[hidden] { display: none; }
.tx-stax-mode-active #tx-workspace-chat { display: none !important; }
.tx-home-reply-mode { display: grid; gap: 12px; }
.tx-home-reply-mode-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--stax-fs-xs); color: var(--stax-text-dim); }
.tx-home-reply-mode-head strong { color: var(--stax-text); }
.tx-home-reply-mode-options { display: grid; gap: 10px; }
.tx-home-reply-mode-options button { display: grid; gap: 5px; width: 100%; min-height: 76px; padding: 14px 16px; border: 1px solid var(--stax-border); border-radius: 12px; background: var(--stax-panel); color: var(--stax-text); text-align: left; font: inherit; cursor: pointer; }
.tx-home-reply-mode-options button strong { font-size: var(--stax-fs-sm); }
.tx-home-reply-mode-options button span { color: var(--stax-text-dim); font-size: var(--stax-fs-xs); line-height: 1.4; }
.tx-home-reply-mode-options button[aria-checked="true"] { border-color: var(--stax-gold-border); background: var(--stax-gold-soft); }
.tx-home-reply-mode-options button:disabled { cursor: default; opacity: .65; }
.tx-home-reply-mode p { margin: 0; color: var(--stax-text-faint,var(--stax-muted)); font-size: var(--stax-fs-xs); line-height: 1.35; }

.tx-install-hint { display: flex; align-items: center; justify-content: center; gap: var(--stax-space-3); padding: 8px 12px; border-bottom: 1px solid var(--stax-border); background: var(--stax-gold-soft); color: var(--stax-text); font-size: var(--stax-fs-sm); }
.tx-install-hint[hidden], .tx-install-panel[hidden] { display: none; }
.tx-install-hint button { min-height: 44px; flex: 0 0 auto; }
.tx-install-panel { position: fixed; inset: 76px 12px auto auto; z-index: var(--z-app-toast); display: grid; width: min(390px, calc(100vw - 24px)); min-height: 0; max-block-size: calc(100dvh - 88px); overflow-y: auto; overscroll-behavior: contain; gap: 10px; padding: var(--stax-space-4); border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); background: var(--stax-surface); box-shadow: var(--stax-shadow-float); }
.tx-install-panel h2, .tx-install-panel p { margin: 0; }
.tx-install-panel h2 { font-size: var(--stax-fs-title); }
.tx-install-actions { display: grid; gap: 8px; }
.tx-install-actions button { min-height: 44px; }
.tx-install-note { color: var(--stax-text-dim); font-size: var(--stax-fs-xs); line-height: 1.45; }
@media (max-width: 640px) { .tx-install-hint { justify-content: space-between; } .tx-install-panel { inset: auto 8px calc(var(--tx-bottom-reserve, 0px) + 8px); width: auto; max-block-size: calc(100dvh - var(--tx-bottom-reserve, 0px) - 16px); } }

#tx-home .tx-blocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--stax-space-3); width: min(1050px, calc(100% - 48px)); margin: 0 auto; padding: var(--stax-space-5) 0 var(--stax-space-8); }
.tx-block-wrap { position: relative; min-width: 0; }
.tx-block { display: flex; width: 100%; min-height: 156px; flex-direction: column; gap: var(--stax-space-2); padding: var(--stax-space-4); border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); background: linear-gradient(155deg, var(--stax-surface) 0%, var(--stax-ink) 100%); color: inherit; text-align: start; cursor: pointer; transition: border-color 150ms ease, transform 120ms ease, box-shadow 150ms ease; }
.tx-block:hover, .tx-block:focus-visible { border-color: var(--stax-gold); box-shadow: var(--stax-shadow-float); }
.tx-block:active { transform: scale(0.985); }
.tx-block-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--stax-space-2); }
.tx-block-icon { display: grid; width: var(--app-target); height: var(--app-target); flex: 0 0 var(--app-target); place-items: center; border-radius: var(--stax-radius-lg); background: var(--stax-gold-soft); }
.tx-block-icon svg { width: 24px; height: 24px; }
.tx-block-name { color: var(--stax-text); font-size: var(--stax-fs-title); font-weight: 800; }
.tx-block-status { flex: 1; color: var(--stax-text-dim); font-size: var(--stax-fs-base); line-height: 1.45; }
.tx-block-action { display: inline-flex; align-items: center; gap: var(--stax-space-2); margin-top: auto; color: var(--stax-gold-text); font-size: var(--stax-fs-base); font-weight: 750; }
.tx-block-action svg { width: 16px; height: 16px; }
.tx-block-badge { min-width: 22px; padding: 3px var(--stax-space-2); border-radius: var(--stax-radius-pill); background: var(--stax-danger); color: white; font-size: var(--stax-fs-xs); font-weight: 800; text-align: center; }
.tx-block-gear { position: absolute; inset-block-start: var(--stax-space-3); inset-inline-end: var(--stax-space-3); z-index: 2; display: grid; width: var(--app-target); height: var(--app-target); place-items: center; border: 1px solid transparent; border-radius: var(--stax-radius); background: transparent; color: var(--stax-text-dim); cursor: pointer; }
.tx-block-gear:hover, .tx-block-gear:focus-visible { border-color: var(--stax-gold-border); background: var(--stax-surface-2); color: var(--stax-gold-text); }
.tx-block-gear svg { width: 18px; height: 18px; }

.tx-status-pill { display: inline-flex; min-height: var(--app-target); align-items: center; gap: var(--stax-space-2); padding: 0 var(--stax-space-3); border: 1px solid var(--stax-border); border-radius: var(--stax-radius-pill); background: var(--stax-surface); color: var(--stax-text); cursor: pointer; }
.tx-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--stax-text-faint); }
.tx-dot-ok { background: var(--stax-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--stax-ok) 16%, transparent); }
.tx-dot-warn { background: var(--stax-gold); }
.tx-status-panel { position: fixed; inset-block-start: 68px; inset-inline-end: var(--stax-space-4); z-index: var(--z-app-toast); width: min(390px, calc(100vw - 32px)); max-height: calc(100vh - 84px); overflow: auto; padding: var(--stax-space-4); border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); background: var(--stax-surface); box-shadow: var(--stax-shadow-float); }
.tx-status-panel-head, .tx-status-companion-row, .tx-status-footer { display: flex; align-items: center; justify-content: space-between; gap: var(--stax-space-3); }
.tx-box-status-title, .tx-status-companion-title { color: var(--stax-text); font-weight: 800; }
.tx-box-status-sub, .tx-status-help-meta { color: var(--stax-text-dim); font-size: var(--stax-fs-sm); line-height: 1.5; }
.tx-status-rows { display: grid; gap: var(--stax-space-1); margin-block: var(--stax-space-3); }
.tx-status-row { display: grid; grid-template-columns: 12px 1fr auto; align-items: center; gap: var(--stax-space-2); min-height: var(--app-target); padding: var(--stax-space-2); border-radius: var(--stax-radius); background: var(--stax-surface-2); font-size: var(--stax-fs-sm); }
.tx-status-row strong { color: var(--stax-text); font-weight: 700; }
.tx-status-sms-detail { grid-template-columns: 1fr; color: var(--stax-text-dim); }
.tx-status-companion { margin-block: var(--stax-space-3); padding: var(--stax-space-3); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); }
.tx-status-btn, .tx-status-link { min-height: var(--app-target); padding: 0 var(--stax-space-3); border: 1px solid var(--stax-gold-border); border-radius: var(--stax-radius); background: var(--stax-gold); color: var(--stax-on-gold); font-size: var(--stax-fs-sm); font-weight: 750; cursor: pointer; }
.tx-status-link, .tx-status-btn-ghost { background: transparent; color: var(--stax-gold-text); }
.tx-status-help { margin-top: var(--stax-space-3); color: var(--stax-text-dim); font-size: var(--stax-fs-sm); line-height: 1.5; }
.tx-status-help-title { margin-top: var(--stax-space-3); color: var(--stax-text); font-weight: 800; }
.tx-box-url { margin-top: var(--stax-space-3); overflow-wrap: anywhere; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.toast-container { position: fixed; inset-block-start: 80px; inset-inline-end: var(--stax-space-4); z-index: var(--z-app-toast); width: min(420px, calc(100vw - 32px)); pointer-events: none; }
.toast-container .toast { width: 100%; min-width: 0; box-sizing: border-box; overflow-wrap: anywhere; line-height: 1.4; pointer-events: auto; }
#tx-app-title:focus { outline: 0; }
@media (max-width: 40rem) {
  .toast-container { inset-block-start: 72px; inset-inline: 12px; width: auto; }
}

/* WorkspacePanel: apps and the active app's destinations share one surface. */
#tx-suite-rail { position: relative; z-index: calc(var(--z-app-rail) + 2); display: flex; width: 72px; flex: 0 0 72px; min-height: 0; flex-direction: column; align-items: stretch; gap: var(--stax-space-2); overflow: hidden auto; padding: var(--stax-space-3) 8px; border-inline-end: 1px solid var(--stax-border); background: color-mix(in srgb, var(--stax-surface) 96%, var(--stax-ink)); scrollbar-width: none; transition: width 180ms ease, flex-basis 180ms ease, transform 180ms ease; }
#tx-shell[data-workspace-panel-expanded="true"] #tx-suite-rail { width: 248px; flex-basis: 248px; }
#tx-suite-rail::-webkit-scrollbar { display: none; }
.tx-workspace-panel-head { position: relative; display: flex; min-width: 0; align-items: center; gap: var(--stax-space-2); }
.tx-suite-brand { display: grid; width: var(--app-target); height: var(--app-target); flex: 0 0 var(--app-target); place-items: center; border: 1px solid var(--stax-gold-border); border-radius: var(--stax-radius-lg); background: var(--stax-gold-soft); color: var(--stax-gold-text); font-size: var(--stax-fs-sm); font-weight: 900; letter-spacing: -.03em; }
.tx-workspace-panel-name { display: none; min-width: 0; flex: 1; overflow: hidden; color: var(--stax-text); text-overflow: ellipsis; white-space: nowrap; }
.tx-workspace-panel-toggle { display: grid; width: 32px; height: 32px; flex: 0 0 32px; place-items: center; border: 0; border-radius: var(--stax-radius); background: transparent; color: var(--stax-text-dim); cursor: pointer; }
#tx-shell:not([data-workspace-panel-expanded="true"]) .tx-workspace-panel-toggle { position: absolute; inset-block-start: 24px; inset-inline-start: 26px; width: 24px; height: 24px; border: 1px solid var(--stax-border); background: var(--stax-surface); }
#tx-shell[data-workspace-panel-expanded="true"] .tx-workspace-panel-name { display: block; }
.tx-suite-apps { display: flex; flex-direction: column; gap: 2px; }
.tx-suite-app { position: relative; display: flex; min-width: var(--app-target); min-height: var(--app-target); align-items: center; justify-content: center; border: 0; background: transparent; color: var(--stax-text-dim); cursor: pointer; }
.tx-suite-app { min-height: 50px; flex-direction: column; gap: 2px; padding: 4px 2px; border-radius: var(--stax-radius); }
.tx-suite-app:hover, .tx-suite-app:focus-visible { background: var(--stax-surface-2); color: var(--stax-text); }
.tx-suite-app.active { background: var(--stax-gold-soft); color: var(--stax-gold-text); }
.tx-suite-icon { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; }
.tx-suite-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tx-suite-label { max-width: 100%; overflow: hidden; font-size: 10px; font-weight: 750; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.tx-suite-badge { position: absolute; inset-block-start: 2px; inset-inline-end: 4px; min-width: 17px; height: 17px; padding-inline: 4px; border-radius: var(--stax-radius-pill); background: var(--stax-danger); color: white; font-size: 9px; font-weight: 850; line-height: 17px; text-align: center; }
#tx-mobile-nav, #tx-workspace-panel-handle, #tx-workspace-panel-backdrop { display: none; }
/* Sections are the active app's views, not peer apps. They share the rail with
   the app list, and several apps ship a section whose label repeats an app name
   ("Forms", "Settings"). Without a visible hierarchy the two groups read as one
   flat list containing duplicates. The group is therefore inset behind a
   collapsible caption, uses smaller icons, and marks its active item with an
   edge bar so exactly one filled gold pill — the active app — sits in the rail. */
.tx-workspace-sections { display: flex; flex-direction: column; gap: 2px; margin-block-start: var(--stax-space-2); padding-block-start: var(--stax-space-2); border-block-start: 1px solid var(--stax-border); }
.tx-workspace-section-title { display: flex; width: 100%; min-height: 24px; align-items: center; justify-content: center; gap: 4px; padding: 2px; border: 0; border-radius: var(--stax-radius); background: transparent; color: var(--stax-text-faint); font: inherit; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.tx-workspace-section-title:hover, .tx-workspace-section-title:focus-visible { background: var(--stax-surface-2); color: var(--stax-text-dim); }
.tx-workspace-section-title-text { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-workspace-section-caret { display: block; width: 7px; height: 7px; flex: 0 0 7px; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 140ms ease; }
#tx-shell[data-workspace-sections="collapsed"] .tx-workspace-section-caret { transform: rotate(-45deg); }
#tx-shell[data-workspace-sections="collapsed"] .tx-workspace-section-items { display: none; }
.tx-workspace-section-items { display: flex; flex-direction: column; gap: 2px; margin-inline-start: 9px; padding-inline-start: 3px; border-inline-start: 2px solid var(--stax-border); }
.tx-workspace-section { position: relative; display: flex; min-width: 0; min-height: 42px; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 2px; border: 0; border-radius: var(--stax-radius); background: transparent; color: var(--stax-text-faint); cursor: pointer; }
.tx-workspace-section .tx-suite-icon svg { width: 18px; height: 18px; }
.tx-workspace-section .tx-suite-label { font-size: 9px; font-weight: 650; }
.tx-workspace-section:hover, .tx-workspace-section:focus-visible { background: var(--stax-surface-2); color: var(--stax-text); }
.tx-workspace-section.active { background: transparent; color: var(--stax-gold-text); }
.tx-workspace-section.active::before { content: ''; position: absolute; inset-block: 5px; inset-inline-start: -5px; width: 2px; border-radius: 2px; background: var(--stax-gold); }
.tx-workspace-panel-footer { margin-block-start: auto; padding-block-start: var(--stax-space-2); border-block-start: 1px solid var(--stax-border); }
.tx-workspace-signout { display: flex; width: 100%; min-height: var(--app-target); align-items: center; justify-content: center; gap: var(--stax-space-2); padding: var(--stax-space-2); border: 0; border-radius: var(--stax-radius); background: transparent; color: var(--stax-text-dim); cursor: pointer; }
.tx-workspace-signout:hover, .tx-workspace-signout:focus-visible { background: var(--stax-surface-2); color: var(--stax-text); }
.tx-workspace-signout svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tx-workspace-signout span { display: none; }
.tx-workspace-signout:disabled { opacity: .5; cursor: wait; }
#tx-shell[data-workspace-panel-expanded="true"] :is(.tx-suite-app, .tx-workspace-section) { min-height: var(--app-target); flex-direction: row; justify-content: flex-start; gap: var(--stax-space-3); padding-inline: var(--stax-space-3); }
#tx-shell[data-workspace-panel-expanded="true"] :is(.tx-suite-app, .tx-workspace-section) .tx-suite-label { font-size: var(--stax-fs-sm); }
#tx-shell[data-workspace-panel-expanded="true"] .tx-workspace-section-title { justify-content: flex-start; padding-inline: var(--stax-space-3); }
#tx-shell[data-workspace-panel-expanded="true"] .tx-workspace-section-title-text { display: block; }
#tx-shell[data-workspace-panel-expanded="true"] .tx-workspace-signout { justify-content: flex-start; padding-inline: var(--stax-space-3); }
#tx-shell[data-workspace-panel-expanded="true"] .tx-workspace-signout span { display: inline; }

/* Search/More is transient and dismissible; it is not a side card. */
body.tx-suite-sheet-open { overflow: hidden; }
#tx-suite-sheet { position: fixed; top: var(--tx-sheet-top, 0px); left: var(--tx-sheet-left, 0px); width: var(--tx-sheet-width, 100%); height: var(--tx-sheet-height, 100dvh); z-index: calc(var(--z-app-toast) - 1); background: color-mix(in srgb, #000 58%, transparent); }
#tx-suite-sheet-panel { position: absolute; inset: auto 0 0; max-height: min(74dvh, 620px, 100%); overflow: auto; overscroll-behavior: contain; scroll-padding-block: var(--stax-space-4); padding: var(--stax-space-4) var(--stax-space-4) calc(var(--stax-space-5) + var(--app-safe-bottom)); border: 1px solid var(--stax-border); border-radius: 20px 20px 0 0; background: var(--stax-surface); box-shadow: var(--stax-shadow-float); }
.tx-suite-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--stax-space-3); margin-block-end: var(--stax-space-3); }
.tx-suite-sheet-head > div { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.tx-suite-sheet-head strong { color: var(--stax-text); font-size: var(--stax-fs-lg); }
.tx-suite-sheet-head span, .tx-suite-empty { color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.tx-suite-sheet-head button { width: var(--app-target); height: var(--app-target); border: 0; border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); font-size: 24px; cursor: pointer; }
.tx-app-search { display: flex; min-height: var(--app-target); align-items: center; gap: var(--stax-space-2); margin-block-end: var(--stax-space-3); padding-inline: var(--stax-space-3); border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); background: var(--stax-ink); color: var(--stax-text-dim); }
.tx-app-search:focus-within { border-color: var(--stax-gold); }
.tx-app-search input { width: 100%; min-width: 0; height: var(--app-target); border: 0; outline: 0; background: transparent; color: var(--stax-text); }
.tx-suite-sheet-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stax-space-2); }
.tx-suite-sheet-app { display: flex; min-width: 0; min-height: 68px; align-items: center; gap: var(--stax-space-3); padding: var(--stax-space-3); border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); background: var(--stax-surface-2); color: var(--stax-text); text-align: start; cursor: pointer; }
.tx-suite-sheet-app:focus-visible, .tx-suite-sheet-app:hover { border-color: var(--stax-gold); }
.tx-suite-sheet-app > span:last-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.tx-suite-sheet-app strong { font-size: var(--stax-fs-base); }
.tx-suite-sheet-app small { overflow: hidden; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.tx-suite-empty { grid-column: 1 / -1; padding: var(--stax-space-5); text-align: center; }
.tx-workspace-legacy #tx-suite-rail, .tx-workspace-legacy #tx-mobile-nav { display: none !important; }

@media (min-width: 52.5rem) and (max-width: 63.999rem) {
  #tx-suite-rail { position: fixed; inset: 0 auto 0 0; width: 280px !important; max-width: calc(100vw - 40px); flex-basis: auto; padding: var(--stax-space-3); visibility: hidden; transform: translateX(-102%); box-shadow: var(--stax-shadow-float); }
  .workspace-panel-open #tx-suite-rail { visibility: visible; transform: translateX(0); }
  #tx-suite-rail :is(.tx-suite-app, .tx-workspace-section) { min-height: var(--app-target); flex-direction: row; justify-content: flex-start; gap: var(--stax-space-3); padding-inline: var(--stax-space-3); }
  #tx-suite-rail :is(.tx-suite-app, .tx-workspace-section) .tx-suite-label { font-size: var(--stax-fs-sm); }
  #tx-suite-rail .tx-workspace-panel-name { display: block; }
  #tx-suite-rail .tx-workspace-section-title { justify-content: flex-start; padding-inline: var(--stax-space-3); }
  #tx-suite-rail .tx-workspace-section-title-text { display: block; }
  #tx-suite-rail .tx-workspace-panel-toggle { display: none; }
  #tx-suite-rail .tx-workspace-signout { justify-content: flex-start; padding-inline: var(--stax-space-3); }
  #tx-suite-rail .tx-workspace-signout span { display: inline; }
  #tx-workspace-panel-handle { position: fixed; inset-block-start: 50%; inset-inline-start: 0; z-index: calc(var(--z-app-rail) + 1); display: grid; width: 24px; height: 64px; place-items: center; border: 1px solid var(--stax-border); border-inline-start: 0; border-radius: 0 12px 12px 0; background: var(--stax-surface-2); color: var(--stax-gold-text); cursor: pointer; transform: translateY(-50%); }
  .workspace-panel-open #tx-workspace-panel-handle { display: none; }
  #tx-workspace-panel-backdrop:not([hidden]) { position: fixed; inset: 0; z-index: calc(var(--z-app-rail) + 1); display: block; width: 100%; height: 100%; border: 0; background: var(--stax-overlay); }
}

@media (max-width: 52.499rem) {
  #tx-suite-rail, #tx-workspace-panel-handle { display: none; }
  #tx-suite-sheet-panel { max-height: min(78dvh, 660px, 100%); }
}

@media (max-width: 47.999rem) {
  .tx-home-header { min-height: 64px; padding: var(--stax-space-2) var(--stax-space-4); }
  .tx-home-sub { max-width: 52vw; }
  #tx-home .tx-blocks { grid-template-columns: 1fr; width: calc(100% - 32px); padding-block: var(--stax-space-4) var(--stax-space-5); }
  .tx-block { min-height: 132px; padding: var(--stax-space-4); }
  .tx-suite-sheet-list { grid-template-columns: 1fr; }
  #tx-app-bar { padding-inline: var(--stax-space-2); }
  #tx-back-btn { padding-inline: var(--stax-space-2); }
}

@media (min-width: 52.5rem) and (max-width: 79.999rem) {
  #tx-home .tx-blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 2026-09 preservation shell: one full navigation card, never a narrow strip.
   The rail is inline from 64rem (--bp-app-rail) and a drawer below it; the
   router's viewport test uses the same 1024px line. */
:root {
  --stax-agent: #167c78;
}
#tx-workspace-main { position: relative; display: flex; flex-direction: column; }
#tx-home, #tx-app-view { height: auto; flex: 1 1 auto; min-height: 0; box-sizing: border-box; }
body.tx-conversation-active #tx-home, body.tx-conversation-active #tx-app-view { padding-block-end: calc(var(--tx-chat-height, 56px) + 16px + var(--tx-bottom-reserve) + var(--tx-keyboard-inset, 0px)); }
body:not(.tx-conversation-active) #tx-workspace-chat { display: none; }

.tx-workspace-stax { display: grid; gap: 3px; padding-block-end: var(--stax-space-3); border-block-end: 1px solid var(--stax-border); }
.tx-workspace-primary-head { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: var(--stax-space-2); padding-inline: 10px 4px; }
.tx-workspace-primary-head h2 { margin: 0; color: var(--stax-text); font-size: 1.05rem; letter-spacing: 0; }
.tx-stax-home { min-height: 40px; border: 0; border-radius: var(--stax-radius); padding: 0 4px; background: transparent; color: inherit; font: inherit; font-weight: 800; cursor: pointer; }
.tx-stax-home:hover, .tx-stax-home:focus-visible { color: var(--stax-agent); outline: 2px solid color-mix(in srgb, var(--stax-agent) 35%, transparent); outline-offset: 2px; }
.tx-workspace-primary-head .tx-stax-new { display: grid; width: 40px; height: 40px; min-height: 40px; place-items: center; padding: 0; color: var(--stax-agent); }
.tx-workspace-primary-head svg, .tx-workspace-stax > button > svg, .tx-stax-chat-group > button > svg { width: 19px; height: 19px; flex: 0 0 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tx-workspace-stax > button, .tx-stax-recent button { position: relative; display: flex; width: 100%; min-height: 40px; align-items: center; gap: 10px; border: 0; border-radius: var(--stax-radius); padding: 7px 10px; background: transparent; color: var(--stax-text-dim); font: inherit; text-align: start; cursor: pointer; }
.tx-workspace-stax > button:hover, .tx-workspace-stax > button:focus-visible, .tx-stax-recent button:hover, .tx-stax-recent button:focus-visible { background: var(--stax-gold-soft); color: var(--stax-text); outline: 0; }
.tx-workspace-stax .tx-stax-new { color: var(--stax-gold-text); font-weight: 750; }
.tx-stax-chat-group { display: grid; gap: 2px; padding-inline-start: 14px; }
.tx-stax-chat-group[hidden] { display: none; }
.tx-stax-chat-group > .tx-stax-new { min-height: 44px; color: var(--stax-text); background: rgba(200,164,74,.14); border-inline-start: 3px solid var(--stax-gold); font-weight: 700; }
.tx-stax-chat-group > button { display: flex; width: 100%; min-height: 36px; align-items: center; gap: 9px; border: 0; border-radius: var(--stax-radius); padding: 6px 10px; background: transparent; color: var(--stax-text-dim); font: inherit; font-size: var(--stax-fs-xs); text-align: start; cursor: pointer; }
.tx-stax-recent { display: grid; padding-inline-start: 14px; }
.tx-workspace-disclosure { width: 8px; height: 8px; margin-inline-start: auto; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(45deg); }
[data-stax-action="chats"][aria-expanded="true"] .tx-workspace-disclosure { transform: rotate(225deg); }
.tx-stax-recent button { min-height: 34px; font-size: var(--stax-fs-xs); }
.tx-stax-recent span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-chat-library { display: grid; gap: var(--stax-space-2); }
.tx-chat-library-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; gap: var(--stax-space-2); }
.tx-chat-library-item > button { min-height: var(--app-target); border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); padding: 8px 12px; background: var(--stax-surface-2); color: var(--stax-text); font: inherit; cursor: pointer; }
.tx-chat-library-item > button:hover, .tx-chat-library-item > button:focus-visible { border-color: var(--stax-gold); outline: 0; }
.tx-chat-library-open { display: flex; min-width: 0; flex-direction: column; justify-content: center; text-align: start; }
.tx-chat-library-open strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-chat-library-open span { color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }

.tx-stax-start { width: min(880px, calc(100% - 40px)); min-height: calc(100dvh - 72px); margin-inline: auto; padding: clamp(64px, 12vh, 120px) 0 var(--stax-space-8); }
.tx-stax-identity { display: grid; flex: 0 0 auto; justify-items: center; text-align: center; padding: 16px 0 8px; }
.tx-stax-mark { display: grid; width: 128px; height: 128px; place-items: center; padding: 0; border: 0; border-radius: var(--stax-radius-lg); background: transparent; cursor: pointer; }
.tx-stax-mark:focus-visible { outline: 2px solid var(--stax-gold); outline-offset: 4px; }
.tx-stax-reply-mode { margin-top: 4px; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-stax-mark img { display: block; width: 100%; height: auto; }
.tx-stax-identity h1 { margin: var(--stax-space-4) 0 var(--stax-space-2); color: var(--stax-text); font-size: 2rem; font-weight: 650; letter-spacing: 0; }
.tx-stax-identity p { margin: 0; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.tx-stax-start:has(.tx-home-work) { padding-block-start: clamp(20px, 4vh, 40px); padding-block-end: calc(var(--tx-chat-height, 120px) + 32px); }
.tx-stax-start:has(.tx-home-work[hidden]) { display: none; }
.tx-home-work { margin-block-start: 28px; padding: 16px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); background: var(--stax-surface); scroll-margin-block-start: 80px; }
.tx-home-work-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.tx-home-work-head h2 { margin: 0; color: var(--stax-text); font-size: var(--stax-fs-lg); }
.tx-home-work-status, .tx-home-work-updated { margin: 8px 0; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); line-height: 1.5; }
.tx-home-work-status[role="alert"] { color: var(--stax-danger); }
.tx-home-work-updated { font-size: var(--stax-fs-xs); }
.tx-home-work-items { display: grid; gap: 8px; }
/* Home's waiting work uses the shared Work rows (.work-row). The draft-job
   cards beside the composer (#tx-artifact-jobs) keep this card. */
.tx-home-work-row { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; width: 100%; min-height: 64px; padding: 12px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); text-align: start; overflow-wrap: anywhere; }
.tx-home-work-copy { display: grid; flex: 1 1 240px; gap: 5px; min-width: 0; }
.tx-home-work-copy > span, .tx-home-work-copy small, .tx-home-work-row time { color: var(--stax-text-dim); font-size: var(--stax-fs-sm); line-height: 1.4; }
.tx-home-work-copy small { color: var(--stax-gold-text); }
.tx-home-work-row time { font-size: var(--stax-fs-xs); }
.tx-home-work [data-home-work-more] { margin-block-start: 12px; }
/* Shared profile sheet (people and Stax): full height on phones, side card on wide screens. */
#tx-suite-sheet-panel.tx-profile-panel { inset: 0; max-height: none; display: flex; flex-direction: column; gap: var(--stax-space-3); border-radius: 0; }
@media (min-width: 48rem) {
  #tx-suite-sheet-panel.tx-profile-panel { inset: 0 0 0 auto; width: min(27rem, 100%); border-inline-start: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg) 0 0 var(--stax-radius-lg); }
}
.tx-profile-head { position: relative; display: grid; justify-items: center; gap: 6px; padding-block: var(--stax-space-2) 0; text-align: center; }
.tx-profile-close { position: absolute; inset: 0 auto auto 0; width: var(--app-target); height: var(--app-target); border: 0; border-radius: 999px; background: var(--stax-surface-2); color: var(--stax-text); font-size: 24px; cursor: pointer; }
.tx-profile-avatar { display: grid; width: 72px; height: 72px; place-items: center; overflow: hidden; border: 1px solid var(--stax-border); border-radius: 999px; background: var(--stax-surface-2); color: var(--stax-text); font-size: 28px; font-weight: 800; }
.tx-profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tx-profile-avatar[data-profile-kind="agent"] img { width: 56px; height: 56px; object-fit: contain; }
.tx-profile-name { margin: 0; color: var(--stax-text); font-size: var(--stax-fs-xl, 1.375rem); font-weight: 800; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.tx-profile-kind { margin: 0; }
.tx-profile-kind span { padding: 2px 10px; border: 1px solid var(--stax-border); border-radius: 999px; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-profile-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--stax-surface-2); }
.tx-profile-tabs [role="tab"] { display: grid; flex: 1 1 0; min-width: 0; min-height: var(--app-target); place-items: center; gap: 2px; padding: 4px 2px; border: 0; border-radius: 999px; background: transparent; color: var(--stax-text-dim); font: inherit; font-size: var(--stax-fs-xs); cursor: pointer; }
.tx-profile-tabs [role="tab"] svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.750; stroke-linecap: round; stroke-linejoin: round; }
.tx-profile-tabs [role="tab"][aria-selected="true"] { background: var(--stax-surface); color: var(--stax-text); box-shadow: 0 0 0 1px var(--stax-border); font-weight: 750; }
.tx-profile-tabs [role="tab"]:focus-visible, .tx-profile-close:focus-visible, .tx-profile-body:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
.tx-profile-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: var(--stax-space-3); line-height: 1.5; }
.tx-profile-state { margin: 0; padding: var(--stax-space-4); border: 1px dashed var(--stax-border); border-radius: var(--stax-radius-lg); color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.tx-profile-state[data-profile-state="unavailable"] { border-style: solid; border-color: var(--stax-danger, #e53935); color: var(--stax-text); }
.tx-profile-list { display: grid; gap: var(--stax-space-2); margin: 0; padding: 0; list-style: none; }
.tx-profile-list li { display: grid; gap: 2px; padding: var(--stax-space-3); border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); background: var(--stax-surface); }
.tx-profile-list li span, .tx-profile-note { color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.tx-profile-note { margin: 0; }
/* Raw facts a person rarely needs: closed by default, one tap away. */
.tx-profile-system { border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 0 12px; }
.tx-profile-system > summary { min-height: var(--stax-touch); display: flex; align-items: center; cursor: pointer; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); font-weight: 600; }
.tx-profile-system[open] { padding-bottom: 10px; }
.tx-profile-facts { display: grid; gap: 10px; margin: 0; }
.tx-profile-facts div { display: flex; justify-content: space-between; gap: var(--stax-space-3); }
.tx-profile-facts dt { color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.tx-profile-facts dd { margin: 0; text-align: end; overflow-wrap: anywhere; }
.tx-drawer-user { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 700; text-align: start; cursor: pointer; }
.tx-drawer-user:hover, .tx-drawer-user:focus-visible { text-decoration: underline; }
.tx-attention-read-status { align-self: center; padding: 4px 8px; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-attention-read-status[role="alert"] { color: var(--stax-danger); }
#tx-suite-rail { width: 248px; flex-basis: 248px; padding: var(--stax-space-3); }
#tx-shell[data-workspace-panel-expanded="false"] #tx-suite-rail {
  width: 0; flex-basis: 0; padding: 0; border: 0; visibility: hidden; overflow: hidden;
}
#tx-suite-rail :is(.tx-suite-app, .tx-workspace-section) {
  min-height: var(--app-target); flex-direction: row; justify-content: flex-start;
  gap: var(--stax-space-3); padding-inline: var(--stax-space-3);
}
#tx-suite-rail :is(.tx-suite-app, .tx-workspace-section) .tx-suite-label { font-size: var(--stax-fs-sm); }
#tx-suite-rail .tx-workspace-panel-name { display: block; }
#tx-suite-rail .tx-workspace-section-title { justify-content: flex-start; padding-inline: var(--stax-space-3); }
#tx-suite-rail .tx-workspace-section-title-text { display: block; }
#tx-shell:not([data-workspace-panel-expanded="true"]) .tx-workspace-panel-toggle { position: static; width: 32px; height: 32px; }
#tx-workspace-panel-handle { display: none !important; }
.tx-workspace-artist-picker { display: grid; gap: 5px; padding: 4px var(--stax-space-2) var(--stax-space-2); color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-workspace-artist-picker select { width: 100%; min-height: 40px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 0 10px; background: var(--stax-ink); color: var(--stax-text); font: inherit; font-size: var(--stax-fs-sm); }
.tx-workspace-artist-picker select:focus { border-color: var(--stax-gold); outline: 2px solid color-mix(in srgb, var(--stax-gold) 28%, transparent); outline-offset: 1px; }
.tx-workspace-artist-picker select { min-height: 44px; }
.tx-workspace-artist-picker[hidden] { display: none; }
.tx-work-scope-status { color: var(--stax-text-dim); }
.tx-work-scope-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--stax-danger, #e57373); }
.tx-work-scope-error[hidden] { display: none; }
.tx-work-scope-error button { min-height: 44px; padding: 0 12px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: transparent; color: var(--stax-text); font: inherit; cursor: pointer; }
.cl-work-scope { padding: 0 10px 8px; }
.cl-relationships .cl-relationship-choice { min-height: 44px; padding: 0 14px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface); color: var(--stax-text); font-weight: 700; }
.cl-relationships .cl-relationship-choice:focus-visible { outline: 2px solid var(--stax-gold); outline-offset: 2px; }
/* The top bar already names the app; in-canvas copies stay for screen readers only. */
#tx-app-view .fa-context-title,
#tx-app-view .fm:not(.fm-has-form) .fm-context-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fm-work-scope { padding: 4px 0 10px; }

.tx-home-overview { width: min(980px, calc(100% - 48px)); margin: 0 auto; padding: var(--stax-space-6) 0; }
.tx-home-overview h1 { margin: 0 0 var(--stax-space-4); font-size: 1.4rem; letter-spacing: 0; }
.tx-home-overview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--stax-border); }
.tx-home-overview-grid section { min-width: 0; padding: var(--stax-space-4); border-inline-end: 1px solid var(--stax-border); }
.tx-home-overview-grid section:last-child { border-inline-end: 0; }
.tx-home-overview-grid span, .tx-home-overview-grid strong { display: block; overflow-wrap: anywhere; }
.tx-home-overview-grid span { color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.tx-home-overview-grid strong { margin-top: var(--stax-space-2); color: var(--stax-text); font-size: var(--stax-fs-lg); }
#tx-workspace-chat { position: absolute; z-index: 12; display: flex; width: min(760px, calc(100% - 28px)); inset-block-end: calc(12px + var(--tx-bottom-reserve) + var(--tx-keyboard-inset, 0px)); inset-inline-start: 50%; transform: translateX(-50%); max-height: var(--tx-chat-limit, 55dvh); flex-direction: column; overflow: visible; padding: 0; border: 0; background: transparent; }
#tx-workspace-chat-head, #tx-workspace-chat-pin, #tx-workspace-chat-body, #tx-workspace-chat-form, #tx-workspace-chat-reply, #tx-workspace-chat-failure, #tx-workspace-chat-file, #tx-workspace-chat-history-controls { width: min(920px, 100%); margin-inline: auto; }
#tx-workspace-chat-head { display: flex; min-height: 32px; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
#tx-workspace-chat-body { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; }
.tx-chat-context { display: flex; min-width: 0; align-items: baseline; gap: 7px; }
.tx-chat-context strong { flex: 0 0 auto; color: var(--stax-text); font-size: var(--stax-fs-xs); }
.tx-chat-context span { overflow: hidden; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); text-overflow: ellipsis; white-space: nowrap; }
#tx-workspace-chat-pin { display: flex; min-height: var(--app-target); align-items: center; gap: 7px; margin-bottom: 6px; border: 1px solid var(--stax-gold-border); border-radius: var(--stax-radius-pill); padding: 4px 7px 4px 12px; background: var(--stax-gold-soft); color: var(--stax-text); font-size: var(--stax-fs-xs); }
#tx-workspace-chat-pin[hidden] { display: none; }
#tx-workspace-chat-pin span { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tx-workspace-chat-pin button { min-height: 36px; border: 0; border-radius: var(--stax-radius-pill); padding: 0 9px; background: transparent; color: var(--stax-gold-text); font: inherit; font-weight: 750; cursor: pointer; }
#tx-workspace-chat-pin button:hover, #tx-workspace-chat-pin button:focus-visible { background: color-mix(in srgb, var(--stax-gold) 14%, transparent); }
.tx-chat-actions { display: flex; grid-column: 1 / -1; grid-row: 2; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.tx-chat-run-actions { display: flex; align-items: center; gap: 4px; }
.tx-chat-more { position: relative; flex: 0 0 auto; }
.tx-chat-more > summary { display: grid; width: var(--app-target); height: var(--app-target); place-items: center; border: 1px solid transparent; border-radius: 50%; color: var(--stax-text-dim); cursor: pointer; list-style: none; }
.tx-chat-more > summary::-webkit-details-marker { display: none; }
.tx-chat-more > summary:hover, .tx-chat-more > summary:focus-visible, .tx-chat-more[open] > summary { border-color: var(--stax-border); background: var(--stax-surface-2); color: var(--stax-text); }
.tx-chat-more > summary svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The composer's "+" menu.

   It used to be `position: absolute; z-index: 3` inside the composer, with
   `box-shadow: var(--stax-shadow-lg)` — a token that is defined nowhere, so it
   painted with no elevation at all and merged into whatever sat behind it.
   That is the "opens underneath the interface" report.

   It also sat inside five nested `overflow: hidden` ancestors, one of which
   (#tx-workspace-chat) carries a transform — and a transform establishes a
   containing block, so even `position: fixed` is trapped by it. The only
   placement that is immune to both the clipping and the transform is the top
   layer, so the menu is a popover and is positioned from script. The absolute
   rule below stays as the pre-popover fallback. */
.tx-chat-more-menu { position: absolute; z-index: 40; display: grid; width: min(248px, calc(100vw - 32px)); inset-inline-start: 0; bottom: calc(100% + 8px); gap: 4px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); padding: 6px; background: var(--stax-surface); box-shadow: var(--stax-shadow-float); }
.tx-chat-more-menu:popover-open { position: fixed; inset: auto; margin: 0; max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain; }
.tx-chat-more-menu::backdrop { background: transparent; }
.tx-chat-more:not([open]) > .tx-chat-more-menu { display: none; }
.tx-chat-picker { position: relative; display: grid; width: 100%; min-height: 40px; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--stax-radius); padding: 0 8px; background: transparent; color: var(--stax-text-dim); cursor: pointer; }
.tx-chat-picker:hover, .tx-chat-picker:focus-within { border-color: var(--stax-border); background: color-mix(in srgb, var(--stax-surface-2) 72%, transparent); color: var(--stax-text); }
.tx-chat-picker > span { font-size: var(--stax-fs-sm); }
.tx-chat-picker select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.tx-chat-controls button, #tx-workspace-chat-cancel, #tx-workspace-chat-close { display: grid; min-height: var(--app-target); grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; border: 1px solid transparent; border-radius: var(--stax-radius); padding: 0 8px; background: transparent; color: var(--stax-text-dim); cursor: pointer; }
.tx-chat-controls button span { font-size: var(--stax-fs-sm); text-align: start; }
#tx-workspace-chat-cancel, #tx-workspace-chat-close { width: var(--app-target); height: var(--app-target); min-height: var(--app-target); grid-template-columns: 1fr; padding: 0; place-items: center; }
.tx-chat-controls button:hover, .tx-chat-controls button:focus-visible, #tx-workspace-chat-cancel:hover, #tx-workspace-chat-cancel:focus-visible, #tx-workspace-chat-close:hover, #tx-workspace-chat-close:focus-visible { border-color: var(--stax-border); background: color-mix(in srgb, var(--stax-surface-2) 72%, transparent); color: var(--stax-text); }
#tx-workspace-chat-dictate.is-listening { border-color: var(--stax-gold-border); background: var(--stax-gold-soft); color: var(--stax-gold-text); }
.tx-chat-controls svg, #tx-workspace-chat-cancel svg, #tx-workspace-chat-close svg, .tx-chat-picker svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#tx-workspace-chat-form { position: relative; display: block; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--stax-border) 84%, transparent); border-radius: 28px; padding: 5px; background: color-mix(in srgb, var(--stax-surface) 88%, transparent); backdrop-filter: blur(16px); box-shadow: 0 8px 28px color-mix(in srgb, var(--stax-text) 12%, transparent); }
#tx-workspace-chat-input { width: 100%; min-height: 46px; max-height: var(--tx-chat-input-limit, 120px); resize: none; overflow-y: auto; overscroll-behavior: contain; border: 0; border-radius: 23px; outline: 0; padding: 12px 56px; background: transparent; color: var(--stax-text); font: inherit; font-size: 16px; line-height: 1.4; }
#tx-workspace-chat-form .tx-chat-actions { position: absolute; inset: 5px; display: flex; align-items: flex-end; pointer-events: none; }
#tx-workspace-chat-form .tx-chat-actions :is(.tx-chat-more, .tx-chat-run-actions, button, summary) { pointer-events: auto; }
#tx-workspace-chat-input:focus { border-color: var(--stax-gold); }
#tx-workspace-chat-send { display: grid; width: var(--app-target); height: var(--app-target); place-items: center; border: 0; border-radius: 50%; padding: 0; background: transparent; color: var(--stax-on-accent); cursor: pointer; }
.tx-chat-send-glyph { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: var(--stax-accent-stax); }
#tx-workspace-chat-send:focus-visible { outline: 2px solid var(--stax-accent-stax); outline-offset: -2px; }
#tx-workspace-chat-form:focus-within { border-color: var(--stax-accent-stax); }
#tx-workspace-chat-send:disabled { opacity: .5; }
#tx-workspace-chat-send svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#tx-workspace-chat.chat-has-history { inset-block-start: 80px; max-height: none; overflow: hidden; padding: 0; border: 0; background: transparent; box-shadow: none; }
#tx-workspace-main:has(#tx-workspace-chat.chat-has-history) .tx-stax-identity h1 { display: none; }
#tx-workspace-main:has(#tx-workspace-chat.chat-has-history) .tx-stax-mark { width: 96px; height: 96px; }
#tx-workspace-chat-history-controls { display: flex; flex: 0 0 auto; justify-content: flex-end; gap: 6px; margin-bottom: 5px; }
#tx-workspace-chat-history-controls button { min-height: 36px; border: 0; border-radius: var(--stax-radius); padding: 3px 8px; background: transparent; color: var(--stax-gold-text); font-size: var(--stax-fs-xs); cursor: pointer; }
#tx-workspace-chat-history-controls button:hover, #tx-workspace-chat-history-controls button:focus-visible { background: var(--stax-gold-soft); }
#tx-workspace-chat-reply { display: grid; max-height: min(34dvh, 360px); flex: 1 1 auto; gap: 8px; margin-bottom: 8px; overflow: auto; overscroll-behavior: contain; padding: 8px 10px; color: var(--stax-text); font-size: var(--stax-fs-sm); line-height: 1.45; scrollbar-gutter: stable; }
#tx-workspace-chat-failure { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 8px; border: 1px solid var(--stax-danger); border-radius: var(--stax-radius-lg); padding: 10px 12px; background: var(--stax-surface); color: var(--stax-text); font-size: var(--stax-fs-sm); }
#tx-workspace-chat-failure[hidden], #tx-workspace-chat-failure [hidden] { display: none; }
#tx-workspace-chat-failure strong { width: 100%; color: var(--stax-danger); }
#tx-workspace-chat-failure span { flex: 1 1 220px; }
#tx-workspace-chat-failure button { min-height: var(--app-target); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 0 12px; background: var(--stax-surface-2); color: var(--stax-text); font: inherit; font-weight: 700; cursor: pointer; }
#tx-workspace-chat-failure button:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
/* A paused plan is a decision, not a failure: neutral frame, same controls. */
/* A turn still running here (after a reload or on another device) keeps
   its Stop, styled like the plan panel. */
#tx-workspace-chat-running { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: min(920px, 100%); margin: 0 auto 8px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); padding: 10px 12px; background: var(--stax-surface); color: var(--stax-text); font-size: var(--stax-fs-sm); }
#tx-workspace-chat-running[hidden] { display: none; }
#tx-workspace-chat-running span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
#tx-workspace-chat-running button { min-height: var(--app-target); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 0 12px; background: var(--stax-surface-2); color: var(--stax-text); font: inherit; font-weight: 700; cursor: pointer; }
#tx-workspace-chat-running button:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
#tx-workspace-chat-running button:disabled { opacity: .55; cursor: default; }
#tx-workspace-chat-plan { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: min(920px, 100%); margin: 0 auto 8px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); padding: 10px 12px; background: var(--stax-surface); color: var(--stax-text); font-size: var(--stax-fs-sm); }
#tx-workspace-chat-plan[hidden] { display: none; }
#tx-workspace-chat-plan strong { width: 100%; }
#tx-workspace-chat-plan span { flex: 1 1 220px; min-width: 0; overflow-wrap: anywhere; }
#tx-workspace-chat-plan button { min-height: var(--app-target); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 0 12px; background: var(--stax-surface-2); color: var(--stax-text); font: inherit; font-weight: 700; cursor: pointer; }
#tx-workspace-chat-plan button:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
#tx-workspace-chat-plan button:disabled { opacity: .55; cursor: default; }
/* Each message is a framed card whose edge names its sender: a person, Stax,
   a tool result or the system. The frame is soft; the inline-start edge is the
   role colour; the lift is one light shadow. */
.tx-chat-message { display: grid; justify-self: start; gap: 3px; max-width: 100%; padding: 8px 12px; border: 1px solid var(--stax-border); border-inline-start: 3px solid var(--stax-border); border-radius: var(--stax-radius); background: color-mix(in srgb, var(--stax-surface) 94%, transparent); box-shadow: var(--stax-shadow-sm); }
.tx-chat-message > header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.tx-chat-message > header strong { min-width: 0; overflow: hidden; color: var(--stax-text-dim); font-size: 10px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.tx-chat-message > header button { min-height: 36px; flex: 0 0 auto; border: 0; border-radius: var(--stax-radius); padding: 2px 7px; background: transparent; color: var(--stax-gold-text); font: inherit; font-size: var(--stax-fs-xs); cursor: pointer; }
.tx-chat-message > header button:hover, .tx-chat-message > header button:focus-visible { background: var(--stax-gold-soft); }
.tx-chat-message > p { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.tx-chat-message-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-chat-message-meta a { color: var(--stax-gold-text); overflow-wrap: anywhere; }
.tx-chat-message-status { border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 2px 5px; }
.tx-chat-streaming { color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-chat-result-card { display: flex; width: min(100%, 420px); min-height: var(--app-target); align-items: center; justify-content: space-between; gap: var(--stax-space-3); margin-top: 4px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius-lg); padding: 8px 10px; background: var(--stax-surface-2); color: var(--stax-text); font: inherit; text-align: start; cursor: pointer; }
.tx-chat-result-card > span { display: grid; min-width: 0; gap: 2px; }
.tx-chat-result-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-chat-result-card small { color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-chat-result-card b { flex: 0 0 auto; color: var(--stax-gold-text); font-size: var(--stax-fs-xs); }
#tx-workspace-chat-reply:has([data-chat-reply-card]) { padding-block-end: 24px; }
.tx-chat-result-card[data-chat-reply-card] { display: grid; width: min(100%, 520px); align-items: start; justify-content: stretch; gap: 10px; cursor: default; }
.tx-chat-result-card[data-chat-reply-card] > span { min-width: 0; }
.tx-chat-result-card[data-chat-reply-card] small { overflow-wrap: anywhere; white-space: pre-wrap; }
.tx-chat-result-card[data-chat-reply-card] > b { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.tx-chat-result-card[data-chat-reply-card] > b button { min-height: var(--app-target); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 0 12px; background: var(--stax-surface); color: var(--stax-text); font: inherit; font-size: var(--stax-fs-sm); font-weight: 700; cursor: pointer; }
.tx-chat-result-card[data-chat-reply-card] > b button[data-chat-reply-approve] { border-color: var(--stax-gold-border); background: var(--stax-gold-soft); color: var(--stax-gold-text); }
.tx-chat-result-card[data-chat-reply-card] > b button:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
.tx-chat-result-card[data-chat-reply-card] > b button:disabled { opacity: .55; cursor: default; }
/* A confirmation card holds real controls (Confirm, Open, Refresh, Hide):
   they stack under the facts and keep the touch target, never inherited
   black 10px text on the dark card. Confirm is the one accented action. */
.tx-chat-confirmation { flex-wrap: wrap; cursor: default; }
.tx-chat-confirmation > span { flex: 1 1 100%; }
.tx-chat-confirmation small { overflow-wrap: anywhere; }
.tx-chat-confirmation > b { display: flex; flex-wrap: wrap; gap: 8px; }
.tx-chat-confirmation > b button { min-height: var(--app-target); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 0 12px; background: var(--stax-surface); color: var(--stax-text); font: inherit; font-size: var(--stax-fs-sm); font-weight: 700; cursor: pointer; }
.tx-chat-confirmation > b button[data-chat-confirm] { border-color: var(--stax-gold-border); background: var(--stax-gold-soft); color: var(--stax-gold-text); }
.tx-chat-confirmation > b button:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
.tx-chat-confirmation > b button:disabled { opacity: .55; cursor: default; }
.tx-chat-result-card:hover, .tx-chat-result-card:focus-visible { border-color: var(--stax-gold-border); outline: 1px solid var(--stax-gold); outline-offset: 1px; }
.tx-chat-message[data-chat-role="user"] { border-color: color-mix(in srgb, var(--stax-identity-slate) 45%, var(--stax-border)); border-inline-start-color: var(--stax-identity-slate); }
.tx-chat-message[data-chat-role="assistant"] { border-color: color-mix(in srgb, var(--stax-agent) 45%, var(--stax-border)); border-inline-start-color: var(--stax-agent); }
.tx-chat-message[data-chat-role="tool"] { border-color: color-mix(in srgb, var(--stax-identity-amber) 45%, var(--stax-border)); border-inline-start-color: var(--stax-identity-amber); }
.tx-chat-message[data-chat-role="system"] { border-color: color-mix(in srgb, var(--stax-danger) 45%, var(--stax-border)); border-inline-start-color: var(--stax-danger); }
.stax-conversation-message { display: grid; width: min(100%, 46rem); gap: 6px; padding: 8px 10px; color: var(--stax-text); }
.stax-conversation-message > header { display: flex; min-width: 0; align-items: center; gap: 7px; }
.stax-conversation-message > header strong { min-width: 0; overflow: hidden; color: var(--stax-text-dim); font-size: 10px; font-weight: 800; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.stax-conversation-message > header time { margin-inline-start: auto; color: var(--stax-text-faint); font-size: 10px; white-space: nowrap; }
.stax-conversation-message > p { margin: 0; overflow-wrap: anywhere; font-size: var(--stax-fs-sm); line-height: 1.5; white-space: pre-wrap; }
.stax-conversation-message > :is(h4, h5, h6) { margin: 2px 0 0; color: var(--stax-text); font-size: var(--stax-fs-sm); font-weight: 800; line-height: 1.35; }
/* Stax organises an answer with headings. They are h4 downward so the page's own
   outline still holds, which means their weight has to come from type rather than
   from the level. */
.stax-conversation-message > h4 { font-size: calc(var(--stax-fs-sm) + 1px); }
.stax-conversation-message > :is(h4, h5, h6):first-of-type { margin-top: 0; }
.stax-conversation-message > :is(ul, ol) { margin: 0; padding-inline-start: 1.15rem; font-size: var(--stax-fs-sm); line-height: 1.5; }
.stax-conversation-message > :is(ul, ol) > li { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.stax-conversation-message > :is(ul, ol) > li + li { margin-top: 3px; }
.stax-conversation-avatar { display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center; border: 1px solid var(--stax-border); border-radius: 50%; background: var(--stax-surface); color: var(--stax-text-dim); font-size: 10px; font-weight: 850; }
.stax-conversation-message--assistant .stax-conversation-avatar { border-color: color-mix(in srgb, var(--stax-agent) 42%, var(--stax-border)); color: var(--stax-agent); }
.stax-conversation-message--user > p { justify-self: start; max-width: min(88%, 38rem); border-radius: 18px; padding: 9px 12px; background: var(--stax-gold-soft); }
.stax-conversation-message--customer > p { max-width: min(88%, 38rem); border-radius: 16px 16px 16px 4px; padding: 8px 11px; background: var(--stax-surface-2); }
.stax-conversation-message--end { margin-inline-start: auto; }
.tx-chat-message.stax-conversation-message--end { margin-inline-start: 0; }
.tx-chat-message.stax-conversation-summary { border: 1px solid var(--stax-border); border-inline-start: 1px solid var(--stax-border); border-radius: 18px; padding: 12px; background: color-mix(in srgb,var(--stax-surface) 92%,transparent); box-shadow: 0 5px 18px color-mix(in srgb,var(--stax-text) 7%,transparent); }
.tx-chat-message.stax-conversation-progress { border-inline-start-color: var(--stax-agent); color: var(--stax-text-dim); }
.stax-conversation-note { color: var(--stax-text-dim); font-size: 10px; }
/* Channels strip (Owner addendum A2): above the conversation list, never a
   landing page in front of it; wraps instead of scrolling sideways. */
.msg-channel-strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 12px 0; }
.msg-channel-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius-pill); background: var(--stax-surface); color: var(--stax-text-dim); font: inherit; font-size: var(--stax-fs-sm); font-weight: 650; cursor: pointer; }
.msg-channel-chip[aria-pressed="true"] { border-color: color-mix(in srgb, var(--stax-identity-blue) 55%, var(--stax-border)); background: color-mix(in srgb, var(--stax-identity-blue) 12%, var(--stax-surface)); color: var(--stax-text); font-weight: 750; box-shadow: inset 0 -3px 0 var(--stax-identity-blue); }
.msg-channel-chip:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
.msg-channel-count:not(:empty) { min-width: 1.5em; padding: 0 6px; border-radius: var(--stax-radius-pill); background: var(--stax-surface-2); color: var(--stax-text); font-variant-numeric: tabular-nums; text-align: center; }
@media (max-width: 30rem) {
  .msg-channel-strip { gap: 4px; }
  .msg-channel-chip { gap: 4px; padding: 0 8px; font-size: var(--stax-fs-xs); }
}
.msg-refresh { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; }
.msg-refresh svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.msg-channel-team svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.msg-bubble { width: calc(100% - 28px); min-width: 0; box-sizing: border-box; margin: 2px 14px; }
.msg-bubble--draft > p { border: 1px dashed var(--stax-gold); background: transparent; }
.msg-bubble--denied { opacity: .5; }
.msg-bubble--denied > p { text-decoration: line-through; }
/* MMS attachments ride under the text; images stay inside the bubble width. */
.msg-attachments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.msg-attachment { display: inline-flex; max-width: 100%; align-items: center; min-height: 32px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); overflow: hidden; background: var(--stax-surface-2); color: var(--stax-text-dim); font-size: var(--stax-fs-xs); text-decoration: none; }
.msg-attachment img { display: block; max-width: min(100%, 320px); max-height: 260px; object-fit: contain; }
.msg-attachment--file, .msg-attachment--pending, .msg-attachment--fetching, .msg-attachment--failed { padding: 0 10px; }
.msg-attachment--failed { color: var(--stax-danger); border-color: var(--stax-danger); }
.msg-attachment:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
#tx-workspace-chat-report { display: block; margin: -3px auto 7px; border: 0; background: transparent; color: var(--stax-gold-text); font-size: var(--stax-fs-xs); cursor: pointer; }
#tx-workspace-chat-report[hidden] { display: none; }
#tx-workspace-chat-file { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
#tx-workspace-chat-file[hidden] { display: none; }
#tx-workspace-chat-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tx-workspace-chat-file button { border: 0; background: transparent; color: var(--stax-gold-text); cursor: pointer; }
#tx-workspace-chat.chat-expanded #tx-workspace-chat-input { min-height: 40px; max-height: var(--tx-chat-input-limit, 180px); }
#tx-workspace-chat.chat-expanded #tx-workspace-chat-reply { max-height: min(28dvh, 320px); }
#tx-workspace-chat:not(.chat-expanded):not(.chat-collapsed):not(.chat-has-history) { max-height: var(--tx-chat-limit, 48dvh); padding: 5px; }
#tx-workspace-chat:not(.chat-expanded):not(.chat-collapsed) #tx-workspace-chat-head, #tx-workspace-chat:not(.chat-expanded):not(.chat-collapsed) #tx-workspace-chat-history-controls { display: none; }
#tx-workspace-chat:not(.chat-expanded):not(.chat-collapsed) #tx-workspace-chat-body { min-height: 0; flex: 1 1 auto; overflow: hidden; }
#tx-workspace-chat:not(.chat-expanded):not(.chat-collapsed) #tx-workspace-chat-reply { min-height: 0; max-height: none; flex: 1 1 auto; }
#tx-workspace-chat-form { margin-block-start: auto; }
#tx-workspace-chat.chat-has-history #tx-workspace-chat-reply { max-height: none; align-content: start; }
/* Bottom-centre, above the app rail or the assistant composer: never over header controls or the corner action button. */
.tx-automatic-report-notice { position: fixed; z-index: 10001; inset-block-end: calc(var(--app-rail-outer, 0px) + 12px + var(--app-safe-bottom, 0px)); inset-inline-start: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; max-width: calc(100% - 168px); padding: 8px 10px; border: 1px solid var(--stax-border); border-radius: 8px; background: var(--stax-surface); color: var(--stax-text); box-shadow: var(--stax-shadow-float); font-size: 12px; }
body.tx-conversation-active .tx-automatic-report-notice { inset-block-end: calc(var(--tx-chat-height, 56px) + 28px + var(--tx-bottom-reserve, var(--app-safe-bottom, 0px))); }
.tx-automatic-report-notice button { min-width: 44px; min-height: 44px; border: 0; border-radius: 6px; background: var(--stax-gold-soft); color: var(--stax-text); cursor: pointer; }
#tx-workspace-chat.chat-collapsed #tx-workspace-chat-body, #tx-workspace-chat.chat-collapsed .tx-chat-controls > :not(#tx-workspace-chat-close) { display: none; }
#tx-workspace-chat-send { border-radius: 50%; }
#tx-workspace-chat-input:focus-visible { outline: 1px solid var(--stax-gold); outline-offset: -1px; }
@media (max-width: 360px) {
  #tx-workspace-chat { width: calc(100% - 12px); }
  #tx-workspace-chat-form { grid-template-columns: minmax(0, 1fr); }
}
#tx-workspace-chat.chat-collapsed #tx-workspace-chat-head { margin-bottom: 0; }
#tx-workspace-chat.chat-collapsed #tx-workspace-chat-close { display: inline-flex; width: auto; min-width: var(--app-target); padding-inline: 10px; gap: 6px; }
#tx-workspace-chat.chat-collapsed #tx-workspace-chat-close svg { display: none; }
#tx-workspace-chat.chat-collapsed #tx-workspace-chat-close::before { content: 'Open assistant'; white-space: nowrap; font-size: var(--stax-fs-xs); font-weight: 700; }
.cb[data-owner-app="inbox"] .cb-active-ctx { display: none; }
.tx-bug-report-form { display: grid; gap: var(--stax-space-3); }
.tx-bug-report-form label { display: grid; gap: 6px; color: var(--stax-text); font-size: var(--stax-fs-sm); }
.tx-bug-report-form textarea { width: 100%; min-height: 76px; max-height: 180px; resize: vertical; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 10px; background: var(--stax-ink); color: var(--stax-text); font: inherit; }
.tx-bug-file input { min-height: var(--app-target); color: var(--stax-text-dim); }
#tx-bug-preview { display: grid; max-width: 420px; gap: 7px; }
#tx-bug-preview[hidden] { display: none; }
#tx-bug-preview img { width: 100%; max-height: 220px; object-fit: contain; border: 1px solid var(--stax-border); background: var(--stax-ink); }
#tx-bug-preview button { justify-self: start; border: 0; background: transparent; color: var(--stax-gold-text); cursor: pointer; }
#tx-bug-status { margin: 0; overflow-wrap: anywhere; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-bug-send { min-height: var(--app-target); border: 0; border-radius: var(--stax-radius); background: var(--stax-gold); color: var(--stax-on-gold); font-weight: 700; cursor: pointer; }
.tx-bug-send:disabled { opacity: .55; }
.tx-bug-evidence { margin: 0; overflow-wrap: anywhere; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-bug-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--stax-space-2); }
.tx-bug-actions .tx-bug-send, .tx-bug-actions .tx-bug-secondary { min-height: var(--app-target); border-radius: var(--stax-radius); padding: 0 14px; font: inherit; font-weight: 700; cursor: pointer; }
.tx-bug-actions .tx-bug-secondary { border: 1px solid var(--stax-border); background: var(--stax-ink); color: var(--stax-text); }
.tx-bug-actions button:disabled { opacity: .55; cursor: wait; }

@media (max-width: 63.999rem) {
  #tx-suite-rail, #tx-shell[data-workspace-panel-expanded="false"] #tx-suite-rail {
    position: fixed; inset: 0 auto 0 0; z-index: calc(var(--z-app-rail) + 2); display: flex;
    width: 280px; max-width: calc(100vw - 36px); height: 100%; padding: var(--stax-space-3);
    visibility: hidden; transform: translateX(-102%); border-inline-end: 1px solid var(--stax-border);
    box-shadow: var(--stax-shadow-float); transition: transform 180ms ease, visibility 180ms ease;
  }
  .workspace-panel-open #tx-suite-rail,
  #tx-shell[data-workspace-panel-expanded="false"].workspace-panel-open #tx-suite-rail { visibility: visible; transform: translateX(0); }
  #tx-workspace-panel-backdrop:not([hidden]) { position: fixed; inset: 0; z-index: calc(var(--z-app-rail) + 1); display: block; width: 100%; height: 100%; border: 0; background: var(--stax-overlay); }
  #tx-suite-rail .tx-workspace-panel-toggle { display: none; }
  #tx-suite-rail .tx-workspace-signout { justify-content: flex-start; padding-inline: var(--stax-space-3); }
  #tx-suite-rail .tx-workspace-signout span { display: inline; }
}

@media (max-width: 47.999rem) {
  .tx-stax-start { width: calc(100% - 32px); padding-block-start: clamp(28px, 5vh, 48px); }
  .tx-stax-identity h1 { font-size: 1.65rem; }
  .tx-home-header { display: grid; grid-template-columns: var(--app-target) minmax(0, 1fr) auto; }
  .tx-home-overview { width: calc(100% - 24px); padding-block: var(--stax-space-4); }
  .tx-home-overview-grid { grid-template-columns: 1fr; }
  .tx-home-overview-grid section { border-inline-end: 0; border-block-end: 1px solid var(--stax-border); }
  .tx-home-overview-grid section:last-child { border-block-end: 0; }
  #tx-workspace-chat { width: calc(100% - 24px); }
  #tx-workspace-chat.chat-has-history { inset-block-start: 72px; }
  #tx-workspace-chat.chat-expanded #tx-workspace-chat-head { display: grid; align-items: start; gap: 4px; }
  .tx-chat-context { gap: 6px; }
  .tx-chat-context strong, .tx-chat-context span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #tx-workspace-chat-close { margin-inline-start: 0; }
}

@media (max-width: 22.5rem) {
  .tx-home-header { padding-inline: 8px; gap: 6px; }
  .tx-home-sub { display: none; }
  .tx-home-actions { gap: 4px; }
  .tx-status-pill { min-height: 40px; padding-inline: 8px; }
  .tx-status-pill > svg { display: none; }
}

@media (orientation: landscape) and (max-height: 32.5rem) {
  .tx-stax-start { min-height: 0; padding-block-start: clamp(16px, 4vh, 28px); }
  .tx-stax-mark { width: 96px; height: 96px; }
  .tx-stax-identity h1 { margin-block: 8px 4px; font-size: 1.4rem; }
  #tx-workspace-chat.chat-expanded:not(.chat-has-history) { height: min(45dvh, 12rem); min-height: min(45dvh, 12rem); max-height: min(45dvh, 12rem); flex-basis: min(45dvh, 12rem); padding-block: 4px; }
  #tx-workspace-chat.chat-expanded #tx-workspace-chat-head { display: grid; min-height: 32px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin-bottom: 4px; }
  #tx-workspace-chat.chat-expanded #tx-workspace-chat-body { min-height: 0; flex: 1 1 auto; overflow: hidden; }
  #tx-workspace-chat.chat-expanded #tx-workspace-chat-history-controls { display: none; }
  #tx-workspace-chat.chat-expanded #tx-workspace-chat-reply { min-height: 0; flex: 1 1 0; }
  #tx-workspace-chat.chat-expanded #tx-workspace-chat-form { flex: 0 0 auto; }
  .tx-chat-context strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tx-chat-context span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tx-chat-controls { margin-inline-start: auto; }
  #tx-workspace-chat-form { gap: 4px; }
  #tx-workspace-chat-input { min-height: 40px; max-height: 40px; padding-block: 8px; }
  #tx-workspace-chat.chat-expanded #tx-workspace-chat-input { min-height: 40px; max-height: 40px; resize: none; }
  #tx-workspace-chat.chat-expanded:not(.chat-has-history) #tx-workspace-chat-reply { max-height: min(18dvh, 80px); }
}

@media (orientation: landscape) and (max-height: 32.5rem) and (max-width: 47.999rem) {
  #tx-workspace-chat.chat-expanded #tx-workspace-chat-head { grid-template-columns: minmax(0, 1fr) auto; }
}

/* TEAM-EVENT-4: one Teams-first card and a persistent Team workspace. */
#tx-suite-rail { overflow: hidden; }
.tx-workspace-panel-head { flex: 0 0 auto; }
.tx-workspace-panel-studio { flex: 0 0 auto; margin: -5px 8px 1px 56px; overflow: hidden; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.tx-workspace-panel-scroll { display: flex; min-height: 0; flex: 1 1 auto; flex-direction: column; gap: var(--stax-space-2); overflow: hidden auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.tx-workspace-panel-close { display: none; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 0; border-radius: var(--stax-radius); background: transparent; color: var(--stax-text); font-size: 24px; cursor: pointer; }
.tx-workspace-teams, .tx-workspace-app-group { display: grid; gap: 4px; }
.tx-workspace-teams > h2, .tx-workspace-app-group > h2 { margin: 6px var(--stax-space-2) 2px; color: var(--stax-text-faint); font-size: 10px; font-weight: 800; letter-spacing: 0; text-transform: uppercase; }
#tx-workspace-team-list { display: grid; gap: 2px; }
.tx-workspace-loading { margin: 0; padding: var(--stax-space-3); color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-workspace-team { display: grid; grid-template-columns: minmax(0, 1fr) var(--app-target); align-items: center; }
.tx-workspace-team > button[data-workspace-team] { display: grid; width: 100%; min-height: var(--app-target); grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 0; border-radius: var(--stax-radius); padding: 5px 8px; background: transparent; color: var(--stax-text-dim); text-align: start; cursor: pointer; }
.tx-workspace-team > button[data-workspace-team]:hover, .tx-workspace-team > button[data-workspace-team]:focus-visible { background: var(--stax-surface-2); color: var(--stax-text); }
.tx-workspace-team.selected > button[data-workspace-team] { background: var(--stax-gold-soft); color: var(--stax-gold-text); }
.tx-workspace-team > button[data-workspace-team] > span:nth-child(2) { min-width: 0; font-size: var(--stax-fs-sm); font-weight: 750; white-space: normal; overflow-wrap: anywhere; }
.tx-workspace-team > button[data-workspace-team] > strong { min-width: 19px; padding: 2px 5px; border-radius: var(--stax-radius-pill); background: var(--stax-danger); color: white; font-size: 10px; text-align: center; }
.tx-workspace-team-disclosure { display: grid; width: var(--app-target); min-height: var(--app-target); place-items: center; border: 0; border-radius: var(--stax-radius); background: transparent; color: var(--stax-text-dim); cursor: pointer; }
.tx-workspace-team-disclosure:hover, .tx-workspace-team-disclosure:focus-visible { background: var(--stax-surface-2); color: var(--stax-text); }
.tx-workspace-team-chevron { width: 9px; height: 9px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); transition: transform 140ms ease; }
.tx-workspace-team-disclosure[aria-expanded="true"] .tx-workspace-team-chevron { transform: rotate(225deg); }
.tx-workspace-team-avatar { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--stax-gold-border); border-radius: 50%; background: var(--stax-ink); color: var(--stax-gold); font-size: var(--stax-fs-xs); font-weight: 850; }
.tx-workspace-team-detail { display: grid; grid-column: 1 / -1; gap: 2px; margin: 2px 0 7px 40px; border-inline-start: 2px solid var(--stax-border); padding-inline-start: 7px; }
.tx-workspace-team-detail > button, .tx-workspace-team-detail summary { display: flex; width: 100%; min-height: 34px; align-items: center; gap: 7px; border: 0; border-radius: var(--stax-radius); padding: 4px 7px; background: transparent; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); cursor: pointer; }
.tx-workspace-team-detail > button { color: var(--stax-gold-text); }
.tx-workspace-team-detail summary { justify-content: space-between; list-style: none; }
.tx-workspace-team-detail summary::-webkit-details-marker { display: none; }
.tx-workspace-team-detail details p { display: flex; justify-content: space-between; gap: 5px; margin: 0; padding: 4px 7px 4px 20px; color: var(--stax-text); font-size: var(--stax-fs-xs); }
.tx-workspace-team-detail details small { color: var(--stax-text-dim); }
.tx-workspace-panel-footer { margin-block-start: var(--stax-space-3); }
.tx-workspace-session-meta { display: grid; gap: 2px; margin: 5px 10px 8px; color: var(--stax-text-dim); font-size: 10px; }
.tx-workspace-session-meta strong { overflow: hidden; color: var(--stax-text); font-size: var(--stax-fs-xs); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
/* Solid paper surfaces also work in the terminal's pre-color-mix WebView. */
#tx-suite-rail { background: var(--stax-surface); }
.tx-home-header { background: var(--stax-ink); }
#tx-workspace-chat-form { background: var(--stax-surface); border-color: var(--stax-border); }
.tx-suite-brand { background: transparent; border-color: var(--stax-border); }
.tx-suite-brand img { display: block; }
.tx-suite-icon { width: 32px; height: 32px; flex-basis: 32px; border-radius: 9px; background: var(--stax-surface-2); }

.tx-team-workspace { width: 100%; min-width: 0; height: 100%; overflow: hidden auto; background: var(--stax-ink); color: var(--stax-text); }
.tx-team-workspace-head { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: var(--stax-space-4); padding: var(--stax-space-4) clamp(16px, 4vw, 44px); border-block-end: 1px solid var(--stax-border); }
.tx-team-workspace-head span { color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-team-workspace-head h1 { margin: 3px 0 0; font-size: 1.35rem; letter-spacing: 0; }
.tx-team-workspace-head button, .tx-team-roster-head button, .tx-bot-template header button { min-height: 36px; border: 1px solid var(--stax-gold-border); border-radius: var(--stax-radius); padding: 0 12px; background: var(--stax-gold); color: var(--stax-on-gold); font-weight: 750; cursor: pointer; }
.tx-team-channels { display: flex; min-height: 45px; align-items: end; gap: 4px; padding-inline: clamp(16px, 4vw, 44px); border-block-end: 1px solid var(--stax-border); }
.tx-team-channels button { min-height: 39px; border: 0; border-block-end: 2px solid transparent; padding: 0 10px; background: transparent; color: var(--stax-text-dim); cursor: pointer; }
.tx-team-channels button.active { border-block-end-color: var(--stax-gold); color: var(--stax-text); }
.tx-team-workspace-body { display: grid; width: min(1180px, 100%); min-height: 0; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); margin-inline: auto; }
.tx-team-channel { min-width: 0; border-inline-end: 1px solid var(--stax-border); }
.tx-team-channel > section, .tx-team-roster > section { padding: var(--stax-space-5) clamp(16px, 3vw, 32px); border-block-end: 1px solid var(--stax-border); }
.tx-team-section-head, .tx-team-roster-head { display: flex; align-items: center; justify-content: space-between; gap: var(--stax-space-3); }
.tx-team-section-head h2, .tx-team-roster h2 { margin: 0; font-size: 1rem; letter-spacing: 0; }
.tx-team-section-head p { margin: 4px 0 0; color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-team-section-head > strong { color: var(--stax-gold-text); }
.tx-team-work-items { margin-block-start: var(--stax-space-3); border-block-start: 1px solid var(--stax-border); }
.tx-team-work-row { display: grid; width: 100%; min-height: 66px; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--stax-space-3); border: 0; border-block-end: 1px solid var(--stax-border); padding: 9px 0; background: transparent; color: var(--stax-text); text-align: start; cursor: pointer; }
.tx-team-work-row:hover { background: color-mix(in srgb, var(--stax-gold) 6%, transparent); }
.tx-team-work-row > span:nth-child(2) { display: grid; min-width: 0; gap: 3px; }
.tx-team-work-row small, .tx-team-work-row time, .tx-team-work-state:not(.stax-chip) { color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-team-work-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-team-report-list { margin-top: var(--stax-space-3); border-block-start: 1px solid var(--stax-border); }
.tx-team-report-row { display: grid; width: 100%; min-height: 58px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--stax-space-3); border: 0; border-block-end: 1px solid var(--stax-border); padding: 9px 0; background: transparent; color: var(--stax-text); text-align: start; cursor: pointer; }
.tx-team-report-row:hover, .tx-team-report-row:focus-visible { background: color-mix(in srgb, var(--stax-gold) 6%, transparent); }
.tx-team-report-row > span:first-child { display: grid; min-width: 0; gap: 3px; }
.tx-team-report-row small, .tx-team-report-row > span:last-child { color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-team-report-row small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-team-scout [data-team-scout-result] { margin-top: var(--stax-space-3); }
.tx-team-scout-status { margin: 0; font-weight: 700; }
.tx-team-scout-degraded { color: var(--stax-danger); overflow-wrap: anywhere; }
.tx-team-scout-findings article, .tx-team-scout-suggestions article, .tx-team-scout-schedules article, .tx-team-scout-occurrences article { border-block-start: 1px solid var(--stax-border); padding-block: 12px; }
.tx-team-scout-findings p, .tx-team-scout-suggestions p, .tx-team-scout-schedules p, .tx-team-scout-occurrences p { margin: 5px 0 0; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); overflow-wrap: anywhere; }
.tx-team-scout article > div { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-top: 10px; }
.tx-team-scout label { display: grid; gap: 4px; font-size: var(--stax-fs-xs); color: var(--stax-text-dim); }
.tx-team-scout button, .tx-team-scout input, .tx-team-scout select { min-height: 44px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding-inline: 10px; background: var(--stax-surface); color: var(--stax-text); }
.tx-team-scout button { cursor: pointer; }
.tx-team-scout button:focus-visible, .tx-team-scout input:focus-visible, .tx-team-scout select:focus-visible { outline: 2px solid var(--stax-gold); outline-offset: 2px; }
.tx-team-work-state:not(.stax-chip) { border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 3px 6px; white-space: nowrap; }
.tx-team-empty { margin: var(--stax-space-3) 0 0; color: var(--stax-text-dim); font-size: var(--stax-fs-sm); }
.tx-team-job-list { margin-top: var(--stax-space-3); border-block-start: 1px solid var(--stax-border); }
.tx-team-job { display: grid; min-height: 58px; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--stax-space-3); border-block-end: 1px solid var(--stax-border); padding: 9px 0; }
.tx-team-job-main { display: grid; min-width: 0; gap: 3px; }
.tx-team-job-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.tx-team-job small, .tx-team-job time { color: var(--stax-text-dim); font-size: var(--stax-fs-xs); overflow-wrap: anywhere; }
.tx-team-job-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }
.tx-team-job-actions button, .tx-team-job-error button, .tx-workspace-error button { min-width: 44px; min-height: 44px; border: 1px solid var(--stax-gold-border); border-radius: var(--stax-radius); padding: 0 12px; background: var(--stax-surface); color: var(--stax-text); font-weight: 700; cursor: pointer; }
.tx-team-job-actions button[data-armed="true"] { border-color: var(--stax-text); background: var(--stax-text); color: var(--stax-ink); }
.tx-team-job-actions button:disabled { opacity: .6; cursor: progress; }
.tx-team-job-actions button:focus-visible, .tx-team-job-error button:focus-visible, .tx-workspace-error button:focus-visible { outline: 2px solid var(--stax-gold); outline-offset: 2px; }
.tx-team-job-explain { grid-column: 1 / -1; margin: 0; color: var(--stax-text); font-size: var(--stax-fs-sm); }
.tx-team-job-source { justify-self: start; min-height: 44px; min-width: 44px; margin-top: 4px; padding: 0 12px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface); color: var(--stax-text); font-weight: 650; cursor: pointer; }
.tx-team-job-source:focus-visible { outline: 2px solid var(--stax-gold); outline-offset: 2px; }
.tx-team-job-error, .tx-workspace-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: var(--stax-space-3); border: 1px solid var(--stax-border); border-inline-start: 3px solid var(--stax-danger); border-radius: var(--stax-radius); padding: 8px 12px; }
.tx-team-job-error p, .tx-workspace-error p { margin: 0; color: var(--stax-text); font-size: var(--stax-fs-sm); }

/* Inbox uses a custom textarea reset; retain the shared keyboard focus cue. */
#msg-input:focus-visible, [data-public-approve]:focus-visible, [data-public-deny]:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
.tx-team-job-status { margin: var(--stax-space-3) 0 0; color: var(--stax-text); font-size: var(--stax-fs-sm); }
.tx-team-job-status:empty { margin: 0; }
.tx-team-jobs h2:focus-visible, .tx-team-job-status:focus-visible { outline: 2px solid var(--stax-gold); outline-offset: 2px; }
.tx-team-message-list { display: grid; gap: var(--stax-space-3); margin-block: var(--stax-space-4); }
.tx-team-message { padding: 8px 12px; border: 1px solid var(--stax-border); border-inline-start: 3px solid var(--stax-border); border-radius: var(--stax-radius); background: color-mix(in srgb, var(--stax-surface) 94%, transparent); box-shadow: var(--stax-shadow-sm); }
.tx-team-message[data-actor-type="bot"] { border-color: color-mix(in srgb, var(--stax-agent) 45%, var(--stax-border)); border-inline-start-color: var(--stax-agent); }
.tx-team-message[data-actor-type="human"] { border-color: color-mix(in srgb, var(--stax-identity-slate) 45%, var(--stax-border)); border-inline-start-color: var(--stax-identity-slate); }
.tx-team-message > div { display: flex; align-items: baseline; gap: 7px; }
.tx-team-message span, .tx-team-message time { color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-team-message time { margin-inline-start: auto; }
.tx-team-message p { margin: 6px 0 0; line-height: 1.45; white-space: pre-wrap; }
.tx-team-message-form { display: grid; grid-template-columns: minmax(0, 1fr) var(--app-target); align-items: end; gap: 8px; }
.tx-team-message-form textarea { width: 100%; min-height: 58px; resize: vertical; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 9px 10px; background: var(--stax-surface); color: var(--stax-text); }
.tx-team-message-form button { display: grid; width: var(--app-target); height: var(--app-target); place-items: center; border: 0; border-radius: var(--stax-radius); background: var(--stax-gold); color: var(--stax-on-gold); cursor: pointer; }
.tx-team-message-form svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.tx-team-roster > section > p { display: flex; justify-content: space-between; gap: 8px; margin: var(--stax-space-3) 0 0; font-size: var(--stax-fs-sm); }
/* A member row is face, name, role. The name takes the slack so a long role does
   not push the photo around, and the role stays on the trailing edge. */
.tx-team-roster > section > p.tx-team-member { align-items: center; justify-content: flex-start; }
.tx-team-member > strong { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-team-member > span { flex: 0 0 auto; color: var(--stax-text-dim); font-size: 11px; }
.tx-team-face { display: grid; width: 26px; height: 26px; flex: 0 0 26px; place-items: center; overflow: hidden; border: 1px solid var(--stax-border); border-radius: 50%; background: var(--stax-surface-2); object-fit: cover; }
.tx-team-face--initials { color: var(--stax-text-dim); font-size: 10px; font-weight: 850; letter-spacing: 0.02em; }
.tx-team-roster > section > p span { color: var(--stax-text-dim); }
.tx-team-bot-list { display: grid; gap: var(--stax-space-3); margin-block-start: var(--stax-space-3); }
.tx-team-bot, .tx-bot-template { border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: var(--stax-space-3); background: var(--stax-surface); }
.tx-team-bot header, .tx-bot-template header { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.tx-team-bot header > div, .tx-bot-template header > div { display: grid; gap: 2px; }
.tx-team-bot header span, .tx-bot-template header span { color: var(--stax-text-dim); font-size: var(--stax-fs-xs); }
.tx-team-bot header button { border: 0; background: transparent; color: var(--stax-gold-text); cursor: pointer; }
.tx-team-bot dl, .tx-bot-template dl { display: grid; gap: 6px; margin: var(--stax-space-3) 0; }
.tx-team-bot dl div, .tx-bot-template dl div { display: grid; gap: 2px; }
.tx-team-bot dt, .tx-bot-template dt { color: var(--stax-text-dim); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.tx-team-bot dd, .tx-bot-template dd { margin: 0; overflow-wrap: anywhere; font-size: var(--stax-fs-xs); line-height: 1.4; }
.tx-team-bot-remove { border: 0; padding: 0; background: transparent; color: var(--stax-danger); font-size: var(--stax-fs-xs); cursor: pointer; }
.tx-bot-template-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stax-space-3); }
.tx-bot-template > p { color: var(--stax-text-dim); font-size: var(--stax-fs-sm); line-height: 1.45; }

/* Calendar keeps the paper workspace compact while making proposal state explicit. */
.ap-mode { min-height: var(--app-target); height: var(--app-target); align-self: start; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: transparent; color: var(--stax-text-dim); font: inherit; font-size: var(--stax-fs-xs); cursor: pointer; }
.ap-mode.active { border-color: var(--stax-gold-border); background: color-mix(in srgb, var(--stax-gold) 12%, var(--stax-surface)); color: var(--stax-text); font-weight: 750; }
.ap-preview { display: grid; gap: var(--stax-space-4); width: 100%; padding: clamp(14px, 3vw, 28px); }
.ap-preview-hdr { display: grid; gap: 5px; }
.ap-preview-title { font-size: 1.1rem; font-weight: 800; }
.ap-preview-sub, .ap-proposal-meta { color: var(--stax-text-dim); font-size: var(--stax-fs-xs); line-height: 1.45; }
.ap-cal-toggle { display: flex; gap: 5px; margin-block-start: var(--stax-space-2); }
.ap-cal-span { min-height: var(--app-target); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 0 10px; background: transparent; color: var(--stax-text-dim); cursor: pointer; }
.ap-cal-span.active { border-color: var(--stax-gold-border); color: var(--stax-gold-text); }
.ap-cal-grid { display: grid; gap: 6px; min-width: 0; overflow-x: auto; }
.ap-cal-day { min-width: 0; border-block-start: 1px solid var(--stax-border); padding-block-start: 6px; }
.ap-cal-day-hdr { display: flex; width: 100%; align-items: center; justify-content: space-between; border: 0; padding: 5px; background: transparent; color: var(--stax-text); cursor: pointer; }
.ap-cal-items { display: grid; gap: 4px; }
.ap-cal-item { min-width: 0; overflow: hidden; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); padding: 6px; background: var(--stax-surface); color: var(--stax-text); font-size: 10px; text-align: start; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.ap-proposal-review { display: grid; gap: 8px; border: 1px solid var(--stax-gold-border); border-radius: var(--stax-radius-lg); padding: 14px; background: var(--stax-surface); box-shadow: var(--stax-shadow-sm); }
.ap-proposal-review p { margin: 0; }
.ap-refusal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 8px; padding: 10px 12px; border: 1px solid color-mix(in srgb, var(--stax-danger, #c0392b) 45%, var(--stax-border)); border-radius: var(--stax-radius-md, 10px); background: color-mix(in srgb, var(--stax-danger, #c0392b) 8%, var(--stax-surface)); }
.ap-refusal p { flex: 1 1 16rem; min-width: 0; margin: 0; }
.ap-proposal-kicker { color: var(--stax-gold-text); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.ap-proposal-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-block-start: 4px; }

@media (max-width: 47.999rem) {
  .ap-preview { padding: 12px; }
  /* The agenda is a vertical list on phones: no sideways scroll, no clipped
     weekend columns; quiet days fold away. */
  .ap-cal-grid--month { grid-template-columns: 1fr !important; overflow-x: visible; gap: 0; }
  .ap-cal-grid--month .ap-cal-day--quiet { display: none; }
  .ap-cal-grid--month .ap-cal-day-hdr { justify-content: flex-start; gap: 8px; }
  #ap-cal-nav #ap-cal-range { flex: 1 1 100% !important; order: -1; white-space: nowrap; }
  .ap-proposal-actions > * { flex: 1 1 130px; }
}

@media (max-width: 63.999rem) {
  #tx-suite-rail { max-height: 100dvh; }
  #tx-suite-rail .tx-workspace-panel-close { display: grid; }
}

@media (max-width: 47.999rem) {
  .tx-team-workspace-body { grid-template-columns: 1fr; }
  .tx-team-channel { border-inline-end: 0; }
  .tx-team-roster { border-block-start: 1px solid var(--stax-border); }
  .tx-team-work-row { grid-template-columns: minmax(0, 1fr) auto; }
  .tx-team-work-state { grid-column: 1 / -1; justify-self: start; }
  .tx-team-job { grid-template-columns: 1fr; }
  .tx-team-job-actions { justify-content: start; }
  .tx-bot-template-list { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 32.5rem) {
  .tx-team-workspace-head { min-height: 58px; padding-block: 8px; }
  .tx-team-channels { min-height: 38px; }
  .tx-team-channels button { min-height: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  #tx-suite-rail, .tx-workspace-team-chevron { transition: none !important; }
  .cb-dot { animation: none !important; }
}
/* Teammates share the existing drawer and conversation surface. */
.tx-workspace-people { border-top: 1px solid var(--border, #d9dde2); margin-top: 12px; padding-top: 8px; }
.tx-workspace-people h3 { font-size: 12px; padding: 0 12px; color: var(--stax-text-dim); }
.tx-member-row > button { color: var(--stax-text); background: transparent; border: 0; font: inherit; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; }
.tx-member-row > button > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tx-member-row button, .tx-member-row summary { color: var(--stax-text); min-height: 44px; padding: 10px 12px; white-space: normal; overflow-wrap: anywhere; }
.tx-member-row button:focus-visible, .tx-member-row summary:focus-visible { outline: 2px solid #24665f; outline-offset: -2px; }
.tx-member-actions { padding: 0 8px 8px 28px; }
.tx-member-actions[hidden] { display: none; }
.tx-member-actions button { display: block; width: 100%; text-align: left; }
.tx-member-actions summary { cursor: pointer; color: var(--stax-text-dim); }
.tx-member-row [aria-expanded=true] .tx-workspace-team-chevron { transform: rotate(90deg); }
.tx-member-task { display: grid; gap: 16px; padding: 20px; }
.tx-member-task label { display: grid; gap: 8px; }
.tx-member-task input, .tx-member-task button { min-height: 44px; max-width: 100%; }
.tx-direct-conversation .tx-chat-bot-picker,
.tx-direct-conversation .tx-chat-model-picker,
.tx-direct-conversation #tx-workspace-chat-attach,
.tx-direct-conversation #tx-workspace-chat-file,
.tx-direct-conversation #tx-workspace-chat-pin,
.tx-direct-conversation #tx-workspace-chat-dictate { display: none !important; }
.tx-direct-conversation #tx-workspace-main { display: flex; flex-direction: column; }
.tx-direct-conversation #tx-shell { height: var(--tx-direct-height, 100dvh); max-height: var(--tx-direct-height, 100dvh); }
.tx-direct-conversation #tx-workspace-main > #tx-home { flex: 0 0 auto; height: auto; overflow: visible; padding-block-end: 0; }
.tx-direct-conversation #tx-workspace-main:has(> #tx-work-context) > #tx-home { flex: 0 0 auto; }
.tx-direct-conversation #tx-home > :not(.tx-home-header) { display: none; }
.tx-direct-conversation #tx-workspace-chat { position: relative; inset: auto; transform: none; flex: 1 1 auto; min-height: 0; max-height: none; margin: 8px auto 12px; overflow: hidden; }
.tx-direct-conversation #tx-workspace-chat:not(.chat-collapsed):not(.chat-expanded) { max-height: none; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.tx-direct-conversation #tx-workspace-chat:not(.chat-collapsed):not(.chat-expanded) #tx-workspace-chat-reply { max-height: none; align-content: start; }
.tx-direct-conversation #tx-workspace-chat-form { margin-block-start: auto; }
.tx-direct-conversation #tx-workspace-chat-reply { user-select: text; }
.tx-direct-conversation #tx-workspace-chat:not(.chat-expanded):not(.chat-collapsed) #tx-workspace-chat-head { display: flex; flex: 0 0 auto; }
.tx-direct-conversation .tx-chat-context { flex-wrap: wrap; }
.tx-direct-conversation .tx-chat-context span { white-space: normal; overflow-wrap: anywhere; }
.tx-direct-conversation .tx-chat-more, .tx-direct-conversation .tx-chat-controls { display: none; }
.tx-direct-conversation #tx-workspace-chat-input { padding-inline-start: 16px; }
.tx-direct-conversation #tx-workspace-chat-form .tx-chat-actions { justify-content: flex-end; }

/* Another artist's media that could not be loaded is stated. */
.tx-scoped-media-error { display: block; padding: 4px 0; font-size: 12px; color: var(--stax-text); }

/* Agent activity: compact truthful steps beside a streaming answer. Uses the
   existing chat surface tokens so it inherits theme, scaling and contrast. */
.tx-agent-activity { display: grid; gap: 2px; margin-top: 6px; }
.tx-agent-step { display: flex; align-items: center; gap: 6px; color: var(--stax-text-2, var(--stax-text)); font-size: 12px; line-height: 1.5; }
.tx-agent-step[data-state="running"] { opacity: .75; }
.tx-agent-step[data-state="error"] { color: var(--stax-danger, #d9a0a0); }
/* Internal step names are for whoever needs them, not the everyday view. */
.tx-agent-tech { margin-top: 4px; color: var(--stax-text-dim); font-size: 11px; }
.tx-agent-tech summary { cursor: pointer; width: fit-content; }
.tx-agent-tech code { display: block; margin-top: 2px; overflow-wrap: anywhere; font-family: var(--stax-font-mono, ui-monospace, monospace); }

/* ── Application launcher ────────────────────────────────────────────────
   Manifest identity colors sit inside the app tiles; names and the selected
   rail edge still identify each destination without relying on color.

   App marks are solid silhouettes, so the fill rule is scoped to
   .tx-suite-app rather than applied to every .tx-suite-icon: the global rule
   sets `fill: none`, which would otherwise override each mark's own fill
   attribute and erase it. The shell's utility glyphs stay stroked. */
.tx-suite-app .tx-suite-icon {
  width: 34px; height: 34px; flex-basis: 34px;
  border: 1px solid var(--stax-border); border-radius: 10px;
  background: var(--stax-surface-2);
  color: var(--app-accent, var(--stax-gold));
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.tx-suite-app .tx-suite-icon svg {
  width: 20px; height: 20px;
  fill: currentColor; stroke: none;
}
@supports (color: color-mix(in srgb, red, white)) {
  .tx-suite-app .tx-suite-icon {
    border-color: color-mix(in srgb, var(--app-accent) 28%, var(--stax-border));
    background: color-mix(in srgb, var(--app-accent) 13%, var(--stax-surface));
  }
  .tx-suite-app:is(:hover, :focus-visible, .active) .tx-suite-icon {
    border-color: var(--app-accent);
    background: color-mix(in srgb, var(--app-accent) 22%, var(--stax-surface));
  }
}
.tx-suite-app:active .tx-suite-icon { transform: scale(0.94); }
.tx-suite-app.active { background: var(--app-accent-soft); color: var(--stax-text); box-shadow: inset 3px 0 var(--app-accent); }
.tx-suite-app.active .tx-suite-label { font-weight: 850; }
.tx-suite-app .tx-suite-label { letter-spacing: -0.01em; }
.tx-workspace-signout[data-suite-app="settings"] svg { width: 32px; height: 32px; flex: 0 0 32px; padding: 5px; border: 1px solid var(--stax-border); border-radius: 9px; background: var(--stax-surface-2); color: var(--stax-identity-slate); }
.tx-workspace-signout[data-suite-app="settings"].active { background: var(--app-accent-soft); color: var(--stax-text); box-shadow: inset 3px 0 var(--app-accent); font-weight: 800; }

/* ── More apps ───────────────────────────────────────────────────────────
   Progressive disclosure: the everyday modules stay on the rail, the rest sit
   one tap away so the rail never grows into an endless scroll. */
/* Section headings over direct app links (Channels, Work, Studio, System). */
.tx-purpose-folders { gap: 6px; }
.tx-folder { display: grid; gap: 2px; }
.tx-folder > summary {
  display: flex; align-items: center; gap: var(--stax-space-2);
  min-height: var(--app-target); padding-inline: var(--stax-space-3);
  border-radius: var(--stax-radius);
  color: var(--stax-text); cursor: pointer; list-style: none;
  font-size: var(--stax-fs-sm); font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase;
}
.tx-folder > summary::-webkit-details-marker { display: none; }
.tx-section-mark { display: grid; width: 30px; height: 30px; flex: 0 0 30px; place-items: center; border-radius: 8px; border: 1px solid var(--stax-border); background: var(--stax-surface-2); color: var(--app-accent, var(--stax-gold)); }
.tx-section-mark svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
@supports (color: color-mix(in srgb, red, white)) {
  .tx-section-mark { background: color-mix(in srgb, var(--app-accent, var(--stax-gold)) 14%, var(--stax-surface-2)); border-color: color-mix(in srgb, var(--app-accent, var(--stax-gold)) 28%, var(--stax-border)); }
}
.tx-folder > summary .tx-suite-label { font-size: inherit; }
.tx-folder > summary:hover, .tx-folder > summary:focus-visible { background: var(--stax-surface-2); color: var(--stax-text); }
.tx-folder > summary:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
.tx-folder-badge { position: static; margin-inline-start: auto; }
.tx-folder-caret { margin-inline-start: auto; transition: transform 140ms ease; }
.tx-folder-badge:not([hidden]) + .tx-folder-caret { margin-inline-start: var(--stax-space-2); }
.tx-folder-caret svg { display: block; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.tx-folder[open] .tx-folder-caret { transform: rotate(180deg); }
.tx-folder-apps { display: grid; gap: 2px; }
@media (prefers-reduced-motion: reduce) { .tx-folder-caret { transition: none; } }
.tx-workspace-section.active .tx-suite-icon { color: var(--app-accent); }
.tx-suite-app:focus-visible, .tx-workspace-section:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }

/* Drawer navigation stays finger-sized in short portrait and landscape views. */
.tx-stax-home, .tx-workspace-stax > button, .tx-stax-chat-group > button,
.tx-stax-recent button, .tx-workspace-team-detail > button,
.tx-workspace-team-detail summary, .tx-workspace-section-title,
.tx-workspace-panel-close { min-height: var(--app-target); }
.tx-workspace-panel-close { min-width: var(--app-target); }

/* Read failures share the Home header without crowding navigation. */
.tx-home-header:has(.tx-home-read-status:not([hidden])) { flex-wrap: wrap; }
.tx-home-read-status { order: 4; flex: 1 0 100%; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--stax-space-2); min-width: 0; color: var(--stax-text-dim); overflow-wrap: anywhere; }
.tx-home-read-status > span { min-width: 0; }
.tx-home-read-status > button { flex: 0 0 auto; }

/* PC-05A shares the existing viewport/keyboard owner; only the message history scrolls. */
.msg-conversation { min-width:0; overflow:hidden; }
.msg-conversation #msg-scroll { min-height:0; overscroll-behavior:contain; }
.msg-conversation .msg-composer { flex-shrink:0; padding-bottom:var(--app-safe-bottom,0px); }
.msg-conversation #msg-control { flex: 0 1 auto; max-block-size: min(24dvh, 10rem); min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.msg-thread-head { display: flex; flex: 0 0 auto; align-items: center; gap: 9px; min-width: 0; padding: 8px 10px; border-bottom: 1px solid var(--stax-border); }
.msg-thread-back, .msg-thread-archive { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; border-radius: var(--stax-radius); background: var(--stax-surface); cursor: pointer; }
.msg-thread-back { border: 1px solid var(--stax-border); color: var(--stax-text); }
/* Archive is reversible: a quiet archive mark, not a red close/delete "x". */
.msg-thread-archive { border: 1px solid var(--stax-border); background: transparent; color: var(--stax-text-dim); }
.msg-thread-archive svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.msg-thread-archive[hidden] { display: none; }
.msg-thread-identity { display: grid; flex: 1 1 auto; min-width: 0; gap: 2px; }
.msg-thread-identity strong { overflow: hidden; color: var(--stax-text); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.msg-thread-identity small { overflow: hidden; color: var(--stax-text-dim); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.msg-detail-mode { min-width: 0; margin-inline-start: auto; overflow: hidden; }
.msg-detail-mode .stax-chip { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-conversation #msg-compose-body[hidden] { display:none; }
.msg-conversation #msg-compose-toggle { display:block; width:100%; min-height:44px; border:0; border-radius:0; padding:8px 14px; background:var(--stax-surface); color:var(--stax-text); text-align:left; font:inherit; font-weight:700; }
.msg-conversation select, .msg-inbox-list select, .msg-inbox-list input { max-width:100%; min-width:0; min-height:44px; border:1px solid var(--stax-border); border-radius:8px; padding:6px 8px; background:var(--stax-surface); color:var(--stax-text); }
.msg-conversation label { min-width:0; max-width:100%; }
.msg-conversation #msg-reply-channel { display:block; width:100%; text-overflow:ellipsis; }
.msg-inbox-list button, .msg-conversation button { min-height:44px; }
/* Recovery is a visible part of the existing conversation, using its controls. */
.msg-conversation .msg-recovery { display:grid; gap:8px; min-width:0; padding:10px; border:1px solid var(--stax-border); border-radius:10px; background:var(--stax-surface-2); color:var(--stax-text-dim); font-size:12px; line-height:1.45; }
.msg-conversation .msg-recovery-title { color:var(--stax-text); font-size:12px; }
.msg-conversation .msg-recovery p { margin:0; }
.msg-conversation .msg-recovery [data-reconcile-status]:empty { display:none; }
.msg-conversation .msg-recovery-field { display:grid; gap:4px; font-size:11px; font-weight:700; }
.msg-conversation .msg-recovery input { width:100%; min-width:0; min-height:44px; box-sizing:border-box; padding:8px 10px; border:1px solid var(--stax-border); border-radius:8px; background:var(--stax-surface); color:var(--stax-text); font:inherit; font-size:16px; }
.msg-conversation .msg-recovery-actions { display:flex; flex-wrap:wrap; gap:8px; }
.msg-conversation .msg-recovery-actions button { flex:1 1 140px; min-height:44px; padding:8px 10px; border:1px solid var(--stax-border); border-radius:8px; background:var(--stax-surface); color:var(--stax-text); font:inherit; font-size:12px; font-weight:700; cursor:pointer; }
.msg-conversation .msg-recovery-actions .cl-btn-primary { border-color:var(--stax-gold); background:var(--stax-gold); color:var(--stax-on-gold); }
.msg-conversation .msg-recovery :is(input,button):focus-visible { outline:2px solid var(--stax-focus); outline-offset:2px; }
.msg-conversation .msg-recovery-actions button:disabled { opacity:.6; cursor:wait; }
@media(max-width:640px) {
  .msg-thread-head { gap: 7px; padding-inline: 8px; }
  .msg-thread-head > .stax-chip { max-width: 34%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .msg-conversation #msg-input { font-size:16px !important; min-height:60px !important; max-height:120px; }
}
/* The shared Inbox timeline owns scrolling; its outer pane must not grow
   with the message history and push the composer below the viewport. */
.cb[data-owner-app="inbox"] .cb-msgs { display:flex; flex-direction:column; overflow:hidden; padding:0; }
.cb[data-owner-app="inbox"] .cb-msgs > div { flex:1 1 0; min-height:0; }
@media (max-width:600px) and (max-height:600px) {
  .msg-conversation #msg-scroll { padding-block:0 !important; }
  .msg-conversation #msg-input { height:60px; }
}

/* ── Attention chips ─────────────────────────────────────────────────────
   A quiet strip resting immediately above the composer, empty whenever
   nothing is waiting. These are a VIEW of durable rows — handoffs, Team work
   items, pending proposals — so dismissing one hides it here and resolves
   nothing: the row stays in Needs you until the work is actually done. That
   is why dismiss is a separate, small control and never the whole chip. */
.tx-attention-chips {
  display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  padding: 0 var(--stax-space-3) 6px; margin: 0;
  scrollbar-width: none;
}
.tx-attention-chips::-webkit-scrollbar { display: none; }
.tx-attention-chip {
  display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  max-width: min(78vw, 320px); min-height: 34px;
  padding: 5px 6px 5px 9px;
  border: 1px solid var(--stax-border); border-radius: var(--stax-radius-pill, 999px);
  background: var(--stax-surface); color: var(--stax-text-dim);
  font-size: var(--stax-fs-xs); text-align: start; cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.tx-attention-chip:hover, .tx-attention-chip:focus-visible {
  background: var(--stax-surface-2); color: var(--stax-text); border-color: var(--stax-text-faint, var(--stax-muted));
}
.tx-attention-chip-mark { display: grid; width: 20px; height: 20px; flex: 0 0 20px; place-items: center; border-radius: 6px; background: var(--chip-accent-soft, var(--stax-surface-2)); color: var(--chip-accent, var(--stax-gold)); }
.tx-attention-chip-mark svg { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.tx-attention-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-attention-chip-dismiss {
  display: grid; width: 24px; height: 24px; flex: 0 0 24px; place-items: center;
  border: 0; border-radius: 50%; background: transparent;
  color: var(--stax-text-faint, var(--stax-muted)); cursor: pointer; font-size: 15px; line-height: 1;
}
.tx-attention-chip-dismiss:hover, .tx-attention-chip-dismiss:focus-visible { background: var(--stax-surface-3, var(--stax-surface-2)); color: var(--stax-text); }

/* Autonomy: one setting, three modes, in the artist's language. */
.tx-team-bot-autonomy { display: grid; gap: 6px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); }
.tx-team-bot-autonomy label { display: grid; gap: 4px; font-size: var(--stax-fs-xs); color: var(--stax-text-dim); }
.tx-team-bot-autonomy select { min-height: var(--app-target); padding: 6px 10px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface); color: var(--stax-text); font-size: var(--stax-fs-sm); }
.tx-team-bot-autonomy p { margin: 0; font-size: var(--stax-fs-xs); color: var(--stax-text-faint, var(--stax-muted)); line-height: 1.45; }

/* R1.1: keep the existing ink/gold language and readable customer controls. */
:is(.msg-conversation, .msg-inbox-list) .cl-btn { color: var(--stax-text); background: var(--stax-surface-2); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); min-height: 44px; padding: 6px 14px; cursor: pointer; }
:is(.msg-conversation, .msg-inbox-list) .cl-btn:disabled { opacity: .55; cursor: default; }
:is(.msg-conversation, .msg-inbox-list) :is(button,select,textarea,input):focus-visible { outline: 2px solid var(--stax-gold) !important; outline-offset: 2px; }
.msg-conversation #msg-reply-channel { max-width: 100%; }
@media (max-width: 600px) {
  .msg-thread-head { flex-wrap: nowrap; }
}

/* A saved conversation is the main screen. Home keeps only its compact
   identity row (with the Needs-you entry and the status panel when opened);
   the quiet start and the complete work list fold away instead of sharing
   the viewport as an independently scrolling strip. Opening Needs you folds
   the conversation (chat-collapsed) and Home takes the viewport again, so
   neither surface ever needs a fixed share of the height. */
#tx-workspace-main:has(> #tx-home):has(> #tx-workspace-chat.chat-has-history:not(.chat-collapsed)) > #tx-home {
  flex: 0 1 auto;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding-block-end: 0;
}
#tx-workspace-main:has(> #tx-home):has(> #tx-workspace-chat.chat-has-history:not(.chat-collapsed)) > #tx-home .tx-stax-start { display: none; }
#tx-workspace-main:has(> #tx-home) > #tx-workspace-chat.chat-has-history,
#tx-workspace-main:has(> #tx-home) > #tx-workspace-chat:not(.chat-collapsed):has(#tx-workspace-chat-failure:not([hidden])) {
  position: relative;
  inset: auto;
  transform: none;
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
  margin: 8px auto calc(12px + var(--tx-bottom-reserve) + var(--tx-keyboard-inset, 0px));
}
/* Folded away (Needs you or Hide assistant): only its one-line head stays,
   at its own height, and Home has the rest of the column. */
#tx-workspace-main:has(> #tx-home) > #tx-workspace-chat.chat-has-history.chat-collapsed { flex: 0 0 auto; }
#tx-workspace-main:has(> #tx-home):has(> #tx-workspace-chat.chat-has-history.chat-collapsed) > #tx-home { flex: 1 1 0; min-height: 0; padding-block-end: 0; }

/* A failure without saved messages needs only its notice and composer height. */
#tx-workspace-main:has(> #tx-home):has(> #tx-workspace-chat:not(.chat-has-history):not(.chat-collapsed) #tx-workspace-chat-failure:not([hidden])) > #tx-home {
  flex: 1 1 0;
  min-height: 0;
  max-height: none;
}
#tx-workspace-main:has(> #tx-home) > #tx-workspace-chat:not(.chat-has-history):not(.chat-collapsed):has(#tx-workspace-chat-failure:not([hidden])) {
  flex: 0 0 auto;
  max-height: min(65dvh, 420px);
}

/* Beta 1: five phone destinations. The bar is the primary navigation below
   64rem (the router's and the drawer's line) and hidden at 64rem and up,
   where the drawer is. It stays in apps and leaves while the keyboard is
   open. --tx-bottom-reserve is what every bottom-anchored surface clears:
   the safe area alone, or the bar (which then owns the safe area). */
#tx-shell { --tx-primary-bar-height: 56px; --tx-bottom-reserve: var(--app-safe-bottom); }
@media (max-width: 63.999rem) {
  #tx-shell:not(.app-keyboard-open):not(.tx-workspace-legacy) { --tx-bottom-reserve: calc(var(--tx-primary-bar-height) + var(--app-safe-bottom)); }
  /* One bottom dock: a focused artifact's own dock replaces the hub items
     (Stax stays slot 1 in both). Where a dock shows, its Stax item is the
     only Stax launcher, so the header Ask Stax is not shown. */
  #tx-shell.tx-focused-dock #tx-mobile-nav { display: none; }
  #tx-shell.tx-focused-dock:not(.app-keyboard-open):not(.tx-workspace-legacy) { --tx-bottom-reserve: var(--app-safe-bottom); }
  #tx-mobile-nav { position: fixed; inset: auto 0 0; z-index: var(--z-app-rail); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(var(--tx-primary-bar-height) + var(--app-safe-bottom)); padding-block-end: var(--app-safe-bottom); border-block-start: 1px solid var(--stax-border); background: var(--stax-surface); }
  #tx-shell:not(.app-keyboard-open):not(.tx-workspace-legacy) #tx-app-view { padding-block-end: var(--tx-bottom-reserve); }
  /* The bar owns the safe area, so app composers do not pad it again. */
  #tx-shell:not(.app-keyboard-open):not(.tx-workspace-legacy) .msg-conversation .msg-composer { padding-bottom: 0; }
  .app-keyboard-open #tx-mobile-nav { display: none; }
}
.tx-primary-tab { position: relative; display: flex; min-width: 0; min-height: var(--tx-primary-bar-height); flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; border: 0; background: transparent; color: var(--stax-text-dim); font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; }
.tx-primary-icon { display: grid; width: 24px; height: 24px; place-items: center; }
.tx-primary-icon svg { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.tx-primary-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-primary-tab.active { color: var(--stax-text); font-weight: 800; }
.tx-primary-tab.active .tx-primary-icon { color: var(--app-accent, var(--stax-text)); }
/* Stax is slot 1 in every dock and keeps its identity colour in every state,
   as in the focused docks; selection is shown by weight and the edge. */
.tx-primary-tab[data-primary-tab="stax"] .tx-primary-icon { color: var(--stax-accent-stax); }
.tx-primary-tab.active::before { content: ''; position: absolute; inset: 0 30% auto; height: 3px; border-radius: 0 0 3px 3px; background: var(--app-accent, var(--stax-text)); }
.tx-primary-tab:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: -4px; border-radius: var(--stax-radius); }
.tx-primary-badge { position: absolute; inset-block-start: 4px; inset-inline-start: calc(50% + 6px); inset-inline-end: auto; }

/* Beta 1: Stax beside an app. The one composer is re-hosted: a sidecar on the
   right at 64rem and up, a bottom sheet above the bar below it. The app stays
   open and usable. The container selector carries five ids so it outranks
   every history-mode and failure layout rule without !important. */
.tx-ask-stax { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: var(--app-target); padding: 0 12px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); font: inherit; font-size: var(--stax-fs-sm); font-weight: 700; cursor: pointer; }
.tx-ask-stax[hidden] { display: none; }
.tx-ask-stax svg { width: 18px; height: 18px; color: var(--stax-agent); }
.tx-ask-stax.active { border-color: color-mix(in srgb, var(--stax-agent) 55%, var(--stax-border)); background: color-mix(in srgb, var(--stax-agent) 14%, var(--stax-surface)); }
.tx-ask-stax:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
body.tx-stax-sidecar #tx-shell #tx-workspace-main:has(> #tx-app-view) > #tx-workspace-chat:is(#tx-workspace-chat) {
  position: absolute; z-index: 35; display: flex; flex-direction: column; transform: none; max-height: none; margin: 0; overflow: hidden;
  padding: 10px 12px 12px; border: 1px solid var(--stax-border); background: var(--stax-surface); box-shadow: var(--stax-shadow-float);
}
body.tx-stax-sidecar #tx-workspace-chat:is(#tx-workspace-chat) #tx-workspace-chat-reply { min-height: 0; max-height: none; flex: 1 1 0; align-content: start; }
body.tx-stax-sidecar #tx-workspace-chat:is(#tx-workspace-chat) #tx-workspace-chat-body { min-height: 0; flex: 1 1 0; }
body.tx-stax-sidecar #tx-workspace-chat:is(#tx-workspace-chat) #tx-workspace-chat-form { margin-block-start: auto; }
/* The sidecar always shows who Stax is acting for and its close control. */
body.tx-stax-sidecar #tx-workspace-chat:is(#tx-workspace-chat) #tx-workspace-chat-head { display: flex; flex: 0 0 auto; }
body.tx-stax-sidecar #tx-workspace-chat:is(#tx-workspace-chat) :is(#tx-workspace-chat-head, #tx-workspace-chat-pin, #tx-workspace-chat-body, #tx-workspace-chat-form, #tx-workspace-chat-reply) { width: 100%; }
@media (min-width: 64rem) {
  #tx-shell { --tx-sidecar-width: min(420px, 38vw); }
  /* Owner rule (2026-10-08): an overlay card above the app; the app keeps its
     width (no reflow), is dimmed by the backdrop and is inert. */
  body.tx-stax-sidecar #tx-shell #tx-workspace-main:has(> #tx-app-view) > #tx-workspace-chat:is(#tx-workspace-chat) { z-index: 46; inset: 12px 12px 12px auto; width: var(--tx-sidecar-width); border-radius: var(--stax-radius-lg, 14px); }
  body.tx-stax-sidecar #tx-workspace-main > #tx-app-view:is(#tx-app-view) { padding-block-end: 0; }
}
@media (max-width: 63.999rem) {
  body.tx-stax-sidecar #tx-shell #tx-workspace-main:has(> #tx-app-view) > #tx-workspace-chat:is(#tx-workspace-chat) {
    /* The sheet covers the bottom dock (global or local) while open; the dock
       is inert behind it, and the keyboard pushes the sheet up. */
    position: fixed; z-index: 46; inset: auto 0 calc(var(--app-safe-bottom, 0px) + var(--tx-keyboard-inset, 0px)) 0; width: 100%;
    height: min(78dvh, calc(100dvh - var(--app-safe-bottom, 0px) - var(--tx-keyboard-inset, 0px) - 56px)); border-inline: 0; border-block-end: 0; border-radius: 16px 16px 0 0;
  }
  .tx-ask-stax span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tx-ask-stax { padding: 0; width: var(--app-target); justify-content: center; }
}

/* Contextual Stax backdrop: restrained dimming over the inert app (and the
   bottom dock on a phone); a click closes the overlay. */
#tx-stax-backdrop { position: fixed; inset: 0; z-index: 45; border: 0; padding: 0; background: var(--stax-overlay, rgba(12, 12, 14, 0.42)); cursor: default; }
#tx-stax-backdrop[hidden] { display: none; }

/* Beta 1: the global Work panel and transition alerts. The alert sits under
   the header, never over a composer, the sidecar input or the phone bar. */
.tx-work-panel { display: grid; gap: var(--stax-space-3); min-width: 0; }
.tx-work-panel-foot { display: flex; justify-content: flex-end; padding-block-start: var(--stax-space-3); }
.tx-work-panel-open { min-height: var(--app-target); padding: 0 16px; border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); font: inherit; font-weight: 700; cursor: pointer; }
.tx-work-alert { position: fixed; z-index: 60; inset-block-start: calc(env(safe-area-inset-top, 0px) + 72px); inset-inline-end: 16px; display: flex; max-width: min(420px, calc(100vw - 32px)); align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border: 1px solid var(--stax-border); border-inline-start: 4px solid var(--stax-identity-amber); border-radius: var(--stax-radius); background: var(--stax-surface); color: var(--stax-text); box-shadow: var(--stax-shadow-float); font-size: var(--stax-fs-sm); }
.tx-work-alert[hidden] { display: none; }
.tx-work-alert[data-bucket="failed"] { border-inline-start-color: var(--stax-danger); }
.tx-work-alert[data-bucket="paused"] { border-inline-start-color: var(--stax-text-dim); }
.tx-work-alert > [data-work-alert-text] { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.tx-work-alert button { min-height: var(--app-target); min-width: var(--app-target); border: 1px solid var(--stax-border); border-radius: var(--stax-radius); background: var(--stax-surface-2); color: var(--stax-text); font: inherit; font-weight: 700; cursor: pointer; }
/* Apps is the sole launcher. The rail contains agent context and hub rows. */
.tx-workspace-hub { display: grid; gap: 4px; padding: 12px 0; border-top: 1px solid var(--stax-border, #70707040); }
.tx-hub-row { display: flex; align-items: center; gap: 12px; min-height: 44px; border: 0; border-radius: 10px; padding: 8px 12px; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.tx-hub-row svg { width: 22px; height: 22px; }
.tx-hub-row:hover, .tx-hub-row.active { background: var(--stax-surface-hover, #88888818); }
@media (max-width: 63.999rem) { .tx-workspace-hub { display: none; } }
.apps-desktop { min-height: 100%; padding: 20px; color: var(--stax-text, inherit); background: var(--stax-surface, transparent); }
.apps-desktop[data-wallpaper="sage"] { background: color-mix(in srgb, var(--stax-surface, #202729) 88%, #749477); }
.apps-desktop[data-wallpaper="night"] { background: color-mix(in srgb, var(--stax-surface, #202729) 88%, #365276); }
.apps-desktop-head { display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
.apps-desktop-head > div { flex: 1; }
.apps-desktop-head h2 { margin: 0; font-size: 24px; }
.apps-desktop-head p { margin: 5px 0 0; font-size: 13px; opacity: .75; }
.apps-desktop-widgets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.apps-desktop-widgets button { display: grid; gap: 9px; min-height: 86px; border: 1px solid var(--stax-border, #88888840); border-radius: 16px; background: var(--stax-surface-2, #88888812); color: inherit; text-align: left; padding: 14px; cursor: pointer; }
.apps-desktop-widgets span { font-size: 12px; line-height: 1.5; }
.apps-desktop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 18px 8px; max-width: 820px; list-style: none; padding: 0; margin: 20px 0 0; }
.apps-desktop-tile { position: relative; min-width: 0; text-align: center; }
.apps-desktop-open { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 8px 2px; border-radius: 12px; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
.apps-desktop-icon { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 17px; background: var(--stax-surface-2, #88888818); }
.apps-desktop-icon svg { width: 48px; height: 48px; }
.apps-desktop-label { font-size: 12px; line-height: 1.4; min-height: 34px; max-width: 100%; overflow-wrap: anywhere; }
.apps-desktop-dot { position: absolute; bottom: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #81868b; box-shadow: 0 0 0 2px var(--stax-surface, #fff); }
.apps-desktop-dot[data-level="ready"] { background: #43815e; }
.apps-desktop-dot[data-level="setup"], .apps-desktop-dot[data-level="unknown"] { background: #ba812b; }
.apps-desktop-dot[data-level="available"] { display: none; }
.apps-desktop-options { position: absolute; right: 0; top: -6px; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: inherit; cursor: pointer; font-size: 15px; }
.apps-desktop-state { display: block; font-size: 10px; line-height: 1.3; opacity: .75; }
.apps-desktop-state:empty { visibility: hidden; }
.apps-desktop-notice { font-size: 13px; line-height: 1.5; }
.apps-desktop-sheet { max-width: min(440px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid var(--stax-border, #88888840); border-radius: 18px; padding: 20px; background: var(--stax-surface, #202729); color: var(--stax-text, #eee); }
.apps-desktop-sheet::backdrop { background: #0005; }
.apps-desktop-sheet header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.apps-desktop-sheet h3 { flex: 1; margin: 0; font-size: 18px; }
.apps-desktop-sheet p { font-size: 13px; line-height: 1.6; }
.apps-desktop-sheet label { display: grid; gap: 8px; margin: 14px 0; }
.apps-desktop-sheet input { min-height: 44px; width: 100%; border-radius: 8px; padding: 10px; color: inherit; background: var(--stax-surface-2, #88888818); border: 1px solid var(--stax-border, #88888850); }
.apps-desktop-menu { position: fixed; margin: 0; width: 260px; }
.apps-desktop-menu [role="menu"] { display: grid; }
.apps-desktop-menu [role="menuitem"] { min-height: 44px; padding: 10px; border: 0; border-radius: 8px; color: inherit; background: transparent; text-align: left; cursor: pointer; }
.apps-desktop-menu [role="menuitem"]:focus, .apps-desktop-menu [role="menuitem"]:hover { background: var(--stax-surface-2, #88888820); }
.apps-desktop-picker { display: grid; gap: 8px; margin: 16px 0; }
.apps-desktop-arrange { list-style: none; padding: 0; }
.apps-desktop-arrange li { display: flex; gap: 8px; align-items: center; margin: 8px 0; }
.apps-desktop-arrange li span { flex: 1; }
.apps-desktop :focus-visible, .apps-desktop-sheet :focus-visible { outline: 2px solid var(--stax-accent-work, #bf8d36); outline-offset: 3px; }
#tx-suite-sheet-panel.tx-profile-panel .tx-profile-tabs { order: 3; flex-shrink: 0; border-radius: 14px; padding-bottom: max(4px, env(safe-area-inset-bottom)); }
#tx-suite-sheet-panel.tx-profile-panel .tx-profile-body { order: 2; }
#tx-suite-sheet-panel.tx-profile-panel .tx-profile-head { order: 1; }
.tx-home-profile img { display: block; }
.tx-profile-body .sc-page { padding: 12px 0; }
.tx-profile-body .sc-metrics { grid-template-columns: 1fr; }

/* Abilities lives in a narrow profile sheet even on desktop viewports. */
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-page { min-width: 0; max-width: 100%; }
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-title-row,
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-callout,
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-search { flex-direction: column; align-items: stretch; }
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-title-row > *,
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-callout > *,
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-search > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-callout span { flex: 0 1 auto; }
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-row { flex-wrap: wrap; align-items: flex-start; }
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-row > div { flex: 1 1 100%; }
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-status,
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-tag,
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-count { min-width: 0; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
#tx-profile-body[aria-labelledby="tx-profile-tab-abilities"] .sc-search input { min-width: 0; box-sizing: border-box; }

@media (max-width: 420px) { .apps-desktop { padding: 16px; } .apps-desktop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 350px) { .apps-desktop-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.apps-desktop-photo { background-size: cover; background-position: center; background-attachment: local; }
.apps-desktop-photo .apps-desktop-label, .apps-desktop-photo .apps-desktop-state { border-radius: 6px; background: var(--stax-surface); padding: 3px; }
.apps-desktop-photo .apps-desktop-head { padding: 8px; border-radius: 12px; background: var(--stax-surface); }
.apps-desktop-upload { display: grid; gap: 8px; margin-block: 16px; }
.apps-desktop-upload input { max-width: 100%; min-height: 44px; }

[data-agent-avatar] { transform-origin: 50% 80%; }
@media (prefers-reduced-motion: no-preference) {
  [data-agent-avatar][data-state="idle"] { animation: stax-avatar-breathe 4.8s ease-in-out infinite; }
  [data-agent-avatar][data-state="working"] { animation: stax-avatar-work 1.6s ease-in-out infinite; }
  [data-agent-avatar][data-state="waiting"] { animation: stax-avatar-breathe 3.6s ease-in-out infinite; }
}
[data-agent-avatar][data-state="needs"] { filter: drop-shadow(0 0 3px var(--stax-warning)); }
[data-agent-avatar][data-state="failed"] { filter: drop-shadow(0 0 3px var(--stax-danger)); }
[data-agent-avatar][data-state="paused"] { opacity: .7; }
@keyframes stax-avatar-breathe { 50% { transform: translateY(-2px); } }
@keyframes stax-avatar-work { 50% { transform: translateY(-2px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { [data-agent-avatar] { animation: none; } }

/* Stax is working in the background (customer texts being answered). */
:root[data-agent-working] #tx-panel-btn,
:root[data-agent-working] .tx-hub-row[data-primary-tab="work"] { position: relative; }
:root[data-agent-working] #tx-panel-btn::after,
:root[data-agent-working] .tx-hub-row[data-primary-tab="work"]::after {
  content: ""; position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--stax-gold, #c9a227); animation: stax-working-dot 1.2s ease-in-out infinite;
}
@keyframes stax-working-dot { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  :root[data-agent-working] #tx-panel-btn::after,
  :root[data-agent-working] .tx-hub-row[data-primary-tab="work"]::after { animation: none; opacity: 1; }
}

/* Inbox texts read like a phone's messages app (Owner 2026-10-17): the
   studio's messages on the right, the customer's on the left, quiet labels,
   rounded photos. Layout and controls are unchanged. */
.msg-conversation .stax-conversation-message--end { justify-items: end; }
.msg-conversation .stax-conversation-message--end > header { flex-direction: row-reverse; }
.msg-conversation .stax-conversation-message--end > header time { margin-inline-start: 0; margin-inline-end: auto; }
.msg-conversation .stax-conversation-message--end > p {
  justify-self: end; max-width: min(80%, 34rem); border-radius: 18px 18px 4px 18px; padding: 9px 13px;
  background: var(--stax-gold-soft);
}
.msg-conversation .stax-conversation-message--customer > p { border-radius: 18px 18px 18px 4px; padding: 9px 13px; max-width: min(80%, 34rem); }
.msg-conversation .stax-conversation-message > header strong { text-transform: none; font-weight: 600; font-size: 11px; }
.msg-conversation .stax-conversation-message > header .stax-conversation-avatar { display: none; }
.msg-conversation .msg-attachments img { border-radius: 14px; max-width: min(240px, 70vw); height: auto; }
.msg-conversation .msg-bubble--draft > p { background: transparent; }

/* Messenger: familiar phone-first conversation affordances. */
.msg-inbox-tools { display:flex; flex-wrap:wrap; gap:8px; padding:12px; align-items:center; }
.msg-inbox-list .msg-inbox-tools .msg-new-button { order:-1; min-height:44px; border-color:var(--stax-gold); background:var(--stax-gold); color:var(--stax-on-gold); font-weight:750; }
.msg-new-form { display:grid; gap:7px; margin:0 12px 12px; padding:12px; border:1px solid var(--stax-border); border-radius:12px; background:var(--stax-surface-2); }
.msg-new-form[hidden] { display:none; }
.msg-new-form label { color:var(--stax-text); font-size:12px; font-weight:750; }
.msg-new-form > div { display:flex; flex-wrap:wrap; gap:8px; }
.msg-new-form input { flex:1 1 180px; min-width:0; min-height:44px; box-sizing:border-box; font-size:16px; }
.msg-new-form p { margin:0; color:var(--stax-text-dim); font-size:12px; line-height:1.4; }
.msg-thread-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:11px; width:100%; min-height:72px; padding:12px 14px; border:0; border-bottom:1px solid var(--stax-border); background:transparent; color:var(--stax-text); text-align:left; cursor:pointer; }
.msg-thread-row:hover { background:color-mix(in srgb,var(--stax-gold) 7%,transparent); }
.msg-thread-avatar { display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:color-mix(in srgb,var(--stax-gold) 18%,var(--stax-surface-2)); color:var(--stax-text); border:1px solid color-mix(in srgb,var(--stax-gold) 35%,var(--stax-border)); font-size:13px; font-weight:800; letter-spacing:.02em; }
.msg-thread-copy { min-width:0; display:grid; gap:2px; }
.msg-thread-copy strong,.msg-thread-snippet { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-thread-snippet { color:var(--stax-text); font-size:13px; }
.msg-thread-copy small,.msg-thread-meta small { color:var(--stax-text-dim); font-size:11px; }
.msg-thread-meta { display:grid; justify-items:end; align-self:stretch; gap:6px; min-width:58px; }
.msg-day-separator { display:flex; align-items:center; gap:10px; margin:13px 14px 9px; color:var(--stax-text-dim); font-size:11px; font-weight:700; }
.msg-day-separator::before,.msg-day-separator::after { content:""; height:1px; flex:1; background:var(--stax-border); }
.msg-day-separator span { white-space:nowrap; }
.msg-delivery-mark { display:flex; justify-content:flex-end; align-items:center; gap:3px; margin:3px 2px 0; color:var(--stax-text-dim); font-size:11px; font-weight:700; }
.msg-delivery-mark--queued { color:var(--stax-text-dim); }
.msg-delivery-mark--delivered { color:var(--stax-success,#4fa878); }
.msg-delivery-mark--failed { color:var(--stax-danger); }
@media (max-width:640px) {
  .msg-inbox-tools { padding:10px; }
  .msg-new-button { flex:1 0 100%; }
  .msg-new-form { margin-inline:10px; }
  .msg-new-form > div > button { flex:1 0 100%; }
  .msg-thread-row { grid-template-columns:40px minmax(0,1fr) auto; gap:9px; padding:11px 10px; }
  .msg-thread-avatar { width:38px; height:38px; }
  .msg-thread-meta { min-width:48px; }
  .msg-delivery-mark span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
}

/* Compact agent Memory header. Person profiles keep their identity layout. */
.tx-profile-head.tx-profile-head--compact { display:grid; grid-template-columns:32px minmax(0,1fr) 32px; gap:2px 10px; align-items:center; padding:14px 16px; text-align:left; }
.tx-profile-head--compact .tx-profile-avatar { grid-column:1; grid-row:1 / 3; width:32px; height:32px; margin:0; }
.tx-profile-head--compact .tx-profile-avatar img { width:32px; height:32px; }
.tx-profile-head--compact .tx-profile-name { grid-column:2; grid-row:1; margin:0; font-size:16px; line-height:1.3; }
.tx-profile-head--compact .tx-profile-kind { grid-column:2; grid-row:2; margin:0; font-size:12px; line-height:1.3; }
.tx-profile-head--compact .tx-profile-close { position:static; grid-column:3; grid-row:1 / 3; align-self:center; }

/* Owner 2026-10-19 (Muse-style main feed): once a conversation exists the
   chat owns the screen. The Stax avatar floats small at the top over the
   feed (tap it for Memory/activity) instead of taking a block of the screen,
   and the conversation is the one scroll area. */
/* In flow, not absolute: an absolutely placed avatar sat under the sticky
   header (its stacking context is the header's sibling) and the feed scrolled
   beneath it. A slim row keeps it small and visible and never covers text. */
#tx-workspace-main:has(> #tx-home):has(> #tx-workspace-chat.chat-has-history:not(.chat-collapsed)) > #tx-home {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}
#tx-workspace-main:has(> #tx-workspace-chat.chat-has-history:not(.chat-collapsed)) .tx-stax-identity {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 0 4px;
  transform: none;
}
#tx-workspace-main:has(> #tx-workspace-chat.chat-has-history:not(.chat-collapsed)) .tx-stax-mark {
  width: 52px;
  height: 52px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: var(--stax-shadow-float);
}
#tx-workspace-main:has(> #tx-workspace-chat.chat-has-history:not(.chat-collapsed)) .tx-stax-reply-mode {
  margin-top: 0;
  border-radius: var(--stax-radius-pill);
  padding: 1px 8px;
  background: var(--stax-surface);
  font-size: 11px;
  white-space: nowrap;
}
#tx-workspace-main:has(> #tx-workspace-chat.chat-has-history:not(.chat-collapsed)) #tx-workspace-chat-reply {
  max-height: none;
  min-height: 0;
  flex: 1 1 0;
}
#tx-workspace-main:has(> #tx-workspace-chat.chat-has-history:not(.chat-collapsed)) > #tx-workspace-chat { margin-block-start: 0; }
#tx-workspace-chat-pin { min-height: 32px; padding-block: 2px; }

/* First-run: one tap starts Stax on setup; gone once a conversation exists. */
.tx-stax-setup-start { margin-top: var(--stax-space-3); }
#tx-workspace-main:has(> #tx-workspace-chat.chat-has-history) .tx-stax-setup-start { display: none; }

/* Owner 2026-10-20: the Inbox thread composer reads like a phone's texting
   app: + for a photo, a one-line growing box, a round Send; everything else
   sits behind "More". Labels stay quiet; only the newest delivery mark shows. */
.msg-compose-row { display: flex; align-items: flex-end; gap: 8px; }
.msg-compose-row #msg-input, .msg-compose-row #msg-public-input { flex: 1 1 auto; min-width: 0; min-height: 44px; max-height: 40dvh; box-sizing: border-box; resize: none; border: 1px solid var(--stax-border); border-radius: 22px; padding: 11px 14px; background: var(--stax-surface-2); color: var(--stax-text); font: inherit; font-size: 16px; line-height: 1.35; outline: none; field-sizing: content; }
.msg-compose-row #msg-input:focus-visible, .msg-compose-row #msg-public-input:focus-visible { border-color: var(--stax-gold); }
.msg-compose-icon { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border-radius: 50%; border: 1px solid var(--stax-border); background: var(--stax-surface-2); color: var(--stax-text); font-size: 20px; cursor: pointer; }
.msg-compose-send { flex: 0 0 auto; min-height: 44px; padding: 0 18px; border-radius: var(--stax-radius-pill); border: 1px solid var(--stax-gold); background: var(--stax-gold); color: var(--stax-on-gold); font: inherit; font-weight: 750; cursor: pointer; }
.msg-compose-send:disabled { border-color: var(--stax-border); background: var(--stax-surface-2); color: var(--stax-text-dim); cursor: not-allowed; }
.msg-conversation .stax-conversation-message--customer > header strong { display: none; }
.msg-conversation #msg-timeline .stax-conversation-message:not(:last-child) .msg-delivery-mark--delivered { display: none; }

/* Owner 2026-10-21: a conversation opens like a phone texting thread. Slim
   header, the timeline owns all remaining height, a one-line composer, then
   the conversation's tab bar (its focused dock: Stax first). A tab opens one
   bottom sheet between the composer and the bar; nothing is stacked above or
   under the messages. */
.msg-thread-view { position: relative; height: 100%; min-height: 0; }
.msg-thread-view > #msg-scroll, .msg-thread-view > .msg-thread-scroll { flex: 1 1 0; min-height: 0; }
.msg-thread-view > .msg-composer { flex: 0 0 auto; }
.msg-thread-view > .msg-composer { padding-bottom: 0; }
.msg-thread-view > .msg-public-composer { padding-bottom: 8px; }
.msg-conversation .msg-draft-status { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.35; }
.msg-thread-tabs { flex: 0 0 auto; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-height: 56px; }
.msg-thread-tab { position: relative; min-height: 48px; }
.msg-thread-tab .app-dock-icon { position: relative; }
.msg-thread-tab .app-dock-icon svg { width: 20px; height: 20px; }
.msg-tab-badge { position: absolute; inset-block-start: -3px; inset-inline-end: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--stax-gold); box-shadow: 0 0 0 2px var(--stax-surface); }
.app-keyboard-open .msg-thread-tabs { display: none; }
.msg-thread-sheet { display: flex; flex: 0 1 auto; flex-direction: column; min-height: 0; max-block-size: 60dvh; border-top: 1px solid var(--stax-border); border-radius: 14px 14px 0 0; background: var(--stax-surface); box-shadow: 0 -10px 24px color-mix(in srgb, var(--stax-text) 10%, transparent); }
.msg-thread-sheet[hidden] { display: none; }
.msg-thread-panel { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; outline: none; }
.msg-thread-panel[hidden] { display: none; }
.msg-thread-panel-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 14px; border-bottom: 1px solid var(--stax-border); color: var(--stax-text); font-size: 13px; }
.msg-thread-panel-close { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--stax-text-dim); font-size: 22px; line-height: 1; cursor: pointer; }
.msg-thread-panel-close:hover { background: var(--stax-surface-2); color: var(--stax-text); }
.msg-thread-panel-close:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: -2px; }
.msg-thread-panel-body { display: grid; align-content: start; gap: 10px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 10px 12px 14px; }
.msg-thread-panel-body > section { border: 1px solid var(--stax-border); border-radius: 12px; background: var(--stax-surface-2); }
.msg-thread-panel-body .stax-conversation-note { margin: 0; }
.msg-thread-panel-body #msg-control { max-block-size: none; border: 1px solid var(--stax-border); border-radius: 12px; }
.msg-thread-panel-body .msg-draft-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.msg-thread-panel-body .msg-draft-actions .cl-btn { flex: 1 1 130px; }
.msg-stax-direct, .msg-stax-draft { display: grid; gap: 6px; }
.msg-stax-direct label { color: var(--stax-text); font-size: 12px; font-weight: 700; }
.msg-stax-direct textarea { width: 100%; min-height: 64px; box-sizing: border-box; resize: vertical; border: 1px solid var(--stax-border); border-radius: 10px; padding: 10px 12px; background: var(--stax-surface-2); color: var(--stax-text); font: inherit; font-size: 16px; }
.msg-panel-mode { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--stax-text-dim); font-size: 12px; }
.msg-panel-mode .msg-detail-mode { margin-inline-start: 0; }
.msg-panel-field { display: grid; gap: 4px; color: var(--stax-text-dim); font-size: 12px; }
.msg-contact-facts { display: grid; gap: 6px; margin: 0; }
.msg-contact-facts > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 8px; }
.msg-contact-facts dt { color: var(--stax-text-dim); font-size: 12px; }
.msg-contact-facts dd { margin: 0; overflow-wrap: anywhere; color: var(--stax-text); font-size: 13px; }
.msg-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.msg-photo-tile { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--stax-border); border-radius: 10px; background: var(--stax-surface-2); }
.msg-photo-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.msg-photo-tile:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
.msg-file-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.msg-stax-pill-row { display: flex; justify-content: center; padding: 10px 14px 4px; }
.msg-stax-pill { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid color-mix(in srgb, var(--stax-gold) 45%, var(--stax-border)); border-radius: var(--stax-radius-pill, 999px); background: color-mix(in srgb, var(--stax-gold) 10%, var(--stax-surface)); color: var(--stax-text); font: inherit; font-size: 12px; cursor: pointer; }
.msg-stax-pill:hover { background: color-mix(in srgb, var(--stax-gold) 18%, var(--stax-surface)); }
.msg-stax-pill:focus-visible { outline: 2px solid var(--stax-focus); outline-offset: 2px; }
.msg-stax-pill-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: var(--stax-gold); }
.msg-stax-pill-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-stax-pill-go { flex: 0 0 auto; font-weight: 800; }
.msg-stax-pill-go::before { content: '\00b7'; margin-inline-end: 6px; color: var(--stax-text-dim); font-weight: 400; }

/* Main feed front-desk card: today's customer texts, play-by-play. */
.tx-front-desk { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--tx-border, rgba(127,127,127,.25)); border-radius: 16px; background: var(--tx-surface, transparent); }
.tx-front-desk header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: .9rem; }
.tx-front-desk header button { border: 0; background: none; color: inherit; opacity: .7; font: inherit; font-size: .85rem; cursor: pointer; }
.tx-front-desk ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tx-front-desk-row { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; border: 0; border-radius: 10px; padding: 8px; background: none; color: inherit; font: inherit; cursor: pointer; }
.tx-front-desk-row:hover, .tx-front-desk-row:focus-visible, .tx-front-desk-row.is-focused { background: rgba(127,127,127,.12); }
.tx-front-desk-who { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-front-desk-meta { font-size: .8rem; opacity: .75; white-space: nowrap; }
.tx-front-desk-snippet { grid-column: 1 / -1; font-size: .88rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-front-desk-row[data-tone="needs"] .tx-front-desk-meta b { color: var(--tx-danger, #d14343); }

/* UI audit 2026-10-21: Forms ran edge to edge on phones (picker and New Form
   touching the screen edges); same side gutter as the other apps. */
@media (max-width: 760px) {
  #fm-card-body { padding-inline: 12px; box-sizing: border-box; }
}

/* UI audit 2026-10-21: the notifications notice ran edge to edge above Stax. */
#tx-phone-alert-enrollment { margin: 8px 12px 0; padding: 8px 12px; border: 1px solid var(--stax-border); border-radius: 12px; justify-content: flex-start; }
#tx-phone-alert-enrollment .tx-status-btn[hidden] { display: none; }

/* Owner 2026-10-21: an open conversation on a phone has one header, like
   Google Messages. The thread header (back, who, state) replaces the app bar;
   leaving the conversation brings the app bar back. */
@media (max-width: 760px) {
  #tx-shell:has(.msg-conversation, .msg-unlinked-view) #tx-app-bar { display: none; }
}

/* ink-stax / Google Messages list (2026-10-21): conversations first, status
   only when something is off, a person mark for unknown numbers, and on
   phones New message floats above the dock instead of a full-width bar. */
.msg-inbox-list .stax-conversation-note { padding: 0 16px; margin: 2px 0 6px; font-size: 12px; line-height: 1.4; }
.msg-inbox-list .stax-conversation-note[hidden] { display: none; }
.msg-thread-avatar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.msg-thread-avatar.msg-avatar-tone-0 { background: color-mix(in srgb, #4f8cff 22%, var(--stax-surface-2)); border-color: color-mix(in srgb, #4f8cff 40%, var(--stax-border)); }
.msg-thread-avatar.msg-avatar-tone-1 { background: color-mix(in srgb, #2fb67c 22%, var(--stax-surface-2)); border-color: color-mix(in srgb, #2fb67c 40%, var(--stax-border)); }
.msg-thread-avatar.msg-avatar-tone-2 { background: color-mix(in srgb, #e0803a 22%, var(--stax-surface-2)); border-color: color-mix(in srgb, #e0803a 40%, var(--stax-border)); }
.msg-thread-avatar.msg-avatar-tone-3 { background: color-mix(in srgb, #b065d8 22%, var(--stax-surface-2)); border-color: color-mix(in srgb, #b065d8 40%, var(--stax-border)); }
.msg-thread-avatar.msg-avatar-tone-4 { background: color-mix(in srgb, #d9506a 22%, var(--stax-surface-2)); border-color: color-mix(in srgb, #d9506a 40%, var(--stax-border)); }
.msg-thread-avatar.msg-avatar-tone-5 { background: color-mix(in srgb, #2aa6b8 22%, var(--stax-surface-2)); border-color: color-mix(in srgb, #2aa6b8 40%, var(--stax-border)); }
.msg-new-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.msg-new-button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .msg-inbox-list .msg-inbox-tools .msg-new-button {
    position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 30;
    flex: 0 0 auto; min-height: 56px; padding: 0 20px; border-radius: 18px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  }
  .msg-inbox-list #msg-thread-list { padding-bottom: 88px; }
}
/* A failed Inbox load keeps the page gutter and its Try again in reach. */
#tx-app-content .fa-main-placeholder[role="alert"] { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; }
#tx-app-content .fa-main-placeholder[role="alert"] .cl-btn { color: var(--stax-text); background: var(--stax-surface-2); border: 1px solid var(--stax-border); border-radius: 10px; padding: 0 14px; font-weight: 650; }

/* Settings > Look: the Light/Dark/System choice shares the row evenly and
   keeps its labels; a generic button reset had shrunk "System" to 48px. */
#settings-content .settings-mode-choice button, #settings-content .settings-desktop-choice button { flex: 1 1 0; min-width: 0; padding: 0 12px; white-space: nowrap; }

/* Ink Stax: one header. While a form (or one of its panels) is open on a
   phone, its own header (back, name, Preview, Help) replaces the app bar;
   the Forms list keeps the app bar. */
@media (max-width: 760px) {
  #tx-shell:has(.fm.fm-has-form) #tx-app-bar,
  #tx-shell:has(.fm-card-hdr.fm-has-back) #tx-app-bar { display: none; }
}

/* Stax's avatar is one round mark at every size (Ink Stax: one avatar
   presence). The mascot image has a white background, so a square mark
   showed a white box on Mode and the empty chat. */
.tx-stax-mark { border-radius: 50%; overflow: hidden; }
.tx-stax-mark img { width: 100%; height: 100%; object-fit: cover; }

.ap-cal-empty-note { grid-column: 1 / -1; margin: 12px 0; color: var(--stax-text-dim); font-size: 14px; }
.ap-preview { align-content: start; }

/* Audit 2026-10-22: tap targets that measured under 32px. */
[data-front-desk-inbox] { min-height: 36px; padding: 0 12px; border-radius: 10px; }
.tx-drawer-user { min-height: 36px; }
.tx-profile-close { display: grid; place-items: center; }