/* AI 챗봇 — ChatGPT 메인(채팅) 느낌 + Summet 사이드바 토큰 보조 */

/* WorkSpace — toolbar는 레이아웃 높이를 차지하지 않음 (미리보기 열림과 동일) */
.main-content:has(.summet-workspace-layout) .main-toolbar {
  position: absolute !important;
  top: 0;
  left: 0;
  right: auto;
  z-index: 30;
  width: auto;
  padding: 12px 18px !important;
  pointer-events: none;
  background: transparent !important;
}

.main-content:has(.summet-workspace-layout) .main-toolbar > * {
  pointer-events: auto;
}

.main-content:has(.summet-workspace-layout) .content-root {
  height: 100% !important;
}

/* WorkSpace 외 챗봇 페이지 toolbar */
.main-content:has(.summet-chat-sticky-layout):not(:has(.summet-workspace-layout)) .main-toolbar,
.main-content:has(.summet-chat-page):not(:has(.summet-workspace-layout)) .main-toolbar {
  padding: 16px 20px 14px;
  background: transparent !important;
}

/* 입력창은 화면 하단 fixed. 대신 본문 끝에 동일 높이 spacer 를 둬 답변을 가리지 않는다. */
:root {
  --summet-chat-composer-clearance: 180px;
  /* 채팅 본문/입력창 공통 폭 — 한 곳에서 관리 */
  --summet-chat-content-width: 52rem;
  /* idle(첫 화면) 전용 폭 — 검색 히어로처럼 더 좁고 집중감 있게 */
  --summet-workspace-idle-width: 52rem;
}
.main-content:has(.summet-chat-sticky-layout) {
  padding: 0 !important;
  overflow: hidden !important;
  scroll-padding-bottom: var(--summet-chat-composer-clearance, 180px);
  position: relative;
}

.main-content:has(.summet-chat-page--idle) .main-toolbar {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}

.main-content:has(.summet-workspace-layout--with-preview) .content-root {
  height: 100% !important;
}

body.drawer-collapsed .main-content:has(.summet-chat-sticky-layout),
body.hide-sidebar .main-content:has(.summet-chat-sticky-layout) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  scroll-padding-bottom: var(--summet-chat-composer-clearance, 180px);
}

/* 아래 여백은 대화 영역이 직접 맡는다.

   예전에는 spacer 가 맡는다며 여기서 4px 로 눌러 뒀는데, 그 spacer 는
   지금 display:none 이라 아무 자리도 차지하지 않는다. 그래서 마지막
   답변이 떠 있는 입력창 뒤로 숨었다. 입력창 높이(--summet-chat-composer-h)
   만큼 비워 두면 마지막 줄까지 온전히 보인다. */
.summet-chat-body {
  padding-bottom: 4px !important;
  scroll-padding-bottom: var(--summet-chat-composer-clearance, 180px);
}

.summet-chat-history {
  padding-bottom: var(--summet-chat-composer-h, 130px) !important;
  scroll-padding-bottom: var(--summet-chat-composer-clearance, 180px);
}

/* scrollIntoView 시에도 마지막 메시지가 입력창 위에서 멈추도록 최소 여백. */
.summet-chat-history > *,
.summet-chat-body > * {
  scroll-margin-bottom: var(--summet-chat-composer-clearance, 180px);
}

.summet-chat-composer-spacer {
  display: none !important;
  flex-shrink: 0;
  height: 0;
  min-height: 0;
  pointer-events: none;
}

