/* ==========================================================================
   dancemore visual ricing — chat.dancemore.xyz
   Ocean palette + ocean accent, Cinny-inspired density

   Ocean palette reference:
     Deepest  #0c1520    Dark     #111c28    Timeline #1a2836
     Surface  #1e2c3a    Border   #243444    Focus    #2e4050
     Separator #2a3a4c   Secondary #6a8098   Subtext  #8aa0b8
     Text     #e0ecf4

   Accent colors:
     Ocean    #4a8db7              Red      #f38ba8
     Yellow   #f9e2af              Green    #a6e3a1
     Blue     #99c7ff
   ========================================================================== */

/* --- Compound token overrides (Ocean palette) ----------------------------- */
/* Element's Compound design system uses --cpd-* tokens for all surfaces.
   Custom themes only set legacy vars, so we must override cpd tokens too. */

body.cpd-theme-dark,
body.cpd-theme-light {
    /* Backgrounds */
    --cpd-color-bg-canvas-default: #111c28;
    --cpd-color-bg-canvas-disabled: #0e1722;
    --cpd-color-bg-subtle-primary: #111c28;
    --cpd-color-bg-subtle-secondary: #0c1520;
    --cpd-color-bg-action-primary-rest: #4a8db7;    /* Ocean */
    --cpd-color-bg-action-primary-hovered: #5a9dc7;
    --cpd-color-bg-action-primary-pressed: #3a7da7;
    --cpd-color-bg-action-secondary-rest: #111c28;
    --cpd-color-bg-action-secondary-hovered: rgba(36, 52, 68, 0.4);
    --cpd-color-bg-action-secondary-pressed: rgba(46, 64, 80, 0.5);
    --cpd-color-bg-accent-rest: #4a8db7;             /* Ocean — toggles, switches */
    --cpd-color-bg-accent-hovered: #5a9dc7;
    --cpd-color-bg-accent-pressed: #3a7da7;
    --cpd-color-bg-critical-primary: #f38ba8;       /* Red */
    --cpd-color-bg-critical-subtle: #2a1a1a;
    --cpd-color-bg-info-subtle: #1a1e26;
    --cpd-color-bg-success-subtle: #1a2618;          /* Muted green — toggled FacePile bg */
    --cpd-color-bg-decorative-1: #2a2018;           /* Warm subtle badge bg */
    --cpd-color-bg-decorative-2: #1a1e26;           /* Cool subtle badge bg */

    /* Text */
    --cpd-color-text-primary: #e0ecf4;
    --cpd-color-text-secondary: #8aa0b8;
    --cpd-color-text-placeholder: #4a6070;
    --cpd-color-text-disabled: #2a3a4c;
    --cpd-color-text-action-accent: #4a8db7;        /* Ocean */
    --cpd-color-text-action-primary: #111c28;
    --cpd-color-text-critical-primary: #f38ba8;     /* Red */
    --cpd-color-text-link-external: #99c7ff;
    --cpd-color-text-success-primary: #a6e3a1;      /* Green */
    --cpd-color-text-info-primary: #99c7ff;
    --cpd-color-text-on-solid-primary: #111c28;

    /* Borders */
    --cpd-color-border-interactive-primary: #2a3a4c;
    --cpd-color-border-interactive-hovered: #6a8098;
    --cpd-color-border-interactive-secondary: #243444;
    --cpd-color-border-disabled: #1e2c3a;
    --cpd-color-border-focused: #99c7ff;
    --cpd-color-border-critical-primary: #f38ba8;     /* Red */
    --cpd-color-border-critical-subtle: #3a2020;
    --cpd-color-border-success-subtle: #1a3020;
    --cpd-color-border-info-subtle: #1a2640;

    /* Icons */
    --cpd-color-icon-primary: #e0ecf4;
    --cpd-color-icon-secondary: #8aa0b8;
    --cpd-color-icon-tertiary: #4a6070;
    --cpd-color-icon-quaternary: #243444;
    --cpd-color-icon-accent-primary: #4a8db7;       /* Ocean — toggled header icons */
    --cpd-color-icon-accent-tertiary: #4a8db7;      /* Ocean */
    --cpd-color-icon-critical-primary: #f38ba8;     /* Red */
    --cpd-color-icon-success-primary: #a6e3a1;      /* Green */
    --cpd-color-icon-on-solid-primary: #111c28;

    /* Font override for Compound */
    --cpd-font-family-sans: "Inter", sans-serif;
}

