/* ERZEUGT — nicht von Hand aendern.
 * Quelle: scripts/build/bundle-start-styles.mjs
 * Buendelt die render-blockierenden Stylesheets der Startseite zu einer Datei.
 * Aenderungen gehoeren in die Quelldateien; danach:
 *   node scripts/build/bundle-start-styles.mjs
 * Reihenfolge ist die Kaskade und darf nicht vertauscht werden.
 */

/* ---- styles.css ---- */
:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f7f7f4;
  color: #151515;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(247, 247, 244, 0.96)),
    repeating-linear-gradient(90deg, rgba(22, 22, 22, 0.025) 0 1px, transparent 1px 96px);
}

button,
input,
select,
textarea {
  font: inherit;
}

.shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: 100dvh;
  background: #f7f7f4;
}

.sidebar {
  display: grid;
  align-content: start;
  gap: 18px;
  min-height: 100dvh;
  padding: 22px 16px;
  border-right: 1px solid #deded8;
  background: #f1f1ed;
}

.brand {
  padding: 2px 8px 12px;
}

.brand h1 {
  margin: 0;
  font-size:32px;
  line-height: 1;
  letter-spacing: 0;
}

.note,
.eyebrow {
  margin: 8px 0 0;
  color: #71716b;
  font-size:14.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.nav,
.side-block,
.toolbar {
  display: grid;
  gap: 8px;
}

button {
  min-height: 42px;
  border: 1px solid #262622;
  border-radius: 8px;
  background: #20201d;
  color: #ffffff;
  font-weight: 500;
  cursor: pointer;
  touch-action: manipulation;
}

button:hover {
  background: #11110f;
}

.nav-button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 40px;
  padding: 7px 8px;
  border-color: transparent;
  background: transparent;
  color: #34342f;
  box-shadow: none;
  text-align: left;
}

.nav-button:hover {
  background: #e8e8e1;
  color: #151515;
}

.nav-button.is-active {
  border-color: #ddddd4;
  background: #ffffff;
  color: #151515;
}

.side-block {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid #deded8;
}

.status-strip {
  display: grid;
  gap: 6px;
  padding: 12px 8px;
  border-top: 1px solid #deded8;
  border-bottom: 1px solid #deded8;
}

.status-strip span {
  overflow-wrap: anywhere;
  border: 1px solid #d4d4cc;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px 10px;
  color: #4a4a43;
  font-size:14.5px;
  font-weight: 700;
}

.side-block button {
  min-height: 38px;
  border-color: #d4d4cc;
  background: #ffffff;
  color: #4a4a43;
}

.side-block button:hover {
  background: #e8e8e1;
}

.workspace {
  min-width: 0;
  min-height: 100dvh;
}

.view {
  display: none;
  min-height: 100dvh;
  padding: 30px;
}

.view.is-active {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 22px;
}

#code.view.is-active,
#projects.view.is-active,
#files.view.is-active,
#storageView.view.is-active,
#memory.view.is-active,
#ai.view.is-active,
#cost.view.is-active,
#tools.view.is-active,
#settings.view.is-active,
#profile.view.is-active,
#offline.view.is-active,
#error.view.is-active {
  grid-template-rows: auto auto auto minmax(120px, 1fr);
}

.view-header {
  max-width: 920px;
}

.view-header h2 {
  max-width: 760px;
  margin: 6px 0 0;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 0.98;
  letter-spacing: 0;
}

.subhead {
  max-width: 620px;
  margin: 16px 0 0;
  color: #62625b;
  font-size:18.5px;
  line-height: 1.62;
}

.log {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: auto;
  padding: 8px 0;
}

.output,
.entry {
  border: 1px solid #deded8;
  border-radius: 8px;
  background: #ffffff;
  padding: 18px 20px;
  white-space: pre-wrap;
}

.entry {
  max-width: 820px;
  margin: 0 0 20px;
  color: #252520;
  line-height: 1.65;
}

.entry.assistant {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
}

#search.view.is-active {
  grid-template-rows: auto auto minmax(0, 1fr);
  align-content: start;
}

.search-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: min(820px, 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.search-box {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.search-box span {
  color: rgba(246, 243, 238, 0.58);
  font-size:14.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.search-box input {
  min-height: 48px;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(5, 6, 8, 0.38);
  color: #f6f3ee;
  font-size:21px;
}

.search-box input::placeholder {
  color: rgba(151, 158, 171, 0.78);
}

.search-shell button {
  align-self: end;
  min-width: 112px;
  min-height: 48px;
}

.search-log {
  display: grid;
  align-content: start;
  gap: 10px;
  width: min(820px, 100%);
  min-height: 220px;
}

.search-empty {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(246, 243, 238, 0.76);
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.search-log .entry {
  max-width: min(760px, 100%);
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .search-shell {
    grid-template-columns: 1fr;
  }

  .search-shell button {
    width: 100%;
  }
}

.entry.user {
  align-self: flex-end;
  margin-left: auto;
  border-color: #20201d;
  background: #20201d;
  color: #ffffff;
}

.composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 10px;
  width: min(920px, 100%);
  margin: 0 auto;
  border: 1px solid #d8d8cf;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
  box-shadow: 0 16px 44px rgba(32, 32, 29, 0.08);
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.status-grid div {
  display: grid;
  gap: 6px;
  min-width: 0;
  border: 1px solid #deded8;
  border-radius: 8px;
  background: #ffffff;
  padding: 14px;
}

.status-grid strong,
.status-grid span {
  overflow-wrap: anywhere;
}

.status-grid strong {
  color: #20201d;
  font-size:15.5px;
}

.status-grid span {
  color: #62625b;
  font-size:14.5px;
  font-weight: 700;
}

label {
  display: grid;
  gap: 8px;
  font-size:15.5px;
  font-weight: 700;
  color: #42423c;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid #d4d4cc;
  border-radius: 8px;
  background: #ffffff;
  color: #151515;
  padding: 13px 14px;
  outline: none;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #20201d;
  box-shadow: 0 0 0 3px rgba(32, 32, 29, 0.08);
}

/* Eigener Fokusstil (QA-Welle 1, Befund F-17). Vorher gab es Fokusregeln NUR
   fuer input/select/textarea; Knoepfe und Links verliessen sich auf den
   Standardring des Browsers. Der ist in Chrome sichtbar (mit echter
   Tastaturbedienung geprueft), faellt aber je nach Browser unterschiedlich aus
   und geht auf dunklem Grund leicht unter. Zwei Ringe uebereinander — heller
   Kern, dunkler Saum — bleiben auf hellem UND dunklem Hintergrund erkennbar
   und erfuellen WCAG 2.4.7 unabhaengig vom Browser.
   Nur :focus-visible: Mausklicks erzeugen weiterhin keinen Ring, das sichtbare
   Verhalten aendert sich fuer Zeigergeraete also nicht. */
:where(button, a[href], summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid #f6f3ee;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(10, 10, 10, 0.85);
  border-radius: 6px;
}

textarea {
  min-height: 160px;
  resize: vertical;
}

#message {
  min-height: 58px;
  max-height: 180px;
  border: 0;
  background: transparent;
  resize: none;
}

#message:focus {
  box-shadow: none;
}

#editor {
  min-height: 360px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:15.5px;
  line-height: 1.62;
}

.toolbar {
  grid-template-columns: repeat(auto-fit, minmax(140px, max-content));
  align-items: center;
  max-width: 100%;
  min-width: 0;
}

.toolbar > * {
  min-width: 0;
  max-width: 100%;
}

.toolbar button {
  overflow-wrap: anywhere;
  white-space: normal;
}

.toolbar input,
.toolbar select {
  min-width: min(360px, 100%);
}

#tools .output {
  font-size:14.5px;
  color: #4a4a43;
}

@media (max-width: 920px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid #deded8;
  }

  .nav,
  .side-block {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workspace,
  .view {
    min-height: auto;
  }

  .view {
    padding: 22px 16px;
  }

  .panel-grid,
  .composer,
  .status-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .sidebar {
    padding: 16px 10px;
  }

  .view {
    padding: 18px 10px;
  }

  .brand h1 {
    font-size:29px;
  }

  .view-header h2 {
    font-size:40px;
  }

  .nav,
  .side-block,
  .toolbar {
    grid-template-columns: minmax(0, 1fr);
  }
}

.button-icon { display: inline-grid; place-items: center; width: 26px; min-width: 26px; color: #00ffef; font-weight: 800; }
.nav-label { min-width: 0; overflow: hidden; font-size:16.5px; line-height: 1.16; text-overflow: ellipsis; white-space: nowrap; }

.button-icon svg,
.browser-panel-nav button svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.surface,
.empty-state {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid #d8dee7;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
}

.surface strong,
.empty-state strong {
  color: #172033;
  font-size:15.5px;
}

.surface span,
.empty-state span {
  overflow-wrap: anywhere;
  color: #5d6675;
  font-size:15.5px;
}

.toast-root {
  position: fixed;
  right: 16px;
  bottom: 84px;
  z-index: 20;
  display: grid;
  gap: 8px;
  width: min(360px, calc(100vw - 32px)); pointer-events: none;
}

.toast {
  border: 1px solid #bdd6cd;
  border-radius: 8px;
  background: #f0faf6;
  color: #173a30;
  padding: 12px 14px;
  font-weight: 700;
  box-shadow: 0 12px 30px rgba(23, 32, 51, 0.12); pointer-events: auto;
}

.modal-root[hidden] {
  display: none;
}

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 16px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 32, 51, 0.38);
}

.modal {
  position: relative;
  z-index: 1;
  width: min(560px, 100%);
  border: 1px solid #d8dee7;
  border-radius: 8px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 24px 80px rgba(23, 32, 51, 0.24);
}

.modal header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.modal h3 {
  margin: 0;
}

.modal-body {
  margin-top: 12px;
  white-space: pre-wrap;
}

.skeleton {
  min-height: 54px;
  border-radius: 8px;
  background: linear-gradient(90deg, #eef2f6, #ffffff, #eef2f6);
  background-size: 220% 100%;
  animation: shimmer 1.2s linear infinite;
}

@keyframes shimmer {
  to {
    background-position-x: -220%;
  }
}

@media (max-width: 920px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

/* Codex-like start shell with glass controls. */
:root {
  color-scheme: dark;
  --menu-icon-color: rgba(246, 243, 238, 0.78);
  --menu-icon-active-color: #00ffef;
  --left-panel-width: 200px;
  --right-panel-width: 228px;
  background: #101113;
  color: #f6f3ee;
}

body {
  /* Ein Ton statt zweier Farbwolken (2026-08-14, Betreiber-Freigabe). Hier
     lagen ein gruen-tuerkiser und ein blauer Fleck ueber dem Grund und
     faerbten den ganzen Aussenbereich mit. */
  background: linear-gradient(180deg, #141517 0%, #101113 58%, #0d0e10 100%);
  color: #f6f3ee;
}

.shell {
  display: block;
  min-height: 100dvh;
  background: transparent;
}

.workspace {
  min-height: 100dvh;
  background: transparent;
  margin-left: 0;
  margin-right: 0;
  min-width: 0;
  overflow: hidden;
  transition: margin 180ms ease;
}

body.left-panel-open .workspace {
  margin-left: 0;
}

body.right-panel-open .workspace {
  margin-right: min(var(--right-panel-width), calc(100vw - 120px));
}

@media (max-width: 680px) {
  body.left-panel-open .workspace,
  body.right-panel-open .workspace {
    margin-right: 0;
    margin-left: 0;
  }
}

.glass-icon {
  position: fixed;
  top: env(safe-area-inset-top);
  z-index: 45;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f5f2ee;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.glass-icon:hover {
  background: transparent;
}

.app-menu-button {
  left: env(safe-area-inset-left);
}

.browser-button {
  right: env(safe-area-inset-right);
}

.split-icon {
  position: relative;
  display: block;
  width: 16px;
  height: 16px;
  border: 1.5px solid rgba(232, 232, 232, 0.72);
  border-radius: 4px;
}

.split-icon span:first-child {
  position: absolute;
  inset: 2px auto 2px 5px;
  width: 1.5px;
  border-radius: 999px;
  background: rgba(232, 232, 232, 0.58);
}

.split-icon span:last-child {
  display: none;
}

body.task-indicator-active .split-icon span:last-child {
  position: absolute;
  top: -5px;
  right: -5px;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #2997ff;
  box-shadow: 0 0 0 2px rgba(16, 17, 19, 0.78), 0 0 14px rgba(41, 151, 255, 0.7);
}

body.task-indicator-done .split-icon span:last-child {
  animation: taskIndicatorDone 1400ms ease both;
}

@keyframes taskIndicatorDone {
  0%,
  78% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.72);
  }
}

.sidebar-backdrop {
  display: none;
}

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 70;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto auto;
  gap: 6px;
  align-content: stretch;
  width: min(var(--left-panel-width), calc(100vw - 28px));
  box-sizing: border-box;
  overflow: hidden;
  min-height: 100dvh;
  padding: 32px 10px 14px;
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(25, 26, 29, 0.74);
  box-shadow: 28px 0 80px rgba(0, 0, 0, 0.38);
  transform: translateX(calc(-100% - 18px));
  transition: transform 180ms ease;
  backdrop-filter: blur(30px) saturate(1.35);
  -webkit-backdrop-filter: blur(30px) saturate(1.35);
}

.sidebar.is-compact {
  padding-top: 84px;
  padding-right: 0;
  padding-bottom: 10px;
  padding-left: 0;
}

.sidebar.is-compact .nav-button span:not(.button-icon):not(.profile-avatar),
.sidebar.is-compact #profileDockLabel {
  display: none;
}

.sidebar.is-compact .nav-button,
.sidebar.is-compact .profile-dock {
  justify-content: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-right: 0;
  padding-left: 0;
}

.sidebar.is-compact .button-icon {
  width: 100%;
  min-width: 0;
  font-size:14.5px;
}

