/* team-mate.space — tema Resend/Vercel. Fonte unica di colori, font e palette agenti. */
:root, .dark {
  --g-50: 250 250 250;
  --g-100: 237 237 237;
  --g-200: 212 212 212;
  --g-300: 199 199 199;
  --g-400: 161 161 161;
  --g-500: 143 143 143;
  --g-600: 92 92 92;
  --g-700: 46 46 46;
  --g-800: 31 31 31;
  --g-900: 17 17 17;
  --g-950: 10 10 10;
  --c-white: 255 255 255;
  --c-black: 0 0 0;
  --bg-canvas: #000000;
  --bg-header: #000000;
  --bg-surface: #0a0a0a;
  --bg-card: #0a0a0a;
  --bg-card-hover: #111111;
  --bg-drawer: #000000;
  --bg-input: #0a0a0a;
  --border-subtle: #1f1f1f;
  --border-strong: #333333;
  --text-main: #ededed;
  --text-secondary: #c7c7c7;
  --text-muted: #a1a1a1;
  --text-faint: #707070;
  --btn-primary-bg: #ededed;
  --btn-primary-text: #0a0a0a;
  --btn-sec-bg: transparent;
  --btn-sec-border: #262626;
  --btn-sec-text: #ededed;
  --badge-bg: #0a0a0a;
  --badge-border: #262626;
  --badge-text: #a1a1a1;
  --kbd-bg: #0a0a0a;
  --kbd-border: #262626;
  --kbd-text: #8f8f8f;
  --status-ok: #45d483;
  --status-warn: #f5a623;
  --agent-aura: #ff8fb1;
  --agent-aura-bg: rgb(255 143 177 / 0.12);
  --agent-aura-bd: rgb(255 143 177 / 0.35);
  --agent-marc: #ff1744;
  --agent-marc-bg: rgb(255 23 68 / 0.12);
  --agent-marc-bd: rgb(255 23 68 / 0.35);
  --agent-leo: #ff8a00;
  --agent-leo-bg: rgb(255 138 0 / 0.12);
  --agent-leo-bd: rgb(255 138 0 / 0.35);
  --agent-finn: #ffe600;
  --agent-finn-bg: rgb(255 230 0 / 0.12);
  --agent-finn-bd: rgb(255 230 0 / 0.35);
  --agent-axel: #ffc48a;
  --agent-axel-bg: rgb(255 196 138 / 0.12);
  --agent-axel-bd: rgb(255 196 138 / 0.35);
  --agent-mindy: #a3ff12;
  --agent-mindy-bg: rgb(163 255 18 / 0.12);
  --agent-mindy-bd: rgb(163 255 18 / 0.35);
  --agent-code: #00e640;
  --agent-code-bg: rgb(0 230 64 / 0.12);
  --agent-code-bd: rgb(0 230 64 / 0.35);
  --agent-data: #00ffc8;
  --agent-data-bg: rgb(0 255 200 / 0.12);
  --agent-data-bd: rgb(0 255 200 / 0.35);
  --agent-techna: #00d4ff;
  --agent-techna-bg: rgb(0 212 255 / 0.12);
  --agent-techna-bd: rgb(0 212 255 / 0.35);
  --agent-lex: #2f7bff;
  --agent-lex-bg: rgb(47 123 255 / 0.12);
  --agent-lex-bd: rgb(47 123 255 / 0.35);
  --agent-iris: #9fe7ff;
  --agent-iris-bg: rgb(159 231 255 / 0.12);
  --agent-iris-bd: rgb(159 231 255 / 0.35);
  --agent-sage: #f2f08c;
  --agent-sage-bg: rgb(242 240 140 / 0.12);
  --agent-sage-bd: rgb(242 240 140 / 0.35);
  --agent-archy: #8c6bff;
  --agent-archy-bg: rgb(140 107 255 / 0.12);
  --agent-archy-bd: rgb(140 107 255 / 0.35);
  --agent-echo: #d9c7ff;
  --agent-echo-bg: rgb(217 199 255 / 0.12);
  --agent-echo-bd: rgb(217 199 255 / 0.35);
  --agent-orchestra: #c040ff;
  --agent-orchestra-bg: rgb(192 64 255 / 0.12);
  --agent-orchestra-bd: rgb(192 64 255 / 0.35);
  --agent-pixel: #ff3df2;
  --agent-pixel-bg: rgb(255 61 242 / 0.12);
  --agent-pixel-bd: rgb(255 61 242 / 0.35);
}
.light {
  --g-50: 10 10 10;
  --g-100: 23 23 23;
  --g-200: 38 38 38;
  --g-300: 51 51 51;
  --g-400: 92 92 92;
  --g-500: 102 102 102;
  --g-600: 143 143 143;
  --g-700: 214 214 214;
  --g-800: 232 232 232;
  --g-900: 242 242 242;
  --g-950: 250 250 250;
  --c-white: 10 10 10;
  --c-black: 255 255 255;
  --bg-canvas: #ffffff;
  --bg-header: #ffffff;
  --bg-surface: #fafafa;
  --bg-card: #ffffff;
  --bg-card-hover: #fafafa;
  --bg-drawer: #ffffff;
  --bg-input: #ffffff;
  --border-subtle: #eaeaea;
  --border-strong: #d0d0d0;
  --text-main: #171717;
  --text-secondary: #333333;
  --text-muted: #5c5c5c;
  --text-faint: #767676;
  --btn-primary-bg: #171717;
  --btn-primary-text: #ffffff;
  --btn-sec-bg: transparent;
  --btn-sec-border: #e0e0e0;
  --btn-sec-text: #171717;
  --badge-bg: #fafafa;
  --badge-border: #e0e0e0;
  --badge-text: #5c5c5c;
  --kbd-bg: #fafafa;
  --kbd-border: #e0e0e0;
  --kbd-text: #666666;
  --status-ok: #15803d;
  --status-warn: #b45309;
  --agent-aura: #a85e74;
  --agent-aura-bg: rgb(168 94 116 / 0.08);
  --agent-aura-bd: rgb(168 94 116 / 0.28);
  --agent-marc: #e5143d;
  --agent-marc-bg: rgb(229 20 61 / 0.08);
  --agent-marc-bd: rgb(229 20 61 / 0.28);
  --agent-leo: #af5f00;
  --agent-leo-bg: rgb(175 95 0 / 0.08);
  --agent-leo-bd: rgb(175 95 0 / 0.28);
  --agent-finn: #827500;
  --agent-finn-bg: rgb(130 117 0 / 0.08);
  --agent-finn-bd: rgb(130 117 0 / 0.28);
  --agent-axel: #8e6d4d;
  --agent-axel-bg: rgb(142 109 77 / 0.08);
  --agent-axel-bd: rgb(142 109 77 / 0.28);
  --agent-mindy: #538209;
  --agent-mindy-bg: rgb(83 130 9 / 0.08);
  --agent-mindy-bd: rgb(83 130 9 / 0.28);
  --agent-code: #008725;
  --agent-code-bg: rgb(0 135 37 / 0.08);
  --agent-code-bd: rgb(0 135 37 / 0.28);
  --agent-data: #008467;
  --agent-data-bg: rgb(0 132 103 / 0.08);
  --agent-data-bd: rgb(0 132 103 / 0.28);
  --agent-techna: #007f98;
  --agent-techna-bg: rgb(0 127 152 / 0.08);
  --agent-techna-bd: rgb(0 127 152 / 0.28);
  --agent-lex: #2a6fe8;
  --agent-lex-bg: rgb(42 111 232 / 0.08);
  --agent-lex-bd: rgb(42 111 232 / 0.28);
  --agent-iris: #547a87;
  --agent-iris-bg: rgb(84 122 135 / 0.08);
  --agent-iris-bd: rgb(84 122 135 / 0.28);
  --agent-sage: #787745;
  --agent-sage-bg: rgb(120 119 69 / 0.08);
  --agent-sage-bd: rgb(120 119 69 / 0.28);
  --agent-archy: #7b5ee0;
  --agent-archy-bg: rgb(123 94 224 / 0.08);
  --agent-archy-bd: rgb(123 94 224 / 0.28);
  --agent-echo: #796f8e;
  --agent-echo-bg: rgb(121 111 142 / 0.08);
  --agent-echo-bd: rgb(121 111 142 / 0.28);
  --agent-orchestra: #ac39e5;
  --agent-orchestra-bg: rgb(172 57 229 / 0.08);
  --agent-orchestra-bd: rgb(172 57 229 / 0.28);
  --agent-pixel: #c62fbc;
  --agent-pixel-bg: rgb(198 47 188 / 0.08);
  --agent-pixel-bd: rgb(198 47 188 / 0.28);
}

