/* ═══════════════════════════ THE MAHI AI MARK (Oct 9) ═══════════════════════════
   Four overlapping process dots - cyan, magenta, yellow, ink - then "Mahi AI". It is
   the website's own mark (website/src/css/site.css .dots, .kicker, the Mahi AI demo's
   .who and .typing), and it replaces the bold "MAHI AI" wordmark image: one mark on the
   chat box, over each message the assistant sends, on the order screens' bars and as
   the app opens (js/brand-mark.js builds it).

   The four inks are the website's tokens spelled out. They are NOT the tenant's
   palette (css/app.css), which dresses the studio's buttons and rules: this is the
   printer's mark, the same on every screen, in the studio's look and the website's. */

:root {
  --mk-c: #00AEEF;
  --mk-m: #EC008C;
  --mk-y: #FFE600;
  --mk-k: #14162B;       /* the ink: the K plate, and the customer's own chat bubbles */
  --mk-soft: #4C5068;    /* the website's --ink-soft: small names under type */
  --mk-bubble: #F1F1F4;  /* the website demo's assistant bubble */
}

/* ---- the four dots: the website's .dots, sized from one number (--dot = 12px there) ----
   Each dot is half a dot-width from the last, so they overlap; multiply makes the
   overlaps print the colour the two inks would make. */
.dots {
  --dot: 12px;
  position: relative; display: inline-block; flex: none;
  width: calc(var(--dot) * 2.5); height: calc(var(--dot) * 1.5);
}
.dots i {
  position: absolute; top: calc(var(--dot) * .25);
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.dots i:nth-child(1) { left: 0; background: var(--mk-c); }
.dots i:nth-child(2) { left: calc(var(--dot) * .5); background: var(--mk-m); }
.dots i:nth-child(3) { left: var(--dot); background: var(--mk-y); }
.dots i:nth-child(4) { left: calc(var(--dot) * 1.5); background: var(--mk-k); }

/* ---- the mark: dots + the name ---- */
.mahimark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1;
  color: var(--mk-k);
  white-space: nowrap;
}
.mahimark__name { display: block; }

/* the header over a chat message: the website demo's small .who */
.mahimark--sm { gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--mk-soft); }
.mahimark--sm .dots { --dot: 7.5px; }

/* the opening moment: the mark at size, the dots scaled with the type */
.mahimark--xl {
  gap: .3em;
  font-size: clamp(46px, 10vw, 120px); letter-spacing: -0.03em;
}
.mahimark--xl .dots { --dot: .62em; }

/* ---- the website's kicker: the dots, then a few words in front of a title ---- */
.kicker {
  display: inline-flex; align-items: center; gap: 12px;
  font-weight: 600; font-size: 15px; letter-spacing: .2px;
}

/* ═════════════════════ IN THE CHAT (the website demo's look) ═════════════════════ */

/* "Mahi AI" over each message the assistant sends. It is the mark itself, small. */
.msg__who { align-self: flex-start; margin: 0 0 5px 2px; }
/* a message that is only a question, and the question is pinned above the box:
   nothing is left to speak, so nothing is introduced (js/chat.js renderGuide) */
.msg--nobody.is-current > .msg__who { display: none; }
/* a logo card's own children wear the thread's left rule; the header does not */
.msg--logo > .msg__who { padding-left: 0; border-left: 0; }

/* "Thinking": the website's typing dots - the four inks, bobbing in turn - kept
   with the stage label, the elapsed seconds and the progress bar */
.thinking__dots { display: inline-flex; align-items: center; gap: 5px; flex: none; }
.thinking__dots i {
  width: 7px; height: 7px; border-radius: 50%;
  animation: mkBob 1s infinite ease-in-out;
}
.thinking__dots i:nth-child(1) { background: var(--mk-c); }
.thinking__dots i:nth-child(2) { background: var(--mk-m); animation-delay: .15s; }
.thinking__dots i:nth-child(3) { background: var(--mk-y); animation-delay: .3s; }
.thinking__dots i:nth-child(4) { background: var(--mk-k); animation-delay: .45s; }
@keyframes mkBob {
  0%, 80%, 100% { transform: translateY(0); }
  40%           { transform: translateY(-4px); }
}