/*
 * React client styles — Gemini-inspired redesign (Bot Framework Web Chat 4.19.1).
 *
 * Loaded ONLY when the React client is active (ocab_ai_bot_use_react_client()),
 * AFTER the legacy stylesheets. Production (legacy client) never loads this file.
 *
 * IMPORTANT: Web Chat 4.19 dropped the `webchat__` class prefix on its rendered
 * DOM — elements are now `bubble__content`, `link-definitions__badge`,
 * `render-markdown__pure-identifier`, `typing-indicator`, etc. (plus a per-module
 * hash like `wFYu5rq_…`). So selectors for WEB CHAT-RENDERED elements are
 * UNPREFIXED and scoped under `#webchat` to avoid colliding with the page.
 * Our OWN send box markup (send-box.jsx) keeps the `webchat__send-box*` class
 * names we chose, so those selectors stay prefixed.
 */

/* ===================================================================== */
/* Open Sans across the whole chat (Web Chat text uses styleOptions       */
/* primaryFont; this covers our shell/header and anything that inherits). */
/* ===================================================================== */
#chatbot-widget,
#chatbot-widget input,
#chatbot-widget textarea,
#chatbot-widget button,
#chatbot-full-screen-app-wrap,
#chatbot-full-screen-app-wrap input,
#chatbot-full-screen-app-wrap textarea,
#chatbot-full-screen-app-wrap button,
#webchat {
  font-family: 'Open Sans', sans-serif;
}

/* ===================================================================== */
/* Custom send box (our own markup — classes set in send-box.jsx)        */
/* ===================================================================== */
#webchat .ocab-send-box {
  width: 100%;
  padding: 10px 13px 4px 14px;
  box-sizing: border-box;
}

/* ChatGPT-style column: text on top, action buttons along the bottom. The box
 * grows downward as the textarea grows (animated via the textarea height). */
#webchat .ocab-send-box .webchat__send-box__main {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  height: auto !important;
  min-height: 0 !important;
  padding: 10px 12px;
  background: #f3f6fa !important;
  border: 2px solid rgba(14, 42, 69, 0.12) !important;
  border-radius: 24px !important;
  position: static !important;
}

/* Bottom toolbar row: upload/camera on the left, send on the right. */
#webchat .ocab-send-box .ocab-send-box__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#webchat .ocab-send-box .ocab-send-box__tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Upload + camera buttons: light circles with a blue glyph */
#webchat .ocab-send-box .webchat__upload-button-new,
#webchat .ocab-send-box .cam-upld-btn {
  flex: 0 0 auto;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  background-color: #006cb7 !important;
  color: #fff !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  inset: auto !important;
  cursor: pointer;
  overflow: visible !important;
}

#webchat .ocab-send-box .webchat__upload-button-new svg,
#webchat .ocab-send-box .cam-upld-btn svg {
  width: 22px !important;
  height: 22px !important;
  position: static !important;
  transform: none !important;
  inset: auto !important;
}

#webchat .ocab-send-box #cam-upld-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Text area wrapper (the <form>) — full width across the top of the box */
#webchat .ocab-send-box .webchat__send-box-text-box {
  display: block !important;
  width: 100%;
  min-width: 0;
  height: auto !important;
  margin: 0 !important;
  padding: 2px 6px 0 !important;
  border: none !important;
  background: transparent !important;
  position: static !important;
  inset: auto !important;
}

/* The auto-growing textarea itself. No vertical padding — the textarea height
 * is exactly the text (1 line = 24px, JS grows it to a max of 2 lines = 48px),
 * and the pill centers it via flexbox, so the placeholder can never clip. */
#webchat .ocab-send-box .ocab-textarea {
  flex: 1 1 auto;
  display: block;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none;
  resize: none;
  overflow-y: hidden;
  background: transparent;
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 24px !important;
  font-weight: 500;
  color: #1a2330 !important;
  box-sizing: content-box !important;
  height: 24px; /* one line; JS grows it to a max of two lines (48px) */
  min-height: 24px !important; /* never collapse, even if JS measures 0 while hidden */
  vertical-align: middle;
  transition: height 0.15s ease;
}

#webchat .ocab-send-box .ocab-textarea::placeholder {
  color: #6b7785 !important;
  font-family: 'Open Sans', sans-serif !important;
  font-weight: 500;
  font-size: 16px !important;
}

