/* Figma New Chat surface: authored at 400px, fluid through the chat lane. */
#chat:has(.chat-body.hello-active:not(.image-mode)) {
  --new-chat-header-height: 105px;
  background: #11131a;
}

#chat-main.hello-active:not(.image-mode) {
  --new-chat-lane-max: 560px;
  --new-chat-inline-gutter: 16px;
}

.chat-title-chevron img,
.chat-open-add-icon img,
.chat-open-more-icon img {
  display: block;
}

.chat-title-chevron img {
  width: 16px;
  height: 16px;
}

.chat-open-add-icon {
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
}

.chat-open-add-icon img {
  width: 9px;
  height: 9px;
}

#chat-main.hello-active:not(.image-mode) {
  background: #11131a;
}

#chat-main.hello-active:not(.image-mode) .messages-container {
  visibility: hidden;
  pointer-events: none;
}

#chat-main.hello-active:not(.image-mode) .hello-message.new-chat-empty-state {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 0;
  color: #f5f7ff;
  pointer-events: none;
}

#chat-main.hello-active:not(.image-mode) .new-chat-hero {
  position: absolute;
  top: clamp(100px, calc(28svh - var(--new-chat-header-height, 105px)), 235px);
  left: 50%;
  width: min(100%, 300px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 1;
  transition: top 220ms cubic-bezier(0.2, 0.8, 0.2, 1), transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease;
}

#chat-main.hello-active:not(.image-mode) .chat-composer-rail {
  pointer-events: none;
}

#chat-main.hello-active:not(.image-mode) .chat-composer-rail button {
  pointer-events: auto;
}

#chat-main.hello-active:not(.image-mode) .new-chat-hero__mark {
  width: 88px;
  height: auto;
  display: block;
  margin: 0 0 16px;
}

#chat-main.hello-active:not(.image-mode) .new-chat-hero__title {
  margin: 0;
  color: #f5f7ff;
  font: 600 22px/27px Inter, system-ui, -apple-system, sans-serif;
  letter-spacing: -0.02em;
}

#chat-main.hello-active:not(.image-mode) .new-chat-hero__subtitle {
  margin: 8px 0 0;
  color: #9aa3b8;
  font: 400 14px/17px Inter, system-ui, -apple-system, sans-serif;
}

#chat-main.hello-active:not(.image-mode) .new-chat-bottom-stack {
  position: absolute;
  right: auto;
  bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  width: min(100%, calc(100vw - (2 * var(--new-chat-inline-gutter))), var(--new-chat-lane-max));
  margin-inline: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  opacity: 1;
  transform: translate(-50%, 0);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 180ms ease;
  pointer-events: auto;
}

#chat-main.hello-active:not(.image-mode) .new-chat-resume,
#chat-main.hello-active:not(.image-mode) .new-chat-shortcuts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#chat-main.hello-active:not(.image-mode) .new-chat-resume[hidden] {
  display: none;
}

#chat-main.hello-active:not(.image-mode) .new-chat-section-label {
  margin: 0;
  color: rgba(255, 255, 255, 0.46);
  font: 500 12px/13px Inter, system-ui, -apple-system, sans-serif;
}

#chat-main.hello-active:not(.image-mode) .new-chat-resume__card {
  width: 100%;
  height: 60px;
  min-height: 60px;
  padding: 0 12px 0 16px;
  border: 1px solid #2c303e;
  border-radius: 14px;
  background: #181b24;
  color: #f5f7ff;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 24px;
  align-items: center;
  column-gap: 12px;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

#chat-main.hello-active:not(.image-mode) .new-chat-resume__card:hover,
#chat-main.hello-active:not(.image-mode) .new-chat-resume__card:focus-visible {
  background: #232632;
  border-color: rgba(186, 177, 255, 0.28);
  outline: none;
}

#chat-main.hello-active:not(.image-mode) .new-chat-resume__card:active {
  transform: scale(0.992);
}

#chat-main.hello-active:not(.image-mode) .new-chat-resume__icon {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(124, 92, 255, 0.34);
  border-radius: 11px;
  background: #21232f;
  display: grid;
  place-items: center;
}

#chat-main.hello-active:not(.image-mode) .new-chat-resume__icon-glyph {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}

#chat-main.hello-active:not(.image-mode) .new-chat-resume__icon img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

