/* ══════════════════════ 글라스 스킨 (공용 — 실록 코파일럿 패널 · 가장자리 손잡이) ══════════════════════
   카일 2026-09-28 — 「이 스킨 너무 좋은데 코파일럿도 이런 식으로 — 단추 누르는 방식에서 우측 끝에 붙여 놓는
   방식으로 똑같이」. 원본은 문서 엔진 대화 칸의 「글라스 챗」 구역
   (`packages/docengine/editor/threads/threads.css` 끝의 `--de-glass-*` 토큰).

   ⚠️ 토큰 값은 그쪽과 **한 글자도 다르지 않게** 유지한다 — 한쪽을 고치면 다른 쪽도 같이 고칠 것.
      (두 파일을 하나로 합치는 일은 뒤로 미룬 과제. 이름만 `--sk-glass-*` · `.sk-glass-*` 로 따로 둔다 —
       문서 엔진 쪽 `de-` 이름과 부딪히지 않게.)

   Tailwind 빌드를 거치지 않는 손으로 쓴 CSS — 새 유틸리티 클래스를 늘리지 않으려고 여기 둔다.
   어둡게: `data-de-theme="dark"` · 운영체제 어둡게(+ `data-de-theme="light"` 가 아닐 때) — 토큰만 갈아 끼운다.
   움직임은 500ms 이하 · 움직임 줄이기(prefers-reduced-motion)면 끈다. */
