/* ==========================================================================
   TIKKI — DIE KI ASSISTENTIN · MADE BY CONSAI.AI (styles.css)
   Exklusives Gold-Verspiegeltes Design (24k Mirror Champagne Gold & Warm Porcelain)
   Keine andere Farb-Auswahl · Maßgeschneiderte Gold-Buttons & Vektor-Icons
   ========================================================================== */

/* ---------- 1. EXKLUSIVES GOLD-VERSPIEGELTES DESIGN (EINZIGES DESIGN) ---------- */
:root,
body,
body[data-theme="komfort"],
body[data-theme="cybervault"],
body[data-theme="studio"],
body[data-theme="tikkigold"],
body[data-theme="serverroom"] {
  /* Layout-Maße */
  --ticker-h: 90px;
  --topbar-h: 62px;
  --statusbar-h: 44px;

  /* Geometrie & Abstände */
  --radius-win: 18px;
  --radius-card: 13px;
  --radius-btn: 10px;
  --radius-input: 10px;
  --radius-pill: 999px;

  /* Gold-Verspiegelte Porzellan-Palette */
  --bg-app: #f3eadc;
  --bg-stage-grad: radial-gradient(circle at 50% 0%, #fdfaf3 0%, #f4ebdc 58%, #e5d6ba 100%);
  --surface-win: rgba(252, 248, 240, 0.95);
  --surface-header: linear-gradient(180deg, #fdfaf2 0%, #f4ead7 100%);
  --surface-subtle: #efe3cc;
  --surface-card: #fdfaf4;
  --surface-hover: #eadbc0;
  --surface-input: #fffefb;
  --surface-code: #1f170c;
  --code-ink: #f8eedb;

  --text-primary: #261c0e;
  --text-secondary: #5a472d;
  --text-muted: #826b4b;

  --border-subtle: rgba(192, 145, 58, 0.34);
  --border-strong: rgba(182, 132, 42, 0.56);
  --border-focus: #c59231;

  /* 24k Spiegel-Gold Akzente */
  --accent: #9f7019;
  --accent-strong: #7f560d;
  --accent-soft: rgba(206, 159, 68, 0.17);
  --accent-border: rgba(190, 140, 48, 0.50);

  /* Gold-Verspiegelte Primär-Buttons (Specular Mirror Sheen) */
  --btn-primary-bg: linear-gradient(180deg, #fff9ec 0%, #f2db9b 22%, #d3a64b 54%, #b38124 80%, #d4a850 100%);
  --btn-primary-hover: linear-gradient(180deg, #ffffff 0%, #f8e4ad 24%, #ddb155 54%, #be8b2c 80%, #dfc06c 100%);
  --btn-primary-text: #211607;
  --btn-primary-border: #9c6d18;
  --btn-primary-shadow:
    0 6px 18px rgba(138, 94, 18, 0.26),
    inset 0 1.5px 0 rgba(255, 253, 245, 0.92),
    inset 0 -1px 0 rgba(122, 82, 14, 0.35);

  /* Spiegel-Porzellan Sekundär-Buttons mit feiner Goldkante */
  --btn-sec-bg: linear-gradient(180deg, #fffefb 0%, #f5ebd8 100%);
  --btn-sec-hover: linear-gradient(180deg, #ffffff 0%, #efe0c4 100%);
  --btn-sec-text: #2a1e0f;
  --btn-sec-border: rgba(186, 138, 50, 0.44);

  --seg-track: #eadcc3;
  --seg-active-bg: linear-gradient(180deg, #fffefb 0%, #f7eedc 100%);
  --seg-active-text: #261c0e;
  --seg-active-shadow: 0 2px 6px rgba(68, 44, 8, 0.12), inset 0 1px 0 #ffffff;

  /* Semantische Statusfarben in edler Champagner-Harmonie */
  --status-ok: #8f6516;
  --status-ok-bg: rgba(204, 158, 68, 0.18);
  --status-ok-border: rgba(186, 138, 48, 0.46);

  --status-info: #966a18;
  --status-info-bg: rgba(204, 158, 68, 0.15);
  --status-info-border: rgba(186, 138, 48, 0.42);

  --status-warn: #b4690e;
  --status-warn-bg: rgba(217, 130, 24, 0.15);
  --status-warn-border: rgba(196, 118, 20, 0.44);

  --status-danger: #b9382c;
  --status-danger-bg: rgba(185, 56, 44, 0.10);
  --status-danger-border: rgba(185, 56, 44, 0.32);

  --shadow-win:
    0 30px 76px -14px rgba(48, 31, 6, 0.26),
    0 0 0 1px rgba(206, 160, 74, 0.34),
    inset 0 1px 0 rgba(255, 253, 246, 0.88);
  --shadow-card: 0 8px 24px rgba(48, 31, 6, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --backdrop-overlay: rgba(34, 22, 6, 0.44);

  /* Hintergrund-SVG-Variablen */
  --svg-wall-top: #fbf7ee;
  --svg-wall-mid: #f2e8d5;
  --svg-wall-bot: #e4d4b7;
  --svg-ceiling: #fffdf8;
  --svg-floor-top: #ece0c8;
  --svg-floor-bot: #dcc9a7;
  --svg-trim: #cfa353;
  --svg-core-bg: #fdfaf2;
  --svg-rack-1: #e5d5b8;
  --svg-rack-2: #f4ead6;
}

/* Keine andere Design-Auswahl zulassen */
.arch-theme-switcher,
[data-set-theme] {
  display: none !important;
}

/* ---------- 2. BASIS-RESET & TYPOGRAFIE ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.is-hidden {
  display: none !important;
}

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

/* Dezente, saubere Scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}

/* ---------- 3. EINHEITLICHES BUTTON-SYSTEM (ALLE BUTTONS KLAR & KONSISTENT) ---------- */

/* Basis für alle Standard- & Sekundär-Buttons */
.arch-nav-btn,
.theater-btn,
.arch-btn-ghost,
.arch-mini-btn,
.foyer-assistant-pill,
.customer-guide-pill,
.theater-voice-btn,
.rooms-filter-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 13px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--btn-sec-border);
  background: var(--btn-sec-bg);
  color: var(--btn-sec-text);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
  transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, box-shadow 0.14s ease, transform 0.12s ease;
}

.arch-nav-btn:hover,
.theater-btn:hover,
.arch-btn-ghost:hover,
.arch-mini-btn:hover,
.foyer-assistant-pill:hover,
.customer-guide-pill:hover,
.theater-voice-btn:hover,
.rooms-filter-btn:hover {
  background: var(--btn-sec-hover);
  border-color: var(--border-strong);
}

.arch-nav-btn:active,
.theater-btn:active,
.arch-btn-ghost:active,
.arch-mini-btn:active,
.arch-btn-gold:active {
  transform: translateY(0.5px);
}

/* Kompakte Buttons (innerhalb von Formularen, Karten, Toolbars) */
.arch-mini-btn,
.foyer-assistant-pill,
.customer-guide-pill,
.theater-voice-btn {
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
  border-radius: 8px;
}

.foyer-assistant-pill em {
  font-style: normal;
  padding: 1px 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

/* Primär-Buttons (Hauptaktion jedes Bereichs) */
.arch-btn-gold,
.arch-nav-btn.arch-nav-gold,
.theater-btn.theater-btn-gold,
.arch-mini-btn.arch-mini-gold {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--btn-primary-shadow);
  transition: filter 0.14s ease, transform 0.12s ease, box-shadow 0.14s ease;
}

.arch-nav-btn.arch-nav-gold {
  height: 34px;
  padding: 0 14px;
  font-size: 12.5px;
}

.arch-mini-btn.arch-mini-gold {
  height: 30px;
  padding: 0 11px;
  font-size: 12px;
  border-radius: 8px;
}

.arch-btn-gold:hover,
.arch-nav-btn.arch-nav-gold:hover,
.theater-btn.theater-btn-gold:hover,
.arch-mini-btn.arch-mini-gold:hover {
  background: var(--btn-primary-hover);
  filter: brightness(1.03);
}

/* Aktiver Zustand für Navigations- & Filter-Buttons */
.arch-nav-btn.is-active,
.theater-btn.active,
.rooms-filter-btn.active,
.foyer-assistant-pill.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--text-primary);
  font-weight: 700;
}

/* Semantische Button-Varianten (Freigabe / Gefahr / Sprache) */
.theater-btn-approve {
  background: var(--status-ok-bg);
  border-color: var(--status-ok-border);
  color: var(--status-ok);
  font-weight: 700;
}
.theater-btn-approve:hover {
  background: var(--status-ok);
  border-color: var(--status-ok);
  color: #ffffff;
}

.theater-btn-danger {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-border);
  color: var(--status-danger);
}
.theater-btn-danger:hover {
  background: var(--status-danger);
  border-color: var(--status-danger);
  color: #ffffff;
}

.voice-guide-btn,
.customer-guide-pill,
.theater-voice-btn {
  background: var(--status-info-bg);
  border-color: var(--status-info-border);
  color: var(--status-info);
}
.theater-voice-btn.is-stop {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-border);
  color: var(--status-danger);
}
.voice-guide-btn.is-speaking,
.customer-guide-pill.is-speaking,
.theater-voice-btn.is-speaking {
  background: var(--status-info);
  border-color: var(--status-info);
  color: #ffffff;
}

/* Einheitliche Fenster-Steuerbuttons (Schließen, Minimieren, Kopieren, Audio) */
.arch-win-mini {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.arch-win-mini:hover {
  background: var(--surface-hover);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.arch-win-mini.win-close-btn:hover {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-border);
  color: var(--status-danger);
}

/* Einheitliche Segmented Controls (Theme, Sprache, Modus, Schubladen-Tabs) */
.arch-theme-switcher,
.arch-lang-switcher,
.foyer-mode-switch,
.theater-mode-switcher,
.foyer-drawer-tabs {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border-radius: 9px;
  background: var(--seg-track);
  border: 1px solid var(--border-subtle);
}

.arch-theme-pill,
.arch-lang-btn,
.foyer-mode-pill,
.theater-mode-btn,
.foyer-drawer-tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}

.arch-lang-btn {
  padding: 0 8px;
  font-size: 11.5px;
}

.arch-theme-pill:hover,
.arch-lang-btn:hover,
.foyer-mode-pill:hover,
.theater-mode-btn:hover,
.foyer-drawer-tab:hover {
  color: var(--text-primary);
}

.arch-theme-pill.is-selected,
.arch-lang-btn.is-active,
.foyer-mode-pill.is-active,
.theater-mode-btn.active,
.foyer-drawer-tab.is-active {
  background: var(--seg-active-bg);
  color: var(--seg-active-text);
  box-shadow: var(--seg-active-shadow);
  font-weight: 700;
}

/* Tastenkürzel-Badge (⌘K) */
.finder-kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1;
}

/* Status-Punkte & Zähler-Badges */
.arch-dot,
.arch-live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-ok);
  box-shadow: 0 0 0 3px var(--status-ok-bg);
  flex: 0 0 auto;
}

.arch-badge,
.arch-count {
  font-style: normal;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 19px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.arch-code-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- 4. KOPFLEISTE OBEN (SAUBER ANGEDOCKT, KEIN ÜBERLAPPEN) ---------- */
.arch-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--topbar-h);
  padding: 0 18px;
  z-index: 60;
  background: var(--surface-win);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.arch-brand-group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.arch-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px 4px 4px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.14s ease;
}

.arch-brand:hover {
  background: var(--surface-subtle);
}

.arch-brand-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border-subtle);
}

.arch-brand-text {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  white-space: nowrap;
}

.arch-brand-text em {
  font-style: normal;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--accent);
  margin-left: 2px;
}

