/* ===== Olspark Support Center — Brand Theme =====
   Palette: white #ffffff · red #e10b1c · black #0d0d0d
   ============================================================ */

:root {
    --ols-red: #e10b1c;
    --ols-red-dark: #b3000f;
    --ols-red-soft: #ffe6e8;
    --ols-black: #0d0d0d;
    --ols-gray-900: #1a1a1a;
    --ols-gray-700: #4a4a4a;
    --ols-gray-300: #d8d8d8;
    --ols-gray-100: #f6f6f7;
    --ols-white: #ffffff;
    --ols-shadow: 0 10px 30px rgba(0,0,0,.08);
    --ols-shadow-lg: 0 20px 60px rgba(0,0,0,.15);
}

html, body { height: 100%; }
body {
    background: var(--ols-white);
    color: var(--ols-black);
    font-family: 'Segoe UI', 'Cairo', 'Tahoma', sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Header ---------- */
.ols-header {
    background: var(--ols-black);
    color: var(--ols-white);
    box-shadow: 0 2px 8px rgba(0,0,0,.4);
    position: sticky; top: 0; z-index: 100;
}
.ols-header .navbar { padding: .65rem 0; }
.ols-header .navbar-brand {
    color: var(--ols-white); font-weight: 700; font-size: 1.25rem;
    display: inline-flex; align-items: center; gap: .55rem;
}
.ols-header .brand-dot {
    display: inline-block; width: 12px; height: 12px;
    background: var(--ols-red); border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(225,11,28,.25);
}
.ols-header .brand-light { color: var(--ols-red); font-weight: 600; }
.ols-header .nav-link { color: rgba(255,255,255,.85); font-weight: 500; }
.ols-header .nav-link:hover { color: var(--ols-red); }
.ols-header .navbar-toggler { border-color: rgba(255,255,255,.4); }
.ols-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ---------- Footer ---------- */
.ols-footer {
    background: var(--ols-black);
    color: var(--ols-gray-300);
    padding: 1.25rem 0;
    margin-top: 3rem;
    border-top: 4px solid var(--ols-red);
}

/* ---------- Buttons ---------- */
.btn-olspark, .btn-primary {
    background: var(--ols-red); border-color: var(--ols-red); color: #fff;
    font-weight: 600; letter-spacing: .2px;
}
.btn-olspark:hover, .btn-primary:hover {
    background: var(--ols-red-dark); border-color: var(--ols-red-dark); color: #fff;
}
.btn-dark-olspark {
    background: var(--ols-black); border-color: var(--ols-black); color: #fff;
}
.btn-dark-olspark:hover { background: #222; color: #fff; }

/* ---------- Hero (landing) ---------- */
.ols-hero {
    background: linear-gradient(135deg, #0d0d0d 0%, #1a1a1a 60%, #2a0306 100%);
    color: #fff;
    padding: 5rem 0 6rem;
    position: relative;
    overflow: hidden;
}
.ols-hero::before {
    content: ""; position: absolute; right: -200px; top: -120px;
    width: 520px; height: 520px; border-radius: 50%;
    background: radial-gradient(circle, rgba(225,11,28,.45), transparent 60%);
    filter: blur(20px);
}
.ols-hero h1 { font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; line-height: 1.1; }
.ols-hero h1 .accent { color: var(--ols-red); }
.ols-hero p.lead { color: rgba(255,255,255,.85); max-width: 640px; }
.ols-hero .pill {
    display: inline-block; padding: .35rem 1rem; border: 1px solid rgba(255,255,255,.25);
    border-radius: 999px; font-size: .85rem; color: rgba(255,255,255,.85); margin-bottom: 1.25rem;
}

.feature-card {
    background: #fff; border-radius: 16px; padding: 1.5rem;
    box-shadow: var(--ols-shadow); border: 1px solid var(--ols-gray-100);
    transition: transform .15s ease, box-shadow .15s ease; height: 100%;
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--ols-shadow-lg); }
.feature-card .icon {
    width: 48px; height: 48px; border-radius: 12px; display: inline-flex;
    align-items: center; justify-content: center; background: var(--ols-red-soft);
    color: var(--ols-red); font-size: 1.4rem; margin-bottom: .9rem;
}
.feature-card h5 { color: var(--ols-black); font-weight: 700; }
.feature-card p { color: var(--ols-gray-700); margin: 0; }

/* ===========================================================
   Floating Chat Widget (landing-page bubble)
   =========================================================== */
.olspark-widget {
    position: fixed; right: 24px; bottom: 24px; z-index: 1080;
    font-family: inherit;
}
.olspark-launcher {
    width: 64px; height: 64px; border-radius: 50%;
    background: var(--ols-red); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 12px 32px rgba(225,11,28,.45);
    cursor: pointer; transition: transform .15s ease;
}
.olspark-launcher:hover { transform: scale(1.05); }
.olspark-launcher svg { width: 28px; height: 28px; }
.olspark-launcher .pulse {
    position: absolute; inset: 0; border-radius: 50%;
    border: 3px solid var(--ols-red); opacity: .6;
    animation: olspark-pulse 1.8s ease-out infinite;
}
@keyframes olspark-pulse {
    0%   { transform: scale(.85); opacity: .6; }
    100% { transform: scale(1.55); opacity: 0; }
}

.olspark-panel {
    position: absolute; right: 0; bottom: 80px;
    width: 360px; max-width: calc(100vw - 40px);
    height: 540px; max-height: calc(100vh - 120px);
    background: #fff; border-radius: 18px; overflow: hidden;
    box-shadow: var(--ols-shadow-lg); display: none; flex-direction: column;
    border: 1px solid var(--ols-gray-300);
}
.olspark-widget.open .olspark-panel { display: flex; }
.olspark-widget.open .olspark-launcher .pulse { display: none; }

.olspark-panel .head {
    background: linear-gradient(135deg, var(--ols-black), #1a1a1a);
    color: #fff; padding: 1rem 1.1rem; display: flex; align-items: center; gap: .7rem;
    border-bottom: 3px solid var(--ols-red);
}
.olspark-panel .head .avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--ols-red); display: flex; align-items: center; justify-content: center; font-weight: 700;
}
.olspark-panel .head .title { font-weight: 700; line-height: 1.1; }
.olspark-panel .head .sub { font-size: .8rem; color: rgba(255,255,255,.7); }
.olspark-panel .head .close {
    margin-inline-start: auto; background: transparent; border: none; color: #fff;
    font-size: 1.3rem; cursor: pointer; padding: 0 .4rem;
}

.olspark-panel .body { flex: 1; overflow-y: auto; padding: 1rem; background: #fafafa; }
.olspark-panel form .form-control, .olspark-panel form .form-select {
    border-radius: 10px; border-color: var(--ols-gray-300);
}
.olspark-panel form label { font-size: .85rem; color: var(--ols-gray-700); font-weight: 600; margin-bottom: .25rem; }
.olspark-panel form .row-phone { display: flex; gap: .4rem; }
.olspark-panel form .row-phone select { flex: 0 0 110px; }
.olspark-panel form button[type=submit] {
    width: 100%; padding: .65rem; border-radius: 10px;
    background: var(--ols-red); color: #fff; border: 0; font-weight: 700; margin-top: .5rem;
}
.olspark-panel .intro { font-size: .92rem; color: var(--ols-gray-700); margin-bottom: 1rem; }
.olspark-panel .intro strong { color: var(--ols-black); }

/* ===========================================================
   Full Chat Window (guest + employee shared styles)
   =========================================================== */
.chat-wrapper {
    display: flex; flex-direction: column; height: calc(100vh - 130px);
    max-width: 900px; margin: 1.5rem auto; background: #fff; border-radius: 18px;
    box-shadow: var(--ols-shadow); overflow: hidden; border: 1px solid var(--ols-gray-300);
}
.chat-wrapper.full { max-width: none; margin: 0; border-radius: 0; height: calc(100vh - 130px); }

.chat-header {
    background: var(--ols-black); color: #fff; padding: 1rem 1.25rem;
    display: flex; align-items: center; gap: .9rem; border-bottom: 3px solid var(--ols-red);
}
.chat-header .avatar {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--ols-red); display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1.05rem; overflow: hidden;
}
.chat-header .avatar img { width: 100%; height: 100%; object-fit: cover; }
.chat-header .who .name { font-weight: 700; }
.chat-header .who .meta { font-size: .8rem; color: rgba(255,255,255,.7); }
.chat-header .actions { margin-inline-start: auto; }
.chat-header .badge-dept {
    background: var(--ols-red); padding: .35rem .7rem; border-radius: 999px;
    font-size: .75rem; font-weight: 700; letter-spacing: .5px;
}
.chat-header .end-btn {
    background: transparent; border: 1px solid rgba(255,255,255,.4);
    color: #fff; padding: .4rem .9rem; border-radius: 8px; font-size: .85rem; cursor: pointer;
}
.chat-header .end-btn:hover { background: var(--ols-red); border-color: var(--ols-red); }

.chat-body {
    flex: 1; overflow-y: auto; padding: 1.25rem; background: #f7f7f8;
    display: flex; flex-direction: column; gap: .55rem;
}

.msg { display: flex; gap: .6rem; max-width: 78%; }
.msg .bubble {
    padding: .65rem .9rem; border-radius: 14px; background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.05); position: relative; word-wrap: break-word;
}
.msg .bubble .meta { font-size: .7rem; color: var(--ols-gray-700); margin-top: .25rem; }
.msg .bubble img.attach { max-width: 220px; border-radius: 8px; display: block; }
.msg .bubble a.attach { color: var(--ols-red); text-decoration: none; font-weight: 600; }
.msg .bubble a.attach:hover { text-decoration: underline; }

