/* ═══════════════════════════════════════════════════
   HELMA AI — Stylesheet (dengan Sidebar) // helma.css
   ═══════════════════════════════════════════════════ */

:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);

  --space-1:.25rem; --space-2:.5rem;  --space-3:.75rem;
  --space-4:1rem;   --space-5:1.25rem;--space-6:1.5rem;
  --space-8:2rem;   --space-10:2.5rem;--space-12:3rem;

  --radius-sm:.375rem; --radius-md:.5rem;
  --radius-lg:.75rem;  --radius-xl:1rem; --radius-full:9999px;

  --transition:180ms cubic-bezier(0.16,1,0.3,1);
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','Fira Code',monospace;
  --content-chat:760px;
  --sidebar-w:268px;
}

:root,[data-theme="light"] {
  --color-bg:             #f7f6f2;
  --color-surface:        #f9f8f5;
  --color-surface-2:      #ffffff;
  --color-surface-offset: #f0ede9;
  --color-divider:        #dcd9d5;
  --color-border:         #d4d1ca;
  --color-text:           #28251d;
  --color-text-muted:     #6b6965;
  --color-text-faint:     #a8a7a2;
  --color-text-inverse:   #f9f8f4;
  --color-primary:        #01696f;
  --color-primary-hover:  #0c4e54;
  --color-primary-glow:   rgba(1,105,111,0.15);
  --color-primary-hl:     #cedcd8;
  --color-user-bubble:    #e6f0ef;
  --color-ai-bubble:      #ffffff;
  --color-sidebar-bg:     #f2f0ec;
  --color-sidebar-hover:  #e8e5e0;
  --color-sidebar-active: #dddad5;
  --shadow-sm: 0 1px 2px rgba(40,37,29,.06);
  --shadow-md: 0 4px 12px rgba(40,37,29,.08);
}

[data-theme="dark"] {
  --color-bg:             #111110;
  --color-surface:        #161513;
  --color-surface-2:      #1c1b19;
  --color-surface-offset: #1a1918;
  --color-divider:        #252422;
  --color-border:         #2e2d2b;
  --color-text:           #e8e7e3;
  --color-text-muted:     #848280;
  --color-text-faint:     #4e4d4b;
  --color-text-inverse:   #1c1b19;
  --color-primary:        #4f98a3;
  --color-primary-hover:  #67adb8;
  --color-primary-glow:   rgba(79,152,163,0.18);
  --color-primary-hl:     #1e3335;
  --color-user-bubble:    #1d2e30;
  --color-ai-bubble:      #1c1b19;
  --color-sidebar-bg:     #0e0e0d;
  --color-sidebar-hover:  #1a1918;
  --color-sidebar-active: #1e2d2e;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.25);
  --shadow-md: 0 4px 12px rgba(0,0,0,.35);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;height:100%}
body{font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);height:100%;overflow:hidden}
button{cursor:pointer;background:none;border:none;font:inherit;color:inherit}
textarea{font:inherit;color:inherit}
a,button,input,textarea{transition:color var(--transition),background var(--transition),border-color var(--transition),box-shadow var(--transition),opacity var(--transition)}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:var(--radius-sm)}
::selection{background:var(--color-primary-glow)}

/* ─── Layout Shell ──────────────────────────── */
#app{display:flex;height:100dvh;overflow:hidden}

/* ─── Sidebar ───────────────────────────────── */
#sidebar{
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  display:flex;
  flex-direction:column;
  background:var(--color-sidebar-bg);
  border-right:1px solid var(--color-border);
  overflow:hidden;
  transition:transform var(--transition),min-width var(--transition),width var(--transition);
  z-index:20;
  flex-shrink:0;
}
#sidebar.collapsed{
  width:0;min-width:0;border-right:none;
  transform:translateX(-100%);
}

.sidebar-top{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-3) var(--space-2);
  border-bottom:1px solid var(--color-border);
  flex-shrink:0;
}
.sidebar-brand{display:flex;align-items:center;gap:var(--space-2)}
.sidebar-brand-name{font-weight:700;font-size:var(--text-sm);letter-spacing:-0.01em}
.sidebar-close{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--color-text-faint)}
.sidebar-close:hover{background:var(--color-sidebar-hover);color:var(--color-text-muted)}

