/* Copilot — docked AI assistant. Prefixed `cp-`; built on theme.css tokens.
   Identity: a softly lit "orb" (the agent), ink chrome, white reading surface. */

/* ===== The orb ============================================================ */
.cp-orb {
    position: relative;
    display: inline-block;
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, #ffffff 0%, rgb(255 255 255 / 0%) 32%),
        conic-gradient(from 210deg, #8b9cf4, #a58bfa, #6fd3f5, #6577ea, #8b9cf4);
    box-shadow: 0 0 0 1px rgb(255 255 255 / 25%) inset, 0 0 14px rgb(124 140 245 / 55%);
    animation: cp-orb-spin 9s linear infinite;
}
.cp-orb::after {
    content: "";
    position: absolute;
    inset: 22%;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, rgb(255 255 255 / 85%), rgb(255 255 255 / 0%) 70%);
    filter: blur(1px);
}
.cp-orb-sm { width: 26px; height: 26px; }
.cp-orb-md { width: 34px; height: 34px; }
.cp-orb-lg { width: 64px; height: 64px; box-shadow: 0 0 0 1px rgb(255 255 255 / 30%) inset, 0 12px 40px -6px rgb(101 119 234 / 60%); }
.cp-orb-busy { animation: cp-orb-spin 1.6s linear infinite, cp-orb-pulse 1.2s ease-in-out infinite; }
@keyframes cp-orb-spin { to { transform: rotate(360deg); } }
@keyframes cp-orb-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgb(255 255 255 / 25%) inset, 0 0 8px rgb(124 140 245 / 40%); } 50% { box-shadow: 0 0 0 1px rgb(255 255 255 / 25%) inset, 0 0 20px rgb(124 140 245 / 85%); } }