#chat-main.hello-active:not(.image-mode) .new-chat-resume__copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#chat-main.hello-active:not(.image-mode) .new-chat-resume__title,
#chat-main.hello-active:not(.image-mode) .new-chat-resume__meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#chat-main.hello-active:not(.image-mode) .new-chat-resume__title {
  color: #fff;
  font: 500 14px/17px Inter, system-ui, -apple-system, sans-serif;
}

#chat-main.hello-active:not(.image-mode) .new-chat-resume__meta {
  color: rgba(255, 255, 255, 0.46);
  font: 500 11px/13px Inter, system-ui, -apple-system, sans-serif;
}

#chat-main.hello-active:not(.image-mode) .new-chat-resume__chevron {
  width: 8px;
  height: 14px;
  justify-self: center;
}

#chat-main.hello-active:not(.image-mode) .new-chat-shortcuts__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#chat-main.hello-active:not(.image-mode) .new-chat-shortcut {
  width: 100%;
  height: 40px;
  min-height: 40px;
  padding: 8px 12px 8px 14px;
  border: 1px solid rgba(154, 163, 184, 0.15);
  border-radius: 12px;
  background: #1b1e28;
  color: #f5f7ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: 400 14px/18px Inter, system-ui, -apple-system, sans-serif;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, transform 120ms ease;
}

#chat-main.hello-active:not(.image-mode) .new-chat-shortcut img {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
}

#chat-main.hello-active:not(.image-mode) .new-chat-shortcut:hover,
#chat-main.hello-active:not(.image-mode) .new-chat-shortcut:focus-visible {
  background: #242732;
  border-color: rgba(186, 177, 255, 0.26);
  outline: none;
}

#chat-main.hello-active:not(.image-mode) .new-chat-shortcut:active {
  transform: scale(0.994);
}

#chat-main.hello-active:not(.image-mode) .input-toolbar.chat-composer,
body.chat-shell-telegram.chat-shell-mobile.chat-shell-text #chat-main.hello-active:not(.image-mode) .input-toolbar.chat-composer,
body.chat-shell-telegram.chat-shell-mobile.chat-shell-text #chat-main.hello-active:not(.image-mode) .input-toolbar.chat-composer.is-resting {
  width: min(calc(100vw - (2 * var(--new-chat-inline-gutter))), var(--new-chat-lane-max));
  max-width: var(--new-chat-lane-max);
}

#chat-main.hello-active:not(.image-mode) .input-toolbar.chat-composer::before {
  content: none;
}

#chat-main.hello-active:not(.image-mode) .chat-composer-container {
  width: min(100%, var(--new-chat-lane-max));
  min-height: 56px;
  border-radius: 14px;
  background: #1c1f2a;
}

#chat-main.hello-active:not(.image-mode) .input-toolbar.chat-composer {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

body.chat-shell-telegram.chat-shell-mobile.chat-shell-text #chat-main.hello-active:not(.image-mode) .input-toolbar.chat-composer {
  bottom: auto;
  margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

#chat-main:not(.image-mode) .new-chat-shortcut-token {
  position: absolute;
  top: 8px;
  left: var(--new-chat-shortcut-left, 0px);
  z-index: 2;
  min-width: 0;
  max-width: 48%;
  color: #9d72ff;
  font: 500 14px/20px Inter, system-ui, -apple-system, sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

#chat-main:not(.image-mode) .new-chat-shortcut-token[hidden] {
  display: none;
}

#chat-main.new-chat-shortcut-selected .chat-input::placeholder {
  color: transparent;
}

#chat-main.new-chat-shortcut-selected .chat-input {
  text-indent: var(--new-chat-shortcut-offset, 0px);
}

#chat-main.new-chat-shortcut-selected .chat-composer-container,
#chat-main.new-chat-composer-engaged .chat-composer-container {
  border-color: rgba(124, 92, 255, 0.34);
  box-shadow: none;
}

#chat-main.new-chat-composer-engaged .new-chat-bottom-stack {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#chat-main.new-chat-composer-engaged .new-chat-bottom-stack {
  transform: translate(-50%, 12px);
}

/* The narrow/coarse-pointer shell is present from the first server paint.
   Runtime classes still own keyboard measurements, not base geometry. */
