/* ═══════════════════════════════════════════
   Nomos AI - Legal Assistant Stylesheet
   Professional Slate Design + Full Functionality
   Version 5.0
   ═══════════════════════════════════════════ */

/* ───────────────────────────────────────────
   CSS Variables - Design System
   ─────────────────────────────────────────── */
:root {
    /* Palette: Modern Legal Tech (Deep Slate & Royal Indigo) */
    --color-bg: #F8FAFC;
    --color-surface: #FFFFFF;
    --color-surface-hover: #F1F5F9;
    
    --color-primary: #0F172A; /* Slate 900 */
    --color-primary-hover: #1E293B; /* Slate 800 */
    
    --color-accent: #b49b67;        /* Gold - Legal Tech */
    --color-accent-hover: #9a8455;  /* Gold darker */
    --color-accent-light: #f5f2eb; /* Gold light background */
    
    --color-text-main: #0F172A;
    --color-text-secondary: #64748B;
    --color-text-tertiary: #94A3B8;
    
    --color-border: #E2E8F0;
    --color-divider: #F1F5F9;

    --color-danger: #EF4444;
    --color-danger-hover: #DC2626;
    --color-success: #10B981;
    --color-success-hover: #059669;
    --color-warning: #F59E0B;

    /* Spacing & Sizing */
    --header-height: 60px;
    --sidebar-width: 280px;
    
    --spacing-1: 4px;
    --spacing-2: 8px;
    --spacing-3: 12px;
    --spacing-4: 16px;
    --spacing-5: 20px;
    --spacing-6: 24px;
    --spacing-8: 32px;
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-float: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
/* Typography */
  --font-sans: 'Open Sans', 'Assistant', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --text-xs:   clamp(11px, 0.75vw, 13px);
  --text-sm:   clamp(13px, 0.9vw, 15px);
  --text-base: clamp(15px, 1.1vw, 17px);
  --text-lg:   clamp(18px, 1.3vw, 21px);
  --text-xl:   clamp(21px, 1.6vw, 25px);
  --text-2xl:  clamp(25px, 1.9vw, 32px);
    
    /* Transitions */
    --transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ───────────────────────────────────────────
   Reset & Base Styles
   ─────────────────────────────────────────── */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100vh !important; 
    overflow: hidden;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--color-text-main);
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    outline: none;
}

/* ───────────────────────────────────────────
   Keyboard focus baseline (WCAG 2.4.7 / ת"י 5568)
   `outline: none` above kills the indicator for mouse users by
   design — :focus-visible restores it for keyboard navigation
   only, so pointer interaction looks exactly as before.
   ─────────────────────────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.toggle-input:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

input, textarea {
    font-family: inherit;
    outline: none;
}

a {
    text-decoration: none;
    color: inherit;
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Icons */
svg {
    vertical-align: middle;
}

.icon {
    width: 16px;
    height: 16px;
    stroke-width: 1.8;
}

.icon-sm {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* ═══════════════════════════════════════════
   Overlay
   ═══════════════════════════════════════════ */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
    z-index: 90;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
}

.overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* ═══════════════════════════════════════════
   Sidebar
   ═══════════════════════════════════════════ */
.sidebar {
    position: fixed;
    top: 0;
    right: -280px;
    width: var(--sidebar-width);
    height: 100%;
    background: var(--color-surface);
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.1);
    z-index: 100;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.sidebar.open {
    right: 0;
    /* Wider than the legacy 70%, still capped on popped-out panes */
    width: min(88%, 360px);
}

.sidebar-header {
    padding: var(--spacing-5);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-header h3 {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-main);
}

.close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    transition: all var(--transition);
}

.close-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-primary);
}

.sidebar-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-5);
}

.sidebar-section {
    margin-bottom: var(--spacing-6);
}

.section-title {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--spacing-3) 0;
}

.setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-3);
    background: var(--color-surface-hover);
    border-radius: var(--radius-sm);
    margin-bottom: var(--spacing-2);
    cursor: pointer;
    font-size: var(--text-sm);
    transition: background var(--transition);
}

.setting-row:hover {
    background: var(--color-divider);
}

.toggle-input {
    accent-color: var(--color-accent);
    cursor: pointer;
}

/* Two-line sidebar nav-row: label + small status line stacked inside the
   row (same pattern as the popover's mode-item title+desc). The container
   takes the label's flex:1 slot; the toggle stays vertically centered. */
.nav-row-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.nav-row-text .nav-row-label { flex: none; }
.nav-row-sub {
    font-size: 11px;
    line-height: 1.3;
    color: var(--color-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav-row-sub.ok { color: var(--color-success-hover); }
.nav-row-sub.missing {
    color: #B45309;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sidebar-footer {
    margin-top: auto;
    padding: var(--spacing-5);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    border-top: 1px solid var(--color-border);
}

/* ═══════════════════════════════════════════
   Auth Screen
   ═══════════════════════════════════════════ */
.auth-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ffffff 0%, #f6f5f2 100%);
    z-index: 200;
    padding: var(--spacing-6);
}

.auth-container {
    width: 100%;
    max-width: 360px;
    text-align: center;
}

.auth-logo {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-5);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.auth-title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 var(--spacing-2) 0;
}

.auth-subtitle {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin: 0 0 var(--spacing-6) 0;
}

.auth-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    margin-bottom: var(--spacing-5);
}

.divider {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.auth-footer {
    margin-top: var(--spacing-5);
}

.link {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    transition: color var(--transition);
}

.link:hover {
    color: var(--color-accent);
}

/* ═══════════════════════════════════════════
   App Layout
   ═══════════════════════════════════════════ */
.app-wrapper {
    height: 100vh !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.app-header {
    height: var(--header-height);
    background: var(--color-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--spacing-4);
    flex-shrink: 0;
    z-index: 20;
}

.brand {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
}

.brand-logo {
    width: 32px;
    height: 32px;
    background: #f8fafc;
    color: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.brand-name {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--color-primary);
    display:none;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-1);
}

.header-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    transition: all var(--transition);
}

.header-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-primary);
}

/* ═══════════════════════════════════════════
   Main Content & Chat Container
   ═══════════════════════════════════════════ */
.main-content {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important; /* מאפשר לאזור להתכווץ */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#chat-container.chat-main {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

.chat-main {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-5);
}

/* Welcome State */
.welcome-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.welcome-icon {
    width: 64px;
    height: 64px;
    background: var(--color-accent-light);
    color: var(--color-accent);
    border-radius: var(--radius-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--spacing-5);
}

.welcome-title {
    font-size: var(--text-xl);
    font-weight: 700;
    margin: 0 0 var(--spacing-2) 0;
    color: var(--color-text-main);
}

.welcome-text {
    color: var(--color-text-secondary);
    max-width: 320px;
    margin: 0 0 var(--spacing-6) 0;
    font-size: var(--text-base);
}

/* Suggestion Chips */
.suggestions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
    width: 100%;
    max-width: 500px;
}

.suggestion-chip {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: var(--spacing-4);
    border-radius: var(--radius-md);
    text-align: right;
    cursor: pointer;
    transition: all var(--transition);
    display: flex;
    gap: var(--spacing-3);
    align-items: flex-start;
    box-shadow: var(--shadow-sm);
}

.suggestion-chip:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.suggestion-chip:active {
    transform: translateY(0);
}

.chip-emoji {
    font-size: 20px;
    line-height: 1;
}

.chip-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.chip-title {
    font-weight: 600;
    font-size: var(--text-sm);
    color: var(--color-primary);
}

.chip-desc {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

/* ═══════════════════════════════════════════
   Chat Messages
   ═══════════════════════════════════════════ */
.chat-messages {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-1);
    width: 100%;
}

.message {
    display: flex;
    max-width: 100%;
    animation: messageSlideIn 0.3s ease-out forwards;
    opacity: 0;
    transform: translateY(10px);
}

@keyframes messageSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.message.user {
    flex-direction: row-reverse;
}


.message-content-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}
.message-bubble {
    padding: var(--spacing-3) var(--spacing-4);
    padding-bottom: 2px;
    border-radius: var(--radius-lg);
    max-width: 100%;
    width: fit-content;
    line-height: 1.6;
    font-size: var(--text-base);
}

.message.ai .message-bubble {
    color: var(--color-text-main);
}

.message.user .message-bubble {
background: rgba(154, 132, 85, 0.05);
color: rgb(10, 10, 10);
border-top-left-radius: 4px;
padding: var(--spacing-3) var(--spacing-4);
}

.message-bubble p {
    margin: 0 0 var(--spacing-2) 0;
    line-height: 1.4;
}

.message-bubble p:last-child {
    margin: 0;
}

.message-bubble strong {
    font-weight: 700;
}

.message-bubble ul {
    padding-right: var(--spacing-5);
    margin: var(--spacing-2) 0;
}

.message-bubble li {
    margin-bottom: var(--spacing-1);
}

/* ============================================
   v6.10 PR-20 — AI message copy button
   ============================================
   Icon-only control under each AI message. No text label, no
   icon swap — just the clipboard icon, a native hover tooltip,
   and a subtle background flash on copy. Indented so the icon
   lines up with the bubble's text, not its outer edge. */

.msg-toolbar {
    display: flex;
    align-items: center;
    margin-top: 1px;
    align-self: flex-start;
    /* The bubble has 16px (--spacing-4) of horizontal padding, so
       its TEXT starts 16px in from the bubble edge. The button has
       a 4px inset around its icon (26px box, 18px icon). 12px + 4px
       = 16px → the icon's edge lands exactly under the text. */
    margin-inline-start: var(--spacing-3);
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.msg-toolbar:not(.is-hidden) {
    opacity: 1;
    transform: translateY(0);
}

.msg-toolbar.is-hidden {
    pointer-events: none;
}

.msg-copy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    /* Dark grey at rest — clearly visible, reads as "related to
       this message" rather than a faint afterthought. */
    color: #475569;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.msg-copy-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-main);
}

.msg-copy-btn:active {
    transform: scale(0.94);
}

.msg-copy-btn:focus-visible {
    outline: 1px solid var(--color-border);
    outline-offset: 1px;
}

/* ── Copy feedback — icon swap ───────────────────────────────
   Default = clipboard, done = check. .is-copied flips exactly
   ONE icon at a time. Both icons monochrome (currentColor) — no
   foreign green.

   ⚠️ Specificity note: every rule here is prefixed with
   `.msg-copy-btn` so it scores (0,2,0) — two classes. An earlier
   bug used bare `.msg-copy-icon-done` (0,1,0), which lost to a
   generic `.msg-copy-btn svg { display:block }` (0,1,1) rule and
   left BOTH icons visible. That generic svg rule is now gone and
   these rules are all class-prefixed, so the cascade is
   unambiguous. */
.msg-copy-btn .msg-copy-icon-default { display: block; }
.msg-copy-btn .msg-copy-icon-done    { display: none; }

.msg-copy-btn.is-copied .msg-copy-icon-default { display: none; }
.msg-copy-btn.is-copied .msg-copy-icon-done    { display: block; }

/* Insert-table-to-Word button — mirrors .msg-copy-btn / .msg-download-btn.
   Hidden by default; revealed only when the answer contains a table. */
.msg-insert-table-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: #475569;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}
.msg-insert-table-btn:hover { background: var(--color-surface-hover); color: var(--color-text-main); }
.msg-insert-table-btn:active { transform: scale(0.94); }
.msg-insert-table-btn:focus-visible { outline: 1px solid var(--color-border); outline-offset: 1px; }
.msg-insert-table-btn:disabled { opacity: .5; cursor: default; }
.msg-insert-table-btn.is-hidden { display: none; }

/* Tooltip: the button carries data-tooltip="העתק", which is
   picked up by the shared [data-tooltip] tooltip system defined
   further down this file (the dark slate pill that appears above
   the element on hover). No per-button tooltip CSS here — one
   tooltip system, no conflicts. */

/* ── Download button + export menu ──────────────────────────
   Sits next to the copy button in .msg-toolbar. The button
   mirrors .msg-copy-btn; clicking it opens a small floating
   menu (.msg-export-menu) with Word / PDF download options.
   The menu is modeled on the timeline's .tl-export-menu but
   uses the global design tokens, and is RTL-anchored. */
.msg-export-dropdown {
    position: relative;
    display: inline-flex;
}

.msg-download-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    background: transparent;
    color: #475569;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.msg-download-btn:hover {
    background: var(--color-surface-hover);
    color: var(--color-text-main);
}

.msg-download-btn:active {
    transform: scale(0.94);
}

.msg-download-btn:focus-visible {
    outline: 1px solid var(--color-border);
    outline-offset: 1px;
}

.msg-download-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.msg-download-btn .msg-download-icon {
    display: block;
}

.msg-export-menu {
    position: absolute;
    bottom: calc(100% + 6px);
    inset-inline-start: 0;
    min-width: 168px;
    padding: 6px;
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
}

.msg-export-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.msg-export-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-text-main);
    cursor: pointer;
    text-align: start;
    transition: background 120ms ease;
}

.msg-export-option:hover {
    background: var(--color-surface-hover);
}

.msg-export-option svg {
    flex-shrink: 0;
    color: var(--color-primary, #475569);
}

/* Typing Indicator */
.typing-indicator {
    display: flex;
    gap: var(--spacing-3);
    align-items: flex-start;
}

.typing-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.typing-bubble {
    padding: var(--spacing-2) var(--spacing-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    border-top-right-radius: 4px;
    box-shadow: var(--shadow-sm);
    width: fit-content;
}

.typing-dots {
    display: flex;
    gap: 4px;
}

.dot {
    width: 6px;
    height: 6px;
    background: var(--color-text-tertiary);
    border-radius: 50%;
    animation: bounce 1.4s infinite ease-in-out;
}

.dot:nth-child(1) {
    animation-delay: -0.32s;
}

.dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes bounce {
    0%, 80%, 100% {
        transform: scale(0);
    }
    40% {
        transform: scale(1);
    }
}

/* ============================================
   Changes Preview - Legal Tech Theme
   ============================================ */

/* מיכל ראשי */
.changes-preview-modern {
margin-top: 16px;
border-radius: 8px;
overflow: hidden;
max-height: 500px;
display: flex;
flex-direction: column;
direction: rtl;
font-family: var(--ph-font);
border: 1px solid #cdced0;
background: #f9f9f9;
}

/* כרטיס שהוחל / נדחה / הוחלף בהנחיה חדשה — מעומעם כדי לסמן שכבר בוצע */
.changes-preview-modern.op-applied,
.changes-preview-modern.op-rejected,
.changes-preview-modern.op-superseded {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

/* כרטיס מוחלף (הנחיה חדשה החליפה אותו) כבר לא ניתן לאישור — חוסמים את
   כפתורי האישור/דחייה/עריכה כדי שהעמעום לא יטעה. ניווט ונימוק נשארים לחיצים. */
.changes-preview-modern.op-superseded .change-actions {
    pointer-events: none;
}

/* כפתורי "החל הכל"/"התעלם מהכל" יושבים אחרי הכרטיס באותו מיכל — מעמעמים
   וחוסמים גם אותם, כדי שבלוק מוחלף יהיה אינרטי לחלוטין. */
.changes-preview-modern.op-superseded ~ .bulk-actions-footer {
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* נימוק מתקפל בתוך הכרטיס — מוזן מהסיכום לפי אינדקס */
.op-reasoning {
    margin: 2px 12px 12px;
}
.op-reasoning-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 500;
    color: #94A3B8;
    transition: background 0.15s ease, color 0.15s ease;
}
.op-reasoning-toggle:hover {
    background: #F1F5F9;
    color: #475569;
}
.op-reasoning-chevron {
    transition: transform 0.15s ease;
}
.op-reasoning-toggle.open .op-reasoning-chevron {
    transform: rotate(180deg);
}
.op-reasoning-body {
    margin-top: 6px;
    padding: 8px 10px;
    background: #F8FAFC;
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.6;
    color: #475569;
}

/* מצב עריכה: תווית קצרה מעל תיבת הטקסט הנערך */
.op-edit-label {
    margin: 4px 12px 4px;
    font-size: 10.5px;
    font-weight: 600;
    color: #94A3B8;
}

/* כפתור ניווט בכותרת — עדין, ללא מסגרת, נדחף לקצה השמאלי */
.btn-nav-header {
    margin-inline-start: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 500;
    color: #94A3B8;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}
.btn-nav-header:hover {
    background: #F1F5F9;
    color: #475569;
}
.btn-nav-header svg {
    width: 14px;
    height: 14px;
}

/* כפתור ביטול עריכה — משני ועדין */
.btn-cancel-edit {
    color: #94A3B8;
}
.btn-cancel-edit:hover {
    background: #F1F5F9;
    color: #475569;
}

/* תגית מיקום (פסקה/סעיף) */
.location-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    margin: 12px 16px 4px;
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ph-text-sec);
    letter-spacing: 0.02em;
    width: fit-content;
}

/* תיאור סיכון */
.risk-description {
    margin: 8px 16px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    border-left: 3px solid transparent;
}

.risk-high {
    background: #fff5f5;
    border-left-color: var(--ph-error);
    color: #742a2a;
}

.risk-medium {
    background: #fffaf0;
    border-left-color: #dd6b20;
    color: #7b341e;
}

.risk-low {
    background: #f0fff4;
    border-left-color: #38a169;
    color: #22543d;
}

/* ============================================
   Diff / Clean Text Area
   ============================================ */

.inline-diff-container {
    padding: 10px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-bottom:2px;
}

.diff-header {
    display: none;
}

.inline-diff {
    font-size: 13px;
    line-height: 1.8;
    color: var(--ph-text);
    padding: 12px;
    padding-bottom: 2px;
    border: none;
    border-radius: 6px;
}

.diff-bold {
    font-weight: 700;
}

.diff-delete {
    background: rgba(197, 48, 48, 0.08);
    color: var(--ph-error);
    text-decoration: line-through;
    padding: 0 2px;
    border-radius: 2px;
}

.diff-insert {
color: rgb(0, 124, 254);
padding: 0px;
border-radius: 2px;
font-weight: 600;
text-decoration: none;
text-decoration: underline;
}

.diff-truncated {
    color: var(--ph-text-muted);
    font-style: italic;
    font-size: 12px;
}

/* תצוגת טקסט נקי (ללא diff) */
.clean-text-view {
    display: none;
    font-size: 13px;
    line-height: 1.8;
    color: var(--ph-text);
    padding: 12px;
    border-radius: 6px;
}

/* כשה-toggle פעיל: הסתר diff, הצג clean */
.inline-diff-container.show-clean .inline-diff {
    display: none;
}

.inline-diff-container.show-clean .clean-text-view {
    display: block;
}

/* ============================================
   Card Toolbar (Inside Card)
   ============================================ */

.change-actions {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 0 0 8px 8px;
}

/* כפתור בסיסי */
.btn-action {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 10px;
    font-size: 11.5px;
    font-weight: 500;
    border-radius: 5px;
    background: transparent;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ph-font);
    color: var(--ph-text-sec);
}

.btn-action svg {
    width: 13px;
    height: 13px;
    stroke-width: 2;
}

/* --- Toggle View (diff ↔ clean) --- */
.btn-toggle-view {
    color: var(--ph-text-muted);
    margin-inline-end: auto; /* דוחף אותו לצד ימין (RTL) */
}

.btn-toggle-view:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--ph-text);
}

