/* Call My Ghostwriter — mobile call shell (≤768px) */

/* Author index loads global styles.css (820px min-width). Reset on phone so boot
   #state-loading and call UI center in the viewport before wmb-call-active is set. */
@media (max-width: 768px) {
    html,
    body {
        min-width: 0;
        overflow-x: hidden;
    }

    .auth-wrap {
        width: 100%;
        max-width: 100vw;
    }
}

html.wmb-call-active,
body.wmb-call-active {
    min-width: 0;
    overflow-x: hidden;
}

#call-shell {
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(165deg, #0f172a 0%, #1e1b4b 48%, #312e81 100%);
    color: #f8fafc;
}

/* Phase C2 — Call lives as an overlay above shared phone #app chrome */
#call-shell.call-shell--overlay {
    position: fixed;
    inset: 0;
    z-index: 480;
    width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.call-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.call-shell-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.call-shell-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 650;
    font-size: 0.95rem;
}

.call-shell-desk-link {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #e2e8f0;
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    font-size: 0.78rem;
    cursor: pointer;
}

.call-shell-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 1rem 0.5rem;
}

.call-shell-footer {
    padding: 0.75rem 1rem 1.1rem;
}

.call-shell-vendors {
    font-size: 0.68rem;
    line-height: 1.45;
    color: rgba(226, 232, 240, 0.72);
    text-align: center;
}

.call-shell-idle,
.call-shell-recap,
.call-shell-on-call,
.call-shell-connecting,
.call-shell-processing {
    width: min(100%, 26rem);
    text-align: center;
}

.call-shell-hero-icon {
    font-size: 2.6rem;
    margin-bottom: 0.75rem;
}

.call-shell-title {
    font-size: 1.15rem;
    line-height: 1.45;
    font-weight: 650;
    margin-bottom: 0.65rem;
}

.call-shell-sub,
.call-shell-last-recap,
.call-recap-summary {
    color: rgba(226, 232, 240, 0.82);
    font-size: 0.88rem;
    line-height: 1.55;
    margin-bottom: 1rem;
}

.call-shell-notice {
    color: #fde68a;
    font-size: 0.85rem;
    line-height: 1.45;
    margin-bottom: 0.85rem;
}

.call-reconnect-offer {
    width: 100%;
    max-width: 18rem;
    margin: 0 auto 0.85rem;
}

.call-reconnect-partial {
    font-size: 0.82rem;
    color: rgba(248, 250, 252, 0.88);
    margin: 0 0 0.75rem;
    text-align: center;
    line-height: 1.45;
}

.call-interrupted-notice {
    width: 100%;
    max-width: 18rem;
    margin: 0 auto 0.75rem;
    padding: 0.65rem 0.85rem;
    border-radius: 10px;
    background: rgba(254, 243, 199, 0.14);
    border: 1px solid rgba(253, 230, 138, 0.35);
    color: #fde68a;
    font-size: 0.82rem;
    text-align: center;
    line-height: 1.45;
}

.call-shell-cta--secondary {
    background: transparent;
    color: #e0e7ff;
    border: 1px solid rgba(199, 210, 254, 0.45);
}

.call-shell-idle-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem;
    width: 100%;
    max-width: 18rem;
    margin: 0 auto;
}

.call-shell-idle-actions .call-shell-cta {
    margin: 0;
}

.call-shell-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    max-width: 18rem;
    margin: 0.35rem auto;
    padding: 0.85rem 1.2rem;
    border: none;
    border-radius: 999px;
    background: #4f46e5;
    color: #fff;
    font-size: 1rem;
    font-weight: 650;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(79, 70, 229, 0.35);
}

.call-shell-cta-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.call-shell-cta-label {
    line-height: 1.2;
}

.call-shell-cta--assignments {
    background: rgba(255, 255, 255, 0.08);
    color: #f8fafc;
    border: 1px solid rgba(255, 255, 255, 0.32);
    box-shadow: none;
}

.call-shell-cta--assignments:hover,
.call-shell-cta--assignments:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.45);
}

.call-shell-assignment {
    margin-top: 0.85rem;
    font-size: 0.78rem;
    color: rgba(226, 232, 240, 0.62);
}

.call-shell-secondary {
    display: inline-flex;
    margin-top: 0.5rem;
    background: transparent;
    border: none;
    color: #c7d2fe;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.88rem;
}

.call-shell-pulse {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(129, 140, 248, 0.35);
    animation: call-pulse 1.4s ease-in-out infinite;
}

