/*
 * GAININTER GLOBAL QUESTION UI V1
 * MOTION TUNING LIVE V1.0.0
 * 2026-09-13
 *
 * Visual V5 확정사항을 live에 반영.
 * 기능 로직/Runtime은 별도.
 */

.giq-sr-only{
    position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
    margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
    white-space:nowrap!important;border:0!important
}

/* ------------------------------------------------------------------
 * Launcher: panel과 독립된 fixed element.
 * Desktop 위치는 확정, Mobile top은 실제 홈페이지에서 추후 미세조정 가능.
 * ------------------------------------------------------------------ */
.giq-launcher{
    position:fixed;
    top:92px;
    right:22px;
    z-index:2147483000;
    display:flex;
    align-items:center;
    gap:9px;
    min-height:52px;
    padding:8px 16px 8px 10px;
    border:1px solid rgba(255,255,255,.70);
    border-radius:999px;
    background:linear-gradient(135deg,#0e61bc,#1679dc);
    color:#fff;
    box-shadow:0 10px 28px rgba(13,75,145,.28);
    cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif;
}
.giq-launcher:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 34px rgba(13,75,145,.34)
}
.giq-launcher:focus-visible{outline:3px solid rgba(22,121,220,.26);outline-offset:3px}
.giq-launcher[aria-expanded="true"]{opacity:0;pointer-events:none}
.giq-launcher-icon{
    width:34px;height:34px;flex:0 0 34px;border-radius:50%;
    display:grid;place-items:center;background:rgba(255,255,255,.16)
}
.giq-launcher-icon svg{width:20px;height:20px;fill:currentColor}
.giq-launcher-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.05}
.giq-launcher-text strong{font-size:14px;letter-spacing:-.03em;font-weight:800}
.giq-launcher-text small{font-size:10px;opacity:.82;margin-top:4px;font-weight:500}

/* Backdrop */
.giq-backdrop{
    position:fixed;inset:0;z-index:2147483001;
    background:rgba(7,18,32,.32);
    opacity:0;visibility:hidden;
    transition:opacity .22s ease,visibility .22s ease
}
.giq-backdrop.giq-open{opacity:1;visibility:visible}

/* Main panel */
.giq-panel{
    position:fixed;top:0;right:0;z-index:2147483002;
    width:min(470px,100vw);height:100dvh;
    background:#f7f9fc;
    border-left:1px solid rgba(211,221,232,.85);
    box-shadow:-20px 0 55px rgba(13,31,54,.22);
    transform:translateX(103%);
    transition:transform .28s cubic-bezier(.22,.76,.25,1);
    display:flex;flex-direction:column;overflow:hidden;
    color:#1e2a3b;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif;
    overscroll-behavior:contain
}
.giq-panel.giq-open{transform:translateX(0)}
body.giq-panel-open{overflow:hidden!important}

/* ------------------------------------------------------------------
 * INTRO STATE: large brand panel.
 * V5: bottom spacing enlarged.
 * ------------------------------------------------------------------ */