/* --- Palette-matched room info badges ------------------------------------ */

[class*="_badge_"] {
    background-color: #1e2c3a !important;
    color: #8aa0b8 !important;
}

/* --- Palette-matched notification dots (peach instead of white) ---------- */

.mx_NotificationBadge {
    background-color: #4a8db7 !important;
    color: #111c28 !important;
}

/* --- Pull presence/encryption badges closer to small avatars ------------- */

.mx_RoomAvatarView .mx_RoomAvatarView_icon {
    left: auto !important;
    right: -2px !important;
    bottom: -2px !important;
}

/* --- Global rounded-square avatars (Cinny-style) ------------------------- */

[data-type="round"] {
    border-radius: 20% !important;
}

/* --- IRC continuation: hide repeated avatar/sender/timestamp ------------- */

.mx_EventTile[data-layout="irc"].mx_EventTile_continuation .mx_EventTile_avatar,
.mx_EventTile[data-layout="irc"].mx_EventTile_continuation .mx_DisambiguatedProfile {
    visibility: hidden;
}

.mx_EventTile[data-layout="irc"].mx_EventTile_continuation .mx_MessageTimestamp {
    visibility: hidden;
}

/* --- Flatten shadows ----------------------------------------------------- */

.mx_ContextualMenu,
.mx_InteractiveTooltip {
    box-shadow: none !important;
}

/* --- Muted hover states -------------------------------------------------- */

.mx_EventTile[data-layout="irc"]:hover .mx_EventTile_line {
    background-color: rgba(36, 52, 68, 0.3) !important;
}

/* --- De-emphasize system messages ---------------------------------------- */

.mx_EventTile.mx_EventTile_info {
    opacity: 0.5;
}

.mx_EventTile.mx_EventTile_info .mx_EventTile_avatar {
    display: none;
}

/* --- Compact URL previews ------------------------------------------------ */

.mx_LinkPreviewWidget {
    margin: 4px 0 !important;
}

.mx_LinkPreviewWidget_image {
    flex: 0 0 60px !important;
}

.mx_LinkPreviewWidget_description {
    -webkit-line-clamp: 1 !important;
}

/* --- Compact room header ------------------------------------------------- */

.mx_RoomHeader {
    height: 40px !important;
    min-height: 40px !important;
}

/* Room header avatar: 24px fits the 40px header with breathing room */
.mx_RoomHeader .mx_BaseAvatar {
    --cpd-avatar-size: 24px !important;
    width: 24px !important;
    height: 24px !important;
}

/* --- Palette-matched scrollbar ------------------------------------------- */

html {
    scrollbar-color: #243444 transparent !important;
}

/* ==========================================================================
   Cinny-density overrides — tighter spacing, smaller avatars, narrower panels
   Measured from Cinny side-by-side comparison (Feb 2025)
   ========================================================================== */

/* --- 2-tone layout with sharp panel borders (Cinny-style) --------------- */

.mx_SpacePanel {
    background-color: #0c1520 !important;
    border-right: 1px solid #243444 !important;
    padding-top: 12px !important;
}

/* Move user avatar to bottom of space panel (Cinny-style) */
/* Order: spaces (0) → threads (5) → avatar (6) → settings (7) */
.mx_SpacePanel .mx_UserMenu {
    order: 10 !important;
    margin: 4px 0 14px !important;
    padding: 0 !important;
    width: 100% !important;
}

.mx_SpacePanel .mx_UserMenu_contextMenuButton {
    justify-content: center !important;
}

.mx_ThreadsActivityCentre_container {
    order: 5 !important;
}

.mx_QuickSettingsButton {
    order: 7 !important;
}

/* Hide the expand/collapse toggle next to avatar (not needed when collapsed) */
.mx_SpacePanel .mx_SpacePanel_toggleCollapse {
    display: none !important;
}

