/* SITE-PUBLIC-HARDENING-01 — non-visual hardening over approved CHAT-01 */
.chat-home-footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 220px;
}

.chat-state-banner {
  width: min(820px, 100%);
  margin: 12px auto 0;
  padding: 11px 14px;
  border: 1px solid var(--brand-line);
  border-radius: 14px;
  background: #f8f9fc;
  color: var(--lotbi-text-primary, var(--text, #212121));
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}

.chat-state-banner[hidden] {
  display: none !important;
}

@supports (height: 100dvh) {
  .chat-home-page,
  .chat-home-shell {
    min-height: 100dvh;
  }

  .chat-hero {
    min-height: calc(100dvh - 82px);
  }
}

@supports (padding: max(0px)) {
  .chat-home-shell {
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
  }

  .chat-topbar {
    padding-top: env(safe-area-inset-top);
  }

  .chat-hero {
    padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 760px) {
  @supports (height: 100dvh) {
    .chat-hero {
      min-height: calc(100dvh - 68px);
    }
  }

  @supports (padding: max(0px)) {
    .chat-home-shell {
      padding-left: max(18px, env(safe-area-inset-left));
      padding-right: max(18px, env(safe-area-inset-right));
    }

    .chat-hero {
      padding-bottom: max(14px, env(safe-area-inset-bottom));
    }
  }
}

@media (max-width: 390px) {
  @supports (padding: max(0px)) {
    .chat-home-shell {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
  }
}

@media (max-width: 760px) and (max-height: 740px) {
  .chat-character-wrap {
    width: 132px;
    height: 174px;
    margin-top: calc(clamp(24px, 7vh, 52px) + 28px);
    margin-bottom: 12px;
  }

  .chat-character-logo {
    height: 174px;
  }

  .chat-input {
    min-height: 64px;
  }
}

@media (max-width: 900px) and (max-height: 560px) and (orientation: landscape) {
  .chat-topbar {
    min-height: 56px;
  }

  .chat-hero {
    min-height: calc(100vh - 56px);
    padding-top: 10px;
  }

  .chat-character-wrap {
    width: 92px;
    height: 121px;
    margin-top: 6px;
    margin-bottom: 8px;
  }

  .chat-character-logo {
    height: 121px;
  }

  .chat-input {
    min-height: 52px;
  }
}

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

  .account-action,
  .skip-link {
    transition: none !important;
  }

  .account-action:hover {
    transform: none;
  }
}

@media (prefers-contrast: more) {
  .chat-composer,
  .account-login,
  .composer-button,
  .chat-state-banner {
    border-color: currentColor;
  }

  .chat-input::placeholder {
    color: var(--lotbi-text-primary, var(--text, #212121));
  }
}

@media (forced-colors: active) {
  .account-action,
  .chat-composer,
  .composer-button,
  .chat-state-banner {
    border: 1px solid CanvasText;
  }

  .account-signup,
  .send-button {
    background: ButtonFace;
    color: ButtonText;
  }
}

/* CONTROL TOWER ADDENDUM — Desktop brand belongs to the navigation hierarchy.
   The left edge matches nav-item text: sidebar padding 12px + this 10px margin. */
.sidebar-brand {
  margin: 4px 10px 22px;
  font-size: 22px;
}

@media (min-width: 901px) {
  .topbar-left {
    display: none;
  }

  .chat-topbar {
    justify-content: flex-end;
  }
}

/* User visual refinement — compact composer without changing its bottom-docked position. */
.chat-composer {
  width: min(960px, calc(100% - 12px));
  padding: 10px 10px 8px 16px;
  border-radius: 22px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: end;
  column-gap: 0;
  row-gap: 4px;
}

/* SITE-COMPOSER-AUTO-GROW-01 — one visible line through about twelve lines.
   `lh` follows the prompt's actual line-height so font changes keep the cap honest. */
.chat-input {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: calc(1lh + 14px);
  max-height: calc(12lh + 14px);
  padding: 7px 4px;
  overflow-y: hidden;
  overscroll-behavior: contain;
}

/* SITE-COMPOSER-HORIZONTAL-FIT-01 — controls no longer reserve a permanent
   second column beside the text. They occupy their own bottom row. */
.composer-actions {
  grid-column: 1 / -1;
  justify-self: end;
  align-self: end;
  justify-content: flex-end;
  padding-bottom: 0;
}

@media (max-width: 760px) {
  .chat-composer {
    width: 100%;
    max-width: none;
    padding: 9px 9px 8px 13px;
    border-radius: 20px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: end;
    column-gap: 0;
    row-gap: 4px;
  }

  .chat-input {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: calc(1lh + 12px);
    max-height: min(calc(12lh + 12px), 40vh);
    padding: 6px 2px;
  }

  @supports (height: 100dvh) {
    .chat-input {
      max-height: min(calc(12lh + 12px), 40dvh);
    }
  }

  .composer-actions {
    grid-column: 1 / -1;
    justify-self: end;
    align-self: end;
    justify-content: flex-end;
    padding-bottom: 0;
  }
}


/* SITE-PUBLIC-UX-FOLD-KEYBOARD-05 — keyboard layout follows the actual
   visible viewport, not a phone-width breakpoint. JS adds the state only for
   touch/coarse devices after a meaningful viewport-height reduction. */
body.mobile-keyboard-open {
  height: var(--lotbi-visible-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
  overscroll-behavior-y: none;
}

body.mobile-keyboard-open .chat-app-shell {
  position: fixed;
  inset-inline: 0;
  top: var(--lotbi-visible-viewport-offset-top, 0px);
  width: 100%;
  height: var(--lotbi-visible-viewport-height, 100dvh);
  min-height: 0;
  max-height: var(--lotbi-visible-viewport-height, 100dvh);
  overflow: hidden;
}

/* CHAT-IOS-TOUCH-SCROLL-KEYBOARD-01 — iOS 26 Safari and WKWebView (the
   KakaoTalk in-app browser) can leave the visual viewport displaced after the
   keyboard closes (WebKit bug 297779). Until it comes back, the shell covers
   what is actually visible, exactly as with the keyboard open; nothing else
   of the keyboard layout applies. home-shell.js sets the class. */
body.mobile-viewport-displaced {
  height: var(--lotbi-visible-viewport-height, 100dvh);
  min-height: 0;
  overflow: hidden;
}

body.mobile-viewport-displaced .chat-app-shell {
  position: fixed;
  inset-inline: 0;
  top: var(--lotbi-visible-viewport-offset-top, 0px);
  width: 100%;
  height: var(--lotbi-visible-viewport-height, 100dvh);
  min-height: 0;
  max-height: var(--lotbi-visible-viewport-height, 100dvh);
  overflow: hidden;
}

body.mobile-keyboard-open .chat-home-shell {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding-bottom: max(6px, env(safe-area-inset-bottom));
  overflow: hidden;
}

body.mobile-keyboard-open .chat-topbar {
  min-height: 56px;
  flex: 0 0 56px;
}

body.mobile-keyboard-open .chat-hero {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  padding-top: 4px;
  padding-bottom: 0;
  overflow: hidden;
}

body.mobile-keyboard-open .home-avatar-anchor {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.mobile-keyboard-open .home-avatar-anchor .chat-character-wrap {
  width: clamp(76px, 20dvh, 116px);
  height: clamp(100px, 26dvh, 152px);
  margin: 0 0 4px;
}

body.mobile-keyboard-open .home-avatar-anchor .chat-character-logo {
  height: 100%;
}

body.mobile-keyboard-tight .home-avatar-anchor {
  flex: 0 0 0;
  height: 0;
  min-height: 0;
  overflow: hidden;
  visibility: hidden;
}

body.mobile-keyboard-open .conversation-thread {
  min-height: 0;
  max-height: none;
  padding-bottom: max(18px, env(safe-area-inset-bottom));
  scroll-padding-bottom: max(18px, env(safe-area-inset-bottom));
}

body.mobile-keyboard-open.conversation-active .conversation-thread {
  flex: 1 1 auto;
  margin: 0 0 6px;
}

body.mobile-keyboard-open .chat-composer {
  flex: 0 0 auto;
  margin-top: 0;
  margin-bottom: 0;
  max-height: min(46dvh, 280px);
}

body.mobile-keyboard-open .chat-input {
  min-height: 44px;
  max-height: min(calc(6lh + 12px), 24dvh, 140px);
}

body.mobile-keyboard-open .composer-actions {
  flex-wrap: nowrap;
}

body.mobile-keyboard-tight .response-grade-trigger {
  width: 44px;
  min-width: 44px;
  padding-inline: 0;
  font-size: 0;
}

body.mobile-keyboard-tight .response-grade-chevron {
  font-size: 10px;
}

body.mobile-keyboard-open .chat-state-banner {
  flex: 0 0 auto;
  margin-top: 4px;
}

body.mobile-keyboard-open .chat-home-footer {
  display: none !important;
  content-visibility: hidden;
}