.btn-new-chat{
  display:flex;align-items:center;gap:var(--space-2);
  margin:var(--space-3) var(--space-3) 0;
  padding:var(--space-2) var(--space-3);
  background:var(--color-primary);color:white;
  border-radius:var(--radius-md);
  font-size:var(--text-xs);font-weight:600;
  transition:background var(--transition);
  white-space:nowrap;flex-shrink:0;
}
.btn-new-chat:hover{background:var(--color-primary-hover)}
.btn-new-chat:active{transform:scale(.98)}

.conv-section-label{
  font-size:10px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--color-text-faint);
  padding:var(--space-4) var(--space-4) var(--space-1);
  flex-shrink:0;
}
.conv-list{flex:1;overflow-y:auto;padding:0 var(--space-2) var(--space-4)}
.conv-list::-webkit-scrollbar{width:3px}
.conv-list::-webkit-scrollbar-track{background:transparent}
.conv-list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}

.conv-empty{font-size:var(--text-xs);color:var(--color-text-faint);text-align:center;padding:var(--space-6) var(--space-4)}

/* Conversation item */
.conv-item{
  display:flex;align-items:center;gap:0;
  border-radius:var(--radius-md);
  overflow:hidden;
  margin-bottom:2px;
}
.conv-item-btn{
  flex:1;min-width:0;
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);
  text-align:left;cursor:pointer;
  background:none;border:none;color:var(--color-text-muted);
  font-size:var(--text-xs);line-height:1.4;
  transition:background var(--transition),color var(--transition);
}
.conv-item-btn:hover{background:var(--color-sidebar-hover);color:var(--color-text)}
.conv-item-btn.active{background:var(--color-sidebar-active);color:var(--color-text)}
.conv-item-icon{flex-shrink:0;opacity:.5}
.conv-item-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv-item-del{
  flex-shrink:0;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:var(--radius-sm);
  color:var(--color-text-faint);
  opacity:0;
  transition:opacity var(--transition),background var(--transition),color var(--transition);
}
.conv-item:hover .conv-item-del{opacity:1}
.conv-item-del:hover{background:rgba(161,44,123,.12);color:#b04090}
[data-theme="dark"] .conv-item-del:hover{background:rgba(209,99,167,.12);color:#d163a7}

/* ─── Sidebar Overlay (mobile) ──────────────── */
#sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.45);z-index:19;
  opacity:0;transition:opacity var(--transition);
}
#sidebar-overlay.visible{opacity:1}

/* ─── Main ──────────────────────────────────── */
#main{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}

/* ─── Header ────────────────────────────────── */
#header{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-2) var(--space-4);
  background:var(--color-surface);
  border-bottom:1px solid var(--color-border);
  flex-shrink:0;z-index:10;gap:var(--space-3);
}
.header-left{display:flex;align-items:center;gap:var(--space-2);min-width:0}
.header-brand{display:flex;align-items:center;gap:var(--space-3)}
.brand-name{font-size:var(--text-base);font-weight:700;letter-spacing:-0.02em;line-height:1}
.brand-engine{font-size:var(--text-xs);color:var(--color-primary);font-family:var(--font-mono);font-weight:500;background:var(--color-primary-hl);padding:2px var(--space-2);border-radius:var(--radius-full);letter-spacing:.01em}
.header-actions{display:flex;align-items:center;gap:var(--space-2);flex-shrink:0}

.conv-title-wrap{display:flex;align-items:center;gap:var(--space-1);min-width:0;max-width:260px}
.conv-title-text{font-size:var(--text-xs);color:var(--color-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.btn-rename{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--color-text-faint);flex-shrink:0}
.btn-rename:hover{background:var(--color-surface-offset);color:var(--color-text)}

.btn-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);color:var(--color-text-muted)}
.btn-icon:hover{background:var(--color-surface-offset);color:var(--color-text)}
.btn-icon:active{background:var(--color-divider)}
.btn-clear{font-size:var(--text-xs);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);border:1px solid var(--color-border);color:var(--color-text-muted)}
.btn-clear:hover{border-color:var(--color-text-faint);color:var(--color-text)}