/* Hide "Create a space" button — unnecessary chrome */
.mx_SpaceItem_new {
    display: none !important;
}

.mx_LeftPanel {
    border-right: 1px solid #243444 !important;
}

.mx_RoomHeader {
    border-bottom: 1px solid #243444 !important;
}

/* Timeline content area only gets the lighter bg */
.mx_RoomView_body {
    background-color: #1a2836 !important;
}

/* --- Compact room list items (36px like Cinny) --------------------------- */

.mx_RoomListItemView {
    height: 36px !important;
    min-height: 36px !important;
}

/* --- Smaller rounded-square room list avatars (Cinny-style) -------------- */

.mx_RoomListItemView .mx_BaseAvatar {
    --cpd-avatar-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
}

.mx_RoomListItemView .mx_BaseAvatar img {
    width: 20px !important;
    height: 20px !important;
}

/* --- Tighter timeline left padding (IRC mode) ---------------------------- */

.mx_RoomView_MessageList {
    --RoomView_MessageList-padding: 8px !important;
    padding-left: 8px !important;
}

/* --- Compact message spacing (IRC mode) ---------------------------------- */

.mx_EventTile[data-layout="irc"] {
    margin-bottom: 1px !important;
}

.mx_EventTile[data-layout="irc"] .mx_EventTile_line {
    line-height: 20px !important;
}

/* --- Smaller timeline avatars (IRC mode) --------------------------------- */

.mx_EventTile[data-layout="irc"] .mx_EventTile_avatar img,
.mx_EventTile[data-layout="irc"] .mx_EventTile_avatar .mx_BaseAvatar {
    width: 20px !important;
    height: 20px !important;
}

/* --- Hide read receipt avatars (80px margin savings) --------------------- */

.mx_EventTile_readAvatars {
    display: none !important;
}

/* --- Compact composer ---------------------------------------------------- */

.mx_MessageComposer {
    padding: 4px 8px !important;
}

/* --- Remove E2E lock icon gap from composer ------------------------------ */

.mx_MessageComposer_wrapper {
    padding-left: 8px !important;
}

/* --- Tighter room list header -------------------------------------------- */

.mx_LeftPanel .mx_RoomListHeader {
    padding: 4px 8px !important;
}

/* --- Hide search bar + explore rooms button (use Ctrl+K instead) --------- */

.mx_LeftPanel [role="search"] {
    display: none !important;
}

/* --- Hide threads UI everywhere ------------------------------------------ */

.mx_ThreadsActivityCentre_container {
    display: none !important;
}

button[aria-label="Threads"],
[role="menuitem"][aria-label="Threads"] {
    display: none !important;
}

/* "Reply in thread" in message context menu */
button[aria-label="Reply in thread"],
[role="menuitem"][aria-label="Reply in thread"] {
    display: none !important;
}

/* Thread panel and thread summary/preview under messages */
.mx_ThreadPanel,
.mx_ThreadSummary,
.mx_ThreadInfo {
    display: none !important;
}

/* --- Hide right-panel "Search messages" box ------------------------------ */

.mx_RoomSummaryCard_search {
    display: none !important;
}

/* --- Hide "Discovery" / identity server section in settings -------------- */

.mx_SetIdServer,
.mx_SettingsSubsection:has(.mx_SetIdServer),
.mx_DiscoverySettings {
    display: none !important;
}

/* --- Hide Extensions and Labs tabs in settings --------------------------- */

/* DEBUG: unhidden for debugging sessions/verification
[aria-controls="mx_tabpanel_USER_SECURITY_TAB"],
*/
[aria-controls="mx_tabpanel_USER_LABS_TAB"],
[data-testid="settings-tab-Extensions"],
[aria-controls*="EXTENSIONS"] {
    display: none !important;
}

/* --- Hide Encryption tab (managed by whalekey module) -------------------- */
/* DEBUG: unhidden for debugging sessions/verification
[aria-controls="mx_tabpanel_USER_ENCRYPTION_TAB"] {
    display: none !important;
}
*/

/* --- Hide "Personal info" section (email/phone) on Account tab ----------- */
/* SSO-only deployment — 3PIDs are managed in Keycloak, not Element.
   The div has no class; target it as the bare div between UserProfileSettings
   and the Account subsection. */

