/*
 * Real Inter (variable, weights 100-900), split by unicode-range same as
 * Google Fonts serves it -- the old file here was mislabeled: it was
 * actually Roboto (checked its own `name` table), not Inter at all.
 */
@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-variable-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("assets/fonts/inter-variable-cyrillic.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/*
 * The widget shell. Always mounted and always visible in the widget modes --
 * it is not "the chat screen" any more, it is the frame that holds the header,
 * the swappable middle row and the composer. .intro-band behind it paints the
 * background, so this stays transparent.
 */
.direct-dialogue {
  z-index: 50;
  top: 0;
  isolation: isolate;
  overflow: hidden;
  background: transparent;
}

.direct-dialogue::before {
  content: none;
}

/*
 * Row 2 holds both screens; exactly one is displayed at a time. Explicit
 * grid-row on each so the hidden one leaving the flow can't shift the other.
 */
.direct-dialogue .standalone-prompts,
.direct-dialogue .dialogue__messages {
  grid-row: 2;
}

.direct-dialogue .standalone-prompts {
  display: block;
}

body.is-dialogue-open .direct-dialogue .standalone-prompts,
.direct-dialogue .dialogue__messages {
  display: none;
}

body.is-dialogue-open .direct-dialogue .dialogue__messages {
  display: grid;
}

.direct-dialogue.is-preparing .transition-target,
.direct-dialogue .is-pending {
  visibility: hidden;
  opacity: 0;
}

body.is-overlay .direct-dialogue {
  grid-template-rows: 68px minmax(0, 1fr) auto;
}

body.is-overlay .direct-dialogue .dialogue__header {
  width: min(calc(100% - 28px), 780px);
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  padding: max(10px, env(safe-area-inset-top)) 0 8px;
}

body.is-overlay .direct-dialogue .dialogue__home,
body.is-overlay .direct-dialogue .icon-button {
  justify-self: center;
  border-color: rgb(255 255 255 / 34%);
  background: rgb(0 20 14 / 68%);
  box-shadow: 0 4px 18px rgb(0 0 0 / 14%);
  backdrop-filter: blur(10px);
}

body.is-overlay .direct-dialogue .dialogue__identity {
  min-width: 0;
}

.direct-dialogue .dialogue__messages {
  min-height: 0;
  height: 100%;
  align-self: stretch;
  align-content: start;
  grid-auto-rows: max-content;
  padding: 32px 0 44px;
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  overflow-anchor: none;
  background: transparent;
  mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 38px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 28px, #000 calc(100% - 38px), transparent 100%);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.direct-dialogue .dialogue__messages::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

.direct-dialogue .user-message,
.direct-dialogue .answer-card {
  letter-spacing: 0;
}

.direct-dialogue .answer-card.is-revealed {
  visibility: visible;
  animation: answer-arrival 620ms cubic-bezier(.16, .82, .22, 1) both;
}

.answer-card {
  width: min(660px, 92%);
  overflow: hidden;
  border-radius: 8px;
  color: #fff;
  background: #003d98;
  box-shadow: 0 10px 34px rgb(0 0 0 / 14%);
}

.answer-card.is-growing {
  overflow: clip;
  transition: height 300ms cubic-bezier(.2, .72, .22, 1);
  will-change: height;
}

.answer-card.is-growing.is-expanding-details {
  transition-duration: 920ms;
  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.answer-card__body {
  display: grid;
  gap: 14px;
  padding: 17px 18px;
  transition: gap 420ms cubic-bezier(.2, .72, .22, 1);
}

.answer-card__text {
  position: relative;
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.answer-card__text-output {
  display: inline;
  white-space: pre-wrap;
}

.answer-card.is-typing .answer-card__text-output::after {
  width: 2px;
  height: 1em;
  display: inline-block;
  margin-left: 2px;
  background: rgb(255 255 255 / 84%);
  content: '';
  vertical-align: -.12em;
  animation: typing-cursor 720ms steps(1, end) infinite;
}

.answer-card__details {
  min-height: 0;
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  transition: grid-template-rows 920ms cubic-bezier(.4, 0, .2, 1), opacity 520ms ease 120ms, transform 920ms cubic-bezier(.4, 0, .2, 1);
}

.answer-card__details-content {
  min-height: 0;
  display: grid;
  gap: 14px;
  overflow: hidden;
}

.answer-card.is-typing .answer-card__body {
  gap: 0;
}

.answer-card.is-typing .answer-card__details {
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(8px);
}

.answer-card .answer-card__source {
  max-height: 120px;
  overflow: hidden;
  transition: max-height 920ms cubic-bezier(.4, 0, .2, 1), padding 920ms cubic-bezier(.4, 0, .2, 1), opacity 520ms ease 120ms, border-color 360ms ease, border-width 920ms cubic-bezier(.4, 0, .2, 1);
}

.answer-card.is-typing .answer-card__source {
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  border-color: transparent;
  opacity: 0;
}

@keyframes typing-cursor {
  0%, 54% { opacity: 1; }
  55%, 100% { opacity: 0; }
}

.answer-card__quote {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 11px 13px;
  border-left: 3px solid rgb(255 255 255 / 72%);
  background: rgb(0 24 62 / 26%);
}

.answer-card__quote span,
.answer-card__section-label,
.answer-card__loading-label {
  color: rgb(255 255 255 / 66%);
  font-size: 10px;
}

.answer-card__quote p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
}

.answer-card__steps,
.answer-card__options {
  display: grid;
  gap: 7px;
}

.answer-card__steps ol {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.4;
}

.answer-card__option-list {
  display: grid;
  gap: 7px;
}

.answer-card__option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 12px;
  min-height: 54px;
  padding: 10px 12px;
  border-radius: 5px;
  color: #151515;
  background: #fff;
  text-decoration: none;
}

.answer-card__option strong,
.answer-card__option span {
  min-width: 0;
}

.answer-card__option strong {
  font-size: 12px;
}

.answer-card__option span {
  grid-column: 1;
  color: #555;
  font-size: 10px;
  line-height: 1.35;
}

.answer-card__option::after {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  content: '↗';
  font-size: 15px;
}

.answer-card__volatile,
.answer-card__integration {
  margin: 0;
  padding: 9px 11px;
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: 5px;
  background: rgb(0 24 62 / 24%);
  font-size: 11px;
  line-height: 1.4;
}

.answer-card__volatile::before {
  content: 'Обновляемые данные. ';
  font-weight: 700;
}

.answer-card__handoff,
.answer-card__status-actions button {
  width: 100%;
  min-height: 40px;
  border: 1px solid #fff;
  border-radius: 28px;
  padding: 9px 12px;
  color: #111;
  background: #fff;
  font: 700 12px/1.3 'HSE Sans', Arial, sans-serif;
  cursor: pointer;
}

.answer-card__handoff:hover,
.answer-card__handoff:focus-visible {
  color: #fff;
  background: transparent;
}

.answer-card--fallback,
.answer-card--error {
  color: #161616;
  background: #f5f5f2;
}

.answer-card__status-title {
  font-size: 14px;
}

.answer-card__status-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.answer-card__status-actions button {
  border-color: #161616;
  color: #fff;
  background: #161616;
}

.answer-card__status-actions button + button {
  color: #161616;
  background: transparent;
}

.answer-card--loading .answer-card__body {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
}

.answer-card--loading {
  width: max-content;
  min-width: 188px;
  max-width: 92%;
  animation: thinking-card-pulse 1.8s ease-in-out infinite;
}

.answer-card--loading .answer-card__loading-label {
  color: #fff;
  font-size: 12px;
  white-space: nowrap;
}

.thinking-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}

.thinking-dots i {
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 50%;
  background: #fff;
  animation: thinking-dot 1.2s ease-in-out infinite;
}

.thinking-dots i:nth-child(2) {
  animation-delay: 140ms;
}

.thinking-dots i:nth-child(3) {
  animation-delay: 280ms;
}

@keyframes thinking-dot {
  0%, 64%, 100% { opacity: .35; transform: translateY(0) scale(.84); }
  32% { opacity: 1; transform: translateY(-3px) scale(1); }
}

@keyframes thinking-card-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgb(0 21 56 / 16%); }
  50% { box-shadow: 0 12px 34px rgb(0 21 56 / 34%); }
}

