/* Ulora visual refresh — refined editorial, warm paper, plum ink, soft lilac. */
:root{
  --ink:#1a262e;--brand:#296088;--brand2:#338ccf;--violet:#97b8d2;--mute:#697884;
  --side:#fffdfa;--hover:#f2f6fa;--on:#e7eef5;--line:#dbe6f0;--chip:#ecf2f7;--code:#f1f5f9;--canvas:#f8fafc;
  --sh-1:0 2px 7px rgba(24,47,64,.045);--sh-2:0 8px 24px rgba(24,47,64,.075);--sh-3:0 18px 50px rgba(24,47,64,.14);
}
html{scrollbar-color:#c5d7e6 transparent;scrollbar-width:thin}
body{background:radial-gradient(ellipse at 70% 0%,rgba(211,225,236,.30),transparent 42%),#f8fbfc;color:var(--ink)}
.aurora{opacity:.20}.aurora i{filter:blur(86px);opacity:.34}
aside{background:rgba(255,254,252,.94);border-right:1px solid #e0e8f1;box-shadow:8px 0 32px rgba(21,40,57,.025);padding:20px 14px 14px;gap:18px}
.dhead{padding:0 6px 3px}.brand .wm{width:118px;height:28px}
#new{min-height:50px;border:1px solid #d7e3ee;background:linear-gradient(130deg,#fff 0%,#f2f5f9 100%);box-shadow:0 3px 10px rgba(42,79,110,.06);border-radius:16px;color:#234d6a}
#new svg{width:20px;height:20px;background:#29628c;box-shadow:0 3px 7px rgba(41,98,140,.2)}
.gl{color:#798a96;letter-spacing:.11em;font-size:10.5px;font-weight:700}
.conv{border-radius:13px}.conv.on{background:#ebf1f7;border-color:#dae6ef;color:#235072}.conv.on::after{background:#2871a7}
header{background:rgba(248,251,252,.80);border-bottom:1px solid rgba(219,230,240,.75);padding:12px 22px;backdrop-filter:blur(18px) saturate(1.3)}
#menu{position:relative;z-index:8;flex:none;width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid #cedce9;background:#fff!important;opacity:1!important;color:#21303c;border-radius:10px;box-shadow:0 1px 5px rgba(24,47,64,.06);backdrop-filter:none;isolation:isolate;cursor:pointer;touch-action:manipulation}
#menu svg{display:block;width:18px;height:18px;opacity:1;visibility:visible}
#menu:focus-visible{outline:3px solid rgba(45,114,168,.35);outline-offset:2px}
#menu:hover{background:#edf2f7!important}
@media(max-width:760px){header{background:#f8fbfc;border-bottom-color:#dbe4ee;backdrop-filter:none}#menu{background:#fff!important}}
#thread{padding:24px 22px 32px;scroll-padding-top:90px}.col{max-width:820px}
main.is-empty #thread{overflow-y:auto;align-items:center;justify-content:center;padding:16px 22px 28px}
#empty{width:100%;max-width:690px;text-align:left;margin:0 auto;padding:20px 0 10px;animation:welcome-in .45s cubic-bezier(.2,.75,.25,1) both}
@keyframes welcome-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.welcome-mark{height:48px;display:flex;align-items:center;position:relative;margin-bottom:17px}
.welcome-symbol{display:block;width:43px;height:43px;border-radius:14px;background:#e8f0f5 url(../img/icon-96.png) center/contain no-repeat;box-shadow:0 5px 12px rgba(40,77,107,.08)}
.welcome-spark{position:absolute;left:36px;top:-4px;color:#579fd8;font-size:19px;animation:spark-float 4s ease-in-out infinite}
@keyframes spark-float{0%,100%{transform:translateY(0) rotate(0);opacity:.7}50%{transform:translateY(-4px) rotate(14deg);opacity:1}}
.welcome-eyebrow{display:inline-flex;align-items:center;gap:8px;color:#5e6f7e;background:rgba(255,255,255,.76);border:1px solid #dde7f1;padding:6px 11px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin-bottom:15px;box-shadow:0 2px 6px rgba(25,47,64,.025)}
.status-dot{width:7px;height:7px;border-radius:50%;background:#6fbc98;box-shadow:0 0 0 3px #e5f5ec}
#empty h1{font:700 clamp(34px,5.2vw,54px)/1.07 'Bricolage Grotesque',sans-serif;letter-spacing:-.045em;margin:0;max-width:620px;color:#1b2831;background:none;animation:none}
#empty h1 em{font-style:normal;color:#317eb7}
.welcome-copy{font-size:15.5px;line-height:1.7;color:#697783;max-width:530px;margin:15px 0 26px}
.starter-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 11px;color:#303f4a;font-size:12px;font-weight:700;letter-spacing:.015em}
.starter-note{color:#8b9aa6;font-size:11px;font-weight:500}
.starter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.starter-card{min-width:0;display:flex;align-items:center;gap:12px;text-align:left;border:1px solid #dee8f1;border-radius:17px;padding:14px 13px;background:rgba(255,255,255,.83);box-shadow:0 3px 10px rgba(27,48,64,.025);transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;cursor:pointer}
.starter-card:hover{transform:translateY(-2px);border-color:#bbd1e2;background:#fff;box-shadow:0 9px 24px rgba(34,65,89,.09)}
.starter-card:active{transform:translateY(0) scale(.99)}
.starter-icon{width:42px;height:42px;flex:none;border-radius:13px;display:grid;place-items:center}
.starter-icon svg{width:21px;height:21px}.icon-violet{color:#306894;background:#e7eff5}.icon-peach{color:#bd774d;background:#fff1e8}.icon-mint{color:#36886d;background:#eaf8f1}.icon-blue{color:#4677b9;background:#eaf2ff}
.starter-text{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.starter-text strong{font-size:12.5px;font-weight:700;line-height:1.35;color:#23313b}.starter-text small{font-size:11px;line-height:1.45;color:#7b8b97}.starter-arrow{color:#8ba1b5;font-size:19px;line-height:1;transition:transform .18s,color .18s}.starter-card:hover .starter-arrow{color:#2f6e9e;transform:translate(2px,-2px)}
.welcome-foot{display:flex;align-items:center;gap:8px;margin-top:19px;color:#8b98a4;font-size:11.5px}.foot-lock{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;background:#e8eff5;color:#3889c8;font-size:12px}
form{background:linear-gradient(to top,#f8fbfc 65%,rgba(248,251,252,0));padding:10px 18px max(14px,env(safe-area-inset-bottom))}
.box{max-width:820px;border:1px solid #d5e2ed;border-radius:23px;padding:13px 12px 10px;background:rgba(255,255,255,.97);box-shadow:0 7px 26px rgba(25,48,66,.075),inset 0 1px 0 rgba(255,255,255,.95);transition:border-color .2s,box-shadow .2s}
.box:focus-within{border-color:#aec7dc;box-shadow:0 10px 30px rgba(35,70,98,.11),0 0 0 4px rgba(50,137,207,.08)}
textarea{font-size:15px;line-height:1.6;color:#1f2d36}textarea::placeholder{color:#929fac}
.ib{border-radius:12px;color:#61717e}.ib:hover{background:#edf2f7;color:#296088}
#go{border-radius:13px;background:linear-gradient(145deg,#368dd0,#2a6089);box-shadow:0 5px 12px rgba(45,93,128,.25)}
#go:disabled{background:#e5ecf4;color:#a4b3c1;box-shadow:none}
.msg{margin-bottom:28px}.msg.user .b{background:linear-gradient(135deg,#2c7bb4,#2d5d80);box-shadow:0 5px 15px rgba(43,87,120,.16);border-radius:20px 20px 6px 20px}
.msg.assistant .b{line-height:1.78;color:#253139}.b pre{border-radius:15px;box-shadow:0 6px 18px rgba(18,31,40,.09)}
.cb-card{border-radius:17px;border-color:#dde7f0;box-shadow:0 3px 12px rgba(27,48,64,.035)}
.uc-chip{border-color:#d0deeb;background:#f3f7fa;color:#2d5a7b}.uc-chip:hover:not(:disabled){background:#fff;border-color:#9fbdd6;box-shadow:0 4px 14px rgba(34,65,89,.08)}
#page{background:rgba(248,251,252,.97);backdrop-filter:blur(18px)}
#ptop{border-bottom:1px solid #dde6f0;background:rgba(255,255,255,.8)}
#back{border:1px solid #dce6ef;border-radius:13px}
.view .hero{border-radius:24px;box-shadow:0 12px 28px rgba(26,57,82,.12)}
.item,.tcard,.grp2,.who{border-radius:17px}
.item{transition:transform .16s,border-color .16s,background .16s}.item:active{transform:scale(.99)}
.tcard{border:1px solid #dde7f0;background:#fff;box-shadow:0 3px 12px rgba(27,48,64,.03)}
#toast{border-radius:14px;box-shadow:0 12px 30px rgba(20,36,48,.18)}
@media(max-width:760px){
  aside{padding:14px 12px 12px;gap:14px}
  header{padding:10px 14px}
  #thread{padding:16px 14px 24px}
  main.is-empty #thread{padding:12px 18px 20px;align-items:flex-start}
  #empty{padding:22px 0 12px;max-width:560px}
  #empty h1{font-size:clamp(34px,9vw,47px)}
  .welcome-copy{font-size:14px;margin:13px 0 22px}
  .starter-grid{gap:9px}
  .starter-card{padding:12px 10px;gap:9px;border-radius:15px}
  .starter-icon{width:36px;height:36px;border-radius:11px}
  .starter-icon svg{width:19px;height:19px}
  .starter-text strong{font-size:11.5px}.starter-text small{font-size:10px}
  .starter-arrow{font-size:16px}
  form{padding-left:12px;padding-right:12px}
}
@media(max-width:420px){
  main.is-empty #thread{padding-left:15px;padding-right:15px}
  #empty{padding-top:15px}
  .welcome-symbol{width:40px;height:40px}
  .welcome-spark{left:33px}
  .starter-grid{grid-template-columns:1fr}
  .starter-card{padding:12px 13px;gap:11px}
  .starter-text strong{font-size:12.5px}.starter-text small{font-size:11px}
  .welcome-copy{margin-bottom:19px}
}
@media(prefers-reduced-motion:reduce){.welcome-spark,.starter-card,#empty{animation:none!important;transition:none!important}}

/* Final mobile drawer hardening: fully opaque panel and independent dim layer. */
@media (max-width:760px){
  body.open{overflow:hidden;overscroll-behavior:none}
  body.open aside,
  aside{background:#fff!important;opacity:1!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;isolation:isolate}
  body.open aside{position:fixed;top:0;bottom:0;left:0;width:min(320px,88vw);height:100dvh;max-height:100dvh;z-index:60;overflow-x:hidden;overflow-y:auto;transform:translateX(0);box-shadow:14px 0 40px rgba(15,28,39,.18)}
  body.open #scrim{display:block;position:fixed;inset:0;z-index:55;background:rgba(16,26,33,.48);opacity:1;backdrop-filter:none;-webkit-backdrop-filter:none;touch-action:manipulation}
  body:not(.open) #scrim{display:none!important}
  aside .dhead,aside #new,aside .grp,aside #login,aside #acct,aside #authsk{opacity:1!important;filter:none!important}
  #close{background:#eff3f8!important;border:1px solid #dbe5ef!important;color:#4a5a69!important;opacity:1!important}
  #close:focus-visible,#menu:focus-visible{outline:3px solid rgba(45,114,168,.45);outline-offset:2px}
}


/* Homepage v4: remove floating brand tile and refine the mobile welcome layout. */
.welcome-mark,.welcome-symbol,.welcome-spark{display:none!important}
#empty{padding-top:8px;padding-bottom:18px}
.welcome-eyebrow{margin-bottom:16px;background:#fff;border-color:#dde7f1}
#empty h1{max-width:600px;line-height:1.04;letter-spacing:-.048em}
.welcome-copy{max-width:560px;color:#636f7a}
.starter-head{margin-bottom:13px}
.starter-card{min-height:76px;border-color:#dee5ee;background:#fff}
.starter-card:focus-visible{outline:3px solid rgba(45,114,168,.35);outline-offset:2px}
.welcome-foot{margin-top:16px}
@media(max-width:760px){
  main.is-empty #thread{align-items:stretch;justify-content:flex-start;padding:8px 18px 18px;overscroll-behavior:contain}
  #empty{padding:10px 0 20px;max-width:560px;margin:0 auto}
  .welcome-eyebrow{font-size:10.5px;padding:7px 12px;margin-bottom:15px}
  #empty h1{font-size:clamp(32px,8.4vw,39px);line-height:1.09;letter-spacing:-.04em;max-width:14ch}
  .welcome-copy{font-size:14px;line-height:1.65;margin:12px 0 21px;max-width:36em}
  .starter-head{font-size:12px;margin-bottom:10px}
  .starter-note{font-size:10.5px}
  .starter-grid{grid-template-columns:minmax(0,1fr);gap:9px}
  .starter-card{min-height:72px;padding:12px 13px;gap:12px;border-radius:17px;box-shadow:0 3px 12px rgba(27,48,64,.035)}
  .starter-icon{width:39px;height:39px;border-radius:12px}
  .starter-text strong{font-size:13px;line-height:1.35}
  .starter-text small{font-size:11.5px;line-height:1.45}
  .welcome-foot{font-size:11px;margin-top:15px}
  form{padding-left:13px;padding-right:13px}
}
@media(max-height:760px) and (max-width:760px){
  #empty{padding-top:4px}
  .welcome-copy{margin-bottom:15px}
  .starter-card{min-height:64px;padding-top:9px;padding-bottom:9px}
  .welcome-foot{margin-top:11px}
}

/* Homepage v5: frosted-glass suggestion cards with a soft, legible surface. */
#empty{position:relative;isolation:isolate}
#empty::before{content:"";position:absolute;z-index:-1;inset:-12px -10px 0;border-radius:30px;background:radial-gradient(ellipse at 12% 8%,rgba(163,191,215,.22),transparent 48%),radial-gradient(ellipse at 90% 55%,rgba(214,226,255,.22),transparent 50%);pointer-events:none}
.starter-grid{gap:11px}
.starter-card{
  position:relative;overflow:hidden;min-height:78px;
  background:linear-gradient(135deg,rgba(255,255,255,.60),rgba(255,255,255,.34))!important;
  border:1px solid rgba(255,255,255,.84)!important;
  outline:1px solid rgba(185,206,225,.55);outline-offset:-1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 22px rgba(46,74,98,.055)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.35);backdrop-filter:blur(18px) saturate(1.35);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease;
}
.starter-card::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),transparent);pointer-events:none}
.starter-card:hover{transform:translateY(-2px);background:linear-gradient(135deg,rgba(255,255,255,.78),rgba(246,249,251,.53))!important;outline-color:rgba(103,163,215,.72);box-shadow:inset 0 1px 0 #fff,0 12px 28px rgba(46,74,98,.10)!important}
.starter-card:active{transform:scale(.99)}
.starter-icon{box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.starter-text strong{font-size:13px;letter-spacing:-.012em}
.starter-text small{font-size:11.5px}
.welcome-dismiss{opacity:0;transform:translateY(-5px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}
#empty[hidden]{display:none!important}
@media(max-width:760px){
  #empty::before{inset:-8px -6px 0;border-radius:24px}
  .starter-card{min-height:72px;background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.38))!important;-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3)}
  .starter-text strong{font-size:13px}.starter-text small{font-size:11.5px}
}
@media(prefers-reduced-motion:reduce){.welcome-dismiss,.starter-card{transition:none!important}}


/* v6: concise homepage, exactly three glass suggestion cards */
.welcome-eyebrow{margin-bottom:22px}
.welcome-copy{max-width:34rem;margin-top:14px;margin-bottom:24px;line-height:1.55}
.starter-head{justify-content:flex-start;margin:0 0 12px;font-size:13px;letter-spacing:0}
.starter-grid{grid-template-columns:minmax(0,1fr);gap:10px}
.starter-card{background:rgba(255,255,255,.56)!important;backdrop-filter:blur(18px) saturate(145%);-webkit-backdrop-filter:blur(18px) saturate(145%);border:1px solid rgba(255,255,255,.88);box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 8px 24px rgba(46,74,97,.055);min-height:74px}
.starter-card:hover{background:rgba(255,255,255,.76)!important;border-color:rgba(163,192,215,.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 10px 26px rgba(46,74,97,.09)}
.starter-text strong{font-size:13px;line-height:1.35}.starter-text small{font-size:11.5px;line-height:1.4}
@media(max-width:600px){.welcome-eyebrow{margin-bottom:20px}.welcome-copy{margin-bottom:22px}.starter-card{min-height:72px;padding:12px 13px}.starter-text strong{font-size:12.5px}.starter-text small{font-size:11px}}

/* v7: calmer welcome area — remove blinking greeting strip and card lift effects. */
.welcome-eyebrow,
.welcome-eyebrow .status-dot{display:none!important;animation:none!important;box-shadow:none!important}
#empty::before{display:none!important}
#empty{animation:none!important}
.starter-card{
  min-height:62px!important;
  padding:9px 11px!important;
  gap:10px!important;
  border-radius:14px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78)!important;
  transition:border-color .15s ease,background-color .15s ease!important;
}
.starter-card:hover{
  transform:none!important;
  background:rgba(255,255,255,.58)!important;
  border-color:rgba(163,192,215,.75)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)!important;
}
.starter-card:active{transform:none!important}
.starter-icon{width:32px!important;height:32px!important;border-radius:10px!important;box-shadow:none!important}
.starter-icon svg{width:17px!important;height:17px!important}
.starter-text strong{font-size:12px!important;line-height:1.3!important}
.starter-text small{font-size:10.5px!important;line-height:1.35!important}
.starter-arrow{font-size:15px!important;transition:none!important}
.starter-card:hover .starter-arrow{transform:none!important;color:#8ba1b5!important}
.starter-grid{gap:8px!important}
@media(max-width:600px){
  #empty{padding-top:12px!important}
  #empty h1{margin-top:0!important}
  .welcome-copy{margin-top:10px!important;margin-bottom:17px!important}
  .starter-head{margin-bottom:9px!important}
  .starter-card{min-height:58px!important;padding:8px 10px!important;gap:9px!important}
  .starter-icon{width:30px!important;height:30px!important}
  .starter-text strong{font-size:12px!important}
  .starter-text small{font-size:10.5px!important}
}
@media(prefers-reduced-motion:reduce){.starter-card{transition:none!important}}


/* v8: subtle, premium motion — no bouncing popup behavior. */
@keyframes ulora-soft-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ulora-card-enter {
  from { opacity: 0; transform: translateY(9px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes ulora-icon-arrive {
  0% { opacity: .65; transform: scale(.92); }
  70% { opacity: 1; transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes ulora-glass-glint {
  0%, 72%, 100% { transform: translateX(-145%) skewX(-14deg); opacity: 0; }
  12% { opacity: .42; }
  32% { transform: translateX(240%) skewX(-14deg); opacity: 0; }
}
#empty:not([hidden]) h1,
#empty:not([hidden]) .welcome-copy,
#empty:not([hidden]) .starter-head,
#empty:not([hidden]) .welcome-foot {
  animation: ulora-soft-enter .48s cubic-bezier(.2,.7,.25,1) both;
}
#empty:not([hidden]) h1 { animation-delay: .04s; }
#empty:not([hidden]) .welcome-copy { animation-delay: .10s; }
#empty:not([hidden]) .starter-head { animation-delay: .14s; }
#empty:not([hidden]) .welcome-foot { animation-delay: .34s; }
#empty:not([hidden]) .starter-card {
  animation: ulora-card-enter .42s cubic-bezier(.2,.7,.25,1) both;
  will-change: opacity, transform;
}
#empty:not([hidden]) .starter-card:nth-child(1) { animation-delay: .16s; }
#empty:not([hidden]) .starter-card:nth-child(2) { animation-delay: .23s; }
#empty:not([hidden]) .starter-card:nth-child(3) { animation-delay: .30s; }
.starter-card { transform-origin: center; }
.starter-card::after {
  content: "";
  position: absolute;
  top: -20%; bottom: -20%; left: 0;
  width: 32%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  transform: translateX(-145%) skewX(-14deg);
  pointer-events: none;
  opacity: 0;
}
#empty:not([hidden]) .starter-card::after {
  animation: ulora-glass-glint 1.15s ease-out .55s 1 both;
}
.starter-icon { transition: background-color .22s ease, color .22s ease; }
.starter-card:focus-visible { outline: 3px solid rgba(45,114,168,.38); outline-offset: 3px; }
@media (hover:hover) and (pointer:fine) {
  .starter-card:hover .starter-icon { animation: ulora-icon-arrive .28s ease-out both; }
}
@media (prefers-reduced-motion: reduce) {
  #empty:not([hidden]) h1,
  #empty:not([hidden]) .welcome-copy,
  #empty:not([hidden]) .starter-head,
  #empty:not([hidden]) .welcome-foot,
  #empty:not([hidden]) .starter-card,
  #empty:not([hidden]) .starter-card::after,
  .starter-card:hover .starter-icon {
    animation: none !important;
    will-change: auto;
  }
  .starter-icon { transition: none !important; }
}

/* Compact app navigation controls — override global button sizing on mobile. */
@media (max-width:760px){
  #menu{box-sizing:border-box!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;padding:0!important;border-radius:10px!important;display:grid!important;place-items:center!important;flex:0 0 36px!important}
  #menu svg{width:18px!important;height:18px!important}
  aside #close{box-sizing:border-box!important;width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important;max-width:36px!important;max-height:36px!important;padding:0!important;margin:0!important;border-radius:10px!important;display:grid!important;place-items:center!important;flex:0 0 36px!important}
  aside #close svg{width:18px!important;height:18px!important}
}

/* v11: panel menu premium — kaca lembut, gradien ungu, animasi halus */
@media (max-width:760px){
  aside,body.open aside{
    width:min(276px,80vw)!important;padding:14px 12px 12px!important;gap:12px!important;
    border-radius:0 26px 26px 0!important;border-right:1px solid rgba(109,164,221,.28)!important;
    background:
      radial-gradient(120% 34% at 0% 0%,rgba(47,128,199,.16),transparent 70%),
      radial-gradient(90% 28% at 100% 100%,rgba(29,80,117,.10),transparent 70%),
      linear-gradient(180deg,#fff 0%,#f8fbfc 100%)!important;
    box-shadow:18px 0 48px rgba(17,50,74,.22),inset -1px 0 0 rgba(255,255,255,.9)!important}
  body.open #scrim{background:rgba(16,26,33,.42)!important;-webkit-backdrop-filter:blur(3px)!important;backdrop-filter:blur(3px)!important}

  /* kepala */
  aside .dhead{padding:2px 2px 4px}
  aside .wm{height:20px;width:104px}
  aside #close{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;max-width:34px!important;max-height:34px!important;flex:0 0 34px!important;border-radius:12px!important;background:rgba(255,255,255,.75)!important;border:1px solid rgba(109,164,221,.35)!important;color:#39627f!important;box-shadow:0 2px 8px rgba(29,80,117,.10),inset 0 1px 0 #fff;transition:transform .15s,background .15s}
  aside #close svg{width:16px!important;height:16px!important}
  aside #close:active{transform:scale(.9)}

  /* chat baru */
  aside #new{position:relative;overflow:hidden;padding:12px 14px!important;gap:9px!important;border-radius:16px!important;border:0!important;color:#fff!important;font-size:15px!important;
    background:linear-gradient(135deg,#2f80c7 0%,#226090 55%,#2a6cab 100%)!important;
    box-shadow:0 10px 22px -6px rgba(29,80,117,.55),0 2px 4px rgba(29,80,117,.25),inset 0 1px 0 rgba(255,255,255,.35)!important;transition:transform .15s,box-shadow .15s}
  aside #new::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:34%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);transform:translateX(-160%) skewX(-16deg);animation:ulSheen 4.8s ease-in-out 1.2s infinite;pointer-events:none}
  aside #new svg{width:14px!important;height:14px!important;padding:4px!important;background:rgba(255,255,255,.22)!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
  aside #new:active{transform:scale(.97)}
  @keyframes ulSheen{0%,60%,100%{transform:translateX(-160%) skewX(-16deg)}85%{transform:translateX(420%) skewX(-16deg)}}

  /* riwayat */
  aside .gl{display:flex;align-items:center;gap:9px;font-size:10.5px!important;font-weight:700;letter-spacing:.14em!important;color:#7d909f!important;padding:4px 6px 8px!important}
  aside .gl::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(109,164,221,.45),transparent)}
  aside #list{gap:4px!important;padding:0 0 8px!important}
  aside .conv{border-radius:14px!important;border:1px solid transparent!important;transition:background .15s,border-color .15s}
  aside .conv .t{padding:10px 6px 10px 12px!important;font-size:13.5px!important;gap:10px!important}
  aside .conv .t::before{width:15px!important;height:15px!important}
  aside .conv:active{background:#eaf0f6}
  aside .conv.on{background:linear-gradient(135deg,#e9f0f5,#dde7f0)!important;border-color:rgba(47,128,199,.30)!important;color:#194564!important;box-shadow:0 4px 12px -4px rgba(29,80,117,.25)!important}
  aside .conv .x{width:30px!important;height:30px!important;margin-right:4px!important}

  /* kosong */
  aside .empty-h{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 14px 22px!important;font-size:13.5px!important;font-weight:600;color:#5d6c77!important;border:1.5px dashed rgba(109,164,221,.55)!important;border-radius:20px!important;background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(238,243,248,.6))}
  aside .empty-h::before{content:"";width:46px;height:46px;border-radius:16px;margin-bottom:4px;
    background:linear-gradient(135deg,#2f80c7,#2a6cab);
    -webkit-mask:none;mask:none;
    box-shadow:0 8px 18px -6px rgba(29,80,117,.5),inset 0 1px 0 rgba(255,255,255,.4);
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M20 12a7 7 0 0 1-10.3 6.2L4 19.5l1.3-4.2A7 7 0 1 1 20 12z' transform='translate(0 -1)'/><path d='M9 11.2h6M9 14h3.5'/></svg>"),linear-gradient(135deg,#2f80c7,#2a6cab);
    background-size:24px 24px,100% 100%;background-position:center;background-repeat:no-repeat}
  aside .empty-h::after{content:"Mulai chat baru, nanti tersimpan di sini.";font-size:11.5px;font-weight:500;color:#899ba9;line-height:1.4;max-width:20ch}

  /* masuk & akun */
  aside #login{position:relative;overflow:hidden;min-height:48px!important;padding:12px 16px!important;border-radius:16px!important;font-size:15px!important;font-weight:700;gap:9px!important;
    background:linear-gradient(135deg,#2f80c7,#2a6cab)!important;
    box-shadow:0 12px 24px -8px rgba(29,80,117,.6),0 2px 4px rgba(29,80,117,.25),inset 0 1px 0 rgba(255,255,255,.35)!important;transition:transform .15s}
  aside #login svg{width:18px!important;height:18px!important}
  aside #login:active{transform:scale(.97)}
  aside .authsk{height:48px!important;border-radius:16px!important}
  aside #acct{border-top:0!important;padding:6px!important;border-radius:18px;background:rgba(255,255,255,.8);border:1px solid rgba(109,164,221,.28);box-shadow:0 6px 16px -8px rgba(29,80,117,.25)}
  aside .me{padding:7px!important;border-radius:13px!important}
  aside .pp{width:36px;height:36px;background-image:linear-gradient(135deg,#2f80c7,#2a6cab)}

  /* animasi masuk */
  body.open aside .dhead,body.open aside #new,body.open aside .grp,body.open aside #login,body.open aside #acct,body.open aside .authsk{animation:ulIn .38s cubic-bezier(.2,.7,.25,1) both!important}
  body.open aside #new{animation-delay:.05s!important}
  body.open aside .grp{animation-delay:.10s!important}
  body.open aside #login,body.open aside #acct,body.open aside .authsk{animation-delay:.15s!important}
  @keyframes ulIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){aside #new::after{animation:none!important}body.open aside *{animation:none!important}}

/* v12: tampilan beranda dibuat ulang — bersih, tanpa blur ungu di tepi layar */
/* Penyebab blur ungu di kiri: lapisan .aurora (3 bola gradien blur yang melayang dari luar layar). Dimatikan. */
.aurora{display:none!important}
html,body{background:#f7fafc!important}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(70% 38% at 50% -6%,rgba(47,128,199,.13),transparent 70%),
    radial-gradient(60% 30% at 50% 108%,rgba(29,80,117,.06),transparent 70%)}

/* Header */
header{background:rgba(247,250,252,.82)!important;border-bottom:1px solid rgba(210,225,236,.55)!important}
#menu{background:#fff!important;border:1px solid #d9e4ef!important;color:#2a5370!important;box-shadow:0 2px 8px rgba(29,80,117,.08)!important;transition:transform .15s,box-shadow .15s}
#menu:active{transform:scale(.92)}
.mp-btn{height:38px!important;border:1px solid #d9e4ef!important;background:#fff!important;box-shadow:0 2px 10px rgba(29,80,117,.07)!important;font-size:14px!important}

/* Judul & teks sambutan */
#empty{text-align:left}
#empty h1{font-weight:700!important;letter-spacing:-.035em!important;line-height:1.08!important;color:#131e26!important}
#empty h1 em{font-style:normal;background:linear-gradient(100deg,#2f80c7,#2a6cab 70%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
.welcome-copy{color:#61717c!important;font-size:15px!important}
.starter-head{display:flex!important;align-items:center;gap:10px;font-size:11px!important;font-weight:700!important;letter-spacing:.14em!important;text-transform:uppercase;color:#7192ab!important}
.starter-head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(109,164,221,.45),transparent)}

/* Kartu saran */
.starter-grid{gap:10px!important}
.starter-card{
  position:relative;min-height:70px!important;padding:12px 14px!important;gap:13px!important;border-radius:20px!important;
  background:#fff!important;border:1px solid #e2eaf2!important;outline:0!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 1px 2px rgba(17,50,74,.05),0 10px 24px -14px rgba(29,80,117,.30)!important;
  transition:transform .15s,box-shadow .2s,border-color .2s!important}
.starter-card::before,.starter-card::after{display:none!important}
.starter-card:active{transform:scale(.985)!important;border-color:#b6cde0!important}
@media(hover:hover){.starter-card:hover{transform:translateY(-1px)!important;border-color:#c3d5e5!important;box-shadow:0 2px 4px rgba(17,50,74,.06),0 16px 30px -14px rgba(29,80,117,.38)!important}}
.starter-icon{width:42px!important;height:42px!important;border-radius:14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 10px -4px rgba(29,80,117,.25)!important}
.starter-icon svg{width:20px!important;height:20px!important}
.icon-violet{background:linear-gradient(135deg,#e6edf4,#cfdeea)!important;color:#226090!important}
.icon-peach{background:linear-gradient(135deg,#fff3e8,#ffe2cc)!important;color:#c4691f!important}
.icon-mint{background:linear-gradient(135deg,#e9f9f0,#d3f2e2)!important;color:#23895f!important}
.starter-text strong{font-size:14px!important;font-weight:650!important;color:#131e26!important;letter-spacing:-.01em!important}
.starter-text small{font-size:12px!important;color:#738591!important}
.starter-arrow{flex:none;display:grid!important;place-items:center;width:28px;height:28px;border-radius:50%;background:#eef3f8;color:#2870a6!important;font-size:13px!important}

/* Kotak ketik */
form{background:linear-gradient(to top,#f7fafc 60%,rgba(247,250,252,0))!important}
.box{border:1px solid #d9e4ef!important;border-radius:26px!important;background:#fff!important;
  box-shadow:0 14px 36px -16px rgba(29,80,117,.28),0 2px 6px rgba(17,50,74,.05)!important}
.box:focus-within{border-color:#96b6d2!important;box-shadow:0 16px 40px -16px rgba(29,80,117,.38),0 0 0 4px rgba(47,128,199,.12)!important}
.ib{border-radius:14px!important}
#go,#stop{width:42px!important;height:42px!important;border-radius:50%!important}
#go:disabled{background:#e7eef5!important;color:#9eb5c7!important}
@media(prefers-reduced-motion:reduce){.starter-card{transition:none!important}}

/* v13: teks jawaban lebih rapi + tabel kartu */
.msg.assistant .b{font-size:15.5px!important;line-height:1.7!important;color:#212c35!important;letter-spacing:-.003em}
.b>*:first-child{margin-top:0!important}.b>*:last-child{margin-bottom:0!important}
.b p{margin:0 0 .8em!important}
.b h1,.b h2,.b h3,.b h4{font-weight:700;letter-spacing:-.02em;color:#131e26;margin:1.35em 0 .5em!important}
.b h1{font-size:1.32em!important}.b h2{font-size:1.18em!important}.b h3{font-size:1.06em!important}.b h4{font-size:1em}
.b ul,.b ol{padding-left:1.3em!important;margin:0 0 .85em!important}
.b li{margin:.28em 0!important;padding-left:.15em}.b li>p{margin:0 0 .3em!important}
.b li::marker{color:#2f80c7;font-weight:600}
.b strong{font-weight:650;color:#131e26}
.b a{color:#2a6cab;text-decoration:underline;text-decoration-color:rgba(47,128,199,.45);text-underline-offset:3px;text-decoration-thickness:1.5px}
.b hr{border:0;height:1px;background:linear-gradient(90deg,transparent,#c6d7e7,transparent);margin:1.3em 0}
.b blockquote{margin:.9em 0!important;padding:8px 14px!important;border-left:3px solid #2f80c7!important;background:#f1f6f9;border-radius:0 12px 12px 0;color:#495863!important}
.b blockquote>:last-child{margin-bottom:0!important}
.b :not(pre)>code{background:#eaf0f6!important;color:#2a6cab!important;padding:.12em .42em!important;border-radius:6px!important;font-size:.88em!important;font-weight:500}
.b .katex-display{overflow-x:auto;overflow-y:hidden;padding:2px 0}

/* Tabel: kartu bulat, header gradien lembut, baris selang-seling, geser menyamping di HP */
.b .tbl-wrap{margin:1em 0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #d9e4ef;border-radius:16px;background:#fff;box-shadow:0 8px 22px -14px rgba(29,80,117,.35);scrollbar-width:thin;scrollbar-color:#b8cee1 transparent}
.b .tbl-wrap:focus-visible{outline:2px solid #2f80c7;outline-offset:2px}
.b .tbl-wrap table{display:table!important;width:100%;min-width:max-content;margin:0!important;border-collapse:separate!important;border-spacing:0;font-size:13.5px!important;line-height:1.5}
.b .tbl-wrap th,.b .tbl-wrap td{border:0!important;border-bottom:1px solid #e5edf4!important;padding:10px 14px!important;text-align:left;vertical-align:top;overflow-wrap:normal;word-break:normal}
.b .tbl-wrap td{min-width:84px;max-width:340px;overflow-wrap:anywhere}
.b .tbl-wrap th{background:linear-gradient(180deg,#edf2f7,#e1eaf2)!important;color:#194564;font-weight:700!important;font-size:12px!important;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;border-bottom:1px solid #cbdae9!important}
.b .tbl-wrap tbody tr:nth-child(even) td{background:#f7f9fc}
.b .tbl-wrap tbody tr:last-child td{border-bottom:0!important}
.b .tbl-wrap td:first-child{font-weight:600;color:#131e26}
.b .tbl-wrap th[align=center],.b .tbl-wrap td[align=center]{text-align:center}
.b .tbl-wrap th[align=right],.b .tbl-wrap td[align=right]{text-align:right;font-variant-numeric:tabular-nums}
.b .tbl-wrap code{white-space:nowrap}
@media(prefers-reduced-motion:no-preference){.b .tbl-wrap{transition:box-shadow .2s}}

/* v13: neon diredupkan, bukan dihilangkan. Ikon "A" di daftar chat kiri dan sambutan pakai versi lembut (saturasi & kecerahan turun),
   dan glow tombol/kartu di panel kiri dikurangi supaya tidak menyilaukan. */
.conv .t::before{background-image:url("../img/icon-soft-96.png");opacity:.85}
.conv.on .t::before{opacity:1}
.welcome-symbol{background-image:url(../img/icon-soft-96.png)}
.eye{background-image:url(../img/icon-soft-96.png)}
@media (max-width:760px){
  body.open aside{box-shadow:12px 0 34px rgba(17,50,74,.14),inset -1px 0 0 rgba(255,255,255,.9)!important}
  aside #new{box-shadow:0 8px 16px -8px rgba(29,80,117,.30),0 2px 4px rgba(29,80,117,.14),inset 0 1px 0 rgba(255,255,255,.22)!important;filter:saturate(.88)}
  aside #new::after{opacity:.45}
  aside #login{box-shadow:0 9px 18px -9px rgba(29,80,117,.32),0 2px 4px rgba(29,80,117,.14),inset 0 1px 0 rgba(255,255,255,.22)!important;filter:saturate(.88)}
  aside .conv.on{box-shadow:0 3px 9px -5px rgba(29,80,117,.14)!important;border-color:rgba(47,128,199,.20)!important}
  aside .empty-h::before{box-shadow:0 6px 14px -8px rgba(29,80,117,.28),inset 0 1px 0 rgba(255,255,255,.28)!important;filter:saturate(.85)}
  aside .pp{filter:saturate(.85)}
}