:root {
  --bg: #eef3ee;
  --bg-soft: #f7faf6;
  --bg-image: url('/assets/lua-background.png');
  --bg-overlay:
    linear-gradient(180deg, rgba(244, 248, 243, 0.22) 0%, rgba(235, 244, 237, 0.28) 44%, rgba(226, 236, 228, 0.34) 100%);
  --panel: rgba(250, 252, 248, 0.34);
  --panel-strong: rgba(250, 252, 248, 0.5);
  --glass-border: rgba(255, 255, 255, 0.34);
  --shadow-soft: 0 24px 54px rgba(30, 49, 35, 0.16);
  --shadow-deep: 0 32px 80px rgba(30, 49, 35, 0.2);
  --border: #d3ddd2;
  --text: #1e2a22;
  --muted: #66756a;
  --accent: #4f7f52;
  --accent-dark: #3c6540;
  --user: rgba(228, 241, 225, 0.76);
  --assistant: rgba(251, 253, 249, 0.68);
}

* { box-sizing: border-box; }
html {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  overflow: hidden;
  font-family: Arial, sans-serif;
  color: var(--text);
  background:
    var(--bg-overlay),
    var(--bg-image),
    linear-gradient(180deg, #eef5f0 0%, #edf3ef 38%, #e9f0eb 100%);
  background-size: cover;
  background-position: center 34%;
  background-attachment: fixed;
}

.onboarding-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 2.4vh, 24px);
  background:
    radial-gradient(circle at center, rgba(242, 248, 241, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(24, 37, 29, 0.28) 0%, rgba(24, 37, 29, 0.44) 100%);
  backdrop-filter: blur(14px);
  overflow-y: auto;
}

.onboarding-card {
  width: min(700px, 100%);
  max-height: calc(100dvh - 28px);
  background:
    linear-gradient(180deg, rgba(254, 251, 245, 0.82) 0%, rgba(244, 249, 241, 0.86) 100%);
  border: 1px solid var(--glass-border);
  border-radius: 34px;
  padding: clamp(22px, 3vh, 34px);
  box-shadow:
    var(--shadow-deep),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(22px);
  overflow: auto;
}

.onboarding-card--narrow {
  width: min(600px, 100%);
}

.onboarding-media {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(220px, 34vh, 360px);
  padding: clamp(14px, 2.4vh, 24px);
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 250, 232, 0.75), transparent 26%),
    radial-gradient(circle at 22% 78%, rgba(184, 213, 185, 0.46), transparent 34%),
    radial-gradient(circle at 80% 82%, rgba(204, 225, 208, 0.38), transparent 26%),
    linear-gradient(180deg, rgba(238, 247, 235, 0.94) 0%, rgba(223, 236, 224, 0.96) 48%, rgba(214, 228, 216, 0.96) 100%);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),
    0 18px 38px rgba(50, 70, 55, 0.08);
  overflow: hidden;
  clip-path: inset(0 round 30px);
  transform: translateZ(0);
}

.onboarding-media__video,
.onboarding-media__gif,
.onboarding-media__image {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: min(42vh, 420px);
  object-fit: contain;
  border-radius: 24px;
  clip-path: inset(0 round 24px);
  filter: drop-shadow(0 24px 34px rgba(56, 86, 67, 0.18));
}

.onboarding-media__fallback {
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  font-size: 72px;
  box-shadow: inset 0 0 0 1px rgba(202, 216, 200, 0.8);
}

.onboarding-media__audio {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 4;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(92%, 260px);
  transform: translateX(-50%);
}

.onboarding-media__audio-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.onboarding-media__audio-btn {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(79, 127, 82, 0.22);
  box-shadow: 0 14px 28px rgba(50, 70, 55, 0.14);
  font-weight: 600;
  min-width: 118px;
}

.onboarding-media__audio-status {
  margin: 0;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.76);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  box-shadow: 0 10px 20px rgba(50, 70, 55, 0.08);
}

.onboarding-media--avatarized > .onboarding-media__video,
.onboarding-media--avatarized > .onboarding-media__gif,
.onboarding-media--avatarized > .onboarding-media__image,
.onboarding-media--avatarized > .onboarding-media__fallback,
.onboarding-media--avatarized > .onboarding-media__audio {
  display: none !important;
}

.lessy-avatar-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr);
  align-items: center;
  gap: 18px;
  padding: clamp(16px, 3vh, 30px);
}

.lessy-avatar-stage__figure {
  position: relative;
  min-width: 0;
  height: 100%;
  display: grid;
  place-items: center;
}

.lessy-avatar-stage__bubble {
  position: relative;
  z-index: 4;
  display: grid;
  gap: 8px;
  max-width: 260px;
  padding: 16px 18px;
  border: 1px solid rgba(211, 221, 210, 0.8);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 18px 34px rgba(50, 70, 55, 0.12);
  color: var(--text);
  line-height: 1.35;
  animation: lessyBubbleIn 420ms ease both 320ms;
}

.lessy-avatar-stage__bubble strong {
  font-size: 19px;
}

.lessy-avatar-stage__bubble span {
  color: var(--muted);
  font-size: 15px;
}

.lessy-avatar {
  position: relative;
  display: grid;
  place-items: center;
}

.lessy-avatar__glow {
  position: absolute;
  inset: 10%;
  z-index: 0;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 250, 232, 0.72), rgba(184, 213, 185, 0.18) 58%, transparent 70%);
  filter: blur(8px);
}

.lessy-avatar__image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 24px 34px rgba(56, 86, 67, 0.18));
  transform-origin: 50% 82%;
}

.lessy-avatar--stage {
  width: min(330px, 72%);
  animation: lessyStageIntro 720ms cubic-bezier(.2,.8,.2,1) both, lessyFriendlyFloat 6200ms ease-in-out infinite 900ms;
}

.lessy-avatar-stage--settled .lessy-avatar--stage {
  animation: lessyStageSettle 700ms ease both, lessyFriendlyFloat 7600ms ease-in-out infinite 700ms;
}

.lessy-avatar-stage--settled .lessy-avatar-stage__bubble {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events: none;
}

.lessy-avatar-stage--silent .lessy-avatar--stage {
  opacity: 0.34;
}

.lessy-avatar-stage--active .lessy-avatar--stage .lessy-avatar__image,
.lessy-avatar-helper--active .lessy-avatar__image {
  animation: lessyActiveNudge 5200ms ease-in-out infinite;
}

.lessy-avatar-helper {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: grid;
  grid-template-columns: minmax(0, 280px) 84px;
  gap: 10px;
  align-items: end;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}

.lessy-avatar-helper[hidden] {
  display: none !important;
}

.lessy-avatar-helper-ready .lessy-avatar-helper {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.lessy-avatar-helper--handoff {
  z-index: 1010;
}

.lessy-avatar-helper__button {
  position: relative;
  width: 84px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: transparent;
  box-shadow: none;
  overflow: visible;
  cursor: pointer;
}

.lessy-avatar-helper__button:focus-visible {
  outline: 3px solid rgba(79, 127, 82, 0.38);
  outline-offset: 4px;
}

.lessy-avatar-helper__button .lessy-avatar {
  width: 102px;
  transform: translate(-12px, 9px);
  transition: transform 180ms ease, opacity 180ms ease;
}

.lessy-avatar-helper__button:hover .lessy-avatar,
.lessy-avatar-helper--open .lessy-avatar-helper__button .lessy-avatar {
  transform: translate(-12px, 0) scale(1.04);
}

.lessy-avatar-helper__pulse {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 8px;
  height: 58px;
  border-radius: inherit;
  border: 1px solid rgba(79, 127, 82, 0.36);
  background: rgba(247, 251, 245, 0.48);
  box-shadow: 0 16px 34px rgba(30, 49, 35, 0.12);
  animation: lessyPulse 3200ms ease-out infinite;
}

.lessy-avatar-helper__bubble {
  align-self: end;
  padding: 14px;
  border: 1px solid rgba(211, 221, 210, 0.84);
  border-radius: 18px;
  background: rgba(250, 252, 248, 0.84);
  box-shadow: 0 18px 38px rgba(30, 49, 35, 0.14);
  backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateX(10px) translateY(8px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.lessy-avatar-helper--open .lessy-avatar-helper__bubble {
  opacity: 1;
  transform: translateX(0) translateY(0);
  pointer-events: auto;
}

.lessy-avatar-helper__hint {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.45;
}

.lessy-avatar-helper__actions {
  margin-top: 10px;
}

.lessy-avatar-helper__action {
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--accent);
  color: white;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.lessy-avatar-helper__settings {
  margin-top: 8px;
}

.lessy-avatar-helper__settings summary {
  width: max-content;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style-position: inside;
}

.lessy-avatar-helper__modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 8px;
}

.lessy-avatar-helper__modes button {
  border: 1px solid rgba(201, 214, 199, 0.95);
  border-radius: 10px;
  padding: 8px 6px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.lessy-avatar-helper__modes button.is-active {
  border-color: rgba(79, 127, 82, 0.78);
  background: #e6efe4;
  color: var(--accent-dark);
}

.lessy-avatar-helper--silent {
  grid-template-columns: 68px;
}

.lessy-avatar-helper--silent:not(.lessy-avatar-helper--open) .lessy-avatar-helper__bubble {
  display: none;
}

.lessy-avatar-helper--silent .lessy-avatar-helper__button {
  width: 68px;
  height: 82px;
  opacity: 0.82;
}

.lessy-avatar-helper--silent .lessy-avatar-helper__button .lessy-avatar {
  width: 88px;
  transform: translate(-11px, 14px);
}

.lessy-avatar-helper--silent.lessy-avatar-helper--open {
  grid-template-columns: minmax(0, 260px) 68px;
}

.lessy-avatar-helper--friendly .lessy-avatar-helper__button .lessy-avatar,
.lessy-avatar-helper--active .lessy-avatar-helper__button .lessy-avatar {
  animation: lessyHelperFloat 6400ms ease-in-out infinite;
}

.lessy-avatar-helper--active .lessy-avatar-helper__pulse {
  animation-duration: 1800ms;
}

.consent-gate-active .lessy-avatar-helper {
  display: none !important;
}

@keyframes lessyStageIntro {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.92) rotate(-2deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes lessyStageSettle {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0.72;
    transform: translateY(8px) scale(0.9);
  }
}

@keyframes lessyFriendlyFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes lessyActiveNudge {
  0%, 72%, 100% { transform: translateX(0) rotate(0deg); }
  78% { transform: translateX(-4px) rotate(-1deg); }
  84% { transform: translateX(4px) rotate(1deg); }
}

@keyframes lessyHelperFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -4px; }
}

@keyframes lessyPulse {
  0% { opacity: 0.5; transform: scale(0.78); }
  80%, 100% { opacity: 0; transform: scale(1.28); }
}

@keyframes lessyBubbleIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.onboarding-copy {
  margin-top: clamp(18px, 2.2vh, 26px);
  text-align: center;
}

.onboarding-copy h1 {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 42px);
  letter-spacing: -0.03em;
}

.onboarding-copy p {
  margin: 12px auto 0;
  max-width: 540px;
  color: var(--muted);
  line-height: 1.6;
  font-size: clamp(16px, 1.9vw, 18px);
}

.onboarding-form {
  display: grid;
  gap: 12px;
  margin-top: clamp(18px, 2.2vh, 24px);
}

.onboarding-form--compact {
  margin-top: 12px;
}

.onboarding-form input {
  width: 100%;
  border: 1px solid rgba(212, 221, 206, 0.95);
  border-radius: 18px;
  padding: clamp(14px, 1.7vh, 17px) 18px;
  font: inherit;
  background: rgba(255, 255, 255, 0.74);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.03),
    0 10px 24px rgba(50, 70, 55, 0.04);
}

.onboarding-subtle {
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.onboarding-link-btn {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--accent-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
}

.onboarding-primary-link {
  color: var(--accent-dark);
  font-weight: 700;
  text-decoration: none;
}

.onboarding-primary-link:hover {
  text-decoration: underline;
}

.welcome-back {
  display: grid;
  gap: 12px;
  margin-top: clamp(18px, 2.2vh, 26px);
  text-align: center;
}

.welcome-back h1 {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 42px);
}

.welcome-back p {
  margin: 0 auto;
  max-width: 520px;
  color: var(--muted);
  line-height: 1.55;
}

.welcome-back__actions {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}

.welcome-back__login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

@media (max-height: 900px), (max-width: 1200px) {
  .onboarding-card {
    width: min(660px, 100%);
    border-radius: 30px;
  }

  .onboarding-media {
    min-height: clamp(190px, 29vh, 300px);
    border-radius: 26px;
  }

  .onboarding-media__video,
  .onboarding-media__gif,
  .onboarding-media__image {
    max-height: min(34vh, 300px);
  }

  .onboarding-copy h1 {
    font-size: clamp(26px, 4vw, 36px);
  }
}

.app {
  width: 100%;
  max-width: 100%;
  height: var(--app-viewport-height, 100dvh);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(270px, 320px) minmax(0, 1fr);
  gap: 28px;
  padding: 28px;
  background: transparent;
  overflow: hidden;
}

.admin-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: 240px minmax(320px, 1fr) minmax(380px, 1.15fr);
  background: var(--bg);
}

.admin-pane {
  min-height: 0;
  overflow-y: auto;
}

.admin-pane--nav,
.admin-pane--list,
.admin-pane--detail {
  padding: 20px;
}

.admin-pane--nav {
  border-right: 1px solid var(--border);
  background: #f0f3ee;
}

.admin-pane--list,
.admin-pane--detail {
  background: var(--bg);
}

.admin-pane--list {
  border-right: 1px solid var(--border);
}

.admin-pane__header {
  margin-bottom: 16px;
}

.admin-pane__header h1,
.admin-pane__header h2 {
  margin: 0;
}

.admin-pane__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}

.admin-nav__item {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #f7faf5;
  color: var(--text);
  padding: 12px 14px;
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.admin-nav__item:hover {
  background: #eef4ea;
}

.admin-nav__item--active {
  border-color: var(--accent);
  background: #e6efe4;
  color: var(--accent-dark);
}

.sidebar {
  background:
    linear-gradient(180deg, rgba(248, 251, 245, 0.34) 0%, rgba(240, 246, 239, 0.42) 100%);
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  backdrop-filter: blur(18px);
  padding: 20px 18px 16px;
  box-shadow:
    var(--shadow-deep),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  align-self: stretch;
  min-height: 0;
  min-width: 0;
  height: calc(var(--app-viewport-height, 100dvh) - 56px);
  max-height: calc(var(--app-viewport-height, 100dvh) - 56px);
  overflow-y: auto;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
}

.sidebar:hover,
.sidebar:focus-within {
  scrollbar-width: thin;
}

.sidebar::-webkit-scrollbar {
  width: 0;
}

.sidebar:hover::-webkit-scrollbar,
.sidebar:focus-within::-webkit-scrollbar {
  width: 7px;
}

.sidebar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(80, 105, 80, 0.28);
}

.brand {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 0 0 4px;
  background:
    linear-gradient(180deg, rgba(240, 246, 239, 0.92) 0%, rgba(240, 246, 239, 0.64) 72%, rgba(240, 246, 239, 0) 100%);
}

.brand__hero {
  position: relative;
  margin: 0 auto 8px;
  padding: 4px 0 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.brand__hero--helper {
  overflow: visible;
  outline: 0;
}

.brand__hero-image {
  display: block;
  width: min(168px, 76%);
  aspect-ratio: 1;
  max-width: 168px;
  margin: 0 8px 0 auto;
  border-radius: 999px;
  object-fit: cover;
  object-position: 50% 18%;
  filter: drop-shadow(0 18px 28px rgba(37, 54, 41, 0.2));
  animation: lessy-sidebar-float 6.5s ease-in-out infinite;
}

/* Stock Moon R1 video layer -- shares .brand__hero-image's box/circular-clip
   sizing above (same element also carries that class), hidden by default so
   only surfaceBranding.js's applyHeroVideo() explicitly revealing it (via
   .is-active, lua_cloud only, motion/data preferences already checked)
   ever makes it visible. Absolutely positioned to sit exactly over the
   <img> beneath it -- .brand__hero is already position:relative -- so
   there is never a layout shift when it appears or disappears. */
.brand__hero-video {
  display: none;
  position: absolute;
  inset: 0;
  margin: 0 8px 0 auto;
  object-position: 50% 50%;
}

.brand__hero-video.is-active {
  display: block;
}

/* A sphere doesn't need Lessy's portrait-tuned float bob, and Kai's spec
   ("ingen kontinuerlig animasjon nar idle") asks for the LUA main avatar to
   be fully still outside of the video's own inherent rotation -- scoped to
   lua_cloud only, every other surface keeps the existing float untouched.
   The drop-shadow also adds a discreet LUA lavender accent (Kai: "kan
   vurderes, men ikke gjor manen tegneserieaktig") -- a soft glow around
   the photo rather than baked into any derivative's pixels, so it applies
   identically to the static webp and the video without duplicating effort
   or risking a mismatched look between the two. */
[data-surface="lua_cloud"] .brand__hero-image {
  animation: none;
  background-color: transparent;
  filter: drop-shadow(0 18px 28px rgba(37, 54, 41, 0.2)) drop-shadow(0 0 14px rgba(197, 187, 230, 0.35));
}

[data-surface="lua_cloud"] .lessy-inline-avatar,
[data-surface="lua_cloud"] .runtime-status__icon--lessy,
[data-surface="lua_cloud"] .activity-status-icon__image {
  background-color: transparent;
}

/* Big Avigation propeller R1 (Kai, 2026-07-31): idle must be fully static
   -- overrides the default lessy-sidebar-float ambient bob the same way
   lua_cloud already opts out above. A brief intro nudge plays once per
   page load; a small, slow scale-pulse (deliberately NOT a rotation)
   plays only while the small status propeller is also active, so the two
   never look like duplicate spinners -- the small one spins continuously,
   the big one only ever breathes gently and briefly. */
[data-surface="avigation"] .brand__hero-image {
  animation: none;
}

[data-surface="avigation"] .brand__hero-image.hero-avatar--intro {
  animation: avigationHeroIntro 0.8s ease-out 1;
}

[data-surface="avigation"] .brand__hero-image.hero-avatar--active {
  animation: avigationHeroPulse 2.4s ease-in-out infinite;
}

@keyframes avigationHeroIntro {
  0% { transform: rotate(0deg) scale(1); }
  35% { transform: rotate(6deg) scale(1.015); }
  70% { transform: rotate(-3deg) scale(1.005); }
  100% { transform: rotate(0deg) scale(1); }
}

@keyframes avigationHeroPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  [data-surface="avigation"] .brand__hero-image.hero-avatar--intro,
  [data-surface="avigation"] .brand__hero-image.hero-avatar--active {
    animation: none;
  }
}

.brand__helper-bubble {
  position: absolute;
  left: 6px;
  right: auto;
  top: 24px;
  bottom: auto;
  width: min(154px, 64%);
  padding: 9px 11px 10px;
  border: 1px solid rgba(211, 221, 210, 0.72);
  border-radius: 16px 16px 16px 8px;
  background: rgba(255, 255, 255, 0.78);
  color: rgba(37, 54, 41, 0.9);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.3;
  text-align: left;
  opacity: 0;
  transform: translate(-5px, 7px);
  pointer-events: none;
  transition: opacity 900ms ease, transform 900ms ease;
  box-shadow: 0 12px 24px rgba(50, 70, 55, 0.10);
}

.brand__helper-bubble::after {
  content: "";
  position: absolute;
  right: -7px;
  top: 32px;
  width: 14px;
  height: 14px;
  border-top: 1px solid rgba(211, 221, 210, 0.72);
  border-right: 1px solid rgba(211, 221, 210, 0.72);
  background: rgba(255, 255, 255, 0.78);
  transform: rotate(45deg);
}

@keyframes lessy-sidebar-float {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

.brand__helper-bubble--visible,
.brand__hero--helper:hover .brand__helper-bubble:not(.hidden),
.brand__hero--helper:focus-within .brand__helper-bubble:not(.hidden) {
  opacity: 1;
  transform: translate(0, 0);
}

.brand__title {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.04em;
}

.brand__subtitle {
  font-size: 16px;
  color: rgba(50, 63, 53, 0.78);
  margin-bottom: 28px;
  line-height: 1.45;
}

.locale-picker {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: -2px 2px 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.locale-picker select {
  min-width: 104px;
  padding: 7px 28px 7px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.locale-picker select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.version-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e6efe4;
  color: var(--accent-dark);
  font-size: 12px;
  font-weight: 700;
}

.meta, .hint {
  margin-top: 20px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}

.debug-meta {
  display: none !important;
}

.hidden {
  display: none !important;
}

.auth-box {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: var(--panel-strong);
  box-shadow: 0 18px 34px rgba(50, 70, 55, 0.08);
  backdrop-filter: blur(18px);
}

.mobile-chat-jump {
  display: none;
}

.auth-box__header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.auth-box__mode {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auth-switch {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.auth-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.auth-form input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  background: rgba(255, 255, 255, 0.96);
}

.quiz-form {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.quiz-field {
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.quiz-field select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 12px;
  font: inherit;
  background: rgba(255, 255, 255, 0.96);
}

.quiz-status {
  margin-top: 12px;
  color: var(--accent-dark);
  font-size: 14px;
  font-weight: 700;
}

.quiz-status--error {
  color: #9a3f3f;
}

.auth-user {
  margin-top: 0;
}

.auth-user__identity {
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-user__identity-copy {
  min-width: 0;
}

.auth-user__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(79, 127, 82, 0.24);
  background: rgba(255, 255, 255, 0.64);
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 44px;
}

.auth-user__avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.auth-user__avatar-fallback {
  font-weight: 800;
  color: var(--accent-dark);
  letter-spacing: 0.02em;
}

.auth-box__header--spaced {
  margin-top: 16px;
}

.auth-user__name {
  font-weight: 700;
}

.auth-user__email {
  margin-top: 4px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 14px;
}

.auth-user__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.avatar-onboarding {
  margin-top: 10px;
  border: 1px solid rgba(79, 127, 82, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.45);
  padding: 10px 11px;
  display: grid;
  gap: 9px;
}

.avatar-onboarding__text {
  margin: 0;
  color: rgba(37, 54, 41, 0.82);
  font-size: 13px;
  line-height: 1.4;
}

.avatar-onboarding__actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

.avatar-onboarding__dismiss {
  opacity: 0.88;
}

.mobile-profile-inline {
  display: none;
}

.mobile-profile-inline__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.mobile-profile-inline__grid div,
.mobile-profile-inline__signals {
  border: 1px solid rgba(79, 127, 82, 0.12);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.46);
  padding: 9px 10px;
}

.mobile-profile-inline__grid span {
  display: block;
  color: rgba(50, 63, 53, 0.62);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.mobile-profile-inline__grid strong,
.mobile-profile-inline__signals strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.mobile-profile-inline__signals p {
  margin: 5px 0 0;
  color: rgba(37, 54, 41, 0.72);
  font-size: 13px;
  line-height: 1.45;
}

.mobile-profile-inline__avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(79, 127, 82, 0.16);
  background: rgba(255, 255, 255, 0.48);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.mobile-profile-inline__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-profile-inline__avatar--fallback span {
  font-weight: 800;
  color: var(--accent-dark);
}

.profile-panel {
  display: grid;
  gap: 12px;
}

.profile-panel--main {
  align-self: center;
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.24), transparent 28%),
    linear-gradient(180deg, rgba(246, 250, 241, 0.58) 0%, rgba(227, 236, 219, 0.66) 100%);
  box-shadow:
    0 30px 70px rgba(38, 56, 43, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(18px);
}

/* conversations-panel: scrollable panel with sticky header */
.conversations-panel {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 80px);
  overflow: hidden;
}
.conversations-panel .profile-panel__header {
  flex-shrink: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(201, 214, 199, 0.4);
  margin-bottom: 4px;
}
.conversations-panel #allConversations {
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 0;
  padding-right: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(79, 127, 82, 0.3) transparent;
}

.profile-panel__header h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
}

.profile-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.profile-panel__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
}

.profile-panel__list div {
  display: grid;
  gap: 2px;
}

.profile-panel__list dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-panel__list dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 17px;
}

.profile-panel__signals {
  padding: 16px 18px;
  border: 1px solid rgba(79, 127, 82, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.34);
}

.profile-panel__signals p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.profile-avatar-section {
  border: 1px solid rgba(79, 127, 82, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.34);
  padding: 14px 16px;
  display: grid;
  gap: 12px;
}

.profile-avatar-section__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.profile-avatar-section__header strong {
  font-size: 16px;
}

.profile-avatar-section__header span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-avatar-section__body {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.profile-avatar-preview {
  width: 90px;
  height: 90px;
  border-radius: 18px;
  border: 1px solid rgba(79, 127, 82, 0.22);
  background: rgba(255, 255, 255, 0.62);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.profile-avatar-preview__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar-preview__fallback {
  font-size: 26px;
  font-weight: 800;
  color: var(--accent-dark);
  letter-spacing: 0.03em;
}

.profile-avatar-section__controls {
  display: grid;
  gap: 9px;
}

.profile-avatar-section__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.profile-avatar-section__status {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(44, 82, 46, 0.88);
}

.profile-avatar-section__privacy {
  margin: 0;
  color: rgba(37, 54, 41, 0.72);
  font-size: 13px;
  line-height: 1.45;
}

.profile-language-polish-section {
  border: 1px solid rgba(79, 127, 82, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.34);
  padding: 14px 16px;
  display: grid;
  gap: 8px;
}

.profile-language-polish-section__header strong {
  font-size: 16px;
}

.profile-language-polish-section p {
  margin: 0;
  color: rgba(37, 54, 41, 0.72);
  font-size: 13px;
  line-height: 1.45;
}

.profile-language-polish-section__label {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.profile-language-polish-section__select {
  border: 1px solid rgba(79, 127, 82, 0.28);
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent-dark);
}

.profile-language-polish-section__status {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: rgba(44, 82, 46, 0.88);
  min-height: 1em;
}

.language-polish-notice {
  margin: 4px 0 0;
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
}

.consent-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  width: min(920px, calc(100% - 48px));
  max-height: calc(100% - 48px);
  min-height: 0;
  margin: 24px auto;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.consent-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex: 0 0 auto;
  padding: clamp(22px, 3vw, 34px) clamp(22px, 4vw, 38px) 14px;
}

.consent-panel__copy {
  display: grid;
  gap: 10px;
}

.consent-panel__copy h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
}