/* ─── Chat Area ─────────────────────────────── */
#chat-area{flex:1;overflow-y:auto;padding:var(--space-6) var(--space-4);scroll-behavior:smooth}
#chat-area::-webkit-scrollbar{width:5px}
#chat-area::-webkit-scrollbar-track{background:transparent}
#chat-area::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}
#chat-area::-webkit-scrollbar-thumb:hover{background:var(--color-text-faint)}

.chat-inner{max-width:var(--content-chat);margin:0 auto;display:flex;flex-direction:column;gap:var(--space-6)}

/* ─── Welcome ───────────────────────────────── */
#welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:62vh;text-align:center;gap:var(--space-4);padding:var(--space-8)}
.welcome-title{font-size:var(--text-xl);font-weight:700;letter-spacing:-0.03em}
.welcome-sub{font-size:var(--text-sm);color:var(--color-text-muted);max-width:44ch;line-height:1.75}
.welcome-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-top:var(--space-2)}
.chip{font-size:var(--text-xs);padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-full);color:var(--color-text-muted);background:var(--color-surface);cursor:pointer;line-height:1.4}
.chip:hover{border-color:var(--color-primary);color:var(--color-primary);background:var(--color-primary-hl)}

/* ─── Messages ──────────────────────────────── */
.message{display:flex;gap:var(--space-3);animation:msgIn 200ms cubic-bezier(0.16,1,0.3,1) both}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.message.user{flex-direction:row-reverse}

.message-avatar{width:32px;height:32px;border-radius:var(--radius-full);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:2px;overflow:hidden}
.message.user .message-avatar{background:var(--color-primary);color:var(--color-text-inverse)}
.message.ai   .message-avatar{background:var(--color-surface-offset);border:1px solid var(--color-border)}

.message-content{max-width:calc(100% - 80px)}
.message-label{font-size:var(--text-xs);font-weight:600;color:var(--color-text-faint);margin-bottom:var(--space-1);letter-spacing:.03em;text-transform:uppercase}
.message.user .message-label{text-align:right}

.message-bubble{padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg);font-size:var(--text-sm);line-height:1.8;word-break:break-word}
.message.user .message-bubble{background:var(--color-user-bubble);border:1px solid var(--color-primary-hl);border-bottom-right-radius:var(--radius-sm);font-weight:400}
.message.ai   .message-bubble{background:var(--color-ai-bubble);border:1px solid var(--color-border);border-bottom-left-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}

/* ─── Bubble Typography ─────────────────────── */
.message-bubble p{margin-bottom:var(--space-3);font-weight:400;line-height:1.8}
.message-bubble p:last-child{margin-bottom:0}
.message-bubble h1,.message-bubble h2,.message-bubble h3,.message-bubble h4{font-weight:600;letter-spacing:-0.01em;line-height:1.3;margin-top:var(--space-5);margin-bottom:var(--space-2);color:var(--color-text)}
.message-bubble h1:first-child,.message-bubble h2:first-child,.message-bubble h3:first-child{margin-top:0}
.message-bubble h1{font-size:var(--text-lg)}
.message-bubble h2{font-size:var(--text-base)}
.message-bubble h3{font-size:var(--text-sm)}
.message-bubble h4{font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}
.message-bubble strong{font-weight:600}
.message-bubble em{font-style:italic;color:var(--color-text-muted)}
.message-bubble a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}
.message-bubble a:hover{color:var(--color-primary-hover)}
.message-bubble ul,.message-bubble ol{padding-left:var(--space-5);margin-bottom:var(--space-3)}
.message-bubble li{margin-bottom:var(--space-2);line-height:1.7;font-weight:400}
.message-bubble li:last-child{margin-bottom:0}
.message-bubble blockquote{border-left:2px solid var(--color-primary);padding:var(--space-2) var(--space-4);margin:var(--space-3) 0;color:var(--color-text-muted);background:var(--color-surface-offset);border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-style:italic}
.message-bubble hr{border:none;border-top:1px solid var(--color-divider);margin:var(--space-4) 0}

