/* mobile-overrides.css
   Additive overrides only. Do not modify style.css directly.
   Load order: after /assets/css/desktop-overrides.css in index.html.
   Scope: logged-in mobile shell only (body.ec-mobile-shell-active #ec-mobile-shell).
*/

/* ── Settings shell height chain fix ─────────────────────────────────────────
   .ec-mobile-settings-shell has no height/overflow rules in style.css.
   Without an explicit height the child .ec-mobile-settings-frame cannot resolve
   height: 100% when .is-subpage is active, so sub-pages never fill the panel
   and the old settings list bleeds through visually.
*/
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-shell {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* ── Settings frame scroll fix ───────────────────────────────────────────────
   .ec-mobile-settings-frame has no base height/scroll rules in style.css.
   Without overflow-y: auto the frame extends to full content height and the
   bottom nav overlaps the last items (Logout etc).
   The existing .is-subpage rule in style.css already overrides to
   overflow: hidden !important when a sub-page is active, so this only
   applies in the normal (list) state.
*/
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-frame {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Settings list bottom nav clearance ──────────────────────────────────────
   The bottom nav is fixed ~60-70px tall. Without bottom padding the last
   settings rows (Abo/Premium, Logout) are hidden behind the nav bar.
*/
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-categories {
  padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}

/* ── Mobile chat panel grid + composer fix ───────────────────────────────────
   style.css lines 17681-17695 define grid-template-rows for the rooms / chats /
   vault / more panels, but the [data-ecm-panel="chat"] panel has NO equivalent
   rule. Without it the panel's grid layout is undefined, the composer is
   pushed below the visible viewport, and the user sees only the header +
   message stream + bottom nav.
   Rule below mirrors the pattern used by the other panels and pins the
   composer at the bottom with explicit safe-area clearance.
*/
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"].ec-mobile-panel.active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-stream,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream {
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-composer {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 72px !important;
  gap: 8px !important;
  align-items: center !important;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  flex: 0 0 auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ── Active mobile chat: full-screen chat view ──────────────────────────────
   When the user opens a chat on the mobile shell, setTab('chat') adds
   body.ec-mobile-chat-open. While that class is present we hide:
     - the global mobile brand header (EliteCrypt logo + "Dein privates Universum.")
     - the global "Sicher" status pill / top status row
     - the bottom main navigation (chats / kontakte / vault / profil)
   Only the chat-specific UI (back button, chat title/sub, info button,
   message stream, composer) remains. Restored automatically on every
   other tab because setTab() removes the class.
*/
body.ec-mobile-shell-active.ec-mobile-chat-open #ec-mobile-shell .ec-mobile-brand,
body.ec-mobile-shell-active.ec-mobile-chat-open #ec-mobile-shell .ecm-brand,
body.ec-mobile-shell-active.ec-mobile-chat-open #ec-mobile-shell .ec-mobile-topbar,
body.ec-mobile-shell-active.ec-mobile-chat-open #ec-mobile-shell .ec-mobile-status,
body.ec-mobile-shell-active.ec-mobile-chat-open #ec-mobile-shell .ec-mobile-bottom-nav,
body.ec-mobile-shell-active.ec-mobile-chat-open #ec-mobile-shell .ecm-bottom-nav {
  display: none !important;
}

/* ── Global bottom-nav kill in active chat ──────────────────────────────────
   Catch-all in case any stray .ec-mobile-bottom-nav lives outside the scoped
   #ec-mobile-shell (e.g. the duplicate <nav class="ec-mobile-bottom-nav"> at
   index.html line 7244 inside the desktop final shell). When the mobile chat
   view is open we always want the bottom main navigation hidden, regardless
   of which ancestor it lives in. Only fires while .ec-mobile-chat-open is on
   body, so the nav reappears the moment the user leaves the chat view. */
body.ec-mobile-chat-open .ec-mobile-bottom-nav,
body.ec-mobile-chat-open .ecm-bottom-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Composer bottom-padding when no bottom-nav is present ──────────────────
   With the nav hidden in active chat, the composer can sit flush against the
   home indicator on iOS. Add explicit safe-area padding so the input is
   always tappable without the OS gesture bar overlapping it. */
body.ec-mobile-chat-open #ec-mobile-shell .ec-mobile-composer,
body.ec-mobile-chat-open #ec-mobile-shell .ecm-composer {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Active chat panel itself uses the full viewport now that the nav is hidden.
   Make sure the composer still respects the iOS home-bar safe area. */
body.ec-mobile-shell-active.ec-mobile-chat-open #ec-mobile-shell [data-ecm-panel="chat"].ec-mobile-panel.active {
  padding-bottom: 0 !important;
}
body.ec-mobile-shell-active.ec-mobile-chat-open #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer,
body.ec-mobile-shell-active.ec-mobile-chat-open #ec-mobile-shell [data-ecm-panel="chat"] .ecm-composer {
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── Mobile Profil — fix menu-in-menu bug (2026-05-13, hardened) ─────────────
   The Profil tab uses .ec-mobile-settings-frame.is-subpage to swap from the
   main list to a single subpage. JS sets `hidden` on the main rows, but the
   embedded <style> block near the bottom of index.html re-applies
   `display: grid !important` to those same rows using selectors of the form
     body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"]
     [data-ecm-panel="more"] .ec-mobile-profile-card
   That selector has specificity 0,1,4,1 — equal to a normal mobile-overrides
   override — and loads later (inline style follows external CSS in document
   order), so it wins. Result: the old main list stays visible behind the
   subpage = "menu in menu".

   Fix: bump our hiding rule's specificity by including the same
   [data-ecm-view="more"] + [data-ecm-panel="more"] attribute selectors AND
   the .is-subpage class chain, so it reads at 0,1,6,1 and beats the
   embedded styles unconditionally — regardless of source order. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame.is-subpage > .ec-mobile-settings-head,
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame.is-subpage > .ec-mobile-profile-card,
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame.is-subpage > .ec-mobile-settings-eyebrow,
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame.is-subpage > .ec-mobile-settings-categories,
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame.is-subpage > .ec-mobile-settings-logout {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  left: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* Subpage container: own the visible area when active. Higher specificity
   to beat any later !important grid rule. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame.is-subpage > .ec-mobile-settings-subpage {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 12px !important;
  visibility: visible !important;
  pointer-events: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Hide the subpage container when not in is-subpage state so it never leaks
   on top of the main list during fast taps or animations. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame:not(.is-subpage) > .ec-mobile-settings-subpage {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Subpage content scroll area: bottom padding so logout bar / iOS home
   indicator don't cover the last row. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame.is-subpage .ec-mobile-profile-sub-content {
  padding: 4px 2px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
}

/* Back button stays a clean, full-tap-area control. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-subhead .ec-mobile-back {
  width: 40px !important;
  height: 40px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  border: 1px solid rgba(74, 93, 184, 0.22) !important;
  background: rgba(15, 23, 48, 0.65) !important;
  color: #f4f8ff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

/* Subhead title + back button align on one row. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-subhead {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 4px 4px 0 !important;
  margin-bottom: 4px !important;
}

/* Subhead h1 / p compact in the subpage. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-subhead h1 {
  margin: 0 !important;
  font-size: 20px !important;
  line-height: 1.05 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  color: #f4f8ff !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-subhead p {
  margin: 4px 0 0 !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  color: rgba(190, 198, 230, 0.7) !important;
}

/* ── Mobile privacy/lock overlay refresh ─────────────────────────────────────
   The privacy overlay (#ec-privacy-overlay) reuses one desktop reference PNG
   on every breakpoint. On phones the desktop two-column layout looks cramped
   and the artwork overflows. Mobile-only:
   - swap the rendered image via CSS content: url() to the dedicated mobile
     asset (no JS/HTML change required, desktop stays on the original src)
   - clamp to a phone-friendly width (420px), keep aspect ratio, contain
   - center vertically/horizontally over the existing dark EliteCrypt background
   - lock horizontal overflow on the body while overlay is active
   Scope: max-width 768px only. Desktop styles in style.css remain authoritative.
*/
@media (max-width: 768px) {
  #ec-privacy-overlay.ec-privacy-overlay {
    padding:
      max(16px, env(safe-area-inset-top, 0px))
      16px
      max(20px, env(safe-area-inset-bottom, 0px)) !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  #ec-privacy-overlay.ec-privacy-overlay .ec-privacy-image-shell {
    width: 100% !important;
    max-width: 420px !important;
    max-height: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  #ec-privacy-overlay.ec-privacy-overlay .ec-privacy-reference-image {
    content: url('/assets/img/elitecrypt-mobile-privacy-protection.png') !important;
    display: block !important;
    width: 100% !important;
    max-width: 420px !important;
    height: auto !important;
    max-height: calc(100dvh - 48px) !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 36px rgba(28, 207, 255, 0.10) !important;
  }

  body.ec-blur-active {
    overflow: hidden !important;
  }
}

/* ── STEP 2 — Mobile Bottom Nav visual polish ────────────────────────────────
   Blueprint reference:
     design-import/handoff/elitecrypt-desktop-design/project/EliteCrypt Mobile
     System.html — Phones 02..06 (`.tabbar` + active tab pattern).
   Scope: ONLY #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav.
   Goal: keep the existing glass-pill silhouette already defined in the inline
   <style> block (index.html ≈ line 39177) but
     1. give the bar safe-area bottom inset so it clears the iOS home indicator
     2. drop the `transform: scale(0.975)` on the active tab — it produces a
        sub-pixel shimmer when switching panels
     3. replace the jittery scale with a clean static pill highlight
     4. suppress visible desktop scrollbars inside the mobile shell panels
     5. give chat / contact lists bottom padding so the last row is not
        covered by the bar (vault + more already handle this elsewhere)
   No HTML changes, no logic changes, no label/icon changes,
   data-ecm-tab / data-ecm-panel untouched. */

/* Higher specificity than the inline rules (0,3,1,0 vs inline 0,2,1,0):
   the extra `.ecm-bottom-nav` class chained onto `.ec-mobile-bottom-nav`
   bumps specificity without touching the markup. */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav {
  padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)) !important;
  overflow: hidden !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav button {
  transform: none !important;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease, border-color 160ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav button:focus-visible {
  outline: 2px solid rgba(124, 92, 255, 0.55) !important;
  outline-offset: 2px !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav button.active {
  transform: none !important;
}

/* Suppress visible scrollbars inside the mobile shell (panels can still scroll
   via touch / wheel — we only hide the chrome). Does not affect desktop. */
body.ec-mobile-shell-active #ec-mobile-shell,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-content,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-panel,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chat-list,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contact-list,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chat-stream,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-frame,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-profile-sub-content {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
body.ec-mobile-shell-active #ec-mobile-shell::-webkit-scrollbar,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-content::-webkit-scrollbar,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-panel::-webkit-scrollbar,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chat-list::-webkit-scrollbar,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contact-list::-webkit-scrollbar,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chat-stream::-webkit-scrollbar,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-frame::-webkit-scrollbar,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-profile-sub-content::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

/* Lock horizontal overflow inside the mobile shell so a stray wide child
   cannot reveal a side scrollbar. Composer/lists already use min-width:0. */
body.ec-mobile-shell-active #ec-mobile-shell,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-content,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-panel {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* Bottom padding for Chats list + Kontakte list — superseded.
   The 84px catch-all that used to live here is fully overridden by the
   per-panel rules added in Step 3 (chats: .ec-mobile-chat-list.ecm-room-list,
   14px + safe-area) and Step 4 (rooms: .ec-mobile-contact-list.ec-mobile-
   room-list, 14px + safe-area). The floating nav sits OUTSIDE
   .ec-mobile-content, so the panel's bottom edge already clears it — only a
   small breathing inset inside the rounded list card is needed.
   Kept as a comment for traceability; removing the rule has no runtime effect. */

/* ── STEP 3 — Mobile Chats panel visual polish ───────────────────────────────
   Blueprint reference:
     design-import/handoff/elitecrypt-desktop-design/project/EliteCrypt Mobile
     System.html — Phone 02 "Chat-Liste" (`.tabbar`, `.chat-row`, `.composer
     .field`, filter `.seg` row).
   Scope: ONLY section[data-ecm-panel="chats"] inside #ec-mobile-shell.
   Goal: keep the existing markup + dynamic chat rendering untouched,
   visually align with the blueprint and undo the Step 2 over-padding inside
   the chat-list card.
     1. recalibrate chat-list bottom padding (Step 2 used 84px which created
        a large empty area inside the rounded card — the nav already sits
        outside .ec-mobile-content, so a smaller breathing inset is enough)
     2. shift the unread-count badge from flat blue to the brand violet→cyan
        gradient used elsewhere in EliteCrypt
     3. give the active chat row a clearer left-accent stripe instead of the
        very faint gradient overlay it has today
     4. add a tap/press feedback state for chat rows (compatible with the
        existing :focus-visible reset)
     5. give the filter chip row a horizontal-scroll fallback so longer
        labels never wrap or get clipped on narrow phones
     6. tighten the chats-head topbar so the inline rounded header sits flush
        without a duplicate top inset.
   NO HTML changes, NO data-* changes, NO functions/handlers/IDs touched. */

/* 1. Recalibrate inside-card bottom padding.
   Higher specificity than Step 2's rule above by chaining the chat-list class
   inside [data-ecm-panel="chats"]; same selector chain but appended later so
   source order wins for equal specificity. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-list.ecm-room-list {
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}

/* 2. Unread badge — brand gradient.
   Inline rule at index.html ~line 39047 is specificity 0,3,1,0.
   We chain through .ec-mobile-chat-list .ecm-chat-row to reach 0,5,1,0. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-list .ecm-chat-row .ecm-chat-meta em {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 45%, #22d3ee 100%) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  box-shadow:
    0 10px 22px rgba(99, 102, 241, 0.32),
    0 0 14px rgba(34, 211, 238, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* 3. Active row — clean left-accent stripe + slightly stronger background.
   Inline rule at ~line 38937 is specificity 0,3,1,0.
   We chain through .ec-mobile-chat-list to reach 0,4,1,0. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-list .ecm-chat-row.active {
  position: relative !important;
  background:
    linear-gradient(
      90deg,
      rgba(124, 92, 255, 0.18),
      rgba(34, 211, 238, 0.06) 55%,
      rgba(10, 18, 36, 0) 100%
    ) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-list .ecm-chat-row.active::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 8px !important;
  bottom: 8px !important;
  width: 3px !important;
  border-radius: 0 3px 3px 0 !important;
  background: linear-gradient(180deg, #a78bfa, #22d3ee) !important;
  box-shadow: 0 0 12px rgba(124, 92, 255, 0.6) !important;
  pointer-events: none !important;
}

/* 4. Tap/press feedback for chat rows (no JS, pure :active state). */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-list .ecm-chat-row {
  transition: background-color 140ms ease, transform 140ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-list .ecm-chat-row:active {
  background: rgba(124, 92, 255, 0.10) !important;
}

/* 5. Filter chips — horizontal scroll fallback on narrow phones.
   The inline rule (~line 38853) forces grid-template-columns: repeat(4, ...)
   which can squeeze long German labels. On widths < 360px we switch to a
   horizontal flex scroll-snap row so labels stay legible and the row never
   overflows the panel width. */
@media (max-width: 360px) {
  /* `[aria-label="Chat Filter"]` matches the existing markup at index.html
     line 7374 and bumps specificity to 0,4,1,0 so this override beats the
     inline grid rule (0,3,1,0) regardless of source order. */
  body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-filters[aria-label="Chat Filter"] {
    grid-template-columns: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-filters[aria-label="Chat Filter"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-filters[aria-label="Chat Filter"] button {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    padding: 0 14px !important;
  }
}

/* 6. Topbar trimming in chats view — match Kontakte (where topbar is hidden).
   The chats panel renders its own rich .ec-mobile-chats-head, so the global
   .ec-mobile-topbar above it just adds vertical noise on narrow phones. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="chats"] .ec-mobile-topbar {
  padding-top: max(8px, env(safe-area-inset-top, 0px)) !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="chats"] .ec-mobile-app {
  gap: 8px !important;
}

/* 7. Empty state CTA — readable, blueprint-aligned button gradient. */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chats-empty.ecm-empty .ec-mobile-empty-actions .ecm-primary {
  border-radius: 14px !important;
  border: 1px solid rgba(124, 92, 255, 0.45) !important;
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  box-shadow:
    0 14px 30px rgba(124, 92, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chats-empty.ecm-empty .ec-mobile-empty-actions .ecm-secondary {
  border-radius: 14px !important;
  border: 1px solid rgba(146, 164, 214, 0.22) !important;
  background: rgba(13, 20, 40, 0.7) !important;
  color: rgba(231, 235, 255, 0.88) !important;
  font-weight: 600 !important;
}

/* ── STEP 4 — Mobile Kontakte panel visual polish ────────────────────────────
   Blueprint reference:
     design-import/handoff/elitecrypt-desktop-design/project/EliteCrypt Mobile
     System.html — Phone 02 / Sektion 03 (list rows `.row`, search `.field`,
     filter chips, trust accents).
   Scope: ONLY section[data-ecm-panel="rooms"] inside #ec-mobile-shell.
   The internal panel attribute remains "rooms" by design (legacy hook for
   the existing setTab/data-ecm-panel logic); the VISIBLE label is and stays
   "Kontakte" — no markup changes here.
     1. recalibrate contact-list inner bottom padding (Step 2 added 84px but
        the inline rule with equal specificity loaded later wins; we add the
        second list class to reach a higher specificity that actually applies)
     2. polish the empty-state CTA for the contacts list (Step 3 only covered
        the chats empty state; contacts has its own `.ec-mobile-contacts-empty`
        container with a `.ecm-primary` add-contact button)
     3. press feedback for contact rows
     4. filter chips horizontal-scroll fallback for narrow phones (the inline
        grid forces 4 columns; long labels can squeeze on < 360px widths)
     5. subtle pulse on the Online-filter dot (and stronger glow when the
        Online filter is the active chip) so the live-presence affordance
        reads at a glance
     6. trust badge soft halo so the verification chip on the contact row
        does not blend into the surrounding card background.
   NO HTML changes, NO data-* changes, NO functions/handlers/IDs touched. */

/* 1. Recalibrate inside-card bottom padding for the contacts list.
   Inline rule at index.html ~line 38489 has specificity 0,3,1,0; chaining
   the second class `.ec-mobile-room-list` bumps us to 0,4,1,0 so this wins
   regardless of source order. The Step 2 catch-all (`.ec-mobile-contact-list`)
   was masked by the inline rule loaded later — that catch-all stays as a
   safety net for any future layout where the inline rule no longer applies. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-list.ec-mobile-room-list {
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
}

/* 2. Empty-state CTA — brand gradient, matches the chats empty-state polish
   from Step 3 so the visual language is consistent across panels. */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contacts-empty.ecm-empty .ec-mobile-empty-actions .ecm-primary {
  border-radius: 14px !important;
  border: 1px solid rgba(124, 92, 255, 0.45) !important;
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  box-shadow:
    0 14px 30px rgba(124, 92, 255, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contacts-empty.ecm-empty .ec-mobile-empty-actions .ecm-secondary {
  border-radius: 14px !important;
  border: 1px solid rgba(146, 164, 214, 0.22) !important;
  background: rgba(13, 20, 40, 0.7) !important;
  color: rgba(231, 235, 255, 0.88) !important;
  font-weight: 600 !important;
}

/* 3. Press feedback for contact rows.
   The inline rule at ~line 38507 has specificity 0,3,1,0; chaining through
   `.ec-mobile-contact-list` bumps us to 0,4,1,0 so the transition + :active
   states attach cleanly. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-list .ecm-contact-row {
  transition: background-color 140ms ease, transform 140ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-list .ecm-contact-row:active {
  background: rgba(124, 92, 255, 0.10) !important;
}

/* 4. Filter chips horizontal-scroll fallback on narrow phones.
   The inline rule at ~line 38444 forces a 4-column grid; on < 360px widths
   labels "Favoriten" / "Gesperrt" can wrap. `[aria-label="Kontaktfilter"]`
   matches the markup at index.html line 7472 and bumps specificity to
   0,4,1,0. */
@media (max-width: 360px) {
  body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-filters[aria-label="Kontaktfilter"] {
    grid-template-columns: none !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-filters[aria-label="Kontaktfilter"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-filters[aria-label="Kontaktfilter"] button {
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
    padding: 0 14px !important;
  }
}

/* 5. Online filter dot — soft pulse always, stronger glow when the Online
   chip is the active filter. */
@keyframes ec-mobile-contact-online-pulse {
  0%, 100% {
    box-shadow:
      0 0 10px rgba(34, 239, 152, 0.38),
      0 0 0 0 rgba(34, 239, 152, 0.42);
  }
  60% {
    box-shadow:
      0 0 12px rgba(34, 239, 152, 0.5),
      0 0 0 5px rgba(34, 239, 152, 0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-filters .ec-mobile-contact-pill-dot {
    animation: ec-mobile-contact-online-pulse 2.4s ease-in-out infinite !important;
  }
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-filters button.active .ec-mobile-contact-pill-dot {
  background: #34f1a3 !important;
  box-shadow: 0 0 14px rgba(52, 241, 163, 0.55) !important;
}

/* 6. Trust badge — soft halo so the verification chip on the contact row
   stays legible across all trust tones. Each tone keeps its own foreground
   color (declared inline above); we add a tone-agnostic background ring. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-list .ecm-contact-trust-badge {
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 10px rgba(124, 92, 255, 0.12) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-list .ecm-contact-trust-badge.trust-cyan {
  box-shadow:
    inset 0 0 0 1px rgba(34, 211, 238, 0.18),
    0 0 12px rgba(34, 211, 238, 0.18) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-list .ecm-contact-trust-badge.trust-green {
  box-shadow:
    inset 0 0 0 1px rgba(101, 234, 141, 0.2),
    0 0 12px rgba(101, 234, 141, 0.16) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-list .ecm-contact-trust-badge.trust-amber {
  box-shadow:
    inset 0 0 0 1px rgba(255, 190, 83, 0.22),
    0 0 12px rgba(255, 190, 83, 0.16) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-list .ecm-contact-trust-badge.trust-magenta {
  box-shadow:
    inset 0 0 0 1px rgba(234, 114, 255, 0.22),
    0 0 12px rgba(234, 114, 255, 0.18) !important;
}

/* ── STEP 5 — Mobile Profil / Settings panel visual polish ───────────────────
   Blueprint reference:
     design-import/handoff/elitecrypt-desktop-design/project/EliteCrypt Mobile
     System.html — Phone 06 "Einstellungen", Phone 08 "Identität",
     Phone 17 "Datenschutz", Phone 19 "Sicherheit", Phone 22 "Aura KI-Support",
     Phone 23 "Abos & Preise".
   Scope: ONLY section[data-ecm-panel="more"] inside #ec-mobile-shell.
   This panel already has very extensive inline styling (settings-frame /
   profile-card / categories / per-kind icon tints / subpage / logout).
   Earlier in this file we also fixed the menu-in-menu bug and the subhead
   back button. Step 5 adds the missing tactile + accent layer:
     1. press feedback for the settings rows (parallel to chat/contact rows)
     2. press feedback for the logout row with rose accent
     3. premium row — gold accent so the upgrade affordance stands out
        without breaking the per-kind icon-color system already in place
     4. press feedback for the sub-page rows (sessions / privacy detail rows)
     5. consistent transition on sub-card hovers
     6. ensure no horizontal overflow inside the subpage scroller.
   NO HTML changes, NO data-* changes, NO functions/handlers/IDs touched.
   No fake security states, no new account-delete logic, no support→abuse
   re-routing — purely visual. */

/* 1. Press feedback on category rows.
   Inline rule chain has specificity ≈ 0,1,5,1; we use
   `.ec-mobile-setting-row.ecm-setting-row` (two classes) to reach 0,1,6,1
   AND add `:active` which adds another pseudo for the pressed state. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row.ecm-setting-row {
  transition: background 160ms ease, border-color 160ms ease, transform 140ms ease, box-shadow 160ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row.ecm-setting-row:active {
  border-color: rgba(124, 92, 255, 0.35) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 92, 255, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(20, 28, 60, 0.98), rgba(11, 18, 40, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 30px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(124, 92, 255, 0.14) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row.ecm-setting-row:focus-visible {
  outline: 2px solid rgba(124, 92, 255, 0.45) !important;
  outline-offset: 2px !important;
}

/* 2. Logout row — transition + rose accent on press.
   Inline at ~line 40043 is 0,1,5,0; my selector chains `[data-ecm-action]`
   to reach 0,1,6,0 (and `:active` for the pressed pseudo). */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout[data-ecm-action="logout"] {
  transition: background 160ms ease, border-color 160ms ease, transform 140ms ease, box-shadow 160ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout[data-ecm-action="logout"]:active {
  border-color: rgba(244, 63, 94, 0.4) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 95, 144, 0.22), transparent 30%),
    radial-gradient(circle at 100% 100%, rgba(124, 84, 255, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(38, 18, 42, 0.98), rgba(22, 11, 33, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 32px rgba(0, 0, 0, 0.3),
    0 0 22px rgba(244, 63, 94, 0.18) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout[data-ecm-action="logout"]:focus-visible {
  outline: 2px solid rgba(244, 63, 94, 0.45) !important;
  outline-offset: 2px !important;
}

/* 3. Premium row — gold/amber accent so the upgrade row visually separates
   from the regular settings rows. The inline rule at ~line 40038 sets a
   generic blue/purple gradient for [data-settings-kind="premium"]; we chain
   `[data-ecm-safe="premium"]` (both attributes are on the same row at
   index.html line 7537) to reach 0,1,7,1 — beats inline 0,1,6,1. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="premium"][data-ecm-safe="premium"] {
  border-color: rgba(255, 198, 92, 0.28) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 200, 90, 0.10), transparent 36%),
    radial-gradient(circle at 100% 100%, rgba(124, 92, 255, 0.10), transparent 38%),
    linear-gradient(180deg, rgba(28, 22, 38, 0.98), rgba(15, 12, 26, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 14px 28px rgba(0, 0, 0, 0.24),
    0 0 18px rgba(255, 198, 92, 0.10) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] [data-settings-kind="premium"][data-ecm-safe="premium"] .ec-mobile-setting-icon {
  color: #ffdf90 !important;
  background: linear-gradient(135deg, rgba(154, 96, 28, 0.7), rgba(96, 50, 16, 0.9)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 222, 144, 0.18),
    0 12px 22px rgba(94, 60, 18, 0.32) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] [data-settings-kind="premium"][data-ecm-safe="premium"] .ec-mobile-setting-title {
  color: #ffe9b0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] [data-settings-kind="premium"][data-ecm-safe="premium"] .ec-mobile-setting-chevron {
  color: #ffd066 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="premium"][data-ecm-safe="premium"]:active {
  border-color: rgba(255, 198, 92, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 30px rgba(0, 0, 0, 0.28),
    0 0 22px rgba(255, 198, 92, 0.18) !important;
}

/* 4. Press feedback on subpage rows (sessions list, blocked users, devices,
   privacy entries — anything rendered into .ec-mobile-profile-sub-content
   via .ec-mobile-sub-row). */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-row {
  transition: background 160ms ease, border-color 160ms ease, transform 140ms ease, box-shadow 160ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-row:active {
  border-color: rgba(124, 92, 255, 0.35) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 92, 255, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(20, 28, 60, 0.98), rgba(11, 18, 40, 0.99)) !important;
}

/* 5. Sub-card hover/press — consistent transition. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-card {
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
}

/* 6. Belt-and-braces: lock horizontal overflow inside the settings shell.
   The settings-shell is the scroll container; extra long German labels in a
   subpage shouldn't be able to widen it beyond the panel. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-shell {
  overflow-x: hidden !important;
  max-width: 100% !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* ── STEP 6 — Mobile Vault panel visual wrapper polish ───────────────────────
   Blueprint reference:
     design-import/handoff/elitecrypt-desktop-design/project/EliteCrypt Mobile
     System.html — Phone 05 "Vault" (secure storage cards + lock accents).
   Scope: ONLY section[data-ecm-panel="vault"] inside #ec-mobile-shell.
   This is the wrapper-only polish — the actual Vault (files / passwords /
   notes / upload / encryption logic at #vault-screen and the vault modals)
   is the LAST migration phase per project rules and is NOT touched here.
     1. press feedback for category rows (parallel to Profil settings rows)
     2. press feedback for the vault "+" add-button so the entry CTA reads
        as tactile, not static
     3. subtle pulse on the GESCHÜTZT summary badge to make the protected
        state legible without inventing new security claims
        (gated by prefers-reduced-motion)
     4. visible focus ring on the search input — no inline rule covers it,
        which makes the field look unresponsive on keyboard focus
     5. belt-and-braces horizontal overflow lock for the vault-shell.
   NO HTML changes, NO data-* changes, NO functions/handlers/IDs touched.
   No new Vault features, no fake encryption indicators beyond what already
   exists in the inline UI. */

/* 1. Press feedback on category rows.
   Inline base (39499) is specificity 0,1,5,1; chaining
   `.ec-mobile-setting-row.ecm-setting-row` (2 classes) reaches 0,1,6,1 for
   the base and `:active` adds another pseudo for the press state. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="vault"] [data-ecm-panel="vault"] .ec-mobile-vault-categories .ec-mobile-setting-row.ecm-setting-row {
  transition: background 160ms ease, border-color 160ms ease, transform 140ms ease, box-shadow 160ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="vault"] [data-ecm-panel="vault"] .ec-mobile-vault-categories .ec-mobile-setting-row.ecm-setting-row:active {
  border-color: rgba(124, 92, 255, 0.35) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 92, 255, 0.14), transparent 36%),
    linear-gradient(180deg, rgba(22, 30, 64, 0.98), rgba(11, 18, 40, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 18px 30px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(124, 92, 255, 0.14) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="vault"] [data-ecm-panel="vault"] .ec-mobile-vault-categories .ec-mobile-setting-row.ecm-setting-row:focus-visible {
  outline: 2px solid rgba(124, 92, 255, 0.45) !important;
  outline-offset: 2px !important;
}

/* 2. Vault add-button press + focus.
   Inline base (39363) is 0,1,5,1; chaining `[data-ecm-action="vault"]`
   (markup at index.html line 7496) reaches 0,1,6,1. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="vault"] [data-ecm-panel="vault"] .ec-mobile-vault-add[data-ecm-action="vault"] {
  transition: background 160ms ease, border-color 160ms ease, transform 140ms ease, box-shadow 160ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="vault"] [data-ecm-panel="vault"] .ec-mobile-vault-add[data-ecm-action="vault"]:active {
  border-color: rgba(124, 184, 255, 0.42) !important;
  background:
    radial-gradient(circle at 30% 22%, rgba(83, 235, 255, 0.24), transparent 32%),
    linear-gradient(135deg, rgba(24, 60, 122, 0.98), rgba(85, 33, 138, 0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 18px 30px rgba(31, 21, 92, 0.32),
    0 0 22px rgba(83, 235, 255, 0.18) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="vault"] [data-ecm-panel="vault"] .ec-mobile-vault-add[data-ecm-action="vault"]:focus-visible {
  outline: 2px solid rgba(124, 184, 255, 0.55) !important;
  outline-offset: 2px !important;
}

/* 3. Subtle pulse on the GESCHÜTZT summary badge — visual reinforcement of
   the existing protected state, gated by reduced-motion. No new claim, no
   text change. Inline rule (39469) is 0,1,5,1; chain through
   `.ec-mobile-vault-summary.ec-mobile-card` reaches 0,1,7,1. */
@keyframes ec-mobile-vault-badge-pulse {
  0%, 100% {
    box-shadow:
      inset 0 0 0 0 rgba(85, 241, 184, 0),
      0 0 0 0 rgba(85, 241, 184, 0.36);
  }
  60% {
    box-shadow:
      inset 0 0 0 0 rgba(85, 241, 184, 0),
      0 0 0 6px rgba(85, 241, 184, 0);
  }
}
@media (prefers-reduced-motion: no-preference) {
  body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="vault"] [data-ecm-panel="vault"] .ec-mobile-vault-summary.ec-mobile-card .ec-mobile-vault-summary-badge {
    animation: ec-mobile-vault-badge-pulse 2.6s ease-in-out infinite !important;
  }
}

/* 4. Visible focus ring on the search input. The inline rule sets a
   placeholder color and font size but no :focus state. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="vault"] [data-ecm-panel="vault"] .ec-mobile-vault-search:focus-within {
  border-color: rgba(85, 214, 255, 0.42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(85, 214, 255, 0.18),
    0 0 18px rgba(85, 214, 255, 0.14) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="vault"] [data-ecm-panel="vault"] .ec-mobile-vault-search input:focus {
  outline: none !important;
}

/* 5. Belt-and-braces: lock horizontal overflow inside the vault shell.
   The inline rule already declares overflow-x: hidden on .ec-mobile-vault-
   shell, but a stray future child could still widen the panel. */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="vault"] [data-ecm-panel="vault"] .ec-mobile-vault-shell,
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="vault"] [data-ecm-panel="vault"] .ec-mobile-vault-frame {
  max-width: 100% !important;
}

/* ── STEP 20 — Vault-Shell 2V layout + Profil-Shell 2V layout ───────────────
   Blueprint reference: EliteCrypt Mobile 2V design system.
   Vault: ecm-vault-hero (3-col summary), ec-mobile-vault-usage (decorative bar),
          ecm-vault-grid (2-col categories ≥360px), ecm-vault-footnote-2v.
   Profil: ecm-profile-head (renamed header), ecm-profile-card-2v (3-col card),
           data-ecm-profile-subpage-trigger (tap affordance on all rows).
   Purely additive — no existing rules modified. No live JS data/states.
   No server.js / crypto backend touched. */

/* ── Vault: summary card hero layout (3-column: icon orb / copy / badge) ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-summary.ecm-vault-hero {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-summary.ecm-vault-hero .ec-mobile-vault-summary-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, rgba(85, 214, 255, 0.18), rgba(124, 92, 255, 0.22)) !important;
  border: 1px solid rgba(85, 214, 255, 0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 10px 24px rgba(85, 214, 255, 0.14) !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-summary.ecm-vault-hero > div {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-summary.ecm-vault-hero > div strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-summary.ecm-vault-hero .ec-mobile-vault-summary-badge {
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* ── Vault: decorative usage bar ─────────────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-usage {
  height: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg,
    rgba(85, 214, 255, 0.55) 0%,
    rgba(124, 92, 255, 0.45) 60%,
    rgba(255, 255, 255, 0.06) 100%) !important;
  margin: 2px 0 10px !important;
  overflow: hidden !important;
  position: relative !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-usage::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0.18) 0%,
    transparent 50%) !important;
  border-radius: inherit !important;
}

/* ── Vault: categories 2-column grid on phones ≥ 360px ───────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-categories.ecm-vault-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;
}

@media (min-width: 360px) {
  body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-categories.ecm-vault-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Vault: footnote card 2V accent ─────────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-footnote.ecm-vault-footnote-2v {
  border-color: rgba(85, 214, 255, 0.18) !important;
  background:
    radial-gradient(circle at 0% 50%, rgba(85, 214, 255, 0.08), transparent 40%),
    linear-gradient(180deg, rgba(10, 18, 38, 0.96), rgba(6, 12, 28, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 24px rgba(85, 214, 255, 0.08) !important;
}

/* ── Profil: header 2V (ecm-profile-head) ────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-head.ecm-profile-head {
  padding: 14px 16px 10px !important;
  border-bottom: 1px solid rgba(124, 92, 255, 0.12) !important;
  margin-bottom: 4px !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-head.ecm-profile-head .ec-mobile-app-top-title {
  font-size: 22px !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(135deg, #f4f8ff 30%, rgba(124, 92, 255, 0.9) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-head.ecm-profile-head .ec-mobile-app-top-title-icon {
  -webkit-text-fill-color: initial !important;
  color: rgba(124, 92, 255, 0.9) !important;
}

/* ── Profil: profile card 2V (3-column: avatar orb / identity copy / badge) */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-profile-card.ecm-profile-card-2v {
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 16px !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-profile-card.ecm-profile-card-2v > span:first-child {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  display: inline-grid !important;
  place-items: center !important;
  border-radius: 16px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.28), rgba(85, 214, 255, 0.22)) !important;
  border: 1px solid rgba(124, 92, 255, 0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 10px 24px rgba(124, 92, 255, 0.18) !important;
  color: #e8f0ff !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-profile-card.ecm-profile-card-2v > div {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-profile-card.ecm-profile-card-2v > div strong {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-profile-card.ecm-profile-card-2v > div small {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-profile-card.ecm-profile-card-2v > b {
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* ── Profil: subpage-trigger tap affordance on all settings rows ─────────── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories [data-ecm-profile-subpage-trigger] {
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories [data-ecm-profile-subpage-trigger]:active {
  border-color: rgba(124, 92, 255, 0.38) !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(124, 92, 255, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(20, 28, 60, 0.98), rgba(11, 18, 40, 0.99)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 18px rgba(124, 92, 255, 0.16) !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories [data-ecm-profile-subpage-trigger]:focus-visible {
  outline: 2px solid rgba(124, 92, 255, 0.5) !important;
  outline-offset: 2px !important;
}

/* ── STEP 8 — Mobile active chat detail visual polish ────────────────────────
   Blueprint reference:
     design-import/handoff/elitecrypt-desktop-design/project/EliteCrypt Mobile
     System.html — Phone 03 "Chat geöffnet" (`.app-top` header row, `.bub.in`
     / `.bub.out` message bubbles, `.composer .field` input bar, time stamps,
     mono E2EE tagline).
   Scope: ONLY section[data-ecm-panel="chat"].ecm-chat-panel inside
   #ec-mobile-shell.
   The active-chat baseline already exists earlier in this file:
     • grid-template-rows: auto / 1fr / auto (header / stream / composer)
     • composer visibility + grid + safe-area-bottom
     • body.ec-mobile-chat-open hides topbar / brand / status / bottom-nav
   And in style.css:
     • .ecm-msg base + .ecm-msg.mine gradient + .ecm-msg p typography
     • .ec-mobile-composer grid 42px / 1fr / 70px + .primary send gradient
   Step 8 adds the missing finishing layer:
     1. chat header — proper glass panel with back / meta / info grid +
        press feedback on the back and info buttons
     2. message stream — subtle backdrop, top/bottom breathing room, hidden
        scrollbar, smooth scrolling
     3. message bubbles — press feedback + media-bubble overflow safety so
        images / audio / files always stay inside the rounded bubble
     4. composer — glass top accent, focus-within ring on the input, press
        feedback on the attach / send buttons
     5. empty stream state — light polish on the placeholder while no chat
        is selected.
   NO HTML changes, NO data-* changes. Message rendering JS, send logic,
   media rendering, openRoom / startChatWith / send handlers all untouched. */

/* 1. Chat header — premium glass panel.
   Inline `.ec-mobile-chat-head` rule at index.html ~line 38026 is 0,2,1,0;
   chaining `[data-ecm-panel="chat"]` reaches 0,3,1,0. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head.ecm-chat-head {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 42px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(93, 226, 255, 0.16) !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 18% 0%, rgba(38, 212, 255, 0.10), transparent 40%),
    radial-gradient(circle at 82% 100%, rgba(119, 74, 255, 0.14), transparent 44%),
    linear-gradient(180deg, rgba(10, 16, 34, 0.96), rgba(5, 9, 22, 0.94)) !important;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-meta {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  text-align: left !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-meta strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-weight: 800 !important;
  letter-spacing: -0.015em !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-meta small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(173, 185, 217, 0.86) !important;
}

/* Back + info icon buttons in the header — circular glass, tappable, with
   :active + :focus-visible states. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head .ec-mobile-back.ecm-back,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head .ec-mobile-icon-btn.ecm-icon-btn {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  display: inline-grid !important;
  place-items: center !important;
  padding: 0 !important;
  border: 1px solid rgba(108, 223, 255, 0.18) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(43, 219, 255, 0.14), transparent 58%),
    linear-gradient(180deg, rgba(12, 20, 40, 0.94), rgba(8, 12, 28, 0.94)) !important;
  color: #70ebff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 12px 24px rgba(0, 0, 0, 0.22) !important;
  transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head .ec-mobile-back.ecm-back:active,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head .ec-mobile-icon-btn.ecm-icon-btn:active {
  border-color: rgba(70, 222, 255, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(76, 225, 255, 0.16),
    0 16px 28px rgba(0, 0, 0, 0.28),
    0 0 18px rgba(32, 214, 255, 0.16) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head .ec-mobile-back.ecm-back:focus-visible,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head .ec-mobile-icon-btn.ecm-icon-btn:focus-visible {
  outline: 2px solid rgba(76, 225, 255, 0.5) !important;
  outline-offset: 2px !important;
}
/* Disabled info button (when no chat is selected) — muted, no glow. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head .ec-mobile-icon-btn.ecm-icon-btn[disabled] {
  opacity: 0.45 !important;
  pointer-events: none !important;
}

/* 2. Message stream — subtle backdrop + breathing room + smooth scroll.
   Earlier rules in this file already pin overflow-y:auto and -webkit-
   overflow-scrolling. Inline rules in style.css set base flex behavior. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-stream.ecm-chat-stream {
  padding: 12px 12px 16px !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 92, 255, 0.06), transparent 38%),
    linear-gradient(180deg, rgba(6, 10, 22, 0.6), rgba(3, 6, 14, 0.78)) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-stream.ecm-chat-stream::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 3. Message bubbles — press feedback + media overflow safety.
   Base `.ecm-msg` styling lives in style.css; we add a transition for press
   feedback and clip any media child (img/audio/video) inside the rounded
   bubble so it never spills horizontally. Specificity 0,3,1,0 beats the
   style.css 0,2,1,0 base. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg {
  transition: transform 140ms ease, box-shadow 140ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
  max-width: min(82%, 360px) !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg:active {
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
/* Media bubbles — clip overflow inside the rounded bubble. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg img,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg video {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  display: block !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg audio {
  max-width: 100% !important;
  width: 100% !important;
  display: block !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-file-download {
  width: 100% !important;
  min-width: 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  align-items: center !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.045) !important;
  color: #e7ebff !important;
  padding: 10px !important;
  text-align: left !important;
  touch-action: manipulation !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-file-download span {
  grid-row: 1 / span 2 !important;
  font-size: 24px !important;
  line-height: 1 !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-file-download strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-file-download small {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: rgba(231,235,255,0.56) !important;
  font-size: 11px !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ec-chat-link {
  color: #67e8f9 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ec-chat-text {
  min-width: 0 !important;
  line-height: 1.45 !important;
  overflow-wrap: anywhere !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ec-link-preview {
  display: grid !important;
  grid-template-columns: 72px minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 9px !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.045) !important;
  color: #e7ebff !important;
  text-decoration: none !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ec-yt-preview {
  grid-template-columns: minmax(0, 108px) minmax(0, 1fr) !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ec-link-preview-thumb {
  position: relative !important;
  min-height: 64px !important;
  background: linear-gradient(135deg, rgba(124,92,255,0.22), rgba(34,211,238,0.12)) !important;
  display: grid !important;
  place-items: center !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ec-link-preview-thumb img {
  width: 100% !important;
  height: 100% !important;
  min-height: 64px !important;
  object-fit: cover !important;
  display: block !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ec-link-preview-play,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ec-link-preview-icon {
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,0.58) !important;
  color: #fff !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ec-link-preview-body {
  min-width: 0 !important;
  display: grid !important;
  align-content: center !important;
  gap: 3px !important;
  padding: 9px 9px 9px 0 !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ec-link-preview-body strong,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ec-link-preview-body small {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ec-link-preview-body strong {
  color: #f4f7ff !important;
  font-size: 12.5px !important;
}

body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ec-link-preview-body small {
  color: rgba(231,235,255,0.56) !important;
  font-size: 10.5px !important;
}

/* Empty stream placeholder (".ecm-empty.compact" shown when no chat is
   selected) — keep it centered + readable. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-empty.compact {
  margin: auto !important;
  padding: 24px 18px !important;
  border: 1px dashed rgba(146, 164, 214, 0.18) !important;
  border-radius: 18px !important;
  background: rgba(13, 20, 40, 0.55) !important;
  color: rgba(231, 235, 255, 0.72) !important;
  text-align: center !important;
}

/* 4. Composer — glass top accent + input focus ring + button press states.
   Inline `.ec-mobile-composer` rules in style.css set grid + base bg; we
   layer accents on top via higher specificity (chain through chat panel). */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer {
  border-top: 1px solid rgba(93, 226, 255, 0.16) !important;
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 92, 255, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(10, 16, 34, 0.96), rgba(5, 9, 22, 0.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 -12px 26px rgba(0, 0, 0, 0.32) !important;
}

/* Focus-within: highlight the composer when the input is focused, so the
   active typing affordance reads at a glance. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer:focus-within {
  border-top-color: rgba(85, 214, 255, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 -14px 30px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(85, 214, 255, 0.10) !important;
}

/* Input ring + caret + placeholder polish. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer input {
  transition: border-color 160ms ease, box-shadow 160ms ease !important;
  caret-color: #55d6ff !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer input:focus {
  outline: none !important;
  border-color: rgba(85, 214, 255, 0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(85, 214, 255, 0.16),
    0 0 14px rgba(85, 214, 255, 0.12) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer input::placeholder {
  color: rgba(162, 177, 224, 0.68) !important;
}

/* Attach button (`+`) — circular tactile state. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer button[data-ecm-attach] {
  transition: background 160ms ease, border-color 160ms ease, transform 140ms ease, box-shadow 160ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer button[data-ecm-attach]:active {
  border-color: rgba(108, 223, 255, 0.4) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 18px rgba(85, 214, 255, 0.18) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer button[data-ecm-attach]:focus-visible,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer button[data-ecm-send]:focus-visible {
  outline: 2px solid rgba(85, 214, 255, 0.5) !important;
  outline-offset: 2px !important;
}

/* Send button (`.primary` / `[data-ecm-send]`) — keep style.css gradient,
   add a press lift. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer button[data-ecm-send] {
  transition: filter 140ms ease, transform 140ms ease, box-shadow 160ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
  letter-spacing: -0.005em !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer button[data-ecm-send]:active {
  filter: brightness(1.08) saturate(1.05) !important;
  box-shadow:
    0 16px 28px rgba(43, 132, 255, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
}

/* ── STEP 9 — Mobile modal / bottom-sheet polish ─────────────────────────────
   Blueprint reference:
     design-import/handoff/elitecrypt-desktop-design/project/EliteCrypt Mobile
     System.html — sectional sheets in Phones 06 / 19 / 21 (compact glass
     cards with grabber + form rows + primary CTA).
   Scope: only Mobile widths via the same media query used throughout the
   inline mobile CSS. Modals on desktop are untouched.

   The base `.modal-overlay` + `.modal` already render as bottom-sheets:
     • slide-up animation
     • rounded top corners (24px 24px 0 0)
     • modal-handle grabber
     • max-height 88dvh + overflow-y auto
     • overlay padding-bottom: env(safe-area-inset-bottom, 0)
   What's missing on phones:
     1. iOS auto-zoom: inputs / textarea / select under 16px font trigger
        Safari focus zoom, which then leaves the layout shifted. Force
        ≥ 16px while keeping the visual size sensible via line-height.
     2. The OVERLAY pads safe-area, but the MODAL itself can still end
        flush against the home indicator when content is short — add an
        inner safe-area-bottom so the last button stays tappable.
     3. Hide the desktop-style scrollbar inside the scrollable modal body.
     4. Focus-within ring on modal inputs so the active field reads at a
        glance — current style only has a placeholder color.
     5. Subtle press feedback on primary modal buttons (.btn / .btn.secondary)
        so taps feel responsive on phones.

   NO HTML changes, NO data-* changes, NO modal logic / handlers changed.
   No fake security, no fake data, no new backend hooks, no rerouting of
   support → abuse. */

@media (max-width: 768px), (hover: none) and (pointer: coarse) {

  /* 1. iOS auto-zoom prevention on form fields inside modals.
     Safari iOS zooms in if the focused control is below 16px. */
  .modal-overlay .modal input[type="text"],
  .modal-overlay .modal input[type="password"],
  .modal-overlay .modal input[type="email"],
  .modal-overlay .modal input[type="search"],
  .modal-overlay .modal input[type="tel"],
  .modal-overlay .modal input[type="url"],
  .modal-overlay .modal input[type="number"],
  .modal-overlay .modal input:not([type]),
  .modal-overlay .modal textarea,
  .modal-overlay .modal select {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  /* 2. Inner safe-area padding so the bottom button row stays clear of the
     home indicator even when the modal content is short. */
  .modal-overlay .modal {
    padding-bottom: max(24px, calc(20px + env(safe-area-inset-bottom, 0px))) !important;
  }

  /* 3. Hide the scrollbar inside the modal scroll container. The modal is
     itself the scroller (style.css :5757 overflow-y: auto). */
  .modal-overlay .modal {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  .modal-overlay .modal::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* 4. Focus-within ring on form fields inside modals — gives the active
     control a clear visual without overriding the existing dark glass. */
  .modal-overlay .modal input[type="text"],
  .modal-overlay .modal input[type="password"],
  .modal-overlay .modal input[type="email"],
  .modal-overlay .modal input[type="search"],
  .modal-overlay .modal input[type="tel"],
  .modal-overlay .modal input[type="url"],
  .modal-overlay .modal input[type="number"],
  .modal-overlay .modal input:not([type]),
  .modal-overlay .modal textarea,
  .modal-overlay .modal select {
    transition: border-color 160ms ease, box-shadow 160ms ease !important;
  }
  .modal-overlay .modal input[type="text"]:focus,
  .modal-overlay .modal input[type="password"]:focus,
  .modal-overlay .modal input[type="email"]:focus,
  .modal-overlay .modal input[type="search"]:focus,
  .modal-overlay .modal input[type="tel"]:focus,
  .modal-overlay .modal input[type="url"]:focus,
  .modal-overlay .modal input[type="number"]:focus,
  .modal-overlay .modal input:not([type]):focus,
  .modal-overlay .modal textarea:focus,
  .modal-overlay .modal select:focus {
    outline: none !important;
    border-color: rgba(85, 214, 255, 0.42) !important;
    box-shadow:
      inset 0 0 0 1px rgba(85, 214, 255, 0.16),
      0 0 14px rgba(85, 214, 255, 0.12) !important;
  }

  /* 5. Subtle press feedback on the primary modal buttons. The existing
     `.btn` class lives in style.css; we only add a tactile pressed state.
     Specificity: `.modal-overlay .modal .btn` (3 classes) is enough since
     the base `.btn` rule has lower specificity. */
  .modal-overlay .modal .btn {
    transition: filter 140ms ease, transform 140ms ease, box-shadow 160ms ease !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .modal-overlay .modal .btn:active {
    filter: brightness(1.08) saturate(1.05) !important;
  }
  .modal-overlay .modal .btn:focus-visible {
    outline: 2px solid rgba(85, 214, 255, 0.5) !important;
    outline-offset: 2px !important;
  }

  /* Lock the modal container itself to the viewport width so unusual
     embedded children (e.g. long uneditable IDs / codes / QR text) cannot
     widen it. */
  .modal-overlay .modal {
    max-width: min(100vw, 480px) !important;
    overflow-x: hidden !important;
  }

  /* Allow long inline text content to wrap inside modals (codes / IDs are
     often shown as <code> / <span> chunks that don't wrap by default). */
  .modal-overlay .modal pre,
  .modal-overlay .modal code,
  .modal-overlay .modal .ec-gm-code,
  .modal-overlay .modal small,
  .modal-overlay .modal p {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 10 — BLUEPRINT FIDELITY THEME LAYER
   ═══════════════════════════════════════════════════════════════════════════
   Source of truth: design-import/handoff/elitecrypt-desktop-design/project/
                    EliteCrypt Mobile System.html
   The earlier Steps 2-9 added incremental polish ON TOP of the existing
   inline cyan-heavy / neon-pill / 24-30px-radius mobile shell. The blueprint
   uses a different visual vocabulary:
     • base bg dark navy (#0a0c18 → #050610) with violet/cyan radial accents
     • cards: rgba(255,255,255,0.025) + 1px rgba(255,255,255,0.06) line
     • radii: 14-18px (not 24-30px)
     • shadows: thin lines + soft drop, NOT multi-layer cyan glow
     • accent color: violet (#a78bfa / #c4b5fd), not cyan
     • mono font (JetBrains Mono fallback) for eyebrows + caps + timestamps
     • brand gradient (violet→indigo→cyan) reserved for primary CTAs
   This block re-themes the existing surfaces toward the blueprint feel
   without touching layout (grid/flex/dimensions remain from inline rules).
   All selectors prefixed with `html` to beat inline 0,1,5-7,1 specificity.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Blueprint design tokens (scoped to mobile shell) ──────────────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell {
  --bp-bg-0: #05060d;
  --bp-bg-1: #0a0c18;
  --bp-bg-2: #0e1122;
  --bp-surface: rgba(255, 255, 255, 0.025);
  --bp-surface-strong: rgba(255, 255, 255, 0.04);
  --bp-line: rgba(255, 255, 255, 0.06);
  --bp-line-2: rgba(255, 255, 255, 0.10);
  --bp-line-3: rgba(255, 255, 255, 0.16);
  --bp-text: #e7ebff;
  --bp-text-dim: rgba(231, 235, 255, 0.66);
  --bp-text-mute: rgba(231, 235, 255, 0.42);
  --bp-text-faint: rgba(231, 235, 255, 0.28);
  --bp-violet: #7c5cff;
  --bp-violet-2: #a78bfa;
  --bp-violet-soft: rgba(124, 92, 255, 0.16);
  --bp-cyan: #22d3ee;
  --bp-cyan-2: #67e8f9;
  --bp-cyan-soft: rgba(34, 211, 238, 0.14);
  --bp-emerald: #34d399;
  --bp-emerald-2: #6ee7b7;
  --bp-rose: #f43f5e;
  --bp-amber: #f59e0b;
  --bp-grad-brand: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%);
  --bp-grad-text: linear-gradient(90deg, #a78bfa 0%, #22d3ee 100%);
  --bp-grad-violet: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  --bp-glow-violet: 0 0 0 1px rgba(124, 92, 255, 0.35), 0 12px 40px -12px rgba(124, 92, 255, 0.55);
  --bp-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;
}

/* — Mobile shell base bg — blueprint phone screen ─────────────────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell.ec-mobile-shell {
  background:
    radial-gradient(1400px 800px at 10% -10%, rgba(124, 92, 255, 0.18), transparent 60%),
    radial-gradient(1100px 700px at 100% 100%, rgba(34, 211, 238, 0.10), transparent 60%),
    var(--bp-bg-0) !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app {
  background: linear-gradient(180deg, #0a0c18 0%, #050610 100%) !important;
}

/* — Headlines — gradient text on h1 inside panel heads ────────────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-screen-head h1,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chats-title h1,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contacts-copy h1,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-head h1,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-head h1 {
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.66)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* — Eyebrows / caps text — blueprint mono ─────────────────────────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-eyebrow,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-eyebrow,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-summary-badge,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chats-secure,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav button {
  font-family: var(--bp-font-mono) !important;
}

/* ── Panel head cards — calm down cyan-radial bombs to blueprint subtle ──── */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chats-head,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contacts-head,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-head,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-head {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 4px 12px !important;
}

/* Restore chats-head grid (it has menu/title/actions layout) but as flat */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chats-head {
  padding: 8px 2px 12px !important;
}

/* ── Chats / Kontakte search pills — blueprint .field style ──────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-search,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-search,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-search {
  min-height: 48px !important;
  padding: 0 14px !important;
  border: 1px solid var(--bp-line-2) !important;
  border-radius: 14px !important;
  background: var(--bp-surface) !important;
  box-shadow: none !important;
  color: var(--bp-text-dim) !important;
}

/* ── Filter chip rows — flat row with violet active ──────────────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-filters,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-filters {
  display: flex !important;
  grid-template-columns: none !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  gap: 8px !important;
  padding: 0 2px 4px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  scrollbar-width: none !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-filters button,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-filters button {
  flex: 0 0 auto !important;
  min-height: 32px !important;
  padding: 0 13px !important;
  border-radius: 999px !important;
  border: 1px solid var(--bp-line) !important;
  background: var(--bp-surface) !important;
  color: var(--bp-text-dim) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  font-family: inherit !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-filters button.active,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-filters button.active {
  border-color: rgba(124, 92, 255, 0.40) !important;
  background: var(--bp-violet-soft) !important;
  color: var(--bp-violet-2) !important;
  text-shadow: none !important;
  box-shadow: 0 0 0 1px rgba(124, 92, 255, 0.20) !important;
}

/* ── List wrappers — calm down the heavy rounded cards ────────────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-list,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-list {
  border: 1px solid var(--bp-line) !important;
  border-radius: 16px !important;
  background: var(--bp-surface) !important;
  box-shadow: none !important;
}

/* Chat / Contact row separators */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ecm-chat-row,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ecm-contact-row {
  border-bottom: 1px solid var(--bp-line) !important;
}

/* Active chat row — blueprint violet accent (not cyan) */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-list .ecm-chat-row.active {
  background: var(--bp-violet-soft) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-list .ecm-chat-row.active::before {
  background: var(--bp-grad-text) !important;
}

/* ── Vault frame + Settings frame — flat blueprint surface ───────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-frame,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-frame {
  border: 1px solid var(--bp-line) !important;
  border-radius: 18px !important;
  background: var(--bp-surface) !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-frame::before,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-frame::after,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-frame::before,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-frame::after {
  display: none !important;
  content: none !important;
}

/* ── Vault summary card — blueprint subtle ───────────────────────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-summary {
  border: 1px solid var(--bp-line-2) !important;
  border-radius: 14px !important;
  background: var(--bp-surface-strong) !important;
  box-shadow: none !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-summary-badge {
  border-color: rgba(52, 211, 153, 0.30) !important;
  background: rgba(52, 211, 153, 0.10) !important;
  color: var(--bp-emerald-2) !important;
}

/* ── Profile card + Settings rows ────────────────────────────────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-profile-card,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-categories .ec-mobile-setting-row,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-footnote {
  border: 1px solid var(--bp-line) !important;
  border-radius: 14px !important;
  background: var(--bp-surface) !important;
  box-shadow: none !important;
}

/* Profile card status pill (emerald) */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-profile-card > b {
  border-color: rgba(52, 211, 153, 0.30) !important;
  background: rgba(52, 211, 153, 0.10) !important;
  color: var(--bp-emerald-2) !important;
  font-family: var(--bp-font-mono) !important;
}

/* Chevron color — violet */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-setting-chevron,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-setting-chevron {
  color: var(--bp-violet-2) !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Logout — rose accent, blueprint-style flat */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-logout {
  border: 1px solid rgba(244, 63, 94, 0.25) !important;
  border-radius: 14px !important;
  background: rgba(244, 63, 94, 0.06) !important;
  box-shadow: none !important;
}

/* ── Bottom nav — blueprint subtle floating glass (not pill bomb) ────────── */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav {
  border: 0 !important;
  border-top: 1px solid var(--bp-line) !important;
  border-radius: 0 !important;
  background: linear-gradient(180deg, rgba(10, 12, 24, 0.4), rgba(5, 6, 16, 0.85)) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  min-height: 0 !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bp-text-faint) !important;
  font-weight: 600 !important;
  font-size: 10.5px !important;
  letter-spacing: 0.02em !important;
  text-shadow: none !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav button.active {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bp-violet-2) !important;
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.7) !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav button.active span {
  filter: drop-shadow(0 0 8px rgba(167, 139, 250, 0.7)) !important;
}

/* ── Active chat — blueprint phone 03 ────────────────────────────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head.ecm-chat-head {
  border: 1px solid var(--bp-line) !important;
  border-radius: 14px !important;
  background: var(--bp-surface) !important;
  box-shadow: none !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head .ec-mobile-back,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head .ec-mobile-icon-btn {
  border: 1px solid var(--bp-line-2) !important;
  border-radius: 12px !important;
  background: var(--bp-surface-strong) !important;
  color: var(--bp-violet-2) !important;
  box-shadow: none !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-stream.ecm-chat-stream {
  background: transparent !important;
}

/* Message bubbles — blueprint .bub style */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg {
  border: 1px solid var(--bp-line) !important;
  border-radius: 16px 16px 16px 6px !important;
  background: var(--bp-surface-strong) !important;
  box-shadow: none !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg.mine {
  border-radius: 16px 16px 6px 16px !important;
  border-color: rgba(124, 92, 255, 0.30) !important;
  background: var(--bp-grad-brand) !important;
  color: #ffffff !important;
}

/* Composer — flat blueprint */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer {
  border-top: 1px solid var(--bp-line) !important;
  background: linear-gradient(180deg, rgba(10, 12, 24, 0.55), rgba(5, 6, 16, 0.92)) !important;
  box-shadow: none !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer input {
  border: 1px solid var(--bp-line-2) !important;
  border-radius: 12px !important;
  background: var(--bp-surface) !important;
  color: var(--bp-text) !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer button[data-ecm-attach] {
  border: 1px solid var(--bp-line-2) !important;
  border-radius: 12px !important;
  background: var(--bp-surface) !important;
  color: var(--bp-violet-2) !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer button[data-ecm-send] {
  border: 0 !important;
  border-radius: 12px !important;
  background: var(--bp-grad-brand) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 12px 28px rgba(124, 92, 255, 0.30) !important;
}

/* ── Vault add + Chats plus + Contacts add — blueprint brand-gradient CTA ── */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-vault-add[data-ecm-action="vault"],
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-plus,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-add-btn {
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--bp-grad-brand) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 28px rgba(124, 92, 255, 0.30) !important;
}

/* Empty-state CTAs already use brand gradient from Step 3/4 — keep them. */

/* ── Topbar — make it match the new flat language ────────────────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-topbar {
  background: transparent !important;
  box-shadow: none !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-brand strong {
  background: var(--bp-grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-status {
  border: 1px solid rgba(52, 211, 153, 0.30) !important;
  border-radius: 999px !important;
  background: rgba(52, 211, 153, 0.08) !important;
  color: var(--bp-emerald-2) !important;
  box-shadow: none !important;
  font-family: var(--bp-font-mono) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
}

/* ── Settings/Vault per-kind icon tiles — keep accent color, calm bg ─────── */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-setting-icon,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-setting-icon {
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px var(--bp-line-2) !important;
}

/* ── Lock horizontal overflow at the shell ───────────────────────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-content {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 11 — PROFIL / SETTINGS STRUCTURAL FIX
   ═══════════════════════════════════════════════════════════════════════════
   The Profil panel still feels visually messy because:
     1. Menu-in-menu fallback relies on the `is-subpage` class that JS adds —
        any race condition or untriggered toggle leaves the main list visible
        behind the subpage. Switch to a CSS-only :has() detector so the hide
        triggers purely from the subpage `[hidden]` attribute, which JS
        manipulates directly via element.hidden / removeAttribute.
     2. No visual grouping — all 9 setting rows render flat. The blueprint
        uses `.group-label` eyebrows to chunk related rows. We add CSS-only
        section breaks between thematic clusters using sibling selectors.
     3. Subpage container needs its own visible frame so the user knows
        they're inside a different surface.
     4. Profile card competes with the page title. Make it more compact and
        identity-focused.
     5. Logout needs breathing room from the last category and clear danger
        affordance without being huge.
   No HTML changes. No JS changes. Purely CSS scoped to [data-ecm-panel="more"]. */

/* ─── 1. Bulletproof menu-in-menu kill via :has() ──────────────────────────
   When the subpage `<div data-ecm-profile-subpage>` is NOT hidden (= visible),
   hide every direct sibling of it inside the frame. This is independent of
   `.is-subpage` class state. */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame:has([data-ecm-profile-subpage]:not([hidden])) > .ec-mobile-settings-head,
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame:has([data-ecm-profile-subpage]:not([hidden])) > .ec-mobile-profile-card,
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame:has([data-ecm-profile-subpage]:not([hidden])) > .ec-mobile-settings-eyebrow,
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame:has([data-ecm-profile-subpage]:not([hidden])) > .ec-mobile-settings-categories,
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame:has([data-ecm-profile-subpage]:not([hidden])) > .ec-mobile-settings-logout {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* And reveal the subpage when it's not hidden, regardless of `.is-subpage` */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame > [data-ecm-profile-subpage]:not([hidden]) {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 14px !important;
  visibility: visible !important;
  pointer-events: auto !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 5 !important;
}

/* And ensure subpage is hidden when [hidden] attribute is set */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame > [data-ecm-profile-subpage][hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ─── 2. Visual section groupings via attribute-based dividers ─────────────
   Group rows so the screen reads in thematic clusters instead of a flat list.
   Cluster breaks at: security (after account), notifications (after privacy),
   devices (after chats), legal (after support), premium (after legal). */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="security"],
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="notifications"],
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="devices"],
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="legal"],
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="premium"] {
  margin-top: 12px !important;
  position: relative !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="security"]::before,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="notifications"]::before,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="devices"]::before,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="legal"]::before,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="premium"]::before {
  content: "" !important;
  position: absolute !important;
  top: -7px !important;
  left: 12px !important;
  right: 12px !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, var(--bp-line-2), transparent) !important;
  pointer-events: none !important;
}

/* ─── 3. Subpage container — visible blueprint frame ───────────────────────
   When the subpage is shown, give it its own thin glass surface so the user
   sees a clear surface transition from main list → detail. */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-subpage[data-ecm-profile-subpage]:not([hidden]) {
  padding: 4px !important;
  background: transparent !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-subpage[data-ecm-profile-subpage]:not([hidden]) .ec-mobile-settings-subhead {
  padding: 6px 6px 12px !important;
  border-bottom: 1px solid var(--bp-line) !important;
  margin-bottom: 8px !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-subhead .ec-mobile-back {
  border: 1px solid var(--bp-line-2) !important;
  background: var(--bp-surface) !important;
  color: var(--bp-violet-2) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-subhead h1 {
  background: var(--bp-grad-text) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* Sub-content cards — same flat blueprint style */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-card,
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-row {
  border: 1px solid var(--bp-line) !important;
  border-radius: 14px !important;
  background: var(--bp-surface) !important;
  box-shadow: none !important;
}

/* ─── 4. Profile card — compact identity, less competing with title ──────── */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-card {
  min-height: 0 !important;
  padding: 12px 14px !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  margin-top: 4px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-card > span:first-child {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
  background: var(--bp-grad-violet) !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-card > div strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--bp-text) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-card > div small {
  font-size: 11px !important;
  color: var(--bp-text-dim) !important;
}

/* ─── 5. Settings frame — give it tighter padding and remove glow ─────────── */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame {
  padding: 14px 12px 16px !important;
  gap: 12px !important;
}

/* Settings categories — tighter gaps, no extra outer frame */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories {
  gap: 8px !important;
  padding-bottom: 0 !important;
}

/* Settings row — flat blueprint surface, smaller radius, no neon ring */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row {
  min-height: 58px !important;
  grid-template-columns: 40px minmax(0, 1fr) 20px !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  border: 1px solid var(--bp-line) !important;
  background: var(--bp-surface) !important;
  box-shadow: none !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  box-shadow: inset 0 0 0 1px var(--bp-line-2) !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  color: var(--bp-text) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-subtitle {
  font-size: 11.5px !important;
  color: var(--bp-text-dim) !important;
  line-height: 1.35 !important;
}

/* Chevron — simple violet › */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-chevron {
  color: var(--bp-violet-2) !important;
  background: transparent !important;
  box-shadow: none !important;
  width: 20px !important;
  height: 20px !important;
}

/* ─── 6. Logout row — rose accent, blueprint-style, not huge ──────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout {
  min-height: 58px !important;
  margin-top: 14px !important;
  padding: 10px 14px !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  gap: 12px !important;
  border: 1px solid rgba(244, 63, 94, 0.25) !important;
  border-radius: 14px !important;
  background: rgba(244, 63, 94, 0.06) !important;
  box-shadow: none !important;
  color: #ffd5e0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 12px !important;
  background: rgba(244, 63, 94, 0.14) !important;
  color: #fda4af !important;
  box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.20) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout-copy strong {
  color: #ffe2ea !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout-copy small {
  color: rgba(244, 63, 94, 0.66) !important;
  font-size: 11px !important;
}

/* ─── 7. Premium row override — keep gold accent on flat surface ─────────── */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="premium"] {
  border-color: rgba(255, 198, 92, 0.30) !important;
  background: linear-gradient(135deg, rgba(255, 198, 92, 0.06), rgba(124, 92, 255, 0.04)) !important;
}

/* ─── 8. Settings-head — compact title strip ──────────────────────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-head {
  padding: 2px 4px 6px !important;
  border-bottom: 1px solid var(--bp-line) !important;
  margin-bottom: 4px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-head h1 {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  background: linear-gradient(180deg, #fff, rgba(255, 255, 255, 0.7)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-head p {
  font-size: 11px !important;
  color: var(--bp-text-dim) !important;
  margin-top: 4px !important;
}

/* ─── 9. Settings eyebrow ("Kategorien") — mono caps ─────────────────────── */
html body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-eyebrow {
  font-family: var(--bp-font-mono) !important;
  color: var(--bp-text-mute) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 4px 2px 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 15 — KONTAKTE PANEL BLUEPRINT ALIGNMENT (mobilepass6-contacts)
   ═══════════════════════════════════════════════════════════════════════════
   Phase 2B Kontakte panel structural pass.
   Brings the Kontakte panel into the same blueprint screen-head + group-label
   rhythm as the Profil panel: mono-caps eyebrow above the dynamic contact
   list. Scoped to [data-ecm-panel="rooms"] only. No JS touched, no contact
   data touched, no dynamic rendering touched. */

/* 1. Contacts group label — uppercase mono caps, matches Profil eyebrow style. */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contacts-eyebrow {
  font-family: var(--bp-font-mono) !important;
  color: var(--bp-text-mute) !important;
  font-size: 10.5px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 4px 2px 2px !important;
  margin: 10px 2px 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 14 — PROFIL CLUSTER ALIGNMENT (mobilepass5-profile)
   ═══════════════════════════════════════════════════════════════════════════
   Phase 2A finish pass after the structural HTML rebuild.
   The HTML now has cluster eyebrows nested INSIDE .ec-mobile-settings-categories:
     KONTO & PRIVATSPHÄRE → account, privacy, notifications, chats
     SICHERHEIT           → security, devices
     HILFE & MEHR         → support, legal
     ABO                  → premium
   The old STEP 11 dividers (margin-top + ::before on data-settings-kind=
   security/notifications/devices/legal/premium) targeted the OLD cluster
   boundaries and now collide with the new eyebrows — putting extra breaks
   INSIDE clusters (notifications/devices/legal) and duplicating breaks
   BEFORE eyebrows (security/premium).
   This step neutralises those obsolete dividers and gives the new cluster
   eyebrows subtle breathing room above. Scoped to [data-ecm-panel="more"]
   only. No JS, no HTML, no other panel touched. */

/* 1. Neutralise obsolete data-settings-kind cluster breaks. The new eyebrows
   handle grouping now; these rows are no longer cluster boundaries. */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="security"],
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="notifications"],
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="devices"],
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="legal"],
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="premium"] {
  margin-top: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="security"]::before,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="notifications"]::before,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="devices"]::before,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="legal"]::before,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row[data-settings-kind="premium"]::before {
  content: none !important;
  display: none !important;
}

/* 2. Cluster eyebrows: subtle breathing room above each cluster.
   The first eyebrow (KONTO & PRIVATSPHÄRE) hugs the profile card. */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-settings-eyebrow {
  margin-top: 6px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories > .ec-mobile-settings-eyebrow:first-child {
  margin-top: 0 !important;
}

/* 3. Subtle row press feedback — flat, no glow, blueprint-style. */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row:active {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: var(--bp-line-2) !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 12 — MOBILE SHELL AUTHORITY FIX
   ═══════════════════════════════════════════════════════════════════════════
   Root cause of "phone still shows old mobile UI":
     • Legacy openRoom() calls showScreen('chat-screen') at index.html:17560.
     • showScreen() removes .active from EVERY .screen element including
       #cd-shell (the container of #ec-mobile-shell), then adds .active to
       #chat-screen.
     • Base rule `.screen { display: none }` (style.css:4831) kicks in for
       #cd-shell, which kills its children including #ec-mobile-shell.
     • The legacy #chat-screen — which is position: fixed, inset: 0 — fills
       the viewport with the OLD design.
     • Same problem when openVaultScreen() calls showScreen('vault-screen').
   The fix is CSS-only and authority-based:
     1. While body.ec-mobile-shell-active is on, #cd-shell ALWAYS renders
        regardless of its .active class state — so #ec-mobile-shell never
        disappears when showScreen() toggles classes elsewhere.
     2. Legacy logged-in screens (#rooms-screen, #chat-screen, #vault-screen)
        are visually hidden on mobile. They remain in the DOM because
        syncMessages() / refreshMobileContacts() / etc. read from their
        inner nodes (#messages, #rooms-list etc.) — and querySelector works
        through display:none — so backend wiring stays intact.
     3. Any duplicate legacy bottom-nav inside #ec-claude-shell-final is
        already hidden by the inline rule at index.html:37995; we reinforce
        the same here in case ordering shifts.
   Desktop is untouched: rules are gated by body.ec-mobile-shell-active,
   which only fires for max-width 899px or (hover:none and pointer:coarse).
   ═══════════════════════════════════════════════════════════════════════════ */

/* 1. #cd-shell stays visible on mobile regardless of `.active` toggle. */
html body.ec-mobile-shell-active #cd-shell {
  display: block !important;
  visibility: visible !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147482000 !important;
  overflow: hidden !important;
  pointer-events: auto !important;
}

/* 2. Hide the legacy fullscreen logged-in containers on mobile so they
   cannot override the new mobile shell. They remain in the DOM. */
html body.ec-mobile-shell-active #rooms-screen,
html body.ec-mobile-shell-active #chat-screen,
html body.ec-mobile-shell-active #vault-screen,
html body.ec-mobile-shell-active #rooms-screen.screen,
html body.ec-mobile-shell-active #chat-screen.screen,
html body.ec-mobile-shell-active #vault-screen.screen,
html body.ec-mobile-shell-active #rooms-screen.screen.active,
html body.ec-mobile-shell-active #chat-screen.screen.active,
html body.ec-mobile-shell-active #vault-screen.screen.active {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  inset: auto !important;
  left: -99999px !important;
  top: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  z-index: -1 !important;
  overflow: hidden !important;
}

/* 3. Reinforce: the desktop final-shell sibling inside #cd-shell stays
   inert on mobile (already declared inline ~38001, repeated here in case
   future inline reorderings drop it). */
html body.ec-mobile-shell-active #cd-shell > #ec-claude-shell-final,
html body.ec-mobile-shell-active #cd-shell #ec-claude-shell-final {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 4. #ec-mobile-shell is the only visible mobile surface. Lock it to the
   viewport, above everything else on mobile. */
html body.ec-mobile-shell-active #ec-mobile-shell {
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 95 !important;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* 5. Belt-and-braces: any other top-level .screen.active that is NOT
   #cd-shell or #ec-mobile-shell should not visually compete on mobile
   AFTER auth. (Only applies to auth-ready state — landing/login pre-auth
   screens are unaffected because body.ec-mobile-shell-active requires
   auth-ready.) */
html body.ec-mobile-shell-active.auth-ready .screen.active:not(#cd-shell):not(#ec-mobile-shell) {
  display: none !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 13 — ULTRA-AGGRESSIVE BLUEPRINT THEME OVERRIDE
   ═══════════════════════════════════════════════════════════════════════════
   No HTML restructure (refused per CLAUDE.md: "Do not rewrite large files").
   Instead, the highest-specificity CSS layer that this file ships:
   chains `html` + `body.ec-mobile-shell-active.auth-ready` + double class
   selectors so EVERY blueprint surface wins against the inline rules in
   index.html lines 37985-40400+.

   This is the last CSS-only pass. If the mobile UI still feels too cyan-
   neon-pill-heavy after this, the visible/visual gap is HTML-level, not
   CSS-level — and that requires panel-by-panel surgical markup changes
   each gated by an explicit user request + screenshot.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Force the entire mobile app surface to use blueprint phone-screen bg ── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-app,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app.ec-mobile-app {
  background:
    radial-gradient(circle at 18% 0%, rgba(124, 92, 255, 0.10), transparent 38%),
    radial-gradient(circle at 82% 100%, rgba(34, 211, 238, 0.08), transparent 42%),
    linear-gradient(180deg, #0a0c18 0%, #050610 100%) !important;
}

/* — Background overlay div (.ec-mobile-bg) — keep subtle, no neon glow ──── */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bg {
  background: transparent !important;
  opacity: 0 !important;
}

/* — Kill ALL multi-layer box-shadows on mobile cards (blueprint = 1px line) */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-card,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-chat-list,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-contact-list,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-vault-frame,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-settings-frame,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-profile-card,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-vault-summary,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-vault-footnote,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-setting-row,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-chat-head,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-chats-head,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-contacts-head,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-vault-head,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-settings-head {
  box-shadow: none !important;
}

/* — Force violet accent on ALL active states (overrides cyan everywhere) ─── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-bottom-nav button.active,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ecm-bottom-nav button.active {
  color: #c4b5fd !important;
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.8) !important;
}

/* — Strip text-shadows from non-active bottom-nav buttons ─────────────────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-bottom-nav button:not(.active),
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ecm-bottom-nav button:not(.active) {
  text-shadow: none !important;
  color: rgba(231, 235, 255, 0.4) !important;
}

/* — Universal radius cap for cards: never exceed 18px on mobile ──────────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-card,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-vault-frame,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-settings-frame,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-profile-card,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-vault-summary,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-vault-footnote,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-setting-row,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-chat-list,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-contact-list {
  border-radius: 16px !important;
}

/* — Universal flat-glass surface for all cards ────────────────────────────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-card,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-vault-frame,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-settings-frame,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-profile-card,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-vault-summary,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-vault-footnote {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* — Settings/Vault rows: same flat surface ──────────────────────────────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-setting-row,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="vault"] .ec-mobile-setting-row {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* — Chevron and small accents stay violet ───────────────────────────────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell .ec-mobile-setting-chevron {
  color: #a78bfa !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* — Composer send button always uses brand gradient ─────────────────────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer button[data-ecm-send],
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer .primary {
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* — Active chat header readability ──────────────────────────────────────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
}

/* — Active chat composer flat ───────────────────────────────────────────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer {
  background: linear-gradient(180deg, rgba(10, 12, 24, 0.55), rgba(5, 6, 16, 0.95)) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: none !important;
}

/* — Active chat bubbles: blueprint-aligned ──────────────────────────────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg {
  border-radius: 16px 16px 16px 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg.mine {
  border-radius: 16px 16px 6px 16px !important;
  border: 1px solid rgba(124, 92, 255, 0.30) !important;
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 16 — DESIGN 1:1 PARITY PASS (mobilepass-design-1to1)
   ═══════════════════════════════════════════════════════════════════════════
   Full visual transfer from Claude Design (EliteCrypt Mobile System.html).
   Scoped strictly to #ec-mobile-shell. No JS / structural HTML changes here —
   only Blueprint-exact visual treatment of:
     1. App frame radial screen-glow
     2. Topbar collapse to slim brand strip
     3. Bottom nav: blueprint .tabbar exact (grid + blur + violet-2 active + glow)
     4. Panel headers: blueprint .app-top.lg
     5. Search pills, filter chips
     6. Dynamic chat / contact rows: blueprint flat row pattern
     7. Setting rows: blueprint .row pattern (tighter)
     8. Vault cards
     9. Active chat: header + bubbles + composer
    10. Premium / danger accents
   ═══════════════════════════════════════════════════════════════════════════ */

/* === 16.1  App frame — radial screen-glow like blueprint .screen-glow === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app {
  position: relative !important;
  background:
    radial-gradient(420px 280px at 50% 0%, rgba(124,92,255,0.18), transparent 60%),
    radial-gradient(420px 320px at 50% 100%, rgba(34,211,238,0.10), transparent 60%),
    linear-gradient(180deg, #0a0c18 0%, #05060d 100%) !important;
  isolation: isolate !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bg {
  background: transparent !important;
  opacity: 0 !important;
}

/* === 16.2  Topbar — slim brand strip, no chrome === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-topbar.ecm-header {
  background: transparent !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  padding: 14px 18px 4px !important;
  min-height: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-brand {
  gap: 10px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-logo-mark {
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, rgba(124,92,255,0.5), rgba(34,211,238,0.20)) !important;
  border: 1px solid rgba(124,92,255,0.30) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-logo-mark img {
  width: 26px !important;
  height: 26px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-brand strong {
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  color: #e7ebff !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-brand small {
  font-size: 9.5px !important;
  color: rgba(231,235,255,0.42) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 0.20em !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-status.ecm-status {
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  color: #6ee7b7 !important;
  background: rgba(52,211,153,0.10) !important;
  border: 1px solid rgba(52,211,153,0.30) !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
}

/* === 16.3  Bottom nav — blueprint .tabbar exact === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  padding: 10px 12px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: linear-gradient(180deg, rgba(10,12,24,0.4), rgba(5,6,16,0.85)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
  gap: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: rgba(231,235,255,0.28) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  padding: 4px 0 !important;
  min-height: 50px !important;
  transform: none !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav button .ec-mobile-nav-icon {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: currentColor !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav button .ec-mobile-nav-icon svg {
  width: 20px !important;
  height: 20px !important;
  display: block !important;
  color: currentColor !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav button.active {
  color: #c4b5fd !important;
  background: transparent !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav.ecm-bottom-nav button.active .ec-mobile-nav-icon svg {
  filter: drop-shadow(0 0 8px rgba(167,139,250,0.7)) !important;
}

/* === 16.4  Panel headers — blueprint .app-top.lg pattern === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-screen-head,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chats-head,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contacts-head,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-head,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-head {
  padding: 10px 4px 14px !important;
  background: transparent !important;
  border-bottom: 0 !important;
  margin-bottom: 6px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-screen-head h1,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chats-title h1,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contacts-copy h1,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-head-copy h1,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-head-copy h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  color: #e7ebff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-screen-head p,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chats-title p,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contacts-copy p,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-head-copy p,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-head-copy p {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: rgba(231,235,255,0.42) !important;
  margin: 3px 0 0 !important;
  line-height: 1.4 !important;
}

/* Plus / action button on the right of a panel header — brand gradient like blueprint */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chat-plus,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contact-add-btn,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-add {
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 8px 24px -8px rgba(124,92,255,0.6) !important;
  font-weight: 700 !important;
  border-radius: 11px !important;
}

/* E2EE pill in chats head — cyan blueprint pill */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chats-secure {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  color: #67e8f9 !important;
  background: rgba(34,211,238,0.10) !important;
  border: 1px solid rgba(34,211,238,0.30) !important;
  text-transform: uppercase !important;
}

/* === 16.5  Search field — blueprint .field pattern === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-search.ecm-search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  margin-bottom: 10px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-search input {
  background: transparent !important;
  border: 0 !important;
  color: #e7ebff !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  height: 100% !important;
  flex: 1 !important;
  min-width: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-search input::placeholder {
  color: rgba(231,235,255,0.42) !important;
  font-weight: 500 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-search svg,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-search .ec-mobile-contact-search-icon,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-search .ec-mobile-vault-search-icon {
  color: rgba(231,235,255,0.42) !important;
  flex: none !important;
}

/* === 16.6  Filter chips — blueprint .seg pattern (flat row) === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chat-filters,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contact-filters {
  display: flex !important;
  padding: 4px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  gap: 2px !important;
  margin-bottom: 10px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chat-filters::-webkit-scrollbar,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contact-filters::-webkit-scrollbar { display: none !important; }
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chat-filters button,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contact-filters button {
  flex: 1 !important;
  padding: 8px 10px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(231,235,255,0.66) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  letter-spacing: -0.005em !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-chat-filters button.active,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contact-filters button.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(124,92,255,0.30), rgba(99,102,241,0.20)) !important;
  box-shadow: inset 0 0 0 1px rgba(124,92,255,0.35) !important;
}

/* === 16.7  Chat / contact list rows — blueprint flat .chat-row pattern === */
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list,
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list {
  padding: 4px 2px 0 !important;
  background: transparent !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list > *,
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list > * {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 4px !important;
  margin: 0 !important;
  min-height: 64px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list > *:last-child,
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list > *:last-child {
  border-bottom: 0 !important;
}

/* Avatars inside list rows — blueprint .av pattern */
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ec-mobile-room-avatar,
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ec-mobile-contact-avatar,
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list [class*="avatar"],
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list [class*="avatar"] {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(124,92,255,0.5), rgba(34,211,238,0.20)) !important;
  border: 1px solid rgba(124,92,255,0.30) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: grid !important;
  place-items: center !important;
}

/* Unread badge — brand gradient */
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list [class*="badge"],
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list [class*="unread"] {
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  color: #fff !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 0 10px rgba(124,92,255,0.5) !important;
  border: 0 !important;
}

/* === 16.8  Contacts eyebrow + group labels === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-contacts-eyebrow,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-eyebrow,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(231,235,255,0.42) !important;
  padding: 14px 4px 8px !important;
  background: transparent !important;
  border: 0 !important;
}

/* === 16.9  Setting rows — blueprint .row pattern (tighter, flat) === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-row.ecm-setting-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  margin-bottom: 8px !important;
  min-height: 0 !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-icon {
  flex: none !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.22) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-icon svg {
  width: 16px !important;
  height: 16px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-copy {
  flex: 1 !important;
  min-width: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: #e7ebff !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-subtitle {
  font-size: 11.5px !important;
  color: rgba(231,235,255,0.66) !important;
  margin-top: 2px !important;
  line-height: 1.4 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-chevron {
  color: rgba(231,235,255,0.28) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 16px !important;
  height: 16px !important;
}

/* === 16.10  Vault categories — same blueprint row pattern === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-categories button {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  margin-bottom: 8px !important;
  min-height: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  width: 100% !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-summary {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px 14px !important;
  background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(34,211,238,0.06)) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  border-radius: 16px !important;
  margin-bottom: 10px !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-summary-icon {
  flex: none !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
  background: rgba(124,92,255,0.18) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-summary-badge {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  color: #6ee7b7 !important;
  background: rgba(52,211,153,0.10) !important;
  border: 1px solid rgba(52,211,153,0.30) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-footnote {
  text-align: center !important;
  font-size: 10.5px !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  color: rgba(231,235,255,0.42) !important;
  padding: 12px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
}

/* === 16.11  Profile card — blueprint identity card === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-profile-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(34,211,238,0.04)) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  border-radius: 16px !important;
  margin-bottom: 10px !important;
  box-shadow: none !important;
  min-height: 0 !important;
  grid-template-columns: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-profile-card > span:first-child {
  flex: none !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #7c5cff, #6366f1) !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 6px 18px -6px rgba(124,92,255,0.5) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-profile-card > div {
  flex: 1 !important;
  min-width: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-profile-card > div strong {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #e7ebff !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-profile-card > div small {
  display: block !important;
  font-size: 11px !important;
  color: rgba(231,235,255,0.66) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 0.06em !important;
  margin-top: 2px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-profile-card > b {
  flex: none !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  color: #6ee7b7 !important;
  background: rgba(52,211,153,0.10) !important;
  border: 1px solid rgba(52,211,153,0.30) !important;
  text-transform: uppercase !important;
}

/* === 16.12  Active chat — blueprint pattern === */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head {
  padding: 6px 6px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 4px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-back,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-icon-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 11px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  font-size: 16px !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-meta {
  flex: 1 !important;
  min-width: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] #ec-mobile-chat-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] #ec-mobile-chat-sub {
  font-size: 10.5px !important;
  color: #6ee7b7 !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 0.04em !important;
}

/* Composer — blueprint */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 6px calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer button[data-ecm-attach] {
  flex: none !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  font-size: 18px !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer input#ec-mobile-msg-input {
  flex: 1 !important;
  height: 40px !important;
  padding: 0 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  color: #e7ebff !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  min-width: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer input#ec-mobile-msg-input::placeholder {
  color: rgba(231,235,255,0.42) !important;
  font-weight: 500 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer button[data-ecm-send].primary,
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer button[data-ecm-send] {
  flex: none !important;
  min-width: 68px !important;
  height: 40px !important;
  padding: 0 16px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%) !important;
  border: 0 !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: -0.005em !important;
  box-shadow: 0 6px 18px -6px rgba(34,211,238,0.55) !important;
}

/* === 16.13  Logout row — danger style stays === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-logout {
  margin-top: 14px !important;
  background: rgba(244,63,94,0.06) !important;
  border: 1px solid rgba(244,63,94,0.25) !important;
  border-radius: 14px !important;
  padding: 13px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: none !important;
  width: 100% !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-logout-icon {
  background: rgba(244,63,94,0.10) !important;
  border: 1px solid rgba(244,63,94,0.22) !important;
  color: #fda4af !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-logout-copy strong {
  color: #fda4af !important;
}

/* === 16.14  Settings frame / shell — flat surface, no extra chrome === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-shell,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-frame,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-shell,
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-frame {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* === 16.15  Panel content padding — blueprint .body spacing === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-content > section {
  padding: 0 18px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-content > section[data-ecm-panel="chat"] {
  padding: 0 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 17 — REAL BLUEPRINT STRUCTURE (mobilepass-real-structure)
   ═══════════════════════════════════════════════════════════════════════════
   Pairs with the new HTML structure inside #ec-mobile-shell:
     - topbar collapsed to slim status strip
     - each panel head replaced by .ec-mobile-app-top (.app-top.lg pattern)
     - vault & profil wrappers flattened
     - active chat head has avatar + meta + info, composer has icon buttons
   Also adds PRECISE selectors for JS-rendered class names that STEP 16
   missed via wildcards: .ecm-room, .ecm-chat-avatar, .ecm-chat-copy,
   .ecm-chat-preview, .ecm-chat-meta b/em, .ecm-contact-row family,
   .ecm-msg / .ecm-msg.mine.
   ═══════════════════════════════════════════════════════════════════════════ */

/* === 17.1  Topbar — slim status strip, mostly invisible === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-topbar.ecm-header {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 10px 18px 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-topbar.ecm-header .ec-mobile-status.ecm-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  color: #6ee7b7 !important;
  background: rgba(52,211,153,0.10) !important;
  border: 1px solid rgba(52,211,153,0.30) !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-topbar.ecm-header .ec-mobile-status-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 6px currentColor !important;
}

/* === 17.2  .ec-mobile-app-top — Blueprint .app-top.lg pattern === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 4px 14px !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 0 6px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top-title {
  flex: 1 !important;
  min-width: 0 !important;
  text-align: left !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  color: #e7ebff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top-action {
  flex: none !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 8px 24px -8px rgba(124,92,255,0.6) !important;
  font-size: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top-action svg {
  width: 16px !important;
  height: 16px !important;
  color: #fff !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top-icon {
  flex: none !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
  font-size: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top-icon svg {
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
}

/* === 17.3  .ec-mobile-pill — Blueprint pill system === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  flex: none !important;
  white-space: nowrap !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-pill.cyan {
  color: #67e8f9 !important;
  background: rgba(34,211,238,0.10) !important;
  border: 1px solid rgba(34,211,238,0.30) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-pill.violet {
  color: #c4b5fd !important;
  background: rgba(124,92,255,0.16) !important;
  border: 1px solid rgba(124,92,255,0.30) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-pill.emerald {
  color: #6ee7b7 !important;
  background: rgba(52,211,153,0.10) !important;
  border: 1px solid rgba(52,211,153,0.30) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-pill-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 6px currentColor !important;
  flex: none !important;
}

/* Search icon inside label */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-search .ec-mobile-search-icon {
  width: 16px !important;
  height: 16px !important;
  color: rgba(231,235,255,0.42) !important;
  flex: none !important;
}

/* === 17.4  Dynamic chat rows (.ecm-room.ecm-chat-row from buildMobileChatRow) === */
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-room.ecm-chat-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  width: 100% !important;
  cursor: pointer !important;
  color: #e7ebff !important;
  min-height: 64px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-room.ecm-chat-row:last-child {
  border-bottom: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-chat-avatar {
  flex: none !important;
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(124,92,255,0.30) !important;
  background: linear-gradient(135deg, var(--ecm-avatar-start, rgba(124,92,255,0.5)), var(--ecm-avatar-end, rgba(34,211,238,0.20))) !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  overflow: hidden !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-chat-avatar u {
  text-decoration: none !important;
  font-style: normal !important;
  line-height: 1 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-chat-avatar i {
  display: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-chat-copy {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-chat-copy strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
  letter-spacing: -0.005em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-chat-preview {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: rgba(231,235,255,0.66) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-chat-preview mark {
  display: inline-grid !important;
  place-items: center !important;
  background: transparent !important;
  color: #c4b5fd !important;
  font-size: 11px !important;
  flex: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-chat-preview span {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-chat-meta {
  flex: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-chat-meta b {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(231,235,255,0.42) !important;
  letter-spacing: 0.02em !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-chat-meta b[hidden] {
  display: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-chat-meta em {
  font-style: normal !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(124,92,255,0.5) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list .ecm-chat-meta em[hidden] {
  display: none !important;
}

/* === 17.5  Dynamic contact rows (.ecm-contact-row from buildMobileContactRow) === */
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 64px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-row:last-child {
  border-bottom: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-main {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-avatar {
  flex: none !important;
  position: relative !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(124,92,255,0.30) !important;
  background: linear-gradient(135deg, var(--ecm-avatar-start, rgba(124,92,255,0.5)), var(--ecm-avatar-end, rgba(34,211,238,0.20))) !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  overflow: hidden !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-avatar u {
  text-decoration: none !important;
  font-style: normal !important;
  line-height: 1 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-avatar i {
  display: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-copy {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-title-row strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
  letter-spacing: -0.005em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-trust-badge {
  display: inline-grid !important;
  place-items: center !important;
  width: 14px !important;
  height: 14px !important;
  color: #c4b5fd !important;
  flex: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-trust-badge svg {
  width: 14px !important;
  height: 14px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-copy small {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  color: #67e8f9 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-status {
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 10.5px !important;
  color: rgba(231,235,255,0.42) !important;
  letter-spacing: 0.04em !important;
  margin-top: 1px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-actions {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-icon-btn,
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-favorite-btn {
  flex: none !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(231,235,255,0.66) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-icon-btn svg,
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-favorite-btn svg {
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list .ecm-contact-favorite-btn[aria-pressed="true"] {
  color: #fcd34d !important;
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.25) !important;
}

/* === 17.6  Message bubbles — blueprint .bub.in / .bub.out === */
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-stream .ecm-msg {
  max-width: 78% !important;
  padding: 10px 13px !important;
  border-radius: 18px !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
  align-self: flex-start !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom-left-radius: 6px !important;
  color: #e7ebff !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-stream .ecm-msg.mine {
  align-self: flex-end !important;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
  border: 1px solid rgba(124,92,255,0.30) !important;
  border-bottom-left-radius: 18px !important;
  border-bottom-right-radius: 6px !important;
  color: #fff !important;
  box-shadow: 0 6px 18px -8px rgba(124,92,255,0.6) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-stream {
  display: flex !important;
  flex-direction: column !important;
  padding: 14px 0 18px !important;
  gap: 0 !important;
}

/* === 17.7  Active chat — new structure (back + avatar + meta + info) === */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  margin: 0 0 4px !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-back {
  flex: none !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  font-size: 0 !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-back svg {
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head-avatar {
  flex: none !important;
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, rgba(244,63,94,0.45), rgba(124,92,255,0.20)) !important;
  border: 1px solid rgba(244,63,94,0.30) !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head-avatar u {
  text-decoration: none !important;
  font-style: normal !important;
  line-height: 1 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-head-avatar i {
  display: block !important;
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #34d399 !important;
  box-shadow: 0 0 0 2px #0a0c18, 0 0 8px rgba(52,211,153,0.7) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-meta {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] #ec-mobile-chat-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] #ec-mobile-chat-sub {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10.5px !important;
  color: #6ee7b7 !important;
  letter-spacing: 0.04em !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-icon-btn {
  flex: none !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-icon-btn svg {
  width: 16px !important;
  height: 16px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-icon-btn[disabled] {
  opacity: 0.5 !important;
}

/* === 17.8  Composer — blueprint pattern (attach + field + mic icon) === */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer-attach {
  flex: none !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer-attach svg {
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer input#ec-mobile-msg-input {
  flex: 1 !important;
  height: 38px !important;
  padding: 0 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  color: #e7ebff !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  min-width: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer-send {
  flex: none !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%) !important;
  border: 0 !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  box-shadow: 0 6px 18px -6px rgba(34,211,238,0.55) !important;
  cursor: pointer !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-composer-send svg {
  width: 16px !important;
  height: 16px !important;
  color: #fff !important;
}

/* === 17.9  Override stale STEP 16 wildcards (kill child padding/border on rows) === */
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list > *,
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list > * {
  min-height: 0 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-chat-list [class*="avatar"],
html body.ec-mobile-shell-active #ec-mobile-shell #ec-mobile-contact-list [class*="avatar"] {
  background: linear-gradient(135deg, var(--ecm-avatar-start, rgba(124,92,255,0.5)), var(--ecm-avatar-end, rgba(34,211,238,0.20))) !important;
}

/* === 17.10  Chats panel — actions menu positioning under plus === */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-app-top {
  flex-wrap: wrap !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-action-menu {
  position: absolute !important;
  top: 100% !important;
  right: 4px !important;
  z-index: 10 !important;
  background: #11142a !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 200px !important;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.6) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-action-menu[hidden] {
  display: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chats"] .ec-mobile-chat-action-menu button {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #e7ebff !important;
  font-size: 13px !important;
  text-align: left !important;
  cursor: pointer !important;
}

/* === 17.11  Kontakte panel — contact-add-shell relative for dropdown === */
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-add-shell {
  position: relative !important;
  flex: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-add-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  z-index: 10 !important;
  background: #11142a !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 240px !important;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.6) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-add-menu[hidden] {
  display: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-add-menu button {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #e7ebff !important;
  font-size: 13px !important;
  text-align: left !important;
  cursor: pointer !important;
  width: 100% !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="rooms"] .ec-mobile-contact-add-menu button svg {
  width: 16px !important;
  height: 16px !important;
  color: #c4b5fd !important;
  flex: none !important;
}

/* === 17.12  Vault footnote — blueprint info row === */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-footnote {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.025) !important;
  margin-top: 12px !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-footnote-copy {
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 11px !important;
  color: rgba(231,235,255,0.66) !important;
  line-height: 1.45 !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-footnote-copy strong {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
  margin-bottom: 2px !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-footnote-icon {
  flex: none !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
  background: rgba(52,211,153,0.10) !important;
  color: #6ee7b7 !important;
  display: grid !important;
  place-items: center !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-vault-footnote-icon svg {
  width: 14px !important;
  height: 14px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 18 — BLUEPRINT REPLACE (mobilepass-blueprint-replace)
   ═══════════════════════════════════════════════════════════════════════════
   The actual blocker discovered after the audit: earlier rules use
   `body.ec-mobile-shell-active.auth-ready` (2 class selectors) which beats
   STEP 16/17's `body.ec-mobile-shell-active` (1 class selector). All STEP 17
   visual rules were losing the cascade on the real device.

   STEP 18 fixes this by matching both classes AND adding `[data-ecm-bp="1"]`
   on the shell element. Specificity now equals or exceeds the older rules
   and source order (STEP 18 is last) wins.

   Also implements Blueprint .row markup via .ecm-row companion classes
   added to existing setting/vault rows, with tone variants (violet/cyan/
   emerald/amber/rose) via [data-tone="…"].
   ═══════════════════════════════════════════════════════════════════════════ */

/* === 18.0  Design tokens scoped to the shell === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] {
  --bp-bg-0: #05060d;
  --bp-bg-1: #0a0c18;
  --bp-bg-2: #0e1122;
  --bp-surface: #11142a;
  --bp-surface-2: #161a36;
  --bp-line: rgba(255,255,255,0.06);
  --bp-line-2: rgba(255,255,255,0.10);
  --bp-text: #e7ebff;
  --bp-text-dim: rgba(231,235,255,0.66);
  --bp-text-mute: rgba(231,235,255,0.42);
  --bp-text-faint: rgba(231,235,255,0.28);
  --bp-violet: #7c5cff;
  --bp-violet-2: #a78bfa;
  --bp-violet-soft: rgba(124,92,255,0.16);
  --bp-cyan: #22d3ee;
  --bp-cyan-2: #67e8f9;
  --bp-emerald: #34d399;
  --bp-emerald-2: #6ee7b7;
  --bp-rose: #f43f5e;
  --bp-amber: #f59e0b;
  --bp-grad-brand: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%);
  --bp-grad-violet: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  --bp-grad-cyan: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%);
  --bp-font-mono: "JetBrains Mono", ui-monospace, monospace;
}

/* === 18.1  App frame — radial screen-glow === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-app {
  position: relative !important;
  background:
    radial-gradient(420px 280px at 50% 0%, rgba(124,92,255,0.18), transparent 60%),
    radial-gradient(420px 320px at 50% 100%, rgba(34,211,238,0.10), transparent 60%),
    linear-gradient(180deg, #0a0c18 0%, #05060d 100%) !important;
  isolation: isolate !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-bg {
  background: transparent !important;
  opacity: 0 !important;
  display: none !important;
}

/* === 18.2  Topbar — tiny status pill flush right === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-topbar.ecm-header {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 10px 18px 0 !important;
  min-height: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-topbar .ec-mobile-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-family: var(--bp-font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  color: #6ee7b7 !important;
  background: rgba(52,211,153,0.10) !important;
  border: 1px solid rgba(52,211,153,0.30) !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-status-dot {
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 6px currentColor !important;
}

/* === 18.3  Panel headers — .ec-mobile-app-top === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-app-top {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 4px 14px !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 0 6px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-app-top-title {
  flex: 1 !important;
  min-width: 0 !important;
  text-align: left !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  color: #e7ebff !important;
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-app-top-action {
  flex: none !important;
  width: 34px !important; height: 34px !important;
  border-radius: 11px !important;
  border: 0 !important;
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  padding: 0 !important;
  font-size: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 8px 24px -8px rgba(124,92,255,0.6) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-app-top-action svg {
  width: 16px !important; height: 16px !important;
  color: #fff !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-app-top-icon {
  flex: none !important;
  width: 34px !important; height: 34px !important;
  border-radius: 11px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  display: grid !important; place-items: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  cursor: pointer !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-app-top-icon svg {
  width: 16px !important; height: 16px !important;
  color: currentColor !important;
}

/* === 18.4  Pills === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-family: var(--bp-font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  flex: none !important;
  white-space: nowrap !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-pill.cyan {
  color: #67e8f9 !important;
  background: rgba(34,211,238,0.10) !important;
  border: 1px solid rgba(34,211,238,0.30) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-pill.violet {
  color: #c4b5fd !important;
  background: rgba(124,92,255,0.16) !important;
  border: 1px solid rgba(124,92,255,0.30) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-pill.emerald {
  color: #6ee7b7 !important;
  background: rgba(52,211,153,0.10) !important;
  border: 1px solid rgba(52,211,153,0.30) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-pill-dot {
  width: 5px !important; height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 6px currentColor !important;
  flex: none !important;
}

/* === 18.5  Search field === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-search.ecm-search {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  height: 40px !important;
  padding: 0 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  margin: 0 0 10px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-search input {
  background: transparent !important;
  border: 0 !important;
  color: #e7ebff !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  height: 100% !important;
  flex: 1 !important;
  min-width: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-search input::placeholder {
  color: rgba(231,235,255,0.42) !important;
  font-weight: 500 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-search .ec-mobile-search-icon,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-search .ec-mobile-contact-search-icon,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-search .ec-mobile-vault-search-icon {
  width: 16px !important; height: 16px !important;
  color: rgba(231,235,255,0.42) !important;
  flex: none !important;
}

/* === 18.6  Filter chips — Blueprint .seg === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-chat-filters,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-contact-filters {
  display: flex !important;
  padding: 4px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  gap: 2px !important;
  margin: 0 0 10px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-chat-filters::-webkit-scrollbar,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-contact-filters::-webkit-scrollbar { display: none !important; }
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-chat-filters button,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-contact-filters button {
  flex: 1 !important;
  padding: 8px 10px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: rgba(231,235,255,0.66) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  white-space: nowrap !important;
  letter-spacing: -0.005em !important;
  cursor: pointer !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-chat-filters button.active,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-contact-filters button.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(124,92,255,0.30), rgba(99,102,241,0.20)) !important;
  box-shadow: inset 0 0 0 1px rgba(124,92,255,0.35) !important;
}

/* === 18.7  Bottom-nav — Blueprint .tabbar === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-bottom-nav {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  padding: 10px 12px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  background: linear-gradient(180deg, rgba(10,12,24,0.4), rgba(5,6,16,0.85)) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: none !important;
  gap: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-bottom-nav button {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 3px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: rgba(231,235,255,0.28) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  padding: 4px 0 !important;
  min-height: 50px !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-bottom-nav button .ec-mobile-nav-icon {
  display: grid !important;
  place-items: center !important;
  width: 22px !important; height: 22px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: currentColor !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-bottom-nav button .ec-mobile-nav-icon svg {
  width: 20px !important; height: 20px !important;
  display: block !important;
  color: currentColor !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-bottom-nav button.active {
  color: #c4b5fd !important;
  background: transparent !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-bottom-nav button.active .ec-mobile-nav-icon svg {
  filter: drop-shadow(0 0 8px rgba(167,139,250,0.7)) !important;
}

/* === 18.8  .ecm-row — Blueprint .row pattern with tone variants === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  margin: 0 0 8px !important;
  min-height: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  color: #e7ebff !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row-ico {
  flex: none !important;
  width: 34px !important; height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.22) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: none !important;
  padding: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row-ico svg {
  width: 16px !important; height: 16px !important;
  color: currentColor !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row[data-tone="cyan"] .ecm-row-ico {
  background: rgba(34,211,238,0.10) !important;
  border-color: rgba(34,211,238,0.22) !important;
  color: #67e8f9 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row[data-tone="emerald"] .ecm-row-ico {
  background: rgba(52,211,153,0.10) !important;
  border-color: rgba(52,211,153,0.22) !important;
  color: #6ee7b7 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row[data-tone="amber"] .ecm-row-ico {
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.22) !important;
  color: #fcd34d !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row[data-tone="rose"] .ecm-row-ico {
  background: rgba(244,63,94,0.10) !important;
  border-color: rgba(244,63,94,0.22) !important;
  color: #fda4af !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row-meta {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  grid-template-columns: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row-name {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: #e7ebff !important;
  display: block !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row-desc {
  font-size: 11.5px !important;
  color: rgba(231,235,255,0.66) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  display: block !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row-chev {
  color: rgba(231,235,255,0.28) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 16px !important; height: 16px !important;
  flex: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row-chev svg {
  width: 14px !important; height: 14px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row-lock {
  display: grid !important;
  place-items: center !important;
  width: 16px !important; height: 16px !important;
  flex: none !important;
  color: #c4b5fd !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row[data-tone="cyan"] .ecm-row-lock { color: #67e8f9 !important; }
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row[data-tone="emerald"] .ecm-row-lock { color: #6ee7b7 !important; }
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row[data-tone="amber"] .ecm-row-lock { color: #fcd34d !important; }
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row[data-tone="rose"] .ecm-row-lock { color: #fda4af !important; }
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-row-lock svg {
  width: 14px !important; height: 14px !important;
}

/* === 18.9  Profile card — Blueprint identity card === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-profile-card {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 14px !important;
  background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(34,211,238,0.04)) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  border-radius: 16px !important;
  margin: 0 0 12px !important;
  box-shadow: none !important;
  min-height: 0 !important;
  grid-template-columns: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-profile-card > span:first-child {
  flex: none !important;
  width: 44px !important; height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #7c5cff, #6366f1) !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 6px 18px -6px rgba(124,92,255,0.5) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-profile-card > div {
  flex: 1 !important;
  min-width: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-profile-card > div strong {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #e7ebff !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-profile-card > div small {
  display: block !important;
  font-size: 11px !important;
  color: rgba(231,235,255,0.66) !important;
  font-family: var(--bp-font-mono) !important;
  letter-spacing: 0.04em !important;
  margin-top: 2px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-profile-card > b {
  flex: none !important;
  font-family: var(--bp-font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  color: #6ee7b7 !important;
  background: rgba(52,211,153,0.10) !important;
  border: 1px solid rgba(52,211,153,0.30) !important;
  text-transform: uppercase !important;
}

/* === 18.10  Vault summary card === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-summary {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(34,211,238,0.06)) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  border-radius: 16px !important;
  margin: 0 0 12px !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-summary-icon {
  flex: none !important;
  width: 34px !important; height: 34px !important;
  border-radius: 10px !important;
  background: rgba(124,92,255,0.18) !important;
  color: #c4b5fd !important;
  border: 1px solid rgba(124,92,255,0.22) !important;
  display: grid !important;
  place-items: center !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-summary-icon svg {
  width: 16px !important; height: 16px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-summary > div {
  flex: 1 !important;
  min-width: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-summary > div strong {
  display: block !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-summary > div small {
  display: block !important;
  font-size: 11.5px !important;
  color: rgba(231,235,255,0.66) !important;
  margin-top: 2px !important;
  line-height: 1.4 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-summary-badge {
  flex: none !important;
  font-family: var(--bp-font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  padding: 4px 8px !important;
  border-radius: 999px !important;
  color: #6ee7b7 !important;
  background: rgba(52,211,153,0.10) !important;
  border: 1px solid rgba(52,211,153,0.30) !important;
  text-transform: uppercase !important;
}

/* === 18.11  Group eyebrows === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-contacts-eyebrow,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-eyebrow,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-eyebrow {
  font-family: var(--bp-font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(231,235,255,0.42) !important;
  padding: 14px 4px 8px !important;
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
}

/* === 18.12  Logout — danger row === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-logout {
  margin-top: 14px !important;
  background: rgba(244,63,94,0.06) !important;
  border: 1px solid rgba(244,63,94,0.25) !important;
  border-radius: 14px !important;
  padding: 13px 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  box-shadow: none !important;
  width: 100% !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-logout .ec-mobile-settings-logout-icon {
  background: rgba(244,63,94,0.10) !important;
  border-color: rgba(244,63,94,0.22) !important;
  color: #fda4af !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-logout .ec-mobile-settings-logout-copy strong,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-logout .ec-mobile-setting-title {
  color: #fda4af !important;
}

/* === 18.13  Vault footnote === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-footnote {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.025) !important;
  margin-top: 12px !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-footnote-copy {
  flex: 1 !important;
  min-width: 0 !important;
  font-size: 11px !important;
  color: rgba(231,235,255,0.66) !important;
  line-height: 1.45 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-footnote-copy strong {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
  margin-bottom: 2px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-footnote-icon {
  flex: none !important;
  width: 28px !important; height: 28px !important;
  border-radius: 9px !important;
  background: rgba(52,211,153,0.10) !important;
  color: #6ee7b7 !important;
  display: grid !important;
  place-items: center !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-footnote-icon svg {
  width: 14px !important; height: 14px !important;
}

/* === 18.14  Dynamic chat rows — .ecm-room.ecm-chat-row === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-list .ecm-room.ecm-chat-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
  width: 100% !important;
  cursor: pointer !important;
  color: #e7ebff !important;
  min-height: 64px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-list .ecm-room.ecm-chat-row:last-child {
  border-bottom: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-list .ecm-chat-avatar {
  flex: none !important;
  position: relative !important;
  width: 44px !important; height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(124,92,255,0.30) !important;
  background: linear-gradient(135deg, var(--ecm-avatar-start, rgba(124,92,255,0.5)), var(--ecm-avatar-end, rgba(34,211,238,0.20))) !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  overflow: hidden !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-list .ecm-chat-avatar u {
  text-decoration: none !important;
  font-style: normal !important;
  line-height: 1 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-list .ecm-chat-avatar i {
  display: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-list .ecm-chat-copy {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-list .ecm-chat-copy strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
  letter-spacing: -0.005em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-list .ecm-chat-preview {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 12px !important;
  color: rgba(231,235,255,0.66) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-list .ecm-chat-meta {
  flex: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 6px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-list .ecm-chat-meta b {
  font-family: var(--bp-font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(231,235,255,0.42) !important;
  letter-spacing: 0.02em !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-list .ecm-chat-meta b[hidden],
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-list .ecm-chat-meta em[hidden] {
  display: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-list .ecm-chat-meta em {
  font-style: normal !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(124,92,255,0.5) !important;
}

/* === 18.15  Dynamic contact rows — .ecm-contact-row === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 4px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 64px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-row:last-child {
  border-bottom: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-main {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-avatar {
  flex: none !important;
  position: relative !important;
  width: 44px !important; height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(124,92,255,0.30) !important;
  background: linear-gradient(135deg, var(--ecm-avatar-start, rgba(124,92,255,0.5)), var(--ecm-avatar-end, rgba(34,211,238,0.20))) !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  overflow: hidden !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-avatar u {
  text-decoration: none !important;
  font-style: normal !important;
  line-height: 1 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-avatar i {
  display: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-copy {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-title-row strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-trust-badge {
  display: inline-grid !important;
  place-items: center !important;
  width: 14px !important; height: 14px !important;
  color: #c4b5fd !important;
  flex: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-copy small {
  font-family: var(--bp-font-mono) !important;
  font-size: 11px !important;
  color: #67e8f9 !important;
  letter-spacing: 0.04em !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-status {
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 10.5px !important;
  color: rgba(231,235,255,0.42) !important;
  letter-spacing: 0.04em !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-actions {
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-icon-btn,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-favorite-btn {
  flex: none !important;
  width: 32px !important; height: 32px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: rgba(231,235,255,0.66) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  cursor: pointer !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-icon-btn svg,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-contact-list .ecm-contact-favorite-btn svg {
  width: 14px !important; height: 14px !important;
  color: currentColor !important;
}

/* === 18.16  Message bubbles — Blueprint .bub.in / .bub.out === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-stream {
  display: flex !important;
  flex-direction: column !important;
  padding: 14px 0 18px !important;
  gap: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-stream .ecm-msg {
  max-width: 78% !important;
  padding: 10px 13px !important;
  border-radius: 18px 18px 18px 6px !important;
  font-size: 13.5px !important;
  line-height: 1.4 !important;
  margin-bottom: 10px !important;
  align-self: flex-start !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #e7ebff !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-chat-stream .ecm-msg.mine {
  align-self: flex-end !important;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
  border: 1px solid rgba(124,92,255,0.30) !important;
  border-radius: 18px 18px 6px 18px !important;
  color: #fff !important;
  box-shadow: 0 6px 18px -8px rgba(124,92,255,0.6) !important;
}

/* === 18.17  Active chat head + composer === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-chat-head {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  margin: 0 0 4px !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-back {
  flex: none !important;
  width: 34px !important; height: 34px !important;
  border-radius: 11px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-back svg {
  width: 16px !important; height: 16px !important;
  color: currentColor !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-chat-head-avatar {
  flex: none !important;
  position: relative !important;
  width: 36px !important; height: 36px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, rgba(244,63,94,0.45), rgba(124,92,255,0.20)) !important;
  border: 1px solid rgba(244,63,94,0.30) !important;
  display: grid !important;
  place-items: center !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-chat-head-avatar u {
  text-decoration: none !important;
  font-style: normal !important;
  line-height: 1 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-chat-head-avatar i {
  display: block !important;
  position: absolute !important;
  right: -2px !important; bottom: -2px !important;
  width: 10px !important; height: 10px !important;
  border-radius: 50% !important;
  background: #34d399 !important;
  box-shadow: 0 0 0 2px #0a0c18, 0 0 8px rgba(52,211,153,0.7) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-chat-meta {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] #ec-mobile-chat-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] #ec-mobile-chat-sub {
  font-family: var(--bp-font-mono) !important;
  font-size: 10.5px !important;
  color: #6ee7b7 !important;
  letter-spacing: 0.04em !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-icon-btn {
  flex: none !important;
  width: 34px !important; height: 34px !important;
  border-radius: 11px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-icon-btn svg {
  width: 16px !important; height: 16px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-composer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 0 calc(14px + env(safe-area-inset-bottom, 0px)) !important;
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-composer .ec-mobile-composer-attach {
  flex: none !important;
  width: 38px !important; height: 38px !important;
  border-radius: 12px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  font-size: 0 !important;
  cursor: pointer !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-composer .ec-mobile-composer-attach svg {
  width: 16px !important; height: 16px !important;
  color: currentColor !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-composer input#ec-mobile-msg-input {
  flex: 1 !important;
  height: 38px !important;
  padding: 0 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  color: #e7ebff !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  min-width: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-composer-send,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-composer .primary {
  flex: none !important;
  width: 38px !important; height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%) !important;
  border: 0 !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  font-size: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px -6px rgba(34,211,238,0.55) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-composer-send svg,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-composer .primary svg {
  width: 16px !important; height: 16px !important;
  color: #fff !important;
}

/* === 18.18  Panel content side padding === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-content > section {
  padding: 0 18px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-content > section[data-ecm-panel="chat"] {
  padding: 0 14px !important;
}

/* === 18.19  Add-menu dropdowns positioning === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ec-mobile-contact-add-shell {
  position: relative !important;
  flex: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ec-mobile-contact-add-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  right: 0 !important;
  z-index: 10 !important;
  background: #11142a !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 240px !important;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.6) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ec-mobile-contact-add-menu[hidden] {
  display: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ec-mobile-contact-add-menu button {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #e7ebff !important;
  font-size: 13px !important;
  text-align: left !important;
  cursor: pointer !important;
  width: 100% !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ec-mobile-contact-add-menu button svg {
  width: 16px !important; height: 16px !important;
  color: #c4b5fd !important;
  flex: none !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ec-mobile-app-top {
  flex-wrap: wrap !important;
  position: relative !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ec-mobile-chat-action-menu {
  position: absolute !important;
  top: calc(100% - 6px) !important;
  right: 4px !important;
  z-index: 10 !important;
  background: #11142a !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 200px !important;
  box-shadow: 0 12px 40px -12px rgba(0,0,0,0.6) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ec-mobile-chat-action-menu[hidden] {
  display: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ec-mobile-chat-action-menu button {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #e7ebff !important;
  font-size: 13px !important;
  text-align: left !important;
  cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 19 — SUB-SCREENS BLUEPRINT STYLE (mobilepass-blueprint-screens)
   ═══════════════════════════════════════════════════════════════════════════
   Styles the dynamically-rendered sub-screens reached via openMobileProfileSub(kind):
     - Räume, Seed-Phrase, Identität, Ghost-Modus, Lesebestätigungen,
       Screenshot-Schutz, Medien-Schutz, Benachrichtigungen, Speicher & Daten,
       Geräte, Hilfe & Feedback, Datenschutz, Blockierte Nutzer, Sicherheit,
       Aura, Abos, Panik-Knopf, Panic-Account, Tarnmodus, Notfall.
   These render generic markup via mobileProfileRow() / mobileProfileCard()
   into #ec-mobile-profile-sub-content. STEP 19 styles that markup
   Blueprint-ish (cards as surfaces, rows with violet-soft icons, toggles as
   .switch em pill, mono inline title icons, etc.).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inline title icon for Vault/Einstellungen (matches Blueprint Screen 05/06 title pattern) */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-app-top-title-icon {
  flex: none !important;
  width: 22px !important; height: 22px !important;
  color: #a78bfa !important;
  margin-right: 4px !important;
  vertical-align: -3px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-app-top-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* === 19.1  Sub-page container — frame === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-subpage {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
  background: transparent !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-subhead {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 6px 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  margin: 0 0 6px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-subhead .ec-mobile-back {
  flex: none !important;
  width: 34px !important; height: 34px !important;
  border-radius: 11px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  font-size: 18px !important;
  padding: 0 !important;
  box-shadow: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-subhead .ec-mobile-settings-head-copy {
  flex: 1 !important;
  min-width: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-subhead h1 {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #e7ebff !important;
  margin: 0 !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-subhead p {
  font-size: 11.5px !important;
  color: rgba(231,235,255,0.66) !important;
  margin: 3px 0 0 !important;
  font-family: var(--bp-font-mono) !important;
  letter-spacing: 0.04em !important;
}

/* === 19.2  Sub-content container === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] #ec-mobile-profile-sub-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 0 !important;
}

/* === 19.3  Sub-card — Blueprint .row-card / .notice surface === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 14px !important;
  background: linear-gradient(135deg, rgba(124,92,255,0.10), rgba(34,211,238,0.04)) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  margin: 0 0 4px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-card strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #e7ebff !important;
  letter-spacing: -0.005em !important;
  display: block !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-card small {
  font-size: 12px !important;
  color: rgba(231,235,255,0.66) !important;
  line-height: 1.45 !important;
  display: block !important;
}

/* === 19.4  Sub-row — Blueprint .row pattern, emoji icon in violet-soft box === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  margin: 0 !important;
  min-height: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  color: #e7ebff !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-row > .ec-mobile-setting-icon,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-row > span:first-child {
  flex: none !important;
  width: 34px !important; height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.22) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-row > div,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-row > .ec-mobile-setting-copy {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  grid-template-columns: none !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-row > div strong,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-row > .ec-mobile-setting-copy strong {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
  letter-spacing: -0.005em !important;
  display: block !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-row > div small,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-row > .ec-mobile-setting-copy small {
  font-size: 11.5px !important;
  color: rgba(231,235,255,0.66) !important;
  line-height: 1.4 !important;
  font-weight: 500 !important;
  display: block !important;
  margin: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-row > .ec-mobile-setting-chevron {
  color: rgba(231,235,255,0.28) !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  width: 16px !important;
  text-align: center !important;
}

/* === 19.5  Toggle switch — Blueprint .toggle === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-setting-row.switch {
  position: relative !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-setting-row.switch em {
  flex: none !important;
  width: 40px !important; height: 24px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  position: relative !important;
  display: block !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-setting-row.switch em::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  transition: all .18s ease !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-setting-row.switch.on em {
  background: linear-gradient(135deg, #34d399, #22d3ee) !important;
  border-color: rgba(52,211,153,0.50) !important;
  box-shadow: 0 0 14px rgba(52,211,153,0.40) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-setting-row.switch.on em::after {
  left: 18px !important;
}

/* === 19.6  Sub-row press feedback === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-row:active,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-setting-row.switch:active {
  background: rgba(255,255,255,0.045) !important;
  transform: scale(0.997) !important;
}

/* === 19.7  Inline emoji icons inside sub-rows — keep visible === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-sub-row > .ec-mobile-setting-icon {
  font-size: 17px !important;
  font-weight: 500 !important;
}

/* === 20.0  Real blueprint shell structure === */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] {
  color: #e7ebff !important;
  background:
    radial-gradient(620px 420px at 50% -10%, rgba(124,92,255,0.22), transparent 62%),
    radial-gradient(520px 420px at 50% 110%, rgba(34,211,238,0.11), transparent 62%),
    #05060d !important;
  overflow: hidden !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-app {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100svh !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background:
    linear-gradient(180deg, rgba(10,12,24,0.98) 0%, rgba(5,6,16,1) 100%) !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-screen-glow {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(420px 280px at 50% 0%, rgba(124,92,255,0.20), transparent 60%),
    radial-gradient(420px 320px at 50% 100%, rgba(34,211,238,0.10), transparent 60%) !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-topbar.ecm-header.ec-mobile-status-bar {
  position: relative !important;
  z-index: 1 !important;
  flex: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 0 !important;
  padding: max(14px, env(safe-area-inset-top, 0px)) 22px 8px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #fff !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-status-time {
  flex: none !important;
  color: #fff !important;
  line-height: 1 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-status-right,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-status-icons {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-status-icons svg {
  width: 14px !important;
  height: 14px !important;
  color: #fff !important;
  display: block !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-topbar .ec-mobile-status {
  min-height: 0 !important;
  height: 24px !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 10px !important;
  line-height: 1 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-content.ecm-main {
  position: relative !important;
  z-index: 1 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-panel.ecm-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 0 18px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-panel.ecm-panel[hidden] {
  display: none !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-panel.ecm-panel.active {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"].ec-mobile-panel.active {
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  padding: 0 14px !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="more"].ec-mobile-panel.active {
  grid-template-rows: minmax(0, 1fr) !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-body,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-panel-body {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  position: relative !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-body-scroll,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-panel-scroll {
  height: 100% !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 0 0 18px !important;
  scrollbar-width: none !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-body-scroll::-webkit-scrollbar,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ecm-panel-scroll::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-app-top {
  flex: none !important;
  padding: 10px 0 14px !important;
  margin: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-shell,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-shell,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-vault-frame,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-frame {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-frame.is-subpage {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
  padding-bottom: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-settings-frame.is-subpage > .ec-mobile-settings-subpage {
  min-height: 0 !important;
  height: 100% !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-bottom-nav.ecm-bottom-nav {
  position: relative !important;
  z-index: 1 !important;
  flex: none !important;
  margin: 0 !important;
  padding: 10px 12px calc(22px + env(safe-area-inset-bottom, 0px)) !important;
}

html body.ec-mobile-shell-active.auth-ready #aura-fab {
  display: none !important;
  pointer-events: none !important;
}

html body.ec-mobile-shell-active.auth-ready #toast.show {
  bottom: calc(150px + env(safe-area-inset-bottom, 0px)) !important;
  pointer-events: none !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"].ec-mobile-panel .ec-mobile-app-top .ec-mobile-contact-add-shell > button.ec-mobile-contact-add-btn.ec-mobile-app-top-action {
  flex: none !important;
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  font-size: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] *,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] *::before,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] *::after {
  box-sizing: border-box !important;
}

@media (min-width: 769px) {
  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-app {
    max-width: 430px !important;
    margin: 0 auto !important;
    box-shadow:
      0 0 0 1px rgba(124,92,255,0.22),
      0 30px 80px -34px rgba(124,92,255,0.55) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — Group/Chat info modal (room-options-modal) fixes
   ═══════════════════════════════════════════════════════════════════════════
   Real-iPhone testing showed:
     A) "Nachrichten bleiben im Chat" slider card text too large; the visual
        slider/dots are pointer-events:none (presentation only) — actual
        selection happens via the value button → <select>. Shrink type so
        nothing wraps awkwardly inside the narrow iPhone modal.
     B) "Chat löschen" danger row was visually oversized vs the neutral
        rows on mobile because the desktop CSS uses 14px / 700 / 14px+16px
        padding. We re-anchor it to the same compact row geometry as the
        other ec-gm-row buttons so danger rows match neutral rows.
   Both scoped to the existing room-options-modal selector so desktop is
   untouched. */
@media (max-width: 480px) {
  #room-options-modal .ec-gm-modal .ec-gm-autodelete-head {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }
  #room-options-modal .ec-gm-modal .ec-gm-autodelete-icon {
    width: 34px !important;
    height: 34px !important;
    font-size: 16px !important;
  }
  #room-options-modal .ec-gm-modal .ec-gm-autodelete-title {
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  #room-options-modal .ec-gm-modal .ec-gm-autodelete-sub {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  #room-options-modal .ec-gm-modal .ec-gm-autodelete-value {
    padding: 5px 10px !important;
    font-size: 12px !important;
  }
  #room-options-modal .ec-gm-modal .ec-gm-autodelete-marks {
    font-size: 10.5px !important;
  }
  #room-options-modal .ec-gm-modal #room-autodelete-select {
    font-size: 14px !important;
    padding: 12px !important;
    min-height: 44px !important;
  }
  /* All action rows — including the danger row — match a single compact
     iPhone-friendly row geometry. Override !important rules from
     desktop-overrides.css for ec-gm-row--danger so the delete row stops
     being visually oversized vs the neutral rows above it. */
  #room-options-modal .ec-gm-modal .ec-gm-row {
    grid-template-columns: 22px minmax(0, 1fr) 12px !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    border-radius: 14px !important;
  }
  #room-options-modal .ec-gm-modal .ec-gm-row-icon {
    font-size: 16px !important;
  }
  #room-options-modal .ec-gm-modal .ec-gm-row-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
  #room-options-modal .ec-gm-modal .ec-gm-row--danger {
    padding: 12px 14px !important;
    font-size: 13.5px !important;
    border-radius: 14px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE — Chat stream scroll bottom + last-message safety padding
   ═══════════════════════════════════════════════════════════════════════════
   Real-iPhone testing showed the last message can sit too close to (or get
   visually clipped by) the composer. The stream already overflows correctly,
   but the bottom padding inside the stream is only 16px which leaves no
   breathing room for the composer's drop-shadow and the iOS home-indicator
   safe area. We increase it to a comfortable, viewport-aware value. */
@media (max-width: 768px) {
  body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="chat"] .ec-mobile-chat-stream.ecm-chat-stream {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Mobile profile/settings stability and local display preferences */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-theme="dark"],
body.ec-mobile-shell-active #ec-mobile-shell:not([data-ecm-theme]) {
  --ecm-mobile-theme-bg: #05060d;
  --ecm-mobile-theme-bg2: #0a0c18;
  --ecm-mobile-theme-surface: rgba(17, 20, 42, 0.94);
  --ecm-mobile-theme-surface2: rgba(22, 26, 54, 0.94);
  --ecm-mobile-theme-border: rgba(255, 255, 255, 0.10);
  --ecm-mobile-theme-text: #e7ebff;
  --ecm-mobile-theme-muted: rgba(231, 235, 255, 0.66);
  --ecm-mobile-theme-accent: #7c5cff;
  --ecm-mobile-theme-accent2: #22d3ee;
}

body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-theme="cyber-dark"] {
  --ecm-mobile-theme-bg: #040714;
  --ecm-mobile-theme-bg2: #080d24;
  --ecm-mobile-theme-surface: rgba(11, 17, 39, 0.96);
  --ecm-mobile-theme-surface2: rgba(18, 22, 54, 0.95);
  --ecm-mobile-theme-border: rgba(69, 231, 255, 0.24);
  --ecm-mobile-theme-text: #f6fbff;
  --ecm-mobile-theme-muted: rgba(178, 207, 231, 0.78);
  --ecm-mobile-theme-accent: #8a5bff;
  --ecm-mobile-theme-accent2: #39e7ff;
}

body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-theme="aurora"] {
  --ecm-mobile-theme-bg: #080b1a;
  --ecm-mobile-theme-bg2: #101737;
  --ecm-mobile-theme-surface: rgba(17, 20, 49, 0.95);
  --ecm-mobile-theme-surface2: rgba(24, 28, 68, 0.94);
  --ecm-mobile-theme-border: rgba(168, 85, 247, 0.27);
  --ecm-mobile-theme-text: #f1eaff;
  --ecm-mobile-theme-muted: rgba(202, 188, 236, 0.76);
  --ecm-mobile-theme-accent: #a855f7;
  --ecm-mobile-theme-accent2: #06b6d4;
}

body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-theme="midnight"] {
  --ecm-mobile-theme-bg: #07101d;
  --ecm-mobile-theme-bg2: #0f1a2a;
  --ecm-mobile-theme-surface: rgba(13, 22, 34, 0.96);
  --ecm-mobile-theme-surface2: rgba(21, 32, 47, 0.94);
  --ecm-mobile-theme-border: rgba(88, 166, 255, 0.25);
  --ecm-mobile-theme-text: #edf6ff;
  --ecm-mobile-theme-muted: rgba(183, 203, 219, 0.76);
  --ecm-mobile-theme-accent: #58a6ff;
  --ecm-mobile-theme-accent2: #3fb950;
}

body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-theme="light"] {
  --ecm-mobile-theme-bg: #edf1fb;
  --ecm-mobile-theme-bg2: #f8fbff;
  --ecm-mobile-theme-surface: rgba(255, 255, 255, 0.9);
  --ecm-mobile-theme-surface2: rgba(246, 248, 255, 0.92);
  --ecm-mobile-theme-border: rgba(72, 86, 143, 0.18);
  --ecm-mobile-theme-text: #182033;
  --ecm-mobile-theme-muted: rgba(62, 75, 104, 0.74);
  --ecm-mobile-theme-accent: #7258eb;
  --ecm-mobile-theme-accent2: #168f93;
}

body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-font-size="small"] {
  --ecm-mobile-font-scale: 0.94;
}

body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-font-size="medium"],
body.ec-mobile-shell-active #ec-mobile-shell:not([data-ecm-font-size]) {
  --ecm-mobile-font-scale: 1;
}

body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-font-size="large"] {
  --ecm-mobile-font-scale: 1.08;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-app {
  background:
    radial-gradient(circle at 8% 0%, rgba(57, 231, 255, 0.12), transparent 28%),
    radial-gradient(circle at 90% 4%, rgba(138, 91, 255, 0.14), transparent 32%),
    linear-gradient(180deg, var(--ecm-mobile-theme-bg2), var(--ecm-mobile-theme-bg)) !important;
  color: var(--ecm-mobile-theme-text) !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"].ec-mobile-panel.active {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  padding: 0 12px !important;
  overflow: hidden !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-shell {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   ELITECRYPT MOBILE 2V — DESIGN-SYSTEM TOKEN LAYER   (Block 2 · Phase 1)
   ----------------------------------------------------------------------------
   Source of truth : "EliteCrypt Mobile System.html" (Mobile 2V blueprint) —
                     :root token block, sections 01 (Design Tokens) + 12 (Handoff).
   Prefix          : --ecm-2v-*  — distinct from the existing token systems
                     (--ecm-mobile-theme-* · --ecm-mobile-font-scale · --ecm-avatar-*);
                     verified collision-free.
   Scope           : body.ec-mobile-shell-active #ec-mobile-shell  ONLY.
                     Tokens are SET on #ec-mobile-shell and inherit only to its
                     descendants. #ec-claude-shell-final (desktop) and
                     #ec-admin-elite-shell (locked Admin DB Panel) are SIBLINGS,
                     not descendants, so they can never receive these tokens.
                     => absolutely zero style leakage.
   Phase-1 effect  : DEFINITIONS ONLY. Nothing consumes --ecm-2v-* yet, so this
                     introduces ZERO visual change. Components adopt these tokens
                     from Phase 2 onward (map first, then consume).
   Theme note      : this is the canonical 2V palette (dark · violet+cyan). It
                     coexists with the 5-theme --ecm-mobile-theme-* system; whether
                     components read the fixed 2V tokens or the theme tokens is a
                     Phase-2 decision, intentionally NOT made here.
   ════════════════════════════════════════════════════════════════════════════ */
body.ec-mobile-shell-active #ec-mobile-shell {
  /* — Backgrounds — (blueprint --bg-0 .. --bg-2) */
  --ecm-2v-bg-0: #05060d;
  --ecm-2v-bg-1: #0a0c18;
  --ecm-2v-bg-2: #0e1122;

  /* — Surfaces — (blueprint --surface .. --surface-3) */
  --ecm-2v-surface:   #11142a;
  --ecm-2v-surface-2: #161a36;
  --ecm-2v-surface-3: #1c2148;

  /* — Lines / hairlines — (blueprint --line .. --line-3) */
  --ecm-2v-line:   rgba(255, 255, 255, 0.06);
  --ecm-2v-line-2: rgba(255, 255, 255, 0.10);
  --ecm-2v-line-3: rgba(255, 255, 255, 0.16);

  /* — Text — (blueprint --text .. --text-faint) */
  --ecm-2v-text:       #e7ebff;
  --ecm-2v-text-dim:   rgba(231, 235, 255, 0.66);
  --ecm-2v-text-mute:  rgba(231, 235, 255, 0.42);
  --ecm-2v-text-faint: rgba(231, 235, 255, 0.28);

  /* — Brand accents — (blueprint --violet / --cyan / --emerald / --rose / --amber) */
  --ecm-2v-violet:      #7c5cff;
  --ecm-2v-violet-2:    #a78bfa;
  --ecm-2v-violet-soft: rgba(124, 92, 255, 0.16);
  --ecm-2v-cyan:        #22d3ee;
  --ecm-2v-cyan-2:      #67e8f9;
  --ecm-2v-cyan-soft:   rgba(34, 211, 238, 0.14);
  --ecm-2v-emerald:     #34d399;
  --ecm-2v-emerald-2:   #6ee7b7;
  --ecm-2v-rose:        #f43f5e;
  --ecm-2v-rose-2:      #fb7185;
  --ecm-2v-amber:       #f59e0b;

  /* — Gradients — (blueprint --grad-*) */
  --ecm-2v-grad-brand:  linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%);
  --ecm-2v-grad-violet: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  --ecm-2v-grad-cyan:   linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%);
  --ecm-2v-grad-text:   linear-gradient(90deg, #a78bfa 0%, #22d3ee 100%);

  /* — Glows / focus rings — (blueprint --glow-*) */
  --ecm-2v-glow-violet: 0 0 0 1px rgba(124, 92, 255, 0.35), 0 12px 40px -12px rgba(124, 92, 255, 0.55);
  --ecm-2v-glow-cyan:   0 0 0 1px rgba(34, 211, 238, 0.30), 0 12px 40px -12px rgba(34, 211, 238, 0.45);

  /* — Geometry · radii — (blueprint --r-*) */
  --ecm-2v-r-xs:   6px;
  --ecm-2v-r-sm:   10px;
  --ecm-2v-r-md:   14px;
  --ecm-2v-r-lg:   18px;
  --ecm-2v-r-xl:   22px;
  --ecm-2v-r-2xl:  28px;
  --ecm-2v-r-pill: 999px;

  /* — Geometry · spacing scale — (blueprint --s-*) */
  --ecm-2v-s-1: 4px;
  --ecm-2v-s-2: 8px;
  --ecm-2v-s-3: 12px;
  --ecm-2v-s-4: 16px;
  --ecm-2v-s-5: 20px;
  --ecm-2v-s-6: 24px;
  --ecm-2v-s-7: 32px;
  --ecm-2v-s-8: 40px;

  /* — Typography — (blueprint --font-sans / --font-mono; Inter <link> in index.html head) */
  --ecm-2v-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ecm-2v-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 14px 12px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px)) !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame.is-subpage {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) !important;
  overflow: hidden !important;
  padding: 14px 12px calc(86px + env(safe-area-inset-bottom, 0px)) !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame::before,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame::after {
  display: none !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding-bottom: 4px !important;
  min-height: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-row {
  min-height: 60px !important;
  grid-template-columns: 42px minmax(0, 1fr) 22px !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  align-items: center !important;
  border-radius: 16px !important;
  border-color: var(--ecm-mobile-theme-border) !important;
  background: linear-gradient(180deg, var(--ecm-mobile-theme-surface2), var(--ecm-mobile-theme-surface)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
  overflow: visible !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-setting-icon,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout-icon {
  color: #f8fbff !important;
  background: linear-gradient(135deg, var(--ecm-mobile-theme-accent), var(--ecm-mobile-theme-accent2)) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14) !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-setting-copy,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout-copy {
  min-width: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-title,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-subtitle,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-row strong,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-row small {
  min-width: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-title,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout-copy strong,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-sub-card strong,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-row strong,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-theme-card strong,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-font-btn strong {
  color: var(--ecm-mobile-theme-text) !important;
  font-size: calc(14px * var(--ecm-mobile-font-scale, 1)) !important;
  line-height: 1.22 !important;
  letter-spacing: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-subtitle,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout-copy small,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-sub-card small,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-row small,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-theme-card small,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-font-btn small {
  color: var(--ecm-mobile-theme-muted) !important;
  font-size: calc(11.2px * var(--ecm-mobile-font-scale, 1)) !important;
  line-height: 1.32 !important;
  letter-spacing: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-chevron {
  color: var(--ecm-mobile-theme-accent2) !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout {
  position: relative !important;
  z-index: 1 !important;
  flex: 0 0 auto !important;
  min-height: 60px !important;
  margin: 10px 0 0 !important;
  padding: 10px 12px !important;
  border-radius: 16px !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout-icon {
  color: #fda4af !important;
  background: rgba(244, 63, 94, 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(244, 63, 94, 0.2) !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-subpage {
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 10px !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 2px 0 calc(18px + env(safe-area-inset-bottom, 0px)) !important;
  align-content: start !important;
  gap: 10px !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-sub-card {
  border-color: var(--ecm-mobile-theme-border) !important;
  background: linear-gradient(180deg, var(--ecm-mobile-theme-surface2), var(--ecm-mobile-theme-surface)) !important;
  border-radius: 16px !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-design-panel {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-design-section {
  display: grid !important;
  gap: 10px !important;
  min-width: 0 !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-design-label {
  color: var(--ecm-mobile-theme-muted) !important;
  font-size: calc(10.5px * var(--ecm-mobile-font-scale, 1)) !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-theme-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-theme-card,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-font-btn {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 70px !important;
  display: grid !important;
  justify-items: start !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 12px !important;
  border: 1px solid var(--ecm-mobile-theme-border) !important;
  border-radius: 16px !important;
  background: linear-gradient(180deg, var(--ecm-mobile-theme-surface2), var(--ecm-mobile-theme-surface)) !important;
  color: var(--ecm-mobile-theme-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05) !important;
  text-align: left !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-theme-card span {
  width: 34px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, var(--ecm-theme-a), var(--ecm-theme-b)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 10px 20px rgba(57, 231, 255, 0.18) !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-theme-card.active,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-font-btn.active {
  border-color: var(--ecm-mobile-theme-accent2) !important;
  box-shadow: 0 0 0 1px rgba(57, 231, 255, 0.28), 0 14px 28px rgba(0,0,0,0.18) !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-font-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-font-btn {
  min-height: 62px !important;
  justify-items: center !important;
  text-align: center !important;
}

@media (max-width: 390px) {
  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"].ec-mobile-panel.active {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame {
    padding: 12px 10px calc(94px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame.is-subpage {
    padding: 12px 10px calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-theme-grid {
    grid-template-columns: 1fr !important;
  }
}

/* === Mobile contact options sheet === */
html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet[hidden] {
  display: none !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet {
  position: fixed !important;
  inset: 0 !important;
  z-index: 80 !important;
  display: grid !important;
  align-items: end !important;
  pointer-events: none !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet.active {
  pointer-events: auto !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-backdrop {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(3, 5, 14, 0.62) !important;
  backdrop-filter: blur(10px) !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-panel {
  position: relative !important;
  width: auto !important;
  max-height: min(72dvh, 520px) !important;
  overflow: auto !important;
  margin: 0 12px calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  padding: 14px !important;
  border-radius: 22px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: linear-gradient(180deg, rgba(20,22,42,0.98), rgba(9,11,24,0.98)) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.46), inset 0 1px 0 rgba(255,255,255,0.06) !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-head {
  display: grid !important;
  grid-template-columns: 46px minmax(0, 1fr) 40px !important;
  align-items: center !important;
  gap: 10px !important;
  padding-bottom: 12px !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-avatar {
  width: 46px !important;
  height: 46px !important;
  border-radius: 16px !important;
  display: grid !important;
  place-items: center !important;
  color: #e7ebff !important;
  font-weight: 900 !important;
  background: linear-gradient(135deg, rgba(139,92,246,0.9), rgba(34,211,238,0.35)) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-head strong {
  display: block !important;
  color: #f4f7ff !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-head small {
  display: block !important;
  margin-top: 3px !important;
  color: rgba(231,235,255,0.56) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-close {
  width: 40px !important;
  height: 40px !important;
  border-radius: 13px !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  background: rgba(255,255,255,0.06) !important;
  color: #e7ebff !important;
  font-size: 22px !important;
  line-height: 1 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  touch-action: manipulation !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-actions {
  display: grid !important;
  gap: 8px !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-actions button {
  min-height: 56px !important;
  display: grid !important;
  grid-template-columns: 36px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  column-gap: 10px !important;
  align-items: center !important;
  text-align: left !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.045) !important;
  color: #edf2ff !important;
  padding: 9px 10px !important;
  touch-action: manipulation !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-actions button > span {
  grid-row: 1 / span 2 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 12px !important;
  display: grid !important;
  place-items: center !important;
  color: #67e8f9 !important;
  background: rgba(34,211,238,0.1) !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-actions button svg {
  width: 17px !important;
  height: 17px !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-actions button strong {
  font-size: 13.5px !important;
  line-height: 1.15 !important;
  color: #f4f7ff !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-actions button small {
  font-size: 11px !important;
  line-height: 1.25 !important;
  color: rgba(231,235,255,0.52) !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-actions button.danger {
  color: #fecdd3 !important;
  border-color: rgba(244,63,94,0.24) !important;
  background: rgba(244,63,94,0.08) !important;
}

html body.ec-mobile-shell-active #ec-mobile-shell .ecm-contact-sheet-actions button.danger > span {
  color: #fecdd3 !important;
  background: rgba(244,63,94,0.16) !important;
}

/* === Mobile media preview fit + close button safety === */
@media (max-width: 899px), (hover: none) and (pointer: coarse) {
  html body.auth-ready .media-preview-overlay.active {
    z-index: 2147483000 !important;
    padding: calc(56px + env(safe-area-inset-top, 0px)) 12px calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  html body.auth-ready .media-preview-overlay .media-close {
    position: fixed !important;
    top: calc(12px + env(safe-area-inset-top, 0px)) !important;
    right: 12px !important;
    z-index: 2147483001 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  html body.auth-ready #media-preview-content {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 86px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  html body.auth-ready #media-preview-content .ec-media-preview-item,
  html body.auth-ready #media-preview-content img,
  html body.auth-ready #media-preview-content video {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    pointer-events: auto !important;
  }
}

/* === Mobile profile/settings final stack guard ===
   Keeps the profile menu and all subpages as one natural scroll stack on
   iPhone-sized viewports. Scoped to the logged-in mobile shell only. */
@media (max-width: 899px), (hover: none) and (pointer: coarse) {
  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"].ec-mobile-panel.active {
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-shell {
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame {
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-frame.is-subpage {
    display: grid !important;
    grid-template-rows: minmax(0, 1fr) !important;
    overflow: hidden !important;
    padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 9px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-settings-eyebrow {
    flex: 0 0 auto !important;
    margin-top: 4px !important;
  }

  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row,
  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout,
  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-row {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 58px !important;
    height: auto !important;
    overflow: visible !important;
    touch-action: manipulation !important;
  }

  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-settings-logout {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 10px !important;
    margin-bottom: 0 !important;
  }

  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="more"] [data-ecm-panel="more"] .ec-mobile-profile-sub-content {
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)) !important;
    scroll-padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important;
  }

  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-design-panel,
  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-theme-grid,
  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-font-row {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-theme-card,
  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-font-btn {
    min-width: 0 !important;
    overflow: hidden !important;
  }
}

@media (max-width: 374px) {
  html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell#ec-mobile-shell[data-ecm-bp="1"] .ecm-mobile-font-row {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE 2V — PHASE 2 REFINEMENTS   (Block 2 · Phase 2)
   Dark theme tokens re-tuned to the exact 2V palette (Block A, in place above).
   Below: the two genuinely off-2V, hardcoded gaps. The primitives
   (row/pill/bubble/toggle/nav/avatar) were already converted to exact 2V in
   prior "Blueprint" passes and are intentionally NOT re-touched (no duplication).
   Scope: body.ec-mobile-shell-active #ec-mobile-shell only -> zero leakage.
   ════════════════════════════════════════════════════════════════════════════ */

/* B · Segmented filters: cyan -> 2V violet tint (blueprint .seg .opt.on).
   Higher specificity than the lower cyan rules (style.css :636/:784/:2420/:18826). */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-chat-filters button.active,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-contact-filters button.active {
  border-color: rgba(124, 92, 255, 0.35) !important;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.30), rgba(99, 102, 241, 0.20)) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.35) !important;
  text-shadow: none !important;
}

/* C · Complete the 2V pill set (amber + rose; cyan/violet/emerald already exist). */
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-pill.amber {
  color: #fcd34d !important;
  background: rgba(245, 158, 11, 0.10) !important;
  border: 1px solid rgba(245, 158, 11, 0.30) !important;
}
html body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-pill.rose {
  color: #fda4af !important;
  background: rgba(244, 63, 94, 0.10) !important;
  border: 1px solid rgba(244, 63, 94, 0.30) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE 2V — PHASE 3: CORE SCREENS   (Block 2 · Phase 3)
   Chats-List · Open-Chat · Contacts
   Scope: html body.ec-mobile-shell-active #ec-mobile-shell only → zero leakage.
   No HTML changes. No JS changes. No data-* changes. No handler changes.
   Preserves: createProtectedSupabaseClient / sb / openRoom / sendMessage /
              buildMobileChatListHtml / refreshMobileContacts / syncMessages.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── P3-A  Chats panel head — 2V gradient title + E2EE pill re-tone ─────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="chats"] .ec-mobile-chats-head {
  padding: 14px 14px 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="chats"] .ec-mobile-chats-head h1 {
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.66) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* E2EE pill → 2V violet tint (replaces cyan) */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-chats-secure.ec-mobile-pill {
  color: #c4b5fd !important;
  background: rgba(124, 92, 255, 0.12) !important;
  border: 1px solid rgba(124, 92, 255, 0.28) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-chats-secure.ec-mobile-pill .ec-mobile-pill-dot {
  background: #a78bfa !important;
  box-shadow: 0 0 6px rgba(167, 139, 250, 0.55) !important;
}

/* ── P3-B  Chat row — 2V card finish ────────────────────────────────────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-avatar {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, var(--ecm-avatar-start, #6f31ff), var(--ecm-avatar-end, #10172a)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 20px var(--ecm-avatar-glow, rgba(124,92,255,0.28)) !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: hidden !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-avatar u {
  font-style: normal !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,0.92) !important;
  letter-spacing: -0.02em !important;
  z-index: 1 !important;
  position: relative !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-avatar i {
  position: absolute !important;
  bottom: 3px !important;
  right: 3px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: rgba(100,116,139,0.6) !important;
  border: 1.5px solid rgba(5,6,13,0.9) !important;
  display: block !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row[data-ecm-presence="online"] .ecm-chat-avatar i {
  background: #34d399 !important;
  box-shadow: 0 0 6px rgba(52,211,153,0.55) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row[data-ecm-presence="warn"] .ecm-chat-avatar i {
  background: #f59e0b !important;
  box-shadow: 0 0 6px rgba(245,158,11,0.5) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row[data-ecm-presence="secure"] .ecm-chat-avatar i {
  background: #a78bfa !important;
  box-shadow: 0 0 6px rgba(167,139,250,0.5) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-copy strong {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: #f4f7ff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-preview {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: rgba(231,235,255,0.52) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-preview mark {
  background: none !important;
  color: inherit !important;
  font-size: 10px !important;
  flex-shrink: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-preview.secure {
  color: rgba(167,139,250,0.72) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-preview.warning {
  color: rgba(245,158,11,0.82) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-meta {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  gap: 5px !important;
  flex-shrink: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-meta b {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(231,235,255,0.44) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  white-space: nowrap !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-meta em {
  font-style: normal !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  border-radius: 999px !important;
  display: grid !important;
  place-items: center !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.38) !important;
}

/* ── P3-C  Open-Chat — bubble 2V re-tune ────────────────────────────────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  padding: 10px 13px !important;
  max-width: min(80%, 340px) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg.mine {
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 55%, #4f46e5 100%) !important;
  border: 1px solid rgba(124,92,255,0.35) !important;
  box-shadow: 0 8px 24px rgba(99,102,241,0.28), inset 0 1px 0 rgba(255,255,255,0.12) !important;
  color: #fff !important;
  border-radius: 18px 18px 4px 18px !important;
  align-self: flex-end !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg.theirs {
  background:
    radial-gradient(circle at 0% 0%, rgba(124,92,255,0.08), transparent 50%),
    linear-gradient(180deg, rgba(22,26,54,0.94), rgba(11,14,30,0.94)) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05) !important;
  color: #e7ebff !important;
  border-radius: 18px 18px 18px 4px !important;
  align-self: flex-start !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg p,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg .ec-chat-text {
  font-size: 14px !important;
  line-height: 1.48 !important;
}
/* E2EE mono tagline in chat header sub-line */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="chat"] .ec-mobile-chat-meta small {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10.5px !important;
  letter-spacing: 0.04em !important;
  color: rgba(167,139,250,0.72) !important;
}

/* ── P3-D  Contacts panel head — 2V gradient title ──────────────────────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="rooms"] .ec-mobile-contacts-head {
  padding: 14px 14px 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"][data-ecm-view="rooms"] .ec-mobile-contacts-head h1 {
  font-size: 28px !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.66) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* ── P3-E  Contact row — 2V card finish ─────────────────────────────────── */
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-avatar {
  width: 46px !important;
  height: 46px !important;
  min-width: 46px !important;
  border-radius: 16px !important;
  background: linear-gradient(135deg, var(--ecm-avatar-start, #6f31ff), var(--ecm-avatar-end, #10172a)) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 8px 20px var(--ecm-avatar-glow, rgba(124,92,255,0.28)) !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: hidden !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-avatar u {
  font-style: normal !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,0.92) !important;
  letter-spacing: -0.02em !important;
  z-index: 1 !important;
  position: relative !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-avatar i {
  position: absolute !important;
  bottom: 3px !important;
  right: 3px !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: rgba(100,116,139,0.6) !important;
  border: 1.5px solid rgba(5,6,13,0.9) !important;
  display: block !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-copy {
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-title-row strong {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #f4f7ff !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-copy small {
  font-size: 11.5px !important;
  color: rgba(231,235,255,0.48) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-status.saved {
  font-size: 11px !important;
  color: rgba(167,139,250,0.6) !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-icon-btn,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-favorite-btn {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 11px !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(231,235,255,0.6) !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-icon-btn svg,
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-favorite-btn svg {
  width: 16px !important;
  height: 16px !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-icon-btn:active {
  background: rgba(34,211,238,0.12) !important;
  border-color: rgba(34,211,238,0.28) !important;
  color: #67e8f9 !important;
}
html body.ec-mobile-shell-active.auth-ready #ec-mobile-shell[data-ecm-bp="1"] [data-ecm-panel="rooms"] .ecm-contact-row .ecm-contact-favorite-btn.active {
  color: #fcd34d !important;
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.28) !important;
}


/* == STEP 21 -- Mobile Subpages & Settings Navigation =======================
   Scope: the 9 named slide-in subpage shells injected by patch-phase5.ps1.
   Each shell carries data-ecm-subpage="<key>" and is toggled hidden/visible
   by the existing JS (data-ecm-profile-back, data-ecm-profile-subpage-trigger).
   1. Slide-in / slide-out animation for every named subpage shell
   2. Stacking: subpage sits above the settings list (z-index 20)
   3. Subpage header row layout
   4. Subpage content scroll area with safe-area padding
   5. Reduced-motion fallback
   6. position:relative on .ec-mobile-settings-frame as positioning context
   Purely additive -- no existing rules modified. */

/* 1. Base (hidden) state: pushed off-screen to the right. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] [data-ecm-subpage] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 20 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  background: linear-gradient(180deg, rgba(10,16,36,0.99) 0%, rgba(6,10,24,1) 100%) !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  transform: translateX(100%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0ms linear 280ms !important;
}

/* 2. Visible state: JS removes [hidden] attribute. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] [data-ecm-subpage]:not([hidden]),
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] [data-ecm-subpage][data-ecm-subpage-open] {
  transform: translateX(0) !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition:
    transform 280ms cubic-bezier(0.32, 0.72, 0, 1),
    visibility 0ms linear 0ms !important;
}

/* 3. Subpage header row. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] [data-ecm-subpage] .ec-mobile-settings-subhead {
  display: grid !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  flex-shrink: 0 !important;
}

/* 4. Subpage content scroll area. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] [data-ecm-subpage] .ec-mobile-profile-sub-content {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 12px 14px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] [data-ecm-subpage] .ec-mobile-profile-sub-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* 5. Reduced-motion: skip the slide animation. */
@media (prefers-reduced-motion: reduce) {
  body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] [data-ecm-subpage] {
    transition: visibility 0ms linear 0ms !important;
    transform: none !important;
  }
  body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] [data-ecm-subpage]:not([hidden]),
  body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] [data-ecm-subpage][data-ecm-subpage-open] {
    transform: none !important;
    transition: none !important;
  }
}

/* 6. Positioning context for the settings frame. */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-frame {
  position: relative !important;
}
/* ============================================================
   STEP 22 — SUBPAGE INNER CONTENT: ROWS, PADDING & BACK-BUTTON
   Scoped to: #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage]
   All 9 injected subpages: privacy, notifications, security,
   data-storage, linked-devices, help, about, blocked, appearance
   ============================================================ */

/* ── 1. Subpage root: full-bleed white/dark card surface ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] {
  background: var(--ec-bg, #ffffff) !important;
  color: var(--ec-text, #111827) !important;
}
html[data-theme=dark] body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] {
  background: var(--ec-bg, #0f1117) !important;
  color: var(--ec-text, #e5e7eb) !important;
}

/* ── 2. Subpage header bar (back button + title row) ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-subpage-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px 16px 12px !important;
  border-bottom: 1px solid var(--ec-divider, rgba(0,0,0,0.08)) !important;
  background: var(--ec-bg, #ffffff) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  min-height: 56px !important;
}
html[data-theme=dark] body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-subpage-header {
  background: var(--ec-bg, #0f1117) !important;
  border-bottom-color: rgba(255,255,255,0.07) !important;
}

/* ── 3. Back button inside subpage header ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-subpage-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: var(--ec-accent, #6366f1) !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  transition: background 180ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-subpage-back:active,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-subpage-back:focus-visible {
  background: var(--ec-accent-alpha, rgba(99,102,241,0.12)) !important;
  outline: none !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-subpage-back svg,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-subpage-back i {
  width: 20px !important;
  height: 20px !important;
  font-size: 20px !important;
  pointer-events: none !important;
}

/* ── 4. Subpage title text ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-subpage-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  color: var(--ec-text, #111827) !important;
  flex: 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0 !important;
}
html[data-theme=dark] body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-subpage-title {
  color: var(--ec-text, #f3f4f6) !important;
}

/* ── 5. Section group label (e.g. Privacy, Security) ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-section-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ec-accent, #6366f1) !important;
  padding: 20px 16px 6px !important;
  display: block !important;
}

/* ── 6. Content rows (settings list items) ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 16px !important;
  min-height: 56px !important;
  background: var(--ec-surface, #ffffff) !important;
  border-bottom: 1px solid var(--ec-divider, rgba(0,0,0,0.06)) !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: background 140ms ease !important;
  text-decoration: none !important;
  color: inherit !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row:last-child {
  border-bottom: none !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row:active {
  background: var(--ec-row-active, rgba(99,102,241,0.07)) !important;
}
html[data-theme=dark] body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row {
  background: var(--ec-surface, #161b27) !important;
  border-bottom-color: rgba(255,255,255,0.05) !important;
}
html[data-theme=dark] body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row:active {
  background: rgba(99,102,241,0.13) !important;
}

/* ── 7. Row icon container ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: var(--ec-icon-bg, rgba(99,102,241,0.10)) !important;
  color: var(--ec-accent, #6366f1) !important;
  flex-shrink: 0 !important;
  font-size: 18px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row-icon svg,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row-icon i {
  width: 18px !important;
  height: 18px !important;
  font-size: 18px !important;
  pointer-events: none !important;
}

/* ── 8. Row text block (label + sublabel) ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row-body {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row-label {
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  color: var(--ec-text, #111827) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row-sub {
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: var(--ec-text-muted, #6b7280) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
html[data-theme=dark] body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row-label {
  color: var(--ec-text, #f3f4f6) !important;
}
html[data-theme=dark] body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row-sub {
  color: var(--ec-text-muted, #9ca3af) !important;
}

/* ── 9. Row trailing chevron / value badge ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row-trail {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
  color: var(--ec-text-muted, #9ca3af) !important;
  font-size: 13px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row-trail svg,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row-trail i {
  width: 16px !important;
  height: 16px !important;
  font-size: 16px !important;
  opacity: 0.55 !important;
}

/* ── 10. Toggle switch inside a row ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-toggle {
  position: relative !important;
  display: inline-block !important;
  width: 48px !important;
  height: 28px !important;
  flex-shrink: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-toggle input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-toggle-track {
  position: absolute !important;
  inset: 0 !important;
  border-radius: 14px !important;
  background: var(--ec-toggle-off, #d1d5db) !important;
  transition: background 200ms ease !important;
  cursor: pointer !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-toggle input:checked + .ec-mobile-toggle-track {
  background: var(--ec-accent, #6366f1) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-toggle-track::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.20) !important;
  transition: transform 200ms ease !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-toggle input:checked + .ec-mobile-toggle-track::after {
 transform: translateX(20px) !important;
}
html[data-theme=dark] body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-toggle-track {
 background: var(--ec-toggle-off, #374151) !important;
}

/* ── 11. Danger / destructive row variant ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row--danger .ec-mobile-row-label {
 color: #ef4444 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row--danger .ec-mobile-row-icon {
 background: rgba(239,68,68,0.10) !important;
 color: #ef4444 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row--danger:active {
 background: rgba(239,68,68,0.07) !important;
}

/* ── 12. Info / description block (non-interactive) ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-info-block {
 margin: 12px 16px !important;
 padding: 14px 16px !important;
 border-radius: 12px !important;
 background: var(--ec-info-bg, rgba(99,102,241,0.07)) !important;
 font-size: 13px !important;
 line-height: 1.55 !important;
 color: var(--ec-text-muted, #6b7280) !important;
}
html[data-theme=dark] body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-info-block {
 background: rgba(99,102,241,0.10) !important;
 color: var(--ec-text-muted, #9ca3af) !important;
}

/* ── 13. Card group wrapper (groups rows with rounded corners) ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-card-group {
 margin: 8px 16px !important;
 border-radius: 14px !important;
 overflow: hidden !important;
 background: var(--ec-surface, #ffffff) !important;
 box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04) !important;
}
html[data-theme=dark] body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-card-group {
 background: var(--ec-surface, #161b27) !important;
 box-shadow: 0 1px 4px rgba(0,0,0,0.30) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-card-group .ec-mobile-row {
 border-radius: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-card-group .ec-mobile-row:first-child {
 border-top-left-radius: 14px !important;
 border-top-right-radius: 14px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-card-group .ec-mobile-row:last-child {
 border-bottom-left-radius: 14px !important;
 border-bottom-right-radius: 14px !important;
 border-bottom: none !important;
}

/* ── 14. Reduced-motion: disable toggle transition ── */
@media (prefers-reduced-motion: reduce) {
 body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-toggle-track,
 body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-toggle-track::after {
 transition: none !important;
 }
 body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-row {
 transition: none !important;
 }
 body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-subpage-back {
 transition: none !important;
 }
}

/* ── 15. Bottom safe-area spacer inside scroll content ── */
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel=more] [data-ecm-subpage] .ec-mobile-subpage-spacer {
 display: block !important;
 height: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
 flex-shrink: 0 !important;
}

/* END STEP 22 */

/* ============================================================
   STEP 23 — PHASE A: DESIGN TOKEN LAYER
   Scoped to #ec-mobile-shell — all blueprint tokens defined here.
   Source of truth: design-import/mobile-2v/EliteCrypt Mobile System.html
   Zero leakage: every token is scoped inside #ec-mobile-shell.
   ============================================================ */

/* ── 23.1  Background & Surface tokens ── */
#ec-mobile-shell {
  --bg-0:       #05060d !important;
  --bg-1:       #0a0c18 !important;
  --surface:    #11142a !important;
  --surface-2:  #161a36 !important;
  --surface-3:  #1c2148 !important;
}

/* ── 23.2  Line / border tokens ── */
#ec-mobile-shell {
  --line:   rgba(255,255,255,0.06) !important;
  --line-2: rgba(255,255,255,0.10) !important;
  --line-3: rgba(255,255,255,0.16) !important;
}

/* ── 23.3  Text tokens ── */
#ec-mobile-shell {
  --text:       #e7ebff !important;
  --text-dim:   rgba(231,235,255,0.66) !important;
  --text-mute:  rgba(231,235,255,0.42) !important;
  --text-faint: rgba(231,235,255,0.28) !important;
}

/* ── 23.4  Accent colour tokens ── */
#ec-mobile-shell {
  --violet:      #7c5cff !important;
  --violet-2:    #a78bfa !important;
  --violet-soft: rgba(124,92,255,0.16) !important;
  --cyan:        #22d3ee !important;
  --cyan-2:      #67e8f9 !important;
  --cyan-soft:   rgba(34,211,238,0.14) !important;
  --emerald:     #34d399 !important;
  --emerald-2:   #6ee7b7 !important;
  --rose:        #f43f5e !important;
  --rose-2:      #fb7185 !important;
  --amber:       #f59e0b !important;
}

/* ── 23.5  Gradient tokens ── */
#ec-mobile-shell {
  --grad-brand:  linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  --grad-violet: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
  --grad-cyan:   linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%) !important;
  --grad-text:   linear-gradient(90deg,  #a78bfa 0%, #22d3ee 100%) !important;
}

/* ── 23.6  Glow / shadow tokens ── */
#ec-mobile-shell {
  --glow-violet: 0 0 0 1px rgba(124,92,255,0.35), 0 12px 40px -12px rgba(124,92,255,0.55) !important;
  --glow-cyan:   0 0 0 1px rgba(34,211,238,0.30), 0 12px 40px -12px rgba(34,211,238,0.45) !important;
}

/* ── 23.7  Border-radius tokens ── */
#ec-mobile-shell {
  --r-xs:   6px   !important;
  --r-sm:   10px  !important;
  --r-md:   14px  !important;
  --r-lg:   18px  !important;
  --r-xl:   22px  !important;
  --r-2xl:  28px  !important;
  --r-pill: 999px !important;
}

/* ── 23.8  Typography tokens ── */
#ec-mobile-shell {
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif !important;
  --font-mono: 'JetBrains Mono', 'Fira Mono', monospace !important;
}

/* END STEP 23 */

/* ============================================================
   STEP 24 — PHASE B: SHELL & NAVIGATION POLISH
   Blueprint: design-import/mobile-2v/EliteCrypt Mobile System.html
   CSS-only — zero HTML / JS changes.
   Scope: body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-bp="1"]
   All rules use !important — override layer.
   ============================================================ */

/* ── 24.1  Shell base: apply bg-0 and font-sans ── */
body.ec-mobile-shell-active #ec-mobile-shell {
  background-color: #05060d !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  color: #e7ebff !important;
}

/* ── 24.2  Screen background glow ── */
/*
   Blueprint spec (MOBILE_ANALYSIS.md §5 "Screen Background / Glow"):
     top glow:    radial-gradient(420px 280px at 50% 0%,  rgba(124,92,255,0.20), transparent 60%)
     bottom glow: radial-gradient(420px 320px at 50% 100%, rgba(34,211,238,0.10), transparent 60%)
   .ec-mobile-screen-glow is a zero-content decorative layer inside #ec-mobile-shell.
   It must be position:fixed (or absolute) and cover the full shell viewport.
   pointer-events:none so it never blocks taps.
*/
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-screen-glow {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background:
    radial-gradient(420px 280px at 50% 0%,   rgba(124,92,255,0.20), transparent 60%),
    radial-gradient(420px 320px at 50% 100%, rgba(34,211,238,0.10),  transparent 60%) !important;
  will-change: transform !important;
}

/* ── 24.3  Status bar / topbar (combined .ec-mobile-topbar.ec-mobile-status-bar) ── */
/*
   Blueprint: status bar sits at the very top of the shell.
   - Background: transparent (glow shows through)
   - Safe-area top padding
   - Mono font for time display
   - Status icons in text-mute colour
*/
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-topbar {
  position: relative !important;
  z-index: 10 !important;
  background: transparent !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  border-bottom: none !important;
}

/* Status-bar time — JetBrains Mono, small, text-mute */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-status-time {
  font-family: 'JetBrains Mono', 'Fira Mono', monospace !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  color: rgba(231,235,255,0.66) !important;
  line-height: 1 !important;
}

/* Status-bar right cluster (signal / battery icons) */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-status-right {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-status-icons {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: rgba(231,235,255,0.42) !important;
}

/* Status button (settings shortcut pill) */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-status.ecm-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.22) !important;
  color: #a78bfa !important;
  font-family: 'JetBrains Mono', 'Fira Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: background 0.18s ease, border-color 0.18s ease !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-status.ecm-status:hover,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-status.ecm-status:focus-visible {
  background: rgba(124,92,255,0.18) !important;
  border-color: rgba(124,92,255,0.40) !important;
  outline: none !important;
}

/* ── 24.4  App top bar (.ec-mobile-app-top) ── */
/*
   Blueprint spec (MOBILE_ANALYSIS.md §5 "App Top Bar"):
   - Back button: rgba(124,92,255,0.10) bg + rgba(124,92,255,0.25) border
                  #c4b5fd colour / 34×34px / border-radius 11px
   - Title: 17px / 600 / -0.01em (standard) or 22px / 700 (large variant)
   - Action button (+ create): --grad-brand bg / white colour
*/
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 12px 16px 8px !important;
  position: relative !important;
  z-index: 5 !important;
  flex-shrink: 0 !important;
}

/* App top bar title */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top-title {
  flex: 1 1 auto !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #e7ebff !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* Title icon (SVG inside h1) */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top-title-icon {
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  color: #a78bfa !important;
}

/* Back button — violet tint */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-back,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-back {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: background 0.18s ease, border-color 0.18s ease !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-back:hover,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-back:hover,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-back:focus-visible,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-back:focus-visible {
  background: rgba(124,92,255,0.18) !important;
  border-color: rgba(124,92,255,0.45) !important;
  outline: none !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-back svg,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-back svg {
  width: 18px !important;
  height: 18px !important;
  color: #c4b5fd !important;
  flex-shrink: 0 !important;
}

/* Action button (+ create / add) — grad-brand */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  border: none !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px -4px rgba(124,92,255,0.55) !important;
  transition: opacity 0.18s ease, box-shadow 0.18s ease !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top-action:hover,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top-action:focus-visible {
  opacity: 0.88 !important;
  box-shadow: 0 6px 20px -4px rgba(124,92,255,0.70) !important;
  outline: none !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top-action svg {
  width: 18px !important;
  height: 18px !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

/* Icon-only button variant (used in vault, contacts) */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-icon-btn,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: rgba(231,235,255,0.66) !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: background 0.18s ease !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-icon-btn:hover,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-icon-btn:hover {
  background: rgba(255,255,255,0.09) !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-icon-btn svg,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-icon-btn svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}

/* ── 24.5  Bottom navigation bar ── */
/*
   Blueprint spec (MOBILE_ANALYSIS.md §5 "Bottom Navigation Bar"):
   - backdrop-filter: blur(10px)
   - border-top: 1px solid var(--line)
   - Active tab colour: #c4b5fd
   - Active tab SVG: drop-shadow(0 0 8px rgba(167,139,250,0.7))
   - Inactive tab colour: text-mute
   HTML: nav.ec-mobile-bottom-nav.ecm-bottom-nav > button[data-ecm-tab]
         button > .ec-mobile-nav-icon (SVG) + span (label)
*/
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-bottom-nav {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-around !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  background: rgba(10,12,24,0.82) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.4) !important;
  backdrop-filter: blur(10px) saturate(1.4) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  z-index: 100 !important;
  flex-shrink: 0 !important;
}

/* Nav tab buttons */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav button[data-ecm-tab],
body.ec-mobile-shell-active #ec-mobile-shell .ecm-bottom-nav button[data-ecm-tab] {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 1 1 0 !important;
  gap: 3px !important;
  padding: 8px 4px 4px !important;
  background: transparent !important;
  border: none !important;
  color: rgba(231,235,255,0.42) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  cursor: pointer !important;
  transition: color 0.18s ease !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav button[data-ecm-tab]:focus-visible,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-bottom-nav button[data-ecm-tab]:focus-visible {
  outline: 2px solid rgba(124,92,255,0.50) !important;
  outline-offset: -2px !important;
  border-radius: 8px !important;
}

/* Nav icon wrapper */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-nav-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  flex-shrink: 0 !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-nav-icon svg {
  width: 22px !important;
  height: 22px !important;
  transition: filter 0.18s ease !important;
}

/* Inactive tab label */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav button[data-ecm-tab] > span:not(.ec-mobile-nav-icon),
body.ec-mobile-shell-active #ec-mobile-shell .ecm-bottom-nav button[data-ecm-tab] > span:not(.ec-mobile-nav-icon) {
  font-size: 10px !important;
  font-weight: 500 !important;
  color: inherit !important;
  line-height: 1 !important;
}

/* Active tab — violet colour + SVG glow */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav button[data-ecm-tab].active,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-bottom-nav button[data-ecm-tab].active {
  color: #a78bfa !important;
}

body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav button[data-ecm-tab].active .ec-mobile-nav-icon svg,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-bottom-nav button[data-ecm-tab].active .ec-mobile-nav-icon svg {
  filter: drop-shadow(0 0 8px rgba(167,139,250,0.70)) !important;
  color: #a78bfa !important;
}

/* Active tab label */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav button[data-ecm-tab].active > span:not(.ec-mobile-nav-icon),
body.ec-mobile-shell-active #ec-mobile-shell .ecm-bottom-nav button[data-ecm-tab].active > span:not(.ec-mobile-nav-icon) {
  color: #a78bfa !important;
  font-weight: 600 !important;
}

/* Active tab indicator dot (optional — blueprint uses colour only, no dot) */
/* Kept as a subtle underline accent instead */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav button[data-ecm-tab].active::after,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-bottom-nav button[data-ecm-tab].active::after {
  content: '' !important;
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #7c5cff, #22d3ee) !important;
  margin-top: 2px !important;
  opacity: 0.85 !important;
}

/* ── 24.6  Legacy bottom-nav override (old nav at line 7783 in HTML) ── */
/*
   There is a legacy <nav class="ec-mobile-bottom-nav"> at HTML line 7783
   (outside #ec-mobile-shell) that uses data-ec-mobile-nav buttons.
   It must be hidden when the mobile shell is active so only the
   #ec-mobile-shell nav (line 8076) is visible.
*/
body.ec-mobile-shell-active .ec-mobile-bottom-nav:not(#ec-mobile-shell .ec-mobile-bottom-nav):not(#ec-mobile-shell .ecm-bottom-nav) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── 24.7  Shell content area — ensure it clears the fixed bottom nav ── */
body.ec-mobile-shell-active #ec-mobile-shell main.ec-mobile-content,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-content {
  padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important;
}

/* ── 24.8  Reduced-motion fallbacks ── */
@media (prefers-reduced-motion: reduce) {
  body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-status.ecm-status,
  body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-back,
  body.ec-mobile-shell-active #ec-mobile-shell .ecm-back,
  body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-app-top-action,
  body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-icon-btn,
  body.ec-mobile-shell-active #ec-mobile-shell .ecm-icon-btn,
  body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-bottom-nav button[data-ecm-tab],
  body.ec-mobile-shell-active #ec-mobile-shell .ecm-bottom-nav button[data-ecm-tab],
  body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-nav-icon svg {
    transition: none !important;
  }
}

/* END STEP 24 */

/* ═══════════════════════════════════════════════════════════════════════════
   STEP 25 — Phase C: Core Components Polish
   Scope: body.ec-mobile-shell-active #ec-mobile-shell
   Zero leakage — every rule scoped to #ec-mobile-shell
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 25.1  Toggle component — ecf-ui-toggle (subpage toggles in .ecf-kv rows) ── */
/*
   HTML: <button type="button" class="ecf-ui-toggle [on]" aria-pressed="true/false"><i></i></button>
   The <i> is the track; ::after pseudo is the thumb.
*/
body.ec-mobile-shell-active #ec-mobile-shell .ecf-ui-toggle {
  flex: none !important;
  position: relative !important;
  display: inline-block !important;
  width: 40px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  vertical-align: middle !important;
  outline: none !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ecf-ui-toggle i {
  display: none !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ecf-ui-toggle::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
  transition: left .18s ease !important;
}
/* ON state */
body.ec-mobile-shell-active #ec-mobile-shell .ecf-ui-toggle.on,
body.ec-mobile-shell-active #ec-mobile-shell .ecf-ui-toggle[aria-pressed="true"] {
  background: linear-gradient(135deg, #34d399, #22d3ee) !important;
  border-color: rgba(52,211,153,0.50) !important;
  box-shadow: 0 0 14px rgba(52,211,153,0.40) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ecf-ui-toggle.on::after,
body.ec-mobile-shell-active #ec-mobile-shell .ecf-ui-toggle[aria-pressed="true"]::after {
  left: 18px !important;
}
/* Focus ring */
body.ec-mobile-shell-active #ec-mobile-shell .ecf-ui-toggle:focus-visible {
  outline: 2px solid rgba(124,92,255,0.60) !important;
  outline-offset: 2px !important;
}

/* ── 25.2  Toggle component — ec-settings-switch (desktop settings panel toggles) ── */
/*
   HTML: <button type="button" class="ec-settings-switch [on]" aria-pressed="true/false"><i></i></button>
*/
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-switch {
  flex: none !important;
  position: relative !important;
  display: inline-block !important;
  width: 40px !important;
  height: 24px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  vertical-align: middle !important;
  outline: none !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-switch i {
  display: none !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-switch::after {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
  transition: left .18s ease !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-switch.on,
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-switch[aria-pressed="true"] {
  background: linear-gradient(135deg, #34d399, #22d3ee) !important;
  border-color: rgba(52,211,153,0.50) !important;
  box-shadow: 0 0 14px rgba(52,211,153,0.40) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-switch.on::after,
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-switch[aria-pressed="true"]::after {
  left: 18px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-switch:focus-visible {
  outline: 2px solid rgba(124,92,255,0.60) !important;
  outline-offset: 2px !important;
}

/* ── 25.3  ecf-kv row layout (subpage toggle rows) ── */
/*
   HTML: <div class="ecf-kv"><span>Label</span><strong>value</strong><button class="ecf-ui-toggle ...">
*/
body.ec-mobile-shell-active #ec-mobile-shell .ecf-kv {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  min-height: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ecf-kv:last-child {
  border-bottom: none !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ecf-kv > span:first-child {
  flex: 1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #e7ebff !important;
  line-height: 1.4 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ecf-kv > strong {
  font-size: 11.5px !important;
  font-weight: 500 !important;
  color: rgba(231,235,255,0.42) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  letter-spacing: 0.04em !important;
  flex: none !important;
}

/* ── 25.4  ec-settings-row layout (settings panel toggle rows) ── */
/*
   HTML: <div class="ec-settings-row"><span>Label<small>desc</small></span><button class="ec-settings-switch ...">
*/
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 13px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  min-height: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-row:last-child {
  border-bottom: none !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-row > span:first-child {
  flex: 1 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #e7ebff !important;
  line-height: 1.4 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-row > span:first-child small {
  font-size: 11.5px !important;
  font-weight: 400 !important;
  color: rgba(231,235,255,0.42) !important;
  line-height: 1.3 !important;
}

/* ── 25.5  ecf-toggle-list / ec-settings-toggle-list container ── */
body.ec-mobile-shell-active #ec-mobile-shell .ecf-toggle-list,
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-toggle-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── 25.6  Pills — complete blueprint system with dot glow ── */
/*
   Upgrade: ensure all 5 colour variants have correct bg/border/colour + dot glow.
   These rules override the earlier Step 17.3 / Step 18 rules with higher specificity.
*/
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  flex: none !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}
/* Cyan pill */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-pill.cyan {
  color: #67e8f9 !important;
  background: rgba(34,211,238,0.10) !important;
  border: 1px solid rgba(34,211,238,0.28) !important;
}
/* Violet pill */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-pill.violet {
  color: #c4b5fd !important;
  background: rgba(124,92,255,0.12) !important;
  border: 1px solid rgba(124,92,255,0.28) !important;
}
/* Emerald pill */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-pill.emerald {
  color: #6ee7b7 !important;
  background: rgba(52,211,153,0.10) !important;
  border: 1px solid rgba(52,211,153,0.28) !important;
}
/* Amber pill */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-pill.amber {
  color: #fcd34d !important;
  background: rgba(245,158,11,0.10) !important;
  border: 1px solid rgba(245,158,11,0.28) !important;
}
/* Rose pill */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-pill.rose {
  color: #fda4af !important;
  background: rgba(244,63,94,0.10) !important;
  border: 1px solid rgba(244,63,94,0.28) !important;
}
/* Pill dot — 5px with glow */
body.ec-mobile-shell-active #ec-mobile-shell[data-ecm-bp="1"] .ec-mobile-pill-dot {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 6px currentColor !important;
  flex: none !important;
  display: inline-block !important;
}

/* ── 25.7  Group / section labels ── */
/*
   Blueprint: JetBrains Mono / 9.5px / 0.18em letter-spacing / uppercase / --text-mute
   Classes used: .ec-mobile-settings-group-label, .ecm-group-label, .ec-mobile-section-label
   Also covers any <h3> used as a group header inside the settings list.
*/
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-group-label,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-group-label,
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-section-label,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories > h3,
body.ec-mobile-shell-active #ec-mobile-shell [data-ecm-panel="more"] .ec-mobile-settings-categories > .ec-mobile-settings-group {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(231,235,255,0.42) !important;
  padding: 16px 0 6px !important;
  margin: 0 !important;
  display: block !important;
  line-height: 1.2 !important;
}

/* ── 25.8  Setting row icon tile — .ec-mobile-setting-icon ── */
/*
   Blueprint: 34×34px / border-radius 10px / accent-tinted bg + border per data-tone.
   The .ecm-row-ico already handles this for .ecm-row elements.
   This block ensures the .ec-mobile-setting-icon class (used on both vault and settings rows)
   also gets the correct sizing and default violet tint.
*/
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-icon {
  flex: none !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.22) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-icon svg {
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
}
/* Per-tone icon tile colours — data-tone on the parent row */
body.ec-mobile-shell-active #ec-mobile-shell [data-tone="cyan"] .ec-mobile-setting-icon {
  background: rgba(34,211,238,0.10) !important;
  border-color: rgba(34,211,238,0.22) !important;
  color: #67e8f9 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-tone="emerald"] .ec-mobile-setting-icon {
  background: rgba(52,211,153,0.10) !important;
  border-color: rgba(52,211,153,0.22) !important;
  color: #6ee7b7 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-tone="amber"] .ec-mobile-setting-icon {
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.22) !important;
  color: #fcd34d !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-tone="rose"] .ec-mobile-setting-icon {
  background: rgba(244,63,94,0.10) !important;
  border-color: rgba(244,63,94,0.22) !important;
  color: #fda4af !important;
}
/* Vault-kind tones (data-vault-kind on the row itself) */
body.ec-mobile-shell-active #ec-mobile-shell [data-vault-kind="documents"] .ec-mobile-setting-icon {
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.22) !important;
  color: #fcd34d !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-vault-kind="images"] .ec-mobile-setting-icon {
  background: rgba(34,211,238,0.10) !important;
  border-color: rgba(34,211,238,0.22) !important;
  color: #67e8f9 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-vault-kind="videos"] .ec-mobile-setting-icon {
  background: rgba(244,63,94,0.10) !important;
  border-color: rgba(244,63,94,0.22) !important;
  color: #fda4af !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-vault-kind="notes"] .ec-mobile-setting-icon {
  background: rgba(52,211,153,0.10) !important;
  border-color: rgba(52,211,153,0.22) !important;
  color: #6ee7b7 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell [data-vault-kind="passwords"] .ec-mobile-setting-icon {
  background: rgba(124,92,255,0.10) !important;
  border-color: rgba(124,92,255,0.22) !important;
  color: #c4b5fd !important;
}

/* ── 25.9  Chevron — .ec-mobile-setting-chevron / .ecm-row-chev ── */
/*
   Blueprint: --text-faint = rgba(231,235,255,0.28)
   Already set on .ecm-row-chev; this ensures .ec-mobile-setting-chevron matches.
*/
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-chevron,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-row-chev {
  color: rgba(231,235,255,0.28) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: 16px !important;
  height: 16px !important;
  flex: none !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-chevron svg,
body.ec-mobile-shell-active #ec-mobile-shell .ecm-row-chev svg {
  width: 14px !important;
  height: 14px !important;
  color: currentColor !important;
}

/* ── 25.10  Setting row base — .ec-mobile-setting-row (all contexts) ── */
/*
   Ensures every setting row (vault + settings list) has consistent layout:
   flex row, 13px padding, 14px radius, glass surface, correct gap.
*/
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 13px 14px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  margin: 0 0 8px !important;
  min-height: 0 !important;
  box-shadow: none !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  color: #e7ebff !important;
  transition: background .14s ease !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-row:active {
  background: rgba(255,255,255,0.045) !important;
  transform: scale(0.997) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-row:focus-visible {
  outline: 2px solid rgba(124,92,255,0.55) !important;
  outline-offset: 2px !important;
}
/* Setting row copy block */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-copy {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em !important;
  color: #e7ebff !important;
  display: block !important;
  line-height: 1.3 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-subtitle {
  font-size: 11.5px !important;
  color: rgba(231,235,255,0.66) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  display: block !important;
}

/* ── 25.11  Logout row — special rose tint ── */
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-logout.ec-mobile-setting-row {
  background: rgba(244,63,94,0.06) !important;
  border-color: rgba(244,63,94,0.18) !important;
  color: #fda4af !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-logout.ec-mobile-setting-row:active {
  background: rgba(244,63,94,0.12) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-logout .ec-mobile-setting-icon {
  background: rgba(244,63,94,0.10) !important;
  border-color: rgba(244,63,94,0.22) !important;
  color: #fda4af !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-settings-logout .ec-mobile-setting-title {
  color: #fda4af !important;
}

/* ── 25.12  ecf-settings-card / ec-settings-card — subpage card containers ── */
body.ec-mobile-shell-active #ec-mobile-shell .ecf-settings-card,
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-card {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin: 0 0 12px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ecf-settings-card h2,
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-card h2 {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
  margin: 0 0 4px !important;
  letter-spacing: -0.01em !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ecf-settings-card p,
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-card p {
  font-size: 12px !important;
  color: rgba(231,235,255,0.42) !important;
  margin: 0 0 12px !important;
  line-height: 1.5 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-card-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

/* ── 25.13  ec-design-chip (settings card badge) ── */
body.ec-mobile-shell-active #ec-mobile-shell .ec-design-chip {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  flex: none !important;
  background: rgba(124,92,255,0.12) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #a78bfa !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-design-chip.key {
  background: rgba(34,211,238,0.10) !important;
  border-color: rgba(34,211,238,0.25) !important;
  color: #67e8f9 !important;
}

/* ── 25.14  ec-design-btn (settings action buttons) ── */
body.ec-mobile-shell-active #ec-mobile-shell .ec-design-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: opacity .14s ease, transform .12s ease !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(231,235,255,0.80) !important;
  white-space: nowrap !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-design-btn.primary {
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -4px rgba(124,92,255,0.55) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-design-btn:active {
  opacity: 0.80 !important;
  transform: scale(0.97) !important;
}

/* ── 25.15  ec-settings-pill (inline status pills in settings rows) ── */
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-pill {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(231,235,255,0.42) !important;
  flex: none !important;
}
body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-pill.on {
  background: rgba(52,211,153,0.12) !important;
  border-color: rgba(52,211,153,0.28) !important;
  color: #6ee7b7 !important;
}

/* ── 25.16  Reduced-motion fallbacks ── */
@media (prefers-reduced-motion: reduce) {
  body.ec-mobile-shell-active #ec-mobile-shell .ecf-ui-toggle,
  body.ec-mobile-shell-active #ec-mobile-shell .ecf-ui-toggle::after,
  body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-switch,
  body.ec-mobile-shell-active #ec-mobile-shell .ec-settings-switch::after,
  body.ec-mobile-shell-active #ec-mobile-shell .ec-mobile-setting-row,
  body.ec-mobile-shell-active #ec-mobile-shell .ec-design-btn {
    transition: none !important;
  }
}

/* END STEP 25 */


/* ═══════════════════════════════════════════════════════════════════════════
   STEP 26 — Phase D: Chat Screens Polish
   Scope: body.ec-mobile-shell-active #ec-mobile-shell  (zero leakage)
   All rules use !important — mobile-overrides.css is the override layer
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 26.1  Chat-list row — unread badge gradient ─────────────────────────── */
/* Badge <em> already has grad-brand from Phase 3 (P3-B line 6560).
   Here we add the box-shadow glow that was missing. */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-meta em {
  box-shadow: 0 0 10px rgba(124,92,255,0.50), 0 4px 12px rgba(99,102,241,0.38) !important;
}

/* ── 26.2  Chat-list row — time mono (reinforce for all breakpoints) ─────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chats"] .ecm-chat-row .ecm-chat-meta b {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(231,235,255,0.42) !important;
  letter-spacing: 0.02em !important;
}

/* ── 26.3  Open-chat head — avatar gradient + presence dot ──────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-chat-head-avatar {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #7c5cff 0%, #4f46e5 100%) !important;
  box-shadow:
    0 0 0 1.5px rgba(124,92,255,0.40),
    0 6px 18px rgba(124,92,255,0.30) !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-chat-head-avatar u {
  font-style: normal !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,0.92) !important;
  letter-spacing: -0.02em !important;
  z-index: 1 !important;
  position: relative !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-chat-head-avatar i {
  position: absolute !important;
  bottom: 2px !important;
  right: 2px !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: rgba(100,116,139,0.6) !important;
  border: 1.5px solid rgba(5,6,13,0.9) !important;
  display: block !important;
  z-index: 2 !important;
}

/* ── 26.4  Chat bubbles — outgoing grad-violet, incoming glass ───────────── */
/* Outgoing (.mine) — blueprint: grad-violet + asymmetric radius */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg.mine {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%) !important;
  border: 1px solid rgba(139,92,246,0.35) !important;
  box-shadow:
    0 6px 18px -8px rgba(124,92,255,0.60),
    inset 0 1px 0 rgba(255,255,255,0.14) !important;
  color: #fff !important;
  border-radius: 18px 18px 6px 18px !important;
  align-self: flex-end !important;
  margin-left: auto !important;
}
/* Incoming (.theirs) — blueprint: rgba(255,255,255,0.04) + line border */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg.theirs {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18) !important;
  color: #e7ebff !important;
  border-radius: 18px 18px 18px 6px !important;
  align-self: flex-start !important;
  margin-right: auto !important;
}
/* Fallback for unstyled .ecm-msg (no .mine / .theirs yet) */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg:not(.mine):not(.theirs) {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #e7ebff !important;
  border-radius: 18px 18px 18px 6px !important;
  align-self: flex-start !important;
}

/* ── 26.5  Bubble timestamp — JetBrains Mono 9.5px / opacity 0.6 ─────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg .ecm-msg-time,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg time,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg .ec-msg-time {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 400 !important;
  opacity: 0.60 !important;
  display: block !important;
  text-align: right !important;
  margin-top: 4px !important;
  letter-spacing: 0.02em !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg.mine .ecm-msg-time,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg.mine time {
  color: rgba(255,255,255,0.65) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg.theirs .ecm-msg-time,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ecm-chat-stream .ecm-msg.theirs time {
  color: rgba(231,235,255,0.50) !important;
}

/* ── 26.6  Composer — attach violet tint, input glass, send grad-cyan ────── */
/* Attach (+) button — blueprint: rgba(124,92,255,0.10) bg + violet border */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer .ec-mobile-composer-attach,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer button[data-ecm-attach] {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  transition: background 140ms ease, border-color 140ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
  flex-shrink: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer .ec-mobile-composer-attach:active,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer button[data-ecm-attach]:active {
  background: rgba(124,92,255,0.20) !important;
  border-color: rgba(124,92,255,0.45) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer .ec-mobile-composer-attach svg,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer button[data-ecm-attach] svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}

/* Input field — blueprint: rgba(255,255,255,0.04) bg + line-2 border */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer input#ec-mobile-msg-input,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer input[type="text"] {
  flex: 1 !important;
  min-width: 0 !important;
  height: 42px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #e7ebff !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  outline: none !important;
  transition: border-color 140ms ease, background 140ms ease !important;
  -webkit-appearance: none !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer input:focus {
  border-color: rgba(124,92,255,0.40) !important;
  background: rgba(124,92,255,0.06) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer input::placeholder {
  color: rgba(231,235,255,0.32) !important;
}

/* Send button — blueprint: grad-cyan + glow */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer .ec-mobile-composer-send,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer button[data-ecm-send],
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer button.primary {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #22d3ee 0%, #0ea5e9 100%) !important;
  border: none !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  box-shadow: 0 6px 18px -6px rgba(34,211,238,0.55) !important;
  transition: opacity 140ms ease, transform 140ms ease, box-shadow 140ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
  flex-shrink: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer .ec-mobile-composer-send:active,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer button[data-ecm-send]:active,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer button.primary:active {
  opacity: 0.82 !important;
  transform: scale(0.95) !important;
  box-shadow: 0 3px 10px -4px rgba(34,211,238,0.45) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer .ec-mobile-composer-send svg,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer button[data-ecm-send] svg,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer button.primary svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
}

/* Composer wrapper — glass surface */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ec-mobile-composer.ecm-composer {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  background: rgba(10,12,24,0.88) !important;
  backdrop-filter: blur(12px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.4) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 10 !important;
}

/* ── 26.7  Chat stream — date-divider pill ───────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ecm-chat-stream .ecm-date-divider,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ecm-chat-stream .ec-date-divider,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="chat"] .ecm-chat-stream [data-ecm-date-divider] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  color: rgba(231,235,255,0.42) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  align-self: center !important;
  margin: 8px auto !important;
  pointer-events: none !important;
}

/* ── 26.8  Vault panel — per-category icon tint (data-tone) ─────────────── */
/* data-tone="amber" → documents */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-tone="amber"] .ec-mobile-setting-icon,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-vault-kind="documents"] .ec-mobile-setting-icon {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.28) !important;
  color: #fbbf24 !important;
}
/* data-tone="cyan" → images */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-tone="cyan"] .ec-mobile-setting-icon,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-vault-kind="images"] .ec-mobile-setting-icon {
  background: rgba(34,211,238,0.10) !important;
  border-color: rgba(34,211,238,0.25) !important;
  color: #67e8f9 !important;
}
/* data-tone="rose" → videos */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-tone="rose"] .ec-mobile-setting-icon,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-vault-kind="videos"] .ec-mobile-setting-icon {
  background: rgba(244,63,94,0.10) !important;
  border-color: rgba(244,63,94,0.25) !important;
  color: #fb7185 !important;
}
/* data-tone="emerald" → notes */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-tone="emerald"] .ec-mobile-setting-icon,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-vault-kind="notes"] .ec-mobile-setting-icon {
  background: rgba(52,211,153,0.10) !important;
  border-color: rgba(52,211,153,0.25) !important;
  color: #6ee7b7 !important;
}
/* data-tone="violet" → passwords */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-tone="violet"] .ec-mobile-setting-icon,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-vault-kind="passwords"] .ec-mobile-setting-icon {
  background: rgba(124,92,255,0.12) !important;
  border-color: rgba(124,92,255,0.28) !important;
  color: #a78bfa !important;
}
/* Lock icon (.ecm-row-lock) — match accent colour of parent row */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-row-lock {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.04) !important;
  color: rgba(231,235,255,0.32) !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-row-lock svg {
  width: 14px !important;
  height: 14px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-tone="amber"] .ecm-row-lock { color: #fbbf24 !important; }
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-tone="cyan"] .ecm-row-lock { color: #67e8f9 !important; }
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-tone="rose"] .ecm-row-lock { color: #fb7185 !important; }
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-tone="emerald"] .ecm-row-lock { color: #6ee7b7 !important; }
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] [data-tone="violet"] .ecm-row-lock { color: #a78bfa !important; }

/* ── 26.9  Vault footnote card — gradient bg + shield glow ──────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-footnote.ecm-vault-footnote-2v {
  background:
    linear-gradient(135deg,
      rgba(124,92,255,0.14) 0%,
      rgba(34,211,238,0.08) 100%) !important;
  border: 1px solid rgba(124,92,255,0.22) !important;
  box-shadow: 0 8px 28px rgba(124,92,255,0.12) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-footnote-icon {
  color: #a78bfa !important;
  filter: drop-shadow(0 0 8px rgba(167,139,250,0.55)) !important;
}

/* ── 26.10  Profile card — avatar, name, status, EC-ID ──────────────────── */
/* Avatar — 64px / border-radius 18px / gradient bg + violet border + glow */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-profile-card > span:first-child {
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #7c5cff 0%, #4f46e5 55%, #22d3ee 100%) !important;
  border: 1.5px solid rgba(124,92,255,0.45) !important;
  box-shadow:
    0 0 0 1px rgba(124,92,255,0.20),
    0 12px 40px -12px rgba(124,92,255,0.55) !important;
  display: grid !important;
  place-items: center !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: rgba(255,255,255,0.92) !important;
  letter-spacing: -0.02em !important;
  flex-shrink: 0 !important;
}
/* Name — 20px / 700 / -0.02em */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-profile-card > div strong {
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #f4f7ff !important;
  line-height: 1.2 !important;
}
/* Tagline / small — JetBrains Mono / text-mute */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-profile-card > div small {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  color: rgba(231,235,255,0.48) !important;
  letter-spacing: 0.04em !important;
  margin-top: 2px !important;
}
/* Status badge <b> — emerald pill "✓ VERIFIZIERT" */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-profile-card > b {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(52,211,153,0.12) !important;
  border: 1px solid rgba(52,211,153,0.28) !important;
  color: #6ee7b7 !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  align-self: flex-start !important;
}

/* ── 26.11  Settings subpage back button — violet tint ───────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-subhead .ec-mobile-back,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-subhead .ecm-back,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-back {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 11px !important;
  background: rgba(124,92,255,0.10) !important;
  border: 1px solid rgba(124,92,255,0.25) !important;
  color: #c4b5fd !important;
  display: grid !important;
  place-items: center !important;
  font-size: 20px !important;
  line-height: 1 !important;
  padding: 0 !important;
  transition: background 140ms ease, border-color 140ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
  flex-shrink: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-back:active {
  background: rgba(124,92,255,0.20) !important;
  border-color: rgba(124,92,255,0.45) !important;
}

/* ── 26.12  Subpage content — group-label mono, row dividers ─────────────── */
/* Subpage group labels (eyebrow / section titles) */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-eyebrow,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-group-label,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-sub-group-label {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(231,235,255,0.42) !important;
  padding: 16px 0 6px !important;
}
/* Subpage content rows — consistent glass surface */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-row,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-sub-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 13px 16px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  margin-bottom: 6px !important;
  gap: 12px !important;
  transition: background 140ms ease !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-row:active,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-sub-row:active {
  background: rgba(124,92,255,0.08) !important;
}
/* Subpage card blocks */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-profile-sub-content .ec-mobile-sub-card,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-sub-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
  padding: 16px !important;
  margin-bottom: 8px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-sub-card strong {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #f4f7ff !important;
  letter-spacing: -0.01em !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-sub-card small {
  font-size: 12.5px !important;
  color: rgba(231,235,255,0.52) !important;
  line-height: 1.5 !important;
  display: block !important;
  margin-top: 3px !important;
}

/* ── 26.13  Settings rows — data-tone icon tint (More panel) ─────────────── */
/* Reinforce data-tone tinting for settings rows in the More panel */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="violet"] .ec-mobile-setting-icon {
  background: rgba(124,92,255,0.12) !important;
  border-color: rgba(124,92,255,0.28) !important;
  color: #a78bfa !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="cyan"] .ec-mobile-setting-icon {
  background: rgba(34,211,238,0.10) !important;
  border-color: rgba(34,211,238,0.25) !important;
  color: #67e8f9 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="amber"] .ec-mobile-setting-icon {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.28) !important;
  color: #fbbf24 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="emerald"] .ec-mobile-setting-icon {
  background: rgba(52,211,153,0.10) !important;
  border-color: rgba(52,211,153,0.25) !important;
  color: #6ee7b7 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="rose"] .ec-mobile-setting-icon {
  background: rgba(244,63,94,0.10) !important;
  border-color: rgba(244,63,94,0.25) !important;
  color: #fb7185 !important;
}

/* ── 26.14  Mobile modal overlay — dark glass backdrop ───────────────────── */
/* When a modal opens while mobile shell is active, darken the backdrop */
body.ec-mobile-shell-active .modal-overlay {
  background: rgba(5,6,13,0.82) !important;
  backdrop-filter: blur(8px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(8px) saturate(1.2) !important;
}
body.ec-mobile-shell-active .modal-overlay .modal {
  background: #11142a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 22px !important;
  box-shadow:
    0 0 0 1px rgba(124,92,255,0.15),
    0 24px 60px rgba(0,0,0,0.55) !important;
  color: #e7ebff !important;
  max-width: min(92vw, 420px) !important;
  padding: 24px !important;
}
body.ec-mobile-shell-active .modal-overlay .modal h2,
body.ec-mobile-shell-active .modal-overlay .modal h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #f4f7ff !important;
  margin-bottom: 8px !important;
}
body.ec-mobile-shell-active .modal-overlay .modal p,
body.ec-mobile-shell-active .modal-overlay .modal small {
  font-size: 13.5px !important;
  color: rgba(231,235,255,0.62) !important;
  line-height: 1.55 !important;
}
body.ec-mobile-shell-active .modal-overlay .modal input[type="text"],
body.ec-mobile-shell-active .modal-overlay .modal input[type="password"],
body.ec-mobile-shell-active .modal-overlay .modal input[type="email"],
body.ec-mobile-shell-active .modal-overlay .modal textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 12px !important;
  color: #e7ebff !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  outline: none !important;
}
body.ec-mobile-shell-active .modal-overlay .modal input:focus,
body.ec-mobile-shell-active .modal-overlay .modal textarea:focus {
  border-color: rgba(124,92,255,0.40) !important;
  background: rgba(124,92,255,0.06) !important;
}
body.ec-mobile-shell-active .modal-overlay .modal .btn,
body.ec-mobile-shell-active .modal-overlay .modal button[type="submit"],
body.ec-mobile-shell-active .modal-overlay .modal button.primary {
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 11px 20px !important;
  transition: opacity 140ms ease, transform 140ms ease !important;
}
body.ec-mobile-shell-active .modal-overlay .modal .btn.primary,
body.ec-mobile-shell-active .modal-overlay .modal button[type="submit"],
body.ec-mobile-shell-active .modal-overlay .modal button.primary {
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px -4px rgba(124,92,255,0.55) !important;
}
body.ec-mobile-shell-active .modal-overlay .modal .btn:not(.primary),
body.ec-mobile-shell-active .modal-overlay .modal button.secondary {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: rgba(231,235,255,0.72) !important;
}
body.ec-mobile-shell-active .modal-overlay .modal .btn:active,
body.ec-mobile-shell-active .modal-overlay .modal button:active {
  opacity: 0.80 !important;
  transform: scale(0.97) !important;
}

/* ── 26.15  New-chat-menu modal — bottom-sheet style ─────────────────────── */
/* #new-chat-menu-modal gets bottom-sheet treatment on mobile */
body.ec-mobile-shell-active #new-chat-menu-modal.modal-overlay {
  align-items: flex-end !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}
body.ec-mobile-shell-active #new-chat-menu-modal .modal {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 22px 22px 0 0 !important;
  padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
  margin: 0 !important;
}
body.ec-mobile-shell-active #new-chat-menu-modal .modal::before {
  content: "" !important;
  display: block !important;
  width: 36px !important;
  height: 4px !important;
  border-radius: 2px !important;
  background: rgba(255,255,255,0.18) !important;
  margin: 0 auto 16px !important;
}

/* ── 26.16  Reduced-motion fallbacks ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="chat"] .ec-mobile-composer .ec-mobile-composer-attach,
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="chat"] .ec-mobile-composer button[data-ecm-attach],
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="chat"] .ec-mobile-composer input,
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="chat"] .ec-mobile-composer .ec-mobile-composer-send,
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="chat"] .ec-mobile-composer button[data-ecm-send],
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="more"] .ecm-subpage-back,
  body.ec-mobile-shell-active .modal-overlay .modal .btn,
  body.ec-mobile-shell-active .modal-overlay .modal button {
    transition: none !important;
  }
}

/* END STEP 26 */


/* ═══════════════════════════════════════════════════════════════════════════
   STEP 27 — PHASE E: VAULT & PROFILE POLISH (DEEP FINISH)
   Scope: body.ec-mobile-shell-active #ec-mobile-shell
   Zero leakage — every rule scoped to #ec-mobile-shell
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 27.1  Vault panel — shell layout ────────────────────────────────────── */
/* Vault panel outer shell */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  background: transparent !important;
}
/* Vault app-top header bar */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px 10px !important;
  flex-shrink: 0 !important;
  gap: 12px !important;
}
/* Vault header title */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-head h1,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-head .ec-mobile-brand strong {
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: #f4f7ff !important;
}
/* Vault add (+) button */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-add,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-app-top-action {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #7c5cff 0%, #6366f1 45%, #22d3ee 100%) !important;
  border: none !important;
  color: #fff !important;
  display: grid !important;
  place-items: center !important;
  box-shadow: 0 4px 14px -4px rgba(124,92,255,0.55) !important;
  flex-shrink: 0 !important;
  transition: opacity 140ms ease, transform 140ms ease !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-add svg,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-app-top-action svg {
  width: 18px !important;
  height: 18px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-add:active,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-app-top-action:active {
  opacity: 0.80 !important;
  transform: scale(0.94) !important;
}

/* ── 27.2  Vault body scroll area ────────────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-shell,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-frame,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-body-scroll {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* ── 27.3  Vault search bar ──────────────────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-search,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-search {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 0 14px !important;
  height: 44px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 14px !important;
  flex-shrink: 0 !important;
  transition: border-color 140ms ease, background 140ms ease !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-search:focus-within,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-search:focus-within {
  border-color: rgba(124,92,255,0.35) !important;
  background: rgba(124,92,255,0.05) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-search-icon,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-search-icon {
  width: 16px !important;
  height: 16px !important;
  color: rgba(231,235,255,0.35) !important;
  flex-shrink: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-search input,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-search input {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: rgba(231,235,255,0.88) !important;
  font-family: "Inter", ui-sans-serif, sans-serif !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-search input::placeholder,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-search input::placeholder {
  color: rgba(231,235,255,0.30) !important;
}

/* ── 27.4  Vault hero / summary card ─────────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-summary,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-vault-hero {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  background:
    linear-gradient(135deg,
      rgba(124,92,255,0.16) 0%,
      rgba(99,102,241,0.10) 50%,
      rgba(34,211,238,0.08) 100%) !important;
  border: 1px solid rgba(124,92,255,0.22) !important;
  border-radius: 18px !important;
  box-shadow:
    0 0 0 1px rgba(124,92,255,0.10),
    0 12px 32px -12px rgba(124,92,255,0.30) !important;
  flex-shrink: 0 !important;
}
/* Shield icon in hero */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-summary-icon {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 14px !important;
  background: rgba(124,92,255,0.18) !important;
  border: 1px solid rgba(124,92,255,0.30) !important;
  display: grid !important;
  place-items: center !important;
  color: #a78bfa !important;
  filter: drop-shadow(0 0 10px rgba(167,139,250,0.50)) !important;
  flex-shrink: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-summary-icon svg {
  width: 22px !important;
  height: 22px !important;
}
/* Hero text block */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-summary > div,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-vault-hero > div {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-summary > div strong,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-vault-hero > div strong {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #f4f7ff !important;
  letter-spacing: -0.01em !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-summary > div small,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-vault-hero > div small {
  font-size: 12px !important;
  color: rgba(231,235,255,0.52) !important;
}
/* "GESCHÜTZT" badge */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-summary-badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 3px 10px !important;
  border-radius: 999px !important;
  background: rgba(52,211,153,0.12) !important;
  border: 1px solid rgba(52,211,153,0.28) !important;
  color: #6ee7b7 !important;
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ── 27.5  Vault usage bar ────────────────────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-usage {
  height: 4px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.08) !important;
  overflow: hidden !important;
  margin-top: 6px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-usage::after {
  content: "" !important;
  display: block !important;
  height: 100% !important;
  width: 18% !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, #7c5cff 0%, #22d3ee 100%) !important;
}

/* ── 27.6  Vault categories eyebrow label ────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-eyebrow {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: rgba(231,235,255,0.42) !important;
  padding: 4px 0 2px !important;
  flex-shrink: 0 !important;
}

/* ── 27.7  Vault categories grid — row layout ────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-categories,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-vault-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  flex-shrink: 0 !important;
}
/* Each vault category row */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-categories .ecm-row,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-vault-grid .ecm-row,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-categories .ec-mobile-setting-row,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-vault-grid .ec-mobile-setting-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 16px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 16px !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 140ms ease, border-color 140ms ease, transform 120ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-categories .ecm-row:active,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-vault-grid .ecm-row:active,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-categories .ec-mobile-setting-row:active,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-vault-grid .ec-mobile-setting-row:active {
  background: rgba(255,255,255,0.06) !important;
  transform: scale(0.985) !important;
}
/* Row icon tile */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-setting-icon {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-row-ico svg,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-setting-icon svg {
  width: 18px !important;
  height: 18px !important;
}
/* Row meta (name + desc) */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-row-meta,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-setting-copy {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-row-name,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-setting-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ecm-row-desc,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-setting-subtitle {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: rgba(231,235,255,0.42) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── 27.8  Vault footnote card — layout ──────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-footnote {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  border-radius: 16px !important;
  flex-shrink: 0 !important;
  margin-bottom: 8px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-footnote-copy {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-footnote-copy strong {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
  letter-spacing: -0.01em !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-footnote-copy small {
  font-size: 11.5px !important;
  color: rgba(231,235,255,0.52) !important;
  line-height: 1.4 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-footnote-icon {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="vault"] .ec-mobile-vault-footnote-icon svg {
  width: 24px !important;
  height: 24px !important;
}

/* ── 27.9  Profile panel — shell layout ──────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  overflow: hidden !important;
  background: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-shell,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-body {
  flex: 1 1 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-frame,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-body-scroll {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}

/* ── 27.10  Profile header area ──────────────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-head,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-profile-head {
  padding: 16px 20px 12px !important;
  flex-shrink: 0 !important;
}

/* ── 27.11  Profile card — full layout ───────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-profile-card,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-profile-card-2v {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 18px !important;
  background:
    linear-gradient(135deg,
      rgba(124,92,255,0.12) 0%,
      rgba(99,102,241,0.08) 50%,
      rgba(34,211,238,0.06) 100%) !important;
  border: 1px solid rgba(124,92,255,0.20) !important;
  border-radius: 20px !important;
  box-shadow:
    0 0 0 1px rgba(124,92,255,0.08),
    0 12px 40px -12px rgba(124,92,255,0.25) !important;
  margin-bottom: 16px !important;
  flex-shrink: 0 !important;
}
/* Profile card text block */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-profile-card > div {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

/* ── 27.12  Profile settings list — eyebrow + rows ───────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-more-list,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-settings-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  flex-shrink: 0 !important;
}
/* Settings rows in More panel */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ecm-row,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-more-list .ecm-row,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-settings-list .ecm-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(255,255,255,0.055) !important;
  border-radius: 14px !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  margin-bottom: 5px !important;
  transition: background 140ms ease, border-color 140ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ecm-row:active,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-row:active,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-more-list .ecm-row:active {
  background: rgba(124,92,255,0.08) !important;
  border-color: rgba(124,92,255,0.18) !important;
}
/* Settings row icon tile */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-icon,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-more-list .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-settings-list .ecm-row-ico {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ecm-row-ico svg,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-icon svg,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-more-list .ecm-row-ico svg {
  width: 16px !important;
  height: 16px !important;
}
/* Settings row meta */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ecm-row-meta,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-copy,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-more-list .ecm-row-meta {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ecm-row-name,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-title,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-more-list .ecm-row-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
  letter-spacing: -0.01em !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ecm-row-desc,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-subtitle,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-more-list .ecm-row-desc {
  font-size: 11.5px !important;
  color: rgba(231,235,255,0.42) !important;
}
/* Chevron */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ecm-row-chev,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-chevron,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-more-list .ecm-row-chev {
  color: rgba(231,235,255,0.28) !important;
  flex-shrink: 0 !important;
  display: grid !important;
  place-items: center !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ecm-row-chev svg,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-categories .ec-mobile-setting-chevron svg,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-more-list .ecm-row-chev svg {
  width: 16px !important;
  height: 16px !important;
}

/* ── 27.13  Settings rows — data-tone icon tints (More panel) ────────────── */
/* violet */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="violet"] .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="violet"] .ec-mobile-setting-icon {
  background: rgba(124,92,255,0.12) !important;
  border-color: rgba(124,92,255,0.28) !important;
  color: #a78bfa !important;
}
/* cyan */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="cyan"] .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="cyan"] .ec-mobile-setting-icon {
  background: rgba(34,211,238,0.10) !important;
  border-color: rgba(34,211,238,0.25) !important;
  color: #67e8f9 !important;
}
/* amber */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="amber"] .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="amber"] .ec-mobile-setting-icon {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.28) !important;
  color: #fbbf24 !important;
}
/* emerald */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="emerald"] .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="emerald"] .ec-mobile-setting-icon {
  background: rgba(52,211,153,0.10) !important;
  border-color: rgba(52,211,153,0.25) !important;
  color: #6ee7b7 !important;
}
/* rose */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="rose"] .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] [data-tone="rose"] .ec-mobile-setting-icon {
  background: rgba(244,63,94,0.10) !important;
  border-color: rgba(244,63,94,0.25) !important;
  color: #fb7185 !important;
}

/* ── 27.14  Profile logout row ───────────────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-logout {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 16px !important;
  background: rgba(244,63,94,0.06) !important;
  border: 1px solid rgba(244,63,94,0.18) !important;
  border-radius: 14px !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  margin-top: 12px !important;
  margin-bottom: 8px !important;
  transition: background 140ms ease, border-color 140ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-logout:active {
  background: rgba(244,63,94,0.12) !important;
  border-color: rgba(244,63,94,0.30) !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-logout-icon,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-logout .ec-mobile-setting-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  background: rgba(244,63,94,0.12) !important;
  border: 1px solid rgba(244,63,94,0.25) !important;
  color: #fb7185 !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-logout-icon svg,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-logout .ec-mobile-setting-icon svg {
  width: 16px !important;
  height: 16px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-logout-copy,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-logout .ec-mobile-setting-copy {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-logout .ec-mobile-setting-title,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-logout .ecm-row-name {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #fb7185 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-logout .ec-mobile-setting-subtitle,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-logout .ecm-row-desc {
  font-size: 11.5px !important;
  color: rgba(251,113,133,0.60) !important;
}

/* ── 27.15  Subpage shell — layout & scroll ──────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-subpage,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-shell {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: #0a0c18 !important;
  z-index: 20 !important;
  overflow: hidden !important;
}
/* Subpage header row */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-subhead,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 14px 18px 12px !important;
  flex-shrink: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
/* Subpage title + subtitle */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-head-copy {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-head-copy h1 {
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #f4f7ff !important;
  margin: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-settings-head-copy p {
  font-size: 12px !important;
  color: rgba(231,235,255,0.42) !important;
  margin: 0 !important;
}
/* Subpage content scroll area */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ec-mobile-profile-sub-content,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content {
  flex: 1 1 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  padding: 16px 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

/* ── 27.16  Subpage dynamically-rendered rows (ec-mobile-sub-row) ─────────── */
/* These rows are injected by JS into subpage content containers */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-setting-row,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ecm-setting-row,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-sub-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 14px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  width: 100% !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 140ms ease !important;
  -webkit-tap-highlight-color: transparent !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-setting-row:active,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ecm-setting-row:active,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-sub-row:active {
  background: rgba(124,92,255,0.08) !important;
}
/* Subpage row icon tile */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-setting-icon {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ecm-row-ico svg,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-setting-icon svg {
  width: 16px !important;
  height: 16px !important;
}
/* Subpage row meta */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ecm-row-meta,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-setting-copy {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ecm-row-name,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-setting-title,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content strong {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #e7ebff !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ecm-row-desc,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-setting-subtitle,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content small {
  font-size: 11.5px !important;
  color: rgba(231,235,255,0.42) !important;
}
/* Subpage row chevron */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-setting-chevron,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ecm-row-chev {
  color: rgba(231,235,255,0.28) !important;
  flex-shrink: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
}

/* ── 27.17  Subpage data-tone icon tints ─────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content [data-tone="violet"] .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content [data-tone="violet"] .ec-mobile-setting-icon {
  background: rgba(124,92,255,0.12) !important;
  border-color: rgba(124,92,255,0.28) !important;
  color: #a78bfa !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content [data-tone="cyan"] .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content [data-tone="cyan"] .ec-mobile-setting-icon {
  background: rgba(34,211,238,0.10) !important;
  border-color: rgba(34,211,238,0.25) !important;
  color: #67e8f9 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content [data-tone="amber"] .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content [data-tone="amber"] .ec-mobile-setting-icon {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.28) !important;
  color: #fbbf24 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content [data-tone="emerald"] .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content [data-tone="emerald"] .ec-mobile-setting-icon {
  background: rgba(52,211,153,0.10) !important;
  border-color: rgba(52,211,153,0.25) !important;
  color: #6ee7b7 !important;
}
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content [data-tone="rose"] .ecm-row-ico,
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content [data-tone="rose"] .ec-mobile-setting-icon {
  background: rgba(244,63,94,0.10) !important;
  border-color: rgba(244,63,94,0.25) !important;
  color: #fb7185 !important;
}

/* ── 27.18  Subpage ec-mobile-sub-card ───────────────────────────────────── */
body.ec-mobile-shell-active #ec-mobile-shell
  [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-sub-card {
  padding: 16px !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
  border-radius: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* ── 27.19  Reduced-motion fallbacks ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="vault"] .ec-mobile-vault-add,
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="vault"] .ec-mobile-app-top-action,
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="vault"] .ec-mobile-vault-search,
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="vault"] .ec-mobile-search,
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="vault"] .ec-mobile-vault-categories .ecm-row,
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="vault"] .ecm-vault-grid .ecm-row,
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="more"] .ec-mobile-settings-categories .ecm-row,
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="more"] .ecm-more-list .ecm-row,
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="more"] .ec-mobile-settings-logout,
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-setting-row,
  body.ec-mobile-shell-active #ec-mobile-shell
    [data-ecm-panel="more"] .ecm-subpage-content .ec-mobile-sub-row {
    transition: none !important;
  }
}

/* END STEP 27 */