/* Keys — live call banner.
   Sits above everything, pushes the page down rather than covering the menu, and
   is legible at arm's length on a phone held in one hand between jobs. Colour
   carries the state at a glance; the words carry the meaning. */

.kcb-bar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 2147483000;                 /* above modals: a live call outranks anything */
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
    font: 600 15px/1.35 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #fff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
}

/* Keeps the banner from sitting on top of the page's own header. */
body.kcb-open { padding-top: 62px; }

.kcb-icon { font-size: 18px; line-height: 1; flex: 0 0 auto; }

.kcb-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.kcb-headline { font-weight: 700; letter-spacing: -0.01em; }
.kcb-detail { font-weight: 500; font-size: 13.5px; opacity: .92; }

.kcb-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.kcb-btn {
    display: inline-block;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .34);
    color: #fff;
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    border-radius: 8px;
    padding: 7px 13px;
    white-space: nowrap;
}
.kcb-btn:hover { background: rgba(255, 255, 255, .26); color: #fff; }

.kcb-close {
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .34);
    color: #fff;
    width: 30px; height: 30px;
    border-radius: 50%;
    font-size: 17px; line-height: 1;
    cursor: pointer;
}

/* Ringing — demands attention. */
.kcb-ringing   { background: #d93025; }
/* Waiting for the keypress. Amber, because the job is not done yet. */
.kcb-awaiting  { background: #b8700a; }
/* On the call. */
.kcb-connected { background: #0f7b43; }
/* Finished, and filed. */
.kcb-ended     { background: #0f7b43; }
/* Nobody took it. */
.kcb-missed    { background: #8a5a00; }

@media (max-width: 640px) {
    .kcb-bar { gap: 10px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); font-size: 14px; }
    body.kcb-open { padding-top: 76px; }
    .kcb-detail { font-size: 12.5px; }
    /* The dialer link is the first thing to go; the words matter more. */
    .kcb-open { display: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
    .kcb-bar { animation: kcb-in .18s ease-out; }
    @keyframes kcb-in { from { transform: translateY(-100%); } to { transform: translateY(0); } }
}


/* "I got this" -- the one thing to do while a caller is on hold, so it is the
   brightest element in the bar and big enough to hit on a phone, one-handed. */
.kcb-claim {
    background: #fff;
    color: #12203a;
    border: 0;
    font-weight: 700;
    cursor: pointer;
}
.kcb-claim:hover { background: #eef2f9; color: #12203a; }
.kcb-claim:disabled { opacity: .7; cursor: default; }

@media (max-width: 640px) {
    /* On a phone the claim button survives; the dialer link is what gives way. */
    .kcb-claim { display: inline-block !important; padding: 10px 16px; }
}