@keyframes thinking-text-pulse {
  0%, 100% { opacity: .46; }
  50% { opacity: .72; }
}

.answer-card__links {
  display: grid;
  gap: 7px;
  padding-top: 1px;
}

.answer-card__links-label {
  color: rgb(255 255 255 / 68%);
  font-size: 10px;
}

.answer-card__links-list {
  display: grid;
  gap: 6px;
}

.answer-card__links a {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  border: 1px solid rgb(255 255 255 / 42%);
  border-radius: 5px;
  color: #fff;
  background: rgb(0 28 72 / 24%);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease;
}

.answer-card__links a:hover,
.answer-card__links a:focus-visible {
  border-color: #fff;
  color: #111;
  background: #fff;
  outline: 0;
}

.answer-card__links a::after,
.answer-card__source a::after {
  content: ' ↗';
}

.answer-card__links a::after {
  flex: none;
  font-size: 14px;
  font-weight: 400;
}

.link-preview {
  display: grid;
  grid-template-columns: 138px minmax(0, 1fr);
  min-height: 104px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 6px;
  color: #fff;
  background: rgb(0 27 69 / 62%);
  text-decoration: none;
}

.link-preview.has-no-image {
  grid-template-columns: 1fr;
}

.link-preview img {
  width: 100%;
  height: 100%;
  min-height: 104px;
  object-fit: cover;
}

.link-preview__content {
  display: grid;
  align-content: center;
  gap: 5px;
  min-width: 0;
  padding: 12px 14px;
}

.link-preview__site {
  overflow: hidden;
  color: rgb(255 255 255 / 62%);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-preview__title {
  font-size: 12px;
  line-height: 1.25;
}

.link-preview__description {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: rgb(255 255 255 / 74%);
  font-size: 10px;
  line-height: 1.3;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.answer-card__source {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 18px 11px;
  border-top: 1px solid rgb(255 255 255 / 20%);
  background: rgb(0 29 74 / 28%);
  font-size: 10px;
  line-height: 1.35;
  white-space: nowrap;
}

.answer-card__source > span {
  color: rgb(255 255 255 / 58%);
}

.answer-card__source-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px 12px;
  min-width: 0;
  overflow: hidden;
}

.answer-card__source a {
  min-width: 0;
  overflow: hidden;
  color: #fff;
  text-overflow: ellipsis;
  text-decoration: none;
}

.standalone-prompts,
.start-header,
.start-footer,
.screen-customizer {
  display: none;
}

/* .start-header/.start-footer mock the real school site's own nav/footer --
   useful context on the is-standalone demo page, but inside the actual
   fullscreen overlay (is-home-screen) they're not part of any real page, so
   they just show up as white bars breaking the black background. !important
   because the many body.is-standalone/is-home-screen-scoped rules enabling
   them (desktop and mobile) are scattered across this file at equal
   specificity -- overriding just the is-home-screen half of each would mean
   editing every one of them; this wins regardless of source order. */
body.is-home-screen .start-header,
body.is-home-screen .start-footer {
  display: none !important;
}

body.is-standalone,
body.is-home-screen,
body.is-overlay {
  overflow: hidden;
  background: var(--index-background-color);
}

/*
 * Docked. This document is the whole widget, and while docked the iframe it
 * lives in is sized to the bar by embed.js -- so the band is this viewport,
 * and the rules below lay the composer out to fill it. Expanding is just the
 * removal of this class -- every element below keeps its identity, which is
 * why the composer can be a single object rather than one copy in the host
 * page and another in an overlay.
 *
 * --dock-band-* are pushed in by embed.js: 0, 0 and the viewport's size while
 * docked (the fallbacks below say the same, so the bar paints before the first
 * message arrives), and the bar's place in the host viewport at the moment of
 * expanding, once the iframe has grown to it.
 */
/* Every full-viewport fill has to stand down while docked, or it covers the
   host page: <html>'s own background, the body's, and the shell's -- the last
   one is set further down this file, hence the !important rather than a
   fourth near-duplicate selector down there. */
html.is-docked,
body.is-overlay.is-docked,
body.is-docked .direct-dialogue {
  background: transparent !important;
}

/* The shell is laid out for a full screen and is far taller than the bar's
   viewport; a wheel or a swipe over the bar must not scroll it. */
html.is-docked,
body.is-docked {
  overflow: hidden;
}

/*
 * Both layers, not just the background: the shell holds the header, prompts
 * and messages, and hiding those by opacity alone is not enough -- they fade
 * over 320ms, and for that whole time they were painting over the host page
 * outside the bar. Clipping the shell to the band makes that impossible
 * regardless of what any opacity or transition is doing.
 */
body.is-docked .intro-band,
body.is-docked .direct-dialogue {
  clip-path: inset(
    var(--dock-band-top, 0px) 0px
    calc(100dvh - var(--dock-band-top, 0px) - var(--dock-band-height, 100dvh)) 0px
  );
}

/* Not part of the bar: hidden outright rather than faded, so nothing of the
   fullscreen screen shows through the band. The history button belongs to the
   dialogue, not to the dock -- there is nothing to jump back to from a bar. */
body.is-docked .dialogue__header,
body.is-docked .standalone-prompts,
body.is-docked .dialogue__messages,
body.is-docked .composer-history {
  opacity: 0;
  pointer-events: none;
}

/* Keeps the composer's grid column reserved so the bar's proportions match the
   fullscreen composer exactly -- hiding it outright would reflow the row. */
body.is-docked .composer-history {
  visibility: hidden;
}

/* The composer sits in the band instead of at the bottom of the screen. Same
   element, same styling -- only where it is laid out changes. */
/* During the docked -> fullscreen entry only: these elements are choreographed
   by animations (see expandFromDock), and their own CSS transition would start
   the moment body.is-docked is dropped and show them ahead of their beat. */
body.is-entering .standalone-prompts,
body.is-entering .dialogue__header,
body.is-entering .dialogue__messages {
  transition: none !important;
}

body.is-docked .dialogue__footer {
  position: fixed;
  z-index: 2;
  top: var(--dock-band-top, 0px);
  /* To the slot, not the viewport: a host with a left-hand navigation pane or
     an inset content column would otherwise have the bar drawn over it. Falls
     back to the full width when the host sends no horizontal extent. */
  left: var(--dock-band-left, 0px);
  width: var(--dock-band-width, 100%);
  height: var(--dock-band-height, 100dvh);
  align-content: center;
  /* Both sides, not just the bottom: the footer's own 10px padding-top would
     otherwise sit on one side only and push the composer down the band. */
  padding: 0;
}

body.is-standalone .intro-band,
body.is-home-screen .intro-band,
body.is-overlay .intro-band {
  width: 100%;
  min-height: 100dvh;
  background-position: center;
}

body.is-home-screen .intro-band {
  position: fixed;
  z-index: 40;
  inset: 0;
}

body.is-standalone .intro-band::after,
body.is-home-screen .intro-band::after {
  background: rgb(0 0 0 / 22%);
}

body.is-standalone .start-header,
body.is-home-screen .start-header {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  left: 0;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 16px;
  border: 0;
  color: #909090;
  background: #fff;
  box-shadow: none;
  font-family: "Inter", Arial, sans-serif;
}

.start-header__brand {
  display: flex;
  align-items: center;
  flex: none;
  gap: 8px;
  text-decoration: none;
}

.start-header__brand > svg {
  width: 20px;
  height: 20px;
  flex: none;
  fill: #909090;
}

.start-header__brand img {
  width: 148.75px;
  height: 17px;
  display: block;
}

.start-header nav,
.start-footer nav,
.start-header__actions {
  display: flex;
  align-items: center;
}

.start-header__nav {
  min-width: 0;
  gap: clamp(14px, 1.6vw, 28px);
  flex: 1;
  margin-left: 27px;
  overflow: hidden;
}

.start-header__nav a,
.start-header__nav span,
.start-header__actions a,
.start-footer,
.start-footer a,
.start-footer button {
  color: #909090;
  font-family: "Inter", Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  white-space: nowrap;
}

.start-header__nav a,
.start-header__nav span,
.start-header__actions a {
  letter-spacing: -0.3px;
}

.start-header__nav span {
  color: #d7d7d7;
}

.start-header__more {
  font-size: 17px !important;
  letter-spacing: 2px;
}

.start-header__actions {
  flex: none;
  gap: 0;
  margin-left: 18px;
}

.start-header__search {
  width: 24px;
  height: 24px;
  margin-right: 14px;
  display: grid;
  place-items: center;
}

.start-header__search svg {
  width: 24px;
  height: 24px;
  fill: currentcolor;
}

.start-header__login svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.8;
}

