/* ===================================================
   FONTS
   =================================================== */
@font-face {
  font-family: "Kave-Haffer";
  src: url("./fonts/KaveHafferDisplay/KaveHafferDisplay-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kave-Haffer";
  src: url("./fonts/KaveHafferDisplay/KaveHafferDisplay-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Kave-HafferText";
  src: url("./fonts/KaveHafferText/KaveHafferText-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kave-HafferText";
  src: url("./fonts/KaveHafferText/KaveHafferText-RegularItalic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Kave-HafferText";
  src: url("./fonts/KaveHafferText/KaveHafferText-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kave-HafferText";
  src: url("./fonts/KaveHafferText/KaveHafferText-SemiBoldItalic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* ===================================================
   DESIGN TOKENS
   =================================================== */
:root {
  /* Primitives */
  --neutral-50:  #ffffff;
  --neutral-100: #f7f6f4;
  --neutral-200: #f0efeb;
  --neutral-300: #d7d6d2;
  --neutral-400: #bdbcb7;
  --neutral-500: #a1a19b;
  --neutral-600: #888882;
  --neutral-700: #6c6c66;
  --neutral-800: #53534c;
  --neutral-900: #383831;
  --neutral-950: #000000;

  --linen:      #f2f1e7;
  --clay:       #dadac7;
  --sand:       #bdafa0;
  --terracota:  #a9431e;

  /* Semantic */
  --color-fg-default:  var(--neutral-950);
  --color-fg-muted:    var(--neutral-700);
  --color-fg-subtle:   var(--neutral-500);

  --color-bg-page:    #ffffff;
  --color-bg-default: var(--neutral-50);
  --color-bg-muted:   var(--neutral-100);
  --color-bg-subtle:  var(--neutral-200);

  --color-border-default:  var(--neutral-300);
  --color-border-muted:    var(--neutral-200);
  --color-border-emphasis: var(--neutral-950);

  --color-bg-error-muted:    #ffdee5;
  --color-fg-error:          #a40928;
  --color-border-error-muted: #ff98ac;

  --color-fg-warning: #8a3a26;

  --color-link: var(--terracota);

  /* Typography */
  --font-display: "Kave-Haffer", "Poppins", Helvetica, Arial, sans-serif;
  --font-text:    "Kave-HafferText", "Poppins", Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Chat column width: shared by the message panel, composer, feedback widget and
     disclaimer so they all line up. Scales with the viewport instead of a fixed
     760px, so wide screens don't waste their side margins. */
  --chat-column: min(960px, 92vw);
}

/* ===================================================
   RESET / BASE
   =================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: var(--font-text);
  font-size: 16px;
  background: var(--color-bg-page);
  color: var(--color-fg-default);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
}

/* ===================================================
   PAGE SHELL
   =================================================== */
html, body {
  height: 100%;
}

.page-shell {
  max-width: min(1200px, 94vw);
  margin: 0 auto;
  width: 100%;
  flex: 1;
  min-height: 0;
  padding: 20px 16px 32px;
  display: flex;
  flex-direction: column;
}

/* ===================================================
   HEADER
   =================================================== */
.env-badge {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  padding: 4px 16px;
  font-family: var(--font-text);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--color-fg-warning);
  background: var(--color-bg-error-muted);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Full-bleed bar: the border spans edge to edge, while its inner content
   stays aligned with the page-shell's max-width so title/actions keep the
   same side margins as the rest of the page. */
.page-header {
  flex: none;
  width: 100%;
  border-bottom: 1px solid var(--color-border-default);
}

.page-header-inner {
  max-width: min(1200px, 94vw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 16px;
}

.brand-block h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--color-fg-default);
}

.composer-disclaimer {
  max-width: var(--chat-column);
  width: 100%;
  margin: 6px auto 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-fg-subtle);
  box-sizing: border-box;
  padding: 0 4px;
}

.composer-disclaimer:last-of-type {
  margin-bottom: 8px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-summary {
  display: flex;
  flex-direction: column;
  text-align: right;
  font-size: 0.875rem;
  color: var(--color-fg-muted);
  line-height: 1.4;
}

.user-summary strong {
  color: var(--color-fg-default);
  font-weight: 600;
}

/* ===================================================
   CHAT SHELL
   =================================================== */
.chat-shell {
  flex: 1;
  min-height: 0; /* let the message panel scroll instead of growing past the viewport */
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative; /* needed for drop-overlay */
}

/* ===================================================
   MESSAGE PANEL
   =================================================== */
.message-panel {
  flex: 1;
  min-height: 0; /* required so overflow-y:auto scrolls instead of expanding the panel */
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow-y: auto;
  padding-bottom: 8px;
  /* Same centered width as .composer-form, so a message's anchored edge
     (flex-end for the user, flex-start for the assistant) lines up exactly
     with the input box's edge below it, instead of stretching to the wider
     page-shell. */
  max-width: var(--chat-column);
  width: 100%;
  margin: 0 auto;
}

.message {
  width: fit-content;
  padding: 12px 16px;
  border-radius: 4px;
}

.message-user {
  align-self: flex-end;
  max-width: 99%;
  background: var(--linen);
  border: 1px solid var(--clay);
}

.message-assistant {
  align-self: flex-start;
  max-width: 99%;
  background: var(--neutral-100);
  border: 1px solid var(--color-border-muted);
}

.message-role {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-fg-subtle);
}

.message-body {
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--color-fg-default);
}

/* ===================================================
   MARKDOWN BODY
   =================================================== */
.markdown-body {
  white-space: normal;
  overflow-wrap: anywhere;
}

.markdown-body > :first-child { margin-top: 0; }
.markdown-body > :last-child  { margin-bottom: 0; }

.markdown-body p,
.markdown-body ul,
.markdown-body ol,
.markdown-body pre,
.markdown-body blockquote {
  margin: 0 0 10px;
}

.markdown-body ul,
.markdown-body ol {
  padding-left: 20px;
}

.markdown-body li + li {
  margin-top: 4px;
}

.markdown-body code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-bg-subtle);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.markdown-body pre {
  overflow-x: auto;
  padding: 12px 14px;
  border-radius: 4px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-muted);
}

.markdown-body pre code {
  background: transparent;
  padding: 0;
}

.markdown-body a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* A link wider than the message bubble (long titles/URLs, common on
     mobile) truncates with an ellipsis instead of overflowing the bubble;
     the full href still opens on click regardless of the truncated label. */
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.markdown-body blockquote {
  border-left: 2px solid var(--color-border-default);
  padding-left: 12px;
  color: var(--color-fg-muted);
}

/* ===================================================
   ATTACHMENTS
   =================================================== */
.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 2px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default);
  color: var(--color-fg-muted);
  font-size: 0.8125rem;
}