.btn-toggle-view.active {
    color: var(--ph-accent);
    background: rgba(180, 155, 103, 0.08);
}

/* --- Navigate --- */
.btn-go-to {
    color: var(--ph-text-muted);
}

.btn-go-to:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--ph-text);
}

/* --- Reject --- */
.btn-ignore {
    color: var(--ph-text-sec);
}

.btn-ignore:hover {
    background: #fff5f5;
    color: var(--ph-error);
}

/* --- Accept (Primary) --- */
.btn-accept {
    color: #7b7b7b;
    border-radius: 20px;
}

.btn-accept:hover {
background: #f5f2eb;
color: #1d1d20;
}

/* ============================================
   Status Messages (Post-Action)
   ============================================ */

.change-success,
.change-error,
.change-rejected,
.change-approved {
    display: none;
    align-items: center;
    justify-content: start;
    gap: 8px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 0 0 8px 8px;
}

.change-success, .change-approved {
color: #64748b;
}

.change-rejected {
    color: var(--ph-text-muted);
}

.change-error {
    background: #fff5f5;
    color: var(--ph-error);
}

/* ============================================
   Bulk Actions (Footer)
   ============================================ */

.multi-paragraph-container {
    display: flex;
    flex-direction: column;
}

.bulk-actions-footer {
    display: flex;
    direction: rtl;
    justify-content: flex-start;
    gap: 4px;
    padding: 8px 14px 12px;
    margin-top: 6px;
}

/* Minimal text-only actions — icons hidden for a delicate, airy footer */
.bulk-actions-footer svg {
    display: none;
}

.btn-accept-all {
    flex: 0 0 auto;
    height: auto;
    background: transparent;
    color: #1F2937;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: -0.01em;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.16s ease;
    -webkit-font-smoothing: antialiased;
}

.btn-accept-all:hover {
    background: #F6F7F8;
    border-color: #D1D5DB;
}

.btn-accept-all:active {
    background: #F1F2F4;
}

.btn-ignore-all {
    flex: 0 0 auto;
    height: auto;
    background: transparent;
    color: #9CA3AF;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: -0.01em;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 8px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    cursor: pointer;
    font-family: var(--font-sans);
    transition: background 0.16s ease, color 0.16s ease;
    -webkit-font-smoothing: antialiased;
}

.btn-ignore-all:hover {
    background: #F6F7F8;
    color: #4B5563;
}

.btn-ignore-all:active {
    color: #4B5563;
}

/* ═══════════════════════════════════════════
   Input Area
   ═══════════════════════════════════════════ */
.input-wrapper {
    flex: 0 0 auto !important;
    padding: 12px 16px 8px;
    z-index: 20;
    overflow: visible;
}

.input-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    overflow: visible;
    transition: all 0.2s ease;
    position: relative;
}

.input-card:focus-within {
    border-color: #ccc;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

/* Drag & Drop State */
.input-card.drag-over {
    border-color: var(--color-accent);
    background: #faf8f3;
    box-shadow: 0 0 0 3px rgba(180, 155, 103, 0.15);
}

.input-card.drag-over::after {
    content: 'שחרר קובץ כאן';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-accent);
    z-index: 10;
    pointer-events: none;
}

/* Textarea */
.chat-input {
    width: 100%;
    border: none;
    background: transparent;
    padding: 14px 16px 8px;
    resize: none;
    min-height: 48px;
    max-height: 160px;
    font-size: 14px;
    line-height: 1.6;
    color: #222;
    font-family: 'Heebo', sans-serif;
    box-sizing: border-box;
    display: block;
}

.chat-input::placeholder {
    color: #bbb;
    font-size: 13.5px;
}

.chat-input:focus {
    outline: none;
}

/* Toolbar (bottom of card) */
.input-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
}

.toolbar-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* ═══════════════════════════════════════════
   Unified Toolbar Buttons (input area)
   All toolbar buttons share the same DNA:
   30x30, transparent, gray icon, lift on hover.
   ═══════════════════════════════════════════ */
.toolbar-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50px;
    color: #666666;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.toolbar-btn:not(.active):hover {
    background-color: #fafafa;
    color: #111111;
    border-color: #e5e5e5;
}

.toolbar-btn.active {
    background-color: #f5f2eb;
    color: #8a7340;
    border-color: #d4c9a8;
    box-shadow: 0 2px 4px rgba(138, 115, 64, 0.1);
}

.toolbar-btn.active:hover {
    background-color: #ebe5d5;
    border-color: #c7b990;
}

.toolbar-btn:active {
    transform: scale(0.95);
}

.toolbar-btn:focus-visible {
    outline: 2px solid #b49b67;
    outline-offset: 1px;
}

.toolbar-btn svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

/* Beta badge — small, subtle, sits at top-right corner */
.toolbar-btn .kb-beta-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    padding: 1px 5px;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.4;
    color: #8a7340;
    background: #fffdf7;
    border: 1px solid #e5dcc9;
    border-radius: 999px;
    pointer-events: none;
}

.toolbar-btn.active .kb-beta-badge {
    background: #fff;
    border-color: #d4c9a8;
}

/* Send Button */
.send-btn {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: #ccc;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.send-btn:disabled {
    color: #ddd;
    cursor: not-allowed;
}

.send-btn:not(:disabled) {
    color: #333;
}

.send-btn:not(:disabled):hover {
    background: #f0f0f0;
    color: #111;
}

/* Input Hint */
.input-hint {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    padding: 0 4px;
    font-size: 10px;
    color: #ccc;
}

.char-count {
    font-weight: 500;
}

/* Expanded State */
.input-card.expanded {
    position: fixed;
    bottom: 20px;
    left: 20px;
    right: 20px;
    z-index: 1001;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
}

.input-card.expanded .chat-input {
    min-height: 180px;
    max-height: 50vh;
}

.input-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(2px);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.input-backdrop.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Context bar - keep for backward compat but hidden */
.context-bar {
    display: none;
}

.toolbar-end {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ═══════════════════════════════════════════
   🆕 v6.10 PR-16 — Reasoning-effort picker
   ═══════════════════════════════════════════
   Three-level selector that sits inline next to the send button.
   Click the button to open a small dropdown with Instant / Thinking
   / Extra Thinking. Selection feeds the server's reasoning_effort
   parameter. Labels stay English in every locale (intentional). */

.reasoning-picker-wrap {
    position: relative;
    display: inline-flex;
}

.reasoning-picker-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    background: transparent;
    border-radius: 14px;
    color: #4b5563;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    /* English label inside an RTL parent — force ltr so the chevron
       stays on the right of the word, not on the right of the box. */
    direction: ltr;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.reasoning-picker-btn:hover {
    background: rgba(180, 155, 103, 0.08);
    border-color: rgba(180, 155, 103, 0.55);
}
.reasoning-picker-btn[aria-expanded="true"] {
    background: rgba(180, 155, 103, 0.12);
    border-color: rgba(180, 155, 103, 0.65);
}
.reasoning-picker-chevron {
    flex-shrink: 0;
    color: #9ca3af;
    transition: transform 0.15s ease;
}
.reasoning-picker-btn[aria-expanded="true"] .reasoning-picker-chevron {
    transform: rotate(180deg);
}

.reasoning-picker-popover {
    /* !important on the layout-critical fields. The taskpane CSS has a
       few flex-row toolbars upstream that can leak inheritance into
       absolutely-positioned children in some browsers; locking these
       down is cheap and removes a class of rendering bugs we already
       saw once (items rendering inline next to the button instead of
       as a stacked dropdown). */
    position: absolute !important;
    bottom: calc(100% + 6px);
    /* Anchor to the picker button. In RTL the button is on the right
       of toolbar-end, so we anchor the popover to its right edge too.
       inset-inline-end:0 works in both LTR and RTL. */
    inset-inline-end: 0;
    /* Wider min-width so the Hebrew description doesn't wrap mid-word
       on narrow add-in panes. The descriptions are intentionally short
       enough to fit on one line at 260px. */
    min-width: 260px;
    max-width: 320px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
    padding: 4px;
    z-index: 1000;
    /* display: block (NOT flex). Each item is its own block-level
       button below; we don't need a flex container, and using one
       just invites flex-direction inheritance bugs from ancestors. */
    display: block !important;
    /* direction inherits from the page (rtl in Hebrew UI). The
       earlier `direction: ltr` here was pushing the popover off the
       left edge of the screen because inset-inline-end resolved
       against an LTR coordinate system. Letting it inherit puts the
       popover correctly above the picker button. */
}
.reasoning-picker-popover[hidden] {
    display: none !important;
}

.reasoning-picker-item {
    /* Each row in the dropdown — title + description on the inline-start
       side, check mark on the inline-end side. display: flex stays here
       since it's a leaf-level layout. */
    display: flex !important;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    color: #1f2937;
    cursor: pointer;
    /* text-align follows the page (rtl in Hebrew UI) so the Hebrew
       description aligns to its natural start (right) edge. */
    text-align: start;
    transition: background-color 0.12s ease;
}
.reasoning-picker-item:hover {
    background: rgba(180, 155, 103, 0.08);
}
.reasoning-picker-item-text {
    /* Wrapper so the title and the small desc line stack vertically
       inside the flex row, while the check mark still sits on the
       opposite side of the button. align-items follows text direction
       naturally (Hebrew description aligns right, like the rest of
       the page; check mark is the visual "end" cap). */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.reasoning-picker-item-title {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.25;
    color: #1f2937;
    /* Force LTR for the English title so the chevron-like effect of
       "Extra Thinking" reads naturally and doesn't get visually
       reordered inside the Hebrew popover. */
    /* Push the title to the inline-start side of the column so
       English appears at the same edge as the Hebrew description. */
    text-align: start;
}
.reasoning-picker-item-desc {
    font-size: 11.5px;
    line-height: 1.4;
    color: #6b7280;
    font-weight: 400;
    /* Allow wrapping if a translator makes a long desc someday. */
    white-space: normal;
}
.reasoning-picker-item.is-selected .reasoning-picker-item-desc {
    color: #8a7548;
}
.reasoning-picker-item-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    /* Align with the title row visually — the description below isn't
       in the check's column, so we anchor to the top. */
    margin-top: 2px;
    color: #b49b67;
    opacity: 0;
    transition: opacity 0.12s ease;
}
.reasoning-picker-item.is-selected .reasoning-picker-item-check {
    opacity: 1;
}
.reasoning-picker-item.is-selected .reasoning-picker-item-title {
    color: #b49b67;
    font-weight: 600;
}

/* 💎 Max tier item — subtle premium emphasis on the title only.
   No model/provider names anywhere; the ×2-credits price lives in
   the item description text. */
.reasoning-picker-item--max .reasoning-picker-item-title {
    background: linear-gradient(90deg, #b49b67 0%, #8a6d3b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #8a6d3b; /* fallback for non-webkit */
}
.reasoning-picker-item--max.is-selected .reasoning-picker-item-title {
    font-weight: 700;
}

/* 🔒 Locked state (free plan) — the row stays visible for discovery,
   but reads as disabled; clicking opens the upgrade modal instead of
   selecting (initializeReasoningPicker). The padlock replaces the
   check column while locked. */
.reasoning-picker-item--locked {
    opacity: 0.55;
    cursor: pointer; /* still clickable — opens the upgrade modal */
}
.reasoning-picker-item--locked .reasoning-picker-item-check {
    display: none;
}
/* Hidden by default — the author display rule must NOT override the
   [hidden] attribute (that's exactly the bug that showed the padlock
   to paid users). Visibility is driven by the parent's --locked class. */
.reasoning-picker-item-lock {
    display: none;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #9ca3af;
}
.reasoning-picker-item--locked .reasoning-picker-item-lock {
    display: inline-flex;
}

/* 💎 ×2 usage badge on the Max title row. Sits inside the gradient-
   clipped title, so it explicitly resets text-fill/background to stay
   readable. Native title="" tooltip explains the double-credits rate. */
/* 💎 Plain secondary line under the Max title — the ×2-credits price,
   in English, no badge/tooltip. Just text. */
.reasoning-picker-item-sub {
    font-size: 11px;
    line-height: 1.35;
    font-weight: 500;
    color: #8a6d3b;
    -webkit-text-fill-color: #8a6d3b; /* stay readable next to the gradient title */
    text-align: start;
}

/* ❓ Circled question mark next to the price line. Click toggles the
   Hebrew explanation row below (picker handler intercepts the click so
   it never selects the item). */
.reasoning-picker-help {
    cursor: pointer;
    color: #8a6d3b;
    margin-inline-start: 5px;
    vertical-align: -2px;
}
.reasoning-picker-help:hover {
    color: #6b5530;
}

/* The Hebrew explanation row. NO author display rule here on purpose —
   visibility is driven by the [hidden] attribute (lesson learned from
   the padlock bug: an author `display` overrides UA [hidden]). */
.reasoning-picker-item-subnote {
    font-size: 11px;
    line-height: 1.45;
    color: #6b7280;
    white-space: normal;
}

/* ═══════════════════════════════════════════
   More Actions Modal
   ═══════════════════════════════════════════ */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    display: none;
}

.modal.show {
    display: block;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    animation: fadeIn 0.2s ease;
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - var(--spacing-8));
    max-width: 480px;
    max-height: 80vh;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-5);
    border-bottom: 1px solid var(--color-border);
}

.modal-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-5);
}

.actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-3);
}

.action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);
    padding: var(--spacing-4);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
    transition: all var(--transition);
    cursor: pointer;
}

.action-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.action-card:active {
    transform: translateY(0);
}

.action-emoji {
    font-size: 28px;
    line-height: 1;
}

.action-name {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--color-text-main);
}

.action-desc {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.custom-edit-section {
    margin-top: var(--spacing-5);
}

.section-divider {
    display: flex;
    align-items: center;
    margin: var(--spacing-5) 0 var(--spacing-4);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--color-border);
}

.section-divider span {
    padding: 0 var(--spacing-3);
}

.custom-input {
    width: 100%;
    padding: var(--spacing-3);
    font-size: var(--text-sm);
    color: var(--color-text-main);
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    resize: vertical;
    min-height: 80px;
    transition: all var(--transition);
    direction: rtl;
}

.custom-input:focus {
    outline: none;
    border-color: var(--color-accent);
    background: white;
    box-shadow: 0 0 0 2px var(--color-accent-light);
}

.custom-input::placeholder {
    color: var(--color-text-tertiary);
}

.char-count-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--spacing-2);
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

/* ═══════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════ */
.btn-primary {
    background: var(--color-primary);
    color: white;
    border: none;
    padding: 0 var(--spacing-4);
    height: 40px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
    box-shadow: var(--shadow-md);
}

.btn-primary:active {
    transform: scale(0.98);
}

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text-main);
    border: 1px solid var(--color-border);
    padding: 0 var(--spacing-4);
    height: 40px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    cursor: pointer;
    transition: all var(--transition);
}

.btn-secondary:hover {
    background: var(--color-surface-hover);
    border-color: var(--color-accent);
}

.btn-danger-outline {
    width: 100%;
    padding: var(--spacing-3);
    border: 1px solid var(--color-danger);
    color: var(--color-danger);
    background: transparent;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    font-size: var(--text-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    transition: all var(--transition);
}

.btn-danger-outline:hover {
    background: var(--color-danger);
    color: white;
}

.btn-large {
    height: 48px;
    font-size: var(--text-base);
}

.btn-block {
    width: 100%;
}

/* ═══════════════════════════════════════════
   Loading & Toast
   ═══════════════════════════════════════════ */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 400;
}

.loading-content {
    text-align: center;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--spacing-4);
}

.spinner-svg {
    animation: rotate 1s linear infinite;
}

.spinner-circle {
    stroke: var(--color-accent);
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.loading-text {
    font-size: var(--text-base);
    color: var(--color-text-main);
}

.toast-container {
    position: fixed;
    top: var(--spacing-4);
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-2);
    pointer-events: none;
}

.toast {
    max-width: 320px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    display: flex;
    align-items: center;
    gap: 8px;
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-6px);
    transition: all var(--transition);
}

.toast.toast-show {
    opacity: 1;
    transform: translateY(0);
}

/* Status dot — quiet replacement for the old emoji icons */
.toast-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #94A3B8;
    flex-shrink: 0;
}

.toast-success .toast-dot { background: var(--color-success); }
.toast-error .toast-dot { background: var(--color-danger); }
.toast-warning .toast-dot { background: var(--color-warning); }
.toast-info .toast-dot { background: var(--color-accent); }

.toast-message {
    flex: 1;
    font-size: 12.5px;
    color: #334155;
    line-height: 1.4;
}

/* ═══════════════════════════════════════════
   Debug Panel (Development)
   ═══════════════════════════════════════════ */
.debug-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #1A1A1A;
    color: #A0A0A0;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 11px;
    z-index: 9999;
    border-top: 1px solid #333;
}