/* Send button: solid blue circle, white up-arrow */
#webchat .ocab-send-box .webchat__send-button {
  flex: 0 0 auto;
  width: 38px !important;
  height: 38px !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #fdcb15 !important;
  color: #0e2a45 !important;
  border: none !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: static !important;
  inset: auto !important;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

#webchat .ocab-send-box .webchat__send-button.ocab-send-button--idle {
  opacity: 0.4;
}

#webchat .ocab-send-box .webchat__send-button .webchat__send-icon {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #0e2a45 !important;
}

#webchat .ocab-send-box .webchat__send-button .webchat__send-icon svg {
  width: 22px;
  height: 22px;
  transform: rotate(90deg); /* up-arrow → points right for "send" */
}

#webchat .ocab-send-box .button-disabled {
  pointer-events: none !important;
  opacity: 0.4 !important;
}

/* ===================================================================== */
/* Messages — Web Chat-rendered (UNPREFIXED 4.19 classes)                */
/* Bubble background/colour is mostly driven by styleOptions; these add  */
/* the asymmetric user pill + reading rhythm + flush-left bot text.      */
/* ===================================================================== */
#webchat .bubble:not(.bubble--from-user) .bubble__content {
  background: transparent !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#webchat .bubble:not(.bubble--from-user) .text-content,
#webchat .bubble:not(.bubble--from-user) .render-markdown p {
  color: #11354e !important;
  line-height: 1.6 !important;
}

/* The AI disclaimer at the end of an analysis is a fully-italic paragraph
   (<p><em>…</em></p>). <em> is inline, so its own line-height is overridden by
   the paragraph's line-box strut — target the wrapping paragraph instead and
   tighten it. :only-child keeps this to whole-italic paragraphs (the
   disclaimer), not inline italic words elsewhere. The bot-scoped selector
   matches the specificity of the 1.6 rule above so this wins. */
#webchat .bubble:not(.bubble--from-user) .render-markdown p:has(> em:only-child) {
  line-height: normal !important;
}

/* ===================================================================== */
/* Markdown formatting inside bot messages. Web Chat DOES render the bot's */
/* markdown to HTML (p, ul/ol, h1–h6, strong/em, a, code…), but the page's */
/* global CSS reset (Tailwind-style "*, ::before { margin:0; padding:0;    */
/* border:0 }") strips the default formatting, so it looks flat. Restore it */
/* here, scoped to the bot markdown container (.render-markdown only        */
/* appears on bot messages; user messages use plain .text-content).         */
/* ===================================================================== */
#webchat .render-markdown p {
  margin: 0 0 10px !important;
}
#webchat .render-markdown p:last-child {
  margin-bottom: 0 !important;
}
#webchat .render-markdown ul,
#webchat .render-markdown ol {
  margin: 0 0 10px !important;
  padding-left: 1.4em !important;
}
#webchat .render-markdown ul {
  list-style: disc outside !important;
}
#webchat .render-markdown ol {
  list-style: decimal outside !important;
}
#webchat .render-markdown li {
  display: list-item !important;
  margin: 3px 0 !important;
}
#webchat .render-markdown h1,
#webchat .render-markdown h2,
#webchat .render-markdown h3,
#webchat .render-markdown h4 {
  margin: 14px 0 6px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}
#webchat .render-markdown h1 { font-size: 1.35em !important; }
#webchat .render-markdown h2 { font-size: 1.2em !important; }
#webchat .render-markdown h3 { font-size: 1.08em !important; }
#webchat .render-markdown h4 { font-size: 1em !important; }
#webchat .render-markdown strong,
#webchat .render-markdown b {
  font-weight: 700 !important;
}
#webchat .render-markdown em,
#webchat .render-markdown i {
  font-style: italic !important;
}
#webchat .render-markdown a {
  color: #006cb7 !important;
  text-decoration: underline !important;
}
#webchat .render-markdown blockquote {
  margin: 0 0 10px !important;
  padding-left: 12px !important;
  border-left: 3px solid #cfe2f3 !important;
  color: #45525f !important;
}
#webchat .render-markdown code {
  font-family: Consolas, Monaco, monospace !important;
  background: #eef1f4 !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-size: 0.9em !important;
}
#webchat .render-markdown pre {
  margin: 0 0 10px !important;
  padding: 10px 12px !important;
  background: #f6f7f9 !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
}
#webchat .render-markdown pre code {
  background: none !important;
  padding: 0 !important;
}
#webchat .render-markdown hr {
  border: 0 !important;
  border-top: 1px solid #e2e4e7 !important;
  margin: 12px 0 !important;
}

