/* Убрать приветственное на мобайле, если где-то появится */
@media(max-width:960px){
  .page-chat .chat-app{grid-template-columns:1fr;}
  .chat-list, .side-portrait, .desktop-only{display:none;}
  .mobile-only{display:flex;}
  .bottom-nav{display:flex;}
  body{padding-bottom:64px;} /* чтобы не перекрывалось мини-меню */
  .messages{padding-bottom:1.75rem;} /* запас под меню */
  .catalog-welcome, .msg.welcome{display:none !important;}
  .chat-catalog{grid-template-columns:1fr;}
  .catalog-list{border-right:none; padding-right:0;}
}
/* Небольшой буфер сверху центра на десктопе */
@media(min-width:961px){
  .center{padding-top:1.25rem;}
}


/* chat minimal overrides (flow + sticky composer) */

.page-chat .center{display:flex;flex-direction:column;}

.page-chat .messages{display:flex;flex-direction:column;flex:1 1 auto;overflow:auto;}

.page-chat .composer{position:sticky;bottom:0;left:0;right:0;}


/* === safe overrides (добавлены дружелюбно) === */

/* видимость блоков */
.desktop-only{display:block}
.mobile-only{display:none}
@media (max-width: 768px){
  .desktop-only{display:none}
  .mobile-only{display:flex}
}

/* верхнее меню по центру на ПК */
.site-header .topnav.center{
  display:flex; justify-content:center; gap:.8rem;
}

/* колонка центра — лента + композер */
.page-chat .center{display:flex; flex-direction:column; min-height:60vh;}
.page-chat .messages{
  display:flex; flex-direction:column;
  gap:.5rem;             /* чуть больше расстояние между пузырями */
  flex:1 1 auto; overflow:auto;
  scroll-behavior:smooth;
}
.page-chat .msg .ts{display:none} /* убираем время по просьбе */

/* композер — “приклеен” к низу центра, не прокручивается */
.page-chat .composer{
  position:sticky; bottom:0; left:0; right:0;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(20,20,20,.6);
  border-top:1px solid rgba(255,255,255,.06);
}

/* поле ввода уже, но общая ширина чата прежняя */
.page-chat .composer form{
  max-width: 720px;       /* ширина поля уже */
  margin: 0 auto;         /* центрируем форму в ширине центра */
  display:flex; gap:.4rem; padding:.6rem .8rem;
}
.page-chat #msg{
  flex:1 1 auto;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:.7rem .9rem;
}

/* немного воздуха над центральным блоком, высота боковых прежняя */
.page-chat .chat-app{gap:0}
.page-chat .center{padding-top:.6rem}
@media (min-width: 1024px){
  .page-chat .chat-list, .page-chat .side-portrait{padding-top:.0rem}
}

/* мобильная верхняя полоса */
.mobile-bar{
  position:sticky; top:0; z-index:5;
  align-items:center; gap:.6rem;
  padding:.6rem .8rem;
  background:rgba(20,20,20,.85);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mobile-bar .back{
  background:transparent; border:0; font-size:1.2rem; color:#fff;
}
.mobile-bar .ava{width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.15)}
.mobile-bar .nm{font-weight:600}

/* пузырям чуть больше «воздуха», не меняя их цветовую гамму темы */
.page-chat .msg{padding:.6rem .8rem; border-radius:14px}

/* чтобы новые сообщения всегда были видны у нижней кромки */
.page-chat .messages:after{content:""; display:block; height:6px}

/* ===== FlirtGirlAI chat overrides (safe) ===== */
.page-chat .center{display:flex;flex-direction:column;min-height:60vh}
.page-chat .messages{
  display:flex;flex-direction:column;gap:.6rem;
  flex:1 1 auto; overflow:auto; scroll-behavior:smooth;
  padding: .4rem .8rem 0;
}
/* пузыри мягче */
.page-chat .msg{padding:.6rem .9rem;border-radius:14px;line-height:1.35}
.page-chat .msg.me{align-self:flex-end}
.page-chat .msg.bot{align-self:flex-start}
/* убираем время */
.page-chat .msg .ts{display:none}

/* композер «приклеен» к низу ЦЕНТРАЛЬНОЙ колонки */
.page-chat .composer{
  position:sticky; bottom:0; z-index:3;
  backdrop-filter:saturate(140%) blur(8px);
  background:rgba(20,20,20,.66);
  border-top:1px solid rgba(255,255,255,.08);
}
.page-chat .composer form{
  max-width:720px;margin:0 auto;display:flex;gap:.5rem;
  padding:.6rem .8rem;
}
.page-chat #msg{
  flex:1 1 auto; min-width:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:14px; padding:.75rem .95rem;
}
.page-chat .send{
  border-radius:12px; padding:.6rem .9rem;
}

