/**
 * SHARED chat-surface theme — the single place the widget's themed appearance is
 * defined. Imported by BOTH the real widget (`WidgetBuilder.vue`) and the admin
 * preview (`AgentChatPreviewPanel.vue`) so they can never drift.
 *
 * Every rule is scoped under `.chat-container.rp-surface` (both surfaces add the
 * `rp-surface` marker class to their panel root). The extra class both contains the
 * global import to the widget and gives these rules enough specificity to win over
 * each component's own scoped `[data-v-*]` CSS. Every value comes from the `--rp-*`
 * custom properties emitted by `themeCssVars()` in `widget-theme.ts` — no hard-coded
 * per-theme values live here.
 *
 * Components keep only their own NON-themed, structural CSS (layout, animations,
 * socket/streaming bits, admin-mock chrome) in their scoped <style> blocks.
 */

/* ===== Panel ===== */
.chat-container.rp-surface {
    font-family: var(--rp-body-font);
    color: var(--rp-text);
}
.chat-container.rp-surface .chat-panel {
    background: var(--rp-card);
    color: var(--rp-text);
}

/* ===== Header ===== */
.chat-container.rp-surface .chat-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--rp-hairline);
    background: transparent;
}
.chat-container.rp-surface .header-info h3 {
    color: var(--rp-text);
    font-family: var(--rp-body-font);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.15;
}
/* --rp-presence is the accent when it is readable on the card, otherwise the
   contrast-derived muted colour (see themeCssVars). */
.chat-container.rp-surface .rp-presence,
.chat-container.rp-surface .status-text {
    color: var(--rp-presence, var(--rp-accent));
    font-size: 11.5px;
}
.chat-container.rp-surface .status-indicator.online {
    background: var(--rp-presence, var(--rp-accent));
    box-shadow: none;
}

/* ===== Avatars — circle by default, rounded-square on mono (Terminal); no ring ===== */
.chat-container.rp-surface .header-orb,
.chat-container.rp-surface .header-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--rp-avatar-radius);
    border: none;
    box-shadow: none;
    object-fit: cover;
    flex-shrink: 0;
}
.chat-container.rp-surface .rp-msg-avatar,
.chat-container.rp-surface .rp-msg-avatar-orb,
.chat-container.rp-surface .rp-msg-avatar-img,
.chat-container.rp-surface .rp-welcome-orb,
.chat-container.rp-surface .rp-welcome-avatar {
    width: 28px;
    height: 28px;
    border-radius: var(--rp-avatar-radius);
    border: none;
    box-shadow: none;
    flex-shrink: 0;
    display: block;
}
.chat-container.rp-surface .rp-msg-avatar-img,
.chat-container.rp-surface .rp-welcome-avatar { object-fit: cover; }

/* ===== Messages ===== */
.chat-container.rp-surface .message {
    max-width: 100%;
    gap: 9px;
    align-items: flex-start;
}
.chat-container.rp-surface .message-bubble {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: none;
    max-width: 84%;
}
/* Collapse markdown paragraph margins so a one-line reply is a compact bubble. */
.chat-container.rp-surface .message-bubble p { margin: 0; }
.chat-container.rp-surface .message-bubble p + p { margin-top: 0.5em; }
/* Markdown links inside messages: clearly a link and clickable (v-html content, so
   this must be a global rule — scoped styles don't reach it). Inherits the bubble
   colour so it's readable on both the agent surface and the accent user bubble. */
.chat-container.rp-surface .message-bubble a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
    cursor: pointer;
}
.chat-container.rp-surface .message-bubble a:hover { opacity: 0.82; }
/* Markdown code & wide content (v-html, so global rules): scroll inside the
   bubble instead of painting past it and forcing the chat to scroll sideways.
   Backgrounds derive from currentColor so they read on light and dark bubbles. */
