/* Ask terminal panel (packages/ask panel/term.js). Extracted from NSEA-Accounting app/theme.css (f9532d6).
 *
 * Uses the host app's design tokens: --surface-sunken, --surface-raised, --surface-hover, --surface-accent-soft,
 * --border-subtle, --border-default, --border-control, --border-strong, --border-accent, --focus-border,
 * --text-primary, --text-secondary, --text-muted, --text-accent, --pos-text, --neg-text, --warn-text, --clay-500,
 * --radius-sm/-md/-lg/-xl/-pill, --shadow-sm/-md/-lg/-xl, --inset-top, --duration-fast/-base/-slow, --ease-out,
 * --font-mono, --touch-min, --safe-bottom, --tabbar-top, --kb; keyframes ns-scale-in and ns-sheet-up.
 * Host markup it styles around: the Ask section #ask with .ask-head (the Chat | Terminal switch goes after its h2),
 * body.term-open / body.composing / #ask.term-mode (set by term.js and the host), and the host's .drawer-backdrop,
 * .primary and .muted classes. */
.ask-head .segmented { display: inline-flex; gap: .2rem; padding: .2rem; margin: 0 auto 0 1rem; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); }
.segmented button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 32px; padding: .2rem .85rem; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--text-secondary); font-weight: 500; font-size: .9rem; box-shadow: none; }
.segmented button .icon { width: 1rem; height: 1rem; }
.segmented button[aria-selected="true"] { background: var(--surface-raised); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.ask-term { display: flex; flex-direction: column; gap: .6rem; }
.ask-term[hidden] { display: none; }
.term-bar { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.term-menu-anchor { position: relative; flex: none; }
.term-engine { display: inline-flex; align-items: center; gap: .55rem; min-height: 40px; padding: .25rem .6rem .25rem .45rem; font-weight: 600; }
.term-engine .pug { flex: none; }
.term-engine .icon { width: 1rem; height: 1rem; color: var(--text-muted); transition: transform var(--duration-fast) var(--ease-out); }
.term-engine[aria-expanded="true"] .icon { transform: rotate(180deg); }
.term-status { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; flex: 1 1 auto; color: var(--text-secondary); font-size: .88rem; }
#term-status-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-status .dot { flex: none; width: .55rem; height: .55rem; border-radius: 50%; background: var(--border-control); }
.term-status.ok .dot { background: var(--pos-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pos-text) 20%, transparent); }
.term-status.busy .dot { background: var(--clay-500); animation: term-pulse 1.2s ease-in-out infinite; }
.term-status.warn { color: var(--warn-text); } .term-status.warn .dot { background: var(--warn-text); }
@keyframes term-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .term-status.busy .dot { animation: none; } }
.term-start { flex: none; display: inline-flex; align-items: center; gap: .4rem; }
.term-start[hidden] { display: none; }
.term-screen { height: clamp(360px, calc(100dvh - 17rem), 900px); padding: .6rem .5rem .4rem .75rem; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; position: relative; }
/* the pug over Claude Code's own welcome block (term.js coverWelcome); clicks and selection pass through */
.term-welcome { position: absolute; z-index: 3; display: flex; align-items: center; gap: .75rem; padding-left: .25rem; background: var(--surface-sunken); pointer-events: none; overflow: hidden; }
.term-welcome[hidden] { display: none; }
.term-welcome .pug { flex: none; height: 100%; width: auto; max-height: 3.2em; }
.term-welcome-text { display: flex; flex-direction: column; justify-content: center; font-family: "JetBrains Mono", Menlo, "SF Mono", ui-monospace, monospace; font-size: .82rem; line-height: 1.25; color: var(--text-secondary); white-space: nowrap; }
.term-welcome-text strong { color: var(--text-primary); font-weight: 600; }
.term-screen .xterm { height: 100%; }
.term-screen .xterm-viewport { background: transparent !important; }
.term-note { margin: 0; font-size: .8rem; }
.term-dock, .phone-only, .term-sheet-grip { display: none; }

