/* Chat Connect code-entry — Leonardo blue (logo cyan → royal), phone portrait frame */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    background: linear-gradient(145deg, #0a1628 0%, #0d1f35 45%, #102840 100%);
    color: #fff;
    color-scheme: dark;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    --cc-phone-max-w: 420px;
    --cc-phone-max-h: 780px;
    --cc-phone-w-over-h: 0.461538;
    --cc-viewport-w: calc(100vw - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    --cc-viewport-h: calc(
        100dvh - 48px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)
    );
    --cc-shell-w: min(
        var(--cc-phone-max-w),
        var(--cc-viewport-w),
        calc(var(--cc-viewport-h) * var(--cc-phone-w-over-h))
    );
    --cc-shell-h: min(
        var(--cc-phone-max-h),
        var(--cc-viewport-h),
        calc(var(--cc-shell-w) * 19.5 / 9)
    );
    --cc-blue-bright: #00b8f0;
    --cc-blue-mid: #0088cc;
    --cc-blue-deep: #005a9e;
    --cc-blue-glow: rgba(0, 184, 240, 0.35);
}

.cc-shell {
    width: var(--cc-shell-w);
    max-width: var(--cc-shell-w);
    height: var(--cc-shell-h);
    min-height: var(--cc-shell-h);
    max-height: var(--cc-shell-h);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: rgba(10, 22, 40, 0.94);
    border: 2px solid rgba(0, 136, 204, 0.55);
    border-radius: 16px;
    box-shadow:
        0 0 0 1px rgba(0, 184, 240, 0.22),
        0 0 28px rgba(0, 136, 204, 0.24),
        0 16px 48px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(12px);
    padding: clamp(18px, 4vw, 28px) clamp(16px, 4vw, 20px) clamp(12px, 2.5vw, 18px);
    overflow: hidden;
}

.cc-upper {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.cc-logo-wrap {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: clamp(18px, 3.5vh, 28px);
}

.cc-logo {
    display: block;
    max-width: min(480px, calc(var(--cc-shell-w) * 0.92));
    max-height: clamp(96px, 16vh, 144px);
    width: auto;
    height: auto;
    object-fit: contain;
}

.cc-header {
    text-align: center;
    margin-bottom: clamp(12px, 2.5vh, 20px);
    flex-shrink: 0;
}

.cc-header[hidden] {
    display: none !important;
}

.cc-header h1 {
    font-size: clamp(18px, 4.5vw, 22px);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #b8e8ff;
    margin-bottom: 8px;
}

.cc-header p {
    font-size: clamp(12px, 3.2vw, 14px);
    line-height: 1.5;
    color: #9ec8e8;
}

.cc-status {
    text-align: center;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    line-height: 1.45;
    flex-shrink: 0;
}

.cc-status.connecting {
    background: rgba(0, 136, 204, 0.2);
    color: #b8e8ff;
    border: 1px solid rgba(0, 184, 240, 0.32);
}

.cc-status.error {
    background: rgba(120, 32, 48, 0.35);
    color: #ffb8c8;
    border: 1px solid rgba(200, 80, 100, 0.45);
}

/* Bottom keyboard band — Ready chip (guest flow parity) */
.cc-keyboard-band {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%;
    margin-top: auto;
    padding-top: clamp(8px, 2vh, 14px);
}

.cc-keyboard-band-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(8px, 1.8vh, 12px);
    width: 100%;
}

.cc-aha-brand {
    display: flex;
    justify-content: center;
    width: 100%;
}

.cc-aha-logo {
    display: block;
    max-width: min(200px, 68%);
    max-height: clamp(28px, 4.5vh, 40px);
    width: auto;
    height: auto;
    object-fit: contain;
    opacity: 0.88;
}