/* Markdown (GFM pipe) tables — used e.g. for the ticket-status facts. Gives a
   tidy, on-brand boxed table. Scrolls horizontally if it ever overflows the
   narrow widget rather than stretching the bubble. */
#webchat .render-markdown table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 8px 0 10px !important;
  font-size: 14px !important;
  display: table !important;
}
#webchat .render-markdown th,
#webchat .render-markdown td {
  border: 1px solid #d7e3ee !important;
  padding: 7px 10px !important;
  text-align: left !important;
  vertical-align: top !important;
}
#webchat .render-markdown th {
  background: #eef4fa !important;
  color: #11354e !important;
  font-weight: 700 !important;
}
#webchat .render-markdown tbody tr:nth-child(even) td {
  background: #f7fafd !important;
}
/* Key/value layout: hide the (empty) header row, bold the label column, and
   keep it on one line so labels like "Senast uppdaterad" don't wrap — the
   width:1%+nowrap trick shrinks the column to its content and lets the value
   column take the rest. */
#webchat .render-markdown thead {
  display: none !important;
}
#webchat .render-markdown td:first-child {
  font-weight: 700 !important;
  white-space: nowrap !important;
  width: 1% !important;
}
/* Status pill badge. The message wraps ONLY the status label in a bare <span>
   inside its table cell; this styles that span as a pill. Position-independent
   (the status is the only <span> in the table), so it works regardless of row
   order and leaves the description untouched. */
#webchat .render-markdown td span {
  display: inline-block;
  background: #0e2a45;
  color: #fff !important;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.5;
  white-space: nowrap;
  margin-bottom: 6px;
}

/* ===================================================================== */
/* Bot-flagged callout (e.g. the consent / "take this to a service office?"  */
/* prompt). The bot sets channelData.ocabCallout, and activity-middleware.js  */
/* wraps that message in a .ocab-callout marker. Bot replies are normally     */
/* borderless/full-width, so give the callout a box to stand out. The wrapper */
/* is display:contents (layout-neutral); the box sits on the bubble content.  */
/* ===================================================================== */
#webchat .ocab-callout {
  display: contents;
}

#webchat .ocab-callout .bubble:not(.bubble--from-user) .bubble__content {
  background: #f0f6fb !important;
  border: 1px solid #006cb778 !important;
  border-top: 4px solid #006cb7 !important;
  border-radius: 0px !important;
  padding: 14px 16px !important;
}

/* Slightly tighten the paragraph spacing inside the callout box. */
#webchat .ocab-callout .render-markdown p {
  margin: 0 0 8px !important;
}
#webchat .ocab-callout .render-markdown p:last-child {
  margin-bottom: 0 !important;
}

#webchat .ocab-callout .render-markdown p:first-child {
  font-weight: 700 !important;
}

/* A little horizontal breathing room around the message list. */
#webchat .transcript-focus-area__activity-list {
  padding: 0 0.5rem;
}

#webchat .bubble--from-user .bubble__content {
  background: #e8f0f7 !important;
  border: none !important;
  border-width: 0 !important;
  border-radius: 18px 18px 4px 18px !important;
  padding: 10px 14px !important;
  max-width: 280px !important;
}

#webchat .bubble--from-user .text-content,
#webchat .bubble--from-user .render-markdown p {
  color: #0e2a45 !important;
  font-weight: 400 !important;
}

/* A little breathing room inside the user message bubble. */
#webchat .bubble--from-user .text-content {
  padding: 5px !important;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* The uploaded-image preview (and any image attachment) renders as a Web Chat
   fixed-width image that reserves a min-height, leaving empty space below the
   thumbnail. Drop it so the bubble hugs the image. Target the stable semantic
   class — the paired .webchat--css-* class is a build hash that changes between
   versions. */
#webchat .webchat__fixed-width-image {
  min-height: 0 !important;
}

/* No avatar in the transcript — collapse the gutter so bot text is flush-left. */
#webchat .stacked-layout__avatar-gutter {
  width: 0 !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Tighten vertical spacing between messages. */
#webchat .stacked-layout {
  margin: 0 !important;
}

/* Hide the bubble nub pad on bot messages only. */
#webchat .bubble:not(.bubble--from-user) .bubble__nub-pad {
  display: none !important;
}

