/* Styles des Chats und der Einstellungen aus der Bibliothek. Die Anwendung bindet sie nach den Styles der Komponentenbibliothek ein
   (App.razor: _content/Onesown.AiHarness/aiharness.css). Anordnung übernehmen die Komponenten der Komponentenbibliothek, Farben, Abstände und
   Schriftgrößen ihre Design Tokens (--oo-*); hier steht nur, was sie nicht liefert.
   Aufbau: Logo · Neuer Chat · Laufender Chat · Eingabefeld · Nachrichten · Quellen-Chips · Bewegung · Einstellungen · Schmale Ansicht · Touch */

/* ── Logo (AppLogo): die Marke von onesown.at, nicht Teil der Design Tokens. Eine Anwendung mit anderer Marke überschreibt .app-logo in ihrer app.css.
   Alle Maße hängen an der Schriftgröße; eine andere Größe braucht nur ein anderes font-size. ── */

.app-logo {
    display: inline-grid;
    place-items: center;
    width: 1.54em;
    height: 1.54em;
    padding-bottom: 0.12em;
    border-radius: 0.35em;
    background: #ffcd0a;
    color: #3c3c3c;
    font-size: 1.625rem;
    font-weight: 300;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

/* ── Home ohne Verlauf (Screen 01): Begrüßung und Eingabefeld etwas über der Mitte ── */

/* So hoch wie der sichtbare Inhalt; am Handy, wo die Seite scrollt, die Fensterhöhe unter der Kopfzeile (SidebarLayout).
   Die Breite des Inhalts begrenzt sein Stack (MaxWidth). */
.neuer-chat {
    min-height: var(--oo-sbl-content-height);
    padding: 0 var(--oo-space-gutter) 7.5rem;
}

.neuer-chat__gruss {
    font-size: 2.75rem;
    font-weight: 400;
}

/* ── Home mit Verlauf (Screen 02): Verlauf in lesbarer Breite (Stack MaxWidth), Eingabefeld unten angeheftet ── */

.chat {
    min-height: 100%;
}

/* So breit wie der Verlauf. Der Verlauf läuft unter dem Eingabefeld weich aus. z-index, damit Eingabefeld und seine Menüs über den
   Kopierknöpfen der Codeblöcke liegen, die die Bibliothek mit z-index 1 hervorhebt. */
.chat__eingabe {
    width: min(48rem, 100%);
    margin: 0 auto;
    padding: var(--oo-space-6) var(--oo-space-gutter) var(--oo-space-3);
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: linear-gradient(to bottom, transparent, var(--oo-color-surface) var(--oo-space-6));
}

/* Springen im Verlauf: kleine runde Knöpfe in der Mitte. Zum Anfang klebt oben am Rand des Verlaufs,
   zum Ende sitzt über dem Eingabefeld. Sichtbar nur, solange der Verlauf nicht schon ganz oben bzw. ganz unten
   steht; data-sichtbar setzt app.js. Die Hüllen lassen Klicks durch, damit sie den Text darunter nicht verdecken. */
.verlauf-springen {
    z-index: 1;
    pointer-events: none;
}

/* Ohne eigene Höhe, damit der Verlauf nicht nach unten rückt; der Knopf ragt mit Abstand zum Rand heraus. */
.verlauf-springen--oben {
    position: sticky;
    top: var(--oo-sbl-header-offset);
    height: 0;
}

/* Im weichen Auslauf über dem Eingabefeld, mit demselben Abstand zur Karte wie der obere Knopf zum Rand:
   Die Hülle des Eingabefelds beginnt mit dem Auslauf (padding-top), die Karte darunter. */
.verlauf-springen--unten {
    position: absolute;
    inset: auto 0 calc(100% - var(--oo-space-3)) 0;
}

/* Quadratischer Knopf der Bibliothek (IconOnly, rund über Radius), 1,5 rem statt der 1,7 rem von Sm über das Token der Größe.
   Durchscheinend mit Weichzeichner statt fester Fläche, damit der Knopf über dem Text weich wirkt. */
.verlauf-springen {
    --oo-size-min-height-sm: 1.5rem;
}

.verlauf-springen .oo-btn {
    font-size: 0.75rem;
    background: color-mix(in srgb, var(--oo-color-surface) 60%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 12px rgb(0 0 0 / 0.12);
    opacity: 0;
    transition: opacity var(--oo-transition);
}

.verlauf-springen[data-sichtbar] .oo-btn {
    opacity: 1;
    pointer-events: auto;
}

/* ── Eingabefeld: Karte um Text und Werkzeugleiste ── */

/* Ringsum gleich viel Abstand, damit Senden rechts unten nicht am Rand klebt. */
.chat-eingabe {
    padding: var(--oo-space-2);
    background: var(--oo-color-surface);
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-radius-lg);
    box-shadow: 0 4px 16px rgb(0 0 0 / 0.05);
}

/* Mikrofon und Senden behalten ihre Breite; nachgeben darf nur die Modellauswahl, die ihren Text dann mit „…“ kürzt
   (SelectMenu der Bibliothek). Auf schmalen Handys (360–390 px) schob sie sonst Mikrofon und Senden aus der Karte. */
.chat-eingabe__knoepfe {
    flex-shrink: 0;
}

/* ── Nachrichten: Frage als Sprechblase rechts, Antwort in voller Breite ── */

/* Zeit und Aktionen erst beim Überfahren oder mit Tastaturfokus; bei der letzten Antwort immer. */
.nachricht__aktionen {
    opacity: 0;
    transition: opacity var(--oo-transition-fast);
}

.nachricht:hover .nachricht__aktionen,
.nachricht:focus-within .nachricht__aktionen,
.nachricht--letzte .nachricht__aktionen {
    opacity: 1;
}

/* Platz unter der letzten Antwort, damit die Frage darüber beim Senden an den oberen Rand scrollen kann. */
.nachricht--letzte {
    min-height: calc(100dvh - 20rem);
}

/* So groß wie der Abstand über dem Verlauf: Die erste Frage steht dann schon oben, und die Seite scrollt beim Öffnen
   eines Chats nicht um ein paar Pixel, die den Knopf „Zum Anfang“ einblenden würden. */
.frage {
    scroll-margin-top: calc(var(--oo-sbl-header-offset) + var(--oo-space-8));
}

/* Getönt wie die Seitenleiste, damit sich die Frage von der Fläche des Inhalts abhebt. */
.frage__blase {
    max-width: 85%;
    padding: var(--oo-space-3) var(--oo-space-4);
    border-radius: var(--oo-radius-xl);
    background: var(--oo-color-background);
    border: var(--oo-border-width) solid var(--oo-color-border);
    font-size: var(--oo-font-size-lg);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Aktionen der Antwort bündig mit dem Textrand: das Innenpolster der Ghost-Knöpfe nach außen ziehen. Reasoning und
   Tool-Aufrufe sind Disclosure der Bibliothek, deren Kopf schon bündig und gedämpft ist. */
.antwort > .nachricht__aktionen {
    margin-left: calc(-1 * var(--oo-size-padding-sm-x));
}

/* Reasoning der Antwort (MarkdownView, Größe Md): abgesetzt und gedämpft wie ein Zitat im Markdown. */
.antwort__reasoning {
    padding-left: var(--oo-space-4);
    border-left: 3px solid var(--oo-color-border-strong);
    color: var(--oo-color-text-subtle);
}

/* Widget unter dem Tool-Schritt (show_widget, Beispiel 125): volle Breite, feste Höhe, am unteren Rand in der Höhe ziehbar.
   Vergrößert liegen dieselben Elemente als Ebene über dem Fenster, der Rest abgedunkelt; nur die Klasse wechselt, das iframe bleibt geladen. */
.widget {
    overflow: hidden;
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-radius-lg);
    background: #ffffff;
}

.widget__kopf {
    border-bottom: var(--oo-border-width) solid var(--oo-color-border);
    background: var(--oo-color-surface);
}

.widget__rahmen {
    height: 440px;
    min-height: 140px;
    resize: vertical;
    overflow: hidden;
}

.widget__rahmen iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.widget--gross {
    position: fixed;
    inset: var(--oo-space-6);
    z-index: 100;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .55);
}

