/* ════════════════════════════════════════════════════════════════════════════ */
/* SCREEN.CSS — Shared styles for all Sena screens                            */
/* Import after theme.css and component CSS files.                            */
/* ════════════════════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul { list-style: none; }

/* ── Base ───────────────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  font-family: var(--ff-text);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbars ─────────────────────────────────────────────────────────── */
/* Every scroller gets the sidebar list's almost invisible bar (library.css):
   thin, no track, and a thumb that only shows while the pointer is over the
   scroller, so the scrollbar is there when it is wanted and invisible
   otherwise. :where() keeps it at zero specificity: a scroller that hides
   its bar entirely (Context, the articles) or styles its own still wins.
   Firefox and Chrome read the two standard properties (Chrome then ignores
   the -webkit- rules); Safari reads only the -webkit- ones. Phones draw
   their own overlay bars. The thumb mixes the FOREGROUND colour, not a
   stroke token, so it shows on dark surfaces too (see library.css). */
:where(*) {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}
:where(*:hover) {
  scrollbar-color: color-mix(in srgb, var(--fg-primary) 22%, transparent) transparent;
}
::-webkit-scrollbar {
  width: var(--spacing-6);
  height: var(--spacing-6);
}
::-webkit-scrollbar-track,
::-webkit-scrollbar-corner {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 999px;
  /* A transparent border insets the 6px bar to a 4px thumb. */
  border: 1px solid transparent;
  background-clip: content-box;
}
:where(*:hover)::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--fg-primary) 20%, transparent);
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--fg-primary) 38%, transparent);
  background-clip: content-box;
}

/* ── App shell ──────────────────────────────────────────────────────────── */
.app {
  display: flex;
  min-width: 1024px;
  position: relative;
}
/* A page whose layout reflows opts out of that 1024px floor with .main-fluid
   on its <main> (Home, Context, the articles, the Discover list, Agents):
   between 768 and 1023px it narrows with the window instead of running off
   its right edge, with the sidebar expanded or collapsed. Below that the
   phone layout takes over (end of this file). */
.app:has(.main-fluid) {
  min-width: 0;
}

.main {
  flex: 1;
  min-width: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  transition: padding-left var(--duration-slow) cubic-bezier(0.4, 0, 0.2, 1);
}


/* ── Conversation header pill ───────────────────────────────────────────── */
.conversation-header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: var(--spacing-8) var(--spacing-16);
  background: var(--bg-primary);
  border-radius: var(--spacing-8);
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 841px;
  width: auto;
  z-index: var(--z-chrome);
}

.conversation-header .header-icon {
  /* Font comes from the required `fa-solid fa-NAME` classes on this element. */
  font-size: 12px;
  color: var(--fg-tertiary);
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conversation-header .header-label {
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  line-height: 17px;
  letter-spacing: -0.015em;
}

/* ── Conversation wrapper (centers content + chatbox vertically) ───────── */
.conversation-wrap {
  flex: 1;
  width: 100%;
  position: relative;
  min-height: 0;
  overflow: hidden;
}

/* ── Conversation area (scrollable messages) ──────────────────────────── */
.conversation {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 17px;
  align-items: center;
  overflow-y: auto;
  padding: 60px 32px 180px;
  min-height: 0;
  box-sizing: border-box;
  position: relative;
  z-index: 1; /* local: the messages, under the fades and the chrome */
}

.conversation > * {
  width: 100%;
  max-width: 841px;
}

/* Pushes messages to bottom when content is short, collapses when it overflows */
.conversation::before {
  content: '';
  flex: 1;
}

/* ── Chatbox pinned at bottom (overlay) ──────────────────────────────── */
.conversation-wrap .chatbox {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 990px;
  width: calc(100% - 64px);
  z-index: var(--z-chrome);
}

/* Fade gradient behind header */
.conversation-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to top, transparent, var(--bg-panel) 40%);
  pointer-events: none;
  z-index: calc(var(--z-chrome) - 1);
}

/* Fade gradient behind chatbox */
.conversation-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent, var(--bg-panel) 40%);
  pointer-events: none;
  z-index: calc(var(--z-chrome) - 1);
}

/* ── User message ───────────────────────────────────────────────────────── */
.message-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-16);
  max-width: 844px;
}