/* ===================================================================== */
/* References — citations in text + the "N referenser" link-definitions  */
/* block. Classes taken verbatim from the rendered 4.19 DOM.             */
/* ===================================================================== */

/* Inline citation markers in the message text ([1] [2] [3]). */
#webchat .render-markdown__pure-identifier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin: 0 2px;
  border-radius: 9px;
  background: #006cb7 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1;
  text-decoration: none !important;
  border: none;
  vertical-align: middle;
  box-sizing: border-box;
}

/* Hide the bracket decorations (::before/::after) and the external-link gif
 * inside an inline marker — leaving just the clean number chip. */
#webchat .render-markdown__pure-identifier::before,
#webchat .render-markdown__pure-identifier::after,
#webchat .render-markdown__pure-identifier .render-markdown__external-link-icon,
#webchat .render-markdown__pure-identifier img {
  display: none !important;
}

/* Anchor-type citations ([N] links) otherwise lose to the generic
 * `#webchat .render-markdown a` colour rule (its `a` element selector outranks
 * the .pure-identifier class), showing the number in blue + underlined. Force
 * white and drop the underline (they render as badges, not text links). */
#webchat .render-markdown a.render-markdown__pure-identifier {
  color: #fff !important;
  text-decoration: none !important;
}

/* "N referenser" disclosure header */
#webchat .link-definitions {
  margin-top: 10px;
}

#webchat .link-definitions__header {
  cursor: pointer;
  padding: 4px 0;
}

#webchat .link-definitions__header-text {
  font-size: 14px !important;
  font-weight: 600;
  color: #0e2a45;
}

/* Reference list + items */
#webchat .link-definitions__list {
  display: flex;
  flex-direction: column;
  gap: 0px !important;
  margin-top: 8px;
}

#webchat .link-definitions__list-item-box {
  display: flex;
  align-items: center;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  padding: 0px !important;
  text-decoration: none !important;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

#webchat .link-definitions__list-item-body {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 !important;
}

#webchat .link-definitions__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50% !important;
  background: #006cb7 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700;
  border: none !important;
}

#webchat .link-definitions__list-item-text {
  font-size: 14px !important;
  font-weight: 500;
  color: #006cb7;
  line-height: 1.3;
}

#webchat .link-definitions__open-in-new-window-icon {
  width: 15px;
  height: 15px;
  color: #6b7785;
  flex: 0 0 auto;
}

/* ===================================================================== */
/* Header avatar + clean header (our PHP markup / .chatbot-* classes)     */
/* ===================================================================== */
#chatbot-widget .chatbot-header-left {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
}

#chatbot-widget .chatbot-header-left .ocab-header-avatar {
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

#chatbot-widget .chatbot-header-left .chatbot-header-title {
  grid-column: 2;
}

#chatbot-widget .chatbot-header-left > p {
  grid-column: 2;
  margin: 0 !important;
  font-size: 15px !important;
  color: #8a949f !important;
  line-height: 1.3 !important;
}

/* Clean header: smaller OCAB-blue name, subtle subtitle, no availability dot,
 * thin divider. The dot/"Tillgänglig" element is hidden (not removed) so the
 * legacy offline handler that writes to #status-text never hits a null node. */
#chatbot-widget .chatbot-inline-status {
  display: none !important;
}

#chatbot-widget .chatbot-header-inner h3 {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #006cb7 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

#chatbot-widget .chatbot-header-inner {
  padding: 12px 14px 12px 16px !important;
}

#chatbot-widget .chatbot-header {
  padding-bottom: 0 !important;
  border-bottom: 1px solid #eef1f4 !important;
}

/* ===================================================================== */
/* Pin the send box to the bottom of the VISIBLE widget.                  */
/* The legacy shell uses a fixed 66vh #chatwindow + a 95px top offset      */
/* inside an 80vh widget, so once suggested actions added height the send  */
/* box dropped below the fold. In the widget we flex-fill instead: the     */
/* content fills the open widget and the transcript scrolls, so the send   */
/* box is always at the bottom. Scoped to #chatbot-widget — fullscreen     */
/* keeps its own layout. The Composer wrapper is `css-custom-properties`.  */
/* ===================================================================== */
/* The toggle JS (widget.prod.js) sets .chatbot-content to `display:block`
   inline when opening, which kills the flex column. Force it back so the
   children below can flex-fill the open widget. */
#chatbot-widget.open .chatbot-content {
  display: flex !important;
  flex-direction: column;
}

