* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background: #f5f5f5;
    color: #222;
    direction: rtl;
}

header {
    background: #1a1a2e;
    color: #fff;
    padding: 16px 24px;
}

header h1 {
    font-size: 1.3rem;
    font-weight: 600;
}

main {
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 16px;
}

.date-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.date-bar span {
    font-weight: 600;
    color: #555;
}

.date-btn {
    padding: 6px 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 0.9rem;
}

.date-btn.active {
    background: #1a1a2e;
    color: #fff;
    border-color: #1a1a2e;
}

.date-btn:hover:not(.active) {
    background: #eee;
}

#refresh-btn {
    margin-right: auto;
    padding: 6px 14px;
    background: #2d6a4f;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
}

#refresh-btn:hover {
    background: #1b4332;
}

.kpi-row {
    display: flex;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.kpi-card {
    flex: 1;
    min-width: 140px;
    background: #fff;
    border-radius: 8px;
    padding: 20px 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    text-align: center;
}

.kpi-label {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 8px;
}

.kpi-value {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1a1a2e;
}

.error-msg {
    background: #fff0f0;
    border: 1px solid #f5c6cb;
    color: #721c24;
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 0.9rem;
}

.campaigns-section h2 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: #333;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

thead th {
    background: #1a1a2e;
    color: #fff;
    padding: 12px 16px;
    text-align: right;
    font-size: 0.9rem;
    font-weight: 600;
}

tbody td {
    padding: 11px 16px;
    border-bottom: 1px solid #eee;
    font-size: 0.9rem;
}

tbody tr:last-child td {
    border-bottom: none;
}

tbody tr:hover {
    background: #f9f9f9;
}

.badge-active {
    background: #d4edda;
    color: #155724;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.badge-paused {
    background: #e2e3e5;
    color: #383d41;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

.btn-pause {
    padding: 4px 12px;
    background: #e74c3c;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}

.btn-pause:hover {
    background: #c0392b;
}

.btn-activate {
    padding: 4px 12px;
    background: #27ae60;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}

.btn-activate:hover {
    background: #1e8449;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-box {
    background: #fff;
    border-radius: 10px;
    padding: 28px 32px;
    max-width: 440px;
    width: 90%;
    text-align: center;
    direction: rtl;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
}

/* META-APP-REVIEW — Campaigns Card confirmation modal polish: title and a
   dedicated campaign-name block, both optional (used only by the
   Pause/Activate flow — see _openCampaignConfirmModal() in app.js). Every
   other confirm dialog sharing this modal (delete conversation, the
   legacy dashboard) leaves these elements empty, so :empty hides them
   automatically with no extra JS toggling. */
.modal-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 14px;
}

.modal-title:empty {
    display: none;
}

.modal-campaign-name {
    background: #f3f4f6;
    color: #374151;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 16px;
    font-size: 0.95rem;
    font-weight: 600;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.modal-campaign-name:empty {
    display: none;
}

.modal-box p {
    font-size: 1rem;
    margin-bottom: 20px;
    color: #222;
    white-space: pre-line;
}

.modal-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.modal-actions button {
    padding: 8px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
}

#modal-confirm-btn {
    background: #c0392b;
    color: #fff;
}

#modal-confirm-btn:hover {
    background: #a93226;
}

/* Campaigns Card Pause/Activate variants — compound ID+class selectors so
   they win over the plain #modal-confirm-btn default above regardless of
   source order. Reset to the plain default (via _resetConfirmModalToGeneric()
   in app.js, which strips both classes) for every non-campaigns confirm
   dialog sharing this same modal. */
#modal-confirm-btn.modal-confirm-btn--activate {
    background: #27ae60;
}

#modal-confirm-btn.modal-confirm-btn--activate:hover {
    background: #1e8449;
}

#modal-confirm-btn.modal-confirm-btn--pause {
    background: #c0392b;
}

#modal-confirm-btn.modal-confirm-btn--pause:hover {
    background: #a93226;
}

#modal-cancel-btn {
    background: #e2e3e5;
    color: #333;
}

#modal-cancel-btn:hover {
    background: #ccc;
}

/* Campaigns Card only: visually puts Cancel before the primary
   Activate/Pause action, without touching the shared #modal-confirm-btn /
   #modal-cancel-btn DOM order used by every other dialog on this modal
   (e.g. delete conversation). Scoped to .modal-box--campaign, toggled only
   by _openCampaignConfirmModal()/_resetConfirmModalToGeneric() in app.js —
   flex `order` reorders visually along the reading-start direction in
   both LTR and RTL, so this needs no separate [dir] override. */
.modal-box--campaign #modal-confirm-btn {
    order: 2;
}

.modal-box--campaign #modal-cancel-btn {
    order: 1;
}

.chat-section {
    margin-top: 32px;
}

.chat-log {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px;
    height: 240px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.chat-message {
    max-width: 75%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-user {
    background: #0d6efd;
    color: #fff;
    align-self: flex-start;
    border-bottom-right-radius: 2px;
}

.chat-bot {
    background: #e9ecef;
    color: #212529;
    align-self: flex-end;
    border-bottom-left-radius: 2px;
}

.chat-input-row {
    display: flex;
    gap: 8px;
}

.chat-input-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-size: 0.95rem;
    direction: rtl;
}

.chat-input-row input:focus {
    outline: none;
    border-color: #0d6efd;
}

#chat-send-btn {
    padding: 8px 20px;
    background: #0d6efd;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
}

