/* Variables iOS 17 mejoradas */
:root{
  --bg:#0f172a;
  --surface:#1e293b;
  --surface2:#334155;
  --text:#f1f5f9;
  --muted:#94a3b8;
  --primary:#0A84FF;
  --primary2:#00D4FF;
  --danger:#ff375f;
  --success:#22C55E;
  --shadow:0 15px 40px rgba(0,0,0,0.4);
  --shadow-glass:0 15px 40px rgba(0,0,0,0.4);
  --radius:22px;
  --radius-sm:12px;
  --gap:20px;
  --max:1120px;
  --font:-apple-system, BlinkMacSystemFont, "San Francisco", sans-serif;
  --ios-ease:cubic-bezier(.34,1.56,.64,1);
  --ios-fast:0.25s cubic-bezier(0.25, 1.25, 0.5, 1);
  --ios-medium:0.4s ease;
  --ios-slow:0.6s var(--ios-ease);
  --glass-bg:rgba(30,41,59,0.75);
  --glass-border:rgba(255,255,255,0.1);
  /* Variables iOS 17 mejoradas para chat */
  --chat-bg: rgba(30,41,59,0.95);
  --sent-bg: rgba(10,132,255,0.9);
  --scrollbar-bg: rgba(255,255,255,0.1);
  --scrollbar-thumb: rgba(255,255,255,0.2);
  --message-radius: 20px;
}

*{box-sizing:border-box}

/* Transiciones suaves para navegación */
html {
  transition: opacity 0.3s var(--ios-fast), 
              transform 0.3s var(--ios-fast);
}

body {
  transition: opacity 0.3s var(--ios-fast), 
              transform 0.3s var(--ios-fast);
}

/* Animación de entrada de página */
@keyframes pageEntry {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animación de salida de página */
@keyframes pageExit {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(1.02);
  }
}

/* Clases para animaciones de página */
.page-entering {
  animation: pageEntry 0.4s var(--ios-ease) forwards;
}

.page-exiting {
  animation: pageExit 0.3s var(--ios-fast) forwards;
}

/* Transiciones suaves para todos los elementos */
* {
  transition: background-color 0.2s var(--ios-fast),
              border-color 0.2s var(--ios-fast),
              color 0.2s var(--ios-fast),
              transform 0.2s var(--ios-fast);
}
html,body{height:100%}
html{
  background: linear-gradient(180deg,var(--bg),var(--surface));
  background-attachment:fixed;
}
body{
  margin:0;
  font-family:var(--font);
  color:var(--text);
  overflow-x:hidden;
  min-height:100%;
  background:transparent;
}

body.page-chat-info{overflow:hidden;height:100dvh}
body.page-chat-info .app{height:100%}
body.page-chat-info .main{
  flex:1;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 16px calc(102px + env(safe-area-inset-bottom));
}
body.page-chat-info .chatInfoPage__panel{width:100%;max-width:560px}

body.page-chat{overflow:hidden;height:100dvh}
body.page-chat .app{height:100%}
body.page-chat .main{
  flex:1;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:12px 16px calc(96px + env(safe-area-inset-bottom));
  gap:var(--gap);
}
body.page-chat .chat{flex:1;min-height:0}
body.page-chat .chat__messages{min-height:0}

a{color:inherit;text-decoration:none}

.app{min-height:100vh;display:flex;flex-direction:column}

.auth{
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:28px 16px 24px;
}
.auth .feed__header{margin-bottom:8px}
.auth .h1{font-size:24px;line-height:1.15}
.auth .card{width:100%}
.auth [data-auth-form]{width:100%}
.auth .btn{width:100%}
.auth .auth-links{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.auth .auth-links .btn{width:auto}
/* Móviles pequeños - 320px (antiguos/gama baja) */
@media (max-width: 320px) {
  .main{padding:12px 10px 96px;}
  .stories{padding:6px;border-radius:12px}
  .stories__list{gap:6px;min-height:76px}
  .story{min-width:58px}
  .story__ring{width:48px;height:48px}
  .story__name{max-width:58px;font-size:10px}
  .post__head{padding:8px 8px}
  .post__body{padding:8px 8px}
  .avatar{width:28px;height:28px}
  .post__actions{gap:6px;}
  .post__actions .action-icon{width:32px;height:32px}
  .auth{max-width:320px;padding:18px 12px 18px}
  .modal__panel{max-width:320px}
}

/* Móviles estándar - 360px (Samsung, Xiaomi, etc.) */
@media (max-width: 360px) {
  .main{padding:14px 12px 96px;}
  .stories{padding:7px;border-radius:13px}
  .stories__list{gap:7px;min-height:80px}
  .story{min-width:62px}
  .story__ring{width:52px;height:52px}
  .story__name{max-width:62px;font-size:11px}
  .post__head{padding:9px 9px}
  .post__body{padding:9px 9px}
  .avatar{width:30px;height:30px}
  .post__actions{gap:7px;}
  .post__actions .action-icon{width:34px;height:34px}
  .auth{max-width:360px;padding:20px 13px 20px}
  .modal__panel{max-width:360px}
  .setting-row{padding:10px 6px;gap:10px}
  .setting-row__icon{width:34px;height:34px}
  .setting-row__desc{display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
}

/* Móviles estándar - 375px (iPhone SE, etc.) */
@media (min-width: 361px) and (max-width: 375px) {
  .main{padding:15px 13px 96px;}
  .stories{padding:8px;border-radius:14px}
  .stories__list{gap:8px;min-height:84px}
  .story{min-width:66px}
  .story__ring{width:56px;height:56px}
  .story__name{max-width:66px;font-size:11px}
  .post__head{padding:10px 10px}
  .post__body{padding:10px 10px}
  .avatar{width:32px;height:32px}
  .post__actions{gap:8px;}
  .post__actions .action-icon{width:36px;height:36px}
  .auth{max-width:375px;padding:22px 14px 22px}
  .modal__panel{max-width:375px}
}

/* Móviles estándar - 390px (iPhone 12/13) */
@media (min-width: 376px) and (max-width: 390px) {
  .main{padding:16px 14px 96px;}
  .stories{padding:9px;border-radius:15px}
  .stories__list{gap:9px;min-height:88px}
  .story{min-width:70px}
  .story__ring{width:60px;height:60px}
  .story__name{max-width:70px;font-size:12px}
  .post__head{padding:11px 11px}
  .post__body{padding:11px 11px}
  .avatar{width:34px;height:34px}
  .post__actions{gap:9px;}
  .post__actions .action-icon{width:38px;height:38px}
  .auth{max-width:390px;padding:24px 15px 24px}
  .modal__panel{max-width:390px}
}

/* Móviles grandes - 412px (Android modernos) */
@media (min-width: 391px) and (max-width: 412px) {
  .main{padding:17px 15px 96px;}
  .stories{padding:10px;border-radius:16px}
  .stories__list{gap:10px;min-height:92px}
  .story{min-width:74px}
  .story__ring{width:64px;height:64px}
  .story__name{max-width:74px;font-size:12px}
  .post__head{padding:12px 12px}
  .post__body{padding:12px 12px}
  .avatar{width:36px;height:36px}
  .post__actions{gap:10px;}
  .post__actions .action-icon{width:40px;height:40px}
  .auth{max-width:412px;padding:26px 16px 26px}
  .modal__panel{max-width:412px}
}

/* Móviles grandes - 428px (iPhone Pro Max) */
@media (min-width: 413px) and (max-width: 428px) {
  .main{padding:18px 16px 96px;}
  .stories{padding:11px;border-radius:17px}
  .stories__list{gap:11px;min-height:96px}
  .story{min-width:78px}
  .story__ring{width:68px;height:68px}
  .story__name{max-width:78px;font-size:13px}
  .post__head{padding:13px 13px}
  .post__body{padding:13px 13px}
  .avatar{width:38px;height:38px}
  .post__actions{gap:11px;}
  .post__actions .action-icon{width:42px;height:42px}
  .auth{max-width:428px;padding:28px 17px 28px}
  .modal__panel{max-width:428px}
}

.topbar{
  position:sticky;top:0;z-index:20;
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:0 0 var(--radius) var(--radius);
  padding:20px 30px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.main{
  width:100%;
  max-width:var(--max);
  margin:0 auto;
  padding:20px 16px 96px;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
}

.right{display:none}

.h1{font-size:18px;margin:0}
.muted{color:var(--muted);font-size:14px}

.card{
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-glass);
  padding:16px;
  opacity:0;
  transform:translateY(30px);
  animation:iosCardEntry var(--ios-slow) forwards;
}

@keyframes iosCardEntry{
  to{
    opacity:1;
    transform:translateY(0);
  }
}
.card__title{font-weight:700;margin-bottom:10px}

.btn{
  appearance:none;border:1px solid rgba(34,48,74,.9);
  background:rgba(18,26,42,.8);
  color:var(--text);
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:650;
}
.btn:active{transform:translateY(1px)}
.btn--primary{
  border-color:rgba(124,92,255,.55);
  background:linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,212,255,.65));
}
.btn--ghost{background:transparent}

.input{
  width:100%;
  background:#0f1626;
  border:1px solid #22304a;
  border-radius:12px;
  padding:12px 12px;
  color:var(--text);
  outline:none;
}

