/* ============================================================
   JARVIS 2.0 panel (chat drawer)
   ============================================================
   Mounted on the right edge of .page-tabs-container.
   Drawer slides in from the right.
   Everything down to "Drawer" is the v0.41 sheet, unchanged
   (trigger, greeting, drag mode, hint chip, preview bubble, badge).
   The drawer itself is the approved chat panel; it uses the app's
   own tokens (themes.css), so dark and light follow the app.
   Body class .jarvis-incoming-file lights everything up
   while a file is being dragged anywhere on the page.
   ============================================================ */

/* ── Trigger (lives inside .page-tabs-container) ── */
.jarvis-fab-trigger {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.18s ease;
    font-family: inherit;
    position: relative;
}
.jarvis-fab-trigger:hover {
    color: var(--accent-orange);
    border-color: var(--accent-orange);
    background: rgba(249, 115, 22, 0.08);
}
.jarvis-fab-trigger .jarvis-fab-icon {
    color: var(--accent-orange);
    font-size: 0.95rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease;
}

/* Hover greeting — bubble on the LEFT of the trigger.
   "Hi, I can help you with shipment compliance! :)"
   Hidden by default, fades in on hover. Pointer-events:none so the bubble
   itself never traps the cursor. */
.jarvis-fab-trigger .jarvis-fab-greeting {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(8px);
    background: var(--bg-secondary);
    border: 1px solid var(--accent-orange);
    color: var(--accent-orange);
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-md);
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 18px rgba(249, 115, 22, 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 1100;
}
/* Tail pointing toward the trigger */
.jarvis-fab-trigger .jarvis-fab-greeting::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    border-left-color: var(--accent-orange);
}
.jarvis-fab-trigger:hover .jarvis-fab-greeting {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
/* Hide the greeting while a file is being dragged — the drag-state hint
   chip at the top owns the messaging in that mode. */
body.jarvis-incoming-file .jarvis-fab-trigger .jarvis-fab-greeting { display: none; }
/* Brand glyph — simple sparkle character used in trigger + drawer header */
.jarvis-ai-glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    color: inherit;
}
.jarvis-fab-trigger .jarvis-ai-glyph { font-size: 0.95rem; }
.jarvis-brand-icon .jarvis-ai-glyph { font-size: 1.1rem; }

/* ── Global drag mode: a file is being dragged anywhere on the page ── */
body.jarvis-incoming-file .jarvis-fab-trigger {
    background: rgba(249, 115, 22, 0.18);
    border-color: var(--accent-orange);
    color: #ffd6a5;
    box-shadow:
        0 0 0 1px rgba(249, 115, 22, 0.6),
        0 0 24px rgba(249, 115, 22, 0.55),
        0 0 48px rgba(249, 115, 22, 0.25);
    animation: jarvisIncomingPulse 1s ease-in-out infinite;
}
body.jarvis-incoming-file .jarvis-fab-trigger .jarvis-fab-icon {
    transform: scale(1.25);
    color: #fff7ed;
    text-shadow: 0 0 10px rgba(249, 115, 22, 0.85);
}
@keyframes jarvisIncomingPulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(249, 115, 22, 0.6),
            0 0 18px rgba(249, 115, 22, 0.45),
            0 0 36px rgba(249, 115, 22, 0.18);
    }
    50% {
        box-shadow:
            0 0 0 2px rgba(249, 115, 22, 0.85),
            0 0 30px rgba(249, 115, 22, 0.7),
            0 0 60px rgba(249, 115, 22, 0.35);
    }
}

/* Hint chip that appears next to the trigger while a file is being dragged */
.jarvis-fab-hint {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-orange);
    border-radius: var(--radius-md);
    padding: 0.45rem 0.7rem;
    font-size: 0.7rem;
    color: var(--accent-orange);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 0 20px rgba(249, 115, 22, 0.25);
    white-space: nowrap;
    pointer-events: none;
    z-index: 1100;
    animation: jarvisHintBounce 0.9s ease-in-out infinite;
}
.jarvis-fab-hint .hint-arrow {
    position: absolute;
    top: -6px;
    right: 24px;
    color: var(--accent-orange);
    font-size: 0.65rem;
    line-height: 1;
}
.jarvis-fab-hint[hidden] { display: none; }
@keyframes jarvisHintBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* ── Floating preview bubble (cursor-follow during drag, docked after drop) ── */
/* Lives on <body> so position:fixed can move it freely across the viewport. */
.jarvis-preview-bubble {
    position: fixed;
    top: 0;
    left: 0;
    min-width: 220px;
    max-width: 320px;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    background: var(--bg-secondary);
    border: 1px solid var(--accent-orange);
    border-radius: var(--radius-md);
    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.45),
        0 0 24px rgba(249, 115, 22, 0.35);
    pointer-events: none;     /* don't intercept the drag */
    z-index: 9999;
    transform-origin: top left;
    animation: jarvisBubbleIn 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.jarvis-preview-bubble[hidden] { display: none !important; }

/* Cursor-follow mode (during drag): no transition on left/top so the bubble
   tracks the cursor in real time without lag. Slight rotation to feel like
   a tilted card the user is carrying. */
.jarvis-preview-bubble.cursor-follow {
    transition: none;
    transform: rotate(-3deg);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(249, 115, 22, 0.55);
    animation: jarvisBubbleCarry 1.4s ease-in-out infinite;
}
@keyframes jarvisBubbleCarry {
    0%, 100% { transform: rotate(-3deg) scale(1); }
    50%      { transform: rotate(-1deg) scale(1.02); }
}

/* Docked mode (after drop): smoothly transitions into a near-trigger position
   and anchors there for the preview-bubble lifetime. */