.cc-ready-row {
    --cc-ready-wing: clamp(28px, 8vw, 36px);
    --cc-ready-chip-h: clamp(34px, 5.5vh, 40px);
    display: grid;
    grid-template-columns: var(--cc-ready-wing) minmax(0, 1fr) var(--cc-ready-wing);
    align-items: center;
    width: 100%;
    gap: 8px;
}

.cc-ready-wing {
    width: var(--cc-ready-wing);
    height: var(--cc-ready-wing);
}

.cc-ready-chip {
    grid-column: 2;
    width: 100%;
    min-height: var(--cc-ready-chip-h);
    max-height: var(--cc-ready-chip-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid transparent;
}

.cc-ready-chip.ready {
    background: rgba(0, 136, 204, 0.14);
    color: #9ec8e8;
    border-color: rgba(0, 136, 204, 0.28);
}

.cc-ready-chip.connecting {
    background: rgba(0, 136, 204, 0.22);
    color: #b8e8ff;
    border-color: rgba(0, 184, 240, 0.32);
}

.cc-ready-chip.connected {
    background: rgba(32, 120, 72, 0.28);
    color: #b8f0c8;
    border-color: rgba(72, 180, 110, 0.38);
}

.cc-ready-chip.error {
    background: rgba(120, 32, 48, 0.35);
    color: #ffb8c8;
    border-color: rgba(200, 80, 100, 0.45);
    font-size: clamp(9px, 2.5vw, 11px);
    letter-spacing: 0.04em;
    text-transform: none;
    max-height: none;
    min-height: var(--cc-ready-chip-h);
    padding: 6px 10px;
}

.cc-form {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.cc-field {
    margin-bottom: clamp(14px, 2.5vh, 20px);
    flex-shrink: 0;
}

.cc-field label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.cc-field-hint {
    margin: 0 0 8px;
    color: rgba(158, 200, 232, 0.78);
    font-size: clamp(13px, 3.5vw, 15px);
    line-height: 1.35;
    letter-spacing: 0.01em;
}

.cc-field input {
    width: 100%;
    padding: clamp(14px, 2.5vh, 16px) 16px;
    border-radius: 10px;
    border: 2px solid rgba(0, 136, 204, 0.42);
    background: rgba(0, 0, 0, 0.35);
    color: #fff;
    font-size: clamp(15px, 4vw, 17px);
    letter-spacing: 0.06em;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cc-field input::placeholder {
    color: rgba(158, 200, 232, 0.52);
    letter-spacing: 0.01em;
    font-size: clamp(13px, 3.6vw, 15px);
}

.cc-field input:focus {
    outline: none;
    border-color: var(--cc-blue-bright);
    box-shadow: 0 0 0 3px var(--cc-blue-glow);
}

.cc-submit {
    width: 100%;
    margin-top: 4px;
    padding: clamp(13px, 2.5vh, 15px) 20px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    background: linear-gradient(180deg, var(--cc-blue-bright) 0%, var(--cc-blue-deep) 100%);
    box-shadow: 0 4px 18px rgba(0, 136, 204, 0.42);
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
    flex-shrink: 0;
}

.cc-submit:hover:not(:disabled) {
    box-shadow: 0 6px 22px rgba(0, 184, 240, 0.45);
}

.cc-submit:active:not(:disabled) {
    transform: translateY(1px);
}

.cc-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.cc-footer {
    margin-top: clamp(10px, 2vh, 20px);
    text-align: center;
    font-size: 11px;
    color: #6a8aa8;
    flex-shrink: 0;
}

.cc-footer a {
    color: #7ec8f0;
    text-decoration: none;
}

.cc-footer a:hover {
    text-decoration: underline;
}

@media (max-height: 640px) {
    .cc-shell {
        padding-top: 14px;
        padding-bottom: 14px;
    }
    .cc-logo-wrap {
        margin-bottom: 12px;
    }
    .cc-logo {
        max-height: clamp(72px, 12vh, 108px);
    }
}

@media (min-width: 521px) {
    .cc-shell {
        margin-left: auto;
        margin-right: auto;
    }
}