/* ==========================================================================
   Chatterbug — shared components
   Buttons, fields, cards, badges, modals, toasts, avatars, empty states.
   ========================================================================== */

/* ---------------------------------------------------------------- button */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 20px; border: 1.5px solid transparent; border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font-weight: 600; font-size: .95rem; line-height: 1.2;
  transition: transform var(--speed) var(--ease), background var(--speed), box-shadow var(--speed), border-color var(--speed);
  white-space: nowrap; text-decoration: none;
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn .fa-solid, .btn .fa-regular { font-size: .95em; }

.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.btn-primary:hover:not(:disabled) { background: var(--accent-deep); color: var(--on-accent); box-shadow: var(--shadow-md); }

.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink-soft); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-faint); color: var(--ink); }

.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-soft); padding: 8px 12px; }
.btn-quiet:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }

.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: #a02323; color: #fff; }

.btn-danger-ghost { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger-ghost:hover:not(:disabled) { background: var(--danger-tint); }

.btn-ok { background: var(--ok); color: #fff; }
.btn-ok:hover:not(:disabled) { background: #12653a; color: #fff; }

.btn-sm { padding: 7px 14px; font-size: .85rem; }
.btn-lg { padding: 15px 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* Icon-only button — always needs an aria-label in the markup. */
.btn-icon {
  width: 40px; height: 40px; padding: 0; border-radius: var(--r-pill);
  background: transparent; border: none; color: var(--ink-soft);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--speed), color var(--speed);
}
.btn-icon:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.btn-icon.is-active { background: var(--accent-tint); color: var(--accent-deep); }

/* ---------------------------------------------------------------- fields */

.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.field .hint { font-size: .82rem; color: var(--ink-faint); }
.field .error { font-size: .84rem; color: var(--danger); font-weight: 600; display: flex; align-items: center; gap: 6px; }

.input, .select, .textarea {
  width: 100%; padding: 12px 14px;
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
  transition: border-color var(--speed), box-shadow var(--speed);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-faint); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-tint);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-faint); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.textarea { resize: vertical; min-height: 90px; }
.select { appearance: none; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23767d8c' d='M8 11 3.5 6h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
}

.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-left: 42px; }
.input-group > .fa-solid, .input-group > .fa-regular {
  position: absolute; left: 15px; color: var(--ink-faint); pointer-events: none; font-size: .95rem;
}

/* ----------------------------------------------------------------- card */

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.card-pad { padding: 22px; }
.card-head {
  padding: 18px 22px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-body { padding: 22px; }
.card-foot { padding: 16px 22px; border-top: 1px solid var(--line-soft); background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg); }

