/*
 * Authoritative chat viewport and composer geometry.
 * Keep this stylesheet last: legacy theme files may style controls, but must not
 * decide viewport height, chat grid rows or keyboard positioning.
 */
:root {
  --chat-composer-height: 44px;
  --chat-composer-gap: 5px;
}

.conversation > .composer:not(.has-recording) {
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) 38px 44px !important;
  grid-auto-rows: var(--chat-composer-height) !important;
  align-items: center !important;
  column-gap: 2px !important;
  min-width: 0 !important;
  min-height: var(--chat-composer-height) !important;
  max-height: var(--chat-composer-height) !important;
  height: var(--chat-composer-height) !important;
  overflow: visible !important;
}

.conversation > .composer:not(.has-recording) > #message-input {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--chat-composer-height) !important;
  min-height: var(--chat-composer-height) !important;
  max-height: var(--chat-composer-height) !important;
  overflow: hidden !important;
  resize: none !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  line-height: normal !important;
  font-size: 16px !important;
}

html:not([data-theme="dark"]) .conversation > .composer:not(.has-recording) > #message-input,
html[data-theme="light"] .conversation > .composer:not(.has-recording) > #message-input {
  background: rgba(247, 250, 246, 0.96) !important;
  color: #17231c !important;
  caret-color: #456f13 !important;
  -webkit-text-fill-color: #17231c !important;
}

html:not([data-theme="dark"]) .conversation > .composer:not(.has-recording) > #message-input::placeholder,
html[data-theme="light"] .conversation > .composer:not(.has-recording) > #message-input::placeholder {
  color: #66736b !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #66736b !important;
}

@media (max-width: 700px) {
  html,
  body {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
  }

  body.mobile-chat-open .conversation {
    position: fixed !important;
    top: var(--app-top, 0px) !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    display: grid !important;
    grid-template-areas: "header" "pinned" "messages" "composer" !important;
    grid-template-rows: auto auto minmax(0, 1fr) var(--chat-composer-height) !important;
    grid-auto-rows: 0 !important;
    width: 100% !important;
    height: var(--app-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: var(--app-height, 100dvh) !important;
    overflow: hidden !important;
  }

  body.mobile-chat-open .conversation > .conversation-header { grid-area: header !important; }
  body.mobile-chat-open .conversation > .pinned-message { grid-area: pinned !important; }
  body.mobile-chat-open .conversation > .messages {
    grid-area: messages !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  body.mobile-chat-open .conversation > .composer:not(.has-recording) {
    grid-area: composer !important;
    position: relative !important;
    inset: auto !important;
    align-self: end !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 max(6px, env(safe-area-inset-right)) 0 max(6px, env(safe-area-inset-left)) !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    z-index: 32 !important;
  }

  /* While the software keyboard is visible, anchor to VisualViewport's edge. */
  body.keyboard-open.mobile-chat-open .conversation > .composer:not(.has-recording) {
    position: absolute !important;
    top: auto !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: var(--chat-composer-gap) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 80 !important;
  }

  body.keyboard-open.mobile-chat-open .conversation > .messages {
    padding-bottom: calc(var(--chat-composer-height) + 10px) !important;
    scroll-padding-bottom: calc(var(--chat-composer-height) + 10px) !important;
  }

  body.platform-chat-open .conversation {
    grid-template-areas: "header" "messages" "commands" !important;
    grid-template-rows: auto minmax(0, 1fr) auto !important;
  }
  body.platform-chat-open .conversation > .messages { grid-area: messages !important; }
  body.platform-chat-open .conversation > .platform-command-bar { grid-area: commands !important; }
}