.content-root:has(.summet-chat-sticky-layout) {
  flex: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.summet-chat-sticky-layout {
  flex: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.summet-chat-page {
  --summet-chat-font-scale: 1;
  --summet-chat-user-bg: #eef0f5;
  --summet-chat-composer-bg: #ffffff;
  --summet-chat-composer-border: #c5ccd6;
  --summet-chat-composer-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --summet-chat-send-bg: #b8b8bc;
  --summet-chat-send-fg: #ffffff;
  --summet-chat-suggest-bg: #ffffff;
  /* clearance 는 :root 에서 JS 로 실측 갱신되므로 여기서 재정의하지 않음 */
  flex: 1;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  /* 떠 있는 입력창(absolute)이 기댈 기준. 이게 없으면 입력창이 훨씬 바깥
     조상까지 올라가 붙어 엉뚱한 자리에 놓인다. */
  position: relative;
  box-sizing: border-box;
  background: var(--bg-color);
}

/* ============================================================
   Workspace 레이아웃 — Figma 급 클린/럭셔리 리디자인
   기본은 1열(채팅만). 생성물이 생기면 .--with-preview 로 2열 전환.
   ============================================================ */
.summet-workspace-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  height: 100%;
  min-height: 0;
  --summet-ws-preview-width: clamp(380px, (46vw / var(--ui-zoom, 1)), 820px);
  --summet-ws-preview-gap: 16px;
  transition: grid-template-columns 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.summet-workspace-layout--with-preview {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: var(--summet-ws-preview-gap, 16px);
  padding-right: 0;
  height: calc(100vh / var(--ui-zoom, 1));
  height: calc(100dvh / var(--ui-zoom, 1));
}

.summet-workspace-layout--with-preview.summet-workspace-layout--split-dragging {
  transition: none;
  user-select: none;
  cursor: col-resize;
}

.summet-workspace-layout--split-dragging .summet-workspace-preview {
  transition: none !important;
  will-change: width, flex-basis;
  contain: layout style;
}

.summet-workspace-layout--split-dragging .summet-workspace-chat-pane {
  contain: layout style;
}

.summet-workspace-layout--split-dragging .summet-workspace-preview iframe,
.summet-workspace-layout--split-dragging .summet-workspace-preview__image-wrap {
  visibility: hidden;
  pointer-events: none;
}

.summet-workspace-layout--split-dragging .summet-workspace-preview__body {
  background: var(--bg-color);
}

.summet-workspace-preview__drag-shield {
  position: absolute;
  inset: 0;
  z-index: 40;
  cursor: col-resize;
  background: transparent;
  touch-action: none;
}

.summet-workspace-splitter-ghost {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 3px;
  z-index: 9999;
  border-radius: 999px;
  background: var(--accent-color, #6366f1);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.72), 0 0 22px rgba(99, 102, 241, 0.34);
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.summet-workspace-layout--with-preview .summet-workspace-chat-pane {
  flex: 1 1 0;
  min-width: 280px;
}

.summet-workspace-splitter {
  flex: 0 0 10px;
  position: relative;
  align-self: stretch;
  margin: 8px 0;
  border-radius: 999px;
  cursor: col-resize;
  touch-action: none;
  z-index: 25;
  background: transparent;
  transition: background 0.15s ease;
}

.summet-workspace-splitter[hidden] {
  display: none !important;
}

.summet-workspace-splitter:hover,
.summet-workspace-splitter:focus-visible,
.summet-workspace-splitter.summet-workspace-splitter--active {
  background: color-mix(in srgb, var(--accent-color, #6366f1) 12%, transparent);
}

.summet-workspace-splitter__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 44px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-muted, #64748b) 55%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--border-color, #e2e8f0) 80%, transparent);
  pointer-events: none;
  transition: height 0.15s ease, background 0.15s ease;
}

.summet-workspace-splitter:hover .summet-workspace-splitter__grip,
.summet-workspace-splitter:focus-visible .summet-workspace-splitter__grip,
.summet-workspace-splitter.summet-workspace-splitter--active .summet-workspace-splitter__grip {
  height: 56px;
  background: var(--accent-color, #6366f1);
}

.summet-workspace-splitter__hint {
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--text-color);
  background: var(--surface-color, #fff);
  border: 1px solid var(--summet-chat-composer-border, rgba(15, 23, 42, 0.09));
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 30;
}

.summet-workspace-splitter:hover .summet-workspace-splitter__hint,
.summet-workspace-splitter:focus-visible .summet-workspace-splitter__hint,
.summet-workspace-splitter.summet-workspace-splitter--active .summet-workspace-splitter__hint {
  opacity: 1;
}

.summet-workspace-layout--with-preview .summet-workspace-preview {
  flex: 0 0 var(--summet-ws-preview-width, clamp(380px, (46vw / var(--ui-zoom, 1)), 820px));
  min-width: 280px;
  max-width: calc(100% - 300px);
  width: var(--summet-ws-preview-width, clamp(380px, (46vw / var(--ui-zoom, 1)), 820px));
}

.summet-workspace-chat-pane {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* 채팅 목록 — 레이아웃 공간을 차지하지 않고 본문 위에 떠 있음 */
.summet-chat-history-nav {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 30;
  pointer-events: none;
  padding: 0;
}

.summet-chat-history-btn {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px 0 10px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface-color, #fff) 92%, transparent);
  color: color-mix(in srgb, var(--text-color, #111827) 88%, #64748b);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  backdrop-filter: blur(10px);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.summet-chat-history-btn:hover {
  background: var(--surface-color, #fff);
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--text-color);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.summet-chat-history-btn__icon {
  flex-shrink: 0;
  opacity: 0.88;
}

.summet-chat-history-btn__label {
  display: inline-block;
  white-space: nowrap;
}

/* 작업판(미리보기) — 각진 모서리, 왼쪽 경계선 한 줄(그림자 없음) */
.summet-workspace-preview {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  height: calc(100vh / var(--ui-zoom, 1));
  height: calc(100dvh / var(--ui-zoom, 1));
  align-self: stretch;
  border: 0;
  border-left: 1px solid var(--border-color);
  border-radius: 0;
  background: var(--surface-color);
  overflow: hidden;
  animation: summet-workspace-preview-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes summet-workspace-preview-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

.summet-workspace-preview[hidden] {
  display: none;
}

.summet-workspace-preview-reopen {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  /* 글자가 --text-color 라 바탕도 테마를 따라야 한다. */
  background: var(--surface-color);
  color: var(--text-color);
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 10px 28px -12px rgba(15, 23, 42, 0.28);
  backdrop-filter: blur(10px);
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.summet-workspace-preview-reopen:hover {
  transform: translateY(-50%) translateX(-2px);
  border-color: rgba(14, 165, 233, 0.35);
  box-shadow:
    0 2px 6px rgba(14, 165, 233, 0.08),
    0 14px 34px -14px rgba(14, 165, 233, 0.35);
}

.summet-workspace-preview-reopen[hidden] {
  display: none;
}

.summet-workspace-preview-reopen svg {
  flex-shrink: 0;
  opacity: 0.88;
}

.summet-workspace-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  /* 테마 토큰으로 칠한다. 예전에는 흰색을 글자 그대로 박아 두어
     다크모드에서 머리띠만 하얗게 남고, 제목 글자(--text-color)가 거의
     흰색이라 흰 바탕에 흰 글씨가 됐다. */
  border-bottom: 1px solid var(--border-color);
  background: var(--surface-color);
  backdrop-filter: blur(12px);
}

.summet-workspace-preview__heading {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.summet-workspace-preview__heading strong {
  font-size: 13.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--text-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summet-workspace-preview__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.summet-workspace-preview__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--border-color);
  border-radius: 9px;
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 12px;
  font-weight: 550;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.1s ease;
}

.summet-workspace-preview__btn:hover {
  background: var(--surface-color);
  border-color: var(--text-muted);
}

.summet-workspace-preview__btn:active {
  transform: scale(0.96);
}

.summet-workspace-preview__btn--icon {
  width: 30px;
  padding: 0;
  color: var(--text-muted);
}

/* 머리 오른쪽의 크게 보기·닫기 — 테두리 없는 아이콘 단추 */
.summet-workspace-preview__btn--ghost {
  width: 30px;
  height: 30px;
  border-color: transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
}

.summet-workspace-preview__btn--ghost:hover {
  border-color: transparent;
  background: var(--sidebar-hover);
  color: var(--text-color);
}

.summet-workspace-preview__expand-icon--shrink,
.summet-workspace-layout--preview-expanded .summet-workspace-preview__expand-icon--grow {
  display: none;
}

.summet-workspace-layout--preview-expanded .summet-workspace-preview__expand-icon--shrink {
  display: block;
}

/* 크게 보기 — 작업판이 대화 칸 자리까지 차지한다(닫으면 풀린다). */
.summet-workspace-layout--preview-expanded.summet-workspace-layout--with-preview {
  gap: 0;
}

.summet-workspace-layout--preview-expanded .summet-workspace-chat-pane,
.summet-workspace-layout--preview-expanded .summet-workspace-splitter {
  display: none !important;
}

.summet-workspace-layout--preview-expanded.summet-workspace-layout--with-preview .summet-workspace-preview {
  flex: 1 1 auto;
  width: auto;
  max-width: none;
}

.summet-workspace-preview__btn[hidden] {
  display: none;
}

.summet-workspace-preview__body {
  flex: 1;
  min-height: 0;
  position: relative;
  /* 미리보기 판도 테마를 따른다. 하드코딩하면 다크 모드에서 이 칸만 하얗게 뜬다. */
  background: var(--bg-color);
}

#summet-workspace-preview-frame[src*=".pdf"],
#summet-workspace-preview-frame[src*="blob:"] {
  background: #525659;
}

.summet-workspace-preview__btn--download {
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  background: #111827;
  border-color: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 650;
}

.summet-workspace-preview__btn--download:hover {
  background: #1f2937;
  border-color: #1f2937;
  color: #fff;
}

.summet-workspace-preview__btn--download[hidden] {
  display: none;
}

.summet-workspace-preview__image-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  overflow: auto;
  background: #eef1f5;
}

.summet-workspace-preview__image-wrap[hidden] {
  display: none;
}

.summet-workspace-preview__image-wrap img {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 100%;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  display: block;
  background: #eef1f5;
}

#summet-workspace-preview-frame {
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

#summet-workspace-preview-frame[hidden] {
  display: none;
}

[data-theme="dark"] .summet-chat-page {
  --summet-chat-user-bg: #3b3b3b;
  --summet-chat-composer-bg: #2f2f2f;
  --summet-chat-composer-border: rgba(255, 255, 255, 0.08);
  /* 입력 상자 그림자 — 예전 1px 고리(0 0 0 1px)는 테두리처럼 보여 뺐다. */
  --summet-chat-composer-shadow: none;
  --summet-chat-send-bg: #ebebef;
  --summet-chat-send-fg: #1c1c1e;
  --summet-chat-suggest-bg: #404040;
}

.summet-chat--toolbar-fade {
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--text-color);
  font-size: clamp(1.25rem, (2.2vw / var(--ui-zoom, 1)), 1.75rem);
  line-height: 1.25;
}

/* 히어로 — GPT 메인 타이포, 장식 최소 */
.summet-chat-hero {
  flex-shrink: 0;
  text-align: center;
  padding: 2rem 0.5rem 1.25rem;
}

.summet-chat-headline {
  font-family: var(--summet-font-family, "Pretendard Variable", "Pretendard", ui-sans-serif, system-ui, sans-serif);
  font-size: clamp(1.5rem, (4.5vw / var(--ui-zoom, 1)), 2rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  margin: 0 0 0.5rem;
  color: var(--text-color);
  line-height: 1.15;
}

.summet-chat-sub {
  margin: 0 auto;
  max-width: 26rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-muted);
  font-weight: 400;
}

/* ── Workspace 브랜드 타이틀 (idle 전용) ── */
.summet-workspace-brand {
  flex-shrink: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.42em 0.55em;
  width: min(100%, var(--summet-workspace-idle-width, 52rem));
  margin: 0 auto;
  /* 아래 여백이 로고와 입력창 사이다(껍데기 gap 과 더해진다). 1.35rem 이던 때는 입력창과
     도구 바퀴가 로고에 붙어 보였다 — 2.6rem 으로 띄웠더니 "그 두 배 더" 라 해서 5rem. */
  padding: 0 1rem 5rem;
  text-align: center;
  letter-spacing: -0.03em;
  line-height: 1;
}

/* 공유 링크 창.
   테마 토큰으로 칠한다 — 흰색을 박으면 다크모드에서 흰 바탕에 흰 글씨가 된다. */
.ws-share-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.ws-share-modal[hidden] { display: none !important; }

.ws-share-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(2px);
}

.ws-share-modal__panel {
  position: relative;
  z-index: 1;
  width: min(480px, 100%);
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  background: var(--surface-color);
  color: var(--text-color);
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.28);
}

.ws-share-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.ws-share-modal__head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ws-share-modal__x {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
}

.ws-share-modal__x:hover { background: var(--bg-color); }

.ws-share-modal__lead {
  margin: 0 0 14px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.55;
}

.ws-share-modal__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.ws-share-modal__input {
  flex: 1;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--bg-color);
  color: var(--text-color);
  font-size: 13px;
  /* 주소가 길어도 줄이 밀리지 않게 한 줄로 둔다. */
  text-overflow: ellipsis;
}

.ws-share-modal__copy {
  flex-shrink: 0;
  padding: 0 16px;
  border: none;
  border-radius: 10px;
  background: var(--text-color);
  color: var(--bg-color);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}

.ws-share-modal__copy:hover { opacity: 0.88; }

/* 공유 창 아래 줄 — 가는 선 아래 최신 대화로 새 링크(왼쪽)·공유 중지(오른쪽). 좁으면 두 줄. */
.ws-share-modal__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

/* 두 단추 다 알약 — 복사 단추와 같은 키, 채우지 않은 테두리. */
.ws-share-modal__renew,
.ws-share-modal__revoke {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-color);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.ws-share-modal__renew:hover { background: var(--bg-color); }

/* 되돌릴 수 없는 일이라 빨간 테두리·글자. 올리면 옅게 찬다. */
.ws-share-modal__revoke {
  border-color: rgba(220, 38, 38, 0.45);
  color: #dc2626;
}

.ws-share-modal__revoke:hover {
  border-color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
}

[data-theme="dark"] .ws-share-modal__revoke {
  border-color: rgba(248, 113, 113, 0.5);
  color: #f87171;
}

[data-theme="dark"] .ws-share-modal__revoke:hover {
  border-color: #f87171;
  background: rgba(248, 113, 113, 0.12);
}

.ws-share-modal__renew:focus-visible,
.ws-share-modal__revoke:focus-visible {
  outline: 2px solid var(--text-color);
  outline-offset: 2px;
}

.ws-share-modal__renew:disabled,
.ws-share-modal__revoke:disabled { opacity: 0.5; cursor: default; }

/* 서랍: 목록·검색을 받지 못했을 때의 다시 시도(wsDrawerNotice). */
.summet-chat-drawer-empty__retry {
  margin-top: 10px;
  padding: 6px 14px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-color);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.summet-chat-drawer-empty__retry:hover { background: var(--bg-color); }

/* 받기 전의 서버 사진 — 자리를 잡아 두어 받은 뒤 화면이 튀지 않게(글자 없는 자리표시). */
.summet-msg__thumb:not([src]) {
  aspect-ratio: 4 / 3;
}

/* 잠깐 떴다 사라지는 알림(#ws-toast)의 모양은 base-layout.css 의 사이트 공용 알림에 있다 — 상자가 <body> 에 붙어
   다른 화면으로 옮겨도 남으므로, 이 화면 CSS 에 두면 다른 화면에서 맨글자로 보였다. */

/* 대화 공유 단추. 본문 칸 오른쪽 위에 떠 있다. */
.summet-share-btn {
  position: absolute;
  top: 12px;
  /* 미리보기 칸이 열리면 그 폭만큼 안쪽으로 들어온다(칸은 오른쪽에 붙는다). */
  right: 14px;
  z-index: 46;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-color);
  color: var(--text-color);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.summet-share-btn:hover { border-color: var(--text-muted); }
.summet-share-btn:disabled { opacity: 0.5; cursor: default; }
.summet-share-btn[hidden] { display: none; }

.summet-workspace-brand__mark {
  font-family: var(--summet-font-family, "Pretendard Variable", "Pretendard", ui-sans-serif, system-ui, sans-serif);
  font-size: clamp(2.35rem, (5.2vw / var(--ui-zoom, 1)), 3.75rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  color: var(--text-color);
}

.summet-workspace-brand__name {
  font-family: var(--summet-font-family, "Pretendard Variable", "Pretendard", ui-sans-serif, system-ui, sans-serif);
  font-size: clamp(2.35rem, (5.2vw / var(--ui-zoom, 1)), 3.75rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  background: linear-gradient(
    120deg,
    color-mix(in srgb, var(--accent-color, #6366f1) 88%, #0ea5e9) 0%,
    color-mix(in srgb, var(--accent-color, #6366f1) 55%, var(--text-color)) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent-color, #6366f1);
}

.summet-chat-page:not(.summet-chat-page--idle) .summet-workspace-brand {
  display: none !important;
}

/* (legacy hero — 미사용) */
.summet-workspace-hero {
  display: none !important;
}

/* 카드형 박스 제거 — 페이지 배경과 이어짐 */
.summet-chat-shell {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  /* 공유 단추가 이 껍데기의 오른쪽 위에 앉는다. */
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  /* 입력창이 흐름에서 빠진 뒤로 이 껍데기가 남는 자리를 다 쓰지 않아
     바닥에 28px 쯤 빈 띠가 생겼다. 부모 높이를 그대로 채운다. */
  height: 100%;
}

/* Workspace 첫 화면: 히어로 + 입력 영역을 중앙에 배치
   `safe center` — 뷰포트가 낮은 화면(작은 노트북 등)에서 내용(브랜드+검색창+
   문서/PPT 생성 퀵툴 패널)이 중앙정렬 높이보다 커지면 위/아래가 overflow:hidden에
   가려 스크롤로도 닿지 않던 문제 수정. overflow-y:auto를 함께 둬 safe 미지원
   브라우저에서도 스크롤로 잘린 부분에 접근할 수 있게 한다. */
/* 첫 화면의 세로 배치.

   로고와 입력창 사이가 243px 이나 벌어져 둘이 따로 노는 것처럼 보였다.
   가운데 정렬(justify-content:center)에 gap 을 넉넉히 준 데다, 로고만
   따로 -6vh 만큼 더 끌어올려 간격이 두 번 벌어진 탓이다.

   이제 gap 하나로만 간격을 정하고(로고를 따로 끌어올리지 않는다), 두 덩이를
   묶어 화면 가운데보다 살짝 위에 둔다. 값 하나만 만지면 되므로 조절이 쉽다. */
.summet-chat-page--idle .summet-chat-shell {
  justify-content: center;
  justify-content: safe center;
  gap: clamp(1rem, (2.2vh / var(--ui-zoom, 1)), 1.75rem);
  /* 로고와 입력창을 한 묶음으로 이만큼 위로 올린다. */
  padding-bottom: calc(8vh / var(--ui-zoom, 1));
  overflow-y: auto;
}

/* 낮은 화면에서는 더 좁혀 아래 도구줄이 잘리지 않게 한다. */
@media (max-height: 760px) {
  .summet-chat-page--idle .summet-chat-shell {
    gap: clamp(0.75rem, (1.6vh / var(--ui-zoom, 1)), 1.25rem);
    padding-bottom: calc(4vh / var(--ui-zoom, 1));
  }
}

/* 낮은 데스크톱도 로고와 입력창을 함께 올린다. 위 여백으로 다시 내리지 않는다. */
@media (max-height: 760px) and (min-width: 769px) {
  .summet-chat-page--idle .summet-chat-shell {
    padding-top: 0;
  }
}

.summet-chat-page--idle #summet-key-banner,
.summet-chat-page--idle:not(.summet-chat-page--has-attachment) #attach-row {
  display: none !important;
}

.summet-chat-page--idle.summet-chat-page--has-attachment #attach-row {
  display: flex !important;
}

.summet-chat-page--idle.summet-chat-page--has-attachment .summet-chat-chip__name {
  max-width: min(320px, (72vw / var(--ui-zoom, 1)));
}

.summet-chat-page--idle .summet-chat-body {
  display: none;
}

.summet-chat-toolbar-row {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(100%, var(--summet-chat-content-width, 64rem));
  margin: 0 auto;
  padding: 0 0 0.75rem;
  border-bottom: none;
  background: transparent;
}

.summet-chat-toolbar-row .summet-chat-model-wrap {
  flex: 0 0 auto;
  min-width: 0;
  display: flex;
  justify-content: flex-start;
  padding: 0;
  border: none;
}

.summet-chat-drawer-toggle {
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--surface-color);
  color: var(--text-color);
  height: 36px !important;
  padding: 0 12px !important;
  width: auto !important;
  min-width: fit-content;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  justify-content: flex-start;
}

.summet-chat-drawer-toggle:hover {
  background: var(--sidebar-hover);
}

.summet-chat-drawer-toggle .drawer-toggle-label {
  display: inline-block;
}

/* 앱 좌측 네비(.sidebar-panel 272px)와 동일 — 대화 패널은 네비 바로 오른쪽에서 열림 */
.summet-chat-drawer-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 272px;
  z-index: 220;
  margin: 0;
  border: none;
  padding: 0;
  background: rgba(15, 23, 42, 0.4);
  cursor: pointer;
}

.summet-chat-drawer-backdrop[hidden],
.summet-chat-drawer[hidden] {
  display: none !important;
}

.summet-chat-drawer {
  position: fixed;
  top: 0;
  left: 272px;
  bottom: 0;
  width: min(360px, calc((100vw / var(--ui-zoom, 1)) - 272px - 12px));
  z-index: 221;
  background: #fafafa;
  border-right: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: 8px 0 24px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
}

/* 네비 접힘·숨김 페이지: 패널은 화면 왼쪽부터 */
body.drawer-collapsed .summet-chat-drawer-backdrop,
body.hide-sidebar .summet-chat-drawer-backdrop {
  left: 0;
}

body.drawer-collapsed .summet-chat-drawer,
body.hide-sidebar .summet-chat-drawer {
  left: 0;
  width: min(360px, (92vw / var(--ui-zoom, 1)));
}

.summet-chat-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.summet-chat-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 18px 16px 10px;
}

.summet-chat-drawer-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--text-color);
}

.summet-chat-drawer-head__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.summet-chat-drawer-head__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.summet-chat-drawer-head__btn:hover {
  background: rgba(15, 23, 42, 0.06);
  color: var(--text-color);
}

.summet-chat-drawer-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 12px 8px;
  padding: 0 4px 10px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.summet-chat-drawer-search__icon {
  flex: 0 0 auto;
  color: #94a3b8;
}

.summet-chat-drawer-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-color);
  font-size: 14px;
  padding: 6px 0;
  outline: none;
}

.summet-chat-drawer-search__input::placeholder {
  color: #94a3b8;
}

.summet-chat-drawer-search__clear {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #64748b;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

.summet-chat-drawer-search__clear:hover {
  background: rgba(15, 23, 42, 0.1);
  color: #334155;
}

.summet-chat-drawer-item-snippet {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.45;
  color: #64748b;
  word-break: break-word;
}

.summet-chat-drawer-search-hit {
  background: transparent;
  color: inherit;
  font-weight: 650;
  padding: 0;
}

.summet-chat-drawer-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 10px 16px;
  -webkit-overflow-scrolling: touch;
}

.summet-chat-drawer-empty {
  margin: 32px 12px;
  padding: 0 4px;
  color: #64748b;
  text-align: center;
}

.summet-chat-drawer-empty__mark {
  display: none;
}

.summet-chat-drawer-empty strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #334155;
  letter-spacing: -0.01em;
}

.summet-chat-drawer-empty p {
  margin: 6px 0 0;
  color: #94a3b8;
  font-size: 12px;
  line-height: 1.5;
}

.summet-chat-drawer-item {
  display: flex;
  align-items: stretch;
  gap: 2px;
  width: 100%;
  margin-bottom: 4px;
  border-radius: 12px;
  box-sizing: border-box;
  transition: background 0.12s ease;
}

.summet-chat-drawer-item:hover,
.summet-chat-drawer-item--active {
  background: rgba(15, 23, 42, 0.05);
}

.summet-chat-drawer-item--active {
  background: rgba(15, 23, 42, 0.07);
}

.summet-chat-drawer-item__main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 8px 11px 10px;
  border: none;
  background: transparent;
  color: var(--text-color);
  text-align: left;
  cursor: pointer;
  border-radius: 12px;
}