#chatbot-widget #chatbot-ui-widget {
  top: 0 !important;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
  padding-top: 75px; /* clear the fixed header (replaces the old top offset) */
  box-sizing: border-box;
}

#chatbot-widget #chatwindow {
  height: auto !important; /* override the fixed 66vh */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

#chatbot-widget #webchat {
  height: auto;
  flex: 1 1 auto;
}

#webchat {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

/* Force the Composer wrapper(s) between #webchat and .ocab-chat to fill,
   regardless of Web Chat's internal class names. */
#webchat > * {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}

/* Our own flex column (see app.jsx): the transcript scrolls; the suggested
   actions + send box are a non-scrolling footer that's always visible. This is
   the "lift the send box out of the scroll" model — the send box stays in the
   Composer React tree (needed for the hooks) but never scrolls off. */
#webchat .ocab-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative; /* anchors the upload overlay (.ocab-upload-overlay) */
}

/* Scroll-jump mask. For a LONG bot reply (a big snap-to-bottom jump), store.js
   adds .ocab-mask-scroll to #webchat to hide the transcript while it
   re-positions, then adds .ocab-mask-scroll--fade and removes the first class
   to fade it back in already in place. Stylesheet rules (not inline styles) so
   react-scroll-to-bottom's re-renders of the scrollable can't wipe them. Short
   replies are NOT masked (handled by a scroll-event pin instead), so they never
   blink. */
#webchat.ocab-mask-scroll .basic-transcript__scrollable,
#webchat.ocab-mask-scroll [class*='basic-transcript__scrollable'] {
  opacity: 0;
}
#webchat.ocab-mask-scroll--fade .basic-transcript__scrollable,
#webchat.ocab-mask-scroll--fade [class*='basic-transcript__scrollable'] {
  transition: opacity 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===================================================================== */
/* "Startar Torkel" startup loader — centre it vertically in the chat        */
/* window. The widget default (.chatbot-load-inner, style.widget.css) pushes  */
/* it ~40% down via margin-top; override here (React client only, so the      */
/* legacy production client is untouched).                                    */
/* ===================================================================== */
#loading-chatbot.chatbot-load {
  justify-content: center;
}
#loading-chatbot .chatbot-load-inner {
  height: auto;
  margin-top: 0;
}

/* ===================================================================== */
/* Image-upload loading overlay (upload-overlay.jsx) — covers the whole    */
/* chat while a photo uploads (base64 convert → Azure), with a retry on     */
/* failure. Reuses .uploader-text / .retry-button from style.css.           */
/* ===================================================================== */
#webchat .ocab-upload-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.94);
}

/* Mirror the "Startar Torkel" loader's layout (.chatbot-load-inner): the
   content sits ~40% down (margin is width-relative, like the startup loader)
   rather than dead-centre, so the upload loader reads as the same screen. */
#webchat .ocab-upload-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 40%;
}

#webchat .ocab-upload-overlay .uploader-text {
  margin: 0;
  /* #webchat sets 'Open Sans' !important (id specificity), which beats the
     legacy .uploader-text class rule now that the loader lives inside #webchat;
     restore the condensed-bold loader font. */
  font-family: 'Open Sans Condensed Bold', sans-serif !important;
}

#webchat .ocab-upload-spinner {
  transform-origin: 50% 50%;
  animation: ocab-spin 0.9s linear infinite;
}

@keyframes ocab-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  #webchat .ocab-upload-spinner { animation-duration: 2.4s; }
}

/* Two-step upload/analyze checklist inside the overlay. A 2-column grid (label,
   then status icon) — `display: contents` on each step lets its label + icon
   land directly in the grid, so the icons line up in their own column to the
   right of the text. */
#webchat .ocab-upload-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 10px;
  row-gap: 18px;
  align-items: center;
  justify-content: center;
  text-align: left;
}

#webchat .ocab-upload-step {
  display: contents;
}

#webchat .ocab-upload-step--pending .ocab-upload-step__label,
#webchat .ocab-upload-step--pending .ocab-upload-step__mark {
  opacity: 0.4;
}

/* Failed step: the text turns red (the cross icon supplies the red badge). */
#webchat .ocab-upload-step--error .ocab-upload-step__label {
  color: #d94545;
}

#webchat .ocab-upload-step__mark {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#webchat .ocab-step-icon {
  display: block;
}

