/* Notification styles extracted from homepages.css and main.css */

/* Notification badge (for app icons) */
.notification-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    background: #ff3b30;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    border: 2px solid transparent;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Main notification icon in header */
.app_notifications_icon {
    top: var(--header-icon-top);
    right: 0;
    z-index: 999;
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.17s ease, opacity 0.17s ease; /* TODO - UNCOMMENT THIS */
    padding: 20px;
}

.try_mode .app_notifications_icon {
    transform: translateX(120px);
    opacity: 0;
}
.opened_app .app_notifications_icon {
    transform: translateX(120px);
    opacity: 0;
    pointer-events: none;
}

/* Enter try-mode or app instantly on tap without affecting edge-swipe exit animations. */
body.try_mode_instant .app_notifications_icon,
body.opened_app_instant .app_notifications_icon {
    transition: none !important;
}

.app_notifications_icon a {
    display: block;
}

.app_notifications_icon svg {
    width: 20px;
    height: 20px;
    transition: opacity 0.2s ease;
    stroke-width: 0.4;
    stroke: #00000059;
    display: block; /* avoid baseline alignment quirks */
}

#notification-bell-icon {
    border-radius: 70px;
    align-items: center;
    justify-content: center;
    display: inline-flex;
}

#notification-bell-icon svg{
    width: 20px;
    height: 20px;
    margin-top: 0;
    /* Ensure SVG transform-origin behaves predictably for motion.dev transforms */
    transform-box: fill-box;
    transform-origin: 50% 15%;
}

.app_notifications_icon svg path {
    fill: #fff;
}

/* Light mode header icons: keep white, add shadow for visibility on light backgrounds */
body.light_mode .app_notifications_icon svg,
body.light_mode #dm-envelope-icon svg,
body.light_mode #notification-bell-icon svg {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}

/* Ensure close icon (X) has proper styling when used in header */
.app_notifications_icon svg[viewBox="0 -960 960 960"] {
    width: 24px;
    height: 24px;
}

.notification-icon-wrapper svg {
    filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.6)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.6));
}

/* In the header "initial" layout, the wrapper is `notification-icon-wrapper flex`.
   Ensure both icons occupy a fixed hitbox so swapping SVGs (bell ↔ exit) doesn't shift the other icon. */
.notification-icon-wrapper.flex {
    gap: 12px;
    align-items: center;
}

.notification-icon-wrapper.flex .app_notifications_icon {
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Notification count pill (unread badge) */
.notification-count-pill {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: #ff3b30;
    color: white;
    border-radius: 50%;
    width: auto;
    min-width: 16px;
    height: 16px;
    font-size: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px 3px #00000057;
    pointer-events: none; /* So it doesn't interfere with clicks on the icon */
}

/* Notifications overlay styles */

/* When displayed as a homescreen */
.system-app-page .notifications-overlay {
    position: relative;
}
.notifications-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(50px);
    z-index: 1;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
}

.notifications-overlay.visible {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}

/* Keep header, icons, and title visible above the notifications overlay (toggle UX). */
body:has(.notifications-overlay.visible) header.header-has-title {
    z-index: 44445 !important;
}

body:has(.notifications-overlay.visible) .search_icon,
body:has(.notifications-overlay.visible) .ai_assistant_icon,
body:has(.notifications-overlay.visible) .app_logo_icon,
body:has(.notifications-overlay.visible) .app_notifications_icon,
body:has(.notifications-overlay.visible) .global_header_title {
    z-index: 44446 !important;
}

.notifications-container {
    position: relative;
    width: 100%;
    height: 100%;
    /* Title is shown by the global header; pad content below it. */
    padding-top: calc(var(--safe-top) + 56px);
    display: flex;
    flex-direction: column;
    background-color: #000000;
}

.notifications-cancel {
    color: #ffffff;
    cursor: pointer;
    padding: 8px;
    margin: -8px;
}

.notifications-cancel svg {
    width: 25px;
    height: 25px;
}

.notifications-search-container {
    padding: 12px 16px;
    flex-shrink: 0;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(50px);
}

body.light_mode .notifications-search-container {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(50px);
    border-bottom-color: #e5e7eb;
}

.notifications-list {
    padding: 5px 10px 16px;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(50px);
    overscroll-behavior-y: none;
}

/* Bottom-left floating delete button (Clear All) */
.notifications-clear-fab {
    position: fixed;
    left: 16px;
    bottom: calc(16px + var(--safe-bottom));
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(16px);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 44445; /* above overlay content */
    cursor: pointer;
}

.notifications-list.scroll-locked {
    overflow-y: hidden;
    touch-action: none;
}

/* Empty state (shown only when there are no notifications) */
.notifications-empty-wrapper {
    height: 100%;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px 120px;
    text-align: center;
}

.notifications-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 320px;
}

.notifications-empty-icon {
    width: 84px;
    height: 84px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
}

.notifications-empty-icon svg {
    width: 34px;
    height: 34px;
    opacity: 0.95;
}

.notifications-empty-title {
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.notifications-loading {
    color: rgba(255, 255, 255, 0.75);
    font-size: 14px;
    font-weight: 500;
}

.notification-item {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    /*border-bottom: 1px solid rgba(255,255,255,0.1);*/
    cursor: pointer;
    background: #ffffff17;
    margin-bottom: 8px;
    border-radius: 23px;
    border: 1px solid #ffffff11;
    position: relative;
    line-height: 20px;
    /* Swipe animation optimizations for iOS */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    /* No transition by default - transitions added via JS only when needed */
    transition: none;
}

.notification-avatar {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    margin-right: 15px;
    flex-shrink: 0;
    overflow: hidden;
}

.notification-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fallback-avatar {
    width: 100%;
    height: 100%;
    background: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: white;
    border-radius: 50%;
}

.notification-content {
    flex: 1;
    min-width: 0;
    color: white;
}

.notification-message {
    font-size: 15px;
    margin-bottom: 4px;
}
.notification-message-title{
    font-weight: bold;
    max-width: calc(100% - 70px);
    margin-bottom: 6px;
}

.notification-message-body{
    display: block;
}

.notification-timestamp {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-align: right;
    position: absolute;
    right: 18px;
}

/* Skeleton sentinel (infinite-scroll trigger) */
.notifications-skeleton-sentinel {
    pointer-events: none;
}

.notification-item--skeleton {
    pointer-events: none;
    opacity: 0.5;
}

.clear-all-btn {
    font-size: 0.8rem;
    font-weight: 500;
    color: #aaa;
    cursor: pointer;
    margin: 0 auto 0 16px; /* Positions it between title and close button */
    transition: color 0.2s ease;
}

.clear-all-btn:hover {
    color: #fff;
}

/* History icon inside search input (right side) */
.notifications-search-container .notifications-search-history-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: color 0.15s ease, background 0.15s ease;
}

.notifications-search-container .notifications-search-history-btn.history-active {
    color: var(--accent-color, #3b82f6);
    background: rgba(59, 130, 246, 0.12);
}

body.light_mode .notifications-search-container .notifications-search-history-btn.history-active {
    color: var(--accent-color, #2563eb);
    background: rgba(37, 99, 235, 0.1);
}

.notification-item--history {
    opacity: 0.7;
}

.notification-item--history .notification-timestamp::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;
    vertical-align: -1px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Light mode overrides for notifications overlay */
body.light_mode .notifications-overlay {
    background: #f3f3f3;
    backdrop-filter: blur(50px);
}

body.light_mode .notifications-container {
    background: #f3f3f3;
}

body.light_mode #dock {
    background: #dbdbdb3d;
}

body.light_mode .notifications-list {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(50px);
}

body.light_mode .notifications-cancel {
    color: #111827;
}

body.light_mode .notification-item {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
}

body.light_mode .notification-content {
    color: #111827 !important;
}

body.light_mode .notification-message-title {
    color: #111827 !important;
}

body.light_mode .notification-message-body {
    color: #475569 !important;
}

body.light_mode .notification-timestamp {
    color: #64748b !important;
}

body.light_mode .notifications-empty-icon {
    background: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    color: #64748b !important;
}

body.light_mode .notifications-empty-title {
    color: #111827 !important;
}

body.light_mode .notifications-loading {
    color: #64748b !important;
}

body.light_mode .notifications-clear-fab {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    color: #111827 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.light_mode .notification-item--skeleton {
    background: rgba(0, 0, 0, 0.04) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

body.light_mode .clear-all-btn {
    color: #64748b !important;
}

body.light_mode .clear-all-btn:hover {
    color: #111827 !important;
}

body.light_mode .fallback-avatar {
    background: #e5e7eb !important;
    color: #64748b !important;
}

/* Search input in notifications overlay */
body.light_mode .notifications-search-container .im-search-input {
    background: #fff !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

body.light_mode .notifications-search-container .im-search-input:focus {
    border-color: #3b82f6 !important;
}

body.light_mode .notifications-search-container .im-search-icon {
    color: #64748b !important;
}

/* Landscape safe-area: keep notifications content inside the notch-safe zone. */
@media (orientation: landscape) {
    .notifications-overlay {
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }

    .notifications-clear-fab {
        left: calc(16px + var(--safe-left));
    }
}/* ── BubbleNav: spring-physics animated highlight pill ──────────────────── */
/* Transparent overlay — no own background or buttons.                       */
/* Place inside a positioned container (e.g. <header>) and it will spring    */
/* a pill between whatever elements it's told to track.                      */

/* Full-screen fixed overlay rendered as the first child of <header>.
   position:fixed keeps the pill viewport-anchored even though it lives
   inside an absolutely-positioned ancestor.
   z-index:2 is intentionally LOW:
     • Normally (no overlay): header has no stacking context, so icons
       at z-index:999 naturally paint above the bubble.
     • Notifications visible: header gets z-index:44445 (stacking context);
       icons are forced to z-index:44446 within that context — still above
       the bubble at z-index:2.  The whole header block (bubble + icons)
       sits above the notifications-overlay (44444). */
.bubble_nav {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 2;
}

/* The pill — `top`, `left`, `width`, `height` are set entirely by JS */
.bubble_nav .bubble_nav__bubble {
  position: absolute;
  border-radius: 100px;
  pointer-events: none;
  overflow: visible;
  will-change: transform;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.bubble_nav .bubble_nav__bubble.is_visible {
  opacity: 1;
}


/* Inner element carries the scaleY squash/stretch transform.
   The white fill is intentionally hardcoded — the icon becomes dark
   (`color: #000`) via the section-gesture-active CSS that already exists. */
.bubble_nav .bubble_nav__bubble_inner {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  /* background: rgba(255, 255, 255, 0.2); */
  background: #4c4c4c8c;
  transform-origin: center center;
  will-change: transform;
  transition: background 0.15s ease;
  /* border: 1px solid rgba(42, 42, 42, 0.7); */
}

/* ── Will-open indicator ── */
/* Bubble turns red when both finalize() conditions are true:               */
/* gesture is active AND progress >= activation threshold.                  */
/* Releasing the finger at this point WILL open the highlighted section.    */
.bubble_nav .bubble_nav__bubble.will_open .bubble_nav__bubble_inner {
  background: #e0e0e08c;
  border: 1px solid rgba(98, 98, 98, 0.7);
}

/* ── Light mode ── */
/* In light mode the header icons are dark, so the bubble should be dark too */
body.light_mode .bubble_nav .bubble_nav__bubble_inner {
  background: rgba(125, 125, 125, 0.41);
  border: 1px solid rgb(195, 195, 195);
}

body.light_mode .bubble_nav .bubble_nav__bubble.will_open .bubble_nav__bubble_inner {
  background: rgba(1, 1, 1, 0.6);
  border: 1px solid rgb(195, 195, 195);
}
.app_visibility_icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    margin-right: 2px;
    opacity: 0.85;
    flex-shrink: 0;
    vertical-align: middle;
}

.app_visibility_icon svg {
    width: 100%;
    height: 100%;
}

/* Light mode support */
body.light_mode .app_visibility_icon {
    opacity: 0.9;
}

/* Earn Page Styles - CSS Modules */

.earnPage {
    background: #000;
    min-height: 100vh;
  }
  
  .pageContent {
    padding: 40px 20px 24px 20px;
  }
  
  /* Error & Loading States */
  .errorContainer {
    text-align: center;
    padding: 24px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 16px;
    margin-bottom: 24px;
  }
  
  .errorMessage {
    color: #dc2626;
    font-weight: 600;
    margin-bottom: 12px;
  }
  
  .retryButton {
    background: #dc2626;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
  }
  
  .retryButton:hover {
    background: #b91c1c;
  }
  
  .loadingContainer {
    text-align: center;
    padding: 40px 20px;
  }
  
  .loadingSpinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top: 3px solid #10B981;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
  }
  
  .loadingText {
    color: #64748b;
    font-weight: 600;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  header.initial-header{
      display: none;
  }
  
  /* Earnings Display */
  .earningsDisplay {
    text-align: center;
    margin-bottom: 6px;
    position: relative;
  }
  
  .earningsHeader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
  }
  
  .earningsLabel {
    font-size: 14px;
    font-weight: 600;
    color: #c5d6ed;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    display: inline-block;
  }
  
  .earningsLabel::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: linear-gradient(90deg, #10B981 0%, #059669 100%);
    border-radius: 1px;
  }
  
  .leaderboardBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #10B981;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    margin: 10px 0 18px;
  }
  
  .leaderboardBadge:hover {
    background: rgba(16, 185, 129, 0.15);
    transform: translateY(-1px);
  }
  
  .leaderboardBadge svg {
    width: 14px;
    height: 14px;
  }
  
  .earningsAmountWrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
  }
  
  .earningsAmount {
    font-size: 60px;
    font-weight: 900;
    background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    letter-spacing: -2px;
    position: relative;
    display: inline-flex;
    align-items: baseline;
    filter: drop-shadow(0 4px 12px rgba(16, 185, 129, 0.25));
    -webkit-tap-highlight-color: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.2s ease;
  }
  
  .earningsAmount:hover {
    transform: scale(1.02);
  }
  
  .dollarSign {
    font-size: 36px;
    font-weight: 700;
    margin-right: 2px;
    letter-spacing: 0;
  }
  
  .earningsCurrency {
    font-size: 20px;
    font-weight: 700;
    color: #94a3b8;
    margin-left: 8px;
    letter-spacing: 0;
    align-self: flex-start;
    margin-top: 10px;
  }
  
  .earningsSubtitle {
    font-size: 16px;
    font-weight: 600;
    color: #bbc8dc;
  }
  
  .earningsSubtitle strong {
      color: #f9f9f9;
    font-weight: 700;
  }

  .earningsWallets {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
  }

  .earningsWalletsLabel {
    font-size: 13px;
    color: #93a4bd;
    margin-bottom: 8px;
    font-weight: 700;
  }

  .earningsWalletRow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  .earningsWalletRow:first-child {
    border-top: none;
  }

  .earningsWalletCurrency {
    font-size: 12px;
    color: #93a4bd;
    letter-spacing: 0.04em;
    font-weight: 800;
  }

  .earningsWalletAmount {
    font-size: 14px;
    color: #e7eefc;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }

  /* Earn option per-card breakdown (this month / last month / lifetime) */
  .earnOptionBreakdown {
    margin-top: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
  }

  .earnOptionBreakdownItem {
    padding: 10px 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .earnOptionBreakdownLabel {
    color: #93a4bd;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 4px;
  }

  .earnOptionBreakdownValue {
    color: #e7eef8;
    font-size: 14px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
  }
  
  .earningsActions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 24px 0 8px;
  }
  
  .earningsDetailLink, .payoutSettingsLink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #b9c3d1;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 20px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }
  
  .payoutSettingsLink svg {
    width: 16px;
    height: 16px;
    transition: color 0.3s ease;
  }
  
  .earningsDetailLink::before, .payoutSettingsLink::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(16, 185, 129, 0.08);
    border-radius: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .earningsDetailLink:hover, .payoutSettingsLink:hover {
    color: #10B981;
    transform: translateY(-1px);
  }
  
  .earningsDetailLink:hover::before, .payoutSettingsLink:hover::before {
    opacity: 1;
  }
  
  .earningsDetailLink:hover .detailArrow, .payoutSettingsLink:hover .detailArrow {
    transform: translateX(2px);
  }
  
  .detailArrow {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
  }
  
  /* Earn Options */
  .earnOptions {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .earnOption {
    background: #101010;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
  }
  
  .earnOption.disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
  
  .earnOption::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(16, 185, 129, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .earnOption:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  }
  
  .earnOption:hover:not(.disabled)::before {
    opacity: 1;
  }
  
  .earnOption:active:not(.disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }
  
  .earnOption:focus-visible {
    outline: 2px solid #10B981;
    outline-offset: 2px;
  }
  
  .earnOptionContent {
    flex-grow: 1;
    position: relative;
    z-index: 1;
  }
  
  .earnOptionTitle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 4px;
  }

  .earnOptionMiniIcon {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(16, 185, 129, 0.2) 100%);
    flex-shrink: 0;
  }
  
  .earnOptionMiniIcon svg {
    width: 20px;
    height: 20px;
    display: block;
    color: #e7eef8;
  }

  /* Light mode icon visibility */
  body.light_mode .earnOptionMiniIcon svg {
    color: #10B981 !important;
    stroke: #10B981 !important;
    fill: #10B981 !important;
  }

  .earnOptionDescription {
      font-size: 14px;
      color: #a8afbc;
      line-height: 1.4;
  }
  
  /* Arrow removed from earn options */
  
  /* Shimmer effect for earnings - runs once */
  .earningsAmount::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 1000px 100%;
    animation: shimmer 3s ease-out 0.5s 1 forwards;
    -webkit-mask-image: linear-gradient(to bottom, white, white);
    mask-image: linear-gradient(to bottom, white, white);
    -webkit-mask-composite: destination-in;
    mask-composite: destination-in;
    pointer-events: none;
    opacity: 0;
      /* Dark mode shimmer styles */
      background: linear-gradient(
              90deg,
              transparent 0%,
              rgba(0, 0, 0, .4) 50%,
              transparent 100%
      );
      background-size: 1000px 100%;
      mask-image: linear-gradient(to bottom, #fff, #fff);
  }
  
  @keyframes shimmer {
    0% {
      background-position: -1000px 0;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      background-position: 1000px 0;
      opacity: 0;
    }
  }
  
  /* Mobile Responsive */
  @media (max-width: 480px) {
    .pageContent {
      padding: 32px 16px 24px 16px;
    }
  
    .earningsHeader {
      flex-direction: column;
      gap: 12px;
    }
  
    .earningsAmount {
      font-size: 48px;
    }
  
    .dollarSign {
      font-size: 28px;
    }
  
    .earningsCurrency {
      font-size: 16px;
      margin-top: 8px;
    }
  
    .earnOption {
      padding: 20px;
    }
  
    .earnOptionIcon {
      width: 44px;
      height: 44px;
      font-size: 22px;
    }
  
    .earnOptionTitle {
      font-size: 17px;
    }
  
    .earningsDetailLink, .payoutSettingsLink {
      font-size: 13px;
      padding: 6px 14px;
    }
  
    .earningsActions {
      gap: 12px;
    }
  
    .earningsSubtitle {
      font-size: 15px;
    }
  }
  
  .socialPageContent {
    padding-top: calc(var(--safe-top) + 40px);
  }



/* ---------------------- Light mode ----------------------- */
body.light_mode .earnPage{
    background: #f7f9fd;
}

body.light_mode .earnOption{
    background: #fff;
    box-shadow: 0 2px 8px #0000000f;
}

body.light_mode .earnOptionTitle{
    color: #1a1a1a;
}

body.light_mode .earnOptionDescription{
    color: #6b7280;
}

body.light_mode .earningsSubtitle{
    color: #64748b;
}

body.light_mode .earningsSubtitle strong{
    color: #475569;
}

body.light_mode .earningsAmount::after{
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .4) 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, white, white);
    mask-image: linear-gradient(to bottom, #fff, #fff);
}

body.light_mode .earningsDetailLink, body.light_mode .payoutSettingsLink{
    color: #475569 !important;
}

body.light_mode .earningsDetailLink svg, 
body.light_mode .payoutSettingsLink svg {
    stroke: #475569 !important;
    color: #475569 !important;
}

body.light_mode .earningsDetailLink:hover, 
body.light_mode .payoutSettingsLink:hover {
    color: #10B981 !important;
}

body.light_mode .earningsDetailLink:hover svg, 
body.light_mode .payoutSettingsLink:hover svg {
    stroke: #10B981 !important;
    color: #10B981 !important;
}

body.light_mode .earningsLabel{
    color: #8999af;
}

/* Make amounts more visible in light mode */
body.light_mode .earningsCurrency {
    color: #475569 !important;
}

body.light_mode .earningsWalletAmount {
    color: #1e293b !important;
}

body.light_mode .earningsWalletCurrency {
    color: #64748b !important;
}

body.light_mode .earnOptionBreakdownValue {
    color: #111827 !important;
}

body.light_mode .earningsWalletsLabel {
    color: #475569 !important;
}

body.light_mode .earningsWallets {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}

body.light_mode .earningsWalletRow {
    border-top-color: #e2e8f0 !important;
}.app_picker_drawer {
  padding: 0 16px 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Search bar in drawer header */
.app_picker_search_wrap {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
}

.app_picker_search_input {
  width: 100%;
  padding: 10px 36px 10px 14px;
  border-radius: 10px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 16px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.app_picker_search_input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

.app_picker_search_clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.app_picker_search_clear:active {
  opacity: 0.6;
}

/* Section grouping */
.app_picker_section {
  margin-bottom: 16px;
}

.app_picker_section_title {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 0 6px;
}

/* App / folder row */
.app_picker_row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.app_picker_row:active {
  opacity: 0.6;
}

.app_picker_row:last-child {
  border-bottom: none;
}

/* Icon */
.app_picker_row_icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  margin-right: 12px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.app_picker_row_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app_picker_row_icon svg {
  width: 55%;
  height: 55%;
  fill: currentColor;
  color: rgba(255, 255, 255, 0.7);
}

.app_picker_row_icon_letter {
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
}

/* Folder icon variant */
.app_picker_row_icon--folder {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

/* Name */
.app_picker_row_name {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Folder item count badge */
.app_picker_row_count {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 8px;
  flex-shrink: 0;
}

/* Loading state */
.app_picker_loading {
  display: flex;
  justify-content: center;
  padding: 32px 0;
}

/* No results */
.app_picker_no_results {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 14px;
  padding: 32px 0;
}

/* Light mode overrides */
body.light_mode .app_picker_search_input {
  background: rgba(0, 0, 0, 0.06);
  color: #000;
}

body.light_mode .app_picker_search_input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

body.light_mode .app_picker_search_clear {
  color: rgba(0, 0, 0, 0.4);
}

body.light_mode .app_picker_section_title {
  color: rgba(0, 0, 0, 0.45);
}

body.light_mode .app_picker_row {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light_mode .app_picker_row_icon {
  background: rgba(0, 0, 0, 0.06);
}

body.light_mode .app_picker_row_icon svg {
  color: rgba(0, 0, 0, 0.5);
}

body.light_mode .app_picker_row_icon_letter {
  color: rgba(0, 0, 0, 0.4);
}

body.light_mode .app_picker_row_icon--folder {
  background: rgba(0, 0, 0, 0.08);
}

body.light_mode .app_picker_row_name {
  color: #000;
}

body.light_mode .app_picker_row_count {
  color: rgba(0, 0, 0, 0.35);
}

body.light_mode .app_picker_no_results {
  color: rgba(0, 0, 0, 0.4);
}
/* ============================================================================
   Instant Messaging (IM) Styles
   Instagram-style direct messaging interface
   ============================================================================ */

/* BASE CONTAINERS */
.im-container {
  /* Thread view: fixed layout to avoid keyboard-driven page scroll on iOS/Android */
  position: fixed;
  left: 0;
  right: 0;
  top: var(--vv-top, 0px);
  /* When --vvh is set (VisualViewport), it already accounts for safe areas.
     Fallback to 100vh for Android when VisualViewport isn't available. */
  height: var(--vvh, 100vh);
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #000;
  overflow: hidden;

  /* These are measured at runtime by IM_MessageThread.jsx (ResizeObserver). */
  --im-header-h: 0px;
  --im-banner-h: 0px;
  --im-input-h: 0px;
}

.im-sidebar {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #000;
}

/* Messages list header now comes from the global app-shell overlay (fixed), so pad content. */
.im-sidebar {
  padding-top: calc(var(--safe-top) + 56px);
}

/* Messages Page Container */
.im-messages-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #000;
}

.im-messages-content {
  flex: 1;
  overflow: hidden;
}

/* ============================================================================
   CONVERSATION LIST
   ============================================================================ */

.im-list-header {
  position: sticky;
  top: 0;
  /* Match Notifications header bar */
  height: calc(var(--safe-top) + 56px);
  padding-top: var(--safe-top);
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 11;
}

.im-list-header .im-inbox-header-icons {
  position: absolute;
  top: 0;
  right: 10px;
  height: 100%;
  width: 140px; /* space for 2 icons */
  pointer-events: auto; /* allow clicks on the icons */
}

.im-list-header .im-inbox-header-icons .notification-icon-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

/* Right-side positions for the two icons inside the Inbox header */
.im-list-header .im-inbox-header-icons #notification-bell-icon {
  right: 10px !important;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.im-list-header .im-inbox-header-icons #dm-envelope-icon {
  right: 58px !important;
}

body.android .im-list-header {
  height: 56px !important;
  padding-top: 0 !important;
}

.im-list-title {
  position: relative;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5),
               0 0 8px rgba(200, 200, 200, 0.15);
  letter-spacing: 0.3px;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 17px;
}

.im-list-close-button {
  color: #ffffff;
  cursor: pointer;
  padding: 8px;
  margin: -8px;
  margin-right: -6px;
  border: none;
  background: none;
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
}

.im-list-close-button svg {
  width: 25px;
  height: 25px;
}

/* Inbox header: light mode should remain readable */
body.light_mode .im-list-header {
  background: rgba(255, 255, 255, 0.9);
  border-bottom-color: #e2e8f0;
}

body.light_mode .im-list-title {
  color: #111827;
  text-shadow: none;
}

/* Tab Navigation */
.im-tabs-container {
  border-top: 1px solid #242424;
  background: #000;
  flex-shrink: 0;
  z-index: 10;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.18);
}

.im-tabs {
  display: flex;
  padding: 0;
  gap: 0;
  width: 100%;
}

.im-tab {
  background: none;
  border: none;
  padding: 7px 10px calc(9px + var(--safe-bottom)) 10px;
  min-height: calc(40px + var(--safe-bottom)); /* Compact bottom nav + safe area */
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  position: relative;
  outline: none;
  flex: 1;
  min-width: 0; /* Allow tabs to shrink if needed for 3 tabs */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  -webkit-tap-highlight-color: transparent; /* Remove mobile tap highlight */
  touch-action: manipulation; /* Optimize touch response */
  min-height: calc(30px + var(--safe-bottom));
  padding: 6px 8px 12px 8px;
}

.im-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.im-tab-icon svg {
  width: 20px;
  height: 20px;
}

.im-tab-label {
  font-size: 10px;
  line-height: 1.1;
  font-weight: 600;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-tab:active {
  background: rgba(255, 255, 255, 0.06);
  transform: scale(0.98); /* Subtle press feedback */
}

.im-tab:focus-visible {
  outline: 2px solid #22c55e;
  outline-offset: -2px;
  border-radius: 8px;
}

.im-tab-active {
  color: #22c55e;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.12); /* Subtle green background for active tab */
}

.im-tab-active:active {
  background: rgba(34, 197, 94, 0.18);
  transform: scale(0.98);
}

.im-new-group-button {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
}

.im-new-group-button:active {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(0.98);
}

.im-new-group-button:focus-visible {
  outline: 2px solid rgba(34, 197, 94, 0.8);
  outline-offset: 2px;
}

/* Friend Search */
.im-search-container {
  padding: 12px 16px;
  border-bottom: 1px solid #242424;
  position: relative;
}

.im-search-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.im-search-icon {
  position: absolute;
  left: 12px;
  color: #64748b;
  pointer-events: none;
}

.im-search-input {
  width: 100%;
  padding: 10px 40px 10px 40px;
  border: 1px solid #ffffff0d;
  border-radius: 30px;
  font-size: 14px;
  outline: none;
  background: #0f0f0f;
  color: #dadada;
}

.im-search-input:focus {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.im-search-clear {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.im-search-archive-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.im-search-archive-btn:active {
  color: #fff;
}

.im-search-history-btn {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.im-search-history-btn:active {
  color: #fff;
}

.im-search-history-btn.history-active {
  color: var(--accent-color, #3b82f6);
  background: rgba(59, 130, 246, 0.12);
}

body.light_mode .im-search-history-btn.history-active {
  color: var(--accent-color, #2563eb);
  background: rgba(37, 99, 235, 0.1);
}

.im-friends-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 16px;
    right: 16px;
    background: #121212f5;
    border: 1px solid #373737;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    max-height: 400px;
    overflow-y: auto;
    z-index: 100;
    backdrop-filter: blur(4px);
}

.im-friends-loading,
.im-friends-empty {
  padding: 24px;
  text-align: center;
  color: #64748b;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.im-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e2e8f0;
  border-top-color: #22c55e;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.im-friends-list {
  padding: 0;
}

.im-friend-item {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px;
  border: none;
  background: none;
  cursor: pointer;
  transition: background 0.2s ease;
  text-align: left;
    border-bottom: 1px solid #ffffff14;
    border-radius: 0;
}

.im-friend-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.im-friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e2e8f0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #64748b;
  flex-shrink: 0;
  margin-right: 12px;
}

.im-friend-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-friend-info {
  flex: 1;
  min-width: 0;
}

.im-friend-username {
  font-size: 14px;
  font-weight: 600;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-friend-name {
  font-size: 13px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-friend-online-dot {
    width: 12px;
    height: 12px;
    background: #22c55e;
    border-radius: 50%;
    border: 2px solid #373737;
    flex-shrink: 0;
}

.im-list-container {
  flex: 1;
  overflow-y: auto;
  /* If this appears above the bottom tabs, leave a bit of breathing room */
  padding-bottom: 16px;
}

/* Conversation Item */
.im-conversation-item {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #353535;
  cursor: pointer;
  transition: background 0.2s ease;
}

.im-conversation-item.active {
  background: #f0fdf4;
}

/* Avatar Section */
.im-avatar-wrapper {
  width: 55px;
  height: 55px;
  margin-right: 12px;
  flex-shrink: 0;
  position: relative;
}

.im-avatar {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #333;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #adadad;
}

.im-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Online Status Indicator */
.im-online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 14px;
  height: 14px;
  background: #10B981;
  border: 2px solid #000;
  border-radius: 50%;
}

/* Group Badge */
.im-group-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 22px;
    height: 22px;
    background: #000000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    padding: 4px;
    color:white;
}

/* Conversation Content */
.im-conversation-content {
  flex: 1;
  min-width: 0;
}

.im-conversation-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}

.im-conversation-name {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0; /* Allow flex item to shrink below content size */
}

.im-conversation-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0; /* Allow text to truncate */
  flex: 1; /* Take available space */
}

.im-muted-indicator {
  font-size: 14px;
  opacity: 0.6;
  flex-shrink: 0;
}

.im-conversation-time {
  font-size: 12px;
  color: #94a3b8;
  flex-shrink: 0;
  margin-left: 8px;
}

.im-conversation-subtitle {
  font-size: 12px;
  color: #94a3b8;
  margin-bottom: 4px;
}

.im-conversation-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.im-last-message {
  font-size: 14px;
  color: #9096a0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-last-message.unread {
  font-weight: 800;
  /* color: #1e293b; */
}

/* Unread Badge */
.im-unread-badge {
  background: #10B981;
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 20px;
  text-align: center;
  margin-left: 8px;
  flex-shrink: 0;
}

/* ============================================================================
   EMPTY STATES
   ============================================================================ */

.im-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.im-empty-state-content {
  text-align: center;
  padding: 40px 20px;
}

.im-empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.im-empty-state-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.im-empty-state-subtitle {
  font-size: 14px;
  color: #64748b;
}

/* ============================================================================
   LOADING AND ERROR STATES
   ============================================================================ */

.im-loading-state,
.im-error-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.im-loading-text {
  text-align: center;
  color: #94a3b8;
}

.im-error-content {
  text-align: center;
  padding: 20px;
}

.im-error-message {
  color: #ef4444;
  margin-bottom: 12px;
}

.im-retry-button {
  padding: 8px 16px;
  background: #10B981;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

/* ============================================================================
   MESSAGE THREAD HEADER
   ============================================================================ */

.im-thread-header {
  position: relative;
  z-index: 50;
  background: #000;
  box-sizing: border-box;
  padding: var(--safe-top) 16px 0;
  border-bottom: 1px solid #000;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* iOS PWA: keep DM header pinned during keyboard animation by making it a fixed
   overlay and driving its `top` from VisualViewport offsetTop (inline style). */
.im-thread-header.im-thread-header--fixed {
  position: fixed;
  left: 0;
  right: 0;
  /* `top` is set inline from JS via vvTopPx() */
  will-change: top, transform;
  transform: translateZ(0);
}

.im-thread-header-spacer {
  height: var(--im-header-h, 0px);
  flex-shrink: 0;
}

.im-back-button {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #106eb9;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

/* User Info Section */
.im-user-info-wrapper {
  flex: 1;
  cursor: pointer;
  /* Allow children to overflow/scroll inside a flex header */
  min-width: 0;
}

.im-thread-avatar-wrapper-clickable {
  cursor: pointer;
  position: relative;
}

.im-thread-avatar-wrapper {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  position: relative;
}

.im-thread-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #333;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #adadad;
}

.im-thread-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-thread-online-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: #10B981;
  border: 2px solid #000;
  border-radius: 50%;
}

/* Admin Badge Indicator */
.im-admin-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 20px;
  height: 20px;
  background: #3b82f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.im-thread-username {
  font-size: 15px;
  line-height: 17px;
  font-weight: 600;
  color: #fff;
  cursor: pointer;
  transition: color 0.2s ease;
}

.im-thread-username:hover {
  color: #10B981;
}

.im-thread-status {
  font-size: 12px;
  color: #94a3b8;
}

/* ============================================================================
   MESSAGES LIST & MESSAGE BUBBLES
   ============================================================================ */

.im-messages-container {
  position: relative;
  flex: 1;
  min-height: 0; /* Allow flex item to shrink below content size */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  background: #101010;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

/* AI chat: keep message thread background black without affecting DMs. */
.ai-messages-page .im-messages-container {
  background: #000;
  /* The spacer (im-thread-header-spacer) handles the main spacing via --im-header-h.
     Extra padding accounts for the fixed model-pill bar (~42px) plus breathing room. */
  padding-top: 50px;
}

/* AI chat: shrink to the visual viewport when the keyboard is open so the
   composer stays visible. --vvh is set by usePwaFixedLayout on the element.
   No position:fixed here — the global app-shell header is outside this
   container and must stay at layout-viewport top:0. */
.ai-messages-page .im-sidebar {
  position: relative;
  height: var(--vvh, 100%);
  overflow: hidden;
}

/* ============================================================================
   AI MODEL BAR – fixed row of selected-model pills below the header
   ============================================================================ */

.ai-model-bar {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 49;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 16px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  will-change: top;
  background: transparent;
}

.ai-model-bar::-webkit-scrollbar {
  display: none;
}

/* Selected-model pill */
.ai-model-bar .ai-model-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid #ffffff12;
  background: #1a1a1a;
  color: #e0e0e0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

/* "+" add-model pill */
.ai-model-bar .ai-model-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid #ffffff12;
  background: #1a1a1a;
  color: #e0e0e0;
  flex-shrink: 0;
}

.ai-model-bar .ai-model-add-btn svg {
  stroke: currentColor;
}

/* ============================================================================
   AI MODEL PICKER DRAWER
   ============================================================================ */

.ai-model-drawer-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 0;
}

.ai-model-drawer-empty {
  padding: 16px;
  text-align: center;
  color: #8b8b8b;
  font-size: 14px;
}

.ai-model-drawer-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: transparent;
}

.ai-model-drawer-row.active {
  background: rgba(255, 255, 255, 0.06);
}

.ai-model-drawer-row .ai-model-drawer-name {
  flex: 1;
  background: none;
  border: none;
  color: #dadada;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  padding: 0;
}

.ai-model-drawer-row.active .ai-model-drawer-name {
  color: #fff;
  font-weight: 700;
}

.ai-model-drawer-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(239, 68, 68, 0.4);
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  padding: 0;
}

/* ============================================================================
   AI MODEL STRENGTH & COST INDICATORS
   ============================================================================ */

.ai-model-drawer-indicators {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.ai-model-strength-bars .bar-filled {
  fill: #dadada;
}

.ai-model-strength-bars .bar-empty {
  fill: rgba(255, 255, 255, 0.12);
}

.ai-model-drawer-row.active .ai-model-strength-bars .bar-filled {
  fill: #fff;
}

.ai-model-cost-indicator {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1;
}

.ai-model-cost-indicator .cost-filled {
  color: #dadada;
}

.ai-model-cost-indicator .cost-empty {
  color: rgba(255, 255, 255, 0.12);
}

.ai-model-drawer-row.active .ai-model-cost-indicator .cost-filled {
  color: #fff;
}

body.light_mode .ai-model-strength-bars .bar-filled {
  fill: #444;
}

body.light_mode .ai-model-strength-bars .bar-empty {
  fill: rgba(0, 0, 0, 0.1);
}

body.light_mode .ai-model-drawer-row.active .ai-model-strength-bars .bar-filled {
  fill: #222;
}

body.light_mode .ai-model-cost-indicator .cost-filled {
  color: #444;
}

body.light_mode .ai-model-cost-indicator .cost-empty {
  color: rgba(0, 0, 0, 0.1);
}

body.light_mode .ai-model-drawer-row.active .ai-model-cost-indicator .cost-filled {
  color: #222;
}

/* ============================================================================
   AI ATTACHMENT PREVIEW (image upload for vision)
   ============================================================================ */
.ai-attachments-row {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: 8px;
  padding: 6px 0;
  -webkit-overflow-scrolling: touch;
  align-items: flex-end;
}

.ai-attachment-preview {
  position: relative;
  flex-shrink: 0;
  width: 80px;
  height: 80px;
}

.ai-attachment-thumb {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #333;
  display: block;
}

model-viewer.ai-attachment-thumb {
  width: 80px;
  height: 80px;
  --poster-color: transparent;
}

.ai-attachment-audio-chip {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: #1a1a2e;
  border: 1px solid #333;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ai-attachment-audio-chip:active {
  background: #252540;
}

.ai-attachment-audio-chip audio {
  display: none;
}

.ai-attachment-audio-icon {
  color: #8b8bcc;
}

.ai-attachment-audio-name {
  font-size: 10px;
  color: #999;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

.ai-attachment-video-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  font-size: 12px;
  color: #ccc;
  min-width: 100px;
  max-width: 200px;
}

.ai-attachment-video-label svg {
  flex-shrink: 0;
  opacity: 0.7;
}

.ai-attachment-video-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.ai-attachment-video-size {
  flex-shrink: 0;
  opacity: 0.6;
  font-size: 11px;
}

body.light_mode .ai-attachment-video-label {
  background: rgba(0, 0, 0, 0.06);
  color: #444;
}

.ai-attachment-video-badge {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 3px 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 5px;
  font-size: 10px;
  color: #fff;
  pointer-events: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.ai-attachment-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* ============================================================================
   AI MEDIA GRID (generated images/videos in messages)
   ============================================================================ */
.ai-media-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-media-img {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  margin-top: 8px;
}

.ai-media-video {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  margin-top: 8px;
}

/* Messages List - CSS optimized scrolling */
.im-messages-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  
  /* CSS Containment: Isolate layout calculations */
  contain: layout style;
  
  /* Will-change hint for scroll performance */
  will-change: contents;
}

.im-message-item {
  /* Removed content-visibility: auto to prevent scroll jumps when messages enter viewport
     The 100px estimate caused jumps when actual message heights differed from estimate.
     Once messages are rendered, scrolling is smooth, so we render all messages upfront. */
  min-height: 40px; /* Prevent collapse */
  
  /* CSS Containment: Isolate layout calculations to prevent reflow cascades */
  contain: layout style paint;
  
  /* Will-change hint: Prepare for transform/opacity changes during scroll */
  will-change: transform, opacity;
  
  /* Transform optimization for iOS */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Date Divider */
.im-date-divider {
  text-align: center;
  margin: 20px 0;
}

.im-date-divider-label {
    background: #2a2a2a;
    color: #bcbcbc;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

/* System Messages */
.im-system-message {
  text-align: center;
  margin: 12px 0;
  padding: 0 16px;
}

.im-system-message-text {
  background: #f1f5f9;
  color: #64748b;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
  display: inline-block;
  font-style: italic;
}

/* Message Bubble Container */
.im-message-bubble-container {
  display: flex;
  flex-direction: column;
  margin-bottom: 12px;
  position: relative;
  clear: both;
  min-height: 40px; /* Prevent overlap */
}

.im-message-bubble-container:has(.im-message-media-container) {
  margin-bottom: 12px;
}

.im-message-bubble-container.has-quote {
  margin-bottom: 20px;
}

.im-message-bubble-container.sent {
  align-items: flex-end;
}

.im-message-bubble-container.received {
  align-items: flex-start;
}

/* Message Bubble */
.im-message-swipe-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 85%;
  width: fit-content;
  min-width: 50%;
}

.sent .im-message-swipe-wrapper {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.im-swipe-reply-icon {
  position: absolute;
  left: 10px;
  font-size: 24px;
  pointer-events: none;
  z-index: 1;
  color: black;
}

.im-swipe-reply-icon svg {
  fill: black;
}

.im-message-bubble {
  max-width: 100%;
  width: fit-content;
  padding: 10px 14px;
  border-radius: 18px;
  word-wrap: break-word;
  line-height: 1.5;
  font-size: 15px;
  position: relative;
  z-index: 1;
  min-height: 20px; /* Prevent collapse */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.im-message-bubble.sent {
  background: #106eb9;
  color: white;
  border: 1px solid #ffffff12;
}

.im-message-bubble.received {
  background: #282828;
  color: #dadada;
  border: 1px solid #ffffff12;
}

.ai-messages-page .im-message-bubble.received {
  -webkit-user-select: text;
  user-select: text;
}

.ai-copy-feedback {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  color: #cfd8ff;
  background: rgba(0, 0, 0, 0.55);
  padding: 2px 6px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 2;
}

body.light_mode .ai-copy-feedback {
  color: #4b5563;
  background: rgba(255, 255, 255, 0.85);
}

.im-message-bubble.optimistic {
  opacity: 0.7;
}

/* Message Text with Links */
.im-message-text {
  display: inline;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  max-width: 100%;
}

/*
 * Markdown rendering inside chat bubbles
 *
 * Spacing system based on golden ratio (1.618) scaled for mobile chat context.
 * Base unit: 0.382em (~5.3px at 14px font) — the "small" golden complement.
 * Vertical rhythm:
 *   xs  = 0.236em  (1 / phi^2)  — tightest: between li items
 *   sm  = 0.382em  (1 / phi)    — compact: between inline elements, li/p
 *   md  = 0.618em  (1 / phi^0)  — standard: between paragraphs, list blocks
 *   lg  = 1.000em  (phi - 0.618)— generous: above headings (section break feel)
 */

/* --- Paragraphs --------------------------------------------------------- */
.im-message-text p {
  margin: 0.618em 0;
  line-height: 1.5;
}
.im-message-text p:first-child { margin-top: 0; }
.im-message-text p:last-child  { margin-bottom: 0; }

/* --- Headings ----------------------------------------------------------- */
/* Size scale: h1 1.382em, h2 1.236em, h3 1.118em, h4 1em (all derived from
   golden ratio subdivisions, staying compact for chat bubbles) */
.im-message-text h1 { font-size: 1.382em; font-weight: 700; }
.im-message-text h2 { font-size: 1.236em; font-weight: 700; }
.im-message-text h3 { font-size: 1.118em; font-weight: 600; }
.im-message-text h4 { font-size: 1.000em; font-weight: 600; }

.im-message-text h1,
.im-message-text h2,
.im-message-text h3,
.im-message-text h4 {
  line-height: 1.3;
  margin: 1em 0 0.382em;
}

.im-message-text :first-child:is(h1, h2, h3, h4) { margin-top: 0; }
.im-message-text :last-child:is(h1, h2, h3, h4)  { margin-bottom: 0; }

/* --- Lists -------------------------------------------------------------- */
.im-message-text ol,
.im-message-text ul {
  margin: 0.618em 0;
  padding-left: 1.618em;
}
.im-message-text li {
  margin: 0.236em 0;
  line-height: 1.5;
  list-style-type: disc;
}
.im-message-text ol li {
  list-style-type: decimal;
}
.im-message-text li p {
  margin: 0.236em 0;
}
.im-message-text li p:first-child { margin-top: 0; }
.im-message-text li p:last-child  { margin-bottom: 0; }

/* Nested lists: tighter spacing */
.im-message-text li > ul,
.im-message-text li > ol {
  margin: 0.236em 0;
}

/* --- Inline text -------------------------------------------------------- */
.im-message-text strong { font-weight: 600; }
.im-message-text em     { font-style: italic; }

/* --- Inline code -------------------------------------------------------- */
.im-message-text code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.146em 0.382em;
  border-radius: 4px;
  font-size: 0.875em;
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
}

/* --- Code blocks -------------------------------------------------------- */
.im-message-text pre {
  background: rgba(255, 255, 255, 0.06);
  padding: 0.618em 0.764em;
  border-radius: 8px;
  overflow-x: auto;
  margin: 0.618em 0;
  font-size: 0.85em;
  line-height: 1.5;
}
.im-message-text pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* --- Blockquotes -------------------------------------------------------- */
.im-message-text blockquote {
  border-left: 3px solid rgba(255, 255, 255, 0.2);
  margin: 0.618em 0;
  padding: 0.236em 0 0.236em 0.764em;
  opacity: 0.85;
}
.im-message-text blockquote p:first-child { margin-top: 0; }
.im-message-text blockquote p:last-child  { margin-bottom: 0; }

/* --- Tables ------------------------------------------------------------- */
.im-message-text table {
  border-collapse: collapse;
  font-size: 0.875em;
  width: 100%;
  margin: 0.618em 0;
}
.im-message-text td,
.im-message-text th {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.382em 0.618em;
  text-align: left;
  line-height: 1.4;
}
.im-message-text th {
  font-weight: 600;
}

/* --- Horizontal rules --------------------------------------------------- */
.im-message-text hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  margin: 1em 0;
}

/* --- Links -------------------------------------------------------------- */
.im-message-text a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* --- Collapse top/bottom margins when elements are flush with bubble --- */
.im-message-text > :first-child { margin-top: 0 !important; }
.im-message-text > :last-child  { margin-bottom: 0 !important; }

/* --- Light mode overrides ----------------------------------------------- */
body.light_mode .im-message-text code {
  background: rgba(0, 0, 0, 0.06);
}
body.light_mode .im-message-text pre {
  background: rgba(0, 0, 0, 0.04);
}
body.light_mode .im-message-text blockquote {
  border-left-color: rgba(0, 0, 0, 0.2);
}
body.light_mode .im-message-text td,
body.light_mode .im-message-text th {
  border-color: rgba(0, 0, 0, 0.15);
}
body.light_mode .im-message-text hr {
  border-top-color: rgba(0, 0, 0, 0.15);
}
body.light_mode .im-message-text a {
  text-decoration-color: rgba(0, 0, 0, 0.4);
}

.im-message-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: opacity 0.2s ease;
  pointer-events: auto;
  position: relative;
  z-index: 10;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
  display: inline;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-all;
  max-width: 100%;
}

.im-message-bubble.sent .im-message-link {
  text-decoration-color: rgba(255, 255, 255, 0.6);
}

.im-message-bubble.received .im-message-link {
  text-decoration-color: rgba(255, 255, 255, 0.4);
}

.im-message-link:active {
  opacity: 0.6;
}

/* No :hover styles (mobile-only PWA) */

/* App Link Preview Card (inline in bubble) */
.im-app-link-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin-top: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  overflow: hidden;
}

.im-app-link-card:active {
  background: rgba(255, 255, 255, 0.14);
}

.im-app-link-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.im-app-link-card-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.im-app-link-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.im-app-link-card-tagline {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.im-app-link-card-arrow {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
}

/* Skeleton / shimmer loading state */
.im-app-link-card-skeleton {
  pointer-events: none;
}

.im-app-link-card-icon-skeleton {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.08);
  animation: im-card-shimmer 1.2s ease-in-out infinite;
}

.im-app-link-card-name-skeleton {
  width: 100px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  animation: im-card-shimmer 1.2s ease-in-out infinite;
}

.im-app-link-card-tagline-skeleton {
  width: 140px;
  height: 12px;
  border-radius: 4px;
  margin-top: 4px;
  background: rgba(255, 255, 255, 0.08);
  animation: im-card-shimmer 1.2s ease-in-out infinite;
  animation-delay: 0.15s;
}

@keyframes im-card-shimmer {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.8; }
}

/* Light mode overrides */
body.light_mode .im-app-link-card {
  background: rgba(0, 0, 0, 0.06);
}

body.light_mode .im-app-link-card:active {
  background: rgba(0, 0, 0, 0.1);
}

body.light_mode .im-app-link-card-name {
  color: #1a1a1a;
}

body.light_mode .im-app-link-card-tagline {
  color: rgba(0, 0, 0, 0.5);
}

body.light_mode .im-app-link-card-arrow {
  color: rgba(0, 0, 0, 0.3);
}

body.light_mode .im-app-link-card-icon-skeleton,
body.light_mode .im-app-link-card-name-skeleton,
body.light_mode .im-app-link-card-tagline-skeleton {
  background: rgba(0, 0, 0, 0.08);
}

/* Quoted Message in Bubble */
.im-quoted-message {
  display: flex;
  gap: 8px;
  padding: 6px 8px;
  margin-bottom: 6px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  font-size: 12px;
}

.im-message-bubble.sent .im-quoted-message {
  background: rgba(255, 255, 255, 0.15);
}

.im-quoted-message-line {
  width: 2px;
  background: currentColor;
  opacity: 0.5;
  border-radius: 1px;
  flex-shrink: 0;
}

.im-quoted-message-text {
  flex: 1;
  opacity: 0.75;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}

/* Group Message Sender Info */
.im-message-sender-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 12px;
}

.im-message-sender-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
}

.im-message-sender-avatar-placeholder {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}

.im-message-sender-name {
  font-weight: 600;
  color: #64748b;
}

/* Message Metadata */
.im-message-meta {
  font-size: 11px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.im-message-meta.sent {
  color: rgba(255, 255, 255, 0.7);
}

.im-message-meta.received {
  color: #94a3b8;
}

.im-message-time {
  display: inline;
}

.im-message-read-indicator {
  display: inline;
}

.im-loading-more {
  text-align: center;
  padding: 12px;
  color: #94a3b8;
  font-size: 14px;
}

.im-loading-messages {
  text-align: center;
  padding: 40px;
  color: #94a3b8;
}

.im-no-messages {
  text-align: center;
  padding: 40px;
}

.im-no-messages-icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
}

.im-no-messages-text {
  font-size: 16px;
  color: #64748b;
}

/* ============================================================================
   NEW MESSAGES INDICATOR
   ============================================================================ */

.im-new-messages-indicator {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  background: #10B981;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  z-index: 100;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  animation: slideUpBounce 0.3s ease-out;
}

.im-new-messages-indicator:hover {
  background: #059669;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

.im-new-messages-indicator:active {
  transform: translateX(-50%) translateY(0);
}

@keyframes slideUpBounce {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  60% {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
  }
  100% {
    transform: translateX(-50%) translateY(0);
  }
}

/* ============================================================================
   TYPING INDICATOR
   ============================================================================ */

.im-typing-indicator {
  /* Thread view: keep above composer */
  position: relative;
  left: 0;
  right: 0;
  z-index: 30;
  padding: 8px 16px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
}

.im-typing-text {
  font-size: 13px;
  color: #64748b;
  font-style: italic;
}

/* Typing indicator in conversation list */
.im-typing-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #10B981 !important;
  font-style: italic;
}

.im-typing-dots {
  display: flex;
  align-items: center;
  gap: 3px;
}

.im-typing-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #10B981;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.im-typing-dot:nth-child(1) {
  animation-delay: -0.32s;
}

.im-typing-dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typingBounce {
  0%, 60%, 100% {
    transform: translateY(0);
    opacity: 0.7;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

/* AI typing indicator bubble: no background / border */
.im-message-bubble.received:has(.im-typing-dots) {
  background: none;
  border: none;
}

.im-typing-text-preview {
  font-size: 13px;
}

/* ============================================================================
   MESSAGE INPUT
   ============================================================================ */

.im-input-container {
  /* Thread view: fixed composer, lifted by keyboard inset */
  position: relative;
  z-index: 40;
  padding: 12px 16px;
  border-top: 1px solid #131313;
  background: #000000;
  padding-bottom: calc(20px + var(--safe-bottom));
  flex-shrink: 0;
}

/* iOS Safari: when we size `.im-container` to the visualViewport, the keyboard is
   already excluded from layout. Extra bottom padding becomes a visible gap above
   the keyboard, so keep only a small safe-area cushion. */
body.ios .im-input-container {
  /* Base iOS padding when keyboard is closed (safe-area cushion). */
  padding-bottom: calc((12px + var(--safe-bottom)) * (1 - var(--im-kb-open, 0)));
}

/* Android: ensure safe-area-inset-bottom is accounted for */
body.android .im-input-container {
  padding-bottom: calc(20px + var(--safe-bottom));
  padding-top: 0px;
}


.im-input-container svg{
    stroke: #dadada;
}

/* Quote Preview in Composer */
.im-quote-preview {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f1f5f926;
  border-left: 2px solid #4e4e4e;
  margin-bottom: 8px;
  border-radius: 3px;
}

.im-quote-preview-content {
  flex: 1;
  min-width: 0;
}

.im-quote-preview-label {
  font-size: 12px;
  font-weight: 600;
  color: #10B981;
  margin-bottom: 2px;
}

.im-quote-preview-text {
  font-size: 13px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-quote-preview-close {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.im-quote-preview-close:hover {
  background: #e2e8f0;
  color: #64748b;
}

.im-input-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

body:not(.light_mode) .im-textarea {
  color: #fff;
  background: #1b1b1b;
  border-color: #ffffff08;
}

.im-textarea {
  flex: 1;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  resize: none;
  max-height: 120px;
  min-height: 44px;
  font-family: inherit;
  overflow-y: auto;
  transition: border-color 0.2s ease;
  border: 1px solid #e2e8f0;
}

/* iOS: prevent focus-zoom (can look like layout jump). */
body.ios .im-textarea {
  font-size: 16px;
}

body:not(.light_mode) .im-textarea:focus {
  outline: none;
  border-color: #ffffff33;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

body:not(.light_mode) .im-textarea::placeholder {
  color: #cbd5e1;
}

/* Attach Button */
.im-attach-button {
  background: none;
  border: none;
  color: #dadada;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  cursor: pointer;
}

.im-attach-button:active {
  opacity: 0.6;
}

/* Attach Context Menu (matches app ContextMenu visual style) */
.im-attach-context-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
}

.im-attach-context-menu {
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  background: rgb(30 30 30 / 51%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 12px;
  padding: 1px 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body.light_mode .im-attach-context-menu {
  background: rgba(255, 255, 255, 0.51);
}
.im-attach-context-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 19px;
  border: none;
  background: none;
  color: #fff;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid rgb(255 255 255 / 7%);
  -webkit-tap-highlight-color: transparent;
}

body.light_mode .im-attach-context-menu-item {
  color: #000;
  border-bottom: 1px solid rgb(0 0 0 / 7%);
}

.im-attach-context-menu-item:last-child {
  border-bottom: none;
}

.im-attach-context-menu-item:active {
  background: rgba(0, 0, 0, 0.1);
}

.im-attach-context-menu-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* App chip in attachments row */
.ai-attachment-app-tile {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  background: #1a2a3a;
  border: 1px solid #2a4a6a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ai-attachment-app-tile-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  object-fit: cover;
}

.ai-attachment-app-tile-letter {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #2a4a6a;
  color: #8bb8e8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
}

.ai-attachment-app-tile-name {
  font-size: 10px;
  color: #999;
  max-width: 68px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

/* Light mode: app tile */
body.light_mode .ai-attachment-app-tile {
  background: #e8f0fa;
  border-color: #b8d0ea;
}

body.light_mode .ai-attachment-app-tile-letter {
  background: #b8d0ea;
  color: #2a5a8a;
}

body.light_mode .ai-attachment-app-tile-name {
  color: #555;
}

/* Send Button */
.im-send-button {
  background: #106eb9;
  color: white;
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  min-height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

body.light_mode .im-send-button {
  color: #000;
}

.im-send-button:hover:not(:disabled) {
  background: #0d5fa0;
}

.im-send-button:active:not(:disabled) {
  transform: scale(0.95);
}

.im-send-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 640px) {
  .im-conversation-item {
    padding: 10px 12px;
  }


  .im-conversation-name {
    font-size: 15px;
  }

  .im-last-message {
    font-size: 13px;
  }

  .im-messages-container {
    padding: 12px;
  }

  .im-message-bubble {
    max-width: 90%;
  }

  .im-textarea {
    font-size: 16px; /* Prevents iOS zoom */
    min-height: 40px;
    padding: 8px 12px;
  }

  .im-send-button {
    width: 40px;
    height: 40px;
    min-height: 40px;
    min-width: 40px;
    font-size: 18px;
  }
}

/* ============================================================================
   ANIMATIONS
   ============================================================================ */

@keyframes slideInMessage {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}

.im-message-bubble {
  animation: slideInMessage 0.2s ease-out;
}

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

.im-typing-indicator {
  animation: fadeIn 0.3s ease-out;
}

/* ============================================================================
   SCROLLBAR STYLING
   ============================================================================ */

.im-list-container::-webkit-scrollbar,
.im-messages-container::-webkit-scrollbar {
  width: 8px;
}

.im-list-container::-webkit-scrollbar-track,
.im-messages-container::-webkit-scrollbar-track {
  background: transparent;
}

.im-list-container::-webkit-scrollbar-thumb,
.im-messages-container::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.im-list-container::-webkit-scrollbar-thumb:hover,
.im-messages-container::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ============================================================================
   LOADING SKELETONS
   ============================================================================ */

@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* ============================================================================
   SKELETONS (Conversation list + thread placeholders)
   Theme-aware shimmer (matches Profile skeleton approach)
   ============================================================================ */

.im-skeleton {
  pointer-events: none;
  user-select: none;
}

.im-skeleton-root {
  --im_skeleton_base: rgba(255, 255, 255, 0.10);
  --im_skeleton_shine: rgba(255, 255, 255, 0.18);
}

body.light_mode .im-skeleton-root {
  --im_skeleton_base: rgba(0, 0, 0, 0.08);
  --im_skeleton_shine: rgba(255, 255, 255, 0.75);
}

@keyframes im_skeleton_shimmer {
  0% { transform: translateX(0); }
  100% { transform: translateX(200%); }
}

.im-skeleton-block {
  background: var(--im_skeleton_base);
  position: relative;
  overflow: hidden;
}

.im-skeleton-block::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--im_skeleton_shine) 50%,
    transparent 100%
  );
  animation: im_skeleton_shimmer 1.25s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .im-skeleton-block::after {
    animation: none;
  }
}

/* Conversation list skeleton pieces */
.im-skeleton-avatar {
  border-radius: 50%;
}

.im-skeleton-text {
  height: 12px;
  border-radius: 999px;
  max-width: 100%;
}

.im-skeleton-text-title {
  width: min(180px, 70vw);
  height: 16px; /* closer to .im-conversation-name */
}

.im-skeleton-text-time {
  width: 44px;
  height: 12px;
  border-radius: 999px;
}

.im-skeleton-text-preview {
  width: min(240px, 78vw);
  height: 14px; /* closer to .im-last-message */
  opacity: 0.9;
}

/* Thread bubble skeletons */
.im-skeleton-bubble {
  min-height: 40px;
  border-radius: 18px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.im-skeleton-bubble.sent {
  background: rgba(16, 185, 129, 0.22);
  max-width: 85%;
  min-width: 200px;
  margin-left: auto;
}

.im-skeleton-bubble.received {
  background: rgba(255, 255, 255, 0.10);
  max-width: 85%;
  min-width: 200px;
}

.im-skeleton-text-message {
  width: 100%;
  height: 14px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.im-skeleton-text-message-short {
  width: 60%;
  height: 14px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}

.im-message-item.im-skeleton {
  padding: 0 16px;
  margin-bottom: 12px;
}

.im-message{
  margin-bottom: 10px;
}


.im-message-own{
  align-self: flex-end;
  margin-left: auto;
  display: flex;
  justify-content: flex-end;
  max-width: 85%;
}

.im-message-own .im-message-content{
  width: 100%;
}
/* ============================================================================
   ENHANCED EMPTY STATES
   ============================================================================ */

.im-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  min-height: 300px;
}

.im-empty-state-icon {
  color: #cbd5e1;
  margin-bottom: 0;
  opacity: 0.8;
}

.im-empty-state-title {
  font-size: 20px;
  font-weight: 600;
  color: #a3aab4;
  margin: 0;
}

.im-empty-state-description {
  font-size: 14px;
  color: #64748b;
  max-width: 300px;
  margin: 0;
  line-height: 1.5;
}

.im-error-state .im-empty-state-icon {
  color: #ef4444;
}

.im-error-icon {
  color: #ef4444 !important;
}

.im-retry-button {
  margin-top: 16px;
  padding: 10px 24px;
  background: #10B981;
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  font-size: 14px;
}

.im-retry-button:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.im-retry-button:active {
  transform: translateY(0);
}

/* ============================================================================
   LOADING SPINNER
   ============================================================================ */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.im-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e2e8f0;
  border-top-color: #10B981;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16px;
}

/* ============================================================================
   FADE TRANSITIONS
   ============================================================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animation removed from .im-conversation-item to prevent animation on conversation load */

/* Swipe-to-archive */
.ai-swipe-wrapper {
  position: relative;
  overflow: hidden;
}

.ai-swipe-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: #fff;
  visibility: hidden;
}

.ai-swipe-wrapper.swiping .ai-swipe-bg {
  visibility: visible;
}

.ai-swipe-bg-left {
  left: 0;
  padding-left: 24px;
}

.ai-swipe-bg-right {
  right: 0;
  padding-right: 24px;
}

.ai-swipe-content {
  position: relative;
  z-index: 1;
  will-change: transform;
  background: #000;
}

body.light_mode .ai-swipe-content {
  background: #fff;
}

.im-empty-state {
  animation: fadeIn 0.4s ease-out;
}

/* ============================================================================
   SMOOTH HOVER TRANSITIONS
   ============================================================================ */

.im-conversation-item,
.im-back-button,
.im-thread-username,
.im-send-button,
.im-retry-button,
.im-textarea {
  transition: background 0.2s ease, opacity 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

.im-send-button:active:not(:disabled) {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}

/* Message Reactions (scoped to IM to avoid cross-route collisions) */
.im-container .message-reactions-container {
  display: flex;
  margin-top: 0.5rem;
  align-items: center;
}

.im-container .im-message-bubble-container.sent .message-reactions-container {
  justify-content: flex-end;
  margin-right: 0.5rem;
  margin-top: 0.5rem;
}

.im-container .im-message-bubble-container.received .message-reactions-container {
  justify-content: flex-start;
  margin-left: 0.5rem;
  margin-top: 0.5rem;
}

.im-container .reactions-bar {
  display: flex;
  gap: 0.25rem;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}

.im-container .reaction-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
    background: #212121;
    border: 1px solid #ffffff21;
  border-radius: 12px;
  cursor: pointer;
  font-size: 0.875rem;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  min-height: 24px;
}

.im-container .reaction-badge:hover:not(:disabled) {
  background: #e8e8e8;
  border-color: #d0d0d0;
  transform: scale(1.1);
}

.im-container .reaction-badge:hover:not(:disabled) .count {
  color: #d0d0d0;
}



.im-container .reaction-badge .emoji {
  font-size: 1rem;
}

.im-container .reaction-badge .count {
  font-size: 0.75rem;
  font-weight: 500;
  min-width: 1.25rem;
  text-align: center;
  color: #2196f3;
}

.im-container .reaction-badge.user-reacted .count {
  color: #2196f3;
}

.im-container .reaction-badge:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.im-container .add-reaction-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.875rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
    background: #212121;
    border: 1px solid #ffffff21;
}

.im-container .add-reaction-btn:hover:not(:disabled) {
  background: #f0f0f0;
  border-color: #2196f3;
  color: #2196f3;
}

.im-container .add-reaction-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.im-container .reaction-picker-wrapper {
  position: relative;
}

.im-container .reaction-picker-popup {
  position: fixed;
  bottom: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(50%);
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  background: white;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 9999;
}

/* Position picker on the right for sent messages */
.im-container .im-message-bubble-container.sent .reaction-picker-popup {
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(50%);
}

.im-container .picker-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 2px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.25rem;
  transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.im-container .picker-emoji:hover:not(:disabled) {
  background: #f0f0f0;
  transform: scale(1.2);
}

.im-container .picker-emoji.selected {
  border-color: #2196f3;
  background: #e3f2fd;
}

.im-container .picker-emoji:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.im-reply-picker-btn svg {
  fill: black;
  color: black;
}

.im-container .picker-separator {
  width: 1px;
  height: 24px;
  background: #d0d0d0;
  margin: 0 4px;
  flex-shrink: 0;
}

.im-delete-picker-btn {
  color: #ef4444;
}

.im-delete-picker-btn:hover:not(:disabled) {
  background: #fee2e2;
  border-color: #ef4444;
}

.im-copy-picker-btn {
  color: #64748b;
}

.im-copy-picker-btn:hover:not(:disabled) {
  background: #f0f0f0;
  border-color: #64748b;
}

/* ============================================================================
   BLOCKING UI
   ============================================================================ */

/* Block Menu */
.im-thread-menu {
  position: relative;
  margin-left: auto;
}

.im-thread-menu-button {
  background: none;
  border: none;
  font-size: 20px;
  padding: 8px 12px;
  cursor: pointer;
  color: #64748b;
  transition: background 0.2s ease;
  border-radius: 8px;
}

.im-thread-menu-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #000;
  border: 1px solid #2b2b2b;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  min-width: 150px;
}

.im-thread-menu-item {
  display: block;
  width: 100%;
  padding: 12px 16px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  color: #fff;
    border-bottom: 1px solid #ffffff1f;
  transition: background 0.2s ease;
}

.im-thread-menu-item:hover {
  background: #f8fafc;
}

/* Blocked Banner */
.im-blocked-banner {
  position: relative;
  z-index: 45;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fef3c7;
  border-bottom: 1px solid #f59e0b;
  flex-shrink: 0;
}

.im-blocked-banner-text {
  font-size: 14px;
  color: #92400e;
  font-weight: 500;
}

.im-blocked-banner-button {
  background: #f59e0b;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.im-blocked-banner-button:hover {
  background: #d97706;
}

/* Blocked Input */
.im-input-blocked {
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.im-input-blocked-text {
  padding: 16px;
  color: #64748b;
  font-size: 14px;
  text-align: center;
}

/* ============================================================================
   MODALS
   ============================================================================ */

.im-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.im-modal {
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  z-index: 10001;
}

.im-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.im-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

.im-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #64748b;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.im-modal-close:hover:not(:disabled) {
  background: #f1f5f9;
}

.im-modal-close:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.im-modal-close-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.im-modal-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.im-modal-footer {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.im-modal-button {
  flex: 1;
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.im-modal-button-cancel {
  background: #f1f5f9;
  color: #1e293b;
}

.im-modal-button-cancel:hover:not(:disabled) {
  background: #e2e8f0;
}

.im-modal-button-primary {
  background: #22c55e;
  color: white;
}

.im-modal-button-primary:hover:not(:disabled) {
  background: #16a34a;
}

.im-modal-button-danger {
  background: #ef4444;
  color: white;
}

.im-modal-button-danger:hover:not(:disabled) {
  background: #dc2626;
}

.im-modal-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Delete Confirmation Modal */
.im-delete-confirm-modal {
  background: #1e293b;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
  animation: modalSlideUp 0.2s ease-out;
}

.im-delete-confirm-modal .im-modal-header {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.im-delete-confirm-modal .im-modal-title {
  color: #f1f5f9;
}

.im-delete-confirm-modal .im-modal-content {
  padding: 20px;
}

.im-delete-confirm-text {
  margin: 0;
  color: #cbd5e1;
  line-height: 1.6;
  font-size: 15px;
}

body.light_mode .im-delete-confirm-modal {
  background: white;
  border-color: transparent;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

body.light_mode .im-delete-confirm-modal .im-modal-header {
  border-bottom-color: #e2e8f0;
}

body.light_mode .im-delete-confirm-modal .im-modal-title {
  color: #1e293b;
}

body.light_mode .im-delete-confirm-text {
  color: #475569;
}

/* Message Deleting State */
.im-message-bubble-container.deleting {
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.im-message-bubble.deleting {
  pointer-events: none;
}

/* Deleted Message State */
.im-message-bubble.deleted {
  background: transparent !important;
  border: 1px dashed #cbd5e1;
}

.im-deleted-message-text {
  color: #94a3b8;
  font-style: italic;
  font-size: 14px;
}


.im-drawer-actions{
  background:#000000e6 !important;
}

.im-friend-search-input{
  width: 95%;
}

/* Drawer Content */
.im-drawer-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 80px;
}

.im-drawer-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 12px;
  padding: 16px;
  background: white;
  /* border-top: 1px solid #e2e8f0; */
  z-index: 10;
  padding-bottom: calc( 30px + var(--safe-bottom))
}

.im-drawer-actions .im-modal-button {
  flex: 1;
}

/* Friend Search Input */
.im-friend-search-input {
  padding: 12px 16px;
  margin: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  color: #1e293b;
  outline: none;
  transition: border-color 0.2s ease;
}

.im-friend-search-input:focus {
  border-color: #22c55e;
}

.im-friend-search-input:disabled {
  background: #f8fafc;
  cursor: not-allowed;
}

/* Friend List */
.im-friend-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.im-empty-friends-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
}

.im-empty-friends-state p {
  margin: 0;
}

/* Friend Item */
.im-friend-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.im-friend-item.selected {
  background: #f0fdf4;
}

.im-friend-checkbox-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.im-friend-checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
  accent-color: #22c55e;
}

.im-friend-checkbox:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.im-friend-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.im-friend-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e2e8f0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #64748b;
  flex-shrink: 0;
}

.im-friend-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-friend-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.im-friend-username {
  font-size: 14px;
  font-weight: 600;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-friend-name {
  font-size: 12px;
  color: #94a3b8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================================
   MEDIA UPLOAD & PREVIEW
   ============================================================================ */

.im-media-preview-container {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  overflow-x: auto;
  border-top: 1px solid white;
}

.im-media-preview-item {
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: #1e293b;
}

.im-media-preview-img,
.im-media-preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-media-preview-video-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.im-media-preview-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.im-media-button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background 0.2s ease;
  flex-shrink: 0;
}


.im-media-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.im-upload-progress {
  height: 2px;
  background: #e2e8f0;
  margin: 0 16px 8px;
  border-radius: 1px;
  overflow: hidden;
}

.im-upload-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #2563eb);
  transition: width 0.3s ease;
}

.im-uploading-spinner {
  animation: spin 1s linear infinite;
  display: inline-block;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ============================================================================
   MESSAGE MEDIA DISPLAY
   ============================================================================ */

.im-message-media-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 6px;
  width: 100%;
}

.im-message-media-container:last-child {
  margin-bottom: 0;
}

.im-message-media-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  max-width: 100%;
  max-height: 250px;
  min-height: 100px;
  /* Explicit width/height set via inline styles to prevent Safari layout shift */
  /* aspect-ratio fallback for browsers that don't support explicit dimensions */
  aspect-ratio: var(--media-aspect-ratio, 4 / 3); /* Dynamic aspect ratio from width/height, fallback to 4:3 for legacy */
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  z-index: 0;
  /* Ensure Safari respects explicit dimensions */
  box-sizing: border-box;
}

.im-message-media-item.clickable {
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.im-message-media-item.sending {
  opacity: 0.7;
}

.im-message-media-image {
  width: 100%;
  max-width: 300px;
  height: 100%;
  display: block;
  border-radius: 12px;
  max-height: 250px;
  object-fit: contain;
  aspect-ratio: var(--media-aspect-ratio, 4 / 3); /* Dynamic aspect ratio from width/height */
  position: relative;
  z-index: 1;
  /* Always render to establish container size, even when opacity is 0 */
  visibility: visible;
}

/* Phase 3.1: Blur-up placeholder thumbnail */
.im-message-media-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  /* Positioned absolutely on top of full image - matches full image's container size */
  width: 100%;
  height: 100%;
  max-width: 300px;
  max-height: 250px;
  /* Use fill to stretch thumbnail to match full image's container size exactly */
  /* User accepts stretching/pixelation to ensure thumbnail matches full image dimensions */
  /* Remove aspect-ratio constraint so fill can stretch to match container */
  object-fit: fill;
  border-radius: 12px;
  filter: blur(10px);
  transform: scale(1.1); /* Slight scale to prevent blur edge artifacts */
  z-index: 2; /* Above full image so it's visible when full image is loading */
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
  object-position: center;
  /* Ensure thumbnail fills the container - prevent it from rendering at natural size */
  box-sizing: border-box;
  /* Force explicit sizing to override natural dimensions */
  min-width: 100%;
  min-height: 100%;
}

.im-message-media-thumbnail.fade-out {
  opacity: 0;
}

.im-message-media-video {
  width: 100%;
  max-width: 300px;
  max-height: 250px;
  height: 100%;
  display: block;
  border-radius: 12px;
  object-fit: contain;
  aspect-ratio: var(--media-aspect-ratio, 4 / 3); /* Dynamic aspect ratio from width/height */
}

/* Loading skeleton/placeholder */
.im-message-media-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.im-message-media-skeleton-spinner {
  font-size: 24px;
  opacity: 0.5;
  animation: spin 1s linear infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.im-message-media-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.im-message-media-spinner {
  font-size: 32px;
  animation: spin 1s linear infinite;
}

/* ============================================================================
   MEDIA LIGHTBOX
   ============================================================================ */

.im-lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.2s ease;
}

.im-lightbox-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.im-lightbox-content {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.im-lightbox-image {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
}

.im-lightbox-video {
  max-width: 100%;
  max-height: 90vh;
  border-radius: 8px;
}

.im-lightbox-model {
  width: 85vw;
  height: 70vh;
  max-width: 500px;
  border-radius: 12px;
  background: #1a1a1a;
  --poster-color: transparent;
}

body.light_mode .im-lightbox-model {
  background: #f0f0f0;
}

.im-lightbox-close {
  position: absolute;
  top: calc(var(--safe-top) + 20px);
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 10;
}

.im-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.im-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  font-size: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  z-index: 10;
}

.im-lightbox-nav:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}

.im-lightbox-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.im-lightbox-prev {
  left: 20px;
}

.im-lightbox-next {
  right: 20px;
}

.im-lightbox-actions {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
  z-index: 10;
}

.im-lightbox-action-btn {
  width: 44px;
  height: 44px;
  padding: 11px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: none;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.im-lightbox-action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

.im-lightbox-counter {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.5);
  padding: 8px 16px;
  border-radius: 20px;
  z-index: 10;
}

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

/* ============================================================================
   FRIENDS TAB
   ============================================================================ */

.im-friends-tab {
  flex: 1;
  overflow-y: auto;
  background: #000;
}

/* ============================================================================
   APPS TAB (Inbox)
   ============================================================================ */

.im-apps-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #000;
  min-height: 0;
}

.im-apps-subtabs {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid #242424;
  background: #000;
  flex-shrink: 0;
}

.im-apps-subtab {
  flex: 1;
  border: 1px solid #2b2b2b;
  background: #111;
  color: #cbd5e1;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.im-apps-subtab:active {
  transform: scale(0.99);
  background: #151515;
}

.im-apps-subtab.active {
  background: rgba(34, 197, 94, 0.14);
  border-color: rgba(34, 197, 94, 0.35);
  color: #22c55e;
}

.im-apps-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.im-app-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #353535;
  background: #000;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.im-app-row:active {
  background: rgba(255, 255, 255, 0.06);
}

.im-app-row-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.im-app-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1a1a;
  border: 1px solid #2b2b2b;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.im-app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-app-icon-fallback {
  color: #cbd5e1;
  font-weight: 800;
  font-size: 16px;
}

.im-app-meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.im-app-name {
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-app-subline {
  color: #94a3b8;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-app-dot {
  opacity: 0.7;
}

.im-app-person {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}

.im-app-person-avatar {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  overflow: hidden;
  background: #222;
  border: 1px solid #2b2b2b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}

.im-app-person-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-app-person-name {
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-app-row-right {
  flex-shrink: 0;
}

.im-app-send-to-button {
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.14);
  color: #22c55e;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 800;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.im-app-send-to-button:active {
  transform: scale(0.98);
  background: rgba(34, 197, 94, 0.18);
}

.im-friends-section {
  padding: 16px 0;
}

/* Friends two-column grid */
.im-friends-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 12px;
}

.im-friend-grid-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #171717;
  border-radius: 16px;
  padding: 20px 12px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.im-friend-grid-card:active {
  background: #222;
  transform: scale(0.97);
}

.im-friend-grid-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  background: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  flex-shrink: 0;
}

.im-friend-grid-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

.im-friend-grid-handle {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Light mode overrides */
body.light_mode .im-friend-grid-card {
  background: #f5f5f5;
}

body.light_mode .im-friend-grid-card:active {
  background: #e8e8e8;
}

body.light_mode .im-friend-grid-avatar {
  background: #e2e8f0;
  color: #1e293b;
}

body.light_mode .im-friend-grid-name {
  color: #1e293b;
}

body.light_mode .im-friend-grid-handle {
  color: #64748b;
}

.im-suggestions-section {
  padding: 16px 0;
  background: #fff;
}

.im-suggestions-tab {
  height: 100%;
  overflow-y: auto;
  background: #fff;
}

.im-section-header {
  padding: 0 16px 12px 16px;
  border-bottom: 1px solid #242424;
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.im-section-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.im-suggestions-button {
  background: #2f2f2f;
  color: #fff;
  padding: 8px 16px;
  border-radius: 32px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
    border: 1px solid #ffffff05;
}

.im-suggestions-button:hover {
  background: #16a34a;
  transform: translateY(-1px);
}

.im-suggestions-button:active {
  transform: translateY(0);
  background: #15803d;
}

.im-suggestions-list {
  padding: 0;
}

.im-suggestions-list .im-suggestion-item {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
}

.im-suggestions-list .im-suggestion-item:last-child {
  border-bottom: none;
}

.im-loading-state,
.im-error-state,
.im-empty-state {
  padding: 40px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.im-loading-state {
  color: #64748b;
}

.im-loading-state .im-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e2e8f0;
  border-top-color: #22c55e;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.im-error-state {
  color: #ef4444;
}

.im-error-state p {
  margin: 0;
  font-size: 14px;
}

.im-retry-button {
  padding: 8px 16px;
  background: #22c55e;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
}

.im-retry-button:hover {
  background: #16a34a;
}

.im-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 4px 0;
}

.im-empty-description {
  font-size: 14px;
  color: #64748b;
  margin: 0;
}

/* Sticky Suggestions Section */
/* This section sticks to the top when scrolling through friends */
.im-suggestions-sticky {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 9;
  border-top: 2px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-top: 16px;
  padding-top: 16px;
  padding-bottom: 8px;
}

/* Ensure suggestions section header stays visible when scrolling suggestions list */
.im-suggestions-sticky .im-section-header {
  background: #fff;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 12px;
}

.im-letter-header {
  font-size: 24px;
  font-weight: 700;
  color: #475569;
  padding: 12px 16px 8px 16px;
  margin-top: 8px;
}

.im-letter-header:first-child {
  margin-top: 0;
}

.im-friend-item-clickable {
  padding: 0 16px;
  margin-bottom: 8px;
}

.im-suggestion-item {
  padding: 0 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 16px;
}

.im-suggestion-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.im-mutual-friends-badge {
  margin-top: 8px;
  margin-left: 16px;
  font-size: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.im-suggestion-actions {
  margin-top: 12px;
  margin-left: 16px;
}

.im-load-more-container {
  padding: 16px;
  text-align: center;
}

.im-load-more-button {
  padding: 10px 24px;
  background: #f8fafc;
  color: #475569;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}

.im-load-more-button:hover:not(:disabled) {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.im-load-more-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Auto-load trigger for infinite scroll */
.im-load-more-trigger {
  min-height: 100px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.im-loading-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #64748b;
  font-size: 14px;
  padding: 20px 0;
}

/* Loading skeleton for friends */
.im-friends-loading-skeleton {
  padding: 0 16px;
  margin-top: 8px;
}

.im-friend-skeleton-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #f1f5f9;
}

.im-friend-skeleton-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  flex-shrink: 0;
}

.im-friend-skeleton-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.im-friend-skeleton-name {
  height: 16px;
  width: 60%;
  border-radius: 4px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

.im-friend-skeleton-handle {
  height: 14px;
  width: 40%;
  border-radius: 4px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Load more error state */
.im-load-more-error {
  padding: 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.im-load-more-error-message {
  color: #ef4444;
  font-size: 14px;
  margin: 0;
}

.im-load-more-retry-button {
  padding: 8px 16px;
  background: #22c55e;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.im-load-more-retry-button:hover {
  background: #16a34a;
}

.im-load-more-retry-button:active {
  transform: scale(0.98);
}

/* Fallback load more button */
.im-load-more-fallback {
  padding: 20px;
  text-align: center;
}

/* Group Settings Drawer - Members Section */
.im-group-members-section {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 120px;
}


/* .im-group-members-section.admin {
  padding-bottom: 100px;
} */

/* Group Settings Drawer - Clickable Member Info */
.im-member-info-clickable {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

#group_settings_drawer .drawer-title{
  color: white !important;
}

/* Suggestions drawer title - ensure visibility in dark mode */
#suggestions_drawer .drawer-title {
  color: white !important;
}

/* ============================================================================
   GROUP SETTINGS DRAWER
   ============================================================================ */

/* Alert Messages */
.im-alert-success {
  margin-bottom: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 0.75rem;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.375rem;
  color: #15803d;
  font-size: 0.875rem;
}

.im-alert-error {
  margin-bottom: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 0.75rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.375rem;
  color: #991b1b;
  font-size: 0.875rem;
}

.im-alert-info {
  margin-bottom: 1rem;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 0.75rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.375rem;
  color: #1e40af;
  font-size: 0.875rem;
}

/* Group Info Section */
.im-group-info-section {
  margin-bottom: 1.5rem;
  margin-left: 1rem;
  margin-right: 1rem;
  padding: 1rem;
  background: #111827;
  border-radius: 0.5rem;
}

.im-group-info-title {
  font-weight: 600;
  color:white;
  margin-bottom: 1rem;
  font-size: 1rem;
}

/* Form Fields */
.im-form-field {
  margin-bottom: 1rem;
}

.im-form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color:white;
  margin-bottom: 0.5rem;
}

.im-form-input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  outline: none;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.im-form-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
}

.im-form-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Form Display (non-editing state) */
.im-form-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
}

.im-form-display-content {
  color: #111827;
  flex: 1;
}

/* Form Actions */
.im-form-actions {
  display: flex;
  gap: 0.5rem;
}

/* Buttons */
.im-button-primary {
  flex: 1;
  padding: 0.5rem 1rem;
  background: #60a5fa;
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 0.875rem;
}

.im-button-primary:hover:not(:disabled) {
  background: #2563eb;
}

.im-button-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.im-button-secondary {
  flex: 1;
  padding: 0.5rem 1rem;
  background: white;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 0.875rem;
}

.im-button-secondary:hover:not(:disabled) {
  background: #f3f4f6;
}

.im-button-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.im-button-edit {
  color: #2563eb;
  font-size: 0.875rem;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

.im-button-edit:hover:not(:disabled) {
  color: #1d4ed8;
}

.im-button-edit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Avatar Components */
.im-avatar-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.im-avatar-preview-container {
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: center;
}

.im-avatar-preview {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto;
  border: 2px solid #3b82f6;
}

.im-avatar-placeholder {
  width: 3rem;
  height: 3rem;
  background: #e5e7eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.im-avatar-placeholder-large {
  width: 6rem;
  height: 6rem;
  background: #f3f4f6;
  border: 2px dashed #d1d5db;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.im-avatar-placeholder-text {
  color: #6b7280;
  font-size: 0.75rem;
  text-align: center;
  padding: 0 0.5rem;
}

.im-avatar-text {
  color: #4b5563;
  font-size: 0.875rem;
}

.im-avatar-image {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  object-fit: cover;
}

/* File Upload */
.im-file-upload-label {
  display: block;
  width: 100%;
  padding: 0.5rem 1rem;
  text-align: center;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  margin-bottom: 0.5rem;
  color: black;
}

.im-file-upload-label:hover:not(:disabled) {
  background: #e5e7eb;
}

.im-file-upload-label:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.im-file-upload-input {
  display: none;
}

.im-upload-requirements {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.75rem;
  text-align: center;
}

/* Upload Progress */
.im-upload-progress-container {
  margin-bottom: 0.5rem;
}

.im-upload-progress-bar-container {
  width: 100%;
  background: #e5e7eb;
  border-radius: 9999px;
  height: 0.5rem;
}

.im-upload-progress-bar {
  background: #2563eb;
  height: 0.5rem;
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.im-upload-progress-text {
  font-size: 0.75rem;
  color: #6b7280;
  text-align: center;
  margin-top: 0.25rem;
}

/* Members Section */
.im-members-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.im-members-title {
  font-weight: 600;
  color: #111827;
  font-size: 1rem;
}

.im-members-list {
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
}

.im-members-loading {
  padding: 1rem;
  text-align: center;
  color: #6b7280;
}

/* Member Item */
.im-member-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.2s ease;
}

.im-member-item:hover {
  background: #f9fafb;
}

.im-member-item:last-child {
  border-bottom: none;
}

.im-member-name {
  font-size: 0.875rem;
  font-weight: 500;
  color:white;
}

.im-member-username {
  font-size: 0.75rem;
  color: #6b7280;
}

.im-member-actions-container {
  margin-left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
}

.im-member-badges {
  display: flex;
  gap: 0.25rem;
}

.im-member-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
}

.im-member-badge-you {
  background: #dbeafe;
  color: #1e40af;
}

.im-member-badge-admin {
  background: #fef3c7;
  color: #92400e;
}

.im-member-action-buttons {
  display: flex;
  gap: 0.5rem;
}

.im-member-action-button {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  border: 1px solid;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  background: white;
}

.im-member-action-button-promote {
  color: #2563eb;
  border-color: #93c5fd;
}

.im-member-action-button-promote:hover:not(:disabled) {
  background: #dbeafe;
}

.im-member-action-button-demote {
  color: #ca8a04;
  border-color: #fde047;
}

.im-member-action-button-demote:hover:not(:disabled) {
  background: #fef3c7;
}

.im-member-action-button-remove {
  color: #dc2626;
  border-color: #fca5a5;
}

.im-member-action-button-remove:hover:not(:disabled) {
  background: #fee2e2;
}

.im-member-action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   GROUP CREATION MODAL
   ============================================================================ */

/* Modal Overlay with Padding */
.im-modal-overlay-padded {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 10000;
}

/* Modal Container */
.im-modal-container {
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  width: 100%;
  max-width: 28rem;
  max-height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

/* Modal Content Padding */
.im-modal-content-padded {
  padding: 1.5rem;
}

/* Section Divider */
.im-section-divider {
  margin-bottom: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.im-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.75rem;
}

/* Character Count */
.im-character-count {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

/* Friend List Container */
.im-friend-list-container {
  max-height: 12rem;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

.im-friend-list-container-large {
  max-height: 16rem;
  overflow-y: auto;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

.im-friend-list-loading,
.im-friend-list-empty {
  padding: 1rem;
  text-align: center;
  color: #6b7280;
  font-size: 0.875rem;
}

/* Friend Item for Direct Message */
.im-friend-item-dm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background 0.2s ease;
}

.im-friend-item-dm:hover {
  background: #eff6ff;
}

.im-friend-item-dm:last-child {
  border-bottom: none;
}

.im-friend-item-dm-info {
  flex: 1;
  min-width: 0;
}

.im-friend-item-dm-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-friend-item-dm-username {
  font-size: 0.75rem;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-friend-item-dm-action {
  color: #2563eb;
  font-size: 0.875rem;
  font-weight: 500;
  margin-left: 0.75rem;
}

/* Friend Item for Group Selection */
.im-friend-item-select {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: background 0.2s ease;
}

.im-friend-item-select:hover {
  background: #f9fafb;
}

.im-friend-item-select.selected {
  background: #eff6ff;
}

.im-friend-item-select:last-child {
  border-bottom: none;
}

.im-friend-checkbox-select {
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  border: 1px solid #d1d5db;
  accent-color: #2563eb;
  cursor: pointer;
}

.im-friend-item-select-info {
  margin-left: 0.75rem;
  flex: 1;
  min-width: 0;
}

.im-friend-item-select-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-friend-item-select-username {
  font-size: 0.75rem;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Member Count Info */
.im-member-count-info {
  margin-top: 0.75rem;
  font-size: 0.75rem;
  color: #4b5563;
}

/* Modal Footer with Background */
.im-modal-footer-bg {
  display: flex;
  gap: 0.75rem;
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  flex-shrink: 0;
}

.im-modal-button-blue {
  flex: 1;
  padding: 0.5rem 1rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 0.875rem;
}

.im-modal-button-blue:hover:not(:disabled) {
  background: #1d4ed8;
}

.im-modal-button-blue:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Label Helper Text */
.im-label-helper {
  color: #6b7280;
  font-weight: 400;
  margin-left: 0.25rem;
}

body.light_mode .im-messages-page,
body.light_mode .im-sidebar,
body.light_mode .im-container,
body.light_mode .im-list-header,
body.light_mode .im-tabs-container{
    background: #fff;
}

/* AI messages page containers */
body.light_mode .ai-messages-page .im-container,
body.light_mode .ai-messages-page .im-sidebar {
    background: #fff !important;
}

body.light_mode .im-conversation-item{
    border-bottom: 1px solid #f1f5f9;
}

body.light_mode .im-tab-active{
    color: #22c55e;
    border-bottom-color: #22c55e;
    background: #f0fdf4;
}

body.light_mode .im-list-header h1,
body.light_mode .im-conversation-name{
    color: #1e293b;
}

body.light_mode .im-avatar,
body.light_mode .im-thread-avatar{
    color: #64748b;
    background: #e2e8f0;
}

body.light_mode .im-search-input{
    background: #f8fafc;
    color: #1e293b;
    border-color: #e2e8f0;
}

body.light_mode .im-list-header,
body.light_mode .im-tabs-container{
    border-color: #e2e8f0;
}

body.light_mode .im-search-container{
    border-color: #e2e8f0;
}

body.light_mode .im-last-message{
    color: #64748b;
}

body.light_mode .im-messages-container {
    background: #f8fafc;
}

body.light_mode .ai-messages-page .im-messages-container {
    background: #f8fafc !important;
}

body.light_mode .im-thread-username{
    color: #1e293b;
}

body.light_mode .im-thread-header{
    border-bottom-color: #e2e8f0;
    background: #fff !important;
}

body.light_mode .ai-messages-page .im-thread-header {
    background: #fff !important;
    border-bottom-color: #e2e8f0 !important;
}

/* AI model bar light mode */
body.light_mode .ai-model-bar {
    background: #fff !important;
    border-bottom-color: #e5e7eb !important;
}

body.light_mode .ai-model-bar .ai-model-pill {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

body.light_mode .ai-model-bar .ai-model-add-btn {
    background: #f3f4f6 !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

/* AI model picker drawer light mode */
body.light_mode #ai_model_picker .drawer-title {
    color: #111827 !important;
}

body.light_mode .ai-model-drawer-row .ai-model-drawer-name {
    color: #1f2937;
}

body.light_mode .ai-model-drawer-row.active {
    background: rgba(0, 0, 0, 0.05);
}

body.light_mode .ai-model-drawer-row.active .ai-model-drawer-name {
    color: #111827;
}

body.light_mode .ai-model-drawer-empty {
    color: #6b7280;
}

body.light_mode .im-message-bubble.received{
    background: #e2e8f0;
    color: #1e293b;
}

body.light_mode .im-message-bubble.received:has(.im-typing-dots) {
    background: none;
    border: none;
}

body.light_mode .im-input-container{
    background: #fff;
    border-top-color: #e5e7eb;
}

body.light_mode .im-input-container svg{
    stroke: #1e293b;
}

/* Light mode textarea */
body.light_mode .im-textarea {
    background: #f9fafb !important;
    color: #111827 !important;
    border-color: #e5e7eb !important;
}

body.light_mode .im-textarea:focus {
    border-color: #106eb9 !important;
    box-shadow: 0 0 0 3px rgba(16, 110, 185, 0.1) !important;
}

body.light_mode .im-textarea::placeholder {
    color: #9ca3af !important;
}

/* Light mode attach button */
body.light_mode .im-attach-button {
    color: #1e293b !important;
}

body.light_mode .im-attach-button svg {
    stroke: #1e293b !important;
}

/* Light mode attachment preview */
body.light_mode .ai-attachment-thumb {
    border-color: #e5e7eb !important;
}

body.light_mode .ai-attachment-remove {
    background: rgba(255, 255, 255, 0.9) !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
}

body.light_mode .im-thread-online-indicator{
    border-color: #fff;
}

body.light_mode .im-friends-tab{
    background: #fff;
}

body.light_mode .im-apps-tab,
body.light_mode .im-apps-subtabs,
body.light_mode .im-app-row {
  background: #fff;
}

body.light_mode .im-apps-subtabs {
  border-bottom-color: #e2e8f0;
}

body.light_mode .im-apps-subtab {
  background: #f8fafc;
  border-color: #e2e8f0;
  color: #334155;
}

body.light_mode .im-apps-subtab.active {
  background: #f0fdf4;
  border-color: rgba(34, 197, 94, 0.35);
  color: #16a34a;
}

body.light_mode .im-app-row {
  border-bottom-color: #f1f5f9;
}

body.light_mode .im-app-name {
  color: #0f172a;
}

body.light_mode .im-app-subline {
  color: #64748b;
}

body.light_mode .im-app-icon {
  background: #f8fafc;
  border-color: #e2e8f0;
}

body.light_mode .im-section-header h2{
    color: #1e293b;
}

body.light_mode .im-section-header{
    border-bottom-color: #e2e8f0;
}

body.light_mode .im-online-indicator{
    border-color: #fff;
}

body.light_mode .im-thread-menu-dropdown{
    background: #fff;
    border-color: #e2e8f0;
}

body.light_mode .im-thread-menu-item{
    color: #1e293b;
}

body.light_mode .im-drawer .drawer, body.light_mode .im-drawer-actions{
  background:#fff !important;
}

body.light_mode .im-friend-item{
  border-bottom: 1px solid #f1f5f9;
}

body.light_mode .im-friend-username{
  color: #1e293b;
}

body.light_mode .im-member-name{
  color: #111827;
}

body.light_mode .im-group-info-section{
  background: #f9fafb;
}

body.light_mode .im-group-info-title {
  color: #111827;

}

body.light_mode .im-form-label{
  color: #374151;
}

body.light_mode #group_settings_drawer .drawer-title{
  color: #111827 !important;
}

body.light_mode #suggestions_drawer .drawer-title {
  color: #111827 !important;
}

body.light_mode .im-group-badge{
    background: #fff;
    color: #000;
}

body.light_mode .im-friends-dropdown{
    background: #f2f2f2f5;
}

body.light_mode .im-friends-dropdown .im-friend-username,
body.light_mode .im-friends-dropdown .name{
    color: #000;
}

body.light_mode .im-container .reaction-badge{
    background: #f0f0f0;
    border-color: #e0e0e0;
}

body.light_mode .im-date-divider-label{
    background: #e2e8f0;
    color: #64748b;
}

/* ==========================================================================
   CONVERSATION INFO PAGE
   ========================================================================== */

.im-conversation-info {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #000;
  display: flex;
  flex-direction: column;
  z-index: 100;
}

.im-conversation-info-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(var(--safe-top) + 12px) 16px 12px;
  background: #000;
  border-bottom: 1px solid #1a1a1a;
  flex-shrink: 0;
}

.im-conversation-info-back {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #106eb9;
  font-size: 22px;
  line-height: 1;
}

.im-conversation-info-header-title {
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

.im-conversation-info-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.im-conversation-info-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: #106eb9;
  border-radius: 50%;
  animation: im-info-spin 0.7s linear infinite;
}

@keyframes im-info-spin {
  to { transform: rotate(360deg); }
}

.im-conversation-info-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(var(--safe-bottom) + 24px);
}

/* Profile section */
.im-conversation-info-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px 20px;
}

.im-conversation-info-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 12px;
}

.im-conversation-info-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-conversation-info-avatar-initial {
  font-size: 32px;
  font-weight: 600;
  color: #94a3b8;
}

.im-conversation-info-name {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.im-conversation-info-subtitle {
  font-size: 14px;
  color: #94a3b8;
}

/* Stats */
.im-conversation-info-stats {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  margin: 0 16px 8px;
  background: #111;
  border-radius: 12px;
}

.im-conversation-info-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.im-conversation-info-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.im-conversation-info-stat-label {
  font-size: 11px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Sections */
.im-conversation-info-section {
  padding: 16px;
}

.im-conversation-info-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.im-conversation-info-see-all {
  font-size: 13px;
  font-weight: 500;
  color: #106eb9;
}

.im-conversation-info-see-all:active {
  opacity: 0.6;
}

/* Media grid */
.im-conversation-info-media-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  border-radius: 8px;
  overflow: hidden;
}

.im-conversation-info-media-item {
  aspect-ratio: 1;
  background: #1a1a2e;
  position: relative;
}

.im-conversation-info-media-item:active {
  opacity: 0.7;
}

.im-conversation-info-media-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
}

/* Links */
.im-conversation-info-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.im-conversation-info-link-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #111;
  border-radius: 10px;
}

.im-conversation-info-link-card:active {
  opacity: 0.7;
}

.im-conversation-info-link-icon {
  font-size: 20px;
  width: 40px;
  height: 40px;
  background: #1a1a2e;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.im-conversation-info-link-content {
  flex: 1;
  min-width: 0;
}

.im-conversation-info-link-title {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.im-conversation-info-link-domain {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}

/* Apps */
.im-conversation-info-apps {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.im-conversation-info-app-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  background: #111;
  border-radius: 12px;
  flex-shrink: 0;
}

.im-conversation-info-app-card:active {
  opacity: 0.7;
}

.im-conversation-info-app-icon {
  width: 56px;
  height: 56px;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}

.im-conversation-info-app-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-conversation-info-app-name {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  white-space: nowrap;
}

/* Members */
.im-conversation-info-members {
  display: flex;
  flex-direction: column;
}

.im-conversation-info-member {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #1a1a1a;
}

.im-conversation-info-member:last-child {
  border-bottom: none;
}

.im-conversation-info-member:active {
  opacity: 0.7;
}

.im-conversation-info-member-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  font-size: 16px;
  font-weight: 600;
  color: #94a3b8;
}

.im-conversation-info-member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.im-conversation-info-member-details {
  flex: 1;
  min-width: 0;
}

.im-conversation-info-member-name {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}

.im-conversation-info-member-you {
  color: #64748b;
  font-weight: 400;
}

.im-conversation-info-member-role {
  font-size: 12px;
  color: #106eb9;
  margin-top: 1px;
}

.im-conversation-info-member-arrow {
  font-size: 20px;
  color: #475569;
  flex-shrink: 0;
}

/* Light mode overrides */
body.light_mode .im-conversation-info {
  background: #fff;
}

body.light_mode .im-conversation-info-header {
  background: #fff;
  border-bottom-color: #e2e8f0;
}

body.light_mode .im-conversation-info-back {
  color: #106eb9;
}

body.light_mode .im-conversation-info-header-title {
  color: #111827;
}

body.light_mode .im-conversation-info-spinner {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: #106eb9;
}

body.light_mode .im-conversation-info-avatar {
  background: #e2e8f0;
}

body.light_mode .im-conversation-info-avatar-initial {
  color: #64748b;
}

body.light_mode .im-conversation-info-name {
  color: #111827;
}

body.light_mode .im-conversation-info-subtitle {
  color: #64748b;
}

body.light_mode .im-conversation-info-stats {
  background: #f8fafc;
}

body.light_mode .im-conversation-info-stat-value {
  color: #111827;
}

body.light_mode .im-conversation-info-stat-label {
  color: #64748b;
}

body.light_mode .im-conversation-info-section-header {
  color: #111827;
}

body.light_mode .im-conversation-info-media-item {
  background: #e2e8f0;
}

body.light_mode .im-conversation-info-link-card {
  background: #f8fafc;
}

body.light_mode .im-conversation-info-link-icon {
  background: #e2e8f0;
}

body.light_mode .im-conversation-info-link-title {
  color: #111827;
}

body.light_mode .im-conversation-info-link-domain {
  color: #94a3b8;
}

body.light_mode .im-conversation-info-app-card {
  background: #f8fafc;
}

body.light_mode .im-conversation-info-app-name {
  color: #64748b;
}

body.light_mode .im-conversation-info-member {
  border-bottom-color: #f1f5f9;
}

body.light_mode .im-conversation-info-member-avatar {
  background: #e2e8f0;
  color: #64748b;
}

body.light_mode .im-conversation-info-member-name {
  color: #111827;
}

body.light_mode .im-conversation-info-member-you {
  color: #94a3b8;
}

body.light_mode .im-conversation-info-member-arrow {
  color: #cbd5e1;
}

/* ==========================================================================
   AI CONVERSATION LIST – Context Menu (long-press)
   Reuses global .context-menu-overlay / .context-menu / .context-menu-item
   styles from homepages.css. No additional styles needed.
   ========================================================================== */

/* ==========================================================================
   LANDSCAPE SAFE-AREA INSETS
   Keep fixed IM/AI elements inside the notch-safe zone.
   Left/right only — no top/bottom changes to avoid VisualViewport conflicts.
   ========================================================================== */
@media (orientation: landscape) {
    .im-sidebar {
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }

    .im-container {
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }

    .im-thread-header--fixed {
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }

    .ai-model-bar,
    .im-drawer-actions {
        left: var(--safe-left);
        right: var(--safe-right);
    }

    .im-conversation-info {
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }
}
/* Dragging clone baseline (homescreen drag) */
.dragging-clone {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 10000;
  will-change: transform, opacity;
  backface-visibility: hidden;
  contain: layout paint;
  opacity: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.dragging-clone .dragging-badge {
  position: absolute;
  font-size: 18px;
  line-height: 18px;
  width: 18px;
  height: 18px;
  left: 12px;
  top: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 80ms linear;
}

.dragging-clone .dragging-badge.is-visible {
  opacity: 1;
}

/* Ensure inner icon fills wrapper even if original relied on parent CSS */
/* .dragging-clone .dragging-icon-box { overflow: hidden; border-radius: 16px; } */
.dragging-clone .dragging-icon-box { border-radius: 16px; }
.dragging-clone .app-icon { width: auto; height: auto; padding: 0; margin: 0; width: 100%;}
.dragging-clone .icon { width: 60px; height: 60px; margin-bottom: 0; overflow: hidden; }
.dragging-clone .icon img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.dragging-clone .folder-resize-handle { display: none !important; }

.dragging-clone .dragging-title {
    font-size: 11.2px;
    color: white;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    width: 100%;
    max-width: 68px;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    white-space: nowrap;
    transition: transform 0.1s ease-in-out, opacity 0.17s ease-in-out;
    text-align: left;
    margin-top: 7px;
}
:root {
    --folder-mini-icon-size: 20px;
    --folder-border-radius-2x2: 23px;
    --folder-border-radius-3x3: 25px;
    --folder-border-radius-4x4: 27px;
}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background: black;
    height: 100vh;
    overflow: hidden;
    position: relative;
    touch-action: pan-x pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
    margin: 0;
}


#main {
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.app-container {
    height: 100vh;
    overflow: hidden;
    position: relative;
    width: 100vw;
    left: 0;
    top: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Samsung/OneUI flicker: lock main layout containers to the initial viewport height
   so transient system-bar changes don't resize the page/dock region. */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
    body.android,
    body.android #main,
    body.android .app-container {
        height: var(--locked-vh, 100vh);
    }
    body.android .page {
        height: var(--locked-vh, 100vh);
    }
}

.pages-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
    position: relative;
    left: 0;
    top: 0;
    transform: translateX(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Removed 3D perspective  */

    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    /* scroll-behavior: smooth;  */
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* During initial mount, freeze horizontal scroll to avoid focus-driven jumps on Android. */
.pages-wrapper.init-lock {
    overflow-x: hidden;
    scroll-snap-type: none;
}

.try_mode .pages-wrapper {
    overflow: hidden;
}
.opened_app .pages-wrapper {
    overflow: hidden;
    scroll-snap-type: none;
}
body:has(.os-page-visible) .pages-wrapper {
    overflow: hidden;
}

.pages-wrapper.dragging {
    transition: none !important;
    cursor: grabbing;
}

.page {
    flex: none;
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: calc(var(--safe-top) + 70px) 20px 140px;
    box-sizing: border-box;

    scroll-snap-align: start;
    scroll-snap-stop: none;
    background: rgb(0,0,0);

    /* Force each page into its own compositor layer to prevent iOS Safari
       from evicting tiles when pages scroll near the viewport edge. */
    transform: translateZ(0);
}

/* Performance optimizations for scroll - more conservative on iOS */
body.android .page {
    contain: layout style paint;
    content-visibility: auto;
}

/* Disable interactions on off-screen pages to reduce event listener overhead */
/* Exception: during drag operations, keep pointer events enabled for drop targets */
/* body:not(.dragging-app) .page:not(.in-view) {
    pointer-events: none;
} */

/* Re-enable pointer events when visible */
/* .page.in-view {
    pointer-events: auto;
} */

/* Apply scroll-snap-stop: always on Android devices */
body.android .page {
    scroll-snap-stop: always;
}

.page.fullscreen {
    padding: 0;
}

/* App-type homescreen pages embed a feed. */
.page.app-page {
    overflow: hidden;
    background: black;
}

.page.app-page .homescreen-app-feed .app_feed_wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    /* Prevent iOS Safari tile eviction when page scrolls off-screen */
    transform: translateZ(0);
}

.page.no-scroll {
    overflow-y: hidden;
}

.page .page-title {
    position: absolute;
    top: calc(var(--safe-top));
    left: 50%;
    transform: translateX(-50%);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 
                 0 0 8px rgba(200, 200, 200, 0.15);
    letter-spacing: 0.3px;
    z-index: 9999;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    transition: opacity 0.2s ease-out;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 17px;
    /* background: #0000004f;
    padding: 2px 8px;
    border-radius: 6px;
    backdrop-filter: blur(5px); */
}

.page .page-title.clickable {
    pointer-events: auto;
    cursor: pointer;
}

.page .page-title-text {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.page .page-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: auto;
}

.page .page-title-icon .text-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.3px;
    z-index: 9999;
    pointer-events: none;
    user-select: none;
    position: relative;
    top: 1px;
    margin-left: -11px;
    background: #fff;
    color: #000;
    padding: 1px 6px;
    border-radius: 12px;
}

.page .page-title-icon svg {
    width: 12px;
    height: 100%;
    fill: currentColor;
}

/* Homescreen page title light mode */
body.light_mode .page .page-title {
    color: #000 !important;
    text-shadow: 0 0 3px rgba(255, 255, 255, 0.8), 0 0 6px rgba(255, 255, 255, 0.5);
}

/* Hide page title in try mode */
/* NOTE:
   `.page-title` also uses inline opacity for scroll-fade (`PagesWrapper.jsx` sets `style={{ opacity: ... }}`),
   so we need `!important` to reliably hide it in try-mode / opened-app.
   However, during feed edge-swipe animation we intentionally animate title opacity; that flow adds
   `body.feed_try_exit_animation`, so we skip the `!important` rule while animating to keep it compositable. */
body.try_mode:not(.feed_try_exit_animation) .page .page-title {
    opacity: 0 !important;
    pointer-events: none;
}
body.opened_app:not(.feed_try_exit_animation) .page .page-title {
    opacity: 0 !important;
    pointer-events: none;
}

body.chat-page-in-view #main>header{
    display: none;
}

/* Hide header on social pages (leaderboard, etc.) - scoped to only affect when .socialPage is present */
.socialPage #main>header,
.socialPage header {
    display: none !important;
}

/* Ensure header is visible by default (when .socialPage is not present) */
#main>header {
    display: block;
}
.page.chat-page {
    padding: 0;
    background: black;
    overflow: hidden;
}
.page.chat-page .page-title {
    top: calc(var(--safe-top))
}
.page.chat-page .chat-container,
.page.chat-page .chat-container .chat_view {
    height: 100%;
}
.page.feed-page {
    padding: 0;
    background: black;
    overflow: hidden;
}

.page.feed-page .app_feed_wrapper {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.feed-container {
    width: 100%;
    height: 100%;
    position: relative;
}

.app-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 85px;
    grid-auto-flow: dense; /* Enable dense packing for multi-slot items */
    gap: 15px 0;
    max-width: 400px;
    margin: 0 auto;
    min-height: calc(100vh - var(--safe-top) - 210px);
    height: 100vh;
    padding-bottom: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    background-color: var(--black-300);
}

/* Virtualized homescreen grid: slots are absolutely positioned inside a spacer. */
.app-grid.app-grid--virtual {
    display: block;
}

.app-grid.app-grid--virtual .app-grid-virtual-inner {
    position: relative;
    width: 100%;
}

.app-grid.app-grid--virtual .grid-slot {
    /* Base layout is applied via inline styles; keep defaults lightweight. */
    box-sizing: border-box;
}

@media (orientation: landscape) {
    .apps-page .app-grid {
        grid-template-columns: repeat(7, 1fr);
        max-width: calc(100% - 100px);
        margin-left: 100px;
        margin-right: 0;
    }
}

/* Disable scrolling on app-grid when dragging */
body.dragging-app .app-grid {
    overflow: hidden;
}

/* Prevent pages-wrapper from scrolling during drag */
body.dragging-app .pages-wrapper {
    overflow: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    scroll-snap-type: none !important;
}

/* Visual feedback when dragging an app over a dock/header slot */
body.dragging-app .drag-over-replace {
    transform: scale(1.2);
    transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    filter: brightness(1.3);
}

.grid-slot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    /* POC: Enable smooth transitions for iOS-like rearrangement */
    /* will-change: transform; */ /*DISABLED BECAUSE IT CAUSES FLICKERING when moving fast between pages. Do not remove this comment, do not uncomment.*/
}

/* Multi-slot grid items - span multiple columns */
.grid-slot[data-w="2"] { grid-column: span 2; }
.grid-slot[data-w="3"] { grid-column: span 3; }
.grid-slot[data-w="4"] { grid-column: span 4; }
.grid-slot[data-w="5"] { grid-column: span 5; }
.grid-slot[data-w="6"] { grid-column: span 6; }
.grid-slot[data-w="7"] { grid-column: span 7; }

/* Multi-slot grid items - span multiple rows */
.grid-slot[data-h="2"] { grid-row: span 2; }
.grid-slot[data-h="3"] { grid-row: span 3; }
.grid-slot[data-h="4"] { grid-row: span 4; }
.grid-slot[data-h="5"] { grid-row: span 5; }
.grid-slot[data-h="6"] { grid-row: span 6; }
.grid-slot[data-h="7"] { grid-row: span 7; }
.grid-slot[data-h="8"] { grid-row: span 8; }
.grid-slot[data-h="9"] { grid-row: span 9; }
.grid-slot[data-h="10"] { grid-row: span 10; }
.grid-slot[data-h="11"] { grid-row: span 11; }
.grid-slot[data-h="12"] { grid-row: span 12; }
.grid-slot[data-h="13"] { grid-row: span 13; }
.grid-slot[data-h="14"] { grid-row: span 14; }
.grid-slot[data-h="15"] { grid-row: span 15; }
.grid-slot[data-h="16"] { grid-row: span 16; }
.grid-slot[data-h="17"] { grid-row: span 17; }
.grid-slot[data-h="18"] { grid-row: span 18; }
.grid-slot[data-h="19"] { grid-row: span 19; }
.grid-slot[data-h="20"] { grid-row: span 20; }

.app-icon .icon img ,
.app-icon .icon {
    pointer-events: none;
}

.grid-slot.drag-over {
    background: rgba(255,255,255,0.1);
    border-radius: 15px;
}

.app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.2s ease;
    padding: 5px;
    cursor: pointer;
    width: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.app-icon .lock-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;

    position: absolute;
    top: -4px;
    left: -8px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 3px;
}

.app-icon .lock-badge svg {
    width: 12px;
    height: 12px;
    color: white;
}

.app-icon .pin-badge {
    position: absolute;
    top: -4px;
    left: -8px;
    width: 20px;
    height: 20px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.app-icon .pin-badge svg {
    width: 12px;
    height: 12px;
    color: white;
}

.app-icon > .notif-badge {
    position: absolute;
    top: -4px;
    right: 4px;
    min-width: 23px;
    width: auto;
    height: 22px;
    padding: 0 7px;
    background: #FF3B30;
    border-radius: 15px;
    border: 1px solid #9d0000;
    z-index: 10;
    pointer-events: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.dock-slot .app-icon > .notif-badge {
    right: -10px;
}

body.light_mode .app-icon > .notif-badge {
    border-color: #fff;
}

.app-icon.dragging {
    opacity: 0;
}

.app-icon.wiggle {
    animation: wiggle 0.3s ease-in-out infinite;
}

@keyframes wiggle {
    0%, 100% { transform: rotate(-2deg); }
    50% { transform: rotate(2deg); }
}

.drag-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.8;
    transform: scale(1.1);
    transition: none !important;
}

body:not(.light_mode) .icon {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    background: #333;
}

/* Dock icons should always match dark mode icon styles - regardless of theme */
.dock .icon,
.dock-slot .icon,
.dock .app-icon .icon,
.dock .app_component .icon {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    background: #333 !important;
}

/* Ensure light mode doesn't override dock icon styles */
body.light_mode .dock .icon,
body.light_mode .dock-slot .icon,
body.light_mode .dock .app-icon .icon,
body.light_mode .dock .app_component .icon {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    background: #333 !important;
}

.icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    /* margin-bottom: 5px; */
    position: relative;
    overflow: hidden;
    /* change transition ot accept for box-shadow */
    transition: transform .1s cubic-bezier(0.64, 0, 0.78, 0), box-shadow 0.4s ease-in-out;
}

.grid-slot .icon{
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); */
    /* transition: box-shadow 0.4s ease-in-out; */
    box-shadow: none !important;
    transition: none !important;
}
.grid-slot .icon:has(.fusion-cube-container) {
    overflow: visible;
    border-radius: 0;
    height: 50px;
    width: 50px;
    margin-bottom: 16px;
    background: none;
}

.grid-slot .icon .icon-inner:has(.fusion-cube-container) {
    overflow: unset;
}

.grid-slot .icon .icon-inner:has(.fusion-cube-container)::after {
    content: none;
    display: none;
}

.grid-slot.hovered-item .icon{
    box-shadow: 0 0px 4px 5px rgb(191 191 191 / 80%);
}
.grid-slot.hovered-item .icon img {
    opacity: 0.7;
}

.grid-slot.reorder-target .app-icon{
    opacity: 1;
}
/*
.grid-slot.open-split-options .app-icon{
    background-color: green;
} */

.icon img {
    border-radius: 16px;
}

.icon img,
.app-close-icon-clone img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* .app-close-icon-clone img {
    border-radius: 0px !important;
} */


/* Default dock app styles */
.icon-phone { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.icon-messages { background: linear-gradient(135deg, #3498db, #2980b9); }
.icon-photos { background: linear-gradient(135deg, #f39c12, #f1c40f); }
.icon-camera { background: linear-gradient(135deg, #95a5a6, #7f8c8d); }
.icon-weather { background: linear-gradient(135deg, #3498db, #5dade2); }
.icon-clock { background: linear-gradient(135deg, #34495e, #2c3e50); }
.icon-maps { background: linear-gradient(135deg, #2ecc71, #27ae60); }
.icon-music { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.icon-mail { background: linear-gradient(135deg, #3498db, #2980b9); }
.icon-notes { background: linear-gradient(135deg, #f39c12, #d68910); }
.icon-calculator { background: linear-gradient(135deg, #34495e, #2c3e50); }
.icon-settings { background: linear-gradient(135deg, #95a5a6, #7f8c8d); }
.icon-safari { background: linear-gradient(135deg, #3498db, #2980b9); }
.icon-earn { background: linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%); }
.icon-create { background: transparent;border: 3px dashed #7d7d7d; }

/* System apps: glass icon background (incl. dock, search results, close-animation clone) */
.app-icon.system_app .icon,
.search-result-item.system_app .icon {
    background: #ffffff3d;
    border: 1px solid #ffffff33;
}

.app-icon .app-name ,
.dragging-clone .dragging-title {
    font-size: 11.2px;
    letter-spacing: -0.5px;
    color: white;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    max-width: 66px;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    white-space: nowrap;
    transition: transform 0.1s ease-in-out, opacity 0.17s ease-in-out;
    opacity: 1;
    margin-top: 7px;
    font-weight: 500;
}

.app-icon .app-name.folder-name {
    margin-top: 7px;
}

.app-icon .app-progress {
    margin: auto;
    margin-top: 2px;
    width: 50%;
    flex-direction: column;
    gap: 2px;
}

.app-icon .app-progress-bar {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    overflow: hidden;
}

.app-icon .app-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 100%);
    transition: width 0.3s ease;
    border-radius: 9999px;
}

.app-icon .app-progress-message {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    max-width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

/* Fusion cube icon animation */
.fusion-cube-container {
    width: 100%;
    height: 100%;
    perspective: 300px;
    perspective-origin: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    --cube-depth: 30px;
}

.fusion-cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: fusion-cube-rotate 5s linear infinite;
}

@keyframes fusion-cube-rotate {
    from {
        transform: rotateX(-15deg) rotateY(0deg);
    }
    to {
        transform: rotateX(-15deg) rotateY(360deg);
    }
}

.fusion-cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    /* backface-visibility: hidden; */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    transition: transform 0.3s ease-out;
}

.fusion-cube-face img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

.fusion-cube-front {
    transform: rotateY(0deg) translateZ(var(--cube-depth));
}

.fusion-cube-back {
    transform: rotateY(180deg) translateZ(var(--cube-depth));
}

.fusion-cube-right {
    transform: rotateY(90deg) translateZ(var(--cube-depth));
}

.fusion-cube-left {
    transform: rotateY(-90deg) translateZ(var(--cube-depth));
}

/* Ensure faces are visible during rotation */
.fusion-cube-face {
    transform-style: preserve-3d;
}


.fusion-cube-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    font-weight: 500;
    background: rgba(99, 102, 241, 0.8);
    border-radius: inherit;
}

@media (orientation: landscape) {
    .dock {
        bottom: auto !important;
        left: var(--safe-left) !important;
        top: calc(50% + var(--safe-top) + 27px) !important;
        transform: translateY(-50%) !important;
        flex-direction: column !important;
        min-width: 80px !important;
        min-height: 320px !important;
        width: auto !important;
        padding: 7px !important;
        gap: 10px !important;
    }

    .dock .dock-layer-inner-normal {
        flex-direction: column;
    }
}

.dock .app-icon { margin: 0; }

.dock-slot {
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    transition: background 0.2s;
}

.dock-slot.drag-over {
    background: rgba(255,255,255,0.2);
}

.page-indicators {
    position: fixed;
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 99;
}

@media (orientation: landscape) {
    .page-indicators {
        bottom: 20px !important;
    }
}

.page-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: background 0.2s;
}

.page-indicator.active { background: white; }

.page-indicator.is-favorite {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    width: 12px;
    height: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: -2px;
}

.page-indicator.is-favorite.active {
    background: transparent;
    color: white;
}

.page-indicator.is-favorite svg {
    width: 12px;
    height: 12px;
    display: block;
    pointer-events: none;
}


.delete-badge, button.delete-badge {
    position: absolute;
    top: -3px;
    right: 5px;
    left: auto;
    width: 19px;
    height: 19px;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.9);
    background: #ffffff3d;
    border: 1px solid #ffffff33;
    backdrop-filter: blur(3px);
}

.delete-badge svg {
    width: 14px;
    height: 14px;
    pointer-events: none;
}

.version-badge {
    position: absolute;
    bottom: 20px;
    right: -2px;
    padding: 1px 4px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    background: rgba(99, 102, 241, 0.9);
    border-radius: 4px;
    pointer-events: none;
    z-index: 2;
    border: 1px solid rgba(0, 0, 0, 0.2);
    letter-spacing: 0.2px;
}

.page-transition-zone {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 50px;
    pointer-events: none;
    z-index: 999;
}

.page-transition-zone.left {
    left: 0;
    background: linear-gradient(to right, rgba(255,255,255,0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.page-transition-zone.right {
    right: 0;
    background: linear-gradient(to left, rgba(255,255,255,0.2), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}

.page-transition-zone.active {
    opacity: 1;
}

.page-transition-zone.active::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: white;
    animation: pulse 0.5s ease-in-out infinite;
}

.page-transition-zone.left.active::after {
    content: '◀';
    left: 15px;
}

.page-transition-zone.right.active::after {
    content: '▶';
    right: 15px;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.app-icon.drag-over {
    transform: scale(1.1);
}

.icon.folder-icon {
    background: rgb(0 0 0 / 76%);
    /* backdrop-filter: blur(10px); */
    border-radius: 16px;
    transition: transform 0.2s ease;
    position: relative; /* Make this the positioning context for .folder-mini-container */
}

/* Allow resize handles to extend beyond folder bounds in reorder mode */
body.reordering .icon.folder-icon {
    overflow: visible;
}

/* Hide the sheen overlay in reorder mode to prevent it from showing outside */
body.reordering .icon.folder-icon .icon-inner::after {
    display: none;
}

.folder-icon>svg{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background: #000;
    border-radius: 21px;
    padding: 6px;
    z-index: 99;
    width: 32px;
    height: 32px;
}

.folder-svg-sibling {
    /* Wrap folder SVG so we can fade it in/out on scroll. */
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 180ms ease;
    pointer-events: none; /* don't interfere with scroll/click */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Ensure the badge is above the mini grid (matches old `z-index: 99` on the SVG) */
    z-index: 99;
}

.folder-svg-sibling.is-hidden {
    opacity: 0;
}

/* Badge wrapper provides the black background so it fades together with the SVG. */
.folder-svg-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 21px;
    /* Match the old look: black rounded badge behind the SVG. */
    padding: 6px;
    /* Keep the black pill visible above preview icons */
    z-index: 99;
}

body.light_mode .folder-svg-badge {
    background: #000;
}

/* Hide badge when empty (no icon for custom folders) */
.folder-svg-badge:empty {
    display: none;
}

.folder-svg-badge svg {
    display: block;
    /* Default size (1x1). Multi-slot folder rules can override height (42/52/62). */
    width: 32px;
    height: 32px;
}

.context-menu-icon-clone .app-icon[data-folder-w="3"] .folder-icon .folder-svg-sibling svg { 
    height: 46px;
}

.context-menu-icon-clone .app-icon[data-folder-h="4"] .folder-icon .folder-svg-sibling svg { 
    height: 56px !important;
}

.context-menu-icon-clone .app-icon[data-folder-h="1"] .folder-icon .folder-svg-sibling svg { 
    height: 32px !important;
}


/* System folders: allow the icon to render outside its bounds if needed */
/* .app-icon.system_folder .folder-icon>svg{
    overflow: visible;
    border-radius: 0;
    background-color: transparent;
} */
    

/* Folder mini icon container */
.folder-mini-container {
    --folder-mini-gap: 9px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--folder-mini-gap);
    box-sizing: border-box;
    border-radius: 15px;
    padding: var(--folder-mini-gap);
    box-sizing: border-box;
    border: 1px solid #ffffff38;
    overflow: hidden;
}

.folder-mini-container--virtualized {
    /* Allow scrolling within the closed-folder thumbnail (no scrollbar chrome). */
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    /* Allow scroll chaining to the homescreen (parent) scroller at boundaries. */
    overscroll-behavior-x: auto;
    overscroll-behavior-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y;
    /* Override base padding - virtualized folders use JS-calculated padding */
    padding: 0 !important;
}

.folder-mini-container--virtualized::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Fallback glyph when folder has no enriched contents (e.g. dock/header slots) */
.folder-fallback-glyph {
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
}

/* Homescreen empty-folder fallback glyph */
.folder-mini-container .folder-fallback-glyph .folder-thumb-icon {
    width: 44px;
    height: 44px;
    gap: 0;
    padding: 4px;
    border-radius: 10px;
    background: #333;
}
.folder-mini-container .folder-fallback-glyph .folder-thumb-icon .mini-folder {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.folder-mini-container .folder-fallback-glyph span {
    position: relative;
    font-size: 27px;
    font-weight: 600;
    opacity: 0.85;
    line-height: 1;
}

/* 1x1 folder: specific gap and padding (never virtualized) */
.grid-slot:not([data-w]):not([data-h]) .folder-mini-container {
    gap: 8px;
    padding: 8px;
}

.grid-slot:not([data-w]):not([data-h]) .folder-mini-cell {
    gap: 6px;
}

/* IMPORTANT: `.app-icon .icon` is `pointer-events: none` by default (so taps hit the parent tile).
   For a scrollable closed-folder preview, we must re-enable pointer events for folder icons. */
.app-icon .icon.folder-icon,
.app-icon .icon.folder-icon img {
    pointer-events: auto;
}

/* Allow tapping mini-icons (they may also have `.icon` class). */
.app-icon .folder-mini-icon,
.app-icon .folder-mini-icon.icon,
.app-icon .folder-mini-icon img {
    pointer-events: auto;
}

/* Prevent browser-native dragging inside folder thumbnails (images/links). */
.app-icon .folder-mini-icon img,
.app-icon .folder-mini-icon svg {
    -webkit-user-drag: none;
}

.folder-mini-container svg {
    /* Folder's own icon should NOT occupy a grid cell.
       Keep the 2x2 grid strictly for the 4 mini app icons. */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0.5;
    pointer-events: none;
    width: 18px !important;
    height: 18px !important;
}

/* Pulse highlight for dropped app */
@keyframes dropPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.app-icon.drop-pulse {
    animation: dropPulse 300ms ease-in-out;
}

/* Folder mini icons */
.folder-mini-icon {
    background: #333;
    border-radius: var(--folder-mini-icon-border-radius);
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    /* border: 1px solid #ffffff33; */
}

/* System app icons in folder thumbnails: match folder modal styling */
.folder-mini-cell.system_app .folder-mini-icon {
    background: #ffffff3d;
}

/* Nested folder inside a folder preview: mini folder appearance */
/* .folder-mini-icon.folder-mini-nested {
    background: rgb(0 0 0 / 76%);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.folder-mini-nested-hero {
    width: 60%;
    height: 60%;
    object-fit: cover;
    border-radius: 4px;
} */

/* Nested folder thumbnail inside a folder preview */
.folder-mini-icon.folder-mini-nested .folder-thumb-icon {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.folder-mini-nested {
    border: 1px solid #ffffff38;
}

/* Larger padding/gap only for folders wider or taller than 1 cell */
.grid-slot[data-w]:not([data-w="1"]) .folder-mini-icon.folder-mini-nested .folder-thumb-icon,
.grid-slot[data-h]:not([data-h="1"]) .folder-mini-icon.folder-mini-nested .folder-thumb-icon {
    padding: 5px;
    gap: 5px;
}
.folder-mini-icon.folder-mini-nested .folder-thumb-icon .mini-folder {
    border-radius: 20%;
    
}

.folder-mini-icon svg {
    width: 100%;
    height: 100%;
    opacity: 1;
    padding: 3px;
}

.folder-mini-icon.folder-mini-system-icon svg {
    width: 100%;
    opacity: 1;
    padding: 3px;
}

.grid-slot:not([data-w]):not([data-h]) .folder-mini-icon.folder-mini-system-icon svg,
.grid-slot[data-w="1"] .folder-mini-icon.folder-mini-system-icon svg,
.grid-slot[data-h="1"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon:not([data-folder-w]):not([data-folder-h]) .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon[data-folder-w="1"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon[data-folder-h="1"] .folder-mini-icon.folder-mini-system-icon svg {
    height: 20px;
}

.grid-slot[data-w="2"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon[data-folder-w="2"] .folder-mini-icon.folder-mini-system-icon svg {
    width: auto !important;
    height: 24px !important;
}

.grid-slot[data-w="3"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon[data-folder-w="3"] .folder-mini-icon.folder-mini-system-icon svg {
    width: auto !important;
    height: 28px !important;
}

.grid-slot[data-w="4"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon[data-folder-w="4"] .folder-mini-icon.folder-mini-system-icon svg {
    width: auto !important;
    height: 24px !important;
}

.grid-slot:not([data-w])[data-h="2"] .folder-mini-icon.folder-mini-system-icon svg,
.grid-slot[data-w="1"][data-h="2"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon:not([data-folder-w])[data-folder-h="2"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon[data-folder-w="1"][data-folder-h="2"] .folder-mini-icon.folder-mini-system-icon svg {
    height: 24px;
}

.grid-slot:not([data-w])[data-h="3"] .folder-mini-icon.folder-mini-system-icon svg,
.grid-slot[data-w="1"][data-h="3"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon:not([data-folder-w])[data-folder-h="3"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon[data-folder-w="1"][data-folder-h="3"] .folder-mini-icon.folder-mini-system-icon svg {
    height: 28px;
}

.grid-slot:not([data-w])[data-h="4"] .folder-mini-icon.folder-mini-system-icon svg,
.grid-slot[data-w="1"][data-h="4"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon:not([data-folder-w])[data-folder-h="4"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon[data-folder-w="1"][data-folder-h="4"] .folder-mini-icon.folder-mini-system-icon svg {
    height: 32px;
}

.grid-slot[data-w="2"][data-h="2"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="2"] .folder-mini-icon.folder-mini-system-icon svg {
    width: auto !important;
    height: 24px !important;
}

.grid-slot[data-w="3"][data-h="3"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="3"] .folder-mini-icon.folder-mini-system-icon svg {
    width: auto !important;
    height: 28px !important;
}

.grid-slot[data-w="4"][data-h="4"] .folder-mini-icon.folder-mini-system-icon svg,
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="4"] .folder-mini-icon.folder-mini-system-icon svg {
    width: auto !important;
    height: 32px !important;
}

/* In multi-slot folders, each grid cell becomes "icon + label" */
.folder-mini-cell {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    cursor: pointer;
}

/* Disable clicks on mini icons in 1x1 folders (too small for accurate clicks) */
.grid-slot[data-w="1"][data-h="1"] .folder-mini-cell,
.grid-slot:not([data-w]):not([data-h]) .folder-mini-cell {
    pointer-events: none;
    cursor: default;
}

.folder-mini-app-name {
    width: 100%;
    max-width: 59px !important;
    /* padding: 0 2px; */
    box-sizing: border-box;
    margin: 0;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    transition: opacity 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Hide mini app names in 1-row folders by default, show on scroll */
/* .grid-slot[data-h="1"] .folder-mini-app-name,
.grid-slot:not([data-h])[data-w] .folder-mini-app-name {
    opacity: 0;
} */

.grid-slot[data-h="1"] .folder-mini-container.is-scrolled .folder-mini-app-name,
.grid-slot:not([data-h])[data-w] .folder-mini-container.is-scrolled .folder-mini-app-name {
    opacity: 1;
}

.folder-mini-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--folder-mini-icon-border-radius);
}

.folder-mini-icon.placeholder {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    font-size: 10px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Large folder sizes - multi-column folder preview grids 
   NOTE: Layout is determined by WIDTH only (data-w). Height (data-h) just controls number of rows.
   This allows arbitrary dimensions like 2x4, 4x2, 3x1, etc. while maintaining proper icon sizing. */

/* 1-column folders (1xN, N>1): single-column layout */
.grid-slot:not([data-w])[data-h]:not([data-h="1"]) .folder-mini-container,
.grid-slot[data-w="1"][data-h]:not([data-h="1"]) .folder-mini-container {
    --folder-mini-cell-w: 41px;
    --folder-mini-cell-h: 60px; /* icon (41) + label + inner gap */
    grid-template-columns: 1fr; /* Single column */
    grid-template-rows: auto;
    grid-auto-rows: var(--folder-mini-cell-h);
    align-content: start;
    place-items: start center;
}

.grid-slot:not([data-w])[data-h]:not([data-h="1"]) .folder-mini-icon,
.grid-slot[data-w="1"][data-h]:not([data-h="1"]) .folder-mini-icon {
    border-radius: 10px;
    width: 41px;
    height: 41px;
}

/* 2-column folders (2xN): 2-column preview grid with larger icons */
.grid-slot[data-w="2"] .folder-mini-container {
    --folder-mini-cell-w: 35px;
    --folder-mini-cell-h: 56px; /* icon (37) + label + inner gap */
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto; /* Override flexible rows from base */
    grid-auto-rows: var(--folder-mini-cell-h);
    align-content: start; /* Align content to top */
    /* gap and padding set by width/height-specific rules below */
    place-items: start center;
    /* border-radius set by min-dimension rules below */
}

.grid-slot[data-w="2"] .folder-mini-icon {
    border-radius: 9px;
    width: 37px;
    height: 37px;
    min-height: 37px;
}

/* 3-column folders (3xN): 3-column preview grid */
.grid-slot[data-w="3"] .folder-mini-container {
    --folder-mini-cell-w: 41px;
    --folder-mini-cell-h: 60px; /* icon (41) + label + inner gap */
    grid-template-columns: repeat(3, var(--folder-mini-cell-w));
    grid-template-rows: auto; /* Override flexible rows from base */
    grid-auto-rows: var(--folder-mini-cell-h);
    align-content: start; /* Align content to top */
    justify-content: space-evenly; /* Keep horizontal centering */
    /* gap and padding set by width/height-specific rules below */
    place-items: start center;
    /* border-radius set by min-dimension rules below */
}

.grid-slot[data-w="3"] .folder-mini-icon {
    /* Logic: mini-icon border radius = mini-icon size * 0.24 */
    border-radius: 10px;
    width: 41px;
    height: 41px;
    min-height: 41px;
}

/* 4-column folders (4xN): 4-column preview grid */
.grid-slot[data-w="4"] .folder-mini-container {
    --folder-mini-cell-w: 46px;
    --folder-mini-cell-h: 64px; /* icon (46) + label + inner gap */
    grid-template-columns: repeat(4, var(--folder-mini-cell-w));
    grid-template-rows: auto; /* Override flexible rows from base */
    grid-auto-rows: var(--folder-mini-cell-h);
    align-content: start; /* Align content to top */
    justify-content: space-evenly; /* Keep horizontal centering */
    /* gap and padding set by width/height-specific rules below */
    place-items: start center;
    /* border-radius set by min-dimension rules below */
}

.grid-slot[data-w="4"] .folder-mini-icon {
    /* Logic: mini-icon border radius = mini-icon size * 0.24 */
    border-radius: 12px;
    width: 46px;
    height: 46px;
    min-height: 46px;
} 

.grid-slot[data-w="4"] .folder-mini-cell{
    gap: 6px;
}

/* Scale label down a bit for dense grids */
.grid-slot[data-w="3"] .folder-mini-app-name,
.grid-slot[data-w="4"] .folder-mini-app-name {
    font-size: 9px;
}

.grid-slot[data-w="4"] .folder-mini-app-name {
    line-height: 1;
}

/* Scale folder icon container for multi-column folders */
.grid-slot[data-w="2"] .icon.folder-icon,
.grid-slot[data-w="3"] .icon.folder-icon,
.grid-slot[data-w="4"] .icon.folder-icon {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
}

/* Multi-slot folder app-icon container scaling */
.grid-slot[data-w="2"] .app-icon,
.grid-slot[data-w="3"] .app-icon,
.grid-slot[data-w="4"] .app-icon {
    width: 100%;
    height: 100%;
    padding: 8px;
}

/* Hide app name for multi-slot folders (takes up too much space) */
.grid-slot[data-w="2"] .app-name,
.grid-slot[data-w="3"] .app-name,
.grid-slot[data-w="4"] .app-name {
    display: block;
}

/* Multi-slot folders: keep label below (1 line) */
.grid-slot[data-w][data-h] .app-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.grid-slot[data-w][data-h] .app-name {
    width: 100%;
    max-width: 100%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 0;
}

/* Allow targeting folder labels independently (override multi-slot default) */
.grid-slot[data-w][data-h] .app-name.folder-name {
    margin-top: 7px;
}

/* 2-column folders (2xN) sizing spec:
   width = icon(62px) * 2 + gap(15px)  => 139px
   height scales automatically based on data-h value */
.grid-slot[data-w="2"] {
    align-items: flex-start;
}

.grid-slot[data-w="2"] .app-icon {
    height: 100%;
    padding: 0;
    /* border-radius set by min-dimension rules below */
}

.grid-slot[data-w="2"] .app-icon .icon svg {
    height: 36px;
}

.grid-slot[data-w="3"] .app-icon .icon svg {
    height: 46px;
}

.grid-slot[data-w="4"] .app-icon .icon svg {
    height: 56px;
}

.app-icon[data-folder-h="1"] .folder-icon .folder-svg-sibling svg {
    height: 32px;
}

.grid-slot[data-w="2"] .icon.folder-icon {
    /*
      Logic sizing (derived from actual slot size):
      - In portrait: `.app-grid` max-width is 400px and it is 4 columns => each 1x1 slot is 100px wide.
        A 2-column slot spans 2 columns => 200px wide.
      - Each row is 85px => height scales based on data-h (e.g., 2x3 = 3 rows = 255px tall).
      Your measured “perfect” size at this layout is 174×153, which equals:
        width  = 200px - 26px  => inset 13px each side
        height = 170px - 17px  => reserve space for label/spacing

      Using calc() keeps it correct regardless of grid width or folder height.
    */
    width: calc(100% - 26px);
    /* Distribute the reserved vertical space so the icon isn't flush to the top. */
    margin-top: 0px;
    /* height: calc(100% - 17px - 8px); */
    height: calc(100% - 17px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* 3x3: match the same “slot minus insets” logic as 2x2, so it scales with screen size */
.grid-slot[data-w="3"] {
    align-items: flex-start;
}

.grid-slot[data-w="3"] .app-icon {
    height: 100%;
    padding: 0;
}

.grid-slot[data-w="3"] .icon.folder-icon {
    width: calc(100% - 26px);
    height: calc(100% - 17px);
    margin-left: auto;
    margin-right: auto;
    /* border-radius set by min-dimension rules below */
}

/* 4x4: match the same “slot minus insets” logic as 2x2, so it scales with screen size */
.grid-slot[data-w="4"] {
    align-items: flex-start;
}

.grid-slot[data-w="4"] .app-icon {
    height: 100%;
    padding: 0;
}

.grid-slot[data-w="4"] .icon.folder-icon {
    width: calc(100% - 26px);
    height: calc(100% - 17px);
    margin-left: auto;
    margin-right: auto;
    /* border-radius set by min-dimension rules below */
}

/* 1-column multi-row folders (1x2, 1x3, 1x4, etc.) - scale height */
/* Matches folders without data-w OR with data-w="1", and data-h > 1 */
.grid-slot:not([data-w])[data-h]:not([data-h="1"]),
.grid-slot[data-w="1"][data-h]:not([data-h="1"]) {
    align-items: stretch;
}

.grid-slot:not([data-w])[data-h]:not([data-h="1"]) .app-icon,
.grid-slot[data-w="1"][data-h]:not([data-h="1"]) .app-icon {
    height: 100% !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.grid-slot:not([data-w])[data-h]:not([data-h="1"]) .app-icon .icon.folder-icon,
.grid-slot[data-w="1"][data-h]:not([data-h="1"]) .app-icon .icon.folder-icon {
    width: calc(100% - 26px) !important;
    height: calc(100% - 17px) !important;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}


.grid-slot:not([data-w])[data-h]:not([data-h="1"]) .app-icon .folder-mini-icon {
    width: 41px;
    height: 41px;
}

/* ========== Adaptive Border Radius Based on Minimum Dimension ==========
   Border radius adapts to the smallest dimension (min of width/height) to prevent
   overly-rounded corners on very wide or very tall folders.
   - min=1: 15px (1xN or Nx1 folders)
   - min=2: 23px (2x2, 2x3, 2x4, 3x2, 4x2, etc.)
   - min=3: 25px (3x3, 3x4, 4x3)
   - min=4: 27px (4x4)
*/

/* Default for 1xN and Nx1 folders (min dimension = 1) */
.grid-slot:not([data-w]):not([data-h]) .icon.folder-icon,
.grid-slot[data-w="1"] .icon.folder-icon,
.grid-slot[data-h="1"] .icon.folder-icon {
    border-radius: 16px;
}

.grid-slot:not([data-w]):not([data-h]) .folder-mini-container,
.grid-slot[data-w="1"] .folder-mini-container,
.grid-slot[data-h="1"] .folder-mini-container {
    border-radius: 15px;
}

.grid-slot:not([data-w]):not([data-h]) .app-icon,
.grid-slot[data-w="1"] .app-icon,
.grid-slot[data-h="1"] .app-icon {
    border-radius: 15px;
}

/* min dimension = 2: applies when both w>=2 AND h>=2 */
.grid-slot[data-w="2"][data-h="2"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="3"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="4"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="5"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="6"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="7"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="8"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="9"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="10"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="11"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="12"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="13"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="14"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="15"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="16"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="17"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="18"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="19"] .icon.folder-icon,
.grid-slot[data-w="2"][data-h="20"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="2"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="2"] .icon.folder-icon {
    border-radius: var(--folder-border-radius-2x2);
}

.grid-slot[data-w="2"][data-h="2"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="3"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="4"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="5"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="6"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="7"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="8"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="9"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="10"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="11"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="12"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="13"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="14"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="15"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="16"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="17"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="18"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="19"] .folder-mini-container,
.grid-slot[data-w="2"][data-h="20"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="2"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="2"] .folder-mini-container {
    border-radius: var(--folder-border-radius-2x2);
}

.grid-slot[data-w="2"][data-h="2"] .app-icon,
.grid-slot[data-w="2"][data-h="3"] .app-icon,
.grid-slot[data-w="2"][data-h="4"] .app-icon,
.grid-slot[data-w="2"][data-h="5"] .app-icon,
.grid-slot[data-w="2"][data-h="6"] .app-icon,
.grid-slot[data-w="2"][data-h="7"] .app-icon,
.grid-slot[data-w="2"][data-h="8"] .app-icon,
.grid-slot[data-w="2"][data-h="9"] .app-icon,
.grid-slot[data-w="2"][data-h="10"] .app-icon,
.grid-slot[data-w="2"][data-h="11"] .app-icon,
.grid-slot[data-w="2"][data-h="12"] .app-icon,
.grid-slot[data-w="2"][data-h="13"] .app-icon,
.grid-slot[data-w="2"][data-h="14"] .app-icon,
.grid-slot[data-w="2"][data-h="15"] .app-icon,
.grid-slot[data-w="2"][data-h="16"] .app-icon,
.grid-slot[data-w="2"][data-h="17"] .app-icon,
.grid-slot[data-w="2"][data-h="18"] .app-icon,
.grid-slot[data-w="2"][data-h="19"] .app-icon,
.grid-slot[data-w="2"][data-h="20"] .app-icon,
.grid-slot[data-w="3"][data-h="2"] .app-icon,
.grid-slot[data-w="4"][data-h="2"] .app-icon {
    border-radius: var(--folder-border-radius-2x2);
}

/* min dimension = 3: applies when both w>=3 AND h>=3 */
.grid-slot[data-w="3"][data-h="3"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="4"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="5"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="6"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="7"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="8"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="9"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="10"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="11"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="12"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="13"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="14"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="15"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="16"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="17"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="18"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="19"] .icon.folder-icon,
.grid-slot[data-w="3"][data-h="20"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="3"] .icon.folder-icon {
    border-radius: var(--folder-border-radius-3x3);
}

.grid-slot[data-w="3"][data-h="3"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="4"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="5"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="6"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="7"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="8"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="9"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="10"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="11"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="12"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="13"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="14"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="15"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="16"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="17"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="18"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="19"] .folder-mini-container,
.grid-slot[data-w="3"][data-h="20"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="3"] .folder-mini-container {
    border-radius: var(--folder-border-radius-3x3);
}

.grid-slot[data-w="3"][data-h="3"] .app-icon,
.grid-slot[data-w="3"][data-h="4"] .app-icon,
.grid-slot[data-w="3"][data-h="5"] .app-icon,
.grid-slot[data-w="3"][data-h="6"] .app-icon,
.grid-slot[data-w="3"][data-h="7"] .app-icon,
.grid-slot[data-w="3"][data-h="8"] .app-icon,
.grid-slot[data-w="3"][data-h="9"] .app-icon,
.grid-slot[data-w="3"][data-h="10"] .app-icon,
.grid-slot[data-w="3"][data-h="11"] .app-icon,
.grid-slot[data-w="3"][data-h="12"] .app-icon,
.grid-slot[data-w="3"][data-h="13"] .app-icon,
.grid-slot[data-w="3"][data-h="14"] .app-icon,
.grid-slot[data-w="3"][data-h="15"] .app-icon,
.grid-slot[data-w="3"][data-h="16"] .app-icon,
.grid-slot[data-w="3"][data-h="17"] .app-icon,
.grid-slot[data-w="3"][data-h="18"] .app-icon,
.grid-slot[data-w="3"][data-h="19"] .app-icon,
.grid-slot[data-w="3"][data-h="20"] .app-icon,
.grid-slot[data-w="4"][data-h="3"] .app-icon {
    border-radius: var(--folder-border-radius-3x3);
}

/* min dimension = 4: applies to all combos where min(w,h) = 4 */
.grid-slot[data-w="4"][data-h="4"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="5"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="6"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="7"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="8"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="9"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="10"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="11"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="12"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="13"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="14"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="15"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="16"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="17"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="18"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="19"] .icon.folder-icon,
.grid-slot[data-w="4"][data-h="20"] .icon.folder-icon {
    border-radius: var(--folder-border-radius-4x4);
}

.grid-slot[data-w="4"][data-h="4"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="5"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="6"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="7"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="8"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="9"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="10"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="11"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="12"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="13"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="14"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="15"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="16"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="17"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="18"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="19"] .folder-mini-container,
.grid-slot[data-w="4"][data-h="20"] .folder-mini-container {
    border-radius: var(--folder-border-radius-4x4);
}

.grid-slot[data-w="4"][data-h="4"] .app-icon,
.grid-slot[data-w="4"][data-h="5"] .app-icon,
.grid-slot[data-w="4"][data-h="6"] .app-icon,
.grid-slot[data-w="4"][data-h="7"] .app-icon,
.grid-slot[data-w="4"][data-h="8"] .app-icon,
.grid-slot[data-w="4"][data-h="9"] .app-icon,
.grid-slot[data-w="4"][data-h="10"] .app-icon,
.grid-slot[data-w="4"][data-h="11"] .app-icon,
.grid-slot[data-w="4"][data-h="12"] .app-icon,
.grid-slot[data-w="4"][data-h="13"] .app-icon,
.grid-slot[data-w="4"][data-h="14"] .app-icon,
.grid-slot[data-w="4"][data-h="15"] .app-icon,
.grid-slot[data-w="4"][data-h="16"] .app-icon,
.grid-slot[data-w="4"][data-h="17"] .app-icon,
.grid-slot[data-w="4"][data-h="18"] .app-icon,
.grid-slot[data-w="4"][data-h="19"] .app-icon,
.grid-slot[data-w="4"][data-h="20"] .app-icon {
    border-radius: var(--folder-border-radius-4x4);
}

/* ========== Icon Overlay (::after sheen) Scaling ==========
   Scale the glossy overlay based on folder width to match icon size.
   Base overlay is designed for 1x1 (62px icon), so scale proportionally.
*/

/* 1-column folders: default scale (62px icon) */
.grid-slot:not([data-w]) .app-icon .icon .icon-inner::after,
.grid-slot[data-w="1"] .app-icon .icon .icon-inner::after {
    scale: 1;
}

/* 2-column folders: ~2.5x larger icon */
.grid-slot[data-w="2"] .app-icon .icon .icon-inner::after {
    scale: 2.5;
    left: -62px;
}

/* 3-column folders: ~3.5x larger icon */
.grid-slot[data-w="3"] .app-icon .icon .icon-inner::after {
    scale: 3.5;
    left: -90px
}

/* 4-column folders: ~5.5x larger icon */
.grid-slot[data-w="4"] .app-icon .icon .icon-inner::after {
    scale: 5.5;
    left: -90px
}

/* ========== Equal Spacing (space-evenly) - Padding = Gap ==========
   All spacing (edges and between items) is equal for visual harmony.
   Formula: spacing = availableSpace / (items + 1)
   
   Actual container dimensions (grid slot minus 26px inset):
   - 1-col: 64px = (1 × 90) - 26
   - 2-col: 154px = (2 × 90) - 26
   - 3-col: 244px = (3 × 90) - 26  
   - 4-col: 334px = (4 × 90) - 26
   
   Cell dimensions for non-virtualized (CSS Grid with 1fr):
   - 1-col: 41px fixed (--folder-mini-cell-w)
   - 2-col: cells auto-size based on available space after gap/padding
   - 3-col: 41px fixed (--folder-mini-cell-w)
   - 4-col: 46px fixed (--folder-mini-cell-w)
*/

/* 1-column folders (41px fixed icon): horizontal centering */
/* availableSpace = 64px - 41px = 23px, horizontal padding = 23 / 2 = 11.5px */
.grid-slot:not([data-w])[data-h]:not([data-h="1"]) .folder-mini-container,
.grid-slot[data-w="1"][data-h]:not([data-h="1"]) .folder-mini-container {
    padding-left: 5px;
    padding-right: 5px;
}

.grid-slot:not([data-w])[data-h]:not([data-h="1"]) .folder-mini-container .folder-mini-app-name,
.grid-slot[data-w="1"][data-h]:not([data-h="1"]) .folder-mini-container .folder-mini-app-name {
 max-width: 44px !important;
 margin-top: 0;
}

/* 2-column folders: horizontal spacing only (row gap varies by height) */
/* For 1fr columns, we want equal spacing. With container 154px and desired cell ~60px: */
/* contentWidth = 60px * 2 = 120px, availableSpace = 154 - 120 = 34px, spacing = 34 / 3 = 11.33px */
.grid-slot[data-w="2"] .folder-mini-container {
    padding-left: 11px;
    padding-right: 11px;
    column-gap: 11px;
}

/* 3-column folders (41px fixed cells): horizontal spacing only (row gap varies by height) */
/* availableSpace = 244px - (41px * 3) = 121px, spacing = 121 / 4 = 30.25px */
.grid-slot[data-w="3"] .folder-mini-container {
    padding-left: 30px;
    padding-right: 30px;
    column-gap: 30px;
}

/* 4-column folders (46px fixed cells): horizontal spacing only (row gap varies by height) */
/* availableSpace = 334px - (46px * 4) = 150px, spacing = 150 / 5 = 30px */
.grid-slot[data-w="4"] .folder-mini-container {
    padding-left: 30px;
    padding-right: 30px;
    column-gap: 26px;
}

/* Vertical spacing based on HEIGHT (rows) */
/* Actual container heights: (h × 85) + ((h - 1) × 15) - 24 */
/* Cell heights: 2-col=56px, 3-col=60px, 4-col=64px */

/* 1-row folders: vertical centering (icons centered to folder height) */
/* Container height: 62.55px (folder-icon height) */
/* Visual centering: push items down so icons appear centered */
.grid-slot[data-w="2"][data-h="1"] .folder-mini-container {
    padding-top: 10px;
    padding-bottom: 0px;
    row-gap: 0px;
}
.grid-slot[data-w="3"][data-h="1"] .folder-mini-container {
    padding-top: 7px;
    padding-bottom: 0px;
    row-gap: 0px;
}
.grid-slot[data-w="4"][data-h="1"] .folder-mini-container {
    padding-top: 7px;
    padding-bottom: 0px;
    row-gap: 0px;
}

/* 1-row folder mini preview overrides (add properties as needed) */
/* 1 row × 2 cols (2x1) */
.grid-slot[data-w="2"][data-h="1"] .folder-mini-cell,
.grid-slot[data-w="2"]:not([data-h]) .folder-mini-cell {
    gap: 3px;
}

.grid-slot[data-w="2"][data-h="1"] .folder-mini-icon,
.grid-slot[data-w="2"]:not([data-h]) .folder-mini-icon {
    border-radius: 9px;
    width: 34px;
    height: 34px;
    min-height: 34px;
}

.grid-slot[data-w="2"][data-h="1"] .folder-mini-app-name,
.grid-slot[data-w="2"]:not([data-h]) .folder-mini-app-name {
    font-size: 9px;
}

/* 1 row × 3 cols (3x1) */
.grid-slot[data-w="3"][data-h="1"] .folder-mini-cell,
.grid-slot[data-w="3"]:not([data-h]) .folder-mini-cell {
    gap: 3px;
}

.grid-slot[data-w="3"][data-h="1"] .folder-mini-icon,
.grid-slot[data-w="3"]:not([data-h]) .folder-mini-icon {
    border-radius: 9px;
    width: 34px;
    height: 34px;
    min-height: 34px;
}

.grid-slot[data-w="3"][data-h="1"] .folder-mini-app-name,
.grid-slot[data-w="3"]:not([data-h]) .folder-mini-app-name {
    /* add props */
    --_folder-mini-todo: 1;
}

/* 1 row × 4 cols (4x1) */
.grid-slot[data-w="4"][data-h="1"] .folder-mini-cell,
.grid-slot[data-w="4"]:not([data-h]) .folder-mini-cell {
    gap: 3px;
}

.grid-slot[data-w="4"][data-h="1"] .folder-mini-icon,
.grid-slot[data-w="4"]:not([data-h]) .folder-mini-icon {
    border-radius: 9px;
    width: 34px;
    height: 34px;
    min-height: 34px;
}

.grid-slot[data-w="4"][data-h="1"] .folder-mini-app-name,
.grid-slot[data-w="4"]:not([data-h]) .folder-mini-app-name {
    /* add props */
    --_folder-mini-todo: 1;
}

/* 2-row folders: vertical spacing */
/* Container height: (2 × 85) + (1 × 15) - 24 = 161px */
/* 1-col: contentHeight = 120px, available = 161 - 120 = 41px, spacing = 41 / 3 = 13.67px */
.grid-slot:not([data-w])[data-h="2"] .folder-mini-container,
.grid-slot[data-w="1"][data-h="2"] .folder-mini-container {
    padding-top: 14px;
    padding-bottom: 14px;
    row-gap: 14px;
}
/* 2-col: contentHeight = 112px, available = 161 - 112 = 49px, spacing = 49 / 3 = 16.33px */
.grid-slot[data-w="2"][data-h="2"] .folder-mini-container {
    padding-top: 16px;
    padding-bottom: 16px;
    row-gap: 16px;
}
/* 3-col: contentHeight = 120px, available = 161 - 120 = 41px, spacing = 41 / 3 = 13.67px */
.grid-slot[data-w="3"][data-h="2"] .folder-mini-container {
    padding-top: 14px;
    padding-bottom: 14px;
    row-gap: 14px;
}
/* 4-col: contentHeight = 128px, available = 161 - 128 = 33px, spacing = 33 / 3 = 11px */
.grid-slot[data-w="4"][data-h="2"] .folder-mini-container {
    padding-top: 11px;
    padding-bottom: 11px;
    row-gap: 11px;
}

/* 3-row folders: vertical spacing */
/* Container height: (3 × 85) + (2 × 15) - 24 = 261px */
/* 1-col: contentHeight = 180px, available = 261 - 180 = 81px, spacing = 81 / 4 = 20.25px */
.grid-slot:not([data-w])[data-h="3"] .folder-mini-container,
.grid-slot[data-w="1"][data-h="3"] .folder-mini-container {
    padding-top: 20px;
    padding-bottom: 20px;
    row-gap: 20px;
}
/* 2-col: contentHeight = 168px, available = 261 - 168 = 93px, spacing = 93 / 4 = 23.25px */
.grid-slot[data-w="2"][data-h="3"] .folder-mini-container {
    padding-top: 23px;
    padding-bottom: 23px;
    row-gap: 23px;
}
/* 3-col: contentHeight = 180px, available = 261 - 180 = 81px, spacing = 81 / 4 = 20.25px */
.grid-slot[data-w="3"][data-h="3"] .folder-mini-container {
    padding-top: 20px;
    padding-bottom: 20px;
    row-gap: 20px;
}
/* 4-col: contentHeight = 192px, available = 261 - 192 = 69px, spacing = 69 / 4 = 17.25px */
.grid-slot[data-w="4"][data-h="3"] .folder-mini-container {
    padding-top: 17px;
    padding-bottom: 17px;
    row-gap: 17px;
}

/* 4-row folders: vertical spacing */
/* Container height: (4 × 85) + (3 × 15) - 24 = 361px */
/* 1-col: contentHeight = 240px, available = 361 - 240 = 121px, spacing = 121 / 5 = 24.2px */
.grid-slot:not([data-w])[data-h="4"] .folder-mini-container,
.grid-slot[data-w="1"][data-h="4"] .folder-mini-container {
    padding-top: 24px;
    padding-bottom: 24px;
    row-gap: 24px;
}
/* 2-col: contentHeight = 224px, available = 361 - 224 = 137px, spacing = 137 / 5 = 27.4px */
.grid-slot[data-w="2"][data-h="4"] .folder-mini-container {
    padding-top: 27px;
    padding-bottom: 27px;
    row-gap: 27px;
}
/* 3-col: contentHeight = 240px, available = 361 - 240 = 121px, spacing = 121 / 5 = 24.2px */
.grid-slot[data-w="3"][data-h="4"] .folder-mini-container {
    padding-top: 24px;
    padding-bottom: 24px;
    row-gap: 24px;
}
/* 4-col: contentHeight = 256px, available = 361 - 256 = 105px, spacing = 105 / 5 = 21px */
.grid-slot[data-w="4"][data-h="4"] .folder-mini-container {
    padding-top: 21px;
    padding-bottom: 21px;
    row-gap: 21px;
}

/* 5-row folders: vertical spacing */
/* Container height: (5 × 85) + (4 × 15) - 24 = 461px */
.grid-slot:not([data-w])[data-h="5"] .folder-mini-container,
.grid-slot[data-w="1"][data-h="5"] .folder-mini-container {
    padding-top: 27px;
    padding-bottom: 27px;
    row-gap: 27px;
}
.grid-slot[data-w="2"][data-h="5"] .folder-mini-container {
    padding-top: 30px;
    padding-bottom: 30px;
    row-gap: 30px;
}
.grid-slot[data-w="3"][data-h="5"] .folder-mini-container {
    padding-top: 27px;
    padding-bottom: 27px;
    row-gap: 27px;
}
.grid-slot[data-w="4"][data-h="5"] .folder-mini-container {
    padding-top: 24px;
    padding-bottom: 24px;
    row-gap: 24px;
}

/* 6-row folders: vertical spacing */
/* Container height: (6 × 85) + (5 × 15) - 24 = 561px */
.grid-slot:not([data-w])[data-h="6"] .folder-mini-container,
.grid-slot[data-w="1"][data-h="6"] .folder-mini-container {
    padding-top: 29px;
    padding-bottom: 29px;
    row-gap: 29px;
}
.grid-slot[data-w="2"][data-h="6"] .folder-mini-container {
    padding-top: 33px;
    padding-bottom: 33px;
    row-gap: 33px;
}
.grid-slot[data-w="3"][data-h="6"] .folder-mini-container {
    padding-top: 29px;
    padding-bottom: 29px;
    row-gap: 29px;
}
.grid-slot[data-w="4"][data-h="6"] .folder-mini-container {
    padding-top: 26px;
    padding-bottom: 26px;
    row-gap: 26px;
}

/* 7-row folders: vertical spacing */
/* Container height: (7 × 85) + (6 × 15) - 24 = 661px */
.grid-slot:not([data-w])[data-h="7"] .folder-mini-container,
.grid-slot[data-w="1"][data-h="7"] .folder-mini-container {
    padding-top: 30px;
    padding-bottom: 30px;
    row-gap: 30px;
}
.grid-slot[data-w="2"][data-h="7"] .folder-mini-container {
    padding-top: 35px;
    padding-bottom: 35px;
    row-gap: 35px;
}
.grid-slot[data-w="3"][data-h="7"] .folder-mini-container {
    padding-top: 30px;
    padding-bottom: 30px;
    row-gap: 30px;
}
.grid-slot[data-w="4"][data-h="7"] .folder-mini-container {
    padding-top: 28px;
    padding-bottom: 28px;
    row-gap: 28px;
}

/* 8-row folders: vertical spacing */
/* Container height: (8 × 85) + (7 × 15) - 24 = 761px */
.grid-slot:not([data-w])[data-h="8"] .folder-mini-container,
.grid-slot[data-w="1"][data-h="8"] .folder-mini-container {
    padding-top: 31px;
    padding-bottom: 31px;
    row-gap: 31px;
}
.grid-slot[data-w="2"][data-h="8"] .folder-mini-container {
    padding-top: 37px;
    padding-bottom: 37px;
    row-gap: 37px;
}
.grid-slot[data-w="3"][data-h="8"] .folder-mini-container {
    padding-top: 31px;
    padding-bottom: 31px;
    row-gap: 31px;
}
.grid-slot[data-w="4"][data-h="8"] .folder-mini-container {
    padding-top: 29px;
    padding-bottom: 29px;
    row-gap: 29px;
}

/* 9-row folders: vertical spacing */
/* Container height: (9 × 85) + (8 × 15) - 24 = 861px */
.grid-slot:not([data-w])[data-h="9"] .folder-mini-container,
.grid-slot[data-w="1"][data-h="9"] .folder-mini-container {
    padding-top: 32px;
    padding-bottom: 32px;
    row-gap: 32px;
}
.grid-slot[data-w="2"][data-h="9"] .folder-mini-container {
    padding-top: 38px;
    padding-bottom: 38px;
    row-gap: 38px;
}
.grid-slot[data-w="3"][data-h="9"] .folder-mini-container {
    padding-top: 32px;
    padding-bottom: 32px;
    row-gap: 32px;
}
.grid-slot[data-w="4"][data-h="9"] .folder-mini-container {
    padding-top: 31px;
    padding-bottom: 31px;
    row-gap: 31px;
}

/* 10-row folders: vertical spacing */
/* Container height: (10 × 85) + (9 × 15) - 24 = 961px */
.grid-slot:not([data-w])[data-h="10"] .folder-mini-container,
.grid-slot[data-w="1"][data-h="10"] .folder-mini-container {
    padding-top: 32px;
    padding-bottom: 32px;
    row-gap: 32px;
}
.grid-slot[data-w="2"][data-h="10"] .folder-mini-container {
    padding-top: 39px;
    padding-bottom: 39px;
    row-gap: 39px;
}
.grid-slot[data-w="3"][data-h="10"] .folder-mini-container {
    padding-top: 32px;
    padding-bottom: 32px;
    row-gap: 32px;
}
.grid-slot[data-w="4"][data-h="10"] .folder-mini-container {
    padding-top: 32px;
    padding-bottom: 32px;
    row-gap: 32px;
}

/* Resize animation class */
.grid-slot.resizing {
    transition: 
        grid-column 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
        grid-row 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ========== Folder Resize Handles ========== */
/* Handles only appear in reorder mode */
/* IMPORTANT: Handles are children of .folder-icon which has overflow:hidden,
   so we keep them fully inside the folder boundaries */
.folder-resize-handle {
    position: absolute;
    width: 32px;
    height: 32px;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: none;
}

/* Position handles closer to border edge */
.folder-resize-handle.top-left {
    top: -4px;
    left: -4px;
    cursor: nwse-resize;
}

.folder-resize-handle.top-right {
    top: -4px;
    right: -4px;
    cursor: nesw-resize;
}

.folder-resize-handle.bottom-left {
    bottom: -4px;
    left: -4px;
    cursor: nesw-resize;
}

.folder-resize-handle.bottom-right {
    bottom: -4px;
    right: -4px;
    cursor: nwse-resize;
}

/* Curved border handle - positioned half-outside, half-inside */
.folder-resize-handle .handle-dot {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    position: relative;
}

/* Curved arc SVG matching folder border-radius */
.folder-resize-handle .handle-dot::after {
    content: '';
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: filter 0.15s ease-out;
}

/* min(w,h)=1 folders (15px radius) - True circular arcs matching CSS border-radius */
/* Includes: 1x1, 1xN (1x2, 1x3, 1x4), Nx1 (2x1, 3x1, 4x1) */
.app-icon[data-folder-w="1"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-h="1"] .folder-resize-handle.top-left .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 4 19 A 15 15 0 0 1 19 4" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

.app-icon[data-folder-w="1"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-h="1"] .folder-resize-handle.top-right .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 17 4 A 15 15 0 0 1 32 19" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

.app-icon[data-folder-w="1"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-h="1"] .folder-resize-handle.bottom-left .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 4 17 A 15 15 0 0 0 19 32" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

.app-icon[data-folder-w="1"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-h="1"] .folder-resize-handle.bottom-right .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 17 32 A 15 15 0 0 0 32 17" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

/* min(w,h)=2 folders (23px radius) - True circular arcs */
.app-icon[data-folder-w="2"][data-folder-h="2"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="3"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="4"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="5"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="6"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="7"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="8"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="9"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="10"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="11"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="12"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="13"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="14"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="15"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="16"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="17"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="18"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="19"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="20"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="2"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="2"] .folder-resize-handle.top-left .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 4 27 A 23 23 0 0 1 27 4" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

.app-icon[data-folder-w="2"][data-folder-h="2"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="3"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="4"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="5"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="6"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="7"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="8"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="9"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="10"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="11"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="12"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="13"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="14"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="15"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="16"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="17"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="18"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="19"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="20"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="2"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="2"] .folder-resize-handle.top-right .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 9 4 A 23 23 0 0 1 32 27" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

.app-icon[data-folder-w="2"][data-folder-h="2"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="3"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="4"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="5"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="6"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="7"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="8"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="9"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="10"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="11"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="12"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="13"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="14"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="15"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="16"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="17"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="18"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="19"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="20"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="2"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="2"] .folder-resize-handle.bottom-left .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 4 9 A 23 23 0 0 0 27 32" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

.app-icon[data-folder-w="2"][data-folder-h="2"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="3"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="4"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="5"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="6"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="7"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="8"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="9"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="10"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="11"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="12"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="13"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="14"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="15"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="16"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="17"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="18"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="19"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="2"][data-folder-h="20"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="2"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="2"] .folder-resize-handle.bottom-right .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 9 32 A 23 23 0 0 0 32 9" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

/* min(w,h)=3 folders (25px radius) - True circular arcs */
.app-icon[data-folder-w="3"][data-folder-h="3"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="4"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="5"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="6"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="7"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="8"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="9"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="10"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="11"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="12"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="13"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="14"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="15"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="16"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="17"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="18"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="19"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="20"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="3"] .folder-resize-handle.top-left .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 4 29 A 25 25 0 0 1 29 4" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

.app-icon[data-folder-w="3"][data-folder-h="3"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="4"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="5"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="6"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="7"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="8"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="9"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="10"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="11"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="12"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="13"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="14"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="15"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="16"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="17"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="18"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="19"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="20"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="3"] .folder-resize-handle.top-right .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 7 4 A 25 25 0 0 1 32 29" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

.app-icon[data-folder-w="3"][data-folder-h="3"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="4"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="5"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="6"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="7"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="8"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="9"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="10"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="11"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="12"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="13"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="14"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="15"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="16"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="17"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="18"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="19"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="20"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="3"] .folder-resize-handle.bottom-left .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 4 7 A 25 25 0 0 0 29 32" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

.app-icon[data-folder-w="3"][data-folder-h="3"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="4"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="5"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="6"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="7"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="8"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="9"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="10"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="11"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="12"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="13"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="14"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="15"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="16"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="17"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="18"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="19"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="3"][data-folder-h="20"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="3"] .folder-resize-handle.bottom-right .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 7 32 A 25 25 0 0 0 32 7" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

/* min(w,h)=4 folders (27px radius) - True circular arcs */
.app-icon[data-folder-w="4"][data-folder-h="4"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="5"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="6"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="7"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="8"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="9"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="10"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="11"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="12"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="13"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="14"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="15"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="16"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="17"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="18"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="19"] .folder-resize-handle.top-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="20"] .folder-resize-handle.top-left .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 4 31 A 27 27 0 0 1 31 4" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

.app-icon[data-folder-w="4"][data-folder-h="4"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="5"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="6"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="7"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="8"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="9"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="10"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="11"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="12"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="13"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="14"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="15"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="16"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="17"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="18"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="19"] .folder-resize-handle.top-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="20"] .folder-resize-handle.top-right .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 5 4 A 27 27 0 0 1 32 31" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

.app-icon[data-folder-w="4"][data-folder-h="4"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="5"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="6"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="7"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="8"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="9"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="10"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="11"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="12"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="13"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="14"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="15"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="16"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="17"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="18"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="19"] .folder-resize-handle.bottom-left .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="20"] .folder-resize-handle.bottom-left .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 4 5 A 27 27 0 0 0 31 32" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}

.app-icon[data-folder-w="4"][data-folder-h="4"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="5"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="6"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="7"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="8"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="9"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="10"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="11"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="12"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="13"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="14"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="15"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="16"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="17"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="18"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="19"] .folder-resize-handle.bottom-right .handle-dot::after,
.app-icon[data-folder-w="4"][data-folder-h="20"] .folder-resize-handle.bottom-right .handle-dot::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 36 36"><path d="M 5 32 A 27 27 0 0 0 32 5" fill="none" stroke="rgba(255,255,255,0.95)" stroke-width="2.5" stroke-linecap="round"/></svg>');
}


/* Handle active state - change to blue */
.folder-resize-handle:active .handle-dot::after {
    filter: drop-shadow(0 2px 8px rgba(0, 122, 255, 0.8)) brightness(0.3) sepia(1) saturate(20) hue-rotate(190deg);
}

/* ========== Resize Preview Overlay ========== */
.folder-resize-preview-overlay {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    background-color: rgba(59, 130, 246, 0.35);
    border: 2px solid rgba(59, 130, 246, 0.8);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none;
    will-change: transform, width, height;
}

/* Size label inside preview */
.folder-resize-preview-overlay .size-label {
    font-size: 20px;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* Adjust preview for larger sizes */
.folder-resize-preview-overlay[data-size="3"],
.folder-resize-preview-overlay[data-size="4"] {
    border-radius: 16px;
}

.folder-resize-preview-overlay[data-size="4"] .size-label {
    font-size: 24px;
}

/* Icon styles for SVG icons - only for homescreen app icons */
.app-icon .icon svg ,
.app-close-icon-clone svg {
    width: auto;
    height: 26px;
}

/* Override for Create app icon */
.app-icon .icon.icon-create svg {
    width: 35%;
    height: 35%;
}

/* Override for Settings app icon */
.app-icon .icon.icon-settings svg {
    width: 70%;
}

.icon.fallback-letter {
    background: #666;
    font-size: 24px;
    color: white;
}

/* Empty-space long-press ghost tile (homescreen) */
.empty-app-press-preview {
    position: fixed;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px dashed rgba(255, 255, 255, 0.25);
    transform: translate(-50%, -50%) scale(0.96);
    opacity: 0;
    transition: opacity 120ms ease, transform 120ms ease;
    will-change: opacity, transform;
    pointer-events: none;
    z-index: 9997;
}

.empty-app-press-preview.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

#folderModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    z-index: 1001;
    backdrop-filter: blur(5px);
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    /* GPU acceleration for modal backdrop */
    will-change: opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

#folderModal.visible {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease;
    visibility: visible;
    z-index: 9997; /* Above drawers (9996), below ContextMenu (9998+). Portaled to body, so competes directly. */
}

#folderModal .folder-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scale(0.9);
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    border-radius: 43px;
    padding: 20px;
    width: 340px;
    max-width: 340px;
    max-height: 68vh;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    /* GPU acceleration hints */
    will-change: transform, width, height, border-radius;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                width 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
                height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

#folderModal.visible .folder-content {
    transform: translate3d(-50%, -50%, 0) scale(1);
    border: 1px solid #ffffff0d;
}
#folderModal.visible .folder-content.folder-content-fullscreen{
    border: none;
}

#folderModal .folder-title-wrapper {
    margin-bottom: 18px;
    position: relative;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* // folder title when full screen */
#folderModal .folder-content-fullscreen .folder-title-wrapper {
    margin-bottom: 26px;
    font-size: 16px;
}


#folderModal .folder-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: white;
    font-size: 18px;
    padding: 2px 0 8px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* // folder title when full screen */
/* #folderModal .folder-content-fullscreen .folder-title {
    transform: translateY(-33px);
    font-size: 16px; */
/* } */

#folderModal .folder-title-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.98);
}

#folderModal .folder-title-edit {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#folderModal .folder-title-edit-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.98);
}

#folderModal .folder-title-input {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding: 8px 40px 8px 40px;
    outline: none;
    width: 100%;
    max-width: 280px;
    box-sizing: border-box;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

#folderModal .folder-title-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

#folderModal .folder-title-clear {
    position: absolute;
    right: calc(50% - 140px + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

#folderModal .folder-title-clear:active {
    background: rgba(255, 255, 255, 0.3);
}

#folderModal .folder-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    box-sizing: border-box;
    /* Reduce repaints during transition */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

#folderModal .app-icon {
    padding: 0;
    /* width: 100%; */
    width: 58px;
    height: 81px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Prevent layout thrashing during parent resize */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

#folderModal .icon {
    aspect-ratio: 1;
    /* margin: 0 auto 5px; */
    box-sizing: border-box;
}

#folderModal .app-name {
    width: 100%;
    /* padding: 0 2px; */
    /* margin-top: 1px; */
    box-sizing: border-box;
    text-align: center;
}

#folderModal .folder-content.folder-content-fullscreen .folder-fullscreen-btn {
    top: calc(var(--safe-top) + 16px);
}

/* Fullscreen toggle button */
#folderModal .folder-fullscreen-btn {
    position: absolute;
    top: 16px;
    right: 20px;
    border: none;
    border-radius: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, top 0.2s ease;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
}

#folderModal .folder-fullscreen-btn:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
}

/* Fullscreen mode - smooth scale transition while keeping 4 columns */
#folderModal .folder-content.folder-content-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    padding: calc(var(--safe-top) + 8px) calc(20px + var(--safe-right)) 20px calc(20px + var(--safe-left));
    background: rgba(0,0,0,1);
}

#folderModal .folder-content-fullscreen .folder-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    /* gap: 20px 10px; */
}

/* Search overlay styles */
#searchOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    height: 100vh; /* fallback */
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(50px);
    z-index: 49999; /* Above page title (9999), drawer (9996); below context menu (50000) and header (50000) */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-40px);
    pointer-events: none;
    /* visibility delay keeps element rendered during the opacity/transform fade-out */
    /* transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                visibility 0s linear 0.35s; */
}

#searchOverlay[data-search-clone] {
    position: absolute;
    inset: 0;
    z-index: 50000;
    pointer-events: none;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

#searchOverlay[data-search-clone] .search-container {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#searchOverlay.is-search-pinned-folder-reordering {
    /* While reordering pinned folders, prevent scroll/selection glitches */
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.recent-apps-section.is-search-pinned-folder-dragging {
    /* Hide the original while the clone is being dragged */
    opacity: 0.08;
}

.search-pinned-folder-drag-clone {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 50000; /* above search overlay (49999) */
    pointer-events: none;
    will-change: transform;
    transform: translateY(0);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.55);
    box-sizing: border-box;
    padding-bottom: 12px; /* give the app names some breathing room at the bottom */
}

.search-pinned-folder-drag-clone .recent-apps-section {
    padding: 0 0 20px;
}

.search-pinned-folder-drag-clone .search-category-title--collapsible {
    /* Match SearchOverlay pinned-folder header spacing/typography */
    padding: 10px 20px 16px;
    font-size: 0.9em;
    font-weight: 600;
    color: #555;
}

.search-pinned-folder-drag-clone .recent-apps-container {
    overflow: hidden; /* avoid showing scroll affordance in clone */
}

.search-pinned-folder-drag-clone .recent-apps-container > .recent-app-item:first-child {
    padding-left: 20px;
}

.search-pinned-folder-drag-clone .recent-apps-container > .recent-app-item:last-child {
    padding-right: 20px;
}

.search-pinned-folder-drag-clone .search-category-title--collapsible {
    /* Match overlay styles even though clone is outside #searchOverlay */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: none;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.search-pinned-folder-drag-clone .search-category-title-caret {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(255,255,255,0.55);
}

/* Legacy placeholder styles (older clone). Keep harmless if referenced elsewhere. */
.search-pinned-folder-drag-clone__inner { width: 100%; height: 100%; }
.search-pinned-folder-drag-clone__title { color: rgba(255,255,255,0.92); }

#searchOverlay.visible {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto; 
    /* visibility shows immediately on open, no delay */
    /* transition: opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                visibility 0s linear; */
}

/* Embedded mode: inline within homescreen page instead of fixed overlay */
#searchOverlayEmbedded,
.search-overlay--embedded {
    position: relative;
    width: 100%;
    height: 100%;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    z-index: auto;
    backdrop-filter: none;
}

/* Search overlay starts below the app header so header icons remain visible and tappable.
   (Notifications overlay lives inside the header's stacking context so doesn't need this,
    but #searchOverlay is rendered outside it.) */

.search-container {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.95);
    backdrop-filter: blur(50px);
    overflow: hidden;
    /* Keep content below the global header, but let overlay background cover behind it. */
    padding-top: calc(var(--app-safe-top) + 56px);
    box-sizing: border-box;
}

.search-header {
    /* Hidden — the app header is visible above the overlay */
    display: none;
}

.search-overlay-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.3px;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    margin: 0;
}

/* Search input container — below the header, matching other sections */
.search-input-area {
    padding: 12px 16px;
    flex-shrink: 0;
}

/* .search-input-wrapper removed — now uses .im-search-input-wrapper from im.css */

/* QR button — positioned as the left icon inside the search input (like .im-search-icon) */
.search-input-area .search-qr-btn {
    position: absolute;
    left: 12px;
    color: rgba(255, 255, 255, 0.92);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    pointer-events: auto;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.search-input-area .search-qr-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* History icon inside search input (right side) */
.search-input-area .search-history-btn {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    color: #64748b;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

/* QR scanner overlay (Search Overlay) */
#searchOverlay .search-qr-scanner {
    position: absolute;
    inset: 0;
    z-index: 10000; /* above overlay content */
    background: rgba(0,0,0,0.97);
    display: flex;
    flex-direction: column;
}

#searchOverlay .search-qr-scanner__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--app-safe-top) + 56px + 16px) 20px 12px;
    background: #fff;
    backdrop-filter: blur(16px);
}

#searchOverlay .search-qr-scanner__title {
    color: rgba(255,255,255,0.92);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

#searchOverlay .search-qr-scanner__actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

#searchOverlay .search-qr-scanner__upload {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.90);
    border-radius: 12px;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}

#searchOverlay .search-qr-scanner__upload:active {
    background: rgba(255,255,255,0.16);
}

#searchOverlay .search-qr-scanner__close {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.90);
    border-radius: 12px;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

#searchOverlay .search-qr-scanner__close:active {
    background: rgba(255,255,255,0.16);
}

#searchOverlay .search-qr-scanner__file-input {
    display: none;
}

#searchOverlay .search-qr-scanner__body {
    position: relative;
    flex: 1;
    padding: 18px 20px calc(var(--safe-bottom) + 20px);
    display: flex;
    align-items: center;
    justify-content: center;
}

body.light_mode #searchOverlay .search-qr-scanner__body {
    background: #fff;
}

#searchOverlay .search-qr-scanner__video {
    width: 100%;
    max-width: 520px;
    height: auto;
    aspect-ratio: 3 / 4;
    background: rgba(0,0,0,1);
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}

#searchOverlay .search-qr-scanner__canvas {
    display: none;
}

#searchOverlay .search-qr-scanner__hint {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: calc(var(--safe-bottom) + 26px);
    text-align: center;
    color: rgba(255,255,255,0.84);
    background: rgba(255,255,255,0.10);
    padding: 10px 12px;
    border-radius: 14px;
    backdrop-filter: blur(12px);
}

#searchOverlay .search-qr-scanner__error {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: calc(var(--safe-bottom) + 26px);
    text-align: center;
    color: rgba(255,190,190,0.95);
    background: rgba(255,0,0,0.15);
    padding: 10px 12px;
    border-radius: 14px;
    backdrop-filter: blur(12px);
}

#searchOverlay .search-qr-scanner__detected {
    position: absolute;
    left: 20px;
    right: 20px;
    top: calc(var(--app-safe-top) + 56px + 78px);
    color: rgba(255,255,255,0.92);
    background: rgba(255,255,255,0.10);
    padding: 10px 12px;
    border-radius: 14px;
    backdrop-filter: blur(12px);
    overflow: hidden;
}

#searchOverlay .search-qr-scanner__detected_title {
    font-size: 12px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.70);
    margin-bottom: 6px;
}

#searchOverlay .search-qr-scanner__detected_value {
    font-size: 13px;
    line-height: 1.25;
    word-break: break-word;
    color: rgba(255,255,255,0.92);
}

/* #searchInput inherits styles from .im-search-input class applied in JSX */

.search-cancel {
    display: none; /* Replaced by header icon toggle to close */
}

/* Light mode overrides for search overlay */
body.light_mode #searchOverlay {
    background: rgba(255,255,255,0.97) !important;
}

body.light_mode .search-container {
    background: rgba(255,255,255,0.97) !important;
}

body.light_mode .search-header {
    background: rgba(255,255,255,0.9);
}

body.light_mode .search-overlay-title {
    color: #111827;
}

body.light_mode .search-input-area {
    border-bottom-color: #e5e7eb;
}

body.light_mode .search-input-area .search-qr-btn {
    color: rgba(0, 0, 0, 0.7);
}

body.light_mode .search-input-area .search-history-btn {
    color: #6b7280;
}

body.light_mode .search-loading,
body.light_mode .search-error,
body.light_mode .search-no-results {
    color: #111827;
}

body.light_mode .search-category-title {
    color: #6b7280 !important;
}

/* Override inline styles for category titles */
body.light_mode .search-category-title[style*="color: #555"] {
    color: #6b7280 !important;
}

body.light_mode #searchOverlay .search-result-item {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light_mode #searchOverlay .search-result-item.app-icon {
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

body.light_mode .search-result-name,
body.light_mode #searchOverlay .search-result-name.app-name {
    color: #111827 !important;
}

body.light_mode #searchOverlay .search-result-info .search-result-name {
    color: #111827 !important;
}

body.light_mode #searchOverlay .search-result-info {
    color: #111827;
}

body.light_mode #searchOverlay .recent-app-name.app-name {
    color: #111827 !important;
}

body.light_mode .search-result-category {
    color: rgba(0, 0, 0, 0.6);
}

body.light_mode .search-result-icon.fallback-letter {
    background: #e5e7eb;
    color: #111827;
}

body.light_mode .search-fallback-letter {
    color: #111827;
}

body.light_mode .no-results {
    color: rgba(0, 0, 0, 0.6);
}

body.light_mode #searchOverlay .search-category-title--collapsible {
    color: #6b7280;
}

body.light_mode #searchOverlay .search-category-title-caret {
    color: #6b7280;
}

body.light_mode #searchOverlay .search-qr-scanner__title {
    color: #000;
}

body.light_mode #searchOverlay .search-qr-scanner__upload,
body.light_mode #searchOverlay .search-qr-scanner__close {
    color: #000;
}

body.light_mode #searchOverlay .search-qr-scanner__upload:active,
body.light_mode #searchOverlay .search-qr-scanner__close:active {
    background: rgba(0, 0, 0, 0.1);
}

body.light_mode .recent-app-name {
    color: #111827;
    text-shadow: none;
}

body.light_mode .recent-app-icon {
    background: rgba(0, 0, 0, 0.05);
}

body.light_mode .recent-app-icon-placeholder {
    background: rgba(0, 0, 0, 0.05);
    color: #111827;
}

body.light_mode #searchOverlay .recent-app-name.app-name {
    color: #111827;
    text-shadow: none;
}

body.light_mode .search-create-it {
    border-color: rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.05);
    color: #111827;
}

body.light_mode .search-create-it:active {
    background: rgba(0, 0, 0, 0.1);
}

/* System app icons in search overlay */
body.light_mode .search-result-item.system_app .icon {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.15);
}

/* Remove or lighten dark box-shadows on app icons in light mode */
body.light_mode .icon {
    box-shadow: none !important;
}

/* Search overlay icons: transparent bg so list rows look clean */
body.light_mode #searchOverlay .search-result-icon.icon,
body.light_mode #searchOverlay .recent-app-icon.icon,
body.light_mode .search-result-icon {
    box-shadow: none !important;
    background: transparent !important;
}

/* Grid-slot icons: remove heavy dark-mode shadow */
body.light_mode .grid-slot .icon {
    box-shadow: none !important;
}

/* Lighten the create icon border in light mode */
body.light_mode .icon-create {
    border-color: rgba(0, 0, 0, 0.2) !important;
}

.search-loading{
    color: white;
    text-align: center;
    font-size: 17px;
    padding: 20px;
}

.search-error{
    color: white;
    text-align: center;
    font-size: 17px;
    padding: 20px;
}

.search-no-results{
    color: white;
    text-align: center;
    font-size: 17px;
    padding: 20px;
}

.search-create-suggestion{
    padding: 16px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.search-create-it{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.search-create-it:active{
    transform: translateY(1px);
}

.search-create-it:disabled{
    opacity: 0.65;
    cursor: default;
}

.search-results {
    padding: 0 20px 100px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    outline: none;
    border: none;
}

.search-results:focus {
    outline: none;
    border: none;
}

#searchOverlay .search-results-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 0;
}

#searchOverlay .search-results-loading .spinner {
    width: 20px;
    height: 20px;
}

/* Recent Apps Section */
.recent-apps-section {
    padding: 0 0 20px;
}

.recent-apps-section.is-collapsed {
    padding-bottom: 8px;
}

#searchOverlay .search-category-title--collapsible {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 10px 20px 16px;
    font-size: 0.9em;
    font-weight: 600;
    color: #555;
}

#searchOverlay .search-category-title--collapsible:active {
    opacity: 0.75;
}

#searchOverlay .search-category-title-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#searchOverlay .search-category-title-caret {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(255,255,255,0.55);
    transform: rotate(0deg);
    transition: transform 0.15s ease;
}

#searchOverlay .search-category-title-caret svg {
    width: 18px;
    height: 18px;
    display: block;
}

#searchOverlay .search-category-title-caret.is-collapsed {
    transform: rotate(-90deg);
}

.recent-apps-container {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar for cleaner look but keep functionality */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.recent-apps-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

#searchOverlay .recent-apps-container > .recent-app-item:first-child {
    margin-left: 20px;
}

#searchOverlay .recent-apps-container > .recent-app-item:last-child {
    margin-right: 20px;
}

.recent-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.1s;
    flex-shrink: 0;
    width: 60px;
}

.recent-app-item:active {
    opacity: 0.6;
    transform: scale(0.95);
}

body:not(.light_mode) .recent-app-icon {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.recent-app-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 4px;
}

.recent-app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
}

.recent-app-icon-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    color: white;
    font-size: 20px;
    font-weight: 500;
    border-radius: 12px;
}

.recent-app-name {
    font-size: 12px;
    color: white;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

body:not(.light_mode) .search-result-item {
    border-bottom-color: rgba(255,255,255,0.1);
}

.search-result-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
    transition: opacity 0.2s;
}

.search-result-item:active {
    opacity: 0.6;
}

body:not(.light_mode) .search-result-icon {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    background: #333;
}

.search-result-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    margin-right: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.search-result-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.search-result-icon svg {
    width: 60%;
    height: 60%;
    fill: currentColor;
}

.search-result-icon.fallback-letter {
    background: #666;
    font-size: 20px;
    color: white;
}

.search-result-info {
    flex: 1;
    min-width: 0;
}

/* Override homescreen app-icon styles for search overlay items */
#searchOverlay .search-result-item.app-icon,
#searchOverlay .recent-app-item.app-icon {
    display: flex;
    flex-direction: row; /* Keep horizontal layout for search results */
    align-items: center;
    padding: 12px 0; /* Use search overlay padding */
    width: auto; /* Don't force full width */
    cursor: pointer;
}

body:not(.light_mode) #searchOverlay .search-result-item.app-icon {
    border-bottom-color: rgba(255,255,255,0.1);
}

#searchOverlay .search-result-item.app-icon {
    border-bottom: 1px solid transparent;
}

#searchOverlay .recent-app-item.app-icon {
    flex-direction: column;
    align-items: center;
    width: 60px;
    padding: 0;
}

/* Override homescreen icon styles for search overlay icons */
body:not(.light_mode) #searchOverlay .search-result-icon.icon {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3); /* Keep search overlay shadow */
    background: #333;
}

#searchOverlay .search-result-icon.icon {
    width: 50px; /* Keep search overlay size */
    height: 50px;
    border-radius: 12px;
    margin-right: 12px;
    margin-bottom: 0; /* Remove homescreen margin */
    background: transparent;
}

body:not(.light_mode) #searchOverlay .recent-app-icon.icon {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

#searchOverlay .recent-app-icon.icon {
    width: 50px; /* Match search result icon size */
    height: 50px;
    border-radius: 12px;
    margin-bottom: 4px; /* Keep recent app margin */
    margin-right: 0;
    background: rgba(255,255,255,0.1);
}

/* Override app-name styles for search overlay */
body:not(.light_mode) #searchOverlay .search-result-name.app-name {
    font-size: 16px; /* Use search overlay font size */
    color: white;
    text-align: left; /* Keep left alignment */
    max-width: none; /* Don't limit width */
    margin-top: 0;
    text-shadow: none;
}

body:not(.light_mode) #searchOverlay .recent-app-name.app-name {
    font-size: 12px;
    color: white;
    text-align: center;
    width: 100%;
    margin-top: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body:not(.light_mode) .search-result-name {
    color: white;
}

.search-result-name {
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#searchOverlay .search-result-stats {
    font-size: 11px;
    gap: 6px;
    margin-top: 1px;
    color: rgba(255, 255, 255, 0.5);
}

#searchOverlay .search-result-stats svg {
    width: 12px;
    height: 12px;
    fill: rgba(255, 255, 255, 0.5);
    margin: 0 1px;
}

body.light_mode #searchOverlay .search-result-stats {
    color: #8e8e93;
}

body.light_mode #searchOverlay .search-result-stats svg {
    fill: #8e8e93;
}

body:not(.light_mode) .search-fallback-letter {
    color: white;
}

body:not(.light_mode) .search-result-category {
    color: rgba(255,255,255,0.5);
}

.search-result-category {
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-user-result {
    display: flex;
    align-items: center;
    padding: 12px 0;
    cursor: pointer;
    gap: 12px;
}

.search-user-result:active {
    opacity: 0.6;
}

.search-user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
}

.search-user-avatar-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #555;
    color: white;
    font-size: 18px;
    font-weight: 600;
}

body.light_mode .search-user-avatar-fallback {
    background: #e5e7eb;
    color: #111827;
}

.search-user-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-user-name {
    font-size: 16px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: white;
}

body.light_mode .search-user-name {
    color: #111827;
}

.search-user-username {
    font-size: 14px;
    color: rgba(255,255,255,0.5);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.light_mode .search-user-username {
    color: rgba(0,0,0,0.5);
}

body:not(.light_mode) .no-results {
    color: rgba(255,255,255,0.5);
}

.no-results {
    text-align: center;
    font-size: 17px;
    margin-top: 40px;
}

@media (max-width: 375px) {
    /* .app-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
    } */
    .icon { width: 55px; height: 55px; }
    /* #folderModal .folder-grid { */
        /* grid-template-columns: repeat(3, 1fr); */
    /* } */
}

/* @media (max-width: 360px) {
    .app-grid {
        gap: 0px;
    }
} */



.context-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 46000; /* above im-messages-overlay-backdrop (45000) and notifications (44445); below global-header-overlay (50000) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.context-menu-icon-clone {
    opacity: 0;
    visibility: hidden;
    transform: scale(1);
    transition: opacity 0.2s ease, visibility 0.2s ease;
    /* Allow the bounce scale animation (1.2 -> 1.1) without clipping the icon */
    overflow: visible;
}

.context-menu-icon-clone.visible {
    opacity: 1;
    visibility: visible;
    animation: contextIconCloneBounce 0.18s ease-out forwards;
    transform-origin: center center;
    will-change: transform;
    z-index: 46001;
}

.context-menu-icon-clone.factory_item_clone {
  /* For Factory: clone the pressed row/card, not a homescreen icon. */
  border-radius: 12px;
  /* Match the ContextMenu open motion (same initial transform as `.context-menu`) */
  transform: scale(0.9) translateY(10px);
  transform-origin: center center;
  will-change: transform;
  /* Keep it reasonable on small screens */
  max-width:  520px;
  max-height: min(55vh, 520px);
}

.context-menu-icon-clone.factory_item_clone.visible {
  /* Match the ContextMenu bounce timing/keyframes (same as `.context-menu.visible`) */
  transform: scale(1) translateY(0);
  animation: contextMenuBounce 0.18s ease-out 0.05s forwards;
}

.context-menu-icon-clone .app-icon {
  margin: 0;
  padding: 0;
  width: 100%;
  /* Allow the label to take its natural height; parent clone box is fixed-height (icon size). */
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: visible; /* allow label to render below the fixed-height clone box */
}

/* Icon clone contents */
.context-menu-icon-clone .app-icon .icon {
  width: 100%;
  height: 100%;
  display: flex;
  flex: 0 0 auto; /* never shrink the icon when the label is present */
  overflow: hidden;
  border-radius: 12px;
}

/* ContextMenu clone: folder icons need to keep their custom shaping (e.g. your 2x2 rounded style) */
.context-menu-icon-clone .app-icon .icon.folder-icon {
  /* Default logic: folder border radius ~ 56px of its size */
  border-radius: 56px;
  /* Allow resize handles to be visible - !important to override inline styles from clone_element_with_computed_styles */
  overflow: visible !important;
}

/* Make resize handles visible and interactive in context menu clone */
.context-menu-icon-clone .folder-resize-handle {
  pointer-events: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10000 !important;
}

/* Hide sheen overlay in context menu clone so handles are clearly visible */
.context-menu-icon-clone .icon.folder-icon::after {
  display: none !important;
}

/* Clone: 1-column folders (1x2, 1x3, 1x4, etc.) */
.context-menu-icon-clone .app-icon[data-folder-w="1"][data-folder-h]:not([data-folder-h="1"]) .folder-mini-container,
.context-menu-icon-clone .app-icon:not([data-folder-w])[data-folder-h]:not([data-folder-h="1"]) .folder-mini-container {
    --folder-mini-cell-w: 41px;
    --folder-mini-cell-h: 60px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-auto-rows: var(--folder-mini-cell-h);
    align-content: start;
    place-items: start center;
    padding-left: 12px;
    padding-right: 11px;
}

.context-menu-icon-clone .app-icon[data-folder-w="1"][data-folder-h]:not([data-folder-h="1"]) .folder-mini-icon,
.context-menu-icon-clone .app-icon:not([data-folder-w])[data-folder-h]:not([data-folder-h="1"]) .folder-mini-icon {
    border-radius: 10px;
    width: 41px;
    height: 41px;
}

/* Clone: vertical spacing for 1-column folders */
.context-menu-icon-clone .app-icon[data-folder-w="1"][data-folder-h="2"] .folder-mini-container,
.context-menu-icon-clone .app-icon:not([data-folder-w])[data-folder-h="2"] .folder-mini-container {
    padding-top: 14px;
    padding-bottom: 14px;
    row-gap: 14px;
}

.context-menu-icon-clone .app-icon[data-folder-w="1"][data-folder-h="3"] .folder-mini-container,
.context-menu-icon-clone .app-icon:not([data-folder-w])[data-folder-h="3"] .folder-mini-container {
    padding-top: 20px;
    padding-bottom: 20px;
    row-gap: 20px;
}

.context-menu-icon-clone .app-icon[data-folder-w="1"][data-folder-h="4"] .folder-mini-container,
.context-menu-icon-clone .app-icon:not([data-folder-w])[data-folder-h="4"] .folder-mini-container {
    padding-top: 24px;
    padding-bottom: 24px;
    row-gap: 24px;
}

/* Clone: 2-column folders (all heights) */
.context-menu-icon-clone .app-icon[data-folder-w="2"] .folder-mini-container {
    --folder-mini-cell-w: 35px;
    --folder-mini-cell-h: 56px;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    grid-auto-rows: var(--folder-mini-cell-h);
    align-content: start;
    place-items: start center;
    padding-left: 11px;
    padding-right: 11px;
    column-gap: 11px;
}

/* Clone: 3-column folders (all heights) */
.context-menu-icon-clone .app-icon[data-folder-w="3"] .folder-mini-container {
    --folder-mini-cell-w: 41px;
    --folder-mini-cell-h: 60px;
    grid-template-columns: repeat(3, var(--folder-mini-cell-w));
    grid-template-rows: auto;
    grid-auto-rows: var(--folder-mini-cell-h);
    align-content: start;
    place-items: start center;
    padding-left: 30px;
    padding-right: 30px;
    column-gap: 30px;
}

/* Clone: 4-column folders (all heights) */
.context-menu-icon-clone .app-icon[data-folder-w="4"] .folder-mini-container {
    --folder-mini-cell-w: 46px;
    --folder-mini-cell-h: 64px;
    grid-template-columns: repeat(4, var(--folder-mini-cell-w));
    grid-template-rows: auto;
    grid-auto-rows: var(--folder-mini-cell-h);
    align-content: start;
    place-items: start center;
    padding-left: 30px;
    padding-right: 30px;
    column-gap: 30px;
}

/* Clone: vertical spacing for 2-column folders */
.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="1"] .folder-mini-container {
    padding-top: 10px;
    padding-bottom: 0px;
    row-gap: 0px;
}
.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="2"] .folder-mini-container {
    padding-top: 16px;
    padding-bottom: 16px;
    row-gap: 16px;
}
.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="3"] .folder-mini-container {
    padding-top: 23px;
    padding-bottom: 23px;
    row-gap: 23px;
}
.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="4"] .folder-mini-container {
    padding-top: 27px;
    padding-bottom: 27px;
    row-gap: 27px;
}

/* Clone: vertical spacing for 3-column folders */
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="1"] .folder-mini-container {
    padding-top: 7px;
    padding-bottom: 0px;
    row-gap: 0px;
}
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="2"] .folder-mini-container {
    padding-top: 14px;
    padding-bottom: 14px;
    row-gap: 14px;
}
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="3"] .folder-mini-container {
    padding-top: 20px;
    padding-bottom: 20px;
    row-gap: 20px;
}
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="4"] .folder-mini-container {
    padding-top: 24px;
    padding-bottom: 24px;
    row-gap: 24px;
}

/* Clone: vertical spacing for 4-column folders */
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="1"] .folder-mini-container {
    padding-top: 7px;
    padding-bottom: 0px;
    row-gap: 0px;
}
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="2"] .folder-mini-container {
    padding-top: 11px;
    padding-bottom: 11px;
    row-gap: 11px;
}
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="3"] .folder-mini-container {
    padding-top: 17px;
    padding-bottom: 17px;
    row-gap: 17px;
}
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="4"] .folder-mini-container {
    padding-top: 21px;
    padding-bottom: 21px;
    row-gap: 21px;
}

/* Clone: icon sizing for 2, 3, 4 column folders */
.context-menu-icon-clone .app-icon[data-folder-w="2"] .folder-mini-icon {
    border-radius: 9px;
    width: 35px;
    height: 37px;
}

.context-menu-icon-clone .app-icon[data-folder-w="3"] .folder-mini-icon {
    border-radius: 10px;
    width: 41px;
}

.context-menu-icon-clone .app-icon[data-folder-w="4"] .folder-mini-icon {
    border-radius: 12px;
    width: 46px;
}

/* Clone: border-radius based on min(w, h) */
/* min dimension = 1: applies when either w=1 OR h=1 */
.context-menu-icon-clone .app-icon:not([data-folder-w]):not([data-folder-h]) .icon.folder-icon,
.context-menu-icon-clone .app-icon[data-folder-w="1"] .icon.folder-icon,
.context-menu-icon-clone .app-icon[data-folder-h="1"] .icon.folder-icon {
    border-radius: 16px;
}

.context-menu-icon-clone .app-icon:not([data-folder-w]):not([data-folder-h]) .folder-mini-container,
.context-menu-icon-clone .app-icon[data-folder-w="1"] .folder-mini-container,
.context-menu-icon-clone .app-icon[data-folder-h="1"] .folder-mini-container {
    border-radius: 15px;
}

.context-menu-icon-clone .app-icon:not([data-folder-w]):not([data-folder-h]),
.context-menu-icon-clone .app-icon[data-folder-w="1"],
.context-menu-icon-clone .app-icon[data-folder-h="1"] {
    border-radius: 15px;
}

/* min dimension = 2: applies when both w>=2 AND h>=2 */
.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="2"] .icon.folder-icon,
.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="3"] .icon.folder-icon,
.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="4"] .icon.folder-icon,
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="2"] .icon.folder-icon,
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="2"] .icon.folder-icon {
    border-radius: var(--folder-border-radius-2x2);
}

.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="2"] .folder-mini-container,
.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="3"] .folder-mini-container,
.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="4"] .folder-mini-container,
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="2"] .folder-mini-container,
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="2"] .folder-mini-container {
    border-radius: var(--folder-border-radius-2x2);
}

.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="2"],
.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="3"],
.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="4"],
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="2"],
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="2"] {
    border-radius: var(--folder-border-radius-2x2);
}

/* min dimension = 3: applies when both w>=3 AND h>=3 */
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="3"] .icon.folder-icon,
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="4"] .icon.folder-icon,
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="3"] .icon.folder-icon {
    border-radius: var(--folder-border-radius-3x3);
}

.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="3"] .folder-mini-container,
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="4"] .folder-mini-container,
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="3"] .folder-mini-container {
    border-radius: var(--folder-border-radius-3x3);
}

.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="3"],
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="4"],
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="3"] {
    border-radius: var(--folder-border-radius-3x3);
}

/* min dimension = 4: applies only to 4x4 */
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="4"] .icon.folder-icon {
    border-radius: var(--folder-border-radius-4x4);
}

.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="4"] .folder-mini-container {
    border-radius: var(--folder-border-radius-4x4);
}

.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="4"] {
    border-radius: var(--folder-border-radius-4x4);
}

/* Clone: Icon Overlay (::after sheen) Scaling based on width */
/* 1-column folders: default scale */
.context-menu-icon-clone .app-icon:not([data-folder-w]) .icon .icon-inner::after,
.context-menu-icon-clone .app-icon[data-folder-w="1"] .icon .icon-inner::after {
    scale: 1;
}

/* 2-column folders: ~2.5x larger icon */
.context-menu-icon-clone .app-icon[data-folder-w="2"] .icon .icon-inner::after {
    scale: 2.5;
    left: -62px;
}

/* 3-column folders: ~3.5x larger icon */
.context-menu-icon-clone .app-icon[data-folder-w="3"] .icon .icon-inner::after {
    scale: 3.5;
}

/* 4-column folders: ~5.5x larger icon */
.context-menu-icon-clone .app-icon[data-folder-w="4"] .icon .icon-inner::after {
    scale: 5.5;
    left: -90px;
}

/* Clone: 1-column folder-icon sizing */
.context-menu-icon-clone .app-icon[data-folder-w="1"][data-folder-h]:not([data-folder-h="1"]) .icon.folder-icon,
.context-menu-icon-clone .app-icon:not([data-folder-w])[data-folder-h]:not([data-folder-h="1"]) .icon.folder-icon {
    width: 100% !important;
    height: calc(100% - 17px) !important;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.context-menu-icon-clone .app-icon[data-folder-w="1"][data-folder-h]:not([data-folder-h="1"]),
.context-menu-icon-clone .app-icon:not([data-folder-w])[data-folder-h]:not([data-folder-h="1"]) {
    height: 100%;
    padding: 0;
}

.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="2"] {
  border-radius: var(--folder-border-radius-2x2);
}

.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="2"] .icon.folder-icon {
  border-radius: var(--folder-border-radius-2x2);
}
.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="2"] .icon.folder-icon svg {
    height: 42px
}

.app-name.folder-mini-app-name {
    margin-top: 0 !important;
}

.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="2"] .folder-mini-container {
  border-radius: var(--folder-border-radius-2x2);
  /* Match homescreen rule: edge spacing == internal gap */
  --folder-mini-gap: 6px;
  --folder-mini-cell-w: 59.5px;
  --folder-mini-cell-h: 62px;
  grid-template-columns: repeat(2, var(--folder-mini-cell-w));
  grid-template-rows: repeat(2, var(--folder-mini-cell-h));
  gap: var(--folder-mini-gap) !important;
  padding: var(--folder-mini-gap);
  place-content: start;
  place-items: start center;
  padding: 0;
}


.context-menu-icon-clone .app-icon[data-folder-w="2"][data-folder-h="2"] .folder-mini-icon {
  border-radius: 14.4px;
  width: 56px;
  height: 56px;
}

/* Clone: 3x3 / 4x4 shaping + radius logic */
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="3"] .icon.folder-icon {
  border-radius: var(--folder-border-radius-3x3);
}

.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="4"] .icon.folder-icon {
  border-radius: var(--folder-border-radius-4x4);
}

.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="3"] .folder-mini-container {
  border-radius: var(--folder-border-radius-3x3);
  /* Match homescreen rule: edge spacing == internal gap */
  --folder-mini-gap: 6px;
  --folder-mini-cell-w: 41px;
  --folder-mini-cell-h: 60px;
  grid-template-columns: repeat(3, var(--folder-mini-cell-w));
  grid-template-rows: repeat(3, var(--folder-mini-cell-h));
  gap: var(--folder-mini-gap);
  padding: var(--folder-mini-gap);
  place-content: start;
  place-items: start center;
  padding: 0;
}

.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="4"] .folder-mini-container {
  border-radius: var(--folder-border-radius-4x4);
  /* Match homescreen rule: edge spacing == internal gap */
  --folder-mini-gap: 17px;
  --folder-mini-cell-w: 60px;
  --folder-mini-cell-h: 70px;
  grid-template-columns: repeat(4, var(--folder-mini-cell-w));
  grid-template-rows: repeat(4, var(--folder-mini-cell-h));
  gap: var(--folder-mini-gap) !important;
  padding: 21px !important;
  place-content: start;
  place-items: start center;
  padding: 0;
}

.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="4"] .folder-mini-container.folder-mini-container--virtualized {
    padding: 0 !important;
}

/* 3x3 clone: match your latest 3x3 tuning (fixed mini size + radius) */
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="3"] .folder-mini-icon {
  border-radius: 14.4px;
  width: 56px;
  height: 56px;
}

/* 4x4 clone: keep radius logic proportional */
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="4"] .folder-mini-icon {
  border-radius: 14.4px;
  width: 60px;
  height: 60px;
}

/* 3x3 clone: match folder SVG size */
.context-menu-icon-clone .app-icon[data-folder-w="3"][data-folder-h="3"] .icon.folder-icon > svg {
  height: 52px;
}

/* 4x4 clone: match folder SVG size */
.context-menu-icon-clone .app-icon[data-folder-w="4"][data-folder-h="4"] .icon.folder-icon > svg {
  height: 62px;
}

/* Show the app label under the scaled icon */
.context-menu-icon-clone .app-icon .app-name {
  display: block;
  opacity: 1;
  flex: 0 0 auto; /* prevent flexbox from shrinking the label to 0 height */
  line-height: 1.2;
  max-width: min(180px, 70vw);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* keep the same look as homescreen labels */
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.context-menu-icon-clone .app-icon .app-name.folder-mini-app-name {
    max-width: 44px !important;
}

.context-menu-icon-clone .app-icon .icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ContextMenu clone: sizing is driven by data-folder-w/h rules above. */



.context-menu-icon-clone.visible .app-icon {
    transform: none; /* ensure no nested animation interferes */
}

@keyframes contextIconCloneBounce {
    0%   { transform: scale(1); }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1.1); }
}

@keyframes contextMenuBounce {
    0%   { transform: scale(1) translateY(0); }
    70%  { transform: scale(1.02) translateY(0); }
    100% { transform: scale(1) translateY(0); }
}

@keyframes contextMenuEditHomescreenBounce {
    0%   { transform: translateX(-50%) scale(1) translateY(0); }
    70%  { transform: translateX(-50%) scale(1.02) translateY(0); }
    100% { transform: translateX(-50%) scale(1) translateY(0); }
}
.context-menu-overlay.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

body.context-menu-open .search_icon,
body.context-menu-open .ai_assistant_icon,
body.context-menu-open .app_logo_icon {
    transform: translateX(-120px);
    opacity: 0;
    pointer-events: none;
}

body.context-menu-open .app_notifications_icon,
body.context-menu-open .notification-icon-wrapper {
    transform: translateX(120px);
    opacity: 0;
    pointer-events: none;
}

body.context-menu-open .page .page-title.clickable {
    opacity: 0 !important;
    pointer-events: none;
}

.context-menu {
    position: fixed;
    background: rgb(30 30 30 / 51%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 1px 0;
    min-width: 200px;
    max-width: 80%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    z-index: 46002; /* above im-messages-overlay-backdrop (45000); below global-header-overlay (50000) */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.9) translateY(10px);
    /* transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease; */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

body.light_mode .context-menu {
  background: rgba(255, 255, 255, 0.51);
}

/* When an app is open in try-mode (`.app_try_wrapper`), keep the context menu mounted but underneath the app. */
body:has(.app_try_wrapper) .context-menu-overlay {
    z-index: 998 !important;
}

body:has(.app_try_wrapper) .context-menu {
    z-index: 999 !important;
}

body:has(.app_try_wrapper) .context-menu-icon-clone {
    z-index: 999 !important;
}

body:has(.app_try_wrapper) .context-menu-edit-homescreen {
    z-index: 999 !important;
}

.context-menu.submenu-open {
    height: var(--context-menu-height);
    max-height: var(--context-menu-height);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.context-menu-submenu-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.context-menu.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1) translateY(0);
    animation: contextMenuBounce 0.18s ease-out 0.05s forwards;
    transform-origin: center center;
    will-change: transform;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 19px;
    cursor: pointer;
    transition: background 0.15s ease;
    color: #fff;
    font-size: 15px;
    border-bottom: 1px solid rgb(255 255 255 / 7%);
}

body.light_mode .context-menu-item {
  color: #000;
  border-bottom: 1px solid rgb(0 0 0 / 7%);
}

.context-menu-edit-homescreen .context-menu-item {
    border-radius: 15px;
}

.context-menu-item:last-child {
    border-bottom: none;
}

.context-menu-item:active {
    background: rgba(0, 0, 0, 0.1);
}

/* Swipe-to-select: highlight when finger slides over an item (iOS-style) */
.context-menu-item.touch-hover {
    background: rgba(255, 255, 255, 0.15);
}

body.light_mode .context-menu-item.touch-hover {
    background: rgba(0, 0, 0, 0.1);
}

.context-menu-item.touch-hover[data-action="delete"],
.context-menu-item.touch-hover[data-action="homescreen-delete"] {
    background: rgba(255, 59, 48, 0.2);
}

.context-menu-item.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.context-menu-item[data-action="delete"],
.context-menu-item[data-action="homescreen-delete"] {
    color: #ff3b30;
}

.context-menu-item[data-action="factory-delete-conversation"],
.context-menu-item[data-action="factory-delete-conversation-group"] {
    color: #ff3b30;
}

.context-menu-item svg {
    flex-shrink: 0;
    height: 20px;
    width: 20px;
}

.context-menu-item svg.install-as-position-icon {
    margin-top: -10px;
}

/* Context menu + homescreen reordering button */
.context-menu-item .folder-thumb-icon,
.reordering-icon-btn .folder-thumb-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.context-menu-app-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    object-fit: cover;
    display: block;
}

.context-menu-recent-avatar {
    width: 20px;
    height: 20px;
    object-fit: cover;
}

.context-menu-item .context-menu-recent-label {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Resize picker - inline size buttons for folders */
.context-menu-item.resize-picker {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 19px;
    gap: 2px;
    flex-direction: column;
    align-items: flex-start;
}

.context-menu-item.resize-picker .resize-label {
    font-size: 14px;
    color: #fff;
    line-height: 1.4;
}

.context-menu-item.resize-picker .resize-options {
    display: flex;
    gap: 6px;
}

.context-menu-item.resize-picker .size-btn {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.1s ease;
    padding: 4px;
}

.context-menu-item.resize-picker .size-btn:active {
    transform: scale(0.95);
    background: rgba(255, 255, 255, 0.2);
}

.context-menu-item.resize-picker .size-btn.active {
    background: rgba(59, 130, 246, 0.8);
}

.context-menu-item.resize-picker .size-btn svg {
    width: 20px;
    height: 20px;
    fill: #fff;
}

body.light_mode .context-menu-item.resize-picker .size-btn {
    background: rgba(0, 0, 0, 0.08);
}

body.light_mode .context-menu-item.resize-picker .size-btn.active {
    background: rgba(59, 130, 246, 0.8);
}

body.light_mode .context-menu-item.resize-picker .size-btn svg {
    fill: #333;
}

body.light_mode .context-menu-item.resize-picker .size-btn.active svg {
    fill: #fff;
}

.context-menu-version-badge {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    border-radius: 6px;
    flex: 0 0 20px;
}

body.light_mode .context-menu-version-badge {
    border: 1px solid rgba(0, 0, 0, 0.18);
    color: rgba(0, 0, 0, 0.85);
    background: rgba(0, 0, 0, 0.04);
}

.context-menu-edit-homescreen {
    position: fixed;
    left: 50%;
    background:rgb(30 30 30 / 51%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 12px;
    padding: 0;
    width: 100%;
    max-width: 280px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) scale(0.9) translateY(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.context-menu-edit-homescreen.visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1) translateY(0);
    animation: contextMenuEditHomescreenBounce 0.18s ease-out 0.05s forwards;
    transform-origin: center center;
    will-change: transform;
    background: rgb(30 30 30 / 51%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgb(30 30 30 / 0%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(20px);
    width: auto;
    border-radius: 15px;
    z-index: 46001;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {

    .context-menu-edit-homescreen {
        background: rgba(30, 30, 30, 0.95);
    }

    .context-menu-item:active {
        background: rgba(255, 255, 255, 0.15);
    }
}

/* Pulse animation for the selected app */
@keyframes contextPulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

.app-icon.context-active {
    animation: contextPulse 0.3s ease;
}

.app-icon.deleting {
    animation: delete-animation 0.3s ease-out forwards;
}

@keyframes delete-animation {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0);
        opacity: 0;
    }
}

/* Thanos snap grid breaking-apart animation */
.thanos-snap-grid {
    overflow: visible;
}

/* Fade out app-name when Thanos animation starts */
.app-icon.thanos-snapping .app-name {
    opacity: 0 !important;
    transition: opacity 0.2s ease-out !important;
    pointer-events: none !important;
}

.thanos-snap-tile {
    transition: none;
    filter: brightness(0.9) contrast(1.1);
}

.thanos-snap-grid.thanos-snap-active .thanos-snap-tile {
    animation: thanos-tile-break-apart 1.2s ease-out forwards;
    animation-delay: var(--delay, 0ms);
}

@keyframes thanos-tile-break-apart {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
        filter: brightness(1) blur(0px);
    }
    20% {
        opacity: 0.95;
        transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rz, 0deg)) scale(var(--scale, 1));
        filter: brightness(0.85) blur(0.5px);
    }
    40% {
        opacity: 0.8;
        transform: translate(calc(var(--tx, 0px) * 1.5), calc(var(--ty, 0px) * 1.5)) rotate(calc(var(--rz, 0deg) * 1.2)) scale(calc(var(--scale, 1) * 0.9));
        filter: brightness(0.7) blur(1px);
    }
    60% {
        opacity: 0.6;
        transform: translate(calc(var(--tx, 0px) * 2), calc(var(--ty, 0px) * 2.5)) rotate(calc(var(--rz, 0deg) * 1.5)) scale(calc(var(--scale, 1) * 0.8));
        filter: brightness(0.5) blur(1.5px);
    }
    80% {
        opacity: 0.3;
        transform: translate(calc(var(--tx, 0px) * 2.5), calc(var(--ty, 0px) * 3.5)) rotate(calc(var(--rz, 0deg) * 1.8)) scale(calc(var(--scale, 1) * 0.7));
        filter: brightness(0.3) blur(2px);
    }
    100% {
        opacity: 0;
        transform: translate(calc(var(--tx, 0px) * 3), calc(var(--ty, 0px) * 4.5)) rotate(calc(var(--rz, 0deg) * 2)) scale(calc(var(--scale, 1) * 0.6));
        filter: brightness(0.1) blur(3px);
    }
}

/* test only, i could put the css globla because it is used in other places */
#homescreen_details_drawer .feed_component {
    transform: translate(0, 0);
}

#homescreen_details_drawer .drawer {
    background-color: #000000e6 !important;
    backdrop-filter: blur(2px);
    overflow: visible;
    font-weight: 400;
}

/* Light mode override for App Details Drawer background */
body.light_mode #homescreen_details_drawer .drawer {
    background-color: #ffffff !important;
    backdrop-filter: blur(2px);
}

#homescreen_details_drawer .drawer-handle {
    padding: 0;
    height: 30px;
}

#homescreen_details_drawer .drawer-handle::after {
    display: none;
}

#homescreen_details_drawer .drawer-title {
    padding: 0;
}

.comments_button {
    font-size: 12px;
}

.rating-container {
    border-radius: 24px 24px 0 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    width: 100%;
    animation: fadeIn 0.5s ease-out;
}

.leaderboard-link-section {
    padding: 16px 20px;
    margin-bottom: 16px;
    padding-top: 5px!important;
}

.leaderboard-link-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.leaderboard-link-button:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
}

.leaderboard-link-button:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.08);
}

.leaderboard-link-button svg {
    flex-shrink: 0;
    opacity: 0.9;
}

body.light_mode .leaderboard-link-button {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
    color: #000;
}

body.light_mode .leaderboard-link-button:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Shine animation for newly installed apps */
.app-icon.shine .icon {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
}

.app-icon.shine .icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    animation: shimmer-sweep 1s ease-out;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
}

/* Disable shimmer overlay while an app is generating (rotating cube animation) */
.app-icon.is_generating.shine .icon::before {
    content: none;
    display: none;
}

@keyframes shimmer-sweep {
    0% {
        left: -100%;
        transform: skewX(-25deg);
    }
    100% {
        left: 100%;
        transform: skewX(-25deg);
    }
}

/* .stats-row {
    display: flex;
    justify-content: space-around;
    margin-bottom: 40px;
    gap: 20px;
} */

.stats-row {
    display: flex;
    margin-bottom: 27px;
    gap: 11px;
    overflow-x: auto;
    overflow-y: hidden;
    /* padding-bottom: 10px; */
    /* -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #ccc #f5f5f5; */
}

.stat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    flex: 1;
    padding: 8px 12px;
    flex-grow: 0;
    flex-shrink: 0;
    gap: 5px;
    color: #fff;
    background: #171717;
    border-radius: 11px;
    /* transition: transform 0.3s ease, opacity 0.3s ease; */
    cursor: pointer;
    border: 1px solid #3b3b3b3b;
}

.stat-icon {
    width: 24px;
    height: 24px;
    /* margin: 0 auto 8px; */
    display: block;
    transition: transform 0.3s ease;
}

.stat-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor;
}

.stat-icon svg path {
    fill: currentColor;
    stroke: currentColor;
}

.stat-item.stat-item-active[data-stat-key="likes"] {
    color: #ed4956;
}

.stat-item.stat-item-active[data-stat-key="saves"] {
    color: #fbbf24;
}

.stat-item.stat-item-active[data-stat-key="shares"] {
    color: #3b82f6;
}

.stat-item.stat-item-active[data-stat-key="installs"] {
    color: #10b981;
}

.stat-item.stat-item-active[data-stat-key="tries"] {
    color: #3b82f6;
}

.stat-count {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.stat-label {
    font-size: 14px;
    color: #ffffff;
    margin-top: 4px;
}

.rating-section {
    text-align: center;

}

.rating-title {
    font-size: 26px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rating-badge {
    color: white;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.rating-bars {
    display: flex;
    flex-direction: column;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.stars {
    display: flex;
    gap: 4px;
}

.star {
    color: #ffffffd6;
    font-size: 20px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.star.empty {
    color: #525252;
}

.rating-bar-container {
    flex: 1;
    height: 9px;
    background: #525252;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.rating-bar {
    height: 100%;
    background: #333;
    border-radius: 6px;
    width: 0%;
    transition: width 1s ease-out;
}

.rating-count {
    /* min-width: 40px; */
    text-align: right;
    font-weight: 600;
    color: #ffffff;
    font-size: 16px;
}

.average-rating {
    margin-top: 20px;
    color: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.average-number {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
}

.average-stars {
    display: flex;
    gap: 2px;
}

.average-stars .star-proportional {
    position: relative;
    display: inline-block;
    font-size: 24px;
    line-height: 1;
}

.average-stars .star-bg {
    color: #525252;
}

.average-stars .star-fill {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: #fbbf24;
    white-space: nowrap;
}

.rating-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.star-interactive {
    font-size: 32px;
    cursor: pointer;
    color: #525252;
    transition: color 0.15s ease, transform 0.15s ease;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.star-interactive:active {
    transform: scale(1.2);
}

.star-interactive.filled {
    color: #fbbf24;
}

.user-rating-label {
    font-size: 13px;
    color: #888;
    margin-left: 4px;
}

body.light_mode .star-interactive {
    color: #d1d5db;
}

body.light_mode .star-interactive.filled {
    color: #f59e0b;
}

body.light_mode .user-rating-label {
    color: #6b7280;
}

.stat-icon {
    width: 16px;
    height: 16px;
}

.stat-count {
    font-size: 16px;
}

.rating-title {
    font-size: 20px;
}

.app_feed_container {
    overscroll-behavior: initial !important;
}
#earn_icon {
    height: 100%;
    width: 100%;
}
.modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.modal_container {
    background-color: #1a1a1a;
    padding: 32px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 400px;
}

.modal_form {
    display: flex;
    flex-direction: column;
}

.modal_label {
    color: #e0e0e0;
    font-size: 18px;
    margin-bottom: 16px;
}

.modal_input {
    background-color: #2a2a2a;
    border: 1px solid #444;
    color: #e0e0e0;
    padding: 12px;
    font-size: 16px;
    border-radius: 4px;
    margin-bottom: 20px;
}

.modal_input:focus {
    outline: none;
    border-color: #666;
}

.modal_submit {
    background-color: #4a5568;
    color: #e0e0e0;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 4px;
    cursor: pointer;
}

.modal_submit:hover {
    background-color: #5a6578;
}

.modal_submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.name_modal_backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.name_modal {
    background: #000;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 40px 32px;
    width: 90%;
    max-width: 400px;
    text-align: center;
}

.name_modal_title {
    color: #fdfdfd;
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 35px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.name_modal_input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 16px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    margin-bottom: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.name_modal_input::placeholder {
    color: #888;
}

.name_modal_input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: #007AFF;
}

.name_modal_button {
    background: #007AFF;
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 12px 50px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 122, 255, 0.3);
    min-height: 44px;
    min-width: 140px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.name_modal_button:hover {
    background: #0056CC;
    transform: translateY(-2px);
}

.name_modal_button:active {
    transform: translateY(0);
}

.name_modal_button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.name_modal_error {
    color: #FF3B30;
    font-size: 0.9rem;
    margin-top: -10px;
    margin-bottom: 20px;
    min-height: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.name_modal_error.show {
    opacity: 1;
}
.app-iframe-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
}

.app-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #000;
}

.page.app-page {
    padding: 0;
    overflow: hidden;
}
.app-load-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.app-load-error p {
    margin: 10px 0;
    opacity: 0.7;
}





/* Homescreen Edit Mode Styles */
.homescreen-edit-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 99998;
    pointer-events: none;
    opacity: 0;
}

/* Ensure fixed-positioned children are non-interactive when overlay is hidden */
.homescreen-edit-overlay:not(.visible) .notifications-overlay,
.homescreen-edit-overlay:not(.visible) .notifications-clear-fab {
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Keep the global header icons visible above the homescreen manager overlay.
   The overlay and header icons both used z-index: 999, so DOM order could hide them. */
/* IMPORTANT: `Header` is rendered inside `.global-header-overlay` (z-index: 50000).
   The homescreen manager overlay uses z-index: 99999, so the overlay can cover the header.
   Raise the wrapper stacking context above the overlay when edit mode is visible. */
body:has(.homescreen-edit-overlay.visible) .global-header-overlay {
    z-index: 100000 !important;
}

body:has(.homescreen-edit-overlay.visible) header.absolute {
    z-index: 100000 !important;
}

body:has(.homescreen-edit-overlay.visible) header.initial-header {
    position: relative;
    z-index: 100000 !important;
}

body:has(.homescreen-edit-overlay.visible) .im-messages-overlay-backdrop {
    z-index: 99999 !important;
}

body:has(.homescreen-edit-overlay.visible) .ai-overlay-backdrop {
    z-index: 99999 !important;
}

body:has(.homescreen-edit-overlay.visible) #searchOverlay {
    z-index: 99999 !important;
}

body:has(.homescreen-edit-overlay.visible) .search_icon,
body:has(.homescreen-edit-overlay.visible) .ai_assistant_icon,
body:has(.homescreen-edit-overlay.visible) .app_logo_icon,
body:has(.homescreen-edit-overlay.visible) .app_notifications_icon {
    z-index: 1001 !important;
}

/* When manager is open over a running app, undo the opened_app hide animations */
body.opened_app:has(.homescreen-edit-overlay.visible) .search_icon,
body.opened_app:has(.homescreen-edit-overlay.visible) .ai_assistant_icon,
body.opened_app:has(.homescreen-edit-overlay.visible) .app_logo_icon,
body.opened_app:has(.homescreen-edit-overlay.visible) .app_notifications_icon {
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.opened_app:has(.homescreen-edit-overlay.visible) header.header-has-title {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* When BOTH the homescreen manager overlay and the notifications overlay are visible,
   ensure the header icons sit ABOVE the notifications overlay (which uses z-index: 44444). */
body:has(.homescreen-edit-overlay.visible):has(.notifications-overlay.visible) header.absolute {
    z-index: 100000 !important;
}

body:has(.homescreen-edit-overlay.visible):has(.notifications-overlay.visible) header.initial-header {
    position: relative;
    z-index: 100000 !important;
}

body:has(.homescreen-edit-overlay.visible):has(.notifications-overlay.visible) .search_icon,
body:has(.homescreen-edit-overlay.visible):has(.notifications-overlay.visible) .ai_assistant_icon,
body:has(.homescreen-edit-overlay.visible):has(.notifications-overlay.visible) .app_logo_icon,
body:has(.homescreen-edit-overlay.visible):has(.notifications-overlay.visible) .app_notifications_icon,
body:has(.homescreen-edit-overlay.visible):has(.notifications-overlay.visible) .global_header_title {
    z-index: 44446 !important;
}

.homescreen-edit-overlay.visible {
    pointer-events: auto;
    opacity: 1;
}

.os-home-layer.hs-manager-open {
    pointer-events: none !important;
}

/* Homescreen manager has a dark background — keep titles white in light mode */
body.light_mode .homescreen-edit-overlay .homescreen-name {
    color: rgb(255 255 255 / 62%);
}

body.light_mode .homescreen-edit-overlay .homescreen-item.active .homescreen-name {
    color: #ffffff;
}

/* When the Homescreen Manager overlay is visible, ensure ContextMenu renders above it. */
body:has(.homescreen-edit-overlay.visible) .context-menu-overlay {
    z-index: 100000 !important;
}

body:has(.homescreen-edit-overlay.visible) .context-menu {
    /* Menu should render ABOVE the pressed clone */
    z-index: 100002 !important;
}

body:has(.homescreen-edit-overlay.visible) .context-menu-icon-clone.visible {
    /* Clone should stay beneath the menu */
    z-index: 100001 !important;
}

body:has(.homescreen-edit-overlay.visible) .context-menu-edit-homescreen.visible {
    z-index: 100003 !important;
}

/* ShareHomescreenModal uses Drawer (default z-index ~9996); raise it above the edit overlay. */
body:has(.homescreen-edit-overlay.visible) .drawer-container#share_homescreen_drawer {
    z-index: 100010 !important;
}

.homescreen-edit-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: var(--safe-top) 0 var(--safe-bottom);
}

.homescreen-edit-header {
    flex-shrink: 0;
    padding: 20px;
    text-align: center;
}

.homescreen-edit-title {
    color: white;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.homescreen-edit-done {
    position: absolute;
    top: calc(var(--safe-top) + 20px);
    right: 20px;
    background: #007AFF;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.homescreen-edit-done:active {
    transform: scale(0.95);
}

.homescreen-carousel-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.homescreen-carousel {
    display: flex;
    gap: 30px;
    padding: 0 50px;
    height: 70%;
    transform: translate(var(--carousel-tx, 0px), var(--carousel-ty, 22px)) scale(var(--carousel-zoom, 1.97));
}

@keyframes carousel-zoom-out {
    from { transform: translate(var(--carousel-tx, 0px), var(--carousel-ty, 22px)) scale(var(--carousel-zoom, 1.97)); }
    to   { transform: none; }
}

@keyframes carousel-zoom-in {
    from { transform: none; }
    to   { transform: translate(var(--carousel-tx, 0px), var(--carousel-ty, 22px)) scale(var(--carousel-zoom, 1.97)); }
}

.homescreen-edit-overlay.visible:not(.closing) .homescreen-carousel {
    transform: none;
    animation: carousel-zoom-out 0.4s ease;
}

.homescreen-edit-overlay.visible.closing .homescreen-carousel {
    animation: carousel-zoom-in 0.4s ease forwards;
}

.homescreen-edit-overlay.visible.closing .homescreen-carousel .homescreen-item.active .homescreen-preview {
    outline-color: #000;
}

.homescreen-edit-overlay.visible.closing .homescreen-item.active .homescreen-actions {
    opacity: 0;
}

.homescreen-item {
    flex-shrink: 0;
    position: relative;
    width: 185px;
    opacity: 1;
    transform: scale(1) translateY(0px) !important;
    /* Force GPU acceleration for smoother rendering on mobile */
    will-change: transform;
    transform: translateZ(0);
}
/* Ensure the currently moved card stays above neighbors during swap */
.homescreen-item.moving {
    z-index: 100;
}

/* Inner wrapper for FLIP animations (keeps iframe DOM stable, animates translation) */
.homescreen-item .hs-item-inner .homescreen-name .homescreen-name-icon svg,
.homescreen-item .hs-item-inner .homescreen-name .homescreen-name-icon-wrap svg,
.homescreen-item .hs-item-inner .homescreen-name .app_factory_hs_name_icon svg,
.homescreen-item .hs-item-inner .homescreen-name .app_factory_hs_name_icon img {
    height: 13px;
    width: 13px;
}
.homescreen-item .hs-item-inner {
    will-change: transform;
    transition: transform 0.3s ease;
    /* 40px represents the height of the homescreen-actions */
    margin-bottom: 40px;
}

.homescreen-item:nth-child(1) { animation-delay: 0.1s; }
.homescreen-item:nth-child(2) { animation-delay: 0.2s; }
.homescreen-item:nth-child(3) { animation-delay: 0.3s; }
.homescreen-item:nth-child(4) { animation-delay: 0.4s; }

@keyframes homescreenItemAppear {
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.homescreen-name {
    color: rgb(255 255 255 / 62%);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 24px;
    padding: 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.homescreen-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.homescreen-name-icon-wrap,
.homescreen-name-icon {
    width: 20px;
    height: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.homescreen-name-icon-wrap {
    border-radius: 6px;
}

.app_factory_hs_name_icon {
    width: 20px;
    height: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.homescreen-name-icon svg {
    width: 13px;
    height: 13px;
    fill: currentColor;
}

.homescreen-name-icon-wrap svg,
.homescreen-name-icon-wrap img,
.app_factory_hs_name_icon svg,
.app_factory_hs_name_icon img {
    width: 13px;
    height: 13px;
}

.homescreen-name-icon-wrap img,
.app_factory_hs_name_icon img {
    object-fit: cover;
    display: block;
}

.homescreen-name-icon-wrap.is-notifications svg,
.homescreen-name-icon-wrap.is-notifications img {
    transform: translateY(2px);
}

.app_factory_hs_name_icon_emoji,
.app_factory_hs_name_icon_fallback {
    font-size: 13px;
    line-height: 13px;
}

.homescreen-name-icon:hover {
    opacity: 1;
}

.homescreen-preview {
    width: 100%;
    background: #1a1a1a;
    border-radius: 28px;
    position: relative;
    /*box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);*/
    /*border: 2px solid rgb(0 0 0 / 10%);*/
    outline: 1px solid rgb(255 255 255 / 15%);
    cursor: pointer;
    transition: transform 0.3s ease, opacity 0.3s ease;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.homescreen-preview::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background: linear-gradient(0deg, black, transparent);
    width: 100%;
    height: 80px;
    border-bottom-left-radius: 28px;
    border-bottom-right-radius: 28px;
    mask: linear-gradient(transparent, #000000, #000000);
    backdrop-filter: blur(3px);
}

/* Apply 9/19 aspect ratio only for chat and feed system pages */
.homescreen-preview.system-page-preview {
    aspect-ratio: 9/19;
}

@media (orientation: landscape) {
    .homescreen-edit-container {
        padding-top: 44px;
    }

    .homescreen-preview.system-page-preview {
        aspect-ratio: unset;
    }

    .homescreen-item .hs-item-inner {
        height: 100%;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }

    .homescreen-preview {
        flex: 1;
        min-height: 0;
        overflow: hidden;
        max-height: calc(100vh - 240px);
    }

    .homescreen-actions {
        position: static;
        padding-top: 6px;
    }

    .homescreen-carousel {
        align-items: stretch;
        padding-left: calc(50vw - 92.5px);
        padding-right: calc(50vw - 92.5px);
        scroll-padding-left: calc(50vw - 92.5px);
        scroll-padding-right: calc(50vw - 92.5px);
    }
}

.homescreen-preview .notification-message-body {
    font-size: 12px;
}

.homescreen-preview .app_page {
    padding-top: 0;
}

.homescreen-preview .app-grid {
    background: none;
    gap: 13px 8px;
}

/* .homescreen-preview .apps-page .app-grid {
    padding: 48px 20px 150px;
} */

.homescreen-preview .apps-page .app-grid {
    padding-top: 48px;
    width: 100%;
}

@media (orientation: landscape) {
    .homescreen-preview .apps-page .app-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* .homescreen-preview .app-grid .icon {
    width: 55px;
    height: 55px;
} */

.homescreen-preview .notifications-list {
    padding: 44px 42px 100px;
}

.homescreen-preview .conversations_view .list_header {
    display: none;
}

.homescreen-preview .conversations_view .conversations_content {
    padding: 44px 42px 23px;
}

/* Delete animation: zoom-out and fade */
.homescreen-preview.deleting {
    transform: scale(0.8);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}


.homescreen-preview-content {
    width: 100%;
    height: 100%;
    border-radius: 28px;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    overflow: hidden;
    /* padding: 8px 6px 10px; */
    padding: 0;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

/* Preview containers for different homescreen types */
.app-preview-container,
.apps-preview-container,
.feed-iframe-preview-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    isolation: isolate;
    /* Allow child blocker to receive gestures; iframe stays non-interactive */
    pointer-events: auto;
    touch-action: pan-x;
    /* GPU acceleration for smooth rendering */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.app-preview-container .preview-iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    pointer-events: none !important;
    touch-action: none !important;
    border-radius: 12px;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.app-preview-container iframe {
    pointer-events: none !important;
    touch-action: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Scaler elements for smooth GPU-accelerated scaling */
.app-preview-scaler,
.apps-preview-scaler,
.feed-iframe-preview-scaler {
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.preview-loading {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    pointer-events: none;
}

.preview-interaction-blocker {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    /* Intercept touches so iframes never receive them (Safari quirk) */
    pointer-events: auto !important;
    /* Allow horizontal pan to scroll the carousel */
    touch-action: pan-x !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    background: transparent;
}


.homescreen-preview .app_social_interaction {
    gap: 6px;
    right: 0;
}

.homescreen-preview .app_social_interaction.feed-preview-scale .interaction_item {
    width: 36px;
    height: 36px;
    font-size: 16px;
}

.homescreen-preview .app_social_interaction.feed-preview-scale .interaction_item svg {
    width: 18px;
    height: 18px;
}

.app_feed_overlay.feed-preview-scale {
    padding: 8px;
    pointer-events: none;
}

.homescreen-preview .app_feed_info_wrap.feed-preview-scale  {
    padding: 0;
}

.homescreen-preview .app_feed_info_wrap.feed-preview-scale .app_component {
    padding: 8px 10px;
    gap: 4px;
}

.homescreen-preview .app_feed_info_wrap.feed-preview-scale .app_component .left {
    gap: 4px;
}

.homescreen-preview .feed-preview-scale .icon_wrap {
    width: 35px;
    height: 35px;
    border-radius: 0;
    min-width: 35px;
}

.homescreen-preview .feed-preview-scale .icon_wrap img {
    width: 40px;
    height: 40px;
}


.homescreen-preview .feed-preview-scale .details .name .app-name{
    font-size: 12px;
}

.homescreen-preview .feed-preview-scale .details .stats_wrap,
.homescreen-preview .feed-preview-scale .details .creator {
    font-size: 8px;
    gap: 2px;
}

.homescreen-preview .feed-preview-scale .details .stats_wrap svg {
    width: 10px;
    height: 10px;
}

.homescreen-preview .feed-preview-scale .install_app {
    font-size: 8px;
    padding: 4px 9px;
    gap: 2px;
}

.homescreen-preview .feed-preview-scale .install_app svg {
    width: 10px;
    height: 10px;
}

.homescreen-preview .page {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.homescreen-preview .folder-mini-container {
    /* Folder thumbnails are rendered inside a scaled "phone preview".
       Keep the inner folder contents proportional to the reduced icon size. */
    gap: 4px;
    padding: 9px;
}

.app-icon[data-folder-h="1"] .folder-icon .folder-mini-container {
    padding: 7.5px;
}

.homescreen-preview .folder-mini-icon {
    border-radius: 4px;
    overflow: hidden;
}

.homescreen-preview .folder-mini-container svg {
    width: 24px !important;
    height: 24px !important;
    background: #000;
    opacity: 1;
    z-index: 2;
    padding: 6px;
    border-radius: 20px;
}

.homescreen-preview .folder-icon > svg {
    width: 24px;
    height: 24px;
    padding: 5px;
}

.homescreen-preview .folder-mini-icon img {
    border-radius: 6px;
}

/* Special styling for the "more apps" indicator */
.homescreen-preview .more-apps-indicator {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px dashed rgba(255, 255, 255, 0.25) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.homescreen-preview .more-apps-indicator span {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 20px !important;
    font-weight: 300 !important;
}

.homescreen-actions {
    position: absolute;
    bottom: -72px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 25px;
    opacity: 1;
    transition: opacity .3s ease;
    flex-direction: column;
}

.homescreen-action-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgb(76 76 76 / 63%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.homescreen-action-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.add-homescreen-btn {
    width: 100%;
    aspect-ratio: 9 / 19;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
    transform: scale(1);
    position: relative;
    overflow: hidden;
    border: none;
    background: rgb(0 0 0 / 15%);
}

.add-homescreen-btn::before {
    content: '';
    position: absolute;
    top: -84%;
    left: -37px;
    bottom: 100%;
    background: linear-gradient(90deg, #ffffff42, #00000000);
    z-index: 3;
    border-radius: 0;
    transform: rotate(44deg);
    pointer-events: none;
    width: 164%;
    height: 150%;
    border-top-left-radius: 15px;
}

.add-homescreen-btn svg {
    width: 50px;
    height: 50px;
    color: rgb(255 255 255 / 86%);
}

.homescreen-carousel {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 100%;
    display: flex;
    align-items: center;
    /* Allow horizontal panning to scroll even when touching children */
    touch-action: pan-x;
    top: -30px;
    position: relative;
}

@media (orientation: landscape) {
    body .homescreen-edit-overlay .homescreen-carousel {
        align-items: stretch;
    }
}

/* App Factory carousel: allow first/last card to reach true screen center */
.app_factory_hs_manager_carousel .homescreen-carousel {
    /*
        Cards are 185px wide. To let the right-most ("New app") card center in the viewport,
        we need leading/trailing space of (viewport/2 - card/2).
        Keep a minimum of 50px so narrow layouts don't feel too tight.
    */
    padding-left: max(50px, calc(50vw - 92.5px));
    padding-right: max(50px, calc(50vw - 92.5px));
    scroll-padding-left: max(50px, calc(50vw - 92.5px));
    scroll-padding-right: max(50px, calc(50vw - 92.5px));

    /* Ensure carousel positioning is stable in App Factory (avoid inheriting global top offsets) */
    top: 0;
    height: 70%;
}

/* App Factory carousel: stabilize phone sizing to avoid initial vertical jump */
.app_factory_hs_manager_carousel {
    --app_factory_phone_width: 185px;
    --app_factory_phone_height: calc(var(--app_factory_phone_width) * 844 / 390);
    --app_factory_name_row_height: 40px; /* 16px font + line-height + small padding */
    --app_factory_name_row_gap: 24px; /* matches .homescreen-name margin-bottom */
    --app_factory_teaser_block: 0px; /* teaser is visibility:hidden for New app, but still reserves space in appFactory.css */
}

.app_factory_hs_manager_carousel .homescreen-preview {
    min-height: var(--app_factory_phone_height);
}

/* Temporarily disable snapping during programmatic swaps */
.homescreen-carousel.no-snap {
    scroll-snap-type: none;
}

/* Temporarily disable smooth scrolling for instant positioning */
.homescreen-carousel.no-smooth-scroll {
    scroll-behavior: auto;
}

.homescreen-carousel::-webkit-scrollbar {
    display: none;
}

.homescreen-carousel.grabbing {
    cursor: grabbing;
}

.homescreen-item {
    scroll-snap-align: center;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.homescreen-item.highlighting {
    filter: brightness(2);
}

.homescreen-item.active .homescreen-preview {
    /*transform: scale(1.07);*/
    transform: scale3d(1.07, 1.07, 1);
    /*border-color: rgba(255, 255, 255, 0.3);*/
    /*border-color: #ffffff7d;*/
    /*border-color: transparent;*/
    outline-color: #ffffff38;
}

.homescreen-item.active .homescreen-name {
    color: #ffffff;
    font-weight: 500;
    transform: translateY(-7px);
}

.homescreen-item .homescreen-actions {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.homescreen-item.active .homescreen-actions {
    opacity: 1;
    pointer-events: auto;
}
.homescreen-item.active .add-homescreen-btn {
    border: 1px solid #ffffff14;
    background: rgba(255, 255, 255, 0.1);
}

/* App Factory: "New app" phone placeholder (mirrors other empty states like notifications/comments) */
.app_factory_hs_manager_carousel .homescreen-preview.app_factory_new_app_phone {
    background: transparent;
    border: none;
}

.app_factory_hs_manager_carousel .homescreen-preview.app_factory_new_app_phone .homescreen-preview-content {
    background: transparent;
}

.app_factory_hs_manager_carousel .homescreen-item.app_factory_new_app_card .homescreen-name {
    /* Hide title but keep its layout space to prevent initial row jump */
    visibility: hidden;
    pointer-events: none;
}

.app_factory_hs_manager_carousel .homescreen-item.app_factory_skeleton_card .homescreen-name {
    /* Hide skeleton title but keep its layout space to prevent initial row jump */
    visibility: hidden;
    pointer-events: none;
}

.app_factory_hs_manager_carousel .homescreen-item.app_factory_skeleton_card .app_factory_hs_latest_ai {
    opacity: 0;
    pointer-events: none;
}

/* App Factory carousel: border-cycling animation while an app is generating
   (use border-color + glow animation for broad browser compatibility) */
.app_factory_hs_manager_carousel .homescreen-preview.is_generating {
    border-color: rgba(120, 200, 255, 0.55);
    box-shadow: 0 0 0 1px rgba(120, 200, 255, 0.18), 0 0 16px rgba(120, 200, 255, 0.14);
    animation: app_factory_border_cycle 1.8s linear infinite;
}

@keyframes app_factory_border_cycle {
    0% {
        border-color: rgba(120, 200, 255, 0.55);
        box-shadow: 0 0 0 1px rgba(120, 200, 255, 0.18), 0 0 16px rgba(120, 200, 255, 0.14);
    }
    20% {
        border-color: rgba(190, 120, 255, 0.55);
        box-shadow: 0 0 0 1px rgba(190, 120, 255, 0.18), 0 0 16px rgba(190, 120, 255, 0.14);
    }
    40% {
        border-color: rgba(255, 120, 190, 0.55);
        box-shadow: 0 0 0 1px rgba(255, 120, 190, 0.18), 0 0 16px rgba(255, 120, 190, 0.14);
    }
    60% {
        border-color: rgba(255, 210, 120, 0.55);
        box-shadow: 0 0 0 1px rgba(255, 210, 120, 0.18), 0 0 16px rgba(255, 210, 120, 0.14);
    }
    80% {
        border-color: rgba(120, 255, 190, 0.55);
        box-shadow: 0 0 0 1px rgba(120, 255, 190, 0.18), 0 0 16px rgba(120, 255, 190, 0.14);
    }
    100% {
        border-color: rgba(120, 200, 255, 0.55);
        box-shadow: 0 0 0 1px rgba(120, 200, 255, 0.18), 0 0 16px rgba(120, 200, 255, 0.14);
    }
}

@media (prefers-reduced-motion: reduce) {
    .app_factory_hs_manager_carousel .homescreen-preview.is_generating {
        animation: none;
        box-shadow: none;
    }
}

.app_factory_hs_manager_carousel .app_factory_phone_skeleton {
    pointer-events: none;
    touch-action: pan-x;
}

.app_factory_hs_manager_carousel .app_factory_phone_skeleton_screen {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}

.app_factory_hs_manager_carousel .app_factory_new_app_preview {
    position: relative;
}

.app_factory_hs_manager_carousel .app_factory_new_app_placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 14px;
    text-align: center;
}

.app_factory_hs_manager_carousel .app_factory_new_app_placeholder_icon {
    width: 84px;
    height: 84px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.88);
    transition: opacity 120ms ease;
}

.app_factory_hs_manager_carousel .app_factory_new_app_placeholder_icon.is_transparent {
    opacity: 0;
}

.app_factory_hs_manager_carousel .app_factory_new_app_placeholder_icon svg {
    width: 34px;
    height: 34px;
    opacity: 0.95;
}

.app_factory_hs_manager_carousel .app_factory_new_app_placeholder_title {
    color: rgba(255, 255, 255, 0.92);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.app_factory_hs_manager_carousel .app_factory_new_app_placeholder_text {
    color: rgba(255, 255, 255, 0.70);
    font-size: 13px;
    font-weight: 500;
    line-height: 18px;
    max-width: 170px;
}

.homescreen-name-input {
    text-align: center;
    height: 27px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.homescreen-name-input:focus {
    outline: none;
    border-color: #007AFF !important;
}

/* Hide reorder buttons */
/* .reorder_icons {
    visibility: hidden !important;
} */

.pixel-grid {
    position: relative;
    width: 60px;
    height: 60px;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    overflow: hidden;
}


.pixel-tile {
    width: 8px;
    height: 8px;
    background-size: 60px 60px;
    background-repeat: no-repeat;
    animation: none;
    contain: layout style paint;
    transition: transform 0.4s ease-out, opacity 0.8s ease-out;
}


/* Burn animation */
@keyframes burn-tile {
    20% {
        transform: translate(var(--tx), -5px) scale(1) rotateZ(2deg);
        opacity: 1;
    }
    100% {
        transform: translate(var(--tx), -30px) scale(0.3) rotateZ(var(--rz));
        opacity: 0;
    }
}

.burning .pixel-tile {
    animation: burn-tile 0.4s ease-out forwards;
}

.apps-page {
    scroll-snap-type: y mandatory;
    background-color: var(--black-300);
}
/* .apps-page .app-grid,
.apps-page .feed-container-bottom {
    scroll-snap-align: start;
} */

.apps-page .feed-container-bottom {
    position: relative;
    height: 100vh;
}

.apps-page .app_feed_wrapper {
    position: absolute;
}

.apps-page {
    padding: 0;
}

.apps-page {
    padding: 0 !important;
}

.apps-page .app-grid {
    padding: calc(var(--safe-top) + 70px) 20px 160px;
}

@media (orientation: landscape) {
    .apps-page .app-grid {
        padding: calc(var(--safe-top, 0px) + 70px) 20px calc(var(--safe-bottom, 0px) + 70px) 20px;
    }
}

.app-iframe-wrapper {
    height: 100%;
    width: 100%;
    position: relative;
    /* Prevent iOS Safari tile eviction when page scrolls off-screen */
    transform: translateZ(0);
}

/* App try-mode overlay covers the app iframe until user taps to enter try mode */
.app-try-mode-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    cursor: pointer;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.1) 15%,
        transparent 30%,
        transparent 70%,
        rgba(0, 0, 0, 0.1) 85%,
        rgba(0, 0, 0, 0.25) 100%
    );
    /* Let horizontal swipes move the pages scroller */
    touch-action: pan-x;
}

@media (orientation: landscape) {
    .app-try-mode-overlay {
        width: calc(100% - var(--safe-left) - var(--safe-right)) !important;
    }
}

/* System app wrapper for direct component rendering */
.system-app-wrapper {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

/* Content wrapper for system apps with try-mode overlay */
.system-app-content {
    width: 100%;
    height: 100%;
    overflow: auto;
    position: relative;
    z-index: 1;
}

/* Ensure overlay appears above system app content */
.system-app-wrapper > .app-try-mode-overlay {
    z-index: 99999;
    pointer-events: auto;
}

.system-app-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--text-secondary);
    font-size: 14px;
}

/* Just shared glow animation for newly installed homescreen */
@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.7),
                    0 0 20px 5px rgba(0, 122, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(0, 122, 255, 0),
                    0 0 30px 10px rgba(0, 122, 255, 0.5);
    }
}

.homescreen-page.just-shared {
    animation: glow-pulse 2s ease-in-out;
    border-radius: 20px;
}

/* ==================== Share Homescreen Modal ==================== */

.share-homescreen-content {
    padding: 0 4px;
}

.share-homescreen-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
}

.share-homescreen-subtitle p {
    margin: 0;
}

.friends-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 120px;
}

.drawer-container#share_homescreen_drawer .drawer{
    background-color: #232323;
}

.drawer-container#share_homescreen_drawer .drawer-title {
    color: #fff;
}

.drawer-container#share_homescreen_drawer .drawer-footer {
    background-color: #2e2e2e;
}

.friend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgb(255 255 255 / 6%);
    border: 1px solid #ffffff12;
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.friend-item:active {
    background: rgba(255, 255, 255, 0.1);
}

.friend-item.selected {
    background: rgba(0, 122, 255, 0.2);
    border: 1px solid rgba(0, 122, 255, 0.5);
}

.friend-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5ABFF5 0%, #1fa0fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.friend-info {
    flex: 1;
}

.friend-name {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 2px;
}

.friend-username {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.friend-action {
    flex-shrink: 0;
}

.select-button {
    padding: 8px 16px;
    background: rgba(0, 122, 255, 0.2);
    color: #007AFF;
    border: 1px solid rgba(0, 122, 255, 0.3);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.select-button.selected {
    background: #007AFF;
    color: white;
    border-color: #007AFF;
}

.share-button {
    width: 100%;
    padding: 16px;
    background: #007AFF;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.share-button:disabled {
    background: rgba(0, 122, 255, 0.3);
    cursor: not-allowed;
}

.share-button:not(:disabled):active {
    background: #0051D5;
}

/* ==================== Share App Modal ==================== */

.share-app-content {
    padding: 0 4px;
}

.share-app-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
    text-align: center;
}

.share-app-subtitle p {
    margin: 0;
}

.share-external-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.share-external-actions {
    display: flex;
    gap: 12px;
}

.share-external-actions .share-external-button {
    flex: 1;
    width: auto;
}

.share-external-button {
    width: 100%;
    padding: 10px 10px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ffffff12;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.share-external-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.9);
}

.share-external-button__icon svg {
    width: 18px;
    height: 18px;
}

.share-external-button__label {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
}

.share-external-button:hover {
    background: rgba(255, 255, 255, 0.15);
}

.share-external-button:active {
    background: rgba(255, 255, 255, 0.2);
}

.drawer-container#share_app_drawer .drawer {
    padding: 12px;
    background: #000;
}

.drawer-container#share_app_drawer .drawer-handle {
    top: -12px;
}

.drawer-container#share_app_drawer .drawer-title {
    color: #fff;
    padding-bottom: 12px;
    margin-top: -12px;
}

.drawer-container#share_app_drawer .drawer-footer {
    background-color: #2e2e2e;
}

.drawer-container#share_app_drawer .share-external-actions {
    gap: 8px;
    flex-wrap: wrap;
}

.drawer-container#share_app_drawer .share-friend-bubbles {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 2px 2px 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge legacy */
}

.drawer-container#share_app_drawer .share-friend-bubbles::-webkit-scrollbar {
    display: none;
}

.drawer-container#share_app_drawer .share-friend-bubble {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    color: rgba(255, 255, 255, 0.95);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.drawer-container#share_app_drawer .share-friend-bubble:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.12);
}

.drawer-container#share_app_drawer .share-friend-bubble.is-sending {
    opacity: 0.6;
    cursor: not-allowed;
}

.drawer-container#share_app_drawer .share-friend-bubble.is-shared {
    border-color: rgba(0, 122, 255, 0.7);
    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.22);
}

.drawer-container#share_app_drawer .share-friend-bubble:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.drawer-container#share_app_drawer .share-friend-bubble__initial {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    line-height: 1;
    user-select: none;
}

.drawer-container#share_app_drawer .share-friend-bubble__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.drawer-container#share_app_drawer .share-friend-bubble__shared-badge {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: #007AFF;
    color: #fff;
    border: 2px solid #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.drawer-container#share_app_drawer .share-friend-bubble__shared-badge svg {
    width: 12px;
    height: 12px;
}

/* When share is triggered from a mini-app context menu, keep the share drawer above the running app overlay */

.drawer-container#share_app_drawer .share-friend-bubble--more {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.drawer-container#share_app_drawer .share-friend-bubble--more svg {
    width: 18px;
    height: 18px;
}

.drawer-container#share_app_drawer .share-external-button.is-active {
    background: rgba(0, 122, 255, 0.2);
    border: 1px solid rgba(0, 122, 255, 0.5);
}

.drawer-container#share_app_drawer .share-qr-preview {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.drawer-container#share_app_drawer .share-qr-preview__qr {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 15px;
    padding: 10px;
}

.drawer-container#share_app_drawer .share-qr-preview__qr svg {
    display: block;
    width: 220px;
    height: 220px;
    max-width: 100%;
    border-radius: 22px;
}

.drawer-container#share_app_drawer .share-qr-preview__error {
    color: rgba(255, 190, 190, 0.95);
    background: rgba(255, 0, 0, 0.12);
    border: 1px solid rgba(255, 0, 0, 0.22);
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    text-align: center;
}

.drawer-container#share_app_drawer .share-qr-preview__hint {
    color: rgba(255, 255, 255, 0.65);
    font-size: 12px;
    line-height: 1.35;
    text-align: center;
    max-width: 320px;
}

.drawer-container#share_app_drawer .share-qr-preview__steps {
    margin: 0;
    /* Force ordered list markers (some global resets remove them) */
    list-style: decimal;
    list-style-position: outside;
    padding-left: 18px;
    color: rgba(255, 255, 255, 0.70);
    font-size: 12px;
    line-height: 1.45;
    max-width: 320px;
    list-style: decimal;
}

.drawer-container#share_app_drawer .share-qr-preview__steps li {
    margin: 10px 0;
}

.drawer-container#share_app_drawer .qr-inline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 4px;
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    vertical-align: -3px;
    flex: 0 0 auto;
    -webkit-tap-highlight-color: transparent;
}

.drawer-container#share_app_drawer .qr-inline-btn svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* ---- Repost compose ---- */

.drawer-container#share_app_drawer .repost-compose {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drawer-container#share_app_drawer .repost-compose__textarea {
    width: 100%;
    min-height: 72px;
    max-height: 160px;
    resize: vertical;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 10px 12px;
    color: #fff;
    font-size: 14px;
    line-height: 1.45;
    font-family: inherit;
    outline: none;
    transition: border-color 0.15s ease;
    -webkit-appearance: none;
}

.drawer-container#share_app_drawer .repost-compose__textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

.drawer-container#share_app_drawer .repost-compose__textarea:focus {
    border-color: rgba(0, 122, 255, 0.5);
}

.drawer-container#share_app_drawer .repost-compose__video-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drawer-container#share_app_drawer .repost-compose__video-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 12px;
    border-radius: 12px;
    border: 1.5px dashed rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.drawer-container#share_app_drawer .repost-compose__video-btn:active {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.28);
}

.drawer-container#share_app_drawer .repost-compose__video-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
}

.drawer-container#share_app_drawer .repost-compose__video-preview {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 8px;
    overflow: hidden;
}

.drawer-container#share_app_drawer .repost-compose__video-thumb {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    background: #000;
    flex: 0 0 auto;
}

.drawer-container#share_app_drawer .repost-compose__video-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.drawer-container#share_app_drawer .repost-compose__video-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.drawer-container#share_app_drawer .repost-compose__video-remove:active {
    background: rgba(0, 0, 0, 0.8);
}

.no-friends {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 12px;
    color: #94a3b8;
}

.no-friends-icon {
    width: 42px;
    height: 42px;
    opacity: 0.6;
}

.no-friends-text {
    text-align: center;
    line-height: 1.4;
    margin: 0;
}

/* ==================== Homescreen Share Preview Modal ==================== */

.homescreen-share-preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / 57%);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    animation: fadeIn 0.2s ease-out;
}

.homescreen-share-preview-modal {
    background: #1c1c1e;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    animation: scaleIn 0.3s ease-out;
}

.homescreen-share-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.homescreen-share-preview-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.homescreen-share-preview-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;
}

.preview-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #007AFF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.preview-loading p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.preview-info {
    margin-bottom: 24px;
}

.preview-title {
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 1.4;
}

.preview-grid-container {
    margin-bottom: 24px;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    margin-bottom: 12px;
}

.preview-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.preview-app-item.locked {
    opacity: 0.8;
}

.preview-app-icon {
    position: relative;
    width: 60px;
    height: 60px;
}

.preview-app-icon img {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
}

.lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}

.preview-app-name {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60px;
}

.more-apps-indicator {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    padding: 8px;
}

.preview-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.summary-item.locked {
    color: rgba(255, 159, 10, 0.9);
}

.summary-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.homescreen-share-preview-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.install-button {
    width: 100%;
    padding: 14px;
    background: #007AFF;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.install-button:disabled {
    background: rgba(0, 122, 255, 0.3);
    cursor: not-allowed;
}

.install-button:not(:disabled):active {
    background: #0051D5;
}

.not-now-button {
    width: 100%;
    padding: 14px;
    background: transparent;
    color: #007AFF;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.not-now-button:not(:disabled):active {
    background: rgba(0, 122, 255, 0.1);
}

.not-now-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* ==================== Homescreen Sharing Styles ==================== */

/* Shared badge on homescreen preview in edit overlay */
.shared-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 122, 255, 0.9);
    color: white;
    padding: 2px 6px;
    border-radius: 12px;
    font-size: 9px;
    font-weight: 500;
    z-index: 10;
    backdrop-filter: blur(10px);
    pointer-events: none;
}

.shared-badge svg {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
}

/* Just shared glow animation for newly installed homescreen */
@keyframes glow-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 122, 255, 0.7),
                    0 0 20px 5px rgba(0, 122, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(0, 122, 255, 0),
                    0 0 30px 10px rgba(0, 122, 255, 0.5);
    }
}

.homescreen-page.just-shared {
    animation: glow-pulse 2s ease-in-out;
    border-radius: 20px;
}

/* ==================== Share Homescreen Modal ==================== */

.share-homescreen-content {
    padding: 0 4px;
}

.share-homescreen-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 16px;
}

.share-homescreen-subtitle p {
    margin: 0;
}

.friends-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.friend-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.friend-item:active {
    background: rgba(255, 255, 255, 0.1);
}

.friend-item.selected {
    background: rgba(0, 122, 255, 0.2);
    border: 1px solid rgba(0, 122, 255, 0.5);
}

.friend-info {
    flex: 1;
}

.friend-name {
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    margin-bottom: 2px;
}

.friend-username {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.friend-action {
    flex-shrink: 0;
}

.select-button {
    padding: 8px 16px;
    background: rgba(0, 122, 255, 0.2);
    color: #007AFF;
    border: 1px solid rgba(0, 122, 255, 0.3);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.select-button.selected {
    background: #007AFF;
    color: white;
    border-color: #007AFF;
}

.share-button {
    width: 100%;
    padding: 16px;
    background: #007AFF;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.share-button:disabled {
    background: rgba(0, 122, 255, 0.3);
    cursor: not-allowed;
}

.share-button:not(:disabled):active {
    background: #0051D5;
}

/* ==================== Homescreen Share Preview Modal ==================== */


.homescreen-share-preview-modal {
    background: #1c1c1e;
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    animation: scaleIn 0.3s ease-out;
}

.homescreen-share-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.homescreen-share-preview-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

.homescreen-share-preview-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;
}

.preview-loading .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top: 3px solid #007AFF;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.preview-loading p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

.preview-info {
    margin-bottom: 24px;
}

.preview-title {
    font-size: 16px;
    color: #fff;
    text-align: center;
    line-height: 1.4;
}

.preview-grid-container {
    margin-bottom: 24px;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    margin-bottom: 12px;
}

.preview-app-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.preview-app-item.locked {
    opacity: 0.8;
}

.preview-app-icon {
    position: relative;
    width: 60px;
    height: 60px;
}

.preview-app-icon img {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    object-fit: cover;
}

.lock-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
}

.price-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    background: #F44336;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70px;
}

.more-apps-indicator {
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 13px;
    padding: 8px;
}

.preview-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
}

.summary-item.locked {
    color: rgba(255, 159, 10, 0.9);
}

.summary-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.homescreen-share-preview-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.install-button {
    width: 100%;
    padding: 14px;
    background: #007AFF;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.install-button:disabled {
    background: rgba(0, 122, 255, 0.3);
    cursor: not-allowed;
}

.install-button:not(:disabled):active {
    background: #0051D5;
}

.not-now-button {
    width: 100%;
    padding: 14px;
    background: transparent;
    color: #007AFF;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.not-now-button:not(:disabled):active {
    background: rgba(0, 122, 255, 0.1);
}

.not-now-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}


.dragging-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.dragging-content .app-name {
    width: 100%;
}

.dragging-clone {
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}


.drawer-app-details .stats_wrap {
    display: none !important;
}

.related-apps-title {
    color: #fff;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 8px rgba(200, 200, 200, 0.15);
    letter-spacing: 0.3px;
    position: sticky;
    top: 15px;
    z-index: 86;
}

/* ===================================================================
   CarouselManager - Vertical column with horizontal scrolling rows
   =================================================================== */

.carousel-manager {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    background: #000;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-flow: column nowrap;
    scroll-snap-type: y mandatory;
    scroll-padding: 50% 0;
    gap: 5px;
}

.carousel-manager::before,
.carousel-manager::after {
    content: '';
    flex: 0 0 calc(50% - 60px);
}

.carousel-row {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
    scroll-snap-align: center;
    min-height: 120px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 100%;
}

.carousel-row-title {
    position: sticky; /* stay centered while row scrolls horizontally */
    left: 0;
    width: 100%;
    padding: 6px 0 0;
    margin: 0;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.65);
    text-transform: none;
    text-align: center;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

.carousel-row-inner {
    display: grid; /* keep same element; allows 2x2 folders layout without markup changes */
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    gap: 15px;
    padding: 12px 14px;
    width: max-content;
    margin: 0 12px;
    transition: 0.3s ease-in-out;
}

.carousel-row.selected .carousel-row-inner {
    padding: 20px 20px;
}
.carousel-item {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 11px;
    flex-shrink: 0;
    line-height: 16px;
    transition: 0.3s ease-in-out;
    transform: scale(0.9);
    border: 1px solid #ffffff38;
    border-radius: 20px;
    padding: 45px 19px;
    width: 120px;
    position: relative;
    overflow: hidden;
    background: #000;
    isolation: isolate; /* keep pseudo layers from affecting content compositing */
}
.carousel-row.selected .carousel-item {
    transform: scale(1);
}

/* Multi Carousel App Only View */

body.multi_carousel_app_only .carousel-item {
    padding: 0;
    width: 60px;
    border: none;
}

body.multi_carousel_app_only .carousel-row-inner {
    border: 1px solid #ffffff38;
    border-radius: 20px;
}

/* Folders Mode (extra pinch-out level) */
body.multi_carousel_folders_mode .carousel-manager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 18px;
    align-content: start; /* keep folders anchored where rows were */
    justify-items: center;
    padding: 0 18px; /* keep horizontal breathing room, no vertical jump */
    scroll-snap-type: none;
}

body.multi_carousel_folders_mode .carousel-manager::before,
body.multi_carousel_folders_mode .carousel-manager::after {
    display: block; /* keep same top/bottom spacing as normal mode */
    height: calc(50% - 60px);
    grid-column: 1 / -1;
}

body.multi_carousel_folders_mode .carousel-row {
    overflow: visible;
    min-height: 0;
    scroll-snap-align: unset;
}

/* Make each row a "folder": show only 4 items in a 2x2 grid */
body.multi_carousel_folders_mode .carousel-row-inner {
    display: inline-grid; /* shrink-wrap to 2x2 preview */
    grid-auto-flow: row;
    grid-auto-columns: initial;
    grid-auto-rows: 60px;
    grid-template-columns: repeat(2, 60px);
    gap: 10px;
    padding: 14px;
    margin: 0 auto;
    width: fit-content;
    border: 1px solid #ffffff38;
    border-radius: 20px;
}

body.multi_carousel_folders_mode .carousel-row-inner .carousel-item:nth-child(n+5) {
    display: none;
}

body.multi_carousel_folders_mode .carousel-item {
    padding: 0;
    width: 60px;
    transform: none;
    border: none;
}

body.multi_carousel_folders_mode .carousel-item-name {
    display: none;
}

body.multi_carousel_folders_mode .carousel-item-icon {
    width: 60px;
    height: 60px;
}

/* No per-item splash background in folder preview (keep crisp) */
body.multi_carousel_folders_mode .carousel-item::before,
body.multi_carousel_folders_mode .carousel-item::after {
    content: none;
}

body.multi_carousel_folders_mode .carousel-row-title {
    padding-top: 8px;
}

/* Mini "launch splash" effect using existing markup (no layout changes) */
.carousel-item::before {
    content: "";
    position: absolute;
    inset: -40px;
    width: calc(100% + 80px);
    height: calc(100% + 80px);
    background-image: var(--carousel_item_bg);
    background-size: cover;
    background-position: center;
    filter: blur(32px);
    transform: scale(1.12);
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 35%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.72) 70%, rgba(0,0,0,0.92) 100%),
        linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.75) 100%);
    pointer-events: none;
    z-index: 1;
}

.carousel-item-icon,
.carousel-item-name {
    position: relative;
    z-index: 2; /* never blur icon/text */
}

.carousel-item-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 18px 45px rgba(0,0,0,0.45),
        0 2px 0 rgba(255,255,255,0.10) inset;
}

.carousel-item-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-item-placeholder {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 750;
}

.carousel-item-name {
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.2px;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 10px 30px rgba(0,0,0,0.65);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Light mode styles */
body.light_mode .carousel-manager {
    background: #f5f5f5;
}

body.light_mode .carousel-item-icon {
    background: rgba(0, 0, 0, 0.05);
}

body.light_mode .carousel-item-placeholder {
    color: rgba(0, 0, 0, 0.4);
}

body.light_mode .carousel-item-name {
    color: rgba(0, 0, 0, 0.85);
}

body.light_mode .carousel-item::after {
    background:
        radial-gradient(circle at 50% 35%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0.82) 70%, rgba(255,255,255,0.92) 100%),
        linear-gradient(180deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.75) 100%);
}

/* ===================================================================
   CarouselManager Button & Modal
   =================================================================== */

   .homescreen-carousel-wrapper .carousel-manager-button {
    position: absolute;
    bottom: 50px;
    left: calc(50% + 125px + 12px); /* Center (50%) + half input width (125px) + gap (12px) */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 10;
    pointer-events: auto;
    display: none;
}

.homescreen-carousel-wrapper .grid-test-button {
    position: absolute;
    bottom: 50px;
    right: calc(50% + 125px + 12px); /* Center (50%) + half input width (125px) + gap (12px) */
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
    z-index: 10;
    pointer-events: auto;
    color: #007aff;
}

.homescreen-carousel-wrapper .carousel-manager-button:active {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(0.95);
}

.carousel-manager-button svg {
    color: rgba(255, 255, 255, 0.9);
}

.carousel-manager-modal {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 9999;
}

/* Light mode */
body.light_mode .homescreen-carousel-wrapper .carousel-manager-button {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light_mode .homescreen-carousel-wrapper .carousel-manager-button:active {
    background: rgba(0, 0, 0, 0.1);
}

body.light_mode .homescreen-carousel-wrapper .carousel-manager-button svg {
    color: rgba(0, 0, 0, 0.85);
}

body.light_mode .carousel-manager-modal {
    background: #f5f5f5;
}

/* Reordering mode (temporary; toggled via body.reordering) */
.reordering-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60000;
    padding: calc(var(--safe-top) + 10px) 12px 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.72);
    backdrop-filter: blur(12px);
}

body.light_mode .reordering-topbar {
    background: rgba(255, 255, 255, 0.82);
}

.reordering-done-btn {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
}

/* Icon-only buttons beside Done reordering */
.reordering-icon-btn {
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

body.light_mode .reordering-done-btn {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.06);
    color: #000;
}

body.light_mode .reordering-icon-btn {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.06);
    color: #000;
}

.reordering-done-btn:active {
    transform: scale(0.98);
    opacity: 0.95;
}

.reordering-icon-btn:active {
    transform: scale(0.98);
    opacity: 0.95;
}

/* Selected state (reorder-mode multi-select) */
body.reordering .app-icon.selected .icon {
    outline: 2px solid rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
}

body.light_mode.reordering .app-icon.selected .icon {
    outline-color: rgba(0, 0, 0, 0.7);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE – Homescreen
   White background, dark readable text, folders, page indicators, overlays.
   Dock is intentionally excluded (always dark).
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- Backgrounds --- */
body.light_mode .page {
    background: rgba(255, 255, 255, 0.5);
}

body.light_mode .app-grid {
    background-color: transparent;
}

/* --- App icon text --- */
body.light_mode .app-icon .app-name {
    color: #1c1c1e;
    text-shadow: none;
}

body.light_mode .app-icon .app-name.folder-name {
    color: #1c1c1e;
}

body.light_mode .app-icon .app-progress-message {
    color: rgba(0, 0, 0, 0.55);
    text-shadow: none;
}

body.light_mode .app-icon .app-progress-bar {
    background: rgba(0, 0, 0, 0.08);
}

/* --- Icon shadow (non-dock) --- */
body.light_mode .page .icon {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    background: #e5e5ea;
}

/* System app glass icons */
body.light_mode .page .app-icon.system_app .icon,
body.light_mode .page .search-result-item.system_app .icon {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.08);
}

/* --- Page title (already white — keep it, wallpaper may be dark) --- */
/* body.light_mode .page .page-title is set above to white + shadow — kept as-is */

body.light_mode .page .page-title .text-label {
    background: #1c1c1e;
    color: #fff;
}

/* --- Page indicators --- */
body.light_mode .page-indicator {
    background: rgba(0, 0, 0, 0.25);
}

body.light_mode .page-indicator.active {
    background: #1c1c1e;
}

body.light_mode .page-indicator.is-favorite {
    color: rgba(0, 0, 0, 0.4);
    background: none;
}

body.light_mode .page-indicator.is-favorite.active {
    color: #1c1c1e;
}

/* --- Dock: DO NOT CHANGE (always dark) --- */
/* Dock overrides already exist above — intentionally no rules here. */

/* --- Folder mini-container (closed preview on homescreen) --- */
body.light_mode .page .folder-mini-container {
    border-color: rgba(0, 0, 0, 0.10);
}

body.light_mode .page .folder-mini-icon.placeholder {
    background: rgba(0, 0, 0, 0.06);
    color: #3c3c43;
}

body.light_mode .page .folder-mini-cell.system_app .folder-mini-icon {
    background: rgba(0, 0, 0, 0.06);
}

/* --- Folder modal (opened folder) --- */
body.light_mode #folderModal {
    background: rgba(255, 255, 255, 0.7);
}

body.light_mode #folderModal .folder-content {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(30px);
}

body.light_mode #folderModal.visible .folder-content {
    border-color: rgba(0, 0, 0, 0.08);
}

body.light_mode #folderModal .folder-title {
    color: #1c1c1e;
    text-shadow: none;
}

body.light_mode #folderModal .folder-title-input {
    background: rgba(0, 0, 0, 0.06);
    color: #1c1c1e;
    text-shadow: none;
}

body.light_mode #folderModal .folder-title-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

/* Folder modal app names */
body.light_mode #folderModal .app-icon .app-name {
    color: #1c1c1e;
    text-shadow: none;
}

/* --- Empty slot press preview --- */
body.light_mode .empty-app-press-preview {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.15);
}

/* --- Grid slot drag-over --- */
body.light_mode .grid-slot.drag-over {
    background: rgba(0, 0, 0, 0.06);
}

/* --- Delete badge --- */
body.light_mode .delete-badge,
body.light_mode button.delete-badge {
    border-color: rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.7);
}

/* --- Lock badge --- */
body.light_mode .app-icon .lock-badge {
    background: rgba(255, 255, 255, 0.85);
}

body.light_mode .app-icon .lock-badge svg {
    color: #1c1c1e;
}

/* --- Notification badge --- */
body.light_mode .page .app-icon > .notif-badge {
    border-color: #ffffff;
}

/* --- Dragging clone text --- */
body.light_mode .dragging-clone .dragging-title {
    color: #1c1c1e;
    text-shadow: none;
}

/* --- Icon fallback (broken / missing image) --- */
body.light_mode .icon.fallback-letter {
    background: #d1d1d6 !important;
    color: #3c3c43;
}

body.light_mode .page .icon:not(:has(img)) {
    background: #e5e5ea !important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE – App Details Drawer
   White background, dark readable text for all drawer content elements.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* --- Drawer handle indicator --- */
body.light_mode #homescreen_details_drawer .drawer-handle-indicator,
body.light_mode .transform-drawer .drawer-handle-indicator {
    background-color: rgba(0, 0, 0, 0.2);
}

/* --- Rating section (scoped to drawer) --- */
body.light_mode #homescreen_details_drawer .rating-title,
body.light_mode #homescreen_details_drawer .rating-badge,
body.light_mode #homescreen_details_drawer .average-rating,
body.light_mode #homescreen_details_drawer .average-number,
body.light_mode #homescreen_details_drawer .rating-count {
    color: #1c1c1e !important;
}

body.light_mode #homescreen_details_drawer .star {
    color: rgba(0, 0, 0, 0.4) !important;
}

body.light_mode #homescreen_details_drawer .star.empty {
    color: #d1d5db !important;
}

body.light_mode #homescreen_details_drawer .average-stars .star-bg {
    color: #d1d5db !important;
}

body.light_mode #homescreen_details_drawer .rating-bar-container {
    background: rgba(0, 0, 0, 0.1) !important;
}

body.light_mode #homescreen_details_drawer .rating-bar {
    background: rgba(0, 0, 0, 0.3) !important;
}

/* --- Stats row (scoped to drawer) --- */
body.light_mode #homescreen_details_drawer .stat-item {
    color: #1c1c1e !important;
    background: rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.light_mode #homescreen_details_drawer .stat-count,
body.light_mode #homescreen_details_drawer .stat-label {
    color: #1c1c1e !important;
}

body.light_mode #homescreen_details_drawer .stat-label {
    color: rgba(0, 0, 0, 0.6) !important;
}

/* Active stat colors remain the same (they override the base color) */

/* --- Related apps title (scoped to drawer) --- */
body.light_mode #homescreen_details_drawer .related-apps-title {
    color: #1c1c1e !important;
    text-shadow: none !important;
}

/* --- Rating container background --- */
body.light_mode #homescreen_details_drawer .rating-container {
    background: transparent !important;
}

/* --- Drawer content general text --- */
body.light_mode #homescreen_details_drawer .drawer-content {
    color: #1c1c1e !important;
}

/* ── Rename App Bottom Sheet ─────────────────────────────────── */

.rename-app-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.rename-app-sheet {
    width: 100%;
    max-width: 400px;
    background: #1c1c1e;
    border-radius: 16px 16px 0 0;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: rename-sheet-slide-up 0.2s ease-out;
}

@keyframes rename-sheet-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.rename-app-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.rename-app-sheet-title {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}

.rename-app-sheet-close {
    background: none;
    border: none;
    color: #999;
    font-size: 24px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.rename-app-sheet-input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font-size: 16px;
    color: #fff;
    background: #2c2c2e;
    border: 1px solid #3a3a3c;
    border-radius: 10px;
    outline: none;
    -webkit-appearance: none;
}

.rename-app-sheet-input:focus {
    border-color: #0a84ff;
}

.rename-app-sheet-hint {
    font-size: 12px;
    color: #8e8e93;
    margin-top: 6px;
    text-align: right;
}

.rename-app-sheet-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.rename-app-sheet-btn {
    flex: 1;
    padding: 12px 0;
    font-size: 15px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
}

.rename-app-sheet-btn--reset {
    background: #2c2c2e;
    color: #8e8e93;
}

.rename-app-sheet-btn--reset:active {
    background: #3a3a3c;
}

.rename-app-sheet-btn--save {
    background: #0a84ff;
    color: #fff;
}

.rename-app-sheet-btn--save:active {
    background: #0070e0;
}

/* Light mode */
body.light_mode .rename-app-sheet {
    background: #f2f2f7;
}

body.light_mode .rename-app-sheet-title {
    color: #1c1c1e;
}

body.light_mode .rename-app-sheet-input {
    background: #fff;
    color: #1c1c1e;
    border-color: #d1d1d6;
}

body.light_mode .rename-app-sheet-input:focus {
    border-color: #007aff;
}

body.light_mode .rename-app-sheet-btn--reset {
    background: #e5e5ea;
    color: #8e8e93;
}

body.light_mode .rename-app-sheet-btn--save {
    background: #007aff;
}
.promoteDrawer {
  padding: 16px;
  color: var(--text-color, #e5e7eb);
}

/* Force this specific drawer + footer to solid black */
.drawer-container.promoteDrawerContainer .drawer {
  background: #000;
}

.drawer-container.promoteDrawerContainer .drawer-footer {
  background: #000;
  box-shadow: 0px 0 27px 3px rgba(0, 0, 0, 0.35);
}

.drawer-container.promoteDrawerContainer .drawer-content {
  padding-bottom: 50px;
}

.promoteDrawer-section {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
}

body.light_mode .promoteDrawer-section {
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.promoteDrawer-labelRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.promoteDrawer-label {
  font-size: 14px;
  font-weight: 700;
  color: #f3f4f6;
}

body.light_mode .promoteDrawer-label {
  color: #111827;
}

.promoteDrawer-hint {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

body.light_mode .promoteDrawer-hint {
  color: rgba(17, 24, 39, 0.6);
}

.promoteDrawer-budgetRow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.promoteDrawer-currency {
  font-size: 18px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

body.light_mode .promoteDrawer-currency {
  color: rgba(17, 24, 39, 0.85);
}

.promoteDrawer-budgetInput {
  width: 100%;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(0, 0, 0, 0.25);
  padding: 0 12px;
  font-size: 16px;
  color: #f9fafb;
}

body.light_mode .promoteDrawer-budgetInput {
  background: rgba(255, 255, 255, 0.7);
  color: #111827;
  border: 1px solid rgba(0, 0, 0, 0.10);
}

.promoteDrawer-budgetInput:active {
  border-color: rgba(59, 130, 246, 0.7);
}

.promoteDrawer-error {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.12);
  color: #fecaca;
  font-size: 13px;
}

body.light_mode .promoteDrawer-error {
  color: #991b1b;
}

.promoteDrawer-periodRow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.promoteDrawer-periodBtn {
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  font-weight: 600;
}

body.light_mode .promoteDrawer-periodBtn {
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(17, 24, 39, 0.9);
}

.promoteDrawer-periodBtn:active {
  transform: scale(0.99);
}

.promoteDrawer-periodBtn.active {
  border-color: rgba(59, 130, 246, 0.75);
  background: rgba(59, 130, 246, 0.18);
}

.promoteDrawer-checkboxRow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.85);
}

body.light_mode .promoteDrawer-checkboxRow {
  color: rgba(17, 24, 39, 0.85);
}

.promoteDrawer-checkboxLabel {
  margin-top: 1px;
}

.promoteDrawer-estimateGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}

.promoteDrawer-estimateItem {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 10px;
  background: rgba(0, 0, 0, 0.18);
}

body.light_mode .promoteDrawer-estimateItem {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.55);
}

.promoteDrawer-estimateValue {
  font-size: 18px;
  font-weight: 800;
  color: #f9fafb;
}

body.light_mode .promoteDrawer-estimateValue {
  color: #111827;
}

.promoteDrawer-estimateLabel {
  margin-top: 2px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.65);
}

body.light_mode .promoteDrawer-estimateLabel {
  color: rgba(17, 24, 39, 0.6);
}

.promoteDrawer-estimateNote {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

body.light_mode .promoteDrawer-estimateNote {
  color: rgba(17, 24, 39, 0.6);
}

.promoteDrawer-footer {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.promoteDrawer-primaryBtn {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(59, 130, 246, 0.55);
  background: rgba(59, 130, 246, 0.22);
  color: #eff6ff;
  font-size: 16px;
  font-weight: 800;
}

.promoteDrawer-primaryBtn:active {
  transform: scale(0.99);
}

.promoteDrawer-primaryBtn.disabled {
  opacity: 0.5;
}

.promoteDrawer-secondaryBtn {
  width: 100%;
  height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.14);
  color: rgba(254, 226, 226, 0.95);
  font-size: 16px;
  font-weight: 800;
}

body.light_mode .promoteDrawer-secondaryBtn {
  color: rgba(127, 29, 29, 0.95);
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.30);
}

.promoteDrawer-secondaryBtn:active {
  transform: scale(0.99);
}

.promoteDrawer-secondaryBtn.disabled {
  opacity: 0.5;
}

.promoteDrawer-statusSection {
  padding: 14px;
}

.promoteDrawer-statusHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.promoteDrawer-statusTitle {
  font-size: 14px;
  font-weight: 800;
  color: #f3f4f6;
}

body.light_mode .promoteDrawer-statusTitle {
  color: #111827;
}

.promoteDrawer-statusPill {
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.85);
  text-transform: capitalize;
}

body.light_mode .promoteDrawer-statusPill {
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: rgba(0, 0, 0, 0.03);
  color: rgba(17, 24, 39, 0.85);
}

.promoteDrawer-statusPill[data-status="active"] {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.16);
}

.promoteDrawer-statusPill[data-status="paused"] {
  border-color: rgba(245, 158, 11, 0.35);
  background: rgba(245, 158, 11, 0.14);
}

.promoteDrawer-statusPill[data-status="exhausted"] {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.12);
}

.promoteDrawer-statusLoading {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}

body.light_mode .promoteDrawer-statusLoading {
  color: rgba(17, 24, 39, 0.6);
}

.promoteDrawer-kvGrid {
  display: grid;
  gap: 10px;
}

.promoteDrawer-kvRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.18);
}

body.light_mode .promoteDrawer-kvRow {
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.55);
}

.promoteDrawer-k {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
}

body.light_mode .promoteDrawer-k {
  color: rgba(17, 24, 39, 0.6);
}

.promoteDrawer-v {
  font-size: 14px;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.92);
}

body.light_mode .promoteDrawer-v {
  color: rgba(17, 24, 39, 0.92);
}

.promoteDrawer-statusNote {
  margin-top: 12px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

body.light_mode .promoteDrawer-statusNote {
  color: rgba(17, 24, 39, 0.6);
}

.promoteDrawer-footerNote {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

body.light_mode .promoteDrawer-footerNote {
  color: rgba(17, 24, 39, 0.6);
}


/* FolderModal styles extracted from homepages.css
   Scoped under #folderModal so the modal can be reused outside Home without importing all homepages.css
   Mobile-only: use :active (no :hover) */

#folderModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    z-index: 1001;
    backdrop-filter: blur(5px);
    transition: opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    /* GPU acceleration for modal backdrop */
    will-change: opacity;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

#folderModal.visible {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease;
    visibility: visible;
    z-index: 9997; /* Above drawers (9996), below ContextMenu (9998+). Must be explicit because Portal renders at body level. */
}

/* When restoring from a suspended-under-app state, avoid a visible "fade in" pop. */
#folderModal.visible.folder-modal-instant {
    transition: none !important;
}

/* Also disable the "opening" scale animation when restoring instantly. */
#folderModal.folder-modal-instant .folder-content {
    transition: none !important;
    transform: translate3d(-50%, -50%, 0) scale(1) !important;
}

/* Slide transition for nested folder navigation */
@keyframes folder-slide-in-right {
    from { opacity: 0; transform: translateX(30%); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes folder-slide-in-left {
    from { opacity: 0; transform: translateX(-30%); }
    to   { opacity: 1; transform: translateX(0); }
}

.folder-grid.folder-grid-slide-forward {
    animation: folder-slide-in-right 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}
.folder-grid.folder-grid-slide-back {
    animation: folder-slide-in-left 0.25s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

#folderModal .folder-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scale(0.9);
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(20px);
    border-radius: 43px;
    padding: 20px;
    width: 340px;
    max-width: 340px;
    /* max-height: 68vh; */
    height: 68vh;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: center;
    display: flex;
    flex-direction: column;
    /* GPU acceleration hints */
    will-change: transform, width, height, border-radius;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-radius 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                padding 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

#folderModal.visible .folder-content {
    transform: translate3d(-50%, -50%, 0) scale(1);
    border: 1px solid #ffffff0d;
}

#folderModal.visible .folder-content.folder-content-fullscreen {
    border: none;
}

#folderModal .folder-title-wrapper {
    margin-bottom: 18px;
    position: relative;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#folderModal .folder-content-fullscreen .folder-title-wrapper {
    margin-bottom: 26px;
    font-size: 16px;
}

#folderModal .folder-title {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    max-width: 190px;
    color: white;
    font-size: 18px;
    padding: 2px 0 8px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* #folderModal .folder-content.folder-content-fullscreen .folder-title {
    padding: 14px 0;
} */

#folderModal .folder-title-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.98);
}

#folderModal .folder-title-edit {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    max-width: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#folderModal .folder-title-edit-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateX(-50%) scale(0.98);
}

#folderModal .folder-title-input {
    background: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: 16px;
    color: white;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    padding: 2px 40px 8px 40px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

#folderModal .folder-title-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

#folderModal .folder-title-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    font-weight: 300;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}

#folderModal .folder-title-clear:active {
    background: rgba(255, 255, 255, 0.3);
}

#folderModal .folder-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 17px 15px;
    width: 100%;
    box-sizing: border-box;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Virtualized folder grid - items are absolutely positioned */
#folderModal .folder-grid--virtualized {
    display: block;
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
}

#folderModal .folder-grid-inner {
    position: relative;
    width: 100%;
}

#folderModal .folder-grid-item {
    position: absolute;
    will-change: transform;
}

/* Ensure grid-slot inside virtualized items doesn't fight positioning */
#folderModal .folder-grid--virtualized .grid-slot {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Tile styles scoped to folder modal */
#folderModal .grid-slot {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    will-change: transform;
}

#folderModal .app-icon {
    padding: 0;
    width: 58px;
    height: 81px;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

#folderModal .icon {
    width: 60px;
    height: 60px;
    max-width: 100%;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    position: relative;
    background: #333;
    transition: transform .1s cubic-bezier(0.64, 0, 0.78, 0), box-shadow 0.4s ease-in-out;
    /* margin: 0 auto 5px; */
    box-sizing: border-box;
}

#folderModal .icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20%;
}

#folderModal .app-name {
    width: 100%;
    padding: 0 2px;
    /* margin-top: 1px; */
    box-sizing: border-box;
    text-align: center;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    max-width: 66px;
    overflow: hidden;
    white-space: nowrap;
    font-weight: 500;
    padding: 0;
}

#folderModal .folder-content.folder-content-fullscreen .folder-fullscreen-btn {
    top: calc(var(--safe-top) + 14px);
}

/* Fullscreen toggle button */
#folderModal .folder-fullscreen-btn {
    position: absolute;
    top: 22px;
    right: 14px;
    border: none;
    border-radius: 14px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, top 0.2s ease;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
}



#folderModal .folder-fullscreen-btn:active {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0.95);
}

#folderModal .folder-fullscreen-btn svg {
    display: block;
    pointer-events: none;
}

/* Fullscreen mode - grid overlaps the homescreen app-grid pixel-perfectly.
   20px horizontal padding matches .apps-page .app-grid { padding: ... 20px ... 20px }.
   The folder-grid then measures the same inner width (viewport - 40px) as the
   homescreen grid, so TanStack slot widths (gridWidth / 4) align exactly. */
#folderModal .folder-content.folder-content-fullscreen {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
    padding: calc(var(--safe-top) + 10px) calc(20px + var(--safe-right)) 20px calc(20px + var(--safe-left)); /* +10px = 10 + title(34) + title-margin(26) = 70px, matching .apps-page .app-grid padding-top */
    background: rgba(0,0,0,1);
}

#folderModal .folder-content-fullscreen .folder-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px 0;          /* matches .app-grid gap: 15px 0 */
    max-width: 400px;     /* matches .app-grid max-width */
    margin: 0 auto;
}

/* In fullscreen, app-icon fills the full slot width (like homescreen grid-slot).
   height: auto lets the content dictate height so the flex parent can center it
   correctly — same as the homescreen where .app-icon has no explicit height. */
#folderModal .folder-content-fullscreen .app-icon {
    width: 100%;
    height: auto;
    padding: 5px;
    aspect-ratio: unset;
}

/* Match homescreen icon size (main.css defines .icon at 62×62px). */
#folderModal .folder-content-fullscreen .icon {
    width: 62px;
    height: 62px;
    max-width: unset;
}

#folderModal .folder-content-fullscreen .app-name {
    font-size: 11.2px;
}

/* Skeleton loading styles for progressive folder hydration */
@keyframes folder-skeleton-shimmer {
    0% {
        opacity: 0.4;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 0.4;
    }
}

#folderModal .folder-skeleton {
    pointer-events: none;
}

#folderModal .folder-skeleton .app-icon {
    cursor: default;
}

#folderModal .folder-skeleton .icon {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
    animation: folder-skeleton-shimmer 1.5s ease-in-out infinite;
}

#folderModal .folder-skeleton .icon img {
    display: none;
}

#folderModal .folder-skeleton .fallback-letter {
    display: none;
}

#folderModal .folder-skeleton .app-name {
    visibility: hidden;
}

/* Disable hover/active states on skeleton items */
#folderModal .folder-skeleton .icon:active {
    transform: none;
}

/* Light mode support */
body.light_mode #folderModal {
    background: rgba(0,0,0,0.4);
}

body.light_mode #folderModal .folder-content {
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(20px);
}

body.light_mode #folderModal.visible .folder-content {
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light_mode #folderModal .folder-title {
    color: #111827;
    text-shadow: none;
}

body.light_mode #folderModal .folder-title-input {
    background: rgba(0, 0, 0, 0.05);
    color: #111827;
    text-shadow: none;
}

body.light_mode #folderModal .folder-title-input::placeholder {
    color: rgba(0, 0, 0, 0.5);
}

body.light_mode #folderModal .folder-title-clear {
    background: rgba(0, 0, 0, 0.1);
    color: #111827;
}

body.light_mode #folderModal .folder-title-clear:active {
    background: rgba(0, 0, 0, 0.15);
}

body.light_mode #folderModal .icon {
    color: #111827;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    background: #f3f4f6;
}

body.light_mode #folderModal .app-name {
    color: #111827;
    text-shadow: none;
}

body.light_mode #folderModal .folder-fullscreen-btn {
    color: #111827;
}

body.light_mode #folderModal .folder-fullscreen-btn:active {
    background: rgba(0, 0, 0, 0.1);
}

body.light_mode #folderModal .folder-content.folder-content-fullscreen {
    background: rgba(255,255,255,1);
}

body.light_mode #folderModal .folder-skeleton .icon {
    background: rgba(0, 0, 0, 0.05);
}

/* Hide dock, page indicators, and header icons when folder modal is open,
   mirroring the same behaviour as body.opened_app when an app opens. */
body.folder-modal-open .dock,
body.folder-modal-open #dock {
    transform: translate(-50%, 116px);
    opacity: 0;
}

@media (orientation: landscape) {
    body.folder-modal-open .dock,
    body.folder-modal-open #dock {
        transform: translateY(-50%) translateX(-116px);
    }
}

body.folder-modal-open .page-indicators,
body.folder-modal-open #pageIndicators {
    transform: translateX(-50%) translateY(40px);
    opacity: 0;
}

@media (orientation: landscape) {
    body.folder-modal-open .page-indicators,
    body.folder-modal-open #pageIndicators {
        transform: translateY(-50%) translateX(40px);
    }
}

body.folder-modal-open .search_icon,
body.folder-modal-open .ai_assistant_icon,
body.folder-modal-open .app_logo_icon {
    transform: translateX(-120px);
    opacity: 0;
}

body.folder-modal-open .app_notifications_icon,
body.folder-modal-open .notification-icon-wrapper {
    transform: translateX(120px);
    opacity: 0;
}

body.folder-modal-open .page .page-title.clickable {
    opacity: 0 !important;
    pointer-events: none;
}

#folderModal .folder-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: inherit;
    padding: 0 2px 0 0;
    margin: 0 2px 0 0;
    cursor: pointer;
    vertical-align: middle;
    -webkit-tap-highlight-color: transparent;
    opacity: 0.85;
}

#folderModal .folder-back-btn:active {
    opacity: 0.5;
}

body.light_mode #folderModal .folder-back-btn {
    color: #111827;
}

/* ── Overlay mode (header-opened folders) ──
   Matches the im-messages-overlay-backdrop / ai-overlay-backdrop pattern:
   full-screen fixed layer at z-index 45000, no centered modal chrome.
   No open/close animation — instant show/hide. */
#folderModal.folder-overlay-mode {
    background: rgba(0, 0, 0, 0.55);
    z-index: 1001;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
}

#folderModal.folder-overlay-mode.visible {
    z-index: 10000;
    transition: none;
}

#folderModal.folder-overlay-mode .folder-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
    /* padding: calc(var(--app-safe-top) + 56px + 8px) calc(20px + var(--safe-right)) 20px calc(20px + var(--safe-left)); */
    padding: calc(var(--app-safe-top) + 56px + 14px) calc(20px + var(--safe-right)) 20px calc(20px + var(--safe-left));
    background: rgba(0, 0, 0, 1);
    transform: none;
    border: none;
    transition: none;
}

#folderModal.folder-overlay-mode.visible .folder-content {
    transform: none;
    border: none;
}

body.light_mode #folderModal.folder-overlay-mode {
    background: rgba(0, 0, 0, 0.3);
}

body.light_mode #folderModal.folder-overlay-mode .folder-content {
    background: rgba(255, 255, 255, 1);
}

#folderModal.folder-overlay-mode.folder-modal-suspended {
    visibility: hidden;
    pointer-events: none;
}

body:has(#folderModal.folder-overlay-mode.visible) .dragging-clone {
    z-index: 46000;
}

#folderModal[data-folder-clone] {
    position: fixed;
    inset: 0;
    z-index: 50000;
    pointer-events: none;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: hidden;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}/* Social Pages Styles - Matching Earn.jsx aesthetic */

/* Use same background and base styling as Earn page */
.socialPage {
  min-height: 100vh;
  background: #000;
}

body.light_mode .socialPage {
  background: #f7f9fd !important;
}

.socialPageContent {
  padding: 40px 20px 24px 20px;
  padding-top: calc(var(--safe-top) + 40px);
}

.sectionCard{
  margin-top: 20px;
  padding: 20px;
  border-radius: 25px;
  border: 1px solid #ffffff1f;
  background: #0d0d0d;
}

body.light_mode .sectionCard {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
}

/* Empty State - matching Earn.jsx aesthetic */
.emptyState {
  text-align: center;
  padding: 60px 20px;
  background: #242424;
  border-radius: 16px;
  margin: 20px 0;
}

.emptyStateIcon {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  color: #cbd5e1;
  opacity: 0.8;
}

.emptyStateTitle {
  font-size: 18px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 8px;
}

.emptyStateText {
  font-size: 14px;
  color: #94a3b8;
  line-height: 1.5;
}

body.light_mode .emptyState {
  background: #f9fafb !important;
}

body.light_mode .emptyStateIcon {
  color: #94a3b8 !important;
}

body.light_mode .emptyStateTitle {
  color: #475569 !important;
}

body.light_mode .emptyStateText {
  color: #64748b !important;
}

/* Request Cards - clean, minimal like Earn cards */
.requestCard {
  background: #171717;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
    border: 1px solid #ffffff05;
    color:white;
}


/* User Avatar - matching icon style from Earn */
.userAvatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}

/* User Info */
.userName {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}

.userHandle {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 4px;
}

.userBio {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.4;
  margin-top: 6px;
}

/* Action Buttons - matching Earn.jsx button style */
body:not(.light_mode) .acceptButton {
  background: #171717;
  color: #fff;
}

.acceptButton {
  border: none;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.acceptButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Light mode accept button - better styling for suggestion drawer */
body.light_mode .acceptButton {
  background: #f3f4f6 !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
}

body.light_mode .acceptButton:hover:not(:disabled) {
  background: #e5e7eb !important;
}

body.light_mode .acceptButton:active:not(:disabled) {
  background: #d1d5db !important;
}

.rejectButton {
  border: none;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.rejectButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Request Date - subtle like Earn page */
.requestDate {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 12px;
  font-weight: 500;
}

/* Page Title - matching Earn.jsx style (soft, uppercase) */
.socialPageTitle {
  font-size: 14px;
  font-weight: 600;
  color: #8999af;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}

.socialPage h1{
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0;
    text-align: left;
}

.socialPage h2{
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.socialPageSubtitle {
  font-size: 15px;
  color: #64748b;
  font-weight: 500;
  margin-bottom: 24px;
}

body.light_mode .socialPageSubtitle {
  color: #64748b;
}

body.light_mode .socialPageTitle {
  color: #64748b;
}

.profile-share-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: 3px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.profileButtons{
    display: flex;
    justify-content: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    margin-top: 6px;
    margin-left: 5px;
}

body:not(.light_mode) .profileButtons button {
    color: #fff;
    background: #171717;
    border: 1px solid #3b3b3b3b;
}

.profileButtons button{
    border-radius: 11px;
    line-height: 17px;
}

/* Light mode profile buttons - better styling for suggestion drawer */
body.light_mode .profileButtons button {
    color: #111827 !important;
    background: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
}

body.light_mode .profileButtons button:hover:not(:disabled) {
    background: #e5e7eb !important;
}

body.light_mode .profileButtons button:active:not(:disabled) {
    background: #d1d5db !important;
}

body.light_mode .requestCard{
    background: #fff;
}

body.light_mode .userName{
    color: #1e293b;
}

.settingsPage .saveButtonContainer{
  color:white
}

@media (orientation: landscape) {
  .socialPage {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }
}.sectionCardTab{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:12px;
    background: #161617;
    border-radius:12px;
    border: 1px solid #ffffff12;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor:pointer;
    justify-content: space-evenly;
}

.sectionCardTab:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

/* -------------------- Profile skeleton loading -------------------- */
.profileSkeletonRoot{
    --profile_skeleton_base: rgba(255, 255, 255, 0.06);
    --profile_skeleton_shine: rgba(255, 255, 255, 0.12);
}

body.light_mode .profileSkeletonRoot{
    --profile_skeleton_base: rgba(0, 0, 0, 0.06);
    --profile_skeleton_shine: rgba(255, 255, 255, 0.75);
}

.profileSkeletonLine,
.profileSkeletonBlock{
    background: var(--profile_skeleton_base);
    box-sizing: border-box;
    max-width: 100%;
}

.profileSkeletonShimmer{
    position: relative;
    overflow: hidden;
}

.profileSkeletonShimmer::after{
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--profile_skeleton_shine) 50%,
        transparent 100%
    );
    animation: profile_shimmer 1.25s ease-in-out infinite;
}

@keyframes profile_shimmer{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(200%); }
}

@media (prefers-reduced-motion: reduce){
    .profileSkeletonShimmer::after{
        animation: none;
    }
}

.profileSkeletonHeader{
    text-align: center;
    margin-bottom: 18px;
}

.profileSkeletonAvatar{
    width: 96px;
    height: 96px;
    border-radius: 999px;
    margin: 0 auto 16px auto;
}

.profileSkeletonTitle{
    /* Match h1: 24px * line-height(1.2) ~= 29px */
    height: 30px;
    width: 100%;
    max-width: 240px;
    border-radius: 12px;
    /* Match .socialPage h1 margins (margin-top:10px; margin-bottom:4px) */
    /* Increased top margin to account for visual spacing after avatar */
    margin: 10px auto 4px auto;
}

.profileSkeletonHandleRow{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.profileSkeletonHandle{
    height: 16px;
    width: 100%;
    max-width: 140px;
    border-radius: 10px;
}

.profileSkeletonShareIcon{
    width: 16px;
    height: 16px;
    border-radius: 5px;
    flex-shrink: 0;
}

.profileSkeletonBio{
    height: 14px;
    width: 100%;
    max-width: 320px;
    border-radius: 10px;
    margin: 0 auto;
}

.profileStatsSkeleton{
    margin-top: 7px;
}

.profileStatSkeleton{
    cursor: default;
}

.profileSkeletonStatNumber{
    height: 26px;
    width: 52px;
    border-radius: 12px;
    margin: 0 auto 2px auto;
}

.profileSkeletonStatLabel{
    height: 13px;
    width: 70px;
    border-radius: 10px;
    margin: 0 auto;
}

.profileSectionSkeleton{
    pointer-events: none;
}

.profileSkeletonSectionTitle{
    height: 18px;
    width: 100%;
    max-width: 140px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.profileSkeletonRow{
    height: 14px;
    width: 100%;
    max-width: 520px;
    border-radius: 10px;
    margin-top: 0;
}

.profileSkeletonRow:not(:first-child){
    margin-top: 12px;
}

.profileSkeletonRowShort{
    max-width: 360px;
}

.profileLoadingAnnounce{
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.profileButtonsSkeleton{
    pointer-events: none;
}

.profileSkeletonButton{
    height: 40px;
    width: 100%;
    max-width: 120px;
    border-radius: 12px;
    background: var(--profile_skeleton_base);
}

.achievementTitle{
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    line-height: 1.3;
    color: #f1f3f7;
}

.app-name{
    color: #fff;
    font-size: 12px;
    margin-top: 7px;
}

.userStats{
    display: flex;
    justify-content: flex-start;
    gap: 5px;
    margin-top: 7px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}

.userStats::-webkit-scrollbar{
    display: none; /* iOS/Chrome */
}

.userStat{
    text-align: center;
    cursor: pointer;
    padding: 8px;
    border-radius: 12px;
    transition: background-color 0.2s ease;
    flex: 0 0 auto;
    min-width: 76px;
}

.userStatCounter{
    font-size: 22px;
    line-height: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 2px;
}

.userStatLabel{
    font-size: 11px;
    line-height: 13px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body.light_mode .socialPage h1{
    color: #1e293b;
}

.profile-back-button {
    position: absolute;
    top: calc(5px + var(--safe-top));
    left: 20px;
    z-index: 100;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background-color 0.2s;
    color: #fff;
}

body.android .profile-back-button {
    top: 20px;
}

body.light_mode .profile-back-button {
    color: #1e293b;
}

body.light_mode .socialPage h2{
    color: #1e293b;
}

body.light_mode .achievementsCard{
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light_mode .sectionCardTab{
    background: #fff;
    border-color: #e2e8f0;
}

body.light_mode .achievementTitle{
    color: #334155;
}

body.light_mode .app-name{
    color: #000;
}

body.light_mode .userStats{
    border-color: #cbd5e1;
}

/* Leaderboard Table Styles */
.leaderboard-table-wrapper {
    overflow-x: auto;
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
}



.leaderboard-table th {
    text-align: left;
    padding: 12px 8px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.leaderboard-table th:last-child {
    text-align: right;
}

.leaderboard-table tbody tr {
    cursor: pointer;
    transition: background-color 0.2s;
}

.leaderboard-table tbody tr:nth-child(even) {
    background-color: #131313;
}

.leaderboard-table tbody tr:nth-child(odd) {
    background-color: #0d0d0d;
}

.leaderboard-table tbody tr:active {
    background-color: #3a3a3c;
}

.leaderboard-table td {
    padding: 4px 8px;
    vertical-align: middle;
}

.leaderboard-table td:last-child {
    text-align: right;
}

.leaderboard-rank-cell {
    font-size: 14px;
    font-weight: 600;
    color: #94a3b8;
}

.leaderboard-rank-empty {
    color: #64748b;
}

.leaderboard-game-cell {
    /* Prevent overflow in flex layouts */
    min-width: 0;
}

.leaderboard-game-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.leaderboard-app-icon-wrapper {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.leaderboard-app-icon-wrapper img {
    border-radius: 7px;
    width: 25px;
}

.leaderboard-app-icon-placeholder {
    width: 40px;
    height: 40px;
    background: #e2e8f0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.leaderboard-app-name {
    font-size: 14px;
    font-weight: 500;
    color: #cbd5e1;
}

.leaderboard-score-cell {
    font-size: 14px;
    font-weight: 600;
    color: #34d399;
}

/* Light mode styles */
body.light_mode .leaderboard-table thead tr {
    border-bottom-color: #e2e8f0;
}

body.light_mode .leaderboard-table th {
    color: #64748b !important;
}

body.light_mode .leaderboard-table tbody tr {
    border-bottom-color: #f1f5f9;
}

body.light_mode .leaderboard-table tbody tr:nth-child(even) {
    background-color: #f9fafb !important;
}

body.light_mode .leaderboard-table tbody tr:nth-child(odd) {
    background-color: #fff !important;
}

body.light_mode .leaderboard-table tbody tr:hover {
    background-color: rgba(16, 185, 129, 0.05) !important;
}

body.light_mode .leaderboard-table tbody tr:active {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

body.light_mode .leaderboard-rank-cell {
    color: #64748b !important;
}

body.light_mode .leaderboard-app-name {
    color: #111827 !important;
}

body.light_mode .leaderboard-app-icon-placeholder {
    background: #e2e8f0;
}

.profile-leaderboard-see-all-link {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: text-decoration 0.2s;
}

.profile-leaderboard-see-all-link:active {
    text-decoration: underline;
}

body.light_mode .userStatCounter{
    color: #000;
}

body.light_mode .userStatLabel {
    color: #64748b;
}

body.light_mode .profile-section-see-all-link {
    color: #475569 !important;
}

body.light_mode .profile-leaderboard-see-all-link {
    color: #475569 !important;
}

body.light_mode .profile-username {
    color: #475569 !important;
}

body.light_mode .profile-bio {
    color: #64748b !important;
}

body.light_mode .profile-avatar-fallback {
    background: #e2e8f0 !important;
    color: #475569 !important;
}

body.light_mode .profile-avatar-edit-badge {
    background: #fff !important;
    border-color: #e5e7eb !important;
}

body.light_mode .profile-avatar-edit-badge path {
    stroke: #111827 !important;
}

/* Profile Header Styles */

.profile-header-wrapper {
    position: relative;
}

.profile-info-button {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 28px;
    text-align: center;
    padding: 0;
}

.profile-info-button:active {
    transform: scale(0.98);
    background: rgba(255, 255, 255, 0.10);
}

body.light_mode .profile-info-button {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.04);
    color: #000;
}

body.light_mode .profile-info-button:active {
    background: rgba(0, 0, 0, 0.08);
}

.profile-info-drawer {
    padding: 8px 14px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Force black background for this specific drawer */
.drawer-container#profile_info_drawer .drawer {
    background: #000;
}

/* Ensure handle is visible on black drawer */
.drawer-container#profile_info_drawer .drawer-handle {
    background: #000;
}

.drawer-container#profile_info_drawer .drawer-handle-indicator {
    background: rgba(255, 255, 255, 0.35) !important;
}

.profile-info-drawer-item {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.profile-info-drawer-item:active {
    background: rgba(255, 255, 255, 0.10);
}

.profile-info-drawer-item-danger {
    border: 1px solid rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.12);
    color: #fecaca;
}

.profile-info-drawer-item-danger:active {
    background: rgba(239, 68, 68, 0.18);
}

body.light_mode .profile-info-drawer-item {
    border: 1px solid rgba(0, 0, 0, 0.10);
    background: rgba(0, 0, 0, 0.04);
    color: #000;
}

body.light_mode .profile-info-drawer-item:active {
    background: rgba(0, 0, 0, 0.08);
}

body.light_mode .profile-info-drawer-item-danger {
    border: 1px solid rgba(239, 68, 68, 0.30);
    background: rgba(239, 68, 68, 0.10);
    color: #b91c1c;
}

body.light_mode .drawer-container#profile_info_drawer .drawer {
    background: #fff;
}

body.light_mode .drawer-container#profile_info_drawer .drawer-handle {
    background: #fff;
}

body.light_mode .drawer-container#profile_info_drawer .drawer-handle-indicator {
    background: rgba(0, 0, 0, 0.2) !important;
}

body.light_mode .drawer-container#profile_info_drawer .drawer-title {
    color: #111827 !important;
}

.profile-header-container {
    text-align: center;
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: 8px;
}

.profile-name-container {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-grow: 1;
}

.profile-avatar-container {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.profile-avatar-label {
    display: block;
    cursor: pointer;
    position: relative;
    width: 56px;
    height: 56px;
}

.profile-avatar-fallback {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    border-radius: 50%;
    background: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    font-size: 24px;
}

.profile-avatar-fallback.profile-avatar-clickable {
    cursor: pointer;
}

.profile-avatar-image {
    width: 56px;
    height: 56px;
    margin: 0 auto;
    display: block;
}

.profile-avatar-image.profile-avatar-clickable {
    cursor: pointer;
}

.profile-avatar-edit-badge {
    position: absolute;
    bottom: -4px;
    right: -4px;
    width: 28px;
    height: 28px;
    background: #fff;
    border-radius: 50%;
    border: 3px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: none;
}

.profile-avatar-edit-badge svg {
    width: 11px;
    height: 11px;
}

.profile-avatar-edit-badge path {
    stroke: #000;
    stroke-width: 3px;
}

.profile-username {
    font-size: 15px;
    color: #64748b;
    font-weight: 500;
    cursor: pointer;
    max-width: calc(100% - 50px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

.profile-bio {
    font-size: 14px;
    color: #94a3b8;
    line-height: 1.5;
    max-width: 400px;
    margin: 0 auto;
}

/* User Stats Hover Effect */
.userStat:active {
    background: rgba(16, 185, 129, 0.05);
}

/* Action Buttons */
.profile-button-cancel {
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fbbf24;
    cursor: pointer;
}

.profile-button-pending {
    padding: 10px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    background: #fef3c7;
    color: #92400e;
    border: none;
    cursor: not-allowed;
}

/* Mutual Following Badge */
.profile-mutual-following {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

/* Pending Requests Banner */
.profile-pending-requests-banner {
    margin-top: 24px;
    padding: 16px 20px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    text-align: center;
}

.profile-pending-requests-text {
    color: #059669;
    font-weight: 600;
    margin-bottom: 8px;
}

.profile-pending-requests-link {
    color: #10B981;
    font-weight: 600;
    text-decoration: underline;
    font-size: 14px;
}

/* Section Headers */
.profile-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.profile-section-see-all-link {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: text-decoration 0.2s;
}

.profile-section-see-all-link:active {
    text-decoration: underline;
}

/* Profile Tabs */
.profileTabsWrap{
    position: relative;
    max-width: calc(100% - 12px);
    margin: 10px auto 20px;
    border-radius: 14px;
    border: 1px solid #ffffff1f;
    background: #0d0d0d;
}

.profileTabs{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.profileTabs::-webkit-scrollbar{
    display: none;
}

.profileTab{
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 13px;
    font-weight: 700;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.profileTabIcon{
    flex: 0 0 44px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.profileTabWithIcon{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.profileTabWithIcon svg{
    display: block;
    flex: 0 0 auto;
}

.profileAppsSkeletonGrid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 4px 0 0 0;
}

.profileAppSkeletonTile{
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: var(--profile_skeleton_base);
}

.profileLeaderboardSkeleton{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 6px 0 0 0;
}

.profileLeaderboardSkeletonRow{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

body.light_mode .profileLeaderboardSkeletonRow{
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.profileLeaderboardSkeletonRank{
    width: 44px;
    height: 18px;
    border-radius: 10px;
    background: var(--profile_skeleton_base);
    flex: 0 0 auto;
}

.profileLeaderboardSkeletonGame{
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.profileLeaderboardSkeletonIcon{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--profile_skeleton_base);
    flex: 0 0 auto;
}

.profileLeaderboardSkeletonText{
    height: 16px;
    width: 100%;
    max-width: 220px;
    border-radius: 10px;
    background: var(--profile_skeleton_base);
}

.profileLeaderboardSkeletonScore{
    width: 84px;
    height: 18px;
    border-radius: 10px;
    background: var(--profile_skeleton_base);
    flex: 0 0 auto;
}

.profileAchievementsSkeletonGrid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    padding: 4px 0 0 0;
}

.profileAchievementSkeletonTile{
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: var(--profile_skeleton_base);
}

.profile-apps-grid.app-grid{
    /* Keep homescreen grid spacing, but don't create a nested 100vh scroller inside Profile */
    height: auto;
    min-height: 0;
    overflow-y: visible;
    background-color: transparent;
    padding-bottom: 0;
}

@media (orientation: landscape) {
    .profile-apps-grid.app-grid{
        /* Undo homescreen landscape offsets that assume the dock/sidebar layout */
        margin-left: auto;
        margin-right: auto;
        max-width: 400px;
        width: 100%;
        justify-content: center;
    }
}

.profileTabActive{
    background: #161617;
    color: #fff;
    border: 1px solid #ffffff12;
}

.profileTab:not(.profileTabActive):active{
    background: rgba(16, 185, 129, 0.12);
    color: #fff;
}

body.light_mode .profileTabsWrap{
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light_mode .profileTab{
    color: #64748b;
}

body.light_mode .profileTabActive{
    background: #fff;
    border-color: #e2e8f0;
    color: #1e293b;
}

body.light_mode .profileTab:not(.profileTabActive):active{
    background: rgba(16, 185, 129, 0.10);
    color: #1e293b;
}

body.light_mode .profileTabWithIcon svg {
    color: #64748b;
    fill: #64748b;
    stroke: #64748b;
}

body.light_mode .profileTabActive .profileTabWithIcon svg {
    color: #1e293b;
    fill: #1e293b;
    stroke: #1e293b;
}

.profile-apps-fullscreen-btn {
    border: none;
    border-radius: 12px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s ease, transform 0.2s ease;
}

.profile-apps-fullscreen-btn svg {
    width: 30px;
    height: 30px;
}

.profile-apps-fullscreen-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.profile-apps-fullscreen-btn:not(:disabled):active {
    background: rgba(16, 185, 129, 0.12);
    transform: scale(0.95);
}

/* Loading States */
.profile-loading-state {
    text-align: center;
    padding: 20px;
    color: #94a3b8;
}

/* Apps Grid */
.profile-apps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* Remove parent's bottom padding when the feed is present so there's no gap. */
.socialPageContent:has(.profile-feed-container) {
    padding-bottom: 0;
}

/* Profile Feed (replaces homescreen grid) */
.profile-feed-container {
    min-height: 300px;
    position: relative;
    display: flex;
    flex-direction: column;
    /* Break out of .socialPageContent's 20px side padding for edge-to-edge feed. */
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
}

/* Embedded feed in Profile already sits inside a padded page; don't double-apply safe-area bottom. */
.profile-feed-container .app_feed_info_wrap.above_dock {
    bottom: 10px;
}

/* Before the feed snaps to top (feed-passthrough) and when it has no scroll
   overflow like a single app (feed-scroll-passthrough): make the inner scroll
   container non-scrollable so iOS chains the gesture to the page scroller.
   overflow:clip (NOT hidden) is critical — clip does not create a scroll
   container, so the browser won't target it for scrolling. */
.profile-feed-container.feed-passthrough .app_feed_container,
.profile-feed-container.feed-scroll-passthrough .app_feed_container {
    overflow-y: clip !important;
    touch-action: pan-y;
}

.profile-feed-container .app_feed_wrapper--embedded {
    flex: 1;
    min-height: 0;
    height: 100%;
}

.profile-feed-container .app_feed_wrapper--embedded .app_feed_container {
    height: 100%;
}

/* Profile Feed Attribution Toast */
.profile-feed-attribution {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--safe-top) + 12px);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto;
    padding: 6px 14px 6px 6px;
    border-radius: 23px;
    background: rgb(0 0 0 / 17%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    width: fit-content;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.profile-feed-attribution--visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.profile-feed-attribution__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.profile-feed-attribution__avatar--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.18);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
}

.profile-feed-attribution__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

body.light_mode .profile-feed-attribution {
    background: rgba(28, 28, 30, 0.82);
    border-color: rgba(255, 255, 255, 0.10);
    color: #fff;
}

/* Feed skeleton (shown while feed hydrates) */
.profile-feed-skeleton {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    gap: 12px;
}

.profile-feed-skeleton__card {
    flex: 1;
    min-height: 300px;
    border-radius: 16px;
    background: var(--profile_skeleton_base, rgba(255, 255, 255, 0.06));
}

.profile-feed-skeleton__dock {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 4px;
}

.profile-feed-skeleton__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    flex-shrink: 0;
    background: var(--profile_skeleton_base, rgba(255, 255, 255, 0.06));
}

.profile-feed-skeleton__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-feed-skeleton__name {
    height: 14px;
    width: 120px;
    border-radius: 6px;
    background: var(--profile_skeleton_base, rgba(255, 255, 255, 0.06));
}

.profile-feed-skeleton__author {
    height: 12px;
    width: 80px;
    border-radius: 6px;
    background: var(--profile_skeleton_base, rgba(255, 255, 255, 0.06));
}

.profile-feed-skeleton__btn {
    width: 80px;
    height: 34px;
    border-radius: 17px;
    flex-shrink: 0;
    background: var(--profile_skeleton_base, rgba(255, 255, 255, 0.06));
}

.profile-app-item {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

/* Achievements Grid */
.profile-achievements-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}


/* Light mode styles */
body.light_mode .profile-avatar-fallback {
    background: #e2e8f0;
    color: #1e293b;
}

body.light_mode .profile-username {
    color: #64748b;
}

body.light_mode .profile-bio {
    color: #64748b;
}

body.light_mode .profile-mutual-following {
    color: #64748b;
}

body.light_mode .profile-pending-requests-banner {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

body.light_mode .profile-pending-requests-text {
    color: #059669;
}

body.light_mode .profile-pending-requests-link {
    color: #10B981;
}

body.light_mode .profile-loading-state {
    color: #64748b;
}
@font-face {
    font-family: 'Rubik Onboarding';
    src: url('/assets/rubik-v31-latin-regular.j0pmKyiQ.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik Onboarding';
    src: url('/assets/rubik-v31-latin-700.D-tMm-eS.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Rubik Onboarding';
    src: url('/assets/rubik-v31-latin-800.BtaGuVpR.woff2') format('woff2');
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

@keyframes onboarding-hint-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes onboarding-hint-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.onboarding_container > div {
    animation: onboarding-hint-in 280ms ease-out both;
}

@keyframes onboarding-swipe-arrow {
    0%   { transform: translateX(0); opacity: 1; }
    60%  { transform: translateX(-18px); opacity: 0.3; }
    61%  { transform: translateX(0); opacity: 0; }
    62%  { transform: translateX(0); opacity: 1; }
    100% { transform: translateX(0); opacity: 1; }
}

@keyframes onboarding-tap-pulse {
    0% {
        transform: translate(-50%, -50%) scale(0.45);
        opacity: 0;
    }
    20% {
        opacity: 0.95;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.9);
        opacity: 0;
    }
}

.app_feed_wrapper .onboarding_container {
    background: rgba(0,0,0,.6);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    font-family: 'Rubik Onboarding', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#appContainer > .onboarding_container,
.app-container > .onboarding_container {
    background: rgba(0,0,0,.6);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    z-index: 9999;
    font-family: 'Rubik Onboarding', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* When the container is moved to <body> for homescreen hints (fixed so it stays on screen
   regardless of which horizontal page is visible) */
body > .onboarding_container {
    background: rgba(0,0,0,.6);
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none;
    z-index: 9999;
    font-family: 'Rubik Onboarding', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.app_feed_wrapper .onboarding_container video {
    height: 100%;
    width: 100%;
}

.onboarding_container .onboarding_swipe_hint {
    position: absolute;
    top: calc(50% - 100px);
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: #fff;
    pointer-events: none;
    text-align: center;
}

.onboarding_container .onboarding_swipe_hint .swipe_arrow {
    font-size: 36px;
    line-height: 1;
    animation: onboarding-swipe-arrow 1.6s ease-in-out infinite;
}

.onboarding_container .onboarding_swipe_hint .swipe_label {
    font-family: 'Rubik Onboarding', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 36px;
    font-size: 50px;
    font-weight: 800;
    line-height: 1.2;
    max-width: min(75vw, 320px);
    width: max-content;
    letter-spacing: 0.08em;
    /* text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); */
    text-shadow: rgb(169 169 169 / 50%) 0px 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.onboarding_container .onboarding_swipe_hint .swipe_label span {
    --fill-progress: 0;
    --fill-color: #fff;
    position: relative;
    display: inline-block;
    color: transparent;
    -webkit-text-stroke: 1.5px #fff;
    transition: color 0.18s ease;
}

.onboarding_container .onboarding_swipe_hint .swipe_label .swipe-word::after {
    content: attr(data-fill);
    position: absolute;
    inset: 0;
    color: var(--fill-color);
    -webkit-text-stroke: 0;
    clip-path: inset(0 0 0 calc((1 - var(--fill-progress)) * 100%));
    transition: clip-path 0.08s linear;
    pointer-events: none;
}

.onboarding_container .onboarding_swipe_hint .swipe_label span.is-active {
    color: #fff;
    -webkit-text-stroke: 0;
}

.onboarding_tap_hint {
    gap: 50px !important;
}


.onboarding_container .onboarding_tap_hint .tap_pulse {
    position: relative;
    width: 72px;
    height: 72px;
}

.onboarding_container .onboarding_tap_hint .tap_pulse_core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    border-radius: 999px;
    background: rgba(180, 180, 180, 0.9);
    transform: translate(-50%, -50%);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
}

.onboarding_container .onboarding_tap_hint .tap_pulse_ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-radius: 999px;
    border: 2px solid rgba(180, 180, 180, 0.72);
    animation: onboarding-tap-pulse 1.4s ease-out infinite;
}

.onboarding_container .onboarding_tap_hint .tap_pulse_ring--2 {
    animation-delay: 0.28s;
}

.onboarding_container .onboarding_tap_hint .tap_pulse_ring--3 {
    animation-delay: 0.56s;
}

@keyframes onboarding-release-flicker {
    0%, 100% { color: #fff; -webkit-text-stroke: 0; opacity: 1; }
    35%       { color: transparent; opacity: 1; }
    50%       { color: #fff; -webkit-text-stroke: 0; opacity: 0.82; }
    70%       { color: transparent; opacity: 1; }
}

.onboarding_container .onboarding_swipe_hint .swipe_label .release-word.is-flickering {
    animation: onboarding-release-flicker 0.7s ease-in-out infinite;
}

.onboarding_container.hint-2 .onboarding_swipe_hint .swipe_label {
    transition: opacity 0.18s ease-out;
}
.onboarding_container.hint-2 .onboarding_swipe_hint .swipe_label.is-hidden {
    opacity: 0;
}

.onboarding_container.hint-2 .onboarding_swipe_hint .now-release-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: min(12vw, 50px);
    font-weight: 800;
    letter-spacing: 0.08em;
    opacity: 0;
    transition: opacity 0.18s ease-out;
    pointer-events: none;
}
.onboarding_container.hint-2 .onboarding_swipe_hint .now-release-label.is-visible {
    opacity: 1;
}

.onboarding_container.hint-2 .onboarding_swipe_hint .now-release-label span {
    color: transparent;
    -webkit-text-stroke: 1.5px #fff;
}
.onboarding_container.hint-2 .onboarding_swipe_hint .now-release-label .release-word.is-flickering {
    animation: onboarding-release-flicker 0.7s ease-in-out infinite;
}

.onboarding_container.hint-1 .onboarding_swipe_hint .swipe_label {
    font-size: min(11vw, 46px);
}

.onboarding_container.hint-2 .onboarding_swipe_hint .swipe_label {
    font-size: min(11vw, 44px);
}


.onboarding_container.hint-3 .onboarding_swipe_hint .swipe_label {
    font-size: min(13vw, 50px);
}

.onboarding_container.hint-5 .onboarding_swipe_hint .swipe_label {
    font-size: min(10vw, 50px);
}

.onboarding_container.hint-6 .onboarding_swipe_hint .swipe_label {
    font-size: min(10vw, 50px);
    transition: opacity 0.18s ease-out;
}
.onboarding_container.hint-6 .onboarding_swipe_hint .swipe_label.is-hidden {
    opacity: 0;
}

.onboarding_container.hint-6 .onboarding_swipe_hint .now-hold-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: min(12vw, 50px);
    font-weight: 800;
    letter-spacing: 0.08em;
    opacity: 0;
    transition: opacity 0.18s ease-out;
    pointer-events: none;
}
.onboarding_container.hint-6 .onboarding_swipe_hint .now-hold-label.is-visible {
    opacity: 1;
}
.onboarding_container.hint-6 .onboarding_swipe_hint .now-hold-label span {
    color: transparent;
    -webkit-text-stroke: 1.5px #fff;
    display: block;
    text-align: center;
}

.onboarding_container.hint-2 .onboarding_swipe_hint {
    top: calc(50% - 120px);
}

.onboarding_container.hint-3 .onboarding_swipe_hint {
    top: 50%;
}

.onboarding_container.hint-4 .onboarding_swipe_hint .swipe_label {
    font-size: min(10vw, 44px);
}

.onboarding_container.hint-6 .onboarding_swipe_hint .swipe_label {
    gap: 0;
}

.onboarding_container.hint-3 .onboarding_swipe_hint,
.onboarding_container.hint-4 .onboarding_swipe_hint,
.onboarding_container.hint-5 .onboarding_swipe_hint{
    gap: 32px;
}

.onboarding_container.hint-6 .onboarding_swipe_hint {
    top: calc(50% - 120px);
}

.onboarding_container.hint-7 .onboarding_swipe_hint .swipe_label {
    font-size: min(10vw, 44px);
    gap: 2px;
    transition: opacity 0.18s ease-out;
}
.onboarding_container.hint-7 .onboarding_swipe_hint .swipe_label.is-hidden {
    opacity: 0;
}

.onboarding_container.hint-7 .onboarding_swipe_hint .now-release-label {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: min(12vw, 50px);
    font-weight: 800;
    letter-spacing: 0.08em;
    opacity: 0;
    transition: opacity 0.18s ease-out;
    pointer-events: none;
}
.onboarding_container.hint-7 .onboarding_swipe_hint .now-release-label.is-visible {
    opacity: 1;
}
.onboarding_container.hint-7 .onboarding_swipe_hint .now-release-label span {
    color: transparent;
    -webkit-text-stroke: 1.5px #fff;
}
.onboarding_container.hint-7 .onboarding_swipe_hint .now-release-label .release-word.is-flickering {
    animation: onboarding-release-flicker 0.7s ease-in-out infinite;
}

.onboarding_container.hint-7 .onboarding_swipe_hint {
    top: calc(50% - 120px);
}

.onboarding_container.hint-3 .onboarding_scroll_hint .scroll_hint_text {
    position: relative;
    display: block;
}

/* .onboarding_container.hint-3 .onboarding_scroll_hint .scroll_hint_text_base,
.onboarding_container.hint-3 .onboarding_scroll_hint .scroll_hint_text_fill {
    white-space: nowrap;
} */

.onboarding_container.hint-3 .onboarding_scroll_hint .scroll_hint_text_base {
    color: transparent;
    -webkit-text-stroke: 1.5px #fff;
}

.onboarding_container.hint-3 .onboarding_scroll_hint .scroll_hint_text_fill {
    position: absolute;
    inset: 0;
    color: #fff;
    -webkit-text-stroke: 0;
    clip-path: inset(100% 0 0 0);
}

body.light_mode .onboarding_container .onboarding_swipe_hint {
    color: #111;
}

body.light_mode .onboarding_container .onboarding_swipe_hint .swipe_label {
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.5);
}

body.light_mode .onboarding_container .onboarding_swipe_hint .swipe_label span.is-active {
    color: #fff;
}

/* Step 3 - horizontal swipe-to-homescreen hint */
@keyframes onboarding-swipe-h {
    0%   { transform: translateX(24px); opacity: 0; }
    15%  { transform: translateX(24px); opacity: 1; }
    70%  { transform: translateX(-24px); opacity: 1; }
    88%  { transform: translateX(-24px); opacity: 0; }
    100% { transform: translateX(-24px); opacity: 0; }
}

.onboarding_homescreen_hint .swipe_horizontal_arrow,
.onboarding_popular_hint .swipe_horizontal_arrow {
    font-size: 40px;
    line-height: 1;
    animation: onboarding-swipe-h 1.8s ease-in-out infinite;
}

body.light_mode .app_feed_wrapper .onboarding_container,
body.light_mode > .onboarding_container {
    background: rgba(255,255,255,.6);
}

/* Hint 3 — scroll indicator (ported from scroll-indicator.html) */
.ob_scroll_indicator {
    position: relative;
    width: 56px;
    height: 320px;
    flex-shrink: 0;
}

.ob_scroll_track {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 56px;
    background: rgba(160, 160, 160, 0.55);
    border-radius: 28px;
    z-index: 1;
    animation: ob-trackAnim 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ob_scroll_circle {
    position: absolute;
    left: 0;
    width: 56px;
    height: 56px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    animation: ob-circleAnim 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ob-circleAnim {
    0%   { bottom: 0;                   opacity: 1; transform: scale(1); }
    55%  { bottom: calc(100% - 56px);   opacity: 1; transform: scale(1); }
    85%  { bottom: calc(100% - 56px);   opacity: 0; transform: scale(0); }
    99%  { bottom: 0;                   opacity: 0; transform: scale(0); }
    100% { bottom: 0;                   opacity: 1; transform: scale(1); }
}

@keyframes ob-trackAnim {
    0%   { bottom: 0;                   height: 56px;  opacity: 0.55; }
    55%  { bottom: 0;                   height: 320px; opacity: 0.55; }
    68%  { bottom: calc(100% - 56px);   height: 56px;  opacity: 0;    }
    99%  { bottom: 0;                   height: 56px;  opacity: 0;    }
    100% { bottom: 0;                   height: 56px;  opacity: 0.55; }
}

/* Hint 4 — horizontal scroll indicator (right → left) */
.ob_scroll_indicator_h {
    position: relative;
    width: 320px;
    height: 56px;
    flex-shrink: 0;
}

.ob_scroll_indicator_h .ob_scroll_track {
    bottom: unset;
    left: unset;
    top: 0;
    right: 0;
    width: 56px;
    height: 56px;
    animation: ob-trackAnim-h 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.ob_scroll_indicator_h .ob_scroll_circle {
    left: unset;
    bottom: unset;
    top: 0;
    right: 0;
    animation: ob-circleAnim-h 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes ob-circleAnim-h {
    0%   { right: 0;                  opacity: 1; transform: scale(1); }
    55%  { right: calc(100% - 56px);  opacity: 1; transform: scale(1); }
    85%  { right: calc(100% - 56px);  opacity: 0; transform: scale(0); }
    99%  { right: 0;                  opacity: 0; transform: scale(0); }
    100% { right: 0;                  opacity: 1; transform: scale(1); }
}

@keyframes ob-trackAnim-h {
    0%   { right: 0;                  width: 56px;  opacity: 0.55; }
    55%  { right: 0;                  width: 320px; opacity: 0.55; }
    68%  { right: calc(100% - 56px);  width: 56px;  opacity: 0;    }
    99%  { right: 0;                  width: 56px;  opacity: 0;    }
    100% { right: 0;                  width: 56px;  opacity: 0.55; }
}
.insufficient_balance_wrapper .app_info,
.purchase_app_wrapper .app_info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.insufficient_balance_wrapper .app_info .icon,
.purchase_app_wrapper .app_info .icon {
    position: relative;
    padding: 3px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
}

.insufficient_balance_wrapper .app_info .app_icon,
.purchase_app_wrapper .app_info .app_icon {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 12px;
}

.insufficient_balance_wrapper .app_info .name,
.purchase_app_wrapper .app_info .name {
    font-weight: 600;
    font-size: 16px;
    color: #1a1a1a;
    text-align: center;
}

.insufficient_balance_wrapper .app_info .name b,
.purchase_app_wrapper .app_info .name b {
    font-weight: 700;
}

.insufficient_balance_wrapper .app_info .name i,
.purchase_app_wrapper .app_info .name i {
    font-style: italic;
    opacity: 0.8;
}

.app_component {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  padding: 8px 0;
  height: var(--app-component-height);
  box-sizing: border-box;
  width: 100%;
}

.app_component.is_generating .right svg{
  width: 24px;
  height: 24px;
  margin-right: 20px;
}

.app_component.character .app_icon {
  border-radius: 50%;
}

.app_component .new_app_indicator{
  display: none;
  width: 7px;
  height: 7px;
  background: var(--color-accent);
  border-radius: 20px;
  margin-left: 10px;
  position: relative;
  top: -1px;
}

.app_component.is_new .new_app_indicator{
  display: inline-block;
}

.app_component.xs .app_status {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 6px;
  font-size: 11px;
  border-radius: 6px;
}

.app_component.xs {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
}

.app_component.xs .app_icon {
  height: 64px;
  width: 64px;
  aspect-ratio: 1;
  border-radius: 14px;
  padding: 14px;
  box-sizing: border-box;
}

.app_component.xs .left {
  flex-flow: column nowrap;
  align-items: center;
  gap: 8px;
}

.app_component.xs .left .details .app_creator {
  display: none;
}

.app_component.xs .left .name {
  text-align: center;
}

.app_component.xs .right {
  display: none;
}

.app_component.s {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
  box-shadow: var(--shadow-md);
  border-radius: 6px;
  padding: 10px 9px;
}

.app_component.s .app_creator {
  display: none;
}

.app_component.s .app_icon {
  height: 90px;
}

.app_component.s .left {
  flex-flow: column nowrap;
}

.app_component.s .right {
  gap: 8px;
  flex-direction: row;
  align-items: center;
}

.app_component.s .right .comments_button{
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #fff;
  border-radius: 22px;
  padding: 7px 12px;
}

.app_component .comments_button{
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    color: #ffffff;
    gap: 4px;
    background: #171717;
    border: 1px solid #3b3b3b3b;
}

.app_component .comments_button svg{
  fill: #252525 !important;
  width: 16px;
  height: 16px;
}

.app_component .comments_button .comments_count{
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.app_component .comments_button svg path{
  fill: #252525 !important;
}

.app_component.s .right .comments_button svg{
  fill: var(--color-white);
  width: 16px;
  height: 16px;
}

/* Light mode support for comments button */
body.light_mode .app_component .comments_button {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1c1c1e !important;
}

body.light_mode .app_component .comments_button .comments_count {
  color: #1c1c1e !important;
}

body.light_mode .app_component .comments_button svg,
body.light_mode .app_component .comments_button svg path {
  fill: #1c1c1e !important;
}

body.light_mode .app_component.s .right .comments_button {
  border-color: rgba(0, 0, 0, 0.12) !important;
}

body.light_mode .app_component.s .right .comments_button svg {
  fill: #1c1c1e !important;
}

.app_component.s .right .name {
  font-size: 15px;
}

.app_component.s .right .details {
  align-self: center;
}

.app_component .left {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 16px;
  flex-grow: 1;
  min-width: 0;
  overflow: hidden;
}

.app_component.xs .left {
  flex-flow: column nowrap;
  align-items: center;
  gap: 8px;
}

.app_component.s .left {
  flex-flow: column nowrap;
}

/* .icon_wrap{
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
} */
.icon_wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--icon-border-radius);
  width: var(--icon-size);
  min-width: var(--icon-size);
  height: var(--icon-size);
}

.icon_wrap.l{
  height: 96px;
  width: 96px;
  border-radius: 20px;
}

.icon_wrap.s{
  height: 80px;
  width: 80px;
  border-radius: 16px;
}

.icon_wrap.m{
  height: var(--icon-size-m);
  width: var(--icon-size-m);
  border-radius: 16px;
}

.icon_wrap::after{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0.1) 50%, rgba(0,0,0,0.1) 100%);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.icon_wrap.s::after{
  border-radius: 16px;
}

.icon_wrap_outer{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon_wrap_outer.l{
  height: 96px;
  width: 96px;
  border-radius: 20px;
}

.icon_wrap_outer.s{
  height: 80px;
  width: 80px;
  border-radius: 16px;
}

.app_component .app_icon {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: auto;
  height: auto;
}

.app_component.xs .app_icon {
  height: 64px;
  width: 64px;
  aspect-ratio: 1;
  border-radius: 14px;
  padding: 14px;
  box-sizing: border-box;
}

.app_component.s .app_icon {
  height: 90px;
}

.app_component.character .app_icon {
  border-radius: 50%;
}

.app_component .details{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.app_component .right .details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.app_component.s .right .details {
  align-self: center;
}

.app_component .details .name{
  display: flex;
  flex-flow: row;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 500;
  min-width: 0;
  overflow: hidden;
}

.app_component .right .name {
  font-size: 18px;
  color: #000;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.app_component.xs .left .name {
  text-align: center;
}

.app_component.s .right .name {
  font-size: 15px;
}

.app_component .app_creator{
  display: flex;
  align-items: center;
  gap: 4px;
}

.app_component.s .app_creator {
  display: none;
}

.app_component.xs .left .details .app_creator {
  display: none;
}

.app_component .right .details .app_creator{
  color: #757575;
}

.app_component .app_creator img{
  width: 13px;
  height: 13px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 0 1px 1px #00000040;
  pointer-events: none;
}

.app_creator_image {
  pointer-events: none;
}

.app_component .app_creator_user_wrap{
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app_component .average_rating{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-chrome-darker);
}

.app_component .average_rating svg{
  width: 12px;
  height: 12px;
}

.app_component .average_rating svg path{
  fill: var(--color-chrome-darker);
}

.app_component .average_rating{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--color-chrome-darker);
}

.app_component .average_rating svg{
  width: 12px;
  height: 12px;
}

.app_component .average_rating svg path{
  fill: var(--color-chrome-darker);
}

.app_component .details .stats_wrap,
.app_feed_details .stats_wrap {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 7px;
    font-size: 12px;
}

.app_component .details .stats_wrap > *,
.app_feed_details .stats_wrap > * {
    display: flex;
    align-items: center;
}

.app_component .details .stats_wrap svg,
.app_feed_details .stats_wrap svg {
    width: 14px;
    height: 14px;
    fill: #000;
}

.app_component .details .stats_wrap path{
    /*fill: #adadad;*/
}

.app_component .details .stats_wrap > *.red{
    color: #dc3545;
}

.app_component .details .app_tries_count svg{
  position: relative;
  top: 0;
}

.app_component .details .install_count{
  display: flex;
  align-items: center;
  color: #000;
}

.app_component_try.feed_component .install_count {
  color: #fff;
}

#main #page-content .app_grid .grid_el .grid_item_install_count{
  position: absolute;
  top: 10px;
  left: 10px;
  border-radius: 8px;
  padding: 5px 7px;
  font-size: 11px;
  font-weight: 500;
  display: flex;
}

.grid_item_install_count {
  width: 41.2px;
  height: 25px;
}

.app_component .details .app_likes_count svg{
  position: relative;
  top: 0;
  width: 13px;
  height: 13px;
  margin-right: 1px;
}

.app_component .right {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  gap: 4px;
  flex-shrink: 0;
}

.app_component.xs .right {
  display: none;
}

.app_component.s .right {
  gap: 8px;
  flex-direction: row;
  align-items: center;
}

.app_component .right .name {
  font-size: 18px;
  color: #000;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.app_component .right .details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.app_component .right .details .app_creator{
  color: #757575;
}

.app_component.s .right .name {
  font-size: 15px;
}

.app_component.s .right .details {
  align-self: center;
}

.app_component.s .right .comments_button{
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #fff;
  border-radius: 22px;
  padding: 7px 12px;
}

.app_component.s .right .comments_button svg{
  fill: var(--color-white);
  width: 16px;
  height: 16px;
}

.app_component.m .right {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.install_app svg{
  width: 18px;
  height: 18px;
  color: currentColor;
}

.install_app svg path {
  fill: currentColor !important;
  stroke: currentColor !important;
  stroke-width: 0;
}

.app_grid .grid_el .install_app svg {
  width: 16px;
  height: 16px;
}

.install_app.button_1.loading {
  padding: 4px 12px;
}

.button_1 {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 30px;
  letter-spacing: 0.34px;
  text-align: center;
  font-size: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}

.button_1[data-pricing="paid"]{
  background: #5c90ff;
  border: 1px solid #5684e5;
}

.button_1.reinstall{
  background: #ffffff;
  background-color: #ffffff;
  border: none;
  color: var(--color-dark);
}

.app_list .button_1.reinstall,
.app_list .button_1.installed{
  color: #fff;
  border: 1px solid #fff;
  background: none;
  padding: 4px 12px;
  margin-top: 5px;
}

.app_list .button_1.installed svg {
  fill: #fff;
}

.app_feed_info_wrap .button_1 {
  margin-right: 0;
}

.app_component_try.feed_component .button_1 {
  padding: 7px 12px;
  margin-right: 0;
  border-radius: 30px;
}

.round-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.round-button svg {
  margin-right: 0;
}

.top_app .app_info {
  display: flex;
  flex-flow: column nowrap;
}

.top_app .app_name {
  font-weight: 600;
  font-size: 16px;
  color: #1a1a1a;
}

.top_app .app_stats {
  font-size: 14px;
  color: #6b7280;
  margin-top: 4px;
}

.top_app .install_app{
  /* styles not shown in excerpt */
}

.status-draft {
  color: #6c757d;
}

.status-pending {
  color: #ffc107;
}

.status-published {
  color: #0bb112;
}

#main #page-content .app_grid .grid_el .name_and_icon{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.parent-wrapper.name_and_icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.parent-wrapper.name_and_icon .left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.feed-app-details .stats_wrap {
  color: var(--white-100) !important;
}

.feed-app-details .stats_wrap svg {
  fill: var(--white-100) !important;
  color: var(--white-100) !important;
}

.feed-app-details .app_creator_user_wrap {
  color: var(--white-100) !important;
}

/* write root */
:root {
  --icon-size: 62px;
  --icon-size-s: 19px;
  --icon-size-m: 24px;
  --icon-size-l: 58px;
  --icon-border-radius: 16px;
  --icon-border-radius-l: 12px;
  --icon-border-radius-s: 4px;
  --thumbs-icon-size: 22px;
  --thumbs-icon-size-m: 22px;
}

/* =============================================================================
   AppDetails Theme System
   ============================================================================= */

/* Theme Variables */
.app_component.theme-light {
  --text-color: #000000;  /* black text */
  --svg-fill: #000000;
  --svg-stroke: #000000;
}

.app_component.theme-dark {
  --text-color: #ffffff;  /* white text */
  --svg-fill: #ffffff;
  --svg-stroke: #ffffff;
}

/* App Name Theming */
.app_component.theme-light .app-name,
.app_component.theme-dark .app-name {
  color: var(--text-color) !important;
}

/* Promoted badge (debug indicator) */
.app_component .app-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app_component .promoted_badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  position: absolute;
  right: 2px;
  top: -4px;
}

/* Creator Name Theming */
.app_component.theme-light .app_creator_user_wrap,
.app_component.theme-dark .app_creator_user_wrap {
  color: var(--text-color) !important;
}

/* Stats Text Theming */
.app_component.theme-light .stats_wrap .app_tries_count span,
.app_component.theme-light .stats_wrap .app_install_count span,
.app_component.theme-light .stats_wrap .app_likes_count span,
.app_component.theme-light .stats_wrap .install_count,
.app_component.theme-light .app_tries_count span,
.app_component.theme-light .app_install_count span,
.app_component.theme-light .app_likes_count span,
.app_component.theme-light .install_count,
.app_component.theme-dark .stats_wrap .app_tries_count span,
.app_component.theme-dark .stats_wrap .app_install_count span,
.app_component.theme-dark .stats_wrap .app_likes_count span,
.app_component.theme-dark .stats_wrap .install_count,
.app_component.theme-dark .app_tries_count span,
.app_component.theme-dark .app_install_count span,
.app_component.theme-dark .app_likes_count span,
.app_component.theme-dark .install_count {
  color: var(--text-color) !important;
}

/* SVG Icons Theming */
.app_component.theme-light svg,
.app_component.theme-light svg path,
.app_component.theme-dark svg,
.app_component.theme-dark svg path {
  fill: var(--svg-fill) ;
  stroke: var(--svg-stroke) ;
}

.related-apps-grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 12px;
}

.related-app-wrapper .related-app-runner {
  aspect-ratio: 6 / 9;
  border-radius: 12px;
  overflow: hidden;
}

.related-app-wrapper .related-app-preview-container {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.related-app-wrapper .related-app-interaction-blocker {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: auto;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background: transparent;
}

.related-app-wrapper .related-app-splash {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 16px 10px;
  background: #000000a1;
  backdrop-filter: blur(1px);
}

/* Reuse global splash visual language, but size it down for preview tiles */
.related-app-wrapper .related-app-splash .app_launch_splash__icon {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow:
    0 14px 34px rgba(0,0,0,0.45),
    0 2px 0 rgba(255,255,255,0.10) inset;
}

.related-app-wrapper .related-app-splash .app_launch_splash__name {
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.2px;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 10px 30px rgba(0,0,0,0.65);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  padding: 0 6px;
}

/* REVERT NOTE:
   - If related previews misbehave, remove `.related-app-preview-container` and
     `.related-app-interaction-blocker` rules and restore the previous AppRunner
     rendering in AppDetailDrawer's related apps section. */

.related-app-wrapper {
  position: relative;
  cursor: pointer;
}

.related-app-wrapper .related-app-runner,
.related-app-wrapper .related-app-runner * {
  pointer-events: none;
}

/* Human Quality Score Component */
.human-quality-score {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 24px 0;

}

.human-quality-score__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
}
body.admin .human-quality-score__title {
  color: black;
}
.human-quality-score__title::after,
.human-quality-score__title::before {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background-color: #e5e7eb;
  margin: 8px 0;
}
.human-quality-score__title>span {
  flex-shrink: 0;
}
.human-quality-score__buttons {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 4px;
  padding: 4px;
}

.human-quality-score__button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  font-size: 16px;
  font-weight: 500;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  color: #374151;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  flex: 1;
}

.human-quality-score__button:focus {
  outline: none;
  ring: 2px;
  ring-color: #3b82f6;
  ring-offset: 1px;
}

.human-quality-score__button:hover:not(.human-quality-score__button--disabled) {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

.human-quality-score__button--selected {
  background-color: #2563eb;
  border: 2px solid  #2563eb;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.human-quality-score__button--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.human-quality-score__error {
  font-size: 12px;
  color: #dc2626;
}

.human-quality-score__current {
  font-size: 12px;
  color: #6b7280;
}

/* Self-Destruct Warning */
.self-destruct-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  margin: 24px 0;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
  border: 1px solid rgba(255, 193, 7, 0.3);
  border-radius: 12px;
  color: #ff9800;
}

.self-destruct-icon {
  font-size: 24px;
  flex-shrink: 0;
  line-height: 1;
}

.self-destruct-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.self-destruct-title {
  font-size: 15px;
  font-weight: 600;
  color: #ff9800;
  line-height: 1.4;
}

.self-destruct-countdown {
  font-weight: 700;
  color: #f57c00;
}

.self-destruct-message {
  font-size: 13px;
  color: #f57c00;
  line-height: 1.5;
  opacity: 0.9;
}

/* Drawer layout for embedded feed is in main.css for load order guarantee */

#homescreen_details_drawer.transform-drawer .rating-container > * {
  padding: 0 24px;
}

/* Related Apps Section padding override */
#homescreen_details_drawer.transform-drawer .related-apps-section {
  padding: 0;
}

/* Author Share block (AppDetailDrawer) */
.drawer-content .author-share-block {
  margin: 12px auto;
  padding: 14px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  max-width: calc(100% - 30px);
}

.drawer-content .author-share-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 10px;
}

.drawer-content .author-share-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.drawer-content .author-share-link {
  flex: 1;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.86);
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-content .author-share-copy-btn {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.94);
}

.drawer-content .author-share-copy-btn:active {
  transform: scale(0.98);
  background: rgba(255, 255, 255, 0.14);
}

.drawer-content .author-share-qr {
  margin-top: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
}

.drawer-content .author-share-qr svg {
  display: block;
  /* Let the SVG render at its intrinsic pixel size to keep module edges crisp.
     (Fixed 200x200 can force non-integer scaling and break scanning.) */
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: 22px;
}

.drawer-content .author-share-steps {
  margin-top: 10px;
  margin-bottom: 0;
  /* Force ordered list markers (some global resets remove them) */
  list-style: decimal;
  list-style-position: outside;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.70);
}

.drawer-content .author-share-steps li {
  margin: 4px 0;
}

.drawer-content .qr-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin: 0 4px;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  vertical-align: -3px;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}

.drawer-content .qr-inline-btn svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

body.light_mode .drawer-content .author-share-block {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light_mode .drawer-content .author-share-title {
  color: rgba(0, 0, 0, 0.86);
}

body.light_mode .drawer-content .author-share-link {
  color: rgba(0, 0, 0, 0.76);
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(0, 0, 0, 0.08);
}

body.light_mode .drawer-content .author-share-copy-btn {
  color: rgba(0, 0, 0, 0.86);
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.10);
}

body.light_mode .drawer-content .author-share-copy-btn:active {
  background: rgba(0, 0, 0, 0.08);
}

body.light_mode .drawer-content .qr-inline-btn {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.10);
  color: rgba(0, 0, 0, 0.78);
}

body.light_mode .drawer-content .author-share-hint {
  color: rgba(0, 0, 0, 0.58);
}

/* Dark theme support */
.app_component.theme-dark .self-destruct-warning {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.15) 100%);
  border-color: rgba(255, 193, 7, 0.4);
}

.app_component.theme-dark .self-destruct-title,
.app_component.theme-dark .self-destruct-message {
  color: #ffb74d;
}

.app_component.theme-dark .self-destruct-countdown {
  color: #ffa726;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   LIGHT MODE – App Details Drawer Content
   Ensures all drawer content is readable with dark text on white background.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Drawer content text colors - scoped to homescreen_details_drawer */
body.light_mode #homescreen_details_drawer .drawer-content,
body.light_mode #homescreen_details_drawer.transform-drawer .drawer-content {
  color: #1c1c1e !important;
}

/* App component in drawer - ensure text is dark */
body.light_mode #homescreen_details_drawer .app_component .app-name,
body.light_mode #homescreen_details_drawer .app_component .details .name,
body.light_mode #homescreen_details_drawer .drawer-content .app_component .app-name,
body.light_mode #homescreen_details_drawer .drawer-content .app_component .details .name {
  color: #1c1c1e !important;
}

body.light_mode #homescreen_details_drawer .app_component .app_creator_user_wrap,
body.light_mode #homescreen_details_drawer .drawer-content .app_component .app_creator_user_wrap {
  color: rgba(0, 0, 0, 0.6) !important;
}

body.light_mode #homescreen_details_drawer .app_component .details .stats_wrap,
body.light_mode #homescreen_details_drawer .drawer-content .app_component .details .stats_wrap {
  color: #1c1c1e !important;
}

body.light_mode #homescreen_details_drawer .app_component .details .stats_wrap svg,
body.light_mode #homescreen_details_drawer .drawer-content .app_component .details .stats_wrap svg {
  fill: #1c1c1e !important;
  color: #1c1c1e !important;
}

body.light_mode #homescreen_details_drawer .app_component .install_count,
body.light_mode #homescreen_details_drawer .drawer-content .app_component .install_count {
  color: #1c1c1e !important;
}

/* Author share steps text */
body.light_mode #homescreen_details_drawer .drawer-content .author-share-steps {
  color: rgba(0, 0, 0, 0.6) !important;
}

/* Comments button in drawer */
body.light_mode #homescreen_details_drawer .comments_button {
  background: rgba(0, 0, 0, 0.06) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
  color: #1c1c1e !important;
}

body.light_mode #homescreen_details_drawer .comments_button .comments_count {
  color: #1c1c1e !important;
}

body.light_mode #homescreen_details_drawer .comments_button svg,
body.light_mode #homescreen_details_drawer .comments_button svg path {
  fill: #1c1c1e !important;
}
/* App Feed */
.system-app-page .app_feed_wrapper { /* When displayed as a homescreen */
    position: absolute;
    inset: 0;
    z-index: auto;
}

.app_feed_wrapper {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 999;
    background: #000;
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.page.feed-page .app_feed_wrapper {
    position: absolute;
    inset: 0;
    /* Prevent iOS Safari tile eviction when page scrolls off-screen */
    transform: translateZ(0);
}

/* Embedded mode: in-flow layout, not absolute/fixed */
.app_feed_wrapper.app_feed_wrapper--embedded {
    position: relative;   /* IMPORTANT: in-flow, not absolute */
    flex: 1;              /* allow parent to size it */
    min-height: 0;        /* critical in nested flex+scroll */
    z-index: auto;
    background: transparent;
    width: 100%;
    height: auto;         /* don't rely on % heights */
}

.app_feed_wrapper--embedded .app_feed_container {
    flex: 1;
    min-height: 0;
    height: auto;         /* let flex drive height */
    /* Allow scroll chaining to parent drawer (fix iOS/WebKit bounce trapping). */
    overscroll-behavior: auto;
}

/* Fix viewport-based sizing inside a container */
.app_feed_wrapper--embedded .app_feed_overlay {
    height: 100%;
    top: 0;
}

.app_feed_wrapper--embedded .app_feed_item {
    contain-intrinsic-size: auto;
}

/* AppDetailDrawer: flex layout for embedded feed */
#homescreen_details_drawer.transform-drawer .drawer-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

#homescreen_details_drawer.transform-drawer .rating-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#homescreen_details_drawer.transform-drawer .related-apps-section {
    /* This is the key: it must have a definite height to give 1fr meaning */
    flex: 1;
    min-height: 0;

    display: grid;
    grid-template-rows: 1fr; /* title is rendered inside .app_feed_container */
}

#homescreen_details_drawer.transform-drawer .related-apps-feed-container {
    overflow: hidden;
    /* Match the actual available drawer body height so:
       - Reviews can scroll fully away
       - Once feed reaches the top, the drawer scroll ends and the feed scroll takes over
       Header height is measured in JS and set as a CSS var on `.rating-container`. */
    height: calc(100vh - var(--safe-top) - var(--drawer-header-height-px, 100px));
}

#homescreen_details_drawer.transform-drawer .related-apps-feed-container .app_feed_wrapper--embedded {
    flex: 1;
    min-height: 0;
    height: 100%;
}

.related-apps-feed-container .app_feed_overlay {
    padding-bottom: 15px !important;
}


body.android .related-apps-feed-container .app_feed_overlay .app_feed_info_wrap.above_dock {
    bottom: 10px !important;
}

body.ios .related-apps-feed-container .app_feed_overlay .app_feed_info_wrap.above_dock {
    bottom: var(--safe-bottom) !important;
}

body.ios .profile-feed-container .app_feed_info_wrap.above_dock {
    bottom: var(--safe-bottom) !important;
}

body.ios .profile-feed-container .app_feed_overlay {
    padding-bottom: var(--safe-bottom) !important;
}

/* When the global dock is in feed mode, hide the per-item feed "dock" bar.
   Use `.app_feed_wrapper` instead of `.page.feed-page` to avoid a first-load race where the
   `.feed-page` class isn't yet synced when Feed is the favorite homescreen. */
/* Only hide the per-item dock for the *global* feed wrapper.
   Embedded feeds (e.g. related apps inside AppDetailDrawer) should keep their dock visible. */
body.dock-feed-mode .app_feed_wrapper:not(.app_feed_wrapper--embedded) .app_feed_info_wrap.above_dock {
    display: none !important;
}

/* But keep the feed dock visible when rendered inside the global dock. */
/* body.dock-feed-mode #dock .app_feed_info_wrap.above_dock {
    display: flex !important;
    background: none;
    backdrop-filter: none;
    border: none;
    padding: 0;
    margin: 0;
} */

.app_feed_container {
    height: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    scroll-snap-type: y mandatory;
    position: relative;
    width: 100%;
    /* Custom scroll properties */
    scroll-behavior: auto;
}

.app_feed_inner {
    position: relative;
    height: 100%;
}

/* Virtualized feed rows:
   Each "snap page" is an absolutely-positioned wrapper div inside `.app_feed_inner`.
   `scroll-snap-stop` only applies to snap *children*, so set it on the wrapper that has the snap point. */
.app_feed_inner > div {
    scroll-snap-stop: always;
}

.pull_to_refresh_indicator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    color: #d8d8d8;
    font-size: 12px;
    border-radius: 20px;
    z-index: 10;
    transition: opacity 0.2s;
}

.pull_to_refresh_indicator svg {
    height: 32px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.app_feed_container::-webkit-scrollbar {
    display: none!important;
}

.app_feed_loading {
    display: block;
    object-fit: contain;
    height: 20%;
    width: 20%;
    margin: auto;
    top: 50%;
    transform: translateY(-50%);
    position: relative;
}


@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

@keyframes scalePulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

.app_feed_item {
    height: 100%;
    width: 100%;
    position: relative;
    scroll-snap-align: center;
    /* Forces scrolling to stop at each snap point.
       NOTE: valid values are `normal | always` (there is no `none`). */
    scroll-snap-stop: always;
    user-select: none;
    touch-action: manipulation; /* Improves touch handling */
    /* content-visibility: auto; */
    overflow: hidden;
    contain-intrinsic-size: 100svh;
    isolation: isolate;
    
    will-change: transform; /* Keeps it on GPU */
}

.scrolling-animation {
    transition: scroll-top 0.2s cubic-bezier(0.33, 1, 0.68, 1);
}

.app_feed_iframe {
    width: 100%;
    height: 100%;
    border: none;
    
    touch-action: manipulation;
}

.app_feed_iframe iframe,
iframe#app {
    touch-action: manipulation;
}

/* (removed empty ruleset warning) */

.app_feed_iframe iframe, iframe#app {
    height: 100vh !important;
}

.app_feed_back_btn {
    display: none !important;
}

.app_splash_screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60000;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    touch-action: none;
}



.app_social_interaction{
    position: absolute;
    right: 18px;
    top: calc(50% - var(--safe-bottom));
    transform: translateY(-50%);
    gap: 22px;
    display: flex;
    flex-direction: column;
    transition: transform 0.17s ease, opacity 0.17s ease; /* TODO - UNCOMMENT THIS */
}

@media (orientation: landscape) {
    .app_social_interaction {
        gap: 14px;
    }

    .app_social_interaction .counter {
        font-size: 14px;
    }

    body.ios .app_social_interaction {
        margin-right: calc(var(--safe-right) + 4px);
    }

    body.try_mode .app_social_interaction,
    body.opened_app .app_social_interaction {
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

.feed-app-details .install_app{
    border-radius: 30px !important;
}
.app_social_interaction .interaction_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* Move whole author stat up slightly */
.app_social_interaction .interaction_item.author {
    position: relative;
    top: -10px;
}
.app_social_interaction .interaction_item .user_avatar {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: #fff;
}

.app_social_interaction .interaction_item .user_avatar .follow_plus_slot {
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app_social_interaction .interaction_item .user_avatar .follow_plus_placeholder {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid transparent;
    background: transparent;
}

/* Feed author follow "+" button (replaces follower count counter) */
.app_social_interaction .interaction_item .user_avatar .follow_plus_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    padding: 0;
    color: #000;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 0px 6px 1px rgba(0, 0, 0, 0.3);
}

.app_social_interaction .interaction_item .user_avatar .follow_check_badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    padding: 0;
    color: #000;
    pointer-events: none;
}

.app_social_interaction .interaction_item .user_avatar .follow_plus_btn svg {
    width: 11px;
    height: 11px;
    /* plus_badge.svg is stroke-based */
    fill: none;
}

.app_social_interaction .interaction_item .user_avatar .follow_check_badge svg {
    width: 11px;
    height: 11px;
    fill: none;
}

.app_social_interaction .interaction_item .user_avatar .follow_plus_btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

.app_social_interaction .interaction_item .user_avatar .follow_plus_btn:active {
    transform: scale(0.96);
}
.app_social_interaction .interaction_item.author img {
    width: 32px;
    height: 32px;
    border-radius: 50px;
    object-fit: cover;
    pointer-events: none;
}

.author_icon {
    pointer-events: none;
}
.app_social_interaction .interaction_item svg {
    transition: transform .3s ease-in-out;
    will-change: transform;
    position: relative;
    z-index: 9999;
}

/* .app_social_interaction .interaction_item svg .icon_shadow {
    transition: opacity .3s ease-in-out;
} */

.app_social_interaction .interaction_item .counter {
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0.3), -1px 0 0 rgba(0, 0, 0, 0.3), 0 1px 0 rgba(0, 0, 0, 0.3), 0 -1px 0 rgba(0, 0, 0, 0.3);
    /* transition: text-shadow .3s ease-in-out; */
}

.app_social_interaction .interaction_item.liked svg .icon_shadow,
.app_social_interaction .interaction_item.shared svg .icon_shadow,
.app_social_interaction .interaction_item.saved svg .icon_shadow {
    opacity: 0;
}

.app_social_interaction .interaction_item.liked .counter,
.app_social_interaction .interaction_item.shared .counter,
.app_social_interaction .interaction_item.saved .counter {
    text-shadow: none;
}

@media (orientation: landscape) {
    .app_social_interaction {
        top: calc(50% + var(--safe-top) + 21px);
        gap: 14px;
    }
    .app_social_interaction .interaction_item {
        gap: 2px;
    }
    .app_social_interaction .interaction_item svg,
    .app_social_interaction .interaction_item .user_avatar > div,
    .app_social_interaction .interaction_item .user_avatar > img{
        height: 23px;
        width: 23px;
    }

    .app_social_interaction .interaction_item .user_avatar .follow_plus_btn {
        width: 20px;
        height: 20px;
    }

    .app_social_interaction .interaction_item .user_avatar .follow_check_badge {
        width: 20px;
        height: 20px;
    }

    .app_social_interaction .interaction_item .user_avatar .follow_plus_slot {
        height: 20px;
    }

    .app_social_interaction .interaction_item .user_avatar .follow_plus_placeholder {
        width: 20px;
        height: 20px;
    }
}

.app_social_interaction .interaction_item.liked {
    color: red;
}
.app_social_interaction .interaction_item.saved {
    color: yellow;
}
.app_social_interaction .interaction_item.shared {
    color: #3b82f6;
}

.app_social_interaction .svg {
    will-change: transform;
    
    backface-visibility: hidden;
}

.app_feed_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    top: var(--safe-top);
    /* bottom: var(--safe-bottom); */
    /* height: calc(100% + var(--safe-bottom)); */
    /* height: 100%; */
    height: 100dvh;
    width: 100%;
    padding: 15px;
    padding-bottom: calc(var(--safe-bottom) + 15px);
    background: linear-gradient(transparent, rgba(0,0,0,0.15));
    z-index: 9;
    color: white;
    text-align: left;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-end;
    
    will-change: transform;
    /* -webkit-backface-visibility: hidden;
    backface-visibility: hidden; */
    transition: opacity 0.25s ease-in-out;
    /* opacity: 1; */
    /* contain: layout paint; */
    overflow: hidden;
    z-index: 999;
}

.app_feed_overlay.hide-overlay {
    /* opacity: 0;
    visibility: hidden; */
    pointer-events: none;
    background: none;
}

.app_feed_overlay.hide-overlay .app_social_interaction {
    transform: translate(56px, -50%);
    transition: none;
    /* opacity: 0; */
}

.app_feed_overlay{
    visibility: visible;
    will-change: transform;
}

/* Video Overlay */
.app_feed_video_overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    top: var(--safe-top);
    height: 100%;
    width: 100%;
}

.app_feed_video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.skip_video_btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    z-index: 101;
    backdrop-filter: blur(10px);
}

.skip_video_btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

.user_avatar .avatar_fallback {
    width: attr(data-size px);
    height: attr(data-size px);
    background: attr(data-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(attr(data-size) * 0.4px);
    font-weight: 500;
    margin: 0 auto;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-11-24 20:8:56
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation roll-in-left
 * ----------------------------------------
 */
 @keyframes roll-in-left {
    0% {
      transform: translateX(-800px) rotate(-540deg);
      opacity: 0;
    }
    100% {
      transform: translateX(0) rotate(0deg);
      opacity: 1;
    }
}

.roll-in-left {
	animation: roll-in-left 0.6s ease-out both;
}

.app_feed_info_wrap{
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    align-items: flex-start;
    position: relative;
    bottom: 89px;
    /* padding-bottom: 20px; */
    padding-bottom: 2px;
    /* display: none; */
}

/* .app_feed_info_wrap.above_dock {
    background: rgb(255 255 255 / 10%);
    padding: 8px 12px;
    border-radius: 18px;
    bottom: calc(var(--safe-bottom) + 10px);
    backdrop-filter: blur(6px);
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.17s ease-in-out, opacity 0.17s ease-in-out;  TODO - UNCOMMENT THIS 
    border: 1px solid #ffffff1a;
    position: relative;
    overflow: visible;
} 
*/

/* Feed dock bar rendered inside the global dock (positioning differs from feed overlay). */
#dock .app_feed_info_wrap.above_dock {
    position: static;
    bottom: auto;
}

.dock .dock-snap-page--feed .app_feed_info_wrap.above_dock {
    width: 100%;
}

.app_feed_info_wrap.above_dock .app_component .left {
    align-items: center;
    gap: 14px;
}

@media (orientation: landscape) {
    .app_feed_wrapper {
        width: calc(100% - var(--safe-left) - var(--safe-right));
    }

    /* Hide the feed info card when a page route (AI, DM, Factory, etc.) is in view,
       or when on a homescreen (apps-page) rather than a feed page.
       The card becomes position:fixed in landscape and can bleed through other pages. */
    body:has(.os-page-visible) .app_feed_info_wrap.above_dock,
    body:not(.dock-feed-mode):not(:has(.page.feed-page.in-view)):not(:has(.page.app-page.in-view)) .app_feed_info_wrap.above_dock {
        display: none !important;
    }

    /* Float the card as a fixed overlay above the page dots */
    .app_feed_info_wrap.above_dock {
        position: fixed;
        bottom: calc(var(--safe-bottom, 0px) + 42px);
        left: 0;
        right: 0;
        width: 370px;
        max-width: calc(100vw - 160px);
        margin: 0 auto;
        z-index: 100;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 25px;
        padding: 8px 14px;
        overflow: hidden;
    }

    /* Hide the empty dock sidebar in landscape feed mode */
    body.dock-feed-mode .dock,
    body.dock-feed-mode #dock {
        opacity: 0 !important;
        pointer-events: none !important;
    }
    body.ios .app_feed_info_wrap.above_dock {
        bottom: calc(var(--safe-bottom, 0px) + 42px);
        padding: 8px 14px;
    }

    /* Horizontal row layout */
    .app_feed_info_wrap.above_dock .app_component {
        flex-direction: row;
        align-items: center;
        padding: 4px 0;
        gap: 10px;
        height: auto;
    }

    .app_feed_info_wrap.above_dock .app_component .left {
        flex-direction: row;
        align-items: center;
        gap: 12px;
        height: auto;
        max-width: none;
    }

    .app_component .details .stats_wrap,
    .app_feed_details .stats_wrap {
        flex-direction: row !important;
        gap: 7px !important;
    }

    .app_component .app_creator {
        max-width: 120px;
        margin: 0;
    }

    .app_feed_info_wrap .details {
        gap: 3px !important;
        max-width: none;
    }
    .app_feed_info_wrap .app-name {
        font-size: 14px;
    }
    .app_feed_info_wrap.above_dock .icon_wrap {
        border-radius: 12px;
        width: 46px;
        min-width: 46px;
        height: 46px;
    }
}

.app_feed_info_wrap.above_dock.show {
    display: flex !important;
}

body.try_mode:not(.feed_try_exit_animation) .app_feed_info_wrap.above_dock {
    transform: translateY(40px);
    opacity: 0;
}
body.opened_app:not(.feed_try_exit_animation) .app_feed_info_wrap.above_dock {
    transform: translateY(40px);
    opacity: 0;
}

/* Enter try-mode instantly on tap without affecting edge-swipe exit animations. */
body.try_mode_instant .app_feed_info_wrap.above_dock {
    transition: none !important;
}

/* Override .app_feed_info_wrap.above_dock - var(--safe-bottom) is 0 on Android PWA */
/* @media (display-mode: fullscreen) {
    body.android .app_feed_info_wrap.above_dock {
        bottom: 30px !important; /* Remove safe area from calculation 
    } 
} */

.app_feed_info {
    display: flex;
    /* align-items: center; */
    align-items: flex-start;
    color: #fff;
    flex: 1;
}

.app_feed_details {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

app_feed_icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    margin-right: 10px;
    object-fit: cover;
}

.app_feed_details {
    flex: 1;
}
.app_feed_details .app_feed_author_bottom {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 500;
}
.app_feed_details .app_feed_author_bottom img {
    width: 13px;
    height: 13px;
    object-fit: cover;
    border-radius: 30px;
}

.app_feed_name {
    font-weight: bold;
    font-size: 16px;
    /* margin-bottom: 5px; */
}

.app_feed_tagline {
    font-size: 13px;
    opacity: 0.8;
}

.app_component .details .stats_wrap,
.app_feed_details .stats_wrap {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: 7px;
    font-size: 12px;
}
.app_component .details .stats_wrap > *,
.app_feed_details .stats_wrap > * {
    display: flex;
    align-items: center;
}

.app_component .details .stats_wrap svg,
.app_feed_details .stats_wrap svg {
    width: 14px;
    height: 14px;
    fill: #000;
}

.app_feed_icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    margin-right: 10px;
    object-fit: cover;
    background-color: rgb(148 148 148 / 56%);
}

.app_feed_info_wrap .left{
    align-items: center;
}

.app_feed_info_wrap .name{
    line-height: normal;
}
.app_feed_info_wrap .app-name{
    font-size: 18px;
    font-weight: 600;
    margin-top: 0;
}

.app_feed_info_wrap .details{
    gap: 6px;
}

.app_feed_info_wrap .button_1 {
    margin-right: 0;
    padding: 6px 9px;
    font-size: 13px;
}

/* Feed component styles */
.app_component_try.feed_component .install_count {
    color: #fff;
}

.app_component_try.feed_component .left {
    flex-direction: row;
    gap: 10px; /* test new */
}

.app_component_try.feed_component .left .icon_wrap {
    width: 42px;
    height: 42px;
    min-width: 42px;
    flex-shrink: 0;
    flex-grow: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    overflow: hidden;
}

.app_component_try.feed_component .left .app_creator_user_wrap {
    font-size: 13px;
    font-weight: 500;
}

.app_component_try.feed_component .left .icon_wrap {
    width: 42px;
    height: 42px;
    object-fit: cover;
}

.app_component_try.feed_component .left .details {
    gap: 6px;
}

.app_component_try.feed_component .left .details .name {
    font-weight: bold;
    line-height: normal;
    text-align: left;
}

.app_component_try.feed_component.s .app_creator {
    display: flex; 
}

.app_component_try.feed_component {
    display: flex;
    flex-direction: row;
    position: initial;
    width: 100%;
    border-radius: 0;
    height: 70px;
    /* height: 100px; */
    align-items: flex-start;
    padding: 10px 15px 0 15px;
    box-shadow: none;
    /* transition: opacity 0.3s ease, transform 0.3s ease; */
    transition: opacity 0.3s ease, transform 0.3s ease;

    transform: translate(0px, -87px);
    background: transparent;
    background-color: transparent;
    border: none;
}

.app_component.feed_component.try_mode_component{
    transform: none;
    position: sticky;
    overflow: visible;
}
.app_component.feed_component.opened_app_component{
    transform: none;
    position: sticky;
    overflow: visible;
}

/* Feed try-mode edge-swipe exit settle:
   Prevent header icons from briefly re-applying `.try_mode` hidden transforms during commit. */
body.feed_try_exit_settle.try_mode .search_icon,
body.feed_try_exit_settle.try_mode .ai_assistant_icon,
body.feed_try_exit_settle.try_mode .app_logo_icon,
body.feed_try_exit_settle.try_mode .app_notifications_icon {
    /* IMPORTANT: don't override transform/opacity here (it causes a snap/jump at commit).
       Only disable transitions to avoid any transient CSS-driven animation. */
    transition: none !important;
}

body.feed_try_exit_settle.try_mode #dm-envelope-icon,
body.feed_try_exit_settle.try_mode #notification-bell-icon {
    transition: none !important;
}

/* Feed Loading */
.feed_loading_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: relative;
    perspective: 2000px;
    transform-style: preserve-3d;
}

/* Text appears above video - positioned absolutely */
.feed_loading_text_container {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 10;
    perspective: 1000px; /* Required for translateZ to be visible */
}

.feed_loading_container .total_apps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    margin-top: 12px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    z-index: 10;
    text-transform: uppercase;
    font-size: 17px;
    font-family: "Alfa Slab One", "Arial Black", "Arial Bold", sans-serif;
    font-weight: 700;
    color: rgb(255, 250, 250);
    background: linear-gradient(-23deg, #b20000, rgb(255, 59, 48));
    padding: 7px 12px;
    border-radius: 6px;
    width: fit-content;
    transform-origin: top;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

/* Glow effect - commented out
.feed_loading_container .total_apps span {
    display: inline-block;
    will-change: text-shadow;
}

.feed_loading_container .total_apps span:nth-child(10) {
    margin-right: 8px;
}
*/

.feed_loading_video_wrapper {
    position: relative;
    width: 50%;
    height: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* No animation - stays in place */
}

.app_feed_loading {
    display: block;
    object-fit: contain;
    height: 100%;
    width: 100%;
    position: relative;
    animation: bounce-in-top 1.1s both;
}

.feed_loading_text {
    display: flex;
    flex-direction: column;
    line-height: 70%; /* Decreased line height */
    font-family: "Alfa Slab One", "Arial Black", "Arial Bold", sans-serif;
    font-weight: 400;
    font-size: clamp(5rem, 20vw, 16rem); /* Increased ~2x */
    position: relative;
    color: #fff;
    cursor: default;
    white-space: nowrap;
    /* Initial state - animation classes will handle opacity and transform */
    opacity: 0;
    transform: translateZ(700px) translateY(-300px) scale3d(1, 1, 1);
}

/* Ensure animation runs when class is applied */
.feed_loading_text.slide-in-bck-top {
    animation: slide-in-bck-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s both;
    -webkit-animation: slide-in-bck-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s both;
}

.feed_loading_text.jello-horizontal-text {
    animation: jello-horizontal-text 0.9s ease both;
    -webkit-animation: jello-horizontal-text 0.9s ease both;
    opacity: 1; /* Ensure opacity stays at 1 after animation */
}

.feed_loading_text span {
    display: block;
}

.feed_loading_text_store {
    color: #fff; /* Keep white */
}

/* Bounce-in-top animation */
@-webkit-keyframes bounce-in-top {
    0% {
      -webkit-transform: translateY(-500px);
              transform: translateY(-500px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 0;
    }
    38% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
    55% {
      -webkit-transform: translateY(-65px);
              transform: translateY(-65px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    72% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    81% {
      -webkit-transform: translateY(-28px);
              transform: translateY(-28px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    90% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    95% {
      -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
}

@keyframes bounce-in-top {
    0% {
      -webkit-transform: translateY(-500px);
              transform: translateY(-500px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
      opacity: 0;
    }
    38% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
      opacity: 1;
    }
    55% {
      -webkit-transform: translateY(-65px);
              transform: translateY(-65px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    72% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    81% {
      -webkit-transform: translateY(-28px);
              transform: translateY(-28px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    90% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
    95% {
      -webkit-transform: translateY(-8px);
              transform: translateY(-8px);
      -webkit-animation-timing-function: ease-in;
              animation-timing-function: ease-in;
    }
    100% {
      -webkit-transform: translateY(0);
              transform: translateY(0);
      -webkit-animation-timing-function: ease-out;
              animation-timing-function: ease-out;
    }
}

.bounce-in-top {
    animation: bounce-in-top 1.1s both;
}

/* Glow effect - commented out
.feed_loading_container .total_apps.glow-active span {
    animation: glow-text 2s ease-in-out both infinite;
}

.feed_loading_container .total_apps.glow-active span:nth-child(1) { animation-delay: -0.133s; }
.feed_loading_container .total_apps.glow-active span:nth-child(2) { animation-delay: -0.267s; }
.feed_loading_container .total_apps.glow-active span:nth-child(3) { animation-delay: -0.4s; }
.feed_loading_container .total_apps.glow-active span:nth-child(4) { animation-delay: -0.533s; }
.feed_loading_container .total_apps.glow-active span:nth-child(5) { animation-delay: -0.667s; }
.feed_loading_container .total_apps.glow-active span:nth-child(6) { animation-delay: -0.8s; }
.feed_loading_container .total_apps.glow-active span:nth-child(7) { animation-delay: -0.933s; }
.feed_loading_container .total_apps.glow-active span:nth-child(8) { animation-delay: -1.067s; }
.feed_loading_container .total_apps.glow-active span:nth-child(9) { animation-delay: -1.2s; }
.feed_loading_container .total_apps.glow-active span:nth-child(10) { animation-delay: -1.333s; }
.feed_loading_container .total_apps.glow-active span:nth-child(11) { animation-delay: -1.467s; }
.feed_loading_container .total_apps.glow-active span:nth-child(12) { animation-delay: -1.6s; }
.feed_loading_container .total_apps.glow-active span:nth-child(13) { animation-delay: -1.733s; }
.feed_loading_container .total_apps.glow-active span:nth-child(14) { animation-delay: -1.867s; }
.feed_loading_container .total_apps.glow-active span:nth-child(15) { animation-delay: -2s; }
*/

/* ──────────────────────────────────────────────────────────────────────────────
   Homescreen app feed: first item looks like the clean fullscreen app homescreen.
   Hide feed chrome (social interactions, back button, splash) so item 0 appears
   identical to the old AppHomescreen UI.
   ────────────────────────────────────────────────────────────────────────────── */
.homescreen-app-feed .app_feed_item[data-feed-index="0"] .app_feed_overlay {
    /* display: none; */
}
.homescreen-app-feed .app_feed_item[data-feed-index="0"] .app_feed_back_btn {
    display: none;
}
.homescreen-app-feed .app_feed_item[data-feed-index="0"] .splash-screen-loading {
    display: none;
}

/* Ensure the homescreen-app-feed wrapper fills the page */
.homescreen-app-feed {
    width: 100%;
    height: 100%;
}

/* Light mode support */
body.light_mode .app_feed_wrapper {
    background: #f7f9fd;
}

/* Splash screen should always be dark, regardless of theme */
body.light_mode .app_splash_screen {
    background: #000 !important;
}

body.light_mode .app_splash_screen .feed_loading_container {
    background: transparent !important;
}

body.light_mode .pull_to_refresh_indicator {
    color: #6b7280;
}

body.light_mode .app_feed_overlay {
    background: linear-gradient(transparent, rgba(0,0,0,0.05));
    color: #111827;
}

body.light_mode .app_feed_info {
    color: #111827;
}


/* Red gradient glow effect in light mode - match dark mode style - REMOVED */
/* body.light_mode .app_feed_info_wrap.above_dock::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    background: radial-gradient(
        ellipse at center,
        rgba(220, 38, 38, 0.4) 0%,
        rgba(220, 38, 38, 0.25) 20%,
        rgba(220, 38, 38, 0.1) 40%,
        transparent 70%
    );
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
} */

/* Light mode feed icons: match dark mode style (white) + drop-shadow for variable backgrounds */
body.light_mode .app_social_interaction .interaction_item {
    color: #fff;
}

body.light_mode .app_social_interaction .interaction_item svg {
    color: #fff;
    fill: #fff;
    stroke: #fff;
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}

body.light_mode .app_social_interaction .counter {
    color: #fff;
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5), 0 0 1px rgba(0, 0, 0, 0.3);
}

body.light_mode .app_social_interaction .interaction_item .user_avatar {
    color: #fff;
}

body.light_mode .app_social_interaction .interaction_item .user_avatar img {
    filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}

body.light_mode .app_social_interaction .interaction_item .user_avatar .follow_plus_btn {
    background: #fff;
    color: #000;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

body.light_mode .app_social_interaction .interaction_item .user_avatar .follow_check_badge {
    background: #fff;
    color: #000;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

/* Preserve active state colors in light mode */
body.light_mode .app_social_interaction .interaction_item.liked {
    color: red;
}
body.light_mode .app_social_interaction .interaction_item.liked svg {
    color: red;
    fill: red;
}
body.light_mode .app_social_interaction .interaction_item.saved {
    color: yellow;
}
body.light_mode .app_social_interaction .interaction_item.saved svg {
    color: yellow;
    fill: yellow;
}
body.light_mode .app_social_interaction .interaction_item.shared {
    color: #3b82f6;
}
body.light_mode .app_social_interaction .interaction_item.shared svg {
    color: #3b82f6;
    fill: #3b82f6;
}

body.light_mode .app_component .details .stats_wrap svg,
body.light_mode .app_feed_details .stats_wrap svg {
    fill: #6b7280;
}

body.light_mode .app_feed_icon {
    background-color: rgb(148 148 148 / 30%);
}

body.light_mode .app_component_try.feed_component .install_count {
    color: #111827;
}

body.light_mode .skip_video_btn {
    background: rgba(255, 255, 255, 0.8);
    color: #111827;
}

body.light_mode .skip_video_btn:hover {
    background: rgba(255, 255, 255, 0.95);
}

/* Splash screen text should always be light on dark background, regardless of theme */
body.light_mode .feed_loading_container .total_apps {
    color: rgb(255, 250, 250) !important;
    background: linear-gradient(-23deg, #b20000, rgb(255, 59, 48)) !important;
}

@media (orientation: landscape) {
    .feed_loading_text {
        font-size: clamp(3rem, 12vh, 7rem);
    }
}

body.light_mode .feed_loading_text {
    color: #fff !important;
}

body.light_mode .feed_loading_text_store {
    color: #fff !important;
}

/* ── Repost comment overlay (inside .app_feed_overlay, above info card) ── */

.app_feed_repost_comment {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 14px 12px;
    margin: 0 12px 14px 12px;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    max-width: calc(100% - 70px);
}

.repost_comment__badge {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.02em;
}

.repost_comment__badge svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

.repost_comment__text {
    font-size: 13.5px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.9);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.light_mode .app_feed_repost_comment {
    background: rgba(255, 255, 255, 0.65);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light_mode .repost_comment__badge {
    color: rgba(0, 0, 0, 0.55);
}

body.light_mode .repost_comment__text {
    color: rgba(0, 0, 0, 0.85);
}
.shared-folder-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
}

.shared-folder-loading,
.shared-folder-error {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

.shared-folder-loading .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.shared-folder-error p {
  color: #ff6b6b;
  margin-bottom: 20px;
}

.shared-folder-error button {
  padding: 12px 24px;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.shared-folder-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px;
  padding-top: calc(var(--safe-top) + 20px);
  padding-bottom: calc(var(--safe-bottom) + 20px);
}

.shared-folder-header {
  text-align: center;
  margin-bottom: 24px;
  flex-shrink: 0;
}

.shared-folder-header h1 {
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.shared-folder-header .folder-count {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
}

.shared-folder-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 10px 0;
  align-content: start;
}

.shared-folder-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.shared-folder-item .app-icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  overflow: hidden;
  background: #1a1a1a;
  margin-bottom: 6px;
}

.shared-folder-item .app-icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shared-folder-item .app-name {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-folder-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 20px;
}

.install-button {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

.install-button:active {
  transform: scale(0.98);
}

.install-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.install-as-folder {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.install-as-homescreen {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.auth-hint {
  text-align: center;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 12px;
}

/* Responsive adjustments */
@media (max-width: 320px) {
  .shared-folder-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 500px) {
  .shared-folder-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Light mode support */
body.light_mode .shared-folder-page {
  background: #ffffff;
  color: #111827;
}

body.light_mode .shared-folder-loading .loading-spinner {
  border-color: rgba(0, 0, 0, 0.1);
  border-top-color: #111827;
}

body.light_mode .shared-folder-error p {
  color: #dc2626;
}

body.light_mode .shared-folder-error button {
  background: #f3f4f6;
  color: #111827;
}

body.light_mode .shared-folder-header h1 {
  color: #111827;
}

body.light_mode .shared-folder-header .folder-count {
  color: rgba(0, 0, 0, 0.6);
}

body.light_mode .shared-folder-item .app-icon-wrapper {
  background: #f3f4f6;
}

body.light_mode .shared-folder-item .app-name {
  color: rgba(0, 0, 0, 0.8);
}

body.light_mode .install-as-homescreen {
  background: rgba(0, 0, 0, 0.05);
  color: #111827;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light_mode .auth-hint {
  color: rgba(0, 0, 0, 0.5);
}
body {
    padding-top: var(--safe-top);
}

/* CreationChat Styles */
#chat_creation_drawer {
    color: #e9e9e9;
  }
  
#chat_creation_drawer .drawer {
    /* background: #1e1e1eaa;
    backdrop-filter: blur(20px); */
    background-color: rgba(0, 0, 0, 0.9);
}
  
#chat_creation_drawer .drawer-footer {
    background: transparent;
    padding: 0;
}
  
#chat_creation_drawer .chat {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
    gap: 16px;
}

#chat_creation_drawer .chat_tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

#chat_creation_drawer .chat_title {
    color: #fff;
    font-weight: 500;
}

#chat_creation_drawer .tab_icon {
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

#chat_creation_drawer .drawer-overlay {
    background-color: rgb(92 92 92 / 50%);
}

#chat_creation_drawer .tab_icon.active {
    opacity: 1;
    background-color: #272727;
    color: #ffffff;
}

#chat_creation_drawer .chat_tabs .tab_icon svg {
    display: block;
    height: 24px;
    pointer-events: none;
}

#chat_creation_drawer .messages {
    padding: 10px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
}

#chat_creation_drawer .message {
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 10px;
    max-width: 80%;
    word-break: break-word;
    display: flex;
    flex-flow: column nowrap;
    gap: 4px;
    color: #d8d8d8;
}

#chat_creation_drawer .message.user {
    background-color: #32333e;
    align-self: flex-end;
}

#chat_creation_drawer .message.ai {
    background-color: #4868b1;
    align-self: flex-start;
    color: #ffffff;
    -webkit-user-select: text;
    user-select: text;
}

#chat_creation_drawer .message_timestamp {
    font-size: 12px;
    opacity: 0.7;
}

#chat_creation_drawer .typing_indicator {
    display: flex;
    gap: 4px;
}

#chat_creation_drawer .typing_indicator span {
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

#chat_creation_drawer .typing_indicator span:nth-child(1) { animation-delay: -0.32s; }
#chat_creation_drawer .typing_indicator span:nth-child(2) { animation-delay: -0.16s; }

@keyframes typing {
    0%, 80%, 100% {
    transform: scale(0);
    }
    40% {
    transform: scale(1);
    }
}

#chat_creation_drawer .chat_input {
    display: flex;
    flex-flow: column nowrap;
    /* background-color: #363636; */
    gap: 6px;
    height: auto;
    align-items: stretch;
    width: auto;
    border: none;
    /* border-radius: 12px;
    padding: 12px; */
    background-color: #272727;
    padding: 16px 16px 60px 16px;
    border-radius: 16px 16px 0 0;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

#chat_creation_drawer .chat_inner_wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

#chat_creation_drawer .chat_input_text {
    flex: 1;
    resize: none;
    color: #d8d8d8;
    background: transparent;
    border: none;
    outline: none;
    font-family: inherit;
    line-height: 1.4;
}

#chat_creation_drawer .chat_input_text::placeholder {
    color: #8c8c8c;
}

#chat_creation_drawer .send_message {
    background: none;
    border: none;
    box-shadow: none;
    padding: 8px;
    cursor: pointer;
    color: #d8d8d8;
    border-radius: 6px;
    transition: background-color 0.2s;
}

#chat_creation_drawer .send_message:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#chat_creation_drawer .chat_toolbar {
    display: flex;
    gap: 8px;
}

#chat_creation_drawer .toolbar_btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    color: #d8d8d8;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#chat_creation_drawer .spinner_container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

/* Factory chat drawer: lightweight loading skeleton for messages */
#factory_chat_drawer .chat_messages_skeleton {
    padding: 14px 14px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#factory_chat_drawer .chat_messages_skeleton_row {
    height: 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
}

/* Vary widths to resemble chat bubbles */
#factory_chat_drawer .chat_messages_skeleton_row.from_ai {
    width: 78%;
}

#factory_chat_drawer .chat_messages_skeleton_row.from_user {
    width: 62%;
    margin-left: auto;
}

#factory_chat_drawer .chat_messages_skeleton_row::after {
    content: '';
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
    animation: factory_chat_skeleton_shimmer 1.1s linear infinite;
}

@keyframes factory_chat_skeleton_shimmer {
    0% { transform: translateX(0); }
    100% { transform: translateX(350%); }
}



/* AppChat Page Styles */
.app_chat_page {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #000;
    color: #e9e9e9;
    padding-top: var(--safe-top);
}

.app_chat_page:has(.chat_header_container) {
    padding-top: 0;
}


.app_chat_page_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: #24222a;
    /* border-bottom: 1px solid #363636; */
    gap: 16px;
    box-shadow: 0 0 16px #00000040;
    z-index: 2;
}

.back_button {
    background: none;
    border: none;
    color: #d8d8d8;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.app_chat_title_section {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app_chat_page .chat_title {
    color: #fff;
    font-weight: 500;
    margin-bottom: 8px;
}

.app_chat_page .chat_tabs {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.app_chat_page .tab_icon {
    padding: 8px;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.app_chat_page .tab_icon.active {
    opacity: 1;
    background-color: #363636;
    color: #ffffff;
}

.app_chat_page .tab_icon svg {
    display: block;
    height: 24px;
    pointer-events: none;
}

.app_chat_page_content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.app_chat_page_chat {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
}

.chat_view .messages {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding-bottom: calc(16px + var(--safe-bottom) + var(--kb-inset, 0px));
}

/* iOS Safari (non-standalone): when the chat view is rooted to the visual viewport,
   avoid double keyboard compensation. */
body.ios .app_chat_page .chat_view.vv-root .messages {
    padding-bottom: calc(16px + (var(--safe-bottom) * (1 - var(--im-kb-open, 0))));
}

.chat_view .chat_header_container {
    padding-top: calc(12px + var(--safe-top));
}

.chat_view .message {
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 10px;
    max-width: 80%;
    word-break: break-word;
    display: flex;
    flex-flow: column nowrap;
    gap: 4px;
    position: relative;
    user-select: none;
}

.chat_view .message_copy_feedback {
    position: absolute;
    top: -10px;
    right: 0;
    font-size: 10px;
    color: #cfd8ff;
    background: rgba(0, 0, 0, 0.6);
    padding: 2px 6px;
    border-radius: 6px;
}

.chat_view .message.user {
    background-color: #32333e;
    align-self: flex-end;
    color: #fff;
}

.chat_view .message.ai {
    background-color: #4868b1;
    align-self: flex-start;
    color: #ffffff;
    -webkit-user-select: text;
    user-select: text;
}

.chat_view .message_attachment_image {
    display: block;
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    margin-top: 8px;
    object-fit: contain;
    cursor: pointer;
}

.chat_view .ai-attachment-thumb.clickable {
    cursor: pointer;
}

.chat_view .message_attachment_audio {
    display: block;
    width: 100%;
    max-width: 280px;
    border-radius: 8px;
    margin-top: 8px;
}

.chat_view .message_attachment_video {
    display: block;
    max-width: 100%;
    max-height: 240px;
    border-radius: 8px;
    margin-top: 8px;
}

.chat_view .message_timestamp {
    font-size: 12px;
    opacity: 0.7;
}

.chat_view .typing_indicator {
    display: flex;
    gap: 4px;
}

.chat_view .typing_indicator span {
    width: 8px;
    height: 8px;
    background: currentColor;
    border-radius: 50%;
    animation: typing 1.4s infinite ease-in-out;
}

.chat_view .typing_indicator span:nth-child(1) { animation-delay: -0.32s; }
.chat_view .typing_indicator span:nth-child(2) { animation-delay: -0.16s; }

.app_chat_page_footer {
    background-color: #272727;
    border-top: 1px solid #363636;
    padding: 16px;
    gap: 12px;
}

.chat_view .chat_inner_wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.chat_view .chat_input_text {
    flex: 1;
    resize: none;
    color: #d8d8d8;
    background: #363636;
    border: 1px solid #4a4a4a;
    border-radius: 8px;
    padding: 12px;
    outline: none;
    font-family: inherit;
    line-height: 1.4;
    min-height: 44px;
}

/* iOS: prevent focus-zoom (can look like layout jump). */
body.ios .chat_view .chat_input_text,
body.ios #chat_creation_drawer .chat_input_text,
body.ios .chat_input {
    font-size: 16px;
}

.chat_view .chat_input_text::placeholder {
    color: #8c8c8c;
}

.chat_view .send_message {
    border: none;
    padding: 12px;
    cursor: pointer;
    color: #d8d8d8;
    border-radius: 8px;
    transition: background-color 0.2s;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    align-self: flex-start;
}

.chat_view .send_message:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.chat_view .chat_toolbar {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.chat_view .toolbar_btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 6px;
    color: #d8d8d8;
    font-size: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.chat_view .spinner_container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    flex: 1;
}

/* Conversations List Styles */
.app_chat_page .conversations_view {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;
}

.conversations_view .list_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
}
.conversations_view .list_header .left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 17px;
    font-weight: 500;
    color: #fff;
}
.conversations_view .list_header .left svg.factory_animated {
    height: 32px;
}
.conversations_view .list_header .left svg {
    height: 24px;
}
.conversations_view .list_header .right {
    height: 32px;
    width: 32px;
    padding: 8px;
}
.conversations_view .list_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
}

.conversations_view .list_header h3 {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}

.conversations_view .close_conversations {
    background: none;
    border: none;
    color: #d8d8d8;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.conversations_view .factory_search_area {
    padding: 0 12px 8px;
    flex-shrink: 0;
}

.conversations_view .factory_search_area .im-search-input-wrapper {
    pointer-events: auto;
}

.conversations_view .factory_search_area .factory_search_icon {
    position: absolute;
    left: 12px;
    color: #64748b;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.conversations_view .factory_search_area .factory_search_icon svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.conversations_view .conversations_content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    position: relative;
}

.conversations_view .conversations_loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px;
    color: #d8d8d8;
}

.conversations_view .pull_to_refresh_indicator {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 16px;
    color: #d8d8d8;
    font-size: 12px;
    /* background: rgba(0, 0, 0, 0.7); */
    border-radius: 20px;
    z-index: 10;
    transition: opacity 0.2s;
}

.conversations_view .pull_to_refresh_indicator svg {
    height: 32px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.conversations_view .no_conversations {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.conversations_view .conversations_list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
}

.conversations_view .conversations_list.has_loader {
    padding-bottom: 48px;
}

.conversations_view .conversations_loading_more {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.conversations_view .conversations_loading_more svg {
    height: 32px;
    color: white;
}

.conversations_view .conversation_item {
    background: #27222b;
    border-radius: 18px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.2s;
    border: 1px solid transparent;
}

/* -------------------- AppChat list loading skeleton -------------------- */
.appChatSkeletonRoot{
    --appchat_skeleton_base: rgba(255, 255, 255, 0.08);
    --appchat_skeleton_shine: rgba(255, 255, 255, 0.14);
}

body.light_mode .appChatSkeletonRoot{
    --appchat_skeleton_base: rgba(0, 0, 0, 0.08);
    --appchat_skeleton_shine: rgba(255, 255, 255, 0.75);
}

body.light_mode .conversations_view .factory_search_area .factory_search_icon {
    color: #94a3b8;
}

.appChatSkeletonLine,
.appChatSkeletonBlock{
    background: var(--appchat_skeleton_base);
    box-sizing: border-box;
    max-width: 100%;
    display: block;
}

.appChatSkeletonShimmer{
    position: relative;
    overflow: hidden;
}

.appChatSkeletonShimmer::after{
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 150%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--appchat_skeleton_shine) 50%,
        transparent 100%
    );
    animation: appchat_shimmer 1.25s ease-in-out infinite;
}

@keyframes appchat_shimmer{
    0%{ transform: translateX(0); }
    100%{ transform: translateX(200%); }
}

@media (prefers-reduced-motion: reduce){
    .appChatSkeletonShimmer::after{
        animation: none;
    }
}

.appChatSkeletonItem{
    pointer-events: none;
}

/* Ensure skeleton preview can contain multiple lines (real preview clamps) */
.appChatSkeletonItem .conversation_preview.appChatSkeletonPreview{
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: visible;
    line-clamp: unset;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
}

.appChatSkeletonIcon{
    width: 32px;
    height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
}

.appChatSkeletonOrphanIcon{
    width: 18px;
    height: 18px;
    border-radius: 6px;
    flex-shrink: 0;
}

.appChatSkeletonTitleLine{
    height: 14px;
    width: 68%;
    border-radius: 8px;
}

.appChatSkeletonMetaLine{
    height: 11px;
    width: 42%;
    border-radius: 7px;
}

.appChatSkeletonTimeLine{
    height: 11px;
    width: 28px;
    border-radius: 7px;
}

.appChatSkeletonPreviewLine{
    height: 12px;
    width: 100%;
    border-radius: 8px;
}

.appChatSkeletonPreviewLineShort{
    height: 12px;
    width: 72%;
    border-radius: 8px;
}

.appChatSkeletonAnnounce{
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.conversations_view .conversation_subject {
    font-weight: 500;
    color: #fff;
    margin-bottom: 4px;
    font-size: 14px;
}

.conversations_view .conversation_preview {
    color: #d8d8d8;
    font-size: 12px;
    margin-bottom: 8px;
    line-height: 1.4;
    line-clamp: 2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.conversations_view .conversation_meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.conversations_view .conversation_time {
    color: #999;
    font-size: 11px;
}

.conversations_view .unread_count {
    background: #5086d4;
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

.conversations_view .history_button {
    background: none;
    border: none;
    color: #c6c5c9;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conversations_view .version_dropdown {
    top: calc(var(--safe-top) + 64px);
}

.grid_view .app_header_meta{
    position: absolute;
    top: 12px;
    right: 12px;
    margin-left: 0;
}

.grid_view .conversation_item{
    position: relative;
}

.grid_view .app_header{
    flex-direction: column;
    align-items: flex-start;
}

.grid_view .conversations_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.chat_view {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: stretch;
}

.chat .messages {
    flex-grow: 1;
    overflow-y: auto;
}

/* Factory chat reuses AIInputComposer (.im-input-container).
   Minimal overrides to fit the factory chat layout -- appearance matches IM. */
.im-input-container.chat_input_container {
    transform: translate3d(0, calc(-1 * var(--kb-inset, 0px)), 0);
    will-change: transform;
}

body.ios .app_chat_page .chat_view.vv-root .chat_input_container {
    transform: none;
    will-change: auto;
}

/* Root the full-page factory chat to the visual viewport on iOS Safari.
   This prevents header jumps and keeps the composer flush to the keyboard. */
body.ios .app_chat_page .chat_view.vv-root {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--vv-top, 0px);
    height: var(--vvh, 100%);
    width: 100%;
}

/* App Factory - Carousel view (Homescreen-manager-style cards) */
.conversations_view.carousel_view {
    background: #000;
}

.conversations_view.carousel_view .conversations_content {
    overflow: hidden;
    padding: 8px 0;
    padding-bottom: calc(88px + var(--safe-bottom));
}

/* Carousel: latest AI teaser under each phone */
.conversations_view.carousel_view .app_factory_hs_latest_ai {
    border: 1px solid #ffffff1c;
    border-radius: 18px;
    padding: 13px;
    font-size: 13px;
    margin-top: 31px;
    position: relative;
    box-sizing: border-box;
    width: 100%;
    max-width: 185px;
    margin-left: auto;
    margin-right: auto;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.25;
    line-clamp: 3;
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
}

.conversations_view.carousel_view .app_factory_hs_latest_ai:active {
    background: rgba(255, 255, 255, 0.10);
}

.conversations_view.carousel_view .app_factory_hs_latest_ai.is_new_app {
    visibility: hidden;
    pointer-events: none;
}

/* Carousel: icon next to app name (like Homescreen Manager) */
.conversations_view.carousel_view .app_factory_hs_name_icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.conversations_view.carousel_view .app_factory_hs_name_icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.conversations_view.carousel_view .app_factory_hs_name_icon_emoji {
    font-size: 12px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
}

.conversations_view.carousel_view .app_factory_hs_name_icon_fallback {
    font-size: 12px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
}

/* Match homescreen manager sizing/positioning more closely inside App Factory layout */
.conversations_view.carousel_view .homescreen-carousel {
    height: 70%;
    top: 0;
}

.conversations_view.carousel_view .homescreen-item .hs-item-inner {
    margin-bottom: 0;
}

/* (deprecated) latest message teaser removed in favor of real chat content */

/* Full-width floating input bar (reuse ChatInput markup/styles) */
.conversations_view.carousel_view .chat_input_container {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--safe-bottom) + 20px);
    margin: 0;
    border-radius: 0;
    padding: 12px 16px;
    padding-bottom: calc(12px + var(--safe-bottom));
    z-index: 50;
    width: 90%;
    margin: 0 auto;
    border-radius: 15px;
    background: #101010;
}

/* Homescreen-mounted system apps render off-screen pages in the DOM.
   If we keep the carousel input `position: fixed`, it leaks across pages (e.g., shows on Feed).
   Override to keep the input within the Factory homescreen page only. */
.system-app-wrapper .conversations_view.carousel_view {
    position: relative;
}
.system-app-wrapper .conversations_view.carousel_view .chat_input_container {
    position: absolute;
}

.conversations_view.carousel_view .app_factory_hs_preview_top {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.conversations_view.carousel_view .app_factory_hs_preview_icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.10);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 22px;
}

.conversations_view.carousel_view .app_factory_hs_preview_title {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.conversations_view.carousel_view .app_factory_hs_preview_text {
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    line-height: 1.25;
    line-clamp: 4;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quick_response_suggestions_container {
    padding: 0; /*we use margin on the inner elements so they go edge to edge*/
}

.quick_response_suggestions {
    display: flex;
    flex-flow: row nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 8px;
    padding: 8px 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    transition: opacity 0.2s ease, max-height 0.2s ease;
    max-height: 50px;
    opacity: 1;
}

.quick_response_suggestions::-webkit-scrollbar {
    display: none;
}

.quick_response_suggestions.hidden {
    max-height: 0;
    opacity: 0;
    padding: 0;
    overflow: hidden;
}

.quick_response_suggestions_scroll {
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;
}

.quick_response_suggestion {
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 20px;
    background-color: #3a344191;
    color: #d8d8d8;
    border: 1px solid #4a445196;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    justify-content: center;
    display: flex;
    align-items: center;
}

.quick_response_suggestion:hover {
    background-color: #4a4451;
    border-color: #5a5461;
}

.quick_response_suggestion:active {
    background-color: #5a5461;
    border-color: #6a6471;
}

.quick_response_suggestion:last-of-type {
    margin-right: 16px;
}

.quick_response_suggestion:first-of-type {
    margin-left: 16px;
}

.suggestion_skeleton {
    width: 100px;
    height: 36px;
    border-radius: 20px;
    background: linear-gradient(90deg, #3a344191 25%, #4a445196 50%, #3a344191 75%);
    background-size: 200% 100%;
    animation: suggestion_shimmer 1.5s ease-in-out infinite;
    border: 1px solid #4a445196;
}

.suggestion_skeleton:nth-child(2) {
    width: 120px;
}

.suggestion_skeleton:nth-child(3) {
    width: 90px;
}

@keyframes suggestion_shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Feature Suggestions Lightbulb */
.feature_suggestions_lightbulb {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    margin-left: 16px;
}

.feature_suggestions_lightbulb:active {
    background-color: rgba(251, 191, 36, 0.3);
    border-color: rgba(251, 191, 36, 0.5);
}

/* Feature Suggestions Drawer */
.feature_suggestions_drawer {
    padding: 0 16px 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.feature_suggestions_list {
    display: flex;
    flex-direction: column;
}

.feature_suggestion_row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    gap: 10px;
    -webkit-tap-highlight-color: transparent;
}

.feature_suggestion_row:last-child {
    border-bottom: none;
}

.feature_suggestion_text {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    color: #fff;
    line-height: 1.3;
}

.feature_suggestion_implement_btn {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: rgba(59, 130, 246, 0.9);
    color: #fff;
}

.feature_suggestion_implement_btn:active {
    opacity: 0.6;
}

.feature_suggestion_dismiss_btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.feature_suggestion_dismiss_btn:active {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
}

.feature_suggestions_footer {
    padding: 16px 0 0;
    display: flex;
    justify-content: center;
}

.feature_suggestions_more_btn {
    padding: 10px 24px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.2s ease;
}

.feature_suggestions_more_btn:active {
    background: rgba(255, 255, 255, 0.12);
}

.feature_suggestions_more_btn:disabled {
    opacity: 0.4;
    pointer-events: none;
}

.feature_suggestions_loading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 0;
}

.feature_suggestion_skeleton {
    height: 44px;
    border-radius: 8px;
    background: linear-gradient(90deg, #3a344191 25%, #4a445196 50%, #3a344191 75%);
    background-size: 200% 100%;
    animation: suggestion_shimmer 1.5s ease-in-out infinite;
}

.feature_suggestion_skeleton:nth-child(2) { width: 90%; }
.feature_suggestion_skeleton:nth-child(3) { width: 95%; }
.feature_suggestion_skeleton:nth-child(4) { width: 85%; }
.feature_suggestion_skeleton:nth-child(5) { width: 92%; }

.greeting_message {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 32px;
    padding: 24px;
    flex: 1;
    overflow-y: auto;
}

.greeting_header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.greeting_message .logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    overflow: hidden;
    color: white;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); */
}

.greeting_message .logo svg path {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.greeting_message .logo svg {
    height: 100%;
}

.greeting_message .logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.greeting_message_content h2 {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.greeting_message_content p {
    color: #d8d8d8;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
    max-width: 400px;
}

.new_conversation_button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;  
    margin: 8px;
    border-radius: 8px;
    background-color: #27222b;
    color: #fff;
}

.new_conversation_button svg {
    height: 24px;
}

.preset_messages {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 800px;
}

.preset_message_card {
    background: #27222b;
    border: 1px solid #363636;
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    color: inherit;
    font-family: inherit;
}


.preset_card_content {
    flex: 1;
}

.preset_title {
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.preset_description {
    color: #d8d8d8;
    font-size: 14px;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
}

.preset_arrow {
    color: #4868b1;
    opacity: 0.7;
    transition: color 0.2s ease;
}


/* Version Selector Dropdown */
.chat_header_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    /* padding-top: calc(12px + var(--safe-top)); */
    padding-top: 0;
    background-color: none;
    box-shadow: 0 0 16px #00000040;
    z-index: 2;
    gap: 12px;
    position: relative;
}

.chat_header_left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.chat_header_right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* Bug bar (shown above chat input when iframe logger reports errors) */
.chat_bugbar_container {
    padding: 0 16px;
}

.chat_bugbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 18px;
    background: rgba(255, 84, 84, 0.12);
    border: 1px solid rgba(255, 84, 84, 0.25);
    color: #ffd1d1;
    font-size: 13px;
    line-height: 1.1;
    white-space: nowrap;
    margin: 0 0 10px 0;
}

.chat_bugbar_text {
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat_bugbar_fix {
    flex-shrink: 0;
    background: rgba(255, 84, 84, 0.22);
    border: 1px solid rgba(255, 84, 84, 0.35);
    color: #fff;
    padding: 8px 12px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1;
}

.chat_bugbar_fix:active {
    transform: scale(0.98);
}

.back_button {
    background: none;
    border: none;
    color: #c6c5c9;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}


.back_button svg {
    width: 20px;
    height: 20px;
}

.app_info_clickable {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-radius: 8px;
    padding: 4px 8px;
    margin: -4px -8px;
    transition: background-color 0.2s;
}

.app_info_clickable:active {
    background-color: rgba(255, 255, 255, 0.05);
}

/* App Factory: tweak AppVisibilityIcon only in this context (keep global defaults elsewhere) */
.conversations_view.carousel_view .app_visibility_icon,
.chat_header_container .app_info_clickable .app_visibility_icon {
    width: 0.8em;
    height: 0.8em;
    margin-right: 0;
    opacity: 1;
}

.app_icon_container {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #333;
}

.app_icon_container img,
.app_icon_container svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app_icon_container .fallback-letter {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.app_name {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.version_selector_container {
    position: relative;
    flex-shrink: 0;
}

.version_selector_button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}


.version_text {
    color: #fff;
}

.dropdown_arrow {
    color: #999;
    font-size: 9px;
}

.version_dropdown {
    position: fixed;
    top: 60px;
    right: 12px;
    left: auto;
    background: #27222b;
    border: 1px solid #363636;
    border-radius: 12px;
    width: calc(100vw - 24px);
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
}

.version_dropdown_item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #363636;
    transition: background-color 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: #1a1a1a;
}

.version_dropdown_item:last-child {
    border-bottom: none;
}


.version_dropdown_item.active {
    background: #282828;
}

.version_info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    overflow: hidden;
}

.version_number {
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    flex-direction: row;
    display: inline-flex;
    gap: 7px;
    align-items: center;
}

.version_number svg {
    width: 16px;
    height: 16px;
}

.version_preview {
    color: #999;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.version_time {
    color: #999;
    font-size: 11px;
    white-space: nowrap;
}

.version_status {
    font-size: 14px;
}

/* Locked Input Container */
.locked_input_container {
    background-color: #272727;
    border-top: 1px solid #363636;
    padding: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.locked_message {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #999;
    font-size: 14px;
}

.lock_icon {
    font-size: 18px;
}

.edit_version_button {
    background: #4868b1;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}


/* Conversations List - Apps and Orphans Sections */
.conversations_section {
    margin-bottom: 24px;
}

.section_title {
    color: #999;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 16px;
    margin-bottom: 8px;
}

/* App Item in Conversations List */
.conversation_item.app_item {
    background: #0f0f11;
    border: 1px solid rgba(255, 255, 255, 0.06);
}


.app_header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.app_icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
}

.app_info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.app_versions_count {
    color: #999;
    font-size: 11px;
}

.app_header_meta {
    align-self: flex-start; 
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.conversation_time {
    font-size: 11px;
    color: #b3b3b3;
}

/* Orphan Item in Conversations List */
.conversation_item.orphan_item {
    background: #0f0f11;
border: 1px solid rgba(255, 255, 255, 0.06);
}


.orphan_header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.orphan_icon {
    font-size: 18px;
    flex-shrink: 0;
}

/* Generating Indicator */
.generating_indicator {
    font-size: 16px;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Full-width message container (for progress, app cards, etc) */
.message_full_width {
    width: 100%;
    margin: 12px 0;
}

/* Progress Message Component - Card with filling background */
.progress_card {
    width: 100%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(20, 22, 33, 0.8);
    border: 1px solid rgba(72, 104, 177, 0.2);
    min-height: 70px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.progress_card_bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    background: 
        linear-gradient(135deg, 
            #4868b1 0%, 
            #5a7fcc 25%,
            #3a5291 50%,
            #4868b1 75%,
            #5a7fcc 100%
        );
    background-size: 400% 100%;
    animation: gradient-shift 8s ease infinite;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.progress_card_bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 20px,
        rgba(255, 255, 255, 0.03) 20px,
        rgba(255, 255, 255, 0.03) 40px
    );
    animation: diagonal-slide 20s linear infinite;
}

.progress_card_bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(
        circle at 30% 50%,
        rgba(255, 255, 255, 0.15) 0%,
        transparent 50%
    );
    animation: glow-pulse 3s ease-in-out infinite;
}

.progress_card_bg_animated {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.5) 55%,
        rgba(255, 255, 255, 0.3) 60%,
        transparent 70%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: lightning-sweep 3s linear infinite;
}

@keyframes gradient-shift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

@keyframes diagonal-slide {
    0% {
        transform: translateX(-40px);
    }
    100% {
        transform: translateX(0);
    }
}

@keyframes glow-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1) translateX(0);
    }
    50% {
        opacity: 0.6;
        transform: scale(1.5) translateX(50%);
    }
}

@keyframes lightning-sweep {
    0% {
        background-position: -200% 0;
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        background-position: 200% 0;
        opacity: 0;
    }
}

.progress_card_content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px;
}

.progress_card_icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: icon-pulse 2s ease-in-out infinite;
}

@keyframes icon-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.95);
    }
}

.progress_card_text {
    flex: 1;
    color: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.progress_card_percentage {
    color: rgba(255, 255, 255, 0.95);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    min-width: 45px;
    text-align: right;
}

/* App Card Component */
.app_card {
    width: 100%;
    padding: 20px;
    background: linear-gradient(135deg, #2d2a35 0%, #232129 100%);
    border-radius: 12px;
    border: 1px solid rgba(72, 104, 177, 0.3);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}


.app_card.previous_version {
    border-color: rgba(153, 153, 153, 0.3);
}

.app_card_header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    position: relative;
}

.app_card_icon {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(72, 104, 177, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.app_card_icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app_card_icon_placeholder {
    font-size: 28px;
}

.app_card_title_section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.app_card_name {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

.app_card_version_badge {
    color: #999;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.app_card_description {
    color: #d8d8d8;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
    padding: 12px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.app_card_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.app_card_open_button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #4868b1 0%, #3a5291 100%);
    color: #ffffff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease;
}


.app_card_open_button:active {
    transform: translateY(0);
}

.app_card_open_button svg {
    flex-shrink: 0;
}

.app_card_status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4ade80;
    font-size: 13px;
    font-weight: 500;
}

.app_card_status_dot {
    width: 8px;
    height: 8px;
    background: #4ade80;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.app_card_version_badge_large {
    position: absolute;
    top: -4px;
    right: 48px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    padding: 6px 12px;
    background: rgba(72, 104, 177, 0.8);
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.app_card_settings_button {
    position: absolute;
    top: -4px;
    right: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #d8d8d8;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}


.app_card_settings_button:active {
    transform: rotate(90deg) scale(0.95);
}

.app_card_settings_button svg {
    width: 18px;
    height: 18px;
}

.app_card_edit_button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.05);
    color: #d8d8d8;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}


.app_card_edit_button:active {
    transform: translateY(0);
}

.app_card_edit_button svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* AppResultCard - Merged App Card with Progress */
.app_result_card {
    background: #0f0f11;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 24px;
    overflow: hidden;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}


.app_result_card_inner {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Main Content Row - Icon + Content Side by Side */
.app_result_card_main_content {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

/* Icon Container - Left Side */
.app_result_card_icon_container {
    flex-shrink: 0;
}

.app_result_card_icon_wrapper {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    overflow: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.app_result_card_icon_wrapper.visible {
    opacity: 1;
    transform: scale(1);
}

.app_result_card_icon_wrapper.hidden {
    opacity: 0;
    transform: scale(0.75);
}

.app_result_card_icon_wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app_result_card_icon_placeholder {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    border-radius: 16px;
}

.app_result_card.generating .app_result_card_icon_placeholder {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.app_result_card_icon_skeleton {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.1);
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Content - Right Side */
.app_result_card_content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Header with Name and Version */
.app_result_card_header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    justify-content: space-between;
}

.app_result_card_title_section {
    min-width: 0;
    flex: 1;
}

.app_result_card_title_row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.just_opened_label{
    font-size: 13px;
    color: #abffa7;
    font-weight: 500;
}

.app_result_card_name {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app_result_card_description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app_result_card_version_badge {
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
    flex-shrink: 0;
    white-space: nowrap;
}

.app_result_card_settings_button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}


.app_result_card_settings_button:active {
    transform: rotate(90deg) scale(0.95);
}

.app_result_card_settings_button svg {
    width: 18px;
    height: 18px;
}

/* Skeleton Placeholders */
.app_result_card_skeleton_name {
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    flex: 1;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.app_result_card_skeleton_version {
    height: 24px;
    width: 48px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    flex-shrink: 0;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Progress Bar */
.app_result_card_progress_section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

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

.app_result_card_progress_bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 9999px;
    overflow: hidden;
}

.app_result_card_progress_fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 100%);
    transition: width 0.3s ease;
}

.app_result_card_progress_percentage {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    white-space: nowrap;
    margin: 0;
}

.app_result_card_progress_message {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 0;
    font-weight: 500;
}

.app_result_card_progress_hint {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
    text-align: center;
    margin: 12px 0 0 0;
    padding: 0 16px;
    font-weight: 400;
    line-height: 1.5;
}

/* Action Buttons */
.app_result_card_actions {
    display: flex;
    gap: 8px;
    animation: fadeInSlideUp 0.5s ease forwards;
}

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

.app_result_card_button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: none;
}

.app_result_card_button.primary {
    flex: 1;
    background: #3b82f6;
    color: #fff;
}


.app_result_card_button.secondary {
    padding: 10px 12px;
    background: transparent;
    color: #d8d8d8;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.app_result_card_button.secondary.edit {
    padding: 10px 20px;
    min-width: max-content;
}


.app_result_card_button svg {
    width: 16px;
    height: 16px;
}

/* Complete Status Badge */
.app_result_card_status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4ade80;
}

.app_result_card_status_dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
}

.app_result_card_status_text {
    font-size: 14px;
    font-weight: 500;
}

/* Pulse Animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ===== Light mode ===== */
body.light_mode .app_chat_page {
    background-color: #f7f9fd;
    color: #111827;
}

body.light_mode .app_chat_page_header {
    background-color: #ffffff;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
}

body.light_mode .back_button {
    color: #111827;
}

body.light_mode .back_button:active {
    background-color: rgba(0, 0, 0, 0.05);
}

body.light_mode .app_chat_title_section .chat_title {
    color: #111827;
}

body.light_mode .app_chat_page .tab_icon {
    color: #6b7280;
}

body.light_mode .app_chat_page .tab_icon.active {
    background-color: rgba(0, 0, 0, 0.08);
    color: #111827;
}

/* Conversations List View */
body.light_mode .conversations_view {
    background: rgba(0, 0, 0, 0.02);
}

body.light_mode .conversations_view .list_header .left {
    color: #111827;
}

body.light_mode .conversations_view .list_header h3 {
    color: #111827;
}

body.light_mode .conversations_view .close_conversations {
    color: #6b7280;
}

body.light_mode .conversations_view .close_conversations:active {
    background-color: rgba(0, 0, 0, 0.05);
}

body.light_mode .conversations_view .conversation_item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light_mode .conversation_item.app_item,
body.light_mode .conversation_item.orphan_item {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light_mode .conversations_view .conversation_subject {
    color: #111827;
}

body.light_mode .conversations_view .conversation_preview {
    color: #6b7280;
}

body.light_mode .conversations_view .conversation_time {
    color: #9ca3af;
}

body.light_mode .conversations_view .conversations_loading {
    color: #6b7280;
}

body.light_mode .conversations_view .no_conversations {
    color: #9ca3af;
}

body.light_mode .conversations_view .pull_to_refresh_indicator {
    color: #6b7280;
}

body.light_mode .conversations_view .conversations_loading_more svg {
    color: #6b7280;
}

body.light_mode .conversations_view .section_title {
    color: #6b7280;
}

body.light_mode .conversations_view .history_button {
    color: #6b7280;
}

body.light_mode .conversations_view .history_button:active {
    background-color: rgba(0, 0, 0, 0.05);
}

body.light_mode .app_header .app_name {
    color: #111827;
}

body.light_mode .app_versions_count {
    color: #9ca3af;
}

body.light_mode .conversation_time {
    color: #9ca3af;
}

/* Chat View */
body.light_mode .chat_view .message.user {
    background-color: #e8eaf0;
    color: #111827;
}

body.light_mode .chat_view .message.ai {
    background-color: #dbe4f5;
    color: #1e2a45;
}

body.light_mode .chat_view .message_timestamp {
    color: rgba(0, 0, 0, 0.5);
}

body.light_mode .chat_view .message_copy_feedback {
    color: #3b82f6;
    background: rgba(255, 255, 255, 0.9);
}

body.light_mode .chat_view .chat_input_text {
    background: #f0f1f3;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #111827;
}

body.light_mode .chat_view .chat_input_text::placeholder {
    color: #9ca3af;
}

body.light_mode .chat_view .send_message {
    color: #111827;
}

body.light_mode .chat_view .send_message:active {
    background-color: rgba(0, 0, 0, 0.05);
}

body.light_mode .chat_view .toolbar_btn {
    background: rgba(0, 0, 0, 0.06);
    color: #111827;
}

body.light_mode .chat_view .toolbar_btn:active {
    background: rgba(0, 0, 0, 0.1);
}

/* Light mode: factory chat input inherits .im-input-container light mode from im.css */

body.light_mode .chat_header_container {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.08);
}

body.light_mode .app_chat_page_footer {
    background-color: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Chat Creation Drawer */
body.light_mode #chat_creation_drawer {
    color: #111827;
}

body.light_mode #chat_creation_drawer .drawer {
    background-color: rgba(255, 255, 255, 0.95);
}

body.light_mode #chat_creation_drawer .drawer-overlay {
    background-color: rgba(0, 0, 0, 0.3);
}

body.light_mode #chat_creation_drawer .chat_title {
    color: #111827;
}

body.light_mode #chat_creation_drawer .tab_icon.active {
    background-color: rgba(0, 0, 0, 0.08);
    color: #111827;
}

body.light_mode #chat_creation_drawer .message.user {
    background-color: #e8eaf0;
    color: #111827;
}

body.light_mode #chat_creation_drawer .message.ai {
    background-color: #dbe4f5;
    color: #1e2a45;
}

body.light_mode #chat_creation_drawer .message {
    color: #111827;
}

body.light_mode #chat_creation_drawer .message_timestamp {
    color: rgba(0, 0, 0, 0.5);
}

body.light_mode #chat_creation_drawer .chat_input {
    background-color: #f0f1f3;
}

body.light_mode #chat_creation_drawer .chat_input_text {
    color: #111827;
}

body.light_mode #chat_creation_drawer .chat_input_text::placeholder {
    color: #9ca3af;
}

body.light_mode #chat_creation_drawer .send_message {
    color: #111827;
}

body.light_mode #chat_creation_drawer .send_message:active {
    background-color: rgba(0, 0, 0, 0.05);
}

body.light_mode #chat_creation_drawer .toolbar_btn {
    background: rgba(0, 0, 0, 0.06);
    color: #111827;
}

body.light_mode #chat_creation_drawer .toolbar_btn:active {
    background: rgba(0, 0, 0, 0.1);
}

/* Factory Chat Drawer Skeleton */
body.light_mode #factory_chat_drawer .chat_messages_skeleton_row {
    background: rgba(0, 0, 0, 0.06);
}

body.light_mode #factory_chat_drawer .chat_messages_skeleton_row::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.02));
}

/* Carousel View */
body.light_mode .conversations_view.carousel_view {
    background: #f7f9fd;
}

body.light_mode .conversations_view.carousel_view .chat_input_container {
    background: #ffffff;
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1);
}

body.light_mode .conversations_view.carousel_view .app_factory_hs_latest_ai {
    border: 1px solid rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.03);
    color: rgba(0, 0, 0, 0.7);
}

body.light_mode .conversations_view.carousel_view .app_factory_hs_latest_ai:active {
    background: rgba(0, 0, 0, 0.06);
}

body.light_mode .conversations_view.carousel_view .app_factory_hs_name_icon {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light_mode .conversations_view.carousel_view .app_factory_hs_name_icon_emoji,
body.light_mode .conversations_view.carousel_view .app_factory_hs_name_icon_fallback {
    color: rgba(0, 0, 0, 0.75);
}

body.light_mode .conversations_view.carousel_view .app_factory_hs_preview_icon {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: #111827;
}

body.light_mode .conversations_view.carousel_view .app_factory_hs_preview_title {
    color: rgba(0, 0, 0, 0.9);
}

body.light_mode .conversations_view.carousel_view .app_factory_hs_preview_text {
    color: rgba(0, 0, 0, 0.6);
}

/* App name labels under phone cards */
body.light_mode .app_factory_hs_manager_carousel .homescreen-name {
    color: #111827;
}

/* "Create an app" placeholder card */
body.light_mode .app_factory_hs_manager_carousel .app_factory_new_app_placeholder_icon {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.10);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.55);
}

body.light_mode .app_factory_hs_manager_carousel .app_factory_new_app_placeholder_title {
    color: rgba(0, 0, 0, 0.85);
}

body.light_mode .app_factory_hs_manager_carousel .app_factory_new_app_placeholder_text {
    color: rgba(0, 0, 0, 0.50);
}

body.light_mode .app_factory_hs_manager_carousel .homescreen-preview.app_factory_new_app_phone::after {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.03), transparent);
}

/* Phone frame border */
body.light_mode .app_factory_hs_manager_carousel .homescreen-preview {
    border-color: rgba(0, 0, 0, 0.08);
}

/* Skeleton phone card */
body.light_mode .app_factory_hs_manager_carousel .app_factory_phone_skeleton_screen {
    background: rgba(0, 0, 0, 0.05);
}

/* Orphan preview placeholder text */
body.light_mode .app_factory_hs_manager_carousel .app_factory_orphan_preview .chat-page {
    color: rgba(0, 0, 0, 0.5);
}

/* Version Dropdown */
body.light_mode .version_dropdown {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

body.light_mode .version_dropdown_item {
    background: #ffffff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.light_mode .version_dropdown_item.active {
    background: rgba(0, 0, 0, 0.03);
}

body.light_mode .version_selector_button {
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #111827;
}

body.light_mode .version_selector_button:active {
    background: rgba(0, 0, 0, 0.1);
}

body.light_mode .version_text,
body.light_mode .version_number {
    color: #111827;
}

body.light_mode .version_preview,
body.light_mode .version_time {
    color: #9ca3af;
}

body.light_mode .dropdown_arrow {
    color: #9ca3af;
}

/* Greeting / Preset Messages */
body.light_mode .greeting_message_content h2 {
    color: #111827;
}

body.light_mode .greeting_message_content p {
    color: #6b7280;
}

body.light_mode .new_conversation_button {
    background-color: #ffffff;
    color: #111827;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light_mode .new_conversation_button:active {
    background-color: rgba(0, 0, 0, 0.05);
}

body.light_mode .preset_message_card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

body.light_mode .preset_message_card:active {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.2);
}

body.light_mode .preset_title {
    color: #111827;
}

body.light_mode .preset_description {
    color: #6b7280;
}

body.light_mode .preset_arrow {
    color: #3b82f6;
}

/* Quick Response Suggestions */
body.light_mode .quick_response_suggestion {
    background-color: rgba(0, 0, 0, 0.05);
    color: #111827;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

body.light_mode .quick_response_suggestion:active {
    background-color: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.2);
}

body.light_mode .suggestion_skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.05) 75%);
    background-size: 200% 100%;
    border: 1px solid rgba(0, 0, 0, 0.08);
    animation: suggestion_shimmer 1.5s ease-in-out infinite;
}

/* Feature Suggestions - Light Mode */
body.light_mode .feature_suggestions_lightbulb {
    background-color: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border-color: rgba(245, 158, 11, 0.25);
}

body.light_mode .feature_suggestions_lightbulb:active {
    background-color: rgba(245, 158, 11, 0.2);
    border-color: rgba(245, 158, 11, 0.4);
}

body.light_mode .feature_suggestion_row {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light_mode .feature_suggestion_text {
    color: #111827;
}

body.light_mode .feature_suggestion_dismiss_btn {
    background: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.4);
}

body.light_mode .feature_suggestion_dismiss_btn:active {
    background: rgba(0, 0, 0, 0.1);
    color: rgba(0, 0, 0, 0.6);
}

body.light_mode .feature_suggestions_more_btn {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.6);
}

body.light_mode .feature_suggestions_more_btn:active {
    background: rgba(0, 0, 0, 0.08);
}

body.light_mode .feature_suggestion_skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.05) 75%);
    background-size: 200% 100%;
    animation: suggestion_shimmer 1.5s ease-in-out infinite;
}

/* App Cards */
body.light_mode .app_card {
    background: linear-gradient(135deg, #f5f6f8 0%, #ffffff 100%);
    border: 1px solid rgba(72, 104, 177, 0.2);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body.light_mode .app_card.previous_version {
    border-color: rgba(0, 0, 0, 0.12);
}

body.light_mode .app_card_icon {
    background: rgba(72, 104, 177, 0.08);
}

body.light_mode .app_card_name {
    color: #111827;
}

body.light_mode .app_card_version_badge {
    color: #6b7280;
}

body.light_mode .app_card_description {
    color: #6b7280;
    background: rgba(0, 0, 0, 0.03);
}

body.light_mode .app_card_footer {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

body.light_mode .app_card_open_button {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

body.light_mode .app_card_settings_button {
    background: rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #6b7280;
}

body.light_mode .app_card_settings_button:active {
    background: rgba(0, 0, 0, 0.1);
}

body.light_mode .app_card_edit_button {
    background: rgba(0, 0, 0, 0.05);
    color: #111827;
    border: 1px solid rgba(0, 0, 0, 0.12);
}

body.light_mode .app_card_edit_button:active {
    background: rgba(0, 0, 0, 0.1);
}

body.light_mode .app_card_version_badge_large {
    background: rgba(59, 130, 246, 0.9);
    color: #ffffff;
}

/* App Result Card */
body.light_mode .app_result_card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

body.light_mode .app_result_card_icon_placeholder {
    background: rgba(0, 0, 0, 0.05);
    color: #111827;
}

body.light_mode .app_result_card_icon_skeleton {
    background: rgba(0, 0, 0, 0.05);
}

body.light_mode .app_result_card_name {
    color: #111827;
}

body.light_mode .app_result_card_description {
    color: rgba(0, 0, 0, 0.6);
}

body.light_mode .app_result_card_version_badge {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

body.light_mode .app_result_card_settings_button {
    color: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(0, 0, 0, 0.12);
}

body.light_mode .app_result_card_settings_button:active {
    background: rgba(0, 0, 0, 0.05);
}

body.light_mode .app_result_card_skeleton_name,
body.light_mode .app_result_card_skeleton_version {
    background: rgba(0, 0, 0, 0.05);
}

body.light_mode .app_result_card_progress_bar {
    background: rgba(0, 0, 0, 0.08);
}

body.light_mode .app_result_card_progress_percentage {
    color: rgba(0, 0, 0, 0.5);
}

body.light_mode .app_result_card_progress_message {
    color: rgba(0, 0, 0, 0.7);
}

body.light_mode .app_result_card_progress_hint {
    color: rgba(0, 0, 0, 0.45);
}

body.light_mode .app_result_card_button.secondary {
    color: #6b7280;
    border: 1px solid rgba(0, 0, 0, 0.15);
}

body.light_mode .app_result_card_button.secondary:active {
    background: rgba(0, 0, 0, 0.05);
}

body.light_mode .just_opened_label {
    color: #10b981;
}

/* Progress Card */
body.light_mode .progress_card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(72, 104, 177, 0.15);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

body.light_mode .progress_card_icon {
    color: rgba(0, 0, 0, 0.8);
}

body.light_mode .progress_card_text {
    color: rgba(0, 0, 0, 0.9);
    text-shadow: none;
}

body.light_mode .progress_card_percentage {
    color: rgba(0, 0, 0, 0.9);
    text-shadow: none;
}

/* Bug Bar */
body.light_mode .chat_bugbar {
    background: rgba(255, 84, 84, 0.1);
    border: 1px solid rgba(255, 84, 84, 0.2);
    color: #dc2626;
}

body.light_mode .chat_bugbar_fix {
    background: rgba(255, 84, 84, 0.15);
    border: 1px solid rgba(255, 84, 84, 0.25);
    color: #dc2626;
}

/* Locked Input */
body.light_mode .locked_input_container {
    background-color: #f5f6f8;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

body.light_mode .locked_message {
    color: #6b7280;
}

body.light_mode .edit_version_button {
    background: #3b82f6;
    color: #ffffff;
}

body.light_mode .edit_version_button:active {
    background: #2563eb;
}

/* App Info Clickable */
body.light_mode .app_info_clickable:active {
    background-color: rgba(0, 0, 0, 0.05);
}

body.light_mode .app_icon_container {
    background: rgba(0, 0, 0, 0.05);
}

body.light_mode .app_icon_container .fallback-letter {
    color: #111827;
}

body.light_mode .app_name {
    color: #111827;
}

/* App Overlay - Full-screen app view */
.app-overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50002; /* above transform-drawer (50001) and bubble_nav (50001) */
    background: #000;
}

body.light_mode .app-overlay-container {
    background: #f7f9fd;
}

/* ==========================================================================
   LANDSCAPE SAFE-AREA INSETS
   Keep fixed App Factory elements inside the notch-safe zone.
   ========================================================================== */
@media (orientation: landscape) {
    .app_chat_page {
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }

    .chat_view {
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }

    .conversations_view.carousel_view .chat_input_container {
        left: var(--safe-left);
        right: var(--safe-right);
    }

    .version_dropdown {
        left: calc(12px + var(--safe-left));
        right: calc(12px + var(--safe-right));
        width: auto;
    }

    .app-overlay-container {
        padding-left: var(--safe-left);
        padding-right: var(--safe-right);
    }
}

/* Failed Generation Card */
.failed_generation_card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    margin: 8px 0;
    border-radius: 16px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.failed_generation_card_icon {
    color: #ef4444;
    opacity: 0.8;
}

.failed_generation_card_message {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
    margin: 0;
    font-weight: 500;
}

.failed_generation_card_retry_error {
    font-size: 12px;
    color: #ef4444;
    text-align: center;
    margin: 0;
}

.failed_generation_card_retry_btn {
    padding: 8px 24px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.failed_generation_card_retry_btn:active {
    background: rgba(255, 255, 255, 0.2);
}

.failed_generation_card_retry_btn:disabled {
    opacity: 0.5;
    cursor: default;
}

body.light_mode .failed_generation_card {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

body.light_mode .failed_generation_card_message {
    color: rgba(0, 0, 0, 0.7);
}

body.light_mode .failed_generation_card_retry_btn {
    background: rgba(0, 0, 0, 0.08);
    color: #1f2937;
}

body.light_mode .failed_generation_card_retry_btn:active {
    background: rgba(0, 0, 0, 0.15);
}
/* Analytics Page Styles - scoped to .analytics_page */

.analytics_page {
  background: #000;
  min-height: 100vh !important;
  height: auto !important;
  max-height: none !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  position: relative !important;
  -webkit-overflow-scrolling: touch !important;
}

#main.analytics_page {
  height: auto !important;
  overflow-y: scroll !important;
}

.analytics_page .page-content {
  padding: 40px 16px 24px 16px;
  padding-bottom: 80px;
}

/* Header */
.analytics_page .analytics-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.analytics_page .back-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 20px;
  padding: 4px;
  cursor: pointer;
}

.analytics_page .analytics-header h2 {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

/* Period Selector */
.analytics_page .period-selector {
  display: flex;
  gap: 6px;
  padding: 12px 0;
  overflow-x: auto;
}

.analytics_page .period-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: #93a4bd;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.analytics_page .period-btn.active {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.analytics_page .period-btn:active {
  transform: scale(0.96);
}

/* Date Range Label */
.analytics_page .date-range-label {
  font-size: 13px;
  color: #93a4bd;
  text-align: center;
  padding: 4px 0 12px;
}

/* Summary Cards */
.analytics_page .summary-section {
  margin-bottom: 20px;
}

.analytics_page .stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}

.analytics_page .stat-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
}

.analytics_page .stat-card .stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 4px;
}

.analytics_page .stat-card .stat-label {
  font-size: 11px;
  color: #93a4bd;
  font-weight: 500;
}

.analytics_page .rate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.analytics_page .rate-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
}

.analytics_page .rate-card .rate-value {
  font-size: 24px;
  font-weight: 700;
  color: #10B981;
  margin-bottom: 4px;
}

.analytics_page .rate-card .rate-label {
  font-size: 12px;
  color: #93a4bd;
  font-weight: 500;
}

.analytics_page .rate-card-disabled {
  opacity: 0.4;
}

.analytics_page .rate-card-disabled .rate-value {
  color: #93a4bd;
}

.analytics_page .rate-card .rate-hint {
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
}

/* Chart Section */
.analytics_page .chart-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
}

.analytics_page .series-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.analytics_page .series-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #666;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.analytics_page .series-toggle.active {
  border-color: var(--series-color, #fff);
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.analytics_page .series-toggle:active {
  transform: scale(0.96);
}

.analytics_page .series-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.analytics_page .chart-container {
  height: 220px;
  position: relative;
}

.analytics_page .chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Retention Section */
.analytics_page .retention-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
}

.analytics_page .retention-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.analytics_page .retention-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.analytics_page .retention-users {
  font-size: 12px;
  color: #93a4bd;
}

.analytics_page .retention-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.analytics_page .retention-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 12px;
}

.analytics_page .retention-label {
  font-size: 12px;
  color: #93a4bd;
  margin-bottom: 4px;
  font-weight: 500;
}

.analytics_page .retention-value {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.analytics_page .retention-bar-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.analytics_page .retention-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.analytics_page .retention-loading,
.analytics_page .retention-error {
  text-align: center;
  padding: 24px;
  color: #93a4bd;
  font-size: 14px;
}

.analytics_page .retention-error {
  color: #F87171;
}

/* Loading & Error States */
.analytics_page .loading-container {
  text-align: center;
  padding: 40px 20px;
}

.analytics_page .loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #10B981;
  border-radius: 50%;
  animation: analytics-spin 0.8s linear infinite;
  margin: 0 auto 12px;
}

@keyframes analytics-spin {
  to { transform: rotate(360deg); }
}

.analytics_page .error-container {
  text-align: center;
  padding: 24px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: 12px;
}

.analytics_page .error-message {
  color: #F87171;
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 14px;
}

.analytics_page .retry-btn {
  background: #F87171;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.analytics_page .retry-btn:active {
  opacity: 0.8;
}

/* Light mode */
body.light_mode .analytics_page {
  background: #f8fafc;
}

body.light_mode .analytics_page .stat-card,
body.light_mode .analytics_page .rate-card,
body.light_mode .analytics_page .retention-card {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

body.light_mode .analytics_page .stat-card .stat-value,
body.light_mode .analytics_page .retention-section h3 {
  color: #0f172a;
}

body.light_mode .analytics_page .chart-section,
body.light_mode .analytics_page .retention-section {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

body.light_mode .analytics_page .period-btn.active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

/* ====================== Analytics Drawer ====================== */

.analytics-drawer-content {
  padding: 0 16px 24px;
}

/* Period Selector */
.analytics-drawer-content .period-selector {
  display: flex;
  gap: 6px;
  padding: 4px 0 12px;
  overflow-x: auto;
}

.analytics-drawer-content .period-btn {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  color: #93a4bd;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.analytics-drawer-content .period-btn.active {
  background: #fff;
  color: #000;
  border-color: #fff;
}

.analytics-drawer-content .period-btn:active {
  transform: scale(0.96);
}

/* Summary Cards */
.analytics-drawer-content .summary-section {
  margin-bottom: 20px;
}

.analytics-drawer-content .stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}

.analytics-drawer-content .stat-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
}

.analytics-drawer-content .stat-card .stat-value {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px;
}

.analytics-drawer-content .stat-card .stat-label {
  font-size: 10px;
  color: #93a4bd;
  font-weight: 500;
}

.analytics-drawer-content .rate-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.analytics-drawer-content .rate-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
}

.analytics-drawer-content .rate-card .rate-value {
  font-size: 22px;
  font-weight: 700;
  color: #10B981;
  margin-bottom: 3px;
}

.analytics-drawer-content .rate-card .rate-label {
  font-size: 12px;
  color: #93a4bd;
  font-weight: 500;
}

.analytics-drawer-content .rate-card-disabled {
  opacity: 0.4;
}

.analytics-drawer-content .rate-card-disabled .rate-value {
  color: #93a4bd;
}

.analytics-drawer-content .rate-card .rate-hint {
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
}

/* Chart Section */
.analytics-drawer-content .chart-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}

.analytics-drawer-content .series-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.analytics-drawer-content .series-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
  color: #666;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.analytics-drawer-content .series-toggle.active {
  border-color: var(--series-color, #fff);
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.analytics-drawer-content .series-toggle:active {
  transform: scale(0.96);
}

.analytics-drawer-content .series-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.analytics-drawer-content .chart-container {
  height: 200px;
  position: relative;
}

.analytics-drawer-content .chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* Retention Section */
.analytics-drawer-content .retention-section {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}

.analytics-drawer-content .retention-section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.analytics-drawer-content .retention-section h3 {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.analytics-drawer-content .retention-users {
  font-size: 12px;
  color: #93a4bd;
}

.analytics-drawer-content .retention-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.analytics-drawer-content .retention-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  padding: 12px;
}

.analytics-drawer-content .retention-label {
  font-size: 12px;
  color: #93a4bd;
  margin-bottom: 4px;
  font-weight: 500;
}

.analytics-drawer-content .retention-value {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.analytics-drawer-content .retention-bar-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  overflow: hidden;
}

.analytics-drawer-content .retention-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

.analytics-drawer-content .retention-loading,
.analytics-drawer-content .retention-error {
  text-align: center;
  padding: 20px;
  color: #93a4bd;
  font-size: 14px;
}

.analytics-drawer-content .retention-error {
  color: #F87171;
}

/* Loading & Error States */
.analytics-drawer-content .loading-container {
  text-align: center;
  padding: 40px 20px;
}

.analytics-drawer-content .loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top-color: #10B981;
  border-radius: 50%;
  animation: analytics-spin 0.8s linear infinite;
  margin: 0 auto 12px;
}

.analytics-drawer-content .error-container {
  text-align: center;
  padding: 20px;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.2);
  border-radius: 12px;
  margin-bottom: 16px;
}

.analytics-drawer-content .error-message {
  color: #F87171;
  font-weight: 600;
  margin-bottom: 12px;
  font-size: 14px;
}

.analytics-drawer-content .retry-btn {
  background: #F87171;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.analytics-drawer-content .retry-btn:active {
  opacity: 0.8;
}

/* Users Section */
.analytics-drawer-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  margin: 20px 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.analytics-drawer-content .app-openers-drawer {
  padding: 0;
}

/* Light mode overrides */
body.light_mode .analytics-drawer-content .period-btn.active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
}

body.light_mode .analytics-drawer-content .stat-card,
body.light_mode .analytics-drawer-content .rate-card,
body.light_mode .analytics-drawer-content .retention-card {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

body.light_mode .analytics-drawer-content .stat-card .stat-value,
body.light_mode .analytics-drawer-content .retention-section h3 {
  color: #0f172a;
}

body.light_mode .analytics-drawer-content .chart-section,
body.light_mode .analytics-drawer-content .retention-section {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

body.light_mode .analytics-drawer-section-title {
  color: #0f172a;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light_mode .analytics-drawer-content .period-btn {
  border-color: rgba(0, 0, 0, 0.12);
  color: #64748b;
}

body.light_mode .analytics-drawer-content .retention-bar-track {
  background: rgba(0, 0, 0, 0.06);
}
/* Main container */
#main.app-settings {
  height: 100vh;
  background-color: #1c1d22;
  color: #e9e9e9;
  overflow-y: auto;
}

.app-settings #page-content {
  padding: 16px 24px;
}

.app-settings .app-edit__loading {
  text-align: center;
  padding: 32px 0;
}

.app-settings .app-edit__loading-text {
  font-size: 18px;
  color: #d1d5db;
}

.app-settings .app-edit__error {
  background-color: rgba(127, 29, 29, 0.2);
  border: 1px solid #991b1b;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.app-settings .app-edit__error-text {
  color: #fca5a5;
}

.app-settings .app-edit__publish-button {
  margin-top: 24px;
  padding: 12px 24px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  border: none;
  background-color: #2563eb;
  color: #ffffff;
  width: 100%;
}

.app-settings .app-edit__publish-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5), 0 0 0 4px rgba(17, 24, 39, 1);
}

.app-settings .app-edit__publish-button:active {
  background-color: #1d4ed8;
}
.app-settings .app-edit__title {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.app-settings .app-edit__form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.app-settings .app-edit__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.app-settings .app-edit__label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #d1d5db;
}

.app-settings .app-edit__required {
  color: #f87171;
  margin-left: 4px;
}

.app-settings .app-edit__input {
  width: 100%;
  padding: 8px 12px;
  background-color: #374151;
  border: 1px solid #4b5563;
  border-radius: 8px;
  color: #ffffff;
  transition: all 0.2s ease-in-out;
}

.app-settings .app-edit__input::placeholder {
  color: #9ca3af;
}

.app-settings .app-edit__input:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #3b82f6;
}

.app-settings .app-edit__textarea {
  width: 100%;
  padding: 8px 12px;
  background-color: #374151;
  border: 1px solid #4b5563;
  border-radius: 8px;
  color: #ffffff;
  resize: none;
  transition: all 0.2s ease-in-out;
}

.app-settings .app-edit__textarea::placeholder {
  color: #9ca3af;
}

.app-settings .app-edit__textarea:focus {
  outline: none;
  border-color: transparent;
  box-shadow: 0 0 0 2px #3b82f6;
}

.app-settings .app-edit__header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #111827;
  padding-bottom: 24px;
  z-index: 10;
}

.app-settings .app-edit__save-button {
  padding: 8px 24px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  border: none;
  background-color: #2563eb;
  color: #ffffff;
}

.app-settings .app-edit__save-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5), 0 0 0 4px rgba(17, 24, 39, 1);
}

.app-settings .app-edit__save-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app-settings .app-edit__save-button:active:not(:disabled) {
  background-color: #1d4ed8;
}

.app-settings .app-edit__cancel-button {
  padding: 8px 24px;
  font-weight: 500;
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  border: 1px solid #4b5563;
  background-color: #374151;
  color: #d1d5db;
  margin-top: 24px;
}

.app-settings .app-edit__cancel-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(107, 114, 128, 0.5), 0 0 0 4px rgba(17, 24, 39, 1);
}

.app-settings .app-edit__cancel-button:active {
  background-color: #4b5563;
}

.app-settings .app-edit__loading-content {
  display: flex;
  align-items: center;
}

.app-settings .app-edit__spinner {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  border: 2px solid #ffffff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Header styles */
.app-settings #header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #24222a;
  border-bottom: 1px solid #363636;
  padding: calc(var(--safe-top) + 20px) 16px 16px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 0 16px #00000040;
}

.app-settings .header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.app-settings .back-button {
  background: transparent;
  border: none;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d8d8d8;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.app-settings .back-button:hover {
  background-color: #363636;
}

.app-settings #header .page-title {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}

.app-settings .save_changes {
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
  border: none;
}

/* Alert styles */
.app-settings .alert {
  margin-bottom: 16px;
  padding: 16px;
  border-radius: 8px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.app-settings .alert-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

.app-settings .alert-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.app-settings .alert-title {
  font-weight: 600;
  font-size: 14px;
}

.app-settings .alert-message {
  font-size: 14px;
  line-height: 1.4;
}

.app-settings .alert-info {
  border: 1px solid #3b82f6;
  background-color: rgba(59, 130, 246, 0.1);
}

.app-settings .alert-info .alert-icon {
  color: #60a5fa;
}

.app-settings .alert-info .alert-title {
  color: #93c5fd;
}

.app-settings .alert-info .alert-message {
  color: #bfdbfe;
}

.app-settings .alert-warning {
  border: 1px solid #f59e0b;
  background-color: rgba(245, 158, 11, 0.1);
}

.app-settings .alert-warning .alert-icon {
  color: #fbbf24;
}

.app-settings .alert-warning .alert-title {
  color: #fcd34d;
}

.app-settings .alert-warning .alert-message {
  color: #fde68a;
}

.app-settings .alert-error {
  border: 1px solid #ef4444;
  background-color: rgba(239, 68, 68, 0.1);
}

.app-settings .alert-error .alert-icon {
  color: #f87171;
}

.app-settings .alert-error .alert-title {
  color: #fca5a5;
}

.app-settings .alert-error .alert-message {
  color: #fecaca;
}

.app-settings .alert-success {
  border: 1px solid #10b981;
  background-color: rgba(16, 185, 129, 0.1);
}

.app-settings .alert-success .alert-icon {
  color: #34d399;
}

.app-settings .alert-success .alert-title {
  color: #6ee7b7;
}

.app-settings .alert-success .alert-message {
  color: #a7f3d0;
}

/* Card styles */
.app-settings .app-settings-page .card {
  background: #27222b !important;
}

.app-settings .card {
  background: #27222b;
  border-radius: 8px;
  border: 1px solid #363636;
  margin-bottom: 16px;
  padding: 0 !important;
}

.app-settings .card-header {
  padding: 20px 20px 12px;
  border-bottom: 1px solid #363636;
}

.app-settings .card-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #fff;
}

.app-settings .card-description {
  color: #d8d8d8;
  font-size: 14px;
}

.app-settings .card-content {
  padding: 20px;
}

.app-settings .card-footer {
  padding: 20px;
  background-color: #1c1d22;
  border-top: 1px solid #363636;
}

/* Form styles */
.app-settings .form-group {
  margin-bottom: 16px;
}

.app-settings .form-field {
  margin-top: 8px;
}

.app-settings .form-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.app-settings .form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  color: #d8d8d8;
}

.app-settings .form-hint {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

.app-settings .form-input,
.app-settings .form-textarea {
  width: 100%;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #4a4a4a;
  background-color: #363636;
  color: #d8d8d8;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.app-settings .form-input::placeholder,
.app-settings .form-textarea::placeholder {
  color: #8c8c8c;
}

.app-settings .form-input:focus,
.app-settings .form-textarea:focus {
  outline: none;
  border-color: #4868b1;
  box-shadow: 0 0 0 3px rgba(72, 104, 177, 0.1);
}

.app-settings .form-textarea {
  resize: vertical;
  min-height: 100px;
}

.app-settings .price-input_wrapper {
  position: relative;
}

.app-settings .price-input-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #8c8c8c;
  font-size: 14px;
}

.app-settings .price-input {
  padding-left: 32px;
}

/* Avatar styles */
.app-settings .avatar_container {
  position: relative;
  flex-shrink: 0;
}

.app-settings .avatar {
  width: 80px;
  height: 80px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  border: 1px solid #4a4a4a;
  background-color: #363636;
}

.app-settings .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-settings .avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #363636;
  color: #8c8c8c;
}

.app-settings .icon_edit_button {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  background: #4868b1;
  border-radius: 50%;
  border: 2px solid #27222b;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: background-color 0.2s;
}

.app-settings .icon_edit_button:hover {
  background-color: #5086d4;
}

.app-settings .icon_edit_button svg {
  height: 12px;
  flex-shrink: 0;
}

/* Button styles */
.app-settings .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s;
  box-sizing: border-box;
  border: none;
  font-size: 14px;
}

.app-settings .button-primary {
  background-color: #4868b1;
  color: white;
}

.app-settings .button-primary:hover {
  background-color: #5086d4;
}

.app-settings .button-full {
  width: 100%;
}

.app-settings .button-outline {
  background-color: transparent;
  border: 1px solid #4a4a4a;
  color: #d8d8d8;
}

.app-settings .button-outline:hover {
  background-color: #363636;
}

.app-settings .button-destructive {
  background-color: #ef4444;
  color: white;
  margin-top: 10px;
}

.app-settings .button-destructive:hover {
  background-color: #dc2626;
}

.app-settings .button-ghost {
  background: transparent;
  border: none;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d8d8d8;
}

.app-settings .button-ghost:hover {
  background-color: #363636;
}

.app-settings .submit_app {
  background-color: #4868b1;
  color: white;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}

.app-settings .submit_app:active {
  background-color: #5086d4;
}

.app-settings .submit_app.button-cancel {
  background-color: #b14848;
}

.app-settings .submit_app.button-cancel:active {
  background-color: #d45050;
}

/* Danger zone */
.app-settings .card-danger {
  border: 1px solid #dc2626;
  background-color: rgba(220, 38, 38, 0.05);
}

.app-settings .card-danger .card-title {
  color: #f87171;
}

.app-settings .card-danger .card-description {
  color: #fca5a5;
}

/* Form section styles */
.app-settings .form_section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.app-settings .form_section .title {
  font-size: 16px;
  margin-bottom: 15px;
  font-weight: 600;
  color: #ffffff;
}

.app-settings .form_section .row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-flow: row nowrap;
  padding: 16px;
  border-radius: 8px;
  margin-bottom: 12px;
  transition: background-color 0.2s;
  border: 1px solid #363636;
  background-color: #27222b;
}

.app-settings .form_section .row.disabled {
  opacity: 0.6;
  pointer-events: none;
}

.app-settings .form_section .label {
  font-weight: 500;
  margin-bottom: 4px;
  color: #fff;
  font-size: 14px;
}

.app-settings .form_section .description {
  font-size: 13px;
  color: #d8d8d8;
  line-height: 1.4;
}

/* Visibility options */
.app-settings .visibility_options {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 16px;
}

.app-settings .visibility_option {
  flex: 1;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  border-radius: 8px;
  background-color: #363636;
  transition: all 0.2s;
  cursor: pointer;
  border: 2px solid transparent;
  gap: 8px;
  text-align: center;
}

.app-settings .visibility_option:hover {
  background-color: #4a4a4a;
}

.app-settings .visibility_option:has(input:checked) {
  background-color: #4868b1;
  border-color: #5086d4;
  color: white;
}

.app-settings .visibility_option.partial:has(input:checked) {
  background-color: #363636;
  border: 2px dashed #8c8c8c;
  color: #d8d8d8;
}

.app-settings .visibility_option svg {
  height: 24px;
  width: 24px;
}

.app-settings .visibility_option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.app-settings .visibility_option span {
  font-size: 14px;
  font-weight: 500;
}

.app-settings .visibility-description {
  padding: 12px 16px;
  font-size: 13px;
  color: #d8d8d8;
  line-height: 1.5;
  background-color: #363636;
  border-radius: 6px;
  margin-bottom: 16px;
}

/* Toggle input styles */
.app-settings .toggle_input {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}

.app-settings .toggle_input input {
  opacity: 0;
  width: 0;
  height: 0;
}

.app-settings .toggle_circle {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #4a4a4a;
  transition: .4s;
  border-radius: 34px;
}

.app-settings .toggle_circle:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.app-settings input:checked + .toggle_circle {
  background-color: #4868b1;
}

.app-settings input:checked + .toggle_circle:before {
  transform: translateX(20px);
}

/* Percentage and time inputs */
.app-settings .percentage_input_wrapper,
.app-settings .time_input_wrapper {
  flex-shrink: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 80px;
  margin-top: 8px;
}

.app-settings .percentage_input,
.app-settings .time_input {
  width: 100%;
  padding: 8px 28px 8px 12px;
  border: 1px solid #4a4a4a;
  border-radius: 20px;
  font-size: 14px;
  text-align: center;
  background-color: #363636;
  color: #d8d8d8;
  transition: all 0.2s;
}

.app-settings .percentage_input:focus,
.app-settings .time_input:focus {
  outline: none;
  border-color: #4868b1;
  box-shadow: 0 0 0 3px rgba(72, 104, 177, 0.1);
}

.app-settings .percentage_suffix,
.app-settings .time_suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #8c8c8c;
  font-size: 12px;
  font-weight: 500;
  pointer-events: none;
  user-select: none;
}

.app-settings .percentage_input:placeholder-shown,
.app-settings .time_input:placeholder-shown {
  padding: 8px 12px;
}

.app-settings input:placeholder-shown~.percentage_suffix,
.app-settings input:placeholder-shown~.time_suffix {
  display: none;
}

.app-settings .free_trial_input_wrapper {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
}

.app-settings .free_trial_value_input {
  width: 96px;
}

.app-settings .free_trial_unit_select {
  width: 92px;
  padding: 8px 12px;
  border: 1px solid #4a4a4a;
  border-radius: 20px;
  font-size: 14px;
  text-align: center;
  background-color: #363636;
  color: #d8d8d8;
  transition: all 0.2s;
  outline: none;
}

.app-settings .free_trial_unit_select:focus {
  border-color: #4868b1;
  box-shadow: 0 0 0 3px rgba(72, 104, 177, 0.1);
}

.app-settings .free_trial_unit_select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 420px) {
  .app-settings .free_trial_value_input {
    width: 110px;
  }
  .app-settings .free_trial_unit_select {
    width: 100px;
  }
}

.app-settings .form_separator {
  height: 1px;
  background-color: #363636;
  margin: 16px 0;
}

/* Version card styles */
.app-settings .version_list {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  gap: 12px;
}

.app-settings .version_card {
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  border-radius: 8px;
  border: 1px solid #363636;
  background-color: #27222b;
  transition: .3s ease-in-out;
}

.app-settings .version_card.main_version {
  border-color: #4868b1;
  box-shadow: 0 0 0 1px rgba(72, 104, 177, 0.3);
}

.app-settings .version_header {
  display: flex;
  align-items: flex-start;
  padding: 16px;
}

.app-settings .version_header > .left {
  flex: 1;
  gap: 8px;
  display: flex;
  flex-direction: column;
}

.app-settings .version_title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.app-settings .version_modified_date {
  color: #8c8c8c;
  font-size: 12px;
}

.app-settings .version_header > .right {
  position: relative;
}

.app-settings .version_more_button {
  position: relative;
  padding: 4px;
  border-radius: 4px;
  cursor: pointer;
  color: #8c8c8c;
  transition: all 0.2s;
}

.app-settings .version_more_button svg {
  height: 18px;
  width: 18px;
}

.app-settings .version_actions {
  position: absolute;
  top: 100%;
  right: 0;
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  background: #27222b;
  border: 1px solid #363636;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 99;
  min-width: 160px;
  overflow: hidden;
}

.app-settings .version_actions > .action_row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 14px;
  color: #d8d8d8;
  cursor: pointer;
  transition: background-color 0.2s;
  text-decoration: none;
  white-space: nowrap;
}

.app-settings .version_actions > .action_row:hover {
  background-color: #363636;
}

.app-settings .version_actions > .action_row svg {
  height: 16px;
  width: 16px;
  flex-shrink: 0;
}

.app-settings .version_delete_button {
  color: #f87171 !important;
}

.app-settings .version_delete_button:hover {
  background-color: rgba(239, 68, 68, 0.1) !important;
}

.app-settings .version_pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
}

.app-settings .version_pill.published {
  background-color: #10b981;
  color: white;
}

.app-settings .version_pill.pending {
  background-color: #f59e0b;
  color: white;
}

.app-settings .version_pill.rejected {
  background-color: #ef4444;
  color: white;
}

.app-settings .version_pill.previous {
  background-color: #6b7280;
  color: white;
}

.app-settings .version_pill.saved {
  background-color: #363636;
  color: #d8d8d8;
}

.app-settings .version_pill.primary {
  background-color: #4868b1;
  color: white;
}

.app-settings .version_pill svg {
  height: 10px;
  width: 10px;
}

.app-settings .version_card .conversation_in_progress {
  color: #CcCcCc;
  font-size: 14px;
  margin-top: 4px;
  font-style: italic;
}

/* Utility classes */
.app-settings .hidden {
  display: none !important;
}

.app-settings .rotate-180 {
  transform: rotate(180deg);
}

/* Hide number input spinners */
.app-settings input[type="number"]::-webkit-inner-spin-button,
.app-settings input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Light mode support */
body.light_mode #main.app-settings {
  background-color: #ffffff;
  color: #111827;
}

body.light_mode .app-settings .app-edit__loading-text {
  color: #6b7280;
}

body.light_mode .app-settings .app-edit__error {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: #ef4444;
}

body.light_mode .app-settings .app-edit__error-text {
  color: #dc2626;
}

body.light_mode .app-settings .app-edit__title {
  color: #111827;
}

body.light_mode .app-settings .app-edit__label {
  color: #6b7280;
}

body.light_mode .app-settings .app-edit__input,
body.light_mode .app-settings .app-edit__textarea {
  background-color: #f9fafb;
  border-color: #e5e7eb;
  color: #111827;
}

body.light_mode .app-settings .app-edit__input::placeholder,
body.light_mode .app-settings .app-edit__textarea::placeholder {
  color: #9ca3af;
}

body.light_mode .app-settings .app-edit__input:focus,
body.light_mode .app-settings .app-edit__textarea:focus {
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

body.light_mode .app-settings #header {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.05);
}

body.light_mode .app-settings .back-button {
  color: #6b7280;
}

body.light_mode .app-settings .back-button:hover {
  background-color: #f3f4f6;
}

body.light_mode .app-settings #header .page-title {
  color: #111827;
}

body.light_mode .app-settings .save_changes {
  color: #111827;
}

body.light_mode .app-settings .alert-info {
  border-color: #3b82f6;
  background-color: rgba(59, 130, 246, 0.1);
}

body.light_mode .app-settings .alert-info .alert-icon {
  color: #2563eb;
}

body.light_mode .app-settings .alert-info .alert-title {
  color: #1d4ed8;
}

body.light_mode .app-settings .alert-info .alert-message {
  color: #1e40af;
}

body.light_mode .app-settings .alert-warning .alert-icon {
  color: #d97706;
}

body.light_mode .app-settings .alert-warning .alert-title {
  color: #b45309;
}

body.light_mode .app-settings .alert-warning .alert-message {
  color: #92400e;
}

body.light_mode .app-settings .alert-error .alert-icon {
  color: #dc2626;
}

body.light_mode .app-settings .alert-error .alert-title {
  color: #b91c1c;
}

body.light_mode .app-settings .alert-error .alert-message {
  color: #991b1b;
}

body.light_mode .app-settings .alert-success .alert-icon {
  color: #059669;
}

body.light_mode .app-settings .alert-success .alert-title {
  color: #047857;
}

body.light_mode .app-settings .alert-success .alert-message {
  color: #065f46;
}

body.light_mode .app-settings .card {
  background: #ffffff;
  border-color: #e5e7eb;
}

body.light_mode .app-settings .app-settings-page .card {
  background: #ffffff !important;
}

body.light_mode .app-settings .card-header {
  border-bottom: 1px solid #e5e7eb;
}

body.light_mode .app-settings .card-title {
  color: #111827;
}

body.light_mode .app-settings .card-description {
  color: #6b7280;
}

body.light_mode .app-settings .card-footer {
  background-color: #f9fafb;
  border-top: 1px solid #e5e7eb;
}

body.light_mode .app-settings .form-label {
  color: #6b7280;
}

body.light_mode .app-settings .form-input,
body.light_mode .app-settings .form-textarea {
  border-color: #d1d5db;
  background-color: #ffffff;
  color: #111827;
}

body.light_mode .app-settings .form-input::placeholder,
body.light_mode .app-settings .form-textarea::placeholder {
  color: #9ca3af;
}

body.light_mode .app-settings .form-input:focus,
body.light_mode .app-settings .form-textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body.light_mode .app-settings .price-input-prefix {
  color: #9ca3af;
}

body.light_mode .app-settings .avatar {
  border-color: #d1d5db;
  background-color: #f3f4f6;
}

body.light_mode .app-settings .avatar-fallback {
  background-color: #e5e7eb;
  color: #6b7280;
}

body.light_mode .app-settings .button-outline {
  border-color: #d1d5db;
  color: #6b7280;
}

body.light_mode .app-settings .button-outline:hover {
  background-color: #f3f4f6;
}

body.light_mode .app-settings .button-ghost {
  color: #6b7280;
}

body.light_mode .app-settings .button-ghost:hover {
  background-color: #f3f4f6;
}

body.light_mode .app-settings .card-danger {
  border-color: #ef4444;
  background-color: rgba(239, 68, 68, 0.05);
}

body.light_mode .app-settings .card-danger .card-title {
  color: #dc2626;
}

body.light_mode .app-settings .card-danger .card-description {
  color: #b91c1c;
}

body.light_mode .app-settings .form_section .title {
  color: #111827;
}

body.light_mode .app-settings .form_section .row {
  border-color: #e5e7eb;
  background-color: #ffffff;
}

body.light_mode .app-settings .form_section .label {
  color: #111827;
}

body.light_mode .app-settings .form_section .description {
  color: #6b7280;
}

body.light_mode .app-settings .visibility_option {
  background-color: #f3f4f6;
}

body.light_mode .app-settings .visibility_option:hover {
  background-color: #e5e7eb;
}

body.light_mode .app-settings .visibility_option:has(input:checked) {
  background-color: #3b82f6;
  border-color: #2563eb;
  color: white;
}

body.light_mode .app-settings .visibility_option.partial:has(input:checked) {
  background-color: #f3f4f6;
  border: 2px dashed #9ca3af;
  color: #6b7280;
}

body.light_mode .app-settings .visibility-description {
  color: #6b7280;
  background-color: #f3f4f6;
}

body.light_mode .app-settings .toggle_circle {
  background-color: #d1d5db;
}

body.light_mode .app-settings .percentage_input,
body.light_mode .app-settings .time_input {
  border-color: #d1d5db;
  background-color: #ffffff;
  color: #111827;
}

body.light_mode .app-settings .percentage_input:focus,
body.light_mode .app-settings .time_input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body.light_mode .app-settings .percentage_suffix,
body.light_mode .app-settings .time_suffix {
  color: #9ca3af;
}

body.light_mode .app-settings .free_trial_unit_select {
  border-color: #d1d5db;
  background-color: #ffffff;
  color: #111827;
}

body.light_mode .app-settings .free_trial_unit_select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body.light_mode .app-settings .form_separator {
  background-color: #e5e7eb;
}

body.light_mode .app-settings .version_card {
  border-color: #e5e7eb;
  background-color: #ffffff;
}

body.light_mode .app-settings .version_card.main_version {
  border-color: #3b82f6;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.2);
}

body.light_mode .app-settings .version_title {
  color: #111827;
}

body.light_mode .app-settings .version_modified_date {
  color: #9ca3af;
}

body.light_mode .app-settings .version_more_button {
  color: #9ca3af;
}

body.light_mode .app-settings .version_actions {
  background: #ffffff;
  border-color: #e5e7eb;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

body.light_mode .app-settings .version_actions > .action_row {
  color: #6b7280;
}

body.light_mode .app-settings .version_actions > .action_row:hover {
  background-color: #f3f4f6;
}

body.light_mode .app-settings .version_delete_button {
  color: #dc2626 !important;
}

body.light_mode .app-settings .version_delete_button:hover {
  background-color: rgba(239, 68, 68, 0.1) !important;
}

body.light_mode .app-settings .version_pill.saved {
  background-color: #f3f4f6;
  color: #6b7280;
}

body.light_mode .app-settings .version_card .conversation_in_progress {
  color: #6b7280;
}

/* ====================== Assets Card ====================== */

.app-settings .assets-loading,
.app-settings .assets-error,
.app-settings .assets-empty {
  padding: 20px;
  text-align: center;
  color: #999;
  font-size: 14px;
}

.app-settings .assets-error {
  color: #ef4444;
}

.app-settings .assets-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.app-settings .asset-tile {
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a1a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #363636;
  transition: border-color 0.15s;
}

.app-settings .asset-tile:active {
  border-color: #4868b1;
}

.app-settings .asset-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.app-settings .asset-audio-icon {
  color: #888;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Asset detail sheet */
.app-settings .asset-sheet-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.app-settings .asset-sheet {
  background: #27222b;
  border-radius: 16px 16px 0 0;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 16px;
  padding-bottom: calc(16px + var(--safe-bottom, 0px));
}

.app-settings .asset-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.app-settings .asset-sheet-title {
  font-size: 16px;
  font-weight: 600;
  color: #e8e8e8;
}

.app-settings .asset-sheet-close {
  background: none;
  border: none;
  color: #999;
  font-size: 24px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
}

.app-settings .asset-sheet-preview {
  margin-bottom: 16px;
}

.app-settings .asset-sheet-image {
  width: 100%;
  max-height: 300px;
  object-fit: contain;
  border-radius: 8px;
  background: #1a1a1a;
}

.app-settings .asset-sheet-audio {
  width: 100%;
}

.app-settings .asset-sheet-meta {
  margin-bottom: 12px;
}

.app-settings .asset-sheet-prompt,
.app-settings .asset-sheet-filename {
  font-size: 13px;
  color: #ccc;
  word-break: break-word;
  background: #1a1a1a;
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 4px;
}

.app-settings .asset-sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.app-settings .button-secondary {
  background-color: #363636;
  color: #e8e8e8;
  border: 1px solid #4a4a4a;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
}

.app-settings .button-secondary:active {
  background-color: #444;
}

/* Light mode overrides for assets */
body.light_mode .app-settings .asset-tile {
  background: #f3f4f6;
  border-color: #e5e7eb;
}

body.light_mode .app-settings .asset-tile:active {
  border-color: #3b82f6;
}

body.light_mode .app-settings .asset-sheet {
  background: #ffffff;
}

body.light_mode .app-settings .asset-sheet-title {
  color: #111827;
}

body.light_mode .app-settings .asset-sheet-prompt,
body.light_mode .app-settings .asset-sheet-filename {
  background: #f3f4f6;
  color: #374151;
}

body.light_mode .app-settings .asset-audio-icon {
  color: #9ca3af;
}

body.light_mode .app-settings .button-secondary {
  background-color: #f3f4f6;
  color: #374151;
  border-color: #d1d5db;
}

body.light_mode .app-settings .button-secondary:active {
  background-color: #e5e7eb;
}

body.light_mode .app-settings .asset-sheet-image {
  background: #f3f4f6;
}

/* ====================== End Assets Card ====================== */

/* ====================== App Openers Card ====================== */

.app-settings .app-openers-empty {
  color: #9ca3af;
  font-size: 14px;
  text-align: center;
  padding: 16px 0;
}

.app-settings .app-openers-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 400px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.app-settings .app-openers-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.app-settings .app-openers-row:last-child {
  border-bottom: none;
}

.app-settings .app-openers-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.app-settings .app-openers-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
  font-size: 14px;
  font-weight: 600;
}

.app-settings .app-openers-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-settings .app-openers-name {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-settings .app-openers-time {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 1px;
}

body.light_mode .app-settings .app-openers-row {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light_mode .app-settings .app-openers-avatar--fallback {
  background: rgba(0, 0, 0, 0.06);
  color: #6b7280;
}

body.light_mode .app-settings .app-openers-name {
  color: #111827;
}

body.light_mode .app-settings .app-openers-time {
  color: #6b7280;
}

body.light_mode .app-settings .app-openers-empty {
  color: #6b7280;
}

/* ====================== End App Openers Card ====================== */

/* ====================== App Openers Drawer ====================== */

.app-openers-drawer {
  padding: 0 16px 16px;
}

.app-openers-drawer__status {
  color: #9ca3af;
  font-size: 14px;
  text-align: center;
  padding: 32px 0;
}

.app-openers-drawer__list {
  display: flex;
  flex-direction: column;
}

.app-openers-drawer__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.app-openers-drawer__row:last-child {
  border-bottom: none;
}

.app-openers-drawer__row:active {
  opacity: 0.6;
}

.app-openers-drawer__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
}

.app-openers-drawer__avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  color: #ccc;
  font-size: 14px;
  font-weight: 600;
}

.app-openers-drawer__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.app-openers-drawer__name {
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-openers-drawer__time {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 1px;
}

body.light_mode .app-openers-drawer__row {
  border-bottom-color: rgba(0, 0, 0, 0.06);
}

body.light_mode .app-openers-drawer__avatar--fallback {
  background: rgba(0, 0, 0, 0.06);
  color: #6b7280;
}

body.light_mode .app-openers-drawer__name {
  color: #111827;
}

body.light_mode .app-openers-drawer__time {
  color: #6b7280;
}

body.light_mode .app-openers-drawer__status {
  color: #6b7280;
}

/* ====================== End App Openers Drawer ====================== */

@media (orientation: landscape) {
  #main.app-settings {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }
}/* Admin-specific styles */

body.admin {
  color: #111827;
  background-color: #f9fafb;
}

body.admin input,
body.admin select,
body.admin code,
body.admin textarea {
  color: black;
  background-color: white;
}

/* App Submissions List Page */
.admin_page.app_submissions_list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Header */
.admin_page.app_submissions_list .header {
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 16px;
}

.admin_page.app_submissions_list .header .title {
  font-size: 24px;
  font-weight: bold;
  color: #111827;
}

.admin_page.app_submissions_list .header .subtitle {
  margin-top: 8px;
  font-size: 14px;
  color: #4b5563;
}

/* In Review Section */
.admin_page.app_submissions_list .in-review-section {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 24px;
}

.admin_page.app_submissions_list .in-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.admin_page.app_submissions_list .in-review-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

.admin_page.app_submissions_list .in-review-tabs {
  display: flex;
  gap: 8px;
}

.admin_page.app_submissions_list .in-review-tab {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background-color: white;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}

.admin_page.app_submissions_list .in-review-tab:hover {
  background-color: #f9fafb;
}

.admin_page.app_submissions_list .in-review-tab.active {
  background-color: #4f46e5;
  color: white;
  border-color: #4f46e5;
}

.admin_page.app_submissions_list .in-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
  padding: 4px;
}

.admin_page.app_submissions_list .in-review-card {
  display: flex;
  gap: 12px;
  padding: 16px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}

.admin_page.app_submissions_list .in-review-card:hover {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-color: #d1d5db;
}

.admin_page.app_submissions_list .card-icon,
.admin_page.app_submissions_list .card-icon-placeholder {
  width: 48px;
  height: 48px;
  border-radius: 6px;
  flex-shrink: 0;
}

.admin_page.app_submissions_list .card-icon {
  object-fit: cover;
}

.admin_page.app_submissions_list .card-icon-placeholder {
  background-color: #e5e7eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

.admin_page.app_submissions_list .card-icon-placeholder svg {
  width: 24px;
  height: 24px;
}

.admin_page.app_submissions_list .card-content {
  flex: 1;
  min-width: 0;
}

.admin_page.app_submissions_list .card-app-name {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin_page.app_submissions_list .card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin_page.app_submissions_list .card-meta-item {
  font-size: 13px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin_page.app_submissions_list .in-review-empty {
  padding: 48px;
  text-align: center;
  color: #6b7280;
  font-size: 14px;
}

.admin_page.app_submissions_list .in-review-loading {
  display: flex;
  justify-content: center;
  padding: 48px;
}

/* All Submissions Section */
.admin_page.app_submissions_list .all-submissions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin_page.app_submissions_list .all-submissions-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.admin_page.app_submissions_list .all-submissions-title {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

.admin_page.app_submissions_list .all-submissions-title .count {
  color: #6b7280;
  font-weight: 500;
}

.admin_page.app_submissions_list .refresh-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background-color: white;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}

.admin_page.app_submissions_list .refresh-btn:hover:not(:disabled) {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

.admin_page.app_submissions_list .refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin_page.app_submissions_list .refresh-icon {
  width: 16px;
  height: 16px;
}

.admin_page.app_submissions_list .load-more-container {
  display: flex;
  justify-content: center;
  padding: 24px;
}

.admin_page.app_submissions_list .load-more-btn {
  padding: 12px 32px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background-color: white;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s;
}

.admin_page.app_submissions_list .load-more-btn:hover:not(:disabled) {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

.admin_page.app_submissions_list .load-more-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading State */
.admin_page.app_submissions_list .loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}

.admin_page.app_submissions_list .loading-spinner {
  animation: spin 1s linear infinite;
  border-radius: 9999px;
  height: 32px;
  width: 32px;
  border-bottom: 2px solid #4f46e5;
  margin: 0 auto 16px;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.admin_page.app_submissions_list .loading-state p {
  color: #4b5563;
}

/* Empty State */
.admin_page.app_submissions_list .empty-state {
  text-align: center;
  padding: 48px 0;
}

.admin_page.app_submissions_list .empty-icon {
  margin: 0 auto;
  height: 48px;
  width: 48px;
  color: #9ca3af;
}

.admin_page.app_submissions_list .empty-title {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.admin_page.app_submissions_list .empty-text {
  margin-top: 4px;
  font-size: 14px;
  color: #6b7280;
}

/* Table Container */
.admin_page.app_submissions_list .table-container {
  background-color: white;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.admin_page.app_submissions_list .table-wrapper {
  overflow-x: auto;
}

.admin_page.app_submissions_list .submissions-table {
  min-width: 100%;
  border-collapse: collapse;
}

.admin_page.app_submissions_list .submissions-table thead {
  background-color: #f9fafb;
}

.admin_page.app_submissions_list .submissions-table thead tr {
  border-bottom: 1px solid #e5e7eb;
}

.admin_page.app_submissions_list .submissions-table .th {
  padding: 12px 24px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.admin_page.app_submissions_list .submissions-table tbody {
  background-color: white;
}

.admin_page.app_submissions_list .submissions-table tbody tr.row {
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background-color 0.15s;
}

.admin_page.app_submissions_list .submissions-table tbody tr.row:hover {
  background-color: #f9fafb;
}

.admin_page.app_submissions_list .submissions-table .td {
  padding: 16px 24px;
  font-size: 14px;
  color: #111827;
}

.admin_page.app_submissions_list .submissions-table .td.nowrap {
  white-space: nowrap;
}

.admin_page.app_submissions_list .submissions-table .td.date {
  color: #6b7280;
}

.admin_page.app_submissions_list .submissions-table .td.actions {
  font-weight: 500;
}

/* App Info */
.admin_page.app_submissions_list .app-info {
  display: flex;
  flex-direction: column;
}

.admin_page.app_submissions_list .app-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #111827;
}

.admin_page.app_submissions_list .app-name .price {
  font-size: 12px;
  color: #059669;
  font-weight: 600;
}

.admin_page.app_submissions_list .app-tagline {
  font-size: 14px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

/* Status Badge */
.admin_page.app_submissions_list .status-badge {
  display: inline-flex;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 9999px;
}

.admin_page.app_submissions_list .status-badge.pending {
  background-color: #fef3c7;
  color: #92400e;
}

.admin_page.app_submissions_list .status-badge.under-review {
  background-color: #dbeafe;
  color: #1e40af;
}

.admin_page.app_submissions_list .status-badge.approved {
  background-color: #d1fae5;
  color: #065f46;
}

.admin_page.app_submissions_list .status-badge.rejected {
  background-color: #fee2e2;
  color: #991b1b;
}

.admin_page.app_submissions_list .status-badge.default {
  background-color: #f3f4f6;
  color: #1f2937;
}

/* Action Buttons */
.admin_page.app_submissions_list .action-buttons {
  display: flex;
  gap: 8px;
}

.admin_page.app_submissions_list .action-buttons button {
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 4px;
  transition: background-color 0.15s;
  border: none;
  cursor: pointer;
  color: white;
  font-size: 14px;
}

.admin_page.app_submissions_list .btn-claim {
  background-color: #2563eb;
}

.admin_page.app_submissions_list .btn-claim:hover {
  background-color: #1d4ed8;
}

.admin_page.app_submissions_list .btn-review {
  background-color: #4b5563;
}

.admin_page.app_submissions_list .btn-review:hover {
  background-color: #374151;
}

.admin_page.app_submissions_list .btn-delete {
  background-color: #dc2626;
}

.admin_page.app_submissions_list .btn-delete:hover {
  background-color: #b91c1c;
}

.admin_page.app_submissions_list .btn-review.claimed {
  background-color: #16a34a;
}

.admin_page.app_submissions_list .btn-review.claimed:hover {
  background-color: #15803d;
}


/* App Submission Review Page */
.admin_page.app_submission_review {
  background-color: #f9fafb;
}

/* Cards */
.admin_page.app_submission_review .card {
  background-color: white;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

/* Error State */
.admin_page.app_submission_review .error-banner {
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 16px;
}

.admin_page.app_submission_review .error-banner p {
  color: #991b1b;
}

.admin_page.app_submission_review .error-banner button {
  margin-top: 8px;
  font-size: 14px;
  color: #dc2626;
}

.admin_page.app_submission_review .error-banner button:hover {
  color: #991b1b;
}

/* Header */
.admin_page.app_submission_review .header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.admin_page.app_submission_review .back-link {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 8px;
  display: block;
}

.admin_page.app_submission_review .back-link:hover {
  color: #111827;
}

.admin_page.app_submission_review .app-title {
  font-size: 30px;
  font-weight: bold;
  color: #111827;
}

.admin_page.app_submission_review .app-tagline {
  color: #4b5563;
  margin-top: 4px;
}

.admin_page.app_submission_review .status-badge {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 9999px;
}

.admin_page.app_submission_review .status-badge.pending {
  background-color: #fef3c7;
  color: #92400e;
}

.admin_page.app_submission_review .status-badge.under-review {
  background-color: #dbeafe;
  color: #1e40af;
}

.admin_page.app_submission_review .status-badge.approved {
  background-color: #d1fae5;
  color: #065f46;
}

.admin_page.app_submission_review .status-badge.rejected {
  background-color: #fee2e2;
  color: #991b1b;
}

.admin_page.app_submission_review .status-badge.default {
  background-color: #f3f4f6;
  color: #1f2937;
}

/* Quick Info Grid */
.admin_page.app_submission_review .quick-info {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.admin_page.app_submission_review .info-label {
  font-size: 14px;
  color: #4b5563;
}

.admin_page.app_submission_review .info-value {
  color: #111827;
  font-weight: 500;
}

.admin_page.app_submission_review .info-link {
  color: #4f46e5;
  font-weight: 500;
}

.admin_page.app_submission_review .info-link:hover {
  color: #4338ca;
}

/* Section Title */
.admin_page.app_submission_review .section-title {
  font-size: 20px;
  font-weight: bold;
  color: #111827;
  margin-bottom: 16px;
}

.admin_page.app_submission_review .subsection-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

/* New App Banner */
.admin_page.app_submission_review .new-app-banner {
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 16px;
}

.admin_page.app_submission_review .new-app-banner p {
  color: #1e40af;
  font-size: 14px;
}

/* Metadata Changes */
.admin_page.app_submission_review .metadata-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin_page.app_submission_review .metadata-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.admin_page.app_submission_review .field-label {
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 4px;
}

.admin_page.app_submission_review .field-box {
  padding: 12px;
  border-radius: 4px;
  border: 1px solid;
  color: #111827;
}

.admin_page.app_submission_review .field-box.current {
  background-color: #f9fafb;
  border-color: #e5e7eb;
  color: #111827;
}

.admin_page.app_submission_review .field-box.current-changed {
  background-color: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

.admin_page.app_submission_review .field-box.new {
  background-color: #f0fdf4;
  border-color: #bbf7d0;
  color: #065f46;
}

.admin_page.app_submission_review .field-box.whitespace-pre {
  white-space: pre-wrap;
  font-size: 14px;
}

.admin_page.app_submission_review .field-box img {
  width: 80px;
  height: 80px;
  border-radius: 4px;
}

.admin_page.app_submission_review .field-box video {
  width: 100%;
  max-width: 448px;
  border-radius: 4px;
}

.admin_page.app_submission_review .field-box .no-content {
  color: #9ca3af;
}

/* Unchanged Fields */
.admin_page.app_submission_review .unchanged-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background-color: #f9fafb;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

.admin_page.app_submission_review .unchanged-field-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}

.admin_page.app_submission_review .unchanged-field-label {
  font-weight: 500;
  color: #6b7280;
  min-width: 180px;
}

.admin_page.app_submission_review .unchanged-field-value {
  color: #111827;
  flex: 1;
}

.admin_page.app_submission_review .unchanged-field-icon {
  width: 48px;
  height: 48px;
  border-radius: 4px;
  object-fit: cover;
}

/* Code Preview */
.admin_page.app_submission_review .code-stats {
  background-color: #f9fafb;
  border-radius: 4px;
  padding: 16px;
  margin-bottom: 16px;
}

.admin_page.app_submission_review .code-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  font-size: 14px;
}

.admin_page.app_submission_review .code-stats-label {
  color: #4b5563;
}

.admin_page.app_submission_review .code-stats-value {
  font-family: monospace;
  color: #111827;
}

.admin_page.app_submission_review .preview-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.admin_page.app_submission_review .preview-label {
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  margin-bottom: 8px;
}

.admin_page.app_submission_review .preview-frame {
  height: 384px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

.admin_page.app_submission_review .preview-placeholder {
  height: 384px;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  background-color: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin_page.app_submission_review .preview-placeholder p {
  color: #6b7280;
}

/* Review Actions */
.admin_page.app_submission_review .actions-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin_page.app_submission_review .actions-buttons {
  display: flex;
  gap: 16px;
}

.admin_page.app_submission_review .btn {
  flex: 1;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 8px;
  transition: background-color 0.15s;
  border: none;
  cursor: pointer;
  color: white;
}

.admin_page.app_submission_review .btn:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

.admin_page.app_submission_review .btn-approve {
  background-color: #16a34a;
}

.admin_page.app_submission_review .btn-approve:hover:not(:disabled) {
  background-color: #15803d;
}

.admin_page.app_submission_review .btn-reject {
  background-color: #dc2626;
}

.admin_page.app_submission_review .btn-reject:hover:not(:disabled) {
  background-color: #b91c1c;
}

/* Reject Form */
.admin_page.app_submission_review .reject-form {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
  margin-top: 16px;
}

.admin_page.app_submission_review .reject-form-title {
  font-weight: 600;
  color: #111827;
  margin-bottom: 12px;
}

.admin_page.app_submission_review .form-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin_page.app_submission_review .form-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.admin_page.app_submission_review .form-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

.admin_page.app_submission_review .form-field textarea:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}

.admin_page.app_submission_review .form-field.reject textarea:focus {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.admin_page.app_submission_review .btn-confirm-reject {
  width: 100%;
  background-color: #dc2626;
  color: white;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.admin_page.app_submission_review .btn-confirm-reject:hover:not(:disabled) {
  background-color: #b91c1c;
}

.admin_page.app_submission_review .btn-confirm-reject:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

/* LLM Calls Page */
.admin_page.llm_calls {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f9fafb;
}

.admin_page.llm_calls .top-bar {
  background-color: white;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}

.admin_page.llm_calls .top-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background-color: #f9fafb;
}

.admin_page.llm_calls .top-bar-title {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.admin_page.llm_calls .top-bar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.admin_page.llm_calls .search-container {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 12px;
  border: 1px solid #d1d5db;
  padding: 12px;
  background-color: white;
  border-radius: 8px;
}

.admin_page.llm_calls .search-container:focus-within {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.admin_page.llm_calls .search-input {
  width: 256px;
  color: #111827;
  background-color: none;
}

.admin_page.llm_calls .search-input:focus {
  outline: none;
}

.admin_page.llm_calls .search-icon {
  width: 16px;
  height: 16px;
  color: #9ca3af;
}

.admin_page.llm_calls .btn-new {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #4f46e5;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.15s;
}

.admin_page.llm_calls .btn-new:hover {
  background-color: #4338ca;
}

.admin_page.llm_calls .btn-new-icon {
  width: 16px;
  height: 16px;
}

.admin_page.llm_calls .main-content {
  flex: 1;
  padding: 24px;
}

.admin_page.llm_calls .content-wrapper {
  max-width: 1152px;
  margin: 0 auto;
}

.admin_page.llm_calls .empty-search {
  text-align: center;
  padding: 48px 0;
}

.admin_page.llm_calls .empty-search-icon {
  width: 48px;
  height: 48px;
  color: #d1d5db;
  margin: 0 auto 16px;
}

.admin_page.llm_calls .empty-search-title {
  font-size: 18px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 8px;
}

.admin_page.llm_calls .empty-search-text {
  color: #6b7280;
}

.admin_page.llm_calls .loading-state {
  text-align: center;
  padding: 48px 0;
}

.admin_page.llm_calls .loading-spinner {
  animation: spin 1s linear infinite;
  border-radius: 9999px;
  height: 32px;
  width: 32px;
  border: 2px solid #e5e7eb;
  border-top-color: #4f46e5;
  margin: 0 auto 16px;
}

.admin_page.llm_calls .loading-text {
  color: #6b7280;
  margin-top: 16px;
}

.admin_page.llm_calls .empty-state {
  text-align: center;
  padding: 48px 0;
}

.admin_page.llm_calls .empty-state-icon {
  width: 48px;
  height: 48px;
  color: #d1d5db;
  margin: 0 auto 16px;
}

.admin_page.llm_calls .empty-state-title {
  font-size: 18px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 8px;
}

.admin_page.llm_calls .empty-state-text {
  color: #6b7280;
  margin-bottom: 16px;
}

.admin_page.llm_calls .empty-state-btn {
  background-color: #4f46e5;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background-color 0.15s;
}

.admin_page.llm_calls .empty-state-btn:hover {
  background-color: #4338ca;
}

.admin_page.llm_calls .configs-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.admin_page.llm_calls .category-section {
  display: flex;
  flex-direction: column;
}

.admin_page.llm_calls .category-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.admin_page.llm_calls .category-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.admin_page.llm_calls .category-divider {
  flex: 1;
  height: 1px;
  background-color: #e5e7eb;
  margin-left: 16px;
}

.admin_page.llm_calls .category-count {
  font-size: 14px;
  color: #6b7280;
  margin-left: 16px;
}

.admin_page.llm_calls .configs-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin_page.llm_calls .config-card {
  background-color: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.admin_page.llm_calls .config-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border-color: #d1d5db;
}

.admin_page.llm_calls .config-card-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.admin_page.llm_calls .config-card-main {
  flex: 1;
}

.admin_page.llm_calls .config-card-title {
  font-size: 16px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 4px;
}

.admin_page.llm_calls .config-card-key {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
}

.admin_page.llm_calls .config-card-key code {
  background-color: #f3f4f6;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: monospace;
}

.admin_page.llm_calls .config-card-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #6b7280;
}

.admin_page.llm_calls .config-card-meta code {
  background-color: #f3f4f6;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: monospace;
}

.admin_page.llm_calls .config-prompt-link {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: inherit;
  color: inherit;
}

.admin_page.llm_calls .config-prompt-link:hover code {
  background-color: #dbeafe;
  color: #1e40af;
}

.admin_page.llm_calls .config-card-notes {
  font-size: 15px;
  color: #5a4848;
  margin-top: 15px;
  background-color: #f3f4f6;
  padding: 10px;
  border-radius: 5px;
  
}

/* LLM Call Modal */
.admin_modal.llm_call {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.admin_modal.llm_call .modal-backdrop {
  position: absolute;
  inset: 0;
}

.admin_modal.llm_call .modal-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  max-width: 896px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  z-index: 10;
}

.admin_modal.llm_call .modal-header {
  position: sticky;
  top: 0;
  background-color: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
}

.admin_modal.llm_call .modal-title {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.admin_modal.llm_call .modal-close {
  color: #9ca3af;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  transition: color 0.15s;
}

.admin_modal.llm_call .modal-close:hover {
  color: #4b5563;
}

.admin_modal.llm_call .modal-close-icon {
  width: 24px;
  height: 24px;
}

.admin_modal.llm_call .modal-body {
  padding: 24px;
}

.admin_modal.llm_call .modal-loading {
  text-align: center;
  padding: 48px 0;
}

.admin_modal.llm_call .modal-loading-spinner {
  animation: spin 1s linear infinite;
  border-radius: 9999px;
  height: 32px;
  width: 32px;
  border: 2px solid #e5e7eb;
  border-top-color: #4f46e5;
  margin: 0 auto 16px;
}

.admin_modal.llm_call .modal-loading-text {
  color: #6b7280;
  margin-top: 16px;
}

.admin_modal.llm_call .view-mode {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.admin_modal.llm_call .form-group {
  display: flex;
  flex-direction: column;
}

.admin_modal.llm_call .form-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.admin_modal.llm_call .form-label .required {
  color: #ef4444;
}

.admin_modal.llm_call .form-label .optional {
  color: #6b7280;
  font-size: 12px;
}

.admin_modal.llm_call .form-value-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin_modal.llm_call .form-value {
  background-color: #f3f4f6;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-family: monospace;
  flex: 1;
}

.admin_modal.llm_call .form-value-block {
  display: block;
  background-color: #f3f4f6;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 14px;
  font-family: monospace;
}

.admin_modal.llm_call .form-value-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin_modal.llm_call .form-value-group .form-value-block {
  flex: 1;
  display: block;
}

.admin_modal.llm_call .form-value-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: white;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.admin_modal.llm_call .form-value-button:hover:not(:disabled) {
  background-color: #f9fafb;
  border-color: #4f46e5;
  color: #4f46e5;
}

.admin_modal.llm_call .form-value-button:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.5;
}

.admin_modal.llm_call .form-value-button-icon {
  width: 18px;
  height: 18px;
}

.admin_modal.llm_call .form-text {
  color: #4b5563;
  font-size: 14px;
}

.admin_modal.llm_call .form-input {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  color: #111827;
  background-color: white;
}

.admin_modal.llm_call .form-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.admin_modal.llm_call .form-input:disabled {
  background-color: #f3f4f6;
  cursor: not-allowed;
}

.admin_modal.llm_call .form-input-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.admin_modal.llm_call .form-input-select {
  flex: 1;
}

.admin_modal.llm_call .form-input-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: white;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.admin_modal.llm_call .form-input-button:hover:not(:disabled) {
  background-color: #f9fafb;
  border-color: #4f46e5;
  color: #4f46e5;
}

.admin_modal.llm_call .form-input-button:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.5;
}

.admin_modal.llm_call .form-input-button-icon {
  width: 18px;
  height: 18px;
}

.admin_modal.llm_call .form-textarea {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  color: #111827;
  background-color: white;
  resize: vertical;
}

.admin_modal.llm_call .form-textarea:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.admin_modal.llm_call .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

.admin_modal.llm_call .test-area {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

.admin_modal.llm_call .test-area-header {
  margin-bottom: 16px;
}

.admin_modal.llm_call .test-area-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.admin_modal.llm_call .test-area-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin_modal.llm_call .test-input-group {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.admin_modal.llm_call .test-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  color: #111827;
  background-color: white;
  font-size: 14px;
}

.admin_modal.llm_call .test-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.admin_modal.llm_call .test-button {
  padding: 8px 20px;
  border: 1px solid #4f46e5;
  border-radius: 6px;
  background-color: #4f46e5;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}

.admin_modal.llm_call .test-button:hover:not(:disabled) {
  background-color: #4338ca;
  border-color: #4338ca;
}

.admin_modal.llm_call .test-button:disabled {
  background-color: #9ca3af;
  border-color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.6;
}

.admin_modal.llm_call .test-result {
  margin-top: 16px;
  padding: 16px;
  border-radius: 6px;
  border: 1px solid;
}

.admin_modal.llm_call .test-result-success {
  background-color: #f0fdf4;
  border-color: #86efac;
}

.admin_modal.llm_call .test-result-error {
  background-color: #fef2f2;
  border-color: #fca5a5;
}

.admin_modal.llm_call .test-result-header {
  margin-bottom: 12px;
}

.admin_modal.llm_call .test-result-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
}

.admin_modal.llm_call .test-result-success .test-result-title {
  color: #166534;
}

.admin_modal.llm_call .test-result-error .test-result-title {
  color: #991b1b;
}

.admin_modal.llm_call .test-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: #6b7280;
}

.admin_modal.llm_call .test-result-meta code {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
}

.admin_modal.llm_call .test-result-content {
  margin-top: 12px;
}

.admin_modal.llm_call .test-result-label {
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.admin_modal.llm_call .test-result-text {
  background-color: white;
  padding: 12px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  font-size: 14px;
  color: #111827;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

.admin_modal.llm_call .test-result-error-text {
  color: #991b1b;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

.admin_modal.llm_call .btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s;
}

/* Admin Logs Page */
.admin_page.admin_logs {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f9fafb;
}

.admin_page.admin_logs .logs-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 24px;
}

.admin_page.admin_logs .logs-header-main {
  max-width: 1152px;
  margin: 0 auto;
}

.admin_page.admin_logs .logs-title {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.admin_page.admin_logs .logs-subtitle {
  margin-top: 4px;
  font-size: 13px;
  color: #6b7280;
}

.admin_page.admin_logs .logs-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 12px;
}

.admin_page.admin_logs .logs-quick-range-btn {
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #fff;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.admin_page.admin_logs .logs-quick-range-btn:active {
    background: #f1f5f9;
    transform: scale(0.98);
}

.admin_page.admin_logs .logs-quick-range-btn-active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

.admin_page.admin_logs .logs-quick-range-btn-active:active {
    background: #2563eb;
}

.admin_page.admin_logs .logs-filter-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin_page.admin_logs .logs-filter-label {
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
}

.admin_page.admin_logs .logs-filter-placeholder {
  height: 32px;
  border-radius: 6px;
  border: 1px dashed #d1d5db;
  background-color: #f9fafb;
}

.admin_page.admin_logs .logs-filter-range-placeholder {
  width: 100%;
}

.admin_page.admin_logs .logs-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.admin_page.admin_logs .logs-filter-input {
  width: 100%;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  padding: 4px 8px;
  font-size: 13px;
  color: #111827;
}

.admin_page.admin_logs .logs-filter-button {
  min-width: 80px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #4f46e5;
  background-color: #4f46e5;
  color: #ffffff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 0 12px;
}

.admin_page.admin_logs .logs-filter-button:hover {
  background-color: #4338ca;
  border-color: #4338ca;
}

.admin_page.admin_logs .logs-filter-button-secondary {
  border-color: #d1d5db;
  background-color: #ffffff;
  color: #374151;
}

.admin_page.admin_logs .logs-filter-button-secondary:hover {
  background-color: #f9fafb;
}

.admin_page.admin_logs .logs-toolbar {
  background-color: #ffffff;
  border-bottom: 1px solid #e5e7eb;
}

.admin_page.admin_logs .logs-toolbar-inner {
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin_page.admin_logs .logs-filters-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.admin_page.admin_logs .logs-main {
  flex: 1;
  margin: 12px 0;
  width: 100%;
}

.admin_page.admin_logs .logs-table-container,
.admin_page.admin_logs .logs-details-container {
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 16px;
}

.admin_page.admin_logs .logs-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.admin_page.admin_logs .logs-table-placeholder,
.admin_page.admin_logs .logs-details-placeholder {
  min-height: 120px;
  border-radius: 6px;
  border: 1px dashed #e5e7eb;
  background-color: #f9fafb;
  padding: 8px;
}

.admin_page.admin_logs .logs-placeholder-text {
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

.admin_page.admin_logs .logs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin_page.admin_logs .logs-th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  color: #4b5563;
  border-bottom: 1px solid #e5e7eb;
}

.admin_page.admin_logs .logs-td {
  padding: 6px 10px;
  border-bottom: 1px solid #e5e7eb;
  color: #111827;
}

.admin_page.admin_logs .logs-td-time {
  white-space: nowrap;
  color: #6b7280;
}

.admin_page.admin_logs .logs-td-message {
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin_page.admin_logs .logs-row {
  cursor: pointer;
}

.admin_page.admin_logs .logs-row:hover {
  background-color: #eff6ff;
}

.admin_page.admin_logs .logs-td-level {
  font-weight: 600;
}

.admin_page.admin_logs .logs-td-level-info {
  color: #2563eb;
}

.admin_page.admin_logs .logs-td-level-error {
  color: #dc2626;
}

.admin_page.admin_logs .logs-td-level-warn {
  color: #d97706;
}

.admin_page.admin_logs .logs-details-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}

.admin_page.admin_logs .logs-details-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(15, 23, 42, 0.4);
}

.admin_page.admin_logs .logs-details-content {
  position: relative;
  z-index: 10;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  max-width: 896px;
  width: calc(100% - 32px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.admin_page.admin_logs .logs-details-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}

.admin_page.admin_logs .logs-details-body {
  padding: 16px;
}

.admin_page.admin_logs .logs-details-close-placeholder {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  border: 1px dashed #d1d5db;
  background-color: #f9fafb;
  cursor: pointer;
}

.admin_page.admin_logs .logs-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin_page.admin_logs .logs-details-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.admin_page.admin_logs .logs-details-field-full {
  grid-column: 1 / -1;
}

.admin_page.admin_logs .logs-details-label {
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
}

.admin_page.admin_logs .logs-details-value {
  font-size: 13px;
  color: #111827;
  word-break: break-all;
}

.admin_page.admin_logs .logs-details-context {
  margin: 0;
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
  color: #111827;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  max-height: 320px;
  overflow: auto;
}

/* Clickable Request ID button */
.admin_page.admin_logs .logs-request-id-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: #2563eb;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.admin_page.admin_logs .logs-request-id-btn:active {
  opacity: 0.7;
}

.admin_page.admin_logs .logs-request-id-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .admin_page.admin_logs .logs-request-id-btn:hover {
    text-decoration-thickness: 2px;
  }
}

.admin_modal.llm_call .btn-cancel {
  border: 1px solid #d1d5db;
  background-color: white;
  color: #374151;
}

.admin_modal.llm_call .btn-cancel:hover {
  background-color: #f9fafb;
}

.admin_modal.llm_call .btn-primary {
  background-color: #4f46e5;
  color: white;
}

.admin_modal.llm_call .btn-primary:hover:not(:disabled) {
  background-color: #4338ca;
}

.admin_modal.llm_call .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin_modal.llm_call .btn-danger {
  background-color: #dc2626;
  color: white;
}

.admin_modal.llm_call .btn-danger:hover:not(:disabled) {
  background-color: #b91c1c;
}

.admin_modal.llm_call .btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin_modal.llm_call .edit-mode {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin_modal.llm_call .form-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

.admin_modal.llm_call .form-loading-spinner {
  animation: spin 1s linear infinite;
  border-radius: 9999px;
  height: 24px;
  width: 24px;
  border: 2px solid #e5e7eb;
  border-top-color: #4f46e5;
  margin-right: 12px;
}

.admin_modal.llm_call .form-loading-text {
  color: #6b7280;
  font-size: 14px;
}

/* API Stats Rows - High contrast alternating backgrounds */
.admin-api-stat-row {
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 8px 12px;
  transition: background-color 0.15s;
}

.admin-api-stat-row-even {
  background-color: #ffffff;
}

.admin-api-stat-row-odd {
  background-color: #4b5563;
}

.admin-api-stat-row-odd .admin-api-stat-name,
.admin-api-stat-row-odd .admin-api-stat-label,
.admin-api-stat-row-odd .admin-api-stat-value {
  color: #ffffff;
}

.admin-api-stat-name {
  font-weight: 500;
  font-size: 14px;
  margin-bottom: 4px;
  color: #111827;
}

.admin-api-stat-name code {
  font-size: 12px;
  font-family: monospace;
}

.admin-api-stat-stats {
  font-size: 12px;
  color: #4b5563;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-api-stat-row-odd .admin-api-stat-stats {
  color: #e5e7eb;
}

.admin-api-stat-label {
  color: inherit;
}

.admin-api-stat-value {
  font-weight: 600;
  color: #111827;
}

.admin-api-stat-row-odd .admin-api-stat-value {
  color: #ffffff;
}

/* LLM Token Prices Page */
.admin_page.llm_token_prices {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* LLM Model Categories Page */
.admin_page.llm_model_categories {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.admin_page.llm_model_categories .top-bar {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 20px 24px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.admin_page.llm_model_categories .top-bar-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.admin_page.llm_model_categories .top-bar-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.admin_page.llm_model_categories .top-bar-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
}

.admin_page.llm_model_categories .btn-save {
  padding: 12px 24px;
  border: none;
  border-radius: 6px;
  background-color: #4f46e5;
  color: white;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);
}

.admin_page.llm_model_categories .btn-save:hover:not(:disabled) {
  background-color: #4338ca;
  box-shadow: 0 4px 8px rgba(79, 70, 229, 0.3);
}

.admin_page.llm_model_categories .btn-save:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin_page.llm_model_categories .btn-save:active {
  background-color: #3730a3;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2);
}

.admin_page.llm_model_categories .message {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

.admin_page.llm_model_categories .message-success {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}

.admin_page.llm_model_categories .message-error {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.admin_page.llm_model_categories .message-info {
  background-color: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.admin_page.llm_model_categories .panel {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08);
  padding: 20px 24px;
}

.admin_page.llm_model_categories .panel-title {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 12px 0;
}

.admin_page.llm_model_categories .field-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.admin_page.llm_model_categories .field-input,
.admin_page.llm_model_categories .field-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: white !important;
  color: #111827 !important;
  font-size: 14px;
}

.admin_page.llm_model_categories .field-input::placeholder {
  color: #9ca3af !important;
}

.admin_page.llm_model_categories .field-input:focus,
.admin_page.llm_model_categories .field-select:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
  background-color: white !important;
  color: #111827 !important;
}

.admin_page.llm_model_categories .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 140px 120px;
  gap: 12px;
  align-items: end;
}

.admin_page.llm_model_categories .checkbox-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding-top: 22px; /* align with inputs */
}

.admin_page.llm_model_categories .category-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.admin_page.llm_model_categories .empty-state {
  color: #6b7280;
  font-size: 14px;
  padding: 8px 0;
}

.admin_page.llm_model_categories .main-content {
  padding: 24px;
}

.admin_page.llm_model_categories .content-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.admin_page.llm_model_categories .info-box {
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.admin_page.llm_model_categories .info-box p {
  margin: 0;
  color: #1e40af;
  font-size: 14px;
}

.admin_page.llm_model_categories .info-box strong {
  font-weight: 600;
}

.admin_page.llm_model_categories .loading-message {
  text-align: center;
  padding: 48px 24px;
  color: #6b7280;
  font-size: 16px;
}

.admin_page.llm_model_categories .btn-secondary {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: white;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.admin_page.llm_model_categories .btn-secondary:hover:not(:disabled) {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

.admin_page.llm_model_categories .btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin_page.llm_model_categories .btn-secondary:active {
  background-color: #f3f4f6;
}

.admin_page.llm_model_categories .panel-spacing {
  margin-bottom: 24px;
}

.admin_page.llm_model_categories .no-margin {
  margin: 0;
}

.admin_page.llm_model_categories .form-actions {
  margin-top: 12px;
}

.admin_page.llm_model_categories .panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.admin_page.llm_model_categories .panel-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin_page.llm_model_categories .category-content {
  margin-top: 12px;
}

.admin_page.llm_model_categories .category-row-content {
  min-width: 0;
}

.admin_page.llm_model_categories .category-row-title {
  font-weight: 600;
  color:black;
}

.admin_page.llm_model_categories .category-row-subtitle {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.6);
}

.admin_page.llm_model_categories .category-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.admin_page .ai-model-strength-bars .bar-filled {
  fill: #444;
}

.admin_page .ai-model-strength-bars .bar-empty {
  fill: rgba(0, 0, 0, 0.12);
}

.admin_page .ai-model-cost-indicator .cost-filled {
  color: #444;
}

.admin_page .ai-model-cost-indicator .cost-empty {
  color: rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
  .admin_page.llm_model_categories .top-bar {
    padding: 16px;
  }
  .admin_page.llm_model_categories .top-bar-title {
    font-size: 20px;
  }
  .admin_page.llm_model_categories .panel {
    padding: 16px;
  }
  .admin_page.llm_model_categories .form-grid {
    grid-template-columns: 1fr;
  }
  .admin_page.llm_model_categories .checkbox-row {
    padding-top: 0;
  }
}

.admin_page.llm_token_prices .top-bar {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 20px 24px;
}

.admin_page.llm_token_prices .top-bar-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.admin_page.llm_token_prices .top-bar-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

.admin_page.llm_token_prices .top-bar-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.admin_page.llm_token_prices .search-container {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200px;
  max-width: 400px;
}

.admin_page.llm_token_prices .search-container:focus-within {
  outline: 2px solid #4f46e5;
  outline-offset: 2px;
  border-radius: 6px;
}

.admin_page.llm_token_prices .search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.admin_page.llm_token_prices .search-input:focus {
  outline: none;
  border-color: #4f46e5;
}

.admin_page.llm_token_prices .search-icon {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: #6b7280;
  pointer-events: none;
}

.admin_page.llm_token_prices .sort-select {
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  background-color: white;
  color: #374151;
  cursor: pointer;
}

.admin_page.llm_token_prices .sort-select:focus {
  outline: none;
  border-color: #4f46e5;
}

.admin_page.llm_token_prices .btn-secondary {
  padding: 8px 16px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: white;
  color: #374151;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.admin_page.llm_token_prices .btn-secondary:active {
  background-color: #f9fafb;
}

.admin_page.llm_token_prices .message {
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
}

.admin_page.llm_token_prices .message-success {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #6ee7b7;
}

.admin_page.llm_token_prices .message-error {
  background-color: #fee2e2;
  color: #991b1b;
  border: 1px solid #fca5a5;
}

.admin_page.llm_token_prices .message-info {
  background-color: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}

.admin_page.llm_token_prices .main-content {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  padding: 24px;
}

.admin_page.llm_token_prices .content-wrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.admin_page.llm_token_prices .info-box {
  padding: 12px 16px;
  background-color: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  font-size: 14px;
  color: #0c4a6e;
}

.admin_page.llm_token_prices .info-box strong {
  font-weight: 600;
}

.admin_page.llm_token_prices .prices-table-container {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.admin_page.llm_token_prices .prices-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin_page.llm_token_prices .prices-table thead {
  background-color: #f9fafb;
}

.admin_page.llm_token_prices .prices-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 2px solid #e5e7eb;
  white-space: nowrap;
}

.admin_page.llm_token_prices .prices-table tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.15s;
}

.admin_page.llm_token_prices .prices-table tbody tr:active {
  background-color: #f9fafb;
}

.admin_page.llm_token_prices .prices-table .provider-header {
  background-color: #f3f4f6;
  font-weight: 600;
  color: #111827;
  border-bottom: 2px solid #d1d5db;
}

.admin_page.llm_token_prices .prices-table .provider-header td {
  padding: 10px 16px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.admin_page.llm_token_prices .prices-table td {
  padding: 12px 16px;
  color: #374151;
  vertical-align: middle;
}

.admin_page.llm_token_prices .prices-table .model-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  color: #111827;
  font-weight: 500;
}

.admin_page.llm_token_prices .prices-table .price-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  text-align: right;
  vertical-align: top;
}

.admin_page.llm_token_prices .price-input {
  width: 100px;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  text-align: right;
}

.admin_page.llm_token_prices .comments-cell {
  vertical-align: top;
}

.admin_page.llm_token_prices .price-comments {
  width: 240px;
  min-width: 180px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #111827;
  background-color: #ffffff;
  resize: vertical;
}

.admin_page.llm_token_prices .price-comments:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.admin_page.llm_token_prices .price-input:focus {
  outline: none;
  border-color: #4f46e5;
}

.admin_page.llm_token_prices .price-input-readonly {
  background-color: #f9fafb;
  color: #374151;
  cursor: not-allowed;
}

.admin_page.llm_token_prices .price-input-percent {
  width: 70px;
}

.admin_page.llm_token_prices .price-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
}

.admin_page.llm_token_prices .price-stack-row {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.admin_page.llm_token_prices .price-stack-label {
  font-size: 11px;
  color: #6b7280;
  min-width: 64px;
  text-align: left;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
}

.admin_page.llm_token_prices .price-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin_page.llm_token_prices .price-group-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
}

.admin_page.llm_token_prices .price-group-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.admin_page.llm_token_prices .price-group-field .price-label {
  margin-bottom: 6px;
}

.admin_page.llm_token_prices .date-input {
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 13px;
}

.admin_page.llm_token_prices .date-input:focus {
  outline: none;
  border-color: #4f46e5;
}

.admin_page.llm_token_prices .date-label {
  font-size: 13px;
  color: #111827;
  font-weight: 500;
  white-space: nowrap;
}

.admin_page.llm_token_prices .actions-cell {
  text-align: right;
}

.admin_page.llm_token_prices .btn-edit {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: white;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.admin_page.llm_token_prices .btn-edit:active {
  background-color: #f9fafb;
}

.admin_page.llm_token_prices .edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.admin_page.llm_token_prices .btn-save {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  background-color: #4f46e5;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.admin_page.llm_token_prices .btn-save:active {
  background-color: #4338ca;
}

.admin_page.llm_token_prices .btn-cancel {
  padding: 6px 12px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: white;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.admin_page.llm_token_prices .btn-cancel:active {
  background-color: #f9fafb;
}

.admin_page.llm_token_prices .loading-message {
  text-align: center;
  padding: 24px;
  color: #6b7280;
  font-size: 14px;
}

/* Mobile-friendly styles for LLM Token Prices */
@media (max-width: 768px) {
  .admin_page.llm_token_prices .top-bar {
    padding: 16px;
  }

  .admin_page.llm_token_prices .top-bar-title {
    font-size: 20px;
  }

  .admin_page.llm_token_prices .top-bar-actions {
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  .admin_page.llm_token_prices .search-container {
    min-width: 100%;
    width: 100%;
  }

  .admin_page.llm_token_prices .sort-select,
  .admin_page.llm_token_prices .btn-secondary {
    width: 100%;
    padding: 12px;
    font-size: 16px; /* Prevents zoom on iOS */
  }

  .admin_page.llm_token_prices .main-content {
    padding: 16px;
    border-radius: 0;
    box-shadow: none;
  }

  .admin_page.llm_token_prices .content-wrapper {
    gap: 16px;
  }

  .admin_page.llm_token_prices .info-box {
    padding: 12px;
    font-size: 13px;
  }

  /* Hide table on mobile, show card layout */
  .admin_page.llm_token_prices .prices-table-container {
    display: none;
  }

  /* Card layout for mobile */
  .admin_page.llm_token_prices .prices-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .admin_page.llm_token_prices .price-card {
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .admin_page.llm_token_prices .price-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
  }

  .admin_page.llm_token_prices .price-card-model {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    flex: 1;
    word-break: break-word;
  }

  .admin_page.llm_token_prices .price-card-provider {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
  }

  .admin_page.llm_token_prices .price-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .admin_page.llm_token_prices .price-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
  }

  .admin_page.llm_token_prices .price-row:last-child {
    border-bottom: none;
  }

  .admin_page.llm_token_prices .price-label {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
  }

  .admin_page.llm_token_prices .price-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 14px;
    color: #111827;
    font-weight: 500;
    text-align: right;
  }

  .admin_page.llm_token_prices .price-comments {
    width: 100%;
    min-width: 0;
  }

  .admin_page.llm_token_prices .price-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
  }

  .admin_page.llm_token_prices .price-card-actions .btn-edit,
  .admin_page.llm_token_prices .price-card-actions .btn-save,
  .admin_page.llm_token_prices .price-card-actions .btn-cancel {
    flex: 1;
    padding: 10px;
    font-size: 14px;
    min-height: 44px; /* iOS touch target */
  }

  .admin_page.llm_token_prices .price-card .price-input,
  .admin_page.llm_token_prices .price-card .date-input {
    width: 100%;
    padding: 10px;
    font-size: 16px; /* Prevents zoom on iOS */
    min-height: 44px;
  }

  .admin_page.llm_token_prices .provider-header-mobile {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 12px 0 8px 0;
    margin-top: 16px;
    border-bottom: 2px solid #d1d5db;
  }

  .admin_page.llm_token_prices .provider-header-mobile:first-child {
    margin-top: 0;
  }
}

/* Show cards on mobile, hide on desktop */
.admin_page.llm_token_prices .prices-cards {
  display: none;
}

@media (max-width: 768px) {
  .admin_page.llm_token_prices .prices-cards {
    display: flex;
  }
}

/* FX Markup Page Styles */
.admin_page.fx_markup {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.admin_page.fx_markup > * + * {
  margin-top: 24px;
}

/* Header */
.admin_page.fx_markup .fx-header {
  margin-bottom: 0;
}

.admin_page.fx_markup .fx-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px 0;
}

.admin_page.fx_markup .fx-description {
  margin-top: 8px;
  margin-bottom: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}

/* Messages */
.admin_page.fx_markup .fx-message {
  padding: 12px;
  border-radius: 6px;
  white-space: pre-wrap;
  border: 1px solid;
}

.admin_page.fx_markup .fx-message-success {
  background-color: #f0fdf4;
  color: #166534;
  border-color: #86efac;
}

.admin_page.fx_markup .fx-message-error {
  background-color: #fef2f2;
  color: #991b1b;
  border-color: #fca5a5;
}

.admin_page.fx_markup .fx-message-info {
  background-color: #eff6ff;
  color: #1e40af;
  border-color: #93c5fd;
}

/* Cards */
.admin_page.fx_markup .fx-card {
  background-color: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}

.admin_page.fx_markup .fx-card-header {
  padding: 16px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.admin_page.fx_markup .fx-card-title {
  font-size: 18px;
  font-weight: 500;
  color: #111827;
  margin: 0;
}

.admin_page.fx_markup .fx-card-subtitle {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 14px;
  color: #4b5563;
}

.admin_page.fx_markup .fx-card-content {
  padding: 16px 24px;
}

.admin_page.fx_markup .fx-card-content > * + * {
  margin-top: 16px;
}

/* Loading and Empty States */
.admin_page.fx_markup .fx-loading,
.admin_page.fx_markup .fx-empty {
  color: #6b7280;
  font-size: 14px;
}

/* Global Form */
.admin_page.fx_markup .fx-global-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (min-width: 640px) {
  .admin_page.fx_markup .fx-global-form {
    flex-direction: row;
    align-items: flex-end;
  }
}

.admin_page.fx_markup .fx-pair-info {
  flex: 1;
}

.admin_page.fx_markup .fx-pair-label {
  font-size: 14px;
  color: #374151;
  margin-bottom: 4px;
}

.admin_page.fx_markup .fx-pair-value {
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color: #111827;
}

.admin_page.fx_markup .fx-input-group {
  width: 100%;
}

@media (min-width: 640px) {
  .admin_page.fx_markup .fx-input-group {
    width: 192px;
  }
}

/* Inputs */
.admin_page.fx_markup .fx-label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.admin_page.fx_markup .fx-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  color: #111827;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.admin_page.fx_markup .fx-input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.admin_page.fx_markup .fx-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}

.admin_page.fx_markup .fx-input:active {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.admin_page.fx_markup .fx-input:disabled {
  background-color: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
  border-color: #e5e7eb;
  opacity: 0.7;
}

.admin_page.fx_markup .fx-input:disabled::placeholder {
  color: #d1d5db;
}

.admin_page.fx_markup .fx-input-table {
  width: 160px;
  padding: 8px 12px;
  font-size: 13px;
}

/* Buttons */
.admin_page.fx_markup .fx-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: inherit;
}

.admin_page.fx_markup .fx-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.admin_page.fx_markup .fx-btn-primary {
  background-color: #4f46e5;
  color: #ffffff;
}

.admin_page.fx_markup .fx-btn-primary:disabled {
  background-color: #9ca3af;
}

.admin_page.fx_markup .fx-btn-primary:active:not(:disabled) {
  background-color: #4338ca;
}

.admin_page.fx_markup .fx-btn-secondary {
  background-color: #e5e7eb;
  color: #1f2937;
}

.admin_page.fx_markup .fx-btn-secondary:disabled {
  background-color: #f3f4f6;
  color: #9ca3af;
}

.admin_page.fx_markup .fx-btn-secondary:active:not(:disabled) {
  background-color: #d1d5db;
}

.admin_page.fx_markup .fx-btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* Override Form */
.admin_page.fx_markup .fx-override-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: flex-end;
}

@media (min-width: 640px) {
  .admin_page.fx_markup .fx-override-form {
    grid-template-columns: repeat(5, 1fr);
  }
}

.admin_page.fx_markup .fx-override-field {
  display: flex;
  flex-direction: column;
}

.admin_page.fx_markup .fx-override-actions {
  display: flex;
  gap: 8px;
}

@media (min-width: 640px) {
  .admin_page.fx_markup .fx-override-actions {
    grid-column: span 2;
  }
}

/* Table */
.admin_page.fx_markup .fx-table-wrapper {
  overflow-x: auto;
}

.admin_page.fx_markup .fx-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
}

.admin_page.fx_markup .fx-table-head {
  background-color: #f9fafb;
}

.admin_page.fx_markup .fx-table-th {
  padding: 12px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #e5e7eb;
}

.admin_page.fx_markup .fx-table-body {
  background-color: #ffffff;
}

.admin_page.fx_markup .fx-table-row {
  border-bottom: 1px solid #e5e7eb;
}

.admin_page.fx_markup .fx-table-td {
  padding: 12px 16px;
  white-space: nowrap;
  font-size: 14px;
  color: #111827;
}

.admin_page.fx_markup .fx-table-td-mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Promotion Settings Page Styles */
.admin_page.promotion_settings {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

.admin_page.promotion_settings > * + * {
  margin-top: 24px;
}

/* Header */
.admin_page.promotion_settings .fx-header {
  margin-bottom: 0;
}

.admin_page.promotion_settings .fx-title {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px 0;
}

.admin_page.promotion_settings .fx-description {
  margin-top: 8px;
  margin-bottom: 0;
  color: #4b5563;
  font-size: 14px;
  line-height: 1.5;
}

/* Messages */
.admin_page.promotion_settings .fx-message {
  padding: 12px 16px;
  border-radius: 8px;
  white-space: pre-wrap;
  border: 1px solid;
  font-size: 14px;
  line-height: 1.5;
}

.admin_page.promotion_settings .fx-message-success {
  background-color: #f0fdf4;
  color: #166534;
  border-color: #86efac;
}

.admin_page.promotion_settings .fx-message-error {
  background-color: #fef2f2;
  color: #991b1b;
  border-color: #fca5a5;
}

.admin_page.promotion_settings .fx-message-info {
  background-color: #eff6ff;
  color: #1e40af;
  border-color: #93c5fd;
}

/* Cards */
.admin_page.promotion_settings .fx-card {
  background-color: #ffffff;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.admin_page.promotion_settings .fx-card-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.admin_page.promotion_settings .fx-card-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
}

.admin_page.promotion_settings .fx-card-subtitle {
  margin-top: 4px;
  margin-bottom: 0;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}

.admin_page.promotion_settings .fx-card-content {
  padding: 24px;
}

/* Grid Layout */
.admin_page.promotion_settings .promotion-settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

@media (min-width: 1024px) {
  .admin_page.promotion_settings .promotion-settings-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Form Grid */
.admin_page.promotion_settings .fx-form-grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Input Groups */
.admin_page.promotion_settings .fx-input-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Labels */
.admin_page.promotion_settings .fx-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin: 0;
}

.admin_page.promotion_settings .fx-label-hint {
  font-size: 12px;
  font-weight: 400;
  color: #9ca3af;
}

/* Input Wrapper */
.admin_page.promotion_settings .fx-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.admin_page.promotion_settings .fx-input-prefix {
  position: absolute;
  left: 14px;
  font-size: 14px;
  color: #6b7280;
  font-weight: 500;
  pointer-events: none;
  z-index: 1;
}

.admin_page.promotion_settings .fx-input-suffix {
  position: absolute;
  right: 14px;
  font-size: 14px;
  color: #6b7280;
  pointer-events: none;
  z-index: 1;
}

/* Inputs */
.admin_page.promotion_settings .fx-input {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  color: #111827;
  font-size: 14px;
  font-family: inherit;
  line-height: 1.5;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
}

.admin_page.promotion_settings .fx-input-wrapper .fx-input {
  padding-left: 14px;
  padding-right: 14px;
}

.admin_page.promotion_settings .fx-input-wrapper.with-prefix .fx-input {
  padding-left: 28px;
}

.admin_page.promotion_settings .fx-input-wrapper.with-suffix .fx-input {
  padding-right: 100px;
}

.admin_page.promotion_settings .fx-input-wrapper.with-prefix.with-suffix .fx-input {
  padding-left: 28px;
  padding-right: 100px;
}

.admin_page.promotion_settings .fx-input::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.admin_page.promotion_settings .fx-input:focus {
  outline: none;
  border-color: #4f46e5;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}

.admin_page.promotion_settings .fx-input:active {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15), 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.admin_page.promotion_settings .fx-input:disabled {
  background-color: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
  border-color: #e5e7eb;
  opacity: 0.7;
}

.admin_page.promotion_settings .fx-input:disabled::placeholder {
  color: #d1d5db;
}

/* Helper Text */
.admin_page.promotion_settings .fx-helper-text {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

.admin_page.promotion_settings .fx-helper-text-highlight {
  color: #4f46e5;
  font-weight: 500;
}

/* Loading State */
.admin_page.promotion_settings .fx-loading {
  color: #6b7280;
  font-size: 14px;
  text-align: center;
  padding: 24px;
}

/* Actions */
.admin_page.promotion_settings .fx-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 8px;
}

/* Buttons */
.admin_page.promotion_settings .fx-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.admin_page.promotion_settings .fx-btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.admin_page.promotion_settings .fx-btn-primary {
  background-color: #4f46e5;
  color: #ffffff;
}

.admin_page.promotion_settings .fx-btn-primary:disabled {
  background-color: #9ca3af;
}

.admin_page.promotion_settings .fx-btn-primary:active:not(:disabled) {
  background-color: #4338ca;
}

.admin_page.promotion_settings .fx-btn-lg {
  padding: 12px 24px;
  font-size: 15px;
}

/* User Events */
.admin_page.user_events {
  padding: 24px;
  max-width: 1200px;
}

.admin_page.user_events .title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #1e293b;
}

.admin_page.user_events .search-form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.admin_page.user_events .filter-group {
  min-width: 160px;
}

.admin_page.user_events .filter-group-user {
  flex: 1;
  min-width: 200px;
}

.admin_page.user_events .filter-label {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-bottom: 4px;
}

.admin_page.user_events .filter-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.admin_page.user_events .search-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 6px;
  background: #6366f1;
  color: white;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  height: 37px;
}

.admin_page.user_events .search-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.admin_page.user_events .error-bar {
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #991b1b;
  margin-bottom: 16px;
  font-size: 13px;
}

.admin_page.user_events .user-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #4338ca;
}

.admin_page.user_events .user-bar strong {
  color: #1e1b4b;
}

.admin_page.user_events .user-bar .count {
  margin-left: auto;
}

.admin_page.user_events .table-wrap {
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
}

.admin_page.user_events table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin_page.user_events thead tr {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.admin_page.user_events th {
  padding: 10px 12px;
  text-align: left;
  color: #6b7280;
  font-weight: 600;
}

.admin_page.user_events tbody tr {
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  background: #fff;
}

.admin_page.user_events tbody tr.expanded {
  background: #f9fafb;
}

.admin_page.user_events .col-time {
  padding: 8px 12px;
  color: #6b7280;
  white-space: nowrap;
  font-family: monospace;
  font-size: 12px;
}

.admin_page.user_events .col-event {
  padding: 8px 12px;
}

.admin_page.user_events .event-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: #eef2ff;
  color: #4338ca;
  font-family: monospace;
  font-size: 12px;
  border: 1px solid #c7d2fe;
}

.admin_page.user_events .col-props {
  padding: 8px 12px;
  color: #6b7280;
  font-family: monospace;
  font-size: 12px;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin_page.user_events .expanded-row {
  background: #f9fafb;
}

.admin_page.user_events .expanded-row td {
  padding: 12px 16px;
}

.admin_page.user_events .expanded-row pre {
  margin: 0;
  color: #1e293b;
  font-size: 12px;
  font-family: monospace;
  white-space: pre-wrap;
  word-break: break-all;
}

.admin_page.user_events .pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
  color: #6b7280;
}

.admin_page.user_events .pagination button {
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
  color: #374151;
  cursor: pointer;
}

.admin_page.user_events .pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin_page.user_events .empty-state {
  text-align: center;
  padding: 40px;
  color: #6b7280;
  font-size: 14px;
}
/* Settings Page Styles */
.settingsPage header{
    display: none;
}

.settingsPage {
  --settings_bg: #0a0b0d;
  --settings_text: #f8fafc;
  --settings_muted: rgba(248, 250, 252, 0.68);
  --settings_border: rgba(255, 255, 255, 0.08);
  --settings_surface: rgba(255, 255, 255, 0.045);
  --settings_surface_2: rgba(255, 255, 255, 0.06);
  --settings_active: rgba(255, 255, 255, 0.06);
  --settings_accent: #10b981;
  --settings_error: #ef4444;
  --settings_success: #10b981;

  background: var(--settings_bg) !important;
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.settingsPage .settingsFixedHeader{
  flex-shrink: 0;
  /* Match App Factory list header sizing */
  padding: calc(16px + var(--safe-top)) 20px 16px 20px;
  background: var(--settings_bg);
  border-bottom: 1px solid var(--settings_border);
  box-shadow: 0 0 16px #00000040;
  z-index: 2;
}

.settingsPage .settingsFixedHeaderLeft{
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.settingsPage .settingsFixedHeaderLeft svg{
  height: 24px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.settingsPage .settingsFixedHeaderLeft .settingsPageTitle{
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

.settingsPage .socialPageContent{
  /* App Factory pattern: header is a sibling; only this area scrolls */
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px 20px calc(24px + var(--safe-bottom)) 20px;
  /* Override global Social padding (it assumes header is overlayed) */
  padding-top: 16px;
}

.settingsPage .settingsBackButton{
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settingsPage h1{
    font-size: 14px;
    font-weight: 600;
    color: var(--settings_text);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.settingsPage .pageContent {
  padding: 40px 20px 24px 20px;
  max-width: 600px;
  margin: 0 auto;
}

.settingsContainer {
  /* background: white; */
  border-radius: 20px;
  /* padding: 32px 24px; */
  /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); */
  /* border: 1px solid rgba(0, 0, 0, 0.05); */
}

.settingsPage .settingsTopBar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding: 2px 2px 0 2px;
}

.settingsPage .settingsPageTitle{
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--settings_text);
}

/* settingsStatusPill removed: Settings now uses global toasts for save feedback */

.settingsTitle {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 32px 0;
  text-align: center;
}

/* Message Containers */
.messageContainer {
  padding: 12px 16px;
  border-radius: 12px;
  margin-bottom: 24px;
  font-weight: 600;
  font-size: 14px;
}

.errorMessage {
  background: #fef2f2;
  color: #dc2626;
}

.successMessage {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #16a34a;
}

/* Settings Sections */
.settingsSection {
  margin-bottom: 32px;
}

.settingsSection:last-of-type {
  margin-bottom: 24px;
}

.sectionTitle {
  font-size: 12px;
  font-weight: 700;
  color: var(--settings_muted);
  margin: 0 0 10px 0;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* .settingsPage .settingsGroup{
  border-radius: 16px;
  border: 1px solid var(--settings_border);
  background: var(--settings_surface);
  overflow: hidden;
} */

.settingsPage .settingsInlinePanel{
  margin: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--settings_border);
  background: rgba(0, 0, 0, 0.18);
}

.settingsPage .settingsGroupFooter{
  padding: 12px;
  border-top: 1px solid var(--settings_border);
  background: rgba(0, 0, 0, 0.12);
}

/* Setting Items */
.settingItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px;
  border-bottom: 1px solid var(--settings_border);
}

.settingItem:last-child {
  border-bottom: none;
}

.settingLabel {
  font-size: 16px;
  font-weight: 600;
  color: var(--settings_text);
  flex: 1;
}

.settingArrow {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  color: #6b7280;
  flex-shrink: 0;
}

/* Theme Segmented Control */
.themeSegmented {
  display: flex;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  flex-shrink: 0;
}

.themeSegmentedBtn {
  padding: 6px 18px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  outline: none;
}

.themeSegmentedBtn.selected {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

body.light_mode .themeSegmented {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.12);
}

body.light_mode .themeSegmentedBtn {
  color: rgba(0, 0, 0, 0.4);
}

body.light_mode .themeSegmentedBtn.selected {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Toggle Switch */
.toggleContainer {
  display: flex;
  align-items: center;
}

.toggle {
  position: relative;
  width: 50px;
  height: 28px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: background-color 0.22s ease, transform 0.12s ease;
  outline: none;
}

.toggle:focus-visible {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.toggle.active {
  background: var(--settings_accent);
}

.toggleThumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  background: white;
  border-radius: 50%;
  transition: transform 0.22s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toggle.active .toggleThumb {
  transform: translateX(22px);
}

.settingsPage .settingNavRow{
  cursor: pointer;
}

.settingsPage .settingNavRow:active{
  background: var(--settings_active);
}

.settingsPage .settingValue{
  font-size: 14px;
  font-weight: 600;
  color: var(--settings_muted);
  margin-left: 10px;
  flex-shrink: 0;
}

/* Currency Picker Drawer - works in dark drawer context */
#currency_picker_drawer.transform-drawer .drawer {
  background: #000 !important;
}

#currency_picker_drawer .drawer-content {
  background: #000;
  color: #f8fafc;
}

body.light_mode #currency_picker_drawer.transform-drawer .drawer {
  background: #fff !important;
}

body.light_mode #currency_picker_drawer .drawer-content {
  background: #fff;
  color: #0b1220;
}

#currency_picker_drawer .currencyPicker{
  padding: 16px 20px 20px 20px;
  background: transparent;
  min-height: 100%;
}

#currency_picker_drawer .currencyPickerSearchRow{
  padding: 0 0 12px 0;
  margin-bottom: 8px;
}

#currency_picker_drawer .currencyPickerSearchInput{
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
}

#currency_picker_drawer .currencyPickerSearchInput::placeholder{
  color: rgba(255, 255, 255, 0.5);
}

#currency_picker_drawer .currencyPickerSearchInput:focus{
  border-color: #3b82f6;
  background: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

#currency_picker_drawer .currencyPickerNote{
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 12px 0;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 8px;
  line-height: 1.4;
}

#currency_picker_drawer .currencyPickerList{
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
  max-height: calc(75vh - 220px);
  min-height: 200px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

body.light_mode #currency_picker_drawer .currencyPickerList{
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

#currency_picker_drawer .currencyPickerItem{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: none;
  background: transparent;
  color: #f8fafc;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
}

#currency_picker_drawer .currencyPickerItem:last-child{
  border-bottom: none;
}

#currency_picker_drawer .currencyPickerItem:active{
  background: rgba(255, 255, 255, 0.1);
}

#currency_picker_drawer .currencyPickerItem.active{
  background: rgba(16, 185, 129, 0.2);
  border-left: 3px solid #10b981;
}

#currency_picker_drawer .currencyPickerItem.active .currencyPickerCode{
  color: #10b981;
}

#currency_picker_drawer .currencyPickerItemMain{
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

#currency_picker_drawer .currencyPickerCode{
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
  flex-shrink: 0;
  color: #f8fafc;
}

#currency_picker_drawer .currencyPickerName{
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

#currency_picker_drawer .currencyPickerChevron{
  color: rgba(255, 255, 255, 0.5);
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

#currency_picker_drawer .currencyPickerEmpty{
  padding: 40px 20px;
  text-align: center;
}

#currency_picker_drawer .currencyPickerEmptyText{
  color: rgba(255, 255, 255, 0.6);
  font-size: 14px;
}

body.light_mode #currency_picker_drawer .currencyPickerEmptyText{
  color: rgba(0, 0, 0, 0.6);
}

/* Light mode support */
body.light_mode #currency_picker_drawer .currencyPicker{
  background: #fff;
}

body.light_mode #currency_picker_drawer .currencyPickerSearchInput{
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.15);
  color: #0b1220;
}

body.light_mode #currency_picker_drawer .currencyPickerSearchInput::placeholder{
  color: rgba(0, 0, 0, 0.5);
}

body.light_mode #currency_picker_drawer .currencyPickerNote{
  color: rgba(0, 0, 0, 0.6);
  background: rgba(0, 0, 0, 0.03);
}

body.light_mode #currency_picker_drawer .currencyPickerItem{
  color: #0b1220;
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

body.light_mode #currency_picker_drawer .currencyPickerItem:active{
  background: rgba(0, 0, 0, 0.06);
}

body.light_mode #currency_picker_drawer .currencyPickerItem.active{
  background: rgba(16, 185, 129, 0.1);
}

body.light_mode #currency_picker_drawer .currencyPickerCode{
  color: #0b1220;
}

body.light_mode #currency_picker_drawer .currencyPickerName{
  color: rgba(0, 0, 0, 0.7);
}

body.light_mode #currency_picker_drawer .currencyPickerChevron{
  color: rgba(0, 0, 0, 0.5);
}

.settingsPage .settingsErrorActions{
  display: flex;
  gap: 10px;
  align-items: center;
}

/* Dropdown Styles */
.dropdownContainer {
  position: relative;
  min-width: 200px;
}

.dropdown {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 1px solid var(--settings_border);
  border-radius: 12px;
  background: var(--settings_surface_2);
  font-size: 16px;
  font-weight: 500;
  color: var(--settings_text);
  cursor: pointer;
  outline: none;
  appearance: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease;
}

.dropdown:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.dropdown:active{
  transform: scale(0.99);
}

.dropdownArrow {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #6b7280;
}

/* Password Input Styles */
.inputContainer {
  min-width: 200px;
}

.passwordInput {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--settings_border);
  border-radius: 12px;
  background: var(--settings_surface_2);
  font-size: 16px;
  font-weight: 500;
  color: var(--settings_text);
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.passwordInput:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.passwordInput::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

/* Save Button (legacy) */
.saveButtonContainer {
  display: flex;
  justify-content: center;
  margin-top: 32px;
}
.saveButtonContainer .acceptButton {
  border-radius: 8px;
  /* background: #000; */
}

.settingsSection .acceptButton {
  color:white;
}

.saveButton {
  background: #dc2626;
  color: white;
  border: none;
  padding: 16px 32px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  min-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.saveButton:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.2);
}

.saveButton:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.saveButton:focus-visible {
  outline: 2px solid #dc2626;
  outline-offset: 2px;
}

/* Loading Spinner */
.loadingSpinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Dark mode dropdown styles - only apply when not in light mode */
body:not(.light_mode) .dropdown,
body:not(.light_mode) .passwordInput {
    background: #202226;
    border-color: #ffffff0d;
    color: #f1f5f9;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mobile Responsive */
@media (max-width: 640px) {
  .pageContent {
    padding: 32px 16px 24px 16px;
  }

  .settingsTitle {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .sectionTitle {
    font-size: 18px;
    margin-bottom: 16px;
  }

  .settingItem {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 20px 0;
  }

  /* Keep navigation rows (e.g. Notification Settings) on one line */
  .settingsPage .settingNavRow{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px;
  }
  
  .settingItem.row {
    flex-flow: row nowrap;
    align-items: center;
  }

  .settingLabel {
    font-size: 15px;
  }

  .dropdownContainer,
  .inputContainer {
    width: 100%;
    min-width: auto;
  }

  .dropdown,
  .passwordInput {
    font-size: 15px;
  }

  .saveButton {
    width: 100%;
    padding: 14px 24px;
    font-size: 15px;
  }

  .retryButton {
    font-size: 15px;
    background: none !important;
    color: #ff0000
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  .dropdown:focus,
  .passwordInput:focus {
    border-color: #3b82f6;
  }

  .dropdown::placeholder,
  .passwordInput::placeholder {
    color: #94a3b8;
  }

  .dropdownArrow {
    color: #94a3b8;
  }
}

body.light_mode .settingsPage {
  --settings_bg: #f5f6f8;
  --settings_text: #0b1220;
  --settings_muted: rgba(11, 18, 32, 0.55);
  --settings_border: rgba(11, 18, 32, 0.12);
  --settings_surface: rgba(255, 255, 255, 0.85);
  --settings_surface_2: rgba(255, 255, 255, 0.95);
  --settings_active: rgba(11, 18, 32, 0.06);

  background: var(--settings_bg) !important;
}

body.light_mode .settingsTitle, body.light_mode .sectionTitle, body.light_mode .settingLabel{
    color: #000;
}

body.light_mode .settingsPage .settingLabel{
    color: #000;
}

body.light_mode .settingsPage h1{
    color: #8999af;
}

body.light_mode .settingsPage .settingItem{
    border-bottom-color: #cacaca;
}

/* Header text in light mode */
body.light_mode .settingsPage .settingsFixedHeaderLeft {
    color: #111827;
}

body.light_mode .settingsPage .settingsFixedHeaderLeft .settingsPageTitle {
    color: #111827;
}

body.light_mode .settingsPage .settingsFixedHeaderLeft svg {
    color: #111827;
}

/* Dropdowns and inputs in light mode */
body.light_mode .dropdown,
body.light_mode .passwordInput {
    background: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #111827 !important;
}

body.light_mode .dropdown::placeholder,
body.light_mode .passwordInput::placeholder {
    color: #9ca3af !important;
}

body.light_mode .dropdownArrow {
    color: #6b7280 !important;
}

body.light_mode .dropdown:focus,
body.light_mode .passwordInput:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

/* Toggle switch contrast in light mode */
body.light_mode .toggle {
    background: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light_mode .toggle.active {
    background: var(--settings_accent) !important;
}

body.light_mode .toggleThumb {
    background: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Create User Button - Yellow admin buttons */
.settingsPage .createUserButton {
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 12px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #000000;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}

.settingsPage .createUserButton:active:not(:disabled) {
  transform: scale(0.98);
  box-shadow: 0 1px 4px rgba(251, 191, 36, 0.4);
}

.settingsPage .createUserButton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.settingsPage .createUserButton:focus-visible {
  outline: 2px solid #fbbf24;
  outline-offset: 2px;
}

body.light_mode .settingsPage .createUserButton {
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #000000;
}

/* Avatar Upload Styles */
.settingsPage .avatarPreview {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.settingsPage .avatarPreview:active {
  transform: scale(0.95);
  opacity: 0.9;
}

.settingsPage .avatarPreview img {
  transition: border-color 0.2s ease;
}

.settingsPage .avatarPreview:active img {
  border-color: #10b981;
}

body.android .settingsPage .settingsGroup{
  border-radius: 14px;
}.savedPaymentMethods {
  margin-bottom: 2rem;
}

.paymentMethodsList {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.paymentMethodCard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border: 2px solid #e5e7eb;
  border-radius: 20px;
  background: #ffffff;
  color: #111827;
  cursor: pointer;
  transition: all 0.2s ease;
}

.paymentMethodCard:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.12);
}

.paymentMethodCard.selected {
  border-color: #3b82f6;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.15), 0 2px 10px rgba(59, 130, 246, 0.10);
}

.cardInfo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.cardIcon {
  font-size: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: 12px;
}

.cardDetails {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.cardBrand {
  font-weight: 600;
  color: #111827;
  font-size: 1rem;
}

.cardExpiry {
  font-size: 0.8rem;
  color: #6b7280;
}

.cardActions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.selectedBadge {
  background: #10b981;
  color: white;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.deleteButton {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deleteButton:hover {
  background: #f3f4f6;
}

.deleteButton:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.emptyState {
  text-align: center;
  padding: 2rem;
  color: #6b7280;
}

.emptyIcon {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.emptySubtext {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.loadingSpinner.small {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

/* Intentionally consistent styling across all modes (light + dark). */
/* Base Balance Page Styles */
.balancePage {
  --balance_bg: #0a0b0d;
  --balance_border: rgba(255, 255, 255, 0.08);

  background: #f9fafb !important;
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.balancePage header {
  display: none;
}

.balancePage .balanceFixedHeader {
  flex-shrink: 0;
  padding: calc(16px + var(--safe-top)) 20px 16px 20px;
  background: var(--balance_bg);
  border-bottom: 1px solid var(--balance_border);
  box-shadow: 0 0 16px #00000040;
  z-index: 2;
}

.balancePage .balanceFixedHeaderLeft {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}

.balancePage .balanceBackButton {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.balancePage .balanceFixedHeaderLeft svg {
  height: 24px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.balancePage .balanceFixedHeaderLeft .balancePageTitle {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #fff;
}

/* Light mode balance header */
body.light_mode .balancePage .balanceFixedHeader {
  background: #fff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

body.light_mode .balancePage .balanceFixedHeaderLeft {
  color: #111827 !important;
}

body.light_mode .balancePage .balanceFixedHeaderLeft svg {
  color: #111827 !important;
  fill: #111827 !important;
  stroke: #111827 !important;
}

body.light_mode .balancePage .balanceFixedHeaderLeft .balancePageTitle {
  color: #111827 !important;
}

.balancePage .socialPageContent {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
  border-radius: 0;
}

.pageContent {
  flex: 1;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.balanceContainer {
  background: white;
  border-radius: 0;
  padding: 24px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

/* Message Containers */
.messageContainer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 14px;
  line-height: 1.5;
}

.errorMessage {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #dc2626;
}

.successMessage {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0369a1;
}

.clearButton {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  color: inherit;
  opacity: 0.7;
}

.clearButton:hover {
  opacity: 1;
}

/* Tab Navigation */
.tabContainer {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: none;
  border: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  transition: all 0.2s ease;
}

.tab.active {
  background: #f3f4f6;
  color: #111827;
}

.tabIcon {
  font-size: 16px;
}

/* Balance Section */
.balanceSection {
  text-align: center;
  padding: 32px 0;
  margin-bottom: 32px;
  background: #f9fafb;
  border-radius: 12px;
}

.walletsSection {
  margin-bottom: 24px;
}

.walletsHeader {
  margin-bottom: 12px;
}

.walletsTitle {
  font-size: 18px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 2px 0;
  letter-spacing: -0.01em;
}

.walletsSubtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.walletsList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.walletRow {
  width: 100%;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 12px;
  padding: 14px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  cursor: pointer;
}

.walletRow:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.walletRow:active {
  border-color: #3b82f6;
  background: #eff6ff;
}

.walletRowLeft {
  min-width: 0;
}

.walletCurrency {
  font-weight: 800;
  color: #111827;
  letter-spacing: 0.04em;
}

.walletEarnings {
  margin-top: 3px;
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.walletRowRight {
  text-align: right;
  flex: 0 0 auto;
}

.walletAmount {
  font-weight: 800;
  color: #111827;
  font-variant-numeric: tabular-nums;
}

.walletHint {
  margin-top: 3px;
  font-size: 12px;
  color: #6b7280;
}

/* Transaction currency filter chips */
.txnCurrencyChips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 10px 2px;
  margin: 8px 0 6px 0;
  scrollbar-width: none; /* Firefox */
}

.txnCurrencyChips::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.txnChip {
  flex: 0 0 auto;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.txnChip:active {
  border-color: #3b82f6;
  background: #eff6ff;
}

.txnChip.active {
  border-color: #3b82f6;
  background: #3b82f6;
  color: #fff;
}

.balanceLabel {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 8px;
}

.balanceActiveBadge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.balanceAmount {
  font-size: 48px;
  font-weight: 700;
  color: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.balanceUnit {
  font-size: 18px;
  font-weight: 400;
  color: #6b7280;
}

/* Settings Section */
.settingsSection {
  margin-bottom: 24px;
}

.sectionTitle {
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
  letter-spacing: 0;
}

.sectionSubtitle {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 14px;
  margin-top: 0;
  line-height: 1.4;
  text-align: center;
}

/* Credit Packages */
.topUpPackages {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}

/* Topup wallet selector (used in Topup drawer) */
.topupWalletSelector .topupWalletSelectorLabel {
  font-size: 14px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}

.topupWalletChips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: none;
}

.topupWalletChips::-webkit-scrollbar {
  display: none;
}

.topupWalletChip {
  flex: 0 0 auto;
  border: 2px solid #e5e7eb;
  background: #fff;
  color: #111827;
  border-radius: 999px;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.topupWalletChip:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.topupWalletChip:active {
  border-color: #3b82f6;
  background: #eff6ff;
}

.topupWalletChip.active {
  border-color: #3b82f6;
  background: #3b82f6;
  color: #fff;
}

.topupWalletSelectorHint {
  margin-top: 6px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}

.topupWalletCallout {
  margin-top: 14px;
  border: 1px solid #bae6fd;
  background: #f0f9ff;
  border-radius: 12px;
  padding: 12px;
}

.topupWalletCalloutText {
  font-size: 14px;
  color: #0c4a6e;
  line-height: 1.4;
}

.topupWalletCalloutAmount {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.topupWalletCalloutActions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.topupWalletCalloutBtn {
  width: 100%;
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  border: 2px solid transparent;
}

.topupWalletCalloutBtn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.topupWalletCalloutBtn.primary {
  background: #111827;
  border-color: #111827;
  color: #fff;
}

.topupWalletCalloutBtn.primary:active {
  background: #374151;
  border-color: #374151;
}

.topupResumeHint {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 600;
  color: #065f46;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.topUpCustomAmount {
  margin-top: -8px;
  margin-bottom: 24px;
}

.topUpCustomAmountLabel {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

.topUpCustomAmountRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

.topUpCustomAmountInput {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  outline: none;
}

.topUpCustomAmountInput:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.topUpCustomAmountCurrency {
  padding: 10px 12px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
  color: #111827;
  font-size: 14px;
  font-weight: 700;
}

.topUpCustomAmountError {
  margin-top: 8px;
  font-size: 13px;
  color: #b91c1c;
}

.topUpPackage {
  text-align: center;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: white;
  font-size: clamp(13px, 4vw, 18px);
  font-weight: 600;
  color: #111827;
  display: flex;
  min-height: 64px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topUpPackage:hover {
  border-color: #9ca3af;
  background: #f9fafb;
}

.topUpPackage.selected {
  border-color: #3b82f6;
  background: #eff6ff;
  color: #1e40af;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.packageIcon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  margin-right: 12px;
}

.topUpPackage.selected .packageIcon {
  background: #3b82f6;
  color: white;
}

.packageDetails {
  flex: 1;
}

.packageCredits {
  font-size: 16px;
  font-weight: 500;
  color: #111827;
}

.packagePrice {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.showMoreButton {
  width: 100%;
  padding: 12px;
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  color: #6b7280;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.showMoreButton:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

/* Save Button Container */
.saveButtonContainer {
  display: flex;
  justify-content: center;
  margin-top: 32px;
  margin-bottom: 24px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
}

.saveButton {
  background: #111827;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  justify-content: center;
}

.saveButtonLoading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.saveButton:hover:not(.disabled) {
  background: #374151;
}

.saveButton.disabled,
.saveButton:disabled {
  /* Keep primary styling while loading/disabled (avoid default grey button styles) */
  opacity: 0.85;
  cursor: progress;
  background: #111827 !important;
  background-color: #111827 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

.saveButton.disabled:hover {
  background: #111827;
}

.saveButton:disabled .loadingSpinner {
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top: 2px solid rgba(255, 255, 255, 0.95);
}

/* Loading Spinner */
.loadingSpinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Transaction History */
.transactionList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.transactionItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
}

.transactionDetails {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.transactionCredits {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.transactionDate {
  font-size: 12px;
  color: #6b7280;
}

.transactionAmount {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

.emptyState {
  text-align: center;
  padding: 48px 0;
  color: #6b7280;
}

/* Responsive Design */
@media (max-width: 640px) {
  .pageContent {
    padding: 16px;
  }
  
  .balanceContainer {
    padding: 20px;
  }
  
  .balanceAmount {
    font-size: 36px;
  }
  
  .balanceUnit {
    font-size: 16px;
  }
  
}

.stripePaymentElement {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: white;
}

.stripeLoadingMessage {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
  color: #6b7280;
  font-size: 15px;
}

body:not(.light_mode) .stripePaymentElement {
  background: white;
  border-color: #e5e7eb;
}

body:not(.light_mode) .stripeLoadingMessage {
  color: #9ca3af;
}


/* Modal Styles */
.modalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.paymentModal {
  background: white;
  border-radius: 16px;
  padding: 32px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Wallet switch bottom sheet (reuses .modalOverlay backdrop) */
.walletSwitchSheet {
  background: white;
  width: 100%;
  max-width: 520px;
  border-radius: 16px 16px 0 0;
  padding: 18px 16px 16px 16px;
  box-shadow: 0 -10px 25px -5px rgba(0, 0, 0, 0.12);
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  animation: walletSheetIn 0.18s ease-out;
}

.walletSwitchTitle {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
  margin: 2px 0 8px 0;
  letter-spacing: -0.01em;
}

.walletSwitchBody {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 14px;
}

.walletSwitchActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.walletSwitchBtn {
  border-radius: 12px;
  padding: 14px 12px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.walletSwitchBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.walletSwitchBtn.secondary {
  background: white;
  border: 2px solid #e5e7eb;
  color: #111827;
}

.walletSwitchBtn.secondary:active {
  border-color: #9ca3af;
  background: #f9fafb;
}

.walletSwitchBtn.primary {
  background: #111827;
  border: 2px solid #111827;
  color: white;
}

.walletSwitchBtn.primary:active {
  background: #374151;
  border-color: #374151;
}

@keyframes walletSheetIn {
  from { transform: translateX(-50%) translateY(14px); opacity: 0; }
  to { transform: translateX(-50%) translateY(0); opacity: 1; }
}

.modalContent {
  text-align: center;
}

.paymentConfirming,
.paymentSuccess,
.paymentFailed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.successIcon,
.errorIcon {
  font-size: 48px;
  margin-bottom: 8px;
}

.paymentConfirming h3,
.paymentSuccess h3,
.paymentFailed h3 {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.paymentConfirming p,
.paymentSuccess p,
.paymentFailed p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.loadingSpinner.large {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.modalButton {
  background: #111827;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 8px;
}

.modalButton:hover {
  background: #374151;
}

/* Animation for modal */
.modalOverlay {
  animation: fadeIn 0.2s ease-out;
}

.paymentModal {
  animation: slideIn 0.3s ease-out;
}

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

@keyframes slideIn {
  from { 
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to { 
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Transaction History Styles */
.transactionHistory {
  margin-top: 32px;
}

.transactionHistory h2 {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 16px;
}

.transactionsList {
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
}

.transactionItem {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s;
}

.transactionItem:last-child {
  border-bottom: none;
}

.transactionItem:hover {
  background-color: #f9fafb;
}

.transactionIcon {
  margin-right: 12px;
  color:black;
}

.iconCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 18px;
}

.iconCircle.success {
  background-color: #dcfce7;
  color: #16a34a;
}

.transactionDetails {
  flex: 1;
  min-width: 0; /* allow flex child to shrink so amount column stays visible */
}

.transactionType {
  font-weight: 500;
  color: #111827;
  margin-bottom: 4px;
}

.transactionDate {
  font-size: 14px;
  color: #6b7280;
  margin-bottom: 2px;
}

.transactionId {
  font-size: 12px;
  color: #9ca3af;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.transactionAmount {
  text-align: right;
  flex: 0 0 auto;
  min-width: 120px;
}

@media (max-width: 640px) {
  .transactionAmount {
    min-width: 92px;
  }
}

.amount {
  font-weight: 600;
  font-size: 16px;
}

.amountSub {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.amount.positive {
  color: #16a34a;
}

.status {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.transactionsLoadingMore {
  display: flex;
  justify-content: center;
  padding: 16px 0;
}

/* Empty State */
.emptyState {
  text-align: center;
  padding: 48px 24px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.emptyIcon {
  font-size: 48px;
  margin-bottom: 16px;
}

.emptyState h3 {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

.emptyState p {
  color: #6b7280;
  font-size: 14px;
}

/* Loading State */
.loadingTransactions {
  text-align: center;
  padding: 48px 24px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #f3f4f6;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Save Payment Method Option */
.savePaymentMethodOption {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 1rem;
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  background: var(--card-background, #ffffff);
  transition: all 0.2s ease;
}

.savePaymentMethodOption:hover {
  border-color: var(--primary-color, #3b82f6);
}

.savePaymentMethodOption input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--primary-color, #3b82f6);
}

.checkboxLabel {
  font-weight: 500;
  color: var(--text-primary, #111827);
}

.savePaymentMethodNote {
  font-size: 0.85rem;
  color: var(--text-secondary, #6b7280);
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* Use New Method Button */
.useNewMethodButton {
  background: none;
  border: 2px solid var(--border-color, #e5e7eb);
  color: black;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  width: 100%;
  margin-top: 1rem;
}

.useNewMethodButton:hover {
  border-color: var(--primary-color, #3b82f6);
  color: var(--primary-color, #3b82f6);
}

/* Dark mode support for new elements */
@media (prefers-color-scheme: dark) {
  .savePaymentMethodOption {
    --card-background: #1f2937;
    --border-color: #374151;
    --text-primary: #f9fafb;
  }
  
  .useNewMethodButton {
    --border-color: #374151;
    --text-secondary: #d1d5db;
  }
  
  .savePaymentMethodNote {
    --text-secondary: #9ca3af;
  }
}

/* Payment method toggle (Saved / New card) */
.paymentMethodToggle {
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
  margin-bottom: 14px;
}

.paymentMethodToggleBtn {
  flex: 1 1 0;
  border: none;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  background: transparent;
  color: #111827;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
}

.paymentMethodToggleBtn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.paymentMethodToggleBtn:active {
  transform: scale(0.99);
}

.paymentMethodToggleBtn.active {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* New card callout */
.newCardCallout {
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 14px;
  padding: 14px;
}

.newCardCalloutTitle {
  font-size: 15px;
  font-weight: 900;
  color: #111827;
  margin-bottom: 6px;
}

.newCardCalloutBody {
  font-size: 14px;
  color: #374151;
  line-height: 1.4;
}

.newCardCalloutActions {
  margin-top: 10px;
  display: flex;
  gap: 10px;
}

.newCardCalloutBtn {
  width: 100%;
  border-radius: 12px;
  padding: 12px 12px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 2px solid #111827;
  background: #111827 !important;
  background-color: #111827 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

.newCardCalloutBtn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.newCardCalloutBtn:active {
  background: #374151;
  border-color: #374151;
}

/* Carousel Styles */
.topupFormCarousel {
  position: relative;
  width: 100%;
  overflow: hidden;
  transition: height 0.25s ease;
}

.carouselScreen {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

/* Topup Drawer must render above all other drawers (AppDetail, Promote, etc.) */
#topup_drawer {
  z-index: 50010 !important;
}

/* Topup Drawer Content Styling - force light theme */
#topup_drawer .drawer {
  background-color: #fff !important;
}

#topup_drawer .drawer-content {
  padding: 24px 16px;
  background-color: #fff !important;
  color: #111827 !important;
}

#topup_drawer .drawer-header,
#topup_drawer .drawer-footer {
  background-color: #fff !important;
}

#topup_drawer .drawer-title {
  color: #111827 !important;
}

#topup_drawer .packages-screen {
  padding: 0;
}

/* Improve spacing in topup drawer */
#topup_drawer .settingsSection:first-of-type {
  margin-top: 0;
}

#topup_drawer .settingsSection:last-of-type {
  margin-bottom: 0;
}

/* --- View States --- */

/* When packages are showing */
.view-packages .packages-screen {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}
.view-packages .payment-screen {
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
}

/* When payment is showing */
.view-payment .packages-screen {
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}
.view-payment .payment-screen {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}


.backButton {
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  margin-bottom: 20px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color 0.2s ease;
}

.backButton:hover {
  color: #111827;
}



/* Force light mode styling for topup drawer on all modes */
#topup_drawer .sectionTitle {
  color: #111827 !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

#topup_drawer .sectionSubtitle {
  color: #6b7280 !important;
}

#topup_drawer .topUpPackage {
  background: #fff !important;
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

#topup_drawer .topUpPackage:hover {
  border-color: #d1d5db !important;
  background: #f9fafb !important;
}

#topup_drawer .topUpPackage.selected {
  border-color: #3b82f6 !important;
  background: #eff6ff !important;
  color: #1e40af !important;
}

#topup_drawer .saveButtonContainer {
  border-top-color: #e5e7eb !important;
}

#topup_drawer .backButton {
  color: #6b7280 !important;
}

#topup_drawer .backButton:hover {
  color: #111827 !important;
}

#topup_drawer .useNewMethodButton {
  border-color: #e5e7eb !important;
  color: #111827 !important;
}

#topup_drawer .useNewMethodButton:hover {
  border-color: #3b82f6 !important;
  color: #2563eb !important;
}

#topup_drawer .stripePaymentElement {
  background: #fff !important;
  border-color: #e5e7eb !important;
}

#topup_drawer .stripeLoadingMessage {
  color: #6b7280 !important;
}

#topup_drawer .messageContainer,
#topup_drawer .errorMessage {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
  color: #dc2626 !important;
}

/* Improve payment screen styling */
#topup_drawer .payment-screen .settingsSection {
  padding: 0;
}

#topup_drawer .sectionSubtitle strong {
  font-weight: 600;
  color: inherit;
}/* Custom CSS Variables */
:root {
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Dark mode variables */
@media (prefers-color-scheme: dark) {
  :root {
    --text-primary: #f9fafb;
    --text-secondary: #d1d5db;
    --bg-primary: #1f2937;
    --bg-secondary: #111827;
    --border-color: #374151;
  }
}

:root {
  /* Runtime-measured safe area (Android only; set by JS). */
  --runtime-safe-top: 0px;

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Effective safe area for app UI (handles Android devices that report 0 insets). */
  --app-safe-top: max(var(--safe-top), var(--runtime-safe-top));

  /* Single source of truth for header icon vertical alignment */
  --header-icon-top: var(--app-safe-top);

  --aspect-ratio: 100vw / 100vh;
}

/* Override safe area insets in Android PWA installed mode */
/* Android Chrome automatically handles safe areas, so we set CSS variables to 0 */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  body.android {
    --safe-top: 0px;
    --safe-right: 0px;
    --safe-bottom: 0px;
    --safe-left: 0px;
    --app-safe-top: var(--runtime-safe-top, 0px);
  }

  /* Prevent Samsung/OneUI flicker: index.html applies padding: env(safe-area-inset-*)
     on html,body which can shift when system bars transiently appear during back gesture.
     Scoped to .android to avoid stripping iOS notch/Dynamic Island safe-area padding. */
  html.android {
    padding: 0 !important;
  }
  body.android {
    padding: 0 !important;
  }

  /* Samsung/OneUI gesture-navigation viewport shift: lock full-screen containers
     to --locked-vh so transient system-bar changes don't resize or reposition them.
     --locked-vh is set by App.jsx lockViewportHeight(). */

  /* Cat 1: Full-screen containers — lock height to prevent resize on vh change */
  body.android .user-authenticated,
  body.android .user-unauthenticated {
    height: var(--locked-vh, 100vh);
  }

  body.android .transform-drawer .drawer {
    height: var(--locked-vh, 100vh);
  }

  /* contain:layout on .drawer-container makes it the CB for the fixed footer,
     so locking its height also stabilises .drawer-footer bottom:0. */
  body.android .drawer-container.transform-drawer {
    height: var(--locked-vh, 100vh);
  }

  body.android #searchOverlay {
    height: var(--locked-vh, 100vh);
  }

  body.android #folderModal {
    height: var(--locked-vh, 100vh);
  }

  body.android #folderModal .folder-content.folder-content-fullscreen {
    height: var(--locked-vh, 100vh);
    max-height: var(--locked-vh, 100vh);
  }

  body.android .notifications-overlay {
    height: var(--locked-vh, 100vh);
  }

  body.android #main.app-settings {
    height: var(--locked-vh, 100vh);
  }

  body.android .zoom-prototype {
    height: var(--locked-vh, 100vh);
  }

  body.android .zoom-container.zoomed-in .zoom-page {
    height: var(--locked-vh, 100vh);
  }

  body.android .splash-window {
    height: var(--locked-vh, 100vh);
  }

  body.android .splash-screen-loading {
    height: var(--locked-vh, 100vh);
  }

  body.android .app_feed_overlay {
    height: var(--locked-vh, 100vh);
  }

  body.android .homescreen-edit-overlay {
    height: var(--locked-vh, 100vh);
  }

  body.android .context-menu-overlay {
    height: var(--locked-vh, 100vh);
  }

  body.android .onboarding-container,
  body.android .screen {
    height: var(--locked-vh, 100vh);
  }

  body.android .apps-page .feed-container-bottom {
    height: var(--locked-vh, 100vh);
  }

  body.android .im-messages-page {
    height: var(--locked-vh, 100vh);
  }

  body.android .im-container {
    height: var(--locked-vh, 100vh);
  }

  /* AI chat sidebar: use --locked-vh when keyboard is closed (prevents nav-bar jump)
     but switch to --vvh when keyboard is open (keeps composer above keyboard).
     --im-kb-open is 0 or 1, set by usePwaFixedLayout on the element. */
  body.android .ai-messages-page .im-sidebar {
    height: calc(
      var(--im-kb-open, 0) * var(--vvh, var(--locked-vh, 100%))
      + (1 - var(--im-kb-open, 0)) * var(--locked-vh, 100%)
    );
  }

  body.android #homescreen_details_drawer.transform-drawer .related-apps-feed-container {
    height: calc(var(--locked-vh, 100vh) - var(--safe-top) - var(--drawer-header-height-px, 100px));
  }

  body.android .app_feed_iframe iframe,
  body.android iframe#app {
    height: var(--locked-vh, 100vh) !important;
  }

  /* Cat 3: min-height pages */
  body.android .earnPage {
    min-height: var(--locked-vh, 100vh);
  }

  body.android .earnings-page.main {
    min-height: var(--locked-vh, 100vh) !important;
  }

  body.android .socialPage {
    min-height: var(--locked-vh, 100vh);
  }

  body.android .earnings-page .page-content {
    min-height: calc(var(--locked-vh, 100vh) - 104px);
  }

  /* Homescreen grid (inside .page which is already locked, but uses explicit 100vh) */
  body.android .app-grid {
    height: var(--locked-vh, 100vh);
    min-height: calc(var(--locked-vh, 100vh) - var(--safe-top) - 210px);
  }

  /* Signup screens — flex columns with bottom-pinned buttons/footers */
  body.android .signup-onboarding-container {
    height: var(--locked-vh, 100vh);
  }

  body.android .signup-page,
  body.android .welcome-screen,
  body.android .tos-screen,
  body.android .phone-signup-screen,
  body.android .verification-screen {
    height: var(--locked-vh, 100vh);
  }

  /* Cat 4: Fixed layers using height:100% (= viewport height for fixed elements) */
  body.android .os-home-layer,
  body.android .os-page-layer {
    height: var(--locked-vh, 100%);
  }

  body.android .full-screen-wrapper {
    height: var(--locked-vh, 100%);
  }
}

/* Prevent iOS long-press callout on images (Save Image, Copy, etc.).
   Does not affect iframes (mini-apps) or JS-driven long-press handlers (e.g. IM emoji picker). */
img {
  -webkit-touch-callout: none;
}

/* Base styles */
* {
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scrollbar-color: var(--color-medium-6) var(--color-dark-3);
}

*::-webkit-scrollbar,
*::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-track {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

html, body {
  overflow: auto;              /* Ensure scrolling still works */
  -ms-overflow-style: none;    /* IE and Edge */
  scrollbar-width: none;       /* Firefox */
  background-color: var(--black-300);
}

#main {
  background-color: var(--black-300);
}

/* Light mode base styles */
body.light_mode,
body.light_mode #main {
  background-color: #f7f9fd;
}

/* Homescreen containers: white in light mode */
body.light_mode .app-container,
body.light_mode .pages-wrapper {
  background: #f3f3f3;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, Opera */
}

* {
  -ms-overflow-style: none;    /* IE and Edge */
  scrollbar-width: none;       /* Firefox */
}

*::-webkit-scrollbar {
  display: none;               /* Chrome, Safari, Opera */
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
  -webkit-overscroll-behavior: none;
  min-height: 100vh;
  touch-action: manipulation;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-primary);
  background-color: var(--bg-secondary);
}

.hidden {
  display: none !important;
}

/* ========= Layout ========= */

.user-authenticated, .user-unauthenticated {
  height: 100vh;
  overflow: scroll;
}

/* In the OS page layer, scroll is handled by `.full-screen-wrapper__scroll` */
.os-page-layer > main.user-authenticated,
.os-page-layer > main.user-unauthenticated {
  overflow: hidden;
}

/* iOS PWA only: prevent WebKit from scrolling the app shell to focus inputs. */
body.ios.chat_scroll_lock .user-authenticated,
body.ios.chat_scroll_lock .user-unauthenticated,
body.ios.chat_scroll_lock .os-page-layer,
body.ios.chat_scroll_lock .full-screen-wrapper__scroll,
body.ios.chat_scroll_lock .auth-wrapper {
  overflow: hidden !important;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

.auth-wrapper {
  height: 100%;
}

/* Foreground surface wrapper (used by both system pages + app overlays) */
.full-screen-wrapper {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--black-300, #000);
}

/* Page-layer surface should stack within the page layer (not above global overlays) */
.full-screen-wrapper--page {
  position: absolute;
  background: transparent;
}

/* Scroller inside the surface (keeps surface viewport-stable for animations) */
.full-screen-wrapper__scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}


/* OS Layering System - for homescreen + pages architecture */
.os-home-layer,
.os-page-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* NOTE: do NOT transition visibility; it can stay "hidden" until the end of the duration
     and cause a brief fully-black frame during route transitions. */
  transition: none;
}

/* Only fade the page layer. If we fade Home in from opacity:0 while the page layer is being hidden,
   there's a moment where nothing paints except the black body background. */
.os-page-layer {
  transition: opacity 0.2s ease;
}

@media (orientation: landscape) {
  /* In landscape on notched devices (iOS), `100vw`/fixed overlays can paint under the notch.
     Pad the *fixed app shell layers* and top-level overlays so content starts inside the safe area. */
  .os-home-layer,
  .os-page-layer,
  .global-header-overlay,
  .im-messages-overlay-backdrop,
  .ai-overlay-backdrop,
  body .homescreen-edit-overlay,
  body #searchOverlay,
  .drawer-container {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
  }

  /* Homescreen pages use `100vw`; in landscape that ignores the layer padding above.
     Constrain pages to the padded layer width so the notch never overlaps content. */
  .os-home-layer .page {
    width: 100%;
  }

  /* Keep edge-swipe handles inside the safe area too. */
  .edge-swipe-handle-wrapper-left {
    left: var(--safe-left);
  }

  .edge-swipe-handle-wrapper-right {
    right: var(--safe-right);
  }
}

.os-home-layer {
  z-index: 1;
}

.os-page-layer {
  z-index: 2;
  background: var(--black-300, #000);
}

body.light_mode .os-page-layer {
    background: #f7f9fd;
}

.os-page-hidden {
  opacity: 0;
  pointer-events: none;
  /* Avoid a visual flash during route changes (e.g. /ai -> home): route content can unmount
     before the fade finishes, briefly revealing the authenticated/page wrapper state.
     Make hide instantaneous (no fade-out). Fade-in remains enabled via .os-page-layer/.os-page-visible. */
  transition: opacity 0s !important;
  /* Avoid display:none here; it can create a gap while the other layer is fading in. */
  /* Critical: when the page layer is being hidden, its route content may already be unmounted.
     If it keeps an opaque black background during the opacity transition, we get a full-black frame.
     Make the background transparent for the hidden state so Home can show through immediately. */
  background: transparent !important;
}

/* Define *hidden* styles first, then *visible* styles after, so if a layer ever
   temporarily has both classes during route transitions, "visible" wins and we
   avoid a full-black frame. */
.os-home-hidden {
  opacity: 0;
  pointer-events: none;
}

.os-home-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.os-page-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.2s ease;
}

.sk-block {
  --_sk_base: rgba(255, 255, 255, 0.2);
  --_sk_shine: rgba(255, 255, 255, 0.3);
  background: var(--_sk_base);
  position: relative;
  overflow: hidden;
}

.sk-block::after {
  content: '';
  position: absolute;
  inset: 0;
  left: -150%;
  width: 150%;
  background: linear-gradient(90deg, transparent 0%, var(--_sk_shine) 50%, transparent 100%);
  animation: sk_shimmer 1.25s ease-in-out infinite;
}

body.light_mode .sk-block {
  --_sk_base: rgba(0, 0, 0, 0.06);
  --_sk_shine: rgba(255, 255, 255, 0.7);
}

@keyframes sk_shimmer {
  0%   { transform: translateX(0); }
  100% { transform: translateX(200%); }
}

@media (prefers-reduced-motion: reduce) {
  .sk-block::after { animation: none; }
}

.app_page{
    padding-top: var(--safe-top);
}

/* Global header overlay (used on Inbox routes where Home layer is hidden) */
.global-header-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0; /* don't consume layout space */
  z-index: 50000; /* above page layer + notifications overlay */
}

@keyframes section-overlay-enter {
  from { opacity: 0; transform: translateY(-40px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Messages overlay (header-opened, no URL change) */
.im-messages-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45000; /* below global header overlay (50000), above page layer */
  background: rgba(0, 0, 0, 0.55);
  /* Entry animation is driven by WAAPI (see IM_MessagesOverlay.jsx) for both tap-opens and
     gesture-opens. No CSS animation here avoids the opacity:0 flash when inline gesture styles
     are cleared on touchend. */
}

.im-messages-overlay-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* AI overlay (header-opened, no URL change) */
.ai-overlay-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45000; /* below global header overlay (50000), above page layer */
  background: rgba(0, 0, 0);
  /* Entry animation is driven by WAAPI (see AIOverlay.jsx). No CSS animation to avoid
     the opacity:0 flash when inline gesture styles are cleared on touchend. */
}

/* Keep the backdrop inert while a deferred close is pending (touch still active). */
.ai-overlay-backdrop--deferred-hidden {
  visibility: hidden;
  pointer-events: none;
  animation: none;
}

.ai-overlay-panel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* When the header has a title, render a subtle blurred bar so the title is readable. */
header.header-has-title {
  height: calc(var(--app-safe-top) + 56px);
  padding-top: var(--app-safe-top);
  /* background: rgb(0,0,0); */
}

body.opened_app header.header-has-title {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

body.light_mode header.header-has-title {
  background: rgba(255, 255, 255, 0.9) !important;
}

.global_header_title {
  position: absolute;
  left: 50%;
  top: var(--app-safe-top);
  height: 56px;
  padding-top: 0;
  transform: translateX(-50%);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5),
               0 0 8px rgba(200, 200, 200, 0.15);
}

body.light_mode .global_header_title {
  color: #000000;
  text-shadow: none;
}

.global_header_title .folder-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  margin: 0 2px 0 0;
  cursor: pointer;
  color: inherit;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.85;
  pointer-events: auto;
}

.global_header_title .folder-back-btn:active {
  opacity: 0.5;
}

/* When in DM overlay mode on /messages, keep header icons visible. */
body:has(.im-messages-page) header.dm-overlay-mode .search_icon {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(0) !important;
}

body:has(.im-messages-page) header.dm-overlay-mode .ai_assistant_icon {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(0) !important;
}

/* ========= End of Layout ========= */



/* ========= Edge Swipe ========= */

:root {
  --edge-swipe-handle-width: 20px;
  /* --edge-swipe-handle-height: 250px; */
  --edge-swipe-handle-height: 1000px;
  --edge-swipe-visual-width: 5px;
  /* --edge-swipe-visual-height: 100px; */
  --edge-swipe-visual-height: 1000px;
  --edge-swipe-z-index: 999999;
  --edge-swipe-visual-color: rgb(151 151 151 / 60%);
  --edge-swipe-visual-color-active: rgba(100, 200, 255, 0.6);
  --edge-swipe-visual-border-radius: 12px;
}

/* Handle Wrapper Base */
.edge-swipe-handle-wrapper {
  position: fixed;
  top: calc(var(--app-safe-top) + 60px);
  bottom: 0;
  width: var(--edge-swipe-handle-width);
  z-index: var(--edge-swipe-z-index);
  touch-action: none;
  cursor: grab;
  display: flex;
  align-items: center;
}

/* Left Handle */
.edge-swipe-handle-wrapper-left {
  left: 0;
  justify-content: flex-start;
}

/* Right Handle */
.edge-swipe-handle-wrapper-right {
  right: 0;
  justify-content: flex-end;
}

/* Visual Indicator Base - Hidden (now using SVG overlay) */
.edge-swipe-handle-visual {
  width: var(--edge-swipe-visual-width);
  height: var(--edge-swipe-visual-height);
  background-color: var(--edge-swipe-visual-color);
  transition: transform 0.2s ease;
  pointer-events: none;
  opacity: 0; /* Hidden - using new SVG overlay system */
  transform-origin: center center;
}

/* Left Visual */
.edge-swipe-handle-wrapper-left .edge-swipe-handle-visual {
  border-radius: 0 var(--edge-swipe-visual-border-radius) var(--edge-swipe-visual-border-radius) 0;
  transform-origin: left center;
}

/* Right Visual */
.edge-swipe-handle-wrapper-right .edge-swipe-handle-visual {
  border-radius: var(--edge-swipe-visual-border-radius) 0 0 var(--edge-swipe-visual-border-radius);
  transform-origin: right center;
}

/* Active State */
.edge-swipe-handle-visual.active {
  transform: scale(1.1);
}

/* Linger State */
.edge-swipe-handle-visual.linger {
  background-color: var(--edge-swipe-visual-color-active);
}

/* Invisible but interactive - keeps handles in DOM for touch events.
   Width is wider than visible handles to ensure touch-action:none covers
   the full iOS edge-gesture zone at the compositor level. */
.edge-swipe-handle-wrapper.edge-swipe-handle-invisible {
  opacity: 0;
  pointer-events: auto;
  /* width: 30px; TODO : */
  width: 24px;
}

.edge-swipe-handle-wrapper.edge-swipe-handle-invisible .edge-swipe-handle-visual {
  opacity: 0;
}

/* Landscape-specific adjustments for edge swipe handles */
@media (orientation: landscape) {
  .edge-swipe-handle-wrapper.edge-swipe-handle-invisible{
    width:30px;
  }
}

/* ========= End of Edge Swipe ========= */

.initial-header {
  margin-top: var(--safe-top);
  padding-top: 17px;
}
/* Custom utility classes */
.btn {
  @apply px-4 py-2 rounded-lg font-medium transition-colors duration-200;
}

.btn-primary {
  @apply bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
}

.btn-secondary {
  @apply bg-gray-200 text-gray-900 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2;
}

.card {
  @apply bg-white rounded-lg shadow-md border border-gray-200 p-6;
}

.input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.slide-in-up {
  animation: slideInUp 0.4s ease-out;
}

/* Loading states */
.loading {
  @apply animate-pulse;
}

.spinner {
  @apply animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600;
} 





/* ========= Drawer ========= */

.drawer-container {
  position: fixed;
  z-index: 9996; /* Above SearchOverlay (9995), below ContextMenu (9998+) */
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  contain: layout style;
}

.drawer-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  border-radius: 16px 16px 0 0;
  transform: translateY(100%);
  pointer-events: auto;
  overflow: hidden;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-flow: column nowrap;
  align-items: stretch;
  will-change: transform;
}

/* Full-open should be truly fullscreen, but content must respect the notch/status bar */
.drawer.full-open {
  top: var(--safe-top);
}

.drawer.animating {
  transition: transform 0.3s ease, height 0.3s ease;
  
}

.drawer.half-open {
  transform: translateY(0);
  height: 75%;
  top: var(--safe-top);
}
.drawer.half-open .drawer-content {
  max-height: 100%;
}

.drawer.fully-open {
  transform: translateY(0);
  height: 100%;
}

.drawer-content {
  height: 100%;
  overflow-y: auto;
  max-height: 100%;
}
.drawer-content h3 {
  margin: 12px 0;
}

.drawer-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-shrink: 0;
  user-select: none;
  touch-action: none;
}

.drawer-header-content {
  flex-shrink: 0;
}

.drawer-handle {
  width: 100%;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
  position: relative;
}

.drawer-handle-indicator {
  width: 40px;
  height: 4px;
  background-color: #ddd;
  border-radius: 4px;
}
.drawer.dragging .drawer-content {
  overflow: hidden !important;
  touch-action: none !important;
}
.drawer-content {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  transition: padding .1s linear;
}


/* Transform-only Drawer */
.drawer-container.transform-drawer {
  position: fixed;
  z-index: 50001; /* Above SearchOverlay (9995), below ContextMenu (9998+) , now is 50001 cuz is over the header*/
  inset: 0;
  pointer-events: none;
  contain: layout style;
}

/* Drawer stack layering: background drawer sits behind foreground */
.drawer-container.transform-drawer.drawer-stack-bg {
  z-index: 50000;
}
.drawer-container.transform-drawer.drawer-stack-bg .drawer-overlay {
  opacity: 0 !important;
  pointer-events: none !important;
}
.drawer-container.transform-drawer.drawer-stack-fg {
  z-index: 50001;
}
#try_details_drawer{
  display: none;
}
body.try_mode #try_details_drawer {
  display: flex;
}
body.opened_app #try_details_drawer {
  display: flex;
}

.transform-drawer .drawer-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  will-change: opacity;
}

.transform-drawer .drawer-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.transform-drawer .drawer-overlay.closing {
  opacity: 0;
  pointer-events: auto;
}

/* CRITICAL: Fixed height, transform-only movement */
.transform-drawer .drawer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* ALWAYS FULL HEIGHT */
  background-color: #000;
  border-radius: 16px 16px 0 0;
  transform: translateY(100%); /* Start hidden */
  pointer-events: auto;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  /*overflow: hidden;*/
  /* Performance */
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Smooth transform transitions */
.transform-drawer .drawer:not(.no-transition):not(.dragging) {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.transform-drawer .drawer-footer:not(.no-transition) {
  transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1),
  opacity 0.3s ease,
  transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.drawer-physics.transform-drawer .drawer:not(.no-transition):not(.dragging) {
  transition: none !important;
}

.drawer-physics.transform-drawer .drawer-footer:not(.no-transition) {
  transition: none !important;
}

/* Physics drawers: JS/WAAPI is the sole source of truth for transform.
   Neutralize CSS position-class transforms to prevent them from flashing
   the target position before the spring animation's first frame.
   Higher specificity than the originals (0-4-0 > 0-3-0) but NO !important
   so inline style.transform from JS still wins. */
.drawer-physics.transform-drawer .drawer.full-open,
.drawer-physics.transform-drawer .drawer.half-open,
.drawer-physics.transform-drawer .drawer.minimized,
.drawer-physics.transform-drawer .drawer.closed {
  transform: translateY(100%);
}

/* Physics drawers: overlay opacity is driven by JS/WAAPI in sync with the
   drawer spring. Disable the CSS transition so it doesn't race ahead. */
.drawer-physics.transform-drawer .drawer-overlay {
  transition: none !important;
}

.transform-drawer .drawer.no-transition,
.transform-drawer .drawer.dragging {
  transition: none !important;
}

/* Handle */
.transform-drawer .drawer-handle {
  flex-shrink: 0;
  height: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
  padding: 12px 0;
  position: relative;
  z-index: 2;
  touch-action: none;
}

.transform-drawer .drawer-handle-indicator {
  width: 40px;
  height: 4px;
  background-color: #ddd;
  border-radius: 2px;
}

/* Title */
.transform-drawer .drawer-title {
  flex-shrink: 0;
  padding: 0 16px;
  margin: 0;
}

/* Body takes remaining space */
.transform-drawer .drawer-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  /*overflow: hidden;*/
  min-height: 0; /* Important for flex children */
}

/* Factory chat drawer: ensure header (version dropdown) layers above chat content */
#factory_chat_drawer .drawer-header {
  position: relative;
  z-index: 2;
}
#factory_chat_drawer .drawer-body {
  position: relative;
  z-index: 1;
}

/* iOS Safari (non-standalone): keep the portal drawer aligned to the visual viewport
   so the drawer header doesn't get pushed off-screen when the keyboard opens.
   JS sets --vv-top/--vvh/--im-kb-open and toggles .vv-root on #factory_chat_drawer. */
body.ios #factory_chat_drawer.vv-root.drawer-container.transform-drawer {
  inset: auto;
  left: 0;
  right: 0;
  top: var(--vv-top, 0px);
  height: var(--vvh, 100vh);
}

/* Factory chat drawer: when keyboard is open and drawer is fully open, make the overlay
   a fixed, full-screen black backdrop. This covers the "layout viewport below visual viewport"
   area without needing an extra DOM element, and it naturally disappears when dragging down. */
body.ios #factory_chat_drawer.vv-root[data-kb-open="1"][data-drawer-full="1"][data-drawer-dragging="0"] .drawer-overlay.active {
  /* IMPORTANT: keep this `absolute` (not `fixed`). The drawer container uses `contain`,
     which can cause `position: fixed` to be scoped to the container instead of the viewport. */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Extend far below the visual-viewport-sized drawer container so the keyboard strip
     (layout viewport below visual viewport) is still covered. */
  bottom: -200vh;
  background: #000 !important;
  opacity: 1 !important;
  pointer-events: none;
  height: 200%;
}

body.ios.light_mode #factory_chat_drawer.vv-root[data-kb-open="1"][data-drawer-full="1"][data-drawer-dragging="0"] .drawer-overlay.active {
  background: #f7f9fd !important;
}

body.ios #factory_chat_drawer.vv-root.transform-drawer .drawer {
  height: 100%;
}

/* Factory chat drawer: ensure any "margin gap" around the pill composer paints black.
   (The gap is often the chat view / drawer body showing through, not the keyboard.) */
body.ios #factory_chat_drawer.vv-root.transform-drawer .drawer,
body.ios #factory_chat_drawer.vv-root.transform-drawer .drawer-body,
body.ios #factory_chat_drawer.vv-root.transform-drawer .drawer-content,
body.ios #factory_chat_drawer.vv-root .chat_view {
  background: #000 !important;
}

body.ios.light_mode #factory_chat_drawer.vv-root.transform-drawer .drawer,
body.ios.light_mode #factory_chat_drawer.vv-root.transform-drawer .drawer-body,
body.ios.light_mode #factory_chat_drawer.vv-root.transform-drawer .drawer-content,
body.ios.light_mode #factory_chat_drawer.vv-root .chat_view {
  background: #f7f9fd !important;
}

/* When rooted to the visual viewport, don't double-lift Factory chat input/messages. */
body.ios #factory_chat_drawer.vv-root .chat_input_container {
  transform: none !important;
  will-change: auto;
}

body.ios #factory_chat_drawer.vv-root .chat_view .messages {
  padding-bottom: calc(16px + (var(--safe-bottom) * (1 - var(--im-kb-open, 0))));
}

.drawer.half-open .drawer-body { 
  max-height: calc(75dvh -  105px);
  /* 
    Available space = Total viewport - translateY - Fixed elements 
    105px is the height of the drawer header
  */
}

#share_homescreen_drawer .drawer.half-open .drawer-content {
  max-height: calc(75dvh - 152px);
}


.drawer.full-open .drawer-body { 
}

.drawer-app-details .app-name{
  font-size: 16px;
  margin-top: 0;
}


#chat_creation_drawer .drawer.half-open .drawer-body { 
  max-height: calc(75dvh -  313.56px);
  /* 
    Available space = Total viewport - translateY - Fixed elements 
    313.56px is the height of the drawer header and chat input
  */
}

#chat_creation_drawer .drawer.full-open .drawer-body { 
  max-height: calc(90dvh -  313.56px);
   /* 
    Available space = Total viewport - translateY - Fixed elements
    313.56px is the height of the drawer header and chat input
   */
}


/* Scrollable content */
.transform-drawer .drawer-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  /* Add touch-action to let browser handle vertical scrolling */
  touch-action: pan-y;
  max-height: calc(100% - var(--safe-top));
}
.transform-drawer .drawer-content.at-top {
  touch-action: none;
}

.transform-drawer .drawer-footer {
  position: fixed;
  bottom: 0; /* Will be updated via JS */
  left: 0;
  right: 0;
  padding: 16px;
  background: #000;
  z-index: 9997; /* Above drawer, still below ContextMenu (9998+) */
  pointer-events: auto;
  transform: translateY(100%);
  opacity: 0;
  will-change: transform, opacity;
  contain: layout style paint;
  padding-bottom: calc(16px + var(--safe-bottom));
  box-shadow: 0px 0 27px 3px #0000001f;
  border-radius: 10px 10px 0 0;
}
.transform-drawer .drawer-footer:not(.no-transition) {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
  opacity 0.3s ease;
}

.transform-drawer .drawer-footer.no-transition {
  transition: none !important;

}

/* Light mode overrides for drawer */
body.light_mode .transform-drawer .drawer {
  background-color: white;
}
body.light_mode .transform-drawer .drawer-footer {
  background: white;
}

/* Position states - only affect transform */
.transform-drawer .drawer.full-open {
  transform: translateY(0);
}

.transform-drawer .drawer.half-open {
  transform: translateY(25%);
}

.transform-drawer .drawer.minimized {
  transform: translateY(calc(100% - var(--min-visible-height, 10%)));
}

.transform-drawer .drawer.closed {
  transform: translateY(100%);
}

/* Dragging optimizations */
.transform-drawer .drawer.dragging {
  cursor: grabbing;
  contain: layout style paint;
}

.transform-drawer .drawer.dragging .drawer-body,
.transform-drawer .drawer.dragging .drawer-footer {
  pointer-events: none !important;
  user-select: none !important;
}

/* Hide overflow on container during drag and close to prevent iOS WebKit
   compositor glitch when -webkit-overflow-scrolling layer is recreated. */
.transform-drawer .drawer.dragging .drawer-content,
.transform-drawer .drawer.closing .drawer-content {
  overflow: hidden !important;
  transition: none !important;
}

/* Custom min height support */
.transform-drawer .drawer[style*="--min-visible-height"] {
  /* CSS will use the custom property */
}

/* Comments-specific styles */
.transform-drawer .post_comment {
  /* Will be in footer, no special positioning needed */
}

/* Comments drawer: keep surface + footer background white in all themes */
#app_comments.transform-drawer .drawer {
  background-color: #fff;
}
#app_comments.transform-drawer .drawer-footer {
  background: #fff;
}

/* Performance: reduce paint areas */
.transform-drawer .drawer > * {
  contain: layout style;
}

/* Optional: blur content when half open for depth */
.transform-drawer .drawer.half-open .drawer-content {
  /* filter: blur(0.5px); */ /* Uncomment for effect */
}

/* ========= Purchase Drawer ========= */

.purchase-drawer-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.purchase-app-info {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.purchase-app-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-secondary, #f5f5f5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.purchase-app-icon img,
.purchase-app-icon svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.purchase-app-details {
  flex: 1;
  min-width: 0;
}

.purchase-app-name {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 8px 0;
  color: var(--text-primary, #000);
}

.purchase-app-description {
  font-size: 14px;
  color: var(--text-secondary, #666);
  margin: 0;
  line-height: 1.5;
}

.purchase-price-section {
  padding: 16px;
  background: var(--bg-secondary, #f5f5f5);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.purchase-price-label {
  font-size: 16px;
  color: var(--text-secondary, #666);
}

.purchase-price-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary, #000);
  text-align: right;
  min-width: 0;
  word-break: break-word;
}

.purchase-error {
  padding: 12px 16px;
  background: #fee;
  color: #c33;
  border-radius: 8px;
  font-size: 14px;
  border: 1px solid #fcc;
}

.purchase-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
}

.purchase-button {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.purchase-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.purchase-button-primary {
  background: var(--primary, #007AFF);
  color: white;
}

.purchase-button-primary:hover:not(:disabled) {
  background: var(--primary-hover, #0056b3);
}

.purchase-button-secondary {
  background: transparent;
  color: var(--text-secondary, #666);
  border: 1px solid var(--border, #ddd);
}

.purchase-button-secondary:hover:not(:disabled) {
  background: var(--bg-secondary, #f5f5f5);
}

.purchase-button-topup {
  margin-top: 12px;
  background: var(--primary, #007AFF);
  color: white;
  border: none;
}

.purchase-button-topup:hover:not(:disabled) {
  background: var(--primary-hover, #0056b3);
}

/* ========= Self-Destruct Info Drawer ========= */

.sd_info_drawer_content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sd_info_drawer_icon_row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sd_info_drawer_icon {
  font-size: 36px;
  line-height: 1;
}

.sd_info_drawer_app_name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #000);
}

.sd_info_drawer_explanation {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary, #666);
  margin: 0;
}

.sd_info_drawer_timer_box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1) 0%, rgba(255, 152, 0, 0.1) 100%);
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.sd_info_drawer_timer_icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.sd_info_drawer_timer_text {
  font-size: 15px;
  font-weight: 600;
  color: #ff9800;
  line-height: 1.4;
}

.sd_info_drawer_warning {
  font-size: 13px;
  color: var(--text-tertiary, #999);
  line-height: 1.5;
  margin: 0;
}

.sd_info_drawer_actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.sd_info_drawer_btn {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}

.sd_info_drawer_btn:active {
  opacity: 0.7;
}

.sd_info_drawer_btn_primary {
  background: var(--primary, #007AFF);
  color: white;
}

.sd_info_drawer_btn_secondary {
  background: transparent;
  color: var(--text-secondary, #666);
  border: 1px solid var(--border, #ddd);
}

/* Dark mode */
body.dark_mode .sd_info_drawer_app_name,
body:not(.light_mode) .sd_info_drawer_app_name {
  color: var(--text-primary, #f0f0f0);
}

body.dark_mode .sd_info_drawer_explanation,
body:not(.light_mode) .sd_info_drawer_explanation {
  color: var(--text-secondary, #aaa);
}

body.dark_mode .sd_info_drawer_timer_box,
body:not(.light_mode) .sd_info_drawer_timer_box {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.15) 0%, rgba(255, 152, 0, 0.15) 100%);
  border-color: rgba(255, 193, 7, 0.4);
}

body.dark_mode .sd_info_drawer_timer_text,
body:not(.light_mode) .sd_info_drawer_timer_text {
  color: #ffb74d;
}

body.dark_mode .sd_info_drawer_warning,
body:not(.light_mode) .sd_info_drawer_warning {
  color: var(--text-tertiary, #777);
}

body.dark_mode .sd_info_drawer_btn_secondary,
body:not(.light_mode) .sd_info_drawer_btn_secondary {
  color: var(--text-secondary, #aaa);
  border-color: var(--border, #444);
}

/* ========= End of Self-Destruct Info Drawer ========= */


/* ========= AI Info Drawer ========= */

.ai_info_drawer_content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ai_info_drawer_icon_row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai_info_drawer_icon {
  font-size: 36px;
  line-height: 1;
}

.ai_info_drawer_app_name {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #000);
}

.ai_info_drawer_explanation {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-secondary, #666);
  margin: 0;
}

.ai_info_drawer_cost_box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.1) 0%, rgba(83, 109, 254, 0.1) 100%);
  border: 1px solid rgba(124, 77, 255, 0.3);
}

.ai_info_drawer_cost_icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}

.ai_info_drawer_cost_text {
  font-size: 15px;
  font-weight: 600;
  color: #7c4dff;
  line-height: 1.4;
}

.ai_info_drawer_note {
  font-size: 13px;
  color: var(--text-tertiary, #999);
  line-height: 1.5;
  margin: 0;
}

.ai_info_drawer_actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.ai_info_drawer_btn {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease;
}

.ai_info_drawer_btn:active {
  opacity: 0.7;
}

.ai_info_drawer_btn_primary {
  background: var(--primary, #007AFF);
  color: white;
}

.ai_info_drawer_btn_secondary {
  background: transparent;
  color: var(--text-secondary, #666);
  border: 1px solid var(--border, #ddd);
}

/* Dark mode */
body.dark_mode .ai_info_drawer_app_name,
body:not(.light_mode) .ai_info_drawer_app_name {
  color: var(--text-primary, #f0f0f0);
}

body.dark_mode .ai_info_drawer_explanation,
body:not(.light_mode) .ai_info_drawer_explanation {
  color: var(--text-secondary, #aaa);
}

body.dark_mode .ai_info_drawer_cost_box,
body:not(.light_mode) .ai_info_drawer_cost_box {
  background: linear-gradient(135deg, rgba(124, 77, 255, 0.15) 0%, rgba(83, 109, 254, 0.15) 100%);
  border-color: rgba(124, 77, 255, 0.4);
}

body.dark_mode .ai_info_drawer_cost_text,
body:not(.light_mode) .ai_info_drawer_cost_text {
  color: #b388ff;
}

body.dark_mode .ai_info_drawer_note,
body:not(.light_mode) .ai_info_drawer_note {
  color: var(--text-tertiary, #777);
}

body.dark_mode .ai_info_drawer_btn_secondary,
body:not(.light_mode) .ai_info_drawer_btn_secondary {
  color: var(--text-secondary, #aaa);
  border-color: var(--border, #444);
}

/* ========= End of AI Info Drawer ========= */


/* ========= Animations ========= */
/* src/styles/animations.css */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleInFade {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes springSlideIn {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(100px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ========= End of Animations ========= */





/* ========= Buttons ========= */

.button_1 {
  display: inline-flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 30px;
  letter-spacing: 0.34px;
  text-align: center;
  font-size: 14px;
  margin-right: 3px;
  font-weight: 600;
  background: #fdfdfd;
  border: 1px solid #ffffff;
  box-shadow: 0 0 2px 1px #88a2b638;
  color: black;
}

/* ========= End of Buttons ========= */


.post_comment{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.post_comment p{
  margin: 10px 0 16px;
  font-size: 15px;
  color: var(--color-medium-3);
}
.leave_a_comment{
  text-align: left;
  font-size: 19px;
  margin: 0 0 19px;
  font-weight: 600;
}
.your_rating_label{
  margin-right: 10px;
}
.comment_cta {
  text-align: center;
  color: var(--black-color-300);
  font-size: 16px;
  padding: 12px;
  margin: 15px 0 0 0;
  cursor: pointer;
  background-color: var(--gray-color-200);
  border-radius: var(--border-radius-large);
}

.comment_input_wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.comment_submit {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.5rem !important;
}

.comment_textarea {
  padding-right: 3rem !important;
  resize: none;
  overflow: hidden;
}

.comments_count {
  color: var(--black-300);
}

.comment_textarea {
  color: #000;
}

.comment_textarea {
  color: #000;
}

.user_comments_title {
  display: none;
}

.comment-wrapper {
  padding: 12px;
  background: rgba(0, 0, 0, .05);
  border-radius: 8px;
  color: var(--black-300);
  overflow: hidden;
}
.comment-wrapper:not(:last-child) {
  margin-bottom: 24px;
}

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

.comments_count {
  font-size: 14px;
  margin: 10px 0;
}

.comment_content {
  flex-grow: 1;
  padding-left: 10px;
}

.comment_content_first {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}

.user_card.s img {
  width: 26px;
  height: 26px;
  margin: 0;
  border-radius: 50%;
  overflow: hidden;
}

.comment_date {
  font-size: 12px;
  color: var(--color-medium-6);
  margin-left: 6px;
}

.comment_date a {
  text-decoration: none;
  color: var(--black-200);
}

.comment_edited_label {
  font-size: 11px;
  color: var(--color-medium-6);
  font-style: italic;
  margin-left: 4px;
}

.user_card.s .user_image_name_wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.user_card.s .user_data_wrap {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.user_card.s .user_name {
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  color: var(--black-300);
}

.user_card.s {
    text-decoration: none;
}

.comment_body {
    width: 100%;
    padding: 12px 0;
    word-wrap: break-word;
}

.comment-deleted {
    opacity: 0.6;
    transition: opacity 0.3s ease-out;
}

.comment-body-deleted {
    font-style: italic;
    color: #888;
    transition: color 0.3s ease-out;
}

/* Loading spinner animation for delete button */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Smooth transition for comment deletion */
.comment {
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}

.comment .comment_footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.comment .comment_footer button {
    background: none;
    border: none;
    color: var(--gray-400);
}
.comment .comment_footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
}

.comment .comment_footer button {
    background: none;
    border: none;
    color: var(--gray-400);
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: color 0.2s ease, background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.comment .comment_footer button:hover {
    color: var(--black-100);
    background-color: var(--gray-100);
}

/* Vote buttons styling */
.comment_vote_wrap {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-right: 8px;
}

.comment_upvote,
.comment_downvote {
    padding: 4px 6px !important;
    border-radius: 6px !important;
}

.comment_upvote svg,
.comment_downvote svg {
    display: block;
    width: 16px;
    height: 16px;
}

.comment_upvote:hover {
    color: #10b981 !important;
    background-color: rgba(16, 185, 129, 0.1) !important;
}

.comment_upvote.active {
    color: #10b981 !important;
    background-color: rgba(16, 185, 129, 0.15) !important;
}

.comment_upvote.active svg path {
    fill: #10b981;
    stroke: #10b981;
}

.comment_downvote:hover {
    color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.1) !important;
}

.comment_downvote.active {
    color: #ef4444 !important;
    background-color: rgba(239, 68, 68, 0.15) !important;
}

.comment_downvote.active svg path {
    fill: #ef4444;
    stroke: #ef4444;
}

.vote_count {
    font-size: 12px;
    font-weight: 500;
    min-width: 16px;
    text-align: center;
}

/* Hide buttons that should be hidden */
.comment_edit.hidden,
.comment_delete.invisible {
    display: none !important;
}

.comment_edit_buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* Delete button loading state */
.comment_delete:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.comment_delete:disabled svg {
    display: inline-block;
}

/* Special styling for action buttons */
.comment_reply {
    font-weight: 500;
}

.comment_share:hover {
    color: #3b82f6 !important;
}

.comment_report:hover {
    color: #f59e0b !important;
}

/* Mobile styling for comment footer */
@media (max-width: 640px) {
    .comment .comment_footer {
        gap: 8px;
        flex-wrap: wrap;
    }
    
    .comment .comment_footer button {
        font-size: 12px;
        padding: 3px 6px;
    }
    
    .comment_vote_wrap {
        margin-right: 4px;
    }
    
    .comment_upvote svg,
    .comment_downvote svg {
        width: 14px;
        height: 14px;
    }
    
    .vote_count {
        font-size: 11px;
    }
}

/* Child/Reply Comments Styling */
.child_comments {
  margin-left: 16px;
  padding-left: 12px;
  border-left: 2px solid #e8e8e8;
  margin-top: 12px;
  position: relative;
  animation: slideInReply 0.3s ease-out;
}

@keyframes slideInReply {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.child_comments::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 20px;
  width: 12px;
  height: 2px;
  background-color: var(--gray-300);
}

.reply-comment {
  background-color: var(--gray-100);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  transition: background-color 0.2s ease;
}

.reply-comment .comment {
  border: none;
  padding: 0;
  margin: 0;
}

.reply-comment .comment_body {
  font-size: 0.95rem;
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: break-word;
}

.reply-comment .user_name {
  font-size: 0.9rem;
  font-weight: 500;
}

.reply-comment .comment_date {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* Nested replies get progressively lighter backgrounds */
.child_comments .child_comments .reply-comment {
  background-color: var(--gray-200);
  border: 1px solid var(--gray-300);
}

.child_comments .child_comments {
  margin-left: 12px;
  padding-left: 10px;
  border-left-color: var(--gray-300);
}

/* Reply / Edit indicator in drawer footer */
.comment_reply_indicator,
.comment_edit_indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 4px 8px;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--gray-400);
  border-radius: 6px;
  background: rgba(59, 130, 246, 0.08);
}

.comment_edit_indicator {
  background: rgba(245, 158, 11, 0.08);
}

.comment_reply_indicator span,
.comment_edit_indicator span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

.comment_reply_indicator span {
  color: #3b82f6;
}

.comment_edit_indicator span {
  color: #f59e0b;
}

.comment_reply_cancel,
.comment_edit_cancel {
  background: none;
  border: none;
  padding: 2px;
  margin-left: 8px;
  color: var(--gray-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Thread line improvements */
.comment-wrapper .threadline {
  display: none;
}

.reply-comment .threadline {
  display: none;
}

/* Top-level comment separation */
.comment-wrapper {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
}

.comment-wrapper:last-child {
  border-bottom: none;
}

/* Make reply button more obvious when hovering */
.comment_reply {
  cursor: pointer;
  transition: color 0.2s ease;
}

.comment_reply:hover {
  color: #3b82f6;
  text-decoration: underline;
}

.comment_reply[data-is_replying="true"] {
  color: #3b82f6;
  font-weight: 500;
}

.child_comments {
  margin-left: 20px;
  padding-left: 12px;
}

.child_comments .child_comments {
  margin-left: 15px;
  padding-left: 8px;
}

.reply-comment {
  padding: 8px;
}


#app_comments .comments-empty-wrapper {
  min-height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 80px;
  text-align: center;
}

#app_comments .comments-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 320px;
}

#app_comments .comments-empty-icon {
  width: 84px;
    height: 84px;
    border-radius: 24px;
    background: rgb(0 0 0 / 7%);
    box-shadow: 0 12px 40px rgb(0 0 0 / 9%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c2c2c2;
    border: 1px solid #ffffff8a;
}

#app_comments .comments-empty-icon svg {
  width: 34px;
  height: 34px;
  opacity: 0.85;
}

#app_comments .comments-empty-title {
  color: #b1b1b1;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.2px;
}

#app_comments .drawer-content {
  max-height: 58vh;
  height: 58vh;
  padding-bottom: calc(46px + var(--safe-bottom));
}

/* End of comments */

.onboarding-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center; /* Add this */
    justify-content: flex-start; /* Add this - keeps horizontal sliding working */
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.screen {
    position: relative;
    min-width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 20px 100px 20px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.country-selector-drawer .drawer {
    background: #1a1a1a !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.country-selector-drawer .drawer-overlay {
    background: rgba(0, 0, 0, 0.8);
}

/* Country Search Container */
.country_search_container {
    padding: 0 20px 15px 20px;
    position: sticky;
    top: 0;
    background: #1a1a1a;
    z-index: 10;
}

.country_search_input {
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    color: #fff;
    font-size: 1rem;
    outline: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.country_search_input::placeholder {
    color: #666;
}

.country_search_input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: none;
}

/* Country List */
.country_list {
    padding: 0 20px 20px 20px;
    max-height: 60vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.country_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
    margin-bottom: 4px;
}

.country_item:active {
    background: rgba(255, 255, 255, 0.08);
}

.country_item.selected {
    background: rgba(0, 122, 255, 0.2);
    border-color: rgba(0, 122, 255, 0.5);
}

.country_flag {
    font-size: 1.4rem;
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.country_name {
    flex: 1;
    color: #fdfdfd;
    font-size: 1rem;
    font-weight: 400;
}

.country_code {
    color: #888;
    font-size: 0.95rem;
    font-weight: 500;
    flex-shrink: 0;
}


.try_mode .search_icon,
.try_mode .ai_assistant_icon,
.try_mode .app_logo_icon {
    transform: translateX(-120px);
    opacity: 0;
}
.opened_app .search_icon,
.opened_app .ai_assistant_icon,
.opened_app .app_logo_icon {
    transform: translateX(-120px);
    opacity: 0;
    pointer-events: none;
}

/* Enter try-mode or app instantly on tap without affecting edge-swipe exit animations. */
body.try_mode_instant .search_icon,
body.try_mode_instant .ai_assistant_icon,
body.try_mode_instant .app_logo_icon,
body.opened_app_instant .search_icon,
body.opened_app_instant .ai_assistant_icon,
body.opened_app_instant .app_logo_icon {
  transition: none !important;
}

body.try_mode_instant .dock,
body.try_mode_instant #dock,
body.try_mode_instant .page-indicators,
body.try_mode_instant #pageIndicators {
  transition: none !important;
}

.try_mode .dock{
    transform: translate(-50%, 116px);
    opacity: 0;
}
.opened_app .dock{
    transform: translate(-50%, 116px);
    opacity: 0;
}

.hidden-anim {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  pointer-events: none;
}

/* Double Tap Like Animation */
.floating-heart {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  animation: floatUp 3s ease-out forwards;
}

.floating-heart svg {
  width: 80px;
  height: 80px;
  filter: drop-shadow(0 5px 15px rgba(0,0,0,0.3));
}

@keyframes floatUp {
  0% {
      transform: translate(-50%, -50%) scale(0) rotate(0deg);
      opacity: 0;
  }
  15% {
      transform: translate(-50%, -50%) scale(1.2) rotate(-5deg);
      opacity: 1;
  }
  100% {
      transform: translate(-50%, -250%) scale(0.3) rotate(15deg);
      opacity: 0;
  }
}

.burst-heart {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  animation: burstAnimation 0.6s ease-out forwards;
}

.burst-heart svg {
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 5px 20px rgba(0,0,0,0.4));
}

@keyframes burstAnimation {
  0% {
      transform: translate(-50%, -50%) scale(0) rotate(0deg);
      opacity: 0;
  }
  50% {
      transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
      opacity: 1;
  }
  100% {
      transform: translate(-50%, -50%) scale(0.9) rotate(0deg);
      opacity: 0;
  }
}

.sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 1001;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
}

@keyframes sparkleAnimation {
  0% {
      transform: translate(-50%, -50%) scale(0);
      opacity: 1;
  }
  100% {
      transform: translate(-50%, -50%) scale(1);
      opacity: 0;
  }
}

/* Heart color classes */
.heart-red { fill: #ed4956; }
.heart-pink { fill: #ff6b9d; }
.heart-purple { fill: #c66cff; }
.heart-blue { fill: #4facfe; }
.heart-orange { fill: #ff8c42; }
.heart-yellow { fill: #ffd93d; }

/* homesceens css start */

:root { --folder-mini-icon-border-radius: 5px; --folder-mini-icon-size: 20px; }
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; background:#000; height:100vh;}
.app-container, .page { height:100vh; }
.pages-wrapper { display:flex; width:100%; height:100%; transition:transform .25s cubic-bezier(.25,.46,.45,.94); overflow-x:scroll; overflow-y:hidden; scroll-snap-type:x mandatory; }
.page { flex:none; width:100vw; height:100vh; position:relative; overflow-y:auto; scroll-snap-align:start; background:rgb(0,0,0); padding: 70px 20px 140px; }

.app-icon { display:flex; flex-direction:column; align-items:center; position:relative; padding:5px; width:100%; }
.app-icon.locked-app .icon img,
.app-icon.locked-app .app-name { 
  opacity: 0.45;
 }

 .app-icon.locked-app .icon {
  overflow: visible;
  background: transparent;
 }
.app-icon.touched { opacity: 0.5; }
.icon,
.app-close-icon-clone {
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  overflow: hidden;
  position: relative;
}

.icon {
  border-radius: 15px;
}

.app-close-icon-clone {
  /* Dynamic: JS sets `--app-close-icon-radius` from the real target element.
     Fallback remains 0px so clip-path can define the visible rounding when needed. */
  border-radius: var(--app-close-icon-radius, 0px);
}

.app-icon .icon .icon-inner::after,
.folder-mini-icon .icon-inner::after,
.app-close-icon-clone .icon-inner::after {
    content: '';
    position: absolute;
    top: -29%;
    left: -37px;
    bottom: 10%;
    background: linear-gradient(180deg, #ffffff42, #00000000);
    z-index: 3;
    border-radius: 0;
    transform: rotate(313deg);
    pointer-events: none;
    width: 164%;
    height: 48px;
    border-top-left-radius: var(--app-close-icon-radius, 15px);
}

/* Inner wrapper clips the glossy sheen while allowing badges to overflow .icon */
.app-icon .icon .icon-inner,
.folder-mini-icon .icon-inner,
.app-close-icon-clone .icon-inner {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-close-icon-clone {
  background: #ffffff3d;
}

/* Hide icon sheen overlay while app is generating */
.app-icon.is_generating .icon .icon-inner::after,
.app-icon.is-generating .icon .icon-inner::after {
    content: none;
    display: none;
}
/* .app-name { font-size:12px; color:#fff; max-width:70px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } */
.app-name { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; color: #000; transition: opacity 0.17s ease-in-out; }
.dock {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateZ(0); /* Force compositor layer */
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(20px);
  will-change: backdrop-filter;
  border-radius: 25px;
  /* padding: 8px; */
  display: flex;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* CRITICAL: must be a definite height for scroll-snap pages (height:100%) to work */
  height: 95px;
  min-height: 95px;
  max-height: 95px;
  overflow: hidden;
  width: 363px;
  max-width: calc(100% - 40px);
  justify-content: center;
  align-items: center;
  z-index: 100;
  transition: transform 0.17s ease-in-out, opacity 0.17s ease-in-out; /* TODO - UNCOMMENT THIS */
}

/* Samsung/OneUI back-gesture flicker: the system nav bar briefly appears, shrinking the
   viewport from the bottom. position:fixed + bottom:X elements jump up then back.
   Fix: on Android installed mode, anchor from the top using a JS-locked viewport height
   (--locked-vh) so the elements stay pinned to the screen, not the dynamic viewport bottom. */
@media (display-mode: standalone) and (orientation: portrait),
       (display-mode: fullscreen) and (orientation: portrait),
       (display-mode: minimal-ui) and (orientation: portrait) {
  body.android .dock {
    bottom: auto;
    top: calc(var(--locked-vh, 100vh) - 20px);
    transform: translateX(-50%) translateY(-100%) translateZ(0);
  }
  body.android .page-indicators {
    bottom: auto;
    top: calc(var(--locked-vh, 100vh) - 120px);
    transform: translateX(-50%) translateY(-100%);
  }
}

.feed-details-dock-card {
  height: 95px;
  max-height: 95px;
  overflow: hidden;
  align-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
  max-width: 363px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%) translateZ(0);
  border-radius: 25px;
  padding-left: 19.05px;
  padding-right: 19.05px;
  backdrop-filter: blur(20px);
}

.feed_dock {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ensure the snap viewport wins even if other CSS redefines `.dock`. */
#dock {
  height: 95px;
  max-height: 95px;
  overflow: hidden;
}
.dock .dock-content {
  /* Snap-scroller viewport; must be a definite height (driven by .dock max-height). */
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

.dock .dock-content-snap {
  height: 100%;
}

.dock .dock-snap-scroller {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-y;
}
.dock .dock-snap-scroller::-webkit-scrollbar {
  display: none;
}
.dock .dock-snap-page {
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity;
}

.dock .dock-snap-page-inner {
  width: 100%;
  height: 100%;
}
.dock .dock-snap-page-inner-normal {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.dock .dock-snap-page-inner-feed {
  width: 90%;
  height: 100%;
  display: flex;
  align-items: center;
}
.dock .app_component {
  --icon-size: 62px;
  padding: 0;
}
.dock-slot { width:65px; height:65px; display:flex; align-items:center; justify-content:center; border-radius:15px; }

@media (orientation: landscape) {
  .dock {
    height: 320px !important;
    max-height: 320px !important;
  }
  #dock {
    height: 320px !important;
    max-height: 320px !important;
  }
  .dock .dock-snap-page-inner-normal {
    flex-direction: column;
  }
}
.page-indicators {
  position: fixed;
  bottom: 130px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 99;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.page-indicators,
#pageIndicators,
#dock {
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.page-indicator { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.5); cursor:pointer; }
.page-indicator.active { background:#fff; }
.page-indicator.is-favorite { background: transparent; color: rgba(255, 255, 255, 0.7); width: 12px; height: 12px; display:flex; align-items:center; justify-content:center; position: relative; top: -2px; }
.page-indicator.is-favorite.active { background: transparent; color: #fff; }
.page-indicator.is-favorite svg { width:12px; height:12px; display:block; pointer-events:none; }
.delete-badge { position:absolute; top:-8px; left:-8px; width:24px; height:24px; background:#ff3b30; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:bold; }

.toast-container{
  top: calc( 1rem + var(--safe-top));
}



/* homesceens css end */


/* ── Section gesture: swipe-down-then-sideways visual feedback ── */
/* Highlight circle for section gesture – centered on the icon via ::after. */
/* .section-gesture-active {
  position: relative;
}
.section-gesture-active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  pointer-events: none;
  transition: background 0.1s ease;
} */
/* AI icon has top:0 with large asymmetric padding-top to account for safe area,
   so 50% vertical center is too high. Offset downward to align with the actual SVG. */
.ai_assistant_icon.section-gesture-active::after {
  top: calc(var(--header-icon-top) + 30px);
}
body.light_mode .section-gesture-active::after {
  background: rgba(0, 0, 0, 0.1);
}

.gesture-section-label {
  position: fixed;
  top: calc(var(--safe-top) + 60px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  z-index: 60000;
  pointer-events: none;
  text-transform: capitalize;
}
body.light_mode .gesture-section-label {
  background: rgba(255, 255, 255, 0.85);
  color: #000;
}


.search_icon {
  position: absolute;
  left: 0;
  top: var(--header-icon-top);
  transform: translate(0);
  opacity: 1;
  transition: transform .17s ease-in-out, opacity .17s ease-in-out;
  z-index: 999;
  padding: 20px; 
  color: white;
  line-height: 0; /* avoid SVG baseline quirks (Android) */
}

.ai_assistant_icon {
  position: absolute;
  left: 50px;
  top: var(--header-icon-top);
  transform: translate(0);
  opacity: 1;
  transition: transform .17s ease-in-out, opacity .17s ease-in-out;
  z-index: 999;
  padding: 20px;
  color: white;
  line-height: 0; /* avoid SVG baseline quirks (Android) */
}

.slot-folder-icon {
  position: relative;
  display: block;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: -1px;
}

/* ── Base folder-thumb-icon (all contexts) ─────────────────────────────── */
.folder-thumb-icon {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2.5px;
  padding: 2.5px;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1px solid #ffffff38;
  overflow: hidden;
  background: #3333338f;
  align-items: center;
  justify-content: center;
  align-content: center;
  justify-items: center;
}

.folder-thumb-icon .mini-folder {
  width: 100%;
  height: 100%;
  background: #919191;
  border-radius: 2px;
  align-self: center;
  justify-self: center;
}
.context-menu-icon-clone {
  .folder-thumb-icon {
    border-radius: 20%;
  }

  .app-icon[data-folder-w]:not([data-folder-w="1"]) .folder-thumb-icon,
  .app-icon[data-folder-h]:not([data-folder-h="1"]) .folder-thumb-icon {
    gap: 5px;
    padding: 5px;
  }
}

.folder-thumb-icon .mini-folder:nth-child(1) { background: #A3A3A3; }
.folder-thumb-icon .mini-folder:nth-child(2) { background: #B5B5B5; }
.folder-thumb-icon .mini-folder:nth-child(3) { background: #7A7A7A; }
.folder-thumb-icon .mini-folder:nth-child(4) { background: #6A6A6A; }

/* ── Context overrides ─────────────────────────────────────────────────── */

/* Slot header/dock icon (fills 24px parent) */
.slot-folder-icon .folder-thumb-icon {
  width: 100%;
  height: 100%;
  gap: 3px;
  padding: 3px;
}
.slot-folder-icon .folder-thumb-icon .mini-folder {
  border-radius: 30%;
}

.slot-folder-icon__letter {
  position: relative;
  font-size: 10px;
  font-weight: 400;
  color: var(--bg-primary, #121212);
  line-height: 1;
  margin-top: 2px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slot-app-icon__img {
  width: 20px;
  height: 20px;
  border-radius: 6px;
}

.slot-app-icon__letter {
  font-size: 16px;
  font-weight: 600;
}

#dm-envelope-icon {
  right: 50px;
}

@media (orientation: landscape) {
  /* When dock is visible in landscape, align ALL header icons to the same top baseline. */
  body:not(.try_mode):not(.opened_app):has(#dock:not(.hidden-anim)),
  body:not(.try_mode):not(.opened_app):has(.dock:not(.hidden-anim)),
  body:not(.try_mode):not(.opened_app):has(.above_dock) {
    --header-icon-top: calc(8px + var(--safe-top));
  }

  body:not(.try_mode):not(.opened_app):has(#dock:not(.hidden-anim)) .search_icon,
  body:not(.try_mode):not(.opened_app):has(.dock:not(.hidden-anim)) .search_icon,
  body:not(.try_mode):not(.opened_app):has(.above_dock) header .search_icon {
    left: calc(var(--safe-left) + 0px);
  }
  body.ios:not(.try_mode):not(.opened_app):has(#dock:not(.hidden-anim)) .search_icon,
  body.ios:not(.try_mode):not(.opened_app):has(.dock:not(.hidden-anim)) .search_icon,
  body.ios:not(.try_mode):not(.opened_app):has(.above_dock) header .search_icon {
    left: calc(var(--safe-left) - 8px);
  }
  body:not(.try_mode):not(.opened_app):has(#dock:not(.hidden-anim)) .ai_assistant_icon,
  body:not(.try_mode):not(.opened_app):has(.dock:not(.hidden-anim)) .ai_assistant_icon,
  body:not(.try_mode):not(.opened_app):has(.above_dock) header .ai_assistant_icon {
    left: calc(var(--safe-left) + 50px);
  }
  body.ios:not(.try_mode):not(.opened_app):has(#dock:not(.hidden-anim)) .ai_assistant_icon,
  body.ios:not(.try_mode):not(.opened_app):has(.dock:not(.hidden-anim)) .ai_assistant_icon,
  body.ios:not(.try_mode):not(.opened_app):has(.above_dock) header .ai_assistant_icon {
    left: calc(var(--safe-left) + 50px - 8px);
  }
  body:not(.try_mode):not(.opened_app):has(#dock:not(.hidden-anim)) #dm-envelope-icon,
  body:not(.try_mode):not(.opened_app):has(.dock:not(.hidden-anim)) #dm-envelope-icon,
  body:not(.try_mode):not(.opened_app):has(.above_dock) header #dm-envelope-icon {
    right: calc(var(--safe-right) + 50px);
    top: var(--header-icon-top);
  }
  body:not(.try_mode):not(.opened_app):has(#dock:not(.hidden-anim)) #notification-bell-icon,
  body:not(.try_mode):not(.opened_app):has(.dock:not(.hidden-anim)) #notification-bell-icon,
  body:not(.try_mode):not(.opened_app):has(.above_dock) header #notification-bell-icon {
    right: calc(var(--safe-right) + 0px);
    top: var(--header-icon-top);
  }

  .page .page-title {
    top: calc(8px + var(--safe-top));
  }
}

.search_icon svg {
  height: 20px;
  width: 20px;
  border-radius: 7px;
  box-shadow: none;
  position: relative;
  display: block; /* Prevent inline spacing issues */
  filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.6)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.6));
}
.ai_assistant_icon svg {
  height: 20px;
  width: 20px;
  border-radius: 7px;
  box-shadow: none;
  position: relative;
  display: block; /* Prevent inline spacing issues */
  filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.6)) drop-shadow(-1px 0 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6)) drop-shadow(0 -1px 0 rgba(0, 0, 0, 0.6));
}

.ai_assistant_icon * {
  pointer-events: none;
}

/* Light mode header icons: keep white but add shadow for visibility on light backgrounds */
body.light_mode .search_icon svg,
body.light_mode .ai_assistant_icon svg {
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 1px rgba(0, 0, 0, 0.3));
}
.app_logo_icon{
  left: 20px;
  top: calc( 17px + var(--safe-top));
  transform: translateX(0);
  opacity: 1;
  transition: transform 0.17s ease-in-out, opacity 0.17s ease-in-out; /* TODO - UNCOMMENT THIS */
  z-index: 999;
}

.app_logo_icon img{
  width: 24px;
  height: 24px;
  top: 1px;
  margin-right: 7px;
  border-radius: 7px;
  box-shadow: none;
  position: relative;
  display: block; /* Prevent inline spacing issues */
}

/* Ensure logo image maintains position when hidden in overlay mode */
.initial-header.dm-overlay-mode .app_logo_icon img {
  position: absolute; /* Remove from flow to prevent 1px shift */
  opacity: 0;
}

.try_mode .app_logo_icon {
  transform: translateX(-50px);
  opacity: 0;
}
.opened_app .app_logo_icon {
  transform: translateX(-50px);
  opacity: 0;
}

/* Hide logo when in DM overlay mode - needs higher specificity */
.dm-overlay-mode .app_logo_icon,
header.dm-overlay-mode .app_logo_icon {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50px) !important;
}


/* Hide logo when in DM overlay mode - needs higher specificity */
.dm-overlay-mode .search_icon,
.dm-overlay-mode .ai_assistant_icon,
header.dm-overlay-mode .search_icon,
header.dm-overlay-mode .ai_assistant_icon {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50px) !important;
}

/* For initial-header flex layout, maintain logo space to prevent layout shift */
.initial-header.dm-overlay-mode .search_icon,
.initial-header.dm-overlay-mode .app_logo_icon {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50px) !important;
  /* Keep element in layout flow but invisible to prevent jumping */
  visibility: visible !important;
  /* Maintain exact dimensions to prevent any layout shift */
  min-width: 44px;
  width: 44px;
  height: 25px; /* Match image height (24px) + top offset (1px) to prevent 1px shift */
  flex-shrink: 0;
  /* Ensure no margin/padding changes */
  margin: 0 !important;
  padding: 0 !important;
  /* Maintain vertical alignment */
  align-self: center;
  /* Prevent any border/outline that might affect layout */
  border: none !important;
  outline: none !important;
  /* Ensure consistent line-height to prevent 1px shift */
  line-height: 25px;
  vertical-align: middle;
}

/* Ensure logo image maintains position when hidden in overlay mode */
.initial-header.dm-overlay-mode .app_logo_icon img {
  position: absolute; /* Remove from flow to prevent 1px shift */
  opacity: 0;
  top: 1px; /* Maintain the same top offset */
}

/* In try mode, slide dock and page indicators out of view with a gentle translate animation */
.try_mode .dock,
.try_mode #dock {
  transform: translate(-50%, 116px);
  opacity: 0;
}

@media (orientation: landscape) {
  .try_mode .dock,
  .try_mode #dock {
    transform: translateY(-50%) translateX(-116px);
  }
}

.try_mode .page-indicators,
.try_mode #pageIndicators {
  transform: translateX(-50%) translateY(40px);
  opacity: 0;
}

@media (orientation: landscape) {
  .try_mode .page-indicators,
  .try_mode #pageIndicators {
    transform: translateY(-50%) translateX(40px);
  }
}

/* App opened at page level - same styles as try_mode for page-level overlays */
.opened_app .dock,
.opened_app #dock {
  transform: translate(-50%, 116px);
  opacity: 0;
}

@media (orientation: landscape) {
  .opened_app .dock,
  .opened_app #dock {
    transform: translateY(-50%) translateX(-116px);
  }
}

.opened_app .page-indicators,
.opened_app #pageIndicators {
  transform: translateX(-50%) translateY(40px);
  opacity: 0;
}

@media (orientation: landscape) {
  .opened_app .page-indicators,
  .opened_app #pageIndicators {
    transform: translateY(-50%) translateX(40px);
  }
}



.main {
  width: 100%;
  height: 100%;
}


 /* App component */
 .app_component {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  padding: 8px 0;
  height: var(--app-component-height);
  box-sizing: border-box;
}

.app_component .app_icon {
  /*height: var(--icon-size);*/
  /*width: var(--icon-size);*/
  /*aspect-ratio: 1;*/
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  width: auto;
  height: auto;
}
.app_component.is_generating .right svg{
  width: 24px;
  height: 24px;
  margin-right: 20px;
}

.app_component .left {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 16px;
  flex-grow: 1;
}
.app_component .app_creator_user_wrap{
  white-space: nowrap;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  line-height: normal;
  font-weight: 600;
  margin: -2px 0 0;
}

.app_component .right {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  gap: 4px;
}
.app_component .right .name {
  font-size: 18px;
  color: #000;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.app_component .right .details {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.app_component .right .details .app_creator{
  color: #757575;
}

.app_component.character .app_icon {
  border-radius: 50%;
}

.app_component .new_app_indicator{
  display: none;
  width: 7px;
  height: 7px;
  background: var(--color-accent);
  border-radius: 20px;
  margin-left: 10px;
  position: relative;
  top: -1px;
}
.app_component.is_new .new_app_indicator{
  display: inline-block;
}

.app_component.xs .app_status {
  position: absolute;
  top: 0;
  right: 0;
  padding: 3px 6px;
  font-size: 11px;
  border-radius: 6px;
}

.app_component.xs {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
}

.app_component.xs .app_icon {
  height: 64px;
  width: 64px;
  aspect-ratio: 1;
  border-radius: 14px;
  padding: 14px;
  box-sizing: border-box;
}
.app_component.xs .left {
  flex-flow: column nowrap;
  align-items: center;
  gap: 8px;
}
.app_component.xs .left .details .app_creator {
  display: none;
}

.app_component.xs .left .name {
  text-align: center;
}
.app_component.xs .right {
  display: none;
}

.app_component.s {
  display: flex;
  flex-flow: column nowrap;
  gap: 8px;
  box-shadow: var(--shadow-md);
  border-radius: 6px;
  padding: 10px 9px;
}
.app_component.s .app_creator {
  display: none;
}

.app_component.s .app_icon {
  height: 90px;
}

.app_component.s .left {
  flex-flow: column nowrap;
}
.app_component.s .right {
  gap: 8px;
  flex-direction: row;
  align-items: center;
}
.app_component.s .right .comments_button{
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #fff;
  border-radius: 22px;
  padding: 7px 12px;
}
.app_component.s .right .comments_button svg{
  fill: var(--white-100);
  width: 16px;
  height: 16px;
}
.app_component.s .right .name {
  font-size: 15px;
}
.app_component.s .right .details {
  align-self: center;
}

.app_component .app_creator{
  display: flex;
  align-items: center;
  gap: 4px;
}

.app_component .app_creator img{
  width: 13px;
  height: 13px;
  object-fit: cover;
  border-radius: 20px;
  box-shadow: 0 0 1px 1px #00000040;
  pointer-events: none;
}

.app_creator_image {
  pointer-events: none;
}

.app_component .app_creator .avatar_fallback {
  width: 13px;
  height: 13px;
  overflow: hidden;
  font-size: 6px;
  display: inline-flex;
  align-items: center;
}

.app_component .average_rating{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  fill: var(--white-100);
}
.app_component .average_rating svg{
  width: 12px;
  height: 12px;
}


.hidden-anim {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  pointer-events: none;
}


.splash-screen-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  background-color: rgb(84 84 84 / 61%);
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.splash-screen-loading .bg-splash {
  position: absolute;
  z-index: -1;
  filter: blur(12px);
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}

.splash-screen-loading .splash-icon {
  width: 120px;
  height: 120px;
  border-radius: 20px;
}

/* ========= App Launch Splash (outside iframe) ========= */
.app_launch_splash {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.25s ease;
}

.app_launch_splash--fixed {
  position: fixed;
  z-index: 20000;
}

.app_launch_splash__bg {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  object-fit: cover;
  filter: blur(32px);
  transform: scale(1.12);
  opacity: 0.55;
}

.app_launch_splash__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.72) 70%, rgba(0,0,0,0.92) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.30) 0%, rgba(0,0,0,0.75) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.app_launch_splash__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0px;
  width: 87.5px;
  text-align: center;
}

.app_launch_splash__icon {
  width: 62px;
  height: 62px;
  border-radius: 15px;
  object-fit: cover;
  box-shadow:
    0 18px 45px rgba(0,0,0,0.45),
    0 2px 0 rgba(255,255,255,0.10) inset;
}

.app_launch_splash__name {
  font-size: 11.2px;
  letter-spacing: -0.5px;
  color: white;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  max-width: 66px;
  overflow: hidden;
  white-space: nowrap;
  transition: transform 0.1s ease-in-out, opacity 0.17s ease-in-out;
  opacity: 1;
  margin-top: 7px;
  font-weight: 500;
}

/* ========= End of App Launch Splash ========= */


.input_wrapper .input, .input_wrapper input, .input_wrapper textarea {
  flex-grow: 1;
  border: none;
  background: none;
  outline: none;
  font-size: 16px;
  padding: 8px;
  border-radius: 24px;
}

/* PREVENT ANDROID INPUT FOCUS JUMP */
#root {
  box-sizing: border-box;
  /* space for keyboard so native "keep caret visible" doesn't jump */
  scroll-padding-bottom: var(--kb, 0px);
  overscroll-behavior: contain;
}

.code-input input { /* your 6 inputs container */
  scroll-margin-bottom: 16px; /* small cushion */
}
/* END OF PREVENT ANDROID INPUT FOCUS JUMP */

/* Fix for double safe area insets in Android PWA fullscreen mode */
/* 
 * PROBLEM: Android Chrome in fullscreen/standalone mode automatically adds safe area insets 
 * to the viewport (pushes content down). If CSS also uses env(safe-area-inset-top), you get double padding.
 * 
 * SOLUTION: We override CSS variables (--safe-top, etc.) to 0px in standalone/fullscreen mode above.
 * Additionally, we need to override direct uses of env(safe-area-inset-top) in CSS rules.
 */
@media (display-mode: fullscreen) {
  /* Override direct uses of env(safe-area-inset-top) - browser handles it automatically */
  /* In fullscreen on Android, force a single consistent header icon baseline. */
  body.android {
    --header-icon-top: 0px;
  }
  
  /* Override .initial-header which uses env(safe-area-inset-top) directly */
  body.android .initial-header {
    margin-top: 0 !important;
    padding-top: 17px !important; /* Keep base padding, remove safe area */
  }
  
  /* Override .app_logo_icon which uses calc(17px + env(safe-area-inset-top)) */
  body.android .app_logo_icon {
    top: 17px !important; /* Remove safe area from calculation */
  }
  
  /* Keep header right-side icons aligned with search icon on Android. */
  body.android .app_notifications_icon {
    top: var(--header-icon-top) !important;
  }
  
  /* Override .notifications-container: use the runtime-safe-top variable instead of env(safe-area-inset-top) */
  body.android .notifications-container {
    padding-top: calc(var(--app-safe-top) + 56px) !important;
  }
  
  /* Override .toast-container which uses calc(1rem + env(safe-area-inset-top)) */
  body.android .toast-container {
    top: 1rem !important; /* Remove safe area from calculation */
  }

  body.android .search_icon {
    top: var(--header-icon-top) !important; /* Match the shared baseline */
  }
  
  /* Override any header elements that might inherit or use safe area */
  body.android header {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Prevent body from adding safe area padding (appChat.css has this) */
  body.android body {
    padding-top: 0 !important;
  }


  /* body.android .app-grid{
    gap: 0px !important;
  } */
}

/* ========= App Splash Loading ========= */

/* Jello horizontal animation for feed loading text - starts from final state of slide-in */
@-webkit-keyframes jello-horizontal-text {
    0% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(1, 1, 1);
        transform: translateZ(0) translateY(0) scale3d(1, 1, 1);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(1.25, 0.75, 1);
        transform: translateZ(0) translateY(0) scale3d(1.25, 0.75, 1);
        opacity: 1;
    }
    40% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(0.75, 1.25, 1);
        transform: translateZ(0) translateY(0) scale3d(0.75, 1.25, 1);
        opacity: 1;
    }
    50% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(1.15, 0.85, 1);
        transform: translateZ(0) translateY(0) scale3d(1.15, 0.85, 1);
        opacity: 1;
    }
    65% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(0.95, 1.05, 1);
        transform: translateZ(0) translateY(0) scale3d(0.95, 1.05, 1);
        opacity: 1;
    }
    75% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(1.05, 0.95, 1);
        transform: translateZ(0) translateY(0) scale3d(1.05, 0.95, 1);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(1, 1, 1);
        transform: translateZ(0) translateY(0) scale3d(1, 1, 1);
        opacity: 1;
    }
}

@keyframes jello-horizontal-text {
    0% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(1, 1, 1);
        transform: translateZ(0) translateY(0) scale3d(1, 1, 1);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(1.25, 0.75, 1);
        transform: translateZ(0) translateY(0) scale3d(1.25, 0.75, 1);
        opacity: 1;
    }
    40% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(0.75, 1.25, 1);
        transform: translateZ(0) translateY(0) scale3d(0.75, 1.25, 1);
        opacity: 1;
    }
    50% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(1.15, 0.85, 1);
        transform: translateZ(0) translateY(0) scale3d(1.15, 0.85, 1);
        opacity: 1;
    }
    65% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(0.95, 1.05, 1);
        transform: translateZ(0) translateY(0) scale3d(0.95, 1.05, 1);
        opacity: 1;
    }
    75% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(1.05, 0.95, 1);
        transform: translateZ(0) translateY(0) scale3d(1.05, 0.95, 1);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateZ(0) translateY(0) scale3d(1, 1, 1);
        transform: translateZ(0) translateY(0) scale3d(1, 1, 1);
        opacity: 1;
    }
}

/* Jello horizontal animation for feed loading text - preserves translate from slide-in */
@-webkit-keyframes jello-horizontal {
    0% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1, 1, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1, 1, 1);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1.25, 0.75, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(0.75, 1.25, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1.15, 0.85, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(0.95, 1.05, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1.05, 0.95, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1.05, 0.95, 1);
    }
    100% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1, 1, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1, 1, 1);
    }
}

@keyframes jello-horizontal {
    0% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1, 1, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1, 1, 1);
        opacity: 1;
    }
    30% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1.25, 0.75, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1.25, 0.75, 1);
    }
    40% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(0.75, 1.25, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(0.75, 1.25, 1);
    }
    50% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1.15, 0.85, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1.15, 0.85, 1);
    }
    65% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(0.95, 1.05, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(0.95, 1.05, 1);
    }
    75% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1.05, 0.95, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1.05, 0.95, 1);
    }
    100% {
        -webkit-transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1, 1, 1);
        transform: translateX(-50%) translateZ(0) translateY(0) scale3d(1, 1, 1);
    }
}

/* Text fades in smoothly */
@keyframes text-fade-in {
    0% {
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
    }
    1% {
        visibility: visible; /* Make visible immediately when animation starts */
    }
    100% {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}

/* ========= End of App Splash Loading ========= */

/* ----------------------------------------------
 * Generated by Animista on 2025-11-24 23:27:30
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bck-top
 * ----------------------------------------
 */
 @-webkit-keyframes slide-in-bck-top {
  0% {
    -webkit-transform: translateZ(700px) translateY(-300px) scale3d(1, 1, 1);
            transform: translateZ(700px) translateY(-300px) scale3d(1, 1, 1);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0) scale3d(1, 1, 1);
            transform: translateZ(0) translateY(0) scale3d(1, 1, 1);
    opacity: 1;
  }
 }
 @keyframes slide-in-bck-top {
  0% {
    -webkit-transform: translateZ(700px) translateY(-300px) scale3d(1, 1, 1);
            transform: translateZ(700px) translateY(-300px) scale3d(1, 1, 1);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0) scale3d(1, 1, 1);
            transform: translateZ(0) translateY(0) scale3d(1, 1, 1);
    opacity: 1;
  }
 }

.slide-in-bck-top {
	-webkit-animation: slide-in-bck-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s both;
	animation: slide-in-bck-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.7s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2025-12-3 22:31:6
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation slide-in-bck-left
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bck-left {
  0% {
    -webkit-transform: translateZ(700px) translateX(-400px);
            transform: translateZ(700px) translateX(-400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateZ(0) translateX(0);
            transform: translateZ(0) translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-bck-left {
  0% {
    -webkit-transform: translateZ(700px) translateX(-400px);
            transform: translateZ(700px) translateX(-400px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(-50%) translateZ(0px) rotateZ(356deg);
            transform: translate(-50%) translateZ(0px) rotateZ(356deg);

    opacity: 1;
  }
}

/**
 * ----------------------------------------
 * animation slide-in-bck-left-centered (variant for centered elements)
 * ----------------------------------------
 */
@-webkit-keyframes slide-in-bck-left-centered {
  0% {
    -webkit-transform: translateX(calc(-50% - 400px)) translateZ(700px);
            transform: translateX(calc(-50% - 400px)) translateZ(700px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-50%) translateZ(0);
            transform: translateX(-50%) translateZ(0);
    opacity: 1;
  }
}
@keyframes slide-in-bck-left-centered {
  0% {
    -webkit-transform: translateX(calc(-50% - 400px)) translateZ(700px);
            transform: translateX(calc(-50% - 400px)) translateZ(700px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(-50%) translateZ(0);
            transform: translateX(-50%) translateZ(0);
    opacity: 1;
  }
}

.slide-in-bck-left-centered {
	-webkit-animation: slide-in-bck-left-centered 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
	animation: slide-in-bck-left-centered 0.45s cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s both;
}

/* Jello animation class - to be applied after slide-in completes */
.jello-horizontal-text {
	-webkit-animation: jello-horizontal-text 0.9s ease both;
	animation: jello-horizontal-text 0.9s ease both;
	opacity: 1; /* Ensure opacity stays at 1 */
}



/* ----------------------------------------------
 * Generated by Animista on 2025-12-3 22:53:31
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-top
 * ----------------------------------------
 */
 @-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateZ(0) translateY(-45px);
            transform: translateZ(0) translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateZ(0) translateY(-24px);
            transform: translateZ(0) translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateZ(0) translateY(-12px);
            transform: translateZ(0) translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateZ(0) translateY(-6px);
            transform: translateZ(0) translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateZ(0) translateY(-4px);
            transform: translateZ(0) translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateZ(0) translateY(0px);
            transform: translateZ(0) translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0px);
            transform: translateZ(0) translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateZ(0) translateY(-45px);
            transform: translateZ(0) translateY(-45px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateZ(0) translateY(-24px);
            transform: translateZ(0) translateY(-24px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateZ(0) translateY(-12px);
            transform: translateZ(0) translateY(-12px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateZ(0) translateY(-6px);
            transform: translateZ(0) translateY(-6px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateZ(0) translateY(-4px);
            transform: translateZ(0) translateY(-4px);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateZ(0) translateY(0px);
            transform: translateZ(0) translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateZ(0) translateY(0px);
            transform: translateZ(0) translateY(0px);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
}

.bounce-top {
	-webkit-animation: bounce-top 0.9s ease 2.7s both;
	animation: bounce-top 0.9s ease 2.7s both;
}


/* ----------------------------------------------
 * Generated by Animista on 2025-12-3 23:5:2
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation swing-in-top-fwd
 * ----------------------------------------
 */
 @-webkit-keyframes swing-in-top-fwd {
  0% {
  -webkit-transform: translateZ(0) translateY(0) rotateX(-100deg);
          transform: translateZ(0) translateY(0) rotateX(-100deg);
  -webkit-transform-origin: top;
          transform-origin: top;
  opacity: 0;
 }
 100% {
  -webkit-transform: translateZ(0) translateY(0) rotateX(0deg);
          transform: translateZ(0) translateY(0) rotateX(0deg);
  -webkit-transform-origin: top;
          transform-origin: top;
  opacity: 1;
 }
}
@keyframes swing-in-top-fwd {
  0% {
  -webkit-transform: translateZ(0) translateY(0) rotateX(-100deg);
          transform: translateZ(0) translateY(0) rotateX(-100deg);
  -webkit-transform-origin: top;
          transform-origin: top;
  opacity: 0;
 }
 100% {
  -webkit-transform: translateZ(0) translateY(0) rotateX(0deg);
          transform: translateZ(0) translateY(0) rotateX(0deg);
  -webkit-transform-origin: top;
          transform-origin: top;
  opacity: 1;
 }
}

.swing-in-top-fwd {
	-webkit-animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 2.2s both;
	animation: swing-in-top-fwd 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275) 2.2s both;
}

/**
 * ----------------------------------------
 * animation glow-text
 * ----------------------------------------
 */
/* Glow effect - commented out
@-webkit-keyframes glow-text {
  0%, 100% {
    text-shadow:
      0 0 5px rgba(255, 250, 250, 0.6),
      0 -4px 8px rgba(255, 99, 71, 0.4),
      -4px 4px 8px rgba(255, 255, 0, 0.4),
      4px 4px 8px rgba(0, 255, 255, 0.4);
  }
  33% {
    text-shadow:
      0 0 5px rgba(255, 250, 250, 0.6),
      0 -4px 8px rgba(255, 255, 0, 0.4),
      -4px 4px 8px rgba(0, 255, 255, 0.4),
      4px 4px 8px rgba(255, 99, 71, 0.4);
  }
  66% {
    text-shadow:
      0 0 5px rgba(255, 250, 250, 0.6),
      0 -4px 8px rgba(0, 255, 255, 0.4),
      -4px 4px 8px rgba(255, 99, 71, 0.4),
      4px 4px 8px rgba(255, 255, 0, 0.4);
  }
}
@keyframes glow-text {
  0%, 100% {
    text-shadow:
      0 0 5px rgba(255, 250, 250, 0.6),
      0 -4px 8px rgba(255, 99, 71, 0.4),
      -4px 4px 8px rgba(255, 255, 0, 0.4),
      4px 4px 8px rgba(0, 255, 255, 0.4);
  }
  33% {
    text-shadow:
      0 0 5px rgba(255, 250, 250, 0.6),
      0 -4px 8px rgba(255, 255, 0, 0.4),
      -4px 4px 8px rgba(0, 255, 255, 0.4),
      4px 4px 8px rgba(255, 99, 71, 0.4);
  }
  66% {
    text-shadow:
      0 0 5px rgba(255, 250, 250, 0.6),
      0 -4px 8px rgba(0, 255, 255, 0.4),
      -4px 4px 8px rgba(255, 99, 71, 0.4),
      4px 4px 8px rgba(255, 255, 0, 0.4);
  }
}

.feed_loading_container .total_apps.glow-active span {
    animation: glow-text 2s ease-in-out both infinite;
}

.feed_loading_container .total_apps.glow-active span:nth-child(1) { animation-delay: -0.133s; }
.feed_loading_container .total_apps.glow-active span:nth-child(2) { animation-delay: -0.267s; }
.feed_loading_container .total_apps.glow-active span:nth-child(3) { animation-delay: -0.4s; }
.feed_loading_container .total_apps.glow-active span:nth-child(4) { animation-delay: -0.533s; }
.feed_loading_container .total_apps.glow-active span:nth-child(5) { animation-delay: -0.667s; }
.feed_loading_container .total_apps.glow-active span:nth-child(6) { animation-delay: -0.8s; }
.feed_loading_container .total_apps.glow-active span:nth-child(7) { animation-delay: -0.933s; }
.feed_loading_container .total_apps.glow-active span:nth-child(8) { animation-delay: -1.067s; }
.feed_loading_container .total_apps.glow-active span:nth-child(9) { animation-delay: -1.2s; }
.feed_loading_container .total_apps.glow-active span:nth-child(10) { animation-delay: -1.333s; }
.feed_loading_container .total_apps.glow-active span:nth-child(11) { animation-delay: -1.467s; }
.feed_loading_container .total_apps.glow-active span:nth-child(12) { animation-delay: -1.6s; }
.feed_loading_container .total_apps.glow-active span:nth-child(13) { animation-delay: -1.733s; }
.feed_loading_container .total_apps.glow-active span:nth-child(14) { animation-delay: -1.867s; }
.feed_loading_container .total_apps.glow-active span:nth-child(15) { animation-delay: -2s; }
*/

/* App Detail Drawer - Credit Breakdown */
.app-detail-credit-breakdown {
  margin: 16px 16px 12px 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
}

.app-detail-credit-breakdown .credit-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
}

.app-detail-credit-breakdown .credit-breakdown-row.credit-row {
  color: #10b981;
}

.app-detail-credit-breakdown .credit-breakdown-row.total-row {
  padding-top: 10px;
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.app-detail-credit-breakdown .credit-label {
  flex: 1;
}

.app-detail-credit-breakdown .credit-value {
  font-weight: 500;
}

.app-detail-credit-breakdown .credit-highlight {
  color: #10b981;
  font-weight: 700;
}

/* Light mode support */
body.light_mode .app-detail-credit-breakdown {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.1);
}

body.light_mode .app-detail-credit-breakdown .credit-breakdown-row {
  color: rgba(0, 0, 0, 0.7);
}

body.light_mode .app-detail-credit-breakdown .credit-breakdown-row.total-row {
  border-top-color: rgba(0, 0, 0, 0.15);
  color: rgba(0, 0, 0, 0.9);
}

/* Additional light mode overrides for common elements */
body.light_mode body {
  color: #111827;
  background-color: #ffffff;
}

body.light_mode .full-screen-wrapper {
  background: #ffffff;
}

body.light_mode .full-screen-wrapper--page {
  background: transparent;
}

body.light_mode .os-home-layer {
  background: #ffffff;
}

body.light_mode .sd_info_drawer_app_name {
  color: #111827;
}

body.light_mode .sd_info_drawer_explanation {
  color: #6b7280;
}

body.light_mode .sd_info_drawer_btn_secondary {
  color: #6b7280;
  border-color: #d1d5db;
}

body.light_mode .ai_info_drawer_app_name {
  color: #111827;
}

body.light_mode .ai_info_drawer_explanation {
  color: #6b7280;
}

body.light_mode .ai_info_drawer_btn_secondary {
  color: #6b7280;
  border-color: #d1d5db;
}/* ============================================================================
   Toast Notification Styles
   iOS-style notifications with dark mode default and light mode support
   ============================================================================ */

/* CSS Variables - Dark Mode (Default) */
:root {
  --toast-bg: rgba(28, 28, 30, 0.95);
  --toast-bg-hover: rgba(28, 28, 30, 1);
  --toast-text: #ffffff;
  --toast-text-secondary: rgba(255, 255, 255, 0.6);
  --toast-icon: #ffffff;
  --toast-icon-bg: rgba(255, 255, 255, 0.2);
  --toast-shadow: rgba(0, 0, 0, 0.4);
  --toast-shadow-hover: rgba(0, 0, 0, 0.5);
  --toast-close-button: rgba(255, 255, 255, 0.5);
  --toast-close-button-hover: rgba(255, 255, 255, 0.9);
  --toast-close-button-bg-hover: rgba(255, 255, 255, 0.15);
  
  /* Spacing */
  --toast-padding-x: 16px;
  --toast-padding-y: 14px;
  --toast-gap: 8px;
  --toast-icon-size: 32px;
  --toast-icon-gap: 12px;
  --toast-border-radius: 14px;
  --toast-max-width: 400px;
  
  /* Blur */
  --toast-blur: 30px;
}

/* Light Mode Overrides */
body.light_mode {
  --toast-bg: rgba(28, 28, 30, 0.88);
  --toast-bg-hover: rgba(28, 28, 30, 0.95);
  --toast-text: #ffffff;
  --toast-text-secondary: rgba(255, 255, 255, 0.6);
  --toast-icon: #ffffff;
  --toast-icon-bg: rgba(255, 255, 255, 0.2);
  --toast-shadow: rgba(0, 0, 0, 0.18);
  --toast-shadow-hover: rgba(0, 0, 0, 0.25);
  --toast-close-button: rgba(255, 255, 255, 0.5);
  --toast-close-button-hover: rgba(255, 255, 255, 0.9);
  --toast-close-button-bg-hover: rgba(255, 255, 255, 0.15);
}

/* Additional light mode overrides for toast elements */
body.light_mode .toast {
  color: #ffffff;
  background: rgba(28, 28, 30, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 8px 24px rgba(0, 0, 0, 0.10);
}

body.light_mode .toast__icon-container {
  color: #ffffff;
}

body.light_mode .fallback-avatar {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

body.light_mode .toast {
  background: #dbdbdb7d;
  color: #111827;
}

body.light_mode .toast__message {
  color: #000000;
}

body.light_mode .toast__message--dm .toast__message-body {
  color: rgba(255, 255, 255, 0.6);
}

body.light_mode .toast__close-button {
  color: rgba(255, 255, 255, 0.5);
}

/* Toast Container */
.toast-container {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  top: calc(10px + var(--safe-top));
  z-index: 999999;
  pointer-events: none;
  width: max-content;
  max-width: var(--toast-max-width);
  max-width: calc(100% - 78px);
  padding: 0 16px;
}

body.android .toast-container {
  top: 20px;
}

.toast-container__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--toast-gap);
  pointer-events: auto;
}

/* Base Toast Styles */
.toast {
  position: relative;
  display: flex;
  gap: 5px;
  align-items: center;
  width: 100%;
  margin-bottom: var(--toast-gap);
  color: white;
  border-radius: 23px;
  line-height: 20px;
  /* Swipe animation optimizations for iOS */
  --swipe-x: 0px;
  transform: translateX(var(--swipe-x)) translateY(-100%) scale(0.98);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  transform-origin: top center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
  backdrop-filter: blur(6px);
  border: 1px solid #ffffff1a;
  /* background: rgb(255 255 255 / 10%); */
  background: rgba(0, 0, 0, 0.4);
  padding: 8px 11px 8px 7px;
  font-weight: 600;
}

/* Toast Visibility States */
.toast--visible {
  transform: translateX(var(--swipe-x)) translateY(0) scale(1);
  opacity: 1;
}

.toast--leaving {
  transform: translateX(var(--swipe-x)) translateY(-100%) scale(0.98);
  opacity: 0;
}

/* Swipe dismissal - no slide-up, just fade out horizontally */
.toast--leaving-swipe {
  transform: translateX(var(--swipe-x)) translateY(0) scale(1);
  opacity: 0;
}

/* Disable transition during active swipe */
.toast.swiping {
  transition: none;
}

/* Clickable Toast */
.toast--clickable {
  cursor: pointer;
}

.toast:active {
  opacity: 0.6;
}

/* Type Modifiers - No colored borders, clean iOS-style */

/* Icon Container - matches notification-avatar */
.toast__icon-container {
  width: 20px;
  height: 20px;
  border-radius: 9px;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* Custom Icon - matches notification-avatar */
.toast__custom-icon {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  margin-right: 15px;
  flex-shrink: 0;
  overflow: hidden;
}

.toast__custom-icon-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.toast__custom-icon-img--hidden {
  display: none;
}

/* Fallback Avatar - matches notification fallback-avatar */
.fallback-avatar {
  width: 100%;
  height: 100%;
  background: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
  border-radius: 50%;
}

/* Status Icon SVG */
.toast__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Icons use neutral colors (iOS-style) - no type-specific coloring */

/* Message Container - matches notification-content */
.toast__message {
  flex: 1;
  min-width: 0;
  color: white;
}

.toast__message-text {
  font-size: 15px;
}

/* DM Message Formatting */
.toast__message--dm .toast__message-sender {
  font-weight: bold;
  max-width: calc(100% - 70px);
  margin-bottom: 6px;
}

.toast__message--dm .toast__message-body {
  color: rgba(255, 255, 255, 0.6);
}

/* Close Button */
.toast__close-button {
  position: absolute;
  top: 12px;
  right: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.6);
  background: transparent;
  border: none;
  border-radius: 50%;
  padding: 4px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
  line-height: 1;
  z-index: 1;
  display: none; /* No visible X buttons on toasts */
}

.toast__close-button:focus {
  outline: none;
}

.toast__close-button svg {
  width: 16px;
  height: 16px;
  display: block;
}/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color`
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: var(--un-default-border-color, #e5e7eb); /* 2 */
}

::before,
::after {
  --un-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS.
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/*
Make elements with the HTML hidden attribute stay hidden by default.
*/

[hidden] {
  display: none;
}/* layer: preflights */
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / 0.5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: ;}
:root {
  --primary-100: #7ba9f9;
  --primary-200: #007AFF;
  --primary-300: #0056CC;
  --secondary-100: #f66659;
  --secondary-200: #f44237;
  --secondary-300: #d1251a;
  --white-100: #ffffff;
  --white-200: #f8f9fa;
  --white-300: #e9ecef;
  --black-100: #6c757d;
  --black-200: #495057;
  --black-300: #000000;
  --gray-100: #fafafa;
  --gray-200: #f5f5f5;
  --gray-300: #eeeeee;
}
/* layer: shortcuts */
.container{margin-left:auto;margin-right:auto;max-width:80rem;padding-left:1rem;padding-right:1rem;}
.input{width:100%;border-width:1px;border-radius:0.5rem;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;border-color:#e9ecef;}
.btn{cursor:pointer;border-radius:0.5rem;border-style:none;padding-left:1rem;padding-right:1rem;padding-top:0.5rem;padding-bottom:0.5rem;font-weight:500;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:200ms;}
.btn-primary{cursor:pointer;border-radius:0.5rem;border-style:none;padding-left:1rem;padding-right:1rem;padding-top:0.5rem;padding-bottom:0.5rem;font-weight:500;transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;transition-duration:200ms;background-color:#007AFF;color:#ffffff;}
.card{border-width:1px;border-radius:0.5rem;padding:1.5rem;--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);background-color:#ffffff;border-color:#e9ecef;}
.input:focus{outline:2px solid transparent;outline-offset:2px;--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);--un-ring-opacity:1;--un-ring-color:rgb(0 122 255 / var(--un-ring-opacity));}
.btn-primary:hover{background-color:#0056CC;}
.btn-primary:focus{background-color:#0056CC;}
@media (min-width: 640px){
.container{padding-left:1.5rem;padding-right:1.5rem;}
}
@media (min-width: 1024px){
.container{padding-left:2rem;padding-right:2rem;}
}
/* layer: default */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}
.pointer-events-none{pointer-events:none;}
.visible,
.group:hover .group-hover\:visible{visibility:visible;}
.invisible{visibility:hidden;}
.absolute,
.position-absolute{position:absolute;}
.fixed{position:fixed;}
.relative{position:relative;}
.sticky{position:sticky;}
.static{position:static;}
.inset-0{inset:0;}
.inset-x-0{left:0;right:0;}
.inset-y-0{top:0;bottom:0;}
.-bottom-1{bottom:-0.25rem;}
.-bottom-8{bottom:-2rem;}
.-right-1{right:-0.25rem;}
.-top-1{top:-0.25rem;}
.bottom-4{bottom:1rem;}
.bottom-6{bottom:1.5rem;}
.left-0{left:0;}
.left-1\/2{left:50%;}
.left-3{left:0.75rem;}
.left-4{left:1rem;}
.right-0{right:0;}
.right-2{right:0.5rem;}
.right-4{right:1rem;}
.right-6{right:1.5rem;}
.top-0{top:0;}
.top-1\/2{top:50%;}
.top-16{top:4rem;}
.top-2{top:0.5rem;}
.top-3{top:0.75rem;}
.top-4{top:1rem;}
.z-\[999999\]{z-index:999999;}
.z-10{z-index:10;}
.z-30{z-index:30;}
.z-40{z-index:40;}
.z-50{z-index:50;}
.grid{display:grid;}
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr));}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.m12{margin:3rem;}
.m15{margin:3.75rem;}
.m4{margin:1rem;}
.-mx-4{margin-left:-1rem;margin-right:-1rem;}
.mx-4{margin-left:1rem;margin-right:1rem;}
.mx-auto{margin-left:auto;margin-right:auto;}
.my{margin-top:1rem;margin-bottom:1rem;}
.my-2{margin-top:0.5rem;margin-bottom:0.5rem;}
.my-6{margin-top:1.5rem;margin-bottom:1.5rem;}
.mb-0\.5{margin-bottom:0.125rem;}
.mb-1{margin-bottom:0.25rem;}
.mb-2{margin-bottom:0.5rem;}
.mb-3,
.group[open] .group-open\:mb-3{margin-bottom:0.75rem;}
.mb-4{margin-bottom:1rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-8{margin-bottom:2rem;}
.me{margin-inline-end:1rem;}
.ml,
.ml-4{margin-left:1rem;}
.ml-1{margin-left:0.25rem;}
.ml-2{margin-left:0.5rem;}
.ml-3{margin-left:0.75rem;}
.ml-6{margin-left:1.5rem;}
.ml-auto{margin-left:auto;}
.mr{margin-right:1rem;}
.mr-1{margin-right:0.25rem;}
.mr-2{margin-right:0.5rem;}
.mr-3{margin-right:0.75rem;}
.ms{margin-inline-start:1rem;}
.msa{margin-inline-start:auto;}
.mt,
.mt-4{margin-top:1rem;}
.mt-0{margin-top:0;}
.mt-0\.5{margin-top:0.125rem;}
.mt-1{margin-top:0.25rem;}
.mt-2{margin-top:0.5rem;}
.mt-2\.5{margin-top:0.625rem;}
.mt-3{margin-top:0.75rem;}
.mt-6{margin-top:1.5rem;}
.mt-8{margin-top:2rem;}
.inline{display:inline;}
.block{display:block;}
.inline-block{display:inline-block;}
.contents{display:contents;}
.hidden{display:none;}
.aspect-\[3\/5\]{aspect-ratio:3/5;}
.h-\[100dvh\]{height:100dvh;}
.h-\[600px\]{height:600px;}
.h-\[640px\]{height:640px;}
.h-1{height:0.25rem;}
.h-10{height:2.5rem;}
.h-12{height:3rem;}
.h-14{height:3.5rem;}
.h-16{height:4rem;}
.h-2{height:0.5rem;}
.h-3{height:0.75rem;}
.h-3\.5{height:0.875rem;}
.h-4{height:1rem;}
.h-40{height:10rem;}
.h-5{height:1.25rem;}
.h-6{height:1.5rem;}
.h-8{height:2rem;}
.h-96{height:24rem;}
.h-full{height:100%;}
.h-px{height:1px;}
.h-screen{height:100vh;}
.max-h-\[40vh\]{max-height:40vh;}
.max-h-\[600px\]{max-height:600px;}
.max-h-\[90vh\]{max-height:90vh;}
.max-h-20{max-height:5rem;}
.max-h-24{max-height:6rem;}
.max-h-32{max-height:8rem;}
.max-h-40{max-height:10rem;}
.max-h-64{max-height:16rem;}
.max-h-96{max-height:24rem;}
.max-h-screen{max-height:100vh;}
.max-w-\[300px\]{max-width:300px;}
.max-w-\[320px\]{max-width:320px;}
.max-w-24{max-width:6rem;}
.max-w-2xl{max-width:42rem;}
.max-w-3xl{max-width:48rem;}
.max-w-4xl{max-width:56rem;}
.max-w-5xl{max-width:64rem;}
.max-w-60{max-width:15rem;}
.max-w-6xl{max-width:72rem;}
.max-w-7xl{max-width:80rem;}
.max-w-full{max-width:100%;}
.max-w-md{max-width:28rem;}
.max-w-sm{max-width:24rem;}
.max-w-xs{max-width:20rem;}
.min-h-\[600px\]{min-height:600px;}
.min-h-10{min-height:2.5rem;}
.min-h-32{min-height:8rem;}
.min-h-screen{min-height:100vh;}
.min-w-\[60px\]{min-width:60px;}
.min-w-0{min-width:0;}
.min-w-full{min-width:100%;}
.w-10{width:2.5rem;}
.w-100{width:25rem;}
.w-11\/12{width:91.6666666667%;}
.w-12{width:3rem;}
.w-14{width:3.5rem;}
.w-16{width:4rem;}
.w-2{width:0.5rem;}
.w-24{width:6rem;}
.w-3{width:0.75rem;}
.w-3\.5{width:0.875rem;}
.w-32{width:8rem;}
.w-4{width:1rem;}
.w-40{width:10rem;}
.w-48{width:12rem;}
.w-5{width:1.25rem;}
.w-6{width:1.5rem;}
.w-64{width:16rem;}
.w-8{width:2rem;}
.w-80{width:20rem;}
.w-full{width:100%;}
.flex{display:flex;}
.inline-flex{display:inline-flex;}
.flex-1{flex:1 1 0%;}
.flex-shrink,
.shrink-to-fit\=no{flex-shrink:1;}
.flex-shrink-0,
.shrink-0{flex-shrink:0;}
.flex-col{flex-direction:column;}
.flex-wrap{flex-wrap:wrap;}
.table{display:table;}
.-translate-x-1\/2{--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.-translate-x-full{--un-translate-x:-100%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.-translate-y-1\/2{--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.translate-x-0{--un-translate-x:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.hover\:-translate-y-0\.5:hover{--un-translate-y:-0.125rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.rotate-0{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.rotate-12{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:12deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.rotate-90{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:90deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.scale-0{--un-scale-x:0;--un-scale-y:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.scale-100{--un-scale-x:1;--un-scale-y:1;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.scale-95{--un-scale-x:0.95;--un-scale-y:0.95;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.hover\:scale-105:hover{--un-scale-x:1.05;--un-scale-y:1.05;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
@keyframes bounce{0%, 100% {transform:translateY(-25%);animation-timing-function:cubic-bezier(0.8,0,1,1)} 50% {transform:translateY(0);animation-timing-function:cubic-bezier(0,0,0.2,1)}}
@keyframes pulse{0%, 100% {opacity:1} 50% {opacity:.5}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.animate-\[bounce_1s_ease-in-out_infinite\]{animation:bounce 1s ease-in-out infinite;}
.animate-\[float_3s_ease-in-out_infinite\]{animation:float 3s ease-in-out infinite;}
.animate-\[glow_2s_ease-in-out_infinite\]{animation:glow 2s ease-in-out infinite;}
.animate-\[shimmer_2s_linear_infinite\]{animation:shimmer 2s linear infinite;}
.animate-bounce{animation:bounce 1s linear infinite;}
.animate-pulse{animation:pulse 2s cubic-bezier(0.4,0,.6,1) infinite;}
.animate-spin{animation:spin 1s linear infinite;}
.cursor-pointer{cursor:pointer;}
.cursor-not-allowed{cursor:not-allowed;}
.disabled\:cursor-not-allowed:disabled{cursor:not-allowed;}
.cursor-grab{cursor:grab;}
.active\:cursor-grabbing:active{cursor:grabbing;}
.select-none{-webkit-user-select:none;user-select:none;}
.resize-y{resize:vertical;}
.resize{resize:both;}
.resize-none{resize:none;}
.list-disc{list-style-type:disc;}
.list-inside{list-style-position:inside;}
.items-start{align-items:flex-start;}
.items-center{align-items:center;}
.items-baseline{align-items:baseline;}
.justify-start{justify-content:flex-start;}
.justify-end{justify-content:flex-end;}
.justify-center{justify-content:center;}
.justify-between{justify-content:space-between;}
.gap-1{gap:0.25rem;}
.gap-2{gap:0.5rem;}
.gap-3{gap:0.75rem;}
.gap-4{gap:1rem;}
.gap-5{gap:1.25rem;}
.gap-6{gap:1.5rem;}
.gap-8{gap:2rem;}
.gap-x-4{column-gap:1rem;}
.gap-y-1{row-gap:0.25rem;}
.gap-y-2{row-gap:0.5rem;}
.space-x-1>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(0.25rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(0.25rem * var(--un-space-x-reverse));}
.space-x-2>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(0.5rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(0.5rem * var(--un-space-x-reverse));}
.space-x-3>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(0.75rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(0.75rem * var(--un-space-x-reverse));}
.space-x-4>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(1rem * var(--un-space-x-reverse));}
.space-x-6>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(1.5rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(1.5rem * var(--un-space-x-reverse));}
.space-x-8>:not([hidden])~:not([hidden]){--un-space-x-reverse:0;margin-left:calc(2rem * calc(1 - var(--un-space-x-reverse)));margin-right:calc(2rem * var(--un-space-x-reverse));}
.space-y-0\.5>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.125rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.125rem * var(--un-space-y-reverse));}
.space-y-1>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.25rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.25rem * var(--un-space-y-reverse));}
.space-y-2>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.5rem * var(--un-space-y-reverse));}
.space-y-3>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(0.75rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(0.75rem * var(--un-space-y-reverse));}
.space-y-4>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1rem * var(--un-space-y-reverse));}
.space-y-6>:not([hidden])~:not([hidden]){--un-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--un-space-y-reverse)));margin-bottom:calc(1.5rem * var(--un-space-y-reverse));}
.divide-y>:not([hidden])~:not([hidden]){--un-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(--un-divide-y-reverse)));border-bottom-width:calc(1px * var(--un-divide-y-reverse));}
.divide-gray-100>:not([hidden])~:not([hidden]){--un-divide-opacity:1;border-color:rgb(250 250 250 / var(--un-divide-opacity));}
.divide-gray-200>:not([hidden])~:not([hidden]){--un-divide-opacity:1;border-color:rgb(245 245 245 / var(--un-divide-opacity));}
.overflow-auto{overflow:auto;}
.overflow-hidden{overflow:hidden;}
.overflow-x-auto{overflow-x:auto;}
.overflow-y-auto{overflow-y:auto;}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.whitespace-nowrap{white-space:nowrap;}
.whitespace-pre{white-space:pre;}
.whitespace-pre-wrap{white-space:pre-wrap;}
.break-all{word-break:break-all;}
.border{border-width:1px;}
.border-0{border-width:0px;}
.border-2{border-width:2px;}
.border-4{border-width:4px;}
.border-b{border-bottom-width:1px;}
.border-b-2{border-bottom-width:2px;}
.border-l{border-left-width:1px;}
.border-l-2{border-left-width:2px;}
.border-l-4{border-left-width:4px;}
.border-r{border-right-width:1px;}
.border-t{border-top-width:1px;}
.border-t-2{border-top-width:2px;}
.border-blue-200{--un-border-opacity:1;border-color:rgb(191 219 254 / var(--un-border-opacity));}
.border-blue-300{--un-border-opacity:1;border-color:rgb(147 197 253 / var(--un-border-opacity));}
.border-blue-400{--un-border-opacity:1;border-color:rgb(96 165 250 / var(--un-border-opacity));}
.border-blue-500{--un-border-opacity:1;border-color:rgb(59 130 246 / var(--un-border-opacity));}
.border-blue-600{--un-border-opacity:1;border-color:rgb(37 99 235 / var(--un-border-opacity));}
.border-emerald-200{--un-border-opacity:1;border-color:rgb(167 243 208 / var(--un-border-opacity));}
.border-gray-700,
.dark .dark\:border-gray-700{--un-border-opacity:1;border-color:rgb(55 65 81 / var(--un-border-opacity));}
.border-green-100{--un-border-opacity:1;border-color:rgb(220 252 231 / var(--un-border-opacity));}
.border-green-200{--un-border-opacity:1;border-color:rgb(187 247 208 / var(--un-border-opacity));}
.border-green-300{--un-border-opacity:1;border-color:rgb(134 239 172 / var(--un-border-opacity));}
.border-green-600{--un-border-opacity:1;border-color:rgb(22 163 74 / var(--un-border-opacity));}
.border-indigo-100{--un-border-opacity:1;border-color:rgb(224 231 255 / var(--un-border-opacity));}
.border-indigo-200{--un-border-opacity:1;border-color:rgb(199 210 254 / var(--un-border-opacity));}
.border-indigo-300{--un-border-opacity:1;border-color:rgb(165 180 252 / var(--un-border-opacity));}
.border-indigo-500{--un-border-opacity:1;border-color:rgb(99 102 241 / var(--un-border-opacity));}
.border-indigo-600{--un-border-opacity:1;border-color:rgb(79 70 229 / var(--un-border-opacity));}
.border-orange-200{--un-border-opacity:1;border-color:rgb(254 215 170 / var(--un-border-opacity));}
.border-orange-500{--un-border-opacity:1;border-color:rgb(249 115 22 / var(--un-border-opacity));}
.border-purple-100{--un-border-opacity:1;border-color:rgb(243 232 255 / var(--un-border-opacity));}
.border-purple-200{--un-border-opacity:1;border-color:rgb(233 213 255 / var(--un-border-opacity));}
.border-purple-300{--un-border-opacity:1;border-color:rgb(216 180 254 / var(--un-border-opacity));}
.border-red-200{--un-border-opacity:1;border-color:rgb(254 202 202 / var(--un-border-opacity));}
.border-red-300{--un-border-opacity:1;border-color:rgb(252 165 165 / var(--un-border-opacity));}
.border-red-400{--un-border-opacity:1;border-color:rgb(248 113 113 / var(--un-border-opacity));}
.border-red-500{--un-border-opacity:1;border-color:rgb(239 68 68 / var(--un-border-opacity));}
.border-slate-100{--un-border-opacity:1;border-color:rgb(241 245 249 / var(--un-border-opacity));}
.border-slate-200{--un-border-opacity:1;border-color:rgb(226 232 240 / var(--un-border-opacity));}
.border-slate-700{--un-border-opacity:1;border-color:rgb(51 65 85 / var(--un-border-opacity));}
.border-transparent{border-color:transparent;}
.border-yellow-200{--un-border-opacity:1;border-color:rgb(254 240 138 / var(--un-border-opacity));}
.border-yellow-400{--un-border-opacity:1;border-color:rgb(250 204 21 / var(--un-border-opacity));}
.border-yellow-600{--un-border-opacity:1;border-color:rgb(202 138 4 / var(--un-border-opacity));}
.hover\:border-blue-300:hover{--un-border-opacity:1;border-color:rgb(147 197 253 / var(--un-border-opacity));}
.hover\:border-blue-400:hover{--un-border-opacity:1;border-color:rgb(96 165 250 / var(--un-border-opacity));}
.hover\:border-indigo-200:hover{--un-border-opacity:1;border-color:rgb(199 210 254 / var(--un-border-opacity));}
.hover\:border-indigo-300:hover{--un-border-opacity:1;border-color:rgb(165 180 252 / var(--un-border-opacity));}
.hover\:border-indigo-400:hover{--un-border-opacity:1;border-color:rgb(129 140 248 / var(--un-border-opacity));}
.hover\:border-purple-400:hover{--un-border-opacity:1;border-color:rgb(192 132 252 / var(--un-border-opacity));}
.hover\:border-red-500:hover{--un-border-opacity:1;border-color:rgb(239 68 68 / var(--un-border-opacity));}
.focus\:border-indigo-500:focus{--un-border-opacity:1;border-color:rgb(99 102 241 / var(--un-border-opacity));}
.focus\:border-transparent:focus{border-color:transparent;}
.border-l-blue-500{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgb(59 130 246 / var(--un-border-left-opacity));}
.border-l-orange-500{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgb(249 115 22 / var(--un-border-left-opacity));}
.border-l-red-500{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgb(239 68 68 / var(--un-border-left-opacity));}
.border-t-transparent{border-top-color:transparent;}
.rounded{border-radius:0.25rem;}
.rounded-\[2\.5rem\]{border-radius:2.5rem;}
.rounded-\[3rem\]{border-radius:3rem;}
.rounded-2xl{border-radius:1rem;}
.rounded-3,
.rounded-xl{border-radius:0.75rem;}
.rounded-3xl{border-radius:1.5rem;}
.rounded-full{border-radius:9999px;}
.rounded-lg{border-radius:0.5rem;}
.rounded-md{border-radius:0.375rem;}
.rounded-b-2xl{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem;}
.rounded-r-lg{border-top-right-radius:0.5rem;border-bottom-right-radius:0.5rem;}
.border-dashed{border-style:dashed;}
.border-none{border-style:none;}
.bg-amber-100{--un-bg-opacity:1;background-color:rgb(254 243 199 / var(--un-bg-opacity));}
.bg-blue-100{--un-bg-opacity:1;background-color:rgb(219 234 254 / var(--un-bg-opacity));}
.bg-blue-50{--un-bg-opacity:1;background-color:rgb(239 246 255 / var(--un-bg-opacity));}
.bg-blue-500{--un-bg-opacity:1;background-color:rgb(59 130 246 / var(--un-bg-opacity));}
.bg-blue-600{--un-bg-opacity:1;background-color:rgb(37 99 235 / var(--un-bg-opacity));}
.bg-dark-300{--un-bg-opacity:1;background-color:rgb(45 45 45 / var(--un-bg-opacity));}
.bg-emerald-100{--un-bg-opacity:1;background-color:rgb(209 250 229 / var(--un-bg-opacity));}
.bg-gray-50{--un-bg-opacity:1;background-color:rgb(249 250 251 / var(--un-bg-opacity));}
.bg-gray-500{--un-bg-opacity:1;background-color:rgb(107 114 128 / var(--un-bg-opacity));}
.bg-gray-600{--un-bg-opacity:1;background-color:rgb(75 85 99 / var(--un-bg-opacity));}
.bg-gray-700,
.dark .dark\:bg-gray-700{--un-bg-opacity:1;background-color:rgb(55 65 81 / var(--un-bg-opacity));}
.bg-gray-800,
.dark .dark\:bg-gray-800{--un-bg-opacity:1;background-color:rgb(31 41 55 / var(--un-bg-opacity));}
.bg-gray-900,
.dark .dark\:bg-gray-900{--un-bg-opacity:1;background-color:rgb(17 24 39 / var(--un-bg-opacity));}
.bg-green-100{--un-bg-opacity:1;background-color:rgb(220 252 231 / var(--un-bg-opacity));}
.bg-green-50{--un-bg-opacity:1;background-color:rgb(240 253 244 / var(--un-bg-opacity));}
.bg-green-500{--un-bg-opacity:1;background-color:rgb(34 197 94 / var(--un-bg-opacity));}
.bg-green-600{--un-bg-opacity:1;background-color:rgb(22 163 74 / var(--un-bg-opacity));}
.bg-indigo-100{--un-bg-opacity:1;background-color:rgb(224 231 255 / var(--un-bg-opacity));}
.bg-indigo-400{--un-bg-opacity:1;background-color:rgb(129 140 248 / var(--un-bg-opacity));}
.bg-indigo-50{--un-bg-opacity:1;background-color:rgb(238 242 255 / var(--un-bg-opacity));}
.bg-indigo-600{--un-bg-opacity:1;background-color:rgb(79 70 229 / var(--un-bg-opacity));}
.bg-orange-100{--un-bg-opacity:1;background-color:rgb(255 237 213 / var(--un-bg-opacity));}
.bg-orange-50{--un-bg-opacity:1;background-color:rgb(255 247 237 / var(--un-bg-opacity));}
.bg-pink-100{--un-bg-opacity:1;background-color:rgb(252 231 243 / var(--un-bg-opacity));}
.bg-purple-100{--un-bg-opacity:1;background-color:rgb(243 232 255 / var(--un-bg-opacity));}
.bg-purple-50{--un-bg-opacity:1;background-color:rgb(250 245 255 / var(--un-bg-opacity));}
.bg-purple-600{--un-bg-opacity:1;background-color:rgb(147 51 234 / var(--un-bg-opacity));}
.bg-red-100{--un-bg-opacity:1;background-color:rgb(254 226 226 / var(--un-bg-opacity));}
.bg-red-50{--un-bg-opacity:1;background-color:rgb(254 242 242 / var(--un-bg-opacity));}
.bg-red-500{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));}
.bg-red-600{--un-bg-opacity:1;background-color:rgb(220 38 38 / var(--un-bg-opacity));}
.bg-slate-100{--un-bg-opacity:1;background-color:rgb(241 245 249 / var(--un-bg-opacity));}
.bg-slate-50{--un-bg-opacity:1;background-color:rgb(248 250 252 / var(--un-bg-opacity));}
.bg-slate-900{--un-bg-opacity:1;background-color:rgb(15 23 42 / var(--un-bg-opacity));}
.bg-transparent{background-color:transparent;}
.bg-yellow-100{--un-bg-opacity:1;background-color:rgb(254 249 195 / var(--un-bg-opacity));}
.bg-yellow-300{--un-bg-opacity:1;background-color:rgb(253 224 71 / var(--un-bg-opacity));}
.bg-yellow-50{--un-bg-opacity:1;background-color:rgb(254 252 232 / var(--un-bg-opacity));}
.bg-yellow-500{--un-bg-opacity:1;background-color:rgb(234 179 8 / var(--un-bg-opacity));}
.bg-yellow-600{--un-bg-opacity:1;background-color:rgb(202 138 4 / var(--un-bg-opacity));}
.dark .dark\:bg-blue-900{--un-bg-opacity:1;background-color:rgb(30 58 138 / var(--un-bg-opacity));}
.dark .dark\:bg-green-900{--un-bg-opacity:1;background-color:rgb(20 83 45 / var(--un-bg-opacity));}
.dark .dark\:bg-purple-900{--un-bg-opacity:1;background-color:rgb(88 28 135 / var(--un-bg-opacity));}
.dark .dark\:bg-red-900{--un-bg-opacity:1;background-color:rgb(127 29 29 / var(--un-bg-opacity));}
.dark .dark\:bg-yellow-900{--un-bg-opacity:1;background-color:rgb(113 63 18 / var(--un-bg-opacity));}
.dark .dark\:hover\:bg-gray-600:hover{--un-bg-opacity:1;background-color:rgb(75 85 99 / var(--un-bg-opacity));}
.hover\:bg-blue-100:hover{--un-bg-opacity:1;background-color:rgb(219 234 254 / var(--un-bg-opacity));}
.hover\:bg-blue-200:hover{--un-bg-opacity:1;background-color:rgb(191 219 254 / var(--un-bg-opacity));}
.hover\:bg-blue-50:hover{--un-bg-opacity:1;background-color:rgb(239 246 255 / var(--un-bg-opacity));}
.hover\:bg-blue-600:hover{--un-bg-opacity:1;background-color:rgb(37 99 235 / var(--un-bg-opacity));}
.hover\:bg-blue-700:hover{--un-bg-opacity:1;background-color:rgb(29 78 216 / var(--un-bg-opacity));}
.hover\:bg-gray-50:hover{--un-bg-opacity:1;background-color:rgb(249 250 251 / var(--un-bg-opacity));}
.hover\:bg-gray-600:hover{--un-bg-opacity:1;background-color:rgb(75 85 99 / var(--un-bg-opacity));}
.hover\:bg-gray-700:hover{--un-bg-opacity:1;background-color:rgb(55 65 81 / var(--un-bg-opacity));}
.hover\:bg-green-600:hover{--un-bg-opacity:1;background-color:rgb(22 163 74 / var(--un-bg-opacity));}
.hover\:bg-green-700:hover{--un-bg-opacity:1;background-color:rgb(21 128 61 / var(--un-bg-opacity));}
.hover\:bg-indigo-100:hover{--un-bg-opacity:1;background-color:rgb(224 231 255 / var(--un-bg-opacity));}
.hover\:bg-indigo-200:hover{--un-bg-opacity:1;background-color:rgb(199 210 254 / var(--un-bg-opacity));}
.hover\:bg-indigo-50:hover{--un-bg-opacity:1;background-color:rgb(238 242 255 / var(--un-bg-opacity));}
.hover\:bg-indigo-700:hover{--un-bg-opacity:1;background-color:rgb(67 56 202 / var(--un-bg-opacity));}
.hover\:bg-purple-200:hover{--un-bg-opacity:1;background-color:rgb(233 213 255 / var(--un-bg-opacity));}
.hover\:bg-purple-700:hover{--un-bg-opacity:1;background-color:rgb(126 34 206 / var(--un-bg-opacity));}
.hover\:bg-red-100:hover{--un-bg-opacity:1;background-color:rgb(254 226 226 / var(--un-bg-opacity));}
.hover\:bg-red-200:hover{--un-bg-opacity:1;background-color:rgb(254 202 202 / var(--un-bg-opacity));}
.hover\:bg-red-50:hover{--un-bg-opacity:1;background-color:rgb(254 242 242 / var(--un-bg-opacity));}
.hover\:bg-red-500:hover{--un-bg-opacity:1;background-color:rgb(239 68 68 / var(--un-bg-opacity));}
.hover\:bg-red-600:hover{--un-bg-opacity:1;background-color:rgb(220 38 38 / var(--un-bg-opacity));}
.hover\:bg-red-700:hover{--un-bg-opacity:1;background-color:rgb(185 28 28 / var(--un-bg-opacity));}
.hover\:bg-slate-200:hover{--un-bg-opacity:1;background-color:rgb(226 232 240 / var(--un-bg-opacity));}
.hover\:bg-yellow-600:hover{--un-bg-opacity:1;background-color:rgb(202 138 4 / var(--un-bg-opacity));}
.hover\:bg-yellow-700:hover{--un-bg-opacity:1;background-color:rgb(161 98 7 / var(--un-bg-opacity));}
.disabled\:bg-gray-400:disabled{--un-bg-opacity:1;background-color:rgb(156 163 175 / var(--un-bg-opacity));}
.disabled\:bg-yellow-400:disabled{--un-bg-opacity:1;background-color:rgb(250 204 21 / var(--un-bg-opacity));}
.bg-opacity-50{--un-bg-opacity:0.5;}
.bg-opacity-75{--un-bg-opacity:0.75;}
.bg-opacity-80{--un-bg-opacity:0.8;}
.from-blue-400{--un-gradient-from-position:0%;--un-gradient-from:rgb(96 165 250 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(96 165 250 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-blue-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(59 130 246 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(59 130 246 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-green-400{--un-gradient-from-position:0%;--un-gradient-from:rgb(74 222 128 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(74 222 128 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-indigo-50{--un-gradient-from-position:0%;--un-gradient-from:rgb(238 242 255 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(238 242 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-indigo-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(99 102 241 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(99 102 241 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-pink-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(236 72 153 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(236 72 153 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-purple-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(168 85 247 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(168 85 247 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-red-500{--un-gradient-from-position:0%;--un-gradient-from:rgb(239 68 68 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(239 68 68 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-transparent{--un-gradient-from-position:0%;--un-gradient-from:transparent var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.from-yellow-400{--un-gradient-from-position:0%;--un-gradient-from:rgb(250 204 21 / var(--un-from-opacity, 1)) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(250 204 21 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);}
.to-blue-500{--un-gradient-to-position:100%;--un-gradient-to:rgb(59 130 246 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
.to-cyan-500{--un-gradient-to-position:100%;--un-gradient-to:rgb(6 182 212 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
.to-orange-500{--un-gradient-to-position:100%;--un-gradient-to:rgb(249 115 22 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
.to-pink-500{--un-gradient-to-position:100%;--un-gradient-to:rgb(236 72 153 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
.to-purple-50{--un-gradient-to-position:100%;--un-gradient-to:rgb(250 245 255 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
.to-purple-500{--un-gradient-to-position:100%;--un-gradient-to:rgb(168 85 247 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
.to-purple-600{--un-gradient-to-position:100%;--un-gradient-to:rgb(147 51 234 / var(--un-to-opacity, 1)) var(--un-gradient-to-position);}
.to-transparent{--un-gradient-to-position:100%;--un-gradient-to:transparent var(--un-gradient-to-position);}
.bg-gradient-to-br{--un-gradient-shape:to bottom right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
.bg-gradient-to-r{--un-gradient-shape:to right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));}
.object-cover{object-fit:cover;}
.object-contain{object-fit:contain;}
.p-1{padding:0.25rem;}
.p-10{padding:2.5rem;}
.p-12{padding:3rem;}
.p-2{padding:0.5rem;}
.p-3{padding:0.75rem;}
.p-4{padding:1rem;}
.p-5{padding:1.25rem;}
.p-6{padding:1.5rem;}
.p-8{padding:2rem;}
.pa{padding:auto;}
.px,
.px-4{padding-left:1rem;padding-right:1rem;}
.px-1{padding-left:0.25rem;padding-right:0.25rem;}
.px-1\.5{padding-left:0.375rem;padding-right:0.375rem;}
.px-16{padding-left:4rem;padding-right:4rem;}
.px-2{padding-left:0.5rem;padding-right:0.5rem;}
.px-2\.5{padding-left:0.625rem;padding-right:0.625rem;}
.px-3{padding-left:0.75rem;padding-right:0.75rem;}
.px-5{padding-left:1.25rem;padding-right:1.25rem;}
.px-6{padding-left:1.5rem;padding-right:1.5rem;}
.px-8{padding-left:2rem;padding-right:2rem;}
.py-0\.5{padding-top:0.125rem;padding-bottom:0.125rem;}
.py-1{padding-top:0.25rem;padding-bottom:0.25rem;}
.py-1\.5{padding-top:0.375rem;padding-bottom:0.375rem;}
.py-12{padding-top:3rem;padding-bottom:3rem;}
.py-16{padding-top:4rem;padding-bottom:4rem;}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem;}
.py-2\.5{padding-top:0.625rem;padding-bottom:0.625rem;}
.py-3{padding-top:0.75rem;padding-bottom:0.75rem;}
.py-3\.5{padding-top:0.875rem;padding-bottom:0.875rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem;}
.py-8{padding-top:2rem;padding-bottom:2rem;}
.pb,
.pb-4{padding-bottom:1rem;}
.pl,
.pl-4{padding-left:1rem;}
.pl-10{padding-left:2.5rem;}
.pr-1{padding-right:0.25rem;}
.pr-4{padding-right:1rem;}
.ps{padding-inline-start:1rem;}
.pt,
.pt-4{padding-top:1rem;}
.pt-2{padding-top:0.5rem;}
.pt-6{padding-top:1.5rem;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}
.text-\[10px\]{font-size:10px;}
.text-\[11px\]{font-size:11px;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-3xl{font-size:1.875rem;line-height:2.25rem;}
.text-4xl{font-size:2.25rem;line-height:2.5rem;}
.text-6xl{font-size:3.75rem;line-height:1;}
.text-7xl{font-size:4.5rem;line-height:1;}
.text-base{font-size:1rem;line-height:1.5rem;}
.text-lg{font-size:1.125rem;line-height:1.75rem;}
.text-sm{font-size:0.875rem;line-height:1.25rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-xs{font-size:0.75rem;line-height:1rem;}
.font-size-5{font-size:1.25rem;}
.dark .dark\:text-gray-400,
.text-gray-400{--un-text-opacity:1;color:rgb(156 163 175 / var(--un-text-opacity));}
.dark .dark\:text-red-400{--un-text-opacity:1;color:rgb(248 113 113 / var(--un-text-opacity));}
.text-amber-800{--un-text-opacity:1;color:rgb(146 64 14 / var(--un-text-opacity));}
.text-blue-500{--un-text-opacity:1;color:rgb(59 130 246 / var(--un-text-opacity));}
.text-blue-600{--un-text-opacity:1;color:rgb(37 99 235 / var(--un-text-opacity));}
.text-blue-700{--un-text-opacity:1;color:rgb(29 78 216 / var(--un-text-opacity));}
.text-blue-800{--un-text-opacity:1;color:rgb(30 64 175 / var(--un-text-opacity));}
.text-blue-900{--un-text-opacity:1;color:rgb(30 58 138 / var(--un-text-opacity));}
.text-emerald-800{--un-text-opacity:1;color:rgb(6 95 70 / var(--un-text-opacity));}
.text-gray-500{--un-text-opacity:1;color:rgb(107 114 128 / var(--un-text-opacity));}
.text-gray-600,
.group:hover .group-hover\:text-gray-600{--un-text-opacity:1;color:rgb(75 85 99 / var(--un-text-opacity));}
.text-gray-700{--un-text-opacity:1;color:rgb(55 65 81 / var(--un-text-opacity));}
.text-gray-800{--un-text-opacity:1;color:rgb(31 41 55 / var(--un-text-opacity));}
.text-gray-900{--un-text-opacity:1;color:rgb(17 24 39 / var(--un-text-opacity));}
.text-green-500{--un-text-opacity:1;color:rgb(34 197 94 / var(--un-text-opacity));}
.text-green-600{--un-text-opacity:1;color:rgb(22 163 74 / var(--un-text-opacity));}
.text-green-700{--un-text-opacity:1;color:rgb(21 128 61 / var(--un-text-opacity));}
.text-green-800{--un-text-opacity:1;color:rgb(22 101 52 / var(--un-text-opacity));}
.text-indigo-200{--un-text-opacity:1;color:rgb(199 210 254 / var(--un-text-opacity));}
.text-indigo-500{--un-text-opacity:1;color:rgb(99 102 241 / var(--un-text-opacity));}
.text-indigo-600{--un-text-opacity:1;color:rgb(79 70 229 / var(--un-text-opacity));}
.text-indigo-700{--un-text-opacity:1;color:rgb(67 56 202 / var(--un-text-opacity));}
.text-indigo-800{--un-text-opacity:1;color:rgb(55 48 163 / var(--un-text-opacity));}
.text-indigo-900{--un-text-opacity:1;color:rgb(49 46 129 / var(--un-text-opacity));}
.text-orange-500{--un-text-opacity:1;color:rgb(249 115 22 / var(--un-text-opacity));}
.text-orange-600{--un-text-opacity:1;color:rgb(234 88 12 / var(--un-text-opacity));}
.text-orange-700{--un-text-opacity:1;color:rgb(194 65 12 / var(--un-text-opacity));}
.text-orange-800{--un-text-opacity:1;color:rgb(154 52 18 / var(--un-text-opacity));}
.text-pink-700{--un-text-opacity:1;color:rgb(190 24 93 / var(--un-text-opacity));}
.text-purple-500{--un-text-opacity:1;color:rgb(168 85 247 / var(--un-text-opacity));}
.text-purple-600{--un-text-opacity:1;color:rgb(147 51 234 / var(--un-text-opacity));}
.text-purple-700{--un-text-opacity:1;color:rgb(126 34 206 / var(--un-text-opacity));}
.text-purple-800{--un-text-opacity:1;color:rgb(107 33 168 / var(--un-text-opacity));}
.text-purple-900{--un-text-opacity:1;color:rgb(88 28 135 / var(--un-text-opacity));}
.text-red-500{--un-text-opacity:1;color:rgb(239 68 68 / var(--un-text-opacity));}
.text-red-600{--un-text-opacity:1;color:rgb(220 38 38 / var(--un-text-opacity));}
.text-red-700{--un-text-opacity:1;color:rgb(185 28 28 / var(--un-text-opacity));}
.text-red-800{--un-text-opacity:1;color:rgb(153 27 27 / var(--un-text-opacity));}
.text-slate-100{--un-text-opacity:1;color:rgb(241 245 249 / var(--un-text-opacity));}
.text-slate-500{--un-text-opacity:1;color:rgb(100 116 139 / var(--un-text-opacity));}
.text-slate-600{--un-text-opacity:1;color:rgb(71 85 105 / var(--un-text-opacity));}
.text-slate-700{--un-text-opacity:1;color:rgb(51 65 85 / var(--un-text-opacity));}
.text-slate-800{--un-text-opacity:1;color:rgb(30 41 59 / var(--un-text-opacity));}
.text-slate-900{--un-text-opacity:1;color:rgb(15 23 42 / var(--un-text-opacity));}
.text-yellow-400{--un-text-opacity:1;color:rgb(250 204 21 / var(--un-text-opacity));}
.text-yellow-600{--un-text-opacity:1;color:rgb(202 138 4 / var(--un-text-opacity));}
.text-yellow-700{--un-text-opacity:1;color:rgb(161 98 7 / var(--un-text-opacity));}
.text-yellow-800{--un-text-opacity:1;color:rgb(133 77 14 / var(--un-text-opacity));}
.text-yellow-900{--un-text-opacity:1;color:rgb(113 63 18 / var(--un-text-opacity));}
.hover\:text-blue-600:hover{--un-text-opacity:1;color:rgb(37 99 235 / var(--un-text-opacity));}
.hover\:text-blue-700:hover{--un-text-opacity:1;color:rgb(29 78 216 / var(--un-text-opacity));}
.hover\:text-blue-800:hover{--un-text-opacity:1;color:rgb(30 64 175 / var(--un-text-opacity));}
.hover\:text-blue-900:hover{--un-text-opacity:1;color:rgb(30 58 138 / var(--un-text-opacity));}
.hover\:text-gray-500:hover{--un-text-opacity:1;color:rgb(107 114 128 / var(--un-text-opacity));}
.hover\:text-gray-600:hover{--un-text-opacity:1;color:rgb(75 85 99 / var(--un-text-opacity));}
.hover\:text-gray-700:hover{--un-text-opacity:1;color:rgb(55 65 81 / var(--un-text-opacity));}
.hover\:text-gray-800:hover{--un-text-opacity:1;color:rgb(31 41 55 / var(--un-text-opacity));}
.hover\:text-gray-900:hover{--un-text-opacity:1;color:rgb(17 24 39 / var(--un-text-opacity));}
.hover\:text-green-600:hover{--un-text-opacity:1;color:rgb(22 163 74 / var(--un-text-opacity));}
.hover\:text-green-900:hover{--un-text-opacity:1;color:rgb(20 83 45 / var(--un-text-opacity));}
.hover\:text-indigo-500:hover{--un-text-opacity:1;color:rgb(99 102 241 / var(--un-text-opacity));}
.hover\:text-indigo-600:hover{--un-text-opacity:1;color:rgb(79 70 229 / var(--un-text-opacity));}
.hover\:text-indigo-700:hover{--un-text-opacity:1;color:rgb(67 56 202 / var(--un-text-opacity));}
.hover\:text-indigo-800:hover{--un-text-opacity:1;color:rgb(55 48 163 / var(--un-text-opacity));}
.hover\:text-orange-800:hover{--un-text-opacity:1;color:rgb(154 52 18 / var(--un-text-opacity));}
.hover\:text-red-600:hover{--un-text-opacity:1;color:rgb(220 38 38 / var(--un-text-opacity));}
.hover\:text-red-700:hover{--un-text-opacity:1;color:rgb(185 28 28 / var(--un-text-opacity));}
.hover\:text-red-900:hover{--un-text-opacity:1;color:rgb(127 29 29 / var(--un-text-opacity));}
.color-black-300{--un-text-opacity:1;color:rgb(0 0 0 / var(--un-text-opacity));}
.font-bold{font-weight:700;}
.font-medium{font-weight:500;}
.font-normal{font-weight:400;}
.font-semibold{font-weight:600;}
.leading-none{line-height:1;}
.leading-relaxed{line-height:1.625;}
.leading-tight{line-height:1.25;}
.tracking-wide{letter-spacing:0.025em;}
.tracking-wider{letter-spacing:0.05em;}
.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;}
.uppercase{text-transform:uppercase;}
.lowercase{text-transform:lowercase;}
.capitalize{text-transform:capitalize;}
.italic{font-style:italic;}
.underline{text-decoration-line:underline;}
.hover\:underline:hover{text-decoration-line:underline;}
.tab{-moz-tab-size:4;-o-tab-size:4;tab-size:4;}
.text-shadow{--un-text-shadow:0 0 1px var(--un-text-shadow-color, rgb(0 0 0 / 0.2)),0 0 1px var(--un-text-shadow-color, rgb(1 0 5 / 0.1));text-shadow:var(--un-text-shadow);}
.opacity-0{opacity:0;}
.opacity-100{opacity:1;}
.opacity-20{opacity:0.2;}
.opacity-25{opacity:0.25;}
.opacity-40{opacity:0.4;}
.opacity-50{opacity:0.5;}
.opacity-75{opacity:0.75;}
.opacity-95{opacity:0.95;}
.hover\:opacity-70:hover{opacity:0.7;}
.hover\:opacity-80:hover{opacity:0.8;}
.disabled\:opacity-50:disabled{opacity:0.5;}
.shadow{--un-shadow:var(--un-shadow-inset) 0 1px 3px 0 var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 1px 2px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.shadow-2xl{--un-shadow:var(--un-shadow-inset) 0 25px 50px -12px var(--un-shadow-color, rgb(0 0 0 / 0.25));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.shadow-lg{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.shadow-md{--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.shadow-sm{--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.shadow-xl{--un-shadow:var(--un-shadow-inset) 0 20px 25px -5px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 8px 10px -6px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.hover\:shadow-lg:hover{--un-shadow:var(--un-shadow-inset) 0 10px 15px -3px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 4px 6px -4px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.hover\:shadow-md:hover{--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.hover\:shadow-sm:hover{--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.active\:shadow-md:active{--un-shadow:var(--un-shadow-inset) 0 4px 6px -1px var(--un-shadow-color, rgb(0 0 0 / 0.1)),var(--un-shadow-inset) 0 2px 4px -2px var(--un-shadow-color, rgb(0 0 0 / 0.1));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.outline{outline-style:solid;}
.outline-none{outline:2px solid transparent;outline-offset:2px;}
.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px;}
.ring{--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.focus\:ring-1:focus{--un-ring-width:1px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.focus\:ring-2:focus{--un-ring-width:2px;--un-ring-offset-shadow:var(--un-ring-inset) 0 0 0 var(--un-ring-offset-width) var(--un-ring-offset-color);--un-ring-shadow:var(--un-ring-inset) 0 0 0 calc(var(--un-ring-width) + var(--un-ring-offset-width)) var(--un-ring-color);box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
.focus\:ring-offset-2:focus{--un-ring-offset-width:2px;}
.focus\:ring-blue-500:focus{--un-ring-opacity:1;--un-ring-color:rgb(59 130 246 / var(--un-ring-opacity));}
.focus\:ring-gray-500:focus{--un-ring-opacity:1;--un-ring-color:rgb(107 114 128 / var(--un-ring-opacity));}
.focus\:ring-green-500:focus{--un-ring-opacity:1;--un-ring-color:rgb(34 197 94 / var(--un-ring-opacity));}
.focus\:ring-indigo-500:focus{--un-ring-opacity:1;--un-ring-color:rgb(99 102 241 / var(--un-ring-opacity));}
.focus\:ring-red-500:focus{--un-ring-opacity:1;--un-ring-color:rgb(239 68 68 / var(--un-ring-opacity));}
.focus\:ring-inset:focus{--un-ring-inset:inset;}
.backdrop-blur-md{--un-backdrop-blur:blur(12px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
.backdrop-blur-sm{--un-backdrop-blur:blur(4px);-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
.blur{--un-blur:blur(8px);filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
.filter{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
.backdrop-filter{-webkit-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
.duration-200{transition-duration:200ms;}
.duration-300{transition-duration:300ms;}
.ease,
.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);}
.ease-in{transition-timing-function:cubic-bezier(0.4, 0, 1, 1);}
.ease-out{transition-timing-function:cubic-bezier(0, 0, 0.2, 1);}
.bg-primary-100{background-color:#7ba9f9;}
.text-secondary-200{color:#f44237;}
.border-secondary-200{border-color:#f44237;}
.bg-white-100{background-color:#ffffff;}
.text-white-100{color:#ffffff;}
.dark .dark\:text-white-200{color:#f8f9fa;}
.text-black-100{color:#6c757d;}
.text-black-200{color:#495057;}
.bg-black-300{background-color:#000000;}
.bg-gray-100{background-color:#fafafa;}
.hover\:bg-gray-100:hover{background-color:#fafafa;}
.disabled\:bg-gray-100:disabled{background-color:#fafafa;}
.dark .dark\:text-gray-100,
.text-gray-100{color:#fafafa;}
.border-gray-100{border-color:#fafafa;}
.bg-gray-200{background-color:#f5f5f5;}
.hover\:bg-gray-200:hover{background-color:#f5f5f5;}
.dark .dark\:text-gray-200{color:#f5f5f5;}
.border-gray-200{border-color:#f5f5f5;}
.bg-gray-300{background-color:#eeeeee;}
.hover\:bg-gray-300:hover{background-color:#eeeeee;}
.text-gray-300{color:#eeeeee;}
.border-gray-300{border-color:#eeeeee;}
.hover\:border-gray-300:hover{border-color:#eeeeee;}
.animation-name-spin{animation-name:spin;}
.fade-in{animation:fadeIn 0.3s ease-in-out;}
@media (min-width: 640px){
.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.sm\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.sm\:inline{display:inline;}
.sm\:block{display:block;}
.sm\:h-9{height:2.25rem;}
.sm\:max-w-80{max-width:20rem;}
.sm\:max-w-md{max-width:28rem;}
.sm\:w-9{width:2.25rem;}
.sm\:p-4{padding:1rem;}
.sm\:p-6{padding:1.5rem;}
.sm\:p-8{padding:2rem;}
.sm\:px-20{padding-left:5rem;padding-right:5rem;}
.sm\:px-4{padding-left:1rem;padding-right:1rem;}
.sm\:px-6{padding-left:1.5rem;padding-right:1.5rem;}
.sm\:px-8{padding-left:2rem;padding-right:2rem;}
.sm\:text-2xl{font-size:1.5rem;line-height:2rem;}
.sm\:text-3xl{font-size:1.875rem;line-height:2.25rem;}
.sm\:text-lg{font-size:1.125rem;line-height:1.75rem;}
.sm\:text-sm{font-size:0.875rem;line-height:1.25rem;}
.sm\:text-xl{font-size:1.25rem;line-height:1.75rem;}
}
@media (min-width: 768px){
.md\:col-span-2{grid-column:span 2/span 2;}
.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.md\:hidden{display:none;}
.md\:translate-x-0{--un-translate-x:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
}
@media (min-width: 1024px){
.lg\:static{position:static;}
.lg\:inset-0{inset:0;}
.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.lg\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr));}
.lg\:hidden{display:none;}
.lg\:max-w-md{max-width:28rem;}
.lg\:w-48{width:12rem;}
.lg\:flex-row{flex-direction:row;}
.lg\:translate-x-0{--un-translate-x:0;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
.lg\:px-10{padding-left:2.5rem;padding-right:2.5rem;}
.lg\:px-8{padding-left:2rem;padding-right:2rem;}
}/* Shared confirm modals (delete confirmations, etc.) */

.confirm_modal_overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 16px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Keep this class “look-only” so other modals (e.g. IM) can opt-in without layout breakage. */
.confirm_modal_container {
  /* Requested look */
  background: rgb(0 0 0 / 92%);
  border: 1px solid #ffffff29;

  border-radius: 25px;
  box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
  color: #f9fafb;
}

/* Default sizing/padding used by Homescreen/Home delete-confirm modals */
.confirm_modal_container_default {
  width: 100%;
  max-width: 420px;
  padding: 28px;
}

.confirm_modal_title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 12px 0;
  text-align: center;
  color: #ffffff;
}

.confirm_modal_body {
  margin: 0 0 20px 0;
  text-align: center;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}

.confirm_modal_actions {
  display: flex;
  gap: 12px;
}

.confirm_modal_button {
  flex: 1;
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.1;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  transition: background 120ms ease, transform 80ms ease, opacity 120ms ease;
}

.confirm_modal_button:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.16);
  transform: scale(0.99);
}

.confirm_modal_button:disabled {
  opacity: 0.55;
}

.confirm_modal_button_cancel {
  border-color: #ffffff29;
}

.confirm_modal_button_danger {
  background: #ef4444;
}

.confirm_modal_button_danger:active:not(:disabled) {
  background: #dc2626;
}

/* Delete App specific: “other copies found / Delete all” placeholder row */
.confirm_modal_secondary_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 23px;
  padding-top: 14px;
  margin-bottom: -11px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.confirm_modal_secondary_text {
  font-size: 13px;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.60);
}

.confirm_modal_secondary_action {
  border: 0;
  background: transparent;
  padding: 4px 6px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.90);
  text-decoration: underline;
}

.confirm_modal_secondary_action:active {
    opacity: 0.8;
}

/* Light mode support */
body.light_mode .confirm_modal_overlay {
    background: rgba(0, 0, 0, 0.5);
}

body.light_mode .confirm_modal_container {
    background: rgb(255 255 255 / 95%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #111827;
}

body.light_mode .confirm_modal_title {
    color: #111827;
}

body.light_mode .confirm_modal_body {
    color: rgba(0, 0, 0, 0.7);
}

body.light_mode .confirm_modal_button {
    background: rgba(0, 0, 0, 0.08);
    color: #111827;
}

body.light_mode .confirm_modal_button:active:not(:disabled) {
    background: rgba(0, 0, 0, 0.12);
}

body.light_mode .confirm_modal_button_cancel {
    border-color: rgba(0, 0, 0, 0.15);
}

body.light_mode .confirm_modal_button_danger {
    background: #ef4444;
    color: #ffffff;
}

body.light_mode .confirm_modal_button_danger:active:not(:disabled) {
    background: #dc2626;
}

body.light_mode .confirm_modal_secondary_row {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

body.light_mode .confirm_modal_secondary_text {
    color: rgba(0, 0, 0, 0.6);
}

body.light_mode .confirm_modal_secondary_action {
    color: rgba(0, 0, 0, 0.8);
}

/* Achievement animations */

/* Shrink animation for progress bars */
@keyframes shrink {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Enhanced glow animation for major achievements with pulse */
@keyframes glow {
  0%, 100% {
    box-shadow: 
      0 40px 80px -20px rgba(251, 191, 36, 0.7),
      0 30px 60px -15px rgba(245, 158, 11, 0.6),
      0 20px 40px -10px rgba(234, 88, 12, 0.5),
      0 0 0 2px rgba(255, 255, 255, 0.5) inset,
      0 0 60px rgba(251, 191, 36, 0.5);
  }
  50% {
    box-shadow: 
      0 40px 80px -20px rgba(251, 191, 36, 0.9),
      0 30px 60px -15px rgba(245, 158, 11, 0.8),
      0 20px 40px -10px rgba(234, 88, 12, 0.7),
      0 0 0 2px rgba(255, 255, 255, 0.7) inset,
      0 0 100px rgba(251, 191, 36, 0.8);
  }
}

/* Float animation for particles */
@keyframes float {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}

/* Shimmer animation for shine effect */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

/* Bounce animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Icon pulse for major achievements */
@keyframes iconPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Glow ring animation behind icon */
@keyframes glowRing {
  0%, 100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.6;
  }
}

/* Achievement toast styles */
.achievement-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50003;
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid #e5e7eb;
  max-width: 24rem;
  overflow: hidden;
  transition: all 0.3s ease-out;
}

.achievement-toast-content {
  color: #1f2937;
  background-color: white;
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.achievement-toast-icon {
  font-size: 1.875rem;
  animation: pulse 2s ease-in-out infinite;
  filter: drop-shadow(0 2px 8px rgba(139, 92, 246, 0.6));
}

.achievement-toast-text {
  flex: 1;
}

.achievement-toast-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: #111827;
}

.achievement-toast-description {
  font-size: 0.75rem;
  color: #4b5563;
}

.achievement-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background-color: #e5e7eb;
  overflow: hidden;
  border-radius: 0 0 0.5rem 0.5rem;
}

.achievement-toast-progress-bar {
  height: 100%;
  background: linear-gradient(to right, #3b82f6, #a855f7);
  transform-origin: left;
  animation: shrink 3.5s linear forwards;
}

.achievement-toast-enter {
  animation: slideInUp 0.3s ease-out;
}

.achievement-toast-exit {
  animation: slideOutUp 0.3s ease-in;
}

@keyframes slideInUp {
  0% {
    transform: translate(-50%, -100%) scale(0.85) rotate(-2deg);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, 8px) scale(1.03) rotate(1deg);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, -4px) scale(0.98) rotate(-0.5deg);
  }
  100% {
    transform: translate(-50%, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes slideOutUp {
  0% {
    transform: translate(-50%, 0) scale(1) rotate(0deg);
    opacity: 1;
  }
  20% {
    transform: translate(-50%, -8px) scale(1.02) rotate(-0.5deg);
  }
  100% {
    transform: translate(-50%, -120%) scale(0.88) rotate(2deg);
    opacity: 0;
  }
}

/* Achievement modal styles */
.achievement-modal {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease-out;
}

.achievement-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.achievement-modal-content {
  position: relative;
  transform: transition-all duration-500 ease-out;
}

.achievement-modal-enter {
  animation: zoomIn 0.5s ease-out;
}

.achievement-modal-exit {
  animation: zoomOut 0.3s ease-in;
}

@keyframes zoomIn {
  0% {
    transform: scale(0) rotate(12deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.08) rotate(-2deg);
    opacity: 1;
  }
  80% {
    transform: scale(0.96) rotate(1deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes zoomOut {
  0% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  30% {
    transform: scale(1.05) rotate(-3deg);
  }
  100% {
    transform: scale(0) rotate(-15deg);
    opacity: 0;
  }
}

/* Confetti animation */
.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #dda0dd);
  background-size: 500% 500%;
  animation: confetti-fall 3s linear infinite, confetti-rotate 2s linear infinite;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(-100vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

@keyframes confetti-rotate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Achievement badge animations */
.achievement-badge {
  position: relative;
  display: inline-block;
  animation: badge-appear 0.5s ease-out;
}

@keyframes badge-appear {
  0% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Streak animation */
.streak-fire {
  animation: fire 1s ease-in-out infinite;
}

@keyframes fire {
  0%, 100% {
    transform: scaleY(1);
  }
  25% {
    transform: scaleY(1.1);
  }
  50% {
    transform: scaleY(0.9);
  }
  75% {
    transform: scaleY(1.05);
  }
}

/* Level up animation */
.level-up {
  animation: levelUp 0.8s ease-out;
}

@keyframes levelUp {
  0% {
    transform: translateY(20px) scale(0.8);
    opacity: 0;
  }
  50% {
    transform: translateY(-10px) scale(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* Utility classes for animations */
.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

.animate-bounce {
  animation: bounce 1s ease-in-out infinite;
}

.animate-glow {
  animation: glow 2s ease-in-out infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-shimmer {
    animation: shimmer 2s linear infinite;
}

/* Light mode support */
body.light_mode .achievement-modal-backdrop {
    background: rgba(0, 0, 0, 0.6);
}
/* Factory Animated Icon Animations */

/* Force SVG onto its own compositor layer to prevent style recalc interruptions */
.factory-animated-icon svg {
  transform: translateZ(0);
  will-change: auto;
}

.factory-animated-icon .bubble1-translate {
  animation: bubble1-translate 1400ms linear infinite normal;
}

@keyframes bubble1-translate {
  0% {
    transform: translate(6.745398px, 9.251205px);
  }
  71.428571% {
    transform: translate(17.208004px, 6.301018px);
  }
  100% {
    transform: translate(17.208004px, 6.301018px);
  }
}

.factory-animated-icon .bubble1-scale {
  animation: bubble1-scale 1400ms linear infinite normal;
}

@keyframes bubble1-scale {
  0% {
    transform: scale(0, 0);
  }
  71.428571% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

.factory-animated-icon .bubble1-opacity {
  animation: bubble1-opacity 1400ms linear infinite normal;
}

@keyframes bubble1-opacity {
  0% {
    opacity: 1;
  }
  57.142857% {
    opacity: 1;
  }
  71.428571% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.factory-animated-icon .bubble2-translate {
  animation: bubble2-translate 1400ms linear infinite normal;
}

@keyframes bubble2-translate {
  0% {
    offset-distance: 0%;
  }
  14.285714% {
    offset-distance: 0%;
  }
  71.428571% {
    offset-distance: 100%;
  }
  100% {
    offset-distance: 100%;
  }
}

.factory-animated-icon .bubble2-scale {
  animation: bubble2-scale 1400ms linear infinite normal;
}

@keyframes bubble2-scale {
  0% {
    transform: scale(0, 0);
  }
  14.285714% {
    transform: scale(0, 0);
  }
  71.428571% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

.factory-animated-icon .bubble2-opacity {
  animation: bubble2-opacity 1400ms linear infinite normal;
}

@keyframes bubble2-opacity {
  0% {
    opacity: 1;
  }
  57.142857% {
    opacity: 1;
  }
  71.428571% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.factory-animated-icon .bubble3-translate {
  animation: bubble3-translate 1400ms linear infinite normal;
}

@keyframes bubble3-translate {
  0% {
    transform: translate(7.671293px, 8.798574px);
  }
  28.571429% {
    transform: translate(7.671293px, 8.798574px);
  }
  85.714286% {
    transform: translate(12.864062px, 7.221516px);
  }
  100% {
    transform: translate(12.864062px, 7.221516px);
  }
}

.factory-animated-icon .bubble3-scale {
  animation: bubble3-scale 1400ms linear infinite normal;
}

@keyframes bubble3-scale {
  0% {
    transform: scale(0, 0);
  }
  28.571429% {
    transform: scale(0, 0);
  }
  85.714286% {
    transform: scale(1, 1);
  }
  100% {
    transform: scale(1, 1);
  }
}

.factory-animated-icon .bubble3-opacity {
    animation: bubble3-opacity 1400ms linear infinite normal;
}

@keyframes bubble3-opacity {
    0% {
        opacity: 1;
    }
    71.428571% {
        opacity: 1;
    }
    85.714286% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

/* Light mode support - animations work the same in both modes */