#chat-send-btn:hover {
    background: #0b5ed7;
}

.goals-section {
    margin-bottom: 28px;
}

.goals-section h2 {
    font-size: 1.1rem;
    margin-bottom: 12px;
    color: #333;
}

.goals-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.goal-card {
    flex: 1;
    min-width: 160px;
    background: #fff;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    text-align: center;
    border-top: 3px solid #0d6efd;
}

.goal-label {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 6px;
}

.goal-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 4px;
}

.goal-sub {
    font-size: 0.8rem;
    color: #555;
}

.goal-ok {
    color: #155724;
    font-weight: 600;
}

.goal-warn {
    color: #721c24;
    font-weight: 600;
}

.chat-upload-btn {
    padding: 8px 16px;
    background: #0d6efd;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    align-self: flex-end;
    margin-top: 4px;
}

.chat-upload-btn:hover {
    background: #0b5ed7;
}


/* =============================================================
   WEB-3.2 — App Shell Layout
   All rules below are additive. Nothing above was changed.
   ============================================================= */

/* Full-height shell */
html, body {
    height: 100%;
    overflow: hidden;
}

/* App shell container: full viewport, sidebar on the physical left */
#app-shell {
    display: flex;
    flex-direction: row;        /* sidebar LEFT, workspace RIGHT */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    /* CRITICAL: override document dir="rtl" so first child = physical left */
    direction: ltr;
}

/* Left sidebar */
#sidebar {
    width: 220px;
    flex-shrink: 0;
    background: #1f2937;
    color: #d1d5db;
    overflow-y: auto;
    padding: 16px 0 24px;
    border-right: 1px solid #374151;
    /* Always stays on the physical left regardless of RTL */
    direction: ltr;
}

/* Sidebar shell: flex-column allows user-control to pin to bottom */
#sidebar {
    display: flex;
    flex-direction: column;
}

/* Brand strip — flex so brand sits left and toggle sits right */
.sidebar-header {
    padding: 18px 16px 10px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sidebar-brand {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #f9fafb;
    display: block;
}

/* Sidebar close button — lives inside .sidebar-header */
#sidebar-toggle {
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 1.1rem;
    line-height: 1;
    padding: 4px 6px;
    border-radius: 3px;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.15s, background 0.15s;
}

#sidebar-toggle:hover {
    color: #f9fafb;
    background: rgba(255,255,255,0.08);
}

/* Floating reopen button — fixed top-left, appears when sidebar is hidden */
#sidebar-reopen-btn {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 55;
    background: #1f2937;
    color: #9ca3af;
    border: 1px solid #374151;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

#sidebar-reopen-btn:hover {
    color: #f9fafb;
    background: #2d3748;
}

body.sidebar-collapsed #sidebar-reopen-btn {
    display: block;
}

/* New Chat button — nav-row style (SARGAS-CHAT-1.4B) */
.sidebar-actions {
    padding: 0;
    flex-shrink: 0;
}

.sidebar-new-chat-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 14px;
    background: transparent;
    color: #d1d5db;
    border: none;
    border-radius: 0;
    font-size: 0.875rem;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    text-align: right;
    direction: rtl;
    transition: background 0.12s, color 0.12s;
    min-height: 36px;
}

.sidebar-new-chat-btn:hover {
    background: rgba(255,255,255,0.06);
    color: #f9fafb;
}

.sidebar-new-chat-btn:focus-visible {
    outline: 2px solid rgba(99,102,241,0.45);
    outline-offset: -2px;
}

@media (max-width: 768px) {
    .sidebar-new-chat-btn {
        min-height: 44px;
    }
}

/* Legacy spacer — replaced by .sidebar-spacer in SARGAS-CHAT-1.3A */
.sidebar-nav {
    flex: 1;
}

/* Center workspace */
#workspace {
    flex: 1;
    /* Override the legacy `main { max-width / margin / padding }` rule */
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    /* Content inside workspace reads right-to-left (Hebrew) */
    direction: rtl;
}

#workspace .error-msg {
    margin: 12px 16px 0;
    flex-shrink: 0;
}

/* Chat section fills the workspace — no padding here, handled per zone */
#workspace .chat-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-top: 0;
    padding: 0;
}

/* Message log — open, borderless, ChatGPT-style conversation surface */
#workspace .chat-section .chat-log {
    flex: 1;
    height: auto;
    min-height: 0;
    /* No card: no border, no background box, no radius */
    background: #fff;
    border: none;
    border-radius: 0;
    /* Comfortable reading width with generous horizontal padding */
    padding: 32px 48px 8px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 0;
}

/* Input bar wrapper — pinned to bottom, full-width background, centered content */
#workspace .chat-section .chat-input-wrapper {
    flex-shrink: 0;
    position: relative;
    /* Match the log's horizontal padding so input aligns with messages */
    padding: 16px 48px 24px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
}

#workspace .chat-section .chat-input-row {
    display: flex;
    gap: 10px;
}

#workspace .chat-section .chat-input-row input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.95rem;
    direction: rtl;
    background: #f9fafb;
    transition: border-color 0.15s, background 0.15s;
}

#workspace .chat-section .chat-input-row input:focus {
    outline: none;
    border-color: #6366f1;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}

#workspace #chat-send-btn {
    padding: 12px 24px;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    flex-shrink: 0;
    transition: background 0.15s;
}

