/* ========================================
   DIALOGS - PROFESSIONAL CLEAN DESIGN
   Inspired by Notion/Slack/Linear
   ======================================== */

/* ========================================
   LEFT PANEL SIDEBAR
   ======================================== */
#leftPanel {
  background: var(--bg-surface, #FFFFFF) !important;
  border-right: 1px solid var(--border, #E5E7EB) !important;
}

html[data-theme='dark'] #leftPanel {
  background: var(--bg-surface, #161B22) !important;
  border-right-color: var(--border, #30363D) !important;
}

.left-panel-rail {
  padding: 0 !important;
}

/* Header */
.left-panel-header {
  background: var(--bg-subtle, #F9FAFB) !important;
  padding: 1.5rem !important;
  border-bottom: 1px solid var(--border, #E5E7EB) !important;
}

html[data-theme='dark'] .left-panel-header {
  background: var(--bg-subtle, #21262D) !important;
}

.left-panel-header::after {
  display: none !important;
}

.left-panel-eyebrow {
  color: var(--text-muted, #9CA3AF) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
}

.left-panel-title {
  color: var(--text-primary, #111827) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 0.25rem 0 !important;
}

html[data-theme='dark'] .left-panel-title {
  color: var(--text-primary, #F0F6FC) !important;
}

.left-panel-subtitle {
  color: var(--text-muted, #9CA3AF) !important;
  font-size: 0.8125rem !important;
  margin-top: 0.25rem !important;
}

/* Close button */
#leftPanelClose {
  position: absolute !important;
  top: 1rem !important;
  right: 1rem !important;
  background: transparent !important;
  border: 1px solid var(--border, #E5E7EB) !important;
  color: var(--text-muted, #9CA3AF) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 6px !important;
  padding: 0 !important;
}

#leftPanelClose:hover {
  background: var(--bg-muted, #F3F4F6) !important;
  color: var(--text-primary, #111827) !important;
}

/* Actions/Search section */
.left-panel-actions {
  padding: 1rem 1.5rem !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border, #E5E7EB) !important;
}

.left-panel-shortcut {
  color: var(--text-muted, #9CA3AF) !important;
  font-size: 0.75rem !important;
}

.left-panel-kbd {
  background: var(--bg-muted, #F3F4F6) !important;
  color: var(--text-secondary, #4B5563) !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 0.6875rem !important;
  border: 1px solid var(--border, #E5E7EB) !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .left-panel-kbd {
  background: var(--bg-muted, #30363D) !important;
  color: var(--text-secondary, #8B949E) !important;
}

/* Section */
.left-panel-section {
  padding: 1rem 1.5rem !important;
}

.left-panel-section-title {
  color: var(--text-muted, #9CA3AF) !important;
  font-size: 0.6875rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 0.75rem !important;
}

.left-panel-section-title::before {
  display: none !important;
}

/* Dialogs container */
.left-panel-dialogs {
  padding: 0 1rem 1rem 1rem !important;
  max-height: calc(100vh - 260px) !important;
  overflow-y: auto !important;
}

/* ========================================
   DIALOG ITEMS - CLEAN CARDS
   ======================================== */
.dialog-item {
  background: var(--bg-surface, #FFFFFF) !important;
  border: 1px solid var(--border, #E5E7EB) !important;
  border-radius: 8px !important;
  padding: 0.875rem 1rem !important;
  margin-bottom: 0.5rem !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.5rem !important;
  transition: all 0.15s ease !important;
  cursor: pointer !important;
}

html[data-theme='dark'] .dialog-item {
  background: var(--bg-subtle, #21262D) !important;
  border-color: var(--border, #30363D) !important;
}

.dialog-item:hover {
  background: var(--bg-subtle, #F9FAFB) !important;
  border-color: var(--border-strong, #D1D5DB) !important;
}

html[data-theme='dark'] .dialog-item:hover {
  background: var(--bg-muted, #30363D) !important;
}

.dialog-item::before {
  display: none !important;
}

/* Dialog Name */
.dialog-name {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--text-primary, #111827) !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

html[data-theme='dark'] .dialog-name {
  color: var(--text-primary, #F0F6FC) !important;
}

.dialog-name::before {
  content: '' !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  background: linear-gradient(135deg, #2563EB 0%, #3B82F6 100%) !important;
  border-radius: 50% !important;
}

/* Dialog Meta */
.dialog-meta {
  font-size: 0.75rem !important;
  color: var(--text-muted, #9CA3AF) !important;
  padding-left: 40px !important;
}

.dialog-meta::before {
  display: none !important;
}

/* Dialog Preview */
.dialog-preview {
  font-size: 0.8125rem !important;
  color: var(--text-secondary, #6B7280) !important;
  padding-left: 40px !important;
  border-left: none !important;
}

/* Action buttons */
.dialog-item .btn {
  font-size: 0.6875rem !important;
  font-weight: 500 !important;
  padding: 0.375rem 0.75rem !important;
  border-radius: 6px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
}

.dialog-item .btn-outline-secondary {
  background: transparent !important;
  border: 1px solid var(--border, #E5E7EB) !important;
  color: var(--text-secondary, #6B7280) !important;
}

.dialog-item .btn-outline-secondary:hover {
  background: var(--bg-muted, #F3F4F6) !important;
  color: var(--text-primary, #111827) !important;
}

.dialog-item .btn-primary {
  background: #2563EB !important;
  border: none !important;
  color: white !important;
}

.dialog-item .btn-primary:hover {
  background: #1D4ED8 !important;
}

/* Type Badge */
.dialog-item .badge {
  background: #DBEAFE !important;
  color: #2563EB !important;
  padding: 0.25rem 0.5rem !important;
  border-radius: 4px !important;
  font-size: 0.625rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  position: absolute !important;
  top: 0.875rem !important;
  right: 1rem !important;
}

html[data-theme='dark'] .dialog-item .badge {
  background: rgba(37, 99, 235, 0.15) !important;
  color: #60A5FA !important;
}

/* ========================================
   FILTER TABS
   ======================================== */
.dialogs-filters,
.filters-row {
  display: flex !important;
  gap: 0.25rem !important;
  padding: 0.25rem !important;
  background: var(--bg-muted, #F3F4F6) !important;
  border-radius: 8px !important;
  margin-bottom: 1rem !important;
}

html[data-theme='dark'] .dialogs-filters,
html[data-theme='dark'] .filters-row {
  background: var(--bg-muted, #30363D) !important;
}

.dialogs-filters .btn,
.filter-btn {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: var(--text-muted, #9CA3AF) !important;
  padding: 0.5rem 0.75rem !important;
  border-radius: 6px !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}

.dialogs-filters .btn:hover,
.filter-btn:hover {
  color: var(--text-primary, #111827) !important;
}

.dialogs-filters .btn.active,
.dialogs-filters .btn-primary,
.filter-btn.active {
  background: var(--bg-surface, #FFFFFF) !important;
  color: var(--text-primary, #111827) !important;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)) !important;
}

html[data-theme='dark'] .dialogs-filters .btn.active,
html[data-theme='dark'] .filter-btn.active {
  background: var(--bg-subtle, #21262D) !important;
  color: var(--text-primary, #F0F6FC) !important;
}

/* ========================================
   SEARCH INPUT
   ======================================== */
.left-panel-dialogs .form-control,
#dialogSearch {
  background: var(--bg-subtle, #F9FAFB) !important;
  border: 1px solid var(--border, #E5E7EB) !important;
  border-radius: 8px !important;
  padding: 0.625rem 0.875rem !important;
  font-size: 0.8125rem !important;
  color: var(--text-primary, #111827) !important;
  margin-bottom: 1rem !important;
}

html[data-theme='dark'] .left-panel-dialogs .form-control,
html[data-theme='dark'] #dialogSearch {
  background: var(--bg-subtle, #21262D) !important;
  border-color: var(--border, #30363D) !important;
  color: var(--text-primary, #F0F6FC) !important;
}

.left-panel-dialogs .form-control:focus,
#dialogSearch:focus {
  border-color: #2563EB !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

.left-panel-dialogs .form-control::placeholder {
  color: var(--text-muted, #9CA3AF) !important;
}

/* ========================================
   SCROLLBAR
   ======================================== */
.left-panel-dialogs::-webkit-scrollbar {
  width: 6px !important;
}

.left-panel-dialogs::-webkit-scrollbar-track {
  background: transparent !important;
}

.left-panel-dialogs::-webkit-scrollbar-thumb {
  background: var(--border, #E5E7EB) !important;
  border-radius: 3px !important;
}

.left-panel-dialogs::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong, #D1D5DB) !important;
}

/* ========================================
   CHIP/COUNT
   ======================================== */
.left-panel-header .chip,
#countDialogsLeft {
  background: var(--bg-muted, #F3F4F6) !important;
  color: var(--text-secondary, #6B7280) !important;
  padding: 0.125rem 0.5rem !important;
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

html[data-theme='dark'] .left-panel-header .chip,
html[data-theme='dark'] #countDialogsLeft {
  background: var(--bg-muted, #30363D) !important;
  color: var(--text-secondary, #8B949E) !important;
}

/* Embedded Dialogs List */
.dialogs-scroll-embedded {
  max-height: 450px !important;
  overflow-y: auto !important;
  padding: 0.5rem !important;
  background: var(--bg-surface, #FFFFFF) !important;
  border: 1px solid var(--border, #E5E7EB) !important;
  border-radius: 8px !important;
}

html[data-theme='dark'] .dialogs-scroll-embedded {
  background: var(--bg-subtle, #161B22) !important;
  border-color: var(--border, #30363D) !important;
}

.dialogs-scroll-embedded::-webkit-scrollbar {
  width: 6px !important;
}

.dialogs-scroll-embedded::-webkit-scrollbar-track {
  background: transparent !important;
}

.dialogs-scroll-embedded::-webkit-scrollbar-thumb {
  background: var(--border, #E5E7EB) !important;
  border-radius: 3px !important;
}

html[data-theme='dark'] .dialogs-scroll-embedded::-webkit-scrollbar-thumb {
  background: var(--border, #30363D) !important;
}