.arch-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.arch-nav-divider {
  width: 1px;
  height: 20px;
  background: var(--border-subtle);
  margin: 0 2px;
}

/* ---------- 5. HAUPTBÜHNE & HINTERGRUND ---------- */
.arch-stage {
  position: relative;
  margin-top: var(--topbar-h);
  width: 100vw;
  height: calc(100vh - var(--topbar-h) - var(--statusbar-h));
  overflow: hidden;
  background: var(--bg-stage-grad);
}

.arch-foyer-scene,
.arch-meeting-scene {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg-stage-grad);
  isolation: isolate;
}

.arch-foyer-scene::before,
.arch-meeting-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  opacity: 1;
  pointer-events: none;
}

.arch-foyer-scene::before {
  background-image: url("/tikki-rooms/tikki_porcelain_server_foyer.jpg");
}

.arch-meeting-scene::before {
  background-image: url("/tikki-rooms/offwhite_gold_meeting.jpg");
}

#view-rooms-overview {
  background-image: linear-gradient(180deg, rgba(248, 241, 228, 0.72), rgba(242, 231, 210, 0.78)), url("/tikki-rooms/offwhite_gold_foyer_clean.jpg");
  background-size: cover;
  background-position: center;
}

.arch-foyer-scene::after,
.arch-meeting-scene::after,
.arch-scene-svg {
  display: none !important;
}

/* ---------- 6. EINHEITLICHES FENSTER- & FORMULAR-DESIGN ---------- */
.arch-window {
  position: absolute;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--surface-win);
  backdrop-filter: blur(22px) saturate(125%);
  -webkit-backdrop-filter: blur(22px) saturate(125%);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-win);
  box-shadow: var(--shadow-win);
  overflow: hidden;
  min-width: 300px;
  max-width: 94vw;
  max-height: calc(100% - 24px);
}

.arch-win-bar {
  padding: 11px 16px;
  background: var(--surface-header);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: move;
  user-select: none;
  flex-shrink: 0;
}

.arch-win-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.arch-win-title strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.arch-win-btns {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Zentrierte Standard-Karten (Login & Neues Projekt) */
.win-centered-card {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, 92vw);
  z-index: 45;
}

.win-centered-card.is-wide,
.win-create-dialog {
  width: min(520px, 92vw);
}

/* Zentrierte Sekundär-Fenster im Raum */
.win-centered-modal {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
}

.win-drawer-dialog {
  width: min(560px, 92vw);
  height: min(600px, calc(100% - 32px));
}

.win-approval-dialog {
  width: min(560px, 92vw);
  height: min(540px, calc(100% - 32px));
}

.win-raw-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(880px, 94vw);
  height: min(680px, 84vh);
  z-index: 96;
}

.win-final-plan-dialog {
  width: min(720px, 92vw);
  height: min(600px, calc(100% - 32px));
}

.win-file-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 92vw);
  height: min(560px, 82vh);
  z-index: 95;
}

/* Formulare & Eingabefelder */
.arch-form-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.arch-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.arch-field > span,
.arch-field-head > span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

.arch-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.arch-field input,
.arch-field textarea,
.arch-textarea,
.arch-search,
.arch-select,
.arch-win-inputbar input {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-input);
  padding: 9px 12px;
  background: var(--surface-input);
  color: var(--text-primary);
  font-size: 13.5px;
  line-height: 1.4;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.arch-field input::placeholder,
.arch-field textarea::placeholder,
.arch-textarea::placeholder,
.arch-search::placeholder,
.arch-win-inputbar input::placeholder {
  color: var(--text-muted);
}

.arch-field input:focus,
.arch-field textarea:focus,
.arch-textarea:focus,
.arch-search:focus,
.arch-select:focus,
.arch-win-inputbar input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.arch-details {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-subtle);
  padding: 10px 14px;
}

.arch-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
}

.arch-details summary::-webkit-details-marker {
  display: none;
}

.arch-details summary small {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.arch-details-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arch-upload-zone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-input);
  padding: 12px;
  background: var(--surface-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.arch-upload-zone small {
  color: var(--text-muted);
  font-size: 12px;
}

.arch-upload-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.arch-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-secondary);
  cursor: pointer;
}

.arch-form-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 4px;
}

.arch-row-item {
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: var(--text-primary);
}

.arch-row-item.is-done {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.arch-row-item.is-working {
  border-color: var(--status-info-border);
  background: var(--status-info-bg);
}

.arch-row-item.is-accent {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.arch-row-item.is-stacked {
  flex-direction: column;
  align-items: flex-start;
}

.arch-row-item small {
  color: var(--text-secondary);
  font-size: 12px;
}

/* Chat-Nachrichten & Eingabeleiste in Fenstern */
.arch-win-messages {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--surface-win);
}

.arch-msg {
  max-width: 88%;
  padding: 11px 14px;
  border-radius: 12px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.arch-msg.is-user {
  align-self: flex-end;
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--text-primary);
}

.arch-msg small {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 700;
}

.arch-win-inputbar {
  padding: 10px 14px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-header);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.arch-win-inputbar input {
  flex: 1;
  min-width: 0;
}

/* ---------- 7. ANSICHT 1: VORZIMMER (KLAR GEORDNET OHNE ÜBERLAPPUNG) ---------- */

/* 3-Schritte-Orientierung oben */
.foyer-customer-steps {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface-win);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  max-width: 94vw;
  overflow-x: auto;
}

.customer-step-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
}

.customer-step-pill.is-current {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 700;
}

.customer-step-pill em {
  font-style: normal;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  background: var(--surface-subtle);
  color: var(--text-primary);
}

.customer-step-pill.is-current em {
  background: var(--accent);
  color: #ffffff;
}

.customer-step-arrow {
  font-size: 12px;
  color: var(--text-muted);
}

/* Willkommens- / Login-Karte */
.welcome-card-body {
  align-items: center;
  text-align: center;
}

.welcome-avatar-wrap {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--accent-border);
  box-shadow: var(--shadow-card);
  flex-shrink: 0;
}

.welcome-avatar-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.welcome-intro-copy h3 {
  margin: 0 0 4px;
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
}

.welcome-intro-copy p,
.create-room-lead {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.welcome-login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.welcome-login-err {
  color: var(--status-danger);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--status-danger-bg);
  border: 1px solid var(--status-danger-border);
}

.welcome-submit-btn {
  width: 100%;
  margin-top: 2px;
}

.one-step-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

/* Zentrales Vorzimmer-Dialogfenster (#win-foyer-chat) */
#win-foyer-chat.foyer-counter-chat-win {
  top: 64px;
  left: 50%;
  transform: translateX(-50%);
  width: min(760px, 92vw);
  height: calc(100% - 138px);
  max-height: 580px;
  min-height: 300px;
  z-index: 32;
}

#win-foyer-chat.foyer-counter-chat-win.is-detailed-mode {
  width: min(880px, 94vw);
  max-height: 660px;
}

.foyer-friendly-header {
  flex-wrap: wrap;
  gap: 10px;
}

.foyer-header-tools {
  flex-wrap: wrap;
}

.foyer-mini-avatar {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  flex-shrink: 0;
}

.foyer-mini-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid var(--border-subtle);
}

.foyer-mini-avatar .arch-live-dot {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface-header);
}

.foyer-title-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.foyer-subtitle-label {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Vorzimmer Assistenz-Schublade (Fähigkeiten & Merkliste) */
.foyer-assistant-drawer {
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 250px;
  overflow-y: auto;
  flex-shrink: 0;
}

.foyer-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.foyer-drawer-pane {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.foyer-skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.foyer-skill-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.foyer-skill-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-card);
}

.foyer-skill-card strong {
  font-size: 12.5px;
  font-weight: 700;
}

.foyer-skill-card small {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.35;
}

.foyer-skill-title-row,
.foyer-note-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.skill-icon-input {
  width: 54px !important;
  text-align: center;
  flex-shrink: 0;
}

.foyer-notes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.foyer-note-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  font-size: 13px;
}

.foyer-note-item.is-done span {
  text-decoration: line-through;
  color: var(--text-muted);
}

/* Modell-Wahl Toolbar im Vorzimmer */
.foyer-thought-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.foyer-toolbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.foyer-toolbar-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
}

.foyer-intelligence-dropdown {
  max-width: 340px;
  padding: 5px 10px;
  font-size: 12.5px;
}

.foyer-greeting-msg {
  max-width: 100%;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: 14px;
}

/* Schnellstart-Chips */
.foyer-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 16px 10px;
  background: var(--surface-win);
  flex-shrink: 0;
}

#win-foyer-chat.has-active-dialog .foyer-quick-chips {
  display: none;
}

.foyer-chip {
  appearance: none;
  border: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.14s ease;
}

.foyer-chip:hover {
  background: var(--surface-hover);
  border-color: var(--accent-border);
  color: var(--text-primary);
}

.foyer-chip-accent {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
  font-weight: 700;
}

/* Mikrofon-Button */
.foyer-mic-btn {
  appearance: none;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: var(--radius-btn);
  border: 1px solid var(--btn-sec-border);
  background: var(--btn-sec-bg);
  color: var(--text-primary);
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.14s ease;
}

.foyer-mic-btn:hover {
  background: var(--btn-sec-hover);
  border-color: var(--accent-border);
}

.foyer-mic-btn.is-recording {
  width: auto;
  padding: 0 12px;
  background: var(--status-danger);
  border-color: var(--status-danger);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
}

/* Untere Schnell-Dock-Leiste im Vorzimmer (überlappt nie den Chat!) */
.foyer-dock-wrap {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 22;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 95vw;
}

.foyer-desk-anchor {
  display: inline-flex;
  align-items: center;
}

