/* ============================================================ */
/* 채팅 트리거 버튼 카드 스타일                                  */
/* 파일명 : css/chat-trigger.css                                 */
/* 역할   : 특정 키워드 입력 시 채팅창에 나타나는 탭+버튼 카드     */
/* ============================================================ */
 
.trigger-card{
    box-sizing:border-box;
    min-width:0;
    align-self:flex-start;
    color:var(--color-text-base-primary);
    font-weight:var(--font-weight-medium);
    line-height:var(--line-height-body);
    width:50%;
    background:var(--color-container-base-primary);
    border:var(--border-width-default) solid var(--color-border-base-low);
    border-radius:var(--radius-medium);
    padding:var(--spacing-component-y-14) var(--spacing-component-x-16);
}
 
/* ---- 상단 탭 (상품학습 / TEST / AI R/P) ---- */
.trigger-tabs{
    display:flex;

    margin-bottom:var(--spacing-gap-12);
}
.trigger-tab{
    flex:1;
    min-width:0;
    font-family:inherit;
    line-height:var(--line-height-body);
    border:var(--border-width-default) solid var(--color-border-base-low);
    background:var(--color-container-base-primary);
    color:var(--color-text-base-primary);
    font-size:var(--font-size-14);
    font-weight:var(--font-weight-bold);
    padding:var(--spacing-component-y-8) 0;
    border-radius:var(--radius-small);
    cursor:pointer;
}
.trigger-tab.is-active{
    border-color:var(--color-border-brand-primary);
    background:var(--color-container-brand-secondary);
    color:var(--color-text-brand-primary);
}
 
/* ---- 하단 콘텐츠 카드 묶음 ---- */
.trigger-title{
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-brand-primary);
    margin-bottom:var(--spacing-gap-10);
}
.trigger-grid{
    display:flex;

}
.trigger-item{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;

    border:var(--border-width-default) solid var(--color-border-base-low);
    border-radius:var(--radius-medium);
    padding:var(--spacing-component-y-12) var(--spacing-component-x-8);
    background:var(--color-container-base-primary);
    cursor:pointer;
    text-align:center;
}
.trigger-item:hover{
    border-color:var(--color-border-brand-primary);
}
.trigger-item-name{
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-base-primary);
}
.trigger-item-status{
    font-size:var(--font-size-12);
    font-weight:var(--font-weight-bold);
    color:var(--color-text-brand-primary);
}
/* flex 간격은 Chrome 83에서도 적용되도록 margin으로 지정합니다. */
.trigger-tabs > * + *{margin-left:var(--spacing-gap-6);
}
.trigger-grid > * + *{margin-left:var(--spacing-gap-8);
}
.trigger-item > * + *{margin-top:var(--spacing-gap-8);
}
.trigger-tab:hover,.trigger-item:hover{background:var(--color-state-light-hover);
}
.trigger-tab.is-active:hover{background:var(--color-container-brand-secondary);
}
.trigger-tab:active,.trigger-item:active{background:var(--color-state-light-pressed);
}
.trigger-tab:focus-visible,.trigger-item:focus-visible{
    outline:var(--border-width-focus) solid var(--color-border-brand-primary);
    outline-offset:var(--spacing-gap-2);
}

@media (max-width:767px){
    .trigger-card{
        width:100%;
        padding:var(--spacing-component-y-14) var(--spacing-component-x-12);
    }
    .trigger-tab{
        min-height:44px;
        white-space:nowrap;
    }
    .trigger-grid{
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:var(--spacing-gap-8);
    }
    .trigger-grid > * + *{margin-left:0;}
    .trigger-item{
        min-width:0;
        min-height:48px;
        justify-content:center;
        box-sizing:border-box;
    }
    .trigger-item-name{word-break:keep-all;}
}