:root {
  --bg: #09090b;
  --bg-soft: #111114;
  --panel: rgba(255, 255, 255, 0.05);
  --panel-strong: rgba(255, 255, 255, 0.07);
  --border: rgba(255, 255, 255, 0.08);
  --text: #f5f7fb;
  --muted: #9ea4b3;
  --accent: #7c5cff;
  --success: #2ecc71;
  --danger: #ff5f5f;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 16px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background:
    radial-gradient(circle at top left, rgba(124, 92, 255, 0.16), transparent 28%),
    linear-gradient(180deg, #08080a 0%, #0b0b10 100%);
  color: var(--text);
  font-family: Inter, Arial, sans-serif;
  min-height: 100%;
}

.page {
  width: 100%;
  min-height: 100vh;
  padding: 24px;
}

.shell {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.shell-single {
  width: 100%;
}

.bot-hero,
.main-panel {
  backdrop-filter: blur(22px);
  background: var(--panel);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.bot-hero {
  border-radius: var(--radius-xl);
  padding: 22px 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.bot-hero-main {
  flex: 1;
  min-width: 0;
}

.bot-hero-text {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.6;
  max-width: 760px;
}

.bot-hero-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 220px));
  gap: 12px;
  flex-shrink: 0;
}

.main-panel {
  border-radius: var(--radius-xl);
  min-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: visible;
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.brand-title {
  font-size: 1.25rem;
  font-weight: 700;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.92rem;
}

.badge.is-online {
  color: #d9ffe8;
  background: rgba(46, 204, 113, 0.12);
}

.badge.is-offline {
  color: #ffe1e1;
  background: rgba(255, 95, 95, 0.12);
}

.sidebar-card,
.stat-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 14px;
}

.sidebar-label,
.label {
  color: var(--muted);
  font-size: 0.84rem;
  margin-bottom: 6px;
}

.sidebar-value,
.value {
  font-size: 1rem;
  font-weight: 600;
}

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 16px;
}

.sidebar-actions {
  margin-top: 18px;
}

.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 16px;
}

.btn.primary {
  background: linear-gradient(135deg, var(--accent) 0%, #5c8dff 100%);
  border-color: transparent;
  color: #fff;
}

.topbar {
  padding: 18px 24px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(10, 10, 14, 0.94);
  backdrop-filter: blur(18px);
  z-index: 50;
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}

.topbar-sticky {
  position: sticky;
  top: 0;
}

.topbar-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.topbar-title {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 6px;
}

.topbar-subtitle {
  margin: 0;
  color: var(--muted);
}

.status-row {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.92rem;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--success);
}

.status-dot.offline {
  background: var(--danger);
}

.messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.message {
  display: flex;
  width: 100%;
}

.message.user {
  justify-content: flex-end;
}

.message.assistant {
  justify-content: flex-start;
}

.bubble {
  max-width: min(760px, 88%);
  padding: 16px 18px;
  border-radius: 22px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.05);
  line-height: 1.7;
}

.message.assistant .bubble .code-block {
  margin-left: -2px;
  margin-right: -2px;
}

.message.user .bubble {
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.24), rgba(92, 141, 255, 0.18));
}

.message-role {
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 700;
}

.message-content {
  font-size: 0.98rem;
  color: var(--text);
  word-wrap: break-word;
}

.message-meta {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 0.82rem;
  color: var(--muted);
}

.composer {
  padding: 18px 24px 24px;
  border-top: 1px solid var(--border);
  background: rgba(10, 10, 14, 0.92);
  backdrop-filter: blur(18px);
}

.composer-sticky {
  position: sticky;
  bottom: 0;
  z-index: 20;
}

.composer-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end;
}

.composer textarea {
  width: 100%;
  min-height: 84px;
  max-height: 220px;
  border-radius: 18px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  color: var(--text);
  resize: none;
  overflow-y: auto;
  line-height: 1.5;
  font-size: 16px;
}

.composer .btn.primary {
  min-width: 140px;
  height: 84px;
  border-radius: 18px;
  font-weight: 700;
  font-size: 16px;
}

.typing {
  display: inline-flex;
  gap: 6px;
}

.typing span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #c5cad6;
  animation: blink 1.2s infinite ease-in-out;
}

.typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.typing span:nth-child(3) {
  animation-delay: 0.3s;
}

.footer-note {
  color: var(--muted);
  font-size: 0.82rem;
  margin-top: 14px;
  line-height: 1.6;
}

@keyframes blink {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.35;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

@media (max-width: 980px) {
  .shell {
    gap: 16px;
  }

  .bot-hero {
    flex-direction: column;
  }

  .bot-hero-cards {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .main-panel {
    min-height: auto;
  }

  .topbar-main {
    flex-direction: column;
    align-items: stretch;
  }

  .topbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 680px) {
  .page {
    padding: 14px;
  }

  .bot-hero {
    padding: 18px 16px;
  }

  .image-upload-block {
    padding-left: 16px;
    padding-right: 16px;
  }

  .topbar-actions {
    flex-direction: column;
  }

  .topbar-actions .btn {
    width: 100%;
  }

  .topbar,
  .messages,
  .composer {
    padding-left: 16px;
    padding-right: 16px;
  }

  .bubble {
    max-width: 100%;
  }

  .composer-form {
    grid-template-columns: 1fr;
  }

  .composer .btn.primary {
    width: 100%;
    height: 56px;
  }
}

.code-language {
  font-size: 12px;
  opacity: 0.75;
  text-transform: lowercase;
}

.copy-code-btn {
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  background: rgba(255,255,255,0.88);
  color: #111;
}

.code-block {
  margin: 14px 0 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  background: #0b0f17;
  box-shadow: none;
}

.code-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #141925;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.code-block pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  white-space: pre;
  background: #0b0f17;
}

.code-block code {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 13px;
  line-height: 1.55;
  color: #f5f7fb;
}

.code-language {
  font-size: 12px;
  opacity: 0.8;
  text-transform: lowercase;
  font-weight: 600;
}


.copy-message-btn {
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  background: rgba(255,255,255,0.08);
  color: #fff;
}

.copy-code-btn {
  border: 0;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  background: rgba(255,255,255,0.1);
  color: #fff;
}

.message code:not(pre code) {
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.08);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.messages img {
  max-width: 100%;
  border-radius: 14px;
  margin-top: 10px;
}

.message-content pre,
.message-content code {
  font-variant-ligatures: none;
}

.message-content > .code-block {
  max-width: 100%;
}

.code-block pre::-webkit-scrollbar {
  height: 10px;
}

.code-block pre::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}

.preview {
  margin-top: 10px;
}

.preview img {
  max-width: 200px;
  border-radius: 12px;
  display: block;
}
.message-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}
/* Größere Schrift im Eingabefeld + kein iPhone-Zoom */
input,
textarea {
  font-size: 16px !important;
}
/* Stats ausblenden */
.stats-grid,
.stat-card {
  display: none !important;
}
.image-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.image-preview-item {
  position: relative;
  width: 90px;
}

.image-preview-thumb {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--border);
  display: block;
}

.image-remove-btn {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.image-preview-name {
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-image-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.chat-image-item {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.04);
}

.chat-image-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.upload-controls {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.typing-bubble {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.typing-status-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.typing-text {
  font-size: 14px;
  opacity: 0.9;
}
#loginScreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}

.login-card {
  width: 100%;
  max-width: 420px;
  padding: 32px;
  border-radius: 18px;
  background: #111;
  color: #fff;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.login-card h1 {
  margin-top: 0;
  margin-bottom: 10px;
}

.login-subtext {
  margin-bottom: 20px;
  opacity: 0.8;
}

.login-card input {
  width: 100%;
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid #333;
  background: #1b1b1b;
  color: #fff;
  box-sizing: border-box;
  font-size: 16px;
}

.login-card button {
  width: 100%;
  margin-top: 4px;
}

.login-error {
  min-height: 20px;
  margin-top: 12px;
  color: #ff7b7b;
}

.user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
}
.messages {
  scroll-padding-top: 120px;
  scroll-padding-bottom: 150px;
}

.message {
  scroll-margin-top: 110px;
  scroll-margin-bottom: 120px;
}

.bot-select-title {
  color: var(--muted);
  font-size: 0.95rem;
}

.bot-select-description {
  margin: 0;
  color: var(--text);
  line-height: 1.7;
}

.bot-select-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
}

.bot-select-model {
  font-size: 0.86rem;
  color: var(--muted);
}

.bot-select-open {
  font-size: 0.92rem;
  font-weight: 700;
}

@media (max-width: 980px) {
  .landing-hero-inner {
    flex-direction: column;
  }

  .landing-hero-actions {
    align-items: flex-start;
    min-width: auto;
  }

  .bot-grid {
    grid-template-columns: 1fr;
  }
}
.document-preview-list,
.chat-document-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.document-preview-item,
.chat-document-item {
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  font-size: 14px;
  color: var(--text);
}

.document-preview-name {
  padding-right: 8px;
  word-break: break-word;
}
.document-preview-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 10px 36px 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  font-size: 14px;
  color: var(--text);
}

.document-remove-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  line-height: 1;
}
.chat-export-row {
  margin-top: 12px;
}

.chat-export-item {
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.chat-export-item:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-1px);
}

.chat-export-label {
  font-size: 13px;
  opacity: 0.82;
  margin-bottom: 6px;
  color: var(--text);
}

.chat-export-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  word-break: break-word;
}

.chat-export-hint {
  display: none;
}
.conversation-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  margin: 0 0 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-md);
}

.conversation-select-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.conversation-label {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
}

.conversation-select {
  width: 100%;
  min-width: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}

.conversation-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.conversation-btn {
  padding: 9px 12px;
  font-size: 13px;
}

.danger-soft {
  color: #ffb4b4;
}

@media (max-width: 700px) {
  .conversation-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .conversation-select-wrap {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .conversation-actions {
    width: 100%;
  }

  .conversation-actions .btn {
    flex: 1;
  }
}
.conversation-busy-hint {
  font-size: 13px;
  color: var(--muted);
  align-self: center;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .conversation-busy-hint {
    width: 100%;
    text-align: center;
  }
}
#sendBtn.is-stop {
  background: rgba(255, 95, 95, 0.14);
  color: #ffb4b4;
  border-color: rgba(255, 95, 95, 0.25);
}

#sendBtn.is-stop:hover {
  background: rgba(255, 95, 95, 0.22);
}
/* === UI Refresh April 2026 === */

html {
  scroll-behavior: auto;
}

body {
  background:
    radial-gradient(circle at top left, rgba(124, 92, 255, 0.14), transparent 26%),
    radial-gradient(circle at top right, rgba(92, 141, 255, 0.10), transparent 28%),
    linear-gradient(180deg, #07070a 0%, #0d0d12 100%);
}

.shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  align-items: start;
  gap: 18px;
}

.bot-hero {
  grid-column: 1 / -1;
}

.app-sidebar {
  position: sticky;
  top: 18px;
  min-height: calc(100vh - 48px);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035));
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
}

.app-sidebar-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.app-sidebar-kicker,
.app-sidebar-label {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.app-sidebar-title {
  margin-top: 4px;
  font-size: 1.15rem;
  font-weight: 800;
}

.app-sidebar-home {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.055);
}

.app-sidebar-section {
  padding-top: 16px;
}

.app-sidebar-section-grow {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.app-sidebar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.bot-switch-list,
.conversation-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conversation-list {
  overflow-y: auto;
  padding-right: 4px;
}

.bot-switch-item,
.conversation-item {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  text-align: left;
  padding: 11px 12px;
  cursor: pointer;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.bot-switch-item:hover,
.conversation-item:hover {
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.13);
  transform: translateY(-1px);
}

.bot-switch-item.active,
.conversation-item.active {
  background: rgba(124, 92, 255, 0.16);
  border-color: rgba(124, 92, 255, 0.32);
}

.bot-switch-name,
.conversation-item span {
  font-size: 0.94rem;
  font-weight: 700;
}

.bot-switch-item small,
.conversation-item small {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.35;
}

.sidebar-mini-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

.sidebar-delete-btn {
  width: 100%;
  border: 1px solid rgba(255, 95, 95, 0.18);
  color: #ffd4d4;
  background: rgba(255, 95, 95, 0.08);
  border-radius: 14px;
  padding: 11px 12px;
  cursor: pointer;
}

.sidebar-delete-btn:disabled,
.sidebar-mini-btn:disabled,
.conversation-item:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.conversation-empty,
.conversation-busy-hint {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
  padding: 10px 2px;
}

.main-panel {
  min-width: 0;
}

.bubble {
  position: relative;
  max-width: min(820px, 88%);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.042));
}

.message.assistant .bubble {
  border-bottom-left-radius: 10px;
}

.message.user .bubble {
  border-bottom-right-radius: 10px;
}

.message-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
  margin-bottom: -4px;
}

.copy-icon-btn,
.copy-message-btn,
.copy-code-btn {
  width: 30px;
  height: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.055);
  color: rgba(245,247,251,0.82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.copy-icon-btn:hover,
.copy-message-btn:hover,
.copy-code-btn:hover {
  background: rgba(255,255,255,0.11);
  color: #fff;
  border-color: rgba(255,255,255,0.16);
}

.code-header {
  min-height: 42px;
}

.code-language {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.composer {
  padding-top: 14px;
}

.composer-form-modern {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: end;
}

.composer-plus-wrap {
  position: relative;
}

.composer-plus-btn {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.055);
  color: var(--text);
  cursor: pointer;
  font-size: 30px;
  line-height: 1;
}

.composer-plus-btn[aria-expanded="true"] {
  background: rgba(124, 92, 255, 0.16);
  border-color: rgba(124, 92, 255, 0.28);
}

.upload-menu {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 230px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(16, 16, 22, 0.98);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  z-index: 100;
}

.upload-menu[hidden] {
  display: none !important;
}

.upload-menu-item {
  width: 100%;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--text);
  padding: 11px 12px;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.upload-menu-item:hover {
  background: rgba(255,255,255,0.075);
}

.upload-menu-item span {
  font-weight: 700;
}

.upload-menu-item small {
  color: var(--muted);
}

.upload-preview-strip {
  padding: 0 0 12px;
}

.image-preview-list,
.document-preview-list {
  margin-top: 0;
  margin-bottom: 10px;
}

.document-preview-item {
  position: relative;
  max-width: 260px;
  border-radius: 14px;
  padding: 10px 36px 10px 12px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.045);
}

.document-preview-name {
  color: var(--text);
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.document-remove-btn {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  cursor: pointer;
}

@media (max-width: 980px) {
  .shell {
    display: flex;
    flex-direction: column;
  }

  .app-sidebar {
    position: relative;
    top: auto;
    min-height: auto;
    max-height: none;
    width: 100%;
  }

  .conversation-list {
    max-height: 260px;
  }
}

@media (max-width: 680px) {
  .composer-form-modern {
    grid-template-columns: auto 1fr;
  }

  .composer-form-modern textarea {
    grid-column: 2;
  }

  .composer-form-modern #sendBtn {
    grid-column: 1 / -1;
  }

  .composer-plus-btn {
    width: 48px;
    height: 48px;
  }

  .upload-menu {
    width: min(230px, calc(100vw - 44px));
  }
}
/* === UI Fix: Sidebar collapsible + cleaner chat layout === */

/* Topbar-Buttons raus, weil Chat löschen + Logout jetzt in der Sidebar sind */
.topbar-actions {
  display: none !important;
}

/* Datei-Inputs wirklich verstecken, auch wenn alte Browser/CSS reinfunken */
input[type="file"][hidden],
.composer input[type="file"],
.upload-preview-strip input[type="file"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hauptlayout stabiler */
.shell {
  grid-template-columns: 280px minmax(0, 1fr);
}

.shell.sidebar-is-collapsed {
  grid-template-columns: 76px minmax(0, 1fr);
}

.app-sidebar {
  transition: width 0.18s ease, padding 0.18s ease;
}

.app-sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.app-sidebar-collapse {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.055);
  color: var(--text);
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
}

.app-sidebar.is-collapsed {
  padding: 14px 10px;
}

.app-sidebar.is-collapsed .app-sidebar-title-wrap,
.app-sidebar.is-collapsed .app-sidebar-label,
.app-sidebar.is-collapsed .bot-switch-item small,
.app-sidebar.is-collapsed .conversation-item small,
.app-sidebar.is-collapsed .conversation-item span,
.app-sidebar.is-collapsed .sidebar-delete-btn,
.app-sidebar.is-collapsed .sidebar-logout-btn,
.app-sidebar.is-collapsed .conversation-busy-hint,
.app-sidebar.is-collapsed .conversation-empty {
  display: none !important;
}

.app-sidebar.is-collapsed .app-sidebar-header {
  justify-content: center;
}

.app-sidebar.is-collapsed .app-sidebar-header-actions {
  flex-direction: column;
}

.app-sidebar.is-collapsed .bot-switch-item {
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px;
}

.app-sidebar.is-collapsed .bot-switch-name {
  font-size: 0;
}

.app-sidebar.is-collapsed .bot-switch-name::first-letter {
  font-size: 1rem;
}

.app-sidebar.is-collapsed .app-sidebar-row {
  justify-content: center;
}

.app-sidebar-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidebar-logout-btn {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text);
  background: rgba(255,255,255,0.055);
  border-radius: 14px;
  padding: 11px 12px;
  cursor: pointer;
}

/* Main Panel schöner und luftiger */
.main-panel {
  overflow: hidden;
}

.topbar {
  padding: 22px 28px 18px;
}

.topbar-main {
  align-items: center;
}

.status-row {
  margin-top: 10px;
}

/* Chatfläche: mehr Raum, weniger gequetscht */
.messages {
  min-height: 420px;
  padding: 28px;
}

.bubble {
  max-width: min(820px, 82%);
}

.message.user .bubble {
  max-width: min(520px, 76%);
}

/* Composer neu stabilisieren */
.composer {
  padding: 22px 28px 28px;
}

.composer-form-modern {
  display: grid !important;
  grid-template-columns: 56px minmax(220px, 1fr) 150px !important;
  gap: 14px !important;
  align-items: end !important;
}

.composer-form-modern textarea {
  grid-column: auto !important;
  min-width: 0;
  min-height: 64px;
  height: 64px;
  padding: 18px 20px;
}

.composer-form-modern #sendBtn {
  grid-column: auto !important;
  height: 64px;
  min-width: 150px;
  border-radius: 18px;
}

.composer-plus-btn {
  width: 56px;
  height: 64px;
  border-radius: 18px;
}

.upload-preview-strip {
  padding-bottom: 12px;
}

/* Alte Upload-Box sicher neutralisieren, falls noch Reste vorhanden sind */
.image-upload-block {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

/* Mobile komplett neu ordnen */
@media (max-width: 980px) {
  .shell,
  .shell.sidebar-is-collapsed {
    display: flex !important;
    flex-direction: column;
  }

  .app-sidebar {
    position: relative;
    top: auto;
    width: 100%;
    min-height: auto;
    max-height: none;
  }

  .app-sidebar.is-collapsed {
    max-height: 72px;
    overflow: hidden;
  }

  .app-sidebar.is-collapsed .app-sidebar-title-wrap {
    display: block !important;
  }

  .app-sidebar.is-collapsed .app-sidebar-title {
    display: block;
  }

  .app-sidebar.is-collapsed .app-sidebar-kicker {
    display: none;
  }

  .app-sidebar.is-collapsed .app-sidebar-section,
  .app-sidebar.is-collapsed .app-sidebar-footer {
    display: none !important;
  }

  .app-sidebar.is-collapsed .app-sidebar-header {
    justify-content: space-between;
  }

  .app-sidebar.is-collapsed .app-sidebar-header-actions {
    flex-direction: row;
  }

  .topbar {
    position: relative;
    top: auto;
    padding: 20px 18px 16px;
  }

  .topbar-title {
    font-size: 1.45rem;
  }

  .messages {
    min-height: 360px;
    padding: 18px;
  }

  .bubble,
  .message.user .bubble {
    max-width: 92%;
  }
}

@media (max-width: 680px) {
  .page {
    padding: 10px;
  }

  .bot-hero {
    display: none;
  }

  .main-panel {
    border-radius: 24px;
    min-height: calc(100vh - 120px);
  }

  .topbar {
    border-radius: 24px 24px 0 0;
  }

  .messages {
    min-height: 48vh;
    padding: 16px;
  }

  .composer {
    padding: 14px 16px 18px;
  }

  .composer-form-modern {
    grid-template-columns: 52px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .composer-plus-btn {
    width: 52px;
    height: 56px;
    border-radius: 16px;
  }

  .composer-form-modern textarea {
    grid-column: auto !important;
    width: 100%;
    min-height: 56px;
    height: 56px;
    max-height: 160px;
    border-radius: 16px;
    padding: 15px 16px;
  }

  .composer-form-modern #sendBtn {
    grid-column: 1 / -1 !important;
    width: 100%;
    height: 58px;
    min-width: 0;
    border-radius: 18px;
  }

  .upload-menu {
    left: 0;
    bottom: calc(100% + 8px);
  }

  .message-actions {
    margin-top: 8px;
  }
}
/* === Final UI Fix: Mobile Sidebar, Chat Trash, Hero entfernen === */

/* Oberen Bot-Info-Block komplett entfernen */
.bot-hero {
  display: none !important;
}

/* Layout ohne Hero sauberer */
.shell {
  align-items: stretch;
}

.main-panel {
  min-height: calc(100vh - 48px);
}

/* Conversation-Zeile mit kleinem Löschen-Button */
.conversation-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 7px;
  align-items: stretch;
}

.conversation-row.active .conversation-item {
  background: rgba(124, 92, 255, 0.16);
  border-color: rgba(124, 92, 255, 0.32);
}

.conversation-row .conversation-item {
  min-width: 0;
}

.conversation-trash-btn {
  width: 34px;
  min-width: 34px;
  border: 1px solid rgba(255, 95, 95, 0.14);
  border-radius: 13px;
  background: rgba(255, 95, 95, 0.065);
  color: rgba(255, 220, 220, 0.9);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.conversation-trash-btn:hover {
  background: rgba(255, 95, 95, 0.14);
  border-color: rgba(255, 95, 95, 0.28);
}

/* Der große Footer-Löschbutton ist durch die Mülleimer redundant */
#deleteConversationBtn {
  display: none !important;
}

/* Logout bleibt unten sauber */
.app-sidebar-footer {
  margin-top: 14px;
}

/* Eingeklappte Sidebar: keine leeren Chat-Pillen mehr */
.app-sidebar.is-collapsed .app-sidebar-section-grow,
.app-sidebar.is-collapsed .conversation-list,
.app-sidebar.is-collapsed .conversation-row,
.app-sidebar.is-collapsed .conversation-item,
.app-sidebar.is-collapsed .conversation-trash-btn {
  display: none !important;
}

/* Eingeklappt: nur Home, Toggle, Bots und Plus sichtbar */
.app-sidebar.is-collapsed .app-sidebar-section {
  padding-top: 14px;
}

.app-sidebar.is-collapsed .bot-switch-list {
  gap: 10px;
}

/* Mobile: Sidebar als Top-Drawer, nicht als riesiger Block */
@media (max-width: 980px) {
  .page {
    padding: 10px;
  }

  .shell,
  .shell.sidebar-is-collapsed {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
  }

  .app-sidebar {
    position: sticky;
    top: 8px;
    z-index: 200;
    width: 100%;
    min-height: auto;
    max-height: 70vh;
    overflow: hidden;
    border-radius: 26px;
  }

  .app-sidebar-header {
    padding-bottom: 0;
    border-bottom: 0;
  }

  .app-sidebar:not(.is-collapsed) {
    overflow-y: auto;
  }

  .app-sidebar:not(.is-collapsed) .app-sidebar-header {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
  }

  .app-sidebar.is-collapsed {
    max-height: 74px;
    padding: 14px 18px;
  }

  .app-sidebar.is-collapsed .app-sidebar-title-wrap {
    display: block !important;
  }

  .app-sidebar.is-collapsed .app-sidebar-title {
    font-size: 1.12rem;
  }

  .app-sidebar.is-collapsed .app-sidebar-kicker {
    display: none !important;
  }

  .app-sidebar.is-collapsed .app-sidebar-section,
  .app-sidebar.is-collapsed .app-sidebar-footer {
    display: none !important;
  }

  .app-sidebar.is-collapsed .app-sidebar-header {
    justify-content: space-between;
  }

  .app-sidebar.is-collapsed .app-sidebar-header-actions {
    flex-direction: row;
  }

  .app-sidebar-collapse,
  .app-sidebar-home {
    width: 46px;
    height: 46px;
  }

  .main-panel {
    min-height: calc(100vh - 110px);
  }

  .topbar {
    padding: 22px 20px 18px;
  }

  .messages {
    min-height: 52vh;
  }
}

/* iPhone: Composer angenehmer, Textfeld nicht abgeschnitten */
@media (max-width: 680px) {
  .composer {
    padding: 14px 16px 18px;
  }

  .composer-form-modern {
    display: grid !important;
    grid-template-columns: 56px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }

  .composer-plus-btn {
    width: 56px;
    height: 58px;
    border-radius: 18px;
  }

  .composer-form-modern textarea {
    grid-column: auto !important;
    width: 100%;
    min-width: 0;
    min-height: 58px;
    height: 58px;
    max-height: 150px;
    line-height: 1.35;
    padding: 15px 16px;
    overflow-y: auto;
  }

  .composer-form-modern #sendBtn {
    grid-column: 1 / -1 !important;
    width: 100%;
    height: 58px;
    min-width: 0;
    border-radius: 18px;
  }

  .messages {
    padding: 18px 16px;
    min-height: 50vh;
  }

  .bubble,
  .message.user .bubble {
    max-width: 94%;
  }

  .message.user .bubble {
    margin-left: auto;
  }
}
/* Mehr Luft zwischen Sidebar-Labels und den Karten */
.app-sidebar-label {
  margin-bottom: 10px;
}

.bot-switch-list {
  margin-top: 8px;
}

.app-sidebar-row {
  margin-bottom: 12px;
}
/* Logout größer und klarer */
.sidebar-logout-btn {
  min-height: 46px;
  padding: 13px 14px;
  font-size: 0.95rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.sidebar-logout-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 15px;
  line-height: 1;
}
/* === Premium Polish: sellable UI refinement === */

/* Etwas modernere Grundwirkung */
:root {
  --panel-premium: rgba(255, 255, 255, 0.045);
  --panel-premium-strong: rgba(255, 255, 255, 0.072);
  --border-premium: rgba(255, 255, 255, 0.105);
  --soft-glow: 0 18px 70px rgba(0, 0, 0, 0.46);
}

body {
  letter-spacing: -0.015em;
}

/* Panels minimal klarer und wertiger */
.app-sidebar,
.main-panel {
  border-color: var(--border-premium);
  box-shadow:
    0 22px 80px rgba(0, 0, 0, 0.48),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.main-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.025));
}

/* Topbar etwas mehr SaaS/Produkt-Look */
.topbar {
  background:
    linear-gradient(180deg, rgba(10,10,15,0.98), rgba(10,10,15,0.88));
}

.topbar-title {
  letter-spacing: -0.045em;
}

.topbar-subtitle {
  max-width: 620px;
  line-height: 1.45;
}

/* Status etwas dezenter */
.status-row {
  font-weight: 600;
}

.status-dot {
  box-shadow: 0 0 18px rgba(46, 204, 113, 0.5);
}

/* Sidebar hochwertiger */
.app-sidebar {
  background:
    radial-gradient(circle at top left, rgba(124, 92, 255, 0.13), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.026));
}

.app-sidebar-title {
  letter-spacing: -0.035em;
}

.bot-switch-item,
.conversation-row .conversation-item {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.032));
}

.bot-switch-item.active,
.conversation-row.active .conversation-item {
  background:
    radial-gradient(circle at top left, rgba(124, 92, 255, 0.30), transparent 70%),
    rgba(124, 92, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 10px 28px rgba(124, 92, 255, 0.10);
}

/* Chatfläche etwas ruhiger */
.messages {
  background:
    radial-gradient(circle at 80% 10%, rgba(124, 92, 255, 0.045), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.015), transparent 22%);
}

/* Bubbles weniger klobig, mehr Produktqualität */
.bubble {
  border-color: rgba(255,255,255,0.085);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.035);
}

.message.assistant .bubble {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.067), rgba(255,255,255,0.038));
}

.message.user .bubble {
  background:
    radial-gradient(circle at top left, rgba(124, 92, 255, 0.28), transparent 74%),
    linear-gradient(135deg, rgba(124, 92, 255, 0.30), rgba(92, 141, 255, 0.20));
  border-color: rgba(144, 124, 255, 0.26);
}

.message-role {
  letter-spacing: 0.07em;
  opacity: 0.78;
}

.message-content {
  line-height: 1.62;
}

/* Eingabebereich edler */
.composer {
  background:
    linear-gradient(180deg, rgba(8,8,12,0.58), rgba(8,8,12,0.92));
  border-top: 1px solid rgba(255,255,255,0.065);
}

.composer-form-modern textarea {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.035));
  border-color: rgba(255,255,255,0.095);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 10px 26px rgba(0,0,0,0.18);
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.composer-form-modern textarea:focus {
  outline: none;
  border-color: rgba(124, 92, 255, 0.42);
  box-shadow:
    0 0 0 4px rgba(124, 92, 255, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.composer-plus-btn {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.045));
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.composer-plus-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255,255,255,0.18);
}

.btn.primary,
.composer-form-modern #sendBtn {
  background:
    linear-gradient(135deg, #765cff 0%, #5d8eff 100%);
  box-shadow:
    0 14px 34px rgba(92, 141, 255, 0.20),
    inset 0 1px 0 rgba(255,255,255,0.18);
  font-weight: 800;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.btn.primary:hover,
.composer-form-modern #sendBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow:
    0 18px 42px rgba(92, 141, 255, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.20);
}

/* Codeblöcke hochwertiger */
.code-block {
  border-color: rgba(255,255,255,0.09);
  box-shadow: 0 14px 36px rgba(0,0,0,0.25);
}

.code-header {
  background: rgba(255,255,255,0.045);
}

/* Mobile wirkt weniger gequetscht */
@media (max-width: 680px) {
  .page {
    padding: 8px;
  }

  .app-sidebar,
  .main-panel {
    border-radius: 24px;
  }

  .topbar-title {
    font-size: 1.6rem;
  }

  .topbar-subtitle {
    font-size: 0.98rem;
  }

  .status-row {
    font-size: 0.95rem;
  }

  .message-content {
    font-size: 0.98rem;
  }

  .composer-form-modern #sendBtn {
    font-size: 1rem;
  }
}
/* === Custom Confirm Modal === */

.app-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.58);
  backdrop-filter: blur(14px);
  animation: confirmFadeIn 0.14s ease forwards;
}

.app-confirm-overlay.is-closing {
  animation: confirmFadeOut 0.12s ease forwards;
}

.app-confirm-card {
  width: min(420px, 100%);
  border-radius: 26px;
  border: 1px solid rgba(255,255,255,0.11);
  background:
    radial-gradient(circle at top left, rgba(124, 92, 255, 0.14), transparent 42%),
    linear-gradient(180deg, rgba(24,24,31,0.98), rgba(15,15,21,0.98));
  box-shadow:
    0 26px 90px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 22px;
  color: var(--text);
  transform: translateY(8px) scale(0.98);
  animation: confirmPopIn 0.16s ease forwards;
}

.app-confirm-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  font-weight: 900;
  background: rgba(124, 92, 255, 0.15);
  color: #dcd6ff;
  border: 1px solid rgba(124, 92, 255, 0.24);
}

.app-confirm-icon.danger {
  background: rgba(255, 95, 95, 0.12);
  color: #ffd4d4;
  border-color: rgba(255, 95, 95, 0.24);
}

.app-confirm-content h3 {
  margin: 0 0 8px;
  font-size: 1.22rem;
  letter-spacing: -0.035em;
}

.app-confirm-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.96rem;
}

.app-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.app-confirm-cancel,
.app-confirm-ok {
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 15px;
  min-height: 46px;
  padding: 0 14px;
  cursor: pointer;
  color: var(--text);
  background: rgba(255,255,255,0.055);
  font-weight: 750;
}

.app-confirm-cancel:hover,
.app-confirm-ok:hover {
  background: rgba(255,255,255,0.09);
}

.app-confirm-ok.danger {
  background: rgba(255, 95, 95, 0.14);
  border-color: rgba(255, 95, 95, 0.24);
  color: #ffe2e2;
}

.app-confirm-ok.danger:hover {
  background: rgba(255, 95, 95, 0.20);
}

@keyframes confirmFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes confirmFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes confirmPopIn {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 520px) {
  .app-confirm-card {
    border-radius: 24px;
    padding: 20px;
  }

  .app-confirm-actions {
    grid-template-columns: 1fr;
  }

  .app-confirm-ok {
    order: 1;
  }

  .app-confirm-cancel {
    order: 2;
  }
}
/* === Message footer compact: meta + copy inline === */

.message-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.message-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
  flex: 1;
  min-width: 0;
}

.copy-inline-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(245,247,251,0.82);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
}

.copy-inline-btn:hover {
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.16);
  color: #fff;
}

.message-actions {
  display: none !important;
}
/* === Unified Composer Bar === */

.composer {
  padding: 16px 20px 20px;
  background:
    linear-gradient(180deg, rgba(8,8,12,0.35), rgba(8,8,12,0.82));
  border-top: 1px solid rgba(255,255,255,0.06);
}

.composer-form,
.composer-form-modern {
  display: grid !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025));
  box-shadow:
    0 16px 40px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.035);
}

.composer-form {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

.composer-form-modern {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

.composer-form textarea,
.composer-form-modern textarea {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  max-height: 140px;
  height: 28px;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  resize: none;
  padding: 4px 2px !important;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.45;
}

.composer-form textarea::placeholder,
.composer-form-modern textarea::placeholder {
  color: rgba(245,247,251,0.56);
}

.composer-plus-wrap {
  display: flex;
  align-items: center;
}

.composer-plus-btn,
.composer-form #sendBtn,
.composer-form-modern #sendBtn {
  width: 46px;
  height: 46px;
  min-width: 46px;
  padding: 0 !important;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.composer-plus-btn {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.055);
  color: var(--text);
  font-size: 28px;
  line-height: 1;
}

.composer-plus-btn:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.16);
}

.composer-form #sendBtn,
.composer-form-modern #sendBtn {
  border: 1px solid transparent;
  background: linear-gradient(135deg, #765cff 0%, #5d8eff 100%);
  color: #fff;
  box-shadow:
    0 10px 26px rgba(92,141,255,0.22),
    inset 0 1px 0 rgba(255,255,255,0.16);
}

.composer-form #sendBtn.is-stop,
.composer-form-modern #sendBtn.is-stop {
  background: rgba(255, 95, 95, 0.14);
  border-color: rgba(255, 95, 95, 0.22);
  color: #ffe1e1;
  box-shadow: none;
}

.composer-action-icon {
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
}

.upload-menu {
  bottom: calc(100% + 8px);
}

/* Mobile: ebenfalls eine einzige zusammenhängende Zeile */
@media (max-width: 680px) {
  .composer {
    padding: 12px 14px 16px;
  }

  .composer-form,
  .composer-form-modern {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    padding: 8px !important;
    border-radius: 22px;
  }

  .composer-form:not(.composer-form-modern) {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .composer-form textarea,
  .composer-form-modern textarea {
    min-height: 24px;
    height: 24px;
    max-height: 110px;
    font-size: 16px;
    padding: 3px 2px !important;
  }

  .composer-plus-btn,
  .composer-form #sendBtn,
  .composer-form-modern #sendBtn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 14px;
  }

  .composer-action-icon {
    font-size: 17px;
  }
}
/* === Send button refinement === */

.composer-form #sendBtn,
.composer-form-modern #sendBtn {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
  box-shadow:
    0 8px 20px rgba(92, 141, 255, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
}

.composer-action-icon {
  font-size: 15px !important;
  font-weight: 650 !important;
  transform: translateX(0);
}

.composer-form #sendBtn:hover,
.composer-form-modern #sendBtn:hover {
  transform: translateY(-1px);
}

.composer-form #sendBtn.is-stop,
.composer-form-modern #sendBtn.is-stop {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
}

.composer-form #sendBtn.is-stop .composer-action-icon,
.composer-form-modern #sendBtn.is-stop .composer-action-icon {
  font-size: 14px !important;
}
/* === Admin Panel Refresh === */

.admin-page .shell,
.admin-page .admin-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  max-width: 1440px;
  margin: 0 auto;
}

.admin-layout-page {
  min-height: 100vh;
}

.admin-sidebar,
.admin-card,
.admin-hero {
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035));
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
}

.admin-sidebar {
  position: sticky;
  top: 18px;
  min-height: calc(100vh - 48px);
  border-radius: var(--radius-xl);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-sidebar-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.admin-kicker,
.admin-section-label,
.admin-login-kicker {
  color: var(--muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.admin-sidebar-title {
  margin-top: 4px;
  font-size: 1.15rem;
  font-weight: 800;
}

.admin-icon-link {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.055);
}

.admin-nav-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-bot-link {
  width: 100%;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  color: var(--text);
  text-decoration: none;
  padding: 12px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.admin-bot-link:hover {
  background: rgba(255,255,255,0.075);
  border-color: rgba(124, 92, 255, 0.32);
  transform: translateY(-1px);
}

.admin-bot-link span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin-bot-link small,
.admin-bot-link em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}

.admin-sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-user-chip {
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.admin-logout-btn {
  width: 100%;
}

.admin-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.admin-hero {
  border-radius: var(--radius-xl);
  padding: 24px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.admin-hero h1 {
  margin: 8px 0 8px;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
}

.admin-hero p,
.admin-card-head p {
  margin: 0;
  color: var(--muted);
  line-height: 1.6;
}

.admin-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-hero-actions a,
.admin-mini-bot-link {
  text-decoration: none;
}

.admin-card {
  border-radius: var(--radius-xl);
  padding: 20px;
}

.admin-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.admin-card-head.simple {
  margin-bottom: 14px;
}

.admin-card h2 {
  margin: 6px 0 6px;
  font-size: 1.28rem;
}

.admin-filter-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.admin-filter-row select,
.admin-form-grid input {
  min-height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.055);
  color: var(--text);
  padding: 0 12px;
  outline: none;
}

.admin-filter-row select option {
  color: #111;
}

.admin-total-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.admin-total-card {
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

.admin-total-card span,
.admin-usage-stats span,
.admin-muted {
  color: var(--muted);
}

.admin-total-card strong {
  display: block;
  margin-top: 6px;
  font-size: 1.15rem;
}

.admin-usage-list,
.admin-users-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin-usage-user-card,
.admin-user-card {
  border-radius: 20px;
  padding: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.08);
}

.admin-usage-user-top,
.admin-user-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.admin-user-name {
  font-size: 1.03rem;
  font-weight: 800;
}

.admin-user-meta {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.86rem;
}

.admin-cost-big {
  font-size: 1.25rem;
  font-weight: 900;
  color: #d9ffe8;
  white-space: nowrap;
}

.admin-usage-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.admin-usage-stats > div {
  border-radius: 14px;
  padding: 11px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.065);
}

.admin-usage-stats strong {
  display: block;
  margin-top: 5px;
  font-size: 0.96rem;
}

.admin-usage-details,
.admin-user-details {
  margin-top: 14px;
}

.admin-usage-details summary,
.admin-user-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.9rem;
}

.admin-usage-bot-table {
  margin-top: 12px;
  overflow-x: auto;
}

.admin-usage-bot-head,
.admin-usage-bot-row {
  display: grid;
  grid-template-columns: minmax(160px, 1.4fr) repeat(4, minmax(90px, 1fr));
  gap: 10px;
  align-items: center;
  min-width: 680px;
}

.admin-usage-bot-head {
  color: var(--muted);
  font-size: 0.78rem;
  padding: 0 0 8px;
}

.admin-usage-bot-row {
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 0.9rem;
}

.admin-usage-bot-row span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
}

.admin-grid-two {
  display: grid;
  grid-template-columns: minmax(300px, 0.8fr) minmax(0, 1.2fr);
  gap: 18px;
  align-items: start;
}

.admin-form-grid {
  display: grid;
  gap: 10px;
}

.admin-check-row {
  margin: 14px 0 10px;
}

.admin-bot-checks,
.admin-edit-bots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-bot-checks label,
.admin-edit-bots label {
  padding: 9px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text);
  font-size: 0.9rem;
}

.admin-full-btn {
  width: 100%;
  margin-top: 14px;
}

.admin-user-bots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.admin-mini-bot-link {
  display: inline-flex;
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(124, 92, 255, 0.13);
  border: 1px solid rgba(124, 92, 255, 0.24);
  color: var(--text);
  font-size: 0.84rem;
}

.admin-status-pill {
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 0.8rem;
  border: 1px solid rgba(255,255,255,0.08);
  white-space: nowrap;
}

.admin-status-pill.is-active {
  color: #d9ffe8;
  background: rgba(46, 204, 113, 0.12);
}

.admin-status-pill.is-inactive {
  color: #ffe1e1;
  background: rgba(255, 95, 95, 0.12);
}

.admin-user-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.admin-user-actions .btn {
  padding: 10px 12px;
  font-size: 0.9rem;
}

.admin-danger-btn {
  color: #ffb4b4;
  background: rgba(255, 95, 95, 0.08);
  border-color: rgba(255, 95, 95, 0.18);
}

.admin-login-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.035));
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
  border-radius: var(--radius-xl);
}

.admin-login-card h1 {
  margin-top: 8px;
}

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

  .admin-sidebar {
    position: relative;
    top: auto;
    min-height: auto;
  }

  .admin-sidebar-footer {
    margin-top: 0;
  }

  .admin-grid-two {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .admin-layout-page {
    padding: 10px;
  }

  .admin-hero,
  .admin-card {
    padding: 16px;
    border-radius: 24px;
  }

  .admin-hero {
    flex-direction: column;
  }

  .admin-hero-actions {
    width: 100%;
    justify-content: stretch;
  }

  .admin-hero-actions .btn {
    flex: 1;
    text-align: center;
  }

  .admin-card-head {
    flex-direction: column;
  }

  .admin-filter-row {
    width: 100%;
    justify-content: stretch;
  }

  .admin-filter-row select,
  .admin-filter-row button {
    flex: 1;
  }

  .admin-total-grid,
  .admin-usage-stats {
    grid-template-columns: 1fr 1fr;
  }

  .admin-usage-user-top,
  .admin-user-top {
    flex-direction: column;
  }

  .admin-cost-big {
    white-space: normal;
  }
}

@media (max-width: 480px) {
  .admin-total-grid,
  .admin-usage-stats {
    grid-template-columns: 1fr;
  }

  .admin-user-actions .btn {
    width: 100%;
  }
}

/* === Chat Textarea Autosize Fix === */

.composer textarea,
.composer-form-modern textarea {
  height: auto;
  min-height: 58px;
  max-height: 220px;
  overflow-y: hidden;
}

.composer textarea.is-scrollable,
.composer-form-modern textarea.is-scrollable {
  overflow-y: auto;
}

/* === Landing Page V3 / Korrektur ohne Seitenleiste === */

.landing-page-v3 {
  min-height: 100vh;
  padding: 24px;
}

.landing-shell-v3 {
  width: min(1440px, 100%);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.landing-hero-card-v3,
.landing-usage-card-v3,
.landing-bots-card-v3 {
  border-radius: 28px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035));
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow);
}

.landing-kicker-v3,
.landing-section-kicker-v3 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing-hero-top-v3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}

.landing-hero-copy-v3 {
  min-width: 0;
}

.landing-hero-copy-v3 h1 {
  margin: 0;
  max-width: 760px;
  font-size: clamp(2.7rem, 5vw, 4.6rem);
  line-height: 0.94;
  letter-spacing: -0.07em;
}

.landing-hero-copy-v3 p {
  margin: 16px 0 0;
  max-width: 720px;
  color: var(--muted);
  line-height: 1.62;
  font-size: 1rem;
}

.landing-hero-actions-v3 {
  min-width: 260px;
  display: grid;
  gap: 12px;
  flex-shrink: 0;
}

.landing-user-chip-v3 {
  min-height: 48px;
  border-radius: 999px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.09);
  color: rgba(245,247,251,0.88);
  font-weight: 700;
}

.landing-logout-btn-v3 {
  min-height: 56px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.055);
  color: var(--text);
  cursor: pointer;
  font-size: 0.98rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.landing-logout-btn-v3 span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
}

.landing-usage-head-v3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 14px;
}

.landing-usage-head-v3 h2,
.landing-bots-head-v3 h2 {
  margin: 0;
  font-size: 1.85rem;
  line-height: 1.08;
  letter-spacing: -0.05em;
}

.landing-usage-label-v3,
.landing-bots-note-v3,
.landing-muted-v3 {
  margin: 8px 0 0;
  color: var(--muted);
  line-height: 1.55;
  font-size: 0.96rem;
}

.landing-usage-filters-v3 {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.landing-usage-filters-v3 select {
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: var(--text);
  padding: 0 12px;
  outline: none;
}

.landing-usage-cost-v3 {
  margin: 8px 0 18px;
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 0.98;
  font-weight: 900;
  letter-spacing: -0.07em;
}

.landing-usage-stats-v3 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.landing-usage-stats-v3 > div {
  border-radius: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.075);
}

.landing-usage-stats-v3 span,
.landing-usage-row-v3 span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  margin-bottom: 5px;
}

.landing-usage-stats-v3 strong,
.landing-usage-row-v3 strong {
  color: var(--text);
  font-size: 1rem;
}

.landing-usage-details-v3 {
  margin-top: 14px;
}

.landing-usage-details-v3 summary {
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  color: var(--text);
}

.landing-usage-details-v3 summary::-webkit-details-marker {
  display: none;
}

.landing-usage-breakdown-v3 {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.landing-usage-row-v3 {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
}

.landing-bots-head-v3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

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

.bot-select-card-v3 {
  text-decoration: none;
  color: var(--text);
  border-radius: 22px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.035));
  border: 1px solid rgba(255,255,255,0.085);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.bot-select-card-v3:hover {
  transform: translateY(-2px);
  border-color: rgba(124, 92, 255, 0.30);
  background:
    linear-gradient(180deg, rgba(124, 92, 255, 0.09), rgba(255,255,255,0.04));
}

.bot-select-top-v3 {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.bot-select-name-v3 {
  font-size: 1.2rem;
  line-height: 1.1;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.bot-select-title-v3 {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.9rem;
}

.bot-status-badge-v3 {
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.84rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.09);
  white-space: nowrap;
}

.bot-status-badge-v3.is-online {
  background: rgba(46, 204, 113, 0.12);
  color: #dcffe8;
}

.bot-status-badge-v3.is-offline {
  background: rgba(255, 95, 95, 0.12);
  color: #ffe2e2;
}

.bot-select-description-v3 {
  margin: 0;
  color: rgba(245,247,251,0.88);
  line-height: 1.58;
  font-size: 0.98rem;
  font-weight: 600;
}

.bot-prompt-tip-v3 {
  border-radius: 16px;
  padding: 14px;
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(255,255,255,0.07);
}

.bot-prompt-tip-v3 strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.84rem;
  color: var(--muted);
}

.bot-prompt-tip-v3 p {
  margin: 0;
  line-height: 1.48;
  font-size: 0.9rem;
  color: rgba(245,247,251,0.84);
}

.bot-meta-v3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

.bot-open-link-v3 {
  color: var(--text);
  font-weight: 800;
}

.bot-card-chats-v3 {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.bot-card-chats-v3 summary {
  cursor: pointer;
  list-style: none;
  font-weight: 800;
  color: var(--text);
  font-size: 0.94rem;
}

.bot-card-chats-v3 summary::-webkit-details-marker {
  display: none;
}

.bot-card-chats-list-v3 {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}

.bot-card-chat-item-v3 {
  display: block;
  text-decoration: none;
  color: var(--text);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.bot-card-chat-item-v3:hover {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  transform: translateY(-1px);
}

.bot-card-chat-title-v3 {
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bot-card-chat-meta-v3 {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.bot-card-empty-v3 {
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.075);
  color: var(--muted);
  line-height: 1.5;
  font-size: 0.92rem;
}

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

@media (max-width: 820px) {
  .landing-page-v3 {
    padding: 14px;
  }

  .landing-hero-card-v3,
  .landing-usage-card-v3,
  .landing-bots-card-v3 {
    padding: 20px;
    border-radius: 24px;
  }

  .landing-hero-top-v3,
  .landing-usage-head-v3,
  .landing-bots-head-v3 {
    flex-direction: column;
  }

  .landing-hero-actions-v3 {
    width: 100%;
    min-width: 0;
  }

  .landing-hero-copy-v3 h1 {
    font-size: clamp(2.35rem, 10vw, 3.6rem);
  }

  .landing-usage-cost-v3 {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .landing-usage-stats-v3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-usage-row-v3 {
    grid-template-columns: 1fr;
  }

  .bot-grid-v3 {
    grid-template-columns: 1fr;
  }

  .bot-select-top-v3,
  .bot-meta-v3 {
    flex-direction: column;
    align-items: flex-start;
  }

  .landing-usage-filters-v3 {
    width: 100%;
  }

  .landing-usage-filters-v3 select {
    flex: 1;
  }

  .bot-card-chat-title-v3 {
    white-space: normal;
  }
}
/* === Landing Page V3 Feinschliff: kleiner, Bots zuerst, Dropdown-Pfeil === */

.landing-page-v3 {
  padding: 20px;
}

.landing-shell-v3 {
  max-width: 1360px;
  gap: 16px;
}

.landing-hero-card-v3,
.landing-usage-card-v3,
.landing-bots-card-v3 {
  padding: 22px 24px;
}

.landing-hero-copy-v3 h1 {
  max-width: 820px;
  font-size: clamp(2.15rem, 3.8vw, 3.45rem);
  line-height: 1;
  letter-spacing: -0.065em;
}

.landing-hero-copy-v3 p {
  margin-top: 12px;
  font-size: 0.96rem;
}

.landing-kicker-v3,
.landing-section-kicker-v3 {
  font-size: 0.72rem;
}

.landing-hero-actions-v3 {
  min-width: 250px;
}

.landing-user-chip-v3,
.landing-logout-btn-v3 {
  min-height: 48px;
}

.landing-usage-head-v3 h2,
.landing-bots-head-v3 h2 {
  font-size: 1.55rem;
}

.landing-usage-cost-v3 {
  font-size: clamp(1.95rem, 3.8vw, 3.15rem);
  margin: 6px 0 16px;
}

.landing-usage-card-v3 {
  opacity: 0.96;
}

.landing-usage-stats-v3 > div {
  padding: 12px 14px;
}

.landing-bots-card-v3 {
  padding-bottom: 26px;
}

.bot-grid-v3 {
  align-items: stretch;
}

.bot-select-card-v3 {
  min-height: 0;
  padding: 17px;
  cursor: default;
}

.bot-select-card-v3:hover {
  transform: translateY(-1px);
}

.bot-select-name-v3 {
  font-size: 1.08rem;
}

.bot-select-title-v3 {
  font-size: 0.84rem;
}

.bot-select-description-v3 {
  font-size: 0.92rem;
  line-height: 1.52;
  font-weight: 560;
}

.bot-status-badge-v3 {
  font-size: 0.78rem;
  padding: 7px 10px;
}

.bot-prompt-tip-v3 {
  padding: 12px;
}

.bot-prompt-tip-v3 p {
  font-size: 0.84rem;
}

.bot-meta-v3 {
  margin-top: auto;
}

.bot-open-link-v3 {
  color: var(--text);
  text-decoration: none;
  border-radius: 999px;
  padding: 7px 10px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.bot-open-link-v3:hover {
  background: rgba(124, 92, 255, 0.16);
  border-color: rgba(124, 92, 255, 0.28);
  transform: translateY(-1px);
}

.bot-card-chats-v3 summary {
  min-height: 38px;
  border-radius: 14px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.07);
}

.bot-card-summary-arrow-v3 {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.07);
  color: var(--muted);
  font-size: 0.9rem;
  transition: transform 0.16s ease;
}

.bot-card-chats-v3[open] .bot-card-summary-arrow-v3 {
  transform: rotate(180deg);
}

.bot-card-chat-title-v3 {
  font-size: 0.88rem;
}

.bot-card-chat-meta-v3 {
  font-size: 0.74rem;
}

@media (max-width: 820px) {
  .landing-page-v3 {
    padding: 10px;
  }

  .landing-hero-card-v3,
  .landing-usage-card-v3,
  .landing-bots-card-v3 {
    padding: 18px;
  }

  .landing-hero-copy-v3 h1 {
    font-size: clamp(2rem, 8.5vw, 3rem);
    letter-spacing: -0.055em;
  }

  .landing-hero-copy-v3 p {
    font-size: 0.92rem;
  }

  .landing-usage-head-v3 h2,
  .landing-bots-head-v3 h2 {
    font-size: 1.4rem;
  }

  .landing-usage-cost-v3 {
    font-size: clamp(1.85rem, 8vw, 2.65rem);
  }

  .landing-usage-stats-v3 {
    grid-template-columns: 1fr 1fr;
  }

  .bot-select-card-v3 {
    padding: 16px;
  }

  .bot-card-chats-v3:not([open]) .bot-card-chats-list-v3 {
    display: none;
  }
}
/* === Landing Feinschliff: sauberer Dropdown-Pfeil === */

.bot-card-summary-arrow-v3 {
  position: relative;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}

.bot-card-summary-arrow-v3::before {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid rgba(245,247,251,0.82);
  border-bottom: 2px solid rgba(245,247,251,0.82);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.18s ease;
}

.bot-card-chats-v3[open] .bot-card-summary-arrow-v3::before {
  transform: rotate(225deg) translate(-1px, -1px);
}
/* === Landing Feinschliff: Selects im Systemdesign der App === */

.landing-select-wrap-v3 {
  position: relative;
  display: inline-flex;
  min-width: 118px;
}

.landing-select-wrap-v3::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid rgba(245,247,251,0.72);
  border-bottom: 2px solid rgba(245,247,251,0.72);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.landing-usage-filters-v3 select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 44px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.045));
  color: var(--text);
  padding: 0 38px 0 14px;
  outline: none;
  font-weight: 760;
  font-size: 0.95rem;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 8px 22px rgba(0,0,0,0.16);
}

.landing-usage-filters-v3 select:hover {
  border-color: rgba(255,255,255,0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.105), rgba(255,255,255,0.055));
}

.landing-usage-filters-v3 select:focus {
  border-color: rgba(124, 92, 255, 0.42);
  box-shadow:
    0 0 0 3px rgba(124, 92, 255, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

@media (max-width: 820px) {
  .landing-select-wrap-v3 {
    flex: 1;
    min-width: 0;
  }
}
/* === Landing Fix: Bot-Karte nicht klickbar wirken lassen + sauberer Chat-Pfeil === */

/* Bot-Karte: kein Button-/Link-Gefühl mehr */
.bot-select-card-v3 {
  cursor: default !important;
}

.bot-select-card-v3:hover {
  transform: none !important;
  border-color: rgba(255,255,255,0.085) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.035)) !important;
}

/* Nur echte Klickflächen dürfen reagieren */
.bot-open-link-v3:hover,
.bot-card-chat-item-v3:hover {
  transform: translateY(-1px);
}

/* Dropdown-Summary als erkennbare, aber ruhige Klickfläche */
.bot-card-chats-v3 summary {
  cursor: pointer;
}

.bot-card-chats-v3 summary:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}

/* Alten Text-Pfeil neutralisieren */
.bot-card-summary-arrow-v3 {
  position: relative !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  flex-shrink: 0 !important;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.18s ease !important;
}

/* Neuer sauberer Chevron */
.bot-card-summary-arrow-v3::before {
  content: "" !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 2px solid rgba(245,247,251,0.82) !important;
  border-bottom: 2px solid rgba(245,247,251,0.82) !important;
  transform: rotate(45deg) translate(-1px, -2px) !important;
  transition: transform 0.18s ease !important;
}

/* Aufgeklappt: Pfeil zeigt nach oben */
.bot-card-chats-v3[open] .bot-card-summary-arrow-v3::before {
  transform: rotate(225deg) translate(-1px, -2px) !important;
}

.bot-card-chats-v3[open] .bot-card-summary-arrow-v3 {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.11) !important;
}
/* === Landing Fix Final: SVG-Pfeil, Neuer Chat, Verbrauchs-Badge === */

/* Der alte Pseudo-Pfeil wird komplett ausgeschaltet */
.bot-card-summary-arrow-v3::before {
  display: none !important;
  content: none !important;
}

/* SVG-Pfeil zuverlässig steuern */
.bot-card-summary-arrow-v3 {
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.075) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(245,247,251,0.86) !important;
  flex-shrink: 0 !important;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.18s ease !important;
}

.bot-card-summary-arrow-v3 svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: rotate(0deg) !important;
  transition: transform 0.18s ease !important;
}

/* Geschlossen: Pfeil nach unten, offen: Pfeil nach oben */
.bot-card-chats-v3[open] .bot-card-summary-arrow-v3 svg {
  transform: rotate(180deg) !important;
}

.bot-card-chats-v3[open] .bot-card-summary-arrow-v3 {
  background: rgba(255,255,255,0.11) !important;
  border-color: rgba(255,255,255,0.13) !important;
}

/* Bot-Karte bleibt ruhig, nur echte Links reagieren */
.bot-select-card-v3 {
  cursor: default !important;
}

.bot-select-card-v3:hover {
  transform: none !important;
  border-color: rgba(255,255,255,0.085) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.035)) !important;
}

/* Bot-Actions */
.bot-actions-v3 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bot-open-link-v3,
.bot-secondary-link-v3 {
  text-decoration: none;
  border-radius: 999px;
  padding: 8px 11px;
  font-weight: 850;
  font-size: 0.9rem;
  line-height: 1;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.bot-open-link-v3 {
  color: var(--text);
  background: rgba(255,255,255,0.065);
  border: 1px solid rgba(255,255,255,0.10);
}

.bot-secondary-link-v3 {
  color: var(--muted);
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.075);
}

.bot-open-link-v3:hover,
.bot-secondary-link-v3:hover {
  transform: translateY(-1px);
}

.bot-open-link-v3:hover {
  background: rgba(124, 92, 255, 0.16);
  border-color: rgba(124, 92, 255, 0.30);
}

.bot-secondary-link-v3:hover {
  color: var(--text);
  background: rgba(255,255,255,0.065);
  border-color: rgba(255,255,255,0.13);
}

/* Verbrauchs-Badge */
.usage-cost-badge-v3 {
  align-self: flex-start;
  border-radius: 999px;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 850;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.055);
  color: var(--muted);
  white-space: nowrap;
}

.landing-usage-card-v3.usage-low-v3 .usage-cost-badge-v3 {
  color: #d9ffe8;
  background: rgba(46, 204, 113, 0.11);
  border-color: rgba(46, 204, 113, 0.18);
}

.landing-usage-card-v3.usage-mid-v3 .usage-cost-badge-v3 {
  color: #fff0c2;
  background: rgba(255, 190, 90, 0.12);
  border-color: rgba(255, 190, 90, 0.20);
}

.landing-usage-card-v3.usage-high-v3 .usage-cost-badge-v3 {
  color: #ffe1e1;
  background: rgba(255, 95, 95, 0.13);
  border-color: rgba(255, 95, 95, 0.22);
}

@media (max-width: 820px) {
  .bot-actions-v3 {
    width: 100%;
  }

  .bot-open-link-v3,
  .bot-secondary-link-v3 {
    flex: 1;
    text-align: center;
  }

  .usage-cost-badge-v3 {
    width: 100%;
    text-align: center;
  }
}
/* === FINAL FIX: Chat-Dropdown-Pfeil über JS-Klasse drehen === */

.bot-card-summary-arrow-v3::before {
  display: none !important;
  content: none !important;
}

.bot-card-summary-arrow-v3 {
  position: relative !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.075) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(245,247,251,0.88) !important;
  font-size: 0 !important;
  line-height: 0 !important;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.18s ease !important;
}

.bot-card-summary-arrow-v3 svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 3 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transform: rotate(0deg) !important;
  transform-origin: center !important;
  transition: transform 0.18s ease !important;
}

/* Fallback, falls [open] greift */
.bot-card-chats-v3[open] .bot-card-summary-arrow-v3 svg {
  transform: rotate(180deg) !important;
}

/* Zuverlässiger Weg über JS-Klasse */
.bot-card-chats-v3.is-open .bot-card-summary-arrow-v3 svg {
  transform: rotate(180deg) !important;
}

.bot-card-chats-v3.is-open .bot-card-summary-arrow-v3 {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
/* === FINAL FINAL: Dropdown-Pfeil direkt auf summary zeichnen === */

/* Alten Pfeil komplett ausblenden, egal ob SVG, Zeichen oder Span */
.bot-card-summary-arrow-v3 {
  display: none !important;
}

/* Summary bekommt Platz für eigenen CSS-Pfeil */
.bot-card-chats-v3 summary {
  position: relative !important;
  padding-right: 54px !important;
}

/* Kreis rechts */
.bot-card-chats-v3 summary::after {
  content: "" !important;
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  transform: translateY(-50%) !important;
  background: rgba(255,255,255,0.075) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  transition:
    background 0.16s ease,
    border-color 0.16s ease !important;
}

/* Chevron */
.bot-card-chats-v3 summary::before {
  content: "" !important;
  position: absolute !important;
  right: 22px !important;
  top: 50% !important;
  width: 8px !important;
  height: 8px !important;
  border-right: 3px solid rgba(245,247,251,0.84) !important;
  border-bottom: 3px solid rgba(245,247,251,0.84) !important;
  transform: translateY(-65%) rotate(45deg) !important;
  transform-origin: center !important;
  z-index: 2 !important;
  transition: transform 0.18s ease !important;
}

/* Aufgeklappt: Chevron dreht nach oben */
.bot-card-chats-v3[open] summary::before,
.bot-card-chats-v3.is-open summary::before {
  transform: translateY(-35%) rotate(225deg) !important;
}

/* Aufgeklappt: Kreis etwas heller */
.bot-card-chats-v3[open] summary::after,
.bot-card-chats-v3.is-open summary::after {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
/* === Final Copy Button Polish === */

.copy-icon-btn,
.copy-message-btn,
.copy-code-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;

  border-radius: 12px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.055)) !important;

  color: rgba(245, 247, 251, 0.92) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  opacity: 1 !important;
  cursor: pointer !important;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;

  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease !important;
}

.copy-icon-btn:hover,
.copy-message-btn:hover,
.copy-code-btn:hover {
  transform: translateY(-1px) !important;

  border-color: rgba(255, 255, 255, 0.32) !important;

  background:
    linear-gradient(180deg, rgba(255,255,255,0.19), rgba(255,255,255,0.085)) !important;

  color: #ffffff !important;

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
}

.copy-icon-btn:active,
.copy-message-btn:active,
.copy-code-btn:active {
  transform: translateY(0) scale(0.97) !important;

  box-shadow:
    0 5px 14px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.copy-icon-btn:focus-visible,
.copy-message-btn:focus-visible,
.copy-code-btn:focus-visible {
  outline: none !important;
  border-color: rgba(124, 92, 255, 0.75) !important;

  box-shadow:
    0 0 0 3px rgba(124, 92, 255, 0.22),
    0 10px 24px rgba(0, 0, 0, 0.28) !important;
}

/* Copy Button im Codeblock etwas kompakter */
.code-header .copy-icon-btn,
.code-header .copy-code-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 11px !important;
  font-size: 15px !important;
}

/* Abstand im Message-Meta/Kostenbereich sauber halten */
.message-meta .copy-icon-btn,
.message-meta .copy-message-btn {
  margin-left: 6px;
}
/* === Force Modes + Retry Buttons === */

.mode-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 10px;
}

.mode-toggle-btn {
  min-height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.045);
  color: rgba(245,247,251,0.78);
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease;
}

.mode-toggle-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.16);
  color: #fff;
}

.mode-toggle-btn.active {
  background: rgba(124, 92, 255, 0.16);
  border-color: rgba(124, 92, 255, 0.36);
  color: #f4f1ff;
  box-shadow:
    0 8px 22px rgba(124, 92, 255, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.message-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.retry-message-btn {
  min-height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.045);
  color: rgba(245,247,251,0.78);
  padding: 0 10px;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.retry-message-btn:hover {
  background: rgba(255,255,255,0.085);
  border-color: rgba(255,255,255,0.16);
  color: #fff;
}

@media (max-width: 680px) {
  .mode-bar {
    margin-bottom: 8px;
    gap: 6px;
  }

  .mode-toggle-btn {
    min-height: 30px;
    padding: 0 9px;
    font-size: 0.74rem;
  }

  .message-footer {
    align-items: flex-start;
  }

  .message-footer-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  .retry-message-btn {
    font-size: 0.7rem;
    padding: 0 8px;
  }
}
/* === Footer-Icon-Buttons / Copy-Buttons etwas kräftiger === */

.footer-icon-btn,
.copy-code-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 11px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.94) !important;

  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1 !important;

  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;

  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease !important;
}

.footer-icon-btn:hover,
.copy-code-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255, 255, 255, 0.30) !important;
  background: rgba(255, 255, 255, 0.10) !important;
  box-shadow:
    0 10px 22px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.footer-icon-btn:active,
.copy-code-btn:active {
  transform: scale(0.97) !important;
}

.message-footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.message-footer-actions .retry-message-btn,
.message-footer-actions .copy-message-btn {
  margin: 0;
}

.code-header .copy-code-btn {
  font-size: 18px !important;
}
/* === Schwebende Footer-Actions unter Assistant-Nachrichten === */

.message.assistant {
  margin-bottom: 24px;
}

.message.assistant .bubble {
  position: relative;
}

.message-footer {
  position: relative;
}

.message-footer-actions-floating {
  position: absolute;
  right: 14px;
  bottom: -18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.footer-floating-icon-btn {
  width: 28px;
  height: 28px;
  min-width: 28px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  transition:
    transform 0.16s ease,
    color 0.16s ease,
    background 0.16s ease,
    opacity 0.16s ease;
  opacity: 0.82;
}

.footer-floating-icon-btn svg {
  width: 19px;
  height: 19px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-floating-icon-btn:hover {
  transform: translateY(-1px);
  color: rgba(255, 255, 255, 0.96);
  background: rgba(255, 255, 255, 0.06);
  opacity: 1;
}

.footer-floating-icon-btn:focus-visible {
  outline: none;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 2px rgba(124, 92, 255, 0.26);
}

.message-footer .message-meta {
  padding-right: 120px;
}

/* Copy-Button im Codeblock wieder etwas kräftiger */
.code-header .copy-code-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.05) !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18) !important;
}

.code-header .copy-code-btn:hover {
  background: rgba(255,255,255,0.09) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

@media (max-width: 680px) {
  .message.assistant {
    margin-bottom: 22px;
  }

  .message-footer-actions-floating {
    right: 10px;
    bottom: -16px;
    gap: 8px;
  }

  .footer-floating-icon-btn {
    width: 26px;
    height: 26px;
    min-width: 26px;
  }

  .footer-floating-icon-btn svg {
    width: 17px;
    height: 17px;
  }

  .message-footer .message-meta {
    padding-right: 98px;
  }
}
/* === Assistant Footer Actions: ChatGPT-like links under message === */

.message.assistant {
  margin-bottom: 18px;
}

.message-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  position: static !important;
}

.message-footer .message-meta {
  width: 100%;
  padding-right: 0 !important;
}

.message-footer-actions,
.message-footer-actions-floating {
  position: static !important;
  right: auto !important;
  bottom: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;

  margin-top: 2px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* alte Button-Optik neutralisieren */
.footer-floating-icon-btn,
.footer-icon-btn,
.message-footer-actions .retry-message-btn,
.message-footer-actions .copy-message-btn,
.message-footer-actions .copy-icon-btn {
  width: auto !important;
  height: 28px !important;
  min-width: 28px !important;

  padding: 0 7px !important;
  border: 0 !important;
  border-radius: 999px !important;

  background: transparent !important;
  box-shadow: none !important;

  color: rgba(245, 247, 251, 0.58) !important;
  opacity: 1 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  cursor: pointer !important;

  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;

  transition:
    color 0.14s ease,
    background 0.14s ease,
    transform 0.14s ease !important;
}

.footer-floating-icon-btn:hover,
.footer-icon-btn:hover,
.message-footer-actions .retry-message-btn:hover,
.message-footer-actions .copy-message-btn:hover,
.message-footer-actions .copy-icon-btn:hover {
  color: rgba(255, 255, 255, 0.92) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  transform: translateY(-1px) !important;
}

/* Falls noch SVGs im Button liegen: sauber rendern */
.footer-floating-icon-btn svg,
.footer-icon-btn svg,
.message-footer-actions button svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2.25 !important;
  shape-rendering: geometricPrecision;
}

/* Codeblock-Copy bleibt als kleiner Button oben im Codeblock */
.code-header .copy-code-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.055) !important;
  color: rgba(255,255,255,0.9) !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.code-header .copy-code-btn:hover {
  background: rgba(255,255,255,0.095) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* Mobile: nicht zu viel Platz verschwenden */
@media (max-width: 680px) {
  .message-footer {
    gap: 7px;
    margin-top: 10px;
  }

  .message-footer-actions,
  .message-footer-actions-floating {
    gap: 6px !important;
  }

  .message-footer-actions .retry-message-btn,
  .message-footer-actions .copy-message-btn,
  .message-footer-actions .copy-icon-btn {
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 6px !important;
    font-size: 14px !important;
  }
}
/* === Visible Tooltip for assistant action buttons === */

.message-footer-actions button {
  position: relative;
}

.message-footer-actions button::after {
  content: attr(aria-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(4px);

  opacity: 0;
  pointer-events: none;
  white-space: nowrap;

  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(18, 18, 24, 0.96);
  color: rgba(255,255,255,0.92);

  font-size: 12px;
  font-weight: 700;
  line-height: 1;

  box-shadow:
    0 12px 30px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.06);

  z-index: 50;

  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
}

.message-footer-actions button::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%) translateY(4px);

  width: 8px;
  height: 8px;
  background: rgba(18, 18, 24, 0.96);
  border-right: 1px solid rgba(255,255,255,0.10);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  rotate: 45deg;

  opacity: 0;
  pointer-events: none;
  z-index: 49;

  transition:
    opacity 0.14s ease,
    transform 0.14s ease;
}

.message-footer-actions button:hover::after,
.message-footer-actions button:hover::before,
.message-footer-actions button:focus-visible::after,
.message-footer-actions button:focus-visible::before {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
/* Copy icon optical alignment */
.message-footer-actions .copy-message-btn {
  font-size: 16px !important;
  opacity: 0.82 !important;
}

.message-footer-actions .copy-message-btn:hover {
  opacity: 1 !important;
}
/* === FINAL FIX Mai 2026: SVG Icons, Tooltips, Code, Landing Chat Titles === */

/* Tooltips dürfen über Panel-Grenzen sichtbar werden */
.shell,
.main-panel,
.composer,
.mode-bar,
.message-footer,
.message-footer-actions,
.bubble,
.code-header {
  overflow: visible;
}

/* Hauptpanel darf vertikal weiter scrollen, aber Tooltips sollen nicht durch eigene Container abgeschnitten werden */
.messages {
  overflow-y: auto;
  overflow-x: visible;
}

/* Einheitliche SVG-Icons */
.mode-toggle-icon,
.footer-icon-btn,
.copy-icon-btn,
.copy-message-btn,
.copy-code-btn,
.retry-message-btn {
  line-height: 1;
}

.mode-toggle-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.mode-toggle-icon svg,
.footer-icon-btn svg,
.copy-icon-btn svg,
.copy-message-btn svg,
.copy-code-btn svg,
.retry-message-btn svg {
  width: 18px;
  height: 18px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}

/* Mode Buttons ohne Emoji-Matsch */
.mode-toggle-btn {
  position: relative;
  min-height: 34px;
  padding: 0 12px;
  gap: 8px;
}

.mode-toggle-label {
  display: inline-block;
}

/* Saubere eigene Tooltips */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(3px);
  z-index: 99999;

  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 8px 10px;
  border-radius: 11px;

  background: rgba(20, 20, 27, 0.98);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(245,247,251,0.94);

  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: -0.01em;
  white-space: normal;
  text-align: center;

  box-shadow: 0 14px 38px rgba(0,0,0,0.44);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.14s ease,
    transform 0.14s ease,
    visibility 0.14s ease;
}

[data-tooltip]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%) rotate(45deg);
  z-index: 99998;

  width: 9px;
  height: 9px;
  background: rgba(20, 20, 27, 0.98);
  border-right: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);

  pointer-events: none;
  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.14s ease,
    visibility 0.14s ease;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after,
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  transform: translateX(-50%) translateY(0);
}

/* Bei Buttons nahe links nicht in die Sidebar laufen */
.mode-toggle-btn:first-child::after {
  left: 0;
  transform: translateX(0) translateY(3px);
  text-align: left;
}

.mode-toggle-btn:first-child:hover::after,
.mode-toggle-btn:first-child:focus-visible::after {
  transform: translateX(0) translateY(0);
}

.mode-toggle-btn:first-child::before {
  left: 18px;
}

/* Assistant Footer Buttons wie ChatGPT: ruhig, minimal, ohne Hintergrund */
.message-footer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  position: static !important;
}

.message-footer-actions,
.message-footer-actions-floating {
  position: static !important;
  right: auto !important;
  bottom: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;

  margin-top: 2px !important;
  padding: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.footer-icon-btn,
.message-footer-actions .retry-message-btn,
.message-footer-actions .copy-message-btn,
.message-footer-actions .copy-icon-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;

  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;

  background: transparent !important;
  box-shadow: none !important;

  color: rgba(245,247,251,0.58) !important;
  opacity: 1 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;

  font-size: 0 !important;
  line-height: 1 !important;

  transition:
    color 0.14s ease,
    background 0.14s ease,
    transform 0.14s ease !important;
}

.footer-icon-btn:hover,
.message-footer-actions .retry-message-btn:hover,
.message-footer-actions .copy-message-btn:hover,
.message-footer-actions .copy-icon-btn:hover {
  color: rgba(255,255,255,0.94) !important;
  background: rgba(255,255,255,0.055) !important;
  transform: translateY(-1px) !important;
}

/* Codeblock: Einrückungen stabil, horizontales Scrollen, Copy sauber */
.code-block {
  max-width: 100%;
  overflow: hidden;
}

.code-header {
  min-height: 42px;
  overflow: visible;
}

.code-block pre {
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre !important;
  tab-size: 2;
}

.code-block code {
  white-space: pre !important;
  tab-size: 2;
  font-variant-ligatures: none;
}

.code-header .copy-code-btn {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  border-radius: 10px !important;

  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.055) !important;
  color: rgba(255,255,255,0.9) !important;

  font-size: 0 !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.18) !important;
}

.code-header .copy-code-btn:hover {
  background: rgba(255,255,255,0.095) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

.code-header .copy-code-btn svg {
  width: 17px !important;
  height: 17px !important;
}

/* Landing: lange letzte Chat-Titel sauber mit ... */
.bot-card-chat-item-v3 {
  min-width: 0;
}

.bot-card-chat-title-v3 {
  display: block !important;
  max-width: 100%;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Sidebar-Chatnamen ebenfalls stabil abschneiden */
.conversation-item span,
.bot-switch-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile: Buttons kompakt halten */
@media (max-width: 680px) {
  .mode-toggle-btn {
    min-height: 32px;
    padding: 0 10px;
  }

  .mode-toggle-icon {
    width: 17px;
    height: 17px;
    min-width: 17px;
  }

  .mode-toggle-icon svg,
  .footer-icon-btn svg,
  .copy-icon-btn svg,
  .copy-message-btn svg,
  .copy-code-btn svg,
  .retry-message-btn svg {
    width: 17px;
    height: 17px;
  }

  [data-tooltip]::after {
    max-width: min(240px, calc(100vw - 28px));
    font-size: 11px;
  }

  .message-footer-actions {
    gap: 6px !important;
  }
}
/* === FIX: Keine doppelten Tooltips + Footer-Tooltip nicht in Sidebar === */

/* Footer-Buttons: Tooltip nach oben, aber links am Button ausgerichtet */
.message-footer-actions [data-tooltip]::after,
.message-footer-actions-floating [data-tooltip]::after {
  left: 0 !important;
  right: auto !important;
  bottom: calc(100% + 9px) !important;
  transform: translateX(0) translateY(3px) !important;
  text-align: left !important;
  max-width: min(300px, calc(100vw - 40px)) !important;
}

.message-footer-actions [data-tooltip]:hover::after,
.message-footer-actions [data-tooltip]:focus-visible::after,
.message-footer-actions-floating [data-tooltip]:hover::after,
.message-footer-actions-floating [data-tooltip]:focus-visible::after {
  transform: translateX(0) translateY(0) !important;
}

.message-footer-actions [data-tooltip]::before,
.message-footer-actions-floating [data-tooltip]::before {
  left: 14px !important;
  right: auto !important;
  bottom: calc(100% + 4px) !important;
  transform: rotate(45deg) !important;
}

.mode-bar [data-tooltip]::after {
  width: max-content !important;
  min-width: 0 !important;
  max-width: calc(100vw - 40px) !important;
  white-space: nowrap !important;
}

/* Mode-Bar-Tooltips bleiben mittig über den Buttons */
.mode-bar [data-tooltip]::after {
  white-space: normal !important;
}

/* Safari/Browser darf keinen alten nativen Tooltip optisch stören */
button[title=""] {
  pointer-events: auto;
}
/* === FIX: Copy button state keeps icon and shows success === */

.copy-icon-btn.is-copied,
.copy-message-btn.is-copied,
.copy-code-btn.is-copied,
.footer-icon-btn.is-copied {
  color: #d9ffe8 !important;
  background: rgba(46, 204, 113, 0.13) !important;
  border-color: rgba(46, 204, 113, 0.26) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.copy-icon-btn.is-copy-error,
.copy-message-btn.is-copy-error,
.copy-code-btn.is-copy-error,
.footer-icon-btn.is-copy-error {
  color: #ffd4d4 !important;
  background: rgba(255, 95, 95, 0.13) !important;
  border-color: rgba(255, 95, 95, 0.26) !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}
.main-panel {
  isolation: isolate;
}

.messages {
  padding-bottom: 190px !important;
}

.composer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 120 !important;
  isolation: isolate;
  background:
    linear-gradient(
      to top,
      rgba(8, 8, 14, 1) 0%,
      rgba(8, 8, 14, 0.99) 58%,
      rgba(8, 8, 14, 0.94) 100%
    ) !important;
  border-top: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(22px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(150%) !important;
}

.composer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -42px;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(8, 8, 14, 1) 0%,
      rgba(8, 8, 14, 0.98) 62%,
      rgba(8, 8, 14, 0) 100%
    );
}

.composer-form,
.composer-form-modern {
  position: relative;
  z-index: 2;
}

.composer textarea,
.composer-form textarea,
.composer-form-modern textarea {
  background:
    linear-gradient(
      180deg,
      rgba(24, 25, 35, 0.99),
      rgba(16, 17, 25, 0.99)
    ) !important;
  border-color: rgba(255,255,255,0.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 18px 54px rgba(0,0,0,0.36) !important;
  opacity: 1 !important;
}

.composer textarea:focus,
.composer textarea:not(:placeholder-shown),
.composer.is-active textarea {
  background:
    linear-gradient(
      180deg,
      rgba(28, 29, 41, 1),
      rgba(18, 19, 29, 1)
    ) !important;
  border-color: rgba(124, 92, 255, 0.48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 0 0 4px rgba(124, 92, 255, 0.11),
    0 20px 64px rgba(0,0,0,0.44) !important;
}

.composer-plus-btn,
.composer-form #sendBtn,
.composer-form-modern #sendBtn,
.mode-toggle-btn {
  position: relative;
  z-index: 3;
}

@media (max-width: 680px) {
  .messages {
    padding-bottom: 170px !important;
  }

  .composer {
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
}
/* =========================================================
   PREMIUM UI FINAL PATCH — KI Bots / Mai 2026
   Ziel:
   - Composer kompakt, stabil, professionell
   - Mobile Send-Button rechts im Feld
   - Upload-Menü über Chips korrekt sichtbar
   - Codeblock-Copy sichtbar
   - Footer-Actions ruhiger
   - Landing/Sidebar mehr Premium Feeling
   ========================================================= */

:root {
  --premium-bg-0: #07070a;
  --premium-bg-1: #0b0b11;
  --premium-card: rgba(18, 19, 28, 0.72);
  --premium-card-strong: rgba(24, 25, 36, 0.86);
  --premium-line: rgba(255,255,255,0.105);
  --premium-line-soft: rgba(255,255,255,0.07);
  --premium-text-soft: rgba(245,247,251,0.72);
  --premium-text-faint: rgba(245,247,251,0.52);
  --premium-purple: #7c5cff;
  --premium-blue: #5c8dff;
  --premium-green: #2ecc71;
  --premium-red: #ff5f5f;
  --premium-shadow: 0 24px 80px rgba(0,0,0,0.42);
}

html,
body {
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 92, 255, 0.16), transparent 34%),
    radial-gradient(circle at 82% 12%, rgba(92, 141, 255, 0.10), transparent 28%),
    linear-gradient(180deg, var(--premium-bg-0) 0%, var(--premium-bg-1) 100%) !important;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.page:not(.landing-page-v3) {
  padding: 18px !important;
}

.main-panel {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.028)) !important;
  border-color: var(--premium-line-soft) !important;
  box-shadow:
    0 30px 110px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.045) !important;
  overflow: visible !important;
  isolation: isolate;
}

.topbar {
  background:
    linear-gradient(180deg, rgba(9, 9, 14, 0.96), rgba(9, 9, 14, 0.88)) !important;
  border-bottom-color: rgba(255,255,255,0.075) !important;
}

.topbar-title {
  letter-spacing: -0.045em;
}

.topbar-subtitle,
.status-row {
  color: var(--premium-text-soft) !important;
}

/* Chat-Fläche: weniger künstlicher Leerraum unten */
.messages {
  padding: 24px 30px 36px !important;
  padding-bottom: 36px !important;
  gap: 18px !important;
  scroll-padding-top: 120px !important;
  scroll-padding-bottom: 170px !important;
  overflow-y: auto !important;
  overflow-x: visible !important;
}

.message {
  scroll-margin-top: 118px !important;
  scroll-margin-bottom: 140px !important;
}

.bubble {
  max-width: min(840px, 88%) !important;
  border-radius: 24px !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow:
    0 18px 54px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

.message.assistant .bubble {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.062), rgba(255,255,255,0.038)) !important;
}

.message.user .bubble {
  background:
    linear-gradient(135deg, rgba(124, 92, 255, 0.34), rgba(92, 141, 255, 0.22)) !important;
  border-color: rgba(124, 92, 255, 0.24) !important;
}

.message-role {
  color: rgba(245,247,251,0.48) !important;
  letter-spacing: 0.11em !important;
}

.message-content {
  font-size: 0.99rem !important;
  line-height: 1.72 !important;
}

/* =========================================================
   Composer
   ========================================================= */

.composer {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 220 !important;
  padding: 10px 24px max(16px, env(safe-area-inset-bottom)) !important;
  border-top: 1px solid rgba(255,255,255,0.105) !important;
  background:
    linear-gradient(
      to top,
      rgba(8, 8, 13, 1) 0%,
      rgba(8, 8, 13, 0.99) 62%,
      rgba(8, 8, 13, 0.94) 100%
    ) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  isolation: isolate;
}

.composer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -52px;
  height: 52px;
  pointer-events: none;
  z-index: -1;
  background:
    linear-gradient(
      to top,
      rgba(8, 8, 13, 0.98) 0%,
      rgba(8, 8, 13, 0.76) 45%,
      rgba(8, 8, 13, 0) 100%
    );
}

/* Tool-Chips */
.mode-bar {
  position: relative !important;
  z-index: 230 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 0 9px !important;
  padding: 0 2px !important;
  overflow: visible !important;
}

.mode-toggle-btn {
  min-height: 34px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.062), rgba(255,255,255,0.032)) !important;
  color: rgba(245,247,251,0.78) !important;
  padding: 0 13px !important;
  gap: 8px !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.045) !important;
}

.mode-toggle-btn:hover {
  transform: translateY(-1px) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.085), rgba(255,255,255,0.045)) !important;
  border-color: rgba(255,255,255,0.18) !important;
  color: #fff !important;
}

.mode-toggle-btn.active {
  color: #f4f1ff !important;
  border-color: rgba(124, 92, 255, 0.42) !important;
  background:
    linear-gradient(135deg, rgba(124, 92, 255, 0.24), rgba(92, 141, 255, 0.13)) !important;
  box-shadow:
    0 10px 28px rgba(124, 92, 255, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.075) !important;
}

/* Eingabeleiste als eine echte Premium-Bar */
#chatForm.composer-form-modern {
  position: relative !important;
  z-index: 225 !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) 48px !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 64px !important;
  padding: 8px !important;
  border-radius: 26px !important;
  border: 1px solid rgba(255,255,255,0.115) !important;
  background:
    linear-gradient(180deg, rgba(24, 25, 36, 0.92), rgba(15, 16, 24, 0.92)) !important;
  box-shadow:
    0 20px 70px rgba(0,0,0,0.32),
    inset 0 1px 0 rgba(255,255,255,0.055) !important;
}

.composer.is-active #chatForm.composer-form-modern,
#chatForm.composer-form-modern:focus-within {
  border-color: rgba(124, 92, 255, 0.42) !important;
  box-shadow:
    0 0 0 4px rgba(124, 92, 255, 0.09),
    0 24px 80px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.065) !important;
}

.composer-plus-wrap {
  position: relative !important;
  z-index: 1000 !important;
  grid-column: 1 !important;
  min-width: 0 !important;
}

#messageInput {
  grid-column: 2 !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 28px !important;
  height: 28px;
  max-height: 150px !important;
  padding: 4px 2px !important;
  border: 0 !important;
  outline: 0 !important;
  resize: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--text) !important;
  line-height: 1.45 !important;
}

#messageInput:focus,
#messageInput:not(:placeholder-shown),
.composer.is-active #messageInput {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

#messageInput::placeholder {
  color: rgba(245,247,251,0.50) !important;
}

.composer-plus-btn,
#sendBtn {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 17px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: 0 !important;
}

.composer-plus-btn {
  border: 1px solid rgba(255,255,255,0.115) !important;
  background: rgba(255,255,255,0.055) !important;
  color: rgba(255,255,255,0.92) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
}

.composer-plus-btn:hover,
.composer-plus-btn[aria-expanded="true"] {
  background: rgba(124, 92, 255, 0.18) !important;
  border-color: rgba(124, 92, 255, 0.34) !important;
}

#sendBtn {
  grid-column: 3 !important;
  justify-self: end !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: linear-gradient(135deg, #765cff 0%, #5d8eff 100%) !important;
  color: #fff !important;
  box-shadow:
    0 12px 30px rgba(92, 141, 255, 0.25),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

#sendBtn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 16px 38px rgba(92, 141, 255, 0.30),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

#sendBtn.is-stop {
  background: rgba(255, 95, 95, 0.15) !important;
  border-color: rgba(255, 95, 95, 0.28) !important;
  color: #ffe1e1 !important;
  box-shadow: none !important;
}

.composer-action-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  font-size: 0 !important;
}

.composer-action-icon svg,
.mode-toggle-icon svg,
.footer-icon-btn svg,
.copy-icon-btn svg,
.copy-message-btn svg,
.copy-code-btn svg,
.retry-message-btn svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.15 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Upload-Menü: über den Tool-Chips, nicht dahinter */
.upload-menu {
  position: absolute !important;
  left: 0 !important;
  bottom: calc(100% + 12px) !important;
  width: min(280px, calc(100vw - 48px)) !important;
  padding: 8px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  background:
    linear-gradient(180deg, rgba(24,25,34,0.985), rgba(13,14,21,0.985)) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.54),
    inset 0 1px 0 rgba(255,255,255,0.055) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  z-index: 2000 !important;
}

.upload-menu[hidden] {
  display: none !important;
}

.upload-menu-item {
  border-radius: 15px !important;
  padding: 12px 13px !important;
}

.upload-menu-item:hover {
  background: rgba(255,255,255,0.075) !important;
}

.upload-menu-item span {
  font-size: 0.95rem !important;
  font-weight: 850 !important;
}

.upload-menu-item small {
  color: rgba(245,247,251,0.58) !important;
}

/* =========================================================
   Footer / Meta / Actions
   ========================================================= */

.message-footer {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 7px !important;
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.065) !important;
  position: static !important;
}

.message-footer .message-meta {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: rgba(245,247,251,0.50) !important;
  font-size: 0.78rem !important;
  line-height: 1.45 !important;
}

.message-footer-actions,
.message-footer-actions-floating {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.footer-icon-btn,
.message-footer-actions .retry-message-btn,
.message-footer-actions .copy-message-btn,
.message-footer-actions .copy-icon-btn {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(245,247,251,0.55) !important;
  opacity: 1 !important;
  font-size: 0 !important;
}

.footer-icon-btn:hover,
.message-footer-actions .retry-message-btn:hover,
.message-footer-actions .copy-message-btn:hover,
.message-footer-actions .copy-icon-btn:hover {
  color: rgba(255,255,255,0.96) !important;
  background: rgba(255,255,255,0.06) !important;
  transform: translateY(-1px) !important;
}

/* Tooltips zuverlässig sichtbar */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  transform: translateX(-50%) translateY(4px);
  z-index: 3000;
  max-width: min(320px, calc(100vw - 42px));
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(18, 18, 25, 0.98);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 14px 36px rgba(0,0,0,0.42);
  font-size: 12px;
  font-weight: 760;
  line-height: 1.15;
  white-space: normal;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s ease;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.message-footer-actions [data-tooltip]::after {
  left: 0 !important;
  transform: translateX(0) translateY(4px) !important;
}

.message-footer-actions [data-tooltip]:hover::after,
.message-footer-actions [data-tooltip]:focus-visible::after {
  transform: translateX(0) translateY(0) !important;
}

/* =========================================================
   Codeblocks
   ========================================================= */

.code-block {
  max-width: 100% !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  background: #080c13 !important;
  box-shadow:
    0 18px 54px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

.code-header {
  min-height: 46px !important;
  padding: 10px 12px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.026)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  overflow: visible !important;
}

.code-language {
  color: rgba(245,247,251,0.62) !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.code-block pre {
  margin: 0 !important;
  padding: 18px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  white-space: pre !important;
  tab-size: 2 !important;
  background: #080c13 !important;
}

.code-block code {
  white-space: pre !important;
  tab-size: 2 !important;
  font-size: 13.5px !important;
  line-height: 1.62 !important;
  color: #f4f7fb !important;
}

.code-header .copy-code-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  background: rgba(255,255,255,0.058) !important;
  color: rgba(255,255,255,0.86) !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

.code-header .copy-code-btn:hover {
  background: rgba(255,255,255,0.105) !important;
  border-color: rgba(255,255,255,0.22) !important;
}

/* =========================================================
   Sidebar Polish
   ========================================================= */

.app-sidebar {
  background:
    linear-gradient(180deg, rgba(28, 25, 47, 0.78), rgba(14, 14, 21, 0.78)) !important;
  border-color: rgba(255,255,255,0.09) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.38),
    inset 0 1px 0 rgba(255,255,255,0.055) !important;
}

.bot-switch-item,
.conversation-item {
  border-color: rgba(255,255,255,0.075) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.028)) !important;
}

.bot-switch-item.active,
.conversation-row.active .conversation-item {
  background:
    linear-gradient(135deg, rgba(124, 92, 255, 0.26), rgba(92, 141, 255, 0.09)) !important;
  border-color: rgba(124, 92, 255, 0.34) !important;
}

.conversation-trash-btn {
  opacity: 0.42 !important;
  background: transparent !important;
  border-color: rgba(255, 95, 95, 0.10) !important;
  color: rgba(255, 220, 220, 0.72) !important;
}

.conversation-row:hover .conversation-trash-btn {
  opacity: 1 !important;
  background: rgba(255, 95, 95, 0.07) !important;
}

.sidebar-delete-btn {
  opacity: 0.72 !important;
}

.landing-page-v3 {
  background:
    radial-gradient(circle at 20% 0%, rgba(124, 92, 255, 0.18), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(92, 141, 255, 0.11), transparent 30%),
    linear-gradient(180deg, #07070a 0%, #0b0b11 100%) !important;
}

.landing-hero-card-v3,
.landing-usage-card-v3,
.landing-bots-card-v3,
.bot-select-card-v3 {
  border-color: rgba(255,255,255,0.09) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.062), rgba(255,255,255,0.032)) !important;
  box-shadow:
    0 24px 90px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.045) !important;
}

.bot-select-card-v3:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(124, 92, 255, 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.078), rgba(255,255,255,0.042)) !important;
}

.landing-hero-copy-v3 h1 {
  letter-spacing: -0.07em !important;
}

.bot-card-chat-title-v3,
.conversation-item span,
.bot-switch-name {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

@media (max-width: 680px) {
  .page:not(.landing-page-v3) {
    padding: 0 !important;
  }

  .main-panel {
    min-height: 100dvh !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .topbar {
    border-radius: 0 !important;
    padding: 15px 16px 13px !important;
  }

  .messages {
    padding: 18px 16px 28px !important;
    padding-bottom: 28px !important;
  }

  .bubble {
    max-width: 100% !important;
    border-radius: 22px !important;
  }

  .mode-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    gap: 7px !important;
    margin-bottom: 8px !important;
    padding-bottom: 2px !important;
    scrollbar-width: none;
  }

  .mode-bar::-webkit-scrollbar {
    display: none;
  }

  .mode-toggle-btn {
    flex: 0 0 auto !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 0.80rem !important;
  }

  .composer {
    padding: 10px 16px max(12px, env(safe-area-inset-bottom)) !important;
  }

  #chatForm.composer-form-modern {
    grid-template-columns: 46px minmax(0, 1fr) 46px !important;
    grid-template-rows: auto !important;
    min-height: 62px !important;
    gap: 8px !important;
    padding: 7px !important;
    border-radius: 24px !important;
    align-items: center !important;
  }

  .composer-plus-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  #messageInput {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-height: 28px !important;
    height: 28px;
    max-height: 120px !important;
    padding: 4px 0 !important;
  }

  #sendBtn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 16px !important;
  }

  .composer-plus-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 16px !important;
  }

  .upload-menu {
    left: 0 !important;
    bottom: calc(100% + 12px) !important;
    width: min(268px, calc(100vw - 40px)) !important;
  }

  [data-tooltip]::after {
    display: none !important;
  }

  .landing-page-v3 {
    padding: 14px !important;
  }
}
/* =========================================================
   FINAL PATCH 2 — Fixed App Layout + Upload Menu Clearance
   Fixes:
   - Upload-Menü überlappt nicht mehr Tool-Chips
   - Sidebar bleibt im Viewport erreichbar
   - Composer bleibt immer unten sichtbar
   - Nur Nachrichtenbereich scrollt
   ========================================================= */

/* Upload-Menü muss bei Albert/Stephen über der Mode-Bar öffnen */
body[data-bot="albert"] .upload-menu,
body[data-bot="stephen"] .upload-menu {
  bottom: calc(100% + 64px) !important;
  z-index: 5000 !important;
}

/* Mehr Abstand, falls Tool-Chips auf kleineren Breiten umbrechen */
@media (max-width: 720px) {
  body[data-bot="albert"] .upload-menu,
  body[data-bot="stephen"] .upload-menu {
    bottom: calc(100% + 58px) !important;
  }
}

/* Desktop/Tablet: echtes App-Layout, keine ganze Seite scrollen */
@media (min-width: 981px) {
  html,
  body {
    height: 100%;
    overflow: hidden !important;
  }

  body[data-bot] #appScreen {
    height: 100dvh;
    overflow: hidden !important;
  }

  body[data-bot] #appScreen > .page:not(.landing-page-v3) {
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 18px !important;
    overflow: hidden !important;
  }

  body[data-bot] .shell {
    height: calc(100dvh - 36px) !important;
    min-height: 0 !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: 300px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  body[data-bot] .shell.sidebar-is-collapsed {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }

  body[data-bot] .app-sidebar {
    position: sticky !important;
    top: 0 !important;
    align-self: start !important;
    height: calc(100dvh - 36px) !important;
    max-height: calc(100dvh - 36px) !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  body[data-bot] .app-sidebar-section-grow {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body[data-bot] .conversation-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 2px !important;
    scrollbar-width: thin;
  }

  body[data-bot] .app-sidebar-footer {
    flex: 0 0 auto !important;
    margin-top: 12px !important;
  }

  body[data-bot] .main-panel {
    height: calc(100dvh - 36px) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 36px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }

  body[data-bot] .topbar {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
  }

  body[data-bot] .messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-bottom: 34px !important;
  }

  body[data-bot] .composer {
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
  }

  body[data-bot] .composer::before {
    top: -44px !important;
    height: 44px !important;
  }
}

/* Mobile: Composer bleibt unten im App-Panel, nicht erst am Seitenende */
@media (max-width: 980px) {
  body[data-bot] #appScreen {
    min-height: 100dvh;
  }

  body[data-bot] #appScreen > .page:not(.landing-page-v3) {
    min-height: 100dvh !important;
    padding: 0 !important;
  }

  body[data-bot] .shell {
    min-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  body[data-bot] .main-panel {
    min-height: 100dvh !important;
    height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 0 !important;
  }

  body[data-bot] .topbar {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
  }

  body[data-bot] .messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  body[data-bot] .composer {
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
  }

  body[data-bot] .upload-menu {
    z-index: 5000 !important;
  }
}

/* Mobile Tool-Chips: kein hässliches Kreuzen mit Upload-Menü */
@media (max-width: 680px) {
  body[data-bot] .mode-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none;
  }

  body[data-bot] .mode-bar::-webkit-scrollbar {
    display: none;
  }

  body[data-bot="albert"] .upload-menu,
  body[data-bot="stephen"] .upload-menu {
    bottom: calc(100% + 56px) !important;
  }
}
/* =========================================================
   FINAL PATCH 3 — Auto-Collapse Topbar + iOS Keyboard Fix
   ========================================================= */

/* Immer dunkler Hintergrund, damit iOS/Safari keine weißen Flächen zeigt */
html,
body,
body[data-bot],
body[data-bot] #appScreen,
body[data-bot] #appScreen > .page:not(.landing-page-v3) {
  background-color: #07070a !important;
}

/* Topbar animierbar machen */
body[data-bot] .topbar {
  overflow: hidden !important;
  max-height: 150px !important;
  transition:
    max-height 0.22s ease,
    padding 0.22s ease,
    opacity 0.18s ease,
    transform 0.22s ease,
    border-color 0.18s ease !important;
  will-change: max-height, padding, opacity, transform;
}

/* Desktop: nur kompakter, nicht komplett weg */
@media (min-width: 761px) {
  body[data-bot] .topbar.is-collapsed-by-scroll {
    max-height: 58px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  body[data-bot] .topbar.is-collapsed-by-scroll .topbar-subtitle,
  body[data-bot] .topbar.is-collapsed-by-scroll .status-row,
  body[data-bot] .topbar.is-collapsed-by-scroll .topbar-actions {
    display: none !important;
  }

  body[data-bot] .topbar.is-collapsed-by-scroll .topbar-title {
    font-size: 1.12rem !important;
    margin: 0 !important;
  }
}

/* Mobile: Topbar verschwindet beim Scrollen oder beim Tippen komplett */
@media (max-width: 760px) {
  body[data-bot] .topbar {
    max-height: 112px !important;
  }

  body[data-bot] .topbar.is-collapsed-by-scroll,
  body[data-bot].keyboard-open .topbar {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-bottom-color: transparent !important;
    opacity: 0 !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
  }

  body[data-bot] .main-panel.topbar-is-collapsed .messages,
  body[data-bot].keyboard-open .messages {
    padding-top: 12px !important;
  }
}

/* iOS/Safari: App-Höhe an sichtbaren Viewport anpassen */
@media (max-width: 980px) {
  body[data-bot] #appScreen,
  body[data-bot] #appScreen > .page:not(.landing-page-v3),
  body[data-bot] .shell,
  body[data-bot] .main-panel {
    height: var(--app-vh, 100dvh) !important;
    min-height: var(--app-vh, 100dvh) !important;
    max-height: var(--app-vh, 100dvh) !important;
  }

  body[data-bot] #appScreen,
  body[data-bot] #appScreen > .page:not(.landing-page-v3) {
    overflow: hidden !important;
  }

  body[data-bot] .main-panel {
    overflow: hidden !important;
  }

  body[data-bot] .messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body[data-bot] .composer {
    flex: 0 0 auto !important;
  }

  body[data-bot].keyboard-open .composer {
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
  }

  body[data-bot].keyboard-open #chatForm.composer-form-modern {
    box-shadow:
      0 0 0 4px rgba(124, 92, 255, 0.08),
      0 16px 46px rgba(0,0,0,0.34),
      inset 0 1px 0 rgba(255,255,255,0.055) !important;
  }
}

/* Safari-Fallback */
@supports (-webkit-touch-callout: none) {
  html,
  body {
    min-height: -webkit-fill-available;
    background-color: #07070a !important;
  }

  body[data-bot] #appScreen,
  body[data-bot] #appScreen > .page:not(.landing-page-v3),
  body[data-bot] .main-panel {
    background-color: #07070a !important;
  }
}
/* =========================================================
   DELETE BUTTON FINAL — echter roter Mülleimer
   ========================================================= */

.conversation-row {
  grid-template-columns: minmax(0, 1fr) 36px !important;
  gap: 8px !important;
}

.conversation-trash-btn {
  width: 36px !important;
  min-width: 36px !important;
  height: auto !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 95, 95, 0.34) !important;
  background: rgba(255, 95, 95, 0.15) !important;
  color: #ffb4b4 !important;
  cursor: pointer !important;
  opacity: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow:
    0 8px 24px rgba(255, 95, 95, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease !important;
}

.conversation-trash-btn svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.05 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.conversation-trash-btn:hover {
  background: rgba(255, 95, 95, 0.24) !important;
  border-color: rgba(255, 95, 95, 0.52) !important;
  color: #ffe1e1 !important;
  transform: translateY(-1px) !important;
  box-shadow:
    0 12px 30px rgba(255, 95, 95, 0.14),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

.conversation-trash-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

.conversation-trash-btn:disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Falls der große Footer-Löschbutton irgendwann wieder sichtbar ist */
.sidebar-delete-btn,
#deleteConversationBtn {
  border: 1px solid rgba(255, 95, 95, 0.34) !important;
  background: rgba(255, 95, 95, 0.15) !important;
  color: #ffb4b4 !important;
}

.sidebar-delete-btn:hover,
#deleteConversationBtn:hover {
  background: rgba(255, 95, 95, 0.24) !important;
  border-color: rgba(255, 95, 95, 0.52) !important;
  color: #ffe1e1 !important;
}
/* =========================================================
   FINAL PATCH 4 — Stream Scroll, Stop Button, Delete Tooltip,
   Plus Alignment, Compact Chat Spacing
   ========================================================= */

/* Messages: bei kurzen Chats näher an den Composer, bei langen normal scrollen */
body[data-bot] .messages {
  gap: 12px !important;
  padding-bottom: 18px !important;
  overscroll-behavior: contain;
  scroll-behavior: auto;
}

body[data-bot] .messages > .message:first-child {
  margin-top: auto !important;
}

/* Weniger Abstand zwischen letzter Nachricht, Toolchips und Composer */
body[data-bot] .composer {
  padding-top: 8px !important;
}

body[data-bot] .mode-bar {
  margin-bottom: 7px !important;
}

body[data-bot] .message.assistant {
  margin-bottom: 10px !important;
}

body[data-bot] .message-footer {
  margin-top: 9px !important;
  gap: 5px !important;
}

body[data-bot] .message-footer .message-meta {
  font-size: 0.76rem !important;
}

/* Plus optisch exakt mittig */
body[data-bot] .composer-plus-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
  font-size: 0 !important;
  font-weight: 400 !important;
}

body[data-bot] .composer-plus-btn::before {
  content: "+";
  display: block;
  font-size: 31px;
  line-height: 1;
  font-weight: 420;
  transform: translateY(-1px);
}

/* Der Text-Plus-Inhalt bleibt unsichtbar, das Pseudo-Plus ist sauber zentriert */
body[data-bot] .composer-plus-btn {
  color: transparent !important;
}

body[data-bot] .composer-plus-btn::before {
  color: rgba(255,255,255,0.92) !important;
}

/* Stop-Button: wieder klarer gefüllter Stop statt dünnes Outline-Quadrat */
body[data-bot] #sendBtn.is-stop {
  background: rgba(255, 95, 95, 0.16) !important;
  border-color: rgba(255, 95, 95, 0.38) !important;
  color: #ffe1e1 !important;
  box-shadow:
    0 10px 28px rgba(255, 95, 95, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

body[data-bot] #sendBtn.is-stop:hover {
  background: rgba(255, 95, 95, 0.23) !important;
  border-color: rgba(255, 95, 95, 0.52) !important;
}

body[data-bot] .composer-stop-icon {
  width: 20px !important;
  height: 20px !important;
}

body[data-bot] .composer-stop-square {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: currentColor;
  display: block;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08);
}

/* Send-Icon optisch sauber */
body[data-bot] #sendBtn:not(.is-stop) .composer-action-icon svg {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 2.35 !important;
}

/* Sidebar-Delete: oben nicht abgeschnitten */
body[data-bot] .conversation-list {
  padding-top: 7px !important;
  padding-bottom: 4px !important;
}

/* Native Safari title vermeiden: eigene Tooltip-Position für Chat-Löschen */
body[data-bot] .conversation-trash-btn[data-tooltip] {
  position: relative !important;
}

body[data-bot] .conversation-trash-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50% !important;
  right: calc(100% + 9px) !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) translateX(4px) !important;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;

  z-index: 6000;
  padding: 7px 9px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(18, 18, 25, 0.98);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 14px 36px rgba(0,0,0,0.42);

  font-size: 12px;
  font-weight: 760;
  line-height: 1.1;

  transition:
    opacity 0.14s ease,
    visibility 0.14s ease,
    transform 0.14s ease;
}

body[data-bot] .conversation-trash-btn[data-tooltip]:hover::after,
body[data-bot] .conversation-trash-btn[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(-50%) translateX(0) !important;
}

/* Der Mülleimer bleibt durchgängig rot und sauber sichtbar */
body[data-bot] .conversation-trash-btn {
  width: 36px !important;
  min-width: 36px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 95, 95, 0.34) !important;
  background: rgba(255, 95, 95, 0.15) !important;
  color: #ffb4b4 !important;
  opacity: 1 !important;
}

body[data-bot] .conversation-trash-btn:hover {
  background: rgba(255, 95, 95, 0.24) !important;
  border-color: rgba(255, 95, 95, 0.52) !important;
  color: #ffe1e1 !important;
  transform: translateY(-1px) !important;
}

body[data-bot] .conversation-trash-btn svg {
  width: 17px !important;
  height: 17px !important;
  display: block !important;
  stroke: currentColor !important;
  fill: none !important;
  stroke-width: 2.05 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Mobile etwas kompakter */
@media (max-width: 680px) {
  body[data-bot] .messages {
    gap: 10px !important;
    padding-bottom: 14px !important;
  }

  body[data-bot] .composer {
    padding-top: 7px !important;
  }

  body[data-bot] .mode-bar {
    margin-bottom: 6px !important;
  }

  body[data-bot] .composer-plus-btn::before {
    font-size: 30px;
    transform: translateY(-1px);
  }

  body[data-bot] .conversation-trash-btn[data-tooltip]::after {
    display: none !important;
  }
}
/* =========================================================
   FIX — Sidebar Delete Tooltip ohne schwebendes Quadrat
   ========================================================= */

body[data-bot] .conversation-trash-btn[data-tooltip]::before {
  display: none !important;
  content: none !important;
}

body[data-bot] .conversation-trash-btn[data-tooltip]::after {
  top: 50% !important;
  right: calc(100% + 10px) !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) translateX(4px) !important;
  white-space: nowrap !important;
}

body[data-bot] .conversation-trash-btn[data-tooltip]:hover::after,
body[data-bot] .conversation-trash-btn[data-tooltip]:focus-visible::after {
  transform: translateY(-50%) translateX(0) !important;
}
/* =========================================================
   FIX — Streaming Scroll darf Nutzer-Scroll nicht blockieren
   ========================================================= */

body[data-bot] .messages {
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  scroll-behavior: auto !important;
}

body[data-bot].keyboard-open .messages {
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}
/* =========================================================
   FINAL PATCH 5 — Fixed Compact Topbar, no collapse
   ========================================================= */

/* Alte Collapse-/Keyboard-Regeln neutralisieren */
body[data-bot] .topbar,
body[data-bot] .topbar.is-fixed-compact,
body[data-bot] .topbar.is-collapsed-by-scroll,
body[data-bot].keyboard-open .topbar {
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto !important;
  max-height: none !important;
  min-height: 52px !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  overflow: hidden !important;
  border-bottom: 1px solid rgba(255,255,255,0.085) !important;
  background:
    linear-gradient(180deg, rgba(10,10,15,0.985), rgba(10,10,15,0.90)) !important;
}

/* Kein dynamisches Zusammenklappen des Panels mehr */
body[data-bot] .main-panel.topbar-is-collapsed .messages,
body[data-bot].keyboard-open .messages {
  padding-top: inherit !important;
}

/* Linke Topbar-Seite: Bot + Modell/Subtitle in einer engen Zeile */
body[data-bot] .topbar-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

body[data-bot] .topbar-main > div:first-child {
  min-width: 0 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 10px !important;
}

body[data-bot] .topbar-title {
  flex: 0 0 auto !important;
  margin: 0 !important;
  font-size: 1.04rem !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
  letter-spacing: -0.045em !important;
}

body[data-bot] .topbar-subtitle {
  min-width: 0 !important;
  max-width: 620px !important;
  margin: 0 !important;
  color: rgba(245,247,251,0.58) !important;
  font-size: 0.80rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Alte Topbar-Buttons bleiben raus, weil Löschen/Logout in Sidebar sind */
body[data-bot] .topbar-actions {
  display: none !important;
}

/* Status rechts als kompakte Pill */
body[data-bot] .status-row {
  flex: 0 0 auto !important;
  margin: 0 !important;
  min-height: 28px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  border: 1px solid rgba(46,204,113,0.18) !important;
  background: rgba(46,204,113,0.075) !important;
  color: rgba(223,255,235,0.86) !important;
  font-size: 0.76rem !important;
  font-weight: 760 !important;
  white-space: nowrap !important;
}

body[data-bot] .status-dot {
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 auto !important;
  box-shadow: 0 0 14px rgba(46,204,113,0.55) !important;
}

body[data-bot] .status-dot.offline {
  box-shadow: 0 0 14px rgba(255,95,95,0.45) !important;
}

/* Wichtig gegen das kurze-Nachrichten-Scroll-Spacken:
   alte Auto-Bottom-Ausrichtung wieder rausnehmen */
body[data-bot] .messages {
  justify-content: flex-start !important;
}

body[data-bot] .messages > .message:first-child {
  margin-top: 0 !important;
}

/* Mobile: weiterhin kompakt, aber Subtitle darf zweite Mini-Zeile sein */
@media (max-width: 760px) {
  body[data-bot] .topbar,
  body[data-bot] .topbar.is-fixed-compact,
  body[data-bot] .topbar.is-collapsed-by-scroll,
  body[data-bot].keyboard-open .topbar {
    min-height: 50px !important;
    padding: 7px 12px !important;
    gap: 8px !important;
  }

  body[data-bot] .topbar-main {
    min-width: 0 !important;
    gap: 8px !important;
  }

  body[data-bot] .topbar-main > div:first-child {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    column-gap: 8px !important;
    row-gap: 2px !important;
    align-items: center !important;
  }

  body[data-bot] .topbar-title {
    font-size: 0.98rem !important;
  }

  body[data-bot] .topbar-subtitle {
    grid-column: 1 / -1 !important;
    max-width: 100% !important;
    font-size: 0.68rem !important;
    line-height: 1.08 !important;
    color: rgba(245,247,251,0.48) !important;
  }

  body[data-bot] .status-row {
    min-height: 26px !important;
    padding: 0 8px !important;
    font-size: 0.70rem !important;
    max-width: 112px !important;
  }

  body[data-bot] #statusText {
    min-width: 0 !important;
    max-width: 78px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}
/* =========================================================
   FINAL PATCH 6 — Stephen/Jeffrey Composer Fix + softer bottom fade
   ========================================================= */

/* ---------------------------------
   A) Bottom Fade / "schwarze Wolke"
   --------------------------------- */

body[data-bot] .composer::before {
  top: -16px !important;
  height: 16px !important;
  background: linear-gradient(
    to top,
    rgba(8, 8, 13, 0.42) 0%,
    rgba(8, 8, 13, 0.16) 55%,
    rgba(8, 8, 13, 0) 100%
  ) !important;
  pointer-events: none !important;
}

/* Weniger unnötige Dunkelzone über dem Composer */
body[data-bot] .composer {
  padding-top: 6px !important;
}

/* Nachrichten unten etwas cleaner */
body[data-bot] .messages {
  padding-bottom: 10px !important;
}

/* Tool-Chips näher an den Composer */
body[data-bot] .mode-bar {
  margin-bottom: 6px !important;
}

/* ---------------------------------
   B) Stephen + Jeffrey:
   Input wieder sauber links ausrichten
   --------------------------------- */

body[data-bot="stephen"] #chatForm.composer-form-modern,
body[data-bot="jeffrey"] #chatForm.composer-form-modern {
  grid-template-columns: minmax(0, 1fr) 48px !important;
  gap: 10px !important;
  padding-left: 14px !important;
  padding-right: 8px !important;
}

/* Linke Plus-/Upload-Spalte komplett raus */
body[data-bot="stephen"] .composer-plus-wrap,
body[data-bot="jeffrey"] .composer-plus-wrap {
  display: none !important;
}

/* Input sitzt in der ersten Spalte */
body[data-bot="stephen"] #messageInput,
body[data-bot="jeffrey"] #messageInput {
  grid-column: 1 !important;
  min-width: 0 !important;
  width: 100% !important;
  padding-left: 0 !important;
  text-align: left !important;
}

/* Placeholder ebenfalls links */
body[data-bot="stephen"] #messageInput::placeholder,
body[data-bot="jeffrey"] #messageInput::placeholder {
  text-align: left !important;
}

/* Send bleibt rechts */
body[data-bot="stephen"] #sendBtn,
body[data-bot="jeffrey"] #sendBtn {
  grid-column: 2 !important;
  justify-self: end !important;
}

/* ---------------------------------
   C) Allgemeiner Premium-Feinschliff
   --------------------------------- */

/* Composer etwas cleaner */
body[data-bot] #chatForm.composer-form-modern {
  box-shadow:
    0 12px 32px rgba(0,0,0,0.22),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Toolchips subtiler */
body[data-bot] .mode-toggle-btn {
  box-shadow:
    0 5px 14px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* Nachrichten-Footer etwas ruhiger */
body[data-bot] .message-footer {
  margin-top: 8px !important;
  padding-top: 10px !important;
}

body[data-bot] .message-footer .message-meta {
  font-size: 0.75rem !important;
  color: rgba(245,247,251,0.46) !important;
}

/* Sidebar-Chats edler */
body[data-bot] .conversation-item span {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body[data-bot] .conversation-item small {
  color: rgba(245,247,251,0.42) !important;
}

/* Aktive Chat-Karte etwas hochwertiger */
body[data-bot] .conversation-row.active .conversation-item {
  box-shadow:
    0 10px 24px rgba(124,92,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* ---------------------------------
   D) Landing Page Mini-Polish
   --------------------------------- */

.landing-page-v3 .bot-select-card-v3,
.landing-page-v3 .landing-hero-card-v3,
.landing-page-v3 .landing-usage-card-v3,
.landing-page-v3 .landing-bots-card-v3 {
  box-shadow:
    0 20px 60px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

.landing-page-v3 .bot-select-card-v3:hover {
  transform: translateY(-2px) !important;
}

.landing-page-v3 .landing-hero-copy-v3 p,
.landing-page-v3 .landing-card-subtitle-v3 {
  color: rgba(245,247,251,0.68) !important;
}

/* ---------------------------------
   E) Mobile ebenfalls sauber halten
   --------------------------------- */

@media (max-width: 680px) {
  body[data-bot] .composer::before {
    top: -12px !important;
    height: 12px !important;
    background: linear-gradient(
      to top,
      rgba(8, 8, 13, 0.36) 0%,
      rgba(8, 8, 13, 0.12) 55%,
      rgba(8, 8, 13, 0) 100%
    ) !important;
  }

  body[data-bot="stephen"] #chatForm.composer-form-modern,
  body[data-bot="jeffrey"] #chatForm.composer-form-modern {
    grid-template-columns: minmax(0, 1fr) 46px !important;
    padding-left: 12px !important;
    padding-right: 7px !important;
  }

  body[data-bot="stephen"] #sendBtn,
  body[data-bot="jeffrey"] #sendBtn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }
}
/* =========================================================
   FIX — Composer Text links nicht abschneiden
   ========================================================= */

body[data-bot] #messageInput {
  padding-left: 8px !important;
  padding-right: 8px !important;
  overflow: hidden auto !important;
}

body[data-bot="stephen"] #chatForm.composer-form-modern,
body[data-bot="jeffrey"] #chatForm.composer-form-modern {
  padding-left: 18px !important;
}

body[data-bot="stephen"] #messageInput,
body[data-bot="jeffrey"] #messageInput {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Albert braucht wegen Plus links etwas weniger extra Input-Padding */
body[data-bot="albert"] #messageInput {
  padding-left: 4px !important;
  padding-right: 8px !important;
}

@media (max-width: 680px) {
  body[data-bot="stephen"] #chatForm.composer-form-modern,
  body[data-bot="jeffrey"] #chatForm.composer-form-modern {
    padding-left: 16px !important;
  }

  body[data-bot] #messageInput {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }
}
/* === FINAL CHAT VISUAL FIX Mai 2026 === */

/* 1) Erste Nachrichten kleben nicht mehr oben */
.messages {
  padding-top: clamp(28px, 4vh, 54px) !important;
  scroll-padding-top: 132px !important;
}

.message:first-child {
  margin-top: 8px !important;
}

.message {
  scroll-margin-top: 132px !important;
}

/* 2) Tabellen sauber im Chat */
.message-content {
  overflow-x: auto;
}

.message-content table {
  width: 100%;
  min-width: 620px;
  border-collapse: separate;
  border-spacing: 0;
  margin: 14px 0 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
}

.message-content thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(255,255,255,0.085);
  color: rgba(245,247,251,0.96);
  font-weight: 850;
}

.message-content th,
.message-content td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.075);
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
}

.message-content tr:last-child td {
  border-bottom: 0;
}

.message-content tbody tr:hover {
  background: rgba(255,255,255,0.035);
}

/* 3) Codeblöcke schöner + Copy Button wirklich sichtbar */
.code-block {
  width: 100%;
  max-width: 100%;
  margin: 16px 0 20px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: #080c13 !important;
  overflow: hidden !important;
}

.code-header {
  min-height: 48px !important;
  padding: 10px 14px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.025)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.085) !important;
}

.code-language {
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(245,247,251,0.62) !important;
  font-weight: 900 !important;
}

.code-block pre {
  padding: 20px 22px !important;
  background: #080c13 !important;
}

.code-block code {
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* Copy Button im Codeblock: nie leer, nie unsichtbar */
.code-header .copy-code-btn,
.code-header .copy-icon-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  border-radius: 13px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(255,255,255,0.16) !important;
  background: rgba(255,255,255,0.065) !important;
  color: rgba(255,255,255,0.94) !important;

  font-size: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.code-header .copy-code-btn svg,
.code-header .copy-icon-btn svg {
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.code-header .copy-code-btn.is-copied,
.copy-message-btn.is-copied {
  border-color: rgba(46,204,113,0.42) !important;
  background: rgba(46,204,113,0.14) !important;
  color: #d9ffe8 !important;
}

.code-header .copy-code-btn.is-copy-error,
.copy-message-btn.is-copy-error {
  border-color: rgba(255,95,95,0.42) !important;
  background: rgba(255,95,95,0.14) !important;
  color: #ffd0d0 !important;
}

/* 4) Mobile obere Leiste weniger hässlich/klebrig */
@media (max-width: 680px) {
  .page {
    padding: 0 !important;
    min-height: var(--app-vh, 100vh) !important;
  }

  .shell {
    gap: 0 !important;
  }

  .app-sidebar {
    border-radius: 0 0 24px 24px !important;
  }

  .main-panel {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    min-height: var(--app-vh, 100vh) !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;

    padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px !important;
    border-radius: 0 !important;
    background: rgba(11, 11, 16, 0.96) !important;
    border-bottom: 1px solid rgba(255,255,255,0.09) !important;
    box-shadow: 0 12px 34px rgba(0,0,0,0.32) !important;
  }

  .topbar-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .topbar-title {
    font-size: 1.05rem !important;
    line-height: 1.15 !important;
    margin: 0 0 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .topbar-subtitle {
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 58vw !important;
  }

  .topbar-actions {
    width: auto !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    gap: 8px !important;
  }

  .status-row,
  .topbar-actions .badge {
    min-height: 32px !important;
    padding: 7px 11px !important;
    margin: 0 !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  .messages {
    padding: 26px 14px 170px !important;
    gap: 18px !important;
  }

  .bubble {
    max-width: 100% !important;
    border-radius: 22px !important;
  }

  .message-content table {
    min-width: 560px;
    font-size: 0.9rem;
  }

  .message-content th,
  .message-content td {
    padding: 10px 11px;
  }

  .composer {
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  }
}
/* === FINAL COPY CHECKMARK FIX Mai 2026 === */

/* Sichtbares Häkchen in Codeblock + Message-Copy */
.copy-check-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  color: currentColor !important;
}

/* Während Kopiert-Zustand kein altes SVG stören */
.copy-code-btn.is-copied svg,
.copy-message-btn.is-copied svg,
.copy-icon-btn.is-copied svg {
  display: none !important;
}

/* Erfolgszustand stärker sichtbar */
.copy-code-btn.is-copied,
.copy-message-btn.is-copied,
.copy-icon-btn.is-copied {
  color: #d9ffe8 !important;
  background: rgba(46, 204, 113, 0.16) !important;
  border-color: rgba(46, 204, 113, 0.38) !important;
}

/* Fehlerzustand */
.copy-code-btn.is-copy-error,
.copy-message-btn.is-copy-error,
.copy-icon-btn.is-copy-error {
  color: #ffd0d0 !important;
  background: rgba(255, 95, 95, 0.16) !important;
  border-color: rgba(255, 95, 95, 0.38) !important;
}

/* Codeblock-Copy: keine Hover-Beschreibung */
.code-header .copy-code-btn::before,
.code-header .copy-code-btn::after,
.code-header .copy-icon-btn::before,
.code-header .copy-icon-btn::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Codeblock-Copy bleibt rein ikonischer Button */
.code-header .copy-code-btn,
.code-header .copy-icon-btn {
  position: relative !important;
  overflow: hidden !important;
}
/* === FINAL CHAT POLISH PACK Mai 2026 === */

/* Grundsätzlich: Header/Tooltips/Chat dürfen sauber layern */
.shell,
.main-panel,
.topbar,
.composer,
.message,
.bubble,
.message-footer,
.message-footer-actions {
  overflow: visible;
}

/* Messages selbst bleiben scrollbar */
.messages {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-top: clamp(30px, 4vh, 56px) !important;
  padding-bottom: 172px !important;
  scroll-padding-top: 138px !important;
  scroll-padding-bottom: 180px !important;
}

/* Erste Nachrichten kleben nicht mehr direkt unter der Topbar */
.messages > .message:first-child {
  margin-top: 10px !important;
}

.message {
  scroll-margin-top: 138px !important;
  scroll-margin-bottom: 150px !important;
}

/* Bubbles etwas ruhiger und stabiler */
.bubble {
  max-width: min(860px, 90%) !important;
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255,255,255,0.045) !important;
}

.message.assistant .bubble {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.062), rgba(255,255,255,0.038)) !important;
}

.message.user .bubble {
  background:
    linear-gradient(135deg, rgba(124, 92, 255, 0.34), rgba(92, 141, 255, 0.22)) !important;
}

/* Inhalt allgemein besser lesbar */
.message-content {
  overflow-wrap: anywhere;
  word-break: normal;
}

.message-content p {
  margin: 0 0 0.85em;
}

.message-content p:last-child {
  margin-bottom: 0;
}

.message-content ul,
.message-content ol {
  margin-top: 0.5em;
  margin-bottom: 0.9em;
  padding-left: 1.45em;
}

.message-content li {
  margin: 0.25em 0;
}

.message-content hr {
  border: 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  margin: 18px 0;
}

/* Inline-Code besser */
.message code:not(pre code) {
  padding: 0.16em 0.42em !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.085) !important;
  border: 1px solid rgba(255,255,255,0.075) !important;
  color: rgba(245,247,251,0.94) !important;
  font-size: 0.92em !important;
}

/* Tabellen: Wrapper aus app.js */
.chat-table-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  margin: 16px 0 20px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.105);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025));
  box-shadow:
    0 14px 34px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.045);
}

.chat-table-wrap table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  margin: 0;
}

.chat-table-wrap th,
.chat-table-wrap td {
  padding: 13px 15px;
  text-align: left;
  vertical-align: top;
  line-height: 1.45;
  border-bottom: 1px solid rgba(255,255,255,0.075);
}

.chat-table-wrap th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(255,255,255,0.075);
  color: rgba(245,247,251,0.98);
  font-weight: 850;
  letter-spacing: -0.01em;
}

.chat-table-wrap td {
  color: rgba(245,247,251,0.88);
}

.chat-table-wrap tr:last-child td {
  border-bottom: 0;
}

.chat-table-wrap tbody tr:hover {
  background: rgba(255,255,255,0.035);
}

/* Fallback, falls alte Tabellen ohne Wrapper reinkommen */
.message-content > table {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 640px;
  overflow-x: auto;
  margin: 16px 0 20px;
  border-collapse: collapse;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.105);
}

.message-content > table th,
.message-content > table td {
  padding: 13px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.075);
}

/* Codeblöcke final glatt */
.code-block {
  width: 100%;
  max-width: 100%;
  margin: 16px 0 20px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.105) !important;
  background: #080c13 !important;
  overflow: hidden !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,0.26),
    inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

.code-header {
  min-height: 48px !important;
  padding: 10px 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.062), rgba(255,255,255,0.024)) !important;
  border-bottom: 1px solid rgba(255,255,255,0.085) !important;
}

.code-language {
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: rgba(245,247,251,0.62) !important;
  font-weight: 900 !important;
}

.code-block pre {
  margin: 0 !important;
  padding: 20px 22px !important;
  overflow-x: auto !important;
  white-space: pre !important;
  background: #080c13 !important;
}

.code-block code {
  display: block !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  color: rgba(245,247,251,0.96) !important;
}

/* Codeblock-Copy: sichtbar, aber ohne Tooltip */
.code-header .copy-code-btn,
.code-header .copy-icon-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  background: rgba(255,255,255,0.06) !important;
  color: rgba(255,255,255,0.92) !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-size: 0 !important;
}

.code-header .copy-code-btn:hover,
.code-header .copy-icon-btn:hover {
  background: rgba(255,255,255,0.105) !important;
  border-color: rgba(255,255,255,0.24) !important;
}

.code-header .copy-code-btn svg,
.code-header .copy-icon-btn svg {
  display: block !important;
  width: 17px !important;
  height: 17px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Codeblock-Button: wirklich keine Beschreibung */
.code-header .copy-code-btn[data-tooltip]::before,
.code-header .copy-code-btn[data-tooltip]::after,
.code-header .copy-icon-btn[data-tooltip]::before,
.code-header .copy-icon-btn[data-tooltip]::after,
.code-header .copy-code-btn::before,
.code-header .copy-code-btn::after,
.code-header .copy-icon-btn::before,
.code-header .copy-icon-btn::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Häkchen beim Kopieren */
.copy-check-mark {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  color: currentColor !important;
}

.copy-code-btn.is-copied svg,
.copy-message-btn.is-copied svg,
.copy-icon-btn.is-copied svg {
  display: none !important;
}

.copy-code-btn.is-copied,
.copy-message-btn.is-copied,
.copy-icon-btn.is-copied {
  color: #d9ffe8 !important;
  background: rgba(46, 204, 113, 0.16) !important;
  border-color: rgba(46, 204, 113, 0.38) !important;
}

.copy-code-btn.is-copy-error,
.copy-message-btn.is-copy-error,
.copy-icon-btn.is-copy-error {
  color: #ffd0d0 !important;
  background: rgba(255, 95, 95, 0.16) !important;
  border-color: rgba(255, 95, 95, 0.38) !important;
}

/* Footer-Actions unten an Nachrichten sauber halten */
.message-footer,
.message-meta {
  color: rgba(158,164,179,0.86) !important;
}

.message-footer-actions,
.message-footer-actions-floating {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.message-footer-actions .copy-message-btn,
.message-footer-actions .retry-message-btn,
.message-footer-actions .copy-icon-btn,
.message-footer-actions-floating .copy-message-btn,
.message-footer-actions-floating .retry-message-btn,
.message-footer-actions-floating .copy-icon-btn {
  min-width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
}

/* Mobile Topbar: kompakter, nicht halb über Content */
@media (max-width: 680px) {
  html,
  body {
    min-height: var(--app-vh, 100vh) !important;
    overflow-x: hidden !important;
  }

  .page {
    padding: 0 !important;
    min-height: var(--app-vh, 100vh) !important;
  }

  .shell {
    width: 100% !important;
    max-width: none !important;
    gap: 0 !important;
  }

  .main-panel {
    width: 100% !important;
    min-height: var(--app-vh, 100vh) !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    border-radius: 0 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px !important;
    background:
      linear-gradient(180deg, rgba(16,16,23,0.985), rgba(12,12,18,0.955)) !important;
    border-bottom: 1px solid rgba(255,255,255,0.095) !important;
    box-shadow: 0 14px 34px rgba(0,0,0,0.34) !important;
    backdrop-filter: blur(20px) !important;
  }

  .topbar-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .topbar-title {
    margin: 0 0 3px !important;
    font-size: 1.04rem !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .topbar-subtitle {
    margin: 0 !important;
    max-width: 56vw !important;
    font-size: 0.76rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .topbar-actions {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .topbar-actions .btn,
  .topbar-actions .badge,
  .status-row {
    width: auto !important;
    min-height: 32px !important;
    padding: 7px 11px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    white-space: nowrap !important;
  }

  .status-dot {
    width: 8px !important;
    height: 8px !important;
  }

  .messages {
    padding: 28px 14px 178px !important;
    gap: 18px !important;
    scroll-padding-top: 96px !important;
  }

  .message {
    scroll-margin-top: 96px !important;
  }

  .bubble {
    max-width: 100% !important;
    padding: 15px 16px !important;
    border-radius: 22px !important;
  }

  .message-content {
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
  }

  .chat-table-wrap {
    margin-left: -2px;
    margin-right: -2px;
    border-radius: 16px;
  }

  .chat-table-wrap table {
    min-width: 560px;
    font-size: 0.9rem;
  }

  .chat-table-wrap th,
  .chat-table-wrap td {
    padding: 10px 11px;
  }

  .code-block {
    border-radius: 16px !important;
  }

  .code-block pre {
    padding: 17px 16px !important;
  }

  .code-block code {
    font-size: 13px !important;
    line-height: 1.62 !important;
  }

  .composer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 70 !important;
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
    background:
      linear-gradient(180deg, rgba(10,10,15,0.70), rgba(10,10,15,0.98)) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    backdrop-filter: blur(18px) !important;
  }

  .composer-form,
  .composer-form-modern {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: end !important;
    gap: 8px !important;
  }

  .composer textarea {
    min-height: 52px !important;
    max-height: 170px !important;
    padding: 14px 12px !important;
    border-radius: 18px !important;
    font-size: 16px !important;
  }

  .composer-plus-btn,
  #sendBtn {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    border-radius: 17px !important;
  }

  .mode-bar {
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }

  .mode-bar::-webkit-scrollbar {
    display: none !important;
  }

  .mode-toggle-btn {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 0 10px !important;
    font-size: 0.82rem !important;
  }
}

/* Sehr kleine iPhones */
@media (max-width: 390px) {
  .topbar-subtitle {
    max-width: 48vw !important;
  }

  .topbar-actions .badge,
  .status-row {
    padding-left: 9px !important;
    padding-right: 9px !important;
    font-size: 0.74rem !important;
  }

  .messages {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .bubble {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}
/* =========================================================
   FINAL MOBILE KEYBOARD FIX — Safari/iPhone Mai 2026
   ========================================================= */

/* Alte Keyboard-Regeln neutralisieren: Topbar darf beim Tippen nicht kollabieren */
@media (max-width: 760px) {
  body[data-bot].keyboard-open .topbar,
  body[data-bot] .topbar.is-collapsed-by-scroll,
  body[data-bot].keyboard-open .topbar.is-collapsed-by-scroll {
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom-color: rgba(255,255,255,0.09) !important;
  }
}

/* Mobile App wirklich als feste Chat-App behandeln */
@media (max-width: 680px) {
  html,
  body {
    width: 100% !important;
    height: var(--app-vh, 100dvh) !important;
    min-height: var(--app-vh, 100dvh) !important;
    max-height: var(--app-vh, 100dvh) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
    background: #07070a !important;
  }

  body[data-bot] #appScreen,
  body[data-bot] #appScreen > .page:not(.landing-page-v3),
  body[data-bot] .shell,
  body[data-bot] .main-panel {
    width: 100% !important;
    height: var(--app-vh, 100dvh) !important;
    min-height: var(--app-vh, 100dvh) !important;
    max-height: var(--app-vh, 100dvh) !important;
    overflow: hidden !important;
  }

  body[data-bot] #appScreen > .page:not(.landing-page-v3) {
    padding: 0 !important;
    position: fixed !important;
    inset: 0 !important;
  }

  body[data-bot] .shell {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  body[data-bot] .main-panel {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 0 !important;
    border: 0 !important;
    background: rgba(10,10,15,0.98) !important;
  }

  /* Sidebar/Header oben auf Mobile nicht in den Chat schieben */
  body[data-bot] .app-sidebar {
    flex: 0 0 auto !important;
    max-height: 64px !important;
    min-height: 64px !important;
    height: 64px !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  /* Die Bot-Topbar im Chat auf Mobile komplett aus dem Weg räumen */
  body[data-bot] .topbar {
    display: none !important;
  }

  /* Mode-Chips normal sichtbar, aber beim Tippen weg */
  body[data-bot] .mode-bar {
    flex: 0 0 auto !important;
    max-height: 44px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 7px 12px 6px !important;
    margin: 0 !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(10,10,15,0.94) !important;
    scrollbar-width: none !important;
  }

  body[data-bot] .mode-bar::-webkit-scrollbar {
    display: none !important;
  }

  body[data-bot].keyboard-open .mode-bar {
    display: none !important;
  }

  /* Nachrichtenbereich ist der einzige Scrollbereich */
  body[data-bot] .messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 14px 14px !important;
    scroll-padding-top: 18px !important;
    scroll-padding-bottom: 110px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-bot].keyboard-open .messages {
    padding-top: 12px !important;
    padding-bottom: 10px !important;
  }

  /* Composer bleibt im Flex-Layout unten, nicht sticky/fixed */
  body[data-bot] .composer {
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 20 !important;
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    background: rgba(10,10,15,0.98) !important;
    backdrop-filter: blur(18px) !important;
  }

  body[data-bot].keyboard-open .composer {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  body[data-bot] #chatForm.composer-form-modern,
  body[data-bot] .composer-form-modern {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 56px !important;
    align-items: end !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body[data-bot] .composer-plus-btn,
  body[data-bot] #sendBtn {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 17px !important;
  }

  body[data-bot] #sendBtn {
    grid-column: auto !important;
  }

  body[data-bot] .composer textarea,
  body[data-bot] .composer-form-modern textarea {
    grid-column: auto !important;
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    max-height: 132px !important;
    padding: 13px 12px !important;
    border-radius: 17px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  body[data-bot] .composer textarea.is-scrollable {
    overflow-y: auto !important;
  }

  /* Während Keyboard offen: keine Preview-/Upload-Leisten ins Layout drücken */
  body[data-bot].keyboard-open .upload-preview-strip:empty,
  body[data-bot].keyboard-open .image-preview-list:empty,
  body[data-bot].keyboard-open .document-preview-list:empty {
    display: none !important;
  }
}

/* Noch kleinere iPhones */
@media (max-width: 390px) {
  body[data-bot] #chatForm.composer-form-modern,
  body[data-bot] .composer-form-modern {
    grid-template-columns: 48px minmax(0, 1fr) 52px !important;
    gap: 7px !important;
  }

  body[data-bot] .composer-plus-btn,
  body[data-bot] #sendBtn {
    width: 48px !important;
    min-width: 48px !important;
    height: 50px !important;
    min-height: 50px !important;
  }

  body[data-bot] .composer textarea,
  body[data-bot] .composer-form-modern textarea {
    min-height: 50px !important;
    height: 50px !important;
  }
}
/* =========================================================
   EMERGENCY MOBILE ROLLBACK — Sidebar & Chat Restore
   ========================================================= */

@media (max-width: 980px) {
  html,
  body,
  body[data-bot],
  body[data-bot] #appScreen,
  body[data-bot] #appScreen > .page:not(.landing-page-v3) {
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body[data-bot] #appScreen > .page:not(.landing-page-v3) {
    position: relative !important;
    inset: auto !important;
    padding: 10px !important;
  }

  body[data-bot] .shell,
  body[data-bot] .shell.sidebar-is-collapsed {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: 100dvh !important;
    max-height: none !important;
    overflow: visible !important;
    gap: 10px !important;
  }

  body[data-bot] .main-panel {
    height: auto !important;
    min-height: calc(100dvh - 94px) !important;
    max-height: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
  }

  body[data-bot] .app-sidebar {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
    border-radius: 24px !important;
  }

  body[data-bot] .app-sidebar.is-collapsed {
    height: auto !important;
    min-height: 64px !important;
    max-height: 72px !important;
    overflow: hidden !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) {
    max-height: min(74vh, 680px) !important;
    overflow: hidden !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .conversation-list {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-section,
  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-footer {
    display: flex !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-title-wrap {
    display: block !important;
  }
}

@media (max-width: 680px) {
  body[data-bot] .topbar {
    display: block !important;
    position: relative !important;
    top: auto !important;
    opacity: 1 !important;
    transform: none !important;
    max-height: none !important;
    pointer-events: auto !important;
    border-radius: 24px 24px 0 0 !important;
    padding: 12px 14px 10px !important;
  }

  body[data-bot] .topbar-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body[data-bot] .topbar-title {
    font-size: 1.02rem !important;
    margin: 0 0 2px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-bot] .topbar-subtitle {
    font-size: 0.74rem !important;
    line-height: 1.2 !important;
    max-width: 52vw !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-bot] .topbar-actions {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 7px !important;
  }

  body[data-bot] .status-row,
  body[data-bot] .topbar-actions .badge,
  body[data-bot] .topbar-actions .btn {
    width: auto !important;
    min-height: 30px !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    font-size: 0.76rem !important;
    white-space: nowrap !important;
  }

  body[data-bot] .mode-bar {
    display: flex !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 14px 6px !important;
    scrollbar-width: none !important;
  }

  body[data-bot] .mode-bar::-webkit-scrollbar {
    display: none !important;
  }

  body[data-bot] .messages {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 48vh !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 14px 150px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-bot] .composer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 70 !important;
    flex: 0 0 auto !important;
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    background: rgba(10,10,15,0.96) !important;
    backdrop-filter: blur(18px) !important;
  }

  body[data-bot] #chatForm.composer-form-modern,
  body[data-bot] .composer-form-modern {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 56px !important;
    align-items: end !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body[data-bot] .composer-plus-btn,
  body[data-bot] #sendBtn {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 17px !important;
  }

  body[data-bot] .composer textarea,
  body[data-bot] .composer-form-modern textarea {
    width: 100% !important;
    min-height: 52px !important;
    height: 52px !important;
    max-height: 150px !important;
    padding: 13px 12px !important;
    border-radius: 17px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  /* Beim Tippen NICHT mehr die ganze App hart fixieren */
  body[data-bot].keyboard-open .topbar {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    transform: none !important;
    padding: 10px 14px 8px !important;
  }

  body[data-bot].keyboard-open .mode-bar {
    display: none !important;
  }

  body[data-bot].keyboard-open .messages {
    min-height: 34vh !important;
    padding-bottom: 98px !important;
  }

  body[data-bot].keyboard-open .composer {
    position: relative !important;
    bottom: auto !important;
    padding-bottom: 8px !important;
  }
}
/* =========================================================
   MOBILE DRAWER + STICKY CHAT FINAL — Mai 2026
   Ziel:
   - Sidebar auf Mobile als Overlay, nicht als Block im Layout
   - Chat bleibt immer sichtbar
   - Composer klebt unten wie Desktop
   ========================================================= */

@media (max-width: 980px) {
  body[data-bot] {
    overflow-x: hidden !important;
  }

  body[data-bot] #appScreen > .page:not(.landing-page-v3) {
    padding: 10px !important;
  }

  body[data-bot] .shell,
  body[data-bot] .shell.sidebar-is-collapsed {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: auto !important;
    gap: 0 !important;
  }

  /* Sidebar wird Mobile zum Drawer, nicht mehr Teil des Chat-Flows */
  body[data-bot] .app-sidebar {
    position: fixed !important;
    left: 10px !important;
    right: 10px !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    z-index: 500 !important;

    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    height: auto !important;

    border-radius: 26px !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    background:
      radial-gradient(circle at top left, rgba(124,92,255,0.18), transparent 36%),
      linear-gradient(180deg, rgba(24,22,34,0.985), rgba(13,13,19,0.975)) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,0.58) !important;
    backdrop-filter: blur(24px) !important;

    transition:
      transform 0.22s ease,
      opacity 0.18s ease,
      max-height 0.22s ease,
      padding 0.18s ease !important;
  }

  /* Eingeklappt: kleine schwebende Workspace-Pille */
  body[data-bot] .app-sidebar.is-collapsed {
    display: block !important;
    max-height: 70px !important;
    overflow: hidden !important;
    padding: 12px 14px !important;
  }

  body[data-bot] .app-sidebar.is-collapsed .app-sidebar-header {
    padding: 0 !important;
    border-bottom: 0 !important;
    align-items: center !important;
  }

  body[data-bot] .app-sidebar.is-collapsed .app-sidebar-title-wrap {
    display: block !important;
  }

  body[data-bot] .app-sidebar.is-collapsed .app-sidebar-kicker {
    display: none !important;
  }

  body[data-bot] .app-sidebar.is-collapsed .app-sidebar-title {
    display: block !important;
    font-size: 1rem !important;
    line-height: 1.1 !important;
    margin: 0 !important;
  }

  body[data-bot] .app-sidebar.is-collapsed .app-sidebar-section,
  body[data-bot] .app-sidebar.is-collapsed .app-sidebar-footer {
    display: none !important;
  }

  body[data-bot] .app-sidebar.is-collapsed .app-sidebar-header-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  body[data-bot] .app-sidebar-collapse,
  body[data-bot] .app-sidebar-home {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 999px !important;
  }

  /* Offen: Overlay mit eigener Scrollfläche */
  body[data-bot] .app-sidebar:not(.is-collapsed) {
    max-height: min(calc(100dvh - 120px), 720px) !important;
    overflow: hidden !important;
    padding: 18px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-section,
  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-footer {
    display: flex !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-section {
    flex-direction: column !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-section-grow {
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .conversation-list {
    max-height: min(32vh, 260px) !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-bot] .bot-switch-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body[data-bot] .bot-switch-item,
  body[data-bot] .conversation-item {
    border-radius: 18px !important;
    padding: 13px 14px !important;
  }

  body[data-bot] .conversation-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 56px !important;
    gap: 8px !important;
  }

  body[data-bot] .conversation-trash-btn {
    width: 56px !important;
    min-width: 56px !important;
    height: auto !important;
    border-radius: 18px !important;
  }

  body[data-bot] .sidebar-logout-btn {
    min-height: 52px !important;
    border-radius: 18px !important;
  }

  /* Chat nimmt den Screen ein, Sidebar schiebt ihn nicht mehr runter */
  body[data-bot] .main-panel {
    position: relative !important;
    z-index: 1 !important;

    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;
    min-height: calc(100dvh - 20px) !important;
    height: calc(100dvh - 20px) !important;
    max-height: calc(100dvh - 20px) !important;

    margin: 0 !important;
    padding-top: 76px !important;

    overflow: hidden !important;
    border-radius: 26px !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(124,92,255,0.10), transparent 34%),
      rgba(10,10,15,0.98) !important;
  }

  /* Topbar bleibt im Chat klein, aber nicht riesig */
  body[data-bot] .topbar {
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    display: block !important;
    border-radius: 0 !important;
    padding: 10px 14px 9px !important;
    background: rgba(10,10,15,0.78) !important;
    border-bottom: 1px solid rgba(255,255,255,0.075) !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    max-height: none !important;
  }

  body[data-bot] .topbar-main {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body[data-bot] .topbar-title {
    margin: 0 0 2px !important;
    font-size: 1rem !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-bot] .topbar-subtitle {
    margin: 0 !important;
    max-width: 58vw !important;
    font-size: 0.73rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body[data-bot] .topbar-actions {
    width: auto !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 7px !important;
  }

  body[data-bot] .status-row,
  body[data-bot] .topbar-actions .badge,
  body[data-bot] .topbar-actions .btn {
    width: auto !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 6px 10px !important;
    font-size: 0.75rem !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  body[data-bot] .mode-bar {
    flex: 0 0 auto !important;
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px 14px 6px !important;
    scrollbar-width: none !important;
    background: rgba(10,10,15,0.72) !important;
    border-bottom: 1px solid rgba(255,255,255,0.055) !important;
  }

  body[data-bot] .mode-bar::-webkit-scrollbar {
    display: none !important;
  }

  body[data-bot] .mode-toggle-btn {
    flex: 0 0 auto !important;
    min-height: 32px !important;
    padding: 0 11px !important;
    border-radius: 999px !important;
    font-size: 0.8rem !important;
  }

  /* Einziger Scrollbereich im Chat */
  body[data-bot] .messages {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 18px 14px 18px !important;
    scroll-padding-top: 18px !important;
    scroll-padding-bottom: 120px !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Composer klebt unten im Panel wie Desktop */
  body[data-bot] .composer {
    flex: 0 0 auto !important;
    position: relative !important;
    bottom: auto !important;
    z-index: 30 !important;
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    background:
      linear-gradient(180deg, rgba(10,10,15,0.82), rgba(10,10,15,0.98)) !important;
    backdrop-filter: blur(18px) !important;
  }

  body[data-bot] #chatForm.composer-form-modern,
  body[data-bot] .composer-form-modern {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) 56px !important;
    align-items: end !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body[data-bot] .composer-plus-btn,
  body[data-bot] #sendBtn {
    width: 52px !important;
    min-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 17px !important;
  }

  body[data-bot] .composer textarea,
  body[data-bot] .composer-form-modern textarea {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    max-height: 142px !important;
    padding: 13px 12px !important;
    border-radius: 17px !important;
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  body[data-bot] .upload-preview-strip {
    flex: 0 0 auto !important;
    padding-bottom: 8px !important;
  }

  /* Wenn Drawer offen ist: Chat leicht abdunkeln, aber bleibt an Ort und Stelle */
  body[data-bot].mobile-sidebar-open .main-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 80;
    background: rgba(0,0,0,0.34);
    pointer-events: none;
  }

  body[data-bot].mobile-sidebar-open .composer,
  body[data-bot].mobile-sidebar-open .messages,
  body[data-bot].mobile-sidebar-open .topbar,
  body[data-bot].mobile-sidebar-open .mode-bar {
    filter: saturate(0.78) brightness(0.72);
  }

  /* Keyboard: nicht wieder Layout zerstören */
  body[data-bot].keyboard-open .app-sidebar.is-collapsed {
    transform: translateY(-86px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body[data-bot].keyboard-open .main-panel {
    padding-top: 0 !important;
    height: var(--app-vh, calc(100dvh - 20px)) !important;
    max-height: var(--app-vh, calc(100dvh - 20px)) !important;
  }

  body[data-bot].keyboard-open .topbar {
    display: none !important;
  }

  body[data-bot].keyboard-open .mode-bar {
    display: none !important;
  }

  body[data-bot].keyboard-open .messages {
    padding-top: 12px !important;
    padding-bottom: 10px !important;
  }

  body[data-bot].keyboard-open .composer {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
}

@media (max-width: 390px) {
  body[data-bot] #appScreen > .page:not(.landing-page-v3) {
    padding: 8px !important;
  }

  body[data-bot] .app-sidebar {
    left: 8px !important;
    right: 8px !important;
  }

  body[data-bot] .main-panel {
    min-height: calc(100dvh - 16px) !important;
    height: calc(100dvh - 16px) !important;
    max-height: calc(100dvh - 16px) !important;
    padding-top: 72px !important;
  }

  body[data-bot] #chatForm.composer-form-modern,
  body[data-bot] .composer-form-modern {
    grid-template-columns: 48px minmax(0, 1fr) 52px !important;
    gap: 7px !important;
  }

  body[data-bot] .composer-plus-btn,
  body[data-bot] #sendBtn {
    width: 48px !important;
    min-width: 48px !important;
    height: 50px !important;
    min-height: 50px !important;
  }

  body[data-bot] .composer textarea,
  body[data-bot] .composer-form-modern textarea {
    min-height: 50px !important;
    height: 50px !important;
  }
}
/* =========================================================
   MOBILE SIDEBAR CHATLIST FIX — Mai 2026
   Mehr Platz für letzte Chats im mobilen Drawer
   ========================================================= */

@media (max-width: 980px) {
  body[data-bot] .app-sidebar:not(.is-collapsed) {
    display: flex !important;
    flex-direction: column !important;
    max-height: min(calc(100dvh - 112px), 760px) !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-header {
    flex: 0 0 auto !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-section:not(.app-sidebar-section-grow) {
    flex: 0 0 auto !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-section-grow {
    flex: 1 1 auto !important;
    min-height: 210px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    padding-top: 16px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-row {
    flex: 0 0 auto !important;
    margin-bottom: 10px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .conversation-busy-hint {
    flex: 0 0 auto !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .conversation-list {
    flex: 1 1 auto !important;
    min-height: 190px !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px !important;
    padding-bottom: 6px !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-footer {
    flex: 0 0 auto !important;
    margin-top: 14px !important;
  }
}

/* Auf kleinen iPhones Sidebar etwas kompakter machen, damit Chatliste mehr Raum hat */
@media (max-width: 430px) {
  body[data-bot] .app-sidebar:not(.is-collapsed) {
    padding: 14px !important;
    max-height: min(calc(100dvh - 98px), 720px) !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-header {
    padding-bottom: 12px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-section {
    padding-top: 13px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .bot-switch-list {
    gap: 8px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .bot-switch-item {
    padding: 11px 13px !important;
    border-radius: 17px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-section-grow {
    min-height: 230px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .conversation-list {
    min-height: 220px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .conversation-item {
    padding: 11px 13px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .sidebar-logout-btn {
    min-height: 48px !important;
  }
}
/* =========================================================
   MOBILE SIDEBAR FINAL STRUCTURE — Bots einklappbar,
   Chats scrollen, Logout unten sichtbar
   ========================================================= */

@media (max-width: 980px) {
  /* Mobile-Sidebar als echte Overlay-Karte */
  body[data-bot] .app-sidebar:not(.is-collapsed) {
    display: grid !important;
    grid-template-rows: auto auto minmax(0, 1fr) auto !important;

    left: 10px !important;
    right: 10px !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;

    width: auto !important;
    height: auto !important;
    max-height: min(calc(100dvh - 112px), 720px) !important;
    min-height: 0 !important;

    overflow: hidden !important;
    padding: 16px !important;
    border-radius: 26px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-header {
    min-height: 0 !important;
    padding-bottom: 13px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  }

  /* Bot-Bereich wird kompakter Dropdown */
  body[data-bot] .mobile-bot-section {
    min-height: 0 !important;
    padding-top: 13px !important;
    overflow: visible !important;
  }

  body[data-bot] .mobile-bot-section > .app-sidebar-label {
    display: none !important;
  }

  body[data-bot] .mobile-bot-toggle {
    width: 100% !important;
    min-height: 54px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;

    border: 1px solid rgba(124, 92, 255, 0.26) !important;
    border-radius: 18px !important;
    padding: 10px 13px !important;

    color: var(--text) !important;
    background:
      linear-gradient(135deg, rgba(124,92,255,0.18), rgba(255,255,255,0.045)) !important;

    cursor: pointer !important;
    text-align: left !important;
  }

  body[data-bot] .mobile-bot-toggle small {
    display: block !important;
    margin-bottom: 2px !important;
    color: var(--muted) !important;
    font-size: 0.68rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
  }

  body[data-bot] .mobile-bot-toggle strong {
    display: block !important;
    font-size: 1rem !important;
    line-height: 1.1 !important;
  }

  body[data-bot] .mobile-bot-toggle-arrow {
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;

    font-size: 1.2rem !important;
    transition: transform 0.18s ease !important;
  }

  body[data-bot] .mobile-bot-section.is-open .mobile-bot-toggle-arrow {
    transform: rotate(180deg) !important;
  }

  /* Botliste standardmäßig zu */
  body[data-bot] .mobile-bot-section .bot-switch-list {
    display: none !important;
    margin-top: 9px !important;
    gap: 8px !important;
  }

  body[data-bot] .mobile-bot-section.is-open .bot-switch-list {
    display: flex !important;
  }

  body[data-bot] .mobile-bot-section .bot-switch-item {
    min-height: 52px !important;
    padding: 10px 13px !important;
    border-radius: 16px !important;
  }

  body[data-bot] .mobile-bot-section .bot-switch-name {
    font-size: 0.96rem !important;
  }

  body[data-bot] .mobile-bot-section .bot-switch-item small {
    font-size: 0.74rem !important;
  }

  /* Chatbereich bekommt den freien Hauptplatz */
  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-section-grow {
    min-height: 0 !important;
    height: auto !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
    padding-top: 14px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-row {
    flex: 0 0 auto !important;
    margin-bottom: 9px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .conversation-list {
    flex: 1 1 auto !important;
    min-height: 180px !important;
    max-height: none !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    padding-right: 4px !important;
    padding-bottom: 10px !important;

    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    overscroll-behavior: contain !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .conversation-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 52px !important;
    gap: 8px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .conversation-item {
    min-height: 58px !important;
    padding: 11px 13px !important;
    border-radius: 17px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .conversation-trash-btn {
    width: 52px !important;
    min-width: 52px !important;
    border-radius: 17px !important;
  }

  /* Footer bleibt immer sichtbar unten */
  body[data-bot] .app-sidebar:not(.is-collapsed) .app-sidebar-footer {
    display: flex !important;
    flex: 0 0 auto !important;
    margin-top: 12px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(255,255,255,0.075) !important;
    background: transparent !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .sidebar-logout-btn {
    display: flex !important;
    width: 100% !important;
    min-height: 50px !important;

    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;

    border-radius: 18px !important;
    font-weight: 800 !important;
  }

  /* Der alte große Chat-löschen Button bleibt weiterhin weg */
  body[data-bot] #deleteConversationBtn {
    display: none !important;
  }

  /* Eingeklappte Sidebar bleibt kleine Pille */
  body[data-bot] .app-sidebar.is-collapsed {
    display: block !important;
    max-height: 70px !important;
    overflow: hidden !important;
    padding: 12px 14px !important;
  }

  body[data-bot] .app-sidebar.is-collapsed .mobile-bot-section,
  body[data-bot] .app-sidebar.is-collapsed .app-sidebar-section-grow,
  body[data-bot] .app-sidebar.is-collapsed .app-sidebar-footer {
    display: none !important;
  }
}

/* Kleine iPhones: Bot-Dropdown etwas schlanker, damit Chats mehr Platz haben */
@media (max-width: 430px) {
  body[data-bot] .app-sidebar:not(.is-collapsed) {
    padding: 14px !important;
    max-height: min(calc(100dvh - 98px), 700px) !important;
  }

  body[data-bot] .mobile-bot-toggle {
    min-height: 50px !important;
  }

  body[data-bot] .mobile-bot-section.is-open .bot-switch-list {
    max-height: 190px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .conversation-list {
    min-height: 220px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .conversation-item {
    min-height: 56px !important;
  }

  body[data-bot] .app-sidebar:not(.is-collapsed) .sidebar-logout-btn {
    min-height: 48px !important;
  }
}
/* Mobile-Bot-Dropdown auf Desktop komplett ausblenden */
@media (min-width: 981px) {
  body[data-bot] .mobile-bot-toggle {
    display: none !important;
  }

  body[data-bot] .mobile-bot-section .bot-switch-list {
    display: flex !important;
  }
}

/* Auf Mobile bleibt der Button sichtbar */
@media (max-width: 980px) {
  body[data-bot] .mobile-bot-toggle {
    display: flex !important;
  }
}
/* =========================================================
   PREMIUM AGENT UI FINAL 2026 V2
   moderne System-Schrift, Landing scrollbar, Bot-Hover-Farben
   ========================================================= */

:root {
  --font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --bg-0: #06070a;
  --bg-1: #0b0d12;
  --bg-2: #10131b;

  --surface-1: rgba(16, 18, 26, 0.78);
  --surface-2: rgba(22, 25, 35, 0.9);
  --surface-3: rgba(255, 255, 255, 0.055);

  --line-soft: rgba(255, 255, 255, 0.08);
  --line-mid: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.16);

  --text-strong: #f7f8fc;
  --text-main: #eef2f7;
  --text-muted: rgba(239, 244, 251, 0.68);
  --text-faint: rgba(239, 244, 251, 0.44);

  --elev-1: 0 20px 60px rgba(0, 0, 0, 0.28);
  --elev-2: 0 24px 80px rgba(0, 0, 0, 0.36);
  --elev-3: 0 30px 100px rgba(0, 0, 0, 0.42);

  --accent: #7c5cff;
  --accent-2: #5c8dff;
  --accent-rgb: 124, 92, 255;
}

/* Chat-Seiten: Bot-Farbe über body[data-bot] */
body[data-bot="albert"] {
  --accent: #7c5cff;
  --accent-2: #5c8dff;
  --accent-rgb: 124, 92, 255;
}

body[data-bot="stephen"] {
  --accent: #38bdf8;
  --accent-2: #2563eb;
  --accent-rgb: 56, 189, 248;
}

body[data-bot="jeffrey"] {
  --accent: #2ecc71;
  --accent-2: #64748b;
  --accent-rgb: 46, 204, 113;
}

/* ---------- Scroll-Fix Landing / Body ---------- */

html,
body {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.11), transparent 24%),
    radial-gradient(circle at top right, rgba(92, 141, 255, 0.09), transparent 26%),
    linear-gradient(180deg, var(--bg-0) 0%, var(--bg-1) 60%, #0e1118 100%);
  color: var(--text-main);
}

#appScreen,
.page,
.landing-page-v3,
.landing-shell-v3 {
  height: auto !important;
  max-height: none !important;
}

#appScreen {
  min-height: 100vh;
}

.landing-page-v3 {
  min-height: 100vh;
  overflow: visible !important;
}

.landing-shell-v3 {
  overflow: visible !important;
}

/* ---------- Grundlook / Typografie ---------- */

body,
input,
textarea,
button,
select {
  font-family: var(--font-ui) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.brand-title,
.landing-kicker-v3,
.landing-section-kicker-v3,
.app-sidebar-kicker,
.app-sidebar-title,
.bot-select-name-v3 {
  font-family: var(--font-ui) !important;
}

.brand-title,
.app-sidebar-title,
.bot-select-name-v3 {
  letter-spacing: -0.035em;
}

.landing-kicker-v3,
.landing-section-kicker-v3,
.app-sidebar-kicker {
  letter-spacing: 0.095em;
  text-transform: uppercase;
  font-weight: 800;
}

.topbar-title,
.landing-hero-copy-v3 h1,
.landing-bots-head-v3 h2,
.landing-usage-head-v3 h2 {
  letter-spacing: -0.055em;
}

::selection {
  background: rgba(var(--accent-rgb), 0.28);
  color: #fff;
}

/* ---------- Scrollbars ---------- */

* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25);
  background-clip: padding-box;
}

/* ---------- Shell / Panels ---------- */

.page {
  padding: 20px;
}

.bot-hero,
.main-panel,
.app-sidebar,
.landing-hero-card-v3,
.landing-bots-card-v3,
.landing-usage-card-v3 {
  border: 1px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)),
    rgba(12, 14, 20, 0.76);
  backdrop-filter: blur(24px);
  box-shadow: var(--elev-2);
}

.bot-hero,
.main-panel,
.app-sidebar,
.landing-hero-card-v3,
.landing-bots-card-v3,
.landing-usage-card-v3 {
  position: relative;
}

.main-panel,
.app-sidebar,
.landing-hero-card-v3,
.landing-bots-card-v3,
.landing-usage-card-v3 {
  overflow: hidden;
}

.landing-hero-card-v3,
.landing-bots-card-v3,
.landing-usage-card-v3 {
  overflow: visible;
}

.bot-hero::before,
.main-panel::before,
.app-sidebar::before,
.landing-hero-card-v3::before,
.landing-bots-card-v3::before,
.landing-usage-card-v3::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.34), transparent);
  pointer-events: none;
}

.shell {
  gap: 18px;
}

/* ---------- Hero / Header ---------- */

.brand-row {
  margin-bottom: 14px;
}

.brand-title {
  font-size: 1.45rem;
  color: var(--text-strong);
}

.bot-hero-text,
.topbar-subtitle,
.status-row,
.sidebar-label,
.label {
  color: var(--text-muted);
}

.badge {
  border: 1px solid var(--line-mid);
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.badge.is-online {
  background: rgba(46, 204, 113, 0.12);
  color: #dffcea;
}

.badge.is-offline {
  background: rgba(255, 95, 95, 0.14);
  color: #ffdede;
}

.topbar {
  background: rgba(10, 12, 18, 0.9);
  border-bottom: 1px solid var(--line-soft);
  padding: 16px 22px 14px;
}

.topbar-title {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  margin-bottom: 4px;
  color: var(--text-strong);
}

.topbar-actions .btn,
#logoutButton.btn,
#clearBtn.btn {
  border-radius: 14px;
  border: 1px solid var(--line-mid);
  background: rgba(255,255,255,0.05);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.topbar-actions .btn:hover,
#logoutButton.btn:hover,
#clearBtn.btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: var(--line-strong);
}

.status-row {
  margin-top: 12px;
  gap: 8px;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.18);
  background: rgba(var(--accent-rgb), 0.08);
  color: #e8edff;
}

.status-dot {
  box-shadow: 0 0 0 6px rgba(46, 204, 113, 0.08);
}

.status-dot.offline {
  box-shadow: 0 0 0 6px rgba(255, 95, 95, 0.08);
}

/* ---------- Messages / Assistant Cards ---------- */

.messages {
  gap: 18px;
  padding: 22px 24px 32px;
}

.message {
  align-items: flex-start;
}

.bubble {
  border: 1px solid var(--line-soft);
  box-shadow: var(--elev-1);
}

.message.assistant .bubble {
  width: min(920px, 100%);
  max-width: min(920px, 100%);
  border-radius: 24px;
  padding: 18px 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.035)),
    rgba(17, 20, 28, 0.94);
  border: 1px solid rgba(255,255,255,0.08);
}

.message.user .bubble {
  max-width: min(760px, 84%);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.24), rgba(var(--accent-rgb), 0.11)),
    rgba(255,255,255,0.035);
  border-color: rgba(var(--accent-rgb), 0.22);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.26);
}

.message-role {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  margin-bottom: 10px;
}

.message.assistant .message-role {
  color: rgba(var(--accent-rgb), 0.9);
}

.message-content {
  font-size: 1rem;
  line-height: 1.72;
  color: var(--text-main);
}

.message-content p {
  margin-top: 0;
}

.message-content p:last-child {
  margin-bottom: 0;
}

.message-content h1,
.message-content h2,
.message-content h3,
.message-content h4 {
  color: var(--text-strong);
  line-height: 1.2;
  margin: 1.2em 0 0.55em;
}

.message-content h1:first-child,
.message-content h2:first-child,
.message-content h3:first-child,
.message-content h4:first-child {
  margin-top: 0;
}

.message-content ul,
.message-content ol {
  padding-left: 1.2rem;
}

.message-content li + li {
  margin-top: 0.3rem;
}

.message-meta {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
  color: var(--text-muted);
}

.message-content a {
  color: #d7e4ff;
  text-decoration-color: rgba(var(--accent-rgb), 0.55);
}

.messages img {
  border-radius: 16px;
  border: 1px solid var(--line-soft);
  box-shadow: var(--elev-1);
}

/* ---------- Footer Actions / Copy / Retry ---------- */

.message-footer,
.message-actions {
  margin-top: 12px;
}

.message-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.message-footer-meta {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.message-footer-actions,
.message-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.footer-icon-btn,
.copy-icon-btn,
.copy-message-btn,
.copy-code-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 12px;
  border: 1px solid var(--line-mid);
  background: rgba(255,255,255,0.055);
  color: var(--text-main);
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.footer-icon-btn:hover,
.copy-icon-btn:hover,
.copy-message-btn:hover,
.copy-code-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(var(--accent-rgb), 0.28);
}

.footer-icon-btn svg,
.copy-icon-btn svg,
.copy-code-btn svg,
.copy-message-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.code-language {
  color: var(--text-muted);
}

/* ---------- Code / Tables ---------- */

.code-block {
  margin: 14px 0 18px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: #0b1018;
  box-shadow: var(--elev-1);
  overflow: hidden;
}

.code-header {
  padding: 11px 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    #121824;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.code-block pre {
  padding: 16px;
  background: #0b1018;
}

.code-block code,
.message code:not(pre code) {
  font-variant-ligatures: none;
}

.message code:not(pre code) {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 2px 6px;
}

.chat-table-wrap {
  margin: 14px 0 18px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  overflow: auto;
  background: rgba(255,255,255,0.03);
  box-shadow: var(--elev-1);
}

.chat-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.chat-table-wrap thead {
  background: rgba(255,255,255,0.05);
}

.chat-table-wrap th,
.chat-table-wrap td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  text-align: left;
}

.chat-table-wrap th {
  color: var(--text-strong);
  font-weight: 600;
}

.chat-table-wrap td {
  color: var(--text-main);
}

/* ---------- Composer / Command Bar ---------- */

.composer {
  padding: 16px 20px 20px;
  border-top: 1px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(10,12,18,0.72), rgba(10,12,18,0.94)),
    rgba(10,12,18,0.94);
}

.composer-form-modern {
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: 12px;
  padding: 10px;
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02)),
    rgba(13, 16, 24, 0.96);
  box-shadow: 0 18px 50px rgba(0,0,0,0.28);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.composer-form-modern:focus-within,
.composer.is-active .composer-form-modern {
  border-color: rgba(var(--accent-rgb), 0.34);
  box-shadow:
    0 0 0 4px rgba(var(--accent-rgb), 0.10),
    0 18px 50px rgba(0,0,0,0.3);
}

.composer-plus-wrap {
  align-self: end;
}

.composer-plus-btn {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid var(--line-mid);
  background: rgba(255,255,255,0.055);
  color: var(--text-main);
  font-size: 1.3rem;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.composer-plus-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(var(--accent-rgb), 0.28);
}

.composer textarea,
#messageInput {
  min-height: 64px;
  max-height: 220px;
  border: none;
  outline: none;
  box-shadow: none;
  background: transparent;
  color: var(--text-main);
  padding: 12px 6px 10px;
  line-height: 1.56;
}

.composer textarea::placeholder,
#messageInput::placeholder {
  color: var(--text-faint);
}

.composer .btn.primary,
#sendBtn {
  min-width: 120px;
  height: 56px;
  border-radius: 18px;
  font-weight: 700;
  font-size: 0.96rem;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  border: 0;
  color: #fff;
  box-shadow: 0 14px 36px rgba(var(--accent-rgb), 0.26);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.composer .btn.primary:hover,
#sendBtn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

#sendBtn.is-stop {
  background: linear-gradient(135deg, rgba(255,95,95,0.95), rgba(255,120,120,0.9));
  color: #fff;
  border: 0;
  box-shadow: 0 14px 34px rgba(255,95,95,0.24);
}

.upload-menu {
  min-width: 230px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)),
    rgba(14, 17, 24, 0.96);
  box-shadow: var(--elev-2);
}

.upload-menu-item {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--text-main);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.upload-menu-item:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.06);
  border-color: rgba(var(--accent-rgb), 0.2);
}

.upload-menu-item small {
  color: var(--text-muted);
}

/* ---------- Upload Preview ---------- */

.upload-preview-strip {
  margin-bottom: 12px;
}

.image-preview-list,
.document-preview-list {
  gap: 10px;
}

.image-preview-item,
.document-preview-item {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.045);
  box-shadow: var(--elev-1);
}

.image-preview-thumb {
  border-radius: 12px;
}

.image-remove-btn,
.document-remove-btn {
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(10,10,10,0.82);
  color: #fff;
}

/* ---------- Sidebar ---------- */

.app-sidebar {
  border-radius: 28px;
  padding: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)),
    rgba(11, 14, 20, 0.9);
}

.app-sidebar-header {
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}

.app-sidebar-title {
  color: var(--text-strong);
}

.app-sidebar-home {
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.055);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.app-sidebar-home:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(var(--accent-rgb), 0.25);
}

.bot-switch-list,
.conversation-list {
  gap: 10px;
}

.bot-switch-item,
.conversation-item {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02)),
    rgba(255,255,255,0.025);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.bot-switch-item:hover,
.conversation-item:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
}

.bot-switch-item.active,
.conversation-item.active {
  border-color: rgba(var(--accent-rgb), 0.32);
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(var(--accent-rgb), 0.05)),
    rgba(255,255,255,0.03);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 30px rgba(0,0,0,0.18);
}

.bot-switch-item.active::before,
.conversation-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}

.conversation-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.conversation-trash-btn {
  flex: 0 0 38px;
  width: 38px;
  min-width: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.045);
  color: var(--text-muted);
  opacity: 0.8;
  transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease, border-color 0.18s ease;
}

.conversation-row:hover .conversation-trash-btn {
  opacity: 1;
}

.conversation-trash-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 95, 95, 0.1);
  border-color: rgba(255, 95, 95, 0.18);
  color: #ffd2d2;
}

/* ---------- Landing V3 ---------- */

body:not([data-bot]) {
  --accent: #7c5cff;
  --accent-2: #5c8dff;
  --accent-rgb: 124, 92, 255;
}

.landing-page-v3 {
  padding: 22px;
}

.landing-shell-v3 {
  width: min(1440px, 100%);
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.85fr);
  gap: 20px;
  align-items: start;
}

.landing-hero-card-v3 {
  grid-column: 1 / -1;
  border-radius: 30px;
  padding: 28px;
}

.landing-kicker-v3,
.landing-section-kicker-v3 {
  color: var(--text-faint);
  font-size: 0.78rem;
}

.landing-hero-copy-v3 h1 {
  margin: 0;
  font-size: clamp(2.1rem, 4vw, 3.35rem);
  line-height: 1;
  color: var(--text-strong);
}

#landingSubtitle {
  max-width: 760px;
  color: var(--text-muted);
  line-height: 1.7;
}

.landing-user-chip-v3,
.landing-logout-btn-v3,
.bot-status-badge-v3 {
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.06);
  color: var(--text-main);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

.landing-logout-btn-v3 {
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.landing-logout-btn-v3:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(var(--accent-rgb), 0.24);
}

.landing-bots-card-v3,
.landing-usage-card-v3 {
  border-radius: 28px;
  padding: 24px;
}

.landing-bots-card-v3 {
  min-width: 0;
}

.bot-grid-v3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

/* ---------- Landing Bot-Karten mit eigener Farbe ---------- */

.bot-select-card-v3 {
  --card-accent: #7c5cff;
  --card-accent-2: #5c8dff;
  --card-accent-rgb: 124, 92, 255;

  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at top right, rgba(var(--card-accent-rgb), 0.08), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.025)),
    rgba(15, 18, 26, 0.84);
  box-shadow: var(--elev-1);
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.bot-select-card-v3[data-bot="albert"] {
  --card-accent: #7c5cff;
  --card-accent-2: #5c8dff;
  --card-accent-rgb: 124, 92, 255;
}

.bot-select-card-v3[data-bot="stephen"] {
  --card-accent: #38bdf8;
  --card-accent-2: #2563eb;
  --card-accent-rgb: 56, 189, 248;
}

.bot-select-card-v3[data-bot="jeffrey"] {
  --card-accent: #2ecc71;
  --card-accent-2: #64748b;
  --card-accent-rgb: 46, 204, 113;
}

.bot-select-card-v3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--card-accent), var(--card-accent-2));
  opacity: 0.95;
}

.bot-select-card-v3::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(var(--card-accent-rgb), 0.0), transparent 34%),
    linear-gradient(180deg, rgba(var(--card-accent-rgb), 0), rgba(var(--card-accent-rgb), 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.bot-select-card-v3:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--card-accent-rgb), 0.35);
  box-shadow:
    0 26px 82px rgba(0,0,0,0.38),
    0 0 0 1px rgba(var(--card-accent-rgb), 0.08),
    0 0 44px rgba(var(--card-accent-rgb), 0.10);
  background:
    radial-gradient(circle at top right, rgba(var(--card-accent-rgb), 0.18), transparent 42%),
    linear-gradient(180deg, rgba(var(--card-accent-rgb), 0.095), rgba(255,255,255,0.032)),
    rgba(17, 20, 30, 0.92);
}

.bot-select-card-v3:hover::after {
  opacity: 1;
  background:
    radial-gradient(circle at top right, rgba(var(--card-accent-rgb), 0.18), transparent 34%),
    linear-gradient(180deg, rgba(var(--card-accent-rgb), 0.08), rgba(var(--card-accent-rgb), 0.015));
}

.bot-select-card-v3 > * {
  position: relative;
  z-index: 1;
}

.bot-select-name-v3 {
  font-size: 1.3rem;
  color: var(--text-strong);
}

.bot-select-title-v3,
.bot-select-description-v3,
.bot-prompt-tip-v3,
.bot-card-empty-v3,
.bot-card-chat-meta-v3,
.landing-bots-note-v3,
.landing-usage-label-v3 {
  color: var(--text-muted);
}

.bot-status-badge-v3 {
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.bot-select-card-v3:hover .bot-status-badge-v3 {
  border-color: rgba(var(--card-accent-rgb), 0.34);
  background: rgba(var(--card-accent-rgb), 0.12);
  color: #fff;
}

.bot-prompt-tip-v3 {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.06);
  line-height: 1.6;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.bot-select-card-v3:hover .bot-prompt-tip-v3 {
  background: rgba(var(--card-accent-rgb), 0.075);
  border-color: rgba(var(--card-accent-rgb), 0.18);
}

.bot-open-link-v3,
.bot-secondary-link-v3 {
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.bot-select-card-v3:hover .bot-open-link-v3,
.bot-select-card-v3:hover .bot-secondary-link-v3 {
  border-color: rgba(var(--card-accent-rgb), 0.28);
  background: rgba(var(--card-accent-rgb), 0.12);
  color: #fff;
}

.bot-open-link-v3:hover,
.bot-secondary-link-v3:hover {
  transform: translateY(-1px);
  background: rgba(var(--card-accent-rgb), 0.18) !important;
  border-color: rgba(var(--card-accent-rgb), 0.38) !important;
}

.bot-card-chats-v3 {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bot-card-chats-v3 summary {
  transition: border-color 0.18s ease, background 0.18s ease;
}

.bot-select-card-v3:hover .bot-card-chats-v3 summary {
  background: rgba(var(--card-accent-rgb), 0.08);
  border-color: rgba(var(--card-accent-rgb), 0.18);
}

.bot-card-chat-item-v3 {
  display: block;
  text-decoration: none;
  color: var(--text-main);
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.04);
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.bot-card-chat-item-v3:hover {
  transform: translateY(-1px);
  background: rgba(var(--card-accent-rgb), 0.11);
  border-color: rgba(var(--card-accent-rgb), 0.24);
}

.bot-card-chat-title-v3 {
  color: var(--text-strong);
  font-weight: 600;
}

/* ---------- Usage Card ---------- */

.landing-usage-cost-v3 {
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-strong);
  margin: 18px 0 18px;
}

.landing-usage-stats-v3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.landing-usage-stats-v3 > div {
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.035);
}

.landing-usage-stats-v3 span {
  display: block;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.landing-usage-stats-v3 strong {
  font-size: 1.02rem;
  color: var(--text-strong);
}

.landing-select-wrap-v3 select {
  appearance: none;
  border: 1px solid rgba(255,255,255,0.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)),
    rgba(255,255,255,0.035);
  color: var(--text-main);
  border-radius: 14px;
  padding: 10px 14px;
  outline: none;
}

.landing-usage-details-v3 {
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 14px;
}

.landing-usage-details-v3 summary {
  cursor: pointer;
  color: var(--text-main);
}

.landing-usage-breakdown-v3 {
  margin-top: 12px;
}

/* ---------- Typing ---------- */

.typing-bubble {
  border-radius: 20px;
}

.typing-status-row {
  gap: 10px;
}

.typing-text {
  color: var(--text-muted);
}

.typing span {
  background: rgba(var(--accent-rgb), 0.92);
  box-shadow: 0 0 0 6px rgba(var(--accent-rgb), 0.07);
}

/* ---------- Animationen ---------- */

@media (prefers-reduced-motion: no-preference) {
  .message {
    animation: premiumMessageIn 0.22s ease-out both;
  }

  .bot-select-card-v3,
  .bot-switch-item,
  .conversation-item,
  .landing-logout-btn-v3,
  .composer .btn.primary,
  #sendBtn,
  .composer-plus-btn {
    transition:
      transform 0.18s ease,
      background 0.18s ease,
      border-color 0.18s ease,
      box-shadow 0.18s ease,
      filter 0.18s ease,
      color 0.18s ease;
  }

  @keyframes premiumMessageIn {
    from {
      opacity: 0;
      transform: translateY(10px) scale(0.995);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .landing-shell-v3 {
    display: flex;
    flex-direction: column;
    grid-template-columns: none !important;
  }

  .landing-usage-card-v3,
  .landing-bots-card-v3 {
    grid-column: auto;
  }

  .bot-grid-v3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 980px) {
  .page,
  .landing-page-v3 {
    padding: 16px;
  }

  .messages {
    padding: 18px 18px 26px;
  }

  .composer {
    padding: 14px 16px 16px;
  }
}

@media (max-width: 760px) {
  .topbar {
    padding: 14px 16px 12px;
  }

  .topbar-main {
    gap: 12px;
  }

  .topbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .topbar-actions .btn {
    flex: 1 1 auto;
  }

  .message.assistant .bubble,
  .message.user .bubble {
    max-width: 100%;
    width: 100%;
  }

  .composer-form-modern {
    grid-template-columns: auto 1fr;
  }

  #sendBtn {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }

  .landing-hero-card-v3,
  .landing-bots-card-v3,
  .landing-usage-card-v3 {
    padding: 20px;
  }

  .landing-hero-top-v3 {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .landing-hero-actions-v3 {
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  .page,
  .landing-page-v3 {
    padding: 12px;
  }

  .bot-hero,
  .main-panel,
  .app-sidebar,
  .landing-hero-card-v3,
  .landing-bots-card-v3,
  .landing-usage-card-v3 {
    border-radius: 22px;
  }

  .topbar-title {
    font-size: 1.25rem;
  }

  .status-row {
    width: 100%;
    justify-content: center;
  }

  .landing-hero-copy-v3 h1 {
    font-size: 2rem;
  }

  .landing-usage-stats-v3 {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   HARD FIX — Landing scrollt wieder trotz App-Layout-Fix
   Muss GANZ UNTEN stehen.
   ========================================================= */

@media (min-width: 981px) {
  body:not([data-bot]) {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body:not([data-bot]) #appScreen,
  body:not([data-bot]) #appScreen > .landing-page-v3,
  body:not([data-bot]) .landing-page-v3,
  body:not([data-bot]) .landing-shell-v3 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body:not([data-bot]) .landing-page-v3 {
    min-height: 100vh !important;
  }
}

body:not([data-bot]) {
  overflow-y: auto !important;
}

body:not([data-bot]) #appScreen {
  overflow: visible !important;
}

body:not([data-bot]) .landing-page-v3 {
  overflow: visible !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}
/* =========================================================
   FINAL TOUCH — Landing Bot-Farben, Glow, Premium Details
   Muss nach dem Premium-Block stehen.
   ========================================================= */

/* Landing-Karten bekommen eigene Farbidentität */
.bot-select-card-v3[data-bot="albert"] {
  --card-accent: #8b6cff;
  --card-accent-2: #5c8dff;
  --card-accent-rgb: 139, 108, 255;
}

.bot-select-card-v3[data-bot="stephen"] {
  --card-accent: #38d5ff;
  --card-accent-2: #2563eb;
  --card-accent-rgb: 56, 213, 255;
}

.bot-select-card-v3[data-bot="jeffrey"] {
  --card-accent: #35e887;
  --card-accent-2: #4b6475;
  --card-accent-rgb: 53, 232, 135;
}

.bot-select-card-v3 {
  isolation: isolate;
}

.bot-select-card-v3::before {
  box-shadow: 0 0 22px rgba(var(--card-accent-rgb), 0.34);
}

.bot-select-card-v3:hover {
  border-color: rgba(var(--card-accent-rgb), 0.46) !important;
  background:
    radial-gradient(circle at top right, rgba(var(--card-accent-rgb), 0.22), transparent 46%),
    linear-gradient(180deg, rgba(var(--card-accent-rgb), 0.12), rgba(255,255,255,0.035)),
    rgba(17, 20, 30, 0.94) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,0.42),
    0 0 0 1px rgba(var(--card-accent-rgb), 0.12),
    0 0 54px rgba(var(--card-accent-rgb), 0.16) !important;
}

/* Buttons in der Bot-Kachel nehmen die jeweilige Bot-Farbe an */
.bot-select-card-v3[data-bot] .bot-open-link-v3 {
  background: linear-gradient(135deg, var(--card-accent), var(--card-accent-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 12px 30px rgba(var(--card-accent-rgb), 0.20);
}

.bot-select-card-v3[data-bot] .bot-secondary-link-v3 {
  border-color: rgba(var(--card-accent-rgb), 0.22) !important;
  background: rgba(var(--card-accent-rgb), 0.075) !important;
  color: #fff !important;
}

.bot-select-card-v3[data-bot] .bot-open-link-v3:hover,
.bot-select-card-v3[data-bot] .bot-secondary-link-v3:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 38px rgba(var(--card-accent-rgb), 0.28);
}

/* Status-Badge färbt beim Hover mit */
.bot-select-card-v3:hover .bot-status-badge-v3 {
  border-color: rgba(var(--card-accent-rgb), 0.36) !important;
  background: rgba(var(--card-accent-rgb), 0.13) !important;
  color: #fff !important;
}

/* Prompt-Tipp bekommt mehr Premium-Gefühl */
.bot-select-card-v3 .bot-prompt-tip-v3 {
  position: relative;
}

.bot-select-card-v3 .bot-prompt-tip-v3 strong {
  color: var(--text-strong);
}

.bot-select-card-v3:hover .bot-prompt-tip-v3 {
  border-color: rgba(var(--card-accent-rgb), 0.22) !important;
  background:
    linear-gradient(180deg, rgba(var(--card-accent-rgb), 0.10), rgba(255,255,255,0.035)) !important;
}

/* Letzte-Chats Dropdown wird wertiger */
.bot-card-chats-v3 summary {
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.075);
  background: rgba(255,255,255,0.04);
  padding: 11px 13px;
}

.bot-select-card-v3:hover .bot-card-chats-v3 summary {
  border-color: rgba(var(--card-accent-rgb), 0.24) !important;
  background: rgba(var(--card-accent-rgb), 0.09) !important;
}

.bot-card-summary-arrow-v3 {
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.bot-card-chats-v3[open] .bot-card-summary-arrow-v3 {
  transform: rotate(180deg);
}

/* Usage Card: etwas mehr Dashboard-Gefühl */
.landing-usage-card-v3 {
  background:
    radial-gradient(circle at top right, rgba(124,92,255,0.10), transparent 44%),
    linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.03)),
    rgba(12,14,20,0.82) !important;
}

.usage-cost-badge-v3 {
  border-radius: 999px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.055);
  color: rgba(245,247,251,0.78);
  font-size: 0.78rem;
  font-weight: 700;
}

/* Hero bekommt minimal mehr Produkt-Charakter */
.landing-hero-card-v3 {
  background:
    radial-gradient(circle at 12% 0%, rgba(124,92,255,0.13), transparent 34%),
    radial-gradient(circle at 90% 12%, rgba(56,189,248,0.09), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.032)),
    rgba(12,14,20,0.86) !important;
}

.landing-hero-card-v3::after {
  content: "";
  position: absolute;
  right: 28px;
  bottom: 24px;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255,255,255,0.10), transparent 58%);
  opacity: 0.45;
  pointer-events: none;
}

/* Allgemein: bessere kleine Interaktionen */
.landing-logout-btn-v3,
.bot-card-chat-item-v3,
.bot-card-chats-v3 summary,
.landing-select-wrap-v3 select {
  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease;
}

.landing-logout-btn-v3:hover,
.bot-card-chat-item-v3:hover,
.landing-select-wrap-v3 select:hover {
  transform: translateY(-1px);
}

/* Chatseiten: Bot-Switch in Sidebar auch farbiger je Bot */
.bot-switch-item[href="/albert.html"]:hover {
  border-color: rgba(139,108,255,0.34) !important;
  background: rgba(139,108,255,0.11) !important;
}

.bot-switch-item[href="/stephen.html"]:hover {
  border-color: rgba(56,213,255,0.34) !important;
  background: rgba(56,213,255,0.11) !important;
}

.bot-switch-item[href="/jeffrey.html"]:hover {
  border-color: rgba(53,232,135,0.34) !important;
  background: rgba(53,232,135,0.10) !important;
}
/* =========================================================
   LANDING FINAL FIX — Scroll + echte Bot-Farben
   Muss GANZ UNTEN in styles.css stehen.
   ========================================================= */

/* ---------- 1) Landing Page scrollt wieder zuverlässig ---------- */

html {
  min-height: 100% !important;
  height: auto !important;
  overflow-x: hidden !important;
}

body.landing-body-v3 {
  min-height: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
}

body.landing-body-v3 #appScreen {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.landing-body-v3 .landing-page-v3,
body.landing-body-v3 #appScreen > .landing-page-v3,
body.landing-body-v3 .landing-shell-v3 {
  position: relative !important;
  inset: auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.landing-body-v3 .landing-page-v3 {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  padding-bottom: max(32px, env(safe-area-inset-bottom)) !important;
}

body.landing-body-v3 .landing-shell-v3 {
  padding-bottom: 32px !important;
}

/* Falls Safari/Touch durch versteckte Wrapper zickt */
body.landing-body-v3,
body.landing-body-v3 * {
  scroll-behavior: auto !important;
}


/* ---------- 2) Landing Bot-Karten: Farbe nicht nur Hover, sondern dauerhaft ---------- */

.bot-select-card-v3[data-bot="albert"] {
  --card-accent: #8b6cff;
  --card-accent-2: #5c8dff;
  --card-accent-rgb: 139, 108, 255;
}

.bot-select-card-v3[data-bot="stephen"] {
  --card-accent: #38d5ff;
  --card-accent-2: #2563eb;
  --card-accent-rgb: 56, 213, 255;
}

.bot-select-card-v3[data-bot="jeffrey"] {
  --card-accent: #35e887;
  --card-accent-2: #4b6475;
  --card-accent-rgb: 53, 232, 135;
}

body.landing-body-v3 .bot-select-card-v3[data-bot] {
  border-color: rgba(var(--card-accent-rgb), 0.18) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(var(--card-accent-rgb), 0.18), transparent 38%),
    linear-gradient(180deg, rgba(var(--card-accent-rgb), 0.075), rgba(255,255,255,0.032)),
    rgba(12, 14, 20, 0.88) !important;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.34),
    0 0 0 1px rgba(var(--card-accent-rgb), 0.055),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

body.landing-body-v3 .bot-select-card-v3[data-bot]::before {
  background: rgba(var(--card-accent-rgb), 0.78) !important;
  box-shadow: 0 0 24px rgba(var(--card-accent-rgb), 0.42) !important;
}

body.landing-body-v3 .bot-select-card-v3[data-bot]::after {
  background:
    radial-gradient(circle, rgba(var(--card-accent-rgb), 0.22), transparent 62%) !important;
}

body.landing-body-v3 .bot-select-card-v3[data-bot]:hover {
  transform: translateY(-4px) !important;
  border-color: rgba(var(--card-accent-rgb), 0.48) !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(var(--card-accent-rgb), 0.28), transparent 42%),
    linear-gradient(180deg, rgba(var(--card-accent-rgb), 0.13), rgba(255,255,255,0.04)),
    rgba(14, 17, 25, 0.96) !important;
  box-shadow:
    0 34px 100px rgba(0,0,0,0.46),
    0 0 0 1px rgba(var(--card-accent-rgb), 0.12),
    0 0 62px rgba(var(--card-accent-rgb), 0.18) !important;
}

body.landing-body-v3 .bot-select-card-v3[data-bot] .bot-select-name-v3 {
  color: #fff !important;
  text-shadow: 0 0 28px rgba(var(--card-accent-rgb), 0.18);
}

body.landing-body-v3 .bot-select-card-v3[data-bot] .bot-select-title-v3 {
  color: rgba(var(--card-accent-rgb), 0.88) !important;
}

body.landing-body-v3 .bot-select-card-v3[data-bot] .bot-status-badge-v3 {
  border-color: rgba(var(--card-accent-rgb), 0.22) !important;
  background: rgba(var(--card-accent-rgb), 0.09) !important;
  color: rgba(245,247,251,0.88) !important;
}

body.landing-body-v3 .bot-select-card-v3[data-bot] .bot-prompt-tip-v3 {
  border-color: rgba(var(--card-accent-rgb), 0.13) !important;
  background:
    linear-gradient(180deg, rgba(var(--card-accent-rgb), 0.07), rgba(255,255,255,0.028)) !important;
}

body.landing-body-v3 .bot-select-card-v3[data-bot] .bot-open-link-v3 {
  background: linear-gradient(135deg, var(--card-accent), var(--card-accent-2)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow:
    0 14px 34px rgba(var(--card-accent-rgb), 0.24),
    inset 0 1px 0 rgba(255,255,255,0.22) !important;
}

body.landing-body-v3 .bot-select-card-v3[data-bot] .bot-secondary-link-v3 {
  border-color: rgba(var(--card-accent-rgb), 0.24) !important;
  background: rgba(var(--card-accent-rgb), 0.08) !important;
  color: rgba(245,247,251,0.92) !important;
}

body.landing-body-v3 .bot-select-card-v3[data-bot] .bot-card-chats-v3 summary {
  border-color: rgba(var(--card-accent-rgb), 0.14) !important;
  background: rgba(var(--card-accent-rgb), 0.055) !important;
}

body.landing-body-v3 .bot-select-card-v3[data-bot]:hover .bot-card-chats-v3 summary,
body.landing-body-v3 .bot-select-card-v3[data-bot]:hover .bot-prompt-tip-v3,
body.landing-body-v3 .bot-select-card-v3[data-bot]:hover .bot-status-badge-v3 {
  border-color: rgba(var(--card-accent-rgb), 0.28) !important;
  background: rgba(var(--card-accent-rgb), 0.12) !important;
}


/* ---------- 3) Chat-Seiten: Bot-Farben konsequenter nutzen ---------- */

body[data-bot="albert"] {
  --accent: #8b6cff;
  --accent-2: #5c8dff;
  --accent-rgb: 139, 108, 255;
}

body[data-bot="stephen"] {
  --accent: #38d5ff;
  --accent-2: #2563eb;
  --accent-rgb: 56, 213, 255;
}

body[data-bot="jeffrey"] {
  --accent: #35e887;
  --accent-2: #4b6475;
  --accent-rgb: 53, 232, 135;
}

body[data-bot] {
  background:
    radial-gradient(circle at top left, rgba(var(--accent-rgb), 0.14), transparent 28%),
    radial-gradient(circle at top right, rgba(var(--accent-rgb), 0.08), transparent 32%),
    linear-gradient(180deg, #07070a 0%, #0d0f15 100%) !important;
}

body[data-bot] .btn.primary,
body[data-bot] #sendBtn:not(.is-stop),
body[data-bot] .bot-switch-item.active,
body[data-bot] .conversation-item.active {
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.95), var(--accent-2)) !important;
  border-color: rgba(var(--accent-rgb), 0.28) !important;
  color: #fff !important;
}

body[data-bot] .message.user .bubble {
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--accent-rgb), 0.26), transparent 40%),
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.24), rgba(255,255,255,0.06)) !important;
  border-color: rgba(var(--accent-rgb), 0.22) !important;
}

body[data-bot] .topbar-title,
body[data-bot] .brand-title {
  text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.18);
}

body[data-bot] .status-dot {
  background: var(--accent) !important;
  box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.46);
}

body[data-bot] .bot-switch-item:hover,
body[data-bot] .conversation-item:hover,
body[data-bot] .chat-export-item:hover {
  border-color: rgba(var(--accent-rgb), 0.26) !important;
  background: rgba(var(--accent-rgb), 0.08) !important;
}
/* =========================================================
   LANDING SCROLL FIX V2 — Safari-sicher
   Scrollt #appScreen statt body.
   GANZ UNTEN in styles.css einfügen.
   ========================================================= */

/* Landing eindeutig von Bot-Seiten trennen */
html,
body {
  width: 100% !important;
}

body.landing-body-v3,
body:not([data-bot]) {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

/* Der sichtbare App-Bereich wird der Scroll-Container */
body.landing-body-v3 #appScreen,
body:not([data-bot]) #appScreen {
  display: block;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

/* Die Landing Page darf größer sein als der Viewport */
body.landing-body-v3 .landing-page-v3,
body:not([data-bot]) .landing-page-v3 {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 22px !important;
  padding-bottom: max(56px, env(safe-area-inset-bottom)) !important;
}

/* Shell darf wachsen */
body.landing-body-v3 .landing-shell-v3,
body:not([data-bot]) .landing-shell-v3 {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Desktop: Karten nebeneinander, aber ohne Abschneiden */
@media (min-width: 1181px) {
  body.landing-body-v3 .landing-shell-v3,
  body:not([data-bot]) .landing-shell-v3 {
    display: grid !important;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.85fr) !important;
    align-items: start !important;
  }

  body.landing-body-v3 .landing-bots-card-v3,
  body:not([data-bot]) .landing-bots-card-v3,
  body.landing-body-v3 .landing-usage-card-v3,
  body:not([data-bot]) .landing-usage-card-v3 {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
}

/* Etwas früher auf Spaltenlayout wechseln, damit es nicht gequetscht wirkt */
@media (max-width: 1280px) {
  body.landing-body-v3 .landing-shell-v3,
  body:not([data-bot]) .landing-shell-v3 {
    display: flex !important;
    flex-direction: column !important;
  }

  body.landing-body-v3 .landing-bots-card-v3,
  body:not([data-bot]) .landing-bots-card-v3,
  body.landing-body-v3 .landing-usage-card-v3,
  body:not([data-bot]) .landing-usage-card-v3 {
    width: 100% !important;
  }
}

/* Bot-Karten nicht künstlich abschneiden */
body.landing-body-v3 .bot-select-card-v3,
body:not([data-bot]) .bot-select-card-v3 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Kleiner Fix: Verbrauchs-Badge darf rechts nicht rauslaufen */
body.landing-body-v3 .landing-usage-card-v3,
body:not([data-bot]) .landing-usage-card-v3 {
  overflow: hidden !important;
}

body.landing-body-v3 .usage-cost-badge-v3,
body:not([data-bot]) .usage-cost-badge-v3 {
  position: static !important;
  max-width: 100% !important;
  white-space: normal !important;
  justify-self: start !important;
  align-self: start !important;
}
/* =========================================================
   LANDING LAYOUT FIX — Kosten unter Bots, Bot-Karten bleiben nebeneinander
   GANZ UNTEN in styles.css einfügen.
   ========================================================= */

body.landing-body-v3 .landing-shell-v3,
body:not([data-bot]) .landing-shell-v3 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  align-items: stretch !important;
}

/* Alle großen Landing-Kacheln nehmen volle Breite */
body.landing-body-v3 .landing-hero-card-v3,
body.landing-body-v3 .landing-bots-card-v3,
body.landing-body-v3 .landing-usage-card-v3,
body:not([data-bot]) .landing-hero-card-v3,
body:not([data-bot]) .landing-bots-card-v3,
body:not([data-bot]) .landing-usage-card-v3 {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

/* Bot-Karten bleiben auf Desktop nebeneinander */
body.landing-body-v3 .bot-grid-v3,
body:not([data-bot]) .bot-grid-v3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
}

/* Tablet: zwei nebeneinander */
@media (max-width: 1180px) {
  body.landing-body-v3 .bot-grid-v3,
  body:not([data-bot]) .bot-grid-v3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile: eine untereinander */
@media (max-width: 820px) {
  body.landing-body-v3 .bot-grid-v3,
  body:not([data-bot]) .bot-grid-v3 {
    grid-template-columns: 1fr !important;
  }
}

/* Kosten-Kachel schöner als breite Fullwidth-Kachel */
body.landing-body-v3 .landing-usage-card-v3,
body:not([data-bot]) .landing-usage-card-v3 {
  max-width: none !important;
}

/* Kostenbereich auf Fullwidth besser verteilen */
@media (min-width: 900px) {
  body.landing-body-v3 .landing-usage-card-v3,
  body:not([data-bot]) .landing-usage-card-v3 {
    display: grid !important;
    grid-template-columns: minmax(260px, 0.8fr) minmax(260px, 0.7fr) minmax(420px, 1.2fr) !important;
    gap: 22px !important;
    align-items: start !important;
  }

  body.landing-body-v3 .landing-usage-head-v3,
  body:not([data-bot]) .landing-usage-head-v3 {
    margin: 0 !important;
  }

  body.landing-body-v3 .landing-usage-cost-v3,
  body:not([data-bot]) .landing-usage-cost-v3 {
    margin: 0 !important;
    align-self: center !important;
  }

  body.landing-body-v3 .landing-usage-stats-v3,
  body:not([data-bot]) .landing-usage-stats-v3 {
    margin: 0 !important;
  }

  body.landing-body-v3 .landing-usage-details-v3,
  body:not([data-bot]) .landing-usage-details-v3 {
    grid-column: 1 / -1 !important;
    margin-top: 4px !important;
  }
}

/* Selects: Maus wirkt klickbar/greifig */
body.landing-body-v3 .landing-select-wrap-v3,
body.landing-body-v3 .landing-select-wrap-v3 select,
body:not([data-bot]) .landing-select-wrap-v3,
body:not([data-bot]) .landing-select-wrap-v3 select {
  cursor: pointer !important;
}

body.landing-body-v3 .landing-usage-filters-v3 select,
body:not([data-bot]) .landing-usage-filters-v3 select {
  cursor: pointer !important;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease !important;
}

body.landing-body-v3 .landing-usage-filters-v3 select:hover,
body:not([data-bot]) .landing-usage-filters-v3 select:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,0.22) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 12px 28px rgba(0,0,0,0.22) !important;
}

body.landing-body-v3 .landing-usage-filters-v3 select:active,
body:not([data-bot]) .landing-usage-filters-v3 select:active {
  transform: translateY(0) scale(0.99) !important;
}
/* =========================================================
   FINAL POLISH — Sidebar dezenter + Landing Bot-Karten gleichmäßig
   GANZ UNTEN in styles.css einfügen.
   ========================================================= */


/* ---------- 1) Sidebar Bot-Auswahl: aktive Markierung dezenter ---------- */

body[data-bot] .bot-switch-item {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.028)) !important;
  border-color: rgba(255,255,255,0.085) !important;
  color: rgba(245,247,251,0.92) !important;
  box-shadow: none !important;
}

body[data-bot] .bot-switch-item .bot-switch-name,
body[data-bot] .bot-switch-item small {
  color: inherit !important;
}

body[data-bot] .bot-switch-item small {
  color: rgba(190,196,211,0.78) !important;
}

/* Aktiver Bot: nur dezenter Rand/Glow, keine volle Neon-Fläche */
body[data-bot] .bot-switch-item.active {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.105), rgba(255,255,255,0.035)) !important;
  border-color: rgba(var(--accent-rgb), 0.34) !important;
  box-shadow:
    inset 3px 0 0 rgba(var(--accent-rgb), 0.82),
    0 0 0 1px rgba(var(--accent-rgb), 0.045) !important;
}

body[data-bot] .bot-switch-item.active .bot-switch-name {
  color: #fff !important;
}

body[data-bot] .bot-switch-item.active small {
  color: rgba(218,224,238,0.72) !important;
}

body[data-bot] .bot-switch-item:hover {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb), 0.10), rgba(255,255,255,0.04)) !important;
  border-color: rgba(var(--accent-rgb), 0.24) !important;
  transform: translateY(-1px);
}

/* Mobile Sidebar: ebenfalls weniger knallig */
@media (max-width: 980px) {
  body[data-bot] .bot-switch-item.active {
    background:
      linear-gradient(180deg, rgba(var(--accent-rgb), 0.12), rgba(255,255,255,0.04)) !important;
    box-shadow:
      inset 4px 0 0 rgba(var(--accent-rgb), 0.82) !important;
  }
}


/* ---------- 2) Landing: Bot-Karten gleichmäßig statt wild ---------- */

/* Drei gleich große Karten */
body.landing-body-v3 .bot-grid-v3,
body:not([data-bot]) .bot-grid-v3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 16px !important;
}

/* Jede Karte bekommt identische innere Reihen */
body.landing-body-v3 .bot-select-card-v3,
body:not([data-bot]) .bot-select-card-v3 {
  height: 100% !important;
  min-height: 560px !important;
  display: grid !important;
  grid-template-rows:
    auto       /* Header */
    minmax(82px, auto)   /* Beschreibung */
    minmax(132px, auto)  /* Prompt */
    auto       /* Meta + Buttons */
    minmax(150px, 1fr)   /* Letzte Chats */
  !important;
  gap: 18px !important;
  padding: 22px !important;
}

/* Header gleich hoch und sauber */
body.landing-body-v3 .bot-select-top-v3,
body:not([data-bot]) .bot-select-top-v3 {
  min-height: 58px !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

/* Beschreibung bei allen ähnlich ruhig */
body.landing-body-v3 .bot-select-description-v3,
body:not([data-bot]) .bot-select-description-v3 {
  margin: 0 !important;
  line-height: 1.55 !important;
}

/* Prompt-Tipp gleichmäßiger */
body.landing-body-v3 .bot-prompt-tip-v3,
body:not([data-bot]) .bot-prompt-tip-v3 {
  margin: 0 !important;
  min-height: 132px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

body.landing-body-v3 .bot-prompt-tip-v3 p,
body:not([data-bot]) .bot-prompt-tip-v3 p {
  margin-top: 8px !important;
}

/* Modell + Buttons immer auf einer ruhigen Linie */
body.landing-body-v3 .bot-meta-v3,
body:not([data-bot]) .bot-meta-v3 {
  margin-top: 0 !important;
  min-height: 44px !important;
  align-items: center !important;
}

body.landing-body-v3 .bot-actions-v3,
body:not([data-bot]) .bot-actions-v3 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Letzte Chats unten sauber ausrichten */
body.landing-body-v3 .bot-card-chats-v3,
body:not([data-bot]) .bot-card-chats-v3 {
  margin-top: 0 !important;
  padding-top: 12px !important;
  align-self: stretch !important;
  min-height: 150px !important;
}

body.landing-body-v3 .bot-card-chats-list-v3,
body:not([data-bot]) .bot-card-chats-list-v3 {
  max-height: 174px !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
}

/* Scrollbar in den kleinen Chatlisten subtil */
body.landing-body-v3 .bot-card-chats-list-v3::-webkit-scrollbar,
body:not([data-bot]) .bot-card-chats-list-v3::-webkit-scrollbar {
  width: 6px;
}

body.landing-body-v3 .bot-card-chats-list-v3::-webkit-scrollbar-thumb,
body:not([data-bot]) .bot-card-chats-list-v3::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.14);
  border-radius: 999px;
}

/* Tablet: zwei Karten, immer noch gleichmäßig */
@media (max-width: 1180px) {
  body.landing-body-v3 .bot-grid-v3,
  body:not([data-bot]) .bot-grid-v3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile: eine Karte, keine feste Höhe erzwingen */
@media (max-width: 820px) {
  body.landing-body-v3 .bot-grid-v3,
  body:not([data-bot]) .bot-grid-v3 {
    grid-template-columns: 1fr !important;
  }

  body.landing-body-v3 .bot-select-card-v3,
  body:not([data-bot]) .bot-select-card-v3 {
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  body.landing-body-v3 .bot-prompt-tip-v3,
  body:not([data-bot]) .bot-prompt-tip-v3,
  body.landing-body-v3 .bot-card-chats-v3,
  body:not([data-bot]) .bot-card-chats-v3 {
    min-height: 0 !important;
  }

  body.landing-body-v3 .bot-card-chats-list-v3,
  body:not([data-bot]) .bot-card-chats-list-v3 {
    max-height: none !important;
    overflow: visible !important;
  }
}
/* =========================================================
   LANDING POLISH V2 — natürlichere Bot-Karten + Usage-Badge
   GANZ UNTEN in styles.css einfügen.
   ========================================================= */


/* ---------- 1) Verbrauchs-Badge auf Desktop wieder breiter ---------- */

@media (min-width: 821px) {
  body.landing-body-v3 .usage-cost-badge-v3,
  body:not([data-bot]) .usage-cost-badge-v3 {
    width: auto !important;
    min-width: 170px !important;
    max-width: 240px !important;
    padding: 11px 20px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }
}

@media (min-width: 1180px) {
  body.landing-body-v3 .usage-cost-badge-v3,
  body:not([data-bot]) .usage-cost-badge-v3 {
    min-width: 190px !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
}


/* ---------- 2) Bot-Karten: weniger starre Säulen, aber sauber gleichmäßig ---------- */

body.landing-body-v3 .bot-grid-v3,
body:not([data-bot]) .bot-grid-v3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 16px !important;
}

/* Nicht mehr so stark einschränken: Karten dürfen wieder natürlicher wachsen */
body.landing-body-v3 .bot-select-card-v3,
body:not([data-bot]) .bot-select-card-v3 {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  padding: 22px !important;
}

/* Nur Header/Beschreibung/Prompt leicht angleichen */
body.landing-body-v3 .bot-select-top-v3,
body:not([data-bot]) .bot-select-top-v3 {
  min-height: 54px !important;
  margin: 0 !important;
}

body.landing-body-v3 .bot-select-description-v3,
body:not([data-bot]) .bot-select-description-v3 {
  min-height: 94px !important;
  margin: 0 !important;
  line-height: 1.55 !important;
}

/* Prompt-Tipp nur moderat angleichen, nicht brutal fixieren */
body.landing-body-v3 .bot-prompt-tip-v3,
body:not([data-bot]) .bot-prompt-tip-v3 {
  min-height: 116px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
}

body.landing-body-v3 .bot-prompt-tip-v3 p,
body:not([data-bot]) .bot-prompt-tip-v3 p {
  margin: 8px 0 0 !important;
}

/* Meta-Zeile darf nach unten wandern, aber bleibt überall gleich aufgebaut */
body.landing-body-v3 .bot-meta-v3,
body:not([data-bot]) .bot-meta-v3 {
  margin-top: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 48px !important;
}

body.landing-body-v3 .bot-meta-v3 > span,
body:not([data-bot]) .bot-meta-v3 > span {
  min-width: 0 !important;
  line-height: 1.25 !important;
  color: var(--text-muted) !important;
}


/* ---------- 3) Jeffrey Buttons exakt wie Albert/Stephen ---------- */

body.landing-body-v3 .bot-actions-v3,
body:not([data-bot]) .bot-actions-v3 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

body.landing-body-v3 .bot-secondary-link-v3,
body.landing-body-v3 .bot-open-link-v3,
body:not([data-bot]) .bot-secondary-link-v3,
body:not([data-bot]) .bot-open-link-v3 {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 38px !important;
  min-height: 38px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-weight: 750 !important;
  box-sizing: border-box !important;
}

body.landing-body-v3 .bot-secondary-link-v3,
body:not([data-bot]) .bot-secondary-link-v3 {
  min-width: 108px !important;
  padding: 0 14px !important;
}

body.landing-body-v3 .bot-open-link-v3,
body:not([data-bot]) .bot-open-link-v3 {
  min-width: 122px !important;
  padding: 0 16px !important;
}


/* ---------- 4) Letzte Chats: Einklappen soll wirklich Platz freigeben ---------- */

body.landing-body-v3 .bot-card-chats-v3,
body:not([data-bot]) .bot-card-chats-v3 {
  margin-top: 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
}

/* Wenn geschlossen: nur Summary zeigen, keine reservierte Listen-Höhe */
body.landing-body-v3 .bot-card-chats-v3:not([open]),
body:not([data-bot]) .bot-card-chats-v3:not([open]) {
  padding-bottom: 0 !important;
}

body.landing-body-v3 .bot-card-chats-v3:not([open]) .bot-card-chats-list-v3,
body:not([data-bot]) .bot-card-chats-v3:not([open]) .bot-card-chats-list-v3 {
  display: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Wenn offen: Liste darf arbeiten, aber nicht riesig werden */
body.landing-body-v3 .bot-card-chats-v3[open] .bot-card-chats-list-v3,
body:not([data-bot]) .bot-card-chats-v3[open] .bot-card-chats-list-v3 {
  display: grid !important;
  gap: 8px !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  margin-top: 10px !important;
  padding-right: 2px !important;
}

/* Details selbst darf keine alte fixe Höhe behalten */
body.landing-body-v3 .bot-card-chats-v3,
body.landing-body-v3 .bot-card-chats-list-v3,
body:not([data-bot]) .bot-card-chats-v3,
body:not([data-bot]) .bot-card-chats-list-v3 {
  min-height: 0 !important;
}


/* ---------- 5) Tablet/Mobile bleibt sauber ---------- */

@media (max-width: 1180px) {
  body.landing-body-v3 .bot-grid-v3,
  body:not([data-bot]) .bot-grid-v3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  body.landing-body-v3 .bot-grid-v3,
  body:not([data-bot]) .bot-grid-v3 {
    grid-template-columns: 1fr !important;
  }

  body.landing-body-v3 .bot-select-card-v3,
  body:not([data-bot]) .bot-select-card-v3 {
    padding: 18px !important;
  }

  body.landing-body-v3 .bot-select-description-v3,
  body:not([data-bot]) .bot-select-description-v3,
  body.landing-body-v3 .bot-prompt-tip-v3,
  body:not([data-bot]) .bot-prompt-tip-v3 {
    min-height: 0 !important;
  }

  body.landing-body-v3 .bot-meta-v3,
  body:not([data-bot]) .bot-meta-v3 {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  body.landing-body-v3 .bot-actions-v3,
  body:not([data-bot]) .bot-actions-v3 {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  body.landing-body-v3 .bot-secondary-link-v3,
  body.landing-body-v3 .bot-open-link-v3,
  body:not([data-bot]) .bot-secondary-link-v3,
  body:not([data-bot]) .bot-open-link-v3 {
    flex: 1 1 140px !important;
  }

  body.landing-body-v3 .usage-cost-badge-v3,
  body:not([data-bot]) .usage-cost-badge-v3 {
    width: 100% !important;
    max-width: none !important;
  }
}
/* =========================================================
   CLEAN SAAS DARK FINAL — Landing + Bot UI Polish
   Ziel: weniger Neon, mehr ruhiges SaaS-Produkt
   GANZ UNTEN in styles.css einfügen.
   ========================================================= */


/* ---------- 0) Design Tokens ---------- */

:root {
  --saas-bg-0: #07080c;
  --saas-bg-1: #0b0d13;
  --saas-bg-2: #10131b;

  --saas-panel: rgba(18, 21, 30, 0.78);
  --saas-panel-2: rgba(22, 25, 36, 0.72);
  --saas-panel-3: rgba(255, 255, 255, 0.045);

  --saas-border: rgba(255, 255, 255, 0.085);
  --saas-border-strong: rgba(255, 255, 255, 0.13);

  --saas-text: #f4f6fb;
  --saas-muted: rgba(202, 208, 222, 0.68);
  --saas-muted-2: rgba(202, 208, 222, 0.48);

  --saas-shadow: 0 22px 70px rgba(0, 0, 0, 0.34);
  --saas-shadow-soft: 0 14px 42px rgba(0, 0, 0, 0.22);

  --saas-radius-xl: 28px;
  --saas-radius-lg: 22px;
  --saas-radius-md: 16px;

  --text-main: var(--saas-text);
  --text-strong: #ffffff;
  --text-muted: var(--saas-muted);
}


/* ---------- 1) Bot-Akzente: nur Akzent, keine Neon-Flächen ---------- */

body[data-bot="albert"],
.bot-select-card-v3[data-bot="albert"] {
  --accent: #8d7cff;
  --accent-2: #5d8cff;
  --accent-rgb: 141, 124, 255;
  --card-accent: #8d7cff;
  --card-accent-2: #5d8cff;
  --card-accent-rgb: 141, 124, 255;
}

body[data-bot="stephen"],
.bot-select-card-v3[data-bot="stephen"] {
  --accent: #48c7ee;
  --accent-2: #3978ff;
  --accent-rgb: 72, 199, 238;
  --card-accent: #48c7ee;
  --card-accent-2: #3978ff;
  --card-accent-rgb: 72, 199, 238;
}

body[data-bot="jeffrey"],
.bot-select-card-v3[data-bot="jeffrey"] {
  --accent: #3bd384;
  --accent-2: #33a876;
  --accent-rgb: 59, 211, 132;
  --card-accent: #3bd384;
  --card-accent-2: #33a876;
  --card-accent-rgb: 59, 211, 132;
}


/* ---------- 2) Global ruhiger machen ---------- */

html {
  background: var(--saas-bg-0) !important;
}

body {
  color: var(--saas-text) !important;
  background:
    radial-gradient(circle at 18% -10%, rgba(141, 124, 255, 0.095), transparent 32%),
    radial-gradient(circle at 85% 0%, rgba(72, 199, 238, 0.055), transparent 28%),
    linear-gradient(180deg, var(--saas-bg-0) 0%, var(--saas-bg-1) 100%) !important;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif !important;
}

body[data-bot] {
  background:
    radial-gradient(circle at 18% -8%, rgba(var(--accent-rgb), 0.09), transparent 30%),
    radial-gradient(circle at 84% 4%, rgba(255, 255, 255, 0.035), transparent 28%),
    linear-gradient(180deg, var(--saas-bg-0) 0%, var(--saas-bg-1) 100%) !important;
}

.btn,
button,
a {
  -webkit-tap-highlight-color: transparent;
}

.btn,
.landing-logout-btn-v3,
.bot-open-link-v3,
.bot-secondary-link-v3 {
  font-weight: 720 !important;
  letter-spacing: -0.01em !important;
}


/* ---------- 3) Landing Scroll stabil behalten ---------- */

html,
body {
  width: 100% !important;
}

body.landing-body-v3,
body:not([data-bot]) {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow: hidden !important;
}

body.landing-body-v3 #appScreen,
body:not([data-bot]) #appScreen {
  position: fixed !important;
  inset: 0 !important;
  display: block;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body.landing-body-v3 .landing-page-v3,
body:not([data-bot]) .landing-page-v3 {
  min-height: 100vh !important;
  min-height: 100dvh !important;
  height: auto !important;
  overflow: visible !important;
  padding: 22px !important;
  padding-bottom: max(56px, env(safe-area-inset-bottom)) !important;
  background:
    radial-gradient(circle at 18% -8%, rgba(141, 124, 255, 0.105), transparent 34%),
    radial-gradient(circle at 92% 6%, rgba(72, 199, 238, 0.06), transparent 32%),
    linear-gradient(180deg, var(--saas-bg-0) 0%, var(--saas-bg-1) 100%) !important;
}


/* ---------- 4) Landing Layout: Hero, Bots, Kosten untereinander ---------- */

body.landing-body-v3 .landing-shell-v3,
body:not([data-bot]) .landing-shell-v3 {
  width: min(100%, 1480px) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 18px !important;
  align-items: stretch !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.landing-body-v3 .landing-hero-card-v3,
body.landing-body-v3 .landing-bots-card-v3,
body.landing-body-v3 .landing-usage-card-v3,
body:not([data-bot]) .landing-hero-card-v3,
body:not([data-bot]) .landing-bots-card-v3,
body:not([data-bot]) .landing-usage-card-v3 {
  width: 100% !important;
  grid-column: 1 / -1 !important;
}


/* ---------- 5) Landing Panels: weniger Neon, mehr Glas/SaaS ---------- */

body.landing-body-v3 .landing-hero-card-v3,
body.landing-body-v3 .landing-bots-card-v3,
body.landing-body-v3 .landing-usage-card-v3,
body:not([data-bot]) .landing-hero-card-v3,
body:not([data-bot]) .landing-bots-card-v3,
body:not([data-bot]) .landing-usage-card-v3 {
  border: 1px solid var(--saas-border) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.058), rgba(255,255,255,0.027)),
    rgba(15, 18, 27, 0.78) !important;
  box-shadow:
    var(--saas-shadow),
    inset 0 1px 0 rgba(255,255,255,0.045) !important;
  backdrop-filter: blur(22px) !important;
  border-radius: var(--saas-radius-xl) !important;
}

body.landing-body-v3 .landing-hero-card-v3,
body:not([data-bot]) .landing-hero-card-v3 {
  padding: clamp(22px, 3vw, 34px) !important;
}

body.landing-body-v3 .landing-hero-copy-v3 h1,
body:not([data-bot]) .landing-hero-copy-v3 h1 {
  letter-spacing: -0.055em !important;
  line-height: 0.98 !important;
  font-weight: 820 !important;
  color: #fff !important;
}

body.landing-body-v3 .landing-hero-copy-v3 p,
body:not([data-bot]) .landing-hero-copy-v3 p {
  color: var(--saas-muted) !important;
}

body.landing-body-v3 .landing-kicker-v3,
body.landing-body-v3 .landing-section-kicker-v3,
body:not([data-bot]) .landing-kicker-v3,
body:not([data-bot]) .landing-section-kicker-v3 {
  color: var(--saas-muted-2) !important;
  letter-spacing: 0.16em !important;
}


/* ---------- 6) Landing Bot-Karten: gleichmäßig, aber nicht eingesperrt ---------- */

body.landing-body-v3 .bot-grid-v3,
body:not([data-bot]) .bot-grid-v3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

body.landing-body-v3 .bot-select-card-v3,
body:not([data-bot]) .bot-select-card-v3 {
  position: relative !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
  padding: 22px !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  border: 1px solid rgba(255,255,255,0.082) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.024)),
    rgba(13, 16, 24, 0.86) !important;
  box-shadow:
    0 16px 46px rgba(0,0,0,0.24),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transform: none !important;
}

body.landing-body-v3 .bot-select-card-v3::before,
body:not([data-bot]) .bot-select-card-v3::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: rgba(var(--card-accent-rgb), 0.82) !important;
  box-shadow: 0 0 18px rgba(var(--card-accent-rgb), 0.20) !important;
}

body.landing-body-v3 .bot-select-card-v3::after,
body:not([data-bot]) .bot-select-card-v3::after {
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at 92% 0%, rgba(var(--card-accent-rgb), 0.09), transparent 36%) !important;
  opacity: 1 !important;
}

body.landing-body-v3 .bot-select-card-v3:hover,
body:not([data-bot]) .bot-select-card-v3:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(var(--card-accent-rgb), 0.24) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.064), rgba(255,255,255,0.028)),
    rgba(14, 17, 26, 0.91) !important;
  box-shadow:
    0 20px 58px rgba(0,0,0,0.30),
    0 0 0 1px rgba(var(--card-accent-rgb), 0.04),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

body.landing-body-v3 .bot-select-top-v3,
body:not([data-bot]) .bot-select-top-v3 {
  min-height: 54px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 14px !important;
  margin: 0 !important;
}

body.landing-body-v3 .bot-select-name-v3,
body:not([data-bot]) .bot-select-name-v3 {
  color: #fff !important;
  font-size: 1.22rem !important;
  font-weight: 820 !important;
  letter-spacing: -0.035em !important;
}

body.landing-body-v3 .bot-select-title-v3,
body:not([data-bot]) .bot-select-title-v3 {
  color: rgba(var(--card-accent-rgb), 0.82) !important;
  font-weight: 650 !important;
}

body.landing-body-v3 .bot-status-badge-v3,
body:not([data-bot]) .bot-status-badge-v3 {
  color: rgba(245,247,251,0.82) !important;
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(var(--card-accent-rgb), 0.18) !important;
  box-shadow: none !important;
}

body.landing-body-v3 .bot-select-description-v3,
body:not([data-bot]) .bot-select-description-v3 {
  min-height: 92px !important;
  margin: 0 !important;
  color: var(--saas-muted) !important;
  font-size: 0.94rem !important;
  line-height: 1.58 !important;
  font-weight: 560 !important;
}


/* ---------- 7) Capability Chips ---------- */

body.landing-body-v3 .bot-capabilities-v3,
body:not([data-bot]) .bot-capabilities-v3 {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: -3px !important;
}

body.landing-body-v3 .bot-capabilities-v3 span,
body:not([data-bot]) .bot-capabilities-v3 span {
  display: inline-flex !important;
  align-items: center !important;
  height: 26px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  color: rgba(245,247,251,0.78) !important;
  background: rgba(255,255,255,0.042) !important;
  border: 1px solid rgba(var(--card-accent-rgb), 0.14) !important;
  font-size: 0.78rem !important;
  font-weight: 680 !important;
}


/* ---------- 8) Prompt-Tipp dezenter ---------- */

body.landing-body-v3 .bot-prompt-tip-v3,
body:not([data-bot]) .bot-prompt-tip-v3 {
  min-height: 112px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  color: var(--saas-muted) !important;
  background: rgba(255,255,255,0.033) !important;
  border: 1px solid rgba(255,255,255,0.064) !important;
}

body.landing-body-v3 .bot-prompt-tip-v3 strong,
body:not([data-bot]) .bot-prompt-tip-v3 strong {
  color: rgba(255,255,255,0.88) !important;
}

body.landing-body-v3 .bot-prompt-tip-v3 p,
body:not([data-bot]) .bot-prompt-tip-v3 p {
  margin: 8px 0 0 !important;
  color: var(--saas-muted) !important;
}


/* ---------- 9) Landing Buttons einheitlich ---------- */

body.landing-body-v3 .bot-meta-v3,
body:not([data-bot]) .bot-meta-v3 {
  margin-top: auto !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  min-height: 44px !important;
}

body.landing-body-v3 .bot-meta-v3 > span,
body:not([data-bot]) .bot-meta-v3 > span {
  color: var(--saas-muted-2) !important;
  min-width: 0 !important;
  line-height: 1.25 !important;
}

body.landing-body-v3 .bot-actions-v3,
body:not([data-bot]) .bot-actions-v3 {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

body.landing-body-v3 .bot-secondary-link-v3,
body.landing-body-v3 .bot-open-link-v3,
body:not([data-bot]) .bot-secondary-link-v3,
body:not([data-bot]) .bot-open-link-v3 {
  height: 38px !important;
  min-height: 38px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  font-size: 0.9rem !important;
  box-sizing: border-box !important;
}

body.landing-body-v3 .bot-secondary-link-v3,
body:not([data-bot]) .bot-secondary-link-v3 {
  min-width: 108px !important;
  padding: 0 14px !important;
  color: rgba(245,247,251,0.82) !important;
  background: rgba(255,255,255,0.045) !important;
  border: 1px solid rgba(255,255,255,0.085) !important;
}

body.landing-body-v3 .bot-open-link-v3,
body:not([data-bot]) .bot-open-link-v3 {
  min-width: 122px !important;
  padding: 0 16px !important;
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(var(--card-accent-rgb), 0.88), var(--card-accent-2)) !important;
  border: 1px solid rgba(var(--card-accent-rgb), 0.22) !important;
  box-shadow:
    0 12px 26px rgba(var(--card-accent-rgb), 0.16),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

body.landing-body-v3 .bot-secondary-link-v3:hover,
body.landing-body-v3 .bot-open-link-v3:hover,
body:not([data-bot]) .bot-secondary-link-v3:hover,
body:not([data-bot]) .bot-open-link-v3:hover {
  transform: translateY(-1px) !important;
}


/* ---------- 10) Letzte Chats: arbeiten, aber clean ---------- */

body.landing-body-v3 .bot-card-chats-v3,
body:not([data-bot]) .bot-card-chats-v3 {
  margin: 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.065) !important;
  min-height: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
}

body.landing-body-v3 .bot-card-chats-v3 summary,
body:not([data-bot]) .bot-card-chats-v3 summary {
  min-height: 40px !important;
  border-radius: 16px !important;
  padding: 0 10px 0 14px !important;
  color: rgba(255,255,255,0.88) !important;
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.065) !important;
  cursor: pointer !important;
}

body.landing-body-v3 .bot-card-chats-v3:not([open]) .bot-card-chats-list-v3,
body:not([data-bot]) .bot-card-chats-v3:not([open]) .bot-card-chats-list-v3 {
  display: none !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.landing-body-v3 .bot-card-chats-v3[open] .bot-card-chats-list-v3,
body:not([data-bot]) .bot-card-chats-v3[open] .bot-card-chats-list-v3 {
  display: grid !important;
  gap: 8px !important;
  max-height: 180px !important;
  overflow-y: auto !important;
  margin-top: 10px !important;
  padding-right: 2px !important;
}

body.landing-body-v3 .bot-card-chat-item-v3,
body:not([data-bot]) .bot-card-chat-item-v3 {
  border-radius: 15px !important;
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(255,255,255,0.064) !important;
}

body.landing-body-v3 .bot-card-chat-item-v3:hover,
body:not([data-bot]) .bot-card-chat-item-v3:hover {
  background: rgba(var(--card-accent-rgb), 0.075) !important;
  border-color: rgba(var(--card-accent-rgb), 0.16) !important;
}

body.landing-body-v3 .bot-card-chat-title-v3,
body:not([data-bot]) .bot-card-chat-title-v3 {
  color: rgba(255,255,255,0.86) !important;
}

body.landing-body-v3 .bot-card-chat-meta-v3,
body:not([data-bot]) .bot-card-chat-meta-v3 {
  color: var(--saas-muted-2) !important;
}


/* ---------- 11) Usage Card als Dashboard-Kachel ---------- */

body.landing-body-v3 .landing-usage-card-v3,
body:not([data-bot]) .landing-usage-card-v3 {
  overflow: hidden !important;
}

@media (min-width: 920px) {
  body.landing-body-v3 .landing-usage-card-v3,
  body:not([data-bot]) .landing-usage-card-v3 {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.85fr) minmax(250px, 0.65fr) minmax(420px, 1.15fr) !important;
    gap: 22px !important;
    align-items: start !important;
  }

  body.landing-body-v3 .landing-usage-head-v3,
  body:not([data-bot]) .landing-usage-head-v3 {
    margin: 0 !important;
  }

  body.landing-body-v3 .landing-usage-cost-v3,
  body:not([data-bot]) .landing-usage-cost-v3 {
    margin: 0 !important;
    align-self: center !important;
  }

  body.landing-body-v3 .landing-usage-stats-v3,
  body:not([data-bot]) .landing-usage-stats-v3 {
    margin: 0 !important;
  }

  body.landing-body-v3 .landing-usage-details-v3,
  body:not([data-bot]) .landing-usage-details-v3 {
    grid-column: 1 / -1 !important;
    margin-top: 4px !important;
  }
}

body.landing-body-v3 .landing-usage-cost-v3,
body:not([data-bot]) .landing-usage-cost-v3 {
  font-weight: 820 !important;
  letter-spacing: -0.052em !important;
  color: #fff !important;
}

body.landing-body-v3 .landing-usage-stats-v3 > div,
body:not([data-bot]) .landing-usage-stats-v3 > div {
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.064) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

body.landing-body-v3 .usage-cost-badge-v3,
body:not([data-bot]) .usage-cost-badge-v3 {
  width: auto !important;
  min-width: 178px !important;
  max-width: 260px !important;
  min-height: 44px !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  justify-content: center !important;
  text-align: center !important;
  white-space: normal !important;
  line-height: 1.12 !important;
  font-weight: 780 !important;
}

body.landing-body-v3 .landing-usage-card-v3.usage-low-v3 .usage-cost-badge-v3,
body:not([data-bot]) .landing-usage-card-v3.usage-low-v3 .usage-cost-badge-v3 {
  color: #dffbea !important;
  background: rgba(59, 211, 132, 0.085) !important;
  border-color: rgba(59, 211, 132, 0.16) !important;
}

body.landing-body-v3 .landing-usage-card-v3.usage-mid-v3 .usage-cost-badge-v3,
body:not([data-bot]) .landing-usage-card-v3.usage-mid-v3 .usage-cost-badge-v3 {
  color: #f4dfad !important;
  background: rgba(255, 190, 90, 0.085) !important;
  border-color: rgba(255, 190, 90, 0.16) !important;
}

body.landing-body-v3 .landing-usage-card-v3.usage-high-v3 .usage-cost-badge-v3,
body:not([data-bot]) .landing-usage-card-v3.usage-high-v3 .usage-cost-badge-v3 {
  color: #ffd8d8 !important;
  background: rgba(255, 95, 95, 0.09) !important;
  border-color: rgba(255, 95, 95, 0.17) !important;
}


/* ---------- 12) Selects greifiger, aber clean ---------- */

body.landing-body-v3 .landing-select-wrap-v3,
body.landing-body-v3 .landing-select-wrap-v3 select,
body:not([data-bot]) .landing-select-wrap-v3,
body:not([data-bot]) .landing-select-wrap-v3 select {
  cursor: pointer !important;
}

body.landing-body-v3 .landing-select-wrap-v3,
body:not([data-bot]) .landing-select-wrap-v3 {
  border-radius: 16px !important;
  background: rgba(255,255,255,0.045) !important;
  border-color: rgba(255,255,255,0.085) !important;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease !important;
}

body.landing-body-v3 .landing-select-wrap-v3:hover,
body:not([data-bot]) .landing-select-wrap-v3:hover {
  transform: translateY(-1px) !important;
  background: rgba(255,255,255,0.068) !important;
  border-color: rgba(255,255,255,0.15) !important;
  box-shadow: var(--saas-shadow-soft) !important;
}

body.landing-body-v3 .landing-select-wrap-v3:focus-within,
body:not([data-bot]) .landing-select-wrap-v3:focus-within {
  border-color: rgba(141, 124, 255, 0.34) !important;
  box-shadow:
    0 0 0 3px rgba(141, 124, 255, 0.105),
    var(--saas-shadow-soft) !important;
}


/* ---------- 13) Chat-Seiten: Panels clean ---------- */

body[data-bot] .bot-hero,
body[data-bot] .main-panel,
body[data-bot] .app-sidebar {
  border-color: var(--saas-border) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.024)),
    rgba(15, 18, 27, 0.78) !important;
  box-shadow:
    var(--saas-shadow),
    inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

body[data-bot] .topbar,
body[data-bot] .composer {
  background:
    linear-gradient(180deg, rgba(12, 14, 21, 0.94), rgba(10, 12, 18, 0.92)) !important;
  border-color: rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(18px) !important;
}

body[data-bot] .topbar-title,
body[data-bot] .brand-title {
  color: #fff !important;
  text-shadow: none !important;
  letter-spacing: -0.035em !important;
}

body[data-bot] .topbar-subtitle,
body[data-bot] .bot-hero-text,
body[data-bot] .sidebar-label,
body[data-bot] .message-meta {
  color: var(--saas-muted) !important;
}

body[data-bot] .sidebar-card,
body[data-bot] .stat-card {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(255,255,255,0.065) !important;
}

body[data-bot] .badge {
  background: rgba(255,255,255,0.045) !important;
  border-color: rgba(255,255,255,0.075) !important;
  color: rgba(245,247,251,0.78) !important;
}

body[data-bot] .badge.is-online {
  color: rgba(223,251,234,0.92) !important;
  border-color: rgba(59,211,132,0.15) !important;
  background: rgba(59,211,132,0.075) !important;
}

body[data-bot] .badge.is-offline {
  color: rgba(255,216,216,0.9) !important;
  border-color: rgba(255,95,95,0.15) !important;
  background: rgba(255,95,95,0.075) !important;
}


/* ---------- 14) Sidebar: aktiv sichtbar, aber nicht knallig ---------- */

body[data-bot] .bot-switch-item,
body[data-bot] .conversation-item {
  color: rgba(245,247,251,0.88) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.046), rgba(255,255,255,0.024)) !important;
  border-color: rgba(255,255,255,0.075) !important;
  box-shadow: none !important;
}

body[data-bot] .bot-switch-item.active {
  color: #fff !important;
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),0.082), rgba(255,255,255,0.028)) !important;
  border-color: rgba(var(--accent-rgb),0.22) !important;
  box-shadow:
    inset 3px 0 0 rgba(var(--accent-rgb),0.78),
    inset 0 1px 0 rgba(255,255,255,0.035) !important;
}

body[data-bot] .conversation-row.active .conversation-item {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),0.075), rgba(255,255,255,0.024)) !important;
  border-color: rgba(var(--accent-rgb),0.18) !important;
  box-shadow:
    inset 2px 0 0 rgba(var(--accent-rgb),0.62) !important;
}

body[data-bot] .bot-switch-item:hover,
body[data-bot] .conversation-item:hover {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),0.07), rgba(255,255,255,0.03)) !important;
  border-color: rgba(var(--accent-rgb),0.18) !important;
}

body[data-bot] .bot-switch-name,
body[data-bot] .conversation-item span {
  color: rgba(255,255,255,0.88) !important;
}

body[data-bot] .bot-switch-item small,
body[data-bot] .conversation-item small {
  color: var(--saas-muted-2) !important;
}


/* ---------- 15) Chat-Bubbles und Composer ---------- */

body[data-bot] .message.assistant .bubble {
  background: rgba(255,255,255,0.045) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: none !important;
}

body[data-bot] .message.user .bubble {
  background:
    linear-gradient(180deg, rgba(var(--accent-rgb),0.135), rgba(255,255,255,0.045)) !important;
  border-color: rgba(var(--accent-rgb),0.18) !important;
  box-shadow: none !important;
}

body[data-bot] .composer-form,
body[data-bot] .composer-form-modern {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(255,255,255,0.075) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 14px 42px rgba(0,0,0,0.20) !important;
}

body[data-bot] .composer textarea {
  background: transparent !important;
  border-color: transparent !important;
  color: #fff !important;
}

body[data-bot] .composer textarea::placeholder {
  color: rgba(202,208,222,0.48) !important;
}

body[data-bot] #sendBtn:not(.is-stop),
body[data-bot] .btn.primary {
  color: #fff !important;
  background:
    linear-gradient(135deg, rgba(var(--accent-rgb), 0.92), var(--accent-2)) !important;
  border-color: rgba(var(--accent-rgb), 0.22) !important;
  box-shadow:
    0 12px 28px rgba(var(--accent-rgb),0.14),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
}

body[data-bot] #sendBtn.is-stop {
  background: rgba(255,95,95,0.105) !important;
  color: #ffd7d7 !important;
  border-color: rgba(255,95,95,0.18) !important;
  box-shadow: none !important;
}


/* ---------- 16) Codeblocks clean ---------- */

body[data-bot] .code-block {
  background: #0b0e15 !important;
  border-color: rgba(255,255,255,0.075) !important;
  box-shadow: none !important;
}

body[data-bot] .code-header {
  background: rgba(255,255,255,0.035) !important;
  border-color: rgba(255,255,255,0.065) !important;
}

body[data-bot] .copy-icon-btn,
body[data-bot] .copy-code-btn {
  background: rgba(255,255,255,0.055) !important;
  border-color: rgba(255,255,255,0.075) !important;
  color: rgba(255,255,255,0.88) !important;
}


/* ---------- 17) Responsiveness ---------- */

@media (max-width: 1180px) {
  body.landing-body-v3 .bot-grid-v3,
  body:not([data-bot]) .bot-grid-v3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.landing-body-v3 .landing-usage-card-v3,
  body:not([data-bot]) .landing-usage-card-v3 {
    display: block !important;
  }
}

@media (max-width: 820px) {
  body.landing-body-v3 .landing-page-v3,
  body:not([data-bot]) .landing-page-v3 {
    padding: 12px !important;
    padding-bottom: max(32px, env(safe-area-inset-bottom)) !important;
  }

  body.landing-body-v3 .bot-grid-v3,
  body:not([data-bot]) .bot-grid-v3 {
    grid-template-columns: 1fr !important;
  }

  body.landing-body-v3 .landing-hero-top-v3,
  body:not([data-bot]) .landing-hero-top-v3 {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.landing-body-v3 .landing-hero-actions-v3,
  body:not([data-bot]) .landing-hero-actions-v3 {
    width: 100% !important;
    min-width: 0 !important;
  }

  body.landing-body-v3 .bot-select-card-v3,
  body:not([data-bot]) .bot-select-card-v3 {
    padding: 18px !important;
  }

  body.landing-body-v3 .bot-select-description-v3,
  body:not([data-bot]) .bot-select-description-v3,
  body.landing-body-v3 .bot-prompt-tip-v3,
  body:not([data-bot]) .bot-prompt-tip-v3 {
    min-height: 0 !important;
  }

  body.landing-body-v3 .bot-meta-v3,
  body:not([data-bot]) .bot-meta-v3 {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  body.landing-body-v3 .bot-actions-v3,
  body:not([data-bot]) .bot-actions-v3 {
    width: 100% !important;
    flex-wrap: wrap !important;
  }

  body.landing-body-v3 .bot-secondary-link-v3,
  body.landing-body-v3 .bot-open-link-v3,
  body:not([data-bot]) .bot-secondary-link-v3,
  body:not([data-bot]) .bot-open-link-v3 {
    flex: 1 1 140px !important;
  }

  body.landing-body-v3 .usage-cost-badge-v3,
  body:not([data-bot]) .usage-cost-badge-v3 {
    width: 100% !important;
    max-width: none !important;
  }
}


/* ---------- 18) Reduced Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
  }
}
/* =========================================================
   SIDEBAR DELETE BUTTON FIX — Mülltonne bleibt eindeutig rot
   GANZ UNTEN in styles.css einfügen.
   ========================================================= */

body[data-bot] .conversation-delete-btn,
body[data-bot] .delete-conversation-btn,
body[data-bot] .conversation-trash-btn {
  color: rgba(255, 130, 130, 0.92) !important;
  background: rgba(255, 95, 95, 0.075) !important;
  border-color: rgba(255, 95, 95, 0.14) !important;
  box-shadow: none !important;
}

body[data-bot] .conversation-delete-btn:hover,
body[data-bot] .delete-conversation-btn:hover,
body[data-bot] .conversation-trash-btn:hover {
  color: #ffd7d7 !important;
  background: rgba(255, 95, 95, 0.15) !important;
  border-color: rgba(255, 95, 95, 0.28) !important;
  box-shadow:
    0 10px 24px rgba(255, 95, 95, 0.08),
    inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Wichtig: Wenn die ganze Chat-Zeile gehovert/aktiv ist, darf die Mülltonne NICHT botfarben werden */
body[data-bot] .conversation-row:hover .conversation-delete-btn,
body[data-bot] .conversation-row.active .conversation-delete-btn,
body[data-bot] .conversation-row:hover .delete-conversation-btn,
body[data-bot] .conversation-row.active .delete-conversation-btn,
body[data-bot] .conversation-row:hover .conversation-trash-btn,
body[data-bot] .conversation-row.active .conversation-trash-btn {
  color: rgba(255, 130, 130, 0.92) !important;
  background: rgba(255, 95, 95, 0.075) !important;
  border-color: rgba(255, 95, 95, 0.14) !important;
}

/* Nur direktes Hover auf der Mülltonne wird stärker rot */
body[data-bot] .conversation-row .conversation-delete-btn:hover,
body[data-bot] .conversation-row .delete-conversation-btn:hover,
body[data-bot] .conversation-row .conversation-trash-btn:hover {
  color: #ffd7d7 !important;
  background: rgba(255, 95, 95, 0.16) !important;
  border-color: rgba(255, 95, 95, 0.30) !important;
  transform: translateY(-1px) !important;
}

/* SVG/Icon in der Mülltonne erbt immer Rot */
body[data-bot] .conversation-delete-btn svg,
body[data-bot] .delete-conversation-btn svg,
body[data-bot] .conversation-trash-btn svg {
  color: inherit !important;
  stroke: currentColor !important;
}
/* =========================================================
   LANDING PREMIUM POLISH — Empty States, Hero Stats,
   Kostenhinweis, Skeletons, Systemstatus
   GANZ UNTEN in styles.css einfügen.
   ========================================================= */


/* ---------- Hero Mini-Stats ---------- */

body.landing-body-v3 .landing-hero-actions-v3,
body:not([data-bot]) .landing-hero-actions-v3 {
  gap: 10px !important;
}

body.landing-body-v3 .landing-hero-stats-v3,
body:not([data-bot]) .landing-hero-stats-v3 {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.landing-body-v3 .landing-hero-stat-v3,
body:not([data-bot]) .landing-hero-stat-v3 {
  min-height: 58px;
  padding: 10px 12px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.026));
  border: 1px solid rgba(255,255,255,0.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.035);
}

body.landing-body-v3 .landing-hero-stat-v3 span,
body:not([data-bot]) .landing-hero-stat-v3 span {
  display: block;
  color: rgba(202,208,222,0.54);
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 5px;
}

body.landing-body-v3 .landing-hero-stat-v3 strong,
body:not([data-bot]) .landing-hero-stat-v3 strong {
  display: block;
  color: rgba(255,255,255,0.92);
  font-size: 1.02rem;
  line-height: 1.1;
  font-weight: 820;
  letter-spacing: -0.035em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ---------- Kostenhinweis ---------- */

body.landing-body-v3 .landing-cost-hint-v3,
body:not([data-bot]) .landing-cost-hint-v3 {
  margin: -4px 0 18px;
  max-width: 760px;
  color: rgba(202,208,222,0.54);
  font-size: 0.86rem;
  line-height: 1.55;
}

body.landing-body-v3 .landing-usage-card-v3.is-loading-v3 .landing-usage-cost-v3,
body:not([data-bot]) .landing-usage-card-v3.is-loading-v3 .landing-usage-cost-v3,
body.landing-body-v3 .landing-usage-card-v3.is-loading-v3 .landing-usage-stats-v3 > div,
body:not([data-bot]) .landing-usage-card-v3.is-loading-v3 .landing-usage-stats-v3 > div {
  position: relative;
  overflow: hidden;
}

body.landing-body-v3 .landing-usage-card-v3.is-loading-v3 .landing-usage-cost-v3::after,
body:not([data-bot]) .landing-usage-card-v3.is-loading-v3 .landing-usage-cost-v3::after,
body.landing-body-v3 .landing-usage-card-v3.is-loading-v3 .landing-usage-stats-v3 > div::after,
body:not([data-bot]) .landing-usage-card-v3.is-loading-v3 .landing-usage-stats-v3 > div::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: translateX(-100%);
  animation: landingSkeletonShimmer 1.15s ease-in-out infinite;
  pointer-events: none;
}


/* ---------- Bot Loading Skeletons ---------- */

body.landing-body-v3 .landing-skeleton-card-v3,
body:not([data-bot]) .landing-skeleton-card-v3 {
  min-height: 360px;
  border-radius: 24px;
  padding: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.024)),
    rgba(13, 16, 24, 0.86);
  border: 1px solid rgba(255,255,255,0.075);
  overflow: hidden;
}

body.landing-body-v3 .landing-skeleton-line-v3,
body.landing-body-v3 .landing-skeleton-box-v3,
body.landing-body-v3 .landing-skeleton-pill-v3,
body:not([data-bot]) .landing-skeleton-line-v3,
body:not([data-bot]) .landing-skeleton-box-v3,
body:not([data-bot]) .landing-skeleton-pill-v3 {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.055);
  border-radius: 999px;
}

body.landing-body-v3 .landing-skeleton-line-v3,
body:not([data-bot]) .landing-skeleton-line-v3 {
  height: 16px;
  margin-bottom: 12px;
}

body.landing-body-v3 .landing-skeleton-line-v3.is-short,
body:not([data-bot]) .landing-skeleton-line-v3.is-short {
  width: 44%;
}

body.landing-body-v3 .landing-skeleton-box-v3,
body:not([data-bot]) .landing-skeleton-box-v3 {
  height: 112px;
  border-radius: 18px;
  margin: 20px 0 18px;
}

body.landing-body-v3 .landing-skeleton-row-v3,
body:not([data-bot]) .landing-skeleton-row-v3 {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

body.landing-body-v3 .landing-skeleton-pill-v3,
body:not([data-bot]) .landing-skeleton-pill-v3 {
  width: 112px;
  height: 38px;
}

body.landing-body-v3 .landing-skeleton-line-v3::after,
body.landing-body-v3 .landing-skeleton-box-v3::after,
body.landing-body-v3 .landing-skeleton-pill-v3::after,
body:not([data-bot]) .landing-skeleton-line-v3::after,
body:not([data-bot]) .landing-skeleton-box-v3::after,
body:not([data-bot]) .landing-skeleton-pill-v3::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  transform: translateX(-100%);
  animation: landingSkeletonShimmer 1.15s ease-in-out infinite;
}


/* ---------- Chatlist Skeletons ---------- */

body.landing-body-v3 .bot-card-chat-skeletons-v3,
body:not([data-bot]) .bot-card-chat-skeletons-v3 {
  display: grid;
  gap: 8px;
}

body.landing-body-v3 .bot-chat-skeleton-v3,
body:not([data-bot]) .bot-chat-skeleton-v3 {
  height: 48px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.055);
}

body.landing-body-v3 .bot-chat-skeleton-v3::after,
body:not([data-bot]) .bot-chat-skeleton-v3::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  transform: translateX(-100%);
  animation: landingSkeletonShimmer 1.15s ease-in-out infinite;
}


/* ---------- Bessere Empty States ---------- */

body.landing-body-v3 .bot-card-empty-premium-v3,
body:not([data-bot]) .bot-card-empty-premium-v3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border-radius: 16px;
  color: rgba(202,208,222,0.68);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.044), rgba(255,255,255,0.024));
  border: 1px dashed rgba(255,255,255,0.12);
}

body.landing-body-v3 .bot-card-empty-premium-v3 strong,
body:not([data-bot]) .bot-card-empty-premium-v3 strong {
  color: rgba(255,255,255,0.88);
  font-size: 0.94rem;
}

body.landing-body-v3 .bot-card-empty-premium-v3 span,
body:not([data-bot]) .bot-card-empty-premium-v3 span {
  color: rgba(202,208,222,0.56);
  font-size: 0.86rem;
  line-height: 1.45;
}

body.landing-body-v3 .bot-card-empty-premium-v3 a,
body:not([data-bot]) .bot-card-empty-premium-v3 a {
  margin-top: 6px;
  width: fit-content;
  text-decoration: none;
  color: rgba(255,255,255,0.9);
  font-size: 0.86rem;
  font-weight: 760;
}

body.landing-body-v3 .bot-card-empty-premium-v3 a:hover,
body:not([data-bot]) .bot-card-empty-premium-v3 a:hover {
  color: #fff;
}


body.landing-body-v3 .landing-system-item-v3[data-bot="albert"],
body:not([data-bot]) .landing-system-item-v3[data-bot="albert"] {
  --card-accent-rgb: 141, 124, 255;
}

body.landing-body-v3 .landing-system-item-v3[data-bot="stephen"],
body:not([data-bot]) .landing-system-item-v3[data-bot="stephen"] {
  --card-accent-rgb: 72, 199, 238;
}

body.landing-body-v3 .landing-system-item-v3[data-bot="jeffrey"],
body:not([data-bot]) .landing-system-item-v3[data-bot="jeffrey"] {
  --card-accent-rgb: 59, 211, 132;
}

body.landing-body-v3 .landing-system-item-v3:hover,
body:not([data-bot]) .landing-system-item-v3:hover {
  transform: translateY(-1px);
  background: rgba(var(--card-accent-rgb), 0.065);
  border-color: rgba(var(--card-accent-rgb), 0.16);
}

body.landing-body-v3 .landing-system-dot-v3,
body:not([data-bot]) .landing-system-dot-v3 {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(var(--card-accent-rgb), 0.92);
  box-shadow: 0 0 14px rgba(var(--card-accent-rgb), 0.24);
}

body.landing-body-v3 .landing-system-main-v3,
body:not([data-bot]) .landing-system-main-v3 {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.landing-body-v3 .landing-system-main-v3 strong,
body:not([data-bot]) .landing-system-main-v3 strong {
  color: rgba(255,255,255,0.92);
  font-size: 0.94rem;
}

body.landing-body-v3 .landing-system-main-v3 small,
body:not([data-bot]) .landing-system-main-v3 small {
  color: rgba(202,208,222,0.52);
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.landing-body-v3 .landing-system-state-v3,
body:not([data-bot]) .landing-system-state-v3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  color: rgba(255,255,255,0.76);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.065);
  font-size: 0.76rem;
  font-weight: 760;
}

body.landing-body-v3 .landing-system-state-v3.is-online,
body:not([data-bot]) .landing-system-state-v3.is-online {
  color: rgba(223,251,234,0.9);
  background: rgba(59,211,132,0.075);
  border-color: rgba(59,211,132,0.15);
}

body.landing-body-v3 .landing-system-state-v3.is-offline,
body:not([data-bot]) .landing-system-state-v3.is-offline {
  color: rgba(202,208,222,0.7);
}


/* ---------- Animation ---------- */

@keyframes landingSkeletonShimmer {
  100% {
    transform: translateX(100%);
  }
}


/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  body.landing-body-v3 .landing-hero-stats-v3,
  body:not([data-bot]) .landing-hero-stats-v3,
  body.landing-body-v3 .landing-system-grid-v3,
  body:not([data-bot]) .landing-system-grid-v3 {
    grid-template-columns: 1fr;
  }

  body.landing-body-v3 .landing-system-head-v3,
  body:not([data-bot]) .landing-system-head-v3 {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 560px) {
  body.landing-body-v3 .landing-hero-stats-v3,
  body:not([data-bot]) .landing-hero-stats-v3 {
    grid-template-columns: 1fr;
  }

  body.landing-body-v3 .landing-system-card-v3,
  body:not([data-bot]) .landing-system-card-v3 {
    padding: 18px;
    border-radius: 22px;
  }
}
/* =========================================================
   LANDING DASHBOARD FINAL — Hero Quick Actions,
   cleaner Usage Card, symmetric Bot Chats
   GANZ UNTEN in styles.css einfügen.
   ========================================================= */


/* ---------- 1) Hero: keine Bot-Erklärung, sondern echte Schnellzugriffe ---------- */

body.landing-body-v3 .landing-hero-context-v3,
body:not([data-bot]) .landing-hero-context-v3 {
  display: none !important;
}

body.landing-body-v3 .landing-hero-quick-v3,
body:not([data-bot]) .landing-hero-quick-v3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  max-width: 880px;
}

body.landing-body-v3 .landing-hero-quick-item-v3,
body:not([data-bot]) .landing-hero-quick-item-v3 {
  min-width: 0;
  min-height: 62px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border-radius: 18px;
  text-decoration: none;
  color: rgba(245,247,251,0.88);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.047), rgba(255,255,255,0.024));
  border: 1px solid rgba(255,255,255,0.075);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease;
}

body.landing-body-v3 .landing-hero-quick-item-v3:hover,
body:not([data-bot]) .landing-hero-quick-item-v3:hover {
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.066), rgba(255,255,255,0.03));
  border-color: rgba(255,255,255,0.13);
  box-shadow:
    0 14px 34px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.04);
}

body.landing-body-v3 .landing-hero-quick-item-v3.is-primary,
body:not([data-bot]) .landing-hero-quick-item-v3.is-primary {
  border-color: rgba(141,124,255,0.18);
  background:
    radial-gradient(circle at 100% 0%, rgba(141,124,255,0.10), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.026));
}

body.landing-body-v3 .landing-hero-quick-icon-v3,
body:not([data-bot]) .landing-hero-quick-icon-v3 {
  width: 34px;
  height: 34px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.84);
  background: rgba(255,255,255,0.052);
  border: 1px solid rgba(255,255,255,0.075);
  font-size: 1rem;
}

body.landing-body-v3 .landing-hero-quick-item-v3 strong,
body:not([data-bot]) .landing-hero-quick-item-v3 strong {
  display: block;
  color: rgba(255,255,255,0.92);
  font-size: 0.9rem;
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.landing-body-v3 .landing-hero-quick-item-v3 small,
body:not([data-bot]) .landing-hero-quick-item-v3 small {
  display: block;
  margin-top: 4px;
  color: rgba(202,208,222,0.52);
  font-size: 0.78rem;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ---------- 2) Kosten-Kachel cleaner, aber nicht gequetscht ---------- */

@media (min-width: 1180px) {
  body.landing-body-v3 .landing-usage-card-v3,
  body:not([data-bot]) .landing-usage-card-v3 {
    display: grid !important;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
    grid-template-areas:
      "head total"
      "head hint"
      "stats stats"
      "details details" !important;
    gap: 22px 34px !important;
    align-items: start !important;
    padding: 26px 28px !important;
  }

  body.landing-body-v3 .landing-usage-head-v3,
  body:not([data-bot]) .landing-usage-head-v3 {
    grid-area: head !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin: 0 !important;
  }

  body.landing-body-v3 .landing-usage-head-v3 > div:first-child,
  body:not([data-bot]) .landing-usage-head-v3 > div:first-child {
    max-width: 240px !important;
  }

  body.landing-body-v3 .landing-usage-label-v3,
  body:not([data-bot]) .landing-usage-label-v3 {
    max-width: 220px !important;
    line-height: 1.5 !important;
  }

  body.landing-body-v3 .landing-usage-filters-v3,
  body:not([data-bot]) .landing-usage-filters-v3 {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  body.landing-body-v3 .usage-cost-badge-v3,
  body:not([data-bot]) .usage-cost-badge-v3 {
    position: static !important;
    width: fit-content !important;
    min-width: 184px !important;
    max-width: 260px !important;
    margin: 2px 0 0 !important;
  }

  body.landing-body-v3 .landing-usage-cost-v3,
  body:not([data-bot]) .landing-usage-cost-v3 {
    grid-area: total !important;
    margin: 0 !important;
    align-self: end !important;
    font-size: clamp(3.1rem, 5vw, 4.65rem) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.06em !important;
  }

  body.landing-body-v3 .landing-cost-hint-v3,
  body:not([data-bot]) .landing-cost-hint-v3 {
    grid-area: hint !important;
    margin: -2px 0 0 !important;
    max-width: 760px !important;
    font-size: 0.88rem !important;
    line-height: 1.55 !important;
    color: rgba(202,208,222,0.50) !important;
  }

  body.landing-body-v3 .landing-usage-stats-v3,
  body:not([data-bot]) .landing-usage-stats-v3 {
    grid-area: stats !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 2px 0 0 !important;
  }

  body.landing-body-v3 .landing-usage-details-v3,
  body:not([data-bot]) .landing-usage-details-v3 {
    grid-area: details !important;
    margin-top: 0 !important;
  }
}


/* ---------- 3) Bot-Karten: Chatbereich symmetrischer und ruhiger ---------- */

@media (min-width: 1080px) {
  body.landing-body-v3 .bot-select-card-v3,
  body:not([data-bot]) .bot-select-card-v3 {
    display: grid !important;
    grid-template-rows:
      auto
      minmax(92px, auto)
      auto
      minmax(112px, auto)
      auto
      minmax(148px, auto) !important;
    gap: 14px !important;
  }

  body.landing-body-v3 .bot-select-description-v3,
  body:not([data-bot]) .bot-select-description-v3 {
    min-height: 92px !important;
  }

  body.landing-body-v3 .bot-prompt-tip-v3,
  body:not([data-bot]) .bot-prompt-tip-v3 {
    min-height: 112px !important;
  }

  body.landing-body-v3 .bot-meta-v3,
  body:not([data-bot]) .bot-meta-v3 {
    margin-top: 0 !important;
  }

  body.landing-body-v3 .bot-card-chats-v3,
  body:not([data-bot]) .bot-card-chats-v3 {
    display: grid !important;
    grid-template-rows: auto minmax(96px, 1fr) !important;
    align-content: start !important;
    min-height: 148px !important;
    margin-top: 0 !important;
  }

  body.landing-body-v3 .bot-card-chats-v3 summary,
  body:not([data-bot]) .bot-card-chats-v3 summary {
    min-height: 42px !important;
  }

  body.landing-body-v3 .bot-card-chats-v3[open] .bot-card-chats-list-v3,
  body:not([data-bot]) .bot-card-chats-v3[open] .bot-card-chats-list-v3 {
    display: grid !important;
    gap: 8px !important;
    max-height: none !important;
    min-height: 96px !important;
    overflow: hidden !important;
  }

  body.landing-body-v3 .bot-card-chat-item-v3,
  body:not([data-bot]) .bot-card-chat-item-v3 {
    min-height: 54px !important;
    padding: 11px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
}

body.landing-body-v3 .bot-card-chat-more-v3,
body:not([data-bot]) .bot-card-chat-more-v3 {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.022);
  color: rgba(202,208,222,0.58);
  font-size: 0.82rem;
  font-weight: 720;
}


/* ---------- 4) Responsive ---------- */

@media (max-width: 980px) {
  body.landing-body-v3 .landing-hero-quick-v3,
  body:not([data-bot]) .landing-hero-quick-v3 {
    grid-template-columns: 1fr;
    max-width: none;
  }
}

@media (max-width: 560px) {
  body.landing-body-v3 .landing-hero-quick-item-v3,
  body:not([data-bot]) .landing-hero-quick-item-v3 {
    min-height: 58px;
  }
}
/* =========================================================
   LANDING HERO + USAGE CLEANUP
   Weniger gequetschter Hero + sauberere Kostenkachel
   GANZ UNTEN in styles.css einfügen.
   ========================================================= */


/* ---------- 1) Hero wieder großzügig und zweispaltig ---------- */

body.landing-body-v3 .landing-hero-card-v3,
body:not([data-bot]) .landing-hero-card-v3 {
  min-height: 300px !important;
  padding: clamp(28px, 4vw, 44px) !important;
}

body.landing-body-v3 .landing-hero-top-v3,
body:not([data-bot]) .landing-hero-top-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 430px) !important;
  align-items: center !important;
  gap: clamp(28px, 5vw, 72px) !important;
}

body.landing-body-v3 .landing-hero-copy-v3,
body:not([data-bot]) .landing-hero-copy-v3 {
  max-width: 880px !important;
}

body.landing-body-v3 .landing-hero-copy-v3 h1,
body:not([data-bot]) .landing-hero-copy-v3 h1 {
  max-width: 900px !important;
  font-size: clamp(3rem, 5.2vw, 5.35rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.065em !important;
  margin-bottom: 18px !important;
}

body.landing-body-v3 #landingSubtitle,
body:not([data-bot]) #landingSubtitle {
  max-width: 720px !important;
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  color: rgba(202,208,222,0.64) !important;
}


/* ---------- 2) Rechte Hero-Seite als kompakter Workspace-Block ---------- */

body.landing-body-v3 .landing-hero-actions-v3,
body:not([data-bot]) .landing-hero-actions-v3 {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-self: center !important;
}

/* Mini-Stats oben ausblenden, weil sie den Hero quetschen */
body.landing-body-v3 .landing-hero-stats-v3,
body:not([data-bot]) .landing-hero-stats-v3 {
  display: none !important;
}

/* Login-Chip dezenter und nicht so dominant */
body.landing-body-v3 .landing-user-chip-v3,
body:not([data-bot]) .landing-user-chip-v3 {
  min-height: 46px !important;
  width: 100% !important;
  justify-content: center !important;
  border-radius: 18px !important;
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.075) !important;
  color: rgba(245,247,251,0.82) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025) !important;
}

/* Quick Actions rechts als 1-Spalten-Liste statt gequetschte 3er-Reihe */
body.landing-body-v3 .landing-hero-quick-v3,
body:not([data-bot]) .landing-hero-quick-v3 {
  order: -1 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 0 !important;
  max-width: none !important;
}

body.landing-body-v3 .landing-hero-quick-item-v3,
body:not([data-bot]) .landing-hero-quick-item-v3 {
  min-height: 58px !important;
  padding: 11px 13px !important;
  border-radius: 18px !important;
}

body.landing-body-v3 .landing-hero-quick-item-v3 strong,
body:not([data-bot]) .landing-hero-quick-item-v3 strong {
  font-size: 0.92rem !important;
}

body.landing-body-v3 .landing-hero-quick-item-v3 small,
body:not([data-bot]) .landing-hero-quick-item-v3 small {
  max-width: 310px !important;
}

/* Logout bleibt unten, aber ruhiger */
body.landing-body-v3 .landing-logout-btn-v3,
body:not([data-bot]) .landing-logout-btn-v3 {
  min-height: 48px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.046), rgba(255,255,255,0.024)) !important;
  border-color: rgba(255,255,255,0.075) !important;
  box-shadow: none !important;
}

body.landing-body-v3 .landing-logout-btn-v3:hover,
body:not([data-bot]) .landing-logout-btn-v3:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.064), rgba(255,255,255,0.032)) !important;
  border-color: rgba(255,255,255,0.13) !important;
}


/* ---------- 3) Kostenkachel cleaner als Dashboard-Block ---------- */

@media (min-width: 1180px) {
  body.landing-body-v3 .landing-usage-card-v3,
  body:not([data-bot]) .landing-usage-card-v3 {
    padding: 30px 32px !important;
    display: grid !important;
    grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) !important;
    grid-template-areas:
      "head main"
      "head stats"
      "details details" !important;
    gap: 26px 42px !important;
    align-items: start !important;
  }

  body.landing-body-v3 .landing-usage-head-v3,
  body:not([data-bot]) .landing-usage-head-v3 {
    grid-area: head !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    margin: 0 !important;
    padding-right: 10px !important;
  }

  body.landing-body-v3 .landing-usage-head-v3 > div:first-child,
  body:not([data-bot]) .landing-usage-head-v3 > div:first-child {
    max-width: 260px !important;
  }

  body.landing-body-v3 .landing-usage-label-v3,
  body:not([data-bot]) .landing-usage-label-v3 {
    max-width: 235px !important;
    margin-top: 10px !important;
    line-height: 1.52 !important;
    color: rgba(202,208,222,0.58) !important;
  }

  body.landing-body-v3 .landing-usage-filters-v3,
  body:not([data-bot]) .landing-usage-filters-v3 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    width: 100% !important;
  }

  body.landing-body-v3 .landing-select-wrap-v3,
  body:not([data-bot]) .landing-select-wrap-v3 {
    width: 100% !important;
  }

  body.landing-body-v3 .usage-cost-badge-v3,
  body:not([data-bot]) .usage-cost-badge-v3 {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    margin-top: 0 !important;
  }

  /* Betrag + Hinweis werden als gemeinsamer Main-Block angeordnet */
  body.landing-body-v3 .landing-usage-cost-v3,
  body:not([data-bot]) .landing-usage-cost-v3 {
    grid-area: main !important;
    margin: 0 !important;
    align-self: end !important;
    font-size: clamp(3.4rem, 5.4vw, 5.15rem) !important;
    line-height: 0.92 !important;
    letter-spacing: -0.065em !important;
  }

  body.landing-body-v3 .landing-cost-hint-v3,
  body:not([data-bot]) .landing-cost-hint-v3 {
    grid-area: main !important;
    align-self: end !important;
    margin: 98px 0 0 !important;
    max-width: 760px !important;
    color: rgba(202,208,222,0.50) !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
  }

  body.landing-body-v3 .landing-usage-stats-v3,
  body:not([data-bot]) .landing-usage-stats-v3 {
    grid-area: stats !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  body.landing-body-v3 .landing-usage-stats-v3 > div,
  body:not([data-bot]) .landing-usage-stats-v3 > div {
    min-height: 76px !important;
    padding: 15px 16px !important;
    border-radius: 18px !important;
  }

  body.landing-body-v3 .landing-usage-details-v3,
  body:not([data-bot]) .landing-usage-details-v3 {
    grid-area: details !important;
    margin-top: 2px !important;
    padding-top: 18px !important;
  }
}


/* ---------- 4) Bot-Karten Chatbereich: weniger abgeschnitten, sauberer ---------- */

@media (min-width: 1080px) {
  body.landing-body-v3 .bot-select-card-v3,
  body:not([data-bot]) .bot-select-card-v3 {
    grid-template-rows:
      auto
      minmax(88px, auto)
      auto
      minmax(108px, auto)
      auto
      auto !important;
  }

  body.landing-body-v3 .bot-card-chats-v3,
  body:not([data-bot]) .bot-card-chats-v3 {
    min-height: 0 !important;
    display: block !important;
  }

  body.landing-body-v3 .bot-card-chats-v3[open] .bot-card-chats-list-v3,
  body:not([data-bot]) .bot-card-chats-v3[open] .bot-card-chats-list-v3 {
    min-height: 0 !important;
    max-height: 150px !important;
    overflow: hidden !important;
  }
}


/* ---------- 5) Responsive: Hero nicht zerquetschen ---------- */

@media (max-width: 1180px) {
  body.landing-body-v3 .landing-hero-top-v3,
  body:not([data-bot]) .landing-hero-top-v3 {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  body.landing-body-v3 .landing-hero-actions-v3,
  body:not([data-bot]) .landing-hero-actions-v3 {
    max-width: none !important;
  }

  body.landing-body-v3 .landing-hero-quick-v3,
  body:not([data-bot]) .landing-hero-quick-v3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  body.landing-body-v3 .landing-hero-card-v3,
  body:not([data-bot]) .landing-hero-card-v3 {
    min-height: 0 !important;
  }

  body.landing-body-v3 .landing-hero-copy-v3 h1,
  body:not([data-bot]) .landing-hero-copy-v3 h1 {
    font-size: clamp(2.4rem, 12vw, 3.8rem) !important;
  }

  body.landing-body-v3 .landing-hero-quick-v3,
  body:not([data-bot]) .landing-hero-quick-v3 {
    grid-template-columns: 1fr !important;
  }
}
/* =========================================================
   EMERGENCY STABILIZER — Landing Hero + Usage Reset
   Sicherer Fix nach zu vielen Overrides.
   GANZ UNTEN in styles.css einfügen.
   ========================================================= */


/* ---------- 1) Hero wieder stabil, ruhig, nicht gequetscht ---------- */

body.landing-body-v3 .landing-hero-card-v3,
body:not([data-bot]) .landing-hero-card-v3 {
  min-height: 0 !important;
  padding: clamp(24px, 3vw, 36px) !important;
}

body.landing-body-v3 .landing-hero-top-v3,
body:not([data-bot]) .landing-hero-top-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) !important;
  align-items: center !important;
  gap: clamp(24px, 4vw, 56px) !important;
}

body.landing-body-v3 .landing-hero-copy-v3,
body:not([data-bot]) .landing-hero-copy-v3 {
  max-width: 860px !important;
}

body.landing-body-v3 .landing-hero-copy-v3 h1,
body:not([data-bot]) .landing-hero-copy-v3 h1 {
  max-width: 860px !important;
  margin: 0 0 16px !important;
  font-size: clamp(3rem, 4.8vw, 4.9rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.06em !important;
}

body.landing-body-v3 #landingSubtitle,
body:not([data-bot]) #landingSubtitle {
  max-width: 680px !important;
  margin: 0 !important;
  font-size: 1.03rem !important;
  line-height: 1.55 !important;
  color: rgba(202,208,222,0.64) !important;
}

/* Alles, was oben gerade quetscht/doppelt wirkt, erstmal ausblenden */
body.landing-body-v3 .landing-hero-quick-v3,
body:not([data-bot]) .landing-hero-quick-v3,
body.landing-body-v3 .landing-hero-stats-v3,
body:not([data-bot]) .landing-hero-stats-v3,
body.landing-body-v3 .landing-hero-context-v3,
body:not([data-bot]) .landing-hero-context-v3 {
  display: none !important;
}

/* Rechte Hero-Seite nur noch Login + Logout, sauber */
body.landing-body-v3 .landing-hero-actions-v3,
body:not([data-bot]) .landing-hero-actions-v3 {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-self: center !important;
}

body.landing-body-v3 .landing-user-chip-v3,
body:not([data-bot]) .landing-user-chip-v3,
body.landing-body-v3 .landing-logout-btn-v3,
body:not([data-bot]) .landing-logout-btn-v3 {
  width: 100% !important;
  min-height: 50px !important;
  justify-content: center !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.026)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(245,247,251,0.86) !important;
  box-shadow: none !important;
}


/* ---------- 2) Kostenkachel komplett stabilisieren ---------- */

body.landing-body-v3 .landing-usage-card-v3,
body:not([data-bot]) .landing-usage-card-v3 {
  position: relative !important;
  overflow: hidden !important;
}

/* Desktop: klare 2-Spalten-Struktur, kein Overlap */
@media (min-width: 1180px) {
  body.landing-body-v3 .landing-usage-card-v3,
  body:not([data-bot]) .landing-usage-card-v3 {
    display: grid !important;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr) !important;
    grid-template-areas:
      "head amount"
      "head hint"
      "stats stats"
      "details details" !important;
    gap: 22px 34px !important;
    align-items: start !important;
    padding: 28px 30px !important;
  }

  body.landing-body-v3 .landing-usage-head-v3,
  body:not([data-bot]) .landing-usage-head-v3 {
    grid-area: head !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  body.landing-body-v3 .landing-usage-head-v3 > div:first-child,
  body:not([data-bot]) .landing-usage-head-v3 > div:first-child {
    max-width: 280px !important;
  }

  body.landing-body-v3 .landing-usage-label-v3,
  body:not([data-bot]) .landing-usage-label-v3 {
    max-width: 250px !important;
    margin: 8px 0 0 !important;
    line-height: 1.5 !important;
    color: rgba(202,208,222,0.58) !important;
  }

  body.landing-body-v3 .landing-usage-filters-v3,
  body:not([data-bot]) .landing-usage-filters-v3 {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  body.landing-body-v3 .landing-select-wrap-v3,
  body:not([data-bot]) .landing-select-wrap-v3 {
    width: 100% !important;
    max-width: none !important;
  }

  body.landing-body-v3 .usage-cost-badge-v3,
  body:not([data-bot]) .usage-cost-badge-v3 {
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 44px !important;
    margin: 0 !important;
    padding: 10px 16px !important;
  }

  body.landing-body-v3 .landing-usage-cost-v3,
  body:not([data-bot]) .landing-usage-cost-v3 {
    grid-area: amount !important;
    position: static !important;
    z-index: auto !important;
    margin: 4px 0 0 !important;
    padding: 0 !important;
    align-self: end !important;
    font-size: clamp(3.4rem, 5.4vw, 5rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.06em !important;
    white-space: nowrap !important;
    color: #fff !important;
  }

  body.landing-body-v3 .landing-cost-hint-v3,
  body:not([data-bot]) .landing-cost-hint-v3 {
    grid-area: hint !important;
    position: static !important;
    z-index: auto !important;
    margin: -4px 0 0 !important;
    padding: 0 !important;
    max-width: 760px !important;
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    color: rgba(202,208,222,0.50) !important;
  }

  body.landing-body-v3 .landing-usage-stats-v3,
  body:not([data-bot]) .landing-usage-stats-v3 {
    grid-area: stats !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin: 4px 0 0 !important;
  }

  body.landing-body-v3 .landing-usage-stats-v3 > div,
  body:not([data-bot]) .landing-usage-stats-v3 > div {
    min-height: 74px !important;
    padding: 14px 16px !important;
    border-radius: 18px !important;
  }

  body.landing-body-v3 .landing-usage-details-v3,
  body:not([data-bot]) .landing-usage-details-v3 {
    grid-area: details !important;
    margin: 0 !important;
    padding-top: 16px !important;
  }
}

/* Kleinere Screens: bewusst simpel stapeln */
@media (max-width: 1179px) {
  body.landing-body-v3 .landing-usage-card-v3,
  body:not([data-bot]) .landing-usage-card-v3 {
    display: block !important;
    padding: 24px !important;
  }

  body.landing-body-v3 .landing-usage-head-v3,
  body:not([data-bot]) .landing-usage-head-v3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    margin: 0 0 18px !important;
  }

  body.landing-body-v3 .landing-usage-cost-v3,
  body:not([data-bot]) .landing-usage-cost-v3 {
    position: static !important;
    margin: 0 0 10px !important;
    font-size: clamp(2.8rem, 12vw, 4.5rem) !important;
    line-height: 0.95 !important;
    white-space: nowrap !important;
  }

  body.landing-body-v3 .landing-cost-hint-v3,
  body:not([data-bot]) .landing-cost-hint-v3 {
    position: static !important;
    margin: 0 0 18px !important;
  }
}


/* ---------- 3) Bot-Karten wieder nicht abschneiden ---------- */

@media (min-width: 1080px) {
  body.landing-body-v3 .bot-select-card-v3,
  body:not([data-bot]) .bot-select-card-v3 {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
  }

  body.landing-body-v3 .bot-card-chats-v3,
  body:not([data-bot]) .bot-card-chats-v3 {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
  }

  body.landing-body-v3 .bot-card-chats-v3[open] .bot-card-chats-list-v3,
  body:not([data-bot]) .bot-card-chats-v3[open] .bot-card-chats-list-v3 {
    max-height: 170px !important;
    min-height: 0 !important;
    overflow-y: auto !important;
  }
}


/* ---------- 4) Mobile Hero stabil ---------- */

@media (max-width: 1180px) {
  body.landing-body-v3 .landing-hero-top-v3,
  body:not([data-bot]) .landing-hero-top-v3 {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  body.landing-body-v3 .landing-hero-copy-v3 h1,
  body:not([data-bot]) .landing-hero-copy-v3 h1 {
    font-size: clamp(2.5rem, 8vw, 4.2rem) !important;
  }
}
/* =========================================================
   LANDING SAFE FIX
   Hero wieder wie im Screenshot von den Funktionen her,
   aber sauberer, breiter und weniger gequetscht.
   GANZ UNTEN in styles.css einfügen.
   ========================================================= */

body.landing-body-v3 .landing-hero-card-v3,
body:not([data-bot]) .landing-hero-card-v3 {
  min-height: clamp(420px, 56vh, 620px) !important;
  padding: clamp(24px, 3vw, 40px) !important;
  border-radius: 30px !important;
}

body.landing-body-v3 .landing-hero-top-v3,
body:not([data-bot]) .landing-hero-top-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 760px) 1fr !important;
  grid-template-rows: auto auto !important;
  column-gap: clamp(28px, 4vw, 72px) !important;
  row-gap: 14px !important;
  align-items: start !important;
}

/* Textblock oben links */
body.landing-body-v3 .landing-hero-copy-v3,
body:not([data-bot]) .landing-hero-copy-v3 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  max-width: 760px !important;
}

/* Überschrift ruhiger und eleganter */
body.landing-body-v3 .landing-hero-copy-v3 h1,
body:not([data-bot]) .landing-hero-copy-v3 h1 {
  max-width: 11ch !important;
  margin: 10px 0 14px !important;
  font-size: clamp(2.9rem, 4.6vw, 4.9rem) !important;
  line-height: 0.96 !important;
  letter-spacing: -0.055em !important;
  font-weight: 740 !important;
}

/* Subline etwas cleaner */
body.landing-body-v3 #landingSubtitle,
body:not([data-bot]) #landingSubtitle {
  max-width: 700px !important;
  margin: 0 !important;
  font-size: 1.02rem !important;
  line-height: 1.55 !important;
  color: rgba(202, 208, 222, 0.68) !important;
}

/* Quick Actions wieder sichtbar und als schöne vertikale Liste */
body.landing-body-v3 .landing-hero-quick-v3,
body:not([data-bot]) .landing-hero-quick-v3 {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  margin-top: 24px !important;
}

body.landing-body-v3 .landing-hero-quick-item-v3,
body:not([data-bot]) .landing-hero-quick-item-v3 {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-height: 66px !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  text-decoration: none !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

body.landing-body-v3 .landing-hero-quick-item-v3.is-primary,
body:not([data-bot]) .landing-hero-quick-item-v3.is-primary {
  border-color: rgba(124, 92, 255, 0.24) !important;
  background:
    linear-gradient(180deg, rgba(124,92,255,0.12), rgba(255,255,255,0.035)) !important;
}

body.landing-body-v3 .landing-hero-quick-item-v3:hover,
body:not([data-bot]) .landing-hero-quick-item-v3:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,0.14) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04)) !important;
}

body.landing-body-v3 .landing-hero-quick-icon-v3,
body:not([data-bot]) .landing-hero-quick-icon-v3 {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255,255,255,0.07) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(245,247,251,0.92) !important;
}

body.landing-body-v3 .landing-hero-quick-item-v3 > span:last-child,
body:not([data-bot]) .landing-hero-quick-item-v3 > span:last-child {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}

body.landing-body-v3 .landing-hero-quick-item-v3 strong,
body:not([data-bot]) .landing-hero-quick-item-v3 strong {
  font-size: 1rem !important;
  font-weight: 720 !important;
  color: rgba(245,247,251,0.96) !important;
}

body.landing-body-v3 .landing-hero-quick-item-v3 small,
body:not([data-bot]) .landing-hero-quick-item-v3 small {
  font-size: 0.88rem !important;
  color: rgba(202,208,222,0.68) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Der untere Block (Eingeloggt / Logout) soll unter den Quick Actions stehen */
body.landing-body-v3 .landing-hero-actions-v3,
body:not([data-bot]) .landing-hero-actions-v3 {
  grid-column: 1 !important;
  grid-row: 2 !important;
  width: min(100%, 760px) !important;
  max-width: 760px !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-self: start !important;
}

/* Die Mini-Stats im Hero ausblenden, die quetschen nur */
body.landing-body-v3 .landing-hero-stats-v3,
body:not([data-bot]) .landing-hero-stats-v3 {
  display: none !important;
}

/* Login/Logout optisch ruhiger */
body.landing-body-v3 .landing-user-chip-v3,
body:not([data-bot]) .landing-user-chip-v3,
body.landing-body-v3 .landing-logout-btn-v3,
body:not([data-bot]) .landing-logout-btn-v3 {
  width: 100% !important;
  min-height: 54px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 18px !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(245,247,251,0.88) !important;
  box-shadow: none !important;
}

body.landing-body-v3 .landing-logout-btn-v3:hover,
body:not([data-bot]) .landing-logout-btn-v3:hover {
  border-color: rgba(255,255,255,0.14) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.035)) !important;
}

/* Responsive */
@media (max-width: 1180px) {
  body.landing-body-v3 .landing-hero-top-v3,
  body:not([data-bot]) .landing-hero-top-v3 {
    grid-template-columns: 1fr !important;
  }

  body.landing-body-v3 .landing-hero-copy-v3,
  body:not([data-bot]) .landing-hero-copy-v3,
  body.landing-body-v3 .landing-hero-actions-v3,
  body:not([data-bot]) .landing-hero-actions-v3 {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 820px) {
  body.landing-body-v3 .landing-hero-card-v3,
  body:not([data-bot]) .landing-hero-card-v3 {
    min-height: 0 !important;
    padding: 20px !important;
  }

  body.landing-body-v3 .landing-hero-copy-v3 h1,
  body:not([data-bot]) .landing-hero-copy-v3 h1 {
    max-width: 100% !important;
    font-size: clamp(2.35rem, 10vw, 3.5rem) !important;
  }

  body.landing-body-v3 .landing-hero-quick-item-v3,
  body:not([data-bot]) .landing-hero-quick-item-v3 {
    min-height: 62px !important;
    padding: 13px 14px !important;
  }
}
/* =========================================================
   LANDING PREMIUM COMPACT HERO
   Kleiner, enger, Premium, volle Breite.
   Ganz unten in styles.css einfügen.
   ========================================================= */

body.landing-body-v3 .landing-page-v3,
body:not([data-bot]) .landing-page-v3 {
  padding: clamp(14px, 2vw, 24px) !important;
}

body.landing-body-v3 .landing-shell-v3,
body:not([data-bot]) .landing-shell-v3 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  gap: 18px !important;
}

/* Hero als kompakter Premium-Header über volle Breite */
body.landing-body-v3 .landing-hero-card-v3,
body:not([data-bot]) .landing-hero-card-v3 {
  min-height: 0 !important;
  width: 100% !important;
  padding: clamp(20px, 2.2vw, 30px) !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 88% 24%, rgba(124, 92, 255, 0.16), transparent 34%),
    radial-gradient(circle at 10% 0%, rgba(255,255,255,0.055), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,0.078), rgba(255,255,255,0.032)) !important;
  border: 1px solid rgba(255,255,255,0.095) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Ein echter Dashboard-Strip */
body.landing-body-v3 .landing-hero-top-v3,
body:not([data-bot]) .landing-hero-top-v3 {
  display: grid !important;
  grid-template-columns: minmax(280px, 1.05fr) minmax(420px, 1fr) 150px !important;
  align-items: stretch !important;
  gap: 14px !important;
}

/* Linke Begrüßung kompakt */
body.landing-body-v3 .landing-hero-copy-v3,
body:not([data-bot]) .landing-hero-copy-v3 {
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

body.landing-body-v3 .landing-kicker-v3,
body:not([data-bot]) .landing-kicker-v3 {
  margin-bottom: 12px !important;
  letter-spacing: 0.32em !important;
  font-size: 0.68rem !important;
  color: rgba(202,208,222,0.48) !important;
}

body.landing-body-v3 .landing-hero-copy-v3 h1,
body:not([data-bot]) .landing-hero-copy-v3 h1 {
  max-width: 100% !important;
  margin: 0 0 8px !important;
  font-size: clamp(2rem, 3.1vw, 3.25rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.048em !important;
  font-weight: 650 !important;
  color: rgba(248,250,252,0.96) !important;
}

body.landing-body-v3 #landingSubtitle,
body:not([data-bot]) #landingSubtitle {
  max-width: 660px !important;
  margin: 0 !important;
  font-size: 0.96rem !important;
  line-height: 1.45 !important;
  color: rgba(202,208,222,0.58) !important;
}

/* Quick Actions werden zur mittleren Premium-Fläche */
body.landing-body-v3 .landing-hero-quick-v3,
body:not([data-bot]) .landing-hero-quick-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(180px, 0.75fr) !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  align-self: stretch !important;
}

/* Gemeinsamer Premium-Kachel-Stil */
body.landing-body-v3 .landing-premium-latest-v3,
body.landing-body-v3 .landing-premium-cost-v3,
body:not([data-bot]) .landing-premium-latest-v3,
body:not([data-bot]) .landing-premium-cost-v3 {
  min-width: 0 !important;
  min-height: 116px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 17px 18px !important;
  border-radius: 22px !important;
  text-decoration: none !important;
  color: rgba(245,247,251,0.94) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.072), rgba(255,255,255,0.033)) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 16px 38px rgba(0,0,0,0.16) !important;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease !important;
}

body.landing-body-v3 .landing-premium-latest-v3:hover,
body.landing-body-v3 .landing-premium-cost-v3:hover,
body:not([data-bot]) .landing-premium-latest-v3:hover,
body:not([data-bot]) .landing-premium-cost-v3:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,0.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.042)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.07),
    0 22px 52px rgba(0,0,0,0.22) !important;
}

body.landing-body-v3 .landing-premium-latest-v3,
body:not([data-bot]) .landing-premium-latest-v3 {
  background:
    radial-gradient(circle at 100% 0%, rgba(124,92,255,0.18), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.076), rgba(255,255,255,0.034)) !important;
}

body.landing-body-v3 .landing-premium-label-v3,
body:not([data-bot]) .landing-premium-label-v3 {
  display: block !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 760 !important;
  color: rgba(202,208,222,0.48) !important;
}

body.landing-body-v3 .landing-premium-latest-v3 strong,
body.landing-body-v3 .landing-premium-cost-v3 strong,
body:not([data-bot]) .landing-premium-latest-v3 strong,
body:not([data-bot]) .landing-premium-cost-v3 strong {
  display: block !important;
  min-width: 0 !important;
  font-size: 1.08rem !important;
  line-height: 1.15 !important;
  font-weight: 760 !important;
  color: rgba(248,250,252,0.96) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.landing-body-v3 .landing-premium-latest-v3 small,
body.landing-body-v3 .landing-premium-cost-v3 small,
body:not([data-bot]) .landing-premium-latest-v3 small,
body:not([data-bot]) .landing-premium-cost-v3 small {
  display: block !important;
  min-width: 0 !important;
  font-size: 0.86rem !important;
  line-height: 1.25 !important;
  color: rgba(202,208,222,0.58) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Kosten optisch größer, aber nicht riesig */
body.landing-body-v3 .landing-premium-cost-v3 strong,
body:not([data-bot]) .landing-premium-cost-v3 strong {
  font-size: clamp(1.35rem, 1.6vw, 1.8rem) !important;
  letter-spacing: -0.035em !important;
}

body.landing-body-v3 .landing-premium-cost-v3 small,
body:not([data-bot]) .landing-premium-cost-v3 small {
  color: rgba(196,181,253,0.78) !important;
  font-weight: 720 !important;
}

/* Rechter Bereich: wirklich nur Logout */
body.landing-body-v3 .landing-hero-actions-v3,
body:not([data-bot]) .landing-hero-actions-v3 {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  gap: 0 !important;
  align-self: stretch !important;
}

/* Eingeloggt-Chip und Mini-Stats raus */
body.landing-body-v3 .landing-user-chip-v3,
body:not([data-bot]) .landing-user-chip-v3,
body.landing-body-v3 .landing-hero-stats-v3,
body:not([data-bot]) .landing-hero-stats-v3 {
  display: none !important;
}

/* Logout als dezenter Premium-Button */
body.landing-body-v3 .landing-logout-btn-v3,
body:not([data-bot]) .landing-logout-btn-v3 {
  width: 100% !important;
  min-height: 116px !important;
  height: 100% !important;
  padding: 0 18px !important;
  border-radius: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 0.92rem !important;
  font-weight: 760 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.058), rgba(255,255,255,0.026)) !important;
  border: 1px solid rgba(255,255,255,0.085) !important;
  color: rgba(245,247,251,0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 16px 38px rgba(0,0,0,0.12) !important;
}

body.landing-body-v3 .landing-logout-btn-v3:hover,
body:not([data-bot]) .landing-logout-btn-v3:hover {
  transform: translateY(-1px) !important;
  color: rgba(255,255,255,0.94) !important;
  border-color: rgba(255,255,255,0.15) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.083), rgba(255,255,255,0.035)) !important;
}

body.landing-body-v3 .landing-logout-btn-v3 span,
body:not([data-bot]) .landing-logout-btn-v3 span {
  opacity: 0.72 !important;
}

/* Untere Karten nutzen ebenfalls die volle Breite schöner */
body.landing-body-v3 .landing-bots-card-v3,
body:not([data-bot]) .landing-bots-card-v3,
body.landing-body-v3 .landing-usage-card-v3,
body:not([data-bot]) .landing-usage-card-v3,
body.landing-body-v3 .landing-system-card-v3,
body:not([data-bot]) .landing-system-card-v3 {
  width: 100% !important;
}

/* Responsive */
@media (max-width: 1180px) {
  body.landing-body-v3 .landing-hero-top-v3,
  body:not([data-bot]) .landing-hero-top-v3 {
    grid-template-columns: 1fr !important;
  }

  body.landing-body-v3 .landing-hero-quick-v3,
  body:not([data-bot]) .landing-hero-quick-v3 {
    grid-template-columns: 1fr 220px !important;
  }

  body.landing-body-v3 .landing-logout-btn-v3,
  body:not([data-bot]) .landing-logout-btn-v3 {
    min-height: 54px !important;
  }
}

@media (max-width: 720px) {
  body.landing-body-v3 .landing-page-v3,
  body:not([data-bot]) .landing-page-v3 {
    padding: 10px !important;
  }

  body.landing-body-v3 .landing-hero-card-v3,
  body:not([data-bot]) .landing-hero-card-v3 {
    padding: 18px !important;
    border-radius: 24px !important;
  }

  body.landing-body-v3 .landing-hero-copy-v3 h1,
  body:not([data-bot]) .landing-hero-copy-v3 h1 {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
  }

  body.landing-body-v3 #landingSubtitle,
  body:not([data-bot]) #landingSubtitle {
    font-size: 0.92rem !important;
  }

  body.landing-body-v3 .landing-hero-quick-v3,
  body:not([data-bot]) .landing-hero-quick-v3 {
    grid-template-columns: 1fr !important;
  }

  body.landing-body-v3 .landing-premium-latest-v3,
  body.landing-body-v3 .landing-premium-cost-v3,
  body:not([data-bot]) .landing-premium-latest-v3,
  body:not([data-bot]) .landing-premium-cost-v3 {
    min-height: 92px !important;
    padding: 15px 16px !important;
  }

  body.landing-body-v3 .landing-logout-btn-v3,
  body:not([data-bot]) .landing-logout-btn-v3 {
    min-height: 52px !important;
  }
}
/* =========================================================
   LANDING HERO FULL WIDTH FIX
   Korrigiert Premium-Hero nach HTML-Struktur-Fix.
   GANZ UNTEN in styles.css einfügen.
   ========================================================= */

body.landing-body-v3 .landing-page-v3,
body:not([data-bot]) .landing-page-v3 {
  padding: clamp(14px, 2vw, 24px) !important;
}

body.landing-body-v3 .landing-shell-v3,
body:not([data-bot]) .landing-shell-v3 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  gap: 18px !important;
}

/* Hero kompakter, aber wirklich volle Breite */
body.landing-body-v3 .landing-hero-card-v3,
body:not([data-bot]) .landing-hero-card-v3 {
  width: 100% !important;
  min-height: 0 !important;
  padding: clamp(22px, 2.4vw, 34px) !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 88% 22%, rgba(124, 92, 255, 0.18), transparent 34%),
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.06), transparent 36%),
    linear-gradient(135deg, rgba(255,255,255,0.076), rgba(255,255,255,0.032)) !important;
  border: 1px solid rgba(255,255,255,0.095) !important;
  box-shadow:
    0 28px 90px rgba(0,0,0,0.34),
    inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

/* Das ist jetzt der echte volle-Breite-Strip */
body.landing-body-v3 .landing-hero-top-v3,
body:not([data-bot]) .landing-hero-top-v3 {
  width: 100% !important;
  display: grid !important;
  grid-template-columns:
    minmax(280px, 0.95fr)
    minmax(460px, 1.25fr)
    minmax(130px, 0.25fr) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

/* Begrüßung links */
body.landing-body-v3 .landing-hero-copy-v3,
body:not([data-bot]) .landing-hero-copy-v3 {
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

body.landing-body-v3 .landing-kicker-v3,
body:not([data-bot]) .landing-kicker-v3 {
  margin-bottom: 14px !important;
  letter-spacing: 0.32em !important;
  font-size: 0.68rem !important;
  color: rgba(202,208,222,0.48) !important;
}

body.landing-body-v3 .landing-hero-copy-v3 h1,
body:not([data-bot]) .landing-hero-copy-v3 h1 {
  max-width: 100% !important;
  margin: 0 0 8px !important;
  font-size: clamp(2.15rem, 3vw, 3.2rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.048em !important;
  font-weight: 650 !important;
  color: rgba(248,250,252,0.96) !important;
}

body.landing-body-v3 #landingSubtitle,
body:not([data-bot]) #landingSubtitle {
  max-width: 520px !important;
  margin: 0 !important;
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
  color: rgba(202,208,222,0.58) !important;
}

/* Mitte: letzter Chat + Kosten nebeneinander */
body.landing-body-v3 .landing-hero-quick-v3,
body:not([data-bot]) .landing-hero-quick-v3 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(200px, 0.7fr) !important;
  gap: 14px !important;
  align-self: stretch !important;
}

/* Alte Quick-Action-Klassen neutralisieren */
body.landing-body-v3 .landing-hero-quick-item-v3,
body:not([data-bot]) .landing-hero-quick-item-v3 {
  display: none !important;
}

/* Premium-Kacheln */
body.landing-body-v3 .landing-premium-latest-v3,
body.landing-body-v3 .landing-premium-cost-v3,
body:not([data-bot]) .landing-premium-latest-v3,
body:not([data-bot]) .landing-premium-cost-v3 {
  min-width: 0 !important;
  min-height: 118px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 17px 18px !important;
  border-radius: 22px !important;
  text-decoration: none !important;
  color: rgba(245,247,251,0.94) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.072), rgba(255,255,255,0.033)) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 16px 38px rgba(0,0,0,0.16) !important;
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease !important;
}

body.landing-body-v3 .landing-premium-latest-v3,
body:not([data-bot]) .landing-premium-latest-v3 {
  background:
    radial-gradient(circle at 100% 0%, rgba(124,92,255,0.20), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.078), rgba(255,255,255,0.034)) !important;
}

body.landing-body-v3 .landing-premium-latest-v3:hover,
body.landing-body-v3 .landing-premium-cost-v3:hover,
body:not([data-bot]) .landing-premium-latest-v3:hover,
body:not([data-bot]) .landing-premium-cost-v3:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,0.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.042)) !important;
}

body.landing-body-v3 .landing-premium-label-v3,
body:not([data-bot]) .landing-premium-label-v3 {
  font-size: 0.68rem !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 760 !important;
  color: rgba(202,208,222,0.48) !important;
}

body.landing-body-v3 .landing-premium-latest-v3 strong,
body.landing-body-v3 .landing-premium-cost-v3 strong,
body:not([data-bot]) .landing-premium-latest-v3 strong,
body:not([data-bot]) .landing-premium-cost-v3 strong {
  min-width: 0 !important;
  font-size: 1.06rem !important;
  line-height: 1.15 !important;
  font-weight: 760 !important;
  color: rgba(248,250,252,0.96) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.landing-body-v3 .landing-premium-latest-v3 small,
body.landing-body-v3 .landing-premium-cost-v3 small,
body:not([data-bot]) .landing-premium-latest-v3 small,
body:not([data-bot]) .landing-premium-cost-v3 small {
  min-width: 0 !important;
  font-size: 0.86rem !important;
  line-height: 1.25 !important;
  color: rgba(202,208,222,0.58) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.landing-body-v3 .landing-premium-cost-v3 strong,
body:not([data-bot]) .landing-premium-cost-v3 strong {
  font-size: clamp(1.35rem, 1.45vw, 1.75rem) !important;
  letter-spacing: -0.035em !important;
}

body.landing-body-v3 .landing-premium-cost-v3 small,
body:not([data-bot]) .landing-premium-cost-v3 small {
  color: rgba(196,181,253,0.82) !important;
  font-weight: 720 !important;
}

/* Rechts: nur Logout */
body.landing-body-v3 .landing-hero-actions-v3,
body:not([data-bot]) .landing-hero-actions-v3 {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  align-self: stretch !important;
}

body.landing-body-v3 .landing-user-chip-v3,
body:not([data-bot]) .landing-user-chip-v3,
body.landing-body-v3 .landing-hero-stats-v3,
body:not([data-bot]) .landing-hero-stats-v3 {
  display: none !important;
}

body.landing-body-v3 .landing-logout-btn-v3,
body:not([data-bot]) .landing-logout-btn-v3 {
  width: 100% !important;
  min-height: 118px !important;
  height: 100% !important;
  padding: 0 16px !important;
  border-radius: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 0.92rem !important;
  font-weight: 760 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.058), rgba(255,255,255,0.026)) !important;
  border: 1px solid rgba(255,255,255,0.085) !important;
  color: rgba(245,247,251,0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 16px 38px rgba(0,0,0,0.12) !important;
}

body.landing-body-v3 .landing-logout-btn-v3:hover,
body:not([data-bot]) .landing-logout-btn-v3:hover {
  transform: translateY(-1px) !important;
  color: rgba(255,255,255,0.94) !important;
  border-color: rgba(255,255,255,0.15) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.083), rgba(255,255,255,0.035)) !important;
}

/* Untere Bereiche auch volle Breite */
body.landing-body-v3 .landing-bots-card-v3,
body:not([data-bot]) .landing-bots-card-v3,
body.landing-body-v3 .landing-usage-card-v3,
body:not([data-bot]) .landing-usage-card-v3,
body.landing-body-v3 .landing-system-card-v3,
body:not([data-bot]) .landing-system-card-v3 {
  width: 100% !important;
}

/* Responsive */
@media (max-width: 1180px) {
  body.landing-body-v3 .landing-hero-top-v3,
  body:not([data-bot]) .landing-hero-top-v3 {
    grid-template-columns: 1fr !important;
  }

  body.landing-body-v3 .landing-hero-quick-v3,
  body:not([data-bot]) .landing-hero-quick-v3 {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.45fr) !important;
  }

  body.landing-body-v3 .landing-logout-btn-v3,
  body:not([data-bot]) .landing-logout-btn-v3 {
    min-height: 54px !important;
  }
}

@media (max-width: 720px) {
  body.landing-body-v3 .landing-page-v3,
  body:not([data-bot]) .landing-page-v3 {
    padding: 10px !important;
  }

  body.landing-body-v3 .landing-hero-card-v3,
  body:not([data-bot]) .landing-hero-card-v3 {
    padding: 18px !important;
    border-radius: 24px !important;
  }

  body.landing-body-v3 .landing-hero-copy-v3 h1,
  body:not([data-bot]) .landing-hero-copy-v3 h1 {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
  }

  body.landing-body-v3 .landing-hero-quick-v3,
  body:not([data-bot]) .landing-hero-quick-v3 {
    grid-template-columns: 1fr !important;
  }

  body.landing-body-v3 .landing-premium-latest-v3,
  body.landing-body-v3 .landing-premium-cost-v3,
  body:not([data-bot]) .landing-premium-latest-v3,
  body:not([data-bot]) .landing-premium-cost-v3 {
    min-height: 92px !important;
  }
}
/* =========================================================
   LANDING HERO PREMIUM FINAL ALIGNMENT FIX
   Fix gegen alte grid-column/grid-row Overrides.
   Ganz unten in styles.css einfügen.
   ========================================================= */

body.landing-body-v3 .landing-hero-card-v3,
body:not([data-bot]) .landing-hero-card-v3 {
  min-height: 0 !important;
  padding: clamp(22px, 2.2vw, 32px) !important;
  border-radius: 30px !important;
}

body.landing-body-v3 .landing-hero-top-v3,
body:not([data-bot]) .landing-hero-top-v3 {
  width: 100% !important;
  display: grid !important;
  grid-template-columns:
    minmax(260px, 0.9fr)
    minmax(500px, 1.5fr)
    minmax(130px, 150px) !important;
  gap: 14px !important;
  align-items: stretch !important;
}

/* Spalte 1: Begrüßung */
body.landing-body-v3 .landing-hero-copy-v3,
body:not([data-bot]) .landing-hero-copy-v3 {
  grid-column: 1 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  max-width: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Spalte 2: Letzter Chat + Kosten */
body.landing-body-v3 .landing-hero-quick-v3,
body:not([data-bot]) .landing-hero-quick-v3 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(210px, 0.72fr) !important;
  gap: 14px !important;
  align-self: stretch !important;
}

/* Spalte 3: Logout, nicht mehr links unten */
body.landing-body-v3 .landing-hero-actions-v3,
body:not([data-bot]) .landing-hero-actions-v3 {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: 0 !important;
  align-self: stretch !important;
}

/* Headline kleiner und hochwertiger */
body.landing-body-v3 .landing-hero-copy-v3 h1,
body:not([data-bot]) .landing-hero-copy-v3 h1 {
  max-width: 100% !important;
  margin: 0 0 8px !important;
  font-size: clamp(2rem, 2.7vw, 3rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.045em !important;
  font-weight: 640 !important;
}

body.landing-body-v3 #landingSubtitle,
body:not([data-bot]) #landingSubtitle {
  max-width: 430px !important;
  margin: 0 !important;
  font-size: 0.94rem !important;
  line-height: 1.45 !important;
  color: rgba(202,208,222,0.58) !important;
}

/* Kicker kleiner */
body.landing-body-v3 .landing-kicker-v3,
body:not([data-bot]) .landing-kicker-v3 {
  margin-bottom: 16px !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.32em !important;
  color: rgba(202,208,222,0.45) !important;
}

/* Alte Schnellzugriff-Klassen sicher neutralisieren */
body.landing-body-v3 .landing-hero-quick-item-v3,
body:not([data-bot]) .landing-hero-quick-item-v3 {
  display: none !important;
}

/* Premium-Kacheln */
body.landing-body-v3 .landing-premium-latest-v3,
body.landing-body-v3 .landing-premium-cost-v3,
body:not([data-bot]) .landing-premium-latest-v3,
body:not([data-bot]) .landing-premium-cost-v3 {
  min-width: 0 !important;
  min-height: 104px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 16px 18px !important;
  border-radius: 22px !important;
  text-decoration: none !important;
  text-align: left !important;
  color: rgba(245,247,251,0.94) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.074), rgba(255,255,255,0.032)) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.055),
    0 16px 38px rgba(0,0,0,0.16) !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font: inherit !important;
}

body.landing-body-v3 .landing-premium-latest-v3,
body:not([data-bot]) .landing-premium-latest-v3 {
  background:
    radial-gradient(circle at 100% 0%, rgba(124,92,255,0.20), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,0.078), rgba(255,255,255,0.034)) !important;
}

body.landing-body-v3 .landing-premium-latest-v3:hover,
body.landing-body-v3 .landing-premium-cost-v3:hover,
body:not([data-bot]) .landing-premium-latest-v3:hover,
body:not([data-bot]) .landing-premium-cost-v3:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255,255,255,0.16) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.042)) !important;
}

body.landing-body-v3 .landing-premium-label-v3,
body:not([data-bot]) .landing-premium-label-v3 {
  font-size: 0.66rem !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  font-weight: 760 !important;
  color: rgba(202,208,222,0.48) !important;
}

body.landing-body-v3 .landing-premium-latest-v3 strong,
body.landing-body-v3 .landing-premium-cost-v3 strong,
body:not([data-bot]) .landing-premium-latest-v3 strong,
body:not([data-bot]) .landing-premium-cost-v3 strong {
  min-width: 0 !important;
  font-size: 1.02rem !important;
  line-height: 1.15 !important;
  font-weight: 760 !important;
  color: rgba(248,250,252,0.96) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.landing-body-v3 .landing-premium-latest-v3 small,
body.landing-body-v3 .landing-premium-cost-v3 small,
body:not([data-bot]) .landing-premium-latest-v3 small,
body:not([data-bot]) .landing-premium-cost-v3 small {
  min-width: 0 !important;
  font-size: 0.84rem !important;
  line-height: 1.25 !important;
  color: rgba(202,208,222,0.58) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.landing-body-v3 .landing-premium-cost-v3 strong,
body:not([data-bot]) .landing-premium-cost-v3 strong {
  font-size: clamp(1.25rem, 1.35vw, 1.62rem) !important;
  letter-spacing: -0.035em !important;
}

body.landing-body-v3 .landing-premium-cost-v3 small,
body:not([data-bot]) .landing-premium-cost-v3 small {
  color: rgba(196,181,253,0.82) !important;
  font-weight: 720 !important;
}

/* Eingeloggt + Mini-Stats raus */
body.landing-body-v3 .landing-user-chip-v3,
body:not([data-bot]) .landing-user-chip-v3,
body.landing-body-v3 .landing-hero-stats-v3,
body:not([data-bot]) .landing-hero-stats-v3 {
  display: none !important;
}

/* Logout passend klein */
body.landing-body-v3 .landing-logout-btn-v3,
body:not([data-bot]) .landing-logout-btn-v3 {
  width: 100% !important;
  min-height: 104px !important;
  height: 100% !important;
  padding: 0 16px !important;
  border-radius: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  font-size: 0.9rem !important;
  font-weight: 760 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.058), rgba(255,255,255,0.026)) !important;
  border: 1px solid rgba(255,255,255,0.085) !important;
  color: rgba(245,247,251,0.78) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.045),
    0 16px 38px rgba(0,0,0,0.12) !important;
}

body.landing-body-v3 .landing-logout-btn-v3:hover,
body:not([data-bot]) .landing-logout-btn-v3:hover {
  transform: translateY(-1px) !important;
  color: rgba(255,255,255,0.94) !important;
  border-color: rgba(255,255,255,0.15) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.083), rgba(255,255,255,0.035)) !important;
}

/* Hero darf nicht unnötig riesig werden */
body.landing-body-v3 .landing-bots-card-v3,
body:not([data-bot]) .landing-bots-card-v3 {
  margin-top: 0 !important;
}

/* Responsive */
@media (max-width: 1180px) {
  body.landing-body-v3 .landing-hero-top-v3,
  body:not([data-bot]) .landing-hero-top-v3 {
    grid-template-columns: 1fr !important;
  }

  body.landing-body-v3 .landing-hero-copy-v3,
  body:not([data-bot]) .landing-hero-copy-v3,
  body.landing-body-v3 .landing-hero-quick-v3,
  body:not([data-bot]) .landing-hero-quick-v3,
  body.landing-body-v3 .landing-hero-actions-v3,
  body:not([data-bot]) .landing-hero-actions-v3 {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body.landing-body-v3 .landing-hero-quick-v3,
  body:not([data-bot]) .landing-hero-quick-v3 {
    grid-template-columns: minmax(0, 1fr) minmax(190px, 0.45fr) !important;
  }

  body.landing-body-v3 .landing-logout-btn-v3,
  body:not([data-bot]) .landing-logout-btn-v3 {
    min-height: 54px !important;
  }
}

@media (max-width: 720px) {
  body.landing-body-v3 .landing-hero-card-v3,
  body:not([data-bot]) .landing-hero-card-v3 {
    padding: 18px !important;
    border-radius: 24px !important;
  }

  body.landing-body-v3 .landing-hero-copy-v3 h1,
  body:not([data-bot]) .landing-hero-copy-v3 h1 {
    font-size: clamp(2rem, 9vw, 2.7rem) !important;
  }

  body.landing-body-v3 .landing-hero-quick-v3,
  body:not([data-bot]) .landing-hero-quick-v3 {
    grid-template-columns: 1fr !important;
  }

  body.landing-body-v3 .landing-premium-latest-v3,
  body.landing-body-v3 .landing-premium-cost-v3,
  body:not([data-bot]) .landing-premium-latest-v3,
  body:not([data-bot]) .landing-premium-cost-v3 {
    min-height: 88px !important;
  }
}
/* =========================================================
   LANDING BOT WIDTH RESTORE
   Bot-Säulen breit halten, Sections trotzdem trennen.
   Ganz unten einfügen.
   ========================================================= */

body.landing-body-v3 .landing-shell-v3,
body:not([data-bot]) .landing-shell-v3 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  row-gap: 34px !important;
  column-gap: 0 !important;
}

body.landing-body-v3 .landing-bots-card-v3,
body:not([data-bot]) .landing-bots-card-v3 {
  width: 100% !important;
  max-width: none !important;
  grid-column: 1 / -1 !important;
  padding: clamp(24px, 2vw, 32px) !important;
}

body.landing-body-v3 .bot-grid-v3,
body:not([data-bot]) .bot-grid-v3 {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 22px !important;
}

body.landing-body-v3 .bot-select-card-v3,
body:not([data-bot]) .bot-select-card-v3 {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

@media (max-width: 1180px) {
  body.landing-body-v3 .bot-grid-v3,
  body:not([data-bot]) .bot-grid-v3 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}
/* =========================================================
   LANDING FINAL SECTION + BOT WIDTH FIX
   Große Cards sauber getrennt, Bot-Säulen wieder breit.
   Ganz unten einfügen.
   ========================================================= */

body.landing-body-v3 .landing-page-v3,
body:not([data-bot]) .landing-page-v3 {
  padding: 24px !important;
}

body.landing-body-v3 .landing-shell-v3,
body:not([data-bot]) .landing-shell-v3 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 34px !important;
}

/* Große Sections: volle Breite, keine Überlappung */
body.landing-body-v3 .landing-hero-card-v3,
body:not([data-bot]) .landing-hero-card-v3,
body.landing-body-v3 .landing-bots-card-v3,
body:not([data-bot]) .landing-bots-card-v3,
body.landing-body-v3 .landing-usage-card-v3,
body:not([data-bot]) .landing-usage-card-v3,
body.landing-body-v3 .landing-system-card-v3,
body:not([data-bot]) .landing-system-card-v3 {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* Bot-Section innen breit halten */
body.landing-body-v3 .landing-bots-card-v3,
body:not([data-bot]) .landing-bots-card-v3 {
  padding: clamp(24px, 2vw, 32px) !important;
  border-radius: 30px !important;
}

/* Bot-Säulen wieder breit: 3 Spalten, kleiner Gap */
body.landing-body-v3 .bot-grid-v3,
body:not([data-bot]) .bot-grid-v3 {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  margin-top: 22px !important;
}

body.landing-body-v3 .bot-select-card-v3,
body:not([data-bot]) .bot-select-card-v3 {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

@media (max-width: 1180px) {
  body.landing-body-v3 .landing-shell-v3,
  body:not([data-bot]) .landing-shell-v3 {
    gap: 24px !important;
  }

  body.landing-body-v3 .bot-grid-v3,
  body:not([data-bot]) .bot-grid-v3 {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

@media (max-width: 720px) {
  body.landing-body-v3 .landing-page-v3,
  body:not([data-bot]) .landing-page-v3 {
    padding: 10px !important;
  }

  body.landing-body-v3 .landing-shell-v3,
  body:not([data-bot]) .landing-shell-v3 {
    gap: 18px !important;
  }

  body.landing-body-v3 .landing-bots-card-v3,
  body:not([data-bot]) .landing-bots-card-v3 {
    padding: 18px !important;
    border-radius: 24px !important;
  }
}
/* === Usage Badge: perfekt mittig === */

body.landing-body-v3 .usage-cost-badge-v3,
body:not([data-bot]) .usage-cost-badge-v3 {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  line-height: 1.15 !important;
}

@media (min-width: 1180px) {
  body.landing-body-v3 .usage-cost-badge-v3,
  body:not([data-bot]) .usage-cost-badge-v3 {
    width: 100% !important;
  }
}
/* =========================================================
   LANDING BOT CARD HEIGHT TUNE
   Bot-Kacheln minimal höher, damit 3 letzte Chats sauber reinpassen.
   Ganz unten einfügen.
   ========================================================= */

body.landing-body-v3 .bot-select-card-v3,
body:not([data-bot]) .bot-select-card-v3 {
  min-height: 680px !important;
  padding-bottom: 24px !important;
}

/* Chatbereich darf genug Höhe nutzen */
body.landing-body-v3 .bot-card-chats-v3,
body:not([data-bot]) .bot-card-chats-v3 {
  margin-top: 18px !important;
}

/* Falls alte Regeln die Liste abschneiden */
body.landing-body-v3 .bot-card-chats-list-v3,
body:not([data-bot]) .bot-card-chats-list-v3,
body.landing-body-v3 .bot-card-chats-v3[open] .bot-card-chats-list-v3,
body:not([data-bot]) .bot-card-chats-v3[open] .bot-card-chats-list-v3 {
  max-height: none !important;
  overflow: visible !important;
}

/* Drei Chat-Zeilen etwas kompakter, aber weiterhin hochwertig */
body.landing-body-v3 .bot-card-chat-item-v3,
body:not([data-bot]) .bot-card-chat-item-v3 {
  min-height: 58px !important;
  padding: 11px 14px !important;
}

body.landing-body-v3 .bot-card-chat-title-v3,
body:not([data-bot]) .bot-card-chat-title-v3 {
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.landing-body-v3 .bot-card-chat-meta-v3,
body:not([data-bot]) .bot-card-chat-meta-v3 {
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
  margin-top: 3px !important;
}

/* Bei großen Screens darf die Bot-Section etwas mehr Raum geben */
@media (min-width: 1180px) {
  body.landing-body-v3 .landing-bots-card-v3,
  body:not([data-bot]) .landing-bots-card-v3 {
    padding-bottom: 34px !important;
  }
}

/* Mobile/Tablet nicht unnötig riesig machen */
@media (max-width: 1180px) {
  body.landing-body-v3 .bot-select-card-v3,
  body:not([data-bot]) .bot-select-card-v3 {
    min-height: 0 !important;
  }
}
/* =========================================================
   FINAL PREMIUM MAC COMPOSER PATCH — Mai 2026
   Ziel:
   - Composer wirkt wie ein einheitliches Mac-/Glass-Dock
   - Mode-Chips ruhiger, weniger Neon
   - Send-Button nimmt Bot-Farbe an, aber dezenter
   - Stop-Button bleibt rot/clean
   - Footer-Buttons unter Nachrichten einheitlich
   - Copy-Button nicht mehr hellgrau herausstechend
   ========================================================= */


/* ---------- 1) Ruhigere Bot-Akzentfarben ---------- */

body[data-bot="albert"] {
  --bot-accent: #8b8dff;
  --bot-accent-2: #6f8cff;
  --bot-accent-rgb: 139, 141, 255;
}

body[data-bot="stephen"] {
  --bot-accent: #76a9ff;
  --bot-accent-2: #5d8fd8;
  --bot-accent-rgb: 118, 169, 255;
}

body[data-bot="jeffrey"] {
  --bot-accent: #7fc8a9;
  --bot-accent-2: #5ea98d;
  --bot-accent-rgb: 127, 200, 169;
}

body[data-bot] {
  --mac-bg-glass: rgba(18, 19, 26, 0.72);
  --mac-bg-glass-strong: rgba(25, 26, 34, 0.82);
  --mac-bg-control: rgba(255, 255, 255, 0.055);
  --mac-bg-control-hover: rgba(255, 255, 255, 0.085);
  --mac-border: rgba(255, 255, 255, 0.105);
  --mac-border-soft: rgba(255, 255, 255, 0.07);
  --mac-text-soft: rgba(245, 247, 251, 0.72);
  --mac-text-faint: rgba(245, 247, 251, 0.48);
  --mac-shadow-soft: 0 18px 54px rgba(0, 0, 0, 0.30);
  --mac-shadow-tight: 0 10px 28px rgba(0, 0, 0, 0.24);
}


/* ---------- 2) Composer als einheitliches Premium-Dock ---------- */

body[data-bot] .composer {
  padding: 14px 20px 18px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.065) !important;
  background:
    linear-gradient(180deg, rgba(8, 9, 13, 0.18), rgba(8, 9, 13, 0.82)),
    rgba(8, 9, 13, 0.72) !important;
  backdrop-filter: blur(24px) saturate(1.16) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.16) !important;
  box-shadow:
    0 -20px 60px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}

body[data-bot] .composer::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.12),
    transparent
  );
  pointer-events: none;
}

body[data-bot] .composer-form,
body[data-bot] .composer-form-modern {
  position: relative !important;
  z-index: 2 !important;

  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;

  width: 100% !important;
  margin: 0 auto !important;
  padding: 10px !important;

  border-radius: 30px !important;
  border: 1px solid var(--mac-border) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(20, 21, 29, 0.72) !important;

  box-shadow:
    var(--mac-shadow-soft),
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;

  backdrop-filter: blur(26px) saturate(1.20) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.20) !important;

  transition:
    border-color 0.18s ease,
    background 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease !important;
}

body[data-bot] .composer:focus-within .composer-form,
body[data-bot] .composer:focus-within .composer-form-modern {
  border-color: rgba(var(--bot-accent-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.088), rgba(255, 255, 255, 0.044)),
    rgba(22, 23, 32, 0.82) !important;
  box-shadow:
    0 20px 62px rgba(0, 0, 0, 0.34),
    0 0 0 4px rgba(var(--bot-accent-rgb), 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22) !important;
}


/* ---------- 3) Textarea ruhiger, kein eigenes Feld mehr ---------- */

body[data-bot] .composer textarea,
body[data-bot] .composer-form textarea,
body[data-bot] .composer-form-modern textarea,
body[data-bot] #messageInput {
  width: 100% !important;
  min-width: 0 !important;

  min-height: 34px !important;
  height: 34px;
  max-height: 150px !important;

  padding: 6px 4px !important;
  margin: 0 !important;

  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;

  background: transparent !important;
  box-shadow: none !important;

  color: rgba(248, 249, 252, 0.93) !important;
  font-size: 1.02rem !important;
  line-height: 1.42 !important;
  letter-spacing: -0.01em !important;

  resize: none !important;
  overflow-y: auto !important;
}

body[data-bot] .composer textarea:focus,
body[data-bot] .composer-form textarea:focus,
body[data-bot] .composer-form-modern textarea:focus,
body[data-bot] #messageInput:focus {
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body[data-bot] .composer textarea::placeholder,
body[data-bot] .composer-form textarea::placeholder,
body[data-bot] .composer-form-modern textarea::placeholder,
body[data-bot] #messageInput::placeholder {
  color: rgba(245, 247, 251, 0.46) !important;
  font-weight: 450 !important;
}


/* ---------- 4) Plus-Button und Send-Button gleiche Familie ---------- */

body[data-bot] .composer-plus-wrap {
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
}

body[data-bot] .composer-plus-btn,
body[data-bot] .composer-form #sendBtn,
body[data-bot] .composer-form-modern #sendBtn {
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 20px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  line-height: 1 !important;
  cursor: pointer !important;

  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    box-shadow 0.16s ease,
    filter 0.16s ease !important;
}

body[data-bot] .composer-plus-btn {
  border: 1px solid rgba(255, 255, 255, 0.105) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.042)),
    rgba(255, 255, 255, 0.035) !important;

  color: rgba(245, 247, 251, 0.82) !important;
  font-size: 30px !important;
  font-weight: 360 !important;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.085) !important;
}

body[data-bot] .composer-plus-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.095), rgba(255, 255, 255, 0.055)),
    rgba(255, 255, 255, 0.045) !important;
  color: rgba(255, 255, 255, 0.94) !important;
}

body[data-bot] .composer-form #sendBtn,
body[data-bot] .composer-form-modern #sendBtn {
  border: 1px solid rgba(var(--bot-accent-rgb), 0.38) !important;
  background:
    linear-gradient(135deg, rgba(var(--bot-accent-rgb), 0.96), rgba(var(--bot-accent-rgb), 0.74)),
    linear-gradient(135deg, var(--bot-accent), var(--bot-accent-2)) !important;

  color: #ffffff !important;

  box-shadow:
    0 12px 30px rgba(var(--bot-accent-rgb), 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;

  filter: saturate(0.92) brightness(0.98) !important;
}

body[data-bot] .composer-form #sendBtn:hover,
body[data-bot] .composer-form-modern #sendBtn:hover {
  transform: translateY(-1px) !important;
  filter: saturate(0.96) brightness(1.03) !important;
  box-shadow:
    0 14px 34px rgba(var(--bot-accent-rgb), 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
}

body[data-bot] .composer-action-icon,
body[data-bot] .composer-send-icon,
body[data-bot] .composer-stop-icon {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body[data-bot] .composer-action-icon svg,
body[data-bot] .composer-send-icon svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.35 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}


/* ---------- 5) Stop-Button bleibt clean und gefällt dir weiterhin ---------- */

body[data-bot] .composer-form #sendBtn.is-stop,
body[data-bot] .composer-form-modern #sendBtn.is-stop,
body[data-bot] #sendBtn.is-stop {
  border: 1px solid rgba(255, 112, 112, 0.30) !important;
  background:
    linear-gradient(180deg, rgba(255, 112, 112, 0.16), rgba(255, 95, 95, 0.11)),
    rgba(255, 95, 95, 0.10) !important;

  color: #ffd8d8 !important;

  box-shadow:
    0 10px 26px rgba(255, 95, 95, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;

  filter: none !important;
}

body[data-bot] .composer-form #sendBtn.is-stop:hover,
body[data-bot] .composer-form-modern #sendBtn.is-stop:hover,
body[data-bot] #sendBtn.is-stop:hover {
  border-color: rgba(255, 130, 130, 0.42) !important;
  background:
    linear-gradient(180deg, rgba(255, 112, 112, 0.20), rgba(255, 95, 95, 0.14)),
    rgba(255, 95, 95, 0.13) !important;
}

body[data-bot] .composer-stop-square {
  width: 14px !important;
  height: 14px !important;
  border-radius: 4px !important;
  display: block !important;
  background: currentColor !important;
}


/* ---------- 6) Mode-Chips ruhiger, kompakter, macOS-artiger ---------- */

body[data-bot] .mode-bar {
  position: relative !important;
  z-index: 3 !important;

  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;

  width: 100% !important;
  margin: 0 auto 10px !important;
  padding: 0 2px !important;
}

body[data-bot] .mode-toggle-btn {
  min-height: 34px !important;
  height: 34px !important;

  padding: 0 13px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(255, 255, 255, 0.095) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.060), rgba(255, 255, 255, 0.032)),
    rgba(255, 255, 255, 0.030) !important;

  color: rgba(245, 247, 251, 0.70) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  font-size: 0.84rem !important;
  font-weight: 720 !important;
  letter-spacing: -0.015em !important;

  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.060) !important;

  backdrop-filter: blur(18px) saturate(1.10) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.10) !important;

  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease,
    color 0.16s ease,
    box-shadow 0.16s ease !important;
}

body[data-bot] .mode-toggle-btn:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.082), rgba(255, 255, 255, 0.044)),
    rgba(255, 255, 255, 0.040) !important;
  color: rgba(255, 255, 255, 0.90) !important;
}

body[data-bot] .mode-toggle-btn.active {
  border-color: rgba(var(--bot-accent-rgb), 0.34) !important;
  background:
    linear-gradient(180deg, rgba(var(--bot-accent-rgb), 0.18), rgba(var(--bot-accent-rgb), 0.095)),
    rgba(255, 255, 255, 0.040) !important;

  color: rgba(255, 255, 255, 0.94) !important;

  box-shadow:
    0 10px 26px rgba(var(--bot-accent-rgb), 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.090) !important;
}

body[data-bot] .mode-toggle-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  opacity: 0.92 !important;
}

body[data-bot] .mode-toggle-icon svg {
  width: 18px !important;
  height: 18px !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.05 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

body[data-bot] .mode-toggle-label {
  display: inline-block !important;
}


/* ---------- 7) Message-Footer: Meta + Buttons ruhig unter Nachricht ---------- */

body[data-bot] .message-footer {
  margin-top: 14px !important;
  padding-top: 13px !important;

  border-top: 1px solid rgba(255, 255, 255, 0.065) !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

body[data-bot] .message-meta {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;

  color: rgba(245, 247, 251, 0.43) !important;

  font-size: 0.80rem !important;
  font-weight: 560 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.35 !important;
}

body[data-bot] .message-footer-actions,
body[data-bot] .message-actions {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-wrap: wrap !important;

  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ---------- 8) Footer-Buttons und Copy-Button komplett angleichen ---------- */

body[data-bot] .footer-icon-btn,
body[data-bot] .retry-message-btn,
body[data-bot] .copy-message-btn,
body[data-bot] .copy-inline-btn,
body[data-bot] .copy-icon-btn,
body[data-bot] .copy-code-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;

  padding: 0 !important;
  margin: 0 !important;

  border-radius: 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.095) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.028)),
    rgba(255, 255, 255, 0.028) !important;

  color: rgba(245, 247, 251, 0.68) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 0 !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  box-shadow:
    0 7px 18px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;

  opacity: 1 !important;

  cursor: pointer !important;

  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease !important;
}

body[data-bot] .footer-icon-btn:hover,
body[data-bot] .retry-message-btn:hover,
body[data-bot] .copy-message-btn:hover,
body[data-bot] .copy-inline-btn:hover,
body[data-bot] .copy-icon-btn:hover,
body[data-bot] .copy-code-btn:hover {
  transform: translateY(-1px) !important;

  border-color: rgba(255, 255, 255, 0.16) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.078), rgba(255, 255, 255, 0.040)),
    rgba(255, 255, 255, 0.040) !important;

  color: rgba(255, 255, 255, 0.90) !important;

  box-shadow:
    0 9px 22px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.070) !important;
}

body[data-bot] .footer-icon-btn:active,
body[data-bot] .retry-message-btn:active,
body[data-bot] .copy-message-btn:active,
body[data-bot] .copy-inline-btn:active,
body[data-bot] .copy-icon-btn:active,
body[data-bot] .copy-code-btn:active {
  transform: scale(0.97) !important;
}

body[data-bot] .footer-icon-btn svg,
body[data-bot] .retry-message-btn svg,
body[data-bot] .copy-message-btn svg,
body[data-bot] .copy-inline-btn svg,
body[data-bot] .copy-icon-btn svg,
body[data-bot] .copy-code-btn svg {
  width: 18px !important;
  height: 18px !important;

  display: block !important;

  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.05 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;

  opacity: 1 !important;
}


/* Copy-Button war vorher optisch zu hell — hier explizit neutralisieren */
body[data-bot] .message-footer-actions .copy-message-btn,
body[data-bot] .message-footer-actions .copy-inline-btn,
body[data-bot] .message-footer-actions .copy-icon-btn {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.028)),
    rgba(255, 255, 255, 0.028) !important;

  color: rgba(245, 247, 251, 0.68) !important;
  border-color: rgba(255, 255, 255, 0.095) !important;
  opacity: 1 !important;
}


/* Erfolgszustand: sichtbar, aber nicht neon */
body[data-bot] .copy-icon-btn.is-copied,
body[data-bot] .copy-message-btn.is-copied,
body[data-bot] .copy-code-btn.is-copied,
body[data-bot] .footer-icon-btn.is-copied {
  color: rgba(220, 255, 236, 0.94) !important;
  background:
    linear-gradient(180deg, rgba(75, 190, 126, 0.18), rgba(75, 190, 126, 0.10)),
    rgba(75, 190, 126, 0.08) !important;
  border-color: rgba(75, 190, 126, 0.30) !important;
  box-shadow:
    0 8px 20px rgba(75, 190, 126, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;
}

body[data-bot] .copy-icon-btn.is-copy-error,
body[data-bot] .copy-message-btn.is-copy-error,
body[data-bot] .copy-code-btn.is-copy-error,
body[data-bot] .footer-icon-btn.is-copy-error {
  color: rgba(255, 218, 218, 0.96) !important;
  background:
    linear-gradient(180deg, rgba(255, 95, 95, 0.17), rgba(255, 95, 95, 0.09)),
    rgba(255, 95, 95, 0.08) !important;
  border-color: rgba(255, 95, 95, 0.28) !important;
}

body[data-bot] .copy-check-mark {
  font-size: 15px !important;
  line-height: 1 !important;
}


/* ---------- 9) Codeblock-Copy ebenfalls gleicher Stil, aber minimal kompakter ---------- */

body[data-bot] .code-header .copy-icon-btn,
body[data-bot] .code-header .copy-code-btn {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 12px !important;
}

body[data-bot] .code-header {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.030)),
    rgba(18, 19, 27, 0.84) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.065) !important;
}

body[data-bot] .code-block {
  border-color: rgba(255, 255, 255, 0.085) !important;
  background: rgba(8, 10, 15, 0.86) !important;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.25) !important;
}


/* ---------- 10) Tooltips etwas ruhiger/macOS-artiger ---------- */

body[data-bot] [data-tooltip]::after {
  background: rgba(24, 25, 32, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.105) !important;
  color: rgba(245, 247, 251, 0.90) !important;
  box-shadow:
    0 12px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.055) !important;
  backdrop-filter: blur(18px) saturate(1.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12) !important;
}


/* ---------- 11) Upload-Menü an neue Composer-Optik angleichen ---------- */

body[data-bot] .upload-menu {
  bottom: calc(100% + 10px) !important;

  min-width: 236px !important;
  padding: 8px !important;

  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.105) !important;

  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.070), rgba(255, 255, 255, 0.038)),
    rgba(22, 23, 31, 0.94) !important;

  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.075) !important;

  backdrop-filter: blur(24px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.18) !important;
}

body[data-bot] .upload-menu-item {
  border-radius: 15px !important;
  color: rgba(245, 247, 251, 0.86) !important;
}

body[data-bot] .upload-menu-item:hover {
  background: rgba(255, 255, 255, 0.070) !important;
  border-color: rgba(255, 255, 255, 0.105) !important;
}


/* ---------- 12) Mobile: gleiche Optik, aber kompakter ---------- */

@media (max-width: 680px) {
  body[data-bot] .composer {
    padding: 10px 12px max(14px, env(safe-area-inset-bottom)) !important;
  }

  body[data-bot] .mode-bar {
    gap: 7px !important;
    margin-bottom: 9px !important;
    padding: 0 !important;
  }

  body[data-bot] .mode-toggle-btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 11px !important;
    font-size: 0.78rem !important;
  }

  body[data-bot] .mode-toggle-icon,
  body[data-bot] .mode-toggle-icon svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
  }

  body[data-bot] .composer-form,
  body[data-bot] .composer-form-modern {
    gap: 9px !important;
    padding: 8px !important;
    border-radius: 26px !important;
  }

  body[data-bot] .composer-plus-btn,
  body[data-bot] .composer-form #sendBtn,
  body[data-bot] .composer-form-modern #sendBtn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    border-radius: 17px !important;
  }

  body[data-bot] .composer textarea,
  body[data-bot] .composer-form textarea,
  body[data-bot] .composer-form-modern textarea,
  body[data-bot] #messageInput {
    min-height: 30px !important;
    height: 30px;
    max-height: 112px !important;
    font-size: 16px !important;
    line-height: 1.38 !important;
    padding: 4px 2px !important;
  }

  body[data-bot] .message-footer {
    gap: 9px !important;
  }

  body[data-bot] .message-footer-actions {
    gap: 7px !important;
  }

  body[data-bot] .footer-icon-btn,
  body[data-bot] .retry-message-btn,
  body[data-bot] .copy-message-btn,
  body[data-bot] .copy-inline-btn,
  body[data-bot] .copy-icon-btn,
  body[data-bot] .copy-code-btn {
    width: 33px !important;
    height: 33px !important;
    min-width: 33px !important;
    min-height: 33px !important;
    border-radius: 12px !important;
  }

  body[data-bot] .footer-icon-btn svg,
  body[data-bot] .retry-message-btn svg,
  body[data-bot] .copy-message-btn svg,
  body[data-bot] .copy-inline-btn svg,
  body[data-bot] .copy-icon-btn svg,
  body[data-bot] .copy-code-btn svg {
    width: 17px !important;
    height: 17px !important;
  }
}


/* ---------- 13) Sehr kleine Screens: Mode-Chips dürfen horizontal scrollen ---------- */

@media (max-width: 430px) {
  body[data-bot] .mode-bar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding-bottom: 2px !important;
    scrollbar-width: none !important;
  }

  body[data-bot] .mode-bar::-webkit-scrollbar {
    display: none !important;
  }

  body[data-bot] .mode-toggle-btn {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  body[data-bot] .mode-toggle-label {
    display: inline-block !important;
  }
}
/* =========================================================
   FIX: Composer Plus Button zeigt nur ein Plus
   ========================================================= */

body[data-bot] .composer-plus-btn {
  font-size: 0 !important;
  letter-spacing: 0 !important;
}

body[data-bot] .composer-plus-btn::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  height: 22px;

  color: rgba(245, 247, 251, 0.88);
  font-size: 34px;
  font-weight: 320;
  line-height: 1;
  transform: translateY(-1px);
}

body[data-bot] .composer-plus-btn:hover::before {
  color: rgba(255, 255, 255, 0.96);
}
/* =========================================================
   FINAL MOBILE FIX — Tooltips, iOS Composer, Stephen/Jeffrey Width
   ========================================================= */


/* ---------- 1) Touch-Geräte: keine schwarzen Tooltip-Boxen ---------- */

@media (hover: none), (pointer: coarse) {
  body[data-bot] [data-tooltip]::before,
  body[data-bot] [data-tooltip]::after,
  body[data-bot] [data-tooltip]:hover::before,
  body[data-bot] [data-tooltip]:hover::after,
  body[data-bot] [data-tooltip]:focus::before,
  body[data-bot] [data-tooltip]:focus::after,
  body[data-bot] [data-tooltip]:active::before,
  body[data-bot] [data-tooltip]:active::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* ---------- 2) Mobile Composer: iOS-Caret/Jump fix ---------- */

@media (max-width: 680px) {
  body[data-bot] .composer {
    padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
  }

  body[data-bot] .composer-form,
  body[data-bot] .composer-form-modern {
    align-items: center !important;
    min-height: 66px !important;
    padding: 8px !important;
  }

  body[data-bot] #messageInput,
  body[data-bot] .composer textarea,
  body[data-bot] .composer-form textarea,
  body[data-bot] .composer-form-modern textarea {
    min-height: 44px !important;
    height: 44px !important;
    max-height: 118px !important;

    padding: 10px 4px !important;

    line-height: 24px !important;
    font-size: 16px !important;

    display: block !important;
    align-self: center !important;

    transform: none !important;
    translate: none !important;

    -webkit-text-size-adjust: 100% !important;
  }

  body[data-bot] #messageInput:focus,
  body[data-bot] .composer textarea:focus {
    min-height: 44px !important;
    line-height: 24px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}


/* ---------- 3) Albert Mobile: echtes 3-Spalten-Layout behalten ---------- */

@media (max-width: 680px) {
  body[data-bot="albert"] .composer-form,
  body[data-bot="albert"] .composer-form-modern {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }

  body[data-bot="albert"] .composer-plus-wrap {
    display: flex !important;
    width: auto !important;
    min-width: auto !important;
    max-width: none !important;
  }

  body[data-bot="albert"] #messageInput {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  body[data-bot="albert"] #sendBtn {
    grid-column: 3 !important;
  }
}


/* ---------- 4) Stephen/Jeffrey Mobile: ohne Plus volle Textbreite ---------- */

@media (max-width: 680px) {
  body[data-bot="stephen"] .composer-form,
  body[data-bot="stephen"] .composer-form-modern,
  body[data-bot="jeffrey"] .composer-form,
  body[data-bot="jeffrey"] .composer-form-modern {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  body[data-bot="stephen"] .composer-plus-placeholder,
  body[data-bot="jeffrey"] .composer-plus-placeholder {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
  }

  body[data-bot="stephen"] #messageInput,
  body[data-bot="jeffrey"] #messageInput {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body[data-bot="stephen"] #sendBtn,
  body[data-bot="jeffrey"] #sendBtn {
    grid-column: 2 !important;
  }
}


/* ---------- 5) Mobile Send/Plus minimal kleiner, damit mehr Textplatz bleibt ---------- */

@media (max-width: 430px) {
  body[data-bot] .composer-plus-btn,
  body[data-bot] .composer-form #sendBtn,
  body[data-bot] .composer-form-modern #sendBtn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 16px !important;
  }

  body[data-bot] .composer-plus-btn::before {
    font-size: 30px !important;
    width: 20px !important;
    height: 20px !important;
  }

  body[data-bot] .composer-send-icon,
  body[data-bot] .composer-action-icon,
  body[data-bot] .composer-send-icon svg,
  body[data-bot] .composer-action-icon svg {
    width: 20px !important;
    height: 20px !important;
  }
}
/* =========================================================
   FINAL FIX: Mobile Composer Layout + iOS Textarea Stability
   Albert = Upload/Plus (3 Spalten)
   Stephen/Jeffrey = Simple Composer (2 Spalten)
   ========================================================= */


/* ---------- 1) Simple Composer für Stephen/Jeffrey eindeutig 2-spaltig ---------- */

body[data-bot="stephen"] .composer-form-simple,
body[data-bot="jeffrey"] .composer-form-simple {
  grid-template-columns: minmax(0, 1fr) auto !important;
}

body[data-bot="stephen"] .composer-form-simple #messageInput,
body[data-bot="jeffrey"] .composer-form-simple #messageInput {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}

body[data-bot="stephen"] .composer-form-simple #sendBtn,
body[data-bot="jeffrey"] .composer-form-simple #sendBtn {
  grid-column: 2 !important;
  justify-self: end !important;
}


/* ---------- 2) Albert bleibt 3-spaltig ---------- */

body[data-bot="albert"] .composer-form-modern {
  grid-template-columns: auto minmax(0, 1fr) auto !important;
}

body[data-bot="albert"] .composer-form-modern .composer-plus-wrap {
  grid-column: 1 !important;
}

body[data-bot="albert"] .composer-form-modern #messageInput {
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
}

body[data-bot="albert"] .composer-form-modern #sendBtn {
  grid-column: 3 !important;
  justify-self: end !important;
}


/* ---------- 3) iOS Mobile: Textarea nicht mehr nach unten springen lassen ---------- */

@media (max-width: 680px) {
  body[data-bot] .composer-form,
  body[data-bot] .composer-form-modern,
  body[data-bot] .composer-form-simple {
    align-items: center !important;
  }

  body[data-bot] #messageInput {
    box-sizing: border-box !important;

    min-height: 44px !important;
    height: auto !important;
    max-height: 118px !important;

    padding: 10px 4px !important;

    line-height: 24px !important;
    font-size: 16px !important;

    display: block !important;
    align-self: center !important;

    overflow-y: auto !important;
    resize: none !important;

    transform: none !important;
    translate: none !important;
    vertical-align: middle !important;

    -webkit-text-size-adjust: 100% !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  body[data-bot] #messageInput:focus {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    line-height: 24px !important;
    min-height: 44px !important;
  }
}


/* ---------- 4) Mobile: Stephen/Jeffrey wirklich breit, ohne Fake-Spalte ---------- */

@media (max-width: 680px) {
  body[data-bot="stephen"] .composer-form-simple,
  body[data-bot="jeffrey"] .composer-form-simple {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 9px !important;
  }

  body[data-bot="stephen"] .composer-form-simple #messageInput,
  body[data-bot="jeffrey"] .composer-form-simple #messageInput {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body[data-bot="stephen"] .composer-form-simple #sendBtn,
  body[data-bot="jeffrey"] .composer-form-simple #sendBtn {
    grid-column: 2 !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}


/* ---------- 5) Mobile: Albert Textbereich stabil zwischen Plus und Send ---------- */

@media (max-width: 680px) {
  body[data-bot="albert"] .composer-form-modern {
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    gap: 9px !important;
  }

  body[data-bot="albert"] .composer-form-modern .composer-plus-wrap {
    grid-column: 1 !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
  }

  body[data-bot="albert"] .composer-form-modern .composer-plus-btn,
  body[data-bot="albert"] .composer-form-modern #sendBtn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  body[data-bot="albert"] .composer-form-modern #messageInput {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body[data-bot="albert"] .composer-form-modern #sendBtn {
    grid-column: 3 !important;
  }
}


/* ---------- 6) Sehr schmale iPhones: noch etwas mehr Platz fürs Textfeld ---------- */

@media (max-width: 430px) {
  body[data-bot="albert"] .composer-form-modern {
    grid-template-columns: 42px minmax(0, 1fr) 42px !important;
    gap: 8px !important;
  }

  body[data-bot="albert"] .composer-form-modern .composer-plus-wrap,
  body[data-bot="albert"] .composer-form-modern .composer-plus-btn,
  body[data-bot="albert"] .composer-form-modern #sendBtn,
  body[data-bot="stephen"] .composer-form-simple #sendBtn,
  body[data-bot="jeffrey"] .composer-form-simple #sendBtn {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }

  body[data-bot] #messageInput {
    min-height: 42px !important;
    max-height: 112px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    line-height: 24px !important;
  }
}
/* =========================================================
   CLEAN FINAL COMPOSER FIX — Mai 2026
   Ein einziger Composer-Block statt konkurrierender Patches.
   ========================================================= */


/* Touch: keine Tooltip-Boxen auf Mobile */
@media (hover: none), (pointer: coarse) {
  body[data-bot] [data-tooltip]::before,
  body[data-bot] [data-tooltip]::after,
  body[data-bot] [data-tooltip]:hover::before,
  body[data-bot] [data-tooltip]:hover::after,
  body[data-bot] [data-tooltip]:focus::before,
  body[data-bot] [data-tooltip]:focus::after,
  body[data-bot] [data-tooltip]:active::before,
  body[data-bot] [data-tooltip]:active::after {
    content: none !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* Desktop: kein Scroll-Anker-Chaos beim Fokus */
@media (min-width: 681px) {
  body[data-bot] .messages,
  body[data-bot] .composer,
  body[data-bot] .composer-form,
  body[data-bot] .composer-form-modern,
  body[data-bot] .composer-form-simple,
  body[data-bot] #messageInput {
    overflow-anchor: none !important;
    scroll-margin: 0 !important;
  }
}


/* Mobile Grundlayout */
@media (max-width: 680px) {
  body[data-bot] .composer {
    padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
  }

  body[data-bot] .composer-form,
  body[data-bot] .composer-form-modern,
  body[data-bot] .composer-form-simple {
    display: grid !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 68px !important;
    padding: 8px !important;
  }

  body[data-bot] #messageInput,
  body[data-bot] .composer textarea,
  body[data-bot] .composer-form textarea,
  body[data-bot] .composer-form-modern textarea,
  body[data-bot] .composer-form-simple textarea {
    width: 100% !important;
    min-width: 0 !important;

    min-height: 52px !important;
    height: 52px !important;
    max-height: 140px !important;

    padding: 13px 8px !important;

    line-height: 1.35 !important;
    font-size: 16px !important;

    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    resize: none !important;
    overflow-y: hidden !important;

    display: block !important;
    align-self: center !important;

    -webkit-appearance: none !important;
    appearance: none !important;
  }

  body[data-bot] #messageInput:focus {
    outline: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body[data-bot] #messageInput.is-scrollable {
    overflow-y: auto !important;
  }
}


/* Albert: 3 Spalten mit Upload-Button */
@media (max-width: 680px) {
  body[data-bot="albert"] #chatForm.composer-form-modern {
    grid-template-columns: 52px minmax(0, 1fr) 52px !important;
  }

  body[data-bot="albert"] .composer-plus-wrap {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    align-self: center !important;
  }

  body[data-bot="albert"] #messageInput {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  body[data-bot="albert"] #sendBtn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
  }

  body[data-bot="albert"] .composer-plus-btn,
  body[data-bot="albert"] #sendBtn {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 17px !important;
  }
}


/* Stephen/Jeffrey: 2 Spalten ohne Upload */
@media (max-width: 680px) {
  body[data-bot="stephen"] .composer-form-simple,
  body[data-bot="jeffrey"] .composer-form-simple {
    grid-template-columns: minmax(0, 1fr) 52px !important;
  }

  body[data-bot="stephen"] #messageInput,
  body[data-bot="jeffrey"] #messageInput {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  body[data-bot="stephen"] #sendBtn,
  body[data-bot="jeffrey"] #sendBtn {
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;

    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    border-radius: 17px !important;
  }
}


/* Sehr schmale iPhones */
@media (max-width: 430px) {
  body[data-bot="albert"] #chatForm.composer-form-modern {
    grid-template-columns: 48px minmax(0, 1fr) 48px !important;
  }

  body[data-bot="stephen"] .composer-form-simple,
  body[data-bot="jeffrey"] .composer-form-simple {
    grid-template-columns: minmax(0, 1fr) 48px !important;
  }

  body[data-bot="albert"] .composer-plus-wrap,
  body[data-bot="albert"] .composer-plus-btn,
  body[data-bot="albert"] #sendBtn,
  body[data-bot="stephen"] #sendBtn,
  body[data-bot="jeffrey"] #sendBtn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 16px !important;
  }

  body[data-bot] #messageInput,
  body[data-bot] .composer textarea {
    min-height: 48px !important;
    height: 48px !important;
    max-height: 132px !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
/* =========================================================
   SAFE FIX: Albert Mobile Textarea vertical alignment
   Nur Albert, nur Mobile, kein Layout-Umbau.
   ========================================================= */

@media (max-width: 680px) {
  body[data-bot="albert"] #chatForm.composer-form-modern {
    align-items: center !important;
  }

  body[data-bot="albert"] #chatForm.composer-form-modern .composer-plus-wrap,
  body[data-bot="albert"] #chatForm.composer-form-modern #sendBtn {
    align-self: center !important;
  }

  body[data-bot="albert"] #chatForm.composer-form-modern #messageInput {
    align-self: center !important;

    min-height: 48px !important;
    height: 48px !important;
    max-height: 132px !important;

    padding-top: 13px !important;
    padding-bottom: 11px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;

    line-height: 22px !important;
    vertical-align: middle !important;

    transform: none !important;
    translate: none !important;
  }

  body[data-bot="albert"] #chatForm.composer-form-modern #messageInput:focus {
    padding-top: 13px !important;
    padding-bottom: 11px !important;
    line-height: 22px !important;
  }
}
/* =========================================================
   SAFE DESKTOP INPUT TEXT STABILITY
   Verhindert vertikales Springen des Textes in der Composer-Bubble.
   ========================================================= */

@media (min-width: 681px) {
  body[data-bot] #messageInput {
    min-height: 28px !important;
    height: 28px;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    line-height: 1.45 !important;
    overflow-y: hidden !important;
  }

  body[data-bot] #messageInput.is-scrollable {
    overflow-y: auto !important;
  }
}
/* =========================================================
   SAFE FIX: Desktop Composer Text Baseline Stability
   Verhindert, dass unterschiedliche Placeholder optisch höher/tiefer wirken.
   ========================================================= */

@media (min-width: 681px) {
  body[data-bot] #messageInput,
  body[data-bot] .composer-form textarea,
  body[data-bot] .composer-form-modern textarea,
  body[data-bot] .composer-form-simple textarea {
    min-height: 34px !important;
    height: 34px !important;
    max-height: 150px !important;

    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;

    line-height: 22px !important;
    font-size: 1rem !important;

    display: block !important;
    align-self: center !important;

    overflow-y: hidden !important;
  }

  body[data-bot] #messageInput:focus,
  body[data-bot] #messageInput:not(:placeholder-shown),
  body[data-bot] .composer.is-active #messageInput {
    min-height: 34px !important;
    height: 34px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 22px !important;
  }

  body[data-bot] #messageInput.is-scrollable {
    overflow-y: auto !important;
  }

  body[data-bot] #messageInput::placeholder {
    line-height: 22px !important;
  }
}
/* =========================================================
   SAFE FIX: Desktop Composer Text Baseline Stability
   Verhindert, dass unterschiedliche Placeholder optisch höher/tiefer wirken.
   ========================================================= */

@media (min-width: 681px) {
  body[data-bot] #messageInput,
  body[data-bot] .composer-form textarea,
  body[data-bot] .composer-form-modern textarea,
  body[data-bot] .composer-form-simple textarea {
    min-height: 34px !important;
    height: 34px !important;
    max-height: 150px !important;

    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;

    line-height: 22px !important;
    font-size: 1rem !important;

    display: block !important;
    align-self: center !important;

    overflow-y: hidden !important;
  }

  body[data-bot] #messageInput:focus,
  body[data-bot] #messageInput:not(:placeholder-shown),
  body[data-bot] .composer.is-active #messageInput {
    min-height: 34px !important;
    height: 34px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 22px !important;
  }

  body[data-bot] #messageInput.is-scrollable {
    overflow-y: auto !important;
  }

  body[data-bot] #messageInput::placeholder {
    line-height: 22px !important;
  }
}
/* =========================================================
   SAFE FIX: Chat-Listen nicht links abschneiden
   ========================================================= */

.message-content ol,
.message-content ul {
  padding-left: 1.9em !important;
  margin-left: 0 !important;
  list-style-position: outside !important;
}

.message-content li {
  padding-left: 0.15em !important;
}

.message-content li::marker {
  color: rgba(245, 247, 251, 0.86);
  font-weight: 650;
}

/* Auf Mobile etwas kompakter, aber weiterhin genug Platz */
@media (max-width: 680px) {
  .message-content ol,
  .message-content ul {
    padding-left: 1.65em !important;
  }
}
/* =========================================================
   FINAL PATCH — Thin Running Input Border
   Dünner laufender Rand während Bot generiert
   ========================================================= */

@property --composer-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

body[data-bot] {
  --bot-glow-rgb: var(--accent-rgb);
}

/* Form als stabile Glow-Fläche */
body[data-bot] .composer-form,
body[data-bot] .composer-form-modern,
body[data-bot] .composer-form-simple {
  position: relative;
  isolation: isolate;
  border-radius: 22px;
}

/* Dünner laufender Rand um die Chat-Eingabe-Zeile */
body[data-bot] .composer-form::after,
body[data-bot] .composer-form-modern::after,
body[data-bot] .composer-form-simple::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 24px;
  pointer-events: none;
  opacity: 0;
  z-index: -1;

  padding: 1.5px;
  background:
    conic-gradient(
      from var(--composer-border-angle),
      rgba(var(--bot-glow-rgb), 0.00) 0deg,
      rgba(var(--bot-glow-rgb), 0.00) 58deg,
      rgba(var(--bot-glow-rgb), 0.95) 92deg,
      rgba(255,255,255,0.80) 112deg,
      rgba(var(--bot-glow-rgb), 0.95) 132deg,
      rgba(var(--bot-glow-rgb), 0.00) 170deg,
      rgba(var(--bot-glow-rgb), 0.00) 360deg
    );

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  filter:
    drop-shadow(0 0 8px rgba(var(--bot-glow-rgb), 0.34))
    drop-shadow(0 0 18px rgba(var(--bot-glow-rgb), 0.16));

  transition: opacity 0.18s ease;
}

/* Aktiv nur während Antwort läuft */
body[data-bot].is-generating .composer-form::after,
body[data-bot].is-generating .composer-form-modern::after,
body[data-bot].is-generating .composer-form-simple::after {
  opacity: 1;
  animation: composerBorderRun 2.8s linear infinite;
}

/* Textarea selbst bleibt ruhig */
body[data-bot].is-generating .composer textarea {
  border-color: rgba(var(--bot-glow-rgb), 0.30) !important;
  box-shadow:
    0 0 0 1px rgba(var(--bot-glow-rgb), 0.08),
    inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

/* Aktive Web/Finance/Deep-Research Buttons: ruhig aktiv */
body[data-bot] .mode-toggle-btn.active {
  border-color: rgba(var(--bot-glow-rgb), 0.42) !important;
  background:
    linear-gradient(
      180deg,
      rgba(var(--bot-glow-rgb), 0.16),
      rgba(var(--bot-glow-rgb), 0.07)
    ),
    rgba(255,255,255,0.045) !important;
  color: #fff !important;
}

/* Während Generierung bekommen aktive Mode Buttons nur dezenten Randglow */
body[data-bot].is-generating .mode-toggle-btn.active {
  box-shadow:
    0 0 0 1px rgba(var(--bot-glow-rgb), 0.16),
    0 0 18px rgba(var(--bot-glow-rgb), 0.18),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;
}

/* Typing-Dots in Botfarbe */
body[data-bot].is-generating .typing span {
  background: rgba(var(--bot-glow-rgb), 0.95) !important;
  box-shadow: 0 0 14px rgba(var(--bot-glow-rgb), 0.50);
}

@keyframes composerBorderRun {
  to {
    --composer-border-angle: 360deg;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-bot].is-generating .composer-form::after,
  body[data-bot].is-generating .composer-form-modern::after,
  body[data-bot].is-generating .composer-form-simple::after {
    animation: none !important;
  }
}
.message-error-box {
  margin: 0.45rem 0 0.25rem;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: rgba(127, 29, 29, 0.16);
  border-radius: 16px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

.message-error-title {
  font-size: 0.86rem;
  font-weight: 760;
  color: rgba(254, 202, 202, 0.98);
  margin-bottom: 0.25rem;
}

.message-error-text {
  font-size: 0.82rem;
  line-height: 1.45;
  color: rgba(254, 226, 226, 0.88);
}
.project-list,
.project-conversation-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.project-folder {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 8px;
  background: rgba(255,255,255,0.035);
}

.project-folder.active {
  border-color: rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.055);
}

.project-folder-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-folder-toggle {
  flex: 1;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  padding: 6px;
  border-radius: 10px;
}

.project-folder-toggle:hover {
  background: rgba(255,255,255,0.06);
}

.project-folder-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-folder-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
}

.project-folder-main small {
  opacity: 0.62;
  font-size: 11px;
}

.project-folder-settings {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 8px;
}

.project-retention-select,
.project-reset-docs-btn,
.project-delete-btn,
.conversation-legacy-btn {
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: inherit;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
}

.project-retention-select {
  max-width: 92px;
}

.project-reset-docs-btn {
  flex: 1;
}

.project-delete-btn,
.conversation-legacy-btn {
  min-width: 28px;
}

.conversation-legacy-btn.active {
  background: rgba(255, 180, 70, 0.14);
  border-color: rgba(255, 180, 70, 0.35);
}

.expiry-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(255, 153, 0, 0.18);
  color: #ffb44c;
  font-size: 11px;
  font-weight: 700;
}

.legacy-pin {
  font-size: 12px;
}

.project-chat-row {
  margin-left: 8px;
}

.project-empty {
  padding: 6px 8px;
  font-size: 12px;
  opacity: 0.6;
}
/* =========================================================
   SIDEBAR COMPACT PROJECT UI — Mai 2026
   Nur Frontend-Design. Keine Serverlogik.
   ========================================================= */

.app-sidebar {
  gap: 14px;
}

.app-sidebar-section {
  padding-top: 12px !important;
}

.app-sidebar-row {
  margin-bottom: 8px !important;
}

.project-list,
.project-conversation-list,
.conversation-list {
  gap: 7px !important;
}

/* ---------- Einheitliche Icon-Buttons ---------- */

.sidebar-icon-btn,
.sidebar-mini-btn {
  appearance: none;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 13px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.045);
  color: rgba(245,247,251,0.84);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  line-height: 1;
  font-size: 18px;
  padding: 0;
  transition:
    transform 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease,
    opacity 0.16s ease;
}

.sidebar-icon-btn:hover,
.sidebar-mini-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.075);
  border-color: rgba(255,255,255,0.15);
  color: #fff;
}

.sidebar-icon-btn:disabled,
.sidebar-mini-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.sidebar-icon-btn svg,
.conversation-trash-btn svg,
.conversation-legacy-btn svg,
.legacy-pin svg {
  width: 17px;
  height: 17px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Projektordner kompakt ---------- */

.project-folder {
  border: 1px solid rgba(255,255,255,0.075) !important;
  border-radius: 18px !important;
  padding: 7px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.028)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.025);
}

.project-folder.active {
  border-color: rgba(var(--accent-rgb, 124, 92, 255), 0.32) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--accent-rgb, 124, 92, 255), 0.12), transparent 46%),
    linear-gradient(180deg, rgba(255,255,255,0.058), rgba(255,255,255,0.032)) !important;
}

.project-folder-header {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 34px;
  gap: 7px !important;
  align-items: center !important;
}

.project-folder-toggle {
  min-width: 0;
  min-height: 44px;
  padding: 8px 9px !important;
  border-radius: 13px !important;
  display: grid !important;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.project-folder-toggle:hover {
  background: rgba(255,255,255,0.055) !important;
}

.project-chevron {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(245,247,251,0.68);
  font-size: 18px;
  line-height: 1;
}

.project-folder-main {
  min-width: 0;
  gap: 3px !important;
}

.project-folder-title {
  min-width: 0;
  display: block !important;
  font-size: 0.9rem !important;
  font-weight: 760 !important;
  line-height: 1.18;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-folder-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: rgba(158,164,179,0.88);
  font-size: 0.73rem;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-folder-body {
  padding: 7px 0 2px;
}

.project-folder-body[hidden] {
  display: none !important;
}

/* ---------- Expiry Badges ruhiger ---------- */

.expiry-badge {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0 !important;
  height: 19px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  font-size: 0.66rem !important;
  font-weight: 780 !important;
  line-height: 1 !important;
  white-space: nowrap;
}

.expiry-badge-warning {
  color: #ffd89a !important;
  background: rgba(255, 190, 90, 0.12) !important;
  border: 1px solid rgba(255, 190, 90, 0.18) !important;
}

.expiry-badge-danger {
  color: #ffd0d0 !important;
  background: rgba(255, 95, 95, 0.13) !important;
  border: 1px solid rgba(255, 95, 95, 0.22) !important;
}

.expiry-badge-legacy {
  color: #d9ffe8 !important;
  background: rgba(46, 204, 113, 0.11) !important;
  border: 1px solid rgba(46, 204, 113, 0.18) !important;
}

/* ---------- Projekt-Chats kompakter ---------- */

.project-conversation-list {
  padding-left: 7px;
  border-left: 1px solid rgba(255,255,255,0.07);
}

.conversation-row,
.project-chat-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 30px 30px !important;
  gap: 6px !important;
  align-items: stretch !important;
  margin-left: 0 !important;
}

.conversation-item {
  min-width: 0;
}

.conversation-item-compact,
.project-chat-row .conversation-item {
  min-height: 48px;
  padding: 9px 10px !important;
  border-radius: 15px !important;
}

.conversation-title-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

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

.conversation-item small {
  font-size: 0.72rem !important;
  opacity: 0.64;
}

.project-chat-row .sidebar-icon-btn,
.project-chat-row .conversation-trash-btn,
.project-chat-row .conversation-legacy-btn {
  width: 30px;
  min-width: 30px;
  height: auto;
  min-height: 48px;
  border-radius: 14px;
  opacity: 0.72;
}

.project-chat-row:hover .sidebar-icon-btn,
.project-chat-row:hover .conversation-trash-btn,
.project-chat-row:hover .conversation-legacy-btn {
  opacity: 1;
}

/* Delete nicht mehr als rote Säule */
.conversation-trash-btn {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(245,247,251,0.58) !important;
}

.conversation-trash-btn:hover {
  background: rgba(255, 95, 95, 0.11) !important;
  border-color: rgba(255, 95, 95, 0.22) !important;
  color: #ffd0d0 !important;
}

/* Legacy Pin minimalistischer */
.conversation-legacy-btn {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: rgba(245,247,251,0.56) !important;
  font-size: 0 !important;
}

.conversation-legacy-btn.active {
  color: #ffd89a !important;
  background: rgba(255, 190, 90, 0.10) !important;
  border-color: rgba(255, 190, 90, 0.20) !important;
}

.legacy-pin {
  width: 17px;
  height: 17px;
  min-width: 17px;
  color: #ffd89a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Projektoptionen einklappbar ---------- */

.project-folder-settings {
  display: block !important;
  margin: 8px 0 0 !important;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.065);
}

.project-folder-settings summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  width: 100%;
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 13px;
  color: rgba(245,247,251,0.72);
  background: rgba(255,255,255,0.032);
  border: 1px solid rgba(255,255,255,0.065);
  font-size: 0.76rem;
  font-weight: 760;
}

.project-folder-settings summary::-webkit-details-marker {
  display: none;
}

.project-folder-settings summary::after {
  content: "›";
  float: right;
  color: rgba(245,247,251,0.46);
  font-size: 16px;
  line-height: 1;
}

.project-folder-settings[open] summary::after {
  content: "⌄";
}

.project-settings-inner {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.project-retention-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.065);
  background: rgba(255,255,255,0.032);
}

.project-retention-control span {
  color: rgba(245,247,251,0.68);
  font-size: 0.74rem;
  font-weight: 720;
}

/* Select bleibt logisch gleich, sieht aber wie Pill aus */
.project-retention-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  max-width: none !important;
  min-width: 106px;
  height: 30px;
  padding: 0 28px 0 11px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  background:
    linear-gradient(45deg, transparent 50%, rgba(245,247,251,0.66) 50%) calc(100% - 14px) 12px / 5px 5px no-repeat,
    linear-gradient(135deg, rgba(245,247,251,0.66) 50%, transparent 50%) calc(100% - 9px) 12px / 5px 5px no-repeat,
    rgba(255,255,255,0.055) !important;
  color: rgba(245,247,251,0.9) !important;
  font-size: 0.75rem !important;
  font-weight: 760;
  cursor: pointer;
}

.project-reset-docs-btn,
.project-delete-btn {
  width: 100%;
  min-height: 34px;
  border-radius: 14px !important;
  padding: 8px 10px !important;
  font-size: 0.76rem !important;
  font-weight: 760;
  cursor: pointer;
}

.project-reset-docs-btn {
  border: 1px solid rgba(255,255,255,0.075) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(245,247,251,0.78) !important;
}

.project-reset-docs-btn:hover {
  background: rgba(255,255,255,0.075) !important;
  color: #fff !important;
}

.project-delete-btn {
  border: 1px solid rgba(255, 95, 95, 0.16) !important;
  background: rgba(255, 95, 95, 0.07) !important;
  color: #ffd0d0 !important;
}

.project-delete-btn:hover {
  background: rgba(255, 95, 95, 0.13) !important;
  border-color: rgba(255, 95, 95, 0.28) !important;
}

/* ---------- Normale Chats ruhiger ---------- */

#conversationList > .conversation-row {
  grid-template-columns: minmax(0, 1fr) 30px 30px !important;
}

#conversationList .conversation-item {
  min-height: 48px;
  padding: 9px 10px !important;
  border-radius: 15px !important;
}

/* ---------- Eingeklappte Sidebar: keine kaputten Projektreste ---------- */

.app-sidebar.is-collapsed .project-list,
.app-sidebar.is-collapsed .project-folder,
.app-sidebar.is-collapsed .project-folder-body,
.app-sidebar.is-collapsed .project-folder-settings,
.app-sidebar.is-collapsed #projectList {
  display: none !important;
}

/* ---------- Mobile ---------- */

@media (max-width: 980px) {
  .app-sidebar {
    max-height: calc(100vh - 16px);
    overflow: hidden;
  }

  .app-sidebar:not(.is-collapsed) {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .project-folder {
    border-radius: 16px !important;
  }

  .project-folder-header {
    grid-template-columns: minmax(0, 1fr) 32px;
  }

  .project-folder-toggle {
    min-height: 42px;
  }

  .project-folder-body {
    padding-top: 6px;
  }

  .project-conversation-list {
    padding-left: 6px;
  }

  .conversation-row,
  .project-chat-row,
  #conversationList > .conversation-row {
    grid-template-columns: minmax(0, 1fr) 30px 30px !important;
  }

  .project-retention-control {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .project-retention-select {
    width: 100%;
  }
}

@media (max-width: 680px) {
  .app-sidebar {
    border-radius: 24px !important;
    padding: 12px !important;
  }

  .app-sidebar-header {
    padding-bottom: 10px !important;
  }

  .bot-switch-list {
    gap: 6px !important;
  }

  .bot-switch-item {
    min-height: 48px;
    padding: 10px 11px !important;
    border-radius: 15px !important;
  }

  .project-folder-title {
    font-size: 0.86rem !important;
  }

  .project-folder-meta {
    font-size: 0.7rem;
  }

  .project-chat-row .sidebar-icon-btn,
  .project-chat-row .conversation-trash-btn,
  .project-chat-row .conversation-legacy-btn,
  #conversationList .sidebar-icon-btn,
  #conversationList .conversation-trash-btn,
  #conversationList .conversation-legacy-btn {
    width: 28px;
    min-width: 28px;
  }

  .conversation-row,
  .project-chat-row,
  #conversationList > .conversation-row {
    grid-template-columns: minmax(0, 1fr) 28px 28px !important;
    gap: 5px !important;
  }
}
/* =========================================================
   SIDEBAR ACTION MENU V2 — clean ... menus
   ========================================================= */

.app-sidebar {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 14px !important;
  overflow: hidden !important;
}

.app-sidebar-section-grow {
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-right: 2px;
  scrollbar-width: thin;
}

.app-sidebar-footer {
  flex-shrink: 0 !important;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: linear-gradient(180deg, rgba(15,15,22,0), rgba(15,15,22,0.92) 24%);
}

/* Alte Zwischenlösung optisch deaktivieren */
.conversation-legacy-btn,
.conversation-trash-btn,
.project-folder-settings,
.project-retention-select,
.project-reset-docs-btn,
.project-delete-btn {
  display: none !important;
}

/* Rows jetzt: Content + ... */
.conversation-row-v2,
.project-chat-row.conversation-row-v2,
#conversationList > .conversation-row-v2 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.conversation-item-compact {
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 11px 13px !important;
  border-radius: 18px !important;
}

.conversation-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

.conversation-title-text {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.conversation-more-btn {
  width: 38px !important;
  min-width: 38px !important;
  min-height: 54px !important;
  height: auto !important;
  border-radius: 18px !important;
  opacity: 0.72;
}

.conversation-more-btn:hover {
  opacity: 1;
}

.conversation-more-btn svg {
  width: 19px !important;
  height: 19px !important;
  fill: currentColor !important;
  stroke: none !important;
}

/* Legacy nur noch als Status im Titel */
.legacy-pin {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  color: #ffd89a !important;
  opacity: 0.95;
}

.legacy-pin svg {
  width: 18px !important;
  height: 18px !important;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.05;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Projektkarte V2 */
.project-folder-v2 {
  padding: 8px !important;
  border-radius: 22px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.060), rgba(255,255,255,0.030)) !important;
}

.project-folder-v2.active {
  border-color: rgba(124, 92, 255, 0.35) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 92, 255, 0.15), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.032)) !important;
}

.project-folder-header-v2 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 42px !important;
  gap: 8px !important;
  align-items: stretch !important;
}

.project-folder-toggle {
  min-width: 0 !important;
  min-height: 58px !important;
  border-radius: 18px !important;
  padding: 11px 13px !important;
  display: flex !important;
  align-items: center !important;
  border: 0 !important;
  background: transparent !important;
}

.project-folder-toggle:hover {
  background: rgba(255,255,255,0.045) !important;
}

.project-folder-title-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 22px !important;
  gap: 8px !important;
  align-items: center !important;
  width: 100%;
}

.project-folder-title {
  min-width: 0 !important;
  display: block !important;
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  line-height: 1.18 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.project-folder-chevron {
  width: 22px;
  height: 22px;
  color: rgba(245,247,251,0.56);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.project-folder-chevron svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.16s ease;
}

.project-folder-chevron svg.is-open {
  transform: rotate(180deg);
}

.project-folder-meta {
  margin-top: 3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
  color: rgba(158,164,179,0.88) !important;
  font-size: 0.74rem !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.project-folder-body-v2 {
  padding: 8px 0 2px !important;
}

.project-folder-body-v2[hidden] {
  display: none !important;
}

.project-conversation-list-v2 {
  padding-left: 10px !important;
  margin-left: 8px !important;
  border-left: 1px solid rgba(255,255,255,0.08) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

/* Projekt verwalten Button */
.project-manage-btn {
  width: 100%;
  min-height: 42px;
  margin-top: 9px;
  border: 1px solid rgba(255,255,255,0.075);
  border-radius: 16px;
  background: rgba(255,255,255,0.035);
  color: rgba(245,247,251,0.78);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  font-size: 0.82rem;
  font-weight: 780;
}

.project-manage-btn:hover {
  background: rgba(255,255,255,0.065);
  color: #fff;
}

.project-manage-dots {
  width: 22px;
  height: 22px;
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.project-manage-dots svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Action Sheet / Popover */
.sidebar-action-sheet {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.34);
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

.sidebar-action-sheet.is-open {
  opacity: 1;
  pointer-events: auto;
}

.sidebar-action-card {
  position: fixed;
  left: 22px;
  bottom: 22px;
  width: min(390px, calc(100vw - 44px));
  max-height: min(78vh, 620px);
  overflow-y: auto;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at 0% 0%, rgba(124,92,255,0.16), transparent 38%),
    rgba(18,18,25,0.96);
  box-shadow: 0 24px 80px rgba(0,0,0,0.55);
  padding: 14px;
  transform: translateY(18px) scale(0.98);
  transition: transform 0.18s ease;
}

.sidebar-action-sheet.is-open .sidebar-action-card {
  transform: translateY(0) scale(1);
}

.sidebar-action-handle {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  margin: 2px auto 14px;
}

.sidebar-action-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 14px;
}

.sidebar-action-head-text {
  min-width: 0;
}

.sidebar-action-kicker,
.sidebar-action-label {
  color: rgba(158,164,179,0.88);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 760;
}

.sidebar-action-title {
  margin-top: 5px;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 820;
  word-break: break-word;
}

.sidebar-action-close {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(245,247,251,0.82);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.sidebar-action-section {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 14px 0;
}

.retention-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.retention-choice-btn {
  min-height: 42px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.045);
  color: rgba(245,247,251,0.82);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 780;
}

.retention-choice-btn:hover {
  background: rgba(255,255,255,0.075);
  color: #fff;
}

.retention-choice-btn.active {
  color: #fff;
  background: rgba(124,92,255,0.22);
  border-color: rgba(124,92,255,0.38);
}

.sidebar-action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sidebar-action-item {
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 17px;
  background: rgba(255,255,255,0.045);
  color: rgba(245,247,251,0.88);
  cursor: pointer;
  padding: 12px 13px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sidebar-action-item:hover {
  background: rgba(255,255,255,0.075);
  color: #fff;
}

.sidebar-action-item span {
  font-size: 0.9rem;
  font-weight: 800;
}

.sidebar-action-item small {
  color: rgba(158,164,179,0.9);
  font-size: 0.76rem;
  line-height: 1.35;
}

.sidebar-action-item.danger {
  color: #ffd0d0;
  background: rgba(255,95,95,0.07);
  border-color: rgba(255,95,95,0.16);
}

.sidebar-action-item.danger:hover {
  background: rgba(255,95,95,0.13);
  border-color: rgba(255,95,95,0.28);
}

/* Collapsed Sidebar: neue Listen sauber verstecken */
.app-sidebar.is-collapsed .conversation-more-btn,
.app-sidebar.is-collapsed .project-manage-btn,
.app-sidebar.is-collapsed .project-folder-v2,
.app-sidebar.is-collapsed .project-list,
.app-sidebar.is-collapsed #projectList {
  display: none !important;
}

@media (min-width: 981px) {
  .sidebar-action-card {
    left: max(22px, calc((100vw - 1440px) / 2 + 22px));
  }
}

@media (max-width: 980px) {
  .app-sidebar {
    max-height: calc(var(--app-vh, 100vh) - 20px) !important;
  }

  .app-sidebar:not(.is-collapsed) {
    overflow: hidden !important;
  }

  .app-sidebar-section-grow {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .sidebar-action-card {
    left: 10px;
    right: 10px;
    bottom: 10px;
    width: auto;
    max-height: min(82vh, 680px);
    border-radius: 28px;
  }
}

@media (max-width: 680px) {
  .conversation-row-v2,
  .project-chat-row.conversation-row-v2,
  #conversationList > .conversation-row-v2 {
    grid-template-columns: minmax(0, 1fr) 36px !important;
    gap: 7px !important;
  }

  .conversation-more-btn {
    width: 36px !important;
    min-width: 36px !important;
  }

  .conversation-item-compact {
    min-height: 52px !important;
    padding: 10px 12px !important;
  }

  .project-folder-header-v2 {
    grid-template-columns: minmax(0, 1fr) 40px !important;
  }

  .project-folder-toggle {
    min-height: 56px !important;
  }

  .project-conversation-list-v2 {
    margin-left: 6px !important;
    padding-left: 8px !important;
  }

  .retention-choice-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SIDEBAR V3 — Bot Dropdown, Tabs, Single Scroll Area
   ========================================================= */

body[data-bot] .app-sidebar.app-sidebar-v3 {
  display: grid !important;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  overflow: hidden !important;
  padding: 14px !important;
  min-height: calc(100vh - 48px) !important;
  max-height: calc(100vh - 48px) !important;
}

/* Tooltips in der Sidebar komplett aus, weil sie an der Kante abgeschnitten wirken */
body[data-bot] .app-sidebar [data-tooltip]::before,
body[data-bot] .app-sidebar [data-tooltip]::after {
  display: none !important;
}

/* Alte Sidebar-Scrollcontainer neutralisieren */
body[data-bot] .conversation-list,
body[data-bot] .project-list,
body[data-bot] .project-conversation-list,
body[data-bot] .bot-switch-list {
  overflow: visible !important;
  max-height: none !important;
}

/* Einziger echter Scrollbereich */
body[data-bot] .sidebar-scroll-area-v3 {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 0 !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body[data-bot] .sidebar-scroll-area-v3::-webkit-scrollbar,
body[data-bot] .sidebar-scroll-area-v3 *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* Safari-Dinger / Resize-ähnliche Scrollleisten minimieren */
body[data-bot] .app-sidebar,
body[data-bot] .sidebar-scroll-area-v3,
body[data-bot] .conversation-list,
body[data-bot] .project-list-v3,
body[data-bot] .project-conversation-list-v3 {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Bot Dropdown jetzt auch Desktop */
body[data-bot] .sidebar-bot-section {
  position: relative !important;
  padding: 0 !important;
}

body[data-bot] .mobile-bot-toggle.sidebar-bot-toggle-v3 {
  display: flex !important;
  width: 100% !important;
  min-height: 58px !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 18px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.062), rgba(255,255,255,0.032)) !important;
  color: var(--text, #f5f7fb) !important;
  cursor: pointer !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  text-align: left !important;
}

body[data-bot] .mobile-bot-toggle span:first-child {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

body[data-bot] .mobile-bot-toggle small {
  color: rgba(245,247,251,0.52) !important;
  font-size: 0.68rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-weight: 760 !important;
}

body[data-bot] .mobile-bot-toggle strong {
  color: #fff !important;
  font-size: 0.98rem !important;
  line-height: 1.15 !important;
  font-weight: 840 !important;
}

body[data-bot] .mobile-bot-toggle em {
  color: rgba(245,247,251,0.58) !important;
  font-size: 0.74rem !important;
  line-height: 1.2 !important;
  font-style: normal !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-bot] .mobile-bot-toggle-arrow {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.055) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body[data-bot] .mobile-bot-toggle-arrow svg {
  width: 18px !important;
  height: 18px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.25 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  transition: transform 0.16s ease !important;
}

body[data-bot] .mobile-bot-section.is-open .mobile-bot-toggle-arrow svg {
  transform: rotate(180deg) !important;
}

/* Bot-Menü als echtes Dropdown, nicht als permanenter Platzfresser */
body[data-bot] .sidebar-bot-menu-v3 {
  display: none !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 8px) !important;
  z-index: 250 !important;
  padding: 8px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,0.11) !important;
  background: rgba(18, 18, 25, 0.98) !important;
  backdrop-filter: blur(18px) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,0.42) !important;
  gap: 6px !important;
}

body[data-bot] .mobile-bot-section.is-open .sidebar-bot-menu-v3 {
  display: flex !important;
}

body[data-bot] .sidebar-bot-menu-v3 .bot-switch-item {
  min-height: 48px !important;
  border-radius: 14px !important;
  padding: 10px 11px !important;
}

/* Tabs */
body[data-bot] .sidebar-tabs-v3 {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
  padding: 4px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.065) !important;
}

body[data-bot] .sidebar-tab-btn {
  min-height: 36px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: rgba(245,247,251,0.62) !important;
  cursor: pointer !important;
  font-size: 0.82rem !important;
  font-weight: 780 !important;
}

body[data-bot] .sidebar-tab-btn.active {
  color: #fff !important;
  background: rgba(124, 92, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

/* Panels */
body[data-bot] .sidebar-panel-v3[hidden] {
  display: none !important;
}

body[data-bot] .sidebar-panel-v3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-height: 0 !important;
}

body[data-bot] .sidebar-panel-head-v3 {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 2px 0 4px !important;
}

body[data-bot] .sidebar-panel-head-v3 div {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

body[data-bot] .sidebar-panel-head-v3 strong {
  color: #fff !important;
  font-size: 0.88rem !important;
  font-weight: 830 !important;
}

body[data-bot] .sidebar-panel-head-v3 small {
  color: rgba(245,247,251,0.52) !important;
  font-size: 0.72rem !important;
}

/* Projektliste */
body[data-bot] .project-list-v3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

body[data-bot] .project-list-row-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 7px !important;
  align-items: stretch !important;
}

body[data-bot] .project-open-btn {
  min-width: 0 !important;
  min-height: 54px !important;
  border: 1px solid rgba(255,255,255,0.075) !important;
  border-radius: 17px !important;
  background: rgba(255,255,255,0.042) !important;
  color: var(--text, #f5f7fb) !important;
  cursor: pointer !important;
  text-align: left !important;
  padding: 10px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

body[data-bot] .project-open-btn:hover {
  background: rgba(255,255,255,0.07) !important;
}

body[data-bot] .project-list-row-v3.active .project-open-btn {
  background: rgba(124, 92, 255, 0.16) !important;
  border-color: rgba(124, 92, 255, 0.32) !important;
}

body[data-bot] .project-list-title,
body[data-bot] .project-list-meta {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-bot] .project-list-title {
  font-size: 0.88rem !important;
  font-weight: 820 !important;
}

body[data-bot] .project-list-meta {
  color: rgba(245,247,251,0.54) !important;
  font-size: 0.72rem !important;
}

/* Projekt-Detail */
body[data-bot] .project-detail-header-v3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

body[data-bot] .project-back-btn {
  width: fit-content !important;
  min-height: 32px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(245,247,251,0.70) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 0 2px !important;
  font-size: 0.78rem !important;
  font-weight: 780 !important;
}

body[data-bot] .project-detail-card-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 8px !important;
  align-items: stretch !important;
  padding: 10px !important;
  border: 1px solid rgba(124, 92, 255, 0.22) !important;
  border-radius: 18px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 92, 255, 0.13), transparent 48%),
    rgba(255,255,255,0.042) !important;
}

body[data-bot] .project-detail-card-v3 div {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

body[data-bot] .project-detail-card-v3 strong {
  color: #fff !important;
  font-size: 0.94rem !important;
  font-weight: 840 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-bot] .project-detail-card-v3 small {
  color: rgba(245,247,251,0.58) !important;
  font-size: 0.72rem !important;
}

body[data-bot] .project-new-chat-wide-btn {
  min-height: 42px !important;
  width: 100% !important;
  border: 1px solid rgba(255,255,255,0.075) !important;
  border-radius: 15px !important;
  background: rgba(255,255,255,0.044) !important;
  color: rgba(245,247,251,0.84) !important;
  cursor: pointer !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
}

body[data-bot] .project-new-chat-wide-btn:hover {
  background: rgba(255,255,255,0.072) !important;
  color: #fff !important;
}

body[data-bot] .project-conversation-list-v3 {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
}

/* Chatrows */
body[data-bot] .conversation-row-v3 {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 7px !important;
  align-items: stretch !important;
}

body[data-bot] .conversation-item-v3 {
  min-width: 0 !important;
  min-height: 54px !important;
  padding: 10px 12px !important;
  border-radius: 17px !important;
}

body[data-bot] .conversation-row-v3.active .conversation-item-v3 {
  background: rgba(124, 92, 255, 0.16) !important;
  border-color: rgba(124, 92, 255, 0.32) !important;
}

body[data-bot] .conversation-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  min-width: 0 !important;
}

body[data-bot] .conversation-title-text {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body[data-bot] .conversation-more-btn,
body[data-bot] .project-manage-btn,
body[data-bot] .project-list-row-v3 .project-new-chat-btn {
  width: 38px !important;
  min-width: 38px !important;
  min-height: 54px !important;
  height: auto !important;
  border-radius: 17px !important;
  border: 1px solid rgba(255,255,255,0.075) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(245,247,251,0.62) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

body[data-bot] .project-manage-btn {
  min-height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body[data-bot] .conversation-more-btn:hover,
body[data-bot] .project-manage-btn:hover,
body[data-bot] .project-list-row-v3 .project-new-chat-btn:hover {
  background: rgba(255,255,255,0.075) !important;
  color: #fff !important;
}

body[data-bot] .conversation-more-btn svg,
body[data-bot] .project-manage-btn svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  stroke: none !important;
}

/* Alte Zwischenlösung hart neutralisieren */
body[data-bot] .conversation-legacy-btn,
body[data-bot] .conversation-trash-btn,
body[data-bot] .project-folder,
body[data-bot] .project-folder-settings,
body[data-bot] .project-retention-select,
body[data-bot] .project-reset-docs-btn,
body[data-bot] .project-delete-btn,
body[data-bot] #deleteConversationBtn {
  display: none !important;
}

/* Legacy Status im Text */
body[data-bot] .legacy-pin {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  color: #ffd89a !important;
  opacity: 0.95 !important;
}

body[data-bot] .legacy-pin svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.05 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Footer stabil unten */
body[data-bot] .sidebar-footer-v3 {
  flex-shrink: 0 !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}

/* Action Sheet */
body[data-bot] .sidebar-action-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  background: rgba(0,0,0,0.34) !important;
  backdrop-filter: blur(8px) !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
}

body[data-bot] .sidebar-action-sheet.is-open {
  opacity: 1;
  pointer-events: auto;
}

body[data-bot] .sidebar-action-card {
  position: fixed !important;
  left: 22px !important;
  bottom: 22px !important;
  width: min(390px, calc(100vw - 44px)) !important;
  max-height: min(78vh, 620px) !important;
  overflow-y: auto !important;
  border-radius: 28px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(124,92,255,0.16), transparent 38%),
    rgba(18,18,25,0.96) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.55) !important;
  padding: 14px !important;
  transform: translateY(18px) scale(0.98);
  transition: transform 0.18s ease;
  scrollbar-width: none !important;
}

body[data-bot] .sidebar-action-card::-webkit-scrollbar {
  display: none !important;
}

body[data-bot] .sidebar-action-sheet.is-open .sidebar-action-card {
  transform: translateY(0) scale(1);
}

body[data-bot] .sidebar-action-handle {
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  margin: 2px auto 14px;
}

body[data-bot] .sidebar-action-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 2px 14px;
}

body[data-bot] .sidebar-action-head-text {
  min-width: 0;
}

body[data-bot] .sidebar-action-kicker,
body[data-bot] .sidebar-action-label {
  color: rgba(158,164,179,0.88);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 760;
}

body[data-bot] .sidebar-action-title {
  margin-top: 5px;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 820;
  word-break: break-word;
}

body[data-bot] .sidebar-action-close {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(245,247,251,0.82);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

body[data-bot] .sidebar-action-section {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 14px 0;
}

body[data-bot] .retention-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

body[data-bot] .retention-choice-btn {
  min-height: 42px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.045);
  color: rgba(245,247,251,0.82);
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 780;
}

body[data-bot] .retention-choice-btn.active {
  color: #fff;
  background: rgba(124,92,255,0.22);
  border-color: rgba(124,92,255,0.38);
}

body[data-bot] .sidebar-action-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

body[data-bot] .sidebar-action-item {
  width: 100%;
  min-height: 58px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 17px;
  background: rgba(255,255,255,0.045);
  color: rgba(245,247,251,0.88);
  cursor: pointer;
  padding: 12px 13px;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

body[data-bot] .sidebar-action-item span {
  font-size: 0.9rem;
  font-weight: 800;
}

body[data-bot] .sidebar-action-item small {
  color: rgba(158,164,179,0.9);
  font-size: 0.76rem;
  line-height: 1.35;
}

body[data-bot] .sidebar-action-item.danger {
  color: #ffd0d0;
  background: rgba(255,95,95,0.07);
  border-color: rgba(255,95,95,0.16);
}

/* Eingeklappt */
body[data-bot] .app-sidebar.is-collapsed {
  grid-template-rows: auto !important;
  min-height: auto !important;
  max-height: 76px !important;
  overflow: hidden !important;
}

body[data-bot] .app-sidebar.is-collapsed .sidebar-bot-section,
body[data-bot] .app-sidebar.is-collapsed .sidebar-tabs-v3,
body[data-bot] .app-sidebar.is-collapsed .sidebar-scroll-area-v3,
body[data-bot] .app-sidebar.is-collapsed .sidebar-footer-v3 {
  display: none !important;
}

/* Desktop: Dropdown trotzdem sichtbar, alte Regel überschreiben */
@media (min-width: 981px) {
  body[data-bot] .mobile-bot-toggle {
    display: flex !important;
  }
}

/* Mobile */
@media (max-width: 980px) {
  body[data-bot] .app-sidebar.app-sidebar-v3 {
    position: sticky !important;
    top: 8px !important;
    z-index: 220 !important;
    min-height: auto !important;
    max-height: calc(var(--app-vh, 100vh) - 20px) !important;
  }

  body[data-bot] .app-sidebar.app-sidebar-v3:not(.is-collapsed) {
    min-height: min(620px, calc(var(--app-vh, 100vh) - 20px)) !important;
  }

  body[data-bot] .sidebar-action-card {
    left: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    width: auto !important;
    max-height: min(82vh, 680px) !important;
  }
}

@media (max-width: 680px) {
  body[data-bot] .app-sidebar.app-sidebar-v3 {
    padding: 12px !important;
    border-radius: 22px !important;
  }

  body[data-bot] .mobile-bot-toggle.sidebar-bot-toggle-v3 {
    min-height: 54px !important;
  }

  body[data-bot] .conversation-row-v3,
  body[data-bot] .project-list-row-v3 {
    grid-template-columns: minmax(0, 1fr) 36px !important;
  }

  body[data-bot] .conversation-more-btn,
  body[data-bot] .project-manage-btn,
  body[data-bot] .project-list-row-v3 .project-new-chat-btn {
    width: 36px !important;
    min-width: 36px !important;
  }

  body[data-bot] .retention-choice-grid {
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   SIDEBAR V3 FINAL — Clean full-width chat cards
   ========================================================= */

/* Alte Sidebar-Zeilenlogik für V3 hart neutralisieren */
body[data-bot] .conversation-row.conversation-row-v3 {
  width: 100% !important;
  min-width: 0 !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 54px !important;
  gap: 0 !important;
  align-items: stretch !important;

  min-height: 72px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.075) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.052), rgba(255,255,255,0.030)) !important;

  overflow: hidden !important;
  box-shadow: none !important;
}

/* Hover auf der ganzen Karte */
body[data-bot] .conversation-row.conversation-row-v3:hover {
  border-color: rgba(255,255,255,0.13) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.066), rgba(255,255,255,0.036)) !important;
}

/* Aktiver Chat: ganze Karte, nicht nur linke Hälfte */
body[data-bot] .conversation-row.conversation-row-v3.active {
  border-color: rgba(124, 92, 255, 0.42) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 92, 255, 0.22), transparent 52%),
    linear-gradient(180deg, rgba(124, 92, 255, 0.18), rgba(255,255,255,0.035)) !important;
}

/* Innerer Chat-Button ist nur Inhalt, keine eigene Karte */
body[data-bot] .conversation-row.conversation-row-v3 .conversation-item-v3 {
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 70px !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  padding: 13px 12px 12px 20px !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 5px !important;

  overflow: hidden !important;
  transform: none !important;
}

/* Hover darf nicht wieder eine innere Kachel erzeugen */
body[data-bot] .conversation-row.conversation-row-v3 .conversation-item-v3:hover {
  background: transparent !important;
  border-color: transparent !important;
  transform: none !important;
}

/* Titelzeile sauber begrenzen */
body[data-bot] .conversation-row.conversation-row-v3 .conversation-title-line {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  display: flex !important;
  align-items: center !important;
  gap: 7px !important;

  overflow: hidden !important;
}

/* Der eigentliche Titel bekommt den verfügbaren Platz und schneidet sauber ab */
body[data-bot] .conversation-row.conversation-row-v3 .conversation-title-text {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;

  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  font-size: 0.96rem !important;
  font-weight: 820 !important;
  line-height: 1.18 !important;
}

/* Datum */
body[data-bot] .conversation-row.conversation-row-v3 .conversation-item-v3 small {
  display: block !important;
  min-width: 0 !important;
  max-width: 100% !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  color: rgba(158,164,179,0.74) !important;
  font-size: 0.76rem !important;
  line-height: 1.25 !important;
}

/* Pin/Badges dürfen den Titel nicht zerstören */
body[data-bot] .conversation-row.conversation-row-v3 .expiry-badge,
body[data-bot] .conversation-row.conversation-row-v3 .legacy-pin {
  flex: 0 0 auto !important;
}

/* Drei-Punkte-Button ist Teil derselben Karte, ohne harte Trennlinie */
body[data-bot] .conversation-row.conversation-row-v3 .conversation-more-btn {
  position: static !important;

  width: 54px !important;
  min-width: 54px !important;
  height: 100% !important;
  min-height: 70px !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: rgba(245,247,251,0.52) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-shadow: none !important;
  transform: none !important;
}

/* Nur ein sehr subtiler Hover-Kreis im Button */
body[data-bot] .conversation-row.conversation-row-v3 .conversation-more-btn::before {
  content: "";
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(255,255,255,0.000);
  transition: background 0.16s ease;
}

body[data-bot] .conversation-row.conversation-row-v3 .conversation-more-btn:hover::before {
  background: rgba(255,255,255,0.055);
}

body[data-bot] .conversation-row.conversation-row-v3 .conversation-more-btn svg {
  position: relative;
  z-index: 1;
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  stroke: none !important;
}

/* Mobile minimal kompakter */
@media (max-width: 680px) {
  body[data-bot] .conversation-row.conversation-row-v3 {
    grid-template-columns: minmax(0, 1fr) 50px !important;
    min-height: 68px !important;
    border-radius: 20px !important;
  }

  body[data-bot] .conversation-row.conversation-row-v3 .conversation-item-v3 {
    min-height: 66px !important;
    padding: 12px 10px 11px 18px !important;
  }

  body[data-bot] .conversation-row.conversation-row-v3 .conversation-more-btn {
    width: 50px !important;
    min-width: 50px !important;
    min-height: 66px !important;
  }

  body[data-bot] .conversation-row.conversation-row-v3 .conversation-more-btn::before {
    width: 36px;
    height: 36px;
    border-radius: 13px;
  }
}
/* =========================================================
   APP INPUT MODAL — internal replacement for window.prompt
   ========================================================= */

.app-input-card {
  width: min(460px, 100%) !important;
}

.app-input-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 18px;
}

.app-input-field span {
  color: rgba(245,247,251,0.72);
  font-size: 0.78rem;
  font-weight: 760;
  letter-spacing: 0.02em;
}

.app-input-field input {
  width: 100%;
  min-height: 48px;
  border-radius: 15px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.060), rgba(255,255,255,0.036));
  color: var(--text);
  padding: 0 14px;
  font-size: 16px;
  font-weight: 650;
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.035),
    0 10px 26px rgba(0,0,0,0.16);
}

.app-input-field input:focus {
  border-color: rgba(124, 92, 255, 0.48);
  box-shadow:
    0 0 0 4px rgba(124, 92, 255, 0.13),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.app-input-field input::selection {
  background: rgba(124, 92, 255, 0.34);
}

@media (max-width: 520px) {
  .app-input-card {
    width: 100% !important;
  }
}