.foyer-desk-anchor .bot-3d-badge-hero {
  flex-direction: row;
  gap: 8px;
  padding: 4px 12px 4px 4px;
  border-radius: 12px;
  background: var(--surface-win);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.foyer-desk-anchor .bot-3d-badge-hero .bot-3d-cube-tikki {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.bot-3d-human-tag {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.foyer-bottom-nav-bar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border-radius: 12px;
  background: var(--surface-win);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

/* ---------- 8. ANSICHT 2: MEINE RÄUME & PROJEKTE (DASHBOARD) ---------- */
.arch-overview-stage {
  overflow-y: auto;
  padding: 28px 24px 40px;
}

.arch-overview-wrap {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.arch-overview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 20px 24px;
  border-radius: var(--radius-win);
  background: var(--surface-win);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.arch-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 2px;
}

.arch-overview-header h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}

.overview-subcopy {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--text-secondary);
}

.arch-overview-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* Such- & Kategorie-Toolbar */
.rooms-toolbar-card {
  padding: 14px 18px;
  border-radius: var(--radius-win);
  background: var(--surface-win);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rooms-toolbar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.rooms-instant-search-wrap {
  flex: 1 1 300px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  height: 38px;
  border-radius: var(--radius-input);
  background: var(--surface-input);
  border: 1px solid var(--border-strong);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.rooms-instant-search-wrap:focus-within {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.rooms-search-icon {
  font-size: 13px;
  opacity: 0.7;
}

.rooms-instant-search {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 13.5px;
  outline: none;
}

.rooms-instant-search::placeholder {
  color: var(--text-muted);
}

.rooms-overview-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.rooms-filter-btn.filter-btn-action.has-items {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
  color: var(--status-warn);
}

.rooms-category-pills {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.rooms-cat-pill {
  appearance: none;
  border: 1px solid transparent;
  background: var(--surface-subtle);
  color: var(--text-secondary);
  height: 28px;
  padding: 0 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: all 0.14s ease;
}

.rooms-cat-pill:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.rooms-cat-pill.is-active {
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
  font-weight: 700;
}

/* Raum-Karten Grid */
.arch-rooms-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.arch-room-card {
  position: relative;
  padding: 18px;
  border-radius: var(--radius-win);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 11px;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.arch-room-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-border);
  box-shadow: var(--shadow-win);
}

.arch-room-card.card-needs-action {
  border-color: var(--status-warn-border);
}

.arch-room-card.card-autonomous {
  border-color: var(--status-ok-border);
}

.arch-room-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-right: 66px;
}

.room-card-actions {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 4;
}

.room-pin-btn,
.room-delete-btn {
  appearance: none;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-subtle);
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12.5px;
  transition: all 0.14s ease;
}

.room-pin-btn:hover {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.room-pin-btn.is-pinned {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.room-delete-btn:hover {
  background: var(--status-danger-bg);
  border-color: var(--status-danger-border);
  color: var(--status-danger);
}

.room-status-pill {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.room-status-pill.pill-needs-action {
  background: var(--status-warn-bg);
  border: 1px solid var(--status-warn-border);
  color: var(--status-warn);
}

.room-status-pill.pill-autonomous {
  background: var(--status-ok-bg);
  border: 1px solid var(--status-ok-border);
  color: var(--status-ok);
}

.room-status-pill.pill-completed {
  background: var(--status-info-bg);
  border: 1px solid var(--status-info-border);
  color: var(--status-info);
}

.room-status-pill.pill-ready {
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.room-status-pill .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.arch-room-card strong.arch-room-card-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.arch-room-card p.arch-room-card-goal {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.room-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.room-tag-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

.room-card-progress-track {
  width: 100%;
  height: 6px;
  background: var(--surface-subtle);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-top: auto;
}

.room-card-progress-bar {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), var(--status-ok));
  transition: width 0.3s ease;
}

.room-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}

.room-card-footer strong {
  color: var(--text-primary);
  font-weight: 700;
}

.room-card-email {
  font-size: 11px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  display: flex;
  align-items: center;
  gap: 5px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 8px;
}

/* ---------- 9. ANSICHT 3: DAS MEETINGZIMMER (3-SPALTEN-STUDIO) ---------- */

/* Eingeklappte Raum-Kopfleiste */
.meeting-header-pill {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 28;
  max-width: min(1060px, calc(100vw - 320px));
  padding: 8px 14px;
  border-radius: var(--radius-card);
  background: var(--surface-win);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-win);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.meeting-header-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.meeting-header-meta strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}

.meeting-goal-inline {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}

.meeting-email-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.meeting-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Linke & Rechte Team-Seitenleisten (überlappen nie das Hauptfenster!) */
.meeting-wall {
  position: absolute;
  top: 16px;
  bottom: 16px;
  z-index: 18;
  width: 114px;
  padding: 12px 8px;
  border-radius: var(--radius-win);
  background: var(--surface-win);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow-y: auto;
}

.meeting-wall-left {
  left: 16px;
}

.meeting-wall-right {
  right: 16px;
  width: 124px;
}

.meeting-wall-right:has(.is-compact-grid) {
  width: 184px;
}

.meeting-wall-title {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

.meeting-wall-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* 30-Bot Kompakt-Grid an der rechten Wand */
.meeting-wall-list.is-compact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(72px, 1fr));
  gap: 8px 6px;
  align-items: start;
  justify-items: center;
}

/* Bot-Kacheln an den Seitenwänden */
.bot-3d-badge {
  appearance: none;
  border: 0;
  padding: 4px;
  background: transparent;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  border-radius: 10px;
  transition: background 0.14s ease, transform 0.14s ease;
}

.bot-3d-badge:hover {
  background: var(--surface-subtle);
  transform: translateY(-1px);
}

.bot-slot-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-secondary);
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bot-3d-cube,
.bot-3d-cube-tikki {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--surface-subtle);
  border: 1.5px solid var(--border-strong);
  box-shadow: var(--shadow-card);
  overflow: visible;
}

.meeting-wall-list.is-compact-grid .bot-3d-cube {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}

.bot-3d-media {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  display: block;
}

.meeting-wall-list.is-compact-grid .bot-3d-media {
  border-radius: 8px;
}

.bot-3d-status {
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--status-ok);
  border: 2px solid var(--surface-win);
}

.bot-3d-code {
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
}

/* Aktive / Ruhende Bots */
@keyframes botPulseRing {
  0%, 100% { box-shadow: 0 0 0 0 var(--status-ok-bg); }
  50% { box-shadow: 0 0 0 5px var(--status-ok-bg); }
}

.bot-3d-badge.bot-is-active-glow .bot-3d-cube {
  border-color: var(--status-ok);
  animation: botPulseRing 1.8s infinite ease-in-out;
}

.bot-3d-badge.bot-is-resting .bot-3d-cube {
  opacity: 0.82;
}

.bot-3d-badge.bot-is-resting .bot-3d-status {
  background: var(--text-muted);
}

.bot-3d-badge.bot-is-done .bot-3d-status {
  background: var(--accent);
}

/* Zentrales Projekt-Fenster (#win-room-activity-player) */
.arch-activity-theater {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: min(860px, calc(100vw - 356px));
  height: calc(100% - 32px);
  max-height: 780px;
  z-index: 25;
  background: var(--surface-win);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-win);
  box-shadow: var(--shadow-win);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.arch-activity-theater.is-minimized {
  height: auto;
  max-height: 50px;
}

.theater-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: var(--surface-header);
  border-bottom: 1px solid var(--border-subtle);
  cursor: move;
  flex-shrink: 0;
}

.theater-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.theater-live-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--status-ok);
  box-shadow: 0 0 0 3px var(--status-ok-bg);
  flex-shrink: 0;
}

.theater-title-group strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
}

.theater-room-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  padding: 2px 9px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 240px;
}

.theater-controls-header {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Fortschritts-Banner im Projektfenster */
.room-progress-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 12px 16px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.room-progress-banner.is-done {
  background: var(--status-ok-bg);
}

.room-progress-banner.is-stuck {
  background: var(--status-warn-bg);
}

.room-progress-icon {
  font-size: 18px;
  line-height: 1;
}

.room-progress-text {
  flex: 1 1 260px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.room-progress-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.room-progress-bar {
  flex: 1 1 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--border-subtle);
  overflow: hidden;
}

.room-progress-bar i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--accent), var(--status-ok));
  transition: width 0.5s ease;
}

.room-briefing-panel {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.room-briefing-item {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
}

.room-briefing-item strong {
  display: block;
  font-size: 11.5px;
  color: var(--accent);
  margin-bottom: 2px;
}

.room-briefing-item span {
  font-size: 12.5px;
  color: var(--text-primary);
}

/* Hauptbühne im Projektfenster */
.theater-stage {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.theater-actor-card {
  padding: 12px;
  border-radius: var(--radius-card);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.theater-actor-media-wrapper {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-card);
}

.theater-actor-video,
.theater-actor-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.theater-actor-status-dot {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--status-ok);
  border: 2px solid #ffffff;
}

.theater-actor-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.theater-actor-meta strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-primary);
}

.theater-actor-meta code {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.theater-actor-meta span {
  font-size: 12px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.3;
}

.step-status-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: #7c5616;
  background: rgba(196, 149, 61, 0.22);
  border: 1px solid rgba(188, 140, 52, 0.48);
}

.theater-model-tag {
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  font-size: 11px !important;
  font-weight: 600;
}

.theater-content-card,
.theater-view-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.theater-step-badge {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 700;
}

.theater-action-headline {
  margin: 0;
  font-size: 16.5px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.35;
}

.theater-thought-bubble {
  padding: 12px 14px;
  border-radius: var(--radius-card);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
}

.theater-thought-bubble.compact-bubble {
  padding: 10px 12px;
}

.thought-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.theater-thought-bubble p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-primary);
}

.theater-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px;
}

.theater-deliverable-strip,
.theater-next-preview {
  padding: 8px 12px;
  border-radius: 9px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.strip-label {
  color: var(--text-muted);
  font-weight: 600;
}

.theater-deliverable-strip code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
  color: var(--status-ok);
}

.strip-status {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
}

/* Experten-Ansicht Metriken & Log */
.theater-tech-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.tech-metric {
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tech-metric small {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
}

.tech-metric strong,
.tech-metric code {
  font-size: 12px;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-all;
}

.tech-log-stream {
  background: var(--surface-code);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
}

.tech-log-header {
  color: #94a3b8;
  font-size: 10.5px;
  font-weight: 700;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tech-log-stream pre {
  margin: 0;
  color: var(--code-ink);
  max-height: 110px;
  overflow-y: auto;
  white-space: pre-wrap;
  line-height: 1.45;
}

/* Zeitleiste der Arbeitsschritte (Filmstreifen) */
.theater-filmstrip-wrapper {
  padding: 10px 16px;
  background: var(--surface-header);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.filmstrip-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.theater-filmstrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.filmstrip-step-card {
  flex: 0 0 148px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.14s ease, transform 0.12s ease, box-shadow 0.14s ease;
}

.filmstrip-step-card:hover {
  border-color: var(--accent-border);
  transform: translateY(-1px);
}

.filmstrip-step-card.is-active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.filmstrip-step-card.is-done {
  border-color: var(--status-ok-border);
}

.step-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
}

.step-num-pill {
  color: var(--text-muted);
}

.step-card-thumb {
  display: none;
}

.step-card-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step-card-bot {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fußleiste im Projektfenster */
.theater-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  background: var(--surface-header);
  border-top: 1px solid var(--border-subtle);
  flex-wrap: wrap;
  flex-shrink: 0;
}

.theater-nav-buttons,
.theater-action-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Einfach-Modus (Komfort): Technische Entwickler-Elemente ruhig ausblenden, aber Full-Conversation-Fenster vollständig belassen */
body.simple-mode .bot-3d-code,
body.simple-mode #pl-win-code,
body.simple-mode #foyer-win-code,
body.simple-mode #foyer-pin-code,
body.simple-mode #room-phases-list .arch-code-tag,
body.simple-mode #panel-add-bot,
body.simple-mode #btn-theater-open-all-bot-chats,
body.simple-mode #btn-room-open-all-bot-chats,
body.simple-mode .theater-nav-buttons,
body.simple-mode #theater-actor-code,
body.simple-mode #theater-actor-model-badge,
body.simple-mode #room-detail-email {
  display: none !important;
}

body.simple-mode .theater-footer {
  justify-content: flex-end;
}

/* ---------- 10. SEKUNDÄR-FENSTER IM RAUM (KEINE HARDCODED DARK STYLES MEHR!) ---------- */
.win-subpanel {
  padding: 12px 16px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.win-subpanel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 13px;
}

.win-subpanel-file {
  font-size: 12.5px;
  color: var(--text-secondary);
}

.win-subpanel-file code {
  color: var(--status-ok);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 600;
}

.status-text-ok {
  color: var(--status-ok);
  font-weight: 700;
  font-size: 12px;
}

.drawer-pct-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-weight: 700;
  color: var(--status-ok);
}

.drawer-stats-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
}

/* Projektleiter-Chat & Wunsch-Ergänzungs-Fenster sauber zentriert ohne Überlappung */
.win-pl-chat {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(560px, 92vw);
  height: min(520px, calc(100% - 36px));
  z-index: 64;
}

.win-inline-email {
  font-size: 11px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.win-intervention-dialog {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  width: min(500px, 92vw);
  z-index: 66;
}

.intervention-hint {
  padding: 10px 16px;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.intervention-form {
  padding: 14px 16px;
  gap: 10px;
}

.intervention-footer {
  justify-content: space-between;
}

/* Finaler Plan Inhalt */
.final-plan-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-primary);
}

