/* ────────────────────────────────────────────────────────────────
   ZyyAssist Dashboard — shadcn-inspired utilities + dark theme
   ──────────────────────────────────────────────────────────────── */

:root { color-scheme: dark; }

html, body {
  height: 100%;
}

body {
  font-feature-settings: "ss01", "cv11";
}

/* ─── Grid backdrop ───────────────────────────────────────────── */
.grid-bg {
  background-image:
    linear-gradient(to right, rgba(28,40,54,.45) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(28,40,54,.45) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at 30% 20%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.15) 60%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 30% 20%, rgba(0,0,0,.9) 0%, rgba(0,0,0,.15) 60%, transparent 75%);
}

/* ─── Card (shadcn-style) ─────────────────────────────────────── */
.card {
  position: relative;
  background: linear-gradient(180deg, rgba(18,26,36,.95) 0%, rgba(12,19,27,.95) 100%);
  border: 1px solid #1C2836;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.02) inset, 0 10px 40px -20px rgba(0,0,0,.7);
}

.card::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(1200px 200px at 10% -10%, rgba(34,211,166,.08), transparent 40%),
              radial-gradient(800px 120px at 110% 0%, rgba(79,195,255,.07), transparent 35%);
  pointer-events: none;
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(28,40,54,.7);
  background: rgba(7,11,16,.5);
}

.card-body { padding: 18px; }

/* ─── Stat cards ──────────────────────────────────────────────── */
.stat-card {
  position: relative;
  background: linear-gradient(165deg, rgba(18,26,36,.95) 0%, rgba(10,15,22,.95) 100%);
  border: 1px solid #1C2836;
  border-radius: 14px;
  padding: 18px 18px 24px;
  overflow: hidden;
  isolation: isolate;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: rgba(34,211,166,.35);
}

.stat-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,211,166,.7), transparent);
  opacity: .0;
  transition: opacity .35s;
}

.stat-card:hover::after { opacity: .9; }

.stat-spark {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: rgba(28,40,54,.5);
  overflow: hidden;
}

.stat-spark > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, transparent, #22D3A6 45%, #4FC3FF 65%, transparent);
  width: 40%;
  animation: sparkSlide 3.6s infinite ease-in-out;
}

@keyframes sparkSlide {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(260%); }
  100% { transform: translateX(260%); }
}

.stat-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  border: 1px solid #1C2836;
  background: #0C131B;
}

.stat-icon-accent  { color: #22D3A6; border-color: rgba(34,211,166,.25); background: rgba(34,211,166,.08); }
.stat-icon-accent2 { color: #4FC3FF; border-color: rgba(79,195,255,.25); background: rgba(79,195,255,.08); }
.stat-icon-warn    { color: #FBBF24; border-color: rgba(251,191,36,.25); background: rgba(251,191,36,.08); }

/* ─── Badges (shadcn pill) ────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  border: 1px solid transparent;
}

.badge-muted  { color: #9CA9BA; background: #121A24; border-color: #1C2836; }
.badge-accent { color: #22D3A6; background: rgba(34,211,166,.1); border-color: rgba(34,211,166,.25); }
.badge-accent2{ color: #4FC3FF; background: rgba(79,195,255,.1); border-color: rgba(79,195,255,.25); }
.badge-warn   { color: #FBBF24; background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.25); }
.badge-danger { color: #F87171; background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); }
.badge-success{ color: #22D3A6; background: rgba(34,211,166,.1); border-color: rgba(34,211,166,.3); }

/* ─── Icon button ─────────────────────────────────────────────── */
.iconbtn {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 8px; border: 1px solid #1C2836;
  background: #0C131B; color: #9CA9BA;
  transition: color .2s, border-color .2s, background .2s;
}

.iconbtn:hover { color: #22D3A6; border-color: rgba(34,211,166,.4); background: rgba(34,211,166,.05); }

/* ─── Progress bar ────────────────────────────────────────────── */
.bar {
  width: 100%; height: 6px;
  border-radius: 999px;
  background: #121A24;
  overflow: hidden;
  border: 1px solid #1C2836;
}

.bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #22D3A6, #4FC3FF);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}

.bar-fill-2 {
  background: linear-gradient(90deg, #FBBF24, #F87171);
}

/* ─── Feed (logs + messages) ──────────────────────────────────── */
.feed {
  overflow-y: auto;
  padding: 12px 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  line-height: 1.6;
  scroll-behavior: smooth;
}

.feed::-webkit-scrollbar { width: 6px; }
.feed::-webkit-scrollbar-thumb { background: #1C2836; border-radius: 3px; }
.feed::-webkit-scrollbar-track { background: transparent; }

.log-row {
  display: flex; gap: 10px;
  padding: 3px 2px;
  border-radius: 4px;
  animation: rowIn .28s ease-out both;
}

.log-row:hover { background: rgba(28,40,54,.35); }
.log-time { color: #5D7290; flex-shrink: 0; width: 64px; }
.log-tag  { flex-shrink: 0; width: 44px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 10px; padding-top: 3px; }
.log-msg  { color: #CBD5E1; word-break: break-word; }

.log-info  .log-tag { color: #4FC3FF; }
.log-ok    .log-tag { color: #22D3A6; }
.log-warn  .log-tag { color: #FBBF24; }
.log-err   .log-tag { color: #F87171; }
.log-evt   .log-tag { color: #C084FC; }

.msg-row {
  display: flex; gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(28,40,54,.7);
  background: rgba(12,19,27,.5);
  margin-bottom: 8px;
  animation: rowIn .3s ease-out both;
}

.msg-row:hover { border-color: rgba(34,211,166,.25); }

.msg-avatar {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 11px;
  color: #0B0F14;
  background: linear-gradient(135deg, #22D3A6, #4FC3FF);
}

.msg-body { flex: 1; min-width: 0; }
.msg-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; margin-bottom: 2px; }
.msg-sender { font-weight: 600; color: #E6EDF7; }
.msg-time { color: #5D7290; font-variant-numeric: tabular-nums; }
.msg-chat { font-size: 10px; color: #9CA9BA; margin-bottom: 3px; }
.msg-text { font-size: 11px; color: #CBD5E1; word-break: break-word; }

@keyframes rowIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Table (shadcn) ──────────────────────────────────────────── */
.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }

.table thead th {
  position: sticky; top: 0;
  background: #070B10;
  color: #9CA9BA;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  padding: 10px 14px;
  font-weight: 600;
  border-bottom: 1px solid #1C2836;
}

.table tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(28,40,54,.6);
  color: #CBD5E1;
}

.table tbody tr:hover td { background: rgba(28,40,54,.25); }
.table .cell-id { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #9CA9BA; }

/* ─── Plugin chip ─────────────────────────────────────────────── */
.plg-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 8px;
  border: 1px solid #1C2836;
  background: #0C131B;
  font-size: 11px;
  color: #CBD5E1;
  font-family: 'JetBrains Mono', monospace;
  transition: border-color .2s, color .2s;
  animation: rowIn .3s ease-out both;
}

.plg-chip:hover { border-color: rgba(34,211,166,.4); color: #22D3A6; }

.plg-chip::before {
  content: "";
  display: inline-block; width: 5px; height: 5px;
  border-radius: 50%; background: #22D3A6;
  box-shadow: 0 0 6px rgba(34,211,166,.8);
}

/* ─── Reveal (staggered entrance) ─────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  animation: reveal .6s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ─── Global scrollbar ────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #1C2836; border-radius: 4px; }
::-webkit-scrollbar-track { background: #0C131B; }