/* Billy on the support wiki. The chat itself is styled by /billy/billy.css (same .by-* classes);
   this file only changes the frame: a wider column than the portal's side panel, a quieter
   welcome, and the dark theme the wiki can ask for with ?theme=dark. */

/* The wiki embeds the page with a fixed height (75vh); fill it, never scroll the document itself. */
html, body { height: 100%; overflow: hidden; }

/* Die Breite gibt das Wiki vor: der Rahmen steht in dessen Inhaltsspalte, und die ist bereits
   auf eine lesbare Zeilenlänge begrenzt. Eine zweite Begrenzung hier liesse links und rechts
   Luft stehen, die der Leser als verschenkten Platz sieht (billy.css deckelt auf 760 px, das
   passt zum schmalen Seitenpanel im Portal, nicht hierher). */
.by-wiki { max-width: none; }

/* Der Rahmen nutzt die ganze Spalte, die Sprechblasen nicht: über die volle Breite liefe eine
   Zeile auf rund 145 Zeichen, gut das Doppelte dessen, was sich angenehm liest. 80ch meint die
   Breite von 80 Nullen – deutscher Fliesstext ist schmaler, es sind also eher 90 Zeichen. In
   einer schmalen Spalte greift weiterhin der Prozentwert, nicht der Deckel. */
.by-wiki .by-msg { max-width: min(96%, 80ch); }
.by-wiki .by-msg--bot { max-width: min(calc(96% - 34px), 80ch); }

/* Tabellen und der Hinweis «im Wiki nachgeschlagen» hängen an derselben Kante wie die Blasen. */
.by-wiki .by-trace { max-width: min(96%, 80ch); }

/* The example questions live in the conversation, under Billy's greeting: the log has the padding,
   and 34px lines them up with his bubbles (billy.css leaves that much for his face). */
.by-wiki .by-log .by-suggest { padding: 0; margin-left: 34px; }

.by-wiki .by-welcome { font-size: 15px; }

/* ---------- dark theme (html[data-theme="dark"], set from ?theme=dark or the system setting) ----------
   The smart-me tokens are a light palette only, so the handful the chat uses are redefined here —
   plus the few places billy.css sets a literal white. Nothing outside this page is affected. */
html[data-theme="dark"] {
  --sm-grey-200:  #16181C;
  --sm-grey-400:  #1D2026;
  --sm-grey-500:  #343941;
  --sm-grey-600:  #434952;
  --sm-grey-800:  #A2AAB6;
  --sm-grey-900:  #D3D8DF;
  --sm-grey-1000: #ECEFF3;

  --sm-blue:       #6E9BD8;
  --sm-blue-dark:  #B6CCEA;
  --sm-blue-50pct: #3C5A86;
  --sm-blue-25pct: #2C3A4E;
  --sm-blue-10pct: #232832;
  --sm-blue-5pct:  #1C2029;

  --sm-link: #8FB5E8;

  --sm-warning-hover: #2E2512;
  --sm-error-hover:   #301914;
  --sm-error-dark:    #F0998A;
  --sm-info-light:    #152230;
  --sm-info-dark:     #8FC4F2;
  --sm-success-hover: #162A14;
}

/* billy.css and shell.css paint these white, or on white, on purpose. */
html[data-theme="dark"] .by-chip { background: var(--sm-blue-10pct); }
html[data-theme="dark"] .by-msg--bot code { background: var(--sm-grey-400); }
html[data-theme="dark"] .by-avatar { box-shadow: 0 0 0 2px var(--sm-grey-400), 0 0 0 3px var(--sm-blue-25pct); }
/* A form field keeps the browser's own light background unless it is told otherwise. */
html[data-theme="dark"] .by-input textarea { background: var(--sm-grey-400); color: var(--sm-text); }
/* White on the light-mode brand blue is fine; on the lightened dark-mode one it is not — go deeper. */
html[data-theme="dark"] .by-msg--user { background: var(--sm-blue-50pct); }
html[data-theme="dark"] .sm-btn--primary { background: var(--sm-blue-50pct); }
html[data-theme="dark"] .sm-btn--primary:hover { background: var(--sm-blue); color: var(--sm-grey-200); }
/* The header portrait's pulse is a white ring (by-pulse); in the dark it would flash. The turning
   ring around Billy's face in the chat already says that he is working. */
html[data-theme="dark"] .by-busy .by-avatar { animation: none; }