/* центрируем верхнее меню на ПК, оставляем мобильную шапку отдельно */
.site-header .topnav.center{display:flex;justify-content:center;gap:.8rem}

/* мобильное: без toggle-list, нижняя икон-панель */
.mobile-only{display:none}
@media (max-width: 768px){
  .desktop-only{display:none}
  .mobile-only{display:flex}

  /* нижняя икон-панель (общая для /chat/ списка; НЕ в комнате) */
  .bottom-tabs{
    position:sticky; bottom:0; z-index:5;
    display:flex; justify-content:space-around; gap:.2rem;
    padding:.5rem .6rem;
    background:rgba(20,20,20,.9);
    backdrop-filter:blur(8px);
    border-top:1px solid rgba(255,255,255,.06);
  }
  .bottom-tabs a{
    display:inline-flex; gap:.25rem; align-items:center;
    text-decoration:none; color:#ddd; padding:.45rem .7rem;
    border-radius:12px; border:1px solid transparent;
  }
  .bottom-tabs a.active{border-color:rgba(255,255,255,.15)}
}

/* ===== FG tail ===== */
.page-chat .center{display:flex;flex-direction:column;min-height:60vh}
.page-chat .messages{flex:1 1 auto;overflow:auto;display:flex;flex-direction:column;gap:.6rem;padding:.4rem .8rem 0}
.page-chat .msg{padding:.6rem .9rem;border-radius:14px;line-height:1.35}
.page-chat .msg .ts{display:none}
.page-chat .composer{position:sticky;bottom:0;z-index:3;backdrop-filter:saturate(140%) blur(8px);background:rgba(20,20,20,.66);border-top:1px solid rgba(255,255,255,.08)}
.page-chat .composer form{max-width:720px;margin:0 auto;display:flex;gap:.5rem;padding:.6rem .8rem}
.page-chat #msg{flex:1 1 auto;min-width:0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:.75rem .95rem}
.site-header .topnav.center{display:flex;justify-content:center;gap:.8rem}
@media (max-width:768px){
  .desktop-only{display:none}
  .bottom-tabs{position:sticky;bottom:0;z-index:5;display:flex;justify-content:space-around;gap:.2rem;padding:.5rem .6rem;background:rgba(20,20,20,.9);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.06)}
  .bottom-tabs a{display:inline-flex;align-items:center;gap:.25rem;text-decoration:none;color:#ddd;padding:.45rem .7rem;border-radius:12px;border:1px solid transparent}
  .bottom-tabs a.active{border-color:rgba(255,255,255,.15)}
}

/* rev28: композер снизу, список сообщений растёт снизу */
.chat-app .center{display:flex;flex-direction:column;min-height:calc(100vh - 60px);} /* 60px ~ высота хедера */
.chat-app .messages{flex:1;overflow:auto;display:flex;flex-direction:column-reverse;gap:10px;padding:12px 12px 80px;} /* 80px под композер */
.chat-app footer.composer{position:sticky;bottom:0;backdrop-filter:saturate(1.2) blur(8px);background:rgba(20,20,20,.6);padding:10px;border-top:1px solid rgba(255,255,255,.08);}
.chat-app footer.composer form{display:flex;gap:8px;max-width:720px;margin:0 auto;width:100%;}
.chat-app footer.composer #msg{flex:1;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);outline:none}
.chat-app footer.composer .send{min-width:46px;height:46px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.10)}
.chat-app .msg{max-width:68%;padding:10px 12px;border-radius:14px;line-height:1.35;}
.chat-app .msg.me{align-self:flex-end;background:rgba(255,255,255,.12);}
.chat-app .msg.bot{align-self:flex-start;background:rgba(255,255,255,.06);}
@media (max-width:900px){
  .chat-app .center{min-height:calc(100vh - 48px);} /* мобильный хедер ниже */
  .bottom-tabs{position:fixed;left:0;right:0;bottom:0;height:56px;background:#0f0f10;border-top:1px solid rgba(255,255,255,.06);display:flex;gap:16px;justify-content:center;align-items:center;z-index:40}
  .bottom-tabs a{font-size:22px;text-decoration:none}
}