.widget--gross .widget__rahmen {
    flex: 1 1 0;
    min-height: 0;
    resize: none;
}

/* Anhang unter der Frage: ein Link wie die übrigen Zeilen, gedämpft, beim Überfahren unterstrichen. */
.frage__kontext a {
    color: inherit;
    text-decoration: none;
}

.frage__kontext a:hover {
    text-decoration: underline;
}

/* Mitlaufendes Logo am Ende des entstehenden Texts. */
.antwort__symbol {
    font-size: 1.125rem;
    animation: atmen 1.4s ease-in-out infinite;
}

/* ── Quellen-Chips aus dem eigenen Container ":::quellen" im Markdown der Antworten. Alles Übrige am Markdown gestaltet
   MarkdownView der Bibliothek. ── */

.oo-markdown .quellen p {
    display: flex;
    flex-wrap: wrap;
    gap: var(--oo-space-2);
    margin: 0;
}

.oo-markdown .quellen a {
    padding: var(--oo-space-1) var(--oo-space-3);
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-radius: var(--oo-radius-full);
    background: var(--oo-color-surface);
    font-size: var(--oo-font-size-sm);
    line-height: 1.4;
}

.oo-markdown .quellen a:hover {
    border-color: var(--oo-color-border-strong);
}

/* ── Bewegung: mitlaufendes Logo (den Statuspunkt bringt StatusDot, den Glanz über „Reasoning …“ ShimmerText der Bibliothek mit) ── */