#workspace #chat-send-btn:hover {
    background: #4338ca;
}

/* =============================================================
   SARGAS-META-LEGAL-1 — Composer legal row
   Ownership statement + legal links, directly beneath the chat
   input row. One horizontal row at normal widths; wraps only when
   narrow-mobile space forces it. No forced direction — follows
   the ambient RTL/LTR of #workspace.
   ============================================================= */
#workspace .chat-section .chat-legal-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    line-height: 1.5;
    color: #8b8f98;
    text-align: center;
}

#workspace .chat-section .chat-legal-row a {
    color: #8b8f98;
    text-decoration: none;
    white-space: nowrap;
}

#workspace .chat-section .chat-legal-row a:hover {
    color: #4f46e5;
    text-decoration: underline;
}

#workspace .chat-section .chat-legal-row .chat-legal-sep {
    color: #c7c9ce;
}

@media (max-width: 768px) {
    #workspace .chat-section .chat-legal-row {
        font-size: 11px;
        gap: 5px;
        margin-top: 8px;
    }
}

/* =============================================================
   SARGAS-META-LEGAL-2 — Server-delivered legal identity block
   Static, non-i18n legal identity text directly beneath the
   composer legal row. Always present in the raw HTML response;
   never touched by app.js or the i18n text-replacement pass.
   ============================================================= */
#workspace .chat-section .chat-legal-identity {
    margin: 4px 0 0;
    padding: 0;
    padding-bottom: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #475467;
    text-align: center;
}

#workspace .chat-section .chat-legal-identity p {
    margin: 2px 0;
}

#workspace .chat-section .chat-legal-identity strong {
    font-weight: 600;
    color: #344054;
}

#workspace .chat-section .chat-legal-identity a {
    color: #6b6f76;
    text-decoration: none;
}

#workspace .chat-section .chat-legal-identity a:hover {
    color: #4f46e5;
    text-decoration: underline;
}

#workspace .chat-section .chat-legal-identity .chat-legal-identity-sep {
    color: #c7c9ce;
}

@media (max-width: 768px) {
    #workspace .chat-section .chat-legal-identity {
        margin-top: 4px;
        /* font-size stays 13px — minimum readable size, no further shrink on mobile */
    }
}

/* Sidebar toggle: hide sidebar when body has .sidebar-collapsed */
body.sidebar-collapsed #sidebar {
    display: none;
}

/* Mobile: sidebar hidden by default, full-width workspace */
@media (max-width: 768px) {
    #sidebar {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 40;
        width: 240px;
        box-shadow: 2px 0 12px rgba(0,0,0,0.25);
    }

    body.sidebar-open #sidebar {
        display: block;
    }

    #workspace {
        width: 100%;
    }

    #workspace .chat-section {
        padding: 12px 14px 14px;
    }

    /* Show floating menu button on mobile (sidebar hidden by default) */
    #sidebar-reopen-btn {
        display: block;
    }

    body.sidebar-open #sidebar-reopen-btn {
        display: none;
    }
}

/* =============================================================
   WEB-3.3 — Chat Welcome State
   ============================================================= */

#chat-welcome {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 16px 32px;
    min-height: 0;
}

/* SARGAS-CHAT-1.6-R3 — defence-in-depth only. The authoritative guard is the
   inline <style id="conversation-restore-prepaint-guard"> injected
   synchronously in <head> (web/static/index.html) before this stylesheet is
   even requested — it does not depend on this file having loaded. This rule
   just keeps the same behavior if the inline guard is ever removed early or
   this stylesheet outlives it for any reason. */
html[data-conversation-restore="pending"] #chat-welcome {
    display: none !important;
    visibility: hidden !important;
}

.welcome-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.welcome-subtitle {
    font-size: 1.05rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 12px;
}

.welcome-hint {
    font-size: 0.875rem;
    color: #6b7280;
    max-width: 440px;
    line-height: 1.65;
    margin-bottom: 28px;
}

.starter-prompts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 540px;
    direction: rtl;
}

.starter-prompt {
    padding: 9px 18px;
    background: #f9fafb;
    color: #111827;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    direction: rtl;
    white-space: nowrap;
}

.starter-prompt:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

@media (max-width: 768px) {
    #chat-welcome {
        padding: 20px 12px 24px;
    }

    .welcome-title {
        font-size: 1.4rem;
    }

    .welcome-hint {
        font-size: 0.82rem;
    }

    .starter-prompt {
        padding: 8px 14px;
        font-size: 0.82rem;
    }
}

/* =============================================================
   WEB-3.4 — Input Plus Menu
   ============================================================= */

#chat-plus-btn {
    padding: 12px 14px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

#chat-plus-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

#chat-plus-btn.active {
    background: #ede9fe;
    border-color: #6366f1;
    color: #4f46e5;
}

#chat-plus-menu {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    min-width: 200px;
    padding: 6px 0;
    z-index: 60;
    direction: rtl;
}

.plus-menu-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: right;
    font-size: 0.9rem;
    font-family: inherit;
    color: #111827;
    cursor: pointer;
    transition: background 0.12s;
    white-space: nowrap;
}

.plus-menu-item:hover {
    background: #f3f4f6;
}

@media (max-width: 768px) {
    #workspace .chat-section .chat-input-wrapper {
        padding: 12px 14px 14px;
    }
}

/* =============================================================
   SARGAS-WEB-4.2.1A — Sidebar User Control
   ============================================================= */