.sidebar.is-compact .button-icon svg,
.browser-panel.is-compact .browser-panel-nav button svg {
  width: 16px;
  height: 16px;
}

.sidebar.is-compact .nav {
  gap: 4px;
}

.sidebar.is-compact .bottom-nav {
  gap: 4px;
  padding-top: 8px;
}

.sidebar.is-compact .nav-button,
.sidebar.is-compact .profile-dock,
.browser-panel.is-compact .browser-panel-nav button {
  min-height: 44px;
  height: 44px;
}

.sidebar.is-compact .profile-dock {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.sidebar .nav {
  gap: 0;
  align-content: start;
  min-height: 0;
  overflow: auto;
  padding-right: 2px;
}

.sidebar .bottom-nav {
  gap: 0;
  align-self: end;
  overflow: visible;
  padding-top: 8px; margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar.is-open {
  transform: translateX(0);
}

.panel-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 12px;
  cursor: col-resize;
  touch-action: none;
}

.panel-resizer::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.panel-resizer:hover::before,
body.is-resizing-panel .panel-resizer::before {
  background: rgba(159, 231, 212, 0.58);
}

.left-panel-resizer {
  right: -6px;
}

.left-panel-resizer::before {
  left: 5px;
}

.right-panel-resizer {
  left: -6px;
}

.right-panel-resizer::before {
  left: 6px;
}

.browser-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 6px;
  width: min(var(--right-panel-width), calc(100vw - 28px));
  box-sizing: border-box;
  overflow: hidden;
  min-height: 100dvh;
  padding: 32px 10px 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(25, 26, 29, 0.74);
  box-shadow: -28px 0 80px rgba(0, 0, 0, 0.38);
  transform: translateX(calc(100% + 18px));
  transition: transform 180ms ease;
  backdrop-filter: blur(30px) saturate(1.35);
  -webkit-backdrop-filter: blur(30px) saturate(1.35);
}

.browser-panel.is-compact {
  padding-top: 30px;
  padding-right: 0; padding-bottom: 10px; padding-left: 0;
}

.browser-panel.is-compact .browser-panel-nav button {
  justify-content: center;
  gap: 0;
  font-size: 0;
  padding-right: 0;
  padding-left: 0;
}

.browser-panel.is-compact .browser-panel-nav button span {
  width: 100%;
  min-width: 0;
  font-size:14.5px;
}

.browser-panel.is-compact .browser-panel-nav {
  gap: 4px;
}

.browser-panel.is-open {
  transform: translateX(0);
}

.browser-panel-header {
  padding: 2px 8px 12px;
}

.browser-panel-header h2 {
  margin: 0;
  color: #f6f3ee;
  font-size:27px;
  line-height: 1;
  letter-spacing: 0;
}

.browser-panel-header p {
  margin: 8px 0 0;
  color: rgba(246, 243, 238, 0.58);
  font-size:14.5px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.browser-panel-nav,
.browser-panel-status {
  display: grid;
  gap: 0;
}

.browser-panel-nav button {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-start;
  min-height: 36px;
  border-color: transparent;
  border-radius: 10px;
  background: transparent;
  color: rgba(246, 243, 238, 0.76);
  text-align: left;
}

.browser-panel-nav button span {
  display: inline-grid;
  place-items: center;
  width: 24px;
  min-width: 24px;
  color: var(--menu-icon-color);
  font-weight: 800;
}

.browser-panel-nav button:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.035);
  color: #ffffff;
}

.browser-panel-status {
  align-content: end;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 8px 0;
}

.browser-panel-status span {
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(246, 243, 238, 0.72);
  padding: 8px 10px;
  font-size:14.5px;
  font-weight: 700;
}

.brand {
  padding: 2px 8px 14px;
}

.brand h1 {
  color: #f6f3ee;
}

.note,
.eyebrow {
  color: rgba(246, 243, 238, 0.58);
}

.nav-button {
  border: 1px solid transparent;
  border-radius: 10px;
  color: rgba(246, 243, 238, 0.76);
  font-weight: 500;
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.sidebar .nav-button,
.browser-panel-nav button {
  font-weight: 500;
}

.nav-button:hover,
.nav-button.is-active {
  border-color: transparent;
  background: transparent;
  color: #ffffff;
}

.button-icon {
  color: var(--menu-icon-color);
}

.sidebar .nav-button.is-active .button-icon,
.browser-panel-nav button.is-active span { color: var(--menu-icon-active-color); }

.sidebar .nav-button:hover,
.browser-panel-nav button:hover {
  background: rgba(255, 255, 255, 0.035);
}

.sidebar .nav-button.is-active {
  background: transparent;
}

.status-strip {
  border-color: rgba(255, 255, 255, 0.12);
}

.status-strip span,
.side-block button {
  border-color: rgba(255, 255, 255, 0.11);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(246, 243, 238, 0.72);
}

.side-block {
  border-top-color: rgba(255, 255, 255, 0.12);
}

.profile-dock {
  align-self: end;
  display: flex;
  gap: 6px;
  width: 100%;
  margin-top: 0;
  padding: 4px 0 0;
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f6f3ee, #cfd3d8 58%, #8e949d);
  color: #101113;
  font-weight: 900;
  text-transform: lowercase;
}

.sidebar.is-compact .profile-avatar {
  width: 16px;
  height: 16px;
  font-size:12.5px;
}

.sidebar.is-compact .profile-avatar.is-empty {
  background:
    radial-gradient(circle at 50% 37%, transparent 0 2px, rgba(246, 243, 238, 0.78) 2.5px 4px, transparent 4.5px),
    radial-gradient(ellipse at 50% 82%, transparent 0 5px, rgba(246, 243, 238, 0.78) 5.5px 8px, transparent 8.5px);
}

.profile-avatar.is-empty {
  border: 1px solid rgba(246, 243, 238, 0.5);
  background:
    radial-gradient(circle at 50% 37%, transparent 0 4px, rgba(246, 243, 238, 0.78) 4.5px 7px, transparent 7.5px),
    radial-gradient(ellipse at 50% 82%, transparent 0 8px, rgba(246, 243, 238, 0.78) 8.5px 12px, transparent 12.5px);
  color: transparent;
}

.view {
  min-height: 100dvh;
  padding: 72px clamp(14px, 4vw, 48px) 28px;
}

.view.is-active {
  display: grid;
  gap: 20px;
}

/* DESIGN LOCK: smejj start design lock v1.
   Nicht aendern ohne schriftliche Bestaetigung des Nutzers.
   Geschuetzt: Startseite, dunkler Mittelbereich, unteres Eingabefeld,
   Modellname, Icon-Zeile, Trennlinie und kompakte Seitenleisten. */
#start.view.is-active {
  display: grid;
  grid-template-rows: 1fr;
  align-items: end;
  gap: 0;
  padding: 0;
}

.home-feed {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 0;
  width: 100%;
  min-height: 100dvh;
  background: linear-gradient(180deg, rgba(15, 17, 18, 0.86) 0%, #090a0c 72%, #050608 100%);
}

#start.has-start-chat .home-feed {
  grid-template-rows: minmax(0, 1fr) auto;
}

.home-hero {
  display: grid;
  align-items: end;
  justify-items: center;
  min-height: 0;
  padding: 52px 16px 10px;
  text-align: center;
}

.home-hero h2 {
  margin: 0 auto;
  max-width: 960px;
  color: #f9f6f1;
  font-size: clamp(26px, 4vw, 44px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0;
}

#start.has-start-chat .home-hero {
  display: none;
}

.start-log {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  min-height: 0;
  max-height: none;
  margin: 0;
  overflow: auto;
  padding: 6px clamp(8px, 1.4vw, 18px) 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

#start.has-start-chat .start-log {
  justify-content: flex-start;
}

#start.has-start-chat .start-log .entry:first-child {
  max-width: min(980px, calc(100% - 64px));
  margin-right: 32px;
  margin-left: 32px;
}

.start-log .entry {
  max-width: min(980px, 100%);
  margin-bottom: 0;
  border-radius: 8px;
}

.start-log .entry.user {
  padding: 8px 11px;
}

.start-log .entry.assistant {
  padding: 2px 0;
}

.prompt-glass {
  width: 100%;
  margin: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 0;
  background: #050608;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.prompt-glass textarea {
  height: 48px;
  min-height: 48px;
  max-height: 324px;
  border: 0;
  background: transparent;
  color: rgba(246, 243, 238, 0.82);
  padding: 8px 8px 6px;
  font-size: clamp(24px, 3.4vw, 34px);
  font-weight: 400;
  line-height: 1.16;
  overflow-y: auto;
  resize: none;
}

.prompt-glass textarea::placeholder {
  color: rgba(151, 158, 171, 0.78);
}

.prompt-actions {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vw, 10px);
  min-height: 42px;
  padding: 0 clamp(8px, 1.4vw, 16px);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

.prompt-spacer {
  flex: 1;
}

.ghost-button,
.mode-pill,
.text-chip,
.send-button {
  min-height: 38px;
  border-color: transparent;
  background: transparent;
  color: rgba(246, 243, 238, 0.9);
  box-shadow: none;
}

.ghost-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  font-weight: 300;
}

.text-chip {
  width: auto;
  min-width: 88px;
  padding: 0 10px;
  border-radius: 8px;
  color: rgba(246, 243, 238, 0.74);
  font-size:17.5px;
  font-weight: 500;
}

.icon-button svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.send-button {
  display: grid;
  place-items: center;
  position: relative;
  width: 32px;
  height: 34px;
  min-height: 34px;
  border-radius: 0;
  background: transparent;
  color: rgba(246, 243, 238, 0.96);
  font-weight: 300;
}

.send-button svg {
  width: 25px;
  height: 25px;
  stroke-width: 2.2;
}

.model-picker {
  position: relative;
  z-index: 50;
}

.model-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 60;
  display: grid;
  gap: 4px;
  min-width: 154px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(25, 26, 29, 0.92);
  padding: 6px;
  box-shadow: 0 16px 52px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

.model-menu button {
  justify-content: flex-start;
  min-height: 34px;
  border-color: transparent;
  background: transparent;
  color: rgba(246, 243, 238, 0.78);
  font-size:15.5px;
  font-weight: 500;
  text-align: left;
}

.model-menu button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.feed-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.feed-item,
.surface,
.empty-state,
.output,
.status-grid div,
.modal {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(246, 243, 238, 0.82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.feed-item {
  display: grid;
  gap: 8px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 14px;
}

.feed-item strong,
.surface strong,
.empty-state strong,
.status-grid strong {
  color: #f6f3ee;
}

.feed-item span,
.surface span,
.empty-state span,
.status-grid span,
.subhead {
  color: rgba(246, 243, 238, 0.62);
}

.view-header h2 {
  color: #f9f6f1;
}

input,
select,
textarea,
.composer {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #f6f3ee;
}

button {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(246, 243, 238, 0.9);
  color: #111214;
}

button:hover {
  background: #ffffff;
}

.entry.user {
  border-color: rgba(94, 173, 235, 0.38);
  background: rgba(94, 173, 235, 0.18);
}

.entry.assistant {
  color: rgba(246, 243, 238, 0.86);
}

@media (max-width: 920px) {
  .shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: 100dvh;
    border-bottom: 0;
  }

  .nav,
  .side-block {
    grid-template-columns: 1fr;
  }

  .feed-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .glass-icon {
    width: 28px;
    height: 28px;
    min-height: 28px;
  }

  .start-log {
    gap: 3px;
    padding: 4px 8px 8px;
  }

  .start-log .entry {
    max-width: 100%;
  }

  #start.has-start-chat .start-log .entry:first-child {
    max-width: calc(100% - 64px);
    margin-right: 32px;
    margin-left: 32px;
  }

  .start-log .entry.user {
    padding: 7px 10px;
  }

  .start-log .entry.assistant {
    padding: 1px 0;
  }

  .home-hero h2 {
    font-size:38px;
  }

  .prompt-actions {
    gap: 9px;
    min-height: 64px;
    padding: 0 10px;
  }

  .ghost-button {
    width: 30px;
    height: 38px;
    min-height: 38px;
  }

  .text-chip {
    font-size:18.5px;
  }

  .send-button {
    width: 34px;
    height: 38px;
    min-height: 38px;
  }
}
/* END DESIGN LOCK: smejj start design lock v1. */

.legal-links {
  margin-top: 18px;
  font-size: 0.85rem;
  color: rgba(246, 243, 238, 0.6);
}

/* Klickflaeche mindestens 24x24 px (QA-Welle 1, Befund F-21; WCAG 2.2 AA
   "Target Size (Minimum)"). Gemessen waren "Impressum" 74x16 und
   "Datenschutz" 84x16 — zu klein zum sicheren Treffen auf Beruehrgeraeten.
   inline-flex mit min-height vergroessert nur die Flaeche, nicht die Schrift;
   das Schriftbild bleibt unveraendert. */