/* ===================================================
   PENDING STATE
   =================================================== */
.message-pending .message-body {
  min-height: 1.2rem;
}

.pending-status {
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-fg-subtle);
  font-size: 0.875rem;
}

.pending-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--color-fg-subtle);
  animation: pulse 1.1s ease-in-out infinite;
}

/* ===================================================
   TICKET BOX
   =================================================== */
.ticket-box {
  margin-top: 12px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.875rem;
  color: var(--color-fg-muted);
}

.ticket-box a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ticket-escalation-notice {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--color-fg-subtle);
}

/* ===================================================
   CONVERSATION FEEDBACK
   =================================================== */
/* ===================================================
   CONVERSATION DOCK (fixed, right edge, vertically centered) —
   houses "new request" + the "was this helpful?" feedback, out of the
   message flow so they never interrupt an in-progress conversation.
   =================================================== */
.conversation-dock {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.dock-new-request,
.conversation-feedback-yes,
.conversation-feedback-no {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-page);
  color: var(--color-fg-muted);
  cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.dock-new-request:hover,
.conversation-feedback-yes:hover,
.conversation-feedback-no:hover {
  color: var(--color-fg-default);
  border-color: var(--color-border-emphasis);
}

.conversation-feedback-no:disabled {
  opacity: 0.5;
  cursor: default;
}

.dock-icon {
  width: 22px;
  height: 22px;
}

.dock-new-request[data-tooltip]:hover::after,
.conversation-feedback-yes[data-tooltip]:hover::after,
.conversation-feedback-no[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--color-fg-default);
  color: var(--color-bg-page);
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.conversation-feedback {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.conversation-feedback-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.conversation-feedback-actions[hidden] {
  display: none;
}

/* Anchored to the left of the dock (not the right) so it opens into the page and
   never runs off the viewport's right edge. */
.conversation-feedback-panel {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  width: min(280px, calc(100vw - 100px));
  padding: 14px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-page);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.16);
  box-sizing: border-box;
}