/* Wrapper — pinned to the bottom by flex layout on #sidebar */
#user-control {
    flex-shrink: 0;
    border-top: 1px solid #2d3748;
    padding: 8px 0;
    position: relative;
}

/* Authenticated: clickable row */
.sidebar-user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    cursor: pointer;
    direction: rtl;
    text-align: right;
    border-radius: 0;
    transition: background 0.15s;
}

.sidebar-user-btn:hover {
    background: rgba(255,255,255,0.06);
}

/* Avatar circle with initials */
.sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #4f46e5;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

/* Text block */
.sidebar-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: right;
}

.sidebar-user-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: #f9fafb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-sub {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
}

/* Chevron */
.sidebar-user-chevron {
    font-size: 0.7rem;
    color: #6b7280;
    flex-shrink: 0;
    transition: transform 0.15s;
    line-height: 1;
}

.sidebar-user-btn[aria-expanded="true"] .sidebar-user-chevron {
    transform: rotate(180deg);
}

/* Popup menu — appears above the user control */
.sidebar-user-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 8px;
    right: 8px;
    background: #1a2332;
    border: 1px solid #374151;
    border-radius: 10px;
    box-shadow: 0 -6px 24px rgba(0,0,0,0.35);
    padding: 4px 0;
    z-index: 70;
    direction: rtl;
}

.user-menu-item {
    display: block;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    text-align: right;
    font-size: 0.875rem;
    font-family: inherit;
    color: #d1d5db;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.user-menu-item:hover {
    background: rgba(255,255,255,0.06);
    color: #f9fafb;
}

.user-menu-item-danger {
    color: #fca5a5;
}

.user-menu-item-danger:hover {
    background: rgba(239,68,68,0.08);
    color: #f87171;
}

.user-menu-divider {
    border: none;
    border-top: 1px solid #2d3748;
    margin: 4px 0;
}

/* Guest footer — SARGAS-WEB-4.2.1A-R2 */
.sidebar-guest-footer {
    display: flex;
    flex-direction: column;
}

/* Value message + auth */
.guest-value-block {
    padding: 10px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    direction: rtl;
}

.guest-value-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #f9fafb;
    line-height: 1.3;
}

.guest-value-desc {
    font-size: 0.72rem;
    color: #9ca3af;
    line-height: 1.45;
}

.guest-login-btn {
    display: block;
    width: 100%;
    padding: 8px 0;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    background: #4f46e5;
    color: #fff;
    transition: background 0.15s;
    box-sizing: border-box;
}

.guest-login-btn:hover {
    background: #4338ca;
    color: #fff;
}

.guest-register-link {
    font-size: 0.72rem;
    color: #9ca3af;
    text-align: center;
}

.guest-register-link a {
    color: #a5b4fc;
    text-decoration: none;
}

.guest-register-link a:hover {
    text-decoration: underline;
}

/* =============================================================
   WEB-3.7 — Meta Connect Card
   ============================================================= */

.meta-connect-card {
    align-self: flex-end;
    max-width: 380px;
    background: #f0f4ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 18px 20px;
    direction: rtl;
}

.meta-connect-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e1b4b;
    margin-bottom: 10px;
}

.meta-connect-card-body {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.65;
    margin-bottom: 16px;
}

.meta-connect-card-btn {
    display: inline-block;
    padding: 9px 20px;
    background: #4f46e5;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: background 0.15s;
    margin-bottom: 12px;
}

.meta-connect-card-btn:hover {
    background: #4338ca;
    color: #fff;
}

.meta-connect-card-note {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .meta-connect-card {
        max-width: 90%;
    }
}

/* =============================================================
   WEB-3.8 — Campaigns Chat Card
   ============================================================= */

.campaigns-chat-card {
    align-self: flex-end;
    max-width: 560px;
    width: 100%;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 18px 20px;
    /* META-APP-REVIEW: direction is no longer hardcoded here — it's set
       per-card via the native `dir` attribute (see _setCampaignsCardDirection()
       in app.js), driven by the same `lang` argument every render/update/
       restore path already threads through (appendCampaignsCard,
       updateCampaignsCard, the error card, and the loading placeholders).
       This lets English-UI cards render LTR while Hebrew-UI cards stay RTL,
       without touching any campaign data/ordering/action semantics. */
}

.campaigns-chat-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e1b4b;
    margin-bottom: 6px;
}

.campaigns-chat-card-subtitle {
    font-size: 0.82rem;
    color: #6b7280;
    margin-bottom: 14px;
}

.campaigns-chat-card-empty {
    font-size: 0.875rem;
    color: #374151;
    padding: 4px 0;
}

.campaigns-chat-card-table-wrap {
    overflow-x: auto;
}

.campaigns-chat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.campaigns-chat-table thead th {
    background: #f1f5f9;
    color: #374151;
    padding: 8px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    /* Logical value: resolves to right in the card's RTL (Hebrew) state,
       left in its LTR (English) state — follows the `dir` attribute set on
       .campaigns-chat-card, never a hardcoded physical side. */
    text-align: start;
    white-space: nowrap;
}

.campaigns-chat-table tbody td {
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    color: #111827;
    font-size: 0.85rem;
}

.campaigns-chat-table tbody tr:last-child td {
    border-bottom: none;
}

.campaigns-chat-table tbody tr:hover {
    background: #f9fafb;
}

.campaigns-badge-active {
    background: #d1fae5;
    color: #065f46;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.campaigns-badge-paused {
    background: #f3f4f6;
    color: #4b5563;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
}

