/*
 * SDA Bible AI Chat — SSDAC Skin  v4.0.0
 * Spencerville Seventh-day Adventist Church
 * spencervillechurch.org
 *
 * Save this file as: chat-ssdac.css
 * Upload to: /wp-content/plugins/sda-bible-ai-chat/assets/chat-ssdac.css
 *
 * Palette : Purple  #570076 / Dark #3d0053
 *           Gold    #c4952a / Gold hover #e8b84b
 *           Dismiss red #c0392b (launcher hover when chat is open)
 * Font    : Open Sans (enqueued via wp_enqueue_style in PHP)
 * Style   : Divi-matched — square corners, gold accents, uppercase header
 *
 * Loaded AFTER chat.css (declared as a dependency in PHP).
 * CSS variable values are injected by PHP via wp_add_inline_style.
 */

/* =====================================================================
   HEADER — 2px gold keyline and uppercase title
===================================================================== */
#sda-chat-header {
    border-bottom: 2px solid #c4952a !important;
}
#sda-chat-header h3 {
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* =====================================================================
   AVATAR — white background, gold ring
===================================================================== */
.sda-avatar {
    background: #ffffff;
    border: 1px solid rgba(196, 149, 42, 0.5);
    font-size: 17px;
}

/* =====================================================================
   NEW CHAT BUTTON — gold border
===================================================================== */
#sda-chat-clear {
    border-color: rgba(196, 149, 42, 0.65) !important;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
#sda-chat-clear:hover {
    background: rgba(196, 149, 42, 0.2) !important;
    border-color: var(--sda-gold) !important;
}

/* =====================================================================
   BOT ICON — white background, gold ring
===================================================================== */
.sda-bot-icon {
    border: 2px solid var(--sda-gold);
}

/* =====================================================================
   SCRIPTURE BLOCKQUOTES — gold left bar
===================================================================== */
.sda-msg-bubble blockquote {
    border-left-color: var(--sda-gold);
    background: rgba(196, 149, 42, 0.07);
}

/* =====================================================================
   SUGGESTION CHIPS — purple-tinted border
===================================================================== */
.sda-suggestion {
    border-color: #c8b4d0;
    font-size: 11px;
    letter-spacing: 0.02em;
}
.sda-suggestion:hover {
    background: var(--sda-primary);
    border-color: var(--sda-primary);
    color: white;
}

/* =====================================================================
   INPUT — purple focus glow
===================================================================== */
#sda-chat-input:focus {
    box-shadow: 0 0 0 2px rgba(87, 0, 118, 0.12);
}

/* =====================================================================
   FOOTER — muted purple
===================================================================== */
#sda-chat-footer {
    color: #9a8aa4;
    border-top: 1px solid #e8e0ee;
    padding-top: 8px;
}

/* =====================================================================
   LAUNCHER — purple with gold ring
   aria-expanded="true" hover = red dismiss state (#c0392b)
===================================================================== */
#sda-chat-launcher {
    box-shadow: 0 4px 20px rgba(87, 0, 118, 0.30),
                0 0 0 3px var(--sda-gold) !important;
}
#sda-chat-launcher:hover {
    box-shadow: 0 4px 20px rgba(87, 0, 118, 0.42),
                0 0 0 3px var(--sda-gold-light) !important;
}

/* Red dismiss state — launcher when chat is open (X icon showing)
   Uses .sda-open class set by JS — more reliable than aria attribute
   selectors which some CSS optimisation plugins corrupt. */
#sda-chat-launcher.sda-open:hover {
    background: #c0392b !important;
    box-shadow: 0 4px 20px rgba(192, 57, 43, 0.40),
                0 0 0 3px var(--sda-gold) !important;
}

/* =====================================================================
   CHAT WINDOW — purple-tinted border
===================================================================== */
#sda-chat-window {
    border: 1.5px solid #d0c4d8;
}

/* =====================================================================
   TYPING DOTS — muted purple
===================================================================== */
.sda-typing span {
    background: #b09ac0;
}