#bb-drawer { 
  position:absolute;top:0;left:0;height:100%;width:260px;max-width:80vw;
  color:#000;
  background:#fff;box-shadow:2px 0 12px rgba(0,0,0,0.12);z-index:20;
  transform:translateX(-100%);transition:transform 0.25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
  overflow-y:auto;
}
#bb-drawer-close { align-self:flex-end;font-size:1.8em;background:none;border:none;cursor:pointer;color:#000; }

#bb-drawer .title { display: flex; justify-content: space-between; align-items: center; background:linear-gradient(to bottom, #f8faff, #fff); padding:15px;}
#bb-drawer .title p { font-size: 12px; color: #555; margin-top: 4px; font-weight: 400; }
#bb-drawer .title span { font-size:20px; font-weight: 600;}
#bb-drawer .lang_btn button { width: 47%; border:1px solid #e5e7eb;text-align: center; padding:12px 10px; border-radius: 10px;;}

#bb-drawer .bb-lang-btn.active { 
    background: #3b5998;
    color: #fff;
    border-color: #3b5998;
    box-shadow: 0 4px 10px rgba(59, 89, 152, 0.2);
}

#bb-btn {
    position: fixed; bottom: 24px; right: 24px; z-index: 999;
    background: #464646; color: #fff; border: none; border-radius: 50px;
    padding: 11px 18px; font-size: 16px; font-weight: 700; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,.35); transition: background .2s;
    display: flex; align-items: center; gap: 8px;
}
#bb-btn img { height:40px; border-radius:50%; }


#bb-btn:hover { background: #1f6fff; }
#bb-panel {
    position: fixed; bottom: 20px; right: 24px; z-index: 9991;
    width: 600px; height: 90vh; background: #ffffff;
    border-radius: 18px; box-shadow: 0 8px 40px rgba(0,0,0,.22);
    display: none; flex-direction: column; overflow: hidden;
    border:3px solid #e4d9c0;
}

#bb-panel.board { 
    position: relative;
    display:flex;
    right:initial;
    bottom:initial;
    height:80vh;
    width:100%;
}

