/* ======================================================
CHAT LAYOUT
====================================================== */
.chat-shell {
max-width: 100%;
height: calc(100vh - 80px);
display: grid;
grid-template-columns: 260px 1fr;
gap: 0.75rem;
padding: 0.75rem;
}

@media (max-width: 992px) {
.chat-shell {
grid-template-columns: 1fr;
}
}
/* ======================================================
SIDEBAR
====================================================== */
.chat-sidebar {
width: 280px;
background: rgba(255, 255, 255, 0.03);
border-radius: 1rem;
padding: 1rem 2rem 1rem 1rem; /* tăng padding-right cho scrollbar */
overflow-y: auto;
backdrop-filter: blur(8px);
}

.agent-list {
list-style: none;
padding: 0;
}

.agent-list .session-item {
cursor: pointer;
padding: 0.45rem 0.6rem;
border-radius: 0.6rem;
transition: background 0.12s ease;
}

.agent-list .session-item:hover {
background: rgba(255,255,255,0.03);
}

.agent-list .session-item.active {
background: rgba(255,255,255,0.04);
border-left: 3px solid var(--accent-1);
}

.agent-list .session-item .session-label {
display: flex;
gap: 0.5rem;
align-items: center;
justify-content: space-between;
}

.agent-list .session-id {
font-weight: 600;
word-break: break-all;
}

.agent-list .session-time {
font-size: 0.8rem;
color: rgba(255,255,255,0.6);
}

/* ======================================================
CHAT PANEL
====================================================== */
.chat-panel {
display: flex;
flex-direction: column;
height: 100%;
background: rgba(255, 255, 255, 0.03);
border-radius: 1rem;
padding: 0 0.75rem;
gap: 0.25rem;
position: relative;
overflow: hidden;
}

/* Vùng hiển thị tin nhắn */
.chat-messages {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: 0.75rem;
padding-bottom: calc(var(--chat-input-height, 90px) + 20px);
display: flex;
flex-direction: column;
gap: 0.5rem;
border-radius: 1rem;
background: rgba(0,0,0,0.05);
}

/* ======================================================
INPUT AREA
====================================================== */
.chat-input-area {
position: sticky;
bottom: 0px;
display: flex;
align-items: flex-end;
flex-direction: column;
gap: 0.25rem;
z-index: 10;
margin: 0;
padding: 0.5rem;
border-radius: 0.75rem;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.06);
}

/* Textarea */
.glass-input,
.glass-textarea {
background: transparent !important;
border: none !important;
outline: none !important;
border-radius: 0 !important;
padding: 5px !important;
color: var(--glass-text);
width: 100%;
flex-grow: 1;
resize: none;
min-height: 100px;
overflow-y: auto;
}

/* Button gửi */
.chat-input-area button {
align-self: flex-end;
padding: 0.6rem 0.6rem;
margin: 0;
border-radius: 0.6rem;
height: auto !important;
}

/* ======================================================
CHAT MESSAGES & AVATAR
====================================================== */
.msg-row {
display: flex;
align-items: flex-start;
gap: 0.9rem;
}

.msg-row.user {
justify-content: flex-end;
}

.msg-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
display: grid;
place-items: center;
color: white;
font-weight: 600;
box-sizing: border-box;
border: 2px solid rgba(255,255,255,0.08);
box-shadow: 0 6px 20px rgba(8,18,41,0.4);
}