.jarvis-preview-bubble.docked {
    transition: left 0.28s ease, top 0.28s ease, transform 0.28s ease;
    transform: rotate(0deg);
    animation: jarvisBubbleIn 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.jarvis-preview-bubble.docking {
    transition: left 0.28s ease, top 0.28s ease, transform 0.28s ease;
}
.jarvis-preview-bubble.fade-out {
    animation: jarvisBubbleOut 0.28s ease forwards;
}

@keyframes jarvisBubbleIn {
    0%   { opacity: 0; transform: translateY(-8px) scale(0.86); }
    100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes jarvisBubbleOut {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.94); }
}
/* Speech-bubble pointer arrow only in docked mode (doesn't make sense at cursor) */
.jarvis-preview-bubble.docked::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 22px;
    width: 12px;
    height: 12px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--accent-orange);
    border-left: 1px solid var(--accent-orange);
    transform: rotate(45deg);
}
.jarvis-preview-bubble .bubble-pdf-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 36px;
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    border-radius: 3px;
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px rgba(239, 68, 68, 0.35);
}
.jarvis-preview-bubble .bubble-body { flex: 1; min-width: 0; }
.jarvis-preview-bubble .bubble-name {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.jarvis-preview-bubble .bubble-name.muted {
    color: var(--text-secondary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
}
.jarvis-preview-bubble .bubble-meta {
    font-size: 0.66rem;
    color: var(--accent-orange);
    margin-top: 0.15rem;
}
.jarvis-preview-bubble .bubble-meta.muted { color: var(--text-muted); font-style: italic; }

.jarvis-fab-trigger.has-alerts {
    animation: jarvisFabAlertPulse 1.4s ease-in-out infinite;
    border-color: var(--accent-red);
    color: var(--accent-red);
}
@keyframes jarvisFabAlertPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.jarvis-fab-trigger.drag-over {
    background: rgba(249, 115, 22, 0.22);
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    transform: scale(1.06);
}
.jarvis-fab-trigger .badge-count {
    background: var(--accent-orange);
    color: #1a0f00;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.1rem 0.35rem;
    border-radius: 8px;
    margin-left: 0.2rem;
}
.jarvis-fab-trigger .badge-count[hidden] { display: none; }


/* NOTE for whoever edits below: css/themes.css (light theme) sets element-level rules, several with
   !important (button, span, p, li, label, code, th, td, input) and `div { background-color: inherit }`.
   So every rule of the panel is scoped under .jarvis-drawer and its colour / border declarations carry
   !important — otherwise the light theme repaints the panel. Keep that when adding a rule. */

/* ── Drawer (right slide-out) ── */
.jarvis-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 92vw;
    height: 100vh;
    background: var(--bg-secondary) !important;
    border-left: 1px solid var(--border-color) !important;
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
    transform: translateX(440px);
    transition: transform 0.22s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-primary) !important;
    /* local shorthands, all derived from the app tokens (themes.css) */
    --jv-line: var(--border-color);
    --jv-line-strong: var(--border-highlight, var(--na-border-strong, #475569));
    --jv-orange-soft: color-mix(in srgb, var(--accent-orange) 12%, transparent);
    --jv-orange-line: color-mix(in srgb, var(--accent-orange) 45%, transparent);
    --jv-green-soft: color-mix(in srgb, var(--accent-green) 12%, transparent);
    --jv-green-line: color-mix(in srgb, var(--accent-green) 40%, transparent);
    --jv-red-soft: color-mix(in srgb, var(--accent-red) 12%, transparent);
    --jv-on-accent: #1a0f00;
    --jv-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;}
[data-theme="light"] .jarvis-drawer { --jv-on-accent: #ffffff; box-shadow: -8px 0 24px rgba(16, 32, 51, 0.14);}
.jarvis-drawer.open { transform: translateX(0);}
.jarvis-drawer *, .jarvis-drawer *::before, .jarvis-drawer *::after { box-sizing: border-box;}
.jarvis-drawer [hidden] { display: none !important;}

/* Header — light navy to white, in both themes (approved mockup) */
.jarvis-drawer .jarvis-drawer-header{
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    flex: 0 0 auto;
    background: linear-gradient(135deg, #b9cdf0 0%, #dfe8f8 45%, #ffffff 100%) !important;
    color: #14213d !important;
    border-bottom: 1px solid #c3d2ea !important;}
.jarvis-drawer .jarvis-brand-icon{
    width: 28px; height: 28px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 9px;
    background: #14213d !important; border: 1px solid #14213d !important; color: #ffffff !important;
    font-size: 14px; line-height: 1;}
.jarvis-drawer .jv-brand{ min-width: 0; flex: 1 1 auto; line-height: 1.15;}
.jarvis-drawer .jv-nm{ font-weight: 700; letter-spacing: 0.06em; font-size: 13px; color: #14213d !important;}
.jarvis-drawer .jv-sub{ color: #46587c !important; font-size: 11px;}
.jarvis-drawer .jv-ver{
    font-family: var(--jv-mono); font-size: 10px; font-weight: 600;
    color: #9a3412 !important; border: 1px solid rgba(154, 52, 18, 0.45) !important; background: rgba(255, 255, 255, 0.6) !important;
    border-radius: 999px; padding: 0 5px; margin-left: 4px; white-space: nowrap;}
.jarvis-drawer .jv-views{ display: inline-flex; flex: 0 0 auto; border: 1px solid #9fb4d8 !important; border-radius: 6px; overflow: hidden; background: rgba(255, 255, 255, 0.55) !important;}
.jarvis-drawer .jv-views button{ font: inherit; font-size: 11px; font-weight: 600; padding: 3px 9px; border: 0 !important; border-radius: 0; background: none !important; color: #46587c !important; cursor: pointer;}
.jarvis-drawer .jv-views button + button{ border-left: 1px solid #9fb4d8 !important;}
.jarvis-drawer .jv-views button[aria-pressed="true"]{ background: #14213d !important; color: #ffffff !important;}
.jarvis-drawer #jv-log-count{ font-family: var(--jv-mono); font-weight: 500; opacity: 0.8;}
.jarvis-drawer .jarvis-drawer-close{
    flex: 0 0 auto; background: none !important; border: 0 !important; color: #46587c !important; font-size: 18px; line-height: 1;
    padding: 2px 6px; border-radius: 4px; cursor: pointer; font-family: inherit;}
.jarvis-drawer .jarvis-drawer-close:hover{ color: #14213d !important; background: rgba(20, 33, 61, 0.08) !important;}

/* Tabs: one chat per dropped PDF */
.jarvis-drawer .jv-tabbar{ display: flex; align-items: stretch; gap: 6px; padding: 5px 8px 0; border-bottom: 1px solid var(--jv-line) !important; background: var(--bg-secondary) !important; flex: 0 0 auto; min-height: 30px;}
.jarvis-drawer .jv-tabs{ display: flex; gap: 3px; overflow-x: auto; min-width: 0; flex: 1 1 auto; scrollbar-width: none;}
.jarvis-drawer .jv-tabs::-webkit-scrollbar{ display: none;}
.jarvis-drawer .jv-tab{ display: flex; align-items: center; flex: 0 0 auto; max-width: 150px; border: 1px solid var(--jv-line) !important; border-bottom: 0 !important; border-radius: 6px 6px 0 0; background: var(--bg-tertiary) !important;}
.jarvis-drawer .jv-tab.jv-on{ background: var(--bg-secondary) !important; border-color: var(--jv-orange-line) !important; box-shadow: inset 0 2px 0 var(--accent-orange);}
.jarvis-drawer .jv-tab-b{ display: flex; align-items: center; gap: 5px; min-width: 0; font: inherit; font-size: 11px; padding: 4px 2px 4px 7px; border: 0 !important; background: none !important; color: var(--text-secondary) !important; cursor: pointer;}
.jarvis-drawer .jv-tab.jv-on .jv-tab-b{ color: var(--text-primary) !important; font-weight: 600;}
.jarvis-drawer .jv-tab-n{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--jv-mono); font-size: 10.5px;}
.jarvis-drawer .jv-tab-x{ font: inherit; font-size: 13px; line-height: 1; padding: 2px 6px 3px 3px; border: 0 !important; background: none !important; color: var(--text-muted) !important; cursor: pointer;}
.jarvis-drawer .jv-tab-x:hover{ color: var(--accent-red) !important;}
.jarvis-drawer .jv-dot{ flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted) !important;}
.jarvis-drawer .jv-dot.ok{ background: var(--accent-green) !important;}
.jarvis-drawer .jv-dot.ask{ background: var(--accent-orange) !important;}
.jarvis-drawer .jv-clear{ flex: 0 0 auto; align-self: center; margin-bottom: 4px; font: inherit; font-size: 10.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--jv-line-strong) !important; background: none !important; color: var(--text-secondary) !important; cursor: pointer; white-space: nowrap;}
.jarvis-drawer .jv-clear:hover{ color: var(--accent-red) !important; border-color: var(--accent-red) !important;}

/* Chat */
.jarvis-drawer .jv-chat{ display: flex; flex-direction: column; gap: 7px; padding: 10px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--jv-line-strong) transparent;}
.jarvis-drawer .jv-chat:focus-visible{ outline: 2px solid var(--accent-orange); outline-offset: -2px;}
.jarvis-drawer .jv-pane{ display: flex; flex-direction: column; gap: 7px;}
.jarvis-drawer .jv-empty{ margin: auto; text-align: center; color: var(--text-muted) !important; font-size: 12.5px; line-height: 1.6;}
.jarvis-drawer .jv-msg{ display: flex; flex-direction: column; gap: 4px; max-width: 100%; min-width: 0;}
.jarvis-drawer .jv-who{ font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted) !important; font-weight: 600;}
.jarvis-drawer .jv-msg.jv-me{ align-items: flex-end;}
.jarvis-drawer .jv-bubble{ border: 1px solid var(--jv-line) !important; background: var(--bg-tertiary) !important; border-radius: 4px 8px 8px 8px; padding: 6px 9px; min-width: 0; max-width: 100%; overflow-wrap: anywhere; color: var(--text-primary) !important;}
.jarvis-drawer .jv-msg.jv-me .jv-bubble{ border-radius: 10px 4px 10px 10px; background: var(--bg-hover) !important; border-color: var(--jv-line-strong) !important;}
.jarvis-drawer .jv-bubble p, .jarvis-drawer .jv-verdict p, .jarvis-drawer .jv-modal-in p{ margin: 0;}
.jarvis-drawer .jv-bubble p + p{ margin-top: 3px;}
.jarvis-drawer .jv-sec + .jv-sec{ border-top: 1px solid var(--jv-line) !important; margin-top: 6px; padding-top: 6px;}
.jarvis-drawer .jv-sec p + p{ margin-top: 2px;}
.jarvis-drawer .jv-hello{ font-weight: 600; margin-bottom: 2px;}
.jarvis-drawer .jv-why{ color: var(--text-secondary) !important; font-size: 12px;}
.jarvis-drawer .jv-lbl{ font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted) !important; margin-right: 6px;}
.jarvis-drawer code { font-family: var(--jv-mono); font-size: 11.5px; background: none !important; color: inherit !important; padding: 0;}
.jarvis-drawer .jv-file{ display: flex; gap: 8px; align-items: center;}
.jarvis-drawer .jv-ext{ font-family: var(--jv-mono); font-size: 10px; font-weight: 600; padding: 3px 5px; border-radius: 4px; background: var(--jv-red-soft) !important; color: var(--accent-red) !important; flex: 0 0 auto;}
.jarvis-drawer .jv-fn{ font-family: var(--jv-mono); font-size: 11px; min-width: 0; overflow-wrap: anywhere;}
.jarvis-drawer .jv-pg{ color: var(--text-muted) !important; font-size: 11px; flex: 0 0 auto;}

/* Read block: two columns of small cells (label + where it was read on top, value below) */
.jarvis-drawer .jv-rd{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 12px; margin-top: 3px;}
.jarvis-drawer .jv-cell{ display: flex; flex-direction: column; min-width: 0;}
.jarvis-drawer .jv-cell.jv-wide{ grid-column: 1 / -1;}
.jarvis-drawer .jv-k{ display: flex; flex-wrap: wrap; column-gap: 6px; align-items: baseline; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted) !important; line-height: 1.3;}
.jarvis-drawer .jv-src{ font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 10px;}
.jarvis-drawer .jv-v{ font-family: var(--jv-mono); font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere;}

.jarvis-drawer .jv-pos{ border-left: 2px solid var(--accent-orange) !important; padding: 1px 0 1px 8px; display: flex; flex-wrap: wrap; column-gap: 8px; align-items: baseline; margin-top: 3px;}
.jarvis-drawer .jv-pos .jv-ref{ font-family: var(--jv-mono); font-weight: 600; font-size: 12.5px;}
.jarvis-drawer .jv-pos .jv-meta{ color: var(--text-secondary) !important; font-size: 11.5px;}

/* Checks + match meter */
.jarvis-drawer .jv-chk-head{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px;}
.jarvis-drawer .jv-checks{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; font-size: 11.5px;}
.jarvis-drawer .jv-checks li{ display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 7px; align-items: baseline;}
.jarvis-drawer .jv-ic{ font-family: var(--jv-mono); font-weight: 600; text-align: center;}
.jarvis-drawer .jv-pass .jv-ic{ color: var(--accent-green) !important;}
.jarvis-drawer .jv-fail .jv-ic{ color: var(--accent-orange) !important;}
.jarvis-drawer .jv-skip, .jarvis-drawer .jv-skip .jv-ic{ color: var(--text-muted) !important;}
.jarvis-drawer .jv-info{ color: var(--text-secondary) !important;}
.jarvis-drawer .jv-info .jv-ic{ color: var(--accent-blue) !important; font-style: italic;}
.jarvis-drawer .jv-passes summary{ cursor: pointer; color: var(--accent-green) !important; font-weight: 600; list-style-position: inside; font-size: 11.5px;}
.jarvis-drawer .jv-passes .jv-checks{ margin-top: 4px;}
.jarvis-drawer .jv-notes summary{ color: var(--accent-blue, #38bdf8) !important;}
.jarvis-drawer .jv-notes + .jv-passes{ margin-top: 3px;}
.jarvis-drawer .jv-score{ display: flex; align-items: center; gap: 6px;}
.jarvis-drawer .jv-pct{ font-family: var(--jv-mono); font-weight: 600; font-size: 13px; font-variant-numeric: tabular-nums;}
.jarvis-drawer .jv-sbar{ width: 64px; height: 5px; border-radius: 3px; background: var(--jv-line) !important; overflow: hidden;}
.jarvis-drawer .jv-sbar i{ display: block; height: 100%; background: currentColor !important;}
.jarvis-drawer .jv-slbl{ font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted) !important; font-weight: 700;}
.jarvis-drawer .jv-score.jv-hi{ color: var(--accent-green) !important;}
.jarvis-drawer .jv-score.jv-mid{ color: var(--accent-yellow) !important;}
.jarvis-drawer .jv-score.jv-lo{ color: var(--accent-red) !important;}

/* Verdict / question card */
.jarvis-drawer .jv-verdict{ border-radius: 4px 8px 8px 8px; padding: 7px 9px; border: 1px solid var(--jv-green-line) !important; background: var(--jv-green-soft) !important; color: var(--text-primary) !important; overflow-wrap: anywhere; min-width: 0; max-width: 100%;}
.jarvis-drawer .jv-verdict.jv-ask{ border-color: var(--jv-orange-line) !important; background: var(--jv-orange-soft) !important;}
.jarvis-drawer .jv-ttl{ font-weight: 700; margin-bottom: 4px;}
.jarvis-drawer .jv-verdict.jv-ok .jv-ttl{ color: var(--accent-green) !important;}
.jarvis-drawer .jv-verdict.jv-ask .jv-ttl, .jarvis-drawer .jv-modal-in .jv-ttl{ color: var(--accent-orange) !important;}
.jarvis-drawer .jv-cmp-table{ width: 100%; border-collapse: collapse; margin: 6px 0 2px; font-variant-numeric: tabular-nums; table-layout: fixed;}
.jarvis-drawer .jv-cmp-table th{ text-align: left; font-weight: 600; color: var(--text-muted) !important; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 6px 2px 0; background: none !important; border: 0 !important;}
.jarvis-drawer .jv-cmp-table td{ padding: 2px 6px 2px 0; font-family: var(--jv-mono); font-size: 11.5px; border: 0 !important; background: none !important; color: var(--text-primary) !important; overflow-wrap: anywhere; vertical-align: top;}
.jarvis-drawer .jv-cmp-table td.jv-diff{ color: var(--accent-orange) !important; font-weight: 600;}
.jarvis-drawer .jv-actions{ display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px;}
.jarvis-drawer .jv-btn{ font: inherit; font-size: 11.5px; font-weight: 600; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--jv-line-strong) !important; background: var(--bg-secondary) !important; color: var(--text-primary) !important; cursor: pointer;}
.jarvis-drawer .jv-btn:hover{ background: var(--bg-hover) !important;}
.jarvis-drawer .jv-btn.jv-primary{ background: var(--accent-orange) !important; border-color: var(--accent-orange) !important; color: var(--jv-on-accent) !important;}
.jarvis-drawer .jv-btn.jv-primary:hover{ filter: brightness(1.08);}
.jarvis-drawer .jv-btn:disabled{ opacity: 0.45; cursor: default;}
.jarvis-drawer .jv-btn.jv-chosen, .jarvis-drawer .jv-btn.jv-chosen:disabled{ opacity: 1; background: var(--jv-green-soft) !important; border-color: var(--jv-green-line) !important; color: var(--accent-green) !important; filter: none;}

.jarvis-drawer .jv-opts{ display: flex; flex-direction: column; gap: 4px; margin-top: 6px;}
.jarvis-drawer .jv-opt{ display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: center; text-align: left; width: 100%; font: inherit; font-size: 11.5px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--jv-line-strong) !important; background: var(--bg-secondary) !important; color: var(--text-primary) !important; cursor: pointer;}
.jarvis-drawer .jv-opt:hover{ background: var(--bg-hover) !important;}
.jarvis-drawer .jv-opt:disabled{ opacity: 0.5; cursor: default;}
.jarvis-drawer .jv-ltr{ width: 22px; height: 22px; display: grid; place-items: center; border-radius: 5px; border: 1px solid var(--jv-line-strong) !important; font-family: var(--jv-mono); font-weight: 600; font-size: 11.5px; color: var(--text-secondary) !important;}
.jarvis-drawer .jv-opt.jv-sugg{ border-color: var(--jv-orange-line) !important;}
.jarvis-drawer .jv-opt.jv-sugg .jv-ltr{ background: var(--accent-orange) !important; border-color: var(--accent-orange) !important; color: var(--jv-on-accent) !important;}
.jarvis-drawer .jv-ob{ display: flex; flex-direction: column; min-width: 0;}
.jarvis-drawer .jv-ol{ font-weight: 600; overflow-wrap: anywhere;}
.jarvis-drawer .jv-oh{ color: var(--text-secondary) !important; font-size: 11px; overflow-wrap: anywhere;}
.jarvis-drawer .jv-opt[aria-pressed] .jv-ltr{ border-radius: 4px;}
.jarvis-drawer .jv-opt.jv-chosen, .jarvis-drawer .jv-opt.jv-chosen:disabled, .jarvis-drawer .jv-opt-search.jv-chosen{ opacity: 1; background: var(--jv-green-soft) !important; border-color: var(--jv-green-line) !important;}
.jarvis-drawer .jv-opt.jv-chosen .jv-ltr, .jarvis-drawer .jv-opt-search.jv-chosen .jv-ltr{ background: var(--accent-green) !important; border-color: var(--accent-green) !important; color: var(--jv-on-accent) !important;}
.jarvis-drawer .jv-opt.jv-chosen .jv-ol::after{ content: " ✓"; color: var(--accent-green) !important;}
.jarvis-drawer .jv-tag{ font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-orange) !important; border: 1px solid var(--jv-orange-line) !important; border-radius: 999px; padding: 0 5px; margin-left: 4px; white-space: nowrap;}
.jarvis-drawer .jv-opt-search{ grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; cursor: default; border-color: var(--accent-orange) !important; background: var(--jv-orange-soft) !important;}
.jarvis-drawer .jv-opt-search:hover{ background: var(--jv-orange-soft) !important;}
.jarvis-drawer .jv-opt-search .jv-ltr{ background: var(--accent-orange) !important; border-color: var(--accent-orange) !important; color: var(--jv-on-accent) !important; margin-top: 3px;}
.jarvis-drawer .jv-back{ font: inherit; font-size: 15px; line-height: 1; width: 22px; height: 22px; margin-top: 3px; padding: 0; border-radius: 5px; border: 1px solid var(--jv-line-strong) !important; background: var(--bg-secondary) !important; color: var(--text-secondary) !important; cursor: pointer;}
.jarvis-drawer .jv-back:hover{ background: var(--bg-hover) !important; color: var(--text-primary) !important;}
.jarvis-drawer input.jv-q { display: block; width: 100%; margin: 0; font-family: var(--jv-mono); font-size: 12px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--jv-line-strong) !important; background: var(--bg-primary) !important; color: var(--text-primary) !important;}
.jarvis-drawer input.jv-q::placeholder { color: var(--text-muted) !important; font-family: inherit;}
.jarvis-drawer .jv-opt-search.jv-chosen .jv-q:disabled{ opacity: 1; border-color: var(--jv-green-line) !important;}
.jarvis-drawer .jv-sugs{ display: flex; flex-direction: column; gap: 3px; margin-top: 4px;}
.jarvis-drawer .jv-sug{ display: grid; grid-template-columns: minmax(0, auto) minmax(0, auto) minmax(0, 1fr); column-gap: 8px; align-items: baseline; text-align: left; width: 100%; font: inherit; font-size: 11.5px; padding: 4px 8px; border-radius: 5px; border: 1px solid var(--jv-line) !important; background: var(--bg-secondary) !important; color: var(--text-primary) !important; cursor: pointer;}
.jarvis-drawer .jv-sug:hover{ background: var(--bg-hover) !important; border-color: var(--jv-line-strong) !important;}
.jarvis-drawer .jv-sug:disabled{ opacity: 0.5; cursor: default;}
.jarvis-drawer .jv-sug .jv-ref{ font-family: var(--jv-mono); font-weight: 600;}
.jarvis-drawer .jv-sug .jv-cn{ font-family: var(--jv-mono); color: var(--text-secondary) !important;}
.jarvis-drawer .jv-sug .jv-meta{ color: var(--text-muted) !important; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.jarvis-drawer .jv-sug-note, .jarvis-drawer .jv-keys, .jarvis-drawer .jv-logref{ color: var(--text-muted) !important; font-size: 10.5px; margin-top: 3px;}
.jarvis-drawer .jv-logref{ font-family: var(--jv-mono); margin-top: 6px;}

/* Typed MRN / P2 */
.jarvis-drawer .jv-in-lbl{ display: block; margin-top: 6px;}
.jarvis-drawer input.jv-mrn-in { display: block; width: 100%; margin: 3px 0 0; font-family: var(--jv-mono); font-size: 13px; font-weight: 400; letter-spacing: 0.04em; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--jv-line-strong) !important; background: var(--bg-primary) !important; color: var(--text-primary) !important; text-transform: uppercase;}
.jarvis-drawer input.jv-mrn-in.ok { border-color: var(--accent-green) !important;}
.jarvis-drawer input.jv-mrn-in.bad { border-color: var(--accent-red) !important;}
.jarvis-drawer .jv-mrn-msg{ font-size: 11px; margin-top: 3px; color: var(--text-muted) !important; min-height: 15px;}
.jarvis-drawer .jv-mrn-msg.ok{ color: var(--accent-green) !important;}
.jarvis-drawer .jv-mrn-msg.bad{ color: var(--accent-red) !important;}

/* Multi-shipment helper */
.jarvis-drawer .jv-mrows{ display: flex; flex-direction: column; gap: 4px; margin-top: 6px;}
.jarvis-drawer .jv-mrow{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 5px 8px; border: 1px solid var(--jv-line-strong) !important; border-radius: 6px; background: var(--bg-secondary) !important; font-size: 11.5px;}
.jarvis-drawer .jv-mrow.jv-open{ border-style: dashed !important; border-color: var(--jv-orange-line) !important;}
.jarvis-drawer .jv-mrow label{ display: flex; flex-wrap: wrap; column-gap: 6px; align-items: baseline; min-width: 0; cursor: pointer; margin: 0; color: var(--text-primary) !important; font-weight: 400;}
.jarvis-drawer .jv-mrow input[type=checkbox] { accent-color: var(--accent-orange); width: auto; margin: 0;}
.jarvis-drawer .jv-mc, .jarvis-drawer .jv-mrow .jv-ref{ font-family: var(--jv-mono); font-weight: 600; overflow-wrap: anywhere;}
.jarvis-drawer .jv-mc{ color: var(--text-secondary) !important; font-weight: 500;}
.jarvis-drawer .jv-arrow{ color: var(--text-muted) !important;}
.jarvis-drawer .jv-mrow .jv-meta{ color: var(--text-muted) !important; font-size: 11px;}
.jarvis-drawer .jv-mscore{ font-family: var(--jv-mono); font-size: 11px; color: var(--accent-yellow) !important;}
.jarvis-drawer .jv-warn{ font-family: var(--jv-mono); font-weight: 600; color: var(--accent-orange) !important; width: 13px; text-align: center;}
.jarvis-drawer .jv-ms{ min-width: 0; grid-column: 2;}
.jarvis-drawer .jv-mini, .jarvis-drawer .jv-mrow .jv-back{ font: inherit; font-size: 11px; line-height: 1.45; width: auto; height: auto; margin: 0; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--jv-line-strong) !important; background: var(--bg-tertiary) !important; color: var(--text-secondary) !important; cursor: pointer;}
.jarvis-drawer .jv-mini:hover, .jarvis-drawer .jv-mrow .jv-back:hover{ background: var(--bg-hover) !important; color: var(--text-primary) !important;}
.jarvis-drawer .jv-mini:disabled{ opacity: 0.45; cursor: default;}
.jarvis-drawer .jv-mlink{ margin-top: 6px; border-style: dashed !important;}
.jarvis-drawer .jv-bubble.jv-learn{ border-color: var(--accent-blue) !important;}
.jarvis-drawer .jv-bubble.jv-learn .jv-lbl{ color: var(--accent-blue) !important;}

/* Working bubble and its trace line */
.jarvis-drawer .jv-dots{ display: inline-flex; align-items: center; gap: 4px; width: fit-content; padding: 8px 10px; color: var(--text-muted) !important; font-size: 11.5px;}
.jarvis-drawer .jv-tl{ margin-right: 4px;}
.jarvis-drawer .jv-dots i{ width: 5px; height: 5px; border-radius: 50%; background: var(--accent-orange) !important; opacity: 0.35;}
.jarvis-drawer .jv-trace{ display: flex; align-items: baseline; gap: 6px; font-size: 10.5px; color: var(--text-muted) !important; padding: 0 2px;}
.jarvis-drawer .jv-tm{ margin-left: auto; font-family: var(--jv-mono); font-size: 10px;}

.jarvis-drawer .jv-newmsg{ position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); z-index: 1; font: inherit; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--accent-orange) !important; background: var(--accent-orange) !important; color: var(--jv-on-accent) !important; cursor: pointer; box-shadow: var(--shadow-md);}

