/* ===== Skyline AI Assistant — Global Widget (floating glass card) ===== */

/* ===== Bar / handle mengambang di tepi kiri tengah ===== */
.chat-bar{
  position:fixed;
  left:14px;top:50%;
  transform:translateY(-50%);
  z-index:997;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  padding:.7rem .55rem;
  border-radius:18px;
  border:1px solid rgba(120,136,152,.35);
  background:linear-gradient(165deg,rgba(28,35,48,.96),rgba(15,19,27,.98));
  box-shadow:0 12px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  cursor:grab;
  user-select:none;
  touch-action:none;
  animation:chatBarGlow 4s ease-in-out infinite;
  transition:opacity .3s ease,border-color .25s,box-shadow .3s;
}
.chat-bar:hover{
  border-color:var(--accent);
  animation:none;
  box-shadow:0 14px 34px rgba(0,0,0,.55), 0 0 24px -6px var(--accent), inset 0 1px 0 rgba(255,255,255,.08);
}
.chat-bar:active{cursor:grabbing}
.chat-bar i{color:var(--accent);font-size:1.25rem;pointer-events:none;filter:drop-shadow(0 0 6px rgba(255,255,255,.12))}
.chat-bar-label{
  writing-mode:vertical-rl;
  font-size:.56rem;
  letter-spacing:.16em;
  font-weight:700;
  color:var(--text-muted);
  pointer-events:none;
}
.chat-bar.open{opacity:0;pointer-events:none;transform:translateY(-50%) translateX(14px) scale(.9)}

@keyframes chatBarGlow{
  0%,100%{box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 0 0 rgba(255,255,255,0), inset 0 1px 0 rgba(255,255,255,.06)}
  50%{box-shadow:0 12px 30px rgba(0,0,0,.5), 0 0 0 7px rgba(255,255,255,.035), inset 0 1px 0 rgba(255,255,255,.06)}
}

