/* GENERATED by the opener mock's build-theme.py (trailer/docs/concept-2026-10-21/mock): do not edit here. (opener/scene-operator.css, @imports inlined) */
/* Operator, a call. Left: the caller's phone (the shared 360x800 dp frame; a plain dark dialer / in-call
   screen in the Roboto stack, not a product of Justin's). Right: the ledger's ticket thread drawer at its
   real narrow-window size: .ledger-detail-panel is 600 px wide, max-width 92vw, so at a 400 px window it
   is 368 px, which is exactly what is left of the 704 px stage beside the 320 px phone. Every drawer and
   ticket value is verbatim from assets/css/ledger.css (drawer 1063-1240, tickets 4043-4200, 5157-5182). */
.op-ph-stage { display: flex; gap: 16px; align-items: flex-start; width: 704px; margin: 0 auto; }
.op-ph-stage .op-phone { margin: 0; flex: 0 0 320px; }

/* ---- the phone ---- */
.op-ph { background: #121316; color: #e3e3e6; overflow: hidden; text-align: left; line-height: 1.25;
  font-family: Roboto, "Google Sans", "Noto Sans", system-ui, sans-serif; font-size: 15px; }
.op-ph svg { display: block; fill: currentColor; }
.op-ph .op-phone-status { color: #e3e3e6; }
/* the dialer */
.op-ph-dialer { position: absolute; left: 0; top: 28px; right: 0; bottom: 0; }
.op-ph-dial-num { position: absolute; left: 0; right: 0; top: 190px; text-align: center; font-size: 30px; font-weight: 400; letter-spacing: .5px; color: #e3e3e6; }
.op-ph-keys { position: absolute; left: 36px; right: 36px; top: 280px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; }
.op-ph-keys span { height: 72px; border-radius: 36px; background: #1f2024; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.op-ph-keys b { font-size: 26px; font-weight: 400; line-height: 28px; color: #e3e3e6; }
.op-ph-keys small { font-size: 10px; letter-spacing: 1.4px; color: #9a9ca3; line-height: 12px; }
.op-ph-callbtn { position: absolute; left: 50%; top: 634px; width: 72px; height: 72px; margin-left: -36px; border-radius: 36px; background: #1ea446; color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .12s; }
.op-ph-callbtn svg { width: 30px; height: 30px; }
.op-ph-callbtn.op-active { transform: scale(.92); background: #198a3b; }
/* in the call */
.op-ph-incall { position: absolute; left: 0; top: 28px; right: 0; bottom: 0; background: #121316; opacity: 0; transition: opacity .3s; }
.op-ph-incall.op-ph-on { opacity: 1; }
.op-ph-name { position: absolute; left: 0; right: 0; top: 56px; text-align: center; font-size: 26px; font-weight: 400; color: #e3e3e6; }
.op-ph-num { position: absolute; left: 0; right: 0; top: 94px; text-align: center; font-size: 14px; color: #9a9ca3; }
.op-ph-timer { position: absolute; left: 0; right: 0; top: 118px; text-align: center; font-size: 14px; color: #9a9ca3; font-variant-numeric: tabular-nums; }
/* the live transcript, in the shape the post-call handler writes it (post_call.py: "role: message", the
   tool calls attached to the agent's turns) */
.op-ph-tx { position: absolute; left: 16px; right: 16px; top: 160px; height: 392px; border-radius: 16px; background: #1f2024; padding: 12px 14px 10px; box-sizing: border-box; overflow: hidden; }
.op-ph-tx-l { font-size: 11px; font-weight: 500; letter-spacing: .8px; text-transform: uppercase; color: #9a9ca3; margin-bottom: 8px; }
.op-ph-lines { height: 348px; overflow: hidden; font-size: 13.5px; line-height: 1.38; color: #e3e3e6; }
.op-ph-line { margin: 0 0 7px; word-break: break-word; }
.op-ph-line i { font-style: normal; color: #9a9ca3; }
.op-ph-line.is-user { color: #cfe9d6; }
.op-ph-line.op-ph-live::after { content: ''; display: inline-block; width: 2px; height: 13px; margin-left: 2px; vertical-align: -2px; background: #0d9488; animation: op-ph-blink 1s steps(2) infinite; }
@keyframes op-ph-blink { to { opacity: 0; } }
.op-ph-chip { display: inline-flex; align-items: center; gap: 5px; margin: 1px 0 8px; padding: 3px 9px 3px 7px; border-radius: 999px; border: 1px solid rgba(13,148,136,.65); background: rgba(13,148,136,.16); color: #5eead4;
  font: 500 11.5px/1.2 "Roboto Mono", "Noto Sans Mono", "DejaVu Sans Mono", monospace; letter-spacing: .1px; animation: op-ph-chip .45s ease both; }
.op-ph-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2dd4bf; box-shadow: 0 0 6px #2dd4bf; }
@keyframes op-ph-chip { from { opacity: 0; transform: translateY(4px); box-shadow: 0 0 0 0 rgba(45,212,191,.6); } 60% { box-shadow: 0 0 0 6px rgba(45,212,191,0); } to { opacity: 1; transform: none; } }
.op-ph-grid { position: absolute; left: 24px; right: 24px; top: 572px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 8px; }
.op-ph-grid > span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: #c5c6cc; }
.op-ph-grid i { width: 48px; height: 48px; border-radius: 24px; background: #1f2024; display: flex; align-items: center; justify-content: center; color: #e3e3e6; }
.op-ph-grid svg { width: 22px; height: 22px; }
.op-ph-endbtn { position: absolute; left: 50%; top: 672px; width: 72px; height: 56px; margin-left: -36px; border-radius: 28px; background: #e24a3b; color: #fff; display: flex; align-items: center; justify-content: center; }
.op-ph-endbtn svg { width: 30px; height: 30px; }
html.motion-paused .op-ph-line.op-ph-live::after, html.motion-paused .op-ph-chip { animation: none; }
@media (prefers-reduced-motion: reduce) { .op-ph-line.op-ph-live::after, .op-ph-chip { animation: none; } .op-ph-incall { transition: none; } }

/* ---- the drawer window: the Tickets tab under the backdrop, the panel sliding in from the right ---- */
.op-ph-frame { position: relative; flex: 0 0 368px; width: 368px; height: 687px; overflow: hidden; border-radius: 6px; background: #f5f5f7;
  font-family: Calibri, "Segoe UI", sans-serif; font-size: 14px; color: #333; text-align: left; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); }
.op-ph-frame * { box-sizing: border-box; }
.op-ph-frame h1, .op-ph-frame h2, .op-ph-frame h3, .op-ph-frame p { margin: 0; font-family: inherit; letter-spacing: 0; text-transform: none; }
/* the Tickets tab (teal, ledger.css 53-132 header + 4043-4068 rows), clipped at this width like a narrow window */
.op-ph-tickets { position: absolute; inset: 0; --ledger-tab-color: #0d9488; }
.op-ph-tk-head { display: flex; align-items: center; gap: 10px; background: #0d9488; color: #fff; padding: 10px 18px; }
.op-ph-tk-head h1 { font-size: 18px; font-weight: 700; letter-spacing: 0.2px; color: #fff; margin-right: 6px; }
.op-ph-tk-stat { background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.2); border-radius: 5px; padding: 4px 12px; display: flex; align-items: center; gap: 8px; line-height: 1; white-space: nowrap; }
.op-ph-tk-stat span { font-size: 10px; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.op-ph-tk-stat b { font-size: 15px; color: #fff; font-variant-numeric: tabular-nums; }
.op-ph-tk-table { width: 560px; border-collapse: collapse; font-size: 13px; background: #fff; }
.op-ph-tk-table thead th { background: #0d9488; color: #fff; font-weight: 700; text-align: left; padding: 8px 6px; border-right: 1px solid rgba(255,255,255,0.2); white-space: nowrap; }
.op-ph-tk-table tbody td { padding: 8px 6px; border-bottom: 1px solid #eaeaea; white-space: nowrap; }
.op-ph-tk-table tbody tr:nth-child(even) { background: #f9f9fb; }
.op-ph-frame .ledger-ticket-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 600; }
.op-ph-frame .ledger-ticket-row-hangup td { color: #94a3b8; }
.op-ph-frame .ledger-ticket-row-hangup .ledger-ticket-num { color: #94a3b8; font-weight: 500; }
/* the overlay + panel: ledger.css 1063-1136 */
.op-ph-frame .ledger-detail-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); z-index: 10; opacity: 0; transition: opacity 0.2s ease; display: flex; justify-content: flex-end; }
.op-ph-frame .ledger-detail-overlay.ledger-detail-open { opacity: 1; }
.op-ph-frame .ledger-detail-panel { width: 600px; max-width: 92%; height: 100%; background: #fafbfc; box-shadow: -4px 0 24px rgba(0,0,0,0.3); transform: translateX(100%); transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); display: flex; flex-direction: column; overflow: hidden; }
.op-ph-frame .ledger-detail-overlay.ledger-detail-open .ledger-detail-panel { transform: translateX(0); }
.op-ph-frame .ledger-detail-panel-header { padding: 14px 24px; border-bottom: 1px solid #e3e6eb; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, #ffffff 0%, #f4f6f9 100%); flex-shrink: 0; }
.op-ph-frame .ledger-detail-panel-header h2 { font-size: 16px; font-weight: 700; color: #1a2240; letter-spacing: 0.2px; }
.op-ph-frame .ledger-detail-close { font-size: 30px; line-height: 1; color: #666; padding: 0 12px; border-radius: 4px; font-weight: 300; }
.op-ph-frame .ledger-detail-body { flex: 1; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 16px; background: #f2f4f7; scroll-behavior: smooth; }
.op-ph-frame .ledger-detail-loading, .op-ph-frame .ledger-detail-empty { padding: 24px; text-align: center; color: #666; font-size: 14px; }
.op-ph-frame .ledger-detail-section { background: #fff; border: 1px solid #e3e6eb; border-radius: 6px; padding: 14px 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); flex-shrink: 0; animation: op-ph-sec .35s ease both; }
@keyframes op-ph-sec { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
html.motion-paused .op-ph-frame .ledger-detail-section { animation: none; }
@media (prefers-reduced-motion: reduce) { .op-ph-frame .ledger-detail-section { animation: none; } .op-ph-frame .ledger-detail-overlay, .op-ph-frame .ledger-detail-panel { transition: none; } .op-ph-frame .ledger-detail-body { scroll-behavior: auto; } }
.op-ph-frame .ledger-detail-section h3 { margin: 0 0 10px; font-size: 11px; font-weight: 700; color: #6a7280; text-transform: uppercase; letter-spacing: 0.6px; padding-bottom: 8px; border-bottom: 1px solid #eef0f4; }
.op-ph-frame .ledger-detail-order-title { font-size: 16px; font-weight: 700; color: #1a2240; margin-bottom: 6px; }
.op-ph-frame .ledger-detail-order-ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
/* tickets: 4048-4064, 4071-4106 */
.op-ph-frame .ledger-ticket-status-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #fff; background: #6b7280; vertical-align: 2px; }
.op-ph-frame .ledger-ticket-status-pill.is-open { background: #0d9488; }
.op-ph-frame .ledger-ticket-status-pill.is-awaiting_staff { background: #d97706; }
.op-ph-frame .ledger-ticket-status-pill.is-awaiting_customer { background: #2563eb; }
.op-ph-frame .ledger-ticket-status-pill.is-resolved { background: #16a34a; }
.op-ph-frame .ledger-ticket-status-pill.is-closed { background: #6b7280; }
.op-ph-frame .ledger-ticket-status-pill.is-hangup { background: #cbd5e1; color: #475569; }
.op-ph-frame .ledger-ticket-subject { font-size: 14px; font-weight: 600; color: #1a2240; margin: 4px 0 8px; }
.op-ph-frame .ledger-ticket-meta { font-size: 12px; color: #6a7280; line-height: 1.5; }
.op-ph-frame .ledger-ticket-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.op-ph-frame .ledger-ticket-status-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.op-ph-frame .ledger-ticket-status-btn { padding: 5px 12px; border: 1px solid #0d9488; background: #fff; color: #0d9488; border-radius: 6px; font-size: 12px; font-weight: 600; display: inline-block; }
.op-ph-frame .ledger-ticket-assign { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #6a7280; }
.op-ph-frame .ledger-ticket-assign-select { padding: 5px 22px 5px 8px; border: 1px solid #cbd5e1; border-radius: 6px; font-size: 12px; background: #fff; color: #1a2240; position: relative; display: inline-block; }
.op-ph-frame .ledger-ticket-assign-select::after { content: ''; position: absolute; right: 8px; top: 50%; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #555; transform: translateY(-50%); }
/* the Order section (5164-5182); its two buttons carry only .ledger-btn, which has no rule, so they are the browser's own */
.op-ph-frame .ledger-ticket-order-none { color: #888; font-size: 13px; margin-bottom: 8px; }
.op-ph-frame .ledger-ticket-order-actions { margin-bottom: 8px; }
.op-ph-frame .ledger-ticket-order-search { display: flex; gap: 6px; }
.op-ph-frame .ledger-btn { display: inline-block; padding: 2px 7px; border: 1px solid #767676; border-radius: 2px; background: #efefef; color: #000; font-size: 13.33px; font-family: Arial, sans-serif; line-height: normal; white-space: nowrap; }
.op-ph-frame .ledger-cx-input { border: 1px solid #ccc; background: #fff; color: #1f2937; }
.op-ph-frame .ledger-ticket-order-term { flex: 1 1 auto; min-width: 0; padding: 2px 4px; font-size: 13.33px; font-family: Arial, sans-serif; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.op-ph-frame .op-ph-placeholder { color: #757575; }
/* the thread (4108-4159) */
.op-ph-frame .ledger-ticket-thread { display: flex; flex-direction: column; gap: 10px; }
.op-ph-frame .ledger-ticket-msg { border: 1px solid #e3e6eb; border-radius: 8px; padding: 9px 12px; background: #fff; max-width: 88%; }
.op-ph-frame .ledger-ticket-msg.is-system { align-self: center; max-width: 100%; background: transparent; border: none; text-align: center; color: #94a3b8; font-size: 12px; }
.op-ph-frame .ledger-ticket-msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 11px; }
.op-ph-frame .ledger-ticket-msg-author { font-weight: 700; color: #1a2240; white-space: nowrap; }
.op-ph-frame .ledger-ticket-msg.is-system .ledger-ticket-msg-author { color: #94a3b8; font-weight: 600; }
.op-ph-frame .ledger-ticket-msg-time { color: #94a3b8; margin-left: auto; white-space: nowrap; }
.op-ph-frame .ledger-ticket-msg-tag { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.op-ph-frame .ledger-ticket-msg-tag-system { background: #e2e8f0; color: #64748b; }
.op-ph-frame .ledger-ticket-msg-body { font-size: 13px; line-height: 1.45; color: #222; word-break: break-word; }
.op-ph-frame .ledger-ticket-msg.is-system .ledger-ticket-msg-body { color: #94a3b8; }
/* the composer (4171-4197) */
.op-ph-frame .ledger-ticket-composer { display: flex; flex-direction: column; gap: 8px; }
.op-ph-frame .ledger-ticket-composer-body { width: 100%; min-height: 78px; border: 1px solid #cbd5e1; border-radius: 6px; padding: 8px 10px; font-size: 13px; font-family: inherit; background: #fff; }
.op-ph-frame .ledger-ticket-composer-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.op-ph-frame .ledger-ticket-note-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #6a7280; }
.op-ph-frame .op-ph-cb { width: 13px; height: 13px; border: 1px solid #767676; border-radius: 2px; background: #fff; }
.op-ph-frame .ledger-ticket-photos { font-size: 12px; flex: 1 1 auto; min-width: 0; font-family: Arial, sans-serif; font-size: 13.33px; color: #000; white-space: nowrap; }
.op-ph-frame .ledger-ticket-send-btn { padding: 7px 18px; border: none; background: #0d9488; color: #fff; border-radius: 6px; font-size: 13px; font-weight: 600; margin-left: auto; display: inline-block; }
.op-scene[data-scene="operator"] .op-foot { max-width: 704px; margin: 14px auto 0 !important; }