/* ============================================
   Chat Widget – Modern Design
   ============================================ */

/* --- Edge Tab Trigger --- */
.chat-widget-fab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  padding: 12px 0;
  border: none;
  border-radius: 8px 0 0 8px;
  background-color: var(--brand-primary);
  color: #fff;
  cursor: pointer;
  box-shadow: -2px 0 12px rgba(0, 128, 128, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  z-index: 1092;
  font-size: 1.2rem;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.2s ease,
              background-color 0.2s ease;
}

.chat-widget-fab span {
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1;
  opacity: 0.9;
}

.chat-widget-fab i {
  transition: transform 0.2s ease;
}

.chat-widget-fab-shortcut {
  font-family: inherit;
  font-size: 0.5rem;
  font-weight: 500;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.7);
  border: none;
}

.chat-widget-fab:hover {
  transform: translateY(-50%) translateX(-2px);
  background-color: #006d6d;
  box-shadow: -4px 0 20px rgba(0, 128, 128, 0.35);
}

/* Slide tab with panel when open */
body.chat-panel-open .chat-widget-fab {
  right: 420px;
}

body.chat-panel-open .chat-widget-fab span,
body.chat-panel-open .chat-widget-fab kbd {
  display: none;
}

body.chat-panel-open .chat-widget-fab i::before {
  content: "\ea50"; /* bx-chevron-right */
}

/* Push page content when panel is open */
.layout-page {
  transition: margin-right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.chat-panel-open .layout-page {
  margin-right: 420px;
}

.layout-navbar {
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.chat-panel-open .layout-navbar {
  right: 420px;
}

/* Detached navbar uses explicit width from core.css, so right alone won't shrink it */
.layout-navbar.navbar-detached {
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.chat-panel-open .layout-navbar.navbar-detached {
  width: calc(100% - 1.625rem * 2 - 16.25rem - 420px);
}

.layout-menu-collapsed body.chat-panel-open .layout-navbar.navbar-detached {
  width: calc(100% - 1.625rem * 2 - 5.25rem - 420px);
}

@media (max-width: 1199.98px) {
  body.chat-panel-open .layout-navbar.navbar-detached {
    width: calc(100% - 1.625rem * 2 - 420px) !important;
  }
}

@media (max-width: 991.98px) {
  body.chat-panel-open .layout-navbar.navbar-detached {
    width: calc(100% - 1rem * 2 - 420px) !important;
  }
}

/* --- Chat Panel --- */
.chat-widget-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  height: 100vh;
  background: #fff;
  border-left: 1px solid #e5e5e5;
  box-shadow: -2px 0 20px rgba(0, 0, 0, 0.08);
  display: none;
  flex-direction: column;
  z-index: 1091;
  overflow: hidden;
  animation: chatSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chat-widget-panel.open {
  display: flex;
}

@keyframes chatSlideIn {
  from { transform: translateX(100%); opacity: 0.8; }
  to { transform: translateX(0); opacity: 1; }
}

/* --- Header --- */
.chat-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #f1f3f5;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  z-index: 1;
}

.chat-widget-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-widget-header-actions {
  display: flex;
  gap: 2px;
}

.chat-widget-header-btn {
  background: transparent;
  border: none;
  color: #8e8ea0;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.chat-widget-header-btn:hover {
  background-color: #f0f0f0;
  color: #1a1a1a;
}

/* --- Kai Avatar (Header) --- */
.kai-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kai-header-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.kai-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1a1a1a;
}

/* --- Messages Area --- */
.chat-widget-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: opacity 0.15s ease;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}

.chat-widget-messages:hover {
  scrollbar-color: rgba(0, 128, 128, 0.3) transparent;
}

.chat-widget-messages::-webkit-scrollbar {
  width: 6px;
}

.chat-widget-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-widget-messages::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 3px;
}

.chat-widget-messages:hover::-webkit-scrollbar-thumb {
  background-color: rgba(0, 128, 128, 0.3);
}

/* --- Welcome Screen --- */
.chat-widget-welcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px 32px;
  flex: 1;
}

.kai-welcome-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.chat-widget-welcome .chat-widget-welcome-greeting {
  margin: 0 0 6px 0;
  font-size: 1.15rem;
  font-weight: 600;
  color: #1a1a1a;
}

.chat-widget-welcome .chat-widget-welcome-subtitle {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #8e8ea0;
  max-width: 320px;
}

/* --- Suggestion Chips --- */
.chat-widget-suggestions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Slightly more breathing room than the cramped 8px — each chip has
     gained a hover lift so the gap needs to absorb the shadow. */
  gap: 10px;
  margin-top: 24px;
  width: 100%;
  padding: 0 4px;
}