.consent-panel__copy .welcome-card__eyebrow {
  margin-bottom: 0;
}

.consent-panel__intro {
  margin: 0;
  max-width: 640px;
  color: rgba(37, 54, 41, 0.82);
  font-size: 17px;
  line-height: 1.55;
}

.consent-panel__guide {
  margin: 0;
  max-width: 700px;
  color: rgba(37, 54, 41, 0.68);
  font-size: 15px;
  line-height: 1.5;
}

/* AC-2026-09-09-16: organisation-managed account notice on the terms panel. */
.consent-panel__notice {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(31, 95, 191, 0.08);
  color: inherit;
  font-size: 0.92rem;
  line-height: 1.4;
}

.consent-panel__content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 clamp(22px, 4vw, 38px) 18px;
  scrollbar-gutter: stable;
}

.consent-panel__policies {
  display: grid;
  gap: 14px;
}

.consent-policy {
  padding: 18px 20px;
  border: 1px solid rgba(79, 127, 82, 0.14);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.34);
  box-shadow: 0 14px 30px rgba(50, 70, 55, 0.06);
  scroll-margin-top: 18px;
}

.consent-policy__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.consent-policy__headline {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.consent-policy__headline h2 {
  margin: 0;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.2;
}

.consent-policy__badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(162, 118, 29, 0.12);
  color: #7c5b16;
  font-size: 12px;
  font-weight: 800;
}

.consent-policy__badge--accepted {
  background: rgba(79, 127, 82, 0.12);
  color: var(--accent-dark);
}

.consent-policy__summary,
.consent-policy__body {
  color: rgba(37, 54, 41, 0.86);
  line-height: 1.6;
}

.consent-policy__summary {
  margin-top: 14px;
}

.consent-policy__body {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(79, 127, 82, 0.12);
}

.consent-policy__summary p,
.consent-policy__body p,
.consent-policy__summary ul,
.consent-policy__body ul,
.consent-policy__summary h2,
.consent-policy__summary h3,
.consent-policy__body h2,
.consent-policy__body h3 {
  margin-top: 0;
}

.consent-policy__summary p + p,
.consent-policy__body p + p,
.consent-policy__summary ul + p,
.consent-policy__body ul + p,
.consent-policy__body h2 + p,
.consent-policy__body h3 + p {
  margin-top: 12px;
}

.consent-policy__summary ul,
.consent-policy__body ul {
  padding-left: 20px;
}

.consent-policy__summary li + li,
.consent-policy__body li + li {
  margin-top: 6px;
}

.consent-policy__body h2,
.consent-policy__body h3 {
  font-size: 16px;
  letter-spacing: 0;
}

.consent-panel__checkbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border: 1px solid rgba(79, 127, 82, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.3);
  font-weight: 700;
  line-height: 1.45;
}

.consent-panel__checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

.consent-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.consent-panel__footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: grid;
  gap: 12px;
  flex: 0 0 auto;
  padding: 14px clamp(22px, 4vw, 38px) clamp(18px, 3vw, 26px);
  border-top: 1px solid rgba(255, 255, 255, 0.26);
  background:
    linear-gradient(180deg, rgba(237, 245, 232, 0.78) 0%, rgba(223, 235, 216, 0.9) 100%);
  box-shadow: 0 -18px 34px rgba(43, 61, 47, 0.08);
  backdrop-filter: blur(16px);
}

.mini-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 9px;
  max-height: 252px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.mini-list--expanded {
  max-height: calc(100dvh - 340px);
}

.mini-list__item {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  color: var(--text);
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(50, 70, 55, 0.06);
}

.mini-list__item:hover {
  background: #eef4ea;
}

.mini-list__item:disabled,
.all-conversations-list__item:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.mini-list__item--active {
  border-color: var(--accent);
  background: #e6efe4;
}

.mini-list__title {
  display: block;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-list__meta {
  display: none;
}

.mini-link {
  width: auto;
  flex: 0 0 auto;
  margin-top: 0;
  border: 1px solid rgba(201, 214, 199, 0.95);
  background: rgba(255, 255, 255, 0.7);
  color: var(--accent-dark);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

.mini-link:hover {
  color: var(--text);
}

.all-conversations-list {
  display: grid;
  gap: 8px;
}

.all-conversations-list__item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(201, 214, 199, 0.88);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.36);
  color: var(--text);
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
}

.all-conversations-list__item:hover {
  background: #eef4ea;
}

.all-conversations-list__item--active {
  border-color: var(--accent);
  background: #e6efe4;
}

.all-conversations-list__title {
  flex: 1 1 auto;
  min-width: 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-weight: 800;
  line-height: 1.35;
}

.all-conversations-list__meta {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  padding-top: 2px;
  white-space: nowrap;
}

.sidebar__footer {
  margin-top: auto;
  padding-top: 12px;
  color: var(--muted);
}

