:root {
  --bg-dark: #0f172a;
  --panel-bg: #1e293b;
  --card-bg: #334155;
  --accent-blue: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-warning: #f59e0b;
  --accent-danger: #ef4444;
  --accent-success: #10b981;
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --border-color: #475569;
  --chat-bg: #0f172a;
  --bubble-user-bg: var(--accent-blue);
  --bubble-ai-bg: transparent;
  --bubble-radius: 12px;
  --app-font: system-ui, -apple-system, sans-serif;
  --msg-text: #e2e8f0;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; font-family: var(--app-font); background: var(--bg-dark); color: var(--text-main); }
button { cursor: pointer; border: none; background: none; color: inherit; font-family: inherit; }
input, textarea { font-family: inherit; outline: none; border: none; background: none; color: inherit; width: 100%; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

/* Layout Utama */
.app-container { display: flex; height: 100dvh; width: 100vw; overflow: hidden; }

/* Sidebar */
.sidebar {
  width: 320px; height: 100%; background: var(--panel-bg);
  display: flex; flex-direction: column; border-right: 1px solid var(--border-color);
  transition: transform 0.3s ease, margin-left 0.3s ease; flex-shrink: 0;
}
.sidebar.collapsed { margin-left: -320px; }

.sidebar-header { padding: 16px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; }
.sidebar-header h1 { font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
.sidebar-header .version { font-size: 0.7rem; color: var(--text-muted); }
.close-sidebar-btn { font-size: 1.5rem; color: var(--text-muted); padding: 4px; }

.sidebar-content { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 12px; }

/* Accordion */
details.sidebar-section { background: var(--bg-dark); border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden; }
details.sidebar-section summary { padding: 12px; cursor: pointer; font-weight: bold; font-size: 0.9rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.sidebar-section summary::-webkit-details-marker { display: none; }
details.sidebar-section summary::after { content: '▼'; font-size: 0.7rem; color: var(--text-muted); transition: transform 0.2s; }
details.sidebar-section[open] summary::after { transform: rotate(180deg); }
details.sidebar-section[open] summary { border-bottom: 1px solid var(--border-color); }
.section-content { padding: 12px; display: flex; flex-direction: column; gap: 8px; }

/* Buttons & Inputs */
.btn { padding: 10px 12px; border-radius: 6px; background: var(--card-bg); color: var(--text-main); font-size: 0.9rem; transition: background 0.2s; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.btn:hover { background: var(--accent-hover); }
.btn-primary { background: var(--accent-blue); }
.btn-danger { background: var(--accent-danger); }
.btn-sm { width: auto; padding: 6px 12px; font-size: 0.75rem; }

.mode-chip-container { display: flex; gap: 8px; }
.mode-chip { flex: 1; padding: 10px; border-radius: 6px; background: var(--card-bg); text-align: center; font-size: 0.85rem; border: 2px solid transparent; transition: all 0.2s; }
.mode-chip.active { border-color: var(--accent-blue); background: rgba(37, 99, 235, 0.2); }

.persona-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 8px; }
.persona-btn { padding: 10px; background: var(--card-bg); border-radius: 6px; font-size: 0.8rem; text-align: center; transition: background 0.2s; }
.persona-btn.active { background: var(--accent-warning); color: var(--bg-dark); font-weight: bold; }

.quick-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.quick-btn { padding: 8px; background: var(--card-bg); border-radius: 4px; font-size: 0.75rem; text-align: center; }

/* Theme Customizer */
.preset-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.preset-btn { padding: 8px 4px; background: var(--card-bg); border-radius: 4px; font-size: 0.75rem; border: 1px solid var(--border-color); text-align: center; }
.preset-btn:hover { border-color: var(--accent-blue); }
.theme-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.8rem; margin-bottom: 12px; }
.theme-row input[type="color"] { width: 40px; height: 30px; border: none; background: none; cursor: pointer; border-radius: 4px; padding: 0; }
.theme-row input[type="text"] { width: 120px; text-align: right; border-bottom: 1px solid var(--border-color); padding: 4px 0; }

/* Sessions */
.search-input { width: 100%; padding: 10px; margin-top: 8px; background: var(--bg-dark); border-radius: 6px; border: 1px solid var(--border-color); box-sizing: border-box; }
.session-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.session-item { padding: 12px; border-radius: 6px; background: var(--card-bg); font-size: 0.85rem; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; }
.session-item:hover { background: var(--border-color); }
.session-item.active { background: var(--accent-blue); }
.session-item .delete-btn { opacity: 0; transition: opacity 0.2s; color: var(--accent-danger); background: transparent; }
.session-item:hover .delete-btn { opacity: 1; }
.session-group-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 12px; margin-bottom: 4px; text-transform: uppercase; padding-left: 4px; }

/* Footer Sidebar */
.sidebar-footer { padding: 16px; border-top: 1px solid var(--border-color); font-size: 0.8rem; color: var(--text-muted); display: flex; flex-direction: column; gap: 4px; }
.doc-btn { width: 100%; text-align: left; padding: 10px; background: transparent; color: var(--text-muted); border-radius: 4px; font-size: 0.85rem; }
.doc-btn:hover { background: var(--card-bg); color: var(--text-main); }
.auth-box { border-bottom: 1px solid var(--border-color); padding-bottom: 12px; margin-bottom: 8px; }
.google-login-wrapper { margin-bottom: 12px; display: flex; justify-content: center; min-height: 40px; }
.user-info { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bg-dark); border-radius: 8px; }
.user-info img { width: 32px; height: 32px; border-radius: 50%; }
.user-info span { font-size: 0.9rem; color: var(--text-main); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.footer-bottom { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 8px; }
.btn-donate { text-align: center; padding: 10px; background: #f43f5e; color: white; border-radius: 6px; text-decoration: none; font-weight: bold; font-size: 0.9rem; }
.copyright { margin-top: 4px; font-size: 0.7rem; text-align: center; }

/* Chat Area */
.chat-area { flex: 1; height: 100%; display: flex; flex-direction: column; background: var(--chat-bg); position: relative; width: 100%; }
.chat-header { padding: 12px 16px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: var(--panel-bg); min-height: 56px; }
.chat-header .model-info { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: bold; }
.menu-btn { font-size: 1.5rem; color: var(--text-main); padding: 4px 8px; }
.donate-icon { text-decoration: none; font-size: 1.2rem; }

.messages-box { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; padding-bottom: 120px; }
.message { max-width: 80%; padding: 12px 16px; border-radius: var(--bubble-radius); line-height: 1.6; word-wrap: break-word; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.message.user { background: var(--bubble-user-bg); align-self: flex-end; border-bottom-right-radius: 4px; }
.message.ai { background: var(--bubble-ai-bg); border: 1px solid var(--border-color); align-self: flex-start; border-bottom-left-radius: 4px; color: var(--msg-text); }
.message.ai pre { background: #0d1117; padding: 12px; border-radius: 6px; overflow-x: auto; margin: 8px 0; border: 1px solid var(--border-color); }
.message.ai code { font-family: monospace; font-size: 0.85rem; }
.message.ai p { margin-bottom: 8px; }
.message.ai ul, .message.ai ol { padding-left: 20px; margin-bottom: 8px; }
.message.ai h1, .message.ai h2, .message.ai h3 { margin: 12px 0 6px; font-weight: bold; color: var(--text-main); }
.message.ai table { width: 100%; border-collapse: collapse; margin: 8px 0; }
.message.ai th, .message.ai td { border: 1px solid var(--border-color); padding: 8px; text-align: left; }

.msg-actions { position: absolute; bottom: -24px; right: 0; display: flex; gap: 8px; font-size: 0.75rem; opacity: 0; transition: opacity 0.2s; }
.message:hover .msg-actions { opacity: 1; }
.msg-action-btn { color: var(--text-muted); padding: 2px 6px; border-radius: 4px; background: var(--card-bg); }

/* Input Bar */
.input-bar-container { padding: 12px; background: var(--panel-bg); border-top: 1px solid var(--border-color); display: flex; align-items: flex-end; gap: 8px; }
.input-tools { display: flex; gap: 4px; align-items: center; }
.tool-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--card-bg); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; transition: background 0.2s; flex-shrink: 0; }
.tool-btn:hover { background: var(--accent-hover); }
.tool-btn.active { background: var(--accent-warning); color: var(--bg-dark); }

#chatInput { flex: 1; max-height: 120px; min-height: 40px; padding: 12px; background: var(--bg-dark); border-radius: 20px; color: var(--text-main); resize: none; font-size: 1rem; border: 1px solid var(--border-color); line-height: 1.4; }
.send-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--accent-blue); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: white; flex-shrink: 0; }
.send-btn:disabled { background: var(--card-bg); color: var(--text-muted); cursor: not-allowed; }

.attachment-preview { display: flex; gap: 8px; padding: 8px 0 0 0; flex-wrap: wrap; }
.att-item { background: var(--card-bg); padding: 6px 12px; border-radius: 20px; font-size: 0.8rem; display: flex; align-items: center; gap: 8px; }
.att-item .remove-att { color: var(--accent-danger); cursor: pointer; font-weight: bold; }

/* Quota Box */
.quota-box { margin-top:12px; padding:8px; background:var(--card-bg); border-radius:6px; font-size:0.8rem; color:var(--text-muted); text-align:center; }

/* Docs Drawer */
.doc-drawer { position: fixed; top: 0; right: 0; width: 100%; max-width: 600px; height: 100%; background: var(--panel-bg); z-index: 9500; transform: translateX(100%); transition: transform 0.3s ease; box-shadow: -4px 0 15px rgba(0,0,0,0.3); display: flex; flex-direction: column; }
.doc-drawer.open { transform: translateX(0); }
.doc-header { padding: 16px; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; background: var(--bg-dark); }
.doc-body { flex: 1; border: none; width: 100%; height: 100%; }
.close-btn { font-size: 1.5rem; }

/* Modal */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; display: none; justify-content: center; align-items: center; }
.modal-overlay.show { display: flex; }
.modal-content { background: var(--panel-bg); padding: 24px; border-radius: 12px; width: 90%; max-width: 400px; text-align: center; border: 1px solid var(--border-color); }
.rec-timer { font-size: 2rem; font-family: monospace; margin: 16px 0; color: var(--accent-danger); }
.rec-status { color: var(--text-muted); }
.rec-controls { display: flex; gap: 12px; justify-content: center; margin-top: 24px; }

