/**
 * Magna AI - Chat Surface Styles
 *
 * ★ PORTED from ConfidenceTalk `public/css/chat.css` (2026-10-01).
 *
 * ★★ MOST OF THE CT SOURCE WAS DROPPED, ON PURPOSE. The CT sheet was ~90%
 *   `ct-break-banner-*` / `ct-break-panel-*` (the agent "on a break" banner and
 *   the permission-request bubble). MEASURED: AISG renders NO `aisg-break-*`
 *   class — `core/class-agent-break-manager.php` emits no such markup. Porting
 *   those ~120 rules would be dead CSS, which is indistinguishable from
 *   missing CSS until a human looks at the page. They are removed.
 *
 * ★ WHAT REMAINS IS WHAT AISG ACTUALLY RENDERS. Every selector below was
 *   verified against `class-public.php` (the chat markup, around :4975-5045)
 *   and `public/js/chat.js` (which queries `aisg-chat-form`,
 *   `aisg-chat-input-field`, `aisg-chat-state`, `aisg-end-btn`,
 *   `aisg-message*`, `aisg-messages`, `aisg-voice-btn`).
 *
 * @package AISG
 */

/* ============================================================
   CHAT STATE PILL (voice-first: "Hands-free — just talk")
   The markup emits it always; `.aisg-mode-listen` is the state
   class the container carries while the mic is live.
   ============================================================ */

.aisg-chat-state {
  display: inline-block;
  position: absolute;
  left: 12px;
  top: -24px;
  padding: 3px 10px;
  font-size: 11px;
  line-height: 1.4;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  color: #ffffff;
  letter-spacing: 0.2px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 6;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* The chat form is the positioning context for the state pill. */
#aisg-chat-form {
  position: relative;
}

/* ============================================================
   MESSAGES  — the scrolling transcript
   ============================================================ */

.aisg-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.aisg-message {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.55;
  word-wrap: break-word;
}

.aisg-message-user {
  align-self: flex-end;
  background: rgba(205, 133, 63, 0.18);
  border: 1px solid rgba(205, 133, 63, 0.35);
  color: #fff;
}

.aisg-message-guide {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
}

/* ★ THE FOLLOWING CT RULES WERE MEASURED AS DEAD AND REMOVED (verify-r5-groups §4):
 *
 *   .aisg-chat-container.aisg-mode-listen #aisg-end-btn       (dim send)
 *   .aisg-mode-listen .aisg-voice-btn .aisg-voice-timer       (hide timer)
 *   .aisg-hidden  ·  .aisg-chat-sleeping  ·  .aisg-chat-input.disabled
 *
 *   AISG's `public/js/chat.js` updates the pill with `.text()` and NEVER adds
 *   `aisg-mode-listen`; it uses jQuery `.hide()/.show()` rather than
 *   `aisg-hidden`; and `aisg-chat-sleeping` has no producer. Styling them would
 *   be CSS that can never apply — indistinguishable from missing CSS until a
 *   human looks. If a future batch adds the mode toggle, re-add these WITH the
 *   JS that toggles them.
 */

/* The empty-state line chat.js writes when a conversation has no messages. */
.aisg-chat-empty {
  padding: 24px 16px;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 13px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .aisg-message {
    max-width: 88%;
  }

  .aisg-chat-state {
    font-size: 10px;
    padding: 2px 8px;
  }
}