.campaigns-chat-card-error-msg {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 14px;
}

.campaigns-chat-card-connect-btn {
    display: inline-block;
    padding: 8px 18px;
    background: #4f46e5;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.15s;
}

.campaigns-chat-card-connect-btn:hover {
    background: #4338ca;
    color: #fff;
}

@media (max-width: 768px) {
    .campaigns-chat-card {
        max-width: 95%;
    }
}

/* =============================================================
   WEB-3.9A — Safe Action Card
   ============================================================= */

.safe-action-card {
    align-self: flex-end;
    max-width: 480px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 18px 20px;
    direction: rtl;
}

.safe-action-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 10px;
}

.safe-action-card-recommendation {
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.65;
    margin-bottom: 12px;
}

.safe-action-card-risk {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #065f46;
    background: #d1fae5;
    padding: 3px 10px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.safe-action-card-reason {
    font-size: 0.82rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 16px;
}

.safe-action-card-actions {
    display: flex;
    gap: 10px;
    direction: rtl;
}

.safe-action-btn-confirm {
    padding: 8px 20px;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

.safe-action-btn-confirm:hover {
    background: #4338ca;
}

.safe-action-btn-cancel {
    padding: 8px 20px;
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.safe-action-btn-cancel:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}

.safe-action-card-status {
    font-size: 0.82rem;
    color: #6b7280;
    font-style: italic;
}

@media (max-width: 768px) {
    .safe-action-card {
        max-width: 95%;
    }
}

/* =============================================================
   WEB-3.10 — Business Operations Placeholder Card
   ============================================================= */

.business-placeholder-card {
    align-self: flex-end;
    max-width: 440px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 16px 20px;
    direction: rtl;
}

.business-placeholder-card-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #374151;
    margin-bottom: 8px;
}

.business-placeholder-card-body {
    font-size: 0.85rem;
    color: #4b5563;
    line-height: 1.65;
    margin-bottom: 10px;
}

.business-placeholder-card-note {
    font-size: 0.78rem;
    color: #9ca3af;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .business-placeholder-card {
        max-width: 95%;
    }
}

/* =============================================================
   WEB-3.11 — Mobile + RTL/LTR Polish
   ============================================================= */

/* 1. Input row: force LTR so + sits on the physical LEFT and שלח on the RIGHT.
      The input element keeps its own direction: rtl so Hebrew typing is unaffected. */
#workspace .chat-section .chat-input-row {
    direction: ltr;
}

/* 2. Plus menu: anchor LEFT to align with the + button now on the left.
      WEB-3.4 used right:0 when + was on the RTL-start (physical right). */
#chat-plus-menu {
    left: 0;
    right: auto;
}

/* 3. Chat log: prevent horizontal overflow from long unbreakable content */
#workspace .chat-section .chat-log {
    overflow-x: hidden;
}

/* 4. Chat cards: wrap long mixed Hebrew/English text cleanly */
.meta-connect-card,
.campaigns-chat-card,
.safe-action-card,
.business-placeholder-card {
    overflow-wrap: break-word;
    word-break: break-word;
}

@media (max-width: 768px) {
    /* 5. Neutralise the section-level padding from WEB-3.2 mobile rule.
          Each inner zone owns its own padding; stacking them gives 62px/side
          on a 390px screen (48px log + 14px section = only 266px content). */
    #workspace .chat-section {
        padding: 0;
    }

    /* 6. Chat log: reduce horizontal padding 48px → 14px on mobile */
    #workspace .chat-section .chat-log {
        padding: 16px 14px 8px;
    }

    /* 7. Cards: cap to viewport width so no card can cause horizontal overflow */
    .meta-connect-card,
    .campaigns-chat-card,
    .safe-action-card,
    .business-placeholder-card {
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    /* 8. Starter prompts: let long English product names wrap inside the chip */
    .starter-prompt {
        white-space: normal;
    }

    .starter-prompts {
        max-width: 100%;
    }

    /* 9. Safe action buttons: stack vertically on very narrow screens */
    .safe-action-card-actions {
        flex-wrap: wrap;
    }
}

/* =============================================================
   WEB-3.14 — Campaign Chat Card Action Buttons
   ============================================================= */

.campaigns-action-btn {
    padding: 4px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.12s, opacity 0.12s;
    white-space: nowrap;
}

.campaigns-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.campaigns-action-pause {
    background: #fee2e2;
    color: #991b1b;
}

.campaigns-action-pause:hover:not(:disabled) {
    background: #fecaca;
}

.campaigns-action-activate {
    background: #d1fae5;
    color: #065f46;
}

.campaigns-action-activate:hover:not(:disabled) {
    background: #a7f3d0;
}

.campaigns-action-unavailable {
    font-size: 0.78rem;
    color: #9ca3af;
}

.campaigns-show-more-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px 12px;
    background: #eef2ff;
    color: #4338ca;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    transition: background 0.12s;
}

.campaigns-show-more-btn:hover {
    background: #e0e7ff;
}

/* =============================================================
   SARGAS-WEB-4.1.5 — Guest Auth Controls + Auth-Required Card
   ============================================================= */

/* Authenticated-only containers: hidden by default so guests never see
   an empty dashboard before /api/auth/me resolves. Revealed by
   _showAuthenticatedUI() via inline style override. */
.auth-only-ui {
    display: none;
}