.final-plan-goal {
  padding: 12px 14px;
  border-radius: var(--radius-card);
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  margin-bottom: 12px;
}

.final-plan-summary {
  margin: 0 0 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.final-plan-step {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius-card);
  margin-bottom: 8px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
}

.final-plan-step.is-done {
  border-color: var(--status-ok-border);
  background: var(--status-ok-bg);
}

.final-plan-step.is-working {
  border-color: var(--status-info-border);
  background: var(--status-info-bg);
}

.final-plan-step.is-failed {
  border-color: var(--status-warn-border);
  background: var(--status-warn-bg);
}

.final-plan-num {
  flex: 0 0 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 800;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  color: var(--accent);
}

.final-plan-step h4 {
  margin: 0 0 3px;
  font-size: 14px;
  color: var(--text-primary);
}

.final-plan-step p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.final-plan-step small {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Original Hermes Output & Datei-Vorschau */
.hermes-raw-meta-bar {
  padding: 10px 16px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 14px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-shrink: 0;
}

.hermes-raw-meta-bar strong,
.hermes-raw-meta-bar code {
  color: var(--text-primary);
}

.hermes-raw-body,
.arch-file-pre {
  flex: 1;
  margin: 0;
  overflow: auto;
  padding: 14px 16px;
  background: var(--surface-code);
  color: var(--code-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.hermes-raw-body pre {
  margin: 0;
  font-family: inherit;
}

/* Dynamische Bot-Chat-Fenster (openCompactBotChatWindow) */
.bot-chat-win {
  width: 410px;
  height: 430px;
}

.bot-chat-meta {
  padding: 8px 12px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11.5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.bot-chat-meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.bot-chat-model {
  color: var(--text-primary);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bot-chat-honcho {
  color: var(--text-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bot-chat-stream {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  background: var(--surface-win);
  font-size: 12px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bot-stream-block {
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-left-width: 3px;
}

.bot-stream-head {
  display: flex;
  justify-content: space-between;
  font-size: 10.5px;
  font-weight: 700;
  margin-bottom: 4px;
}

.bot-stream-content {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text-primary);
}

.bot-chat-form {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.bot-chat-form-row {
  display: flex;
  gap: 6px;
  width: 100%;
}

/* ---------- 11. EINSTELLUNGEN MODAL & GLOBALER FINDER (⌘K) ---------- */
.arch-modal-backdrop,
.global-finder-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--backdrop-overlay);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
  padding: 20px;
}

.arch-modal {
  width: min(940px, 95vw);
  max-height: 86vh;
  border-radius: var(--radius-win);
  background: var(--surface-win);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-win);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.arch-modal-header {
  padding: 18px 24px;
  background: var(--surface-header);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-shrink: 0;
}

.arch-modal-header h2 {
  margin: 2px 0 4px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
}

.arch-modal-header p {
  margin: 0;
  font-size: 13px;
  color: var(--text-secondary);
}

.arch-modal-tabs {
  padding: 10px 24px;
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.arch-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 8px;
  height: 32px;
  padding: 0 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.14s ease;
}

.arch-tab:hover {
  color: var(--text-primary);
  background: var(--surface-hover);
}

.arch-tab.is-active {
  background: var(--surface-card);
  border-color: var(--border-subtle);
  color: var(--text-primary);
  font-weight: 700;
  box-shadow: var(--seg-active-shadow);
}

.arch-modal-pane {
  padding: 22px 24px 26px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

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

.arch-card {
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arch-card h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.arch-card p {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.settings-pool-head,
.settings-admin-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-pool-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.providers-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.arch-modal-footer {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.arch-save-msg {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--status-ok);
}

.arch-banner {
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  font-size: 12.5px;
  color: var(--text-primary);
  margin-bottom: 14px;
}

.arch-skills-grid,
.arch-catalog-grid,
.arch-mini-catalog {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  max-height: 380px;
  overflow-y: auto;
}

.arch-filter-row {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 10px;
  margin-bottom: 12px;
}

.arch-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  overflow: hidden;
  font-size: 12px;
}

.arch-table th,
.arch-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
}

.arch-table th {
  background: var(--surface-subtle);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* Globaler Sofort-Finder (⌘K) */
.global-finder-dialog {
  width: min(640px, 94vw);
  max-height: 76vh;
  border-radius: var(--radius-win);
  background: var(--surface-win);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-win);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.global-finder-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-header);
}

.global-finder-input-row input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font-size: 15px;
  outline: none;
}

.global-finder-results {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 140px;
}

.finder-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.finder-result-item:hover {
  border-color: var(--accent-border);
  background: var(--surface-hover);
}

.finder-result-item strong {
  display: block;
  font-size: 13.5px;
  color: var(--text-primary);
}

.finder-result-item small {
  color: var(--text-secondary);
  font-size: 12px;
}

.global-finder-footer {
  padding: 10px 16px;
  background: var(--surface-header);
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---------- 12. RUHIGE STATUS-LEISTE UNTEN ---------- */
.arch-ticker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--statusbar-h);
  z-index: 60;
  padding: 0 18px;
  background: var(--surface-win);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-secondary);
}

.arch-ticker > strong {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.arch-ticker-TrackWrap {
  overflow: hidden;
  white-space: nowrap;
  padding-left: 8px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0px, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0px, #000 22px, #000 calc(100% - 22px), transparent 100%);
}

.arch-ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-width: max-content;
  font-weight: 500;
  will-change: transform;
}

.arch-ticker-track .tk-item {
  padding-right: 56px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.arch-ticker-track .tk-item b {
  color: var(--text-primary);
  font-weight: 700;
}

.arch-ticker-track .tk-item .tk-count {
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

.arch-ticker-track .tk-item.is-success { color: var(--status-ok); }
.arch-ticker-track .tk-item.is-warn { color: var(--status-warn); }
.arch-ticker-track .tk-item.is-error { color: var(--status-danger); }

.arch-ticker-track .tk-item.is-new::before {
  content: "NEU";
  color: #ffffff;
  background: var(--status-info);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 10px;
}

.arch-ticker.is-still > .arch-live-dot {
  background: var(--status-warn);
  box-shadow: 0 0 0 3px var(--status-warn-bg);
}

.arch-ticker.is-still > strong,
.arch-ticker.is-still .arch-ticker-track {
  color: var(--status-warn);
}

/* Soundbars Animation für Sprachausgabe */
.voice-bars-anim {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 12px;
}
.voice-bars-anim i {
  display: block;
  width: 2.5px;
  height: 10px;
  background: currentColor;
  border-radius: 2px;
  animation: soundBarBounce 0.7s infinite ease-in-out alternate;
}
.voice-bars-anim i:nth-child(2) { animation-delay: 0.15s; }
.voice-bars-anim i:nth-child(3) { animation-delay: 0.3s; }
.voice-bars-anim i:nth-child(4) { animation-delay: 0.45s; }

@keyframes soundBarBounce {
  0% { height: 3px; }
  100% { height: 12px; }
}

/* ---------- 13. RESPONSIVE ANPASSUNG (LAPTOP, TABLET, MOBIL) ---------- */
@media (max-width: 1180px) {
  .arch-activity-theater {
    width: calc(100vw - 290px);
  }
  .meeting-wall-left {
    width: 98px;
  }
  .meeting-wall-right {
    width: 108px;
  }
  .meeting-wall-right:has(.is-compact-grid) {
    width: 158px;
  }
}

@media (max-width: 960px) {
  :root {
    --topbar-h: auto;
  }
  .arch-topbar {
    position: sticky;
    height: auto;
    min-height: 54px;
    padding: 8px 12px;
    flex-wrap: wrap;
  }
  .arch-stage {
    margin-top: 0;
    height: calc(100vh - 104px - var(--statusbar-h));
  }
  .theater-stage {
    grid-template-columns: 1fr;
  }
  .theater-actor-card {
    flex-direction: row;
    text-align: left;
  }
  .theater-actor-media-wrapper {
    width: 68px;
    height: 68px;
  }
  .theater-actor-meta {
    align-items: flex-start;
  }
  .meeting-wall-left,
  .meeting-wall-right {
    display: none;
  }
  .arch-activity-theater {
    width: calc(100vw - 24px);
  }
  .arch-cards-2col,
  .arch-filter-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .arch-brand-text em,
  .foyer-customer-steps {
    display: none;
  }
  #win-foyer-chat.foyer-counter-chat-win {
    top: 12px;
    width: calc(100vw - 20px);
    height: calc(100% - 82px);
  }
  .win-centered-card,
  .win-centered-modal {
    width: calc(100vw - 20px);
  }
}

/* ==========================================================================
   14. OMA-EINFACH-MODUS (body.simple-mode) & VOLLSTÄNDIGER HERMES-KATALOG
   Maximale Ruhe, große gut lesbare Schrift, keine doppelten Leisten,
   kein versehentliches Wegklicken — bei 100 % Hermes-Fähigkeiten darunter.
   ========================================================================== */

/* Mikrofon-Button mit klarem Text „🎙️ Sprechen“ */
.foyer-mic-btn {
  width: auto;
  min-width: 44px;
  padding: 0 14px;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
}

/* Hermes-Fähigkeiten-Suche & Kern-Werkzeuge im Vorzimmer-Drawer */
.foyer-assistant-drawer {
  max-height: 360px;
}

.foyer-hermes-search-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 8px;
}

.hermes-core-tools-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 4px;
}

.hermes-tool-chip {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}

.hermes-tool-chip:hover {
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

/* Aufgeräumte 1:1 Stichpunkte & 1-Klick Original-Output (Inline) */
.theater-clean-points-list {
  margin: 10px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-primary);
}

.theater-inline-raw-details,
.msg-raw-toggle-details {
  margin-top: 10px;
  border-top: 1px dashed var(--border-strong);
  padding-top: 8px;
}

.theater-inline-raw-details summary,
.msg-raw-toggle-details summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  user-select: none;
}

.theater-inline-raw-pre,
.msg-raw-toggle-pre {
  margin: 8px 0 0;
  padding: 12px;
  max-height: 260px;
  overflow: auto;
  border-radius: 10px;
  background: var(--surface-code);
  color: var(--code-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* --- EINFACHE KUNDEN-ANSICHT ("90-Jährige-Oma-Standard" in body.simple-mode) --- */
body.simple-mode {
  --topbar-h: 64px;
}

/* Kopfleiste: Nur die klaren Hauptorte zeigen — Farb- & Sprachwahl liegen ruhig unter ⚙️ */
body.simple-mode .arch-topbar .arch-theme-switcher,
body.simple-mode .arch-topbar .arch-lang-switcher,
body.simple-mode .finder-kbd,
body.simple-mode .foyer-dock-wrap,
body.simple-mode #foyer-customer-steps,
body.simple-mode #btn-minimize-foyer-chat,
body.simple-mode .foyer-mode-switch,
body.simple-mode #btn-theater-minimize,
body.simple-mode .meeting-wall-left,
body.simple-mode .meeting-wall-right {
  display: none !important;
}

body.simple-mode .arch-topbar .arch-nav-btn {
  height: 42px;
  padding: 0 16px;
  font-size: 15px;
  border-radius: 11px;
}

body.simple-mode .arch-brand-text {
  font-size: 17px;
}

/* Vorzimmer: Ein einziges ruhiges, großes, helles Blatt in der Mitte */
body.simple-mode #win-foyer-chat.foyer-counter-chat-win {
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(880px, 94vw);
  height: calc(100% - 40px);
  max-height: 760px;
  border-radius: 20px;
}

body.simple-mode #win-foyer-chat .arch-win-bar {
  padding: 14px 20px;
  cursor: default;
}

body.simple-mode #foyer-win-title-label {
  font-size: 17px;
}