/* Inline code */
.message-bubble code{font-family:var(--font-mono);font-size:.85em;font-weight:400;background:var(--color-surface-offset);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:1px 6px}

/* ─── Code Block ────────────────────────────── */
.message-bubble .code-block{
  position:relative;
  margin:var(--space-3) 0;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  overflow:hidden;
  /* Reveal copy-btn on hover */
}
.message-bubble .code-block:first-child{margin-top:0}
.message-bubble .code-block:last-child{margin-bottom:0}

/* Lang label — floating top-left */
.message-bubble .code-block .code-lang{
  position:absolute;
  top:var(--space-2);
  left:var(--space-3);
  z-index:2;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:500;
  color:var(--color-text-faint);
  text-transform:lowercase;
  letter-spacing:.04em;
  pointer-events:none;
  /* fade out when hovered so button stays readable */
  transition:opacity var(--transition);
}
.message-bubble .code-block:hover .code-lang{opacity:.4}

/* Copy button — floating top-right */
.message-bubble .code-block .copy-btn{
  position:absolute;
  top:var(--space-2);
  right:var(--space-2);
  z-index:3;
  display:flex;
  align-items:center;
  gap:5px;
  font-size:11px;
  font-family:var(--font-body);
  color:var(--color-text-muted);
  padding:3px var(--space-2);
  border-radius:var(--radius-sm);
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
  line-height:1;
  opacity:0;
  transition:opacity var(--transition),background var(--transition),border-color var(--transition),color var(--transition);
}
.message-bubble .code-block:hover .copy-btn{opacity:1}
.message-bubble .code-block .copy-btn:hover{
  background:var(--color-surface-2);
  border-color:var(--color-border);
  color:var(--color-text);
}
.message-bubble .code-block .copy-btn.copied{
  color:var(--color-primary);
  background:var(--color-primary-hl);
  border-color:transparent;
  opacity:1;
}

/* Pre / code inside block */
.message-bubble .code-block pre{
  margin:0;
  border:none;
  border-radius:0;
  background:var(--color-surface-offset);
  /* Padding-top lebih besar agar konten tidak tertimpa floating label/button */
  padding:var(--space-8) var(--space-4) var(--space-3);
  overflow-x:auto;
}
.message-bubble .code-block pre::-webkit-scrollbar{height:4px}
.message-bubble .code-block pre::-webkit-scrollbar-track{background:transparent}
.message-bubble .code-block pre::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}
.message-bubble .code-block pre code{
  background:none;
  border:none;
  padding:0;
  font-size:var(--text-xs);
  display:block;
  line-height:1.65;
}

/* ─── Tables ────────────────────────────────── */
.message-bubble .table-wrapper{
  overflow-x:auto;
  overflow-y:auto;
  max-height:420px;
  margin:var(--space-3) 0;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  /* Isolate stacking context for sticky thead */
  position:relative;
}
.message-bubble .table-wrapper:first-child{margin-top:0}
.message-bubble .table-wrapper:last-child{margin-bottom:0}
.message-bubble .table-wrapper::-webkit-scrollbar{width:4px;height:4px}
.message-bubble .table-wrapper::-webkit-scrollbar-track{background:transparent}
.message-bubble .table-wrapper::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}

.message-bubble table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--text-xs);
  line-height:1.5;
}
/* Sticky thead */
.message-bubble thead{position:sticky;top:0;z-index:2}
.message-bubble th{
  background:var(--color-surface-offset);
  font-weight:600;
  color:var(--color-text);
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--color-border);
  white-space:nowrap;
  /* Reinforce background untuk menutupi baris yang scroll di bawahnya */
  box-shadow:0 1px 0 var(--color-border);
}
.message-bubble td{
  padding:var(--space-2) var(--space-3);
  border-bottom:1px solid var(--color-divider);
  color:var(--color-text);
  font-weight:400;
  vertical-align:top;
}
.message-bubble tbody tr:last-child td{border-bottom:none}
.message-bubble tbody tr:hover td{background:var(--color-surface-offset);transition:background var(--transition)}

