/* SaveWorld FAQ Chat Layer (PC/MO) */

/* ---------- Wing(FAB) ---------- */
.sw-faq-fab{
  position:fixed;
  right:15px;
  bottom:70px; /* backtotop 위 */
  height:46px;
  width:46px;
  border-radius:999px;
  background:#fff;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:1100;
  opacity:0;
  visibility:hidden;
  transform:translateY(15px);
  transition:all .2s linear;
}
.sw-faq-fab.is-visible{opacity:1;visibility:visible;transform:translateY(0);}
.sw-faq-fab i{font-size:18px;color:#2b2b2e;transition:color .2s linear;}
.sw-faq-fab:hover i{color:#cc2300;}
.sw-faq-fab__text{display:none;font-size:13px;font-weight:900;color:#2b2b2e;margin-right:6px;}

@media (min-width:768px){
  .sw-faq-fab{width:46px;overflow:hidden;}
  .sw-faq-fab:hover{
    width:130px;
    justify-content:flex-start;
    padding-left:14px;
    gap:10px;
  }
  .sw-faq-fab__text{display:inline-block;}
}

/* ---------- Overlay ---------- */
.sw-faq-layer{
  position:fixed;
  inset:0;
  z-index:1200;
  display:none;
}
.sw-faq-layer.is-open{display:block;}
.sw-faq-layer__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

/* ---------- Panel ---------- */
.sw-faq-layer__panel{
  position:absolute;
  top:0;
  right:0;
  height:100%;
  width:860px;
  max-width:95vw;
  background:#fff;
  box-shadow:-8px 0 24px rgba(0,0,0,.18);
  transform:translateX(100%);
  transition:transform .25s ease;
  display:flex;
  flex-direction:column;
}
.sw-faq-layer.is-open .sw-faq-layer__panel{transform:translateX(0);}

@media (max-width:767px){
  .sw-faq-layer__panel{width:100%;max-width:100%;}
}

.sw-faq-layer__header{
  padding:14px 14px;
  border-bottom:1px solid #eee;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sw-faq-layer__title{
  font-size:16px;
  font-weight:900;
  color:#111;
}
.sw-faq-layer__actions{
  display:flex;
  align-items:center;
  gap:8px;
}
.sw-faq-layer__close{
  border:0;
  background:transparent;
  font-size:18px;
  color:#2b2b2e;
  cursor:pointer;
}
.sw-faq-layer__close:hover{color:#cc2300;}

.sw-faq-btn{
  border:1px solid #ddd;
  background:#fff;
  color:#2b2b2e;
  border-radius:10px;
  height:34px;
  padding:0 10px;
  font-weight:900;
  font-size:12px;
  cursor:pointer;
}
.sw-faq-btn:hover{
  border-color:#fb8c00;
  color:#cc2300;
}
.sw-faq-btn--ghost{
  background:#fff;
}

/* ---------- Body Layout ---------- */
.sw-faq-layer__body{
  padding:14px;
  flex:1;
  min-height:0;
}
.sw-faq-ui{
  height:100%;
  display:grid;
  grid-template-columns: 1fr 280px;
  gap:14px;
  min-height:0;
}

@media (max-width:767px){
  .sw-faq-ui{
    grid-template-columns: 1fr;
  }
}

/* ---------- Chat (Left) ---------- */
.sw-faq-chat{
  border:1px solid #eee;
  border-radius:16px;
  background:#fff;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.sw-faq-chat__messages{
  padding:14px;
  overflow:auto;
  flex:1;
  min-height:0;
  background:#fafafa;
}

.sw-faq-msg{
  display:flex;
  gap:10px;
  margin-bottom:12px;
}
.sw-faq-msg:last-child{margin-bottom:0;}

.sw-faq-avatar{
  width:28px;
  height:28px;
  border-radius:999px;
  background:#fff;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#cc2300;
  flex:0 0 auto;
}
.sw-faq-bubble{
  max-width:78%;
  padding:10px 12px;
  border-radius:14px;
  line-height:1.55;
  font-size:14px;
  border:1px solid rgba(0,0,0,.06);
  background:#fff;
  color:#2b2b2e;
}
.sw-faq-msg--bot .sw-faq-bubble{
  background:#ffffff;
  border:1px solid rgba(0,0,0,.06);
  border-top-left-radius:6px;
}
.sw-faq-msg--user{
  justify-content:flex-end;
}
.sw-faq-msg--user .sw-faq-avatar{display:none;}
.sw-faq-msg--user .sw-faq-bubble{
  background:#fdf2e6;
  border:1px solid rgba(251,140,0,.35);
  border-top-right-radius:6px;
}

.sw-faq-bubble b{color:#cc2300;}

.sw-faq-chat__composer{
  display:flex;
  gap:8px;
  padding:10px;
  background:#fff;
  border-top:1px solid #eee;
}
.sw-faq-chat__input{
  width:100%;
  height:44px;
  border-radius:12px;
  border:1px solid #ccc;
  padding:0 12px;
  font-size:14px;
  color:#555;
}
.sw-faq-chat__input::placeholder{color:#bbb;}
.sw-faq-chat__input:focus{
  outline:none;
  background:#fdfaf6;
  border-color:#fb8c00;
}
.sw-faq-chat__send{
  width:44px;
  height:44px;
  border-radius:12px;
  border:1px solid #ccc;
  background:#fff;
  color:#666;
  cursor:pointer;
}
.sw-faq-chat__send:hover{
  border-color:#fb8c00;
  color:#cc2300;
}

/* ---------- Suggest Buttons inside chat ---------- */
.sw-faq-suggest{
  margin-top:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sw-faq-suggest__btn{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border:1px solid #ddd;
  border-radius:12px;
  background:#fff;
  color:#2b2b2e;
  cursor:pointer;
  font-size:14px;
}
.sw-faq-suggest__btn:hover{
  border-color:#fb8c00;
  color:#cc2300;
}

/* ---------- Side (Right) ---------- */
.sw-faq-side{
  border:1px solid #eee;
  border-radius:16px;
  background:#fff;
  padding:12px;
  min-height:0;
  overflow:auto;
}
.sw-faq-side__title{
  font-size:13px;
  font-weight:900;
  color:#111;
  margin-bottom:10px;
}
.sw-faq-side__list{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.sw-faq-chip{
  width:100%;
  text-align:left;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid #eee;
  background:#f7f7f7;
  color:#2b2b2e;
  cursor:pointer;
  font-size:13px;
}
.sw-faq-chip:hover{
  border-color:#fb8c00;
  color:#cc2300;
  background:#fff;
}

body.sw-faq-open{overflow:hidden;}

/* 옵션 C: 원형 유지(아이콘 위 + 챗봇 아래) - 모바일에서만 적용 */
@media (max-width: 767px){
  .sw-faq-fab{
    width:56px !important;
    height:56px !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:2px !important;
    padding:4px 0 0 0 !important;
  }

  .sw-faq-fab i{
    font-size:18px !important;
    line-height:1 !important;
  }

  .sw-faq-fab__text{
    display:block !important;
    margin:0 !important;
    font-size:11px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:-0.5px !important;
  }
}

/* 옵션 C: PC도 원형 유지(아이콘 위 + 챗봇 아래) */
@media (min-width: 768px){
  .sw-faq-fab{
    width:56px !important;
    height:56px !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:center !important;
    gap:2px !important;
    padding:4px 0 0 0 !important;
    overflow:visible !important; /* 기존 overflow:hidden 덮기 */
  }

  /* PC에서 hover 확장(날개배너) 제거 */
  .sw-faq-fab:hover{
    width:56px !important;
    justify-content:center !important;
    padding-left:0 !important;
    gap:2px !important;
  }

  .sw-faq-fab__text{
    display:block !important;
    margin:0 !important;
    font-size:11px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:-0.5px !important;
  }
}

/* 모바일 UX 개선: TOP5를 위로 올리고, 높이를 줄여 채팅을 크게 */
@media (max-width: 767px){
  /* 모바일에서는 grid 대신 flex로 전환해서 순서/높이 제어 */
  .sw-faq-ui{
    display:flex !important;
    flex-direction:column !important;
    gap:10px !important;
    height:100% !important;
  }

  /* TOP5를 위로 */
  .sw-faq-side{
    order:1 !important;
    flex:0 0 auto !important;
    max-height:180px;            /* TOP5 영역 높이(원하면 150~220으로 조절) */
    overflow:auto !important;
    padding:10px !important;
  }

  /* 채팅을 아래로 + 남은 공간 다 쓰기 */
  .sw-faq-chat{
    order:2 !important;
    flex:1 1 auto !important;
    min-height:0 !important;
  }

  /* TOP5 제목/칩 조금 더 컴팩트하게 */
  .sw-faq-side__title{
    margin-bottom:8px !important;
    font-size:13px !important;
  }
  .sw-faq-chip{
    padding:8px 10px !important;
    font-size:12px !important;
  }
}

/* 헤더: 타이틀 가운데 + 액션(다시시작/닫기) 오른쪽 고정 */
.sw-faq-layer__header{
  position:relative;
}

/* 액션은 flex 흐름에 남겨서 무조건 오른쪽으로 밀기 */
.sw-faq-layer__actions{
  margin-left:auto;            /* ★ 핵심: 오른쪽으로 고정 */
  position:relative;
  z-index:3;                   /* 타이틀보다 위로 */
}

/* 타이틀은 가운데 배치하되, 액션 영역과 겹치지 않게 폭 제한 */
.sw-faq-layer__title{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:calc(100% - 160px);    /* 액션 버튼 공간 확보(필요시 140~200 조절) */
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  z-index:1;
  pointer-events:none;         /* 타이틀이 버튼 클릭을 방해하지 않게 */
}

/* 모바일에서 버튼이 더 좁으니 폭 조금 더 확보 */
@media (max-width: 767px){
  .sw-faq-layer__title{
    width:calc(100% - 130px);
  }
}

/* 모바일에서는 타이틀을 가운데 고정하지 말고 왼쪽 정렬로 */
@media (max-width: 767px){
  .sw-faq-layer__title{
    position:static !important;     /* absolute 해제 */
    transform:none !important;
    width:auto !important;
    text-align:left !important;
    white-space:normal !important;
    overflow:visible !important;
    pointer-events:auto !important;
  }

  .sw-faq-layer__header{
    justify-content:flex-start !important; /* 타이틀이 왼쪽부터 */
  }

  .sw-faq-layer__actions{
    margin-left:auto !important;    /* 액션은 오른쪽 유지 */
  }
}

/* 모바일 입력창(하단) 폰트/높이 살짝 줄여서 더 보기 편하게 */
@media (max-width: 767px){
  .sw-faq-chat__composer{
    padding:8px !important;
    gap:6px !important;
  }
  .sw-faq-chat__input{
    height:38px !important;
    font-size:12px !important;
    padding:0 10px !important;
    border-radius:10px !important;
  }
  .sw-faq-chat__send{
    width:38px !important;
    height:38px !important;
    border-radius:10px !important;
  }
}

/* 채팅 말풍선 글자 크기 = TOP5 정도로 줄이기 */
.sw-faq-bubble{
  font-size:13px !important;     /* 기존 14px → 13px */
  line-height:1.5 !important;    /* 줄간격도 약간 컴팩트 */
}

/* (선택) 모바일에서는 더 살짝 줄이기 */
@media (max-width: 767px){
  .sw-faq-bubble{
    font-size:13px !important;
    line-height:1.45 !important;
  }
}