.msg-row.user .msg-avatar {
background: linear-gradient(90deg, var(--accent-1), #0274c7);
}

.msg-row:not(.user) .msg-avatar {
background: rgba(255,255,255,0.04);
}

.msg-avatar i {
font-size: 1rem;
}

.msg-row.user .msg-avatar i {
color: white;
}

.msg-row:not(.user) .msg-avatar i {
color: var(--glass-text);
}

.msg-bubble {
max-width: 80%;
padding: 0.9rem 1.1rem;
border-radius: 16px;
box-shadow: 0 12px 40px rgba(8,18,41,0.55);
}

.msg-bubble.user {
background: linear-gradient(90deg, var(--accent-1), #0274c7);
color: white;
border-bottom-right-radius: 6px;
}

.msg-bubble.bot {
background: rgba(255,255,255,0.06);
color: var(--glass-text);
border: 1px solid rgba(255,255,255,0.08);
}

/* Tắt hover/glow */
.msg-bubble.bot:hover,
.msg-bubble.user:hover {
background: inherit !important;
filter: none !important;
transform: none !important;
box-shadow: 0 12px 40px rgba(8,18,41,0.55) !important;
}

.msg-row:hover {
background: transparent !important;
}

.chat-messages:hover {
background: rgba(0,0,0,0.05) !important;
}

/* Typing Indicator (Three dots blinking) */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}

.typing-indicator span {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--glass-text);
  border-radius: 50%;
  animation: typingBlink 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: -0.32s; }
.typing-indicator span:nth-child(2) { animation-delay: -0.16s; }
.typing-indicator span:nth-child(3) { animation-delay: 0s; }

@keyframes typingBlink {
  0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
  40% { transform: scale(1); opacity: 1; }
}

/* Markdown Content Styling */
.markdown-content h1, 
.markdown-content h2, 
.markdown-content h3, 
.markdown-content h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.3;
}
.markdown-content h1 { font-size: 1.5em; }
.markdown-content h2 { font-size: 1.3em; }
.markdown-content h3 { font-size: 1.1em; }

.markdown-content p {
  margin-bottom: 0.8rem;
  line-height: 1.6;
}
.markdown-content p:last-child {
  margin-bottom: 0;
}

.markdown-content ul, 
.markdown-content ol {
  padding-left: 1.5rem;
  margin-bottom: 0.8rem;
}

.markdown-content li {
  margin-bottom: 0.3rem;
}

.markdown-content pre {
  background: rgba(0, 0, 0, 0.2);
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.markdown-content code {
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9em;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

.markdown-content pre code {
  background: transparent;
  padding: 0;
  /* color: #e0e0e0;  Removed to allow highlight.js syntax highlighting */
}

.markdown-content blockquote {
  border-left: 3px solid var(--accent-1);
  margin: 0 0 1rem;
  padding-left: 1rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
}

.markdown-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1rem;
}

.markdown-content th,
.markdown-content td {
  padding: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-align: left;
}

.markdown-content th {
  background: rgba(255, 255, 255, 0.05);
  font-weight: 600;
}

/* Unified Markdown Colors for both User and Bot */
.msg-bubble .markdown-content strong,
.msg-bubble .markdown-content b {
  color: #fcd34d; /* Amber 300 - Bright Gold */
  font-weight: 700;
}

.msg-bubble .markdown-content em,
.msg-bubble .markdown-content i {
  color: #7dd3fc; /* Sky 300 */
}

/* Inline code style - Highlight.js handles block code colors */
.msg-bubble .markdown-content :not(pre) > code {
  background: rgba(0, 0, 0, 0.2);
  color: #f472b6; /* Pink 400 */
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 0.1em 0.3em;
  border-radius: 4px;
}

.msg-bubble .markdown-content a {
  color: #60a5fa; /* Blue 400 */
  text-decoration: underline;
}

.msg-bubble .markdown-content h1, 
.msg-bubble .markdown-content h2, 
.msg-bubble .markdown-content h3 {
  color: #22d3ee; /* Cyan 400 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 0.2rem;
}

.msg-bubble .markdown-content blockquote {
  border-left-color: #a78bfa; /* Violet 400 */
  background: rgba(255, 255, 255, 0.08);
  padding: 0.5rem 1rem;
  border-radius: 0 8px 8px 0;
  color: rgba(255, 255, 255, 0.9);
}

.msg-bubble .markdown-content ul li::marker,
.msg-bubble .markdown-content ol li::marker {
  color: #a78bfa; /* Violet 400 */
}

/* Loading Avatar */
.msg-avatar.loading {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.msg-avatar.loading i {
  font-size: 1.5rem;
  color: var(--accent-1);
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}