.settings{display:flex;flex-direction:column;gap:var(--gap)}
.settings__top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.settings__title{font-weight:900}

 .setting-row{
   width:100%;
   display:flex;
   align-items:center;
   gap:12px;
   padding:12px 8px;
   border-radius:14px;
   border:1px solid rgba(34,48,74,.0);
   background:transparent;
   color:var(--text);
   cursor:pointer;
   text-align:left;
 }
 .setting-row:hover{background:rgba(255,255,255,.03);border-color:rgba(34,48,74,.55)}
 .setting-row__icon{
   width:36px;height:36px;
   border-radius:12px;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   border:1px solid rgba(34,48,74,.65);
   background:rgba(18,26,42,.35);
 }
 .setting-row__icon i{font-size:16px;line-height:1}
 .setting-row__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
 .setting-row__label{font-weight:800}
 .setting-row__desc{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis}
 .setting-row__end{display:inline-flex;align-items:center;justify-content:center;gap:8px}
 .setting-row--danger .setting-row__label{color:var(--danger)}

 .switch{position:relative;display:inline-flex;align-items:center;justify-content:center}
 .switch input{position:absolute;opacity:0;pointer-events:none}
 .switch__track{
   width:44px;height:26px;
   border-radius:999px;
   border:1px solid rgba(34,48,74,.75);
   background:rgba(18,26,42,.55);
   display:inline-flex;
   align-items:center;
   padding:2px;
 }
 .switch__thumb{
   width:20px;height:20px;
   border-radius:999px;
   background:rgba(234,240,255,.85);
   transform:translateX(0);
   transition:transform .18s ease, background .18s ease;
 }
 .switch input:checked + .switch__track{border-color:rgba(0,212,255,.55);background:rgba(0,212,255,.12)}
 .switch input:checked + .switch__track .switch__thumb{transform:translateX(18px);background:var(--primary2)}

 body.reduce-motion *{animation:none !important;transition:none !important;scroll-behavior:auto !important}

 .badge{
   display:inline-flex;
   align-items:center;
   gap:6px;
   padding:6px 10px;
   border-radius:999px;
   border:1px solid rgba(34,48,74,.75);
   background:rgba(18,26,42,.55);
   color:var(--text);
   font-size:12px;
   font-weight:800;
 }
 .badge i{font-size:12px;line-height:1}
body.private-account .badge{border-color:rgba(124,92,255,.55);background:rgba(124,92,255,.12)}

 .banner{
   margin-top:12px;
   padding:12px;
   border-radius:14px;
   border:1px solid rgba(34,48,74,.75);
   background:rgba(18,26,42,.55);
 }
 .banner__title{font-weight:900;margin-bottom:4px}
 .banner__text{color:var(--muted);font-size:13px}
 .banner[data-status="warning"]{border-color:rgba(255,200,0,.45);background:rgba(255,200,0,.08)}
 .banner[data-status="restricted"]{border-color:rgba(255,77,77,.45);background:rgba(255,77,77,.08)}

 .list-muted{color:var(--muted);font-size:14px;margin-top:10px}
 .list-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0}
 .list-row + .list-row{border-top:1px solid rgba(34,48,74,.55)}
 .list-row__text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.feed{display:flex;flex-direction:column;gap:20px;padding:10px 15px 40px}
.feed__header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.feed__list{display:flex;flex-direction:column;gap:20px}
.feed__footer{display:flex;justify-content:center}

.stories{
  border:1px solid rgba(34,48,74,.75);
  background:rgba(18,26,42,.35);
  border-radius:var(--radius);
  padding:10px;
  overflow:hidden;
}
.stories__list{display:flex;gap:10px;overflow:auto;scrollbar-width:none;padding-bottom:2px;min-height:92px;align-items:flex-start}
.stories__list::-webkit-scrollbar{display:none}
.story{
  min-width:74px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}
.story__ring{
  width:64px;height:64px;border-radius:999px;
  padding:2px;
  background:linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,212,255,.75));
  position:relative;
}
.story__ring.is-seen{
  background:rgba(34,48,74,.75);
}
.story__avatar{
  width:100%;height:100%;border-radius:999px;
  background:rgba(11,15,25,.35);
  border:1px solid rgba(34,48,74,.75);
}
.story__plus{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:22px;
  height:22px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:950;
  font-size:16px;
  line-height:1;
  color:#fff;
  background:rgba(124,92,255,.95);
  border:2px solid #05070D;
  box-shadow:0 10px 18px rgba(0,0,0,.35);
}
.story__name{font-size:12px;color:var(--muted);max-width:74px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#storiesViewerRoot{position:fixed;inset:0;z-index:9999}
.storyViewer{
  position:absolute;inset:0;
  background:#05070D;
  color:var(--text);
}
.storyViewer__layout{position:absolute;inset:0;}
.storyViewer__arrow{
  display:none;
}
.storyViewer__card{
  width:100%;
  height:100%;
}
.storyViewer__rail{display:none;}
.storyViewer__close{
  position:absolute;top:10px;right:10px;
  width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.35);
  color:#fff;font-size:28px;line-height:1;
  cursor:pointer;
  z-index:5;
}
.storyViewer__top{
  position:absolute;left:0;right:0;top:0;
  padding:10px 12px;
  z-index:4;
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
}
.storyViewer__progress{display:flex;gap:6px}
.storyViewer__bar{flex:1 1 0;height:3px;background:rgba(255,255,255,.18);border-radius:999px;overflow:hidden}
.storyViewer__bar span{display:block;height:100%;width:0%;background:rgba(255,255,255,.95)}
.storyViewer__bar.done span{width:100%}
.storyViewer__meta{margin-top:10px;display:flex;align-items:center;gap:10px}
.storyViewer__avatarRing{
  width:38px;height:38px;border-radius:999px;
  padding:2px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(0,212,255,.75), rgba(124,92,255,.95));
  box-shadow:0 14px 26px rgba(0,0,0,.35);
}
.storyViewer__avatarRing.is-seen{background:rgba(34,48,74,.75);}
.storyViewer__avatar{width:100%;height:100%;border-radius:999px;background:rgba(124,92,255,.18);border:2px solid #05070D;background-size:cover;background-position:center}
.storyViewer__username{font-weight:850;text-shadow:0 8px 18px rgba(0,0,0,.35)}
.storyViewer__stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.storyViewer__media{max-width:100%;max-height:100%;width:100%;height:100%;object-fit:contain}
.storyViewer__overlay{position:absolute;inset:0;pointer-events:none}
.storyViewerText{
  position:absolute;
  transform:translate(-0%, -0%);
  font-size:26px;
  font-weight:900;
  text-shadow:0 10px 24px rgba(0,0,0,.55);
  white-space:pre-wrap;
  max-width:90%;
}
.storyViewer__nav{
  position:absolute;top:0;bottom:0;
  width:50%;
  border:0;
  background:transparent;
  cursor:pointer;
  z-index:3;
  pointer-events:none;
}
.storyViewer__nav--prev{left:0}
.storyViewer__nav--next{right:0}

@media (min-width: 768px){
  /* Instagram-like desktop: centered 9:16 card + visible arrows */
  .storyViewer__layout{
    display:grid;
    grid-template-columns: minmax(520px, 1fr) minmax(260px, 360px);
    grid-template-rows: 1fr;
    column-gap:24px;
  }

  .storyViewer__stage{
    position:relative;
    inset:auto;
    padding:26px 0;
    grid-column:1;
    align-self:center;
    justify-self:stretch;
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .storyViewer__rail{
    display:flex;
    flex-direction:column;
    gap:14px;
    position:relative;
    right:auto;
    top:auto;
    transform:none;
    width:100%;
    max-width:none;
    padding:0 18px 0 0;
    grid-column:2;
    align-self:center;
    justify-self:stretch;
    min-height:100vh;
    justify-content:center;
  }
  .storyViewer__card{
    width:min(420px, 100%);
    aspect-ratio: 9 / 16;
    height:auto;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.65);
    background:#000;
    position:relative;
    margin:auto;
  }

  /* Blur strip/pill behind avatar+username only when current story was unseen */
  .storyViewer.is-unseen .storyViewer__meta{
    padding:10px 12px;
    border-radius:999px;
    background:rgba(0,0,0,.25);
    border:1px solid rgba(255,255,255,.10);
    backdrop-filter:blur(12px);
  }
  .storyViewer.is-seen .storyViewer__meta{
    padding:0;
    border-radius:0;
    background:transparent;
    border:0;
    backdrop-filter:none;
  }
  .storyViewer__media{width:100%;height:100%;object-fit:cover;}

  .storyViewer__arrow{
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:44px;
    height:44px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(0,0,0,.35);
    color:#fff;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    z-index:6;
  }
  .storyViewer__arrow--prev{left:18px;}
  .storyViewer__arrow--next{right:18px;}
  .storyRailItem{
    appearance:none;
    border:0;
    background:transparent;
    padding:0;
    text-align:left;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:12px;
  }
  .storyRailItem__thumb{
    width:110px;
    height:180px;
    border-radius:16px;
    overflow:hidden;
    background:#0B0F19;
    border:1px solid rgba(255,255,255,.12);
    background-size:cover;
    background-position:center;
    position:relative;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  .storyRailItem__avatarRing{
    width:56px;
    height:56px;
    border-radius:999px;
    padding:3px;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(135deg, rgba(0,212,255,.75), rgba(124,92,255,.95));
    box-shadow:0 18px 40px rgba(0,0,0,.55);
  }
  .storyRailItem__avatarRing.is-seen{background:rgba(34,48,74,.75);}
  .storyRailItem__avatar{
    width:100%;
    height:100%;
    border-radius:999px;
    border:3px solid #05070D;
    background:rgba(124,92,255,.18);
    background-size:cover;
    background-position:center;
  }
  .storyRailItem__name{
    color:#fff;
    font-weight:750;
    max-width:220px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-shadow:0 10px 24px rgba(0,0,0,.55);
  }
}

#storyComposerRoot{position:fixed;inset:0;z-index:9999}
.storyComposer{
  position:absolute;inset:0;
  background:rgba(5,7,13,.78);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
}
.storyComposer__body{
  width:min(520px, 100%);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(18,26,42,.92), rgba(15,22,38,.92));
  padding:16px;
}
.storyComposer__preview{
  margin-top:12px;
  width:100%;
  aspect-ratio: 9 / 16;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  background:#05070D;
  display:flex;
  align-items:center;
  justify-content:center;
}
.storyComposer__canvas{position:relative;width:100%;height:100%}
.storyComposer__media{width:100%;height:100%;object-fit:contain;display:block}
.storyComposer__overlay{position:absolute;inset:0}
.storyText{
  position:absolute;
  padding:6px 10px;
  border-radius:14px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  font-size:26px;
  font-weight:900;
  outline:none;
  cursor:move;
  max-width:90%;
  white-space:pre-wrap;
}
.storyText:focus{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.22)}
.storyColor{width:26px;height:26px;border-radius:999px;border:2px solid rgba(255,255,255,.18);background:var(--c);cursor:pointer}
.storyColor.is-on{border-color:rgba(255,255,255,.75);box-shadow:0 10px 18px rgba(0,0,0,.35)}
.storyComposer__title{font-weight:950;font-size:16px}
.storyComposer__close{
  position:absolute;top:12px;right:12px;
  width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  background:rgba(0,0,0,.35);
  color:#fff;font-size:28px;line-height:1;
  cursor:pointer;
}