.debug-header {
    padding: 8px 12px;
    background: #252525;
    display: flex;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.debug-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.debug-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.debug-btn {
    padding: 2px 8px;
    background: #333;
    color: #A0A0A0;
    border: none;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
}

.debug-btn:hover {
    background: #444;
}

.debug-content {
    max-height: 200px;
    overflow-y: auto;
}

.debug-logs {
    padding: 8px 12px;
}

/* ═══════════════════════════════════════════
   Utilities
   ═══════════════════════════════════════════ */
.hidden {
    display: none !important;
}






/* ═══════════════════════════════════════════
   enrich (Word Add-in Professional Theme)
   ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   ENRICHMENT MODAL STYLES
   ═══════════════════════════════════════════════════════════════ */

.enrichment-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.enrichment-overlay.active {
  opacity: 1;
}

.enrichment-modal {
  width: 90%;
  max-width: 480px;
  max-height: 85vh;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.enrichment-overlay.active .enrichment-modal {
  transform: scale(1);
}

.enrichment-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
}

.enrichment-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.enrichment-icon {
  width: 36px;
  height: 36px;
  background: #111111;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.enrichment-title h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #111111;
  letter-spacing: -0.01em;
}

.enrichment-subtitle {
  font-size: 12px;
  color: #999999;
}

.enrichment-close {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  background: transparent;
  color: #666666;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.enrichment-close:hover {
  background: #fdfdfd;
  color: #111111;
  border-color: #e5e5e5;
}

.enrichment-body {
  padding: 20px;
  background: #fdfdfd;
  overflow-y: auto;
  flex: 1;
}

.enrichment-section {
  margin-bottom: 20px;
}

.enrichment-section:last-child {
  margin-bottom: 0;
}

.enrichment-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #111111;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.enrichment-label i {
  color: #b49b67;
}

.enrichment-textarea {
  width: 100%;
  padding: 14px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  resize: none;
  background: #ffffff;
  color: #111111;
  transition: all 0.2s;
}

.enrichment-textarea:focus {
  outline: none;
  border-color: #111111;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.05);
}

.enrichment-char-count {
  text-align: left;
  font-size: 11px;
  color: #999999;
  margin-top: 6px;
  font-family: monospace;
}

.enrichment-options-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.enrichment-option {
  cursor: pointer;
}

.enrichment-option input {
  display: none;
}

.option-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px;
  border: 1px solid #e5e5e5;
  background: #ffffff;
  border-radius: 8px;
  transition: all 0.2s;
}

.option-box:hover {
  border-color: #b49b67;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.enrichment-option input:checked + .option-box {
  border-color: #b49b67;
  background: rgba(180, 155, 103, 0.1);
  color: #111111;
}

.option-icon {
  font-size: 20px;
  margin-bottom: 6px;
  color: #666666;
  transition: color 0.2s;
}

.enrichment-option input:checked + .option-box .option-icon {
  color: #b49b67;
}

.option-name {
  font-size: 11px;
  font-weight: 500;
  color: #666666;
}

.enrichment-option input:checked + .option-box .option-name {
  color: #111111;
  font-weight: 600;
}

.enrichment-tone-selector {
  display: flex;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  padding: 4px;
  border-radius: 8px;
  gap: 4px;
}

.tone-option {
  flex: 1;
  cursor: pointer;
}

.tone-option input {
  display: none;
}

.tone-label {
  display: block;
  text-align: center;
  padding: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #666666;
  border-radius: 6px;
  transition: all 0.2s;
}

.tone-option input:checked + .tone-label {
  background: #111111;
  color: #ffffff;
  font-weight: 600;
}

.enrichment-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.enrichment-toggle-row:hover {
  border-color: #b49b67;
}

.toggle-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toggle-icon {
  font-size: 18px;
  color: #b49b67;
  width: 32px;
  height: 32px;
  background: rgba(180, 155, 103, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
}

.toggle-title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #111111;
}

.toggle-desc {
  display: block;
  font-size: 11px;
  color: #999999;
}

.enrichment-footer {
  padding: 16px 20px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  background: #ffffff;
}

.btn-enrichment-cancel {
  padding: 10px 20px;
  border: 1px solid #e5e5e5;
  background: transparent;
  color: #666666;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s;
}

.btn-enrichment-cancel:hover {
  background: #fdfdfd;
  color: #111111;
  border-color: #111111;
}

.btn-enrichment-submit {
  padding: 10px 24px;
  border: none;
  background: #111111;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.15);
  transition: all 0.2s;
}

.btn-enrichment-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.25);
  background: #000000;
}

/* ═══════════════════════════════════════════════════════════════
   ENRICHMENT RESULT MODAL STYLES
   ═══════════════════════════════════════════════════════════════ */

.enrich-modal {
  background: #ffffff;
  width: 95%;
  max-width: 600px;
  max-height: 85vh;
  border-radius: 12px;
  border: 1px solid #e5e5e5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform 0.2s ease;
}

.enrichment-overlay.active .enrich-modal {
  transform: scale(1);
}

.enrich-header {
  padding: 16px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.enrich-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  color: #111111;
}

.enrich-icon-box {
  width: 36px;
  height: 36px;
  background: #111111;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.beta-badge {
  background: #111111;
  color: white;
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-right: 8px;
}

.btn-close-icon {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 20px;
  color: #666666;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-close-icon:hover {
  background: #fdfdfd;
  color: #111111;
  border-color: #e5e5e5;
}

.enrich-body {
  padding: 24px;
  background: #fdfdfd;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
  flex: 1;
}

.original-prompt-preview {
  font-size: 13px;
  color: #666666;
  background: #ffffff;
  padding: 14px 18px;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  border-right: 3px solid #111111;
  font-style: italic;
}

.original-label {
  font-size: 11px;
  font-weight: 600;
  color: #999999;
  display: block;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-style: normal;
}

/* Sources Section */
.enrich-sources-section {
  background: rgba(180, 155, 103, 0.05);
  border: 1px solid rgba(180, 155, 103, 0.2);
  border-radius: 8px;
  padding: 14px 18px;
}

.sources-title {
  font-size: 12px;
  font-weight: 600;
  color: #b49b67;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.source-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 12px;
  color: #111111;
  text-decoration: none;
  transition: all 0.2s ease;
}

.source-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  border-color: #b49b67;
}

.source-icon {
  font-size: 12px;
  color: #b49b67;
}

.source-link-icon {
  font-size: 10px;
  opacity: 0.4;
}

/* Enhanced Editor */
.enhanced-editor-container {
  display: flex;
  flex-direction: column;
}

.enhanced-label {
  font-size: 13px;
  font-weight: 600;
  color: #111111;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-badge {
  background: #b49b67;
  color: white;
  font-size: 10px;
  padding: 3px 10px;
  border-radius: 100px;
  font-weight: 600;
}

#enriched-textarea {
  width: 100%;
  min-height: 200px;
  padding: 16px 18px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.6;
  color: #111111;
  background: #ffffff;
  resize: vertical;
  transition: all 0.2s;
}

#enriched-textarea:focus {
  outline: none;
  border-color: #111111;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.05);
}

/* Result Footer */
.enrich-footer {
  padding: 18px 24px;
  background: #ffffff;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.enrich-footer-left,
.enrich-footer-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn-enrich-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  color: #666666;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-enrich-save:hover {
  background: #fdfdfd;
  border-color: #111111;
  color: #111111;
}

.btn-enrich-save.saved {
  background: rgba(16, 185, 129, 0.1);
  border-color: #10b981;
  color: #10b981;
}

.btn-enrich-cancel {
  padding: 9px 18px;
  border-radius: 8px;
  border: 1px solid #e5e5e5;
  background: white;
  color: #666666;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-enrich-cancel:hover {
  background: #fdfdfd;
  color: #111111;
  border-color: #111111;
}

.btn-enrich-confirm {
  padding: 9px 20px;
  border-radius: 8px;
  border: none;
  background: #111111;
  color: white;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.15);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-enrich-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(17, 17, 17, 0.25);
  background: #000000;
}

/* Instructions List */
.instructions-list {
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--border-color, #e5e5e5);
  border-radius: 8px;
  background: var(--bg-secondary, #f9f9f9);
}

.instruction-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
  transition: background 0.15s;
}

.instruction-item:last-child {
  border-bottom: none;
}

.instruction-item:hover {
  background: var(--bg-hover, #f0f0f0);
}

.instruction-item input[type="checkbox"] {
  display: none;
}

.instruction-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-color, #ddd);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  transition: all 0.2s;
  flex-shrink: 0;
}

.instruction-checkbox i {
  opacity: 0;
  transform: scale(0.8);
}

.instruction-item input:checked + .instruction-checkbox {
  background: var(--primary-color, #111);
  border-color: var(--primary-color, #111);
}

.instruction-item input:checked + .instruction-checkbox i {
  opacity: 1;
  transform: scale(1);
}

.instruction-icon {
  width: 28px;
  height: 28px;
  background: var(--bg-secondary, #f5f5f5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color, #b49b67);
  font-size: 14px;
  flex-shrink: 0;
}

.instruction-name {
  font-size: 13px;
  color: var(--text-primary, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.no-instructions {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-muted, #999);
  gap: 8px;
}

.no-instructions i {
  font-size: 24px;
  opacity: 0.5;
}

.no-instructions span {
  font-size: 13px;
}

/* Instruction Item Layout */
.instruction-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-color, #e5e5e5);
  transition: background 0.15s;
}

.instruction-item:last-child {
  border-bottom: none;
}

.instruction-item:hover {
  background: var(--bg-hover, #f0f0f0);
}

.instruction-select {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  cursor: pointer;
  min-width: 0;
}

.instruction-select input[type="checkbox"] {
  display: none;
}

.instruction-add-btn {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary, #111);
  background: transparent;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}

.instruction-add-btn:hover {
  background: var(--primary-color, #111);
  color: white;
  border-color: var(--primary-color, #111);
}
/* ═══════════════════════════════════════════
   steps
   ═══════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   THINKING STEPS INDICATOR
   ═══════════════════════════════════════════════════════════════ */

/* ============================================
   Typing Indicator - Legal Tech Theme
   ============================================ */

.ph-typing-container {
    /* מבנה כרטיסייה תואם */
    background: var(--ph-surface);
    border: 1px solid var(--ph-border);
    /* פס הדגשה זהב בצד ימין (RTL) */
    border-right: 3px solid var(--ph-accent);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 12px 0;
    
    /* פריסה */
    display: flex; /* ברירת מחדל, JS ישלוט ב-display: none */
    align-items: center;
    gap: 12px;
    
    /* טיפוגרפיה ואווירה */
    font-family: var(--ph-font);
    box-shadow: var(--ph-shadow);
    direction: rtl;
    
    /* אנימציית כניסה */
    opacity: 0;
    transform: translateY(4px);
    animation: phFadeInCard 0.4s ease-out forwards;
}

@keyframes phFadeInCard {
    to { opacity: 1; transform: translateY(0); }
}

/* אזור האייקון */
.ph-typing-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    /* רקע זהב חיוור */
    background: rgba(180, 155, 103, 0.08);
    color: var(--ph-accent);
    border-radius: 6px;
    border: 1px solid rgba(180, 155, 103, 0.2);
}

/* אזור התוכן */
.ph-typing-content {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ph-typing-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--ph-text-sec);
    letter-spacing: -0.01em;
}

/* אנימציית הנקודות */
.ph-typing-dots {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-right: 2px;
}

.ph-dot {
    width: 4px;
    height: 4px;
    background-color: var(--ph-accent);
    border-radius: 50%;
    animation: phDotPulse 1.4s infinite ease-in-out both;
}

.ph-dot:nth-child(1) { animation-delay: -0.32s; }
.ph-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes phDotPulse {
    0%, 80%, 100% { 
        transform: scale(0.6);
        opacity: 0.5;
    }
    40% { 
        transform: scale(1.2);
        opacity: 1;
        box-shadow: 0 0 4px rgba(180, 155, 103, 0.4);
    }
}

.typing-text.text-update {
  animation: textUpdate 0.3s ease;
}

@keyframes textUpdate {
  0% { opacity: 0.5; transform: translateX(5px); }
  100% { opacity: 1; transform: translateX(0); }
}


/* ═══════════════════════════════════════════
   File Attachment Styles
   ═══════════════════════════════════════════ */

.file-chip-container {
  position: static;
}

/* ─── עיצוב הכפתור המאוחד "+" (Plus Menu) — מחליף את #file-attach-btn הישן ─── */
.plus-menu-container {
  position: relative;
}

#plus-menu-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50px;
  background-color: transparent;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

#plus-menu-toggle:not(.has-file):hover {
  background-color: #f8fafc;
  color: #334155;
  border-color: #f1f5f9;
}

/* Open state — subtle emphasis while the popover is visible */
#plus-menu-toggle[aria-expanded="true"]:not(.has-file) {
  background-color: #f1f5f9;
  color: #334155;
}

#plus-menu-toggle.has-file {
  background-color: #eff6ff;
  color: #2563eb;
  border-color: #bfdbfe;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.05);
}

#plus-menu-toggle.has-file:hover {
  background-color: #dbeafe;
}

#plus-menu-toggle:active {
  transform: scale(0.95);
}

#plus-menu-toggle svg {
  transition: transform 0.2s ease;
}

/* ─── עיצוב תגית מספר הקבצים (Badge) ─── */
#plus-menu-toggle .files-count-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  box-sizing: border-box;
  background-color: #2563eb;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  font-family: system-ui, -apple-system, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 2px solid #ffffff;
  animation: badgePop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  pointer-events: none;
}

[dir="ltr"] #plus-menu-toggle .files-count-badge {
  right: auto;
  left: -4px;
}

#plus-menu-toggle.has-file .files-count-badge {
  border-color: #eff6ff;
}

#plus-menu-toggle.has-file:hover .files-count-badge {
  border-color: #dbeafe;
}

@keyframes badgePop {
  from { opacity: 0; transform: scale(0); }
  to { opacity: 1; transform: scale(1); }
}

/* ─── Plus-menu popover — opens upward (toolbar is at bottom) ─── */
.plus-menu-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  padding: 6px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: plusMenuIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

[dir="ltr"] .plus-menu-popover {
  right: auto;
  left: 0;
}

.plus-menu-popover[hidden] {
  display: none;
}

@keyframes plusMenuIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.plus-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: right;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: #1a1a1a;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

[dir="ltr"] .plus-menu-item {
  text-align: left;
}

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

.plus-menu-item:focus-visible {
  outline: 2px solid #b49b67;
  outline-offset: -2px;
}

.plus-menu-item:active {
  background: #ededec;
}

.plus-menu-icon {
  flex-shrink: 0;
  color: #6b7280;
  transition: color 0.15s ease;
}

.plus-menu-item:hover .plus-menu-icon {
  color: #1a1a1a;
}

.plus-menu-label {
  flex: 1;
  min-width: 0;
}

.plus-menu-arrow {
  flex-shrink: 0;
  opacity: 0.35;
  color: #6b7280;
  transition: opacity 0.15s ease;
}

[dir="rtl"] .plus-menu-arrow {
  transform: scaleX(-1);
}

.plus-menu-item:hover .plus-menu-arrow {
  opacity: 0.7;
}

.plus-menu-divider {
  height: 1px;
  margin: 4px 6px;
  background: #ececec;
}
/* ─── סוף עיצוב Plus Menu ─── */

/* Inline preview inside input-card */
.file-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-top: 1px solid #f0f0f0;
  background: #fafafa;
  font-size: 12px;
  color: #555;
}

.file-info {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.file-icon {
  width: 16px;
  height: 16px;
  stroke: var(--color-accent);
  flex-shrink: 0;
  stroke-width: 2;
}

.file-name {
  font-size: 12px;
  font-weight: 500;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.file-size {
  font-size: 11px;
  color: #aaa;
  flex-shrink: 0;
}

.file-remove {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.file-remove:hover {
  background: #fee;
}

.file-remove svg {
  width: 14px;
  height: 14px;
  stroke: #bbb;
}

.file-remove:hover svg {
  stroke: #e55;
}

/* Upload progress */
/* Upload state — disable interaction */
.file-chip.uploading,
.toolbar-btn.uploading {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}

/* Spinner — fixed 18×18, centered on button */
.file-chip.uploading::after,
.toolbar-btn.uploading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;        /* center: -(size/2) */
  border: 2px solid rgba(99, 102, 241, 0.2);
  border-top-color: var(--color-accent, #6366f1);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* 🆕 OCR processing badge on a context-file chip (scanned exhibits warming
   in the background after page-select). Replaces the size label until the
   server cache reports the text is ready, then drafting is enabled. */
.file-chip.is-processing {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.07);
}

.file-chip-ocr {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #b45309;                 /* amber-700 */
  white-space: nowrap;
}

.file-chip-ocr-spinner {
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

/* Send button while waiting on OCR — subtle "not yet" affordance */
#btn-send.is-ocr-waiting {
  opacity: 0.55;
  cursor: progress;
}

.chat-file-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 8px;
  background: rgba(99, 102, 241, 0.06);
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: 8px;
  font-size: 13px;
  direction: rtl;
}

.chat-file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-shrink: 0;
  color: var(--color-accent, #6366f1);
}

.chat-file-ext {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-accent, #6366f1);
  opacity: 0.8;
}

.chat-file-details {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-file-name {
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  font-size: 12.5px;
}

.chat-file-size {
  font-size: 11px;
  color: #999;
  margin-top: 1px;
}

/* Subtle entrance animation */
.chat-file-chip {
  animation: fileChipIn 0.25s ease-out;
}

@keyframes fileChipIn {
  from {
    opacity: 0;
    transform: translateY(4px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* ═══════════════════════════════════════════════════════════════
   Progress Manager v3.3 — Claude-style stacked bars
   ═══════════════════════════════════════════════════════════════ */

/* ─── Container ─────────────────────────────────────────────── */
#progress-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 16px;
}

#progress-steps.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#progress-steps.visible {
  opacity: 1;
  transition: opacity 0.2s ease;
}

/* ─── Bar (shared by all states) ─────────────────────────────── */
#progress-steps .tool-thinking-bar {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  font-family: 'Heebo', 'Segoe UI', sans-serif;
}

/* ─── Indicator column (icon + line) ─────────────────────────── */
#progress-steps .tool-thinking-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  width: 20px;
}

/* ─── Vertical connecting line between bars ──────────────────── */
#progress-steps .tool-thinking-line {
  flex: 1 1 auto;
  width: 2px;
  min-height: 10px;
  background: #e5e7eb;
  margin: 2px 0;
}

/* Hide line on the last bar — nothing to connect to */
#progress-steps > .tool-thinking-bar:last-child .tool-thinking-line {
  display: none;
}

/* ─── Icon base (all states) ─────────────────────────────────── */
#progress-steps .tool-thinking-icon {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  transition: all 0.2s ease;
}

/* ─── ACTIVE state: clock (no circle border) ─────────────────── */
#progress-steps .ptb-bar-active .tool-thinking-icon {
  color: #6b7280;
  border: none;
  background: transparent;
}