.conversation-feedback-panel[hidden] {
  display: none;
}

.conversation-feedback-reasons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conversation-feedback-reasons-label {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-fg-default);
}

.conversation-feedback-reason {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--color-fg-default);
}

.conversation-feedback-reason-other {
  flex-wrap: wrap;
}

.conversation-feedback-other-input {
  flex: 1;
  min-width: 160px;
  border: 1px solid var(--color-border-default);
  border-radius: 2px;
  padding: 4px 8px;
  font-size: 0.8125rem;
  font-family: var(--font-text);
}

.conversation-feedback-submit {
  align-self: flex-start;
  margin-top: 4px;
  border: 1px solid var(--color-border-emphasis);
  background: var(--color-bg-page);
  color: var(--color-fg-default);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.conversation-feedback-submit:hover {
  background: var(--color-fg-default);
  color: var(--color-bg-page);
}

.conversation-feedback-thanks {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-fg-muted);
  text-align: center;
}

/* ===================================================
   EVALUATION FEEDBACK (dev/pre only)
   =================================================== */
.evaluation-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1000;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-page);
  color: var(--color-fg-default);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

.evaluation-fab:hover {
  background: var(--color-bg-muted);
}

.evaluation-fab[hidden] {
  display: none;
}

.evaluation-fab-icon {
  width: 34px;
  height: 34px;
}

.evaluation-panel {
  position: fixed;
  right: 20px;
  bottom: 96px;
  z-index: 1000;
  width: min(360px, calc(100vw - 32px));
  /* Fixed regardless of which step is showing, so a lighter step (fewer fields)
     doesn't make the card visibly shrink compared to the fuller ones. */
  min-height: 420px;
  max-height: min(600px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 16px;
  border: 1px solid var(--color-border-default);
  border-radius: 8px;
  background: var(--color-bg-page);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

.evaluation-panel[hidden] {
  display: none;
}

.evaluation-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.evaluation-panel-header h2 {
  margin: 0;
  font-size: 1rem;
}

.evaluation-close {
  border: none;
  background: none;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-fg-muted);
}

.evaluation-progress {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-fg-subtle);
}

.evaluation-step-heading {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--color-fg-default);
}

.evaluation-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: 14px;
}

.evaluation-form[hidden] {
  display: none;
}

.evaluation-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.evaluation-step[hidden] {
  display: none;
}

.evaluation-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  /* Pinned to the bottom of the panel regardless of how much content the
     current step has, so the buttons don't drift up on lighter steps. */
  margin-top: auto;
  padding-top: 12px;
}

.evaluation-back {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-right: auto;
  border: 1px solid var(--color-border-default);
  background: var(--color-bg-page);
  color: var(--color-fg-muted);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.evaluation-back:hover {
  background: var(--color-bg-muted);
}

.evaluation-back[hidden] {
  display: none;
}

.evaluation-next {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--color-border-emphasis);
  background: var(--color-bg-page);
  color: var(--color-fg-default);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.evaluation-next:hover {
  background: var(--color-fg-default);
  color: var(--color-bg-page);
}

.evaluation-nav-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.evaluation-next[hidden] {
  display: none;
}

.evaluation-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--color-fg-default);
}

