:root{
  --bg: #f5f7fb;
  --card: rgba(255,255,255,0.6);
  --glass-border: rgba(255,255,255,0.6);
  --input-border: rgba(99,102,106,0.12);
  --sidebar-border: rgba(0,0,0,0.08);
  --history-border: rgba(0,0,0,0.06);
  --text: #0f172a;
  --muted: #6b7280;
  --accent: #0ea5a4;
  --shadow: 0 6px 18px rgba(16,24,40,0.06);
}

.theme-dark{
  --bg: #000000;
  --card: rgba(255,255,255,0.02);
  --glass-border: rgba(255,255,255,0.04);
  --input-border: rgba(255,255,255,0.12);
  --sidebar-border: rgba(255,255,255,0.12);
  --history-border: rgba(255,255,255,0.03);
  --text: #ffffff;
  --muted: #9aa4b2;
  --accent: #34d399;
  --shadow: 0 6px 18px rgba(0,0,0,0.6);
}

*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,Helvetica,sans-serif;margin:0;background:var(--bg);color:var(--text);height:100vh;overflow:hidden}
.app{display:flex;height:100vh}

/* Sidebar */
.sidebar{width:240px;flex:0 0 240px;background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.45));backdrop-filter:blur(8px);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;padding:20px;gap:12px}
.theme-dark .sidebar{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-right:1px solid var(--sidebar-border)}
.logo{font-weight:700;font-size:20px}
.logo .accent{color:var(--accent)}
.btn{border:0;padding:10px 12px;border-radius:10px;cursor:pointer;background:transparent;color:var(--text)}
.btn.glass{background:var(--card);border:1px solid var(--glass-border);box-shadow:var(--shadow);color:var(--text)}

/* dark-mode specific tweaks for glass buttons to improve contrast */
.theme-dark .btn.glass{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);box-shadow:none;color:var(--text)}
.theme-dark .btn.glass:hover{background:rgba(255,255,255,0.04)}
.btn.primary{background:linear-gradient(90deg,var(--accent), #06b6d4);color:white}
.small{padding:4px 6px;font-size:12px}

/* compact login button styling (smaller/subtle) */
.btn.small{padding:4px 8px;font-size:12px;border-radius:6px;min-width:40px}
.btn.small{padding:4px 8px;font-size:12px;border-radius:6px;min-width:40px}

/* Login button: black in light mode, white in dark mode */
#btnLogin {
  background: #000;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: none;
  padding: 8px 16px;
  font-size: 14px;
  line-height: 1;
  border-radius: 6px;
}
#btnLogin:hover{background:#111}
.theme-dark #btnLogin{background:#fff;color:#000;border:1px solid rgba(255,255,255,0.12)}
.theme-dark #btnLogin:hover{background:#f2f2f2}

/* ensure contrast for small glass buttons in dark */
.theme-dark .btn.small{border:1px solid rgba(255,255,255,0.06);color:var(--text)}
.sidebar-top{display:flex;flex-direction:column;gap:10px}
.actions{display:flex;flex-direction:column;gap:8px}

.history{flex:1;overflow:auto;font-size:13px}
.history h4{margin:6px 0;color:var(--muted);font-size:12px}
.history-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.history-item{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:6px;cursor:pointer;background:transparent;border:1px solid var(--history-border);font-size:12px}
.history-item:hover{background:var(--card)}
.history-item .meta{font-size:12px;color:var(--muted)}
/* smaller action buttons inside history */
.history-item .icon-btn{width:32px;height:32px;border-radius:6px;border:1px solid var(--glass-border);padding:4px}
.history-item .icon-btn i{width:16px;height:16px}
/* smaller visual size for delete button */
.history-item .icon-btn.del{width:26px;height:26px;padding:3px;border-radius:6px}
.history-item .icon-btn.del i{width:14px;height:14px}
.history-item .icon-btn.del svg *{stroke:currentColor !important}

.sidebar-bottom{padding-top:8px}

/* Logged-in user area in sidebar bottom */
.sidebar-bottom .user-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sidebar-bottom .user-left{display:flex;align-items:center;gap:10px}
.sidebar-bottom .avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(180deg,var(--accent), #06b6d4);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700}
.sidebar-bottom .user-meta{display:flex;flex-direction:column}
.sidebar-bottom .user-meta .name{font-weight:600;font-size:12px}
.sidebar-bottom .user-meta .status{font-size:12px;color:var(--muted)}
.sidebar-bottom .settings-btn{border:0;background:var(--card);cursor:pointer;width:36px;height:36px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--glass-border)}
.theme-dark .sidebar-bottom .settings-btn{border:1px solid rgba(255,255,255,0.06)}

/* Main */
.main{flex:1;display:flex;flex-direction:column;padding-bottom:140px /* reserve space for fixed chat form */;min-height:0;overflow:hidden}
.main-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--glass-border);backdrop-filter:blur(6px);background:transparent}
.main-header .left,.main-header .right{display:flex;align-items:center;gap:8px}
.title{margin:0;font-weight:600}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:8px;border:1px solid var(--glass-border);background:var(--card);cursor:pointer}
.icon-btn i{width:18px;height:18px}

