.call-screen { --call-ink: #19364a; --call-muted: #657681; --call-line: #d8e0e4; --call-surface: #ffffff; --call-soft: #f4f7f8; --call-live: #19795a; --call-warn: #9c6517; --call-danger: #a9443c; box-sizing: border-box; max-width: 1180px; color: var(--call-ink); }
.call-screen *, .call-screen *::before, .call-screen *::after { box-sizing: border-box; }
.call-screen__header, .call-screen__detail, .call-screen__list, .call-screen--state { border: 1px solid var(--call-line); border-radius: 16px; background: var(--call-surface); box-shadow: 0 1px 2px rgb(18 43 58 / 4%); }
.call-screen__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; padding: 24px; }
.call-screen h2, .call-screen p { margin-top: 0; }.call-screen h2 { margin-bottom: 8px; font-size: clamp(1.25rem, 2vw, 1.75rem); }.call-screen p { color: var(--call-muted); line-height: 1.5; }
.call-screen__eyebrow { margin-bottom: 6px; color: var(--call-muted); font-size: .7rem; font-weight: 800; letter-spacing: .11em; }
.call-screen__button, .call-screen__recording { min-height: 42px; border: 1px solid var(--call-ink); border-radius: 9px; padding: 9px 13px; background: var(--call-surface); color: var(--call-ink); font: inherit; font-weight: 700; cursor: pointer; }
.call-screen__button:hover { background: var(--call-soft); }.call-screen__button:focus-visible, .call-screen__call:focus-visible { outline: 3px solid #78a9bf; outline-offset: 2px; }
.call-screen__layout { display: grid; grid-template-columns: minmax(250px, .72fr) minmax(0, 1.28fr); gap: 16px; }.call-screen__list { min-width: 0; padding: 10px; }.call-screen__list ol, .call-screen__transcript { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.call-screen__call { width: 100%; display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 68px; border: 1px solid transparent; border-radius: 10px; padding: 10px; background: transparent; color: var(--call-ink); text-align: left; font: inherit; cursor: pointer; }.call-screen__call:hover { background: var(--call-soft); }.call-screen__call.is-selected { border-color: #75b29a; background: #eff8f4; }
.call-screen__call strong, .call-screen__call small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.call-screen__call small, .call-screen__call time { color: var(--call-muted); font-size: .76rem; }.call-screen__call.is-selected small, .call-screen__call.is-selected time { color: #435862; }.call-screen__call-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--call-muted); }.call-screen__call-dot[data-lifecycle="active"] { background: var(--call-live); box-shadow: 0 0 0 4px #dff2e9; }.call-screen__call-dot[data-lifecycle="failed"] { background: var(--call-danger); }.call-screen__more { width: 100%; margin-top: 10px; }
.call-screen__detail { min-width: 0; overflow: hidden; }.call-screen__detail > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px; border-bottom: 1px solid var(--call-line); }.call-screen__detail > header h2 { margin-bottom: 4px; }.call-screen__detail > header p { margin-bottom: 0; }
.call-screen__status, .call-screen__lifecycle { display: inline-flex; align-items: center; min-height: 24px; border-radius: 999px; padding: 3px 8px; background: var(--call-soft); color: var(--call-ink); font-size: .74rem; font-weight: 700; }.call-screen__status[data-stream-status="connected"] { background: #dff2e9; color: #14543f; }.call-screen__status[data-stream-status="reconnecting"] { background: #fff1d3; color: #79500c; }
.call-screen__recording { flex: 0 0 auto; border-color: var(--call-line); background: var(--call-soft); color: var(--call-muted); cursor: not-allowed; }.call-screen__recording-note { margin: 0; padding: 12px 22px; border-bottom: 1px solid var(--call-line); background: #fbfcfc; font-size: .82rem; }
.call-screen__transcript { max-height: min(62vh, 620px); overflow: auto; padding: 20px; }.call-screen__turn { max-width: min(92%, 600px); border: 1px solid var(--call-line); border-radius: 12px; padding: 12px 14px; background: var(--call-soft); }.call-screen__turn--caller { justify-self: end; border-color: #315b4a; background: var(--call-ink); color: white; }.call-screen__turn--assistant { justify-self: start; background: #eef8f5; }.call-screen__turn--system { justify-self: center; max-width: 100%; background: #fff8e9; }.call-screen__turn p { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 7px; color: inherit; font-size: .72rem; font-weight: 800; }.call-screen__turn--caller p { color: #d7eef5; }.call-screen__turn div { overflow-wrap: anywhere; line-height: 1.5; }.call-screen__turn time { display: block; margin-top: 7px; color: var(--call-muted); font-size: .68rem; }.call-screen__turn--caller time { color: #d7eef5; }.call-screen__empty-transcript { padding: 22px; color: var(--call-muted); text-align: center; }
.call-screen__notice { margin-bottom: 16px; border-left: 4px solid var(--call-warn); border-radius: 8px; padding: 10px 12px; background: #fff8e9; }.call-screen--state { display: grid; justify-items: start; min-height: 300px; align-content: center; padding: 32px; }.call-screen__state-mark { width: 44px; height: 44px; margin-bottom: 16px; }.call-screen--state[data-call-screen-state="denied"] { border-left: 5px solid var(--call-danger); }.call-screen--state[data-call-screen-state="error"] { border-left: 5px solid var(--call-danger); }.call-screen--state[data-call-screen-state="empty"] { border-left: 5px solid #6d9db2; }
@media (max-width: 767px) { .call-screen__header, .call-screen__detail > header { display: grid; }.call-screen__header { padding: 20px; }.call-screen__layout { grid-template-columns: 1fr; }.call-screen__detail > header { padding: 20px; }.call-screen__recording { justify-self: start; }.call-screen__transcript { max-height: none; padding: 16px; }.call-screen__turn { max-width: 100%; }.call-screen__list { order: 2; }.call-screen__detail { order: 1; } }
@media (prefers-reduced-motion: reduce) { .call-screen *, .call-screen *::before, .call-screen *::after { scroll-behavior: auto; transition: none; animation: none; } }