/**
 * Oma Chat styles.
 */
:root {
    --oma-ink: #172033;
    --oma-muted: #65708a;
    --oma-blue: #2454d6;
    --oma-teal: #0c9b9a;
    --oma-surface: #ffffff;
    --oma-soft: #f2f6ff;
    --oma-border: #dce5f5;
}

.oma-chat-widget {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

.oma-chat-toggle {
    position: relative;
    display: flex;
    width: 66px;
    height: 66px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg, var(--oma-blue), var(--oma-teal));
    box-shadow: 0 9px 28px rgba(24, 55, 126, .27);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}

.oma-chat-toggle:hover,
.oma-chat-toggle:focus-visible {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 14px 34px rgba(24, 55, 126, .34);
    outline: none;
}

.oma-avatar { display: flex; align-items: center; justify-content: center; }
.oma-face {
    display: flex;
    width: 43px;
    height: 43px;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    background: #ffe3d1;
    font-size: 26px;
    line-height: 1;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .15);
}

.oma-face.small { width: 38px; height: 38px; font-size: 23px; border-width: 1px; }
.oma-face.tiny { width: 29px; height: 29px; font-size: 18px; border-width: 1px; }
.oma-chat-icon { position: absolute; right: -4px; bottom: -3px; display: flex; width: 24px; height: 24px; align-items: center; justify-content: center; border: 2px solid #fff; border-radius: 50%; background: var(--oma-teal); font-size: 12px; }

.oma-speech-bubble {
    position: absolute;
    right: -4px;
    bottom: 76px;
    padding: 8px 12px;
    border: 1px solid var(--oma-border);
    border-radius: 13px;
    color: var(--oma-ink);
    background: #fff;
    box-shadow: 0 8px 24px rgba(20, 43, 92, .13);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.oma-speech-bubble::after { content: ""; position: absolute; right: 16px; bottom: -6px; width: 10px; height: 10px; border-right: 1px solid var(--oma-border); border-bottom: 1px solid var(--oma-border); background: #fff; transform: rotate(45deg); }

.oma-chat-window {
    position: absolute;
    right: 0;
    bottom: 80px;
    display: none;
    flex-direction: column;
    width: 370px;
    height: min(590px, calc(100vh - 110px));
    overflow: hidden;
    border: 1px solid var(--oma-border);
    border-radius: 20px;
    background: var(--oma-surface);
    box-shadow: 0 20px 55px rgba(20, 43, 92, .22);
    opacity: 0;
    transform: translateY(14px) scale(.97);
    transition: opacity .22s ease, transform .22s ease;
}

.oma-chat-window.open { display: flex; opacity: 1; transform: translateY(0) scale(1); }

.oma-chat-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 10px;
    padding: 15px 16px;
    color: #fff;
    background: linear-gradient(135deg, #1b429f, #0c9695);
}

.oma-header-avatar { flex-shrink: 0; }
.oma-header-info { min-width: 0; flex: 1; }
.oma-header-info h3 { margin: 0; color: #fff; font-size: 18px; line-height: 1.2; }
.oma-status { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: rgba(255, 255, 255, .82); font-size: 12px; }
.oma-status-dot { width: 7px; height: 7px; border-radius: 50%; background: #8df2c7; }
.oma-header-actions { display: flex; gap: 6px; }
.oma-new-chat-btn, .oma-chat-close { width: 30px; height: 30px; border: 0; border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .16); cursor: pointer; font-size: 18px; line-height: 1; }
.oma-new-chat-btn:hover, .oma-chat-close:hover, .oma-new-chat-btn:focus-visible, .oma-chat-close:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }

.oma-chat-messages { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 15px; background: linear-gradient(180deg, #fbfcff, #f5f8ff); }
.oma-message, .oma-user-message { display: flex; gap: 8px; margin: 0 0 14px; align-items: flex-end; }
.oma-user-message { justify-content: flex-end; }
.oma-message-content { max-width: 82%; padding: 10px 12px; border: 1px solid var(--oma-border); border-radius: 15px 15px 15px 4px; color: var(--oma-ink); background: #fff; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; box-shadow: 0 2px 8px rgba(20, 43, 92, .04); }
.oma-user-message .oma-message-content { border-color: #c9d7ff; border-radius: 15px 15px 4px 15px; color: #fff; background: var(--oma-blue); }
.oma-message-content a { color: var(--oma-blue); font-weight: 600; text-decoration: underline; }
.oma-user-message .oma-message-content a { color: #fff; }
.oma-message-time { margin-top: 5px; color: var(--oma-muted); font-size: 10px; line-height: 1; }
.oma-user-message .oma-message-time { color: rgba(255, 255, 255, .74); text-align: right; }
.oma-welcome-message .oma-message-content { border-color: #bfe9e7; background: #f1fffd; }
.oma-avatar-small { display: flex; flex-shrink: 0; align-items: flex-end; }

.oma-typing-indicator { display: flex; flex-shrink: 0; align-items: center; gap: 8px; padding: 0 15px 10px; color: var(--oma-muted); font-size: 12px; }
.oma-typing-copy { display: flex; align-items: center; gap: 6px; }
.oma-typing-dots { display: inline-flex; gap: 3px; }
.oma-typing-dots i { display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--oma-teal); animation: oma-bounce 1s infinite ease-in-out; }
.oma-typing-dots i:nth-child(2) { animation-delay: .15s; }.oma-typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes oma-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }

.oma-chat-input-area { flex-shrink: 0; padding: 12px 13px 13px; border-top: 1px solid var(--oma-border); background: #fff; }
.oma-chat-form { margin: 0; }
.oma-input-container { display: flex; gap: 8px; align-items: center; padding: 5px 5px 5px 12px; border: 1px solid #cdd8ec; border-radius: 13px; background: #fff; }
.oma-input-container:focus-within { border-color: var(--oma-blue); box-shadow: 0 0 0 3px rgba(36, 84, 214, .12); }
.oma-chat-input { min-width: 0; flex: 1; padding: 7px 0; border: 0; outline: none; color: var(--oma-ink); background: transparent; font: inherit; font-size: 13px; }
.oma-send-button { display: flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 0; border-radius: 10px; color: #fff; background: var(--oma-blue); cursor: pointer; }
.oma-send-button:hover { background: #173da7; }.oma-send-button:disabled { cursor: not-allowed; opacity: .45; }
.oma-quick-questions { max-height: 80px; margin-top: 10px; overflow: hidden; opacity: 1; transition: max-height .2s ease, opacity .2s ease, margin .2s ease; }
.oma-quick-questions.hidden { max-height: 0; margin-top: 0; opacity: 0; }
.oma-quick-question-label { margin-bottom: 6px; color: var(--oma-muted); font-size: 11px; }
.oma-quick-questions-list { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.oma-quick-question-btn { flex-shrink: 0; padding: 6px 9px; border: 1px solid #cbd8f1; border-radius: 999px; color: var(--oma-blue); background: #f7f9ff; cursor: pointer; font: inherit; font-size: 11px; white-space: nowrap; }
.oma-quick-question-btn:hover, .oma-quick-question-btn:focus-visible { border-color: var(--oma-blue); background: #edf2ff; outline: none; }

@media (max-width: 520px) {
    .oma-chat-widget { right: 12px; bottom: 12px; }
    .oma-chat-window { right: -5px; width: min(370px, calc(100vw - 24px)); height: min(590px, calc(100vh - 90px)); }
    .oma-speech-bubble { display: none; }
}

/*
 * Scope the widget dimensions firmly. Some WordPress themes apply broad
 * button, section, or flex rules that can turn these controls into panels.
 */
#oma-chat-widget,
#oma-chat-widget *,
#oma-chat-widget *::before,
#oma-chat-widget *::after {
    box-sizing: border-box;
}

#oma-chat-widget {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    text-align: left !important;
}

#oma-chat-widget button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
    text-transform: none !important;
}

#oma-chat-widget .oma-chat-toggle {
    display: flex !important;
    flex: 0 0 66px !important;
    width: 66px !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: linear-gradient(135deg, var(--oma-blue), var(--oma-teal)) !important;
    box-shadow: 0 9px 28px rgba(24, 55, 126, .27) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

#oma-chat-widget .oma-avatar,
#oma-chat-widget .oma-face,
#oma-chat-widget .oma-chat-icon,
#oma-chat-widget .oma-speech-bubble {
    flex: 0 0 auto !important;
}

#oma-chat-widget .oma-speech-bubble {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    color: var(--oma-ink) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
}

#oma-chat-widget .oma-chat-window {
    display: none !important;
    flex: 0 1 auto !important;
    width: 370px !important;
    min-width: 0 !important;
    max-width: calc(100vw - 24px) !important;
    height: min(590px, calc(100vh - 110px)) !important;
    min-height: 0 !important;
    max-height: calc(100vh - 90px) !important;
    margin: 0 !important;
}

#oma-chat-widget .oma-chat-window.open {
    display: flex !important;
}

#oma-chat-widget .oma-chat-header {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 70px !important;
    margin: 0 !important;
    padding: 13px 14px !important;
}

#oma-chat-widget .oma-header-info {
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
}

#oma-chat-widget .oma-header-info h3 {
    margin: 0 !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: normal !important;
}

#oma-chat-widget .oma-status {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin-top: 3px !important;
    color: rgba(255, 255, 255, .82) !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
}

#oma-chat-widget .oma-header-actions {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 66px !important;
    max-width: 66px !important;
    height: 32px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
}

#oma-chat-widget .oma-new-chat-btn,
#oma-chat-widget .oma-chat-close {
    display: flex !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: rgba(255, 255, 255, .16) !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    line-height: 30px !important;
    letter-spacing: normal !important;
}

#oma-chat-widget .oma-chat-messages,
#oma-chat-widget .oma-chat-input-area {
    width: 100% !important;
    min-width: 0 !important;
}

#oma-chat-widget .oma-send-button {
    display: flex !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    min-width: 34px !important;
    max-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    background: var(--oma-blue) !important;
    font-size: 13px !important;
    line-height: 1 !important;
}

#oma-chat-widget .oma-quick-question-btn {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    color: var(--oma-blue) !important;
    background: #f7f9ff !important;
}

@media (max-width: 520px) {
    #oma-chat-widget .oma-chat-window {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
}