/* Copy button for AI replies: small icon-only button (no background) */
.copy-btn{
  width:22px;
  height:22px;
  border-radius:4px;
  background:transparent;
  border:0;
  padding:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--muted); /* base color for light theme */
  cursor:pointer;
}
.copy-btn i, .copy-btn svg{width:14px;height:14px;color:var(--muted)}
/* Force the SVG stroke to a neutral gray for good contrast */
.copy-btn svg *{stroke:#6b7280 !important;fill:none !important;opacity:0.95}
.copy-btn:hover{color:var(--text);opacity:0.95;background:transparent}

/* Dark theme tweak: slightly lighter gray so icon remains visible */
.theme-dark .copy-btn svg *{stroke:#9aa4b2 !important;opacity:0.95}

/* Container for small message actions (copy, etc.) */
.message-actions{display:inline-flex;align-items:center;gap:6px;margin-left:8px}

/* Ensure feather SVG icons are visible on dark and light themes */
.icon-btn, .icon-btn i, .icon-btn svg{
  color:var(--text);
}
.icon-btn svg *{ /* stroke the paths with current color */
  stroke:currentColor !important;
  fill:none !important;
}
.empty-icon, .empty-icon svg{color:var(--text)}
.empty-icon svg *{stroke:currentColor !important;fill:none !important}
.history-item .icon-btn svg *{stroke:currentColor !important;fill:none !important}

/* Make sure send icon inherits the button text color (white on primary) */
.send i, .send svg{color:inherit}
.send svg *{stroke:currentColor !important;fill:none !important}

.chat-area{flex:1;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;padding:0 10px;gap:12px;position:relative;min-height:0}
.empty-card{padding:30px;text-align:center;max-width:420px}
.empty-icon{width:48px;height:48px;margin-bottom:8px}

.messages{width:100%;max-width:980px;display:flex;flex-direction:column;gap:12px;flex:1;overflow:auto;-webkit-overflow-scrolling:touch;margin:0 auto}

/* hide scrollbar visually but keep scrolling functional */
.messages{
  /* for WebKit browsers */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.messages::-webkit-scrollbar{width:0;height:0}
.messages{scrollbar-gutter: stable both-edges}

/* ensure empty-state centers inside the scrollable area when there are no messages */
.empty-state{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.message{
  max-width:98%;
  display:inline-block;
  padding:0px 8px; /* reduced vertical padding for compact bubbles */
  border-radius:12px;
  background:transparent; /* default neutral background; specialized styles below */
  border:0;
  color:var(--text);
  font-size:14px;
  line-height:1.35;
  /* keep long lines from breaking the layout and preserve intentional line breaks */
  word-break:break-word;
}
.message.user{
  /* align to the right inside the flex column */
  align-self:flex-end;
  margin-left:8px;
  background:linear-gradient(90deg,var(--accent), #06b6d4);
  color:var(--card-text, #ffffff);
  font-weight:600; /* slightly stronger weight to differentiate sender */
  box-shadow:0 6px 18px rgba(6,95,70,0.06);
  border-radius:14px 14px 6px 14px; /* subtle tail effect */
}

.message.bot{
  /* align to the left inside the flex column */
  align-self:flex-start;
  margin-right:8px;
  background:var(--card);
  color:var(--text);
  border:1px solid rgba(0,0,0,0.04);
  border-radius:12px 12px 14px 12px;
}

/* Dark theme overrides for bubbles */
.theme-dark .message.user{
  background:linear-gradient(90deg,var(--accent), #059669);
  color:#07121a; /* dark text on light-ish accent */
  box-shadow:none;
}
.theme-dark .message.bot{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.04);
  color:var(--text);
}

.chat-form{
  padding:12px;
  border-top:0;
  background:transparent;
  position:fixed;
  z-index:10;
  bottom:12px;
  /* align next to sidebar on desktop */
  left:240px;
  right:24px;
}
.image-preview{max-width:980px;margin:0 auto 8px;display:flex;align-items:flex-start;gap:8px;position:relative}
.image-preview img{max-height:120px;border-radius:8px;border:1px solid rgba(0,0,0,0.06)}
.image-preview .icon-btn{position:relative;align-self:flex-start}
.chat-input{max-width:980px;margin:0 auto;background:var(--card);border:1px solid var(--input-border);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.chat-input textarea{width:100%;resize:none;border:0;background:transparent;color:var(--text);font-size:15px;outline:none}

/* highlight input border on focus for better visibility */
.chat-input:focus-within{border-color:var(--accent);box-shadow:0 6px 18px rgba(6,95,70,0.06)}
.theme-dark .chat-input:focus-within{box-shadow:0 6px 24px rgba(16,185,129,0.06)}
.chat-tools{display:flex;align-items:center;justify-content:space-between}
.left-tools{display:flex;gap:8px}
.right-tools{display:flex}
.send{display:inline-flex;align-items:center;gap:8px;padding:10px 12px}

/* Responsive */
@media(max-width:900px){
  .sidebar{position:fixed;left:-280px;top:0;bottom:0;z-index:60;transition:left .25s ease}
  .sidebar.open{left:0}
  .app{position:relative}
  /* On small screens, chat form should be full width */
  .chat-form{left:0;right:0;bottom:0;padding:12px}
}

/* backdrop for mobile sidebar */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.4);opacity:0;visibility:hidden;transition:opacity .18s ease;z-index:55}
.backdrop.show{opacity:1;visibility:visible}

/* small helpers */
.muted{color:var(--muted)}

/* ensure spacing on small screens so icon doesn't crowd the login button */
@media (max-width:480px){
  .main-header .right{gap:10px}
  #btnLogin{padding:8px 12px;font-size:14px;min-width:60px}
}

/* Markdown message styles */
.message pre{background:rgba(0,0,0,0.04);padding:8px;border-radius:6px;overflow:auto;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace;font-size:13px}
.theme-dark .message pre{background:rgba(255,255,255,0.03)}
.message code{background:rgba(0,0,0,0.04);padding:2px 6px;border-radius:4px;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Roboto Mono,monospace;font-size:13px}
.theme-dark .message code{background:rgba(255,255,255,0.03)}
.message blockquote{border-left:3px solid rgba(0,0,0,0.08);padding-left:10px;margin:6px 0;color:var(--muted)}
.theme-dark .message blockquote{border-left-color:rgba(255,255,255,0.06)}
.message a{color:var(--accent);text-decoration:underline}

/* Message image styling: constrain images inside message bubbles */
.message img, .message .message-image{
  max-width:280px; /* limit width to 280px */
  width:auto; /* allow natural sizing up to the max */
  height:auto; /* preserve aspect ratio */
  display:block; /* block-level to avoid baseline gaps */
  border-radius:10px; /* rounded corners */
  overflow:hidden;
  box-shadow:0 4px 12px rgba(2,6,23,0.06);
  border:1px solid rgba(0,0,0,0.04);
}

/* Dark theme tweak so border and shadow remain subtle */
.theme-dark .message img, .theme-dark .message .message-image{
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:none;
}

/* Small screens: allow images to take more width but still capped by container */
@media (max-width:480px){
  .message img, .message .message-image{max-width:92vw}
}