/* ---------- Design system: portato dai file sorgente reali del prototipo Emergent (frontend/src/index.css e serviceagent/*.jsx, nell'export del cliente) ---------- Fino a questa passata i 3 temi usavano una palette e una scala tipografica pensate da zero (non quelle di Emergent): funzionavano, ma non erano "la stessa interfaccia di Emergent con i colori del tema" — erano un'interfaccia diversa. Da qui in poi i valori (colori, raggi, dimensioni testo, badge citazione) sono quelli letti direttamente nel CSS del prototipo, non un'approssimazione. */ :root { --bg: #eef1f6; --surface: #ffffff; --surface-2: #f2f6fc; --border: rgba(15, 23, 42, 0.08); --text: #0b1220; --text-secondary: #45536a; --text-muted: #8a97ab; --accent: #0284c7; --accent-dark: #0369a1; --accent-tint: rgba(2, 132, 199, 0.1); --accent-tint-strong: rgba(2, 132, 199, 0.35); /* Il fumetto delle domande del tecnico NON è legato al colore accento (prima lo era: da qui il bug del fumetto giallo con testo bianco in Modalità Officina, illeggibile). In Emergent è un colore dedicato, pensato apposta per restare leggibile in ogni tema. */ --user-bg: #0f172a; --user-fg: #ffffff; /* Sfondo dedicato del composer: deve leggersi come una card "sua" senza bordo, solo per contrasto di colore col fondo pagina — in chiaro il bianco puro (--surface) su --bg già grigio chiaro basta. */ --composer-bg: var(--surface); --radius-lg: 16px; --radius-md: 10px; --radius-sm: 7px; --shadow-sm: 0 1px 2px rgba(20, 22, 30, 0.04); --shadow-md: 0 4px 16px rgba(20, 22, 30, 0.06); --shadow-lg: 0 12px 32px rgba(20, 22, 30, 0.10); --border-strong: #d5d9df; --border-width: 1px; /* Scala tipografica: in Emergent NON cambia tra chiaro e scuro, cambia solo in Modalità Officina (vedi sotto) — qui sono i valori normali. */ --fs-answer: 15px; --lh-answer: 1.72; --fs-body: 14px; --cite-size: 20px; --cite-fs: 11px; --success-bg: #e3f7ea; --success-text: #1d8a4b; --warning-bg: #fdf3de; --warning-text: #8a6416; --danger-bg: #fbe9e7; --danger-text: #c0362c; /* Identità di marca (da Emergent): Yale = oro, mai rosso; Hyster = rosso. Non ancora usati ovunque nell'interfaccia — pronti per il wizard di selezione brand/modello e per colorare badge/elementi legati a un brand specifico quando arriverà. */ --yale: #f5b000; --yale-ink: #4a3200; --hyster: #dc2626; --hyster-ink: #ffffff; --font-heading: "Chivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-family: var(--font-body); } /* ---------- Tema scuro ---------- Attivato impostando data-theme="dark" su (vedi theme-switch in index.html + app.js). In Emergent questo è in realtà il tema DI BASE ("cockpit"): qui resta un'opzione tra tre invece del default, una scelta deliberata (vedi nota nel messaggio), non un errore di porting. */ [data-theme="dark"] { --bg: #08090c; --surface: #0f1117; --surface-2: #161922; --border: rgba(255, 255, 255, 0.09); --text: #f5f7fa; --text-secondary: #c8d2df; --text-muted: #6b7688; --accent: #38bdf8; --accent-dark: #0ea5e9; --accent-tint: rgba(56, 189, 248, 0.16); --accent-tint-strong: rgba(56, 189, 248, 0.42); --user-bg: #1e2836; --user-fg: #f5f7fa; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.45); --border-strong: #3a3f4a; --success-bg: rgba(29, 138, 75, 0.22); --success-text: #6fd99a; --warning-bg: rgba(184, 129, 30, 0.22); --warning-text: #e0b04d; --danger-bg: rgba(192, 54, 44, 0.22); --danger-text: #ff8a80; /* Qui è dove contava davvero: --sa-bg-1 (=--surface, #0f1117) è troppo vicino a --bg (#08090c) per leggersi come una card senza bordo — la differenza è quasi impercettibile. Un valore dedicato, chiaramente più chiaro, così il composer si distingue solo per colore, come richiesto. */ --composer-bg: #1b1f29; } /* ---------- Modalità Officina ---------- In Emergent NON è "gli stessi colori ma più contrastati": è una trasformazione completa — sfondo nero, bordi color oro Yale (non grigi), accento ciano acceso (non giallo: il giallo/oro in Emergent è riservato al bordo e al badge citazione), testo e badge citazione decisamente più grandi (è il pezzo che mancava: prima ingrandivo solo i pulsanti, non il testo delle risposte), bordi più spessi per leggibilità a distanza. Come in Emergent, è un attributo BOOLEANO INDIPENDENTE (data-workshop), non un terzo valore mutualmente esclusivo di data-theme: si può quindi attivare sopra al tema chiaro O scuro, invece di sostituirlo. */ [data-workshop="true"] { --bg: #000000; --surface: #070809; --surface-2: #111318; --border: rgba(245, 176, 0, 0.55); --text: #ffffff; --text-secondary: #eaf0f7; --text-muted: #aab4c2; --accent: #22e0ff; --accent-dark: #22e0ff; --accent-tint: rgba(34, 224, 255, 0.18); --accent-tint-strong: rgba(34, 224, 255, 0.4); --user-bg: #12233a; --user-fg: #ffffff; --radius-lg: 12px; --radius-md: 8px; --radius-sm: 6px; --shadow-sm: none; --shadow-md: none; --shadow-lg: none; --border-strong: #f5b000; --border-width: 2px; --composer-bg: #1c2029; --fs-answer: 20px; --lh-answer: 1.9; --fs-body: 17px; --cite-size: 32px; --cite-fs: 17px; --success-bg: rgba(29, 138, 75, 0.35); --success-text: #4ce38b; --warning-bg: rgba(224, 160, 0, 0.35); --warning-text: #ffcf40; --danger-bg: rgba(224, 50, 40, 0.35); --danger-text: #ff6b5e; } /* Questa lista è stata scritta quando esistevano solo chat e pannello admin (task #31): wizard, dashboard, menu Condividi e visualizzatore PDF a schermo intero (task #32-34) sono arrivati dopo e restavano fuori, quindi in Modalità Officina i loro controlli avevano i target touch piccoli come nel tema normale — proprio il tipo di elemento che serve più grande con mani sporche/guantate. Ora la lista copre ogni controllo cliccabile dell'app, non solo quelli della chat. */ [data-workshop="true"] #q-input, [data-workshop="true"] .send-btn, [data-workshop="true"] .mic-btn, [data-workshop="true"] .chip, [data-workshop="true"] .theme-toggle-btn, [data-workshop="true"] .workshop-btn, [data-workshop="true"] .icon-btn, [data-workshop="true"] .btn-primary, [data-workshop="true"] .btn-secondary, [data-workshop="true"] .link-btn, [data-workshop="true"] .view-nav-btn, [data-workshop="true"] .brand-choice, [data-workshop="true"] .class-choice, [data-workshop="true"] .model-choice, [data-workshop="true"] .department-card, [data-workshop="true"] .session-card-delete, [data-workshop="true"] .share-answer, [data-workshop="true"] .share-menu button, [data-workshop="true"] .feedback-btn, [data-workshop="true"] .copy-answer, [data-workshop="true"] .save-answer, [data-workshop="true"] #pdf-search-input { /* 56px = --sa-tap di Emergent in Modalità Officina (mio --tap più sotto). */ min-height: 56px; font-size: var(--fs-body); } [data-workshop="true"] .send-btn, [data-workshop="true"] .mic-btn, [data-workshop="true"] .theme-toggle-btn, [data-workshop="true"] .icon-btn { min-width: 56px; } /* .icon-btn-sm vive spesso in barre di controllo compatte (toolbar del PDF a schermo intero, zoom, ricerca): un salto a 56px lì rischierebbe di far traboccare la barra. 44px è comunque un target touch dignitoso (è lo standard minimo consigliato da Apple/Google) senza quel rischio. */ [data-workshop="true"] .icon-btn-sm { min-height: 44px; min-width: 44px; font-size: 15px; } /* ---------- Classi "sa-*" portate VERBATIM da index.css di Emergent ---------- Usate solo dalle sezioni ricostruite 1:1 (shell, header, hero, wizard inline, composer): non un'imitazione scritta da zero come i token --bg/--surface/ecc. sopra (quelli restano, e restano fedeli — i valori di colore erano già corretti), ma le stesse identiche classi/valori del file sorgente del prototipo, per essere davvero indistinguibili e non solo "molto simili". I token --sa-bg-1/--sa-bg-2/ecc. che referenziano sono definiti come alias dei miei --surface/--surface-2/ecc. qui sotto, così restano coerenti con i 3 temi già portati (punto 24bis del README) senza duplicare la cascata dei colori. */ :root, [data-theme="dark"], [data-workshop="true"] { --sa-bg-root: var(--bg); --sa-bg-1: var(--surface); --sa-bg-2: var(--surface-2); --sa-bg-3: var(--surface-2); --sa-border: var(--border); --sa-border-2: var(--border-strong); --sa-text: var(--text); --sa-text-2: var(--text-secondary); --sa-text-3: var(--text-muted); --sa-answer: var(--text); --sa-accent: var(--accent); --sa-accent-2: var(--accent-dark); --sa-accent-ink: #04121c; --sa-accent-glow: var(--accent-tint-strong); --sa-radius: var(--radius-lg); --sa-radius-sm: var(--radius-sm); --sa-tap: 44px; --sa-tap-lg: 48px; --sa-bw: var(--border-width); } [data-workshop="true"] { --sa-tap: 56px; --sa-tap-lg: 64px; } .bg-backdrop { background: radial-gradient(1100px 560px at 12% -8%, rgba(56, 189, 248, 0.12), transparent 55%), radial-gradient(900px 520px at 100% 108%, rgba(245, 176, 0, 0.07), transparent 52%), linear-gradient(160deg, #06070a 0%, #0a0c12 50%, #05060a 100%); } .sa-scroll { scrollbar-width: thin; scrollbar-color: #33404f transparent; } .sa-scroll::-webkit-scrollbar { width: 10px; } .sa-scroll::-webkit-scrollbar-thumb { background: #2b3644; border-radius: 999px; border: 3px solid transparent; background-clip: content-box; } .sa-scroll::-webkit-scrollbar-thumb:hover { background: #3d4a5a; background-clip: content-box; } .sa-card { background: var(--sa-bg-2); border: var(--sa-bw) solid var(--sa-border); border-radius: var(--sa-radius-sm); } .sa-dim { color: var(--sa-text-3); } .sa-sec { color: var(--sa-text-2); } .sa-tap { width: var(--sa-tap); height: var(--sa-tap); } .sa-tap-lg { width: var(--sa-tap-lg); height: var(--sa-tap-lg); } .sa-input { font-size: var(--fs-answer); color: var(--sa-text); } .sa-input::placeholder { color: var(--sa-text-3); } @keyframes caret-blink { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } } .animate-caret { display: inline-block; width: 0.55ch; height: 1.05em; vertical-align: -2px; margin-left: 2px; background: var(--sa-accent); box-shadow: 0 0 10px var(--sa-accent-glow); border-radius: 1px; animation: caret-blink 1s steps(1) infinite; } @keyframes wave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } } .sa-wave { display: flex; align-items: center; gap: 3px; } .sa-wave span { display: inline-block; width: 3px; height: 16px; border-radius: 2px; background: currentColor; transform-origin: center; animation: wave 0.9s ease-in-out infinite; } /* Reset minimo dei bottoni: con il preflight di Tailwind disattivato (per non toccare il resto dell'app, vedi la nota di apertura di index.html), i bottoni portati 1:1 da Emergent che contano su un default "trasparente, senza bordo" (quello che il preflight avrebbe applicato) mostravano invece lo sfondo/bordo nativo del browser (grigio chiaro) sopra la topbar scura. Ogni bottone in questa app ha già uno stile esplicito dalla sua classe, quindi questo reset è sicuro ovunque, non solo nella topbar. */ button { background: none; border: none; font: inherit; color: inherit; cursor: pointer; padding: 0; margin: 0; } /* Stesso motivo del reset dei bottoni qui sopra: senza il preflight di Tailwind, l'attributo nativo "hidden" (usato ovunque in app.js per mostrare/nascondere drawer, modali, badge conteggio ecc. via el.hidden = true/false) smette di funzionare non appena un elemento ha ANCHE una classe Tailwind che imposta display (es. "flex"): quella regola d'autore, anche semplicissima, vince sempre sul default [hidden]{display:none} dello user-agent stylesheet, che ha priorità sempre più bassa di qualunque regola in questo file indipendentemente dalla specificità. Riscoperto due volte in questa sessione (.side-pane, .side-drawer) prima di capire che serviva una regola sistemica come questa, non un fix caso per caso. */ [hidden] { display: none !important; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; color: var(--text); -webkit-font-smoothing: antialiased; /* Lo sfondo "vero" della pagina è sempre lo sfondo scuro del cockpit (vedi .app-backdrop): var(--bg) qui è solo un fallback nel breve istante prima che il CSS sia applicato. */ background: #06070a; } body { overflow: hidden; } /* ---------- Shell "cockpit": sfondo scuro fisso + card fluttuante ---------- In Emergent l'intera app vive dentro una singola card centrata (max-w-[1500px] ring-1 shadow-[...]) sopra un backdrop scuro con griglia sottile — non un'app a piena pagina. Il colore interno della card cambia con il tema, ma il backdrop e la topbar restano SEMPRE scuri: è la differenza strutturale più visibile rispetto al mio precedente layout ("il tuo layout con un cambio di palette"). */ /* .bg-backdrop e .bg-grid: definite più sopra, verbatim da Emergent (vedi blocco "Classi sa-* portate VERBATIM"). La struttura fixed/z-index della shell ora è Tailwind puro nell'HTML (stesse classi del JSX sorgente: fixed inset-0 flex items-center justify-center ... rounded-2xl ring-1 shadow-[...]), non più classi mie custom — vedi #app-shell in index.html. */ @media (max-width: 640px) { #app-shell { border-radius: 0 !important; } } /* ---------- Topbar ---------- Sempre scura (bg-[#0b0d12] in Emergent), indipendentemente dal tema interno della card: è la stessa barra "cruscotto" sia in chiaro che in scuro — solo la Modalità Officina non la tocca (resta l'unica eccezione visiva, per non compromettere il contrasto già massimizzato lì). */ /* .topbar: il box model (altezza, padding, sfondo, bordo) ora è dato dalle classi Tailwind esatte nell'HTML (stesse di ServiceAgent.jsx: h-16 flex items-center justify-between px-4 md:px-5 bg-[#0b0d12] border-b ...) — questa classe resta solo come marcatore per gli override "sempre scura" dei controlli sotto (.topbar .icon-btn, .topbar .view-nav, ecc.), non definisce più lei stessa il layout della barra. */ .header-spacer { flex: 1; } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { position: relative; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #38bdf8, #0ea5e9); color: #04121c; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; letter-spacing: 0.5px; flex-shrink: 0; } .brand-pulse { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: #4ce38b; box-shadow: 0 0 0 2px #0b0d12; animation: brandPulse 2s ease-in-out infinite; } @keyframes brandPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } .brand-text h1 { font-family: var(--font-heading); font-weight: 700; font-size: 16px; margin: 0; line-height: 1.2; color: #f5f7fa; } .brand-text p { font-size: 12.5px; color: #8b96a8; margin: 2px 0 0; } /* Titoli in tutta l'app: font da design system, non solo l'header */ h1, h2, .admin-head h2, .ticket-modal-head h2 { font-family: var(--font-heading); } /* La topbar è sempre scura, quindi i suoi testi/tag non devono seguire i token --text/--text-secondary del tema interno (che in chiaro sarebbero illeggibili su questo sfondo). */ .topbar .technician-tag, .topbar .model-tag, .topbar .view-nav-btn { color: #b7c1d1; } .topbar .technician-tag b, .topbar .model-tag b { color: #f5f7fa; } .topbar .model-tag { border-left-color: rgba(255, 255, 255, 0.12); } .topbar .link-btn { color: #38bdf8; } .topbar .view-nav { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.1); } .topbar .view-nav-btn:hover { color: #f5f7fa; } .topbar .view-nav-btn.active { background: rgba(255, 255, 255, 0.1); color: #38bdf8; box-shadow: none; } /* Rebrand "MGMT Service AI": MGMT resta bianco (già il colore di default dell'h1), "Service AI" prende questo accento celeste — un'unica classe così in futuro basterà cambiare questo colore (giallo Unicar) senza toccare l'HTML in più punti. */ .brand-accent { color: #7dd3fc; } /* ---------- Header controls: tema chiaro/scuro + Officina, indipendenti ---------- Due controlli separati (come Emergent: theme + workshop sono due stati React distinti), non più tre bottoni mutuamente esclusivi. Qui non c'è più CSS su misura: #theme-toggle e #workshop-toggle portano le stesse identiche classi Tailwind del bottone corrispondente in ServiceAgent.jsx, scambiate da app.js esattamente come farebbe React (className condizionale), non con selettori [data-...] scritti da me. */ .icon-btn { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); } .icon-btn-sm { width: 26px; height: 26px; } /* .icon-btn ha display:flex: senza queste regole [hidden] non avrebbe effetto (stesso motivo del fix su .ticket-modal[hidden]). */ .icon-btn[hidden], .icon-btn-sm[hidden] { display: none; } .technician-tag { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); margin-right: 14px; } .technician-tag b { color: var(--text); font-weight: 600; } .model-tag { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-secondary); margin-right: 14px; padding-left: 14px; border-left: 1px solid var(--border); } .model-tag b { color: var(--text); font-weight: 600; } .link-btn { border: none; background: transparent; color: var(--accent); font-size: 12px; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; } .link-btn-sm { border: none; background: transparent; color: var(--accent); font-size: 11px; font-weight: 600; cursor: pointer; padding: 0; text-decoration: underline; } /* ---------- Composer come UNA card unica ---------- Prima .composer-model-bar era un elemento nudo (nessun sfondo/bordo proprio, colori del design system "legacy" invece di quelli --sa-* usati dal resto del composer) piazzato semplicemente sopra #composer-card, che invece aveva sfondo/ombra propri: il risultato erano due riquadri visivamente slegati (segnalato esplicitamente dall'utente — nel tema chiaro si vedeva la barra come una striscia bianca piatta, a contrasto netto col resto scuro). Ora .composer-stack è la card unica: possiede lei sfondo/ombra/angoli, "overflow:hidden" fa da maschera così qualunque figlio (barra, anteprima foto, textarea) resta dentro gli stessi angoli arrotondati senza bisogno di ripetere il border-radius su ciascuno. */ .composer-stack { background: var(--composer-bg); border-radius: var(--sa-radius-sm); box-shadow: 0 10px 34px -22px rgba(0, 0, 0, 0.55); overflow: hidden; transition: box-shadow 0.2s ease; } .composer-stack:has(#composer-card.is-listening) { box-shadow: 0 0 0 1.5px rgba(56, 189, 248, 0.7), 0 0 0 4px var(--sa-accent-glow); } .composer-stack:has(#composer-card:focus-within):not(:has(#composer-card.is-listening)) { box-shadow: 0 0 0 1.5px var(--sa-border-2), 0 10px 34px -22px rgba(0, 0, 0, 0.55); } /* #composer-card non deve più portare il proprio sfondo/ombra/raggio: li possiede .composer-stack qui sopra, altrimenti si vedrebbero due bordi/ ombre sovrapposte (di nuovo l'effetto "due pezzi"). */ .composer-stack #composer-card { background: transparent; box-shadow: none; border-radius: 0; } .composer-stack #composer-card.is-listening, .composer-stack #composer-card:focus-within { box-shadow: none; } .composer-model-bar { padding: 10px 16px 9px; display: flex; flex-direction: column; gap: 5px; background: var(--sa-bg-3); border-bottom: 1px solid var(--sa-border); } .composer-model-line { display: flex; align-items: center; gap: 7px; font-size: 12px; flex-wrap: wrap; } .composer-model-label { color: var(--sa-text-3); font-weight: 600; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.03em; } .composer-model-value { color: var(--sa-text); font-weight: 600; } .composer-model-empty { color: var(--sa-text-3); font-style: italic; } /* Suggerimento "Ultimo usato" su una nuova conversazione: proposta, non riapplicata da sola (vedi enterChatSession) — colore secondario per non competere visivamente con "scegli", l'azione principale. */ .composer-model-suggestion { color: var(--sa-text-3) !important; font-weight: 500 !important; } .composer-model-suggestion:hover { color: var(--sa-accent) !important; } .composer-matricola-add { text-decoration: none !important; } .composer-matricola-value { border: none; background: transparent; padding: 0; color: var(--sa-text-2); font-weight: 600; font-family: var(--font-mono, monospace); cursor: pointer; text-decoration: underline dotted; } .composer-matricola-value:hover { color: var(--sa-accent); } .composer-matricola-input { border: 1px solid var(--sa-accent); border-radius: 6px; padding: 3px 8px; font-size: 12px; font-family: inherit; background: var(--sa-bg-1); color: var(--sa-text); max-width: 220px; } /* Chip "Memoria attiva": conferma visivamente, appena c'è una matricola, che la feature memoriaMatricola sta davvero facendo qualcosa — prima si scopriva solo alla seconda domanda sulla stessa matricola (quando compare lo storico), quindi sembrava che "non funzionasse". */ .composer-feature-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; color: var(--sa-accent); background: var(--sa-accent-glow); padding: 2px 8px; border-radius: 999px; } .matricola-history-banner { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; margin-bottom: 10px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border)); color: var(--text-secondary); font-size: 12px; line-height: 1.5; } .matricola-history-banner svg { flex-shrink: 0; margin-top: 2px; color: var(--accent); } .matricola-history-banner b { color: var(--text); } /* Banner "risposta non generata dal modello vero" (chiave assente, chiamata API fallita, errore di rete — vedi il campo "warning" mandato da server.js). Prima veniva letto lato client ma mai mostrato: una risposta estrattiva sembrava un modello che risponde male, non un modello che non è stato nemmeno chiamato. */ .answer-warning-banner { display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px; margin-bottom: 10px; border-radius: var(--radius-sm); background: var(--warning-bg); border: 1px solid color-mix(in srgb, var(--warning-text) 40%, transparent); color: var(--warning-text); font-size: 12px; line-height: 1.5; font-weight: 600; } .answer-warning-banner svg { flex-shrink: 0; margin-top: 2px; } /* ---------- Foto guasto (fotoGuasto) ---------- */ .composer-photo-preview { padding: 0 16px 8px; } .photo-preview-chip { position: relative; display: inline-block; width: 64px; height: 64px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); } .photo-preview-chip img { width: 100%; height: 100%; object-fit: cover; display: block; } .photo-preview-chip button { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; background: rgba(0,0,0,0.65); color: #fff; cursor: pointer; } .msg-photo { display: block; max-width: 220px; max-height: 220px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 8px; } /* ---------- Overlay identità tecnico (stand-in per login Joomla) ---------- */ .identity-overlay { position: fixed; inset: 0; background: rgba(20, 22, 30, 0.5); display: flex; align-items: center; justify-content: center; z-index: 60; animation: fadeIn 0.15s ease; } .identity-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px; width: 340px; max-width: 90vw; } .identity-card h2 { margin: 0 0 8px; font-size: 17px; } .identity-card p { margin: 0 0 16px; font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; } .identity-card input { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 14px; font-family: inherit; margin-bottom: 12px; } /* ---------- Timeline / step estratti da una procedura ---------- */ .steps-checklist { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; } .step-row { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; font-size: 13px; } .step-check { margin-top: 3px; accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; } .step-num { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--accent-tint-strong); color: var(--accent-dark); font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin-top: 1px; } .step-text { line-height: 1.45; } .step-row:has(.step-check:checked) .step-text { text-decoration: line-through; color: var(--text-muted); } .step-row.step-active { background: var(--accent-tint); border-radius: var(--radius-sm); margin: 0 -6px; padding: 6px; } .steps-toolbar { display: flex; justify-content: flex-end; margin-bottom: 8px; } .handsfree-toggle-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-secondary); font-size: 11.5px; font-weight: 600; padding: 5px 11px; cursor: pointer; transition: border-color 0.15s, color 0.15s, background 0.15s; } .handsfree-toggle-btn:hover { border-color: var(--accent); color: var(--accent); } .handsfree-toggle-btn.is-active { background: var(--accent); color: #fff; border-color: var(--accent); } /* ---------- Layout ---------- */ .layout { flex: 1; /* Senza questo, un figlio flex con flex:1 dentro un flex-container a colonna (qui ) si ingrandisce comunque per contenere tutto il suo contenuto invece di restare confinato all'altezza disponibile — il bug classico del "min-height:auto" di flexbox. Con conversazioni brevi non si notava (il contenuto ci stava comunque), ma con una conversazione lunga faceva crescere l'intera pagina oltre il viewport, disattivando lo scroll interno di .chat-scroll e lasciando il campo domanda irraggiungibile in fondo. */ min-height: 0; display: grid; /* Il pannello destro NON è più sempre presente: come nel vero ServiceAgent.jsx (showPdf = pdfOpen && activeSource), esiste nel layout solo quando c'è una citazione attiva da mostrare — di default la chat occupa tutta la larghezza. Vedi setPreviewPaneActive() in app.js, chiamata da activateCitations()/clearPreview(). */ grid-template-columns: minmax(0, 1fr); gap: 0; overflow: hidden; transition: grid-template-columns 0.2s ease; } .layout.preview-active { /* Proporzione chat/anteprima richiesta esplicitamente dal cliente: 50% chat / 50% anteprima. --side-pane-width (JS) sovrascrive il clamp quando l'utente trascina #pane-resizer. */ grid-template-columns: minmax(0, 1fr) 6px var(--side-pane-width, clamp(390px, 50%, 750px)); } /* .side-pane parte già da display:none nella sua stessa regola più sotto (specificità pari, ma qui basterebbe l'ordine): la tengo comunque anche qui per chiarezza. .pane-resizer (un
, block di default) va invece nascosto esplicitamente. */ .pane-resizer { display: none; } .layout.preview-active .side-pane { display: flex; } .layout.preview-active .pane-resizer { display: block; } .pane-resizer { cursor: col-resize; background: var(--border); transition: background 0.15s; } .pane-resizer:hover, .pane-resizer.dragging { background: var(--accent); } @media (max-width: 900px) { .layout.preview-active { grid-template-columns: 1fr; } .side-pane, .pane-resizer { display: none; } } /* ---------- Chat pane ---------- */ .chat-pane { display: flex; flex-direction: column; height: 100%; min-height: 0; /* stesso motivo di .layout qui sopra */ border-right: 1px solid var(--border); min-width: 0; } .chat-scroll { flex: 1; overflow-y: auto; padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; } /* ---------- Hero (stato vuoto della chat) ---------- Ora è il markup 1:1 di Welcome() in ServiceAgent.jsx (classi Tailwind dirette in index.html), non più una versione scritta a mano: badge, titolo enorme con glow, sottotesto, e il wizard di selezione INCASSATO nella hero stessa (SelectionWizard.jsx) invece che dietro un bottone che apre un modale — era l'ultimo pezzo strutturale rimasto diverso da Emergent. La regola qui sotto serve solo al messaggio "server non raggiungibile" (vedi app.js), che riusa il contenitore .empty-state SENZA le classi Tailwind di centratura della hero reale: :not(.h-full) evita che questa regola tocchi la hero vera. */ .empty-state:not(.h-full) { margin: auto; max-width: 440px; text-align: center; color: var(--text-secondary); padding: 24px; } .empty-title { font-size: 16px; font-weight: 600; color: var(--text); margin: 0 0 6px; } .empty-sub { font-size: 13.5px; line-height: 1.6; margin: 0 0 20px; } .chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 10px 18px; font-size: 13px; color: var(--text); cursor: pointer; transition: border-color 0.15s, background 0.15s, transform 0.1s; text-align: left; } .chip:hover { border-color: var(--accent); background: var(--accent-tint); transform: translateY(-1px); } /* ---------- Wizard inline (SelectionWizard.jsx, portato 1:1) ---------- Le card brand/classe/modello usano .sa-card (già definita sopra, verbatim da Emergent) più una striscia di colore laterale via inline style (colore dinamico dal brand, non esprimibile con una classe statica). */ .hero-brand-choice, .hero-class-choice, .hero-model-choice { position: relative; text-align: left; overflow: hidden; transition: transform 0.15s, border-color 0.15s; } .hero-brand-choice:hover, .hero-class-choice:hover, .hero-model-choice:hover { transform: translateY(-2px); } .hero-wizard-stripe { position: absolute; left: 0; top: 0; bottom: 0; } .hero-brand-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .hero-brand-choice:hover { filter: brightness(1.08); } /* ---------- Messages ---------- */ .msg { display: flex; gap: 12px; max-width: 100%; animation: fadeUp 0.25s ease; } @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .msg.user { justify-content: flex-end; } .msg.user .bubble { /* Colore dedicato (non l'accento): era il bug del fumetto giallo con testo bianco illeggibile in Modalità Officina — vedi nota sui token --user-bg/--user-fg in cima al file. */ background: var(--user-bg); color: var(--user-fg); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg); max-width: 82%; } .msg.assistant .bubble { /* In Emergent la risposta dell'assistente non è dentro una "card" con bordo/sfondo/ombra: è testo che scorre libero accanto all'avatar (solo le domande del tecnico hanno un fumetto). Tolto qui il bordo/sfondo che avevo aggiunto di mia iniziativa. */ max-width: 85%; } .bubble { padding: 13px 0; font-size: var(--fs-answer); line-height: var(--lh-answer); } .msg.user .bubble { padding: 10px 16px; } .bubble p { margin: 0; } /* Ogni passaggio citato diventa un blocco a sé, con il numerino all'inizio (non più in coda): il badge apre il testo che sostiene e, essendo un blocco, va automaticamente a capo rispetto al testo precedente. */ .answer-text { display: flex; flex-direction: column; gap: 10px; } .answer-block { display: block; } .answer-block .cite-badge { margin: 0 6px 0 0; transform: translateY(-1px); } .avatar { /* Quadrato con angoli smussati (come Emergent), non un cerchio. */ width: 32px; height: 32px; border-radius: 8px; background: var(--surface-2); color: var(--accent); border: var(--border-width) solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } /* Badge citazione "[1]" [2]...": pillola con angoli arrotondati (non un cerchio), in font monospazio. Su richiesta dell'utente il colore è oro Yale con testo nero SEMPRE (chiaro, scuro e Officina), non più solo in Modalità Officina — leggermente più grande del valore di base per maggiore leggibilità, poi ulteriormente ingrandita in Officina tramite --cite-size/--cite-fs come già previsto. */ .cite-badge { display: inline-flex; align-items: center; justify-content: center; vertical-align: baseline; transform: translateY(1px); margin: 0 2px; min-width: calc(var(--cite-size) + 3px); height: calc(var(--cite-size) + 3px); padding: 0 7px; font-size: calc(var(--cite-fs) + 1px); font-weight: 700; font-family: var(--font-mono); line-height: 1; border-radius: 8px; background: var(--yale); color: #000; border: var(--border-width) solid var(--yale-ink); cursor: pointer; transition: background-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s; } .cite-badge:hover { background: #ffd873; color: #000; transform: translateY(-1px); } [data-workshop="true"] .cite-badge { border: 2px solid #ffd873; } [data-workshop="true"] .cite-badge:hover { background: #ffffff; color: #000; } .thinking { display: flex; align-items: center; gap: 8px; color: var(--text-secondary); font-size: 13px; } .dot-pulse { display: flex; gap: 4px; } .dot-pulse span { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: pulse 1.2s infinite ease-in-out; } .dot-pulse span:nth-child(2) { animation-delay: 0.15s; } .dot-pulse span:nth-child(3) { animation-delay: 0.3s; } @keyframes pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); } 40% { opacity: 1; transform: scale(1); } } .no-answer { font-size: 13px; color: var(--text-secondary); border-top: 1px solid var(--border); margin-top: 10px; padding-top: 10px; } /* ---------- Composer ---------- Markup 1:1 da Composer.jsx (vedi index.html): la card, il textarea auto-crescente e i due bottoni usano già le classi Tailwind/sa-* esatte del sorgente. Qui restano solo i dettagli che quelle classi non coprono: il vincolo di larghezza (max-w-[760px] mx-auto, come il resto della colonna chat) e le due varianti di colore di mic/invio che in React sono un className condizionale — qui applicate/rimosse da app.js esattamente sugli stessi punti (bg-sky-500, ecc.), non da CSS a parte. */ .composer { max-width: 760px; margin: 0 auto; width: 100%; flex-shrink: 0; } /* Il bordo netto di .sa-card (1px pieno) risultava troppo marcato sulla textarea del prompt. Prima tentativo: un anello box-shadow a bassa opacità al posto del border — ma visivamente è comunque un contorno rettangolare pieno, quindi ancora percepito come "bordo" dall'utente. Ora: nessun anello a riposo, solo l'ombra morbida per dare profondità e il contrasto naturale tra --sa-bg-1 (card) e --bg (pagina) a delimitare la card; il ring torna solo su focus/ascolto, dove serve davvero come indicatore di stato. */ #composer-card { border-color: transparent; /* --composer-bg (non --sa-bg-1): --sa-bg-1 è troppo simile al fondo pagina in scuro per farsi notare senza bordo — vedi definizione di --composer-bg per tema più sopra nel file. */ background: var(--composer-bg); box-shadow: 0 10px 34px -22px rgba(0, 0, 0, 0.55); transition: box-shadow 0.2s ease, background-color 0.2s ease; } #composer-card.is-listening { box-shadow: 0 0 0 1.5px rgba(56, 189, 248, 0.7), 0 0 0 4px var(--sa-accent-glow); } #composer-card:focus-within:not(.is-listening) { box-shadow: 0 0 0 1.5px var(--sa-border-2), 0 10px 34px -22px rgba(0, 0, 0, 0.55); } /* Il bordo che si vedeva SEMPRE, a prescindere da qualunque modifica a #composer-card, non veniva da lì: era il bordo di default del browser sulla