/* Operator — Figma 10007:21865 */
.operator { padding: clamp(56px, calc(100 / 1728 * 100vw), 100px) 0; }
.operator-head { max-width: 756px; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; align-items: center; text-align: center; }
.operator-titles { display: flex; flex-direction: column; gap: 8px; width: 553px; max-width: 100%; }
.operator-title { font-size: clamp(40px, calc(78.83 / 1728 * 100vw), 78.83px); color: var(--text-primary); }
.operator-kicker { font-size: clamp(22px, calc(38.02 / 1728 * 100vw), 38.02px); color: #2e4ba0; } /* matches the Manager pill */
.operator-sub { width: 100%; font-size: clamp(16px, calc(22 / 1728 * 100vw), 22px); line-height: normal; color: var(--text-primary); }

/* Chat canvas: 1440x496 composition in a scale box (js/scale.js) */
.operator-canvas { --w: 1440; --h: 496; margin: clamp(32px, calc(60 / 1728 * 100vw), 60px) auto 0; background: #e5e9f3; border-radius: 18.836px; }
.operator-glow { position: absolute; left: 231.68px; top: -54.62px; width: 728.947px; height: 725.18px; }
.operator-glow img { position: absolute; left: -64.6%; top: -64.94%; width: 229.2%; height: 229.88%; }

/* Reply rows: avatar + light bubble */
.operator-row { position: absolute; display: flex; align-items: flex-end; }
.operator-card {
  position: relative; flex-shrink: 0;
  background: rgba(255,255,255,0.3);
  border-radius: var(--r) var(--r) var(--r) 0;
}
.operator-card-body { display: flex; flex-direction: column; align-items: flex-start; }
.operator-card-tag { display: flex; align-items: center; color: var(--text-success); white-space: nowrap; }
.operator-card-lines { display: flex; flex-direction: column; align-items: flex-start; width: 100%; color: var(--text-secondary); }
.operator-card-lines strong { font-weight: 600; color: var(--text-primary); }
.operator-card-lines span { white-space: nowrap; }
.operator-ts { position: absolute; color: var(--text-unavailable); white-space: nowrap; line-height: normal; }

/* Prompt bubbles (dark, tail bottom-right) */
.operator-ask {
  position: absolute;
  background: rgba(42,42,42,0.8);
  border-radius: var(--r) var(--r) 0 var(--r);
}
.operator-ask p { position: absolute; color: var(--text-selected); white-space: nowrap; }

/* Price (small, left) */
.operator-row.op-price { left: 38.61px; top: 154.85px; gap: 3.049px; }
.op-price .operator-card { --r: 10.746px; width: 331.906px; height: 100.085px; padding: 11.04px 0 0 11.06px; }
.op-price .operator-card-body { width: 192.986px; gap: 6.975px; }
.op-price .operator-card-tag { gap: 3.488px; }
.op-price .operator-card-tag, .op-price .operator-card-lines { font-size: 14.328px; line-height: 19.7px; }
.op-price .operator-card-lines { gap: 4.65px; }
.op-price .operator-ts { font-size: 10.75px; letter-spacing: .215px; right: 4.62px; bottom: 5.5px; }
.operator-ask.op-price-ask { --r: 10.746px; left: 113.6px; top: 103.69px; width: 316.8px; height: 44.178px; }
.op-price-ask p { right: 31.69px; top: 6.98px; font-size: 14.328px; line-height: 19.7px; }
.op-price-ask .operator-ts { left: 284.83px; bottom: 6.18px; font-size: 10.75px; letter-spacing: .215px; }

/* Roster (small, right) */
.operator-row.op-roster { left: 1068.93px; top: 174.22px; gap: 2.913px; }
.op-roster .operator-card { --r: 10.265px; width: 276.194px; height: 95.606px; padding: 10.55px 0 0 10.57px; }
.op-roster .operator-card-body { width: 184.349px; gap: 6.663px; }
.op-roster .operator-card-tag { gap: 3.332px; }
.op-roster .operator-card-tag, .op-roster .operator-card-lines { font-size: 13.686px; line-height: 18.819px; }
.op-roster .operator-card-lines { gap: 4.442px; }
.op-roster .operator-ts { font-size: 10.26px; letter-spacing: .2052px; right: 4.38px; bottom: 5.67px; }
.operator-ask.op-roster-ask { --r: 10.265px; left: 1140.84px; top: 125.35px; width: 261.486px; height: 42.491px; }
.op-roster-ask p { right: 30.92px; top: 6.66px; font-size: 13.686px; line-height: 18.819px; }
.op-roster-ask .operator-ts { left: 229.31px; bottom: 4.98px; font-size: 10.26px; letter-spacing: .2052px; }

/* Report (large, centre) */
.operator-row.op-report { left: 394.61px; top: 220.5px; gap: 5.279px; }
.op-report .operator-card { --r: 18.603px; width: 530.158px; height: 173.264px; padding: 19.12px 0 0 19.7px; }
.op-report .operator-card-body { width: 334.092px; gap: 12.076px; }
.op-report .operator-card-tag { gap: 6.038px; }
.op-report .operator-card-tag, .op-report .operator-card-lines { font-size: 24.803px; line-height: 34.105px; }
.op-report .operator-card-lines { gap: 8.05px; }
.op-report .operator-ts { font-size: 18.6px; letter-spacing: .372px; right: 9.8px; bottom: 9.02px; }
.operator-ask.op-report-ask { --r: 18.603px; left: 664.13px; top: 131.95px; width: 352.451px; height: 77.006px; }
.op-report-ask p { right: 61.21px; top: 11.85px; font-size: 24.803px; line-height: 34.105px; }
.op-report-ask .operator-ts { left: 298.59px; bottom: 7.77px; font-size: 18.6px; letter-spacing: .372px; }

/* Body text in Inter (Shane: Inter everywhere, no Helvetica) */
.operator-sub { font-family: var(--font-body); }

/* ---- Tablet + mobile: re-composed as fluid chat (scaled text would be < 11px) ----
   Pairs in chronological order: 3 columns on tablet, stacked on mobile. */
@media (max-width: 1199px) {
  .operator-canvas { aspect-ratio: auto; max-width: none; }
  .operator-canvas .scale-box-inner {
    position: relative; width: auto; height: auto; transform: none;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start;
    padding: 40px 24px;
  }
  .operator-glow { left: 50%; top: 50%; width: 729px; height: 725px; transform: translate(-50%, -50%); }
  .operator-pair { position: relative; display: flex; flex-direction: column; gap: 10px; }

  .operator-canvas .operator-ask {
    --r: 12px; position: relative; left: auto; top: auto; width: auto; height: auto;
    align-self: flex-end; max-width: 90%; padding: 8px 44px 8px 12px;
  }
  .operator-canvas .operator-ask p { position: static; white-space: normal; font-size: 15px; line-height: 20px; }
  .operator-canvas .operator-ts { font-size: 11px; letter-spacing: .22px; left: auto; right: 8px; bottom: 6px; }

  .operator-canvas .operator-row { position: relative; left: auto; top: auto; gap: 4px; align-self: flex-start; max-width: 100%; }
  .operator-row > img { width: 32px; height: 32px; flex-shrink: 0; }
  .operator-canvas .operator-card { --r: 12px; flex-shrink: 1; min-width: 0; width: auto; height: auto; padding: 11px 44px 12px 12px; }
  .operator-canvas .operator-card-body { width: auto; gap: 6px; }
  .operator-canvas .operator-card-tag { gap: 4px; }
  .operator-card-tag img { width: 16px; height: 16px; }
  .operator-canvas .operator-card-tag, .operator-canvas .operator-card-lines { font-size: 15px; line-height: 20px; }
  .operator-canvas .operator-card-lines { gap: 4px; }
  .operator-card-lines span { white-space: normal; }
}
@media (max-width: 899px) {
  .operator-canvas .scale-box-inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 28px 16px; }
  .operator-canvas .operator-ask { max-width: 85%; }
  .operator-canvas .operator-row { max-width: 92%; }
}
@media (max-width: 599px) {
  .operator-sub br { display: none; }
  .operator-canvas .scale-box-inner { padding: 24px 12px; }
  .operator-canvas .operator-card { padding: 11px 12px 24px; }
  .operator-canvas .operator-row { max-width: 100%; }
}