@keyframes atmen {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50% { transform: scale(0.85) rotate(-8deg); opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
    .antwort__symbol {
        animation: none;
    }
}

/* ── Einstellungen: Seiten im Inhaltsbereich statt des Chats, in derselben lesbaren Breite ── */

.einstellungen {
    font-size: var(--oo-font-size-md);
}

.einstellungen__titel {
    margin: 0;
    font-size: var(--oo-font-size-xl);
    font-weight: 500;
}

/* Kopf einer Liste: Der Text nimmt den Platz, die Knöpfe rutschen am Handy darunter (EinstellungenKopf). */
.einstellungen__kopftext {
    flex: 1 1 18rem;
}

/* Überschrift einer Gruppe in einer Liste, etwa „Für alle“ und „Eigene“ bei Prompts und Skills. */
.einstellungen__gruppe {
    padding-left: var(--oo-space-1);
}

/* Beschreibung eines Tools zum Ankreuzen: eingerückt unter seinen Namen neben dem Haken. */
.einstellungen__tool-beschreibung {
    padding-left: 1.75rem;
}

/* Zurück zur Liste bündig mit dem Textrand, wie die Ghost-Knöpfe der Antwort. */
.einstellungen__zurueck {
    margin-left: calc(-1 * var(--oo-size-padding-sm-x));
    color: var(--oo-color-text-subtle);
}

/* Listen und Tool-Zeilen sind List und ListItem der Bibliothek (Rahmen, Trennlinien, Hover, Fokus), leere Listen EmptyState,
   Suche, Kennzeichen und Tool-Namen tragen Klassen der Bibliothek (Width--100, WhiteSpace--nowrap, AlignSelf--top). */

/* ── Schmale Ansicht: mehr Breite für den Text ── */

/* Kleinere Begrüßung, kein Hinweis unter dem Eingabefeld; die schmaleren Ränder bringt OoSpace.Gutter mit.
   Am Ende der Datei, damit diese Regeln die gleichrangigen Grundregeln der Bereiche überschreiben. */
@container (max-width: 48rem) {
    .neuer-chat__gruss {
        font-size: 2rem;
    }

    .chat-eingabe__hinweis {
        display: none;
    }
}

/* Niedriges Fenster, etwa ein Handy im Querformat: Der Abstand, der die Startseite über die Mitte hebt, und die große
   Begrüßung ließen die Begrüßung sonst oben am Rand kleben. */
@media (max-height: 30rem) {
    .neuer-chat {
        padding-bottom: var(--oo-space-6);
    }

    .neuer-chat__gruss {
        font-size: 2rem;
    }
}

/* Sehr niedrig, etwa im Querformat mit offener Tastatur: nur noch das Eingabefeld, ohne Hinweis, Auslauf und
   Knopf „Zum Ende“, sonst ragt es über das Fenster. */
@media (pointer: coarse) and (max-height: 12rem) {
    .chat__eingabe {
        padding-top: var(--oo-space-1);
        padding-bottom: var(--oo-space-1);
    }

    .chat-eingabe__hinweis,
    .chat__eingabe .verlauf-springen {
        display: none;
    }
}

/* ── Touch: Bedienung mit dem Finger statt mit der Maus ── */

/* Größere Knöpfe und Menüeinträge für den Finger, ohne Tastenkürzel in Menüs, und Tooltips am Fensterrand setzt die Bibliothek. */

/* Ohne Überfahren blieben Zeit und Aktionen der Nachrichten unerreichbar, daher immer sichtbar. */
@media (hover: none) {
    .nachricht__aktionen {
        opacity: 1;
    }
}