/* L'elemento 3D di Graphorum (la G della hero, ruotata in 36 fotogrammi dal suo motore WebGL, gmorph.js) al posto
   del simbolo AI ovunque: fermo di fronte, gira quando ci passi sopra con il mouse o quando l'AI sta lavorando. */
.gx-orb { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: middle; fill: none !important;
  stroke: none !important; background: url(/static/img/gmark-light.webp) 0 0 / 3600% 100% no-repeat; }
:root[data-theme="dark"] .gx-orb { background-image: url(/static/img/gmark-dark.webp); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .gx-orb { background-image: url(/static/img/gmark-dark.webp); } }
@keyframes gx-turn { from { background-position-x: 0%; } to { background-position-x: 100%; } }
:is(a, button, [role="button"], [role="tab"], label, summary, .nr-app, .cp-av, .msg, .bb-chat):hover .gx-orb, .gx-orb:hover,
.qc-busy .gx-orb, .gx-busy .gx-orb, .gx-orb.gx-busy {
  animation: gx-turn 1.2s steps(36, jump-none) infinite; }
@media (prefers-reduced-motion: reduce) { .gx-orb { animation: none !important; } }

/* il pulsante della chat rapida: la G 3D viva (WebGL) sopra WhatsApp e Telegram */
.qc-orb { position: relative; display: grid; place-items: center; padding: 0; border: 0; background: transparent; box-shadow: none;
  cursor: pointer; perspective: 400px; }
