/*
 * guide.css — 첫 화면 안내 채팅(#shellLanding .gd-*)의 안쪽 모양.
 * 놓는 자리(가운데 정렬, 작성창 아래 고정, 인사말 글꼴, 칩 줄 정렬)는 shell.css 가 맡는다. 색은 tokens.css 토큰만 쓴다.
 * 작성창 수치는 셸 토큰(--shell-*)을 먼저 보고, 토큰이 없으면 괄호 안 기본값을 쓴다.
 * styles.css 없이도 서도록 대기 블록(.gd-wait)은 풀이 대기 블록(.rd-wait)과 같은 모양을 따로 둔다.
 */

.gd .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── 작성창 ──
   테두리 대신 그림자 안의 1px 링으로 선을 긋는다(셸 그림자 토큰이 링을 품는다). 투명 외곽선은 고대비 모드에서 테두리로 드러난다.
   위아래 바깥 여백과 ::after 는 shell.css 가 쓴다(아래 붙이기, 고정된 작성창 밑 바탕 띠) — 여기서는 좌우 가운데만 잡는다. */
.gd-composer{position:relative;display:flex;flex-direction:column;gap:2px;box-sizing:border-box;width:100%;max-width:var(--shell-composer-max, 640px);margin-left:auto;margin-right:auto;
  padding:var(--shell-composer-pad, 8px);border:0;border-radius:var(--shell-composer-r, 14px);outline:1px solid transparent;outline-offset:-1px;
  background:var(--shell-composer-bg, var(--color-bg-elevated));
  box-shadow:var(--shell-composer-shadow, 0 0 0 1px var(--shell-line, var(--color-border-default)));
  transition:box-shadow var(--shell-dur, 200ms) var(--shell-ease, cubic-bezier(.4,0,.2,1)),background-color var(--shell-dur, 200ms) var(--shell-ease, cubic-bezier(.4,0,.2,1))}
body:not(.gd-active) .gd-composer{min-height:var(--shell-composer-min-h, 103px)}
.gd-composer:focus-within{box-shadow:var(--shell-composer-shadow-focus, 0 0 0 1px var(--shell-line-strong, var(--color-border-strong)))}
.gd-composer textarea{display:block;box-sizing:border-box;width:100%;min-height:38px;margin:0;padding:8px 8px 6px;border:0;border-radius:0;outline:none;background:transparent;box-shadow:none;
  resize:none;overflow-y:hidden;-webkit-appearance:none;appearance:none;
  font-family:var(--font-sans);font-size:15px;font-weight:400;line-height:21px;letter-spacing:var(--tracking-body);color:var(--color-text-primary);
  word-break:keep-all;overflow-wrap:break-word}
.gd-composer textarea::placeholder{color:var(--shell-muted, var(--color-text-tertiary));opacity:1}
.gd-row{display:flex;align-items:center;gap:8px;min-height:var(--shell-btn, 32px);margin-top:auto}
.gd-count{margin-left:auto;font-family:var(--font-sans);font-size:var(--text-tiny);font-variant-numeric:tabular-nums;color:var(--color-text-secondary)}
.gd-count:empty{display:none}
.gd-count.max{color:var(--color-text-primary);font-weight:600}

.gd-new,.gd-send{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;
  width:var(--shell-btn, 32px);height:var(--shell-btn, 32px);margin:0;padding:0;border-radius:var(--shell-btn-r, 8px);cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background-color var(--shell-dur, 200ms) var(--shell-ease, cubic-bezier(.4,0,.2,1)),color var(--shell-dur, 200ms) var(--shell-ease, cubic-bezier(.4,0,.2,1)),opacity var(--shell-dur, 200ms) var(--shell-ease, cubic-bezier(.4,0,.2,1))}
.gd-new::before,.gd-send::before{content:"";position:absolute;inset:-6px}   /* 누르는 자리 44px */
.gd-new{border:1px solid var(--shell-line, var(--color-border-default));background:transparent;color:var(--color-text-secondary)}
body:not(.gd-active) .gd-new{visibility:hidden}
.gd-send{margin-left:auto;border:0;background:var(--shell-send-bg, var(--color-accent));color:var(--shell-send-fg, var(--color-text-inverse))}
.gd-count:not(:empty) + .gd-send{margin-left:0}
.gd-send:active:not(:disabled){transform:scale(.94)}
.gd-send:disabled{opacity:.4;cursor:default}
.gd-new svg,.gd-send svg{display:block}
.gd-send svg{width:20px;height:20px}

.gd button:focus-visible{outline:2px solid var(--color-accent-deep);outline-offset:2px}

/* ── 대화 ── */
.gd-thread{display:flex;flex-direction:column;gap:20px}
.gd-msg{box-sizing:border-box;max-width:100%;font-family:var(--font-sans);font-size:var(--text-body);line-height:1.7;letter-spacing:var(--tracking-body);
  color:var(--color-text-primary);word-break:keep-all;overflow-wrap:break-word}
.gd-user{align-self:flex-end;max-width:min(80%, 560px);padding:10px 16px;border-radius:20px 20px 6px 20px;background:var(--color-accent-mist)}
.gd-user .gd-body{white-space:pre-wrap}
.gd-ai{align-self:stretch;padding:0 2px}
.gd-ai .gd-body p{margin:0 0 10px}
.gd-ai .gd-body p:last-child{margin-bottom:0}
.gd-ai strong{font-weight:700;color:var(--color-text-strong)}