.start-header__actions .start-header__language {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.start-header__language {
  width: 32px;
  height: 32px;
  padding: 5px 7px;
  display: grid;
  place-items: center;
  border-radius: 3px;
}

.start-header__search + .start-header__language {
  margin-right: 4px;
}

.start-header__language + .start-header__language {
  margin-right: 14px;
}

.start-header__language.is-active {
  color: #151514;
  background: #fefefe;
  box-shadow: 0 4px 8px rgb(0 0 0 / 9%);
}

.start-header__project {
  height: 40px;
  display: grid;
  place-items: center;
  margin-right: 14px;
  padding: 6px 24px;
  border-radius: 3px;
  color: #fff !important;
  background: #151514;
  font-weight: 700 !important;
}

.start-header__project:hover,
.start-header__project:focus-visible {
  background: #1f1f1f;
}

.start-header__login {
  min-width: 63px;
  height: 40px;
  display: flex;
  align-items: center;
  /* justify-content: flex-end; */
}

.start-header__login svg,
.start-header__menu {
  display: none;
}

/* Middle row of the shell, so it fills whatever the header and the composer
   leave -- no absolute centering, nothing to re-measure when the dialogue
   replaces it. */
.standalone-prompts {
  z-index: 3;
  width: min(540px, calc(100% - 32px));
  min-height: 0;
  justify-self: center;
  align-self: stretch;
  overflow-x: hidden;
  overflow-y: auto;
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  overscroll-behavior: contain;
  scrollbar-width: none;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

body.is-standalone .screen-customizer,
body.is-home-screen .screen-customizer {
  position: absolute;
  z-index: 7;
  top: 50%;
  right: max(14px, env(safe-area-inset-right));
  /* display: grid; */
  justify-items: center;
  gap: 8px;
  transform: translateY(-50%);
  display: none; /* for pilot stage only!!! */

}

.screen-customizer__toggle {
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 50%);
  border-radius: 50%;
  color: #fff;
  background: rgb(0 43 31 / 72%);
  font-size: 18px;
}

.screen-customizer__toggle:hover,
.screen-customizer__toggle:focus-visible {
  color: #082e23;
  background: #fff;
  outline: 0;
}

.screen-customizer__panel {
  position: absolute;
  top: 0;
  right: 46px;
  width: 210px;
  display: grid;
  gap: 4px;
  padding: 12px 13px;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 7px;
  color: #fff;
  background: rgb(0 35 25 / 92%);
  box-shadow: 0 10px 28px rgb(0 24 16 / 24%);
}

.screen-customizer__panel[hidden] {
  display: none;
}

.screen-customizer__panel strong {
  font-size: 11px;
}

.screen-customizer__panel span {
  color: rgb(255 255 255 / 65%);
  font-size: 9px;
  line-height: 1.35;
}

.screen-customizer__credit {
  max-height: 190px;
  padding: 9px 7px;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: 14px;
  color: #fff;
  background: rgb(0 0 0 / 50%);
  font-size: 9px;
  line-height: 1.35;
  text-decoration: none;
  writing-mode: vertical-rl;
  transition: all 0.6s ease !important;
}

body.is-standalone .start-footer,
body.is-home-screen .start-footer {
  position: absolute;
  z-index: 8;
  right: 0;
  bottom: 0;
  left: 0;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 4px 24px 5px;
  border: 0;
  color: #909090;
  background: #fff;
  font-family: "Inter", Arial, sans-serif;
}

.start-footer nav {
  justify-content: flex-end;
  gap: 32px;
}

.start-footer nav a {
  text-transform: lowercase;
}

.start-footer nav[hidden] {
  display: none;
}

.start-footer,
.start-footer a,
.start-footer button {
  font-size: 11px;
  font-weight: 400;
  line-height: 13px;
  letter-spacing: normal;
}

.start-footer > a:first-child {
  font-weight: 600;
}

.start-footer__more {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
}

.start-footer a:hover,
.start-footer a:focus-visible,
.start-header a:hover,
.start-header a:focus-visible {
  color: #151514;
  text-decoration: none;
  outline: 0;
}
.screen-customizer__credit:hover,
.screen-customizer__credit:focus-visible {
  color: #fff;
  text-decoration: none;
  background: #111;
  transition: all 0.2s ease !important;
}

.standalone-prompts::-webkit-scrollbar {
  display: none;
}

.standalone-prompts__track,
.prompt-group {
  width: 100%;
}

.prompt-slot {
  height: 64px;
  display: grid;
  place-items: center;
}

.standalone-prompts button {
  width: var(--chip-width, 8px);
  height: var(--chip-height, 8px);
  min-width: 8px;
  min-height: 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 999px;
  opacity: var(--chip-opacity, .22);
  color: #111;
  background: #fff;
  /* box-shadow: 0 4px 18px rgb(0 54 33 / 14%); */
  font-size: 12px;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
  will-change: width, height, opacity;
  transition: all 0.6s ease;
}

.prompt-chip__label {
  display: block;
  width: max-content;
  max-width: calc(100vw - 58px);
  padding: 0 15px;
  opacity: var(--text-opacity, 0);
  white-space: nowrap;
  will-change: opacity;
}

.standalone-prompts button:hover,
.standalone-prompts button:focus-visible {
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / 30%), inset -1px -1px 0 rgb(255 255 255 / 50%), 0 8px 28px rgb(0 0 0 / 16%);
  /* outline: 2px solid #111; */
  outline-offset: 2px;
  background: #111;
  color: #fff;
  transition: all 0.2s ease;
}

.operator-session-bar {
  display: grid;
  justify-items: center;
}

.operator-session-bar[hidden] {
  display: none;
}

.save-receipt {
  width: min(660px, 92%);
  margin: 0;
  padding: 0;
  color: rgb(255 255 255 / 64%);
  background: transparent;
  font-size: var(--index-meta-size);
  line-height: var(--index-meta-line-height);
}