.evaluation-field[hidden] {
  display: none;
}

.evaluation-field input[type="text"],
.evaluation-field input[type="email"],
.evaluation-field select,
.evaluation-field textarea {
  border: 1px solid var(--color-border-default);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 0.8125rem;
  font-family: var(--font-text);
  resize: vertical;
}

.evaluation-field input[readonly] {
  background: var(--color-bg-muted);
  color: var(--color-fg-muted);
}

.evaluation-field fieldset,
fieldset.evaluation-field {
  border: none;
  padding: 0;
  margin: 0;
}

.evaluation-field legend {
  padding: 0;
  margin-bottom: 4px;
  font-size: 0.8125rem;
  color: var(--color-fg-default);
}

.required-mark {
  color: var(--color-fg-error);
}

.evaluation-stars-row {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 4px;
}

.evaluation-star {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.evaluation-star input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.evaluation-star-icon {
  width: 26px;
  height: 26px;
  color: var(--color-fg-muted);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.evaluation-star:hover .evaluation-star-icon,
.evaluation-star:hover ~ .evaluation-star .evaluation-star-icon,
.evaluation-star input:checked + .evaluation-star-icon,
.evaluation-star:has(input:checked) .evaluation-star-icon,
.evaluation-star:has(input:checked) ~ .evaluation-star .evaluation-star-icon {
  color: #f5a623;
  fill: currentColor;
}

.evaluation-stars-hint {
  margin: 6px 0 0;
  font-size: 0.75rem;
  color: var(--color-fg-subtle);
}

.evaluation-failure-toggle {
  display: flex;
  gap: 12px;
  font-size: 0.8125rem;
}

.evaluation-failure-details,
.evaluation-department-details,
.evaluation-classification-details {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.evaluation-failure-details[hidden],
.evaluation-department-details[hidden],
.evaluation-classification-details[hidden] {
  display: none;
}

.evaluation-ticket-ref {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-fg-muted);
}

.evaluation-error {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-fg-error);
}

.evaluation-submit {
  align-self: flex-start;
  border: 1px solid var(--color-border-emphasis);
  background: var(--color-bg-page);
  color: var(--color-fg-default);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.evaluation-submit:hover {
  background: var(--color-fg-default);
  color: var(--color-bg-page);
}

.evaluation-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

.evaluation-thanks {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-fg-muted);
}

.evaluation-thanks[hidden] {
  display: none;
}

.evaluation-thanks-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.message-feedback {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.message-feedback-yes,
.message-feedback-no {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: none;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
  color: var(--color-fg-muted);
  opacity: 0.6;
}

.message-feedback-yes[data-tooltip]:hover::after,
.message-feedback-no[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  /* Anchored to the button's left edge (not centered): both buttons sit near the
     left of the message bubble, and .message-panel's overflow-y:auto also makes
     overflow-x effectively auto, so a centered tooltip could get clipped past the
     bubble's left/right edge. Growing rightward from the button always stays inside. */
  left: 0;
  padding: 4px 8px;
  border-radius: 4px;
  background: var(--color-fg-default);
  color: var(--color-bg-page);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}

.message-feedback-icon {
  width: 15px;
  height: 15px;
}

.message-feedback-yes:hover,
.message-feedback-no:hover {
  opacity: 1;
  color: var(--color-fg-default);
  border-color: var(--color-border-default);
  background: var(--color-bg-muted);
}

.message-feedback-yes:disabled,
.message-feedback-no:disabled {
  cursor: default;
}

.message-feedback-yes.selected,
.message-feedback-no.selected {
  opacity: 1;
  color: var(--color-fg-default);
  border-color: var(--color-border-emphasis);
  background: var(--color-bg-muted);
}

.message-feedback-thanks {
  font-size: 0.8125rem;
  color: var(--color-fg-muted);
}

/* ===================================================
   EMPTY STATE
   =================================================== */
.empty-state {
  margin: auto 0;
  padding: 48px 12px 24px;
  text-align: center;
}

.empty-state h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--color-fg-default);
}

