/* ============================================================
   PHASES 6, 7, 9 — Interactivity, Data Flow, Mobile-Native
   ============================================================ */

/* ---- Chat Typing Indicator ---- */
.typing-bubble {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 12px 16px !important;
  min-width: 56px;
}
.typing-bubble .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-text-muted);
  animation: typingBounce 1.4s infinite ease-in-out;
}
.typing-bubble .dot:nth-child(2) { animation-delay: 0.2s; }
.typing-bubble .dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* Bot message entrance */
.chat-message.bot-enter {
  animation: botSlideIn 0.3s ease-out;
}
@keyframes botSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Document List ---- */
.doc-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s ease;
}
.doc-item:last-child { border-bottom: none; }
.doc-item:hover { background: oklch(from var(--color-primary) l c h / 0.04); }

.doc-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--color-primary-subtle);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.doc-icon svg { width: 18px; height: 18px; }

.doc-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.doc-name {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
}
.doc-date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.doc-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}
.doc-status.status-success {
  background: oklch(from var(--color-success) l c h / 0.12);
  color: var(--color-success);
}
.doc-status.status-warning {
  background: oklch(from var(--color-warning) l c h / 0.12);
  color: var(--color-warning);
}
.doc-status.status-pending {
  background: var(--color-surface-offset);
  color: var(--color-text-muted);
}

/* ---- Activity Feed ---- */
.activity-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.activity-item + .activity-item {
  border-top: 1px solid var(--color-border);
}
.activity-icon {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  background: var(--color-surface-offset);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
}
.activity-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.activity-msg {
  font-size: var(--text-xs);
  color: var(--color-text);
  line-height: 1.4;
}
.activity-time {
  font-size: 10px;
  color: var(--color-text-faint);
}

/* ---- Pathway Card Expansion ---- */
.pathway-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.pathway-details.expanded {
  max-height: 500px;
}

/* ---- Section Transitions (Phase 9) ---- */
.section-exit {
  animation: sectionSlideOut 0.15s ease-in forwards;
}
.section-enter {
  animation: sectionSlideIn 0.2s ease-out forwards;
}
@keyframes sectionSlideOut {
  to { opacity: 0; transform: translateX(-12px); }
}
@keyframes sectionSlideIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Mobile Bottom Nav (Phase 9) ---- */
.mobile-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  min-height: 64px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  z-index: 9000;
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.mobile-bottom-nav .mbn-item {
  justify-content: center;
  align-items: center;
  padding: var(--space-2) var(--space-1);
  min-height: 64px;
}

@media (max-width: 768px) {
  .mobile-bottom-nav {
    display: flex;
  }
  /* Make room for bottom nav */
  .content-scroll {
    padding-bottom: 80px !important;
  }
  /* Hide the sidebar on mobile when bottom nav is present */
  .sidebar-footer {
    margin-bottom: 72px;
  }
}
/* Tablet (iPad): same bottom nav behavior as mobile */
@media (min-width: 769px) and (max-width: 1024px) {
  .mobile-bottom-nav {
    display: flex;
  }
  .content-scroll {
    padding-bottom: 80px !important;
  }
  .sidebar-footer {
    margin-bottom: 72px;
  }
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 12px;
  border: none;
  background: none;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: color 0.15s ease, background 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
.bottom-nav-item svg {
  width: 22px;
  height: 22px;
  stroke-width: 1.75;
}
.bottom-nav-item.active {
  color: var(--color-primary);
}
.bottom-nav-item.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 0 0 2px 2px;
}
.bottom-nav-item:active {
  background: oklch(from var(--color-primary) l c h / 0.08);
  transform: scale(0.95);
}

/* ---- Pull to Refresh ---- */
.pull-to-refresh {
  position: absolute;
  top: -48px;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: 10;
  pointer-events: none;
}
.pull-to-refresh .pull-spinner {
  transition: transform 0.3s ease;
}
.pull-to-refresh.ready .pull-spinner {
  transform: rotate(180deg);
  color: var(--color-primary);
}
.pull-to-refresh.refreshing .pull-spinner {
  animation: pullSpin 0.8s linear infinite;
}
@keyframes pullSpin {
  to { transform: rotate(360deg); }
}

/* ---- PWA Standalone Mode Adjustments ---- */
@media (display-mode: standalone) {
  .mobile-bottom-nav {
    display: flex;
  }
  /* Extra top padding for status bar */
  .app-shell {
    padding-top: env(safe-area-inset-top, 20px);
  }
}

/* ---- Touch-friendly enhancements ---- */
@media (max-width: 768px) {
  /* Larger tap targets */
  .nav-link,
  .sidebar-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Smooth momentum scrolling */
  .content-scroll,
  .main-content,
  .chat-messages {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Prevent text selection during swipe */
  .section {
    -webkit-user-select: none;
    user-select: none;
  }
  .section input,
  .section textarea,
  .section select,
  .chat-input {
    -webkit-user-select: auto;
    user-select: auto;
  }

  /* Chat FAB adjustment for bottom nav */
  .chat-fab {
    bottom: 80px !important;
  }
}