/* Mobile Fixes */
@media (max-width: 768px) {
  .app-container { padding-left: 0; }
  .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 85%; max-width: 320px; transform: translateX(-100%); z-index: 200; margin-left: 0; }
  .sidebar.open { transform: translateX(0); box-shadow: 4px 0 15px rgba(0,0,0,0.5); }
  .sidebar.collapsed { margin-left: 0; transform: translateX(-100%); }
  
  .chat-area { width: 100vw; }
  .messages-box { padding: 16px 12px; padding-bottom: 100px; gap: 20px; }
  .message { max-width: 90%; font-size: 0.95rem; }
  
  .input-bar-container { position: fixed; bottom: 0; left: 0; right: 0; z-index: 50; background: var(--panel-bg); padding: 8px 12px; padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border-color); }
  .doc-drawer { max-width: 100%; }
}

/* Utility */
.hidden { display: none !important; }
.dev-only { display: none; }
/* ===== SIDEBAR RAPI v10.8-fix ===== */
.sidebar-content{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
.auth-box{padding:0 0 12px 0;margin:0 0 4px 0;border-bottom:1px solid var(--border-color)}
.google-login-wrapper{min-height:40px;display:flex;justify-content:center;margin:0}
.user-info{display:flex;align-items:center;gap:10px;padding:10px;background:var(--bg-dark);border-radius:8px}
.user-info img{width:32px;height:32px;border-radius:50%;flex-shrink:0}
.user-info span{flex:1;font-size:.9rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
details.sidebar-section{background:var(--bg-dark);border:1px solid var(--border-color);border-radius:8px;flex-shrink:0;overflow:visible}
details.sidebar-section summary{padding:12px 14px;min-height:44px;cursor:pointer;font-weight:700;font-size:.9rem;line-height:1.2;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.sidebar-section summary::-webkit-details-marker{display:none}
details.sidebar-section summary::after{content:'▼';font-size:.7rem;color:var(--text-muted);margin-left:8px;transition:transform .2s}
details.sidebar-section[open] summary::after{transform:rotate(180deg)}
details.sidebar-section[open] summary{border-bottom:1px solid var(--border-color)}
.section-content{padding:12px;display:flex;flex-direction:column;gap:8px}
/* ===== FIX SCROLL v10.8-fix2 ===== */
.chat-area{min-height:0}
.messages-box{min-height:0;overflow-y:auto}
/* ===== v10.8 UI PATCH: docs scroll, message actions, FT, paste ===== */

.docs-scroll {
  max-height: 180px;
  overflow-y: auto;
  padding-right: 4px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
  margin-bottom: 8px;
}

.sidebar-footer {
  flex-shrink: 0;
  max-height: 320px;
  overflow: hidden;
}

.message-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  flex-wrap: wrap;
  opacity: 0.85;
}

.message:hover .message-actions {
  opacity: 1;
}

.message-action-btn {
  background: var(--card-bg);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.72rem;
  cursor: pointer;
}

.message-action-btn:hover {
  background: var(--accent-blue);
  color: white;
}

.message.user .message-actions {
  justify-content: flex-end;
}

.message.ai .message-actions {
  justify-content: flex-start;
}

#ft-panel {
  text-align: left;
}

#ft-panel strong {
  display: block;
  margin-bottom: 8px;
  color: var(--text-main);
}

