/* ============================================================================
   IESMAC ERP — Material skin over Phoenix Bootstrap 5.3
   SPRINT 7 · Specialty widgets: Timeline, Chat, Kanban, Wizard supplement
   ----------------------------------------------------------------------------
   Depends on: material-skin.css (Sprint 1) — for tokens
   Pairs with: material-skin-navigation.css (Sprint 5) — extends stepper

   Load order:
     1. theme.min.css        (Phoenix core)
     2. user.min.css         (empty Phoenix slot)
     3. style.css            (existing tweaks)
     4. material-skin.css           (Sprint 1)
     5. material-skin-surfaces.css  (Sprint 3)
     6. material-skin-data.css      (Sprint 4)
     7. material-skin-navigation.css (Sprint 5)
     8. material-skin-charts.css    (Sprint 6)
     9. material-skin-widgets.css   ← THIS FILE

   Tenant theming: All brand color references use --md-* variables only.
   ============================================================================ */


/* ============================================================================
   1. TIMELINE — vertical activity feed (39 use sites)
   Phoenix uses several timeline class patterns. This block normalizes them
   into a single MUI-flavored vertical timeline with a continuous rail,
   marker dots/icons, and content cards.
   ============================================================================ */

html body .timeline,
html body .timeline-vertical,
html body .activity-timeline {
  font-family: 'Inter', sans-serif;
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* The vertical rail line */
html body .timeline::before,
html body .timeline-vertical::before,
html body .activity-timeline::before {
  content: '';
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 11px;
  width: 2px;
  background-color: var(--md-surface-divider);
  border-radius: 1px;
}

/* Timeline item */
html body .timeline-item,
html body .activity-timeline .timeline-item {
  position: relative;
  padding: 0 0 16px 32px;
  list-style: none;
}

html body .timeline-item:last-child {
  padding-bottom: 0;
}

/* Marker (default dot) */
html body .timeline-item::before,
html body .activity-timeline .timeline-item::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--md-surface-card);
  border: 2px solid var(--md-neutral-80);
  box-shadow: 0 0 0 3px var(--md-surface-card);
  z-index: 1;
}

/* Marker icon variant — overrides the default dot */
html body .timeline-item .timeline-marker,
html body .timeline-item > .marker,
html body .timeline-item > .timeline-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: var(--md-surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 2;
  box-shadow: 0 0 0 3px var(--md-surface-card);
}

/* When marker is present, hide the default dot */
html body .timeline-item:has(.timeline-marker)::before,
html body .timeline-item:has(.marker)::before,
html body .timeline-item:has(.timeline-icon)::before {
  display: none;
}

/* Marker states — tonal backgrounds matching event type */
html body .timeline-item .timeline-marker.marker-primary,
html body .timeline-item .timeline-marker.bg-primary-soft {
  background-color: var(--md-primary-90);
  color: var(--md-primary-10);
}
html body .timeline-item .timeline-marker.marker-success,
html body .timeline-item .timeline-marker.bg-success-soft {
  background-color: var(--md-success-50);
  color: var(--md-success-800);
}
html body .timeline-item .timeline-marker.marker-warning,
html body .timeline-item .timeline-marker.bg-warning-soft {
  background-color: var(--md-warning-50);
  color: var(--md-warning-800);
}
html body .timeline-item .timeline-marker.marker-danger,
html body .timeline-item .timeline-marker.bg-danger-soft {
  background-color: var(--md-error-50);
  color: var(--md-error-800);
}
html body .timeline-item .timeline-marker.marker-info,
html body .timeline-item .timeline-marker.bg-info-soft {
  background-color: var(--md-info-50);
  color: var(--md-info-800);
}
html body .timeline-item .timeline-marker.marker-neutral,
html body .timeline-item .timeline-marker.bg-secondary-soft {
  background-color: var(--md-neutral-95);
  color: var(--md-neutral-30);
}

/* Timeline content — text or card */
html body .timeline-item .timeline-content,
html body .timeline-item > .content {
  font-size: 12.5px;
  color: var(--md-neutral-30);
  line-height: 1.5;
}