body.simple-mode .foyer-subtitle-label {
  font-size: 13px;
}

body.simple-mode .foyer-assistant-pill {
  height: 38px;
  padding: 0 14px;
  font-size: 14px;
  border-radius: 10px;
}

body.simple-mode .arch-win-messages {
  padding: 18px 22px;
  gap: 14px;
}

body.simple-mode .arch-msg {
  font-size: 16.5px;
  line-height: 1.62;
  padding: 14px 18px;
  border-radius: 16px;
}

body.simple-mode .foyer-greeting-msg {
  font-size: 17px;
}

body.simple-mode .foyer-skill-card {
  padding: 13px 15px;
  border-radius: 12px;
}

body.simple-mode .foyer-skill-card strong {
  font-size: 15px;
}

body.simple-mode .foyer-skill-card small {
  font-size: 13px;
  line-height: 1.45;
}

body.simple-mode .foyer-chip {
  font-size: 14px;
  padding: 9px 15px;
}

body.simple-mode #win-foyer-chat .foyer-inputbar {
  padding: 14px 18px;
  gap: 10px;
}

body.simple-mode #foyer-chat-input {
  height: 48px;
  font-size: 17px;
  padding: 0 16px;
  border-radius: 12px;
}

body.simple-mode .foyer-mic-btn,
body.simple-mode #btn-foyer-thought-to-room,
body.simple-mode #btn-foyer-send {
  height: 48px;
  font-size: 15px;
  padding: 0 18px;
  border-radius: 12px;
}

/* Räume-Übersicht: Große, gut lesbare Karten & Suchfeld */
body.simple-mode .rooms-instant-search-wrap {
  height: 46px;
}

body.simple-mode .rooms-instant-search {
  font-size: 16px;
}

body.simple-mode .rooms-cat-pill {
  height: 34px;
  padding: 0 14px;
  font-size: 13.5px;
}

body.simple-mode .arch-room-card strong.arch-room-card-title {
  font-size: 18px;
}

body.simple-mode .arch-room-card p.arch-room-card-goal {
  font-size: 14.5px;
  line-height: 1.5;
}

/* Im Raum: Eine ruhige, breite Hauptkarte ohne Seitenwand-Ablenkung */
body.simple-mode .arch-activity-theater {
  width: min(920px, 94vw);
  border-radius: 20px;
}

body.simple-mode .room-progress-text {
  font-size: 16px;
}

body.simple-mode .theater-action-headline {
  font-size: 19px;
}

body.simple-mode .theater-thought-bubble p {
  font-size: 16.5px;
  line-height: 1.62;
}

body.simple-mode .theater-footer .theater-btn {
  height: 40px;
  font-size: 14px;
  padding: 0 15px;
}

/* --- BENTLEY RUHE & DISKRETER NERD-BUTTON ("Full Conversation anzeigen") --- */
.foyer-nerd-pill,
.theater-nerd-btn,
#btn-pl-full-conversation {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  height: 34px !important;
  padding: 0 11px !important;
  border-radius: 9px !important;
  border: 1px dashed var(--border-strong) !important;
  background: var(--surface-subtle) !important;
  color: var(--text-secondary) !important;
  transition: all 0.16s ease !important;
}

.foyer-nerd-pill:hover,
.theater-nerd-btn:hover,
#btn-pl-full-conversation:hover {
  border-style: solid !important;
  border-color: var(--accent-border) !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
}

.msg-raw-toggle-details {
  margin-top: 8px;
  border-top: 0;
  padding-top: 2px;
}

.msg-raw-toggle-details summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px dashed var(--border-strong);
  background: var(--surface-card);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  list-style: none;
  transition: all 0.14s ease;
}

.msg-raw-toggle-details summary::-webkit-details-marker {
  display: none;
}

.msg-raw-toggle-details summary:hover,
.msg-raw-toggle-details[open] summary {
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--accent);
}

.arch-msg.is-waiting {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-weight: 500;
  background: var(--surface-card);
  border-color: var(--accent-border);
}

.bentley-wait-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bentley-wait-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.35;
  animation: bentleyDotPulse 1.2s infinite ease-in-out;
}

.bentley-wait-dots i:nth-child(2) {
  animation-delay: 0.2s;
}

.bentley-wait-dots i:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bentleyDotPulse {
  0%, 80%, 100% {
    opacity: 0.28;
    transform: scale(0.9);
  }
  40% {
    opacity: 1;
    transform: scale(1.15);
  }
}

.arch-msg {
  white-space: normal !important;
}

.arch-msg-body {
  white-space: pre-wrap;
  word-break: break-word;
}

/* Im Vorzimmer-Header kein doppelter "+ Neuer Raum"-Button (steht bereits oben in der Leiste & unten als "💡 Raum") */
#win-foyer-chat #btn-foyer-open-create {
  display: none !important;
}

/* Im Raum: Ruhiger Header ohne technische Doppel-Umschalter */
body.simple-mode .theater-mode-switcher,
body.simple-mode #btn-voice-guide-room {
  display: none !important;
}

/* Großzügiger Luftabstand oben & unten für das globale "Full Conversation · Hermes"-Fenster */
.win-raw-dialog {
  top: 52% !important;
  height: min(680px, calc(100vh - 148px)) !important;
  max-height: calc(100vh - 148px) !important;
}

/* ==========================================================================
   GOLD-VERSPIEGELTES EXKLUSIV-DESIGN (v9) — MARKENLOGO, GOLD-BUTTONS,
   VEKTOR-ICONS, TRESEN-REGISTRIERUNG, NVIDIA-ONBOARDING & VORZIMMER-GEDÄCHTNIS
   ========================================================================== */

/* Maßgeschneiderte Gold-Vektor-Icons */
.tikki-gold-svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  opacity: 0.92;
}

.arch-btn-gold .tikki-gold-svg,
.arch-nav-gold .tikki-gold-svg,
.theater-btn-gold .tikki-gold-svg,
.arch-mini-gold .tikki-gold-svg {
  stroke-width: 2.05;
  opacity: 1;
}

/* Kopfleiste & Statusleiste in verspiegeltem Champagner-Porzellan */
.arch-topbar {
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.95) 0%, rgba(244, 233, 211, 0.91) 100%) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(190, 140, 48, 0.45) !important;
  box-shadow: 0 4px 18px rgba(56, 36, 8, 0.08), inset 0 -1px 0 rgba(255, 253, 247, 0.72);
}

.arch-ticker {
  background: linear-gradient(180deg, rgba(249, 240, 224, 0.94) 0%, rgba(238, 225, 198, 0.97) 100%) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-top: 1px solid rgba(190, 140, 48, 0.45) !important;
  grid-template-columns: auto auto auto minmax(0, 1fr) !important;
}

/* Marken-Lockup: TIKKI · die KI Assistentin · made by consai.ai */
.arch-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.arch-brand-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 11px !important;
  object-fit: cover;
  border: 1.5px solid rgba(186, 136, 44, 0.65);
  box-shadow:
    0 4px 12px rgba(96, 64, 12, 0.22),
    inset 0 1px 0 rgba(255, 253, 245, 0.85);
}

.wiz-header-emblem {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid rgba(186, 136, 44, 0.6);
  box-shadow: 0 2px 8px rgba(82, 54, 10, 0.18);
  flex-shrink: 0;
}

.arch-brand-lockup {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.12;
}

.arch-brand-mainline {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
}

.arch-brand-text {
  font-size: 16.5px !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #5c3f0e 0%, #9b6c18 48%, #412b07 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: #3a2709;
}

.arch-brand-role {
  font-size: 12px;
  font-weight: 700;
  color: #5d4728;
  letter-spacing: -0.01em;
}

.arch-brand-maker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #8c6929;
}