.save-receipt strong {
  color: #fff;
  font-size: inherit;
  font-weight: 400;
}

.suggestion-block {
  display: grid;
  gap: 9px;
  width: min(100%, 610px);
  margin-top: 3px;
  will-change: height, margin-top, opacity, transform;
}

.suggestion-block.is-revealed {
  visibility: visible;
  animation: suggestions-arrival 520ms cubic-bezier(.16, .82, .22, 1) both;
}

.suggestion-block__label {
  margin: 0;
  color: rgb(255 255 255 / 70%);
  font-size: 11px;
}

.suggestion-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.suggestion-list button {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid rgb(255 255 255 / 38%);
  border-radius: 18px;
  color: #fff;
  background: rgb(0 24 17 / 74%);
  font-size: 11px;
  line-height: 1.25;
  text-align: left;
}

.suggestion-list button:hover,
.suggestion-list button:focus-visible {
  border-color: #fff;
  background: #fff;
  color: #111;
  outline: 0;
}

.transition-message {
  position: fixed;
  z-index: 60;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin: 0;
  border: 4px solid #1c1c1c;
  border-radius: 34px;
  color: #202020;
  background: #fff;
  box-shadow: 0 8px 28px rgb(0 0 0 / 12%);
  font-family: var(--index-font-family);
  font-size: var(--index-text-size);
  font-weight: 400;
  line-height: var(--index-text-line-height);
  letter-spacing: 0;
  white-space: pre-wrap;
  pointer-events: none;
  will-change: left, top, width, height, border-radius, padding, transform, opacity;
}

.dialogue__messages.is-following-up {
  align-content: start;
}

html.is-dialogue-open,
body.is-dialogue-open {
  overflow: hidden;
  overscroll-behavior: none;
  background: #00120d;
  scrollbar-width: none;
}

html.is-dialogue-open::-webkit-scrollbar,
body.is-dialogue-open::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