html body .timeline-item .timeline-title,
html body .timeline-item .timeline-content > .title,
html body .timeline-item > h6 {
  font-size: 13px;
  font-weight: 500;
  color: var(--md-neutral-10);
  margin: 0 0 2px 0;
  line-height: 1.4;
}

html body .timeline-item .timeline-meta,
html body .timeline-item .timeline-time,
html body .timeline-item .timeline-content > .meta {
  font-size: 11px;
  color: var(--md-neutral-40);
  font-weight: 400;
  margin-top: 2px;
}

html body .timeline-item .timeline-description,
html body .timeline-item .timeline-content > .description,
html body .timeline-item > p {
  font-size: 12.5px;
  color: var(--md-neutral-30);
  margin: 4px 0 0 0;
  line-height: 1.5;
}

/* Inline actor (the person who performed the action) */
html body .timeline-item .timeline-actor {
  font-weight: 500;
  color: var(--md-neutral-10);
}

/* Card-style timeline item (when content is wrapped in a card) */
html body .timeline-item .timeline-card,
html body .timeline-item > .card {
  background-color: var(--md-surface-card);
  border-radius: var(--md-radius-lg);
  border: 1px solid var(--md-surface-divider);
  padding: 10px 14px;
  margin-top: 2px;
  box-shadow: none;
}

html body .timeline-item .timeline-card.is-highlight,
html body .timeline-item .timeline-card.bg-primary-soft {
  background-color: var(--md-surface-tinted);
  border-color: var(--md-primary-90);
}

/* Date separator within the timeline (e.g., "Yesterday", "May 18") */
html body .timeline .timeline-date,
html body .timeline-vertical .timeline-date,
html body .activity-timeline .timeline-date {
  position: relative;
  margin: 18px 0 12px -2px;
  padding-left: 32px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--md-neutral-40);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html body .timeline .timeline-date:first-child {
  margin-top: 0;
}


/* Horizontal timeline variant (for short event chains) */
html body .timeline.timeline-horizontal,
html body .timeline-horizontal {
  display: flex;
  align-items: flex-start;
  padding: 6px 0;
}

html body .timeline-horizontal::before {
  top: 14px;
  left: 12%;
  right: 12%;
  bottom: auto;
  width: auto;
  height: 2px;
}

html body .timeline-horizontal .timeline-item {
  flex: 1;
  padding: 0 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

html body .timeline-horizontal .timeline-item::before {
  position: static;
  margin-bottom: 8px;
}


/* ============================================================================
   2. CHAT — message bubbles, thread layout, composer (12 use sites)
   Covers in-app messaging and the support chat widget Phoenix bundles.
   ============================================================================ */

/* Chat thread container */
html body .chat-thread,
html body .chat-messages,
html body .chat-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background-color: var(--md-surface-page);
  font-family: 'Inter', sans-serif;
  overflow-y: auto;
}

/* Day separator */
html body .chat-day-separator,
html body .chat-date-divider {
  text-align: center;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--md-neutral-40);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 12px 0 6px;
  position: relative;
}

html body .chat-day-separator::before,
html body .chat-day-separator::after,
html body .chat-date-divider::before,
html body .chat-date-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background-color: var(--md-surface-divider);
}

html body .chat-day-separator::before,
html body .chat-date-divider::before { left: 8%; }
html body .chat-day-separator::after,
html body .chat-date-divider::after { right: 8%; }

/* Single message row */
html body .chat-message {
  display: flex;
  gap: 9px;
  align-items: flex-end;
  max-width: 78%;
}

html body .chat-message.message-mine,
html body .chat-message.outgoing,
html body .chat-message.is-self {
  align-self: flex-end;
  flex-direction: row-reverse;
}

/* Avatar */
html body .chat-message .chat-avatar,
html body .chat-message > .avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 500;
  flex-shrink: 0;
  background-color: var(--md-neutral-95);
  color: var(--md-neutral-30);
}