/* "Same PDF" dialog */
.jarvis-drawer .jv-modal{ position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--bg-primary) 70%, transparent) !important;}
.jarvis-drawer .jv-modal-in{ width: 100%; max-width: 320px; padding: 12px; border: 1px solid var(--jv-orange-line) !important; border-radius: 8px; background: var(--bg-secondary) !important; box-shadow: var(--shadow-lg);}
.jarvis-drawer .jv-modal-in p{ margin-top: 4px;}
.jarvis-drawer .jv-dup-name{ font-family: var(--jv-mono); font-size: 11.5px; overflow-wrap: anywhere; color: var(--text-secondary) !important;}

/* Drop overlay over the whole panel while a file is dragged on the page */
.jarvis-drawer .jv-veil{ position: absolute; inset: 0; display: none; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg-secondary) 82%, transparent) !important; pointer-events: none; z-index: 2;}
body.jarvis-incoming-file .jarvis-drawer.open .jv-veil { display: flex;}
body.jarvis-incoming-file .jarvis-drawer.open { border-left-color: var(--accent-orange) !important; box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--jv-orange-line), 0 0 28px var(--jv-orange-soft);}
body.jarvis-incoming-file .jarvis-drawer .jarvis-brand-icon { background: var(--accent-orange) !important; border-color: var(--accent-orange) !important; color: var(--jv-on-accent) !important;}
.jarvis-drawer .jv-veil-in{ display: flex; align-items: center; gap: 8px; padding: 12px 16px; border: 2px dashed var(--accent-orange) !important; border-radius: 10px; background: var(--jv-orange-soft) !important; color: var(--text-primary) !important; font-weight: 600; font-size: 13px;}
.jarvis-drawer .jv-veil-ext{ font-family: var(--jv-mono); font-size: 10px; font-weight: 600; padding: 3px 5px; border-radius: 4px; background: var(--jv-red-soft) !important; color: var(--accent-red) !important;}
body.jarvis-incoming-file .jarvis-drawer.jv-over .jv-veil-in { border-style: solid !important; background: var(--accent-orange) !important; color: var(--jv-on-accent) !important;}
body.jarvis-incoming-file .jarvis-drawer.jv-over .jv-veil-ext { background: var(--jv-on-accent) !important; color: var(--accent-orange) !important;}

