/* ===== Scrollbar ===== */
.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}
.scrollbar-thin::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
}
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.18);
}

/* ===== Sidebar collapsed state ===== */
#sidebar.collapsed {
  width: 0;
  opacity: 0;
  border-right-color: transparent;
}

/* ===== History item ===== */
.history-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
  border-radius: 999px;
  font-size: 13px;
  color: #B8C2D1;
  cursor: pointer;
  transition: background-color 0.15s ease;
  position: relative;
}
.history-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.history-item.active {
  background: rgba(56, 217, 201, 0.10);
  color: #8CE0D6;
}
.history-item .title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.history-item .item-menu-btn {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: none;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #8B96A6;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.history-item:hover .item-menu-btn,
.history-item .item-menu-btn.open {
  display: flex;
}
.history-item .item-menu-btn:hover,
.history-item .item-menu-btn.open {
  background: rgba(255, 255, 255, 0.10);
  color: #DCE3EC;
}

/* ===== History item dropdown ===== */
.history-item-dropdown {
  position: fixed;
  min-width: 176px;
  background: #161D2A;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  padding: 6px;
  z-index: 60;
}
.history-item-dropdown button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 9px;
  font-size: 13px;
  color: #D6DCE6;
  text-align: left;
  transition: background-color 0.12s ease;
}
.history-item-dropdown button:hover {
  background: rgba(255, 255, 255, 0.07);
}
.history-item-dropdown button.danger {
  color: #FF8A8A;
}

/* ===== Account / export menu items ===== */
.account-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 13px;
  color: #D6DCE6;
  text-align: left;
  transition: background-color 0.12s ease;
}
.account-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.account-menu-item.danger {
  color: #FF8A8A;
}
.export-format-item {
  font-size: 12.5px;
  color: #B8C2D1;
}

/* ===== Modal buttons ===== */
.modal-btn-secondary,
.modal-btn-primary,
.modal-btn-danger {
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}
.modal-btn-secondary {
  color: #B8C2D1;
  background: rgba(255, 255, 255, 0.06);
}
.modal-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.10);
}
.modal-btn-primary {
  color: #0B0F14;
  background: #38D9C9;
}
.modal-btn-primary:hover {
  opacity: 0.9;
}
.modal-btn-danger {
  color: #0B0F14;
  background: #FF6B6B;
}
.modal-btn-danger:hover {
  opacity: 0.9;
}

/* ===== Model menu items ===== */
.model-group-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #5C6B80;
  padding: 8px 14px 4px;
}
.model-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: #D6DCE6;
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.model-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.model-item.active {
  color: #38D9C9;
}

/* ===== Message bubbles ===== */
.msg-user {
  align-self: flex-end;
  background: #1E2A3A;
  border-radius: 20px 20px 4px 20px;
  padding: 12px 18px;
  max-width: 85%;
}
.msg-ai {
  max-width: 100%;
}

/* ===== Markdown content ===== */
.md-content {
  font-size: 15px;
  line-height: 1.7;
  color: #DCE3EC;
}
.md-content p { margin: 0 0 0.9em; }
.md-content p:last-child { margin-bottom: 0; }
.md-content h1, .md-content h2, .md-content h3 {
  font-weight: 600;
  color: #F3F6FA;
  margin: 1.1em 0 0.5em;
}
.md-content h1 { font-size: 1.4em; }
.md-content h2 { font-size: 1.22em; }
.md-content h3 { font-size: 1.08em; }
.md-content ul, .md-content ol {
  margin: 0 0 0.9em;
  padding-left: 1.4em;
}
.md-content li { margin: 0.25em 0; }
.md-content a { color: #6FE3D6; text-decoration: underline; text-underline-offset: 2px; }
.md-content strong { color: #F3F6FA; font-weight: 600; }
.md-content blockquote {
  border-left: 3px solid #38D9C9;
  padding-left: 1em;
  color: #9AA7B8;
  margin: 0 0 0.9em;
}
.md-content code:not(pre code) {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.15em 0.4em;
  border-radius: 5px;
  font-size: 0.88em;
  color: #8CE0D6;
}
.md-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1em;
  font-size: 0.92em;
}
.md-content th, .md-content td {
  border: 1px solid rgba(255,255,255,0.1);
  padding: 6px 10px;
  text-align: left;
}
.md-content th { background: rgba(255,255,255,0.05); }

.code-block-wrap {
  position: relative;
  margin: 0 0 1em;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 14px;
  background: #10161F;
  font-size: 12px;
  color: #6B7A8E;
}
.code-block-header button {
  color: #9AA7B8;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.code-block-header button:hover { color: #38D9C9; }
.md-content pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: #0D131C !important;
  font-size: 13px;
}

/* ===== Attachment chip ===== */
.attach-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #151C28;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 6px 10px 6px 6px;
  font-size: 12.5px;
  color: #B8C2D1;
  max-width: 220px;
}
.attach-chip img {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 8px;
}
.attach-chip .attach-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(56,217,201,0.12);
  color: #38D9C9;
  display: grid;
  place-items: center;
  shrink: 0;
}
.attach-chip .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-chip .remove {
  color: #5C6B80;
  cursor: pointer;
  padding: 2px;
}
.attach-chip .remove:hover { color: #FF6B6B; }

/* ===== Typing dots ===== */
.typing-dots {
  display: inline-flex;
  gap: 4px;
  padding: 6px 0;
}
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #5C6B80;
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ===== Mic recording state ===== */
#btnMic.recording {
  color: #FF6B6B;
  background: rgba(255, 107, 107, 0.12);
  animation: mic-pulse 1.4s infinite ease-in-out;
}
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,107,107,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(255,107,107,0); }
}

/* ===== Fade in for messages ===== */
.msg-enter {
  animation: msg-fade-in 0.25s ease-out;
}
@keyframes msg-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}