#ft-panel .search-input {
  margin-top: 4px;
  margin-bottom: 8px;
}

.attachment-preview:not(:empty) {
  padding: 8px 12px;
  background: var(--panel-bg);
  border-top: 1px solid var(--border-color);
}

@media (max-width: 768px) {
  .docs-scroll {
    max-height: 150px;
  }

  .sidebar-footer {
    max-height: 280px;
  }
}
/* ===== v10.9 layout ===== */
.static-section{background:var(--bg-dark);border:1px solid var(--border-color);border-radius:8px;padding:12px}
.static-section .section-title{font-weight:700;font-size:.9rem;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.docs-scroll{max-height:170px;overflow-y:auto;padding-right:4px;margin-bottom:8px}
/* ===== v10.8 FINAL ===== */
.static-section{background:var(--bg-dark);border:1px solid var(--border-color);border-radius:8px;padding:12px}
.static-section .section-title{font-weight:700;font-size:.9rem;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.docs-scroll{max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
#ft-panel{text-align:left}
#ft-panel strong{display:block;margin-bottom:8px}
#ft-panel .search-input{margin-top:4px;margin-bottom:8px}
.message img{max-width:100%;border-radius:8px;margin-top:8px}
/* ===== LAUNCH FIX v10.9 — WAJIB PALING BAWAH ===== */

/* [A] Footer sidebar tidak terpotong (Trakteer & copyright terlihat penuh) */
.sidebar-footer{max-height:none;overflow:visible}

/* [C] Attachment preview melayang DI ATAS input bar (tidak men-squeeze textarea) */
.input-bar-container{position:relative}
.attachment-preview:empty{display:none}
.attachment-preview:not(:empty){position:absolute;bottom:calc(100% + 4px);left:12px;right:12px;padding:8px 12px;background:var(--panel-bg);border:1px solid var(--border-color);border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:60}

/* [F] Kontras teks otomatis untuk tema terang (Paper/Pastel tetap terbaca) */
.message.user{color:var(--user-text,var(--text-main))}

/* [B]+[D] Layar sentuh & mobile: Copy/Edit/Baca/Stop + hapus sesi selalu terlihat tanpa hover */
@media (hover:none),(max-width:768px){
  .msg-actions{position:static;opacity:1;margin-top:8px}
  .message.user .msg-actions{justify-content:flex-end}
  .session-item .delete-btn{opacity:1}
  .sidebar-footer{max-height:none;overflow:visible}
}
/* ===== FINAL FIX v10.9.1 — WAJIB PALING BAWAH ===== */
.input-bar-container{position:relative}
.attachment-preview:empty{display:none}
.attachment-preview:not(:empty){
  position:absolute;bottom:calc(100% + 4px);left:12px;right:12px;
  display:flex;gap:6px;flex-wrap:wrap;
  padding:8px 12px;background:var(--panel-bg);
  border:1px solid var(--border-color);border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.3);z-index:60;
}
.attachment-preview .att-item{background:var(--card-bg);padding:6px 12px;border-radius:20px;font-size:.8rem;display:flex;align-items:center;gap:8px}
@media (max-width:768px){
  .input-bar-container{position:fixed;bottom:0;left:0;right:0;z-index:50}
}