@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600&family=Instrument+Sans:wght@400;500&display=swap');

:root {
    --white: #ffffff;
    --off-white: #f7f6f3;
    --border: #e2e0db;
    --border-strong: #ccc9c2;
    --text: #1a1916;
    --text-muted: #8a877f;
    --text-light: #b8b5ae;
    --accent: #2d5be3;
    --user-bg: #1a1916;
    --user-text: #f7f6f3;
    --font-display: 'Syne', sans-serif;
    --font-body: 'Instrument Sans', sans-serif;
    --orb-size: 58px;
    --radius: 18px;
    --radius-sm: 10px;
    --radius-msg: 14px;
}

/* ====== CONTAINER ====== */
.chat-widget-container {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 9999;
    font-family: var(--font-body);
}

/* ====== ORB TOGGLE ====== */
.chat-toggle-button {
    width: var(--orb-size);
    height: var(--orb-size);
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    cursor: pointer;
    background: var(--white);
    padding: 0;
    outline: none;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.chat-toggle-button:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.06);
    border-color: var(--text);
    transform: translateY(-1px);
}
.orb-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.orb-label {
    position: relative;
    z-index: 2;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 22px;
    letter-spacing: -0.5px;
    color: #000000;
    pointer-events: none;
    user-select: none;
    text-shadow: 0 1px 6px rgba(0,0,0,0.08);
}
.chat-widget-container.open .chat-toggle-button {
    transform: scale(0) translateY(8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* ====== CHAT WINDOW ====== */
.chat-window {
    width: 360px;
    height: 540px;
    background: var(--white);
    border-radius: var(--radius);
    border: 1.5px solid var(--border);
    box-shadow: 0 2px 4px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.08), 0 24px 64px rgba(0,0,0,0.07);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: absolute;
    bottom: 72px;
    right: 0;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transform-origin: bottom right;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
    visibility: hidden;
}
.chat-widget-container.open .chat-window {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    visibility: visible;
}

/* ====== HEADER ====== */
.chat-header {
    padding: 16px 18px 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    background: var(--white);
    flex-shrink: 0;
}
.chat-header-left {
    display: flex;
    align-items: center;
    gap: 11px;
}
.chat-header-orb {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--border-strong);
    background: var(--white);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.chat-header-orb .mini-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.chat-header-orb .mini-label {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-weight: 600;
    font-size: 7px; letter-spacing: 0.3px; color: var(--text); z-index: 2;
}
.chat-header-info { display: flex; flex-direction: column; gap: 1px; }
.chat-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 14px; font-weight: 600;
    color: var(--text); letter-spacing: -0.1px;
}
.chat-subtitle {
    margin: 0; font-size: 11px; color: var(--text-muted);
    display: flex; align-items: center; gap: 5px;
}
.status-dot {
    width: 5px; height: 5px; border-radius: 50%;
    background: #22c55e; display: inline-block; flex-shrink: 0;
}
.chat-close-button {
    background: none; border: 1px solid var(--border);
    color: var(--text-muted); cursor: pointer;
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.15s ease; flex-shrink: 0;
}
.chat-close-button:hover { border-color: var(--text); color: var(--text); background: var(--off-white); }
.chat-close-button svg { width: 12px; height: 12px; }

/* ====== MESSAGES ====== */
.chat-messages {
    flex-grow: 1;
    padding: 18px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--off-white);
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}
.chat-messages::-webkit-scrollbar { width: 3px; }
.chat-messages::-webkit-scrollbar-track { background: transparent; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 10px; }

.message {
    max-width: 84%; padding: 10px 13px;
    border-radius: var(--radius-msg);
    font-size: 13.5px; line-height: 1.55;
    word-break: break-word;
    animation: msg-appear 0.2s ease forwards;
}
@keyframes msg-appear {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.message p { margin: 0; }

.bot-message {
    background: var(--white);
    border: 1px solid var(--border);
    color: var(--text);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}
.bot-message ul, .bot-message ol { padding-left: 16px; margin: 5px 0 2px; }
.bot-message li { margin-bottom: 3px; }
.bot-message strong { font-weight: 600; }
.bot-message em { font-style: italic; color: var(--text-muted); }
.bot-message code {
    background: var(--off-white); border: 1px solid var(--border);
    padding: 1px 5px; border-radius: 4px;
    font-family: 'Courier New', monospace; font-size: 12px;
}
.bot-message a { color: var(--accent); text-decoration: underline; }

.user-message {
    background: var(--user-bg);
    color: var(--user-text);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

/* ====== TYPING ====== */
.typing-indicator {
    display: flex; align-items: center; gap: 4px;
    padding: 11px 14px;
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-msg); border-bottom-left-radius: 4px;
    align-self: flex-start;
}
.typing-indicator span {
    width: 5px; height: 5px; background: var(--border-strong);
    border-radius: 50%; animation: t-bounce 1.3s infinite ease-in-out both;
}
.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
@keyframes t-bounce {
    0%, 80%, 100% { transform: scale(0.55); opacity: 0.4; }
    40%           { transform: scale(1);    opacity: 1;   }
}

/* ====== INPUT AREA ====== */
.chat-input-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--border);
    background: var(--white);
    flex-shrink: 0;
}

/* Turnstile container — completely hidden, zero size, no layout impact */
#cf-turnstile-container {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.chat-input-form input {
    flex-grow: 1;
    border: 1px solid var(--border);
    background: var(--off-white);
    padding: 9px 12px;
    font-size: 16px; /* iOS Safari zooms on < 16px */
    font-family: var(--font-body);
    color: var(--text);
    border-radius: var(--radius-sm);
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.chat-input-form input::placeholder { color: var(--text-light); }
.chat-input-form input:focus { border-color: var(--text); background: var(--white); }

/* ====== LIQUID GLASS SEND BUTTON ====== */
.chat-send-button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: linear-gradient(145deg, rgba(255,255,255,0.72) 0%, rgba(210,225,255,0.38) 100%);
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(80,110,200,0.12),
        0 2px 10px rgba(80,110,200,0.13),
        0 1px 3px rgba(0,0,0,0.06);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: box-shadow 0.18s ease, transform 0.15s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.chat-send-button:hover {
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,1),
        inset 0 -1px 0 rgba(80,110,200,0.18),
        0 4px 16px rgba(80,110,200,0.22),
        0 1px 4px rgba(0,0,0,0.07);
    transform: translateY(-1px);
}
.chat-send-button:active { transform: scale(0.95); }
.chat-send-button svg { width: 15px; height: 15px; }

/* ====== RTL ====== */
.rtl-message { direction: rtl; text-align: right; }
.rtl-message ul, .rtl-message ol { padding-right: 16px; padding-left: 0; }
#chat-input:placeholder-shown { direction: ltr; }
#chat-input:not(:placeholder-shown):valid { unicode-bidi: plaintext; }

/* ====== MOBILE ====== */
@media (max-width: 480px) {
    .chat-window { width: 100vw; height: 100vh; border-radius: 0; bottom: 0; right: 0; position: fixed; top: 0; left: 0; z-index: 10000; }
    .chat-widget-container { bottom: 16px; right: 16px; z-index: 10000; }
    .chat-input-form { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}