.chat-container.rp-surface .message-bubble pre {
    max-width: 100%;
    overflow-x: auto;
    margin: 0.5em 0;
    padding: var(--space-sm, 12px);
    border-radius: 8px;
    background: color-mix(in srgb, currentColor 8%, transparent);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.chat-container.rp-surface .message-bubble pre code {
    /* Code keeps its formatting; the <pre> scrollbar handles long lines. */
    white-space: pre;
    overflow-wrap: normal;
    background: none;
    padding: 0;
}
.chat-container.rp-surface .message-bubble code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: color-mix(in srgb, currentColor 8%, transparent);
    padding: 1px 5px;
    border-radius: 6px;
}
.chat-container.rp-surface .message-bubble table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 0.5em 0;
}
.chat-container.rp-surface .message-bubble th,
.chat-container.rp-surface .message-bubble td {
    border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
    padding: 4px 8px;
}
/* Agent/bot bubble: agent surface + hairline, tail top-left. */
.chat-container.rp-surface .agent-message .message-bubble,
.chat-container.rp-surface .assistant-message .message-bubble {
    background: var(--rp-agent-bg);
    color: var(--rp-text);
    border: 1px solid var(--rp-hairline);
    border-radius: var(--rp-bubble-tail) var(--rp-bubble) var(--rp-bubble) var(--rp-bubble);
}
/* User bubble: accent fill, contrast text, tail bottom-right. */
.chat-container.rp-surface .user-message .message-bubble {
    background: var(--rp-accent);
    color: var(--rp-on-accent);
    border: none;
    border-radius: var(--rp-bubble) var(--rp-bubble) var(--rp-bubble-tail) var(--rp-bubble);
}

/* ===== Quick-action pills ===== */
.chat-container.rp-surface .rp-quick-action {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--rp-accent) 66%, transparent);
    background: color-mix(in srgb, var(--rp-accent) 18%, transparent);
    color: var(--rp-text);
    font-family: var(--rp-body-font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chat-container.rp-surface .rp-quick-action:hover:not(:disabled) {
    background: var(--rp-accent);
    color: var(--rp-on-accent);
    border-color: var(--rp-accent);
}
.chat-container.rp-surface.theme-terminal .rp-quick-action { border-radius: 6px; }

/* ===== Input bar + send (transparent bar — card shows through, no grey band) ===== */
.chat-container.rp-surface .chat-input {
    background: transparent;
    border-top: 1px solid var(--rp-hairline);
}
.chat-container.rp-surface .message-input input,
.chat-container.rp-surface .email-input input {
    border-radius: var(--rp-field-radius);
    border: 1px solid color-mix(in srgb, var(--rp-accent) 30%, var(--rp-hairline));
    background: color-mix(in srgb, var(--rp-text) 6%, transparent);
    color: var(--rp-text);
    font-family: var(--rp-body-font);
    font-size: 14px;
}
.chat-container.rp-surface .message-input input::placeholder,
.chat-container.rp-surface .email-input input::placeholder {
    color: var(--rp-muted);
    opacity: 1;
}
.chat-container.rp-surface .message-input input:focus,
.chat-container.rp-surface .email-input input:focus {
    border-color: var(--rp-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--rp-accent) 22%, transparent);
}
.chat-container.rp-surface .send-button {
    width: 42px;
    min-width: 42px;
    height: 42px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--rp-field-radius);
    background: var(--rp-accent);
    color: var(--rp-on-accent);
    cursor: pointer;
}

/* ===== Powered-by footer (transparent — card shows, no grey band) ===== */
.chat-container.rp-surface .powered-by,
.chat-container.rp-surface .powered-by-welcome {
    background: transparent;
    border-top: none;
    color: var(--rp-muted);
    font-family: var(--rp-body-font);
}
.chat-container.rp-surface .rp-powered-prefix { color: var(--rp-muted); opacity: 1; }
.chat-container.rp-surface .rp-brand { color: var(--rp-text); font-weight: 700; }

/* Mono (Terminal): monospace across the whole surface. */
.chat-container.rp-surface.theme-terminal,
.chat-container.rp-surface.theme-terminal .chat-panel,
.chat-container.rp-surface.theme-terminal .header-info h3,
.chat-container.rp-surface.theme-terminal .message-bubble,
.chat-container.rp-surface.theme-terminal .rp-quick-action,
.chat-container.rp-surface.theme-terminal .message-input input,
.chat-container.rp-surface.theme-terminal .powered-by {
    font-family: var(--rp-body-font);
}

/* Glass: frosted panel. */
.chat-container.rp-surface.theme-glass .chat-panel {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}