#bb-head {
    background: #f3edd7; color: #fff; padding: 4px 16px;
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.bb-av {
    width: 38px; height: 45px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    font-size: 22px; flex:1;
}
.bb-av img { width: 38px; object-fit: cover; border-radius: 50%; }
.bb-tw { flex: 1; min-width: 0; }
.bb-tn { display: block; font-weight: 600; font-size: 18px; color:#000; padding-left:5px; }
#bb-wide { display: block; font-size: 18px; color: #555; }

.bb-lang-btn { text-align: left; }
.bb-langs { display: flex; gap:10px; padding-left:10px; }
.bb-langs button {font-size:16px; color:#999; position: relative;}
.bb-langs button.active { color:#000; font-weight: 600;}

/* 와이드 일때 */
.bb-is-wide {
    width: 95% !important;
    height: 95% !important;
    right: 2.5% !important;  /* 좌우 여백을 맞추기 위해 (100-95)/2 */
    bottom: 2.5% !important; /* 위아래 여백 */
    max-width: none !important;
    max-height: none !important;
    border-radius: 15px !important; /* 전체화면 시에도 약간의 곡선 */
    z-index: 999999 !important;     /* 최상단으로 */
}

.bb-is-wide .bb-qgrid {
    transform: none !important; /* 슬라이드 이동 무효화 */
    display: grid !important;   /* 다시 grid로 변경 */
    
    /* [수정] 1fr 대신 max-content 사용: 글자 길이만큼만 칸을 만듦 */
    grid-template-columns: repeat(4, max-content) !important; 
    
    /* [추가] 전체 버튼 뭉치를 가로 방향 '중앙'에 배치 */
    justify-content: center !important; 
    
    gap: 15px !important;       /* 버튼 사이 간격 */
    width: 100% !important;
}


.bb-is-wide .bb-qbtn {
    /* [핵심] 모든 버튼을 동일한 너비로 설정 */
    flex: 0 1 150px !important;         /* 150px 정도가 적당하며, 최대 150px까지만 늘어남 */
    
    width: auto !important;
    text-align: center !important;      /* 글자를 가운데로 */
    justify-content: center !important; /* 아이콘과 글자 뭉치를 가운데로 */
    padding: 10px 15px !important;
    white-space: nowrap !important;     /* 글자 줄바꿈 방지 */
}

/* 확장 모드일 때는 좌우 이동 버튼이 필요 없으므로 숨김 */
.bb-is-wide .nav-btn {
    display: none !important;
}

/* 확장 모드일 때는 뷰포트 제한을 풀어서 다 보이게 함 */
.bb-is-wide .bb-viewport {
    overflow: visible !important;
}


#bb-close {
    background: none; border: none; color: #999; font-size: 24px;
    cursor: pointer; line-height: 1; padding: 0; flex-shrink: 0;
}
#bb-log {
    overflow-y: auto; padding: 12px; min-height: 60px;
    flex-grow: 1; flex-shrink: 1; flex-basis: 0;
    background: #fff;
}
.bb-msg { margin-bottom: 8px; }
.bb-msg-row {
    /* display: inline-flex; */
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 0px;
}
.bb-msg-play {
    border: 0;
    background: transparent;
    color: #4b5563;
    border-radius: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, opacity .15s;
    margin-left:auto;
}
.bb-msg-play:hover {
    background: transparent;
    color: #111827;
    opacity: .9;
}
.bb-msg-play svg {
    width: 30px;
    height: 30px;
    display: block;
}
.bb-msg-play.is-playing {
    background: transparent;
    color: #111827;
}
.bb-bubble {
    display: inline-block; max-width: 100%; padding: 10px 13px;
    border-radius: 14px; line-height: 1.55; white-space: pre-wrap;
    word-break: break-word; font-size: 16px;
}
.bb-msg.bb-user { text-align: right; }
.bb-msg.bb-user .bb-bubble { background: #ebebeb; color: #000; }
.bb-msg.bb-bot .bb-bubble { background: #fff; color: #222; width:100%; /* text-align: center; */ }
.bb-msg.bb-bot .bb-bubble a {
    color: #1f6fff;
    text-decoration: underline;
    word-break: break-all;
}

.bb1-msg.bb1-bot  { display:flex; justify-content:center; align-items: center; height:100%; }
    
.bb1-bubble { text-align:center; display: flex; justify-content: center; align-items: center; flex-direction: column; font-size: 16px; }
.bb1-bubble img { width: 80px; height: 80px; border-radius: 50%; margin-bottom: 10px; object-fit: cover;  }
.bb1-bubble a { display:none;}

.bb-inline-image {
    display: block;
    margin-top: 6px;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

#bb-quick { padding: 0 10px 8px; position: relative; }

.bb-slider-container { display: flex; align-items: center; gap: 5px; }

.bb-viewport { 
    overflow: hidden; /* 넘치는 버튼 숨기기 */
    width: 100%; 
}

.bb-qgrid { 
    display: flex; /* grid 대신 flex */
    gap: 15px; 
    transition: transform 0.3s ease-in-out; /* 부드러운 이동 */
}


.bb-qbtn {
            /* 100% / 2.5 = 40% 이므로, gap을 고려하여 약 40%로 설정 */
            flex: 0 0 calc(37% - 6px); 
            min-width: calc(37% - 6px);
            /* background: #ddd;  */
            border: 1px solid #ddd; 
            border-radius: 10px;
            padding: 10px 8px; 
            font-size: 14px; 
            font-weight: 500; 
            cursor: pointer;
            white-space: nowrap; 
            display: flex;
            align-items: center;
            justify-content: center;
            /* box-shadow: 0 2px 4px rgba(0,0,0,0.02); */
            /* transition: all 0.2s; */
        }

.bb-qbtn1 { color:#000; text-align: left; padding:3px  15px; }

/* 좌우 네비 버튼 스타일 */
.nav-btn {
    background: #f3f4f6; border: none; border-radius: 50%;
    width: 24px; height: 24px; cursor: pointer; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
    color: #666; font-size: 12px; flex-shrink: 0;
}
.nav-btn:hover { background: #e5e7eb; }



.bb-qbtn:hover { background: #f0f4ff; border-color: #1f6fff; color: #1f6fff; }
#bb-input {
    display: flex; gap: 6px; padding: 12px 12px 6px;
    border: 1px solid #d9d9d9; flex-shrink: 0; background: #fff;
    position: relative; flex-direction: column; margin:20px; border-radius: 12px;
}
#bb-q {
    
     padding: 0px; font-size: 13px; outline: none !important; width:100%; margin:0 auto; outline: none; overflow: hidden; resize: none; 
}
#bb-input .bb-input-footer {
    display: flex; justify-content: space-between; align-items: center; 
}
#bb-input .bb-input-footer span { color:#5e5e5e; font-size:12px; }


#bb-q:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important; /* 클릭해도 선 안 생김 */
}

#bb-go {
     border: none; background: #f1f3f5; color: #1a2a6c; border-radius: 50%;
    width: 38px; height: 38px; font-size: 16px; cursor: pointer;
    
}
/* #bb-go:hover { background: #1f6fff; } */


#bb-meta {
    padding: 0 10px 4px;
    color: #6b7280;
    font-size: 11px;
    text-align: center;
}
@media (max-width: 768px) {
    #bb-panel { 
    width: 100vw; 
    height: 100vh; 
    height: 100dvh; 
    left:0; top:0;  border-radius: 0; max-height:none !important; }
    #bb-log { max-height: none !important; }
    #bb-wide { display: none; }
}
/*
#bb-panel {
    position: fixed; bottom: 80px; right: 24px; z-index: 9991;
    width: 420px; max-height: 600px; background: #ffffff;
    border-radius: 18px; box-shadow: 0 8px 40px rgba(0,0,0,.22);
    display: none; flex-direction: column; overflow: hidden;
    height:600px;border:3px solid #e4d9c0;
}
*/