/* The 4sell staff screen (iPad landscape), drawn from the phone's live state. Brand values as in App/UI/Brand.swift. */
@font-face { font-family: "M"; src: url(fonts/Montserrat-Medium.ttf); font-weight: 500; }
@font-face { font-family: "M"; src: url(fonts/Montserrat-SemiBold.ttf); font-weight: 600; }
@font-face { font-family: "M"; src: url(fonts/Montserrat-Bold.ttf); font-weight: 700; }
@font-face { font-family: "M"; src: url(fonts/Montserrat-ExtraBold.ttf); font-weight: 800; }
@font-face { font-family: "M"; src: url(fonts/Montserrat-Black.ttf); font-weight: 900; }

:root {
  --green: #14AA14; --emerald: #0A5F3E; --emerald2: #087149; --ink: #101710; --muted: #546554;
  --line: #CFF0CF; --red: #E03E1A; --guest: #1C4FA0;
  --btn: linear-gradient(135deg, #17C217, #14AA14 50%, #087149);
  --attempt: linear-gradient(135deg, #F2C230, #D99A00);
  --declined: linear-gradient(180deg, rgba(84,101,84,.75), #546554);
  --loyalty: linear-gradient(135deg, #3B8DE8, #1C4FA0);
  --promo: linear-gradient(135deg, #F7B500, #E07800);
}

/* A fixed 1600x900 stage, scaled to the screen. */
.live-wrap { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(#E4FFE4, #F8FFF8); }
.live { position: absolute; left: 50%; top: 50%; width: 1600px; height: 900px; transform-origin: 0 0;
  font-family: "M", system-ui, sans-serif; color: var(--ink); box-sizing: border-box; padding: 30px 40px 36px;
  display: flex; flex-direction: column; gap: 24px; }
.live * { box-sizing: border-box; }

.topbar { display: flex; align-items: center; gap: 22px; height: 56px; flex: none; }
.pill-live { display: flex; align-items: center; gap: 12px; padding: 0 22px; height: 56px; border-radius: 99px;
  background: rgba(20,170,20,.13); font-weight: 700; font-size: 24px; color: var(--emerald); }
.dot { position: relative; width: 30px; height: 30px; }
.dot::before { content: ""; position: absolute; left: 7px; top: 7px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(20,170,20,.35);
  animation: ping 1.1s ease-out infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.spacer { flex: 1; }
.rep { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px 0 6px; border-radius: 99px;
  background: #fff; box-shadow: 0 4px 8px rgba(10,95,62,.12); font-weight: 700; font-size: 18px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff; display: grid;
  place-items: center; font-weight: 800; font-size: 15px; }
.rank { color: var(--green); font-weight: 900; font-size: 19px; }
.logo { height: 46px; }

.body { flex: 1; display: flex; gap: 28px; min-height: 0; }
.left { flex: 1; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.card { background: #fff; border-radius: 32px; box-shadow: 0 14px 30px rgba(10,95,62,.10); padding: 28px; }

.transcript { flex: 1; display: flex; flex-direction: column; gap: 18px; min-height: 0; }
.thead { display: flex; align-items: center; gap: 10px; }
.thead .title { font-weight: 700; font-size: 22px; color: var(--muted); }
.badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: 99px; font-weight: 700;
  font-size: 17px; white-space: nowrap; }
.badge svg { width: 16px; height: 16px; }
.ai { color: #6A3BB8; background: rgba(138,79,216,.12); }
.ai.error { color: var(--red); background: rgba(224,62,26,.12); }
.ai.offline { color: var(--muted); background: rgba(84,101,84,.12); }
.ai .spin { width: 15px; height: 15px; border: 2.5px solid rgba(106,59,184,.25); border-top-color: #6A3BB8;
  border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.privacy { color: var(--emerald); background: rgba(20,170,20,.12); padding-right: 6px; }
.privacy .n { min-width: 28px; height: 28px; padding: 0 4px; border-radius: 99px; background: var(--emerald); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 16px; }

.words { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 40px); mask-image: linear-gradient(transparent, #000 40px); }
.flow { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 8px; }
.placeholder { font-weight: 700; font-size: 44px; color: rgba(84,101,84,.35); }
.w { font-weight: 700; font-size: 44px; line-height: 1.2; color: var(--ink); white-space: nowrap; }
.w.v { color: rgba(16,23,16,.38); }
.w.masked { color: var(--emerald); }
.br { flex-basis: 100%; height: 0; }
.speaker { color: #fff; font-weight: 800; font-size: 17px; padding: 5px 12px; border-radius: 99px; background: var(--emerald);
  animation: fade .25s; }
.speaker.guest { background: var(--guest); }
.chip { font-weight: 800; font-size: 44px; color: #fff; padding: 4px 14px; border-radius: 16px; background: var(--btn);
  box-shadow: 0 4px 10px rgba(20,170,20,.4); white-space: nowrap; animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
.chip.offered { background: none; color: var(--emerald); box-shadow: none; border: 3px solid var(--green); padding: 2px 12px; }
.tail { font-weight: 700; font-size: 44px; margin-left: -10px; }
.hl { font-weight: 800; font-size: 44px; padding: 2px 10px; border-radius: 12px; white-space: nowrap; }
.hl.offer { color: #6B4A00; background: #FFE07A; }
.hl.yes { color: var(--emerald); background: rgba(20,170,20,.2); }
.hl.no { color: var(--muted); background: rgba(84,101,84,.14); }
.hl.loyalty { color: var(--guest); background: rgba(59,141,232,.18); }
.hl.promo { color: #8A4A00; background: rgba(247,181,0,.3); }
.hl.v { opacity: .6; }
@keyframes pop { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.order { height: 170px; flex: none; display: flex; align-items: stretch; gap: 20px; padding: 24px; }
.order .items { flex: 1; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.order .label { font-weight: 700; font-size: 20px; color: var(--muted); }
.order .row { display: flex; gap: 18px; overflow: hidden; align-items: center; flex: 1; }
.order .empty { font-weight: 600; font-size: 22px; color: rgba(84,101,84,.45); }
.line { display: flex; align-items: center; gap: 14px; flex: none; animation: pop .35s cubic-bezier(.3,1.6,.5,1); }
.line img { width: 76px; height: 76px; border-radius: 18px; object-fit: cover; }
.line .n { font-weight: 700; font-size: 22px; white-space: nowrap; }
.line .p { font-weight: 500; font-size: 20px; color: var(--muted); }
.order .sep { width: 2px; background: var(--line); margin: 8px 0; }
.order .total { width: 190px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }
.order .total b { font-weight: 900; font-size: 40px; }

.right { width: 470px; flex: none; display: flex; flex-direction: column; gap: 12px; min-height: 0; overflow: hidden; }
.empty-events { flex: 1; border: 3px dashed rgba(20,170,20,.22); border-radius: 28px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 20px; }
.empty-events .t { font-weight: 700; font-size: 24px; color: rgba(84,101,84,.7); }
.empty-events .q { font-weight: 500; font-size: 18px; color: rgba(84,101,84,.55); white-space: pre-line; }
.empty-events svg { width: 54px; height: 54px; color: rgba(20,170,20,.6); }
.event { display: flex; gap: 16px; align-items: flex-start; background: #fff; border-radius: 24px; padding: 16px;
  box-shadow: 0 8px 16px rgba(10,95,62,.10); animation: pop .4s cubic-bezier(.3,1.5,.5,1); }
.event .pic { width: 84px; height: 84px; border-radius: 18px; object-fit: cover; flex: none; display: grid; place-items: center; color: #fff; }
.event .pic svg { width: 40px; height: 40px; }
.event .pic.upsell { background: var(--attempt); } .event .pic.loyalty { background: var(--loyalty); } .event .pic.promo { background: var(--promo); }
.event .info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.epill { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 800; font-size: 17px;
  padding: 6px 12px; border-radius: 99px; }
.epill svg { width: 17px; height: 17px; }
.epill.accepted { background: var(--btn); } .epill.declined { background: var(--declined); }
.epill.pending.upsell { background: var(--attempt); } .epill.pending.loyalty { background: var(--loyalty); } .epill.pending.promo { background: var(--promo); }
.event .name { font-weight: 800; font-size: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event .phrase { font-weight: 500; font-size: 16px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.event .out { font-weight: 700; font-size: 17px; color: #6B5D00; }
.event .out.accepted { color: var(--green); font-weight: 800; }
.event .out.declined { color: var(--muted); }

.toast { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.5); opacity: 0; pointer-events: none;
  text-align: center; padding: 26px 44px; border-radius: 36px; transition: transform .4s cubic-bezier(.3,1.6,.5,1), opacity .3s; }
.toast.show { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.toast.made { background: var(--btn); color: #fff; box-shadow: 0 16px 30px rgba(10,95,62,.45); }
.toast.offer { background: var(--attempt); color: #3D2A00; box-shadow: 0 16px 30px rgba(217,154,0,.45); }
.toast .t1 { font-weight: 900; font-size: 48px; } .toast.made .t1 { font-size: 62px; }
.toast .t2 { font-weight: 700; font-size: 28px; opacity: .92; margin-top: 8px; }

/* Operator status in a corner: phone connected or not. Small, for the person at the laptop. */
.conn { position: absolute; right: 14px; bottom: 10px; font: 600 12px system-ui; color: rgba(84,101,84,.55); }
.conn.off { color: #E03E1A; }