/* Phone layout: the chat is the product. Everything else gets out of its way. */
@media (max-width: 980px) {
  /* one slim bar instead of a tall tab strip + a separate title row */
  #workspace.workspace[data-product="personal"] #mobile-navigation { min-height: 0 !important; padding: calc(.3rem + env(safe-area-inset-top, 0px)) .5rem .3rem !important; }
  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tabs-scroll { padding: .2rem .35rem !important; gap: .15rem; background: transparent !important; border: 0 !important; }
  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tab { padding: .38rem .7rem !important; font-size: .88rem !important; min-height: 0 !important; border-radius: 999px; box-shadow: none !important; }
  #workspace.workspace[data-product="personal"] .chat { padding: .35rem .6rem .5rem !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
  #workspace.workspace[data-product="personal"] .chat-top { min-height: 0 !important; padding: 0 !important; margin: 0 0 .15rem !important; }
  #workspace.workspace[data-product="personal"] .brand-sm { font-size: 1.15rem !important; margin: 0 !important; }
  /* messages: most of the screen, readable type */
  #messages { padding: .2rem 0 .4rem !important; gap: .55rem; }
  #messages .bubble { font-size: 1rem; line-height: 1.45; max-width: 94%; }
  #messages .bubble.user { max-width: 88%; }
  /* One compact typing row; optional voice and Vault controls expand beneath it. */
  #composer-dock { padding: 0 0 calc(.25rem + env(safe-area-inset-bottom, 0px)) !important; }
  #compose-status:empty { display: none; }
  #workspace.workspace[data-product="personal"] #composer-dock .composer-options-row { display: none !important; }
  #workspace.workspace[data-product="personal"] #composer-dock .compose {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .15rem;
    align-items: center; padding: .2rem !important; border-radius: 24px !important;
  }
  #workspace.workspace[data-product="personal"] #composer-dock .compose-shell {
    grid-column: 1; grid-row: 1; padding: 0 !important; min-height: 2.75rem; align-self: center;
  }
  #workspace.workspace[data-product="personal"] #composer-dock .compose-tools {
    grid-column: 2; grid-row: 1; gap: .1rem; flex-wrap: nowrap; align-self: center;
  }
  #workspace.workspace[data-product="personal"] #composer-dock .compose-tool { width: 2.5rem; height: 2.75rem; padding: .4rem; }
  #composer-dock .compose-tool#vault-tool-btn { display: none !important; } /* Vault is available in the persistent chat header. */
  #workspace.workspace[data-product="personal"] #composer-dock .compose-send { padding: .45rem .65rem; min-height: 2.75rem; font-size: .85rem; }
  #workspace.workspace[data-product="personal"] #composer-dock textarea#message {
    font-size: 1rem; min-height: 2.75rem; max-height: 6rem; padding: .7rem .3rem;
    border: 0; outline: none; box-shadow: none;
  }
  /* attachment tray only exists when something is attached */
  .sr-tray:not(.has-items):not(.has-copy) { display: none !important; }
  .sr-tray:not(.has-items) .sr-tray-label { display: none !important; }
  .sr-tray:not(.has-items) .sr-copy-conversation { margin-left: auto; font-size: .74rem; min-height: 1.8rem; padding: .2rem .65rem; } /* Keep Copy conversation accessible without a misleading Attached label */
  .sr-tray { padding: .15rem 0 .3rem; }
  .sr-tray .sr-tray-add { display: none; }
  /* welcome (empty chat) */
  .zana-welcome { margin: auto; padding: 1rem .5rem; text-align: center; }
}
/* AD keeps the input and its actions together when the keyboard reduces the viewport. */
@media (max-width: 980px) {
  #workspace.workspace[data-product="workspace"] .chat-top { min-height:0; padding:0; margin:0; }
  #workspace.workspace[data-product="workspace"] .brand-row { margin:0; min-height:0; }
  #workspace.workspace[data-product="workspace"] #composer-dock { flex:0 0 auto; }
  #workspace.workspace[data-product="workspace"] #compose { display:flex; flex-direction:column; gap:.28rem; padding:.4rem .5rem calc(.55rem + env(safe-area-inset-bottom, 0px)); border:0; background:transparent; box-shadow:none; }
  #workspace.workspace[data-product="workspace"] #compose .composer-options-row { position:static; bottom:auto; left:auto; max-width:100%; min-height:0; margin:0; padding:0; }
  #workspace.workspace[data-product="workspace"] #compose .compose-face { display:grid; grid-column:auto; grid-row:auto; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:.35rem; position:relative; min-width:0; border:1px solid color-mix(in srgb, var(--line) 80%, transparent); border-radius:18px; background:var(--panel-strong); padding:.45rem .55rem .5rem; }
  #workspace.workspace[data-product="workspace"] #compose .compose-shell { grid-column:1; grid-row:1; min-width:0; min-height:2.75rem; padding:0; }
  #workspace.workspace[data-product="workspace"] #compose .compose-tools { grid-column:2; grid-row:1; gap:.2rem; flex-wrap:nowrap; }
  #workspace.workspace[data-product="workspace"] #compose textarea { min-height:2.75rem; max-height:6rem; padding:.65rem .2rem; }
  #workspace.workspace[data-product="workspace"] #compose .compose-tool { width:2.75rem; height:2.75rem; }
  #workspace.workspace[data-product="workspace"] #compose .compose-send { min-height:2.75rem; padding:.5rem .75rem; }
}
@media (max-width:980px) and (max-height:540px) {
  #workspace.workspace[data-product="workspace"] { gap:.35rem; padding:.4rem; }
  #workspace.workspace[data-product="workspace"] #composer-dock { gap:.15rem; }
  #workspace.workspace[data-product="workspace"] .chat { position:relative; gap:.25rem; }
  #workspace.workspace[data-product="workspace"] .chat-top { position:absolute; top:.5rem; left:.6rem; width:5rem; z-index:3; }
  #workspace.workspace[data-product="workspace"] .chat-top .brand-row { padding:0; }
  #workspace.workspace[data-product="workspace"] .workspace-chat-heading { padding-left:5.5rem; padding-block:.2rem; min-height:2.75rem; }
  #workspace.workspace[data-product="workspace"] .workspace-chat-heading h2 { font-size:1rem; }
  #workspace.workspace[data-product="workspace"] .workspace-picker { flex-basis:auto; }
  #workspace.workspace[data-product="workspace"] .workspace-picker-trigger { min-height:2.75rem; padding:.4rem .6rem; }
}
/* all sizes: first-run welcome */
.zana-welcome { display: none; }
#messages:empty + .zana-welcome, .chat.is-empty .zana-welcome { display: block; }
.zana-welcome h2 { margin: 0 0 .35rem; font-size: 1.3rem; }
.zana-welcome p { margin: 0 0 1rem; opacity: .7; }
.zana-welcome-chips { display: flex; flex-direction: column; gap: .5rem; max-width: 22rem; margin: 0 auto; }
.zana-welcome-chips button { padding: .7rem 1rem; border: 1px solid var(--line, rgba(128,128,128,.4)); border-radius: 16px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.zana-welcome-chips button:hover { border-color: var(--accent, #42b9a4); }
.chat.is-empty #messages { display: none !important; }
.chat.is-empty .zana-welcome { display: flex !important; flex-direction: column; justify-content: center; flex: 1 1 auto; min-height: 0; }
@media (max-width: 980px) { #messages .bubble.zana, #messages .bubble { box-shadow: none !important; } }
@media (max-width: 980px) { .zr-rail { height: auto !important; padding: .4rem .6rem !important; } .zr-block { flex: 0 0 auto !important; margin-top: .6rem; } }

/* Workspace on a phone: the top bar (menu) and the panel switcher each get a real row. Before, the grid had no row for
   the bar, so it created extra tracks and squeezed the chat to ~37px. */
@media (max-width: 980px) {
  #workspace.workspace[data-product="workspace"], #workspace.workspace[data-product="workspace-admin"] {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
    grid-template-areas: "tabs" "workspace-mobile-panels" "chat" !important;
  }
  #workspace.workspace[data-product="workspace"] #mobile-navigation, #workspace.workspace[data-product="workspace-admin"] #mobile-navigation { grid-area: tabs; justify-content: flex-end; min-height: 0; padding: calc(.25rem + env(safe-area-inset-top, 0px)) .6rem .25rem; }
}
@media (max-width: 980px) {
  #workspace.workspace[data-product="workspace"] #mobile-navigation .mobile-tabs-scroll,
  #workspace.workspace[data-product="workspace-admin"] #mobile-navigation .mobile-tabs-scroll { display: none !important; }
  #workspace.workspace[data-product="workspace"] .chat, #workspace.workspace[data-product="workspace-admin"] .chat { padding: .4rem .6rem .5rem !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; }
  #workspace.workspace[data-product="workspace"] .brand-row { flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
  #workspace.workspace[data-product="workspace"] .workspace-nav-shell { flex: 1 1 100%; flex-wrap: wrap; gap: .3rem; min-width: 0; }
  #workspace.workspace[data-product="workspace"] .workspace-picker { flex: 1 1 8rem; min-width: 0; }
  #workspace.workspace[data-product="workspace"] .workspace-picker-trigger { max-width: 100%; }
  #workspace.workspace[data-product="workspace"] #workspace-page-nav { flex: 1 1 100%; overflow-x: auto; white-space: nowrap; }
  #workspace.workspace .workspace-mobile-panel-nav button { font-size: .74rem; }
}

@media (max-width: 980px) {
  /* menu floats at the top right instead of costing a whole row */
  #workspace.workspace[data-product="workspace"] #mobile-navigation, #workspace.workspace[data-product="workspace-admin"] #mobile-navigation { position: absolute !important; top: calc(.45rem + env(safe-area-inset-top, 0px)); right: .6rem; z-index: 30; padding: 0 !important; min-height: 0 !important; background: transparent !important; border: 0 !important; width: auto; }
  #workspace.workspace[data-product="workspace"], #workspace.workspace[data-product="workspace-admin"] { grid-template-rows: auto minmax(0, 1fr) !important; grid-template-areas: "workspace-mobile-panels" "chat" !important; position: relative; }
  #workspace.workspace[data-product="workspace"] .brand-row { padding-right: 3.2rem; }
  #workspace.workspace[data-product="workspace"] .workspace-nav-shell { flex: 1 1 auto; }
}

/* The page itself never scrolls on a phone: only the chat and panels inside it do. This stops the whole screen sliding up when you scroll at the bottom or the keyboard opens. */
@media (max-width: 980px) {
  html { height: 100%; overflow: hidden; overscroll-behavior: none; }
  body { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; }
  #messages { overscroll-behavior: contain; }
}
/* The welcome belongs in the messages row of the chat grid; without a row it collapsed to nothing and flashed away. */
.chat > .zana-welcome { grid-row: 3; grid-column: 1; min-height: 0; overflow: auto; }
.chat.is-empty > .zana-welcome { align-self: stretch; }
/* Plan written into the chat, and the capability checklist */
.bubble.plan-message { background: var(--panel-strong, transparent); border: 1px solid var(--line, rgba(128,128,128,.35)); border-radius: 14px; padding: .9rem 1rem; max-width: 100%; }
.plan-badge { display: inline-block; font-size: .68rem; letter-spacing: .1em; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--accent-soft, rgba(66,185,164,.2)); margin-bottom: .4rem; }
.plan-outcome { margin: 0 0 .4rem; font-size: 1.05rem; line-height: 1.3; }
.plan-message h4 { margin: .7rem 0 .2rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.plan-message ul, .cap-checklist ul { margin: .1rem 0 0; padding-left: 1.1rem; }
.plan-message li { margin-bottom: .15rem; }
.plan-message-actions { display: flex; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; } .plan-message-actions button { flex: 1 1 8rem; padding: .6rem 1rem; }
.cap-checklist h4 { margin: .6rem 0 .2rem; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; opacity: .75; }
.cap-checklist li { list-style: none; margin-left: -1.1rem; padding-left: 1.4rem; position: relative; margin-bottom: .2rem; }
.cap-checklist li::before { content: attr(data-mark); position: absolute; left: 0; font-weight: 700; }
.cap-checklist li[data-mark="✓"]::before { color: #3dba6f; } .cap-checklist li[data-mark="✕"]::before { color: #e5484d; }
/* System notices (voice stopped, reports, connection) are quiet one-liners, not full-size bubbles. */
#messages .msg-row.system .bubble, #messages .msg-row.system { font-size: .85rem !important; line-height: 1.4; }
#messages .msg-row.system .bubble { padding: .4rem .7rem !important; max-width: 94%; opacity: .85; border-left: 0 !important; }
.vault-banner { display: none; }
@media (max-width: 980px) { .vault-banner:not([hidden]) { display: block; width: 100%; padding: .3rem .6rem; border: 0; border-radius: 8px; background: color-mix(in srgb, #f5a524 18%, transparent); color: inherit; font: inherit; font-size: .78rem; text-align: left; cursor: pointer; } }
.chat.is-empty > .zana-welcome { justify-content: flex-start !important; padding-top: 12vh; }

/* Optional introductions never hide the normal phone navigation or Personal app.
   When account verification actually fails, keep protected history unavailable. */
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] {
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  grid-template-areas: "chat" !important;
  gap: 0 !important;
  padding: 0 !important;
}
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] .desktop-panel-tabs,
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] #mobile-navigation,
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] .rail,
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] .rail-handle {
  display: none !important;
}
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] #chat {
  display: flex !important;
  grid-area: chat;
  min-width: 0;
  width: 100%;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] #messages,
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] #compose,
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] .chat-top,
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] #session-status,
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] #chat-notices,
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] #zana-welcome,
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] #person-surface,
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] #history-surface {
  display: none !important;
}
#workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] #personal-startup-unavailable {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  width: min(100%, 34rem);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0 auto;
  padding: .75rem .25rem;
  overflow-wrap: anywhere;
  text-align: center;
}