.chat-widget-chip {
  background: #fff;
  border: 1px solid #e5e5e5;
  color: #1a1a1a;
  border-radius: 12px;
  /* Larger touch target + roomier internal layout. The icon column got
     wider in the same change so the text breathes. */
  padding: 14px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              box-shadow 0.18s ease, transform 0.18s ease;
  white-space: normal;
  text-align: left;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.chat-widget-chip i {
  /* Bumped from 1rem — at the old size the icons looked decorative
     rather than informative. Now they read as proper category cues. */
  font-size: 1.2rem;
  color: var(--brand-primary);
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.85;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.chat-widget-chip:hover {
  background-color: #fff;
  border-color: #cbd5e1;
  /* Slight upward translate + soft shadow = "this is liftable" rather
     than "this just changed color". Subtle enough to not feel like
     a button on a marketing page. */
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

.chat-widget-chip:hover i {
  opacity: 1;
}

.chat-widget-chip:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* Tiny shortcut hint under the suggestions — quietly teaches that the
   chat panel has a keyboard opener, without screaming for attention. */
.chat-widget-welcome-hint {
  margin: 18px 0 0;
  font-size: 0.7rem;
  color: #9ca3af;
  text-align: center;
}

.chat-widget-welcome-hint kbd {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.65rem;
  font-family: inherit;
  color: #4b5563;
  margin: 0 1px;
}

/* --- Message Rows --- */
@keyframes chatMsgFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.chat-widget-msg,
.chat-widget-typing,
.chat-widget-tool-card {
  animation: chatMsgFadeIn 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chat-widget-msg {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  max-width: 100%;
}

.chat-widget-msg + .chat-widget-msg {
  padding-top: 2px;
}

.chat-widget-msg.user {
  align-items: flex-end;
  background: transparent;
  padding-top: 14px;
}

.chat-widget-msg.assistant {
  align-items: flex-start;
  background: transparent;
  position: relative;
  padding-top: 14px;
  /* Left padding makes room for the inline avatar — the avatar sits at
     14px, bubble text starts ~50px from the panel edge. User messages
     stay at the original 20px since they're right-aligned and have no
     avatar. */
  padding-left: 14px;
}

/* Row wrapper holding the avatar + bubble side-by-side. We use a wrapper
   instead of flex-direction:row on the message itself so the timestamp
   and absolute-positioned copy button (siblings of .bubble) still sit
   beneath the bubble cleanly. */
.chat-widget-msg-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.chat-widget-msg-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--brand-primary) 0%, #009999 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
  margin-top: 1px;
  /* Tiny shadow lifts the avatar off the panel without screaming for
     attention — Claude/ChatGPT both use a similar treatment. */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  user-select: none;
}

.chat-widget-msg.assistant .chat-widget-msg-row .bubble {
  flex: 1 1 auto;
  min-width: 0;
}

.chat-widget-msg .bubble {
  font-size: 0.875rem;
  line-height: 1.7;
  word-wrap: break-word;
  color: #1a1a1a;
}

.chat-widget-msg.user .bubble {
  background-color: var(--brand-primary);
  color: #fff;
  padding: 10px 16px;
  border-radius: 18px 18px 4px 18px;
  max-width: 85%;
}

.chat-widget-msg.assistant .bubble {
  background: transparent;
  padding: 0;
  max-width: 100%;
}

/* --- Message Timestamps (show on hover) --- */
.chat-widget-msg-time {
  display: block;
  font-size: 0.65rem;
  color: #b0b0b0;
  margin-top: 4px;
  opacity: 0;
  transition: opacity 0.15s;
}

.chat-widget-msg:hover .chat-widget-msg-time {
  opacity: 1;
}

.chat-widget-msg.user .chat-widget-msg-time {
  text-align: right;
}

.chat-widget-msg.assistant .chat-widget-msg-time {
  text-align: left;
  /* Indent under the bubble (past the avatar) so the timestamp aligns
     visually with the message text, not the panel edge. */
  padding-left: 36px;
}

/* --- Copy Button --- */
.chat-widget-copy-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #b0b0b0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.chat-widget-msg.assistant:hover .chat-widget-copy-btn {
  opacity: 1;
}

.chat-widget-copy-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1a1a1a;
}

/* --- Typing Indicator --- */
.chat-widget-typing {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 4px;
  /* Indented to line up with the bubble text (under the K avatar)
     so the typing indicator reads as "Kai is composing a reply" in
     the right spatial location, not as a free-floating element. */
  padding: 14px 20px 14px 50px;
  background: transparent;
  width: auto;
}

.chat-widget-typing .dot {
  width: 5px;
  height: 5px;
  background-color: var(--brand-primary);
  border-radius: 50%;
  animation: chatTypingPulse 1.4s infinite ease-in-out;
}

.chat-widget-typing .dot:nth-child(2) {
  animation-delay: 0.16s;
}

.chat-widget-typing .dot:nth-child(3) {
  animation-delay: 0.32s;
}

.chat-widget-typing-label {
  font-size: 0.72rem;
  color: #8e8ea0;
  margin-left: 6px;
}

@keyframes chatTypingPulse {
  0%, 80%, 100% {
    transform: scale(0.6);
    opacity: 0.3;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* --- Input Bar --- */
.chat-widget-input-bar {
  padding: 8px 16px 16px;
  flex-shrink: 0;
  background: #fff;
  border-top: 1px solid #f1f3f5;
}

.chat-widget-file-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 0 8px 0;
}

.chat-widget-file-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  background-color: #f7f7f8;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  font-size: 0.78rem;
  color: #1a1a1a;
  max-width: 100%;
}