/* BETA TEST · non public Kapsel (überall präsent) */
.tikki-beta-capsule {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 25px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf6 0%, #f1dfc0 52%, #e4ca98 100%);
  border: 1px solid rgba(176, 126, 36, 0.62);
  color: #3b2809;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow:
    0 2px 7px rgba(112, 74, 14, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.tikki-beta-capsule-sm {
  height: 21px;
  padding: 0 8px;
  font-size: 9.8px;
  letter-spacing: 0.05em;
}

.tikki-beta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #b57e1c;
  box-shadow: 0 0 0 2px rgba(196, 144, 46, 0.28);
  flex-shrink: 0;
}

/* Komplett neu gestaltete Gold-Verspiegelte Buttons */
.arch-btn-gold,
.arch-nav-btn.arch-nav-gold,
.theater-btn.theater-btn-gold,
.arch-mini-btn.arch-mini-gold {
  background: linear-gradient(180deg, #fffcf2 0%, #f4de9f 20%, #d4a74a 52%, #b58325 78%, #d6ac55 100%) !important;
  border: 1px solid #966814 !important;
  color: #201506 !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em;
  box-shadow:
    0 6px 16px rgba(132, 88, 16, 0.25),
    inset 0 1.5px 0 rgba(255, 254, 248, 0.95),
    inset 0 -1px 0 rgba(114, 76, 12, 0.35) !important;
}

.arch-btn-gold:hover,
.arch-nav-btn.arch-nav-gold:hover,
.theater-btn.theater-btn-gold:hover,
.arch-mini-btn.arch-mini-gold:hover {
  background: linear-gradient(180deg, #ffffff 0%, #faeaaf 22%, #dfb457 52%, #c18e2e 78%, #e2be6b 100%) !important;
  transform: translateY(-1px);
  box-shadow:
    0 8px 22px rgba(132, 88, 16, 0.32),
    inset 0 1.5px 0 #ffffff,
    inset 0 -1px 0 rgba(114, 76, 12, 0.35) !important;
}

.arch-nav-btn:not(.arch-nav-gold),
.theater-btn:not(.theater-btn-gold):not(.theater-btn-danger),
.arch-mini-btn:not(.arch-mini-gold),
.foyer-assistant-pill,
.foyer-chip,
.foyer-mic-btn,
.arch-win-mini {
  background: linear-gradient(180deg, #fffefb 0%, #f4ead6 100%);
  border: 1px solid rgba(184, 136, 48, 0.44);
  color: #2b1f0f;
  box-shadow:
    0 2px 7px rgba(68, 44, 8, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.arch-nav-btn:not(.arch-nav-gold):hover,
.theater-btn:not(.theater-btn-gold):not(.theater-btn-danger):hover,
.arch-mini-btn:not(.arch-mini-gold):hover,
.foyer-assistant-pill:hover,
.foyer-chip:hover,
.foyer-mic-btn:hover,
.arch-win-mini:hover {
  background: linear-gradient(180deg, #ffffff 0%, #efe0c2 100%);
  border-color: rgba(176, 126, 36, 0.68);
  color: #1f1507;
}

.arch-nav-icon-btn {
  padding: 0 12px !important;
  min-width: 42px;
}

/* 1) Bündiges Tresen-Inlay exakt im Mittel-Rechteck des Empfangstresens */
#win-tikki-welcome.is-tresen-inlay {
  position: absolute !important;
  left: 50%;
  top: 79.1%;
  transform: translate(-50%, -50%);
  width: min(356px, 24.7vw);
  min-width: 256px;
  min-height: 0;
  max-height: none;
  padding: 0;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(247, 236, 214, 0.94) 0%, rgba(230, 211, 178, 0.97) 100%);
  border: 1px solid rgba(172, 122, 38, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 242, 0.88),
    inset 0 -1px 0 rgba(146, 100, 26, 0.26),
    0 10px 26px rgba(56, 36, 8, 0.20);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: visible;
  z-index: 44;
}

#win-tikki-welcome.is-tresen-inlay .welcome-onboarding-bar,
#win-tikki-welcome.is-tresen-inlay .welcome-avatar-wrap {
  display: none !important;
}

#win-tikki-welcome.is-tresen-inlay .welcome-card-body {
  padding: 8px 11px 8px;
  gap: 5px;
  overflow: visible;
  justify-content: center;
}

.tresen-login-form {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin: 0;
}

.tresen-top-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.tresen-mode-pills {
  display: inline-flex;
  padding: 2px;
  border-radius: 7px;
  background: rgba(214, 190, 148, 0.45);
  border: 1px solid rgba(172, 122, 38, 0.36);
  gap: 2px;
}

.tresen-mode-pill {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 2px 9px;
  height: 20px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 700;
  color: #5c4627;
  cursor: pointer;
  transition: all 0.14s ease;
}

.tresen-mode-pill.is-active {
  background: linear-gradient(180deg, #fffdf7 0%, #f2dfb7 100%);
  color: #231807;
  box-shadow: 0 1px 4px rgba(72, 46, 8, 0.18), inset 0 1px 0 #ffffff;
}

.tresen-beta-micro {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b4e1e;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 250, 238, 0.72);
  border: 1px solid rgba(176, 126, 36, 0.42);
  white-space: nowrap;
}

.tresen-google-btn {
  appearance: none;
  width: 100%;
  height: 32px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid rgba(176, 128, 44, 0.66);
  background: linear-gradient(180deg, #fffefb 0%, #f4e7cd 100%);
  color: #261b0c;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 3px 9px rgba(74, 48, 10, 0.14), inset 0 1px 0 #ffffff;
  transition: all 0.15s ease;
}

.tresen-google-btn:hover {
  background: linear-gradient(180deg, #ffffff 0%, #faefda 100%);
  border-color: #ad7b22;
  transform: translateY(-0.5px);
}

.tresen-google-icon {
  flex-shrink: 0;
}

.tresen-inline-slot {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  height: 31px;
  padding: 2px 4px 2px 9px;
  border-radius: 8px;
  background: rgba(255, 253, 247, 0.92);
  border: 1px solid rgba(172, 124, 42, 0.48);
  box-shadow: inset 0 1px 3px rgba(68, 44, 10, 0.08);
}

.tresen-inline-slot.is-hidden {
  display: none !important;
}

.tresen-inline-slot:focus-within {
  background: #ffffff;
  border-color: #b88426;
  box-shadow: 0 0 0 2px rgba(196, 146, 56, 0.25);
}

.tresen-slot-input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 4px !important;
  height: 24px !important;
  font-size: 12.5px !important;
  font-weight: 600;
  color: #261c0e !important;
}

.tresen-slot-input::placeholder {
  color: #7d6646 !important;
  font-weight: 500;
}

.tresen-slot-go,
.tresen-slot-back {
  appearance: none;
  height: 23px;
  min-width: 27px;
  padding: 0 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.14s ease;
}

.tresen-slot-go {
  border: 1px solid #966814;
  background: linear-gradient(180deg, #fff8e6 0%, #e6c67c 45%, #be8e33 100%);
  color: #211606;
  box-shadow: inset 0 1px 0 rgba(255, 253, 245, 0.9);
}

.tresen-slot-go:hover {
  background: linear-gradient(180deg, #ffffff 0%, #efd28e 45%, #c9983d 100%);
}

.tresen-slot-back {
  border: 1px solid rgba(172, 124, 42, 0.42);
  background: rgba(244, 234, 214, 0.92);
  color: #5e4b30;
  margin-left: -4px;
}

#win-tikki-welcome.is-tresen-inlay .welcome-login-err {
  margin: 0;
  padding: 3px 7px;
  font-size: 10.5px;
  line-height: 1.28;
}

/* 2) Nach Registrierung / Login: Gold-Verspiegeltes NVIDIA & Google Onboarding direkt auf dem Vorzimmer */
#win-tikki-welcome.is-api-onboarding {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(670px, 94vw) !important;
  height: auto !important;
  max-height: calc(100% - 28px) !important;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 252, 245, 0.97) 0%, rgba(246, 237, 219, 0.96) 100%);
  border: 1.5px solid rgba(188, 138, 48, 0.58);
  box-shadow:
    0 34px 86px rgba(46, 29, 5, 0.30),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.94);
  z-index: 48;
}

#win-tikki-welcome.is-api-onboarding .welcome-avatar-wrap {
  display: none !important;
}

.nvidia-hero-card {
  padding: 14px 16px;
  border-radius: 15px;
  background: linear-gradient(180deg, #fffefb 0%, #f6ead2 100%);
  border: 1.5px solid rgba(184, 134, 42, 0.62);
  box-shadow: 0 8px 22px rgba(92, 60, 10, 0.10), inset 0 1px 0 #ffffff;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.nvidia-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.nvidia-hero-top strong {
  font-size: 14.5px;
  font-weight: 800;
  color: #24190a;
}

.nvidia-hero-top p {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: #5c482c;
}

.wiz-key-paste-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.wiz-key-paste-row input {
  flex: 1;
  height: 40px;
  padding: 0 13px;
  border-radius: 10px;
  border: 1px solid rgba(182, 132, 42, 0.52);
  background: #fffefb;
  color: #24190a;
  font-size: 13.5px;
  font-weight: 600;
  outline: none;
}

.wiz-key-paste-row input:focus {
  border-color: #b58021;
  box-shadow: 0 0 0 3px rgba(198, 148, 54, 0.22);
}

.wiz-provider-pills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.wiz-provider-pill {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(184, 136, 48, 0.46);
  background: linear-gradient(180deg, #fffefb 0%, #f3e6cc 100%);
  color: #2c1f0e;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff;
  transition: all 0.14s ease;
}

.wiz-provider-pill:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eddab4 100%);
  border-color: #a8761c;
  transform: translateY(-1px);
}

.wiz-free-pool-cta {
  padding: 11px 14px;
  border-radius: 13px;
  background: rgba(250, 242, 226, 0.85);
  border: 1px solid rgba(184, 136, 48, 0.38);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* 3) 500/Tag NVIDIA-Pool Kontingent-Anzeige & Warn-Banner alle 50 Anfragen */
.foyer-quota-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fffdf8 0%, #f0dfc0 100%);
  border: 1px solid rgba(182, 132, 42, 0.48);
  color: #5b4218;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.tikki-quota-warn-banner {
  margin: 10px 18px 0;
  padding: 11px 14px;
  border-radius: 13px;
  background: linear-gradient(180deg, #fffaf0 0%, #f5e2b8 100%);
  border: 1.5px solid #b9821f;
  box-shadow: 0 6px 18px rgba(132, 88, 16, 0.16), inset 0 1px 0 #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.tikki-quota-warn-text {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.tikki-quota-warn-text .tikki-gold-svg {
  width: 20px;
  height: 20px;
  color: #9b6811;
}

.tikki-quota-warn-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #241807;
}

.tikki-quota-warn-text span {
  display: block;
  font-size: 11.5px;
  color: #5e4726;
}

.tikki-quota-warn-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* 4) Vorzimmer: Persönlichkeits-Speicherung & Invited Beta Disclaimer Karte */
.foyer-memory-consent-card {
  margin: 12px 18px 4px;
  padding: 15px 17px;
  border-radius: 16px;
  background: linear-gradient(180deg, #fffefb 0%, #f6ecda 100%);
  border: 1.5px solid rgba(186, 136, 46, 0.56);
  box-shadow: 0 10px 26px rgba(74, 48, 10, 0.11), inset 0 1px 0 #ffffff;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex-shrink: 0;
}

.foyer-memory-card-top h4 {
  margin: 6px 0 3px;
  font-size: 15.5px;
  font-weight: 800;
  color: #24190a;
}

.foyer-memory-card-top p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #5a462b;
}

