*{margin:0;padding:0;box-sizing:border-box;font-family:Inter,system-ui,Arial;}
body{background: radial-gradient(circle at top left, #d8e7ff, #f7f9fc); color:#111827;}
.layout{display:flex;height:100vh;}

/* Sidebar */
.sidebar{
  width:320px; max-width:90vw;
  background:#0b1220; color:#cbd5e1;
  border-right:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column;
}
.side-top{padding:16px; border-bottom:1px solid rgba(255,255,255,.08);}
.side-brand{display:flex; gap:10px; align-items:center;}
.logo{
  width:42px;height:42px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#0d6efd,#11b49a); color:#fff;
}
.brand-title{font-weight:950; color:#fff;}
.brand-sub{font-size:12px; opacity:.85; margin-top:2px;}
.newchat{
  width:100%; margin-top:12px; padding:12px 12px;
  border:none; border-radius:12px;
  background:#2b7bff; color:#fff; font-weight:950; cursor:pointer;
}
.newchat:hover{background:#1f63d6;}
.chatlist{padding:10px; overflow:auto; flex:1;}
.chatitem{
  padding:12px; border-radius:12px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  margin-bottom:10px; cursor:pointer; position:relative;
}
.chatitem.active{outline:2px solid rgba(43,123,255,.6);}
.chat-title{font-weight:900;color:#fff;font-size:13px;line-height:1.3;}
.chat-meta{font-size:11px;opacity:.8;margin-top:6px;}
.chatmenu{
  position:absolute; right:10px; top:10px;
  background:transparent; border:none;
  color:#cbd5e1; cursor:pointer; font-size:18px;
}
.menu-pop{
  position:absolute; right:10px; top:34px;
  width:160px; background:#111827;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px; overflow:hidden;
  display:none; z-index:5;
}
.menu-pop button{
  width:100%; padding:10px 12px;
  background:transparent; border:none;
  color:#e5e7eb; text-align:left;
  cursor:pointer; font-weight:800; font-size:13px;
}
.menu-pop button:hover{background:rgba(255,255,255,.06);}

/* Main */
.main{flex:1; display:flex; flex-direction:column; height:100vh;}
.topbar{
  height:56px; display:flex; align-items:center; justify-content:space-between;
  padding:0 16px;
  background:rgba(255,255,255,.75);
  border-bottom:1px solid #e9eef6;
  backdrop-filter: blur(10px);
}
.back{text-decoration:none;color:#1f63d6;font-weight:950;}
.top-actions{display:flex; gap:10px; align-items:center;}
.lang{
  border:1px solid #dbe2ef; border-radius:12px;
  padding:10px 12px; font-weight:900; background:#fff;
}
.logout{
  border:1px solid #dbe2ef; border-radius:12px;
  padding:10px 12px; font-weight:900; background:#fff; cursor:pointer;
}
.logout:hover{background:#f9fafb;}
.messages{flex:1; overflow:auto; padding:18px;}

/* bubbles */
.bubble{
  max-width:78%; padding:12px 14px;
  border-radius:16px; margin-bottom:12px;
  line-height:1.5; font-size:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.05);
  white-space:pre-wrap;
}
.user{margin-left:auto; background:#c8e6c9; border-top-right-radius:6px;}
.bot{margin-right:auto; background:#e3f2fd; border-top-left-radius:6px;}
.doctor-tag{
  display:inline-block; font-weight:950;
  font-size:12px; margin-bottom:6px; color:#0b3b8a;
}

/* composer */
.composer{
  display:flex; align-items:center; gap:10px;
  padding:12px; background:#fff;
  border-top:1px solid #e9eef6;
}
.iconbtn{
  width:44px;height:44px;border-radius:14px;
  border:1px solid #dbe2ef; background:#fff;
  cursor:pointer; font-size:18px;
}
.iconbtn:hover{background:#f9fafb;}
.text{
  flex:1; padding:12px 12px;
  border-radius:14px; border:1px solid #dbe2ef;
  outline:none; font-size:14px;
}
.text:focus{border-color:#2b7bff; box-shadow:0 0 0 4px rgba(43,123,255,.12);}
.send{
  padding:12px 14px; border:none; border-radius:14px;
  background:#2b7bff; color:#fff; font-weight:950; cursor:pointer;
}
.send:hover{background:#1f63d6;}

.typing{display:inline-flex; gap:6px; align-items:center; margin-left:6px;}
.typing .dot{
  width:7px; height:7px; border-radius:50%;
  background: currentColor; opacity:.35;
  animation: dotPulse 1s infinite;
}
.typing .dot:nth-child(2){animation-delay:.2s;}
.typing .dot:nth-child(3){animation-delay:.4s;}
#soundBtn { font-size: 18px; }

@keyframes dotPulse{
  0%,100%{transform:translateY(0); opacity:.35;}
  50%{transform:translateY(-3px); opacity:.9;}
}

@media(max-width:900px){.sidebar{width:260px;}}
@media(max-width:720px){
  .sidebar{display:none;}
  .bubble{max-width:90%;}
}