:root {
    color-scheme: light;

    --shuya-orange: #f4a261;
    --shuya-orange-deep: #e88d43;
    --shuya-surface: #fffdfb;
    --shuya-text: #292521;
    --shuya-muted: #7c746d;
    --shuya-border: #eadfd5;

    --shuya-font:
        "Trebuchet MS",
        "Segoe UI",
        Arial,
        sans-serif;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
}

body {
    min-height: 100dvh;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 14% 8%,
            rgba(244, 162, 97, 0.15),
            transparent 35%
        ),
        radial-gradient(
            circle at 90% 92%,
            rgba(232, 141, 67, 0.08),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #faf8f5,
            #f1ebe5
        );

    color: var(--shuya-text);
    font-family: var(--shuya-font);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.shuya-page {
    width: 100%;
    min-height: 100dvh;
    padding: 22px;

    display: grid;
    place-items: center;
}

.shuya-chat-card {
    position: relative;

    width: min(920px, 100%);
    height: min(
        830px,
        calc(100dvh - 44px)
    );

    min-height: 580px;

    display: grid;
    grid-template-rows:
        minmax(0, 1fr)
        auto;

    overflow: hidden;

    border:
        1px solid
        rgba(222, 205, 190, 0.86);

    border-radius: 30px;

    background:
        rgba(255, 253, 251, 0.98);

    box-shadow:
        0 28px 72px
            rgba(82, 55, 31, 0.13),
        0 5px 20px
            rgba(82, 55, 31, 0.06);
}

.shuya-chat-stage,
#shuya-chat-mount,
chat-iva {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.shuya-chat-stage {
    position: relative;
    overflow: hidden;
}

chat-iva {
    display: block;
}

.shuya-empty-state {
    position: absolute;
    z-index: 30;
    top: 46%;
    left: 50%;

    width: min(410px, 82%);

    display: grid;
    justify-items: center;
    gap: 14px;

    transform:
        translate(-50%, -50%);

    text-align: center;
    pointer-events: none;

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease;
}

.shuya-empty-state[hidden] {
    display: grid;

    opacity: 0;
    visibility: hidden;

    transform:
        translate(
            -50%,
            calc(-50% + 8px)
        );
}

.shuya-empty-avatar {
    width: 72px;
    height: 72px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 12px 20px
            rgba(217, 123, 54, 0.18)
        );
}

.shuya-empty-title {
    margin: 0;

    color:
        var(--shuya-orange-deep);

    font-size:
        clamp(21px, 3vw, 28px);

    font-weight: 600;
    letter-spacing: 0.01em;
}

.shuya-footer {
    min-height: 43px;
    padding: 10px 18px 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-top:
        1px solid
        rgba(234, 223, 213, 0.78);

    background:
        rgba(255, 253, 251, 0.98);

    color:
        var(--shuya-muted);

    font-size: 12px;
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-align: center;
}

.shuya-footer strong {
    margin-left: 4px;

    color: #c97537;
    font-weight: 650;
}

.shuya-startup-error {
    display: none;

    position: absolute;
    inset: 0;
    z-index: 50;

    place-items: center;

    padding: 30px;

    background:
        var(--shuya-surface);

    color: #333333;
    text-align: center;
}

html[data-shuya-chat-ready="failed"]
.shuya-startup-error {
    display: grid;
}

@media (max-width: 640px) {
    body {
        background:
            var(--shuya-surface);
    }

    .shuya-page {
        padding: 0;
    }

    .shuya-chat-card {
        width: 100%;
        height: 100dvh;
        min-height: 100dvh;

        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .shuya-empty-state {
        top: 44%;
    }

    .shuya-empty-avatar {
        width: 64px;
        height: 64px;
    }

    .shuya-footer {
        min-height: 39px;

        padding-bottom:
            max(
                10px,
                env(safe-area-inset-bottom)
            );
    }
}

@media (
    prefers-reduced-motion:
    reduce
) {
    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }
}

/* SHUYA_FOOTER_LAYOUT_FIX_V1 */
.shuya-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    text-align: center !important;
    line-height: 1.45 !important;
    white-space: normal !important;
}

.shuya-footer > div {
    display: block !important;
    width: 100% !important;
}

.shuya-ai-disclaimer {
    display: block !important;
    font-size: 11px !important;
    opacity: 0.78 !important;
    margin-top: 2px !important;
    line-height: 1.45 !important;
    white-space: normal !important;
}

/* SHUYA_MOBILE_FRIENDLY_UI_V1 */
html,
body {
    max-width: 100%;
    overflow-x: hidden !important;
}

@media (max-width: 640px) {
    html,
    body {
        width: 100% !important;
        min-height: 100dvh !important;
        overflow-x: hidden !important;
    }

    body {
        padding: 0 !important;
        margin: 0 !important;
    }

    .shuya-page,
    .shuya-chat-page,
    .shuya-chat-shell,
    .shuya-chat-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
    }

    .shuya-chat-card,
    .chat-card,
    [class*="chat-card"],
    [class*="chatCard"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }

    .shuya-chat-body,
    .chat-body,
    [class*="chat-body"],
    [class*="messages"],
    [class*="conversation"] {
        min-height: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 8px !important;
    }

    .shuya-composer,
    .chat-composer,
    .input-area,
    [class*="composer"],
    [class*="input-area"] {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 20 !important;
        background: #ffffff !important;
        padding: 8px 10px !important;
        box-sizing: border-box !important;
    }

    input,
    textarea {
        font-size: 16px !important;
    }

    .shuya-footer {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 6px 8px !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
        text-align: center !important;
        white-space: normal !important;
    }

    .shuya-footer > div {
        display: block !important;
        width: 100% !important;
    }

    .shuya-ai-disclaimer {
        display: block !important;
        font-size: 10px !important;
        line-height: 1.35 !important;
        opacity: 0.72 !important;
        margin-top: 1px !important;
        white-space: normal !important;
    }

    html.shuya-mobile-typing .shuya-footer {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
    }
}

/* SHUYA_IOS_KEYBOARD_FOOTER_FIX_V1 */
@media (max-width: 768px) {
    html.shuya-mobile-typing .shuya-footer,
    html.shuya-keyboard-open .shuya-footer,
    body.shuya-mobile-typing .shuya-footer,
    body.shuya-keyboard-open .shuya-footer {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    html.shuya-keyboard-open,
    body.shuya-keyboard-open {
        overflow: hidden !important;
    }

    html.shuya-keyboard-open .shuya-chat-card,
    body.shuya-keyboard-open .shuya-chat-card {
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    html.shuya-keyboard-open .shuya-composer,
    body.shuya-keyboard-open .shuya-composer,
    html.shuya-keyboard-open .chat-composer,
    body.shuya-keyboard-open .chat-composer,
    html.shuya-keyboard-open [class*="composer"],
    body.shuya-keyboard-open [class*="composer"] {
        position: sticky !important;
        bottom: 0 !important;
        z-index: 999 !important;
        background: #ffffff !important;
    }
}

/* SHUYA_FOUR_LANGUAGE_WELCOME_V1 */
.shuya-empty-language {
    margin: 0;

    color: var(--shuya-muted);

    font-size:
        clamp(13px, 1.8vw, 15px);

    font-weight: 600;
    letter-spacing: 0.04em;
}

.shuya-empty-subtitle {
    width: min(390px, 100%);
    margin: 0;

    color: var(--shuya-muted);

    font-size:
        clamp(13px, 1.9vw, 15px);

    line-height: 1.55;
    text-wrap: balance;
}

@media (max-width: 640px) {
    .shuya-empty-state {
        width: min(360px, 86%);
        gap: 11px;
    }

    .shuya-empty-subtitle {
        font-size: 13px;
        line-height: 1.5;
    }
}