/* Reusable pieces: dark stage panel, chat window mockup, skeleton lines. */

/* ---------- Stage: dark panel with a blue glow that holds a mockup ---------- */

.stagebox {
  position: relative;
  padding: clamp(20px, calc(4 * var(--vw)), 48px);
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 88% 8%, rgba(0, 111, 255, 0.6), transparent 45%),
    radial-gradient(ellipse at 0% 100%, rgba(0, 111, 255, 0.4), transparent 40%),
    var(--stage);
  color: var(--on-dark);
  overflow: hidden;
}

.stagebox > * {
  min-width: 0;
}

/* ---------- Chat window ---------- */

.win {
  display: flex;
  flex-direction: column;
  width: min(100%, 440px);
  justify-self: start;
  border-radius: 28px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.win-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #e6eaf0;
}

.win-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.win-logo svg {
  width: 30px;
  height: 30px;
}

.win-dots {
  display: flex;
  gap: 6px;
}

.win-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #ee5d52;
}

.win-dots i:nth-child(2) {
  background: #f5bd3a;
}

.win-dots i:nth-child(3) {
  background: #5bc453;
}

.win-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
}

/* message: avatar + bubble */
.wm {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 94%;
}

.wm.bot {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.wm .av {
  width: 40px;
  height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8edf5;
}

.wm .av svg {
  width: 22px;
  height: 22px;
}

.wm .av.bot svg {
  width: 28px;
  height: 28px;
}

.wm p {
  padding: 12px 16px;
  border-radius: 18px;
  background: var(--bubble);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.4;
}

.wm.bot p {
  background: var(--blue);
  color: #fff;
}

/* system note, e.g. "lead handed over" */
.wm.sys {
  align-self: center;
  max-width: none;
  color: var(--bubble-muted);
  font-size: 12.5px;
}

/* fake input row */
.win-in {
  display: flex;
  padding: 0 20px 20px;
}

.win-in span {
  flex: 1;
  padding: 13px 18px;
  border-radius: 99px;
  background: var(--bubble);
  color: var(--bubble-muted);
  font-size: 15px;
}

/* ---------- Skeleton text lines ---------- */

.sk {
  display: grid;
  gap: 8px;
}

.sk i {
  height: 9px;
  border-radius: 9px;
  background: #e3ecf8;
}

.sk i:last-child:not(:first-child) {
  width: 62%;
}