.mx_UserProfileSettings ~ div:not([class]):has(> .mx_SettingsSubsection),
.mx_UserProfileSettings ~ .mx_SettingsSubsection {
    display: none !important;
}

/* --- Hide whalekey escrow device from Sessions list ---------------------- */
/* DEBUG: unhidden for debugging sessions/verification
.mx_FilteredDeviceList_listItem:has(#device-tile-checkbox-DANCEMORE_WHALEKEY_ESCROW) {
    display: none !important;
}
*/

/* --- Hide "Upcoming features" section (Labs tab content only) ------------ */

#mx_tabpanel_USER_LABS_TAB .mx_SettingsSection:has(> .mx_Heading_h3) {
    display: none !important;
}

/* --- Hide "Link new device" / QR section in Sessions settings ------------ */
/* DEBUG: unhidden for debugging sessions/verification
.mx_SettingsSubsection:has(.mx_LoginWithQRSection) {
    display: none !important;
}
*/

/* --- Hide "Message search" section in Security settings ------------------ */

.mx_SettingsSubsection:has(> .mx_SettingsSubsectionHeading [id*="message_search"]),
.mx_SettingsSubsection:has(> .mx_SettingsSubsectionHeading [id*="Message_search"]) {
    display: none !important;
}

/* --- Hide "Export chat" menu item ---------------------------------------- */

button[aria-label="Export chat"],
[role="menuitem"][aria-label="Export chat"] {
    display: none !important;
}

/* --- Hide theme and layout pickers (enforced by migrate-settings.js) ----- */

.mx_SettingsSubsection:has(input[name="systemTheme"]),
.mx_SettingsSubsection:has(.mx_LayoutSwitcher_LayoutSelector),
.mx_ThemeChoicePanel,
.mx_QuickThemeSwitcher {
    display: none !important;
}

/* --- Palette-matched bubble layout backgrounds --------------------------- */

.mx_EventTile[data-layout="bubble"]:not(.mx_EventTile_self) .mx_EventTile_line {
    background-color: #1e2c3a !important;
}

.mx_EventTile[data-layout="bubble"].mx_EventTile_self .mx_EventTile_line {
    background-color: #243444 !important;
}

/* ==========================================================================
   WHALEKEY_ESCROW: crypto UI suppression

   Strategy:
   - JS auto-clicks through every verification phase (recovery key, Done,
     SAS "They match", QR confirm) via MutationObserver
   - Module provides keys silently via getSecretStorageKey() hook
   - CSS hides dialogs that shouldn't appear at all, and makes the
     auto-clicked flows invisible so users see zero crypto friction
   ========================================================================== */