.summet-chat-drawer-item__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  margin-top: 1px;
}

.summet-chat-drawer-item__icon svg {
  display: block;
}

.summet-chat-drawer-item__icon--spacer {
  width: 28px;
  flex: 0 0 28px;
}

.summet-chat-drawer-item__icon--star {
  width: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.summet-chat-drawer-item__icon--star svg {
  display: block;
}

.summet-chat-drawer-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.summet-chat-drawer-item-title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.35;
}

.summet-chat-drawer-item-date {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.3;
}

.summet-chat-drawer-item__menu {
  flex: 0 0 auto;
  align-self: center;
  width: 30px;
  height: 30px;
  margin-right: 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #94a3b8;
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.02em;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.summet-chat-drawer-item:hover .summet-chat-drawer-item__menu,
.summet-chat-drawer-item--active .summet-chat-drawer-item__menu,
.summet-chat-drawer-item--menu-open .summet-chat-drawer-item__menu {
  opacity: 1;
}

/* 답을 받는 중인 방의 돌림표 — 점 3개 바로 앞(옆줄 .sidebar-chat__spin 과 같은 모양). 평소엔 없다. */
.summet-chat-drawer-item__spin {
  flex: 0 0 auto;
  align-self: center;
  display: none;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border: 2px solid rgba(148, 163, 184, 0.45);
  border-top-color: var(--primary-color, #0082ff);
  border-radius: 50%;
  animation: summet-chat-drawer-spin 0.8s linear infinite;
}

.summet-chat-drawer-item.is-busy .summet-chat-drawer-item__spin {
  display: block;
}

@keyframes summet-chat-drawer-spin {
  to { transform: rotate(360deg); }
}

/* 손가락 기기에서는 올려 둘 수 없다 — 늘 보인다(옆줄 .sidebar-chat__more 와 같은 규칙). */
@media (hover: none) {
  .summet-chat-drawer-item__menu {
    opacity: 1;
  }
}

.summet-chat-drawer-item__menu:hover,
.summet-chat-drawer-item--menu-open .summet-chat-drawer-item__menu {
  background: rgba(15, 23, 42, 0.08);
  color: var(--text-color);
}

.summet-chat-drawer-item--pinned .summet-chat-drawer-item-title::after {
  content: " · 고정";
  font-size: 11px;
  font-weight: 500;
  color: #64748b;
}

.summet-chat-drawer-menu {
  position: fixed;
  z-index: 230;
  min-width: 168px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #ffffff;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.14);
}

.summet-chat-drawer-menu[hidden] {
  display: none !important;
}

.summet-chat-drawer-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-color);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.summet-chat-drawer-menu__item:hover {
  background: rgba(15, 23, 42, 0.05);
}

.summet-chat-drawer-menu__item svg {
  flex: 0 0 auto;
  color: #64748b;
}

.summet-chat-drawer-menu__item--danger {
  color: #dc2626;
}

.summet-chat-drawer-menu__item--danger svg {
  color: #dc2626;
}

.summet-chat-drawer-menu__item--danger:hover {
  background: rgba(220, 38, 38, 0.06);
}

.summet-chat-model-wrap .chatbot-model-toolbar {
  margin-bottom: 0 !important;
}

.summet-chat-model-wrap .custom-model-select {
  max-width: 220px !important;
}

.summet-chat-model-wrap .model-select-trigger {
  border-radius: 999px !important;
  border: 1px solid var(--border-color) !important;
  background: var(--surface-color) !important;
  padding: 6px 12px !important;
  font-size: 13px !important;
}

.summet-chat-model-wrap .model-select-panel {
  border-radius: 12px !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.summet-chat-model-wrap .model-option {
  font-size: 14px !important;
}

/* 첨부 줄 — 입력창 안, 입력칸 위. */
.summet-chat-attach-row {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 0 10px;
  min-height: 0;
}

/* 문서 페이지 범위 UI — 선명·고대비 */
.summet-chat-attach-row .upload-file-block {
  width: 100%;
  margin: 6px 0 0;
  padding: 12px 14px;
  border: 1px solid #c8cfd8;
  border-radius: 10px;
  background: #fff;
  max-height: 280px;
  overflow: auto;
  box-shadow: none;
}
.summet-chat-attach-row .upload-block-title {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #111827;
  margin-bottom: 10px;
  line-height: 1.35;
}
.summet-chat-attach-row .upload-block-title em,
#attach-doc-range-total {
  color: #4b5563 !important;
  font-weight: 600 !important;
  font-style: normal !important;
}
.upload-file-list { display: grid; gap: 8px; }
.upload-file-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: start;
  gap: 10px;
  padding: 10px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  font-size: 12.5px;
  font-weight: 650;
  color: #111827;
}
.upload-file-row .file-mark,
.doc-range-file-row .file-mark {
  display: grid;
  place-items: center;
  width: 32px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #fecaca;
  background: #fff1f2;
  color: #dc2626;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.doc-range-file-row .upload-file-main { gap: 2px; }
.doc-range-file-row .upload-file-title {
  font-size: 13px;
  font-weight: 750;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doc-range-file-row small {
  color: #6b7280;
  font-weight: 600;
  font-size: 11.5px;
}
.upload-file-row small { color: #6b7280; font-weight: 600; }
.upload-file-row > button {
  border: 0;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 650;
  padding: 2px 4px;
}
.upload-file-row > button:hover { color: #111827; }
.upload-file-main { display: grid; gap: 8px; min-width: 0; }
.upload-file-ranges { display: grid; gap: 8px; }
.upload-file-range {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: #374151;
  font-size: 12px;
  font-weight: 650;
}
.upload-file-range > span:first-child {
  color: #111827;
  font-weight: 700;
  min-width: 4.5em;
}
.upload-file-range b {
  color: #6b7280;
  font-weight: 700;
}
.upload-file-range input {
  width: 56px;
  height: 30px;
  border: 1.5px solid #9ca3af;
  border-radius: 6px;
  padding: 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  background: #fff;
  text-align: center;
  font-variant-numeric: tabular-nums;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.upload-file-range input:hover { border-color: #6b7280; }
.upload-file-range input:focus {
  border-color: #111827;
  box-shadow: 0 0 0 2px rgba(17, 24, 39, 0.12);
}
.upload-file-range em {
  color: #6b7280;
  font-style: normal;
  font-weight: 600;
  font-size: 11.5px;
}
.range-add-btn,
.range-mini-btn {
  width: fit-content;
  height: 28px;
  border-radius: 6px;
  border: 1.5px solid #9ca3af;
  background: #fff;
  color: #111827;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 10px;
  line-height: 1;
}
.range-add-btn:hover,
.range-mini-btn:hover {
  border-color: #111827;
  background: #f9fafb;
}
.range-mini-btn {
  height: 26px;
  padding: 0 8px;
  color: #dc2626;
  border-color: #fca5a5;
}
.range-mini-btn:hover {
  border-color: #dc2626;
  background: #fef2f2;
}

.upload-file-row--compact {
  align-items: center;
  padding: 10px 10px;
}
.upload-file-title {
  font-size: 13px;
  font-weight: 700;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upload-file-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.range-edit-btn {
  height: 30px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1.5px solid #111827;
  background: #111827;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.range-edit-btn:hover { background: #1f2937; }
.range-edit-btn:disabled {
  opacity: 0.45;
  cursor: default;
  border-color: #9ca3af;
  background: #9ca3af;
}
.upload-file-del {
  border: 0;
  background: transparent;
  color: #6b7280;
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  padding: 2px 4px;
}
.upload-file-del:hover { color: #111827; }
.attach-doc-range-summary {
  font-size: 12px;
  font-weight: 650;
  color: #374151;
  align-self: center;
}

.upload-file-block--bar {
  padding: 12px 14px;
}
.upload-file-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.upload-file-bar__info {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.upload-file-bar__info strong {
  font-size: 13.5px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.02em;
}
.upload-file-bar__hint {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}
.range-manage-btn {
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1.5px solid #111827;
  background: #111827;
  color: #fff;
  font-size: 12.5px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}
.range-manage-btn:hover { background: #1f2937; }
.range-manage-btn:disabled {
  opacity: 0.45;
  cursor: default;
  border-color: #9ca3af;
  background: #9ca3af;
}

/* 페이지 범위 모달 */
.doc-range-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.doc-range-modal[hidden] { display: none !important; }
.doc-range-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.48);
  backdrop-filter: blur(2px);
}
.doc-range-modal__panel {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  max-height: min((82vh / var(--ui-zoom, 1)), 620px);
  overflow: auto;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  padding: 20px 20px 18px;
  box-shadow: 0 24px 64px rgba(15, 23, 42, 0.22);
}
.doc-range-view[hidden] { display: none !important; }
.doc-range-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.doc-range-modal__head-main { flex: 1; min-width: 0; }
.doc-range-modal__eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
}
.doc-range-modal__head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.03em;
}
.doc-range-modal__lead {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  line-height: 1.45;
}
.doc-range-back {
  width: 32px;
  height: 32px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  color: #111827;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.doc-range-back:hover { background: #f3f4f6; }
.doc-range-modal__x {
  border: 0;
  background: #f3f4f6;
  color: #374151;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
}
.doc-range-modal__x:hover { background: #e5e7eb; color: #111827; }
.doc-range-modal__name {
  margin: 8px 0 4px;
  font-size: 14px;
  font-weight: 750;
  color: #111827;
  word-break: break-all;
}
.doc-range-modal__meta {
  margin: 0 0 14px;
  font-size: 12.5px;
  font-weight: 650;
  color: #4b5563;
}
.doc-range-file-list {
  display: grid;
  gap: 8px;
}
.doc-range-file-row {
  display: grid;
  grid-template-columns: 34px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #fafafa;
  transition: border-color .15s, background .15s;
}
.doc-range-file-row:hover {
  border-color: #c5ccd6;
  background: #fff;
}
.doc-range-chevron {
  width: 34px;
  height: 34px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  background: #fff;
  color: #111827;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
}
.doc-range-chevron:hover {
  border-color: #111827;
  background: #111827;
  color: #fff;
}
.doc-range-chevron:disabled {
  opacity: 0.4;
  cursor: default;
}
.doc-range-empty {
  margin: 8px 0;
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
}
.doc-range-pill {
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
}
.doc-range-modal__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 18px;
}
.doc-range-modal__foot .range-add-btn {
  margin: 0;
  flex-shrink: 0;
}
.doc-range-modal__foot-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
}
.doc-range-modal__btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1.5px solid #d1d5db;
  background: #fff;
  color: #111827;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.doc-range-modal__btn--primary {
  border-color: #111827;
  background: #111827;
  color: #fff;
}
.doc-range-modal__btn--primary:hover { background: #1f2937; }
body.doc-range-modal-open { overflow: hidden; }

.summet-chat-attach-row[hidden] {
  display: none !important;
}

.summet-chat-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px 8px 8px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  background: var(--summet-chat-composer-bg);
  color: var(--text-color);
  border: 1px solid var(--summet-chat-composer-border);
  max-width: 100%;
  min-width: 0;
}

.summet-chat-chip__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  padding-right: 14px;
}

.summet-chat-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
  line-height: 1.3;
}

.summet-chat-chip__meta {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
  line-height: 1.3;
}

.summet-chat-chip__remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--summet-chat-composer-border);
  background: var(--summet-chat-composer-bg);
  cursor: pointer;
  padding: 0;
  font-size: 10px;
  line-height: 1;
  color: var(--text-muted);
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.summet-chat-chip__remove:hover {
  color: var(--text-color);
}

.summet-chat-chip--loading {
  opacity: 0.8;
  pointer-events: none;
}

.summet-chat-chip--loading .summet-chat-chip__name::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-left: 6px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -1px;
  animation: summet-chat-chip-spin 0.7s linear infinite;
}

@keyframes summet-chat-chip-spin {
  to {
    transform: rotate(360deg);
  }
}

.summet-chat-body {
  min-height: 0;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}

.summet-chat-history {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  /* 아래 여백은 떠 있는 입력창에 답변이 가리지 않도록 비워 두는 자리다.
     실제 높이는 JS 가 재서 --summet-chat-composer-h 에 넣는다. */
  padding: 8px var(--summet-chat-gutter, 20px) var(--summet-chat-composer-h, 130px);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  /* 스크롤 막대를 본문 칸 안에 가둔다. 이게 없으면 막대가 칸 끝(입력창
     자리)까지 이어져 프롬프트 위를 지나간다. */
  overscroll-behavior: contain;
  /* 세로만 구른다. overflow-y 만 auto 로 두면 브라우저가 가로도 auto 로 쳐서,
     넓은 표·코드 한 줄이 들어오는 순간 **대화 칸 아래에 가로 막대**가 생긴다.
     넓은 것은 제 상자(pre·표 감싼 칸) 안에서 구르면 된다. */
  overflow-x: hidden;
}

/* 대화 중 — floating 채팅 목록 버튼 아래에서 메시지가 시작되도록 */
.summet-chat-page:not(.summet-chat-page--idle) .summet-chat-history {
  padding-top: calc(12px + 34px + 16px);
}

/* 스크롤바는 오른쪽 끝에 두고, 대화 텍스트 폭은 기존(64rem)으로 유지 */
.summet-chat-history > .summet-msg {
  width: min(100%, var(--summet-chat-content-width, 64rem));
  margin-left: auto;
  margin-right: auto;
}

.summet-artifact-tile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: #1c1c1e;
  color: #f5f5f7;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.summet-artifact-tile:hover {
  background: #2c2c2e;
  border-color: rgba(255, 255, 255, 0.14);
}

.summet-artifact-tile:active {
  transform: scale(0.995);
}

.summet-artifact-tile__icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.88);
}