html body .chat-message.message-mine .chat-avatar,
html body .chat-message.outgoing .chat-avatar {
  background-color: var(--md-primary-90);
  color: var(--md-primary-10);
}

/* Hide avatar on consecutive messages from the same sender (opt-in) */
html body .chat-message.consecutive .chat-avatar {
  visibility: hidden;
}

/* Message bubble */
html body .chat-message .chat-bubble,
html body .chat-message .message-body,
html body .chat-message > .bubble {
  background-color: var(--md-surface-card);
  color: var(--md-neutral-10);
  padding: 8px 12px;
  border-radius: var(--md-radius-xl);
  border-bottom-left-radius: var(--md-radius-sm);
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(15, 55, 65, 0.04);
  max-width: 100%;
  word-wrap: break-word;
}

/* Outgoing — teal bubble */
html body .chat-message.message-mine .chat-bubble,
html body .chat-message.outgoing .chat-bubble,
html body .chat-message.is-self .chat-bubble,
html body .chat-message.message-mine .message-body,
html body .chat-message.outgoing .message-body {
  background-color: var(--md-primary-40);
  color: #FFFFFF;
  border-radius: var(--md-radius-xl);
  border-bottom-right-radius: var(--md-radius-sm);
  border-bottom-left-radius: var(--md-radius-xl);
}

/* Message metadata (timestamp, read receipt) */
html body .chat-message .chat-meta,
html body .chat-message .message-meta {
  font-size: 10.5px;
  color: var(--md-neutral-50);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}

html body .chat-message.message-mine .chat-meta,
html body .chat-message.outgoing .chat-meta {
  justify-content: flex-end;
  color: var(--md-neutral-50);
}

/* Sender name (for group chats) */
html body .chat-message .chat-sender,
html body .chat-message .message-sender {
  font-size: 11px;
  font-weight: 500;
  color: var(--md-neutral-30);
  margin-bottom: 2px;
}

/* System / event message (e.g., "Ramesh joined the conversation") */
html body .chat-message.is-system,
html body .chat-event {
  align-self: center;
  max-width: 100%;
  text-align: center;
  font-size: 11px;
  color: var(--md-neutral-40);
  background: transparent;
  padding: 4px 10px;
  font-style: normal;
}

/* Typing indicator */
html body .chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 8px 12px;
  background-color: var(--md-surface-card);
  border-radius: var(--md-radius-xl);
  border-bottom-left-radius: var(--md-radius-sm);
  box-shadow: 0 1px 2px rgba(15, 55, 65, 0.04);
  max-width: 60px;
}

html body .chat-typing > span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--md-neutral-60);
  animation: md-chat-pulse 1.2s ease-in-out infinite;
}

html body .chat-typing > span:nth-child(2) { animation-delay: 0.15s; }
html body .chat-typing > span:nth-child(3) { animation-delay: 0.3s; }

@keyframes md-chat-pulse {
  0%, 60%, 100% { opacity: 0.35; transform: scale(1); }
  30%           { opacity: 1;    transform: scale(1.2); }
}

/* Composer (input area at bottom of chat) */
html body .chat-composer,
html body .chat-input-container {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background-color: var(--md-surface-card);
  border-top: 1px solid var(--md-surface-divider);
}

html body .chat-composer .chat-input,
html body .chat-composer textarea,
html body .chat-composer input[type="text"] {
  flex: 1;
  background-color: var(--md-neutral-98);
  border: 1px solid var(--md-surface-border);
  border-radius: var(--md-radius-xl);
  padding: 7px 12px;
  font-size: 13px;
  font-family: 'Inter', sans-serif;
  color: var(--md-neutral-10);
  resize: none;
  min-height: 34px;
  max-height: 100px;
  outline: none;
  line-height: 1.4;
}

html body .chat-composer .chat-input:focus,
html body .chat-composer textarea:focus {
  background-color: var(--md-surface-card);
  border-color: var(--md-primary-40);
  box-shadow: 0 0 0 3px rgba(22, 127, 146, 0.10);
}