/* Log view */
.jarvis-drawer .jv-logview{ display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 10px; scrollbar-width: thin;}
.jarvis-drawer.jv-show-log .jv-logview { display: block;}
.jarvis-drawer.jv-show-log .jv-tabbar, .jarvis-drawer.jv-show-log .jv-chat, .jarvis-drawer.jv-show-log .jv-newmsg { display: none;}
.jarvis-drawer .jv-log-head{ font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-muted) !important; margin-bottom: 6px;}
.jarvis-drawer .jv-log-empty{ color: var(--text-muted) !important; padding: 12px 0;}
.jarvis-drawer .jv-lrow{ display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 6px 0; border-bottom: 1px solid var(--jv-line) !important; font-size: 11.5px;}
.jarvis-drawer .jv-lt{ font-family: var(--jv-mono); font-size: 10.5px; color: var(--text-muted) !important; padding-top: 1px;}
.jarvis-drawer .jv-lb{ min-width: 0; display: flex; flex-wrap: wrap; column-gap: 6px; align-items: baseline;}
.jarvis-drawer .jv-lp{ font-family: var(--jv-mono); font-weight: 600; overflow-wrap: anywhere;}
.jarvis-drawer .jv-lw{ font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;}
.jarvis-drawer .jv-lw.jv-j{ color: var(--accent-orange) !important;}
.jarvis-drawer .jv-lw.jv-u{ color: var(--accent-blue) !important;}
.jarvis-drawer .jv-lx2{ flex: 1 0 100%; color: var(--text-secondary) !important; overflow-wrap: anywhere;}

