/* ============ AI PINTAR SAYA — dark + neon purple ============ */

:root{
  --bg: #07050c;
  --bg-elev-1: #0d0a17;
  --bg-elev-2: #14101f;
  --bg-elev-3: #1b1528;
  --border: #2a2138;
  --border-soft: #221b30;
  --text: #eee9f8;
  --text-dim: #a79cc2;
  --text-dimmer: #776a92;

  --purple: #a855f7;
  --purple-2: #c084fc;
  --purple-deep: #7c3aed;
  --purple-glow: rgba(168, 85, 247, .45);
  --purple-glow-soft: rgba(168, 85, 247, .18);

  --danger: #f87171;
  --success: #4ade80;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --font: 'Segoe UI', ui-sans-serif, system-ui, -apple-system, 'Inter', Roboto, Helvetica, Arial, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font);
  background: radial-gradient(circle at 15% 0%, rgba(124,58,237,.16), transparent 45%),
              radial-gradient(circle at 85% 100%, rgba(168,85,247,.12), transparent 40%),
              var(--bg);
  color: var(--text);
  overflow: hidden;
}

::selection{ background: var(--purple-deep); color: #fff; }

::-webkit-scrollbar{ width: 8px; height: 8px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{ background: #35294d; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover{ background: var(--purple-deep); }

.accent{ color: var(--purple-2); }
.hidden{ display: none !important; }

button{ font-family: inherit; cursor: pointer; }
input, textarea, select{ font-family: inherit; }

/* ---------- buttons ---------- */
.btn{
  border: 1px solid var(--border);
  background: var(--bg-elev-2);
  color: var(--text);
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  transition: .15s ease;
  display: inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn:hover{ border-color: var(--purple-deep); background: var(--bg-elev-3); }
.btn-block{ width: 100%; }
.btn-primary{
  background: linear-gradient(135deg, var(--purple-deep), var(--purple));
  border: 1px solid var(--purple);
  color: #fff;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.btn-primary:hover{
  box-shadow: 0 0 18px var(--purple-glow);
  filter: brightness(1.08);
}
.btn-ghost{ background: transparent; }
.btn-ghost:hover{ background: var(--bg-elev-2); }

.icon-btn{
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.icon-btn:hover{ background: var(--bg-elev-3); color: var(--text); border-color: var(--border); }
.icon-btn.small{ width: 26px; height: 26px; font-size: 13px; }

.only-mobile{ display: none; }

/* ============ APP SHELL ============ */
.app{
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 100vh;
}

/* ---------- SIDEBAR ---------- */
.sidebar{
  background: var(--bg-elev-1);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  gap: 14px;
  overflow: hidden;
}
.sidebar-header{ display:flex; align-items:center; justify-content: space-between; }
.brand{ display:flex; align-items:center; gap:10px; }
.brand-logo{
  font-size: 22px;
  width: 38px; height: 38px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple));
  box-shadow: 0 0 16px var(--purple-glow-soft);
}
.brand-name{ font-weight: 800; font-size: 15.5px; letter-spacing: .2px; }

.sidebar-section{ display:flex; flex-direction:column; gap:8px; min-height: 0; }
.sidebar-section-title{
  display:flex; align-items:center; justify-content: space-between;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--text-dimmer); font-weight: 700; padding: 0 4px;
}

.assistant-list, .project-list, .chat-history-list{
  display:flex; flex-direction:column; gap:4px;
  overflow-y:auto;
}
.sidebar-history{ flex: 1; min-height: 60px; }
.chat-history-list{ flex:1; }

.side-item{
  display:flex; align-items:center; gap:10px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 13.5px;
  border: 1px solid transparent;
  position: relative;
}
.side-item:hover{ background: var(--bg-elev-2); color: var(--text); cursor:pointer; }
.side-item.active{
  background: linear-gradient(90deg, var(--purple-glow-soft), transparent);
  border-color: var(--border);
  color: #fff;
}
.side-item.active::before{
  content:"";
  position:absolute; left:-14px; top:0; bottom:0; width:3px;
  background: linear-gradient(180deg, var(--purple), var(--purple-deep));
  border-radius: 4px;
}
.side-item .item-icon{ font-size: 15px; flex-shrink:0; }
.side-item .item-label{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.side-item .item-del{
  opacity:0; font-size:12px; color: var(--text-dimmer); flex-shrink:0;
  width:20px; height:20px; display:flex; align-items:center; justify-content:center; border-radius:6px;
}
.side-item:hover .item-del{ opacity:1; }
.side-item .item-del:hover{ background: rgba(248,113,113,.15); color: var(--danger); }

.sidebar-footer{ border-top: 1px solid var(--border-soft); padding-top: 12px; }

/* ---------- MAIN ---------- */
.main{ display:flex; flex-direction:column; height:100vh; min-width:0; }

.topbar{
  display:flex; align-items:center; gap:12px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border-soft);
  background: rgba(13,10,23,.6);
  backdrop-filter: blur(6px);
}
.topbar-info{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.active-assistant-icon{
  font-size:20px; width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius: 10px; background: var(--bg-elev-2); border:1px solid var(--border-soft);
}
.topbar-texts{ display:flex; flex-direction:column; min-width:0; }
.topbar-title{ font-weight:700; font-size:14.5px; }
.topbar-subtitle{ font-size:12px; color: var(--text-dimmer); }
.provider-select{
  background: var(--bg-elev-2);
  border:1px solid var(--border);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: 12.5px;
}
.provider-badge{
  background: var(--bg-elev-2);
  border:1px solid var(--border);
  color: var(--text-dim);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
}
.config-note{
  display:block; text-align:center; font-size:11.5px; color: var(--text-dimmer);
  padding: 8px 6px; line-height:1.4;
}

/* ---------- CHAT WINDOW ---------- */
.chat-window{ flex:1; overflow-y:auto; padding: 24px 0 10px; }
.empty-state{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color: var(--text-dim); padding: 20px;
}
.empty-emoji{ font-size: 46px; margin-bottom: 10px; filter: drop-shadow(0 0 20px var(--purple-glow-soft)); }
.empty-state h1{ font-size: 22px; margin: 0 0 8px; color: var(--text); }
.empty-state p{ margin:0; max-width: 420px; font-size: 14px; }

.messages{ max-width: 820px; margin: 0 auto; padding: 0 24px; display:flex; flex-direction:column; gap: 22px; }

.msg{ display:flex; gap: 12px; }
.msg-avatar{
  width: 32px; height:32px; border-radius: 9px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:16px;
  margin-top: 2px;
}
.msg.user .msg-avatar{ background: var(--bg-elev-3); }
.msg.assistant .msg-avatar{
  background: linear-gradient(135deg, var(--purple-deep), var(--purple));
  box-shadow: 0 0 14px var(--purple-glow-soft);
}
.msg-body{ flex:1; min-width:0; }
.msg-meta{ font-size:12px; color: var(--text-dimmer); margin-bottom:4px; display:flex; gap:8px; align-items:center;}
.msg-content{
  font-size: 14.5px; line-height: 1.65; color: var(--text);
  word-wrap: break-word;
}
.msg.user .msg-content{
  background: var(--bg-elev-2);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: inline-block;
}
.msg-content p{ margin: 0 0 10px; }
.msg-content p:last-child{ margin-bottom:0; }
.msg-content ul, .msg-content ol{ margin: 6px 0 10px; padding-left: 22px; }
.msg-content a{ color: var(--purple-2); }
.msg-content code:not(pre code){
  background: var(--bg-elev-3);
  border: 1px solid var(--border-soft);
  padding: 2px 6px; border-radius: 5px;
  font-family: var(--mono); font-size: 13px; color: var(--purple-2);
}
.msg-content blockquote{
  border-left: 3px solid var(--purple-deep);
  margin: 8px 0; padding: 4px 12px; color: var(--text-dim);
  background: var(--purple-glow-soft);
  border-radius: 0 8px 8px 0;
}
.msg-content table{ border-collapse: collapse; width:100%; margin: 10px 0; font-size: 13.5px; }
.msg-content th, .msg-content td{ border:1px solid var(--border); padding:6px 10px; }
.msg-content th{ background: var(--bg-elev-2); }

.msg-actions{ display:flex; gap:6px; margin-top:6px; }
.msg-action-btn{
  font-size: 11.5px; color: var(--text-dimmer);
  background: transparent; border: 1px solid var(--border-soft);
  padding: 4px 9px; border-radius: 7px; display:flex; align-items:center; gap:5px;
}
.msg-action-btn:hover{ color: var(--purple-2); border-color: var(--purple-deep); background: var(--purple-glow-soft); }

/* ---------- CODE BLOCKS ---------- */
.code-block{
  position: relative;
  background: #0a0713;
  border: 1px solid #2c2140;
  border-radius: var(--radius-md);
  margin: 10px 0 14px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(168,85,247,.05), 0 0 22px rgba(0,0,0,.35);
}
.code-block-header{
  display:flex; align-items:center; justify-content: space-between;
  padding: 8px 14px;
  background: #120c1f;
  border-bottom: 1px solid #2c2140;
  font-family: var(--mono); font-size: 11.5px; color: var(--text-dimmer);
  text-transform: lowercase;
}
.code-copy-btn{
  background: transparent; border: 1px solid var(--border-soft);
  color: var(--text-dim); font-size: 11px; padding: 3px 9px; border-radius: 6px;
  display:flex; align-items:center; gap:5px;
}
.code-copy-btn:hover{ color: var(--purple-2); border-color: var(--purple-deep); }
.code-copy-btn.copied{ color: var(--success); border-color: var(--success); }
.code-block pre{
  margin:0; padding: 14px 16px; overflow-x:auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
}
.code-block pre code.hljs{ background: transparent; padding:0; }

/* typing indicator */
.typing-dots{ display:inline-flex; gap:4px; padding: 4px 0; }
.typing-dots span{
  width:6px; height:6px; border-radius:50%;
  background: var(--purple-2);
  animation: blink 1.3s infinite ease-in-out;
}
.typing-dots span:nth-child(2){ animation-delay:.15s; }
.typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes blink{ 0%,80%,100%{ opacity:.25; transform: translateY(0);} 40%{ opacity:1; transform: translateY(-3px);} }

/* ---------- COMPOSER ---------- */
.composer{ padding: 10px 24px 18px; }
.composer-box{
  max-width: 820px; margin: 0 auto;
  display:flex; align-items:flex-end; gap:10px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 10px 10px 10px 18px;
  transition: .15s;
}
.composer-box:focus-within{
  border-color: var(--purple-deep);
  box-shadow: 0 0 0 3px var(--purple-glow-soft);
}
#promptInput{
  flex:1; resize:none; background:transparent; border:none; outline:none;
  color: var(--text); font-size: 14.5px; line-height:1.5; max-height: 200px; padding: 6px 0;
}
#promptInput::placeholder{ color: var(--text-dimmer); }
.send-btn{
  width: 38px; height:38px; border-radius: 12px; border:none; flex-shrink:0;
  background: linear-gradient(135deg, var(--purple-deep), var(--purple));
  color:#fff; font-size:16px; display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 14px var(--purple-glow-soft);
  transition: .15s;
}
.send-btn:hover{ filter: brightness(1.1); box-shadow: 0 0 20px var(--purple-glow); }
.send-btn:disabled{ opacity:.4; cursor:not-allowed; box-shadow:none; }
.composer-hint{
  max-width: 820px; margin: 8px auto 0; text-align:center;
  font-size: 11.5px; color: var(--text-dimmer);
}

/* ============ OVERLAYS / MODALS ============ */
.overlay{
  position: fixed; inset: 0; z-index: 100;
  background: rgba(4,2,9,.7);
  backdrop-filter: blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding: 20px;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }

.welcome-modal{
  background: linear-gradient(160deg, var(--bg-elev-2), var(--bg-elev-1));
  border: 1px solid var(--purple-deep);
  box-shadow: 0 0 60px var(--purple-glow-soft), 0 20px 60px rgba(0,0,0,.5);
  border-radius: 22px;
  padding: 40px 36px;
  max-width: 380px;
  text-align:center;
  animation: popIn .35s cubic-bezier(.2,1.4,.4,1);
}
@keyframes popIn{ from{ opacity:0; transform: scale(.85) translateY(10px);} to{ opacity:1; transform:none;} }
.welcome-emoji{ font-size: 64px; margin-bottom: 10px; animation: wiggle 1.8s ease-in-out infinite; }
@keyframes wiggle{ 0%,100%{ transform: rotate(-6deg);} 50%{ transform: rotate(6deg);} }
.welcome-title{
  font-size: 26px; font-weight: 800; margin: 6px 0 8px;
  background: linear-gradient(135deg, #fff, var(--purple-2));
  -webkit-background-clip: text; background-clip:text; color: transparent;
}
.welcome-sub{ color: var(--text-dim); font-size: 14px; margin: 0 0 22px; }

.modal{
  width: 480px; max-width: 100%;
  max-height: 88vh;
  background: var(--bg-elev-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 0 40px rgba(0,0,0,.5), 0 0 0 1px rgba(168,85,247,.06);
  display:flex; flex-direction:column;
  animation: popIn .22s ease;
  overflow: hidden;
}
.modal-sm{ width: 420px; }
.modal-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--border-soft);
}
.modal-header h3{ margin:0; font-size:15.5px; }
.modal-body{ padding: 16px 18px; overflow-y:auto; display:flex; flex-direction:column; gap:14px; }
.modal-desc{ font-size:13px; color: var(--text-dim); margin:0 0 2px; line-height:1.5; }
.modal-footer{ padding: 14px 18px; border-top: 1px solid var(--border-soft); }
.modal-note{
  font-size: 12px; color: var(--text-dimmer);
  background: var(--bg-elev-2); border:1px solid var(--border-soft);
  border-radius: 10px; padding: 10px 12px; line-height:1.5;
}

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12.5px; color: var(--text-dim); font-weight:600; }
.field input[type="text"], .field input[type="password"], .field textarea, .field select{
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13.5px;
  outline: none;
  resize: vertical;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--purple-deep); box-shadow: 0 0 0 3px var(--purple-glow-soft);
}

/* ============ RESPONSIVE ============ */
@media (max-width: 880px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{
    position: fixed; inset: 0 auto 0 0; width: 280px; z-index: 60;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 20px 0 40px rgba(0,0,0,.4);
  }
  .sidebar.open{ transform: translateX(0); }
  .only-mobile{ display:flex; }
  .messages{ padding: 0 14px; }
  .composer{ padding: 10px 12px 14px; }
  .modal, .modal-sm{ width: 100%; }
}