/* Auth-required inline chat card */
.auth-required-card {
    align-self: flex-end;
    max-width: 420px;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 10px;
    padding: 18px 20px;
    direction: rtl;
    overflow-wrap: break-word;
    word-break: break-word;
}

.auth-required-card-body {
    font-size: 0.875rem;
    color: #1e1b4b;
    line-height: 1.7;
    margin-bottom: 16px;
}

.auth-required-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    direction: rtl;
}

.auth-required-card-btn {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    background: #4f46e5;
    color: #fff;
}

.auth-required-card-btn:hover {
    background: #4338ca;
    color: #fff;
}

.auth-required-card-btn-secondary {
    background: #f3f4f6;
    color: #374151;
    border: 1px solid #d1d5db;
}

.auth-required-card-btn-secondary:hover {
    background: #e5e7eb;
    color: #111827;
}

@media (max-width: 768px) {
    .auth-required-card {
        max-width: 95%;
    }
}

/* =============================================================
   SARGAS-CHAT-1.3A — Sidebar Conversation Layout
   ============================================================= */

/* Search input wrapper */
.sidebar-search-wrap {
    padding: 0 12px 10px;
    flex-shrink: 0;
}

/* Search input — rounded, same design language as chat composer */
.sidebar-search {
    width: 100%;
    padding: 7px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    color: #d1d5db;
    font-size: 0.82rem;
    font-family: inherit;
    direction: rtl;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s, background 0.15s;
}

.sidebar-search::placeholder {
    color: #6b7280;
}

.sidebar-search:focus {
    border-color: rgba(99,102,241,0.45);
    background: rgba(255,255,255,0.09);
    box-shadow: 0 0 0 2px rgba(99,102,241,0.1);
}

/* Meta status row */
.sidebar-meta-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    direction: rtl;
    flex-shrink: 0;
}

/* Compact neutral letter icon */
.sidebar-meta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #9ca3af;
    flex-shrink: 0;
    line-height: 1;
}

.sidebar-meta-label {
    font-size: 0.875rem;
    color: #d1d5db;
    flex: 1;
}

.sidebar-meta-status {
    font-size: 0.72rem;
    color: #6b7280;
    white-space: nowrap;
}

/* Horizontal divider */
.sidebar-divider {
    margin: 4px 0;
    border: none;
    border-top: 1px solid #2d3748;
    flex-shrink: 0;
}

/* Conversation section (pinned / recent) */
.sidebar-section {
    flex-shrink: 0;
    padding: 6px 0 2px;
}

.sidebar-section-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 14px 4px;
    direction: rtl;
}

/* Conversation list — ready for future items */
.sidebar-conv-list {
    /* no extra padding; items add their own */
}

/* Empty state — muted, aligned with sidebar text direction */
.sidebar-empty-state {
    font-size: 0.8rem;
    color: #4b5563;
    padding: 4px 14px 6px;
    direction: rtl;
    line-height: 1.4;
}

/* Pushes user-control to the bottom */
.sidebar-spacer {
    flex: 1;
    min-height: 8px;
}

/* =============================================================
   SARGAS-CHAT-1.3B — Sidebar Conversation Items
   ============================================================= */

.sidebar-conv-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    padding: 7px 14px;
    background: none;
    border: none;
    cursor: pointer;
    direction: rtl;
    text-align: right;
    font-family: inherit;
    transition: background 0.12s;
    gap: 6px;
}

.sidebar-conv-item:hover {
    background: rgba(255,255,255,0.06);
}

.sidebar-conv-title {
    font-size: 0.82rem;
    color: #d1d5db;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.sidebar-conv-date {
    font-size: 0.7rem;
    color: #6b7280;
    white-space: nowrap;
    flex-shrink: 0;
}

.sidebar-conv-loading {
    height: 24px;
    margin: 4px 14px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    animation: sb-pulse 1.2s ease-in-out infinite;
}

@keyframes sb-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

.sidebar-conv-error {
    font-size: 0.78rem;
    color: #6b7280;
    padding: 4px 14px 6px;
    direction: rtl;
    font-style: italic;
}

/* Active conversation row (SARGAS-CHAT-1.4B) */
.sidebar-conv-item-active {
    background: rgba(255,255,255,0.08);
}

.sidebar-conv-item-active .sidebar-conv-title {
    color: #f9fafb;
}

.sidebar-conv-item:focus-visible {
    outline: 2px solid rgba(99,102,241,0.45);
    outline-offset: -2px;
}

/* ── SARGAS-CHAT-1.5E — Share Dialog ────────────────────────────────────────── */

.share-dialog-box {
    max-width: 480px;
    width: 90vw;
    text-align: start;
    position: relative;
    direction: rtl;
}

.share-dialog-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 10px;
    direction: rtl;
    outline: none;
}

.share-dialog-description {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 16px;
    direction: rtl;
    line-height: 1.4;
    white-space: pre-line;
}

.share-dialog-close-btn {
    position: absolute;
    top: 12px;
    left: 12px;
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #666;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}

.share-dialog-close-btn:hover {
    background: #f0f0f0;
    color: #222;
}

.share-dialog-close-btn:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.share-dialog-url-row {
    margin-bottom: 16px;
}

.share-dialog-url-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.82rem;
    color: #374151;
    background: #f9fafb;
    direction: ltr;
    text-align: left;
    word-break: break-all;
    overflow-x: auto;
    box-sizing: border-box;
    cursor: text;
}