.msg.self { align-self: flex-end; flex-direction: row-reverse; }
.msg.self .bubble { background: var(--ols-red); color: #fff; }
.msg.self .bubble .meta { color: rgba(255,255,255,.8); }

.msg.system { align-self: center; max-width: 100%; }
.msg.system .bubble {
    background: transparent; box-shadow: none; color: var(--ols-gray-700);
    font-style: italic; font-size: .85rem; text-align: center;
}

.typing-indicator {
    padding: .4rem .75rem; font-size: .8rem; color: var(--ols-gray-700);
    font-style: italic; display: none;
}
.typing-indicator.show { display: block; }

.chat-input {
    border-top: 1px solid var(--ols-gray-300); padding: .8rem; background: #fff;
    display: flex; align-items: center; gap: .5rem;
}
.chat-input input[type=text] {
    flex: 1; border: 1px solid var(--ols-gray-300); border-radius: 10px;
    padding: .6rem .9rem; font-size: .95rem;
}
.chat-input input[type=text]:focus { outline: none; border-color: var(--ols-red); box-shadow: 0 0 0 2px var(--ols-red-soft); }
.chat-input button {
    background: var(--ols-red); color: #fff; border: 0; border-radius: 10px;
    padding: .6rem 1rem; font-weight: 700; cursor: pointer;
}
.chat-input button.icon-btn {
    background: var(--ols-gray-100); color: var(--ols-black); padding: .55rem .7rem;
}
.chat-input button.icon-btn:hover { background: var(--ols-gray-300); }
.chat-input button:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- Rating ---------- */
.rating-overlay {
    position: absolute; inset: 0; background: rgba(13,13,13,.85); color: #fff;
    display: none; align-items: center; justify-content: center; z-index: 10;
}
.rating-overlay.show { display: flex; }
.rating-card {
    background: #fff; color: var(--ols-black); border-radius: 16px;
    padding: 2rem; max-width: 360px; width: 90%; text-align: center;
}
.rating-card .stars { font-size: 2.2rem; color: var(--ols-gray-300); cursor: pointer; }
.rating-card .stars span { transition: color .1s; padding: 0 .15rem; }
.rating-card .stars span.active { color: #ffc107; }
.rating-card textarea {
    width: 100%; margin-top: 1rem; border: 1px solid var(--ols-gray-300);
    border-radius: 8px; padding: .5rem; min-height: 80px;
}
.rating-card button {
    background: var(--ols-red); color: #fff; border: 0; border-radius: 10px;
    padding: .6rem 1.5rem; font-weight: 700; margin-top: 1rem;
}

/* ---------- Agent dashboard ---------- */
.agent-grid { display: grid; grid-template-columns: 320px 1fr; gap: 1rem; min-height: calc(100vh - 130px); }
.agent-sidebar {
    background: #fff; border-radius: 14px; padding: 1rem; box-shadow: var(--ols-shadow);
    overflow-y: auto; max-height: calc(100vh - 130px);
}
.agent-sidebar h6 { color: var(--ols-gray-700); font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; }
.room-item {
    display: block; padding: .75rem .85rem; border-radius: 10px; cursor: pointer;
    border: 1px solid var(--ols-gray-100); margin-bottom: .55rem; text-decoration: none; color: inherit;
    transition: all .12s;
}
.room-item:hover { background: var(--ols-gray-100); }
.room-item .name { font-weight: 700; color: var(--ols-black); }
.room-item .preview { font-size: .8rem; color: var(--ols-gray-700); margin-top: .2rem; }
.room-item .badge-new { background: var(--ols-red); color: #fff; font-size: .7rem; padding: .15rem .5rem; border-radius: 999px; }

.empty-state { text-align: center; color: var(--ols-gray-700); padding: 3rem 1rem; }
.empty-state .big { font-size: 3rem; margin-bottom: 1rem; }

/* ---------- Admin dashboard cards ---------- */
.stat-card {
    background: #fff; border-radius: 14px; padding: 1.25rem;
    box-shadow: var(--ols-shadow); border-top: 4px solid var(--ols-red);
}
.stat-card .num { font-size: 2rem; font-weight: 800; color: var(--ols-black); }
.stat-card .lbl { color: var(--ols-gray-700); font-size: .85rem; text-transform: uppercase; letter-spacing: 1px; }
.table thead th { background: var(--ols-black); color: #fff; }

/* ---------- Misc ---------- */
.text-olspark { color: var(--ols-red) !important; }
.bg-olspark { background: var(--ols-red) !important; color: #fff !important; }
.bg-black-olspark { background: var(--ols-black) !important; color: #fff !important; }

/* ---------- Availability dot ---------- */
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-inline-end:4px; }
.dot.on { background:#2ecc71; box-shadow:0 0 0 3px rgba(46,204,113,.2); }
.dot.off{ background:#999; }

/* ---------- Incoming chat popup ---------- */
.incoming-overlay {
    position: fixed; inset: 0; background: rgba(13,13,13,.7);
    z-index: 2000; display: flex; align-items: center; justify-content: center;
    animation: fadeIn .25s ease;
}
.incoming-overlay[hidden] { display: none !important; }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
.incoming-card {
    background: #fff; border-radius: 16px; padding: 1.75rem; max-width: 420px; width: 92%;
    box-shadow: var(--ols-shadow-lg); border-top: 6px solid var(--ols-red);
    animation: pop .25s ease;
}
@keyframes pop { from { transform: scale(.85); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.incoming-card .incoming-meta { background: var(--ols-gray-100); padding: .75rem 1rem; border-radius: 10px; }
.incoming-card .incoming-preview {
    font-style: italic; color: var(--ols-gray-700); padding: .75rem;
    background: #fafafa; border-radius: 8px; border-inline-start: 3px solid var(--ols-red);
    max-height: 140px; overflow-y: auto;
}

/* Pending request row in sidebar */
.room-item.pending {
    background: var(--ols-red-soft) !important;
    border-color: var(--ols-red) !important;
    animation: pulse-bg 2s infinite;
}
@keyframes pulse-bg { 0%,100% { box-shadow: 0 0 0 0 rgba(225,11,28,.2); } 50% { box-shadow: 0 0 0 6px rgba(225,11,28,0); } }

/* ---------- Login page ---------- */
.login-hero {
    min-height: calc(100vh - 130px);
    background: linear-gradient(135deg, #0d0d0d 0%, #1a0102 50%, #2a0306 100%);
    display: flex; align-items: center; justify-content: center;
    padding: 2rem 1rem; position: relative; overflow: hidden;
}
.login-hero::before {
    content: ""; position: absolute; top: -200px; right: -200px;
    width: 600px; height: 600px; border-radius: 50%;
    background: radial-gradient(circle, rgba(225,11,28,.35), transparent 65%);
    filter: blur(40px);
}
.login-hero::after {
    content: ""; position: absolute; bottom: -200px; left: -200px;
    width: 500px; height: 500px; border-radius: 50%;
    background: radial-gradient(circle, rgba(225,11,28,.18), transparent 65%);
    filter: blur(40px);
}
.login-card {
    background: #fff; border-radius: 22px; padding: 2.5rem;
    max-width: 440px; width: 100%; position: relative; z-index: 1;
    box-shadow: 0 30px 80px rgba(0,0,0,.45);
    border-top: 6px solid var(--ols-red);
}
.login-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 2rem; }
.login-brand .brand-dot {
    width: 16px; height: 16px; background: var(--ols-red); border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(225,11,28,.18);
}
.login-brand .title { font-weight: 800; font-size: 1.35rem; color: var(--ols-black); }
.login-brand .title span { color: var(--ols-red); }
.login-brand .subtitle { font-size: .78rem; color: var(--ols-gray-700); }
.login-title { font-weight: 700; margin-bottom: 1.4rem; color: var(--ols-black); }
.login-card .form-control {
    border-radius: 10px; padding: .65rem .85rem; border-color: var(--ols-gray-300);
}
.login-card .form-control:focus { border-color: var(--ols-red); box-shadow: 0 0 0 .2rem rgba(225,11,28,.15); }
.login-card .form-label { font-size: .85rem; font-weight: 600; color: var(--ols-gray-700); margin-bottom: .25rem; }
.login-card .btn-olspark { padding: .7rem; font-weight: 700; font-size: 1rem; border-radius: 10px; }

/* ---------- Office toggle card (admin) ---------- */
.office-toggle-card {
    background:#fff; border-radius:14px; padding:1.25rem 1.5rem;
    border-left:6px solid var(--ols-gray-300); box-shadow:var(--ols-shadow);
    transition: border-color .2s;
}
.office-toggle-card.open   { border-left-color: #2ecc71; }
.office-toggle-card.closed { border-left-color: var(--ols-red); }
.office-toggle-card .status-led .dot.on  { background:#2ecc71; box-shadow:0 0 0 6px rgba(46,204,113,.18); }
.office-toggle-card .status-led .dot.off { background:var(--ols-red); box-shadow:0 0 0 6px rgba(225,11,28,.18); }
body.rtl .office-toggle-card { border-left: none; border-right:6px solid var(--ols-gray-300); }
body.rtl .office-toggle-card.open   { border-right-color: #2ecc71; }
body.rtl .office-toggle-card.closed { border-right-color: var(--ols-red); }

/* ---------- Forward toast ---------- */
.forward-toast {
    position: fixed; bottom: 24px; right: 24px; z-index: 1900;
    background: #fff; border-left: 6px solid var(--ols-red);
    box-shadow: var(--ols-shadow-lg); border-radius: 12px;
    padding: 1rem 1.1rem; max-width: 340px;
    transform: translateX(120%); transition: transform .3s ease;
}
.forward-toast.show { transform: translateX(0); }
body.rtl .forward-toast { right: auto; left: 24px; border-left: none; border-right: 6px solid var(--ols-red); }
body.rtl .forward-toast { transform: translateX(-120%); }
body.rtl .forward-toast.show { transform: translateX(0); }
.forward-toast .ft-head { font-weight: 700; color: var(--ols-black); margin-bottom: .35rem; }
.forward-toast .ft-body { font-size: .85rem; color: var(--ols-gray-700); line-height: 1.4; }

/* ---------- "You are the only agent" alert ---------- */
.only-you-alert {
    background: #fff4e6; border: 1px solid #ffb648; color: #7a3a00;
    border-radius: 10px; padding: .65rem .85rem; margin-bottom: 1rem;
    font-weight: 600; font-size: .9rem;
}
.only-you-alert .icon { font-size: 1.1rem; }
.incoming-card.only-you-mode {
    border-top-color: #ff9500;
    box-shadow: 0 0 0 4px rgba(255,149,0,.25), var(--ols-shadow-lg);
    animation: only-you-pulse 1.5s ease-in-out infinite;
}
@keyframes only-you-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(255,149,0,.25), var(--ols-shadow-lg); }
    50%      { box-shadow: 0 0 0 10px rgba(255,149,0,.15), var(--ols-shadow-lg); }
}

/* ---------- Offer countdown ring inside agent popup ---------- */
.offer-countdown {
    width: 56px; height: 56px; border-radius: 50%;
    background: conic-gradient(var(--ols-red) calc(var(--p,100)*1%), var(--ols-gray-300) 0);
    display: inline-flex; align-items: center; justify-content: center; margin-bottom: .75rem;
    position: relative;
}
.offer-countdown::before {
    content: ""; position: absolute; inset: 5px; background:#fff; border-radius:50%;
}
.offer-countdown span {
    position: relative; font-weight: 800; font-size: 1.1rem; color: var(--ols-black);
}

/* ---------- Office Closed view ---------- */
.office-closed {
    text-align: center; padding: 3rem 1.5rem;
}
.office-closed .icon { font-size: 4rem; margin-bottom: 1rem; }
.office-closed h2 { font-weight: 800; }

@media (max-width: 768px) {
    .agent-grid { grid-template-columns: 1fr; }
    .olspark-panel { width: calc(100vw - 32px); height: 70vh; }
}