/* 뉴스옥션 AI 위젯.
   채널톡 버튼이 오른쪽 아래에 고정이라 그 위에 놓는다. z-index 는 채널톡보다 낮게 둬서
   채널톡을 가리지 않는다 */
/* 버튼. 채널톡 버튼 옆에 나란히 두되 자리는 그 위다.
   bottom 은 JS 가 채널톡을 재서 다시 잡는다(widget.php 의 place).
   여기 값은 그 전까지 쓰는 기본값이다.

   무지개를 쓰되 싼티가 안 나게 하는 방법: 어두운 바탕 위에 **빛처럼** 얹는다.
   원색(빨강·노랑·초록)을 그대로 칠하면 바로 싸구려가 된다. 그래서
   (1) 바탕을 남색에 가까운 검정으로 깔고
   (2) 색은 살짝 낮춘 채도로 크게 번지게 흐려서
   (3) mix-blend-mode:screen 으로 얹고
   (4) 아주 천천히 돌린다(빠르면 유치해진다).
   홀로그램 스티커나 기름막 무지개에 가까운 결이 나온다 */
#naai-btn {
  position: fixed; right: 24px; bottom: 160px; z-index: 9000;
  /* 완전한 원보다 모서리를 둥글린 네모가 낫다는 요청. 62px 에 20px 이면
     각이 살아 있으면서도 딱딱하지 않다 */
  width: 62px; height: 62px; padding: 0; border: 0; border-radius: 20px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(165deg, #1d1a44 0%, #14122f 55%, #0d0b22 100%);
  box-shadow:
    0 12px 26px rgba(14, 10, 45, .42),
    0 3px 8px rgba(14, 10, 45, .32),
    inset 0 0 0 1.5px rgba(255, 255, 255, .16),   /* 유리 테두리. 값싸 보이지 않게 하는 한 줄 */
    inset 0 -6px 12px rgba(0, 0, 0, .45);
  transition: transform .18s cubic-bezier(.2, .8, .3, 1);
  animation: naai-float 3.6s ease-in-out infinite,
             naai-glow 12s ease-in-out infinite;
  overflow: hidden;
  isolation: isolate;
}
/* 올렸을 때는 떠 있는 움직임을 뺀다. 안 빼면 애니메이션이 계속 transform 을 덮어써서
   위로 살짝 떠오르는 효과가 아예 안 보인다 */
#naai-btn:hover {
  animation: naai-glow 12s ease-in-out infinite;
  transform: translateY(-4px) scale(1.05);
}
#naai-btn:active { transform: translateY(0) scale(.97); }

/* 안에서 도는 무지개. 원뿔 기울기를 크게 잡아 흐리면 경계가 사라지고 어른거림만 남는다 */
#naai-btn::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -60%; left: -60%; right: -60%; bottom: -60%;
  background: conic-gradient(from 0deg,
    #ff3d81 0%,   #ff8a3d 13%, #ffd93d 26%, #35d99a 40%,
    #23c1f5 54%,  #5b6bff 68%, #a855f7 82%, #ff3d81 100%);
  filter: blur(7px) saturate(155%);
  mix-blend-mode: screen;
  opacity: 1;
  animation: naai-aurora 12s linear infinite;
}

/* 글자. 뒤에 어두운 그늘을 깔아 어떤 색이 지나가도 흰 글자가 안 묻히게 한다.
   그늘이 없으면 노랑·연두 구간에서 글자가 사라진다 */
.naai-ai {
  position: relative; z-index: 2;
  font-size: 21px; font-weight: 800; letter-spacing: .02em; color: #fff;
  line-height: 1; margin-top: 2px;
  text-shadow:
    0 1px 2px rgba(8, 4, 30, .9),
    0 0 10px rgba(8, 4, 30, .75),
    0 0 22px rgba(8, 4, 30, .55);
}
/* 가운데를 눌러 주는 그늘. 무지개가 가장자리에서 더 튀어 보이는 효과도 같이 난다 */
#naai-btn .naai-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%,
    rgba(8, 4, 30, .62) 0%, rgba(8, 4, 30, .30) 46%, rgba(8, 4, 30, 0) 74%);
}

