/* Structural styles for the animated product mocks. Options override the
   --dk-* variables to fit their palette. */

:root {
  --dk-bg: #ffffff;
  --dk-line: #e6eaf1;
  --dk-ink: #111827;
  --dk-muted: #6b7280;
  --dk-head: #f8fafc;
  --dk-radius: 12px;
  --dk-font: inherit;
  --dk-mono: inherit;
  --dk-red: #c2410c;
  --dk-red-bg: #fff4ed;
  --dk-blue: #1d4ed8;
  --dk-blue-bg: #eef4ff;
  --dk-green: #15803d;
  --dk-green-bg: #ecfdf3;
  --dk-ready-line: #86efac;
}

.dk-case {
  border: 1px solid var(--dk-line);
  border-radius: var(--dk-radius);
  background: var(--dk-bg);
  overflow: hidden;
  font-family: var(--dk-font);
  transition: border-color 0.5s ease, box-shadow 0.5s ease;
}
.dk-case + .dk-case { margin-top: 10px; }
.dk-case[data-ready="true"] { border-color: var(--dk-ready-line); box-shadow: 0 0 0 3px var(--dk-green-bg); }

.dk-case__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--dk-head);
  border-bottom: 1px solid var(--dk-line);
  transition: background 0.5s ease;
}
.dk-case[data-ready="true"] .dk-case__head { background: var(--dk-green-bg); }
.dk-case__num { font-family: var(--dk-mono); font-weight: 600; font-size: 13px; color: var(--dk-ink); letter-spacing: 0.01em; }
.dk-case__time { margin-left: 10px; font-weight: 500; color: var(--dk-muted); }
.dk-case__style { font-size: 12px; color: var(--dk-muted); margin-top: 2px; }
.dk-case__count { font-size: 12px; font-weight: 500; color: var(--dk-muted); white-space: nowrap; }
.dk-ready { color: var(--dk-green); font-weight: 600; }

.dk-parties { list-style: none; margin: 0; padding: 0; }
.dk-party {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid var(--dk-line);
}
.dk-party:first-child { border-top: 0; }
.dk-party__who { display: flex; flex-direction: column; min-width: 0; }
.dk-party__name { font-size: 13px; font-weight: 600; color: var(--dk-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dk-party__role { font-size: 11.5px; color: var(--dk-muted); }

.dk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.dk-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dk-chip[data-status="absent"] { color: var(--dk-red); background: var(--dk-red-bg); }
.dk-chip[data-status="absent"] i { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.dk-chip[data-status="waiting"] { color: var(--dk-blue); background: var(--dk-blue-bg); }
.dk-chip[data-status="meeting"] { color: var(--dk-green); background: var(--dk-green-bg); }
.dk-chip[data-status="checked"] { color: var(--dk-green); background: var(--dk-green-bg); }
.dk-chip[data-status="checked"] i { border-radius: 0; width: 9px; height: 5px; background: transparent; border-left: 2px solid; border-bottom: 2px solid; transform: rotate(-45deg) translateY(-1px); }

.dk-btn {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--dk-blue);
  border: 1px solid var(--dk-line);
  border-radius: 7px;
  padding: 4px 9px;
  background: var(--dk-bg);
  min-width: 62px;
  text-align: center;
}

.dk-flash { animation: dk-flash 1.2s ease; }
@keyframes dk-flash {
  0% { background: var(--dk-blue-bg); }
  100% { background: transparent; }
}

/* Zoom participants panel */
.dk-zoom { font-family: var(--dk-font); color: #e5e7eb; background: #1f1f1f; border-radius: 12px; padding: 12px; font-size: 12px; }
.dk-zoom__title { text-align: center; font-weight: 600; font-size: 12px; color: #f3f4f6; padding-bottom: 10px; border-bottom: 1px solid #2f2f2f; margin-bottom: 8px; }
.dk-zoom__group { font-weight: 600; font-size: 11px; color: #9ca3af; margin: 8px 0 4px; }
.dk-zoom ul { list-style: none; margin: 0; padding: 0; }
.dk-zoom__person { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 4px 0; }
.dk-zoom__person.is-new { animation: dk-in 0.5s ease; }
.dk-zoom__avatar { width: 22px; height: 22px; border-radius: 6px; background: #3f6212; color: #fff; display: grid; place-items: center; font-size: 9px; font-weight: 700; }
.dk-zoom__person:nth-child(3n + 2) .dk-zoom__avatar { background: #9a3412; }
.dk-zoom__person:nth-child(3n + 3) .dk-zoom__avatar { background: #6b21a8; }
.dk-zoom__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f3f4f6; }
.dk-zoom__action:not(:empty) { background: #0b5cff; color: #fff; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 5px; }
@keyframes dk-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .dk-flash, .dk-zoom__person { animation: none; }
  .dk-case, .dk-case__head { transition: none; }
}

.dk-zoom__person .dk-zoom__avatar--host { background: #2d8cff; }