/* ── 화면 아래 가운데의 상황별 작업 표시줄 — **막대 하나** (책 68쪽, 2026-09-02) ──
   .ai-tasks(작업 줄)와 .ai-float(입력줄)는 한 막대의 두 얼굴이라 동시에 보이지 않는다.
   생성형 채우기·이미지 생성을 누르면 입력줄로, 취소·Escape 로 작업 줄로. 묶음에는
   배경이 없다 — 빈틈으로 캔버스를 그대로 만질 수 있어야 한다. */
.float-stack {
  position: absolute; z-index: 40;
  left: 50%; bottom: 42px; transform: translateX(-50%);
  /* 내용만큼만 넓힌다 (Photoshop 도 그렇다). 폭을 못 박아 두면 단추 셋만 있어도
     막대가 화면 절반을 차지하고, 오른쪽이 텅 빈 채로 남는다. */
  width: max-content; max-width: calc(100vw - 380px);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
}
.float-stack > * { pointer-events: auto; }
/* 손잡이로 끌어 옮긴 뒤에는 가운데 맞춤을 끈다 (left/top 을 직접 준다) */
.float-stack.dragged { transform: none; }

.ai-float {
  position: relative;
  /* 내용 폭에 맞춘다 — 묶음이 max-content 라 여기서 100% 를 주면 도로 늘어난다 */
  max-width: 100%; box-sizing: border-box;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  padding: 8px 12px 6px;
}

/* 상황별 작업 표시줄 — 내용 폭에 맞는 별도 막대 */
.ai-tasks {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  max-width: 100%; box-sizing: border-box;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
  padding: 6px 8px;
}
.ai-tasks[hidden] { display: none; }
/* 지금 상황에 없는 버튼은 감춘다. .task-btn 의 display 가 브라우저 기본 [hidden] 을
   이기므로(작성자 규칙이 우선) 여기서 다시 눌러 줘야 실제로 사라진다. */
.ai-tasks [hidden] { display: none; }
/* 이 막대의 손잡이는 버튼 높이에 맞춘다 (입력줄 손잡이보다 낮다) */
.task-grip { align-self: center; padding: 2px 2px 2px 0; }

/* 막대 숨기기 (Photoshop 작업 표시줄의 ⋯ 자리). 다시 켜는 곳은 보기 메뉴다. */
.task-more {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 24px; height: 26px; padding: 0 0 4px;
  background: none; border: none; border-radius: 5px;
  color: var(--text-dim); font: inherit; font-size: 15px; line-height: 1; cursor: pointer;
}
.task-more:hover { background: var(--panel); color: var(--text); }

