/* =========================================================
   Shayan AI Chat — public chat UI (RTL)
   ========================================================= */

:root {
        --sac-primary: #0d9488;
        --sac-primary-dark: #0f766e;
        --sac-surface: #ffffff;
        --sac-text: #111827;
        --sac-muted: #6b7280;
        --sac-border: #e5e7eb;
        --sac-soft: #f0fdfa;
}

.sac-root {
        direction: rtl;
        font-family: inherit;
        z-index: 99990;
}

/* ---------- Floating bubble ---------- */
.sac-bubble {
        position: fixed;
        bottom: 22px;
        left: 22px;
        width: 62px;
        height: 62px;
        border-radius: 50%;
        border: 0;
        cursor: pointer;
        background: linear-gradient(135deg, var(--sac-primary), var(--sac-primary-dark));
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 30px rgba(13, 148, 136, 0.45);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        z-index: 99991;
}

.sac-bubble:hover {
        transform: translateY(-3px) scale(1.04);
        box-shadow: 0 14px 34px rgba(13, 148, 136, 0.55);
}

.sac-root--right .sac-bubble {
        left: auto;
        right: 22px;
}

.sac-bubble__dot {
        position: absolute;
        top: 4px;
        inset-inline-start: 4px;
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #f43f5e;
        border: 2px solid #fff;
}

/* ---------- Panel ---------- */
.sac-panel {
        position: fixed;
        bottom: 96px;
        left: 22px;
        width: min(382px, calc(100vw - 24px));
        height: min(566px, calc(100vh - 130px));
        min-height: 380px;
        background: var(--sac-surface);
        border: 1px solid var(--sac-border);
        border-radius: 18px;
        box-shadow: 0 24px 70px rgba(2, 6, 23, 0.22);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        z-index: 99992;
        animation: sac-pop 0.22s ease;
}

.sac-root--right .sac-panel {
        left: auto;
        right: 22px;
}

@keyframes sac-pop {
        from { opacity: 0; transform: translateY(14px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Header ---------- */
.sac-panel__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 12px 14px;
        background: linear-gradient(135deg, var(--sac-primary), var(--sac-primary-dark));
        color: #fff;
}

.sac-panel__id {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
}

.sac-panel__avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
}

.sac-panel__names {
        display: flex;
        flex-direction: column;
        line-height: 1.7;
        min-width: 0;
}

.sac-panel__names strong { font-size: 14.5px; }
.sac-panel__names small {
        font-size: 11.5px;
        opacity: 0.85;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
}

.sac-panel__actions { display: flex; gap: 4px; }

.sac-panel__actions button {
        background: rgba(255, 255, 255, 0.14);
        border: 0;
        color: #fff;
        width: 32px;
        height: 32px;
        border-radius: 10px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background 0.15s ease;
}

.sac-panel__actions button:hover { background: rgba(255, 255, 255, 0.28); }

/* ---------- Messages ---------- */
.sac-panel__msgs {
        flex: 1;
        overflow-y: auto;
        padding: 14px 12px;
        background:
                radial-gradient(circle at 85% 8%, rgba(13, 148, 136, 0.05), transparent 42%),
                #f8faf9;
        display: flex;
        flex-direction: column;
        gap: 10px;
        scroll-behavior: smooth;
}

.sac-msg { display: flex; }

.sac-msg--bot { justify-content: flex-start; }
.sac-msg--me  { justify-content: flex-end; }

.sac-msg__bubble {
        max-width: 84%;
        padding: 10px 13px;
        border-radius: 14px;
        font-size: 13.8px;
        line-height: 2;
        word-break: break-word;
        white-space: pre-wrap;
}

.sac-msg--bot .sac-msg__bubble {
        background: var(--sac-surface);
        border: 1px solid var(--sac-border);
        border-start-start-radius: 4px;
        color: var(--sac-text);
        box-shadow: 0 2px 8px rgba(2, 6, 23, 0.05);
}

.sac-msg--me .sac-msg__bubble {
        background: linear-gradient(135deg, var(--sac-primary), var(--sac-primary-dark));
        color: #fff;
        border-start-end-radius: 4px;
        box-shadow: 0 4px 14px rgba(13, 148, 136, 0.35);
}

.sac-msg__bubble a {
        color: var(--sac-primary-dark);
        font-weight: 700;
        text-decoration: underline;
}
.sac-msg--me .sac-msg__bubble a { color: #fff; }

.sac-msg__bubble ul {
        margin: 6px 0;
        padding-inline-start: 18px;
}
.sac-msg__bubble code {
        background: rgba(13, 148, 136, 0.09);
        padding: 1px 6px;
        border-radius: 6px;
        font-size: 12.5px;
}

.sac-sources {
        max-width: 92%;
        font-size: 11.8px;
        color: var(--sac-muted);
        background: var(--sac-soft);
        border: 1px dashed #99f6e4;
        border-radius: 12px;
        padding: 8px 11px;
        line-height: 2.1;
        align-self: flex-start;
}

.sac-sources strong { color: var(--sac-primary-dark); font-size: 11.5px; display: block; }
.sac-sources a { color: var(--sac-primary-dark); text-decoration: none; }
.sac-sources a:hover { text-decoration: underline; }

/* typing */
.sac-typing .sac-msg__bubble {
        display: inline-flex;
        gap: 5px;
        align-items: center;
        padding: 13px 16px;
}

.sac-typing .sac-msg__bubble span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--sac-primary);
        opacity: 0.45;
        animation: sac-blink 1.2s infinite;
}