#progress-steps .ptb-bar-active .tool-thinking-icon svg {
  width: 16px;
  height: 16px;
}

/* ─── DONE state: black ✓ inside circle ──────────────────────── */
#progress-steps .tool-thinking-icon.ptb-icon-done {
  border: 1.5px solid #9ca3af;
  color: #111;
  background: #fff;
}

#progress-steps .tool-thinking-icon.ptb-icon-done svg {
  width: 10px;
  height: 10px;
}

/* ─── ERROR state: red ✗ inside circle ───────────────────────── */
#progress-steps .tool-thinking-icon.ptb-icon-error {
  border: 1.5px solid #dc2626;
  color: #dc2626;
  background: #fff;
}

#progress-steps .tool-thinking-icon.ptb-icon-error svg {
  width: 10px;
  height: 10px;
}

/* ─── Content column ─────────────────────────────────────────── */
#progress-steps .tool-thinking-content {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 0;
}

/* ─── ACTIVE bar content: more breathing room ────────────────── */
#progress-steps .ptb-bar-active .tool-thinking-content {
  padding: 4px 0 8px;
}

/* ─── COMPACT / ERRORED bar content: tight single line ───────── */
#progress-steps .ptb-bar-compact .tool-thinking-content,
#progress-steps .ptb-bar-errored .tool-thinking-content {
  padding: 6px 0;
  flex-direction: row;
  align-items: center;
}

#progress-steps .ptb-bar-compact,
#progress-steps .ptb-bar-errored {
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

#progress-steps .ptb-bar-compact:hover,
#progress-steps .ptb-bar-errored:hover {
  opacity: 1;
}

/* ─── Completed label text ───────────────────────────────────── */
#progress-steps .ptb-label {
  font-size: 13px;
  color: #374151;
  line-height: 1.4;
  direction: rtl;
}

#progress-steps .ptb-bar-errored .ptb-label {
  color: #dc2626;
}

/* ─── Spinner row (thinking-dots + status text) ──────────────── */
#progress-steps .tool-thinking-spinner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #4b5563;
  direction: rtl;
}

#progress-steps .ptb-status {
  flex: 1;
  min-width: 0;
}

/* ─── Thinking dots animation ────────────────────────────────── */
#progress-steps .thinking-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

#progress-steps .thinking-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #9ca3af;
  animation: ptb-dot-bounce 1.2s infinite ease-in-out;
}

#progress-steps .thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
#progress-steps .thinking-dots span:nth-child(2) { animation-delay: -0.16s; }
#progress-steps .thinking-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes ptb-dot-bounce {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ─── Typewriter area (draft / thinking preview) ─────────────── */
#progress-steps .tool-thinking-text {
  font-size: 12.5px;
  color: #6b7280;
  line-height: 1.6;
  direction: rtl;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-height: 120px;
  overflow-y: auto;
  padding: 6px 10px;
  background: #f9fafb;
  border-radius: 6px;
  border-right: 2px solid #d1d5db;
  font-family: 'David', 'Heebo', sans-serif;
}

#progress-steps .ptb-cursor {
  display: inline-block;
  border-left: 2px solid #9ca3af;
  animation: ptb-blink 0.6s step-end infinite;
  margin-inline-start: 1px;
  height: 1em;
  vertical-align: text-bottom;
}

@keyframes ptb-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Confirmation bubble (inside active bar)
   ═══════════════════════════════════════════════════════════════ */

#progress-steps .confirmation-step {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0 4px;
  direction: rtl;
}

#progress-steps .confirmation-message {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 10px;
}

#progress-steps .confirmation-icon {
  font-size: 18px;
  flex-shrink: 0;
}

#progress-steps .confirmation-text {
  font-size: 13px;
  color: #78350f;
  line-height: 1.5;
}

#progress-steps .confirmation-details {
  background: #fff;
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#progress-steps .detail-row {
  display: flex;
  gap: 6px;
  font-size: 12px;
  line-height: 1.4;
}

#progress-steps .detail-label {
  color: #6b7280;
  font-weight: 500;
  flex-shrink: 0;
}

#progress-steps .detail-value {
  color: #111;
  flex: 1;
  min-width: 0;
}

#progress-steps .confirmation-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

#progress-steps .confirm-btn {
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: 'Heebo', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  border: 1px solid transparent;
}

#progress-steps .confirm-btn-cancel {
  background: #fff;
  border-color: #e5e7eb;
  color: #6b7280;
}

#progress-steps .confirm-btn-cancel:hover {
  background: #f9fafb;
  color: #111;
}

#progress-steps .confirm-btn-continue {
  background: #b49b67;
  color: #fff;
}

#progress-steps .confirm-btn-continue:hover {
  background: #9a8455;
}

#progress-steps .confirmation-result {
  font-size: 12.5px;
  font-weight: 500;
  text-align: center;
  padding: 6px 0;
}

#progress-steps .confirmation-result.result-continue {
  color: #059669;
}

#progress-steps .confirmation-result.result-cancel {
  color: #dc2626;
}

/* ==========================================
   💡 Followup Suggestions - Word Add-in
   ========================================== */

.suggestions-message {
  margin-top: 12px;
}

.suggestions-header {
  margin-bottom: 10px;
}

.suggestions-title {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary, #1a1a1a);
  margin-bottom: 2px;
}

.suggestions-subtitle {
  font-size: 11px;
  color: var(--text-secondary, #666);
}

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.suggestion-chip-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: right;
  width: 100%;
  font-size: 12px;
}

.suggestion-chip-action:hover {
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  border-color: #a5b4fc;
  transform: translateX(-2px);
}

.suggestion-chip-action.selected {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-color: #4f46e5;
  color: white;
}

.suggestion-chip-action.selected .suggestion-icon,
.suggestion-chip-action.selected .suggestion-text,
.suggestion-chip-action.selected .suggestion-arrow {
  color: white;
}

.suggestion-icon {
  font-size: 14px;
  flex-shrink: 0;
}

.suggestion-text {
  flex: 1;
  color: var(--text-primary, #374151);
  line-height: 1.3;
}

.suggestion-arrow {
  color: var(--text-secondary, #9ca3af);
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.2s;
}

.suggestion-chip-action:hover .suggestion-arrow {
  opacity: 1;
}


/* Office Style Toggle */
.style-chip-container {
    position: relative;
}

.style-chip.active {
    background-color: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
}

.style-popover {
    display: none;
    position: fixed;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    padding: 16px;
    width: 220px;
    z-index: 1000;
    border: 1px solid #e5e7eb;
}

.style-popover.show {
    display: block;
}

.style-popover-header {
    margin-bottom: 12px;
}

.style-title {
    display: block;
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
}

.style-subtitle {
    display: block;
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

.style-toggle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 12px;
}

.style-toggle-label {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.style-switch {
    position: relative;
    width: 44px;
    height: 24px;
}

.style-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.style-switch-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: #d1d5db;
    transition: 0.3s;
    border-radius: 24px;
}

.style-switch-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.style-switch input:checked + .style-switch-slider {
    background-color: #9A8455;
}

.style-switch input:checked + .style-switch-slider:before {
    transform: translateX(20px);
}

.style-hint {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.4;
    margin-bottom: 0;
}

/* ═══════════════════════════════════════════ */
/* Style Popover - Links Section              */
/* ═══════════════════════════════════════════ */

.style-popover-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 12px 0 8px;
}

.style-popover-links {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.style-popover-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    font-family: 'Heebo', sans-serif;
    color: #555;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
    width: 100%;
    text-align: right;
}

.style-popover-link:hover {
    background: #f5f2eb;
    color: #8a7340;
}

.style-popover-link svg {
    flex-shrink: 0;
    color: inherit;
}

.style-popover-link span {
    flex: 1;
}

.style-popover-link .style-link-arrow {
    opacity: 0.4;
    transition: opacity 0.15s ease;
}

.style-popover-link:hover .style-link-arrow {
    opacity: 0.8;
}

/* ═══════════════════════════════════════════ */
/* Style Chip Button (Library toggle)         */
/* ═══════════════════════════════════════════ */

/* Style chip — wider variant of toolbar-btn (carries label) */
.style-chip-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 50px;
    color: #666666;
    font-size: 12px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    outline: none;
}

.style-chip-btn:not(.active):hover {
    background-color: #fafafa;
    color: #111111;
    border-color: #e5e5e5;
}

.style-chip-btn.active {
    background-color: #f5f2eb;
    color: #8a7340;
    border-color: #d4c9a8;
    box-shadow: 0 2px 4px rgba(138, 115, 64, 0.1);
}

.style-chip-btn.active:hover {
    background-color: #ebe5d5;
    border-color: #c7b990;
}

.style-chip-btn:active {
    transform: scale(0.96);
}

.style-chip-btn:focus-visible {
    outline: 2px solid #b49b67;
    outline-offset: 1px;
}

.style-chip-btn svg:first-child {
    flex-shrink: 0;
}

.style-chip-text {
    line-height: 1;
}

.style-chip-chevron {
    flex-shrink: 0;
    opacity: 0.5;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.style-chip-btn:hover .style-chip-chevron {
    opacity: 0.8;
}

/* Rotate chevron when popover is open */
.style-popover.show ~ .style-chip-btn .style-chip-chevron,
.style-chip-btn.open .style-chip-chevron {
    transform: rotate(180deg);
}

/* ═══════════════════════════════════════════ */

.legal-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legal-link {
    color: #64748b;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

.legal-link:hover {
    color: #3b82f6;
}

.sidebar-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 16px;
    border-top: 1px solid #e2e8f0;
    font-size: 12px;
    color: #94a3b8;
}

.copyright {
    font-size: 11px;
}


/* ============================================
   Legal Tech Professional Theme
   Progress Manager Styles
   ============================================ */

/* Base Container */
.thinking-container {
  opacity: 0;
  transform: translateY(8px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  direction: rtl;
}

.thinking-container.visible {
  opacity: 1;
  transform: translateY(0);
}

.thinking-container.fade-out {
  opacity: 0;
  transform: translateY(-8px);
}

/* Legal Thinking Card */
.legal-thinking-card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 20px;
  transition: all 0.3s ease;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.legal-thinking-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.legal-thinking-card.completed {
  border-color: #111111;
  border-right-width: 3px;
}

.legal-thinking-card.error {
  border-color: #c53030;
  border-right-width: 3px;
}

/* Header */
.legal-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e5e5;
}

.legal-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Spinner - Header */
.legal-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #e5e5e5;
  border-top-color: #b49b67;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.legal-spinner.hidden {
  display: none;
}

/* Status Indicator (shown on complete/error) */
.legal-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b49b67;
}

.legal-status-indicator.completed {
  background: #111111;
}

.legal-status-indicator.error {
  background: #c53030;
}

/* Status Text */
.legal-status-text {
  font-size: 14px;
  font-weight: 500;
  color: #111111;
  letter-spacing: -0.01em;
  transition: opacity 0.2s ease;
}

.legal-status-text.updating {
  animation: text-fade 0.3s ease;
}

/* Timer */
.legal-timer {
  font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
  font-size: 12px;
  color: #666666;
  padding: 4px 10px;
  border-radius: 4px;
  min-width: 52px;
  text-align: left;
}

.legal-timer.stopped {
  color: #111111;
  background: #e8e8e8;
}

/* Progress Bar */
.legal-progress-container {
  height: 3px;
  background: #e5e5e5;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px;
}

.legal-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #050505, #b49b67);
  border-radius: 2px;
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.legal-progress-bar.completed {
  background: #111111;
}

/* Steps Area */
.legal-steps-area {
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 4px;
  margin-bottom: 12px;
  width:100%;
}

.legal-steps-area:empty {
  display: none;
}

.legal-steps-area::-webkit-scrollbar {
  width: 4px;
}

.legal-steps-area::-webkit-scrollbar-track {
  background: transparent;
}

.legal-steps-area::-webkit-scrollbar-thumb {
  background: #e5e5e5;
  border-radius: 2px;
}

/* Step Item */
.legal-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  opacity: 0;
  transform: translateX(-12px);
  animation: step-slide-in 0.3s ease-out forwards;
}

/* Step Indicator (spinner/check container) */
.step-indicator {
  width: 14px;
  height: 14px;
  margin-top: 2px;
  flex-shrink: 0;
  position: relative;
}

/* Step Spinner */
.step-spinner {
  position: absolute;
  top: 0;
  right: 0;
  width: 12px;
  height: 12px;
  border: 1.5px solid #e5e5e5;
  border-top-color: #b49b67;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.legal-step.completed .step-spinner {
  display: none;
}

/* Step Check */
.step-check {
  position: absolute;
  top: 0;
  right: 0;
  color: #b49b67;
  font-size: 12px;
  display: none;
}

.legal-step.completed .step-check {
  display: block;
}

/* Step Text */
.step-text {
  flex: 1;
  font-size: 13px;
  color: #666666;
  line-height: 1.5;
}

/* Counter */
.legal-counter {
  padding: 12px;
  background: #f8f9fa;
  border-radius: 6px;
  margin-top: 8px;
  border: 1px solid #e5e5e5;
}

