/*
 * Assistente AI flottante (resources/views/filament/assistant/widget.blade.php,
 * comportamento in public/js/panel-assistant.js). Solo token del design
 * system: chiaro e dark li seguono da soli. Pallino lilla tenue con un
 * micro-accento lime; finestra = card del pannello, testata come le card
 * dei form, viola pieno solo per la CTA di conferma.
 */

.jo-ai [x-cloak] { display: none !important; }

/* ── Pallino ─────────────────────────────────────────────── */
.jo-ai-dot {
    position: fixed;
    z-index: 45;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border: 1.5px solid var(--ds-accent, #7C5CCB);
    border-radius: 999px;
    background: var(--ds-accent-soft-2, #EAE1FA);
    color: var(--ds-accent, #7C5CCB);
    /* Anello lilla + ombra: si stacca dalla pagina senza essere un pulsante pieno. */
    box-shadow: 0 0 0 4px var(--ds-accent-soft, #F3EEFC), var(--ds-shadow-raised, 0 8px 22px rgba(24, 24, 27, .16));
    cursor: grab;
    touch-action: none;
    user-select: none;
    transition: background .15s, transform .15s;
}

.jo-ai-dot:hover { background: var(--ds-accent-soft-hover, #E2D5F8); transform: translateY(-1px); }
.jo-ai-dot.is-dragging { cursor: grabbing; transform: scale(1.06); transition: none; }
.jo-ai-dot:focus-visible { outline: 2px solid var(--ds-focus-ring, #7C5CCB); outline-offset: 4px; }
.jo-ai-dot svg { width: 24px; height: 24px; }

.jo-ai-dot-lime {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--ds-accent-soft-2, #EAE1FA);
    border-radius: 999px;
    background: var(--ds-lime-strong, #A9C23F);
}

/* Etichetta verso il centro dello schermo: sempre finché non lo si è aperto, poi al passaggio. */
.jo-ai-dot-label {
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    padding: 5px 10px;
    border: 1px solid var(--ds-border, #D9DCE3);
    border-radius: 999px;
    background: var(--ds-surface, #FAFAFB);
    box-shadow: var(--ds-shadow-rest, 0 1px 3px rgba(24, 24, 27, .08));
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--ds-accent-fg, #5E00D6);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-50%);
    transition: opacity .15s;
}

.jo-ai-dot.is-left .jo-ai-dot-label { right: auto; left: calc(100% + 10px); }
.jo-ai-dot.is-new .jo-ai-dot-label,
.jo-ai-dot:hover .jo-ai-dot-label { opacity: 1; }
.jo-ai-dot.is-dragging .jo-ai-dot-label { opacity: 0; }

/* Pulsante in topbar, accanto alla campanella. */
.jo-ai-topbar-btn { color: var(--ds-accent, #7C5CCB) !important; }

/* ── Finestra ────────────────────────────────────────────── */
.jo-ai-win {
    position: fixed;
    z-index: 46;
    display: flex;
    flex-direction: column;
    /* Misure (normale 460×640, allargata 580×700) dal JS, entro la finestra. */
    width: 460px;
    height: 640px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow: hidden;
    border: 1px solid var(--ds-border, #D9DCE3);
    border-radius: var(--ds-radius-card, 12px);
    background: var(--ds-surface, #FAFAFB);
    box-shadow: var(--ds-shadow-raised, 0 12px 32px rgba(24, 24, 27, .16));
    color: var(--ds-text-primary, #18181B);
}

.jo-ai-win.is-min { height: auto !important; }
.jo-ai-win.is-moving { box-shadow: 0 18px 40px rgba(24, 24, 27, .22); transition: none; }
.jo-ai-win.is-moving .jo-ai-head { cursor: grabbing; }
.jo-ai-win.is-min .jo-ai-head { border-bottom: 0; cursor: pointer; }
.jo-ai-win.is-min .jo-ai-head:hover { background: var(--ds-accent-soft, #F3EEFC); }

.jo-ai-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 52px;
    padding: 6px 8px 6px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--ds-row-divider, var(--ds-border, #D9DCE3));
    background: var(--ds-surface, #FAFAFB);
    color: var(--ds-card-head-fg, #18181B);
    cursor: move;
    user-select: none;
    touch-action: none;
}

.jo-ai-head-ic { display: grid; flex-shrink: 0; place-items: center; width: 30px; height: 30px; border-radius: 999px; background: var(--ds-accent-soft-2, #EAE1FA); color: var(--ds-accent, #7C5CCB); }
.jo-ai-head-ic svg { width: 17px; height: 17px; }
.jo-ai-head-t { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.25; }
.jo-ai-head-t b { font-size: 14px; font-weight: 600; }
.jo-ai-head-tools { display: inline-flex; flex-shrink: 0; gap: 4px; cursor: default; }
.jo-ai-head-tools .jo-icon-btn svg { width: 16px; height: 16px; }

/* Contesto: una riga piccola sotto il titolo, si toglie con la ×. */
.jo-ai-ctx { display: flex; align-items: center; gap: 4px; min-width: 0; font-size: 11.5px; color: var(--ds-text-tertiary, #5B5B6B); cursor: default; }
.jo-ai-ctx .truncate { min-width: 0; }

.jo-ai-main { display: flex; flex-direction: column; min-height: 0; }

/* Conversazione */
.jo-ai-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.jo-ai-main { flex: 1; }
.jo-ai-body.is-empty { padding: 14px; }

/* Avvio: saluto, contesto, azioni rapide (come il chatbot pubblico, in sobrio). */
.jo-ai-intro { display: flex; flex-direction: column; gap: 10px; }
.jo-ai-hello b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ds-text-primary, #18181B); }
.jo-ai-hello p { margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--ds-text-tertiary, #5B5B6B); }

.jo-ai-where { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-ai-where b { min-width: 0; padding: 2px 9px; border-radius: 999px; background: var(--ds-accent-soft, #F3EEFC); font-weight: 500; color: var(--ds-accent-fg, #5F45A8); }
.jo-ai-where button { flex-shrink: 0; margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ds-text-link, var(--ds-accent, #7C5CCB)); }
.jo-ai-where button:hover { text-decoration: underline; }

.jo-ai-quick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 4px; }
.jo-ai-quick-h { margin-bottom: 2px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--ds-text-tertiary, #5B5B6B); }
/* Owner 8-ott-2026: righe neutre (testo scuro, freccia grigia), non pillole
   lilla come il contesto; lilla solo al passaggio. */
.jo-ai-qa {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 4px 8px 4px 2px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ds-text-primary, #18181B);
    text-align: left;
    transition: background-color .15s, color .15s;
}
.jo-ai-qa-ic { width: 14px; height: 14px; flex-shrink: 0; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-ai-qa:hover { background: var(--ds-accent-soft, #F3EEFC); color: var(--ds-accent-fg, #5B3FA8); }
.jo-ai-qa:hover .jo-ai-qa-ic { color: var(--ds-accent, #7C5CCB); }
.jo-ai-qa:focus-visible { outline: 2px solid var(--ds-focus-ring, #7C5CCB); outline-offset: 1px; }

/* "Nuova chat" in cima alla conversazione, discreto. */
.jo-ai-thread-bar { position: sticky; top: -12px; z-index: 1; display: flex; justify-content: flex-end; margin: -12px -12px 0; padding: 6px 10px; background: linear-gradient(var(--ds-surface, #FAFAFB) 70%, transparent); }
.jo-ai-thread-bar button { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-ai-thread-bar button:hover { background: var(--ds-accent-soft, #F3EEFC); color: var(--ds-accent-fg, #5F45A8); }
.jo-ai-thread-bar button:disabled { opacity: .5; }
.jo-ai-thread-bar svg { width: 13px; height: 13px; }

.jo-ai-turn { display: flex; flex-direction: column; }
.jo-ai-turn.is-user { align-items: flex-end; }
.jo-ai-bot { display: flex; flex-direction: column; gap: 6px; max-width: 94%; }

.jo-ai-msg { padding: 8px 11px; border-radius: 12px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.jo-ai-msg.is-user { max-width: 88%; border-bottom-right-radius: 4px; background: var(--ds-accent-soft, #F3EEFC); color: var(--ds-text-primary, #18181B); white-space: pre-wrap; }
.jo-ai-msg.is-bot { align-self: flex-start; padding: 2px 2px; color: var(--ds-text-secondary, #3F3F46); }

.jo-ai-md > * + * { margin-top: 6px; }
.jo-ai-md ul { padding-left: 18px; list-style: disc; }
.jo-ai-md strong { font-weight: 600; color: var(--ds-text-primary, #18181B); }
.jo-ai-md a { color: var(--ds-text-link, var(--ds-accent, #7C5CCB)); text-decoration: underline; }

/* Blocchi strutturati: piccoli, una card sola per blocco. */
.jo-ai-block { font-size: 13px; }

.jo-ai-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.jo-ai-metrics > div { display: flex; flex-direction: column; padding: 7px 9px; border: 1px solid var(--ds-border, #D9DCE3); border-radius: 8px; background: var(--ds-surface, #FAFAFB); }
.jo-ai-metrics span { font-size: 11.5px; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-ai-metrics b { font-size: 15px; font-weight: 600; color: var(--ds-text-primary, #18181B); font-variant-numeric: tabular-nums; }
.jo-ai-metrics small { font-size: 11px; color: var(--ds-text-tertiary, #5B5B6B); }

.jo-ai-records { overflow: hidden; border: 1px solid var(--ds-border, #D9DCE3); border-radius: 8px; background: var(--ds-surface, #FAFAFB); }
.jo-ai-records-t { padding: 6px 10px 2px; font-size: 11.5px; font-weight: 600; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-ai-record { display: flex; flex-direction: column; padding: 6px 10px; border-top: 1px solid var(--ds-row-divider, var(--ds-border, #D9DCE3)); }
.jo-ai-record:first-child, .jo-ai-records-t + .jo-ai-record { border-top: 0; }
.jo-ai-record:not(.is-static):hover { background: var(--ds-row-hover, #F4F0FF); }
.jo-ai-record b { font-weight: 500; color: var(--ds-text-primary, #18181B); }
.jo-ai-record span { font-size: 12px; color: var(--ds-text-tertiary, #5B5B6B); }

.jo-ai-link { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: var(--ds-text-link, var(--ds-accent, #7C5CCB)); }
.jo-ai-link svg { width: 14px; height: 14px; }

.jo-ai-action, .jo-ai-draft { padding: 9px 11px; border: 1px solid var(--ds-border, #D9DCE3); border-radius: 8px; background: var(--ds-surface, #FAFAFB); }
.jo-ai-action { border-left: 3px solid var(--ds-accent, #7C5CCB); }
.jo-ai-action.is-done { border-left-color: var(--ds-ok-dot, #78B892); }
.jo-ai-action.is-cancelled, .jo-ai-action.is-failed, .jo-ai-action.is-expired { border-left-color: var(--ds-border-strong, #9AA1B0); }
.jo-ai-action b, .jo-ai-draft b { display: block; font-weight: 600; color: var(--ds-text-primary, #18181B); }
.jo-ai-action ul { margin-top: 4px; color: var(--ds-text-secondary, #3F3F46); }
.jo-ai-action li { padding-left: 12px; text-indent: -12px; }
.jo-ai-action li::before { content: '· '; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-ai-action-foot, .jo-ai-draft-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 8px; }
.jo-ai-action-res { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 12.5px; color: var(--ds-text-tertiary, #5B5B6B); }
.jo-ai-action.is-done .jo-ai-action-res { color: var(--ds-ok-fg, #3F6212); }
.jo-ai-action-res a { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; color: var(--ds-text-link, var(--ds-accent, #7C5CCB)); }
.jo-ai-action-res a svg { width: 13px; height: 13px; }
.jo-ai-draft p { max-height: 220px; margin-top: 4px; overflow-y: auto; white-space: pre-wrap; color: var(--ds-text-secondary, #3F3F46); }

.jo-ai-notice { padding: 6px 10px; border: 1px solid var(--ds-warn-bd, #E9D9B0); border-radius: 8px; background: var(--ds-warn-bg, #FBF6E9); font-size: 12.5px; color: var(--ds-warn-fg, #7A5A12); }
.jo-ai-stopped { font-size: 12px; color: var(--ds-text-tertiary, #5B5B6B); }

.jo-ai-btn {
    height: 30px;
    padding: 0 12px;
    border: 1px solid var(--ds-border, #D9DCE3);
    border-radius: var(--ds-radius-control, 8px);
    background: var(--ds-surface, #FAFAFB);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ds-text-secondary, #3F3F46);
}

.jo-ai-btn:hover { background: var(--ds-surface-hover, #F1F2F5); }
.jo-ai-btn.is-primary { border-color: transparent; background: var(--ds-accent, #7C5CCB); color: #fff; }
.jo-ai-btn.is-primary:hover { background: var(--ds-accent-hover, #6A4BB8); }
.jo-ai-btn:disabled { opacity: .6; }

.jo-ai-typing { display: inline-flex; gap: 4px; padding: 6px 2px; }
.jo-ai-typing i { width: 6px; height: 6px; border-radius: 999px; background: var(--ds-text-tertiary, #5B5B6B); opacity: .4; animation: jo-ai-blink 1.2s infinite; }
.jo-ai-typing i:nth-child(2) { animation-delay: .2s; }
.jo-ai-typing i:nth-child(3) { animation-delay: .4s; }

@keyframes jo-ai-blink { 50% { opacity: 1; } }

/* Composer */
.jo-ai-composer {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    padding: 8px 10px 10px;
    border-top: 1px solid var(--ds-row-divider, var(--ds-border, #D9DCE3));
}

.jo-ai-composer textarea {
    flex: 1;
    min-height: 36px;
    max-height: 120px;
    padding: 8px 14px;
    border: 1px solid var(--ds-field-border, var(--ds-border, #D9DCE3));
    border-radius: 18px;
    background: var(--ds-surface, #FAFAFB);
    font-size: 13.5px;
    color: var(--ds-text-primary, #18181B);
    line-height: 18px;
    resize: none;
    /* Owner 15-ott-2026: niente barra di scorrimento accanto al testo; oltre i
       120px si scorre lo stesso con la rotellina. */
    overflow-y: auto;
    scrollbar-width: none;
}
.jo-ai-composer textarea::-webkit-scrollbar { display: none; }

.jo-ai-composer textarea::placeholder { color: var(--ds-text-placeholder, #6B6B7B); }
.jo-ai-composer textarea:focus { outline: none; border-color: var(--ds-accent, #7C5CCB); box-shadow: 0 0 0 3px var(--ds-accent-soft, #F3EEFC); }

.jo-ai-send {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--ds-accent, #7C5CCB);
    color: #fff;
}

.jo-ai-send:hover { background: var(--ds-accent-hover, #6A4BB8); }
.jo-ai-send:disabled { opacity: .5; }
.jo-ai-send.is-stop { background: var(--ds-surface-sunken, #F1F2F5); border: 1px solid var(--ds-border, #D9DCE3); color: var(--ds-text-primary, #18181B); }
.jo-ai-send svg { width: 16px; height: 16px; }

/* Voce: microfono, registrazione in corso, avviso breve sopra il composer. */
.jo-ai-mic {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 999px;
    color: var(--ds-text-secondary, #3F3F46);
}

.jo-ai-mic:hover { background: var(--ds-accent-soft, #F3EEFC); color: var(--ds-accent, #7C5CCB); }
.jo-ai-mic:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ds-accent-soft, #F3EEFC); }
.jo-ai-mic.is-on { background: var(--ds-accent-soft, #F3EEFC); border: 1px solid var(--ds-accent, #7C5CCB); color: var(--ds-accent, #7C5CCB); }
.jo-ai-mic svg { width: 18px; height: 18px; }

.jo-ai-rec {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 4px 0 14px;
    border: 1px solid var(--ds-accent, #7C5CCB);
    border-radius: 18px;
    background: var(--ds-surface, #FAFAFB);
    font-size: 13px;
    color: var(--ds-text-secondary, #3F3F46);
}

.jo-ai-rec.is-busy { border-color: var(--ds-field-border, var(--ds-border, #D9DCE3)); }
.jo-ai-rec-live { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.jo-ai-rec-live b { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ds-text-primary, #18181B); }
.jo-ai-rec-live .jo-ai-typing { padding: 0; }
.jo-ai-rec-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ds-err-dot, #D14343); animation: jo-ai-rec-pulse 1.2s ease-in-out infinite; }
.jo-ai-rec-x { width: 28px; height: 28px; }

.jo-ai-voice-note {
    margin: 0 10px;
    padding: 6px 10px;
    border: 1px solid var(--ds-warn-bd, #E9D9B0);
    border-radius: 8px;
    background: var(--ds-warn-bg, #FBF6E9);
    font-size: 12.5px;
    color: var(--ds-warn-fg, #7A5A12);
}

@keyframes jo-ai-rec-pulse { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
    .jo-ai-rec-dot { animation: none; }
}

/* Telefono: la finestra occupa la parte bassa dello schermo. */
@media (max-width: 639px) {
    .jo-ai-win {
        inset: auto 8px 8px 8px !important;
        width: auto !important;
        height: 78vh !important;
    }

    .jo-ai-win.is-min { height: auto !important; }
    .jo-ai-head-tools > :first-child { display: none; }
    .jo-ai-head { cursor: default; }
    .jo-ai-win.is-min .jo-ai-head { cursor: pointer; }
}

@media print {
    .jo-ai { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .jo-ai-dot, .jo-ai-typing i { transition: none; animation: none; }
}

/* Assistente: si apre solo dall'icona in topbar (owner 7-ott-2026), niente pallino fluttuante. */
.jo-ai-dot { display: none !important; }

/* JOORNA AI (owner 9-ott-2026): il simbolo di JOORNA in lime su tessera scura,
   il nome col marchio: JOORNA scuro e AI in viola. */
.jo-ai-head-ic--brand { border-radius: 9px; background: var(--ds-text-primary, #18181B); color: var(--ds-lime, hsl(70 93% 51%)); }
.jo-ai-head-ic--brand svg { width: 14px; height: 21px; }
.jo-ai-brand { letter-spacing: .04em; font-weight: 800; }
.jo-ai-brand > span { color: var(--ds-accent, #7C5CCB); }