/* 글자 왼쪽 위에서 반짝이는 별 */
.naai-spark {
  position: absolute; z-index: 3; top: 9px; left: 9px;
  width: 22px; height: 22px; pointer-events: none; overflow: visible;
}
.naai-spark path { transform-origin: center; }
.naai-spark-a { fill: #fff; animation: naai-twinkle 2.6s ease-in-out infinite; }
/* 작은 별은 옅게 둔다. 둘 다 진하면 글자를 가린다 */
.naai-spark-b { fill: rgba(255,255,255,.62); animation: naai-twinkle 2.6s ease-in-out infinite .9s; }

/* 열려 있을 때. 채널톡처럼 같은 자리에서 X 로 바뀐다 */
.naai-x { position: absolute; z-index: 3; width: 24px; height: 24px;
  opacity: 0; transform: rotate(-90deg) scale(.6); transition: opacity .18s, transform .22s; }
#naai-btn.is-open .naai-x { opacity: 1; transform: rotate(0) scale(1); }
#naai-btn.is-open .naai-ai,
#naai-btn.is-open .naai-spark { opacity: 0; transform: scale(.6); transition: opacity .15s, transform .2s; }
/* 열려 있을 때는 눈에 덜 띄게 둔다. 대화창이 주인공이다 */
#naai-btn.is-open {
  background: linear-gradient(160deg, #6b7280 0%, #4b5563 55%, #374151 100%);
  animation: none;
  box-shadow: 0 8px 20px rgba(25, 31, 40, .30), inset 0 0 0 1.5px rgba(255, 255, 255, .18);
}
#naai-btn.is-open::before,
#naai-btn.is-open::after { display: none; }
.naai-ai, .naai-spark { transition: opacity .15s, transform .2s; }

/* 표면을 훑고 지나가는 빛 */
#naai-btn::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 55%;
  left: -70%; z-index: 1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.40), transparent);
  transform: skewX(-18deg);
  animation: naai-sheen 5s ease-in-out infinite;
}

@keyframes naai-aurora {
  from { transform: rotate(0deg)   scale(1);    }
  50%  { transform: rotate(180deg) scale(1.15); }
  to   { transform: rotate(360deg) scale(1);    }
}
/* 바깥으로 번지는 빛도 무지개를 따라 천천히 돈다. 색이 확 튀되 빨리 안 바뀌게 12초를 준다 */
@keyframes naai-glow {
  0%, 100% { box-shadow: 0 12px 26px rgba(14,10,45,.42), 0 0 22px 2px rgba(255,122,168,.38),
                         inset 0 0 0 1.5px rgba(255,255,255,.16), inset 0 -5px 10px rgba(0,0,0,.40); }
  25%      { box-shadow: 0 12px 26px rgba(14,10,45,.42), 0 0 22px 2px rgba(255,224,122,.38),
                         inset 0 0 0 1.5px rgba(255,255,255,.16), inset 0 -5px 10px rgba(0,0,0,.40); }
  50%      { box-shadow: 0 12px 26px rgba(14,10,45,.42), 0 0 22px 2px rgba(142,240,180,.38),
                         inset 0 0 0 1.5px rgba(255,255,255,.16), inset 0 -5px 10px rgba(0,0,0,.40); }
  75%      { box-shadow: 0 12px 26px rgba(14,10,45,.42), 0 0 22px 2px rgba(143,168,255,.42),
                         inset 0 0 0 1.5px rgba(255,255,255,.16), inset 0 -5px 10px rgba(0,0,0,.40); }
}
@keyframes naai-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes naai-sheen {
  0%, 66%  { left: -70%; }
  100%     { left: 130%; }
}
@keyframes naai-twinkle {
  0%, 100% { opacity: 1;   transform: scale(1)   rotate(0deg); }
  45%      { opacity: .45; transform: scale(.78) rotate(-20deg); }
}