.counter-display,
.counter-result {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.counter-icon {
  font-size: 14px;
}

.counter-number {
  font-weight: 600;
  color: #2563eb;
  font-variant-numeric: tabular-nums;
  min-width: 80px;
}

.counter-label {
  color: #6b7280;
}

.result-check {
  color: #10b981;
  font-weight: bold;
}

.result-count {
  font-weight: 600;
  color: #10b981;
}

.result-label {
  color: #6b7280;
}

/* Animations */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes step-slide-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes text-fade {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* Chat Links */
.chat-link {
  color: #b49b67;
  text-decoration: underline;
  word-break: break-all;
}

.chat-link:hover {
  color: #9a8455;
}

/* 🆕 v6.7 — Web Sources footer.
   Minimalist styling for a legal product. No card backgrounds, no
   emoji, no decorative borders on each row. Just a small heading,
   then a tight list of numbered links separated by hairlines.
   The body of the chat message itself carries the inline citations;
   this block is the "References" list at the bottom. */

.web-sources {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.web-sources-title {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

.web-sources-list {
  display: flex;
  flex-direction: column;
}

.web-source-item {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}

.web-source-item:first-child {
  border-top: none;
}

.web-source-link {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 0;
  text-decoration: none;
  color: inherit;
  transition: opacity 0.15s ease;
}

.web-source-link:hover {
  text-decoration: none;
  opacity: 0.7;
}

.web-source-num {
  flex: 0 0 auto;
  font-size: 0.78rem;
  font-weight: 500;
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
  min-width: 1.4em;
}

.web-source-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.web-source-title {
  font-size: 0.83rem;
  font-weight: 400;
  color: #374151;
  line-height: 1.35;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.web-source-link:hover .web-source-title {
  color: #b49b67;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.web-source-domain {
  font-size: 0.7rem;
  color: #9ca3af;
  word-break: break-word;
}

/* Confirmation State */
.legal-thinking-card.needs-confirmation {
  border-color: #f59e0b !important;
  border-right-width: 3px;
}

.legal-thinking-card.cancelled {
  border-color: #999999 !important;
  opacity: 0.7;
}

.legal-status-indicator.warning {
  background: #f59e0b;
}

.confidence-badge-inline {
  color: #92400e !important;
  background: #fef3c7 !important;
  font-family: inherit !important;
}

.confirmation-step {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #e5e5e5;
  animation: fadeSlideIn 0.3s ease-out;
}

.confirmation-message {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #fffbeb;
  border-radius: 6px;
  margin-bottom: 12px;
  border: 1px solid #fde68a;
}

.confirmation-icon {
  font-size: 28px;
  flex-shrink: 0;
}

.confirmation-text {
  font-size: 13px;
  color: #92400e;
  line-height: 1.5;
}

.confirmation-details {
  background: #f9fafb;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid #e5e5e5;
}

.confirmation-details .detail-row {
  display: flex;
  gap: 8px;
  padding: 5px 0;
  font-size: 12px;
}

.confirmation-details .detail-row:not(:last-child) {
  border-bottom: 1px solid #e5e5e5;
}

.confirmation-details .detail-label {
  color: #666666;
  flex-shrink: 0;
}

.confirmation-details .detail-value {
  color: #111111;
  font-weight: 500;
}

.confirmation-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-top: 4px;
}

.confirm-btn {
  padding: 8px 20px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
}

.confirm-btn-cancel {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.confirm-btn-cancel:hover {
  background: #e5e7eb;
}

.confirm-btn-continue {
  background: #111111;
  color: white;
}

.confirm-btn-continue:hover {
  background: #333333;
}

.confirmation-result {
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 4px;
  text-align: center;
  width: 100%;
}

.result-continue {
  color: #065f46;
  background: #d1fae5;
}

.result-cancel {
  color: #666666;
  background: #f3f4f6;
}

@keyframes fadeSlideIn {
  from { 
    opacity: 0; 
    transform: translateY(-8px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}


/* ============================================
   Document Operations Preview
   ============================================ */

.doc-operations-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 8px;
  max-height: 320px; /* תשנה לפי הצורך */
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* למנוע מהכרטיסים להתכווץ בתוך flex */
.doc-operations-list .doc-op-item {
  flex: 0 0 auto;
  flex-shrink: 0;
}

.doc-op-item {
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.2s;
}

.doc-op-item:hover {
  border-color: #94a3b8;
}

.doc-op-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
}

.doc-op-icon {
  font-size: 14px;
}

.doc-op-label {
  color: #334155;
}

.doc-op-index {
  margin-right: auto;
  font-weight: 400;
  font-size: 11px;
  color: #94a3b8;
}

.doc-op-text {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.6;
  direction: rtl;
  color: #1e293b;
}

.doc-op-text.insert {
min-height: fit-content;
color: rgb(0, 124, 254);
border-radius: 2px;
font-weight: 600;
text-decoration: none;
text-decoration: underline;
}
.doc-op-text.update {
  color: #1e40af;
  min-height: fit-content;
}

.doc-op-text.delete {
  color: #991b1b;
  text-decoration: line-through;
  opacity: 0.8;
  min-height: fit-content;
}
.progress-task-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #64748b);
  background: var(--bg-tertiary, #f1f5f9);
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.action-buttons-inline {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-inline-action {
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  cursor: pointer;
  font-size: 13px;
  font-family: inherit;
  transition: all 0.2s;
}

.btn-inline-action.primary {
  background: #2B2B2B;
  color: white;
  border-color: #2B2B2B;
}

.btn-inline-action.primary:hover {
  background: #1F1F1F;
}


.btn-inline-action.secondary {
  background: white;
  color: #555;
}

.btn-inline-action.secondary:hover {
  background: #f5f5f5;
}


.section-nav-link {
    color: #4C5AA3;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px dashed #4C5AA3;
    padding: 0 2px;
    border-radius: 2px;
    transition: all 0.2s;
}

.section-nav-link:hover {
    background: rgba(76, 90, 163, 0.1);
    border-bottom-style: solid;
}

/* ============================================
   Change Plan — Chat inline change proposal
   ============================================ */

.change-plan-container {
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-color, #e2e2e2);
  border-radius: 10px;
  background: var(--surface-secondary, #f9f9fb);
}

.change-plan-container h4 {
  margin: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a1a1a);
}

/* Numbered list */
.change-plan-list {
  margin: 0 0 14px 0;
  padding: 0 18px 0 0;
  list-style-position: outside;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-secondary, #555);
}

.change-plan-list li {
  margin-bottom: 4px;
}

.change-plan-list li strong {
  color: var(--text-primary, #1a1a1a);
}

/* Action Buttons */
.change-plan-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.btn-change-plan {
  padding: 10px 22px;
  border: none;
  border-radius: 980px;
  background: #e8e8ed;
  color: #1d1d1f;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
  font-family: inherit;
  letter-spacing: -0.01em;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

.btn-change-plan:hover {
  background: #d2d2d7;
}

.btn-change-plan:active {
  transform: scale(0.97);
  opacity: 0.85;
}

.btn-change-plan.approve {
  background: #1d1d1f;
  color: #fff;
}

.btn-change-plan.approve:hover {
  background: #333336;
}

.btn-change-plan.cancel {
  background: transparent;
  color: #86868b;
}

.btn-change-plan.cancel:hover {
  color: #1d1d1f;
  background: #f5f5f7;
}

/* Status (replaces buttons after action) */
.change-plan-status {
  font-size: 13px;
  font-weight: 500;
  color: #86868b;
  padding: 8px 0;
  letter-spacing: -0.01em;
}

.change-plan-status.success {
  color: #2d8a39;
}

.change-plan-status.error {
  color: #de3730;
}

/* ── Thinking Spinner ── */
.thinking-spinner {
  display: flex;
  align-items: center;
  gap: 10px;
  direction: rtl;
}

.thinking-spinner .grid {
  width: 18px;
  height: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

.thinking-spinner .sq {
  background: #333;
  border-radius: 1.5px;
  animation: squareFlip 1.6s ease-in-out infinite;
}

.thinking-spinner .sq:nth-child(2) { animation-delay: 0.2s; }
.thinking-spinner .sq:nth-child(3) { animation-delay: 0.6s; }
.thinking-spinner .sq:nth-child(4) { animation-delay: 0.4s; }

.thinking-spinner .thinking-label {
  font-size: 13.5px;
  color: #888;
}

@keyframes squareFlip {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.2; transform: scale(0.7); }
}

.send-btn.is-stop {
  background: white;
  border: 1.5px solid #d0d0d0;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.send-btn.is-stop:hover {
  background: #f5f5f5;
}

.send-btn.is-stop svg {
  display: none;
}

.send-btn.is-stop::after {
  content: '';
  width: 10px;
  height: 10px;
  border: 2px solid #000;
  border-radius: 50%;
  display: block;
  background: radial-gradient(#000 30%, transparent 30%);
}

@keyframes stopPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.chat-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.pulse-orb {
  width: 24px;
  height: 24px;
  margin: 12px auto 4px;
  background-color: #c5b399;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.thinking-label {
  display: block;
  text-align: center;
  font-size: 13px;
  color: #c5b399;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1);    }
}

/* ============================================
   Claude-style Thinking UI
   Used in: chat bubble + progress manager
   ============================================ */

.thinking-block {
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
  position: relative;
}

.thinking-block.is-thinking::before,
.thinking-block:not(.is-done)::before {
  content: '';
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: gainsboro;
  background-size: 100% 200%;
  animation: thinkingShimmer 2s ease-in-out infinite;
}

@keyframes thinkingShimmer {
  0%, 100% { background-position: 0 0; }
  50% { background-position: 0 100%; }
}

/* Header — chat bubble classes + progress manager classes */
.thinking-header,
.thinking-block-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  color: var(--text-secondary, #8b8b8b);
}

/* Spinner */
.thinking-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-color, #e0e0e0);
  border-top-color: var(--primary-color, #c8a45a);
  border-radius: 50%;
  animation: thinkingSpin 0.8s linear infinite;
  flex-shrink: 0;
}

@keyframes thinkingSpin {
  to { transform: rotate(360deg); }
}

/* Label */
.thinking-label,
.thinking-block-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--primary-color, #c8a45a);
}

/* Content area — chat bubble classes + progress manager classes */
.thinking-content,
.thinking-block-content {
  max-height: 150px;
  overflow-y: auto;
  padding: 0 10px 10px 10px;
}

.thinking-content-text,
.thinking-block-content {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary, #888);
  font-style: italic;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  direction: rtl;
}

/* Typewriter cursor */
.thinking-cursor {
  display: inline-block;
  width: 1.5px;
  height: 1em;
  background: var(--primary-color, #c8a45a);
  margin-inline-start: 2px;
  vertical-align: text-bottom;
  animation: thinkingBlink 0.6s step-end infinite;
}

@keyframes thinkingBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}



/* ═══════════════════════════════════════════════════════════════
   PAGE PICKER MODAL — PDF Page Selection
   Follows enrichment modal design language
   ═══════════════════════════════════════════════════════════════ */

/* ── Overlay ── */
.pp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  padding: 8px;
  box-sizing: border-box;
  transition: opacity 0.2s ease;
}

.pp-overlay.active {
  opacity: 1;
}

/* ── Modal Container ── */
.pp-modal {
  width: 100%;
  max-width: min(520px, 100%);
  /* גובה חכם: הקטן ביותר מבין 88vh, גובה ההורה, או 720px */
  max-height: min(88vh, calc(100% - 16px), 720px);
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* קריטי: מאפשר לילדים flex להתכווץ ולא לדחוף תוכן החוצה */
  min-height: 0;
  transform: scale(0.95);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.pp-overlay.active .pp-modal {
  transform: scale(1);
}

/* ── Header ── */
.pp-header {
  padding: 14px 18px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  flex-shrink: 0;
}

.pp-header-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.pp-header-icon {
  width: 34px;
  height: 34px;
  background: #111111;
  color: white;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pp-header-title h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  color: #111111;
  letter-spacing: -0.01em;
}

.pp-header-subtitle {
  font-size: 11.5px;
  color: #999999;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pp-close-btn {
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  background: transparent;
  color: #666666;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}

.pp-close-btn:hover {
  background: #fdfdfd;
  color: #111111;
  border-color: #e5e5e5;
}

/* ── Toolbar (Range + Quick Actions) ── */
.pp-toolbar {
  padding: 10px 18px;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fdfdfd;
  flex-shrink: 0;
}

.pp-range-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pp-range-label {
  font-size: 12px;
  font-weight: 500;
  color: #666;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.pp-range-label svg {
  color: #b49b67;
}

.pp-range-input {
  flex: 1;
  min-width: 120px;
  padding: 7px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  font-size: 12.5px;
  font-family: 'Inter', monospace;
  color: #111;
  background: #fff;
  transition: border-color 0.2s;
}

.pp-range-input:focus {
  outline: none;
  border-color: #111;
  box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.05);
}

.pp-range-input::placeholder {
  color: #bbb;
  font-size: 12px;
}

.pp-range-apply {
  padding: 7px 12px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}

.pp-range-apply:hover {
  background: #333;
}

.pp-toolbar-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.pp-toolbar-btn {
  padding: 5px 10px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.15s;
}

.pp-toolbar-btn:hover {
  border-color: #b49b67;
  color: #111;
}

/* ── Counter ── */
.pp-counter {
  padding: 7px 18px;
  font-size: 11.5px;
  color: #666;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.pp-counter-warning {
  color: #d97706;
  font-weight: 500;
}

/* ── Credit tip ── */
.pp-credit-tip {
  padding: 6px 18px 7px;
  font-size: 10.5px;
  color: #b49b67;
  background: #fffdf7;
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  line-height: 1.45;
}

.pp-credit-tip svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* ── Body (scrollable grid) ── */
.pp-body {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 14px 18px;
  background: #fdfdfd;
  /* קריטי: מאפשר ל-flex item להתכווץ מתחת לתוכן */
  min-height: 0;
  overscroll-behavior: contain;
}

.pp-body::-webkit-scrollbar {
  width: 5px;
}

.pp-body::-webkit-scrollbar-thumb {
  background: #e0e0e0;
  border-radius: 3px;
}

/* ── Thumbnails Grid ── */
.pp-grid {
  display: grid;
  /* מתאים אוטומטית לרוחב: 4 בדסקטופ, פחות במסכים צרים */
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
}

/* ── Single Thumbnail Card ── */
.pp-thumb-card {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pp-thumb-card input {
  display: none;
}

.pp-thumb-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 0.707; /* A4 ratio */
  border: 2px solid #e5e5e5;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: all 0.2s;
}

.pp-thumb-card:hover .pp-thumb-frame {
  border-color: #b49b67;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.pp-thumb-card.selected .pp-thumb-frame {
  border-color: #111;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.15);
}

.pp-thumb-card.disabled {
  opacity: 0.35;
  pointer-events: none;
}

.pp-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pp-thumb-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f8f8f8;
}

.pp-thumb-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.pp-thumb-page-num {
  font-size: 18px;
  font-weight: 600;
  color: #ccc;
}

.pp-thumb-card.selected .pp-thumb-page-num {
  color: #999;
}

/* Canvas rendered thumbnail */
.pp-thumb-rendered {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-thumb-canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Progress indicator */
.pp-thumb-progress {
  font-size: 11px;
  color: #999;
  margin-inline-start: 8px;
}

/* ── Checkbox Overlay ── */
.pp-thumb-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 4px;
  pointer-events: none;
}

.pp-thumb-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #ddd;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.pp-thumb-check svg {
  opacity: 0;
  color: #fff;
  transition: opacity 0.15s;
}

.pp-thumb-card.selected .pp-thumb-check {
  background: #111;
  border-color: #111;
}

.pp-thumb-card.selected .pp-thumb-check svg {
  opacity: 1;
}

/* ── Page Number Label ── */
.pp-thumb-label {
  font-size: 11px;
  font-weight: 500;
  color: #999;
  transition: color 0.2s;
}

.pp-thumb-card.selected .pp-thumb-label {
  color: #111;
  font-weight: 600;
}

/* ── Footer ── */
.pp-footer {
  padding: 12px 18px;
  border-top: 1px solid #e5e5e5;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: #fff;
  flex-shrink: 0;
}

.pp-btn-cancel {
  padding: 9px 18px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.15s;
}

.pp-btn-cancel:hover {
  border-color: #ccc;
  color: #111;
}

.pp-btn-confirm {
  padding: 9px 18px;
  background: #111;
  border: none;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}

.pp-btn-confirm:hover:not(:disabled) {
  background: #333;
}

.pp-btn-confirm:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ═══════════════════════════════════════════════════════════════
   Responsive: narrow task panes (Windows Office) and small screens
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  .pp-modal {
    max-width: 100%;
    max-height: calc(100% - 8px);
    border-radius: 10px;
  }

  .pp-header,
  .pp-toolbar,
  .pp-counter,
  .pp-credit-tip,
  .pp-footer,
  .pp-body {
    padding-inline: 14px;
  }

  .pp-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

/* גובה נמוך - מכווץ עוד יותר כדי שה-footer תמיד יהיה נראה */
@media (max-height: 600px) {
  .pp-modal {
    max-height: calc(100% - 8px);
  }

  .pp-header {
    padding-block: 10px;
  }

  .pp-header-icon {
    width: 30px;
    height: 30px;
  }

  .pp-credit-tip {
    display: none;
  }

  .pp-body {
    padding-block: 10px;
  }
}
/* ═══════════════════════════════════════════ */
/* Document Context Toggle - Premium UI        */
/* ═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════ */
/* Document Context Toggle - Premium UI        */
/* ═══════════════════════════════════════════ */

.doc-context-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50px;
    background-color: transparent; /* הוסר הרקע האפרפר - כעת שקוף, נקי ויוקרתי */
    cursor: pointer;
    
    /* צבע התחלתי (כבוי) - אפור עדין */
    color: #666666; 
    
    /* מעברים חלקים לכל שינוי */
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

/* ─── מצב כבוי במעבר עכבר (Hover) ─── */
.doc-context-btn:not(.active):hover {
    background-color: #fafafa; /* רקע עדין מאוד */
    color: #111111; /* שחור פחם יוקרתי במעבר עכבר */
    border-color: #e5e5e5;
}

/* ─── מצב פעיל (Active) ─── */
.doc-context-btn.active {
    background-color: #f5f2eb; /* רקע שמנת יוקרתי */
    color: #8a7340; /* זהב/ברונזה קלאסי לאייקון */
    border-color: #d4c9a8;
    box-shadow: 0 2px 4px rgba(138, 115, 64, 0.1);
}

/* מצב פעיל במעבר עכבר */
.doc-context-btn.active:hover {
    background-color: #ebe5d5;
    border-color: #c7b990;
}

/* ─── אפקט לחיצה פיזית ─── */
.doc-context-btn:active {
    transform: scale(0.95);
}

/* ─── עיצוב האייקון (SVG) ─── */
.doc-context-btn svg {
    /* האייקון יורש אוטומטית את הצבע בזכות השימוש ב-currentColor ב-HTML */
    transition: transform 0.2s ease;
}

/* ═══════════════════════════════════════════ */
/* עיצוב נקודת החיווי (The Indicator Dot)      */
/* ═══════════════════════════════════════════ */

.doc-context-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background-color: #111111; /* שחור פחם עוצמתי ויוקרתי לנקודה */
    border-radius: 50%;
    
    /* המסגרת יוצרת אפקט "חיתוך" יוקרתי מהרקע */
    border: 2px solid #ffffff; 
    
    /* מצב התחלתי (כשהכפתור כבוי - מוסתר ומכווץ) */
    opacity: 0;
    transform: scale(0);
    
    /* אנימציית קפיצה (Pop) יוקרתית */
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none; /* כדי שלא יפריע ללחיצת העכבר על הכפתור */
}

/* כשהכפתור פעיל - הנקודה קופצת ומופיעה */
.doc-context-btn.active .doc-context-dot {
    opacity: 1;
    transform: scale(1);
    border-color: #f5f2eb; /* מתאים בדיוק לצבע השמנת של הכפתור במצב פעיל */
}

/* התאמת מסגרת הנקודה כשהעכבר מרחף מעל כפתור פעיל (מניעת התנגשות צבעים) */
.doc-context-btn.active:hover .doc-context-dot {
    border-color: #ebe5d5;
}

/* ═══════════════════════════════════════════
   Professional & Elegant CSS Tooltips
   ═══════════════════════════════════════════ */

[data-tooltip] {
    position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    /* אנימציית היעלמות רכה כשהעכבר עוזב */
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
    z-index: 1000;
    left: 50%;
    transform: translateX(-50%) translateY(4px); /* מרחק התחלתי קטן יותר */
}

/* קופסת הטקסט */
[data-tooltip]::after {
    content: attr(data-tooltip);
    bottom: calc(100% + 8px);
    /* כחול-פחם (Slate 800) יוקרתי עם שקיפות מינימלית */
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: whitesmoke;
    font-size: 11.5px;
    font-weight: 400; /* משקל רך יותר, לא בולד מדי */
    letter-spacing: 0.01em;
    padding: 7px 14px;
    border-radius: 8px; /* פינות קצת יותר עגולות ורכות */
    width: max-content;
    max-width: 90px;
    text-align: center;
    line-height: 1.5;
    white-space: normal;
    word-wrap: break-word;
    /* צל מפוזר ועמוק, לא חד */
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* הצ'ופצ'יק (החץ) */
[data-tooltip]::before {
    content: '';
    bottom: calc(100% + 2px);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    /* תואם לצבע הרקע של הקופסה */
    border-color: rgba(17, 24, 39, 0.95) transparent transparent transparent;
}

/* הופעת הטולטיפ במעבר עכבר */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    /* אנימציית הופעה רכה עם השהייה (Delay) של 0.15 שניות */
    transition: opacity 0.25s ease-out 0.15s, transform 0.25s ease-out 0.15s, visibility 0s linear 0.15s;
}


/* ============================================
   Document Navigation — Premium Inline Badge
   Charcoal dark style, appears at end of line
   ============================================ */

/* ─────────────────────────────────────────────────────────────
 * .doc-nav-link — legal-document cross-reference pill
 * ─────────────────────────────────────────────────────────────
 * A subtle, professional "ראו סעיף N ↗" pill that sits INLINE
 * with the text and travels with the prose. Replaces the old
 * dark-square icon that competed visually with the bold section
 * label and looked clumsy in a legal product.
 *
 * Inline by default — refs in flowing prose ("...אצלך בסעיף 6
 * וגם בשורת המצ"ב") stay on the same line as the text, so the
 * reader's eye doesn't break. In bulleted lists where each item
 * ends with a ref, the pill naturally sits at end-of-line.
 *
 * Trailing SVG (arrow-up-right) — the universal "navigates
 * elsewhere" symbol. Tells the user at a glance that this is a
 * clickable jump-target, not a static label or annotation. The
 * arrow itself is direction-agnostic (always points ↗ regardless
 * of text direction).
 *
 * Quiet at rest, clear on hover. Brand gold (--color-accent)
 * gives affordance without shouting. Tag-like radius (4px), not
 * bubble-like — fits a legal-document aesthetic, not a chat app.
 */
.doc-nav-link {
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
padding: 2px 6px;
margin-inline-start: 4px;
border: 1px solid rgba(93, 87, 87, 0.25);
border-radius: 12px;
font-size: 12px;
font-weight: 500;
line-height: 1.4;
color: #1a1a1a;
text-decoration: none;
background: #f0f2f5;
cursor: pointer;
transition: background-color 0.2s ease, 
color 0.2s ease,
border-color 0.2s ease, 
transform 0.1s ease;
}

.doc-nav-link:hover {
  background: var(--color-accent, #b49b67);
  border-color: var(--color-accent, #b49b67);
  color: #fff;
}

.doc-nav-link:active {
  transform: scale(0.97);
}

.doc-nav-link:focus-visible {
  outline: 2px solid var(--color-accent, #b49b67);
  outline-offset: 2px;
}

/* Trailing nav-arrow icon. inherits color from the pill so the
 * hover state flips it from gold to white in one transition. */
.doc-nav-link svg {
  display: inline-block;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  stroke: currentColor;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.doc-nav-link:hover svg {
  opacity: 1;
}

.thinking-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 0;
  font-size: 13px;
  color: var(--text-secondary, #888);
}

.thinking-inline .thinking-dots {
  display: flex;
  gap: 3px;
}

.thinking-inline .thinking-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-secondary, #888);
  animation: thinking-dot-bounce 1.2s ease-in-out infinite;
}

.thinking-inline .thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-inline .thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinking-dot-bounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ══════════════════════════════════════
   Tool Thinking Bar (style library search)
   ══════════════════════════════════════ */

.tool-thinking-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 13px;
  color: var(--text-secondary, #888);
}

.tool-thinking-indicator {
  width: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  padding-top: 2px;
}

.tool-thinking-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary, #888);
}

.tool-thinking-icon.done {
  color: var(--text-tertiary, #aaa);
}

.tool-thinking-line {
  width: 1px;
  flex: 1;
  margin-top: 4px;
  background: var(--border-light, #e0e0e0);
}

.tool-thinking-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.tool-thinking-text {
  line-height: 1.5;
}

.tool-thinking-spinner {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-tertiary, #aaa);
}

/* Thinking dots */
.thinking-dots {
  display: flex;
  gap: 3px;
}

.thinking-dots span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-secondary, #888);
  animation: thinking-dot-bounce 1.2s ease-in-out infinite;
}

.thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinking-dot-bounce {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.style-lib-load-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  border: 1px solid #d4c9a8;
  border-radius: 6px;
  background: #fff;
  color: #6b5d3e;
  font-size: 12px;
  font-family: 'Heebo', sans-serif;
  cursor: pointer;
  transition: all 0.15s ease;
}

.style-lib-load-btn:hover {
    background: #faf5ed;
    border-color: #b49b67;
}

.style-lib-load-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.style-lib-action-buttons {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.style-doc-results-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.style-doc-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #d4c9a8;
    border-radius: 8px;
    background: #fff;
}

.style-doc-info {
    flex: 1;
    min-width: 0;
}

.style-doc-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #3d3425;
}

.style-doc-title svg {
    flex-shrink: 0;
    color: #b49b67;
}

.style-doc-score {
    font-size: 11px;
    font-weight: 400;
    color: #9a8a6a;
}

.style-doc-summary {
    font-size: 12px;
    color: #6b5d3e;
    margin-top: 4px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.style-doc-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid #b49b67;
    border-radius: 6px;
    background: #faf5ed;
    color: #6b5d3e;
    font-size: 12px;
    font-family: 'Heebo', sans-serif;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.style-doc-open-btn:hover {
    background: #b49b67;
    color: #fff;
}

.style-doc-open-btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.style-doc-no-file {
    font-size: 11px;
    color: #9a8a6a;
    white-space: nowrap;
}


/* ═══════════════════════════════════════════
   Template Offer Card — Action-Driven Design
   Matches Page Picker DNA (white surface, dark icon block,
   gold accents, black primary CTA)
   ═══════════════════════════════════════════ */

.template-offer-card {
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  margin: 12px 0;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.template-offer-card:hover {
  border-color: #d4d4d4;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.04);
}

/* ── Header ───────────────────────────────────── */
.template-offer-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid #e5e5e5;
  background: #ffffff;
  font-size: 14px;
  font-weight: 600;
  color: #111111;
  letter-spacing: -0.01em;
}

/* Lead SVG becomes the dark icon block (like .pp-header-icon) */
.template-offer-header > svg:first-child {
  width: 32px !important;
  height: 32px !important;
  background: #111111;
  color: #ffffff;
  stroke: #ffffff;
  border-radius: 8px;
  padding: 7px;
  box-sizing: border-box;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.template-offer-card:hover .template-offer-header > svg:first-child {
  transform: rotate(-4deg);
}

/* Score badge with pulsing gold dot */
.template-offer-header .template-offer-score {
  margin-inline-start: auto;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 100px;
  background: #fffdf7;
  color: #b49b67;
  border: 1px solid #e5dcc9;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.template-offer-header .template-offer-score::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b49b67;
  box-shadow: 0 0 0 0 rgba(180, 155, 103, 0.6);
  animation: scorePulse 2s ease-in-out infinite;
}

@keyframes scorePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 155, 103, 0.5); }
  50%      { box-shadow: 0 0 0 4px rgba(180, 155, 103, 0); }
}

/* ── Body ─────────────────────────────────────── */
.template-offer-filename {
  padding: 14px 18px 0;
  font-size: 13px;
  font-weight: 600;
  color: #111111;
  background: #fdfdfd;
  direction: rtl;
  unicode-bidi: plaintext;
}

.template-offer-summary {
  padding: 6px 18px 14px;
  font-size: 12.5px;
  line-height: 1.65;
  color: #666666;
  background: #fdfdfd;
}

/* ── Hint — gold tone (matches .pp-credit-tip) ── */
.template-offer-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 18px 14px;
  padding: 10px 12px;
  background: #fffdf7;
  border: 1px solid #e5dcc9;
  border-radius: 6px;
  font-size: 11.5px;
  line-height: 1.55;
  color: #8a7340;
}

.template-offer-hint svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #b49b67;
  stroke: #b49b67;
}

/* ── Actions Section ──────────────────────────── */
.template-offer-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid #e5e5e5;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
}

/* ── Primary CTA — black gradient with gold shimmer ── */
.btn-template-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  letter-spacing: -0.01em;
}

.btn-template-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(180, 155, 103, 0.25) 50%,
    transparent 70%
  );
  transform: translateX(100%);
  transition: transform 0.7s ease;
}

.btn-template-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(17, 17, 17, 0.18),
              0 0 0 1px rgba(180, 155, 103, 0.3);
}

.btn-template-primary:hover::before {
  transform: translateX(-100%);
}

.btn-template-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(17, 17, 17, 0.15);
}