.giq-intro{
    position:relative;
    flex:0 0 260px;
    padding:30px 30px 40px;
    color:#fff;
    overflow:hidden;
    background:
        radial-gradient(circle at 78% 22%,rgba(255,255,255,.20),transparent 28%),
        linear-gradient(135deg,#1abcf0 0,#147acb 48%,#0d59ae 100%);
    transition:flex-basis .28s ease,padding .28s ease;
}
.giq-intro:after{
    content:"";
    position:absolute;left:-10%;right:-10%;bottom:-42px;height:92px;
    background:rgba(255,255,255,.08);
    transform:rotate(-8deg)
}
.giq-close{
    position:absolute;top:20px;right:20px;z-index:3;
    width:40px;height:40px;border:0;border-radius:50%;
    background:rgba(255,255,255,.17);color:#fff;
    font-size:29px;line-height:1;
    display:grid;place-items:center;cursor:pointer
}
.giq-close:hover{background:rgba(255,255,255,.24)}
.giq-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
.giq-intro-logo{
    position:relative;z-index:2;
    width:74px;height:74px;
    background:#fff;border-radius:50%;
    display:grid;place-items:center;padding:9px;
    box-shadow:0 5px 18px rgba(9,69,133,.15)
}
.giq-intro-logo img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.giq-intro-copy{position:relative;z-index:2;margin-top:18px;max-width:345px}
.giq-intro-copy h2{
    margin:0 0 9px!important;
    color:#fff!important;
    font-size:27px!important;
    line-height:1.2!important;
    font-weight:800!important;
    letter-spacing:-.045em!important
}
.giq-intro-copy p{
    margin:0!important;
    color:#fff!important;
    font-size:15px!important;
    line-height:1.65!important;
    font-weight:560!important
}

/* ------------------------------------------------------------------
 * CONVERSATION STATE:
 * First real query collapses large intro into compact top bar.
 * ------------------------------------------------------------------ */
.giq-panel.giq-conversation-started .giq-intro{
    flex-basis:74px;
    padding:12px 18px;
    display:flex;align-items:center;gap:11px
}
.giq-panel.giq-conversation-started .giq-intro:after{display:none}
.giq-panel.giq-conversation-started .giq-intro-logo{
    width:46px;height:46px;flex:0 0 46px;padding:5px
}
.giq-panel.giq-conversation-started .giq-intro-copy{
    margin:0;padding-right:45px
}
.giq-panel.giq-conversation-started .giq-intro-copy h2{
    margin:0!important;font-size:17px!important
}
.giq-panel.giq-conversation-started .giq-intro-copy p{display:none}
.giq-panel.giq-conversation-started .giq-close{
    top:17px;right:17px;width:38px;height:38px
}

/* Conversation area */
.giq-conversation{
    flex:1 1 auto;
    overflow:auto;
    background:#f7f9fc;
    padding:20px 20px 126px;
    scroll-behavior:smooth
}

/* Initial AI welcome */
.giq-welcome-row,
.giq-message-assistant{
    display:flex;align-items:flex-start;gap:10px;margin:0 0 18px
}
.giq-avatar{
    width:40px;height:40px;flex:0 0 40px;
    border-radius:50%;background:#fff;border:1px solid #dce4ed;
    display:grid;place-items:center;padding:5px
}
.giq-avatar img{display:block;max-width:100%;max-height:100%;object-fit:contain}
.giq-assistant-main{min-width:0;flex:1}
.giq-assistant-name{
    font-size:13px;font-weight:800;color:#26364b;margin:1px 0 7px
}
.giq-assistant-bubble{
    background:#fff;border:1px solid #e0e7ee;
    border-radius:6px 18px 18px 18px;
    padding:15px 16px;
    font-size:14px;line-height:1.70;color:#2a3748;
    box-shadow:0 4px 14px rgba(23,48,76,.035);
    word-break:break-word;white-space:pre-wrap
}
.giq-welcome-bubble{color:#3a485b;font-weight:520}
.giq-privacy-note{
    margin:8px 2px 0;
    display:flex;align-items:center;gap:7px;
    color:#7f8b99;font-size:11.5px;line-height:1.45
}
.giq-privacy-note:before{
    content:"i";flex:0 0 18px;width:18px;height:18px;border-radius:50%;
    display:grid;place-items:center;background:#aeb7c2;color:#fff;
    font-size:11px;font-weight:800
}

/* User */
.giq-message{display:flex;margin:0 0 18px;min-width:0}
.giq-message-user{justify-content:flex-end}
.giq-user-bubble{
    max-width:84%;
    background:linear-gradient(135deg,#1872d6,#0d61c2);
    color:#fff;
    border-radius:19px 19px 5px 19px;
    padding:13px 17px;
    font-size:14px;line-height:1.55;
    word-break:break-word;white-space:pre-wrap;
    box-shadow:0 6px 16px rgba(16,98,193,.10)
}

/* Loading */
.giq-assistant-bubble.giq-loading-bubble{
    width:66px;min-height:43px;
    display:flex;align-items:center;justify-content:center
}
.giq-dots{display:flex;gap:5px;align-items:center;height:16px}
.giq-dots i{
    display:block;width:6px;height:6px;border-radius:50%;
    background:#7890aa;
    animation:giqDots 1.45s infinite ease-in-out
}
.giq-dots i:nth-child(2){animation-delay:.20s}
.giq-dots i:nth-child(3){animation-delay:.40s}
@keyframes giqDots{
    0%,60%,100%{transform:translateY(0);opacity:.5}
    30%{transform:translateY(-4px);opacity:1}
}

/* Scope + sources */
.giq-scope{
    margin:10px 2px 0;
    font-size:12.5px;line-height:1.55;color:#687586
}
.giq-sources{
    margin:12px 0 0 50px;
    border:1px solid #cbdff7;
    border-radius:13px;
    background:linear-gradient(180deg,#f8fbff,#f2f7fd);
    padding:14px 16px 12px
}
.giq-sources-title{
    display:flex;align-items:center;gap:8px;
    margin:0;padding:0 0 9px;
    border-bottom:1px solid #dde9f6;
    font-size:14px;font-weight:850;color:#19375e
}
.giq-sources-title:before{
    content:"";
    width:18px;height:18px;flex:0 0 18px;
    background:
      linear-gradient(#19375e,#19375e) 2px 2px/2px 14px no-repeat,
      linear-gradient(#19375e,#19375e) 14px 2px/2px 14px no-repeat,
      linear-gradient(#19375e,#19375e) 4px 3px/8px 2px no-repeat,
      linear-gradient(#19375e,#19375e) 4px 13px/8px 2px no-repeat;
    border-radius:2px
}
.giq-source-list{
    list-style:decimal!important;
    padding-left:22px!important;
    margin:5px 0 0!important
}
.giq-source-list li{
    margin:0!important;
    padding:8px 0!important;
    border-bottom:1px solid #e0eaf5!important;
    color:#172b45!important
}
.giq-source-list li:last-child{border-bottom:0!important}
.giq-source-list a{
    color:#1268c8!important;
    text-decoration:underline!important;
    text-underline-offset:3px!important;
    font-size:13px!important;
    line-height:1.50!important;
    font-weight:650!important
}
.giq-source-list a:hover{color:#0a56aa!important}
.giq-error{color:#9b2c2c!important}

/* Source provenance note after references */
.giq-provenance{
    margin:12px 0 0 50px;
    display:flex;align-items:center;gap:7px;
    color:#919ba8;font-size:11px;line-height:1.45
}
.giq-provenance:before{
    content:"i";flex:0 0 18px;width:18px;height:18px;border-radius:50%;
    display:grid;place-items:center;background:#aeb7c2;color:#fff;
    font-size:11px;font-weight:800
}

/* Bottom input */
.giq-form{
    position:absolute;left:0;right:0;bottom:0;z-index:4;
    background:linear-gradient(180deg,rgba(247,249,252,.12),#f7f9fc 20%,#f7f9fc 100%);
    border-top:1px solid #e0e6ed;
    padding:9px 16px calc(12px + env(safe-area-inset-bottom))
}
.giq-input-privacy{
    font-size:10.5px;color:#8e99a7;text-align:center;line-height:1.4;margin:0 0 7px
}
.giq-input-row{
    min-height:56px;
    display:flex;align-items:flex-end;gap:7px;
    border:1.5px solid #abc4e2;
    border-radius:29px;
    background:#fff;
    padding:6px 7px 6px 18px;
    box-shadow:0 8px 22px rgba(24,62,104,.07)
}
.giq-input-row:focus-within{
    border-color:#1972d5;
    box-shadow:0 0 0 3px rgba(25,114,213,.09),0 8px 22px rgba(24,62,104,.07)
}
.giq-input-row textarea{
    flex:1;min-width:0;max-height:104px;resize:none;overflow:auto;
    border:0!important;outline:0!important;box-shadow:none!important;
    background:transparent!important;color:#243247!important;
    padding:10px 0 8px!important;margin:0!important;
    font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif!important
}
.giq-input-row textarea::placeholder{color:#9ba6b3}
.giq-send{
    flex:0 0 43px;width:43px;height:43px;
    border:0;border-radius:50%;
    background:linear-gradient(135deg,#1972dc,#0d5ab8);
    color:#fff;display:grid;place-items:center;cursor:pointer
}
.giq-send:disabled{opacity:.48;cursor:default}
.giq-send svg{width:20px;height:20px;fill:currentColor}

/* Mobile */
@media(max-width:720px){
    .giq-launcher{
        top:78px; /* live header 확인 후 필요 시 몇 px 상향 */
        right:12px;
        min-height:48px
    }
    .giq-launcher-icon{width:32px;height:32px;flex-basis:32px}
    .giq-panel{
        top:auto;left:0;right:0;bottom:0;
        width:100%;height:min(92dvh,820px);
        border-radius:22px 22px 0 0;border-left:0;border-top:1px solid #d7e0ea;
        transform:translateY(103%);
        box-shadow:0 -24px 58px rgba(12,33,58,.22)
    }
    .giq-panel.giq-open{transform:translateY(0)}
    .giq-intro{
        border-radius:22px 22px 0 0;
        flex-basis:248px;
        padding:25px 23px 36px
    }
    .giq-intro-copy h2{font-size:25px!important}
    .giq-intro-copy p{font-size:14px!important;line-height:1.62!important}
    .giq-panel.giq-conversation-started .giq-intro{
        flex-basis:68px;
        border-radius:22px 22px 0 0;
        padding:10px 15px
    }
    .giq-panel.giq-conversation-started .giq-intro-logo{
        width:44px;height:44px;flex-basis:44px
    }
    .giq-conversation{padding:18px 15px 122px}
    .giq-sources,.giq-provenance{margin-left:0}
    .giq-form{padding-left:10px;padding-right:10px}
}

@media(prefers-reduced-motion:reduce){
    .giq-panel,.giq-backdrop,.giq-launcher,.giq-intro{transition:none!important}
    .giq-dots i{animation:none!important}
}

/* ==========================================================================
 * GAININTER INTRO FIRST REPLY V1
 * 첫 인트로를 일반 AI 답변처럼 compact하게 표시.
 * ========================================================================== */

.giq-intro-live-box {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin-top: 8px !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.giq-intro-live-answer {
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 14px 16px !important;
    border: 1px solid #dbe3ec !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: #334155 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.62 !important;
    text-align: left !important;
    white-space: normal !important;
}

.giq-intro-live-answer .giq-intro-typed-text {
    display: inline;
}

.giq-intro-thinking {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    height: 20px;
    min-width: 38px;
    vertical-align: middle;
}

.giq-intro-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #8b99aa;
    transform-origin: center;
    animation: giqIntroDotPulse 1.45s ease-in-out infinite;
}

.giq-intro-dot:nth-child(2) {
    animation-delay: .14s;
}

.giq-intro-dot:nth-child(3) {
    animation-delay: .28s;
}

@keyframes giqIntroDotPulse {
    0%, 65%, 100% {
        transform: translateY(0) scale(.9);
        opacity: .55;
    }
    32% {
        transform: translateY(-4px) scale(1.08);
        opacity: 1;
    }
}

@media (max-width: 720px) {
    .giq-intro-live-box {
        margin-top: 6px !important;
        margin-bottom: 8px !important;
    }

    .giq-intro-live-answer {
        padding: 12px 14px !important;
        font-size: 14px !important;
        line-height: 1.58 !important;
        border-radius: 15px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .giq-intro-dot {
        animation: none !important;
    }
}

/* ==========================================================================
 * GAININTER INPUT COMPOSER POLISH V1
 * 2026-09-13
 *
 * 사용자 화면 기준 보정:
 * - 둥근 모서리와 placeholder 사이 좌측 여백 확대.
 * - single-line 입력 상태에서 textarea를 세로 중앙 정렬.
 * - 입력창 높이에 맞춰 글자/placeholder 크기 확대.
 * ========================================================================== */

.giq-input-row {
    align-items: center !important;
    padding-left: 24px !important;
}

.giq-input-row textarea {
    min-height: 24px !important;
    padding: 6px 0 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.giq-input-row textarea::placeholder {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

@media (max-width: 720px) {
    .giq-input-row {
        padding-left: 22px !important;
    }

    .giq-input-row textarea {
        min-height: 24px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    .giq-input-row textarea::placeholder {
        font-size: 16px !important;
    }
}

/* ==========================================================================
 * GAININTER SEARCH SUMMARY SECOND REPLY V1
 * 검색결과 안내를 실제 답변과 분리한 두 번째 AI bubble로 표시.
 * ========================================================================== */

.giq-search-summary-bubble {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

@media (max-width: 720px) {
    .giq-search-summary-bubble {
        margin-top: 8px !important;
        margin-bottom: 8px !important;
    }
}