.message-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: flex-end;
}

.attach-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 10px;
  background: var(--bg-primary);
  border-radius: 5px;
  font-size: var(--text-sm);
  line-height: 19px;
  color: var(--text-primary);
  white-space: nowrap;
}

.attach-badge img,
.attach-badge svg {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

/* The user's own messages: a quiet Sena-green wash with no stroke (DES-8),
   the treatment the onboarding demo already used. The border stays, clear, so
   the bubble keeps its size. */
.message-bubble {
  display: flex;
  gap: var(--spacing-16);
  align-items: flex-start;
  background: var(--bg-accent-light);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  padding: var(--spacing-12);
  width: fit-content;
  max-width: 544px;
}

.message-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-avatar);
  display: flex;
  align-items: center;
  justify-content: center;
}

.message-avatar span {
  font-size: calc(8px + var(--text-bump));
  font-weight: 600;
  color: var(--fg-avatar);
}

.message-text {
  flex: 1;
  font-size: var(--text-base);
  line-height: 20px;
  letter-spacing: -0.07px;
  color: var(--text-primary);
  min-width: 0;
}

/* Markdown inside a user message. User messages render through marked +
   DOMPurify (see chat/user-markdown.js), so .message-text can hold block
   content (paragraphs, lists, headings) instead of one escaped line. Collapse
   the outer block margins to the bubble edges, give blocks a consistent gap,
   and re-enable the list styling the global reset strips (ul { list-style:none }
   and * { padding:0 }). */
.message-text > :first-child { margin-top: 0; }
.message-text > :last-child { margin-bottom: 0; }
.message-text p { margin: 0; }
.message-text > * + * { margin-top: var(--spacing-8); }
.message-text ul,
.message-text ol { margin: 0; padding-left: 1.4em; }
.message-text ul { list-style: disc; }
.message-text ol { list-style: decimal; }
.message-text li { margin: 2px 0; }
.message-text li::marker { color: var(--text-secondary); }
.message-text li > ul,
.message-text li > ol { margin-top: 2px; }
.message-text strong { font-weight: var(--fw-bold); }
.message-text em { font-style: italic; }
.message-text a { color: var(--text-accent); text-decoration: underline; }
.message-text h1,
.message-text h2,
.message-text h3,
.message-text h4,
.message-text h5,
.message-text h6 { font-weight: var(--fw-bold); line-height: 1.3; }
.message-text h1,
.message-text h2 { font-size: var(--text-lg); }
.message-text h3,
.message-text h4,
.message-text h5,
.message-text h6 { font-size: var(--text-base); }
.message-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--bg-secondary);
  padding: 1px 5px;
  border-radius: 4px;
}
.message-text pre {
  margin: 0;
  padding: var(--spacing-8);
  background: var(--bg-secondary);
  border-radius: var(--spacing-8);
  overflow-x: auto;
}
.message-text pre code { background: none; padding: 0; }
.message-text blockquote {
  margin: 0;
  padding-left: var(--spacing-8);
  border-left: 2px solid var(--stroke-card);
  color: var(--text-secondary);
}

/* ── Sena response ──────────────────────────────────────────────────────── */
.message-sena {
  width: 100%;
}

/* ── Agent disc ─────────────────────────────────────────────────────────────
   An agent's icon in a circle of its own colour (DES-20, DES-169): the disc
   is the agent's token (--agent, set inline to var(--agent-<key>)) tinted
   into the card, the glyph the same hue pulled toward the text colour, so
   light and dark hues both read in each theme. The Sena Agent wears the
   Sena mark, mono, as a mask in the glyph colour. One class for
   AgentIcon.svelte (Agents page, sidebar groups) and the markup the chat
   page builds ($lib/agent-disc.js); --size is the disc in px. */
