/* StarGram Final Polish — motion, touch feedback and refined surfaces */
:root{--sg-motion-fast:140ms;--sg-motion:220ms;--sg-motion-slow:340ms;--sg-ease:cubic-bezier(.2,.75,.25,1);--sg-spring:cubic-bezier(.18,.9,.25,1.22)}
html{scroll-behavior:smooth}
body,button,input,textarea,select{ -webkit-tap-highlight-color:transparent }
button,a,[role=button],.chat-item,.chat-row,.cell,.gift-card,.icon-btn,.fab,.tab{transition:background-color var(--sg-motion) var(--sg-ease),color var(--sg-motion) var(--sg-ease),border-color var(--sg-motion) var(--sg-ease),box-shadow var(--sg-motion) var(--sg-ease),transform var(--sg-motion) var(--sg-ease),opacity var(--sg-motion) var(--sg-ease)}
button:active,.icon-btn:active,.fab:active{transform:scale(.965)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[role=button]:focus-visible{outline:2px solid color-mix(in srgb,var(--accent,#f4bd19) 78%,white);outline-offset:2px}
.chat-item,.chat-row,.cell{position:relative;isolation:isolate}
.chat-item:hover,.chat-row:hover{transform:translateX(2px)}
.chat-item:active,.chat-row:active{transform:scale(.992)}
.chat-item::after,.chat-row::after{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;pointer-events:none;transition:opacity var(--sg-motion-fast)}
.chat-item:active::after,.chat-row:active::after{opacity:.035}
.pop-menu,.rightpanel,.modal,.sheet,.auth-card,.gift-card,.call-card{transform-origin:top center}
.pop-menu:not(.hidden),.rightpanel:not(.hidden){animation:sg-pop-in var(--sg-motion) var(--sg-spring) both}
#modalRoot>*:not(.hidden),.sheet,.modal{animation:sg-sheet-in var(--sg-motion-slow) var(--sg-ease) both}
.chat-item,.chat-row{animation:sg-fade-up 260ms var(--sg-ease) both;animation-delay:calc(min(var(--sg-index,0),8)*18ms)}
.bubble,.message,.msg{animation:sg-message-in 190ms var(--sg-ease) both;transform-origin:bottom left}
.bubble.outgoing,.message.outgoing,.msg.outgoing{transform-origin:bottom right}
.toast,.toast-message{animation:sg-toast-in 240ms var(--sg-spring) both}
.inp,textarea,input,select{transition:border-color var(--sg-motion),box-shadow var(--sg-motion),background-color var(--sg-motion)}
.inp:focus,textarea:focus,input:focus,select:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent,#f4bd19) 19%,transparent)}
.avatar,.chat-avatar{transition:transform var(--sg-motion) var(--sg-ease),box-shadow var(--sg-motion)}
.chat-item:hover .avatar,.chat-row:hover .avatar{transform:scale(1.035)}
.fab{box-shadow:0 5px 16px color-mix(in srgb,var(--accent,#f4bd19) 25%,transparent)}
.fab:hover{transform:translateY(-2px);box-shadow:0 9px 24px color-mix(in srgb,var(--accent,#f4bd19) 32%,transparent)}
.group,.settings-group,.chat-filters,.side-top{transition:background-color var(--sg-motion),border-color var(--sg-motion)}
.chat-filters button{position:relative;overflow:hidden}
.chat-filters button[aria-selected=true]::after{content:"";position:absolute;left:18%;right:18%;bottom:0;height:2px;border-radius:2px;background:var(--accent,#f4bd19);animation:sg-underline-in 220ms var(--sg-ease) both}
/* Comfortable surfaces, not excessive glass */
.glass,.sheet,.modal,.pop-menu{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
::selection{background:color-mix(in srgb,var(--accent,#f4bd19) 35%,transparent)}
@keyframes sg-pop-in{from{opacity:0;transform:translateY(-5px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sg-sheet-in{from{opacity:0;transform:translateY(12px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sg-fade-up{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@keyframes sg-message-in{from{opacity:0;transform:translateY(5px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sg-toast-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes sg-underline-in{from{transform:scaleX(.35);opacity:.4}to{transform:scaleX(1);opacity:1}}
/* Optional compact chat density is controlled by the local preference script. */
html.sg-compact .chat-item,html.sg-compact .chat-row{min-height:unset;padding-top:8px!important;padding-bottom:8px!important}
html.sg-compact .chat-item .avatar,html.sg-compact .chat-row .avatar{width:42px;height:42px}
html.sg-no-motion *,html.sg-no-motion *::before,html.sg-no-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
@media(hover:none){.chat-item:hover,.chat-row:hover,.fab:hover{transform:none}}

/* Search screen refinement: compact Telegram-like search view */
/* #btnMenu = стрелка «назад» в поиске: показываем только в режиме поиска */
#btnMenu { display:none !important; }
.sidebar.tg-searching #btnMenu { display:grid !important; }
.sidebar.search-active .sidebar-brand { display:none !important; }
.sidebar.search-active .side-top { padding-top:14px; }
.search-wrap { border-radius:28px !important; min-height:46px; transition:background .2s, box-shadow .2s; }
.search-wrap:focus-within { box-shadow:0 0 0 1px var(--accent-soft, rgba(232,184,56,.22)); }
#searchBox::placeholder { opacity:.78; }
.sidebar.search-active .chat-filters { display:none !important; }
.sidebar.search-active .side-body { top:0 !important; }
.sidebar.search-active .search-panel { display:block; position:absolute; inset:0; padding:0 8px 24px; overflow:auto; background:inherit; }
.sidebar.search-active #chatList { visibility:hidden; }
.sr-tabs { display:flex; gap:4px; padding:6px 2px 10px; margin:0 0 8px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.sr-tabs::-webkit-scrollbar { display:none; }
.sr-tab { flex:0 0 auto; border:0; border-radius:20px; padding:9px 15px; color:var(--muted); background:transparent; font:inherit; font-size:14px; font-weight:600; white-space:nowrap; }
.sr-tab.active { color:var(--accent-ink, #765500); background:var(--accent-soft, rgba(232,184,56,.2)); }
.sr-recent-title { display:flex; justify-content:space-between; align-items:center; padding:8px 10px; color:var(--muted); font-weight:600; font-size:13px; }
.sr-person { min-width:72px; }
@media (max-width:700px) {
 .sidebar.search-active .sidebar-brand { display:none !important; }
 .sidebar.search-active .side-top { padding:12px 12px 8px !important; }
 .sidebar.search-active .side-body { top:0 !important; }
 .sidebar.search-active .search-panel { inset:0; }
}


/* Guard against panels that retain their open state after navigation. */
.rightpanel.hidden,
#rightPanel.hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
/* Keep mobile sheets within the viewport instead of appearing as a blank half-screen panel. */
@media (max-width: 600px) {
  .rightpanel:not(.hidden) {
    left: 12px !important;
    right: 12px !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: none !important;
    transform: none !important;
    border-radius: 22px !important;
  }
}