/* Status in the centre of the top bar: which model and effort the next message
   uses. Mobile first — base rules target a narrow phone, and only widen from
   there. jarvis.js appends it inside #header. */

#jarvis-status {
  /* Centred over the header's 60px content row. The header grows by the top
     safe-area inset (see #header below), so anchoring to the bottom rather
     than centring in the whole box keeps it level with the buttons. */
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 60px;
  line-height: 60px;
  /* Clear the New Chat button on the left and the theme toggle on the right. */
  max-width: calc(100% - 7rem);
  text-align: center;

  font-size: 0.75rem;        /* 12px — legible, clearly secondary */
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;

  /* Chainlit's theme tokens are bare HSL triplets ("0 0% 36%"), not colors, so
     they must be wrapped in hsl(). Using var() directly yields an invalid
     declaration that is silently dropped, leaving full-contrast body text.
     The token is redefined per theme on a root class, so this tracks light and
     dark automatically — a prefers-color-scheme rule here would instead fight
     a manually-forced theme. */
  color: hsl(var(--muted-foreground, 0 0% 42%));

  /* One line, always, truncating rather than colliding with the buttons. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* It answers "what will this send?"; it is not a control. */
  pointer-events: none;
  user-select: none;
}

/* Narrow: jarvis.js adds .jarvis-stacked when "model · effort · cost" does
   not fit on one line, and the cost moves onto its own line underneath.

   Prefixed with #header for specificity: the compact short-screen rule below
   (.jarvis-short #jarvis-status) sets line-height: 40px at equal specificity
   and later in the file, which made each stacked line 40px tall inside a 40px
   bar and clipped both. line-height 1.2 keeps two lines inside even that bar
   at 12px text. */
#header #jarvis-status.jarvis-stacked {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.2;
}

#header #jarvis-status.jarvis-stacked .jarvis-status-sep {
  display: none;
}

#header #jarvis-status.jarvis-stacked > span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

#jarvis-status:empty {
  display: none;            /* nothing to show before the first status arrives */
}

@media (min-width: 640px) {
  #jarvis-status {
    font-size: 0.8125rem;   /* 13px once there is room */
  }
}

@media (prefers-reduced-motion: no-preference) {
  #jarvis-status { transition: opacity 120ms ease; }
}

/* ---------------------------------------------------------------------------
   Pin the composer to the bottom of the screen on phones.

   Chainlit's root element is `h-screen w-screen` (src/pages/Page.tsx), which is
   `height: 100vh`. On a phone, 100vh means the LARGE viewport — the height the
   page would have if the browser's URL bar were retracted. While that bar is
   showing, the visible area is shorter, so the root box is taller than the
   screen: the DOCUMENT scrolls, and the composer — correctly pinned to the
   bottom of a box that is simply too tall — drifts up and down with the page.

   Chainlit gets this right in the other branch of that same component, which
   uses `max-h-svh`. Only the no-login layout this app runs is affected, so this
   is worth carrying locally rather than reporting and waiting.

   `dvh` tracks the visible area instead. A browser without `dvh` support drops
   the declaration and keeps Tailwind's 100vh, so the worst case is today's
   behaviour rather than a broken page. `--jarvis-vh`, set from the visual
   viewport in jarvis.js when the browser exposes it, is better still: it also
   shrinks when the on-screen keyboard opens, which no CSS unit does on iOS.
   --------------------------------------------------------------------------- */
/* One source of truth for height, at the top, with everything below at 100%.
   Setting it per-element instead is what produced the blank strip under the
   composer: SidebarProvider wraps the app in `min-h-svh`
   (src/components/ui/sidebar.tsx), and 100svh is the SMALL viewport, which
   never shrinks for the keyboard. A dvh-sized child inside a min-h-svh parent
   leaves exactly a keyboard's worth of wrapper background showing whenever the
   keyboard is open.

   The three height declarations are a deliberate cascade, most-wanted last:
   100vh keeps old browsers working, 100dvh tracks the visible area, and
   --jarvis-vh (from jarvis.js) also accounts for the keyboard. Each is dropped
   as invalid where unsupported, falling back to the line above. */