.btn-template-primary svg {
  color: #b49b67;
  stroke: #b49b67;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

.btn-template-primary:hover svg {
  transform: rotate(15deg) scale(1.1);
}

/* ── Secondary actions row — two equal buttons ── */
.template-offer-actions-row {
  display: flex;
  gap: 8px;
}

.btn-template-secondary {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  color: #444444;
  cursor: pointer;
  transition: all 0.15s ease;
}

.btn-template-secondary:hover {
  background: #fffdf7;
  border-color: #b49b67;
  color: #111111;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(180, 155, 103, 0.12);
}

.btn-template-secondary:active {
  transform: translateY(0);
}

.btn-template-secondary svg {
  color: #888;
  stroke: #888;
  flex-shrink: 0;
  transition: color 0.15s ease;
}

.btn-template-secondary:hover svg {
  color: #b49b67;
  stroke: #b49b67;
}

/* Loading state — used by "עבוד על המסמך" while opening Word */
.btn-template-secondary.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* ── Status message (replaces actions after click) ── */
.template-offer-status {
  display: block;
  padding: 14px 18px;
  text-align: center;
  font-size: 13px;
  color: #666666;
  background: #fdfdfd;
  border-top: 1px solid #e5e5e5;
}

/* ── Thinking dots (loading indicator inside buttons) ── */
.thinking-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}

.thinking-dots span {
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  animation: dotPulse 1.4s infinite ease-in-out both;
}

.thinking-dots span:nth-child(1) { animation-delay: -0.32s; }
.thinking-dots span:nth-child(2) { animation-delay: -0.16s; }

@keyframes dotPulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%           { opacity: 1;   transform: scale(1);   }
}

/* ── Mobile ───────────────────────────────────── */
@media (max-width: 480px) {
  .template-offer-header,
  .template-offer-filename,
  .template-offer-summary,
  .template-offer-actions {
    padding-inline: 14px;
  }

  .template-offer-hint {
    margin-inline: 14px;
  }

  .template-offer-actions-row {
    flex-direction: column;
  }
}

/* Minimal conversational template offer */
.template-inline-offer {
  font-family: inherit;
}

.template-inline-offer p {
  margin: 0 0 8px;
}

.template-inline-offer p:last-child {
  margin-bottom: 0;
}

.template-inline-score {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 6px;
  padding: 1px 7px;
  border: 1px solid #e5dcc9;
  border-radius: 999px;
  color: #8a7340;
  background: #fffdf7;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.template-inline-summary {
  color: #666;
  font-size: 12.5px;
  line-height: 1.65;
}

.template-inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #eeeeee;
}

.btn-template-inline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  padding: 6px 10px;
  border: 1px solid #e5e5e5;
  border-radius: 7px;
  background: #ffffff;
  color: #444;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  min-width:fit-content;
}

.btn-template-inline:hover {
  background: #fafafa;
  border-color: #cfcfcf;
  color: #111;
}

.btn-template-inline.primary {
  background: #111;
  border-color: #111;
  color: #fff;
}

.btn-template-inline.primary:hover {
  background: #2a2a2a;
  border-color: #2a2a2a;
}

.btn-template-inline.icon svg {
  flex-shrink: 0;
}

.btn-template-inline.loading {
  opacity: 0.7;
  pointer-events: none;
}

.template-inline-status {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: #666;
  font-size: 12px;
}

@media (max-width: 480px) {
  .template-inline-actions {
    align-items: stretch;
  }

  .btn-template-inline {
    flex: 1 1 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Template-offer QUESTION UI (.tplq*)

   Bottom-sheet that slides up from the bottom of the taskpane when
   find_template surfaces a match. 4 explicit options + free-text
   input. Replaces the older .template-inline-offer card when
   FEATURE_TEMPLATE_QUESTION_UI is on.

   Visual language: white surface, 20px top radius, soft shadow,
   translucent backdrop. Slide-up via transform with a transition
   that gracefully reverses on dismiss.
   ═══════════════════════════════════════════════════════════════ */

/* Brief AI bubble that records the offer in conversation history.
   The actual decision UI lives in the bottom sheet; this just
   leaves a footprint in chat so when the user scrolls back later
   they see that a template was offered. */
.tplq-record {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #444;
  line-height: 1.4;
}
.tplq-record-icon {
  flex: 0 0 auto;
  font-size: 14px;
  line-height: 1;
}
.tplq-record-text {
  flex: 1 1 auto;
  min-width: 0;
}
.tplq-record-text strong {
  font-weight: 600;
  color: #222;
  word-break: break-word;
}
.tplq-record-score {
  display: inline-flex;
  align-items: center;
  margin-inline-start: 4px;
  padding: 0 6px;
  border: 1px solid #e5dcc9;
  border-radius: 999px;
  color: #8a7340;
  background: #fffdf7;
  font-size: 11px;
  font-weight: 600;
}

/* Wrapper — full-viewport overlay container. Holds the backdrop
   and the sheet. pointer-events flow only through the sheet's
   own surface; the wrapper itself accepts none. */
.tplq-sheet-wrapper {
  position: fixed;
  inset: 0;
  z-index: 950;
  pointer-events: none;
}

.tplq-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 24, 0);
  transition: background 220ms ease;
  /* No pointer-events — the user must explicitly hit X / Esc /
     pick an option / use the free-text. Clicks on the chat behind
     the sheet pass through and do nothing while the sheet is open
     (the keyboard handler is the only global listener). */
  pointer-events: none;
}

.tplq-sheet-wrapper.is-open .tplq-sheet-backdrop {
  background: rgba(20, 20, 24, 0.18);
}

.tplq-sheet-wrapper.is-closing .tplq-sheet-backdrop {
  background: rgba(20, 20, 24, 0);
}

/* The sheet itself — slides up from the bottom, sticky to the
   bottom edge with 20px top corners. */
.tplq-sheet {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  padding: 8px 16px 14px;
  background: #ffffff;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: none;
  box-shadow: 0 -10px 40px rgba(20, 20, 24, 0.14),
              0 -2px 10px rgba(20, 20, 24, 0.06);
  transform: translateY(110%);
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: auto;
  direction: rtl;
  text-align: right;
  overflow-y: auto;
}

.tplq-sheet-wrapper.is-open .tplq-sheet {
  transform: translateY(0);
}

.tplq-sheet-wrapper.is-closing .tplq-sheet {
  transform: translateY(110%);
}

/* Tiny gripper bar at the top — visual affordance that this is a
   slide-up sheet. Not draggable (would conflict with the chat
   scrolling under it on mobile); purely decorative. */
.tplq-sheet-grip {
  width: 36px;
  height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #e5e5e2;
  flex: 0 0 auto;
}

.tplq-sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}

.tplq-sheet-head-text {
  flex: 1 1 auto;
  min-width: 0;
}

.tplq-sheet-title {
  font-size: 14.5px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.35;
  margin-bottom: 2px;
}

.tplq-sheet-subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #666;
  line-height: 1.4;
  flex-wrap: wrap;
}

.tplq-sheet-subtitle strong {
  font-weight: 500;
  color: #333;
  word-break: break-word;
}

.tplq-score {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border: 1px solid #e5dcc9;
  border-radius: 999px;
  color: #8a7340;
  background: #fffdf7;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.tplq-sheet-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #888;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.tplq-sheet-close:hover {
  background: #f0f0ee;
  color: #222;
}

/* Per-option round "?" help button — sits in the top-left corner of
   each option in the attached-file sheet. Click toggles that option's
   explanation. The wrap is the positioning context (the option itself
   is a <button>, so the help can't nest inside it). */
.tplq-option-wrap {
  position: relative;
}

.tplq-option-help {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #dfdfdf;
  color: #8a8a86;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.tplq-option-help:hover {
  background: #e6e6e2;
  color: #333;
}

.tplq-option-help.is-active {
  background: #e5dcc9;
  color: #8a7340;
}

.tplq-sheet-summary {
  color: #666;
  font-size: 12px;
  line-height: 1.55;
  margin: 0 0 10px;
}

/* Busy overlay shown after the user picks an option but before the
   sheet finishes dismissing — keeps the user informed during the
   ~200ms slide-down. */
.tplq-sheet.is-busy .tplq-options,
.tplq-sheet.is-busy .tplq-freeform {
  opacity: 0.4;
  pointer-events: none;
}

.tplq-sheet-busy {
  position: absolute;
  inset: auto 16px 14px;
  padding: 8px 12px;
  border-radius: 10px;
  background: #fafaf6;
  border: 1px solid #ececea;
  color: #444;
  font-size: 12.5px;
  text-align: center;
}

.tplq-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.tplq-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ececea;
  border-radius: 12px;
  background: #ffffff;
  color: #222;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  text-align: right;
  transition: background 0.12s, border-color 0.12s, transform 0.06s;
}

.tplq-option:active {
  transform: scale(0.99);
}

.tplq-option:hover {
  background: #f6f6f4;
  border-color: #e5e5e2;
}

.tplq-option:focus-visible {
  outline: none;
  background: #f6f6f4;
  border-color: #c8c8c4;
}

.tplq-option.is-default {
  background: #faf8f3;
  border-color: #e5dcc9;
}

.tplq-option.is-default:hover {
  background: #f5f1e6;
  border-color: #d9ccab;
}

.tplq-option-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 4px;
  background: #ececea;
  color: #555;
  font-size: 10px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.tplq-option.is-default .tplq-option-num {
  background: #e5dcc9;
  color: #8a7340;
}

.tplq-option-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.tplq-option-label {
  font-weight: 500;
  color: #1a1a1a;
}

.tplq-option-hint {
  font-size: 11.5px;
  color: #777;
  line-height: 1.4;
}

/* Explanations collapsed by default; each option's "?" reveals its
   own (attached-file sheet only — scoped via --collapsible so the
   shared template sheet keeps its always-on hints). The extra left
   padding reserves a gutter for the "?" so it never overlaps text. */
.tplq-options--collapsible .tplq-option {
  padding-left: 32px;
}

.tplq-options--collapsible .tplq-option-hint {
  display: none;
}

.tplq-options--collapsible .tplq-option.show-hint .tplq-option-hint {
  display: block;
}

.tplq-freeform {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #eeeeee;
}

.tplq-freeform-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #ffffff;
  color: #222;
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  direction: rtl;
}

.tplq-freeform-input::placeholder {
  color: #aaa;
}

.tplq-freeform-input:focus {
  outline: none;
  border-color: #b8b8b4;
}

.tplq-freeform-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid #e5e5e5;
  border-radius: 6px;
  background: #ffffff;
  color: #555;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.tplq-freeform-submit:hover {
  background: #f6f6f4;
  border-color: #cfcfcf;
  color: #111;
}

.tplq-freeform-submit svg {
  flex-shrink: 0;
  /* Visual flip — the arrow icon points left by default; in an RTL
     "send" affordance we want it pointing toward the start of the line.
     Mirror with transform rather than authoring a separate SVG. */
  transform: scaleX(-1);
}

@media (max-width: 480px) {
  .tplq-sheet {
    padding: 8px 12px 14px;
  }
  .tplq-sheet-head {
    gap: 6px;
  }
  .tplq-option {
    padding: 9px 8px;
  }
  .tplq-option-hint {
    font-size: 11px;
  }
}

.message-bubble-after {
  margin-top: 8px;   /* הפרדה ויזואלית מהכרטיסיות */
}


/* ═══════════════════════════════════════════ */
/* Modes Menu — unified feature toggles       */
/* ═══════════════════════════════════════════ */
.modes-container {
    position: relative;
}

#modes-toggle {
    width: auto;
    padding: 0 8px;
    gap: 4px;
}

#modes-toggle .modes-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: #8a7340;
    border-radius: 999px;
}

#modes-toggle .modes-count[hidden] {
    display: none;
}

.modes-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    min-width: 280px;
    padding: 6px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: modesPopoverIn 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

[dir="ltr"] .modes-popover {
    right: auto;
    left: 0;
}

.modes-popover[hidden] {
    display: none;
}

@keyframes modesPopoverIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.mode-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
    transition: all 0.15s ease;
}

[dir="ltr"] .mode-item {
    text-align: left;
}

.mode-item:hover {
    background: #fafafa;
}

.mode-item:focus-visible {
    outline: 2px solid #b49b67;
    outline-offset: -2px;
}

.mode-item.active {
    background: #ededec;
}

