*,*::before,*::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

:root{

  --bg0:#0d0d0b;
  --bg1:#131311;
  --bg2:#1a1a17;
  --bg3:#222220;
  --bg4:#2a2a27;

  --line:#ffffff0f;
  --line2:#ffffff1a;

  --text0:#f0ede6;
  --text1:#b8b5ad;
  --text2:#7a7872;
  --text3:#4a4845;

  --accent:#c8a96e;
  --accent2:#8a6f3e;
  --accent-glow:#c8a96e18;
  --accent-text:#f0ddb8;

  --red:#d4635a;
  --green:#6aab7e;

  --font-display:'Fraunces',Georgia,serif;
  --font-mono:'DM Mono',monospace;

  --r4:4px;
  --r8:8px;
  --r12:12px;

  --transition:0.15s cubic-bezier(.4,0,.2,1);

}

html,
body{
  height:100%;
  background:var(--bg0);
  color:var(--text0);
  font-family:var(--font-mono);
  overflow:hidden;
}


/* =========================
   MAIN LAYOUT
========================= */

#shell{
  display:grid;
  grid-template-columns:220px 1fr 260px;
  height:100vh;
  overflow:hidden;
}


/* =========================
   LEFT SIDEBAR
========================= */

#sessions-rail{
  background:var(--bg1);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.rail-header{
  padding:16px;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid var(--line);
}

.brand{
  flex:1;
  font-family:var(--font-display);
  color:var(--accent-text);
  font-size:16px;
}

.brand span{
  font-size:11px;
  color:var(--text2);
}

.sessions-list{
  flex:1;
  overflow-y:auto;
}


/* =========================
   BUTTONS
========================= */

.icon-btn{
  width:28px;
  height:28px;
  border:none;
  border-radius:4px;
  cursor:pointer;
  background:transparent;
  color:var(--text2);
  border:1px solid var(--line2);
  transition:var(--transition);
}

.icon-btn:hover{
  background:var(--bg3);
  color:var(--text0);
}

.accent-btn{
  color:var(--accent);
}


/* =========================
   MAIN CHAT AREA
========================= */

#main{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
  background:var(--bg0);
}


/* =========================
   TOPBAR
========================= */

#topbar{
  height:48px;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 16px;
  border-bottom:1px solid var(--line);
  background:var(--bg1);
}

.topbar-session-name{
  flex:1;
  font-family:var(--font-display);
  color:var(--text1);
}

.filter-pill{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid var(--line2);
  background:var(--bg2);
  color:var(--text2);
  cursor:pointer;
}

.sep{
  width:1px;
  height:18px;
  background:var(--line2);
}


/* =========================
   CHAT AREA
========================= */

#chat-scroll{
  flex:1;
  overflow-y:auto;
  overflow-x:hidden;
  padding:32px 48px;
  scroll-behavior:smooth;
}


/* Custom Scrollbar */

#chat-scroll::-webkit-scrollbar{
  width:8px;
}

#chat-scroll::-webkit-scrollbar-thumb{
  background:var(--bg4);
  border-radius:20px;
}


/* =========================
   EMPTY STATE
========================= */

#empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100%;
}

.empty-eyebrow{
  color:var(--text3);
  font-size:11px;
  text-transform:uppercase;
  margin-bottom:10px;
}

.empty-heading{
  font-size:30px;
  text-align:center;
  font-family:var(--font-display);
  color:var(--text1);
  line-height:1.3;
}

.empty-heading em{
  color:var(--accent-text);
}

.empty-sub{
  margin-top:12px;
  color:var(--text3);
  text-align:center;
  max-width:320px;
  line-height:1.7;
}


/* =========================
   MESSAGES
========================= */

.msg{
  display:flex;
  gap:12px;
  margin-bottom:24px;
  width:100%;
}

.msg.user{
  flex-direction:row-reverse;
}

.avatar{
  width:32px;
  height:32px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:12px;
}

.avatar.ai{
  background:var(--accent-glow);
  border:1px solid var(--accent2);
  color:var(--accent);
}

.avatar.user{
  background:var(--bg3);
  border:1px solid var(--line2);
  color:var(--text2);
}

.msg-body{
  max-width:72%;
}

.bubble{
  padding:12px 15px;
  border-radius:12px;
  line-height:1.8;
  overflow-wrap:break-word;
  word-break:break-word;
  white-space:pre-wrap;
}

.msg.ai .bubble{
  background:var(--bg2);
  border:1px solid var(--line);
}

.msg.user .bubble{
  background:var(--bg3);
  border:1px solid var(--line2);
}

.msg-time{
  margin-top:6px;
  font-size:10px;
  color:var(--text3);
}


/* =========================
   INPUT AREA
========================= */

#input-wrap{
  padding:16px 48px 20px;
  border-top:1px solid var(--line);
  background:var(--bg1);
}

#input-box{
  background:var(--bg1);
  border:1px solid var(--line2);
  border-radius:12px;
  padding:12px 14px;
}

#msg-input{
  width:100%;
  background:transparent;
  border:none;
  outline:none;
  resize:none;
  color:var(--text0);
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.7;
  max-height:160px;
  overflow-y:auto;
}

#msg-input::placeholder{
  color:var(--text3);
}

.input-footer{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
}

.input-spacer{
  flex:1;
}

.char-count{
  color:var(--text3);
  font-size:10px;
  margin-right:10px;
}

#send-btn{
  padding:8px 14px;
  border:none;
  border-radius:8px;
  background:var(--accent);
  color:#000;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  transition:var(--transition);
}

#send-btn:hover{
  background:var(--accent-text);
}

.input-hint{
  margin-top:8px;
  text-align:center;
  font-size:10px;
  color:var(--text3);
}


/* =========================
   RIGHT DOCS PANEL
========================= */

#docs-panel{
  background:var(--bg1);
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.docs-header{
  height:48px;
  min-height:48px;
  padding:0 14px;
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--line);
}

.docs-header-title{
  flex:1;
  font-size:11px;
  color:var(--text2);
  text-transform:uppercase;
}

.docs-tabs{
  display:flex;
  border-bottom:1px solid var(--line);
}

.docs-tab{
  flex:1;
  text-align:center;
  padding:10px 0;
  cursor:pointer;
  color:var(--text3);
}

.docs-tab.active{
  color:var(--accent);
  border-bottom:2px solid var(--accent);
}

.docs-content{
  flex:1;
  overflow-y:auto;
  padding:12px;
}


/* =========================
   UPLOADED FILES
========================= */

.doc-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  margin-bottom:10px;
  border-radius:10px;
  background:var(--bg2);
  border:1px solid var(--line);
  color:var(--text1);
  font-size:13px;
}

.doc-item i{
  color:var(--accent);
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:1100px){

  #shell{
    grid-template-columns:80px 1fr;
  }

  #docs-panel{
    display:none;
  }

}

@media(max-width:700px){

  #shell{
    grid-template-columns:1fr;
  }

  #sessions-rail{
    display:none;
  }

  #chat-scroll{
    padding:20px;
  }

  #input-wrap{
    padding:12px;
  }

  .msg-body{
    max-width:90%;
  }

}