/* ============================================================
   Nova Assistant placement — inline bar, floating pill, nudge, docked panel.
   Ported from the design handoff (nova-reference.html). Prefixed .na-* so it never
   collides with the legacy .nova-* / .ncb-* command-bar styles. Used only when a
   NovaChat is rendered with Placement="Assistant".
   ============================================================ */
:root {
    --na-bg: #080b16;
    --na-surface: #0b1024;
    --na-surface2: #0d1228;
    --na-surface3: #0f1738;
    --na-border: #1e2748;
    --na-border2: #2a3766;
    --na-border3: #3a4a8a;
    --na-text: #e6e9f4;
    --na-muted: #aab1cc;
    --na-dim: #8a93b5;
    --na-accent: #2b4fc4;
    --na-accent-outline: #4f7bff;
    --na-accent-text: #9db4ff;
    --na-link: #7ea2ff;
    --na-user: #1b2a5e;
    --na-online: #3ccb7f;
    --na-nova: #241a4f;
    --na-nova-border: #5b48d6;
    --na-nova-hover: #2d2163;
    --na-panel-w: 440px;
    --na-pill-offset: 28px;
}

/* Docked push: while the panel is open, shift page content left on wide screens so it
   stays usable; overlay (no push) below 1024px — phones + tablet-portrait. Pure CSS so
   it re-evaluates on rotate/resize. The panel/pill are viewport-fixed and unaffected. */
body { transition: padding-right .3s ease; }
@media (min-width: 1024px) {
    body.nova-assistant-docked { padding-right: var(--na-panel-w); }
}

