.custom-titlebar[data-v-4924b432] {
    height: 32px;
    background: var(--bg-primary, #0f0f0f);
    border-bottom: 1px solid var(--border-primary, #2a2a2a);
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-app-region: drag;
    user-select: none;
    flex-shrink: 0;
}
.titlebar-drag-region[data-v-4924b432] {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 12px;
}
.app-branding[data-v-4924b432] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.app-icon[data-v-4924b432] {
    color: var(--accent-primary, #9b87f5);
}
.app-title[data-v-4924b432] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #ffffff);
    letter-spacing: 0.3px;
}
.window-controls[data-v-4924b432] {
    display: flex;
    -webkit-app-region: no-drag;
    height: 100%;
}
.control-btn[data-v-4924b432] {
    width: 46px;
    height: 100%;
    border: none;
    background: transparent;
    color: var(--text-secondary, #888888);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s, color 0.15s;
}
.control-btn[data-v-4924b432]:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #ffffff);
}
.close-btn[data-v-4924b432]:hover {
    background: #e81123;
    color: #ffffff;
}

.app-container[data-v-680f9f6d] {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.app-content[data-v-680f9f6d] {
  flex: 1;
  overflow: hidden;
}

/* Inbox Alerts */
.inbox-alerts-container[data-v-680f9f6d] {
  position: fixed;
  top: 40px; /* Below titlebar */
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 420px;
}
.inbox-alert[data-v-680f9f6d] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #2d1f1f 0%, #1a1a1a 100%);
  border: 1px solid rgba(239, 68, 68, 0.4);
  border-left: 4px solid #ef4444;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4), 0 0 20px rgba(239, 68, 68, 0.1);
  animation: slideIn-680f9f6d 0.3s ease-out;
}
@keyframes slideIn-680f9f6d {
from {
    opacity: 0;
    transform: translateX(20px);
}
to {
    opacity: 1;
    transform: translateX(0);
}
}
.alert-icon[data-v-680f9f6d] {
  flex-shrink: 0;
  color: #f87171;
  margin-top: 2px;
}
.alert-content[data-v-680f9f6d] {
  flex: 1;
  min-width: 0;
}
.alert-title[data-v-680f9f6d] {
  font-size: 13px;
  font-weight: 600;
  color: #f87171;
  margin-bottom: 4px;
}
.alert-message[data-v-680f9f6d] {
  font-size: 12px;
  color: #d1d5db;
  line-height: 1.4;
}
.alert-message strong[data-v-680f9f6d] {
  color: #fff;
}
.alert-reason[data-v-680f9f6d] {
  display: block;
  margin-top: 4px;
  color: #9ca3af;
  font-size: 11px;
}
.alert-actions[data-v-680f9f6d] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.btn-reconnect[data-v-680f9f6d] {
  padding: 6px 14px;
  background: #ef4444;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-reconnect[data-v-680f9f6d]:hover {
  background: #dc2626;
}
.btn-dismiss[data-v-680f9f6d] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #9ca3af;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-dismiss[data-v-680f9f6d]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Rate Limit Notifications (less severe, amber/yellow) */
.rate-limit-container[data-v-680f9f6d] {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
}
.rate-limit-notification[data-v-680f9f6d] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #2d2a1f 0%, #1a1a1a 100%);
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-left: 3px solid #fbbf24;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  animation: slideInBottom-680f9f6d 0.3s ease-out;
}
@keyframes slideInBottom-680f9f6d {
from {
    opacity: 0;
    transform: translateY(10px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.rate-limit-icon[data-v-680f9f6d] {
  flex-shrink: 0;
  color: #fbbf24;
  margin-top: 1px;
}
.rate-limit-content[data-v-680f9f6d] {
  flex: 1;
  min-width: 0;
}
.rate-limit-title[data-v-680f9f6d] {
  font-size: 12px;
  font-weight: 600;
  color: #fbbf24;
  margin-bottom: 3px;
}
.rate-limit-message[data-v-680f9f6d] {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.4;
}
.rate-limit-message strong[data-v-680f9f6d] {
  color: #d1d5db;
}
.btn-dismiss-rate[data-v-680f9f6d] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.btn-dismiss-rate[data-v-680f9f6d]:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #9ca3af;
}

.auth-container[data-v-6a918881] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-primary);
  padding: var(--space-5);
  overflow-y: auto;
  z-index: 9999;
}
.auth-card[data-v-6a918881] {
  background: var(--surface-overlay);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-card);
}
.auth-header[data-v-6a918881] {
  text-align: center;
  margin-bottom: var(--space-8);
}
.auth-logo[data-v-6a918881] {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-3);
  display: block;
}
.auth-header h1[data-v-6a918881] {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.auth-header p[data-v-6a918881] {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}
.auth-form[data-v-6a918881] {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.form-group[data-v-6a918881] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-group label[data-v-6a918881] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.form-group input[data-v-6a918881] {
  background: var(--bg-input);
  border: var(--border-width-1) solid var(--border-input);
  border-radius: var(--radius-base);
  padding: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  transition: var(--transition-input);
}
.form-group input[data-v-6a918881]:focus {
  outline: none;
  border-color: var(--border-input-focus);
  box-shadow: var(--shadow-focus);
}
.form-group input[data-v-6a918881]::placeholder {
  color: var(--text-quaternary);
}
.error-message[data-v-6a918881] {
  background: var(--color-error-bg);
  border: var(--border-width-1) solid var(--color-error-border);
  border-radius: var(--radius-base);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-error);
}
.btn-primary[data-v-6a918881] {
  background: var(--accent-primary);
  border: none;
  border-radius: var(--radius-base);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  cursor: pointer;
  transition: var(--transition-button);
}
.btn-primary[data-v-6a918881]:hover:not(:disabled) {
  background: var(--accent-primary-hover);
}
.btn-primary[data-v-6a918881]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.divider[data-v-6a918881] {
  display: flex;
  align-items: center;
  text-align: center;
  margin: var(--space-2) 0;
}
.divider[data-v-6a918881]::before,
.divider[data-v-6a918881]::after {
  content: '';
  flex: 1;
  border-bottom: var(--border-width-1) solid var(--border-secondary);
}
.divider span[data-v-6a918881] {
  padding: 0 var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--text-quaternary);
}
.btn-microsoft[data-v-6a918881] {
  background: var(--bg-tertiary);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-base);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2-5);
  transition: var(--transition-button);
}
.btn-microsoft[data-v-6a918881]:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}
.microsoft-icon[data-v-6a918881] {
  width: 18px;
  height: 18px;
}
.auth-footer[data-v-6a918881] {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.link[data-v-6a918881] {
  color: var(--accent-primary);
  cursor: pointer;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}
.link[data-v-6a918881]:hover {
  text-decoration: underline;
}

.auth-container[data-v-6a836281] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--bg-primary);
  padding: var(--space-5);
  overflow-y: auto;
  z-index: 9999;
}
.auth-card[data-v-6a836281] {
  background: var(--surface-overlay);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-card);
}
.auth-header[data-v-6a836281] {
  text-align: center;
  margin-bottom: var(--space-8);
}
.auth-logo[data-v-6a836281] {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--space-3);
  display: block;
}
.auth-header h1[data-v-6a836281] {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.auth-header p[data-v-6a836281] {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}
.loading-state[data-v-6a836281] {
  text-align: center;
  padding: var(--space-10) var(--space-5);
}
.spinner[data-v-6a836281] {
  width: 40px;
  height: 40px;
  margin: 0 auto var(--space-5);
  border: 3px solid var(--border-secondary);
  border-top-color: var(--accent-primary);
  border-radius: var(--radius-full);
  animation: spin-6a836281 var(--duration-slow) linear infinite;
}
@keyframes spin-6a836281 {
to { transform: rotate(360deg);
}
}
.loading-state p[data-v-6a836281] {
  color: var(--text-secondary);
  font-size: var(--font-size-base);
}
.error-state[data-v-6a836281] {
  text-align: center;
  padding: var(--space-10) var(--space-5);
}
.error-icon[data-v-6a836281] {
  font-size: 48px;
  margin-bottom: var(--space-4);
}
.error-state h3[data-v-6a836281] {
  color: var(--text-primary);
  font-size: var(--font-size-xl);
  margin-bottom: var(--space-3);
}
.error-state p[data-v-6a836281] {
  color: var(--color-error);
  font-size: var(--font-size-base);
  margin-bottom: var(--space-6);
}
.invitation-info[data-v-6a836281] {
  background: var(--bg-secondary);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.info-item[data-v-6a836281] {
  margin-bottom: var(--space-3);
}
.info-item[data-v-6a836281]:last-child {
  margin-bottom: 0;
}
.info-item label[data-v-6a836281] {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.info-value[data-v-6a836281] {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
}
.auth-form[data-v-6a836281] {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.form-row[data-v-6a836281] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}
.form-group[data-v-6a836281] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-group label[data-v-6a836281] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.form-group input[data-v-6a836281] {
  background: var(--bg-input);
  border: var(--border-width-1) solid var(--border-input);
  border-radius: var(--radius-base);
  padding: var(--space-3);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  transition: var(--transition-input);
}
.form-group input[data-v-6a836281]:focus {
  outline: none;
  border-color: var(--border-input-focus);
  box-shadow: var(--shadow-focus);
}
.form-group input[data-v-6a836281]::placeholder {
  color: var(--text-quaternary);
}
.field-hint[data-v-6a836281] {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}
.field-hint.error[data-v-6a836281] {
  color: var(--color-error);
}
.error-message[data-v-6a836281] {
  background: var(--color-error-bg);
  border: var(--border-width-1) solid var(--color-error-border);
  border-radius: var(--radius-base);
  padding: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-error);
}
.btn-primary[data-v-6a836281], .btn-secondary[data-v-6a836281] {
  border: none;
  border-radius: var(--radius-base);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-white);
  cursor: pointer;
  transition: var(--transition-button);
}
.btn-primary[data-v-6a836281] {
  background: var(--accent-primary);
}
.btn-primary[data-v-6a836281]:hover:not(:disabled) {
  background: var(--accent-primary-hover);
}
.btn-primary[data-v-6a836281]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary[data-v-6a836281] {
  background: var(--bg-tertiary);
  border: var(--border-width-1) solid var(--border-secondary);
}
.btn-secondary[data-v-6a836281]:hover {
  background: var(--bg-hover);
  border-color: var(--border-hover);
}
.auth-footer[data-v-6a836281] {
  margin-top: var(--space-6);
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.link[data-v-6a836281] {
  color: var(--accent-primary);
  cursor: pointer;
  text-decoration: none;
  font-weight: var(--font-weight-medium);
}
.link[data-v-6a836281]:hover {
  text-decoration: underline;
}

.email-content-wrapper[data-v-3122943c] {
  width: 100%;
}
.email-iframe[data-v-3122943c] {
  width: 100%;
  border: none;
  display: block;
  background: #ffffff;
  min-height: 50px;
  border-radius: 8px;
}
.quoted-iframe[data-v-3122943c] {
  margin-top: 8px;
  background: #f5f5f5;
  border-radius: 0 0 8px 8px;
}

/* Action buttons row */
.email-actions-row[data-v-3122943c] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 8px;
}
.quick-action-buttons[data-v-3122943c] {
  display: flex;
  gap: 8px;
}
.quick-action-btn[data-v-3122943c] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px solid var(--border-primary);
  border-radius: 20px;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.quick-action-btn[data-v-3122943c]:hover {
  background: var(--bg-selected);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.quick-action-btn[data-v-3122943c]:active {
  transform: scale(0.98);
}
.quick-action-icon[data-v-3122943c] {
  width: 16px;
  height: 16px;
  stroke-width: 2;
}
.quoted-toggle-btn[data-v-3122943c] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 28px;
  margin: 0;
  padding: 0;
  background: var(--bg-hover);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.quoted-toggle-btn[data-v-3122943c]:hover {
  background: var(--bg-active);
  border-color: var(--border-hover);
}
.quoted-toggle-btn .dots[data-v-3122943c] {
  color: var(--text-tertiary);
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1;
}

.modal-overlay[data-v-a9be8a2b] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  backdrop-filter: blur(4px);
}
.snooze-modal[data-v-a9be8a2b] {
  background: var(--surface-overlay);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 340px;
  box-shadow: var(--shadow-modal);
}
.modal-header[data-v-a9be8a2b] {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width-1) solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3[data-v-a9be8a2b] {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.close-btn[data-v-a9be8a2b] {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--text-tertiary);
  transition: var(--transition-colors);
  border-radius: var(--radius-sm);
}
.close-btn[data-v-a9be8a2b]:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.modal-body[data-v-a9be8a2b] {
  padding: var(--space-4) var(--space-5);
}

/* Calendar */
.calendar[data-v-a9be8a2b] {
  margin-bottom: var(--space-4);
}
.calendar-nav[data-v-a9be8a2b] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.calendar-title[data-v-a9be8a2b] {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.nav-btn[data-v-a9be8a2b] {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1-5);
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  transition: var(--transition-colors);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nav-btn[data-v-a9be8a2b]:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.calendar-weekdays[data-v-a9be8a2b] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: var(--space-1);
}
.weekday[data-v-a9be8a2b] {
  text-align: center;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  padding: var(--space-1) 0;
}
.calendar-grid[data-v-a9be8a2b] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.calendar-day[data-v-a9be8a2b] {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border: none;
  background: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  color: var(--text-primary);
  transition: all 0.15s ease;
  padding: 0;
}
.calendar-day[data-v-a9be8a2b]:hover:not(.disabled):not(.selected) {
  background: var(--bg-hover);
}
.calendar-day.other-month[data-v-a9be8a2b] {
  color: var(--text-quaternary, var(--text-tertiary));
  opacity: 0.4;
}
.calendar-day.today[data-v-a9be8a2b]:not(.selected) {
  color: var(--color-warning);
  font-weight: var(--font-weight-bold);
}
.calendar-day.selected[data-v-a9be8a2b] {
  background: var(--color-warning);
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
}
.calendar-day.disabled[data-v-a9be8a2b] {
  color: var(--text-tertiary);
  opacity: 0.3;
  cursor: not-allowed;
}

/* Time Picker */
.time-picker[data-v-a9be8a2b] {
  margin-bottom: var(--space-3);
}
.time-label[data-v-a9be8a2b] {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-2);
}
.time-inputs[data-v-a9be8a2b] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}
.time-field[data-v-a9be8a2b] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.time-spin[data-v-a9be8a2b] {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  transition: var(--transition-colors);
  display: flex;
  align-items: center;
  justify-content: center;
}
.time-spin[data-v-a9be8a2b]:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.time-input[data-v-a9be8a2b] {
  width: 42px;
  text-align: center;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  background: var(--bg-input);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-base);
  padding: var(--space-1-5) var(--space-1);
  font-variant-numeric: tabular-nums;
}
.time-input[data-v-a9be8a2b]:focus {
  outline: none;
  border-color: var(--border-input-focus);
  box-shadow: var(--shadow-focus);
}
.ampm-display[data-v-a9be8a2b] {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  user-select: none;
}
.ampm-field .time-input[data-v-a9be8a2b] {
  font-size: 14px;
  width: 42px;
}
.time-separator[data-v-a9be8a2b] {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--text-tertiary);
  padding-bottom: 2px;
  align-self: center;
}

/* Summary */
.snooze-summary[data-v-a9be8a2b] {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-hover);
  border-radius: var(--radius-base);
}
.error-message[data-v-a9be8a2b] {
  margin-top: var(--space-3);
  padding: var(--space-2-5);
  background: var(--color-error-bg);
  border: var(--border-width-1) solid var(--color-error-border);
  border-radius: var(--radius-base);
  color: var(--color-error);
  font-size: var(--font-size-base);
}
.modal-footer[data-v-a9be8a2b] {
  padding: var(--space-3) var(--space-5);
  border-top: var(--border-width-1) solid var(--border-primary);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}
.btn-cancel[data-v-a9be8a2b],
.btn-confirm[data-v-a9be8a2b] {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-button);
  font-size: var(--font-size-base);
}
.btn-cancel[data-v-a9be8a2b] {
  background: transparent;
  border: var(--border-width-1) solid var(--border-secondary);
  color: var(--text-primary);
}
.btn-cancel[data-v-a9be8a2b]:hover {
  background: var(--bg-hover);
}
.btn-confirm[data-v-a9be8a2b] {
  background: var(--color-warning);
  border: var(--border-width-1) solid var(--color-warning);
  color: var(--color-white);
}
.btn-confirm[data-v-a9be8a2b]:hover:not(:disabled) {
  background: var(--color-warning-hover);
  border-color: var(--color-warning-hover);
}
.btn-confirm[data-v-a9be8a2b]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-overlay[data-v-c4776c15] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  backdrop-filter: blur(4px);
}
.block-sender-modal[data-v-c4776c15] {
  background: var(--surface-overlay);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 450px;
  box-shadow: var(--shadow-modal);
}
.modal-header[data-v-c4776c15] {
  padding: var(--space-5);
  border-bottom: var(--border-width-1) solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header h3[data-v-c4776c15] {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.close-btn[data-v-c4776c15] {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--text-tertiary);
  transition: var(--transition-colors);
  border-radius: var(--radius-sm);
}
.close-btn[data-v-c4776c15]:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.modal-body[data-v-c4776c15] {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.sender-info[data-v-c4776c15] {
  background: var(--bg-secondary);
  padding: var(--space-3);
  border-radius: var(--radius-base);
}
.sender-label[data-v-c4776c15] {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}
.sender-email[data-v-c4776c15] {
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  word-break: break-all;
}
.option-group[data-v-c4776c15] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.option-label[data-v-c4776c15] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}
.radio-options[data-v-c4776c15] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.radio-option[data-v-c4776c15] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}
.radio-option input[type="radio"][data-v-c4776c15] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary);
}
.radio-text[data-v-c4776c15] {
  font-size: var(--font-size-base);
  color: var(--text-primary);
}
.simple-info[data-v-c4776c15] {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  line-height: 1.5;
}
.reason-input[data-v-c4776c15] {
  width: 100%;
  padding: var(--space-2-5) var(--space-3);
  background: var(--bg-input);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  resize: vertical;
  font-family: inherit;
}
.reason-input[data-v-c4776c15]:focus {
  outline: none;
  border-color: var(--border-input-focus);
  box-shadow: var(--shadow-focus);
}
.reason-input[data-v-c4776c15]::placeholder {
  color: var(--text-tertiary);
}
.warning-message[data-v-c4776c15] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-warning-bg, rgba(245, 158, 11, 0.1));
  border: var(--border-width-1) solid var(--color-warning, #f59e0b);
  border-radius: var(--radius-base);
  color: var(--color-warning, #f59e0b);
  font-size: var(--font-size-sm);
}
.info-message[data-v-c4776c15] {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-info-bg, rgba(59, 130, 246, 0.1));
  border: var(--border-width-1) solid var(--color-info, #3b82f6);
  border-radius: var(--radius-base);
  color: var(--color-info, #3b82f6);
  font-size: var(--font-size-sm);
}
.info-icon[data-v-c4776c15] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
}
.warning-icon[data-v-c4776c15] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  fill: currentColor;
}
.error-message[data-v-c4776c15] {
  padding: var(--space-2-5);
  background: var(--color-error-bg);
  border: var(--border-width-1) solid var(--color-error-border);
  border-radius: var(--radius-base);
  color: var(--color-error);
  font-size: var(--font-size-base);
}
.modal-footer[data-v-c4776c15] {
  padding: var(--space-4) var(--space-5);
  border-top: var(--border-width-1) solid var(--border-primary);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}
.btn-cancel[data-v-c4776c15],
.btn-confirm[data-v-c4776c15] {
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-button);
  font-size: var(--font-size-base);
}
.btn-cancel[data-v-c4776c15] {
  background: transparent;
  border: var(--border-width-1) solid var(--border-secondary);
  color: var(--text-primary);
}
.btn-cancel[data-v-c4776c15]:hover {
  background: var(--bg-hover);
}
.btn-confirm[data-v-c4776c15] {
  background: var(--color-error, #ef4444);
  border: var(--border-width-1) solid var(--color-error, #ef4444);
  color: var(--color-white);
}
.btn-confirm[data-v-c4776c15]:hover:not(:disabled) {
  background: var(--color-error-hover, #dc2626);
  border-color: var(--color-error-hover, #dc2626);
}
.btn-confirm[data-v-c4776c15]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-overlay[data-v-c184121e] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  backdrop-filter: blur(4px);
}
.manage-blocked-modal[data-v-c184121e] {
  background: var(--surface-overlay);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-lg);
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}
.modal-header[data-v-c184121e] {
  padding: var(--space-4) var(--space-5);
  border-bottom: var(--border-width-1) solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.modal-header h3[data-v-c184121e] {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.close-btn[data-v-c184121e] {
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--text-tertiary);
  transition: var(--transition-colors);
  border-radius: var(--radius-sm);
}
.close-btn[data-v-c184121e]:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* Search Bar */
.search-bar[data-v-c184121e] {
  padding: var(--space-3) var(--space-5);
  border-bottom: var(--border-width-1) solid var(--border-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.search-icon[data-v-c184121e] {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--text-tertiary);
  stroke-width: 2;
  flex-shrink: 0;
}
.search-input[data-v-c184121e] {
  flex: 1;
  background: transparent;
  border: none;
  font-size: var(--font-size-base);
  color: var(--text-primary);
  outline: none;
}
.search-input[data-v-c184121e]::placeholder {
  color: var(--text-tertiary);
}
.clear-search[data-v-c184121e] {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
}
.clear-search[data-v-c184121e]:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}
.clear-search svg[data-v-c184121e] {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

/* Tabs */
.tabs[data-v-c184121e] {
  display: flex;
  padding: 0 var(--space-5);
  border-bottom: var(--border-width-1) solid var(--border-primary);
  flex-shrink: 0;
}
.tab[data-v-c184121e] {
  padding: var(--space-3) var(--space-4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--transition-colors);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.tab[data-v-c184121e]:hover {
  color: var(--text-primary);
}
.tab.active[data-v-c184121e] {
  color: var(--color-primary, #6366f1);
  border-bottom-color: var(--color-primary, #6366f1);
}
.tab-count[data-v-c184121e] {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-full);
}
.tab.active .tab-count[data-v-c184121e] {
  background: rgba(99, 102, 241, 0.15);
  color: var(--color-primary, #6366f1);
}

/* Modal Body */
.modal-body[data-v-c184121e] {
  padding: var(--space-4) var(--space-5);
  overflow-y: auto;
  flex: 1;
  min-height: 200px;
  max-height: 400px;
}
.loading-state[data-v-c184121e] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-secondary);
  gap: var(--space-3);
}
.spinner[data-v-c184121e] {
  width: 24px;
  height: 24px;
  border: 2px solid var(--border-secondary);
  border-top-color: var(--color-primary, #6366f1);
  border-radius: 50%;
  animation: spin-c184121e 0.8s linear infinite;
}
@keyframes spin-c184121e {
to { transform: rotate(360deg);
}
}
.empty-state[data-v-c184121e],
.empty-tab[data-v-c184121e] {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--text-secondary);
}
.empty-icon[data-v-c184121e] {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-3);
  fill: var(--text-tertiary);
}
.empty-state p[data-v-c184121e],
.empty-tab p[data-v-c184121e] {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-base);
  color: var(--text-primary);
}
.empty-hint[data-v-c184121e] {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* Blocked List */
.blocked-list[data-v-c184121e] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.section[data-v-c184121e] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.section-header[data-v-c184121e] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width-1) solid var(--border-secondary);
}
.section-title[data-v-c184121e] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.section-count[data-v-c184121e] {
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-full);
}
.section-note[data-v-c184121e] {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin: 0 0 var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-base);
}
.blocked-items[data-v-c184121e] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.blocked-item[data-v-c184121e] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--bg-secondary);
  border-radius: var(--radius-base);
  gap: var(--space-3);
  transition: var(--transition-colors);
}
.blocked-item[data-v-c184121e]:hover {
  background: var(--bg-hover);
}
.blocked-item.company[data-v-c184121e] {
  background: rgba(99, 102, 241, 0.05);
  border: 1px solid rgba(99, 102, 241, 0.15);
}
.blocked-item.company[data-v-c184121e]:hover {
  background: rgba(99, 102, 241, 0.1);
}
.blocked-info[data-v-c184121e] {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
}
.blocked-pattern[data-v-c184121e] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  color: var(--text-primary);
  font-weight: var(--font-weight-medium);
  word-break: break-all;
}
.type-badge[data-v-c184121e] {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.type-badge.email[data-v-c184121e] {
  background: rgba(59, 130, 246, 0.15);
  color: #3b82f6;
}
.type-badge.domain[data-v-c184121e] {
  background: rgba(168, 85, 247, 0.15);
  color: #a855f7;
}
.blocked-meta[data-v-c184121e] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  flex-wrap: wrap;
}
.blocked-count[data-v-c184121e] {
  color: var(--color-error, #ef4444);
  font-weight: var(--font-weight-medium);
}
.blocked-by[data-v-c184121e] {
  color: var(--text-secondary);
}
.blocked-date[data-v-c184121e] {
  color: var(--text-tertiary);
}
.blocked-reason[data-v-c184121e] {
  display: flex;
  align-items: center;
}
.info-icon[data-v-c184121e] {
  width: 14px;
  height: 14px;
  fill: var(--text-tertiary);
  cursor: help;
}
.unblock-btn[data-v-c184121e] {
  padding: var(--space-1-5) var(--space-3);
  background: transparent;
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  cursor: pointer;
  transition: var(--transition-colors);
  white-space: nowrap;
  flex-shrink: 0;
}
.unblock-btn[data-v-c184121e]:hover:not(:disabled) {
  background: var(--color-error, #ef4444);
  border-color: var(--color-error, #ef4444);
  color: white;
}
.unblock-btn[data-v-c184121e]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.company-badge[data-v-c184121e] {
  padding: var(--space-1) var(--space-2);
  background: rgba(99, 102, 241, 0.15);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: #6366F1;
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
}
.error-message[data-v-c184121e] {
  margin-top: var(--space-3);
  padding: var(--space-2-5);
  background: var(--color-error-bg);
  border: var(--border-width-1) solid var(--color-error-border);
  border-radius: var(--radius-base);
  color: var(--color-error);
  font-size: var(--font-size-sm);
}

/* Modal Footer */
.modal-footer[data-v-c184121e] {
  padding: var(--space-3) var(--space-5);
  border-top: var(--border-width-1) solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.total-count[data-v-c184121e] {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
.btn-close[data-v-c184121e] {
  padding: var(--space-2) var(--space-4);
  background: var(--bg-tertiary);
  border: var(--border-width-1) solid var(--border-secondary);
  border-radius: var(--radius-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-button);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}
.btn-close[data-v-c184121e]:hover {
  background: var(--bg-hover);
}

.dropdown-overlay[data-v-e098152e] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: transparent;
}
.dropdown-menu[data-v-e098152e] {
  position: fixed;
  background: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  min-width: 240px;
  padding: 4px;
  z-index: 1000;
}
.dropdown-item[data-v-e098152e] {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s;
  text-align: left;
  color: var(--text-primary);
}
.dropdown-item[data-v-e098152e]:hover {
  background: var(--bg-hover);
}
.dropdown-icon[data-v-e098152e] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-warning);
}
.dropdown-item-content[data-v-e098152e] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dropdown-label[data-v-e098152e] {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.dropdown-time[data-v-e098152e] {
  font-size: 12px;
  color: var(--text-tertiary);
}

.dropdown-overlay[data-v-ccae4b93] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background: transparent;
}
.dropdown-menu[data-v-ccae4b93] {
  position: fixed;
  background: var(--surface-base, #2a2a2a);
  border: 1px solid var(--border-secondary, #3a3a3a);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  min-width: 280px;
  max-width: 320px;
  max-height: 400px;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}
.search-box[data-v-ccae4b93] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-secondary, #3a3a3a);
}
.search-icon[data-v-ccae4b93] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: var(--text-quaternary, #666);
}
.search-input[data-v-ccae4b93] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--text-primary, #e0e0e0);
}
.search-input[data-v-ccae4b93]::placeholder {
  color: var(--text-quaternary, #666);
}
.tag-list[data-v-ccae4b93] {
  flex: 1;
  overflow-y: auto;
  padding: 4px;
}
.tag-section[data-v-ccae4b93] {
  margin-bottom: 4px;
}
.section-header[data-v-ccae4b93] {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--text-quaternary, #666);
  letter-spacing: 0.5px;
}
.tag-option[data-v-ccae4b93] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.tag-option[data-v-ccae4b93]:hover {
  background: var(--bg-hover, #3a3a3a);
}
.tag-option--selected[data-v-ccae4b93] {
  background: rgba(99, 102, 241, 0.12);
}
.tag-option--selected[data-v-ccae4b93]:hover {
  background: rgba(99, 102, 241, 0.18);
}
.tag-checkbox[data-v-ccae4b93] {
  display: none;
}

/* Checkbox indicator */
.checkbox-indicator[data-v-ccae4b93] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-secondary, #4a4a4a);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.checkbox-indicator.checked[data-v-ccae4b93] {
  background: var(--accent-primary, #6366f1);
  border-color: var(--accent-primary, #6366f1);
}
.checkbox-indicator svg[data-v-ccae4b93] {
  width: 12px;
  height: 12px;
  color: white;
}

/* Tag icon (outline) */
.tag-icon[data-v-ccae4b93] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}
.tag-emoji[data-v-ccae4b93] {
  font-size: 16px;
  flex-shrink: 0;
}
.tag-name[data-v-ccae4b93] {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary, #e0e0e0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-workspace[data-v-ccae4b93] {
  font-size: 11px;
  color: var(--text-quaternary, #666);
  padding: 2px 6px;
  background: var(--surface-raised, #333);
  border-radius: 4px;
}
.empty-state[data-v-ccae4b93] {
  padding: 24px 12px;
  text-align: center;
  color: var(--text-quaternary, #666);
  font-size: 13px;
}

.tag-badge[data-v-4dbbf539] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: var(--tag-bg);
  border: 1px solid var(--tag-border);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--tag-color);
  white-space: nowrap;
  transition: all 0.15s ease;
}
.tag-badge--small[data-v-4dbbf539] {
  padding: 1px 6px;
  font-size: 11px;
  gap: 3px;
}
.tag-badge--clickable[data-v-4dbbf539] {
  cursor: pointer;
}
.tag-badge--clickable[data-v-4dbbf539]:hover {
  background: var(--tag-border);
}
.tag-emoji[data-v-4dbbf539] {
  font-size: 1em;
}
.tag-name[data-v-4dbbf539] {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tag-remove[data-v-4dbbf539] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  padding: 0;
  margin-left: 2px;
  background: transparent;
  border: none;
  border-radius: 2px;
  color: var(--tag-color);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s, background 0.15s;
}
.tag-remove[data-v-4dbbf539]:hover {
  opacity: 1;
  background: var(--tag-border);
}
.tag-remove svg[data-v-4dbbf539] {
  width: 10px;
  height: 10px;
}
.tag-count[data-v-4dbbf539] {
  padding: 0 4px;
  margin-left: 2px;
  background: var(--tag-border);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 600;
}

.modal-overlay[data-v-dd800df1] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-container[data-v-dd800df1] {
  background: var(--surface-base, #1e1e1e);
  border: 1px solid var(--border-secondary, #333);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}
.modal-header[data-v-dd800df1] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-secondary, #333);
}
.modal-header h2[data-v-dd800df1] {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary, #e0e0e0);
}
.close-btn[data-v-dd800df1] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: var(--text-tertiary, #666);
  cursor: pointer;
  transition: all 0.15s;
}
.close-btn[data-v-dd800df1]:hover {
  background: var(--bg-hover, #333);
  color: var(--text-primary, #e0e0e0);
}
.modal-body[data-v-dd800df1] {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
}
.search-box[data-v-dd800df1] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-input, #2a2a2a);
  border: 1px solid var(--border-input, #3a3a3a);
  border-radius: 8px;
  margin-bottom: 20px;
}
.search-icon[data-v-dd800df1] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--text-quaternary, #666);
}
.search-input[data-v-dd800df1] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--text-primary, #e0e0e0);
}
.search-input[data-v-dd800df1]::placeholder {
  color: var(--text-quaternary, #666);
}
.modal-description[data-v-dd800df1] {
  margin: 0 0 20px 0;
  color: var(--text-tertiary, #888);
  font-size: 14px;
}
.loading-state[data-v-dd800df1] {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-tertiary, #666);
}
.tags-sections[data-v-dd800df1] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.tags-section[data-v-dd800df1] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.section-header[data-v-dd800df1] {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-quaternary, #666);
  padding: 0 4px;
}
.tags-list[data-v-dd800df1] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tag-option[data-v-dd800df1] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.tag-option[data-v-dd800df1]:hover {
  background: var(--bg-hover, #2a2a2a);
}
.tag-checkbox[data-v-dd800df1] {
  display: none;
}
.checkbox-indicator[data-v-dd800df1] {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-secondary, #4a4a4a);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.checkbox-indicator.checked[data-v-dd800df1] {
  background: var(--accent-primary, #6366f1);
  border-color: var(--accent-primary, #6366f1);
}
.checkbox-indicator svg[data-v-dd800df1] {
  width: 12px;
  height: 12px;
  color: white;
}
.tag-emoji[data-v-dd800df1] {
  font-size: 18px;
  flex-shrink: 0;
}
.tag-icon[data-v-dd800df1] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tag-icon svg[data-v-dd800df1] {
  width: 18px;
  height: 18px;
}
.tag-name[data-v-dd800df1] {
  flex: 1;
  font-size: 14px;
  color: var(--text-primary, #e0e0e0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tag-workspace[data-v-dd800df1] {
  font-size: 11px;
  color: var(--text-quaternary, #666);
  padding: 2px 8px;
  background: var(--surface-raised, #333);
  border-radius: 4px;
}
.empty-state[data-v-dd800df1] {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-quaternary, #666);
}
.empty-state p[data-v-dd800df1] {
  margin: 8px 0;
}
.modal-footer[data-v-dd800df1] {
  display: flex;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid var(--border-secondary, #333);
}
.btn-secondary[data-v-dd800df1] {
  background: var(--surface-raised, #333);
  color: var(--text-primary, #e0e0e0);
  border: 1px solid var(--border-secondary, #444);
  padding: 10px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-secondary[data-v-dd800df1]:hover {
  background: var(--bg-hover, #3a3a3a);
  border-color: var(--border-hover, #555);
}

.search-modal-backdrop[data-v-18834598] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
  z-index: 9999;
}
.search-modal[data-v-18834598] {
  width: 100%;
  max-width: 640px;
  background: var(--bg-secondary, #1f2937);
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
}
.search-input-container[data-v-18834598] {
  display: flex;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  gap: 12px;
}
.search-icon[data-v-18834598] {
  width: 20px;
  height: 20px;
  color: var(--text-secondary, #9ca3af);
  flex-shrink: 0;
}
.search-input[data-v-18834598] {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 16px;
  color: var(--text-primary, #f3f4f6);
}
.search-input[data-v-18834598]::placeholder {
  color: var(--text-tertiary, #6b7280);
}
.search-shortcuts[data-v-18834598] {
  font-size: 12px;
  color: var(--text-tertiary, #6b7280);
}
.search-shortcuts kbd[data-v-18834598] {
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
  padding: 2px 6px;
  border-radius: 4px;
  font-family: inherit;
}
.search-results[data-v-18834598] {
  max-height: 60vh;
  overflow-y: auto;
}
.search-loading[data-v-18834598] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: var(--text-secondary, #9ca3af);
}
.search-spinner[data-v-18834598] {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-top-color: var(--color-primary, #3b82f6);
  border-radius: 50%;
  animation: spin-18834598 0.8s linear infinite;
}
@keyframes spin-18834598 {
to { transform: rotate(360deg);
}
}
.search-stats[data-v-18834598] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--text-tertiary, #6b7280);
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
}
.search-stats-info[data-v-18834598] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.search-stats-time[data-v-18834598] {
  color: var(--color-success, #10b981);
}
.search-stats-source[data-v-18834598] {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  text-transform: uppercase;
}
.search-stats-source.opensearch[data-v-18834598] {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.search-stats-source.postgresql[data-v-18834598] {
  background: rgba(251, 191, 36, 0.2);
  color: #fbbf24;
}
.search-stats-actions[data-v-18834598] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.search-hint[data-v-18834598] {
  font-size: 11px;
  color: var(--text-tertiary, #6b7280);
}
.search-hint kbd[data-v-18834598] {
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
  padding: 2px 5px;
  border-radius: 3px;
  font-family: inherit;
  font-size: 10px;
}
.search-view-all-btn[data-v-18834598] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: transparent;
  color: var(--text-secondary, #9ca3af);
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.15s;
}
.search-view-all-btn[data-v-18834598]:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-primary, #f3f4f6);
}
.search-view-all-btn svg[data-v-18834598] {
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}
.search-view-all-btn:hover svg[data-v-18834598] {
  transform: translateX(2px);
}
.search-result-item[data-v-18834598] {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color, rgba(255, 255, 255, 0.05));
  transition: background 0.15s;
}
.search-result-item[data-v-18834598]:hover,
.search-result-item.selected[data-v-18834598] {
  background: var(--bg-hover, rgba(255, 255, 255, 0.05));
}
.result-icon[data-v-18834598] {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
  border-radius: 8px;
}
.result-icon svg[data-v-18834598] {
  width: 16px;
  height: 16px;
  color: var(--text-secondary, #9ca3af);
}
.result-content[data-v-18834598] {
  flex: 1;
  min-width: 0;
}
.result-header[data-v-18834598] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.result-from[data-v-18834598] {
  font-weight: 500;
  color: var(--text-primary, #f3f4f6);
  font-size: 14px;
}
.result-time[data-v-18834598] {
  font-size: 12px;
  color: var(--text-tertiary, #6b7280);
}
.result-subject[data-v-18834598] {
  font-size: 13px;
  color: var(--text-secondary, #d1d5db);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.result-subject[data-v-18834598] mark {
  background: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
  padding: 0 2px;
  border-radius: 2px;
}
.result-preview[data-v-18834598] {
  font-size: 12px;
  color: var(--text-tertiary, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 4px;
}
.result-preview[data-v-18834598] mark {
  background: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
  padding: 0 2px;
  border-radius: 2px;
}
.result-meta[data-v-18834598] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.result-attachment svg[data-v-18834598] {
  width: 12px;
  height: 12px;
  color: var(--text-tertiary, #6b7280);
}
.result-unread[data-v-18834598] {
  background: var(--color-primary, #3b82f6);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
}
.result-status[data-v-18834598] {
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 10px;
}
.result-status.open[data-v-18834598] {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}
.result-status.archive[data-v-18834598] {
  background: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}
.result-status.trash[data-v-18834598] {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
}
.result-status.spam[data-v-18834598] {
  background: rgba(251, 146, 60, 0.2);
  color: #fb923c;
}
.search-empty[data-v-18834598] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  color: var(--text-secondary, #9ca3af);
  gap: 12px;
}
.empty-icon[data-v-18834598] {
  width: 48px;
  height: 48px;
  opacity: 0.5;
}
.search-initial[data-v-18834598] {
  padding: 24px;
}
.search-tip[data-v-18834598] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary, #6b7280);
  font-size: 14px;
  margin-bottom: 16px;
}
.search-tip svg[data-v-18834598] {
  width: 16px;
  height: 16px;
}
.search-examples[data-v-18834598] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.example-label[data-v-18834598] {
  font-size: 12px;
  color: var(--text-tertiary, #6b7280);
}
.example-tags[data-v-18834598] {
  display: flex;
  gap: 8px;
}
.example-tag[data-v-18834598] {
  padding: 4px 12px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.1));
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-secondary, #d1d5db);
  cursor: pointer;
  transition: background 0.15s;
}
.example-tag[data-v-18834598]:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.15));
}

/* =========================================
   0. LAYOUT DEL DETALLE DE CONVERSACIÓN
   ========================================= */
.detail-body[data-v-a66f7748] {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* =========================================
   1. ESTILOS DE CONTENIDO DEL EMAIL (HTML/TEXTO)
   ========================================= */
.email-html-content[data-v-a66f7748] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow-x: hidden;
}
.email-html-content[data-v-a66f7748] * {
  max-width: 100%;
}
.email-html-content[data-v-a66f7748] img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  margin: 10px 0;
}
.email-html-content[data-v-a66f7748] table {
  border-collapse: collapse;
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0;
  table-layout: fixed;
}
.email-html-content[data-v-a66f7748] table td,
.email-html-content[data-v-a66f7748] table th {
  padding: 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.email-html-content[data-v-a66f7748] a {
  text-decoration: none;
}
.email-html-content[data-v-a66f7748] a:hover {
  text-decoration: underline;
}
.email-html-content[data-v-a66f7748] p {
  margin: 0 0 10px 0;
}
.email-html-content[data-v-a66f7748] h1,
.email-html-content[data-v-a66f7748] h2,
.email-html-content[data-v-a66f7748] h3,
.email-html-content[data-v-a66f7748] h4,
.email-html-content[data-v-a66f7748] h5,
.email-html-content[data-v-a66f7748] h6 {
  margin: 15px 0 10px 0;
  font-weight: 600;
}
.email-html-content[data-v-a66f7748] ul,
.email-html-content[data-v-a66f7748] ol {
  margin: 10px 0;
  padding-left: 20px;
}
.email-html-content[data-v-a66f7748] blockquote {
  margin: 10px 0;
  padding: 10px 20px;
}
.email-html-content[data-v-a66f7748] pre {
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  max-width: 100%;
}
.email-html-content[data-v-a66f7748] code {
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
}
.email-html-content[data-v-a66f7748] div {
  max-width: 100%;
  overflow-wrap: break-word;
}
.email-text-content[data-v-a66f7748] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow-x: hidden;
}
.email-text-content p[data-v-a66f7748] {
  color: var(--text-primary);
  margin: 0 0 10px 0;
}

/* =========================================
   2. DETALLES Y CABECERAS (VIEWER)
   ========================================= */
.email-details-header[data-v-a66f7748] {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
}
.sender-info-wrapper[data-v-a66f7748] {
  display: flex;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
  max-width: 85%;
}
.sender-info-wrapper[data-v-a66f7748]:hover {
  background-color: var(--bg-hover);
}
.detail-full-fields[data-v-a66f7748] {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-line[data-v-a66f7748] {
  font-size: 13px;
  display: flex;
  gap: 8px;
}
.detail-label[data-v-a66f7748] {
  color: var(--text-tertiary);
  width: 60px;
  flex-shrink: 0;
}
.detail-value-full[data-v-a66f7748] {
  color: var(--text-secondary);
}

/* =========================================
   3. COMPOSE WINDOW & MODALS
   ========================================= */
.modal-overlay[data-v-a66f7748] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Subscribers Modal */
.subscribers-modal-overlay[data-v-a66f7748] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.subscribers-modal[data-v-a66f7748] {
  width: 400px;
  max-height: 500px;
  background-color: var(--bg-primary);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.subscribers-modal .modal-header[data-v-a66f7748] {
  padding: 16px;
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.subscribers-modal .modal-header h3[data-v-a66f7748] {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.subscribers-modal .close-btn[data-v-a66f7748] {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.subscribers-modal .close-btn[data-v-a66f7748]:hover {
  color: var(--text-primary);
}
.subscribers-modal .modal-body[data-v-a66f7748] {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
}
.subscribers-modal .loading-state[data-v-a66f7748],
.subscribers-modal .empty-state[data-v-a66f7748] {
  text-align: center;
  color: var(--text-tertiary);
  padding: 24px;
}
.subscribers-list[data-v-a66f7748] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.subscriber-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 6px;
  background: var(--bg-secondary);
}
.subscriber-avatar[data-v-a66f7748] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.subscriber-info[data-v-a66f7748] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.subscriber-name[data-v-a66f7748] {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 14px;
}
.subscriber-email[data-v-a66f7748] {
  color: var(--text-tertiary);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.subscription-type[data-v-a66f7748] {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg-hover);
  color: var(--text-secondary);
  text-transform: capitalize;
  flex-shrink: 0;
}
.shared-inbox-note[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  margin-top: 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  color: var(--text-secondary);
  font-size: 13px;
}
.shared-inbox-note svg[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.compose-window[data-v-a66f7748] {
  width: 800px;
  height: 650px;
  background-color: var(--bg-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-2xl);
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: visible;
  position: relative;
  border: 1px solid var(--border-primary);
}
.compose-header[data-v-a66f7748] {
  background-color: var(--bg-secondary);
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.compose-title[data-v-a66f7748] {
  color: var(--text-primary);
  font-weight: 600;
  font-size: 14px;
}
.compose-controls[data-v-a66f7748] {
  display: flex;
  gap: 12px;
}
.win-btn[data-v-a66f7748] {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.win-btn[data-v-a66f7748]:hover {
  color: var(--text-primary);
}
.compose-body[data-v-a66f7748] {
  flex: 1;
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  overflow-y: auto;
  min-height: 0;
}
.compose-field[data-v-a66f7748] {
  border-bottom: 1px solid var(--border-primary);
  padding: 8px 0;
  display: flex;
  align-items: center;
  position: relative;
  min-height: 40px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.field-prefix[data-v-a66f7748] {
  color: var(--text-tertiary);
  margin-right: 12px;
  font-size: 14px;
  width: 50px;
}
.chips-container[data-v-a66f7748] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  align-items: center;
}
.email-chip[data-v-a66f7748] {
  background-color: var(--bg-hover);
  color: var(--text-primary);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  border: 1px solid var(--border-primary);
  user-select: none;
}
.sender-chip[data-v-a66f7748] {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary-hover);
  color: var(--color-white);
}
.chip-remove[data-v-a66f7748] {
  margin-left: 6px;
  cursor: pointer;
  color: var(--text-tertiary);
  font-weight: bold;
}
.field-input[data-v-a66f7748] {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  flex: 1;
  min-width: 100px;
  font-size: 14px;
}
.field-actions[data-v-a66f7748] {
  margin-left: auto;
  display: flex;
  gap: 12px;
}
.link-btn[data-v-a66f7748] {
  color: var(--text-tertiary);
  cursor: pointer;
  font-size: 13px;
}
.link-btn[data-v-a66f7748]:hover {
  color: var(--text-primary);
}

/* Autocomplete Dropdown */
.compose-field-autocomplete[data-v-a66f7748] {
  position: relative;
}
.autocomplete-dropdown[data-v-a66f7748] {
  position: absolute;
  top: 100%;
  left: 60px;
  right: 0;
  background: var(--surface-overlay);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
}
.autocomplete-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  gap: 10px;
}
.autocomplete-item[data-v-a66f7748]:hover,
.autocomplete-item.selected[data-v-a66f7748] {
  background: var(--bg-hover);
}
.autocomplete-item-avatar[data-v-a66f7748] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.autocomplete-item-icon[data-v-a66f7748] {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-hover);
  color: var(--text-secondary);
  flex-shrink: 0;
}
.autocomplete-item-icon svg[data-v-a66f7748] {
  width: 18px;
  height: 18px;
}
.autocomplete-item-content[data-v-a66f7748] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.autocomplete-item-name[data-v-a66f7748] {
  font-size: 14px;
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autocomplete-item-email[data-v-a66f7748] {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autocomplete-item-count[data-v-a66f7748] {
  font-size: 12px;
  color: var(--text-tertiary);
}
.autocomplete-item-source[data-v-a66f7748] {
  font-size: 11px;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.subject-input[data-v-a66f7748] {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 14px;
}
.editor-container[data-v-a66f7748] {
  flex: 1;
  padding-top: 15px;
  cursor: text;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  max-height: 350px;
  overflow-y: auto;
}
.editor-body-wrapper[data-v-a66f7748] {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.editor-content[data-v-a66f7748] {
  color: var(--text-primary);
  outline: none;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100px;
}
.signature-container[data-v-a66f7748] {
  margin-top: auto;
  padding-top: 16px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}
.signature-container[data-v-a66f7748] img {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  height: auto;
}

/* ESTILOS VIEJOS DE ATTACHMENTS - COMENTADOS (ahora se usan los componentes AttachmentCard)
.attachments-list {
  border-top: 1px solid #333;
  padding-top: 10px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.att-item {
  background: #2d2d2d;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #ccc;
  border: 1px solid #444;
}

.att-remove {
  background: none;
  border: none;
  color: #ff6b6b;
  cursor: pointer;
  font-weight: bold;
  padding: 0 2px;
}
*/

/* Formatting Bar (Expandable) */
.formatting-bar[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-primary);
}
.format-btn[data-v-a66f7748] {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.format-btn svg[data-v-a66f7748] {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.format-btn[data-v-a66f7748]:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}
.format-btn[data-v-a66f7748]:active {
  transform: scale(0.95);
}
.format-separator[data-v-a66f7748] {
  width: 1px;
  height: 24px;
  background-color: var(--border-primary);
  margin: 0 6px;
}

/* Compose Footer */
.compose-footer[data-v-a66f7748] {
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
}
.footer-left[data-v-a66f7748],
.footer-right[data-v-a66f7748] {
  display: flex;
  align-items: center;
}

/* Toolbar Actions */
.toolbar-actions[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 4px;
}
.toolbar-btn[data-v-a66f7748] {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  position: relative;
}
.toolbar-btn svg[data-v-a66f7748] {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.toolbar-btn[data-v-a66f7748]:hover:not(:disabled) {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}
.toolbar-btn[data-v-a66f7748]:active:not(:disabled) {
  transform: scale(0.95);
}
.toolbar-btn.active[data-v-a66f7748] {
  background-color: var(--accent-primary);
  color: var(--color-white);
}
.toolbar-btn[data-v-a66f7748]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.toolbar-btn-danger[data-v-a66f7748]:hover:not(:disabled) {
  background-color: var(--color-error-bg);
  color: var(--color-error);
}
.toolbar-separator[data-v-a66f7748] {
  width: 1px;
  height: 28px;
  background-color: var(--border-primary);
  margin: 0 4px;
}

/* Toolbar Dropdowns */
.toolbar-dropdown-container[data-v-a66f7748] {
  position: relative;
}
.toolbar-dropdown[data-v-a66f7748] {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  box-shadow: var(--shadow-dropdown);
  z-index: 1000;
  min-width: 220px;
  overflow: hidden;
  animation: dropdownFadeIn-a66f7748 0.15s ease-out;
}
@keyframes dropdownFadeIn-a66f7748 {
from {
    opacity: 0;
    transform: translateY(8px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.dropdown-header[data-v-a66f7748] {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-primary);
}
.dropdown-loading[data-v-a66f7748],
.dropdown-empty[data-v-a66f7748] {
  padding: 16px;
  color: var(--text-tertiary);
  text-align: center;
  font-size: 13px;
}
.dropdown-list[data-v-a66f7748] {
  max-height: 240px;
  overflow-y: auto;
}
.dropdown-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color 0.1s;
}
.dropdown-item[data-v-a66f7748]:hover {
  background-color: var(--bg-hover);
}
.template-name[data-v-a66f7748] {
  color: var(--text-primary);
  font-size: 13px;
}
.template-badge[data-v-a66f7748] {
  background: var(--accent-primary);
  color: var(--color-white);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  font-weight: 500;
}

/* Schedule Dropdown */
.schedule-dropdown[data-v-a66f7748] {
  min-width: 260px;
}
.schedule-form[data-v-a66f7748] {
  padding: 14px;
}
.schedule-row[data-v-a66f7748] {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.schedule-row label[data-v-a66f7748] {
  color: var(--text-tertiary);
  font-size: 13px;
  width: 50px;
}
.schedule-input[data-v-a66f7748] {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}
.schedule-input[data-v-a66f7748]:focus {
  border-color: var(--accent-primary);
}
.schedule-confirm-btn[data-v-a66f7748] {
  width: 100%;
  background: var(--accent-primary);
  color: var(--color-white);
  border: none;
  padding: 10px;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
  transition: opacity 0.15s;
}
.schedule-confirm-btn[data-v-a66f7748]:hover {
  opacity: 0.9;
}
.schedule-note[data-v-a66f7748] {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-tertiary);
  text-align: center;
}

/* Legacy styles (keeping for compatibility) */
.format-tools[data-v-a66f7748] {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tool-btn[data-v-a66f7748] {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-btn[data-v-a66f7748]:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}
.v-separator[data-v-a66f7748] {
  width: 1px;
  height: 20px;
  background-color: var(--border-secondary);
  margin: 0 4px;
}
.send-btn-group[data-v-a66f7748] {
  display: flex;
  align-items: stretch;
  background-color: var(--accent-primary);
  border-radius: 4px;
  position: relative;
}
.btn-send-main[data-v-a66f7748] {
  background: transparent;
  border: none;
  color: var(--color-white);
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.btn-send-main[data-v-a66f7748]:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.1);
}
.btn-send-main[data-v-a66f7748]:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}
.btn-send-split[data-v-a66f7748] {
  display: flex;
  align-items: center;
  padding: 0 8px;
  cursor: pointer;
}
.btn-send-split[data-v-a66f7748]:hover:not(.disabled) {
  background-color: rgba(0, 0, 0, 0.1);
}
.btn-send-split.disabled[data-v-a66f7748] {
  cursor: not-allowed;
  opacity: 0.7;
  pointer-events: none;
}
.send-dropdown[data-v-a66f7748] {
  position: absolute;
  bottom: 100%;
  right: 0;
  background-color: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  min-width: 160px;
  box-shadow: var(--shadow-dropdown);
  margin-bottom: 4px;
  z-index: 1001;
}
.send-option[data-v-a66f7748] {
  padding: 10px 14px;
  color: var(--text-primary);
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.send-option[data-v-a66f7748]:hover {
  background-color: var(--bg-hover);
}

/* --- CONFIRMATION DIALOG --- */
.confirmation-dialog[data-v-a66f7748] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 440px;
  background: var(--surface-overlay);
  border-radius: 12px;
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--border-primary);
  z-index: 2000;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  animation: dialogFadeIn-a66f7748 0.2s ease-out;
}
@keyframes dialogFadeIn-a66f7748 {
from {
    opacity: 0;
    transform: translate(-50%, -48%) scale(0.96);
}
to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
}
.dialog-header[data-v-a66f7748] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--border-primary);
}
.dialog-header-content[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dialog-icon[data-v-a66f7748] {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dialog-icon svg[data-v-a66f7748] {
  width: 20px;
  height: 20px;
  stroke: white;
}
.dialog-header span[data-v-a66f7748] {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 16px;
  letter-spacing: -0.2px;
}
.dialog-close-x[data-v-a66f7748] {
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.dialog-close-x[data-v-a66f7748]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.dialog-body[data-v-a66f7748] {
  padding: 24px 20px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}
.dialog-body p[data-v-a66f7748] {
  margin: 0;
}
.dialog-footer[data-v-a66f7748] {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  background: var(--bg-tertiary);
  border-top: 1px solid var(--border-primary);
}
.confirmation-dialog .btn-secondary[data-v-a66f7748] {
  background: var(--bg-hover);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  padding: 9px 18px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 500;
  transition: all 0.2s ease;
  letter-spacing: -0.1px;
}
.confirmation-dialog .btn-secondary[data-v-a66f7748]:hover {
  background: var(--bg-active);
  border-color: var(--border-secondary);
  transform: translateY(-1px);
}
.confirmation-dialog .btn-secondary[data-v-a66f7748]:active {
  transform: translateY(0);
}
.confirmation-dialog .btn-discard[data-v-a66f7748]:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fca5a5;
}
.confirmation-dialog .btn-primary[data-v-a66f7748] {
  background: var(--accent-primary);
  color: var(--color-white);
  border: none;
  padding: 9px 22px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  transition: all 0.2s ease;
  letter-spacing: -0.1px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}
.confirmation-dialog .btn-primary[data-v-a66f7748]:hover {
  filter: brightness(0.9);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}
.confirmation-dialog .btn-primary[data-v-a66f7748]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

/* =========================================
   4. BANNERS & NOTIFICATIONS
   ========================================= */
.reconnect-banner[data-v-a66f7748] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.banner-content[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.banner-icon[data-v-a66f7748] {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-icon svg[data-v-a66f7748] {
  width: 28px;
  height: 28px;
  fill: white;
}
.banner-message[data-v-a66f7748] {
  flex: 1;
  min-width: 0;
}
.banner-title[data-v-a66f7748] {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.banner-details[data-v-a66f7748] {
  font-size: 13px;
  opacity: 0.95;
  line-height: 1.4;
}
.banner-details strong[data-v-a66f7748] {
  font-weight: 600;
}
.banner-actions[data-v-a66f7748] {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.btn-reconnect[data-v-a66f7748] {
  background-color: white;
  color: #d97706;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-reconnect[data-v-a66f7748]:hover {
  background-color: #fef3c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btn-dismiss[data-v-a66f7748] {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.btn-dismiss[data-v-a66f7748]:hover {
  background: rgba(255, 255, 255, 0.3);
}
.btn-dismiss svg[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  fill: white;
}

/* Adjust app layout when banner is visible */
.app-layout[data-v-a66f7748] {
  position: relative;
}
.reconnect-banner~.sidebar[data-v-a66f7748],
.reconnect-banner~.email-list-col[data-v-a66f7748],
.reconnect-banner~.email-view-col[data-v-a66f7748] {
  margin-top: 56px;
}

/* Auto-update banner */
.update-banner[data-v-a66f7748] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-primary);
  z-index: 10001;
}
.update-banner-content[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-size: 13px;
}
.update-icon[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--accent-primary);
}
.update-text[data-v-a66f7748] {
  color: var(--text-secondary);
  flex: 1;
  min-width: 0;
}
.update-btn[data-v-a66f7748] {
  background: var(--accent-primary);
  color: var(--color-white);
  border: none;
  padding: 4px 14px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.update-btn[data-v-a66f7748]:hover {
  opacity: 0.85;
}
.update-dismiss[data-v-a66f7748] {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.update-dismiss svg[data-v-a66f7748] {
  width: 14px;
  height: 14px;
  stroke: var(--text-tertiary);
  transition: stroke 0.15s ease;
}
.update-dismiss:hover svg[data-v-a66f7748] {
  stroke: var(--text-primary);
}
.update-progress-bar[data-v-a66f7748] {
  width: 100px;
  height: 4px;
  background: var(--bg-active);
  border-radius: 2px;
  overflow: hidden;
}
.update-progress-fill[data-v-a66f7748] {
  height: 100%;
  background: var(--accent-primary);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.update-banner~.reconnect-banner[data-v-a66f7748] {
  top: 38px;
}
.update-banner~.sidebar[data-v-a66f7748],
.update-banner~.email-list-col[data-v-a66f7748],
.update-banner~.email-view-col[data-v-a66f7748] {
  margin-top: 38px;
}
.update-banner~.reconnect-banner~.sidebar[data-v-a66f7748],
.update-banner~.reconnect-banner~.email-list-col[data-v-a66f7748],
.update-banner~.reconnect-banner~.email-view-col[data-v-a66f7748] {
  margin-top: 94px;
}

/* =========================================
   5. DROPDOWNS & MENUS
   ========================================= */
.menu-container[data-v-a66f7748] {
  position: relative;
}
.message-dropdown-menu[data-v-a66f7748] {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  box-shadow: var(--shadow-dropdown);
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
}
.menu-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  color: var(--text-primary);
  font-size: 14px;
  transition: background 0.2s ease;
}
.menu-item[data-v-a66f7748]:hover {
  background: var(--bg-hover);
}
.menu-item.danger[data-v-a66f7748] {
  color: #ff6b6b;
}
.menu-item.danger[data-v-a66f7748]:hover {
  background: rgba(255, 107, 107, 0.1);
}
.menu-icon[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.menu-divider[data-v-a66f7748] {
  height: 1px;
  background: var(--border-primary);
  margin: 4px 0;
}
.message-actions[data-v-a66f7748] {
  position: relative;
}
.from-field[data-v-a66f7748] {
  border-bottom: 1px solid var(--border-primary);
  padding: 8px 0;
}
.from-selector-container[data-v-a66f7748] {
  position: relative;
  flex: 1;
}
.from-selector[data-v-a66f7748] {
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.from-selector[data-v-a66f7748]:hover {
  background: var(--bg-hover);
  border-color: var(--border-secondary);
}
.from-selector-content[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.from-inbox-info[data-v-a66f7748] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.from-inbox-name[data-v-a66f7748] {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.from-inbox-email[data-v-a66f7748] {
  color: var(--text-tertiary);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.from-chevron[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  fill: var(--text-tertiary);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.from-chevron.rotated[data-v-a66f7748] {
  transform: rotate(180deg);
}
.from-dropdown-menu[data-v-a66f7748] {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  box-shadow: var(--shadow-dropdown);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}
.from-dropdown-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid var(--border-primary);
}
.from-dropdown-item[data-v-a66f7748]:last-child {
  border-bottom: none;
}
.from-dropdown-item[data-v-a66f7748]:hover {
  background: var(--bg-hover);
}
.from-dropdown-item.selected[data-v-a66f7748] {
  background: var(--bg-selected);
}
.from-dropdown-item-content[data-v-a66f7748] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  position: relative;
}
.from-dropdown-inbox-name[data-v-a66f7748] {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.from-dropdown-inbox-email[data-v-a66f7748] {
  color: var(--text-tertiary);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.from-dropdown-badge[data-v-a66f7748] {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--accent-primary);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.from-dropdown-check[data-v-a66f7748] {
  width: 20px;
  height: 20px;
  fill: var(--accent-primary);
  flex-shrink: 0;
}
.from-dropdown-menu[data-v-a66f7748]::-webkit-scrollbar {
  width: 8px;
}
.from-dropdown-menu[data-v-a66f7748]::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: 4px;
}
.from-dropdown-menu[data-v-a66f7748]::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
.from-dropdown-menu[data-v-a66f7748]::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* =========================================
   6. EMAIL LIST CARD & HOVER ACTIONS
   ========================================= */
.email-card[data-v-a66f7748] {
  position: relative;
}

/* Contenedor de iconos flotantes */
.card-hover-actions[data-v-a66f7748] {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 10;
}
.email-card:hover .card-hover-actions[data-v-a66f7748] {
  opacity: 1;
  visibility: visible;
}

/* Botones flotantes (Archive/Snooze) */
.action-icon-btn[data-v-a66f7748] {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* SVG Linea (Outline) */
.action-icon-btn svg[data-v-a66f7748] {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Colores específicos Hover */
.action-icon-btn.btn-archive[data-v-a66f7748]:hover {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid #10B981;
}
.action-icon-btn.btn-snooze[data-v-a66f7748]:hover {
  background-color: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
  border: 1px solid #F59E0B;
}
.action-icon-btn.btn-delete[data-v-a66f7748]:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border: 1px solid #EF4444;
}
.action-icon-btn.btn-restore[data-v-a66f7748]:hover {
  background-color: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border: 1px solid #EF4444;
}
.action-icon-btn.btn-reopen[data-v-a66f7748]:hover {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid #10B981;
}
.action-icon-btn.btn-unsnooze[data-v-a66f7748]:hover {
  background-color: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid #f59e0b;
}

/* Botón Compose (New Email) - Estilo morado */
.btn-compose[data-v-a66f7748] {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  background-color: var(--accent-primary);
  color: white !important;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-compose[data-v-a66f7748]:hover {
  background-color: var(--accent-primary-hover, #5558e3);
  transform: scale(1.05);
}
.btn-compose svg[data-v-a66f7748] {
  stroke: white;
}

/* --- ESTILOS PARA BOTONES DEL HEADER --- */

/* Botón Restore in header (Trash) - Rojo */
.btn-restore-header[data-v-a66f7748] {
  background-color: rgba(239, 68, 68, 0.1);
  color: #EF4444;
  border: 1px solid #EF4444;
}
.btn-restore-header[data-v-a66f7748]:hover {
  background-color: #EF4444;
  color: white;
}

/* Botón Reopen in header (Archive) - Verde */
.btn-reopen-header[data-v-a66f7748] {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid #10B981;
}
.btn-reopen-header[data-v-a66f7748]:hover {
  background-color: #10B981;
  color: white;
}

/* Botón Unsnooze in header (Snooze) - Naranja */
.btn-unsnooze-header[data-v-a66f7748] {
  background-color: rgba(245, 158, 11, 0.1);
  color: #f59e0b;
  border: 1px solid #f59e0b;
}
.btn-unsnooze-header[data-v-a66f7748]:hover {
  background-color: #f59e0b;
  color: white;
}

/* Botón Not Spam in header (Spam) - Indigo */
.btn-notspam-header[data-v-a66f7748] {
  background-color: rgba(99, 102, 241, 0.1);
  color: #6366F1;
  border: 1px solid #6366F1;
}
.btn-notspam-header[data-v-a66f7748]:hover {
  background-color: #6366F1;
  color: white;
}

/* Botón Manage Blocked in header (Spam) - Gray/Neutral */
.btn-manage-blocked[data-v-a66f7748] {
  background-color: rgba(107, 114, 128, 0.1);
  color: #6B7280;
  border: 1px solid #6B7280;
}
.btn-manage-blocked[data-v-a66f7748]:hover {
  background-color: #6B7280;
  color: white;
}

/* Smaller Manage Blocked button for list header */
.btn-manage-blocked-small[data-v-a66f7748] {
  padding: 4px 10px;
  font-size: var(--font-size-sm);
  background-color: rgba(107, 114, 128, 0.1);
  color: #6B7280;
  border: 1px solid #6B7280;
  border-radius: var(--radius-base);
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: var(--transition-colors);
}
.btn-manage-blocked-small[data-v-a66f7748]:hover {
  background-color: #6B7280;
  color: white;
}
.btn-manage-blocked-small .icon-svg-inline[data-v-a66f7748] {
  width: 14px;
  height: 14px;
}

/* --- ANIMACIÓN Y DESPLAZAMIENTO AL HACER HOVER --- */

/* Elementos que se mueven o encogen */
.time[data-v-a66f7748],
.attachment-icon-svg[data-v-a66f7748] {
  transition: transform 0.2s ease;
  position: relative;
  z-index: 5;
}

/* Mover hora y clip a la izquierda (espacio para botones) */
.email-card:hover .time[data-v-a66f7748],
.email-card:hover .attachment-icon-svg[data-v-a66f7748] {
  transform: translateX(-42px);
}

/* Recortar textos (padding derecho) */
.email-card:hover .card-preview-row[data-v-a66f7748],
.email-card:hover .participants[data-v-a66f7748],
.email-card:hover .card-subject-text[data-v-a66f7748] {
  padding-right: 42px;
}

/* --- TEXTOS TRUNCADOS (CARD) --- */

/* 1. Línea Superior: Participantes */
.card-top[data-v-a66f7748] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  margin-bottom: 4px;
}
.participants[data-v-a66f7748] {
  font-weight: 500;
  color: var(--text-primary);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 8px;
  display: block;
}

/* Hora (unificada) */
.time[data-v-a66f7748] {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-tertiary);
  /* transition y z-index heredados de la regla agrupada arriba */
}

/* Snooze time - when showing snoozed_until date */
.snooze-time[data-v-a66f7748] {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-warning);
  /* Orange color to distinguish from regular time */
  font-weight: 500;
  white-space: nowrap;
  margin-left: 8px;
}

/* Truncate participants more aggressively when showing snooze time */
.participants.truncated[data-v-a66f7748] {
  max-width: 50%;
  /* Limit to 50% to ensure snooze time is always visible */
}

/* 2. Línea Media: Asunto */
.card-subject[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.card-subject-text[data-v-a66f7748] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  display: block;
}

/* 3. Línea Inferior: Preview */
.card-preview-row[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  min-width: 0;
  overflow: hidden;
}
.preview-avatar[data-v-a66f7748] {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.card-preview[data-v-a66f7748] {
  color: var(--text-tertiary);
  font-size: 13px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  transition: padding-right 0.2s ease;
}

/* Assigned badge */
.card-assigned-badge[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
  padding: 2px 6px;
  background-color: var(--bg-selected);
  border-radius: 4px;
  width: fit-content;
  color: var(--accent-secondary);
  font-size: 11px;
}
.card-assigned-badge svg[data-v-a66f7748] {
  stroke: currentColor;
  flex-shrink: 0;
}

/* --- ESTILOS DEL NUEVO MENÚ HEADER --- */
.header-dropdown-menu[data-v-a66f7748] {
  position: absolute;
  top: 100%;
  left: 0;
  /* Si quieres que se alinee a la derecha usa: right: 0; left: auto; */
  margin-top: 6px;
  background-color: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  min-width: 260px;
  z-index: 2000;
  padding: 6px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.header-menu-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 14px;
  transition: background-color 0.15s ease;
  height: 36px;
}
.header-menu-item[data-v-a66f7748]:hover {
  background-color: var(--bg-hover);
  color: var(--text-primary);
}
.header-menu-icon[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  width: 18px;
  color: var(--text-tertiary);
}
.header-menu-icon svg[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Excepción para iconos que necesitan relleno (fill) en lugar de trazo (stroke) si es necesario */
.header-menu-icon svg path[data-v-a66f7748] {
  /* Forzamos stroke para consistencia visual con el resto de tus iconos */
  fill: none;
  stroke: currentColor;
}
.header-menu-label[data-v-a66f7748] {
  flex: 1;
  white-space: nowrap;
}
.header-menu-shortcut[data-v-a66f7748] {
  color: var(--text-quaternary);
  font-size: 12px;
  margin-left: 12px;
}
.header-menu-icon-right[data-v-a66f7748] {
  color: var(--text-quaternary);
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.header-menu-icon-right svg[data-v-a66f7748] {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
}
.header-menu-divider[data-v-a66f7748] {
  height: 1px;
  background-color: var(--border-primary);
  margin: 4px 0;
}

/* Estado activo del botón trigger */
.icon-btn.active[data-v-a66f7748] {
  background-color: var(--bg-active);
  color: var(--text-primary);
}

/* =========================================
   COLLAPSIBLE INBOX STYLES
   ========================================= */

/* Inbox Group */
.inbox-group[data-v-a66f7748] {
  margin-bottom: 4px;
}

/* Inbox Header (clickable) */
.inbox-header[data-v-a66f7748] {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s;
  user-select: none;
}
.inbox-header[data-v-a66f7748]:hover {
  background-color: var(--bg-hover);
}
.inbox-header.active[data-v-a66f7748] {
  background-color: var(--bg-selected);
}
.inbox-header.disconnected[data-v-a66f7748] {
  opacity: 0.6;
}

/* Expand Icon */
.inbox-expand-icon[data-v-a66f7748] {
  margin-right: 6px;
  display: flex;
  align-items: center;
}
.inbox-expand-icon .chevron-svg[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
  transition: transform 0.2s;
  stroke: var(--text-primary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.inbox-expand-icon .chevron-svg.rotated[data-v-a66f7748] {
  transform: rotate(0deg);
}

/* Inbox Item Icon (in menu) */
.inbox-item-icon[data-v-a66f7748] {
  margin-right: 8px;
  display: flex;
  align-items: center;
  color: var(--text-primary);
}
.inbox-item-icon .nav-svg[data-v-a66f7748] {
  width: 18px;
  height: 18px;
  stroke: var(--text-primary);
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Inbox Item Name (in menu) */
.inbox-item-name[data-v-a66f7748] {
  flex: 1;
  font-weight: 500;
  font-size: 14px;
  color: var(--text-primary);
}

/* Status Badge (desconectada) */
.inbox-status-badge[data-v-a66f7748] {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-error);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}

/* Sync Badge (not syncing) */
.inbox-sync-badge[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-warning);
  margin-left: auto;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  transition: background-color 0.15s ease;
}
.inbox-sync-badge[data-v-a66f7748]:hover {
  background-color: var(--color-warning-bg);
}
.inbox-sync-badge svg[data-v-a66f7748] {
  animation: pulse-a66f7748 2s ease-in-out infinite;
}
@keyframes pulse-a66f7748 {
0%, 100% { opacity: 1;
}
50% { opacity: 0.5;
}
}
.inbox-header.not-syncing .inbox-item-name[data-v-a66f7748] {
  color: var(--color-warning);
}

/* Folders List (nested) */
.inbox-folders[data-v-a66f7748] {
  list-style: none;
  padding: 0;
  margin: 0 0 0 20px;
  animation: slideDown-a66f7748 0.15s ease-out;
}

/* Nav Item (folder item base) */
.nav-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  padding: 6px 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s;
  color: var(--text-primary);
}
.nav-item[data-v-a66f7748]:hover {
  background-color: var(--bg-hover);
}
.nav-item .icon[data-v-a66f7748] {
  margin-right: 8px;
  display: flex;
  align-items: center;
  color: var(--text-primary);
}
.nav-item .icon .nav-svg[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nav-item .label[data-v-a66f7748] {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-primary);
  margin: 0;
  padding: 0;
}
.inbox-folders .folder-item[data-v-a66f7748] {
  padding-left: 8px;
}
.inbox-folders .folder-item.active[data-v-a66f7748] {
  background-color: var(--bg-selected);
  border-left: 3px solid var(--accent-primary);
}
.inbox-folders .folder-item.active .icon[data-v-a66f7748],
.inbox-folders .folder-item.active .label[data-v-a66f7748] {
  color: var(--text-primary);
}
.inbox-folders .folder-item.active .icon .nav-svg[data-v-a66f7748] {
  stroke: var(--text-primary);
}

/* Folder count badge */
.inbox-folders .folder-item .folder-count[data-v-a66f7748] {
  background-color: var(--bg-selected);
  color: var(--accent-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
  margin-left: auto;
}
.inbox-folders .folder-item.active .folder-count[data-v-a66f7748] {
  background-color: var(--bg-active);
  color: var(--text-primary);
}

/* No inboxes message */
.no-inboxes-message[data-v-a66f7748] {
  padding: 20px;
  text-align: center;
  color: var(--text-tertiary);
}
.no-inboxes-message p[data-v-a66f7748] {
  margin-bottom: 12px;
}
.no-inboxes-message button[data-v-a66f7748] {
  padding: 8px 16px;
  background: var(--accent-primary);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.2s;
}
.no-inboxes-message button[data-v-a66f7748]:hover {
  filter: brightness(0.9);
}

/* Animation */
@keyframes slideDown-a66f7748 {
from {
    opacity: 0;
    max-height: 0;
}
to {
    opacity: 1;
    max-height: 500px;
}
}

/* Header Title Group */
.header-title-group[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-folder-name[data-v-a66f7748] {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-tertiary);
  padding: 4px 8px;
  background-color: var(--bg-hover);
  border-radius: 4px;
}

/* Header Tag Icon/Emoji */
.header-tag-emoji[data-v-a66f7748] {
  font-size: 22px;
}
.header-tag-icon[data-v-a66f7748] {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.header-view-icon[data-v-a66f7748] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-secondary);
}

/* Search header styles */
.search-header-content[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.search-header-content h2[data-v-a66f7748] {
  margin: 0;
}
.search-header-query[data-v-a66f7748] {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-primary);
  padding: 2px 8px;
  background-color: var(--bg-selected);
  border-radius: 4px;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.search-header-count[data-v-a66f7748] {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
}
.clear-search-btn[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.clear-search-btn[data-v-a66f7748]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.clear-search-btn svg[data-v-a66f7748] {
  width: 14px;
  height: 14px;
}

/* Filter count badge */
.filter-count[data-v-a66f7748] {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  background: var(--surface-raised);
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
}
.filter-pill.active .filter-count[data-v-a66f7748] {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}
.filter-menu-count[data-v-a66f7748] {
  font-size: 11px;
  color: var(--text-quaternary);
  margin-left: auto;
  margin-right: 8px;
}

/* =========================================
   DRAFT PREVIEW STYLES
   ========================================= */
.draft-preview[data-v-a66f7748] {
  padding: 20px;
  background-color: var(--surface-raised);
  border-radius: 8px;
  margin: 20px;
}
.draft-header[data-v-a66f7748] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-primary);
}
.draft-badge[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-warning);
}
.draft-badge svg[data-v-a66f7748] {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}
.draft-content[data-v-a66f7748] {
  background-color: var(--bg-secondary);
  padding: 20px;
  border-radius: 6px;
}
.draft-field[data-v-a66f7748] {
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}
.draft-field strong[data-v-a66f7748] {
  color: var(--text-tertiary);
  margin-right: 8px;
  min-width: 60px;
  display: inline-block;
}
.draft-body[data-v-a66f7748] {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border-primary);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
}
.btn-primary[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: var(--accent-primary);
  color: var(--color-white);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-primary[data-v-a66f7748]:hover {
  filter: brightness(0.9);
}
.btn-primary svg[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* =========================================
   ESTILOS ADJUNTOS EN COMPOSE (CON SCROLL)
   ========================================= */
.attachments-section-compose[data-v-a66f7748] {
  margin-top: 0;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-primary);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 8px;
}
.attachments-header-compose[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-tertiary);
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 8px;
  padding-left: 2px;
  flex-shrink: 0;
}
.attachment-header-icon[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}


/* Los estilos de attachments están ahora centralizados en main.css */

/* ===== Sidebar Section Headers ===== */
.sidebar-section-header[data-v-a66f7748] {
  padding: 16px 20px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-tertiary);
}

/* ===== Personal Inboxes Section ===== */
.personal-inboxes-section[data-v-a66f7748] {
  margin-bottom: 8px;
}
.personal-inbox-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin: 0 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-radius: 6px;
}
.personal-inbox-item[data-v-a66f7748]:hover {
  background-color: var(--sidebar-hover);
}
.personal-inbox-item.active[data-v-a66f7748] {
  background-color: var(--sidebar-active);
}
.personal-inbox-item.active .inbox-item-name[data-v-a66f7748] {
  color: var(--text-primary);
  font-weight: 500;
}
.personal-inbox-item.active .inbox-item-icon[data-v-a66f7748] {
  color: var(--accent-primary);
}
.personal-inbox-item.disconnected .inbox-item-name[data-v-a66f7748] {
  color: var(--text-tertiary);
}
.personal-inbox-item .inbox-item-icon[data-v-a66f7748] {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.personal-inbox-item .inbox-item-name[data-v-a66f7748] {
  flex: 1;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.personal-inbox-item .inbox-item-name.has-new-activity[data-v-a66f7748] {
  font-weight: 600;
}
.personal-inbox-item .inbox-count[data-v-a66f7748] {
  font-size: 11px;
  padding: 2px 6px;
  background-color: var(--badge-bg);
  color: var(--badge-text);
  border-radius: 10px;
  margin-left: 8px;
}

/* ===== User Folders Section ===== */
.user-folders-section[data-v-a66f7748] {
  margin-bottom: 8px;
}
.user-folder-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  margin: 0 8px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-radius: 6px;
}
.user-folder-item[data-v-a66f7748]:hover {
  background-color: var(--sidebar-hover);
}
.user-folder-item.active[data-v-a66f7748] {
  background-color: var(--sidebar-active);
}
.user-folder-item.active .folder-item-name[data-v-a66f7748] {
  color: var(--text-primary);
  font-weight: 500;
}
.user-folder-item.active .folder-item-icon[data-v-a66f7748] {
  color: var(--accent-primary);
}
.user-folder-item .folder-item-icon[data-v-a66f7748] {
  width: 20px;
  height: 20px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}
.user-folder-item .folder-item-name[data-v-a66f7748] {
  flex: 1;
  font-size: 13px;
  color: var(--text-primary);
}
.user-folder-item .folder-count[data-v-a66f7748] {
  background-color: var(--bg-selected);
  color: var(--accent-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.user-folder-item.active .folder-count[data-v-a66f7748] {
  background-color: var(--bg-active);
  color: var(--text-primary);
}

/* ===== Assigned to me Section ===== */
.assigned-to-me-section[data-v-a66f7748] {
  margin-top: 8px;
  padding: 0 8px;
}
.assigned-to-me-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s;
  color: var(--text-secondary, #9ca3af);
}
.assigned-to-me-item[data-v-a66f7748]:hover {
  background-color: var(--bg-hover);
}
.assigned-to-me-item.active[data-v-a66f7748] {
  background-color: var(--sidebar-active);
  color: var(--accent-primary);
}
.assigned-to-me-item .icon[data-v-a66f7748] {
  margin-right: 8px;
  display: flex;
  align-items: center;
}
.assigned-to-me-item .icon .nav-svg[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}
.assigned-to-me-item .label[data-v-a66f7748] {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  padding: 0;
}
.assigned-to-me-item .assigned-count[data-v-a66f7748] {
  background-color: var(--bg-selected);
  color: var(--accent-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.assigned-to-me-item.active .assigned-count[data-v-a66f7748] {
  background-color: var(--bg-active);
  color: var(--text-primary);
}
.assigned-to-me-item .label.has-new-activity[data-v-a66f7748] {
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}
.assigned-to-me-item.has-activity .label[data-v-a66f7748] {
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

/* ===== Subscribed Section ===== */
.subscribed-section[data-v-a66f7748] {
  margin-top: 4px;
  padding: 0 8px;
}
.subscribed-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s;
  color: var(--text-secondary, #9ca3af);
}
.subscribed-item[data-v-a66f7748]:hover {
  background-color: var(--bg-hover);
}
.subscribed-item.active[data-v-a66f7748] {
  background-color: var(--sidebar-active);
  color: var(--accent-primary);
}
.subscribed-item .icon[data-v-a66f7748] {
  margin-right: 8px;
  display: flex;
  align-items: center;
}
.subscribed-item .icon .nav-svg[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
}
.subscribed-item .label[data-v-a66f7748] {
  flex: 1;
  font-size: 14px;
  font-weight: 400;
  margin: 0;
  padding: 0;
}
.subscribed-item .label.has-new-activity[data-v-a66f7748] {
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}
.subscribed-item .subscribed-count[data-v-a66f7748] {
  background-color: var(--bg-selected);
  color: var(--accent-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.subscribed-item.active .subscribed-count[data-v-a66f7748] {
  background-color: var(--bg-active);
  color: var(--text-primary);
}
.subscribed-item.has-activity .label[data-v-a66f7748] {
  font-weight: 600;
  color: var(--text-primary, #e5e5e5);
}

/* ===== Follow Button Styles ===== */
.follow-btn[data-v-a66f7748] {
  transition: all 0.2s ease;
}
.follow-btn.is-following[data-v-a66f7748] {
  color: var(--accent-primary);
}
.follow-btn.is-following svg[data-v-a66f7748] {
  stroke: var(--accent-primary);
  fill: var(--accent-primary);
}
.follow-btn:not(.is-following) svg[data-v-a66f7748] {
  fill: none;
}

/* ===== Shared Section Styles ===== */
.shared-section[data-v-a66f7748] {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-secondary);
}
.workspace-group[data-v-a66f7748] {
  margin-bottom: 4px;
}
.workspace-header[data-v-a66f7748] {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  gap: 8px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s;
  user-select: none;
}
.workspace-header[data-v-a66f7748]:hover {
  background-color: var(--bg-hover);
}
.workspace-expand-icon[data-v-a66f7748] {
  margin-right: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.workspace-expand-icon .chevron-svg[data-v-a66f7748] {
  width: 14px;
  height: 14px;
  stroke: var(--text-tertiary);
  transition: transform 0.2s;
}
.workspace-expand-icon .chevron-svg.rotated[data-v-a66f7748] {
  transform: rotate(0deg);
}
.workspace-expand-icon .chevron-svg[data-v-a66f7748]:not(.rotated) {
  transform: rotate(-90deg);
}
.workspace-avatar[data-v-a66f7748] {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.workspace-name[data-v-a66f7748] {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.workspace-count[data-v-a66f7748] {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  min-width: 20px;
  text-align: right;
}
.shared-inbox-list[data-v-a66f7748] {
  list-style: none;
  padding: 0;
  margin: 0 0 0 20px;
  animation: slideDown-a66f7748 0.15s ease-out;
}
.shared-inbox-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  padding: 8px 12px 8px 16px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s;
  gap: 8px;
  margin-bottom: 2px;
}
.shared-inbox-item[data-v-a66f7748]:hover {
  background-color: var(--bg-hover);
}
.shared-inbox-item.active[data-v-a66f7748] {
  background-color: var(--sidebar-active);
}
.shared-inbox-item.disconnected[data-v-a66f7748] {
  opacity: 0.6;
}
.shared-inbox-item.not-syncing .shared-inbox-name[data-v-a66f7748] {
  color: var(--color-warning);
}
.shared-inbox-icon[data-v-a66f7748] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shared-inbox-icon .nav-svg[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  stroke: currentColor;
}
.shared-inbox-item.active .shared-inbox-icon .nav-svg[data-v-a66f7748] {
  stroke: var(--text-primary);
}
.shared-inbox-name[data-v-a66f7748] {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.shared-inbox-name.has-new-activity[data-v-a66f7748] {
  font-weight: 600;
  color: var(--text-primary);
}
.shared-inbox-item.active .shared-inbox-name[data-v-a66f7748] {
  color: var(--text-primary);
  font-weight: 500;
}
.shared-inbox-count[data-v-a66f7748] {
  background-color: var(--bg-selected);
  color: var(--accent-secondary);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.shared-inbox-item.active .shared-inbox-count[data-v-a66f7748] {
  background-color: var(--bg-active);
  color: var(--text-primary);
}

/* =========================================
   ASSIGN DROPDOWN STYLES
   ========================================= */
.assign-dropdown-container[data-v-a66f7748] {
  position: relative;
}
.assign-dropdown-overlay[data-v-a66f7748] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
}
.assign-dropdown[data-v-a66f7748] {
  position: fixed;
  width: 280px;
  background: var(--surface-raised, #1f2937);
  border: 1px solid var(--border-secondary, #374151);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  overflow: hidden;
}
.assign-dropdown-header[data-v-a66f7748] {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 16px 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #f3f4f6);
}
.unassign-btn[data-v-a66f7748] {
  background: none;
  border: none;
  color: var(--color-error, #ef4444);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}
.unassign-btn[data-v-a66f7748]:hover {
  background: rgba(239, 68, 68, 0.1);
}
.assign-search-container[data-v-a66f7748] {
  padding: 8px 12px;
}
.assign-search-input[data-v-a66f7748] {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--color-primary, #3b82f6);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary, #f3f4f6);
  outline: none;
  transition: border-color 0.2s, background-color 0.2s;
}
.assign-search-input[data-v-a66f7748]::placeholder {
  color: var(--text-tertiary, #6b7280);
}
.assign-search-input[data-v-a66f7748]:focus {
  border-color: var(--color-primary, #3b82f6);
  background: var(--bg-input-focus, rgba(255, 255, 255, 0.1));
}
.assign-section-divider[data-v-a66f7748] {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.assign-avatar-empty[data-v-a66f7748] {
  background: transparent !important;
  border: 1px dashed var(--border-secondary, #4b5563);
}
.assign-avatar-empty .unassigned-icon[data-v-a66f7748] {
  width: 20px;
  height: 20px;
  fill: var(--text-tertiary, #6b7280);
}
.assign-unassigned-item.is-active[data-v-a66f7748] {
  background: var(--bg-active, rgba(59, 130, 246, 0.1));
}
.assign-dropdown-loading[data-v-a66f7748],
.assign-dropdown-empty[data-v-a66f7748] {
  padding: 20px;
  text-align: center;
  color: var(--text-tertiary, #6b7280);
  font-size: 13px;
}
.assign-dropdown-list[data-v-a66f7748] {
  max-height: 300px;
  overflow-y: auto;
}
.assign-user-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.15s;
}
.assign-user-item[data-v-a66f7748]:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.05));
}
.assign-user-item.is-assigned[data-v-a66f7748] {
  background: var(--bg-active, rgba(59, 130, 246, 0.1));
}
.assign-user-avatar[data-v-a66f7748] {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.assign-user-info[data-v-a66f7748] {
  flex: 1;
  min-width: 0;
}
.assign-user-name[data-v-a66f7748] {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary, #f3f4f6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assign-user-email[data-v-a66f7748] {
  font-size: 11px;
  color: var(--text-tertiary, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assign-check-icon[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--accent-primary, #3b82f6);
  stroke-width: 2;
  flex-shrink: 0;
}

/* =========================================
   MEETING INVITATION CARD STYLES
   ========================================= */
.meeting-invitation-card[data-v-a66f7748] {
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border: 1px solid #bae6fd;
  border-radius: 12px;
  padding: 16px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}
.meeting-card-header[data-v-a66f7748] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.meeting-icon[data-v-a66f7748] {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.meeting-icon svg[data-v-a66f7748] {
  stroke: white;
}
.meeting-title-section[data-v-a66f7748] {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.meeting-label[data-v-a66f7748] {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #3b82f6;
}
.meeting-subject[data-v-a66f7748] {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.3;
}
.meeting-response-badge[data-v-a66f7748] {
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  flex-shrink: 0;
}
.meeting-response-badge.accepted[data-v-a66f7748] {
  background: #dcfce7;
  color: #166534;
}
.meeting-response-badge.declined[data-v-a66f7748] {
  background: #fee2e2;
  color: #991b1b;
}
.meeting-response-badge.tentativelyAccepted[data-v-a66f7748] {
  background: #fef3c7;
  color: #92400e;
}
.meeting-card-body[data-v-a66f7748] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
  padding-left: 52px;
}
.meeting-info-row[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #475569;
  font-size: 13px;
}
.meeting-info-row svg[data-v-a66f7748] {
  stroke: #64748b;
  flex-shrink: 0;
}
.meeting-datetime[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.meeting-separator[data-v-a66f7748] {
  color: #94a3b8;
  font-weight: 500;
}
.meeting-location[data-v-a66f7748] {
  color: #475569;
}
.meeting-organizer[data-v-a66f7748] {
  color: #64748b;
}
.meeting-card-actions[data-v-a66f7748] {
  display: flex;
  gap: 10px;
  padding-left: 52px;
}
.meeting-btn[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.meeting-btn[data-v-a66f7748]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.meeting-btn.accept[data-v-a66f7748] {
  background: #22c55e;
  color: white;
}
.meeting-btn.accept[data-v-a66f7748]:hover:not(:disabled) {
  background: #16a34a;
}
.meeting-btn.accept svg[data-v-a66f7748] {
  stroke: white;
}
.meeting-btn.tentative[data-v-a66f7748] {
  background: #f59e0b;
  color: white;
}
.meeting-btn.tentative[data-v-a66f7748]:hover:not(:disabled) {
  background: #d97706;
}
.meeting-btn.tentative svg[data-v-a66f7748] {
  stroke: white;
}
.meeting-btn.decline[data-v-a66f7748] {
  background: #ef4444;
  color: white;
}
.meeting-btn.decline[data-v-a66f7748]:hover:not(:disabled) {
  background: #dc2626;
}
.meeting-btn.decline svg[data-v-a66f7748] {
  stroke: white;
}
.meeting-loading[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  margin: 16px 0;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #64748b;
  font-size: 13px;
}
.loading-spinner-small[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  border: 2px solid #e2e8f0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin-a66f7748 1s linear infinite;
}
.loading-spinner[data-v-a66f7748] {
  animation: spin-a66f7748 1s linear infinite;
}
@keyframes spin-a66f7748 {
to {
    transform: rotate(360deg);
}
}

/* ===== Tags Styles ===== */
.tags-dropdown-container[data-v-a66f7748] {
  position: relative;
}
.tag-count-badge[data-v-a66f7748] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: var(--bg-selected);
  color: var(--accent-primary);
  font-size: 11px;
  font-weight: 600;
  border-radius: 9px;
  margin-left: 4px;
}
.conversation-tags-bar[data-v-a66f7748] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 16px;
  background: var(--bg-secondary, #1a1a1a);
  border-bottom: 1px solid var(--border-primary, #333);
}

/* ===== Sidebar Tags Section ===== */
.sidebar-tags-section[data-v-a66f7748] {
  padding: 8px 0;
  border-top: 1px solid var(--border-primary, #333);
  margin-top: 8px;
}
.sidebar-tags-header[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  color: var(--text-secondary, #888);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sidebar-tag-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.15s;
  color: var(--text-primary, #e0e0e0);
}
.sidebar-tag-item[data-v-a66f7748]:hover {
  background: var(--bg-hover, #2a2a2a);
}
.sidebar-tag-item.active[data-v-a66f7748] {
  background: var(--sidebar-active);
  color: var(--accent-primary);
}
.sidebar-tag-icon[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 14px;
}
.sidebar-tag-icon svg[data-v-a66f7748] {
  width: 16px;
  height: 16px;
}
.sidebar-tag-name[data-v-a66f7748] {
  flex: 1;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sidebar-tag-count[data-v-a66f7748] {
  font-size: 12px;
  color: var(--text-tertiary, #666);
  padding: 2px 6px;
  background: var(--bg-tertiary, #333);
  border-radius: 10px;
}

/* Tags Groups (Collapsible sections) */
.tags-group[data-v-a66f7748] {
  margin-bottom: 4px;
}
.tags-group-header[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--text-secondary, #888);
  transition: background-color 0.15s, color 0.15s;
  user-select: none;
}
.tags-group-header[data-v-a66f7748]:hover {
  background: var(--bg-hover, #2a2a2a);
  color: var(--text-primary, #e0e0e0);
}
.tags-group-expand-icon[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.tags-group-expand-icon .chevron-svg[data-v-a66f7748] {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform 0.2s ease;
  transform: rotate(-90deg);
}
.tags-group-expand-icon .chevron-svg.rotated[data-v-a66f7748] {
  transform: rotate(0deg);
}
.tags-group-name[data-v-a66f7748] {
  flex: 1;
  font-size: 12px;
  font-weight: 500;
}
.tags-group-count[data-v-a66f7748] {
  font-size: 11px;
  color: var(--text-quaternary, #555);
  padding: 1px 6px;
  background: var(--bg-tertiary, #333);
  border-radius: 8px;
}
.tags-group-items[data-v-a66f7748] {
  padding-left: 8px;
}
.tags-group-items .sidebar-tag-item[data-v-a66f7748] {
  padding-left: 32px;
}
.sidebar-tag-workspace[data-v-a66f7748] {
  font-size: 10px;
  color: var(--text-quaternary, #555);
  background: var(--surface-raised, #333);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: auto;
}

/* =========================================
   COMMENT STYLES
   ========================================= */
.comment-wrapper[data-v-a66f7748] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  margin: 8px 0;
}
.comment-avatar[data-v-a66f7748] {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.comment-body[data-v-a66f7748] {
  flex: 1;
  min-width: 0;
}
.comment-sender-name[data-v-a66f7748] {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #f3f4f6);
  margin-bottom: 4px;
}
.comment-bubble-row[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.comment-bubble[data-v-a66f7748] {
  display: inline-block;
  background: var(--surface-raised);
  padding: 8px 14px;
  border-radius: 12px;
  font-size: 13px;
  color: var(--text-primary);
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px solid var(--border-secondary);
}
.comment-hover-actions[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.comment-wrapper:hover .comment-hover-actions[data-v-a66f7748] {
  opacity: 1;
}
.comment-action-btn[data-v-a66f7748] {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.comment-action-btn[data-v-a66f7748]:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.1));
}
.comment-action-btn svg[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--text-tertiary, #9ca3af);
  stroke-width: 2;
}
.comment-action-btn:hover svg[data-v-a66f7748] {
  stroke: var(--text-primary, #f3f4f6);
}
.reaction-btn-container[data-v-a66f7748] {
  position: relative;
}
.quick-reactions-menu[data-v-a66f7748] {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-dropdown, #1f2937);
  border: 1px solid var(--border-secondary, #374151);
  border-radius: 24px;
  padding: 6px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 100;
  margin-bottom: 8px;
}
.quick-reaction-btn[data-v-a66f7748] {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.quick-reaction-btn[data-v-a66f7748]:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.1));
  transform: scale(1.2);
}
.comment-time[data-v-a66f7748] {
  font-size: 12px;
  color: var(--text-tertiary, #6b7280);
  flex-shrink: 0;
  margin-left: auto;
}
.comment-edit-form[data-v-a66f7748] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.comment-edit-input[data-v-a66f7748] {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--color-primary, #3b82f6);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary, #f3f4f6);
  outline: none;
}
.comment-edit-input[data-v-a66f7748]:focus {
  border-color: var(--color-primary-light, #60a5fa);
  background: var(--bg-input-focus, rgba(255, 255, 255, 0.1));
}
.comment-edit-actions[data-v-a66f7748] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.btn-sm[data-v-a66f7748] {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  border: none;
}
.btn-primary[data-v-a66f7748] {
  background: var(--accent-primary);
  color: var(--color-white);
}
.btn-primary[data-v-a66f7748]:hover:not(:disabled) {
  background: var(--accent-primary-hover);
}
.btn-primary[data-v-a66f7748]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-secondary[data-v-a66f7748] {
  background: var(--bg-tertiary, #374151);
  color: var(--text-secondary, #d1d5db);
}
.btn-secondary[data-v-a66f7748]:hover {
  background: var(--bg-hover, #4b5563);
}

/* Comment Reactions */
.comment-reactions[data-v-a66f7748] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.reaction-badge[data-v-a66f7748] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  background: var(--bg-tertiary, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--border-secondary, #374151);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.reaction-badge[data-v-a66f7748]:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.12));
  border-color: var(--border-hover, #4b5563);
}
.reaction-badge.has-reacted[data-v-a66f7748] {
  background: var(--color-primary-light-bg, rgba(59, 130, 246, 0.15));
  border-color: var(--color-primary, #3b82f6);
}
.reaction-emoji[data-v-a66f7748] {
  font-size: 14px;
  line-height: 1;
}
.reaction-count[data-v-a66f7748] {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary, #d1d5db);
}
.reaction-badge.has-reacted .reaction-count[data-v-a66f7748] {
  color: var(--color-primary, #3b82f6);
}

/* Send comment button */
.send-comment-btn[data-v-a66f7748]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.send-comment-btn[data-v-a66f7748]:not(:disabled):hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.1));
  color: var(--color-primary, #3b82f6);
}

/* =========================================
   LOAD MORE MESSAGES (scroll infinito invertido)
   ========================================= */
.load-more-messages[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: var(--bg-hover);
  border: 1px dashed var(--border-primary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
  color: var(--text-secondary);
  font-size: 13px;
}
.load-more-messages[data-v-a66f7748]:hover {
  background: var(--bg-selected);
  border-color: var(--accent-primary);
  color: var(--accent-primary);
}
.load-more-messages.loading[data-v-a66f7748] {
  cursor: default;
  opacity: 0.7;
}
.load-more-messages .load-more-icon[data-v-a66f7748] {
  width: 16px;
  height: 16px;
}
.load-more-messages .load-more-text[data-v-a66f7748] {
  font-weight: 500;
}
.load-more-messages .loading-spinner-small[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-primary);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin-a66f7748 0.8s linear infinite;
}

/* =========================================
   MESSAGE WRAPPER STYLES
   ========================================= */
.message-wrapper[data-v-a66f7748] {
  margin-bottom: 10px;
}

/* =========================================
   EVENT STYLES
   ========================================= */
.event-wrapper[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px;
  margin: 2px 0;
}
.event-icon[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: var(--text-tertiary, #6b7280);
  stroke-width: 2;
  flex-shrink: 0;
}
.event-text[data-v-a66f7748] {
  font-size: 13px;
  color: var(--text-tertiary, #6b7280);
}
.event-time[data-v-a66f7748] {
  font-size: 12px;
  color: var(--text-tertiary, #6b7280);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.event-wrapper:hover .event-time[data-v-a66f7748] {
  opacity: 1;
}

/* Loading spinner animation for comment sending */
@keyframes spin-a66f7748 {
to { transform: rotate(360deg);
}
}
.loading-spinner[data-v-a66f7748] {
  animation: spin-a66f7748 1s linear infinite;
}

/* =========================================
   MENTION STYLES
   ========================================= */
.comment-input-wrapper[data-v-a66f7748] {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  background: var(--surface-primary);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.comment-input-wrapper[data-v-a66f7748]:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}
.comment-input-wrapper .reply-input[data-v-a66f7748] {
  flex: 1;
  padding: 0;
  border: none;
  background: transparent;
  outline: none;
}
.comment-input-wrapper .reply-input[data-v-a66f7748]::placeholder {
  color: var(--text-tertiary);
}
.comment-input-actions[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.comment-input-actions .icon-btn-sm[data-v-a66f7748] {
  color: var(--text-tertiary);
  transition: color 0.15s ease;
}
.comment-input-actions .icon-btn-sm[data-v-a66f7748]:hover {
  color: var(--text-primary);
}
.comment-input-actions .send-comment-btn[data-v-a66f7748] {
  color: var(--accent-primary);
}
.comment-input-actions .send-comment-btn[data-v-a66f7748]:disabled {
  color: var(--text-tertiary);
  opacity: 0.5;
}
.mention-dropdown[data-v-a66f7748] {
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
  background: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  z-index: 100;
  margin-bottom: 8px;
  max-height: 240px;
  overflow-y: auto;
}
.mention-header[data-v-a66f7748] {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-primary);
}
.mention-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.mention-item[data-v-a66f7748]:hover {
  background: var(--bg-hover);
}
.mention-item[data-v-a66f7748]:last-child {
  border-radius: 0 0 8px 8px;
}
.mention-avatar[data-v-a66f7748] {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-white);
  flex-shrink: 0;
}
.mention-fullname[data-v-a66f7748] {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.mention-username[data-v-a66f7748] {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-left: auto;
}

/* Highlighted mention in comment text */
.comment-mention[data-v-a66f7748] {
  color: var(--accent-primary);
  font-weight: 500;
}

/* Highlighted mention in card preview (use :deep for v-html content) */
.card-preview[data-v-a66f7748] .preview-mention {
  color: var(--accent-primary) !important;
  font-weight: 500;
}

/* =========================================
   COMMENT IMAGE STYLES
   ========================================= */

/* Image preview container before sending */
.comment-image-preview-container[data-v-a66f7748] {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-secondary, #374151);
}
.comment-image-preview-wrapper[data-v-a66f7748] {
  position: relative;
  display: inline-block;
  max-width: 200px;
}
.comment-image-preview-img[data-v-a66f7748] {
  max-width: 200px;
  max-height: 150px;
  border-radius: 8px;
  object-fit: cover;
}
.comment-image-remove-btn[data-v-a66f7748] {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-error, #dc2626);
  border: 2px solid var(--bg-primary, #111827);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: white;
  transition: transform 0.15s ease;
}
.comment-image-remove-btn[data-v-a66f7748]:hover {
  transform: scale(1.1);
}
.comment-image-remove-btn svg[data-v-a66f7748] {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.comment-image-uploading-overlay[data-v-a66f7748] {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: white;
  font-size: 12px;
}
.uploading-spinner[data-v-a66f7748] {
  width: 24px;
  height: 24px;
  animation: spin-a66f7748 1s linear infinite;
}

/* Inline image in comment bubble */
.comment-image-inline[data-v-a66f7748] {
  margin-top: 8px;
  max-width: 300px;
  position: relative;
}
.comment-image-wrapper[data-v-a66f7748] {
  position: relative;
  display: inline-block;
}
.comment-inline-img[data-v-a66f7748] {
  width: 100%;
  max-height: 250px;
  border-radius: 8px;
  object-fit: cover;
  cursor: pointer;
  transition: opacity 0.2s ease;
  display: none; /* Hidden until loaded */
}
.comment-image-wrapper:hover .comment-inline-img[data-v-a66f7748] {
  opacity: 0.95;
}
.comment-image-download-btn[data-v-a66f7748] {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  padding: 0;
}
.comment-image-wrapper:hover .comment-image-download-btn[data-v-a66f7748] {
  display: flex;
}
.comment-image-download-btn[data-v-a66f7748]:hover {
  background: rgba(0, 0, 0, 0.8);
}
.comment-image-download-btn svg[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  stroke: white;
  stroke-width: 2;
  fill: none;
}
.comment-image-loading[data-v-a66f7748] {
  width: 100px;
  height: 80px;
  background: var(--bg-tertiary, #1f2937);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-spinner-sm[data-v-a66f7748] {
  width: 20px;
  height: 20px;
  animation: spin-a66f7748 1s linear infinite;
  stroke: var(--text-tertiary, #6b7280);
}

/* Icon size helper */
.icon-svg-xs[data-v-a66f7748] {
  width: 12px;
  height: 12px;
}

/* Keyframe for spinner animation */
@keyframes spin-a66f7748 {
from { transform: rotate(0deg);
}
to { transform: rotate(360deg);
}
}

/* Undo Send Toast */
.undo-toast[data-v-a66f7748] {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  animation: slideUp-a66f7748 0.2s ease-out;
}
@keyframes slideUp-a66f7748 {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.undo-toast-text[data-v-a66f7748] {
  color: var(--text-primary);
  font-size: 14px;
}
.undo-toast-btn[data-v-a66f7748] {
  background: transparent;
  border: none;
  color: var(--accent-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.undo-toast-btn[data-v-a66f7748]:hover {
  background: rgba(102, 126, 234, 0.1);
}

/* ========== Bulk Action Panel ========== */
.bulk-action-panel[data-v-a66f7748] {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  gap: 16px;
  overflow: hidden;
}
.bulk-action-header[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bulk-count[data-v-a66f7748] {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.bulk-header-links[data-v-a66f7748] {
  display: flex;
  gap: 12px;
}
.bulk-link-btn[data-v-a66f7748] {
  background: none;
  border: none;
  color: var(--accent-primary);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.bulk-link-btn[data-v-a66f7748]:hover {
  background: rgba(102, 126, 234, 0.1);
}
.bulk-action-buttons[data-v-a66f7748] {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bulk-action-btn[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border-secondary);
  border-radius: 6px;
  background: var(--surface-primary);
  color: var(--text-primary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.bulk-action-btn svg[data-v-a66f7748] {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bulk-action-btn[data-v-a66f7748]:hover:not(:disabled) {
  background: var(--surface-hover);
  border-color: var(--border-primary);
}
.bulk-action-btn[data-v-a66f7748]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.bulk-action-btn-danger[data-v-a66f7748]:hover:not(:disabled) {
  color: var(--color-danger, #ef4444);
  border-color: var(--color-danger, #ef4444);
}
.bulk-progress[data-v-a66f7748] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bulk-progress-bar[data-v-a66f7748] {
  flex: 1;
  height: 6px;
  background: var(--surface-tertiary);
  border-radius: 3px;
  overflow: hidden;
}
.bulk-progress-fill[data-v-a66f7748] {
  height: 100%;
  background: var(--accent-primary);
  border-radius: 3px;
  transition: width 0.2s ease;
}
.bulk-progress-text[data-v-a66f7748] {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.bulk-selected-list[data-v-a66f7748] {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bulk-selected-item[data-v-a66f7748] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 6px;
  gap: 8px;
  transition: background 0.15s ease;
}
.bulk-selected-item[data-v-a66f7748]:hover {
  background: var(--surface-hover);
}
.bulk-selected-info[data-v-a66f7748] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bulk-selected-subject[data-v-a66f7748] {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-selected-participants[data-v-a66f7748] {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bulk-selected-remove[data-v-a66f7748] {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
}
.bulk-selected-remove[data-v-a66f7748]:hover {
  color: var(--text-primary);
  background: var(--surface-tertiary);
}

/* =========================================
   1. ESTILOS DE CONTENIDO DEL EMAIL (HTML/TEXTO)
   ========================================= */
.email-html-content[data-v-2a19699a] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow-x: hidden;
}
.email-html-content[data-v-2a19699a] * {
  max-width: 100%;
}
.email-html-content[data-v-2a19699a] img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  margin: 10px 0;
}
.email-html-content[data-v-2a19699a] table {
  border-collapse: collapse;
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0;
  table-layout: fixed;
}
.email-html-content[data-v-2a19699a] table td,
.email-html-content[data-v-2a19699a] table th {
  padding: 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.email-html-content[data-v-2a19699a] a {
  text-decoration: none;
}
.email-html-content[data-v-2a19699a] a:hover {
  text-decoration: underline;
}
.email-html-content[data-v-2a19699a] p {
  margin: 0 0 10px 0;
}
.email-html-content[data-v-2a19699a] h1,
.email-html-content[data-v-2a19699a] h2,
.email-html-content[data-v-2a19699a] h3,
.email-html-content[data-v-2a19699a] h4,
.email-html-content[data-v-2a19699a] h5,
.email-html-content[data-v-2a19699a] h6 {
  margin: 15px 0 10px 0;
  font-weight: 600;
}
.email-html-content[data-v-2a19699a] ul,
.email-html-content[data-v-2a19699a] ol {
  margin: 10px 0;
  padding-left: 20px;
}
.email-html-content[data-v-2a19699a] blockquote {
  margin: 10px 0;
  padding: 10px 20px;
}
.email-html-content[data-v-2a19699a] pre {
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  max-width: 100%;
}
.email-html-content[data-v-2a19699a] code {
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
}
.email-html-content[data-v-2a19699a] div {
  max-width: 100%;
  overflow-wrap: break-word;
}
.email-text-content[data-v-2a19699a] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #ffffff !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow-x: hidden;
}
.email-text-content p[data-v-2a19699a] {
  color: #ffffff !important;
  margin: 0 0 10px 0;
}

/* =========================================
   2. DETALLES Y CABECERAS (VIEWER)
   ========================================= */
.email-details-header[data-v-2a19699a] {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
}
.sender-info-wrapper[data-v-2a19699a] {
  display: flex;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
  max-width: 85%;
}
.sender-info-wrapper[data-v-2a19699a]:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.detail-full-fields[data-v-2a19699a] {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-line[data-v-2a19699a] {
  font-size: 13px;
  display: flex;
  gap: 8px;
}
.detail-label[data-v-2a19699a] {
  color: #888;
  width: 60px;
  flex-shrink: 0;
}
.detail-value-full[data-v-2a19699a] {
  color: #d1d1d1;
}

/* =========================================
   3. COMPOSE WINDOW & MODALS
   ========================================= */
.modal-overlay[data-v-2a19699a] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.compose-window[data-v-2a19699a] {
  width: 800px;
  height: 650px;
  background-color: #1e1e1e;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: visible;
  position: relative;
}
.compose-header[data-v-2a19699a] {
  background-color: #2d2d2d;
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.compose-title[data-v-2a19699a] {
  color: #e0e0e0;
  font-weight: 600;
  font-size: 14px;
}
.compose-controls[data-v-2a19699a] {
  display: flex;
  gap: 12px;
}
.win-btn[data-v-2a19699a] {
  background: none;
  border: none;
  color: #a0a0a0;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.win-btn[data-v-2a19699a]:hover {
  color: white;
}
.compose-body[data-v-2a19699a] {
  flex: 1;
  background-color: #1e1e1e;
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  overflow-y: auto;
}
.compose-field[data-v-2a19699a] {
  border-bottom: 1px solid #333;
  padding: 8px 0;
  display: flex;
  align-items: center;
  position: relative;
  min-height: 40px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.field-prefix[data-v-2a19699a] {
  color: #888;
  margin-right: 12px;
  font-size: 14px;
  width: 50px;
}
.chips-container[data-v-2a19699a] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  align-items: center;
}
.email-chip[data-v-2a19699a] {
  background-color: #444;
  color: #e0e0e0;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  border: 1px solid #555;
  user-select: none;
}
.sender-chip[data-v-2a19699a] {
  background-color: #4f46e5;
  border-color: #4338ca;
  color: white;
}
.chip-remove[data-v-2a19699a] {
  margin-left: 6px;
  cursor: pointer;
  color: #aaa;
  font-weight: bold;
}
.field-input[data-v-2a19699a] {
  background: transparent;
  border: none;
  outline: none;
  color: white;
  flex: 1;
  min-width: 100px;
  font-size: 14px;
}
.field-actions[data-v-2a19699a] {
  margin-left: auto;
  display: flex;
  gap: 12px;
}
.link-btn[data-v-2a19699a] {
  color: #888;
  cursor: pointer;
  font-size: 13px;
}
.link-btn[data-v-2a19699a]:hover {
  color: #fff;
}
.subject-input[data-v-2a19699a] {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: white;
  font-size: 14px;
}
.editor-container[data-v-2a19699a] {
  flex: 1;
  padding-top: 15px;
  cursor: text;
  display: flex;
  flex-direction: column;
}
.editor-content[data-v-2a19699a] {
  flex: 1;
  color: #d1d1d1;
  outline: none;
  font-size: 14px;
  line-height: 1.5;
  min-height: 200px;
}
.attachments-list[data-v-2a19699a] {
  border-top: 1px solid #333;
  padding-top: 10px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.att-item[data-v-2a19699a] {
  background: #2d2d2d;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #ccc;
  border: 1px solid #444;
}
.att-remove[data-v-2a19699a] {
  background: none;
  border: none;
  color: #ff6b6b;
  cursor: pointer;
  font-weight: bold;
  padding: 0 2px;
}
.compose-footer[data-v-2a19699a] {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-left[data-v-2a19699a],
.footer-right[data-v-2a19699a] {
  display: flex;
  align-items: center;
}
.format-tools[data-v-2a19699a] {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tool-btn[data-v-2a19699a] {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-btn[data-v-2a19699a]:hover {
  background-color: #333;
  color: white;
}
.v-separator[data-v-2a19699a] {
  width: 1px;
  height: 20px;
  background-color: #444;
  margin: 0 4px;
}
.send-btn-group[data-v-2a19699a] {
  display: flex;
  align-items: stretch;
  background-color: #6366f1;
  border-radius: 4px;
  position: relative;
}
.btn-send-main[data-v-2a19699a] {
  background: transparent;
  border: none;
  color: white;
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.btn-send-main[data-v-2a19699a]:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.btn-send-split[data-v-2a19699a] {
  display: flex;
  align-items: center;
  padding: 0 8px;
  cursor: pointer;
}
.btn-send-split[data-v-2a19699a]:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.send-dropdown[data-v-2a19699a] {
  position: absolute;
  bottom: 100%;
  right: 0;
  background-color: #2d2d2d;
  border: 1px solid #444;
  border-radius: 4px;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  margin-bottom: 4px;
  z-index: 1001;
}
.send-option[data-v-2a19699a] {
  padding: 10px 14px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.send-option[data-v-2a19699a]:hover {
  background-color: #3d3d3d;
}

/* --- CONFIRMATION DIALOG --- */
.confirmation-dialog[data-v-2a19699a] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background-color: #25262b;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  z-index: 2000;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.dialog-header[data-v-2a19699a] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #333;
}
.dialog-header span[data-v-2a19699a] {
  font-weight: 600;
  color: #fff;
  font-size: 15px;
}
.dialog-close-x[data-v-2a19699a] {
  background: none;
  border: none;
  color: #a0a0a0;
  cursor: pointer;
}
.dialog-close-x[data-v-2a19699a]:hover {
  color: #fff;
}
.dialog-body[data-v-2a19699a] {
  padding: 20px 16px;
  color: #d1d1d1;
  font-size: 14px;
  line-height: 1.5;
}
.dialog-footer[data-v-2a19699a] {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  background-color: #25262b;
}
.btn-secondary[data-v-2a19699a] {
  background-color: #383a40;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.btn-secondary[data-v-2a19699a]:hover {
  background-color: #4a4d55;
}
.btn-primary[data-v-2a19699a] {
  background-color: #6366f1;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.btn-primary[data-v-2a19699a]:hover {
  background-color: #4f46e5;
}

/* =========================================
   4. BANNERS & NOTIFICATIONS
   ========================================= */
.reconnect-banner[data-v-2a19699a] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.banner-content[data-v-2a19699a] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.banner-icon[data-v-2a19699a] {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-icon svg[data-v-2a19699a] {
  width: 28px;
  height: 28px;
  fill: white;
}
.banner-message[data-v-2a19699a] {
  flex: 1;
  min-width: 0;
}
.banner-title[data-v-2a19699a] {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.banner-details[data-v-2a19699a] {
  font-size: 13px;
  opacity: 0.95;
  line-height: 1.4;
}
.banner-details strong[data-v-2a19699a] {
  font-weight: 600;
}
.banner-actions[data-v-2a19699a] {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.btn-reconnect[data-v-2a19699a] {
  background-color: white;
  color: #d97706;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-reconnect[data-v-2a19699a]:hover {
  background-color: #fef3c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btn-dismiss[data-v-2a19699a] {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.btn-dismiss[data-v-2a19699a]:hover {
  background: rgba(255, 255, 255, 0.3);
}
.btn-dismiss svg[data-v-2a19699a] {
  width: 16px;
  height: 16px;
  fill: white;
}

/* Adjust app layout when banner is visible */
.app-layout[data-v-2a19699a] {
  position: relative;
}
.reconnect-banner~.sidebar[data-v-2a19699a],
.reconnect-banner~.email-list-col[data-v-2a19699a],
.reconnect-banner~.email-view-col[data-v-2a19699a] {
  margin-top: 56px;
}

/* =========================================
   5. DROPDOWNS & MENUS
   ========================================= */
.menu-container[data-v-2a19699a] {
  position: relative;
}
.message-dropdown-menu[data-v-2a19699a] {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #2d2d2d;
  border: 1px solid #444;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
}
.menu-item[data-v-2a19699a] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  color: #e0e0e0;
  font-size: 14px;
  transition: background 0.2s ease;
}
.menu-item[data-v-2a19699a]:hover {
  background: #3d3d3d;
}
.menu-item.danger[data-v-2a19699a] {
  color: #ff6b6b;
}
.menu-item.danger[data-v-2a19699a]:hover {
  background: rgba(255, 107, 107, 0.1);
}
.menu-icon[data-v-2a19699a] {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}
.menu-divider[data-v-2a19699a] {
  height: 1px;
  background: #444;
  margin: 4px 0;
}
.message-actions[data-v-2a19699a] {
  position: relative;
}
.from-field[data-v-2a19699a] {
  border-bottom: 1px solid #333;
  padding: 8px 0;
}
.from-selector-container[data-v-2a19699a] {
  position: relative;
  flex: 1;
}
.from-selector[data-v-2a19699a] {
  background: #2d2d2d;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.from-selector[data-v-2a19699a]:hover {
  background: #353535;
  border-color: #555;
}
.from-selector-content[data-v-2a19699a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.from-inbox-info[data-v-2a19699a] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.from-inbox-name[data-v-2a19699a] {
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.from-inbox-email[data-v-2a19699a] {
  color: #888;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.from-chevron[data-v-2a19699a] {
  width: 16px;
  height: 16px;
  fill: #888;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.from-chevron.rotated[data-v-2a19699a] {
  transform: rotate(180deg);
}
.from-dropdown-menu[data-v-2a19699a] {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #2d2d2d;
  border: 1px solid #444;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}
.from-dropdown-item[data-v-2a19699a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid #333;
}
.from-dropdown-item[data-v-2a19699a]:last-child {
  border-bottom: none;
}
.from-dropdown-item[data-v-2a19699a]:hover {
  background: #3d3d3d;
}
.from-dropdown-item.selected[data-v-2a19699a] {
  background: rgba(99, 102, 241, 0.1);
}
.from-dropdown-item-content[data-v-2a19699a] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  position: relative;
}
.from-dropdown-inbox-name[data-v-2a19699a] {
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.from-dropdown-inbox-email[data-v-2a19699a] {
  color: #888;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.from-dropdown-badge[data-v-2a19699a] {
  position: absolute;
  top: 0;
  right: 0;
  background: #6366f1;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.from-dropdown-check[data-v-2a19699a] {
  width: 20px;
  height: 20px;
  fill: #6366f1;
  flex-shrink: 0;
}
.from-dropdown-menu[data-v-2a19699a]::-webkit-scrollbar {
  width: 8px;
}
.from-dropdown-menu[data-v-2a19699a]::-webkit-scrollbar-track {
  background: #1e1e1e;
  border-radius: 4px;
}
.from-dropdown-menu[data-v-2a19699a]::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}
.from-dropdown-menu[data-v-2a19699a]::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* =========================================
   6. EMAIL LIST CARD & HOVER ACTIONS
   ========================================= */
.email-card[data-v-2a19699a] {
  position: relative;
}

/* Contenedor de iconos flotantes */
.card-hover-actions[data-v-2a19699a] {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 10;
}
.email-card:hover .card-hover-actions[data-v-2a19699a] {
  opacity: 1;
  visibility: visible;
}

/* Botones flotantes (Archive/Snooze) */
.action-icon-btn[data-v-2a19699a] {
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: transparent;
  border: 1px solid transparent;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* SVG Linea (Outline) */
.action-icon-btn svg[data-v-2a19699a] {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Colores específicos Hover */
.action-icon-btn.btn-archive[data-v-2a19699a]:hover {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid #10B981;
}
.action-icon-btn.btn-snooze[data-v-2a19699a]:hover {
  background-color: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
  border: 1px solid #F59E0B;
}

/* --- ANIMACIÓN Y DESPLAZAMIENTO AL HACER HOVER --- */

/* Elementos que se mueven o encogen */
.time[data-v-2a19699a],
.attachment-icon-svg[data-v-2a19699a] {
  transition: transform 0.2s ease;
  position: relative;
  z-index: 5;
}

/* Mover hora y clip a la izquierda (espacio para botones) */
.email-card:hover .time[data-v-2a19699a],
.email-card:hover .attachment-icon-svg[data-v-2a19699a] {
  transform: translateX(-42px);
}

/* Recortar textos (padding derecho) */
.email-card:hover .card-preview[data-v-2a19699a],
.email-card:hover .participants[data-v-2a19699a],
.email-card:hover .card-subject-text[data-v-2a19699a] {
  padding-right: 42px;
}

/* --- TEXTOS TRUNCADOS (CARD) --- */

/* 1. Línea Superior: Participantes */
.card-top[data-v-2a19699a] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  margin-bottom: 4px;
}
.participants[data-v-2a19699a] {
  font-weight: 500;
  color: #e0e0e0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 8px;
  display: block;
}

/* Hora (unificada) */
.time[data-v-2a19699a] {
  flex-shrink: 0;
  font-size: 12px;
  color: #888;
  /* transition y z-index heredados de la regla agrupada arriba */
}

/* 2. Línea Media: Asunto */
.card-subject[data-v-2a19699a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.card-subject-text[data-v-2a19699a] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  display: block;
}

/* 3. Línea Inferior: Preview */
.card-preview[data-v-2a19699a] {
  color: #888;
  font-size: 13px;
  margin-top: 2px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  transition: padding-right 0.2s ease;
}

/* --- ESTILOS DEL NUEVO MENÚ HEADER --- */
.header-dropdown-menu[data-v-2a19699a] {
  position: absolute;
  top: 100%;
  left: 0; 
  /* Si quieres que se alinee a la derecha usa: right: 0; left: auto; */
  margin-top: 6px;
  background-color: #1e1e24; /* Color oscuro similar a la imagen */
  border: 1px solid #333;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  min-width: 260px;
  z-index: 2000;
  padding: 6px 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.header-menu-item[data-v-2a19699a] {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  cursor: pointer;
  color: #d1d1d1;
  font-size: 14px;
  transition: background-color 0.15s ease;
  height: 36px;
}
.header-menu-item[data-v-2a19699a]:hover {
  background-color: #32323a;
  color: #fff;
}
.header-menu-icon[data-v-2a19699a] {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  width: 18px;
  color: #a0a0a0;
}
.header-menu-icon svg[data-v-2a19699a] {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Excepción para iconos que necesitan relleno (fill) en lugar de trazo (stroke) si es necesario */
.header-menu-icon svg path[data-v-2a19699a] {
  /* Forzamos stroke para consistencia visual con el resto de tus iconos */
  fill: none; 
  stroke: currentColor;
}
.header-menu-label[data-v-2a19699a] {
  flex: 1;
  white-space: nowrap;
}
.header-menu-shortcut[data-v-2a19699a] {
  color: #666;
  font-size: 12px;
  margin-left: 12px;
}
.header-menu-icon-right[data-v-2a19699a] {
  color: #666;
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.header-menu-icon-right svg[data-v-2a19699a] {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
}
.header-menu-divider[data-v-2a19699a] {
  height: 1px;
  background-color: #333;
  margin: 4px 0;
}

/* Estado activo del botón trigger */
.icon-btn.active[data-v-2a19699a] {
  background-color: #333;
  color: white;
}

/* Undo Send Toast */
.undo-toast[data-v-2a19699a] {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  animation: slideUp-2a19699a 0.2s ease-out;
}
@keyframes slideUp-2a19699a {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.undo-toast-text[data-v-2a19699a] {
  color: var(--text-primary);
  font-size: 14px;
}
.undo-toast-btn[data-v-2a19699a] {
  background: transparent;
  border: none;
  color: var(--accent-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.undo-toast-btn[data-v-2a19699a]:hover {
  background: rgba(102, 126, 234, 0.1);
}

/* =========================================
   1. ESTILOS DE CONTENIDO DEL EMAIL (HTML/TEXTO)
   ========================================= */
.email-html-content[data-v-7023ea5a] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow-x: hidden;
}
.email-html-content[data-v-7023ea5a] * {
  max-width: 100%;
}
.email-html-content[data-v-7023ea5a] img {
  max-width: 100%;
  height: auto;
  display: inline-block;
  margin: 10px 0;
}
.email-html-content[data-v-7023ea5a] table {
  border-collapse: collapse;
  width: 100% !important;
  max-width: 100% !important;
  margin: 10px 0;
  table-layout: fixed;
}
.email-html-content[data-v-7023ea5a] table td,
.email-html-content[data-v-7023ea5a] table th {
  padding: 8px;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.email-html-content[data-v-7023ea5a] a {
  text-decoration: none;
}
.email-html-content[data-v-7023ea5a] a:hover {
  text-decoration: underline;
}
.email-html-content[data-v-7023ea5a] p {
  margin: 0 0 10px 0;
}
.email-html-content[data-v-7023ea5a] h1,
.email-html-content[data-v-7023ea5a] h2,
.email-html-content[data-v-7023ea5a] h3,
.email-html-content[data-v-7023ea5a] h4,
.email-html-content[data-v-7023ea5a] h5,
.email-html-content[data-v-7023ea5a] h6 {
  margin: 15px 0 10px 0;
  font-weight: 600;
}
.email-html-content[data-v-7023ea5a] ul,
.email-html-content[data-v-7023ea5a] ol {
  margin: 10px 0;
  padding-left: 20px;
}
.email-html-content[data-v-7023ea5a] blockquote {
  margin: 10px 0;
  padding: 10px 20px;
}
.email-html-content[data-v-7023ea5a] pre {
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  max-width: 100%;
}
.email-html-content[data-v-7023ea5a] code {
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
}
.email-html-content[data-v-7023ea5a] div {
  max-width: 100%;
  overflow-wrap: break-word;
}
.email-text-content[data-v-7023ea5a] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #ffffff !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  overflow-x: hidden;
}
.email-text-content p[data-v-7023ea5a] {
  color: #ffffff !important;
  margin: 0 0 10px 0;
}

/* =========================================
   2. DETALLES Y CABECERAS (VIEWER)
   ========================================= */
.email-details-header[data-v-7023ea5a] {
  display: flex;
  justify-content: space-between;
  padding: 8px 16px;
}
.sender-info-wrapper[data-v-7023ea5a] {
  display: flex;
  gap: 12px;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
  max-width: 85%;
}
.sender-info-wrapper[data-v-7023ea5a]:hover {
  background-color: rgba(255, 255, 255, 0.08);
}
.detail-full-fields[data-v-7023ea5a] {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-line[data-v-7023ea5a] {
  font-size: 13px;
  display: flex;
  gap: 8px;
}
.detail-label[data-v-7023ea5a] {
  color: #888;
  width: 60px;
  flex-shrink: 0;
}
.detail-value-full[data-v-7023ea5a] {
  color: #d1d1d1;
}

/* =========================================
   3. COMPOSE WINDOW & MODALS
   ========================================= */
.modal-overlay[data-v-7023ea5a] {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.compose-window[data-v-7023ea5a] {
  width: 800px;
  height: 650px;
  background-color: #1e1e1e;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow: visible;
  position: relative;
}
.compose-header[data-v-7023ea5a] {
  background-color: #2d2d2d;
  padding: 8px 16px;
  border-radius: 8px 8px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.compose-title[data-v-7023ea5a] {
  color: #e0e0e0;
  font-weight: 600;
  font-size: 14px;
}
.compose-controls[data-v-7023ea5a] {
  display: flex;
  gap: 12px;
}
.win-btn[data-v-7023ea5a] {
  background: none;
  border: none;
  color: #a0a0a0;
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.win-btn[data-v-7023ea5a]:hover {
  color: white;
}
.compose-body[data-v-7023ea5a] {
  flex: 1;
  background-color: #1e1e1e;
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  overflow-y: auto;
}
.compose-field[data-v-7023ea5a] {
  border-bottom: 1px solid #333;
  padding: 8px 0;
  display: flex;
  align-items: center;
  position: relative;
  min-height: 40px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.field-prefix[data-v-7023ea5a] {
  color: #888;
  margin-right: 12px;
  font-size: 14px;
  width: 50px;
}
.chips-container[data-v-7023ea5a] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  align-items: center;
}
.email-chip[data-v-7023ea5a] {
  background-color: #444;
  color: #e0e0e0;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  display: flex;
  align-items: center;
  border: 1px solid #555;
  user-select: none;
}
.sender-chip[data-v-7023ea5a] {
  background-color: #4f46e5;
  border-color: #4338ca;
  color: white;
}
.chip-remove[data-v-7023ea5a] {
  margin-left: 6px;
  cursor: pointer;
  color: #aaa;
  font-weight: bold;
}
.field-input[data-v-7023ea5a] {
  background: transparent;
  border: none;
  outline: none;
  color: white;
  flex: 1;
  min-width: 100px;
  font-size: 14px;
}
.field-actions[data-v-7023ea5a] {
  margin-left: auto;
  display: flex;
  gap: 12px;
}
.link-btn[data-v-7023ea5a] {
  color: #888;
  cursor: pointer;
  font-size: 13px;
}
.link-btn[data-v-7023ea5a]:hover {
  color: #fff;
}
.subject-input[data-v-7023ea5a] {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: white;
  font-size: 14px;
}
.editor-container[data-v-7023ea5a] {
  flex: 1;
  padding-top: 15px;
  cursor: text;
  display: flex;
  flex-direction: column;
}
.editor-content[data-v-7023ea5a] {
  flex: 1;
  color: #d1d1d1;
  outline: none;
  font-size: 14px;
  line-height: 1.5;
  min-height: 200px;
}
.attachments-list[data-v-7023ea5a] {
  border-top: 1px solid #333;
  padding-top: 10px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.att-item[data-v-7023ea5a] {
  background: #2d2d2d;
  padding: 4px 8px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #ccc;
  border: 1px solid #444;
}
.att-remove[data-v-7023ea5a] {
  background: none;
  border: none;
  color: #ff6b6b;
  cursor: pointer;
  font-weight: bold;
  padding: 0 2px;
}
.compose-footer[data-v-7023ea5a] {
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-left[data-v-7023ea5a],
.footer-right[data-v-7023ea5a] {
  display: flex;
  align-items: center;
}
.format-tools[data-v-7023ea5a] {
  display: flex;
  gap: 8px;
  align-items: center;
}
.tool-btn[data-v-7023ea5a] {
  background: none;
  border: none;
  color: #aaa;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tool-btn[data-v-7023ea5a]:hover {
  background-color: #333;
  color: white;
}
.v-separator[data-v-7023ea5a] {
  width: 1px;
  height: 20px;
  background-color: #444;
  margin: 0 4px;
}
.send-btn-group[data-v-7023ea5a] {
  display: flex;
  align-items: stretch;
  background-color: #6366f1;
  border-radius: 4px;
  position: relative;
}
.btn-send-main[data-v-7023ea5a] {
  background: transparent;
  border: none;
  color: white;
  padding: 8px 20px;
  font-weight: 600;
  cursor: pointer;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
}
.btn-send-main[data-v-7023ea5a]:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.btn-send-split[data-v-7023ea5a] {
  display: flex;
  align-items: center;
  padding: 0 8px;
  cursor: pointer;
}
.btn-send-split[data-v-7023ea5a]:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.send-dropdown[data-v-7023ea5a] {
  position: absolute;
  bottom: 100%;
  right: 0;
  background-color: #2d2d2d;
  border: 1px solid #444;
  border-radius: 4px;
  min-width: 160px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  margin-bottom: 4px;
  z-index: 1001;
}
.send-option[data-v-7023ea5a] {
  padding: 10px 14px;
  color: white;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.send-option[data-v-7023ea5a]:hover {
  background-color: #3d3d3d;
}

/* --- CONFIRMATION DIALOG --- */
.confirmation-dialog[data-v-7023ea5a] {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background-color: #25262b;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  z-index: 2000;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.dialog-header[data-v-7023ea5a] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #333;
}
.dialog-header span[data-v-7023ea5a] {
  font-weight: 600;
  color: #fff;
  font-size: 15px;
}
.dialog-close-x[data-v-7023ea5a] {
  background: none;
  border: none;
  color: #a0a0a0;
  cursor: pointer;
}
.dialog-close-x[data-v-7023ea5a]:hover {
  color: #fff;
}
.dialog-body[data-v-7023ea5a] {
  padding: 20px 16px;
  color: #d1d1d1;
  font-size: 14px;
  line-height: 1.5;
}
.dialog-footer[data-v-7023ea5a] {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 16px;
  background-color: #25262b;
}
.btn-secondary[data-v-7023ea5a] {
  background-color: #383a40;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.btn-secondary[data-v-7023ea5a]:hover {
  background-color: #4a4d55;
}
.btn-primary[data-v-7023ea5a] {
  background-color: #6366f1;
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
}
.btn-primary[data-v-7023ea5a]:hover {
  background-color: #4f46e5;
}

/* =========================================
   4. BANNERS & NOTIFICATIONS
   ========================================= */
.reconnect-banner[data-v-7023ea5a] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.banner-content[data-v-7023ea5a] {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  max-width: 1400px;
  margin: 0 auto;
}
.banner-icon[data-v-7023ea5a] {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-icon svg[data-v-7023ea5a] {
  width: 28px;
  height: 28px;
  fill: white;
}
.banner-message[data-v-7023ea5a] {
  flex: 1;
  min-width: 0;
}
.banner-title[data-v-7023ea5a] {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}
.banner-details[data-v-7023ea5a] {
  font-size: 13px;
  opacity: 0.95;
  line-height: 1.4;
}
.banner-details strong[data-v-7023ea5a] {
  font-weight: 600;
}
.banner-actions[data-v-7023ea5a] {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.btn-reconnect[data-v-7023ea5a] {
  background-color: white;
  color: #d97706;
  border: none;
  padding: 8px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-reconnect[data-v-7023ea5a]:hover {
  background-color: #fef3c7;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btn-dismiss[data-v-7023ea5a] {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  padding: 6px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}
.btn-dismiss[data-v-7023ea5a]:hover {
  background: rgba(255, 255, 255, 0.3);
}
.btn-dismiss svg[data-v-7023ea5a] {
  width: 16px;
  height: 16px;
  fill: white;
}

/* Adjust app layout when banner is visible */
.app-layout[data-v-7023ea5a] {
  position: relative;
}
.reconnect-banner~.sidebar[data-v-7023ea5a],
.reconnect-banner~.email-list-col[data-v-7023ea5a],
.reconnect-banner~.email-view-col[data-v-7023ea5a] {
  margin-top: 56px;
}

/* =========================================
   5. DROPDOWNS & MENUS
   ========================================= */
.menu-container[data-v-7023ea5a] {
  position: relative;
}
.message-dropdown-menu[data-v-7023ea5a] {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: #2d2d2d;
  border: 1px solid #444;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
}
.menu-item[data-v-7023ea5a] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  color: #e0e0e0;
  font-size: 14px;
  transition: background 0.2s ease;
}
.menu-item[data-v-7023ea5a]:hover {
  background: #3d3d3d;
}
.menu-item.danger[data-v-7023ea5a] {
  color: #ff6b6b;
}
.menu-item.danger[data-v-7023ea5a]:hover {
  background: rgba(255, 107, 107, 0.1);
}
.menu-icon[data-v-7023ea5a] {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}
.menu-divider[data-v-7023ea5a] {
  height: 1px;
  background: #444;
  margin: 4px 0;
}
.message-actions[data-v-7023ea5a] {
  position: relative;
}
.from-field[data-v-7023ea5a] {
  border-bottom: 1px solid #333;
  padding: 8px 0;
}
.from-selector-container[data-v-7023ea5a] {
  position: relative;
  flex: 1;
}
.from-selector[data-v-7023ea5a] {
  background: #2d2d2d;
  border: 1px solid #444;
  border-radius: 6px;
  padding: 10px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.from-selector[data-v-7023ea5a]:hover {
  background: #353535;
  border-color: #555;
}
.from-selector-content[data-v-7023ea5a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.from-inbox-info[data-v-7023ea5a] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.from-inbox-name[data-v-7023ea5a] {
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.from-inbox-email[data-v-7023ea5a] {
  color: #888;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.from-chevron[data-v-7023ea5a] {
  width: 16px;
  height: 16px;
  fill: #888;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.from-chevron.rotated[data-v-7023ea5a] {
  transform: rotate(180deg);
}
.from-dropdown-menu[data-v-7023ea5a] {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #2d2d2d;
  border: 1px solid #444;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  max-height: 300px;
  overflow-y: auto;
  z-index: 1000;
}
.from-dropdown-item[data-v-7023ea5a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid #333;
}
.from-dropdown-item[data-v-7023ea5a]:last-child {
  border-bottom: none;
}
.from-dropdown-item[data-v-7023ea5a]:hover {
  background: #3d3d3d;
}
.from-dropdown-item.selected[data-v-7023ea5a] {
  background: rgba(99, 102, 241, 0.1);
}
.from-dropdown-item-content[data-v-7023ea5a] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
  position: relative;
}
.from-dropdown-inbox-name[data-v-7023ea5a] {
  color: #e0e0e0;
  font-size: 14px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.from-dropdown-inbox-email[data-v-7023ea5a] {
  color: #888;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.from-dropdown-badge[data-v-7023ea5a] {
  position: absolute;
  top: 0;
  right: 0;
  background: #6366f1;
  color: white;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.from-dropdown-check[data-v-7023ea5a] {
  width: 20px;
  height: 20px;
  fill: #6366f1;
  flex-shrink: 0;
}
.from-dropdown-menu[data-v-7023ea5a]::-webkit-scrollbar {
  width: 8px;
}
.from-dropdown-menu[data-v-7023ea5a]::-webkit-scrollbar-track {
  background: #1e1e1e;
  border-radius: 4px;
}
.from-dropdown-menu[data-v-7023ea5a]::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}
.from-dropdown-menu[data-v-7023ea5a]::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* =========================================
   6. EMAIL LIST CARD & HOVER ACTIONS
   ========================================= */
.email-card[data-v-7023ea5a] {
  position: relative;
}






/* SVG Linea (Outline) */
.action-icon-btn svg[data-v-7023ea5a] {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Colores específicos Hover */
.action-icon-btn.btn-archive[data-v-7023ea5a]:hover {
  background-color: rgba(16, 185, 129, 0.1);
  color: #10B981;
  border: 1px solid #10B981;
}
.action-icon-btn.btn-snooze[data-v-7023ea5a]:hover {
  background-color: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
  border: 1px solid #F59E0B;
}

/* --- ANIMACIÓN Y DESPLAZAMIENTO AL HACER HOVER --- */

/* Elementos que se mueven o encogen */
.time[data-v-7023ea5a],
.attachment-icon-svg[data-v-7023ea5a] {
  transition: transform 0.2s ease;
  position: relative;
  z-index: 5;
}



/* Recortar textos (padding derecho) */
.email-card:hover .card-preview[data-v-7023ea5a],
.email-card:hover .participants[data-v-7023ea5a],
.email-card:hover .card-subject-text[data-v-7023ea5a] {
  padding-right: 42px;
}

/* --- TEXTOS TRUNCADOS (CARD) --- */

/* 1. Línea Superior: Participantes */
.card-top[data-v-7023ea5a] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 0;
  margin-bottom: 4px;
}
.participants[data-v-7023ea5a] {
  font-weight: 500;
  color: #e0e0e0;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  margin-right: 8px;
  display: block;
}



/* 2. Línea Media: Asunto */
.card-subject[data-v-7023ea5a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.card-subject-text[data-v-7023ea5a] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  display: block;
}

/* Undo Send Toast */
.undo-toast[data-v-7023ea5a] {
  position: fixed;
  bottom: 24px;
  left: 24px;
  background: var(--surface-overlay);
  border: 1px solid var(--border-secondary);
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  z-index: 10000;
  animation: slideUp-7023ea5a 0.2s ease-out;
}
@keyframes slideUp-7023ea5a {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.undo-toast-text[data-v-7023ea5a] {
  color: var(--text-primary);
  font-size: 14px;
}
.undo-toast-btn[data-v-7023ea5a] {
  background: transparent;
  border: none;
  color: var(--accent-primary);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.undo-toast-btn[data-v-7023ea5a]:hover {
  background: rgba(102, 126, 234, 0.1);
}

.oauth-callback[data-v-88475994] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #1a1a1a;
}
.loading[data-v-88475994] {
  text-align: center;
  color: #e0e0e0;
  font-size: 16px;
}

.admin-layout[data-v-173cbe68] {
  display: flex;
  height: 100vh;
  background: #1a1a1a;
  color: #fff;
}
.sidebar[data-v-173cbe68] {
  width: 260px;
  background: #0f0f0f;
  border-right: 1px solid #2a2a2a;
  display: flex;
  flex-direction: column;
}
.sidebar-header[data-v-173cbe68] {
  padding: 24px 20px;
  border-bottom: 1px solid #2a2a2a;
}
.sidebar-header h1[data-v-173cbe68] {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 12px;
}
.btn-back[data-v-173cbe68] {
  background: #2a2a2a;
  border: none;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 13px;
  color: #999;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}
.btn-back[data-v-173cbe68]:hover {
  background: #3a3a3a;
  color: #fff;
}
.sidebar-nav[data-v-173cbe68] {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
}
.nav-item[data-v-173cbe68] {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 4px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  color: #999;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.nav-item[data-v-173cbe68]:hover {
  background: #1a1a1a;
  color: #fff;
}
.nav-item.active[data-v-173cbe68] {
  background: #4a9eff;
  color: #fff;
}
.nav-icon[data-v-173cbe68] {
  font-size: 18px;
}
.nav-label[data-v-173cbe68] {
  font-weight: 500;
}
.sidebar-footer[data-v-173cbe68] {
  padding: 20px;
  border-top: 1px solid #2a2a2a;
}
.btn-logout[data-v-173cbe68] {
  width: 100%;
  background: #3a1a1a;
  border: 1px solid #5a2a2a;
  border-radius: 6px;
  padding: 10px;
  font-size: 13px;
  color: #ff6b6b;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-logout[data-v-173cbe68]:hover {
  background: #4a2a2a;
}
.main-content[data-v-173cbe68] {
  flex: 1;
  overflow-y: auto;
  padding: 32px;
}

.manage-page[data-v-b230c467] {
  max-width: 1200px;
}
.page-header[data-v-b230c467] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}
.page-header h1[data-v-b230c467] {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}
.page-header p[data-v-b230c467] {
  font-size: 14px;
  color: #999;
}
.btn-primary[data-v-b230c467] {
  background: #4a9eff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary[data-v-b230c467]:hover {
  background: #3a8eef;
}
.error-banner[data-v-b230c467] {
  background: #3a1a1a;
  border: 1px solid #5a2a2a;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #ff6b6b;
  font-size: 14px;
}
.loading-state[data-v-b230c467] {
  text-align: center;
  padding: 60px 20px;
}
.spinner[data-v-b230c467] {
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
  border: 3px solid #2a2a2a;
  border-top-color: #4a9eff;
  border-radius: 50%;
  animation: spin-b230c467 1s linear infinite;
}
@keyframes spin-b230c467 {
to { transform: rotate(360deg);
}
}
.table-container[data-v-b230c467] {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
}
.data-table[data-v-b230c467] {
  width: 100%;
  border-collapse: collapse;
}
.data-table thead[data-v-b230c467] {
  background: #1a1a1a;
}
.data-table th[data-v-b230c467] {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #999;
  border-bottom: 1px solid #2a2a2a;
}
.data-table td[data-v-b230c467] {
  padding: 12px 16px;
  font-size: 14px;
  color: #e0e0e0;
  border-bottom: 1px solid #2a2a2a;
}
.data-table tbody tr[data-v-b230c467]:hover {
  background: #1a1a1a;
}
.data-table tbody tr:last-child td[data-v-b230c467] {
  border-bottom: none;
}
.empty-state[data-v-b230c467] {
  text-align: center;
  color: #666;
  padding: 40px 20px;
}
.actions[data-v-b230c467] {
  display: flex;
  gap: 8px;
}
.btn-edit[data-v-b230c467], .btn-delete[data-v-b230c467] {
  padding: 6px 12px;
  font-size: 13px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-edit[data-v-b230c467] {
  background: #2a2a2a;
  color: #4a9eff;
}
.btn-edit[data-v-b230c467]:hover {
  background: #3a3a3a;
}
.btn-delete[data-v-b230c467] {
  background: #3a1a1a;
  color: #ff6b6b;
}
.btn-delete[data-v-b230c467]:hover {
  background: #4a2a2a;
}

/* Modal */
.modal-overlay[data-v-b230c467] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal[data-v-b230c467] {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header[data-v-b230c467] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #2a2a2a;
}
.modal-header h2[data-v-b230c467] {
  font-size: 20px;
  font-weight: 600;
}
.btn-close[data-v-b230c467] {
  background: none;
  border: none;
  font-size: 32px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
}
.btn-close[data-v-b230c467]:hover {
  color: #fff;
}
.modal-form[data-v-b230c467] {
  padding: 24px;
}
.form-group[data-v-b230c467] {
  margin-bottom: 20px;
}
.form-group label[data-v-b230c467] {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #e0e0e0;
  margin-bottom: 8px;
}
.form-group input[data-v-b230c467] {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  color: #fff;
}
.form-group input[data-v-b230c467]:focus {
  outline: none;
  border-color: #4a9eff;
}
.error-message[data-v-b230c467] {
  background: #3a1a1a;
  border: 1px solid #5a2a2a;
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
  color: #ff6b6b;
  margin-bottom: 20px;
}
.modal-actions[data-v-b230c467] {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.btn-secondary[data-v-b230c467] {
  background: #2a2a2a;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #999;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary[data-v-b230c467]:hover {
  background: #3a3a3a;
  color: #fff;
}

.manage-page[data-v-a98e8446] {
  max-width: 1200px;
}
.page-header[data-v-a98e8446] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}
.page-header h1[data-v-a98e8446] {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}
.page-header p[data-v-a98e8446] {
  font-size: 14px;
  color: #999;
}
.btn-primary[data-v-a98e8446] {
  background: #4a9eff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary[data-v-a98e8446]:hover {
  background: #3a8eef;
}
.error-banner[data-v-a98e8446] {
  background: #3a1a1a;
  border: 1px solid #5a2a2a;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #ff6b6b;
  font-size: 14px;
}
.loading-state[data-v-a98e8446] {
  text-align: center;
  padding: 60px 20px;
}
.spinner[data-v-a98e8446] {
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
  border: 3px solid #2a2a2a;
  border-top-color: #4a9eff;
  border-radius: 50%;
  animation: spin-a98e8446 1s linear infinite;
}
@keyframes spin-a98e8446 {
to { transform: rotate(360deg);
}
}
.table-container[data-v-a98e8446] {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
}
.data-table[data-v-a98e8446] {
  width: 100%;
  border-collapse: collapse;
}
.data-table thead[data-v-a98e8446] {
  background: #1a1a1a;
}
.data-table th[data-v-a98e8446] {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #999;
  border-bottom: 1px solid #2a2a2a;
}
.data-table td[data-v-a98e8446] {
  padding: 12px 16px;
  font-size: 14px;
  color: #e0e0e0;
  border-bottom: 1px solid #2a2a2a;
}
.data-table tbody tr[data-v-a98e8446]:hover {
  background: #1a1a1a;
}
.data-table tbody tr:last-child td[data-v-a98e8446] {
  border-bottom: none;
}
.empty-state[data-v-a98e8446] {
  text-align: center;
  color: #666;
  padding: 40px 20px;
}
.actions[data-v-a98e8446] {
  display: flex;
  gap: 8px;
}
.btn-edit[data-v-a98e8446], .btn-delete[data-v-a98e8446] {
  padding: 6px 12px;
  font-size: 13px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-edit[data-v-a98e8446] {
  background: #2a2a2a;
  color: #4a9eff;
}
.btn-edit[data-v-a98e8446]:hover {
  background: #3a3a3a;
}
.btn-delete[data-v-a98e8446] {
  background: #3a1a1a;
  color: #ff6b6b;
}
.btn-delete[data-v-a98e8446]:hover {
  background: #4a2a2a;
}

/* Modal */
.modal-overlay[data-v-a98e8446] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal[data-v-a98e8446] {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header[data-v-a98e8446] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #2a2a2a;
}
.modal-header h2[data-v-a98e8446] {
  font-size: 20px;
  font-weight: 600;
}
.btn-close[data-v-a98e8446] {
  background: none;
  border: none;
  font-size: 32px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
}
.btn-close[data-v-a98e8446]:hover {
  color: #fff;
}
.modal-form[data-v-a98e8446] {
  padding: 24px;
}
.form-group[data-v-a98e8446] {
  margin-bottom: 20px;
}
.form-group label[data-v-a98e8446] {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #e0e0e0;
  margin-bottom: 8px;
}
.form-group input[data-v-a98e8446] {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  color: #fff;
}
.form-group input[data-v-a98e8446]:focus {
  outline: none;
  border-color: #4a9eff;
}
.error-message[data-v-a98e8446] {
  background: #3a1a1a;
  border: 1px solid #5a2a2a;
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
  color: #ff6b6b;
  margin-bottom: 20px;
}
.modal-actions[data-v-a98e8446] {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.btn-secondary[data-v-a98e8446] {
  background: #2a2a2a;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #999;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary[data-v-a98e8446]:hover {
  background: #3a3a3a;
  color: #fff;
}

.manage-page[data-v-dec67263] {
  max-width: 1400px;
}
.page-header[data-v-dec67263] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 32px;
}
.page-header h1[data-v-dec67263] {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}
.page-header p[data-v-dec67263] {
  font-size: 14px;
  color: #999;
}
.error-banner[data-v-dec67263] {
  background: #3a1a1a;
  border: 1px solid #5a2a2a;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #ff6b6b;
  font-size: 14px;
}
.loading-state[data-v-dec67263] {
  text-align: center;
  padding: 60px 20px;
}
.spinner[data-v-dec67263] {
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
  border: 3px solid #2a2a2a;
  border-top-color: #4a9eff;
  border-radius: 50%;
  animation: spin-dec67263 1s linear infinite;
}
@keyframes spin-dec67263 {
to { transform: rotate(360deg);
}
}
.table-container[data-v-dec67263] {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  overflow-x: auto;
}
.data-table[data-v-dec67263] {
  width: 100%;
  border-collapse: collapse;
}
.data-table thead[data-v-dec67263] {
  background: #1a1a1a;
}
.data-table th[data-v-dec67263] {
  padding: 12px 16px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: #999;
  border-bottom: 1px solid #2a2a2a;
}
.data-table td[data-v-dec67263] {
  padding: 12px 16px;
  font-size: 14px;
  color: #e0e0e0;
  border-bottom: 1px solid #2a2a2a;
}
.data-table tbody tr[data-v-dec67263]:hover {
  background: #1a1a1a;
}
.data-table tbody tr:last-child td[data-v-dec67263] {
  border-bottom: none;
}
.empty-state[data-v-dec67263] {
  text-align: center;
  color: #666;
  padding: 40px 20px;
}
.status-badge[data-v-dec67263] {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.status-active[data-v-dec67263] {
  background: #1a3a1a;
  color: #6bff6b;
}
.status-inactive[data-v-dec67263] {
  background: #3a1a1a;
  color: #ff6b6b;
}
.actions[data-v-dec67263] {
  display: flex;
  gap: 8px;
}
.btn-edit[data-v-dec67263], .btn-delete[data-v-dec67263] {
  padding: 6px 12px;
  font-size: 13px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-edit[data-v-dec67263] {
  background: #2a2a2a;
  color: #4a9eff;
}
.btn-edit[data-v-dec67263]:hover {
  background: #3a3a3a;
}
.btn-delete[data-v-dec67263] {
  background: #3a1a1a;
  color: #ff6b6b;
}
.btn-delete[data-v-dec67263]:hover {
  background: #4a2a2a;
}

/* Modal */
.modal-overlay[data-v-dec67263] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal[data-v-dec67263] {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header[data-v-dec67263] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid #2a2a2a;
}
.modal-header h2[data-v-dec67263] {
  font-size: 20px;
  font-weight: 600;
}
.btn-close[data-v-dec67263] {
  background: none;
  border: none;
  font-size: 32px;
  color: #999;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
}
.btn-close[data-v-dec67263]:hover {
  color: #fff;
}
.modal-form[data-v-dec67263] {
  padding: 24px;
}
.form-row[data-v-dec67263] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}
.form-group[data-v-dec67263] {
  margin-bottom: 20px;
}
.form-group label[data-v-dec67263] {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #e0e0e0;
  margin-bottom: 8px;
}
.form-group input[data-v-dec67263],
.form-group select[data-v-dec67263] {
  width: 100%;
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  color: #fff;
}
.form-group input[data-v-dec67263]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-group input[data-v-dec67263]:focus,
.form-group select[data-v-dec67263]:focus {
  outline: none;
  border-color: #4a9eff;
}
.checkbox-label[data-v-dec67263] {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.checkbox-label input[type="checkbox"][data-v-dec67263] {
  width: auto;
  cursor: pointer;
}
.error-message[data-v-dec67263] {
  background: #3a1a1a;
  border: 1px solid #5a2a2a;
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
  color: #ff6b6b;
  margin-bottom: 20px;
}
.modal-actions[data-v-dec67263] {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.btn-primary[data-v-dec67263], .btn-secondary[data-v-dec67263] {
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary[data-v-dec67263] {
  background: #4a9eff;
  color: #fff;
}
.btn-primary[data-v-dec67263]:hover {
  background: #3a8eef;
}
.btn-secondary[data-v-dec67263] {
  background: #2a2a2a;
  color: #999;
}
.btn-secondary[data-v-dec67263]:hover {
  background: #3a3a3a;
  color: #fff;
}

.manage-page[data-v-d40dce4c] {
  max-width: 1400px;
}
.page-header[data-v-d40dce4c] {
  margin-bottom: 32px;
}
.page-header h1[data-v-d40dce4c] {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 4px;
}
.page-header p[data-v-d40dce4c] {
  font-size: 14px;
  color: #999;
}
.grid[data-v-d40dce4c] {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 24px;
}
.card[data-v-d40dce4c] {
  background: #0f0f0f;
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  padding: 24px;
}
.card h2[data-v-d40dce4c] {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #2a2a2a;
}
.invitation-form[data-v-d40dce4c] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.form-group[data-v-d40dce4c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label[data-v-d40dce4c] {
  font-size: 13px;
  font-weight: 500;
  color: #e0e0e0;
}
.form-group input[data-v-d40dce4c],
.form-group select[data-v-d40dce4c] {
  background: #1a1a1a;
  border: 1px solid #2a2a2a;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 14px;
  color: #fff;
}
.form-group input[data-v-d40dce4c]:focus,
.form-group select[data-v-d40dce4c]:focus {
  outline: none;
  border-color: #4a9eff;
}
.form-group select[data-v-d40dce4c] {
  cursor: pointer;
}
.error-message[data-v-d40dce4c] {
  background: #3a1a1a;
  border: 1px solid #5a2a2a;
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
  color: #ff6b6b;
}
.success-message[data-v-d40dce4c] {
  background: #1a3a1a;
  border: 1px solid #2a5a2a;
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
  color: #6bff6b;
}
.btn-primary[data-v-d40dce4c] {
  background: #4a9eff;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary[data-v-d40dce4c]:hover:not(:disabled) {
  background: #3a8eef;
}
.btn-primary[data-v-d40dce4c]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.invitations-list[data-v-d40dce4c] {
  min-height: 400px;
}
.loading-state[data-v-d40dce4c] {
  text-align: center;
  padding: 60px 20px;
}
.spinner[data-v-d40dce4c] {
  width: 40px;
  height: 40px;
  margin: 0 auto 20px;
  border: 3px solid #2a2a2a;
  border-top-color: #4a9eff;
  border-radius: 50%;
  animation: spin-d40dce4c 1s linear infinite;
}
@keyframes spin-d40dce4c {
to { transform: rotate(360deg);
}
}
.empty-state[data-v-d40dce4c] {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}
.invitations-table[data-v-d40dce4c] {
  overflow-x: auto;
}
.invitations-table table[data-v-d40dce4c] {
  width: 100%;
  border-collapse: collapse;
}
.invitations-table th[data-v-d40dce4c] {
  text-align: left;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #999;
  border-bottom: 1px solid #2a2a2a;
}
.invitations-table td[data-v-d40dce4c] {
  padding: 12px;
  font-size: 13px;
  color: #e0e0e0;
  border-bottom: 1px solid #2a2a2a;
}
.invitations-table tbody tr[data-v-d40dce4c]:hover {
  background: #1a1a1a;
}
.invitations-table tbody tr:last-child td[data-v-d40dce4c] {
  border-bottom: none;
}
.status-badge[data-v-d40dce4c] {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.status-pending[data-v-d40dce4c] {
  background: #1a3a5a;
  color: #4a9eff;
}
.status-used[data-v-d40dce4c] {
  background: #1a3a1a;
  color: #6bff6b;
}
.status-expired[data-v-d40dce4c] {
  background: #3a1a1a;
  color: #ff6b6b;
}
.btn-delete-small[data-v-d40dce4c] {
  background: #3a1a1a;
  border: none;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 12px;
  color: #ff6b6b;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-delete-small[data-v-d40dce4c]:hover {
  background: #4a2a2a;
}
@media (max-width: 1200px) {
.grid[data-v-d40dce4c] {
    grid-template-columns: 1fr;
}
}

.manage-inboxes[data-v-b0c52df8] {
  padding: 2rem;
  max-width: 1400px;
  margin: 0 auto;
}
.page-header[data-v-b0c52df8] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}
.page-header h1[data-v-b0c52df8] {
  margin: 0;
  font-size: 2rem;
  color: #333;
}
.btn-primary[data-v-b0c52df8] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary[data-v-b0c52df8]:hover {
  background: #5568d3;
}
.btn-primary .icon[data-v-b0c52df8] {
  font-size: 1.2rem;
}
.alert[data-v-b0c52df8] {
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.alert-error[data-v-b0c52df8] {
  background: #fee;
  color: #c33;
  border: 1px solid #fcc;
}
.alert-info[data-v-b0c52df8] {
  background: #e7f3ff;
  color: #0066cc;
  border: 1px solid #99ccff;
  padding: 1rem;
  border-radius: 8px;
  margin-bottom: 1.5rem;
}
.btn-close[data-v-b0c52df8] {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: inherit;
  padding: 0;
  width: 30px;
  height: 30px;
}
.loading[data-v-b0c52df8] {
  text-align: center;
  padding: 3rem;
}
.spinner[data-v-b0c52df8] {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #667eea;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin-b0c52df8 1s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes spin-b0c52df8 {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
.inboxes-grid[data-v-b0c52df8] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 1.5rem;
}
.empty-state[data-v-b0c52df8] {
  grid-column: 1 / -1;
  text-align: center;
  padding: 4rem 2rem;
  color: #999;
}
.empty-state p[data-v-b0c52df8] {
  margin: 0.5rem 0;
  font-size: 1.1rem;
}
.empty-state .hint[data-v-b0c52df8] {
  color: #bbb;
  font-size: 0.95rem;
}
.inbox-card[data-v-b0c52df8] {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s;
  border-left: 4px solid #667eea;
}
.inbox-card[data-v-b0c52df8]:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.inbox-card.status-disconnected[data-v-b0c52df8] {
  border-left-color: #999;
  opacity: 0.7;
}
.inbox-card.status-error[data-v-b0c52df8] {
  border-left-color: #e53e3e;
}
.card-header[data-v-b0c52df8] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}
.inbox-info h3[data-v-b0c52df8] {
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
  color: #333;
}
.inbox-info .email[data-v-b0c52df8] {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}
.status-badge[data-v-b0c52df8] {
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}
.status-badge.status-connected[data-v-b0c52df8] {
  background: #d4edda;
  color: #155724;
}
.status-badge.status-disconnected[data-v-b0c52df8] {
  background: #e2e8f0;
  color: #4a5568;
}
.status-badge.status-error[data-v-b0c52df8] {
  background: #f8d7da;
  color: #721c24;
}
.status-badge.status-syncing[data-v-b0c52df8] {
  background: #d1ecf1;
  color: #0c5460;
}
.card-body[data-v-b0c52df8] {
  margin-bottom: 1rem;
}
.info-row[data-v-b0c52df8] {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.9rem;
}
.info-row .label[data-v-b0c52df8] {
  color: #666;
  font-weight: 500;
}
.info-row .value[data-v-b0c52df8] {
  color: #333;
}
.card-actions[data-v-b0c52df8] {
  display: flex;
  gap: 0.75rem;
}
.btn-secondary[data-v-b0c52df8],
.btn-danger[data-v-b0c52df8] {
  flex: 1;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 6px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary[data-v-b0c52df8] {
  background: #e2e8f0;
  color: #4a5568;
}
.btn-secondary[data-v-b0c52df8]:hover:not(:disabled) {
  background: #cbd5e0;
}
.btn-secondary[data-v-b0c52df8]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-danger[data-v-b0c52df8] {
  background: #fed7d7;
  color: #c53030;
}
.btn-danger[data-v-b0c52df8]:hover {
  background: #fc8181;
  color: white;
}

/* Modal Styles */
.modal-overlay[data-v-b0c52df8] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-content[data-v-b0c52df8] {
  background: white;
  border-radius: 12px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-header[data-v-b0c52df8] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #eee;
}
.modal-header h2[data-v-b0c52df8] {
  margin: 0;
  font-size: 1.5rem;
}
.modal-body[data-v-b0c52df8] {
  padding: 1.5rem;
}
.info-text[data-v-b0c52df8] {
  color: #666;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.connection-options[data-v-b0c52df8] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.option-card[data-v-b0c52df8] {
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}
.option-card[data-v-b0c52df8]:not(.disabled):hover {
  border-color: #667eea;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
  transform: translateY(-2px);
}
.option-card.disabled[data-v-b0c52df8] {
  opacity: 0.5;
  cursor: not-allowed;
}
.option-card .icon[data-v-b0c52df8] {
  font-size: 3rem;
  margin-bottom: 0.5rem;
}
.option-card h3[data-v-b0c52df8] {
  margin: 0.5rem 0;
  font-size: 1.1rem;
}
.option-card p[data-v-b0c52df8] {
  margin: 0;
  color: #666;
  font-size: 0.9rem;
}
.connecting-state[data-v-b0c52df8] {
  text-align: center;
  padding: 2rem;
}
.connecting-state .spinner[data-v-b0c52df8] {
  margin: 0 auto 1rem;
}

/* General styles */
.settings-panel[data-v-408d4709] { display: flex; flex-direction: column; gap: 24px; width: 100%; padding: 30px 40px;
}
.settings-header[data-v-408d4709] { border-bottom: 1px solid var(--border-secondary); padding-bottom: 20px; margin-bottom: 10px;
}
.settings-header h1[data-v-408d4709] { font-size: 24px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; margin-top: 0;
}
.settings-header .subtitle[data-v-408d4709] { font-size: 14px; color: var(--text-tertiary); margin: 0;
}
.tags-controls[data-v-408d4709] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;
}
.search-box[data-v-408d4709] { position: relative; width: 320px;
}
.search-icon[data-v-408d4709] { position: absolute; top: 50%; left: 12px; transform: translateY(-50%); color: var(--text-quaternary); display: flex;
}
.search-input[data-v-408d4709] { width: 100%; background: var(--bg-input); border: 1px solid var(--border-input); color: var(--text-primary); padding: 10px 14px 10px 38px; border-radius: var(--radius-base); font-size: 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input[data-v-408d4709]:focus { border-color: var(--border-input-focus); box-shadow: 0 0 0 3px rgba(155, 135, 245, 0.15);
}
.btn-primary[data-v-408d4709] { background-color: var(--accent-primary); color: white; border: none; padding: 10px 24px; border-radius: var(--radius-base); cursor: pointer; font-size: 13px; font-weight: 500; transition: background 0.2s, transform 0.15s; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.btn-primary[data-v-408d4709]:hover { background-color: var(--accent-primary-hover); transform: translateY(-1px); box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.15);
}
.loading-state[data-v-408d4709] { padding: 40px 20px; text-align: center; color: var(--text-tertiary);
}
.tags-section[data-v-408d4709] { margin-bottom: 32px;
}
.tags-list-container[data-v-408d4709] { border: 1px solid var(--border-secondary); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm);
}
.tags-list-header[data-v-408d4709] { display: flex; background: var(--surface-raised); padding: 12px 20px; border-bottom: 1px solid var(--border-secondary); font-size: 12px; font-weight: 600; color: var(--text-quaternary); text-transform: uppercase; letter-spacing: 0.5px;
}

/* Column layout */
.col-name[data-v-408d4709] { flex: 1; display: flex; align-items: center; gap: 12px;
}
.col-date[data-v-408d4709] { width: 140px; text-align: right; font-size: 13px; color: var(--text-tertiary);
}
.col-actions[data-v-408d4709] { width: 140px; display: flex; justify-content: flex-end; gap: 12px;
}
.tag-item[data-v-408d4709] { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid var(--border-tertiary); background: var(--surface-base); transition: background-color 0.15s;
}
.tag-item[data-v-408d4709]:last-child { border-bottom: none;
}
.tag-item[data-v-408d4709]:hover { background: var(--bg-hover);
}
.tag-icon-wrapper[data-v-408d4709] { display: flex;
}
.tag-emoji[data-v-408d4709] { font-size: 16px;
}
.tag-name[data-v-408d4709] { font-size: 14px; color: var(--text-primary); font-weight: 500;
}
.subtags-count[data-v-408d4709] { font-size: 11px; color: var(--text-quaternary); background: var(--surface-raised); padding: 3px 8px; border-radius: var(--radius-full); border: 1px solid var(--border-tertiary);
}
.edit-input[data-v-408d4709] {
  flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--accent-primary);
  color: var(--text-primary);
  padding: 6px 10px;
  border-radius: var(--radius-base);
  font-size: 14px;
  outline: none;
}
.action-btn[data-v-408d4709] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--surface-raised);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.action-btn[data-v-408d4709]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}
.action-btn--danger[data-v-408d4709]:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: #ef4444;
}
.action-btn--save[data-v-408d4709] {
  color: #10b981;
  border-color: #10b981;
}
.action-btn--save[data-v-408d4709]:hover {
  background: rgba(16, 185, 129, 0.1);
}
.action-btn--cancel[data-v-408d4709]:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: #ef4444;
}
.empty-state[data-v-408d4709] { padding: 40px 20px; text-align: center;
}
.empty-text-state[data-v-408d4709] { color: var(--text-quaternary);
}
.empty-text-state p[data-v-408d4709] { margin: 8px 0;
}
.v3-body-inner{scroll-behavior:smooth;scrollbar-color:#393d3f rgba(0,0,0,.1);scrollbar-width:thin}.v3-body-inner::-webkit-scrollbar{width:8px}.v3-body-inner::-webkit-scrollbar-track{background-color:transparent}.v3-body-inner::-webkit-scrollbar-thumb{display:none;background:rgba(0,0,0,.3);border-radius:5px}.v3-body-inner:hover::-webkit-scrollbar-thumb{display:block}.v3-emoji-picker{height:320px;width:280px;box-shadow:0 2px 10px #0003;border-radius:10px;margin:0 auto;box-sizing:border-box;display:flex;flex-direction:column;text-align:left}.v3-emoji-picker *{box-sizing:border-box}.v3-emoji-picker .v3-header{padding:15px 15px 13px;border-bottom:1px solid}.v3-emoji-picker .v3-header .v3-groups{display:flex}.v3-emoji-picker .v3-header .v3-groups .v3-group{flex-grow:1;padding:0;margin:0;border:none;background:none;font-size:23px;cursor:pointer;position:relative;display:block;opacity:.7;transition:.2s}.v3-emoji-picker .v3-header .v3-groups .v3-group.v3-is-hidden{display:none}.v3-emoji-picker .v3-header .v3-groups .v3-group:first-child,.v3-emoji-picker .v3-header .v3-groups .v3-group:last-child{flex-grow:0}.v3-emoji-picker .v3-header .v3-groups .v3-group:hover{opacity:1}.v3-emoji-picker .v3-header .v3-groups .v3-group span{display:flex;align-items:center;justify-content:center}.v3-emoji-picker .v3-header .v3-groups .v3-group span img{display:block;width:1em;height:auto}.v3-emoji-picker .v3-spacing{height:11px}.v3-emoji-picker .v3-search input{width:100%;display:block;height:26px;padding:0 10px;border:1px solid;border-radius:3px;font-size:12px;transition:.2s}.v3-emoji-picker .v3-search input:focus{outline:none}.v3-emoji-picker .v3-body{padding:0 0 15px 11px;min-height:0;flex-grow:1}.v3-emoji-picker .v3-body .v3-body-inner{flex-grow:1;min-height:0;overflow-y:auto;overflow-x:hidden;height:100%;padding-right:11px}.v3-emoji-picker .v3-body .v3-body-inner .v3-group h5{margin:0;top:0;padding:7px 0 3px 4px;z-index:2}.v3-emoji-picker .v3-body .v3-body-inner .v3-group h5.v3-sticky{position:sticky}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis{display:flex;font-size:18px;flex-wrap:wrap}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button{cursor:pointer;border:none;background:none;margin:0;text-align:center;display:flex;align-items:center;justify-content:center;flex-basis:12.5%;max-width:12.5%;flex-grow:1;padding:0;font-size:22px;position:relative}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button:after{content:"";width:100%;padding-bottom:100%}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button span{display:flex;align-items:center;justify-content:center}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button img{max-width:100%;padding:4px}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button span,.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button img{position:absolute;top:0;left:0;width:100%;height:100%}.v3-emoji-picker .v3-body .v3-body-inner.is-mac .v3-emojis button{font-family:"Apple Color Emoji"}.v3-emoji-picker .v3-footer{font-size:14px;border-top:1px solid #dddddd;padding:15px;display:flex;align-items:center;justify-content:space-between;position:relative}.v3-emoji-picker .v3-footer .v3-tone,.v3-emoji-picker .v3-footer .v3-foot-left{display:flex;align-items:center}.v3-emoji-picker .v3-footer .v3-tone img,.v3-emoji-picker .v3-footer .v3-foot-left img{width:20px;display:block}.v3-emoji-picker .v3-footer .v3-tone>span:first-child,.v3-emoji-picker .v3-footer .v3-foot-left>span:first-child{margin-right:6px}.v3-emoji-picker .v3-footer .v3-foot-left>span.v3-text{max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.v3-emoji-picker .v3-footer .v3-tone{border:none;padding:0;background:none;cursor:pointer;display:inline-flex;align-items:center}.v3-emoji-picker .v3-footer .v3-tone>span{display:inline-flex;vertical-align:top}.v3-emoji-picker .v3-footer .v3-tone .v3-text{font-size:13px}.v3-emoji-picker .v3-footer .v3-tone .v3-icon{display:inline-flex;height:15px;width:15px;vertical-align:middle;align-self:center;border:2px solid rgba(0,0,0,.2)}.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-neutral{background-color:#ffd225}.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fb{background-color:#ffdfbd}.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fc{background-color:#e9c197}.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fd{background-color:#c88e62}.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3fe{background-color:#a86637}.v3-emoji-picker .v3-footer .v3-tone .v3-icon.v3-tone-1f3ff{background-color:#60463a}.v3-emoji-picker .v3-footer .v3-tone .is-mac span{font-family:"Apple Color Emoji"}.v3-skin-tones{position:absolute;height:100%;width:60%;top:0;left:0;display:flex;align-items:center;justify-content:flex-end;padding:0 15px;opacity:0;visibility:hidden;transition:.2s;border-radius:0 0 10px 10px}.v3-skin-tones.v3-is-open{opacity:1;visibility:visible}.v3-skin-tones .v3-skin-tone{display:inline-block;height:15px;width:25px;border:none;padding:0;cursor:pointer;transition:0ms}.v3-skin-tones .v3-skin-tone:hover{transform:scale(1.1);transition:.2s}.v3-skin-tones .v3-skin-tone-neutral{color:#ffd225;background-color:#ffd225}.v3-skin-tones .v3-skin-tone-1f3fb{color:#ffdfbd;background-color:#ffdfbd}.v3-skin-tones .v3-skin-tone-1f3fc{color:#e9c197;background-color:#e9c197}.v3-skin-tones .v3-skin-tone-1f3fd{color:#c88e62;background-color:#c88e62}.v3-skin-tones .v3-skin-tone-1f3fe{color:#a86637;background-color:#a86637}.v3-skin-tones .v3-skin-tone-1f3ff{color:#60463a;background-color:#60463a}.v3-input-emoji-picker *{box-sizing:border-box}.v3-input-emoji-picker .v3-input-picker-root{position:relative}.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-input,.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-textarea{width:100%;height:40px;border:1px solid #999;padding-left:15px}.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-textarea{min-height:80px;resize:vertical}.v3-input-emoji-picker .v3-input-picker-root .v3-emoji-picker-textarea+.v3-input-picker-wrap .v3-input-picker-icon{top:auto;bottom:5px}.v3-input-emoji-picker .v3-input-picker-root .v3-input-picker-wrap .v3-input-picker-icon{display:inline-flex;position:absolute;right:5px;top:50%;transform:translateY(-50%);font-size:24px;border:none;background:none;padding:0 5px;cursor:pointer}.v3-input-emoji-picker .v3-input-picker-root .v3-input-picker-wrap .v3-input-picker-icon img{display:block;width:1em;height:1em}.v3-input-emoji-picker .v3-input-picker-root .v3-input-picker-wrap .v3-emoji-picker{opacity:0;visibility:hidden;transition:.2s}.v3-input-emoji-picker .v3-input-picker-root .v3-input-picker-wrap.v3-picker-is-open .v3-emoji-picker{opacity:1;visibility:visible;z-index:999}.v3-emoji-picker{--v3-picker-bg: #ffffff;--v3-picker-fg: #000000;--v3-picker-border: #dddddd;--v3-picker-input-bg: var(--v3-picker-bg);--v3-picker-input-border: #cccccc;--v3-picker-input-focus-border: #000000;--v3-group-image-filter: none;--v3-picker-emoji-hover: #f7f7f7;background:var(--v3-picker-bg);color:var(--v3-picker-fg)}.v3-emoji-picker .v3-footer,.v3-emoji-picker .v3-header{border-color:var(--v3-picker-border)}.v3-emoji-picker .v3-groups{filter:var(--v3-group-image-filter)}.v3-emoji-picker .v3-tone{color:var(--v3-picker-fg)}.v3-emoji-picker .v3-search input{background:var(--v3-picker-input-bg);border-color:var(--v3-picker-input-border);color:inherit}.v3-emoji-picker .v3-search input:focus{border-color:var(--v3-picker-input-focus-border)}.v3-emoji-picker .v3-body .v3-body-inner .v3-group h5,.v3-emoji-picker .v3-skin-tones{background:var(--v3-picker-bg)}.v3-emoji-picker .v3-body .v3-body-inner .v3-group .v3-emojis button:hover{background:var(--v3-picker-emoji-hover, #f7f7f7)}@media (prefers-color-scheme: dark){.v3-emoji-picker.v3-color-theme-auto{--v3-picker-bg: #000000;--v3-picker-fg: #ffffff;--v3-picker-border: #333333;--v3-picker-input-bg: #222222;--v3-picker-input-border: #444444;--v3-picker-input-focus-border: #555555;--v3-group-image-filter: invert(1);--v3-picker-emoji-hover: #222222}}.v3-emoji-picker.v3-color-theme-dark{--v3-picker-bg: #000000;--v3-picker-fg: #ffffff;--v3-picker-border: #333333;--v3-picker-input-bg: #222222;--v3-picker-input-border: #444444;--v3-picker-input-focus-border: #555555;--v3-group-image-filter: invert(1);--v3-picker-emoji-hover: #222222}

/* Animaciones y Layout Base */
.create-tag-container[data-v-8b355793] {
  animation: fadeIn-8b355793 var(--duration-fast) var(--ease-out);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--space-8) var(--space-10);
}
@keyframes fadeIn-8b355793 {
from {
    opacity: 0;
    transform: translateY(5px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.form-scroll-area[data-v-8b355793] {
  flex: 1;
  overflow-y: auto;
  padding-bottom: var(--space-24);
}

/* Header */
.panel-header[data-v-8b355793] {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-5);
  border-bottom: var(--border-width-1) solid var(--border-primary);
  padding-bottom: var(--space-5);
}
.header-left[data-v-8b355793] {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}
.panel-header h1[data-v-8b355793] {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.subtitle[data-v-8b355793] {
  margin: 0;
  color: var(--text-quaternary);
  font-size: var(--font-size-base);
}
.btn-back-icon[data-v-8b355793] {
  background: transparent;
  border: var(--border-width-1) solid var(--border-secondary);
  color: var(--text-secondary);
  padding: var(--space-2);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-all);
  margin-top: var(--space-1);
}
.btn-back-icon[data-v-8b355793]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  border-color: var(--border-hover);
}

/* Preview */
.preview-section[data-v-8b355793] {
  background: var(--surface-base);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}
.preview-row[data-v-8b355793] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* CAJA DEL ICONO PREVIEW */
.preview-icon[data-v-8b355793] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: var(--shadow-sm);
  background: var(--bg-hover);
  border: var(--border-width-1) solid var(--border-secondary);
}
.preview-text[data-v-8b355793] {
  display: flex;
  flex-direction: column;
}
.preview-name[data-v-8b355793] {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.preview-sub[data-v-8b355793] {
  font-size: var(--font-size-xs);
  color: var(--text-quaternary);
}

/* Form Elements */
.form-section[data-v-8b355793] {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  max-width: 500px;
}
.form-group[data-v-8b355793] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.form-group label[data-v-8b355793] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}
.input-dark[data-v-8b355793] {
  background-color: var(--bg-input);
  border: var(--border-width-1) solid var(--border-input);
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  font-size: var(--font-size-base);
  outline: none;
  transition: var(--transition-input);
}
.input-dark[data-v-8b355793]:focus {
  border-color: var(--border-input-focus);
  box-shadow: var(--shadow-focus);
}

/* Selection Row */
.selection-row[data-v-8b355793] {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  flex-wrap: wrap;
  margin-left: var(--space-2);
}
.option-swatch[data-v-8b355793] {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  border: 2px solid transparent;
  cursor: pointer;
  transition: var(--transition-transform);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  padding: 0;
}
.option-swatch[data-v-8b355793]:hover {
  transform: scale(1.1);
}
.option-swatch.color.active[data-v-8b355793] {
  border-color: var(--color-white);
  box-shadow: 0 0 0 2px var(--bg-tertiary) inset;
  transform: scale(1.1);
}
.picker-separator[data-v-8b355793] {
  width: 1px;
  height: 24px;
  background-color: var(--border-secondary);
  margin: 0 var(--space-1);
}

/* Emoji Trigger */
.option-swatch.emoji-trigger[data-v-8b355793] {
  background: transparent;
  border: var(--border-width-1) dashed var(--border-secondary);
}
.option-swatch.emoji-trigger[data-v-8b355793]:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.option-swatch.emoji-trigger.active[data-v-8b355793] {
  border-color: var(--accent-primary);
  border-style: solid;
  background: rgba(99, 102, 241, 0.2);
  transform: scale(1.1);
}

/* Popover */
.emoji-popover[data-v-8b355793] {
  position: absolute;
  top: 75px;
  left: 0;
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-dropdown);
  border-radius: var(--radius-md);
}
[data-v-8b355793] .v3-emoji-picker {
  --ep-color-bg: #25262b;
  --ep-color-border: var(--border-secondary);
  --ep-color-hover: var(--bg-hover);
  width: 320px;
  height: 400px;
}

/* Actions */
.actions-row[data-v-8b355793] {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: var(--border-width-1) solid var(--border-primary);
}
.btn-primary[data-v-8b355793] {
  background-color: var(--accent-primary);
  color: var(--color-white);
  border: none;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-base);
  cursor: pointer;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  transition: var(--transition-button);
}
.btn-primary[data-v-8b355793]:hover:not(:disabled) {
  background-color: var(--accent-primary-hover);
}
.btn-primary[data-v-8b355793]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-secondary[data-v-8b355793] {
  background-color: transparent;
  color: var(--text-secondary);
  border: var(--border-width-1) solid var(--border-secondary);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-base);
  cursor: pointer;
  font-size: var(--font-size-base);
  transition: var(--transition-button);
}
.btn-secondary[data-v-8b355793]:hover {
  background-color: var(--bg-hover);
}

/* Estilos Específicos del Componente Inboxes */
/* Heredan muchos de main.css pero definimos lo particular aquí */
.settings-panel[data-v-aef286f1] { display: flex; flex-direction: column; gap: 24px; width: 100%;
}
.settings-header[data-v-aef286f1] { border-bottom: 1px solid var(--border-primary); padding-bottom: 20px; margin-bottom: 10px;
}
.settings-header h1[data-v-aef286f1] { font-size: 24px; font-weight: 600; color: var(--text-primary); margin-bottom: 8px; margin-top: 0;
}
.settings-header p[data-v-aef286f1] { color: var(--text-tertiary); font-size: 14px; margin: 0;
}
.inbox-section[data-v-aef286f1] { margin-bottom: 40px;
}
.section-sub-header[data-v-aef286f1] { margin-bottom: 15px; display: flex; flex-direction: column; gap: 8px;
}
.section-sub-header h2[data-v-aef286f1] { font-size: 16px; color: var(--text-primary); margin-bottom: 0; font-weight: 600;
}
.section-description[data-v-aef286f1] { font-size: 13px; color: var(--text-tertiary); margin: 0;
}
.btn-add-inbox[data-v-aef286f1] { align-self: flex-start; margin-top: 8px;
}
.inboxes-grid[data-v-aef286f1] { display: grid; grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); gap: 20px;
}
.inbox-card[data-v-aef286f1] { background-color: var(--surface-raised); border: 1px solid var(--border-primary); border-left: 4px solid #6366f1; border-radius: 8px; padding: 20px; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column;
}
.inbox-card[data-v-aef286f1]:hover { transform: translateY(-2px); box-shadow: var(--shadow-dropdown);
}
.inbox-card.status-error[data-v-aef286f1] { border-left-color: #ef4444;
}
.inbox-card.status-disconnected[data-v-aef286f1] { border-left-color: #6b7280; opacity: 0.8;
}
.card-header[data-v-aef286f1] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px;
}
.inbox-info h3[data-v-aef286f1] { margin: 0; font-size: 16px; color: var(--text-primary); font-weight: 600;
}
.inbox-info .email[data-v-aef286f1] { margin: 2px 0 0 0; font-size: 13px; color: var(--text-tertiary);
}
.status-badge[data-v-aef286f1] { font-size: 11px; padding: 3px 10px; border-radius: 12px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.5px;
}
.status-badge.status-connected[data-v-aef286f1] { background: rgba(16, 185, 129, 0.15); color: #34d399;
}
.status-badge.status-error[data-v-aef286f1] { background: rgba(239, 68, 68, 0.15); color: #f87171;
}
.status-badge.status-disconnected[data-v-aef286f1] { background: var(--surface-raised); color: var(--text-tertiary);
}
.card-body[data-v-aef286f1] { margin-bottom: 20px; flex: 1;
}
.info-row[data-v-aef286f1] { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; border-bottom: 1px dashed var(--border-primary); padding-bottom: 4px;
}
.info-row[data-v-aef286f1]:last-child { border-bottom: none;
}
.info-row .label[data-v-aef286f1] { color: var(--text-tertiary);
}
.info-row .value[data-v-aef286f1] { color: var(--text-primary); font-weight: 500;
}
.card-alert[data-v-aef286f1] { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171; padding: 10px; border-radius: 6px; font-size: 12px; margin-bottom: 16px;
}
.card-alert p[data-v-aef286f1] { margin: 0;
}
.card-alert-webhook[data-v-aef286f1] { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: #fbbf24;
}
.webhook-active[data-v-aef286f1] { color: #34d399 !important;
}
.webhook-inactive[data-v-aef286f1] { color: #fbbf24 !important;
}
.card-actions[data-v-aef286f1] { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto;
}
.card-actions button[data-v-aef286f1] { flex: 1; white-space: nowrap;
}
.sync-btn-wrapper[data-v-aef286f1] { position: relative; flex: 1;
}
.sync-btn-wrapper .btn-secondary[data-v-aef286f1] { width: 100%; display: flex; align-items: center; justify-content: center;
}
.sync-dropdown[data-v-aef286f1] { position: absolute; bottom: 100%; left: 0; margin-bottom: 4px; min-width: 160px; background: var(--surface-overlay, #1e1e2e); border: 1px solid var(--border-primary, #333); border-radius: 6px; box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.3); z-index: 100; overflow: hidden;
}
.sync-option[data-v-aef286f1] { display: block; width: 100%; padding: 9px 14px; border: none; background: none; color: var(--text-primary, #e0e0e0); font-size: 13px; text-align: left; cursor: pointer; transition: background 0.15s;
}
.sync-option[data-v-aef286f1]:hover { background: var(--bg-hover, rgba(99, 102, 241, 0.15));
}
.sync-option[data-v-aef286f1]:not(:last-child) { border-bottom: 1px solid var(--border-primary, #333);
}
.syncing-indicator[data-v-aef286f1] { display: flex; align-items: center; justify-content: center; gap: 6px;
}
.sync-spinner[data-v-aef286f1] { width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.2); border-top-color: currentColor; border-radius: 50%; animation: spin-aef286f1 0.8s linear infinite; flex-shrink: 0;
}
.empty-card-state[data-v-aef286f1] { background: var(--surface-raised); border: 2px dashed var(--border-primary); border-radius: 8px; padding: 40px; text-align: center; color: var(--text-muted); width: 100%;
}
.empty-icon[data-v-aef286f1] { font-size: 40px; margin-bottom: 16px; opacity: 0.5;
}
.empty-text-state[data-v-aef286f1] { color: var(--text-muted); font-style: italic; padding: 10px;
}

/* Modals */
.modal-overlay[data-v-aef286f1] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); display: flex; justify-content: center; align-items: center; z-index: 2000;
}
.modal-content[data-v-aef286f1] { background: var(--surface-overlay); border: 1px solid var(--border-primary); width: 450px; border-radius: 8px; padding: 0; box-shadow: var(--shadow-dropdown);
}
.modal-header[data-v-aef286f1] { padding: 16px; border-bottom: 1px solid var(--border-primary); display: flex; justify-content: space-between; align-items: center;
}
.modal-header h2[data-v-aef286f1] { margin: 0; font-size: 16px; color: var(--text-primary);
}
.btn-close[data-v-aef286f1] { background: none; border: none; color: var(--text-tertiary); font-size: 20px; cursor: pointer;
}
.modal-body[data-v-aef286f1] { padding: 20px; color: var(--text-secondary); font-size: 14px;
}
.info-text[data-v-aef286f1] { margin-bottom: 20px; line-height: 1.5;
}
.btn-full[data-v-aef286f1] { width: 100%; display: flex; justify-content: center; align-items: center; gap: 8px;
}
.loading-state[data-v-aef286f1] { text-align: center; padding: 40px; color: var(--text-tertiary);
}
.spinner[data-v-aef286f1] { border: 3px solid var(--border-primary); border-top: 3px solid #6366f1; border-radius: 50%; width: 30px; height: 30px; animation: spin-aef286f1 1s linear infinite; margin: 0 auto 10px;
}
@keyframes spin-aef286f1 {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}
.alert[data-v-aef286f1] { padding: 12px; border-radius: 6px; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 13px;
}
.alert-error[data-v-aef286f1] { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #f87171;
}
.alert-warning[data-v-aef286f1] { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: #fbbf24;
}

/* Botones */
.btn-primary[data-v-aef286f1] { background-color: #6366f1; color: white; border: none; padding: 8px 20px; border-radius: 6px; cursor: default; font-size: 13px; font-weight: 500; transition: background 0.2s;
}
.btn-primary[data-v-aef286f1]:hover { background-color: #4f46e5;
}
.btn-secondary[data-v-aef286f1] { background-color: var(--surface-raised); color: var(--text-primary); border: 1px solid var(--border-primary); padding: 8px 16px; border-radius: 6px; cursor: default; font-size: 13px; transition: background 0.2s;
}
.btn-secondary[data-v-aef286f1]:hover { background-color: var(--bg-hover);
}
.btn-warning[data-v-aef286f1] { background-color: rgba(245, 158, 11, 0.1); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); padding: 8px 16px; border-radius: 6px; cursor: default; font-size: 13px;
}
.btn-warning[data-v-aef286f1]:hover { background-color: rgba(245, 158, 11, 0.2);
}
.btn-danger[data-v-aef286f1] { background-color: rgba(239, 68, 68, 0.1); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); padding: 8px 16px; border-radius: 6px; cursor: default; font-size: 13px;
}
.btn-danger[data-v-aef286f1]:hover { background-color: rgba(239, 68, 68, 0.2);
}

.settings-panel[data-v-649d509b] {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  padding: 30px 40px;
}
.settings-header[data-v-649d509b] {
  border-bottom: 1px solid var(--border-secondary);
  padding-bottom: 20px;
  margin-bottom: 10px;
}
.settings-header h1[data-v-649d509b] {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
  margin-top: 0;
}
.settings-header p[data-v-649d509b] {
  color: var(--text-tertiary);
  font-size: 14px;
  margin: 0;
}

/* Alerts */
.alert[data-v-649d509b] {
  padding: 12px;
  border-radius: var(--radius-base);
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.alert-error[data-v-649d509b] {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error);
}
.alert-success[data-v-649d509b] {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success);
}
.btn-close[data-v-649d509b] {
  background: none;
  border: none;
  color: inherit;
  font-size: 20px;
  cursor: pointer;
  padding: 0;
  margin-left: 10px;
}

/* Loading */
.loading-state[data-v-649d509b] {
  text-align: center;
  padding: 40px;
  color: var(--text-tertiary);
}
.spinner[data-v-649d509b] {
  border: 3px solid var(--border-secondary);
  border-top: 3px solid var(--accent-primary);
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin-649d509b 1s linear infinite;
  margin: 0 auto 10px;
}
@keyframes spin-649d509b {
0% { transform: rotate(0deg);
}
100% { transform: rotate(360deg);
}
}

/* Form */
.company-form[data-v-649d509b] {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.form-group[data-v-649d509b] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-group label[data-v-649d509b] {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}
.settings-input[data-v-649d509b],
.settings-select[data-v-649d509b] {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
  padding: 12px 14px;
  border-radius: var(--radius-base);
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  font-family: inherit;
}
.settings-input[data-v-649d509b]:focus,
.settings-select[data-v-649d509b]:focus {
  border-color: var(--border-input-focus);
  box-shadow: 0 0 0 3px rgba(155, 135, 245, 0.15);
}
.settings-select[data-v-649d509b] {
  cursor: pointer;
}
.form-hint[data-v-649d509b] {
  font-size: 12px;
  color: var(--text-quaternary);
  font-style: italic;
}

/* Actions */
.form-actions[data-v-649d509b] {
  margin-top: 10px;
}
.btn-primary[data-v-649d509b] {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: 10px 24px;
  border-radius: var(--radius-base);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.btn-primary[data-v-649d509b]:hover:not(:disabled) {
  background-color: var(--accent-primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.15);
}
.btn-primary[data-v-649d509b]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.modal-overlay[data-v-29128e19] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--overlay-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  animation: fadeIn-29128e19 var(--duration-fast) var(--ease-out);
  backdrop-filter: blur(4px);
}
@keyframes fadeIn-29128e19 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
.modal-content[data-v-29128e19] {
  background-color: var(--surface-overlay);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 480px;
  box-shadow: var(--shadow-modal);
  animation: slideUp-29128e19 var(--duration-fast) var(--ease-out);
  border: var(--border-width-1) solid var(--border-primary);
}
@keyframes slideUp-29128e19 {
from {
    transform: translateY(20px);
    opacity: 0;
}
to {
    transform: translateY(0);
    opacity: 1;
}
}
.modal-header[data-v-29128e19] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-width-1) solid var(--border-primary);
}
.modal-header h3[data-v-29128e19] {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.close-btn[data-v-29128e19] {
  background: none;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--text-tertiary);
  transition: var(--transition-colors);
  border-radius: var(--radius-sm);
}
.close-btn[data-v-29128e19]:hover {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}
.modal-body[data-v-29128e19] {
  padding: var(--space-6);
}
.form-group[data-v-29128e19] {
  margin-bottom: var(--space-4);
}
.form-label[data-v-29128e19] {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.required[data-v-29128e19] {
  color: var(--color-error);
}
.form-input[data-v-29128e19] {
  width: 100%;
  padding: var(--space-2-5) var(--space-3);
  border: var(--border-width-1) solid var(--border-input);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  outline: none;
  transition: var(--transition-input);
  background-color: var(--bg-input);
  color: var(--text-primary);
}
.form-input[data-v-29128e19]:focus {
  border-color: var(--border-input-focus);
  box-shadow: var(--shadow-focus);
}
.form-input[data-v-29128e19]:disabled {
  background-color: var(--bg-input-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.form-hint[data-v-29128e19] {
  margin-top: var(--space-1-5);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
.error-message[data-v-29128e19] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-error-bg);
  border: var(--border-width-1) solid var(--color-error-border);
  border-radius: var(--radius-md);
  color: var(--color-error);
  font-size: var(--font-size-base);
  margin-top: var(--space-4);
}
.error-message svg[data-v-29128e19] {
  flex-shrink: 0;
}
.success-message[data-v-29128e19] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-success-bg);
  border: var(--border-width-1) solid var(--color-success-border);
  border-radius: var(--radius-md);
  color: var(--color-success);
  font-size: var(--font-size-base);
  margin-top: var(--space-4);
}
.success-message svg[data-v-29128e19] {
  flex-shrink: 0;
}
.modal-footer[data-v-29128e19] {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width-1) solid var(--border-primary);
}
.btn-cancel[data-v-29128e19] {
  padding: var(--space-2-5) var(--space-4);
  border: var(--border-width-1) solid var(--border-secondary);
  background-color: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-button);
}
.btn-cancel[data-v-29128e19]:hover:not(:disabled) {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
}
.btn-cancel[data-v-29128e19]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-confirm[data-v-29128e19] {
  padding: var(--space-2-5) var(--space-5);
  background-color: var(--accent-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-button);
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-confirm[data-v-29128e19]:hover:not(:disabled) {
  background-color: var(--accent-primary-hover);
}
.btn-confirm[data-v-29128e19]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.button-spinner[data-v-29128e19] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: var(--radius-full);
  animation: spin-29128e19 var(--duration-moderate) linear infinite;
}
@keyframes spin-29128e19 {
to { transform: rotate(360deg);
}
}

.settings-workspaces[data-v-4c9a840a] {
  padding: var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
  background-color: var(--bg-primary);
  min-height: 100vh;
}
.settings-header[data-v-4c9a840a] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
}
.header-left[data-v-4c9a840a] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.breadcrumb[data-v-4c9a840a] {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
.breadcrumb .icon[data-v-4c9a840a] {
  width: 14px;
  height: 14px;
}
.breadcrumb-text[data-v-4c9a840a] {
  font-weight: var(--font-weight-medium);
}
.page-title[data-v-4c9a840a] {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.btn-create[data-v-4c9a840a] {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.btn-create[data-v-4c9a840a]:hover {
  background-color: var(--accent-primary-hover);
  transform: translateY(-1px);
}
.search-bar[data-v-4c9a840a] {
  position: relative;
  margin-bottom: var(--space-6);
  max-width: 320px;
}
.search-icon[data-v-4c9a840a] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-quaternary);
}
.search-input[data-v-4c9a840a] {
  width: 100%;
  padding: var(--space-2-5) var(--space-3) var(--space-2-5) var(--space-10);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--bg-input);
  color: var(--text-primary);
}
.search-input[data-v-4c9a840a]:focus {
  border-color: var(--border-input-focus);
  box-shadow: 0 0 0 3px rgba(155, 135, 245, 0.15);
}
.loading-container[data-v-4c9a840a],
.error-container[data-v-4c9a840a] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-5);
  text-align: center;
}
.spinner[data-v-4c9a840a] {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-secondary);
  border-top-color: var(--accent-primary);
  border-radius: var(--radius-full);
  animation: spin-4c9a840a 0.8s linear infinite;
  margin-bottom: var(--space-4);
}
@keyframes spin-4c9a840a {
to {
    transform: rotate(360deg);
}
}
.error-message[data-v-4c9a840a] {
  color: var(--color-error);
  margin-bottom: var(--space-4);
}
.btn-retry[data-v-4c9a840a] {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  cursor: pointer;
}
.workspaces-content[data-v-4c9a840a] {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-8);
}
.workspaces-list[data-v-4c9a840a] {
  background-color: var(--surface-base);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.table-header[data-v-4c9a840a] {
  display: grid;
  grid-template-columns: 300px 1fr 100px;
  padding: var(--space-3) var(--space-6);
  background-color: var(--surface-raised);
  border-bottom: 1px solid var(--border-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.workspace-row[data-v-4c9a840a] {
  display: grid;
  grid-template-columns: 300px 1fr 100px;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-tertiary);
  align-items: center;
  transition: background-color 0.15s;
}
.workspace-row[data-v-4c9a840a]:hover {
  background-color: var(--bg-hover);
}
.workspace-row[data-v-4c9a840a]:last-child {
  border-bottom: none;
}
.col-name[data-v-4c9a840a] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.workspace-avatar[data-v-4c9a840a] {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
  flex-shrink: 0;
}
.workspace-name[data-v-4c9a840a] {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.inboxes-list[data-v-4c9a840a] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.inbox-tag[data-v-4c9a840a] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.inbox-indicator[data-v-4c9a840a] {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.inbox-more[data-v-4c9a840a] {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  font-weight: var(--font-weight-medium);
}
.no-inboxes[data-v-4c9a840a] {
  font-size: var(--font-size-sm);
  color: var(--text-quaternary);
  font-style: italic;
}
.empty-state[data-v-4c9a840a] {
  padding: var(--space-16) var(--space-6);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
}
.help-panel[data-v-4c9a840a] {
  background-color: var(--surface-raised);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  align-self: start;
}
.help-header[data-v-4c9a840a] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.help-icon[data-v-4c9a840a] {
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.help-header h3[data-v-4c9a840a] {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.help-text[data-v-4c9a840a] {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
}
.help-link[data-v-4c9a840a] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  color: var(--accent-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: color 0.2s;
}
.help-link[data-v-4c9a840a]:hover {
  color: var(--accent-primary-hover);
}
.help-link svg[data-v-4c9a840a] {
  width: 14px;
  height: 14px;
}

/* Actions column */
.col-actions[data-v-4c9a840a] {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}
.btn-action[data-v-4c9a840a] {
  padding: 6px;
  background: none;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  color: #6B7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.btn-action[data-v-4c9a840a]:hover {
  background-color: #F3F4F6;
  border-color: #D1D5DB;
  color: #111827;
}
.btn-action.btn-delete[data-v-4c9a840a]:hover {
  background-color: #FEE2E2;
  border-color: #FECACA;
  color: #DC2626;
}

/* Modal styles */
.modal-overlay[data-v-4c9a840a] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.modal-content[data-v-4c9a840a] {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 480px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.modal-header[data-v-4c9a840a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #E5E7EB;
}
.modal-header h3[data-v-4c9a840a] {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}
.btn-close[data-v-4c9a840a] {
  background: none;
  border: none;
  color: #6B7280;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
}
.btn-close[data-v-4c9a840a]:hover {
  background-color: #F3F4F6;
  color: #111827;
}
.modal-body[data-v-4c9a840a] {
  padding: 24px;
}
.form-group[data-v-4c9a840a] {
  margin-bottom: 16px;
}
.form-label[data-v-4c9a840a] {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}
.form-input[data-v-4c9a840a] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  outline: none;
  transition: border-color 0.2s;
}
.form-input[data-v-4c9a840a]:focus {
  border-color: #6366F1;
}
.warning-text[data-v-4c9a840a] {
  font-size: 14px;
  color: #111827;
  margin-bottom: 12px;
  font-weight: 500;
}
.warning-subtext[data-v-4c9a840a] {
  font-size: 13px;
  color: #6B7280;
  line-height: 1.5;
}
.error-text[data-v-4c9a840a] {
  font-size: 13px;
  color: #DC2626;
  margin-top: 12px;
}
.modal-footer[data-v-4c9a840a] {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid #E5E7EB;
}
.btn-cancel[data-v-4c9a840a] {
  padding: 10px 20px;
  border: 1px solid #D1D5DB;
  background: white;
  color: #374151;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-cancel[data-v-4c9a840a]:hover {
  background-color: #F9FAFB;
  border-color: #9CA3AF;
}
.btn-save[data-v-4c9a840a] {
  padding: 10px 20px;
  border: none;
  background: #6366F1;
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-save[data-v-4c9a840a]:hover {
  background-color: #4F46E5;
}
.btn-delete-confirm[data-v-4c9a840a] {
  padding: 10px 20px;
  border: none;
  background: #DC2626;
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-delete-confirm[data-v-4c9a840a]:hover {
  background-color: #B91C1C;
}

.modal-overlay[data-v-cf5d7118] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--overlay-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  animation: fadeIn-cf5d7118 var(--duration-fast) var(--ease-out);
  backdrop-filter: blur(4px);
}
@keyframes fadeIn-cf5d7118 {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
.modal-content[data-v-cf5d7118] {
  background-color: var(--surface-overlay);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--shadow-modal);
  animation: slideUp-cf5d7118 var(--duration-fast) var(--ease-out);
  border: var(--border-width-1) solid var(--border-primary);
}
@keyframes slideUp-cf5d7118 {
from {
    transform: translateY(20px);
    opacity: 0;
}
to {
    transform: translateY(0);
    opacity: 1;
}
}
.modal-header[data-v-cf5d7118] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  border-bottom: var(--border-width-1) solid var(--border-primary);
}
.modal-header h3[data-v-cf5d7118] {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.close-btn[data-v-cf5d7118] {
  background: none;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  color: var(--text-tertiary);
  transition: var(--transition-colors);
  border-radius: var(--radius-sm);
}
.close-btn[data-v-cf5d7118]:hover:not(:disabled) {
  color: var(--text-primary);
  background-color: var(--bg-hover);
}
.close-btn[data-v-cf5d7118]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.modal-body[data-v-cf5d7118] {
  padding: var(--space-6);
}
.form-group[data-v-cf5d7118] {
  margin-bottom: var(--space-5);
}
.form-group[data-v-cf5d7118]:last-child {
  margin-bottom: 0;
}
.form-label[data-v-cf5d7118] {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.required[data-v-cf5d7118] {
  color: var(--color-error);
}
.form-input[data-v-cf5d7118] {
  width: 100%;
  padding: var(--space-2-5) var(--space-3);
  border: var(--border-width-1) solid var(--border-input);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  outline: none;
  transition: var(--transition-input);
  background-color: var(--bg-input);
  color: var(--text-primary);
}
.form-input[data-v-cf5d7118]:focus {
  border-color: var(--border-input-focus);
  box-shadow: var(--shadow-focus);
}
.form-input[data-v-cf5d7118]:disabled {
  background-color: var(--bg-input-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}
.form-hint[data-v-cf5d7118] {
  margin-top: var(--space-1-5);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
.error-message[data-v-cf5d7118] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-error-bg);
  border: var(--border-width-1) solid var(--color-error-border);
  border-radius: var(--radius-md);
  color: var(--color-error);
  font-size: var(--font-size-base);
  margin-top: var(--space-4);
}
.error-message svg[data-v-cf5d7118] {
  flex-shrink: 0;
}
.info-message[data-v-cf5d7118] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background-color: var(--color-info-bg);
  border: var(--border-width-1) solid var(--color-info-border);
  border-radius: var(--radius-md);
  color: var(--color-info);
  font-size: var(--font-size-base);
  margin-top: var(--space-4);
}
.modal-footer[data-v-cf5d7118] {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: var(--border-width-1) solid var(--border-primary);
}
.btn-cancel[data-v-cf5d7118] {
  padding: var(--space-2-5) var(--space-4);
  border: var(--border-width-1) solid var(--border-secondary);
  background-color: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-button);
}
.btn-cancel[data-v-cf5d7118]:hover:not(:disabled) {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
}
.btn-cancel[data-v-cf5d7118]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-confirm[data-v-cf5d7118] {
  padding: var(--space-2-5) var(--space-5);
  background-color: var(--accent-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-button);
  min-width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-confirm[data-v-cf5d7118]:hover:not(:disabled) {
  background-color: var(--accent-primary-hover);
}
.btn-confirm[data-v-cf5d7118]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.button-spinner[data-v-cf5d7118] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: var(--radius-full);
  animation: spin-cf5d7118 var(--duration-moderate) linear infinite;
}
@keyframes spin-cf5d7118 {
to { transform: rotate(360deg);
}
}
.color-picker[data-v-cf5d7118] {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--space-2-5);
  margin-top: var(--space-2);
}
.color-option[data-v-cf5d7118] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: var(--transition-transform);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
}
.color-option[data-v-cf5d7118]:hover {
  transform: scale(1.1);
  box-shadow: var(--shadow-md);
}
.color-option.selected[data-v-cf5d7118] {
  border-color: var(--text-primary);
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.business-hours-config[data-v-70ab5b35] {
  background: var(--surface-raised);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  padding: 24px;
}
.config-title[data-v-70ab5b35] {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}
.config-desc[data-v-70ab5b35] {
  font-size: 13px;
  color: var(--text-tertiary);
  margin: 0 0 20px 0;
}
.form-group[data-v-70ab5b35] {
  margin-bottom: 16px;
}
.form-group label[data-v-70ab5b35] {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-select[data-v-70ab5b35],
.form-input[data-v-70ab5b35] {
  padding: 8px 10px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-primary);
  border-radius: var(--radius-base);
  font-size: 13px;
  width: 100%;
  max-width: 300px;
}
.form-select[data-v-70ab5b35]:focus,
.form-input[data-v-70ab5b35]:focus {
  border-color: var(--border-input-focus);
  outline: none;
}
.sla-input[data-v-70ab5b35] {
  max-width: 120px;
}
.form-hint[data-v-70ab5b35] {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
  display: block;
}
.days-section[data-v-70ab5b35] {
  margin-bottom: 20px;
}
.days-section > label[data-v-70ab5b35] {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.day-row[data-v-70ab5b35] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-secondary);
}
.day-row[data-v-70ab5b35]:last-child {
  border-bottom: none;
}
.day-toggle[data-v-70ab5b35] {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 130px;
}
.toggle-btn[data-v-70ab5b35] {
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: var(--border-secondary);
  border: none;
  position: relative;
  cursor: default;
  transition: background 0.2s;
  flex-shrink: 0;
}
.toggle-btn.active[data-v-70ab5b35] {
  background: var(--accent-primary);
}
.toggle-dot[data-v-70ab5b35] {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  transition: left 0.2s;
}
.toggle-btn.active .toggle-dot[data-v-70ab5b35] {
  left: 18px;
}
.day-label[data-v-70ab5b35] {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}
.day-label.disabled[data-v-70ab5b35] {
  color: var(--text-quaternary);
}
.time-ranges[data-v-70ab5b35] {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.time-range[data-v-70ab5b35] {
  display: flex;
  align-items: center;
  gap: 6px;
}
.time-input[data-v-70ab5b35] {
  padding: 5px 8px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.time-input[data-v-70ab5b35]:focus {
  border-color: var(--border-input-focus);
  outline: none;
}
.time-separator[data-v-70ab5b35] {
  color: var(--text-tertiary);
  font-size: 13px;
}
.remove-range-btn[data-v-70ab5b35] {
  background: transparent;
  border: none;
  color: var(--text-quaternary);
  cursor: default;
  padding: 2px;
}
.remove-range-btn[data-v-70ab5b35]:hover {
  color: #EF4444;
}
.add-range-btn[data-v-70ab5b35] {
  background: transparent;
  border: none;
  color: var(--accent-primary);
  font-size: 12px;
  cursor: default;
  padding: 2px 0;
  text-align: left;
}
.add-range-btn[data-v-70ab5b35]:hover {
  text-decoration: underline;
}
.closed-label[data-v-70ab5b35] {
  font-size: 13px;
  color: var(--text-quaternary);
  font-style: italic;
}
.sla-section[data-v-70ab5b35] {
  margin-bottom: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-secondary);
}
.sla-toggle-row[data-v-70ab5b35] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sla-toggle-row label[data-v-70ab5b35] {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}
.error-msg[data-v-70ab5b35] {
  color: #EF4444;
  font-size: 13px;
  margin-bottom: 12px;
}
.success-msg[data-v-70ab5b35] {
  color: #10B981;
  font-size: 13px;
  margin-bottom: 12px;
}
.form-actions[data-v-70ab5b35] {
  padding-top: 12px;
}
.save-btn[data-v-70ab5b35] {
  padding: 8px 20px;
  background: var(--accent-primary);
  color: white;
  border: none;
  border-radius: var(--radius-base);
  font-size: 13px;
  font-weight: 500;
  cursor: default;
}
.save-btn[data-v-70ab5b35]:hover:not(:disabled) {
  background: var(--accent-primary-hover);
}
.save-btn[data-v-70ab5b35]:disabled {
  opacity: 0.6;
}
.loading-state[data-v-70ab5b35] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 40px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.spinner[data-v-70ab5b35] {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-secondary);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin-70ab5b35 0.8s linear infinite;
}
@keyframes spin-70ab5b35 {
to { transform: rotate(360deg);
}
}

.workspace-inboxes[data-v-b5873fbb] {
  padding: var(--space-8);
  width: 100%;
  background-color: var(--bg-primary);
  min-height: 100vh;
}
.header-section[data-v-b5873fbb] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
}
.header-left[data-v-b5873fbb] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.breadcrumb[data-v-b5873fbb] {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
}
.workspace-badge[data-v-b5873fbb] {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
}
.workspace-name[data-v-b5873fbb] {
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}
.page-title[data-v-b5873fbb] {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.btn-create[data-v-b5873fbb] {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.btn-create[data-v-b5873fbb]:hover {
  background-color: var(--accent-primary-hover);
  transform: translateY(-1px);
}
.toolbar[data-v-b5873fbb] {
  margin-bottom: var(--space-6);
}
.search-bar[data-v-b5873fbb] {
  position: relative;
  max-width: 320px;
}
.search-icon[data-v-b5873fbb] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-quaternary);
}
.search-input[data-v-b5873fbb] {
  width: 100%;
  padding: var(--space-2-5) var(--space-3) var(--space-2-5) var(--space-10);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--bg-input);
  color: var(--text-primary);
}
.search-input[data-v-b5873fbb]:focus {
  border-color: var(--border-input-focus);
  box-shadow: 0 0 0 3px rgba(155, 135, 245, 0.15);
}
.loading-container[data-v-b5873fbb],
.error-container[data-v-b5873fbb] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-5);
  text-align: center;
}
.spinner[data-v-b5873fbb] {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-secondary);
  border-top-color: var(--accent-primary);
  border-radius: var(--radius-full);
  animation: spin-b5873fbb 0.8s linear infinite;
  margin-bottom: var(--space-4);
}
@keyframes spin-b5873fbb {
to {
    transform: rotate(360deg);
}
}
.error-message[data-v-b5873fbb] {
  color: var(--color-error);
  margin-bottom: var(--space-4);
}
.btn-retry[data-v-b5873fbb] {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  cursor: pointer;
}
.inboxes-table[data-v-b5873fbb] {
  background-color: var(--surface-base);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  max-width: 100%;
  box-shadow: var(--shadow-sm);
}
.table-header[data-v-b5873fbb] {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) minmax(180px, 2fr) minmax(200px, 2fr) minmax(90px, auto) minmax(250px, auto);
  padding: var(--space-3) var(--space-6);
  background-color: var(--surface-raised);
  border-bottom: 1px solid var(--border-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 990px;
}
.inbox-row[data-v-b5873fbb] {
  display: grid;
  grid-template-columns: minmax(200px, 2fr) minmax(180px, 2fr) minmax(200px, 2fr) minmax(90px, auto) minmax(250px, auto);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-tertiary);
  align-items: center;
  transition: background-color 0.15s;
  min-width: 990px;
}
.inbox-row[data-v-b5873fbb]:hover {
  background-color: var(--bg-hover);
}
.inbox-row[data-v-b5873fbb]:last-child {
  border-bottom: none;
}
.col-name[data-v-b5873fbb] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.inbox-icon[data-v-b5873fbb] {
  width: 36px;
  height: 36px;
  background-color: var(--surface-raised);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.inbox-info[data-v-b5873fbb] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.inbox-name[data-v-b5873fbb] {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.inbox-status[data-v-b5873fbb] {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  width: fit-content;
}
.status-error[data-v-b5873fbb],
.status-disconnected[data-v-b5873fbb] {
  background-color: rgba(239, 68, 68, 0.15);
  color: #F87171;
}
.status-reconnect_required[data-v-b5873fbb] {
  background-color: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
}
.status-syncing[data-v-b5873fbb] {
  background-color: rgba(59, 130, 246, 0.15);
  color: #60A5FA;
}
.channel-item[data-v-b5873fbb] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.channel-indicator[data-v-b5873fbb] {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.channel-connected[data-v-b5873fbb] {
  background-color: #10B981;
}
.channel-warning[data-v-b5873fbb] {
  background-color: #F59E0B;
}
.channel-error[data-v-b5873fbb] {
  background-color: #EF4444;
}
.channel-email[data-v-b5873fbb] {
  font-size: var(--font-size-sm);
  color: var(--accent-primary);
  text-decoration: none;
}
.channel-email[data-v-b5873fbb]:hover {
  text-decoration: underline;
}
.access-info[data-v-b5873fbb] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.access-icon[data-v-b5873fbb] {
  color: var(--text-quaternary);
  flex-shrink: 0;
}
.access-text[data-v-b5873fbb] {
  font-size: 13px;
  color: #6B7280;
}
.empty-state[data-v-b5873fbb] {
  padding: 64px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.empty-icon[data-v-b5873fbb] {
  color: #D1D5DB;
  margin-bottom: 8px;
}
.empty-state h3[data-v-b5873fbb] {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}
.empty-state p[data-v-b5873fbb] {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}
.btn-primary[data-v-b5873fbb] {
  background-color: #6366F1;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
}
.btn-primary[data-v-b5873fbb]:hover {
  background-color: #4F46E5;
}
.col-actions[data-v-b5873fbb] {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}
.btn-action[data-v-b5873fbb] {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #6B7280;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-action[data-v-b5873fbb]:hover {
  background-color: #F3F4F6;
  color: #374151;
}
.btn-action.btn-delete[data-v-b5873fbb]:hover {
  background-color: #FEE2E2;
  color: #DC2626;
}
.modal-overlay[data-v-b5873fbb] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.2s ease-out;
}
.modal-content[data-v-b5873fbb] {
  background-color: white;
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  animation: slideUp-b5873fbb 0.2s ease-out;
}
@keyframes slideUp-b5873fbb {
from {
    transform: translateY(20px);
    opacity: 0;
}
to {
    transform: translateY(0);
    opacity: 1;
}
}
.modal-header[data-v-b5873fbb] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #E5E7EB;
}
.modal-header h3[data-v-b5873fbb] {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}
.close-btn[data-v-b5873fbb] {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #9CA3AF;
  transition: color 0.2s;
  border-radius: 4px;
}
.close-btn[data-v-b5873fbb]:hover {
  color: #6B7280;
  background-color: #F3F4F6;
}
.modal-body[data-v-b5873fbb] {
  padding: 24px;
}
.form-group[data-v-b5873fbb] {
  margin-bottom: 16px;
}
.form-label[data-v-b5873fbb] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}
.required[data-v-b5873fbb] {
  color: #DC2626;
}
.form-input[data-v-b5873fbb] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-input[data-v-b5873fbb]:focus {
  border-color: #6366F1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.form-input[data-v-b5873fbb]:disabled {
  background-color: #F3F4F6;
  cursor: not-allowed;
}
.confirmation-text[data-v-b5873fbb] {
  font-size: 15px;
  color: #374151;
  margin: 0 0 12px 0;
}
.confirmation-warning[data-v-b5873fbb] {
  font-size: 13px;
  color: #DC2626;
  background-color: #FEF2F2;
  padding: 12px;
  border-radius: 6px;
  border-left: 3px solid #DC2626;
  margin: 0;
}
.error-message[data-v-b5873fbb] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background-color: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 8px;
  color: #DC2626;
  font-size: 14px;
  margin-top: 16px;
}
.modal-footer[data-v-b5873fbb] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #E5E7EB;
}
.btn-cancel[data-v-b5873fbb] {
  padding: 10px 16px;
  border: 1px solid #D1D5DB;
  background-color: white;
  color: #374151;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-cancel[data-v-b5873fbb]:hover:not(:disabled) {
  background-color: #F9FAFB;
  border-color: #9CA3AF;
}
.btn-cancel[data-v-b5873fbb]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-confirm[data-v-b5873fbb],
.btn-danger[data-v-b5873fbb] {
  padding: 10px 20px;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-confirm[data-v-b5873fbb] {
  background-color: #6366F1;
}
.btn-confirm[data-v-b5873fbb]:hover:not(:disabled) {
  background-color: #4F46E5;
}
.btn-danger[data-v-b5873fbb] {
  background-color: #DC2626;
}
.btn-danger[data-v-b5873fbb]:hover:not(:disabled) {
  background-color: #B91C1C;
}
.btn-confirm[data-v-b5873fbb]:disabled,
.btn-danger[data-v-b5873fbb]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.button-spinner[data-v-b5873fbb] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin-b5873fbb 0.6s linear infinite;
}
@keyframes spin-b5873fbb {
to {
    transform: rotate(360deg);
}
}
.btn-action.btn-warning[data-v-b5873fbb] {
  color: #F59E0B;
}
.btn-action.btn-warning[data-v-b5873fbb]:hover {
  background-color: #FEF3C7;
  color: #D97706;
}
.btn-action.btn-primary[data-v-b5873fbb] {
  color: #6366F1;
}
.btn-action.btn-primary[data-v-b5873fbb]:hover {
  background-color: #EEF2FF;
  color: #4F46E5;
}
.btn-action[data-v-b5873fbb]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.spinning[data-v-b5873fbb] {
  animation: spin-b5873fbb 1s linear infinite;
}
.btn-action.active[data-v-b5873fbb] {
  background-color: rgba(99, 102, 241, 0.1);
  color: #6366F1;
}
.business-hours-panel[data-v-b5873fbb] {
  padding: 16px 24px 24px;
  border-bottom: 1px solid var(--border-tertiary);
  background-color: var(--surface-raised, #F9FAFB);
}
.col-webhook[data-v-b5873fbb] {
  display: flex;
  align-items: center;
}
.webhook-badge[data-v-b5873fbb] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}
.webhook-badge.webhook-active[data-v-b5873fbb] {
  color: #34d399;
}
.webhook-badge.webhook-inactive[data-v-b5873fbb] {
  color: #FBBF24;
}
.webhook-badge.webhook-na[data-v-b5873fbb] {
  color: var(--text-quaternary);
}
.webhook-dot[data-v-b5873fbb] {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.dot-active[data-v-b5873fbb] {
  background-color: #10B981;
}
.dot-inactive[data-v-b5873fbb] {
  background-color: #F59E0B;
}
.status-webhook-warning[data-v-b5873fbb] {
  background-color: rgba(245, 158, 11, 0.15);
  color: #FBBF24;
}
.webhook-warning-banner[data-v-b5873fbb] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 8px;
  color: #FBBF24;
  font-size: 13px;
  margin-bottom: var(--space-4);
}
.btn-dismiss[data-v-b5873fbb] {
  background: none;
  border: none;
  color: #FBBF24;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  opacity: 0.7;
}
.btn-dismiss[data-v-b5873fbb]:hover {
  opacity: 1;
}
.sync-btn-wrapper[data-v-b5873fbb] { position: relative; display: inline-flex;
}

.sync-dropdown-fixed {
  background: #1f2937;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 4px;
  min-width: 160px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.sync-dropdown-fixed .sync-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  color: #d1d5db;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.15s, color 0.15s;
}
.sync-dropdown-fixed .sync-option:hover {
  background-color: #374151;
  color: #f9fafb;
}

.workspace-teammates[data-v-eae5e679] {
  padding: var(--space-8);
  width: 100%;
  background-color: var(--bg-primary);
  min-height: 100vh;
}
.header-section[data-v-eae5e679] {
  margin-bottom: var(--space-6);
}
.header-left[data-v-eae5e679] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.page-title[data-v-eae5e679] {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.page-subtitle[data-v-eae5e679] {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  margin: 0;
}
.toolbar[data-v-eae5e679] {
  margin-bottom: var(--space-6);
}
.search-bar[data-v-eae5e679] {
  position: relative;
  max-width: 320px;
}
.search-icon[data-v-eae5e679] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-quaternary);
}
.search-input[data-v-eae5e679] {
  width: 100%;
  padding: var(--space-2-5) var(--space-3) var(--space-2-5) var(--space-10);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--bg-input);
  color: var(--text-primary);
}
.search-input[data-v-eae5e679]:focus {
  border-color: var(--border-input-focus);
  box-shadow: 0 0 0 3px rgba(155, 135, 245, 0.15);
}
.loading-container[data-v-eae5e679],
.error-container[data-v-eae5e679] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-5);
  text-align: center;
}
.spinner[data-v-eae5e679] {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-secondary);
  border-top-color: var(--accent-primary);
  border-radius: var(--radius-full);
  animation: spin-eae5e679 0.8s linear infinite;
  margin-bottom: var(--space-4);
}
@keyframes spin-eae5e679 {
to {
    transform: rotate(360deg);
}
}
.error-message[data-v-eae5e679] {
  color: var(--color-error);
  margin-bottom: var(--space-4);
}
.btn-retry[data-v-eae5e679] {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  cursor: pointer;
}
.teammates-table[data-v-eae5e679] {
  background-color: var(--surface-base);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 100%;
  box-shadow: var(--shadow-sm);
}
.table-header[data-v-eae5e679] {
  display: grid;
  grid-template-columns: 2fr 2fr 1.2fr 1.2fr 120px;
  padding: var(--space-3) var(--space-6);
  background-color: var(--surface-raised);
  border-bottom: 1px solid var(--border-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.teammate-row[data-v-eae5e679] {
  display: grid;
  grid-template-columns: 2fr 2fr 1.2fr 1.2fr 120px;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-tertiary);
  align-items: center;
  transition: background-color 0.15s;
}
.teammate-row[data-v-eae5e679]:hover {
  background-color: var(--bg-hover);
}
.teammate-row[data-v-eae5e679]:last-child {
  border-bottom: none;
}
.col-name[data-v-eae5e679] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.teammate-avatar[data-v-eae5e679] {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  flex-shrink: 0;
}
.teammate-info[data-v-eae5e679] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.teammate-name[data-v-eae5e679] {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-text[data-v-eae5e679] {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
.role-text[data-v-eae5e679] {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.admin-badge[data-v-eae5e679] {
  display: inline-block;
  margin-left: var(--space-2);
  padding: 2px 8px;
  background-color: rgba(99, 102, 241, 0.2);
  color: var(--accent-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.workspace-role-badge[data-v-eae5e679] {
  padding: 4px 12px;
  border-radius: var(--radius-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  display: inline-block;
}
.role-admin[data-v-eae5e679] {
  background-color: rgba(59, 130, 246, 0.15);
  color: #60A5FA;
}
.role-member[data-v-eae5e679] {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34D399;
}
.role-no_access[data-v-eae5e679] {
  background-color: var(--surface-raised);
  color: var(--text-tertiary);
}
.status-badge[data-v-eae5e679] {
  padding: 4px 12px;
  border-radius: var(--radius-base);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.status-active[data-v-eae5e679] {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34D399;
}
.status-inactive[data-v-eae5e679] {
  background-color: rgba(239, 68, 68, 0.15);
  color: #F87171;
}
.empty-state[data-v-eae5e679] {
  padding: var(--space-20) var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.empty-icon[data-v-eae5e679] {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg);
  background-color: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-5);
  color: var(--text-quaternary);
}
.empty-state h3[data-v-eae5e679] {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}
.empty-state p[data-v-eae5e679] {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  margin: 0;
}

.wizard-overlay[data-v-7954d65a] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--overlay-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal-backdrop);
  animation: fadeIn-7954d65a var(--duration-fast) var(--ease-out);
  backdrop-filter: blur(4px);
}
@keyframes fadeIn-7954d65a {
from {
    opacity: 0;
}
to {
    opacity: 1;
}
}
.wizard-container[data-v-7954d65a] {
  background-color: var(--surface-overlay);
  width: 100%;
  max-width: 1200px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-modal);
  animation: slideUp-7954d65a var(--duration-fast) var(--ease-out);
  border: var(--border-width-1) solid var(--border-primary);
}
@keyframes slideUp-7954d65a {
from {
    transform: translateY(20px);
    opacity: 0;
}
to {
    transform: translateY(0);
    opacity: 1;
}
}
.wizard-header[data-v-7954d65a] {
  padding: var(--space-6) var(--space-8);
  border-bottom: var(--border-width-1) solid var(--border-primary);
}
.header-breadcrumb[data-v-7954d65a] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.wizard-header h2[data-v-7954d65a] {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.wizard-body[data-v-7954d65a] {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.wizard-sidebar[data-v-7954d65a] {
  width: 280px;
  background-color: var(--bg-secondary);
  padding: var(--space-8) var(--space-6);
  border-right: var(--border-width-1) solid var(--border-primary);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.step-item[data-v-7954d65a] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  transition: var(--transition-colors);
}
.step-item.active[data-v-7954d65a] {
  background-color: var(--bg-hover);
}
.step-number[data-v-7954d65a] {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background-color: var(--bg-tertiary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  flex-shrink: 0;
}
.step-item.active .step-number[data-v-7954d65a] {
  background-color: var(--accent-primary);
  color: var(--color-white);
}
.step-item.completed .step-number[data-v-7954d65a] {
  background-color: var(--color-success);
  color: var(--color-white);
}
.step-label[data-v-7954d65a] {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
}
.step-item.active .step-label[data-v-7954d65a] {
  color: var(--accent-primary);
  font-weight: var(--font-weight-semibold);
}
.wizard-content[data-v-7954d65a] {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-8);
}
.step-container h3[data-v-7954d65a] {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-2) 0;
}
.step-description[data-v-7954d65a] {
  font-size: var(--font-size-base);
  color: var(--text-secondary);
  margin: 0 0 var(--space-8) 0;
}
.form-group[data-v-7954d65a] {
  margin-bottom: var(--space-6);
}
.form-label[data-v-7954d65a] {
  display: block;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.required[data-v-7954d65a] {
  color: var(--color-error);
}
.form-textarea[data-v-7954d65a] {
  width: 100%;
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--border-input);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: inherit;
  outline: none;
  transition: var(--transition-input);
  resize: vertical;
  background-color: var(--bg-input);
  color: var(--text-primary);
}
.form-textarea[data-v-7954d65a]:focus {
  border-color: var(--border-input-focus);
  box-shadow: var(--shadow-focus);
}
.form-hint[data-v-7954d65a] {
  margin-top: var(--space-1-5);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
.toggle-container[data-v-7954d65a] {
  margin-top: var(--space-2);
}
.toggle-switch[data-v-7954d65a] {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.toggle-switch input[data-v-7954d65a] {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider[data-v-7954d65a] {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-tertiary, rgba(255, 255, 255, 0.15));
  border: 1px solid var(--border-secondary, rgba(255, 255, 255, 0.25));
  transition: var(--transition-moderate);
  border-radius: var(--radius-full);
}
.toggle-slider[data-v-7954d65a]:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: var(--color-white);
  transition: var(--transition-moderate);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}
input:checked+.toggle-slider[data-v-7954d65a] {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}
input:checked+.toggle-slider[data-v-7954d65a]:before {
  transform: translateX(20px);
}
.workspace-roles-list[data-v-7954d65a] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.workspace-role-item[data-v-7954d65a] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
}
.workspace-info[data-v-7954d65a] {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
}
.workspace-badge[data-v-7954d65a] {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}
.workspace-name[data-v-7954d65a] {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.role-select[data-v-7954d65a] {
  padding: var(--space-2) var(--space-3);
  border: var(--border-width-1) solid var(--border-input);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  outline: none;
  cursor: pointer;
  background-color: var(--bg-input);
  color: var(--text-primary);
  min-width: 140px;
  transition: var(--transition-input);
}
.role-select[data-v-7954d65a]:focus {
  border-color: var(--border-input-focus);
  box-shadow: var(--shadow-focus);
}
.search-bar[data-v-7954d65a] {
  position: relative;
  margin-bottom: var(--space-4);
}
.search-icon[data-v-7954d65a] {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
}
.search-input[data-v-7954d65a] {
  width: 100%;
  padding: var(--space-2-5) var(--space-3) var(--space-2-5) 40px;
  border: var(--border-width-1) solid var(--border-input);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  outline: none;
  transition: var(--transition-input);
  background-color: var(--bg-input);
  color: var(--text-primary);
}
.search-input[data-v-7954d65a]:focus {
  border-color: var(--border-input-focus);
  box-shadow: var(--shadow-focus);
}
.inbox-access-table[data-v-7954d65a] {
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.table-header[data-v-7954d65a] {
  display: grid;
  grid-template-columns: 2fr 1.5fr 100px;
  padding: var(--space-3) var(--space-4);
  background-color: var(--bg-secondary);
  border-bottom: var(--border-width-1) solid var(--border-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.inbox-row[data-v-7954d65a] {
  display: grid;
  grid-template-columns: 2fr 1.5fr 100px;
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width-1) solid var(--border-secondary);
  align-items: center;
}
.inbox-row[data-v-7954d65a]:last-child {
  border-bottom: none;
}
.col-inbox[data-v-7954d65a],
.col-workspace[data-v-7954d65a] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-base);
  color: var(--text-primary);
}
.inbox-indicator[data-v-7954d65a] {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.workspace-badge-small[data-v-7954d65a] {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
}
.col-access[data-v-7954d65a] {
  display: flex;
  justify-content: center;
}
.info-panel[data-v-7954d65a] {
  background-color: var(--color-info-bg);
  border: var(--border-width-1) solid var(--color-info-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-info);
}
.info-panel svg[data-v-7954d65a] {
  width: 16px;
  height: 16px;
  color: var(--color-info);
  flex-shrink: 0;
}
.info-panel span[data-v-7954d65a] {
  font-weight: var(--font-weight-semibold);
}
.info-panel p[data-v-7954d65a] {
  margin: 0;
  color: var(--color-info);
}
.sidebar-inboxes-list[data-v-7954d65a] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-3);
}
.sidebar-inbox-item[data-v-7954d65a] {
  padding: var(--space-3);
  border: var(--border-width-1) solid var(--border-primary);
  border-radius: var(--radius-md);
  background-color: var(--bg-secondary);
}
.checkbox-label[data-v-7954d65a] {
  display: flex;
  align-items: center;
  gap: var(--space-2-5);
  cursor: pointer;
  font-size: var(--font-size-base);
  color: var(--text-primary);
}
.checkbox-input[data-v-7954d65a] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.checkbox-custom[data-v-7954d65a] {
  width: 18px;
  height: 18px;
  border: 2px solid var(--border-input);
  border-radius: var(--radius-sm);
  position: relative;
  transition: var(--transition-all);
}
.checkbox-input:checked~.checkbox-custom[data-v-7954d65a] {
  background-color: var(--accent-primary);
  border-color: var(--accent-primary);
}
.checkbox-input:checked~.checkbox-custom[data-v-7954d65a]::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.inbox-label[data-v-7954d65a] {
  font-weight: var(--font-weight-medium);
}
.workspace-label[data-v-7954d65a] {
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
}
.no-inboxes[data-v-7954d65a] {
  padding: var(--space-8);
  text-align: center;
  color: var(--text-secondary);
}
.wizard-footer[data-v-7954d65a] {
  padding: var(--space-4) var(--space-8);
  border-top: var(--border-width-1) solid var(--border-primary);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}
.btn-cancel[data-v-7954d65a],
.btn-back[data-v-7954d65a] {
  padding: var(--space-2-5) var(--space-4);
  border: var(--border-width-1) solid var(--border-secondary);
  background-color: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-button);
}
.btn-cancel[data-v-7954d65a]:hover:not(:disabled),
.btn-back[data-v-7954d65a]:hover:not(:disabled) {
  background-color: var(--bg-hover);
  border-color: var(--border-hover);
}
.btn-continue[data-v-7954d65a],
.btn-finish[data-v-7954d65a] {
  padding: var(--space-2-5) var(--space-5);
  background-color: var(--accent-primary);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--transition-button);
  min-width: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-continue[data-v-7954d65a]:hover:not(:disabled),
.btn-finish[data-v-7954d65a]:hover:not(:disabled) {
  background-color: var(--accent-primary-hover);
}
.btn-cancel[data-v-7954d65a]:disabled,
.btn-back[data-v-7954d65a]:disabled,
.btn-continue[data-v-7954d65a]:disabled,
.btn-finish[data-v-7954d65a]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.button-spinner[data-v-7954d65a] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-white);
  border-radius: var(--radius-full);
  animation: spin-7954d65a var(--duration-moderate) linear infinite;
}
@keyframes spin-7954d65a {
to {
    transform: rotate(360deg);
}
}

.teammate-detail[data-v-52e0c22c] {
  width: 100%;
  background-color: white;
  min-height: 100vh;
}
.detail-header[data-v-52e0c22c] {
  padding: 32px 32px 24px;
  margin-bottom: 0;
  background-color: white;
  border-bottom: none;
}
.btn-back[data-v-52e0c22c] {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: #6366F1;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background-color 0.2s;
}
.btn-back[data-v-52e0c22c]:hover {
  background-color: #EEF2FF;
}
.loading-container[data-v-52e0c22c],
.error-container[data-v-52e0c22c] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 20px;
  text-align: center;
}
.spinner[data-v-52e0c22c] {
  width: 40px;
  height: 40px;
  border: 3px solid #E5E7EB;
  border-top-color: #6366F1;
  border-radius: 50%;
  animation: spin-52e0c22c 0.8s linear infinite;
  margin-bottom: 16px;
}
@keyframes spin-52e0c22c {
to { transform: rotate(360deg);
}
}
.error-message[data-v-52e0c22c] {
  color: #DC2626;
  margin-bottom: 16px;
}
.btn-retry[data-v-52e0c22c] {
  background-color: #6366F1;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
}
.user-header[data-v-52e0c22c] {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  padding: 32px 32px 24px;
}
.user-avatar[data-v-52e0c22c] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: 600;
}
.user-name[data-v-52e0c22c] {
  font-size: 24px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
}
.user-email[data-v-52e0c22c] {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}
.tabs[data-v-52e0c22c] {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  padding: 0 32px;
}
.tab[data-v-52e0c22c] {
  background: none;
  border: none;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.2s;
}
.tab[data-v-52e0c22c]:hover {
  color: #374151;
}
.tab.active[data-v-52e0c22c] {
  color: #6366F1;
  border-bottom-color: #6366F1;
}
.tab-content[data-v-52e0c22c] {
  padding: 0 32px 32px;
}
.overview-tab[data-v-52e0c22c] {
  max-width: 600px;
}
.info-section[data-v-52e0c22c] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.info-row[data-v-52e0c22c] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.info-row label[data-v-52e0c22c] {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}
.info-input[data-v-52e0c22c] {
  padding: 10px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 14px;
  color: #6B7280;
  background-color: #F9FAFB;
}
.role-display[data-v-52e0c22c],
.availability-display[data-v-52e0c22c] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.role-badge[data-v-52e0c22c] {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}
.role-1[data-v-52e0c22c],
.role-2[data-v-52e0c22c] {
  background-color: #EEF2FF;
  color: #6366F1;
}
.role-3[data-v-52e0c22c] {
  background-color: #F3F4F6;
  color: #6B7280;
}
.admin-note[data-v-52e0c22c] {
  font-size: 12px;
  color: #6B7280;
}
.status-indicator[data-v-52e0c22c] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.status-indicator.active[data-v-52e0c22c] {
  background-color: #10B981;
}
.status-indicator.inactive[data-v-52e0c22c] {
  background-color: #EF4444;
}
.workspaces-layout[data-v-52e0c22c] {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
}
.workspaces-sidebar[data-v-52e0c22c] {
  border-right: 1px solid #E5E7EB;
  padding-right: 24px;
}
.sidebar-title[data-v-52e0c22c] {
  font-size: 12px;
  font-weight: 600;
  color: #6B7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 16px 0;
}
.workspace-item[data-v-52e0c22c] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-bottom: 4px;
}
.workspace-item[data-v-52e0c22c]:hover {
  background-color: #F3F4F6;
}
.workspace-item.active[data-v-52e0c22c] {
  background-color: #EEF2FF;
}
.workspace-avatar[data-v-52e0c22c] {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  font-weight: 600;
  flex-shrink: 0;
}
.workspace-name[data-v-52e0c22c] {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}
.workspace-role-badge[data-v-52e0c22c] {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
}
.badge-admin[data-v-52e0c22c] {
  background-color: #DBEAFE;
  color: #1E40AF;
}
.badge-member[data-v-52e0c22c] {
  background-color: #D1FAE5;
  color: #065F46;
}
.badge-no_access[data-v-52e0c22c] {
  background-color: #F3F4F6;
  color: #6B7280;
}
.workspace-title[data-v-52e0c22c] {
  font-size: 20px;
  font-weight: 600;
  color: #111827;
  margin: 0 0 4px 0;
}
.workspace-subtitle[data-v-52e0c22c] {
  font-size: 14px;
  color: #6B7280;
  margin: 0 0 24px 0;
}
.permission-section[data-v-52e0c22c] {
  margin-bottom: 32px;
  transition: opacity 0.2s;
}
.permission-section.section-disabled[data-v-52e0c22c] {
  opacity: 0.5;
  pointer-events: none;
}
.section-header[data-v-52e0c22c] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.section-label[data-v-52e0c22c] {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  display: block;
  margin-bottom: 8px;
}
.btn-link[data-v-52e0c22c] {
  background: none;
  border: none;
  color: #6366F1;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 8px;
}
.btn-link[data-v-52e0c22c]:hover:not(:disabled) {
  text-decoration: underline;
}
.btn-link[data-v-52e0c22c]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.role-select[data-v-52e0c22c] {
  padding: 10px 12px;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 14px;
  color: #111827;
  background-color: white;
  cursor: pointer;
  max-width: 300px;
}
.help-text[data-v-52e0c22c] {
  font-size: 13px;
  color: #6B7280;
  line-height: 1.5;
  margin-top: 8px;
}
.warning-text[data-v-52e0c22c] {
  font-size: 13px;
  color: #DC2626;
  line-height: 1.5;
  margin-top: 8px;
  font-weight: 500;
}
.inbox-list[data-v-52e0c22c] {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inbox-item[data-v-52e0c22c] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  transition: background-color 0.2s;
}
.inbox-item[data-v-52e0c22c]:hover {
 background-color: #F9FAFB;
}
.inbox-checkbox[data-v-52e0c22c] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}
.inbox-checkbox[data-v-52e0c22c]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.inbox-label[data-v-52e0c22c] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  cursor: pointer;
}
.inbox-icon[data-v-52e0c22c] {
  width: 32px;
  height: 32px;
  background-color: #F3F4F6;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
}
.inbox-info[data-v-52e0c22c] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.inbox-name[data-v-52e0c22c] {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}
.inbox-email[data-v-52e0c22c] {
  font-size: 12px;
  color: #6B7280;
}
.empty-inboxes[data-v-52e0c22c] {
  padding: 32px;
  text-align: center;
  color: #6B7280;
  font-size: 14px;
  background-color: #F9FAFB;
  border-radius: 8px;
}
.save-section[data-v-52e0c22c] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid #E5E7EB;
}
.btn-cancel[data-v-52e0c22c] {
  padding: 10px 20px;
  border: 1px solid #E5E7EB;
  background-color: white;
  color: #374151;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}
.btn-cancel[data-v-52e0c22c]:hover:not(:disabled) {
  background-color: #F3F4F6;
}
.btn-save[data-v-52e0c22c] {
  padding: 10px 20px;
  background-color: #6366F1;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-save[data-v-52e0c22c]:hover:not(:disabled) {
  background-color: #4F46E5;
}
.btn-save[data-v-52e0c22c]:disabled,
.btn-cancel[data-v-52e0c22c]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.saving-spinner[data-v-52e0c22c] {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin-52e0c22c 0.6s linear infinite;
}

.settings-teammates[data-v-696d42ab] {
  width: 100%;
  background-color: var(--bg-primary);
  min-height: 100vh;
}
.header-section[data-v-696d42ab] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-6);
  padding: var(--space-8) var(--space-8) 0;
}
.header-left[data-v-696d42ab] {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.breadcrumb[data-v-696d42ab] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
.breadcrumb .icon[data-v-696d42ab] {
  width: 14px;
  height: 14px;
}
.breadcrumb-text[data-v-696d42ab] {
  font-weight: var(--font-weight-medium);
}
.page-title[data-v-696d42ab] {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.btn-add[data-v-696d42ab],
.btn-add-teammate[data-v-696d42ab] {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: var(--space-2-5) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: background-color 0.2s, transform 0.15s;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.btn-add[data-v-696d42ab]:hover,
.btn-add-teammate[data-v-696d42ab]:hover {
  background-color: var(--accent-primary-hover);
  transform: translateY(-1px);
}
.toolbar[data-v-696d42ab] {
  margin-bottom: var(--space-6);
  padding: 0 var(--space-8);
}
.search-bar[data-v-696d42ab] {
  position: relative;
  max-width: 320px;
}
.search-icon[data-v-696d42ab] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-quaternary);
}
.search-input[data-v-696d42ab] {
  width: 100%;
  padding: var(--space-2-5) var(--space-3) var(--space-2-5) var(--space-10);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: var(--bg-input);
  color: var(--text-primary);
}
.search-input[data-v-696d42ab]:focus {
  border-color: var(--border-input-focus);
  box-shadow: 0 0 0 3px rgba(155, 135, 245, 0.15);
}
.loading-container[data-v-696d42ab],
.error-container[data-v-696d42ab] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-16) var(--space-8);
  text-align: center;
}
.spinner[data-v-696d42ab] {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-secondary);
  border-top-color: var(--accent-primary);
  border-radius: var(--radius-full);
  animation: spin-696d42ab 0.8s linear infinite;
  margin-bottom: var(--space-4);
}
@keyframes spin-696d42ab {
to {
    transform: rotate(360deg);
}
}
.error-message[data-v-696d42ab] {
  color: var(--color-error);
  margin-bottom: var(--space-4);
}
.btn-retry[data-v-696d42ab] {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  cursor: pointer;
}
.teammates-table[data-v-696d42ab] {
  background-color: var(--surface-base);
  width: 100%;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 1400px;
  box-shadow: var(--shadow-sm);
}
.table-header[data-v-696d42ab] {
  display: grid;
  grid-template-columns: 2fr 2fr 1.2fr 120px 150px;
  padding: var(--space-3) var(--space-8);
  background-color: var(--surface-raised);
  border-bottom: 1px solid var(--border-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.teammate-row[data-v-696d42ab] {
  display: grid;
  grid-template-columns: 2fr 2fr 1.2fr 120px 150px;
  padding: var(--space-4) var(--space-8);
  border-bottom: 1px solid var(--border-tertiary);
  align-items: center;
  transition: background-color 0.15s;
}
.teammate-row.clickable[data-v-696d42ab] {
  cursor: pointer;
}
.teammate-row[data-v-696d42ab]:hover {
  background-color: var(--bg-hover);
}
.teammate-row[data-v-696d42ab]:last-child {
  border-bottom: none;
}
.col-name[data-v-696d42ab] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.teammate-avatar[data-v-696d42ab] {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.teammate-info[data-v-696d42ab] {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.teammate-name[data-v-696d42ab] {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.teammate-email[data-v-696d42ab] {
  font-size: var(--font-size-sm);
  color: var(--accent-primary);
}
.admin-badge[data-v-696d42ab] {
  font-size: var(--font-size-xs);
  color: var(--accent-primary);
  font-weight: var(--font-weight-medium);
  display: inline-block;
  margin-top: 2px;
}
.role-text[data-v-696d42ab] {
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
}
.status-badge[data-v-696d42ab] {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.status-active[data-v-696d42ab] {
  background-color: rgba(16, 185, 129, 0.15);
  color: #34D399;
}
.status-inactive[data-v-696d42ab] {
  background-color: rgba(239, 68, 68, 0.15);
  color: #F87171;
}
.date-text[data-v-696d42ab] {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}
.empty-state[data-v-696d42ab] {
  padding: var(--space-16) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.empty-icon[data-v-696d42ab] {
  color: var(--text-quaternary);
  margin-bottom: var(--space-2);
}
.empty-state h3[data-v-696d42ab] {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.empty-state p[data-v-696d42ab] {
  font-size: var(--font-size-base);
  color: var(--text-tertiary);
  margin: 0;
}
.btn-primary[data-v-696d42ab] {
  background-color: #6366F1;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 8px;
}
.btn-primary[data-v-696d42ab]:hover {
  background-color: #4F46E5;
}
.col-actions[data-v-696d42ab] {
  display: flex;
  justify-content: center;
  align-items: center;
}
.btn-action[data-v-696d42ab] {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  min-width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.btn-activate[data-v-696d42ab] {
  background-color: #10B981;
  color: white;
}
.btn-activate[data-v-696d42ab]:hover:not(:disabled) {
  background-color: #059669;
}
.btn-deactivate[data-v-696d42ab] {
  background-color: #EF4444;
  color: white;
}
.btn-deactivate[data-v-696d42ab]:hover:not(:disabled) {
  background-color: #DC2626;
}
.btn-action[data-v-696d42ab]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.spinner-small[data-v-696d42ab] {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin-696d42ab 0.6s linear infinite;
}
.current-user-label[data-v-696d42ab] {
  font-size: 13px;
  color: #6B7280;
  font-style: italic;
}

/* Pending Invitations */
.pending-invitations-section[data-v-696d42ab] {
  margin-bottom: var(--space-6);
  max-width: 1400px;
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: var(--surface-base);
  box-shadow: var(--shadow-sm);
}
.pending-header[data-v-696d42ab] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-8);
  cursor: pointer;
  user-select: none;
  background-color: var(--surface-raised);
  border-bottom: 1px solid var(--border-secondary);
}
.pending-header[data-v-696d42ab]:hover {
  background-color: var(--bg-hover);
}
.pending-header-left[data-v-696d42ab] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.chevron-icon[data-v-696d42ab] {
  transition: transform 0.2s;
  color: var(--text-tertiary);
}
.chevron-icon.rotated[data-v-696d42ab] {
  transform: rotate(90deg);
}
.pending-title[data-v-696d42ab] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}
.pending-count[data-v-696d42ab] {
  background-color: var(--accent-primary);
  color: white;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  padding: 1px 8px;
  border-radius: var(--radius-full);
  min-width: 20px;
  text-align: center;
}
.pending-table-header[data-v-696d42ab] {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 100px;
  padding: var(--space-2) var(--space-8);
  background-color: var(--surface-raised);
  border-bottom: 1px solid var(--border-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-quaternary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pending-row[data-v-696d42ab] {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 100px;
  padding: var(--space-3) var(--space-8);
  border-bottom: 1px solid var(--border-tertiary);
  align-items: center;
}
.pending-row[data-v-696d42ab]:last-child {
  border-bottom: none;
}
.pending-email-text[data-v-696d42ab] {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}
.btn-cancel-invite[data-v-696d42ab] {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-secondary);
  background-color: transparent;
  color: var(--text-secondary);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 60px;
}
.btn-cancel-invite[data-v-696d42ab]:hover:not(:disabled) {
  border-color: #EF4444;
  color: #EF4444;
  background-color: rgba(239, 68, 68, 0.08);
}
.btn-cancel-invite[data-v-696d42ab]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.settings-panel[data-v-c760bfc4] {
  max-width: 800px;
}
.settings-header[data-v-c760bfc4] {
  margin-bottom: 32px;
}
.settings-header h1[data-v-c760bfc4] {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.settings-header p[data-v-c760bfc4] {
  font-size: 14px;
  color: var(--text-tertiary);
}
.profile-section[data-v-c760bfc4] {
  background: var(--surface-raised);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
}
.form-row[data-v-c760bfc4] {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}
.avatar-large[data-v-c760bfc4] {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: 600;
}
.btn-secondary[data-v-c760bfc4] {
  padding: 10px 20px;
  background: var(--bg-hover);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary[data-v-c760bfc4]:hover {
  background: var(--bg-active);
  border-color: var(--border-hover);
}
.form-group[data-v-c760bfc4] {
  margin-bottom: 20px;
}
.form-group label[data-v-c760bfc4] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.settings-input[data-v-c760bfc4] {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.2s;
}
.settings-input[data-v-c760bfc4]:focus {
  outline: none;
  border-color: var(--border-input-focus);
  background: var(--bg-input-focus);
}
.settings-input[data-v-c760bfc4]:read-only {
  cursor: not-allowed;
  opacity: 0.6;
}
.section-header[data-v-c760bfc4] {
  margin-bottom: 20px;
}
.section-header h3[data-v-c760bfc4] {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.section-header p[data-v-c760bfc4] {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* Theme Selector Styles */
.theme-selector[data-v-c760bfc4] {
  margin-top: 16px;
}
.theme-selector > label[data-v-c760bfc4] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.theme-options[data-v-c760bfc4] {
  display: flex;
  gap: 16px;
}
.theme-option[data-v-c760bfc4] {
  flex: 1;
  max-width: 180px;
  cursor: pointer;
  border-radius: 12px;
  padding: 12px;
  background: var(--bg-input);
  border: 2px solid var(--border-primary);
  transition: all 0.2s;
}
.theme-option[data-v-c760bfc4]:hover {
  border-color: var(--border-hover);
  background: var(--bg-hover);
}
.theme-option.active[data-v-c760bfc4] {
  border-color: var(--accent-primary);
  background: var(--bg-selected);
}
.theme-preview[data-v-c760bfc4] {
  width: 100%;
  height: 80px;
  border-radius: 8px;
  display: flex;
  overflow: hidden;
  margin-bottom: 10px;
}
.theme-preview-dark[data-v-c760bfc4] {
  background: #1a1a1a;
  border: 1px solid #3a3a3a;
}
.theme-preview-dark .preview-sidebar[data-v-c760bfc4] {
  width: 30%;
  background: #151515;
  border-right: 1px solid #3a3a3a;
}
.theme-preview-dark .preview-content[data-v-c760bfc4] {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.theme-preview-dark .preview-line[data-v-c760bfc4] {
  height: 8px;
  background: #3a3a3a;
  border-radius: 4px;
}
.theme-preview-dark .preview-line.short[data-v-c760bfc4] {
  width: 60%;
}
.theme-preview-light[data-v-c760bfc4] {
  background: #ffffff;
  border: 1px solid #e5e7eb;
}
.theme-preview-light .preview-sidebar[data-v-c760bfc4] {
  width: 30%;
  background: #f3f4f6;
  border-right: 1px solid #e5e7eb;
}
.theme-preview-light .preview-content[data-v-c760bfc4] {
  flex: 1;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.theme-preview-light .preview-line[data-v-c760bfc4] {
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
}
.theme-preview-light .preview-line.short[data-v-c760bfc4] {
  width: 60%;
}
.theme-label[data-v-c760bfc4] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.theme-label .check-icon[data-v-c760bfc4] {
  width: 16px;
  height: 16px;
  stroke: var(--color-success);
}

/* Default Inbox Selector */
.default-inbox-selector[data-v-c760bfc4] {
  margin-top: 16px;
}
.default-inbox-selector > label[data-v-c760bfc4] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.inbox-dropdown-wrapper[data-v-c760bfc4] {
  position: relative;
}
.inbox-selector[data-v-c760bfc4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.inbox-selector[data-v-c760bfc4]:hover {
  border-color: var(--border-input-hover);
  background: var(--bg-input-hover);
}
.selected-inbox[data-v-c760bfc4] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.inbox-icon[data-v-c760bfc4] {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inbox-icon svg[data-v-c760bfc4] {
  width: 18px;
  height: 18px;
  stroke: white;
}
.inbox-info[data-v-c760bfc4] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.inbox-name[data-v-c760bfc4] {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.inbox-email[data-v-c760bfc4] {
  font-size: 12px;
  color: var(--text-tertiary);
}
.dropdown-chevron[data-v-c760bfc4] {
  width: 20px;
  height: 20px;
  stroke: var(--text-tertiary);
  transition: transform 0.2s;
  flex-shrink: 0;
}
.dropdown-chevron.rotated[data-v-c760bfc4] {
  transform: rotate(180deg);
}
.inbox-dropdown[data-v-c760bfc4] {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-dropdown);
  z-index: 1000;
  overflow: hidden;
}
.inbox-search[data-v-c760bfc4] {
  padding: 12px;
  border-bottom: 1px solid var(--border-divider);
}
.search-input[data-v-c760bfc4] {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 13px;
}
.search-input[data-v-c760bfc4]:focus {
  outline: none;
  border-color: var(--border-input-focus);
}
.search-input[data-v-c760bfc4]::placeholder {
  color: var(--text-placeholder);
}
.inbox-list[data-v-c760bfc4] {
  max-height: 300px;
  overflow-y: auto;
}
.inbox-option[data-v-c760bfc4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.inbox-option[data-v-c760bfc4]:hover {
  background: var(--bg-hover);
}
.inbox-option.no-default[data-v-c760bfc4] {
  font-size: 14px;
  color: var(--text-tertiary);
  font-style: italic;
}
.inbox-option-label[data-v-c760bfc4] {
  flex: 1;
}
.inbox-option-content[data-v-c760bfc4] {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.inbox-icon-small[data-v-c760bfc4] {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.inbox-icon-small svg[data-v-c760bfc4] {
  width: 16px;
  height: 16px;
  stroke: white;
}
.inbox-option-info[data-v-c760bfc4] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.inbox-option-name[data-v-c760bfc4] {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.inbox-option-email[data-v-c760bfc4] {
  font-size: 12px;
  color: var(--text-tertiary);
}
.inbox-badge[data-v-c760bfc4] {
  font-size: 11px;
  padding: 2px 8px;
  background: var(--bg-selected);
  color: var(--accent-secondary);
  border-radius: 4px;
  font-weight: 500;
}
.check-icon[data-v-c760bfc4] {
  width: 20px;
  height: 20px;
  stroke: var(--color-success);
  flex-shrink: 0;
}
.inbox-divider[data-v-c760bfc4] {
  height: 1px;
  background: var(--border-divider);
  margin: 4px 0;
}

/* Timezone settings */
.timezone-settings[data-v-c760bfc4] {
  margin-top: 16px;
}
.toggle-row[data-v-c760bfc4] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.toggle-info[data-v-c760bfc4] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.toggle-info label[data-v-c760bfc4] {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.toggle-description[data-v-c760bfc4] {
  font-size: 12px;
  color: var(--text-tertiary);
}
.toggle-switch[data-v-c760bfc4] {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input[data-v-c760bfc4] {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider[data-v-c760bfc4] {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--border-primary);
  border-radius: 24px;
  transition: 0.3s;
}
.toggle-slider[data-v-c760bfc4]:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  border-radius: 50%;
  transition: 0.3s;
}
.toggle-switch input:checked + .toggle-slider[data-v-c760bfc4] {
  background-color: var(--accent-primary);
}
.toggle-switch input:checked + .toggle-slider[data-v-c760bfc4]:before {
  transform: translateX(20px);
}
.settings-select[data-v-c760bfc4] {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s;
}
.settings-select[data-v-c760bfc4]:focus {
  outline: none;
  border-color: var(--border-input-focus);
}
.settings-select[data-v-c760bfc4]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.form-group.disabled[data-v-c760bfc4] {
  opacity: 0.5;
}
.timezone-preview[data-v-c760bfc4] {
  margin-top: 12px;
  padding: 10px 14px;
  background: var(--bg-hover);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.preview-time[data-v-c760bfc4] {
  color: var(--accent-primary);
  font-weight: 600;
  font-family: monospace;
  font-size: 13px;
}

/* Password change form */
.password-change-form[data-v-c760bfc4] {
  margin-top: 16px;
}
.password-input-wrapper[data-v-c760bfc4] {
  position: relative;
  display: flex;
  align-items: center;
}
.password-input-wrapper .settings-input[data-v-c760bfc4] {
  padding-right: 44px;
}
.toggle-password[data-v-c760bfc4] {
  position: absolute;
  right: 12px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.toggle-password[data-v-c760bfc4]:hover {
  color: var(--text-primary);
}
.settings-input.input-error[data-v-c760bfc4] {
  border-color: var(--color-error);
}
.field-error[data-v-c760bfc4] {
  display: block;
  font-size: 12px;
  color: var(--color-error);
  margin-top: 6px;
}
.alert[data-v-c760bfc4] {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 20px;
}
.alert-success[data-v-c760bfc4] {
  background: var(--color-success-bg);
  border: 1px solid var(--color-success-border);
  color: var(--color-success);
}
.alert-error[data-v-c760bfc4] {
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error);
}
.btn-primary[data-v-c760bfc4] {
  padding: 10px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}
.btn-primary[data-v-c760bfc4]:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.btn-primary[data-v-c760bfc4]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Auto-reply settings */
.auto-reply-settings[data-v-c760bfc4] {
  margin-top: 16px;
}
.form-row-dates[data-v-c760bfc4] {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
}
.form-row-dates .form-group[data-v-c760bfc4] {
  flex: 1;
}
.settings-textarea[data-v-c760bfc4] {
  resize: vertical;
  min-height: 80px;
  font-family: inherit;
  line-height: 1.5;
}
.status-badge[data-v-c760bfc4] {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.status-active[data-v-c760bfc4] {
  background: var(--color-success-bg, rgba(34, 197, 94, 0.1));
  color: var(--color-success, #22c55e);
}
.status-inactive[data-v-c760bfc4] {
  background: var(--bg-hover);
  color: var(--text-tertiary);
}
.disabled[data-v-c760bfc4] {
  opacity: 0.5;
  pointer-events: none;
}

.settings-templates[data-v-2251d663] {
  padding: 32px 40px;
  width: 100%;
}
.settings-header[data-v-2251d663] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-primary);
}
.header-content h1[data-v-2251d663] {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.header-content p[data-v-2251d663] {
  font-size: 14px;
  color: var(--text-tertiary);
}
.btn-primary[data-v-2251d663] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary[data-v-2251d663]:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.btn-primary[data-v-2251d663]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Search Bar */
.search-bar[data-v-2251d663] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface-raised);
  border: 1px solid var(--border-primary);
  border-radius: 10px;
  margin-bottom: 24px;
}
.search-bar svg[data-v-2251d663] {
  color: var(--text-muted);
  flex-shrink: 0;
}
.search-input[data-v-2251d663] {
  flex: 1;
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
}
.search-input[data-v-2251d663]::placeholder {
  color: var(--text-muted);
}
.clear-search[data-v-2251d663] {
  padding: 4px;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.clear-search[data-v-2251d663]:hover {
  color: var(--text-primary);
  background: var(--bg-hover);
}

/* Loading State */
.loading-state[data-v-2251d663] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
  gap: 16px;
}
.spinner[data-v-2251d663] {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-primary);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin-2251d663 1s linear infinite;
}
@keyframes spin-2251d663 {
to { transform: rotate(360deg);
}
}

/* Empty State */
.empty-state[data-v-2251d663] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
.empty-icon[data-v-2251d663] {
  color: var(--text-muted);
  margin-bottom: 20px;
}
.empty-state h3[data-v-2251d663] {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.empty-state p[data-v-2251d663] {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-bottom: 24px;
  max-width: 400px;
}

/* Templates Grid */
.templates-grid[data-v-2251d663] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 20px;
}
.template-card[data-v-2251d663] {
  background: var(--surface-raised);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
}
.template-card[data-v-2251d663]:hover {
  background: var(--bg-hover);
  border-color: var(--border-secondary);
  transform: translateY(-2px);
}
.template-header[data-v-2251d663] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}
.template-name[data-v-2251d663] {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.template-actions[data-v-2251d663] {
  display: flex;
  gap: 8px;
}
.action-btn[data-v-2251d663] {
  padding: 6px;
  background: var(--surface-raised);
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s;
}
.action-btn[data-v-2251d663]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.action-btn.delete[data-v-2251d663]:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.template-subject[data-v-2251d663] {
  font-size: 13px;
  color: #a5b4fc;
  margin-bottom: 8px;
}
.template-preview[data-v-2251d663] {
  font-size: 14px;
  color: var(--text-tertiary);
  line-height: 1.5;
  margin-bottom: 12px;
  flex: 1;
}
.template-footer[data-v-2251d663] {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.template-meta[data-v-2251d663] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-muted);
}
.workspace-badge[data-v-2251d663],
.company-badge[data-v-2251d663] {
  padding: 4px 10px;
  background: rgba(102, 126, 234, 0.15);
  color: #a5b4fc;
  border-radius: 4px;
  font-weight: 500;
}
.company-badge[data-v-2251d663] {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}
.attachment-indicator[data-v-2251d663] {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--text-tertiary);
}

/* Modal */
.modal-overlay[data-v-2251d663] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.modal[data-v-2251d663] {
  background: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal.modal-lg[data-v-2251d663] {
  max-width: 800px;
}
.modal.modal-sm[data-v-2251d663] {
  max-width: 400px;
}
.modal-header[data-v-2251d663] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-primary);
}
.modal-header h2[data-v-2251d663] {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.close-btn[data-v-2251d663] {
  padding: 4px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.close-btn[data-v-2251d663]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.modal-body[data-v-2251d663] {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer[data-v-2251d663] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-primary);
}

/* Form */
.form-group[data-v-2251d663] {
  margin-bottom: 20px;
}
.form-row-2col[data-v-2251d663] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-group label[data-v-2251d663] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.form-input[data-v-2251d663],
.form-select[data-v-2251d663],
.form-textarea[data-v-2251d663] {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.2s;
}
.form-input[data-v-2251d663]:focus,
.form-select[data-v-2251d663]:focus,
.form-textarea[data-v-2251d663]:focus {
  outline: none;
  border-color: rgba(102, 126, 234, 0.5);
  background: var(--bg-input);
}
.form-textarea[data-v-2251d663] {
  resize: vertical;
  min-height: 150px;
  font-family: inherit;
  line-height: 1.5;
}
.form-select[data-v-2251d663] {
  cursor: pointer;
}
.form-select option[data-v-2251d663] {
  background: var(--surface-overlay);
  color: var(--text-primary);
}

/* Attachments - matches email detail view style */
.attachments-section-template[data-v-2251d663] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.attachments-grid-template[data-v-2251d663] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  max-height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}

/* Custom scrollbar for attachments */
.attachments-grid-template[data-v-2251d663]::-webkit-scrollbar {
  width: 8px;
}
.attachments-grid-template[data-v-2251d663]::-webkit-scrollbar-track {
  background: var(--bg-primary);
  border-radius: 4px;
}
.attachments-grid-template[data-v-2251d663]::-webkit-scrollbar-thumb {
  background: var(--border-secondary);
  border-radius: 4px;
}
.attachments-grid-template[data-v-2251d663]::-webkit-scrollbar-thumb:hover {
  background: var(--text-muted);
}
.upload-area[data-v-2251d663] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 2px dashed var(--border-secondary);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--text-muted);
  font-size: 13px;
}
.upload-area[data-v-2251d663]:hover {
  border-color: rgba(102, 126, 234, 0.5);
  background: rgba(102, 126, 234, 0.05);
  color: var(--text-tertiary);
}
.btn-secondary[data-v-2251d663] {
  padding: 10px 20px;
  background: var(--surface-raised);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary[data-v-2251d663]:hover {
  background: var(--bg-hover);
}
.btn-danger[data-v-2251d663] {
  padding: 10px 20px;
  background: #ef4444;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-danger[data-v-2251d663]:hover:not(:disabled) {
  background: #dc2626;
}
.btn-danger[data-v-2251d663]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.alert[data-v-2251d663] {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 20px;
}
.alert-error[data-v-2251d663] {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.warning-text[data-v-2251d663] {
  color: #f87171;
  font-size: 13px;
  margin-top: 8px;
}

/* Rich Text Editor */
.editor-wrapper[data-v-2251d663] {
  position: relative;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  overflow: visible;
}
.editor-toolbar[data-v-2251d663] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-primary);
  flex-wrap: wrap;
}
.toolbar-select[data-v-2251d663] {
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
}
.toolbar-select[data-v-2251d663]:hover {
  background: var(--bg-hover);
}
.toolbar-select-font[data-v-2251d663] {
  width: 110px;
}
.toolbar-select-size[data-v-2251d663] {
  width: 55px;
}
.toolbar-select option[data-v-2251d663] {
  background: var(--surface-overlay);
  color: var(--text-primary);
}
.toolbar-btn[data-v-2251d663] {
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toolbar-btn[data-v-2251d663]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.toolbar-separator[data-v-2251d663] {
  width: 1px;
  height: 20px;
  background: var(--border-primary);
  margin: 0 6px;
}

/* Color Picker */
.color-picker-wrapper[data-v-2251d663] {
  position: relative;
}
.color-btn[data-v-2251d663] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
}
.color-indicator[data-v-2251d663] {
  width: 14px;
  height: 3px;
  border-radius: 1px;
}
.color-picker-dropdown[data-v-2251d663] {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 10px;
  box-shadow: var(--shadow-dropdown);
  z-index: 100;
}
.color-presets[data-v-2251d663] {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.color-preset[data-v-2251d663] {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.color-preset[data-v-2251d663]:hover {
  transform: scale(1.15);
  border-color: var(--text-tertiary);
}

/* Template Editor */
.template-editor[data-v-2251d663] {
  min-height: 250px;
  max-height: 400px;
  overflow-y: auto;
  padding: 16px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  outline: none;
}
.template-editor[data-v-2251d663]:empty:before {
  content: attr(placeholder);
  color: var(--text-muted);
}
.template-editor[data-v-2251d663] img {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  cursor: pointer;
  margin: 4px 8px 4px 0;
}
.template-editor[data-v-2251d663] img:hover {
  outline: 2px solid rgba(102, 126, 234, 0.5);
}

/* Image Resize Overlay */
.image-resize-overlay[data-v-2251d663] {
  pointer-events: none;
  border: 2px solid #667eea;
  background: rgba(102, 126, 234, 0.1);
  z-index: 10;
}
.resize-handle[data-v-2251d663] {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #667eea;
  border: 2px solid #fff;
  border-radius: 2px;
  pointer-events: auto;
  z-index: 11;
}
.resize-handle-nw[data-v-2251d663] {
  top: -6px;
  left: -6px;
  cursor: nwse-resize;
}
.resize-handle-ne[data-v-2251d663] {
  top: -6px;
  right: -6px;
  cursor: nesw-resize;
}
.resize-handle-sw[data-v-2251d663] {
  bottom: -6px;
  left: -6px;
  cursor: nesw-resize;
}
.resize-handle-se[data-v-2251d663] {
  bottom: -6px;
  right: -6px;
  cursor: nwse-resize;
}
.resize-dimensions[data-v-2251d663] {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}

.settings-signatures[data-v-28c2717d] {
  padding: 32px 40px;
  width: 100%;
}
.settings-header[data-v-28c2717d] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-primary);
}
.header-content h1[data-v-28c2717d] {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.header-content p[data-v-28c2717d] {
  font-size: 14px;
  color: var(--text-tertiary);
}
.btn-primary[data-v-28c2717d] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-primary[data-v-28c2717d]:hover:not(:disabled) {
  opacity: 0.9;
  transform: translateY(-1px);
}
.btn-primary[data-v-28c2717d]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Loading State */
.loading-state[data-v-28c2717d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
  gap: 16px;
}
.spinner[data-v-28c2717d] {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-primary);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: spin-28c2717d 1s linear infinite;
}
@keyframes spin-28c2717d {
to { transform: rotate(360deg);
}
}

/* Empty State */
.empty-state[data-v-28c2717d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}
.empty-icon[data-v-28c2717d] {
  color: var(--text-muted);
  margin-bottom: 20px;
}
.empty-state h3[data-v-28c2717d] {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.empty-state p[data-v-28c2717d] {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-bottom: 24px;
  max-width: 400px;
}

/* Signatures List */
.signatures-list[data-v-28c2717d] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--surface-raised);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  overflow: hidden;
}
.signature-item[data-v-28c2717d] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: transparent;
  transition: all 0.2s;
}
.signature-item[data-v-28c2717d]:hover {
  background: var(--bg-hover);
}
.signature-item.is-default[data-v-28c2717d] {
  background: rgba(102, 126, 234, 0.08);
}
.signature-info[data-v-28c2717d] {
  display: flex;
  align-items: center;
  gap: 12px;
}
.signature-name[data-v-28c2717d] {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.default-badge[data-v-28c2717d] {
  padding: 3px 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.signature-actions[data-v-28c2717d] {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
}
.signature-item:hover .signature-actions[data-v-28c2717d] {
  opacity: 1;
}
.action-btn[data-v-28c2717d] {
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s;
}
.action-btn[data-v-28c2717d]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.action-btn.set-default[data-v-28c2717d]:hover {
  background: rgba(102, 126, 234, 0.2);
  color: #a5b4fc;
}
.action-btn.delete[data-v-28c2717d]:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

/* Modal */
.modal-overlay[data-v-28c2717d] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.modal[data-v-28c2717d] {
  background: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 16px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal.modal-lg[data-v-28c2717d] {
  max-width: 800px;
}
.modal.modal-sm[data-v-28c2717d] {
  max-width: 400px;
}
.modal-header[data-v-28c2717d] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-primary);
}
.modal-header h2[data-v-28c2717d] {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}
.close-btn[data-v-28c2717d] {
  padding: 4px;
  background: none;
  border: none;
  color: var(--text-tertiary);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;
}
.close-btn[data-v-28c2717d]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.modal-body[data-v-28c2717d] {
  padding: 24px;
  overflow-y: auto;
  flex: 1;
}
.modal-footer[data-v-28c2717d] {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-primary);
}

/* Form */
.form-group[data-v-28c2717d] {
  margin-bottom: 20px;
}
.form-group label[data-v-28c2717d] {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.form-input[data-v-28c2717d],
.form-select[data-v-28c2717d] {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.2s;
}
.form-input[data-v-28c2717d]:focus,
.form-select[data-v-28c2717d]:focus {
  outline: none;
  border-color: rgba(102, 126, 234, 0.5);
  background: var(--bg-input);
}
.form-hint[data-v-28c2717d] {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
}
.form-select option[data-v-28c2717d] {
  background: var(--surface-overlay);
  color: var(--text-primary);
}

/* Inbox Checkboxes */
.inbox-checkboxes[data-v-28c2717d] {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  max-height: 150px;
  overflow-y: auto;
}
.checkbox-item[data-v-28c2717d] {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
}
.checkbox-item input[type="checkbox"][data-v-28c2717d] {
  width: 16px;
  height: 16px;
  accent-color: #667eea;
}
.checkbox-label[data-v-28c2717d] {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text-secondary);
  cursor: pointer;
}
.checkbox-label input[type="checkbox"][data-v-28c2717d] {
  width: 16px;
  height: 16px;
  accent-color: #667eea;
}

/* Editor */
.editor-wrapper[data-v-28c2717d] {
  position: relative;
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  overflow: visible;
}
.editor-toolbar[data-v-28c2717d] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--border-primary);
  flex-wrap: wrap;
}
.toolbar-select[data-v-28c2717d] {
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 12px;
  padding: 4px 8px;
  cursor: pointer;
  outline: none;
}
.toolbar-select[data-v-28c2717d]:hover {
  background: var(--bg-hover);
}
.toolbar-select-font[data-v-28c2717d] {
  width: 110px;
}
.toolbar-select-size[data-v-28c2717d] {
  width: 55px;
}
.toolbar-select option[data-v-28c2717d] {
  background: var(--surface-overlay);
  color: var(--text-primary);
}
.toolbar-btn[data-v-28c2717d] {
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.toolbar-btn[data-v-28c2717d]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.toolbar-separator[data-v-28c2717d] {
  width: 1px;
  height: 20px;
  background: var(--border-primary);
  margin: 0 6px;
}

/* Color Picker */
.color-picker-wrapper[data-v-28c2717d] {
  position: relative;
}
.color-btn[data-v-28c2717d] {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
}
.color-indicator[data-v-28c2717d] {
  width: 14px;
  height: 3px;
  border-radius: 1px;
}
.color-picker-dropdown[data-v-28c2717d] {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  padding: 10px;
  box-shadow: var(--shadow-dropdown);
  z-index: 100;
}
.color-presets[data-v-28c2717d] {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.color-preset[data-v-28c2717d] {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid var(--border-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.color-preset[data-v-28c2717d]:hover {
  transform: scale(1.15);
  border-color: var(--text-tertiary);
}
.signature-editor[data-v-28c2717d] {
  min-height: 200px;
  padding: 16px;
  background: var(--bg-input);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  outline: none;
}
.signature-editor[data-v-28c2717d]:empty:before {
  content: attr(placeholder);
  color: var(--text-muted);
}
.signature-editor[data-v-28c2717d] img {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  cursor: pointer;
  margin: 4px 8px 4px 0;
}
.signature-editor[data-v-28c2717d] img:hover {
  outline: 2px solid rgba(102, 126, 234, 0.5);
}

/* Image Resize Overlay */
.image-resize-overlay[data-v-28c2717d] {
  pointer-events: none;
  border: 2px solid #667eea;
  background: rgba(102, 126, 234, 0.1);
  z-index: 10;
}
.resize-handle[data-v-28c2717d] {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #667eea;
  border: 2px solid #fff;
  border-radius: 2px;
  pointer-events: auto;
  z-index: 11;
}
.resize-handle-nw[data-v-28c2717d] {
  top: -6px;
  left: -6px;
  cursor: nwse-resize;
}
.resize-handle-ne[data-v-28c2717d] {
  top: -6px;
  right: -6px;
  cursor: nesw-resize;
}
.resize-handle-sw[data-v-28c2717d] {
  bottom: -6px;
  left: -6px;
  cursor: nesw-resize;
}
.resize-handle-se[data-v-28c2717d] {
  bottom: -6px;
  right: -6px;
  cursor: nwse-resize;
}
.resize-dimensions[data-v-28c2717d] {
  position: absolute;
  bottom: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}

/* Buttons */
.btn-secondary[data-v-28c2717d] {
  padding: 10px 20px;
  background: var(--surface-raised);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-secondary[data-v-28c2717d]:hover {
  background: var(--bg-hover);
}
.btn-danger[data-v-28c2717d] {
  padding: 10px 20px;
  background: #ef4444;
  border: none;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-danger[data-v-28c2717d]:hover:not(:disabled) {
  background: #dc2626;
}
.btn-danger[data-v-28c2717d]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.alert[data-v-28c2717d] {
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 20px;
}
.alert-error[data-v-28c2717d] {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}
.warning-text[data-v-28c2717d] {
  color: #f87171;
  font-size: 13px;
  margin-top: 8px;
}

.rule-editor[data-v-9bf5a246] {
  max-width: 700px;
  margin: 0 auto;
  padding: 24px;
}
.editor-header[data-v-9bf5a246] {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.editor-header h2[data-v-9bf5a246] {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.btn-back[data-v-9bf5a246] {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
}
.btn-back[data-v-9bf5a246]:hover {
  background: var(--bg-tertiary, #f3f4f6);
}
.editor-body[data-v-9bf5a246] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.editor-section[data-v-9bf5a246] {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  padding: 16px;
  background: var(--bg-secondary, #fff);
}
.section-label[data-v-9bf5a246] {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}

/* Trigger config (comment by / body contains) */
.trigger-config[data-v-9bf5a246] {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  background: var(--bg-tertiary, #f9fafb);
  border-radius: 6px;
  border: 1px solid var(--border-color, #e5e7eb);
}
.trigger-config-row[data-v-9bf5a246] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.trigger-config-label[data-v-9bf5a246] {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  min-width: 50px;
  padding-top: 7px;
  flex-shrink: 0;
}
.trigger-config-field[data-v-9bf5a246] {
  flex: 1;
  min-width: 0;
}
.trigger-config-field .form-input[data-v-9bf5a246],
.trigger-config-field .form-select[data-v-9bf5a246],
.trigger-config-field .form-input-sm[data-v-9bf5a246],
.trigger-config-field .form-select-sm[data-v-9bf5a246] {
  width: 100%;
}
.section-hint[data-v-9bf5a246] {
  font-size: 12px;
  color: var(--text-tertiary, #9ca3af);
  margin: 0 0 12px 0;
}
.form-input[data-v-9bf5a246],
.form-select[data-v-9bf5a246] {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-primary);
  background: var(--bg-primary, #fff);
  outline: none;
  box-sizing: border-box;
}
.form-input[data-v-9bf5a246]:focus,
.form-select[data-v-9bf5a246]:focus {
  border-color: var(--accent-primary, #6366f1);
}
.form-input-sm[data-v-9bf5a246],
.form-select-sm[data-v-9bf5a246] {
  padding: 6px 10px;
  font-size: 12px;
  width: auto;
  flex: 1;
  min-width: 0;
}

/* Condition/Action rows */
.condition-row[data-v-9bf5a246],
.action-row[data-v-9bf5a246] {
  margin-bottom: 8px;
}
.section-label-row[data-v-9bf5a246] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
}
.section-label-row .section-label[data-v-9bf5a246] {
  margin-bottom: 0;
}
.logic-toggle[data-v-9bf5a246] {
  display: flex;
  gap: 2px;
  background: var(--bg-tertiary, #f3f4f6);
  border-radius: 6px;
  padding: 2px;
}
.logic-btn[data-v-9bf5a246] {
  padding: 3px 10px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary, #9ca3af);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.logic-btn.active[data-v-9bf5a246] {
  background: var(--accent-primary, #6366f1);
  color: white;
}
.logic-btn[data-v-9bf5a246]:hover:not(.active) {
  color: var(--text-primary);
}
.logic-badge[data-v-9bf5a246] {
  display: inline-block;
  padding: 2px 8px;
  background: var(--bg-tertiary, #f3f4f6);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary, #9ca3af);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.row-fields[data-v-9bf5a246] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-remove[data-v-9bf5a246] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: var(--text-tertiary, #9ca3af);
  cursor: pointer;
  flex-shrink: 0;
}
.btn-remove[data-v-9bf5a246]:hover {
  background: #fef2f2;
  color: #ef4444;
}
.btn-add[data-v-9bf5a246] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px dashed var(--border-color, #d1d5db);
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
  margin-top: 8px;
}
.btn-add[data-v-9bf5a246]:hover {
  border-color: var(--accent-primary, #6366f1);
  color: var(--accent-primary, #6366f1);
}

/* Footer */
.editor-footer[data-v-9bf5a246] {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color, #e5e7eb);
}
.btn-primary[data-v-9bf5a246] {
  padding: 8px 20px;
  background: var(--accent-primary, #6366f1);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.btn-primary[data-v-9bf5a246]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-primary[data-v-9bf5a246]:hover:not(:disabled) {
  opacity: 0.9;
}
.btn-secondary[data-v-9bf5a246] {
  padding: 8px 20px;
  background: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.btn-secondary[data-v-9bf5a246]:hover {
  background: var(--bg-tertiary, #f3f4f6);
}

/* Tag Picker */
.tag-picker[data-v-9bf5a246] {
  position: relative;
  flex: 1;
  min-width: 0;
}
.tag-picker-trigger[data-v-9bf5a246] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  background: var(--bg-primary, #fff);
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  min-height: 30px;
  box-sizing: border-box;
}
.tag-picker-trigger[data-v-9bf5a246]:hover {
  border-color: var(--accent-primary, #6366f1);
}
.tag-selected-list[data-v-9bf5a246] {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow: hidden;
}
.tag-chip[data-v-9bf5a246] {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--tag-color, #6366f1);
  background: color-mix(in srgb, var(--tag-color, #6366f1) 12%, transparent);
  white-space: nowrap;
}
.picker-item.tag-picker-item[data-v-9bf5a246] {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
.tag-dot[data-v-9bf5a246] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tag-check[data-v-9bf5a246] {
  margin-left: auto;
  color: var(--accent-primary, #6366f1);
  flex-shrink: 0;
}
.teammate-chip[data-v-9bf5a246] {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--accent-primary, #6366f1);
  background: var(--accent-primary-light, #eef2ff);
  white-space: nowrap;
}

/* Teammate Picker */
.teammate-picker[data-v-9bf5a246] {
  position: relative;
  flex: 1;
  min-width: 0;
}
.teammate-picker-trigger[data-v-9bf5a246] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 6px;
  background: var(--bg-primary, #fff);
  font-size: 12px;
  color: var(--text-primary);
  cursor: pointer;
  text-align: left;
  min-height: 30px;
  box-sizing: border-box;
}
.teammate-picker-trigger[data-v-9bf5a246]:hover {
  border-color: var(--accent-primary, #6366f1);
}
.picker-placeholder[data-v-9bf5a246] {
  color: var(--text-tertiary, #9ca3af);
}
.picker-selected[data-v-9bf5a246] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.teammate-picker-dropdown[data-v-9bf5a246] {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 240px;
  background: var(--bg-primary, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 100;
  overflow: hidden;
}
.picker-search[data-v-9bf5a246] {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  font-size: 12px;
  color: var(--text-primary);
  background: var(--bg-primary, #fff);
  outline: none;
  box-sizing: border-box;
}
.picker-list[data-v-9bf5a246] {
  max-height: 200px;
  overflow-y: auto;
}
.picker-item[data-v-9bf5a246] {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.picker-item[data-v-9bf5a246]:hover {
  background: var(--bg-tertiary, #f3f4f6);
}
.picker-item.selected[data-v-9bf5a246] {
  background: var(--accent-primary-light, #eef2ff);
}
.picker-item-name[data-v-9bf5a246] {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
}
.picker-item-email[data-v-9bf5a246] {
  font-size: 11px;
  color: var(--text-tertiary, #9ca3af);
}
.picker-empty[data-v-9bf5a246] {
  padding: 12px;
  text-align: center;
  font-size: 12px;
  color: var(--text-tertiary, #9ca3af);
}

/* Error */
.error-banner[data-v-9bf5a246] {
  margin-top: 12px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  color: #dc2626;
  font-size: 13px;
}

.settings-automations[data-v-d624c930] {
  max-width: 800px;
  margin: 0 auto;
  padding: 32px 24px;
}
.settings-header[data-v-d624c930] {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}
.header-content h1[data-v-d624c930] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 4px 0;
}
.header-content p[data-v-d624c930] {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.btn-primary[data-v-d624c930] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--accent-primary, #6366f1);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
}
.btn-primary[data-v-d624c930]:hover {
  opacity: 0.9;
}

/* Loading */
.loading-state[data-v-d624c930] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 0;
  color: var(--text-secondary);
  font-size: 14px;
}
.spinner[data-v-d624c930] {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-color, #e5e7eb);
  border-top-color: var(--accent-primary, #6366f1);
  border-radius: 50%;
  animation: spin-d624c930 0.6s linear infinite;
}
@keyframes spin-d624c930 {
to { transform: rotate(360deg);
}
}

/* Empty */
.empty-state[data-v-d624c930] {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-secondary);
}
.empty-icon[data-v-d624c930] {
  margin-bottom: 16px;
  opacity: 0.4;
}
.empty-state h3[data-v-d624c930] {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px 0;
}
.empty-state p[data-v-d624c930] {
  font-size: 13px;
  margin: 0 0 20px 0;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* Info card */
.info-card[data-v-d624c930] {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent-primary, #6366f1) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-primary, #6366f1) 18%, transparent);
  border-radius: 8px;
  margin-bottom: 20px;
}
.info-card-icon[data-v-d624c930] {
  color: var(--accent-primary, #6366f1);
  flex-shrink: 0;
  margin-top: 1px;
}
.info-card-text[data-v-d624c930] {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
}
.info-card-text strong[data-v-d624c930] {
  color: var(--text-primary);
}

/* Rules List */
.inbox-group[data-v-d624c930] {
  margin-bottom: 24px;
}
.inbox-group-header[data-v-d624c930] {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.inbox-color-dot[data-v-d624c930] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.inbox-group-name[data-v-d624c930] {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.inbox-group-count[data-v-d624c930] {
  font-size: 12px;
  color: var(--text-tertiary, #9ca3af);
  margin-left: auto;
}
.rule-card[data-v-d624c930] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px 12px 8px;
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 8px;
  margin-bottom: 8px;
  background: var(--bg-secondary, #fff);
  transition: border-color 0.15s, opacity 0.15s, box-shadow 0.15s;
  cursor: default;
}
.rule-card[data-v-d624c930]:hover {
  border-color: var(--accent-primary, #6366f1);
}
.rule-card.dragging[data-v-d624c930] {
  opacity: 0.4;
}
.rule-card.drag-over[data-v-d624c930] {
  border-color: var(--accent-primary, #6366f1);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary, #6366f1) 20%, transparent);
}
.drag-handle[data-v-d624c930] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  color: var(--text-tertiary, #d1d5db);
  cursor: grab;
  flex-shrink: 0;
  border-radius: 4px;
}
.drag-handle[data-v-d624c930]:hover {
  color: var(--text-secondary);
  background: var(--bg-tertiary, #f3f4f6);
}
.drag-handle[data-v-d624c930]:active {
  cursor: grabbing;
}
.rule-info[data-v-d624c930] {
  flex: 1;
  min-width: 0;
}
.rule-name[data-v-d624c930] {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.rule-meta[data-v-d624c930] {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  flex-wrap: wrap;
}
.trigger-badge[data-v-d624c930] {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--bg-tertiary, #f3f4f6);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
}
.meta-sep[data-v-d624c930] {
  color: var(--text-tertiary, #d1d5db);
}
.trigger-count[data-v-d624c930] {
  color: var(--text-tertiary);
}
.rule-actions[data-v-d624c930] {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
  flex-shrink: 0;
}

/* Toggle */
.toggle-switch[data-v-d624c930] {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  cursor: pointer;
}
.toggle-switch input[data-v-d624c930] {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider[data-v-d624c930] {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border-color, #d1d5db);
  border-radius: 10px;
  transition: background 0.2s;
}
.toggle-slider[data-v-d624c930]::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  bottom: 2px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle-switch input:checked + .toggle-slider[data-v-d624c930] {
  background: var(--accent-primary, #6366f1);
}
.toggle-switch input:checked + .toggle-slider[data-v-d624c930]::before {
  transform: translateX(16px);
}

/* Icon buttons */
.btn-icon[data-v-d624c930] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
}
.btn-icon[data-v-d624c930]:hover {
  background: var(--bg-tertiary, #f3f4f6);
  color: var(--text-primary);
}
.btn-icon-danger[data-v-d624c930]:hover {
  background: #fef2f2;
  color: #ef4444;
}

/* ==========================================================================
   LAYOUT PRINCIPAL
   ========================================================================== */
.settings-view-col[data-v-4a60ec33] {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  min-width: 0;
}

/* Fondo consistente para todas las vistas */
.settings-view-col[data-v-4a60ec33]:has(.settings-workspaces),
.settings-view-col[data-v-4a60ec33]:has(.workspace-inboxes),
.settings-view-col[data-v-4a60ec33]:has(.settings-teammates) {
  background: var(--bg-primary);
}
.settings-content-scroll[data-v-4a60ec33] {
  flex: 1;
  overflow-y: auto;
}

/* IMPORTANTE: El contenedor ocupa el 100% del ancho disponible */
.settings-container[data-v-4a60ec33] {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.settings-content-wrapper[data-v-4a60ec33] {
  width: 100%;
}

/* ==========================================================================
   COMPONENTES DEL SIDEBAR
   ========================================================================== */
.settings-tabs-container[data-v-4a60ec33] {
  padding: var(--space-2);
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-secondary);
}
.settings-tab-btn[data-v-4a60ec33] {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-quaternary);
  padding: var(--space-2);
  cursor: default;
  border-radius: var(--radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-colors);
}
.settings-tab-btn[data-v-4a60ec33]:hover {
  background-color: var(--bg-hover);
  color: var(--text-secondary);
}
.settings-tab-btn.active[data-v-4a60ec33] {
  background-color: var(--bg-active);
  color: var(--text-primary);
}
.tab-icon[data-v-4a60ec33] svg {
  width: 20px;
  height: 20px;
}

/* ==========================================================================
   ESTILOS COMPARTIDOS (Paneles simples que quedaron en este archivo)
   ========================================================================== */
.settings-panel[data-v-4a60ec33] {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  padding: var(--space-8) var(--space-10);
}
.settings-header[data-v-4a60ec33] {
  border-bottom: 1px solid var(--border-secondary);
  padding-bottom: var(--space-5);
  margin-bottom: var(--space-3);
}
.settings-header h1[data-v-4a60ec33] {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.settings-header p[data-v-4a60ec33] {
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
}
.form-group[data-v-4a60ec33] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.form-group label[data-v-4a60ec33] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.settings-input[data-v-4a60ec33] {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
  padding: var(--space-3);
  border-radius: var(--radius-base);
  font-size: var(--font-size-base);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.settings-input[data-v-4a60ec33]:focus {
  border-color: var(--border-input-focus);
  box-shadow: 0 0 0 3px rgba(155, 135, 245, 0.15);
}
.form-row[data-v-4a60ec33] {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-3);
}
.form-actions[data-v-4a60ec33] {
  margin-top: var(--space-3);
}
.btn-primary[data-v-4a60ec33] {
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-base);
  cursor: default;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background 0.2s, transform 0.15s;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}
.btn-primary[data-v-4a60ec33]:hover {
  background-color: var(--accent-primary-hover);
  transform: translateY(-1px);
}
.btn-secondary[data-v-4a60ec33] {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-secondary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-base);
  cursor: default;
  font-size: var(--font-size-sm);
  transition: background 0.2s;
}
.btn-secondary[data-v-4a60ec33]:hover {
  background-color: var(--bg-hover);
}
.avatar-large[data-v-4a60ec33] {
  width: 64px;
  height: 64px;
  background: var(--accent-primary);
  color: white;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
}
.teammate-item[data-v-4a60ec33] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  width: 100%;
}
.tm-info[data-v-4a60ec33] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-primary);
  font-size: var(--font-size-base);
}
.badge[data-v-4a60ec33] {
  background: var(--surface-raised);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  border: 1px solid var(--border-secondary);
}
.placeholder-content[data-v-4a60ec33] {
  padding: var(--space-10) var(--space-5);
  text-align: center;
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
}

/* ==========================================================================
   WORKSPACE TAB DROPDOWN
   ========================================================================== */
.workspace-tab-wrapper[data-v-4a60ec33] {
  flex: 1;
  position: relative;
}
.workspace-tab-btn[data-v-4a60ec33] {
  gap: 6px;
  position: relative;
  width: 100%;
}
.workspace-avatar-small[data-v-4a60ec33] {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: white;
}
.workspace-chevron[data-v-4a60ec33] {
  transition: transform 0.2s;
  color: #666;
  flex-shrink: 0;
}
.workspace-chevron.rotated[data-v-4a60ec33] {
  transform: rotate(180deg);
}
.workspaces-dropdown[data-v-4a60ec33] {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  width: max-content;
  max-width: 320px;
  background-color: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  z-index: 1000;
  overflow: hidden;
  animation: dropdownSlide-4a60ec33 0.15s ease-out;
}
@keyframes dropdownSlide-4a60ec33 {
from {
    opacity: 0;
    transform: translateY(-4px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.workspaces-dropdown-header[data-v-4a60ec33] {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-primary);
  background-color: var(--surface-raised);
}
.dropdown-title[data-v-4a60ec33] {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.workspaces-dropdown-list[data-v-4a60ec33] {
  overflow-y: auto;
  max-height: 280px;
  padding: 4px 0;
}
.workspaces-dropdown-list[data-v-4a60ec33]::-webkit-scrollbar {
  width: 8px;
}
.workspaces-dropdown-list[data-v-4a60ec33]::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
.workspaces-dropdown-list[data-v-4a60ec33]::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}
.workspaces-dropdown-list[data-v-4a60ec33]::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}
.workspace-dropdown-item[data-v-4a60ec33] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.15s;
  color: var(--text-primary);
}
.workspace-dropdown-item[data-v-4a60ec33]:hover {
  background-color: var(--bg-hover);
}
.workspace-dropdown-item.selected[data-v-4a60ec33] {
  background-color: var(--bg-active);
}
.workspace-avatar-dropdown[data-v-4a60ec33] {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.workspace-name[data-v-4a60ec33] {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.check-icon[data-v-4a60ec33] {
  color: var(--accent-primary);
  flex-shrink: 0;
}

/* Main Layout */
.contacts-main[data-v-dc5105d6] {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  min-width: 0;
  overflow: hidden;
}

/* Header */
.contacts-header[data-v-dc5105d6] {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--space-6) var(--space-8);
  border-bottom: 1px solid var(--border-secondary);
}
.header-left[data-v-dc5105d6] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.header-left h1[data-v-dc5105d6] {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-1) 0;
}
.header-left p[data-v-dc5105d6] {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
  margin: 0;
}
.header-right[data-v-dc5105d6] {
  display: flex;
  gap: var(--space-3);
}
.btn-back[data-v-dc5105d6] {
  background: transparent;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-base);
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-back[data-v-dc5105d6]:hover {
  background: var(--bg-hover);
}
.btn-back svg[data-v-dc5105d6] {
  width: 20px;
  height: 20px;
  stroke: var(--text-secondary);
  stroke-width: 2;
  fill: none;
}

/* Buttons */
.btn-primary[data-v-dc5105d6] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background-color: var(--accent-primary);
  color: white;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-base);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background 0.2s, transform 0.15s;
}
.btn-primary[data-v-dc5105d6]:hover:not(:disabled) {
  background-color: var(--accent-primary-hover);
  transform: translateY(-1px);
}
.btn-primary[data-v-dc5105d6]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary[data-v-dc5105d6] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid var(--border-secondary);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-base);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: background 0.2s;
}
.btn-secondary[data-v-dc5105d6]:hover:not(:disabled) {
  background-color: var(--bg-hover);
}
.btn-secondary[data-v-dc5105d6]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-danger[data-v-dc5105d6] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background-color: #dc3545;
  color: white;
  border: none;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-base);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: background 0.2s;
}
.btn-danger[data-v-dc5105d6]:hover:not(:disabled) {
  background-color: #c82333;
}
.btn-danger[data-v-dc5105d6]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Search */
.search-container[data-v-dc5105d6] {
  padding: var(--space-4) var(--space-8);
}
.search-input-wrapper[data-v-dc5105d6] {
  position: relative;
  max-width: 400px;
}
.search-icon[data-v-dc5105d6] {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  stroke: var(--text-quaternary);
  stroke-width: 2;
  fill: none;
}
.search-input[data-v-dc5105d6] {
  width: 100%;
  padding: var(--space-2) var(--space-3) var(--space-2) 40px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input[data-v-dc5105d6]:focus {
  border-color: var(--border-input-focus);
  box-shadow: 0 0 0 3px rgba(155, 135, 245, 0.15);
}
.search-input[data-v-dc5105d6]::placeholder {
  color: var(--text-quaternary);
}

/* States */
.loading-state[data-v-dc5105d6],
.error-state[data-v-dc5105d6],
.empty-state[data-v-dc5105d6] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--space-4);
  padding: var(--space-10);
  color: var(--text-tertiary);
}
.loading-spinner[data-v-dc5105d6] {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-secondary);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin-dc5105d6 1s linear infinite;
}
@keyframes spin-dc5105d6 {
to { transform: rotate(360deg);
}
}
.empty-icon[data-v-dc5105d6] {
  width: 64px;
  height: 64px;
  stroke: var(--text-quaternary);
  stroke-width: 1.5;
  fill: none;
}
.empty-state h3[data-v-dc5105d6] {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin: 0;
}
.empty-state p[data-v-dc5105d6] {
  font-size: var(--font-size-sm);
  margin: 0;
}
.empty-state-inline[data-v-dc5105d6] {
  text-align: center;
  padding: var(--space-6);
  color: var(--text-tertiary);
}
.empty-state-inline p[data-v-dc5105d6] {
  margin: 0 0 var(--space-2) 0;
}
.text-muted[data-v-dc5105d6] {
  font-size: var(--font-size-sm);
  color: var(--text-quaternary);
}

/* Table */
.contacts-table-container[data-v-dc5105d6] {
  flex: 1;
  overflow: auto;
  padding: 0 var(--space-8) var(--space-8);
}
.contacts-table[data-v-dc5105d6] {
  width: 100%;
  border-collapse: collapse;
}
.contacts-table th[data-v-dc5105d6] {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-secondary);
  background: var(--bg-secondary);
  position: sticky;
  top: 0;
  z-index: 1;
}
.contacts-table td[data-v-dc5105d6] {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-tertiary);
  vertical-align: middle;
}
.contacts-table tbody tr[data-v-dc5105d6] {
  cursor: pointer;
  transition: background 0.15s;
}
.contacts-table tbody tr[data-v-dc5105d6]:hover {
  background: var(--bg-hover);
}
.col-name[data-v-dc5105d6] { width: 25%;
}
.col-email[data-v-dc5105d6] { width: 25%;
}
.col-phone[data-v-dc5105d6] { width: 15%;
}
.col-notes[data-v-dc5105d6] { width: 25%;
}
.col-actions[data-v-dc5105d6] { width: 10%; text-align: right;
}
.col-contacts-count[data-v-dc5105d6] { width: 15%;
}
.col-updated[data-v-dc5105d6] { width: 20%;
}
.col-added[data-v-dc5105d6] { width: 15%;
}

/* Contact Name Cell */
.contact-name-cell[data-v-dc5105d6] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.contact-avatar[data-v-dc5105d6] {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: white;
  flex-shrink: 0;
}
.contact-name[data-v-dc5105d6] {
  font-weight: var(--font-weight-medium);
}
.notes-preview[data-v-dc5105d6] {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text-tertiary);
}

/* List Name Cell */
.list-name-cell[data-v-dc5105d6] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.list-icon[data-v-dc5105d6] {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-base);
  background: var(--bg-active);
  display: flex;
  align-items: center;
  justify-content: center;
}
.list-icon svg[data-v-dc5105d6] {
  width: 18px;
  height: 18px;
  stroke: var(--text-secondary);
  stroke-width: 2;
  fill: none;
}
.list-name[data-v-dc5105d6] {
  font-weight: var(--font-weight-medium);
}
.contacts-badge[data-v-dc5105d6] {
  background: var(--bg-active);
  color: var(--text-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

/* Action Buttons */
.action-btn[data-v-dc5105d6] {
  background: transparent;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.action-btn svg[data-v-dc5105d6] {
  width: 16px;
  height: 16px;
  stroke: var(--text-tertiary);
  stroke-width: 2;
  fill: none;
}
.action-btn[data-v-dc5105d6]:hover {
  background: var(--bg-active);
}
.action-btn:hover svg[data-v-dc5105d6] {
  stroke: var(--text-primary);
}
.delete-btn[data-v-dc5105d6]:hover {
  background: rgba(220, 53, 69, 0.1);
}
.delete-btn:hover svg[data-v-dc5105d6] {
  stroke: #dc3545;
}

/* Nav Item Count */
.nav-item .count[data-v-dc5105d6] {
  margin-left: auto;
  background: var(--bg-active);
  color: var(--text-tertiary);
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.nav-item.active .count[data-v-dc5105d6] {
  background: var(--accent-primary);
  color: white;
}

/* Modal */
.modal-overlay[data-v-dc5105d6] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn-dc5105d6 0.15s ease-out;
}
@keyframes fadeIn-dc5105d6 {
from { opacity: 0;
}
to { opacity: 1;
}
}
.modal-content[data-v-dc5105d6] {
  background: var(--surface-overlay);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp-dc5105d6 0.2s ease-out;
  border: 1px solid var(--border-primary);
}
.modal-confirm[data-v-dc5105d6] {
  max-width: 400px;
}
.modal-large[data-v-dc5105d6] {
  max-width: 560px;
}
@keyframes slideUp-dc5105d6 {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.modal-header[data-v-dc5105d6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-secondary);
}
.modal-header h2[data-v-dc5105d6] {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0;
}
.modal-close[data-v-dc5105d6] {
  background: transparent;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close[data-v-dc5105d6]:hover {
  background: var(--bg-hover);
}
.modal-close svg[data-v-dc5105d6] {
  width: 20px;
  height: 20px;
  stroke: var(--text-tertiary);
  stroke-width: 2;
  fill: none;
}
.modal-body[data-v-dc5105d6] {
  padding: var(--space-6);
  overflow-y: auto;
}
.modal-error[data-v-dc5105d6] {
  background: rgba(220, 53, 69, 0.1);
  color: #dc3545;
  padding: var(--space-3);
  border-radius: var(--radius-base);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
}
.modal-body p[data-v-dc5105d6] {
  color: var(--text-secondary);
  margin: 0 0 var(--space-2) 0;
}
.delete-warning[data-v-dc5105d6] {
  color: var(--text-tertiary) !important;
  font-size: var(--font-size-sm);
}
.modal-footer[data-v-dc5105d6] {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--border-primary);
  background: var(--bg-tertiary);
}
.selection-count[data-v-dc5105d6] {
  margin-right: auto;
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

/* Form */
.form-group[data-v-dc5105d6] {
  margin-bottom: var(--space-4);
}
.form-group label[data-v-dc5105d6] {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.form-group .required[data-v-dc5105d6] {
  color: #dc3545;
}
.form-input[data-v-dc5105d6] {
  width: 100%;
  padding: var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: var(--radius-base);
  color: var(--text-primary);
  font-size: var(--font-size-sm);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input[data-v-dc5105d6]:focus {
  border-color: var(--border-input-focus);
  box-shadow: 0 0 0 3px rgba(155, 135, 245, 0.15);
}
.form-input[data-v-dc5105d6]::placeholder {
  color: var(--text-quaternary);
}
.form-textarea[data-v-dc5105d6] {
  resize: vertical;
  min-height: 80px;
}
select.form-input[data-v-dc5105d6] {
  cursor: pointer;
  color-scheme: var(--color-scheme, light);
}

/* Ensure select options are readable in light theme */
select.form-input option[data-v-dc5105d6] {
  background: var(--surface-overlay);
  color: var(--text-primary);
}

/* Contacts Selection List */
.contacts-selection-list[data-v-dc5105d6] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-height: 400px;
  overflow-y: auto;
}
.contact-selection-item[data-v-dc5105d6] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: background 0.15s;
  border: 1px solid transparent;
}
.contact-selection-item[data-v-dc5105d6]:hover {
  background: var(--bg-hover);
}
.contact-selection-item.selected[data-v-dc5105d6] {
  background: rgba(155, 135, 245, 0.1);
  border-color: var(--accent-primary);
}
.selection-checkbox[data-v-dc5105d6] {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-secondary);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.contact-selection-item.selected .selection-checkbox[data-v-dc5105d6] {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
}
.selection-checkbox svg[data-v-dc5105d6] {
  width: 14px;
  height: 14px;
  stroke: white;
  stroke-width: 3;
  fill: none;
}
.contact-selection-item .contact-avatar[data-v-dc5105d6] {
  width: 36px;
  height: 36px;
}
.contact-selection-item .contact-info[data-v-dc5105d6] {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.contact-selection-item .contact-name[data-v-dc5105d6] {
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.contact-selection-item .contact-email[data-v-dc5105d6] {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}

/* Modal Search Container */
.modal-search-container[data-v-dc5105d6] {
  margin-bottom: var(--space-4);
}
.modal-search-container .search-input-wrapper[data-v-dc5105d6] {
  max-width: none;
}

/* Main Layout */
.calendar-main[data-v-9505e872] {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  min-width: 0;
  overflow: hidden;
}

/* Header */
.calendar-header[data-v-9505e872] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-secondary);
  gap: var(--space-4);
}
.header-left[data-v-9505e872] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.header-right[data-v-9505e872] {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}
.view-title[data-v-9505e872] {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 0 var(--space-4);
}
.btn-icon[data-v-9505e872] {
  background: transparent;
  border: none;
  padding: var(--space-2);
  cursor: pointer;
  border-radius: var(--radius-base);
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-icon[data-v-9505e872]:hover {
  background: var(--bg-hover);
}
.btn-icon svg[data-v-9505e872] {
  width: 20px;
  height: 20px;
  stroke: var(--text-secondary);
  stroke-width: 2;
  fill: none;
}
.btn-today[data-v-9505e872] {
  padding: var(--space-2) var(--space-4);
}

/* View Selector */
.view-selector[data-v-9505e872] {
  display: flex;
  background: var(--bg-secondary);
  border-radius: var(--radius-base);
  padding: 2px;
}
.view-btn[data-v-9505e872] {
  background: transparent;
  border: none;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
}
.view-btn[data-v-9505e872]:hover {
  color: var(--text-primary);
}
.view-btn.active[data-v-9505e872] {
  background: var(--surface-primary);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* Calendar Content */
.calendar-content[data-v-9505e872] {
  flex: 1;
  overflow: auto;
  padding: var(--space-4);
}

/* Month View */
.month-view[data-v-9505e872] {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.day-headers[data-v-9505e872] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid var(--border-secondary);
}
.day-header[data-v-9505e872] {
  padding: var(--space-3);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.month-grid[data-v-9505e872] {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(6, 1fr);
  border-left: 1px solid var(--border-tertiary);
}
.day-cell[data-v-9505e872] {
  min-height: 100px;
  border-right: 1px solid var(--border-tertiary);
  border-bottom: 1px solid var(--border-tertiary);
  padding: var(--space-2);
  cursor: pointer;
  transition: background 0.15s;
}
.day-cell[data-v-9505e872]:hover {
  background: var(--bg-hover);
}
.day-cell.other-month[data-v-9505e872] {
  background: var(--bg-secondary);
}
.day-cell.other-month .day-number[data-v-9505e872] {
  color: var(--text-quaternary);
}
.day-cell.today[data-v-9505e872] {
  background: rgba(59, 130, 246, 0.05);
}
.day-cell.today .day-number[data-v-9505e872] {
  background: #3B82F6;
  color: white;
  border-radius: var(--radius-full);
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.day-number[data-v-9505e872] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.day-events[data-v-9505e872] {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.event-chip[data-v-9505e872] {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: white;
  cursor: pointer;
  overflow: hidden;
}
.event-chip[data-v-9505e872]:hover {
  filter: brightness(0.9);
}
.event-time[data-v-9505e872] {
  font-weight: var(--font-weight-medium);
  flex-shrink: 0;
  margin-right: 4px;
}
.event-title[data-v-9505e872] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.more-events[data-v-9505e872] {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  padding: 2px var(--space-2);
}

/* Week View */
.week-view[data-v-9505e872] {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.week-header[data-v-9505e872] {
  display: flex;
  border-bottom: 1px solid var(--border-secondary);
}
.time-gutter[data-v-9505e872] {
  width: 60px;
  flex-shrink: 0;
}
.week-day-header[data-v-9505e872] {
  flex: 1;
  text-align: center;
  padding: var(--space-3);
}
.week-day-header.today .day-number[data-v-9505e872] {
  background: #3B82F6;
  color: white;
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.day-name[data-v-9505e872] {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  text-transform: uppercase;
}
.week-body[data-v-9505e872] {
  flex: 1;
  display: flex;
  overflow: auto;
}
.time-column[data-v-9505e872] {
  width: 60px;
  flex-shrink: 0;
  min-height: 1152px; /* 24 hours × 48px */
}
.time-slot[data-v-9505e872] {
  height: 48px;
  padding-right: var(--space-2);
  text-align: right;
}
.time-label[data-v-9505e872] {
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
}
.week-grid[data-v-9505e872] {
  flex: 1;
  display: flex;
  position: relative;
  min-height: 1152px; /* 24 hours × 48px */
}
.day-column[data-v-9505e872] {
  flex: 1;
  position: relative;
  border-left: 1px solid var(--border-primary);
  min-height: 1152px; /* 24 hours × 48px */
}
.hour-cell[data-v-9505e872] {
  height: 48px;
  border-bottom: 1px solid var(--border-primary);
  cursor: pointer;
  transition: background 0.15s;
}
.hour-cell[data-v-9505e872]:hover {
  background: var(--bg-hover);
}
.week-event[data-v-9505e872] {
  position: absolute;
  left: 2px;
  right: 2px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  color: white;
  cursor: pointer;
  overflow: hidden;
}
.week-event[data-v-9505e872]:hover {
  filter: brightness(0.9);
}

/* Past events - reduced opacity */
.week-event.past-event[data-v-9505e872],
.event-chip.past-event[data-v-9505e872] {
  opacity: 0.5;
}

/* Current time indicator */
.current-time-indicator[data-v-9505e872] {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
}
.time-indicator-dot[data-v-9505e872] {
  width: 12px;
  height: 12px;
  background-color: #EF4444;
  border-radius: 50%;
  margin-left: -6px;
  flex-shrink: 0;
}
.time-indicator-line[data-v-9505e872] {
  flex: 1;
  height: 2px;
  background-color: #EF4444;
}
.event-location[data-v-9505e872] {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  opacity: 0.9;
  margin-top: var(--space-1);
}
.event-location svg[data-v-9505e872] {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Sidebar Calendar Items */
.calendar-item[data-v-9505e872] {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-radius: var(--radius-base);
  transition: background 0.15s;
}
.calendar-item[data-v-9505e872]:hover {
  background: var(--bg-hover);
}
.calendar-checkbox[data-v-9505e872] {
  width: 18px;
  height: 18px;
  border: 2px solid;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.calendar-checkbox .check-icon[data-v-9505e872] {
  width: 12px;
  height: 12px;
  stroke: white;
  stroke-width: 3;
  fill: none;
}
.calendar-name[data-v-9505e872] {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mini Calendar */
.mini-calendar[data-v-9505e872] {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-secondary);
}
.mini-calendar-header[data-v-9505e872] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.mini-calendar-title[data-v-9505e872] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
}
.mini-calendar-nav[data-v-9505e872] {
  display: flex;
  gap: 2px;
}
.mini-nav-btn[data-v-9505e872] {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.mini-nav-btn[data-v-9505e872]:hover {
  background: var(--bg-hover);
}
.mini-nav-btn svg[data-v-9505e872] {
  width: 14px;
  height: 14px;
  stroke: var(--text-tertiary);
  stroke-width: 2;
  fill: none;
}
.mini-calendar-weekdays[data-v-9505e872] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: var(--space-1);
}
.mini-calendar-weekdays span[data-v-9505e872] {
  font-size: 10px;
  color: var(--text-quaternary);
  font-weight: var(--font-weight-medium);
}
.mini-calendar-grid[data-v-9505e872] {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.mini-day[data-v-9505e872] {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.mini-day[data-v-9505e872]:hover {
  background: var(--bg-hover);
}
.mini-day.other-month[data-v-9505e872] {
  color: var(--text-quaternary);
}
.mini-day.today[data-v-9505e872] {
  background: var(--accent-primary);
  color: white;
  font-weight: var(--font-weight-semibold);
}
.mini-day.today[data-v-9505e872]:hover {
  background: var(--accent-primary-hover);
}
.mini-day.in-week[data-v-9505e872]:not(.today) {
  background: rgba(59, 130, 246, 0.15);
  color: var(--text-primary);
}
.mini-day.in-week[data-v-9505e872]:not(.today):hover {
  background: rgba(59, 130, 246, 0.25);
}
.sync-badge[data-v-9505e872] {
  margin-left: auto;
  font-size: var(--font-size-xs);
  padding: 2px 6px;
  border-radius: var(--radius-full);
}
.sync-badge.pending[data-v-9505e872] {
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
}
.sync-badge.syncing[data-v-9505e872] {
  display: flex;
  align-items: center;
}
.loading-spinner-tiny[data-v-9505e872] {
  width: 12px;
  height: 12px;
  border: 2px solid var(--border-secondary);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin-9505e872 1s linear infinite;
}
.empty-calendars[data-v-9505e872] {
  padding: var(--space-4);
  text-align: center;
  color: var(--text-tertiary);
}
.empty-calendars p[data-v-9505e872] {
  margin: 0 0 var(--space-1) 0;
  font-size: var(--font-size-sm);
}
.empty-calendars .btn-small[data-v-9505e872] {
  margin-top: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
}
.nav-icon[data-v-9505e872] {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.spinning[data-v-9505e872] {
  animation: spin-9505e872 1s linear infinite;
}
@keyframes spin-9505e872 {
to { transform: rotate(360deg);
}
}

/* States */
.loading-state[data-v-9505e872],
.empty-state[data-v-9505e872] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: var(--space-4);
  padding: var(--space-10);
  color: var(--text-tertiary);
}
.loading-spinner[data-v-9505e872] {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border-secondary);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin-9505e872 1s linear infinite;
}
.loading-small[data-v-9505e872] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  color: var(--text-tertiary);
  font-size: var(--font-size-sm);
}
.loading-spinner-small[data-v-9505e872] {
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-secondary);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin-9505e872 1s linear infinite;
}
.empty-icon[data-v-9505e872] {
  width: 64px;
  height: 64px;
  stroke: var(--text-quaternary);
  stroke-width: 1.5;
  fill: none;
}
.empty-state h3[data-v-9505e872] {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin: 0;
}
.empty-state p[data-v-9505e872] {
  font-size: var(--font-size-sm);
  margin: 0;
}

/* Modal */
.modal-overlay[data-v-9505e872] {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: fadeIn-9505e872 0.15s ease-out;
}
@keyframes fadeIn-9505e872 {
from { opacity: 0;
}
to { opacity: 1;
}
}
.modal-content[data-v-9505e872] {
  background: var(--surface-overlay);
  border-radius: 16px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideUp-9505e872 0.2s ease-out;
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-modal);
}
.modal-event[data-v-9505e872] {
  max-width: 560px;
}
@keyframes slideUp-9505e872 {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}
.modal-header[data-v-9505e872] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border-primary);
}
.modal-header h2[data-v-9505e872] {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.modal-close[data-v-9505e872] {
  background: transparent;
  border: none;
  padding: var(--space-1);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-close[data-v-9505e872]:hover {
  background: var(--bg-hover);
}
.modal-close svg[data-v-9505e872] {
  width: 20px;
  height: 20px;
  stroke: var(--text-tertiary);
  stroke-width: 2;
  fill: none;
}
.modal-body[data-v-9505e872] {
  padding: 24px;
  overflow-y: auto;
}
.modal-error[data-v-9505e872] {
  background: var(--color-error-bg);
  color: var(--color-error);
  padding: 12px 14px;
  border-radius: var(--radius-base);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
}
.modal-footer[data-v-9505e872] {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid var(--border-primary);
  background: var(--surface-raised);
}
.footer-right[data-v-9505e872] {
  display: flex;
  gap: 12px;
}

/* Form */
.form-group[data-v-9505e872] {
  margin-bottom: 16px;
}
.form-group > label[data-v-9505e872] {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.form-group .required[data-v-9505e872] {
  color: #ef4444;
  text-transform: none;
}
.form-row[data-v-9505e872] {
  display: flex;
  gap: var(--space-4);
}
.form-row .form-group[data-v-9505e872] {
  flex: 1;
}
.form-input[data-v-9505e872] {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 14px;
  outline: none;
  transition: all 0.15s ease;
}
.form-input[data-v-9505e872]:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
  background: var(--bg-input-focus);
}
.form-input[data-v-9505e872]::placeholder {
  color: var(--text-tertiary);
}

/* Date and time picker icons */
.form-input[type="date"][data-v-9505e872]::-webkit-calendar-picker-indicator,
.form-input[type="time"][data-v-9505e872]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.7;
}
.form-input[type="date"][data-v-9505e872]::-webkit-calendar-picker-indicator:hover,
.form-input[type="time"][data-v-9505e872]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
.form-textarea[data-v-9505e872] {
  resize: vertical;
  min-height: 80px;
}
.form-hint[data-v-9505e872] {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

/* Attendees Autocomplete Styles */
.form-group-autocomplete[data-v-9505e872] {
  position: relative;
}
.attendees-input-container[data-v-9505e872] {
  display: flex;
  align-items: flex-start;
  padding: 8px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  cursor: text;
  min-height: 44px;
  transition: all 0.15s ease;
}
.attendees-input-container[data-v-9505e872]:focus-within {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--focus-ring);
  background: var(--bg-input-focus);
}
.attendees-chips[data-v-9505e872] {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
  align-items: center;
}
.attendee-chip[data-v-9505e872] {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.2) 0%, rgba(139, 92, 246, 0.1) 100%);
  color: #c4b5fd;
  border-radius: 16px;
  padding: 4px 10px;
  font-size: 13px;
  display: flex;
  align-items: center;
  border: 1px solid rgba(139, 92, 246, 0.3);
  user-select: none;
}
.attendee-chip .chip-remove[data-v-9505e872] {
  margin-left: 6px;
  cursor: pointer;
  color: #a78bfa;
  font-weight: bold;
  font-size: 14px;
  line-height: 1;
  transition: color 0.15s ease;
}
.attendee-chip .chip-remove[data-v-9505e872]:hover {
  color: #ef4444;
}
.attendees-field-input[data-v-9505e872] {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  flex: 1;
  min-width: 120px;
  font-size: var(--font-size-sm);
  padding: 2px 0;
}
.attendees-field-input[data-v-9505e872]::placeholder {
  color: var(--text-quaternary);
}

/* Autocomplete Dropdown */
.attendees-autocomplete-dropdown[data-v-9505e872] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-dropdown);
  z-index: 1000;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 6px;
}
.autocomplete-item[data-v-9505e872] {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  gap: 12px;
}
.autocomplete-item[data-v-9505e872]:hover,
.autocomplete-item.selected[data-v-9505e872] {
  background: rgba(139, 92, 246, 0.1);
}
.autocomplete-item[data-v-9505e872]:first-child {
  border-radius: 11px 11px 0 0;
}
.autocomplete-item[data-v-9505e872]:last-child {
  border-radius: 0 0 11px 11px;
}
.autocomplete-item[data-v-9505e872]:only-child {
  border-radius: 11px;
}
.autocomplete-item-avatar[data-v-9505e872] {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
.autocomplete-item-icon[data-v-9505e872] {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.autocomplete-item-icon svg[data-v-9505e872] {
  width: 16px;
  height: 16px;
  stroke: var(--text-tertiary);
  stroke-width: 2;
  fill: none;
}
.autocomplete-item-content[data-v-9505e872] {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.autocomplete-item-name[data-v-9505e872] {
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autocomplete-item-email[data-v-9505e872] {
  color: var(--text-tertiary);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autocomplete-item-count[data-v-9505e872] {
  color: var(--text-tertiary);
  font-size: 12px;
}
.autocomplete-item-source[data-v-9505e872] {
  color: var(--text-tertiary);
  font-size: 11px;
  flex-shrink: 0;
}

/* Toggle Switch */
.toggle-label[data-v-9505e872] {
  display: inline-flex !important;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 8px 0;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 14px !important;
  color: var(--text-primary) !important;
  position: relative;
}
.toggle-label input[type="checkbox"][data-v-9505e872] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.toggle-switch[data-v-9505e872] {
  position: relative;
  display: inline-block;
  width: 44px;
  min-width: 44px;
  height: 24px;
  background: var(--bg-hover);
  border-radius: 12px;
  transition: all 0.2s ease;
  flex-shrink: 0;
  order: 1;
}
.toggle-switch[data-v-9505e872]::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--text-tertiary);
  border-radius: 50%;
  transition: all 0.2s ease;
}
.toggle-label.active .toggle-switch[data-v-9505e872] {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}
.toggle-label.active .toggle-switch[data-v-9505e872]::after {
  left: 23px;
  background: #fff;
}
.toggle-text[data-v-9505e872] {
  color: var(--text-primary);
  font-size: 14px;
  white-space: nowrap;
  order: 2;
}

/* Select dropdown styling */
.form-select[data-v-9505e872] {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}
.form-select option[data-v-9505e872] {
  background: #1e1e1e;
  color: #e0e0e0;
}

/* Recurrence Panel */
.recurrence-panel[data-v-9505e872] {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(139, 92, 246, 0.02) 100%);
  border: 1px solid rgba(139, 92, 246, 0.2);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.recurrence-row[data-v-9505e872] {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.recurrence-label[data-v-9505e872] {
  color: #a0a0a0;
  font-size: 14px;
  min-width: 50px;
}
.recurrence-number-input[data-v-9505e872] {
  width: 60px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  outline: none;
  transition: all 0.15s ease;
}
.recurrence-number-input[data-v-9505e872]:focus {
  border-color: rgba(139, 92, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.recurrence-number-input[data-v-9505e872]::-webkit-inner-spin-button,
.recurrence-number-input[data-v-9505e872]::-webkit-outer-spin-button {
  opacity: 1;
}
.recurrence-unit[data-v-9505e872] {
  color: #a0a0a0;
  font-size: 14px;
}
.recurrence-section[data-v-9505e872] {
  padding-top: 16px;
}
.recurrence-section + .recurrence-section[data-v-9505e872] {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 16px;
}
.recurrence-section-label[data-v-9505e872] {
  display: block;
  color: #a0a0a0;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* Weekday Pills */
.weekday-pills[data-v-9505e872] {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.weekday-pill[data-v-9505e872] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 36px;
  padding: 0 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #b0b0b0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.weekday-pill[data-v-9505e872]:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.weekday-pill.active[data-v-9505e872] {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

/* Radio Group */
.radio-group[data-v-9505e872] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.radio-option[data-v-9505e872] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.radio-option[data-v-9505e872]:hover {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.1);
}
.radio-option.active[data-v-9505e872] {
  background: rgba(139, 92, 246, 0.1);
  border-color: rgba(139, 92, 246, 0.3);
}
.radio-option input[type="radio"][data-v-9505e872] {
  display: none;
}
.radio-custom[data-v-9505e872] {
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.radio-option.active .radio-custom[data-v-9505e872] {
  border-color: #8b5cf6;
}
.radio-custom[data-v-9505e872]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  width: 8px;
  height: 8px;
  background: #8b5cf6;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.radio-option.active .radio-custom[data-v-9505e872]::after {
  transform: translate(-50%, -50%) scale(1);
}
.radio-text[data-v-9505e872] {
  color: #e0e0e0;
  font-size: 14px;
  flex-shrink: 0;
}
.radio-text-suffix[data-v-9505e872] {
  color: #a0a0a0;
  font-size: 14px;
}
.radio-option.with-input[data-v-9505e872] {
  flex-wrap: wrap;
}
.recurrence-inline-input[data-v-9505e872] {
  width: 60px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  text-align: center;
  outline: none;
  transition: all 0.15s ease;
}
.recurrence-inline-input[data-v-9505e872]:focus {
  border-color: rgba(139, 92, 246, 0.5);
}
.recurrence-inline-input[data-v-9505e872]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.recurrence-date-input[data-v-9505e872] {
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  outline: none;
  transition: all 0.15s ease;
}
.recurrence-date-input[data-v-9505e872]:focus {
  border-color: rgba(139, 92, 246, 0.5);
}
.recurrence-date-input[data-v-9505e872]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.recurrence-date-input[data-v-9505e872]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.6;
  cursor: pointer;
}
.recurrence-date-input[data-v-9505e872]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Response Section */
.response-section[data-v-9505e872] {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-secondary);
}
.response-label[data-v-9505e872] {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.response-buttons[data-v-9505e872] {
  display: flex;
  gap: var(--space-2);
}
.btn-response[data-v-9505e872] {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-base);
  background: transparent;
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.15s;
}
.btn-response svg[data-v-9505e872] {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.btn-response.accept[data-v-9505e872]:hover {
  background: rgba(16, 185, 129, 0.1);
  border-color: #10B981;
  color: #10B981;
}
.btn-response.tentative[data-v-9505e872]:hover {
  background: rgba(245, 158, 11, 0.1);
  border-color: #F59E0B;
  color: #F59E0B;
}
.btn-response.decline[data-v-9505e872]:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #EF4444;
  color: #EF4444;
}

/* Online Meeting Info */
.meeting-info[data-v-9505e872] {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: var(--radius-base);
}
.join-meeting-btn[data-v-9505e872] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: #3B82F6;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  font-size: var(--font-size-sm);
}
.join-meeting-btn[data-v-9505e872]:hover {
  text-decoration: underline;
}
.meeting-icon[data-v-9505e872] {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

/* Event Body HTML Content */
.event-body-content[data-v-9505e872] {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-secondary);
}
.event-body-content label[data-v-9505e872] {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}
.body-html-container[data-v-9505e872] {
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-base);
  font-size: var(--font-size-sm);
  color: var(--text-primary);
  max-height: 300px;
  overflow-y: auto;
}
.body-html-container a[data-v-9505e872] {
  color: #3B82F6;
}
.body-html-container a[data-v-9505e872]:hover {
  text-decoration: underline;
}

/* Read-only Event View */
.event-readonly[data-v-9505e872] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.readonly-field[data-v-9505e872] {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.readonly-field label[data-v-9505e872] {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.readonly-value[data-v-9505e872] {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}
.attendees-list[data-v-9505e872] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.attendee-item[data-v-9505e872] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2);
  background: var(--bg-secondary);
  border-radius: var(--radius-sm);
}
.attendee-name[data-v-9505e872] {
  font-size: var(--font-size-sm);
  color: var(--text-primary);
}
.attendee-status[data-v-9505e872] {
  font-size: var(--font-size-xs);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  background: var(--bg-tertiary);
  color: var(--text-tertiary);
}
.attendee-status.accepted[data-v-9505e872] {
  background: rgba(16, 185, 129, 0.1);
  color: #10B981;
}
.attendee-status.declined[data-v-9505e872] {
  background: rgba(239, 68, 68, 0.1);
  color: #EF4444;
}
.attendee-status.tentatively_accepted[data-v-9505e872] {
  background: rgba(245, 158, 11, 0.1);
  color: #F59E0B;
}
.attendee-status.organizer[data-v-9505e872] {
  background: rgba(59, 130, 246, 0.1);
  color: #3B82F6;
}

/* Buttons */
.btn-primary[data-v-9505e872] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}
.btn-primary[data-v-9505e872]:hover:not(:disabled) {
  background: linear-gradient(135deg, #9b6ff6 0%, #8b5cf6 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}
.btn-primary[data-v-9505e872]:active:not(:disabled) {
  transform: translateY(0);
}
.btn-primary[data-v-9505e872]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.btn-secondary[data-v-9505e872] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: transparent;
  color: var(--text-tertiary);
  border: 1px solid var(--border-primary);
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-secondary[data-v-9505e872]:hover:not(:disabled) {
  background: var(--bg-hover);
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.btn-secondary[data-v-9505e872]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-danger[data-v-9505e872] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
.btn-danger[data-v-9505e872]:hover:not(:disabled) {
  background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}
.btn-danger[data-v-9505e872]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.nav-item.disabled[data-v-9505e872] {
  opacity: 0.5;
  pointer-events: none;
}

/* Sync Notification */
.sync-notification[data-v-9505e872] {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-base);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  font-size: var(--font-size-sm);
}
.sync-notification.success[data-v-9505e872] {
  border-color: #10B981;
  background: rgba(16, 185, 129, 0.1);
}
.sync-notification.error[data-v-9505e872] {
  border-color: #EF4444;
  background: rgba(239, 68, 68, 0.1);
}
.notification-icon[data-v-9505e872] {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}
.sync-notification.success .notification-icon[data-v-9505e872] {
  color: #10B981;
}
.sync-notification.error .notification-icon[data-v-9505e872] {
  color: #EF4444;
}

/* Notification transition */
.notification-enter-active[data-v-9505e872],
.notification-leave-active[data-v-9505e872] {
  transition: all 0.3s ease;
}
.notification-enter-from[data-v-9505e872],
.notification-leave-to[data-v-9505e872] {
  opacity: 0;
  transform: translateX(20px);
}

.date-filter[data-v-1aa9b2f8] {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.preset-buttons[data-v-1aa9b2f8] {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.preset-btn[data-v-1aa9b2f8] {
  padding: 6px 14px;
  border: 1px solid var(--border-secondary);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-base);
  font-size: 13px;
  cursor: default;
  transition: all 0.15s;
}
.preset-btn[data-v-1aa9b2f8]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.preset-btn.active[data-v-1aa9b2f8] {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}
.custom-range[data-v-1aa9b2f8] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.date-input[data-v-1aa9b2f8] {
  padding: 6px 10px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  color: var(--text-primary);
  border-radius: var(--radius-base);
  font-size: 13px;
}
.date-input[data-v-1aa9b2f8]:focus {
  border-color: var(--border-input-focus);
  outline: none;
}
.range-separator[data-v-1aa9b2f8] {
  color: var(--text-tertiary);
  font-size: 13px;
}
.apply-btn[data-v-1aa9b2f8] {
  padding: 6px 14px;
  background: var(--accent-primary);
  color: white;
  border: none;
  border-radius: var(--radius-base);
  font-size: 13px;
  cursor: default;
}
.apply-btn[data-v-1aa9b2f8]:hover {
  background: var(--accent-primary-hover);
}

.overview-cards[data-v-6dbb2b58] {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 900px) {
.overview-cards[data-v-6dbb2b58] {
    grid-template-columns: repeat(2, 1fr);
}
}
.metric-card[data-v-6dbb2b58] {
  background: var(--surface-raised);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.card-icon[data-v-6dbb2b58] {
  flex-shrink: 0;
  opacity: 0.85;
}
.card-value[data-v-6dbb2b58] {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}
.card-label[data-v-6dbb2b58] {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

.heatmap-container[data-v-0747b662] {
  background: var(--surface-raised);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  padding: 20px;
}
.heatmap-header[data-v-0747b662] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.heatmap-title[data-v-0747b662] {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.metric-toggle[data-v-0747b662] {
  display: flex;
  gap: 4px;
  background: var(--bg-secondary);
  border-radius: var(--radius-base);
  padding: 2px;
}
.metric-btn[data-v-0747b662] {
  padding: 5px 12px;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 12px;
  border-radius: var(--radius-sm);
  cursor: default;
  transition: all 0.15s;
}
.metric-btn[data-v-0747b662]:hover {
  color: var(--text-secondary);
}
.metric-btn.active[data-v-0747b662] {
  background: var(--accent-primary);
  color: white;
}
.chart-wrapper[data-v-0747b662] {
  min-height: 280px;
}
.empty-state[data-v-0747b662] {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.workload-table-container[data-v-cf6b837e] {
  background: var(--surface-raised);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  padding: 20px;
}
.table-title[data-v-cf6b837e] {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}
.table-wrapper[data-v-cf6b837e] {
  overflow-x: auto;
}
.workload-table[data-v-cf6b837e] {
  width: 100%;
  border-collapse: collapse;
}
.workload-table th[data-v-cf6b837e] {
  text-align: left;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-secondary);
  white-space: nowrap;
}
.workload-table th.sortable[data-v-cf6b837e] {
  cursor: default;
}
.workload-table th.sortable[data-v-cf6b837e]:hover {
  color: var(--text-secondary);
}
.workload-table th.sorted[data-v-cf6b837e] {
  color: var(--accent-primary);
}
.workload-table td[data-v-cf6b837e] {
  padding: 12px;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-secondary);
}
.workload-table tbody tr[data-v-cf6b837e]:hover {
  background: var(--bg-hover);
}
.inbox-name-cell[data-v-cf6b837e] {
  display: flex;
  align-items: center;
  gap: 8px;
}
.inbox-dot[data-v-cf6b837e] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.empty-state[data-v-cf6b837e] {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.sla-container[data-v-260e5de6] {
  background: var(--surface-raised);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  padding: 20px;
}
.sla-title[data-v-260e5de6] {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}
.sla-summary[data-v-260e5de6] {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}
.sla-pct[data-v-260e5de6] {
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
}
.sla-pct.good[data-v-260e5de6] { color: #10B981;
}
.sla-pct.warn[data-v-260e5de6] { color: #F59E0B;
}
.sla-pct.bad[data-v-260e5de6] { color: #EF4444;
}
.sla-counts[data-v-260e5de6] {
  display: flex;
  gap: 16px;
}
.sla-count[data-v-260e5de6] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.count-value[data-v-260e5de6] {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}
.count-label[data-v-260e5de6] {
  font-size: 12px;
  color: var(--text-tertiary);
}
.sla-count.met .count-value[data-v-260e5de6] { color: #10B981;
}
.sla-count.breached .count-value[data-v-260e5de6] { color: #EF4444;
}
.sla-breakdown[data-v-260e5de6] {
  border-top: 1px solid var(--border-secondary);
  padding-top: 16px;
}
.breakdown-title[data-v-260e5de6] {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.breakdown-row[data-v-260e5de6] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-secondary);
}
.breakdown-row[data-v-260e5de6]:last-child {
  border-bottom: none;
}
.breakdown-inbox[data-v-260e5de6] {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
}
.inbox-dot[data-v-260e5de6] {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.breakdown-stats[data-v-260e5de6] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sla-mini-badge[data-v-260e5de6] {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}
.sla-mini-badge.good[data-v-260e5de6] {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}
.sla-mini-badge.warn[data-v-260e5de6] {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}
.sla-mini-badge.bad[data-v-260e5de6] {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}
.breakdown-detail[data-v-260e5de6] {
  font-size: 12px;
  color: var(--text-tertiary);
}
.empty-state[data-v-260e5de6] {
  text-align: center;
  padding: 30px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.analytics-dashboard[data-v-ad3d8256] {
  padding: var(--space-8) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.analytics-header h1[data-v-ad3d8256] {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 4px 0;
}
.analytics-header p[data-v-ad3d8256] {
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  margin: 0;
}
.analytics-sections[data-v-ad3d8256] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.loading-state[data-v-ad3d8256] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.spinner[data-v-ad3d8256] {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-secondary);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin-ad3d8256 0.8s linear infinite;
}
@keyframes spin-ad3d8256 {
to { transform: rotate(360deg);
}
}
.error-state[data-v-ad3d8256] {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-tertiary);
}
.retry-btn[data-v-ad3d8256] {
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--accent-primary);
  color: white;
  border: none;
  border-radius: var(--radius-base);
  font-size: 13px;
  cursor: default;
}
.retry-btn[data-v-ad3d8256]:hover {
  background: var(--accent-primary-hover);
}

.user-table-container[data-v-6e97823c] {
  background: var(--surface-raised);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-md);
  padding: 20px;
}
.table-title[data-v-6e97823c] {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 16px 0;
}
.table-wrapper[data-v-6e97823c] {
  overflow-x: auto;
}
.user-table[data-v-6e97823c] {
  width: 100%;
  border-collapse: collapse;
}
.user-table th[data-v-6e97823c] {
  text-align: left;
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-secondary);
  white-space: nowrap;
}
.user-table th.sortable[data-v-6e97823c] {
  cursor: default;
}
.user-table th.sortable[data-v-6e97823c]:hover {
  color: var(--text-secondary);
}
.user-table th.sorted[data-v-6e97823c] {
  color: var(--accent-primary);
}
.user-table td[data-v-6e97823c] {
  padding: 12px;
  font-size: 13px;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-secondary);
}
.user-table tbody tr[data-v-6e97823c]:hover {
  background: var(--bg-hover);
}
.user-cell[data-v-6e97823c] {
  display: flex;
  align-items: center;
  gap: 10px;
}
.user-avatar[data-v-6e97823c] {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.user-info[data-v-6e97823c] {
  display: flex;
  flex-direction: column;
}
.user-name[data-v-6e97823c] {
  font-weight: 500;
}
.user-email[data-v-6e97823c] {
  font-size: 12px;
  color: var(--text-tertiary);
}
.sla-badge[data-v-6e97823c] {
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
}
.sla-badge.good[data-v-6e97823c] {
  background: rgba(16, 185, 129, 0.15);
  color: #10B981;
}
.sla-badge.warn[data-v-6e97823c] {
  background: rgba(245, 158, 11, 0.15);
  color: #F59E0B;
}
.sla-badge.bad[data-v-6e97823c] {
  background: rgba(239, 68, 68, 0.15);
  color: #EF4444;
}
.no-data[data-v-6e97823c] {
  color: var(--text-quaternary);
}
.empty-state[data-v-6e97823c] {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.analytics-dashboard[data-v-90c4dd0a] {
  padding: var(--space-8) var(--space-10);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.analytics-header h1[data-v-90c4dd0a] {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
  margin: 0 0 4px 0;
}
.analytics-header p[data-v-90c4dd0a] {
  color: var(--text-tertiary);
  font-size: var(--font-size-base);
  margin: 0;
}
.analytics-sections[data-v-90c4dd0a] {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.loading-state[data-v-90c4dd0a] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}
.spinner[data-v-90c4dd0a] {
  width: 20px;
  height: 20px;
  border: 2px solid var(--border-secondary);
  border-top-color: var(--accent-primary);
  border-radius: 50%;
  animation: spin-90c4dd0a 0.8s linear infinite;
}
@keyframes spin-90c4dd0a {
to { transform: rotate(360deg);
}
}
.error-state[data-v-90c4dd0a] {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-tertiary);
}
.retry-btn[data-v-90c4dd0a] {
  margin-top: 12px;
  padding: 8px 16px;
  background: var(--accent-primary);
  color: white;
  border: none;
  border-radius: var(--radius-base);
  font-size: 13px;
  cursor: default;
}
.retry-btn[data-v-90c4dd0a]:hover {
  background: var(--accent-primary-hover);
}
.analytics-filters[data-v-90c4dd0a] {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.inbox-filter[data-v-90c4dd0a] {
  position: relative;
}
.inbox-filter-btn[data-v-90c4dd0a] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--border-secondary);
  background: transparent;
  color: var(--text-secondary);
  border-radius: var(--radius-base);
  font-size: 13px;
  cursor: default;
  transition: all 0.15s;
  white-space: nowrap;
}
.inbox-filter-btn[data-v-90c4dd0a]:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}
.inbox-filter-btn.active[data-v-90c4dd0a] {
  background: var(--accent-primary);
  color: white;
  border-color: var(--accent-primary);
}
.inbox-filter-dropdown[data-v-90c4dd0a] {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 240px;
  max-width: 320px;
  background: var(--bg-primary);
  border: 1px solid var(--border-secondary);
  border-radius: var(--radius-base);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 50;
  padding: 4px 0;
}
.inbox-options-list[data-v-90c4dd0a] {
  max-height: 240px;
  overflow-y: auto;
}
.inbox-options-divider[data-v-90c4dd0a] {
  height: 1px;
  background: var(--border-secondary);
  margin: 4px 0;
}
.inbox-option[data-v-90c4dd0a] {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: default;
  text-align: left;
  transition: background 0.1s;
}
.inbox-option[data-v-90c4dd0a]:hover {
  background: var(--bg-hover);
}
.inbox-option.selected[data-v-90c4dd0a] {
  color: var(--text-primary);
}
.checkbox-icon[data-v-90c4dd0a] {
  width: 14px;
  height: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent-primary);
}
.inbox-option-info[data-v-90c4dd0a] {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.inbox-name[data-v-90c4dd0a] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.inbox-email[data-v-90c4dd0a] {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Layout */
.analytics-view-col[data-v-8c82593b] {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--bg-primary);
  min-width: 0;
}
.analytics-content-scroll[data-v-8c82593b] {
  flex: 1;
  overflow-y: auto;
}
.analytics-container[data-v-8c82593b] {
  width: 100%;
  max-width: 100%;
  margin: 0;
}
.analytics-content-wrapper[data-v-8c82593b] {
  width: 100%;
}

/* Sidebar tabs */
.settings-tabs-container[data-v-8c82593b] {
  padding: var(--space-2);
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border-secondary);
}
.settings-tab-btn[data-v-8c82593b] {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-quaternary);
  padding: var(--space-2);
  cursor: default;
  border-radius: var(--radius-base);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-colors);
}
.settings-tab-btn[data-v-8c82593b]:hover {
  background-color: var(--bg-hover);
  color: var(--text-secondary);
}
.settings-tab-btn.active[data-v-8c82593b] {
  background-color: var(--bg-active);
  color: var(--text-primary);
}
.tab-icon[data-v-8c82593b] svg {
  width: 20px;
  height: 20px;
}

/* Workspace tab dropdown */
.workspace-tab-wrapper[data-v-8c82593b] {
  flex: 1;
  position: relative;
}
.workspace-tab-btn[data-v-8c82593b] {
  gap: 6px;
  position: relative;
  width: 100%;
}
.workspace-avatar-small[data-v-8c82593b] {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: white;
}
.workspace-chevron[data-v-8c82593b] {
  transition: transform 0.2s;
  color: #666;
  flex-shrink: 0;
}
.workspace-chevron.rotated[data-v-8c82593b] {
  transform: rotate(180deg);
}
.workspaces-dropdown[data-v-8c82593b] {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 220px;
  width: max-content;
  max-width: 320px;
  background-color: var(--surface-overlay);
  border: 1px solid var(--border-primary);
  border-radius: 8px;
  box-shadow: var(--shadow-dropdown);
  z-index: 1000;
  overflow: hidden;
  animation: dropdownSlide-8c82593b 0.15s ease-out;
}
@keyframes dropdownSlide-8c82593b {
from { opacity: 0; transform: translateY(-4px);
}
to { opacity: 1; transform: translateY(0);
}
}
.workspaces-dropdown-header[data-v-8c82593b] {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-primary);
  background-color: var(--surface-raised);
}
.dropdown-title[data-v-8c82593b] {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.workspaces-dropdown-list[data-v-8c82593b] {
  overflow-y: auto;
  max-height: 280px;
  padding: 4px 0;
}
.workspaces-dropdown-list[data-v-8c82593b]::-webkit-scrollbar { width: 8px;
}
.workspaces-dropdown-list[data-v-8c82593b]::-webkit-scrollbar-track { background: var(--scrollbar-track);
}
.workspaces-dropdown-list[data-v-8c82593b]::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 4px;
}
.workspaces-dropdown-list[data-v-8c82593b]::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover);
}
.workspace-dropdown-item[data-v-8c82593b] {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  transition: background-color 0.15s;
  color: var(--text-primary);
}
.workspace-dropdown-item[data-v-8c82593b]:hover {
  background-color: var(--bg-hover);
}
.workspace-dropdown-item.selected[data-v-8c82593b] {
  background-color: var(--bg-active);
}
.workspace-avatar-dropdown[data-v-8c82593b] {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
  flex-shrink: 0;
}
.workspace-name[data-v-8c82593b] {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.check-icon[data-v-8c82593b] {
  color: var(--accent-primary);
  flex-shrink: 0;
}

.oauth-callback[data-v-7bca5feb] {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}
.loading-container[data-v-7bca5feb] {
  text-align: center;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  max-width: 420px;
}
.spinner[data-v-7bca5feb] {
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin-7bca5feb 1s linear infinite;
  margin: 0 auto 1rem;
}
@keyframes spin-7bca5feb {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}
p[data-v-7bca5feb] {
  font-size: 1.1rem;
  margin: 0;
}
.warning-text[data-v-7bca5feb] {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: #fbbf24;
  opacity: 0.9;
}