.summet-artifact-tile__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.summet-artifact-tile__body strong {
  color: #ffffff;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summet-artifact-tile__body span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  font-weight: 500;
}

.summet-artifact-card {
  display: none;
}

.ws-tool-prep {
  display: grid;
  gap: 10px;
  min-width: min(100%, 460px);
}

.ws-tool-prep__eyebrow {
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ws-tool-prep__title {
  color: #111827;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.ws-tool-prep__hint {
  margin: 0;
  color: #64748b;
  font-size: 13px;
  line-height: 1.55;
}

.ws-tool-prep__textarea {
  width: 100%;
  min-height: 94px;
  resize: vertical;
  border-radius: var(--summet-prompt-radius, 20px);
  /* 프롬프트 칸 공통 — 얇은 회색 테두리. */
  border: var(--summet-prompt-border-width, 1px) solid var(--summet-prompt-border, #8a9096);
  background: #f1f5f9;
  color: #111827;
  padding: 12px 13px;
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
}

.ws-tool-prep__textarea:focus {
  outline: none;
  border-color: var(--summet-prompt-border, #8a9096);
  background: #eef2f7;
}

[data-theme="dark"] .ws-tool-prep__textarea,
[data-theme="dark"] .ws-tool-prep__textarea:focus {
  background: var(--summet-prompt-bg-dark, #2f2f2f);
  color: var(--text-color);
}

.ws-tool-prep__attach {
  justify-self: start;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #ffffff;
  color: #111827;
  font-size: 13px;
  font-weight: 720;
  cursor: pointer;
}

.ws-tool-prep__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.ws-tool-prep__primary,
.ws-tool-prep__secondary {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 760;
  cursor: pointer;
}

.ws-tool-prep__secondary {
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #ffffff;
  color: #475569;
}

.ws-tool-prep__primary {
  border: 1px solid #111827;
  background: #111827;
  color: #ffffff;
}

.ws-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ws-quick-actions__btn {
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: #ffffff;
  color: #111827;
  font-size: 12.5px;
  font-weight: 720;
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}

.ws-quick-actions__btn:hover:not(:disabled) {
  border-color: rgba(15, 23, 42, 0.22);
  background: #f8fafc;
  transform: translateY(-1px);
}

.ws-quick-actions__btn:disabled {
  opacity: 0.48;
  cursor: default;
}

/* 그림 엔진 고르기 — 답 말풍선 안의 카드 둘(GPT Image 2.5 · Nano Banana 2.1). 앱(Flutter)과 같은 치수다.
   말풍선이 줄 폭을 다 써야 카드가 나란히 선다(말풍선은 글 폭만큼 줄어든다). 둘이 나란히 서려면 카드마다 176px —
   말풍선 폭이 360px 보다 좁으면 위아래로 쌓인다. 강조색은 앱의 SummetUi.accent 를 못 박는다. */
.summet-msg--image-choice .summet-msg__bubble {
  flex: 1 1 auto;
  min-width: 0;
}

.ws-image-choice {
  --ws-image-choice-accent: #0082FF;
  max-width: 440px;
  margin-top: 10px;
}

[data-theme="dark"] .ws-image-choice {
  --ws-image-choice-accent: #4DA3FF;
}

/* 배경 줄 — "배경" 과 알약 둘(배경 있음 · 투명 배경). 고른 쪽은 강조색 바탕에 흰 글자. */
.ws-image-choice__background {
  display: flex;
  flex-wrap: wrap;   /* 폭이 모자라면(좁은 폰·긴 영어 문구) 알약이 다음 줄로 */
  align-items: center;
  gap: 6px 10px;
  margin-bottom: 10px;
}

.ws-image-choice__label {
  font-size: 13px;
  color: var(--text-muted);
}

.ws-image-choice__segments {
  display: inline-flex;
  max-width: 100%;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--surface-color);
}

.ws-image-choice__segment {
  min-width: 0;
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  /* 글은 한 줄 — 그래도 모자라면 두 칸이 폭을 나누고 줄인다(앱과 같다). */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background-color 0.14s ease, color 0.14s ease;
}

.ws-image-choice__segment:hover:not(:disabled):not(.is-on) {
  color: var(--text-color);
}

.ws-image-choice__segment.is-on {
  background: var(--ws-image-choice-accent);
  color: #FFFFFF;
}

.ws-image-choice__segment:disabled {
  cursor: default;
}

.ws-image-choice__segment:focus-visible {
  outline: 2px solid var(--ws-image-choice-accent);
  outline-offset: 2px;
}

.ws-image-choice--chosen .ws-image-choice__segment:not(.is-on),
.ws-image-choice--missing .ws-image-choice__segments {
  opacity: 0.45;
}

.ws-image-choice__options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: 8px;
}

.ws-image-choice__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-color);
  color: var(--text-color);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

/* hover 덮개는 반투명이라 카드 바탕 위에 겹쳐 칠한다(말풍선 바탕은 투명하다). */
.ws-image-choice__option:hover:not(:disabled) {
  background: linear-gradient(var(--sidebar-hover), var(--sidebar-hover)), var(--surface-color);
}

.ws-image-choice__option:focus-visible {
  outline: 2px solid var(--ws-image-choice-accent);
  outline-offset: 2px;
}

.ws-image-choice__option:disabled {
  cursor: default;
}

/* 고른 쪽 — 테두리 1.5px(1px 테두리 + 안쪽 0.5px)와 오른쪽 끝 체크. 다른 쪽과 원본 없는 카드는 흐리게. */
.ws-image-choice__option.is-chosen {
  border-color: var(--ws-image-choice-accent);
  box-shadow: inset 0 0 0 0.5px var(--ws-image-choice-accent);
}

.ws-image-choice--chosen .ws-image-choice__option:not(.is-chosen),
.ws-image-choice--missing .ws-image-choice__option,
.ws-image-choice__option.is-unsupported {
  opacity: 0.45;
}

/* 아이콘 타일은 어두운 화면에서도 흰 바탕 — GPT 무늬가 검어서 어두운 바탕에선 안 보인다. */
.ws-image-choice__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #FFFFFF;
}

.ws-image-choice__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.ws-image-choice__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ws-image-choice__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-color);
}

.ws-image-choice__vendor {
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
}

.ws-image-choice__check {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--ws-image-choice-accent);
}

.ws-image-choice__missing {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text-muted);
}

.ws-image-choice__missing[hidden] {
  display: none;
}

/* Offline 챗봇 메시지 DOM(.summet-chat-msg/.summet-chat-bubble)도
   AI 챗봇과 동일 폭/배치 규칙을 사용하도록 맞춘다. */
.summet-chat-history > .summet-chat-msg {
  width: min(100%, var(--summet-chat-content-width, 64rem));
  margin-left: auto;
  margin-right: auto;
}

.summet-msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 100%;
}

.summet-chat-msg {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: 100%;
}

.summet-msg--user {
  flex-direction: row-reverse;
}

.summet-chat-msg--user {
  flex-direction: row-reverse;
}

.summet-msg__avatar {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 2px;
}

.summet-msg--user .summet-msg__avatar {
  display: none;
}

/* 일반 워크스페이스는 공급사(GPT/Claude/Gemini) 아이콘을 쓰지 않는다. AI 챗봇만 표시. */
.summet-chat-page--workspace .summet-msg__avatar,
.summet-chat-page--workspace .model-option-icon,
.summet-chat-page--workspace #model-trigger-logo {
  display: none !important;
}

.summet-msg__bubble {
  max-width: min(100%, 100%);
  padding: 10px 14px;
  border-radius: 1.25rem;
  line-height: 1.55;
  word-break: break-word;
}

.summet-chat-bubble {
  max-width: min(100%, 100%);
  padding: 10px 14px;
  border-radius: 1.25rem;
  line-height: 1.55;
  word-break: break-word;
}

.summet-msg--bot .summet-msg__bubble {
  background: transparent;
  border: none;
  padding: 8px 12px 8px 4px;
  color: var(--text-color);
  font-size: calc(0.9375rem * var(--summet-chat-font-scale, 1));
}

.summet-chat-msg--bot .summet-chat-bubble {
  background: transparent;
  border: none;
  padding: 8px 12px 8px 4px;
  color: var(--text-color);
  font-size: calc(0.9375rem * var(--summet-chat-font-scale, 1));
}

/* 마크다운으로 그리는 말풍선(--md)에는 걸지 않는다 — 걸면 스트리밍 끝에 클래스가 빠지며 줄이 접혀
   화면이 툭 바뀐다. 평문 폴백·생각 중 표시에만 pre-wrap. */
.summet-msg--bot.streaming .summet-msg__bubble:not(.summet-msg__bubble--md) {
  white-space: pre-wrap;
}

/* 답변 대기 — 생각 중 표시 (웹/앱 동일) */
.summet-msg__thinking {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-muted, #888888);
  font-size: calc(0.9375rem * var(--summet-chat-font-scale, 1));
  line-height: 1.55;
  user-select: none;
}

.summet-msg__thinking-label {
  letter-spacing: -0.01em;
}

.summet-msg__thinking-dots {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 1em;
}

.summet-msg__thinking-dots i {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  animation: summet-thinking-bounce 1.2s infinite ease-in-out;
}

.summet-msg__thinking-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.summet-msg__thinking-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes summet-thinking-bounce {
  0%,
  80%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  40% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

/* 사용자 말풍선 — GPT 스타일 연한 캡슐 */
.summet-msg--user .summet-msg__bubble {
  background: var(--summet-chat-user-bg);
  color: var(--text-color);
  border: none;
  box-shadow: none;
  border-bottom-right-radius: 0.35rem;
}

/* 검색에서 고른 말 — 잠깐 테를 둘러 어느 말인지 보인다(wsTryTurnJump 가 2.4초 뒤 뗀다). 사용자 말풍선의
   box-shadow: none 보다 뒤에 두어야 사용자 말에도 테가 보인다. */
.summet-msg--jump .summet-msg__bubble {
  box-shadow: 0 0 0 2px var(--primary-color);
  transition: box-shadow 0.3s ease;
}

/* 단추가 말풍선 밖 아래에 앉으므로 그만큼 자리를 비워 둔다. 안 비우면
   다음 말풍선 위로 겹친다. */
.summet-msg--actionable {
  position: relative;
  padding-bottom: 34px;
}

/* 사용자 줄은 단추를 더 내렸으므로(bottom: -30px) 그만큼 자리를 더 비운다.
   안 비우면 단추가 다음 말풍선 위로 겹친다. */
/* 복사·언급하기 줄. 글이 시작하는 자리에 맞춘다.

   기준은 말풍선이다. 줄(wrap)을 기준 삼아 아바타 폭을 더하던 때에는,
   아바타를 숨기는 화면(워크스페이스는 display:none)에서 그만큼 단추가
   오른쪽으로 밀렸다. 말풍선에 붙이면 아바타가 있든 없든 글자와 같은 선에서
   시작한다. */
.summet-msg__bubble {
  position: relative;
}

.summet-msg-actions {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  /* 단추 상자는 28px 인데 아이콘(16px)이 가운데 있어 6px 안쪽에서 시작한다.
     말풍선 왼쪽 여백(4px)에서 그만큼 당겨야 아이콘이 글자 첫 칸에 온다. */
  left: -2px;
  /* 글 아래로 내려 앉힌다. 0 이면 말풍선 아래 여백(8px)만큼만 떨어져 단추가
     마지막 줄에 겹쳐 보였다. 질문 쪽과 같은 간격(글 아래 11px)이 되도록
     맞춘 값이다 — 두 쪽 여백이 달라(답변 8px, 질문 10px) 수치는 다르다. */
  bottom: -33px;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
}

.summet-msg--user.summet-msg--actionable {
  display: flex;
}
/* 사용자 줄은 말풍선 폭에 맞춰 단추를 양 끝으로 벌린다. 복사·편집은 글
   시작점(왼쪽)에, 언급하기는 말풍선 오른쪽 끝에 붙는다. */
.summet-msg--user .summet-msg-actions {
  /* 말풍선 글자 첫 칸은 안쪽 여백 14px. 아이콘이 6px 안쪽이므로 8px. */
  left: 8px;
  right: 8px;
  /* 말풍선에 너무 붙어 있어 조금 더 내린다. */
  bottom: -30px;
}

/* 언급하기만 오른쪽 끝으로. 복사·편집은 왼쪽에 모아 둔다. */
.summet-msg--user .summet-msg-actions [data-ws-msg-action="mention"] {
  margin-left: auto;
}

.summet-msg--actionable:hover .summet-msg-actions,
.summet-msg--actionable:focus-within .summet-msg-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.summet-msg-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.summet-msg-action-btn svg {
  display: block;
  flex-shrink: 0;
}

.summet-msg-action-btn:hover {
  color: var(--text-color);
  background: color-mix(in srgb, var(--text-color, #0f172a) 8%, transparent);
}

.summet-msg-mention-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  padding: 7px 10px;
  border: 1px solid var(--summet-chat-composer-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-color, #fff) 88%, transparent);
  color: var(--text-muted);
  font-size: 12px;
}

.summet-msg-mention-chip[hidden] {
  display: none !important;
}

.summet-msg-mention-chip__text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.summet-msg-mention-chip__close {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.summet-msg-edit-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(15, 23, 42, 0.18);
}

.summet-msg-edit-modal__sheet {
  width: min(920px, calc(100% - 28px));
  margin: 0 0 14px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--summet-chat-composer-border);
  background: var(--surface-color, #fff);
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.22);
}

.summet-msg-edit-modal__textarea {
  width: 100%;
  min-height: 190px;
  max-height: calc(52vh / var(--ui-zoom, 1));
  resize: vertical;
  border: none;
  outline: none;
  border-radius: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--border-color, #e2e8f0) 22%, transparent);
  color: var(--text-color);
  font: inherit;
  line-height: 1.5;
}

.summet-msg-edit-modal__actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.summet-msg-edit-modal__btn {
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}

.summet-msg-edit-modal__btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--summet-chat-composer-border);
}