html body .chat-composer .chat-action-btn,
html body .chat-composer .composer-icon-btn {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  border-radius: var(--md-radius-lg);
  color: var(--md-neutral-30);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 120ms ease;
}

html body .chat-composer .chat-action-btn:hover,
html body .chat-composer .composer-icon-btn:hover {
  background-color: var(--md-primary-95);
  color: var(--md-primary-40);
}

html body .chat-composer .chat-send-btn,
html body .chat-composer .send-btn {
  background-color: var(--md-primary-40) !important;
  color: #FFFFFF !important;
  width: 32px;
  height: 32px;
  border: 0 !important;
  border-radius: var(--md-radius-lg) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--md-elev-1);
}

html body .chat-composer .chat-send-btn:hover,
html body .chat-composer .send-btn:hover {
  background-color: var(--md-primary-30) !important;
  box-shadow: var(--md-elev-2);
}

/* Chat header (shown above the thread — contact name, status) */
html body .chat-header,
html body .chat-conversation-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background-color: var(--md-surface-card);
  border-bottom: 1px solid var(--md-surface-divider);
}

html body .chat-header .chat-header-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--md-primary-90);
  color: var(--md-primary-10);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
  position: relative;
}

html body .chat-header .chat-status-indicator {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid var(--md-surface-card);
}

html body .chat-header .chat-status-indicator.online { background-color: var(--md-success-400); }
html body .chat-header .chat-status-indicator.away   { background-color: var(--md-warning-400); }
html body .chat-header .chat-status-indicator.offline{ background-color: var(--md-neutral-70); }

html body .chat-header .chat-header-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--md-neutral-10);
}

html body .chat-header .chat-header-status {
  font-size: 11px;
  color: var(--md-neutral-40);
}

/* Phoenix's support chat panel (data-chat-window) */
html body [data-chat-window],
html body .support-chat-panel,
html body .chat-widget-window {
  background-color: var(--md-surface-card);
  border-radius: var(--md-radius-xl);
  box-shadow: var(--md-elev-4);
  overflow: hidden;
}


/* ============================================================================
   3. KANBAN — column header, draggable cards, drop indicators (1 use site)
   Lightweight rules — covers the job application pipeline page.
   ============================================================================ */

/* Board container */
html body .kanban-board,
html body .kanban-container {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 0 12px;
  font-family: 'Inter', sans-serif;
  align-items: flex-start;
}

/* Column */
html body .kanban-column,
html body .kanban-list {
  flex: 0 0 280px;
  background-color: var(--md-surface-tinted);
  border-radius: var(--md-radius-xl);
  padding: 10px;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Column header */
html body .kanban-column-header,
html body .kanban-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 6px 6px;
}

html body .kanban-column-header .column-title,
html body .kanban-list-header .list-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--md-neutral-10);
  letter-spacing: 0.02em;
  flex: 1;
}

html body .kanban-column-header .column-count,
html body .kanban-list-header .item-count {
  background-color: var(--md-primary-90);
  color: var(--md-primary-10);
  font-size: 10.5px;
  font-weight: 500;
  padding: 1px 7px;
  border-radius: var(--md-radius-pill);
  font-variant-numeric: tabular-nums;
}