/* DEBUG: entire verification/crypto UI suppression commented out for debugging
   Restore by removing the comment wrappers below.

--- Hide the entire verification flow (JS clicks through it invisibly) --

SetupEncryptionBody: the "Confirm your identity" full-screen card.
   JS auto-clicks "Use recovery key" then "Done" — hide the whole thing.
.mx_SetupEncryptionBody {
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: auto !important;
}

SAS emoji comparison — JS auto-clicks "They match"
.mx_VerificationShowSas {
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: auto !important;
}

QR code verification panel
.mx_VerificationPanel_QRPhase_startOptions,
.mx_VerificationPanel_qrCode,
.mx_VerificationPanel_reciprocateButtons {
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: auto !important;
}

"Done" screen after verification — JS auto-clicks
.mx_CompleteSecurity_actionRow {
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: auto !important;
}

Verification request dialog wrapper
.mx_InfoDialog:has(.mx_VerificationShowSas),
.mx_InfoDialog:has(.mx_VerificationPanel_QRPhase_startOptions) {
    visibility: hidden !important;
    pointer-events: auto !important;
}

--- Hard-hide crypto dialogs (wrapper + content) ------------------------
Use :has() to target ONLY wrappers containing crypto content.
   DO NOT hide mx_Dialog_staticWrapper globally — Settings uses it too.

SetupEncryptionBody wrapper: use opacity:0 (NOT display:none or
   visibility:hidden + position offscreen) so React fully renders all child
   phases (SAS emojis, "They match", "Done").  display:none kills the DOM;
   visibility:hidden + fixed/-9999px can prevent phase transitions from
   rendering.  opacity:0 keeps the element in normal flow, fully laid-out,
   with all children rendered — just invisible.
.mx_Dialog_wrapper:has(.mx_SetupEncryptionBody) {
    opacity: 0 !important;
    pointer-events: auto !important;
}

These dialogs are fully handled by the module (key injection) — no JS
   interaction needed, safe to hard-hide with display:none.
.mx_Dialog_wrapper:has(.mx_AccessSecretStorageDialog),
.mx_Dialog_wrapper:has(.mx_CreateSecretStorageDialog),
.mx_Dialog_wrapper:has(.mx_RestoreKeyBackupDialog),
.mx_Dialog_wrapper:has(.mx_ChangeRecoveryKey),
.mx_Dialog_wrapper:has(.mx_ResetIdentityDialog) {
    display: none !important;
}

Inner content fallback (in case wrapper :has() doesn't match)
.mx_CreateSecretStorageDialog,
.mx_AccessSecretStorageDialog,
.mx_RestoreKeyBackupDialog,
.mx_ChangeRecoveryKey,
.mx_ResetIdentityDialog {
    display: none !important;
}

--- Hide crypto toasts (but keep clickable for JS auto-resolve) ---------

All crypto toasts: invisible but clickable so JS can auto-accept
.mx_ToastContainer {
    visibility: hidden !important;
    position: absolute !important;
    pointer-events: auto !important;
}

Snooze / nag about unverified devices
.mx_snooze_bulk_unverified_device_nag {
    display: none !important;
}

Recovery panel out of sync warnings
.mx_RecoveryPanelOutOfSync {
    display: none !important;
}

Key backup status warnings in settings
.mx_SettingsSubsection:has(.mx_SecureBackupPanel) .mx_SettingsSubsection_warning {
    display: none !important;
}

E2E warning shields in room headers (the orange/red ones)
.mx_E2EIcon[aria-label*="warning"],
.mx_E2EIcon[aria-label*="Warning"] {
    display: none !important;
}
*/

/* ==========================================================================
   WHALEKEY: hide crypto setup dialogs so the auto-clicker can handle them
   invisibly. Static CSS guarantees the rule is loaded before React renders.
   The auto-clicker's programmatic .click() still works on opacity:0 elements.
   ========================================================================== */

/* Dialog hiding is handled by dancemore-custom.js injecting a <style> into
   <head> at parse time. See the cloakStyleEl IIFE. */

/* ==========================================================================
   WHALEKEY_ESCROW: branded overlay during auto-verification
   ========================================================================== */

/* --- Backdrop: deep ocean radial gradient -------------------------------- */

#whalekey-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at 50% 60%, #0d2137 0%, #050e18 70%, #000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5000;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

#whalekey-overlay.preemptive {
    transition: none !important;
}

#whalekey-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* --- Card: dark ocean glass ---------------------------------------------- */

#whalekey-overlay-card {
    background: linear-gradient(180deg, #0f1f30 0%, #162233 40%, #1a2a3a 100%);
    border: 1px solid rgba(100, 160, 220, 0.15);
    border-top: 3px solid #4a8db7;
    border-radius: 16px;
    max-width: 480px;
    width: 88%;
    padding: 44px 40px 36px;
    text-align: center;
    font-family: "Inter", sans-serif;
    box-shadow:
        0 0 60px rgba(40, 100, 160, 0.08),
        0 20px 40px rgba(0, 0, 0, 0.4);
}

/* --- Whale: bobbing + spouting ------------------------------------------- */

#whalekey-overlay-whale {
    font-size: 56px;
    line-height: 1;
    margin-bottom: 20px;
    animation: whalekey-bob 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(60, 140, 200, 0.3));
}

@keyframes whalekey-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-8px) rotate(2deg); }
}

/* --- Title --------------------------------------------------------------- */

#whalekey-overlay-title {
    color: #c8dff0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

/* --- Status text --------------------------------------------------------- */