.legal-links a {
  color: #8fc7ff;
  margin-left: 8px;
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Nur fuer Screenreader/SEO sichtbar (H1 der Startseite) — pixel-identisches Rendering. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- cline-model-menu.css ---- */
/* smejj.com — Cline-Untermenue im Modell-Picker (Codex-Stil).
   Design-Sprache identisch zum bestehenden .model-menu (dunkel, Glas, dezente Linien). */

.model-menu button[data-submenu-trigger] {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.model-submenu-arrow {
  color: rgba(246, 243, 238, 0.5);
  font-size:14.5px;
}

.model-submenu {
  position: absolute;
  right: calc(100% + 6px);
  bottom: 0;
  z-index: 61;
  display: grid;
  gap: 2px;
  min-width: 232px;
  max-width: 312px;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(25, 26, 29, 0.96);
  padding: 6px;
  box-shadow: 0 16px 52px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(24px) saturate(1.2);
  -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

.model-submenu-group {
  padding: 6px 8px 2px;
  font-size:13.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(246, 243, 238, 0.45);
}

.model-submenu button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
}

.model-submenu .model-submenu-name {
  overflow: hidden;
  text-overflow: ellipsis;
}

.model-submenu .model-submenu-check {
  visibility: hidden;
  color: rgba(246, 243, 238, 0.92);
}

.model-submenu button.is-active .model-submenu-check {
  visibility: visible;
}

.model-submenu-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin: 4px 0;
}

.model-submenu-note,
.model-submenu-hint {
  padding: 8px;
  font-size:14.5px;
  color: rgba(246, 243, 238, 0.62);
  margin: 0;
}

@media (max-width: 640px) {
  .model-submenu {
    right: 0;
    bottom: calc(100% + 6px);
    max-width: min(312px, calc(100vw - 32px));
  }
}

/* ---- branding.css ---- */
.app-menu-button {
  z-index: 75;
}

.sidebar {
  border-right: 0;
}

.app-brand-logo {
  --app-brand-expanded-width: 80px;
  --app-brand-expanded-height: 28px;
  position: fixed;
  top: calc(env(safe-area-inset-top) + 0px);
  left: calc(env(safe-area-inset-left) + 36px);
  z-index: 74;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  line-height: 0;
  text-decoration: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.app-brand-logo img {
  grid-area: 1 / 1;
  display: block;
  object-fit: contain;
}

.app-brand-icon {
  width: 16px;
  height: 16px;
  background: transparent;
  visibility: visible;
  opacity: 1;
}

.app-brand-wordmark {
  width: 100%;
  height: auto;
  max-height: 19px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body[data-left-menu-state="expanded"] .app-brand-logo {
  width: min(var(--app-brand-expanded-width), calc(var(--left-panel-width) - 52px));
  height: var(--app-brand-expanded-height);
  padding: 0;
  background: transparent;
  box-shadow: none;
}

body[data-left-menu-state="expanded"] .app-brand-icon {
  visibility: hidden;
  opacity: 0;
}

body[data-left-menu-state="expanded"] .app-brand-wordmark {
  visibility: visible;
  opacity: 1;
}

/* ===== Marken sind Absender, keine Schaltflaechen (2026-08-13) =====
   In jeder Ecke soll genau EIN Bedienelement stehen: links der Menue-Knopf,
   rechts der Panel-Knopf. Die Marke lebt im Panel und erscheint erst, wenn es
   offen ist — dasselbe Muster wie bei ChatGPT. Vorher standen links und rechts
   zwei fast gleiche Zeichen dauerhaft im Bild.

   Bewusst ueber die vorhandenen Zustaende geloest (kein neues JS): der Body
   traegt schon data-left-menu-state = closed | compact | opening | expanded.
   Fehlt das Attribut, bleibt alles sichtbar wie bisher — die Regel kann die
   Marke also nie versehentlich ganz verschlucken. */
body[data-left-menu-state="closed"] .app-brand-logo,
body[data-left-menu-state="opening"] .app-brand-logo {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* In der schmalen Spur ist das Zeichen der oberste Eintrag — so macht es das
   Vorbild von ChatGPT, und ohne Marke waere die Spur eine anonyme Icon-Leiste.
   Mittig statt links, weil in einer 96 px schmalen Spur sonst der Menue-Knopf
   danebensteht; eine Zeile tiefer, damit sich beide nicht beruehren. Gerechnet
   statt mit transform verschoben — transform ist in dieser Datei gesperrt. */
body[data-left-menu-state="compact"] .app-brand-logo {
  top: calc(env(safe-area-inset-top) + 44px);
  left: calc(env(safe-area-inset-left) + (min(var(--left-panel-width), 100vw - 28px) - 28px) / 2);
}

/* Bewusst OHNE Ueberblendung: tests/branding-presentation.test.mjs verbietet
   in dieser Datei filter, mask, transform und transition. Der Grund steht im
   Testnamen — die Marke soll unabhaengig vom Layout und ohne Effekte
   erscheinen. Ein Auf- und Abblenden waere huebsch, ist aber genau das, was
   die Sperre draussen halten will. */

/* Rechte Seite spiegelbildlich: das Maus-Zeichen zeigt sich erst, wenn das
   rechte Panel offen ist. Umgekehrt formuliert (verstecken statt zeigen),
   damit ein Browser ohne :has() den Knopf sichtbar laesst statt ihn
   unerreichbar zu machen — fail-visible, nicht fail-closed. */
body:has(#browserPanel:not(.is-open)) #mausButton {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Das Maus-Zeichen war bis 2026-08-13 Strich fuer Strich unser Logo — links
   und rechts stand dasselbe Bild, und niemand konnte die Maus als Maus lesen.
   Jetzt ein Zeiger in derselben Farbe: die Familie stellt die Farbe her, die
   Form stiftet den Unterschied. Der Austausch laeuft ueber den Hintergrund,
   weil das <img> in der gesperrten index.html steht. Der Pfad ist absolut
   (fuehrender Schraegstrich) und damit unabhaengig davon, ob diese Datei
   einzeln oder im Buendel ausgeliefert wird. */
#mausButton {
  background-image: url("/icons/maus-zeiger.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
}

#mausButton img {
  display: none;
}

@media (max-width: 560px) {
  .app-brand-logo {
    --app-brand-expanded-width: 76px;
  }
}

/* Das Logo sitzt fest neben dem Menue-Knopf. Wachsen beide auf 44 px (siehe
   styles.css, 2026-08-09), reichen die bisherigen 36 px Abstand nicht mehr —
   der Menue-Knopf endet dann erst bei 44. */
@media (max-width: 600px) {
  .app-brand-logo {
    width: 44px;
    height: 44px;
    left: calc(env(safe-area-inset-left) + 48px);
  }

  /* Bei offenem linken Menue zeigt das Logo die Wortmarke und ist dann breiter,
     aber nur so hoch wie --app-brand-expanded-height (28 px). Live nachgemessen
     2026-08-09: in genau diesem Zustand war es 76x28 und damit als einziges
     Kopf-Element wieder unter dem Touch-Ziel. Die Breite bleibt der Wortmarke
     ueberlassen, die Hoehe nicht. */
  body[data-left-menu-state="expanded"] .app-brand-logo {
    height: 44px;
  }
}

/* ---- composer-tools.css ---- */
/* smejj.com — Styles fuer Composer-Werkzeuge (Plus-Menue, Diktat, Sprachmodus, Vorlesen).
   Eigene Datei, damit die design-gelockte styles.css (Ratchet-Baseline) nicht waechst.
   Design-Sprache identisch zum bestehenden .model-menu (dunkel, Glas, dezente Linien). */

.plus-picker {
     position: relative;
     z-index: 50;
}

.plus-menu {
     position: absolute;
     left: 0;
     bottom: calc(100% + 8px);
     z-index: 60;
     display: grid;
     gap: 4px;
     min-width: 196px;
     border: 1px solid rgba(255, 255, 255, 0.13);
     background: rgba(25, 26, 29, 0.92);
     padding: 6px;
     box-shadow: 0 16px 52px rgba(0, 0, 0, 0.32);
     backdrop-filter: blur(24px) saturate(1.2);
     -webkit-backdrop-filter: blur(24px) saturate(1.2);
}

.plus-menu button {
     display: flex;
     align-items: center;
     gap: 10px;
     justify-content: flex-start;
     width: 100%;
     min-height: 34px;
     padding: 0 8px;
     border: none;
     border-color: transparent;
     background: transparent;
     color: rgba(246, 243, 238, 0.78);
     font-size:15.5px;
     font-weight: 500;
     text-align: left;
     cursor: pointer;
}

.plus-menu button:hover {
     background: rgba(255, 255, 255, 0.06);
     color: #ffffff;
}

.plus-menu button svg {
     width: 17px;
     height: 17px;
     flex: 0 0 auto;
     fill: none;
     stroke: currentColor;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
     pointer-events: none;
}

.plus-menu .visually-hidden-input {
     display: none;
}

/* Diktat aktiv: Mikrofon pulsiert rot. */

[data-start-tool="voice"].is-recording {
     color: #ff5c5c;
     animation: composer-pulse 1.4s ease-in-out infinite;
}

/* Vorlesen aktiv: Lautsprecher hervorgehoben. */

[data-start-tool="speaker"].is-speaking {
     color: #7fd4a8;
     animation: composer-pulse 1.8s ease-in-out infinite;
}

@keyframes composer-pulse {
     0%, 100% { opacity: 1; }
     50% { opacity: 0.45; }
}

/* Sprachmodus-Overlay (Gespraech). */

.voice-mode-overlay {
     position: fixed;
     inset: 0;
     z-index: 200;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 28px;
     background: rgba(5, 6, 8, 0.94);
     backdrop-filter: blur(18px);
     -webkit-backdrop-filter: blur(18px);
     color: rgba(246, 243, 238, 0.92);
     text-align: center;
     padding: 24px;
}

.voice-mode-overlay[hidden] {
     display: none;
}

.voice-mode-wave {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 7px;
     height: 84px;
}

.voice-mode-wave span {
     width: 9px;
     height: 18px;
     border-radius: 6px;
     background: rgba(246, 243, 238, 0.9);
     animation: voice-wave 1.15s ease-in-out infinite;
}

.voice-mode-wave span:nth-child(2) { animation-delay: 0.12s; }
.voice-mode-wave span:nth-child(3) { animation-delay: 0.24s; }
.voice-mode-wave span:nth-child(4) { animation-delay: 0.36s; }
.voice-mode-wave span:nth-child(5) { animation-delay: 0.48s; }

@keyframes voice-wave {
     0%, 100% { transform: scaleY(0.45); }
     50% { transform: scaleY(1); }
}

/* Zustaende: Zuhoeren (weiss), Denken (gedimmt, langsam), Sprechen (gruenlich). */

.voice-mode-overlay[data-mode="thinking"] .voice-mode-wave span {
     animation-duration: 2.2s;
     background: rgba(246, 243, 238, 0.45);
}

.voice-mode-overlay[data-mode="speaking"] .voice-mode-wave span {
     background: #7fd4a8;
}

.voice-mode-status {
     font-size:20px;
     font-weight: 500;
     margin: 0;
}

.voice-mode-transcript {
     max-width: 640px;
     min-height: 24px;
     margin: 0;
     font-size:16.5px;
     color: rgba(246, 243, 238, 0.6);
     line-height: 1.62;
}

/* Live-Mitschrift der Antwort im Sprachmodus (Konkurrenz-Radar V2) */
.voice-mode-reply {
     max-width: 640px;
     max-height: 38vh;
     overflow-y: auto;
     margin: 0;
     font-size:17.5px;
     color: rgba(246, 243, 238, 0.85);
     line-height: 1.65;
     white-space: pre-wrap;
     overflow-wrap: anywhere;
}

.voice-mode-reply:empty {
     display: none;
}

.voice-mode-close {
     display: grid;
     place-items: center;
     flex: 0 0 auto;
     width: 48px;
     height: 48px;
     border: 1px solid rgba(246, 243, 238, 0.92);
     border-radius: 50%;
     background: rgba(246, 243, 238, 0.92);
     color: #101114;
     cursor: pointer;
}

.voice-mode-close:hover {
     background: #ffffff;
}

.voice-mode-close svg {
     width: 18px;
     height: 18px;
     fill: none;
     stroke: currentColor;
     stroke-width: 2.2;
     stroke-linecap: round;
     pointer-events: none;
}

.voice-mode-hint {
     position: absolute;
     bottom: 28px;
     left: 0;
     right: 0;
     margin: 0;
     font-size:14.5px;
     color: rgba(246, 243, 238, 0.45);
}

/* Sprachmodus neu: animiertes smejj.com Zeichen — linke und rechte Klammer
   sprechen im Wechsel, je ein Punkt gehoert zu einer Seite. */

.voice-mode-logo {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
}

.voice-mode-logo::before {
     content: "";
     position: absolute;
     inset: -24px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(20, 224, 220, 0.25) 0%, rgba(20, 224, 220, 0) 70%);
     filter: blur(24px);
     pointer-events: none;
     animation: voice-aura-pulse 3s ease-in-out infinite;
     z-index: -1;
}

.voice-mode-logo svg {
     width: 150px;
     height: 109px;
}

.voice-mode-logo path {
     fill: none;
     stroke: #14e0dc;
     stroke-width: 22;
     stroke-linecap: round;
     stroke-linejoin: round;
     filter: drop-shadow(0 0 12px rgba(20, 224, 220, 0.4));
}

.voice-mode-logo circle {
     fill: #14e0dc;
     filter: drop-shadow(0 0 8px rgba(20, 224, 220, 0.6));
}

.voice-logo-left { animation: voice-talk-left 2.4s ease-in-out infinite; }
.voice-logo-right { animation: voice-talk-right 2.4s ease-in-out infinite; }
.voice-logo-dot-a { animation: voice-dot-a 2.4s ease-in-out infinite; }
.voice-logo-dot-b { animation: voice-dot-b 2.4s ease-in-out infinite; }

@keyframes voice-talk-left {
     0%, 40%, 100% { transform: translateX(0) scale(1); }
     15% { transform: translateX(-7px) scale(1.06); }
     28% { transform: translateX(0) scale(1); }
}

@keyframes voice-talk-right {
     0%, 50%, 100% { transform: translateX(0) scale(1); }
     65% { transform: translateX(7px) scale(1.06); }
     78% { transform: translateX(0) scale(1); }
}

@keyframes voice-dot-a {
     0%, 40%, 100% { opacity: 0.25; }
     15% { opacity: 1; }
}

@keyframes voice-dot-b {
     0%, 50%, 100% { opacity: 0.25; }
     65% { opacity: 1; }
}

@keyframes voice-aura-pulse {
     0%, 100% { transform: scale(0.92); opacity: 0.45; }
     50% { transform: scale(1.12); opacity: 0.9; }
}

/* Zustaende des Zeichens: Denken (langsam), Sprechen (gruen).
   Stumm: Das Zeichen bleibt bewusst farbig und animiert — der Sprachmodus
   laeuft weiter, nur das Mikrofon ist aus (Signal traegt der rote Mic-Button). */

/* Denken = Dialog-Puls (Betreiber-Auftrag + Freigabe 2026-08-13).

   Vorher wurde die Bewegung beim Denken LANGSAMER (2,4 s -> 3,6 s) — genau in
   dem Moment, wo der Nutzer wissen will, ob gearbeitet wird, wirkte das
   Zeichen am totesten ("dieser Moment, wo arbeitet ... soll rechts links
   bewegen wie zwei Menschen reden"). Jetzt schwingen die Klammern abwechselnd
   deutlich aufeinander zu (±15 px statt ±7) und die Punkte blinken versetzt
   wie ein Wortwechsel — ein Herzschlag-Takt von 1,1 s. Hoeren bleibt ruhig,
   Sprechen bleibt gruen: die drei Zustaende sind jetzt auf einen Blick
   unterscheidbar. */

.voice-mode-overlay[data-mode="thinking"] .voice-logo-left {
     animation: voice-puls-left 1.1s ease-in-out infinite;
}

.voice-mode-overlay[data-mode="thinking"] .voice-logo-right {
     animation: voice-puls-right 1.1s ease-in-out infinite;
}

.voice-mode-overlay[data-mode="thinking"] .voice-logo-dot-a {
     animation: voice-puls-dot-a 1.1s ease-in-out infinite;
}

.voice-mode-overlay[data-mode="thinking"] .voice-logo-dot-b {
     animation: voice-puls-dot-b 1.1s ease-in-out infinite;
}

@keyframes voice-puls-left {
     0%, 100% { transform: translateX(0) scale(1); }
     25% { transform: translateX(15px) scale(1.08); }
     50% { transform: translateX(0) scale(1); }
}

@keyframes voice-puls-right {
     0%, 50% { transform: translateX(0) scale(1); }
     75% { transform: translateX(-15px) scale(1.08); }
     100% { transform: translateX(0) scale(1); }
}

@keyframes voice-puls-dot-a {
     0%, 45%, 100% { opacity: 0.3; }
     20% { opacity: 1; }
}

@keyframes voice-puls-dot-b {
     0%, 55%, 100% { opacity: 0.3; }
     75% { opacity: 1; }
}

.voice-mode-overlay[data-mode="thinking"] .voice-mode-logo::before {
     background: radial-gradient(circle, rgba(20, 224, 220, 0.3) 0%, rgba(20, 224, 220, 0) 70%);
     animation-duration: 1.1s;
}

/* Bewegung nur, wenn der Nutzer sie nicht abbestellt hat — der Puls ist die
   kraeftigste Animation der App und braucht diese Bremse zwingend. */
@media (prefers-reduced-motion: reduce) {
     .voice-logo-left, .voice-logo-right, .voice-logo-dot-a, .voice-logo-dot-b,
     .voice-mode-overlay[data-mode="thinking"] .voice-logo-left,
     .voice-mode-overlay[data-mode="thinking"] .voice-logo-right,
     .voice-mode-overlay[data-mode="thinking"] .voice-logo-dot-a,
     .voice-mode-overlay[data-mode="thinking"] .voice-logo-dot-b,
     .voice-mode-logo::before {
          animation: none;
     }
}

.voice-mode-overlay[data-mode="speaking"] .voice-mode-logo path {
     stroke: #7fd4a8;
     filter: drop-shadow(0 0 14px rgba(127, 212, 168, 0.5));
}

.voice-mode-overlay[data-mode="speaking"] .voice-mode-logo circle {
     fill: #7fd4a8;
     filter: drop-shadow(0 0 10px rgba(127, 212, 168, 0.7));
}

.voice-mode-overlay[data-mode="speaking"] .voice-mode-logo::before {
     background: radial-gradient(circle, rgba(127, 212, 168, 0.32) 0%, rgba(127, 212, 168, 0) 70%);
     animation-duration: 2s;
}

/* Untere Leiste im Sprachmodus: Eingabefeld mit Plus, Mikrofon (stumm), Beenden. */

.voice-mode-bar {
     display: flex;
     align-items: center;
     gap: 10px;
     width: min(560px, 100%);
}

.voice-mode-input-wrap {
     flex: 1 1 auto;
     display: flex;
     align-items: center;
     gap: 6px;
     min-height: 48px;
     padding: 0 10px 0 6px;
     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: 24px;
     background: rgba(255, 255, 255, 0.05);
}

.voice-mode-input-wrap button {
     display: grid;
     place-items: center;
     width: 36px;
     height: 36px;
     border: none;
     border-radius: 50%;
     background: transparent;
     color: rgba(246, 243, 238, 0.8);
     cursor: pointer;
     flex: 0 0 auto;
}

.voice-mode-input-wrap button:hover {
     background: rgba(255, 255, 255, 0.08);
     color: #ffffff;
}

.voice-mode-input-wrap svg {
     width: 18px;
     height: 18px;
     fill: none;
     stroke: currentColor;
     stroke-width: 2;
     stroke-linecap: round;
     pointer-events: none;
}

#voiceModeInput {
     flex: 1 1 auto;
     min-width: 0;
     border: none;
     background: transparent;
     color: rgba(246, 243, 238, 0.92);
     font-size:16.5px;
     outline: none;
}

#voiceModeInput::placeholder {
     color: rgba(246, 243, 238, 0.4);
}

/* Sende-Button (Pfeil nach oben, wie ChatGPT): ohne Hintergrund, transparent —
   nur mit Text aktiv (Freigabe-Wortlaut 2026-07-21: "ohne Hintergrund und Transparent"). */

#voiceModeSend {
     background: transparent;
}