/* Shared orb — our existing Nova mark inside a circle (replaces the reference gradient). */
.na-orb {
    border-radius: 50%;
    border: 2px solid var(--na-border3);
    background: radial-gradient(circle, #1a1240 55%, #0a0c1e 100%);
    display: inline-grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}
.na-orb img { width: 82%; height: 82%; border-radius: 50%; object-fit: cover; }

/* 1. Inline bar (NOT sticky) — first child of page content. */
.na-bar {
    border: 1px solid var(--na-border2);
    background: linear-gradient(90deg, #101a3c, #0c1330);
    border-radius: 14px;
    padding: 14px 22px;
    margin-bottom: 24px;   /* breathing room before the page title / actions below */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.na-bar .na-orb { width: 44px; height: 44px; }
.na-bar .na-idcol { display: flex; align-items: center; gap: 16px; }
.na-bar .na-idcol > div { display: flex; flex-direction: column; gap: 3px; }
.na-bar .na-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 700; font-size: 17px; color: var(--na-text); }
.na-bar .na-badge { font-size: 12px; font-weight: 600; color: var(--na-accent-text); border: 1px solid #2a3a7a; background: var(--na-surface3); border-radius: 20px; padding: 2px 10px; white-space: nowrap; }
.na-bar .na-sub { font-size: 14px; color: var(--na-link); }
/* Open Chat — Nova purple, so purple = Nova across the product. */
.na-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #2d2163 0%, #241a4f 100%);
    border: 1px solid var(--na-nova-border);
    color: #f0eefc;
    border-radius: 22px;
    padding: 7px 16px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: .01em;
    white-space: nowrap;
    flex-shrink: 0;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 2px 10px rgba(91, 72, 214, .25);
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .05s ease;
}
.na-open::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: radial-gradient(circle, #c5b6ff 0, #7a63e6 70%);
    box-shadow: 0 0 8px rgba(167, 155, 255, .8);
}
.na-open:hover { border-color: #a99bff; background: linear-gradient(135deg, #362873 0%, #2b2060 100%); box-shadow: 0 4px 18px rgba(91, 72, 214, .45); }
.na-open:active { transform: translateY(1px); }

/* 2. Floating pill + 3. nudge */
.na-float {
    position: fixed;
    right: var(--na-pill-offset);
    bottom: var(--na-pill-offset);
    z-index: 1400;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    animation: naIn .35s ease;
}
.na-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--na-nova);
    border: 1px solid var(--na-nova-border);
    border-radius: 32px;
    padding: 8px 20px 8px 8px;
    color: var(--na-text);
    box-shadow: 0 12px 40px rgba(0,0,0,.55);
    cursor: pointer;
    font-family: inherit;
}
.na-pill:hover { border-color: #a99bff; background: var(--na-nova-hover); }
.na-pill .na-orb { width: 44px; height: 44px; }
.na-pill .na-orb.pulse { animation: naPulse 1.6s ease-out 2; }
.na-pill .na-dot { position: absolute; right: 0; bottom: 1px; width: 11px; height: 11px; border-radius: 50%; background: var(--na-online); border: 2px solid var(--na-nova); }
.na-pill .na-label { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.na-pill .na-label b { font-size: 15px; }
.na-pill .na-label span { font-size: 12px; color: var(--na-accent-text); }

.na-nudge {
    max-width: 320px;
    background: var(--na-nova);
    border: 1px solid var(--na-nova-border);
    border-radius: 16px 16px 4px 16px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    font-size: 14px;
    line-height: 1.45;
    color: var(--na-text);
    animation: naIn .35s ease;
}
.na-nudge .na-actions { display: flex; gap: 10px; justify-content: flex-end; }
.na-btn-text { background: none; border: 0; color: var(--na-dim); font-size: 13px; cursor: pointer; font-family: inherit; }
.na-btn-primary { background: var(--na-accent); border: 0; color: #fff; border-radius: 16px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
/* "Hide" on the nudge (was "Not now", a quiet text link investors missed; owner 2026-10-21): a salmon button so the way to
   put the suggestion away stands out next to "Yes, help me". */
.na-btn-hide { background: #f4927f; border: 1px solid #f4927f; color: #2a0d08; border-radius: 16px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer; font-family: inherit; }
.na-btn-hide:hover { background: #f8a898; border-color: #f8a898; }

/* While a page's modal is open, the floating Nova card steps aside: it sits at z 1400, above those modals (z ~1000), and
   would otherwise cover their buttons on phones and pop its question over a modal dialog. Only modals rendered while
   open are listed (an always-present overlay would hide Nova for good) — that rules out a generic [aria-modal] match, since
   the app keeps a closed sign-out <dialog aria-modal> on every page. Native dialogs count only while open. */
body:has(dialog[open], .icx-backdrop, .ic-backdrop, .modal-overlay.active,
         .pf-modal-overlay, .opm-backdrop, .hub-backdrop, .nsm-backdrop, .ed-modal-backdrop, .ts-modal-backdrop,
         .op-preview-backdrop, .ts-form-overlay) .na-float {
    display: none;
}

/* Nudge merged with the pill (NovaChat MergedNudge): one card, the pill at the card's full width beneath the
   question. */
.na-combo {
    width: 340px;
    max-width: calc(100vw - 2 * var(--na-pill-offset));
    box-sizing: border-box;
    background: var(--na-nova);
    border: 1px solid var(--na-nova-border);
    border-radius: 20px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.55);
    font-size: 14px;
    line-height: 1.45;
    color: var(--na-text);
    animation: naIn .35s ease;
}
/* Non-merged layout: the wrapper adds nothing, so the nudge and the pill stack in .na-float as before. */
.na-stack { display: contents; }
.na-combo-body { display: flex; flex-direction: column; gap: 12px; }
.na-combo .na-actions { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.na-combo .na-combo-pill {
    width: 100%;
    box-sizing: border-box;
    border-radius: 16px;
    background: var(--na-nova-hover);
    box-shadow: none;
}
.na-combo .na-combo-pill:hover { border-color: #a99bff; filter: brightness(1.06); }
.na-combo .na-combo-pill .na-label { min-width: 0; }
.na-combo .na-btn-text:focus-visible,
.na-combo .na-btn-hide:focus-visible,
.na-combo .na-btn-primary:focus-visible,
.na-combo .na-combo-pill:focus-visible { outline: 2px solid #c9b8ff; outline-offset: 2px; }

/* 4. Panel */
.na-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 1500;
    width: var(--na-panel-w);
    max-width: 100vw;
    background: var(--na-surface);
    border-left: 1px solid var(--na-border2);
    box-shadow: -20px 0 60px rgba(0,0,0,.5);
    display: flex;
    flex-direction: column;
    animation: naSlide .3s ease;
}
.na-panel header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--na-border); gap: 12px; }
.na-panel header .na-orb { width: 36px; height: 36px; }
.na-panel header .na-who { display: flex; align-items: center; gap: 12px; }
.na-panel header .na-who > div { display: flex; flex-direction: column; }
.na-panel header .na-who b { font-size: 16px; color: var(--na-text); }
.na-panel header .na-who span { font-size: 12px; color: var(--na-accent-text); }
.na-panel .na-hdr-btns { display: flex; gap: 8px; }
.na-icon-btn { background: transparent; border: 1px solid var(--na-border2); color: #c7cde3; border-radius: 8px; width: 34px; height: 34px; font-size: 14px; cursor: pointer; display: grid; place-items: center; font-family: inherit; }
.na-icon-btn:hover { border-color: var(--na-accent-outline); }

.na-topics { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 20px 0; }
.na-topics button { border: 1px solid var(--na-border2); border-radius: 20px; padding: 6px 14px; font-size: 13px; color: #c7cde3; background: transparent; cursor: pointer; font-family: inherit; }
.na-topics button.active { background: var(--na-accent); border-color: var(--na-accent); color: #fff; font-weight: 600; }

.na-body { flex: 1; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.na-msg { max-width: 88%; border: 1px solid var(--na-border2); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.na-msg.user { align-self: flex-end; background: var(--na-user); }
.na-msg.nova { align-self: flex-start; background: var(--na-surface2); }
.na-suggest { display: flex; flex-direction: column; gap: 8px; }
.na-suggest button { text-align: left; background: var(--na-surface2); border: 1px solid var(--na-border2); color: var(--na-text); border-radius: 10px; padding: 12px 14px; font-size: 14px; cursor: pointer; font-family: inherit; }
.na-suggest button:hover { border-color: var(--na-accent-outline); }
.na-typing { align-self: flex-start; color: var(--na-dim); font-size: 13px; font-style: italic; }

.na-panel footer { padding: 14px 20px 18px; border-top: 1px solid var(--na-border); display: flex; flex-direction: column; gap: 8px; }
.na-input-row { display: flex; align-items: center; gap: 10px; background: var(--na-surface2); border: 1px solid var(--na-border2); border-radius: 30px; padding: 6px; }
.na-input-row input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--na-text); font-size: 14px; font-family: inherit; }
.na-mic { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; border: 1px solid var(--na-border2); background: var(--na-surface3); color: var(--na-text); display: grid; place-items: center; cursor: pointer; }
.na-mic:disabled { opacity: .55; cursor: default; }
.na-mic.recording { background: var(--na-nova-border); border-color: #a99bff; animation: naPulse 1.4s ease-out infinite; }
.na-send { background: var(--na-accent); color: #fff; border: 0; border-radius: 20px; padding: 8px 16px; font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit; }
.na-send:disabled { opacity: .55; cursor: default; }
.na-footer-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.na-footer-row label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #c7cde3; white-space: nowrap; cursor: pointer; }
.na-footer-row input[type=checkbox] { accent-color: var(--na-accent-outline); width: 15px; height: 15px; margin: 0; }
.na-helper { font-size: 12px; color: var(--na-dim); }
.na-ai-disclaimer { margin: 6px 0 0; font-size: 11px; line-height: 1.4; color: var(--na-dim); text-align: center; }

/* One-on-One text chat: while its composer is on screen, deal-chat.js sets html.dealchat-composer-active and
   --dealchat-nova-lift, and the pill steps aside: orb only (a 60px circle), lifted above the composer when it would
   cover Send, with no nudge. The label is hidden visually but kept for screen readers, so the button is still
   announced as "Ask Nova AI". Removed as soon as the composer leaves the screen; no other page sets the class. */
html.dealchat-composer-active .na-float {
    bottom: var(--dealchat-nova-lift, var(--na-pill-offset));
    transition: bottom .15s ease;
}
html.dealchat-composer-active .na-float .na-pill {
    width: auto;
    gap: 0;
    padding: 7px;
    border-radius: 50%;
}
html.dealchat-composer-active .na-pill .na-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
html.dealchat-composer-active .na-nudge,
html.dealchat-composer-active .na-combo-body { display: none; }
/* The merged card collapses to just its pill too. */
html.dealchat-composer-active .na-combo { display: contents; }

/* Phones: the floating Nova is always the minimized orb (same treatment as above) so it never covers the page; a
   pending question shows only as the orb's pulse, and tapping the orb opens the panel. */
@media (max-width: 768px) {
    .na-float .na-pill {
        width: auto;
        gap: 0;
        padding: 7px;
        border-radius: 50%;
    }
    .na-pill .na-label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .na-nudge,
    .na-combo-body { display: none; }
    .na-combo { display: contents; }
}

@keyframes naPulse { 0% { box-shadow: 0 0 0 0 rgba(120,150,255,.55); } 100% { box-shadow: 0 0 0 18px rgba(120,150,255,0); } }
@keyframes naIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes naSlide { from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
/* Mobile: keep the inline Nova bar on ONE line (orb + title/sub on the left, Open Chat on the right) instead
   of wrapping "Open Chat" to a new row. The secondary "Powered by" badge is hidden to make room. */
@media (max-width: 768px) {
    .na-bar { flex-wrap: nowrap; gap: 12px; padding: 12px 14px; }
    .na-bar .na-idcol { min-width: 0; gap: 10px; }
    .na-bar .na-idcol > div { min-width: 0; }
    .na-bar .na-orb { width: 36px; height: 36px; }
    .na-bar .na-badge { display: none; }
    .na-bar .na-title { font-size: 15px; }
    .na-bar .na-sub { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .na-open { padding: 7px 13px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
    .na-float, .na-nudge, .na-combo, .na-panel, .na-pill .na-orb.pulse, .na-mic.recording { animation: none; }
    html.dealchat-composer-active .na-float { transition: none; }
    body { transition: none; }
}