/* desktop-overrides.css
   Additive overrides only. Do not modify style.css directly.
   Load order: after /style.css in index.html.
*/

/* ── Modal z-index fix ────────────────────────────────────────
   #cd-shell has z-index: 120 !important (style.css lines 9437, 9963).
   .modal-overlay has no z-index, so it renders behind the shell.
   This fix ensures all modal overlays appear above the shell.
*/
.modal-overlay {
  z-index: 9999 !important;
}

/* ── Desktop composer redesign — premium message bar ────────────────────────
   Premium messenger-style composer: glass card feel, pill input, balanced
   tool row, polished badge and send button. Desktop-only (#ec-claude-shell-final).
*/
body.auth-ready #ec-claude-shell-final .ecf-composer {
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  gap: 12px !important;
  min-height: 76px !important;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(124, 106, 247, 0.18) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(107, 234, 255, 0.07), transparent 50%),
    radial-gradient(circle at 80% 100%, rgba(138, 91, 255, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(10, 12, 28, 0.92), rgba(5, 7, 18, 0.96)) !important;
  box-shadow: 0 -16px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
}

body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-tools {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 4px 6px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(214, 210, 255, 0.08) !important;
}

body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-tools .ecf-attach-btn {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: rgba(214, 232, 255, 0.85) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease !important;
}

body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-tools .ecf-attach-btn:hover {
  background: rgba(107, 234, 255, 0.10) !important;
  color: var(--ecf-cyan, #6beaff) !important;
  transform: translateY(-1px) !important;
}

body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-tools .ecf-attach-btn:active {
  transform: translateY(0) scale(0.96) !important;
}

body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-tools .ecf-attach-btn.on {
  background: rgba(255, 92, 92, 0.18) !important;
  border-color: rgba(255, 92, 92, 0.45) !important;
  color: #ff8a8a !important;
  box-shadow: 0 0 0 1px rgba(255, 92, 92, 0.35), 0 0 18px rgba(255, 92, 92, 0.22) !important;
}

/* Premium pill input */
body.auth-ready #ec-claude-shell-final #ec-final-msg-input {
  height: 46px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(214, 210, 255, 0.12) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.015)),
    rgba(8, 10, 22, 0.6) !important;
  color: #f4f3ff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(0, 0, 0, 0.1) !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease !important;
}

body.auth-ready #ec-claude-shell-final #ec-final-msg-input::placeholder {
  color: rgba(214, 210, 255, 0.42) !important;
  font-weight: 500 !important;
}

body.auth-ready #ec-claude-shell-final #ec-final-msg-input:focus {
  outline: none !important;
  border-color: rgba(107, 234, 255, 0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 3px rgba(107, 234, 255, 0.10),
    0 0 24px rgba(107, 234, 255, 0.08) !important;
}

/* Compact security badge */
body.auth-ready #ec-claude-shell-final .ecf-composer-badge {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(122, 255, 176, 0.28) !important;
  background: rgba(122, 255, 176, 0.07) !important;
  color: #7affb0 !important;
  font: 700 10px/1 var(--font-mono, "Space Mono", monospace) !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;
}

/* Polished primary send button */
body.auth-ready #ec-claude-shell-final .ecf-send-btn {
  min-width: 110px !important;
  height: 46px !important;
  padding: 0 22px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #6beaff 0%, #8a5bff 100%) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow:
    0 14px 34px rgba(138, 91, 255, 0.32),
    0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  transition: transform 0.14s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

body.auth-ready #ec-claude-shell-final .ecf-send-btn:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
  box-shadow:
    0 18px 42px rgba(138, 91, 255, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
}

body.auth-ready #ec-claude-shell-final .ecf-send-btn:active {
  transform: translateY(0) scale(0.98) !important;
}

#ec-final-emoji-pop button[data-ec-final-emoji] {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

#ec-final-emoji-pop button[data-ec-final-emoji]:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* ── Auto-Delete fine-grain slider (1h–7 Tage) — premium dark slider ────────
   style.css renders both a static .ecf-slider-track div AND the new
   <input type="range">, causing two stacked bars and a raw-white look.
   Hide the static track + reset native styling, then build the slider
   entirely from the range input with a single dark track + premium thumb.
*/
body.auth-ready #ec-claude-shell-final .ecf-slider-card .ecf-slider-track {
  display: none !important;
}

body.auth-ready #ec-claude-shell-final .ecf-slider-card .ecf-slider-range {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  width: 100% !important;
  height: 22px !important;
  margin: 10px 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  cursor: pointer !important;
}

/* Webkit / Blink track */
body.auth-ready #ec-claude-shell-final .ecf-slider-card .ecf-slider-range::-webkit-slider-runnable-track {
  height: 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(214, 210, 255, 0.08) !important;
  background:
    linear-gradient(90deg, rgba(107, 234, 255, 0.55), rgba(138, 91, 255, 0.55)) !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4), 0 0 14px rgba(107, 234, 255, 0.12) !important;
}

/* Firefox track */
body.auth-ready #ec-claude-shell-final .ecf-slider-card .ecf-slider-range::-moz-range-track {
  height: 6px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(214, 210, 255, 0.08) !important;
  background: rgba(10, 12, 28, 0.9) !important;
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.4) !important;
}

body.auth-ready #ec-claude-shell-final .ecf-slider-card .ecf-slider-range::-moz-range-progress {
  height: 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, rgba(107, 234, 255, 0.85), rgba(138, 91, 255, 0.85)) !important;
}

/* Webkit / Blink thumb */
body.auth-ready #ec-claude-shell-final .ecf-slider-card .ecf-slider-range::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  margin-top: -7px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(107, 234, 255, 0.95) !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(214, 232, 255, 0.85) 60%, rgba(138, 91, 255, 0.7) 100%) !important;
  box-shadow:
    0 4px 14px rgba(107, 234, 255, 0.55),
    0 0 0 4px rgba(107, 234, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  cursor: grab !important;
  transition: transform 0.14s ease, box-shadow 0.18s ease !important;
}

/* Firefox thumb */
body.auth-ready #ec-claude-shell-final .ecf-slider-card .ecf-slider-range::-moz-range-thumb {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(107, 234, 255, 0.95) !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(214, 232, 255, 0.85) 60%, rgba(138, 91, 255, 0.7) 100%) !important;
  box-shadow:
    0 4px 14px rgba(107, 234, 255, 0.55),
    0 0 0 4px rgba(107, 234, 255, 0.12) !important;
  cursor: grab !important;
}

body.auth-ready #ec-claude-shell-final .ecf-slider-card .ecf-slider-range:hover::-webkit-slider-thumb {
  transform: scale(1.08) !important;
  box-shadow:
    0 6px 22px rgba(107, 234, 255, 0.7),
    0 0 0 6px rgba(107, 234, 255, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

body.auth-ready #ec-claude-shell-final .ecf-slider-card .ecf-slider-range:active::-webkit-slider-thumb {
  cursor: grabbing !important;
  transform: scale(1.04) !important;
}

body.auth-ready #ec-claude-shell-final .ecf-slider-card .ecf-slider-range:focus {
  outline: none !important;
}

/* ── Design settings: theme variants ─────────────────────────────────────────
   ecFinalSetTheme() sets data-ec-final-theme-active on the desktop shell.
   These rules give each theme a distinct background glow. Dunkel is the
   default (already applied by the base background override above).
*/
body.auth-ready #ec-claude-shell-final[data-ec-final-theme-active="midnight"] {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(74, 158, 255, 0.20), transparent 50%),
    radial-gradient(ellipse at 96% 88%, rgba(122, 255, 176, 0.12), transparent 55%),
    linear-gradient(180deg, #03060f 0%, #05091c 50%, #03060f 100%) !important;
}

body.auth-ready #ec-claude-shell-final[data-ec-final-theme-active="forest"] {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(122, 255, 176, 0.16), transparent 50%),
    radial-gradient(ellipse at 96% 88%, rgba(255, 184, 74, 0.10), transparent 55%),
    linear-gradient(180deg, #04100a 0%, #07171a 50%, #04100a 100%) !important;
}

body.auth-ready #ec-claude-shell-final[data-ec-final-theme-active="aurora"] {
  background:
    radial-gradient(ellipse at 16% 0%, rgba(255, 107, 208, 0.18), transparent 50%),
    radial-gradient(ellipse at 96% 88%, rgba(138, 91, 255, 0.16), transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(107, 234, 255, 0.05), transparent 70%),
    linear-gradient(180deg, #0a0518 0%, #0c0820 50%, #0a0518 100%) !important;
}

/* ── Design settings: font-size scale ───────────────────────────────────────
   ecFinalSetFontSize() sets data-ec-final-font-size on the desktop shell.
   Applies a body-text scale via CSS variable, leaving headings/logos alone.
*/
body.auth-ready #ec-claude-shell-final[data-ec-final-font-size="s"]  { --ecf-base-fs: 13px; }
body.auth-ready #ec-claude-shell-final[data-ec-final-font-size="m"]  { --ecf-base-fs: 15px; }
body.auth-ready #ec-claude-shell-final[data-ec-final-font-size="l"]  { --ecf-base-fs: 17px; }
body.auth-ready #ec-claude-shell-final[data-ec-final-font-size="xl"] { --ecf-base-fs: 19px; }

body.auth-ready #ec-claude-shell-final[data-ec-final-font-size] .ecf-room,
body.auth-ready #ec-claude-shell-final[data-ec-final-font-size] .ecf-room small,
body.auth-ready #ec-claude-shell-final[data-ec-final-font-size] .ecf-msg,
body.auth-ready #ec-claude-shell-final[data-ec-final-font-size] .ecf-chat-stream,
body.auth-ready #ec-claude-shell-final[data-ec-final-font-size] .ecf-settings-card p,
body.auth-ready #ec-claude-shell-final[data-ec-final-font-size] .ecf-kv span,
body.auth-ready #ec-claude-shell-final[data-ec-final-font-size] .ecf-kv strong,
body.auth-ready #ec-claude-shell-final[data-ec-final-font-size] #ec-final-msg-input {
  font-size: var(--ecf-base-fs, 15px) !important;
}

/* ── Room/Chat info: readable expire-time dropdown ──────────────────────────
   The native <select> options inherit poorly in the dark shell. Force a clear
   dark style on both the closed control and its option list.
*/
#room-options-modal #room-expire-change-select {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-color: rgba(13, 14, 30, 0.95) !important;
  background-image: linear-gradient(45deg, transparent 50%, rgba(214,210,255,0.7) 50%),
                    linear-gradient(135deg, rgba(214,210,255,0.7) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  border: 1px solid rgba(124, 106, 247, 0.45) !important;
  border-radius: 12px !important;
  padding: 12px 36px 12px 14px !important;
  color: #f6f5ff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  width: 100% !important;
}

#room-options-modal #room-expire-change-select:focus {
  outline: none !important;
  border-color: rgba(107, 234, 255, 0.7) !important;
  box-shadow: 0 0 0 3px rgba(107, 234, 255, 0.18) !important;
}

#room-options-modal #room-expire-change-select option {
  background-color: #0a0a18 !important;
  color: #f6f5ff !important;
  padding: 10px !important;
}

/* ── EliteCrypt brand card replacing the old audit pill ─────────────────────
   Drop-in replacement that keeps the previous grid slot styling. Uses the
   existing /apple-touch-icon.png so no new asset is introduced.
*/
#ec-claude-shell-final .ecf-brand-card,
body.auth-ready #ec-claude-shell-final .ecf-brand-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(107, 234, 255, 0.22) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(53, 215, 255, 0.14), transparent 60%),
    linear-gradient(135deg, rgba(138, 91, 255, 0.18), rgba(13, 14, 30, 0.6)) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

#ec-claude-shell-final .ecf-brand-card img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(53, 215, 255, 0.35));
}

#ec-claude-shell-final .ecf-brand-card .ecf-brand-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#ec-claude-shell-final .ecf-brand-card strong,
body.auth-ready #ec-claude-shell-final .ecf-brand-card strong {
  display: block !important;
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #ffffff !important;
  background: none !important;
  -webkit-text-fill-color: initial !important;
}

#ec-claude-shell-final .ecf-brand-card small,
body.auth-ready #ec-claude-shell-final .ecf-brand-card small {
  display: block !important;
  margin-top: 3px !important;
  font-size: 10px !important;
  line-height: 1.3 !important;
  color: rgba(214, 210, 255, 0.65) !important;
  font-family: var(--font-mono, monospace) !important;
  letter-spacing: 0.04em !important;
}

#ec-claude-shell-final .ecf-brand-card img {
  width: 30px !important;
  height: 30px !important;
}

#ec-claude-shell-final .ecf-brand-card {
  padding: 10px 12px !important;
  gap: 10px !important;
  text-align: left !important;
}

/* ── Desktop logged-in theme harmonization ──────────────────────────────────
   style.css applies a visible grid-line texture (two linear-gradient layers
   at 44px 44px) on top of the logged-in shell. The login screen does NOT have
   this. This override removes the grid texture and keeps only the calm
   cyan/violet radial glows so the logged-in desktop matches the login
   screen's premium dark navy look.
*/
body.auth-ready #ec-claude-shell-final {
  background:
    radial-gradient(ellipse at 18% 0%, rgba(138, 91, 255, 0.18), transparent 46%),
    radial-gradient(ellipse at 96% 88%, rgba(107, 234, 255, 0.10), transparent 52%),
    radial-gradient(ellipse at 50% 50%, rgba(20, 12, 48, 0.4), transparent 70%),
    linear-gradient(180deg, #04040d 0%, #06081a 50%, #04040d 100%) !important;
  background-size: auto !important;
  background-attachment: fixed !important;
}

/* Panels and cards: slightly deeper navy + softer border to match login */
body.auth-ready #ec-claude-shell-final .ecf-card,
body.auth-ready #ec-claude-shell-final .ecf-settings-card,
body.auth-ready #ec-claude-shell-final .ecf-room-list,
body.auth-ready #ec-claude-shell-final .ecf-chat-stream,
body.auth-ready #ec-claude-shell-final .ecf-chat-panel,
body.auth-ready #ec-claude-shell-final .ecf-side,
body.auth-ready #ec-claude-shell-final .ecf-room-panel {
  border-color: rgba(124, 106, 247, 0.18) !important;
}