#voiceModeSend:hover {
     background: transparent;
     color: #ffffff;
}

#voiceModeSend:disabled {
     background: transparent;
     color: rgba(246, 243, 238, 0.35);
     cursor: default;
}

#voiceModeSend svg {
     stroke-width: 2.4;
}

.voice-mode-mic {
     display: grid;
     place-items: center;
     flex: 0 0 auto;
     width: 48px;
     height: 48px;
     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.05);
     color: rgba(246, 243, 238, 0.9);
     cursor: pointer;
     transition: color 0.15s ease;
}

.voice-mode-mic:hover {
     background: rgba(255, 255, 255, 0.1);
}

.voice-mode-mic svg {
     width: 20px;
     height: 20px;
     fill: none;
     stroke: currentColor;
     stroke-width: 2;
     stroke-linecap: round;
     stroke-linejoin: round;
     pointer-events: none;
}

.voice-mode-mic .voice-mic-slash {
     display: none;
}

/* Stumm: Button-Optik bleibt identisch zu den anderen Buttons —
   nur das Mikrofon-Icon wird rot (ruhiges "laeuft weiter"-Signal). */

.voice-mode-mic.is-muted {
     color: #e24b4a;
}

.voice-mode-mic.is-muted:hover {
     background: rgba(255, 255, 255, 0.1);
}

.voice-mode-mic.is-muted .voice-mic-slash {
     display: block;
}

/* Nach dem Upgrade steht der Hinweis im Fluss (kein Overlap mit der Leiste).
   Das Overlay zentriert per justify-content ALLES als einen Block — dadurch
   hing die untere Leiste in der Bildmitte statt am unteren Rand. Zwei
   auto-Margins teilen den Freiraum: das Zeichen bleibt mittig, Hinweis und
   Leiste rutschen ganz nach unten. Bewusst EINE Regel pro Selektor — zwei
   Regeln mit gleichem Selektor (margin:0 vs. margin-top:auto) waeren wieder
   die Spezifitaetsfalle vom Konto-Tab-Fix. */

.voice-mode-overlay[data-upgraded="true"] .voice-mode-logo {
     margin-top: auto;
}

.voice-mode-overlay[data-upgraded="true"] .voice-mode-hint {
     position: static;
     margin: auto 0 0;
}

.voice-mode-overlay[data-upgraded="true"] .voice-mode-bar {
     margin-bottom: 8px;
}

/* Code-Uebernahme aus Chat-Antworten in den Workspace. */

.chat-code-actions {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
     margin: 6px 0 2px;
}

.chat-code-save {
     min-height: 30px;
     padding: 4px 12px;
     border: 1px solid rgba(255, 255, 255, 0.16);
     border-radius: 8px;
     background: rgba(255, 255, 255, 0.04);
     color: rgba(246, 243, 238, 0.85);
     font-size:14.5px;
     font-weight: 500;
     cursor: pointer;
}

.chat-code-save:hover:not(:disabled) {
     background: rgba(255, 255, 255, 0.09);
     color: #ffffff;
}

.chat-code-save:disabled {
     border-color: rgba(127, 212, 168, 0.4);
     color: #7fd4a8;
     cursor: default;
}

/* ---- browser-pane.css ---- */
/* smejj.com — Integrierter Browser (Codex-Stil) im rechten Panel. */

.browser-panel.is-browser-mode {
  grid-template-rows: 1fr;
  padding: 0;
  gap: 0;
}

.browser-panel.is-browser-mode .browser-panel-nav {
  display: none;
}

.browser-pane {
  display: grid;
  --bp-row-height: 26px;
  --bp-control-size: 22px;
  --bp-control-gap: 3px;
  --bp-side-width: calc((var(--bp-control-size) * 3) + (var(--bp-control-gap) * 2));
  /* Inhalt darf nie hoeher als das Panel werden: minmax(0, 1fr) statt fester
     Mindesthoehe — sonst werden Seiten auf kleinen Fenstern abgeschnitten. */
  grid-template-rows: var(--bp-row-height) var(--bp-row-height) auto auto minmax(0, 1fr);
  min-height: 0;
  height: 100%;
}

.browser-pane,
.browser-pane * {
  box-sizing: border-box;
}

.browser-panel:not(.is-browser-mode) .browser-pane {
  display: none;
}

/* Tab-Leiste */

.bp-tabstrip {
  grid-row: 1;
  display: grid;
  grid-template-columns: var(--bp-side-width) minmax(0, 1fr) var(--bp-side-width);
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: var(--bp-row-height);
  padding: 0 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  overflow: hidden;
}

.bp-tab-left,
.bp-tab-right,
.bp-toolbar-left,
.bp-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--bp-control-gap);
  min-width: 0;
}

.bp-tab-right,
.bp-toolbar-right {
  justify-content: flex-end;
}

.bp-tabs {
  display: grid;
  min-width: 0;
  overflow: hidden;
}

.bp-tab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  width: 100%;
  height: var(--bp-control-size);
  min-height: 0;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: transparent;
  color: #f6f3ee;
  font-size:13.5px;
  cursor: pointer;
}

.bp-tab.is-active {
  border-color: transparent;
  background: transparent;
  color: #f6f3ee;
}

.bp-tab-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: rgba(246, 243, 238, 0.35);
}

.bp-tab.is-active .bp-tab-dot {
  background: rgba(159, 231, 212, 0.9);
}

.bp-tab.is-loading .bp-tab-dot {
  animation: bp-pulse 900ms ease-in-out infinite;
}

@keyframes bp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

.bp-tab-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bp-tab-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  color: rgba(246, 243, 238, 0.5);
  font-size:15.5px;
  line-height: 1;
}

.bp-tab-close:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #f6f3ee;
}

.bp-tab-add,
.bp-tab-prev,
.bp-tab-next,
.bp-tab-count {
  flex: none;
  width: var(--bp-control-size);
  height: var(--bp-control-size);
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(246, 243, 238, 0.62);
  font-size:17.5px;
  line-height: 1;
  cursor: pointer;
}

.bp-tab-count {
  min-width: var(--bp-control-size);
  padding: 0 5px;
  border: 1px solid rgba(159, 231, 212, 0.36);
  background: rgba(159, 231, 212, 0.11);
  color: rgba(159, 231, 212, 0.95);
  font-size:13.5px;
  font-weight: 700;
}

.bp-tab-add:hover:not(:disabled),
.bp-tab-prev:hover:not(:disabled),
.bp-tab-next:hover:not(:disabled),
.bp-tab-count:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #f6f3ee;
}

.bp-tab-add:disabled,
.bp-tab-prev:disabled,
.bp-tab-next:disabled {
  opacity: 0.35;
  cursor: default;
}

/* Toolbar */

.bp-toolbar {
  grid-row: 2;
  display: grid;
  grid-template-columns: var(--bp-side-width) minmax(0, 1fr) var(--bp-side-width);
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
  height: var(--bp-row-height);
  padding: 2px 5px;
  border-top: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
}

.bp-toolbar button {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--bp-control-size);
  height: var(--bp-control-size);
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(246, 243, 238, 0.72);
  cursor: pointer;
}

.bp-toolbar button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.1);
  color: #f6f3ee;
}

.bp-toolbar button:disabled {
  opacity: 0.3;
  cursor: default;
}

.bp-toolbar svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bp-address-form {
  min-width: 0;
  margin: 0;
}

.bp-address {
  width: 100%;
  height: var(--bp-control-size);
  padding: 0 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.28);
  color: #f6f3ee;
  font-size:14px;
}

.bp-address:focus {
  outline: none;
  border-color: rgba(159, 231, 212, 0.55);
  background: rgba(0, 0, 0, 0.4);
}

.bp-address::placeholder {
  color: rgba(246, 243, 238, 0.4);
}

/* Ladeindikator + Hinweise */

.bp-progress {
  height: 2px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.bp-progress span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: 999px;
  background: rgba(159, 231, 212, 0.85);
  animation: bp-progress 1100ms ease-in-out infinite;
}

@keyframes bp-progress {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(320%); }
}

.bp-hint {
  padding: 7px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(159, 231, 212, 0.08);
  color: rgba(246, 243, 238, 0.82);
  font-size:14.5px;
}