.chat-widget-file-chip i.bx-file {
  color: #8e8ea0;
  font-size: 1rem;
  flex-shrink: 0;
}

.chat-widget-file-chip span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}

.chat-widget-file-chip-remove {
  background: transparent;
  border: none;
  color: #b0b0b0;
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.9rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.chat-widget-file-chip-remove:hover {
  background-color: #e5e5e5;
  color: #1a1a1a;
}

.chat-widget-input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 0;
  background: #f7f7f8;
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 4px 6px 4px 4px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.chat-widget-input-wrapper:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px rgba(0, 128, 128, 0.1);
}

.chat-widget-input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 8px 8px;
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.5;
  outline: none;
  resize: none;
  min-height: 24px;
  max-height: 150px;
  overflow-y: auto;
  color: #1a1a1a;
}

.chat-widget-input::placeholder {
  color: #b0b0b0;
}

.chat-widget-send-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background-color: var(--brand-primary);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
  transition: background-color 0.15s ease, transform 0.1s ease;
}

.chat-widget-send-btn:hover {
  background-color: #006d6d;
}

.chat-widget-send-btn:active {
  transform: scale(0.95);
}

.chat-widget-send-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.chat-widget-attach-btn {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #8e8ea0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.2rem;
  transition: color 0.15s ease;
  padding: 0;
}

.chat-widget-attach-btn:hover {
  color: var(--brand-primary);
}

.chat-widget-attach-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* File bubble in user message */
.bubble.file-bubble {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bubble.file-bubble i {
  font-size: 1.1rem;
  color: var(--brand-primary);
}

/* --- Drop Overlay --- */
.chat-widget-drop-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.92);
  border: 2px dashed #c0c0c0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 20;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 0.9rem;
  pointer-events: none;
}

.chat-widget-drop-overlay i {
  font-size: 2.5rem;
  color: #8e8ea0;
}

.drop-overlay-hint {
  font-size: 0.75rem;
  font-weight: 400;
  color: #8e8ea0;
}

/* --- Character Counter --- */
.chat-widget-char-count {
  display: none;
  font-size: 0.65rem;
  color: #b0b0b0;
  text-align: right;
  padding: 3px 8px 0 0;
}

.chat-widget-char-count.visible {
  display: block;
}

.chat-widget-char-count.warning {
  color: #d97706;
}

/* Disabled state */
.chat-widget-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   Markdown Styles inside Assistant Messages
   ============================================ */
.chat-widget-msg.assistant .bubble p {
  margin: 0 0 8px 0;
}

.chat-widget-msg.assistant .bubble p:last-child {
  margin-bottom: 0;
}

.chat-widget-msg.assistant .bubble ul,
.chat-widget-msg.assistant .bubble ol {
  margin: 4px 0 8px 0;
  padding-left: 20px;
}

.chat-widget-msg.assistant .bubble li {
  margin-bottom: 2px;
}

.chat-widget-msg.assistant .bubble code {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}

.chat-widget-msg.assistant .bubble pre {
  background-color: #1e1e2e;
  color: #cdd6f4;
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 8px 0;
  font-size: 0.78rem;
  line-height: 1.55;
}

.chat-widget-msg.assistant .bubble pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.chat-widget-msg.assistant .bubble blockquote {
  border-left: 3px solid var(--brand-primary);
  margin: 8px 0;
  padding: 4px 12px;
  color: #6e6e80;
  border-radius: 0;
}

.chat-widget-msg.assistant .bubble table {
  border-collapse: collapse;
  width: 100%;
  margin: 8px 0;
  font-size: 0.8rem;
}

.chat-widget-msg.assistant .bubble th,
.chat-widget-msg.assistant .bubble td {
  border: 1px solid #e5e5e5;
  padding: 5px 10px;
  text-align: left;
}

.chat-widget-msg.assistant .bubble th {
  background-color: #f7f7f8;
  font-weight: 600;
}

.chat-widget-msg.assistant .bubble h1,
.chat-widget-msg.assistant .bubble h2,
.chat-widget-msg.assistant .bubble h3,
.chat-widget-msg.assistant .bubble h4 {
  margin: 10px 0 4px 0;
  font-weight: 600;
  line-height: 1.3;
  color: #1a1a1a;
}

.chat-widget-msg.assistant .bubble h1 { font-size: 1.1rem; }
.chat-widget-msg.assistant .bubble h2 { font-size: 1rem; }
.chat-widget-msg.assistant .bubble h3 { font-size: 0.95rem; }
.chat-widget-msg.assistant .bubble h4 { font-size: 0.9rem; }

.chat-widget-msg.assistant .bubble a {
  color: var(--brand-primary);
  text-decoration: underline;
}

.chat-widget-msg.assistant .bubble hr {
  border: none;
  border-top: 1px solid #e5e5e5;
  margin: 8px 0;
}

/* ============================================
   Rich Tool Display Cards
   ============================================ */
.chat-widget-tool-card {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-left: 3px solid var(--brand-primary);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 4px 20px;
  align-self: flex-start;
  max-width: calc(100% - 40px);
}

