/* ============================================================
   CALLSWITCH ONE — the softphone, as it looks at callswitchone.app.

   The hero's second beat on the post-call page: a red rail down the left
   with the presence avatar, Calls, Chats and Settings and the keypad
   button; a Contacts panel with search, Filter, the caller ID line and
   the extension list under their letters; and the call pane with its
   History, Missed Calls, Parked and Voicemail tabs, its own search and
   the call history. The call that just ended lands at the top of that
   list, and the webhook toast follows. js/hero-run.js drives the two
   moments through data-el="pill" (the new row) and data-el="toast".
   ============================================================ */

.cs-app {
    position: relative; height: 100%;
    display: flex; overflow: hidden;
    background: #fff; color: #1F2430;
    font-size: 13px; line-height: 1.3;
}

/* --- the rail ------------------------------------------------------------ */
.cs-rail {
    flex: none; width: 56px;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 12px 0 14px;
    background: linear-gradient(180deg, #F0163B 0%, #E30E24 40%, #CC0B1B 100%);
}
.cs-me {
    position: relative; width: 30px; height: 30px; margin-bottom: 8px; border-radius: 7px;
    background: #7B1FA2; color: #fff;
    display: grid; place-items: center; font-size: 11px; font-weight: 700;
}
.cs-me i {
    position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%;
    background: #4CD137; border: 1.5px solid #E30E24;
}
.cs-rail-i {
    width: 36px; height: 36px; border-radius: 9px;
    display: grid; place-items: center; color: #fff;
}
.cs-rail-i svg { width: 18px; height: 18px; }
.cs-rail-i.is-on { background: rgba(255, 255, 255, 0.24); }
.cs-pad {
    margin-top: auto; width: 34px; height: 34px; border-radius: 50%;
    background: #14297D; display: grid; place-items: center;
    box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
}
.cs-pad svg { width: 16px; height: 16px; }

/* --- contacts ------------------------------------------------------------ */
.cs-contacts {
    flex: none; width: 250px; min-width: 0;
    padding: 12px 14px; border-right: 1px solid #E6E8EE;
    display: flex; flex-direction: column;
}
.cs-ch { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cs-ch b { font-size: 14px; font-weight: 600; }
.cs-add { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #4B5563; }
.cs-add svg { width: 12px; height: 12px; }
.cs-ch > svg { width: 14px; height: 14px; color: #4B5563; }

.cs-search {
    display: flex; align-items: center; gap: 8px;
    height: 34px; padding: 0 10px;
    border: 1px solid #DDE0E7; border-radius: 6px;
    font-size: 12px; color: #9AA0AB;
}
.cs-search > svg { flex: none; width: 14px; height: 14px; color: #1F2430; }
.cs-filter {
    margin-left: auto; padding-left: 10px; border-left: 1px solid #DDE0E7;
    display: inline-flex; align-items: center; gap: 6px; color: #1F2430;
}
.cs-filter svg { width: 10px; height: 10px; }

.cs-cid {
    margin: 14px 0 6px; text-align: right; font-size: 11.5px; color: #1F2430;
}
.cs-cid b { font-weight: 500; margin-left: 8px; }
.cs-cid i { display: inline-block; margin-left: 6px; color: #E30E24; font-style: normal; font-size: 9px; }
.cs-letter { margin: 8px 0 2px; font-size: 11px; color: #9AA0AB; }
.cs-c { display: flex; align-items: center; gap: 10px; padding: 7px 2px; font-size: 13px; }
.cs-av {
    position: relative; flex: none; width: 30px; height: 30px; border-radius: 5px;
    background: #7B1FA2; color: #fff;
    display: grid; place-items: center; font-size: 10px; font-weight: 700;
}
.cs-av--navy { background: #1D2B6F; }
.cs-av i {
    position: absolute; top: -4px; right: -4px; width: 9px; height: 9px; border-radius: 50%;
    border: 1.5px solid #fff;
}
.cs-av i.is-on { background: #4CD137; }
.cs-av i.is-off { background: #F3F4F6; border-color: #8B929E; }
.cs-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-call { flex: none; width: 14px; height: 14px; color: #4CD137; }
.cs-call.is-off { color: #9AA0AB; }
.cs-call svg { width: 100%; height: 100%; display: block; }

/* --- the call pane ------------------------------------------------------- */
.cs-main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cs-tabs {
    display: flex; gap: 22px; padding: 0 16px;
    border-bottom: 1px solid #E6E8EE; font-size: 13px; color: #8B929E;
}
.cs-tabs span { padding: 15px 0 12px; border-bottom: 2px solid transparent; }
.cs-tabs span.is-on { color: #1F2430; border-bottom-color: #1E63E9; }
.cs-main .cs-search { margin: 14px 16px 6px; width: 320px; max-width: calc(100% - 32px); }
.cs-day { margin: 10px 16px 4px; font-size: 11px; color: #9AA0AB; }
.cs-hist { padding: 0 8px; }
.cs-row {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 8px; border-radius: 8px;
    transition: background 0.5s ease;
}
.cs-row + .cs-row { border-top: 1px solid #F1F2F5; }
.cs-row .cs-av { width: 34px; height: 34px; font-size: 11px; }
.cs-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cs-who b { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-who span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #6B7280; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-dir { flex: none; width: 12px; height: 12px; }
.cs-dir svg { width: 100%; height: 100%; display: block; }
.cs-dir--in { color: #16A34A; }
.cs-dir--out { color: #1E63E9; }
.cs-dir--miss { color: #E30E24; }
.cs-when { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 11.5px; color: #6B7280; }
.cs-when b { font-weight: 600; color: #1F2430; }
/* the call that just ended: it is not there until the driver says the call
   is over, then it lands at the top of the list and glows for a beat */
.cs-tag {
    flex: none; padding: 2px 7px; border-radius: 999px;
    background: #FFF3E8; color: #B2540A; font-size: 10px; font-weight: 700;
}
.hr-stripe.is-live .cs-row--new {
    max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; overflow: hidden;
    transform: translateY(-8px);
}
.hr-stripe.is-live .cs-row--new + .cs-row { border-top: 0; }
.hr-stripe.is-live .cs-row--new.is-in {
    max-height: 80px; padding-top: 9px; padding-bottom: 9px; opacity: 1; overflow: visible;
    transform: none; background: #F2FBF4;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease 0.1s, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s, background 1.4s ease 1s;
}

/* --- the keypad, and the call --------------------------------------------
   Both sit where the app puts them: a card rising from the keypad button.
   The driver's root (the hero frame, or step 04) says which shows through data-phase: the keypad while the call is
   dialled (wait, dial), the call while it runs (oncall), neither once it
   has ended (due, sent) and the row has landed in the history. */
.cs-pop, .cs-incall {
    position: absolute; left: 22px; bottom: 58px; z-index: 6;
    width: 232px; padding: 14px 16px 16px;
    background: #fff; border-radius: 16px;
    box-shadow: 0 18px 44px -14px rgba(20, 20, 40, 0.35), 0 2px 8px rgba(20, 20, 40, 0.08);
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}
[data-phase="wait"] .cs-pop,
[data-phase="dial"] .cs-pop,
[data-phase="oncall"] .cs-incall { opacity: 1; visibility: visible; transform: none; }
[data-phase="wait"] .cs-pad,
[data-phase="dial"] .cs-pad,
[data-phase="oncall"] .cs-pad { background: #1C3AA9; }

.cs-pop-top { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #E30E24; }
.cs-pop-top span { display: inline-flex; align-items: center; gap: 4px; }
.cs-pop-top svg { width: 10px; height: 10px; }
.cs-pop-top em { font-style: normal; color: #1F2430; }
.cs-num { margin: 14px 0 12px; text-align: center; font-size: 17px; font-weight: 500; letter-spacing: 0.01em; color: #1F2430; }
.cs-keys { display: grid; grid-template-columns: repeat(3, 44px); justify-content: center; gap: 10px 14px; }
.cs-key {
    width: 44px; height: 44px; border-radius: 50%; border: 1px solid #E3E5EA;
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
}
.cs-key b { font-size: 17px; font-weight: 500; }
.cs-key i { margin-top: 2px; font-style: normal; font-size: 6.5px; letter-spacing: 0.04em; color: #8B929E; min-height: 7px; }
.cs-pop-foot { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 14px; }
.cs-grp, .cs-back { width: 20px; height: 20px; color: #1F2430; }
.cs-grp svg, .cs-back svg { width: 100%; height: 100%; display: block; }
.cs-callbtn {
    width: 46px; height: 46px; border-radius: 50%; background: #3DD13D; color: #fff;
    display: grid; place-items: center;
    box-shadow: 0 8px 18px -8px rgba(61, 209, 61, 0.9);
    transition: transform 0.18s ease, background 0.18s ease;
}
.cs-callbtn svg { width: 20px; height: 20px; }
/* the call button pressed: the moment the call is placed */
[data-phase="dial"] .cs-callbtn { transform: scale(0.88); background: #2DB82D; }

.cs-incall { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 18px; }
.cs-incall-av { width: 44px; height: 44px; font-size: 13px; margin-bottom: 10px; }
.cs-incall b { font-size: 14px; font-weight: 600; }
.cs-incall-num { margin-top: 3px; font-size: 11.5px; color: #6B7280; }
.cs-incall-t { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: #16A34A; font-variant-numeric: tabular-nums; }
.cs-incall-t i { width: 7px; height: 7px; border-radius: 50%; background: #3DD13D; animation: cs-blink 1.1s ease-in-out infinite; }
@keyframes cs-blink { 50% { opacity: 0.25; } }
.cs-incall-foot { display: flex; gap: 14px; margin-top: 16px; }
.cs-incall-b { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #E3E5EA; color: #1F2430; display: grid; place-items: center; }
.cs-incall-b svg { width: 17px; height: 17px; }
.cs-incall-b.is-end { background: #E30E24; border-color: #E30E24; color: #fff; }

/* the same screen standing mid-call, with no frame to follow: the run tab */
.cs-app--oncall .cs-incall { opacity: 1; visibility: visible; transform: none; }
.cs-app--oncall .cs-pad { background: #1C3AA9; }
.cs-incall-b.is-press { transform: scale(0.88); }
.cs-incall-b { transition: transform 0.18s ease; }

/* the toast sits over the call pane, below its tabs, not over the whole app */
.cs-main .rn-crm-toast { top: 60px; }

@media (max-width: 900px) {
    .cs-contacts { display: none; }
    .cs-rail { width: 46px; }
    .cs-rail-i { width: 32px; height: 32px; }
    .cs-tabs { gap: 16px; padding: 0 12px; font-size: 12.5px; }
    .cs-main .cs-search { margin: 12px 12px 4px; width: auto; }
    .cs-who span { white-space: normal; }
    .cs-main .rn-crm-toast { top: 56px; }
    .cs-tag { display: none; }
    .cs-pop, .cs-incall { left: 10px; bottom: 54px; width: 220px; }
}
@media (prefers-reduced-motion: reduce) {
    .cs-row, .cs-row--new, .cs-pop, .cs-incall, .cs-callbtn { transition: none; }
    .cs-incall-t i { animation: none; }
}