@media (max-width: 980px) {
  #workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"]:not([hidden]) {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] #chat {
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    min-width: 0;
    max-width: 100%;
    min-height: 0;
    padding: calc(.5rem + env(safe-area-inset-top, 0px)) max(.75rem, env(safe-area-inset-right, 0px)) calc(.5rem + env(safe-area-inset-bottom, 0px)) max(.75rem, env(safe-area-inset-left, 0px)) !important;
  }

  #workspace.workspace[data-product="personal"][data-personal-onboarding="unavailable"] #release-update-banner:not([hidden]) {
    display: block !important;
    flex: 0 0 auto;
    align-self: center;
    width: min(100%, 36rem);
    box-sizing: border-box;
    margin: .25rem auto .5rem;
  }
}


/* A locked Vault must not expose restored messages, but a blank chat looks
   broken. Explain the hidden conversation and link to the existing unlock. */
#messages .vault-chat-locked-prompt {
  flex: 0 0 auto;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  width: min(100%, 30rem);
  box-sizing: border-box;
  margin: auto;
  padding: clamp(1.1rem, 4vw, 1.8rem);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-strong);
  text-align: center;
}
#messages .vault-chat-locked-prompt h2 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.3;
}
#messages .vault-chat-locked-prompt p {
  margin: 0;
  max-width: 30ch;
  color: var(--ink-soft);
  font-size: .9rem;
  line-height: 1.5;
}
#messages .vault-chat-locked-prompt button {
  min-height: 2.7rem;
  margin-top: .25rem;
  padding: .55rem 1rem;
  border-radius: 999px;
}