/* Inhalt */

.bp-content {
  grid-row: 5;
  position: relative;
  min-height: 0;
  overflow: hidden;
  background: #fff;
}

.bp-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: #fff;
  transform-origin: 0 0; /* Zoom 50–200 % skaliert von oben links. */
  /* visibility statt display: display:none setzt in Chromium die Scroll-
     position eingebetteter Seiten zurueck; visibility erhaelt sie und
     verhindert Flackern beim Tab-Wechsel. */
  visibility: hidden;
  pointer-events: none;
}

.bp-frame.is-active {
  visibility: visible;
  pointer-events: auto;
}

.bp-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 6px;
  justify-items: center;
  background: #101113;
  color: rgba(246, 243, 238, 0.82);
  text-align: center;
}

.bp-empty-mark svg {
  width: 44px;
  height: 44px;
  fill: none;
  stroke: rgba(246, 243, 238, 0.45);
  stroke-width: 1.4;
}

.bp-empty strong {
  font-size:17.5px;
}

.bp-empty span {
  color: rgba(246, 243, 238, 0.5);
  font-size:15px;
}

.bp-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  gap: 12px;
  padding: 24px;
  background: #101113;
  color: rgba(246, 243, 238, 0.88);
  text-align: center;
}

.bp-fallback strong {
  font-size:21px;
}

.bp-fallback span {
  max-width: 420px;
  color: rgba(246, 243, 238, 0.6);
  font-size:15.5px;
  line-height: 1.6;
}

.bp-fallback a {
  justify-self: center;
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(159, 231, 212, 0.42);
  border-radius: 8px;
  background: rgba(159, 231, 212, 0.12);
  color: #f6f3ee;
  font-size:15.5px;
  font-weight: 700;
  text-decoration: none;
}

@media (max-width: 680px) {
  .browser-pane {
    --bp-row-height: 26px;
    --bp-control-size: 22px;
    --bp-control-gap: 3px;
  }

  .bp-tabstrip {
    padding: 0 5px;
  }

  .bp-tab-count {
    padding: 0 5px;
  }

  .bp-toolbar {
    padding: 2px 5px;
  }

  body.browser-pane-open .browser-panel {
    width: calc(100vw - 12px);
  }
}
.bp-tab-spacer {
  flex: none;
  width: var(--bp-control-size);
  height: var(--bp-control-size);
}

/* ---- view-chrome.css ---- */
/* view-chrome.css — Navigation fuer App-Views: Zurueck-Pfeil (ganz oben links)
   und Schliessen-X (ganz oben rechts). Ohne Hintergrund, transparent, schmal,
   leicht fett; besetzt keinen Platz. Nur auf Views ausser #start; die
   Startseite bleibt unveraendert (Design-Lock).
   Hinweis: !important ist hier bewusst gesetzt, weil generische Button-Regeln
   der Premium-Flaechen (app-surfaces/settings-surface) sonst Hintergrund,
   Rahmen, Hoehe und SVG-Groesse ueberschreiben. */

.view.has-view-chrome {
  position: relative;
  padding-top: 52px;
}

.view-chrome {
  position: absolute;
  top: 8px;
  /* In den Ecken sitzen die FIXEN Knoepfe der App (Menue links, Browser-Panel
     rechts, styles.css .glass-icon). Die Leiste muss neben ihnen beginnen,
     nicht unter ihnen: mit 14px lag das Schliessen-X exakt auf dem
     Browser-Knopf (Betreiber-Befund 2026-08-13, gemessen 34px Ueberlappung
     bei 375px). 48px = 28px Knopf + Luft; die Handy-Werte stehen unten. */
  left: calc(env(safe-area-inset-left) + 48px);
  right: calc(env(safe-area-inset-right) + 48px);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.view .view-chrome button,
.premium-view .view-chrome button {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px !important;
  height: 32px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 8px;
  background: transparent !important;
  box-shadow: none !important;
  color: #4a4a43;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s ease;
}

.view .view-chrome button:hover,
.premium-view .view-chrome button:hover {
  opacity: 1;
  background: transparent !important;
}

.view .view-chrome button:focus-visible,
.premium-view .view-chrome button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.view .view-chrome button svg,
.premium-view .view-chrome button svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  flex: none !important;
}

/* Dunkle Premium-Views: helle Icons ueber die vorhandenen Premium-Variablen. */
.premium-view .view-chrome button {
  color: var(--premium-text, #f8f6f2);
}

@media (max-width: 640px) {
  .view.has-view-chrome {
    padding-top: 46px;
  }

  .view-chrome {
    top: 6px;
    /* Auf schmalen Schirmen sind die Ecken-Knoepfe 44px (Touch-Regel unten):
       52px = 44px Knopf + Luft. Gemessen bei 375px: X endet bei 323px, der
       Browser-Knopf beginnt bei 331px — 8px frei statt 34px Ueberdeckung. */
    left: calc(env(safe-area-inset-left) + 52px);
    right: calc(env(safe-area-inset-right) + 52px);
  }
}

/* Touch-Ziel auf schmalen Schirmen (2026-08-09). Gemessen bei 375 px in ALLEN
   15 Ansichten: Zurueck und Schliessen waren 32x32 — die kleinsten Ziele der
   App. Das Symbol bleibt 20 px, nur die Flaeche waechst.

   Das !important ist nicht Zierde: die Regel oben setzt width/height selbst mit
   !important (um die Knopf-Grundregeln der Ansichten zu schlagen), und dagegen
   kommt eine normale Deklaration nicht an. */
@media (max-width: 600px) {
  .view .view-chrome button,
  .premium-view .view-chrome button {
    width: 44px !important;
    height: 44px !important;
  }

  /* Die Leiste liegt absolut ueber dem Inhalt. Wird sie 12 px hoeher, muss der
     Inhalt entsprechend tiefer anfangen, sonst deckt der Knopf die Ueberschrift. */
  .view.has-view-chrome,
  .premium-view.has-view-chrome {
    padding-top: 58px;
  }
}

/* Grundposition des Maus-Knopfs. Stand bis 2026-08-09 als style="right: 36px"
   im HTML — inline schlaegt jede Media-Query, die Handy-Regel unten waere
   wirkungslos geblieben. */
#mausButton {
  right: calc(env(safe-area-inset-right) + 36px);
}

/* Die folgenden zwei Bloecke standen bis 2026-08-09 in styles.css und sind
   hierher gezogen, als die Ratchet-Grenze dort riss. Sie gehoeren ohnehin
   eher hierher: es ist die Groesse der App-Chrome, nicht des Grundgeruests.
   Die Kaskade aendert sich dadurch nicht — view-chrome.css liegt im selben
   Buendel NACH styles.css, und die Selektoren tragen ihr Gewicht selbst. */

/* Touch-Ziele auf schmalen Schirmen (2026-08-09).
   Live gemessen bei 375 px mit echter Geraete-Emulation: die vier Icons der
   Kopfleiste waren 28x28, die fuenf Knoepfe der Eingabezeile 30x38 bzw. 34x38 —
   deutlich unter den 44 px, die Apple und Google fuer Touch nennen. Auf dem
   Desktop bleibt alles wie es war, die Regeln greifen nur unterhalb 600 px.

   Die Doppelklasse gibt den Regeln Gewicht 0,2,0: app-surfaces.css bringt
   `.premium-view button` (0,1,1) mit und setzt mobil width: 100%. Auf der
   Startseite greift das zwar nicht, aber die Knoepfe wandern erfahrungsgemaess. */
@media (max-width: 600px) {
  .glass-icon.glass-icon {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  /* Der Maus-Knopf steht links neben dem Browser-Knopf. Mit 28 px genuegten
     36 px Abstand; bei 44 px wuerden sich beide ueberlappen. */
  #mausButton {
    right: calc(env(safe-area-inset-right) + 44px);
  }

  /* Eingabezeile: Hoehe fuer alle Knoepfe der Reihe (auch den Modell-Chip,
     der sonst als einziger 38 px hoch bliebe), Breite nur fuer die Symbole —
     der Chip traegt Text und muss mitwachsen duerfen. */
  .prompt-actions .ghost-button.ghost-button,
  .prompt-actions .send-button.send-button {
    height: 44px;
    min-height: 44px;
  }

  .prompt-actions .ghost-button.icon-button,
  .prompt-actions .send-button.send-button {
    width: 44px;
  }

  /* Gemessen 2026-08-09: mit 44er Knoepfen braucht die Reihe 382 px bei 375 px
     Fenster. Sie wird dabei NICHT gequetscht, sondern zieht die ganze Spalte
     hinaus — `.home-feed` ist ein Grid-Item und hat damit min-width: auto,
     waechst also mit seinem breitesten Kind (dieselbe Ursache wie bei der
     Chip-Leiste des Verlaufs, sw v252). Statt am Container zu drehen, wird
     hier der Platz beschafft: engere Abstaende, schmaleres Polster. Gemessen
     bleiben danach ueber 20 px Luft. */
  .prompt-actions {
    gap: 4px;
    padding: 0 6px;
  }
}

/* Linkes Menue und Browser-Panel: 44 px hohe Eintraege auf schmalen Schirmen
   (2026-08-09). Gemessen waren 178x36 bzw. 179x36 — breit genug zum Treffen,
   es fehlte nur Hoehe. Der Anker `.sidebar` gibt Gewicht 0,2,0 und schlaegt
   damit sowohl `.nav-button` (0,1,0) als auch `.premium-view button` (0,1,1). */
@media (max-width: 600px) {
  .sidebar .nav-button,
  .browser-panel-nav button {
    min-height: 44px;
  }
}

/* Aussenkante der App: ein zarter Lichtsaum in der Logo-Farbe #02fdfd —
   dasselbe Cyan-Light-Leak wie die Anmeldekarte (public/auth/auth.css,
   .auth-card), nur schwaecher: dort umrandet es eine kleine Karte, hier die
   ganze Flaeche. Die erste Fassung (0.14/0.10/0.06) war dem Betreiber am
   2026-08-13 live zu schwach — jetzt gut die Haelfte der Anmeldekarte.
   Reine Deko, deshalb fixiert, ohne Mausfang
   und ohne eigene Groesse — die Kante folgt immer dem Fenster. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(2, 253, 253, 0.3),
    inset 0 0 26px rgba(2, 253, 253, 0.22),
    inset 0 0 72px rgba(45, 212, 191, 0.13);
}

/* ===== Schmale Spur: was styles.css nicht mehr aufnehmen darf =====
   styles.css steht an seiner Ratchet-Baseline (1589 Zeilen, siehe
   scripts/check-guidelines.mjs) — neue Regeln der App-Chrome gehoeren hierher.
   Die Werte in styles.css sind nur geaendert, nicht vermehrt worden. */

/* Kraeftigerer Strich in der Spur (Betreiber 2026-08-13, "Icons fetter"):
   bei 16 px traegt die Strichstaerke die Lesbarkeit, nicht die Flaeche. */
.sidebar.is-compact .button-icon svg,
.browser-panel.is-compact .browser-panel-nav button svg {
  stroke-width: 2.4;
}

.sidebar.is-compact .nav-button,
.sidebar.is-compact .profile-dock,
.browser-panel.is-compact .browser-panel-nav button {
  border-radius: 12px;
}

/* Die Mitte weicht den Seiten aus (Betreiber 2026-08-13: "Mittlere Schrift
   soll sich automatisch anpassen, nicht unter Feldern bleiben"). Bis dahin
   galt margin-left: 0 — die Sidebar ist position:fixed und lag als Overlay
   ueber dem Inhalt, sodass Text und Eingabezeile unter der Spur verschwanden.
   Schwelle 681 px — dieselbe Grenze, an der styles.css schon die rechte Seite
   schiebt. Der erste Versuch stand bei 921 px und griff auf dem Bildschirm des
   Betreibers (915 px Fensterbreite) genau NICHT. Darunter bleibt die Sidebar
   die Schublade mit Abdunkeln (siehe panel-backdrop.css). */
@media (min-width: 681px) {
  body.left-panel-open .workspace {
    margin-left: min(var(--left-panel-width), calc(100vw - 120px));
  }
}

/* Das Maus-Zeichen gehoert IN die rechte Spur, nicht daneben (Betreiber
   2026-08-13: "Maus bleibt draussen ... soll auch automatisch in rechte Seite
   reingehen"). Grundstellung ist 36 px links vom Panel-Knopf; bei offenem
   Panel rueckt es in dessen Spalte, eine Zeile darunter. */
body:has(#browserPanel.is-open) #mausButton {
  top: calc(env(safe-area-inset-top) + 32px);
  right: env(safe-area-inset-right);
}

/* In der schmalen rechten Spur sitzt das Maus-Zeichen in der obersten Zeile.
   Die Liste darunter muss tiefer beginnen, sonst liegt das erste Zeichen
   (Browser) unter dem Zeiger — beim ersten Bau genau so passiert. */
.browser-panel.is-compact {
  padding-top: 64px;
}

/* Eine SPUR ist Rahmen, eine SCHUBLADE ist Overlay (2026-08-13, Nacht-Modus).
   Auf dem Handy blieb die Mitte auch bei schmaler Spur unter der Leiste: die
   680-px-Regel in styles.css setzt beide Raender auf 0, weil sie fuer die
   breite Schublade mit Abdunkeln gedacht ist. Eine 28-px-Spur ist aber keine
   Schublade — sie steht dauerhaft und darf den Text nicht verdecken. Darum
   weicht die Mitte IMMER aus, wenn die Seite im Spur-Zustand ist; die
   Schublade bleibt Overlay wie bisher. */
body.left-panel-open:has(.sidebar.is-compact) .workspace {
  margin-left: min(var(--left-panel-width), calc(100vw - 120px));
}

body.right-panel-open:has(#browserPanel.is-compact) .workspace {
  margin-right: min(var(--right-panel-width), calc(100vw - 120px));
}