.summet-msg-edit-modal__btn--send {
  background: #111;
  color: #fff;
}

.summet-msg__bubble--editing {
  padding: 8px 10px 10px !important;
}

/* 사용자 메시지 편집 시에는 기본 420px 제한을 해제하고
   메인 프롬프트 입력창 폭(--summet-chat-content-width)까지 넓힌다. */
.summet-msg--user .summet-msg__bubble--user-rich.summet-msg__bubble--editing {
  width: min(100%, var(--summet-chat-content-width, 64rem));
  max-width: min(100%, var(--summet-chat-content-width, 64rem));
}

.summet-msg-inline-edit {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.summet-msg-inline-edit__textarea {
  width: 100%;
  min-height: 170px;
  max-height: calc(56vh / var(--ui-zoom, 1));
  resize: vertical;
  border: none;
  outline: none;
  border-radius: 12px;
  padding: 11px 12px;
  background: color-mix(in srgb, var(--border-color, #e2e8f0) 26%, transparent);
  color: var(--text-color);
  font: inherit;
  line-height: 1.5;
}

.summet-msg-inline-edit__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.summet-msg-inline-edit__btn {
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid transparent;
  cursor: pointer;
}

.summet-msg-inline-edit__btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--summet-chat-composer-border);
}

.summet-msg-inline-edit__btn--send {
  background: #111;
  color: #fff;
}

.summet-chat-msg--user .summet-chat-bubble {
  background: var(--summet-chat-user-bg);
  color: var(--text-color);
  border: none;
  box-shadow: none;
  border-bottom-right-radius: 0.35rem;
}

.summet-chat-msg--bot .offline-chat-bot-icon {
  margin-top: 2px;
}

/* 사용자 말풍선: 이미지 + 텍스트 스택 (GPT 스타일 미리보기) */
.summet-msg__bubble--user-rich {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 10px 10px;
  max-width: min(100%, 420px);
}

.summet-msg__thumb {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .summet-msg__thumb {
  background: rgba(255, 255, 255, 0.06);
}

.summet-msg__text {
  font-size: calc(0.9375rem * var(--summet-chat-font-scale, 1));
  line-height: 1.5;
}

.summet-msg__text--caption {
  font-size: calc(0.8125rem * var(--summet-chat-font-scale, 1));
  color: var(--text-muted);
}

/* 답변 글 생김새는 static/css/chat_markdown.css 한 곳에 있다.
   채팅 화면과 공유 화면이 함께 쓴다. */

/* 코드·표·디스플레이 수식 — 오른쪽 상단 복사 */
.summet-copy-block {
  position: relative;
  margin: 0.5em 0;
}

.summet-copy-block--math {
  margin: 0.65em 0;
}

/* 복사 단추가 앉을 자리. 수식·표는 제 안에 여백이 없어 단추가 오른쪽 글(식 번호,
   마지막 칸) 위에 겹친다. 코드(--fence)·인용(--section)은 이미 제 padding 으로
   자리를 비워 두므로 여기서 또 주면 가로로 넘쳐 스크롤이 생긴다. */
.summet-copy-block--math,
.summet-copy-block--math-run,
.summet-copy-block:has(> table) {
  padding-right: 38px;
}

/* 넓은 표·수식은 제 칸 안에서 가로로 구른다. 대화 칸이 세로만 구르므로
   여기서 안 구르면 오른쪽이 잘려 보인다. */
.summet-copy-block--math,
.summet-copy-block--math-run,
.summet-copy-block:has(> table) {
  overflow-x: auto;
}

.summet-copy-block--math .katex-display {
  margin: 0;
}

/* 연속 디스플레이 수식 묶음 — 복사 버튼 하나 */
.summet-copy-block--math-run {
  position: relative;
  margin: 0.65em 0;
}

.summet-math-fragment .katex-display {
  margin: 0.4em 0;
}

.summet-math-fragment:first-child .katex-display {
  margin-top: 0;
}

.summet-math-fragment:last-child .katex-display {
  margin-bottom: 0;
}

.summet-copy-btn {
  position: absolute;
  top: 6px;
  /* 수식 오른쪽에는 식 번호 (1) (2) 가 붙는다. 단추를 그 위에 두면 번호를 가린다.
     블록이 오른쪽에 비워 둔 자리(padding-right) 안에 앉힌다 — 글과 겹치지도,
     말풍선 밖으로 나가지도 않는다. */
  right: 4px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

[data-theme="dark"] .summet-copy-btn {
  background: rgba(255, 255, 255, 0.1);
}

.summet-copy-btn:hover {
  background: rgba(0, 0, 0, 0.1);
  color: var(--text-color);
}

[data-theme="dark"] .summet-copy-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.summet-copy-btn--done {
  color: var(--primary-color, #16a34a);
}

.summet-copy-block--fence pre {
  margin: 0;
  padding-top: 36px;
  padding-right: 36px;
}

.summet-copy-block--section > p,
.summet-copy-block--section > blockquote {
  margin: 0;
  padding: 10px 40px 10px 12px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 0.92em;
  line-height: 1.45;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid var(--summet-chat-composer-border);
  white-space: pre-wrap;
  word-break: break-word;
}

[data-theme="dark"] .summet-copy-block--section > p,
[data-theme="dark"] .summet-copy-block--section > blockquote {
  background: rgba(255, 255, 255, 0.06);
}

.summet-copy-block--fence table {
  margin: 0;
}

/* 하단 입력 — GPT 큰 둥근 필드 */
.summet-chat-composer-wrap {
  flex-shrink: 0;
  padding: 12px 0 8px;
  margin-top: auto;
  border-top: none;
  background: transparent;
}

/* 입력창은 대화 영역 위에 떠 있다.

   예전에는 흐름 안에 두어(position: relative) 대화 영역의 높이를 그만큼
   깎았다. 답변을 덮지 않게 하려던 것인데, 그 바람에 굴러가는 영역이
   입력창 윗선에서 끝나 스크롤 막대도 거기서 끊겼다.

   이제 입력창을 흐름에서 빼고, 대신 대화 영역 아래에 입력창 높이만큼
   안쪽 여백을 준다(--summet-chat-composer-h). 답변은 여전히 가려지지
   않으면서 굴러가는 영역은 화면 바닥까지 이어진다. */
.summet-chat-composer-wrap--viewport-fixed {
  position: absolute !important;
  /* 대화 목록과 같은 옆 여백을 쓴다. left: 0 이던 때에는 입력창만 칸
     맨 왼쪽까지 붙어, 말풍선보다 20px 더 왼쪽으로 튀어나왔다. */
  left: var(--summet-chat-gutter, 20px);
  /* 스크롤 막대 자리는 비워 둔다. 0 으로 두면 입력창의 불투명한 바탕이
     막대를 덮어, 막대가 프롬프트 위를 지나가는 것처럼 보인다. */
  right: calc(var(--summet-chat-gutter, 20px) + var(--summet-chat-scrollbar-w, 12px));
  /* 안내 문구(28px)가 아래에 떠 있으므로 그 위에 앉힌다. */
  bottom: var(--summet-chat-disclaimer-h, 28px);
  z-index: 2;
  margin-top: 0;
  margin-bottom: 0;
  padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0));
  border-top: none;
  /* 입력창 양옆은 대화가 흐리게 비친다(입력창 자체는 제 바탕이 있어 또렷하다). 띠 전체가 이미 흐린 상태에서
     시작해 안내 줄로 갈수록 짙어지고, 띠 위쪽의 흐려지기 시작하는 구간은 ::before 가 맡는다.
     예전 두 판: 바탕색으로 꽉 채워 양옆의 답변·차트가 칸째 사라졌고, 그다음엔 띠 맨 위를 완전히 투명하게 시작해
     입력창 위 모서리 옆(대각선 양쪽)의 글이 하나도 흐려지지 않았다. */
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg-color) var(--summet-composer-veil-top), transparent) 0%,
    color-mix(in srgb, var(--bg-color) 92%, transparent) 100%
  );
  --summet-composer-veil-top: 68%;
  box-sizing: border-box;
  /* 안내 줄 바로 위에 앉는다. 띄우는 8px 는 안내 줄의 위 padding 이 맡는다(아래 참조). */
}

/* 띠 바로 위 — 다가오는 대화가 투명에서 띠의 흐림까지 차츰 흐려진다. 띠 윗선에서 글이 갑자기 흐려지지 않게. */
.summet-chat-composer-wrap--viewport-fixed::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 32px;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--bg-color) 0%, transparent),
    color-mix(in srgb, var(--bg-color) var(--summet-composer-veil-top), transparent)
  );
  pointer-events: none;
}

/* 띠 아래 안내 줄 높이까지 — 안내 줄의 바탕은 내용 폭(64rem)뿐이라 넓은 화면에서는 그 양옆 바닥이 흐려지지 않았다. */
.summet-chat-composer-wrap--viewport-fixed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: var(--summet-chat-disclaimer-h, 28px);
  background: color-mix(in srgb, var(--bg-color) 92%, transparent);
  pointer-events: none;
}

/* 안내 문구도 입력창처럼 흐름에서 뺀다. 흐름에 두면 이 28px 때문에 대화
   영역이 그만큼 짧아져 막대가 바닥에 닿지 않는다. 아래 여백 계산에는
   이미 이 높이가 함께 들어가 있다(JS 가 둘을 합쳐 잰다). */