/* 움직임을 줄여 달라는 설정을 켜 둔 분에게는 다 멈춘다 */
@media (prefers-reduced-motion: reduce) {
  #naai-btn, #naai-btn::before, #naai-btn::after,
  .naai-spark-a, .naai-spark-b { animation: none; }
  #naai-btn::after { display: none; }
  #naai-btn::before { opacity: .6; }
}
/* ── 대화창 ─────────────────────────────────────────────────────────
   기본 폼을 그대로 두면 싼티가 난다. 세 가지를 손봤다.
   (1) 바탕을 순백 대신 아주 옅은 회색으로 깔아 말풍선이 카드처럼 떠 보이게
   (2) 입력칸 테두리를 칸이 아니라 감싸는 상자에 주고, 파란 기본 포커스 테두리를 없앤다
   (3) 맨 위에 무지개 실선 한 줄로 버튼과 같은 물건임을 알린다 */
#naai-panel {
  position: fixed; right: 24px; bottom: 160px; z-index: 9001;
  display: none; flex-direction: column;
  width: 400px; max-width: calc(100vw - 32px);
  height: 620px; max-height: calc(100vh - 200px);
  background: #f7f8fb;
  border: 1px solid rgba(20, 24, 40, .09);
  border-radius: 20px;
  box-shadow:
    0 24px 60px rgba(18, 22, 40, .20),
    0 6px 16px rgba(18, 22, 40, .10);
  /* 안쪽 모서리는 잘라야 하지만, 뒤로 번지는 자국(::after)은 창 밖으로 퍼져야 한다.
     그래서 창은 자르지 않고 안쪽 조각들이 각자 모서리를 맞춘다 */
  overflow: visible;
}
#naai-panel .naai-head { border-radius: 20px 20px 0 0; }
#naai-panel .naai-foot { border-radius: 0 0 20px 20px; }
#naai-panel > .naai-body { overflow-y: auto; }
/* 창이 뜨는 결.
   튕겨 올라오는 움직임은 가볍고 경박해 보인다. 안개가 걷히듯 열리게 한다.
   세 가지를 겹친다.
   (1) 흐릿한 데서 또렷해진다(blur 14px → 0)
   (2) 아주 조금만 커지면서 올라온다(.985 → 1). 크게 움직이면 다시 튀어 보인다
   (3) 버튼 자리에서 피어오르듯 아래쪽을 기준으로 펴진다(transform-origin)
   길이는 .52초. 짧으면 안개 느낌이 안 나고 길면 답답하다 */
#naai-panel.is-open {
  display: flex;
  transform-origin: 88% 100%;
  animation: naai-mist .52s cubic-bezier(.16, .84, .30, 1) both;
}
@keyframes naai-mist {
  0%   { opacity: 0; filter: blur(14px); transform: translateY(18px) scale(.985); }
  55%  { opacity: 1; }
  100% { opacity: 1; filter: blur(0);    transform: translateY(0)    scale(1);    }
}

/* 물이 흩뿌려지듯 번지는 자국. 창이 뜰 때 한 번만 퍼지고 사라진다.
   창 뒤에서 퍼지므로 글을 가리지 않는다 */
#naai-panel.is-open::after {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side at 78% 88%, rgba(122, 247, 255, .38) 0%, transparent 70%),
    radial-gradient(closest-side at 62% 92%, rgba(168, 85, 247, .34) 0%, transparent 70%),
    radial-gradient(closest-side at 88% 78%, rgba(255, 122, 168, .30) 0%, transparent 70%);
  filter: blur(24px);
  animation: naai-spray .9s ease-out both;
}
@keyframes naai-spray {
  0%   { opacity: 0;   transform: scale(.35) translateY(22%); }
  35%  { opacity: .95; }
  100% { opacity: 0;   transform: scale(1.15) translateY(-6%); }
}