.foyer-memory-choices-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.foyer-memory-choice-btn {
  appearance: none;
  padding: 11px 13px;
  border-radius: 13px;
  border: 1px solid rgba(184, 136, 48, 0.46);
  background: linear-gradient(180deg, #fffefb 0%, #f3e6ce 100%);
  color: #261b0b;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 0 1px 0 #ffffff;
  transition: all 0.15s ease;
}

.foyer-memory-choice-btn.is-gold-choice {
  background: linear-gradient(180deg, #fffdf6 0%, #f5e2b6 55%, #ebd094 100%);
  border-color: #a8761c;
  box-shadow: 0 5px 14px rgba(128, 86, 16, 0.15), inset 0 1px 0 #ffffff;
}

.foyer-memory-choice-btn:hover {
  transform: translateY(-1px);
  border-color: #9c6c15;
  box-shadow: 0 7px 18px rgba(108, 72, 12, 0.18), inset 0 1px 0 #ffffff;
}

.foyer-memory-choice-btn.is-selected-choice {
  outline: 2px solid #9f7019;
  outline-offset: 1px;
}

.choice-icon-ring {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(255, 252, 244, 0.9);
  border: 1px solid rgba(182, 132, 42, 0.48);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8f6212;
  flex-shrink: 0;
}

.choice-copy strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #231808;
  margin-bottom: 2px;
}

.choice-copy span {
  display: block;
  font-size: 11.8px;
  line-height: 1.38;
  color: #5b472b;
}

.foyer-invited-disclaimer-box {
  padding: 9px 12px;
  border-radius: 10px;
  background: rgba(242, 229, 204, 0.65);
  border: 1px dashed rgba(168, 118, 36, 0.52);
  font-size: 11.3px;
  line-height: 1.44;
  color: #4f3c22;
}

.foyer-invited-disclaimer-box strong {
  color: #2a1d0b;
  margin-right: 4px;
}

.foyer-mini-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.api-onboarding-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.api-pillar-card {
  padding: 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf9 0%, #f6ecda 100%);
  border: 1px solid rgba(190, 144, 60, 0.36);
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.api-pillar-card strong {
  font-size: 12.8px;
  font-weight: 800;
  color: #2a2012;
}

.api-pillar-card span {
  font-size: 11.8px;
  line-height: 1.4;
  color: #5d4b32;
}

@media (max-width: 720px) {
  .foyer-hermes-search-bar,
  .api-onboarding-pillars,
  .foyer-memory-choices-grid,
  .wiz-key-paste-row {
    grid-template-columns: 1fr;
    flex-direction: column;
    align-items: stretch;
  }
  .mic-label-txt,
  .arch-brand-role {
    display: none;
  }
}

/* ==========================================================================
   V9 GOLD-MIRROR EMBEDDED ARCHITECTURE, NOUS RESEARCH & PLUGINS STUDIO
   Kein störendes Overlay: Eingebettete Konsolen im Vorzimmer & 2-Spalten-Raum
   ========================================================================== */

/* 1. Eingebettete Vorzimmer-Konsole */
#win-foyer-chat.is-embedded-console {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 72px !important;
  transform: translateX(-50%) !important;
  width: min(940px, calc(100vw - 36px)) !important;
  max-height: calc(100vh - 206px) !important;
  border-radius: 18px;
  border: 1px solid rgba(196, 148, 56, 0.48);
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(247, 239, 223, 0.95) 100%);
  box-shadow:
    0 20px 48px rgba(74, 51, 16, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    0 0 0 1px rgba(255, 248, 231, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.foyer-title-stack {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.18;
}

.foyer-secretary-stage {
  font-size: 11px;
  font-weight: 600;
  color: #8b6520;
  letter-spacing: 0.01em;
}

.tikki-queue-banner {
  background: linear-gradient(90deg, rgba(251, 238, 206, 0.95) 0%, rgba(245, 225, 180, 0.92) 100%);
  border-bottom: 1px solid rgba(188, 134, 34, 0.44);
}

/* 2. Klickbare Live-Hintergrund-Arbeit ("Bei der Arbeit zuschauen") */
.arch-msg-pending.is-clickable-watch {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(196, 148, 56, 0.46);
  background: linear-gradient(90deg, rgba(255, 252, 244, 0.96) 0%, rgba(246, 233, 204, 0.92) 50%, rgba(255, 252, 244, 0.96) 100%);
  background-size: 200% 100%;
  animation: tikkiGoldPulseBg 2.8s ease-in-out infinite;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.arch-msg-pending.is-clickable-watch:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(164, 118, 32, 0.18);
}

.watch-work-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.2px;
  font-weight: 700;
  color: #5b3f11;
  background: linear-gradient(180deg, #fbe8be 0%, #e7c274 100%);
  border: 1px solid rgba(168, 118, 30, 0.45);
  white-space: nowrap;
}

@keyframes tikkiGoldPulseBg {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* 3. Eingebettetes 2-Spalten-Gold-Studio im Projektraum (Kein Overlay!) */
#view-room-detail .arch-meeting-scene {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar-h, 58px) - var(--ticker-h, 30px));
  overflow: hidden;
}

.room-embedded-studio {
  position: relative;
  z-index: 6;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(350px, 0.82fr);
  gap: 16px;
  padding: 16px 22px 18px;
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  box-sizing: border-box;
  align-items: stretch;
}

#win-room-activity-player.is-embedded-panel,
#win-projektleiter-chat.is-embedded-panel {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(196, 148, 56, 0.46) !important;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(248, 240, 225, 0.95) 100%) !important;
  box-shadow:
    0 16px 40px rgba(74, 51, 16, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
}

#win-room-activity-player.is-embedded-panel .theater-stage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

#win-projektleiter-chat.is-embedded-panel #pl-chat-messages {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto;
  padding: 14px 16px;
}

.pl-embedded-header {
  cursor: default !important;
  padding: 11px 14px !important;
  border-bottom: 1px solid rgba(196, 148, 56, 0.28);
}

.room-collab-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.2px;
  font-weight: 700;
  color: #5b3f11;
  background: linear-gradient(180deg, #fcf2da 0%, #edd39c 100%);
  border: 1px solid rgba(182, 132, 40, 0.45);
  white-space: nowrap;
}

.room-collab-pill.is-single-model {
  background: rgba(255, 251, 242, 0.9);
  color: #6b5635;
  border-color: rgba(182, 148, 92, 0.38);
}

/* 4. Nous Research Karte, Menschliche API-Erklärung & Plugins-Grid */
.nous-partner-card {
  background: linear-gradient(135deg, #fffdf8 0%, #f8ebd0 60%, #f1dcaf 100%) !important;
  border: 1px solid rgba(186, 136, 42, 0.54) !important;
  box-shadow: 0 10px 26px rgba(132, 92, 20, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.plugins-update-card {
  background: linear-gradient(180deg, #fffdf9 0%, #f6ecd7 100%) !important;
  border: 1px solid rgba(188, 140, 48, 0.44) !important;
}

.plugins-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
  gap: 12px;
}

.plugin-card-gold {
  padding: 14px 15px;
  border-radius: 14px;
  background: linear-gradient(180deg, #fffefb 0%, #f7efe0 100%);
  border: 1px solid rgba(190, 144, 60, 0.38);
  box-shadow: 0 6px 16px rgba(84, 58, 18, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

.plugin-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.plugin-card-head strong {
  font-size: 13.8px;
  font-weight: 800;
  color: #281d0e;
}

.plugin-card-cat {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(214, 174, 96, 0.22);
  color: #745116;
  border: 1px solid rgba(182, 134, 42, 0.32);
}

.plugin-card-desc {
  margin: 0;
  font-size: 12.2px;
  line-height: 1.45;
  color: #55432a;
}

.plugin-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 6px;
  border-top: 1px solid rgba(190, 144, 60, 0.2);
}

.plugin-local-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.6px;
  font-weight: 600;
  color: #5b4628;
  cursor: pointer;
}

.human-cap-callout {
  margin: 6px 0 8px;
  padding: 8px 11px;
  border-radius: 10px;
  background: rgba(248, 236, 210, 0.68);
  border-left: 3px solid #c59233;
  font-size: 12.1px;
  line-height: 1.42;
  color: #3f2e16;
}

@media (max-width: 1040px) {
  #view-room-detail .arch-meeting-scene {
    height: auto;
    min-height: calc(100vh - var(--topbar-h, 58px) - var(--ticker-h, 30px));
    overflow-y: auto;
  }
  .room-embedded-studio {
    grid-template-columns: 1fr;
    height: auto;
  }
  #win-room-activity-player.is-embedded-panel,
  #win-projektleiter-chat.is-embedded-panel {
    height: auto !important;
    min-height: 420px !important;
  }
  #win-foyer-chat.is-embedded-console {
    width: calc(100vw - 20px) !important;
    bottom: 64px !important;
  }
}


/* ==========================================================================
   V10 TRUE 3D ARCHITECTURAL CONSTRUCT (MILLED INTO & EXTRUDED OUT OF GRAPHICS)
   100 % bündig im Tresen-Quadrat & oberen Glasfeld – NULL verdeckende Fenster!
   ========================================================================== */

/* 1. 3D-Taktile Gold-Barren-Buttons & Porzellan-Tasten (aus dem Konstrukt herausgearbeitet) */
.arch-btn-gold,
.arch-nav-btn.arch-nav-gold,
.theater-btn.theater-btn-gold,
.arch-mini-btn.arch-mini-gold,
.tresen-slot-go,
.tresen-provider-3d-key.is-gold-bullion {
  background: linear-gradient(180deg, #fffef6 0%, #f8e5ac 20%, #ddb152 54%, #b68222 82%, #d8ae54 100%) !important;
  border: 1px solid #8f6211 !important;
  color: #1f1404 !important;
  font-weight: 800 !important;
  text-shadow: 0 1px 0 rgba(255, 252, 238, 0.72);
  box-shadow:
    0 3px 0 #754e0b,
    0 6px 14px rgba(48, 30, 4, 0.24),
    inset 0 1.5px 0 rgba(255, 255, 248, 0.96),
    inset 0 -1px 0 rgba(118, 78, 12, 0.35) !important;
  transition: transform 0.11s ease, box-shadow 0.11s ease, filter 0.14s ease !important;
}

.arch-btn-gold:hover,
.arch-nav-btn.arch-nav-gold:hover,
.theater-btn.theater-btn-gold:hover,
.arch-mini-btn.arch-mini-gold:hover,
.tresen-slot-go:hover,
.tresen-provider-3d-key.is-gold-bullion:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
  box-shadow:
    0 4px 0 #754e0b,
    0 8px 18px rgba(48, 30, 4, 0.28),
    inset 0 1.5px 0 #ffffff,
    inset 0 -1px 0 rgba(118, 78, 12, 0.35) !important;
}

.arch-btn-gold:active,
.arch-nav-btn.arch-nav-gold:active,
.theater-btn.theater-btn-gold:active,
.arch-mini-btn.arch-mini-gold:active,
.tresen-slot-go:active,
.tresen-provider-3d-key.is-gold-bullion:active {
  transform: translateY(2px) !important;
  box-shadow:
    0 1px 0 #754e0b,
    0 2px 5px rgba(48, 30, 4, 0.22),
    inset 0 1px 3px rgba(64, 40, 4, 0.25) !important;
}

.arch-nav-btn:not(.arch-nav-gold),
.theater-btn:not(.theater-btn-gold):not(.theater-btn-danger),
.arch-mini-btn:not(.arch-mini-gold),
.foyer-assistant-pill,
.foyer-chip,
.foyer-mic-btn,
.arch-win-mini,
.tresen-google-btn,
.tresen-micro-3d-btn,
.tresen-provider-3d-key:not(.is-gold-bullion) {
  background: linear-gradient(180deg, #fffefb 0%, #f5ebd8 62%, #eadbc0 100%) !important;
  border: 1px solid rgba(176, 128, 42, 0.56) !important;
  color: #271b0b !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  box-shadow:
    0 2.5px 0 #bfa474,
    0 5px 11px rgba(48, 31, 6, 0.14),
    inset 0 1.5px 0 #ffffff !important;
  transition: transform 0.11s ease, box-shadow 0.11s ease, background 0.14s ease !important;
}

.arch-nav-btn:not(.arch-nav-gold):hover,
.theater-btn:not(.theater-btn-gold):not(.theater-btn-danger):hover,
.arch-mini-btn:not(.arch-mini-gold):hover,
.foyer-assistant-pill:hover,
.foyer-chip:hover,
.foyer-mic-btn:hover,
.arch-win-mini:hover,
.tresen-google-btn:hover,
.tresen-micro-3d-btn:hover,
.tresen-provider-3d-key:not(.is-gold-bullion):hover {
  background: linear-gradient(180deg, #ffffff 0%, #faefdc 60%, #f0e1c6 100%) !important;
  border-color: #a6751d !important;
  transform: translateY(-1px);
}

.arch-nav-btn:not(.arch-nav-gold):active,
.theater-btn:not(.theater-btn-gold):not(.theater-btn-danger):active,
.arch-mini-btn:not(.arch-mini-gold):active,
.foyer-assistant-pill:active,
.foyer-chip:active,
.foyer-mic-btn:active,
.arch-win-mini:active,
.tresen-google-btn:active,
.tresen-micro-3d-btn:active,
.tresen-provider-3d-key:not(.is-gold-bullion):active {
  transform: translateY(1.5px) !important;
  box-shadow:
    0 1px 0 #bfa474,
    0 2px 4px rgba(48, 31, 6, 0.12),
    inset 0 1px 3px rgba(58, 38, 6, 0.16) !important;
}

/* 2. 3D-Gefräste Eingabe-Schlitze (in das Porzellan / Gold-Paneel eingelassen) */
.tresen-inline-slot,
.arch-search,
.arch-textarea,
#pl-chat-input {
  background: linear-gradient(180deg, #e7d9be 0%, #f8f1e4 36%, #fffdf8 100%) !important;
  border: 1px solid rgba(164, 118, 34, 0.58) !important;
  box-shadow:
    inset 0 3px 6px rgba(46, 28, 4, 0.20),
    inset 0 1px 2px rgba(34, 20, 2, 0.18),
    0 1.5px 0 rgba(255, 253, 245, 0.94) !important;
}

/* 3. TRESEN-INLAY (Login & Post-Login Key-Dock) — 100 % bündig in das Tresen-Quadrat gefräst */
body #win-tikki-welcome.is-tresen-inlay,
body.simple-mode #win-tikki-welcome.is-tresen-inlay {
  position: absolute !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #e5d5b7 0%, #f5ecdc 38%, #efe2ca 100%) !important;
  border: 1.5px solid rgba(188, 138, 46, 0.72) !important;
  box-shadow:
    inset 0 4px 10px rgba(44, 27, 4, 0.26),
    inset 0 1px 2px rgba(32, 18, 2, 0.22),
    inset 0 -2px 5px rgba(255, 252, 242, 0.72),
    0 1.5px 0 rgba(255, 253, 245, 0.92),
    0 10px 24px rgba(42, 26, 4, 0.16) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: hidden !important;
  z-index: 44 !important;
}

body #win-tikki-welcome.is-tresen-inlay .welcome-card-body {
  padding: 8px 10px 9px !important;
  gap: 5px !important;
}

/* 3D Key-Dock im Tresen nach Registrierung / Login */
.tresen-key-dock-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.tresen-key-dock-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tresen-key-dock-title {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tresen-key-dock-title strong {
  font-size: 12.5px;
  font-weight: 800;
  color: #231706;
}

.tresen-key-dock-title em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: #6b4d1b;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tresen-key-dock-head-btns {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.tresen-micro-3d-btn {
  appearance: none;
  height: 24px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.tresen-go-3d-btn {
  height: 25px !important;
  padding: 0 11px !important;
  border-radius: 7px !important;
  font-size: 11.4px !important;
  white-space: nowrap;
}

.tresen-provider-3d-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}

.tresen-provider-3d-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: 11.3px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.tresen-family-ready-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 9px;
  border-radius: 8px;
  background: rgba(255, 252, 244, 0.78);
  border: 1px solid rgba(182, 134, 42, 0.42);
  font-size: 11.5px;
  font-weight: 700;
  color: #3a2910;
}

.tresen-key-slot {
  height: 31px !important;
}

/* 4. VORZIMMER 3D-KONSTRUKT (#win-foyer-chat.is-3d-foyer-construct):
      Unsichtbarer Vollflächen-Träger; nur das Tresen-Pult unten & Glas-Feld oben sind physisch! */
body #win-foyer-chat.foyer-counter-chat-win.is-3d-foyer-construct,
body.simple-mode #win-foyer-chat.foyer-counter-chat-win.is-3d-foyer-construct,
body #win-foyer-chat.is-embedded-console.is-3d-foyer-construct {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
  overflow: visible !important;
  z-index: 32 !important;
}

/* TEIL B (UNTEN): 3D-Gefrästes Tresen-Steuerpult direkt in der Porzellan-Front des Tresens */
body #foyer-tresen-console,
body.simple-mode #foyer-tresen-console {
  pointer-events: auto !important;
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 7px 10px 8px !important;
  border-radius: 13px !important;
  background: linear-gradient(180deg, #e5d5b7 0%, #f6eddd 38%, #ede0c7 100%) !important;
  border: 1.5px solid rgba(190, 140, 48, 0.76) !important;
  box-shadow:
    inset 0 4px 11px rgba(45, 28, 4, 0.26),
    inset 0 1px 2px rgba(32, 18, 2, 0.22),
    inset 0 -2px 4px rgba(255, 253, 244, 0.72),
    0 1.5px 0 rgba(255, 253, 245, 0.94),
    0 10px 24px rgba(40, 25, 4, 0.16) !important;
  box-sizing: border-box;
  z-index: 35;
}

body #foyer-tresen-console .foyer-friendly-header,
body.simple-mode #foyer-tresen-console .arch-win-bar {
  padding: 0 2px 3px !important;
  margin: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(182, 134, 42, 0.28) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 6px !important;
  flex-wrap: nowrap !important;
}