/* Generative content lives in the conversation rather than a second scrollable rail. */
@media (max-width: 980px) {
  #workspace.workspace[data-product="personal"] #messages .zr-widget {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: .7rem;
    margin-block: .45rem .75rem;
  }
  #workspace.workspace[data-product="personal"] #messages .zr-compare-grid {
    gap: .45rem;
  }
  #workspace.workspace[data-product="personal"] #messages .zr-compare-option {
    padding: .7rem;
  }
  #workspace.workspace[data-product="personal"] #messages .zr-widget-editor {
    min-height: 130px;
    max-height: 40dvh;
  }
  #workspace.workspace[data-product="personal"] #messages .zr-widget-action {
    max-width: 100%;
    white-space: normal;
    line-height: 1.28;
  }
}

/* Compact only the visual mobile label without removing its accessible identity or DOM text. */
@media (max-width: 980px) {
  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tab[data-tab="current"] { font-size: 0 !important; }
  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tab[data-tab="current"]::after { content: "Sources"; font-size: .88rem; }
}

/* Keep section labels and the camera/menu targets separate on narrow phones. */
@media (max-width: 980px) {
  #workspace.workspace[data-product="personal"] #mobile-navigation {
    display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto; gap: .25rem;
    align-items: center; width: 100%; box-sizing: border-box;
  }
  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tabs-scroll {
    display: flex; min-width: 0; padding: 0 !important; justify-content: flex-start;
    overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  }
  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tab {
    flex: 0 0 auto; white-space: nowrap; padding: .45rem .25rem !important; font-size: .8rem !important;
    min-height: 2.75rem !important;
  }
  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tab[data-tab="current"] { font-size: 0 !important; }
  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tab[data-tab="current"]::after { font-size: .8rem; }
  #workspace.workspace[data-product="personal"] #mobile-navigation .header-camera-tool,
  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-menu-trigger { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; padding: .4rem; box-sizing: border-box; }
  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-menu { margin: 0; }
}

