/* 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: 28px;
  line-height: 1;
  letter-spacing: 0;
}

.note,
.eyebrow {
  margin: 8px 0 0;
  color: #71716b;
  font-size: 12px;
  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: 12px;
  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: 16px;
  line-height: 1.5;
}

.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: 16px;
  white-space: pre-wrap;
}

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

.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: 12px;
  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: 18px;
}

.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: 13px;
}

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

label {
  display: grid;
  gap: 8px;
  font-size: 13px;
  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: 13px;
  line-height: 1.5;
}

.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: 12px;
  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: 26px;
  }

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

  .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: 14px; 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: 13px;
}

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

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

.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);
}

.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 {
  background:
    radial-gradient(circle at 22% 12%, rgba(95, 176, 154, 0.16), transparent 28%),
    radial-gradient(circle at 78% 20%, rgba(79, 143, 236, 0.14), transparent 26%),
    linear-gradient(180deg, #151617 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: 30px;
  padding-right: 0;
  padding-bottom: 0;
  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: 12px;
}

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

.sidebar.is-compact .nav {
  gap: 0;
}

.sidebar.is-compact .bottom-nav {
  gap: 0;
  padding-top: 0;
}

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

.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: 0; 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: 12px;
}

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

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

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

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

.browser-panel-header p {
  margin: 8px 0 0;
  color: rgba(246, 243, 238, 0.58);
  font-size: 12px;
  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: 12px;
  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: 10px;
}

.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: 15px;
  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: 13px;
  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: 34px;
  }

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

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

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

  .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: 12px;
}

.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: 11px;
  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: 12px;
  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;
}

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

/* ---- 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: 13px;
     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: 17px;
     font-weight: 500;
     margin: 0;
}

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

.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: 12px;
     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 {
     display: flex;
     align-items: center;
     justify-content: center;
}

.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;
}

.voice-mode-logo circle {
     fill: #14e0dc;
}

.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; }
}

/* 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). */

.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 {
     animation-duration: 3.6s;
}

.voice-mode-overlay[data-mode="speaking"] .voice-mode-logo path {
     stroke: #7fd4a8;
}

.voice-mode-overlay[data-mode="speaking"] .voice-mode-logo circle {
     fill: #7fd4a8;
}

/* 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: 14px;
     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: 12px;
     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: 11px;
  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: 13px;
  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: 15px;
  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: 11px;
  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: 11.5px;
}

.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: 12px;
}

/* 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: 15px;
}

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

.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: 18px;
}

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

.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: 13px;
  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;
  left: 14px;
  right: 14px;
  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;
    left: 10px;
    right: 10px;
  }
}

/* ---- 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: 14px;
  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: 22px;
  height: 22px;
  font-size: 12px;
}

.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: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-dock-menu-head span {
  overflow: hidden;
  color: rgba(246, 243, 238, 0.6);
  font-size: 12px;
  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: 13px;
  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;
}

/* ---- 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;
}

.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;
}

.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); }
}

/* ---- 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;
  }
}

.msg-version-label {
  font-size: 12px;
  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: 12px;
  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: 13px;
  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.55;
  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: 12px;
  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: 13px;
  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: 12px;
  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: 12px;
  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: 13px;
  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: 12px;
  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: 13px;
  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: 13px;
  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;
  }
}