html, body { font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
body, .light body, body.light { background-image: none !important; background-color: var(--bg-canvas); }
code, pre, kbd, .font-mono, .badge-mono, .kbd-mono { font-family: 'Geist Mono', ui-monospace, monospace !important; }
.markdown-content code { font-family: 'Geist Mono', ui-monospace, monospace; }

/* leggibilità: alza i testi minuscoli su desktop mantenendo proporzioni su mobile */
@media (min-width: 640px) {
  .text-\[9px\] { font-size: 11px !important; }
  .text-\[10px\] { font-size: 11.5px !important; }
  .text-\[11px\] { font-size: 12px !important; }
}
@media (max-width: 639px) {
  .text-\[9px\] { font-size: 9.5px !important; }
  .text-\[10px\] { font-size: 10.5px !important; }
  .text-\[11px\] { font-size: 11px !important; }
}
.kbd-mono { font-size: 10px; }
.badge-mono { font-size: 10.5px; font-weight: 500; }

/* superfici e pulsanti più asciutti */
.mono-card { box-shadow: none; }
.mono-card:hover { box-shadow: none; }
.mono-btn-primary { font-weight: 500; box-shadow: none; }
.mono-btn-primary:hover { opacity: 1; filter: brightness(1.08); box-shadow: none; }
.light .mono-btn-primary:hover { filter: brightness(1.35); }
:focus-visible { outline: 2px solid var(--text-main); outline-offset: 2px; }
::selection { background: rgb(var(--g-700)); }

/* badge agente */
.agent-badge { display:inline-flex; align-items:center; justify-content:center; border-radius:7px; border:1px solid; font-family:'Geist Mono',ui-monospace,monospace; font-weight:600; }
.dark .agent-glow, :root:not(.light) .agent-glow { box-shadow: 0 0 8px -4px currentColor; }

/* header: tab senza bordi, stile Vercel */
.tm-tab { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px; border-radius:6px; font-size:13px; color:var(--text-muted); background:transparent; border:1px solid transparent; transition:color .15s, background-color .15s, border-color .15s; white-space:nowrap; }
.tm-tab:hover { color:var(--text-main); background:var(--bg-card-hover); }
.tm-tab-on { color:var(--text-main); background:var(--bg-card-hover); }
.tm-tab-warn { color:var(--status-warn); }
.tm-tab-bordered { border-color:var(--btn-sec-border); }
.tm-tab-bordered:hover { border-color:var(--border-strong); background:transparent; }
.tm-tab-icon { width:32px; padding:0; justify-content:center; border-color:var(--btn-sec-border); }
.tm-seg-on { background:var(--bg-card-hover); color:var(--text-main); }

/* composer */
.tm-composer { background: var(--bg-surface); border-color: var(--btn-sec-border); }
.tm-composer:focus-within { border-color: var(--border-strong); }

/* vista codice */
.tm-primary { background: var(--btn-primary-bg) !important; color: var(--btn-primary-text) !important; }
.tm-statusbar { background: var(--bg-canvas); color: var(--text-muted); border-top: 1px solid var(--border-subtle); font-family: 'Geist Mono', ui-monospace, monospace; }
.tm-agent-code { color: var(--agent-code); background: var(--agent-code-bg); border: 1px solid var(--agent-code-bd); }
.tm-agent-code:hover { filter: brightness(1.15); }

/* logo con occhi (il movimento è nel componente; qui solo colori e piccoli effetti) */
.tm-logo { overflow: visible; cursor: default; }
.tm-logo-body { transition: fill .35s ease; }
.tm-logo-glint { transition: opacity .15s ease; }
.tm-logo--working .tm-logo-sheen { animation: tm-sheen 1.4s ease-in-out infinite; }
.tm-logo--error { animation: tm-shake .45s ease-in-out 1; }
@keyframes tm-sheen { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes tm-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-2px); } 40% { transform: translateX(2px); } 60% { transform: translateX(-1.5px); } 80% { transform: translateX(1px); } }
@media (prefers-reduced-motion: reduce) { .tm-logo, .tm-logo * { animation: none !important; transition: none !important; } }