@media (max-width: 420px){
  .main{padding:16px 12px 96px;}
  .stories{padding:8px;border-radius:14px}
  .stories__list{gap:8px;min-height:84px}
  .story{min-width:66px}
  .story__ring{width:56px;height:56px}
  .story__name{max-width:66px;font-size:11px}
  .post__head{padding:10px 10px}
  .post__body{padding:10px 10px}
  .avatar{width:32px;height:32px}
  .action{padding:7px 9px}
  .action-icon{width:38px;height:38px}
  .post__actions{gap:8px;}
  .auth{max-width:420px;padding:22px 14px 22px}
  .modal__panel{max-width:420px}
}

.post{
  background:var(--glass-bg);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-glass);
  opacity:0;
  transform:translateY(30px);
  animation:iosCardEntry var(--ios-slow) forwards;
}

.post:nth-child(1){animation-delay:0ms}
.post:nth-child(2){animation-delay:100ms}
.post:nth-child(3){animation-delay:200ms}
.post:nth-child(4){animation-delay:300ms}
.post:nth-child(5){animation-delay:400ms}
.post:nth-child(6){animation-delay:500ms}
.post:nth-child(7){animation-delay:600ms}
.post:nth-child(8){animation-delay:700ms}
.post__head{display:flex;align-items:center;justify-content:space-between;padding:12px 12px}
.post__user{display:flex;align-items:center;gap:10px}
.avatar{width:45px;height:45px;border-radius:999px;background:rgba(124,92,255,.18);border:1px solid rgba(124,92,255,.35)}
.post__meta{display:flex;flex-direction:column;line-height:1.2}
.post__name{font-weight:750;font-size:14px}
.post__time{color:var(--muted);font-size:12px}
.post__time-btn{
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  color:var(--muted);
  font-size:12px;
  cursor:pointer;
}
.post__time-btn:hover{color:var(--text)}

.post__media{background:#05070D;position:relative;overflow:hidden}
.post__media img, .post__media video{
  display:block;
  width:100%;
  height:auto;
  transition: transform 0.5s ease;
}
.post__media:hover img,
.post__media:hover video{
  transform: scale(1.05);
}

.post__media{position:relative}
.post-like-burst{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  opacity:0;
}
.post-like-burst i{
  font-size:76px;
  color:rgba(255,255,255,.95);
  text-shadow:0 10px 26px rgba(0,0,0,.55);
  transform:scale(.6);
}
.post-like-burst.is-on{opacity:1}
.post-like-burst.is-on i{animation:ttHeartBurst .55s ease-out 0s 1 forwards}

@keyframes ttHeartBurst{
  0%{transform:scale(.6);opacity:0}
  18%{transform:scale(1.15);opacity:1}
  38%{transform:scale(.98);opacity:1}
  100%{transform:scale(1.4);opacity:0}
}

.media-placeholder{width:100%;aspect-ratio: 4 / 5;}
.media-placeholder--a{
  background:radial-gradient(120% 90% at 20% 10%, rgba(124,92,255,.45), rgba(0,0,0,0)),
             radial-gradient(120% 90% at 85% 10%, rgba(0,212,255,.30), rgba(0,0,0,0)),
             linear-gradient(180deg, rgba(18,26,42,.9), rgba(5,7,13,1));
}
.media-placeholder--b{
  background:radial-gradient(120% 90% at 15% 15%, rgba(0,212,255,.40), rgba(0,0,0,0)),
             radial-gradient(120% 90% at 90% 25%, rgba(124,92,255,.32), rgba(0,0,0,0)),
             linear-gradient(180deg, rgba(18,26,42,.9), rgba(5,7,13,1));
}

.post__body{padding:12px 12px}
.post__caption{margin:0 0 10px;overflow-wrap:anywhere}
.post__caption a.tag{color:var(--primary2);font-weight:800;text-decoration:none}
.post__caption a.tag:hover{text-decoration:underline}
.post__caption a.mention{color:rgba(124,92,255,.95);font-weight:800;text-decoration:none}
.post__caption a.mention:hover{text-decoration:underline}
.post__actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.action{
  border:1px solid rgba(34,48,74,.9);
  background:rgba(18,26,42,.35);
  border-radius:999px;
  padding:8px 12px;
  cursor:pointer;
  color:var(--text);
  transition: transform var(--ios-fast), 
              box-shadow var(--ios-fast),
              background var(--ios-fast);
  opacity:0.9;
}

.action:hover{opacity:1}
.action:active{
  transform: scale(1.15) translateY(-2px);
  box-shadow: 0 10px 15px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.15);
}

.action-icon[data-action="like"][data-state="on"]{
  background:rgba(255,55,95,.16);
  border-color:rgba(255,55,95,.55);
}
.action-icon[data-action="like"][data-state="on"] i{color:var(--danger);transform:scale(1.2)}

/* Like animation */
.action-icon[data-action="like"][data-state="on"]{
  animation:iosLikePulse 0.4s ease;
}

@keyframes iosLikePulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.4)}
  100%{transform:scale(1.2)}
}

/* Bounce click animation */
@keyframes bounceClick {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.2); }
  50%  { transform: scale(0.95); }
  70%  { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@media (max-width: 360px){
  .post__head{padding:10px 10px;}
  .post__body{padding:10px 10px;}
  .post__actions{gap:8px;}
  .action{padding:7px 9px;}
}

.nav-icon{
  width:45px;height:45px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  transition: transform var(--ios-fast), 
              box-shadow var(--ios-fast),
              background var(--ios-fast);
}

.nav-icon:hover{
  transform: scale(1.1);
  box-shadow: 0 8px 12px rgba(0,0,0,0.25);
}

.nav-icon:active{
  transform: scale(1.15) translateY(-2px);
  box-shadow: 0 10px 15px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.15);
}
.nav-icon--primary{
  border-color:rgba(124,92,255,.55);
  background:linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,212,255,.65));
}