.mode-item.active:hover {
    background: #ebe5d5;
}

/* 🆕 v6.8 — Disabled state for the evidence-batch mode item.
   Applied by taskpane.ts when there are no attached files anywhere
   (state.attachedFiles + apiClient.getContextFilesCount both empty).
   We keep pointer-events: auto so the click handler can fire and show
   a "needs files" toast — visual cue says "off" but interaction still
   nudges the user. */
.mode-item.disabled,
.mode-item[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
}

.mode-item.disabled:hover,
.mode-item[aria-disabled="true"]:hover {
    background: transparent;
}

.mode-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f5f5f5;
    color: #666;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.mode-item.active .mode-item-icon {
    background: #fff;
    color: #8a7340;
    box-shadow: 0 1px 2px rgba(138, 115, 64, 0.1);
}

.mode-item-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mode-item-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

.mode-item-desc {
    font-size: 11.5px;
    color: #888;
    line-height: 1.4;
}

.mode-item.active .mode-item-title {
    color: #8a7340;
}

.mode-item-badge {
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.5;
    color: #8a7340;
    background: #fffdf7;
    border: 1px solid #e5dcc9;
    border-radius: 999px;
}

.mode-item.active .mode-item-badge {
    background: #fff;
    border-color: #d4c9a8;
}

.mode-item-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e5e5e5;
    color: transparent;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.mode-item.active .mode-item-check {
    background: #8a7340;
    color: #fff;
}

/* ─── Group container — wraps a mode + its secondary actions ─── */
.mode-item-group {
    display: flex;
    flex-direction: column;
}

/* ─── Secondary actions — visually anchored to the parent mode ─── */
  .mode-item-actions {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 14px 2px 0;
  border-top: 1px solid gainsboro;
  }

[dir="ltr"] .mode-item-actions {
    margin: 2px 12px 4px 22px;
    padding: 2px 0 2px 14px;
    border-right: none;
    border-left: 1.5px solid #e5e5e5;
}

/* ─── Each action — minimal, secondary in weight ─── */
.mode-action {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    font-weight: 400;
    color: #6b6b6b;
    text-decoration: none;
    text-align: right;
    cursor: pointer;
    transition: all 0.15s ease;
}

[dir="ltr"] .mode-action {
    text-align: left;
}

.mode-action:hover {
    background: #fafafa;
    color: #111;
}

.mode-action svg:first-child {
    flex-shrink: 0;
    color: #999;
    transition: color 0.15s ease;
}

.mode-action:hover svg:first-child {
    color: #8a7340;
}

.mode-action span {
    flex: 1;
}

.mode-action-arrow {
    flex-shrink: 0;
    opacity: 0.35;
    transition: opacity 0.15s ease;
}

.mode-action:hover .mode-action-arrow {
    opacity: 0.7;
}

/* Make the connecting line darker when the parent mode is active */
.mode-item-group:has(> .mode-item.active) .mode-item-actions {
    border-right-color: #d4c9a8;
}

[dir="ltr"] .mode-item-group:has(> .mode-item.active) .mode-item-actions {
    border-left-color: #d4c9a8;
}

/* ============================================================
   Welcome Guide v3 — minimalist legal design, RTL-correct.
   Strict typographic hierarchy, no cards, no shadows, thin lines,
   single accent color. The intro is a quiet brand mark + one
   professional action. The expanded guide is a vertical list of
   categories separated by 1px horizontal rules, with right-aligned
   Hebrew text that flows naturally from the typing animation.
   ============================================================ */

#welcome-screen .welcome-intro,
#welcome-screen .welcome-guide {
    width: 100%;
    max-width: 460px;
}

/* ---------- 1. Intro card (centered hero) ---------- */

.welcome-intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 72px 24px 40px;
    min-height: 260px;
}

.welcome-intro-brand {
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-text-tertiary, #999);
    margin-bottom: 36px;
    direction: ltr; /* English brand reads LTR even on RTL pages */
    user-select: none;
}

.how-to-start-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 28px;
    background: transparent;
    color: var(--color-text-main);
    border: 1px solid var(--color-text-secondary, #6b6b6b);
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease,
                background 0.18s ease;
    font-family: inherit;
    line-height: 1.2;
}

