/* Assistant page. Loaded only on the "Асистент" template. Tokens come from critical.css.

   Layout model (same as current assistant products): the page is exactly one screen.
   Empty state  – headline, composer and suggestion cards are centred in the free space.
   Active state – the thread fills the space and scrolls on its own, the composer is pinned below it. */

.gk-page-chat {
  height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--gk-paper);
}

.gk-page-chat .gk-header {
  flex: none;
}

/* The site footer would push the page past one screen; the legal line under the composer replaces it. */
.gk-page-chat .gk-footer {
  display: none;
}

/* Cookie banner joins the column instead of floating over the composer. */
.gk-page-chat .gk-cookie {
  position: static;
  flex: none;
  box-shadow: none;
  border-top: 1px solid var(--gk-line);
}

.gk-chat-page {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.gk-chat-page__inner {
  padding-block: 2rem;
}

/* ---------------------------------------------------------------- shell */

.gk-chat {
  --gk-chat-width: 46rem;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Empty state: everything centred, thread hidden. Auto margins instead of justify-content: center,
   so on a short viewport the block starts at the top and scrolls instead of being clipped. */
.gk-chat--empty {
  justify-content: flex-start;
  overflow-y: auto;
}

.gk-chat--empty .gk-chat__start {
  margin-top: auto;
}

.gk-chat--empty .gk-chat__dock {
  margin-bottom: auto;
}

.gk-chat--empty .gk-chat__thread {
  display: none;
}

/* Active state: thread grows, start screen disappears, suggestions hidden. */
.gk-chat--active .gk-chat__start,
.gk-chat--active .gk-chat__suggestions {
  display: none;
}

/* ---------------------------------------------------------------- start screen */

.gk-chat__start {
  flex: none;
  width: min(100% - 2 * var(--gk-gutter), var(--gk-chat-width));
  margin: 0 auto 1.5rem;
  text-align: center;
}

.gk-chat__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gk-muted);
}

.gk-chat__title {
  margin: 0 0 0.75rem;
  font-family: var(--gk-font-display);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  line-height: 1.1;
  text-wrap: balance;
}

.gk-chat__intro {
  margin: 0 auto;
  max-width: 34rem;
  color: var(--gk-muted);
  font-size: 1rem;
  line-height: 1.5;
}

.gk-chat__intro p {
  margin: 0;
}

/* ---------------------------------------------------------------- thread */

