/* Mock Interview Coach -- overrides on top of Pico.css */

/* ── Toast notifications ──────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}

.toast {
  background: var(--pico-card-background-color);
  border: 1px solid var(--pico-card-border-color);
  border-radius: var(--pico-border-radius);
  padding: 0.75rem 1rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  animation: toast-in 0.22s ease-out;
  min-width: 220px;
  pointer-events: auto;
  transition: opacity 0.3s;
}

.toast.success { border-left: 4px solid #28a745; }
.toast.error   { border-left: 4px solid #dc3545; }
.toast.info    { border-left: 4px solid #17a2b8; }

@keyframes toast-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Score bars ───────────────────────────────────────────────── */
.score-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0.5rem 0;
}

.score-bar .label {
  width: 100px;
  text-transform: capitalize;
  font-weight: 600;
}

.score-bar .bar {
  flex: 1;
  background: var(--pico-muted-border-color);
  height: 18px;
  border-radius: 9px;
  overflow: hidden;
}

.score-bar .fill {
  height: 100%;
  width: 0;
  background: linear-gradient(to right, #ff9a9e, #fad0c4 50%, #84d8a4);
  transition: width 0.8s cubic-bezier(.4, 0, .2, 1);
}

.score-bar .value {
  width: 48px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ── Skeleton loader (shimmer) ────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--pico-muted-border-color) 25%,
    var(--pico-card-background-color) 50%,
    var(--pico-muted-border-color) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  height: 1em;
  margin: 0.5em 0;
}

.skeleton.lg { height: 2em; }

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Side-by-side answer comparison ───────────────────────────── */
.answer-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}

@media (max-width: 720px) {
  .answer-comparison { grid-template-columns: 1fr; }
}

.answer-comparison article {
  margin: 0;
}

.answer-comparison h4 {
  margin-top: 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

/* ── Char count under textarea ────────────────────────────────── */
.char-count {
  text-align: right;
  font-size: 0.85rem;
  opacity: 0.6;
  margin-top: 0.25rem;
}

.char-count.warn { color: #f0ad4e; opacity: 1; }

/* ── Strength / weakness lists ────────────────────────────────── */
.strengths, .weaknesses {
  padding-left: 1.25rem;
}
.strengths li::marker  { content: "✓ "; color: #28a745; font-weight: bold; }
.weaknesses li::marker { content: "✗ "; color: #dc3545; font-weight: bold; }

/* ── Category badge ───────────────────────────────────────────── */
.cat {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--pico-secondary-background);
  font-size: 0.8rem;
  text-transform: capitalize;
}

/* ── Misc ─────────────────────────────────────────────────────── */
button[aria-busy="true"] { pointer-events: none; }

kbd {
  background: var(--pico-code-background-color, #eee);
  border-radius: 3px;
  padding: 0.1rem 0.3rem;
  font-size: 0.85em;
}