/* Auf dem Handy schiebt nur EINE Spur (2026-08-13, gemessen bei 375 px):
   die Eingabereihe braucht dort 344 px. Mit einer Spur bleiben 347 px — es
   passt. Mit beiden Spuren blieben 319 px, und die Reihe zog die Spalte 25 px
   aus dem Bild (dieselbe Ursache wie 2026-08-09: `.home-feed` ist Grid-Item
   mit min-width: auto). Die linke Spur ist die Hauptnavigation und schiebt;
   die rechte bleibt auf schmalen Schirmen ein Overlay. */
@media (max-width: 600px) {
  body.right-panel-open:has(#browserPanel.is-compact) .workspace {
    margin-right: 0;
  }
}

/* ---- profile-dock.css ---- */
/* smejj.com — Profil-Dock (linke Navigation unten): Profilbild + Name + Zahnrad.
   Eigene Datei, weil public/styles.css per Ratchet-Baseline nicht wachsen darf.
   Basisregeln (.profile-dock, .profile-avatar) stehen weiterhin in styles.css;
   hier folgen nur die Ergaenzungen fuer Bild, Name und Zahnrad-Spalte. */

.profile-dock {
  align-items: center;
}

/* flex 0 1 auto (nicht 1 1 auto): Der Button nimmt nur die Breite, die er
   braucht — so steht das Zahnrad direkt neben dem Namen statt am rechten Rand
   (Freigabe 2026-07-17: "soll bisschen naeher kommen"). Bei langen Namen
   schrumpft der Button und der Name wird mit Ellipse gekuerzt. */
.profile-dock-button {
  display: flex;
  flex: 0 1 auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: rgba(246, 243, 238, 0.78);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 140ms ease, color 140ms ease;
}

.profile-dock-button:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #f6f3ee;
}

.profile-dock-button:focus-visible {
  outline: 2px solid #00ffef;
  outline-offset: 2px;
}

.profile-dock-name {
  min-width: 0;
  overflow: hidden;
  font-size:16.5px;
  line-height: 1.16;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-dock .profile-avatar {
  flex: 0 0 auto;
}

/* Mit Bild: Verlauf und Initiale weichen dem Foto. */
.profile-avatar.has-picture {
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(246, 243, 238, 0.22);
  background: none;
}

.profile-dock-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
}

/* Zahnrad: nur Icon (Beschriftung bleibt fuer Screenreader im DOM). */
.profile-dock-gear {
  flex: 0 0 auto;
  justify-content: center;
  width: 34px;
  min-width: 34px;
  padding: 0;
}

.profile-dock-gear .nav-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Kompakte Sidebar: Avatar ueber Zahnrad, keine Textspalten.
   styles.css setzt .sidebar.is-compact .profile-dock auf height:28px + overflow:hidden
   (Stand vor dem Dock: eine einzige Zeile). Mit zwei gestapelten Zeilen wuerde das
   Zahnrad abgeschnitten — deshalb hier Hoehe freigeben. */
.sidebar.is-compact .profile-dock {
  flex-direction: column;
  gap: 0;
  height: auto;
  min-height: 0;
  overflow: visible;
}

.sidebar.is-compact .profile-dock .profile-avatar {
  width: 20px;
  height: 20px;
  font-size:13.5px;
}

.sidebar.is-compact .profile-dock-name {
  display: none;
}

.sidebar.is-compact .profile-dock-button {
  justify-content: center;
  width: 100%;
  padding: 0;
}

.sidebar.is-compact .profile-dock-gear {
  width: 100%;
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .profile-dock-button {
    transition: none;
  }
}

/* Avatar-Menue: Ausloggen einen Klick vom Avatar entfernt (Freigabe 2026-07-17).
   Oeffnet nach OBEN, weil das Dock am unteren Rand der Sidebar sitzt. */
.profile-dock {
  position: relative;
}

/* position: fixed + Anhaengen an <body> (siehe profile-dock-menu.js): Die Sidebar
   hat overflow:hidden UND transform — beides wuerde das Menue abschneiden.
   Die Koordinaten setzt das Modul beim Oeffnen. */
.profile-dock-menu {
  position: fixed;
  z-index: 80; /* ueber der Sidebar (z-index 70), sonst liegt das Menue dahinter */
  display: flex;
  flex-direction: column;
  gap: 2px;
  /* Feste Breite: Das Menue haengt am <body>, "100%" waere hier die Fensterbreite
     (live gemessen: 885px statt 208px). */
  width: 232px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  background: #1b1c1f;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
}

.profile-dock-menu[hidden] {
  display: none;
}

.profile-dock-menu-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 4px;
}

.profile-dock-menu-head strong {
  overflow: hidden;
  font-size:15.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-dock-menu-head span {
  overflow: hidden;
  color: rgba(246, 243, 238, 0.6);
  font-size:14.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-dock-menu [role="menuitem"] {
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(246, 243, 238, 0.86);
  cursor: pointer;
  font: inherit;
  font-size:15.5px;
  text-align: left;
}

.profile-dock-menu [role="menuitem"]:hover,
.profile-dock-menu [role="menuitem"]:focus-visible {
  background: rgba(255, 255, 255, 0.09);
  color: #f6f3ee;
  outline: none;
}

/* Ausloggen bleibt bewusst unauffaellig rot: erkennbar, aber kein Alarm. */
.profile-dock-menu-logout {
  margin-top: 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 0 0 8px 8px !important;
  color: #ff9d9d !important;
}


/* Profil-Chip (93x42) und Zahnrad (34x36) waren die letzten beiden Ziele der
   unteren Leiste unter 44 px. Beim Zahnrad fehlte auch Breite: es traegt nur
   ein Symbol und wuchs deshalb nicht mit. Gemessen 2026-08-09 bei 375 px. */
@media (max-width: 600px) {
  .profile-dock .profile-dock-button {
    min-height: 44px;
  }

  .profile-dock .profile-dock-gear {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ---- chat-markdown.css ---- */
/* smejj.com — Darstellung der gerenderten Chat-Antworten (public/chat-markdown.js).
   Eigene Datei, weil public/styles.css per Ratchet-Baseline nicht wachsen darf.
   Bewusst zurueckhaltend: Das Antwort-Design bleibt wie bisher, nur Auszeichnung
   wird sichtbar (fett/kursiv/Code) statt als Sternchen. */

.entry.assistant p {
  margin: 0 0 10px;
}

.entry.assistant p:last-child {
  margin-bottom: 0;
}

.entry.assistant strong {
  font-weight: 700;
}

.entry.assistant .chat-list {
  margin: 0 0 10px;
  padding-left: 20px;
}

.entry.assistant .chat-list li {
  margin: 2px 0;
}

/* Links aus chat-markdown.js (Betreiber-Auftrag 2026-08-03: klickbar).
   currentColor + Unterstrich: bleibt in hell und dunkel lesbar, kein neuer Farbwert. */
.entry.assistant .chat-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.entry.assistant .chat-link:hover {
  opacity: 0.8;
}

/* Tabellen aus chat-markdown.js (Befund 2026-08-13: sieben echte Angebote
   standen als "| # | Lage | …" im Chat, weil der Renderer keine Tabellen
   kannte). Ohne diese Regeln stehen die Spalten zwar richtig, kleben aber
   aneinander — "225 sq ft700 $" war live lesbar.

   Bewusst ohne neue Farbwerte: currentColor mit niedriger Deckkraft traegt in
   hell UND dunkel, genau wie beim Link darueber. */
.entry.assistant .chat-table-wrap {
  /* Eine breite Tabelle darf nie den ganzen Chat seitlich verschieben. */
  overflow-x: auto;
  margin: 10px 0;
  -webkit-overflow-scrolling: touch;
}

.entry.assistant .chat-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95em;
}

.entry.assistant .chat-table th,
.entry.assistant .chat-table td {
  padding: 7px 12px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(127, 127, 127, 0.25);
}

.entry.assistant .chat-table th {
  font-weight: 600;
  white-space: nowrap;
  border-bottom-width: 2px;
}

/* Zebra hilft beim Wandern entlang einer langen Zeile — sechs Spalten mit
   Adresse, Flaeche und Preis sind sonst schwer zu verfolgen. */
.entry.assistant .chat-table tbody tr:nth-child(even) {
  background: rgba(127, 127, 127, 0.06);
}

.entry.assistant .chat-table tbody tr:last-child td {
  border-bottom: none;
}

/* Schimmernder Bild-Platzhalter, waehrend der Bild-Maler arbeitet
   (chat-stream.js legt ihn an und entfernt ihn bei "fertig"). Bewusst in
   Bildgroesse: der Nutzer sieht, WO sein Bild entsteht — statt Stapel-Zeilen. */
.entry.assistant .chat-bild-platzhalter {
  width: min(100%, 512px);
  aspect-ratio: 1 / 1;
  margin: 8px 0 4px;
  border-radius: 12px;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0.05) 30%, rgba(255, 255, 255, 0.14) 50%, rgba(255, 255, 255, 0.05) 70%);
  background-size: 200% 100%;
  animation: chat-bild-schimmer 1.6s linear infinite;
}

@keyframes chat-bild-schimmer {
  to { background-position: -200% 0; }
}

/* Bewegung nur, wenn der Nutzer sie nicht abbestellt hat. */
@media (prefers-reduced-motion: reduce) {
  .entry.assistant .chat-bild-platzhalter { animation: none; }
}

/* Erzeugte Bilder aus chat-markdown.js (Bilder-Zeichnen 2026-08-12).
   Nur data:-URLs der eigenen Bruecke; volle Breite bis 512 px, damit ein
   1024er-Bild die Chatspalte nicht sprengt. */
.entry.assistant .chat-image {
  display: block;
  max-width: min(100%, 512px);
  height: auto;
  margin: 4px 0 10px;
  border-radius: 12px;
}

/* Erzeugte Videos aus chat-markdown.js (Video-Erstellung 2026-08-12).
   Ersetzt ![video](URL) durch einen interaktiven HTML5-Player. */
.entry.assistant .chat-video {
  display: block;
  width: 100%;
  max-width: min(100%, 512px);
  height: auto;
  margin: 6px 0 12px;
  border-radius: 12px;
  background: #000000;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.entry.assistant code {
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.09);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
}

.entry.assistant .chat-code {
  margin: 0 0 10px;
  padding: 10px 12px;
  overflow-x: auto;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

.entry.assistant .chat-code code {
  padding: 0;
  background: none;
  white-space: pre;
}

/* Kopieren-Knopf am Codeblock (public/chat-code-copy.js).
   Der Wrapper traegt die Positionierung, damit das <pre> seinen
   horizontalen Ueberlauf behaelt und der Knopf beim Scrollen stehen bleibt. */
.chat-code-wrap {
  position: relative;
  margin: 0 0 10px;
}

/* Spezifitaet mit `.entry.assistant` davor, sonst gewinnt die Grundregel
   `.entry.assistant .chat-code { padding: 10px 12px }` weiter oben und der Knopf
   legt sich ueber die erste Codezeile. Live gemessen 2026-07-29: 17 px
   Ueberlappung, sichtbar erst bei langen Zeilen. */
.entry.assistant .chat-code-wrap .chat-code {
  margin: 0;
  /* Platz fuer den Knopf. Der Wert haengt an seiner Hoehe und wird bei
     praezisem Zeigegeraet unten mitverkleinert. */
  padding-top: 52px;
}

/* Zwei Regeln aus dem Projektstandard, beide keine Kosmetik:

   1. NICHT an :hover haengen. Eine reine Hover-Bedienung existiert fuer
      Tastatur-, Touch- und Screenreader-Nutzer nicht (WCAG 2.1.1). Der Knopf
      ist immer da, nur zurueckhaltend gefaerbt.
   2. styles.css setzt projektweit `button { min-height: 42px }` als Touch-Ziel.
      Das bleibt die Voreinstellung — nur wo ein praezises Zeigegeraet vorhanden
      ist, wird der Knopf kompakt. Browser ohne pointer-Abfrage behalten das
      groessere, sichere Ziel. Gemessen 2026-07-29 auf 375 px: ohne diese Regel
      mass der Knopf 31x23 px. */
.chat-code-copy {
  position: absolute;
  top: 5px;
  right: 6px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 42px;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 7px;
  background: rgba(20, 20, 20, 0.55);
  color: rgba(246, 243, 238, 0.62);
  font: inherit;
  font-size:14.5px;
  line-height: 1.55;
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

@media (pointer: fine) {
  .entry.assistant .chat-code-wrap .chat-code {
    padding-top: 37px;
  }

  .chat-code-copy {
    min-width: 0;
    min-height: 26px;
    padding: 0 8px;
    font-size:13.5px;
  }
}

/* Beschriftung aus CSS, NICHT als Textknoten: chat-store.js speichert
   entry.textContent und chat-history-context.js baut daraus den Modellkontext —
   ein geschriebenes "Kopieren" waere mitten im Code gelandet. */
.chat-code-copy::after {
  content: "Kopieren";
}

.chat-code-copy.is-done::after {
  content: "Kopiert";
}

.chat-code-wrap:hover .chat-code-copy,
.chat-code-wrap:focus-within .chat-code-copy {
  color: rgba(246, 243, 238, 0.85);
}

.chat-code-copy:hover,
.chat-code-copy:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.1);
  color: #f6f3ee;
}