.gk-chat__thread {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-behavior: smooth;
  /* Fade the top edge so messages slide under the header softly. */
  mask-image: linear-gradient(to bottom, transparent 0, #000 1.25rem);
}

@media (prefers-reduced-motion: reduce) {
  .gk-chat__thread {
    scroll-behavior: auto;
  }
}

.gk-chat__thread-inner {
  width: min(100% - 2 * var(--gk-gutter), var(--gk-chat-width));
  margin: 0 auto;
  padding: 1.5rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.gk-chat__msg {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
}

/* Assistant: small mark + plain text, no box. */
.gk-chat__avatar {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: 0.15rem;
  display: grid;
  place-items: center;
  border-radius: 0.5rem;
  background: var(--gk-ink);
  color: var(--gk-gold);
  font-family: var(--gk-font-display);
  font-size: 0.6rem;
  letter-spacing: 0.02em;
}

.gk-chat__msg--bot .gk-chat__bubble {
  flex: 1;
  min-width: 0;
  padding: 0.15rem 0 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* User: compact dark bubble on the right. */
.gk-chat__msg--user {
  justify-content: flex-end;
}

.gk-chat__msg--user .gk-chat__bubble {
  max-width: 78%;
  padding: 0.65rem 1rem;
  border-radius: 1.25rem 1.25rem 0.35rem 1.25rem;
  background: var(--gk-ink);
  color: var(--gk-paper);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.gk-chat__bubble > :first-child {
  margin-top: 0;
}

.gk-chat__bubble > :last-child {
  margin-bottom: 0;
}

.gk-chat__bubble p,
.gk-chat__bubble ul,
.gk-chat__bubble ol {
  margin: 0 0 0.75rem;
}

.gk-chat__bubble ul,
.gk-chat__bubble ol {
  padding-left: 1.25rem;
}

.gk-chat__bubble li {
  margin-bottom: 0.25rem;
}

.gk-chat__bubble a {
  font-weight: 700;
  text-decoration-color: var(--gk-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

/* Three pulsing dots before the first token, then a thin cursor while streaming. */
.gk-chat__dots {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.5rem 0;
}

.gk-chat__dots span {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--gk-muted);
  animation: gk-pulse 1.2s ease-in-out infinite;
}

.gk-chat__dots span:nth-child(2) {
  animation-delay: 0.2s;
}

.gk-chat__dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes gk-pulse {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.gk-chat__bubble--streaming > :last-child::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 0.15em;
  vertical-align: -0.15em;
  background: var(--gk-gold);
  animation: gk-blink 1s steps(2, start) infinite;
}

@keyframes gk-blink {
  to {
    visibility: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gk-chat__dots span,
  .gk-chat__bubble--streaming > :last-child::after {
    animation: none;
  }
}

/* ---------------------------------------------------------------- dock (toolbar + composer + suggestions + legal) */

.gk-chat__dock {
  flex: none;
  width: min(100% - 2 * var(--gk-gutter), var(--gk-chat-width));
  margin: 0 auto;
  padding-bottom: clamp(0.75rem, 2vh, 1.25rem);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.gk-chat__toolbar {
  display: flex;
  justify-content: flex-end;
}

.gk-chat__toolbar[hidden] {
  display: none;
}

.gk-chat__new {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--gk-line);
  border-radius: 999px;
  background: var(--gk-paper);
  color: var(--gk-muted);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.gk-chat__new:hover,
.gk-chat__new:focus-visible {
  color: var(--gk-ink);
  border-color: var(--gk-ink);
}

/* Composer: a single rounded field with the send button inside. */
.gk-composer {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 1.1rem;
  border: 1px solid var(--gk-line);
  border-radius: 1.5rem;
  background: var(--gk-paper);
  box-shadow: 0 8px 30px rgb(20 33 61 / 0.08);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.gk-composer:focus-within {
  border-color: var(--gk-ink);
  box-shadow: 0 8px 30px rgb(20 33 61 / 0.14);
}

.gk-composer__input {
  flex: 1;
  min-width: 0;
  min-height: 1.6rem;
  max-height: 9rem;
  padding: 0.5rem 0;
  border: 0;
  background: transparent;
  color: var(--gk-ink);
  font: inherit;
  font-size: 1.05rem;
  line-height: 1.5;
  resize: none;
  outline: none;
}

.gk-composer__input::placeholder {
  color: var(--gk-muted);
}

.gk-composer__send {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--gk-ink);
  color: var(--gk-gold);
  cursor: pointer;
  transition:
    transform 0.1s,
    background 0.15s;
}

.gk-composer__send:hover,
.gk-composer__send:focus-visible {
  background: var(--gk-ink-soft);
}

.gk-composer__send:active {
  transform: scale(0.94);
}

.gk-composer__send[disabled] {
  background: var(--gk-line);
  color: var(--gk-muted);
  cursor: wait;
}

/* Suggestion cards under the composer on the start screen. */
.gk-chat__suggestions {
  display: grid;
  gap: 0.6rem;
}

@media (min-width: 40rem) {
  .gk-chat__suggestions {
    grid-template-columns: repeat(2, 1fr);
  }
}

.gk-suggestion {
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--gk-line);
  border-radius: 1rem;
  background: var(--gk-paper);
  color: var(--gk-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}

.gk-suggestion:hover,
.gk-suggestion:focus-visible {
  border-color: var(--gk-gold);
  background: rgb(var(--gk-accent-rgb) / 0.08);
}

.gk-suggestion__q {
  font-weight: 700;
  line-height: 1.3;
}

.gk-suggestion__hint {
  font-size: 0.85rem;
  color: var(--gk-muted);
}

.gk-chat__status {
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-radius: 0.75rem;
  background: rgb(179 38 30 / 0.08);
  color: var(--gk-error);
  font-size: 0.9rem;
  text-align: center;
}

.gk-chat-page__legal {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--gk-muted);
  text-align: center;
}

/* Small phones: tighter spacing so the start screen still fits with the keyboard closed. */
@media (max-width: 40rem) {
  .gk-chat__start {
    margin-bottom: 1rem;
  }

  .gk-chat__suggestions {
    gap: 0.5rem;
  }

  .gk-suggestion {
    padding: 0.7rem 0.9rem;
  }

  .gk-suggestion__hint {
    display: none;
  }
}

/* Narrow phones: a smaller headline keeps the start screen on one screen. */
@media (max-width: 24rem) {
  .gk-chat__title {
    font-size: 1.5rem;
  }

  .gk-chat__intro {
    font-size: 0.9rem;
  }
}

/* Short viewports (small phones, 568px and below): the intro paragraph goes first. */
@media (max-height: 38rem) {
  .gk-chat__intro {
    display: none;
  }

  .gk-chat-page__inner {
    padding-block: 1rem;
  }
}

/* Very short viewports (landscape phones): keep only what is needed to type. */
@media (max-height: 30rem) {
  .gk-chat__eyebrow,
  .gk-chat__intro,
  .gk-chat-page__legal {
    display: none;
  }
}

/* ================================================================ desktop redesign
   Source: Figma GKA_Website, frame "GKA_Desktop_Agent" 1920x1356.
   Tokens come from critical.css. Applies from 64rem up only.
   ================================================================ */

@media (min-width: 64rem) {
  .gk-chat {
    /* The frame runs the column at 1076, not the previous reading measure. */
    --gk-chat-width: 67.25rem;
  }

  .gk-page-chat {
    background: var(--gk-paper);
  }

  /* On this page the frame puts the header and the footer on white, against the
     cream page, rather than the paper-on-white of the home page. */
  .gk-page-chat .gk-header {
    background: var(--gk-white);
  }

  /* The frame shows the footer here, so the start screen is a normal scrolling page.
     An active conversation keeps the one-screen model: thread scrolls, composer pinned. */
  .gk-page-chat:has(.gk-chat--empty) {
    height: auto;
    overflow: visible;
  }

  .gk-page-chat:has(.gk-chat--empty) .gk-footer {
    display: block;
    background: var(--gk-white);
  }

  /* The 66px headline needs a hair more room than the 1076 chat column, otherwise
     it breaks onto a second line the frame does not have. */
  .gk-chat__start {
    width: min(100% - 2 * var(--gk-gutter), 72rem);
    margin-bottom: 2.75rem; /* 44 */
  }

  /* Vertical rhythm of the start screen, measured off the frame: the block opens 187
     under the header, then 44 / 18 / 58 between headline, composer, cards and the
     legal line. The page fills the viewport so the footer sits at its foot, which is
     where the frame draws it, instead of floating with paper underneath. */
  .gk-page-chat:has(.gk-chat--empty) {
    min-height: 100svh;
  }

  .gk-page-chat:has(.gk-chat--empty) .gk-chat-page {
    flex: 1;
  }

  .gk-chat--empty {
    gap: 0;
    padding-top: 11.6875rem; /* 187 */
  }

  /* The phone layout centres the block with auto margins top and bottom. The frame
     pins it 187 from the header and lets the slack fall below, so only the bottom
     auto margin stays. */
  .gk-chat--empty .gk-chat__start {
    margin-top: 0;
  }

  .gk-chat--empty .gk-chat__suggestions {
    margin-top: 1.125rem; /* 18 */
  }

  .gk-chat--empty .gk-chat-page__legal {
    margin-top: 3.625rem; /* 58 */
  }

  .gk-chat__title {
    margin: 0 0 1.25rem;
    font-size: var(--gk-fs-h2);
    font-weight: var(--gk-weight-bold);
    line-height: normal;
    color: var(--gk-accent-text);
    text-wrap: pretty;
  }

  .gk-chat__intro {
    max-width: 66.3125rem; /* 1061 */
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    line-height: normal;
    color: var(--gk-ink);
  }

  /* Composer: an 88 tall white field, square accent send button inside. */
  .gk-composer {
    align-items: center;
    min-height: 5.5rem; /* 88 */
    padding: 0.875rem 2.625rem; /* 14 / 42 */
    background: var(--gk-white);
    border: 0;
    border-radius: var(--gk-radius);
    box-shadow: none;
  }

  .gk-composer:focus-within {
    border: 0;
    box-shadow: none;
    outline: 2px solid var(--gk-accent);
    outline-offset: 2px;
  }

  .gk-composer__input {
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
  }

  .gk-composer__input::placeholder {
    color: var(--gk-ink);
    opacity: 0.42;
  }

  .gk-composer__send {
    width: 3.75rem; /* 60 */
    height: 3.75rem;
    border-radius: var(--gk-radius);
    background: var(--gk-accent-text);
    color: var(--gk-paper);
  }

  /* The frame points the arrow right; the sprite in the markup points up. */
  .gk-composer__send svg {
    transform: rotate(90deg);
  }

  .gk-composer__send:hover,
  .gk-composer__send:focus-visible {
    background: var(--gk-accent-hover);
  }

  .gk-composer__send[disabled] {
    background: var(--gk-line);
    color: var(--gk-ink);
  }

  .gk-chat__suggestions {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }

  .gk-suggestion {
    padding: 1.25rem;
    background: var(--gk-white);
    border: 0;
    border-radius: var(--gk-radius);
  }

  .gk-suggestion:hover,
  .gk-suggestion:focus-visible {
    background: var(--gk-white);
    outline: 2px solid var(--gk-accent);
    outline-offset: -2px;
  }

  .gk-suggestion__q {
    font-family: var(--gk-font-display);
    font-size: var(--gk-fs-h3);
    font-weight: var(--gk-weight-bold);
    line-height: 1;
    color: var(--gk-ink);
    text-transform: none;
    letter-spacing: 0;
  }

  .gk-suggestion__hint {
    margin-top: 0.625rem;
    font-size: var(--gk-fs-body);
    font-weight: var(--gk-weight-body);
    line-height: normal;
    color: var(--gk-ink);
  }

  /* The frame sets this line at 10px Regular. */
  .gk-chat-page__legal {
    max-width: 61.5625rem; /* 985 */
    margin-inline: auto;
    font-size: 0.625rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--gk-ink);
  }
}

/* Unbounded sets much wider than the Manrope this placeholder was written for: at 390
   the full sentence needs four lines in a one-row composer and gets clipped. Keeping it
   on one line with an ellipsis says the same thing and leaves the field its height.
   The full sentence is still the accessible name of the field. */
@media (max-width: 63.99rem) {
  .gk-composer__input::placeholder {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}