/* =============================================================================
   Telephony in AM Navy (RM-038, 18 Oct 2026): the Zadarma panel, its tiles,
   and the theme for the dial pad, Calls page and call panels. 4px corners,
   navy primary, soft cards, mobile first.
   ============================================================================= */

.zd-panel { display: flex; flex-direction: column; gap: 16px; --accent: var(--am-blue, #19213b); }

.zd-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 14px;
    border-radius: var(--am-radius, 4px); background: var(--am-blue-tint, #f4f5fa);
    font-size: 13px; color: var(--text-secondary, #344054);
}
.zd-strip__fact strong { color: var(--am-blue, #19213b); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.zd-warn { color: var(--status-warning, #b54708); }

.zd-pill {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: var(--am-radius, 4px);
    font-size: 12px; font-weight: 600; white-space: nowrap;
}
.zd-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.zd-pill--ok { background: var(--status-success-tint); color: var(--status-success); }
.zd-pill--muted { background: var(--border-subtle); color: var(--text-secondary); }

.zd-card {
    display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px;
    border: 1px solid var(--border-default); border-radius: var(--radius-button); background: var(--surface-panel);
}
.zd-card__title { margin: 0; font-size: 14px; font-weight: 700; color: var(--am-blue, #19213b); }
.zd-text, .zd-hint { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-secondary, #344054); }
.zd-hint { color: var(--text-muted, #667085); font-size: 12.5px; }
.zd-muted { color: var(--text-muted, #667085); }

.zd-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }

/* Tiles */
.zd-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.zd-tile {
    display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 10px; row-gap: 2px;
    padding: 14px; border-radius: var(--radius-button); background: var(--surface-subtle); border: 1px solid var(--border-default); min-width: 0;
}
.zd-tile__icon {
    grid-row: 1 / span 3; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    border-radius: var(--am-radius, 4px); background: var(--am-blue, #19213b); color: var(--text-on-dark);
}
.zd-tile__icon .icon { width: 18px; height: 18px; }
.zd-tile__label { font-size: 12px; color: var(--text-muted, #667085); }
.zd-tile__value { font-size: 20px; font-weight: 700; color: var(--am-blue, #19213b); line-height: 1.2; overflow-wrap: anywhere; }
.zd-tile__sub { font-size: 11.5px; color: var(--text-muted, #667085); line-height: 1.4; }

/* Lists */
.zd-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.zd-list__row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-subtle); min-width: 0; }
.zd-list__row:first-child { border-top: 0; padding-top: 0; }
.zd-list__icon { display: inline-flex; color: var(--am-blue, #19213b); }
.zd-list__main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.zd-list__title { font-size: 13.5px; font-weight: 600; color: var(--text-primary, #101828); overflow-wrap: anywhere; }
.zd-list__meta { font-size: 12px; color: var(--text-muted, #667085); overflow-wrap: anywhere; }
.zd-list__side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.zd-ext {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 30px; padding: 0 8px;
    border-radius: var(--am-radius, 4px); background: var(--am-blue-soft, #e6e9f2); color: var(--am-blue, #19213b);
    font-weight: 700; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.zd-plan { display: flex; flex-direction: column; gap: 4px; }

/* Form */
.zd-form { display: flex; flex-direction: column; gap: 12px; }
.zd-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.zd-field__label { font-size: 12.5px; font-weight: 600; color: var(--text-secondary, #344054); }
.zd-input {
    width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--am-outline, #d3d6e0); border-radius: var(--am-radius, 4px);
    background: var(--surface-panel); font: inherit; font-size: 14px; color: var(--text-primary, #101828); box-sizing: border-box;
}
.zd-input:focus { outline: none; border-color: var(--am-blue, #19213b); box-shadow: var(--am-focus, 0 0 0 3px rgba(25, 33, 59, .22)); }
.zd-input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; background: var(--am-blue-tint, #f4f5fa); }
.zd-copy { display: flex; gap: 8px; }
.zd-copy .zd-input { flex: 1; min-width: 0; }
.zd-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.zd-actions--start { justify-content: flex-start; }
.zd-actions--split { justify-content: space-between; }

/* Notices */
.zd-notice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--am-radius, 4px); font-size: 13px; line-height: 1.5; }
.zd-notice .icon { flex: none; margin-top: 2px; width: 16px; height: 16px; }
.zd-notice--info { background: var(--am-blue-tint, #f4f5fa); color: var(--am-blue, #19213b); }
.zd-notice--warning { background: var(--status-warning-tint); color: var(--status-warning); }
.zd-notice--danger { background: var(--am-red-soft, #fee4e2); color: var(--am-red-ink, #b42318); }

/* Guide */
.zd-guide { border: 1px solid var(--border-default); border-radius: var(--radius-button); background: var(--surface-subtle); padding: 0 18px; }
.zd-guide__summary {
    display: flex; align-items: center; gap: 10px; padding: 14px 0; cursor: pointer; list-style: none;
    font-size: 14px; font-weight: 700; color: var(--am-blue, #19213b);
}
.zd-guide__summary::-webkit-details-marker { display: none; }
.zd-guide__summary::after { content: "+"; margin-left: auto; font-weight: 400; font-size: 18px; }
.zd-guide[open] .zd-guide__summary::after { content: "\2212"; }
.zd-guide__steps { margin: 0 0 12px; padding: 0; list-style: none; counter-reset: zd; display: flex; flex-direction: column; gap: 12px; }
.zd-guide__steps li {
    counter-increment: zd; display: grid; grid-template-columns: 26px 1fr; column-gap: 12px; row-gap: 2px;
    font-size: 13px; line-height: 1.55; color: var(--text-secondary, #344054);
}
.zd-guide__steps li::before {
    content: counter(zd); grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--am-radius, 4px); background: var(--am-blue, #19213b); color: var(--text-on-dark);
    font-size: 12px; font-weight: 700;
}
.zd-guide__step { color: var(--text-primary, #101828); }
.zd-guide__steps a, .zd-guide__events a { color: var(--am-blue, #19213b); font-weight: 600; }
.zd-guide__events { margin: 0 0 16px; font-size: 12px; color: var(--text-muted, #667085); line-height: 2; }
.zd-guide__events code {
    padding: 2px 6px; border-radius: 3px; background: var(--am-blue-soft, #e6e9f2); color: var(--am-blue, #19213b);
    font-size: 11px; white-space: nowrap;
}

.zd-loading { display: flex; align-items: center; gap: 10px; padding: 18px; font-size: 13px; color: var(--text-muted, #667085); }
.zd-spinner {
    width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--am-blue-soft, #e6e9f2);
    border-top-color: var(--am-blue, #19213b); animation: zd-spin .8s linear infinite;
}
@keyframes zd-spin { to { transform: rotate(360deg); } }

@media (max-width: 1100px) { .zd-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
    .zd-columns { grid-template-columns: 1fr; }
    .zd-card { padding: 14px; }
    .zd-guide { padding: 0 14px; }
}
@media (max-width: 420px) {
    .zd-tiles { grid-template-columns: 1fr; }
    .zd-copy { flex-direction: column; }
    .zd-actions, .zd-actions--split { flex-direction: column-reverse; align-items: stretch; }
    .zd-actions .am-btn { width: 100%; height: 42px; }
}

/* =============================================================================
   AM Navy for the rest of Telephony: dial pad, call panel, recordings, the
   Calls page, call details and the incoming call pop-up. Loaded after
   integrations.css so these win. Mobile: bigger keys, full width actions.
   ============================================================================= */

.call-panel, .call-recordings, .call-detail, .calls-page, .incoming-call-stack {
    --accent: var(--am-blue, #19213b);
    --accent-tint: var(--am-blue-tint, #f4f5fa);
    --accent-border: var(--border-strong);
}

.call-panel__tabs { border-radius: var(--am-radius, 4px); background: var(--am-blue-tint, #f4f5fa); }
.call-panel__tab { border-radius: var(--am-radius, 4px); }
.call-panel__tab--active { background: var(--am-blue, #19213b); color: var(--text-on-dark); box-shadow: none; }
.call-panel__tab--active .icon { color: var(--text-on-dark); }

.dial-pad__display { border-bottom-color: var(--am-blue-soft, #e6e9f2); }
.dial-pad__number { color: var(--am-blue, #19213b); font-weight: 600; }
.dial-pad__key {
    border-radius: var(--am-radius, 4px); background: var(--surface-subtle); border-color: var(--border-default);
    touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.dial-pad__key:hover { background: var(--am-blue-soft, #e6e9f2); }
.dial-pad__key:active { background: var(--am-blue-soft-hover, #d8dcea); }
.dial-pad__key:focus-visible { outline: none; box-shadow: var(--am-focus, 0 0 0 3px rgba(25, 33, 59, .22)); }
.dial-pad__digit { color: var(--am-blue, #19213b); font-weight: 600; }

.call-button { border-radius: var(--am-radius, 4px); height: 48px; font-weight: 600; }
.call-button--outbound { background: var(--am-blue, #19213b); border-color: var(--am-blue, #19213b); color: var(--text-on-dark); }
.call-button--outbound:hover:not(:disabled) { background: var(--am-blue-hover, #26315a); border-color: var(--am-blue-hover, #26315a); }
.call-button--outbound:active:not(:disabled) { background: var(--am-blue-press, #10162a); }

.dial-pad__secondary-link, .call-recording__play { border-radius: var(--am-radius, 4px); }
.dial-pad__secondary-link:hover, .call-recording__play:hover:not(:disabled) {
    background: var(--am-blue-soft, #e6e9f2); color: var(--am-blue, #19213b); border-color: var(--am-blue-soft, #e6e9f2);
}

.call-history__placeholder-icon, .call-history__direction--outbound { background: var(--am-blue-soft, #e6e9f2); color: var(--am-blue, #19213b); }
.call-history__redial { color: var(--am-blue, #19213b); background: var(--am-blue-soft, #e6e9f2); }

.incoming-call { border-radius: var(--radius-button); border-color: var(--border-default); }
.incoming-call__icon { border-radius: var(--am-radius, 4px); background: var(--am-blue, #19213b); color: var(--text-on-dark); }
.incoming-call--settled .incoming-call__icon { background: var(--border-subtle); color: var(--text-muted, #667085); }
.incoming-call__status { color: var(--am-blue, #19213b); }
.incoming-call__dismiss { border-radius: var(--am-radius, 4px); }

/* The shared buttons and counters, navy inside Telephony screens. */
.calls-page .button, .call-detail .button, .call-panel .button, .call-recordings .button { border-radius: var(--am-radius, 4px); }
.calls-page .button--primary, .call-detail .button--primary, .call-panel .button--primary {
    background: var(--am-blue, #19213b); border-color: var(--am-blue, #19213b); color: var(--text-on-dark);
}
.calls-page .button--primary:hover, .call-detail .button--primary:hover, .call-panel .button--primary:hover {
    background: var(--am-blue-hover, #26315a); border-color: var(--am-blue-hover, #26315a);
}
.calls-page .summary-counter__badge { border-radius: var(--am-radius, 4px); background: var(--am-blue, #19213b); color: var(--text-on-dark); }
.calls-page .status-pill, .call-detail .status-pill { border-radius: var(--am-radius, 4px); }
.call-detail .call-note__input { border-radius: var(--am-radius, 4px); }

@media (max-width: 560px) {
    .dial-pad__keys { gap: 12px; }
    .dial-pad__key { height: 64px; }
    .dial-pad__digit { font-size: 24px; }
    .dial-pad__number { font-size: 28px; }
    .call-button { height: 54px; font-size: 16px; }
    .dial-pad__secondary-links { flex-direction: column; }
    .dial-pad__secondary-link { padding: 12px 10px; }
    .calls-page .page-toolbar { flex-wrap: wrap; gap: 8px; }
    .calls-page .page-toolbar .button { flex: 1 1 auto; }
    .calls-page .data-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .call-detail .call-detail__grid { grid-template-columns: 1fr; }
}

/* ---- Zadarma panel: Connection and Setup tabs (our record tabs) ------------ */
.record-tabs.zd-record-tabs { margin: -4px 0 0; padding: 0; }
.zd-record-tabs .record-tab { padding: 12px 14px 10px; font-size: 13.5px; }
.zd-record-tabs .record-tab--active { color: var(--am-blue, #19213b); border-bottom-color: var(--am-blue, #19213b); font-weight: 600; }
.zd-record-tabs .record-tab:focus-visible { outline: none; box-shadow: var(--am-focus, 0 0 0 3px rgba(25, 33, 59, .22)); border-radius: var(--am-radius, 4px) var(--am-radius, 4px) 0 0; }

.zd-stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.zd-module { display: flex; align-items: center; gap: 12px; }
.zd-module__icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px;
    border-radius: var(--am-radius, 4px); background: var(--am-blue, #19213b); color: var(--text-on-dark);
}
.zd-module__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

/* ---- Setup guide ------------------------------------------------------------- */
.zd-setup { display: flex; flex-direction: column; gap: 14px; }
.zd-setup__section {
    display: flex; flex-direction: column; gap: 12px; padding: 16px 18px;
    border: 1px solid var(--border-default); border-radius: var(--radius-button); background: var(--surface-panel);
}
.zd-setup__head { display: flex; gap: 12px; align-items: flex-start; }
.zd-setup__number {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: var(--am-radius, 4px); background: var(--am-blue, #19213b); color: var(--text-on-dark); font-size: 13px; font-weight: 700;
}
.zd-setup__title { margin: 3px 0 0; font-size: 14.5px; font-weight: 700; color: var(--am-blue, #19213b); }
.zd-setup__intro { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted, #667085); }
.zd-setup__steps {
    margin: 0; padding: 0 0 0 40px; display: flex; flex-direction: column; gap: 8px;
    font-size: 13px; line-height: 1.6; color: var(--text-secondary, #344054);
}
.zd-setup__steps li::marker { color: var(--am-blue, #19213b); font-weight: 700; }
.zd-setup a, .zd-panel a {
    display: inline-flex; align-items: center; gap: 3px; color: var(--am-blue, #19213b); font-weight: 600;
    text-decoration: underline; text-underline-offset: 2px;
}
.zd-setup a .icon { width: 12px; height: 12px; }
.zd-setup .zd-notice, .zd-setup .zd-copy, .zd-setup .zd-hint, .zd-events, .zd-trouble { margin-left: 40px; }
.zd-setup > .zd-notice { margin-left: 0; }

.zd-events { display: flex; flex-direction: column; border: 1px solid var(--border-subtle); border-radius: var(--radius-button); overflow: hidden; }
.zd-events__row { display: grid; grid-template-columns: 150px 1fr; gap: 12px; padding: 9px 12px; font-size: 12.5px; color: var(--text-secondary, #344054); line-height: 1.5; }
.zd-events__row:nth-child(odd) { background: var(--surface-subtle); }
.zd-events__row code {
    align-self: start; justify-self: start; padding: 2px 6px; border-radius: 3px;
    background: var(--am-blue-soft, #e6e9f2); color: var(--am-blue, #19213b); font-size: 11.5px; font-weight: 600;
}
.zd-trouble { padding: 12px 14px; border-radius: var(--radius-button); background: var(--status-warning-tint); color: var(--status-warning); }
.zd-trouble__title { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.zd-trouble ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.55; }

@media (max-width: 560px) {
    .zd-setup__section { padding: 14px; }
    .zd-setup__steps { padding-left: 20px; }
    .zd-setup .zd-notice, .zd-setup .zd-copy, .zd-setup .zd-hint, .zd-events, .zd-trouble { margin-left: 0; }
    .zd-events__row { grid-template-columns: 1fr; gap: 4px; }
}

/* The phone badge on the dial pad and recordings panels: the shared header
   tile in components.css (19 Oct 2026), so Phone and Chat headers match. */
.call-panel .zd-record-tabs { margin: 0 0 16px; }
.call-panel .zd-record-tabs .record-tab { flex: 1; text-align: center; }

/* ---- Settings > Modules: the fuller About (showcase), AM Navy -------------- */
.mod-showcase { display: flex; flex-direction: column; gap: 14px; margin-bottom: 8px; }
.mod-showcase__hero {
    display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: var(--radius-button);
    background: var(--am-blue, #19213b); color: var(--text-on-dark);
}
.mod-showcase__mark {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
    border-radius: var(--radius-button); background: rgba(255, 255, 255, .12); color: var(--text-on-dark);
}
.mod-showcase__hero > div { flex: 1; min-width: 0; }
.mod-showcase__title { margin: 0; font-size: 17px; font-weight: 700; color: var(--text-on-dark); }
.mod-showcase__tagline { margin: 4px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .78); }
.mod-showcase__pill { flex: none; padding: 4px 10px; border-radius: var(--am-radius, 4px); font-size: 12px; font-weight: 600; }
.mod-showcase__pill--on { background: var(--status-success-tint); color: var(--status-success); }
.mod-showcase__pill--off { background: rgba(255, 255, 255, .14); color: var(--text-on-dark); }
.mod-showcase__heading { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--am-blue, #19213b); text-transform: none; }
.mod-showcase__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mod-showcase__feature {
    display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px; padding: 12px;
    border: 1px solid var(--border-default); border-radius: var(--radius-button); background: var(--surface-subtle); font-size: 12.5px; line-height: 1.5; color: var(--text-secondary, #344054);
}
.mod-showcase__feature strong { color: var(--text-primary, #101828); font-size: 13px; }
.mod-showcase__feature > span:last-child { grid-column: 2; }
.mod-showcase__icon {
    grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
    border-radius: var(--am-radius, 4px); background: var(--am-blue-soft, #e6e9f2); color: var(--am-blue, #19213b);
}
.mod-showcase__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mod-showcase__steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary, #344054); }
.mod-showcase__steps li > div { display: flex; flex-direction: column; gap: 2px; }
.mod-showcase__steps strong { color: var(--text-primary, #101828); font-size: 13px; }
.mod-showcase__number {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
    border-radius: var(--am-radius, 4px); background: var(--am-blue, #19213b); color: var(--text-on-dark); font-size: 12px; font-weight: 700;
}
.mod-showcase__needs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.mod-showcase__needs li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-secondary, #344054); }
.mod-showcase__needs .icon { flex: none; margin-top: 2px; color: var(--status-success); }
.mod-showcase__actions { display: flex; }
@media (max-width: 560px) {
    .mod-showcase__features { grid-template-columns: 1fr; }
    .mod-showcase__hero { flex-wrap: wrap; }
    .mod-showcase__actions .am-btn { width: 100%; }
}
.mod-showcase ~ .app-panel__heading { color: var(--am-blue, #19213b); font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0; }
/* Softer hero (Leone, 18 Oct): tint background, navy text, navy mark. */
.mod-showcase__hero { background: var(--am-blue-tint, #f4f5fa); color: var(--am-blue, #19213b); border: 1px solid var(--border-default); }
.mod-showcase__mark { background: var(--am-blue, #19213b); color: var(--text-on-dark); }
.mod-showcase__title { color: var(--am-blue, #19213b); }
.mod-showcase__tagline { color: var(--text-secondary, #5b6170); }
.mod-showcase__pill--off { background: var(--border-subtle); color: var(--text-secondary); }

/* =============================================================================
   RM-038: live calls. Header ring, the live call card, the dial pad's live view.
   ============================================================================= */
:root { --call-live-blue: #3b82f6; }

/* Header phone icon while a call is live: a blue ring that pulses. */
.header-icon-button--call-live { color: var(--text-on-dark); box-shadow: 0 0 0 2px var(--call-live-blue); background: rgba(59, 130, 246, .18); }
.header-icon-button--call-live::after {
    content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(59, 130, 246, .55); animation: call-live-ring 1.6s ease-out infinite;
}
@keyframes call-live-ring { 0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, .55); } 100% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } }
@media (prefers-reduced-motion: reduce) { .header-icon-button--call-live::after { animation: none; } }

/* The live call card (bottom right). */
.live-call { flex-direction: column; align-items: stretch; gap: 10px; width: 340px; cursor: default; }
.live-call__top { display: flex; align-items: center; gap: 12px; }
.live-call--live .incoming-call__icon { background: var(--call-live-blue); animation: none; }
.live-call--live .incoming-call__status { color: var(--call-live-blue); }
.live-call__clock { margin-left: 6px; font-variant-numeric: tabular-nums; letter-spacing: 0; color: var(--text-primary, #101828); }
.live-call__actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.live-call__file { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-default); }
.live-call__ask { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary, #344054); }
.live-call__field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; font-weight: 600; color: var(--text-secondary, #344054); }
/* The wrap-up's Organisation and Project are AM notched fields: the outline
   carries the name, so they drop the stacked label layout. The display above
   would otherwise beat the hidden attribute. */
.live-call__field.form-field { display: block; font-weight: 400; }
.live-call__field[hidden] { display: none; }
/* AM list toolbars carry no count beside the search (the counters above the
   table already say it). Kept in the DOM so the page still writes to it. */
#callLogCount { display: none; }
.live-call__select {
    width: 100%; height: 34px; padding: 0 10px; border: 1px solid var(--am-outline, #d3d6e0); border-radius: var(--am-radius, 4px);
    background: var(--surface-panel); font: inherit; font-size: 13px; color: var(--text-primary, #101828);
}
.live-call__select:focus { outline: none; border-color: var(--am-blue, #19213b); box-shadow: var(--am-focus, 0 0 0 3px rgba(25, 33, 59, .22)); }
/* The shared Contact search box (contact-picker.js) sized to sit with the
   selects. Its list stays in the flow so a small card never clips it. */
.live-call__field .contact-picker { font-weight: 400; text-align: left; }
.live-call__field .contact-picker__input { height: 34px; font-size: 13px; }
.live-call__field .contact-picker__list { position: static; margin-top: 4px; max-height: 220px; box-shadow: none; }
/* 16px on phones so iOS does not zoom the page when the box is tapped. */
@media (max-width: 600px) { .live-call__field .contact-picker__input { font-size: 16px; } }
.live-call__filed { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-default); font-size: 12.5px; color: var(--status-success); }
.live-call__filed span { flex: 1; min-width: 0; color: var(--text-secondary, #344054); }
.live-call__link { border: 0; background: none; padding: 0; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--am-blue, #19213b); text-decoration: underline; cursor: pointer; }

/* The dial pad while a call is on. */
.call-live { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 18px 4px 4px; }
.call-live__avatar {
    display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 10px;
    border-radius: 50%; background: var(--am-blue, #19213b); color: var(--text-on-dark);
}
.call-live__avatar--answered { background: var(--call-live-blue); box-shadow: 0 0 0 8px rgba(59, 130, 246, .15); }
.call-live__avatar--ringing, .call-live__avatar--dialling { animation: call-live-ring 1.6s ease-out infinite; }
.call-live__status { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--call-live-blue); }
.call-live__who { font-size: 20px; font-weight: 700; color: var(--am-blue, #19213b); overflow-wrap: anywhere; }
.call-live__number { font-size: 13px; color: var(--text-muted, #667085); }
.call-live__clock { margin-top: 6px; font-size: 32px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary, #101828); }
.call-live__hint { margin-top: 6px; max-width: 30ch; font-size: 13px; line-height: 1.5; color: var(--text-secondary, #344054); }
.call-live__actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; margin-top: 18px; }
.call-live__note { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted, #667085); }
.call-live-banner {
    display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 12px; padding: 10px 12px; border: 0;
    border-radius: var(--am-radius, 4px); background: rgba(59, 130, 246, .12); color: var(--am-blue, #19213b);
    font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left;
}
.call-live-banner__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--call-live-blue); animation: call-live-ring 1.6s ease-out infinite; }

@media (max-width: 560px) {
    .live-call { width: auto; }
    .live-call__actions .am-btn { flex: 1; height: 40px; }
    .call-live__clock { font-size: 36px; }
}
/* Clear of corner badges and chat bubbles, and out of the way while the dial
   pad is already showing the same live call. */
.live-call-stack { bottom: calc(var(--gutter, 24px) + 52px); }
body:has(.call-live) .live-call:not(.live-call--ended) { display: none; }

/* ---- Header phone: the Agent Meeko spinning ring (18 Oct) ---------------------
   Green while a call of mine is on, red for 30 seconds after it ends. Replaces
   the earlier blue pulse. */
.header-icon-button--call-live { box-shadow: none; background: transparent; }
.header-icon-button--call-live::after { content: none; animation: none; }
.call-ring {
    position: absolute; inset: 1px; border-radius: 50%; pointer-events: none;
    opacity: 0; transform: scale(.8); transition: opacity .2s ease, transform .25s ease;
    --ring: 34, 197, 94; --ring-hi: #22c55e; --ring-lo: #dcfce7;
}
.call-ring::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(var(--ring), 0) 0%, rgba(var(--ring), 0) 55%, var(--ring-hi) 85%, var(--ring-lo) 100%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    animation: call-ring-spin 1.1s linear infinite;
    filter: drop-shadow(0 0 4px rgba(var(--ring), .9));
}
.call-ring::after {
    content: ''; position: absolute; inset: 3px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--ring), .35) 0%, rgba(var(--ring), 0) 70%);
    animation: call-ring-breathe 1.6s ease-in-out infinite;
}
.call-ring--live, .call-ring--cooldown { opacity: 1; transform: scale(1); }
.call-ring--cooldown { --ring: 239, 68, 68; --ring-hi: #ef4444; --ring-lo: #fee2e2; }
.call-ring--cooldown::before { animation-duration: 2.2s; }
@keyframes call-ring-spin { to { transform: rotate(360deg); } }
@keyframes call-ring-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .call-ring::before, .call-ring::after { animation: none; } }

/* The live card follows the same colours: green while on, not blue. */
.live-call--live .incoming-call__icon { background: var(--status-success); }
.live-call--live .incoming-call__status { color: var(--status-success); }
.call-live__avatar--answered { background: var(--status-success); box-shadow: 0 0 0 8px rgba(34, 197, 94, .15); }
.call-live__status { color: var(--status-success); }

/* Call note in the live card (the same note as Activity and the Calls page). */
.live-call__note-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border-default); }
.live-call__note-text { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary, #344054); white-space: pre-wrap; overflow-wrap: anywhere; }
.live-call__note { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border-default); }
.live-call__textarea {
    width: 100%; min-height: 72px; padding: 8px 10px; resize: vertical; box-sizing: border-box;
    border: 1px solid var(--am-outline, #d3d6e0); border-radius: var(--am-radius, 4px);
    font: inherit; font-size: 13px; line-height: 1.5; color: var(--text-primary, #101828); background: var(--surface-panel);
}
.live-call__textarea:focus { outline: none; border-color: var(--am-blue, #19213b); box-shadow: var(--am-focus, 0 0 0 3px rgba(25, 33, 59, .22)); }

/* RM-038 trial: Zadarma's web phone widget pins itself to the top left, under
   our header. Bottom left instead, clear of the rail and the live call card.
   !important because the widget sets its own position inline. */
#zdrmWPhI.zdrm-fixed { top: auto !important; bottom: 16px !important; left: 76px !important; right: auto !important; z-index: 260 !important; }
@media (max-width: 760px) { #zdrmWPhI.zdrm-fixed { left: 12px !important; bottom: 12px !important; } }

/* ---- RM-038 web phone: our call buttons drive Zadarma's widget ------------ */
/* Their widget stays on the page (it plays the call audio) but out of sight
   once our buttons have taken over. If they cannot, it shows as before. */
body.am-webphone-bridged #zdrmWPhI.zdrm-fixed {
    left: -10000px !important; bottom: 0 !important; top: auto !important;
    opacity: 0 !important; pointer-events: none !important;
}

.wp-controls { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.live-call__phone { padding: 12px 14px 14px; border-top: 1px solid var(--am-blue-soft, #e6e9f2); }
.call-live__phone { margin: 18px 0 6px; }

.wp-btn {
    display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
    color: var(--am-blue, #19213b);
}
.wp-btn__face {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 50%;
    background: var(--am-blue-tint, #f4f5fa); color: var(--am-blue, #19213b);
    border: 1px solid var(--am-blue-soft, #e6e9f2);
    transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.wp-btn__label { font-size: 11.5px; font-weight: 600; line-height: 1; }
.wp-btn:hover .wp-btn__face { background: var(--am-blue-soft, #e6e9f2); }
.wp-btn:active .wp-btn__face { transform: scale(.94); }
.wp-btn:focus-visible { outline: none; }
.wp-btn:focus-visible .wp-btn__face { box-shadow: var(--am-focus, 0 0 0 3px rgba(25, 33, 59, .22)); }

.wp-btn--on .wp-btn__face { background: var(--am-blue, #19213b); color: var(--text-on-dark); border-color: var(--am-blue, #19213b); }
.wp-btn--muted .wp-btn__face { background: var(--status-warning-tint); color: var(--status-warning); border-color: color-mix(in srgb, var(--status-warning) 30%, transparent); }
.wp-btn--muted .wp-btn__face::after {
    content: ''; position: absolute; width: 22px; height: 2px; background: currentColor;
    transform: rotate(-45deg); border-radius: 2px;
}

.wp-btn--answer .wp-btn__face { background: var(--status-success); border-color: var(--status-success); color: var(--text-on-dark); animation: wp-ring 1.4s ease-in-out infinite; }
.wp-btn--answer:hover .wp-btn__face { background: var(--status-success); border-color: var(--status-success); }
.wp-btn--answer .wp-btn__label { color: var(--status-success); }
.wp-btn--end .wp-btn__face { background: var(--status-danger); border-color: var(--status-danger); color: var(--text-on-dark); }
.wp-btn--end .wp-btn__face svg { transform: rotate(135deg); }
.wp-btn--end:hover .wp-btn__face { background: var(--status-danger); border-color: var(--status-danger); }
.wp-btn--end .wp-btn__label { color: var(--status-danger); }

@keyframes wp-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .45); }
    50% { box-shadow: 0 0 0 8px rgba(18, 183, 106, 0); }
}
@media (prefers-reduced-motion: reduce) { .wp-btn--answer .wp-btn__face { animation: none; } }

.wp-keypad {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    max-width: 240px; margin: 14px auto 0;
}
.wp-keypad__key {
    height: 40px; border-radius: var(--am-radius, 4px); border: 1px solid var(--border-default);
    background: var(--surface-subtle); color: var(--am-blue, #19213b); font-size: 17px; font-weight: 600; cursor: pointer;
}
.wp-keypad__key:hover { background: var(--am-blue-soft, #e6e9f2); }
.wp-keypad__key:active { background: var(--am-blue-soft-hover, #d8dcea); }
.wp-keypad__key:focus-visible { outline: none; box-shadow: var(--am-focus, 0 0 0 3px rgba(25, 33, 59, .22)); }

.wp-transfer { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.wp-transfer__title { margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-align: center; }
.wp-transfer__item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; min-height: 38px; padding: 0 12px; cursor: pointer; font: inherit; text-align: left;
    border: 1px solid var(--am-blue-soft, #e6e9f2); border-radius: var(--am-radius, 4px);
    background: var(--surface-panel); color: var(--am-blue, #19213b);
}
.wp-transfer__item:hover { background: var(--am-blue-tint, #f4f5fa); }
.wp-transfer__item:focus-visible { outline: none; box-shadow: var(--am-focus, 0 0 0 3px rgba(25, 33, 59, .22)); }
.wp-transfer__name { font-size: 13px; font-weight: 600; }
.wp-transfer__ext { font-size: 12px; color: var(--text-secondary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

@media (max-width: 480px) {
    .wp-controls { gap: 10px; }
    .wp-btn__face { width: 48px; height: 48px; }
}

/* The pop-up card: Open call on the left, the round button on the right. */
.live-call__phone-row { display: flex; align-items: center; justify-content: center; gap: 14px; }
.live-call__phone-row .wp-controls { flex: 0 0 auto; }
.live-call__phone-row .am-btn { flex: 1 1 auto; justify-content: center; }
.wp-controls--compact .wp-btn__face { width: 40px; height: 40px; }

/* The dial pad's own browser phone switch (RM-038). */
.dial-pad__phone {
    display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 10px 12px;
    border-radius: var(--am-radius, 4px); background: var(--am-blue-tint, #f4f5fa);
    font-size: 12.5px; color: var(--text-secondary); line-height: 1.4;
}
.dial-pad__phone-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--status-neutral); }
.dial-pad__phone--on .dial-pad__phone-dot { background: var(--status-success); box-shadow: 0 0 0 3px rgba(18, 183, 106, .18); }
.dial-pad__phone--busy .dial-pad__phone-dot { background: var(--am-blue, #19213b); animation: wp-ring 1.4s ease-in-out infinite; }
.dial-pad__phone--warn { background: var(--status-warning-tint); color: var(--status-warning); }
.dial-pad__phone--warn .dial-pad__phone-dot { background: var(--status-warning); }
.dial-pad__phone-text { flex: 1 1 auto; }
.dial-pad__phone-switch {
    flex: 0 0 auto; height: 28px; padding: 0 10px; cursor: pointer; font: inherit; font-weight: 600;
    border: 1px solid var(--am-blue-soft, #e6e9f2); border-radius: var(--am-radius, 4px);
    background: var(--surface-panel); color: var(--am-blue, #19213b);
}
.dial-pad__phone-switch:hover { background: var(--am-blue-soft, #e6e9f2); }
.dial-pad__phone-switch:focus-visible { outline: none; box-shadow: var(--am-focus, 0 0 0 3px rgba(25, 33, 59, .22)); }
.dial-pad__phone-switch:disabled { opacity: .6; cursor: default; }

/* ---- RM-038: who is calling, and the after-call wrap-up in the dial pad ---- */
.live-call--wrapped { display: none !important; }

.call-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 2px; }
.call-link {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 30px; padding: 0 10px;
    border: 1px solid var(--am-blue-soft, #e6e9f2); border-radius: var(--radius-chip, 4px); background: var(--surface-panel);
    color: var(--am-blue, #19213b); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.call-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-link:hover { background: var(--am-blue-tint, #f4f5fa); }
.call-link:focus-visible { outline: none; box-shadow: var(--am-focus, 0 0 0 3px rgba(25, 33, 59, .22)); }

.call-wrapup { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 4px 4px; }
.call-live__avatar--ended { background: var(--status-danger-tint); color: var(--status-danger); }
.call-wrapup__status { color: var(--status-danger); }
.call-wrapup__section { width: 100%; margin-top: 18px; text-align: left; }
.call-wrapup__label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.call-wrapup__linked, .call-wrapup__unlinked {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px;
    border-radius: var(--am-radius, 4px); background: var(--am-blue-tint, #f4f5fa); font-size: 13px; color: var(--text-secondary);
}
.call-wrapup__linked { color: var(--status-success); background: var(--status-success-tint); }
.call-wrapup__linked strong { color: var(--am-blue, #19213b); }
.call-wrapup__unlinked span { flex: 1 1 auto; }
.call-wrapup__change {
    margin-left: auto; padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
    font-weight: 600; color: var(--am-blue, #19213b); text-decoration: underline; text-underline-offset: 2px;
}
.call-wrapup__fields { display: flex; flex-direction: column; gap: 10px; }
.call-wrapup__note { width: 100%; min-height: 96px; }
.call-wrapup__actions { display: flex; justify-content: flex-end; gap: 8px; width: 100%; margin-top: 16px; }
.call-wrapup__actions .am-btn--lg { min-width: 140px; justify-content: center; }

/* Caller record links: stacked rows with a small label (Leone, 18 Oct). */
.call-links { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 8px; width: 100%; margin: 14px 0 4px; }
.call-link {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 50px; padding: 8px 12px;
    border-radius: 5px; text-align: left; font-size: 13px;
}
.call-link__icon {
    flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 5px; background: var(--am-blue-tint, #f4f5fa); color: var(--am-blue, #19213b);
}
.call-link__text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.call-link__label { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.call-link__name { font-size: 14px; font-weight: 600; color: var(--am-blue, #19213b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.call-link__go { flex: 0 0 auto; display: inline-flex; color: var(--text-muted); }
.call-link:hover .call-link__go { color: var(--am-blue, #19213b); }