.tool-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.tool-card-stat {
  text-align: center;
  min-width: 60px;
}

.tool-card-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--brand-primary);
  line-height: 1.2;
}

.tool-card-stat-label {
  font-size: 0.65rem;
  color: #8e8ea0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.tool-card-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 200px;
  transition: max-height 0.3s ease;
}

.tool-card-table-wrap.expanded {
  max-height: none;
}

.tool-card-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 6px;
  border: none;
  border-top: 1px solid #e5e5e5;
  background: #f8fafc;
  color: var(--brand-primary);
  font-size: 0.72rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.tool-card-toggle:hover {
  background: #e7f5f5;
}

.tool-card-toggle i {
  font-size: 0.9rem;
}

.tool-card-table {
  border-collapse: collapse;
  width: 100%;
  /* Bumped from 0.75rem — the old size was unreadable on mobile and
     borderline on desktop. 0.8125rem matches Claude/ChatGPT's data
     density without making the bot feel chatty. */
  font-size: 0.8125rem;
}

.tool-card-table thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

.tool-card-table th {
  background-color: #f7f7f8;
  color: #1a1a1a;
  /* Slightly more breathing room than before so headers feel like
     anchors, not crammed text. */
  padding: 8px 12px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid #e5e5e5;
  /* Subtle uppercase + tracking matches the label treatment elsewhere
     in the panel — keeps the table feeling like a proper data card. */
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}

.tool-card-table td {
  padding: 7px 12px;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
  color: #1a1a1a;
}

/* Row striping reads as "rows of data" without needing strong borders.
   The even-row tint is half a step lighter than the hover state so the
   hover still registers cleanly on either color. */
.tool-card-table tbody tr:nth-child(even) {
  background-color: #fafbfc;
}

.tool-card-table tbody tr:hover {
  background-color: #eef2f5;
}

/* Strip the bottom border on the last visible row inside the collapsed
   200px viewport — otherwise the cut-off feels arbitrary, with a half-
   hidden row sitting under a stray hairline. */
.tool-card-table tbody tr:last-child td {
  border-bottom: none;
}

.tool-card-footer {
  font-size: 0.7rem;
  color: #8e8ea0;
  text-align: right;
  margin-top: 6px;
}

/* ============================================
   Choices card (disambiguation buttons)
   ============================================ */
.tool-card-choices { padding: 12px; }
/* When the choices live inside an assistant bubble they read as a
   continuation of Kai's message — drop the card chrome so it doesn't
   look like a separate UI block above the text. */