/* ===== Overlay gelap lembut ===== */
.chat-overlay{
  position:fixed;inset:0;
  background:rgba(6,8,12,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .35s ease;
  z-index:998;
}
.chat-overlay.open{opacity:1;pointer-events:auto}

/* ===== Panel floating glass card ===== */
.chat-panel{
  position:fixed;
  top:50%;
  left:14px;
  width:min(410px,calc(100vw - 28px));
  height:min(680px,calc(100vh - 28px));
  height:min(680px,calc(100dvh - 28px));
  transform:translateX(-18px) translateY(-50%) scale(.92);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  z-index:999;
  display:flex;
  flex-direction:column;
  border-radius:22px;
  border:1px solid rgba(120,136,152,.32);
  background:linear-gradient(165deg,rgba(32,39,53,.97) 0%,rgba(16,20,28,.99) 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.03), inset 0 1px 0 rgba(255,255,255,.07);
  overflow:hidden;
  transition:transform .5s cubic-bezier(.34,1.28,.42,1),opacity .35s ease,visibility .5s;
  will-change:transform,opacity;
  touch-action:pan-y;
}
.chat-panel.open{
  transform:translateX(0) translateY(-50%) scale(1);
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.chat-panel::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:180px;
  background:radial-gradient(120% 100% at 0% 0%,rgba(255,255,255,.05),transparent 60%);
  pointer-events:none;
  z-index:1;
}

/* ===== Header ===== */
.chat-panel-header{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  padding:.85rem 1.1rem;
  border-bottom:1px solid rgba(120,136,152,.18);
  background:linear-gradient(120deg,rgba(255,255,255,.045),rgba(255,255,255,.015) 55%);
  cursor:grab;
  user-select:none;
  flex-shrink:0;
}
.chat-panel-header:active{cursor:grabbing}
.chat-panel-title{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-width:0;
}
.chat-logo{
  width:40px;height:40px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:13px;
  background:linear-gradient(135deg,var(--accent),#8aa0c0);
  color:#0a0c10;
  font-size:1.1rem;
  box-shadow:0 6px 18px -4px var(--accent);
  animation:chatLogoPulse 3.5s ease-in-out infinite;
}
@keyframes chatLogoPulse{
  0%,100%{box-shadow:0 6px 18px -4px var(--accent)}
  50%{box-shadow:0 6px 24px -2px var(--accent)}
}
.chat-head-text{min-width:0}
.chat-head-name{
  font-weight:700;
  font-size:.98rem;
  color:var(--text);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chat-head-status{
  display:flex;
  align-items:center;
  gap:.35rem;
  font-size:.68rem;
  font-weight:600;
  color:var(--text-muted);
  letter-spacing:.03em;
  margin-top:2px;
}
.chat-status-dot{
  width:7px;height:7px;
  border-radius:50%;
  background:#34d399;
  position:relative;
}
.chat-status-dot::after{
  content:'';
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:rgba(52,211,153,.4);
  animation:chatDotPing 1.8s cubic-bezier(0,0,.2,1) infinite;
}
@keyframes chatDotPing{75%,100%{transform:scale(2.1);opacity:0}}
.chat-panel-close{
  width:34px;height:34px;
  flex-shrink:0;
  border-radius:11px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text-dim);
  cursor:pointer;
  font-size:.88rem;
  transition:all .2s cubic-bezier(.34,1.4,.5,1);
}
.chat-panel-close:hover{
  color:#ff8585;
  border-color:rgba(255,80,80,.5);
  background:rgba(255,80,80,.08);
  transform:rotate(90deg) scale(1.06);
}

/* ===== Isi chat ===== */
.chat-panel .chat-messages{flex:1;min-height:0;overflow-y:auto}
.chat-panel .chat-input-wrap{flex-shrink:0;background:rgba(0,0,0,.14)}
.chat-messages{
  position:relative;
  z-index:2;
  flex:1;
  overflow-y:auto;
  padding:1.15rem 1.15rem 1.3rem;
  display:flex;
  flex-direction:column;
  gap:.85rem;
  scroll-behavior:smooth;
}
.chat-messages::-webkit-scrollbar{width:6px}
.chat-messages::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}

.chat-msg{
  display:flex;
  gap:.6rem;
  max-width:min(85%,420px);
  align-items:flex-end;
  animation:chatMsgIn .45s cubic-bezier(.25,1.25,.4,1) both;
}
.chat-msg-user{align-self:flex-end;flex-direction:row-reverse}
@keyframes chatMsgIn{
  from{opacity:0;transform:translateY(16px) scale(.95)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.chat-avatar{
  width:32px;height:32px;
  flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,var(--accent),#8aa0c0);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0a0c10;
  font-size:.85rem;
  box-shadow:0 4px 12px -3px rgba(0,0,0,.4);
}
.chat-msg-bot .chat-avatar{position:relative}
.chat-msg-bot .chat-avatar::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.12);
  animation:chatRing 2.6s ease-in-out infinite;
}
@keyframes chatRing{
  0%,100%{transform:scale(1);opacity:.5}
  50%{transform:scale(1.25);opacity:0}
}
.chat-bubble{
  padding:.72rem .95rem;
  border-radius:16px 16px 16px 4px;
  background:rgba(255,255,255,.05);
  color:var(--text);
  border:1px solid var(--border);
  line-height:1.55;
  font-size:.9rem;
  word-break:break-word;
  white-space:pre-wrap;
  box-shadow:0 4px 16px -8px rgba(0,0,0,.5);
}
.chat-msg-user .chat-bubble{
  border-radius:16px 16px 4px 16px;
  background:linear-gradient(135deg,var(--accent),#8aa0c0);
  color:#0a0c10;
  border:none;
}
.chat-bubble a{color:var(--accent);text-decoration:underline;font-weight:600}
.chat-msg-user .chat-bubble a{color:#0a0c10}
.chat-bubble code{
  background:rgba(0,0,0,.15);
  padding:.1rem .35rem;
  border-radius:6px;
  font-size:.8rem;
}

.chat-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chat-chip{
  padding:.45rem .85rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-size:.82rem;
  cursor:pointer;
  text-decoration:none;
  transition:all .22s cubic-bezier(.34,1.4,.5,1);
  animation:chatChipIn .4s cubic-bezier(.25,1.25,.4,1) both;
}
.chat-chips .chat-chip:nth-child(1){animation-delay:.1s}
.chat-chips .chat-chip:nth-child(2){animation-delay:.18s}
.chat-chips .chat-chip:nth-child(3){animation-delay:.26s}
.chat-chips .chat-chip:nth-child(4){animation-delay:.34s}
@keyframes chatChipIn{
  from{opacity:0;transform:translateY(10px) scale(.9)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.chat-chip:hover{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 6px 16px -6px var(--accent);
}
.chat-chip-login{
  background:linear-gradient(135deg,var(--accent),#8aa0c0);
  color:#0a0c10;
  font-weight:700;
  border:none;
}
.chat-chip-login:hover{color:#0a0c10}

/* Typing indicator */
.chat-msg.chat-typing{animation:none}
.chat-typing-dots{
  display:inline-flex;
  gap:4px;
  align-items:center;
  padding:.85rem 1rem;
}
.chat-typing-dots span{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--accent);
  animation:chatDot 1.2s ease-in-out infinite;
}
.chat-typing-dots span:nth-child(2){animation-delay:.15s}
.chat-typing-dots span:nth-child(3){animation-delay:.3s}
@keyframes chatDot{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-5px);opacity:1}
}

/* ===== Input & tombol kirim ===== */
.chat-input-wrap{
  position:relative;
  z-index:2;
  display:flex;
  gap:.6rem;
  padding:.85rem 1.1rem;
  border-top:1px solid rgba(120,136,152,.18);
}

/* ===== Slash command autocomplete ===== */
.chat-cmd-menu{
  position:absolute;
  bottom:calc(100% + 6px);
  left:.6rem;
  right:.6rem;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:2px;
  max-height:min(260px,38vh);
  overflow-y:auto;
  padding:.35rem;
  border-radius:14px;
  border:1px solid rgba(120,136,152,.32);
  background:linear-gradient(165deg,rgba(32,39,53,.98),rgba(17,21,30,.99));
  box-shadow:0 -12px 40px rgba(0,0,0,.45), 0 10px 30px rgba(0,0,0,.35);
}
.chat-cmd-menu[hidden]{display:none}
.chat-cmd-item{
  display:flex;
  align-items:center;
  gap:.6rem;
  width:100%;
  padding:.5rem .7rem;
  border-radius:10px;
  border:none;
  background:transparent;
  color:var(--text);
  font-family:inherit;
  font-size:.86rem;
  text-align:left;
  cursor:pointer;
  transition:background .15s;
}
.chat-cmd-item:hover,.chat-cmd-item.sel{
  background:rgba(255,255,255,.07);
}
.chat-cmd-item code{
  flex-shrink:0;
  background:rgba(255,255,255,.08);
  color:var(--accent);
  padding:.14rem .5rem;
  border-radius:8px;
  font-size:.82rem;
  font-weight:700;
}
.chat-cmd-item span{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--text-muted);
  font-size:.82rem;
}

/* ===== Menu website (/menu) ===== */
.chat-menu-grid{
  display:flex;
  flex-direction:column;
  gap:.3rem;
  padding:.15rem 0;
}
.chat-menu-row{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.55rem .7rem;
  border-radius:11px;
  border:1px solid rgba(120,136,152,.18);
  background:rgba(255,255,255,.03);
  color:var(--text);
  text-decoration:none;
  font-size:.88rem;
  transition:all .18s cubic-bezier(.34,1.4,.5,1);
}
.chat-menu-row:hover{
  border-color:var(--accent);
  background:rgba(255,255,255,.06);
  transform:translateX(3px);
}
.chat-menu-row i:first-child{
  color:var(--accent);
  width:20px;
  text-align:center;
  font-size:.95rem;
}
.chat-menu-row i:last-child{
  margin-left:auto;
  font-size:.75rem;
  color:var(--text-dim);
}
.chat-menu-row span{flex:1}

/* ===== Bantuan command (/help) ===== */
.chat-help{display:flex;flex-direction:column;gap:.3rem}
.chat-help-title{
  font-weight:700;
  font-size:.9rem;
  margin-bottom:.15rem;
  color:var(--text);
}
.chat-cmd-row{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.42rem .1rem;
}
.chat-cmd-row code{
  flex-shrink:0;
  background:rgba(255,255,255,.08);
  color:var(--accent);
  padding:.14rem .55rem;
  border-radius:8px;
  font-size:.82rem;
  font-weight:700;
}
.chat-cmd-row span{color:var(--text-muted);font-size:.84rem}
.chat-help-tip{
  margin-top:.35rem;
  font-size:.8rem;
  color:var(--text-dim);
}

/* ===== Kartu hasil download ===== */
.chat-dl-card{
  display:flex;
  flex-direction:column;
  gap:.6rem;
  padding:.65rem;
  border-radius:14px;
  border:1px solid rgba(120,136,152,.25);
  background:rgba(255,255,255,.04);
}
.chat-dl-top{display:flex;flex-direction:column;gap:.55rem}
.chat-dl-cover{
  width:100%;
  max-height:150px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid var(--border);
}
.chat-dl-title{
  font-size:.86rem;
  font-weight:600;
  color:var(--text);
  line-height:1.4;
  word-break:break-word;
}
.chat-dl-actions{display:flex;flex-wrap:wrap;gap:.45rem}
.chat-dl-btn{
  padding:.45rem .8rem;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.05);
  color:var(--text);
  font-size:.8rem;
  font-weight:600;
  text-decoration:none;
  transition:all .2s cubic-bezier(.34,1.4,.5,1);
}
.chat-dl-btn:hover{
  border-color:var(--accent);
  color:var(--accent);
  transform:translateY(-2px);
  box-shadow:0 6px 16px -6px var(--accent);
}
.chat-input{
  flex:1;
  resize:none;
  background:rgba(255,255,255,.04);
  border:1px solid var(--border);
  border-radius:13px;
  padding:.72rem .95rem;
  color:var(--text);
  font-family:inherit;
  font-size:.9rem;
  outline:none;
  max-height:120px;
  line-height:1.5;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.chat-input:focus{
  border-color:var(--accent);
  background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
.chat-input::placeholder{color:var(--text-muted)}
.chat-input:disabled{opacity:.5;cursor:not-allowed}
.chat-send{
  position:relative;
  width:44px;height:44px;
  flex-shrink:0;
  border-radius:13px;
  border:none;
  background:linear-gradient(135deg,var(--accent),#8aa0c0);
  color:#0a0c10;
  cursor:pointer;
  font-size:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .22s cubic-bezier(.34,1.5,.5,1),box-shadow .25s,opacity .2s;
}
.chat-send:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 8px 20px -6px var(--accent);
}
.chat-send:active{transform:translateY(0) scale(.94)}
.chat-send:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.chat-send.loading i{opacity:0}
.chat-send.loading::after{
  content:'';
  position:absolute;
  width:17px;height:17px;
  border:2px solid rgba(10,12,16,.3);
  border-top-color:#0a0c10;
  border-radius:50%;
  animation:chatSpin .65s linear infinite;
}
@keyframes chatSpin{to{transform:rotate(360deg)}}

.chat-err .chat-bubble{border-color:rgba(255,80,80,.5);color:#ff8585}

/* ===== Responsive: desktop besar ===== */
@media(min-width:1400px){
  .chat-panel{
    left:18px;
    width:min(440px,calc(100vw - 48px));
    height:min(760px,calc(100vh - 48px));
    height:min(760px,calc(100dvh - 48px));
  }
  .chat-msg{max-width:min(82%,460px)}
}

/* ===== Responsive: tablet ===== */
@media(max-width:1024px) and (min-width:601px){
  .chat-panel{
    left:16px;
    width:min(460px,calc(100vw - 48px));
    height:min(680px,calc(100vh - 48px));
    height:min(680px,calc(100dvh - 48px));
    border-radius:20px;
  }
  .chat-msg{max-width:88%}
}

/* ===== Responsive: phone portrait & kecil ===== */
@media(max-width:600px){
  .chat-panel{
    left:18px;
    width:min(400px,calc(100vw - 36px));
    height:min(620px,calc(100vh - 48px));
    height:min(620px,calc(100dvh - 48px));
    border-radius:20px;
  }
  .chat-messages{padding:.9rem .9rem 1rem;gap:.8rem}
  .chat-input-wrap{padding:.7rem .85rem}
  .chat-bubble{font-size:.88rem;padding:.65rem .85rem}
  .chat-avatar{width:28px;height:28px;font-size:.78rem}
  .chat-msg{max-width:92%}
  .chat-bar{left:6px;padding:.6rem .45rem;border-radius:15px}
  .chat-send{width:42px;height:42px}
}

/* ===== Responsive: layar kecil (<380px) ===== */
@media(max-width:380px){
  .chat-panel{left:14px;width:calc(100vw - 28px);height:min(560px,calc(100dvh - 40px));height:min(560px,calc(100vh - 40px))}
  .chat-panel-header{padding:.7rem .85rem}
  .chat-logo{width:34px;height:34px;font-size:1rem}
  .chat-head-name{font-size:.9rem}
  .chat-head-status{font-size:.62rem}
  .chat-chip{font-size:.78rem;padding:.4rem .7rem}
  .chat-chips{gap:.4rem}
  .chat-typing-dots{padding:.75rem .85rem}
}

/* ===== Responsive: landscape & layar pendek ===== */
@media(max-width:900px) and (orientation:landscape){
  .chat-panel{
    top:50%;
    left:12px;
    width:min(400px,calc(100vw - 24px));
    height:calc(100vh - 20px);
    height:calc(100dvh - 20px);
    border-radius:18px;
  }
  .chat-messages{padding:.8rem .9rem .9rem;gap:.7rem}
  .chat-input-wrap{padding:.55rem .85rem}
  .chat-avatar{width:26px;height:26px;font-size:.75rem}
  .chat-msg{max-width:90%}
  .chat-bar{left:6px;padding:.5rem .4rem}
}
@media(max-height:480px){
  .chat-panel-header{padding:.55rem .85rem}
  .chat-logo{width:30px;height:30px;font-size:.9rem}
  .chat-head-status{display:none}
  .chat-messages{padding:.7rem .85rem .8rem}
  .chat-bubble{font-size:.84rem;line-height:1.45}
  .chat-chip{font-size:.76rem;padding:.35rem .6rem}
  .chat-status-dot{display:none}
}

@media(prefers-reduced-motion:reduce){
  .chat-panel,.chat-bar,.chat-msg,.chat-chip,.chat-send,.chat-logo{animation:none !important;transition:none !important}
}