body.auth-ready #ec-claude-shell-final .ecf-settings-card {
  background:
    radial-gradient(circle at 0% 0%, rgba(53, 215, 255, 0.05), transparent 60%),
    linear-gradient(180deg, rgba(13, 16, 36, 0.78), rgba(8, 9, 24, 0.86)) !important;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

/* Status pills / chips: calmer, premium */
body.auth-ready #ec-claude-shell-final .ecf-status,
body.auth-ready #ec-claude-shell-final .ecf-chip {
  border-color: rgba(107, 234, 255, 0.22) !important;
  background: rgba(107, 234, 255, 0.06) !important;
  color: rgba(214, 232, 255, 0.92) !important;
  text-shadow: none !important;
}

/* Sidebar and lists */
body.auth-ready #ec-claude-shell-final .ecf-room-list,
body.auth-ready #ec-claude-shell-final .ecf-side {
  background:
    radial-gradient(circle at 0% 0%, rgba(138, 91, 255, 0.06), transparent 55%),
    linear-gradient(180deg, rgba(11, 13, 30, 0.78), rgba(6, 7, 20, 0.82)) !important;
}

/* Chat stream area: keep subtle, no grid */
body.auth-ready #ec-claude-shell-final .ecf-chat-stream {
  background:
    radial-gradient(circle at 50% 0%, rgba(53, 215, 255, 0.05), transparent 50%),
    linear-gradient(180deg, rgba(7, 9, 22, 0.4), rgba(4, 5, 16, 0.5)) !important;
}

/* ── #new-chat-menu-modal — desktop centered & balanced ─────────────────────
   Default .modal-overlay aligns to flex-end (bottom-sheet style for mobile).
   On desktop we want the modal centered, with rounded corners on all sides,
   tighter width, centered title, and full-width equal buttons.

   §NEWCHAT-SHEET-2026-09-08 — überarbeitet:
     • exakte Zentrierung in BEIDEN Achsen (align + justify, dvh-Bezug), damit
       das Menü auf Desktop/Tablet nicht mehr leicht nach unten rutscht;
     • Breitenkappe 420px + margin:auto, damit es auf großen Screens nicht in
       die Breite gezogen wird;
     • die Zeilen sind jetzt linksbündige Menüeinträge (Icon-Spalte + Label)
       statt zentrierter Pillen — Geometrie/Optik kommt aus app.css
       §NEWCHAT-SHEET (.nc-action / --nc-*), hier nur die Desktop-Deltas.
     • Der alte `.modal .btn`-Block (text-align/justify-content: center,
       radius 14px, font-weight 700) ist entfallen: er hätte die neue
       Listenausrichtung per höherer Spezifität wieder zentriert.
   Markup/Handler unverändert.
*/
@media (min-width: 769px) {
  #new-chat-menu-modal.modal-overlay,
  #new-chat-menu-modal.modal-overlay.active {
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    /* dvh statt der impliziten inset:0-Höhe: verhindert, dass die Zentrierung
       bei ein-/ausfahrenden Browserleisten (Tablet-Safari) verrutscht. */
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  #new-chat-menu-modal .modal {
    max-width: 420px !important;
    width: 100% !important;
    margin: auto !important;
    border-radius: 22px !important;
    padding: 26px 24px 22px !important;
    max-height: min(86dvh, 760px) !important;
  }
  #new-chat-menu-modal .modal-handle {
    display: none !important;
  }
  /* Titel bleibt zentriert (identisch zur Mobile-Sheet-Optik, wo er die
     zentrierte Grabber-Achse aufnimmt). */
  #new-chat-menu-modal .modal-title {
    text-align: center !important;
    font-size: 17px !important;
    margin-bottom: 18px !important;
    letter-spacing: -0.01em !important;
  }
  #new-chat-menu-modal .nc-actions,
  #new-chat-menu-modal .modal > div[style*="flex-direction:column"] {
    gap: 10px !important;
    align-items: stretch !important;
  }
  /* Zeigegeräte mit Hover: etwas kompakter als auf Touch. */
  #new-chat-menu-modal .nc-action,
  #new-chat-menu-modal .nc-action.secondary {
    min-height: 50px !important;
    font-size: 14.5px !important;
  }
}

/* ── Group settings modal — compact "account menu" style on desktop ─────────
   Existing modal renders a full-page-style group panel that feels oversized.
   On desktop, force a compact card matching the Neuer-Chat / account-menu
   visual language: ~420px max-width, centered, rounded all corners, tighter
   row paddings, smaller avatar/title, compact icon rows. HTML & handlers
   untouched.
*/
@media (min-width: 769px) {
  #group-settings-modal.modal-overlay {
    align-items: center !important;
    padding: 24px !important;
  }
  #group-settings-modal .modal {
    max-width: 420px !important;
    width: 100% !important;
    max-height: 86vh !important;
    border-radius: 22px !important;
    padding: 0 !important;
  }
  #group-settings-modal .modal-handle { display: none !important; }
  #group-settings-modal .modal > div:first-child + div {
    /* header row (title + close X) */
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(124, 106, 247, 0.18) !important;
  }
  #group-settings-modal .modal > div:first-child + div > div:first-child {
    font-size: 14px !important;
    letter-spacing: -0.01em !important;
  }
  #group-settings-modal #group-settings-body {
    padding: 14px 16px 18px !important;
  }

  /* Compact group header (avatar + name + meta) */
  #group-settings-modal .gs-header {
    padding: 8px 4px 14px !important;
    margin-bottom: 6px !important;
    text-align: center !important;
  }
  #group-settings-modal .gs-avatar {
    width: 56px !important;
    height: 56px !important;
    font-size: 26px !important;
    margin: 0 auto 8px !important;
    border-radius: 18px !important;
  }
  #group-settings-modal .gs-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 4px !important;
  }
  #group-settings-modal .gs-meta {
    font-size: 11px !important;
    color: rgba(214, 210, 255, 0.65) !important;
    display: inline-flex !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Section titles smaller and tighter */
  #group-settings-modal .gs-section-title {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: rgba(214, 210, 255, 0.55) !important;
    margin: 14px 4px 6px !important;
  }

  /* Compact row cards (account-menu style) */
  #group-settings-modal .gs-item {
    display: grid !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    margin-bottom: 6px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(124, 106, 247, 0.14) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.01)),
      rgba(10, 12, 28, 0.55) !important;
    cursor: pointer !important;
    transition: border-color 0.16s ease, background 0.16s ease, transform 0.12s ease !important;
  }
  #group-settings-modal .gs-item:hover {
    border-color: rgba(107, 234, 255, 0.32) !important;
    background:
      linear-gradient(180deg, rgba(107, 234, 255, 0.04), rgba(138, 91, 255, 0.05)),
      rgba(10, 12, 28, 0.7) !important;
  }
  #group-settings-modal .gs-item-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
  }
  #group-settings-modal .gs-item-text { min-width: 0 !important; }
  #group-settings-modal .gs-item-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: -0.005em !important;
    color: #f4f3ff !important;
    line-height: 1.2 !important;
  }
  #group-settings-modal .gs-item-sub {
    font-size: 11px !important;
    color: rgba(214, 210, 255, 0.6) !important;
    margin-top: 2px !important;
    line-height: 1.3 !important;
  }
  #group-settings-modal .gs-item-arrow,
  #group-settings-modal .gs-item-right {
    font-size: 13px !important;
    color: rgba(214, 210, 255, 0.6) !important;
  }

  /* Danger rows: keep semantic but compact */
  #group-settings-modal .gs-danger-item {
    border-color: rgba(255, 92, 92, 0.28) !important;
    background:
      linear-gradient(180deg, rgba(255, 92, 92, 0.05), rgba(255, 92, 92, 0.02)),
      rgba(20, 8, 14, 0.6) !important;
  }
  #group-settings-modal .gs-danger-item:hover {
    border-color: rgba(255, 92, 92, 0.5) !important;
    background:
      linear-gradient(180deg, rgba(255, 92, 92, 0.10), rgba(255, 92, 92, 0.04)),
      rgba(28, 10, 18, 0.75) !important;
  }
  #group-settings-modal .gs-danger-item .gs-item-icon {
    background: rgba(255, 92, 92, 0.16) !important;
  }
  #group-settings-modal .gs-danger-item .gs-item-title {
    color: #ff8a8a !important;
  }

  /* Member rows: tighter */
  #group-settings-modal .gs-member-row {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 7px 0 !important;
  }
  #group-settings-modal .gs-member-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #group-settings-modal .gs-member-name {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #f4f3ff !important;
  }
  #group-settings-modal .gs-member-role {
    font-size: 10px !important;
    color: rgba(255, 209, 102, 0.8) !important;
    margin-top: 1px !important;
  }
}

/* ── Chat message alignment — own right, others left ────────────────────────
   The live stream is a plain block container, so .mine's `margin-left:auto`
   relies on max-width + auto-margins to right-align. We make this explicit
   with a flex column so each bubble can pick its own side reliably.
*/
body.auth-ready #ec-claude-shell-final .ecf-chat-stream {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px 20px !important;
}

body.auth-ready #ec-claude-shell-final .ecf-live-message {
  align-self: flex-start !important;
  max-width: min(72%, 620px) !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: 16px 16px 16px 6px !important;
  border: 1px solid rgba(214, 210, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22) !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
}

body.auth-ready #ec-claude-shell-final .ecf-live-message.mine {
  align-self: flex-end !important;
  margin-left: auto !important;
  border-radius: 16px 16px 6px 16px !important;
  border-color: rgba(107, 234, 255, 0.30) !important;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(107, 234, 255, 0.18), transparent 60%),
    linear-gradient(135deg, rgba(107, 234, 255, 0.16), rgba(138, 91, 255, 0.18)) !important;
  color: #ffffff !important;
}

body.auth-ready #ec-claude-shell-final .ecf-live-message.mine small {
  display: none !important;
}

body.auth-ready #ec-claude-shell-final .ecf-live-message:not(.mine) small {
  display: block !important;
  margin-bottom: 4px !important;
  color: rgba(107, 234, 255, 0.85) !important;
  font: 700 10px/1 var(--font-mono, monospace) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

body.auth-ready #ec-claude-shell-final .ecf-live-message p {
  margin: 0 !important;
  line-height: 1.45 !important;
  white-space: pre-wrap !important;
}