:root {
  --sk-glass-bg: linear-gradient(165deg, rgba(255, 255, 255, .62), rgba(244, 242, 255, .42) 55%, rgba(236, 248, 255, .45));
  --sk-glass-border: rgba(255, 255, 255, .75);
  --sk-glass-shadow: 0 20px 60px rgba(30, 40, 80, .18), inset 0 1px 0 rgba(255, 255, 255, .9);
  --sk-glass-blur: blur(26px) saturate(180%);
  --sk-glass-ink: #1f2840;
  --sk-glass-body: #4b5670;
  --sk-glass-sub: #6b7489;
  --sk-glass-meta: #7a8398;
  --sk-glass-accent: #5b4bb0;
  --sk-glass-hover: rgba(255, 255, 255, .55);
  --sk-glass-row: rgba(255, 255, 255, .38);
  --sk-glass-row-open: rgba(255, 255, 255, .82);
  --sk-glass-tab-on: rgba(255, 255, 255, .85);
  --sk-glass-tab-on-ink: #16224a;
  --sk-glass-btn: rgba(255, 255, 255, .6);
  --sk-glass-btn-hover: rgba(255, 255, 255, .95);
  --sk-glass-btn-ink: #2b3350;
  --sk-glass-quote: rgba(255, 255, 255, .55);
  --sk-bubble-me: linear-gradient(135deg, rgba(232, 224, 255, .85), rgba(255, 226, 240, .75));
  --sk-bubble-ai: linear-gradient(135deg, rgba(222, 243, 255, .82), rgba(224, 250, 238, .72));
  --sk-bubble-other: rgba(255, 255, 255, .72);
  --sk-bubble-border: rgba(255, 255, 255, .8);
  --sk-bubble-shadow: 0 4px 14px rgba(60, 60, 120, .08), inset 0 1px 0 rgba(255, 255, 255, .8);
  --sk-bubble-typing: rgba(226, 244, 255, .7);
  --sk-chip-bg: rgba(255, 255, 255, .55);
  --sk-chip-bg-hover: rgba(255, 255, 255, .9);
  --sk-chip-border: rgba(255, 255, 255, .8);
  --sk-chip-ink: #4b5670;
  --sk-input-bg: rgba(255, 255, 255, .72);
  --sk-input-border: rgba(255, 255, 255, .9);
  --sk-input-shadow: 0 6px 20px rgba(40, 50, 90, .1);
  --sk-send-on: #16224a;
  --sk-send-off: rgba(22, 34, 74, .3);
  --sk-orb: conic-gradient(from 200deg, #c9b8ff, #9fdcff, #bff0d8, #ffd6e8, #c9b8ff);
  --sk-handle-bg: rgba(255, 255, 255, .55);
  --sk-handle-dot: linear-gradient(135deg, #b9a8ff, #8fd3ff);
  --sk-aurora-1: rgba(201, 184, 255, .32);
  --sk-aurora-2: rgba(159, 220, 255, .26);
  --sk-aurora-3: rgba(255, 214, 232, .26);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-de-theme="light"]) {
    --sk-glass-bg: linear-gradient(165deg, rgba(22, 28, 38, .72), rgba(28, 26, 44, .62) 55%, rgba(18, 32, 42, .62));
    --sk-glass-border: rgba(255, 255, 255, .1);
    --sk-glass-shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
    --sk-glass-ink: #e4e8ec; --sk-glass-body: #b2b9c2; --sk-glass-sub: #9aa4b5; --sk-glass-meta: #8b95a7; --sk-glass-accent: #c3b6ff;
    --sk-glass-hover: rgba(255, 255, 255, .07); --sk-glass-row: rgba(255, 255, 255, .04); --sk-glass-row-open: rgba(30, 36, 48, .9);
    --sk-glass-tab-on: rgba(255, 255, 255, .14); --sk-glass-tab-on-ink: #e4e8ec;
    --sk-glass-btn: rgba(255, 255, 255, .08); --sk-glass-btn-hover: rgba(255, 255, 255, .16); --sk-glass-btn-ink: #e4e8ec;
    --sk-glass-quote: rgba(255, 255, 255, .07);
    --sk-bubble-me: linear-gradient(135deg, rgba(98, 82, 170, .55), rgba(150, 72, 118, .42));
    --sk-bubble-ai: linear-gradient(135deg, rgba(38, 92, 124, .55), rgba(34, 112, 88, .42));
    --sk-bubble-other: rgba(255, 255, 255, .08); --sk-bubble-border: rgba(255, 255, 255, .1);
    --sk-bubble-shadow: 0 4px 14px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
    --sk-bubble-typing: rgba(38, 92, 124, .45);
    --sk-chip-bg: rgba(255, 255, 255, .08); --sk-chip-bg-hover: rgba(255, 255, 255, .16); --sk-chip-border: rgba(255, 255, 255, .12); --sk-chip-ink: #c9d0da;
    --sk-input-bg: rgba(255, 255, 255, .07); --sk-input-border: rgba(255, 255, 255, .14); --sk-input-shadow: 0 6px 20px rgba(0, 0, 0, .35);
    --sk-send-on: #6d7fd0; --sk-send-off: rgba(109, 127, 208, .35);
    --sk-handle-bg: rgba(30, 36, 48, .72);
    --sk-aurora-1: rgba(120, 100, 220, .16); --sk-aurora-2: rgba(60, 140, 200, .12); --sk-aurora-3: rgba(200, 90, 150, .1);
  }
}
:root[data-de-theme="dark"] {
  --sk-glass-bg: linear-gradient(165deg, rgba(22, 28, 38, .72), rgba(28, 26, 44, .62) 55%, rgba(18, 32, 42, .62));
  --sk-glass-border: rgba(255, 255, 255, .1);
  --sk-glass-shadow: 0 20px 60px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
  --sk-glass-ink: #e4e8ec; --sk-glass-body: #b2b9c2; --sk-glass-sub: #9aa4b5; --sk-glass-meta: #8b95a7; --sk-glass-accent: #c3b6ff;
  --sk-glass-hover: rgba(255, 255, 255, .07); --sk-glass-row: rgba(255, 255, 255, .04); --sk-glass-row-open: rgba(30, 36, 48, .9);
  --sk-glass-tab-on: rgba(255, 255, 255, .14); --sk-glass-tab-on-ink: #e4e8ec;
  --sk-glass-btn: rgba(255, 255, 255, .08); --sk-glass-btn-hover: rgba(255, 255, 255, .16); --sk-glass-btn-ink: #e4e8ec;
  --sk-glass-quote: rgba(255, 255, 255, .07);
  --sk-bubble-me: linear-gradient(135deg, rgba(98, 82, 170, .55), rgba(150, 72, 118, .42));
  --sk-bubble-ai: linear-gradient(135deg, rgba(38, 92, 124, .55), rgba(34, 112, 88, .42));
  --sk-bubble-other: rgba(255, 255, 255, .08); --sk-bubble-border: rgba(255, 255, 255, .1);
  --sk-bubble-shadow: 0 4px 14px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
  --sk-bubble-typing: rgba(38, 92, 124, .45);
  --sk-chip-bg: rgba(255, 255, 255, .08); --sk-chip-bg-hover: rgba(255, 255, 255, .16); --sk-chip-border: rgba(255, 255, 255, .12); --sk-chip-ink: #c9d0da;
  --sk-input-bg: rgba(255, 255, 255, .07); --sk-input-border: rgba(255, 255, 255, .14); --sk-input-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  --sk-send-on: #6d7fd0; --sk-send-off: rgba(109, 127, 208, .35);
  --sk-handle-bg: rgba(30, 36, 48, .72);
  --sk-aurora-1: rgba(120, 100, 220, .16); --sk-aurora-2: rgba(60, 140, 200, .12); --sk-aurora-3: rgba(200, 90, 150, .1);
}