/* ─── Typing ────────────────────────────────── */
.typing-cursor{display:inline-block;width:2px;height:1.1em;background:var(--color-primary);border-radius:1px;margin-left:2px;vertical-align:text-bottom;animation:cursorBlink .6s steps(1) infinite}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
.typing-indicator{display:flex;gap:5px;padding:var(--space-2) var(--space-1);align-items:center}
.typing-dot{width:7px;height:7px;background:var(--color-text-faint);border-radius:50%;animation:dotBounce 1.2s ease-in-out infinite}
.typing-dot:nth-child(2){animation-delay:.2s}
.typing-dot:nth-child(3){animation-delay:.4s}
@keyframes dotBounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-6px);opacity:1}}

/* ─── Error ─────────────────────────────────── */
.error-bubble{background:rgba(161,44,123,.07)!important;border-color:rgba(161,44,123,.2)!important;color:#b04090!important;font-family:var(--font-mono);font-size:var(--text-xs)!important;line-height:1.6!important}
[data-theme="dark"] .error-bubble{background:rgba(209,99,167,.08)!important;border-color:rgba(209,99,167,.2)!important;color:#d163a7!important}

/* ─── Input Area ────────────────────────────── */
#input-area{flex-shrink:0;padding:var(--space-4) var(--space-4) var(--space-5);background:var(--color-surface);border-top:1px solid var(--color-border)}
.input-wrapper{max-width:var(--content-chat);margin:0 auto;display:flex;align-items:flex-end;gap:var(--space-2);background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-4);box-shadow:var(--shadow-sm)}
.input-wrapper:focus-within{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow),var(--shadow-sm)}
#message-input{flex:1;background:none;border:none;outline:none;resize:none;font-size:var(--text-sm);color:var(--color-text);line-height:1.65;max-height:200px;min-height:26px;padding:var(--space-1) 0;scrollbar-width:thin}
#message-input::placeholder{color:var(--color-text-faint)}
.send-btn{width:36px;height:36px;border-radius:var(--radius-lg);background:var(--color-primary);color:white;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.35}
.send-btn.active{opacity:1}
.send-btn.active:hover{background:var(--color-primary-hover);transform:scale(1.05)}
.send-btn.active:active{transform:scale(.95)}
.input-hint{max-width:var(--content-chat);margin:var(--space-2) auto 0;font-size:var(--text-xs);color:var(--color-text-faint);text-align:center}

/* ─── Rename Modal ──────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:100;display:flex;align-items:center;justify-content:center;padding:var(--space-4);animation:fadeIn 150ms ease}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);width:100%;max-width:400px;box-shadow:var(--shadow-md);animation:slideUp 200ms cubic-bezier(0.16,1,0.3,1)}
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.modal-title{font-size:var(--text-base);font-weight:600;margin-bottom:var(--space-4)}
.modal-input{width:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);font-size:var(--text-sm);color:var(--color-text);outline:none}
.modal-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px var(--color-primary-glow)}
.modal-actions{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:var(--space-4)}
.modal-btn-cancel{font-size:var(--text-sm);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);border:1px solid var(--color-border);color:var(--color-text-muted)}
.modal-btn-cancel:hover{background:var(--color-surface-offset)}
.modal-btn-ok{font-size:var(--text-sm);padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);background:var(--color-primary);color:white;font-weight:600}
.modal-btn-ok:hover{background:var(--color-primary-hover)}

/* ─── Responsive ────────────────────────────── */
@media (max-width:768px) {
  #sidebar{
    position:fixed;top:0;left:0;height:100dvh;
    transform:translateX(-100%);
    box-shadow:var(--shadow-md);
  }
  #sidebar.open{transform:translateX(0)}
  #sidebar-overlay.visible{display:block}
  #header{padding:var(--space-2) var(--space-3)}
  #chat-area{padding:var(--space-4) var(--space-3)}
  #input-area{padding:var(--space-3) var(--space-3) var(--space-4)}
  .message-content{max-width:calc(100% - 52px)}
  .brand-engine{display:none}
  .conv-title-wrap{display:none!important}
}
@media (min-width:769px){
  #sidebar.collapsed{transform:translateX(0)}
  .sidebar-close{display:none}
}

/* ── Syntax Highlight (highlight.js) override ────── */
.code-block code.hljs{background:transparent;padding:0}