/* --------------------------------------------------------------- badges */

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  background: var(--surface-3); color: var(--ink-soft); white-space: nowrap;
}
.badge-ok     { background: var(--ok-tint);     color: #12653a; }
.badge-warn   { background: var(--warn-tint);   color: #8a5100; }
.badge-danger { background: var(--danger-tint); color: #99201f; }
.badge-info   { background: var(--info-tint);   color: #0a5299; }
.badge-accent { background: var(--accent-tint); color: var(--accent-deep); }

.count-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 21px; height: 21px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--danger); color: #fff;
  font-size: .74rem; font-weight: 800;
}

/* -------------------------------------------------------------- avatars */

.avatar {
  --size: 42px;
  width: var(--size); height: var(--size); flex: 0 0 var(--size);
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-deep);
  font-size: calc(var(--size) * .44);
  position: relative;
}
.avatar-sm { --size: 32px; }
.avatar-lg { --size: 60px; }
.avatar-xl { --size: 88px; }

/* Presence dot sits on the avatar so the list stays scannable at a glance. */
.avatar[data-online]::after {
  content: ''; position: absolute; right: -1px; bottom: -1px;
  width: calc(var(--size) * .30); height: calc(var(--size) * .30);
  border-radius: 50%; border: 2.5px solid var(--surface);
  background: var(--ink-faint);
}
.avatar[data-online="true"]::after { background: var(--ok); }

/* --------------------------------------------------------------- modal */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(18, 21, 30, .5); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 20px;
  animation: fade-in var(--speed) var(--ease);
}
.modal {
  background: var(--surface); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  width: min(520px, 100%); max-height: min(88vh, 780px);
  display: flex; flex-direction: column; overflow: hidden;
  animation: modal-in 220ms var(--ease);
}
.modal-wide { width: min(760px, 100%); }
.modal-head { padding: 22px 26px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.modal-head h2 { font-size: 1.25rem; }
.modal-head .sub { font-size: .9rem; color: var(--ink-faint); margin-top: 3px; }
.modal-body { padding: 6px 26px 22px; overflow-y: auto; }
.modal-foot {
  padding: 16px 26px; border-top: 1px solid var(--line-soft); background: var(--surface-2);
  display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- toasts */

.toast-host {
  position: fixed; right: 18px; bottom: 18px; z-index: 400;
  display: flex; flex-direction: column-reverse; gap: 10px;
  max-width: min(400px, calc(100vw - 36px)); pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: var(--r-md);
  background: var(--ink); color: #fff; box-shadow: var(--shadow-lg);
  font-size: .92rem; animation: toast-in 240ms var(--ease);
}
.toast .fa-solid { margin-top: 2px; font-size: 1rem; }
.toast-ok     { background: #14653c; }
.toast-warn   { background: #8a5100; }
.toast-danger { background: #96201f; }
.toast button { background: none; border: none; color: inherit; opacity: .7; padding: 0 0 0 6px; }
.toast button:hover { opacity: 1; }
.toast.is-leaving { animation: toast-out 200ms var(--ease) forwards; }

@keyframes toast-in  { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }

/* --------------------------------------------------------- empty states */

.empty {
  text-align: center; padding: 46px 26px; color: var(--ink-faint);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.empty .icon {
  width: 68px; height: 68px; border-radius: var(--r-pill);
  background: var(--surface-3); color: var(--ink-faint);
  display: grid; place-items: center; font-size: 1.7rem;
}
.empty h3 { color: var(--ink-soft); }
.empty p { max-width: 42ch; font-size: .92rem; }

/* ------------------------------------------------------------- notices */

.notice {
  display: flex; gap: 12px; padding: 14px 16px;
  border-radius: var(--r-md); font-size: .9rem;
  border: 1px solid transparent;
}
.notice > .fa-solid, .notice > .fa-regular { margin-top: 2px; font-size: 1.05rem; }
.notice-info   { background: var(--info-tint);   border-color: #c6ddf7; color: #0a4a8f; }
.notice-ok     { background: var(--ok-tint);     border-color: #bfe4d0; color: #115c35; }
.notice-warn   { background: var(--warn-tint);   border-color: #f2d9ac; color: #7d4900; }
.notice-danger { background: var(--danger-tint); border-color: #f3c9c9; color: #8f1f1f; }

/* -------------------------------------------------------------- steps */

.steps { display: flex; flex-direction: column; gap: 0; counter-reset: step; }
.step { display: flex; gap: 16px; padding-bottom: 22px; position: relative; }
.step:last-child { padding-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  flex: 0 0 32px; height: 32px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center; font-weight: 800; font-size: .9rem;
  position: relative; z-index: 1;
}
.step:not(:last-child)::after {
  content: ''; position: absolute; left: 15.5px; top: 34px; bottom: 6px;
  width: 2px; background: var(--line);
}
.step.is-done::before { background: var(--ok); }
.step.is-todo::before { background: var(--surface-3); color: var(--ink-faint); }
.step h4 { margin-bottom: 3px; }
.step p { font-size: .9rem; color: var(--ink-soft); margin: 0; }

/* ------------------------------------------------------------ spinner */

.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite; display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-page { display: grid; place-items: center; min-height: 60vh; color: var(--ink-faint); gap: 14px; }