.chat-widget-tool-card.tool-card-choices.inline {
  background: transparent;
  border: none;
  border-left: none;
  border-radius: 0;
  padding: 8px 0 0;
  margin: 8px 0 0;
  max-width: 100%;
}
.chat-widget-tool-card.tool-card-choices.inline .tool-card-choices-prompt {
  display: none;
}
.tool-card-choices-prompt {
  font-size: 0.85rem;
  color: #2c3e50;
  font-weight: 500;
  margin: 0 0 10px;
}
.tool-card-choices-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tool-card-choice {
  background: #fff;
  border: 1px solid #d9dee3;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 0.85rem;
  color: #2c3e50;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
  font-weight: 500;
}
.tool-card-choice:hover:not(:disabled) {
  background: var(--brand-primary-light, #e7f5f5);
  border-color: var(--brand-primary, #008080);
  color: var(--brand-primary, #008080);
}
.tool-card-choice.selected {
  background: var(--brand-primary, #008080);
  border-color: var(--brand-primary, #008080);
  color: #fff;
}
.tool-card-choice:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.tool-card-choices-skip {
  background: transparent;
  border: none;
  color: #8094ae;
  font-size: 0.78rem;
  padding: 6px 0 0;
  margin-top: 8px;
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tool-card-choices-skip:hover:not(:disabled) {
  color: var(--brand-primary, #008080);
}
.tool-card-choices-skip:disabled {
  opacity: 0.45;
  cursor: default;
  text-decoration: none;
}

/* ============================================
   Action Card (open modal / navigate)
   ============================================ */
.chat-widget-action-card {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-left: 3px solid var(--brand-primary);
  border-radius: 10px;
  margin: 4px 20px;
  padding: 16px;
  align-self: flex-start;
  max-width: calc(100% - 40px);
  animation: chatMsgFadeIn 0.25s ease;
}

.action-card-body {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.action-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(0, 128, 128, 0.1);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
}

.action-card-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1a1a1a;
}

.action-card-desc {
  font-size: 0.8rem;
  color: #8e8ea0;
  margin-top: 2px;
}

.action-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  background-color: var(--brand-primary);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.action-card-btn:hover {
  background-color: #006d6d;
  color: #fff;
}

.action-card-btn i {
  font-size: 1.1rem;
}

/* ============================================
   Scroll-to-bottom button
   ============================================
   Floats above the input bar, bottom-right of the panel. Hidden by
   default and revealed when the user has scrolled up enough that they
   could miss incoming content. Shows an unread badge when assistant
   turns arrive while they're scrolled up. */
.chat-widget-scroll-down {
  position: absolute;
  /* Sits above the input bar (~76px tall) with a small gap. */
  bottom: 88px;
  right: 16px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e5e5e5;
  color: #4b5563;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.15s ease, transform 0.15s ease, background-color 0.15s ease;
  z-index: 5;
  padding: 0;
}

.chat-widget-scroll-down.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.chat-widget-scroll-down:hover {
  background-color: #f9fafb;
  color: #1a1a1a;
}

.chat-widget-scroll-down i {
  font-size: 1.15rem;
}

.chat-widget-scroll-down-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background-color: var(--brand-primary);
  color: #fff;
  border-radius: 9px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0.02em;
  /* Lifted ring stops it from blurring into the button below. */
  box-shadow: 0 0 0 2px #fff;
}

/* ============================================
   Refusal Cards
   ============================================
   Rendered when the backend's gating layers (operation refusal, role
   gate, teacher class-scope, tenant-type block) return is_refusal_card.
   The accent colour is driven by the refusal `reason` so the user can
   tell at a glance whether the refusal is permanent ("not in this app
   at all") or scoped to their role/permissions. */

.chat-widget-refusal-card {
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-left: 3px solid #6b7280;
  border-radius: 10px;
  margin: 4px 20px;
  padding: 14px 16px;
  align-self: flex-start;
  max-width: calc(100% - 40px);
  animation: chatMsgFadeIn 0.25s ease;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.refusal-card-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(107, 114, 128, 0.1);
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.15rem;
  margin-top: 1px;
}

.refusal-card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.refusal-card-label {
  font-weight: 600;
  font-size: 0.8rem;
  color: #1a1a1a;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}

.refusal-card-message {
  font-size: 0.84rem;
  color: #4b5563;
  line-height: 1.5;
}

/* Reason-based variants. Kept as colour-only overrides so the structure
   stays uniform — colour does the signalling, not layout. */

/* Operation refusals — "I won't do this" (delete, edit medical, bulk
   PII export, password resets, impersonation, cross-tenant). Amber to
   read as a firm "stop" without being alarming red. */
.chat-widget-refusal-card[data-reason="operation"] {
  border-left-color: #d97706;
  background-color: #fffbeb;
}
.chat-widget-refusal-card[data-reason="operation"] .refusal-card-icon {
  background: rgba(217, 119, 6, 0.12);
  color: #b45309;
}

/* Role refusals — "your role can't do this in chat" (finance, HR,
   admissions for non-admin). Soft blue reads as informational rather
   than punitive — the user did nothing wrong, they just don't have
   the role for it. */
.chat-widget-refusal-card[data-reason="role"] {
  border-left-color: #2563eb;
  background-color: #eff6ff;
}
.chat-widget-refusal-card[data-reason="role"] .refusal-card-icon {
  background: rgba(37, 99, 235, 0.12);
  color: #1d4ed8;
}

/* Teacher scope refusals — "this is outside your assigned classes".
   Teal to stay on-brand and signal "you can still do everything here,
   just with a different selection". teacher_scope_empty (new teacher
   with no classes yet) shares the same accent. */
.chat-widget-refusal-card[data-reason="teacher_scope"],
.chat-widget-refusal-card[data-reason="teacher_scope_empty"] {
  border-left-color: var(--brand-primary);
  background-color: #ecfeff;
}
.chat-widget-refusal-card[data-reason="teacher_scope"] .refusal-card-icon,
.chat-widget-refusal-card[data-reason="teacher_scope_empty"] .refusal-card-icon {
  background: rgba(0, 128, 128, 0.12);
  color: var(--brand-primary);
}

/* Tenant-type refusals — "not available in this workspace tier"
   (finance/teacher tools on personal workspaces). Neutral grey reads
   as "feature isn't here", not as a permission problem. */
.chat-widget-refusal-card[data-reason="tenant_type"] {
  border-left-color: #6b7280;
  background-color: #f9fafb;
}
.chat-widget-refusal-card[data-reason="tenant_type"] .refusal-card-icon {
  background: rgba(107, 114, 128, 0.12);
  color: #4b5563;
}

/* ============================================
   Preview Actions
   ============================================ */
.chat-widget-preview-actions {
  display: flex;
  gap: 8px;
  align-self: flex-start;
  margin: 4px 20px;
}

.preview-btn-confirm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  border: none;
  border-radius: 8px;
  background-color: var(--brand-primary);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.preview-btn-confirm:hover {
  background-color: #006d6d;
}

/* ============================================
   Student Preview Modal
   ============================================ */
#chatStudentPreviewModal {
  z-index: 1100;
}

body.chat-preview-open .modal-backdrop {
  z-index: 1095;
}

.chat-preview-modal-table thead th {
  background-color: #f7f7f8;
  color: #1a1a1a;
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.85rem;
  border-bottom: 1px solid #e5e5e5;
}

.chat-preview-modal-table tbody td {
  font-size: 0.85rem;
  vertical-align: middle;
}

.chat-preview-modal-table tbody tr:hover {
  background-color: #f7f7f8;
}

/* ============================================
   Tabbed Preview (Students & Parents)
   ============================================ */
.chat-preview-tabs {
  display: flex;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
  padding: 0;
}

.chat-preview-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border: none;
  background: none;
  color: #8e8ea0;
  font-weight: 500;
  font-size: 0.875rem;
  cursor: pointer;
  position: relative;
  transition: all 0.2s ease;
}

.chat-preview-tab:hover {
  color: #1a1a1a;
  background: #f7f7f8;
}

.chat-preview-tab.active {
  color: var(--brand-primary);
}

.chat-preview-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0.75rem;
  right: 0.75rem;
  height: 2px;
  background: var(--brand-primary);
  border-radius: 2px 2px 0 0;
}

.chat-preview-tab i {
  font-size: 1.125rem;
}

.chat-preview-tab-badge {
  padding: 0.15em 0.55em;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 50px;
  background: rgba(0, 128, 128, 0.1);
  color: var(--brand-primary);
}

.chat-preview-tab-pane {
  display: none;
}

.chat-preview-tab-pane.active {
  display: block;
}

/* View toggle (Preview / Column Mapping) */
.chat-preview-view-toggle {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: #f7f7f8;
  border-bottom: 1px solid #e5e5e5;
}

.chat-preview-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #8e8ea0;
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.chat-preview-view-btn:hover {
  color: #1a1a1a;
  background: #fff;
}

.chat-preview-view-btn.active {
  color: var(--brand-primary);
  background: #fff;
  border-color: #d0d0d0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.chat-preview-view-btn i {
  font-size: 1rem;
}

/* Subpanes within tab pane */
.chat-preview-subpane {
  display: none;
}

.chat-preview-subpane.active {
  display: block;
}

/* Column Mapping styles */
.chat-mapping-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f0fdfa;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.8rem;
  color: var(--brand-primary);
}

.chat-mapping-info i {
  font-size: 1rem;
  flex-shrink: 0;
}

.chat-mapping-fields {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-mapping-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.chat-mapping-label {
  width: 120px;
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #566a7f;
  margin: 0;
}

.chat-mapping-arrow {
  color: #c0c0c0;
  flex-shrink: 0;
  font-size: 1rem;
  display: flex;
}

.chat-mapping-select {
  flex: 1;
  min-width: 0;
  padding: 5px 28px 5px 10px;
  border: 1px solid #d9dee3;
  border-radius: 6px;
  font-size: 0.8rem;
  color: #566a7f;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s ease;
  appearance: auto;
}

.chat-mapping-select:focus {
  border-color: var(--brand-primary);
  outline: none;
  box-shadow: 0 0 0 2px rgba(0,128,128,0.1);
}

.chat-mapping-preview-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f7f7f8;
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5;
  font-size: 0.75rem;
  font-weight: 600;
  color: #8e8ea0;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.chat-mapping-preview-label i {
  font-size: 0.9rem;
}

.chat-mapping-table-wrap {
  max-height: 260px;
  overflow: auto;
}

.chat-mapping-table {
  font-size: 0.8rem;
}

.chat-mapping-table thead th {
  background: #f7f7f8;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #8e8ea0;
  padding: 6px 10px;
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}

.chat-mapping-table tbody td {
  padding: 5px 10px;
  color: #566a7f;
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-mapping-table tbody tr:hover {
  background: #f7f7f8;
}

/* Students tab */
.chat-preview-people-table {
  margin-bottom: 0;
}

.chat-preview-people-table thead th {
  background: #f7f7f8;
  border-bottom: 1px solid #e5e5e5;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8e8ea0;
  padding: 0.75rem 1rem;
}

.chat-preview-people-table tbody td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  font-size: 0.85rem;
}

.chat-preview-people-table tbody tr:hover {
  background: #f7f7f8;
}

.chat-preview-people-table tbody tr:last-child td {
  border-bottom: none;
}

/* Parents tab */
.chat-preview-parent-list {
  padding: 1rem;
}

.chat-preview-parent-card {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  margin-bottom: 0.75rem;
  transition: all 0.2s ease;
}

.chat-preview-parent-card:hover {
  border-color: #d0d0d0;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
}

.chat-preview-parent-header {
  padding: 0.875rem 1.125rem;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.875rem;
  border-radius: 10px;
}

.chat-preview-parent-card.expanded .chat-preview-parent-header {
  border-radius: 10px 10px 0 0;
}

.chat-preview-parent-header:hover {
  background: #fafafa;
}

.chat-preview-parent-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.9rem;
  background: #e5e5e5;
  color: #1a1a1a;
  flex-shrink: 0;
}

.chat-preview-parent-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1a1a1a;
}