@media (max-width: 820px), (pointer: coarse) {
  body.chat-shell .page.page-chat-single-scroll:has(#chat.active #chat-main.hello-active:not(.image-mode)) #chat.section.active {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    height: 100dvh;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  body.chat-shell .page.page-chat-single-scroll:has(#chat.active #chat-main.hello-active:not(.image-mode)) .chat-head-wrap {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    flex: 0 0 auto;
    width: 100%;
    max-width: var(--chat-shell-content-max-width, 560px);
    margin: 0 auto;
    transform: none;
  }

  body.chat-shell .page.page-chat-single-scroll:has(#chat.active #chat-main.hello-active:not(.image-mode)) #chat-main.chat-body {
    position: relative;
    flex: 1 1 auto;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: var(--chat-shell-content-max-width, 560px);
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0 auto;
    padding-top: 0;
    padding-bottom: var(--chat-keyboard-overlay-inset, 0px);
    gap: 0;
    overflow: hidden;
    align-content: stretch;
    align-items: stretch;
    box-sizing: border-box;
  }

  body.chat-shell .page.page-chat-single-scroll:has(#chat.active #chat-main.hello-active:not(.image-mode)) .input-toolbar.chat-composer,
  body.chat-shell .page.page-chat-single-scroll:has(#chat.active #chat-main.hello-active:not(.image-mode)) .input-toolbar.chat-composer.is-resting {
    position: relative;
    right: auto;
    left: auto;
    grid-area: 2 / 1;
    flex: 0 0 auto;
    align-self: end;
    justify-self: center;
    bottom: auto;
    margin: 0 auto calc(24px + env(safe-area-inset-bottom, 0px));
    --app-keyboard-fixed-raise: 0px;
    --app-motion-fixed-transform: none;
    transform: none;
  }
}

@media (min-width: 481px) {
  #chat-main.hello-active:not(.image-mode) {
    --new-chat-inline-gutter: 20px;
  }
}

@media (min-width: 521px) {
  #chat-main.hello-active:not(.image-mode) {
    --new-chat-inline-gutter: 24px;
  }
}

#chat-main.hello-active:not(.image-mode) .new-chat-empty-state:has(.new-chat-resume:not([hidden])) .new-chat-hero {
  top: clamp(84px, calc(24svh - var(--new-chat-header-height, 105px)), 195px);
}

@media (max-height: 760px) {
  #chat-main.hello-active:not(.image-mode) .new-chat-hero {
    top: 68px;
  }

  #chat-main.hello-active:not(.image-mode) .new-chat-empty-state:has(.new-chat-resume:not([hidden])) .new-chat-hero {
    top: 60px;
  }

  #chat-main.hello-active:not(.image-mode) .new-chat-bottom-stack {
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  #chat-main.hello-active:not(.image-mode) .input-toolbar.chat-composer {
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  body.chat-shell-telegram.chat-shell-mobile.chat-shell-text #chat-main.hello-active:not(.image-mode) .input-toolbar.chat-composer {
    bottom: auto;
    margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

}

@media (max-height: 760px) and (max-width: 820px), (max-height: 760px) and (pointer: coarse) {
  body.chat-shell .page.page-chat-single-scroll:has(#chat.active #chat-main.hello-active:not(.image-mode)) .input-toolbar.chat-composer,
  body.chat-shell .page.page-chat-single-scroll:has(#chat.active #chat-main.hello-active:not(.image-mode)) .input-toolbar.chat-composer.is-resting {
    bottom: auto;
    margin-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}

#chat-main.new-chat-composer-engaged .new-chat-hero {
  --new-chat-focus-hero-top: 193px;
  top: var(--new-chat-focus-hero-top);
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%);
  pointer-events: none;
}

#chat-main.hello-active.new-chat-composer-engaged:not(.image-mode) .input-toolbar.chat-composer {
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

body.chat-shell-telegram.chat-shell-mobile.chat-shell-text #chat-main.hello-active.new-chat-composer-engaged:not(.image-mode) .input-toolbar.chat-composer {
  bottom: auto;
  margin-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

@media (prefers-reduced-motion: reduce) {
  #chat-main.hello-active:not(.image-mode) .new-chat-hero,
  #chat-main.hello-active:not(.image-mode) .new-chat-bottom-stack,
  #chat-main.hello-active:not(.image-mode) .new-chat-resume__card,
  #chat-main.hello-active:not(.image-mode) .new-chat-shortcut {
    transition: none;
  }
}