html, body { height: 100%; }
body { display: flex; flex-direction: column; }
:root {
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #111111;
  --muted: #555555;
  --accent: #5578f5;
}

body {
  background: var(--bg);
  color: var(--text);
}

.card {
  background: var(--card);
  color: var(--text);
  border: 1px solid #e1e3e8;
  border-radius: 12px;
  padding: 16px;
}

input, textarea, select, button {
  background: #ffffff;
  color: #111;
  border: 1px solid #cfd3db;
  border-radius: 8px;
  padding: 8px;
}

.btn {
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
}
.btn:hover {
  opacity: 0.9;
}


.topbar { flex: 0 0 auto; }
.container {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-height: 0;                     /* critical */
}

.card {
  flex: 1 1 auto;
  display: flex; flex-direction: column;
  min-height: 0;                     /* critical */
}

.chatbox {
  flex: 1 1 auto;
  min-height: 0;                     /* critical */
  overflow-y: auto;
  padding: 12px;
}

/* Dock the input at the bottom of the card */
.chatbar {
  position: sticky;                  /* keeps it visible */
  bottom: 0;
  background: var(--card);
  padding-bottom: 8px;
  flex: 0 0 auto;
  display: flex; gap: 8px; align-items: flex-end;
  border-top: 1px solid #1f2a4a;
}

/* textarea that grows but doesn't exceed viewport */
.chat-input {
  flex: 1 1 auto;
  min-height: 44px;
  max-height: 35vh;                  /* cap growth */
  overflow-y: auto;
  resize: none;
  line-height: 1.3;
}

.no-sidebar { display: block; }
/* App shell with left sidebar */
.app-shell { display:flex; min-height:100vh; }
.sidebar {
  width: 92px; background:#f5f6f8; color:#222;
  border-right:1px solid #e1e3e8; display:flex; flex-direction:column;
  align-items:center; justify-content:space-between; padding:16px 0;
  position:sticky; top:0; height:100vh;
}
.sidebar nav { display:flex; flex-direction:column; gap:28px; align-items:center; }
.nav-item {
  width:100%; display:flex; flex-direction:column; align-items:center; gap:6px;
  text-decoration:none; color:#222; padding:10px 0;
}
.nav-item .icon { font-size:22px; line-height:1; }
.nav-item .label { font-size:14px; }
.nav-item:hover { background:#eef1f6; }
.nav-item.active { background:#e2e8ff; font-weight:600; }

.sidebar-footer { display:flex; flex-direction:column; gap:8px; align-items:center; padding-bottom:8px; }
.sidebar-footer .you { font-size:12px; color:#555; }
.btn.small { padding:6px 10px; border-radius:10px; font-size:12px; }

/* Main column takes the rest */
.main-column { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { padding:12px 16px; border-bottom:1px solid #e1e3e8; background:#fff; color:#111; }
.container { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; max-width:1100px; width:100%; margin: 12px auto; padding: 0 16px; }

/* Keep previous chat layout behaviors */
.card { flex:1 1 auto; display:flex; flex-direction:column; min-height:0; }
.chatbox { flex:1 1 auto; min-height:0; overflow:auto; }

:root {
  --bg: #0b1020; --card:#121a33; --text:#e6e9f5; --muted:#9aa3c7; --accent:#7aa2ff;
}
* { box-sizing: border-box; }
a { color: var(--accent); text-decoration: none; }
.brand { font-weight:700; letter-spacing:0.5px;}
.user { display:flex; gap:12px; align-items:center; }
.form { display:flex; flex-direction:column; gap:10px; max-width:360px;}
.btn { background: var(--accent); color:#0a1020; border:none; padding:10px 16px; border-radius:12px; font-weight:700; cursor:pointer; }
.btn:hover { filter: brightness(1.1); }
.muted { color: var(--muted); font-size: 0.9rem; }
.error { color:#ff6b7a; margin-bottom:8px; }
.row { display:flex; gap:8px; margin-top:12px; }
.row input { flex:1; }
input, select { background:#0d1429; color:var(--text); border:1px solid #213057; border-radius:12px; padding:10px; }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap:12px; margin-top:16px; }
.uploader { display:flex; flex-direction:column; gap:8px; }
.hidden { display:none; }
.icon-btn { background:#0d1429; border:1px solid #213057; color:var(--muted); border-radius:12px; padding:8px 10px; cursor:pointer; display:flex; align-items:center; }
.icon-btn:hover { color: var(--text); border-color:#2c3d70; }
.file-badge { margin-top:8px; font-size:0.9rem; color:#000000; }
.msg { margin: 6px 0; }
.msg.user { opacity: 0.95; }
.msg.assistant { opacity: 0.9; }
@media (max-width: 640px) {
  .container { margin: 8px auto; padding: 0 8px; }
}
.center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
}
.dash-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin-top:8px; }
.dash-card {
  background: var(--card);
  border: 1px solid #e1e3e8;
  border-radius: 12px;
  padding: 14px;
  color: var(--text);
}
.dash-title { font-weight:700; margin-bottom:6px; }
.dash-actions { display:flex; gap:8px; flex-wrap:wrap; }
.dash-list { margin:0; padding-left:18px; }

/* ===== FINAL OVERRIDES (place at END of styles.css) ===== */

/* Light theme defaults */
:root, body:not(.dark) {
  --bg: #f5f6f8;
  --card: #ffffff;
  --text: #111111;
  --muted: #555;
  --accent: #5578f5;
}

/* Layout */
html, body { height:100%; }
body { background: var(--bg); color: var(--text); }

/* Sidebar (left) */
.sidebar {
  background:#f5f6f8;
  color:#222;
  border-right:1px solid #e1e3e8;
}

/* Main column + container */
.main-column { background: var(--bg); min-width:0; display:flex; flex-direction:column; }
.topbar { background:#fff; color:#111; border-bottom:1px solid #e1e3e8; }
.container { flex:1 1 auto; min-height:0; max-width:1200px; width:100%; margin:16px auto; padding:0 16px; }

/* Cards */
.card, .dash-card {
  background: var(--card);
  color: var(--text);
  border:1px solid #e1e3e8;
  border-radius:12px;
  padding:16px;
}

/* Chat areas */
.chatbox {
  background:#fff;
  color:#111;
  border:1px solid #e1e3e8;
  border-radius:12px;
}

/* Inputs / buttons */
input, textarea, select {
  background:#fff;
  color:#111;
  border:1px solid #cfd3db;
  border-radius:10px;
  padding:10px;
}
.btn {
  background: var(--accent);
  color:#fff;
  border:none;
  padding:8px 14px;
  border-radius:10px;
  cursor:pointer;
}
.btn:hover { opacity:0.92; }

/* Ensure sections don't push input off-screen */
.container, .card, .chatbox { min-height:0; }

/* --- fix paperclip background --- */
.icon-btn {
  background: #ffffff;          /* white/light */
  border: 1px solid #cfd3db;
  color: #333;
  border-radius: 12px;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-btn:hover {
  background: #eef1f6;          /* subtle hover */
  border-color: #b7bfd4;
  color: #000;
}