/* 안쪽 내용은 창보다 한 박자 늦게 스며든다. 통째로 나타나면 여전히 툭 튄다 */
#naai-panel.is-open .naai-head,
#naai-panel.is-open .naai-body,
#naai-panel.is-open .naai-chips,
#naai-panel.is-open .naai-foot {
  animation: naai-seep .5s ease-out .12s both;
}
@keyframes naai-seep {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* 움직임을 줄여 달라는 설정을 켜 둔 분에게는 그냥 뜬다 */
@media (prefers-reduced-motion: reduce) {
  #naai-panel.is-open,
  #naai-panel.is-open::after,
  #naai-panel.is-open .naai-head,
  #naai-panel.is-open .naai-body,
  #naai-panel.is-open .naai-chips,
  #naai-panel.is-open .naai-foot { animation: none; }
  #naai-panel.is-open::after { display: none; }
}

/* 맨 위 무지개 실선 */
#naai-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 3;
  background: linear-gradient(90deg,
    #ff3d81, #ff8a3d, #ffd93d, #35d99a, #23c1f5, #5b6bff, #a855f7, #ff3d81);
  background-size: 200% 100%;
  animation: naai-line 9s linear infinite;
}
@keyframes naai-line { from { background-position: 0 0; } to { background-position: 200% 0; } }

.naai-head {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 18px 14px; background: #fff;
  border-bottom: 1px solid rgba(20, 24, 40, .07);
}
.naai-mark {
  width: 34px; height: 34px; border-radius: 11px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%),
    conic-gradient(from 210deg, #ff3d81, #ff8a3d, #ffd93d, #35d99a, #23c1f5, #5b6bff, #a855f7, #ff3d81);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 2px 6px rgba(20, 12, 60, .22);
}
.naai-mark svg { width: 17px; height: 17px; fill: #fff; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.naai-head-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.naai-head-txt b  { font-size: 15px; font-weight: 700; color: #16192a; letter-spacing: -.01em; }
.naai-head-txt em { font-style: normal; font-size: 12px; color: #8b93a7; letter-spacing: -.01em; }

/* 닫기 단추. 큰 화면에서는 무지개 버튼이 X 로 바뀌므로 감춘다 */
.naai-close {
  display: none; margin-left: auto; flex: none;
  width: 36px; height: 36px; border-radius: 12px; border: 0; cursor: pointer;
  background: rgba(20, 24, 40, .06); align-items: center; justify-content: center;
}
.naai-close svg { width: 18px; height: 18px; stroke: #454b60; stroke-width: 2.2; fill: none; stroke-linecap: round; }
/* 화면을 짚으려고 창을 걷었을 때 버튼 옆에 잠깐 뜨는 말풍선 */
.naai-back {
  position: fixed; right: 84px; bottom: 172px; z-index: 9002;
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  background: #16192a; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -.01em;
  box-shadow: 0 8px 22px rgba(18, 22, 40, .28);
  animation: naai-back-in .35s ease-out;
}
.naai-back::after {
  content: ""; position: absolute; right: -6px; top: 50%; margin-top: -6px;
  border: 6px solid transparent; border-left-color: #16192a; border-right: 0;
}
@keyframes naai-back-in { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }

.naai-body {
  flex: 1; overflow-y: auto; padding: 18px 16px 6px;
  font-size: 14px; line-height: 1.8; letter-spacing: -.012em;
  /* 숫자 폭을 고르게 잡는다. 값이 여러 줄 나올 때 자릿수가 어긋나면 지저분하다 */
  font-feature-settings: "tnum" 1, "case" 1;
  scrollbar-width: thin; scrollbar-color: rgba(20,24,40,.18) transparent;
}
.naai-body::-webkit-scrollbar { width: 8px; }
.naai-body::-webkit-scrollbar-thumb { background: rgba(20,24,40,.16); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box; }

/* 비회원 안내. 대화 대신 이것만 뜬다. 버튼은 보여 주되 대화는 회원에게만 연다 */
.naai-guest {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 44px 22px 30px; position: relative;
}
/* 뒤에서 은은하게 도는 무지개. 버튼과 같은 결이라 한 물건으로 읽힌다 */
.naai-guest::before {
  content: ""; position: absolute; left: 50%; top: 26px;
  width: 210px; height: 210px; margin-left: -105px; z-index: 0; pointer-events: none;
  background: conic-gradient(from 0deg,
    #ff3d81, #ff8a3d, #ffd93d, #35d99a, #23c1f5, #5b6bff, #a855f7, #ff3d81);
  filter: blur(46px); opacity: .30; border-radius: 50%;
  animation: naai-aurora 14s linear infinite;
}
.naai-guest > * { position: relative; z-index: 1; }
/* 위쪽 표식. 머리줄 표식과 같은 모양을 크게 쓴다 */
.naai-guest::after {
  content: "AI"; position: absolute; left: 50%; top: 34px; margin-left: -27px; z-index: 1;
  width: 54px; height: 54px; border-radius: 17px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #fff; letter-spacing: .02em;
  background:
    radial-gradient(circle at 34% 26%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(165deg, #1d1a44 0%, #14122f 55%, #0d0b22 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18), 0 8px 20px rgba(14,10,45,.34);
  text-shadow: 0 1px 2px rgba(8,4,30,.9);
}
.naai-guest b {
  margin-top: 76px; font-size: 19px; font-weight: 800; color: #12162b;
  letter-spacing: -.03em;
}
.naai-guest p {
  margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: #737b8d;
  letter-spacing: -.016em;
}
.naai-guest-btn {
  margin-top: 20px; display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 26px; border-radius: 999px; text-decoration: none;
  font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -.01em;
  background: linear-gradient(160deg, #5b6bff 0%, #3b31d6 100%);
  box-shadow: 0 8px 20px rgba(48, 40, 190, .34), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s;
}
.naai-guest-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(48, 40, 190, .42), inset 0 1px 0 rgba(255,255,255,.34);
}
.naai-guest-sub { margin-top: 14px; font-size: 12.5px; color: #98a0b3; }
.naai-guest-sub a { color: #5b6bff; text-decoration: none; font-weight: 600; }
.naai-guest-sub a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .naai-guest::before { animation: none; }
}

.naai-msg { margin-bottom: 14px; }
.naai-msg.me { text-align: right; }
.naai-msg.me span {
  display: inline-block; max-width: 84%; text-align: left;
  padding: 11px 15px; border-radius: 16px 16px 4px 16px;
  letter-spacing: -.014em; font-weight: 500;
  background: linear-gradient(160deg, #4a5bff 0%, #3b31d6 100%);
  color: #fff; white-space: pre-wrap; word-break: break-word;
  box-shadow: 0 3px 10px rgba(48, 40, 190, .22);
}
/* 문단. 사이 여백은 여기서 준다 - 빈 줄 자리에 빈 상자를 끼워 넣었더니
   그 상자가 글 가운데에 하얗게 떠 보였다 */
.naai-para + .naai-para,
.naai-para + .naai-list,
.naai-list + .naai-para { margin-top: 11px; }

/* 굵게. 그냥 굵게만 하면 검은 글 속에 묻힌다. 형광펜처럼 아래를 옅게 깔아
   글줄을 흐트러뜨리지 않으면서 눈에 걸리게 한다 */
.naai-msg.ai strong {
  font-weight: 700; color: #1b1550;
  background: linear-gradient(180deg, transparent 62%, rgba(120, 116, 255, .20) 62%);
  border-radius: 3px; padding: 0 2px; margin: 0 -1px;
}

/* 값과 별점. 눈이 먼저 가야 하는 숫자다 */
.naai-num {
  font-style: normal; font-weight: 700; color: #3b31d6;
  letter-spacing: -.01em; white-space: nowrap;
}

/* 목록. 가운뎃점 대신 작은 점을 직접 찍는다 - 기본 목록표는 여백이 제멋대로다 */
.naai-list { list-style: none; margin: 0; padding: 0; }
.naai-list li {
  position: relative; padding-left: 15px; margin: 5px 0;
}
.naai-list li::before {
  content: ""; position: absolute; left: 2px; top: .68em;
  width: 5px; height: 5px; border-radius: 50%;
  background: linear-gradient(160deg, #7a86ff, #4a3fd6);
  box-shadow: 0 0 0 3px rgba(122, 134, 255, .12);
}
.naai-msg.ai span {
  display: inline-block; max-width: 94%;
  padding: 14px 16px; border-radius: 16px 16px 16px 4px;
  background: #fff; color: #3a4055;
  border: 1px solid rgba(20, 24, 40, .07);
  box-shadow: 0 2px 10px rgba(18, 22, 40, .055);
  word-break: break-word;
}
/* 첫 문단이 답의 요지다. 조금 크고 진하게 둬서 눈이 먼저 닿게 한다.
   뒷 문단은 살짝 옅게 둔다 - 다 같은 굵기면 어디부터 읽을지 알 수 없다 */
.naai-msg.ai .naai-para:first-child {
  font-size: 14.5px; color: #16192a; letter-spacing: -.016em;
}
.naai-msg.ai strong { font-weight: 700; color: #10142a; }
/* 매체 카드. 목록 화면 카드와 같은 결로 만든다 */
.naai-cards { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.naai-card {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: #fff; border: 1px solid rgba(20, 24, 40, .08); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; font-family: inherit;
  box-shadow: 0 1px 4px rgba(18, 22, 40, .04);
  transition: border-color .14s, transform .12s, box-shadow .14s;
}
.naai-card:hover {
  border-color: #6b74ff; transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(70, 60, 210, .12);
}
.naai-card-name  { font-size: 13.5px; font-weight: 700; color: #16192a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.naai-card-rv    { font-size: 12px; color: #98a0b3; flex: none; }
/* 노출 포털. 켜진 것만 색이 들어오고 꺼진 것은 흐리게 둔다 -
   칸을 맞춰야 카드를 세로로 훑을 수 있다(목록 화면과 같은 규칙) */
.naai-card-portal { display: flex; gap: 3px; margin-left: auto; flex: none; }
.naai-p {
  font-style: normal; font-size: 10.5px; font-weight: 700; line-height: 1;
  padding: 3px 5px; border-radius: 5px;
  background: #f1f3f8; color: #c2c8d6;
}
.naai-p.on.naai-p-n { background: #e8f8ee; color: #1aa85a; }
.naai-p.on.naai-p-d { background: #fff6e0; color: #c98a00; }
.naai-p.on.naai-p-g { background: #e9f0fe; color: #2f6fe0; }
.naai-card-price { margin-left: 8px; font-size: 13.5px; font-weight: 800; color: #3b31d6; flex: none; }

.naai-status {
  color: #8b93a7; font-size: 13px; margin: 0 0 12px 4px;
  display: flex; align-items: center; gap: 7px;
}
/* 생각하는 동안 도는 점. 멈춰 있는 글씨만 있으면 죽은 것처럼 보인다 */
.naai-status::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: #6b74ff; animation: naai-dot 1.1s ease-in-out infinite;
}
@keyframes naai-dot {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

/* 예시 단추. 처음 열었을 때만 보인다 */
.naai-chips { display: flex; flex-wrap: wrap; gap: 7px; padding: 2px 16px 12px; }
.naai-chips.is-hidden { display: none; }
.naai-chips button {
  border: 1px solid rgba(20, 24, 40, .10); background: #fff; cursor: pointer;
  border-radius: 999px; padding: 7px 13px; font-size: 12.5px; color: #4a5268;
  font-family: inherit; transition: border-color .15s, color .15s, transform .12s;
}
.naai-chips button:hover { border-color: #6b74ff; color: #3b31d6; transform: translateY(-1px); }

.naai-foot { padding: 10px 14px 14px; background: #f7f8fb; }
/* 테두리를 감싸는 상자에 준다. 칸마다 테두리를 주면 상자 안에 상자가 생겨 지저분하다 */
.naai-compose {
  display: flex; align-items: flex-end; gap: 6px;
  background: #fff; border: 1px solid rgba(20, 24, 40, .12);
  border-radius: 16px; padding: 6px 6px 6px 8px;
  transition: border-color .15s, box-shadow .15s;
}
.naai-compose:focus-within {
  border-color: #6b74ff;
  box-shadow: 0 0 0 3px rgba(107, 116, 255, .14);
}
.naai-compose textarea {
  flex: 1; min-width: 0; border: 0; outline: none; resize: none;
  padding: 8px 4px; font-size: 14px; line-height: 1.5; font-family: inherit;
  color: #1f2438; background: transparent; max-height: 116px;
}
.naai-compose textarea::placeholder { color: #a6adbe; }
.naai-file, .naai-send {
  flex: none; width: 34px; height: 34px; border-radius: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: background .15s, color .15s, opacity .15s;
}
.naai-file { border: 0; background: transparent; color: #97a0b5; }
.naai-file:hover { background: #f1f3f8; color: #4a5268; }
.naai-file svg { width: 18px; height: 18px; }
.naai-send {
  border: 0; color: #fff;
  background: linear-gradient(160deg, #5b6bff 0%, #3b31d6 100%);
  box-shadow: 0 3px 9px rgba(48, 40, 190, .30);
}
.naai-send:hover { filter: brightness(1.08); }
.naai-send:disabled { opacity: .38; box-shadow: none; cursor: default; }
.naai-send svg { width: 17px; height: 17px; margin-left: 1px; }

/* 짚어 줄 때 깜박이는 테두리 */
@keyframes naai-blink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(32, 117, 200, 0); border-color: transparent; }
  50%      { box-shadow: 0 0 0 4px rgba(32, 117, 200, .35); border-color: #2075c8; }
}
.naai-point { animation: naai-blink .7s ease-in-out 3; border: 2px solid #2075c8 !important; border-radius: 14px; }

/* 모바일. 창을 반만 띄웠더니 뒤 화면도 대화도 둘 다 답답했다. 채널톡처럼 화면을
   다 쓰고, 화면을 짚어야 할 때는 창을 걷는다(widget.php 의 hideThenDo).
   bottom 은 자바스크립트가 채널톡 위로 맞추느라 인라인으로 넣으므로 !important 로 이긴다 */
@media (max-width: 640px) {
  #naai-panel {
    top: 0; right: 0; bottom: 0 !important; left: 0;
    /* 사이트 머리(#new-header 9990)와 채널톡(10000000) 위로. 화면을 다 쓰는 창이
       그 밑에 깔리면 머리와 채팅 버튼이 대화 위에 떠 있다 */
    z-index: 10000001;
    width: auto; max-width: none; height: auto; max-height: none;
    border-radius: 0; border: 0;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
  #naai-panel .naai-head { border-radius: 0; padding-top: 14px; }
  #naai-panel .naai-foot { border-radius: 0; }
  #naai-panel.is-open { transform-origin: 50% 100%; }
  #naai-panel.is-open::after { display: none; }
  .naai-close { display: flex; }
  /* 창이 화면을 덮으니 버튼은 창 뒤에 있어도 그만이다. 대신 X 로 바뀐 채 창 위에
     떠 있으면 입력칸을 가리므로 감춘다 */
  #naai-btn.is-open { display: none; }
  .naai-chips button { font-size: 12px; padding: 6px 11px; }
  #naai-btn { right: 16px; width: 56px; height: 56px; border-radius: 18px; }
  .naai-back { right: 80px; z-index: 10000001; }
  .naai-ai { font-size: 19px; }
  .naai-spark { width: 20px; height: 20px; top: 8px; left: 8px; }
}