/* Status-colored column accent dots */
html body .kanban-column-header .column-accent {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

html body .kanban-column-header .column-accent.accent-primary { background-color: var(--md-primary-40); }
html body .kanban-column-header .column-accent.accent-success { background-color: var(--md-success-400); }
html body .kanban-column-header .column-accent.accent-warning { background-color: var(--md-warning-400); }
html body .kanban-column-header .column-accent.accent-danger  { background-color: var(--md-error-400); }
html body .kanban-column-header .column-accent.accent-info    { background-color: var(--md-info-400); }
html body .kanban-column-header .column-accent.accent-neutral { background-color: var(--md-neutral-70); }

/* Add-item button at top of column */
html body .kanban-column-header .column-add-btn,
html body .kanban-list-header .list-add-btn {
  width: 22px;
  height: 22px;
  border: 0;
  background: transparent;
  border-radius: var(--md-radius-md);
  color: var(--md-neutral-40);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

html body .kanban-column-header .column-add-btn:hover,
html body .kanban-list-header .list-add-btn:hover {
  background-color: var(--md-surface-card);
  color: var(--md-primary-40);
}

/* Cards inside the column */
html body .kanban-item,
html body .kanban-card {
  background-color: var(--md-surface-card) !important;
  border-radius: var(--md-radius-lg) !important;
  padding: 10px 12px !important;
  box-shadow: 0 1px 2px rgba(15, 55, 65, 0.04), 0 1px 3px rgba(15, 55, 65, 0.06) !important;
  border: 0 !important;
  font-family: 'Inter', sans-serif;
  cursor: grab;
  transition: box-shadow 160ms ease, transform 100ms ease;
}

html body .kanban-item:hover,
html body .kanban-card:hover {
  box-shadow: var(--md-elev-2) !important;
}

html body .kanban-item:active,
html body .kanban-item.is-dragging,
html body .kanban-card.is-dragging {
  cursor: grabbing;
  transform: rotate(1.5deg);
  box-shadow: var(--md-elev-3) !important;
  opacity: 0.94;
}

/* Card content */
html body .kanban-item .card-title,
html body .kanban-card .card-title {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--md-neutral-10) !important;
  margin-bottom: 4px !important;
  line-height: 1.35;
}

html body .kanban-item .card-meta,
html body .kanban-item .card-body > .meta,
html body .kanban-card .card-meta {
  font-size: 11px;
  color: var(--md-neutral-40);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

html body .kanban-item .card-footer,
html body .kanban-card .card-footer {
  background: transparent !important;
  border: 0 !important;
  padding: 6px 0 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  color: var(--md-neutral-40);
}

/* Drop target indicator (when dragging over an empty slot) */
html body .kanban-column.is-drop-target,
html body .kanban-list.is-drop-target {
  background-color: var(--md-primary-95);
  outline: 2px dashed var(--md-primary-40);
  outline-offset: -2px;
}

/* Empty column placeholder */
html body .kanban-column-empty,
html body .kanban-empty-message {
  padding: 20px 12px;
  text-align: center;
  font-size: 11.5px;
  color: var(--md-neutral-50);
  background-color: var(--md-surface-card);
  border-radius: var(--md-radius-lg);
  border: 1px dashed var(--md-surface-border);
}


/* ============================================================================
   4. WIZARD SUPPLEMENT — extends Sprint 5's stepper for wizard contexts
   Adds: progress header, page transitions, footer action bar
   ============================================================================ */

/* Wizard container */
html body .wizard,
html body .form-wizard,
html body .theme-wizard {
  font-family: 'Inter', sans-serif;
  background-color: var(--md-surface-card);
  border-radius: var(--md-radius-xl);
  box-shadow: var(--md-elev-1);
  overflow: hidden;
}

/* Wizard header — title + progress */
html body .wizard-header,
html body .wizard > .header {
  padding: 16px 22px 14px;
  border-bottom: 1px solid var(--md-surface-divider);
}

html body .wizard-header .wizard-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--md-neutral-10);
  letter-spacing: -0.2px;
  margin: 0 0 2px;
}

html body .wizard-header .wizard-subtitle {
  font-size: 12px;
  color: var(--md-neutral-40);
}

/* Wizard progress bar (top thin bar showing % completion) */
html body .wizard-progress,
html body .wizard > .progress {
  height: 3px;
  background-color: var(--md-neutral-95);
  position: relative;
  overflow: hidden;
}

html body .wizard-progress .wizard-progress-fill,
html body .wizard-progress > .fill {
  height: 100%;
  background-color: var(--md-primary-40);
  transition: width 320ms cubic-bezier(0.2, 0, 0, 1);
  border-radius: 0 1.5px 1.5px 0;
}

/* Stepper inside the header (uses Sprint 5 stepper styles) */
html body .wizard-header .stepper-horizontal {
  padding-top: 12px;
}

