/* Keep one continuous workspace background around the mobile conversation.
   These overrides also beat the shared dark surface map and lazy chat CSS. */
@media (max-width: 767px) {
  html.crm-glass:root .chat-page .chat-header {
    background: rgb(27 48 64 / 76%) !important;
    border-color: var(--slate-edge);
  }

  html.crm-glass:root .chat-page .chat-messages.chat-wallpaper {
    background: transparent !important;
  }

  html.crm-glass:root .chat-page .chat-input.chat-input-sticky,
  html.crm-glass:root .chat-page .chat-input > div:has(.chat-composer),
  html.crm-glass:root .chat-page .chat-input > .chat-ai-toolbar-container,
  html.crm-glass:root .chat-page .chat-input .chat-ai-toolbar {
    background: transparent !important;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* The optional latest-message row follows the scroll pane. Only its button
     needs a surface; its full-width strip should reveal the wallpaper. */
  html.crm-glass:root .chat-page .chat-messages + [class~='bg-[#f7f3ed]'] {
    background: transparent !important;
    padding: 2px 12px;
  }
  html.crm-glass:root .chat-page .chat-messages + [class~='bg-[#f7f3ed]'] > button {
    background: rgb(32 55 73 / 88%) !important;
    border-color: var(--slate-edge) !important;
    color: var(--slate-positive) !important;
    min-height: 32px;
  }

  html.crm-glass:root .chat-page .chat-input > .chat-ai-toolbar-container {
    padding: 2px 10px 0;
  }
  html.crm-glass:root .chat-page .chat-input > div:has(.chat-composer) {
    padding: 4px 10px 8px;
  }
  html.crm-glass:root .chat-page .chat-input.chat-composer {
    background: linear-gradient(145deg, rgb(202 227 240 / 6%), transparent), rgb(29 50 67 / 78%) !important;
    border-color: rgb(212 233 245 / 23%);
    box-shadow: 0 3px 12px rgb(7 24 38 / 12%);
  }

}

/* Both desktop and mobile rows clip horizontal overflow. The padded outer
   composer owns the focus indicator, keeping its contour entirely visible. */
html.crm-glass:root .chat-composer .chat-textarea:focus {
  outline: none;
  box-shadow: none;
}
html.crm-glass:root .chat-input.chat-composer:focus-within {
  border-color: var(--crm-glass-accent);
  box-shadow: 0 0 0 2px rgb(137 227 201 / 16%), 0 3px 12px rgb(7 24 38 / 12%);
}