@keyframes call-pulse {
    0%, 100% { transform: scale(0.92); opacity: 0.65; }
    50% { transform: scale(1.06); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .call-shell-pulse,
    .call-shell-avatar-ring {
        animation: none !important;
    }
    .call-shell-avatar--mic-live .call-shell-avatar-ring--outer,
    .call-shell-avatar--mic-live .call-shell-avatar-ring--mid,
    .call-shell-avatar--mic-live .call-shell-avatar-ring--inner {
        transform: none !important;
    }
}

.call-shell-avatar {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    margin: 0 auto 0.85rem;
    --call-mic-level: 0;
}

.call-shell-avatar-core {
    position: absolute;
    inset: 0.65rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #4338ca;
    font-weight: 700;
    letter-spacing: 0.04em;
    z-index: 2;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}

.call-shell-avatar-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(165, 180, 252, 0.65);
    pointer-events: none;
}

.call-shell-avatar-ring--outer {
    animation: call-ring 2.4s ease-out infinite;
}

.call-shell-avatar-ring--mid {
    inset: 0.35rem;
    border-color: rgba(165, 180, 252, 0.45);
    animation: call-ring 2.4s ease-out infinite 0.35s;
}

.call-shell-avatar-ring--inner {
    inset: 0.55rem;
    border-color: rgba(165, 180, 252, 0.35);
    animation: call-ring 2.4s ease-out infinite 0.7s;
}

.call-shell-avatar--mic-live .call-shell-avatar-ring {
    animation: none;
}

.call-shell-avatar--mic-live .call-shell-avatar-ring--outer {
    transform: scale(calc(1 + var(--call-mic-level) * 0.62));
    opacity: calc(0.22 + var(--call-mic-level) * 0.78);
    border-color: rgba(129, 140, 248, calc(0.35 + var(--call-mic-level) * 0.65));
}

.call-shell-avatar--mic-live .call-shell-avatar-ring--mid {
    transform: scale(calc(1 + var(--call-mic-level) * 0.42));
    opacity: calc(0.18 + var(--call-mic-level) * 0.72);
    border-color: rgba(129, 140, 248, calc(0.28 + var(--call-mic-level) * 0.55));
}

.call-shell-avatar--mic-live .call-shell-avatar-ring--inner {
    transform: scale(calc(1 + var(--call-mic-level) * 0.24));
    opacity: calc(0.14 + var(--call-mic-level) * 0.68);
    border-color: rgba(196, 181, 253, calc(0.25 + var(--call-mic-level) * 0.5));
}

.call-shell-avatar--hearing .call-shell-avatar-core {
    box-shadow: 0 0 0 2px rgba(129, 140, 248, calc(0.15 + var(--call-mic-level) * 0.55));
}

.call-shell-avatar--thinking .call-shell-avatar-core {
    background: #3730a3;
    animation: call-pulse 1.2s ease-in-out infinite;
}

.call-shell-avatar--speaking .call-shell-avatar-core {
    background: #312e81;
    box-shadow: 0 0 18px rgba(129, 140, 248, 0.45);
}

.call-shell-avatar--speaking .call-shell-avatar-ring--outer {
    animation: call-ring 1.6s ease-out infinite;
    border-color: rgba(196, 181, 253, 0.75);
}

@keyframes call-ring {
    0% { transform: scale(0.95); opacity: 0.9; }
    100% { transform: scale(1.25); opacity: 0; }
}

.call-shell-status {
    font-size: 0.92rem;
    color: #cbd5e1;
    margin-bottom: 0.65rem;
}

.call-prompt-chips-wrap {
    margin-bottom: 1.15rem;
    padding: 0 0.35rem;
}

.call-prompt-chips-label {
    margin: 0 0 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(199, 210, 254, 0.72);
    text-align: center;
}

.call-prompt-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
    max-width: 26rem;
    margin: 0 auto;
    width: 100%;
}

