*{ box-sizing:border-box; margin:0; padding:0 }
  html,body{ height:100% }
  ::-webkit-scrollbar{ width:9px; height:9px }
  ::-webkit-scrollbar-thumb{ background:rgba(20,32,63,.16); border-radius:100px; border:2px solid transparent; background-clip:padding-box }
  ::-webkit-scrollbar-thumb:hover{ background:rgba(20,32,63,.28); background-clip:padding-box }
  @keyframes ak-drift{ 0%,100%{ transform:translate(0,0) } 50%{ transform:translate(22px,-16px) } }
  @keyframes ak-pop{ 0%{ transform:translateY(7px) } 100%{ transform:translateY(0) } }
  @keyframes ak-blink{ 0%,80%,100%{ opacity:.18; transform:translateY(0) } 40%{ opacity:1; transform:translateY(-3px) } }
  [data-motion="calm"] [data-ak-loop]{ animation:none !important }
  .ak-app{ display:flex; height:100vh; width:100%; overflow:hidden; position:relative }
  .ak-rail{ width:64px; flex:none; position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 0; background:rgba(255,255,255,.5); border-right:1px solid rgba(20,32,63,.07); backdrop-filter:blur(12px) }
  .ak-side{ width:248px; flex:none; position:relative; z-index:2; display:flex; flex-direction:column; padding:18px 16px; background:rgba(255,255,255,.42); border-right:1px solid rgba(20,32,63,.07); backdrop-filter:blur(10px) }
  .ak-main{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:0; position:relative; z-index:1 }
  .ak-canvas{ flex:1; min-height:0; display:flex; overflow:hidden }
  .ak-chat{ flex:1; min-width:0; display:flex; flex-direction:column; min-height:0 }
  .ak-scroll{ flex:1; overflow-y:auto; padding:26px clamp(20px,4vw,52px) 18px }
  .ak-result{ width:336px; flex:none; overflow-y:auto; padding:22px 20px; background:rgba(255,255,255,.4); border-left:1px solid rgba(20,32,63,.07); backdrop-filter:blur(10px) }
  .ak-railbtn{ position:relative; width:44px; height:44px; border:none; cursor:pointer; border-radius:14px; display:flex; align-items:center; justify-content:center; background:transparent; transition:background .2s, color .2s, transform .12s }
  .ak-railbtn:hover{ transform:translateY(-1px) }
  .ak-hist{ border:none; cursor:pointer; text-align:left; width:100%; background:transparent; border-radius:11px; padding:9px 11px; font:500 12.5px/1.35 Inter,system-ui; color:#5B6480; transition:background .18s,color .18s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .ak-hist:hover{ background:rgba(255,255,255,.7); color:#16203F }
  .ak-chip{ border:1px solid rgba(20,32,63,.12); cursor:pointer; white-space:nowrap; background:rgba(255,255,255,.74); color:#3C465F; border-radius:100px; padding:9px 14px; font:600 12.5px/1 Inter,system-ui; transition:all .18s }
  .ak-chip:hover{ background:#fff; box-shadow:0 4px 14px rgba(31,38,80,.1); transform:translateY(-1px) }
  .ak-send:hover{ filter:brightness(1.05); transform:translateY(-1px) }
  .ak-glow{ transition:box-shadow .2s, transform .12s }
  .ak-glow:hover{ transform:translateY(-1px) }
  [data-density="compact"] .ak-scroll{ padding-top:16px }
  [data-density="compact"] .ak-scroll > div > div{ margin-bottom:13px !important }
  @media (max-width:1120px){ .ak-side{ width:212px } .ak-result{ width:296px } }
  @media (max-width:980px){ .ak-side{ width:196px } .ak-result{ width:280px } .ak-scroll{ padding:22px 22px 16px } }
  .ak-only-sm{ display:none !important }
  @keyframes ak-sheet{ 0%{ transform:translateY(100%) } 100%{ transform:translateY(0) } }
  @media (max-width:860px){ .ak-side{ display:none } }
  @media (max-width:660px){
    .ak-result{ display:none }
    .ak-hide-sm{ display:none !important }
    .ak-only-sm{ display:inline-flex !important }
    .ak-result.mobopen{ display:block; position:fixed; left:0; right:0; bottom:0; top:auto; width:auto; max-height:80vh; border-radius:22px 22px 0 0; border-left:none; border-top:1px solid rgba(20,32,63,.12); box-shadow:0 -16px 50px rgba(10,18,42,.32); z-index:60; animation:ak-sheet .32s cubic-bezier(.2,.8,.2,1) both }
  }