.how-to-start-btn:hover {
    border-color: var(--color-accent, #785832);
    color: var(--color-accent, #785832);
}

.how-to-start-btn:active {
    background: var(--color-accent, #785832);
    color: #fff;
    border-color: var(--color-accent, #785832);
}

.welcome-intro-hint {
    margin: 28px 0 0 0;
    font-size: 0.75rem;
    color: var(--color-text-tertiary, #999);
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* ---------- 2. Guide container — RTL, right-aligned ---------- */

.welcome-guide {
    /* Break inheritance of text-align: center from .welcome-state.
       Everything inside the guide flows right-to-left. */
    direction: rtl;
    text-align: right;

    display: flex;
    flex-direction: column;
    padding: 28px 16px 32px;
    animation: fadeIn 0.25s ease-out;
}

.welcome-guide-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 28px 0;
    padding: 0 4px 14px;
    border-bottom: 1px solid var(--color-border, #e5dfd0);
}

#welcome-guide-title {
    font-size: 0.85rem;
    font-weight: 500;
    margin: 0;
    color: var(--color-text-main);
    letter-spacing: 0.05em;
    text-align: right;
}

.guide-skip-btn,
.guide-back-btn {
    background: transparent;
    border: none;
    color: var(--color-text-tertiary, #999);
    font-size: 0.74rem;
    cursor: pointer;
    padding: 2px 4px;
    transition: color 0.15s ease;
    font-family: inherit;
}

.guide-skip-btn:hover,
.guide-back-btn:hover {
    color: var(--color-accent, #785832);
}

/* ---------- 3. Categories ---------- */

.guide-content {
    display: flex;
    flex-direction: column;
}

.guide-category {
    padding: 22px 4px;
    border-bottom: 1px solid var(--color-border, #e5dfd0);
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    text-align: right;
}

.guide-category:last-child {
    border-bottom: none;
}

.guide-category.revealed {
    opacity: 1;
    transform: translateY(0);
}

.guide-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    direction: rtl;
}

.guide-category-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent, #785832);
    opacity: 0.7;
    flex-shrink: 0;
}

.guide-category-title {
    /* The title may contain English ("Track Changes (Redline)"). Force
       RTL paragraph direction so the line still flows right-to-left
       even when the first strong char is Latin. unicode-bidi: isolate
       prevents the English fragment from pulling the whole line LTR. */
    direction: rtl;
    unicode-bidi: isolate;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--color-text-main);
    margin: 0;
    line-height: 1.3;
    letter-spacing: 0.01em;
    min-height: 1.3em;
    text-align: right;
}

.guide-category-note {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-text-tertiary, #999);
    transition: opacity 0.2s ease;
    direction: rtl;
}

.guide-category-desc {
    direction: rtl;
    text-align: right;
    font-size: 0.81rem;
    line-height: 1.65;
    color: var(--color-text-secondary);
    margin: 0 0 12px 0;
    min-height: 1.65em;
}

/* ---------- 4. Example links ---------- */

.guide-category-examples {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.guide-example-link {
    direction: rtl;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: transparent;
    border: none;
    padding: 4px 0;
    cursor: pointer;
    font-family: inherit;
    text-align: right;
    color: var(--color-text-secondary);
    font-size: 0.79rem;
    line-height: 1.55;
    transition: color 0.15s ease;
    opacity: 0;
    transform: translateY(2px);
    width: 100%;
}

.guide-example-link.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.2s ease, transform 0.2s ease, color 0.15s ease;
}

.guide-example-link:hover {
    color: var(--color-accent, #785832);
}

.guide-example-arrow {
    flex-shrink: 0;
    color: var(--color-accent, #785832);
    font-size: 0.85rem;
    line-height: 1.55;
    opacity: 0.55;
    font-weight: 300;
}

.guide-example-link:hover .guide-example-arrow {
    opacity: 1;
}

.guide-example-text {
    flex: 1 1 auto;
    text-align: right;
    direction: rtl;
}

/* ---------- 5. Footer ---------- */

.welcome-guide-footer {
    direction: rtl;
    text-align: center;
    padding: 28px 16px 16px;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-top: 1px solid var(--color-border, #e5dfd0);
    margin-top: 20px;
}

.welcome-guide-footer.shown {
    opacity: 1;
}

.welcome-guide-footer p {
    margin: 0 0 14px 0;
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* ---------- 6. Typing cursor (RTL-aware) ---------- */

.typing-cursor::after {
    content: '|';
    animation: cursor-blink 0.85s steps(1, end) infinite;
    color: var(--color-accent, #785832);
    margin-inline-start: 2px;
    font-weight: 300;
    opacity: 0.65;
}

@keyframes cursor-blink {
    0%, 49% { opacity: 0.65; }
    50%, 100% { opacity: 0; }
}

/* ---------- 7. Requirements — v3: minimal, bottom, no box ---------- */
/* Renders as a single muted inline line:
     דרישות · מסמך ריק · קובץ DOCX מצורף
   Pure typography. The dashed top border whispers "this is metadata,
   not part of the main content". */

.guide-category-requirements {
    direction: rtl;
    margin: 14px 0 0 0;
    padding: 10px 4px 0;
    border-top: 1px dashed var(--color-border, #e5dfd0);
    line-height: 1.6;
}

.guide-category-requirements-label {
    display: inline;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--color-text-tertiary, #999);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.85;
    min-height: 1em;
}

.guide-category-requirement {
    display: inline;
    font-size: 0.74rem;
    line-height: 1.6;
    color: var(--color-text-tertiary, #999);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.guide-category-requirement.revealed {
    opacity: 0.9;
}

.guide-category-requirement::before {
    content: '·';
    margin: 0 6px;
    color: var(--color-text-tertiary, #999);
    opacity: 0.5;
    position: static;
}

/* ---------- 7.5 Tip — practical hint above requirements ---------- */
/* Same visual language as requirements (muted inline line, dashed
   separator) but labeled "עצה". When both tip and requirements are
   present in the same category, the tip provides the separator and
   the requirements block sits flush below. */

.guide-category-tip {
    direction: rtl;
    margin: 14px 0 0 0;
    padding: 10px 4px 0;
    border-top: 1px dashed var(--color-border, #e5dfd0);
    line-height: 1.6;
}

.guide-category-tip-label {
    display: inline;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--color-text-tertiary, #999);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.85;
    min-height: 1em;
}

.guide-category-tip-text {
    display: inline;
    font-size: 0.74rem;
    line-height: 1.6;
    color: var(--color-text-tertiary, #999);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.guide-category-tip-text.revealed {
    opacity: 0.9;
}

.guide-category-tip-text::before {
    content: '·';
    margin: 0 6px;
    color: var(--color-text-tertiary, #999);
    opacity: 0.5;
}

.guide-category-tip + .guide-category-requirements {
    margin-top: 4px;
    padding-top: 0;
    border-top: none;
}

/* ---------- 8. Quick Actions block — display-only (non-clickable) ---------- */
/* Items render as plain <div>s. No click handler, no hover state,
   no pointer cursor — quick actions are invoked from their toolbar
   tab, not from chat. The typewriter animation still runs for
   visual consistency with the rest of the guide. */

.quick-actions-block .guide-category-desc {
    margin-bottom: 18px;
}

.quick-actions-subgroup {
    margin-top: 20px;
}

.quick-actions-subgroup:first-of-type {
    margin-top: 0;
}

.quick-actions-subgroup-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-tertiary, #999);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
    min-height: 1em;
    opacity: 0.85;
}

.quick-action-item {
    direction: rtl;
    display: block;
    padding: 4px 0;
    padding-inline-start: 14px;
    font-size: 0.79rem;
    line-height: 1.55;
    color: var(--color-text-secondary);
    text-align: right;
    position: relative;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    cursor: default;
}

.quick-action-item.revealed {
    opacity: 1;
    transform: translateY(0);
}

.quick-action-item::before {
    content: '·';
    position: absolute;
    inset-inline-start: 0;
    top: 4px;
    color: var(--color-accent, #785832);
    opacity: 0.5;
    font-weight: 700;
}

.quick-action-name {
    font-weight: 500;
    color: var(--color-text-main);
}

.quick-action-name:not(:empty)::after {
    content: ' — ';
    color: var(--color-text-tertiary, #999);
    font-weight: 400;
}

.guide-category-examples-label {
    display: block;
    direction: rtl;
    font-size: 0.68rem;
    font-weight: 500;
    color: var(--color-text-tertiary, #999);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: 10px;
    min-height: 1em;
    opacity: 0.85;
}
/* ============================================================
   Update Notifier — toast shown when a newer deploy is detected.
   Fixed to the top of the taskpane (RTL: anchored to the right).
   Matches the welcome-guide design language: thin border, calm
   accent color, no shadows beyond a faint elevation.
   ============================================================ */

.update-toast {
    position: fixed;
    bottom: 16px;
    inset-inline-end: 12px;
    inset-inline-start: 12px;
    z-index: 9000;

    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;

    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e5dfd0);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

    direction: rtl;
    font-family: inherit;

    /* Hidden by default; .shown slides the toast UP from below.
       cubic-bezier(0.16, 1, 0.3, 1) is the "ease-out-expo" curve —
       quick initial movement that decelerates smoothly. Feels native. */
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.update-toast.shown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.update-toast-message {
    flex: 1 1 auto;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-main);
    line-height: 1.35;
    text-align: right;
}

.update-toast-refresh {
    flex-shrink: 0;
    background: transparent;
    color: var(--color-accent, #785832);
    border: 1px solid var(--color-accent, #785832);
    border-radius: 14px;
    padding: 4px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}

.update-toast-refresh:hover {
    background: var(--color-accent, #785832);
    color: #fff;
}

.update-toast-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: var(--color-text-tertiary, #999);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 3px;
    transition: color 0.15s ease, background 0.15s ease;
    font-family: inherit;
    display: none;
}

.update-toast-close:hover {
    color: var(--color-text-main);
    background: var(--color-bg-subtle, #faf7f0);
}

/* ==========================================
   🆕 v6.9 PR-13 — Extra Thinking Banner
   ==========================================
   Persistent reminder shown above the chat input when the Extra
   Thinking mode is ON. Built/removed by updateExtraThinkingBanner()
   in taskpane.ts; the toggle lives in the Modes popover.
*/
.extra-thinking-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    margin: 6px 0 4px 0;
    background: linear-gradient(90deg, rgba(180, 155, 103, 0.10), rgba(180, 155, 103, 0.04));
    border: 1px solid rgba(180, 155, 103, 0.35);
    border-radius: 8px;
    font-size: 12.5px;
    color: var(--color-text-main, #2a2417);
    line-height: 1.35;
}

.extra-thinking-banner-icon {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}

.extra-thinking-banner-text {
    flex: 1;
}

/* ============================================================
 * Rich chat-answer content  (feat/chat-rich-html)
 * ------------------------------------------------------------
 * The chat model now emits semantic HTML with nomos-* classes
 * (see "OUTPUT FORMAT" in backend handleChat.js). All styling
 * lives HERE, centrally, so the model only marks up STRUCTURE
 * and the look stays consistent + branded — and we can restyle
 * every past answer by editing CSS alone.
 *
 * Scoped to .message-bubble so it covers BOTH freshly-streamed
 * answers (rendered into .final-answer) and answers hydrated
 * from history (innerHTML set directly on the bubble).
 * ============================================================ */

/* Base — every table in a chat answer is readable, framed, RTL. */
.message-bubble table {
    width: 100%;
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 13px;
    line-height: 1.5;
    direction: rtl;
    text-align: right;
}
.message-bubble table th,
.message-bubble table td {
    padding: 7px 11px;
    border: 1px solid var(--color-border, #E2E8F0);
    vertical-align: top;
}

/* nomos-table — the branded treatment the model is told to prefer:
 * rounded frame, gold header row, gentle zebra striping. */
.message-bubble .nomos-table {
    border: 1px solid var(--color-border, #E2E8F0);
    border-radius: 8px;
    overflow: hidden;                 /* let the radius clip the header */
}
.message-bubble .nomos-table th,
.message-bubble .nomos-table td {
    border: none;
    border-bottom: 1px solid var(--color-border, #E2E8F0);
    border-inline-start: 1px solid var(--color-divider, #F1F5F9);
}
.message-bubble .nomos-table th:first-child,
.message-bubble .nomos-table td:first-child {
    border-inline-start: none;
}
.message-bubble .nomos-table thead th {
    background: var(--color-accent-light, #f5f2eb);
    color: var(--color-text-main, #0F172A);
    font-weight: 600;
    border-bottom: 1px solid var(--color-accent, #b49b67);
    white-space: nowrap;
}
.message-bubble .nomos-table tbody tr:nth-child(even) {
    background: var(--color-surface-hover, #F1F5F9);
}
.message-bubble .nomos-table tbody tr:last-child td {
    border-bottom: none;
}

/* nomos-note — a short highlighted aside / warning / tip. */
.message-bubble .nomos-note {
    margin: 10px 0;
    padding: 9px 12px;
    border-inline-start: 3px solid var(--color-accent, #b49b67);
    background: var(--color-accent-light, #f5f2eb);
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-main, #0F172A);
}
.message-bubble .nomos-note strong { font-weight: 600; }

/* ── 🕓 nomos-timeline — vertical dated event flow (RTL) ────────────────────
   Emitted only when the Timeline playbook is active (armed or auto-loaded),
   so the model never has to choose timeline-vs-table ad hoc. PDF export is
   faithful (collectAnswerCss ships this rule); DOCX/copy degrade gracefully
   to a dated list (pseudo-element line/dots can't be inlined). */
.message-bubble .nomos-timeline {
    position: relative;
    margin: 14px 0;
    padding: 2px 18px 2px 0;          /* room for the line on the right (RTL) */
    border-right: 2px solid var(--color-accent, #b49b67);
    list-style: none;
}
.message-bubble .nomos-tl-item {
    position: relative;
    margin: 0 0 14px;
    padding: 0 16px 0 0;
}
.message-bubble .nomos-tl-item::before {
    content: "";
    position: absolute;
    top: 4px;
    right: -25px;                     /* sit on the line */
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--color-accent, #b49b67);
    box-shadow: 0 0 0 3px var(--color-surface, #fff);
}
.message-bubble .nomos-tl-item:last-child { margin-bottom: 0; }
.message-bubble .nomos-tl-date {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-accent-hover, #9a8455);
    margin-bottom: 2px;
}
.message-bubble .nomos-tl-text {
    display: block;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-main, #0F172A);
}

/* ==========================================================================
   🧩 Skills / Playbooks — curtain handle, active chip, bottom-sheet, modals
   ========================================================================== */

/* ── Handle (notch above the input) ───────────────────────────────────── */
.skills-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    margin: 0 auto var(--spacing-1);
    padding: 3px 14px 5px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-tertiary);
    border-radius: var(--radius-full);
    transition: color var(--transition), background var(--transition);
    touch-action: none;
}
.skills-handle:hover { color: var(--color-accent); background: var(--color-accent-light); }
.skills-handle-grip {
    display: block;
    width: 34px;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--color-border);
    transition: background var(--transition);
}
.skills-handle:hover .skills-handle-grip { background: var(--color-accent); }
.skills-handle-label { font-size: var(--text-xs); font-weight: 600; }

/* ── Active-skill chip (mirrors .pending-template-bar) ─────────────────── */
.active-skill-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    margin: var(--spacing-2) 0 0;
    padding: 6px 10px;
    background: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    color: var(--color-text-main);
}
.active-skill-bar[hidden] { display: none; }
.active-skill-icon { flex: 0 0 auto; }
.active-skill-label { flex: 1 1 auto; min-width: 0; display: flex; gap: 5px; align-items: baseline; }
.active-skill-prefix { color: var(--color-accent-hover); font-weight: 600; }
.active-skill-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active-skill-dismiss {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border: none; background: transparent; cursor: pointer;
    color: var(--color-text-secondary); border-radius: var(--radius-full);
}
.active-skill-dismiss:hover { background: rgba(0,0,0,0.06); color: var(--color-text-main); }

/* ── "Playbook applied" trace line in the conversation ────────────────── */
.skill-applied-rail { display: flex; justify-content: center; margin: 8px 0; }
.skill-applied-pill {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--color-accent-hover);
    background: var(--color-accent-light);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-full);
    padding: 3px 12px;
}
/* 🧩 Purpose-mismatch trace (armed a review/edit playbook then drafted): muted,
   neutral styling so it reads as "skipped/info", not the accent "applied" pill. */
.skill-applied-pill--skipped {
    color: var(--color-text-secondary, #64748b);
    background: var(--color-surface-2, #f1f5f9);
    border-color: var(--color-border, #e2e8f0);
    font-weight: 500;
}

/* ── Scrim + bottom-sheet curtain ─────────────────────────────────────── */
.skills-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition), visibility var(--transition);
    z-index: 1000;
}
.skills-scrim.shown { opacity: 1; visibility: visible; }

.skills-curtain {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 85vh;
    min-height: 75vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-top-left-radius: var(--radius-xl);
    border-top-right-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    transform: translateY(101%);
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1001;
    overscroll-behavior: contain;
}
.skills-curtain.open { transform: translateY(0); }

.skills-curtain-header {
    flex: 0 0 auto;
    padding: var(--spacing-2) var(--spacing-4) var(--spacing-3);
    border-bottom: 1px solid var(--color-divider);
}
.skills-curtain-grab {
    display: block;
    width: 40px; height: 4px;
    margin: 4px auto var(--spacing-3);
    border-radius: var(--radius-full);
    background: var(--color-border);
}
.skills-curtain-titlerow { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-2); }
.skills-curtain-title { font-size: var(--text-base); font-weight: 700; color: var(--color-text-main); }
.skills-curtain-actions { display: flex; gap: var(--spacing-2); }
.skills-curtain-btn {
    padding: 5px 12px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition);
}
.skills-curtain-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.skills-curtain-btn-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.skills-curtain-btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: #fff; }

/* ── Tabs (אישי / ארגוני / מערכת) ──────────────────────────────────────── */
.skills-tabs {
    flex: 0 0 auto;
    display: flex;
    gap: 4px;
    padding: var(--spacing-2) var(--spacing-4) 0;
    border-bottom: 1px solid var(--color-divider);
}
.skills-tab {
    appearance: none;
    border: none;
    background: transparent;
    padding: 8px 12px 10px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.skills-tab:hover { color: var(--color-text-main); }
.skills-tab.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.skills-tab-count {
    font-size: 11px;
    font-weight: 700;
    background: var(--color-surface-hover);
    color: var(--color-text-secondary);
    border-radius: var(--radius-full);
    padding: 0 6px;
}
.skills-tab.is-active .skills-tab-count { background: var(--color-accent-light); color: var(--color-accent-hover); }

/* ── Curtain search ───────────────────────────────────────────────────── */
.skills-search { flex: 0 0 auto; padding: var(--spacing-2) var(--spacing-4) 0; }
.skills-search-input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-main);
    font-size: var(--text-sm);
    font-family: inherit;
}
.skills-search-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }

/* ── Cards grid ───────────────────────────────────────────────────────── */
.skills-grid {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-3);
    padding: var(--spacing-4);
}
@media (max-width: 360px) { .skills-grid { grid-template-columns: 1fr; } }

.skill-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: var(--spacing-3);
    text-align: start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
    height: fit-content;
}
.skill-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.skill-card.is-active { border-color: var(--color-accent); background: var(--color-accent-light); }
.skill-card-icon {
    display: flex; align-items: center; justify-content: center;
    color: #4b4029;
}
.skill-svg-icon { width: 22px; height: 22px; display: block; fill: #f1eadc; stroke-width: 1.25;  }
.skills-manage-name .skill-svg-icon { width: 16px; height: 16px; vertical-align: -3px; display: inline-block; color: var(--color-accent-hover); }

/* Icon picker (editor) */
.skills-icon-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
    gap: 6px;
}
.skills-icon-opt {
    height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-surface); color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 8px);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.skills-icon-opt:hover { border-color: var(--color-accent); color: var(--color-text-main); }
.skills-icon-opt.is-selected { border-color: var(--color-accent); background: var(--color-accent-light); color: var(--color-accent-hover); }
.skills-icon-opt .skill-svg-icon { width: 20px; height: 20px; }
.skill-card-name { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-main); }
.skill-card-desc {
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.skill-card-badges { display: flex; gap: 4px; margin-top: 2px; }
.skill-card-badge {
    font-size: 10px; font-weight: 700;
    padding: 1px 7px; border-radius: var(--radius-full);
    background: var(--color-surface-hover); color: var(--color-text-secondary);
}
.skill-card-badge-office { background: var(--color-accent-light); color: var(--color-accent-hover); }
.skill-card-badge-endorsed { background: #FEF3C7; color: #B45309; }
.skill-card-badge-cat { background: var(--color-accent-light); color: var(--color-accent-hover); }
/* 🧩 Purpose badges — one professional pastel per purpose so ניסוח / עריכה / סקירה
   are distinguishable at a glance (soft bg + readable text, tuned for contrast). */
.skill-card-badge-purpose-draft  { background: #f1f5f9; color: #1D4ED8; } /* ניסוח — כחול */
.skill-card-badge-purpose-edit   { background: #f1f5f9; color: #C2410C; } /* עריכה — כתום */
.skill-card-badge-purpose-review { background: #f1f5f9; color: #15803D; } /* סקירה — ירוק */

/* 🧩 Filters under the search box — category (accent) + purpose (per-purpose pastel).
   Single-select per row; active chip gets a border in its own color. */
.skills-filters { display: flex; flex-direction: column; gap: 6px; padding: 8px 15px 2px 0px; }
.skills-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.skills-filter-label { font-size: 11px; color: var(--color-text-secondary); min-width: 46px; }
.skills-filter-chip {
    font-size: 11px; font-weight: 500;
    padding: 3px 10px; border-radius: var(--radius-full);
    border: 1px solid transparent; cursor: pointer;
    background: var(--color-surface-hover); color: var(--color-text-secondary);
}
.skills-filter-chip:hover { filter: brightness(0.97); }
.skills-filter-chip.is-active { border-color: currentColor; font-weight: 700; }
.skills-filter-chip--cat    { background: var(--color-accent-light); color: var(--color-accent-hover); }
.skills-filter-chip--more   { background: transparent; border: 1px dashed var(--color-border); color: var(--color-text-secondary); }
.skills-filter-chip--draft  { color: rgb(62, 100, 209); }
.skills-filter-chip--edit   { color: #C2410C; }
.skills-filter-chip--review { color: rgb(86, 149, 109); }

/* Kebab (⋮) button on each card */
.skill-card { position: relative; }
.skill-card-kebab {
    position: absolute;
    inset-inline-end: 4px;
    top: 4px;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent;
    color: var(--color-text-secondary);
    font-size: 18px; line-height: 1; font-weight: 700;
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
    opacity: 0.45;
    transition: opacity var(--transition), background var(--transition);
}
.skill-card:hover .skill-card-kebab { opacity: 1; }
.skill-card-kebab:hover { background: var(--color-surface-hover); color: var(--color-text-main); }

/* Kebab dropdown menu */
.skill-card-menu {
    z-index: 100000;
    min-width: 150px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.18));
    padding: 4px;
    display: flex; flex-direction: column;
}
.skill-card-menu-item {
    text-align: start;
    padding: 8px 12px;
    border: none; background: transparent;
    color: var(--color-text-main);
    font-size: var(--text-sm);
    border-radius: var(--radius-md, 6px);
    cursor: pointer;
}
.skill-card-menu-item:hover { background: var(--color-surface-hover); }
.skill-card-menu-item.is-danger { color: #DC2626; }
.skill-card-menu-item.is-danger:hover { background: #FEE2E2; }

/* Detail panel (card click) */
.skill-detail-scrim {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 100001;
    display: flex; align-items: center; justify-content: center;
    padding: var(--spacing-4, 16px);
}
.skill-detail {
    position: relative;
    width: min(440px, 92vw);
    max-height: 86vh; overflow-y: auto;
    background: var(--color-surface);
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,0.18));
    padding: var(--spacing-5, 22px);
}
.skill-detail-close {
    position: absolute; left: 12px; right: auto; top: 10px;
    width: 30px; height: 30px;
    border: none; background: transparent;
    font-size: 22px; line-height: 1; color: var(--color-text-secondary);
    cursor: pointer; border-radius: var(--radius-md, 6px);
}
.skill-detail-close:hover { background: var(--color-surface-hover); }
.skill-detail-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--spacing-3); padding-inline-end: 28px; }
.skill-detail-icon {
    width: 48px; height: 48px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-accent-light); color: var(--color-accent-hover);
    border-radius: 12px;
}
.skill-detail-icon .skill-svg-icon { width: 26px; height: 26px; }
.skill-detail-headtext { flex: 1; min-width: 0; }
.skill-detail-name { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--color-text-main); }
.skill-detail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.skill-detail-chip {
    font-size: var(--text-xs); font-weight: 700;
    padding: 2px 10px; border-radius: var(--radius-full);
    background: var(--color-surface-hover); color: var(--color-text-secondary);
}
.skill-detail-chip-purpose { background: var(--color-accent-light); color: var(--color-accent-hover); }
.skill-detail-chip-sys {
background: transparent;
color: #1c1b1d;
}
.skill-detail-explain {
    font-size: var(--text-sm); line-height: 1.7;
    color: var(--color-text-main);
    margin: 0 0 var(--spacing-4, 16px);
}
.skill-detail-section { margin-bottom: var(--spacing-4, 16px); }
.skill-detail-section h4 {
    margin: 0 0 8px; font-size: var(--text-xs); font-weight: 800;
    color: var(--color-text-secondary);
}
.skill-detail-tools { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; }
.skill-detail-tools li { font-size: var(--text-sm); color: var(--color-text-main); line-height: 1.5; }
.skill-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--spacing-4, 16px); }
.skill-detail-tag {
    font-size: var(--text-xs);
    padding: 2px 9px; border-radius: var(--radius-full);
    background: var(--color-surface-hover); color: var(--color-text-secondary);
}
.skill-detail-footer { display: flex; gap: 8px; justify-content: flex-start; }

.skills-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    padding: var(--spacing-6) var(--spacing-4);
    display: flex; flex-direction: column; align-items: center; gap: var(--spacing-3);
}

/* ── Modals (editor + manager) ────────────────────────────────────────── */
.skills-modal-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-4);
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--transition);
    z-index: 1100;
}
.skills-modal-overlay.shown { opacity: 1; }
.skills-modal {
    width: 100%;
    max-width: 560px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    transform: translateY(8px) scale(0.98);
    transition: transform var(--transition);
}
.skills-modal-overlay.shown .skills-modal { transform: translateY(0) scale(1); }
.skills-modal-header {
    flex: 0 0 auto;
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--color-divider);
}
.skills-modal-title { margin: 0; font-size: var(--text-lg); font-weight: 700; color: var(--color-text-main); }
.skills-modal-close {
    width: 30px; height: 30px;
    border: none; background: transparent; cursor: pointer;
    font-size: 22px; line-height: 1; color: var(--color-text-secondary);
    border-radius: var(--radius-full);
}
.skills-modal-close:hover { background: var(--color-surface-hover); color: var(--color-text-main); }
.skills-modal-body { flex: 1 1 auto; overflow-y: auto; padding: var(--spacing-5); display: flex; flex-direction: column; gap: var(--spacing-4); }
.skills-modal-footer {
    flex: 0 0 auto;
    display: flex; justify-content: flex-start; gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    border-top: 1px solid var(--color-divider);
}

/* Form fields */
.skills-field { display: flex; flex-direction: column; gap: 5px; }
.skills-field-row { display: flex; gap: var(--spacing-3); }
.skills-field-row .skills-field { flex: 1 1 0; }
.skills-field-label { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-secondary); }
.skills-field-hint { font-size: 11px; color: var(--color-text-tertiary); }
.skills-ns { display: flex; flex-wrap: wrap; gap: 8px; }
.skills-ns-item { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--color-text-main); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 4px 10px; cursor: pointer; }
.skills-ns-item input { accent-color: var(--color-accent); margin: 0; }
.skills-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-main);
    font-size: var(--text-sm);
    font-family: inherit;
}
.skills-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-light); }
.skills-input-icon { width: 64px; text-align: center; font-size: 18px; }
.skills-textarea { resize: vertical; min-height: 160px; line-height: 1.6; }

/* Buttons */
.skills-btn {
    padding: 9px 18px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--transition);
}
.skills-btn-primary { background: var(--color-accent); color: #fff; }
.skills-btn-primary:hover { background: var(--color-accent-hover); }
.skills-btn-primary:disabled { opacity: 0.6; cursor: default; }
.skills-btn-ghost { background: var(--color-surface); border-color: var(--color-border); color: var(--color-text-secondary); }
.skills-btn-ghost:hover { border-color: var(--color-text-secondary); color: var(--color-text-main); }

/* Manager list */
.skills-manage-list { display: flex; flex-direction: column; gap: var(--spacing-2); }
.skills-manage-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-3);
    padding: var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.skills-manage-main { min-width: 0; flex: 1 1 auto; }
.skills-manage-name { font-size: var(--text-sm); font-weight: 700; color: var(--color-text-main); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.skills-manage-desc { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skills-manage-actions { flex: 0 0 auto; display: flex; gap: 6px; }
.skills-action {
    padding: 4px 10px;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: var(--radius-full);
    font-size: 11px; font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
}
.skills-action:hover { border-color: var(--color-accent); color: var(--color-accent); }
.skills-action-danger:hover { border-color: var(--color-danger); color: var(--color-danger); }
.skills-badge { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: var(--radius-full); background: var(--color-surface-hover); color: var(--color-text-secondary); }
.skills-badge-office { background: var(--color-accent-light); color: var(--color-accent-hover); }
.skills-badge-endorsed { background: #FEF3C7; color: #B45309; }

/* Toast */
.skills-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translate(-50%, 20px);
    padding: 10px 18px;
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity var(--transition), transform var(--transition);
    z-index: 1200;
    pointer-events: none;
}
.skills-toast.shown { opacity: 1; transform: translate(-50%, 0); }
.skills-toast-err { background: var(--color-danger); }
.skills-toast-ok { background: var(--color-success); }

/* ── Auto-suggestion confirm card (suggest_skill) ─────────────────────── */
.skill-suggest-card {
    position: fixed;
    left: 50%;
    bottom: 84px;
    transform: translate(-50%, 16px);
    width: calc(100% - 32px);
    max-width: 460px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    opacity: 0;
    transition: opacity var(--transition), transform var(--transition);
    z-index: 1150;
    direction: rtl;
}
.skill-suggest-card.is-open { opacity: 1; transform: translate(-50%, 0); }
.skill-suggest-icon { font-size: 18px; line-height: 1.4; flex-shrink: 0; }
.skill-suggest-text { flex: 1 1 auto; min-width: 0; }
.skill-suggest-title { font-size: var(--text-sm); color: var(--color-text-main); }
.skill-suggest-reason { font-size: var(--text-xs); color: var(--color-text-secondary); margin-top: 2px; }
.skill-suggest-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
.skill-suggest-apply {
    padding: 6px 12px; border: none; border-radius: var(--radius-full);
    background: var(--color-accent); color: #fff; font-weight: 700; font-size: var(--text-xs); cursor: pointer;
}
.skill-suggest-apply:hover { background: var(--color-accent-hover); }
.skill-suggest-ignore {
    padding: 6px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-full);
    background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--text-xs); cursor: pointer;
}
.skill-suggest-ignore:hover { color: var(--color-text-main); border-color: var(--color-text-secondary); }

/* ── "/" slash quick-pick menu in the composer ────────────────────────── */
.slash-menu {
    position: fixed;
    max-height: 240px;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float);
    z-index: 1180;
    padding: 4px;
    direction: rtl;
}
.slash-item {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 10px; border: none; background: transparent;
    border-radius: var(--radius-sm); cursor: pointer; text-align: start;
    font-size: var(--text-sm); color: var(--color-text-main);
}
.slash-item:hover, .slash-item.is-active { background: var(--color-accent-light); }
.slash-item-icon {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--color-accent-light); color: var(--color-accent-hover);
    border-radius: 7px;
}
.slash-item-icon .skill-svg-icon { width: 16px; height: 16px; }
.slash-item-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.slash-badge { font-size: 10px; font-weight: 700; background: var(--color-surface-hover); color: var(--color-text-secondary); border-radius: var(--radius-full); padding: 1px 7px; }
.slash-empty { padding: 10px; color: var(--color-text-secondary); font-size: var(--text-xs); text-align: center; }