/* Websie AI Assistant — client dashboard.
   Same token system as admin. One accent (gold), one radius (10px). */
:root {
  --navy-950: #0a1730;
  --navy-900: #0d2047;
  --navy-800: #14295a;
  --gold-500: #c4963a;
  --gold-400: #d4ab55;
  --paper: #f6f8fc;
  --ink: #0e1b33;
  --mut: #5a6b85;
  --line: #dde4ef;
  --ok: #2e7d4f;
  --warn: #9a6d1f;
  --err: #b3383e;
}
html { font-family: 'Outfit', system-ui, sans-serif; background: var(--paper); color: var(--ink); }
.font-display { font-family: 'Fraunces', serif; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.btn { display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  font-weight: 600; font-size: .875rem; border-radius: 10px; padding: .6rem 1.1rem;
  transition: transform .15s ease, background-color .15s ease; cursor: pointer; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 2px; }
.btn-primary { background: var(--navy-900); color: #fff; }
.btn-primary:hover { background: var(--navy-800); }
.btn-primary:disabled { opacity: .55; cursor: wait; }
.btn-gold { background: var(--gold-500); color: #fff; }
.btn-gold:hover { background: var(--gold-400); }
.btn-ghost { background: transparent; color: var(--navy-900); border: 1px solid var(--line); }
.btn-ghost:hover { border-color: var(--navy-800); }
.btn-danger { background: transparent; color: var(--err); border: 1px solid var(--line); }
.btn-danger:hover { border-color: var(--err); background: #fdf3f3; }

.field label { display: block; font-size: .8rem; font-weight: 600; margin-bottom: .35rem; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 10px;
  padding: .55rem .8rem; font-size: .9rem; background: #fff; color: var(--ink); }
.field textarea { min-height: 90px; resize: vertical; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--gold-500); outline-offset: 1px; border-color: var(--gold-500); }
.field .help { font-size: .75rem; color: var(--mut); margin-top: .3rem; }
.field .error { font-size: .78rem; color: var(--err); margin-top: .3rem; }
.counter { font-size: .72rem; color: var(--mut); text-align: right; margin-top: .2rem; }
.counter.over { color: var(--err); font-weight: 700; }

.badge { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700;
  border-radius: 999px; padding: .15rem .55rem; white-space: nowrap; }
.badge-ok { background: #e7f3ec; color: var(--ok); }
.badge-wait { background: #fdf5e6; color: var(--warn); }
.badge-err { background: #fdf0f0; color: var(--err); }
.badge-off { background: #f3f4f7; color: var(--mut); }

.nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.nav a { font-size: .85rem; font-weight: 600; color: var(--mut); padding: .45rem .8rem;
  border-radius: 10px; transition: background-color .15s ease, color .15s ease; }
.nav a:hover { background: #eef2f9; color: var(--ink); }
.nav a[aria-current="page"] { background: var(--navy-900); color: #fff; }

.stat { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 1.1rem 1.2rem; }
.stat .n { font-family: 'Fraunces', serif; font-size: 1.9rem; line-height: 1; }
.stat .l { font-size: .78rem; color: var(--mut); margin-top: .35rem; }

.skeleton { background: linear-gradient(90deg, #eef1f7 25%, #f7f9fc 50%, #eef1f7 75%);
  background-size: 200% 100%; animation: sk 1.2s infinite linear; border-radius: 10px; }
@keyframes sk { from { background-position: 200% 0 } to { background-position: -200% 0 } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none } .btn { transition: none } }

.toast { position: fixed; bottom: 1.25rem; left: 50%; transform: translateX(-50%);
  background: var(--navy-900); color: #fff; border-radius: 10px; padding: .7rem 1.2rem;
  font-size: .875rem; box-shadow: 0 10px 30px -8px rgba(13,32,71,.45); z-index: 50; }
.toast.err { background: var(--err); }

/* Preview chat */
.chat { height: 420px; overflow-y: auto; background: #f4f6fb; border-radius: 10px; padding: 12px; }
.cmsg { max-width: 85%; padding: 9px 13px; border-radius: 14px; margin-bottom: 8px;
  font-size: .875rem; line-height: 1.45; white-space: pre-wrap; }
.cmsg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.cmsg.user { background: var(--navy-900); color: #fff; margin-left: auto; border-bottom-right-radius: 4px; }
.src { font-size: .68rem; color: var(--mut); margin: -4px 0 8px 2px; }