.chat-preview-parent-contact {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.125rem;
}

.chat-preview-parent-contact span {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8rem;
  color: #8e8ea0;
}

.chat-preview-parent-contact i {
  font-size: 0.875rem;
  color: #b0b0b0;
}

.chat-preview-children-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  background: rgba(0, 128, 128, 0.1);
  color: var(--brand-primary);
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

.chat-preview-children-badge i {
  font-size: 0.8125rem;
}

.chat-preview-expand-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  color: #8e8ea0;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.chat-preview-expand-btn:hover {
  background: rgba(0, 128, 128, 0.1);
  color: var(--brand-primary);
}

.chat-preview-expand-btn i {
  transition: transform 0.2s ease;
  font-size: 1.1rem;
}

.chat-preview-parent-card.expanded .chat-preview-expand-btn {
  background: var(--brand-primary);
  color: #fff;
}

.chat-preview-parent-card.expanded .chat-preview-expand-btn i {
  transform: rotate(180deg);
}

.chat-preview-children-section {
  display: none;
  border-top: 1px solid #e5e5e5;
  background: #fafafa;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
}

.chat-preview-parent-card.expanded .chat-preview-children-section {
  display: block;
}

.chat-preview-children-header {
  padding: 0.5rem 1.125rem;
  background: #f0f0f0;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #8e8ea0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.chat-preview-child-row {
  padding: 0.625rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}

