/* ============================================================
   DYNAMIC ISLAND: ПЛАВНЫЙ ВЫХОД ИЗ НАВБАРА
   Зеркальная версия входа: клоны гаснут в навбаре,
   реальные элементы возвращаются в плашку.
   ============================================================ */

/* клоны не должны быть кликабельными */
.nav-sys-exit-clone,
.nav-sys-exit-clone *{
  pointer-events:none !important;
}

/* во время выхода не режем тени/бейджи */
.nav-left.nav-sys-closing{
  overflow:visible;
}

/* слоты ещё живы, пока идёт анимация выхода */
.nav-left.nav-sys-closing .nav-sys-slot{
  display:flex;
}

/* область заголовка/логотипа */
.nav-left.nav-sys-closing .nav-title-wrap{
  position:relative;
}

/*
  Заголовок "Уведомления" на время выхода остаётся в навбаре,
  но уже как клон и абсолютно поверх логотипа.
  Это убирает скачок ширины.
*/
.nav-left.nav-sys-closing .nav-sys-title-slot{
  position:absolute;
  left:0;
  top:50%;
  z-index:2;
  margin:0;
  transform-origin:left center;
  animation:navSysTitleOut .55s cubic-bezier(.32,.72,.28,1) both;
}

/*
  Логотип появляется в той же точке.
  Ширина логотипа анимируется от ширины заголовка к своей ширине,
  чтобы навбар не прыгал.
*/
.nav-left.nav-sys-closing .logo-text{
  position:relative;
  z-index:1;
  transform-origin:left center;
  animation:navSysLogoIn .55s cubic-bezier(.32,.72,.28,1) both;
}

/* блок кнопок в навбаре схлопывается плавно, как при входе */
.nav-left.nav-sys-closing .nav-sys-actions-slot{
  overflow:hidden;
  animation:navActionsOutSmooth .55s cubic-bezier(.32,.72,.28,1) both;
}

/* сами кнопки/иконки гаснут зеркально входу */
.nav-left.nav-sys-closing .nav-sys-actions-slot > *{
  animation:navSysIconOut .45s cubic-bezier(.32,.72,.28,1) both;
}

/* кнопка "дом" плавно возвращается */
.nav-left.nav-sys-closing .nav-cabinet-btn{
  animation:navCabinetIn .55s cubic-bezier(.32,.72,.28,1) both;
}

/* плашка при выходе получает более согласованный переход */
.sys-top-row.sys-releasing{
  pointer-events:none;
  transition:
    border-color .2s ease,
    box-shadow .3s ease,
    background .3s ease,
    transform .55s cubic-bezier(.32,.72,.28,1),
    opacity .45s ease;
}