.share-dialog-url-input:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.share-dialog-status {
    font-size: 0.85rem;
    color: #2d6a4f;
    text-align: center;
    margin-top: 8px;
    direction: rtl;
}

.share-dialog-shared-at {
    font-size: 0.82rem;
    color: #6b7280;
    margin: 8px 0 0 0;
    direction: rtl;
    text-align: start;
}

.share-dialog-error {
    font-size: 0.85rem;
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    direction: rtl;
}

.share-dialog-btn-primary {
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    direction: rtl;
}

.share-dialog-btn-primary:hover:not(:disabled) {
    background: #4338ca;
}

.share-dialog-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.share-dialog-btn-primary:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.share-dialog-btn-secondary {
    background: #e5e7eb;
    color: #374151;
    border: none;
    border-radius: 6px;
    padding: 9px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    direction: rtl;
}

.share-dialog-btn-secondary:hover:not(:disabled) {
    background: #d1d5db;
}

.share-dialog-btn-secondary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.share-dialog-btn-secondary:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.share-dialog-btn-danger {
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 20px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    direction: rtl;
}

.share-dialog-btn-danger:hover:not(:disabled) {
    background: #b91c1c;
}

.share-dialog-btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.share-dialog-btn-danger:focus-visible {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

@media (max-width: 480px) {
    .share-dialog-box {
        width: 90vw;
        max-width: 90vw;
        padding: 20px 16px;
    }

    .share-dialog-url-input {
        font-size: 0.75rem;
    }
}

/* =============================================================
   SARGAS-CHAT-1.5F — Conversation Actions Menu
   ============================================================= */

/* Row wrapper: flex so nav-button and trigger sit side by side */
.sidebar-conv-row {
    display: flex;
    align-items: stretch;
    width: 100%;
    position: relative;
}

/* Nav button inside the row: take remaining width, no forced full-width */
.sidebar-conv-row .sidebar-conv-item {
    flex: 1;
    width: auto;
    min-width: 0;
}

/* Three-dot trigger: hidden by default, shown on row-hover (desktop) */
.sidebar-conv-menu-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    border-radius: 4px;
    visibility: hidden;
    transition: color 0.12s, background 0.12s;
}

.sidebar-conv-row:hover .sidebar-conv-menu-trigger,
.sidebar-conv-menu-trigger:focus-visible {
    visibility: visible;
}

.sidebar-conv-menu-trigger:hover {
    color: #f9fafb;
    background: rgba(255,255,255,0.1);
}

.sidebar-conv-menu-trigger:focus-visible {
    outline: 2px solid rgba(99,102,241,0.45);
    outline-offset: -2px;
}

/* Mobile: always show trigger */
@media (max-width: 768px) {
    .sidebar-conv-menu-trigger {
        visibility: visible;
    }
}

/* Conversation actions dropdown menu (single instance, body-level) */
#conv-action-menu {
    position: fixed;
    z-index: 65;
    background: #1a2332;
    border: 1px solid #374151;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.4);
    padding: 4px 0;
    min-width: 160px;
    direction: rtl;
}

.conv-action-menu-item {
    display: block;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    text-align: right;
    font-size: 0.875rem;
    font-family: inherit;
    color: #d1d5db;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.conv-action-menu-item:hover,
.conv-action-menu-item:focus-visible {
    background: rgba(255,255,255,0.07);
    color: #f9fafb;
    outline: none;
}

.conv-action-menu-item-danger {
    color: #fca5a5;
}

.conv-action-menu-item-danger:hover,
.conv-action-menu-item-danger:focus-visible {
    background: rgba(239,68,68,0.1);
    color: #f87171;
}

.conv-action-menu-divider {
    border: none;
    border-top: 1px solid #2d3748;
    margin: 4px 0;
}

/* Inline rename input inside the sidebar row */
.sidebar-conv-rename-input {
    flex: 1;
    padding: 5px 10px;
    font-size: 0.82rem;
    font-family: inherit;
    direction: rtl;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(99,102,241,0.5);
    border-radius: 4px;
    color: #f9fafb;
    outline: none;
    box-sizing: border-box;
}

.sidebar-conv-rename-input:focus {
    border-color: rgba(99,102,241,0.8);
    background: rgba(255,255,255,0.11);
}

/* Lightweight toast for transient notifications (e.g. "יגיע בקרוב") */
.conv-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: #1f2937;
    color: #f9fafb;
    border: 1px solid #374151;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 0.875rem;
    font-family: inherit;
    direction: rtl;
    z-index: 80;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
    white-space: nowrap;
}

.conv-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── SARGAS-CHAT-1.5F-D — Archive Panel ─────────────────────────────────────── */

.sidebar-archive-nav {
    padding: 4px 10px 2px;
}

.sidebar-archive-open {
    width: 100%;
    padding: 7px 10px;
    background: none;
    border: none;
    border-radius: 6px;
    color: #9ca3af;
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    text-align: right;
    direction: rtl;
    transition: background 0.15s, color 0.15s;
}

.sidebar-archive-open:hover {
    background: rgba(255,255,255,0.06);
    color: #d1d5db;
}

.sidebar-archive-open:focus-visible {
    outline: 2px solid rgba(99,102,241,0.5);
    outline-offset: 2px;
}

.archive-panel-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 90;
    direction: rtl;
}

.archive-panel-box {
    background: #fff;
    border-radius: 12px;
    width: min(480px, 94vw);
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    overflow: hidden;
}