.chat-preview-child-row:last-child {
  border-radius: 0 0 10px 10px;
}

.chat-preview-child-row:hover {
  background: #fafafa;
}

.chat-preview-child-info {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.chat-preview-child-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.65rem;
  background: rgba(0, 128, 128, 0.12);
  color: var(--brand-primary);
  flex-shrink: 0;
}

.chat-preview-child-name {
  font-weight: 500;
  font-size: 0.8125rem;
  color: #1a1a1a;
}

.chat-preview-child-meta {
  font-size: 0.75rem;
  color: #b0b0b0;
}

.chat-preview-relationship-badge {
  padding: 0.1875rem 0.625rem;
  background: #f0f0f0;
  color: #6e6e80;
  border-radius: 50px;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: capitalize;
}

.chat-preview-orphan-section {
  border: 1px solid #e5e5e5;
  border-radius: 10px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.chat-preview-orphan-header {
  padding: 0.625rem 1.125rem;
  background: #f7f7f8;
  font-size: 0.75rem;
  font-weight: 600;
  color: #8e8ea0;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-bottom: 1px solid #e5e5e5;
}

.chat-preview-orphan-header i {
  font-size: 0.9375rem;
  color: #b0b0b0;
}

/* ============================================
   Conversations History Overlay
   ============================================ */
.chat-widget-conversations {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 10;
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.chat-widget-conversations.visible {
  transform: translateX(0);
  opacity: 1;
}

.conversations-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  flex-shrink: 0;
}

.conversations-title {
  font-weight: 600;
  font-size: 0.9rem;
  color: #1a1a1a;
}

.conversations-close-btn {
  background: transparent;
  border: none;
  color: #8e8ea0;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.conversations-close-btn:hover {
  background-color: #f0f0f0;
  color: #1a1a1a;
}

.conversations-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px;
}

.conversation-item {
  padding: 10px 12px;
  cursor: pointer;
  border-radius: 8px;
  border-left: none;
  margin: 2px 0;
  transition: background-color 0.15s ease;
}

.conversation-item:hover {
  background-color: #f7f7f8;
}

.conversation-item.active {
  background-color: rgba(0, 128, 128, 0.08);
}

.conversation-item-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.conversation-item-icon {
  font-size: 0.9rem;
  color: #b0b0b0;
  flex-shrink: 0;
  margin-right: 4px;
}

.conversation-item.active .conversation-item-icon {
  color: var(--brand-primary);
}

.conversation-item-meta {
  display: flex;
  gap: 8px;
  font-size: 0.7rem;
  color: #8e8ea0;
  margin-top: 2px;
}

.conversation-item-preview {
  font-size: 0.75rem;
  color: #b0b0b0;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Conversation search */
.conversations-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #f1f3f5;
  flex-shrink: 0;
}

.conversations-search i {
  color: #b0b0b0;
  font-size: 1rem;
  flex-shrink: 0;
}

.conversations-search input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.82rem;
  color: #1a1a1a;
  background: transparent;
}

.conversations-search input::placeholder {
  color: #b0b0b0;
}

/* Conversation item actions */
.conversation-item {
  position: relative;
}

.conversation-item-actions {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s;
}

.conversation-item:hover .conversation-item-actions {
  opacity: 1;
}

.conversation-action-btn {
  background: none;
  border: none;
  color: #b0b0b0;
  cursor: pointer;
  padding: 3px 5px;
  border-radius: 4px;
  font-size: 0.8rem;
  transition: all 0.12s;
}

.conversation-action-btn:hover {
  color: var(--brand-primary);
  background: #e7f5f5;
}

.conversation-action-btn-danger:hover {
  color: #dc2626;
  background: #fee2e2;
}

/* Inline rename input */
.conversation-rename-input {
  width: 100%;
  border: 1px solid var(--brand-primary);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 0.82rem;
  font-weight: 500;
  color: #1a1a1a;
  outline: none;
  background: #fff;
}

.conversations-group-label {
  padding: 10px 12px 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #8e8ea0;
}

.conversations-loading,
.conversations-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: #8e8ea0;
  font-size: 0.85rem;
}

.conversations-loading .dot {
  display: inline-block;
}

/* Suppress animation during batch conversation load */
.chat-widget-messages.no-animate .chat-widget-msg,
.chat-widget-messages.no-animate .chat-widget-tool-card {
  animation: none !important;
}