/* Checkmark "pops" in when a step completes (fresh mount each transition). */
#webchat .ocab-step-icon--check {
  animation: ocabCheckPop 0.3s ease;
}

@keyframes ocabCheckPop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Match the "Startar Torkel" heading (.chatbot-load-inner h4): 31px, ocab-blue,
   Open Sans Condensed Bold (supplied by the .uploader-text class on the span).
   padding:0 cancels the legacy .uploader-text `padding: 0 40px`, which was
   pushing the label 40px away from the checkmark. */
#webchat .ocab-upload-step__label {
  font-size: 31px;
  line-height: 1.1;
  color: #006cb7;
  padding: 0;
}

#webchat .ocab-upload-done {
  margin: 10px 0 0;
  padding: 0;
  font-size: 31px;
  line-height: 1.1;
  color: #006cb7;
  animation: ocabKlartIn 0.32s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes ocabKlartIn {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #webchat .ocab-step-icon--check,
  #webchat .ocab-upload-done { animation: none; }
}

/* Retry / "Starta om Torkel" button shown under the checklist on failure. */
#webchat .ocab-upload-overlay .retry-button {
  margin-top: 16px;
  padding: 10px 24px;
  border: none;
  border-radius: 22px;
  background: #006cb7;
  color: #fff;
  font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
#webchat .ocab-upload-overlay .retry-button:hover {
  background: #005696;
}

/* Only the transcript grows; the footer (suggested actions + send box) keeps
   its natural height and stays pinned at the bottom. */
#webchat .ocab-chat > *:not(.ocab-suggested):not(.ocab-send-box):not(.ocab-footer) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Non-scrolling footer wrapper; the relative position anchors the toast. */
#webchat .ocab-footer {
  flex: 0 0 auto;
  position: relative;
}

/* Disclaimer directly under the send box (both widget + full-page). Matches the
   full-page footer's muted grey. */
#webchat .ocab-disclaimer {
  margin: 0;
  padding: 4px 14px 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 11px;
  line-height: 1.35;
  color: #7e7e7e;
  text-align: center;
}

/* Suggested actions (Ja / Nej) sit just above the send box — natural height. */
#webchat .ocab-suggested {
  flex: 0 0 auto;
  padding: 6px 13px 0;
}

#webchat .ocab-suggested:empty {
  display: none;
}

#webchat .ocab-suggested__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

#webchat .ocab-suggested__btn {
  appearance: none;
  border: none;
  background: #006cb7;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 22px;
  cursor: pointer;
  transition: background 0.15s ease;
}

#webchat .ocab-suggested__btn:hover {
  background: #0e2a45;
}

/* Send box sits above the transcript and is opaque, so it's always clickable. */
#webchat .ocab-send-box {
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
  background: #fff;
}

/* ===================================================================== */
/* Mobile: the open widget is 100dvh, but the legacy shell caps           */
/* .chatbot-content at 88vh (style.widget.css), so the transcript stops    */
/* short and the send box floats above the device bottom. Fill the widget  */
/* — same as desktop (height:100%) — so the flex chain reaches the bottom  */
/* and the send box pins there. Higher specificity + !important beats the  */
/* legacy 88vh rule; React client only (this file).                        */
/* ===================================================================== */
@media screen and (max-width: 768px) {
  #chatbot-widget.open .chatbot-content {
    height: 100% !important;
  }
}

/* ===================================================================== */
/* Thinking indicator — our component (typing-indicator.jsx, rendered via */
/* typingIndicatorMiddleware): animated sparkle + shimmering text.        */
/* ===================================================================== */
#webchat .ocab-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 4px 1rem;
}

#webchat .ocab-typing__text {
  background: linear-gradient(90deg, #aab4c0 20%, #006cb7 50%, #aab4c0 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ocabShimmer 1.6s linear infinite;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: 15px;
}

#chatbot-full-screen-app-wrap #webchat .ocab-typing__text {
  font-size: 19px;
}

/* ===================================================================== */
/* Citation modal (opens when a [N] citation is clicked). Portals outside */
/* #webchat, so target the class directly. Web Chat renders the source    */
/* text via markdown — we can only make it readable; structure depends on */
/* the bot's citation content (see notes).                                */
/* ===================================================================== */
.citation-modal-dialog__body,
.citation-modal-dialog__body .render-markdown,
.citation-modal-dialog__body .render-markdown p {
  font-family: 'Open Sans', sans-serif !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #1a2330 !important;
}

@keyframes ocabShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}