#whalekey-overlay-status {
    color: #8bafc8;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* --- Wave dots: three animated bubbles ----------------------------------- */

#whalekey-overlay-waves {
    display: flex;
    justify-content: center;
    gap: 8px;
}

#whalekey-overlay-waves span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a8db7;
    animation: whalekey-wave 1.4s ease-in-out infinite;
}

#whalekey-overlay-waves span:nth-child(2) {
    animation-delay: 0.2s;
}

#whalekey-overlay-waves span:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes whalekey-wave {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-6px); }
}

/* --- Footnote ------------------------------------------------------------ */

#whalekey-overlay-footnote {
    color: #3d5a70;
    font-size: 11px;
    line-height: 1.4;
    margin-top: 20px;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   WHALEKEY_ESCROW: migration modal for existing users
   ========================================================================== */

/* --- Backdrop: same deep ocean as overlay -------------------------------- */

#whalekey-migration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: radial-gradient(ellipse at 50% 60%, #0d2137 0%, #050e18 70%, #000 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 301;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

#whalekey-migration.visible {
    opacity: 1;
    pointer-events: auto;
}

/* --- Card: reuse overlay glass style ------------------------------------- */

#whalekey-migration-card {
    background: linear-gradient(180deg, #0f1f30 0%, #162233 40%, #1a2a3a 100%);
    border: 1px solid rgba(100, 160, 220, 0.15);
    border-top: 3px solid #4a8db7;
    border-radius: 16px;
    max-width: 520px;
    width: 90%;
    padding: 36px 40px 32px;
    text-align: center;
    font-family: "Inter", sans-serif;
    box-shadow:
        0 0 60px rgba(40, 100, 160, 0.08),
        0 20px 40px rgba(0, 0, 0, 0.4);
}

#whalekey-migration-whale {
    font-size: 48px;
    line-height: 1;
    margin-bottom: 12px;
    animation: whalekey-bob 3s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(60, 140, 200, 0.3));
}

#whalekey-migration-title {
    color: #c8dff0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* --- Body text ----------------------------------------------------------- */

#whalekey-migration-body p {
    color: #8bafc8;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 12px;
    text-align: left;
}

.whalekey-migration-hint {
    font-size: 12px !important;
    color: #5a8aaa !important;
}

.whalekey-migration-hint code {
    background: rgba(74, 141, 183, 0.15);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
    color: #8bafc8;
}

/* --- Input --------------------------------------------------------------- */

#whalekey-migration-input {
    width: 100%;
    padding: 12px 14px;
    margin: 8px 0;
    background: rgba(5, 14, 24, 0.6);
    border: 1px solid rgba(100, 160, 220, 0.2);
    border-radius: 8px;
    color: #c8dff0;
    font-family: "JetBrains Mono", "Fira Code", monospace;
    font-size: 14px;
    letter-spacing: 1px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

#whalekey-migration-input:focus {
    border-color: #4a8db7;
}

#whalekey-migration-input::placeholder {
    color: #3d5a70;
    letter-spacing: 0.5px;
}

/* --- Error message ------------------------------------------------------- */

#whalekey-migration-error {
    color: #f38ba8;
    font-size: 13px;
    min-height: 20px;
    margin: 4px 0;
}

/* --- Buttons ------------------------------------------------------------- */

#whalekey-migration-buttons,
#whalekey-migration-reset-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.whalekey-btn-primary {
    padding: 10px 20px;
    background: #4a8db7;
    border: none;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.whalekey-btn-primary:hover {
    background: #5a9dc7;
}

.whalekey-btn-secondary {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid rgba(100, 160, 220, 0.3);
    border-radius: 8px;
    color: #8bafc8;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}

.whalekey-btn-secondary:hover {
    border-color: #4a8db7;
    color: #c8dff0;
}

.whalekey-btn-danger {
    padding: 10px 20px;
    background: #f38ba8;
    border: none;
    border-radius: 8px;
    color: #1a1a2e;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.whalekey-btn-danger:hover {
    background: #f59eb8;
}

.whalekey-btn-text {
    padding: 8px 20px;
    background: transparent;
    border: none;
    color: #3d5a70;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.2s;
}

.whalekey-btn-text:hover {
    color: #8bafc8;
}

/* --- Warning text -------------------------------------------------------- */

.whalekey-migration-warning {
    color: #d4a373;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
    margin: 0 0 16px;
    padding: 12px;
    background: rgba(243, 139, 168, 0.08);
    border-radius: 8px;
    border: 1px solid rgba(243, 139, 168, 0.15);
}

/* --- Loading state ------------------------------------------------------- */

#whalekey-migration-loading {
    padding: 20px 0;
}