.summet-chat-composer-disclaimer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  flex-shrink: 0;
  max-width: var(--summet-chat-content-width, 64rem);
  width: 100%;
  margin: 0 auto;
  /* 좌우 padding 이 폭에 더해지면 좁은 화면에서 칸 밖으로 8px 넘친다. */
  box-sizing: border-box;
  /* 위 12px = 입력창과의 사이(8px) + 원래 4px. 이 줄이 입력창 바로 아래에 붙으므로
     스크롤한 답변이 입력창 아래로 비칠 틈이 없다. */
  padding: 12px 12px calc(8px + env(safe-area-inset-bottom, 0));
  text-align: center;
  font-size: 11px;
  line-height: 1.45;
  /* 바탕은 불투명(대화 글을 가린다), 글자만 55% 로 흐리게. 줄 전체 opacity 는 바탕까지
     비치게 하므로 쓰지 않는다. */
  background: var(--bg-color);
  color: color-mix(in srgb, var(--text-muted, #888888) 55%, transparent);
  pointer-events: none;
}

.summet-workspace-layout--with-preview .summet-chat-composer-disclaimer {
  max-width: min(100%, 34.7rem);
}

/* 첫 화면에서는 입력창을 흐름 안으로 되돌린다.

   대화 중에는 입력창이 바닥에 붙어 있어야 하지만(absolute), 첫 화면에서는
   로고 바로 아래 붙어야 한다. 바닥에 붙여 둔 채로는 로고가 아무리 내려와도
   둘 사이가 벌어질 수밖에 없다 — 243px 이나 떨어져 보이던 까닭이다.

   흐름으로 되돌리면 위의 .summet-chat-shell 이 정한 gap 하나로 둘 사이가
   정해지고, 두 덩이가 한 묶음으로 가운데 선다. */
/* 첫 화면에는 비칠 대화가 없다 — 띠 위 흐려지는 구간도 없다. */
.summet-chat-page--idle .summet-chat-composer-wrap--viewport-fixed::before,
.summet-chat-page--idle .summet-chat-composer-wrap--viewport-fixed::after {
  display: none;
}

.summet-chat-page--idle .summet-chat-composer-wrap--viewport-fixed {
  position: static !important;
  width: min(100%, var(--summet-workspace-idle-width, 44rem));
  margin: 0 auto;
  padding: 0 1rem;
  border-top: none;
  background: transparent;
  /* 옆으로 당기지 않는다. 사이드바는 flex 칸이라 본문은 그 오른쪽에서
     시작하고, 이 상자는 그 안에서 margin:0 auto 로 선다 — 그게 곧 본문 칸
     한가운데다. 예전에는 사이드바 폭의 절반을 왼쪽으로 당겨 '창' 한가운데에
     세웠는데, 재어 보니 본문 칸에서는 펼쳤을 때 136px, 접었을 때 29px
     왼쪽으로 치우쳐 보였다. 눈은 본문 칸을 틀로 읽는다. */
  transform: none;
}

/* 첫 화면에서는 안내 문구도 흐름 안에 둔다(입력창과 같은 이유). */
.summet-chat-page--idle .summet-chat-composer-disclaimer {
  position: static;
  /* 첫 화면에서는 흐름 안에 있으므로 위 padding 이 곧 화면 높이다. 원래 값(4px)으로 —
     12px 로 두면 첫 화면이 8px 길어져 짧은 창에서 껍데기가 굴러간다. */
  padding-top: 4px;
}

/* 입력창은 absolute 로 좌우를 0 에 걸어 두고 margin:0 auto 로 가운데 선다.
   여기서 left 를 auto 로 풀면 '왼쪽은 내용에 맡기고 오른쪽만 0' 이 되어
   상자가 오른쪽 끝에 붙는다. 크롬은 어찌어찌 가운데로 그려 주지만 사파리는
   규격대로 오른쪽으로 밀어 버린다 — 홈 화면 입력창이 사파리에서만 오른쪽으로
   치우쳐 보이던 까닭이다. 좌우 여백만 지우고 left 는 건드리지 않는다. */
body.drawer-collapsed .summet-chat-composer-wrap--viewport-fixed,
body.hide-sidebar .summet-chat-composer-wrap--viewport-fixed {
  padding-left: 0;
  padding-right: 0;
}







/* 입력창은 absolute 로 좌우를 0 에 걸어 두고 margin:0 auto 로 가운데 선다.
   여기서 left 를 auto 로 풀면 '왼쪽은 내용에 맡기고 오른쪽만 0' 이 되어
   상자가 오른쪽 끝에 붙는다. 크롬은 어찌어찌 가운데로 그려 주지만 사파리는
   규격대로 오른쪽으로 밀어 버린다 — 홈 화면 입력창이 사파리에서만 오른쪽으로
   치우쳐 보이던 까닭이다. 좌우 여백만 지우고 left 는 건드리지 않는다. */
body.drawer-collapsed .summet-chat-composer-wrap--viewport-fixed,
body.hide-sidebar .summet-chat-composer-wrap--viewport-fixed {
  padding-left: 0;
  padding-right: 0;
}



.summet-chat-composer-wrap--viewport-fixed .summet-chat-composer {
  max-width: var(--summet-chat-content-width, 64rem);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

.summet-workspace-layout--with-preview .summet-chat-composer-wrap--viewport-fixed .summet-chat-composer {
  max-width: min(100%, 34.7rem);
}

/* ══════════════════════════════════════════════
   Workspace 도구 그리드 — 두 묶음의 도구를 평평한 격자에 다 펼친다.
   바탕 있는 카드로 고정해 두어(돌리거나 끄는 캐러셀이 아니다) 또렷하게 읽힌다 — 2026-10 전까지는
   호(弧) 위에서 돌아가는 바퀴였는데, 가운데서 먼 카드가 옅어지고(불투명도 0.55까지) 카드 바탕이
   아예 없어 뿌옇게 보인다는 평이 있었다. 이제 모든 카드가 같은 바탕·불투명도로 선다.
   ══════════════════════════════════════════════ */
.summet-workspace-tools {
  position: relative;
  width: min(100%, var(--summet-workspace-idle-width, 52rem));
  margin: 10px auto 0;
}

.summet-workspace-tools[hidden],
.summet-chat-page:not(.summet-chat-page--idle) .summet-workspace-tools {
  display: none !important;
}

.ws-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
}

.summet-workspace-tool-chip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-color);
  color: var(--text-color);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.summet-workspace-tool-chip:hover {
  background: var(--sidebar-hover);
  border-color: color-mix(in srgb, var(--text-color) 18%, transparent);
}

.summet-workspace-tool-chip:active {
  transform: scale(0.98);
}

.summet-workspace-tool-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 45%, transparent);
}

.summet-workspace-tool-chip__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent);
  color: var(--primary-color);
}

.summet-workspace-tool-chip__icon svg {
  width: 18px;
  height: 18px;
}

.summet-workspace-tool-chip__text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summet-workspace-tool-chip__name {
  max-width: 100%;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text-color);
}

.summet-workspace-tool-chip__desc {
  font-size: 12px;
  line-height: 1.3;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 640px) {
  .ws-tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 좁은 화면은 설명 줄을 빼 이름만 — 두 칸 격자에선 한 줄로 안 들어간다. */
  .summet-workspace-tool-chip__desc {
    display: none;
  }
}

.summet-chat-composer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  padding: 14px 14px 10px;
  border-radius: var(--summet-prompt-radius, 20px);
  /* 얇은 회색 테두리 — 라이트·다크 같은 색(모든 프롬프트 칸 공통, 앱 ChatComposer 와 같다). */
  border: var(--summet-prompt-border-width, 1px) solid var(--summet-prompt-border, #8a9096);
  background: var(--summet-chat-composer-bg);
  box-shadow: var(--summet-chat-composer-shadow);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  overflow: visible;
}

.summet-chat-composer-wrap,
.summet-chat-composer__toolbar,
.summet-chat-composer__toolbar-left {
  overflow: visible;
}

.summet-chat-composer__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 2px 0 2px;
}

.summet-chat-composer__toolbar-left,
.summet-chat-composer__toolbar-right {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.summet-chat-composer__toolbar-left {
  flex: 1 1 auto;
}

.summet-chat-composer__toolbar-right {
  flex: 0 0 auto;
}

.summet-chat-composer:focus-within {
  border-color: var(--summet-prompt-border, #8a9096);
  box-shadow: var(--summet-chat-composer-shadow);
}

[data-theme="dark"] .summet-chat-composer:focus-within {
  border-color: var(--summet-prompt-border, #8a9096);
  box-shadow: var(--summet-chat-composer-shadow);
}

.summet-chat-icon-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--text-muted) 88%, var(--text-color));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.summet-chat-icon-btn:hover {
  background: color-mix(in srgb, var(--text-color) 6%, transparent);
  color: var(--text-color);
}

.summet-chat-icon-btn:active {
  transform: scale(0.96);
}

/* 웹 검색 켜고 끄기.

   꺼져 있을 때는 조용한 회색, 켜면 파랗게 물든다. 값이 더 드는 기능이라
   지금 켜져 있는지가 한눈에 보여야 한다. */
.summet-chat-web-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 11px;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted, #64748b);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}

.summet-chat-web-btn:hover {
  background: var(--sidebar-hover, rgba(0, 0, 0, .04));
  color: var(--text-color, #0f172a);
}

.summet-chat-web-btn.is-on {
  border-color: #0082FF;
  background: rgba(0, 130, 255, .10);
  color: #0082FF;
}

.summet-chat-web-btn svg { flex-shrink: 0; }

/* 좁은 화면에서는 이름표를 접고 아이콘만 남긴다. */
@media (max-width: 640px) {
  .summet-chat-web-btn span { display: none; }
  .summet-chat-web-btn { padding: 0 8px; }
}

.summet-chat-icon-btn--plus {
  color: color-mix(in srgb, var(--text-muted) 70%, var(--text-color));
}

.summet-chat-composer textarea {
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text-color);
  font-size: 0.98rem;
  line-height: 1.5;
  resize: none;
  min-height: 44px;
  max-height: 160px;
  height: 44px;
  padding: 4px 6px 8px;
  overflow-y: auto;
  font-family: inherit;
  box-sizing: border-box;
  letter-spacing: -0.01em;
}

/* 색은 테마 변수로 둔다. 예전에는 여기서 #111827 로 덮어써, 위 규칙의
   var(--text-color) 가 무효가 되고 다크 모드에서 글자가 검게 나왔다. */
.summet-chat-composer textarea {
  /* 본문과 같은 굵기로. 500 은 입력창 글자만 유독 굵어 보이게 했다. */
  font-weight: 400;
  color: var(--text-color);
}
.summet-chat-composer textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.summet-chat-composer .summet-chat-model-wrap {
  display: inline-flex;
  align-items: center;
  max-width: min(260px, (52vw / var(--ui-zoom, 1)));
  min-width: 0;
}

.summet-chat-composer .chatbot-model-toolbar {
  display: inline-flex !important;
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  width: auto;
}

.summet-chat-composer .custom-model-select {
  overflow: visible;
}

.summet-chat-composer textarea:focus {
  outline: none;
}

.summet-chat-send {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--summet-chat-send-bg);
  color: var(--summet-chat-send-fg);
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: opacity 0.15s ease, transform 0.12s ease, background 0.15s ease, color 0.15s ease;
}

.summet-chat-send.is-ready:not(.summet-chat-send--stop),
.summet-chat-send:not(:disabled):not(.summet-chat-send--stop).is-ready {
  background: #111113;
  color: #ffffff;
}

.summet-chat-send:hover:not(:disabled) {
  transform: translateY(-0.5px) scale(1.03);
  filter: brightness(0.97);
}

.summet-chat-send:active:not(:disabled) {
  transform: scale(0.95);
}

.summet-chat-send:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.summet-chat-send--stop {
  background: #f5f5f7 !important;
  color: #111113 !important;
}

[data-theme="dark"] .summet-chat-send--stop {
  background: #f4f4f5 !important;
  color: #111113 !important;
}