.archive-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 10px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.archive-panel-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0;
}

.archive-panel-close-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    color: #666;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}

.archive-panel-close-btn:hover {
    background: #f0f0f0;
    color: #222;
}

.archive-panel-close-btn:focus-visible {
    outline: 2px solid #6366f1;
    outline-offset: 2px;
}

.archive-panel-loading,
.archive-panel-error,
.archive-panel-empty {
    padding: 20px 16px;
    font-size: 0.9rem;
    color: #6b7280;
    text-align: center;
    direction: rtl;
}

.archive-panel-error {
    color: #b91c1c;
}

.archive-panel-list {
    overflow-y: auto;
    flex: 1;
    padding: 6px 0;
}

.archive-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #f3f4f6;
    direction: rtl;
}

.archive-row:last-child {
    border-bottom: none;
}

.archive-row-title {
    flex: 1;
    font-size: 0.88rem;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    direction: rtl;
}

.archive-row-restore-btn {
    flex-shrink: 0;
    padding: 4px 12px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 0.82rem;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
}

.archive-row-restore-btn:hover:not(:disabled) {
    background: #4f46e5;
}

.archive-row-restore-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =============================================================
   SARGAS-I18N-2 — Settings dialog
   ============================================================= */

.settings-dialog-box {
    max-width: 380px;
    width: 100%;
    position: relative;
    padding: 28px 28px 24px;
}

.settings-dialog-close-btn {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    background: transparent;
    border: none;
    color: #9ca3af;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    line-height: 1;
}

.settings-dialog-close-btn:hover {
    color: #f3f4f6;
    background: rgba(255, 255, 255, 0.07);
}

.settings-dialog-title {
    margin: 0 0 20px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #f9fafb;
}

.settings-section {
    margin-bottom: 16px;
}

.settings-section-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

.settings-lang-options {
    display: flex;
    gap: 10px;
}

.settings-lang-option {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    padding: 7px 14px;
    border-radius: 6px;
    border: 1px solid #374151;
    background: #1f2937;
    color: #d1d5db;
    font-size: 0.9rem;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}

.settings-lang-option:hover {
    border-color: #6366f1;
    background: #1e1e3a;
}

.settings-lang-radio:checked + span {
    color: #a5b4fc;
    font-weight: 600;
}

.settings-lang-option:has(.settings-lang-radio:checked) {
    border-color: #6366f1;
    background: #1e1e3a;
}

.settings-lang-radio {
    accent-color: #6366f1;
}

/* Guest settings button */
.guest-settings-row {
    margin-top: 10px;
}

.guest-settings-btn {
    background: transparent;
    border: 1px solid #374151;
    border-radius: 4px;
    color: #9ca3af;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
    padding: 5px 10px;
    transition: color 0.15s, border-color 0.15s;
}

.guest-settings-btn:hover {
    color: #d1d5db;
    border-color: #6b7280;
}

/* =============================================================
   SARGAS-I18N-2 — RTL / LTR direction overrides (expanded)
   These selectors override direction: rtl rules for LTR (English).
   ============================================================= */

html[dir="ltr"] body                                              { direction: ltr; }
html[dir="ltr"] #workspace                                        { direction: ltr; }
html[dir="ltr"] #workspace .chat-section .chat-input-row input   { direction: ltr; }
html[dir="ltr"] .sidebar-new-chat-btn                            { direction: ltr; text-align: left; }
html[dir="ltr"] .sidebar-archive-open                            { direction: ltr; text-align: left; }

/* Modals */
html[dir="ltr"] .modal-box                                        { direction: ltr; text-align: start; }

/* Share dialog close button moves to right in LTR */
html[dir="ltr"] .share-dialog-close-btn                          { left: auto; right: 12px; }

/* Archive panel */
html[dir="ltr"] .archive-panel-overlay                           { direction: ltr; }
html[dir="ltr"] .archive-panel-box                               { direction: ltr; text-align: left; }

/* User menu */
html[dir="ltr"] .sidebar-user-menu                               { direction: ltr; }
html[dir="ltr"] .user-menu-item                                  { direction: ltr; text-align: left; }

/* Conversation action menu */
html[dir="ltr"] #conv-action-menu                                { direction: ltr; }
html[dir="ltr"] .conv-action-menu-item                           { direction: ltr; text-align: left; }

/* Sidebar elements */
html[dir="ltr"] .sidebar-section-label                           { direction: ltr; text-align: left; }
html[dir="ltr"] .sidebar-search                                  { direction: ltr; text-align: left; }
html[dir="ltr"] .sidebar-meta-row                                { direction: ltr; }
html[dir="ltr"] .sidebar-conv-item                               { direction: ltr; text-align: left; }
html[dir="ltr"] .sidebar-conv-error                              { direction: ltr; text-align: left; }
html[dir="ltr"] .sidebar-empty-state                             { direction: ltr; text-align: left; }

/* Guest footer */
html[dir="ltr"] .guest-value-block                               { direction: ltr; text-align: left; }

/* Plus menu */
html[dir="ltr"] #chat-plus-menu                                  { direction: ltr; }
html[dir="ltr"] .plus-menu-item                                  { direction: ltr; text-align: left; }

/* Toast */
html[dir="ltr"] .conv-toast                                      { direction: ltr; }

/* Rename input */
html[dir="ltr"] .sidebar-conv-rename-input                       { direction: ltr; }