/* 답 아래 이동 버튼 */
.gd-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.gd-act{display:inline-flex;align-items:center;gap:9px;min-height:44px;margin:0;padding:0 16px 0 18px;box-sizing:border-box;
  border:1px solid var(--color-border-strong);border-radius:var(--r-pill);background:var(--color-bg-elevated);color:var(--color-accent-ink);
  font-family:var(--font-sans);font-size:var(--text-body-small);font-weight:600;line-height:1.25;text-align:left;word-break:keep-all;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease}
.gd-act::after{content:"";flex:none;width:6px;height:6px;margin-left:1px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg)}

/* 오류/안내 */
.gd-note{margin:0;font-size:var(--text-body-small);line-height:1.6;color:var(--color-text-secondary)}
.gd-note-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.gd-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0 18px;box-sizing:border-box;
  border:1px solid var(--color-border-strong);border-radius:var(--r-pill);background:transparent;color:var(--color-accent-ink);
  font-family:var(--font-sans);font-size:var(--text-body-small);font-weight:600;line-height:1.25;word-break:keep-all;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background-color var(--motion-fast) ease}
.gd-fb{margin-top:14px;padding-top:14px;border-top:1px solid var(--shell-line, var(--color-border-default))}

/* 답변 준비 중 — 점 3개 + 라벨 + 부제 + 진행 막대. 막대 채움은 transform 만 쓴다 */
.gd-wait{padding:4px 0;color:var(--color-text-secondary);font-family:var(--font-sans);text-align:left;word-break:keep-all}
.gd-wait-row{display:flex;align-items:center;gap:10px;font-size:var(--text-body-small);font-weight:600;line-height:1.4}
.gd-wait-tx{color:var(--color-accent-ink)}
.gd-wait-sub{margin:4px 0 0 36px;font-size:var(--text-caption);line-height:1.5}
.gd-wait-bar{max-width:280px;height:3px;margin:12px 0 0 36px;border-radius:999px;background:var(--color-accent-mist);overflow:hidden}
.gd-wait-bar i{display:block;height:100%;border-radius:inherit;background:var(--color-accent);transform:scaleX(0);transform-origin:left center;transition:transform .4s ease}
.gd-wait-dots{flex:none;display:inline-flex;align-items:center;gap:4px}
.gd-wait-dots i{display:block;width:6px;height:6px;border-radius:50%;background:var(--color-accent);opacity:.25;animation:gdDot 1.2s ease-in-out infinite}
.gd-wait-dots i:nth-child(2){animation-delay:.16s}
.gd-wait-dots i:nth-child(3){animation-delay:.32s}
@keyframes gdDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* ── 시작 제안 ── */
.gd-chips{display:flex;flex-wrap:wrap;gap:8px}
#gdChips[hidden],.gd-chips[hidden]{display:none}
.gd-chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin:0;padding:0 18px;box-sizing:border-box;
  border:1px solid var(--shell-line, var(--color-border-default));border-radius:var(--r-pill);background:var(--color-bg-elevated);color:var(--color-text-secondary);
  font-family:var(--font-sans);font-size:var(--text-body-small);font-weight:500;line-height:1.25;word-break:keep-all;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:border-color var(--motion-fast) ease,color var(--motion-fast) ease,background-color var(--motion-fast) ease}

/* 640 미만은 빈 작성창도 한 줄 높이(88px)다 */
@media (max-width:639px){
  body:not(.gd-active) .gd-composer{min-height:88px}
}
@media (max-width:480px){
  .gd-user{max-width:88%}
  .gd-chip{padding:0 15px}
}

@media (prefers-reduced-motion:reduce){
  .gd-wait-dots i{animation:none;opacity:.55}
  .gd-wait-bar i,.gd-composer,.gd-new,.gd-send,.gd-act,.gd-btn,.gd-chip{transition:none}
  .gd-send:active:not(:disabled){transform:none}
}
/* 터치 기기는 16px 미만 글자에 포커스가 가면 화면이 확대된다(iOS/iPadOS) — 데스크톱만 계약 15/21 */
@media (max-width:639.98px),(pointer:coarse){.gd-composer textarea{font-size:16px;line-height:24px}}
/* 호버는 호버가 있는 입력에서만 — 터치에서 탭한 뒤 바탕이 눌린 채 남지 않게 */
@media (hover:hover){
.gd-composer:hover:not(:focus-within):not(:has(button:hover)){box-shadow:var(--shell-composer-shadow-hover, var(--shell-composer-shadow, 0 0 0 1px var(--shell-line, var(--color-border-default))))}
.gd-new:hover{background:var(--shell-row-hover, var(--color-accent-mist));color:var(--color-text-primary)}
.gd-send:hover:not(:disabled){background:var(--color-accent-deep)}
.gd-act:hover{background:var(--color-accent-mist)}
.gd-btn:hover{background:var(--color-accent-mist)}
.gd-chip:hover{border-color:var(--color-border-strong);color:var(--color-text-primary)}
}