/* ── 가장자리 손잡이(‹ + 빛 점) — 화면 오른쪽 끝에 붙어 있다. 세로 위치는 끌어서 옮길 수 있다(`fabStyle`). ── */
.sk-glass-handle {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 34px; height: 84px; padding: 0; cursor: pointer; user-select: none; touch-action: none;
  border: 1px solid var(--sk-glass-border); border-right: 0; border-radius: 18px 0 0 18px;
  background: var(--sk-handle-bg); color: var(--sk-glass-btn-ink); font: inherit; font-size: 18px;
  -webkit-backdrop-filter: blur(18px) saturate(180%); backdrop-filter: blur(18px) saturate(180%);
  box-shadow: -4px 0 24px rgba(40, 50, 90, .12); transition: width .2s ease-out, background-color .2s ease-out;
}
.sk-glass-handle:hover { width: 40px; background: var(--sk-glass-btn-hover); }
.sk-glass-handle:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
.sk-glass-handle__glyph { line-height: 1; }
.sk-glass-handle__dot { width: 7px; height: 7px; border-radius: 9999px; background: var(--sk-handle-dot); }
@media (prefers-reduced-motion: reduce) { .sk-glass-handle { transition: none; } }
@media print { .sk-glass-handle { display: none !important; } }

/* ── 유리 카드(패널) ─────────────────────────────────────────────────── */
.sk-glass-card {
  background: var(--sk-glass-bg);
  -webkit-backdrop-filter: var(--sk-glass-blur); backdrop-filter: var(--sk-glass-blur);
  border: 1px solid var(--sk-glass-border); border-radius: 24px; box-shadow: var(--sk-glass-shadow);
  color: var(--sk-glass-ink);
}
/* 미끄러져 들어오고 나가기 — Alpine x-transition 에 붙이는 클래스 */
.sk-glass-slide { transition: transform .45s cubic-bezier(.2, .9, .25, 1), opacity .35s ease-out; }
.sk-glass-slide-off { transform: translateX(calc(100% + 40px)); opacity: 0; }
.sk-glass-slide-on { transform: none; opacity: 1; }
.sk-glass-noanim, .sk-glass-noanim.sk-glass-slide { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .sk-glass-slide { transition: none; } }