.empty-state p {
  max-width: 480px;
  margin: 0 auto;
  font-size: 0.9375rem;
  color: var(--color-fg-muted);
  line-height: 1.6;
}

/* ===================================================
   COMPOSER
   =================================================== */
.composer-panel {
  position: sticky;
  bottom: 0;
  padding-top: 8px;
  background: linear-gradient(to top, var(--color-bg-page) 80%, transparent);
}

.composer-form {
  max-width: var(--chat-column);
  width: 100%;
  margin: 0 auto;
  background: var(--color-bg-default);
  border: 1px solid var(--color-border-default);
  border-radius: 6px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

textarea {
  width: 100%;
  background: transparent;
  color: var(--color-fg-default);
  border: 0;
  padding: 0;
  resize: vertical;
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.6;
  min-height: 72px;
}

textarea::placeholder {
  color: var(--color-fg-subtle);
}

textarea:focus {
  outline: none;
}

input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.composer-footer {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-muted);
}

/* Left column: attach button + confidential notice + attachment count. Its own
   contents may wrap onto multiple lines, but it never pushes the right column
   (composer-actions) down onto its own row. */
.composer-footer-left {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

/* Right column: loading indicator + send button. Always its own column. */
.composer-footer-right {
  flex-shrink: 0;
}

.attach-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.attachment-summary {
  flex: 1;
  min-width: 140px;
}

.confidential-notice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-fg-warning);
  white-space: normal;
  cursor: help;
}

.confidential-notice[data-tooltip]:hover::after,
.confidential-notice[data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  width: max-content;
  max-width: 320px;
  padding: 8px 10px;
  border-radius: 4px;
  background: var(--color-fg-default);
  color: var(--color-bg-page);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.4;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  z-index: 20;
}

.confidential-notice-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  color: inherit;
}

.file-picker {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 2px;
  border: 1px solid var(--color-border-default);
  background: transparent;
  color: var(--color-fg-muted);
  cursor: pointer;
  font-size: 0.8125rem;
  font-family: var(--font-text);
  transition: border-color 0.15s, color 0.15s;
}

.file-picker:hover {
  border-color: var(--color-border-emphasis);
  color: var(--color-fg-default);
}

.attachment-count {
  margin: 0;
  font-size: 0.75rem;
  color: var(--color-fg-subtle);
  overflow-wrap: anywhere;
}

.attachment-count:empty {
  display: none;
}

/* ===================================================
   BUTTONS
   =================================================== */
button {
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-border-emphasis);
  border-radius: 2px;
  padding: 8px 18px;
  background: var(--color-border-emphasis);
  color: var(--neutral-50);
  transition: opacity 0.15s;
}

button:hover {
  opacity: 0.85;
}

/* Secondary (outline) */
.secondary-button {
  background: transparent;
  color: var(--color-fg-default);
  border-color: var(--color-border-default);
}

.secondary-button:hover {
  opacity: 1;
  border-color: var(--color-border-emphasis);
}

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--color-border-default);
  border-radius: 2px;
  overflow: hidden;
}

.lang-switch-option {
  font-family: var(--font-text);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 7px 10px;
  background: transparent;
  color: var(--color-fg-muted);
  border: none;
  border-radius: 0;
  cursor: pointer;
}

.lang-switch-option + .lang-switch-option {
  border-left: 1px solid var(--color-border-default);
}

.lang-switch-option:hover {
  color: var(--color-fg-default);
  background: var(--color-bg-muted);
}

.lang-switch-option.active {
  background: var(--color-border-emphasis);
  color: var(--neutral-50);
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-loading {
  min-width: 7.5rem;
  flex-shrink: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.875rem;
  color: var(--color-fg-subtle);
}

/* Never let the loading text squeeze/overlap the send button — it truncates
   with an ellipsis instead. */
#chat-submit {
  flex-shrink: 0;
}

