/* ==========================================================================
   UX Improvements — FAB, Undo Toast, Pairing History, Agent Cards
   ========================================================================== */

/* --- Floating Action Button --- */
.fab-add-wine {
  position: fixed;
  /* Stack above the 3rem agent chat toggle FAB (bottom: 1.5rem) + 0.75rem gap */
  bottom: calc(1.5rem + 3rem + 0.75rem + env(safe-area-inset-bottom, 0px));
  right: 1.5rem;    /* Align with agent chat toggle */
  width: 3rem;      /* Match agent chat toggle size */
  height: 3rem;
  border-radius: 50%;
  border: none;
  background: var(--accent, #B0A080);
  color: var(--text-on-light, #2C2420);
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  z-index: calc(var(--z-fab) + 1);    /* Above agent chat toggle */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.fab-add-wine:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.fab-add-wine:active {
  transform: scale(0.95);
}

.fab-add-wine:focus-visible {
  outline: 2px solid var(--accent, #B0A080);
  outline-offset: 3px;
}

.fab-add-wine[hidden] {
  display: none;
}

/* --- Undo Toast --- */
.toast-undo {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: var(--bg-card, #252525);
  border: 1px solid var(--accent, #B0A080);
  border-left: 4px solid var(--accent, #B0A080);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  z-index: var(--z-toast);
  min-width: 300px;
  max-width: 420px;
  animation: slideInRight 0.3s ease-out;
  overflow: hidden;
}

.toast-undo--expired {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* R10.1.4 Sarah validation fix: success variant for the drink-logged
 * confirmation. Same layout + Undo button as the default toast, but
 * the accent border + progress bar swap to green so the positive
 * outcome of a successful drink log *feels* positive instead of
 * neutral-or-destructive. Sarah: "I'd want a green ✓ flash so I
 * know it saved." */
.toast-undo.toast-undo--success {
  border-color: var(--green, #27ae60);
  border-left-color: var(--green, #27ae60);
}
.toast-undo.toast-undo--success .toast-undo-progress {
  background: var(--green, #27ae60);
}

.toast-undo-content {
  flex: 1;
  min-width: 0;
}

.toast-undo-message {
  font-size: 0.85rem;
  color: var(--text, #eee);
}

.toast-undo-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.toast-undo-btn {
  background: var(--accent, #B0A080);
  color: var(--bg-dark, #1a1a1a);
  border: none;
  font-weight: 600;
}

.toast-undo-dismiss {
  background: none;
  border: none;
  color: var(--text-muted, #888);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0 0.25rem;
}

.toast-undo-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--accent, #B0A080);
  border-radius: 0 0 8px 8px;
  animation: shrinkBar var(--undo-duration, 30000ms) linear forwards;
}

@keyframes shrinkBar {
  from { width: 100%; }
  to { width: 0%; }
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* --- Pairing History --- */
.pairing-history {
  max-width: 640px;
  margin: 0 auto;
  padding: 1rem;
}

.pairing-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.pairing-history-filters {
  display: flex;
  gap: var(--space-sm);
}

.pairing-history-filters select {
  background: var(--bg-slot, #2d2d2d);
  color: var(--text, #eee);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius-md);
  padding: 0.35rem 0.5rem;
  font-size: 0.8rem;
}

.pairing-history-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.pairing-history-card {
  background: var(--bg-card, #252525);
  border: 1px solid var(--border, #333);
  border-radius: var(--radius-lg);
  padding: 0.75rem 1rem;
  cursor: pointer;
  text-align: left;
  width: 100%;
  color: inherit;
  font: inherit;
  transition: border-color 0.15s;
}

.pairing-history-card:hover {
  border-color: var(--accent, #B0A080);
}

.pairing-history-card:focus-visible {
  outline: 2px solid var(--accent, #B0A080);
  outline-offset: 2px;
}

.pairing-history-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
}

.pairing-history-date {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}

.pairing-history-badge {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-xl);
  background: var(--bg-slot, #2d2d2d);
  color: var(--text-muted, #888);
}

.pairing-history-badge--sommelier { background: rgba(176, 160, 128, 0.2); color: var(--accent, #B0A080); }
.pairing-history-badge--lab { background: rgba(80, 180, 120, 0.2); color: #50b478; }
.pairing-history-badge--restaurant { background: rgba(80, 140, 200, 0.2); color: #508cc8; }
.pairing-history-badge--agent { background: rgba(180, 120, 200, 0.2); color: #b478c8; }
.pairing-history-badge--manual { background: var(--bg-slot, #2d2d2d); color: var(--text-muted, #888); }

.pairing-history-dish {
  font-size: 0.85rem;
  color: var(--text, #eee);
}

.pairing-history-wine {
  font-size: 0.8rem;
  color: var(--text-muted, #888);
  margin-top: 0.15rem;
}

.pairing-history-meta {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  margin-top: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}

.pairing-history-stars {
  color: var(--accent, #B0A080);
}

.pairing-history-notes-preview {
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.pairing-history-unrated {
  font-style: italic;
}

.pairing-history-empty,
.pairing-history-error {
  text-align: center;
  padding: 2rem 1rem;
}

.pairing-history-load-more {
  display: block;
  margin: 1rem auto;
}

/* Skeleton loading */
.pairing-history-card--skeleton {
  cursor: default;
  pointer-events: none;
}

/* .skeleton-line classes moved to components-misc.css (Phase 5B-4) */

/* --- Responsive --- */
@media (max-width: 480px) {
  .fab-add-wine {
    bottom: calc(1rem + 3rem + 0.75rem + env(safe-area-inset-bottom, 0px));
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.3rem;
  }

  .toast-undo {
    left: 0.5rem;
    right: 0.5rem;
    min-width: auto;
  }

  .pairing-history-filters {
    flex-wrap: wrap;
  }
}

/* --- Cross-link styles --- */
.recommendation-guide-link {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--accent, #B0A080);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.85rem;
  text-decoration: none;
}

.recommendation-guide-link:hover {
  text-decoration: underline;
}

.highlight-pulse {
  animation: highlightPulse 0.6s ease-in-out 2;
}

@keyframes highlightPulse {
  0%, 100% { outline: 2px solid transparent; }
  50% { outline: 2px solid var(--accent, #B0A080); outline-offset: 4px; }
}

/* --- Agent approval card enhancements --- */
.agent-confirmation-meta {
  font-size: 0.85rem;
  color: var(--text-muted, #999);
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.agent-confirmation-meta .meta-label {
  color: var(--text-light, #ccc);
  font-weight: 500;
}

.agent-confirmation-meta .meta-detail {
  display: block;
  margin-top: 0.125rem;
}

.agent-rating-prompt {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: 0.5rem;
  padding: 0.5rem;
  background: var(--bg-darker, #111);
  border-radius: var(--radius-md);
}

.agent-rating-prompt .star-btn {
  background: none;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 2px;
  color: var(--text-muted, #999);
  transition: color 0.1s;
}

.agent-rating-prompt .star-btn.selected,
.agent-rating-prompt .star-btn:hover {
  color: #f5c518;
}

.agent-rating-prompt .skip-rating {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-muted, #999);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
}

/* --- Agent/Sommelier bridge links --- */
.bridge-link {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--accent, #B0A080);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 0.85rem;
}

.bridge-link:hover {
  text-decoration: underline;
}

/* Phase 2.5: Hide the "+ add wine" FAB in Analysis view — analysis is a
   read-only review context, adding wines belongs in Wines/Cellar views.
   This also prevents the FAB from overlapping stats cards at narrow
   viewports. The agent-chat-toggle stays visible for on-analysis help. */
body[data-current-view="analysis"] .fab-add-wine {
  display: none !important;
}