/* Bottom line: drop anywhere / click to browse */
.jarvis-drawer .jv-composer{ border-top: 1px solid var(--jv-line) !important; padding: 8px 10px; flex: 0 0 auto;}
.jarvis-drawer .jv-drop{ display: block; border: 1px dashed var(--jv-line-strong) !important; border-radius: 6px; padding: 4px 8px; color: var(--text-muted) !important; font-size: 11.5px; font-weight: 400; text-align: center; cursor: pointer; margin: 0;}
.jarvis-drawer .jv-drop:hover{ border-color: var(--accent-orange) !important; color: var(--accent-orange) !important;}
.jarvis-drawer .jv-drop input[type="file"]{ display: none;}
.jarvis-drawer body.jarvis-incoming-file .jv-drop{ border-color: var(--accent-orange) !important; color: var(--accent-orange) !important;}

.jarvis-drawer .jv-opt:focus-visible, .jarvis-drawer .jv-sug:focus-visible, .jarvis-drawer .jv-q:focus-visible, .jarvis-drawer .jv-back:focus-visible, .jarvis-drawer .jv-btn:focus-visible, .jarvis-drawer .jv-mini:focus-visible,
.jarvis-drawer .jv-mrn-in:focus-visible, .jarvis-drawer .jv-views button:focus-visible, .jarvis-drawer .jv-tab-b:focus-visible, .jarvis-drawer .jv-tab-x:focus-visible, .jarvis-drawer .jv-clear:focus-visible,
.jarvis-drawer .jarvis-drawer-close:focus-visible, .jarvis-drawer .jv-newmsg:focus-visible{ outline: 2px solid var(--accent-orange); outline-offset: 1px;}

