/* public/css/style.css
   Dipisah dari public/index.html supaya HTML tidak lagi 1000+ baris
   dan CSS lebih gampang dicari/diedit terpisah dari markup & JS. */

  :root{
    --bg-base:#12242B;
    --bg-panel:#17303A;
    --bg-panel-2:#1D3A44;
    --bg-field:#0F2229;
    --amber:#E8A33D;
    --amber-dim:#8A662A;
    --red:#D6534A;
    --text-primary:#F2EDE4;
    --text-muted:#8FA3AA;
    --line:#2A4C56;
    --overlay-hover:rgba(255,255,255,0.02);
    --overlay-soft:rgba(255,255,255,0.015);
    --shadow-color:rgba(0,0,0,.4);
  }
  /* ===== Tema Terang ===== */
  html[data-theme="light"]{
    --bg-base:#F7F4EE;
    --bg-panel:#FFFFFF;
    --bg-panel-2:#EFEAE0;
    --bg-field:#FBF9F5;
    --amber:#C97F1E;
    --amber-dim:#E3C08A;
    --red:#C4453B;
    --text-primary:#2A2420;
    --text-muted:#6B6258;
    --line:#DFD8C8;
    --overlay-hover:rgba(0,0,0,0.03);
    --overlay-soft:rgba(0,0,0,0.02);
    --shadow-color:rgba(0,0,0,.12);
  }
  *{box-sizing:border-box;}
  html,body{height:100%;}
  body{
    margin:0;background:var(--bg-base);color:var(--text-primary);
    font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;
    display:flex;flex-direction:column;
    transition:background-color .2s ease,color .2s ease;
  }
  .mono{font-family:'IBM Plex Mono',monospace;}

  /* Custom Scrollbar */
  ::-webkit-scrollbar { width: 6px; height: 6px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

  .topbar{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--line);flex:none;}
  .brand{display:flex;align-items:center;gap:12px;}
  .brand .mark{width:32px;height:32px;border-radius:8px;background:var(--amber);display:flex;align-items:center;justify-content:center;flex:none;}
  .brand .mark svg{width:16px;height:16px;}
  .brand h1{font-size:16px;letter-spacing:0.5px;margin:0;font-family:'Archivo Black',sans-serif;}
  .brand p{margin:2px 0 0;font-size:10.5px;color:var(--text-muted);letter-spacing:1.2px;text-transform:uppercase;}
  .conn{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-muted);}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--text-muted);flex:none;}

  .theme-toggle-btn{
    width:34px;height:34px;border-radius:9px;border:1px solid var(--line);
    background:var(--bg-field);color:var(--text-muted);cursor:pointer;
    display:flex;align-items:center;justify-content:center;flex:none;
    transition:all .15s ease;
  }
  .theme-toggle-btn:hover{color:var(--amber);border-color:var(--amber-dim);}
  .theme-toggle-btn svg{width:18px;height:18px;}
  .dot.ok{background:#7CC98A;box-shadow:0 0 0 0 rgba(124,201,138,.6);animation:pulse 1.8s infinite;}
  .dot.err{background:var(--red);}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(124,201,138,.55);}70%{box-shadow:0 0 0 8px rgba(124,201,138,0);}100%{box-shadow:0 0 0 0 rgba(124,201,138,0);}}

  .progress{display:flex;gap:6px;padding:12px 24px;border-bottom:1px solid var(--line);flex:none;}
  .progress .step{flex:1;height:3px;border-radius:2px;background:var(--line);}
  .progress .step.done{background:var(--amber);}
  .progress .step.active{background:var(--amber-dim);}

  /* SCROLLBAR POSITION FIX */
  .chat-scroll-area {
    flex: 1;
    overflow-y: auto;
    width: 100%;
    /* Memberi sedikit jarak agar scrollbar tidak menempel persis ke garis sidebar */
    padding-right: 2px;
  }

  .chat-area {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 820px;
    margin: 0 auto;
    width: 100%;
  }

  .msg{display:flex;gap:10px;max-width:85%;}
  .msg.user{align-self:flex-end;flex-direction:row-reverse;}
  .msg.ai{align-self:flex-start;}
  .avatar{width:28px;height:28px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;}
  .msg.ai .avatar{background:var(--amber);color:#241705;}
  .msg.user .avatar{background:var(--bg-panel-2);color:var(--text-muted);border:1px solid var(--line);}
  .bubble-col{display:flex;flex-direction:column;gap:8px;}
  .bubble{padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.6;white-space:pre-wrap;}
  .msg.ai .bubble{background:var(--bg-panel);border:1px solid var(--line);border-top-left-radius:2px;}
  .msg.user .bubble{background:var(--bg-panel-2);border:1px solid var(--amber-dim);border-top-right-radius:2px;}

  .msg-link{color:var(--amber);text-decoration:underline;text-underline-offset:2px;word-break:break-word;}
  .msg-link:hover{opacity:.8;}
  .source-list-heading{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);}
  .source-list{margin:8px 0 0;padding-left:18px;list-style:decimal;}
  .source-list li{margin-bottom:6px;font-size:12.5px;line-height:1.5;}

  .quick-replies{display:flex;flex-wrap:wrap;gap:8px;}
  .qr-btn{
    padding:8px 14px;border-radius:20px;border:1px solid var(--line);background:var(--bg-field);
    font-size:12.5px;color:var(--text-primary);cursor:pointer;transition:all .15s ease;
  }
  .qr-btn:hover{border-color:var(--amber);background:var(--amber);color:#241705;font-weight:600;}
  .qr-btn:disabled{opacity:.4;cursor:not-allowed;}

  .bubble-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:2px;}
  .mini-btn{
    display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--text-muted);
    background:none;border:1px solid var(--line);border-radius:6px;padding:5px 8px;cursor:pointer;
    font-family:'Inter',sans-serif;transition:all 0.15s ease;
  }
  .mini-btn:hover{color:var(--text-primary);border-color:var(--amber-dim);background:var(--overlay-hover);}
  .mini-btn.speaking{color:var(--amber);border-color:var(--amber-dim);background:rgba(232,163,61,0.05);}
  .mini-btn.loading{color:var(--text-muted);cursor:wait;opacity:.75;}
  .mini-btn.loading svg{animation:spin 1s linear infinite;}
  @keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}
  .mini-btn svg{width:13px;height:13px;}
  
  /* Inline Voice Select */
  .voice-select {
    background: var(--bg-field);
    color: var(--text-primary);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 11px;
    font-family: 'Inter', sans-serif;
    outline: none;
    cursor: pointer;
    max-width: 140px;
    text-overflow: ellipsis;
  }
  .voice-select:focus { border-color: var(--amber-dim); }

  /* Panel suara multi-pembicara (mis. Host A / Host B) */
  .voice-panel{
    display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;padding:8px;
    border:1px solid var(--line);border-radius:8px;background:var(--overlay-soft);
  }
  .voice-panel-row{display:flex;align-items:center;gap:6px;}
  .voice-panel-label{
    font-size:11px;color:var(--text-muted);font-weight:600;white-space:nowrap;
  }

  /* Aksi lanjutan naskah: revisi / topik baru */
  .script-actions{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;}
  .script-actions .mini-btn{font-size:11.5px;}

  /* Audio Animation Bars */
  .audio-bars { display: none; align-items: flex-end; gap: 2px; height: 10px; margin-left: 2px; }
  .mini-btn.speaking .audio-bars { display: inline-flex; }
  .bar { width: 2.5px; background: var(--amber); border-radius: 1px; animation: sound 0ms -800ms linear infinite alternate; }
  .mini-btn.speaking .bar { animation-duration: 400ms; }
  .bar:nth-child(1) { height: 40%; animation-delay: -200ms; }
  .bar:nth-child(2) { height: 100%; animation-delay: -400ms; }
  .bar:nth-child(3) { height: 60%; animation-delay: -600ms; }
  @keyframes sound { 0% { height: 20%; } 100% { height: 100%; } }

  .typing{display:flex;gap:4px;padding:14px;}
  .typing span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:bounce 1.2s infinite;}
  .typing span:nth-child(2){animation-delay:.15s;}
  .typing span:nth-child(3){animation-delay:.3s;}
  @keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}

  .composer{flex:none;border-top:1px solid var(--line);padding:14px 24px 20px;}
  .composer-inner{max-width:820px;margin:0 auto;display:flex;gap:10px;align-items:flex-end;}
  .composer textarea{
    flex:1;resize:none;background:var(--bg-field);border:1px solid var(--line);border-radius:10px;
    padding:11px 14px;color:var(--text-primary);font-size:13.5px;font-family:'Inter',sans-serif;
    max-height:120px;line-height:1.5;
  }
  .composer textarea:focus{outline:none;border-color:var(--amber-dim);}
  .composer textarea:disabled{opacity:.5;}
  .send-btn{width:40px;height:40px;border-radius:10px;background:var(--amber);border:none;flex:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#241705;}
  .send-btn:disabled{opacity:.4;cursor:not-allowed;}
  .send-btn svg{width:17px;height:17px;}

  .app-shell{flex:1;display:flex;flex-direction:row;min-height:0;}
  .main-col{flex:1;display:flex;flex-direction:column;min-width:0;}

  .sidebar{
    width:280px;flex:none;border-left:1px solid var(--line);
    display:flex;flex-direction:column;background:var(--bg-panel);
  }
  .sidebar-head{padding:14px 16px;border-bottom:1px solid var(--line);}
  .new-chat-btn{
    width:100%;padding:10px 12px;border-radius:8px;border:1px solid var(--amber-dim);
    background:transparent;color:var(--amber);font-family:'Inter',sans-serif;font-size:13px;
    font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;
    transition: all 0.15s ease;
  }
  .new-chat-btn:hover{background:var(--amber);color:#241705;}
  .new-chat-btn svg{width:14px;height:14px;}
  .history-list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px;}
  .history-empty{color:var(--text-muted);font-size:12px;padding:12px;text-align:center;}
  .history-item{
    position:relative;padding:10px 6px 10px 12px;border-radius:8px;cursor:pointer;border:1px solid transparent;
  }
  .history-item:hover{background:var(--bg-panel-2);}
  .history-item.active{background:var(--bg-panel-2);border-color:var(--amber-dim);}
  .history-item.unread{border-color:var(--amber-dim);}
  .history-item .h-row{display:flex;align-items:center;gap:6px;}
  .history-item .h-main{display:flex;align-items:center;gap:5px;min-width:0;flex:1;}
  .history-item .h-star{color:var(--amber);font-size:11px;flex:none;}
  .history-item .unread-dot{width:6px;height:6px;border-radius:50%;background:var(--amber);flex:none;}
  .history-item .h-title{font-size:12.5px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .history-item.unread .h-title{font-weight:700;}
  .history-item .h-meta{font-size:10.5px;color:var(--text-muted);margin-top:3px;padding-left:2px;}
  .h-menu-btn{
    flex:none;width:22px;height:22px;border-radius:6px;border:none;background:transparent;
    color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;
    font-size:15px;line-height:1;opacity:0;transition:opacity .15s ease,background .15s ease,color .15s ease;
  }
  .history-item:hover .h-menu-btn,.history-item.menu-open .h-menu-btn{opacity:1;}
  .h-menu-btn:hover{background:var(--bg-field);color:var(--text-primary);}
  .h-dropdown{
    display:none;flex-direction:column;gap:2px;position:absolute;top:34px;right:8px;z-index:30;
    min-width:172px;padding:4px;border-radius:8px;background:var(--bg-panel-2);border:1px solid var(--line);
    box-shadow:0 10px 24px var(--shadow-color);
  }
  .h-dropdown.open{display:flex;}
  .h-dropdown button{
    display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;border:none;background:none;
    color:var(--text-primary);font-size:12px;font-family:'Inter',sans-serif;text-align:left;cursor:pointer;
  }
  .h-dropdown button:hover{background:var(--bg-field);}
  .h-dropdown button.danger{color:var(--red);}
  .h-dropdown button.danger:hover{background:rgba(214,83,74,0.12);}
  .h-rename-input{
    width:100%;background:var(--bg-field);border:1px solid var(--amber-dim);border-radius:6px;
    color:var(--text-primary);font-size:12.5px;padding:4px 6px;font-family:'Inter',sans-serif;outline:none;
  }