/* 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.
*/
@media (min-width: 769px) {
  #new-chat-menu-modal.modal-overlay {
    align-items: center !important;
    padding: 24px !important;
  }
  #new-chat-menu-modal .modal {
    max-width: 400px !important;
    width: 100% !important;
    border-radius: 22px !important;
    padding: 28px 28px 24px !important;
  }
  #new-chat-menu-modal .modal-handle {
    display: none !important;
  }
  #new-chat-menu-modal .modal-title {
    text-align: center !important;
    font-size: 17px !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.01em !important;
  }
  #new-chat-menu-modal .modal > div[style*="flex-direction:column"] {
    gap: 12px !important;
    align-items: stretch !important;
  }
  #new-chat-menu-modal .modal .btn {
    width: 100% !important;
    min-height: 46px !important;
    padding: 12px 16px !important;
    text-align: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-size: 14px !important;
    font-weight: 700 !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;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-group {
    gap: 4px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-head {
    margin: 2px 4px 4px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-kicker {
    font-size: 9.5px !important;
    letter-spacing: 0.18em !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row {
    padding: 8px 10px !important;
    border-radius: 10px !important;
    border-color: rgba(214, 210, 255, 0.06) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.018), rgba(255, 255, 255, 0.006)),
      rgba(10, 12, 28, 0.42) !important;
    grid-template-columns: 26px minmax(0, 1fr) 14px !important;
    gap: 10px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    background: rgba(138, 91, 255, 0.10) !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-copy strong {
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-copy small {
    font-size: 10px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-meta {
    font-size: 11px !important;
    opacity: 0.5 !important;
  }

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

  /* RIGHT PANEL — slightly tighter rhythm */
  body.auth-ready #ec-claude-shell-final .ecf-rightpanel {
    padding: 12px 10px !important;
    gap: 10px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-group {
    gap: 3px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-head {
    margin: 2px 2px 2px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row {
    padding: 7px 9px !important;
    grid-template-columns: 24px minmax(0, 1fr) 12px !important;
    gap: 8px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-icon {
    width: 24px !important;
    height: 24px !important;
    font-size: 12px !important;
    border-radius: 7px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-copy strong {
    font-size: 12px !important;
  }
  body.auth-ready #ec-claude-shell-final .ecf-rp-row-copy small {
    font-size: 9.5px !important;
  }

  /* 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 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: 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;
  word-break: break-all;
  line-height: 1.1;
}
#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 */
#room-options-modal .ec-gm-modal #room-code-actions,
#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;
}

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