.chat-code-copy:focus-visible {
  outline: 2px solid var(--menu-icon-active-color, #00ffef);
  outline-offset: 1px;
}

.chat-code-copy.is-done {
  color: #7fe0a8;
}

.chat-code-copy-icon {
  display: inline-flex;
}

.chat-code-copy svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Schmale Geraete: nur das Symbol. Mit Beschriftung frisst der Knopf sonst die
   halbe Breite des Codeblocks. Der Name bleibt ueber aria-label erhalten. */
@media (max-width: 430px) {
  .chat-code-copy::after {
    content: none;
  }
}

.entry.assistant[data-thinking="true"] {
  color: rgba(255, 255, 255, 0.65);
  font-style: italic;
  padding: 6px 10px;
}

.thinking-dots .dot {
  animation: thinkingDot 1.4s infinite ease-in-out both;
  display: inline-block;
  margin-left: 1px;
}

.thinking-dots .dot:nth-child(1) { animation-delay: 0s; }
.thinking-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.thinking-dots .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes thinkingDot {
  0%, 80%, 100% { opacity: 0.2; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.2); }
}

/* --- Arbeitsschritte waehrend der Antwort (Befund 2026-08-04) ------------
   Der Nutzer sah sekundenlang nichts, waehrend im Hintergrund gesucht wurde,
   und hielt die Antwort fuer beendet. Diese Liste macht die Arbeit sichtbar.
   Bewusst zurueckhaltend: sie ist Beiwerk, nicht die Antwort. */
.chat-schritte {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.86em;
  opacity: 0.78;
  padding-block: 2px;
}

.chat-schritt {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.6;
  /* Lange Suchbegriffe duerfen die Zeile nicht sprengen. */
  overflow-wrap: anywhere;
}

.chat-schritt-stand {
  white-space: nowrap;
  opacity: 0.72;
}

/* Ein laufender Schritt pulsiert leicht — der Unterschied zu "fertig" muss
   auch ohne Farbe erkennbar sein (der Haken traegt die Aussage). */
.chat-schritt[data-zustand="laeuft"] .chat-schritt-stand {
  animation: chat-schritt-puls 1.4s ease-in-out infinite;
}

.chat-schritt[data-zustand="fertig"] {
  opacity: 0.9;
}