/* the menu (popover) */
.term-menu { position: absolute; z-index: 30; top: calc(100% + .4rem); left: 0; width: 19rem; padding: .35rem; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: ns-scale-in var(--duration-base) var(--ease-out) backwards; transform-origin: top left; }
.term-menu[hidden] { display: none; }
.term-menu hr { margin: .3rem .35rem; border: 0; border-top: 1px solid var(--border-subtle); }
.term-menu-label { margin: .35rem .6rem .2rem; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.term-menu .term-menu-item { display: flex; align-items: center; justify-content: flex-start; gap: .65rem; width: 100%; min-height: 40px; padding: .35rem .6rem; text-align: left; font-weight: 500; background: transparent; border: 0; border-radius: var(--radius-sm); box-shadow: none; color: var(--text-primary); }
.term-menu .term-menu-item[hidden], .term-menu .phone-only { display: none; }
.term-menu-item:hover:not(:disabled), .term-menu-item:focus-visible { background: var(--surface-hover); }
.term-menu-item .icon { flex: none; width: 1.05rem; height: 1.05rem; color: var(--text-secondary); }
.term-menu-item.danger, .term-menu-item.danger .icon { color: var(--neg-text); }
.term-menu-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.term-menu-text small { color: var(--text-muted); font-size: .78rem; font-weight: 400; }
.term-radio { flex: none; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 2px solid var(--border-control); }
[aria-checked="true"] > .term-radio { border-color: var(--clay-500); background: radial-gradient(circle, var(--clay-500) 0 42%, transparent 46%); }
.term-menu-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 40px; padding: .2rem .35rem .2rem .6rem; font-weight: 500; }
.term-stepper { display: inline-flex; align-items: center; gap: .25rem; }
.term-stepper button { width: 34px; height: 34px; min-height: 0; padding: 0; display: inline-grid; place-items: center; border-radius: var(--radius-sm); }
.term-stepper output { min-width: 3.2ch; text-align: center; font: 500 .85rem/1 var(--font-mono); color: var(--text-secondary); }
.term-switch { flex: none; margin-left: auto; width: 2.4rem; height: 1.4rem; border-radius: var(--radius-pill); background: var(--border-control); position: relative; transition: background var(--duration-fast) var(--ease-out); }
.term-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: calc(1.4rem - 6px); height: calc(1.4rem - 6px); border-radius: 50%; background: var(--surface-raised); transition: transform var(--duration-fast) var(--ease-out); }
[aria-checked="true"] > .term-switch { background: var(--clay-500); }
[aria-checked="true"] > .term-switch::after { transform: translateX(1rem); }
.term-backdrop[hidden] { display: none; }

@media (max-width: 700px), (pointer: coarse) {
  /* header: the mode switch spans the row (the title is implied by the tab) */
  #ask.term-mode .ask-head { margin-bottom: .45rem; }
  #ask.term-mode .ask-head h2 { display: none; }
  .ask-head .segmented { margin: 0 0 0 auto; }
  #ask.term-mode .ask-head .segmented { flex: 1; margin: 0; }
  #ask.term-mode .segmented button { flex: 1; min-height: 38px; }
  .term-bar { gap: .5rem; }
  .term-engine { min-height: var(--touch-min); padding-right: .7rem; }
  .term-status { font-size: .8rem; }
  .term-start { min-height: var(--touch-min); padding: 0 1rem; }
  .term-note { display: none; }
  .phone-only, .term-menu .phone-only { display: flex; }
  .term-menu .term-menu-item[hidden] { display: none; }
  /* the screen: its height is set by term.js to fill down to the dock */
  .term-screen { height: 320px; padding: .4rem .25rem .25rem .45rem; border-radius: var(--radius-md); }

  /* the dock: keys + composer, the same glass as the Ask composer, above the tab bar (above the keyboard while typing) */
  .term-dock { display: flex; flex-direction: column; gap: .4rem; position: fixed; z-index: 24; left: max(.75rem, env(safe-area-inset-left, 0px)); right: max(.75rem, env(safe-area-inset-right, 0px)); bottom: calc(max(var(--tabbar-top), 4.75rem) + .5rem); transition: bottom var(--duration-base) var(--ease-out); }
  body.composing .term-dock { bottom: calc(var(--kb) + .5rem + var(--safe-bottom)); }
  body:not(.term-open) .term-dock { display: none; }
  .term-keys { display: flex; flex-direction: column; gap: .35rem; padding: .35rem; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface-raised) 80%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); border: 1px solid var(--border-default); box-shadow: var(--shadow-md, var(--shadow-sm)); }
  .term-dock:not(.live) .term-keys { display: none; }
  .term-keys-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .35rem; }
  .term-keys-row[hidden] { display: none; }
  .term-key { min-height: 40px; min-width: 0; padding: 0; display: inline-grid; place-items: center; font: 500 .85rem/1 var(--font-mono); border-radius: var(--radius-sm); background: var(--surface-sunken); border-color: var(--border-subtle); }
  .term-key .icon { width: 1.1rem; height: 1.1rem; }
  .term-key[aria-pressed="true"], .term-key[aria-expanded="true"] { background: var(--surface-accent-soft); color: var(--text-accent); border-color: var(--border-accent); }
  .term-compose { display: flex; align-items: center; gap: .35rem; padding: 4px 4px 4px 1rem; border-radius: 26px; background: color-mix(in srgb, var(--surface-raised) 80%, transparent); -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6); border: 1px solid var(--border-default); box-shadow: var(--shadow-lg), var(--inset-top); }
  .term-compose:focus-within { border-color: var(--focus-border); }
  .term-compose input { flex: 1; min-width: 0; min-height: 44px; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 1rem; color: var(--text-primary); }
  .term-compose input:focus { outline: none; }
  .term-send { flex: none; width: 44px; height: 44px; min-height: 0; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; }

  /* the menu becomes a bottom sheet */
  .term-menu { position: fixed; z-index: 46; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 85dvh; overflow: auto; padding: .4rem .75rem calc(.75rem + var(--safe-bottom)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; border-bottom: 0; box-shadow: var(--shadow-xl); animation: ns-sheet-up var(--duration-slow) var(--ease-out) backwards; }
  .term-backdrop { z-index: 45; }
  .term-sheet-grip { display: block; width: 2.5rem; height: 5px; margin: .2rem auto .5rem; border-radius: var(--radius-pill); background: var(--border-strong); }
  .term-menu .term-menu-item, .term-menu-row { min-height: 52px; font-size: 1rem; }
  .term-menu-close { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 48px; margin-top: .5rem; font-weight: 600; }
}