/* ==========================================================================
   nasqo (js/views/timmo.js): Figur mit Zuständen, Einstieg, Vollbild-Chat
   Figur aus dem Logo: Fläche --ink, Gesicht --card, Punkt --accent (in Hell und Dunkel stimmig wie das Logo).
   Bewegung nur ohne prefers-reduced-motion und mit eingeschalteten Animationen (html.anim-aus schaltet ab).
   ========================================================================== */
.timmo-fig { display: inline-block; flex: none; position: relative; }
.tf-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.tf-flaeche { fill: var(--timmo-koerper); stroke: var(--timmo-kontur); stroke-width: 1.5; }
.timmo-fig .tf-svg { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .10)); }
.tf-glanz { fill: none; stroke: var(--timmo-glanz); stroke-width: 1.2; }
.tf-auge { fill: var(--timmo-auge); transform-box: fill-box; transform-origin: center; }
.tf-froh { fill: none; stroke: var(--timmo-auge); stroke-width: 4.5; stroke-linecap: round; opacity: 0; }
.tf-mund { fill: none; stroke: var(--timmo-auge); stroke-width: 4.5; stroke-linecap: round; }
.tf-mund-offen { fill: var(--timmo-auge); opacity: 0; transform-box: fill-box; transform-origin: center; }
.tf-dot { fill: var(--accent); }
.tf-welle { fill: none; stroke: var(--accent); stroke-width: 2.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.tf-denken circle { fill: var(--accent); opacity: 0; }
.tf-koerper, .tf-gesicht { transform-box: fill-box; transform-origin: center; }

/* Zustände (ohne Bewegung: nur die Form) */
.timmo-fig[data-zustand="freudig"] .tf-auge { opacity: 0; }
.timmo-fig[data-zustand="freudig"] .tf-froh { opacity: 1; }
.timmo-fig[data-zustand="zuhoeren"] .tf-welle { opacity: .5; }
.timmo-fig[data-zustand="nachdenken"] .tf-gesicht { transform: translate(3px, -3px); }
.timmo-fig[data-zustand="nachdenken"] .tf-denken circle { opacity: .9; }
.timmo-fig[data-zustand="antworten"] .tf-mund { opacity: 0; }
.timmo-fig[data-zustand="antworten"] .tf-mund-offen { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  html:not(.anim-aus) .timmo-fig[data-zustand="ruhend"] .tf-koerper { animation: tf-atmen 4.5s ease-in-out infinite; }
  html:not(.anim-aus) .timmo-fig .tf-auge { animation: tf-blinzeln 5s ease-in-out infinite; }
  html:not(.anim-aus) .timmo-fig[data-zustand="zuhoeren"] .tf-welle { animation: tf-welle 1.4s ease-out infinite; }
  html:not(.anim-aus) .timmo-fig[data-zustand="zuhoeren"] .tf-koerper { animation: tf-neigen 2.4s ease-in-out infinite; }
  html:not(.anim-aus) .timmo-fig[data-zustand="nachdenken"] .tf-denken circle { animation: tf-punkte 1.2s ease-in-out infinite; }
  html:not(.anim-aus) .timmo-fig[data-zustand="nachdenken"] .tf-denken circle:nth-child(2) { animation-delay: var(--dauer-2); }
  html:not(.anim-aus) .timmo-fig[data-zustand="nachdenken"] .tf-denken circle:nth-child(3) { animation-delay: .4s; }
  html:not(.anim-aus) .timmo-fig[data-zustand="antworten"] .tf-mund-offen { animation: tf-sprechen var(--dauer-3) ease-in-out infinite alternate; }
  html:not(.anim-aus) .timmo-fig[data-zustand="freudig"] .tf-koerper { animation: tf-huepfen .7s var(--ease-feder) 2; }
  .timmo-fig .tf-gesicht { transition: transform var(--dauer-3) ease; }
  .timmo-fig .tf-auge, .timmo-fig .tf-froh, .timmo-fig .tf-mund, .timmo-fig .tf-mund-offen, .timmo-fig .tf-welle, .timmo-fig .tf-denken circle { transition: opacity var(--dauer-2) ease; }
}
@keyframes tf-atmen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes tf-blinzeln { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@keyframes tf-welle { from { transform: scale(1); opacity: .6; } to { transform: scale(2.2); opacity: 0; } }
@keyframes tf-neigen { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes tf-punkte { 0%, 100% { opacity: .2; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }
@keyframes tf-sprechen { from { transform: scaleY(.45); } to { transform: scaleY(1.05); } }
@keyframes tf-huepfen { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-10%) scale(1.04, .97); } }

/* ---------------- Eingabezeile ---------------- */
.timmo-zeile { display: flex; align-items: flex-end; gap: 4px; padding: 6px; border: 1px solid var(--line-2); border-radius: var(--r-gross); background: var(--card); box-shadow: var(--shadow); }
.timmo-zeile:focus-within { border-color: transparent; box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .75), 0 0 0 4px rgba(var(--accent-rgb), .14); }
.tz-feld { flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; font: inherit; font-size: 15px; line-height: 22px; color: var(--ink); padding: 9px 6px; outline: none; resize: none; display: block; overflow: hidden; }
.tz-knopf, .tz-senden { width: 40px; height: 40px; flex: none; border: 0; border-radius: var(--r-rund); display: grid; place-items: center; cursor: pointer; font: inherit; }
.tz-knopf { background: transparent; color: var(--ink-2); }
.tz-knopf:hover { background: var(--inset); color: var(--ink); }
.tz-knopf.an { background: var(--accent-soft); color: var(--accent-text); }
.tz-senden { background: var(--accent); color: var(--on-accent); }
.tz-senden:hover { background: var(--b-primary-hover); }
.tz-knopf:focus-visible, .tz-senden:focus-visible { outline: none; box-shadow: var(--ring); }
@media (max-width: 640px) { .tz-knopf, .tz-senden { width: 44px; height: 44px; } }

/* ---------------- Kompakter Einstieg ---------------- */
.timmo-kompakt { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.tk-kopf { display: flex; align-items: center; gap: 12px; }
.tk-kopf .h3, .tk-kopf .sub { margin: 0; }
.ma .timmo-kompakt { box-shadow: none; border: 0; padding: 4px 0 0; margin: 0; background: transparent; }

/* ---------------- Vollbild im Inhaltsbereich ---------------- */
html.timmo-offen .content { padding-bottom: 12px; }
.timmo-voll { display: flex; flex-direction: column; height: calc(min(100dvh, var(--vv-h, 100dvh)) - var(--kopf-unten, 72px) - var(--reiter-hoehe, 0px) - 20px); min-height: 360px; border-radius: var(--r-gross); background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.tv-kopf { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); flex: none; }
.tv-titel { display: flex; flex-direction: column; min-width: 0; }
.tv-titel .label { font-size: 12px; }
.tv-kopf .btn[aria-pressed="true"] { color: var(--accent-text); background: var(--accent-soft); }
.tv-verlauf { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 20px max(16px, calc((100% - 760px) / 2)); display: flex; flex-direction: column; gap: 10px; }
.tv-fuss { flex: none; padding: 10px max(12px, calc((100% - 780px) / 2)) 14px; border-top: 1px solid var(--line); background: var(--card); }
.tv-start { margin: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; max-width: 440px; padding: 20px 0; }
.tv-start .h2 { margin: 8px 0 0; }
.tv-start .prose { margin: 0; color: var(--ink-2); }
.tv-msg { max-width: min(620px, 86%); padding: 10px 14px; font-size: 15px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tv-msg p { margin: 0; }
.tv-msg.timmo { align-self: flex-start; background: var(--inset); border-radius: var(--r-gross) var(--r-gross) var(--r-gross) var(--r-klein); }
.tv-msg.ich { align-self: flex-end; background: var(--ink); color: var(--page); border-radius: var(--r-gross) var(--r-gross) var(--r-klein) var(--r-gross); }
.tv-msg.neu { animation: timmo-blase var(--dauer-3) ease both; }
.tv-denkt { flex-direction: row; gap: 5px; padding: 14px 16px; }
.tv-denkt span { width: 7px; height: 7px; border-radius: var(--r-rund); background: var(--ink-3); animation: tf-punkte 1.1s ease-in-out infinite; }
.tv-denkt span:nth-child(2) { animation-delay: var(--dauer-1); } .tv-denkt span:nth-child(3) { animation-delay: var(--dauer-3); }
.tv-datei { display: flex; flex-direction: column; gap: 6px; }
.tv-datei img { max-width: 220px; max-height: 220px; border-radius: var(--r-mittel); display: block; }
.tv-pdf { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--r-mittel); background: rgba(255, 255, 255, .16); font-weight: 600; }
.tv-datei-name { font-size: 12.5px; opacity: .85; overflow-wrap: anywhere; }
.tv-msg .timmo-link { margin-top: 2px; }
@media (max-width: 640px) {
  .timmo-voll { height: calc(min(100dvh, var(--vv-h, 100dvh)) - var(--kopf-unten, 64px) - var(--reiter-hoehe, 0px) - 8px); border-radius: var(--r-gross) var(--r-gross) 0 0; margin: 0 calc(-1 * var(--rand, 16px)); min-height: 300px; }
  html.timmo-offen .content { padding-bottom: 0; }
  .tv-verlauf { padding: 14px 12px; }
  .tv-fuss { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .tv-msg { max-width: 92%; }
}
::view-transition-group(timmo-zeile) { animation-duration: var(--dauer-3); animation-timing-function: var(--ease-out); }
.tz-feld:focus, .tz-feld:focus-visible { outline: none; box-shadow: none; border: 0; background: transparent; }
/* Chats | Hinweise im Kopf, Liste der Gespräche */
.tv-liste { display: block; }
.tv-liste-kopf { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; }
.tv-liste-kopf .h3 { margin: 0; }
.tv-liste-leer { color: var(--ink-2); margin: 12px 0; }
.tv-chat { color: var(--ink); text-decoration: none; }
.tv-chat.aktiv b { color: var(--accent-text); }
@media (max-width: 640px) {
  .tv-kopf .tv-titel .label { display: none; }
  .tv-kopf { gap: 6px; padding: 10px; }
}
@media (max-width: 640px) { .tv-liste-kopf .h3 { flex: 1 1 100%; } }