@keyframes chat-schritt-puls {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

/* Bewegung nur, wenn der Nutzer sie nicht abbestellt hat. */
@media (prefers-reduced-motion: reduce) {
  .chat-schritt[data-zustand="laeuft"] .chat-schritt-stand { animation: none; }
}

/* Zitate und Hinweiskaesten (Befund 2026-08-13).
   Der Renderer kannte "> Text" nicht — im Chat stand woertlich "&gt; Text",
   bei JEDER Modellantwort mit Zitat und in der Video-Statusmeldung. Farben
   kommen aus currentColor, damit heller und dunkler Modus ohne zweite Regel
   funktionieren (Lehre: ::before-Unterbau traegt nie). */
.entry.assistant .chat-zitat {
  margin: 10px 0;
  padding: 2px 0 2px 14px;
  border-left: 3px solid rgba(127, 127, 127, 0.45);
  opacity: 0.85;
  font-style: italic;
}

.entry.assistant .chat-hinweis {
  margin: 12px 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(127, 127, 127, 0.3);
  border-left-width: 3px;
  background: rgba(127, 127, 127, 0.08);
}

.entry.assistant .chat-hinweis-titel {
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
  opacity: 0.9;
}

/* Die Art faerbt nur den linken Rand und den Titel — der Textkoerper bleibt
   in der Vorlesefarbe, damit er auf beiden Hintergruenden lesbar ist. */
.entry.assistant .chat-hinweis[data-art="note"] { border-left-color: #4a90d9; }
.entry.assistant .chat-hinweis[data-art="note"] .chat-hinweis-titel { color: #4a90d9; }
.entry.assistant .chat-hinweis[data-art="tip"] { border-left-color: #3fa66a; }
.entry.assistant .chat-hinweis[data-art="tip"] .chat-hinweis-titel { color: #3fa66a; }
.entry.assistant .chat-hinweis[data-art="important"] { border-left-color: #8b6bd9; }
.entry.assistant .chat-hinweis[data-art="important"] .chat-hinweis-titel { color: #8b6bd9; }
.entry.assistant .chat-hinweis[data-art="warning"] { border-left-color: #d99b3f; }
.entry.assistant .chat-hinweis[data-art="warning"] .chat-hinweis-titel { color: #d99b3f; }
.entry.assistant .chat-hinweis[data-art="caution"] { border-left-color: #d9614a; }
.entry.assistant .chat-hinweis[data-art="caution"] .chat-hinweis-titel { color: #d9614a; }

/* ---- chat-actions.css ---- */
/* smejj.com — Aktionen pro Chat-Nachricht (2026-07-28).
 *
 * Wird ueber scripts/build/bundle-start-styles.mjs in start-styles.css
 * gebuendelt — kein zusaetzliches render-blockierendes Stylesheet
 * (Performance-Lock: die Startseite laedt genau EIN Stylesheet).
 *
 * Kernentscheidung gegenueber ChatGPT, Gemini und Claude: die Leiste haengt
 * NICHT an :hover. Sie ist immer da, nur zurueckhaltend gefaerbt, und wird bei
 * :hover UND :focus-within gleichermassen deutlich. Eine reine Hover-Leiste
 * existiert fuer Tastatur-, Touch- und Screenreader-Nutzer nicht (WCAG 2.1.1).
 * Gefaerbt wird ueber color, nie ueber opacity — opacity auf Text driftet je
 * Untergrund und trifft auch den Fokusring.
 */

.msg-actions {
  position: relative;
  display: flex;
  align-items: center;
  /* Umbrechen statt quetschen. Gemessen 2026-07-28 auf 375 px mit Touch-Maßen:
     fuenf Aktionen, zwei Versionspfeile und das Label "Version 2 von 3" ergeben
     rund 366 px und Flexbox schrumpfte die Knoepfe von 42 auf 37 px — unter das
     Touch-Ziel des Projekts. Jetzt wandert der Versionswaehler in eine zweite
     Zeile und die Knoepfe behalten ihre Groesse. */
  flex-wrap: wrap;
  gap: 2px;
  margin: -3px 0 2px;
  max-width: min(980px, 100%);
}

.msg-actions.is-user {
  align-self: flex-end;
  margin-left: auto;
  justify-content: flex-end;
}

/* Groesse: styles.css setzt projektweit `button { min-height: 42px }` als
   Touch-Ziel. Das bleibt die Voreinstellung — nur wo ein praezises Zeigegeraet
   vorhanden ist, wird die Leiste kompakt (28 px, wie ChatGPT auf dem Desktop).
   Browser ohne pointer-Abfrage behalten das groessere, sichere Ziel. */
.msg-act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Nie schrumpfen: ein Touch-Ziel, das sich der Zeile anpasst, ist keins. */
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: rgba(246, 243, 238, 0.52);
  cursor: pointer;
  transition: color 120ms ease, background-color 120ms ease;
}

.msg-actions:hover .msg-act,
.msg-actions:focus-within .msg-act {
  color: rgba(246, 243, 238, 0.78);
}

.msg-act:hover,
.msg-act:focus-visible {
  background: rgba(255, 255, 255, 0.08);
  color: #f6f3ee;
}

.msg-act:focus-visible {
  outline: 2px solid var(--menu-icon-active-color, #00ffef);
  outline-offset: 1px;
}

.msg-act svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.msg-act.is-active {
  color: var(--menu-icon-active-color, #00ffef);
}

.msg-act.is-done {
  color: #7fe0a8;
}

.msg-act:disabled {
  color: rgba(246, 243, 238, 0.24);
  cursor: default;
}

.msg-actions:hover .msg-act:disabled,
.msg-actions:focus-within .msg-act:disabled {
  color: rgba(246, 243, 238, 0.24);
}

/* Versionswaehler: lesbares Label statt zwei namenloser Pfeile. */
.msg-versions {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: 6px;
}

.msg-version-step {
  width: 34px;
  height: 34px;
  min-height: 34px;
}

.msg-version-step svg {
  width: 15px;
  height: 15px;
}

@media (pointer: fine) {
  .msg-act {
    width: 28px;
    height: 28px;
    min-height: 28px;
  }

  .msg-version-step {
    width: 22px;
    height: 22px;
    min-height: 22px;
  }
}

/* Schmale Schirme: 44x44 statt 42x42 (Apple HIG und Material nennen 44 bzw.
   48 dp als Untergrund; 42 war knapp darunter). Gemessen 2026-08-09 live bei
   375 px mit Geraete-Emulation: alle Aktionsknoepfe lagen bei 42x42.

   Zwei Fallen, die den Selektor erklaeren:
   1. app-surfaces.css setzt unterhalb 760 px `.premium-view button { width:
      100% }` (Spezifitaet 0,1,1). Eine blosse `.msg-act`-Klassenregel (0,1,0)
      verliert dagegen. Darum ein ID-Anker plus eine doppelt gewichtete
      Klassenvariante fuer Leisten ausserhalb von #startLog.
   2. Der Desktop soll unveraendert bleiben. Ein schmales Fenster AM RECHNER
      hat aber pointer: fine — ohne die zweite Abfrage wuerde die neue, hoeher
      gewichtete Regel die kompakten 28 px ueberschreiben. Deshalb wird der
      Maus-Fall darunter ausdruecklich wiederhergestellt.
   Die Versionspfeile gehen mit (waren 34 px): sie stehen in derselben Leiste
   und werden mit demselben Daumen getroffen. */
@media (max-width: 600px) {
  #startLog .msg-act,
  .msg-actions .msg-act.msg-act {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }
}

@media (max-width: 600px) and (pointer: fine) {
  #startLog .msg-act,
  .msg-actions .msg-act.msg-act {
    width: 28px;
    height: 28px;
    min-height: 28px;
  }

  /* Die Pfeile sind mit Maus kleiner als die Aktionen. Der ID-Anker muss hier
     doppelt gewichtet sein: `#startLog .msg-act` (1,1,0) wuerde eine blosse
     Klassenregel fuer die Pfeile sonst schlagen, obwohl sie spaeter steht. */
  #startLog .msg-version-step.msg-version-step,
  .msg-actions .msg-version-step.msg-version-step.msg-version-step {
    width: 22px;
    height: 22px;
    min-height: 22px;
  }
}

.msg-version-label {
  font-size:14.5px;
  line-height: 1;
  white-space: nowrap;
  color: rgba(246, 243, 238, 0.62);
}

/* Ueberlaufmenue.
   Liegt am BODY und ist am Viewport ausgerichtet, nicht in der Leiste:
   #startLog hat overflow: auto und schnitt das Menue an seiner Kante ab (Live-
   Befund 2026-07-28 — bei der ersten Antwort passte es weder darunter noch
   darueber). Position setzt chat-actions.js beim Oeffnen. */
.msg-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  min-width: 236px;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  background: #1b1c1f;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.46);
}

.msg-menu-head {
  margin: 0;
  padding: 6px 10px 8px;
  font-size:14.5px;
  line-height: 1.3;
  color: rgba(246, 243, 238, 0.52);
}

.msg-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: rgba(246, 243, 238, 0.92);
  font: inherit;
  font-size:15.5px;
  text-align: left;
  cursor: pointer;
}

.msg-menu-item:hover,
.msg-menu-item:focus-visible {
  background: rgba(255, 255, 255, 0.09);
}

.msg-menu-item:focus-visible {
  outline: 2px solid var(--menu-icon-active-color, #00ffef);
  outline-offset: -2px;
}

.msg-menu-item.is-danger {
  color: #ff9c90;
}

.msg-menu-icon {
  display: inline-flex;
  color: rgba(246, 243, 238, 0.62);
}

.msg-menu-item.is-danger .msg-menu-icon {
  color: #ff9c90;
}

.msg-menu-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.msg-menu-line {
  height: 1px;
  margin: 5px 8px;
  background: rgba(255, 255, 255, 0.12);
}

/* Bearbeiten: der Editor liegt NEBEN der Nachricht, nicht darin — sonst
   landete der Eingabe-Zustand im gespeicherten Verlauf. */
.entry.is-editing {
  display: none;
}

.msg-editor {
  align-self: flex-end;
  width: min(980px, 100%);
  margin-left: auto;
  padding: 10px 12px;
  border: 1px solid rgba(94, 173, 235, 0.55);
  border-radius: 10px;
  background: rgba(94, 173, 235, 0.12);
}

.msg-editor-field {
  display: block;
  width: 100%;
  min-height: 54px;
  max-height: 260px;
  padding: 6px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  color: #f6f3ee;
  font: inherit;
  line-height: 1.65;
  resize: vertical;
}

.msg-editor-field:focus-visible {
  outline: 2px solid var(--menu-icon-active-color, #00ffef);
  outline-offset: 1px;
}

.msg-editor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.msg-editor-note {
  font-size:14.5px;
  color: rgba(246, 243, 238, 0.64);
}

.msg-editor-buttons {
  display: inline-flex;
  gap: 6px;
}

.msg-editor-button {
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 7px;
  background: transparent;
  color: rgba(246, 243, 238, 0.86);
  font: inherit;
  font-size:15.5px;
  cursor: pointer;
}

.msg-editor-button:hover {
  background: rgba(255, 255, 255, 0.08);
}

.msg-editor-button.is-primary {
  border-color: rgba(94, 173, 235, 0.7);
  color: #dcecfa;
}

.msg-editor-button:focus-visible {
  outline: 2px solid var(--menu-icon-active-color, #00ffef);
  outline-offset: 1px;
}

/* Quellen einer Antwort. Wie Leiste und Editor ein Geschwister der Nachricht,
   damit die Adressen nicht im gespeicherten Verlauf und im Modellkontext landen. */
.msg-sources {
  max-width: min(980px, 100%);
  margin: 0 0 6px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.msg-sources-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size:14.5px;
  color: rgba(246, 243, 238, 0.62);
}

.msg-sources-close {
  padding: 2px 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  background: transparent;
  color: rgba(246, 243, 238, 0.78);
  font: inherit;
  font-size:14.5px;
  min-height: 0;
  cursor: pointer;
}

.msg-sources-close:hover {
  background: rgba(255, 255, 255, 0.08);
}

.msg-sources-close:focus-visible {
  outline: 2px solid var(--menu-icon-active-color, #00ffef);
  outline-offset: 1px;
}

.msg-source {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 0;
}

.msg-source + .msg-source {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.msg-source-url {
  color: #9ecbf0;
  font-size:15.5px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.msg-source-url:hover {
  text-decoration: underline;
}

.msg-source-url:focus-visible {
  outline: 2px solid var(--menu-icon-active-color, #00ffef);
  outline-offset: 2px;
}

.msg-source-meta {
  font-size:14.5px;
  color: rgba(246, 243, 238, 0.56);
  overflow-wrap: anywhere;
}

/* "Ab hier loeschen" ist umkehrbar — fuenf Sekunden lang. */
.msg-undo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size:15.5px;
  color: rgba(246, 243, 238, 0.86);
}

.msg-undo-button {
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 7px;
  background: transparent;
  color: #f6f3ee;
  font: inherit;
  font-size:15.5px;
  cursor: pointer;
}

.msg-undo-button:hover {
  background: rgba(255, 255, 255, 0.09);
}

.msg-undo-button:focus-visible {
  outline: 2px solid var(--menu-icon-active-color, #00ffef);
  outline-offset: 1px;
}

@media (max-width: 560px) {
  .msg-menu {
    min-width: 208px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .msg-act {
    transition: none;
  }
}

/* Riesen-Einfuegung als Anhang-Chip (Konkurrenz-Radar V1, 2026-08-06) */
.paste-attach-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px 0;
}

.paste-attach-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 6px 8px 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(246, 243, 238, 0.82);
  font-size:16.5px;
  line-height: 1.2;
}

.paste-attach-label {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.paste-attach-restore,
.paste-attach-remove {
  border: 0;
  background: transparent;
  color: rgba(246, 243, 238, 0.62);
  font: inherit;
  cursor: pointer;
  padding: 2px 4px;
}

.paste-attach-restore:hover,
.paste-attach-remove:hover {
  color: rgba(246, 243, 238, 0.95);
}

.paste-attach-remove {
  font-size:21px;
  line-height: 1;
}

/* Die Eintraege des Ueberlaufmenues waren 209x42 — zwei Pixel unter dem Ziel
   (Polster 7 px plus 13-px-Zeile). Gemessen 2026-08-09 bei 375 px. */
@media (max-width: 600px) {
  .msg-menu .msg-menu-item {
    min-height: 44px;
  }
}

/* ---- search-overlay.css ---- */
/* Such-Overlay (Cmd+K) — eigene Datei, weil public/styles.css am
   Ratchet-Limit (1589 Zeilen) eingefroren ist (scripts/check-guidelines.mjs).
   Farben folgen dem Cyan-Cockpit (design-cyan.css), aber mit eigenen Werten:
   die --design-*-Variablen leben dort im Scope .premium-view und sind hier
   nicht verfuegbar. */

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 80; /* ueber Sidebar (70) und Modellmenue (60) */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: min(12vh, 96px) 16px 16px;
}

.search-overlay[hidden] {
  display: none;
}

body.search-overlay-open {
  overflow: hidden;
}

.search-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 10, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.search-overlay-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(680px, 100%);
  max-height: min(72vh, 640px);
  overflow: hidden;
  border: 1px solid rgba(45, 212, 191, 0.58);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.065), rgba(45, 212, 191, 0.025) 42%, transparent 70%),
    rgba(19, 24, 33, 0.97);
  box-shadow:
    0 0 24px rgba(45, 212, 191, 0.28),
    0 24px 64px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(126, 232, 218, 0.22);
}

.search-overlay-form {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(45, 212, 191, 0.26);
}

.search-overlay-form input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 0;
  outline: none;
  background: transparent;
  color: #f6f3ee;
  font-size: 17px;
}

.search-overlay-form input::placeholder {
  color: rgba(151, 158, 171, 0.78);
}

.search-overlay-close {
  min-width: 44px;
  min-height: 44px;
  border: 1px solid rgba(45, 212, 191, 0.32);
  border-radius: 10px;
  background: rgba(6, 10, 16, 0.82);
  color: rgba(126, 232, 218, 0.9);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.search-overlay-log {
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 8px;
}

.search-overlay-group {
  display: grid;
  gap: 2px;
}

.search-overlay-group h3 {
  margin: 0;
  padding: 6px 10px 4px;
  color: rgba(126, 232, 218, 0.78);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.search-overlay-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #f6f3ee;
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.search-overlay-row .row-title {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.search-overlay-row .row-meta {
  align-self: center;
  color: rgba(151, 158, 171, 0.85);
  font-size: 12px;
  white-space: nowrap;
}

.search-overlay-row .row-detail {
  grid-column: 1 / -1;
  overflow: hidden;
  color: rgba(246, 243, 238, 0.62);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Maus-Hover und Tastatur-Auswahl sehen gleich aus — es gibt EINE Markierung. */
.search-overlay-row.is-active {
  border-color: rgba(45, 212, 191, 0.4);
  background: rgba(45, 212, 191, 0.14);
}

.search-overlay-log mark {
  border-radius: 3px;
  padding: 0 1px;
  background: rgba(50, 246, 234, 0.3);
  color: #eafffb;
}

.search-overlay-empty {
  padding: 14px;
  color: rgba(246, 243, 238, 0.72);
}

.search-overlay-hints {
  display: flex;
  gap: 16px;
  margin: 0;
  padding: 8px 12px;
  border-top: 1px solid rgba(45, 212, 191, 0.2);
  color: rgba(151, 158, 171, 0.85);
  font-size: 12px;
}

.search-overlay-hints kbd {
  display: inline-block;
  min-width: 18px;
  margin-right: 4px;
  padding: 1px 5px;
  border: 1px solid rgba(126, 232, 218, 0.3);
  border-radius: 5px;
  background: rgba(6, 10, 16, 0.82);
  color: rgba(126, 232, 218, 0.9);
  font-family: inherit;
  font-size: 11px;
  text-align: center;
}

@media (max-width: 560px) {
  .search-overlay {
    padding: 8px;
  }

  .search-overlay-panel {
    max-height: calc(100dvh - 16px);
  }

  .search-overlay-hints {
    display: none; /* Tastatur-Hinweise nuetzen auf dem Handy nichts */
  }
}

/* ---- start-glass.css ---- */
/* smejj.com — Glas-Startseite (Screen 1), Freigabe:
   docs/approvals/2026-08-13-startseite-glas-design-freigabe.md
   Laedt NACH dem start-styles-Buendel und ueberschreibt nur Screen 1.
   styles.css bleibt unangetastet (Ratchet 1589). */

/* ── Leerer Zustand: Begruessung + Kapsel mittig ─────────────────── */

#start:not(.has-start-chat) .home-feed {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 3vh, 26px);
  padding: 24px 16px;
  background:
    radial-gradient(820px 520px at 18% -12%, rgba(45, 212, 191, 0.13), transparent 62%),
    radial-gradient(700px 480px at 88% 108%, rgba(13, 148, 210, 0.10), transparent 64%),
    linear-gradient(180deg, #0b1016 0%, #070a0e 62%, #050608 100%);
}

#start:not(.has-start-chat) .home-hero {
  display: block;
  min-height: 0;
  padding: 0 16px;
}

#start:not(.has-start-chat) .home-hero h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.home-hero .start-markenwort {
  color: #35e0d0;
  text-shadow: 0 0 18px rgba(45, 212, 191, 0.35);
}

/* ── Eingabe-Kapsel: Glas statt Kante — gilt in beiden Zustaenden ── */

.prompt-glass {
  width: min(760px, calc(100% - 24px));
  margin: 0 auto;
  border: 1px solid rgba(126, 232, 218, 0.32);
  /* Betreiber-Regel 2026-08-13: das gesamte Design ist viereckig. */
  border-radius: 0;
  padding: 6px 10px 6px;
  background:
    linear-gradient(150deg, rgba(255, 255, 255, 0.09), rgba(45, 212, 191, 0.03) 46%, transparent 72%),
    rgba(17, 23, 30, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 0 26px rgba(45, 212, 191, 0.14),
    0 14px 40px rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}

.prompt-glass:focus-within {
  border-color: rgba(50, 246, 234, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 0 34px rgba(45, 212, 191, 0.26),
    0 14px 40px rgba(0, 0, 0, 0.42);
}

/* Laufender Chat: Kapsel bleibt Kapsel, nur breiter und unten angedockt. */
#start.has-start-chat .prompt-glass {
  width: min(980px, calc(100% - 20px));
  margin: 0 auto 10px;
}

.prompt-glass textarea {
  height: auto;
  min-height: 44px;
  padding: 10px 12px 6px;
  font-size: 16.5px;
  line-height: 1.5;
}

.prompt-actions {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Werkzeugleiste gruppieren (Betreiber-Befund 2026-08-13: "smejj 1.0" schwebte
   allein in der Mitte, die Luecke wirkte unfertig). Links steht, WAS ich
   schicke (Anhang + Modell), rechts, WIE es rausgeht (Diktat, Sprache,
   Senden) — dieselbe Aufteilung wie bei ChatGPT.
   Bewusst nur per `order`: das Markup in index.html bleibt unangetastet, die
   Reihenfolge fuer Tastatur und Screenreader also auch. */
.prompt-actions .plus-picker { order: 1; }
.prompt-actions .model-picker { order: 2; }
.prompt-actions .prompt-spacer { order: 3; }
.prompt-actions [data-start-tool] { order: 4; }
.prompt-actions .send-button { order: 5; }

/* Vorlesen wohnt jetzt nur noch im Antwort-Menue („speak" in
   chat-actions-menu.js) — der dritte Audio-Knopf verwirrte nur. */
.prompt-glass [data-start-tool="speaker"] {
  display: none;
}

/* ── Beispiel-Chips: die Leerflaeche arbeitet ─────────────────────── */

.start-chips {
  display: flex;
  /* Umbruch BLEIBT erlaubt: auf schmalen Schirmen ist eine zweite Zeile
     richtig; nowrap wuerde die Chips dort zusammenquetschen. */
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  /* 760 px reichten fuer vier Chips. Mit dem fuenften ("Video generieren",
     2026-08-14) brauchen sie 743 px NETTO — die 32 px Innenabstand kippten
     damit genau einen Chip in die zweite Zeile. 940 px geben Luft, bewusst
     mehr als die ~775 px, die Deutsch braucht: die Beschriftungen sind
     uebersetzt, und "Générer des images" oder "Создать изображения" tragen
     breiter auf. Die Eingabe-Kapsel darueber bleibt bei 760 px — die Chips
     duerfen breiter stehen, sie sind kein Eingabefeld. */
  max-width: 940px;
  padding: 0 16px;
}

#start.has-start-chat .start-chips {
  display: none;
}

.start-chips button {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* Betreiber-Regel 2026-08-13: das gesamte Design ist viereckig. */
  border-radius: 0;
  background: rgba(17, 23, 30, 0.5);
  color: rgba(200, 209, 218, 0.92);
  /* 14 px statt 13,5: Betreiber-Regel "nie unter 14 px" (er liest ohne
     Brille). Die Chips waren die letzte Stelle der Startseite darunter. */
  font-size: 14px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: border-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}

.start-chips button:hover,
.start-chips button:focus-visible {
  border-color: rgba(50, 246, 234, 0.5);
  color: #f0f6f5;
  box-shadow: 0 0 16px rgba(45, 212, 191, 0.18);
}

/* ── Rand-Icons: 44-px-Touchziele auch auf dem Desktop (2026-08-13) ──
   Mobil (<600px) stehen die 44er schon im start-styles-Buendel; hier ziehen
   Menue-, Browser- und Maus-Knopf auf allen Breiten nach. Doppelklasse gibt
   Gewicht 0,2,0 wie beim Buendel-Vorbild. */

.glass-icon.glass-icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
}

/* Der Maus-Knopf traegt right:36px als Inline-Stil (CSP-Hash, index.html ist
   Start-Lock) — mit 44-px-Knoepfen ueberlappt das den Browser-Knopf, darum
   hier per !important daneben gesetzt: 48px = 44px Knopf + Luft. */
#mausButton {
  right: calc(env(safe-area-inset-right) + 48px) !important;
}

/* Das Logo sass bei left:36px neben dem 28er-Menue-Knopf; der endet jetzt
   bei 44. Gleicher Zug wie die Mobil-Regel im Buendel (left: +48px), und als
   Klickziel waechst es selbst auf 44. */
.app-brand-logo {
  left: calc(env(safe-area-inset-left) + 48px);
  width: 44px;
  height: 44px;
}

body[data-left-menu-state="expanded"] .app-brand-logo {
  height: 44px;
}

/* ── Mobil ────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
  #start:not(.has-start-chat) .home-hero h2 {
    font-size: 22px;
  }

  .prompt-glass {
    width: calc(100% - 16px);
  }

  /* Auf kleinen Schirmen reichen zwei Chips. */
  .start-chips button:nth-child(n + 3) {
    display: none;
  }
}

/* ---- eckig.css ---- */
/* smejj.com — Betreiber-Regel 2026-08-13: das GESAMTE Design ist viereckig.
   (Eckig-Kontrolle ueber alle 17 Ansichten, Betreiber-Wahl
   "Alles ausser Avatar".) EINE Regel statt ~200 Einzelkorrekturen in 20
   Dateien; laedt als letztes Stylesheet und gewinnt per !important auch
   gegen Inline-Stile. Wer kuenftig bewusst rundet, braucht hier eine
   dokumentierte Ausnahme — genau so ist es gedacht. */

*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* Einzige freigegebene Ausnahme: Avatare bleiben Kreise (Betreiber-Wahl,
   Branchenstandard). Profil-Knopf unten links + Anbieter-Kreise im
   API-Schluessel-Bereich. */
.profile-avatar,
#settings .ak-avatar {
  border-radius: 999px !important;
}