.chat {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: calc(var(--app-viewport-height, 100dvh) - 56px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 34px;
  background:
    radial-gradient(circle at top right, rgba(226, 239, 229, 0.22), transparent 24%),
    linear-gradient(180deg, rgba(251, 253, 249, 0.12) 0%, rgba(241, 246, 242, 0.18) 100%);
  backdrop-filter: blur(10px);
  box-shadow: 0 24px 60px rgba(40, 58, 45, 0.14);
  overflow: hidden;
}

.chat--idle {
  justify-content: stretch;
}

.chat--profile {
  justify-content: center;
}

.chat--consent {
  justify-content: stretch;
}

.admin-page {
  padding: 24px;
  gap: 20px;
}

.admin-header h1 {
  margin: 0;
  font-size: 30px;
}

.admin-subtitle {
  margin: 8px 0 0;
  color: var(--muted);
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.admin-card,
.admin-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 1px rgba(0,0,0,0.03);
}

.admin-card {
  padding: 18px;
}

.admin-card__label {
  font-size: 13px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-card__value {
  margin-top: 10px;
  font-size: 30px;
  font-weight: 700;
}

.admin-section__header {
  padding: 18px 18px 0;
}

.admin-section__header h2 {
  margin: 0;
  font-size: 20px;
}

.admin-section__meta {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.admin-list {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-list-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  background: #fbfcfa;
}

.admin-list-item--clickable {
  width: 100%;
  appearance: none;
  text-align: left;
  font: inherit;
}

.admin-list-item--selected {
  border-color: var(--accent);
  background: #f3f8f2;
  box-shadow: 0 0 0 3px rgba(79,127,82,0.12);
}

.admin-list-item__top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 14px;
}

.admin-list-item__body {
  display: grid;
  gap: 6px;
  line-height: 1.5;
  color: var(--text);
}

.admin-list-item__actions {
  margin-top: 10px;
}

.admin-list-item__actions--portal-workspace {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.secondary-btn {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f7faf5;
  color: var(--text);
  padding: 9px 12px;
  font-weight: 700;
  cursor: pointer;
}

.secondary-btn:hover {
  background: #eef4ea;
}

.secondary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.secondary-btn--small {
  padding: 8px 10px;
  font-size: 13px;
}

.secondary-btn.mini-link {
  width: auto;
  flex: 0 0 auto;
  margin-top: 0;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

.admin-pre {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #f7faf5;
  white-space: pre-wrap;
  word-break: break-word;
  font: 12px/1.5 Consolas, Monaco, monospace;
}

.admin-pre--compact {
  max-height: 220px;
  overflow: auto;
}

.admin-steps {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: var(--text);
}

.admin-section--portal-workspace {
  overflow: hidden;
}

.admin-filterbar--portal-workspace {
  align-items: center;
}

.admin-shell--portal-cms {
  grid-template-columns: 160px minmax(760px, 2.6fr) minmax(220px, 0.58fr);
}

.admin-portal-studio {
  display: grid;
  grid-template-columns: minmax(156px, 180px) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.admin-portal-studio__sidebar,
.admin-portal-studio__preview {
  min-width: 0;
}

.admin-list--portal-sidebar {
  padding-top: 0;
}

.admin-list--portal-side-map {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.admin-list--portal-side-map .admin-list-item,
.admin-list--portal-sidebar > .admin-list-item {
  padding: 7px 8px;
}

.admin-list--portal-preview {
  padding-top: 0;
}

.admin-section--portal-preview {
  min-height: 100%;
}

.admin-portal-preview-hero,
.admin-portal-preview-card {
  width: 100%;
  border: 1px solid rgba(79, 127, 82, 0.16);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(243, 248, 241, 0.92) 100%);
  color: var(--text);
  padding: 16px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 18px 32px rgba(45, 63, 50, 0.08);
}

.admin-portal-preview-hero:hover,
.admin-portal-preview-card:hover {
  transform: translateY(-1px);
  border-color: rgba(79, 127, 82, 0.32);
}

.admin-portal-preview-hero--selected,
.admin-portal-preview-card--selected {
  border-color: rgba(79, 127, 82, 0.48);
  box-shadow: 0 0 0 3px rgba(79, 127, 82, 0.12), 0 18px 32px rgba(45, 63, 50, 0.08);
}

.admin-portal-preview-hero {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.admin-portal-preview-hero__title {
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.02;
}

.admin-portal-preview-hero__summary {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 62ch;
}

.admin-portal-preview-hero__body,
.admin-portal-preview-card__body {
  color: var(--muted);
}

.admin-portal-preview-hero__body p,
.admin-portal-preview-card__body p,
.admin-portal-preview-hero__body ul,
.admin-portal-preview-card__body ul,
.admin-portal-preview-hero__body ol,
.admin-portal-preview-card__body ol {
  margin: 0;
  line-height: 1.55;
}

.admin-portal-preview-hero__body p + p,
.admin-portal-preview-card__body p + p,
.admin-portal-preview-hero__body ul + p,
.admin-portal-preview-card__body ul + p,
.admin-portal-preview-hero__body p + ul,
.admin-portal-preview-card__body p + ul,
.admin-portal-preview-hero__body p + ol,
.admin-portal-preview-card__body p + ol {
  margin-top: 8px;
}

.admin-portal-preview-hero__body ul,
.admin-portal-preview-card__body ul,
.admin-portal-preview-hero__body ol,
.admin-portal-preview-card__body ol {
  padding-left: 20px;
}

.admin-portal-preview-section {
  display: grid;
  gap: 12px;
}

.admin-portal-preview-section__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.admin-portal-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
}

.admin-portal-preview-card {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 220px;
}

.admin-portal-preview-card__header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.admin-portal-preview-card__label {
  color: var(--forest);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.admin-portal-preview-card__eyebrow {
  color: var(--forest);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.admin-portal-preview-card__title {
  font-size: 20px;
  line-height: 1.18;
}

.admin-portal-preview-card__body p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.admin-portal-preview-card__media {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(243, 248, 241, 0.92);
  min-height: 140px;
}

.admin-portal-preview-card__media img {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: contain;
  object-position: center;
  background: rgba(255, 255, 255, 0.58);
}

/* Hero preview: 16:9 aspect ratio, cover-fill */
.admin-portal-preview-hero .admin-portal-preview-card__media img,
.admin-portal-preview-card__media--hero img {
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.admin-portal-preview-card__media-fallback {
  display: grid;
  place-items: center;
  min-height: 140px;
  padding: 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  background: rgba(243, 248, 241, 0.76);
}

.admin-portal-preview-card__media-fallback[hidden] {
  display: none;
}

.admin-portal-preview-card__media--broken img {
  display: none;
}

.admin-portal-preview-card__media--broken .admin-portal-preview-card__media-fallback {
  display: grid;
}

.admin-portal-preview-card__media--missing {
  display: grid;
  place-items: center;
  min-height: 140px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  background: rgba(243, 248, 241, 0.76);
}

.admin-section__meta--spaced {
  margin-top: 12px;
}

.admin-media-upload-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.admin-media-upload-button input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.admin-media-upload-button[aria-busy="true"] {
  opacity: 0.55;
  pointer-events: none;
  cursor: wait;
}

.admin-portal-media-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.admin-portal-media-library__item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(82, 109, 88, 0.18);
  border-radius: 12px;
  background: rgba(247, 250, 246, 0.94);
}

.admin-portal-media-library__item--broken {
  border-color: rgba(180, 100, 20, 0.35);
  background: rgba(255, 248, 240, 0.95);
  opacity: 0.82;
}

.admin-media-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  letter-spacing: 0.01em;
}

.admin-media-status-badge--missing {
  background: rgba(180, 100, 20, 0.12);
  color: #a05010;
}

.admin-portal-media-library__meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-portal-media-library__meta strong,
.admin-portal-media-library__meta span {
  overflow-wrap: anywhere;
}

.admin-portal-media-library__meta span {
  color: var(--muted);
  font-size: 12px;
}

.admin-media-technical {
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(82, 109, 88, 0.16);
  border-radius: 12px;
  background: rgba(247, 250, 246, 0.82);
}

.admin-media-technical summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  color: var(--forest);
}

.admin-media-technical .admin-delete-columns {
  margin-top: 10px;
}

/* ============================================================
   Media Library Modal
   ============================================================ */

.media-lib-modal {
  border: none;
  padding: 0;
  border-radius: 16px;
  max-width: min(1100px, 96vw);
  width: 96vw;
  max-height: 90vh;
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.28);
  background: #f7faf6;
  overflow: hidden;
}

.media-lib-modal[open] {
  display: flex;
  flex-direction: column;
}

.media-lib-modal::backdrop {
  background: rgba(0, 0, 0, 0.48);
  backdrop-filter: blur(3px);
}

/* Header */
.media-lib-modal__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid rgba(82, 109, 88, 0.15);
  flex-shrink: 0;
}

.media-lib-modal__title {
  flex: 1;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--forest, #1a3a24);
}

.media-lib-modal__count {
  font-size: 12px;
  color: var(--muted, #5a7060);
  font-weight: 500;
}

.media-lib-modal__close {
  flex-shrink: 0;
}

.media-lib-upload-label {
  flex-shrink: 0;
  cursor: pointer;
}

.media-lib-upload-status {
  padding: 8px 20px;
  font-size: 12px;
  flex-shrink: 0;
}

.media-lib-upload-status__uploading {
  color: var(--muted, #5a7060);
}

.media-lib-upload-status__ok {
  color: #217a40;
  background: rgba(33, 122, 64, 0.07);
  border: 1px solid rgba(33, 122, 64, 0.18);
  border-radius: 5px;
  padding: 5px 8px;
}

.media-lib-upload-status__error {
  color: #7a2121;
  background: rgba(180, 30, 30, 0.07);
  border: 1px solid rgba(180, 30, 30, 0.18);
  border-radius: 5px;
  padding: 5px 8px;
}

/* Toolbar */
.media-lib-modal__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(82, 109, 88, 0.10);
  flex-shrink: 0;
  background: rgba(247, 250, 246, 0.7);
}

.media-lib-modal__search {
  flex: 1;
  min-width: 160px;
  max-width: 340px;
  font-size: 13px;
}

.media-lib-modal__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.media-lib-filter-btn {
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 20px;
  border: 1px solid rgba(82, 109, 88, 0.25);
  background: transparent;
  color: var(--forest, #1a3a24);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}

.media-lib-filter-btn:hover {
  background: rgba(82, 109, 88, 0.08);
}

.media-lib-filter-btn.is-active {
  background: rgba(82, 109, 88, 0.15);
  border-color: rgba(82, 109, 88, 0.5);
  font-weight: 700;
}

/* Body — grid + detail side by side */
.media-lib-modal__body {
  display: grid;
  grid-template-columns: 1fr 280px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

.media-lib-modal__grid-wrap {
  overflow-y: auto;
  padding: 14px 16px;
}

.media-lib-modal__detail-wrap {
  border-left: 1px solid rgba(82, 109, 88, 0.14);
  overflow-y: auto;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.6);
}

/* Asset grid */
.media-lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

/* Asset card */
.media-lib-card {
  display: flex;
  flex-direction: column;
  border: 2px solid rgba(82, 109, 88, 0.16);
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  background: #fff;
  text-align: left;
  transition: border-color 0.14s, box-shadow 0.14s;
  width: 100%;
  padding: 0;
}

.media-lib-card:hover {
  border-color: rgba(82, 109, 88, 0.5);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.media-lib-card.is-selected {
  border-color: var(--forest, #1a3a24);
  box-shadow: 0 0 0 2px rgba(59, 122, 87, 0.2);
}

.media-lib-card.is-in-field {
  border-color: rgba(59, 122, 87, 0.6);
  background: rgba(59, 122, 87, 0.06);
}

.media-lib-card__thumb {
  aspect-ratio: 1;
  overflow: hidden;
  background: rgba(247, 250, 246, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.media-lib-card__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.media-lib-card__type-icon {
  font-size: 32px;
  line-height: 1;
  opacity: 0.7;
}

.media-lib-card__meta {
  padding: 6px 8px 8px;
  display: grid;
  gap: 2px;
}

.media-lib-card__key {
  font-size: 11px;
  font-weight: 600;
  overflow-wrap: anywhere;
  color: var(--forest, #1a3a24);
  line-height: 1.3;
}

.media-lib-card__type {
  font-size: 10px;
  color: var(--muted, #5a7060);
}

.media-lib-card__usage {
  font-size: 10px;
  color: var(--muted, #5a7060);
  font-weight: 600;
}

.media-lib-card__usage--zero {
  color: rgba(90, 112, 96, 0.55);
  font-weight: 400;
}

.media-lib-card__badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 2px;
}

.media-lib-card__badge--in-field {
  background: rgba(59, 122, 87, 0.14);
  color: var(--forest, #1a3a24);
}

.media-lib-card__badge--missing {
  background: rgba(180, 100, 20, 0.12);
  color: #a05010;
}

/* State messages */
.media-lib-loading,
.media-lib-empty,
.media-lib-error {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--muted, #5a7060);
}

.media-lib-error {
  color: #a05010;
}

.media-lib-detail-empty {
  padding: 20px 8px;
  font-size: 12px;
  color: var(--muted, #5a7060);
  text-align: center;
}

/* Detail panel */
.media-lib-detail {
  display: grid;
  gap: 10px;
}

.media-lib-detail__preview {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
  border-radius: 8px;
  background: rgba(247, 250, 246, 0.9);
  display: block;
}

.media-lib-detail__preview-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 80px;
  font-size: 40px;
  background: rgba(247, 250, 246, 0.9);
  border-radius: 8px;
}

.media-lib-detail__meta {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(82, 109, 88, 0.13);
  border-radius: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.7);
}

.media-lib-detail__row {
  display: flex;
  gap: 8px;
  font-size: 11px;
  line-height: 1.4;
}

.media-lib-detail__label {
  color: var(--muted, #5a7060);
  flex: 0 0 80px;
  font-weight: 500;
}

.media-lib-detail__value {
  color: var(--forest, #1a3a24);
  overflow-wrap: anywhere;
  flex: 1;
}

.media-lib-detail__url {
  font-size: 10px;
  color: var(--muted, #5a7060);
  overflow-wrap: anywhere;
  font-family: monospace;
}

.media-lib-detail__section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--forest, #1a3a24);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 4px;
}

.media-lib-detail__usage-list {
  display: grid;
  gap: 4px;
}

.media-lib-detail__usage-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: 6px;
  font-size: 11px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(247, 250, 246, 0.9);
  border: 1px solid rgba(82, 109, 88, 0.12);
  align-items: center;
}

.media-lib-detail__usage-row.is-live {
  background: rgba(82, 109, 88, 0.08);
  border-color: rgba(82, 109, 88, 0.25);
}

.media-lib-detail__usage-page {
  font-weight: 600;
  color: var(--forest, #1a3a24);
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-lib-detail__usage-locale,
.media-lib-detail__usage-slot {
  color: var(--muted, #5a7060);
  font-size: 10px;
}

.media-lib-detail__usage-status {
  font-size: 10px;
  font-weight: 600;
  color: var(--forest, #1a3a24);
}

.media-lib-detail__usage-loading,
.media-lib-detail__usage-empty {
  font-size: 11px;
  color: var(--muted, #5a7060);
  padding: 6px 0;
}

.media-lib-detail__notice {
  font-size: 11px;
  color: var(--muted, #5a7060);
  font-style: italic;
  margin-top: 4px;
}

.media-lib-detail__actions {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(82, 109, 88, 0.12);
}

.media-lib-select-btn {
  width: 100%;
  font-size: 13px;
  padding: 8px 12px;
}

.media-lib-detail__confirmed {
  font-size: 12px;
  color: var(--forest, #1a3a24);
  background: rgba(59, 122, 87, 0.1);
  border: 1px solid rgba(59, 122, 87, 0.25);
  border-radius: 6px;
  padding: 8px 10px;
  line-height: 1.5;
}

.media-lib-detail__confirmed small {
  color: var(--muted, #5a7060);
  font-size: 11px;
}

.media-lib-detail__type-warning {
  font-size: 11px;
  color: #7a5a20;
  background: rgba(180, 130, 30, 0.08);
  border: 1px solid rgba(180, 130, 30, 0.22);
  border-radius: 5px;
  padding: 6px 8px;
  margin-bottom: 8px;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .media-lib-modal__body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .media-lib-modal__detail-wrap {
    border-left: none;
    border-top: 1px solid rgba(82, 109, 88, 0.14);
    max-height: 280px;
  }

  .media-lib-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }
}

/* ============================================================
   end Media Library Modal
   ============================================================ */

/* ============================================================
   Media Library standalone admin section
   ============================================================ */

.media-lib-section__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(82, 109, 88, 0.12);
  background: var(--background, #fff);
  position: sticky;
  top: 0;
  z-index: 2;
}

.media-lib-section__search {
  flex: 1 1 160px;
  min-width: 120px;
  max-width: 260px;
  font-size: 13px;
  padding: 6px 10px;
  height: 32px;
}

.media-lib-section__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.media-lib-section__filter-btn {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
}

.media-lib-section__filter-btn.is-active {
  background: var(--forest, #1a3a24);
  color: #fff;
  border-color: var(--forest, #1a3a24);
}

.media-lib-section__grid {
  padding: 12px 14px;
  overflow-y: auto;
}

/* Upload button in standalone Media Library toolbar */
.media-lib-section__upload-label {
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.media-lib-section__upload-label.is-busy {
  opacity: 0.6;
  pointer-events: none;
}

/* Upload status banner below toolbar */
.media-lib-section__upload-status--ok {
  padding: 6px 14px;
  font-size: 12px;
  color: #1c5c2a;
  background: rgba(28, 92, 42, 0.08);
  border-bottom: 1px solid rgba(28, 92, 42, 0.15);
}

.media-lib-section__upload-status--loading {
  padding: 6px 14px;
  font-size: 12px;
  color: var(--muted, #66756a);
  background: rgba(100, 120, 106, 0.07);
  border-bottom: 1px solid rgba(100, 120, 106, 0.15);
}

.media-lib-section__upload-status--error {
  padding: 6px 14px;
  font-size: 12px;
  color: #8b1a1a;
  background: rgba(139, 26, 26, 0.07);
  border-bottom: 1px solid rgba(139, 26, 26, 0.18);
}

/* Document picker button — shown next to CTA/URL text inputs in Portal CMS */
.admin-doc-pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  font-size: 11px;
  padding: 3px 9px;
  opacity: 0.85;
}

.admin-doc-pick-btn:hover {
  opacity: 1;
}

/* Hint text shown below selected document URL in modal detail */
.media-lib-detail__doc-url {
  margin-top: 5px;
  font-size: 11px;
  color: var(--muted, #66756a);
  word-break: break-all;
}

/* "Viser opplastede dokumenter" hint in document-link modal toolbar */
.media-lib-modal__doc-hint {
  font-size: 11px;
  color: var(--muted, #66756a);
  padding: 2px 4px;
  align-self: center;
}

/* Download / open link for document assets in detail pane */
.media-lib-detail__download {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 14px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent, #4f7f52);
  border: 1px solid var(--accent, #4f7f52);
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

.media-lib-detail__download:hover {
  background: var(--accent, #4f7f52);
  color: #fff;
}

.media-lib-detail__notice--readonly {
  background: rgba(82, 109, 88, 0.05);
  border-color: rgba(82, 109, 88, 0.18);
  color: var(--forest, #1a3a24);
}

/* Archive section — standalone Mediabibliotek */
.media-lib-archive {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(82, 109, 88, 0.12);
}

.media-lib-archive__info {
  font-size: 11px;
  color: var(--muted, #5a7060);
  margin-bottom: 8px;
  line-height: 1.5;
}

.media-lib-archive__blocked {
  font-size: 11px;
  color: var(--muted, #5a7060);
  font-style: italic;
}

.media-lib-archive__btn {
  font-size: 12px;
  padding: 6px 14px;
  background: rgba(120, 60, 20, 0.06);
  color: #7a3a10;
  border: 1px solid rgba(120, 60, 20, 0.22);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s;
}

.media-lib-archive__btn:hover {
  background: rgba(120, 60, 20, 0.13);
}

.media-lib-archive__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.media-lib-archive__confirm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
  background: rgba(120, 60, 20, 0.05);
  border: 1px solid rgba(120, 60, 20, 0.18);
  border-radius: 6px;
  font-size: 12px;
  color: #7a3a10;
}

.media-lib-archive__confirm p {
  margin: 0;
  line-height: 1.5;
}

.media-lib-archive__confirm-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.media-lib-archive__confirm-yes {
  font-size: 12px;
  padding: 5px 12px;
  background: #7a3a10;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.media-lib-archive__confirm-yes:hover {
  background: #5a2a08;
}

.media-lib-archive__confirm-yes:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.media-lib-archive__confirm-cancel {
  font-size: 12px;
  padding: 5px 12px;
  background: transparent;
  color: var(--muted, #5a7060);
  border: 1px solid rgba(82, 109, 88, 0.3);
  border-radius: 4px;
  cursor: pointer;
}

/* Danger variant — permanent delete */
.media-lib-archive__confirm--danger {
  background: rgba(150, 30, 15, 0.04);
  border-color: rgba(150, 30, 15, 0.2);
  color: #8a2010;
}

.media-lib-archive__btn--danger {
  background: rgba(150, 30, 15, 0.06);
  color: #8a2010;
  border-color: rgba(150, 30, 15, 0.22);
}

.media-lib-archive__btn--danger:hover {
  background: rgba(150, 30, 15, 0.14);
}

.media-lib-archive__delete-yes {
  font-size: 12px;
  padding: 5px 12px;
  background: #8a2010;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.media-lib-archive__delete-yes:hover {
  background: #6a1508;
}

.media-lib-archive__delete-yes:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Multiple action buttons side-by-side */
.media-lib-archive__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.media-lib-archive__success {
  font-size: 12px;
  color: var(--forest, #1a3a24);
  background: rgba(59, 122, 87, 0.08);
  border: 1px solid rgba(59, 122, 87, 0.22);
  border-radius: 5px;
  padding: 8px 10px;
  line-height: 1.5;
}

.media-lib-archive__error {
  font-size: 11px;
  color: #7a1a10;
  background: rgba(180, 30, 20, 0.06);
  border: 1px solid rgba(180, 30, 20, 0.18);
  border-radius: 5px;
  padding: 8px 10px;
  line-height: 1.5;
}

/* Metadata edit section */
.media-lib-meta-edit {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(82, 109, 88, 0.12);
}

.media-lib-meta-edit__blocked {
  font-size: 11px;
  color: var(--muted, #5a7060);
  font-style: italic;
}

.media-lib-meta-edit__btn {
  font-size: 12px;
  padding: 5px 12px;
  background: transparent;
  color: var(--forest, #1a3a24);
  border: 1px solid rgba(82, 109, 88, 0.35);
  border-radius: 4px;
  cursor: pointer;
}

.media-lib-meta-edit__btn:hover {
  background: rgba(82, 109, 88, 0.07);
}

.media-lib-meta-edit__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.media-lib-meta-edit__field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.media-lib-meta-edit__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--forest, #1a3a24);
  display: flex;
  align-items: center;
  gap: 6px;
}

.media-lib-meta-edit__admin-badge {
  font-size: 10px;
  font-weight: 400;
  background: rgba(82, 109, 88, 0.1);
  color: var(--muted, #5a7060);
  padding: 1px 5px;
  border-radius: 3px;
}

.media-lib-meta-edit__input,
.media-lib-meta-edit__textarea {
  font-size: 12px;
  padding: 5px 8px;
}

.media-lib-meta-edit__textarea {
  resize: vertical;
  min-height: 50px;
}

.media-lib-meta-edit__hint {
  font-size: 10px;
  color: var(--muted, #5a7060);
  line-height: 1.4;
}

.media-lib-meta-edit__actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.media-lib-meta-edit__save {
  font-size: 12px;
  padding: 5px 14px;
}

.media-lib-meta-edit__cancel {
  font-size: 12px;
  padding: 5px 12px;
}

.media-lib-meta-edit__success {
  font-size: 12px;
  color: var(--forest, #1a3a24);
  background: rgba(59, 122, 87, 0.08);
  border: 1px solid rgba(59, 122, 87, 0.22);
  border-radius: 5px;
  padding: 6px 10px;
  margin-bottom: 6px;
}

.media-lib-meta-edit__error {
  font-size: 11px;
  color: #7a1a10;
  background: rgba(180, 30, 20, 0.06);
  border: 1px solid rgba(180, 30, 20, 0.18);
  border-radius: 5px;
  padding: 6px 10px;
  margin-bottom: 6px;
}

/* ============================================================
   end Media Library standalone admin section
   ============================================================ */

.admin-portal-preview-highlights,
.admin-portal-preview-bullets {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: var(--muted);
}

.admin-portal-preview-highlights li {
  display: grid;
  gap: 2px;
}

.admin-portal-preview-highlights strong {
  color: var(--text);
  font-size: 13px;
}

.admin-portal-preview-card__footer {
  color: var(--forest);
  font-size: 13px;
  font-weight: 800;
}

.admin-row-meta--wrap {
  align-items: start;
}

.admin-field-usage {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

.admin-field-hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.admin-field-readonly {
  display: grid;
  gap: 8px;
}

.admin-field-readonly__value {
  min-height: 46px;
  border: 1px dashed rgba(79, 127, 82, 0.24);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  padding: 12px 14px;
  color: var(--text);
}

.admin-richtext-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.admin-richtext-toolbar .secondary-btn {
  min-height: 32px;
}

.admin-list-item--portal-status {
  background:
    linear-gradient(180deg, rgba(247, 250, 245, 0.96) 0%, rgba(242, 247, 240, 0.92) 100%);
}

.admin-portal-site-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.admin-portal-site-card {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
  border: 1px solid rgba(79, 127, 82, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 16px 28px rgba(43, 61, 47, 0.06);
}

.admin-portal-site-card--selected {
  border-color: rgba(79, 127, 82, 0.4);
  box-shadow: 0 18px 32px rgba(43, 61, 47, 0.1);
}

.admin-portal-site-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  min-height: 92px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(79, 127, 82, 0.14);
  background: linear-gradient(180deg, rgba(245, 249, 243, 0.92), rgba(228, 237, 224, 0.84));
}

.admin-portal-site-card__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.admin-portal-site-card__thumb-placeholder {
  padding: 12px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.admin-portal-site-card__body {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.admin-portal-site-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.admin-portal-site-card__domain {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent-dark);
  word-break: break-word;
}

.admin-section--portal-launcher {
  background:
    linear-gradient(180deg, rgba(247, 250, 245, 0.95) 0%, rgba(241, 247, 239, 0.9) 100%);
}

.admin-portal-launcher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.admin-portal-launcher-card {
  display: grid;
  grid-template-columns: minmax(104px, 128px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 18px;
  border: 1px solid rgba(79, 127, 82, 0.18);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 250, 244, 0.86) 100%);
  box-shadow: 0 20px 38px rgba(43, 61, 47, 0.08);
}

.admin-portal-launcher-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 128px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(79, 127, 82, 0.16);
  background:
    linear-gradient(160deg, rgba(230, 239, 250, 0.9), rgba(245, 249, 243, 0.98));
}

.admin-portal-launcher-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 14px;
}

.admin-portal-launcher-card__body {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.admin-portal-launcher-card__top {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.admin-portal-launcher-card__description {
  color: var(--muted);
  line-height: 1.55;
}

.admin-portal-launcher-card__locale-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.admin-portal-launcher-links {
  margin-top: 14px;
}

.admin-portal-breadcrumb {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted, rgba(58, 83, 63, 0.7));
}
.admin-portal-breadcrumb__sep {
  color: var(--text-muted, rgba(58, 83, 63, 0.45));
  font-size: 11px;
  user-select: none;
}
.admin-portal-breadcrumb__item {
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(58, 83, 63, 0.07);
  color: var(--text, #2b3d2f);
  font-weight: 600;
}
.admin-portal-breadcrumb__item--site {
  background: rgba(0, 0, 128, 0.08);
  color: #000080;
}
.admin-portal-breadcrumb__item--page {
  background: rgba(58, 83, 63, 0.1);
  color: #2b3d2f;
}
.admin-portal-breadcrumb__item--locale {
  background: rgba(79, 127, 82, 0.1);
  color: #3a533f;
}
.admin-portal-breadcrumb__item--status {
  background: rgba(200, 140, 0, 0.1);
  color: #7a5500;
}
.admin-portal-editing-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 128, 0.05);
  border: 1px solid rgba(0, 0, 128, 0.12);
  font-size: 12px;
  color: #2b3d2f;
}
.admin-portal-workspace-header {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.admin-filterbar__label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted, rgba(58, 83, 63, 0.7));
  margin-top: 4px;
  display: block;
}

.admin-list-item--portal-highlight-editor {
  gap: 12px;
}

.admin-list-item--portal-card-editor {
  gap: 12px;
}

.admin-section--portal-toolbar {
  position: sticky;
  top: 0;
  z-index: 3;
  border-color: rgba(79, 127, 82, 0.18);
  background:
    linear-gradient(180deg, rgba(248, 251, 246, 0.97) 0%, rgba(242, 247, 240, 0.95) 100%);
  box-shadow: 0 12px 28px rgba(43, 61, 47, 0.08);
  backdrop-filter: blur(12px);
}

/* Compact status notice inside sticky toolbar */
.admin-section--portal-toolbar [data-portal-toolbar-status] .admin-inline-notice {
  margin: 4px 0 0;
  padding: 7px 12px;
  font-size: 12px;
}

.admin-section--portal-flow {
  margin-bottom: 12px;
}

.admin-portal-preview-card--settings {
  border-style: dashed;
}

.admin-list--toolbar {
  padding-top: 0;
}

.admin-list-item--toolbar {
  margin-top: 0;
  border-style: dashed;
}

.messages {
  flex: 1;
  min-height: 0;
  padding: 18px 20px 10px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.conversation-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px 0;
}

.conversation-toolbar__copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.conversation-toolbar__surface {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(79, 127, 82, 0.12);
  border: 1px solid rgba(79, 127, 82, 0.18);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.conversation-toolbar__title {
  margin: 0;
  color: var(--accent-dark);
  font-size: clamp(1rem, 0.95rem + 0.55vw, 1.34rem);
  line-height: 1.18;
}

.conversation-toolbar__meta,
.conversation-toolbar__print-meta {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.conversation-toolbar__print-meta {
  display: none;
}

.conversation-toolbar__print-btn {
  flex: 0 0 auto;
  min-height: 40px;
  padding-inline: 12px;
  gap: 8px;
}

.conversation-toolbar__print-label {
  white-space: nowrap;
}

.conversation-scroll-nav {
  display: flex;
  justify-content: center;
  padding: 2px 0;
}

.conversation-scroll-nav__button {
  border: 1px solid rgba(79, 127, 82, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
}

.conversation-scroll-nav__button:hover,
.conversation-scroll-nav__button:focus-visible {
  background: rgba(255, 255, 255, 0.9);
  color: var(--accent-dark);
}

.messages--idle {
  justify-content: flex-start;
  align-items: center;
  padding-top: 12px;
  padding-bottom: 4px;
}

.message {
  max-width: min(100%, 960px);
  padding: 17px 20px;
  border: 1px solid rgba(215, 223, 212, 0.82);
  border-radius: 24px;
  line-height: 1.5;
  white-space: pre-wrap;
  box-shadow: 0 18px 34px rgba(46, 63, 53, 0.08);
  backdrop-filter: blur(14px);
}

/* Avatar role R1: the large intro figure belongs to the empty/start state
   on mobile/narrow layouts. On desktop the sidebar is always a permanent
   column — the brand hero IS the main surface identity and must stay visible
   even during active chat. On mobile the sidebar collapses to a compact top
   bar so the large figure is correctly hidden. */
@media (max-width: 900px) {
  body.chat-focus-active [data-avatar-role="intro-primary"] {
    display: none;
  }
}

#lessy-overlay-host,
.contextual-lessy,
.lessy-avatar-helper {
  display: none !important;
}

.message--user {
  align-self: flex-end;
  width: min(100%, 760px);
  background: rgba(227, 239, 225, 0.92);
  padding: 11px 16px;
}

.message--assistant {
  align-self: flex-start;
  width: min(100%, 960px);
  background: var(--assistant);
  white-space: normal;
}

.message__heading,
.message__paragraph,
.message__list {
  margin: 0 0 11px;
}

.message__heading {
  font-weight: 850;
  line-height: 1.32;
  color: var(--accent-dark);
}

/* SAI surface: navy headings instead of Lessy-green (local chips intentionally stay green) */
body[data-surface="samspill"] .message__heading,
body[data-theme="avigation"] .message__heading { color: #000080; }

.message__heading--1 {
  font-size: 1.06rem;
}

.message__heading--2 {
  font-size: 1rem;
}

.message__heading--3 {
  font-size: 0.95rem;
}

.message__list {
  padding-left: 20px;
  white-space: normal;
}

.message__list--ol {
  padding-left: 22px;
}

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

.message__inline-code {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid rgba(79, 127, 82, 0.2);
  border-radius: 7px;
  background: rgba(79, 127, 82, 0.08);
  color: rgba(44, 62, 46, 0.95);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.9em;
}

.message__list:last-child,
.message__paragraph:last-child,
.message__heading:last-child {
  margin-bottom: 0;
}

.message__attachments {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 220px));
  justify-content: flex-start;
  gap: 8px;
}

.message__attachment-card {
  border: 1px solid rgba(79, 127, 82, 0.18);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.52);
  padding: 8px;
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 0;
}

.message__attachment-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.message__attachment-meta strong {
  font-size: 12px;
  color: var(--accent-dark);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message__attachment-meta span {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message__attachment-preview {
  display: flex;
  width: 100%;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(79, 127, 82, 0.16);
  background: rgba(245, 250, 244, 0.68);
}

.message__attachment-preview img {
  display: block;
  width: 100%;
  height: 98px;
  object-fit: contain;
  object-position: center;
}

.message__attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(79, 127, 82, 0.2);
  border-radius: 999px;
  padding: 4px 9px;
  color: var(--accent-dark);
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.message__attachment-link::before,
.composer-attachment-card__doc::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 15px;
  padding: 0 4px;
  border-radius: 5px;
  border: 1px solid currentColor;
  box-sizing: border-box;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.message__attachment-link--pdf::before,
.composer-attachment-card__doc--pdf::before {
  content: "PDF";
  color: #9f2626;
  background: rgba(255, 241, 241, 0.92);
}

.message__attachment-link--file::before,
.composer-attachment-card__doc--file::before {
  content: "DOC";
  color: #4d6650;
  background: rgba(240, 247, 239, 0.92);
}

.message__attachment-link:hover,
.message__attachment-link:focus-visible {
  border-color: rgba(79, 127, 82, 0.36);
  background: rgba(79, 127, 82, 0.08);
}

.message__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.message__label--assistant {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.conversation-turn {
  display: contents;
}

.message__print-provenance {
  display: none;
}

.message__answer-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "identity metadata ariel actions";
  align-items: center;
  gap: 8px 10px;
  width: 100%;
  min-width: 0;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.message__answer-header-identity {
  grid-area: identity;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.message__answer-name {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.message__answer-header-metadata {
  grid-area: metadata;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.message__answer-header-ariel {
  grid-area: ariel;
  min-width: 0;
}

.message__answer-header-actions {
  grid-area: actions;
  min-width: 0;
}

.message__label--user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.message__source-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(79, 127, 82, 0.24);
  border-radius: 999px;
  background: rgba(79, 127, 82, 0.12);
  line-height: 1;
  text-transform: none;
}

.message__source-badge--leaf {
  width: 24px;
  height: 24px;
  background: rgba(246, 251, 244, 0.78);
  overflow: visible;
}

.message__source-badge--leaf img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.message__source-badge--knowledge {
  min-height: 24px;
  max-width: min(100%, 260px);
  padding: 4px 9px;
  color: rgba(52, 78, 55, 0.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}

.message__source-badge--lessy {
  width: 30px;
  height: 30px;
  padding: 2px;
  border-radius: 15px;
  overflow: visible;
  background: rgba(246, 251, 244, 0.88);
}

.message__source-badge--lessy img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  border-radius: 13px;
}

.message__source-badge--model,
.message__source-badge--web {
  min-height: 22px;
  padding: 0 8px;
  background: rgba(255, 255, 255, 0.64);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
}

.message__source-badge--model {
  min-width: 0;
  max-width: min(100%, 260px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message__source-badge--web {
  border-color: rgba(78, 123, 157, 0.22);
  background: rgba(228, 240, 246, 0.62);
}

.message__source-badge--web-warning {
  border-color: rgba(164, 110, 54, 0.26);
  background: rgba(249, 236, 218, 0.82);
  color: #875a2d;
}

.message__source-badge--ariel {
  min-height: 28px;
  max-width: min(100%, 220px);
  padding: 4px 10px 4px 4px;
  border-color: rgba(117, 78, 128, 0.24);
  background: rgba(250, 244, 234, 0.78);
  color: #6f4e6f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  border-radius: 16px;
  overflow: visible;
  white-space: normal;
}

.message__source-badge-icon--ariel {
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  margin: -5px 0 -5px -3px;
  border-radius: 999px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 3px 5px rgba(79, 50, 80, 0.12));
}

.message__source-badge--ariel-ok {
  border-color: rgba(104, 121, 83, 0.3);
  background: rgba(244, 247, 235, 0.82);
  color: #53633f;
}

.message__source-badge--ariel-fallback {
  border-color: rgba(142, 102, 70, 0.28);
  background: rgba(252, 241, 226, 0.82);
  color: #7a5536;
}

.message__source-badge--ariel-pending {
  border-color: rgba(118, 95, 136, 0.24);
  background: rgba(248, 241, 233, 0.84);
  color: #70596e;
}

.message__source-badge--ariel-disabled {
  opacity: 0.82;
}

.message__source-badge--ariel-trigger {
  appearance: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.message__source-badge--ariel-trigger:hover {
  filter: saturate(1.06);
}

.message__source-badge--ariel-trigger:focus-visible {
  outline: 2px solid rgba(83, 99, 63, 0.45);
  outline-offset: 2px;
}

.message__web-search-summary {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(78, 123, 157, 0.16);
  border-radius: 14px;
  background: rgba(244, 249, 252, 0.72);
  display: grid;
  gap: 6px;
}

.message__web-search-summary--ok {
  border-color: rgba(78, 123, 157, 0.22);
  background: rgba(235, 245, 250, 0.82);
}

.message__web-search-summary--warning {
  border-color: rgba(164, 110, 54, 0.22);
  background: rgba(252, 244, 233, 0.86);
}

/* Search genuinely ran and shaped the answer, but returned no attributable
   source links -- same warm palette as --warning (this is a caution, not
   an error: the answer isn't wrong, just not independently verifiable). */
.message__web-search-summary--unverified {
  border-color: rgba(164, 110, 54, 0.26);
  background: rgba(249, 236, 218, 0.82);
}

.message__web-search-headline {
  font-size: 12px;
  font-weight: 800;
  color: rgba(40, 62, 78, 0.92);
}

.message__web-search-details {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: rgba(68, 87, 101, 0.84);
}

.message__web-search-query {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(78, 123, 157, 0.16);
}

.message__web-search-sources {
  margin: 0;
  padding-left: 17px;
  display: grid;
  gap: 4px;
  font-size: 12px;
}

.message__web-search-sources a,
.message__web-search-sources span {
  color: rgba(33, 62, 90, 0.9);
  text-decoration: none;
}

.message__web-search-sources a:hover,
.message__web-search-sources a:focus-visible {
  text-decoration: underline;
}

body[data-surface="samspill"] .message__source-badge--web,
body[data-theme="avigation"] .message__source-badge--web {
  border-color: rgba(34, 72, 138, 0.24);
  background: rgba(230, 237, 252, 0.78);
  color: #183c6e;
}

body[data-surface="samspill"] .message__web-search-summary,
body[data-theme="avigation"] .message__web-search-summary {
  border-color: rgba(34, 72, 138, 0.18);
  background: rgba(239, 244, 253, 0.84);
}

body[data-surface="samspill"] .message__web-search-headline,
body[data-theme="avigation"] .message__web-search-headline {
  color: #143564;
}

body[data-surface="samspill"] .message__web-search-query,
body[data-theme="avigation"] .message__web-search-query {
  border-color: rgba(34, 72, 138, 0.18);
  color: #27456e;
}

body[data-surface="samspill"] .conversation-toolbar__surface,
body[data-theme="avigation"] .conversation-toolbar__surface {
  border-color: rgba(34, 72, 138, 0.2);
  background: rgba(230, 237, 252, 0.72);
  color: #193a6a;
}

body[data-surface="samspill"] .conversation-toolbar__title,
body[data-theme="avigation"] .conversation-toolbar__title {
  color: #000080;
}

.ariel-popover {
  position: fixed;
  z-index: 45;
  width: min(360px, calc(100vw - 24px));
  padding: 12px 13px 11px;
  border: 1px solid rgba(128, 101, 146, 0.24);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(253, 249, 242, 0.96) 0%, rgba(245, 237, 247, 0.96) 100%);
  color: #3a3040;
  box-shadow: 0 20px 36px rgba(60, 45, 70, 0.22);
  backdrop-filter: blur(10px);
}

.ariel-popover::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 14px;
  height: 14px;
  background: rgba(253, 249, 242, 0.98);
  border-left: 1px solid rgba(128, 101, 146, 0.24);
  border-top: 1px solid rgba(128, 101, 146, 0.24);
  transform: translateX(-50%) rotate(45deg);
}

.ariel-popover[data-placement="bottom"]::after {
  top: -8px;
}

.ariel-popover[data-placement="top"]::after {
  top: auto;
  bottom: -8px;
  transform: translateX(-50%) rotate(225deg);
}

.ariel-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.ariel-popover__header strong {
  font-size: 13px;
  letter-spacing: 0.01em;
}

.ariel-popover__close {
  border: 0;
  border-radius: 999px;
  background: rgba(111, 78, 111, 0.12);
  color: #5b4664;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  width: 24px;
  height: 24px;
  padding: 0;
}

.ariel-popover__close:hover,
.ariel-popover__close:focus-visible {
  background: rgba(111, 78, 111, 0.2);
  outline: none;
}

.ariel-popover__summary {
  margin: 8px 0 9px;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(58, 48, 64, 0.86);
}

.ariel-popover__list {
  margin: 0;
  display: grid;
  gap: 6px;
}

.ariel-popover__row {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}

.ariel-popover__row dt {
  margin: 0;
  font-size: 11px;
  font-weight: 800;
  color: rgba(78, 63, 86, 0.86);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ariel-popover__row dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(58, 48, 64, 0.94);
  word-break: break-word;
}

.ariel-popover__notes {
  margin: 10px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(74, 54, 64, 0.92);
}

.ariel-popover__disclaimer {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.4;
  font-style: italic;
  color: rgba(78, 63, 86, 0.72);
}

.ariel-popover__why {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid rgba(78, 63, 86, 0.14);
}

.ariel-popover__why strong {
  font-size: 11px;
  font-weight: 800;
  color: rgba(78, 63, 86, 0.86);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ariel-popover__why p {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(58, 48, 64, 0.94);
}

.ariel-popover__why-code {
  display: inline-block;
  margin-top: 6px;
  font-size: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(78, 63, 86, 0.6);
}

.message__followups {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  white-space: normal;
}

.message__ariel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(117, 78, 128, 0.16);
  border-radius: 14px;
  background: rgba(252, 247, 240, 0.64);
  color: #6f4e6f;
  font-size: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.54);
  white-space: normal;
}

.message__review-tools {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: 2px;
}

.message__review-toggle {
  border: 1px solid rgba(79, 127, 82, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  color: var(--accent-dark);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
  padding: 6px 9px;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.message__review-toggle:hover,
.message__review-toggle:focus-visible {
  border-color: rgba(79, 127, 82, 0.42);
  background: rgba(244, 251, 241, 0.92);
  transform: translateY(-1px);
}

.message__review-toggle:disabled {
  cursor: progress;
  opacity: 0.72;
  transform: none;
}

.message__review-panel {
  position: static;
  width: min(320px, calc(100vw - 48px));
  margin-top: 8px;
  padding: 12px;
  border: 1px solid rgba(79, 127, 82, 0.18);
  border-radius: 18px;
  background: rgba(252, 249, 242, 0.97);
  box-shadow: 0 18px 34px rgba(44, 58, 48, 0.18);
  backdrop-filter: blur(10px);
}

.message__review-form {
  display: grid;
  gap: 10px;
}

.message__review-field {
  display: grid;
  gap: 5px;
}

.message__review-field span {
  font-size: 11px;
  font-weight: 800;
  color: rgba(67, 84, 61, 0.9);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.message__review-field select {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(79, 127, 82, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
}

.message__review-submit {
  justify-self: start;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(79, 127, 82, 0.92);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 8px 14px;
}

.message__review-submit:disabled {
  cursor: progress;
  opacity: 0.75;
}

.message__review-error {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: #8a4f45;
}

.message__review-note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(67, 84, 61, 0.88);
}

.message__review-note--warning {
  color: #8a4f45;
}

.message__review-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  margin: 10px 0 10px;
  color: rgba(62, 74, 60, 0.84);
  font-size: 12px;
  line-height: 1.35;
}

.message__review-summary strong {
  color: var(--accent-dark);
}

.message__review-summary-model {
  font-weight: 700;
}

.improve-answer-panel {
  margin-top: 12px;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.improve-answer-panel__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.improve-answer-panel__label {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent-dark);
  opacity: 0.8;
}

.improve-answer-panel__toggle {
  font-size: 12px;
  padding: 2px 10px;
  border: 1px solid rgba(79, 127, 82, 0.3);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-dark);
  cursor: pointer;
}

.improve-answer-panel__toggle:hover {
  background: rgba(79, 127, 82, 0.06);
}

.improve-answer-panel__content {
  background: rgba(247, 252, 246, 0.9);
  border: 1px solid rgba(79, 127, 82, 0.18);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
}

.improve-answer-panel__actions {
  display: flex;
  gap: 8px;
}

.improve-answer-panel__btn {
  font-size: 12px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}

.improve-answer-panel__btn--accept {
  background: var(--accent-dark);
  color: #fff;
  border-color: var(--accent-dark);
}

.improve-answer-panel__btn--accept:hover {
  opacity: 0.88;
}

.improve-answer-panel__btn--discard:hover {
  background: rgba(0,0,0,0.05);
}

.answer-version-panel {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid rgba(79, 127, 82, 0.18);
  border-radius: 16px;
  background: rgba(248, 252, 247, 0.76);
}

.answer-version-panel__header,
.answer-version-panel__header > div,
.answer-version-panel__tabs,
.answer-version-panel__metadata {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.answer-version-panel__header {
  justify-content: space-between;
}

.answer-version-panel__header strong {
  color: var(--accent-dark);
  font-size: 13px;
}

.answer-version-panel__active,
.answer-version-panel__metadata {
  color: rgba(62, 74, 60, 0.75);
  font-size: 11px;
}

.answer-version-panel__change {
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(79, 127, 82, 0.1);
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 800;
}

.answer-version-panel__change--factual_revision {
  background: rgba(176, 75, 56, 0.12);
  color: #8f3f32;
}

.answer-version-panel__tabs button,
.answer-version-panel__restore,
.answer-version-panel__activate {
  min-height: 32px;
  border: 1px solid rgba(79, 127, 82, 0.24);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--accent-dark);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
}

.answer-version-panel__tabs button[aria-pressed="true"] {
  border-color: var(--accent-dark);
  background: var(--accent-dark);
  color: #fff;
}

.answer-version-panel__history {
  display: grid;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(62, 74, 60, 0.82);
}

.answer-version-panel__history select {
  width: min(100%, 390px);
  min-height: 36px;
  border: 1px solid rgba(79, 127, 82, 0.2);
  border-radius: 11px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 7px 9px;
}

.answer-version-panel__warning {
  margin: 0;
  padding: 9px 10px;
  border-left: 3px solid #b04b38;
  border-radius: 8px;
  background: rgba(176, 75, 56, 0.08);
  color: #7d382e;
  font-size: 12px;
  line-height: 1.45;
}

.answer-version-panel__restore,
.answer-version-panel__activate {
  justify-self: start;
}

.answer-version-panel__restore:disabled,
.answer-version-panel__activate:disabled {
  cursor: default;
  opacity: 0.5;
}

.answer-version-diff {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.answer-version-translation {
  display: grid;
  gap: 10px;
}

.answer-version-translation section {
  padding: 10px;
  border: 1px solid rgba(79, 127, 82, 0.18);
  border-radius: 10px;
  overflow-wrap: anywhere;
}

.answer-version-translation strong {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
}

.answer-version-diff__removed {
  border-radius: 3px;
  background: rgba(189, 58, 48, 0.12);
  color: #9a302a;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.answer-version-diff__added {
  border-radius: 3px;
  background: rgba(35, 124, 167, 0.12);
  color: #176a91;
  text-decoration: none;
}

.message__routing-explanation {
  width: fit-content;
  max-width: 100%;
  margin-top: 10px;
  color: rgba(62, 74, 60, 0.78);
  font-size: 11px;
}

.message__routing-explanation summary {
  cursor: pointer;
  list-style-position: outside;
  line-height: 1.4;
}

.message__routing-details {
  display: grid;
  gap: 5px;
  min-width: min(320px, 100%);
  margin-top: 7px;
  padding: 8px 10px;
  border: 1px solid rgba(79, 127, 82, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.66);
}

.message__routing-details > div {
  display: grid;
  grid-template-columns: minmax(88px, auto) minmax(0, 1fr);
  gap: 10px;
}

.message__routing-details dt {
  font-weight: 800;
}

.message__routing-details dd {
  margin: 0;
  overflow-wrap: anywhere;
}

body[data-surface="samspill"] .improve-answer-panel__label,
body[data-surface="samspill"] .improve-answer-panel__toggle,
body[data-theme="avigation"] .improve-answer-panel__label,
body[data-theme="avigation"] .improve-answer-panel__toggle {
  color: #173870;
}

body[data-surface="samspill"] .improve-answer-panel__btn--accept,
body[data-theme="avigation"] .improve-answer-panel__btn--accept {
  background: #173870;
  border-color: #173870;
}

body[data-surface="samspill"] .message__review-toggle,
body[data-theme="avigation"] .message__review-toggle {
  border-color: rgba(23, 56, 112, 0.2);
  color: #173870;
}

body[data-surface="samspill"] .message__review-toggle:hover,
body[data-surface="samspill"] .message__review-toggle:focus-visible,
body[data-theme="avigation"] .message__review-toggle:hover,
body[data-theme="avigation"] .message__review-toggle:focus-visible {
  border-color: rgba(23, 56, 112, 0.36);
  background: rgba(236, 242, 255, 0.96);
}

body[data-surface="samspill"] .message__review-panel,
body[data-theme="avigation"] .message__review-panel {
  border-color: rgba(23, 56, 112, 0.18);
  background: rgba(249, 251, 255, 0.97);
}

body[data-surface="samspill"] .message__review-field span,
body[data-surface="samspill"] .message__review-summary strong,
body[data-theme="avigation"] .message__review-field span,
body[data-theme="avigation"] .message__review-summary strong {
  color: #173870;
}

body[data-surface="samspill"] .message__review-submit,
body[data-theme="avigation"] .message__review-submit {
  background: #173870;
}

body[data-surface="samspill"] .answer-version-panel,
body[data-theme="avigation"] .answer-version-panel {
  border-color: rgba(23, 56, 112, 0.17);
  background: rgba(246, 249, 255, 0.78);
}

body[data-surface="samspill"] .answer-version-panel__header strong,
body[data-surface="samspill"] .answer-version-panel__change,
body[data-surface="samspill"] .answer-version-panel__tabs button,
body[data-surface="samspill"] .answer-version-panel__restore,
body[data-surface="samspill"] .answer-version-panel__activate,
body[data-theme="avigation"] .answer-version-panel__header strong,
body[data-theme="avigation"] .answer-version-panel__change,
body[data-theme="avigation"] .answer-version-panel__tabs button,
body[data-theme="avigation"] .answer-version-panel__restore,
body[data-theme="avigation"] .answer-version-panel__activate {
  color: #173870;
}

body[data-surface="samspill"] .answer-version-panel__tabs button[aria-pressed="true"],
body[data-theme="avigation"] .answer-version-panel__tabs button[aria-pressed="true"] {
  border-color: #173870;
  background: #173870;
  color: #fff;
}

.message__ariel-actions-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 850;
  line-height: 1.2;
}

.message__ariel-actions-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  margin: -6px 0 -5px -2px;
  border-radius: 999px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 4px 6px rgba(79, 50, 80, 0.12));
}

.message__internal-followup {
  display: inline;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--accent-dark);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
  text-align: left;
  text-decoration: none;
  text-underline-offset: 3px;
}

.message__internal-followup:hover,
.message__internal-followup:focus-visible {
  color: var(--accent);
  text-decoration: underline;
}

.message__followup-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(79, 127, 82, 0.24);
  border-radius: 999px;
  background: rgba(79, 127, 82, 0.10);
  color: var(--accent-dark);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  padding: 7px 10px;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.message__ariel-action-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(117, 78, 128, 0.24);
  border-radius: 999px;
  background: rgba(250, 244, 234, 0.82);
  color: #6f4e6f;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  padding: 7px 10px;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.message__chip-icon--leaf {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  object-fit: contain;
}

.message__followup-chip:hover,
.message__followup-chip:focus-visible {
  border-color: rgba(79, 127, 82, 0.42);
  background: rgba(79, 127, 82, 0.18);
  transform: translateY(-1px);
}

.message__ariel-action-chip:hover,
.message__ariel-action-chip:focus-visible {
  border-color: rgba(117, 78, 128, 0.42);
  background: rgba(246, 236, 246, 0.86);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .message__review-tools {
    width: 100%;
    margin-left: 0;
  }

  .message__review-panel {
    left: 0;
    right: auto;
    width: min(100%, calc(100vw - 48px));
  }

  .answer-version-panel {
    padding: 10px;
  }

  .answer-version-panel__tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .answer-version-panel__tabs button,
  .answer-version-panel__restore,
  .answer-version-panel__activate,
  .answer-version-panel__history select {
    width: 100%;
  }

  .message__routing-details {
    min-width: 0;
  }

  .message__routing-details > div {
    grid-template-columns: 1fr;
    gap: 1px;
  }
}

.lessy-inline-avatar {
  width: 52px;
  height: 52px;
  padding: 2px;
  flex: 0 0 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 32%;
  background: rgba(246, 251, 244, 0.82);
  box-shadow: 0 8px 16px rgba(50, 70, 55, 0.12);
}

@media (max-width: 720px) {
  .message__answer-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "identity actions"
      "metadata metadata"
      "ariel ariel";
    align-items: start;
  }

  .message__answer-header-actions {
    justify-self: end;
  }

  .message__answer-header-metadata,
  .message__answer-header-ariel {
    width: 100%;
  }

  .message__source-badge--model,
  .message__source-badge--knowledge {
    max-width: 100%;
  }
}

.user-inline-avatar {
  width: 54px;
  height: 58px;
  border-radius: 18px;
  border: 1px solid rgba(79, 127, 82, 0.2);
  background: rgba(246, 251, 244, 0.82);
  box-shadow: 0 8px 16px rgba(50, 70, 55, 0.12);
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.user-inline-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-inline-avatar__fallback {
  color: var(--accent-dark);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.inline-quiz-card {
  width: min(720px, 100%);
  padding: 22px 22px 20px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(248, 251, 245, 0.82) 0%, rgba(238, 246, 236, 0.86) 100%);
}

.inline-quiz-card--invitation {
  padding: 18px 20px;
  background:
    linear-gradient(180deg, rgba(250, 252, 248, 0.72) 0%, rgba(240, 247, 238, 0.78) 100%);
}

.inline-quiz__prompt {
  font-size: 18px;
  line-height: 1.55;
}

.inline-quiz__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.inline-quiz__option {
  border: 1px solid rgba(201, 214, 199, 0.95);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  padding: 10px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.inline-quiz__option:hover {
  background: #eef4ea;
  border-color: rgba(122, 157, 124, 0.9);
  transform: translateY(-1px);
}

.inline-quiz__option--secondary {
  color: var(--muted);
}

.handoff-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.handoff-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1px solid rgba(201, 214, 199, 0.95);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--accent-dark);
  padding: 10px 12px;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.handoff-action:hover {
  background: #eef4ea;
}

.handoff-action--ghost {
  color: var(--muted);
}

.composer {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(248, 251, 246, 0.18);
  backdrop-filter: blur(18px);
  padding: 16px 24px 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.composer--drag-over {
  background: rgba(215, 242, 224, 0.45);
  outline: 2px dashed rgba(55, 130, 75, 0.45);
  outline-offset: -4px;
}

.composer--idle {
  width: min(980px, calc(100% - 28px));
  margin: 0 auto 14px;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(248, 251, 246, 0.42) 0%, rgba(241, 247, 242, 0.48) 100%);
  box-shadow:
    0 22px 54px rgba(40, 58, 45, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

#messageInput {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 22px;
  padding: 17px 18px;
  font: inherit;
  resize: none;
  min-height: 46px;
  max-height: min(176px, 30dvh);
  overflow-y: hidden;
  background: rgba(255, 255, 255, 0.58);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.04),
    0 12px 24px rgba(50, 70, 55, 0.06);
}

.composer__actions {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 10px;
}

/* Wrapper for every control button (Kai, 2026-08-01). display:contents makes
   both wrapper levels invisible to layout by default -- their children stay
   direct flex participants of .composer__actions exactly as before this
   change, zero desktop impact. Only overridden at the mobile breakpoint
   below, where .composer__controls becomes a real full-width row so it can
   never compress .runtime-status again (root cause of the "narrow vertical
   text column" bug: .runtime-status was a flex:1 min-width:0 sibling
   directly competing with every button for space in one shared row). */
.composer__controls,
.composer__controls-row {
  display: contents;
}

.composer__model-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  color: rgba(47, 67, 51, 0.9);
  box-shadow: 0 8px 18px rgba(50, 70, 55, 0.08);
}

.composer__model-label {
  font-size: 12px;
  font-weight: 800;
  color: rgba(47, 67, 51, 0.72);
}

.composer__model-select {
  border: 0;
  background: transparent;
  color: rgba(28, 43, 32, 0.94);
  font: inherit;
  text-overflow: ellipsis;
  overflow: hidden;
  font-size: 12px;
  font-weight: 800;
  min-width: 60px;
  max-width: 120px;
  cursor: pointer;
}

.composer__model-select:focus {
  outline: none;
}

body[data-surface="samspill"] .composer__model-picker,
body[data-theme="avigation"] .composer__model-picker {
  background: rgba(249, 251, 255, 0.92);
  border-color: rgba(23, 56, 112, 0.16);
  box-shadow: 0 10px 24px rgba(23, 56, 112, 0.10);
}

body[data-surface="samspill"] .composer__model-label,
body[data-theme="avigation"] .composer__model-label {
  color: rgba(23, 56, 112, 0.76);
}

body[data-surface="samspill"] .composer__model-select,
body[data-theme="avigation"] .composer__model-select {
  color: #173870;
}

.composer__toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.52);
  color: rgba(47, 67, 51, 0.9);
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(50, 70, 55, 0.08);
  cursor: pointer;
}

.composer__toggle input {
  margin: 0;
}

/* Compact icon-only web search toggle */
/* Web search toggle — off state: muted gray */
.composer__web-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
  opacity: 0.55;
}

.composer__web-search-toggle:hover {
  opacity: 0.8;
  background: rgba(0, 0, 0, 0.10);
}

/* On state: bright white, blue border */
.composer__web-search-toggle:has(input:checked) {
  opacity: 1;
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(23, 100, 200, 0.55);
  box-shadow: 0 0 0 2px rgba(23, 100, 200, 0.12);
}

.composer__web-search-toggle:has(input:checked):hover {
  background: #fff;
  border-color: rgba(23, 100, 200, 0.75);
}

.composer__web-search-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Icon: grayscale + dim when off, full color when on */
.composer__web-search-icon {
  font-size: 16px;
  line-height: 1;
  filter: grayscale(1) brightness(0.5);
  transition: filter 0.15s;
}

.composer__web-search-toggle:has(input:checked) .composer__web-search-icon {
  filter: none;
}

body[data-surface="samspill"] .composer__web-search-toggle:has(input:checked),
body[data-theme="avigation"] .composer__web-search-toggle:has(input:checked) {
  background: rgba(240, 246, 255, 0.95);
  border-color: rgba(23, 56, 112, 0.55);
  box-shadow: 0 0 0 2px rgba(23, 56, 112, 0.10);
}

.runtime-status {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: rgba(101, 119, 103, 0.86);
  font-size: 12px;
  line-height: 1.32;
  text-align: left;
  opacity: 1;
  transition: opacity 1600ms ease, transform 1600ms ease;
}

.runtime-status__activity {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 8px;
  color: rgba(49, 72, 55, 0.88);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.runtime-status__activity-indicator {
  width: 11px;
  height: 11px;
  flex: 0 0 auto;
  border-radius: 999px;
  border: 2px solid rgba(79, 127, 82, 0.22);
  border-top-color: rgba(79, 127, 82, 0.95);
}

.runtime-status__activity-indicator--busy,
.runtime-status__activity-indicator--ariel {
  animation: runtimeSpinner 900ms linear infinite;
}

.runtime-status__activity--done .runtime-status__activity-indicator {
  border: 0;
  background: rgba(79, 127, 82, 0.92);
  box-shadow: 0 0 0 4px rgba(79, 127, 82, 0.08);
}

.runtime-status__activity--error .runtime-status__activity-indicator {
  border: 0;
  background: rgba(166, 79, 79, 0.92);
  box-shadow: 0 0 0 4px rgba(166, 79, 79, 0.08);
}

.runtime-status::before {
  content: none;
}

.runtime-status__line {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  opacity: 0.92;
  transition: opacity 220ms ease, transform 220ms ease;
}

.runtime-status__line--age-1 {
  opacity: 0.94;
  font-size: 11.5px;
}

.runtime-status__line--age-2 {
  opacity: 0.90;
  font-size: 11.5px;
}

.runtime-status__line--age-3 {
  opacity: 0.38;
  font-size: 11px;
}

.runtime-status__line-main {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.runtime-status__message {
  min-width: 0;
  /* Kai, 2026-08-01: overflow-wrap:anywhere breaks text at ANY character
     position whenever the container is narrow -- combined with this being a
     flex:1 min-width:0 item that used to be squeezed by five sibling
     buttons on mobile (see .composer__controls above), this produced the
     reported "extremely narrow vertical text column" (measured live: a
     75px-wide, 567px-tall status block on a 375px viewport). break-word only
     breaks mid-word as a last resort, after normal word-boundary wrapping;
     word-break stays at its normal default (never break-all). */
  word-break: normal;
  overflow-wrap: break-word;
}

.runtime-status__line--success {
  color: rgba(58, 105, 62, 0.94);
  font-weight: 750;
}

.runtime-status__icon {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 999px;
  object-fit: contain;
}

.runtime-status__icon--leaf {
  border-radius: 0;
  object-fit: contain;
}

.runtime-status__icon--ariel {
  object-position: 50% 22%;
}

.runtime-status__icon--lessy {
  object-position: 50% 12%;
}

.runtime-status--fading {
  opacity: 0;
  transform: translateY(3px);
}

@keyframes runtimePulse {
  0%, 100% {
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(80, 124, 86, 0.18);
  }

  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 5px rgba(80, 124, 86, 0.04);
  }
}

@keyframes runtimeSpinner {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   Composer status/controls -- mobile phone layout (Kai, 2026-08-01)
   Live-measured before this fix on a 375px viewport: .runtime-status was
   squeezed to 75px wide / 567px tall (five sibling buttons in the same
   flex-wrap row totalled 329px, more than the 289px row itself). Fix:
   .composer__controls (contents-only at wider widths, see base rule above)
   becomes a real block here, forced onto its own full-width row via
   flex-basis, so it can never again share row space with the status icon +
   text -- which keeps the ~1fr width .runtime-status already had, just
   without competition. Each .composer__controls-row still flex-wraps its
   own buttons independently.
   ============================================================ */
@media (max-width: 900px) {
  .composer__controls {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    width: 100%;
    gap: 8px;
  }

  .composer__controls-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  .composer__controls-row--upload .primary-btn {
    margin-left: auto;
  }

}

.primary-btn {
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #5a8b5f 0%, #4a7850 100%);
  color: white;
  padding: 11px 16px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(79, 127, 82, 0.18);
}

.primary-btn:link,
.primary-btn:visited {
  color: white;
}

.primary-btn:hover {
  background: var(--accent-dark);
}

.primary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  background: linear-gradient(180deg, #7c9a7f 0%, #6f8a72 100%);
}

.welcome-card {
  width: min(980px, 100%);
  padding: 26px 32px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 28px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.22), transparent 24%),
    linear-gradient(180deg, rgba(246, 250, 241, 0.36) 0%, rgba(227, 236, 219, 0.48) 100%);
  backdrop-filter: blur(18px);
  box-shadow:
    0 30px 70px rgba(38, 56, 43, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.welcome-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: rgba(45, 65, 50, 0.82);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.welcome-card__title {
  margin: 0;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.welcome-card__body {
  max-width: 760px;
  margin: 12px 0 0;
  font-size: 18px;
  line-height: 1.36;
  color: rgba(37, 54, 41, 0.88);
}

.welcome-card__body--soft {
  color: rgba(54, 74, 59, 0.72);
}

@media (max-width: 900px) {
  body {
    background-position: 58% center;
    background-attachment: scroll;
  }

  .brand__hero {
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }

  .onboarding-card {
    padding: 24px;
    border-radius: 24px;
  }

  .onboarding-media {
    min-height: 320px;
    padding: 14px;
    clip-path: inset(0 round 30px);
  }

  .onboarding-media__video,
  .onboarding-media__gif,
  .onboarding-media__image {
    max-height: 300px;
  }

  .lessy-avatar-stage {
    grid-template-columns: 1fr;
    gap: 8px;
    align-content: center;
    padding: 14px;
  }

  .lessy-avatar--stage {
    width: min(190px, 58%);
  }

  .lessy-avatar-stage__bubble {
    justify-self: center;
    max-width: 260px;
    padding: 12px 14px;
    text-align: center;
  }

  .lessy-avatar-stage__bubble strong {
    font-size: 18px;
  }

  .lessy-avatar-stage__bubble span {
    font-size: 13px;
  }

  .lessy-avatar-helper {
    display: none !important;
  }

  .lessy-avatar-helper__button {
    width: 74px;
    height: 88px;
  }

  .lessy-avatar-helper__button .lessy-avatar {
    width: 92px;
    transform: translate(-9px, 8px);
  }

  .lessy-avatar-helper--silent {
    grid-template-columns: 62px;
  }

  .lessy-avatar-helper--silent .lessy-avatar-helper__button {
    width: 62px;
    height: 76px;
  }

  .lessy-avatar-helper--silent.lessy-avatar-helper--open {
    grid-template-columns: minmax(0, calc(100vw - 104px)) 62px;
  }

  .messages {
    padding: 26px 18px 16px;
  }

  .message--assistant,
  .message--user {
    width: min(100%, 100%);
  }

  .ariel-popover {
    width: min(340px, calc(100vw - 16px));
    padding: 11px 11px 10px;
  }

  .ariel-popover__row {
    grid-template-columns: minmax(56px, auto) minmax(0, 1fr);
    gap: 6px;
  }

  .composer {
    padding: 14px 16px 18px;
  }

  .composer--idle {
    width: calc(100% - 28px);
    margin-bottom: 16px;
    border-radius: 24px;
  }

  .welcome-card {
    padding: 28px 22px;
    border-radius: 28px;
  }

  .welcome-card__body {
    font-size: 18px;
  }

  .welcome-back__actions {
    grid-template-columns: 1fr;
  }

  .inline-quiz-card {
    padding: 18px;
    border-radius: 24px;
  }

  .inline-quiz__prompt {
    font-size: 16px;
  }

  .handoff-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lessy-avatar--stage,
  .lessy-avatar-stage--settled .lessy-avatar--stage,
  .lessy-avatar-helper--friendly .lessy-avatar-helper__button .lessy-avatar,
  .lessy-avatar-helper--active .lessy-avatar-helper__button .lessy-avatar,
  .lessy-avatar-stage--active .lessy-avatar--stage .lessy-avatar__image,
  .lessy-avatar-helper--active .lessy-avatar__image,
  .lessy-avatar-helper__pulse,
  .lessy-avatar-stage__bubble,
  .brand__hero-image {
    animation: none !important;
  }

  .lessy-avatar-helper,
  .lessy-avatar-helper__bubble,
  .lessy-avatar-stage--settled .lessy-avatar-stage__bubble {
    transition: none !important;
  }
}

.empty-state {
  color: var(--muted);
  padding: 18px 0;
}

.empty-state--chat {
  display: grid;
  gap: 5px;
  width: min(720px, 100%);
  margin: auto;
  padding: 16px 20px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 26px;
  background: rgba(250, 252, 248, 0.42);
  color: rgba(37, 54, 41, 0.82);
  text-align: center;
  box-shadow: 0 18px 40px rgba(40, 58, 45, 0.1);
  backdrop-filter: blur(14px);
}

.empty-state--chat strong {
  color: var(--text);
  font-size: 22px;
}

.empty-state--chat span {
  line-height: 1.45;
}

.suggested-prompts {
  width: min(100%, 1120px);
  margin-top: 0.45rem;
  text-align: left;
}

.suggested-prompts__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
  color: rgba(29, 42, 32, 0.76);
  font-size: 0.92rem;
  font-weight: 800;
}

.suggested-prompts__header small {
  color: rgba(29, 42, 32, 0.48);
  font-size: 0.78rem;
  font-weight: 700;
}

.suggested-prompts__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.composer__pending {
  margin-bottom: 10px;
}

.composer-attachments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(162px, 100%), 212px));
  justify-content: flex-start;
  gap: 8px;
}

.composer-attachment-card {
  border: 1px solid rgba(79, 127, 82, 0.2);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.56);
  padding: 8px;
  display: grid;
  gap: 6px;
  align-content: start;
  min-height: 0;
}

.composer-attachment-card__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.composer-attachment-card__meta strong {
  font-size: 12px;
  color: var(--accent-dark);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-attachment-card__meta span {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.composer-attachment-card__preview {
  display: flex;
  width: 100%;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid rgba(79, 127, 82, 0.16);
  background: rgba(245, 250, 244, 0.68);
}

.composer-attachment-card__preview img {
  display: block;
  width: 100%;
  height: 88px;
  object-fit: contain;
  object-position: center;
}

.composer-attachment-card__doc {
  color: var(--accent-dark);
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  border: 1px solid rgba(79, 127, 82, 0.2);
  border-radius: 999px;
  padding: 4px 9px;
  line-height: 1.2;
}

.composer-attachment-card__remove {
  width: fit-content;
  border: 1px solid rgba(154, 63, 63, 0.24);
  border-radius: 999px;
  padding: 3px 9px;
  background: rgba(255, 245, 245, 0.72);
  color: #8a3f3f;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

.composer-attachment-card__remove:hover,
.composer-attachment-card__remove:focus-visible {
  background: rgba(255, 235, 235, 0.9);
}

.composer-attachment-card--uploading {
  opacity: 0.82;
}

.composer-attachment-card__spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(79, 127, 82, 0.22);
  border-top-color: var(--accent-dark);
  animation: composerAttachmentSpin 0.8s linear infinite;
}

@keyframes composerAttachmentSpin {
  to { transform: rotate(360deg); }
}

.composer-attachment-card--error {
  border-color: rgba(154, 63, 63, 0.35);
  background: rgba(255, 245, 245, 0.78);
}

.composer-attachment-card--error .composer-attachment-card__meta strong {
  color: #8a3f3f;
}

.composer-attachment-card--error .composer-attachment-card__meta span {
  color: #8a3f3f;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

@media (prefers-reduced-motion: reduce) {
  .composer-attachment-card__spinner {
    animation: none;
  }
}

.composer__attach-btn[aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
}

.composer__library-btn[aria-expanded="true"] {
  border-color: rgba(79, 127, 82, 0.44);
  background: rgba(240, 247, 239, 0.9);
}

.chat-upload-library-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(20, 31, 22, 0.42);
  backdrop-filter: blur(4px);
}

.chat-upload-library-modal__panel {
  width: min(820px, 100%);
  max-height: min(82vh, 780px);
  border-radius: 22px;
  border: 1px solid rgba(79, 127, 82, 0.22);
  background: linear-gradient(180deg, rgba(252, 255, 250, 0.98), rgba(245, 251, 245, 0.98));
  box-shadow: 0 28px 68px rgba(29, 46, 33, 0.34);
  padding: 16px;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 12px;
}

.chat-upload-library-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.chat-upload-library-modal__title {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
  color: rgba(31, 47, 35, 0.94);
}

.chat-upload-library-modal__subtitle {
  margin: 6px 0 0;
  font-size: 13px;
  color: rgba(54, 74, 59, 0.76);
}

.chat-upload-library-modal__close {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(79, 127, 82, 0.28);
  background: rgba(255, 255, 255, 0.9);
  color: rgba(43, 64, 48, 0.9);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}

.chat-upload-library-modal__toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.chat-upload-library-modal__toolbar-btn {
  padding-inline: 12px;
}

.chat-upload-library-modal__status {
  margin: 0;
  font-size: 12px;
  color: rgba(54, 74, 59, 0.78);
}

.chat-upload-library-modal__body {
  overflow: auto;
}

.chat-upload-library-modal__empty {
  margin: 0;
  border: 1px dashed rgba(79, 127, 82, 0.24);
  border-radius: 14px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.75);
  color: rgba(54, 74, 59, 0.8);
  font-size: 13px;
}

.chat-upload-library-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(172px, 100%), 1fr));
  gap: 10px;
}

.chat-upload-library-card {
  border: 1px solid rgba(79, 127, 82, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  padding: 8px;
  display: grid;
  gap: 7px;
  text-align: left;
  cursor: pointer;
}

.chat-upload-library-card:disabled {
  cursor: default;
  opacity: 0.66;
}

.chat-upload-library-card__preview {
  display: flex;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(79, 127, 82, 0.16);
  background: rgba(245, 250, 244, 0.72);
}

.chat-upload-library-card__preview img {
  width: 100%;
  height: 94px;
  object-fit: contain;
  object-position: center;
}

.chat-upload-library-card__doc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 36px;
  height: 20px;
  border-radius: 7px;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
}

.chat-upload-library-card__doc-chip--pdf {
  color: #9f2626;
  background: rgba(255, 241, 241, 0.92);
}

.chat-upload-library-card__doc-chip--file {
  color: #4d6650;
  background: rgba(240, 247, 239, 0.92);
}

.chat-upload-library-card__meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chat-upload-library-card__meta strong {
  font-size: 12px;
  color: var(--accent-dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-upload-library-card__meta span {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-upload-library-card__action {
  font-size: 11px;
  font-weight: 700;
  color: rgba(55, 95, 59, 0.9);
}

.chat-upload-library-card:disabled .chat-upload-library-card__action {
  color: rgba(73, 94, 76, 0.64);
}

@media (max-width: 720px) {
  .conversation-toolbar {
    padding: 12px 14px 0;
    gap: 10px;
  }

  .conversation-toolbar__print-btn {
    min-height: 36px;
    padding-inline: 10px;
  }

  .conversation-toolbar__print-label {
    display: none;
  }

  .composer-attachments,
  .message__attachments {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  }

  .composer-attachment-card__preview img {
    height: 80px;
  }

  .message__attachment-preview img {
    height: 90px;
  }

  .chat-upload-library-modal {
    padding: 10px;
  }

  .chat-upload-library-modal__panel {
    padding: 12px;
    max-height: 88vh;
  }

  .chat-upload-library-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  }

  .chat-upload-library-card__preview img {
    height: 82px;
  }

  .suggested-prompts__grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  @page {
    margin: 8mm 14mm;
  }

  html,
  body {
    background: #fff !important;
    color: #111 !important;
    font-size: 10pt !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  body {
    overflow: visible !important;
  }

  body.print-conversation-mode {
    overflow: visible !important;
    font-family: Georgia, "Times New Roman", serif !important;
  }

  body.print-conversation-mode .app,
  body.print-conversation-mode .chat {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
  }

  body.print-conversation-mode .app {
    padding: 0 !important;
    gap: 0 !important;
  }

  body.print-conversation-mode .sidebar,
  body.print-conversation-mode .composer,
  body.print-conversation-mode .profile-panel,
  body.print-conversation-mode .mobile-profile-inline,
  body.print-conversation-mode .mobile-chat-jump,
  body.print-conversation-mode .conversation-scroll-nav,
  body.print-conversation-mode .message__review-tools,
  body.print-conversation-mode .message__review-summary,
  body.print-conversation-mode .improve-answer-panel,
  body.print-conversation-mode .message__followups,
  body.print-conversation-mode .message__ariel-actions,
  body.print-conversation-mode .message__ariel-popover,
  body.print-conversation-mode .suggested-prompts,
  body.print-conversation-mode .brand__helper-bubble,
  body.print-conversation-mode .runtime-status,
  body.print-conversation-mode .chat-upload-library-modal,
  body.print-conversation-mode button,
  body.print-conversation-mode .message__source-badge,
  body.print-conversation-mode .message__answer-header-metadata,
  body.print-conversation-mode .message__answer-header-ariel,
  body.print-conversation-mode .message__answer-header-actions,
  body.print-conversation-mode .answer-version-panel,
  body.print-conversation-mode .message__routing-explanation,
  body.print-conversation-mode .message__web-search-summary,
  body.print-conversation-mode .language-polish-notice,
  body.print-conversation-mode .conversation-toolbar__print-btn {
    display: none !important;
  }

  body.print-conversation-mode .conversation-toolbar {
    display: block !important;
    padding: 0 0 5pt !important;
    margin: 0 0 6pt !important;
    border-bottom: 1.5px solid #222 !important;
  }

  body.print-conversation-mode .conversation-toolbar__surface {
    color: #111 !important;
    border: none !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  body.print-conversation-mode .conversation-toolbar__title {
    color: #111 !important;
    font-size: 16pt !important;
    font-weight: bold !important;
  }

  body.print-conversation-mode .conversation-toolbar__meta,
  body.print-conversation-mode .conversation-toolbar__print-meta {
    color: #444 !important;
    font-size: 9pt !important;
  }

  body.print-conversation-mode .conversation-toolbar__print-meta {
    display: block !important;
  }

  body.print-conversation-mode .messages {
    display: block !important;
    overflow: visible !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body.print-conversation-mode .conversation-turn {
    display: block !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
    margin: 0 0 7pt !important;
  }

  body.print-conversation-mode .conversation-turn--long {
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

  /* Each message = one document section */
  body.print-conversation-mode .message {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    align-self: auto !important;
    margin: 0 0 5pt !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    white-space: pre-wrap !important;
    break-inside: auto !important;
  }

  /* User messages get a subtle left rule to distinguish from answers */
  body.print-conversation-mode .message--user {
    padding-left: 8pt !important;
    border-left: 1.5px solid #bbb !important;
    color: #333 !important;
    margin-bottom: 3pt !important;
    break-after: avoid-page !important;
    page-break-after: avoid !important;
  }

  body.print-conversation-mode .message:last-child {
    margin-bottom: 0 !important;
  }

  /* Label: very compact, just a name stamp */
  body.print-conversation-mode .message__label {
    display: block !important;
    font-size: 8pt !important;
    font-weight: bold !important;
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: #777 !important;
    margin: 0 0 2pt !important;
  }

  body.print-conversation-mode .message__label--assistant,
  body.print-conversation-mode .message__label--user {
    display: block !important;
    flex-wrap: unset !important;
    gap: 0 !important;
  }

  body.print-conversation-mode .message__answer-header {
    display: block !important;
    margin: 0 0 2pt !important;
  }

  body.print-conversation-mode .message__answer-header-identity {
    display: block !important;
  }

  body.print-conversation-mode .message__answer-name {
    display: inline !important;
    color: #777 !important;
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-size: 8pt !important;
    font-weight: bold !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
  }

  body.print-conversation-mode .message__print-provenance {
    display: inline !important;
    margin-left: 6pt !important;
    color: #666 !important;
    font-family: "Helvetica Neue", Arial, sans-serif !important;
    font-size: 8pt !important;
    font-weight: normal !important;
  }

  body.print-conversation-mode .message__brand-figure,
  body.print-conversation-mode .message__avatar,
  body.print-conversation-mode .lessy-figure,
  body.print-conversation-mode .brand__lessy-figure,
  body.print-conversation-mode .lessy-inline-avatar,
  body.print-conversation-mode .user-inline-avatar,
  body.print-conversation-mode .article-answer__media,
  body.print-conversation-mode .article-answer__figure,
  body.print-conversation-mode .article-answer__image,
  body.print-conversation-mode .article-answer__related {
    display: none !important;
  }

  body.print-conversation-mode .message__heading {
    font-size: 10.5pt !important;
    font-weight: bold !important;
    color: #111 !important;
    margin: 5pt 0 2pt !important;
  }

  body.print-conversation-mode .message__paragraph,
  body.print-conversation-mode .message__list {
    font-size: 10pt !important;
    color: #111 !important;
    margin: 0 0 2pt !important;
    line-height: 1.4 !important;
  }

  body.print-conversation-mode .message__attachment-meta strong,
  body.print-conversation-mode .message__attachment-link,
  body.print-conversation-mode .message__web-search-headline,
  body.print-conversation-mode .message__web-search-details,
  body.print-conversation-mode .message__web-search-sources a,
  body.print-conversation-mode .message__web-search-sources span {
    color: #111 !important;
  }

  body.print-conversation-mode .message__web-search-summary,
  body.print-conversation-mode .message__attachment-card,
  body.print-conversation-mode .message__attachment-preview,
  body.print-conversation-mode .message__inline-code {
    background: #f5f5f5 !important;
    border-color: #cfcfcf !important;
    box-shadow: none !important;
  }

  body.print-conversation-mode .message__web-search-sources {
    font-size: 9pt !important;
    color: #444 !important;
    margin-top: 6pt !important;
    border-top: 1px solid #ddd !important;
    padding-top: 4pt !important;
  }

  body.print-conversation-mode .message__web-search-sources a[href]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    word-break: break-all;
    color: #666;
  }

  body.print-conversation-mode .message__inline-code {
    font-family: "Courier New", Courier, monospace !important;
    font-size: 9.5pt !important;
    background: #f0f0f0 !important;
    padding: 1px 4px !important;
    border-radius: 2px !important;
  }
}

.suggested-prompt-card {
  position: relative;
}

.suggested-prompt {
  appearance: none;
  width: 100%;
  border: 1px solid rgba(87, 138, 96, 0.24);
  border-radius: 16px;
  background: rgba(255, 255, 249, 0.72);
  box-shadow: 0 14px 28px rgba(48, 73, 52, 0.08);
  color: #1f2c23;
  cursor: pointer;
  min-height: 94px;
  padding: 0.58rem 0.72rem 0.58rem;
  text-align: left;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.suggested-prompt__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: nowrap;
  margin-bottom: 0.2rem;
  padding-right: 22px;
}

.suggested-prompt__icon {
  display: inline-grid;
  place-items: center;
  width: 1.48rem;
  height: 1.48rem;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(234, 245, 230, 0.96), rgba(219, 236, 215, 0.96));
  font-size: 0.82rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.suggested-prompt__category {
  display: inline-flex;
  align-items: center;
  min-height: 1.28rem;
  max-width: calc(100% - 28px);
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  background: rgba(79, 127, 82, 0.1);
  color: rgba(54, 78, 59, 0.78);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.suggested-prompt:hover,
.suggested-prompt:focus-visible {
  background: rgba(255, 255, 249, 0.92);
  border-color: rgba(87, 138, 96, 0.55);
  transform: translateY(-1px);
  outline: none;
}

.suggested-prompt > strong,
.suggested-prompt > span {
  display: block;
}

.suggested-prompt strong {
  margin-top: 0;
  font-size: 0.84rem;
  line-height: 1.12;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.suggested-prompt > span,
.suggested-prompts__loading {
  margin-top: 0.14rem;
  color: rgba(29, 42, 32, 0.62);
  font-size: 0.7rem;
  line-height: 1.18;
}

.suggested-prompt > span:last-child {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.article-answer {
  display: grid;
  gap: 0.9rem;
}

.article-answer__kicker {
  margin: 0;
  color: rgba(57, 92, 62, 0.76);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.article-answer__title {
  margin: 0;
  font-size: 1.28rem;
  line-height: 1.08;
  color: rgba(28, 44, 33, 0.96);
}

.article-answer__layout {
  display: grid;
  gap: 1rem;
}

.article-answer__layout--with-image {
  grid-template-columns: minmax(0, 1.45fr) minmax(210px, 0.9fr);
  align-items: start;
}

.article-answer__body {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
}

.article-answer__intro,
.article-answer__paragraph {
  margin: 0;
  line-height: 1.62;
}

.article-answer__intro {
  font-weight: 700;
  color: rgba(34, 52, 39, 0.9);
}

.article-answer__section {
  display: grid;
  gap: 0.5rem;
}

.article-answer__heading {
  margin: 0;
  color: var(--accent-dark);
  font-size: 1rem;
  line-height: 1.22;
}

.article-answer__figure {
  margin: 0;
  display: grid;
  gap: 0.55rem;
  padding: 0.75rem;
  border: 1px solid rgba(79, 127, 82, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.58);
}

.article-answer__image {
  display: block;
  width: 100%;
  border-radius: 16px;
  object-fit: cover;
}

.article-answer__caption {
  color: rgba(49, 69, 55, 0.7);
  font-size: 0.78rem;
  line-height: 1.4;
}

.article-answer__related {
  display: grid;
  gap: 0.55rem;
}

.article-answer__related-label {
  color: rgba(49, 69, 55, 0.72);
  font-size: 0.78rem;
  font-weight: 800;
}

.article-answer__related-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.suggested-prompt__dismiss {
  position: absolute;
  top: 5px;
  right: 5px;
  z-index: 1;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(87, 138, 96, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 249, 0.86);
  color: rgba(42, 63, 48, 0.68);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  font-weight: 800;
  padding: 0;
}

.suggested-prompt__dismiss:hover,
.suggested-prompt__dismiss:focus-visible {
  background: rgba(255, 255, 249, 0.98);
  border-color: rgba(87, 138, 96, 0.5);
  color: rgba(29, 42, 32, 0.9);
  outline: none;
}

@media (max-width: 900px) {
  body {
    overflow: auto;
  }

  .app {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .admin-shell {
    grid-template-columns: 1fr;
    height: auto;
  }

  .admin-pane {
    overflow-y: visible;
  }

  .admin-pane--nav,
  .admin-pane--list {
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .sidebar {
    position: static;
    width: calc(100vw - 36px);
    max-width: calc(100vw - 36px);
    height: auto;
    max-height: none;
    min-height: auto;
    overflow: visible;
    padding: 16px 16px 14px;
    border-radius: 24px;
  }

  .brand {
    position: static;
    padding-bottom: 2px;
    background: transparent;
  }

  .brand__hero {
    width: min(244px, 100%);
    max-width: 244px;
    min-height: 156px;
    margin-bottom: 6px;
    padding-bottom: 8px;
  }

  .brand__hero-image {
    width: min(148px, 64%);
    max-width: 148px;
    margin: 0 8px 0 auto;
  }

  .brand__helper-bubble {
    left: -10px;
    right: auto;
    top: 52px;
    bottom: auto;
    width: min(140px, 58%);
    padding: 8px 10px;
    font-size: 11.5px;
    transform: translate(-3px, 5px);
  }

  .brand__helper-bubble::after {
    right: -6px;
    top: 21px;
    width: 11px;
    height: 11px;
  }

  .auth-box {
    margin: 10px 0;
    padding: 13px;
    border-radius: 18px;
  }

  .auth-user__email {
    margin-top: 4px;
    margin-bottom: 9px;
    font-size: 13px;
  }

  .auth-user__actions {
    gap: 7px;
  }

  .auth-user__avatar {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .avatar-onboarding {
    margin-top: 9px;
    padding: 9px 10px;
  }

  .mobile-profile-inline:not(.hidden) {
    display: grid;
    gap: 9px;
    margin-top: 11px;
  }

  .mobile-chat-jump {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 8px 0 10px;
    min-height: 44px;
  }

  .mini-list {
    gap: 5px;
    margin-top: 8px;
  }

  .mini-list__item {
    padding: 8px 10px;
    border-radius: 13px;
  }

  .mini-list__meta {
    display: none;
  }

  .sidebar__footer {
    margin-top: 10px;
    padding-top: 8px;
  }

  .version-badge {
    margin-left: 0;
    font-size: 11px;
  }

  .chat {
    scroll-margin-top: 14px;
    min-height: 680px;
    height: calc(100dvh - 36px);
  }

  .chat.chat--consent {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .profile-panel--main {
    width: calc(100% - 28px);
    border-radius: 24px;
    padding: 24px 20px;
  }

  .composer {
    position: sticky;
    bottom: 0;
    z-index: 4;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .composer--idle {
    width: calc(100% - 14px);
    margin-bottom: 8px;
  }

  .empty-state--chat {
    width: calc(100% - 24px);
    padding: 14px 16px;
    border-radius: 22px;
  }

  .empty-state--chat strong {
    font-size: 20px;
  }

  .suggested-prompts {
    width: min(100%, 980px);
    margin-top: 0.4rem;
  }

  .suggested-prompts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .suggested-prompt {
    min-height: 92px;
    padding: 0.56rem 0.68rem;
  }

  .article-answer__layout--with-image {
    grid-template-columns: 1fr;
  }

  .consent-panel {
    width: calc(100% - 24px);
    max-height: none;
    margin: 12px auto;
    padding: 0;
    overflow: visible;
  }

  .profile-panel__list {
    grid-template-columns: 1fr;
  }

  .profile-avatar-section__body {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .profile-panel__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .consent-panel__header,
  .consent-policy__top,
  .consent-panel__actions {
    align-items: stretch;
    flex-direction: column;
  }

  .consent-panel__header {
    padding: 20px 16px 10px;
  }

  .consent-panel__copy {
    gap: 8px;
  }

  .consent-panel__copy h1 {
    font-size: 28px;
  }

  .consent-panel__intro {
    font-size: 15px;
    line-height: 1.45;
  }

  .consent-panel__guide {
    font-size: 14px;
    line-height: 1.4;
  }

  .consent-panel__content {
    overflow: visible;
    padding: 0 16px 14px;
  }

  .consent-panel__footer {
    position: static;
    padding: 12px 16px 18px;
    box-shadow: none;
  }

  .consent-panel__checkbox {
    padding: 12px 14px;
    font-size: 14px;
  }

  .consent-policy {
    padding: 14px 14px;
    border-radius: 18px;
  }

  .consent-policy__headline h2 {
    font-size: 19px;
  }

  .consent-policy__summary,
  .consent-policy__body {
    font-size: 14px;
    line-height: 1.55;
  }

  .all-conversations-list__item {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .all-conversations-list__meta {
    white-space: normal;
  }

  .admin-grid {
    grid-template-columns: 1fr;
  }

  .admin-list-item__top {
    flex-direction: column;
  }
}

.message a,
.admin-message__content a,
.admin-list-item__body a {
  color: #2367b2;
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 3px;
}

.message a:hover,
.message a:focus-visible,
.admin-message__content a:hover,
.admin-message__content a:focus-visible,
.admin-list-item__body a:hover,
.admin-list-item__body a:focus-visible {
  color: #174f8b;
  text-decoration: underline;
}

.admin-shell {
  height: 100vh;
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(360px, 0.95fr) minmax(460px, 1.25fr);
  gap: 18px;
  padding: 18px;
  background:
    radial-gradient(circle at top left, rgba(255, 247, 215, 0.44), transparent 28%),
    linear-gradient(135deg, rgba(205, 222, 195, 0.82), rgba(226, 236, 222, 0.78));
}

.admin-shell--detail-collapsed {
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
}

.admin-shell--detail-collapsed .admin-pane--detail {
  display: none;
}

.admin-shell--detail-collapsed .admin-pane--list {
  min-width: 0;
}

.admin-shell--detail-collapsed .admin-model-table-wrap {
  overflow-x: visible;
}

.admin-shell--detail-collapsed .admin-model-table {
  min-width: 0;
  width: 100%;
}

.admin-shell--detail-collapsed .admin-model-table--configs .admin-model-table__row {
  grid-template-columns:
    minmax(104px, 0.9fr)
    minmax(200px, 1.35fr)
    108px
    104px
    minmax(140px, 0.95fr)
    138px;
}

.admin-shell--detail-collapsed .admin-model-table--prices .admin-model-table__row {
  grid-template-columns:
    84px
    minmax(188px, 1.2fr)
    minmax(180px, 0.95fr)
    minmax(138px, 0.85fr)
    118px
    76px;
}

.admin-shell--detail-collapsed .admin-model-table__row {
  gap: 6px;
  padding-inline: 8px;
}

.admin-shell--detail-collapsed .admin-model-table input {
  padding-inline: 7px;
  font-size: 12px;
}

.admin-pane {
  min-height: 0;
  overflow-y: auto;
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  background: rgba(250, 253, 248, 0.66);
  box-shadow: 0 18px 42px rgba(40, 58, 45, 0.13);
  backdrop-filter: blur(18px);
}

.admin-pane--nav,
.admin-pane--list,
.admin-pane--detail {
  padding: 18px;
}

.admin-pane--nav,
.admin-pane--list {
  border-right: 1px solid var(--glass-border);
}

.admin-pane--nav {
  display: flex;
  flex-direction: column;
}

.admin-brand-mark {
  width: 72px;
  height: 72px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.48);
  box-shadow: 0 14px 28px rgba(50, 70, 55, 0.12);
}

.admin-brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}

.admin-pane--list,
.admin-pane--detail {
  background: rgba(250, 253, 248, 0.72);
}

.admin-pane__header {
  margin-bottom: 14px;
}

.admin-pane__header-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}

.admin-pane__header-row h1 {
  flex: 1 1 auto;
  min-width: 0;
}

.admin-pane-toggle {
  flex: 0 0 auto;
  padding: 8px 11px;
  font-size: 12px;
  white-space: nowrap;
}

.admin-pane__header h1,
.admin-pane__header h2 {
  letter-spacing: -0.035em;
}

.admin-nav {
  gap: 8px;
  margin-top: 18px;
}

.admin-nav__item {
  border-color: rgba(79, 127, 82, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.48);
  padding: 11px 13px;
  box-shadow: 0 10px 24px rgba(50, 70, 55, 0.05);
}

.admin-nav__item--active {
  background: rgba(79, 127, 82, 0.14);
  box-shadow: inset 0 0 0 1px rgba(79, 127, 82, 0.18);
}

.admin-grid--metrics {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.admin-card,
.admin-section,
.admin-list-item,
.admin-message {
  border-color: rgba(79, 127, 82, 0.16);
  background: rgba(255, 255, 255, 0.66);
  box-shadow: 0 12px 28px rgba(50, 70, 55, 0.08);
}

.admin-card {
  border-radius: 20px;
  padding: 12px 13px;
}

.admin-card__value {
  margin-top: 7px;
  font-size: clamp(18px, 1.45vw, 24px);
  line-height: 1.12;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.admin-card__meta {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.admin-section {
  overflow: hidden;
  border-radius: 22px;
}

.admin-table-wrap {
  overflow-x: auto;
  padding: 14px 18px 18px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table th,
.admin-table td {
  padding: 10px 8px;
  border-bottom: 1px solid rgba(79, 127, 82, 0.14);
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-filterbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(79, 127, 82, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.42);
}

.admin-filterbar .secondary-btn {
  min-width: 110px;
}

.admin-batch-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid rgba(79, 127, 82, 0.14);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.34);
}

.admin-batch-toolbar__count {
  min-width: 78px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.admin-filterbar input,
.admin-filterbar select,
.admin-review-form input,
.admin-review-form select,
.admin-suggested-prompt-form input,
.admin-suggested-prompt-form select,
.admin-suggested-prompt-form textarea {
  min-width: 0;
  width: 100%;
  border: 1px solid rgba(79, 127, 82, 0.22);
  border-radius: 10px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  font: inherit;
}

.admin-suggested-prompt-form {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 12px 14px 14px;
}

.admin-suggested-prompt-form label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-suggested-prompt-form textarea {
  resize: vertical;
}

.admin-suggested-prompt-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.4fr) minmax(92px, 0.8fr) minmax(72px, 0.6fr);
  gap: 7px;
}

.admin-suggested-prompt-form__grid .admin-checkline {
  align-content: end;
  grid-template-columns: auto 1fr;
  align-items: center;
  min-height: 38px;
}

.admin-suggested-prompt-form__grid .admin-checkline input {
  width: auto;
}

.admin-list {
  gap: 9px;
  padding: 14px;
}

.admin-list-item {
  border-radius: 18px;
  padding: 12px;
}

.admin-list-item--compact {
  padding: 12px;
}

.admin-list-item--clickable {
  cursor: pointer;
}

.admin-list-item--clickable:hover {
  border-color: rgba(79, 127, 82, 0.42);
  transform: translateY(-1px);
}

.admin-list-item--batch-selected {
  border-color: rgba(79, 127, 82, 0.46);
  background: rgba(232, 241, 229, 0.76);
}

.admin-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.admin-pill {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(79, 127, 82, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: rgba(50, 63, 53, 0.82);
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 700;
}

.admin-pill--ok {
  border-color: rgba(79, 127, 82, 0.36);
  background: rgba(79, 127, 82, 0.12);
  color: var(--accent-dark);
}

.admin-pill--danger {
  border-color: rgba(154, 63, 63, 0.3);
  background: rgba(154, 63, 63, 0.1);
  color: #8b3636;
}

.admin-pill--warning {
  border-color: rgba(162, 118, 29, 0.34);
  background: rgba(162, 118, 29, 0.1);
  color: #7c5b16;
}

.admin-pill--soft {
  background: rgba(232, 241, 229, 0.72);
}

.admin-user-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.admin-cleanup-select {
  display: inline-grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 42px;
  cursor: pointer;
}

.admin-cleanup-select input {
  width: 18px;
  height: 18px;
  accent-color: var(--accent);
}

.admin-user-row__main {
  min-width: 0;
  flex: 1;
}

.admin-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: rgba(79, 127, 82, 0.14);
  color: var(--accent-dark);
  font-weight: 800;
  overflow: hidden;
  border: 1px solid rgba(79, 127, 82, 0.18);
}

.admin-avatar--detail {
  width: 64px;
  height: 64px;
  border-radius: 20px;
}

.admin-avatar__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.admin-avatar__fallback {
  color: var(--accent-dark);
  font-weight: 800;
}

.admin-profile-card {
  display: flex;
  align-items: center;
  gap: 14px;
}

@media (max-width: 640px) {
  .admin-avatar--detail {
    width: 56px;
    height: 56px;
    border-radius: 18px;
  }
}

.admin-message {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(79, 127, 82, 0.16);
  border-radius: 20px;
  padding: 14px;
}

.admin-message--user {
  margin-left: auto;
  max-width: 88%;
  background: rgba(232, 241, 229, 0.76);
}

.admin-message--assistant {
  margin-right: auto;
  max-width: 92%;
}

.admin-message__content {
  white-space: pre-wrap;
  line-height: 1.62;
}

.admin-review-form {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(79, 127, 82, 0.14);
}

.admin-check-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-check {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 6px 9px;
  border: 1px solid rgba(79, 127, 82, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 13px;
  font-weight: 700;
}

.admin-review-form__row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 8px;
}

.admin-note {
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(255, 247, 215, 0.5);
  color: rgba(50, 63, 53, 0.86);
}

.admin-muted {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.admin-danger-zone {
  border-color: rgba(154, 63, 63, 0.24);
  background: rgba(255, 248, 246, 0.72);
}

.admin-warning-list {
  margin: 0;
  padding: 12px 14px 12px 32px;
  border: 1px solid rgba(162, 118, 29, 0.22);
  border-radius: 16px;
  background: rgba(255, 247, 215, 0.5);
  color: #6f5014;
}

.admin-warning-list--danger {
  border-color: rgba(155, 55, 55, 0.28);
  background: rgba(255, 231, 224, 0.72);
  color: #8f3f2f;
}

.admin-warning-text {
  color: #8f3f2f;
  font-weight: 800;
  margin: 0;
}

.admin-warning-list li + li {
  margin-top: 6px;
}

.admin-batch-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.admin-batch-user-list {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(79, 127, 82, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.5);
}

.admin-batch-user-list h3,
.admin-batch-user-list ul {
  margin: 0;
}

.admin-batch-user-list ul {
  display: grid;
  gap: 6px;
  padding-left: 18px;
}

.admin-batch-user-list li {
  line-height: 1.45;
}

.admin-delete-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.admin-delete-columns--compact {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.admin-delete-columns h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

/* Lighter column sub-headers inside compare/editor columns */
.admin-delete-columns .admin-col-label,
h3.admin-col-label {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Visually hidden but accessible (for redundant label spans) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-list-item--portal-card-editor--selected {
  background: #eef6ea;
}

.admin-count-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.admin-count-grid__item {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid rgba(79, 127, 82, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.62);
}

.admin-count-grid__item strong {
  font-size: 18px;
}

.admin-count-grid__item span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.admin-delete-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(154, 63, 63, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.7);
}

.admin-delete-form label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.admin-delete-form code {
  color: #8b3636;
  font-weight: 900;
}

.admin-delete-form input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(154, 63, 63, 0.28);
  border-radius: 12px;
  padding: 10px 11px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font: inherit;
}

.danger-btn {
  border: 1px solid rgba(154, 63, 63, 0.34);
  border-radius: 14px;
  padding: 10px 14px;
  background: #9a3f3f;
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(154, 63, 63, 0.14);
}

.danger-btn:hover {
  background: #813232;
}

.danger-btn:disabled {
  cursor: wait;
  opacity: 0.7;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.admin-mini-list {
  padding: 18px;
}

.admin-access-card {
  display: grid;
  gap: 12px;
  max-width: 560px;
  padding: 22px;
  border: 1px solid rgba(79, 127, 82, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.68);
  box-shadow: 0 16px 34px rgba(50, 70, 55, 0.1);
}

.admin-access-card h2 {
  margin: 0;
}

.admin-access-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.admin-access-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.admin-access-locked .admin-shell {
  grid-template-columns: minmax(0, 680px);
  justify-content: center;
}

.admin-access-locked .admin-pane--nav,
.admin-access-locked .admin-pane--detail {
  display: none;
}

.admin-access-locked .admin-pane--list {
  border-right: 1px solid var(--glass-border);
}

.admin-shell {
  overflow: hidden;
  grid-template-columns: minmax(220px, 280px) minmax(520px, 1fr) minmax(560px, 1.2fr);
}

.admin-shell.admin-shell--detail-collapsed {
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
}

.admin-shell.admin-shell--nav-collapsed {
  grid-template-columns: minmax(0, 1fr) minmax(560px, 1.2fr);
}

.admin-shell.admin-shell--nav-collapsed.admin-shell--detail-collapsed,
.admin-shell.admin-shell--nav-collapsed.admin-shell--model-wide {
  grid-template-columns: minmax(0, 1fr);
}

.admin-shell.admin-shell--nav-collapsed .admin-pane--nav {
  display: none;
}

.admin-shell.admin-shell--detail-collapsed .admin-pane--detail {
  display: none;
}

.admin-shell.admin-shell--model-wide .admin-pane--list {
  min-width: 0;
  overflow-x: hidden;
}

.admin-shell.admin-shell--model-wide .admin-model-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.admin-shell.admin-shell--model-wide .admin-model-table {
  min-width: min(1120px, 100%);
}

.admin-shell.admin-shell--model-wide .admin-model-table--configs .admin-model-table__row {
  grid-template-columns:
    minmax(112px, 0.95fr)
    minmax(208px, 1.35fr)
    112px
    108px
    minmax(144px, 0.95fr)
    140px;
}

.admin-shell.admin-shell--model-wide .admin-model-table--prices .admin-model-table__row {
  grid-template-columns:
    86px
    minmax(194px, 1.18fr)
    minmax(184px, 0.96fr)
    minmax(142px, 0.86fr)
    122px
    78px;
}

.admin-shell.admin-shell--nav-collapsed.admin-shell--model-wide .admin-model-table {
  min-width: 0;
  width: 100%;
}

.admin-shell.admin-shell--suggestions-wide .admin-pane--list {
  min-width: 0;
}

.admin-pane {
  overflow-x: hidden;
}

.admin-pane__content,
.admin-section,
.admin-list-item,
.admin-message {
  min-width: 0;
}

.admin-brand {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.admin-brand .brand__title {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.admin-brand .brand__subtitle {
  margin-top: 3px;
  font-size: 12px;
}

.admin-brand-mark {
  width: 54px;
  height: 54px;
  margin: 0;
  border-radius: 18px;
}

.admin-nav {
  gap: 7px;
  margin-top: 12px;
}

.admin-nav__item {
  border-radius: 13px;
  padding: 9px 11px;
}

.admin-nav-actions {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}

.admin-nav-actions .secondary-btn {
  justify-content: center;
  background: rgba(255, 255, 255, 0.86);
}

.admin-suggested-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
}

.admin-suggested-toolbar > div {
  display: grid;
  gap: 2px;
}

.admin-suggested-toolbar span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-suggested-table {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(79, 127, 82, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.58);
}

.admin-suggested-table__head,
.admin-suggested-row {
  display: grid;
  grid-template-columns: minmax(220px, 1.25fr) minmax(360px, 1fr);
  gap: 14px;
  align-items: center;
}

.admin-suggested-table__head {
  padding: 10px 14px;
  background: rgba(79, 127, 82, 0.10);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-suggested-row {
  width: 100%;
  border: 0;
  border-top: 1px solid rgba(79, 127, 82, 0.12);
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.44);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.admin-suggested-row:hover,
.admin-suggested-row:focus-visible {
  background: rgba(244, 249, 241, 0.86);
}

.admin-suggested-row--selected {
  background: rgba(79, 127, 82, 0.12);
  box-shadow: inset 3px 0 0 var(--accent);
}

.admin-suggested-row__main,
.admin-suggested-row__meta {
  min-width: 0;
}

.admin-suggested-row__main {
  display: grid;
  gap: 4px;
}

.admin-suggested-row__main strong,
.admin-suggested-row__main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-suggested-row__main span {
  color: var(--muted);
  font-size: 12px;
}

.admin-suggested-row__meta {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.admin-suggested-row__meta span {
  overflow: hidden;
  border-radius: 999px;
  padding: 5px 7px;
  background: rgba(79, 127, 82, 0.08);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-suggested-row__answer--yes {
  background: rgba(79, 127, 82, 0.14) !important;
  color: var(--accent-dark) !important;
}

.admin-suggested-row__answer--ready {
  background: rgba(79, 127, 82, 0.22) !important;
  color: var(--accent-dark) !important;
  border-color: rgba(79, 127, 82, 0.28) !important;
}

.admin-suggested-prompt-form__answer {
  min-height: 150px;
}

.admin-suggested-prompt-form__answer-wrap {
  grid-column: 1 / -1;
}

.admin-section--suggested-editor .admin-section__header {
  padding: 12px 14px 0;
}

.admin-section--suggested-editor .admin-section__header h2 {
  font-size: 17px;
}

.admin-suggested-prompt-form__label {
  grid-column: span 2;
}

.admin-suggested-prompt-form__status select {
  min-height: 38px;
}

.admin-suggested-prompt-form__active {
  align-self: end;
}

.admin-suggested-prompt-form__advanced {
  border: 1px solid rgba(79, 127, 82, 0.16);
  border-radius: 12px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.5);
}

.admin-suggested-prompt-form__advanced summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.admin-suggested-prompt-form__advanced p {
  margin: 7px 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.admin-suggested-draft__body {
  display: grid;
  gap: 10px;
  padding: 0 18px 18px;
}

.admin-suggested-draft__body label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-suggested-draft__body select {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(79, 127, 82, 0.20);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font: inherit;
}

.admin-warning-note {
  margin: 0 18px 12px;
  padding: 10px 12px;
  border: 1px solid rgba(173, 127, 34, 0.28);
  border-radius: 10px;
  background: rgba(255, 247, 224, 0.78);
  color: #6e4d11;
  font-size: 13px;
  font-weight: 800;
}

.admin-inline-notice {
  margin: 8px 18px 14px;
  padding: 10px 12px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 750;
}

.admin-inline-notice--ok {
  border: 1px solid rgba(79, 127, 82, 0.22);
  background: rgba(241, 248, 238, 0.88);
  color: rgba(45, 83, 49, 0.94);
}

.admin-inline-notice--soft {
  border: 1px solid rgba(115, 96, 126, 0.18);
  background: rgba(249, 245, 250, 0.86);
  color: rgba(95, 77, 109, 0.94);
}

.admin-inline-notice--warning {
  border: 1px solid rgba(162, 118, 29, 0.34);
  background: rgba(255, 248, 228, 0.9);
  color: rgba(124, 91, 22, 0.96);
}

.admin-inline-notice--danger {
  border: 1px solid rgba(154, 63, 63, 0.3);
  background: rgba(255, 240, 240, 0.9);
  color: rgba(139, 54, 54, 0.96);
}

.admin-media-upload-status {
  margin-top: 8px;
}

.admin-media-upload-status .admin-inline-notice {
  margin: 0;
}

/* Copy-locale panel */
.admin-section--copy-locale {
  border-style: dashed;
  border-color: rgba(79, 127, 82, 0.2);
  background: rgba(248, 252, 246, 0.7);
}

.admin-copy-locale-summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  list-style: none;
  padding: 8px 0 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.admin-copy-locale-summary::-webkit-details-marker { display: none; }
.admin-copy-locale-summary::before { content: '▶'; font-size: 10px; transition: transform 0.15s; }
details[open] .admin-copy-locale-summary::before { transform: rotate(90deg); }

.admin-copy-locale-body {
  padding-top: 6px;
}

.admin-copy-locale-details {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
  font-size: 12px;
}

.admin-copy-locale-detail {
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.6);
}

.admin-copy-locale-detail code {
  font-family: monospace;
  font-size: 11px;
  color: rgba(60, 80, 65, 0.9);
}

.admin-copy-locale-detail--copied { color: rgba(40, 100, 55, 0.9); }
.admin-copy-locale-detail--overwritten { color: rgba(130, 100, 20, 0.9); }
.admin-copy-locale-detail--would_copy { color: rgba(55, 85, 130, 0.9); }
.admin-copy-locale-detail--skipped { color: var(--muted); }
.admin-copy-locale-detail--no_source { color: rgba(160, 60, 60, 0.85); }

.admin-editor-section-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(100, 120, 180, 0.1);
  color: rgba(55, 75, 140, 0.82);
  border: 1px solid rgba(100, 120, 180, 0.2);
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

.admin-suggested-table--candidates {
  margin-bottom: 14px;
}

.admin-back-btn {
  justify-self: start;
  margin-bottom: 10px;
}

.admin-grid--metrics {
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}

.admin-card__label,
.admin-card__meta {
  line-height: 1.25;
}

.admin-table-wrap {
  overflow-x: hidden;
}

.admin-table {
  table-layout: fixed;
}

.admin-table th,
.admin-table td {
  overflow-wrap: anywhere;
}

.meta a {
  display: inline-block;
  margin-right: 12px;
  margin-bottom: 6px;
  color: var(--accent-dark);
  font-weight: 700;
}

.admin-review-form__section {
  display: grid;
  gap: 6px;
}

.admin-review-form__section h3 {
  margin: 0;
  font-size: 15px;
}

.admin-review-form__section p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.admin-review-form__row {
  grid-template-columns: repeat(3, minmax(120px, 1fr)) auto;
  align-items: end;
}

.admin-review-form__row--compact {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.admin-review-form__row label,
.admin-candidate-form label,
.admin-model-card label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.admin-review-form__row label span,
.admin-candidate-form label span,
.admin-model-card label span {
  color: var(--muted);
}

.admin-review-form textarea[data-portal-rich-text="1"] {
  min-height: 196px;
}

.admin-review-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-candidate-form {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.admin-candidate-form input,
.admin-candidate-form select,
.admin-candidate-form textarea,
.admin-model-card select,
.admin-model-card input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(79, 127, 82, 0.22);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  font: inherit;
}

.admin-model-list {
  display: grid;
  gap: 10px;
  padding: 14px 18px 18px;
}

.admin-model-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(79, 127, 82, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.66);
}

.admin-model-card__head,
.admin-model-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.admin-model-card__head span,
.admin-model-card__foot span {
  color: var(--muted);
  font-size: 13px;
}

.admin-model-card__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px;
}

.admin-model-card--config {
  background:
    radial-gradient(circle at 16% 0%, rgba(255, 250, 226, 0.32), transparent 32%),
    rgba(255, 255, 255, 0.7);
}

.admin-model-card--local {
  border-color: rgba(79, 127, 82, 0.28);
  background:
    radial-gradient(circle at 16% 0%, rgba(220, 243, 222, 0.4), transparent 40%),
    rgba(240, 250, 241, 0.8);
}

.admin-model-card--cloud {
  border-color: rgba(0, 80, 200, 0.18);
  background:
    radial-gradient(circle at 16% 0%, rgba(210, 228, 255, 0.4), transparent 40%),
    rgba(240, 245, 255, 0.8);
}

.admin-model-card input[readonly] {
  color: var(--muted);
  background: rgba(255, 255, 255, 0.52);
}

.admin-runtime-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  padding: 14px 18px 18px;
}

.admin-runtime-summary > div {
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(79, 127, 82, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.64);
}

.admin-runtime-summary span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-runtime-summary strong {
  display: block;
  min-width: 0;
  overflow-wrap: anywhere;
}

.admin-runtime-summary--compact {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.admin-runtime-clarity {
  display: grid;
  gap: 8px;
  margin: 10px 18px 0;
  padding: 12px 14px;
  border: 1px solid rgba(79, 127, 82, 0.14);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.52);
  color: var(--text);
  font-size: 13px;
  line-height: 1.45;
}

.admin-runtime-clarity code {
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(232, 241, 229, 0.8);
  color: var(--forest);
}

.admin-runtime-clarity__text {
  display: inline;
  margin-left: 6px;
}

.admin-section__header--subtle {
  padding-top: 4px;
}

.admin-list--runtime-models {
  padding-top: 10px;
}

.admin-runtime-model-card {
  gap: 10px;
}

.admin-ollama-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  padding: 12px 18px 18px;
}

.admin-ollama-card {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(79, 127, 82, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.admin-ollama-card.is-selected,
.admin-ollama-card:hover,
.admin-ollama-card:focus-visible {
  border-color: rgba(79, 127, 82, 0.42);
  background: rgba(244, 250, 241, 0.92);
  outline: none;
}

.admin-ollama-card__top {
  display: grid;
  gap: 6px;
}

.admin-ollama-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.admin-ollama-card__meta span {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(79, 127, 82, 0.08);
}

.admin-ollama-lab-form {
  display: grid;
  gap: 12px;
  padding: 0 18px 18px;
}

.admin-ollama-lab-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-ollama-lab-form select,
.admin-ollama-lab-form textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(79, 127, 82, 0.20);
  border-radius: 10px;
  padding: 9px 10px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--text);
  font: inherit;
}

.admin-ollama-lab-form__prompt textarea {
  resize: vertical;
}

.admin-ollama-lab-form__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.admin-ollama-result {
  display: grid;
  gap: 2px;
}

.admin-model-table-wrap {
  margin: 12px 18px 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(79, 127, 82, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
}

.admin-model-table {
  display: grid;
  min-width: 860px;
}

.admin-model-table--configs .admin-model-table__row {
  grid-template-columns: 132px minmax(220px, 1.35fr) 118px 112px minmax(150px, 1fr) 146px;
}

.admin-model-table--prices .admin-model-table__row {
  grid-template-columns: 92px minmax(220px, 1.35fr) minmax(190px, 1fr) minmax(150px, 0.95fr) 126px 84px;
}

.admin-model-table__row {
  display: grid;
  gap: 8px;
  align-items: start;
  padding: 8px 9px;
  border-bottom: 1px solid rgba(79, 127, 82, 0.10);
  font-size: 13px;
}

.admin-model-table__row:last-child {
  border-bottom: 0;
}

.admin-model-table__row--head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(239, 247, 236, 0.96);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  align-items: center;
}

.admin-model-table__key {
  font-weight: 800;
  overflow-wrap: normal;
  word-break: normal;
}

.admin-model-table input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(79, 127, 82, 0.20);
  border-radius: 9px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.admin-model-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.admin-model-actions .secondary-btn--small {
  padding-inline: 8px;
  white-space: nowrap;
  line-height: 1.15;
  min-height: 30px;
  font-size: 11px;
}

.admin-model-actions .secondary-btn--small:first-child {
  grid-column: 1 / -1;
}

.admin-model-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.admin-model-check input {
  width: auto;
  margin: 0;
}

.admin-model-check__state {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  padding: 2px 6px;
  border: 1px solid rgba(79, 127, 82, 0.18);
  border-radius: 999px;
  background: rgba(232, 241, 229, 0.58);
  color: var(--muted);
  line-height: 1;
}

.admin-model-flag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.admin-model-flag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(79, 127, 82, 0.18);
  border-radius: 999px;
  background: rgba(232, 241, 229, 0.42);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.admin-model-flag--ok {
  border-color: rgba(57, 118, 86, 0.22);
  background: rgba(57, 118, 86, 0.14);
  color: var(--forest);
}

.admin-model-flag--warning {
  border-color: rgba(196, 141, 65, 0.28);
  background: rgba(196, 141, 65, 0.16);
  color: #8f5b16;
}

.admin-model-table__identity,
.admin-model-table__stack {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.admin-model-table__model {
  min-width: 0;
}

.admin-model-table__model span,
.admin-model-table__model input,
.admin-model-table__key {
  display: block;
  min-width: 0;
}

.admin-model-table__model span,
.admin-model-table__key[title] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-model-table__subtle,
.admin-model-table__priority span,
.admin-model-table__mini-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.admin-model-table__priority {
  display: grid;
  gap: 4px;
}

.admin-model-table__stack--status {
  align-content: start;
}

.admin-model-table__stack--status .admin-model-check + .admin-model-check {
  margin-top: -1px;
}

.admin-model-table__notes {
  min-width: 0;
}

.admin-model-table__notes span {
  display: block;
  line-height: 1.35;
}

.admin-model-table__mini-field {
  display: grid;
  gap: 4px;
}

.admin-model-table__mini-field input {
  min-width: 0;
}

.admin-model-table__price {
  display: grid;
  gap: 2px;
  font-weight: 800;
  line-height: 1.35;
}

.admin-model-table__price span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.admin-model-table__row--derived {
  background: rgba(232, 241, 229, 0.36);
}

/* ── Accordion card layout for AI model configs ── */

.admin-model-cards,
.admin-price-cards {
  margin: 12px 18px 18px;
  border: 1px solid rgba(79, 127, 82, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.58);
  overflow: hidden;
}

.admin-model-card,
.admin-price-card {
  border-bottom: 1px solid rgba(79, 127, 82, 0.10);
}

.admin-model-card:last-child,
.admin-price-card:last-child {
  border-bottom: 0;
}

.admin-model-card__head,
.admin-price-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  flex-wrap: wrap;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.admin-model-card__head::-webkit-details-marker,
.admin-price-card__head::-webkit-details-marker { display: none; }

.admin-model-card summary.admin-model-card__head::after,
.admin-price-card__detail summary.admin-price-card__head::after {
  content: '▸';
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
  flex-shrink: 0;
  transition: transform 0.15s;
}

.admin-model-card[open] > summary.admin-model-card__head::after,
.admin-price-card__detail[open] > summary.admin-price-card__head::after {
  content: '▾';
}

.admin-model-card__key {
  font-weight: 800;
  white-space: nowrap;
  font-size: 13px;
}

.admin-model-card__model,
.admin-price-card__model {
  font-weight: 700;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.admin-model-card__priority {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.admin-model-card__notes-preview {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  flex: 1;
}

.admin-price-card__price {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.admin-price-card__source {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  max-width: 220px;
}

.admin-model-card__form,
.admin-price-card__fields {
  padding: 12px 14px 16px;
  background: rgba(239, 247, 236, 0.50);
  border-top: 1px solid rgba(79, 127, 82, 0.10);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.admin-model-card__fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  width: 100%;
}

.admin-model-card__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 130px;
}

.admin-model-card__field--narrow {
  flex: 0 0 88px;
  min-width: 88px;
}

.admin-model-card__field > span,
.admin-model-card__field > label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.admin-model-card__field input {
  width: 100%;
  min-width: 0;
  border: 1px solid rgba(79, 127, 82, 0.20);
  border-radius: 9px;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--text);
  font: inherit;
  font-size: 12px;
}

.admin-model-card__checks {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.admin-model-card__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  width: 100%;
}

.admin-model-card--readonly .admin-model-card__head {
  cursor: default;
}

.admin-price-card--derived .admin-price-card__head {
  cursor: default;
  opacity: 0.8;
}

.admin-price-card__detail {
  width: 100%;
}

.admin-price-card__meta-display {
  width: 100%;
}

.admin-section--debug .admin-model-cards,
.admin-section--debug .admin-price-cards {
  margin-inline: 0;
  margin-bottom: 0;
}

.admin-warning-list--compact {
  margin: 0 18px 18px;
}

.admin-section--debug {
  padding: 14px 18px;
}

.admin-section--debug summary {
  cursor: pointer;
  color: var(--forest);
  font-weight: 900;
}

.admin-section--debug .admin-model-table-wrap {
  margin-inline: 0;
  margin-bottom: 0;
}

.admin-policy-list {
  margin: 0;
  padding-left: 20px;
  color: var(--text);
  line-height: 1.45;
}

.admin-policy-list li + li {
  margin-top: 8px;
}

@media (max-width: 1200px) {
  .admin-shell {
    grid-template-columns: minmax(200px, 240px) minmax(360px, 1fr);
  }

  .admin-shell--portal-cms {
    grid-template-columns: 148px minmax(600px, 2.15fr) minmax(212px, 0.54fr);
  }

  .admin-shell--detail-collapsed {
    grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  }

  .admin-pane--detail {
    grid-column: 1 / -1;
  }

  .admin-grid--metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-portal-studio {
    grid-template-columns: minmax(150px, 174px) minmax(0, 1fr);
  }
}

@media (max-width: 900px) {
  .admin-shell {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    padding: 12px;
  }

  .admin-shell--portal-cms {
    grid-template-columns: 1fr;
  }

  .admin-pane {
    overflow-y: visible;
  }

  .admin-filterbar,
  .admin-review-form__row {
    grid-template-columns: 1fr;
  }

  .admin-suggested-table__head,
  .admin-suggested-row {
    grid-template-columns: 1fr;
  }

  .admin-suggested-row__meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-suggested-prompt-form__grid {
    grid-template-columns: 1fr;
  }

  .admin-suggested-prompt-form__label {
    grid-column: auto;
  }

  .admin-portal-preview-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------
   Portal CMS compact editor — v0.6.105
   Admin/CMS only. No chat, runtime, or Ariel classes.
   ------------------------------------------------------- */

/* Compact published/draft copy-pair layout.
   Narrower "Live" (published) column + wider draft (editable) column.
   Replaces the old admin-delete-columns usage inside renderPortalCopyPair. */
.admin-cms-copy-pair {
  display: grid;
  grid-template-columns: minmax(110px, 0.42fr) minmax(220px, 1fr);
  gap: 4px 10px;
  align-items: start;
}

.admin-cms-copy-pair__published {
  padding: 6px 9px;
  background: rgba(79, 127, 82, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(79, 127, 82, 0.09);
}

.admin-cms-copy-pair__col-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  opacity: 0.65;
  margin-bottom: 4px;
}

/* Anchor navigation bar at top of Portal CMS editor forms */
.admin-cms-anchor-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 2px 0 4px;
}

.admin-cms-anchor-btn {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  color: var(--forest);
  background: rgba(79, 127, 82, 0.07);
  border: 1px solid rgba(79, 127, 82, 0.14);
  transition: background 0.14s;
  cursor: pointer;
  white-space: nowrap;
}

.admin-cms-anchor-btn:hover {
  background: rgba(79, 127, 82, 0.16);
  text-decoration: none;
}

/* Invisible anchor-target spans — anchor points for the chip-style nav above */
.admin-cms-anchor-target {
  display: block;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

/* Compact copy-pair on small screens: stack published above draft */
@media (max-width: 680px) {
  .admin-cms-copy-pair {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------
   Portal CMS noise reduction — v0.6.106
   Admin/CMS only. No chat, runtime, or Ariel classes.
   ------------------------------------------------------- */

/* Compact ⓘ info-icon tooltip — shown inline next to field labels
   in place of verbose helperText divs. Native browser title tooltip. */
.admin-field-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(79, 127, 82, 0.10);
  border: 1px solid rgba(79, 127, 82, 0.18);
  color: var(--muted);
  font-size: 9px;
  font-weight: 900;
  cursor: help;
  margin-left: 4px;
  vertical-align: middle;
  flex-shrink: 0;
  user-select: none;
  text-decoration: none;
  font-style: normal;
}

.admin-field-info:hover {
  background: rgba(79, 127, 82, 0.18);
  color: var(--forest);
}

/* SEO collapsible panel: reuses admin-section--copy-locale styling */
.admin-cms-seo-panel {
  margin-top: 2px;
}

/* -------------------------------------------------------
   Portal CMS final noise fix — v0.6.107
   Admin/CMS only. No chat, runtime, or Ariel classes.
   ------------------------------------------------------- */

/* UTKAST label in draft column matches LIVE label style — same class reused.
   Slightly lower opacity on draft to keep LIVE visually primary. */
.admin-cms-copy-pair__draft .admin-cms-copy-pair__col-label {
  opacity: 0.5;
}

/* =====================================================================
   Samspill / SAI surface theme
   Scoped to body[data-surface="samspill"] so the LUA/Lessy surface is
   untouched. Navy (#000080) is the Samspill brand colour for headings and
   primary CTAs; green stays the local-resource / Lessy-leaf colour for chips
   and local links (internet links stay blue). Glass panels are a touch more
   transparent for the airier SAI look.

   html[data-surface="samspill"] rules apply as soon as the inline head
   script sets the attribute — before JS modules run — eliminating the flash
   of Lessy green on SAI/Samspill domains. body[data-surface] rules below
   supplement once the JS surface hook fires.
   ===================================================================== */
html[data-surface="samspill"],
html[data-theme="avigation"] {
  --bg-image: url('/assets/samspill-bg.png');
}
html[data-surface="samspill"] .brand__hero-image,
html[data-theme="avigation"] .brand__hero-image {
  opacity: 0;
}
html[data-surface="samspill"] .brand__hero-image.surface-branded,
html[data-theme="avigation"] .brand__hero-image.surface-branded {
  opacity: 1;
  transition: opacity 0.15s ease;
}
html[data-surface="samspill"] .primary-btn,
html[data-theme="avigation"] .primary-btn {
  background: linear-gradient(180deg, #1a1a99 0%, #000080 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 128, 0.22);
  color: #fff;
}
html[data-surface="samspill"] .primary-btn:hover,
html[data-theme="avigation"] .primary-btn:hover {
  background: linear-gradient(180deg, #000080 0%, #00005c 100%);
}
html[data-surface="samspill"] .onboarding-copy h1,
html[data-surface="samspill"] .welcome-back h1,
html[data-surface="samspill"] .brand__title,
html[data-theme="avigation"] .onboarding-copy h1,
html[data-theme="avigation"] .welcome-back h1,
html[data-theme="avigation"] .brand__title {
  color: #000080;
}

body[data-surface="samspill"],
body[data-theme="avigation"] {
  --bg-image: url('/assets/samspill-bg.png');
  --panel: rgba(255, 255, 255, 0.18);
  --panel-strong: rgba(255, 255, 255, 0.30);
  --glass-border: rgba(255, 255, 255, 0.44);
}

body[data-surface="samspill"] .onboarding-copy h1,
body[data-surface="samspill"] .welcome-back h1,
body[data-surface="samspill"] .brand__title,
body[data-theme="avigation"] .onboarding-copy h1,
body[data-theme="avigation"] .welcome-back h1,
body[data-theme="avigation"] .brand__title {
  color: #000080;
}

body[data-surface="samspill"] .primary-btn,
body[data-theme="avigation"] .primary-btn {
  background: linear-gradient(180deg, #1a1a99 0%, #000080 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 128, 0.22);
}
body[data-surface="samspill"] .primary-btn:hover,
body[data-theme="avigation"] .primary-btn:hover {
  background: linear-gradient(180deg, #000080 0%, #00005c 100%);
}

/* --- Business Lessy as a presenter: figure left, text/bubble right (desktop) --- */
/* Business Lessy faces left with an open hand, so placing the figure on the left
   makes it "present" the welcome copy on the right. Mobile keeps the stacked layout. */
@media (min-width: 721px) {
  body[data-surface="samspill"] .onboarding-card,
  body[data-theme="avigation"] .onboarding-card {
    width: min(860px, 100%);
    flex-direction: row;
    align-items: center;
    gap: clamp(18px, 3vw, 36px);
  }
  body[data-surface="samspill"] .onboarding-media,
  body[data-theme="avigation"] .onboarding-media {
    flex: 0 0 auto;
    width: min(320px, 44%);
    margin: 0;
  }
  body[data-surface="samspill"] .onboarding-copy,
  body[data-theme="avigation"] .onboarding-copy {
    flex: 1 1 auto;
    margin-top: 0;
    text-align: left;
  }
  body[data-surface="samspill"] .onboarding-form,
  body[data-theme="avigation"] .onboarding-form {
    align-items: stretch;
  }
}

/* Sidebar hero: figure to the left, helper bubble to the right of it. */
body[data-surface="samspill"] .brand__hero-image,
body[data-theme="avigation"] .brand__hero-image {
  margin: 0 auto 0 8px;
  object-position: 50% 22%;
}
body[data-surface="samspill"] .brand__helper-bubble,
body[data-theme="avigation"] .brand__helper-bubble {
  left: auto;
  right: 6px;
  border-radius: 16px 16px 16px 8px;
}
/* Bubble tail must point left (toward the figure) — not right into empty space. */
body[data-surface="samspill"] .brand__helper-bubble::after,
body[data-theme="avigation"] .brand__helper-bubble::after {
  right: auto;
  left: -7px;
  border-right: none;
  border-left: 1px solid rgba(211, 221, 210, 0.72);
  transform: rotate(-45deg);
}

/* --- Pale-blue Samspill surfaces (cards/fields). Green chips + local links keep
   their colour; this only cools the neutral container backgrounds. --- */
body[data-surface="samspill"] .onboarding-card,
body[data-theme="avigation"] .onboarding-card {
  background:
    linear-gradient(180deg, rgba(244, 247, 255, 0.82) 0%, rgba(234, 240, 252, 0.86) 100%);
}
body[data-surface="samspill"] .onboarding-form input,
body[data-theme="avigation"] .onboarding-form input {
  background: rgba(240, 244, 255, 0.72);
}

/* Article-answer headings (structured knowledge responses): navy on SAI surface */
body[data-surface="samspill"] .article-answer__title,
body[data-theme="avigation"] .article-answer__title {
  color: rgba(0, 0, 112, 0.92);
}
body[data-surface="samspill"] .article-answer__heading,
body[data-theme="avigation"] .article-answer__heading {
  color: #000080;
}
body[data-surface="samspill"] .article-answer__kicker,
body[data-theme="avigation"] .article-answer__kicker {
  color: rgba(0, 0, 128, 0.60);
}
body[data-surface="samspill"] .article-answer__intro,
body[data-theme="avigation"] .article-answer__intro {
  color: rgba(0, 0, 80, 0.82);
}

/* Nav active state: navy instead of green */
body[data-surface="samspill"] .admin-nav__item--active,
body[data-theme="avigation"] .admin-nav__item--active {
  border-color: #000080;
  background: rgba(0, 0, 128, 0.07);
  color: #000080;
}
body[data-surface="samspill"] .mini-list__item--active,
body[data-surface="samspill"] .all-conversations-list__item--active,
body[data-theme="avigation"] .mini-list__item--active,
body[data-theme="avigation"] .all-conversations-list__item--active {
  border-color: #000080;
  background: rgba(0, 0, 128, 0.06);
}
body[data-surface="samspill"] .admin-list-item--selected,
body[data-theme="avigation"] .admin-list-item--selected {
  border-color: #000080;
  background: rgba(0, 0, 128, 0.05);
  box-shadow: 0 0 0 3px rgba(0, 0, 128, 0.10);
}

/* Version badge */
body[data-surface="samspill"] .version-badge,
body[data-theme="avigation"] .version-badge {
  background: rgba(0, 0, 128, 0.10);
  color: #000080;
}

/* =====================================================================
   Avigation surface theme — delta only
   Keyed on data-theme, which app.js/surfaceBranding.js set from the
   surface-config API's brand.assets.themeKey (see migration 037:
   themeKey='avigation'). Avigation shares the navy Business-Lessy chrome
   above — every rule in that block also lists a data-theme="avigation"
   selector — so the only thing that has to differ is the atmosphere.

   The default LUA background (/assets/lua-background.png, green forest) and
   the Samspill background (/assets/samspill-bg.png, green leaves) are both
   wrong for an aviation workspace, and there is no Avigation background
   photo under frontend/assets/. This uses a coast/sky gradient built from
   Avigation's own brand tokens instead (colorBackground #f1f5fb,
   colorPrimary #000080, colorSecondary #173560 — see
   portal/src/data/sites/avigation.portal.json). Dropping a real Avigation
   background image into frontend/assets/ later is a one-line --bg-image
   change here.

   Declared after the shared block so it wins the --bg-image cascade at
   equal specificity.
   ===================================================================== */
html[data-theme="avigation"],
body[data-theme="avigation"] {
  /* Opt-in flag read by surfaceBranding.js: themes that set it get the
     surface's brand.assets.headIcon rendered as an EXTRA sidebar brand-mark
     image, on top of the existing .brand__hero-image. Explicitly off here
     (Kai, 2026-07-30): Avigation previously set this to 1, which stacked
     Avigation-png-transparent-logo.png directly above
     avigation-propeller-avatar.png in the same sidebar -- two large,
     near-identical propeller graphics visible at once. The left panel must
     show exactly one static main avatar; .brand__hero-image alone is it.
     The tab favicon is unaffected -- it applies independently of this flag,
     see surfaceBranding.js. */
  --surface-brand-mark: 0;
  --bg: #f1f5fb;
  --bg-soft: #f7faff;
  --bg-image:
    radial-gradient(120% 82% at 50% 0%,
      rgba(255, 255, 255, 0.94) 0%,
      rgba(228, 238, 252, 0.86) 34%,
      rgba(191, 211, 238, 0.78) 62%,
      rgba(23, 53, 96, 0.30) 100%);
  --bg-overlay:
    linear-gradient(180deg, rgba(244, 247, 253, 0.20) 0%, rgba(232, 240, 251, 0.26) 44%, rgba(219, 230, 246, 0.32) 100%);
}

body[data-theme="avigation"] {
  /* The base layer in the shared body rule is a green-tinted gradient; the
     Avigation gradient above is partly transparent, so restate the stack
     with a blue base to keep every pixel off the Lessy palette. */
  background:
    var(--bg-overlay),
    var(--bg-image),
    linear-gradient(180deg, #f4f7fd 0%, #eaf0fa 38%, #dfe8f6 100%);
  background-size: cover;
  background-position: center 34%;
  background-attachment: fixed;
}

/* Onboarding scrim: navy instead of the Lessy forest-green scrim. */
body[data-theme="avigation"] .onboarding-overlay {
  background:
    radial-gradient(circle at center, rgba(241, 245, 251, 0.18), transparent 32%),
    linear-gradient(180deg, rgba(8, 20, 51, 0.30) 0%, rgba(8, 20, 51, 0.46) 100%);
}

/* Surface brand mark, from brand.assets.headIcon. The <img> ships without a
   src and stays hidden until surfaceBranding.js fills it in, which it only
   does for themes that set --surface-brand-mark: 1. No current theme sets
   it (Avigation's own flag was turned back off, see the data-theme block
   above) -- every surface keeps this empty, hidden element and fetches
   nothing, showing only .brand__hero-image as the one main avatar. The rule
   below is kept, unused, as the ready-made hook for a future surface that
   genuinely needs a distinct logo mark alongside its hero avatar. */
.brand__logo {
  display: none;
}
body[data-theme="avigation"] .brand__logo[src] {
  display: block;
  width: min(132px, 74%);
  margin: 2px auto 10px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(8, 20, 51, 0.18));
}

/* Mobile Chat Focus R1 (v0.9.0): a single compact live status, a bounded
   details log, content-sized messages, and a measured sticky-composer
   reserve. These rules are deliberately shared by all four chat surfaces. */
.mobile-sidebar-details {
  display: none;
}

.message {
  height: auto;
  min-height: 0;
}

.messages {
  scroll-padding-bottom: calc(var(--composer-height, 0px) + 18px);
}

.composer__status {
  flex: 1 1 280px;
  min-width: 200px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.composer__status .runtime-status {
  flex: 1 1 220px;
  min-width: 0;
}

.runtime-status__line,
.runtime-status__line-main,
.runtime-status__message {
  max-width: 100%;
  word-break: normal;
  overflow-wrap: break-word;
}

.runtime-status-details {
  flex: 0 0 100%;
  margin-left: 31px;
  color: var(--muted);
  font-size: 11px;
}

.runtime-status-details summary {
  width: fit-content;
  cursor: pointer;
  font-weight: 750;
}

.runtime-status-log {
  display: grid;
  gap: 3px;
  max-height: 132px;
  margin-top: 5px;
  padding: 7px 9px;
  overflow-y: auto;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.48);
}

.runtime-status-log__entry::before {
  content: "• ";
}

.composer__attach-btn,
.composer__library-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

@media (max-width: 900px) {
  body.chat-focus-active {
    overflow: hidden;
  }

  body.chat-focus-active .app {
    height: 100dvh;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top, 0px)) 10px max(8px, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }

  body.chat-focus-active .sidebar {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 52px;
    height: auto;
    padding: 6px 8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    border-radius: 18px;
    overflow: visible;
  }

  body.chat-focus-active .sidebar > .brand,
  body.chat-focus-active .sidebar > .locale-picker,
  body.chat-focus-active .sidebar > .auth-box,
  body.chat-focus-active .sidebar > .mobile-chat-jump,
  body.chat-focus-active .sidebar > .meta,
  body.chat-focus-active .sidebar > .hint,
  body.chat-focus-active .sidebar > .sidebar__footer {
    display: none;
  }

  body.chat-focus-active .mobile-sidebar-details {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 6px;
  }

  body.chat-focus-active #newChatBtn {
    min-height: 44px;
    width: auto;
    margin-left: auto;
  }

  body.chat-focus-active .chat {
    height: auto;
    min-height: 0;
    scroll-margin-top: 0;
    border-radius: 22px;
  }

  body.chat-focus-active .conversation-toolbar {
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 9px 12px 0;
  }

  body.chat-focus-active .conversation-toolbar__copy {
    flex: 1 1 210px;
  }

  body.chat-focus-active .conversation-toolbar__print-btn {
    min-width: 44px;
    min-height: 44px;
  }

  body.chat-focus-active .conversation-toolbar__print-label {
    display: none;
  }

  body.chat-focus-active .messages {
    min-width: 0;
    padding: 12px 12px calc(var(--composer-height, 118px) + 18px);
    scroll-padding-bottom: calc(var(--composer-height, 118px) + 18px);
  }

  body.chat-focus-active .composer {
    padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  .composer__model-label {
    display: none;
  }

  .composer__model-picker,
  .composer__web-search-toggle,
  .composer__attach-btn,
  .composer__library-btn,
  .composer__controls-row--upload .primary-btn {
    min-height: 44px;
  }

  .composer__web-search-toggle,
  .composer__attach-btn,
  .composer__library-btn {
    min-width: 44px;
  }

  body.chat-focus-active #lessy-overlay-host,
  body.chat-focus-active .contextual-lessy,
  body.chat-focus-active .lessy-avatar-helper {
    display: none !important;
  }

  body.mobile-sidebar-expanded {
    overflow: auto;
  }

  body.mobile-sidebar-expanded .app {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  body.mobile-sidebar-expanded .sidebar {
    flex-direction: column;
    align-items: stretch;
    padding: 14px;
  }

  body.mobile-sidebar-expanded .sidebar > .brand {
    display: block;
  }

  body.mobile-sidebar-expanded .sidebar > .locale-picker {
    display: flex;
  }

  body.mobile-sidebar-expanded .sidebar > .auth-box:not(.hidden),
  body.mobile-sidebar-expanded .sidebar > .mobile-chat-jump:not(.hidden),
  body.mobile-sidebar-expanded .sidebar > .sidebar__footer {
    display: block;
  }

  body.mobile-sidebar-expanded .mobile-sidebar-details {
    order: -1;
    align-self: flex-start;
  }

  body.mobile-sidebar-expanded #newChatBtn {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 640px) {
  .composer__actions {
    align-items: stretch;
    gap: 8px;
  }

  .composer__status {
    flex: 0 0 100%;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
  }

  .composer__status .activity-status-icon {
    flex: 0 0 auto;
  }

  .composer__status .runtime-status {
    flex: 1 1 0;
  }

  .runtime-status__line-main {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }

  .runtime-status__activity {
    display: none;
  }

  .runtime-status__message {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.35;
  }

  .runtime-status-details {
    margin-left: 31px;
  }

  .composer__controls-row {
    flex-wrap: nowrap;
  }

  .composer__controls-row--models .composer__model-picker {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    margin: 0;
  }

  .composer__model-label {
    display: none;
  }

  .composer__model-select {
    width: 100%;
    max-width: none;
    min-height: 36px;
  }

  .composer__web-search-toggle,
  .composer__attach-btn,
  .composer__library-btn,
  .composer__controls-row--upload .primary-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .composer__controls-row--upload {
    display: grid;
    grid-template-columns: 44px 44px minmax(92px, 1fr);
  }

  .composer__controls-row--upload .primary-btn {
    width: 100%;
    margin-left: 0;
  }

  .composer__button-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

/* Chat Layout P0 (v0.9.1): one bounded chat viewport with exactly three
   structural rows. Only .messages scrolls; the compact header and composer
   are normal grid rows, so neither needs fixed/sticky positioning or a
   z-index ladder. Every message child is non-shrinkable—the missing rule
   that previously compressed tall cards while their contents overflowed
   into neighbouring cards. */
.conversation-toolbar__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 0 0 auto;
}

.conversation-toolbar__mobile-action {
  display: none;
}

body.chat-focus-active .chat {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  backdrop-filter: none;
}

body.chat-focus-active .conversation-toolbar,
body.chat-focus-active .composer {
  position: relative;
  inset: auto;
  z-index: auto;
  flex: none;
}

body.chat-focus-active .messages {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding-bottom: 18px;
  scroll-padding-block: 14px 18px;
  overscroll-behavior: contain;
}

body.chat-focus-active .messages > *,
body.chat-focus-active .message {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}

body.chat-focus-active .message {
  position: relative;
  overflow: visible;
  backdrop-filter: none;
  white-space: normal;
}

body.chat-focus-active .message__content--user {
  display: block;
  white-space: pre-wrap;
}

body.chat-focus-active .message__review-panel {
  position: static;
  width: 100%;
  max-width: 420px;
  margin-top: 8px;
}

body.chat-focus-active .answer-version-panel,
body.chat-focus-active .message__attachments,
body.chat-focus-active .message__web-search-summary,
body.chat-focus-active .message__routing-explanation,
body.chat-focus-active .message__followups,
body.chat-focus-active .message__ariel-actions {
  position: static;
  clear: both;
}

body.chat-focus-active .composer {
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(244, 248, 244, 0.96);
  backdrop-filter: none;
}

body.chat-focus-active #messageInput {
  height: auto;
  min-height: 46px;
  max-height: min(176px, 30dvh);
  padding: 12px 14px;
}

body.chat-focus-active .runtime-status-details[open] .runtime-status-log {
  max-height: none;
  overflow: visible;
}

@media (max-width: 900px) {
  body.chat-focus-active,
  body.chat-focus-active.mobile-sidebar-expanded {
    overflow: hidden;
  }

  body.chat-focus-active .app,
  body.chat-focus-active.mobile-sidebar-expanded .app {
    height: var(--app-viewport-height, 100dvh);
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    padding: max(6px, env(safe-area-inset-top, 0px)) 8px max(6px, env(safe-area-inset-bottom, 0px));
    overflow: hidden;
  }

  body.chat-focus-active:not(.mobile-sidebar-expanded) .sidebar {
    display: none;
  }

  body.chat-focus-active .chat {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 20px;
  }

  body.chat-focus-active .conversation-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.34);
    background: rgba(244, 248, 244, 0.96);
    backdrop-filter: none;
  }

  body.chat-focus-active .conversation-toolbar__copy {
    display: grid;
    gap: 1px;
    min-width: 0;
  }

  body.chat-focus-active .conversation-toolbar__surface {
    min-height: 18px;
    padding-inline: 7px;
    font-size: 9px;
  }

  body.chat-focus-active .conversation-toolbar__title {
    overflow: hidden;
    font-size: 14px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.chat-focus-active .conversation-toolbar__meta,
  body.chat-focus-active .conversation-toolbar__print-btn {
    display: none !important;
  }

  body.chat-focus-active .conversation-toolbar__actions {
    gap: 5px;
  }

  body.chat-focus-active .conversation-toolbar__mobile-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 7px 9px;
    font-size: 11px;
    white-space: nowrap;
  }

  body.chat-focus-active .messages {
    padding: 10px;
    scroll-padding-block: 10px;
  }

  body.chat-focus-active .message {
    width: 100%;
    max-width: 100%;
    padding: 12px 13px;
    border-radius: 18px;
  }

  body.chat-focus-active .message--user {
    width: min(100%, 82%);
    padding: 9px 12px;
  }

  body.chat-focus-active .composer {
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom, 0px));
    border-top-color: rgba(79, 127, 82, 0.14);
  }

  body.chat-focus-active .composer__actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    margin-top: 6px;
  }

  body.chat-focus-active .composer__status {
    width: 100%;
    min-width: 0;
  }

  body.chat-focus-active .composer__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }

  body.chat-focus-active .composer__controls-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  body.chat-focus-active .composer__controls-row--models .composer__model-picker {
    flex: 1 1 auto;
  }

  body.chat-focus-active .composer__controls-row--upload {
    display: grid;
    grid-template-columns: 44px 44px minmax(92px, 1fr);
  }

  body.chat-focus-active .composer__controls-row--upload .primary-btn {
    width: 100%;
    margin-left: 0;
  }

  body.chat-focus-active.mobile-sidebar-expanded .sidebar {
    display: flex;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    padding: 12px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  body.chat-focus-active.mobile-sidebar-expanded .chat {
    display: none;
  }
}

@media (max-width: 430px) {
  body.chat-focus-active .conversation-toolbar__mobile-action {
    min-width: 40px;
    padding-inline: 8px;
  }

  body.chat-focus-active .conversation-toolbar__copy {
    max-width: 118px;
  }
}

/* ── Public Access Overlay (DEL B/D/E) ──────────────────────────────────────── */

.public-access-card {
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2.4vh, 28px);
}

.public-access__header {
  display: grid;
  gap: 8px;
  text-align: center;
}

.public-access__logo {
  display: block;
  margin-inline: auto;
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 16px;
}

.public-access__title {
  margin: 0;
  font-size: clamp(22px, 3.6vw, 34px);
  font-weight: 700;
  line-height: 1.15;
}

.public-access__body {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
  max-width: 460px;
  margin-inline: auto;
}

.public-access__qa-cards {
  display: grid;
  gap: 10px;
}

.public-access__qa-loading {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 12px 0;
}

.public-access__qa-item {
  display: grid;
}

.public-access__qa-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 15px;
  transition: background 0.15s, border-color 0.15s;
  width: 100%;
}

.public-access__qa-card:hover {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(100, 150, 110, 0.38);
}

.public-access__qa-card[aria-expanded="true"] {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
  background: rgba(255, 255, 255, 0.82);
}

.public-access__qa-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.public-access__qa-label {
  flex: 1;
  font-weight: 500;
}

.public-access__qa-chevron {
  flex-shrink: 0;
  font-size: 18px;
  color: var(--muted);
  transform: rotate(90deg);
  transition: transform 0.2s;
}

.public-access__qa-card[aria-expanded="true"] .public-access__qa-chevron {
  transform: rotate(270deg);
}

.public-access__qa-answer {
  border: 1px solid var(--glass-border);
  border-top: none;
  border-radius: 0 0 16px 16px;
  background: rgba(255, 255, 255, 0.72);
  overflow: hidden;
}

.public-access__qa-answer-body {
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  white-space: pre-wrap;
}

/* The Workspace presentation is the canonical SAI application in a narrow
   viewport. It changes only layout; the same DOM, runtime and API surface stay
   active. The conversation toolbar still exposes the canonical history/details
   controls when the sidebar is collapsed. (GC-2026-08-29-14) */
html[data-presentation="workspace"],
html[data-presentation="workspace"] body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  font-size: 13px;
}

html[data-presentation="workspace"] body,
html[data-presentation="workspace"] body.mobile-sidebar-expanded {
  overflow: hidden;
}

html[data-presentation="workspace"] .app {
  height: var(--app-viewport-height, 100dvh);
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

html[data-presentation="workspace"] body:not(.mobile-sidebar-expanded) .sidebar {
  display: none;
}

html[data-presentation="workspace"] .chat {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

html[data-presentation="workspace"] body.mobile-sidebar-expanded .sidebar {
  display: flex;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  padding: 12px;
  overflow: auto;
}

html[data-presentation="workspace"] body.mobile-sidebar-expanded .chat {
  display: none;
}

/* AC-2026-09-08-04. Workspace owns the conversation controls.
   The embedded document must not offer its own Details sidebar or its own
   "Ny samtale": the widget title bar carries the conversation selector and New
   conversation, and two sets of controls for one conversation is how a user
   ends up switching in one place and reading the other. Workspace also owns
   profile and logout, which live in that sidebar.
   The sidebar is hidden rather than removed: the standalone client at
   login.avigation.cloud is the same document and still needs all of it. */
html[data-presentation="workspace"] #conversationDetailsBtn,
html[data-presentation="workspace"] #conversationNewChatBtn {
  display: none !important;
}

/* Belt and braces: nothing inside the embed may put the sidebar back by adding
   the expanded class, because the control that toggles it is gone. */
html[data-presentation="workspace"] body.mobile-sidebar-expanded .sidebar {
  display: none;
}

html[data-presentation="workspace"] body.mobile-sidebar-expanded .chat {
  display: flex;
}

/* Compact toolbar in Workspace embed */
html[data-presentation="workspace"] .conversation-toolbar {
  padding: 6px 10px 0;
  gap: 6px;
}

html[data-presentation="workspace"] .conversation-toolbar__copy {
  gap: 2px;
}

/* Redundant surface tag hidden in Workspace embed — outer panel header already provides Avigation / LUA identity */
html[data-presentation="workspace"] .conversation-toolbar__surface {
  display: none !important;
}

html[data-presentation="workspace"] .conversation-toolbar__title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

html[data-presentation="workspace"] .conversation-toolbar__meta {
  font-size: 11px;
}

html[data-presentation="workspace"] .conversation-toolbar__actions {
  gap: 4px;
}

html[data-presentation="workspace"] .conversation-toolbar__mobile-action {
  min-height: 26px;
  padding: 3px 7px;
  font-size: 11px;
  border-radius: 6px;
}

html[data-presentation="workspace"] .conversation-toolbar__print-btn {
  display: none !important;
}

html[data-presentation="workspace"] .conversation-scroll-nav {
  display: none !important;
}

html[data-presentation="workspace"].workspace-maximized .conversation-toolbar__print-btn {
  display: inline-flex !important;
}

/* Compact messages and bubble layout in Workspace embed */
html[data-presentation="workspace"] .messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: auto;
  padding: 6px 10px;
  gap: 6px;
}

html[data-presentation="workspace"] .message {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
  /* AC-2026-09-08-04. The answer header sizes itself against THIS box, not the
     viewport. Workspace can host this document either in an iframe (where the
     viewport happens to equal the widget) or as a live node moved into the
     parent document (where the viewport is the whole desktop). A viewport
     media query is right in the first case and wrong in the second, which is exactly
     why a large desktop with a narrow widget rendered the roomy layout. */
  container-type: inline-size;
  container-name: luaanswer;
}

html[data-presentation="workspace"] .message.assistant,
html[data-presentation="workspace"] .message--assistant {
  max-width: 100%;
}

/* AC-2026-09-11-81 / GC-2026-09-11-81: the compact look is a BETA feature (luaPresentationR2)
   and must not reach an ordinary user. Gated on the server-stamped
   attribute; without it the stable framed presentation stands. */
html[data-presentation="workspace"][data-lua-presentation="r2"] .message.assistant,
html[data-presentation="workspace"][data-lua-presentation="r2"] .message--assistant {
  border: none;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  padding: 6px 0;
}

/* Conversation row: user question renders directly to the right of the avatar */
html[data-presentation="workspace"] .message.user,
html[data-presentation="workspace"][data-lua-presentation="r2"] .message--user {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 7px;
  max-width: 88%;
  padding: 6px 10px;
  border: none;
  box-shadow: none;
  border-radius: 14px;
  background: color-mix(in srgb, var(--ws-brand, #315b46) 10%, var(--ws-surface-strong, rgba(227, 239, 225, 0.92)));
}

/* Maximized container keeps framed presentation */
html[data-presentation="workspace"].workspace-maximized .message.assistant,
html[data-presentation="workspace"].workspace-maximized .message--assistant,
#ws-expanded-body.ws-expanded-lua .message.assistant,
#ws-expanded-body.ws-expanded-lua .message--assistant,
.ws-expanded-lua .message.assistant,
.ws-expanded-lua .message--assistant {
  border: 1px solid rgba(215, 223, 212, 0.82);
  background: var(--assistant);
  box-shadow: 0 18px 34px rgba(46, 63, 53, 0.08);
  backdrop-filter: blur(14px);
  border-radius: 24px;
  padding: 17px 20px;
}
html[data-presentation="workspace"].workspace-maximized .message.user,
html[data-presentation="workspace"].workspace-maximized .message--user,
#ws-expanded-body.ws-expanded-lua .message.user,
#ws-expanded-body.ws-expanded-lua .message--user,
.ws-expanded-lua .message.user,
.ws-expanded-lua .message--user {
  border: 1px solid color-mix(in srgb, var(--ws-brand, #315b46) 20%, rgba(215, 223, 212, 0.82));
  background: rgba(227, 239, 225, 0.92);
  box-shadow: 0 18px 34px rgba(46, 63, 53, 0.08);
  border-radius: 20px;
  padding: 11px 16px;
}


html[data-presentation="workspace"] .message--user .message__label--user {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  margin: 0;
}

html[data-presentation="workspace"] .message--user .message__content--user {
  flex: 1 1 0;
  min-width: 0;
  word-break: break-word;
}

/* Attachments are a second row, never a third competitor beside avatar + text. */
html[data-presentation="workspace"] .message--user .message__attachments {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  margin-top: 4px;
}

/* Assistant answer header: ONE compact row for identity, model status, Ariel and
   Improve Answer.
   AC-2026-09-08-04: this said `flex-wrap: wrap`, so the moment the parts did not
   fit they broke onto a second and third row -- the wrapped header in the
   screenshots. Nothing wraps now; the parts shrink in a defined order and the
   metadata group is the only thing allowed to give up space. */
html[data-presentation="workspace"] .message__answer-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px 6px;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  min-width: 0;
}

html[data-presentation="workspace"] .message__answer-header-identity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 0;
}

html[data-presentation="workspace"] .message__answer-name {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

html[data-presentation="workspace"] .message__answer-header-metadata {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
  min-width: 0;
  /* The one part of the row that yields space. Identity, Ariel and the actions
     keep their intrinsic size so the header never loses its meaning first. */
  flex: 0 1 auto;
  overflow: hidden;
  /* Not `100%`: see the Ariel group below. With the base sheet's narrow-
     viewport width this group collapsed to nothing and hid both badges. */
  width: auto;
}

html[data-presentation="workspace"] .message__source-badge {
  padding: 1px 6px;
  font-size: 9.5px;
  min-height: 20px;
  border-radius: 999px;
  gap: 3px;
  white-space: nowrap;
}

/* AC-2026-09-08-04. These were `max-width: 100px` and `90px`.
   At 9.5px type that is roughly sixteen characters, so `gpt-4o-mini-2024-07-18`
   was cut off in a 900px-wide widget with room to spare -- a fixed clip cannot
   know how much space it actually has. They now shrink only when the row runs
   out of room, and the full text is always reachable (see the collapse rules
   below, which move it into the accessible name rather than deleting it). */
html[data-presentation="workspace"] .message__source-badge--model,
html[data-presentation="workspace"] .message__source-badge--knowledge {
  min-width: 0;
  /* Deliberately NOT shrinkable. Measured at a 582px container, a shrinkable
     badge collapsed to a 21px sliver with no icon and no text -- information
     gone with nothing to mark its absence, which is worse than the wrap it
     replaced. A badge is either its full text or its icon; the container query
     below switches between those two states while there is still room. */
  flex: 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-presentation="workspace"] .message__answer-header-ariel {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  /* AC-2026-09-09-08. `width: auto`, stated, because the base sheet's
     `@media (max-width: 720px)` gives this group and the metadata group
     `width: 100%` for the stacked grid layout. In the canonical iframe the
     viewport IS the widget, so that query fires for every widget under 720px:
     the Ariel group took the whole row, the metadata group shrank to zero
     width with its model and knowledge badges hidden inside it, and Improve
     answer was pushed past the message's right edge. Rendered in a real
     narrow viewport, not in narrow divs on a wide page, which is how it was
     missed. */
  width: auto;
}

html[data-presentation="workspace"] .message__source-badge--ariel {
  padding: 1px 6px;
  font-size: 9.5px;
  min-height: 20px;
}

html[data-presentation="workspace"] .message__answer-header-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

html[data-presentation="workspace"] .message__review-toggle {
  min-height: 22px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 650;
  border-radius: 6px;
  white-space: nowrap;
}

/* AC-2026-09-08-04. Collapse driven by the WIDGET, not the viewport.
   Every step below removes presentation only: the text stays in the DOM and in
   the accessible name (see renderBadge), so a collapsed badge still says what
   it said. "Searched", "search failed" and "no hits" keep three separate
   appearances at every width -- flattening them into one globe would turn a
   failure into a success, which is worse than a wrapped line. */
/* 700px, not 560: at a 582px container the full-text row measured wider than
   the space available. The icon form has to arrive before the row runs out,
   otherwise the first thing the user loses is the badge itself. */
@container luaanswer (max-width: 700px) {
  /* Text folds away, icon and colour remain. Focus or hover brings the value
     back in place, so there is a keyboard and touch route to it. */
  html[data-presentation="workspace"] .message__source-badge--model .message__source-badge-text,
  html[data-presentation="workspace"] .message__source-badge--knowledge .message__source-badge-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  html[data-presentation="workspace"] .message__source-badge--model,
  html[data-presentation="workspace"] .message__source-badge--knowledge {
    position: relative;
    gap: 0;
  }

  /* The icon that stands in for the folded text. Distinct per badge so the
     collapsed row is still readable as three different facts. */
  /* Monochrome and geometric on purpose. A colour emoji at 9.5px reads as an
     indistinct coloured square -- checked in the render, not assumed. */
  html[data-presentation="workspace"] .message__source-badge--model::before { content: "\25C8"; }
  html[data-presentation="workspace"] .message__source-badge--knowledge::before { content: "\2261"; }

  /* Revealed as an overlay anchored to the badge, not by growing the row.
     Growing it pushed the badge out through the side of the widget. */
  html[data-presentation="workspace"] .message__source-badge--model:hover .message__source-badge-text,
  html[data-presentation="workspace"] .message__source-badge--model:focus .message__source-badge-text,
  html[data-presentation="workspace"] .message__source-badge--knowledge:hover .message__source-badge-text,
  html[data-presentation="workspace"] .message__source-badge--knowledge:focus .message__source-badge-text {
    position: absolute;
    top: calc(100% + 3px);
    left: 0;
    width: max-content;
    max-width: 60cqi;
    height: auto;
    clip-path: none;
    z-index: 5;
    padding: 2px 6px;
    border: 1px solid var(--border, #cbd5e1);
    border-radius: 6px;
    background: var(--surface, #fff);
    box-shadow: 0 6px 14px rgba(20, 31, 48, 0.16);
    white-space: nowrap;
  }
}

@container luaanswer (max-width: 380px) {
  /* The assistant name repeats what the logo beside it already says. The logo
     and the status stay; only the redundant word goes. */
  html[data-presentation="workspace"] .message__answer-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

html[data-presentation="workspace"] .message__source-badge:focus-visible {
  outline: 2px solid var(--focus, #2f6fb2);
  outline-offset: 1px;
}

html[data-presentation="workspace"] .message__content p {
  margin: 0 0 4px;
}

html[data-presentation="workspace"] .message__content p:last-child {
  margin-bottom: 0;
}

html[data-presentation="workspace"] .lessy-inline-avatar,
html[data-presentation="workspace"] .user-inline-avatar,
html[data-presentation="workspace"] .message-avatar {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  padding: 0;
  border-radius: 6px;
  box-shadow: none;
}

html[data-presentation="workspace"] .user-inline-avatar__fallback {
  font-size: 8px;
}

html[data-presentation="workspace"] .message-meta {
  font-size: 9.5px;
  margin-top: 2px;
}

/* Compact composer in Workspace embed */
html[data-presentation="workspace"] .composer {
  padding: 4px 8px 6px;
  gap: 4px;
  flex: 0 0 auto;
}

html[data-presentation="workspace"] #messageInput {
  min-height: 32px;
  max-height: 85px;
  padding: 5px 8px;
  font-size: 12px;
  line-height: 1.35;
  border-radius: 8px;
}

html[data-presentation="workspace"] .composer__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 1px;
  flex-wrap: wrap;
}

/* Runtime status gets its own bounded row when visible; controls stay compact below. */
html[data-presentation="workspace"] .composer__status {
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
}

html[data-presentation="workspace"] .composer__controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  flex: 1 1 100%;
  width: 100%;
  min-width: 0;
  flex-wrap: nowrap;
}

html[data-presentation="workspace"] .composer__controls-row {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
  min-width: 0;
}

/* Hide text labels on attach/library buttons in Workspace embed to save horizontal width */
html[data-presentation="workspace"] .composer__button-label {
  display: none !important;
}

html[data-presentation="workspace"] .composer__attach-btn,
html[data-presentation="workspace"] .composer__library-btn {
  min-height: 24px;
  padding: 2px 6px;
  font-size: 11.5px;
  border-radius: 6px;
  flex-shrink: 0;
}

html[data-presentation="workspace"] #chatModelPicker {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 1;
  min-width: 0;
}

html[data-presentation="workspace"] #chatModelPicker .composer__model-label {
  display: none !important;
}

html[data-presentation="workspace"] #chatModelSelect {
  min-height: 24px;
  padding: 2px 4px;
  font-size: 10px;
  border-radius: 6px;
  max-width: 85px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html[data-presentation="workspace"] .composer__web-search-toggle {
  min-height: 24px;
  padding: 2px 5px;
  font-size: 10.5px;
  border-radius: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}

html[data-presentation="workspace"] .composer__actions button[type="submit"],
html[data-presentation="workspace"] .composer__actions .primary-btn {
  width: auto;
  min-height: 26px;
  padding: 3px 10px;
  font-size: 11.5px;
  border-radius: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

/* Compact welcome / suggested prompts in Workspace embed */
html[data-presentation="workspace"] .welcome-card {
  padding: 8px 10px;
  gap: 4px;
  margin: 4px 0;
  border-radius: 10px;
}

html[data-presentation="workspace"] .welcome-card__hero,
html[data-presentation="workspace"] .welcome-card__hero-image,
html[data-presentation="workspace"] .welcome-card__eyebrow {
  display: none !important;
}

html[data-presentation="workspace"] .welcome-card__title {
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

html[data-presentation="workspace"] .welcome-card__body {
  font-size: 11.5px;
  line-height: 1.35;
  margin: 0;
}

html[data-presentation="workspace"] .suggested-prompts {
  gap: 4px;
  margin-top: 4px;
}

html[data-presentation="workspace"] .suggested-prompt-btn {
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
}

/* Suppress debug / desktop chrome in embedded mode */
html[data-presentation="workspace"] .debug-meta,
html[data-presentation="workspace"] .sidebar__footer {
  display: none !important;
}

html[data-presentation="workspace"] .preview-access-banner {
  margin: 4px 8px 0;
  padding: 6px 8px;
  font-size: 11.5px;
  border-radius: 8px;
}

/* Narrow Workspace iframe density. The 481–768px values intentionally stay
   on the shared Workspace rules above; only the small breakpoint needs a
   further reduction. Labels remain in the accessibility tree. */
@media (max-width: 480px) {
  html[data-presentation="workspace"] .conversation-toolbar {
    padding: 4px 6px 0;
    gap: 4px;
  }

  html[data-presentation="workspace"] #conversationTitleHeading {
    max-width: 110px;
    font-size: 11.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[data-presentation="workspace"] [data-conversation-details-label],
  html[data-presentation="workspace"] [data-mobile-sidebar-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  html[data-presentation="workspace"] .conversation-toolbar__mobile-action {
    min-height: 24px;
    padding: 2px 6px;
    font-size: 10.5px;
  }

  html[data-presentation="workspace"] .messages {
    padding: 4px 6px;
    gap: 4px;
  }

  html[data-presentation="workspace"] .message {
    padding: 5px 8px;
    font-size: 11.5px;
  }

  html[data-presentation="workspace"] #messageInput {
    min-height: 28px;
    max-height: 75px;
    font-size: 11.5px;
    padding: 4px 6px;
  }

  html[data-presentation="workspace"] .composer {
    padding: 2px 4px 4px;
    gap: 2px;
  }
}

.public-access__identity {
  margin: 4px 0 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.public-access__state {
  width: fit-content;
  max-width: 100%;
  margin: 4px auto 0;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 128, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  font-weight: 700;
}

.public-access__qa-media {
  display: block;
  width: 100%;
  max-height: 190px;
  object-fit: contain;
  padding: 14px 18px 0;
  background: transparent;
}

body.site-access-limited > .app {
  visibility: hidden;
  pointer-events: none;
}

.preview-access-banner {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 10px 14px 0;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  background: rgba(250, 252, 248, 0.76);
  box-shadow: 0 10px 24px rgba(30, 49, 35, 0.08);
}

.preview-access-banner__copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  font-size: 14px;
}

.preview-access-banner__copy span {
  overflow-wrap: anywhere;
}

.preview-access-banner__identity {
  font-weight: 700;
}

.preview-access-banner__actions {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
}

.preview-access-banner__actions a {
  text-decoration: none;
}

.preview-chat__intro {
  width: min(100%, 900px);
  display: grid;
  gap: 10px;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: var(--panel-strong);
  text-align: left;
}

.preview-chat__intro h1,
.preview-chat__intro p {
  margin: 0;
}

.preview-chat__identity {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.preview-chat__signals,
.preview-chat__provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.preview-chat__signals span,
.preview-chat__provenance span {
  padding: 5px 9px;
  border: 1px solid rgba(79, 127, 82, 0.25);
  border-radius: 999px;
  background: rgba(245, 250, 244, 0.72);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.preview-chat__prompts,
.preview-chat__conversation {
  width: min(100%, 900px);
}

.preview-chat__conversation {
  display: grid;
  gap: 10px;
}

.preview-chat__answer-media {
  display: block;
  width: min(100%, 420px);
  max-height: 220px;
  margin: 10px auto 14px;
  object-fit: contain;
}

.preview-chat__answer-body {
  white-space: normal;
}

.preview-chat__provenance {
  margin-top: 14px;
}

body.site-access-preview #newChatBtn,
body.site-access-preview #myConversationsBox,
body.site-access-preview .composer__controls,
body.site-access-preview #conversationToolbar,
body.site-access-preview .auth-user__actions,
body.site-access-preview #avatarOnboardingPrompt,
body.site-access-preview #mobileChatBtn {
  display: none !important;
}

body.site-access-preview .composer textarea:disabled {
  opacity: 1;
  cursor: not-allowed;
  color: var(--muted);
  -webkit-text-fill-color: var(--muted);
}

.public-access__actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.public-access__login-btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.public-access__request-btn {
  min-width: 140px;
}

/* Request access modal tweaks */
.onboarding-card__close {
  position: absolute;
  top: 16px;
  right: 20px;
  border: none;
  background: transparent;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 8px;
}

.onboarding-card__close:hover {
  background: rgba(0, 0, 0, 0.06);
}

#requestAccessModal .onboarding-card {
  position: relative;
  display: block;
  flex-direction: column;
  align-items: stretch;
  width: min(600px, calc(100vw - 28px));
  min-width: 0;
  max-width: 100%;
  max-height: calc(100dvh - 28px);
  margin: auto;
  padding: clamp(20px, 4vw, 32px);
  overflow-x: hidden;
  overflow-y: auto;
}

.onboarding-form__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.onboarding-form__label--checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-weight: 400;
  cursor: pointer;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

.onboarding-form__label--checkbox span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.onboarding-form__input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border: 1px solid rgba(212, 221, 206, 0.95);
  border-radius: 14px;
  padding: clamp(12px, 1.6vh, 15px) 16px;
  font: inherit;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: border-color 0.15s;
}

.onboarding-form__input:focus {
  outline: none;
  border-color: var(--accent);
}

.onboarding-form__textarea {
  resize: vertical;
  min-height: 80px;
  border-radius: 14px;
}

.onboarding-form__checkbox {
  margin-top: 2px;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  accent-color: var(--accent);
  cursor: pointer;
}

#requestAccessModal .onboarding-form__checkbox {
  flex: 0 0 18px;
  width: 18px;
  min-width: 18px;
  max-width: 18px;
  height: 18px;
  padding: 0;
}

#requestAccessStatus[data-state="success"] {
  padding: 12px;
  border: 1px solid rgba(79, 127, 82, 0.28);
  border-radius: 12px;
  background: rgba(234, 245, 232, 0.8);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

@media (max-width: 600px), (max-height: 680px) {
  #requestAccessModal {
    align-items: flex-start;
    padding: 10px;
  }

  #requestAccessModal .onboarding-card {
    width: min(100%, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    border-radius: 22px;
    padding: 20px 16px 18px;
  }

  #requestAccessModal .onboarding-card__close {
    top: 8px;
    right: 8px;
  }

  .preview-access-banner {
    align-items: stretch;
    flex-direction: column;
    margin: 8px 10px 0;
  }

  .preview-access-banner__actions {
    width: 100%;
  }

  .preview-access-banner__actions > * {
    flex: 1 1 0;
  }
}

@media (prefers-color-scheme: dark) {
  .public-access__qa-card {
    background: rgba(40, 55, 45, 0.55);
  }
  .public-access__qa-card:hover,
  .public-access__qa-card[aria-expanded="true"] {
    background: rgba(50, 68, 56, 0.82);
  }
  .public-access__qa-answer {
    background: rgba(40, 55, 45, 0.72);
  }
  .public-access__qa-answer-body {
    color: var(--text);
  }
  .onboarding-form__input {
    background: rgba(30, 42, 34, 0.74);
    border-color: rgba(80, 110, 90, 0.55);
    color: inherit;
  }
}
/* ─────────────────────────────────────────────────────────────────────────── */
/* Canonical answer component, also used by responsive Workspace LUA. */
.message__code-block { overflow:auto; white-space:pre; max-width:100%; padding:12px; border-radius:8px; background:rgba(128,128,128,.1); }