@keyframes answer-arrival {
  0% { opacity: 0; transform: translateY(18px) scale(.985); }
  62% { opacity: 1; transform: translateY(-2px) scale(1.002); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes suggestions-arrival {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (max-width: 680px) {
  body.is-overlay .direct-dialogue {
    grid-template-rows: 58px minmax(0, 1fr) auto;
  }

  body.is-overlay .direct-dialogue .dialogue__header {
    width: calc(100% - 18px);
    padding-top: max(7px, env(safe-area-inset-top));
  }

  .direct-dialogue .dialogue__messages {
    align-content: start;
    gap: 11px;
    padding-top: 18px;
  }

  .direct-dialogue .dialogue__footer {
    gap: 6px;
    background: linear-gradient(transparent, rgb(0 16 11 / 88%) 18%);
  }

  .direct-dialogue .operator-button {
    min-height: 34px;
    padding-block: 6px;
  }

  .suggestion-block {
    gap: 7px;
  }

  .suggestion-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .suggestion-list button {
    width: 100%;
    min-height: 32px;
    padding: 7px 11px;
  }

  .answer-card {
    width: 94%;
  }

  .answer-card__body {
    gap: 12px;
    padding: 15px 16px;
  }

  .answer-card__text {
    /* Was 13px, which quietly undid the larger answer type on exactly the
       screens where it was asked for. */
    font-size: 16px;
  }

  .link-preview {
    grid-template-columns: 104px minmax(0, 1fr);
    min-height: 96px;
  }

  .link-preview img {
    min-height: 96px;
  }

  .link-preview__content {
    padding: 10px 11px;
  }

  .link-preview__description {
    -webkit-line-clamp: 2;
  }

  .answer-card__source {
    gap: 6px;
    padding: 9px 16px 10px;
  }

  body.is-standalone .standalone-prompts,
  body.is-home-screen .standalone-prompts {
    width: calc(100% - 20px);
  }

  body.is-standalone .start-header,
  body.is-home-screen .start-header {
    height: 52px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 58px;
    gap: 0;
    padding: 0 12px;
  }

  .start-header .start-header__nav,
  .start-header__search,
  .start-header__language,
  .start-header__project {
    display: none;
  }

  .start-header__menu {
    width: 32px;
    height: 32px;
    display: grid;
    align-content: center;
    gap: 4px;
    justify-self: start;
    padding: 5px;
    border: 0;
    background: transparent;
  }

  .start-header__menu span {
    width: 14px;
    height: 2.5px;
    display: block;
    background: #909090;
  }

  .start-header__brand {
    justify-self: center;
  }

  .start-header__brand > svg {
    display: none;
  }

  .start-header__brand img {
    width: 132px;
    height: 16px;
  }

  .start-header__actions {
    justify-self: end;
    margin: 0;
  }

  .start-header__login {
    min-width: 52px;
    height: 40px;
    display: flex;
    gap: 4px;
    justify-content: flex-end;
    margin: 0;
    font-size: 12px !important;
  }

  .start-header__login svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  body.is-standalone .screen-customizer,
  body.is-home-screen .screen-customizer {
    right: 7px;
  }

  .screen-customizer__credit {
    max-height: 150px;
    max-width: 30px;
    padding: 7px 6px;
    font-size: 8px;
  }

  .screen-customizer__panel {
    right: 40px;
    width: min(210px, calc(100vw - 64px));
  }

  body.is-standalone .start-footer,
  body.is-home-screen .start-footer {
    height: 29px;
    display: flex;
    gap: 12px;
    padding: 4px 12px max(5px, env(safe-area-inset-bottom));
  }

  .start-footer nav {
    display: none;
  }

  .start-footer__more {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .standalone-prompts button {
    font-size: 11px;
  }

  .prompt-slot {
    height: 58px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .transition-message {
    display: none;
  }

  .thinking-dots i {
    animation: none;
  }

  .answer-card--loading {
    animation: none;
  }

  body.is-standalone .standalone-prompts,
  body.is-home-screen .standalone-prompts {
    overflow-y: auto;
    mask-image: none;
  }

  .standalone-prompts button {
    width: fit-content !important;
    height: auto !important;
    min-height: 36px;
    margin: 0 auto;
    padding: 8px 0;
    opacity: 1 !important;
  transition: all 0.6s ease;

  }

  .prompt-chip__label {
    opacity: 1 !important;
  }
}

/* Design export 2026-07: shared launcher, home screen and answer surface. */
.dialogue-composer,
.direct-dialogue,
.standalone-prompts,
.screen-customizer {
  font-family: 'HSE Sans', Arial, sans-serif;
}

/*
 * Single source of truth for composer geometry. Every mode-specific block below
 * (is-standalone, is-overlay dialogue, their mobile @media variants) only
 * reassigns these custom properties -- it never restates the formulas.
 * The Shadow DOM launcher in embed.js can't read these (separate document),
 * so it keeps its own hand-synced copy of the same tokens/state machine --
 * see the comment there. Tune one, tune the other.
 */
.dialogue-composer {
  --composer-radius: 34px;
  --composer-max-width: 540px;
  --composer-inset: 96px;
  --composer-min-height: 40px;
  --composer-mascot-width: 58px;
  --composer-padding: 5px 4px 5px 9px;
  --composer-button-size: var(--icon-button-size);
  /* Its own track, so an empty history can collapse it without
     disturbing the send button's. */
  --composer-history-size: var(--icon-button-size);
  /*
   * Spacing between the composer's own grid cells (not the padding around its
   * outer edge -- that's --composer-padding above). Each gap is its own
   * element-to-element edge, so it can be tuned independently:
   *   --composer-gap-mascot  divider -> textarea
   *   --composer-gap-input   textarea -> history button
   *   --composer-gap-button  history button -> send button
   * All three default to --composer-gap (5px); override --composer-gap alone
   * to move all of them together, or override one of the three by name to
   * adjust just that edge. Real spacer tracks (below), not CSS `gap`, so each
   * one can differ -- grid's own gap property only supports a single uniform
   * value.
   */
  --composer-gap: 5px;
  --composer-gap-mascot: 10px;
  --composer-gap-input: var(--composer-gap);
  --composer-gap-button: 4px;
  /* Divider's own inset (margin shorthand, e.g. "8px 0" for vertical breathing
     room) and the send button's own right-side push, independent of the
     shared --composer-padding/--composer-gap-* above. */
  --composer-divider-margin: 4px -8.5px 4px 0;
  --composer-send-margin-right: 6px;
  --composer-columns:
    var(--composer-mascot-width)
    var(--composer-gap-mascot)
    minmax(0, 1fr)
    var(--composer-gap-input)
    var(--composer-history-size)
    var(--composer-gap-button)
    var(--composer-button-size);
  position: relative;
  isolation: isolate;
  overflow: visible;
  border: 0;
  width: min(var(--composer-max-width), calc(100% - var(--composer-inset)));
  min-height: var(--composer-min-height);
  grid-template-columns: var(--composer-columns);
  gap: 0;
  padding: var(--composer-padding);
  border-radius: var(--composer-radius);
  background: transparent;
  box-shadow: none;
  transition: border-radius 220ms ease, min-height 220ms ease;
}

.dialogue-composer.is-multiline {
  --composer-radius: 24px;
}

.dialogue-composer.is-multiline .index-crow-frame,
.dialogue-composer.is-multiline > .index-crow-frame {
  align-self: start;
  margin-top: 0;
}

.dialogue-composer.is-multiline > button {
  align-self: end;
}

.composer-glass-underlay {
  position: absolute;
  z-index: 0;
  inset: -5px;
  border: 0;
  border-radius: calc(var(--composer-radius) + 8px);
  background: rgb(0 0 0 / 10%);
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / 30%), inset -1px -1px 0 rgb(255 255 255 / 50%), 0 8px 28px rgb(0 0 0 / 16%);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  pointer-events: none;
}

.composer-surface {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: inherit;
  background: #fff;
  box-shadow: 0 8px 28px rgb(0 0 0 / 8%);
  pointer-events: none;
}

.dialogue-composer > .index-crow-frame,
.dialogue-composer > textarea,
.dialogue-composer > button,
.dialogue-composer > .index-crow-frame,
.dialogue-composer > textarea,
.dialogue-composer > button {
  position: relative;
  z-index: 2;
}

.dialogue-composer .index-crow-frame,
.dialogue-composer > .index-crow-frame {
  grid-column: 1;
  grid-row: 1;
  width: min(50px, 100%);
  height: auto;
  aspect-ratio: 62 / 36;
  display: block;
  align-self: center;
  justify-self: center;
  background-image: url('assets/crow_frames.svg');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 400% 500%;
}

/*
 * The divider line used to be .index-crow-frame's own border-right, which meant
 * it only ever spanned the frame's own (small, fixed aspect-ratio) box. Pulled
 * out into its own element sharing the same grid cell so it can always stretch
 * to the composer's full row height, independent of where the mascot icon
 * itself is pinned (center when single-line, top via .is-multiline below).
 */
.dialogue-composer > .composer-divider {
  grid-column: 1;
  grid-row: 1;
  display: block;
  align-self: stretch;
  justify-self: end;
  width: 1px;
  margin: var(--composer-divider-margin);
  background: #b9b9b9;
  z-index: 1;
}

/*
 * Explicit placement into the content columns (3/5/7) -- the odd columns in
 * between are the --composer-gap-* spacer tracks added to --composer-columns
 * above, so auto-placement would otherwise walk straight into them.
 */
.dialogue-composer > textarea {
  grid-column: 3;
  grid-row: 1;
}

.dialogue-composer > button.composer-history {
  grid-column: 5;
  grid-row: 1;
  width: 30px;
}

.dialogue-composer > button:not(.composer-history) {
  grid-column: 7;
  grid-row: 1;
  width: 28px;
  margin-right: var(--composer-send-margin-right);
}

/* Draft frame map for the supplied 4 x 5 mascot sheet. Tune positions and timings here. */
.index-crow-frame[data-crow-state='idle'] {
  animation: crow-idle 5s steps(1, end) infinite;
}
/*
 * Focus is three states, not one, so app.js can bridge between idle and
 * focus without a jump-cut: focus-enter (one-shot, idle's frame -> the
 * settled focus frame), focus-idle (looping rest while still focused,
 * mirrors crow-idle one row down), unfocus (one-shot, reverse of
 * focus-enter, back to idle's frame). See setCrowState() in app.js.
 */
.index-crow-frame[data-crow-state='focus-enter'] {
  animation: crow-focus-enter 120ms steps(1, end) 1 forwards;
}

.index-crow-frame[data-crow-state='focus-idle'] {
  animation: crow-focus-idle 5s steps(1, end) infinite;
}

.index-crow-frame[data-crow-state='unfocus'] {
  animation: crow-unfocus 180ms steps(1, end) 1 forwards;
}

/*
 * Waiting-for-backend is three phases too, same idea as focus: loading-start
 * (one-shot entry) -> loading-thinking (the sustained wait loop) -> when the
 * answer is ready to type out, loading-end (one-shot exit) hands off into
 * 'writing', which alternates loading-start/loading-end for as long as the
 * character-by-character reveal runs (see setCrowState()/runCrowWritingCycle()
 * in app.js -- 'writing' isn't a CSS state by itself, just a JS-driven loop
 * over these same two one-shots).
 */
.index-crow-frame[data-crow-state='loading-start'] {
  animation: crow-loading_start 400ms steps(1, end) 1 forwards;
}

.index-crow-frame[data-crow-state='loading-thinking'] {
  animation: crow-loading_thinking 800ms steps(1, end) infinite;
  opacity: .72;
}

.index-crow-frame[data-crow-state='loading-end'] {
  animation: crow-loading_end 400ms steps(1, end) 1 forwards;
}

@keyframes crow-idle {
  0%, 96% { background-position: 0 0; }
  97%, 98% { background-position: 33.333% 0; }
  99%, 100% { background-position: 66.667% 0; }
}
@keyframes crow-focus-enter {
  0% { background-position: 0 25%; }
  60% { background-position: 33.333% 25%; }
  100% { background-position: 66.667% 25%; }
}

@keyframes crow-focus-idle {
  0%, 98% { background-position: 66.667% 25%; }
  99%, 100% { background-position: 100% 25%; }
}

@keyframes crow-unfocus {
  0% { background-position: 66.667% 25%; }
  50% { background-position: 33.333% 25%; }
  100% { background-position: 0 25%; }
}

@keyframes crow-loading_start {
  0% { background-position: 0 75%; }
  25% { background-position: 33.333% 75%; }
  50% { background-position: 66.667% 75%; }
  75% { background-position: 100% 75%; }
  100% { background-position: 100% 50%; }
}

@keyframes crow-loading_thinking {
  0% { background-position: 100% 50%; }
  25% { background-position: 0 50%; }
  50% { background-position: 33.333% 50%; }
  75% { background-position: 66.667% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes crow-loading_end {
  0% { background-position: 100% 50%; }
  25% { background-position: 0 100%; }
  50% { background-position: 33.333% 100%; }
  75% { background-position: 66.667% 100%; }
  100% { background-position: 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .index-crow-frame[data-crow-state] { animation: none; }
}

.dialogue-composer > button {
  align-self: center;
  background: transparent;
}

.dialogue-composer button:not(:disabled) {
  background: transparent;
}

.dialogue-composer button > img,
.dialogue__home > img,
#close-dialogue > img,
.screen-customizer__tool > img,
.screen-customizer__toggle > img,
.screen-customizer__close > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.dialogue-composer button.composer-history {
  position: relative;
  overflow: visible;
  color: #c3c3c3;
  background: transparent;
  box-shadow: none;
  font-size: 27px;
}

.dialogue-composer button.composer-history::after {
  position: absolute;
  right: 0;
  bottom: calc(100% + 11px);
  width: max-content;
  max-width: min(230px, calc(100vw - 32px));
  padding: 7px 10px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 7px;
  opacity: 0;
  color: #fff;
  background: rgb(0 24 17 / 86%);
  box-shadow: 0 7px 22px rgb(0 20 13 / 18%);
  content: attr(data-tooltip);
  font: 400 11px/1.25 'HSE Sans', Arial, sans-serif;
  letter-spacing: 0;
  text-align: left;
  white-space: normal;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 140ms ease, transform 180ms ease;
  backdrop-filter: blur(10px);
}

.dialogue-composer button.composer-history:hover::after,
.dialogue-composer button.composer-history:focus-visible::after,
.dialogue-composer button.composer-history:hover::after,
.dialogue-composer button.composer-history:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* Nothing saved to return to: hide the control rather than offer a dead one,
   and collapse its track and gap so the send button does not sit beside a
   hole. */
.dialogue-composer button.composer-history.is-empty {
  display: none;
}

.dialogue-composer.is-history-empty {
  --composer-history-size: 0px;
  --composer-gap-button: 0px;
}

.dialogue-composer button.composer-history:hover,
.dialogue-composer button.composer-history:focus-visible,
.dialogue-composer button.composer-history:hover,
.dialogue-composer button.composer-history:focus-visible {
  opacity: .72;
  background: transparent;
  outline: 0;
}

.dialogue-composer #send-question:disabled {
  background: transparent;
  opacity: .42;
}

body.is-standalone .intro-band,
body.is-home-screen .intro-band {
  background-color: var(--index-background-color);
  background-image: var(--index-background-image);
}

body.is-standalone .intro-band::after,
body.is-home-screen .intro-band::after {
  background: rgb(0 0 0 / 4%);
}

/* Sizing only -- the composer sits in the shell's footer row now, so it needs
   no positioning of its own and nothing here changes between the two screens. */
.dialogue-composer {
  z-index: 6;
  --composer-max-width: 720px;
  --composer-inset: 48px;
  border-width: 0;
}

body.is-standalone .dialogue-composer textarea,
body.is-home-screen .dialogue-composer textarea {
  font-size: var(--index-input-font-size);
}

body.is-standalone .dialogue-composer button,
body.is-home-screen .dialogue-composer button {
  font-size: 23px;
}

body.is-standalone .dialogue-composer button.composer-history,
body.is-home-screen .dialogue-composer button.composer-history {
  font-family: Arial, sans-serif;
  font-size: 30px;
}

body.is-standalone .standalone-prompts,
body.is-home-screen .standalone-prompts {
  width: min(660px, calc(100% - 44px));
  mask-image: none;
  -webkit-mask-image: none;
}

.prompt-slot {
  height: 58px;
}

.standalone-prompts button {
  min-width: 0;
  min-height: 0;
  border-radius: 28px;
  opacity: 1;
  font-size: 16px;
  box-shadow: inset 1px 1px 0 rgb(255 255 255 / 30%), inset -1px -1px 0 rgb(255 255 255 / 50%), 0 8px 28px rgb(0 0 0 / 16%);
  will-change: width, height, transform;
  transition: color 0.6s ease, background 0.6s ease;

}

.prompt-chip__label {
  padding: 0 22px;
  opacity: 1;
  visibility: hidden;
  will-change: auto;
}

.prompt-group.is-static button {
  width: max-content;
  height: 42px;
}

.prompt-group.is-static .prompt-chip__label {
  visibility: visible;
}

body.is-standalone .start-header,
body.is-home-screen .start-header {
  border: 0;
  background: #fff;
  backdrop-filter: none;
}

body.is-standalone .screen-customizer,
body.is-home-screen .screen-customizer {
  z-index: 40;
  right: max(18px, env(safe-area-inset-right));
  gap: 10px;
}

body.is-standalone .screen-customizer:has(.screen-customizer__panel:not([hidden])),
body.is-home-screen .screen-customizer:has(.screen-customizer__panel:not([hidden])) {
  transform: none;
}

.screen-customizer__tool,
.screen-customizer__toggle {
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0%);
  transition: all 0.6s ease !important;
}

.screen-customizer__tool:hover,
.screen-customizer__tool:focus-visible,
.screen-customizer__toggle:hover,
.screen-customizer__toggle:focus-visible,
.screen-customizer__close:hover,
.screen-customizer__close:focus-visible {
  /* opacity: .72; */
  background: rgb(0 0 0 / 100%);
  outline: 0;
  transition: all 0.2s ease !important;
  cursor: pointer;
}

.screen-customizer__credit {
  max-height: 300px;
  padding: 12px 9px;
  border: 0;
  border-radius: 20px;
  background: rgb(0 65 44 / 58%);
  font-size: 12px;
  transform: rotate(180deg);
}

.screen-customizer__preview[aria-pressed="true"] {
  opacity: .52;
  background: transparent;
}

body.is-standalone .start-header,
body.is-standalone .standalone-prompts,
body.is-standalone .dialogue-composer,
body.is-standalone .start-footer,
body.is-standalone .screen-customizer > *,
body.is-home-screen .start-header,
body.is-home-screen .standalone-prompts,
body.is-home-screen .dialogue-composer,
body.is-home-screen .start-footer,
body.is-home-screen .screen-customizer > * {
  transition: opacity 320ms ease, filter 420ms ease;
}

body.is-standalone .intro-band::after,
body.is-home-screen .intro-band::after {
  transition: opacity 320ms ease;
}

body.is-background-preview .start-header,
body.is-background-preview .standalone-prompts,
body.is-background-preview .dialogue-composer,
body.is-background-preview .start-footer,
body.is-background-preview .screen-customizer > :not(.screen-customizer__preview) {
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
}

body.is-background-preview .intro-band::after {
  opacity: 0;
}

body.is-background-preview .screen-customizer__preview {
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

.screen-customizer__panel {
  position: fixed;
  z-index: 30;
  inset: 0;
  min-height: 0;
  max-height: 100dvh;
  width: auto;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: 24px;
  padding: clamp(48px, 6vh, 72px) clamp(32px, 6vw, 96px) 88px;
  border: 0;
  border-radius: 0;
  color: #fff;
  background: rgb(0 22 15 / 74%);
  box-shadow: none;
  overflow-x: hidden;
  overflow-y: scroll;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  backdrop-filter: blur(11px);
}

.screen-customizer__close {
  position: fixed;
  z-index: 2;
  right: 24px;
  bottom: 24px;
  width: var(--icon-button-size);
  height: var(--icon-button-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

.screen-customizer__palette,
.screen-customizer__gallery {
  width: min(100%, 1120px);
  margin-inline: auto;
  display: grid;
  justify-content: center;
  gap: 18px;
}

.screen-customizer__palette {
  grid-template-columns: repeat(5, minmax(108px, 190px));
}

.screen-customizer__gallery {
  grid-template-columns: repeat(auto-fill, minmax(150px, 190px));
  padding-bottom: 20px;
}

.screen-customizer__palette button,
.screen-customizer__gallery button {
  position: relative;
  min-width: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  aspect-ratio: 1.55;
}

.screen-customizer__palette button:nth-child(1) { background: #f3f2ef; }
.screen-customizer__palette button:nth-child(2) { background: #3668f5; }
.screen-customizer__palette button:nth-child(3) { background: #a38df4; }
.screen-customizer__palette button:nth-child(4) { background: #ffd13f; }
.screen-customizer__palette button:nth-child(5) { background: #080808; }

.screen-customizer__gallery img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.screen-customizer__palette button[aria-pressed='true'],
.screen-customizer__gallery button[aria-pressed='true'] {
  outline: 5px solid #fff;
  outline-offset: 4px;
}

.direct-dialogue {
  background-color: #00120d;
  background-image: var(--index-background-image);
  background-position: center;
  background-size: cover;
}

.direct-dialogue::before {
  background: rgb(0 9 6 / 86%);
  backdrop-filter: blur(15px);
}

body.is-overlay .direct-dialogue,
.direct-dialogue {
  grid-template-rows: 72px minmax(0, 1fr) auto;
}

.direct-dialogue .dialogue__header,
body.is-overlay .direct-dialogue .dialogue__header {
  width: calc(100% - 48px);
  max-width: none;
  grid-template-columns: 48px minmax(0, 1fr) 48px;
  padding: 18px 0 6px;
}

.direct-dialogue .dialogue__identity {
  visibility: visible;
  min-height: 44px;
  padding: 5px 16px 5px 12px;
  border-radius: 24px;
  background: rgb(0 18 13 / 72%);
  box-shadow: 0 4px 18px rgb(0 0 0 / 14%);
  backdrop-filter: blur(10px);
}

.direct-dialogue .dialogue__avatar {
  width: auto;
  min-width: 48px;
  height: 32px;
  padding-right: 10px;
  overflow: visible;
  border-right: 1px solid rgb(255 255 255 / 24%);
  border-radius: 0;
  color: #fff;
  background: transparent;
  font-size: 14px;
}

/*
 * Static idle frame (0 0 of the same sprite as .index-crow-frame) standing in
 * for the old "{°v°}" text avatar. brightness(0) invert(1) recolors the
 * sprite's black linework to solid white -- safe here because crow_frames.svg
 * is pure black-on-transparent, no other colors to distort.
 */
.dialogue__avatar-icon {
  width: auto;
  height: 22px;
  aspect-ratio: 62 / 36;
  display: block;
  background-image: url('assets/crow_frames.svg');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 400% 500%;
  filter: brightness(0) invert(1);
}

.direct-dialogue .dialogue__avatar.has-image {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding-right: 0;
  overflow: hidden;
  border-right: 0;
  border-radius: 50%;
}

.direct-dialogue .dialogue__avatar.has-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.direct-dialogue .dialogue__identity strong {
  font-size: var(--index-text-size);
  font-weight: 400;
  line-height: 1.15;
}

.direct-dialogue .dialogue__identity span:not(.dialogue__avatar) {
  font-size: var(--index-meta-size);
  line-height: var(--index-meta-line-height);
}

.direct-dialogue #close-dialogue {
  visibility: visible;
  pointer-events: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.direct-dialogue .dialogue__home,
body.is-overlay .direct-dialogue .dialogue__home {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.direct-dialogue .dialogue__messages {
  width: min(calc(100% - 48px), 720px);
  max-width: 1120px;
  gap: 34px;
  padding: 30px 0 64px;
  mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 48px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26px, #000 calc(100% - 48px), transparent 100%);
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.direct-dialogue .user-message {
  justify-self: end;
  width: auto;
  max-width: min(680px, 72%);
  padding: 16px 24px;
  border-radius: 22px;
  font-size: var(--index-text-size);
  font-weight: 400;
  line-height: var(--index-text-line-height);
}

.direct-dialogue .operator-transition-divider {
  width: 100%;
  height: 1px;
  margin: 2px 0;
  background: rgb(255 255 255 / 28%);
}

.direct-dialogue .operator-message {
  width: min(680px, 72%);
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
}

.direct-dialogue .operator-message__content {
  padding: 16px 24px;
  border-radius: 22px;
  font-family: var(--index-font-family);
  font-size: var(--index-text-size);
  font-weight: 400;
  line-height: var(--index-text-line-height);
}

.direct-dialogue .answer-card,
.direct-dialogue .answer-card--fallback,
.direct-dialogue .answer-card--error {
  width: min(920px, 92%);
  min-height: calc(var(--index-text-size) * var(--index-text-line-height));
  overflow: visible;
  border-radius: 0;
  color: #fff;
  background: transparent;
  box-shadow: none;
}

.direct-dialogue .answer-card.is-growing {
  overflow: clip;
}

.direct-dialogue .answer-card__body {
  gap: 18px;
  padding: 0;
}

.direct-dialogue .answer-card__text {
  min-height: calc(var(--index-text-size) * var(--index-text-line-height));
}

.direct-dialogue .answer-card,
.direct-dialogue .answer-card button,
.direct-dialogue .answer-card a,
.direct-dialogue .answer-card p,
.direct-dialogue .answer-card li,
.direct-dialogue .answer-card strong,
.direct-dialogue .answer-card span {
  font-family: var(--index-font-family);
  font-size: var(--index-text-size);
  font-weight: 400;
  line-height: var(--index-text-line-height);
}

.direct-dialogue .answer-card__details-content {
  gap: 16px;
}

.direct-dialogue .answer-card__quote,
.direct-dialogue .answer-card__volatile,
.direct-dialogue .answer-card__integration {
  padding: 0;
  border: 0;
  border-radius: 0;
  color: rgb(255 255 255 / 76%);
  background: transparent;
}

.direct-dialogue .answer-card__links a,
.direct-dialogue .answer-card__option {
  min-height: 48px;
  border: 0;
  border-radius: 8px;
  background: rgb(255 255 255 / 9%);
}

/* On the dark (9% white) block the base #151515 title / #555 snippet are too
   low-contrast — use light text here. Scoped to direct-dialogue so the
   white-background (light) context keeps its dark text. Title (strong) and the
   ↗ arrow (::after) inherit this; the snippet span gets the theme's secondary
   level, matching quote/volatile/integration. */
.direct-dialogue .answer-card__option {
  color: #fff;
}

.direct-dialogue .answer-card__option span {
  color: rgb(255 255 255 / 76%);
}

.direct-dialogue .answer-card__links a:hover,
.direct-dialogue .answer-card__links a:focus-visible {
  color: #111;
  background: #fff;
}

.direct-dialogue .link-preview {
  border: 0;
  border-radius: 8px;
  background: rgb(0 18 13 / 54%);
}

.direct-dialogue .answer-card__source {
  margin-top: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--index-meta-size);
  line-height: var(--index-meta-line-height);
}

.direct-dialogue .answer-card__source span,
.direct-dialogue .answer-card__source a {
  font-size: inherit;
  line-height: inherit;
}

.direct-dialogue .answer-card__quote > span,
.direct-dialogue .link-preview__site {
  font-size: var(--index-meta-size);
  line-height: var(--index-meta-line-height);
}

.direct-dialogue .suggestion-block__label {
  font-size: var(--index-meta-size);
  line-height: var(--index-meta-line-height);
}

.direct-dialogue .suggestion-list button {
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 9%);
  font-size: var(--index-text-size);
  line-height: var(--index-text-line-height);
  transition: color 180ms ease, background 180ms ease, transform 220ms cubic-bezier(.2, .72, .22, 1);
}

.direct-dialogue .suggestion-list button:hover,
.direct-dialogue .suggestion-list button:focus-visible {
  color: #111;
  background: #fff;
  transform: translateY(-1px);
}

.direct-dialogue .answer-card--loading {
  width: min(920px, 92%);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  opacity: .58;
  background: transparent;
  box-shadow: none;
  animation: thinking-text-pulse 1.8s ease-in-out infinite;
}

.direct-dialogue .answer-card--loading.is-revealed {
  animation: thinking-text-pulse 1.8s ease-in-out infinite;
}

.direct-dialogue .answer-card--loading .answer-card__body {
  gap: 9px;
  padding: 0;
}

.direct-dialogue .dialogue__footer {
  /* Full-bleed, matching .intro-band -- .dialogue-composer does its own
     width-clamping via --composer-max-width/--composer-inset (base.css),
     the same tokens .dialogue-composer uses, so both resolve against the same
     100% (the screen) instead of two different pre-narrowed containers. */
  width: 100%;
  justify-items: center;
  padding-bottom: var(--composer-offset-bottom);
}

.direct-dialogue .operator-button {
  display: none; /* for pilot stage only !!! */
  min-height: 44px;
  margin-bottom: 12px;
  padding: 11px 20px;
  border: 0;
  border-radius: 22px;
  color: #fff;
  background: rgb(255 255 255 / 11%);
  box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
  font-size: var(--index-text-size);
  font-weight: 400;
  line-height: var(--index-text-line-height);
  transition: color 180ms ease, background 180ms ease, box-shadow 220ms ease, transform 220ms cubic-bezier(.2, .72, .22, 1);
}

.direct-dialogue .operator-button:hover,
.direct-dialogue .operator-button:focus-visible {
  color: #111;
  background: #fff;
  box-shadow: 0 12px 30px rgb(0 0 0 / 18%);
  outline: 0;
  transform: translateY(-2px);
  cursor: pointer;
}

.direct-dialogue .operator-button:disabled {
  transform: none;
}

.direct-dialogue .dialogue-composer.is-multiline > .index-crow-frame {
  margin-top: 0;
}

.direct-dialogue .dialogue-composer textarea {
  font-size: var(--index-input-font-size);
}

.transition-message {
  font-family: var(--index-font-family);
}

@media (max-width: 680px) {
  body.is-standalone .dialogue-composer,
  body.is-home-screen .dialogue-composer {
    --composer-inset: 18px;
    /* --composer-min-height: 62px; */
    --composer-max-width: 360px;
    /* bottom: var(--composer-offset-bottom); */
  }

  body.is-standalone .dialogue-composer.is-multiline .index-crow-frame,
  body.is-home-screen .dialogue-composer.is-multiline .index-crow-frame {
    margin-top: 0;
  }

  /* No mobile override here on purpose -- .dialogue-composer textarea's
     font-size is --index-input-font-size, which stays 16px at every
     breakpoint (see base.css :root) so iOS Safari doesn't auto-zoom on focus. */

  body.is-standalone .standalone-prompts,
  body.is-home-screen .standalone-prompts {
    width: calc(100% - 34px);
  }

  .prompt-slot {
    height: 46px;
  }

  .standalone-prompts button {
    font-size: 13px;
  }

  body.is-standalone .screen-customizer,
  body.is-home-screen .screen-customizer {
    right: 7px;
    gap: 7px;
  }

  .screen-customizer__tool,
  .screen-customizer__toggle {
    font-size: 18px;
  }

  .screen-customizer__credit {
    max-height: 220px;
    max-width: 34px;
    padding: 9px 7px;
    font-size: 9px;
  }

  .screen-customizer__panel {
    gap: 14px;
    padding: 54px 14px 76px;
  }

  .screen-customizer__palette,
  .screen-customizer__gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .screen-customizer__palette {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .screen-customizer__palette button,
  .screen-customizer__gallery button {
    border-radius: 12px;
  }

  body.is-overlay .direct-dialogue,
  .direct-dialogue {
    grid-template-rows: 58px minmax(0, 1fr) auto;
  }

  .direct-dialogue .dialogue__header,
  body.is-overlay .direct-dialogue .dialogue__header {
    width: calc(100% - 20px);
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .direct-dialogue .dialogue__home,
  body.is-overlay .direct-dialogue .dialogue__home {
    font-size: 32px;
  }

  .direct-dialogue .dialogue__messages {
    width: calc(100% - 30px);
    gap: 26px;
    padding: 30px 0 42px;
  }

  .direct-dialogue .user-message {
    width: auto;
    max-width: min(86%, 560px);
    padding: 14px 20px;
    border-radius: 20px;
    font-size: var(--index-text-size);
  }

  .direct-dialogue .operator-message {
    width: min(86%, 560px);
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
  }

  .direct-dialogue .operator-message img {
    width: 34px;
    height: 34px;
  }

  .direct-dialogue .operator-message__content {
    padding: 14px 20px;
    border-radius: 20px;
  }

  .direct-dialogue .answer-card,
  .direct-dialogue .answer-card--fallback,
  .direct-dialogue .answer-card--error {
    width: 100%;
  }

  .direct-dialogue .dialogue__footer {
    padding-bottom: var(--composer-offset-bottom);
  }

  .direct-dialogue .operator-button {
    min-height: 40px;
    margin-bottom: 12px;
    padding: 9px 16px;
    border-radius: 20px;
  }

  .direct-dialogue .dialogue-composer {
    /* Matches .dialogue-composer's mobile override just above -- same width
       token values, so the composer doesn't change size between the intro
       screen and the dialogue. */
    --composer-inset: 18px;
    --composer-max-width: 360px;
    /* --composer-min-height: 62px; */
  }

  .direct-dialogue .dialogue-composer.is-multiline > .index-crow-frame {
    margin-top: 0;
  }

  /* No mobile override here on purpose -- see the matching comment next to
     .dialogue-composer textarea above; same --index-input-font-size reasoning. */

  body.is-standalone .start-footer,
  body.is-home-screen .start-footer {
    height: 29px;
    display: flex;
    gap: 12px;
    padding: 4px 12px max(5px, env(safe-area-inset-bottom));
    font-size: 10px;
  }
}

/* Пока поле возвращается в полосу, его путь не обрезается границами дока. */
body.is-docked.is-closing .direct-dialogue {
  clip-path: none;
}
body.is-closing .dialogue__header,
body.is-closing .standalone-prompts,
body.is-closing .dialogue__messages {
  transition: none !important;
}

/*
 * Link out to the project page. A sibling of the name, never a child of it:
 * resetOperatorMode() writes dialogueName.textContent when a conversation
 * with an operator ends, which would delete anything nested inside.
 * .dialogue__identity is a flex row, so this sits after the name/status
 * stack and stays vertically centred with it.
 */
.dialogue__about {
  flex: 0 0 auto;
  color: inherit;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 2px;
  opacity: .72;
  transition: opacity 140ms ease;
}

.dialogue__about:hover,
.dialogue__about:focus-visible {
  opacity: 1;
}

.direct-dialogue .dialogue__about {
  font-size: var(--index-meta-size);
}

/*
 * Standing caveat under the composer, in the assistant's own voice and face.
 * Part of the shell rather than the composer, so the composer's grid is
 * untouched and the note simply follows it; hidden while docked, where the
 * bar is a single line and there is nowhere to put it.
 */
.composer-note {
  grid-column: 1 / -1;
  margin: 14px auto 0;
  max-width: var(--composer-max-width);
  padding: 0 4px;
  color: rgb(255 255 255 / 62%);
  font-size: 12px;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
}

/* Docked is just the line. The caveat belongs to the open widget, and the bar
   keeps the dimensions it always had. */
body.is-docked .composer-note {
  display: none;
}