/* A phone keyboard used to cover Vault setup. Pin the sheet to the visible screen. */
@media (max-width: 980px) {
  #workspace.workspace[data-product="personal"] #vault-panel-host #vault-panel:not([hidden]) {
    position: fixed;
    z-index: 240;
    left: max(0.6rem, env(safe-area-inset-left, 0px));
    right: max(0.6rem, env(safe-area-inset-right, 0px));
    top: calc(var(--zana-visual-top, 0px) + env(safe-area-inset-top, 0px) + 4.4rem);
    bottom: auto;
    width: auto;
    max-height: calc(var(--zana-visual-height, 100dvh) - env(safe-area-inset-top, 0px) - 5.2rem);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #workspace.workspace[data-product="personal"] #vault-panel .vault-bar-setup,
  #workspace.workspace[data-product="personal"] #vault-panel .vault-bar-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  #workspace.workspace[data-product="personal"] #vault-panel input,
  #workspace.workspace[data-product="personal"] #vault-panel select {
    min-height: 2.75rem;
    font-size: 16px;
  }
  #workspace.workspace[data-product="personal"] #vault-panel #vault-bar-create,
  #workspace.workspace[data-product="personal"] #vault-panel #vault-bar-unlock {
    position: sticky;
    bottom: 0;
    min-height: 2.75rem;
    font-size: 1rem;
  }
  #workspace.workspace[data-product="personal"] #vault-panel .vault-setup-detail {
    font-size: 0.85rem;
  }
  #workspace.workspace[data-product="personal"] #vault-panel .vault-bar-setup > .vault-bar-note,
  #workspace.workspace[data-product="personal"] #vault-panel #vault-bar-feedback:not(:empty) {
    display: block;
  }
}

/* The compact vault panel hides every note. Keep the setup sentence and errors readable. */
#vault-panel .vault-bar-setup > .vault-bar-note,
#vault-panel #vault-bar-feedback:not(:empty) {
  display: block;
}

/* All four Personal sections remain visible at the smallest supported width. */
@media (max-width: 360px) {
  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tab { padding-inline: .15rem !important; font-size: .75rem !important; }
  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tab[data-tab="current"] { font-size: 0 !important; }
  #workspace.workspace[data-product="personal"] #mobile-navigation .mobile-tab[data-tab="current"]::after { font-size: .75rem; }
}

/* Personal's welcome (and its history suggestions) never shows in a workspace, and hidden means hidden. */
#workspace:not([data-product="personal"]) .zana-welcome,
.chat .zana-welcome[hidden] { display: none !important; }
#workspace:not([data-product="personal"]) .chat.is-empty #messages { display: flex !important; }