html,
body {
  height: 100vh;
  height: 100dvh;
  height: var(--jarvis-vh, 100dvh);
  overflow: hidden;           /* the transcript scrolls; the page never does */
  overscroll-behavior: none;  /* no pull-to-refresh, no rubber-band at the ends */
}

/* Pinned to the visible rectangle rather than the top of the page: on iOS
   the keyboard scrolls the visual viewport down the page, and --jarvis-vv-top
   (from jarvis.js) follows it. Fixed positioning is relative to the page's
   layout viewport, so top = the visual viewport's offset puts the app exactly
   where the user is looking. Portals (dialogs, toasts) attach to body, not
   here, so they are unaffected. */
#root {
  position: fixed;
  top: var(--jarvis-vv-top, 0px);
  left: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  height: var(--jarvis-vh, 100dvh);
}

/* ?jarvis-debug readout of the viewport numbers, for diagnosing on a phone. */
#jarvis-debug {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2147483647;
  padding: 2px 6px;
  font: 11px/1.3 ui-monospace, monospace;
  color: #fff;
  background: rgba(200, 0, 0, 0.85);
  pointer-events: none;
}

/* Scoped under #root for specificity, not structure. Chainlit injects this file
   BEFORE its own stylesheet, so any rule here that merely ties a Tailwind
   utility on specificity loses on source order - which is exactly what
   happened with a bare `.group\/sidebar-wrapper`: `.min-h-svh` won, the
   wrapper stayed full-height with the keyboard open, and the app overflowed by
   the keyboard's height. Measured in the browser, not assumed. The backslash
   escapes the slash in the literal class name. */
#root .group\/sidebar-wrapper {
  min-height: 0;
  height: 100%;
}

.h-screen.w-screen {
  height: 100%;
  /* 100vw includes the scrollbar gutter and overflows sideways on some phones. */
  width: 100%;
  max-width: 100%;
}

/* Scrolling the transcript must not chain to the page behind it. */
.overflow-y-auto {
  overscroll-behavior: contain;
}

/* Chainlit's "LLMs can make mistakes. Check important info." disclaimer, which
   it renders as a sibling of the composer (src/components/WaterMark.tsx).

   Hidden rather than blanked in .chainlit/translations/en-US.json, because that
   file is gitignored and regenerated by Chainlit — the edit would not survive.
   display:none also collapses the footer's flex gap, so this reclaims the whole
   line and the space above it, which is the point on a phone. */
.watermark {
  display: none !important;
}

/* Keep the top bar on screen.

   Chainlit renders it as `p-3 flex h-[60px] …` with id="header"
   (src/components/header/index.tsx), the first child of a flex column. It is
   already outside the scrolling transcript, so pinning it is really two things:

   - flex-shrink: 0, so a short viewport (the keyboard is up) squashes the
     message list rather than the bar.
   - safe-area padding, which this file now needs because jarvis.js sets
     viewport-fit=cover. That was required to make env(safe-area-inset-*) report
     real values, but it also lets the page draw under the status bar — so
     without this the header would sit beneath the notch. The height grows by
     the same inset so the bar's own 60px of content is unchanged. */
#header {
  flex-shrink: 0;
  height: calc(60px + env(safe-area-inset-top, 0px));
  padding-top: calc(0.75rem + env(safe-area-inset-top, 0px));
  padding-left: max(0.75rem, env(safe-area-inset-left, 0px));
  padding-right: max(0.75rem, env(safe-area-inset-right, 0px));
}

/* Short screens: a phone in landscape with the keyboard up, or a small phone in
   portrait with it up. jarvis.js sets .jarvis-short on <html> when the visible
   height drops below 360px. Measured at 844x390 landscape with the keyboard,
   the full layout left 148px for a 60px header plus a 96px-minimum composer,
   and the composer was cut off by 12px. Everything here trades padding for
   room; nothing is hidden, so the header stays visible as asked. */
.jarvis-short #header {
  height: calc(40px + env(safe-area-inset-top, 0px));
  padding-top: calc(0.125rem + env(safe-area-inset-top, 0px));
  padding-bottom: 0.125rem;
}

.jarvis-short #jarvis-status {
  height: 40px;
  line-height: 40px;
}

/* Beats Tailwind's min-h-24 and p-3 on specificity (id + class). */
.jarvis-short #message-composer {
  min-height: 0;
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

