/* ===== Chat Styles ===== */
/* --- Chat page layout grid --- */
.chat-layout-grid.mud-grid {
  align-items: stretch !important;
}
.chat-layout-grid .mud-grid-item {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Conversation list --- */
.chat-conversation-list {
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.chat-conversation-list .chat-conversation-item {
  cursor: pointer;
  border-bottom: 1px solid var(--mud-palette-lines-default);
  transition: background-color 0.15s ease;
  /* Reset paragraph margins from MudText inside list items */
}
.chat-conversation-list .chat-conversation-item p.mud-typography, .chat-conversation-list .chat-conversation-item .mud-typography {
  margin: 0;
}
.chat-conversation-list .chat-conversation-item:hover {
  background-color: var(--mud-palette-action-default-hover);
}
.chat-conversation-list .chat-conversation-item.active {
  background-color: var(--mud-palette-primary-lighten);
}

/* --- Message bubbles --- */
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overscroll-behavior: contain;
}

.chat-message-row {
  display: flex;
}
.chat-message-row.sent {
  justify-content: flex-end;
}
.chat-message-row.received {
  justify-content: flex-start;
}

.chat-bubble {
  max-width: 75%;
  padding: 8px 12px;
  border-radius: 12px;
  word-break: break-word;
  /* Reset browser/MudBlazor paragraph margins inside bubbles */
}
.chat-bubble p.mud-typography, .chat-bubble .mud-typography {
  margin: 0;
}
.chat-bubble.chat-bubble-sent {
  background-color: var(--mud-palette-primary);
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-bubble.chat-bubble-sent .chat-message-time {
  color: rgba(255, 255, 255, 0.7);
}
.chat-bubble.chat-bubble-received {
  background-color: var(--mud-palette-surface);
  border-bottom-left-radius: 4px;
}
.chat-bubble.chat-bubble-received .chat-message-time {
  color: var(--mud-palette-text-secondary);
}

.chat-message-content {
  white-space: pre-wrap;
}

.chat-message-time {
  font-size: 0.7rem;
  text-align: right;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}

.chat-image-preview {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
}

.chat-invoice-card {
  border-radius: 8px;
  transition: box-shadow 0.15s ease;
}
.chat-invoice-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* --- Input area --- */
.chat-input-area {
  border-top: 1px solid var(--mud-palette-lines-default);
}

/* --- Floating Chat Widget --- */
.chat-widget-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--mud-palette-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  z-index: 1100;
}
.chat-widget-fab:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.chat-widget-badge .mud-badge {
  font-size: 0.65rem;
}

.chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 1100;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background-color: var(--mud-palette-background);
}

.chat-widget-expanded {
  width: 380px;
  height: 520px;
  display: flex;
  flex-direction: column;
}
@media (max-width: 480px) {
  .chat-widget-expanded {
    width: calc(100vw - 16px);
    height: calc(100dvh - var(--mud-appbar-height, 80px) - 16px);
  }
}

@media (max-width: 480px) {
  .chat-widget {
    bottom: 8px;
    right: 8px;
  }
}
.chat-widget-header {
  background-color: var(--mud-palette-primary);
  color: white;
  flex-shrink: 0;
}

.chat-widget-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Dark mode overrides --- */
html.dark-mode .chat-bubble.chat-bubble-received {
  background-color: var(--mud-palette-surface);
}
html.dark-mode .chat-widget-fab {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}
html.dark-mode .chat-widget {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}