/* StarGram Refined v3 — visual system, motion, accessibility and mobile polish */
:root{
  --sg-green:#22a06b;
  --sg-green-soft:rgba(34,160,107,.12);
  --sg-purple:#8257e5;
  --sg-purple-soft:rgba(130,87,229,.12);
  --sg-ease:cubic-bezier(.2,.72,.25,1);
  --sg-spring:cubic-bezier(.2,1.25,.35,1);
  --sg-line:rgba(55,65,81,.09);
  --sg-shadow:0 12px 36px rgba(39,34,22,.09);
  --sg-shadow-pop:0 22px 64px rgba(25,25,35,.19);
}
html{scroll-behavior:smooth}
button,input,textarea{touch-action:manipulation}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--sg-purple);outline-offset:3px}
::selection{background:rgba(130,87,229,.2)}

/* Calm, consistent surfaces */
.sidebar,.main,.chat-header,.composer,.side-top{background-color:rgba(255,252,245,.91)}
.sidebar{border-right-color:rgba(70,65,50,.08);box-shadow:8px 0 32px rgba(60,48,20,.035)}
.side-top{padding-bottom:10px}
.search-wrap{border:1px solid transparent;transition:background .2s var(--sg-ease),border-color .2s,box-shadow .2s}
.search-wrap:focus-within{border-color:rgba(130,87,229,.25);box-shadow:0 0 0 4px var(--sg-purple-soft)}
.chat-list{overscroll-behavior:contain;scrollbar-gutter:stable}
.chat-item{position:relative;min-height:68px;margin:3px 5px;padding:10px 11px;border:1px solid transparent;border-radius:17px;transition:background .18s var(--sg-ease),border-color .18s,transform .18s var(--sg-ease),box-shadow .18s}
.chat-item:hover{background:rgba(75,85,99,.055);transform:translateX(1px)}
.chat-item:active{transform:scale(.992)}
.chat-item.active{background:linear-gradient(120deg,rgba(242,193,78,.23),rgba(130,87,229,.075));border-color:rgba(205,160,54,.18);box-shadow:0 4px 16px rgba(90,70,20,.055)}
.chat-item .ci-title{font-size:14.5px;font-weight:680;letter-spacing:-.12px}
.chat-item .ci-last{font-size:13px;color:#77766f}
.chat-item .ci-time{font-size:11.5px;color:#8a8981}
.badge{background:var(--sg-green);color:white;box-shadow:0 2px 7px rgba(34,160,107,.18);font-variant-numeric:tabular-nums}
.chat-item.active .badge{background:var(--sg-purple)}
.avatar{flex-shrink:0;box-shadow:0 2px 8px rgba(30,30,30,.09),inset 0 0 0 1px rgba(255,255,255,.5)}

/* Chat and message transitions */
#mainPane{transform-origin:center;backface-visibility:hidden}
#mainPane.sg-chat-switch{animation:sgChatEnter .26s var(--sg-ease) both;will-change:opacity,transform}
@keyframes sgChatEnter{from{opacity:.35;transform:translate3d(10px,0,0) scale(.997)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
#mainPane .chat-header{background:rgba(255,252,245,.86);box-shadow:0 1px 0 rgba(40,40,40,.06);transition:background .2s}
.chat-header .title{font-weight:720;letter-spacing:-.2px}
#msgs{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgba(100,100,100,.22) transparent}
.msg-row{animation:sgMessageIn .18s var(--sg-ease) both}
.msg-row.fresh{animation:sgMessageIn .22s var(--sg-ease) both}
@keyframes sgMessageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.bubble{box-shadow:0 1px 2px rgba(35,35,35,.045),0 3px 10px rgba(35,35,35,.025);border-color:rgba(60,60,60,.045);transition:box-shadow .18s,border-radius .18s}
.msg-row.out .bubble{background:linear-gradient(135deg,#e4f7e9,#d5f2df);border-color:rgba(34,160,107,.09);box-shadow:0 2px 8px rgba(34,160,107,.07)}
.bubble .meta{color:rgba(70,85,75,.65)}
.msg-row.out .bubble .meta{color:rgba(45,105,75,.7)}
.reply-q{border-left:3px solid var(--sg-purple);border-radius:7px;background:rgba(130,87,229,.07)}
.mention,.bubble a{color:#7150c8}
.composer{border-top:1px solid rgba(60,60,60,.055);padding-top:10px;background:rgba(255,252,245,.93)}
.input-wrap{border:1px solid rgba(75,75,75,.09);box-shadow:0 3px 14px rgba(35,35,35,.045);transition:border-color .2s,box-shadow .2s}
.input-wrap:focus-within{border-color:rgba(130,87,229,.28);box-shadow:0 0 0 3px rgba(130,87,229,.08),0 4px 18px rgba(35,35,35,.045)}
.send-btn.on{background:linear-gradient(135deg,#36b87c,#218f62);box-shadow:0 5px 14px rgba(34,160,107,.2)}

/* Green and purple chat prefixes / role chips */
.username-prefix,.prefix-green,.role-prefix,.badge-prefix{color:var(--sg-green);font-weight:750}
.prefix-purple,.premium-prefix{color:var(--sg-purple);font-weight:750}
.prefix-green,.prefix-purple{display:inline-flex;align-items:center;vertical-align:middle;border-radius:6px;padding:1px 5px;background:color-mix(in srgb,currentColor 10%,transparent);letter-spacing:.05px}
.role-tag{display:inline-flex;align-items:center;border-radius:7px;padding:4px 7px;background:var(--sg-green-soft);color:var(--sg-green);font-size:11.5px;font-weight:700}
.role-tag.prefix-purple{background:var(--sg-purple-soft);color:var(--sg-purple)}
.verified{filter:drop-shadow(0 1px 1px rgba(45,90,160,.12))}

/* Profile and settings sheets */
.prof-hero{border-radius:24px;box-shadow:0 12px 30px rgba(40,35,20,.13)}
.prof-hero .h-name{letter-spacing:-.35px}
.rightpanel,.modal{box-shadow:var(--sg-shadow-pop);border-color:rgba(255,255,255,.7)}
.rightpanel,.modal{border-radius:24px}
.group{background:rgba(255,255,255,.8);border-color:var(--sg-line);border-radius:17px;box-shadow:0 4px 16px rgba(30,30,30,.025)}
.cell{min-height:56px;transition:background .16s var(--sg-ease)}
.cell:hover{background:rgba(100,100,120,.045)}
.cell:active{background:rgba(130,87,229,.07)}
.btn,.icon-btn,.fab,.act{transition:transform .16s var(--sg-spring),box-shadow .18s,background .18s,filter .18s}
.btn:active,.icon-btn:active,.fab:active,.act:active{transform:scale(.96)}
.modal-back{background:rgba(22,25,32,.28);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.toast{background:rgba(31,37,45,.93);color:#fff;box-shadow:0 12px 32px rgba(20,25,35,.2);border:1px solid rgba(255,255,255,.12);padding:12px 17px}

/* First-load and empty states */
#sgSplash{background:linear-gradient(145deg,#fff9e9,#f5e9d2);color:#342b18}
#sgSplash img{filter:drop-shadow(0 10px 22px rgba(233,185,73,.22))}
.welcome{gap:14px}
.welcome-logo{filter:drop-shadow(0 12px 28px rgba(233,185,73,.2));animation:sgFloat 4.5s ease-in-out infinite}
@keyframes sgFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Small screens: safe areas, stable keyboard layout, no expensive blur stack */
@media(max-width:800px){
  .sidebar{width:100%;min-width:0}
  .side-top{padding-left:12px;padding-right:12px;padding-top:max(10px,env(safe-area-inset-top))}
  .chat-item{min-height:72px;margin:3px 6px;padding:10px;border-radius:17px}
  .main{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .chat-header{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
  .composer{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
  .bubble{max-width:min(88%,520px)}
  .modal,.rightpanel{max-height:calc(100dvh - 20px - env(safe-area-inset-top));padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .bg-blobs i{filter:blur(48px);opacity:.28}
  .glass,.sidebar,.chat-header,.rightpanel,.modal{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
@media(max-width:380px){
  .chat-item{gap:9px;padding:9px}
  .chat-item .ci-title{font-size:14px}
  .chat-item .ci-last{font-size:12px}
  .bubble .txt{font-size:15px}
}
@media(hover:none){.chat-item:hover,.cell:hover{transform:none;background:initial}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .welcome-logo{animation:none}
  #mainPane.sg-chat-switch{animation:none;will-change:auto}
}

/* Runtime state feedback */
:root{--sg-viewport-height:100dvh}
.sg-network-status{position:fixed;z-index:9999;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:calc(100vw - 28px);padding:10px 15px;border-radius:13px;background:rgba(35,39,46,.94);color:#fff;font-size:13px;font-weight:600;box-shadow:0 10px 28px rgba(0,0,0,.2);text-align:center;animation:sgNetworkIn .22s var(--sg-ease) both;pointer-events:none}
.sg-network-status.is-restored{background:rgba(28,137,88,.95)}
@keyframes sgNetworkIn{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}
button[aria-busy="true"]{opacity:.72;cursor:progress}