:root{
  --bg:#191A1A;
  --bg-sidebar:#202222;
  --card:#242626;
  --text:#E8E6E3;
  --accent:#20808D;
  --accent-hover:#1a6b76;
  --muted:#8E9192;
  --border:#333535;
}
*{ box-sizing:border-box; margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', sans-serif;
  height:100vh;
  overflow:hidden;
}
.shell{ display:flex; height:100vh; }

.sidebar{
  width:260px; background:var(--bg-sidebar); border-right:1px solid var(--border);
  display:flex; flex-direction:column; padding:20px 16px; flex-shrink:0;
}
.logo{ display:block; font-family:'Fraunces', serif; font-size:18px; font-weight:700; margin-bottom:32px; color:var(--text); }
.logo span{ color:var(--accent); }
.new-chat{
  width:100%; background:transparent; border:1px solid var(--border); color:var(--text);
  padding:10px; border-radius:6px; font-size:13.5px; cursor:pointer; text-align:left;
}
.new-chat:hover{ border-color:var(--accent); color:var(--accent); }
.convo-list{ flex-grow:1; margin-top:20px; overflow-y:auto; }
.convo-item{
  padding:10px 10px; border-radius:6px; font-size:13.5px; color:var(--muted);
  cursor:pointer; margin-bottom:4px; display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.convo-title{ flex-grow:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.convo-delete, .convo-edit{
  opacity:0; transition:opacity 0.15s; font-size:14px; line-height:1; padding:0 4px; color:var(--muted);
}
.convo-item:hover .convo-delete, .convo-item:hover .convo-edit{ opacity:1; }
.convo-delete:hover, .convo-edit:hover{ color:var(--accent); }
.convo-item:hover{ background:var(--card); }
.convo-item.active{ background:var(--card); color:var(--text); }
.sidebar-bottom{ border-top:1px solid var(--border); padding-top:16px; }
.plan-badge{ font-size:12px; color:var(--muted); margin-bottom:8px; }
.upgrade-link{ font-size:13.5px; color:var(--accent); }

.notify-settings{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.notify-toggle-row{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); cursor:pointer;
}
.notify-toggle-row input{ cursor:pointer; }
#notifyTimeInput{
  font-size:13px; color:var(--muted); background:transparent; border:1px solid var(--border);
  border-radius:6px; padding:4px 8px; cursor:pointer;
}

.chat{ flex-grow:1; display:flex; flex-direction:column; }
.chat-header{
  padding:18px 32px; border-bottom:1px solid var(--border); font-size:14.5px; color:var(--muted);
}
.messages{
  flex-grow:1; overflow-y:auto; padding:32px; display:flex; flex-direction:column; gap:20px;
  max-width:780px; width:100%; margin:0 auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.messages::-webkit-scrollbar{ display:none; }

.convo-list{ scrollbar-width:none; -ms-overflow-style:none; }
.convo-list::-webkit-scrollbar{ display:none; }
.msg{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
.msg-name{ font-size:13px; font-weight:600; }
.msg.assistant .msg-name{ color:var(--accent); }
.msg.user .msg-name{ color:var(--text); }
.bubble{
  max-width:640px; font-size:15px; line-height:1.55; color:var(--text); padding:0; background:none; border:none;
}

.style-toggle{
  display:flex; gap:14px; font-size:12.5px; color:var(--muted); margin-bottom:12px;
}
.style-toggle label{ display:flex; align-items:center; gap:5px; cursor:pointer; }

body.bubble-mode .msg{ flex-direction:row; }
body.bubble-mode .msg.user{ justify-content:flex-end; }
body.bubble-mode .msg-name{ display:none; }
body.bubble-mode .bubble{
  max-width:560px; padding:14px 18px; border-radius:12px; background:var(--card); border:1px solid var(--border);
}

.input-bar{
  display:flex; flex-direction:column; gap:8px; padding:14px 20px; margin:14px auto;
  width:100%; max-width:780px; align-self:center;
  border:1px solid var(--border); border-radius:22px; background:var(--card);
}
#textInput{
  width:100%; padding:6px 4px; border:none; outline:none;
  background:transparent; color:var(--text); font-size:15px;
}
.input-toolbar{
  display:flex; align-items:center; justify-content:space-between; width:100%;
}
.toolbar-left, .toolbar-right{
  display:flex; align-items:center; gap:8px;
}
.pill-icon-btn{
  width:34px; height:34px; border-radius:50%; border:none; background:transparent;
  color:var(--muted); font-size:16px; cursor:pointer; flex-shrink:0; display:flex;
  align-items:center; justify-content:center;
}
.pill-icon-btn:hover{ background:var(--bg-sidebar); color:var(--text); }
.pill-icon-btn.recording{ background:var(--accent); color:#fff; }
.send-circle-btn{
  width:36px; height:36px; border-radius:50%; border:none; background:var(--accent);
  color:#fff; font-size:16px; cursor:pointer; flex-shrink:0; display:flex;
  align-items:center; justify-content:center;
}
.send-circle-btn:hover{ background:var(--accent-hover); }

@media (max-width:760px){
  .sidebar{ display:none; }
  .messages{ padding:20px; }
  .input-bar{ padding:14px 16px; }
}


.dict-btn{
  display:block; width:100%; background:transparent; border:1px solid var(--border); color:var(--text);
  padding:10px; border-radius:6px; font-size:13.5px; text-align:left; margin-top:8px;
  text-decoration:none; box-sizing:border-box;
}
.dict-btn:hover{ border-color:var(--accent); color:var(--accent); }