/* 머리 — 구슬 · 제목/부제 · 둥근 유리 단추 */
.sk-glass-orb {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 9999px;
  background: var(--sk-orb); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7);
}
.sk-glass-title { font-size: 14px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; color: var(--sk-glass-ink); }
.sk-glass-sub { font-size: 11px; color: var(--sk-glass-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-glass-round {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 9999px; cursor: pointer;
  background: var(--sk-glass-btn); color: var(--sk-glass-btn-ink); transition: background-color .15s ease-out;
}
.sk-glass-round:hover { background: var(--sk-glass-btn-hover); }
.sk-glass-round svg { width: 14px; height: 14px; }
.sk-glass-round[aria-pressed="true"] {
  background: var(--sk-glass-tab-on); color: var(--sk-glass-accent); box-shadow: inset 0 0 0 1px rgba(185, 168, 255, .6);
}
.sk-glass-round:focus-visible, .sk-glass-chip:focus-visible, .sk-glass-send:focus-visible { outline: 2px solid #14b8a6; outline-offset: 2px; }
/* 작은 정보 알약(크레딧 등) */
.sk-glass-tag {
  display: inline-flex; align-items: center; flex-shrink: 0; padding: 1px 8px; border-radius: 10px;
  font-size: 10.5px; font-weight: 500; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums;
  background: var(--sk-chip-bg); border: 1px solid var(--sk-chip-border); color: var(--sk-glass-meta);
}
.sk-glass-tag--warn { color: #b45309; }

/* ── 말풍선 — 나(오른쪽 · 보라→분홍) · AI(왼쪽 · 하늘→민트) ─────────────────── */
.sk-glass-msg { display: flex; flex-direction: column; align-items: flex-start; }
.sk-glass-msg--me { align-items: flex-end; }
.sk-glass-meta { max-width: 84%; margin: 0 6px 4px; font-size: 10.5px; font-weight: 500; color: var(--sk-glass-meta); }
.sk-glass-bubble {
  box-sizing: border-box; max-width: 84%; min-width: 0; padding: 9px 13px;
  font-size: 13px; line-height: 1.6; color: var(--sk-glass-ink);
  border-radius: 18px 18px 18px 6px; border: 1px solid var(--sk-bubble-border);
  background: var(--sk-bubble-other); box-shadow: var(--sk-bubble-shadow);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.sk-glass-bubble--me { border-radius: 18px 18px 6px 18px; background: var(--sk-bubble-me); }
.sk-glass-bubble--ai { background: var(--sk-bubble-ai); }
/* 말풍선 안 선택지 · 확인 상자 = 인용 상자(옅은 흰 유리) */
.sk-glass-quote {
  background: var(--sk-glass-quote); border: 1px solid var(--sk-bubble-border); border-radius: 10px;
}
@keyframes sk-glass-bubble-up { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
.sk-glass-enter { animation: sk-glass-bubble-up .45s cubic-bezier(.2, .9, .25, 1) both; }

/* ── 쓰는 중 — 점 셋 말풍선 ───────────────────────────────────────── */
.sk-glass-typing-bubble {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 84%; padding: 9px 13px;
  border-radius: 16px 16px 16px 6px; border: 1px solid var(--sk-bubble-border); background: var(--sk-bubble-typing);
  color: var(--sk-glass-body); font-size: 12px;
}
.sk-glass-typing { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; }
.sk-glass-typing i { width: 6px; height: 6px; border-radius: 9999px; background: #6a86b8; animation: sk-glass-dot 1.2s infinite; }
.sk-glass-typing i:nth-child(2) { animation-delay: .15s; }
.sk-glass-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes sk-glass-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .sk-glass-enter, .sk-glass-typing i { animation: none; }
  .sk-glass-typing i { opacity: .6; }
}

/* ── 빠른 요청 칩 · 알약 입력창 ───────────────────────────────────── */
.sk-glass-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 4px 8px; }
.sk-glass-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 12px;
  border: 1px solid var(--sk-chip-border); background: var(--sk-chip-bg); color: var(--sk-chip-ink);
  font: inherit; font-size: 11px; font-weight: 500; line-height: 1.4; cursor: pointer; white-space: nowrap;
  transition: background-color .15s ease-out;
}
.sk-glass-chip:hover { background: var(--sk-chip-bg-hover); }
.sk-glass-chip svg { width: 11px; height: 11px; }
.sk-glass-chip[aria-pressed="true"] { color: var(--sk-glass-accent); background: var(--sk-glass-tab-on); box-shadow: inset 0 0 0 1px rgba(185, 168, 255, .6); }
.sk-glass-chip--ai { color: var(--sk-glass-accent); }
.sk-glass-chip[disabled] { opacity: .55; cursor: not-allowed; }
.sk-glass-pill {
  display: flex; align-items: flex-end; gap: 6px; padding: 8px 8px 8px 8px; border-radius: 20px;
  background: var(--sk-input-bg); border: 1px solid var(--sk-input-border); box-shadow: var(--sk-input-shadow);
}
.sk-glass-pill:focus-within { box-shadow: var(--sk-input-shadow), 0 0 0 2px rgba(185, 168, 255, .55); }
.sk-glass-pill textarea,
.sk-glass-pill textarea:focus {
  flex: 1 1 auto; min-width: 0; min-height: 22px; max-height: 120px; padding: 5px 0; border: 0; border-radius: 0;
  outline: 0; box-shadow: none; resize: none; background: transparent;
  font-size: 13px; line-height: 1.5; color: var(--sk-glass-ink);
}
.sk-glass-pill textarea::placeholder { color: var(--sk-glass-meta); }
.sk-glass-pill__icon {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px;
  padding: 0; border: 0; border-radius: 9999px; background: transparent; color: var(--sk-glass-body); cursor: pointer;
}
.sk-glass-pill__icon:hover { background: var(--sk-glass-hover); }
.sk-glass-pill__icon svg { width: 16px; height: 16px; }
.sk-glass-send {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 9999px; cursor: pointer;
  background: var(--sk-send-on); color: #fff; font-size: 15px; font-weight: 600; line-height: 1;
  transition: background-color .2s ease-out;
}
.sk-glass-send:hover { background: #0f1836; }
.sk-glass-send--off, .sk-glass-send[disabled] { background: var(--sk-send-off); color: rgba(255, 255, 255, .9); cursor: default; }
.sk-glass-send--off:hover, .sk-glass-send[disabled]:hover { background: var(--sk-send-off); }
.sk-glass-hint { display: block; padding: 6px 6px 0; font-size: 10.5px; color: var(--sk-glass-meta); }