.task-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); padding: 5px 10px; font: inherit; cursor: pointer;
  white-space: nowrap;
}
.task-btn:hover { background: var(--blue); border-color: var(--blue); color: #fff; }
.task-btn.disabled { opacity: 0.4; pointer-events: none; }
.task-btn svg {
  width: 15px; height: 15px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.3;
  stroke-linecap: round; stroke-linejoin: round;
}
/* 글자 없이 아이콘만 — Photoshop 작업 표시줄의 뒤쪽 버튼들 */
.task-icon { padding: 5px 7px; }
/* 구분선 — 막대가 내용 폭이라 빈 칸으로 미는 대신 세로줄로 나눈다 (Photoshop 방식) */
.task-sep {
  flex: none; width: 1px; align-self: stretch;
  background: var(--line); margin: 0 3px;
}
.task-sep[hidden] { display: none; }

/* flex-wrap 이 없으면 안쪽 최소 폭 합이 막대보다 넓을 때 생성 버튼이 밖으로 밀려난다.
   프롬프트를 먼저 줄이고, 그래도 모자라면 줄을 바꾼다. */
/* 한 줄로 늘어놓는다. 접히면 막대가 두 줄이 되어 캔버스를 더 가린다. */
.ai-float-main { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
/* 잡는 곳이 좁으면 집기 어렵다 — 입력줄 높이만큼 위아래로 늘린다 */
/* 입력줄 손잡이는 세로로 긴 자리라 위아래로 길게 (2열 × 4행) */
.ai-grip {
  color: var(--text-dim); cursor: grab; user-select: none;
  display: inline-block; align-self: center; flex: none;
  /* 보이는 점 무늬는 8×15 지만, 잡히는 구역은 그보다 넓다.
     점만큼만 잡히면 8px 폭을 정확히 눌러야 해서 자꾸 빗나간다 —
     안쪽 여백으로 위아래와 왼쪽을 넓히고, 무늬는 여백 안쪽에만 그린다.
     칸(4×5)의 정확한 배수라야 점이 안 잘린다 (8×21 에 5×6 칸이라 실제로 잘렸다). */
  box-sizing: content-box;
  width: 8px; height: 15px;
  padding: 7px 6px 7px 10px; margin: -7px 0 -7px -10px;
  font-size: 0;
  background-image: radial-gradient(currentColor 1.05px, transparent 1.35px);
  background-size: 4px 5px;
  background-origin: content-box;
  background-clip: content-box;
  background-position: 0 0;
}
/* 작업 표시줄 쪽은 줄 높이가 낮아 세 행이면 충분하다 */
/* 작업 표시줄은 막대 자체가 낮아 위아래 여백을 조금 줄인다 (잡히는 구역은 그대로 넓다) */
.ai-grip.task-grip { padding: 5px 6px 5px 8px; margin: -5px 0 -5px -8px; }
.ai-grip:hover { color: var(--text); }
.ai-grip:active { cursor: grabbing; }
.ai-float select {
  background: var(--panel); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); padding: 4px 8px; font: inherit;
  flex: 0 1 auto; min-width: 0; max-width: 150px;
}
.ai-float-status { padding: 4px 2px 0 24px; }

/* 문서가 비었을 때 나오는 세 길 — 고칠 것이 없으니 채우는 길을 낸다 */
.ai-fill-group { display: inline-flex; align-items: center; gap: 6px; }
.ai-edit-group { display: inline-flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
/* class 의 display 가 브라우저 기본 [hidden] 규칙을 이긴다 — 숨기려면 여기서 다시 말해야
   한다. 안 그러면 hidden 을 걸어도 둘 다 보인다 (실제로 그랬다). */
.ai-fill-group[hidden], .ai-edit-group[hidden] { display: none; }
.ai-chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.ai-chip:hover { border-color: var(--text-dim); }

/* 막대 자체를 다루는 ⋯ (Photoshop 막대 끝과 같은 자리) */
.ai-more {
  flex: none; width: 26px; height: 26px; background: none;
  border: 1px solid transparent; border-radius: 5px;
  color: var(--text-dim); font-size: 15px; line-height: 1; cursor: pointer;
}
.ai-more:hover { color: var(--text); border-color: var(--line); }
/* 막대 끝 ⋯ 메뉴 — 두 막대가 같이 쓴다. 자리는 누른 단추에 맞춰 JS 가 잡는다. */
.bar-menu { position: fixed; z-index: 60; }
.bar-menu .on::after { content: " ✓"; color: var(--blue); }

/* 막대를 숨겼을 때 남는 자리 — 이것마저 없으면 되살릴 길이 없다 */
.ai-float-show {
  position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 40; width: 34px; height: 22px;
  background: var(--panel); color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.ai-float-show:hover { color: var(--text); }
.ai-prompt {
  flex: 1 1 200px; min-width: 120px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 5px;
  color: var(--text); padding: 6px 12px; font: inherit;
  resize: none; line-height: 1.5;
  max-height: 58px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.ai-prompt::-webkit-scrollbar { width: 8px; }
.ai-prompt::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.ai-prompt::-webkit-scrollbar-track { background: transparent; }
.ai-prompt:focus { outline: 1px solid var(--blue); border-color: var(--blue); }
.generate-btn {
  flex: none;
  background: var(--blue); color: #fff; border: none; border-radius: 6px;
  padding: 6px 18px; font-weight: 700; letter-spacing: 0.03em; cursor: pointer; font: inherit;
  white-space: nowrap; flex: none;   /* "생성 중…"이 세로로 꺾이지 않게 */
}
.ai-expand { white-space: nowrap; flex: none; }

.generate-btn:disabled { opacity: 0.5; cursor: default; }
/* 입력줄 닫기 — 작업 줄로 돌아간다 (막대 하나, 2026-09-02) */
.ai-cancel {
  flex: none; background: none; border: 1px solid var(--line); border-radius: 6px;
  color: var(--text-dim); padding: 5px 10px; font: inherit; cursor: pointer; white-space: nowrap;
}
.ai-cancel:hover { color: var(--text); background: var(--panel); }
.ai-status { color: var(--text-dim); font-size: 12px; }
.ai-status.error { color: var(--red); }
.ai-status.ok { color: var(--green); }
.ai-status.busy { color: var(--blue); }

/* ── 상태바 ── */
.statusbar {
  grid-area: status;
  background: var(--panel);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 18px;
  padding: 0 12px; color: var(--text-dim); font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.autosave-label { color: var(--text-dim); }
.autosave-label.autosave-failed { color: #e05a4e; }
.status-right { margin-left: auto; }

/* Narrow screens do not have room for the desktop's 380px side-panel reserve.
   Keep contextual actions on one horizontally scrollable row. */
@media (max-width: 800px) {
  .float-stack { max-width: calc(100vw - 16px); }
  .ai-tasks {
    min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }
  .ai-tasks > * { flex-shrink: 0; }
}