/* ==========================================================================
   ★ NEXT-GEN NAVIGATION CHIPS + FORM GUARDIAN CHOICE ROW
   Rendered in the chat thread when the guide offers a destination (or asks
   permission before leaving a half-filled form). Reuses the gold tokens so it
   matches the rest of the panel.
   ========================================================================== */

.eeh-chat-nav {
  display: inline-block;
  margin: 6px 6px 0 0;
  padding: 7px 13px;
  border: 1px solid rgba(194, 113, 74, 0.45);
  border-radius: 999px;
  background: rgba(224, 154, 114, 0.14);
  color: var(--color-primary, #8b4513);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.eeh-chat-nav:hover,
.eeh-chat-nav:focus-visible {
  background: rgba(224, 154, 114, 0.26);
  transform: translateY(-1px);
  outline: none;
}

.eeh-chat-choice {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* "Stay" is the safe default; "go" carries the destructive weight. */
.eeh-chat-choice .eeh-fg-stay {
  border-color: rgba(194, 113, 74, 0.7);
  background: rgba(224, 154, 114, 0.22);
}

.eeh-chat-choice .eeh-fg-go {
  border-color: rgba(139, 47, 20, 0.35);
  color: #8b2f14;
  background: rgba(247, 226, 218, 0.6);
}

.eeh-chat-note {
  margin-top: 6px;
  padding: 7px 11px;
  border-left: 3px solid var(--color-primary, #8b4513);
  border-radius: 6px;
  background: rgba(224, 154, 114, 0.1);
  font-size: 0.84rem;
  line-height: 1.45;
  font-style: italic;
  color: #5b4436;
}

/**
 * Express Entry Hub - CT Chat Look (Surface 3)
 *
 * Re-scopes ConfidenceTalk's exact chat bubble/container/input styling onto
 * EEH's guide-chat classes so the widget mirrors CT's chat appearance. Added
 * as a layer ON TOP of eeh-chat.css (enqueued with a dependency on it), so the
 * DeepSeek brain (eeh-chat.js) and its selectors stay untouched.
 *
 * Source: ct-reference/public/css/frontend.css (ct-message-* / ct-chat-input).
 *
 * @package ExpressEntryHub
 */

/* Messages area === CT .ct-messages */
.eeh-chat-messages {
    padding: 20px;
    gap: 10px;
}

/* Message bubble === CT .ct-message */
.eeh-chat-msg {
    max-width: 80%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

/* User bubble === CT .ct-message-user (transparent, right-aligned) */
.eeh-chat-msg.eeh-user {
    align-self: flex-end;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.9);
    border-bottom-right-radius: 4px;
}

/* Agent bubble === CT .ct-message-agent (transparent, left-aligned) */
.eeh-chat-msg.eeh-agent {
    align-self: flex-start;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    border-bottom-left-radius: 4px;
}
.eeh-chat-msg.eeh-agent .eeh-chat-msg-name {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: #CD853F;
    margin-bottom: 3px;
}

/* Message text === CT .ct-message-text */
.eeh-chat-msg .eeh-chat-text {
    flex: 1;
    min-width: 0;
    font-family: system-ui, -apple-system, 'Segoe UI', 'Noto Sans', 'Noto Naskh Arabic', 'Arial Unicode MS', sans-serif;
    letter-spacing: normal;
    text-transform: none;
    word-spacing: normal;
}

/* Input row === CT .ct-chat-input */
.eeh-chat-inputrow {
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

/* Input field === CT .ct-input */
.eeh-chat-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
    box-shadow: none;
}
.eeh-chat-input:focus {
    border-color: rgba(205, 133, 63, 0.5);
    box-shadow: 0 0 0 3px rgba(205, 133, 63, 0.1);
    background: rgba(255, 255, 255, 0.10);
}
.eeh-chat-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-weight: 300;
}

/* Error bubble (EEH helper, CT-translucent) */
.eeh-chat-msg.eeh-error {
    align-self: stretch;
    background: rgba(220, 38, 38, 0.12);
    border: none;
    color: #fca5a5;
    font-size: 12px;
}