/* HappyGram V26 — Aurora Atelier chat redesign
   UI-only layer. Existing API/functionality stays intact. */
:root{
  --hg-bg:#070a12;
  --hg-panel:#0b0f19;
  --hg-panel-2:#0e1320;
  --hg-line:rgba(255,255,255,.075);
  --hg-line-strong:rgba(255,255,255,.12);
  --hg-text:#f5f7ff;
  --hg-muted:#8b95aa;
  --hg-accent:#8b7cff;
  --hg-accent-2:#5de1d2;
  --hg-blue:#73a7ff;
  --hg-shadow:0 24px 70px rgba(0,0,0,.42);
}

#screen-app{background:
  radial-gradient(900px 520px at 76% -8%,rgba(123,106,255,.13),transparent 62%),
  radial-gradient(700px 500px at 28% 110%,rgba(72,190,179,.07),transparent 62%),
  #060810!important;}
.app-shell{
  grid-template-columns:76px 370px minmax(0,1fr)!important;
  background:rgba(8,11,19,.82)!important;
  border:1px solid var(--hg-line-strong)!important;
  box-shadow:0 30px 100px rgba(0,0,0,.48)!important;
}

/* Rail */
.rail{
  background:linear-gradient(180deg,#0a0e18,#080b13)!important;
  border-right:1px solid var(--hg-line)!important;
  padding:18px 0!important;
}
.rail-brand{
  width:43px!important;height:43px!important;border-radius:14px!important;
  margin-bottom:24px!important;
  background:linear-gradient(145deg,#8c7cff,#5c77ee)!important;
  box-shadow:0 10px 28px rgba(112,94,255,.28)!important;
  font-size:13px!important;
}
.rail-btn{width:46px!important;height:46px!important;border-radius:14px!important;color:#68738b!important;}
.rail-btn:hover{background:rgba(255,255,255,.045)!important;color:#dfe5f5!important;}
.rail-btn.is-active{color:#fff!important;background:rgba(139,124,255,.14)!important;box-shadow:inset 0 0 0 1px rgba(139,124,255,.18)!important;}

/* Sidebar */
.sidebar{background:linear-gradient(180deg,#0b0f18,#090c14)!important;border-right:1px solid var(--hg-line)!important;}
.sidebar-top{padding:18px 16px 13px!important;}
.me{padding:8px 9px!important;border-radius:16px!important;}
.me:hover{background:rgba(255,255,255,.035)!important;}
.me .avatar{box-shadow:0 0 0 1px rgba(255,255,255,.11),0 7px 22px rgba(0,0,0,.3)!important;}
.me-nickname{font-size:14px!important;letter-spacing:-.01em;}
.me-username{font-size:11.5px!important;color:#717d95!important;}
.search-new{padding:0 14px 12px!important;}
.search-new input{
  height:43px!important;box-sizing:border-box!important;padding:0 14px 0 40px!important;
  border-radius:14px!important;background:rgba(255,255,255,.035)!important;
  border:1px solid rgba(255,255,255,.07)!important;color:#e9edf7!important;
}
.search-new:before{content:'⌕';position:absolute;left:28px;top:8px;color:#758097;font-size:21px;z-index:2;pointer-events:none;}
.search-new input:focus{background:rgba(255,255,255,.05)!important;border-color:rgba(139,124,255,.42)!important;box-shadow:0 0 0 3px rgba(139,124,255,.08)!important;}
.story-strip{margin:0 13px 10px!important;padding:8px!important;border-radius:16px!important;background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.055)!important;}
.chat-list{padding:4px 9px 16px!important;}
.chat-item{padding:10px 10px!important;margin:2px 0!important;border-radius:16px!important;border:1px solid transparent!important;}
.chat-item:hover{background:rgba(255,255,255,.035)!important;transform:none!important;}
.chat-item.is-active{background:linear-gradient(90deg,rgba(139,124,255,.15),rgba(139,124,255,.055))!important;border-color:rgba(139,124,255,.14)!important;box-shadow:inset 2px 0 0 #9a8cff!important;}
.chat-item-name{font-size:13.5px!important;}
.chat-item-preview{font-size:12px!important;color:#758097!important;}
.chat-item-time{font-size:10px!important;color:#68738a!important;}

/* Conversation */
.conversation{
  background:
    radial-gradient(720px 380px at 74% 0%,rgba(139,124,255,.075),transparent 65%),
    radial-gradient(600px 400px at 18% 100%,rgba(93,225,210,.035),transparent 65%),
    #070a12!important;
}
.conversation:before{opacity:.15!important;background-size:28px 28px!important;}
.conversation-active{position:relative;isolation:isolate;}

/* Header — clean, compact, premium */
.conv-header{
  height:78px!important;padding:0 24px!important;gap:12px!important;
  background:rgba(9,12,20,.80)!important;
  border-bottom:1px solid rgba(255,255,255,.075)!important;
  box-shadow:0 10px 30px rgba(0,0,0,.10)!important;
  backdrop-filter:blur(26px)!important;-webkit-backdrop-filter:blur(26px)!important;
}
.conv-header-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1;}
.conv-header > .conv-header-left > .header-avatar-wrap,
.conv-header .header-avatar-wrap{position:relative!important;width:46px!important;height:46px!important;min-width:46px!important;flex:0 0 46px!important;}
.conv-header .header-avatar-wrap:before{
  content:'';position:absolute;inset:-2px;border-radius:50%;
  background:conic-gradient(from 210deg,#8b7cff,#5de1d2,#739fff,#8b7cff);
  opacity:.8;z-index:-1;
}
.conv-header .header-avatar-wrap .avatar{width:46px!important;height:46px!important;border:2px solid #0a0d15!important;box-shadow:0 4px 18px rgba(0,0,0,.32)!important;}
.conv-header .header-avatar-wrap .online-dot{right:0!important;bottom:1px!important;width:11px!important;height:11px!important;border:2px solid #0a0d15!important;box-shadow:0 0 12px rgba(80,220,170,.55)!important;}
.conv-header-info{gap:1px!important;}
.peer-name-row{display:flex;align-items:center;gap:6px;min-width:0;}
.conv-header-info .peer-nickname{font-size:15px!important;line-height:20px!important;font-weight:780!important;letter-spacing:-.025em!important;color:#f6f7fb!important;}
.verified-badge{width:15px;height:15px;display:grid;place-items:center;border-radius:50%;background:#7c6df2;color:#fff;font-size:9px;font-weight:800;box-shadow:0 2px 8px rgba(124,109,242,.3);}
.peer-meta{display:flex;align-items:center;gap:7px;min-width:0;}
.conv-header-info .peer-username{font-size:11.5px!important;line-height:16px!important;color:#7d889e!important;}
.peer-presence{font-size:10.5px;color:#68748b;position:relative;padding-left:9px;}
.peer-presence:before{content:'';position:absolute;left:0;top:50%;width:4px;height:4px;border-radius:50%;background:#5c6576;transform:translateY(-50%);}
.peer-presence.is-online{color:#72d6bb;}.peer-presence.is-online:before{background:#5de1a6;box-shadow:0 0 8px rgba(93,225,166,.7);}
.conv-header-actions{gap:6px!important;}
.conv-header-actions .icon-btn{
  width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:12px!important;
  background:rgba(255,255,255,.025)!important;border:1px solid rgba(255,255,255,.075)!important;
  color:#8490a7!important;box-shadow:none!important;
}
.conv-header-actions .icon-btn:hover{background:rgba(139,124,255,.10)!important;border-color:rgba(139,124,255,.3)!important;color:#f3f4ff!important;transform:translateY(-1px)!important;}
.conv-header-actions .video-head-btn{color:#8ea0c0!important;}

/* Messages */
.messages{
  padding:28px clamp(22px,4vw,70px) 22px!important;gap:8px!important;
  background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px)!important;
  background-size:30px 30px!important;
  scrollbar-color:rgba(255,255,255,.12) transparent!important;
}
.messages:after{content:'';display:block;min-height:4px;}
.msg{font-size:14px!important;line-height:1.48!important;border-radius:18px!important;padding:10px 14px!important;box-shadow:0 5px 18px rgba(0,0,0,.10)!important;}
.msg:not(.mine){background:#101520!important;border:1px solid rgba(255,255,255,.065)!important;color:#e7ebf4!important;border-bottom-left-radius:6px!important;}
.msg.mine{background:linear-gradient(145deg,#7669e9,#6358d8)!important;border:1px solid rgba(170,160,255,.20)!important;color:#fff!important;border-bottom-right-radius:6px!important;box-shadow:0 8px 24px rgba(87,73,210,.20)!important;}
.msg .msg-time{font-size:9.5px!important;opacity:.58!important;}
.msg.mine .msg-time{color:#fff!important;}
.reaction-pill{background:rgba(8,10,16,.55)!important;border-color:rgba(255,255,255,.09)!important;}

/* Composer */
.composer{
  min-height:76px!important;padding:12px 20px 16px!important;gap:8px!important;
  background:linear-gradient(180deg,rgba(7,10,17,.48),rgba(7,10,17,.92))!important;
  border-top:1px solid rgba(255,255,255,.06)!important;
  backdrop-filter:blur(24px)!important;-webkit-backdrop-filter:blur(24px)!important;
}
.composer input{
  height:48px!important;border-radius:17px!important;padding:0 17px!important;
  background:#0e131e!important;border:1px solid rgba(255,255,255,.075)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;color:#f2f4fa!important;
}
.composer input::placeholder{color:#68738a!important;}
.composer input:focus{border-color:rgba(139,124,255,.45)!important;box-shadow:0 0 0 3px rgba(139,124,255,.07)!important;}
.composer .icon-btn{width:40px!important;height:40px!important;border-radius:13px!important;background:rgba(255,255,255,.025)!important;border-color:rgba(255,255,255,.07)!important;color:#7d899f!important;}
.composer .icon-btn:hover{color:#fff!important;background:rgba(139,124,255,.10)!important;border-color:rgba(139,124,255,.25)!important;}
.composer .btn-send{width:46px!important;height:46px!important;border-radius:15px!important;background:linear-gradient(145deg,#8174f5,#5d7cf0)!important;box-shadow:0 9px 26px rgba(93,111,240,.28)!important;}

/* Empty state */
.conversation-empty{background:radial-gradient(circle at center,rgba(139,124,255,.055),transparent 45%);}
.conversation-empty .brand-mark.big{width:64px!important;height:64px!important;border-radius:20px!important;background:linear-gradient(145deg,#8b7cff,#5f78e8)!important;box-shadow:0 18px 45px rgba(100,91,225,.25)!important;}

/* Scrollbars */
.chat-list::-webkit-scrollbar,.messages::-webkit-scrollbar{width:7px}.chat-list::-webkit-scrollbar-thumb,.messages::-webkit-scrollbar-thumb{background:rgba(255,255,255,.10);border-radius:99px}.chat-list::-webkit-scrollbar-track,.messages::-webkit-scrollbar-track{background:transparent}

@media(max-width:760px){
  .app-shell{grid-template-columns:1fr!important;}
  .conv-header{height:66px!important;padding:0 10px!important;}
  .conv-header .header-avatar-wrap,.conv-header .header-avatar-wrap .avatar{width:40px!important;height:40px!important;min-width:40px!important;flex-basis:40px!important;}
  .conv-header-actions .icon-btn{width:34px!important;height:34px!important;flex-basis:34px!important;border-radius:11px!important;}
  .messages{padding:18px 11px 12px!important;}
  .composer{padding:9px 7px calc(9px + env(safe-area-inset-bottom,0px))!important;}
  .composer input{height:42px!important;border-radius:15px!important;}
}
@media(max-width:430px){
  .conv-header-info .peer-nickname{font-size:13px!important}.peer-presence{display:none!important;}
  .conv-header-actions{gap:3px!important}.conv-header-actions .icon-btn{width:32px!important;height:32px!important;flex-basis:32px!important;}
  .messages{padding-left:8px!important;padding-right:8px!important;}
}