/* Skeleton loading for conversation list */
.conv-skeleton {
  padding: 10px 12px;
  margin: 2px 0;
}

.conv-skeleton-title {
  height: 14px;
  width: 70%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: convSkeletonShimmer 1.5s infinite;
  border-radius: 6px;
  margin-bottom: 6px;
}

.conv-skeleton-preview {
  height: 10px;
  width: 90%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: convSkeletonShimmer 1.5s infinite;
  border-radius: 4px;
}

.conv-skeleton:nth-child(2) .conv-skeleton-title { width: 55%; animation-delay: 0.1s; }
.conv-skeleton:nth-child(2) .conv-skeleton-preview { width: 80%; animation-delay: 0.1s; }
.conv-skeleton:nth-child(3) .conv-skeleton-title { width: 65%; animation-delay: 0.2s; }
.conv-skeleton:nth-child(3) .conv-skeleton-preview { width: 85%; animation-delay: 0.2s; }
.conv-skeleton:nth-child(4) .conv-skeleton-title { width: 50%; animation-delay: 0.3s; }
.conv-skeleton:nth-child(4) .conv-skeleton-preview { width: 75%; animation-delay: 0.3s; }
.conv-skeleton:nth-child(5) .conv-skeleton-title { width: 60%; animation-delay: 0.4s; }
.conv-skeleton:nth-child(5) .conv-skeleton-preview { width: 70%; animation-delay: 0.4s; }

@keyframes convSkeletonShimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Stop generation button */
.chat-stop-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 6px;
  margin-bottom: 8px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  color: #8e8ea0;
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
}

.chat-stop-btn:hover {
  background: #f7f7f8;
  color: #1a1a1a;
  border-color: #d0d0d0;
}

.chat-stop-btn i {
  font-size: 1rem;
}

/* Code block language label */
.code-block-lang {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 0.6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.45);
  pointer-events: none;
}

/* Retry button */
.chat-retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 5px 12px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fff;
  color: var(--brand-primary);
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.chat-retry-btn:hover {
  background: #e7f5f5;
  border-color: var(--brand-primary);
}

.chat-retry-btn i {
  font-size: 0.9rem;
}

/* Rate limit countdown */
.chat-rate-limit-bubble {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #92400e !important;
  background: #fef3c7 !important;
  padding: 8px 14px !important;
  border-radius: 10px !important;
  font-size: 0.82rem !important;
}

.chat-rate-limit-bubble i {
  font-size: 1rem;
  color: #d97706;
  flex-shrink: 0;
}

/* Long conversation hint */
.chat-long-conv-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 8px 4px;
  padding: 8px 12px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 8px;
  font-size: 0.75rem;
  line-height: 1.4;
}

.chat-long-conv-hint i {
  font-size: 1rem;
  flex-shrink: 0;
  color: #d97706;
}

.chat-long-conv-hint .chat-new-conv-link {
  color: var(--brand-primary);
  font-weight: 600;
  text-decoration: underline;
}

/* ============================================
   Responsive: Tablet (576px–991px)
   ============================================ */
@media (min-width: 576px) and (max-width: 991.98px) {
  .chat-widget-panel {
    width: 340px;
  }

  body.chat-panel-open .chat-widget-fab {
    right: 340px;
  }

  body.chat-panel-open .layout-page {
    margin-right: 340px;
  }

  body.chat-panel-open .layout-navbar {
    right: 340px;
  }

  body.chat-panel-open .layout-navbar.navbar-detached {
    width: calc(100% - 1rem * 2 - 340px) !important;
  }
}

/* ============================================
   Responsive: Full-screen on mobile (<576px)
   ============================================ */
@media (max-width: 575.98px) {
  .chat-widget-fab {
    width: 38px;
    padding: 10px 0;
    font-size: 1.1rem;
  }

  .chat-widget-fab span {
    font-size: 0.55rem;
  }

  body.chat-panel-open .chat-widget-fab {
    display: none;
  }

  .chat-widget-panel {
    width: 100%;
    height: 100%;
    border-left: none;
  }

  body.chat-panel-open .layout-page {
    margin-right: 0;
  }

  body.chat-panel-open .layout-navbar {
    right: 0;
  }

  body.chat-panel-open .layout-navbar.navbar-detached {
    width: calc(100% - 1rem * 2) !important;
  }

  /* Phones: tighten table padding so wide tables fit comfortably,
     and let cells wrap if they really must — preserves data visibility
     over forcing horizontal scroll, which is painful on a thumb. */
  .tool-card-table th,
  .tool-card-table td {
    padding: 6px 8px;
  }
  .tool-card-table td {
    white-space: normal;
  }

  /* Scroll-to-bottom: nudge it a hair smaller on phones so it doesn't
     sit on top of fat-finger zones at the bottom of the screen. */
  .chat-widget-scroll-down {
    width: 32px;
    height: 32px;
    bottom: 80px;
  }

  /* Suggestion chips stack on phones — at <360px the 2-column grid
     truncates each chip's text into 3-4 cramped lines. One full-width
     chip per row reads as a real button. */
  .chat-widget-suggestions {
    grid-template-columns: 1fr;
  }
}