/* Mantiene padding e bordi dentro la larghezza dichiarata, anche su WebView mobile. */
*, *::before, *::after { box-sizing: border-box; }

:root {
      --brand-amber: #f59e0b;
      --brand-purple: #8b5cf6;
      --bg-dark: #09090b;
      --sex-male: #3b82f6;   /* Azzurro */
      --sex-female: #ec4899; /* Rosa */
      --app-height: 100dvh;
    }
    
    html, body {
      height: 100%; height: var(--app-height); width: 100%;
      overflow: hidden; background-color: var(--bg-dark);
      color: #f4f4f5; font-family: 'Inter', sans-serif;
      -webkit-tap-highlight-color: transparent; padding: 0; margin: 0;
    }
    


    /* GLOBAL INVISIBLE SCROLLBAR */
    * {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    *::-webkit-scrollbar {
        display: none;
    }

    html[dir="rtl"] { direction: rtl; text-align: right; }
    html[dir="rtl"] .ph-caret-left { transform: rotate(180deg); }
    html[dir="rtl"] .ph-arrow-right { transform: rotate(180deg); }

    .font-logo { font-family: 'Anton', sans-serif; letter-spacing: 0.05em; text-transform: uppercase; }
    .safe-padding-top { padding-top: env(safe-area-inset-top, 20px); }
    .safe-padding-bottom { padding-bottom: env(safe-area-inset-bottom, 20px); }
    
    @media (max-height: 700px) {
      .compact-mode .emoji-logo { font-size: 2rem !important; }
      .compact-mode .logo-container { padding: 0.5rem !important; margin-bottom: 0.25rem !important; }
      .compact-mode .input-field { padding: 8px 12px !important; font-size: 13px !important; }
      .compact-mode .btn-primary { padding: 10px !important; }
      .compact-mode .space-y-6 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
      .compact-mode h2[data-t="authTitle"] { font-size: 2rem !important; }
    }

    #map, #pickerMapContainer { height: 100%; width: 100%; z-index: 0; background: #27272a; }
    .map-dark-tiles .leaflet-tile { filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.3) brightness(0.7); }
    
    .fade-in { animation: fadeIn 0.4s ease-out; }
    .slide-up { animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

    .emoji-anim { transition: opacity 0.2s, transform 0.2s; opacity: 1; transform: scale(1); }
    .emoji-anim.swap { opacity: 0; transform: scale(0.8) rotate(-10deg); }

    .glass-panel { background: rgba(24, 24, 27, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); }

    .toast {
      position: fixed; top: 20px; left: 50%; transform: translateX(-50%) translateY(-200%);
      background: var(--brand-amber); color: #000; padding: 14px 28px; border-radius: 99px;
      font-weight: 800; z-index: 9999; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3); font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em;
      width: max-content; max-width: 90%; text-align: center; white-space: normal; line-height: 1.4;
    }
    .toast.show { transform: translateX(-50%) translateY(0); }
    .toast.error { background: #ef4444; color: white; box-shadow: 0 10px 30px rgba(239, 68, 68, 0.3); }

    .input-field {
      width: 100%; background: #27272a; border: 1px solid #3f3f46; color: white;
      padding: 14px 16px; border-radius: 16px; outline: none; transition: all 0.2s;
      font-size: 15px; font-weight: 500; transform: translateZ(0); 
    }
    .input-field:focus { border-color: var(--brand-amber); background: #3f3f46; }
    .input-field:disabled { opacity: 0.5; cursor: not-allowed; }
    
    .btn-primary {
      background: var(--brand-amber); color: black; font-weight: 800;
      border-radius: 18px; padding: 16px; width: 100%;
      transition: transform 0.1s; display: flex; align-items: center; justify-content: center; gap: 10px;
      box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2);
    }
    .btn-primary:active { transform: scale(0.96); }

    .border-male { border-color: var(--sex-male) !important; }
    .border-female { border-color: var(--sex-female) !important; }
    .text-male { color: var(--sex-male) !important; }
    .text-female { color: var(--sex-female) !important; }
    
    .sex-select-btn {
        flex: 1; padding: 16px; border-radius: 16px; border: 2px solid #3f3f46;
        background: #27272a; color: #71717a; font-weight: 700; transition: all 0.2s;
        display: flex; flex-direction: column; align-items: center; gap: 8px;
    }
    .sex-select-btn.selected-male { border-color: var(--sex-male); background: rgba(59, 130, 246, 0.1); color: white; }
    .sex-select-btn.selected-female { border-color: var(--sex-female); background: rgba(236, 72, 153, 0.1); color: white; }

    .ring-status { border: 2px solid transparent; transition: all 0.3s ease; }
    .status-green { border-color: #10b981; animation: pulse-green 2s infinite; }
    .status-yellow { border-color: #eab308; animation: pulse-yellow 1s infinite; }
    .status-red { border-color: #ef4444; opacity: 0.8; filter: grayscale(0.5); }
    .pulse-purple-btn { animation: pulse-purple 2s infinite; }
    
    @keyframes pulse-green { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } }
    @keyframes pulse-yellow { 0% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.6); border-color: #ca8a04; } 50% { box-shadow: 0 0 0 6px rgba(234, 179, 8, 0); border-color: #facc15; } 100% { box-shadow: 0 0 0 0 rgba(234, 179, 8, 0); border-color: #ca8a04; } }
    @keyframes pulse-purple { 0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.6); } 70% { box-shadow: 0 0 0 10px rgba(139, 92, 246, 0); } 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); } }

    /* 💓 HEARTBEAT CARDIO PULSE - Notifica attività (storie, eventi, amici) */
    .heartbeat-pulse {
      position: relative;
    }
    .heartbeat-pulse::after {
      content: '';
      position: absolute;
      top: -2px; right: -2px;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: #ef4444;
      border: 2px solid #18181b;
      animation: heartbeat-cardio 1.2s ease-in-out infinite;
      z-index: 10;
    }
    @keyframes heartbeat-cardio {
      0%   { transform: scale(1);   box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
      15%  { transform: scale(1.35); box-shadow: 0 0 6px 2px rgba(239, 68, 68, 0.5); }
      30%  { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.3); }
      45%  { transform: scale(1.25); box-shadow: 0 0 4px 1px rgba(239, 68, 68, 0.4); }
      60%  { transform: scale(1);   box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
      100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
    }
    .heartbeat-pulse.has-activity {
      animation: heartbeat-btn-glow 1.2s ease-in-out infinite;
    }
    @keyframes heartbeat-btn-glow {
      0%   { border-color: #3f3f46; }
      15%  { border-color: #ef4444; box-shadow: 0 0 8px rgba(239,68,68,0.3); }
      30%  { border-color: #3f3f46; box-shadow: none; }
      45%  { border-color: #ef4444; box-shadow: 0 0 6px rgba(239,68,68,0.2); }
      60%  { border-color: #3f3f46; box-shadow: none; }
      100% { border-color: #3f3f46; box-shadow: none; }
    }

    /* 💓 ANIMATED CARDIOGRAM SVG */
    .cardio-svg { overflow: visible; }
    .cardio-line { stroke-dasharray: 100; stroke-dashoffset: 100; }
    .cardio-svg .cardio-line { color: #71717a; }
    .heartbeat-pulse .cardio-line { animation: cardio-draw 1.6s ease-in-out infinite; }
    .heartbeat-pulse .cardio-line-bg { stroke: #27272a; }
    .heartbeat-pulse.has-activity .cardio-line { color: #ef4444; animation: cardio-draw 1.4s ease-in-out infinite; filter: drop-shadow(0 0 3px rgba(239,68,68,0.5)); }
    @keyframes cardio-draw {
      0%   { stroke-dashoffset: 100; }
      50%  { stroke-dashoffset: 0; }
      100% { stroke-dashoffset: -100; }
    }
    /* Stato idle: linea visibile statica */
    #headerFeedBtn:not(.heartbeat-pulse) .cardio-line { stroke-dashoffset: 0; color: #71717a; }
    #headerFeedBtn:hover .cardio-line { color: #a78bfa; }
    #headerFeedBtn:hover .cardio-line-bg { stroke: #3f3f46; }

    .marker-pin {
      width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
      box-shadow: 0 4px 20px rgba(0,0,0,0.5); border: 3px solid #fff; font-size: 22px; transition: transform 0.2s;
      background: var(--brand-amber);
    }
    .marker-pin.m-green { border-color: #10b981; background: #064e3b; color: #fff; }
    .marker-pin.m-yellow { border-color: #eab308; background: #422006; color: #fbbf24; animation: pulse-yellow 1.5s infinite; }
    .marker-pin.m-red { border-color: #ef4444; background: #450a0a; color: #f87171; }
    .marker-pin:hover { transform: scale(1.1); z-index: 1000 !important; }

    /* MARKER ANIMATI - Intermittenza tra emoji multiple */
    .marker-pin .emoji-cycle { display: flex; align-items: center; justify-content: center; }
    .marker-pin .emoji-cycle .emoji-item { position: absolute; opacity: 0; transform: scale(0.5); transition: all 0.4s ease; }
    .marker-pin .emoji-cycle .emoji-item.active { opacity: 1; transform: scale(1); }

    /* ═══════════════════════════════════════════════════════════════
       🍸 VENUE MARKERS — Apple Maps / Tesla Style Pin
    ═══════════════════════════════════════════════════════════════ */
    /* ── Venue Circle Marker (elegant dot style) ── */
    .venue-circle {
      cursor: pointer; text-align: center; position: relative;
      transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .venue-circle:hover { transform: scale(1.3); z-index: 1000 !important; }

    .venue-dot {
      width: 26px; height: 26px; border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #f59e0b, #d97706);
      border: 2.5px solid #09090b;
      box-shadow: 0 0 0 1.5px rgba(245,158,11,0.35), 0 2px 8px rgba(0,0,0,0.45);
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; line-height: 1;
      margin: 0 auto;
    }

    .venue-circle .venue-dist-label {
      margin-top: 2px; padding: 1px 5px; border-radius: 4px;
      font-size: 7.5px; font-weight: 800;
      color: rgba(245,158,11,0.7);
      background: rgba(9,9,11,0.8);
      white-space: nowrap; line-height: 1.3;
    }

    /* Promo active: pulsing glow ring */
    .venue-circle.promo-active .venue-dot {
      background: radial-gradient(circle at 35% 35%, #f87171, #ef4444);
      border-color: #09090b;
      box-shadow: 0 0 0 1.5px rgba(239,68,68,0.45), 0 2px 8px rgba(0,0,0,0.45);
      animation: venue-dot-glow 1.8s ease-in-out infinite;
    }
    .venue-circle.promo-active .venue-dist-label { color: #fca5a5; }

    .venue-circle.promo-active::before {
      content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
      width: 26px; height: 26px; border-radius: 50%;
      border: 2px solid rgba(239,68,68,0.5);
      animation: venue-ring-pulse 1.8s ease-out infinite;
      pointer-events: none;
    }

    @keyframes venue-dot-glow {
      0%, 100% { box-shadow: 0 0 0 1.5px rgba(239,68,68,0.45), 0 0 8px rgba(239,68,68,0.2); }
      50%      { box-shadow: 0 0 0 2px rgba(239,68,68,0.65), 0 0 18px rgba(239,68,68,0.4), 0 0 36px rgba(239,68,68,0.12); }
    }
    @keyframes venue-ring-pulse {
      0%   { opacity: 1; transform: translateX(-50%) scale(1); }
      100% { opacity: 0; transform: translateX(-50%) scale(2.4); }
    }

    /* Filter dropdown */
    .venue-filter-dropdown {
      position: absolute; top: 100%; right: 0; margin-top: 8px;
      background: rgba(24,24,27,0.96); backdrop-filter: blur(16px);
      border: 1px solid #3f3f46; border-radius: 16px;
      padding: 6px; min-width: 185px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.5);
      z-index: 2000;
    }
    .venue-filter-dropdown button {
      width: 100%; text-align: left; padding: 8px 12px; border-radius: 10px;
      font-size: 11px; font-weight: 600; color: #d4d4d8;
      background: transparent; border: none; cursor: pointer;
      display: flex; align-items: center; gap: 8px; transition: background 0.15s;
    }
    .venue-filter-dropdown button:hover { background: rgba(255,255,255,0.06); }
    .venue-filter-dropdown button.active { color: #f59e0b; background: rgba(245,158,11,0.1); }
    .venue-filter-dropdown .filter-divider { height: 1px; background: #27272a; margin: 4px 0; }
    
    /* Venue popup */
    .venue-popup { max-width: 280px; }
    .venue-popup .venue-name { font-weight: 800; font-size: 14px; color: #f97316; }
    .venue-popup .venue-promo { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); border-radius: 10px; padding: 8px; margin-top: 6px; }
    .venue-popup .venue-actions { display: flex; gap: 6px; margin-top: 8px; }
    .venue-popup .venue-actions button { flex: 1; padding: 8px; border-radius: 10px; font-size: 11px; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
    .venue-popup .btn-navigate { background: #3b82f6; color: white; }
    .venue-popup .btn-call { background: #10b981; color: white; }
    .venue-popup .btn-web { background: #8b5cf6; color: white; }
    
    /* Leaflet popup dark styling */
    .leaflet-popup-content-wrapper { background: rgba(15,15,17,0.95); backdrop-filter: blur(16px); color: white; border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
    .leaflet-popup-tip { background: rgba(15,15,17,0.95); }
    .leaflet-popup-close-button { color: #71717a !important; font-size: 20px !important; top: 6px !important; right: 10px !important; }
    .leaflet-popup-close-button:hover { color: white !important; }
    
    /* Emoji animate anche nelle card */
    .emoji-cycle { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 100%; }
    .emoji-cycle .emoji-item { position: absolute; opacity: 0; transform: scale(0.5); transition: all 0.4s ease; }
    .emoji-cycle .emoji-item.active { opacity: 1; transform: scale(1); }
    
    /* ═══════════════════════════════════════════════════════════════
       🔥 PARTY PULSE - Indicatore di energia live degli eventi
       Sistema innovativo che mostra l'attività in tempo reale
    ═══════════════════════════════════════════════════════════════ */
    .party-pulse-bar {
      height: 4px;
      border-radius: 2px;
      background: linear-gradient(90deg, #27272a 0%, #27272a 100%);
      overflow: hidden;
      position: relative;
    }
    .party-pulse-fill {
      height: 100%;
      border-radius: 2px;
      transition: width 0.5s ease, background 0.3s ease;
    }
    .pulse-low { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
    .pulse-medium { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
    .pulse-high { background: linear-gradient(90deg, #f97316, #fb923c); }
    .pulse-fire { background: linear-gradient(90deg, #ef4444, #f87171); animation: pulse-glow 1s ease infinite; }
    
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 5px rgba(239, 68, 68, 0.5); }
      50% { box-shadow: 0 0 15px rgba(239, 68, 68, 0.8); }
    }
    
    .pulse-indicator {
      display: flex; align-items: center; gap: 4px;
      font-size: 9px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .pulse-dot {
      width: 6px; height: 6px; border-radius: 50%;
      animation: pulse-blink 1.5s ease infinite;
    }
    @keyframes pulse-blink {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.3; }
    }
    
    /* Marker con pulse attivo */
    .marker-pulse-active {
      animation: marker-energy-pulse 2s ease infinite;
    }
    @keyframes marker-energy-pulse {
      0%, 100% { box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 0 0 rgba(245, 158, 11, 0.4); }
      50% { box-shadow: 0 4px 12px rgba(0,0,0,0.3), 0 0 0 8px rgba(245, 158, 11, 0); }
    }
    
    /* User marker pulse */
    .user-marker-pulse {
      animation: user-pulse 2s ease infinite;
    }
    @keyframes user-pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
      50% { box-shadow: 0 0 0 12px rgba(59, 130, 246, 0); }
    }
    
    /* ═══════════════════════════════════════════════════════════════
       🎯 SMART MATCH BADGE - Compatibilità evento
    ═══════════════════════════════════════════════════════════════ */
    .match-badge {
      position: absolute;
      top: -4px;
      left: -4px;
      min-width: 22px;
      height: 22px;
      border-radius: 11px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      font-weight: 900;
      border: 2px solid #09090b;
      z-index: 15;
    }
    .match-high { background: linear-gradient(135deg, #10b981, #059669); color: white; }
    .match-medium { background: linear-gradient(135deg, #f59e0b, #d97706); color: black; }
    
    /* ═══════════════════════════════════════════════════════════════
       ✨ CARD GLOW EFFECTS - Illuminazione dinamica
    ═══════════════════════════════════════════════════════════════ */
    .card-glow-green { box-shadow: 0 0 20px rgba(16, 185, 129, 0.15), inset 0 1px 0 rgba(16, 185, 129, 0.1); }
    .card-glow-purple { box-shadow: 0 0 20px rgba(139, 92, 246, 0.15), inset 0 1px 0 rgba(139, 92, 246, 0.1); }
    .card-glow-amber { box-shadow: 0 0 20px rgba(245, 158, 11, 0.15), inset 0 1px 0 rgba(245, 158, 11, 0.1); }
    .card-glow-pink { box-shadow: 0 0 20px rgba(236, 72, 153, 0.2), inset 0 1px 0 rgba(236, 72, 153, 0.1); }
    .card-glow-blue { box-shadow: 0 0 20px rgba(59, 130, 246, 0.2), inset 0 1px 0 rgba(59, 130, 246, 0.1); }
    .card-glow-fire { 
      box-shadow: 0 0 25px rgba(239, 68, 68, 0.2), inset 0 1px 0 rgba(239, 68, 68, 0.1);
      animation: fire-glow 2s ease infinite;
    }
    @keyframes fire-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.15); }
      50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.25); }
    }

    /* Category selection chips */
    .cat-chip { 
      display: inline-flex; align-items: center; gap: 5px; 
      padding: 6px 10px; border-radius: 10px; 
      font-size: 11px; font-weight: 700; 
      cursor: pointer; transition: all 0.2s;
      border: 2px solid transparent; box-sizing: border-box;
      max-width: 100%; min-width: 0;
      flex: 0 1 auto;
      transform: translateZ(0);
    }
    .cat-chip span:not(.chip-emoji) {
      overflow-wrap: anywhere; word-break: break-word;
      overflow: hidden; min-width: 0; flex: 0 1 auto;
      line-height: 1.2;
    }
    @media (hover: hover) and (pointer: fine) {
      .cat-chip:hover { transform: scale(1.02); }
    }
    .cat-chip.selected { border-color: currentColor; }
    .cat-chip .chip-emoji { font-size: 16px; flex-shrink: 0; }
    
    /* Category sections */
    .cat-section { 
      background: rgba(39, 39, 42, 0.5); 
      border-radius: 20px; 
      padding: 16px; 
      margin-bottom: 12px;
      border: 1px solid #3f3f46;
      overflow: hidden;
    }
    .cat-section .flex-wrap {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      max-width: 100%;
      min-width: 0;
      overflow: hidden;
    }
    #view-host > div,
    #selectedItemsWithQty,
    #selectedItemsWithQty > div {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      overflow-x: hidden;
    }
    .selected-item-row {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      overflow: hidden;
    }
    .selected-item-controls {
      min-width: 0;
      max-width: 116px;
    }
    @media (max-width: 420px) {
      .cat-chip[data-item-id="drink_spumante"] {
        flex: 0 1 auto;
        width: auto;
      }
      .selected-item-row {
        flex-wrap: wrap;
      }
      .selected-item-controls {
        margin-left: 44px;
        max-width: calc(100% - 76px);
      }
    }

    /* ═══════════════════════════════════════════════════════════════
       📸 STORIES - Instagram-like stories
    ═══════════════════════════════════════════════════════════════ */
    .stories-row { display: flex; gap: 14px; overflow-x: auto; padding: 8px 0 12px 0; scrollbar-width: none; }
    .stories-row::-webkit-scrollbar { display: none; }
    .story-bubble { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 68px; cursor: pointer; position: relative; }
    .story-ring { 
      width: 64px; height: 64px; border-radius: 50%; padding: 3px; 
      background: #3f3f46; 
      display: flex; align-items: center; justify-content: center;
      position: relative;
    }
    .story-ring.has-story { background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6); background-size: 200% 200%; animation: storyRingPulse 3s ease infinite; }
    .story-ring.viewed { background: #3f3f46; animation: none; }
    .story-ring.my-story { background: linear-gradient(135deg, #22c55e, #10b981); animation: none; }
    @keyframes storyRingPulse { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
    .story-ring-inner { width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid #09090b; }
    .story-ring-inner img { width: 100%; height: 100%; object-fit: cover; }
    .story-add-btn { 
      width: 64px; height: 64px; border-radius: 50%; 
      background: #18181b; border: 2px dashed #3f3f46;
      display: flex; align-items: center; justify-content: center;
      color: #f59e0b; font-size: 24px; transition: all 0.2s;
    }
    .story-add-btn:hover { border-color: #f59e0b; }
    .story-name { font-size: 10px; color: #a1a1aa; font-weight: 600; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
    .story-viewer { position: fixed; inset: 0; z-index: 9000; background: black; display: flex; align-items: center; justify-content: center; }
    .story-viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
    .story-text-overlay { 
      position: absolute; bottom: 80px; left: 16px; right: 16px; 
      background: rgba(0,0,0,0.6); backdrop-filter: blur(8px);
      border-radius: 16px; padding: 12px 16px; color: white; 
      font-size: 14px; font-weight: 600; text-align: center;
    }
    .story-progress-bar { position: absolute; top: 12px; left: 12px; right: 12px; height: 3px; background: rgba(255,255,255,0.2); border-radius: 2px; overflow: hidden; }
    .story-progress-fill { height: 100%; background: white; border-radius: 2px; transition: width 0.1s linear; }
    .cat-section-header {
      display: flex; align-items: center; gap: 8px;
      font-weight: 800; font-size: 12px; 
      text-transform: uppercase; letter-spacing: 0.1em;
      margin-bottom: 12px; padding-bottom: 8px;
      border-bottom: 1px solid #3f3f46;
    }
    
    /* Selected items preview */
    .selected-preview {
      display: flex; flex-wrap: wrap; gap: 8px;
      padding: 12px; background: #18181b;
      border-radius: 16px; margin-top: 12px;
      border: 1px dashed #3f3f46;
    }
    .selected-tag {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 6px 10px; border-radius: 20px;
      font-size: 12px; font-weight: 600;
      background: #27272a; border: 1px solid #3f3f46;
    }
    .selected-tag .remove-tag {
      margin-left: 4px; cursor: pointer; opacity: 0.6;
      transition: opacity 0.2s;
    }
    .selected-tag .remove-tag:hover { opacity: 1; }

    /* ═══════════════════════════════════════════════════════════════
       💬 EMOJI REACTIONS - WhatsApp-style message reactions
    ═══════════════════════════════════════════════════════════════ */
    .msg-reactions-bar {
      display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
    }
    .msg-reaction {
      display: inline-flex; align-items: center; gap: 2px;
      background: rgba(39,39,42,0.9); border: 1px solid #3f3f46;
      border-radius: 12px; padding: 2px 6px; font-size: 14px;
      cursor: pointer; transition: all 0.2s; user-select: none;
    }
    .msg-reaction:hover { border-color: var(--brand-amber); transform: scale(1.1); }
    .msg-reaction.my-reaction { border-color: var(--brand-amber); background: rgba(245,158,11,0.15); }
    .msg-reaction .reaction-count { font-size: 10px; font-weight: 700; color: #a1a1aa; }
    .msg-reaction.my-reaction .reaction-count { color: var(--brand-amber); }

    .emoji-reaction-picker {
      position: absolute; z-index: 100; 
      display: flex; gap: 2px; padding: 6px 8px;
      background: rgba(24,24,27,0.96); backdrop-filter: blur(16px);
      border: 1px solid #3f3f46; border-radius: 24px;
      box-shadow: 0 12px 40px rgba(0,0,0,0.6);
      animation: reactionPickerIn 0.2s cubic-bezier(0.16,1,0.3,1);
    }
    .emoji-reaction-picker button {
      width: 36px; height: 36px; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px; transition: all 0.15s; cursor: pointer;
      background: transparent;
    }
    .emoji-reaction-picker button:hover { background: #3f3f46; transform: scale(1.2); }
    @keyframes reactionPickerIn { from { opacity:0; transform: scale(0.8) translateY(8px); } to { opacity:1; transform: scale(1) translateY(0); } }

    /* ═══════════════════════════════════════════════════════════════
       ✓✓ READ RECEIPTS - Now defined in chat-bubble section
    ═══════════════════════════════════════════════════════════════ */

    /* ═══════════════════════════════════════════════════════════════
       👥 FRIEND REQUEST SYSTEM - Accept/Reject/Block UI
    ═══════════════════════════════════════════════════════════════ */
    .friend-req-card {
      background: rgba(139,92,246,0.08); border: 1px solid rgba(139,92,246,0.25);
      border-radius: 16px; padding: 12px; display: flex; align-items: center; gap: 10px;
      transition: all 0.2s;
    }
    .friend-req-card:hover { background: rgba(139,92,246,0.12); }
    .friend-action-btn {
      padding: 6px 12px; border-radius: 10px; font-size: 10px;
      font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
      transition: all 0.2s; cursor: pointer; display: inline-flex;
      align-items: center; gap: 4px;
    }
    .friend-action-btn.accept { background: #10b981; color: white; }
    .friend-action-btn.accept:hover { background: #059669; }
    .friend-action-btn.reject { background: rgba(239,68,68,0.15); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
    .friend-action-btn.reject:hover { background: rgba(239,68,68,0.3); }
    .friend-action-btn.block { background: rgba(239,68,68,0.1); color: #ef4444; }
    .friend-action-btn.block:hover { background: #ef4444; color: white; }

    /* ═══════════════════════════════════════════════════════════════
       🔔 CONFIRM DIALOG - Generic confirmation modal
    ═══════════════════════════════════════════════════════════════ */
    .confirm-overlay {
      position: fixed; inset: 0; z-index: 8000;
      background: rgba(0,0,0,0.85); backdrop-filter: blur(8px);
      display: flex; align-items: center; justify-content: center; padding: 24px;
    }
    .confirm-box {
      background: #18181b; border: 1px solid #27272a; border-radius: 24px;
      padding: 24px; max-width: 340px; width: 100%; text-align: center;
      box-shadow: 0 20px 60px rgba(0,0,0,0.6);
      animation: slideUp 0.3s cubic-bezier(0.16,1,0.3,1);
    }

    /* Crop Modal */
    .crop-container {
      position: relative; width: 280px; height: 280px; margin: 0 auto;
      overflow: hidden; border-radius: 50%; border: 3px solid #f59e0b;
      background: #000; touch-action: none; cursor: grab;
    }
    .crop-container:active { cursor: grabbing; }
    .crop-container img {
      position: absolute; max-width: none; max-height: none;
      transform-origin: 0 0; user-select: none; -webkit-user-drag: none;
    }
    .crop-zoom-slider {
      -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
      border-radius: 6px; background: #27272a; outline: none;
    }
    .crop-zoom-slider::-webkit-slider-thumb {
      -webkit-appearance: none; appearance: none; width: 20px; height: 20px;
      border-radius: 50%; background: #f59e0b; cursor: pointer; border: 2px solid #000;
    }
    .crop-zoom-slider::-moz-range-thumb {
      width: 20px; height: 20px; border-radius: 50%; background: #f59e0b;
      cursor: pointer; border: 2px solid #000;
    }

    /* Cookie Banner */
    .cookie-banner {
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 9500;
      background: linear-gradient(to top, rgba(9,9,11,0.98), rgba(9,9,11,0.95));
      backdrop-filter: blur(20px); border-top: 1px solid #27272a;
      padding: 20px; padding-bottom: max(20px, env(safe-area-inset-bottom));
      animation: slideUp 0.5s cubic-bezier(0.16,1,0.3,1);
    }


    .feed-card { background: #18181b; border: 1px solid #27272a; border-radius: 20px; padding: 16px; margin-bottom: 12px; transition: all 0.2s; }
    .feed-card:active { transform: scale(0.98); }
    .online-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; border: 2px solid #09090b; position: absolute; bottom: 0; right: 0; }
    .offline-dot { width: 10px; height: 10px; border-radius: 50%; background: #52525b; border: 2px solid #09090b; position: absolute; bottom: 0; right: 0; }
    .status-bubble { background: #27272a; border: 1px solid #3f3f46; border-radius: 20px; padding: 6px 14px; font-size: 12px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; transition: all 0.2s; }
    .status-bubble:hover { border-color: #f59e0b; }
    .mood-option { padding: 12px 16px; border-radius: 16px; border: 1px solid #27272a; background: #18181b; cursor: pointer; transition: all 0.2s; display: flex; align-items: center; gap: 10px; }
    .mood-option:hover { border-color: #f59e0b; background: rgba(245,158,11,0.05); }
    .mood-option.active { border-color: #f59e0b; background: rgba(245,158,11,0.1); }
    .chat-photo { border-radius: 16px; max-width: 100%; max-height: 260px; object-fit: cover; cursor: pointer; transition: transform 0.2s; display: block; }
    .chat-photo:active { transform: scale(0.95); }
    .vw { width: 3px; min-height: 3px; border-radius: 99px; background: #ef4444; animation: vw .6s ease-in-out infinite alternate; }
    @keyframes vw { 0%{height:3px;opacity:.3} 100%{height:16px;opacity:1} }
    audio { display: none !important; } /* Hide native audio, use custom player */

    /* === TELEGRAM-STYLE VOICE MESSAGE PLAYER === */
    .voice-msg { display: flex; align-items: center; gap: 10px; padding: 4px 0; min-width: 0; width: 100%; box-sizing: border-box; overflow: hidden; }
    .voice-play-btn { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; transition: all 0.2s; border: none; }
    .chat-bubble.me .voice-play-btn { background: rgba(0,0,0,0.15); color: #111; }
    .chat-bubble.other .voice-play-btn { background: rgba(255,255,255,0.08); color: #f59e0b; }
    .voice-play-btn:active { transform: scale(0.9); }
    .voice-waveform { flex: 1; display: flex; align-items: center; gap: 2px; height: 28px; position: relative; min-width: 0; overflow: hidden; }
    .voice-waveform-bar { width: 3px; border-radius: 99px; transition: background 0.15s; }
    .chat-bubble.me .voice-waveform-bar { background: rgba(0,0,0,0.18); }
    .chat-bubble.me .voice-waveform-bar.played { background: rgba(0,0,0,0.55); }
    .chat-bubble.other .voice-waveform-bar { background: rgba(255,255,255,0.12); }
    .chat-bubble.other .voice-waveform-bar.played { background: #f59e0b; }
    .voice-duration { font-size: 11px; font-weight: 600; min-width: 32px; text-align: right; opacity: 0.7; flex-shrink: 0; }
    .chat-bubble:has(.voice-msg) { min-width: 200px; }
    @media (max-width: 480px) { .chat-bubble:has(.voice-msg) { min-width: 180px; } }
    .photo-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.95); display: flex; align-items: center; justify-content: center; padding: 20px; animation: photoFadeIn 0.2s; }
    .photo-overlay img { max-width: 100%; max-height: 90vh; border-radius: 16px; object-fit: contain; }
    @keyframes photoFadeIn { from { opacity: 0; } to { opacity: 1; } }
    .profile-stat { text-align: center; padding: 10px; background: #09090b; border-radius: 14px; }
    .profile-stat .stat-num { font-size: 20px; font-weight: 900; color: white; }
    .profile-stat .stat-label { font-size: 9px; font-weight: 700; text-transform: uppercase; color: #71717a; letter-spacing: 0.1em; }
    .typing-indicator { display: flex; align-items: center; gap: 4px; padding: 4px 0; }
    .typing-dot { width: 6px; height: 6px; border-radius: 50%; background: #71717a; animation: typingBounce 1.4s infinite ease-in-out; }
    .typing-dot:nth-child(2) { animation-delay: 0.2s; }
    .typing-dot:nth-child(3) { animation-delay: 0.4s; }
    @keyframes typingBounce { 0%,60%,100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
    .invite-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #3f3f46; display: flex; align-items: center; justify-content: center; transition: all 0.2s; flex-shrink: 0; }
    .invite-check.selected { border-color: #f59e0b; background: #f59e0b; color: black; }

    .view-section { position: absolute; inset: 0; background: var(--bg-dark); overflow: hidden; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; }
    .hidden { display: none !important; }
    
    #view-splash {
      z-index: 9999; display: flex; align-items: center; justify-content: center; flex-direction: column;
      background-color: #08080b;
      position: relative;
      overflow: hidden;
    }
    #view-splash::before {
      content: ''; position: absolute; inset: 0; z-index: 0;
      background-image:
        linear-gradient(180deg, rgba(8,8,11,0.55) 0%, rgba(8,8,11,0.45) 40%, rgba(8,8,11,0.8) 100%),
        url('/assets/img/loader-desktop.webp');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      opacity: 0;
      transform: scale(1.06);
      animation: splashBgIn 0.9s cubic-bezier(0.16,1,0.3,1) 0.04s forwards;
      will-change: opacity, transform;
    }
    #view-splash > * { position: relative; z-index: 1; }
    @keyframes splashBgIn { to { opacity: 1; transform: scale(1); } }
    /* Su smartphone / verticale → versione ritratto */
    @media (max-width: 700px), (orientation: portrait) {
      #view-splash::before {
        background-image:
          linear-gradient(180deg, rgba(8,8,11,0.5) 0%, rgba(8,8,11,0.4) 40%, rgba(8,8,11,0.82) 100%),
          url('/assets/img/loader-mobile.webp');
      }
    }
    @media (prefers-reduced-motion: reduce) {
      #view-splash::before { animation: none; opacity: 1; transform: none; }
    }
    #view-splash h1 { text-shadow: 0 3px 18px rgba(0,0,0,0.75); }
    #view-splash p { text-shadow: 0 2px 10px rgba(0,0,0,0.8); color: #d4d4d8 !important; }
    #view-splash .logo-container { box-shadow: 0 12px 40px -8px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06); }
    .chat-bubble { max-width: 100%; min-width: 80px; padding: 8px 12px 6px; border-radius: 18px; font-size: 15px; line-height: 1.4; position: relative; word-wrap: break-word; overflow-wrap: break-word; word-break: normal; width: fit-content; box-sizing: border-box; }
    .chat-bubble.me { background: #3b82f6; color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
    .chat-bubble.other { background: #27272a; color: #e4e4e7; border-bottom-left-radius: 4px; align-self: flex-start; }
    .chat-bubble.admin { background: #7c3aed; color: white; border-bottom-left-radius: 4px; align-self: flex-start; border: 1px solid #8b5cf6; }
    
    /* Blue double-check read receipts (Instagram/WhatsApp style) */
    .read-receipt { display: inline-flex; align-items: center; margin-left: 3px; }
    .read-receipt .check { font-size: 11px; font-weight: 700; letter-spacing: -2px; }
    .read-receipt .check.sent { color: rgba(255,255,255,0.4); }
    .read-receipt .check.read { color: #60c9ff; }
    .suggestions-box{
  max-height: 240px;
  overflow-y: auto;
  overflow-x: hidden;
  background: rgba(23,23,26,0.98);
  border: 1px solid #27272a;
  border-radius: 18px;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 8px;
  z-index: 50;
  box-shadow: 0 18px 40px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.suggestions-box > div{
  padding: 12px 14px;
  border-bottom: 1px solid #27272a;
  cursor: pointer;
  transition: background .2s;
}
.suggestions-box > div:hover{ background: rgba(39,39,42,0.6); }
.suggestions-box > div:last-child{ border-bottom: none; }

    .lang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .lang-btn { text-align: left; padding: 12px; background: #27272a; border-radius: 12px; border: 1px solid #3f3f46; display: flex; align-items: center; gap: 10px; transition: all 0.2s; }
    .lang-btn.active { border-color: var(--brand-amber); background: rgba(245, 158, 11, 0.1); }

    /* ═══ FOOTER ═══ */
    .footer-new {
      background: transparent;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding: 1rem 1.5rem;
      position: relative; z-index: 20; flex-shrink: 0;
      width: 100%; box-sizing: border-box;
    }
    /* ── MOBILE: solo extras centrati ── */
    .footer-copy { display: none; }
    .footer-new-inner {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px; font-weight: 500;
      letter-spacing: 0.1em; text-transform: uppercase;
    }
    .footer-extras {
      display: flex; flex-wrap: nowrap;
      align-items: center; justify-content: center;
      gap: 0.75rem;
    }
    .footer-ukraine { display: flex; align-items: center; gap: 0.375rem; color: #9ca3af; transition: color 0.3s ease; cursor: default; }
    .footer-ukraine:hover { color: #d1d5db; }
    .ukraine-flag { width: 1rem; height: 1rem; filter: drop-shadow(0 0 5px rgba(255,221,0,0.5)); }
    .footer-ukraine-text { display: none; font-size: 9px; letter-spacing: 0.1em; }
    .footer-sep { display: none; color: #374151; }
    .footer-dev { display: flex; align-items: center; gap: 0.5rem; color: #737373; }
    .footer-dev-links { display: flex; align-items: center; gap: 0.75rem; margin-left: 0.25rem; }
    .footer-brand-link { display: flex; align-items: center; gap: 0.375rem; color: #c49a6c; font-weight: 600; text-decoration: none; transition: all 0.3s ease; }
    .footer-brand-link:hover { color: #e8c07a; text-shadow: 0 0 8px rgba(196,154,108,0.5); }
    .swc-icon { width: 1rem; height: 1rem; }
    .footer-sep-small { color: #374151; }
    .footer-social-link { color: #737373; transition: color 0.3s ease; display: flex; align-items: center; }
    .footer-social-link:hover { color: #c49a6c; }
    .ig-icon { width: 1rem; height: 1rem; }
    /* ── DESKTOP: tutto su una riga ── */
    @media (min-width: 768px) {
      .footer-new { padding: 1.2rem 2rem; }
      .footer-new-inner {
        flex-direction: row; flex-wrap: nowrap;
        justify-content: center; align-items: center;
        gap: 0; font-size: 11px; white-space: nowrap;
      }
      .footer-copy {
        display: flex; align-items: center;
        color: #737373; gap: 0.25rem;
        white-space: nowrap; flex-shrink: 0;
        padding-right: 1rem;
        border-right: 1px solid #374151;
        margin-right: 1rem;
      }
      .footer-extras { gap: 0.75rem; flex-wrap: nowrap; }
      .footer-sep { display: inline; }
      .footer-ukraine-text { display: inline; }
    }

    .star-rating { display: inline-flex; flex-direction: row-reverse; gap: 4px; }
    .star-rating input { display: none; }
    .star-rating label { font-size: 32px; color: #3f3f46; cursor: pointer; transition: color 0.2s; }
    .star-rating input:checked ~ label, .star-rating label:hover, .star-rating label:hover ~ label { color: #eab308; }

    /* Crosshair for Map Picker */
    .map-crosshair {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 40px; height: 40px; pointer-events: none; z-index: 1000;
    }
  
/* Floating chat button (purple) + unread pulse (green) */
.floating-purple-btn{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 120% at 30% 20%, #a78bfa 0%, var(--brand-purple) 40%, #4c1d95 100%);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.6);
  z-index: 5500;
}
.floating-purple-btn:active{ transform: scale(.96); }
.mychats-has-new{
  animation: unreadPulse 0.9s infinite;
  box-shadow: 0 0 0 0 rgba(34,197,94,.55), 0 16px 40px rgba(0,0,0,.6);
}
@keyframes unreadPulse{
  0%{ box-shadow: 0 0 0 0 rgba(34,197,94,.55), 0 16px 40px rgba(0,0,0,.6); filter: saturate(1.1); }
  70%{ box-shadow: 0 0 0 14px rgba(34,197,94,0), 0 16px 40px rgba(0,0,0,.6); }
  100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0), 0 16px 40px rgba(0,0,0,.6); }
}

    /* When there are unread chat messages the chat button turns green with an elegant pulsing glow.  */
    .floating-purple-btn.mychats-has-new {
      /* Override the default purple gradient with a green gradient */
      background: radial-gradient(120% 120% at 30% 20%, #6ee7b7 0%, #34d399 40%, #065f46 100%);
      animation: unreadPulseGreen 1s infinite !important;
    }
    @keyframes unreadPulseGreen {
      0%{ box-shadow: 0 0 0 0 rgba(34,197,94,.55), 0 16px 40px rgba(0,0,0,.6); filter: saturate(1.2); }
      70%{ box-shadow: 0 0 0 14px rgba(34,197,94,0), 0 16px 40px rgba(0,0,0,.6); }
      100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0), 0 16px 40px rgba(0,0,0,.6); }
    }

    /* When there are pending join requests for events you host the chat button turns into an azure/pink gradient with an elegant pulse */
    .floating-purple-btn.mychats-has-requests {
      background: radial-gradient(120% 120% at 30% 20%, #67e8f9 0%, #e879f9 40%, #701a75 100%);
      animation: unreadPulseRequests 1.2s infinite !important;
    }
    @keyframes unreadPulseRequests {
      0%{ box-shadow: 0 0 0 0 rgba(103,232,249,.55), 0 16px 40px rgba(0,0,0,.6); }
      70%{ box-shadow: 0 0 0 14px rgba(103,232,249,0), 0 16px 40px rgba(0,0,0,.6); }
      100%{ box-shadow: 0 0 0 0 rgba(103,232,249,0), 0 16px 40px rgba(0,0,0,.6); }
    }

    /* Badge inside chat button to show number of pending join requests */
    #chatBadge {
      position: absolute;
      top: -2px;
      right: -2px;
      min-width: 18px;
      height: 18px;
      border-radius: 9999px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10px;
      font-weight: 700;
      color: #fff;
      background: linear-gradient(135deg, #3b82f6, #ec4899);
      padding: 2px;
      box-shadow: 0 0 6px rgba(0,0,0,0.3);
    }

    /* ═══════════════════════════════════════════════════════════════
       📱 MOBILE-FIRST RESPONSIVE DESIGN
    ═══════════════════════════════════════════════════════════════ */
    
    @supports (height: 100dvh) {
      html, body { height: 100dvh; }
      .view-section { min-height: 100dvh; }
    }
    
    /* Small phones */
    @media (max-width: 480px) {
      .chat-bubble { max-width: 100%; min-width: 80px; padding: 8px 11px 5px; font-size: 14.5px; border-radius: 18px; }
      .chat-bubble.me { border-bottom-right-radius: 4px; }
      .chat-bubble.other { border-bottom-left-radius: 4px; }
      .chat-photo { max-height: 220px; border-radius: 14px; }
      
      .voice-msg { min-width: 0; gap: 8px; }
      .voice-play-btn { width: 32px; height: 32px; }
      .voice-waveform { gap: 1.5px; }
      .voice-waveform-bar { width: 2.5px; }
      .voice-duration { font-size: 10px; min-width: 28px; }
      
      #chatForm { gap: 2px; }
      #chatForm .w-10 { width: 36px; height: 36px; }
      #chatForm #chatSendBtn { width: 40px; height: 40px; }
      #chatIn { padding: 8px 14px; font-size: 14px; }
      
      .toast { font-size: 12px; padding: 12px 20px; max-width: 85%; }
      .input-field { padding: 12px 14px; font-size: 14px; border-radius: 14px; }
      .safe-padding-bottom { padding-bottom: max(env(safe-area-inset-bottom, 8px), 8px); }
      .floating-purple-btn { right: 14px; bottom: 14px; width: 50px; height: 50px; }
      .suggestions-box { max-height: 180px; }
      .suggestions-box > div { padding: 10px 12px; }
      .story-bubble { min-width: 60px; gap: 4px; }
      #view-profile .p-6 { padding: 16px; }
    }
    
    @media (min-width: 481px) and (max-width: 768px) {
      .chat-bubble { max-width: 100%; }
      .voice-msg { min-width: 0; }
    }
    
    @media (min-width: 769px) {
      .chat-bubble { max-width: 100%; }
      .voice-msg { min-width: 0; }
      #chatBox { padding: 20px 40px; }
    }
    
    /* When keyboard is open */
    @media (max-height: 450px) {
      #chatBox { padding: 8px; }
      .chat-bubble { font-size: 13px; padding: 6px 10px 4px; }
      #chatForm { gap: 1px; }
      #chatIn { padding: 6px 12px; font-size: 13px; }
    }
    
    @supports (padding: env(safe-area-inset-top)) {
      .safe-padding-top { padding-top: max(env(safe-area-inset-top), 12px); }
      .safe-padding-bottom { padding-bottom: max(env(safe-area-inset-bottom), 8px); }
    }
    
    @media (pointer: coarse) {
      button, [onclick] { min-height: 36px; min-width: 36px; }
      .voice-play-btn { min-height: 40px; min-width: 40px; }
    }