body #foyer-tresen-console .arch-win-title {
  gap: 6px !important;
  min-width: 0;
  overflow: hidden;
}

body #foyer-tresen-console .foyer-mini-avatar {
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
}

body #foyer-tresen-console #foyer-win-title-label {
  font-size: 12.5px !important;
  line-height: 1.05 !important;
}

body #foyer-tresen-console .foyer-secretary-stage {
  font-size: 9.8px !important;
  line-height: 1.05 !important;
  white-space: nowrap;
}

body #foyer-tresen-console .foyer-header-tools {
  gap: 4px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0;
}

body #foyer-tresen-console .foyer-mode-switch {
  padding: 1.5px !important;
  border-radius: 7px !important;
  background: rgba(206, 180, 134, 0.42) !important;
  border: 1px solid rgba(172, 124, 38, 0.38) !important;
}

body #foyer-tresen-console .foyer-mode-pill {
  height: 20px !important;
  padding: 0 7px !important;
  font-size: 10.5px !important;
  border-radius: 5px !important;
}

body #foyer-tresen-console .foyer-assistant-pill,
body.simple-mode #foyer-tresen-console .foyer-assistant-pill {
  height: 23px !important;
  padding: 0 8px !important;
  font-size: 10.8px !important;
  border-radius: 7px !important;
  gap: 4px !important;
  white-space: nowrap;
}

body #foyer-tresen-console .foyer-assistant-pill .tikki-gold-svg {
  width: 12.5px !important;
  height: 12.5px !important;
}

body #foyer-tresen-console .foyer-quota-pill {
  height: 21px !important;
  padding: 0 7px !important;
  font-size: 10.2px !important;
}

body #foyer-tresen-console #foyer-chat-form,
body.simple-mode #foyer-tresen-console .foyer-inputbar {
  padding: 3px 4px !important;
  margin: 0 !important;
  gap: 5px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(164, 116, 32, 0.62) !important;
  background: linear-gradient(180deg, #e4d4b6 0%, #f9f2e5 42%, #fffdf9 100%) !important;
  box-shadow:
    inset 0 3px 7px rgba(44, 27, 4, 0.22),
    inset 0 1px 2px rgba(32, 18, 2, 0.18),
    0 1px 0 rgba(255, 253, 246, 0.94) !important;
  align-items: center !important;
}

body #foyer-tresen-console #foyer-chat-input,
body.simple-mode #foyer-tresen-console #foyer-chat-input {
  height: 29px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 0 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #211606 !important;
}

body #foyer-tresen-console .foyer-mic-btn,
body #foyer-tresen-console #btn-foyer-thought-to-room,
body #foyer-tresen-console #btn-foyer-send,
body.simple-mode #foyer-tresen-console .foyer-mic-btn,
body.simple-mode #foyer-tresen-console #btn-foyer-thought-to-room,
body.simple-mode #foyer-tresen-console #btn-foyer-send {
  height: 28px !important;
  padding: 0 10px !important;
  font-size: 11.6px !important;
  border-radius: 7px !important;
  gap: 4px !important;
}

body #foyer-tresen-console .foyer-quick-chips,
body #win-foyer-chat.has-active-dialog #foyer-tresen-console .foyer-quick-chips {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
}

body #foyer-tresen-console .foyer-chip,
body.simple-mode #foyer-tresen-console .foyer-chip {
  flex: 1 1 0;
  justify-content: center;
  height: 23px !important;
  padding: 0 7px !important;
  font-size: 10.8px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  white-space: nowrap;
}

body #foyer-tresen-console .foyer-chip .tikki-gold-svg {
  width: 12px !important;
  height: 12px !important;
}

/* TEIL A (OBEN): Holografisches Champagner-Glas-Display im oberen Glasfeld über Tikki (bei Ruhe unsichtbar!) */
body #foyer-upper-glass-bay {
  pointer-events: auto !important;
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 16px !important;
  background: linear-gradient(180deg, rgba(253, 248, 238, 0.85) 0%, rgba(244, 233, 212, 0.81) 100%) !important;
  border: 1.5px solid rgba(202, 154, 62, 0.68) !important;
  box-shadow:
    0 14px 34px rgba(38, 24, 4, 0.17),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.94),
    inset 0 -2px 6px rgba(156, 112, 28, 0.16) !important;
  backdrop-filter: blur(13px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.16) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 34;
}

body #foyer-upper-glass-bay.is-idle-tucked {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateX(-50%) translateY(-8px) scale(0.985) !important;
}

.foyer-glass-bezel-bar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 12px;
  background: linear-gradient(180deg, rgba(252, 245, 230, 0.94) 0%, rgba(242, 229, 204, 0.90) 100%);
  border-bottom: 1px solid rgba(188, 140, 48, 0.36);
  flex-shrink: 0;
}

.foyer-glass-bezel-title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: #4a3516;
}

body #foyer-upper-glass-bay .foyer-memory-consent-card {
  margin: 8px 12px 6px !important;
  padding: 10px 12px !important;
  gap: 7px !important;
  border-radius: 12px !important;
}

body #foyer-upper-glass-bay .foyer-memory-card-top h4 {
  font-size: 13.4px !important;
  margin: 3px 0 2px !important;
}

body #foyer-upper-glass-bay .foyer-memory-card-top p {
  font-size: 11.6px !important;
  line-height: 1.32 !important;
}

body #foyer-upper-glass-bay .foyer-memory-choice-btn {
  padding: 7px 10px !important;
  border-radius: 10px !important;
  gap: 8px !important;
}

body #foyer-upper-glass-bay .choice-icon-ring {
  width: 26px !important;
  height: 26px !important;
}

body #foyer-upper-glass-bay .choice-copy strong {
  font-size: 12px !important;
}

body #foyer-upper-glass-bay .choice-copy span {
  font-size: 10.9px !important;
  line-height: 1.28 !important;
}

body #foyer-upper-glass-bay .foyer-invited-disclaimer-box {
  padding: 6px 9px !important;
  font-size: 10.4px !important;
  line-height: 1.32 !important;
}

body #foyer-upper-glass-bay .tikki-quota-warn-banner {
  margin: 7px 12px 0 !important;
  padding: 8px 11px !important;
}

body #foyer-upper-glass-bay #foyer-chat-messages,
body.simple-mode #foyer-upper-glass-bay .arch-win-messages {
  padding: 9px 13px 11px !important;
  gap: 8px !important;
  max-height: none !important;
  overflow: visible !important;
}

body #foyer-upper-glass-bay .arch-msg,
body.simple-mode #foyer-upper-glass-bay .arch-msg {
  font-size: 13.8px !important;
  line-height: 1.48 !important;
  padding: 9px 13px !important;
  border-radius: 12px !important;
}

/* 5. PROJEKTRAUM (#view-room-detail): Durchscheinendes 3D-Champagner-Glas-Studio im Gold-Konstrukt */
#view-room-detail #room-top-header-pill {
  display: none !important;
}

#win-room-activity-player.is-embedded-panel,
#win-projektleiter-chat.is-embedded-panel {
  background: linear-gradient(180deg, rgba(252, 246, 235, 0.82) 0%, rgba(244, 233, 213, 0.77) 100%) !important;
  border: 1.5px solid rgba(198, 150, 56, 0.62) !important;
  box-shadow:
    0 16px 38px rgba(48, 31, 6, 0.16),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.94),
    inset 0 -2px 6px rgba(154, 110, 28, 0.14) !important;
  backdrop-filter: blur(13px) saturate(1.14) !important;
  -webkit-backdrop-filter: blur(13px) saturate(1.14) !important;
}

/* Schlanke einzeilige Gold-Kopfleiste & 2-Spalten-Studio auch auf mittleren Bildschirmen (ab 860px) */
body .arch-topbar,
body.simple-mode .arch-topbar {
  flex-wrap: nowrap !important;
  gap: 10px !important;
  padding: 0 16px !important;
}

@media (max-width: 1260px) {
  body .arch-topbar .arch-brand-role {
    display: none !important;
  }
  body .arch-topbar .arch-nav-btn,
  body.simple-mode .arch-topbar .arch-nav-btn {
    height: 34px !important;
    padding: 0 11px !important;
    font-size: 12.5px !important;
  }
  body .arch-topbar .tikki-beta-capsule {
    padding: 0 8px !important;
    font-size: 9.5px !important;
  }
}

@media (min-width: 861px) and (max-width: 1040px) {
  #view-room-detail .arch-meeting-scene {
    height: calc(100vh - var(--topbar-h, 58px) - var(--ticker-h, 30px)) !important;
    overflow: hidden !important;
  }
  .room-embedded-studio {
    grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr) !important;
    gap: 12px !important;
    padding: 12px 14px 14px !important;
  }
  #win-room-activity-player.is-embedded-panel,
  #win-projektleiter-chat.is-embedded-panel {
    height: 100% !important;
    min-height: 0 !important;
  }
}

@media (max-width: 820px) {
  body #foyer-tresen-console .foyer-mode-switch,
  body #foyer-tresen-console .foyer-secretary-stage {
    display: none !important;
  }
  .tresen-provider-3d-row {
    grid-template-columns: 1fr;
  }
}