/* ===== Launcher =========================================================== */
.cp-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 11px;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    font: 600 14px/1 var(--font-sans);
    color: #fff;
    background: linear-gradient(180deg, var(--ink-700), var(--ink-900));
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 8%) inset,
        0 14px 30px -10px rgb(12 20 38 / 70%),
        0 0 0 6px rgb(101 119 234 / 0%);
    transition: transform .2s ease, box-shadow .2s ease;
}
.cp-launcher:hover {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgb(255 255 255 / 12%) inset,
        0 18px 36px -10px rgb(12 20 38 / 75%),
        0 0 0 6px rgb(101 119 234 / 14%);
}
.cp-launcher:focus-visible { outline: none; box-shadow: var(--shadow-glow), 0 14px 30px -10px rgb(12 20 38 / 70%); }
.cp-launcher .cp-orb { width: 24px; height: 24px; }
.cp-launcher-text { letter-spacing: -.005em; }
.cp-kbd {
    padding: 4px 7px;
    border-radius: 7px;
    font: 500 11.5px/1 var(--font-sans);
    color: #b9c2d3;
    background: rgb(255 255 255 / 8%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
}
.cp-launcher[hidden] { display: none; }

/* ===== Panel (docked side sheet) ========================================== */
.cp-panel {
    position: fixed;
    top: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 901;
    width: 440px;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--font-sans);
    background: #fff;
    border-radius: 20px;
    box-shadow:
        0 0 0 1px rgb(16 24 40 / 6%),
        0 30px 80px -20px rgb(12 20 38 / 45%),
        0 10px 24px -12px rgb(12 20 38 / 25%);
    animation: cp-in 260ms cubic-bezier(.16, .8, .3, 1);
    transform-origin: bottom right;
    transition: width .3s cubic-bezier(.16, .8, .3, 1);
}
.cp-panel.expanded { width: 720px; }
.cp-panel[hidden] { display: none; }
@keyframes cp-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* Header: ink chrome with a soft aurora */
.cp-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 14px 16px 18px;
    color: #fff;
    background:
        radial-gradient(80% 140% at 0% 0%, rgb(101 119 234 / 40%) 0%, transparent 60%),
        radial-gradient(60% 120% at 100% 100%, rgb(138 92 245 / 25%) 0%, transparent 70%),
        linear-gradient(180deg, var(--ink-800), var(--ink-900));
}
.cp-title { flex: 1; min-width: 0; line-height: 1.25; }
.cp-title strong { display: block; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
#cp-sub { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: #b9c2d3; }
.cp-live { width: 7px; height: 7px; border-radius: 50%; background: var(--erp-synced); box-shadow: 0 0 0 3px rgb(18 183 106 / 22%); }
.cp-panel.offline .cp-live { background: var(--erp-error); box-shadow: 0 0 0 3px rgb(240 68 56 / 22%); }
.cp-mode { font-size: 12px; }
.cp-icon-btn {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: none;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    color: #b9c2d3;
    background: transparent;
    transition: background-color .15s, color .15s;
}
.cp-icon-btn .icon { width: 17px; height: 17px; }
.cp-icon-btn:hover { color: #fff; background: rgb(255 255 255 / 9%); }
.cp-icon-btn[aria-pressed="true"] { color: #fff; background: rgb(255 255 255 / 12%); }
.cp-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px #8b9cf4; }
.cp-icon-btn[hidden] { display: none; }

/* ===== Conversation ======================================================= */
.cp-log {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 20px 12px;
    background: linear-gradient(180deg, #f7f8fb 0%, #fff 140px);
    scroll-behavior: smooth;
}

/* Welcome */
.cp-welcome { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 18px 6px 4px; animation: slide-up 320ms ease-out; }
.cp-welcome h3 { margin: 18px 0 6px; font-size: 21px; font-weight: 600; letter-spacing: -.025em; color: var(--text); }
.cp-welcome p { margin: 0; max-width: 34ch; font-size: 14px; line-height: 1.55; color: var(--text-3); }
.cp-suggest { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 24px; }
.cp-suggestion {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 12px 12px 12px;
    text-align: left;
    font: inherit;
    cursor: pointer;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-soft);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cp-suggestion:hover { border-color: var(--primary-200); box-shadow: 0 6px 16px -8px rgb(75 91 216 / 35%); transform: translateY(-1px); }
.cp-suggestion:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.cp-sg-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--primary-600); background: var(--primary-50); }
.cp-sg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cp-sg-text strong { font-size: 14px; font-weight: 600; }
.cp-sg-text small { font-size: 12.5px; color: var(--text-3); }
.cp-sg-go { color: var(--surface-400); transition: transform .15s, color .15s; }
.cp-suggestion:hover .cp-sg-go { color: var(--primary-600); transform: translateX(2px); }

/* Messages */
.cp-msg { font-size: 14px; line-height: 1.6; animation: slide-up 220ms ease-out; }
.cp-msg.user {
    align-self: flex-end;
    max-width: 82%;
    padding: 10px 14px;
    color: #fff;
    background: linear-gradient(180deg, var(--ink-700), var(--ink-800));
    border-radius: 16px 16px 5px 16px;
    box-shadow: 0 6px 14px -8px rgb(12 20 38 / 50%);
}
.cp-msg.bot { align-self: stretch; display: flex; align-items: flex-start; gap: 12px; color: var(--surface-800); }
.cp-msg.bot > .cp-orb { margin-top: 1px; }
.cp-msg-body { flex: 1; min-width: 0; }
.cp-msg.bot .cp-bubble p { margin: 0 0 8px; }
.cp-msg.bot .cp-bubble p:last-child { margin-bottom: 0; }
.cp-msg.bot .cp-bubble ul { margin: 4px 0 8px; padding-left: 18px; }
.cp-msg.bot .cp-bubble li { margin: 2px 0; }
.cp-msg.bot strong { color: var(--text); font-weight: 600; }
.cp-msg.error .cp-bubble {
    padding: 10px 13px;
    border-radius: 12px;
    color: var(--st-rejected-fg);
    background: var(--st-rejected-bg);
    box-shadow: inset 0 0 0 1px var(--st-rejected-ring);
}

/* Invoice results */
.cp-invoices {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: #fff;
    box-shadow: var(--shadow-soft);
}
.cp-inv {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px 12px;
    align-items: center;
    padding: 11px 14px;
    font-size: 13px;
    border-top: 1px solid var(--surface-100);
    transition: background-color .12s;
}
.cp-inv:first-child { border-top: none; }
.cp-inv:hover { background: var(--surface-50); }
.cp-inv .num { font-weight: 600; color: var(--text); }
.cp-inv .amt { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.cp-inv .vendor { color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-stage {
    justify-self: end;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 500;
    white-space: nowrap;
}
.cp-stage.needs_review      { background: var(--st-needs-review-bg);      color: var(--st-needs-review-fg);      box-shadow: inset 0 0 0 1px var(--st-needs-review-ring); }
.cp-stage.awaiting_approval { background: var(--st-awaiting-approval-bg); color: var(--st-awaiting-approval-fg); box-shadow: inset 0 0 0 1px var(--st-awaiting-approval-ring); }
.cp-stage.approved          { background: var(--st-approved-bg);          color: var(--st-approved-fg);          box-shadow: inset 0 0 0 1px var(--st-approved-ring); }
.cp-stage.posted            { background: var(--st-posted-bg);            color: var(--st-posted-fg);            box-shadow: inset 0 0 0 1px var(--st-posted-ring); }
.cp-stage.rejected          { background: var(--st-rejected-bg);          color: var(--st-rejected-fg);          box-shadow: inset 0 0 0 1px var(--st-rejected-ring); }
.cp-stage.processing        { background: var(--st-agent-processing-bg);  color: var(--st-agent-processing-fg);  box-shadow: inset 0 0 0 1px var(--st-agent-processing-ring); }
.cp-more { display: block; padding: 9px 14px; font-size: 12.5px; color: var(--text-3); border-top: 1px solid var(--surface-100); }
.cp-actions-btns .cp-more { padding: 0; border: none; }

/* Proposed actions — a confirmation card */
.cp-actions {
    position: relative;
    margin-top: 12px;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f6f7ff, #fff);
    border: 1px solid var(--primary-200);
    box-shadow: 0 8px 20px -14px rgb(75 91 216 / 60%);
}
.cp-actions-title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--primary-700);
}
.cp-actions-title::before {
    content: "";
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--primary-500);
    box-shadow: 0 0 0 3px rgb(101 119 234 / 20%);
    animation: pulse-soft 1.6s ease-in-out infinite;
}
.cp-action { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 13.5px; color: var(--surface-800); }
.cp-action + .cp-action { border-top: 1px dashed var(--primary-100); }
.cp-action .st {
    width: 22px; height: 22px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 11px; font-weight: 700;
    color: var(--primary-600);
    background: #fff;
    box-shadow: inset 0 0 0 1.5px var(--primary-300);
}
.cp-action-text { flex: 1; min-width: 0; }
.cp-action.blocked { color: var(--text-3); }
.cp-action.blocked .st { color: var(--surface-400); box-shadow: inset 0 0 0 1.5px var(--surface-300); }
.cp-action.done .st { color: #fff; background: var(--erp-synced); box-shadow: none; }
.cp-action.failed { color: var(--st-rejected-fg); }
.cp-action.failed .st { color: #fff; background: var(--erp-error); box-shadow: none; }
.cp-action small { display: block; font-size: 12px; color: var(--text-3); }
.cp-action.failed small { color: var(--st-rejected-fg); }
.cp-actions-btns { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.cp-btn {
    min-height: 36px;
    padding: 8px 16px;
    border: 1px solid var(--ink-800);
    border-radius: 10px;
    cursor: pointer;
    font: 600 13px var(--font-sans);
    color: #fff;
    background: var(--ink-800);
    transition: background-color .15s, border-color .15s;
}
.cp-btn:hover { background: var(--ink-700); border-color: var(--ink-700); }
.cp-btn.secondary { color: var(--surface-700); background: #fff; border-color: var(--border-strong); }
.cp-btn.secondary:hover { background: var(--surface-50); }
.cp-btn:disabled { opacity: .5; cursor: not-allowed; }
.cp-btn:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.cp-run { flex: none; min-height: 30px; padding: 5px 12px; font-size: 12.5px; }

/* Follow-up chips */
.cp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cp-chip {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font: 500 12.5px var(--font-sans);
    color: var(--surface-700);
    background: #fff;
    box-shadow: var(--shadow-soft);
    transition: border-color .15s, color .15s, background-color .15s;
}
.cp-chip:hover { color: var(--primary-700); border-color: var(--primary-200); background: var(--primary-50); }

/* Thinking indicator */
.cp-typing { display: flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 13.5px; color: var(--text-3); }
.cp-typing .cp-orb { margin-right: 8px; }
.cp-thinking {
    margin-right: 2px;
    font-weight: 500;
    background: linear-gradient(90deg, var(--surface-400) 0%, var(--primary-600) 50%, var(--surface-400) 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: cp-shimmer 1.6s linear infinite;
}
.cp-typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--surface-400); animation: pulse-soft 1s infinite; }
.cp-typing i:nth-of-type(2) { animation-delay: .15s; }
.cp-typing i:nth-of-type(3) { animation-delay: .3s; }
@keyframes cp-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ===== Composer =========================================================== */
.cp-foot { padding: 12px 14px 12px; background: #fff; border-top: 1px solid var(--surface-100); }
.cp-compose {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 10px 8px 14px;
    border: 1px solid var(--border-strong);
    border-radius: 16px;
    background: #fff;
    box-shadow: var(--shadow-soft);
    transition: border-color .15s, box-shadow .15s;
}
.cp-compose:focus-within { border-color: var(--primary-300); box-shadow: var(--shadow-glow); }
.cp-compose textarea {
    width: 100%;
    min-height: 24px;
    max-height: 120px;
    padding: 2px 0;
    resize: none;
    border: none;
    outline: none;
    font: 14px/1.5 var(--font-sans);
    color: var(--text);
    background: transparent;
}
.cp-compose textarea::placeholder { color: var(--surface-400); }
.cp-compose-bar { display: flex; align-items: center; gap: 8px; }
.cp-compose-tip { flex: 1; font-size: 11.5px; color: var(--surface-400); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-mic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 11px 0 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    font: 500 12.5px var(--font-sans);
    color: var(--surface-600);
    background: var(--surface-50);
    transition: background-color .15s, color .15s, border-color .15s;
}
.cp-mic .icon { width: 15px; height: 15px; }
.cp-mic:hover { color: var(--text); background: var(--surface-100); }
.cp-mic.listening { color: var(--st-rejected-fg); background: var(--st-rejected-bg); border-color: var(--st-rejected-ring); animation: pulse-soft 1.2s infinite; }
.cp-mic[hidden] { display: none; }
.cp-send {
    width: 34px;
    height: 34px;
    flex: none;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #6577ea, #4b5bd8);
    box-shadow: 0 6px 14px -6px rgb(75 91 216 / 80%);
    transition: transform .15s, opacity .15s;
}
.cp-send .icon { width: 17px; height: 17px; }
.cp-send:hover { transform: translateY(-1px); }
.cp-send:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.cp-send:focus-visible { outline: none; box-shadow: var(--shadow-glow); }
.cp-hint { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 9px; font-size: 11.5px; color: var(--surface-400); }
.cp-hint .icon { width: 13px; height: 13px; color: var(--erp-synced); }

/* ===== Responsive ========================================================= */
@media (max-width: 800px) { .cp-only-wide { display: none !important; } .cp-panel.expanded { width: 440px; } }
@media (max-width: 560px) {
    .cp-panel { inset: 0; width: 100vw; max-width: 100vw; border-radius: 0; }
    .cp-panel.expanded { width: 100vw; }
    .cp-launcher { right: 16px; bottom: 16px; }
    .cp-kbd, .cp-compose-tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .cp-orb, .cp-panel, .cp-typing i, .cp-mic.listening, .cp-thinking, .cp-actions-title::before { animation: none; }
}

/* ===== Receivables cards in the chat (approvals, agents, cases) ===== */
.cp-cards { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.cp-card {
    position: relative; display: flex; align-items: center; gap: 12px;
    padding: 11px 12px 11px 15px; border: 1px solid var(--border); border-radius: 13px;
    background: #fff; box-shadow: var(--shadow-soft);
}
.cp-card::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--surface-300); }
.cp-card.tone-blue::before { background: #2e90fa; }
.cp-card.tone-amber::before { background: #f79009; }
.cp-card.tone-red::before { background: #f04438; }
.cp-card.tone-green::before { background: #12b76a; }
.cp-card.tone-indigo::before { background: var(--primary-500); }
.cp-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cp-card-main strong { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text); }
.cp-card-main small { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-card-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; flex: none; }
.cp-card-amt { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text); }
.cp-card-badge { padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; color: var(--surface-600); background: var(--surface-100); white-space: nowrap; }
.cp-card.tone-blue .cp-card-badge { color: #175cd3; background: #eff8ff; }
.cp-card.tone-amber .cp-card-badge { color: #b54708; background: #fffaeb; }
.cp-card.tone-red .cp-card-badge { color: #b42318; background: #fef3f2; }
.cp-card.tone-green .cp-card-badge { color: #067647; background: #ecfdf3; }
.cp-card-meta { font-size: 11px; color: var(--text-3); white-space: nowrap; }
.cp-card-btns { display: flex; gap: 5px; }
.cp-card-btn {
    padding: 4px 10px; border: 1px solid var(--ink-800); border-radius: 8px; cursor: pointer;
    font: 600 12px var(--font-sans); color: #fff; background: var(--ink-800);
}
.cp-card-btn:hover { background: var(--ink-700); }
.cp-card-btn.ghost { color: var(--surface-700); background: #fff; border-color: var(--border-strong); }
.cp-card-btn.ghost:hover { background: var(--surface-50); }
.cp-suggest { display: grid; grid-template-columns: 1fr; }

/* Copilot entry points stay hidden until /api/v1/copilot/status says it is on
   (copilot.js adds html.cp-on), so a backend with COPILOT_ENABLED off shows none. */
html:not(.cp-on) [data-copilot-ask],
html:not(.cp-on) .dc-ask { display: none !important; }