.summet-chat-url-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--border-color, #e2e8f0) 90%, var(--primary-color, #6366f1));
  background: linear-gradient(
    165deg,
    color-mix(in srgb, var(--surface-color, #fff) 97%, var(--primary-color, #6366f1)) 0%,
    var(--surface-color, #fff) 100%
  );
}

.summet-chat-url-input {
  flex: 1 1 160px;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--input-bg, #f8fafc);
  color: var(--text-color);
  font-size: 13px;
}

.summet-chat-url-btn {
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border-color, #e2e8f0);
  background: var(--surface-color, #fff);
  color: var(--text-color);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.summet-chat-url-btn--primary {
  background: var(--text-color, #0f172a);
  color: var(--surface-color, #fff);
  border-color: transparent;
}

.summet-chat-banner {
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 13px;
  background: rgba(234, 179, 8, 0.12);
  border: 1px solid rgba(234, 179, 8, 0.35);
  color: var(--text-color);
}

.summet-chat-banner[hidden] {
  display: none !important;
}

@media (max-width: 640px) {
  .summet-chat-sticky-layout {
    padding: 0 0.75rem;
  }

  .summet-msg__bubble {
    max-width: 94%;
  }

  .summet-chat-page {}
}

@media (max-width: 768px) {
  .summet-workspace-layout,
  .summet-workspace-layout--with-preview {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding-right: 0;
  }
  .summet-workspace-splitter {
    display: none !important;
  }
  .summet-workspace-layout--with-preview .summet-workspace-chat-pane {
    flex: none;
    min-width: 0;
  }
  .summet-workspace-layout--with-preview .summet-workspace-preview {
    flex: none;
    width: auto;
    max-width: none;
  }
  /* 모바일에선 작업판을 전체 화면 오버레이로(이미 크니 크게 보기는 없다) */
  .summet-workspace-layout--with-preview .summet-workspace-preview {
    position: fixed;
    inset: 0;
    z-index: 60;
    margin: 0;
    border-left: 0;
    border-radius: 0;
    animation: none;
  }
  #summet-workspace-preview-expand {
    display: none;
  }
  .summet-chat-history-btn__label {
    display: none;
  }
  .summet-chat-history-btn {
    width: 34px;
    padding: 0;
    justify-content: center;
  }
  .summet-chat-history-nav {
    padding: 12px 12px 6px;
  }
  .summet-chat-composer-wrap--viewport-fixed {
    left: 0 !important;
    padding: 6px 12px calc(4px + env(safe-area-inset-bottom, 0)) !important;
    transform: translateY(-6px) !important;
  }
  .summet-chat-page--idle .summet-chat-composer-wrap--viewport-fixed {
    padding: 0 12px !important;
    transform: translateY(calc((-3vh / var(--ui-zoom, 1)) - 6px)) !important;
  }
  .summet-workspace-brand {
    padding-bottom: 2.8rem;
  }
  .summet-chat-page--idle .summet-workspace-brand {
    transform: translateY(calc(-3vh / var(--ui-zoom, 1)));
  }
  .summet-workspace-tools {
    margin-top: 14px;
  }
  .summet-chat-drawer-backdrop,
  .summet-chat-drawer {
    left: 0 !important;
  }
  .main-content:has(.summet-chat-sticky-layout) {
    padding: 0 !important;
  }
}

@media (max-width: 480px) {
  .summet-chat-hero {
    padding: 48px 16px 24px;
  }
  .summet-chat-hero h2 {
    font-size: 1.3rem;
  }
  .summet-chat-composer {
    border-radius: var(--summet-prompt-radius, 20px);
  }
  .summet-chat-composer__textarea {
    font-size: 14px;
    min-height: 40px;
  }
  .summet-msg__bubble {
    max-width: 96%;
    font-size: 14px;
    padding: 10px 14px;
  }
}

/* WorkSpace 데이터 분석 업로드 패널 */
.ws-data-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ws-data-panel p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.ws-data-panel__files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 0;
}

.ws-data-file-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 12px;
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ws-data-panel__pick {
  align-self: flex-start;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #111827;
  color: #fff;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}

.ws-data-panel__pick:hover {
  background: #1f2937;
}

/* ── 첨부 칩 (여러 개) ────────────────────────────────────────────
   renderAttachChips 가 이 안에만 다시 그린다. */
.summet-chat-chips {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

/* 아이콘 상자: 이미지는 썸네일, 그 밖은 확장자 딱지 */
.summet-chat-chip__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--text-color) 7%, transparent);
  overflow: hidden;
}

.summet-chat-chip__thumb {
  width: 36px;
  height: 36px;
  object-fit: cover;
  display: block;
}

.summet-chat-chip__ext {
  color: var(--text-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* × 는 마우스를 올렸을 때만. 늘 떠 있으면 이름이 밀려 읽기 어렵다. */
.summet-chat-chips .summet-chat-chip__remove {
  opacity: 0;
  transition: opacity .12s ease;
}
.summet-chat-chip:hover .summet-chat-chip__remove,
.summet-chat-chip__remove:focus-visible {
  opacity: 1;
}

/* 문서 칩: 마우스를 올리면 내용이 흐려지고 그 위에 「범위 조정」이 뜬다.
   누르면 그 문서가 LLM 에 읽힐 쪽 범위를 고른다. */
.summet-chat-chip--ranged .summet-chat-chip__icon,
.summet-chat-chip--ranged .summet-chat-chip__body {
  transition: opacity .12s ease;
}
.summet-chat-chip--ranged:hover .summet-chat-chip__icon,
.summet-chat-chip--ranged:hover .summet-chat-chip__body,
.summet-chat-chip--ranged:focus-within .summet-chat-chip__icon,
.summet-chat-chip--ranged:focus-within .summet-chat-chip__body {
  opacity: 0.28;
}
.summet-chat-chip__range {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--summet-chat-composer-border);
  background: var(--summet-chat-composer-bg);
  color: var(--text-color);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.summet-chat-chip--ranged:hover .summet-chat-chip__range,
.summet-chat-chip--ranged:focus-within .summet-chat-chip__range {
  opacity: 1;
  pointer-events: auto;
}
.summet-chat-chip__range:hover {
  background: var(--text-color);
  color: var(--summet-chat-composer-bg);
}
@media (hover: none) {
  .summet-chat-chips .summet-chat-chip__remove { opacity: 1; }
  /* 손가락으로는 올려 둘 수 없다 — 문서 칩을 누르면 바로 범위 화면. */
  .summet-chat-chip--ranged .summet-chat-chip__range {
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    height: 24px;
    padding: 0 9px;
    font-size: 11px;
    box-shadow: none;
  }
  .summet-chat-chip--ranged:hover .summet-chat-chip__icon,
  .summet-chat-chip--ranged:hover .summet-chat-chip__body {
    opacity: 1;
  }
}

/* ── 대화를 받아 오는 동안 자리 잡기 ──────────────────────────────
   목록에서 대화를 누르면 본문이 오기까지 잠깐 걸린다. 그동안 빈 시작
   화면을 보여 주면 눌렀는데 아무 일도 안 일어난 것처럼 보이고, 곧 대화가
   들어오면서 화면이 통째로 바뀌어 깜빡인다. 올 자리를 미리 잡아 둔다. */
.summet-skeleton {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 0;
}

.summet-skeleton__row {
    display: flex;
}

.summet-skeleton__row--user {
    justify-content: flex-end;
}

.summet-skeleton__bar {
    height: 44px;
    border-radius: 14px;
    background: linear-gradient(90deg,
        var(--summet-skeleton-base, rgba(0, 0, 0, .06)) 25%,
        var(--summet-skeleton-shine, rgba(0, 0, 0, .11)) 37%,
        var(--summet-skeleton-base, rgba(0, 0, 0, .06)) 63%);
    background-size: 400% 100%;
    animation: summet-skeleton-sweep 1.4s ease-in-out infinite;
}

@keyframes summet-skeleton-sweep {
    from { background-position: 100% 50%; }
    to   { background-position: 0 50%; }
}

/* 화면을 어둡게 쓰는 사람에게는 밝은 결이 지나가야 보인다. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --summet-skeleton-base: rgba(255, 255, 255, .07);
        --summet-skeleton-shine: rgba(255, 255, 255, .13);
    }
}

:root[data-theme="dark"] {
    --summet-skeleton-base: rgba(255, 255, 255, .07);
    --summet-skeleton-shine: rgba(255, 255, 255, .13);
}

/* 움직임을 줄여 달라고 한 사람에게는 결만 멈춘다. */
@media (prefers-reduced-motion: reduce) {
    .summet-skeleton__bar { animation: none; }
}

/* ── 입력창 툴바는 홈과 챗봇이 같은 한 줄이다 ──
   챗봇 화면은 모델 고르기와 개인정보보호 단추가 더 있는데, .model-picker-row 가 접히면서
   개인정보보호가 둘째 줄로 내려갔다. 입력창 안에서는 접지 않고, 모자라면 글자를 줄인다. */
.summet-chat-composer .summet-chat-composer__toolbar-left {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
}
.summet-chat-composer .summet-chat-model-wrap,
.summet-chat-composer .chatbot-model-toolbar,
.summet-chat-composer .model-picker-row {
  flex: 0 1 auto;
  min-width: 0;
  flex-wrap: nowrap;
}
.summet-chat-composer .custom-model-select {
  flex: 0 1 auto;
  min-width: 0;
}
.summet-chat-composer .model-select-trigger,
.summet-chat-composer .ws-masking-toggle {
  max-width: 100%;
  min-width: 0;
}
.summet-chat-composer .trigger-text,
.summet-chat-composer .ws-masking-toggle__text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* 자리가 넉넉하면 이름을 다 보인다 — 모델 묶음의 260px 상한과 고르기 자체의 고정 폭(168px 등)은
   입력창 밖(좁은 툴바)용이다. 입력창 안에서는 줄 폭만큼 쓰고, 모자랄 때만 flex 로 줄어든다. */
.summet-chat-composer .summet-chat-model-wrap,
.summet-chat-composer .chatbot-model-toolbar,
.summet-chat-composer .model-picker-row,
.summet-chat-composer .custom-model-select {
  width: auto;
  max-width: none !important;
}
.summet-chat-composer .model-select-trigger .trigger-text {
  max-width: none;
}
@media (max-width: 720px) {
  .summet-chat-composer .ws-masking-toggle__text { display: none; }
  .summet-chat-composer .model-select-trigger .trigger-text { max-width: 140px; }
}

/* 음성 입력 마이크(voice_dictation.css)가 보내기 옆에 들어가면 폰 폭에서 도구 줄이 모자란다.
   이름을 조각내 보이거나(“Basic” 이 “E” 로) 꺾쇠가 단추 밖으로 삐지는 대신, 줄 폭에 따라 접는다 —
   먼저 모델 이름(점·꺾쇠만 남는다), 더 좁으면 개인정보보호 단추의 꺾쇠. 웹 검색 단추가 좁은 화면에서
   이름표를 접는 것과 같은 방식이다. 기준은 화면이 아니라 줄 폭이다(옆 작업판이 열려도 맞게).
   글자를 감춘 개인정보보호 단추는 더 줄일 글자가 없으니 줄지 않고, 모자라면 모델 이름이 줄어든다(앱과 같다). */
.summet-chat-composer .summet-chat-composer__toolbar { container-type: inline-size; }
.summet-chat-composer__toolbar:has(.vd-mic) .ws-masking-select { flex-shrink: 0; }
@container (max-width: 304px) {
  .summet-chat-composer__toolbar:has(.vd-mic) .model-select-trigger .trigger-text { display: none; }
}
@container (max-width: 280px) {
  .summet-chat-composer__toolbar:has(.vd-mic) .ws-masking-toggle .caret { display: none; }
}

/* 질문 위에 작게 붙는 '언급한 것'. 무엇을 가리킨 질문인지 기록에도 남긴다. */
.summet-msg__mentions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 6px;
}

.summet-msg__mention {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-muted);
  font-size: 11.5px;
  line-height: 1.5;
}

/* 사용자 말의 파일 칩(누르면 원본을 받는다) — 모양은 언급 칩(.summet-msg__mention)을 물려받는다. */
.summet-msg__file { font: inherit; font-size: 11.5px; cursor: pointer; }
.summet-msg__file:hover { color: var(--text-color); border-color: var(--text-muted); }

/* 답변·프롬프트 복사 단추: 누르면 잠깐 체크 표시(초록)로 바뀐다 */
.summet-msg-action-btn.is-done { color: #16a34a; }

/* 홈 입력창 — Summet Chat 표지, 도구·설정 메뉴, Live 대화.
   웹 검색 단추는 설정 스위치가 대신 누르므로 자리만 남긴다. */
.summet-chat-composer--home .summet-chat-web-btn--parked {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
/* 딥 리서치를 켜면 설정 창을 열지 않아도 입력창에서 바로 보인다. */
.summet-chat-composer--home .summet-chat-web-btn--parked.is-on {
  position: static;
  width: auto;
  height: 32px;
  padding: 0 11px;
  margin: 0;
  overflow: visible;
  clip: unset;
  border: 1px solid #0082FF;
}
.home-prompt-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}
.summet-chat-composer .home-prompt-line > textarea {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
.home-composer-head {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 6px 2px 0 0;
}
.summet-chat-composer--home .home-composer-head .model-select-trigger {
  box-sizing: border-box;
  height: 32px !important;
  padding: 0 12px !important;
}
.home-composer-head .summet-chat-model-wrap { margin-left: auto; }
.home-composer-head .model-picker-row { justify-content: flex-end; margin: 0; }
/* 홈은 등급 옆에 개인정보보호 단추를 두지 않는다. 켜고 끄는 곳은 설정 메뉴뿐이다. */
.summet-chat-composer--home .ws-masking-select { display: none !important; }
.home-pop-wrap { position: relative; }
/* 홈 메뉴는 단추 높이가 아니라 입력창 전체를 기준으로 띄운다. 단추 아래 10px 는 창 안쪽이라 겹친다. */
.summet-chat-composer--home .home-pop-wrap { position: static; }
.summet-chat-composer--home .home-pop {
  top: calc(100% + 14px);
  bottom: auto;
}
.summet-chat-page:not(.summet-chat-page--idle) .summet-chat-composer--home .home-pop {
  top: auto;
  bottom: calc(100% + 14px);
}
.home-pill.is-open {
  color: #0082FF;
  border-color: #0082FF;
  background: rgba(0, 130, 255, .10);
}
.home-pop[hidden] { display: none !important; }
.home-pop:not([hidden]) { display: block; }
.home-pop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  min-width: 280px;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, .08));
  background: var(--surface-color, #1c1c1f);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  color: var(--text-color, #e4e4e7);
}
.summet-chat-page:not(.summet-chat-page--idle) .home-pop {
  top: auto;
  bottom: calc(100% + 10px);
}
.home-tools-menu {
  width: min(520px, calc(100vw - 32px));
  max-height: min(440px, calc(100vh - 140px));
  overflow: auto;
  padding: 8px 8px 10px;
}
.home-tools-current {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 6px 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--text-color, #fff) 6%, transparent);
  font-weight: 650;
  font-size: 13px;
}
.home-tools-current__name { display: inline-flex; align-items: center; gap: 8px; }
.home-tools-current__check { color: #0082FF; }
.home-tools-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; padding: 4px 8px 8px; }
.home-tools-col__title {
  margin: 4px 0 6px;
  font-size: 12px;
  font-weight: 650;
  color: var(--text-muted, #a1a1aa);
}
.home-tools-menu .home-tool-row {
  width: 100%;
  margin: 0 0 2px;
  padding: 7px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  box-shadow: none;
  align-items: center;
  gap: 8px;
}
.home-tools-menu .summet-workspace-tool-chip__icon {
  width: 16px;
  height: 16px;
  border-radius: 0;
  background: transparent;
  color: var(--text-color, #e4e4e7);
}
.home-tools-menu .summet-workspace-tool-chip__icon svg { width: 16px; height: 16px; }
.home-tools-menu .home-tool-row__name { font-size: 13.5px; font-weight: 400; }
.home-pop__note {
  margin: 8px 8px 2px;
  font-size: 12px;
  color: var(--text-muted, #a1a1aa);
}
.home-settings-menu { width: min(340px, calc(100vw - 32px)); }
.home-settings-title { margin: 2px 6px 8px; font-size: 13px; font-weight: 600; }
.home-setting {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  cursor: pointer;
}
div.home-setting { cursor: default; }
.home-setting__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.home-setting__name { font-size: 13.5px; font-weight: 500; }
.home-setting__desc { font-size: 12px; color: var(--text-muted, #a1a1aa); line-height: 1.35; }
.home-switch {
  appearance: none;
  width: 36px;
  height: 22px;
  border-radius: 999px;
  border: 0;
  background: #3f3f46;
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
}
.home-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .15s ease;
}
.home-switch:checked { background: #0082FF; }
.home-switch:checked::after { transform: translateX(14px); }
.home-setting__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted, #a1a1aa);
  cursor: pointer;
  flex: 0 0 auto;
}
.home-setting__more:hover,
.home-setting__more[aria-expanded="true"] {
  background: color-mix(in srgb, var(--text-color, #fff) 8%, transparent);
  color: var(--text-color, #e4e4e7);
}
.home-privacy-items {
  position: absolute;
  left: calc(100% + 10px);
  top: 0;
  z-index: 2;
  width: min(240px, calc(100vw - 32px));
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--border-color, rgba(255, 255, 255, .08));
  background: var(--surface-color, #1c1c1f);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
  color: var(--text-color, #e4e4e7);
}
.home-privacy-items[hidden] { display: none !important; }
.home-privacy-items__back {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 4px;
  padding: 6px 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted, #a1a1aa);
  font-size: 12px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}
.home-privacy-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 13.5px;
  cursor: pointer;
}
.home-privacy-item:hover { background: color-mix(in srgb, var(--text-color, #fff) 6%, transparent); }
.home-privacy-items.is-off .home-privacy-item span { opacity: .45; }
@media (max-width: 720px) {
  .home-privacy-items {
    left: 0;
    right: 0;
    width: auto;
  }
}
.summet-chat-composer--home .summet-chat-composer__toolbar-right { display: flex; align-items: center; gap: 8px; }
.summet-chat-composer--home .summet-chat-composer__toolbar-right .vd-mic { order: 1; }
.summet-chat-composer--home .home-live-btn { order: 2; height: 34px; }
.summet-chat-composer--home .summet-chat-send { order: 3; }

/* 홈 Live 대화 창(앱 lib/widgets/home_live_dialog.dart 와 같은 모양). 상태는 .home-live[data-state] 와 [data-muted]. */
.home-live[hidden] { display: none !important; }
.home-live:not([hidden]) {
  display: flex;
  position: fixed;
  inset: 0;
  /* 메시지 단추(100102)·메시지 창보다 위 — 대화하는 동안은 이 창만 보인다. */
  z-index: 100200;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background: rgba(10, 12, 16, .52);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.home-live__card {
  width: min(520px, 100%);
  max-height: calc(100dvh / var(--ui-zoom, 1) - 48px);
  display: flex;
  flex-direction: column;
  border-radius: 28px;
  border: 1px solid var(--border-color, #E4E1D9);
  background: var(--surface-color, #fff);
  color: var(--text-color, #101617);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .45);
  padding: 18px 20px;
  overflow: hidden;
}
.home-live__head { display: flex; align-items: center; gap: 8px; flex: none; }
.home-live__title { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.home-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-muted, #6B7A7D); }
.home-live[data-state="listening"] .home-live__dot { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }
.home-live__model {
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-color, #101617) 6%, transparent);
  color: var(--text-muted, #6B7A7D);
  font-size: 11.5px;
  font-weight: 600;
}
.home-live__close {
  margin-left: auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-color, #101617) 6%, transparent);
  color: var(--text-color, #101617);
  cursor: pointer;
}
.home-live__close:hover { background: color-mix(in srgb, var(--text-color, #101617) 12%, transparent); }

/* 가운데 — 원(듣는 동안 고리가 퍼진다)·상태·안내와 시간 */
.home-live__stage { display: flex; flex-direction: column; align-items: center; padding: 26px 0 20px; text-align: center; flex: none; }
.home-live__orb { position: relative; width: 132px; height: 132px; display: grid; place-items: center; }
.home-live__core {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #8cc8ff 0%, #2f97ff 42%, #0063cf 100%);
  box-shadow: 0 14px 32px -10px rgba(0, 130, 255, .6), inset 0 -6px 14px rgba(0, 40, 120, .3);
  transition: filter .3s ease, opacity .3s ease;
}
.home-live__orb i { position: absolute; inset: 18px; border-radius: 50%; border: 2px solid rgba(0, 130, 255, .38); opacity: 0; }
.home-live[data-state="listening"]:not([data-muted]) .home-live__orb i { animation: home-live-ring 2.4s ease-out infinite; }
.home-live[data-state="listening"]:not([data-muted]) .home-live__orb i:nth-child(2) { animation-delay: 1.2s; }
.home-live[data-state="listening"]:not([data-muted]) .home-live__core { animation: home-live-breathe 2.4s ease-in-out infinite; }
.home-live[data-state="connecting"] .home-live__core { opacity: .7; animation: home-live-breathe 1.6s ease-in-out infinite; }
.home-live[data-state="paused"] .home-live__core,
.home-live[data-muted] .home-live__core { filter: saturate(.2); opacity: .55; }
.home-live[data-state="error"] .home-live__core { filter: grayscale(1); opacity: .4; }
@keyframes home-live-ring {
  0% { transform: scale(1); opacity: .75; }
  100% { transform: scale(1.5); opacity: 0; }
}
@keyframes home-live-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .home-live__orb i, .home-live__core { animation: none !important; }
}
.home-live__status { margin: 18px 0 0; font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.home-live__meta { margin: 6px 0 0; min-height: 20px; display: flex; justify-content: center; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-muted, #6B7A7D); }
.home-live__hint:empty { display: none; }
.home-live__clock { display: none; font-variant-numeric: tabular-nums; }
.home-live[data-state="listening"] .home-live__clock,
.home-live[data-state="paused"] .home-live__clock { display: inline; }
.home-live__hint:not(:empty) + .home-live__clock::before { content: "·"; margin-right: 8px; }

/* 대화 내용 — 접히는 칸, 내 말은 오른쪽 말풍선 */
.home-live__transcript {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--text-color, #101617) 7%, transparent);
  background: color-mix(in srgb, var(--text-color, #101617) 3%, transparent);
}
.home-live__transcript-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  color: var(--text-color, #101617);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.home-live__count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text-color, #101617) 8%, transparent);
  color: var(--text-muted, #6B7A7D);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.home-live__chev { margin-left: auto; color: var(--text-muted, #6B7A7D); transition: transform .2s ease; }
.home-live__transcript.is-collapsed .home-live__chev { transform: rotate(-90deg); }
.home-live__transcript.is-collapsed .home-live__log { display: none; }
.home-live__log {
  min-height: 0;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 14px 14px;
  scrollbar-width: thin;
}
.home-live__empty { margin: 2px 0; font-size: 13px; color: var(--text-muted, #6B7A7D); text-align: center; }
.home-live-line { display: flex; flex-direction: column; gap: 3px; max-width: 86%; }
.home-live-line.is-me { align-self: flex-end; align-items: flex-end; }
.home-live-line.is-agent { align-self: flex-start; align-items: flex-start; }
.home-live-line__who { padding: 0 4px; font-size: 11.5px; font-weight: 650; color: var(--text-muted, #6B7A7D); }
/* 내 말은 오른쪽 말풍선만으로 알 수 있다 — 이름은 화면 읽기 프로그램에만 */
.home-live-line.is-me .home-live-line__who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home-live-line__text { margin: 0; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.home-live-line.is-me .home-live-line__text { background: rgba(0, 130, 255, .13); border-bottom-right-radius: 6px; }
.home-live-line.is-agent .home-live-line__text { background: var(--surface-color, #fff); border: 1px solid var(--border-color, #E4E1D9); border-bottom-left-radius: 6px; }

/* 단추 셋 — 켜진 음소거·일시정지는 진한 원에 바뀐 그림 */
.home-live__controls { flex: none; display: flex; justify-content: center; gap: 28px; padding: 20px 0 2px; }
.home-live__round {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--text-color, #101617);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.home-live__round:focus-visible { outline: none; }
.home-live__round:focus-visible .home-live__btn { outline: 2px solid #0082FF; outline-offset: 3px; }
.home-live__btn {
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-color, #101617) 7%, transparent);
  color: var(--text-color, #101617);
  transition: background .15s ease, transform .15s ease;
}
.home-live__round:hover .home-live__btn { background: color-mix(in srgb, var(--text-color, #101617) 12%, transparent); }
.home-live__round:active .home-live__btn { transform: scale(.95); }
.home-live__ico-off { display: none; }
.home-live__round.is-on .home-live__ico-on { display: none; }
.home-live__round.is-on .home-live__ico-off { display: block; }
.home-live__round.is-on .home-live__btn { background: var(--text-color, #101617); color: var(--surface-color, #fff); }
.home-live__round--end .home-live__btn { background: #ef4444; color: #fff; }
.home-live__round--end:hover .home-live__btn { background: #dc2626; }
.home-live__hangup { transform: rotate(135deg); }
.home-live__note { flex: none; margin: 12px 0 0; text-align: center; font-size: 12px; line-height: 1.5; color: var(--text-muted, #6B7A7D); word-break: keep-all; }
@media (max-width: 640px) {
  .home-tools-cols { grid-template-columns: 1fr; }
  /* 폰은 아래에서 올라온 시트처럼 */
  .home-live:not([hidden]) { align-items: flex-end; padding: 0; }
  .home-live__card { width: 100%; border-radius: 28px 28px 0 0; border-bottom: 0; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .home-live__controls { gap: 22px; }
}

/* 답 속 그림. 이 규칙이 빠지면 SVG 가 제 픽셀 크기로 넘치고,
   .svg / .png 내려받기 링크가 한 줄에 붙어 한 문장처럼 보인다. */
.summet-visual {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
  border-radius: 12px;
  background: var(--surface-color, #fff);
  overflow-x: auto;
}

.summet-visual--diagram svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.summet-visual--chart {
  height: 300px;
}

.summet-visual--svg {
  margin: 12px 0;
  padding: 12px;
}

.summet-visual__svg {
  background: #fff;
  border-radius: 8px;
  padding: 8px;
  overflow-x: auto;
}

.summet-visual__svg svg {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.summet-visual__bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-top: 10px;
}

.summet-visual__dl {
  display: block;
  color: var(--primary-color, #007688);
  font-size: 13px;
  line-height: 1.5;
  text-decoration: none;
  cursor: pointer;
}

.summet-visual__dl:hover,
.summet-visual__dl:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.summet-visual__dl[aria-busy="true"] {
  opacity: 0.55;
  cursor: progress;
}

/* 워크스페이스는 공급사 아바타를 숨긴다. 생각 줄을 그 옆 칸(폭 0)에 두면
   반짝임과 "N초 동안 생각함"이 큰 그림에 가려진다. 답 위에 한 줄로 둔다. */
.summet-chat-page--workspace .summet-msg--with-progress {
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
}

.summet-chat-page--workspace .summet-msg--with-progress .summet-msg__progress {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

.summet-chat-page--workspace .summet-msg--with-progress .summet-msg__bubble {
  flex: 0 1 auto;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}

/* PDF 비밀번호 카드 — 열기 암호가 걸린 PDF 를 편집할 때 말풍선 자리에 잠깐(방에 저장하지 않는다). 앱
   lib/widgets/pdf_password_prompt.dart 와 같은 모양: 자물쇠·파일 이름, 설명, 틀렸을 때 빨간 줄, 칸 + 열기·그만두기. */
.ws-docpw {
  --ws-docpw-accent: #0082FF;
  --ws-docpw-error: #D93025;
  max-width: 440px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-color);
  color: var(--text-color);
}

[data-theme="dark"] .ws-docpw {
  --ws-docpw-accent: #4DA3FF;
  --ws-docpw-error: #F28B82;
}

.ws-docpw__head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 600;
}

.ws-docpw__icon {
  flex: 0 0 auto;
  color: var(--text-muted);
}

.ws-docpw__name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ws-docpw__text,
.ws-docpw__hint,
.ws-docpw__error {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
}

.ws-docpw__text,
.ws-docpw__hint {
  color: var(--text-muted);
}

.ws-docpw__error {
  color: var(--ws-docpw-error);
}

.ws-docpw__error[hidden] {
  display: none;
}

.ws-docpw__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.ws-docpw__input {
  flex: 1 1 180px;
  min-width: 0;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--surface-color);
  color: var(--text-color);
  font: inherit;
  font-size: 14px;
}

.ws-docpw__input:focus {
  outline: none;
  border-color: var(--ws-docpw-accent);
  box-shadow: 0 0 0 1px var(--ws-docpw-accent);
}

.ws-docpw__open,
.ws-docpw__cancel {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.ws-docpw__open {
  border: 0;
  background: var(--ws-docpw-accent);
  color: #FFFFFF;
}

.ws-docpw__cancel {
  border: 1px solid var(--border-color);
  background: transparent;
  color: var(--text-color);
}

.ws-docpw__cancel:hover {
  background: var(--sidebar-hover);
}

.ws-docpw__open:focus-visible,
.ws-docpw__cancel:focus-visible {
  outline: 2px solid var(--ws-docpw-accent);
  outline-offset: 2px;
}

/* ── 예약 작업 ── 확인 줄의 카드(이름·언제·관리·취소)와 서버가 단 실행 줄의 머리("예약 작업 · 이름").
   앱 lib/widgets/chat_schedule_card.dart 와 같은 모양. */
.ws-schedule-card {
  --ws-schedule-accent: #0082FF;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  max-width: 460px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-color);
}

[data-theme="dark"] .ws-schedule-card {
  --ws-schedule-accent: #4DA3FF;
}

.ws-schedule-card__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ws-schedule-accent) 12%, transparent);
  color: var(--ws-schedule-accent);
}

.ws-schedule-card__body {
  display: flex;
  flex: 1 1 180px;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.ws-schedule-card__kind {
  font-size: 12px;
  font-weight: 600;
  color: var(--ws-schedule-accent);
}

.ws-schedule-card__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-color);
  overflow-wrap: anywhere;
}

.ws-schedule-card__when {
  font-size: 13px;
  color: var(--text-muted);
}

.ws-schedule-card__error {
  font-size: 12.5px;
  color: #dc2626;
}

.ws-schedule-card__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
  margin-left: auto;
}

.ws-schedule-card__btn {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: transparent;
  color: var(--text-color);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.ws-schedule-card__btn:hover:not(:disabled) {
  background: var(--sidebar-hover);
}

.ws-schedule-card__btn--danger {
  color: #dc2626;
}

.ws-schedule-card__btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.ws-schedule-card--cancelled .ws-schedule-card__icon,
.ws-schedule-card--cancelled .ws-schedule-card__kind,
.ws-schedule-card--cancelled .ws-schedule-card__title {
  opacity: 0.5;
}

.ws-scheduled-tag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
}

.ws-scheduled-tag svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}