/* Wireframe → polished aesthetic — Space Grotesk + JetBrains Mono */

:root {
  --paper: #f8f5fc;        /* lavender-tinted off-white */
  --paper-line: #ebe5f2;
  --ink: #1a1714;
  --ink-soft: #5c5650;
  --ink-faded: #9b9489;
  --accent: #7735f1;       /* Yekola purple */
  --accent-soft: #f1ebff;  /* very light lavender for active bg */
  --accent-deep: #5a22c4;  /* darker variant for hover/emphasis */
  --highlight: #f0c000;    /* Lingala yellow — used VERY sparingly */
  --bot: #ece4f7;          /* lavender for bot bubbles */
  --user: #ffffff;
  --pipe-idle: #d8d2c4;
  --pipe-active: #2d7dd2;
  --pipe-done: #4a4540;
  --pipe-err: #c0392b;
  --hand-display: 'Space Grotesk', system-ui, sans-serif;
  --hand-body: 'Space Grotesk', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* base */
.sketch {
  font-family: var(--hand-body);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.4;
  font-size: 14px;
  letter-spacing: -0.005em;
}
.sketch * { box-sizing: border-box; }
.sketch h1, .sketch h2, .sketch h3, .sketch .display {
  font-family: var(--hand-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}

/* boxes */
.sk-box {
  position: relative;
  background: #ffffff;
}
.sk-box::before {
  content: '';
  position: absolute; inset: 0;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  pointer-events: none;
}
.sk-box.dashed::before { border-style: dashed; border-color: var(--ink-soft); }
.sk-box.thin::before { border-width: 1px; border-color: var(--ink-soft); }
.sk-box.accent::before { border-color: var(--accent); border-width: 2px; }
.sk-box.filled { background: #ece4f7; }
.sk-box.user { background: #ffffff; }
.sk-box.bot { background: #ece4f7; }

/* underline accent */
.sk-underline {
  background-image: linear-gradient(transparent 90%, var(--ink) 90%, var(--ink) 96%, transparent 96%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* highlight marker style */
.sk-mark {
  background: linear-gradient(transparent 55%, var(--highlight) 55%, var(--highlight) 92%, transparent 92%);
  padding: 0 2px;
}

/* dotted divider */
.sk-divider {
  border: none;
  border-top: 1.5px dotted var(--ink-faded);
  margin: 0;
}

/* button */
.sk-btn {
  font-family: var(--hand-body);
  font-size: 13px;
  font-weight: 500;
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 5px 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  letter-spacing: -0.01em;
}
.sk-btn.accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.sk-btn.ghost { background: transparent; }
.sk-btn.sm { font-size: 12px; padding: 3px 10px; }

/* push-to-talk */
.sk-mic {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  flex-shrink: 0;
}
.sk-mic.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.sk-mic.active::after {
  content: '';
  position: absolute; inset: -8px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  animation: skRipple 1.8s ease-out infinite;
  opacity: 0;
  pointer-events: none;
}
.sk-mic.active::before {
  content: '';
  position: absolute; inset: -8px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  animation: skRipple 1.8s ease-out infinite;
  animation-delay: 0.6s;
  opacity: 0;
  pointer-events: none;
}
@keyframes skRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes skRipple {
  0%   { transform: scale(0.95); opacity: 0.55; }
  100% { transform: scale(1.55); opacity: 0; }
}
@keyframes skBreathe {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
  50%      { box-shadow: 0 0 0 9px var(--accent-soft); }
}

/* V5 station ripple — concentric expanding rings */
.v5-ripple {
  position: absolute;
  inset: -2px;
  border: 1.5px solid var(--accent);
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
  animation: skRipple 1.8s ease-out infinite;
}

/* dots loader */
.sk-dots { display: inline-flex; gap: 4px; align-items: center; }
.sk-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  animation: skDot 1.1s ease-in-out infinite;
}
.sk-dots span:nth-child(2) { animation-delay: .18s; }
.sk-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes skDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: .4; }
  40% { transform: scale(1); opacity: 1; }
}

/* waveform */
.sk-wave { display: inline-flex; align-items: center; gap: 2px; height: 28px; color: var(--ink); }
.sk-wave i {
  width: 3px; background: currentColor; border-radius: 2px;
  animation: skWave 1s ease-in-out infinite;
}
.sk-wave i:nth-child(1) { height: 30%; animation-delay: -.9s; }
.sk-wave i:nth-child(2) { height: 55%; animation-delay: -.8s; }
.sk-wave i:nth-child(3) { height: 80%; animation-delay: -.7s; }
.sk-wave i:nth-child(4) { height: 95%; animation-delay: -.6s; }
.sk-wave i:nth-child(5) { height: 70%; animation-delay: -.5s; }
.sk-wave i:nth-child(6) { height: 45%; animation-delay: -.4s; }
.sk-wave i:nth-child(7) { height: 65%; animation-delay: -.3s; }
.sk-wave i:nth-child(8) { height: 90%; animation-delay: -.2s; }
.sk-wave i:nth-child(9) { height: 50%; animation-delay: -.1s; }
.sk-wave i:nth-child(10){ height: 25%; animation-delay: 0s; }
@keyframes skWave {
  0%, 100% { transform: scaleY(.4); }
  50% { transform: scaleY(1); }
}

/* segmented toggle (LN / EN) */
.sk-seg {
  display: inline-flex;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 2px;
  font-size: 12px;
  background: #fff;
}
.sk-seg button {
  font-family: var(--hand-body);
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 3px 12px;
  cursor: pointer;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.sk-seg button.on {
  background: var(--ink);
  color: var(--paper);
}

/* pipeline step pill */
.sk-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1.5px solid var(--pipe-idle);
  border-radius: 999px;
  color: var(--ink-faded);
  background: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  letter-spacing: -0.01em;
}
.sk-step.done { color: var(--pipe-done); border-color: var(--pipe-done); }
.sk-step.done .sk-step-dot { background: var(--pipe-done); }
.sk-step.active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
  font-weight: 600;
}
.sk-step.active .sk-step-dot { background: var(--accent); }
.sk-step-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pipe-idle);
}

.sk-arrow {
  color: var(--ink-faded);
  font-family: var(--hand-display);
  font-size: 14px;
  display: inline-block;
}

/* mono log */
.sk-log {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
}
.sk-log .time { color: var(--ink-faded); }
.sk-log .tag { color: var(--accent); font-weight: 600; }

/* annotation */
.sk-anno {
  font-family: var(--hand-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.sk-anno-line {
  position: absolute;
  stroke: var(--accent);
  stroke-width: 1.5;
  fill: none;
}

/* paper texture */
.paper-bg {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(0,0,0,0.02), transparent 40%),
    radial-gradient(ellipse at 80% 90%, rgba(0,0,0,0.025), transparent 50%),
    var(--paper);
}

/* scribble bar / placeholder line */
.sk-scribble {
  height: 8px;
  background: repeating-linear-gradient(
    -3deg,
    var(--ink-faded) 0 6px,
    transparent 6px 10px
  );
  opacity: 0.35;
  border-radius: 3px;
}
.sk-scribble.short { width: 40%; }
.sk-scribble.mid   { width: 70%; }
.sk-scribble.long  { width: 95%; }

/* tabs */
.sk-tabs { display: inline-flex; gap: 0; border-bottom: 1.5px solid var(--ink); }
.sk-tabs button {
  font-family: var(--hand-body);
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 1.5px solid var(--ink);
  border-bottom: none;
  padding: 4px 12px;
  margin: 0 2px -1.5px 0;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  color: var(--ink-soft);
  letter-spacing: -0.01em;
}
.sk-tabs button.on { background: var(--paper); color: var(--ink); font-weight: 600; }