.call-prompt-chip {
    width: 100%;
    min-height: 2.85rem;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.3;
    padding: 0.72rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(165, 180, 252, 0.42);
    background: rgba(79, 70, 229, 0.18);
    color: #e0e7ff;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.call-prompt-chip:hover:not(:disabled),
.call-prompt-chip:focus-visible:not(:disabled) {
    background: rgba(99, 102, 241, 0.32);
    border-color: rgba(196, 181, 253, 0.75);
    outline: none;
}

.call-prompt-chip:active:not(:disabled) {
    transform: scale(0.97);
}

.call-prompt-chip:disabled {
    opacity: 0.42;
    cursor: not-allowed;
}

.call-transcript {
    text-align: left;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.call-transcript-toggle {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    color: #c7d2fe;
    padding: 0.55rem 0.75rem;
    font-size: 0.78rem;
    cursor: pointer;
    text-align: left;
}

.call-transcript:not(.expanded) .call-transcript-body {
    display: none;
}

.call-transcript-body {
    max-height: 9rem;
    overflow-y: auto;
    padding: 0.55rem 0.75rem 0.75rem;
}

.call-transcript-row {
    margin-bottom: 0.55rem;
    font-size: 0.82rem;
    line-height: 1.45;
}

.call-transcript-who {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(199, 210, 254, 0.75);
    margin-bottom: 0.15rem;
}

.call-text-fallback {
    display: flex;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
}

.call-text-fallback input {
    flex: 1;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(15, 23, 42, 0.55);
    color: #f8fafc;
    padding: 0.55rem 0.65rem;
    font-size: 0.88rem;
}

.call-text-fallback button {
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 0 0.85rem;
    cursor: pointer;
}

.call-shell-controls {
    display: flex;
    gap: 0.65rem;
    justify-content: center;
}

.call-control {
    border: none;
    border-radius: 999px;
    padding: 0.7rem 1rem;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.call-control--mic {
    width: 2.85rem;
    height: 2.85rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

.call-control--mic-off {
    background: rgba(239, 68, 68, 0.22);
    color: #fecaca;
}

.call-control--end {
    background: #dc2626;
    color: #fff;
}

.call-control--pause {
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
    min-width: 4.5rem;
}

.call-control--paused {
    background: rgba(56, 189, 248, 0.22);
    color: #e0f2fe;
}

.call-approval-sheet {
    text-align: left;
    margin: 1rem 0;
    padding: 0.85rem;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.82rem;
}

.call-approval-sheet ul {
    margin-top: 0.55rem;
    padding-left: 1.1rem;
}

.call-approval-sheet li {
    margin-bottom: 0.55rem;
}

.call-approval-cards {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 0.55rem;
}

.call-approval-card {
    padding: 0.65rem 0.7rem;
    border-radius: 10px;
    background: rgba(15, 23, 42, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.call-approval-q {
    margin: 0 0 0.35rem;
}

.call-approval-a {
    margin: 0 0 0.55rem;
    color: rgba(226, 232, 240, 0.88);
}

.call-approval-actions {
    display: flex;
    gap: 0.45rem;
}

.call-approval-btn {
    flex: 1;
    border: none;
    border-radius: 999px;
    padding: 0.45rem 0.65rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}

.call-approval-btn--approve {
    background: #22c55e;
    color: #052e16;
}

.call-approval-btn--dismiss {
    background: rgba(255, 255, 255, 0.12);
    color: #f8fafc;
}

.call-approval-sheet--done {
    opacity: 0.92;
}

.call-recap-actions {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    margin-top: 1rem;
}

.call-shell-link {
    background: transparent;
    border: none;
    color: rgba(226, 232, 240, 0.72);
    font-size: 0.82rem;
    text-decoration: underline;
    cursor: pointer;
}

.call-recap-list {
    text-align: left;
    margin: 0.75rem 0 1rem;
    padding-left: 1.1rem;
    font-size: 0.86rem;
    color: rgba(226, 232, 240, 0.9);
}

.call-scope-backdrop {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0));
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(2px);
}

.call-scope-sheet {
    width: min(100%, 26rem);
    max-height: min(85vh, 32rem);
    overflow-y: auto;
    text-align: left;
    background: #1e1b4b;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem 1rem 0.75rem 0.75rem;
    padding: 1.15rem 1.1rem 1rem;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.35);
}

.call-scope-title {
    font-size: 1.05rem;
    font-weight: 650;
    margin-bottom: 0.65rem;
}

.call-scope-subtitle {
    font-size: 0.82rem;
    font-weight: 650;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.72);
    margin: 1rem 0 0.45rem;
}

.call-scope-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: rgba(248, 250, 252, 0.95);
}

.call-scope-list--muted {
    color: rgba(226, 232, 240, 0.82);
}

.call-scope-list li + li {
    margin-top: 0.35rem;
}

.call-scope-note {
    margin: 0.85rem 0 1rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: rgba(226, 232, 240, 0.72);
}

.call-scope-dismiss {
    width: 100%;
    max-width: none;
}

/* Studio shell keeps min-width; call mode overrides above */
#a-wrap-studio.a-wrap,
#app.a-wrap {
    min-width: var(--wmb-min-width);
}