/* ═══════════════════════════════════════════
   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;
}

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;
    width:70%;
}

.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;
}

.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; }

/* 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. */

/* 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 {
    opacity: 0.7;
    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;
}
/* ═══════════════════════════════════════════
   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 {
    min-width: 280px;
    padding: var(--spacing-3);
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-8px);
    transition: all var(--transition);
}

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

.toast-icon {
    flex-shrink: 0;
    font-size: 18px;
}

.toast-message {
    flex: 1;
    font-size: var(--text-sm);
    color: var(--color-text-main);
}

/* ═══════════════════════════════════════════
   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); }
}

.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;
}

.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;
}

.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;
}

.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;
}