.qc-orb canvas, .qc-orb .gx-orb { width: 100%; height: 100%; display: block; }
.qc-orb .gx-orb { font-size: 1.9rem; width: 1em; height: 1em; }
.qc-orb::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, color-mix(in srgb, #38BDF8 38%, transparent), transparent 70%); opacity: 0; transition: opacity .25s; }
.qc-orb:hover::after, .qc-orb.on::after { opacity: 1; }
@keyframes qc-orb-spin { from { transform: rotateY(0) scale(1); } 50% { transform: rotateY(180deg) scale(1.12); } to { transform: rotateY(360deg) scale(1); } }
.qc-orb .badge { position: absolute; top: 0; right: 0; }
.qc-orb.qc-busy::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; border: 2px solid transparent;
  border-top-color: #38BDF8; animation: qc-orb-ring 1s linear infinite; }
@keyframes qc-orb-ring { to { transform: rotate(360deg); } }
.qc-orb.qc-new::before { content: ""; position: absolute; top: 3px; right: 3px; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--ok, #12A56A); box-shadow: 0 0 0 2px var(--surface); }

/* la pillola delle domande esce dalla G e ci rientra: si allunga verso sinistra partendo da un cerchio grande come la G,
   il vetro si schiarisce, il contenuto arriva subito dopo; né scatto né lentezza (mezzo secondo abbondante) */
.qc-bar.qc-pop-in { animation: qc-bar-in .56s cubic-bezier(.22, 1, .36, 1) both; }
.qc-bar.qc-pop-in > * { animation: qc-bar-items .42s cubic-bezier(.22, 1, .36, 1) .16s both; }
.qc-bar.qc-pop-out { animation: qc-bar-out .34s cubic-bezier(.55, 0, .75, .2) both; pointer-events: none; }
.qc-bar.qc-pop-out > * { animation: qc-bar-items-out .16s ease-in both; }
@keyframes qc-bar-in { from { width: 2.9rem; opacity: 0; transform: translateX(10px) scale(.92); filter: blur(4px); }
  45% { opacity: 1; filter: blur(0); } to { width: var(--qc-w, 540px); opacity: 1; transform: none; filter: none; } }
@keyframes qc-bar-out { from { width: var(--qc-w, 540px); opacity: 1; transform: none; }
  to { width: 2.9rem; opacity: 0; transform: translateX(10px) scale(.92); } }
@keyframes qc-bar-items { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes qc-bar-items-out { to { opacity: 0; transform: translateX(10px); } }
@media (prefers-reduced-motion: reduce) {
  .qc-bar.qc-pop-in, .qc-bar.qc-pop-out, .qc-bar.qc-pop-in > *, .qc-bar.qc-pop-out > * { animation-duration: 1ms; animation-delay: 0s; } }
/* la G in fondo ai pulsanti in basso a destra (sotto «Torna su»): un po' più piccola delle altre icone grandi */
.chat-dock .qc-orb.nr-app, .chat-dock.in-rail .qc-orb.nr-app { width: 2.5rem; height: 2.5rem; border: 0; background: transparent; box-shadow: none; }
.chat-dock .qc-orb.hidden { display: none; }
@media (max-width: 860px) { .chat-dock .qc-orb { display: none !important; } }     /* telefono: c'è «Chiedi» nella barra in basso */
/* la G su fondo chiaro dove prima c'era il cerchio colorato (Chiedi nella barra, avatar della chat): si legge bene */
.bb-chat-ico:has(.gx-orb), .cp-av:has(.gx-orb) { background: var(--surface, #fff) !important;
  box-shadow: 0 0 0 1.5px color-mix(in srgb, #2F6BFF 35%, transparent), 0 6px 16px -6px rgba(47, 107, 255, .55) !important; }
.bb-chat-ico .gx-orb { width: 1.75rem !important; height: 1.75rem !important; }
.cp-av .gx-orb { width: 1.6rem !important; height: 1.6rem !important; }

/* all'ingresso: la barra si presenta con un alone, la G di «Chiedi» sul telefono pulsa mentre gira */
.qc-bar.qc-hello { border-color: color-mix(in srgb, #38BDF8 60%, transparent); }
.bb-chat.bb-hello .bb-chat-ico { animation: bb-hello .7s cubic-bezier(.3, .7, .2, 1) 2; }
@keyframes bb-hello { 50% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) { .bb-chat.bb-hello .bb-chat-ico { animation: none; } }

/* la G accanto alle risposte dell'AI (chat e chat rapida): fuori dalla bolla, sullo sfondo della pagina; gira mentre
   l'AI lavora (gx-busy) e, sull'ultima risposta, fa un giro ogni sei secondi come la favicon */
#chat-log .msg.assistant { position: relative; margin-left: 2.9rem; max-width: min(760px, calc(100% - 2.9rem)); }
.msg-av { position: absolute; left: -2.85rem; bottom: 0; width: 2.5rem; height: 2.5rem; display: grid; place-items: center;
  pointer-events: none; }
.msg-av .gx-orb { font-size: 2.5rem; width: 1em; height: 1em; }   /* il marchio occupa 3/4 del fotogramma */
#chat-log .msg.assistant.live { min-width: min(420px, calc(100% - 2.9rem)); }
@keyframes gx-idle { 0% { background-position-x: 0%; animation-timing-function: steps(35, jump-none); }
  40% { background-position-x: 100%; } 40.01%, 100% { background-position-x: 0%; } }
.msg-latest > .msg-av:not(.gx-busy) .gx-orb { animation: gx-idle 6s infinite; }
@media (max-width: 640px) {
  #chat-log .msg.assistant { margin-left: 2.4rem; max-width: calc(100% - 2.4rem); }
  #chat-log .msg.assistant.live { min-width: min(420px, calc(100% - 2.4rem)); }
  .msg-av { left: -2.4rem; width: 2.1rem; height: 2.1rem; } .msg-av .gx-orb { font-size: 2.1rem; }
}
/* Sala agenti: il Cervello coordinatore parla con la G */
.ar-av .gx-orb { font-size: 1.35rem; width: 1em; height: 1em; }
.ar-msg.k-brain:last-of-type .ar-av .gx-orb, .ar-card[data-ar-agent="cervello"] header .ar-av .gx-orb { animation: gx-idle 6s infinite; }
@media (prefers-reduced-motion: reduce) { .msg-av .gx-orb, .ar-av .gx-orb { animation: none !important; } }
/* a riposo (html.g-rest, favicon-spin.js) il giro ogni sei secondi si ferma; quando l'AI lavora (gx-busy) gira sempre */
html.g-rest :is(.msg-latest > .msg-av:not(.gx-busy) .gx-orb, .ar-msg.k-brain:last-of-type .ar-av .gx-orb,
  .ar-card[data-ar-agent="cervello"] header .ar-av .gx-orb):not(.gx-busy) { animation-play-state: paused; }