/* Modals on top of the desktop shell — keep them premium */
body.auth-ready .modal-overlay .modal {
  border-color: rgba(124, 106, 247, 0.28) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(138, 91, 255, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(14, 16, 34, 0.96), rgba(6, 8, 20, 0.98)) !important;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* ─────────────────────────────────────────────────────────────────────
   DESKTOP SHELL DEDUP + SETTINGS OVERLAP FIX
   The codebase has two desktop shells in the DOM at once on logged-in
   desktop ≥900px:
     - #ec-claude-shell           (older "ec-design-app-shell")
     - #ec-claude-shell-final     (current canonical, wired in JS via root())
   Both are forced to display: grid !important via style.css :has() rules,
   which stacks the OLD shell behind the NEW one. When the user switches
   settings categories in the new shell, the OLD shell's settings page
   bleeds through visually behind the active section. Also adds extra
   sidebar icons the user doesn't want.

   Fix: retire the OLD shell on desktop. The new shell is the wired one
   (JS root() returns #ec-claude-shell-final, all data-ec-final-* bindings
   are scoped to it). Hiding the old shell removes both the overlap and
   the duplicate sidebar icons in one move. Mobile shell is unaffected.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  body.auth-ready #ec-claude-shell.ec-design-app-shell,
  body.auth-ready #ec-claude-shell {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Belt-and-braces: even if a stale section keeps an inline style or
     missed the .active toggle, force inactive settings sections in the
     final shell out of layout entirely so they cannot bleed through. */
  body.auth-ready #ec-claude-shell-final .ecf-settings-section:not(.active) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -99999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
  }

  /* Same guard for the top-level view panels (chat / settings / vault /
     security) inside the final shell — only one is allowed to render. */
  body.auth-ready #ec-claude-shell-final .ecf-view[hidden],
  body.auth-ready #ec-claude-shell-final .ecf-view[aria-hidden="true"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   COMPACT ACCOUNT & SETTINGS UI
   The default .ecf-kv rows are 62px tall with chunky cards (style.css
   13814 / 13804). User wants compact, premium, tight rhythm.
   These rules only tighten spacing — they do NOT change which controls
   are present, their data attributes, ids, or click handlers.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  body.auth-ready #ec-claude-shell-final .ecf-settings-section.active {
    padding: 16px !important;
    border-radius: 10px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-section h2 {
    font-size: 15px !important;
    margin: 0 0 4px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-section h2::before {
    width: 12px !important;
    height: 12px !important;
    border-radius: 4px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-section p {
    margin: 0 0 12px !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-section .ecf-kv {
    min-height: 44px !important;
    margin-top: 8px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-section .ecf-kv > span {
    font-size: 12px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-section .ecf-kv > strong {
    font-size: 10.5px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-mini-action {
    padding: 5px 10px !important;
    font-size: 11px !important;
    border-radius: 7px !important;
    min-height: 28px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-ui-toggle {
    transform: scale(0.85);
    transform-origin: right center;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-card {
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
    border-radius: 10px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-identity-grid {
    gap: 10px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-avatar-card {
    padding: 10px !important;
    border-radius: 10px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-profile-orb {
    width: 48px !important;
    height: 48px !important;
    font-size: 16px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-head {
    margin-bottom: 12px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-head h1 {
    font-size: 18px !important;
    margin: 0 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-nav button {
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    min-height: 36px !important;
    border-radius: 8px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   AUTH / REGISTER — CAPTCHA ROW STRUCTURE
   The captcha card now has a clean vertical structure:
     [ title row ]
     [ captcha image ]
     [ input | refresh button ]   ← single aligned row, robust grid
     [ hint text ]
   Replaces the previous layout where the refresh button sat next to
   the title and the input took a full-width row by itself — that
   rendered inconsistently across Chrome / Opera because the title
   wrap could shrink the button and the input had no explicit min-width.
   ───────────────────────────────────────────────────────────────────── */
.ec-reg-captcha-card {
  background: rgba(124, 106, 247, 0.06);
  border: 1px solid rgba(124, 106, 247, 0.2);
  border-radius: 14px;
  padding: 16px;
  box-sizing: border-box;
}
.ec-reg-captcha-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.ec-reg-captcha-card .auth-captcha-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  font-family: var(--font-mono);
  letter-spacing: 1px;
  line-height: 1.2;
}
.ec-reg-captcha-img {
  width: 100%;
  max-width: 280px;
  border-radius: 10px;
  display: block;
  margin: 0 auto 12px;
  image-rendering: crisp-edges;
}
.ec-reg-captcha-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
}
.ec-reg-captcha-input {
  min-width: 0;
  width: 100%;
  background: var(--bg2);
  border: 2px solid rgba(124, 106, 247, 0.3);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--text);
  font-size: 15px;
  font-family: var(--font-mono);
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.ec-reg-captcha-refresh {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  color: var(--text2);
  border-radius: 10px;
  padding: 0 14px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  height: auto;
  min-height: 42px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ec-reg-captcha-refresh:hover {
  background: rgba(124, 106, 247, 0.12);
  color: var(--text);
  border-color: rgba(124, 106, 247, 0.45);
}
.ec-reg-captcha-hint {
  font-size: 11px;
  color: var(--text2);
  margin-top: 8px;
  min-height: 1em;
}

/* ─────────────────────────────────────────────────────────────────────
   AUTH SHELL — CHROME / OPERA CONSISTENCY
   Chrome computes `100dvh` and the implicit min-content height on
   grid items slightly differently than Opera, which on the register
   screen could clip the card or shrink the captcha row. Force the
   form card to share the row's available height predictably in both
   browsers and prevent inner content from forcing horizontal overflow.
   Scoped strictly to #setup-new.active so the homepage/login screens
   are untouched.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  #setup-new.active .auth-shell--wide {
    min-height: 0 !important;
    max-height: min(calc(100vh - 140px), calc(100dvh - 140px)) !important;
    width: 100% !important;
    max-width: 560px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }
  /* Ensure every direct child of the card respects the card's width
     and cannot collapse vertically inside the scrollable flex column. */
  #setup-new.active .auth-shell--wide > * {
    max-width: 100%;
    min-width: 0;
    flex-shrink: 0 !important;
    box-sizing: border-box;
  }
  /* Captcha row stays a clean 1fr + auto grid on Chrome even when the
     card width is animated/scrolled. */
  #setup-new.active .ec-reg-captcha-row {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   NEW CHAT MENU MODAL — centered card, equal-width buttons
   The generic .modal-overlay .modal handles vertical centering, but the
   new-chat menu's title sat left-aligned and the action buttons inherited
   varying widths from inline content. This scope rule tightens that one
   modal only — every other modal (settings, profile, premium, …) keeps
   its existing layout.
   ───────────────────────────────────────────────────────────────────── */
#new-chat-menu-modal .modal {
  max-width: 380px;
  width: min(92vw, 380px);
  margin: auto;
  padding: 22px 22px 20px;
  border-radius: 22px;
}
#new-chat-menu-modal .modal-title {
  text-align: center;
  margin-bottom: 14px;
  font-size: 17px;
  letter-spacing: 0.01em;
}
#new-chat-menu-modal .modal > div[style*="flex-direction:column"] {
  gap: 10px !important;
  align-items: stretch;
}
#new-chat-menu-modal .modal .btn {
  width: 100%;
  min-height: 44px;
  padding: 11px 14px;
  font-size: 14px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ─────────────────────────────────────────────────────────────────────
   DESKTOP LOGGED-IN SHELL — REFERENCE V1 (4-COLUMN LAYOUT)
   Rebuilds the visual shell of #ec-claude-shell-final to match
   design-import/reference/desktop/elitecrypt-desktop-loggedin-reference-v1.png
   Desktop only (>=900px). No demo content. Empty-state friendly.
   - Wider labeled left sidebar (.ecf-rail--v2)
   - Chat list panel (existing .ecf-contacts)
   - Center chat panel (existing .ecf-chat-panel)
   - Right management panel (.ecf-rightpanel) with 4 sections
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {

  /* Shell grid: wider sidebar + main */
  body.auth-ready #ec-claude-shell-final {
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  /* Wider labeled left sidebar */
  body.auth-ready #ec-claude-shell-final .ecf-rail.ecf-rail--v2 {
    width: 220px !important;
    min-width: 220px !important;
    padding: 18px 14px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    border-right: 1px solid rgba(124, 106, 247, 0.18) !important;
    background:
      linear-gradient(180deg, rgba(10, 12, 28, 0.94), rgba(6, 7, 20, 0.96)) !important;
    backdrop-filter: blur(22px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(140%) !important;
    overflow-y: auto !important;
  }

  /* Brand block at top */
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-brand-block {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 6px 6px 14px !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid rgba(124, 106, 247, 0.14) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-logo {
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    color: #fff !important;
    font: 800 13px/1 var(--font-mono, "Space Mono", monospace) !important;
    background: linear-gradient(135deg, #8a5bff, #6beaff) !important;
    box-shadow: 0 12px 28px rgba(138, 91, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
    flex-shrink: 0 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-brand-copy {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-brand-copy strong {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #f4f3ff !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-brand-copy small {
    font-size: 10px !important;
    color: rgba(214, 210, 255, 0.6) !important;
    font-family: var(--font-mono, monospace) !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
  }

  /* Labeled nav: button is full-width row with icon + label */
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    margin: 4px 0 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-nav button,
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-archive {
    width: 100% !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    justify-items: start !important;
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: rgba(214, 210, 255, 0.72) !important;
    cursor: pointer !important;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease !important;
    text-align: left !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-nav button:hover,
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-archive:hover {
    background: rgba(138, 91, 255, 0.10) !important;
    color: #f4f3ff !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-nav button.active {
    background:
      linear-gradient(135deg, rgba(138, 91, 255, 0.22), rgba(107, 234, 255, 0.10)) !important;
    border-color: rgba(124, 106, 247, 0.38) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 22px rgba(138, 91, 255, 0.18) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-nav-ico {
    display: inline-grid !important;
    place-items: center !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 14px !important;
    color: inherit !important;
    opacity: 0.85 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-nav-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: -0.005em !important;
    color: inherit !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Divider */
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-divider {
    height: 1px !important;
    margin: 8px 6px !important;
    background: rgba(124, 106, 247, 0.14) !important;
  }

  /* Archive button (between divider and footer) */
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-archive {
    margin-bottom: 8px !important;
  }

  /* Footer block: status card + logout */
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-foot {
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding-top: 8px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-status {
    display: grid !important;
    grid-template-columns: 10px minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(122, 255, 176, 0.22) !important;
    background:
      radial-gradient(circle at 0% 0%, rgba(122, 255, 176, 0.08), transparent 60%),
      rgba(10, 18, 14, 0.55) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-status-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #7affb0 !important;
    box-shadow: 0 0 12px rgba(122, 255, 176, 0.75) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-status-copy strong {
    display: block !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #d6f8e2 !important;
    line-height: 1.2 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-status-copy small {
    display: block !important;
    margin-top: 2px !important;
    font-size: 10px !important;
    color: rgba(214, 232, 255, 0.55) !important;
    font-family: var(--font-mono, monospace) !important;
    letter-spacing: 0.04em !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-logout {
    width: 100% !important;
    min-height: 38px !important;
    height: auto !important;
    padding: 8px 12px !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    justify-items: start !important;
    border-radius: 10px !important;
    border: 1px solid rgba(255, 112, 128, 0.26) !important;
    background: rgba(255, 92, 92, 0.06) !important;
    color: #ffc4ca !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background 0.16s ease, border-color 0.16s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-logout:hover {
    background: rgba(255, 92, 92, 0.14) !important;
    border-color: rgba(255, 112, 128, 0.45) !important;
    color: #ffe1e4 !important;
  }

  /* Chat layout: 3 columns — contacts | chat | right panel */
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout {
    grid-template-columns: minmax(280px, 320px) minmax(0, 1fr) minmax(260px, 300px) !important;
    gap: 14px !important;
  }

  /* Right management panel */
  body.auth-ready #ec-claude-shell-final .ecf-rightpanel {
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    padding: 18px 16px !important;
    overflow-y: auto !important;
    border: 1px solid rgba(124, 106, 247, 0.18) !important;
    border-radius: 18px !important;
    background:
      linear-gradient(180deg, rgba(16, 16, 36, 0.72), rgba(9, 9, 24, 0.86)) !important;
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.045) !important;
    backdrop-filter: blur(24px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(135%) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-head {
    margin-bottom: 4px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-kicker {
    font: 700 10px/1 var(--font-mono, "Space Mono", monospace) !important;
    letter-spacing: 0.14em !important;
    color: rgba(214, 210, 255, 0.55) !important;
    text-transform: uppercase !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-danger .ecf-rp-kicker {
    color: rgba(255, 138, 138, 0.78) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) 14px !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(214, 210, 255, 0.08) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.008)),
      rgba(10, 12, 28, 0.5) !important;
    color: #f4f3ff !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: border-color 0.14s ease, background 0.14s ease, transform 0.12s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row:hover {
    border-color: rgba(107, 234, 255, 0.30) !important;
    background:
      linear-gradient(180deg, rgba(107, 234, 255, 0.04), rgba(138, 91, 255, 0.05)),
      rgba(12, 14, 32, 0.7) !important;
    transform: translateY(-1px) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-icon {
    width: 28px !important;
    height: 28px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    background: rgba(138, 91, 255, 0.14) !important;
    color: #d6d3ff !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-copy strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #f4f3ff !important;
    letter-spacing: -0.005em !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-copy small {
    font-size: 10.5px !important;
    color: rgba(214, 210, 255, 0.55) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-meta {
    color: rgba(214, 210, 255, 0.45) !important;
    font-size: 12px !important;
  }

  /* Danger rows */
  body.auth-ready #ec-claude-shell-final .ecf-rp-row--danger {
    border-color: rgba(255, 92, 92, 0.22) !important;
    background:
      linear-gradient(180deg, rgba(255, 92, 92, 0.05), rgba(255, 92, 92, 0.02)),
      rgba(20, 8, 14, 0.5) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row--danger:hover {
    border-color: rgba(255, 92, 92, 0.5) !important;
    background:
      linear-gradient(180deg, rgba(255, 92, 92, 0.10), rgba(255, 92, 92, 0.04)),
      rgba(28, 10, 18, 0.7) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row--danger .ecf-rp-row-icon {
    background: rgba(255, 92, 92, 0.16) !important;
    color: #ff8a8a !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row--danger .ecf-rp-row-copy strong {
    color: #ff8a8a !important;
  }

  /* Hide right panel for non-chat views so it doesn't bleed */
  body.auth-ready #ec-claude-shell-final:not([data-ec-final-view="chat"]) .ecf-rightpanel {
    display: none !important;
  }

  /* Tighter contacts pane border-radius to match reference */
  body.auth-ready #ec-claude-shell-final .ecf-contacts,
  body.auth-ready #ec-claude-shell-final .ecf-chat-panel {
    border-radius: 18px !important;
  }

  /* Smaller heading like reference ("Chats" instead of giant) */
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-panel-head h1 {
    font-size: 22px !important;
    letter-spacing: -0.01em !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-panel-head .ecf-kicker {
    display: none !important;
  }

  /* Narrower middle panel: smaller padding inside contacts */
  body.auth-ready #ec-claude-shell-final .ecf-contacts {
    padding: 16px !important;
  }
}

/* Compact widths between 900–1200px: shrink right panel a touch */
@media (min-width: 900px) and (max-width: 1199px) {
  body.auth-ready #ec-claude-shell-final {
    grid-template-columns: 196px minmax(0, 1fr) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail.ecf-rail--v2 {
    width: 196px !important;
    min-width: 196px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout {
    grid-template-columns: minmax(250px, 290px) minmax(0, 1fr) minmax(232px, 260px) !important;
    gap: 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   DESKTOP LOGGED-IN — PASS 2 REFINEMENTS
   Tightens spacing/proportions to align closer to reference v1.
   Right panel rows become flatter/tighter; sidebar gets correct cadence;
   chat layout proportions match reference. Function areas still reachable
   via existing Einstellungen view (konto, datenschutz, chats, design,
   sicherheit, benachrichtigungen, speicher, geraete, hilfe, rechtliches).
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
  body.auth-ready #ec-claude-shell-final {
    grid-template-columns: 208px minmax(0, 1fr) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail.ecf-rail--v2 {
    width: 208px !important;
    min-width: 208px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout {
    grid-template-columns: minmax(286px, 320px) minmax(0, 1fr) minmax(248px, 280px) !important;
    gap: 12px !important;
  }
}

@media (min-width: 900px) {
  /* Tighter ecf-main outer padding so columns reach the edges like reference */
  body.auth-ready #ec-claude-shell-final .ecf-main {
    padding: 16px !important;
  }

  /* Sidebar: tighter cadence */
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 {
    padding: 14px 12px 12px !important;
    gap: 6px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-brand-block {
    padding: 4px 4px 12px !important;
    gap: 10px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-nav {
    gap: 1px !important;
    margin: 2px 0 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-nav button {
    min-height: 34px !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-nav-label {
    font-size: 12.5px !important;
    font-weight: 500 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-nav button.active .ecf-nav-label {
    font-weight: 700 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-nav-ico {
    width: 20px !important;
    height: 20px !important;
    font-size: 13px !important;
    opacity: 0.78 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-nav button.active .ecf-nav-ico {
    opacity: 1 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-divider {
    margin: 6px 4px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-archive {
    min-height: 34px !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 4px !important;
    color: rgba(214, 210, 255, 0.62) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-status {
    padding: 9px 11px !important;
    border-radius: 11px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-logout {
    min-height: 34px !important;
    padding: 6px 10px !important;
    border-radius: 9px !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  /* Contacts (chat list) pane: tighter, like reference */
  body.auth-ready #ec-claude-shell-final .ecf-contacts {
    padding: 14px 12px !important;
    border-radius: 16px !important;
    background:
      linear-gradient(180deg, rgba(16, 16, 36, 0.78), rgba(9, 9, 24, 0.88)) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-panel-head {
    align-items: center !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-panel-head h1 {
    font-size: 20px !important;
    font-weight: 800 !important;
    margin: 0 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-panel-head > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
  /* Hide the verbose ALLE SYSTEME chip in pane head — reference shows only "+" */
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-panel-head .ecf-status {
    display: none !important;
  }
  /* Add an inline "+" button slot via existing toolbar — and move it next to title visually */
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-toolbar {
    margin: 12px 0 10px !important;
    gap: 8px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-search {
    height: 38px !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.025) !important;
    border-color: rgba(124, 106, 247, 0.18) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-toolbar .ecf-btn {
    width: 38px !important;
    min-height: 38px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 17px !important;
    font-weight: 600 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-filter-row {
    gap: 6px !important;
    margin-bottom: 10px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-filter-row button {
    min-height: 28px !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-room {
    min-height: 60px !important;
    padding: 10px !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    border-radius: 12px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-room-avatar {
    width: 40px !important;
    height: 40px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-room strong {
    font-size: 13px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-room small {
    font-size: 11px !important;
    margin-top: 3px !important;
  }

  /* Chat panel: refined header + composer */
  body.auth-ready #ec-claude-shell-final .ecf-chat-panel {
    border-radius: 16px !important;
    background:
      linear-gradient(180deg, rgba(16, 16, 36, 0.74), rgba(9, 9, 24, 0.86)) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-head {
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(124, 106, 247, 0.16) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-head .ecf-avatar {
    width: 40px !important;
    height: 40px !important;
    border-radius: 12px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-head strong {
    font-size: 14px !important;
    font-weight: 700 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-head small {
    font-size: 11px !important;
    margin-top: 2px !important;
    color: rgba(214, 210, 255, 0.55) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-actions button {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(214, 210, 255, 0.08) !important;
    color: rgba(214, 210, 255, 0.85) !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-actions button[disabled] {
    opacity: 0.5 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-actions .ecf-chip {
    font-size: 9px !important;
    padding: 5px 8px !important;
  }

  /* Right management panel — flatter, tighter, less card-y */
  body.auth-ready #ec-claude-shell-final .ecf-rightpanel {
    padding: 14px 12px !important;
    gap: 12px !important;
    border-radius: 16px !important;
    background:
      linear-gradient(180deg, rgba(16, 16, 36, 0.74), rgba(9, 9, 24, 0.86)) !important;
  }
  /* §DESKTOP-RP-2026-09-08: nach hier konsolidiert -> Block am Dateiende. */

  /* Composer: pill row matching reference (attach | input | emoji | mic | send) */
  body.auth-ready #ec-claude-shell-final .ecf-composer {
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    gap: 10px !important;
    min-height: 64px !important;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid rgba(124, 106, 247, 0.16) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-tools {
    padding: 3px 4px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-tools .ecf-attach-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    font-size: 14px !important;
  }
  body.auth-ready #ec-claude-shell-final #ec-final-msg-input {
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer-badge {
    height: 26px !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    font-size: 9px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-send-btn {
    min-width: 80px !important;
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 11.5px !important;
  }

  /* Chat stream background: cleaner, no aggressive grid */
  body.auth-ready #ec-claude-shell-final .ecf-chat-stream {
    background:
      radial-gradient(circle at 50% 0%, rgba(53, 215, 255, 0.04), transparent 60%),
      linear-gradient(180deg, rgba(7, 9, 22, 0.30), rgba(4, 5, 16, 0.42)) !important;
    background-size: auto !important;
    padding: 14px 18px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   DESKTOP LOGGED-IN — POLISH PASS (2026-05-13)
   Tightens sidebar, chat list, center empty state, composer, right
   panel and settings to match reference more closely. Pure CSS only,
   preserves all handlers and IDs.
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  /* Kill any stray glow blob from the old #ec-claude-shell that could
     bleed behind the new shell (defensive — old shell is also
     display:none). */
  body.auth-ready #ec-claude-shell::before,
  body.auth-ready #ec-claude-shell::after {
    display: none !important;
    content: none !important;
  }

  /* SIDEBAR — clean active state without clipped drop-shadow */
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 {
    overflow: visible !important;
    padding-bottom: 14px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-nav {
    overflow: visible !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-nav button.active {
    background:
      linear-gradient(135deg, rgba(138, 91, 255, 0.20), rgba(107, 234, 255, 0.08)) !important;
    border-color: rgba(124, 106, 247, 0.32) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.06),
      inset 0 0 0 1px rgba(124, 106, 247, 0.12) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-nav button.active::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 2px;
    background: linear-gradient(180deg, #8a5bff, #6beaff);
    box-shadow: 0 0 12px rgba(138, 91, 255, 0.45);
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-nav button {
    position: relative !important;
  }

  /* Status card: tighter, no overflow */
  body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-status {
    box-shadow: none !important;
  }

  /* CHAT LIST PANEL — premium spacing */
  body.auth-ready #ec-claude-shell-final .ecf-contacts {
    padding: 14px 12px 12px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-panel-head {
    margin-bottom: 4px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-panel-head h1 {
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-toolbar {
    margin: 10px 0 8px !important;
    grid-template-columns: minmax(0, 1fr) 36px !important;
    gap: 8px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-search {
    height: 36px !important;
    border-radius: 10px !important;
    padding: 0 12px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-search input {
    font-size: 12.5px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-toolbar .ecf-btn {
    width: 36px !important;
    min-height: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    line-height: 1 !important;
    background: linear-gradient(135deg, rgba(138, 91, 255, 0.28), rgba(107, 234, 255, 0.22)) !important;
    border-color: rgba(124, 106, 247, 0.36) !important;
    color: #fff !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-filter-row {
    margin: 4px 0 10px !important;
    gap: 4px !important;
    flex-wrap: wrap !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-filter-row button {
    flex: 0 0 auto !important;
    min-height: 26px !important;
    padding: 0 10px !important;
    font-size: 10.5px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-room-list {
    gap: 4px !important;
    padding-right: 2px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-room {
    min-height: 56px !important;
    padding: 9px 10px !important;
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    gap: 10px !important;
    border-radius: 10px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-room-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    font-size: 11px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-room strong {
    font-size: 12.5px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-room small {
    font-size: 10.5px !important;
    margin-top: 2px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-room time {
    font-size: 9.5px !important;
  }

  /* CHAT LIST EMPTY STATE — compact, premium */
  body.auth-ready #ec-claude-shell-final .ecf-contacts .ecf-empty {
    min-height: auto !important;
    gap: 6px !important;
    padding: 18px 12px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-contacts .ecf-empty strong {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #f4f3ff !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-contacts .ecf-empty p {
    margin: 0 !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-contacts .ecf-empty > div {
    margin-top: 8px !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-contacts .ecf-empty .ecf-btn {
    width: 100% !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    font-size: 11.5px !important;
    border-radius: 9px !important;
  }

  /* CENTER CHAT — compact empty state */
  body.auth-ready #ec-claude-shell-final .ecf-chat-empty {
    max-width: 420px !important;
    margin: 0 auto !important;
    gap: 8px !important;
    padding: 22px 18px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-empty h2 {
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin: 0 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-empty p {
    margin: 0 !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-empty > div {
    margin-top: 12px !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-empty .ecf-btn {
    min-height: 34px !important;
    padding: 0 14px !important;
    font-size: 11.5px !important;
    border-radius: 9px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-empty-globe {
    padding: 18px 14px !important;
  }
  body.auth-ready #ec-claude-shell-final .ec-empty-globe {
    width: 200px !important;
    height: 200px !important;
    max-width: min(36vw, 200px) !important;
    max-height: min(32vh, 200px) !important;
    border-radius: 22px !important;
  }
  body.auth-ready #ec-claude-shell-final .ec-empty-globe canvas {
    width: 180px !important;
    height: 180px !important;
  }

  /* COMPOSER — make the input the real hero, drop the clipped placeholder */
  body.auth-ready #ec-claude-shell-final .ecf-composer {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    gap: 8px !important;
    min-height: 60px !important;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-tools {
    padding: 2px 3px !important;
    gap: 2px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-tools .ecf-attach-btn {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 13px !important;
  }
  body.auth-ready #ec-claude-shell-final #ec-final-msg-input {
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
    width: 100% !important;
    min-width: 0 !important;
  }
  body.auth-ready #ec-claude-shell-final #ec-final-msg-input::placeholder {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* Hide AES-GCM badge on narrow chat panel widths to give input room.
     The padlock badge stays visible elsewhere as security signal. */
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-composer-badge {
    display: none !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-send-btn {
    min-width: 64px !important;
    height: 38px !important;
    padding: 0 14px !important;
    font-size: 11px !important;
    border-radius: 999px !important;
  }

  /* §DESKTOP-RP-2026-09-08: nach hier konsolidiert -> Block am Dateiende. */

  /* SETTINGS — compact identity / hero card */
  body.auth-ready #ec-claude-shell-final .ecf-view[data-ec-final-panel="settings"] {
    padding: 0 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-head {
    margin-bottom: 10px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-head h1 {
    font-size: 18px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings {
    grid-template-columns: 200px minmax(0, 1fr) !important;
    gap: 12px !important;
    height: 100% !important;
    min-height: 0 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-nav {
    padding: 10px !important;
    border-radius: 14px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-nav button {
    min-height: 34px !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-panel {
    padding: 14px !important;
    border-radius: 14px !important;
    overflow-y: auto !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-section h2 {
    font-size: 14px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-section p {
    font-size: 11.5px !important;
    margin: 0 0 10px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-identity-grid {
    grid-template-columns: 140px minmax(0, 1fr) !important;
    gap: 12px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-avatar-card {
    padding: 12px !important;
    border-radius: 12px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-profile-orb {
    width: 56px !important;
    height: 56px !important;
    font-size: 18px !important;
    border-radius: 16px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-stack .ecf-kv {
    min-height: 40px !important;
    padding: 6px 10px !important;
    border-radius: 8px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-stack .ecf-kv > span {
    font-size: 11px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-stack .ecf-kv > strong {
    font-size: 11px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 200px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-settings-card {
    padding: 12px 14px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
  }
  /* No huge empty area at bottom of the panel */
  body.auth-ready #ec-claude-shell-final .ecf-settings-section.active {
    padding: 0 !important;
    min-height: 0 !important;
  }

  /* No horizontal overflow in any panel */
  body.auth-ready #ec-claude-shell-final .ecf-contacts,
  body.auth-ready #ec-claude-shell-final .ecf-chat-panel,
  body.auth-ready #ec-claude-shell-final .ecf-rightpanel,
  body.auth-ready #ec-claude-shell-final .ecf-settings-panel {
    overflow-x: hidden !important;
  }
}

/* Narrower viewport: composer stays tight; allow filter row wrap */
@media (min-width: 900px) and (max-width: 1199px) {
  body.auth-ready #ec-claude-shell-final .ecf-composer {
    grid-template-columns: auto minmax(0, 1fr) auto !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout .ecf-filter-row button {
    padding: 0 8px !important;
    font-size: 10px !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   FINAL MICRO-FIX PASS (2026-05-13)
   - Verwalten button readable
   - Center empty state buttons fit horizontally
   - No horizontal scroll anywhere
   ───────────────────────────────────────────────────────────────────── */
@media (min-width: 900px) {
  /* Verwalten button: enabled vs disabled — clear visual without
     hiding intent. Disabled stays subtle, enabled gets a hint of
     neon so it reads as actionable. */
  body.auth-ready #ec-claude-shell-final .ecf-chat-actions
    button[data-ec-final-room-action]:not([disabled]) {
    border-color: rgba(107, 234, 255, 0.28) !important;
    color: #d6efff !important;
    background: rgba(107, 234, 255, 0.06) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-actions
    button[data-ec-final-room-action][disabled] {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
  }

  /* Center empty state: keep three CTAs on a single tidy row when
     the chat panel is wide enough, wrap cleanly when not. */
  body.auth-ready #ec-claude-shell-final .ecf-chat-empty > div {
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-empty .ecf-btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Belt-and-braces: no horizontal scroll on the whole shell. */
  body.auth-ready #ec-claude-shell-final,
  body.auth-ready #ec-claude-shell-final .ecf-main,
  body.auth-ready #ec-claude-shell-final .ecf-view,
  body.auth-ready #ec-claude-shell-final .ecf-chat-layout {
    overflow-x: hidden !important;
  }

  /* Composer input must not clip placeholder on any allowed width. */
  body.auth-ready #ec-claude-shell-final #ec-final-msg-input {
    flex: 1 1 auto !important;
  }

  /* Right panel rows with aria-disabled stay clickable but read as
     "inactive" so the user can still receive the toast on click. */
  body.auth-ready #ec-claude-shell-final .ecf-rp-row[aria-disabled="true"] {
    opacity: 0.7 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row[aria-disabled="true"]:hover {
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   GROUP MANAGE / CHAT INFO MODAL — reference v1 (2026-05-13)
   Scoped strictly to #room-options-modal .ec-gm-modal so no other modal
   or screen is affected.
   ───────────────────────────────────────────────────────────────────── */
#room-options-modal > .modal.ec-gm-modal {
  max-width: 560px !important;
  width: min(96vw, 560px) !important;
  border-radius: 28px !important;
  border: 1px solid rgba(138, 91, 255, 0.32) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(138, 91, 255, 0.10), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(0, 209, 255, 0.08), transparent 38%),
    linear-gradient(180deg, rgba(11, 12, 28, 0.96), rgba(6, 7, 18, 0.98)) !important;
  box-shadow:
    0 32px 90px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 0 60px rgba(138, 91, 255, 0.18) !important;
  padding: 22px 22px 18px !important;
  gap: 14px !important;
  display: flex !important;
  flex-direction: column !important;
}
#room-options-modal .ec-gm-modal .modal-handle {
  width: 42px;
  height: 4px;
  border-radius: 999px;
  background: rgba(214, 210, 255, 0.20);
  margin: 0 auto 10px;
}
#room-options-modal .ec-gm-modal .ec-gm-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #f4f3ff;
  margin-bottom: 4px;
}
#room-options-modal .ec-gm-modal .ec-gm-block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#room-options-modal .ec-gm-modal .ec-gm-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(214, 210, 255, 0.62);
}
#room-options-modal .ec-gm-modal .ec-gm-code-box {
  /* §GM-REDESIGN-2026-09-14: der Kopieren-Button sitzt jetzt in der
     Aktionsleiste darunter, die Box traegt nur noch den Code — damit steht
     ihm die volle Breite zur Verfuegung (zweite Ursache des Umbruchs). */
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  text-align: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(138, 91, 255, 0.42);
  background:
    radial-gradient(circle at 0% 50%, rgba(138, 91, 255, 0.10), transparent 60%),
    rgba(14, 16, 36, 0.92);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}
#room-options-modal .ec-gm-modal .ec-gm-code-box:hover {
  border-color: rgba(138, 91, 255, 0.72);
  background:
    radial-gradient(circle at 0% 50%, rgba(138, 91, 255, 0.14), transparent 60%),
    rgba(16, 18, 38, 0.96);
}
#room-options-modal .ec-gm-modal .ec-gm-code {
  font-family: var(--font-mono, monospace);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: #f4f3ff;
  /* §GM-REDESIGN-2026-09-14: war word-break:break-all. Das trennt MITTEN im
     Wort — daher „Tippen: Einladungscod / e erstellen". Ein Einladungscode ist
     8 Zeichen und braucht ueberhaupt keinen Umbruch; overflow-wrap:anywhere
     greift nur, wenn es sonst ueberliefe, und respektiert Wortgrenzen. */
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.15;
  min-width: 0;
}
/* Kein Code vorhanden -> der Platzhalter ist ein SATZ, kein Code. Er darf
   nicht in Code-Typografie gesetzt werden, sonst bricht er unschoen um. */
#room-options-modal .ec-gm-modal .ec-gm-code.is-placeholder {
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  color: rgba(214, 210, 255, 0.78);
  line-height: 1.45;
  white-space: normal;
}
#room-options-modal .ec-gm-modal .ec-gm-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(138, 91, 255, 0.55);
  background: rgba(138, 91, 255, 0.10);
  color: #d7d2ff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
#room-options-modal .ec-gm-modal .ec-gm-code-copy:hover {
  background: rgba(138, 91, 255, 0.20);
  border-color: rgba(138, 91, 255, 0.78);
}
#room-options-modal .ec-gm-modal .ec-gm-code-copy:active {
  transform: scale(0.97);
}
#room-options-modal .ec-gm-modal .ec-gm-helper {
  font-size: 11.5px;
  color: rgba(214, 210, 255, 0.55);
  line-height: 1.45;
  padding: 0 2px;
}
/* Auto-delete card */
#room-options-modal .ec-gm-modal .ec-gm-card {
  border: 1px solid rgba(124, 106, 247, 0.20);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(16, 16, 36, 0.7), rgba(9, 9, 24, 0.86)),
    rgba(10, 12, 28, 0.6);
  padding: 14px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-head {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(138, 91, 255, 0.16);
  color: #c7baff;
  font-size: 18px;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-title {
  font-size: 14px;
  font-weight: 700;
  color: #f4f3ff;
  letter-spacing: -0.01em;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: rgba(214, 210, 255, 0.55);
  line-height: 1.35;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: #c7baff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-value[disabled] {
  cursor: default;
  opacity: 0.85;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-value:not([disabled]):hover {
  background: rgba(138, 91, 255, 0.10);
  border-color: rgba(138, 91, 255, 0.32);
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-value b {
  font-weight: 700;
  font-size: 11px;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-slider {
  position: relative;
  padding: 4px 6px 0;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-track {
  position: relative;
  height: 3px;
  border-radius: 999px;
  background: rgba(214, 210, 255, 0.08);
  overflow: hidden;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-fill {
  display: block;
  height: 100%;
  width: 50%;
  border-radius: 999px;
  background: linear-gradient(90deg, #8a5bff, #6beaff);
  transition: width 0.24s ease;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-dots {
  position: absolute;
  top: 0;
  left: 6px;
  right: 6px;
  height: 3px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(214, 210, 255, 0.22);
  border: 1px solid rgba(214, 210, 255, 0.32);
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-dot.active {
  width: 14px;
  height: 14px;
  background: radial-gradient(circle, #fff, #c7baff 60%);
  border-color: rgba(138, 91, 255, 0.85);
  box-shadow: 0 0 0 3px rgba(138, 91, 255, 0.22), 0 0 14px rgba(138, 91, 255, 0.45);
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding: 0 2px;
  font-size: 11px;
  color: rgba(214, 210, 255, 0.55);
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-selector[hidden] {
  display: none !important;
}
#room-options-modal .ec-gm-modal #room-autodelete-select {
  background: rgba(8, 10, 22, 0.95);
  border: 1px solid rgba(124, 106, 247, 0.32);
  border-radius: 10px;
  padding: 10px 12px;
  color: #f4f3ff;
  font-size: 13px;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-save {
  padding: 10px 14px;
  border-radius: 12px;
  border: 0;
  background: linear-gradient(135deg, #8a5bff, #6beaff);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* E2E card */
#room-options-modal .ec-gm-modal .ec-gm-e2e {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(46, 204, 113, 0.32);
  background:
    radial-gradient(circle at 0% 50%, rgba(46, 204, 113, 0.10), transparent 60%),
    rgba(7, 18, 14, 0.6);
}
#room-options-modal .ec-gm-modal .ec-gm-e2e-shield {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(46, 204, 113, 0.18);
  color: #4ade80;
  font-size: 18px;
}
#room-options-modal .ec-gm-modal .ec-gm-e2e-title {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.10em;
  color: #4ade80;
}
#room-options-modal .ec-gm-modal .ec-gm-e2e-sub {
  margin-top: 3px;
  font-size: 11.5px;
  color: rgba(214, 210, 255, 0.62);
}
#room-options-modal .ec-gm-modal .ec-gm-e2e-check {
  color: #4ade80;
  font-size: 16px;
  font-weight: 800;
}

/* Action rows */
#room-options-modal .ec-gm-modal .ec-gm-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(214, 210, 255, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008)),
    rgba(10, 12, 28, 0.6);
  color: #f4f3ff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  text-align: left;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.12s ease;
}
#room-options-modal .ec-gm-modal .ec-gm-row:hover {
  border-color: rgba(124, 106, 247, 0.32);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
    rgba(12, 14, 32, 0.7);
  transform: translateY(-1px);
}
#room-options-modal .ec-gm-modal .ec-gm-row-icon {
  font-size: 18px;
  text-align: center;
}
#room-options-modal .ec-gm-modal .ec-gm-row-chev {
  color: rgba(214, 210, 255, 0.55);
  font-size: 18px;
  font-weight: 700;
  text-align: right;
}
#room-options-modal .ec-gm-modal .ec-gm-row--danger {
  border-color: rgba(255, 71, 87, 0.35) !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(255, 71, 87, 0.20), transparent 70%),
    linear-gradient(135deg, rgba(255, 71, 87, 0.18), rgba(255, 71, 87, 0.08)) !important;
  color: #ffd6dc !important;
}
#room-options-modal .ec-gm-modal .ec-gm-row--danger:hover {
  border-color: rgba(255, 71, 87, 0.55) !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(255, 71, 87, 0.28), transparent 70%),
    linear-gradient(135deg, rgba(255, 71, 87, 0.24), rgba(255, 71, 87, 0.12)) !important;
}
#room-options-modal .ec-gm-modal .ec-gm-row--danger .ec-gm-row-chev {
  color: rgba(255, 255, 255, 0.85);
}
#room-options-modal .ec-gm-modal .ec-gm-row--close {
  grid-template-columns: 24px minmax(0, 1fr);
  border-color: rgba(214, 210, 255, 0.06) !important;
  background: rgba(10, 12, 28, 0.4) !important;
  color: rgba(214, 210, 255, 0.72) !important;
  font-weight: 600;
  margin-top: 2px;
}
#room-options-modal .ec-gm-modal .ec-gm-row--close:hover {
  border-color: rgba(214, 210, 255, 0.18) !important;
  color: #f4f3ff !important;
}

/* Hide legacy compat blocks visually */
/* §GM-REDESIGN-2026-09-14: #room-code-actions ist aus dieser Liste entfernt —
   die Teilen-/Kopieren-Leiste ist jetzt echte, sichtbare UI. Die drei
   verbleibenden Selektoren sind reine Legacy-Kompatibilitaets-Knoten. */
#room-options-modal .ec-gm-modal #room-expire-info,
#room-options-modal .ec-gm-modal #room-selfdelete-countdown,
#room-options-modal .ec-gm-modal #room-expire-change {
  display: none !important;
}

/* §LOGIN-FOCUS-2026-09-10: Basis-Regel OHNE .auth-ready-Gate. Vorher hatte das
   Overlay vor dem Login gar keine Styles und rendert als normaler Block —
   das ✕ der .media-close landete sichtbar oben links am Fensterrand.
   Sichtbarkeit kommt weiterhin ausschliesslich ueber .active (ui-render.js). */
.media-preview-overlay {
  display: none;
}

/* Desktop media preview/lightbox */
body.auth-ready .media-preview-overlay {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(3, 6, 18, 0.88);
  z-index: 10050;
}

body.auth-ready .media-preview-overlay.active {
  display: flex;
}

body.auth-ready .media-preview-overlay .media-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(18, 22, 44, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  cursor: pointer;
  z-index: 1;
}

body.auth-ready #media-preview-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

body.auth-ready #media-preview-content img,
body.auth-ready #media-preview-content video {
  max-width: min(96vw, 1280px);
  max-height: 92dvh;
  border-radius: 12px;
  object-fit: contain;
}

/* Safe chat links + no-fetch previews */
body.auth-ready #chat-screen .msg-bubble .ec-chat-link,
body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-chat-link {
  color: var(--accent2, #67e8f9) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

body.auth-ready #chat-screen .msg-bubble .ec-chat-text,
body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-chat-text {
  line-height: 1.55 !important;
  overflow-wrap: anywhere !important;
}

body.auth-ready #chat-screen .msg-bubble .ec-link-preview,
body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview {
  display: grid !important;
  grid-template-columns: 84px minmax(0, 1fr) !important;
  gap: 10px !important;
  width: min(320px, 100%) !important;
  max-width: 100% !important;
  margin-top: 9px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.045) !important;
  color: var(--text, #eef3ff) !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
}

body.auth-ready #chat-screen .msg-bubble .ec-yt-preview,
body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-yt-preview {
  grid-template-columns: 126px minmax(0, 1fr) !important;
}

body.auth-ready #chat-screen .msg-bubble .ec-link-preview-thumb,
body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview-thumb {
  position: relative !important;
  min-height: 72px !important;
  background: linear-gradient(135deg, rgba(124,92,255,0.2), rgba(34,211,238,0.12)) !important;
  display: grid !important;
  place-items: center !important;
}

body.auth-ready #chat-screen .msg-bubble .ec-link-preview-thumb img,
body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview-thumb img {
  width: 100% !important;
  height: 100% !important;
  min-height: 72px !important;
  object-fit: cover !important;
  display: block !important;
}

body.auth-ready #chat-screen .msg-bubble .ec-link-preview-play,
body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview-play,
body.auth-ready #chat-screen .msg-bubble .ec-link-preview-icon,
body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview-icon {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.58) !important;
  color: #fff !important;
}

body.auth-ready #chat-screen .msg-bubble .ec-link-preview-body,
body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview-body {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  padding: 10px 10px 10px 0 !important;
}

body.auth-ready #chat-screen .msg-bubble .ec-link-preview-body strong,
body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview-body strong,
body.auth-ready #chat-screen .msg-bubble .ec-link-preview-body small,
body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview-body small {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.auth-ready #chat-screen .msg-bubble .ec-link-preview-body strong,
body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview-body strong {
  font-size: 13px !important;
}

body.auth-ready #chat-screen .msg-bubble .ec-link-preview-body small,
body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview-body small {
  color: var(--text2, rgba(231,235,255,0.58)) !important;
  font-size: 11px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   §FRESH-LOGIN-GATING · 2026-07-07 — rechtes Verwaltungspanel erst bei aktivem Chat
   Das rechte Panel (.ecf-rightpanel: Tresor/Selbstzerstörung/…) bleibt beim
   Fresh-Login und in der leeren Chat-Ansicht ausgeblendet. Es erscheint ERST,
   wenn onRoomOpened() die Body-Klasse .ec-final-room-open setzt (aktiv geöffneter
   Chat). renderEmpty() entfernt sie wieder. Linke Leiste + Chat-Liste unberührt.
   Additiv, last-in-file → gewinnt gegen die bestehende :not([view=chat])-Regel.
   ═══════════════════════════════════════════════════════════════════════════ */
body.auth-ready:not(.ec-final-room-open) #ec-claude-shell-final .ecf-rightpanel {
  display: none !important;
}
/* §END FRESH-LOGIN-GATING */

/* ═══════════════════════════════════════════════════════════════════════════
   §THEME-UNIFY-2026-07-08 — Desktop-Token-Blöcke der 10 App-Themes (Phase 6)
   ═══════════════════════════════════════════════════════════════════════════
   Gemappt auf document.body.className (ec-theme-<id>, gesetzt von
   ecApplyAppTheme in ui-render.js). Scope: NUR die eingeloggte App
   (body.auth-ready) — Landing/Login behalten das Marken-Design.
   Die Blöcke überschreiben die :root-Kern-Tokens aus style.css; der
   Body-Hintergrund braucht html-Präfix + !important, weil app.css
   (lädt NACH dieser Datei) einen !important-Gradient auf body setzt —
   höhere Spezifität (html body.class.class) gewinnt das Duell.
   oled-midnight = bewusst identisch mit den :root-Defaults (No-op),
   damit Bestandsnutzer ohne gespeicherte Wahl keinen Sprung sehen. */

/* 1 — OLED Midnight (Default, entspricht :root) */
body.auth-ready.ec-theme-oled-midnight {
  --accent: #7c6af7;
  --accent-hi: #9b8fff;
  --cyan: #00ffff;
  --cyan-dim: #00cccc;
  --bg: #000000;
  --bg2: #050508;
  --bg3: #0a0a12;
  --border: rgba(120, 100, 255, 0.12);
  --border-hi: rgba(0, 255, 255, 0.25);
}

/* 2 — Cyber Vapor: Deep Purple, Hot-Magenta + Cyan */
body.auth-ready.ec-theme-cyber-vapor {
  --accent: #ff2ec4;
  --accent-hi: #ff5fd2;
  --cyan: #22d3ee;
  --cyan-dim: #0ea5c9;
  --bg: #12041f;
  --bg2: #1c0733;
  --bg3: #22093d;
  --border: rgba(255, 46, 196, 0.22);
  --border-hi: rgba(34, 211, 238, 0.30);
}
html body.auth-ready.ec-theme-cyber-vapor {
  background: linear-gradient(180deg, #0d0317 0%, #1c0733 55%, #12041f 100%) !important;
}

/* 3 — Emerald Matrix: Deep Charcoal, Cyber-Grün + Mint */
body.auth-ready.ec-theme-emerald-matrix {
  --accent: #3dff73;
  --accent-hi: #6ee7b7;
  --cyan: #34d399;
  --cyan-dim: #26a97a;
  --bg: #071009;
  --bg2: #0c1710;
  --bg3: #122016;
  --border: rgba(61, 255, 115, 0.20);
  --border-hi: rgba(110, 231, 183, 0.30);
}
html body.auth-ready.ec-theme-emerald-matrix {
  background: linear-gradient(180deg, #050c07 0%, #0c1710 55%, #071009 100%) !important;
}

/* 4 — Crimson Phantom: Dunkelrot + Anthrazit */
body.auth-ready.ec-theme-crimson-phantom {
  --accent: #dc2626;
  --accent-hi: #f87171;
  --cyan: #fb7185;
  --cyan-dim: #be5561;
  --bg: #120607;
  --bg2: #1c0a0c;
  --bg3: #240e11;
  --border: rgba(220, 38, 38, 0.24);
  --border-hi: rgba(248, 113, 113, 0.32);
}
html body.auth-ready.ec-theme-crimson-phantom {
  background: linear-gradient(180deg, #0d0405 0%, #1c0a0c 55%, #120607 100%) !important;
}

/* 5 — Titanium Steel: Grau + Silber */
body.auth-ready.ec-theme-titanium-steel {
  --accent: #cbd5e1;
  --accent-hi: #e2e8f0;
  --cyan: #94a3b8;
  --cyan-dim: #71809a;
  --bg: #0b0d10;
  --bg2: #12151a;
  --bg3: #181c23;
  --border: rgba(203, 213, 225, 0.18);
  --border-hi: rgba(226, 232, 240, 0.28);
}
html body.auth-ready.ec-theme-titanium-steel {
  background: linear-gradient(180deg, #08090c 0%, #12151a 55%, #0b0d10 100%) !important;
}

/* 6 — Nordic Frost: Arktisches Blau + Eis */
body.auth-ready.ec-theme-nordic-frost {
  --accent: #38bdf8;
  --accent-hi: #7dd3fc;
  --cyan: #a5f3fc;
  --cyan-dim: #67c8d8;
  --bg: #050b12;
  --bg2: #0a141f;
  --bg3: #0f1c2b;
  --border: rgba(56, 189, 248, 0.22);
  --border-hi: rgba(165, 243, 252, 0.30);
}
html body.auth-ready.ec-theme-nordic-frost {
  background: linear-gradient(180deg, #04080d 0%, #0a141f 55%, #050b12 100%) !important;
}

/* 7 — Solar Flare: Bernstein + Warm-Orange */
body.auth-ready.ec-theme-solar-flare {
  --accent: #f59e0b;
  --accent-hi: #fbbf24;
  --cyan: #fb923c;
  --cyan-dim: #c9742f;
  --bg: #120b03;
  --bg2: #1d1206;
  --bg3: #261809;
  --border: rgba(245, 158, 11, 0.24);
  --border-hi: rgba(251, 191, 36, 0.32);
}
html body.auth-ready.ec-theme-solar-flare {
  background: linear-gradient(180deg, #0d0802 0%, #1d1206 55%, #120b03 100%) !important;
}

/* 8 — Desert Mirage: Sand + gedimmtes Gold */
body.auth-ready.ec-theme-desert-mirage {
  --accent: #d4a373;
  --accent-hi: #e9c46a;
  --cyan: #e9c46a;
  --cyan-dim: #bb9d55;
  --bg: #100c06;
  --bg2: #1a140b;
  --bg3: #221b10;
  --border: rgba(212, 163, 115, 0.24);
  --border-hi: rgba(233, 196, 106, 0.32);
}
html body.auth-ready.ec-theme-desert-mirage {
  background: linear-gradient(180deg, #0b0804 0%, #1a140b 55%, #100c06 100%) !important;
}

/* 9 — Amethyst Shimmer: tiefes Amethyst-Lila */
body.auth-ready.ec-theme-amethyst-shimmer {
  --accent: #a855f7;
  --accent-hi: #c084fc;
  --cyan: #d8b4fe;
  --cyan-dim: #a98cc9;
  --bg: #0e0616;
  --bg2: #180b24;
  --bg3: #201031;
  --border: rgba(168, 85, 247, 0.24);
  --border-hi: rgba(216, 180, 254, 0.32);
}
html body.auth-ready.ec-theme-amethyst-shimmer {
  background: linear-gradient(180deg, #0a0410 0%, #180b24 55%, #0e0616 100%) !important;
}

/* 10 — Forest Canopy: Moos-Grün */
body.auth-ready.ec-theme-forest-canopy {
  --accent: #4caf50;
  --accent-hi: #8bc34a;
  --cyan: #a3e635;
  --cyan-dim: #7fb32b;
  --bg: #08100a;
  --bg2: #101a12;
  --bg3: #16231a;
  --border: rgba(76, 175, 80, 0.22);
  --border-hi: rgba(163, 230, 53, 0.30);
}
html body.auth-ready.ec-theme-forest-canopy {
  background: linear-gradient(180deg, #060b07 0%, #101a12 55%, #08100a 100%) !important;
}
/* §END THEME-UNIFY-2026-07-08 */

/* ═══════════════════════════════════════════════════════════════════════════
   §PARITY-GATE-2026-07-08 — Composer-Gating · Welcome-Entfesselung · Attach-Popover
   ═══════════════════════════════════════════════════════════════════════════
   1) COMPOSER-GATE (Erweiterung von §FRESH-LOGIN-GATING ~:2689): Das Rightpanel
      war gegated, die Chat-Eingabeleiste (.ecf-composer: „+"/Emoji/Voice/Burn,
      Nachrichtenfeld, SENDEN) NICHT — sie stand im „Kein Chat ausgewählt"-
      Zustand sichtbar unter dem Welcome-Layout (UI-Zustands-Leck). Gleiche
      Gate-Klasse, gleiche Mechanik: onRoomOpened() setzt .ec-final-room-open,
      renderEmpty()/renderWelcomeStream() entfernen sie. Deckt BEIDE Composer-
      Instanzen (statisches Markup :1814 + JS-Selbstheilungs-Injektion ~:9688).
   2) WELCOME-ENTFESSELUNG: Die 420px-Kompaktregel des alten Text-Empty-States
      (.ecf-chat-empty { max-width:420px !important } ~:1893) erfasste auch den
      Welcome-Container (gleiche Basisklasse) → erzwungene Smartphone-Breite,
      object-fit:cover beschnitt das PNG samt Schriftzug („n zurück!").
      Neutralisierung NUR für .ecf-welcome; das Bild selbst rendert seit dem
      ui-render-§PARITY-GATE-Fix mit object-fit:contain (zuschnittfrei).
   3) ATTACH-POPOVER (Desktop-Hälfte der 6-Button-Parität): #attach-menu wird
      auf Desktop als elegantes Popover über der Eingabezeile gerendert
      (showAttachMenu() positioniert bereits fixed am „+"-Trigger). Scope
      body:not(.ec-mobile-shell-active) — das mobile Bottom-Sheet-Styling
      (§17/§ATTACH-GRID in mobile-overrides) bleibt unberührt. z-index 9997
      liegt über Composer/Stream und unter Emoji-Pop (9998) — kein
      blockierender Layer über den Buttons. */
body.auth-ready:not(.ec-final-room-open) #ec-claude-shell-final .ecf-composer {
  display: none !important;
}
body.auth-ready #ec-claude-shell-final .ecf-chat-empty.ecf-welcome {
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 24px !important;
}
body.auth-ready:not(.ec-mobile-shell-active) #attach-menu {
  z-index: 9997 !important;
  min-width: 300px;
  max-width: 340px;
  padding: 14px !important;
  border-radius: 18px !important;
  background: rgba(13, 13, 30, 0.97) !important;
  border: 1px solid rgba(163, 148, 255, 0.22) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 0 24px rgba(124, 92, 255, 0.10) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
body.auth-ready:not(.ec-mobile-shell-active) #attach-menu .ec-attach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
body.auth-ready:not(.ec-mobile-shell-active) #attach-menu .ec-attach-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 10px 6px 8px;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text, #e8e6ff);
  font: inherit;
}
body.auth-ready:not(.ec-mobile-shell-active) #attach-menu .ec-attach-opt .ec-attach-ico {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--bg3, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border, rgba(255, 255, 255, 0.10));
  transition: border-color .15s ease, transform .12s ease, background .15s ease;
}
body.auth-ready:not(.ec-mobile-shell-active) #attach-menu .ec-attach-opt:hover .ec-attach-ico {
  border-color: var(--accent, #7c5cff);
  background: rgba(124, 92, 255, 0.12);
  transform: translateY(-1px);
}
body.auth-ready:not(.ec-mobile-shell-active) #attach-menu .ec-attach-opt:active .ec-attach-ico {
  transform: scale(0.95);
}
body.auth-ready:not(.ec-mobile-shell-active) #attach-menu .ec-attach-opt small {
  font-size: 11px;
  color: var(--text2, rgba(232, 230, 255, 0.65));
  letter-spacing: .01em;
}
/* §END PARITY-GATE-2026-07-08 */

/* ═══════════════════════════════════════════════════════════════════════════
   §RAIL-NAV-NO-PILL-2026-07-08 — ovale Umrandung um die Menüpunkte entfernen
   ═══════════════════════════════════════════════════════════════════════════
   Ursache: style.css:14288 gibt `#ec-claude-shell-final .ecf-rail-nav` einen
   `border:1px` + `border-radius:999px` + Hintergrund/Innenschatten → das zeichnet
   die Pille/Ellipse um Chats…Hilfe & Support. Die bisherigen Overrides fassten
   nur gap/margin an, nie border/radius. Hier neutralisiert, damit die Menüpunkte
   frei und klar stehen (Owner-Wunsch 2026-07-08). Nur Desktop-Rail-v2, scoped. */
body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-nav,
body.auth-ready #ec-claude-shell-final .ecf-rail--v2 .ecf-rail-actions {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* §END RAIL-NAV-NO-PILL-2026-07-08 */

/* ═══════════════════════════════════════════════════════════════════════════
   §RENDER-VIRT-2026-07-10 — native Rendering-Virtualisierung (Desktop-Final)
   Gleiche Mechanik wie im Mobile-Pendant (mobile-overrides.css §RENDER-VIRT):
   Off-Screen-Nachrichten/-Listenzeilen kosten kein Layout/Paint mehr, DOM und
   Verhalten bleiben unverändert (Pass-Through, ecCoalesceFrame-kompatibel).
   ═══════════════════════════════════════════════════════════════════════ */
body.auth-ready #ec-claude-shell-final #ec-final-chat-stream > .ecf-live-message {
  content-visibility: auto;
  contain-intrinsic-size: auto 72px;
}
body.auth-ready #ec-claude-shell-final #ec-final-room-list > .ecf-room {
  content-visibility: auto;
  contain-intrinsic-size: auto 64px;
}
/* §END RENDER-VIRT-2026-07-10 */

/* ═══════════════════════════════════════════════════════════════════════════
   §DESKTOP-RP-2026-09-08 — Rechtes Chat-Tools-Panel + linke Rail
   ═══════════════════════════════════════════════════════════════════════════
   KONSOLIDIERUNG: `.ecf-rp-*` war dreifach definiert — drei aufeinander-
   folgende `@media (min-width: 900px)`-Blöcke (ab ~1305, ~1671, ~2004), die
   dieselben Selektoren mit `!important` überschrieben. Effektiv gewann der
   letzte: 7px Padding, 24px Icon, Beschreibung auf 9.5px — deutlich zu eng
   und kaum lesbar. Die beiden späteren Blöcke sind entfernt; DIES ist ab
   jetzt die einzige Quelle für das rechte Panel.

   Leitsatz: „Mehr Struktur, weniger Boxen." Die Zeilen sind Listeneinträge,
   keine Karten — deshalb kein Lift beim Hover (das alte `translateY(-1px)`
   ließ jede Zeile wie eine schwebende Card wirken), sondern nur Fläche,
   Border, Icon und Pfeil.

   Markup: index.html §DESKTOP-RP (Section-Header als `.ecf-rp-toggle`-Button,
   Zeilen in `.ecf-rp-rows`). Alle `data-ec-right-action`-Hooks unverändert —
   handleDesktopRightAction() ist NICHT angefasst.
   Scope strikt `body.auth-ready #ec-claude-shell-final` ⇒ 0 Mobile-Impact. */

@media (min-width: 900px) {

  /* ── Panel-Rahmen ──────────────────────────────────────────────────────── */
  body.auth-ready #ec-claude-shell-final .ecf-rightpanel {
    padding: 14px 12px !important;
    gap: 14px !important;
  }

  body.auth-ready #ec-claude-shell-final .ecf-rp-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  /* ── Section-Kopf = Collapse-Trigger ───────────────────────────────────── */
  body.auth-ready #ec-claude-shell-final .ecf-rp-head {
    margin: 0 0 6px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-toggle {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) 14px !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 5px 6px !important;
    border: none !important;
    border-radius: 8px !important;
    background: none !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background-color .15s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-toggle:hover {
    background: rgba(255, 255, 255, 0.035) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-toggle:focus-visible {
    outline: 2px solid rgba(138, 91, 255, 0.55) !important;
    outline-offset: 1px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-sec-ico {
    font-size: 11px !important;
    line-height: 1 !important;
    color: rgba(167, 139, 250, 0.85) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-kicker {
    font: 700 10px/1 var(--font-mono, "Space Mono", monospace) !important;
    letter-spacing: 0.14em !important;
    color: rgba(214, 210, 255, 0.58) !important;
    text-transform: uppercase !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-chev {
    font-size: 12px !important;
    line-height: 1 !important;
    color: rgba(214, 210, 255, 0.40) !important;
    justify-self: end !important;
    transition: transform .18s ease !important;
  }

  /* Zugeklappt: Pfeil dreht, Zeilen verbrauchen KEINEN Platz mehr. */
  body.auth-ready #ec-claude-shell-final .ecf-rp-toggle[aria-expanded="false"] .ecf-rp-chev {
    transform: rotate(-90deg) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-rows {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
  }
  body.auth-ready #ec-claude-shell-final
    .ecf-rp-head:has(.ecf-rp-toggle[aria-expanded="false"]) + .ecf-rp-rows {
    display: none !important;
  }
  /* Fallback ohne :has() (Firefox < 121 — im Projekt bereits als Kompat-Ziel
     dokumentiert): das JS setzt zusätzlich `.is-collapsed` auf die Section. */
  body.auth-ready #ec-claude-shell-final .ecf-rp-group.is-collapsed .ecf-rp-rows {
    display: none !important;
  }

  /* ── Zeilen: Listeneintrag, keine Card ─────────────────────────────────── */
  body.auth-ready #ec-claude-shell-final .ecf-rp-row {
    width: 100% !important;
    min-height: 54px !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) 14px !important;
    gap: 11px !important;
    align-items: center !important;
    padding: 8px 11px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(214, 210, 255, 0.07) !important;
    background: rgba(255, 255, 255, 0.014) !important;
    color: #f4f3ff !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background-color .15s ease, border-color .15s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row:hover {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(167, 139, 250, 0.30) !important;
    /* bewusst KEIN transform: Zeilen sollen liegen, nicht schweben. */
    transform: none !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row:active {
    background:
      linear-gradient(135deg, rgba(138, 91, 255, 0.16), rgba(59, 130, 246, 0.12)) !important;
    border-color: rgba(167, 139, 250, 0.45) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row:focus-visible {
    outline: 2px solid rgba(138, 91, 255, 0.6) !important;
    outline-offset: 1px !important;
  }

  body.auth-ready #ec-claude-shell-final .ecf-rp-row-icon {
    width: 30px !important;
    height: 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 9px !important;
    background: rgba(138, 91, 255, 0.12) !important;
    color: #d6d3ff !important;
    font-size: 14px !important;
    flex-shrink: 0 !important;
    transition: background-color .15s ease, color .15s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row:hover .ecf-rp-row-icon {
    background: rgba(138, 91, 255, 0.20) !important;
    color: #efeaff !important;
  }

  body.auth-ready #ec-claude-shell-final .ecf-rp-row-copy {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-copy strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #f4f3ff !important;
    letter-spacing: -0.005em !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  /* 11px statt der zuletzt aktiven 9.5px — darunter war die Beschreibung
     auf einem HiDPI-Desktop nicht mehr sauber lesbar. */
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-copy small {
    font-size: 11px !important;
    color: rgba(214, 210, 255, 0.52) !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-meta {
    color: rgba(214, 210, 255, 0.38) !important;
    font-size: 13px !important;
    justify-self: end !important;
    transition: transform .15s ease, color .15s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row:hover .ecf-rp-row-meta {
    transform: translateX(2px) !important;
    color: rgba(214, 210, 255, 0.72) !important;
  }

  /* ── Gefahrenzone: dezenter roter Akzent, kein Alarmkasten ─────────────── */
  body.auth-ready #ec-claude-shell-final .ecf-rp-danger .ecf-rp-sec-ico,
  body.auth-ready #ec-claude-shell-final .ecf-rp-danger .ecf-rp-kicker {
    color: rgba(248, 113, 113, 0.80) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-danger .ecf-rp-rows {
    padding-top: 2px !important;
    border-top: 1px solid rgba(248, 113, 113, 0.16) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row--danger {
    border-color: rgba(248, 113, 113, 0.16) !important;
    background: rgba(248, 113, 113, 0.030) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row--danger:hover {
    background: rgba(248, 113, 113, 0.075) !important;
    border-color: rgba(248, 113, 113, 0.38) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row--danger:active {
    background: rgba(248, 113, 113, 0.11) !important;
    border-color: rgba(248, 113, 113, 0.5) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row--danger .ecf-rp-row-icon {
    background: rgba(248, 113, 113, 0.13) !important;
    color: #f87171 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row--danger:hover .ecf-rp-row-icon {
    background: rgba(248, 113, 113, 0.20) !important;
    color: #fca5a5 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row--danger .ecf-rp-row-copy strong {
    color: #f2b8b8 !important;
  }

  /* ── Linke Rail: Icon + Text, klarer Active-State ──────────────────────── */
  body.auth-ready #ec-claude-shell-final .ecf-rail-nav button,
  body.auth-ready #ec-claude-shell-final .ecf-rail-archive {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 20px minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: none !important;
    color: rgba(214, 210, 255, 0.72) !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail-nav button:hover,
  body.auth-ready #ec-claude-shell-final .ecf-rail-archive:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    color: #f4f3ff !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail-nav button .ecf-nav-ico,
  body.auth-ready #ec-claude-shell-final .ecf-rail-archive .ecf-nav-ico {
    display: inline-grid !important;
    place-items: center !important;
    font-size: 13px !important;
    line-height: 1 !important;
    opacity: 0.85 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail-nav button .ecf-nav-label,
  body.auth-ready #ec-claude-shell-final .ecf-rail-archive .ecf-nav-label {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: -0.005em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Aktiver Punkt: dezenter Purple/Blue-Gradient, dünner Glow, abgerundet,
     plus schmale Farbmarkierung links. `.active` setzt ecSidebarSetActive() —
     der Vertrag ist unverändert. */
  body.auth-ready #ec-claude-shell-final .ecf-rail-nav button.active {
    background:
      linear-gradient(135deg, rgba(138, 91, 255, 0.20), rgba(59, 130, 246, 0.13)) !important;
    border-color: rgba(167, 139, 250, 0.28) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px -4px rgba(138, 91, 255, 0.45) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail-nav button.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 18px !important;
    border-radius: 0 3px 3px 0 !important;
    background: linear-gradient(180deg, #a78bfa, #60a5fa) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail-nav button.active .ecf-nav-ico {
    opacity: 1 !important;
    color: #c4b5fd !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rail-nav button:focus-visible,
  body.auth-ready #ec-claude-shell-final .ecf-rail-archive:focus-visible {
    outline: 2px solid rgba(138, 91, 255, 0.6) !important;
    outline-offset: 1px !important;
  }

  @media (prefers-reduced-motion: reduce) {
    body.auth-ready #ec-claude-shell-final .ecf-rp-row,
    body.auth-ready #ec-claude-shell-final .ecf-rp-row-icon,
    body.auth-ready #ec-claude-shell-final .ecf-rp-row-meta,
    body.auth-ready #ec-claude-shell-final .ecf-rp-chev,
    body.auth-ready #ec-claude-shell-final .ecf-rail-nav button {
      transition: none !important;
    }
  }
}

/* ═══ §DESKTOP-CHROME-2026-09-08 — Header, Chat-Liste, Composer ═════════════
   Ergänzt §DESKTOP-RP-2026-09-08. Gleiche Radius-/Abstands-Skala wie dort:
   Radius 10–12px für Controls, 11px für Listeneinträge, Border 1px.
   Scope strikt `body.auth-ready #ec-claude-shell-final`. */

@media (min-width: 900px) {

  /* ── Chat-Header: minimalistisch ───────────────────────────────────────── */
  body.auth-ready #ec-claude-shell-final .ecf-chat-head {
    padding: 10px 14px !important;
    gap: 12px !important;
    border-bottom: 1px solid rgba(214, 210, 255, 0.07) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-actions button[data-ec-final-room-action] {
    min-height: 30px !important;
    padding: 0 12px !important;
    border: 1px solid rgba(214, 210, 255, 0.12) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(232, 230, 255, 0.88) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color .15s ease, border-color .15s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-actions button[data-ec-final-room-action]:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(167, 139, 250, 0.32) !important;
  }
  /* Drei-Punkte-Button — schaltet das rechte Panel um. */
  body.auth-ready #ec-claude-shell-final .ecf-chat-more {
    width: 30px !important;
    height: 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    background: none !important;
    color: rgba(214, 210, 255, 0.6) !important;
    font-size: 16px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color .15s ease, color .15s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-more:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f4f3ff !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-more:focus-visible {
    outline: 2px solid rgba(138, 91, 255, 0.6) !important;
    outline-offset: 1px !important;
  }
  /* Panel ausgeblendet ⇒ mehr Platz für den Chat. Das Grid der Shell hat die
     Panel-Spalte am Ende; sie wird hier komplett entfernt statt nur leer
     gelassen, damit keine tote Spalte stehen bleibt. */
  body.auth-ready #ec-claude-shell-final.ecf-rp-hidden .ecf-rightpanel {
    display: none !important;
  }

  /* ── Chat-Liste: Kopf, Suche, Neuer-Chat-Icon-Button, Filter ───────────── */
  body.auth-ready #ec-claude-shell-final .ecf-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-search input {
    height: 34px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    transition: border-color .15s ease, box-shadow .15s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-search input:focus {
    border-color: rgba(167, 139, 250, 0.5) !important;
    box-shadow: 0 0 0 1px rgba(138, 91, 255, 0.35) !important;
  }
  /* Der Neuer-Chat-Button bleibt erhalten — nur als kompakter Icon-Button
     mit Tooltip statt als Text-Button. Handler-Attribute unverändert. */
  body.auth-ready #ec-claude-shell-final .ecf-newchat-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 10px !important;
    border: 1px solid rgba(167, 139, 250, 0.30) !important;
    background:
      linear-gradient(135deg, rgba(138, 91, 255, 0.22), rgba(59, 130, 246, 0.16)) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: filter .15s ease, border-color .15s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-newchat-btn:hover {
    filter: brightness(1.18) !important;
    border-color: rgba(167, 139, 250, 0.55) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-newchat-btn:focus-visible {
    outline: 2px solid rgba(138, 91, 255, 0.7) !important;
    outline-offset: 2px !important;
  }

  body.auth-ready #ec-claude-shell-final .ecf-filter-row {
    display: flex !important;
    gap: 6px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-filter-row button {
    min-height: 28px !important;
    padding: 0 11px !important;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: rgba(214, 210, 255, 0.66) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-filter-row button:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f4f3ff !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-filter-row button.active,
  body.auth-ready #ec-claude-shell-final .ecf-filter-row button[aria-pressed="true"] {
    background:
      linear-gradient(135deg, rgba(138, 91, 255, 0.22), rgba(59, 130, 246, 0.14)) !important;
    border-color: rgba(167, 139, 250, 0.30) !important;
    color: #ffffff !important;
  }

  /* ── Composer: schwebende Leiste ───────────────────────────────────────── */
  body.auth-ready #ec-claude-shell-final .ecf-composer {
    margin: 0 14px 14px !important;
    padding: 7px 8px 7px 10px !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1px solid rgba(214, 210, 255, 0.10) !important;
    border-radius: 14px !important;
    background: rgba(12, 14, 30, 0.72) !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer:focus-within {
    border-color: rgba(167, 139, 250, 0.42) !important;
    box-shadow: 0 0 20px -6px rgba(138, 91, 255, 0.5) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-tools {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-attach-btn {
    width: 30px !important;
    height: 30px !important;
    display: inline-grid !important;
    place-items: center !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    background: none !important;
    font-size: 14px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: background-color .14s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-attach-btn:hover {
    background: rgba(255, 255, 255, 0.07) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer #ec-final-msg-input {
    height: 32px !important;
    border: none !important;
    background: none !important;
    font-size: 13.5px !important;
    color: #f4f3ff !important;
    box-shadow: none !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer #ec-final-msg-input:focus {
    border: none !important;
    box-shadow: none !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-composer-badge {
    font: 600 9.5px/1 var(--font-mono, "Space Mono", monospace) !important;
    letter-spacing: 0.10em !important;
    color: rgba(214, 210, 255, 0.40) !important;
    white-space: nowrap !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-send-btn {
    min-height: 32px !important;
    padding: 0 15px !important;
    border: none !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #7c5cff, #4f7dfb) !important;
    color: #ffffff !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: filter .15s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-send-btn:hover {
    filter: brightness(1.12) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    body.auth-ready #ec-claude-shell-final .ecf-composer,
    body.auth-ready #ec-claude-shell-final .ecf-filter-row button,
    body.auth-ready #ec-claude-shell-final .ecf-newchat-btn,
    body.auth-ready #ec-claude-shell-final .ecf-chat-more { transition: none !important; }
  }
}

/* ═══ §DESKTOP-MSG-2026-09-08 — Nachrichten-Bubbles, Meta, Preview-Cards ════
   Ergänzt §DESKTOP-RP / §DESKTOP-CHROME. Die Bubble-Grundregeln stehen weiter
   oben (~724); hier nur die Modernisierung plus der neue Meta-Baustein
   (Uhrzeit + Verschlüsselungsindikator), den ecFinalMsgMeta() für ALLE fünf
   Nachrichtentypen liefert.
   Link-/YouTube-Preview-Cards existierten bereits inklusive Consent-Gate
   (Thumbnail lädt erst nach Tap — kein IP-Leak an Google beim Rendern); hier
   werden sie nur an die neue Bubble-Optik angeglichen. */

@media (min-width: 900px) {

  /* ── Bubble: kompakter, ruhiger ────────────────────────────────────────── */
  body.auth-ready #ec-claude-shell-final .ecf-live-message {
    max-width: min(68%, 560px) !important;
    padding: 8px 12px 6px !important;
    border-radius: 14px 14px 14px 5px !important;
    border-color: rgba(214, 210, 255, 0.10) !important;
    background: rgba(255, 255, 255, 0.038) !important;
    /* Der bisherige 22px-Schatten ließ jede Bubble schweben — in einem
       dichten Verlauf ist das visuelles Rauschen. */
    box-shadow: none !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-live-message.mine {
    border-radius: 14px 14px 5px 14px !important;
    border-color: rgba(167, 139, 250, 0.30) !important;
    background:
      linear-gradient(135deg, rgba(124, 92, 255, 0.26), rgba(79, 125, 251, 0.20)) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-live-message:not(.mine) small {
    margin-bottom: 3px !important;
    color: rgba(167, 139, 250, 0.90) !important;
    font-size: 9.5px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-chat-stream {
    gap: 4px !important;
  }

  /* ── Meta: Uhrzeit + Verschlüsselungsindikator ─────────────────────────── */
  body.auth-ready #ec-claude-shell-final .ecf-msg-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 5px !important;
    margin-top: 3px !important;
    font-size: 10px !important;
    line-height: 1 !important;
    color: rgba(214, 210, 255, 0.42) !important;
    user-select: none !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-live-message.mine .ecf-msg-meta {
    color: rgba(255, 255, 255, 0.58) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-msg-time {
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0.02em !important;
  }
  /* Dezent — der Indikator soll bestätigen, nicht dominieren. */
  body.auth-ready #ec-claude-shell-final .ecf-msg-enc {
    font-size: 9px !important;
    opacity: 0.65 !important;
  }

  /* ── Preview-Cards an die Bubble-Optik angleichen ──────────────────────── */
  body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview {
    margin-top: 7px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(214, 210, 255, 0.12) !important;
    background: rgba(0, 0, 0, 0.22) !important;
    transition: border-color .15s ease, background-color .15s ease !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview:hover {
    border-color: rgba(167, 139, 250, 0.38) !important;
    background: rgba(0, 0, 0, 0.30) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview-body strong {
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview-body small {
    font-size: 10.5px !important;
    color: rgba(214, 210, 255, 0.52) !important;
    /* Die Absender-Regel oben faerbt jedes <small> in der Bubble — hier
       zuruecksetzen, damit die Card-Unterzeile nicht wie ein Absender aussieht. */
    text-transform: none !important;
    letter-spacing: normal !important;
    font-family: inherit !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
  }

  @media (prefers-reduced-motion: reduce) {
    body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-link-preview {
      transition: none !important;
    }
  }
}

/* §DESKTOP-MSG-2026-09-08 (Nachtrag) — Datei-Karte in der Desktop-Bubble.
   Die Karte trägt inline `max-width:min(320px,80%)`. Seit die Bubble auf
   68%/560px begrenzt ist, bezog sich die 80% auf einen bereits schmalen,
   inhaltsabhängigen Container — der Dateiname wurde zu „Vertr…" gekürzt.
   Hier eine feste, lesbare Breite statt der zirkulären Prozentangabe. */
@media (min-width: 900px) {
  body.auth-ready #ec-claude-shell-final .ecf-live-message .ec-file-download {
    max-width: none !important;
    min-width: 230px !important;
    width: 100% !important;
    padding: 10px !important;
    border-radius: 11px !important;
    background: rgba(0, 0, 0, 0.22) !important;
    border-color: rgba(214, 210, 255, 0.12) !important;
  }
  /* Die Bubble muss der Karte Platz geben — sonst schrumpft sie auf den
     Textinhalt und die Karte wird wieder gequetscht. */
  body.auth-ready #ec-claude-shell-final .ecf-live-message:has(.ec-file-download) {
    min-width: 262px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §ATTACH-TOUCH-2026-09-13 — Trefferflaeche der Composer-Werkzeuge (+/😊/🎤/💣)
   ═══════════════════════════════════════════════════════════════════════════
   Die Desktop-Shell gilt ab 769px und ist bewusst dicht gebaut: 30x30px sind
   fuer eine Maus reichlich. Ein Geraet oberhalb dieser Breite muss aber nicht
   maus-bedient sein — Touch-Notebooks, Windows-Tablets und iPads im Querformat
   bekommen exakt diese Shell und dort waren 30px unter jeder Daumen-Toleranz
   (Messung: 30x30, Ziel 44x44).

   Die Vergroesserung haengt deshalb an `pointer: coarse` und NICHT an der
   Breite: Maus-Desktops behalten ihr dichtes Raster unveraendert (0 Impact),
   nur echte Finger-Eingabe bekommt das groessere Ziel. `gap` faengt die
   zusaetzliche Breite ab, damit die Werkzeugleiste das Eingabefeld nicht
   schmaler drueckt. */
@media (min-width: 769px) and (pointer: coarse) {
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-tools {
    gap: 0 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-attach-btn,
  body.auth-ready #ec-claude-shell-final .ecf-composer .ecf-tools .ecf-attach-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    touch-action: manipulation !important;
  }
}


/* ─────────────────────────────────────────────────────────────────────
   §GM-REDESIGN-2026-09-14 — einheitliche Cards im Gruppe-verwalten-Modal
   Die dunklen Kloetze (Invite-Block, Auto-Delete, E2E-Hinweis) hatten drei
   verschiedene Rahmen, Radien und Innenabstaende. Sie teilen sich jetzt EINE
   Grundform: 1px weisser 10%-Rahmen, 12px Radius, gleiches Padding, Icon
   vertikal zentriert. (Entspricht border border-white/10 + rounded-xl aus
   der Vorgabe, hier als reines CSS — das Projekt nutzt kein Tailwind.)
   ───────────────────────────────────────────────────────────────────── */
#room-options-modal .ec-gm-modal .ec-gm-card,
#room-options-modal .ec-gm-modal .ec-gm-e2e {
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(16, 16, 36, 0.70), rgba(9, 9, 24, 0.86));
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Kopfzeile jeder Card: Icon | Text | optionale Aktion — alle auf einer
   optischen Mittellinie. `align-items:center` allein reicht nicht, weil die
   Emoji-Glyphe eine eigene Grundlinie mitbringt; die feste Box zentriert sie. */
#room-options-modal .ec-gm-modal .ec-gm-card-head,
#room-options-modal .ec-gm-modal .ec-gm-autodelete-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}
#room-options-modal .ec-gm-modal .ec-gm-card-icon,
#room-options-modal .ec-gm-modal .ec-gm-autodelete-icon,
#room-options-modal .ec-gm-modal .ec-gm-e2e-shield {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 11px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  font-size: 17px;
  line-height: 1;
}
#room-options-modal .ec-gm-modal .ec-gm-card-copy { min-width: 0; }
#room-options-modal .ec-gm-modal .ec-gm-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #f4f3ff;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
#room-options-modal .ec-gm-modal .ec-gm-card-sub {
  font-size: 12px;
  color: rgba(214, 210, 255, 0.58);
  line-height: 1.45;
  margin-top: 2px;
}
/* Aktionsleiste unter dem Code: Kopieren + Teilen, gleich breit, umbruchfaehig. */
#room-options-modal .ec-gm-modal .ec-gm-invite-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
#room-options-modal .ec-gm-modal .ec-gm-invite-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: #e9e6ff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
#room-options-modal .ec-gm-modal .ec-gm-invite-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}
#room-options-modal .ec-gm-modal .ec-gm-invite-btn:active { transform: scale(0.98); }
#room-options-modal .ec-gm-modal .ec-gm-invite-btn.primary {
  border-color: rgba(138, 91, 255, 0.55);
  background: rgba(138, 91, 255, 0.16);
  color: #efeaff;
}
#room-options-modal .ec-gm-modal .ec-gm-invite-btn.primary:hover {
  background: rgba(138, 91, 255, 0.26);
  border-color: rgba(138, 91, 255, 0.78);
}
#room-options-modal .ec-gm-modal .ec-gm-invite-btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Der fertige Link zum Mitlesen/Markieren — lange URL darf umbrechen. */
#room-options-modal .ec-gm-modal .ec-gm-invite-link {
  font-family: var(--font-mono, monospace);
  font-size: 11.5px;
  color: rgba(214, 210, 255, 0.62);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 9px 11px;
  overflow-wrap: anywhere;
  line-height: 1.5;
  user-select: all;
}
#room-options-modal .ec-gm-modal .ec-gm-invite-link[hidden] { display: none; }
/* Slider-Punkte sind jetzt <button> — Browser-Standardoptik zuruecksetzen
   und eine echte Trefferflaeche geben (Deko-<span> hatte keine). */
#room-options-modal .ec-gm-modal .ec-gm-autodelete-dot {
  padding: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-dot:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
#room-options-modal .ec-gm-modal .ec-gm-autodelete-dot:focus-visible {
  outline: 2px solid rgba(138, 91, 255, 0.85);
  outline-offset: 3px;
}
/* E2E-Hinweis teilt sich die Card-Grundform, braucht aber eine Zeile. */
#room-options-modal .ec-gm-modal .ec-gm-e2e {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

/* ─────────────────────────────────────────────────────────────────────
   §CONTACT-SHARE-2026-09-14 — Kontaktkarte im Chat
   Nicht auf eine Shell gescopet: dieselbe Karte erscheint in der Legacy-
   Liste (#messages), im Desktop-Stream (.ecf-live-message) und in der
   Mobile-Shell (.ecm-msg). Ein Regelsatz statt drei divergierender.
   ───────────────────────────────────────────────────────────────────── */
.ec-contact-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(300px, 80%);
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text, #eceafd);
}
.ec-contact-card-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}
.ec-contact-card-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  background: rgba(138, 91, 255, 0.20);
  border: 1px solid rgba(138, 91, 255, 0.38);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
}
.ec-contact-card-id { min-width: 0; display: block; }
.ec-contact-card-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  /* Ein Name bricht am Leerzeichen, nie mitten im Wort. */
  overflow-wrap: anywhere;
  word-break: normal;
}
.ec-contact-card-tel {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--text2, rgba(214, 210, 255, 0.6));
  overflow-wrap: anywhere;
}
.ec-contact-card-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
}
.ec-contact-card-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  color: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
.ec-contact-card-btn:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
}
.ec-contact-card-btn:active { transform: scale(0.98); }
.ec-contact-card-btn.primary {
  border-color: rgba(60, 220, 150, 0.45);
  background: rgba(60, 220, 150, 0.16);
  color: #d6ffe9;
}
.ec-contact-card-btn.primary:hover {
  background: rgba(60, 220, 150, 0.26);
  border-color: rgba(60, 220, 150, 0.70);
}
/* Die Mobile-Shell setzt Blasen enger — die Karte darf dort die volle
   Blasenbreite nutzen, sonst wird sie auf ~200px gequetscht. */
.ecm-msg .ec-contact-card { max-width: 100%; }

/* ─────────────────────────────────────────────────────────────────────
   §VAULT-UI-2026-09-14 — Vault-Kacheln, Spinner, Touch-Targets
   Die Kacheln waren komplett inline gestylt und schnitten den Dateinamen
   per JS nach 15 Zeichen ab. Jetzt: echtes Markup, CSS-Truncate (voller
   Name bleibt im title + beim Download), 44px-Trefferflaechen.
   ───────────────────────────────────────────────────────────────────── */
.ec-vault-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 10px 12px;
  min-height: 128px;
  border: 1px solid var(--border, rgba(255,255,255,0.1));
  border-radius: 12px;
  background: var(--bg2, rgba(255,255,255,0.03));
  cursor: pointer;
  transition: border-color .18s ease, transform .12s ease;
  /* Ohne min-width:0 sprengt ein langer Dateiname die Grid-Spalte, statt
     beschnitten zu werden — der Grund, warum hier zuvor per JS gekuerzt wurde. */
  min-width: 0;
}
.ec-vault-tile:hover { border-color: var(--accent, #7c6af7); }
.ec-vault-tile:active { transform: scale(0.985); }
.ec-vault-tile:focus-visible {
  outline: 2px solid var(--accent, #7c6af7);
  outline-offset: 2px;
}
.ec-vault-tile-icon { font-size: 30px; line-height: 1.1; margin-bottom: 4px; }
.ec-vault-tile-name {
  width: 100%;
  min-width: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text, #eceafd);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ec-vault-tile-meta,
.ec-vault-tile-date {
  width: 100%;
  font-size: 11px;
  color: var(--text2, rgba(214,210,255,0.6));
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ec-vault-tile-date { font-size: 10px; opacity: .75; }
/* Loeschen: 44x44 Trefferflaeche, optisch aber klein — das Kreuz sitzt in
   der Mitte eines transparenten Quadrats. */
.ec-vault-tile-del {
  position: absolute;
  top: 0; right: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 0;
  color: #ff4757;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  border-radius: 12px;
  opacity: .55;
  transition: opacity .16s ease, background .16s ease;
}
.ec-vault-tile-del:hover { opacity: 1; background: rgba(255,71,87,0.12); }
.ec-vault-tile-del:focus-visible { outline: 2px solid #ff4757; outline-offset: -4px; opacity: 1; }

/* Status-Spinner im Upload-Dialog ("Verschlüsseln…", "Hochladen…"). */
#vault-upload-status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
}
.ec-vault-spinner {
  flex: 0 0 14px;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.18);
  border-top-color: var(--accent, #7c6af7);
  animation: ec-vault-spin .7s linear infinite;
}
@keyframes ec-vault-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ec-vault-spinner { animation-duration: 2.4s; }
}

/* Upload-Button im Vault-Header: war 8px/14px Padding und damit unter der
   44px-Marke, die am Telefon sicher treffbar ist. */
#vault-screen .ec-vault-upload-btn {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
}
#vault-screen .ec-vault-filter-btn { min-height: 40px; }

/* Leere Liste im Mobile-Vault-Panel. */
.ec-mobile-vault-recent-empty {
  padding: 18px 14px;
  border: 1px dashed rgba(255,255,255,0.12);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--text2, rgba(214,210,255,0.6));
  text-align: center;
  line-height: 1.5;
}
/* Dateinamen in den Mobile-Karten beschneiden statt ueberlaufen lassen. */
.ec-mobile-vault-recent-copy { min-width: 0; }
.ec-mobile-vault-recent-copy strong,
.ec-mobile-vault-recent-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ec-mobile-vault-recent-card { min-height: 56px; }