.sac-typing .sac-msg__bubble span:nth-child(2) { animation-delay: 0.2s; }
.sac-typing .sac-msg__bubble span:nth-child(3) { animation-delay: 0.4s; }

@keyframes sac-blink {
        0%, 70%, 100% { opacity: 0.3; transform: translateY(0); }
        35% { opacity: 1; transform: translateY(-3px); }
}

/* streaming cursor (word-by-word typing) */
.sac-cursor {
        display: inline-block;
        width: 8px;
        height: 15px;
        margin-inline-start: 3px;
        border-radius: 2px;
        background: var(--sac-primary);
        vertical-align: middle;
        animation: sac-cursor 0.85s infinite;
}

@keyframes sac-cursor {
        0%, 55%  { opacity: 1; }
        56%, 100% { opacity: 0.1; }
}

/* instant scroll while typing out the answer */
.sac-panel__msgs.sac-streaming { scroll-behavior: auto; }

/* ---------- Composer ---------- */
.sac-panel__composer {
        display: flex;
        align-items: flex-end;
        gap: 8px;
        padding: 10px;
        border-top: 1px solid var(--sac-border);
        background: var(--sac-surface);
}

.sac-input {
        flex: 1;
        resize: none;
        border: 1.5px solid var(--sac-border);
        border-radius: 12px;
        padding: 9px 13px;
        font-size: 13.8px;
        line-height: 1.9;
        font-family: inherit;
        max-height: 96px;
        background: #f8faf9;
        color: var(--sac-text);
        transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sac-input:focus {
        outline: none;
        border-color: var(--sac-primary);
        box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.13);
        background: #fff;
}

.sac-send {
        flex: none;
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 12px;
        background: linear-gradient(135deg, var(--sac-primary), var(--sac-primary-dark));
        color: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: filter 0.15s ease, transform 0.1s ease;
}

.sac-send:hover { filter: brightness(1.08); }
.sac-send:active { transform: scale(0.94); }
.sac-send:disabled { opacity: 0.5; cursor: not-allowed; }

.sac-panel__foot {
        padding: 7px 12px;
        font-size: 10.8px;
        color: var(--sac-muted);
        background: #f8faf9;
        border-top: 1px solid var(--sac-border);
        text-align: center;
}

/* ---------- Inline (shortcode) mode ---------- */
.sac-root--inline .sac-panel {
        position: static;
        width: 100%;
        max-width: 780px;
        height: 600px;
        margin: 0 auto;
        animation: none;
        box-shadow: 0 12px 40px rgba(2, 6, 23, 0.12);
}

/* ---------- Mobile ---------- */
@media (max-width: 480px) {
        .sac-panel {
                left: 8px !important;
                right: 8px !important;
                width: calc(100vw - 16px) !important;
                height: calc(100vh - 100px);
                bottom: 84px;
                border-radius: 16px;
        }

        .sac-root--inline .sac-panel { height: 78vh; }
        .sac-bubble { bottom: 14px; left: 14px; }
        .sac-root--right .sac-bubble { left: auto; right: 14px; }
}