/* sessione zen */
.tm-zen { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg-canvas) 94%, transparent); backdrop-filter: blur(14px); opacity: 0; transition: opacity .6s ease; cursor: pointer; }
.tm-zen--in { opacity: 1; }
.tm-zen-center { display: flex; flex-direction: column; align-items: center; gap: 22px; cursor: default; }
.tm-zen-mascot { animation-fill-mode: forwards; animation-timing-function: ease-in-out; filter: drop-shadow(0 0 40px color-mix(in srgb, var(--text-main) 12%, transparent)); }
.tm-zen-inspira { animation-name: tm-zen-in; }
.tm-zen-trattieni { transform: scale(1.12); }
.tm-zen-espira { animation-name: tm-zen-out; }
@keyframes tm-zen-in { from { transform: scale(.9); } to { transform: scale(1.12); } }
@keyframes tm-zen-out { from { transform: scale(1.12); } to { transform: scale(.9); } }
.tm-zen-phase { font-size: 28px; font-weight: 500; letter-spacing: -0.5px; color: var(--text-main); }
.tm-zen-time { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: var(--text-faint); }
.tm-zen-mute { margin-top: 8px; height: 36px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--btn-sec-border); background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; }
.tm-zen-mute:hover { color: var(--text-main); border-color: var(--border-strong); }
.tm-zen-hint { position: absolute; bottom: 32px; font-size: 13px; color: var(--text-faint); }
@media (prefers-reduced-motion: reduce) { .tm-zen-mascot { animation: none !important; transform: none !important; } }
.tm-zen-name { font-family: "Geist Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); margin-bottom: -12px; }

/* paesaggio zen ---------------------------------------------------------- */
.tm-zen { background: #05060a; backdrop-filter: none; }
.light .tm-zen { background: #efe9e2; }
.tm-zen-center { position: relative; z-index: 2; }
.tm-zen-hint { z-index: 2; }
.tm-land { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.tm-land > * { position: absolute; inset: 0; }
.tm-land-sky { background: linear-gradient(180deg, #04050a 0%, #0b0e1a 45%, #1a1d2e 70%, #262536 100%); transition: filter 4s ease-in-out; }
.light .tm-land-sky { background: linear-gradient(180deg, #dfe6f0 0%, #ece6ef 45%, #f6e3d6 72%, #f3d9c9 100%); }
.tm-land--in .tm-land-sky { filter: brightness(1.18); }
.tm-land--out .tm-land-sky { filter: brightness(.92); transition-duration: 6s; }

.tm-land-stars span { position: absolute; border-radius: 50%; background: #fff; opacity: .2; animation: tm-twinkle ease-in-out infinite; }
.light .tm-land-stars { display: none; }
@keyframes tm-twinkle { 0%,100% { opacity: .15; } 50% { opacity: .9; } }

.tm-land-orb { inset: auto; top: 13%; right: 18%; width: 92px; height: 92px; border-radius: 50%; background: radial-gradient(circle at 38% 38%, #f6f4ee, #d9d6cc 60%, #b9b5aa); box-shadow: 0 0 60px 18px rgba(240,236,224,.18), 0 0 160px 60px rgba(200,200,230,.08); animation: tm-bob 18s ease-in-out infinite; }
.light .tm-land-orb { background: radial-gradient(circle, #fff7e8, #ffd9a8 55%, #ffbf86); box-shadow: 0 0 80px 30px rgba(255,200,140,.45), 0 0 200px 90px rgba(255,210,170,.3); top: 34%; }
@keyframes tm-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.tm-land-clouds span { position: absolute; left: -30%; width: 420px; height: 70px; border-radius: 50%; background: rgba(255,255,255,.05); filter: blur(18px); animation: tm-drift linear infinite; }
.light .tm-land-clouds span { background: rgba(255,255,255,.75); }
@keyframes tm-drift { from { translate: 0 0; } to { translate: 160vw 0; } }

.tm-land-hills { top: auto; height: 62%; bottom: 20%; }
.tm-land-layer { position: absolute; inset: 0; width: 200%; display: flex; animation: tm-scroll linear infinite; }
.tm-land-layer svg { width: 50%; height: 100%; display: block; }
@keyframes tm-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.tm-land-l1 path { fill: #1d2030; } .tm-land-l2 path { fill: #151826; } .tm-land-l3 path { fill: #0e101b; } .tm-land-l4 path { fill: #080a12; }
.light .tm-land-l1 path { fill: #cfc7d6; } .light .tm-land-l2 path { fill: #b7aec4; } .light .tm-land-l3 path { fill: #9a90ab; } .light .tm-land-l4 path { fill: #7b7290; }

.tm-land-lake { top: auto; height: 20.5%; bottom: 0; background: linear-gradient(180deg, #0c0e18, #05060b); overflow: hidden; }
.light .tm-land-lake { background: linear-gradient(180deg, #a69db6, #cfc4cf); }
.tm-land-glow { position: absolute; top: 0; bottom: 0; right: calc(18% - 30px); width: 152px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); mask-image: linear-gradient(90deg, transparent, #000 35%, #000 65%, transparent); background: linear-gradient(180deg, rgba(240,236,224,.22), transparent 80%); filter: blur(10px); animation: tm-shimmer 5s ease-in-out infinite; }
.light .tm-land-glow { background: linear-gradient(180deg, rgba(255,214,170,.6), transparent 80%); }
.tm-land-lake span { position: absolute; height: 1px; background: rgba(255,255,255,.14); border-radius: 1px; animation: tm-shimmer 4s ease-in-out infinite; }
.light .tm-land-lake span { background: rgba(255,255,255,.6); }
@keyframes tm-shimmer { 0%,100% { opacity: .3; transform: translateX(0) scaleX(1); } 50% { opacity: 1; transform: translateX(14px) scaleX(1.3); } }

.tm-land-flies span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #f2f08c; box-shadow: 0 0 8px 2px rgba(242,240,140,.6); opacity: 0; animation: tm-fly ease-in-out infinite; }
.light .tm-land-flies { display: none; }
@keyframes tm-fly { 0% { opacity: 0; transform: translate(0,0); } 25% { opacity: .9; } 50% { transform: translate(24px,-18px); opacity: .5; } 75% { opacity: .9; } 100% { opacity: 0; transform: translate(-10px,-34px); } }

.tm-land-vignette { background: radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0,0,0,.55)); pointer-events: none; }
.light .tm-land-vignette { background: radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(80,60,90,.18)); }

/* testo e mascotte leggibili sopra il paesaggio */
.tm-zen .tm-zen-phase { color: #f2f0ea; text-shadow: 0 2px 20px rgba(0,0,0,.5); }
.light .tm-zen .tm-zen-phase { color: #2a2433; text-shadow: none; }
.tm-zen .tm-zen-time, .tm-zen .tm-zen-name, .tm-zen .tm-zen-hint { color: rgba(242,240,234,.6); }
.light .tm-zen .tm-zen-time, .light .tm-zen .tm-zen-name, .light .tm-zen .tm-zen-hint { color: rgba(42,36,51,.6); }
.tm-zen .tm-zen-mute { color: rgba(242,240,234,.8); border-color: rgba(242,240,234,.25); background: rgba(0,0,0,.2); backdrop-filter: blur(6px); }
.light .tm-zen .tm-zen-mute { color: #2a2433; border-color: rgba(42,36,51,.2); background: rgba(255,255,255,.35); }
@media (prefers-reduced-motion: reduce) { .tm-land *, .tm-land { animation: none !important; } }

/* barra laterale --------------------------------------------------------- */
.tm-side { position: relative; width: 244px; flex: 0 0 244px; flex-direction: column; gap: 18px; padding: 12px 10px; border-right: 1px solid var(--border-subtle); background: var(--bg-canvas); overflow-y: auto; }
.tm-side-project { flex: 1; min-width: 0; height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 10px; border: 1px solid var(--btn-sec-border); border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-main); background: transparent; }
.tm-side-project:hover { border-color: var(--border-strong); }
.tm-side-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 34px; padding: 0 10px; border-radius: 6px; font-size: 14px; color: var(--text-muted); text-align: left; transition: background-color .12s, color .12s; }
.tm-side-item:hover { background: var(--bg-card-hover); color: var(--text-main); }
.tm-side-item--on { background: var(--bg-card-hover); color: var(--text-main); }
.tm-side-icon { width: 16px; display: inline-flex; justify-content: center; flex-shrink: 0; }
.tm-side-label { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); padding: 0 10px 6px; }
.tm-side-link { display: inline-flex; align-items: center; gap: 4px; color: var(--text-faint); text-transform: none; }
.tm-side-link:hover { color: var(--text-main); }
.tm-side-dot { width: 8px; height: 8px; border-radius: 2px; margin: 0 4px; flex-shrink: 0; }
.tm-side-count { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; color: var(--text-faint); }
.tm-side-count--warn { color: var(--status-warn); }
.tm-side-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--border-subtle); border-radius: 10px; text-align: left; }
.tm-side-card:hover { border-color: var(--border-strong); }
.tm-side-bar { height: 4px; border-radius: 2px; background: var(--bg-card-hover); overflow: hidden; }
.tm-side-bar > div { height: 4px; border-radius: 2px; }
.tm-resize { position: absolute; top: 0; bottom: 0; width: 6px; cursor: col-resize; z-index: 10; touch-action: none; outline: none; }
.tm-resize--end { right: 0; }
.tm-resize--start { left: 0; }
.tm-resize::after { content: ''; position: absolute; top: 0; bottom: 0; width: 2px; background: transparent; transition: background-color .15s; }
.tm-resize--end::after { right: 0; }
.tm-resize--start::after { left: 0; }
.tm-resize:hover::after, .tm-resize:focus-visible::after, .tm-resize--active::after { background: var(--border-strong); }

/* colori di stato per Tailwind (emerald/green, amber/yellow/orange, red) */
:root, .dark {
  --ok-hi: 126 226 168; --ok-mid: 69 212 131; --ok-lo: 31 157 87;
  --warn-hi: 252 210 122; --warn-mid: 245 166 35; --warn-lo: 183 121 31;
  --err-hi: 252 165 165; --err-mid: 248 113 113; --err-lo: 220 38 38;
}
.light {
  --ok-hi: 21 128 61; --ok-mid: 21 128 61; --ok-lo: 187 247 208;
  --warn-hi: 180 83 9; --warn-mid: 180 83 9; --warn-lo: 253 230 138;
  --err-hi: 185 28 28; --err-mid: 220 38 38; --err-lo: 254 202 202;
}

/* fumetto di Ugo */
.tm-ugo-bubble { position: relative; font-size: 14px; color: var(--text-secondary); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 8px 14px; }
.tm-ugo-bubble::before { content: ''; position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; background: var(--bg-surface); border-left: 1px solid var(--border-subtle); border-top: 1px solid var(--border-subtle); transform: translateX(-50%) rotate(45deg); }
.tm-zen-controls { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 4px; }
.tm-zen-group { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: rgba(0,0,0,.22); border: 1px solid rgba(242,240,234,.14); backdrop-filter: blur(6px); }
.light .tm-zen-group { background: rgba(255,255,255,.35); border-color: rgba(42,36,51,.14); }
.tm-zen-chip { height: 30px; padding: 0 12px; border-radius: 7px; font: inherit; font-size: 13px; color: rgba(242,240,234,.7); background: transparent; border: 0; cursor: pointer; }
.tm-zen-chip:hover { color: #f2f0ea; }
.tm-zen-chip--on { background: rgba(242,240,234,.16); color: #f2f0ea; }
.light .tm-zen-chip { color: rgba(42,36,51,.7); } .light .tm-zen-chip:hover, .light .tm-zen-chip--on { color: #2a2433; }
.light .tm-zen-chip--on { background: rgba(255,255,255,.7); }

/* scene zen: mare, bosco, neve -------------------------------------------- */
.tm-scene-sea .tm-land-hills { bottom: 42%; height: 40%; }
.tm-scene-sea .tm-land-lake { height: 42.5%; }
.tm-scene-sea .tm-land-sky { background: linear-gradient(180deg, #070914 0%, #1a1630 40%, #4a2a45 70%, #8a4a4a 100%); }
.light .tm-scene-sea .tm-land-sky { background: linear-gradient(180deg, #cfdcef 0%, #f1dfe3 45%, #ffd2b0 75%, #ffb88a 100%); }
.tm-scene-sea .tm-land-orb { top: 44%; right: 16%; width: 120px; height: 120px; background: radial-gradient(circle, #ffd7a8, #ff9f6b 60%, #e86f5a); box-shadow: 0 0 90px 30px rgba(255,150,100,.35); }
.tm-scene-sea .tm-land-l1 path { fill: #2a2140; } .tm-scene-sea .tm-land-l2 path { fill: #1d1830; }
.light .tm-scene-sea .tm-land-l1 path { fill: #c9a9b8; } .light .tm-scene-sea .tm-land-l2 path { fill: #b08ea4; }
.tm-scene-sea .tm-land-lake { background: linear-gradient(180deg, #3a2438, #0d0d1a 70%); }
.light .tm-scene-sea .tm-land-lake { background: linear-gradient(180deg, #e8b3a0, #9fb3cf 70%); }
.tm-scene-sea .tm-land-glow { right: calc(16% - 16px); width: 152px; background: linear-gradient(180deg, rgba(255,170,120,.45), transparent 85%); }
.tm-scene-sea .tm-land-lake span { background: rgba(255,200,170,.28); animation-name: tm-wave; animation-duration: 6s; }
@keyframes tm-wave { 0%,100% { opacity: .25; transform: translateX(-20px) scaleX(.8); } 50% { opacity: 1; transform: translateX(20px) scaleX(1.2); } }

.tm-scene-forest .tm-land-sky { background: linear-gradient(180deg, #050a09 0%, #0b1714 45%, #15241f 75%, #1d2e28 100%); }
.light .tm-scene-forest .tm-land-sky { background: linear-gradient(180deg, #dbe7e1 0%, #e9efe6 50%, #f3eedd 100%); }
.tm-scene-forest .tm-land-orb { width: 64px; height: 64px; top: 12%; }
.tm-scene-forest .tm-land-l1 path { fill: #1c2e28; } .tm-scene-forest .tm-land-l2 path { fill: #14231e; } .tm-scene-forest .tm-land-l3 path { fill: #0d1814; } .tm-scene-forest .tm-land-l4 path { fill: #070e0b; }
.light .tm-scene-forest .tm-land-l1 path { fill: #b9cbbf; } .light .tm-scene-forest .tm-land-l2 path { fill: #94af9f; } .light .tm-scene-forest .tm-land-l3 path { fill: #6f907d; } .light .tm-scene-forest .tm-land-l4 path { fill: #4d6e5b; }
.tm-scene-forest .tm-land-lake { background: linear-gradient(180deg, #08120f, #030605); }
.light .tm-scene-forest .tm-land-lake { background: linear-gradient(180deg, #6f907d, #a9bdb0); }
.tm-land-mist { top: auto; bottom: 18%; height: 30%; background: linear-gradient(180deg, transparent, rgba(200,220,210,.10) 60%, transparent); animation: tm-mist 24s ease-in-out infinite; }
.light .tm-land-mist { background: linear-gradient(180deg, transparent, rgba(255,255,255,.55) 60%, transparent); }
@keyframes tm-mist { 0%,100% { transform: translateX(-3%); opacity: .7; } 50% { transform: translateX(3%); opacity: 1; } }

.tm-scene-snow .tm-land-sky { background: linear-gradient(180deg, #0a0f1a 0%, #18233a 50%, #2a3650 100%); }
.light .tm-scene-snow .tm-land-sky { background: linear-gradient(180deg, #d6e4f2 0%, #e8eff7 55%, #f4f7fb 100%); }
.tm-scene-snow .tm-land-l1 path { fill: #c9d3e3; } .tm-scene-snow .tm-land-l2 path { fill: #9aa8bf; } .tm-scene-snow .tm-land-l3 path { fill: #6b7a94; } .tm-scene-snow .tm-land-l4 path { fill: #3f4a5e; }
.light .tm-scene-snow .tm-land-l1 path { fill: #ffffff; } .light .tm-scene-snow .tm-land-l2 path { fill: #e3eaf3; } .light .tm-scene-snow .tm-land-l3 path { fill: #c3cfdf; } .light .tm-scene-snow .tm-land-l4 path { fill: #9fb0c6; }
.tm-scene-snow .tm-land-lake { background: linear-gradient(180deg, #3f4a5e, #1c2333); }
.light .tm-scene-snow .tm-land-lake { background: linear-gradient(180deg, #b7c6d9, #e6edf5); }
.tm-scene-snow .tm-land-orb { width: 70px; height: 70px; opacity: .8; }
.tm-land-snow span { position: absolute; top: -10px; border-radius: 50%; background: #fff; opacity: .85; animation: tm-snow linear infinite; }
.light .tm-land-snow span { background: #fff; box-shadow: 0 0 2px rgba(90,110,140,.5); }
@keyframes tm-snow { 0% { transform: translate(0, 0); } 50% { transform: translate(var(--sway), 55vh); } 100% { transform: translate(0, 110vh); } }

/* alone dietro il testo zen, per leggerlo su qualsiasi paesaggio */
.tm-zen-center::before { content: ''; position: absolute; left: 50%; top: 55%; width: 560px; height: 520px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(5,6,12,.55), rgba(5,6,12,.25) 60%, transparent); z-index: -1; pointer-events: none; }
.light .tm-zen-center::before { background: radial-gradient(closest-side, rgba(255,255,255,.7), rgba(255,255,255,.3) 60%, transparent); }

/* fumetto di Ugo nell'app */
.tm-ugo-say { position: absolute; z-index: 60; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); width: max-content; max-width: 260px; padding: 9px 12px; border-radius: 10px; background: var(--bg-card); border: 1px solid var(--border-strong); color: var(--text-main); font-size: 13px; line-height: 1.4; box-shadow: 0 8px 30px rgba(0,0,0,.25); cursor: pointer; animation: tm-say-in .35s cubic-bezier(.3,1.4,.5,1); }
.tm-ugo-say::before { content: ''; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; background: var(--bg-card); border-left: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); transform: translateY(-50%) rotate(45deg); }
.tm-ugo-say-name { display: block; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 2px; }
@keyframes tm-say-in { from { opacity: 0; transform: translate(-6px, -50%) scale(.96); } to { opacity: 1; transform: translate(0, -50%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .tm-ugo-say { animation: none; } }
.tm-ugo-say--below { left: 0; top: calc(100% + 10px); transform: none; max-width: 220px; animation-name: tm-say-down; }
.tm-ugo-say--below::before { left: 12px; top: -6px; transform: rotate(135deg); }
@keyframes tm-say-down { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }