*{
    box-sizing:border-box
}

:root{
    --blue:#0874d1;
    --deep:#082e59;
    --text:#122a43;
    --muted:#75879a;
    --line:#e2ebf3;
}

html,
body{
    margin:0;
    min-height:100%;
    font-family:
        Pretendard,
        "Noto Sans KR",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    color:var(--text);
    background:
        radial-gradient(
            circle at 50% -10%,
            #dff3ff,
            transparent 32%
        ),
        #f7fbfe;
}

.ai-header{
    height:74px;
    padding:0 25px;
    display:flex;
    align-items:center;
    gap:15px;
    border-bottom:1px solid rgba(12,82,140,.08);
    background:rgba(255,255,255,.83);
    backdrop-filter:blur(20px);
}

.ai-header .back{
    width:42px;
    height:42px;
    border:1px solid var(--line);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--deep);
    text-decoration:none;
}

.ai-header strong,
.ai-header span{
    display:block
}

.ai-header strong{
    font-size:15px
}

.ai-header span{
    margin-top:2px;
    color:#8797a8;
    font-size:10px
}

.ai-header i{
    width:8px;
    height:8px;
    margin-left:auto;
    border-radius:50%;
    background:#32d595;
    box-shadow:0 0 10px #32d595
}

.ai-shell{
    width:min(850px,calc(100% - 30px));
    margin:0 auto;
    padding:55px 0 130px
}

.ai-welcome{
    text-align:center
}

.ai-orb{
    width:84px;
    height:84px;
    margin:auto;
    padding:5px;
    border-radius:28px;
    background:
        linear-gradient(
            135deg,
            #35c3ff,
            #0765cb
        );
    box-shadow:
        0 18px 40px rgba(7,104,197,.22)
}

.ai-orb b{
    width:100%;
    height:100%;
    border:1px solid rgba(255,255,255,.4);
    border-radius:23px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:25px
}

.ai-welcome h1{
    margin:24px 0 10px;
    font-size:35px;
    letter-spacing:-.055em
}

.ai-welcome p{
    margin:0 auto;
    max-width:510px;
    color:var(--muted);
    font-size:14px;
    line-height:1.75
}

.suggestions{
    margin-top:28px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px
}

.suggestions button{
    padding:10px 15px;
    border:1px solid #d9e7f2;
    border-radius:22px;
    color:#4e6981;
    background:rgba(255,255,255,.8);
    cursor:pointer
}

.conversation{
    margin-top:40px
}

.msg{
    margin:20px 0;
    display:flex
}

.msg.user{
    justify-content:flex-end
}

.bubble{
    max-width:78%;
    padding:16px 19px;
    border-radius:21px;
    font-size:14px;
    line-height:1.75;
    white-space:pre-wrap
}

.user .bubble{
    color:#fff;
    border-radius:21px 21px 5px 21px;
    background:
        linear-gradient(
            135deg,
            #1389e6,
            #0863bd
        )
}

.assistant .bubble{
    border:1px solid #e1ebf3;
    border-radius:5px 21px 21px 21px;
    background:#fff;
    box-shadow:
        0 8px 25px rgba(18,71,110,.05)
}

.source-title{
    margin-bottom:11px;
    color:#1180d5;
    font-size:10px;
    font-weight:800
}

.source-links{
    margin-top:16px;
    display:flex;
    flex-wrap:wrap;
    gap:7px
}

.source-links a{
    padding:8px 12px;
    border-radius:17px;
    color:#126cb7;
    background:#edf7ff;
    text-decoration:none;
    font-size:10px;
    font-weight:700
}

.thinking{
    display:flex;
    gap:5px
}

.thinking i{
    width:6px;
    height:6px;
    border-radius:50%;
    background:#5fa9df;
    animation:pulse 1s infinite
}

.thinking i:nth-child(2){
    animation-delay:.15s
}

.thinking i:nth-child(3){
    animation-delay:.3s
}

@keyframes pulse{
    0%,100%{opacity:.2}
    50%{opacity:1}
}

.composer{
    position:fixed;
    z-index:20;
    left:50%;
    bottom:40px;
    width:min(800px,calc(100% - 30px));
    height:64px;
    padding:7px 7px 7px 23px;
    display:flex;
    border:1px solid rgba(19,97,161,.13);
    border-radius:34px;
    background:rgba(255,255,255,.95);
    box-shadow:
        0 20px 60px rgba(18,70,110,.16);
    backdrop-filter:blur(20px);
    transform:translateX(-50%)
}

.composer input{
    min-width:0;
    flex:1;
    border:0;
    outline:0;
    color:#213c54;
    background:transparent;
    font-size:14px
}

.composer button{
    width:50px;
    height:50px;
    border:0;
    border-radius:50%;
    color:#fff;
    background:
        linear-gradient(
            135deg,
            #1494ed,
            #075fbe
        );
    font-size:23px;
    cursor:pointer
}

.disclaimer{
    position:fixed;
    left:0;
    right:0;
    bottom:10px;
    color:#91a0ad;
    text-align:center;
    font-size:9px
}

@media(max-width:600px){

    .ai-shell{
        padding-top:38px
    }

    .ai-welcome h1{
        font-size:28px
    }

    .ai-welcome p{
        font-size:12px
    }

    .suggestions{
        justify-content:flex-start;
        overflow-x:auto;
        flex-wrap:nowrap;
        scrollbar-width:none
    }

    .suggestions button{
        flex:0 0 auto;
        font-size:11px
    }

    .bubble{
        max-width:89%;
        font-size:13px
    }

    .composer{
        bottom:30px;
        height:58px
    }

    .composer button{
        width:44px;
        height:44px
    }

}


/* =========================================================
   GJH AI MOBILE SAFE AREA FINAL
   - 좌우 여백
   - 하단 모바일 네비게이션 겹침 방지
   - iPhone/Android safe-area 대응
   ========================================================= */

@media (max-width:767px){

    /*
     * AI 전체 패널
     * 하단 mobile nav 약 68px + safe area 확보
     */
    .ai-drawer,
    .gjh-ai-drawer,
    .ai-panel,
    .gjh-ai-panel{
        padding-bottom:
            calc(82px + env(safe-area-inset-bottom, 0px))
            !important;
    }


    /*
     * 대화 본문 좌우 여백
     */
    .ai-body,
    .gjh-ai-body,
    .ai-content,
    .gjh-ai-content,
    .ai-messages,
    .gjh-ai-messages{
        box-sizing:border-box !important;

        width:100% !important;

        padding-left:16px !important;
        padding-right:16px !important;

        margin-left:0 !important;
        margin-right:0 !important;
    }


    /*
     * 첫 안내 카드 / 메시지 카드
     * 화면 모서리에 붙지 않도록
     */
    .ai-message,
    .gjh-ai-message,
    .ai-welcome,
    .gjh-ai-welcome,
    .ai-intro,
    .gjh-ai-intro{
        box-sizing:border-box !important;

        max-width:100% !important;

        margin-left:0 !important;
        margin-right:0 !important;
    }


    /*
     * 추천 질문 영역
     */
    .ai-suggestions,
    .gjh-ai-suggestions,
    .ai-chips,
    .gjh-ai-chips{
        box-sizing:border-box !important;

        width:100% !important;

        padding-left:16px !important;
        padding-right:16px !important;

        margin-left:0 !important;
        margin-right:0 !important;
    }


    /*
     * 하단 입력창
     *
     * 모바일 하단 네비게이션 위에 위치
     */
    .ai-composer,
    .gjh-ai-composer,
    .ai-input-wrap,
    .gjh-ai-input-wrap{
        position:fixed !important;

        left:12px !important;
        right:12px !important;

        bottom:
            calc(78px + env(safe-area-inset-bottom, 0px))
            !important;

        width:auto !important;

        margin:0 !important;

        box-sizing:border-box !important;

        z-index:10030 !important;

        border-radius:18px !important;
    }


    /*
     * 입력 필드가 부모보다 튀어나오지 않게
     */
    .ai-composer input,
    .ai-composer textarea,
    .gjh-ai-composer input,
    .gjh-ai-composer textarea,
    .ai-input-wrap input,
    .ai-input-wrap textarea,
    .gjh-ai-input-wrap input,
    .gjh-ai-input-wrap textarea{
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box !important;
    }


    /*
     * 실제 대화가 입력창 뒤에 가려지지 않게
     */
    .ai-messages,
    .gjh-ai-messages{
        padding-bottom:
            calc(115px + env(safe-area-inset-bottom, 0px))
            !important;
    }

}


/*
 * 작은 모바일
 */
@media (max-width:420px){

    .ai-body,
    .gjh-ai-body,
    .ai-content,
    .gjh-ai-content,
    .ai-messages,
    .gjh-ai-messages,
    .ai-suggestions,
    .gjh-ai-suggestions,
    .ai-chips,
    .gjh-ai-chips{
        padding-left:14px !important;
        padding-right:14px !important;
    }

    .ai-composer,
    .gjh-ai-composer,
    .ai-input-wrap,
    .gjh-ai-input-wrap{
        left:10px !important;
        right:10px !important;
    }

}