.action-icon{
  width:40px;height:40px;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.postPage__topbar{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 12px;
  background:rgba(11,15,25,.85);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(34,48,74,.6);
}
.postPage__title{font-weight:950}
.postPage__spacer{width:44px;height:44px}
.postPage__main{padding:0 0 96px}
.postPage__container{padding:12px 12px 0}
.postPage__post{border-radius:18px;overflow:hidden}
.postPage__head{padding:12px 12px}
.postPage__media img, .postPage__media video{width:100%;height:auto;display:block}
.postPage__comments{padding:0 12px 10px}
.postPage__commentsList{display:flex;flex-direction:column;gap:10px;width:100%}
.postPage__commentForm{display:flex;gap:10px;align-items:center;padding:10px 12px 0;margin:0 12px 10px;border-top:1px solid rgba(34,48,74,.55)}
.postPage__commentInput{flex:1 1 auto;border-radius:999px;border:1px solid rgba(34,48,74,.9);background:rgba(18,26,42,.35);color:var(--text);padding:10px 12px;outline:none}

.shareModal__panel{max-width:900px}
.shareModal__body{display:flex;gap:12px;margin-top:10px}
.shareModal__left{flex:1 1 55%;min-width:0}
.shareModal__right{flex:0 0 280px}
.shareModal__searchRow{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:16px;border:1px solid rgba(34,48,74,.65);background:rgba(18,26,42,.35)}
.shareModal__searchRow i{color:rgba(169,180,204,.85)}
.shareModal__search{border:0;background:transparent;outline:none;color:var(--text);padding:0;flex:1 1 auto}
.shareModal__sectionTitle{margin-top:12px;font-weight:850;color:rgba(232,236,244,.92);font-size:13px}
.shareModal__list{display:flex;flex-direction:column;gap:8px;margin-top:8px}

.shareChatRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:16px;border:1px solid rgba(34,48,74,.55);background:rgba(12,18,30,.40);cursor:pointer;transition:background .14s ease}
.shareChatRow:hover{background:rgba(20,28,45,.55)}
.shareChatRow__left{display:flex;align-items:center;gap:12px;min-width:0}
.shareChatRow__avatar{width:40px;height:40px;border-radius:999px;background:linear-gradient(135deg, rgba(124,92,255,.34), rgba(0,212,255,.18));border:1px solid rgba(124,92,255,.35);flex:0 0 auto;background-size:cover;background-position:center}
.shareChatRow__meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.shareChatRow__name{font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shareChatRow__sub{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shareChatRow__badge{min-width:18px;height:18px;border-radius:999px;background:rgba(255,77,77,.16);border:1px solid rgba(255,77,77,.40);color:rgba(255,77,77,.95);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;padding:0 6px}

.shareModal__actions{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.shareAction{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;border:1px solid rgba(34,48,74,.65);background:rgba(18,26,42,.35);color:var(--text);cursor:pointer;transition:background .14s ease, transform .14s ease}
.shareAction:hover{background:rgba(255,255,255,.03)}
.shareAction:active{transform:translateY(1px)}
.shareAction__icon{width:40px;height:40px;border-radius:16px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(34,48,74,.6);background:rgba(12,18,30,.55)}
.shareAction__label{font-weight:850}

.shareSheet__panel{max-width:900px}
@media (max-width: 860px){
  .shareModal__panel{max-width:560px}
  .shareModal__body{flex-direction:column}
  .shareModal__right{flex:0 0 auto}
  .shareSheet__panel{padding-bottom:18px}
}

.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:rgba(11,15,25,.75);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(34,48,74,.6);
}

.side-nav{display:none}

.modal-root{position:fixed;inset:0;z-index:50;pointer-events:none}
.modal{
  position:absolute;inset:0;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:16px;
}
.modal--center{align-items:center}
.modal.is-open{display:flex;pointer-events:auto}
.modal.is-open .modal__backdrop{opacity:1}
.modal.is-open .modal__panel{transform:translateY(0);opacity:1}
.modal.is-closing .modal__panel{transform:translateY(22px);opacity:0}
.modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  opacity:0;
  transition:opacity .18s ease;
}
.modal__panel{
  position:relative;
  width:100%;
  max-width:560px;
  background:linear-gradient(180deg, rgba(18,26,42,.92), rgba(15,22,38,.92));
  border:1px solid rgba(34,48,74,.8);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px;
  transform:translateY(22px);
  opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}

#editPostModal{
  position:fixed;
  inset:0;
  z-index:9999;
}

#editPostModal .editPostModal__panel{
  max-width:980px;
  width:92vw;
}

.editPostModal__layout{
  display:flex;
  gap:16px;
  margin-top:12px;
}

.editPostModal__left{
  flex:0 0 420px;
  min-width:0;
  overflow:auto;
  max-height:78vh;
}

.editPostModal__right{
  flex:1 1 auto;
  min-width:0;
}

.editPostModal__progress{
  position:relative;
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}

.editPostModal__progress[aria-hidden="true"]{
  display:none;
}

.editPostModal__progressBar{
  position:absolute;
  inset:0;
  width:40%;
  background:linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,212,255,.65));
  animation:editPostProgress 1.05s ease-in-out infinite;
}

@keyframes editPostProgress{
  0%{transform:translateX(-120%)}
  100%{transform:translateX(320%)}
}

#taggedUsersModal{z-index:70}

@media (max-width: 860px){
  #taggedUsersModal{align-items:flex-end}
  #taggedUsersModal .modal__backdrop{backdrop-filter:none}
  #taggedUsersModal .modal__panel{
    max-width:none;
    width:100%;
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    margin-bottom:66px;
    box-shadow:none;
  }
}

.modal__row{display:flex;gap:10px;align-items:center}
.modal__row + .modal__row{margin-top:10px}

