/* H-MAIL glossy dashboard v2 */
:root{
  --glass:rgba(12,20,33,.72);
  --glass-strong:rgba(15,23,42,.88);
  --glass-border:rgba(148,163,184,.14);
  --glass-highlight:rgba(255,255,255,.08);
  --shadow-deep:0 24px 70px rgba(0,0,0,.34);
}
body::before{
  content:"";position:fixed;inset:-20%;pointer-events:none;z-index:0;
  background:radial-gradient(circle at 16% 18%,rgba(99,102,241,.22),transparent 31%),radial-gradient(circle at 84% 14%,rgba(56,189,248,.14),transparent 27%),radial-gradient(circle at 62% 88%,rgba(16,185,129,.11),transparent 32%);
  filter:blur(12px);animation:aurora-drift 18s ease-in-out infinite alternate;
}
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:34px 34px;mask-image:linear-gradient(to bottom,black,transparent 84%);
}
@keyframes aurora-drift{from{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.08)}}
@keyframes dashboard-rise{from{opacity:0;transform:translateY(10px) scale(.992)}to{opacity:1;transform:none}}
@keyframes logo-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}

#app{position:relative;isolation:isolate;background:linear-gradient(145deg,rgba(7,11,19,.3),rgba(2,6,23,.7))}
#app>*{position:relative;z-index:1}
#sidebar{
  width:236px;background:linear-gradient(165deg,rgba(17,24,39,.9),rgba(8,15,27,.74));
  border-right:1px solid var(--glass-border);backdrop-filter:blur(26px) saturate(150%);
  -webkit-backdrop-filter:blur(26px) saturate(150%);box-shadow:18px 0 55px rgba(0,0,0,.2);
}
#main{min-width:0;background:linear-gradient(135deg,rgba(2,6,23,.18),rgba(15,23,42,.08))}
#topbar{
  height:58px;margin:10px 10px 0;padding:0 14px;border:1px solid var(--glass-border);border-radius:16px;
  background:linear-gradient(135deg,rgba(15,23,42,.86),rgba(15,23,42,.58));
  backdrop-filter:blur(22px) saturate(145%);-webkit-backdrop-filter:blur(22px) saturate(145%);
  box-shadow:inset 0 1px 0 var(--glass-highlight),0 14px 40px rgba(0,0,0,.2);animation:dashboard-rise .45s cubic-bezier(.16,1,.3,1) both;
}
#content{gap:10px;padding:10px;min-width:0}
#msg-list,#msg-view{
  border:1px solid var(--glass-border);border-radius:18px;background:linear-gradient(150deg,rgba(15,23,42,.78),rgba(7,13,24,.62));
  backdrop-filter:blur(20px) saturate(135%);-webkit-backdrop-filter:blur(20px) saturate(135%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),var(--shadow-deep);animation:dashboard-rise .5s .06s cubic-bezier(.16,1,.3,1) both;
}
#msg-list{width:350px;border-right:1px solid var(--glass-border)}
.logo{padding:16px;border-bottom-color:rgba(255,255,255,.06)}
.logo-icon{width:34px;height:34px;border-radius:11px;box-shadow:0 10px 26px var(--primary-glow),inset 0 1px 0 rgba(255,255,255,.34);animation:logo-float 5s ease-in-out infinite}
.logo-name{font-size:14px;letter-spacing:.08em}
.compose-btn{margin:12px;border-radius:14px;padding:11px 14px;box-shadow:0 12px 28px rgba(99,102,241,.2),inset 0 1px 0 rgba(255,255,255,.25)}
.nav-item{margin:2px 8px;padding:9px 11px;border-radius:11px}
.nav-item:hover{background:rgba(255,255,255,.055);transform:translateX(2px)}
.nav-item.active{background:linear-gradient(100deg,rgba(99,102,241,.2),rgba(139,92,246,.08));box-shadow:inset 0 0 0 1px rgba(129,140,248,.15),0 8px 22px rgba(0,0,0,.12)}
.hcoin-widget{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 12px 30px rgba(0,0,0,.14)}
.search-inp{height:38px;background:rgba(255,255,255,.045);box-shadow:inset 0 1px 0 rgba(255,255,255,.035)}
.msg-row{margin:7px 8px;padding:12px;border:1px solid transparent;border-radius:14px;transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease}
.msg-row:hover{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.06);transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.16)}
.msg-row.active{border-left:1px solid rgba(129,140,248,.46);border-color:rgba(129,140,248,.28);background:linear-gradient(120deg,rgba(99,102,241,.16),rgba(56,189,248,.04));box-shadow:0 12px 28px rgba(49,46,129,.18)}
.account-chip{padding:5px 11px 5px 6px;background:rgba(255,255,255,.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.07);transition:transform .18s ease,border-color .18s ease}
.account-chip:hover{transform:translateY(-1px);border-color:rgba(129,140,248,.28)}
.account-avatar{width:25px;height:25px;box-shadow:0 7px 18px var(--primary-glow)}
.hmail-feed-link{gap:7px!important;color:#c7d2fe!important;border-color:rgba(129,140,248,.2)!important;background:linear-gradient(135deg,rgba(99,102,241,.13),rgba(56,189,248,.06))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
.hmail-feed-link::before{content:"↗";font-size:10px;color:#67e8f9}
.platform-context-dot{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 12px rgba(52,211,153,.75);flex:0 0 auto}
.mv-header{background:linear-gradient(180deg,rgba(255,255,255,.025),transparent)}
.thread-msg{transition:background .18s ease}.thread-msg:hover{background:rgba(255,255,255,.018)}
.compose-box,.hcoin-box,.cp-box,#settings-panel{backdrop-filter:blur(28px) saturate(145%);-webkit-backdrop-filter:blur(28px) saturate(145%)}
button,.btn-ghost,.hmail-feed-link{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease,color .18s ease}
button:active,.btn-ghost:active,.hmail-feed-link:active{transform:scale(.97)}

@media(max-width:1024px) and (min-width:681px){
  #sidebar{width:208px}
  #msg-list{width:300px}
  #content{gap:8px;padding:8px}
}

@media(max-width:680px){
  #app{flex-direction:column-reverse;height:100dvh}
  #main{width:100%;height:calc(100dvh - 68px - env(safe-area-inset-bottom));flex:none}
  #sidebar{
    width:100%;height:calc(68px + env(safe-area-inset-bottom));min-height:calc(68px + env(safe-area-inset-bottom));
    flex-direction:row;align-items:flex-start;padding:7px 8px calc(7px + env(safe-area-inset-bottom));
    border:1px solid var(--glass-border);border-width:1px 0 0;border-radius:20px 20px 0 0;overflow:hidden;
    background:linear-gradient(180deg,rgba(15,23,42,.94),rgba(7,11,19,.98));box-shadow:0 -18px 45px rgba(0,0,0,.32);
  }
  #sidebar>.logo,#sidebar>.hcoin-widget,#sidebar>.search-wrap{display:none!important}
  #sidebar>.nav-section{display:none!important}
  #sidebar>.search-wrap+.nav-section,#sidebar>.nav-section:last-child{display:contents!important}
  #sidebar>.search-wrap+.nav-section .nav-item,#sidebar>.nav-section:last-child .nav-item{display:none}
  #nav-inbox,#nav-starred,#nav-sent,#sidebar>.nav-section:last-child .nav-item:nth-child(2){display:flex!important}
  #nav-inbox{order:1}#nav-starred{order:2}#nav-sent{order:4}#sidebar>.nav-section:last-child .nav-item:nth-child(2){order:5}
  #sidebar .compose-btn{order:3;flex:0 0 54px;width:54px;height:54px;margin:-1px 3px 0;padding:0;border-radius:17px;justify-content:center;align-items:center;box-shadow:0 10px 28px rgba(99,102,241,.38)}
  #sidebar .compose-btn svg{width:20px;height:20px}
  #sidebar .compose-btn span{display:none!important}
  #sidebar .nav-item{flex:1;height:54px;min-width:0;margin:0;padding:6px 2px;border-radius:14px;flex-direction:column;justify-content:center;gap:4px;transform:none}
  #sidebar .nav-item.active{background:rgba(99,102,241,.16)}
  #sidebar .nav-icon{width:18px;height:18px}
  #sidebar .nav-text{display:block!important;flex:none;max-width:100%;font-size:8px;line-height:1;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #sidebar .nav-badge{position:absolute;top:3px;right:8px;display:inline-block;font-size:7px;min-width:14px;padding:1px 4px}
  #topbar{height:54px;min-height:54px;margin:7px 8px 0;padding:0 9px;border-radius:14px;gap:6px}
  #refresh-btn{width:32px;height:32px;padding:0;font-size:0}
  #refresh-btn::after{content:"↻";font-size:16px}
  .hmail-feed-link{height:32px;max-width:108px;padding:0 8px!important;white-space:nowrap;overflow:hidden}
  .hmail-feed-link [data-shn-feed-label]{overflow:hidden;text-overflow:ellipsis;font-size:9px}
  .folder-title{max-width:84px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #content{padding:7px 8px 8px;gap:0;min-height:0}
  #msg-list,#msg-view{width:100%;height:100%;border-radius:16px;border:1px solid var(--glass-border);box-shadow:0 14px 38px rgba(0,0,0,.24)}
  .msg-row{margin:7px;padding:11px}
  .account-chip{padding:3px;margin-left:auto}.account-avatar{width:25px;height:25px}.account-name{display:none}
  #settings-panel{padding-bottom:env(safe-area-inset-bottom)}
}

@media(max-width:380px){
  .hmail-feed-link{max-width:78px}
  .folder-title{max-width:62px}
  #sidebar{padding-left:4px;padding-right:4px}
  #sidebar .nav-text{font-size:7px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}