.hogart-call{box-sizing:border-box;width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;margin:auto;padding:28px;border:1px solid #d9e5dc;border-radius:20px;background:#fff;color:#293e30;font-family:inherit;text-align:center;box-shadow:0 16px 60px #0003}
.hogart-call::backdrop{background:#10271999}
.hogart-call h2{font-size:23px;margin:0 0 16px}.hogart-call-name{font-size:20px;font-weight:650;overflow-wrap:anywhere}.hogart-call-status{font-size:15px;color:#526358;min-height:44px}
.hogart-call-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.hogart-call button{font:inherit;font-size:15px;min-height:44px;padding:10px 16px;border-radius:12px;border:1px solid #cbd9ce;background:#eef8ef;color:#2f7d48;cursor:pointer}
.hogart-call button:focus-visible{outline:3px solid #2f7d48;outline-offset:2px}.hogart-call button:disabled{opacity:.6;cursor:wait}
.hogart-call .hogart-call-accept{background:#2f7d48;color:#fff}.hogart-call .hogart-call-end{background:#a83333;color:#fff;border-color:#a83333}
.hogart-call [hidden]{display:none!important}
.hogart-call-screen-status{font-size:13px;line-height:1.4;color:#526358;margin:12px 0 0}
.hogart-call.hogart-call-dimmed{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;border-radius:0;background:#000;overflow:hidden}
.hogart-call-dimmed> :not(.hogart-call-shade){visibility:hidden}
.hogart-call-shade{position:absolute;inset:0;z-index:1;background:#000;color:#888;box-sizing:border-box;touch-action:none;overscroll-behavior:none;user-select:none;-webkit-user-select:none}
.hogart-call-shade:fullscreen{width:100%;height:100%;margin:0;padding:0;background:#000}
.hogart-call-shade p{position:absolute;bottom:180px;left:20px;right:20px;font-size:12px;text-align:center;pointer-events:none}
.hogart-call-shade button{position:absolute;bottom:max(24px,env(safe-area-inset-bottom));background:#171717;color:#aaa;border-color:#444;min-height:56px;max-width:42%;touch-action:none;white-space:normal}
.hogart-call-shade .hogart-call-shade-restore{left:max(16px,env(safe-area-inset-left))}
.hogart-call-shade .hogart-call-shade-end{right:max(16px,env(safe-area-inset-right));color:#e5aaaa;border-color:#744}
.hogart-call-diagnostic{white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;font:12px/1.5 monospace;background:#eef8ef;color:#293e30;border:1px solid #cbd9ce;border-radius:10px;padding:10px;margin:16px 0 0}

.hogart-call-controls>a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:8px 12px;color:var(--hogart-green,#26733d);text-decoration:underline;font:inherit}

/* Once WebRTC is connected the call becomes a modeless status panel. The
   peer connection stays in this page, while the conversation remains usable. */
.hogart-call.hogart-call-docked[open]{position:fixed;right:16px;bottom:auto;left:auto;z-index:1100;display:grid;width:min(390px,calc(100vw - 24px));max-height:none;margin:0;padding:12px 14px;border-radius:8px;text-align:left;overflow:visible}
.hogart-call-docked::backdrop{display:none}
.hogart-call-docked h2,.hogart-call-docked .hogart-call-screen-status,.hogart-call-docked .hogart-call-sound,.hogart-call-docked .hogart-call-output{display:none}
.hogart-call-docked .hogart-call-name{margin:0 0 2px;font-size:15px;line-height:1.25}
.hogart-call-docked .hogart-call-status{min-height:0;margin:0 0 9px;font-size:13px;line-height:1.3;font-variant-numeric:tabular-nums}
.hogart-call-docked .hogart-call-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.hogart-call-docked button{min-width:0;min-height:42px;padding:6px 8px;border-radius:7px;font-size:13px;line-height:1.2;white-space:normal}

@media(max-width:767px){
  .hogart-call.hogart-call-docked[open]{right:6px;width:calc(100vw - 12px);padding:10px 12px}
  .page-staff-chat.hogart-call-active .chat-shell,.page-staff-chat.hogart-call-active .chat-shell.has-room{
    top:calc(var(--chat-top,64px) + 124px);
    height:calc(var(--chat-height,100dvh) - 124px);
  }
}