button:disabled {
  cursor: default;
  opacity: 0.55;
}

/* ===================================================
   ERROR BANNER
   =================================================== */
.error-banner {
  background: var(--color-bg-error-muted);
  border: 1px solid var(--color-border-error-muted);
  color: var(--color-fg-error);
  border-radius: 4px;
  padding: 10px 14px;
  margin: 0 0 12px;
  font-size: 0.875rem;
}

.retry-button {
  margin-top: 6px;
  border: 1px solid var(--color-border-emphasis);
  background: var(--color-bg-page);
  color: var(--color-fg-default);
  border-radius: 4px;
  padding: 6px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
}

.retry-button:hover {
  background: var(--color-fg-default);
  color: var(--color-bg-page);
}

/* ===================================================
   UTILITIES
   =================================================== */
.subtle {
  color: var(--color-fg-subtle);
}

.paste-hint {
  margin: 2px 0 0;
  font-size: 0.7rem;
  color: var(--color-fg-subtle);
  opacity: 0.7;
}

/* ===================================================
   ANIMATIONS
   =================================================== */
@keyframes pulse {
  0%   { opacity: 0.3; transform: scale(0.85); }
  50%  { opacity: 1;   transform: scale(1); }
  100% { opacity: 0.3; transform: scale(0.85); }
}

/* ===================================================
   DROP ZONE
   =================================================== */
.drop-overlay {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 10;
  border: 2px dashed var(--color-border-emphasis);
  border-radius: 6px;
  background: rgba(242, 241, 231, 0.9);
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  color: var(--color-fg-muted);
  pointer-events: none; /* let drop events pass through to #chat-shell */
  letter-spacing: 0.01em;
}

.drop-active .drop-overlay {
  display: flex;
}

/* ===================================================
   ATTACHMENT PREVIEW STRIP (pre-send thumbnails)
   =================================================== */
.attachment-preview {
  display: none; /* shown via JS when pendingFiles.length > 0 */
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 4px;
}

.thumb-item {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.thumb-item img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--color-border-default);
  display: block;
}

.thumb-name {
  max-width: 120px;
  font-size: 0.8125rem;
  color: var(--color-fg-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 8px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border-default);
  border-radius: 2px;
}

.thumb-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  padding: 0;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  background: var(--neutral-800);
  color: var(--neutral-50);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;
  transition: opacity 0.15s;
}

/* ===================================================
   SENT MESSAGE THUMBNAILS
   =================================================== */
.attachment-thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--color-border-default);
  display: block;
}

/* ===================================================
   RESPONSIVE
   =================================================== */
@media (max-width: 680px) {
  .page-header-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .header-actions {
    width: 100%;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .user-summary {
    text-align: left;
  }

  /* Small, right-aligned toggle — not a full-width bar — wrapping onto its
     own line only if the row is too tight for all three header items. */
  .lang-switch {
    order: 3;
    margin-left: auto;
  }

  .empty-state h2 {
    font-size: 1.5rem;
  }

  /* Full width, matching the composer box edge-to-edge, instead of the
     laptop hybrid layout's inset gap on the non-anchored side — at this
     size that gap reads as misalignment against the input box below. */
  .message-user,
  .message-assistant {
    max-width: 100%;
  }

  /* The fixed-width loading slot wastes space the confidential notice badly
     needs to avoid wrapping onto many narrow lines. */
  .chat-loading {
    min-width: 0;
  }

  /* On a narrow screen, "Adjuntar archivos" + "Generando respuesta..." + Enviar
     can't all fit on one unwrapped row — composer-footer-right's own natural
     width (ignoring how much chat-loading could shrink) doesn't shrink, so the
     rest of the row overflows underneath it instead of pushing it aside. Let
     the right column drop to its own line instead of overlapping the left one. */
  .composer-footer {
    flex-wrap: wrap;
  }

  .composer-footer-right {
    width: 100%;
    justify-content: flex-end;
    display: flex;
  }
}