/* The footer's wrapper is `p-4 pt-0`; halve its bottom padding. */
.jarvis-short div:has(> div > #message-composer) {
  padding-bottom: 0.5rem;
}

/* Empty chat: Chainlit centres the logo and composer together, so the composer
 * jumps from mid-screen to the bottom on the first message. Like the Claude
 * app, keep it at the bottom from the start, where the chat footer will put
 * it, and centre the logo in the space above. #root prefix for the same
 * load-order reason as the sidebar wrapper; the -60px margin offset the header
 * for vertical centring, which no longer applies. */
#root #welcome-screen {
  margin-top: 0;
  justify-content: flex-end;
}
#root #welcome-screen > :first-child {
  margin-top: auto;
  margin-bottom: auto;
}
/* With no messages the chat footer renders nothing, but its wrapper keeps its
 * 1rem bottom padding, leaving the welcome composer 1rem higher than the footer
 * composer that replaces it. Drop the empty wrapper so the two line up. */
#root .relative.overflow-y-auto:has(#welcome-screen) + div:empty {
  display: none;
}
.jarvis-short div:has(> #welcome-screen) {
  padding-bottom: 0.5rem;
}

/* iPhone Safari zooms the page into any text field whose text is under 16px,
 * and leaves it zoomed after typing. Every field in the app is at least 16px on
 * touch screens, so tapping one never zooms. */
@media (pointer: coarse) {
  input,
  textarea,
  select,
  [contenteditable="true"] {
    font-size: 16px !important;
  }
}

/* Settings dialog: Confirm applies, the ✕ closes without applying. Cancel did
 * the same as the ✕, and Reset (back to defaults) wasn't wanted, so both go.
 * They have no ids; they are the dialog's h-10 buttons other than #confirm
 * and the dropdowns (role=combobox), which share the class. */
#chat-settings button.h-10:not(#confirm):not([role="combobox"]) {
  display: none;
}

/* Skills screen (jarvis.js). Pinned to the visible viewport like #root, so
 * the on-screen keyboard never covers the card being edited. Colours are
 * Chainlit's theme tokens, so light and dark both follow the app. */
#jarvis-skills {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--jarvis-vv-top, 0px);
  height: var(--jarvis-vh, 100dvh);
  z-index: 60;
  display: flex;
  flex-direction: column;
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
#jarvis-skills[hidden] {
  display: none;
}
.jarvis-skills-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(0.75rem + env(safe-area-inset-top)) 1rem 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
}
.jarvis-skills-head h2 {
  font-size: 1.125rem;
  font-weight: 600;
}
.jarvis-skills-close {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.25rem;
  border-radius: 9999px;
}
.jarvis-skills-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 48rem;
  width: 100%;
  margin: 0 auto;
}
.jarvis-skills-intro {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}
.jarvis-skill {
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  padding: 0.875rem;
  background: hsl(var(--card, var(--background)));
}
.jarvis-skill-top {
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
}
.jarvis-skill-title {
  flex: 1;
  min-width: 0;
}
.jarvis-skill-name {
  font-weight: 600;
}
.jarvis-skill-desc {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}
.jarvis-skill-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 0.5rem;
  font-size: 1.05rem;
}
.jarvis-skill-icon:hover,
.jarvis-skills-close:hover {
  background: hsl(var(--accent));
}
.jarvis-skill-notes {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.jarvis-skill-confirm {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}
.jarvis-skill-confirm span {
  flex: 1;
  font-weight: 500;
}
.jarvis-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}
.jarvis-field input,
.jarvis-field textarea {
  font-size: 16px;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  padding: 0.5rem 0.625rem;
  width: 100%;
  resize: vertical;
}
.jarvis-skill-error {
  color: hsl(var(--destructive));
  font-size: 0.875rem;
}
.jarvis-skill-error:empty {
  display: none;
}
.jarvis-skill-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}
.jarvis-btn {
  height: 2.5rem;
  padding: 0 1rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(var(--border));
  font-weight: 500;
}
.jarvis-btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: transparent;
}
.jarvis-btn-danger {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground, 0 0% 100%));
  border-color: transparent;
}
.jarvis-skills-add {
  height: 3rem;
  border: 1px dashed hsl(var(--border));
  border-radius: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
.jarvis-skill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
}