.agent-disc {
  --agent: var(--fg-accent);
  --size: 28px;
  flex-shrink: 0;
  width: var(--size);
  height: var(--size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--agent) 28%, var(--bg-card));
  color: color-mix(in srgb, var(--agent) 72%, var(--text-primary));
  /* Duotone glyphs paint from this variable, not from `color` (buttons.css),
     so without it they stay grey inside the disc. */
  --_duotone-color: color-mix(in srgb, var(--agent) 72%, var(--text-primary));
  /* 40% of the disc, with a floor so a small disc (the sidebar's 20px) keeps
     a legible glyph. */
  font-size: max(9px, calc(var(--size) * 0.4));
  /* Inherited uppercase or letter-spacing would turn the ligature into
     literal text (the sidebar's section title is uppercase). */
  letter-spacing: normal;
  text-transform: none;
}
.agent-disc-mark {
  width: max(10px, calc(var(--size) * 0.45));
  height: max(10px, calc(var(--size) * 0.45));
  background-color: currentColor;
  -webkit-mask: url('/design-system/logo/logo-neutral.svg') no-repeat center / contain;
  mask: url('/design-system/logo/logo-neutral.svg') no-repeat center / contain;
}

.sena-text {
  font-size: var(--text-base);
  line-height: 20px;
  letter-spacing: -0.07px;
  color: var(--text-primary);
}

.sena-text p { margin: 0; }
.sena-text p + p { margin-top: 0; }
.sena-text .text-gap { height: 20px; }
.sena-text p.is-bold { font-weight: var(--fw-bold); }
/* Inline links in an answer: the Markdown ones, which carry no class (a
   classed anchor is a component and keeps its own look). --text-link is
   --text-accent in light; in dark it is a lighter green, because
   --text-accent falls to about 4.2:1 on a line in its quote-hover tint. It
   keeps 5.7:1 or better on the answer wash, every agent's tint and that hover
   included, in both themes. The underline thickens on hover, so the colour
   never has to change and no hover token is needed. */
.sena-text a:not([class]) {
  color: var(--text-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  border-radius: 2px;
}
.sena-text a:not([class]):hover { text-decoration-thickness: 2px; }
.sena-text a:not([class]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  text-decoration-thickness: 2px;
}

/* ── Session item active state ──────────────────────────────────────────── */
.session-item.active {
  background: var(--bg-primary);
}

/* ── Theme toggle ───────────────────────────────────────────────────────── */
.theme-toggle {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: var(--z-chrome);
}

/* ── Transition animations ──────────────────────────────────────────────── */
@keyframes fadeOutUp {
  to { opacity: 0; transform: translateY(-26px); }
}
@keyframes fadeOutDown {
  to { opacity: 0; transform: translateY(26px); }
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-out-up  { animation: fadeOutUp  0.4s ease forwards; }
.fade-out-down { animation: fadeOutDown 0.4s ease forwards; }
.fade-in       { animation: fadeIn     0.4s ease forwards; }

/* ════════════════════════════════════════════════════════════════════════════ */
/* MOBILE — THE APP SHELL (DES-224)                                           */
/* ════════════════════════════════════════════════════════════════════════════ */
/* On a phone (the breakpoint in $lib/mobile.js: 767px wide or less, or a
   phone turned sideways) the shell stacks: the top bar (MobileBar.svelte),
   then the page filling what is left of the screen, while the sidebar
   becomes a drawer over it (sidebar.css). dvh, not vh: a phone browser's vh
   includes the toolbar it hides on scroll, which would push the bottom of
   every page (the chat composer first) under it. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 500px) {
  /* The top bar's height, status bar inset included: what sits fixed under
     the bar (MobileBlock's page cover) starts here. */
  :root {
    --mbar-h: calc(52px + env(safe-area-inset-top));
  }
  .app {
    min-width: 0;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    /* .bg-app's 100vh floor would win over the dvh height above. */
    min-height: 0;
    overflow: hidden;
  }
  /* `html` lifts this above a page's own scoped `.main` (same specificity,
     injected later). */
  html .app .main {
    flex: 1;
    width: 100%;
    height: auto;
    min-height: 0;
  }
  /* Text fields: 16px at least (--text-touch), or iOS Safari zooms the whole
     page when one takes focus and leaves it zoomed. A platform rule, so it
     wins over each component's own size; every field listed is smaller than
     this by default, so nothing here shrinks. */
  .chatbox-input,
  .field-input,
  .search-bar-input,
  .lb-rename-input,
  .chart-edit-input,
  .rb-chatbox textarea {
    font-size: var(--text-touch) !important;
  }
}