@media (prefers-reduced-motion: no-preference) {
    body.jarvis-incoming-file .jarvis-drawer .jarvis-brand-icon { animation: jvPulse 0.9s ease-in-out infinite;}
    body.jarvis-incoming-file .jarvis-drawer .jv-veil-in, .jarvis-drawer .jv-modal-in{ animation: jvLift 0.2s ease both;}
    .jarvis-drawer .jv-opt-search{ animation: jvOptOpen 0.24s ease both; transform-origin: top;}
    .jarvis-drawer .jv-opt-search .jv-ob{ animation: jvOptIn 0.24s ease 0.06s both;}
    .jarvis-drawer .jv-dots i{ animation: jvDot 1s ease-in-out infinite;}
    .jarvis-drawer .jv-dots i:nth-of-type(2){ animation-delay: 0.15s;}
    .jarvis-drawer .jv-dots i:nth-of-type(3){ animation-delay: 0.3s;}
    .jarvis-drawer .jv-msg.jv-typing{ animation: jvFade 0.15s ease both;}
    .jarvis-drawer .jv-msg.jv-arrive{ animation: jvArrive 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both; transform-origin: top left;}
    .jarvis-drawer .jv-msg.jv-arrive .jv-sec, .jarvis-drawer .jv-msg.jv-arrive .jv-opt, .jarvis-drawer .jv-msg.jv-arrive .jv-mrow{ animation: jvFade 0.3s ease both;}
    .jarvis-drawer .jv-msg.jv-arrive .jv-sec:nth-child(2), .jarvis-drawer .jv-msg.jv-arrive .jv-opt:nth-child(2), .jarvis-drawer .jv-msg.jv-arrive .jv-mrow:nth-child(2){ animation-delay: 0.07s;}
    .jarvis-drawer .jv-msg.jv-arrive .jv-sec:nth-child(3), .jarvis-drawer .jv-msg.jv-arrive .jv-opt:nth-child(3), .jarvis-drawer .jv-msg.jv-arrive .jv-mrow:nth-child(3){ animation-delay: 0.14s;}
    .jarvis-drawer .jv-msg.jv-arrive .jv-sec:nth-child(4), .jarvis-drawer .jv-msg.jv-arrive .jv-opt:nth-child(4){ animation-delay: 0.21s;}
    .jarvis-drawer .jv-msg.jv-arrive .jv-opt:nth-child(5){ animation-delay: 0.28s;}
    .jarvis-drawer .jv-msg.jv-me{ animation: jvMeIn 0.22s ease both;}
    @keyframes jvPulse { 0%, 100% { box-shadow: 0 0 0 0 var(--jv-orange-line); } 50% { box-shadow: 0 0 0 7px transparent; } }
    @keyframes jvLift { from { transform: scale(0.96); } to { transform: none; } }
    @keyframes jvOptOpen { from { max-height: 34px; } to { max-height: 320px; } }
    @keyframes jvOptIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
    @keyframes jvDot { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
    @keyframes jvArrive { from { transform: translateY(10px) scale(0.98); } to { transform: none; } }
    @keyframes jvFade { from { transform: translateY(5px); } to { transform: none; } }
    @keyframes jvMeIn { from { transform: translateX(12px); } to { transform: none; } }
}

.jarvis-drawer .jv-nw { display: block; margin-top: 3px; color: var(--text-secondary) !important; font-size: 11.5px; }
/* Partial release: the pallet window. Rows behave and look like the pallet table of Create Order
   (pages/create-order.html: .pallet-table tbody tr:hover / tr.selected). */
.jarvis-drawer .jv-pal { align-items: stretch; padding: 10px; }
.jarvis-drawer .jv-pal-in { max-width: none; display: flex; flex-direction: column; min-height: 0; }
.jarvis-drawer .jv-pal-tools { display: flex; gap: 5px; margin-top: 6px; }
.jarvis-drawer .jv-pal-scroll { flex: 0 1 auto; min-height: 80px; overflow: auto; margin-top: 6px; border: 1px solid var(--jv-line) !important; border-radius: 6px; scrollbar-width: thin; }
.jarvis-drawer .pallet-table { width: 100%; height: auto !important; border-collapse: collapse; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.jarvis-drawer .pallet-table th { position: sticky; top: 0; text-align: left; font-size: 9px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 5px !important; height: auto !important; white-space: nowrap; background: var(--bg-tertiary) !important; color: var(--text-muted) !important; border: 0 !important; }
.jarvis-drawer .pallet-table tr { height: auto !important; }
.jarvis-drawer .pallet-table td { padding: 3px 5px !important; height: auto !important; line-height: 1.3; vertical-align: middle; background: transparent !important; color: var(--text-primary) !important; border: 0 !important; border-top: 1px solid var(--jv-line) !important; overflow-wrap: normal; }
.jarvis-drawer .pallet-table tbody tr { cursor: pointer; transition: background 0.2s; border-left: 4px solid transparent !important; user-select: none; }
.jarvis-drawer .pallet-table tbody tr:hover { background: rgba(147, 197, 253, 0.15) !important; }
.jarvis-drawer .pallet-table tbody tr.selected { background: rgba(34, 197, 94, 0.15) !important; border-left: 4px solid #22c55e !important; }
.jarvis-drawer .pallet-table tbody tr.jv-locked { cursor: default; opacity: 0.7; }
.jarvis-drawer .pallet-table input[type=checkbox] { accent-color: var(--accent-orange); width: auto; margin: 0; }
.jarvis-drawer .jv-pn { font-family: var(--jv-mono); font-weight: 600; }
.jarvis-drawer .pallet-table .jv-tag { margin-left: 0; white-space: normal; display: inline-block; font-size: 8.5px; }
.jarvis-drawer .jv-pal-sum { margin-top: 6px; font-weight: 600; font-size: 11.5px; }
.jarvis-drawer .jv-pal-note { font-size: 11px; color: var(--text-muted) !important; }
.jarvis-drawer .jv-pal-note.jv-differs { color: var(--accent-orange) !important; }

/* Light theme — the trigger rules of the v0.41 sheet, unchanged */
[data-theme="light"] .jarvis-drawer { background: #ffffff; border-left-color: #d6e2ea; }
/* themes.css: `[data-theme="light"] div { background-color: inherit }` would make every nested div repaint its
   parent's translucent tint on top of it; plain containers of the panel stay transparent (the panel's own
   backgrounds are !important and still win). */
[data-theme="light"] .jarvis-drawer div { background-color: transparent; }
[data-theme="light"] .jarvis-fab-trigger { background: #eef4f8; border-color: #d6e2ea; color: #33465a; }
[data-theme="light"] .jarvis-fab-trigger:hover { color: #c47a14; border-color: #c47a14; background: rgba(196, 122, 20, 0.08); }
[data-theme="light"] body.jarvis-incoming-file .jarvis-fab-trigger { color: #b45309 !important; }

/* ============================================================
   JARVIS 2.0 · follow-up 2
   ============================================================ */

/* "AI Applying…" — while JARVIS writes data the waiting bubble is the app's global loader: the PageLoader
   circle (js/page-loader.js + .page-loader* in components.css) at chat size, in a row with its text. The rules
   are complete here, so a page without components.css shows the same circle. The arc is run by anime.js where
   the page has it; .jv-spin is the CSS copy of that animation (1400 ms, sine in-out, looped) for pages without. */
.jarvis-drawer .jv-applying{ display: inline-flex; align-items: center; width: fit-content; padding: 6px 10px;}
.jarvis-drawer .jv-applying .page-loader{ display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; width: auto; padding: 0; margin: 0; background: transparent !important;}
.jarvis-drawer .jv-applying .page-loader__circle{ width: 24px; height: 24px; flex: 0 0 auto; transform: rotate(-90deg);}
.jarvis-drawer .jv-applying .page-loader__circle-track{ fill: none; stroke: var(--border-color, #334155); stroke-width: 4; opacity: 0.4;}
.jarvis-drawer .jv-applying .page-loader__circle-arc{ fill: none; stroke: var(--accent-orange, #f97316); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 175.93; stroke-dashoffset: 175.93;}
.jarvis-drawer .jv-applying .page-loader__status{ font: inherit; font-size: 11.5px; font-weight: 500; letter-spacing: 0; min-height: 0; margin: 0; text-align: left; color: var(--text-muted) !important;}
.jarvis-drawer .jv-applying.jv-spin .page-loader__circle-arc{ animation: jvLoaderArc 1400ms cubic-bezier(0.37, 0, 0.63, 1) infinite;}
.jarvis-drawer .jv-applying.jv-still .page-loader__circle-arc{ animation: none; stroke-dashoffset: 58;}
@keyframes jvLoaderArc { from { stroke-dashoffset: 175.93; } to { stroke-dashoffset: -175.93; } }
[data-theme="light"] .jarvis-drawer .jv-applying .page-loader__circle-track{ stroke: #d6e2ea; opacity: 1;}
[data-theme="light"] .jarvis-drawer .jv-applying .page-loader__circle-arc{ stroke: #0a5989;}
@media (prefers-reduced-motion: reduce) {
    .jarvis-drawer .jv-applying.jv-spin .page-loader__circle-arc{ animation: none; stroke-dashoffset: 58;}
}

/* The drop (approved mockup v37): the card that followed the cursor says "Got it" and is thrown at the AI logo
   (the flight itself is a Web Animation in fab.js: lean, stretch, blur, fade — no spin). The logo takes it
   (.jv-post), shows the green tick, and a thin white line with a small soft glow scans it down and back, twice,
   1 s per pass, with a light white wash on the icon meanwhile (.jv-got). Then everything fades out. */
.jarvis-preview-bubble.jv-sent{ animation: none; transition: none; transform: rotate(-3deg); transform-origin: center;}
.jarvis-preview-bubble.jv-sent .bubble-meta{ color: var(--accent-green, #22c55e);}
.jarvis-preview-bubble .bubble-more{ font-weight: 500; color: var(--text-secondary);}
.jarvis-fab-trigger .jarvis-fab-icon, .jarvis-drawer .jarvis-brand-icon{ position: relative;}
.jarvis-fab-icon .jv-slot, .jarvis-brand-icon .jv-slot{ position: absolute; left: 4px; right: 4px; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--accent-orange, #f97316) !important; opacity: 0; transform: scaleX(0.3); pointer-events: none;}
.jarvis-fab-icon .jv-tick, .jarvis-brand-icon .jv-tick{ position: absolute; right: -5px; bottom: -5px; width: 14px; height: 14px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-green, #22c55e) !important; color: #ffffff !important; font-size: 9px; font-style: normal; font-weight: 700; line-height: 1; text-shadow: none; opacity: 0; transform: scale(0.4); pointer-events: none;}
.jarvis-fab-icon .jv-tick{ right: -6px; bottom: -4px; width: 11px; height: 11px; font-size: 7px;}
.jarvis-fab-icon .jv-scanbox, .jarvis-brand-icon .jv-scanbox{ position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; opacity: 0;}
.jarvis-fab-icon .jv-scan, .jarvis-brand-icon .jv-scan{ position: absolute; left: 0; right: 0; top: 0; height: 1px; background: #ffffff !important; box-shadow: 0 0 2px 0.5px rgba(255, 255, 255, 0.95), 0 0 6px 1.5px rgba(255, 255, 255, 0.55);}
/* the bloom: a wide, blurred band of white light that travels with the line */
.jarvis-fab-icon .jv-scan::before, .jarvis-brand-icon .jv-scan::before{ content: ""; position: absolute; left: -2px; right: -2px; top: -4px; height: 9px; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.28) 40%, rgba(255, 255, 255, 0) 72%); filter: blur(2px); mix-blend-mode: screen;}
/* on the light trigger a white line cannot be seen: there it takes the accent colour */
[data-theme="light"] .jarvis-fab-icon .jv-scan{ background: #c47a14 !important; box-shadow: 0 0 2px 0.5px rgba(196, 122, 20, 0.9), 0 0 6px 1.5px rgba(196, 122, 20, 0.45);}
.jarvis-fab-icon.jv-post, .jarvis-brand-icon.jv-post{ animation: jvGulp 0.9s ease both;}
.jarvis-fab-icon.jv-post .jv-slot, .jarvis-brand-icon.jv-post .jv-slot{ animation: jvSlot 0.9s ease both;}
.jarvis-fab-icon.jv-got .jv-tick, .jarvis-brand-icon.jv-got .jv-tick{ animation: jvTick 1.1s ease both;}
/* after the tick: the scan line sweeps over the icon, down and back, twice, then fades out */
.jarvis-fab-icon.jv-got .jv-scanbox, .jarvis-brand-icon.jv-got .jv-scanbox{ animation: jvScanBox 4.6s linear 0.9s both;}
.jarvis-fab-icon.jv-got .jv-scan, .jarvis-brand-icon.jv-got .jv-scan{ animation: jvScan 1s cubic-bezier(0.45, 0, 0.55, 1) 0.9s 4 alternate both;}
@keyframes jvScan { from { top: -2px; } to { top: 100%; } }
@keyframes jvScanBox { 0% { opacity: 0; background: rgba(255, 255, 255, 0); } 5% { opacity: 1; background: rgba(255, 255, 255, 0.1); } 87% { opacity: 1; background: rgba(255, 255, 255, 0.1); } 100% { opacity: 0; background: rgba(255, 255, 255, 0); } }
@keyframes jvSlot { 0% { opacity: 0; transform: scaleX(0.3); } 25%, 60% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(0.3); } }
@keyframes jvGulp { 0%, 55% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.45); } 68% { transform: scale(1.22); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.45); } 100% { transform: scale(1); box-shadow: 0 0 0 12px transparent; } }
@keyframes jvTick { 0% { opacity: 0; transform: scale(0.4); } 15%, 75% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
/* Reduced motion (the OS setting, or the panel's own switch → .jv-calm): no flight effects (the card only
   fades, fab.js), the scan line stands still as a tint. */
.jarvis-fab-icon.jv-calm.jv-post, .jarvis-brand-icon.jv-calm.jv-post, .jarvis-fab-icon.jv-calm.jv-post .jv-slot, .jarvis-brand-icon.jv-calm.jv-post .jv-slot,
.jarvis-fab-icon.jv-calm.jv-got .jv-tick, .jarvis-brand-icon.jv-calm.jv-got .jv-tick{ animation-duration: 0.01s;}
.jarvis-fab-icon.jv-calm.jv-got .jv-scan, .jarvis-brand-icon.jv-calm.jv-got .jv-scan{ animation: none; top: 50%;}
.jarvis-fab-icon.jv-calm.jv-got .jv-scanbox, .jarvis-brand-icon.jv-calm.jv-got .jv-scanbox{ animation-duration: 1.2s; animation-delay: 0.2s;}
@media (prefers-reduced-motion: reduce) {
    .jarvis-fab-icon.jv-post, .jarvis-brand-icon.jv-post, .jarvis-fab-icon.jv-post .jv-slot, .jarvis-brand-icon.jv-post .jv-slot,
    .jarvis-fab-icon.jv-got .jv-tick, .jarvis-brand-icon.jv-got .jv-tick{ animation-duration: 0.01s;}
    .jarvis-fab-icon.jv-got .jv-scan, .jarvis-brand-icon.jv-got .jv-scan{ animation: none; top: 50%;}
    .jarvis-fab-icon.jv-got .jv-scanbox, .jarvis-brand-icon.jv-got .jv-scanbox{ animation-duration: 1.2s; animation-delay: 0.2s;}
}

/* The same PDF again: "Already processed. Nothing written this time." + the full log entry of the first time */
.jarvis-drawer .jv-verdict.jv-again{ border-color: var(--jv-line) !important; background: var(--bg-tertiary) !important;}
.jarvis-drawer .jv-verdict.jv-again .jv-ttl{ color: var(--text-primary) !important;}
.jarvis-drawer .jv-did{ margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: 12px;}
.jarvis-drawer .jv-did li{ color: var(--text-secondary) !important;}
.jarvis-drawer .jv-did li::before{ content: "✓ "; color: var(--accent-green) !important;}
.jarvis-drawer .jv-verdict .jv-again-now{ margin-top: 6px;}
.jarvis-drawer .jv-again .jv-opts{ margin-top: 7px;}
.jarvis-drawer .jv-en-head{ display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11px; color: var(--text-muted) !important; padding-bottom: 6px; border-bottom: 1px solid var(--jv-line) !important;}
.jarvis-drawer .jv-en-id{ font-family: var(--jv-mono); font-weight: 600; color: var(--accent-orange) !important;}
.jarvis-drawer .jv-en-meta{ color: var(--text-muted) !important;}
.jarvis-drawer .jv-en-head .jv-score{ margin-left: auto;}
.jarvis-drawer .jv-en-head + .jv-sec{ margin-top: 6px;}
.jarvis-drawer .jv-en-steps{ list-style: none; margin: 4px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--jv-orange-line) !important; display: flex; flex-direction: column; gap: 5px;}
.jarvis-drawer .jv-en-steps li{ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; font-size: 12px; color: var(--text-secondary) !important;}
.jarvis-drawer .jv-en-t{ font-family: var(--jv-mono); font-size: 10.5px; color: var(--text-muted) !important; padding-top: 1px;}
.jarvis-drawer .jv-en-b{ min-width: 0; overflow-wrap: anywhere; color: var(--text-secondary) !important;}
.jarvis-drawer .jv-en-b b{ color: var(--text-primary) !important;}
.jarvis-drawer .jv-entry .jv-why{ margin-top: 6px;}
.jarvis-drawer .jv-entry .jv-actions{ margin-top: 7px;}

/* Log view: 60 rows per page, newest first — "‹ Newer · rows 61–120 of 412 · Older ›" under the rows */
.jarvis-drawer .jv-pager{ display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0 2px; font-size: 12px; color: var(--text-secondary) !important;}
.jarvis-drawer .jv-pg-n{ color: var(--text-secondary) !important; font-variant-numeric: tabular-nums; text-align: center;}