.postViewModal__panel{
  max-width:935px;
  height:90vh;
  padding:0;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.postViewModal__close{
  position:absolute;
  top:10px;
  left:10px;
  right:auto;
  z-index:6;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(34,48,74,.8);
  background:rgba(18,26,42,.55);
  color:var(--text);
  cursor:pointer;
}
.postViewModal__close:hover{background:rgba(255,255,255,.06)}
.postViewModal__layout{display:flex;height:100%}
.postViewModal__media{
  flex:1 1 auto;
  min-width:0;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
}
.postViewModal__media img{width:100%;height:100%;object-fit:cover;display:block}
.postViewModal__media .post__media{width:100%;height:100%}
.postViewModal__media .post__media img{width:100%;height:100%;object-fit:cover;display:block}
.postViewModal__side{
  width:360px;
  flex:0 0 360px;
  border-left:1px solid rgba(34,48,74,.75);
  display:flex;
  flex-direction:column;
  padding:12px 12px;
  overflow:hidden;
}
.postViewModal__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0 10px;border-bottom:1px solid rgba(34,48,74,.55)}
.postViewModal__user{display:flex;align-items:center;gap:10px;min-width:0}
.postViewModal__avatar{width:36px;height:36px}
.postViewModal__meta{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.postViewModal__caption{padding:10px 0;color:rgba(232,236,244,.95);font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.postViewModal__actions{padding:2px 0 6px}
.postViewModal__likes{padding:0 0 10px;border-bottom:1px solid rgba(34,48,74,.55)}

.postViewModal__comments{flex:1 1 auto;min-height:0;overflow:auto;padding:10px 0}
.postViewModal__comments::-webkit-scrollbar{width:10px}
.postViewModal__comments::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}
.postViewModal__comments::-webkit-scrollbar-thumb{background:rgba(124,92,255,.22);border:1px solid rgba(124,92,255,.35);border-radius:999px}
.postViewModal__comments{scrollbar-width:thin;scrollbar-color:rgba(124,92,255,.35) rgba(255,255,255,.04)}

.postViewModal__commentForm{display:flex;gap:10px;align-items:center;border-top:1px solid rgba(34,48,74,.55);padding-top:10px}
.postViewModal__commentInput{
  flex:1 1 auto;
  border-radius:999px;
  border:1px solid rgba(34,48,74,.9);
  background:rgba(18,26,42,.35);
  color:var(--text);
  padding:10px 12px;
  outline:none;
}

.insightsDesktop{
  width:100%;
}

.insightsDesktop__layout{
  display:grid;
  grid-template-columns:420px 1fr;
  gap:16px;
  align-items:start;
}

.insightsDesktop__previewCol{
  position:sticky;
  top:76px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.insightsDesktop__previewMedia{
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(34,48,74,.75);
  background:#05070D;
  aspect-ratio:4/5;
  position:relative;
}

.insightsDesktop__previewMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.insightsDesktop__infoCard{
  border-radius:16px;
  border:1px solid rgba(34,48,74,.75);
  background:rgba(18,26,42,.35);
  padding:12px;
}

.insightsDesktop__userRow{
  display:flex;
  gap:10px;
  align-items:center;
}

.insightsDesktop__userAvatar{
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid rgba(34,48,74,.65);
  background:rgba(124,92,255,.18);
  background-size:cover;
  background-position:center;
}

.insightsDesktop__userName{
  font-weight:900;
}

.insightsDesktop__caption{
  margin-top:10px;
  color:rgba(232,236,244,.95);
  font-size:13px;
  line-height:1.35;
  overflow-wrap:anywhere;
}

.insightsDesktop__panel{
  min-width:0;
}

.insightsKpis{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
}

.insightsKpi{
  border-radius:16px;
  border:1px solid rgba(34,48,74,.75);
  background:rgba(18,26,42,.35);
  padding:12px;
}

.insightsKpi__label{color:var(--muted);font-size:12px;font-weight:800}
.insightsKpi__value{font-size:18px;font-weight:950;margin-top:6px}

.insightsKpi__value.is-up{animation:insightsValueUp 650ms ease}
.insightsKpi__value.is-down{animation:insightsValueDown 650ms ease}

.odometer{
  display:inline-flex;
  align-items:flex-end;
  gap:0;
  font-variant-numeric: tabular-nums;
  line-height:1;
}

.odometer__digit{
  position:relative;
  display:inline-block;
  width:0.66em;
  height:1em;
  overflow:hidden;
}

.odometer__strip{
  position:absolute;
  left:0;
  top:0;
  display:flex;
  flex-direction:column;
  will-change: transform;
  transition: transform 420ms cubic-bezier(.2,.9,.2,1);
}

.odometer__strip > span{
  height:1em;
  line-height:1;
}

.odometer__digit.is-leading{opacity:0}
.odometer__digit.is-leading.is-last{opacity:1}

@keyframes insightsValueUp{
  0%{color:inherit;transform:translateY(0)}
  20%{color:rgba(110,231,183,.95);transform:translateY(-1px)}
  100%{color:inherit;transform:translateY(0)}
}

@keyframes insightsValueDown{
  0%{color:inherit;transform:translateY(0)}
  20%{color:rgba(248,113,113,.95);transform:translateY(-1px)}
  100%{color:inherit;transform:translateY(0)}
}

.insightsCard{
  margin-top:12px;
  border-radius:16px;
  border:1px solid rgba(34,48,74,.75);
  background:rgba(18,26,42,.35);
  padding:12px;
}

@media (max-width: 860px){
  .insightsDesktop__layout{grid-template-columns:1fr;}
  .insightsDesktop__previewCol{position:static;top:auto;}
  .insightsKpis{grid-template-columns:repeat(2, minmax(0, 1fr));}
}

@media (max-width: 860px){
  .postViewModal__panel{max-width:560px;height:auto;max-height:92vh;overflow:auto}
  .postViewModal__layout{flex-direction:column}
  .postViewModal__media{max-height:55vh}
  .postViewModal__side{width:100%;flex:0 0 auto;border-left:0;border-top:1px solid rgba(34,48,74,.75)}
}

.comments__list{display:flex;flex-direction:column;gap:10px;width:100%}
.comments__item{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border-bottom:1px solid rgba(34,48,74,.55);
}
.comments__item:last-child{border-bottom:0}
.comments__avatar{
  width:36px;
  height:36px;
  border-radius:999px;
  flex:0 0 auto;
  background-color:rgba(255,255,255,.08);
  background-size:cover;
  background-position:center;
  border:1px solid rgba(34,48,74,.55);
}
.comments__content{min-width:0;flex:1 1 auto;cursor:pointer}
.comments__meta{display:flex;gap:8px;align-items:baseline;min-width:0}
.comments__nameBtn{appearance:none;border:0;background:transparent;padding:0;margin:0;cursor:pointer;font-weight:900;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comments__nameBtn:hover{text-decoration:underline}
.comments__time{color:var(--muted);font-size:12px;white-space:nowrap}
.comments__text{margin-top:4px;color:rgba(232,236,244,.95);font-size:13px;line-height:1.35;white-space:pre-wrap;word-break:break-word}
.comments__delete{
  appearance:none;
  border:0;
  background:rgba(255,77,77,.12);
  color:var(--danger);
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  font-size:12px;
  flex:0 0 auto;
}
.comments__delete:hover{background:rgba(255,77,77,.18)}

.comments__actions{display:flex;gap:10px;margin-top:8px;align-items:center}
.comments__action{appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;font-weight:800;font-size:12px;padding:0}
.comments__action:hover{color:var(--text)}
.comments__action[data-state="on"]{color:var(--danger)}

.comments__likeBtn{appearance:none;border:0;background:transparent;color:var(--muted);cursor:pointer;padding:0;line-height:1;font-size:14px}
.comments__likeBtn:hover{color:var(--text)}
.comments__likeBtn[data-state="on"]{color:var(--danger)}

.replies{margin-top:10px;margin-left:46px;display:flex;flex-direction:column;gap:8px}
.replies.is-hidden{display:none}
.reply{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px;
  border-bottom:1px solid rgba(34,48,74,.55);
}
.reply:last-child{border-bottom:0}
.reply__avatar{width:28px;height:28px;border-radius:999px;flex:0 0 auto;background:rgba(255,255,255,.08);border:1px solid rgba(34,48,74,.55);background-size:cover;background-position:center}
.reply__content{min-width:0;flex:1 1 auto}
.reply__meta{display:flex;gap:8px;align-items:baseline}
.reply__nameBtn{appearance:none;border:0;background:transparent;padding:0;margin:0;cursor:pointer;font-weight:900;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reply__nameBtn:hover{text-decoration:underline}
.reply__time{color:var(--muted);font-size:12px;white-space:nowrap}
.reply__text{margin-top:2px;color:rgba(232,236,244,.95);font-size:13px;line-height:1.35;white-space:pre-wrap;word-break:break-word}
.reply__delete{appearance:none;border:0;background:rgba(255,77,77,.10);color:var(--danger);padding:6px 10px;border-radius:999px;cursor:pointer;font-weight:800;font-size:12px;flex:0 0 auto}
.reply__delete:hover{background:rgba(255,77,77,.16)}

.uimodal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.uimodal.is-open{display:flex}
.uimodal__overlay{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(6px);
  opacity:0;
  transition:opacity .18s ease;
}
.uimodal__panel{
  position:relative;
  width:100%;
  max-width:420px;
  border-radius:20px;
  border:1px solid rgba(34,48,74,.9);
  background:linear-gradient(180deg, rgba(18,26,42,.98), rgba(15,22,38,.98));
  box-shadow:var(--shadow);
  padding:14px;
  transform:translateY(10px) scale(.98);
  opacity:0;
  transition:transform .18s ease, opacity .18s ease;
}
.uimodal.is-open .uimodal__overlay{opacity:1}
.uimodal.is-open .uimodal__panel{transform:translateY(0) scale(1);opacity:1}
.uimodal__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.uimodal__title{font-weight:900}
.uimodal__close{appearance:none;border:0;background:rgba(255,255,255,.06);color:var(--text);width:36px;height:36px;border-radius:999px;cursor:pointer;font-size:20px;line-height:1}
.uimodal__close:hover{background:rgba(255,255,255,.10)}

.uicard{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:rgba(11,15,25,.22);border:1px solid rgba(34,48,74,.55)}
.uicard__avatar{width:54px;height:54px;border-radius:999px;background:rgba(124,92,255,.18);border:1px solid rgba(124,92,255,.35)}
.uicard__meta{min-width:0;display:flex;flex-direction:column;gap:4px}
.uicard__name{font-weight:950;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uicard__sub{color:var(--muted);font-size:13px}

.sheet{position:fixed;inset:0;z-index:60;display:none;pointer-events:none}
.sheet.is-open{display:flex;pointer-events:auto}
.sheet.is-open{align-items:center;justify-content:center;padding:calc(88px + env(safe-area-inset-top)) 16px calc(102px + env(safe-area-inset-bottom))}
.sheet__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity .22s ease;z-index:0}
.sheet__panel{
  position:relative;
  z-index:1;
  width:100%;
  max-width:560px;
  background:linear-gradient(180deg, rgba(18,26,42,.98), rgba(15,22,38,.98));
  border:1px solid rgba(34,48,74,.9);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:14px;
  max-height:100%;
  overflow:hidden;
  transform:translateY(10px);
  opacity:0;
  transition:transform .22s ease, opacity .22s ease;
}
.sheet.is-open.is-active .sheet__backdrop{opacity:1}
.sheet.is-open.is-active .sheet__panel{transform:translateY(0);opacity:1}
.sheet.is-closing{pointer-events:none}
.sheet.is-closing .sheet__backdrop{opacity:0}
.sheet.is-closing .sheet__panel{transform:translateY(10px);opacity:0}
.sheet__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sheet__list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.sheet__item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px;border-radius:14px;cursor:pointer;border:1px solid rgba(34,48,74,.6);background:rgba(18,26,42,.35)}
.sheet__item:hover{background:rgba(255,255,255,.03)}
.sheet__itemLeft{display:flex;align-items:center;gap:10px;min-width:0}
.sheet__avatar{appearance:none;border:0;background:transparent;width:44px;height:44px;border-radius:0;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:rgba(169,180,204,.85)}
.sheet__avatar::before{content:"";width:16px;height:16px;display:block;opacity:.9;background:currentColor;mask-image:radial-gradient(circle at 50% 35%, #000 32%, transparent 33%),radial-gradient(circle at 50% 115%, #000 52%, transparent 53%);mask-size:100% 100%;mask-repeat:no-repeat}
.sheet__chev{color:rgba(169,180,204,.75);flex:0 0 auto}
.sheet__avatar{width:44px;height:44px;border-radius:0;background:transparent}
.sheet__avatar i{font-size:18px}
.sheet__name{font-weight:850}

 .new-chat-result{
   display:flex;
   gap:10px;
   align-items:center;
   padding:10px;
   border:1px solid rgba(34,48,74,.75);
   border-radius:14px;
   margin-bottom:8px;
   background:linear-gradient(180deg, rgba(18,26,42,.92), rgba(15,22,38,.92));
   color:var(--text);
   text-decoration:none;
 }
 .new-chat-result:hover{background:rgba(255,255,255,.03)}
 .new-chat-result:focus{outline:2px solid rgba(124,92,255,.55);outline-offset:2px}
 .new-chat-result__avatar{
   width:36px;
   height:36px;
   border-radius:999px;
   background:rgba(255,255,255,.08);
   border:1px solid rgba(124,92,255,.22);
   flex:0 0 auto;
 }
 .new-chat-result__meta{min-width:0;display:flex;flex-direction:column;gap:2px}
 .new-chat-result__name{font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .new-chat-result__sub{font-size:12px;opacity:.85}
.sheet__sub{color:var(--muted);font-size:12px}

.create-steps{display:flex;gap:8px;justify-content:center;margin:6px 0 10px}
.step-dot{width:8px;height:8px;border-radius:999px;background:rgba(169,180,204,.35);border:1px solid rgba(34,48,74,.65)}
.step-dot.is-active{background:var(--primary2);border-color:rgba(0,212,255,.55)}

.create-stage-viewport{width:100%;overflow:hidden}
.create-stage{
  display:flex;
  width:100%;
  transition:transform .26s ease;
  will-change:transform;
}
.create-body{
  flex:0 0 100%;
}
.create-body[aria-hidden="true"]{
  pointer-events:none;
}
.create-preview{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(34,48,74,.75);
  background:rgba(5,7,13,.35);
  padding:10px;
}

.create-preview__bar{display:flex;justify-content:flex-end;gap:10px;margin-bottom:10px}
.create-preview__stage{position:relative;width:100%;border-radius:16px;overflow:hidden}
.create-preview__stage img,.create-preview__stage video{display:block;width:100%;height:auto;border-radius:16px;max-height:60vh;object-fit:contain;background:#000}

.create-preview--compact{padding:8px}
.create-preview--compact img,.create-preview--compact video{display:block;width:100%;height:auto;max-height:240px;object-fit:contain;background:#000;border-radius:16px}

.create-details{display:flex;gap:12px;align-items:flex-start}
.create-details__media{flex:0 0 200px}
.create-details__form{flex:1;min-width:0}

.create-actions{display:flex;flex-wrap:wrap;gap:10px}

.create-action-row{
  width:100%;
  appearance:none;
  border:1px solid rgba(34,48,74,.9);
  background:rgba(18,26,42,.35);
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
}
.create-action-row:disabled{opacity:.55;cursor:not-allowed}
.create-action-panel{
  width:100%;
  padding:10px 0 4px;
  height:0;
  overflow:hidden;
  opacity:0;
  transform:translateY(-6px);
  transition:height .22s ease, opacity .18s ease, transform .22s ease;
}
.create-action-panel.is-open{
  opacity:1;
  transform:translateY(0);
}

@media (max-width: 520px){
  .create-details{flex-direction:column}
  .create-details__media{flex:1 1 auto;width:100%}
}

.create-tag{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  color:#fff;
  font-weight:800;
  font-size:13px;
  cursor:grab;
  user-select:none;
  touch-action:none;
}
.create-tag:active{cursor:grabbing}

.post__media{position:relative}
.post-stickers{position:absolute;inset:0;display:none;pointer-events:none}
.post-stickers.is-open{display:block}
.post-stickers.is-open{pointer-events:auto}
.post-stickers .create-tag{pointer-events:auto}

.post-tag-indicator{
  position:absolute;
  left:12px;
  bottom:12px;
  width:34px;
  height:34px;
  border-radius:999px;
  border:0;
  background:rgba(0,0,0,.55);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:2;
}
.post-tag-indicator i{font-size:14px;line-height:1}
.post-stickers.is-open + .post-tag-indicator{display:none}

#taggedUsersList{margin-top:0}

.mention-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.mention-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(18,26,42,.55);
  border:1px solid rgba(34,48,74,.9);
  color:var(--text);
  font-weight:800;
  font-size:13px;
}
.mention-chip__x{
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(255,255,255,.85);
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  cursor:pointer;
}
.mention-chip__x:hover{background:rgba(255,255,255,.12)}

.create-tag__x{
  appearance:none;
  border:0;
  background:rgba(0,0,0,.35);
  color:#fff;
  width:18px;
  height:18px;
  border-radius:999px;
  display:none;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  margin-left:8px;
}
.create-tag.is-selected .create-tag__x{display:inline-flex}

@keyframes ttPulse{
  0%{transform:translate(-50%,-50%) scale(1)}
  40%{transform:translate(-50%,-50%) scale(1.06)}
  100%{transform:translate(-50%,-50%) scale(1)}
}
.create-tag.is-pulse{animation:ttPulse .22s ease-out 0s 2}

.icon{width:20px;height:20px;display:block}
.icon-btn{
  appearance:none;
  border:1px solid rgba(34,48,74,.9);
  background:rgba(18,26,42,.55);
  color:var(--text);
  width:40px;height:40px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
}
.icon-btn--primary{
  border-color:rgba(124,92,255,.55);
  background:linear-gradient(135deg, rgba(124,92,255,.95), rgba(0,212,255,.65));
}

.icon-btn i{font-size:18px;line-height:1}
.nav-icon i{font-size:18px;line-height:1}
.nav-icon--primary i{font-size:18px;line-height:1}
.action-icon i{font-size:18px;line-height:1}

.nav-icon{position:relative}
.notif-badge{
  position:absolute;
  top:6px;
  right:6px;
  display:none;
  min-width:10px;
  height:10px;
  border-radius:999px;
  background:var(--danger);
  border:2px solid rgba(11,15,25,.95);
  box-shadow:0 0 0 1px rgba(34,48,74,.55);
}
.notif-badge[data-dot="1"]{
  display:inline-block;
}
.notif-badge[data-count]:not([data-count="0"]) {
  min-width:18px;
  height:18px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  font-weight:900;
  color:#fff;
}

.inbox{display:flex;flex-direction:column;gap:var(--gap)}
.inbox__header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.inbox__title{display:flex;flex-direction:column;gap:2px}
.inbox__search{display:flex;gap:10px;align-items:center}
.inbox__searchInput{flex:1}
.inbox__list{display:flex;flex-direction:column;gap:6px;margin-top:12px}

.thread{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 8px;
  border-radius:14px;
}
.thread:hover{background:rgba(255,255,255,.03)}
.thread__meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.thread__top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.thread__name{font-weight:850}
.thread__time{color:var(--muted);font-size:12px;white-space:nowrap}
.thread__last{color:var(--muted);font-size:13px;overflow:hidden;text-overflow:ellipsis}
.thread__active{margin-left:8px;color:rgba(0,212,255,.95);font-weight:800;font-size:12px}
.thread__badge{width:10px;height:10px;border-radius:999px;background:var(--primary2)}
.thread__avatar{position:relative}
.thread__avatar.is-online::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:999px;background:rgba(41, 217, 106, .98);border:2px solid rgba(11,15,25,.95)}

.chat__header .avatar{position:relative}
.chat__header .avatar.is-online::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:999px;background:rgba(41, 217, 106, .98);border:2px solid rgba(11,15,25,.95)}

@media (max-width: 360px){
  .setting-row{padding:10px 6px;gap:10px}
  .setting-row__icon{width:34px;height:34px}
  .setting-row__desc{display:-webkit-box;line-clamp:2;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:normal}
  .thread__last{white-space:normal}
  .thread__active{display:none}
  .icon-btn{width:36px;height:36px}
}

.notif{display:flex;gap:12px;align-items:center;padding:10px 0}
.notif + .notif{border-top:1px solid rgba(34,48,74,.55)}
.notif__text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
.notif__thumb{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid rgba(34,48,74,.55);background-size:cover;background-position:center;flex:0 0 auto}

.chat{
  display:flex;
  flex-direction:column;
  gap:12px;
  --chat-bottom-space: calc(10px + env(safe-area-inset-bottom));
  padding-bottom: var(--chat-bottom-space);
  min-height:calc(100vh - 140px)
}
.chat__header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.chat__messages{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:15px;
  overflow-y:auto;
  background: linear-gradient(180deg, var(--bg), #1e293b);
  scroll-behavior: smooth;
}

/* Scroll personalizado iOS 17 */
.chat__messages::-webkit-scrollbar {
  width: 8px;
}
.chat__messages::-webkit-scrollbar-track {
  background: var(--scrollbar-bg);
  border-radius: 4px;
}
.chat__messages::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

.chat__header .avatar{position:relative}
.chat__header .avatar.is-online::after{content:"";position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:999px;background:rgba(41, 217, 106, .98);border:2px solid rgba(11,15,25,.95)}

.chat-history-loader[hidden]{display:none !important}
.chat-history-loader{display:flex;justify-content:center;padding:8px 0;color:var(--muted);font-size:13px;background:rgba(5,7,13,.35)}

@keyframes chatPrependIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.msg.is-prepending{animation:chatPrependIn .18s ease both}
.chat.is-enter{opacity:0;transform:translateY(10px)}

.msg{
  display:flex;
  flex-direction:column;
  max-width:min(78%, 520px);
  padding:12px 18px;
  border-radius:var(--message-radius);
  position:relative;
  word-wrap:break-word;
  box-shadow:0 5px 15px rgba(0,0,0,0.25);
  transition:transform 0.2s ease, opacity 0.3s ease;
  display:inline-block;
  line-height:1.4;
}

.msg p {
  margin:0;
  padding-right:50px; /* espacio para la hora */
}

.msg .time {
  font-size:10px;
  color:var(--muted);
  position:absolute;
  bottom:5px;
  right:10px;
}

/* Animación hover iOS 17 */
.msg:hover {
  transform:scale(1.03);
}
.msg--me{
  align-self:flex-end;
  align-items:flex-end;
  background:var(--sent-bg);
  color:#fff;
  border-top-right-radius:5px;
}
.msg--them{
  align-self:flex-start;
  align-items:flex-start;
  background:var(--chat-bg);
  border-top-left-radius:5px;
}
.msg__bubble{
  padding:10px 12px;
  min-width:64px;
  max-width:100%;
  border-radius:var(--message-radius);
  border:1px solid rgba(34,48,74,.75);
  background:var(--chat-bg);
  box-shadow:0 5px 15px rgba(0,0,0,0.25);
  transition:transform 0.2s ease, opacity 0.3s ease;
  position:relative;
  word-wrap:break-word;
  line-height:1.4;
}

.msg__bubble:hover {
  transform:scale(1.03);
}
.msg__text{white-space:pre-wrap;word-break:break-word}
.msg__meta{display:flex;justify-content:flex-end}
.msg__time{
  margin-top:6px;
  color:rgba(234,240,255,.72);
  font-size:10px;
  line-height:1;
  text-align:right;
  white-space:nowrap;
  position:absolute;
  bottom:5px;
  right:10px;
}
.msg__seen{margin-top:6px;font-size:12px;opacity:.7;align-self:center}
.msg--me .msg__bubble{
  background:var(--sent-bg);
  color:#fff;
  border-top-right-radius:5px;
  box-shadow:0 5px 15px rgba(0,0,0,0.25);
}
.msg.is-sending .msg__bubble{opacity:.75}
.msg.is-failed .msg__bubble{border-color:rgba(255,92,92,.65)}
.msg__retry{margin-top:8px;align-self:center}

.msg--audio .msg__text{display:flex;align-items:center}
.msg--audio .msg__bubble{padding:10px 12px}

.msg--audio .wa-audio{
  display:flex;
  align-items:center;
  gap:10px;
  width: 332px;
  height: 56px;
  max-width:100%;
}

.msg--audio .wa-audio__el{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;width:1px;height:1px}

.msg--audio .wa-audio__avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  flex:0 0 auto;
}

.msg--audio .wa-audio__speed{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:rgba(234,240,255,.86);
  font-size:12px;
  line-height:1;
  font-variant-numeric:tabular-nums;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
}

.msg--audio .wa-audio__speed:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)}
.msg--audio .wa-audio__speed:active{transform:translateY(1px)}
.msg--audio .wa-audio__speed:focus-visible{outline:2px solid rgba(234,240,255,.32);outline-offset:2px}

.msg--audio .wa-audio__sendCancel{
  width:34px;
  height:34px;
  border-radius:999px;
  border:0;
  background:transparent;
  color:rgba(234,240,255,.88);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  position:relative;
}
.msg--audio .wa-audio__sendCancel::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:999px;
  border:2px solid rgba(234,240,255,.28);
  border-top-color: rgba(0,212,255,.75);
  animation: waAudioSendSpin 900ms linear infinite;
}
.msg--audio .wa-audio__sendCancel i{position:relative;font-size:14px;line-height:1}

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

.msg:not(.is-sending) .wa-audio__sendCancel{display:none}

.msg--audio .wa-audio__play{
  width:38px;
  height:38px;
  border-radius:10px;
  border:0;
  background:transparent;
  color:rgba(234,240,255,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:0 0 auto;
  position:relative;
  transition: background 140ms ease, color 140ms ease, transform 120ms ease;
}
.msg--audio .wa-audio__play i{font-size:15px;line-height:1}

.msg--audio .wa-audio__play:hover{background:rgba(255,255,255,.06)}
.msg--audio .wa-audio__play:active{transform:translateY(1px)}
.msg--audio .wa-audio__play:focus-visible{outline:2px solid rgba(234,240,255,.32);outline-offset:2px}

.msg--audio .wa-audio.is-playing .wa-audio__play{
  background:rgba(255,255,255,.09);
  color:rgba(234,240,255,.92);
}

 .msg--audio .wa-audio.is-loading .wa-audio__play::after{
   content:'';
   position:absolute;
   inset:7px;
   border-radius:999px;
   border:2px solid rgba(234,240,255,.22);
   border-top-color: rgba(234,240,255,.72);
   animation: waAudioLoadSpin 900ms linear infinite;
   pointer-events:none;
 }

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

.msg--audio .wa-audio__main{flex:1;min-width:0;position:relative;height:38px;padding-bottom:16px}

.msg--audio .wa-audio__wave{
  position:absolute;
  left:0;
  right:0;
  top:50%;
  transform:translateY(-50%);
  height:14px;
  border-radius:999px;
  overflow:hidden;
  background:transparent;
  box-shadow:none;
  cursor:pointer;
  outline:none;
}

.msg--audio .wa-audio__wave:focus-visible{outline:2px solid rgba(234,240,255,.26);outline-offset:3px}

.msg--audio .wa-audio__cv{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
}

.msg--audio .wa-audio__waveFill{
  position:absolute;
  left:0;top:0;bottom:0;
  width:0%;
  display:none;
}

.msg--audio .wa-audio__knob{
  position:absolute;
  top:50%;
  left:calc(0% - 4px);
  width:8px;
  height:8px;
  border-radius:999px;
  transform:translateY(-50%);
  background:rgba(0,212,255,.98);
  box-shadow: 0 6px 16px rgba(0,212,255,.22);
}

.msg--audio .wa-audio__knob{display:none}

@keyframes waAudioKnobPulse{0%,100%{transform:translateY(-50%) scale(1)}50%{transform:translateY(-50%) scale(1.18)}}
.msg--audio.is-playing .wa-audio__knob{animation: waAudioKnobPulse 900ms ease-in-out infinite}

.msg--audio .wa-audio__meta{position:absolute;left:0;right:0;bottom:-6px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.msg--audio .wa-audio__dur{font-size:12px;color:rgba(234,240,255,.88);font-variant-numeric:tabular-nums}
.msg--audio .wa-audio__time{font-size:11px;color:rgba(234,240,255,.72);font-variant-numeric:tabular-nums}

@media (max-width: 520px){
  .msg--audio .wa-audio{width:100%}
  .msg--audio .wa-audio__time{display:none}
}

.new-chat-result{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;border:1px solid rgba(34,48,74,.55);background:rgba(12,18,30,.62);cursor:pointer;transition:transform .14s ease, filter .14s ease, background .14s ease}
.new-chat-result:hover{background:rgba(20,28,45,.72)}
.new-chat-result__avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg, rgba(124,92,255,.40), rgba(0,212,255,.25));border:1px solid rgba(124,92,255,.35)}

.chat__composer{display:flex;gap:10px;align-items:center}
.chat__input{flex:1}

.chat__composer{flex-wrap:nowrap}
.chat__composer .input{width:auto;min-width:0}

.chat-new-indicator[hidden]{display:none !important}
.chat-new-indicator{position:sticky;bottom:74px;display:flex;justify-content:center;pointer-events:none;z-index:2}
.chat-new-indicator__btn{pointer-events:auto;border-color:rgba(34,48,74,.8);background:rgba(18,26,42,.82)}

.chatInfo__panel{max-width:560px}
.chatInfo__profile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px 4px 2px}
.chatInfo__avatar{width:86px;height:86px}
.chatInfo__name{font-weight:950;font-size:20px}

.chatInfo__quick{display:flex;gap:10px;justify-content:space-between;margin-top:10px}
.chatInfo__quickBtn{appearance:none;border:0;background:transparent;color:var(--text);flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 6px;border-radius:16px;cursor:pointer}
.chatInfo__quickBtn:hover{background:rgba(255,255,255,.03)}
.chatInfo__quickBtn i{font-size:18px;opacity:.95}
.chatInfo__quickBtn div{font-weight:850;font-size:12px;color:rgba(232,236,244,.92)}

.chatInfo__list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.chatInfo__row{appearance:none;border:1px solid rgba(34,48,74,.65);background:rgba(18,26,42,.35);color:var(--text);display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;cursor:pointer;text-align:left}
.chatInfo__row:hover{background:rgba(255,255,255,.03)}
.chatInfo__rowIcon{width:40px;height:40px;border-radius:16px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(34,48,74,.6);background:rgba(12,18,30,.55);flex:0 0 auto}
.chatInfo__rowIcon i{font-size:16px;opacity:.9}
.chatInfo__rowText{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.chatInfo__rowTitle{font-weight:900}
.chatInfo__chev{opacity:.75}

.chatInfo__danger{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.chatInfo__dangerBtn{appearance:none;border:1px solid rgba(34,48,74,.65);background:rgba(18,26,42,.30);color:var(--text);display:flex;align-items:center;gap:10px;padding:12px;border-radius:18px;cursor:pointer;text-align:left;font-weight:900}
.chatInfo__dangerBtn.is-red{border-color:rgba(255,77,77,.40);color:rgba(255,77,77,.95)}
.chatInfo__dangerBtn:hover{background:rgba(255,255,255,.03)}

body.page-chat-info .chatInfoPage__panel{padding:12px}
body.page-chat-info .chatInfo__profile{gap:6px;padding:6px 4px 0}
body.page-chat-info .chatInfo__avatar{width:64px;height:64px}
body.page-chat-info .chatInfo__name{font-size:17px}
body.page-chat-info .chatInfo__quick{margin-top:6px;gap:6px}
body.page-chat-info .chatInfo__quickBtn{padding:7px 6px;border-radius:14px;gap:6px}
body.page-chat-info .chatInfo__list{gap:6px;margin-top:8px}
body.page-chat-info .chatInfo__row{padding:9px;border-radius:16px}
body.page-chat-info .chatInfo__rowIcon{width:36px;height:36px;border-radius:14px}
body.page-chat-info .chatInfo__danger{gap:6px;margin-top:8px}
body.page-chat-info .chatInfo__dangerBtn{padding:9px;border-radius:16px}

.explore{display:flex;flex-direction:column;gap:var(--gap)}
.explore__header{display:flex;flex-direction:column;gap:12px}
.explore__search{display:flex;gap:10px;align-items:center}
.explore__searchInput{background:transparent;border:0;padding:0}
.explore__searchInput:focus{outline:none}
.explore__grid{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:6px}
.tile{display:block;border-radius:14px;overflow:hidden;border:1px solid rgba(34,48,74,.55)}
.tile__ph{width:100%;aspect-ratio: 1 / 1}
.tile__ph--a{background:linear-gradient(180deg, rgba(124,92,255,.35), rgba(5,7,13,1))}
.tile__ph--b{background:linear-gradient(180deg, rgba(0,212,255,.25), rgba(5,7,13,1))}
.tile__ph--c{background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(5,7,13,1))}

.profileTabs{display:flex;align-items:center;justify-content:space-around;gap:12px;border-top:1px solid rgba(34,48,74,.6);padding-top:10px}
.profileTabBtn{appearance:none;background:transparent;border:0;color:var(--muted);padding:10px 14px;border-bottom:2px solid transparent;cursor:pointer;flex:1;display:flex;align-items:center;justify-content:center}
.profileTabBtn i{font-size:18px}
.profileTabBtn.is-active{color:var(--text);border-bottom-color:rgba(255,255,255,.85)}

#profilePostsGrid.explore__grid{gap:0 !important;row-gap:0 !important;column-gap:0 !important;background:transparent;padding:0 !important;margin:0 !important}
#profilePostsGrid .tile{border:0;border-radius:0;background:transparent;position:relative;aspect-ratio:1 / 1}
#profilePostsGrid .tile__ph{border-radius:0;width:100%;height:100%;object-fit:cover;display:block}
#profilePostsGrid .tile__ph--a,#profilePostsGrid .tile__ph--b,#profilePostsGrid .tile__ph--c{height:100%}

#profilePostsGrid .tile{padding:0;margin:0}

#profileLoadMore{display:none !important}

@media (max-width: 600px){
  #profilePostsGrid.explore__grid{grid-template-columns:repeat(2, minmax(0, 1fr)) !important;}
}

[data-profile-gallery-card].card{border:0;border-radius:0;box-shadow:none;padding:0;background:transparent}
[data-profile-gallery-card] .card__title{padding:0 14px;margin-bottom:0}

.market{display:flex;flex-direction:column;gap:var(--gap)}
.market__tabs{display:flex;gap:10px;flex-wrap:wrap}
.pill{
  appearance:none;
  border:1px solid rgba(34,48,74,.8);
  background:rgba(18,26,42,.55);
  color:var(--text);
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
  font-weight:750;
}
.pill.is-active{border-color:rgba(124,92,255,.55);background:rgba(124,92,255,.18)}
.market__grid{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
.product{display:block;border-radius:16px;overflow:hidden;border:1px solid rgba(34,48,74,.75);background:rgba(18,26,42,.35)}
.product__media{width:100%;aspect-ratio: 4 / 3}
.product__media--a{background:radial-gradient(120% 90% at 20% 10%, rgba(124,92,255,.40), rgba(0,0,0,0)), linear-gradient(180deg, rgba(18,26,42,.9), rgba(5,7,13,1))}
.product__media--b{background:radial-gradient(120% 90% at 15% 15%, rgba(0,212,255,.35), rgba(0,0,0,0)), linear-gradient(180deg, rgba(18,26,42,.9), rgba(5,7,13,1))}
.product__media--c{background:radial-gradient(120% 90% at 70% 10%, rgba(255,255,255,.18), rgba(0,0,0,0)), linear-gradient(180deg, rgba(18,26,42,.9), rgba(5,7,13,1))}
.product__body{padding:12px}
.product__name{font-weight:850;margin-bottom:8px}
.product__row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.product__price{font-weight:900}
.product__meta{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px}

@media (min-width: 768px){
  .explore__header{flex-direction:row;align-items:center;justify-content:space-between}
  .explore__search{width:min(520px, 100%)}
  .market__grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
}

/* Tablets pequeñas - 600px */
@media (min-width: 429px) and (max-width: 600px) {
  .main{padding:20px 18px 96px;}
  .stories{padding:12px;border-radius:18px}
  .stories__list{gap:12px;min-height:100px}
  .story{min-width:82px}
  .story__ring{width:72px;height:72px}
  .story__name{max-width:82px;font-size:13px}
  .post__head{padding:14px 14px}
  .post__body{padding:14px 14px}
  .avatar{width:40px;height:40px}
  .post__actions{gap:12px;}
  .post__actions .action-icon{width:44px;height:44px}
  .auth{max-width:520px;padding:30px 20px 30px}
  .modal__panel{max-width:520px}
  .feed__grid{grid-template-columns:repeat(2, 1fr)}
  .profile__grid{grid-template-columns:repeat(2, 1fr)}
}

/* Tablets estándar - 768px (iPad mini, etc.) */
@media (min-width: 601px) and (max-width: 768px) {
  .main{padding:22px 20px 96px;}
  .stories{padding:14px;border-radius:20px}
  .stories__list{gap:14px;min-height:110px}
  .story{min-width:90px}
  .story__ring{width:80px;height:80px}
  .story__name{max-width:90px;font-size:14px}
  .post__head{padding:16px 16px}
  .post__body{padding:16px 16px}
  .avatar{width:44px;height:44px}
  .post__actions{gap:14px;}
  .post__actions .action-icon{width:48px;height:48px}
  .auth{max-width:560px;padding:32px 24px 32px}
  .modal__panel{max-width:560px}
  .feed__grid{grid-template-columns:repeat(2, 1fr)}
  .profile__grid{grid-template-columns:repeat(2, 1fr)}
  .topbar{display:none}
  .bottom-nav{display:none}
  .side-nav{display:block;position:fixed;left:0;top:0;bottom:0;width:92px;z-index:25;
    background:rgba(11,15,25,.80);
    backdrop-filter:blur(12px);
    border-right:1px solid rgba(34,48,74,.6);
  }
  .main{padding:22px 20px 24px; padding-left: calc(92px + 20px);}
  .modal{align-items:center}
}

/* Tablets grandes - 800px */
@media (min-width: 769px) and (max-width: 800px) {
  .main{padding:24px 22px 24px; padding-left: calc(92px + 22px);}
  .stories{padding:16px;border-radius:22px}
  .stories__list{gap:16px;min-height:120px}
  .story{min-width:98px}
  .story__ring{width:88px;height:88px}
  .story__name{max-width:98px;font-size:15px}
  .post__head{padding:18px 18px}
  .post__body{padding:18px 18px}
  .avatar{width:48px;height:48px}
  .post__actions{gap:16px;}
  .post__actions .action-icon{width:52px;height:52px}
  .auth{max-width:600px;padding:34px 28px 34px}
  .modal__panel{max-width:600px}
  .feed__grid{grid-template-columns:repeat(3, 1fr)}
  .profile__grid{grid-template-columns:repeat(3, 1fr)}
  .topbar{display:none}
  .bottom-nav{display:none}
  .side-nav{display:block;position:fixed;left:0;top:0;bottom:0;width:92px;z-index:25;
    background:rgba(11,15,25,.80);
    backdrop-filter:blur(12px);
    border-right:1px solid rgba(34,48,74,.6);
  }
  .modal{align-items:center}
}

/* Tablets grandes - 962px */
@media (min-width: 801px) and (max-width: 962px) {
  .main{padding:26px 24px 24px; padding-left: calc(92px + 24px);}
  .stories{padding:18px;border-radius:24px}
  .stories__list{gap:18px;min-height:130px}
  .story{min-width:106px}
  .story__ring{width:96px;height:96px}
  .story__name{max-width:106px;font-size:16px}
  .post__head{padding:20px 20px}
  .post__body{padding:20px 20px}
  .avatar{width:52px;height:52px}
  .post__actions{gap:18px;}
  .post__actions .action-icon{width:56px;height:56px}
  .auth{max-width:640px;padding:36px 32px 36px}
  .modal__panel{max-width:640px}
  .feed__grid{grid-template-columns:repeat(3, 1fr)}
  .profile__grid{grid-template-columns:repeat(3, 1fr)}
  .topbar{display:none}
  .bottom-nav{display:none}
  .side-nav{display:block;position:fixed;left:0;top:0;bottom:0;width:92px;z-index:25;
    background:rgba(11,15,25,.80);
    backdrop-filter:blur(12px);
    border-right:1px solid rgba(34,48,74,.6);
  }
  .modal{align-items:center}
}

/* Desktop - 1024px+ */
@media (min-width: 963px) {
  .main{padding:28px 26px 24px; padding-left: calc(92px + 26px);}
  .stories{padding:20px;border-radius:26px}
  .stories__list{gap:20px;min-height:140px}
  .story{min-width:114px}
  .story__ring{width:104px;height:104px}
  .story__name{max-width:114px;font-size:17px}
  .post__head{padding:22px 22px}
  .post__body{padding:22px 22px}
  .avatar{width:56px;height:56px}
  .post__actions{gap:20px;}
  .post__actions .action-icon{width:60px;height:60px}
  .auth{max-width:680px;padding:38px 36px 38px}
  .modal__panel{max-width:680px}
  .feed__grid{grid-template-columns:repeat(4, 1fr)}
  .profile__grid{grid-template-columns:repeat(4, 1fr)}
  .topbar{display:none}
  .bottom-nav{display:none}
  .side-nav{display:block;position:fixed;left:0;top:0;bottom:0;width:92px;z-index:25;
    background:rgba(11,15,25,.80);
    backdrop-filter:blur(12px);
    border-right:1px solid rgba(34,48,74,.6);
  }
  .modal{align-items:center}
}

/* Optimizado para desktop con sidebar derecho */
@media (min-width: 1024px) {
  .main{grid-template-columns:minmax(0, 1fr) 340px}
  .right{display:block}
  .bottom-nav{display:none}
  .feed__grid{grid-template-columns:repeat(3, 1fr)}
  .profile__grid{grid-template-columns:repeat(3, 1fr)}
}

/* Optimizado para insights desktop */
@media (min-width: 1024px) {
  body.page-insights-desktop .main{grid-template-columns:1fr}
}

/* Bottom nav específico para app root */
@media (min-width: 768px) {
  #appRoot .bottom-nav{display:none}
}

@media (min-width: 1024px) {
  #appRoot .bottom-nav{display:none}
}