@keyframes navSysIn{
  from{
    opacity:0;
    transform:translateY(-10px) scale(.9);
  }
  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes navActionsIn{
  0%{
    max-width:0;
    opacity:0;
    overflow:hidden;
  }
  99.9%{
    max-width:240px;
    opacity:1;
    overflow:hidden;
  }
  100%{
    max-width:240px;
    opacity:1;
    overflow:visible;
  }
}

/* заголовок в навбаре гаснет и чуть уходит вверх */
@keyframes navSysTitleOut{
  from{
    opacity:1;
    transform:translateY(-50%) translateY(0) scale(1);
  }
  to{
    opacity:0;
    transform:translateY(-50%) translateY(-10px) scale(.9);
  }
}

/* логотип появляется из того же состояния, в котором он прятался */
@keyframes navSysLogoIn{
  0%{
    opacity:0;
    max-width:var(--sys-title-width, 240px);
    transform:translateY(-8px) scale(.96);
  }
  45%{
    opacity:1;
  }
  100%{
    opacity:1;
    max-width:var(--sys-logo-width, 240px);
    transform:translateY(0) scale(1);
  }
}

@keyframes navActionsOutSmooth{
  0%{
    max-width:var(--sys-actions-out-width, 240px);
    opacity:1;
    padding-left:8px;
    padding-right:8px;
    margin-left:-8px;
    margin-right:-8px;
  }
  70%{
    opacity:1;
  }
  100%{
    max-width:0;
    opacity:0;
    padding-left:0;
    padding-right:0;
    margin-left:0;

    /*
      Компенсируем один flex-gap из .nav-left.
      Без этого после удаления .nav-sys-closing
      кнопка основного сайта прыгает на 6px.
    */
    margin-right:-6px;
  }
}

/* иконки внутри кнопок гаснут */
@keyframes navSysIconOut{
  from{
    opacity:1;
    transform:translateY(0) scale(1);
  }
  to{
    opacity:0;
    transform:translateY(-10px) scale(.9);
  }
}

/* кнопка "дом" раскрывается обратно */
@keyframes navCabinetIn{
  from{
    width:0;
    padding:0;
    border-width:0;
    opacity:0;
    transform:scale(.4);
    margin-left:-6px;
  }
  to{
    width:40px;
    padding:0;
    border-width:1px;
    opacity:1;
    transform:scale(1);
    margin-left:0;
  }
}

/* заголовок и кнопки уведомлений внутри навбара */
.nav-sys-title-slot .sys-top-title{font-size:17px;font-weight:700;letter-spacing:-.3px;white-space:nowrap;color:var(--text)}
.nav-sys-actions-slot .sys-top-actions{gap:6px}
.nav-sys-actions-slot .sys-archive-btn{width:32px;height:32px;border-radius:10px}
.nav-sys-actions-slot .sys-archive-btn svg{width:15px;height:15px}
.nav-sys-actions-slot .sys-archive-badge{top:-5px;right:-5px;min-width:16px;height:16px;font-size:9px;padding:0 4px}
@media (max-width:480px){
.nav-sys-title-slot .sys-top-title{font-size:15px}
.nav-sys-actions-slot .sys-archive-btn{width:30px;height:30px;border-radius:9px}
.nav-sys-actions-slot .sys-archive-btn svg{width:14px;height:14px}
}

/* === KEYFRAMES === */
@keyframes textGlow{0%,100%{text-shadow:0 0 10px var(--glow-soft),0 0 30px var(--glow-soft),0 0 60px var(--glow-soft)}50%{text-shadow:0 0 15px var(--glow-soft),0 0 40px var(--glow-soft),0 0 80px var(--glow-soft)}}
@keyframes moonFloat{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-20px) rotate(5deg)}}
@keyframes moonGlow{0%,100%{filter:drop-shadow(0 0 15px var(--glow-soft)) drop-shadow(0 0 40px var(--glow-soft)) drop-shadow(0 0 80px var(--glow-soft))}50%{filter:drop-shadow(0 0 25px var(--glow-soft)) drop-shadow(0 0 60px var(--glow-soft)) drop-shadow(0 0 120px var(--glow-soft))}}
@keyframes orbGlow{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.6}50%{transform:translate(-50%,-50%) scale(1.2);opacity:1}}
@keyframes slideIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes glassBlurIn{from{opacity:0}to{opacity:1}}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes fabPop{0%{transform:translateX(-50%) scale(0);opacity:0}70%{transform:translateX(-50%) scale(1.1);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:1}}
@keyframes badgePop{0%{transform:scale(0)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes barPulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes imgPulse{0%,100%{opacity:.35}50%{opacity:.8}}
@keyframes typingBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
@keyframes menuDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes menuDropUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes btnShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
/* === АДАПТИВ === */
@media (max-width:1024px){.view-container{max-width:520px;padding:0 20px}.card{padding:24px}}
@media (max-width:768px){.navbar{padding:12px 20px}.theme-toggle{width:30px;height:30px}.theme-toggle svg{width:16px;height:16px}.view-container{padding:0 16px}.card{padding:18px;margin-bottom:12px;border-radius:16px}.card h3{font-size:11px;margin-bottom:10px}.btn-primary{padding:15px;font-size:15px;border-radius:14px}.tg-identifier-input{padding:15px;font-size:15px;border-radius:14px}.link-box{padding:13px 14px;border-radius:10px}.link-text{font-size:13px}.chat-box{padding:16px;gap:10px;border-radius:16px}.msg{padding:10px 13px;font-size:14px;border-radius:16px}.msg-avatar{width:32px;height:32px;font-size:16px;line-height:32px}body.chat-open #chatContainer{padding-left:16px;padding-right:16px}body.chat-open .chat-box{padding:16px 4px}body.chat-open .chat-input-area{padding:6px 10px;border-radius:26px}.chat-input{padding:12px;font-size:14px;border-radius:14px}.send-btn,.photo-btn-label{width:46px;height:46px;border-radius:24px}.send-btn svg,.photo-btn-label svg{width:18px;height:18px}.admin-tab{padding:7px 14px;font-size:11px}.admin-list-item{padding:12px 0}.adm-btn{padding:5px 10px;font-size:10px}.loc-form input{padding:10px;font-size:12px}.rating-modal,.ping-modal{padding:24px 18px;width:94%;border-radius:20px}.rating-field{padding:10px 14px}.star-selector label{font-size:18px}.modal-title{font-size:18px}.modal-subtitle{font-size:12px;margin-bottom:20px}}
@media (max-width:480px){body{padding-bottom:100px}.cabinet{padding-top:95px}.view-container{padding:0 12px;max-width:100%}.card{padding:14px;margin-bottom:10px;border-radius:14px}.card h3{font-size:10px;margin-bottom:8px;letter-spacing:.5px}.btn-primary{padding:13px;font-size:14px;border-radius:12px}.tg-identifier-input{padding:13px;font-size:14px;border-radius:12px}.tg-identifier-hint{font-size:10px}.text-btn{font-size:13px;padding:8px;margin-top:10px}.link-box{padding:11px 12px;border-radius:10px;margin-top:8px}.link-text{font-size:12px}.chat-box{padding:12px;gap:8px;border-radius:14px}.msg{padding:8px 11px;font-size:13px;border-radius:14px;gap:8px;margin-bottom:10px}.msg-avatar{width:28px;height:28px;font-size:14px;line-height:28px}.msg-content{padding:8px 11px;border-radius:14px}.msg-content img{border-radius:6px}.msg-author{font-size:9px;margin-bottom:3px}.msg-del-btn{width:20px;height:20px}.msg-del-btn svg{width:16px;height:16px}.msg-album-grid{max-width:280px}.msg-album-grid.count-2,.msg-album-grid.count-3,.msg-album-grid.count-4{grid-template-rows:120px 120px}.msg-album-grid.count-many{grid-auto-rows:90px}body.chat-open .cabinet{padding-top:65px}body.chat-open #chatContainer{top:65px;padding-top:6px}body.chat-open .chat-box{padding:12px 2px}body.chat-open .chat-input-area{padding:5px 8px;border-radius:24px}.chat-input{padding:10px;font-size:13px;border-radius:12px}.send-btn,.photo-btn-label{width:42px;height:42px;border-radius:22px}.send-btn svg,.photo-btn-label svg{width:17px;height:17px}.scroll-down-btn{bottom:80px;width:42px;height:42px}.scroll-down-btn svg{width:18px;height:18px}.ticket-header .sys-archive-btn{width:32px;height:32px;border-radius:10px}.ticket-header .sys-archive-btn svg{width:14px;height:14px}.ticket-form-row{flex-direction:column}.admin-tab{padding:6px 12px;font-size:10px}.admin-list-item{padding:10px 0}.adm-btn{padding:5px 9px;font-size:10px;border-radius:7px}.loc-form{gap:8px;margin-top:12px;padding-top:12px}.loc-form input{padding:9px;font-size:12px;border-radius:9px}.loc-form h3{font-size:13px;margin-bottom:6px}.opt-item{padding:11px 10px;gap:12px}.opt-icon{width:34px;height:34px;border-radius:10px}.opt-icon svg{width:17px;height:17px}.opt-title{font-size:15px}.opt-sub{font-size:11px}.ping-flag{width:34px;height:34px;font-size:17px;border-radius:10px}.ping-name{font-size:14px}.ping-right .ping-val{min-width:38px}.rate-name{font-size:14px}.rating-modal,.ping-modal{padding:18px 14px;border-radius:18px;width:96%;max-width:none}.modal-close{top:10px;right:12px;font-size:24px}.modal-title{font-size:16px;margin-bottom:4px}.modal-subtitle{font-size:11px;margin-bottom:14px}.rating-fields{gap:8px;margin-bottom:16px}.rating-field{padding:8px 10px;border-radius:9px}.star-selector label{font-size:16px}.star-selector{gap:3px}.rating-comment-input{padding:10px;font-size:13px;border-radius:10px}.comment-counter{font-size:10px;margin-top:4px}.rating-submit-btn{padding:13px;font-size:14px;border-radius:12px}.rating-message{padding:10px 14px;font-size:12px;border-radius:9px;margin-top:10px}.ticket-closed-overlay{padding:16px;font-size:13px;border-radius:14px}.toast-notification{bottom:100px;padding:8px 16px;font-size:12px}.confirm-toast{bottom:100px;padding:12px 16px;font-size:13px;min-width:260px}.confirm-toast-message{margin-bottom:10px}.confirm-toast-actions{gap:12px}.confirm-toast-btn{font-size:13px;padding:5px 10px}.seg-btn{padding:7px 9px;font-size:11px}.sys-feed{padding-bottom:84px}#sysList.sys-select-mode .sys-msg{padding-right:36px}#pUserId{font-size:11px!important;padding:3px 8px!important}}
@media (max-width:380px){.view-container{padding:0 10px}.card{padding:12px;margin-bottom:8px}.btn-primary{padding:12px;font-size:13px}.tg-identifier-input{padding:12px;font-size:13px}body.chat-open .chat-box{padding:10px 2px}body.chat-open .chat-input-area{padding:5px 6px;border-radius:22px}.chat-input{padding:8px;font-size:12px}.send-btn,.photo-btn-label{width:40px;height:40px}.msg{padding:7px 10px;font-size:12px}.msg-avatar{width:26px;height:26px;font-size:13px;line-height:26px}.sys-feed{padding-bottom:84px}}
@media (hover:none){.msg-del-btn{opacity:.75}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* === ФОН СВЕТЛОЙ ТЕМЫ: день — облака, птицы, солнце === */
#daySky{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;contain:strict;opacity:0;transition:opacity .7s ease}
html[data-theme="light"] #daySky{opacity:1}
@media (prefers-reduced-motion:reduce){#daySky{transition:none}}

/* === ПИЛЛ-ЗАГОЛОВОК ВМЕСТО «ДОБРО ПОЖАЛОВАТЬ» === */
.login-screen .hero-title-wrap{flex-wrap:wrap;gap:clamp(12px,3vw,26px)}

.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:15px 32px;
  border-radius:999px;
  background:var(--pill-bg);
  border:1px solid var(--pill-border);
  backdrop-filter:var(--pill-blur);
  -webkit-backdrop-filter:var(--pill-blur);
  box-shadow:var(--pill-edge),var(--pill-shadow);
  color:var(--text);
  font-size:clamp(14px,2.8vw,20px);
  font-weight:600;
  letter-spacing:.2px;
  white-space:nowrap;
  animation:glassBlurIn .18s ease-out both;
  transition:background .5s ease,border-color .5s ease,color .5s ease,box-shadow .5s ease
}
.hero-pill svg{width:20px;height:20px;flex-shrink:0;stroke:currentColor;fill:none;opacity:.55}

@media (max-width:380px){
  .hero-pill{padding:13px 22px;gap:9px}
  .hero-pill svg{width:17px;height:17px}
}

/* === ПУСТОЕ СОСТОЯНИЕ ЧАТА === */
#chatBox{position:relative}
.chat-empty-state{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:30px 36px;
  text-align:center;
  color:var(--text-muted);
  font-size:15px;
  line-height:1.7;
  letter-spacing:.2px;
  white-space:pre-line;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  z-index:0;
  animation:fadeIn .4s ease;
}
.chat-empty-state .chat-empty-icon{
  width:56px;height:56px;
  border-radius:20px;
  background:var(--pill-bg);
  border:1px solid var(--pill-border);
  box-shadow:var(--pill-edge),var(--pill-shadow);
  backdrop-filter:var(--pill-blur);
  -webkit-backdrop-filter:var(--pill-blur);
  display:flex;align-items:center;justify-content:center;
  color:var(--text-faint);
  flex-shrink:0;
}
.chat-empty-state .chat-empty-icon svg{
  width:26px;height:26px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* === АНИМАЦИЯ ПОЯВЛЕНИЯ СООБЩЕНИЙ (v2, лёгкая) === */
@keyframes msgInUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes msgInUpUser{from{opacity:0;transform:translateY(28px) translateX(14px)}to{opacity:1;transform:translateY(0) translateX(0)}}
@keyframes msgInUpAdmin{from{opacity:0;transform:translateY(28px) translateX(-14px)}to{opacity:1;transform:translateY(0) translateX(0)}}
.msg.msg-slide-in{animation:msgInUp .28s cubic-bezier(.22,1,.36,1) both}
.msg.user.msg-slide-in{animation-name:msgInUpUser}
.msg.admin.msg-slide-in{animation-name:msgInUpAdmin}
@media (prefers-reduced-motion:reduce){.msg.msg-slide-in{animation:none}}

.sys-archive-menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.sys-archive-menu-label{display:inline-flex;align-items:center;gap:10px;min-width:0;}
.sys-archive-menu-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;
  background:var(--danger);color:#fff;font-size:10px;font-weight:800;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(255,69,58,.35);border:1px solid rgba(255,255,255,.18);
  flex-shrink:0;margin-left:auto;
}