#whalekey-migration-loading-text {
    color: #8bafc8;
    font-size: 15px;
    margin-bottom: 20px;
}

.whalekey-migration-waves {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.whalekey-migration-waves span {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4a8db7;
    animation: whalekey-wave 1.4s ease-in-out infinite;
}

.whalekey-migration-waves span:nth-child(2) {
    animation-delay: 0.2s;
}

.whalekey-migration-waves span:nth-child(3) {
    animation-delay: 0.4s;
}

/* --- Logout Dialog: hide but keep clickable for JS auto-dismiss ----------
   "You'll lose access to encrypted messages" warning on sign-out.
   Whalekey handles key escrow, so this warning is misleading.
   Use opacity:0 (not display:none) so JS can auto-click "Sign out". */
.mx_Dialog_wrapper:has(.mx_LogoutDialog) {
    opacity: 0 !important;
    pointer-events: auto !important;
}

/* --- Hide E2E lock/shield icons globally --------------------------------- */
.mx_MessageComposer_e2eIconWrapper {
    display: none !important;
}
/* DEBUG: unhidden for debugging sessions/verification
.mx_E2EIcon,
.mx_EventTile_e2eIcon {
    display: none !important;
}
*/

/* --- Hide "Link new device" from user avatar menu ------------------------ */
/* DEBUG: unhidden for debugging sessions/verification
[aria-label="Link new device"] {
    display: none !important;
}
*/

/* ==========================================================================
   Auth/login page: whalekey ocean branding
   Config sets welcome_background_url="" to kill the lake photo.
   CSS applies the deep ocean gradient + palette-matched modal card.
   ========================================================================== */

.mx_AuthPage {
    background: radial-gradient(ellipse at 50% 60%, #0d2137 0%, #050e18 70%, #000 100%) !important;
}

/* Kill the frosted glass blur overlay (React renders an abs-positioned div
   with filter:blur(40px) that duplicates the background image) */
.mx_AuthPage_modalBlur {
    display: none !important;
}

.mx_AuthPage_modal {
    background-color: #0f1f30 !important;
    border: 1px solid rgba(100, 160, 220, 0.15) !important;
    border-top: 3px solid #4a8db7 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Kill the 59% white semi-transparent overlay that causes the glow */
.mx_AuthPage_modalContent {
    background-color: transparent !important;
}

.mx_AuthBody {
    background-color: transparent !important;
}

/* Auth page text: force readable colors on dark background */
.mx_AuthPage h1,
.mx_AuthPage h2,
.mx_AuthPage h3,
.mx_AuthPage label,
.mx_AuthPage .mx_Field label {
    color: #e0ecf4 !important;
}

.mx_AuthPage .mx_Field input {
    background-color: rgba(5, 14, 24, 0.6) !important;
    border-color: rgba(100, 160, 220, 0.2) !important;
    color: #e0ecf4 !important;
}

.mx_AuthPage .mx_Field input:focus {
    border-color: #4a8db7 !important;
}

.mx_AuthPage .mx_Field label {
    color: #8aa0b8 !important;
}

.mx_AuthPage a:link,
.mx_AuthPage a:visited {
    color: #4a8db7 !important;
}

/* Welcome page buttons are <a> tags — needs a.class to beat a:link specificity */
.mx_AuthPage a.mx_ButtonSignIn,
.mx_AuthPage a.mx_ButtonCreateAccount {
    color: #fff !important;
}

.mx_AuthFooter {
    background: none !important;
}

.mx_AuthFooter a:link,
.mx_AuthFooter a:visited,
.mx_AuthFooter a:hover {
    color: #3d5a70 !important;
}