/* Wizard body — the active step content */
html body .wizard-body,
html body .wizard > .body,
html body .wizard-pane {
  padding: 20px 22px;
  min-height: 280px;
}

/* Page transition — fade between steps */
html body .wizard-pane > .step,
html body .wizard-pane > .wizard-step {
  display: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

html body .wizard-pane > .step.is-active,
html body .wizard-pane > .wizard-step.is-active,
html body .wizard-pane > .step.active {
  display: block;
  opacity: 1;
}

/* Wizard footer — Back / Continue / Submit */
html body .wizard-footer,
html body .wizard > .footer,
html body .wizard-actions {
  padding: 14px 22px;
  background-color: var(--md-surface-card-soft);
  border-top: 1px solid var(--md-surface-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

html body .wizard-footer .wizard-step-indicator,
html body .wizard-actions > .step-indicator {
  font-size: 11.5px;
  color: var(--md-neutral-40);
  font-variant-numeric: tabular-nums;
}

html body .wizard-footer .wizard-actions-right,
html body .wizard-actions > .actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* Completed wizard state (last step shown as success) */
html body .wizard-complete {
  text-align: center;
  padding: 36px 22px;
}

html body .wizard-complete .complete-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: var(--md-success-50);
  color: var(--md-success-800);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  font-size: 28px;
}

html body .wizard-complete .complete-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--md-neutral-10);
  margin-bottom: 4px;
}

html body .wizard-complete .complete-supporting {
  font-size: 13px;
  color: var(--md-neutral-40);
  max-width: 320px;
  margin: 0 auto 16px;
  line-height: 1.5;
}

html body .wizard-complete .complete-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}


/* ============================================================================
   5. ACCESSIBILITY — focus and reduced motion
   ============================================================================ */

html body .kanban-item:focus-visible,
html body .kanban-card:focus-visible,
html body .timeline-item:focus-visible {
  outline: 2px solid var(--md-primary-40);
  outline-offset: 2px;
}

html body .chat-composer .chat-input:focus-visible,
html body .chat-composer .chat-action-btn:focus-visible,
html body .chat-composer .chat-send-btn:focus-visible {
  outline: 2px solid var(--md-primary-40);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html body .chat-typing > span { animation: none; opacity: 0.5; }
  html body .kanban-item, html body .kanban-card { transition: none; }
  html body .kanban-item:active, html body .kanban-item.is-dragging { transform: none; }
  html body .wizard-progress .wizard-progress-fill { transition: none; }
  html body .wizard-pane > .step { transition: none; }
}


/* ============================================================================
   6. RESPONSIVE — mobile breakpoints
   ============================================================================ */

@media (max-width: 768px) {
  /* Timeline — tighter spacing */
  html body .timeline-item,
  html body .activity-timeline .timeline-item {
    padding-left: 28px;
    padding-bottom: 12px;
  }

  html body .timeline::before,
  html body .activity-timeline::before {
    left: 10px;
  }

  /* Chat — full width messages, smaller avatars */
  html body .chat-message {
    max-width: 88%;
  }

  html body .chat-message .chat-avatar {
    width: 24px;
    height: 24px;
    font-size: 10px;
  }

  /* Kanban — narrower columns, single column scroll */
  html body .kanban-column,
  html body .kanban-list {
    flex: 0 0 240px;
    padding: 8px;
  }

  /* Wizard — tighter padding */
  html body .wizard-header { padding: 14px 16px 10px; }
  html body .wizard-body   { padding: 16px; }
  html body .wizard-footer { padding: 12px 16px; flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 576px) {
  /* Kanban becomes single-column stack on very small screens */
  html body .kanban-board.kanban-mobile-stack {
    flex-direction: column;
  }
  html body .kanban-board.kanban-mobile-stack .kanban-column {
    flex: 0 0 auto;
    width: 100%;
  }
}


/* ============================================================================
   END OF SPRINT 7
   Coming next:
   · Sprint 8: Third-party libraries (Flatpickr, TinyMCE, Choices.js, Dropzone)
   · Sprint 9: Final consolidation — minified single-file bundle
   ============================================================================ */