:root {
  /* 첫 온보딩 대화면과 최초 채팅창이 공유하는 한 규격이다. 사용자가 이후
   * 폭을 조절하면 채팅만 그 값을 기억한다. */
  --rangi-conversation-width: 75vw;
  --rangi-conversation-height: 50dvh;
}
/* 첫 실행은 별도 설정 페이지가 아니라, 이미 보이는 작업공간 위에서 랑이가
 * 첫 대화를 여는 장면이다. 캔버스를 가리지 않고 말풍선만 상호작용을 받는다. */
.rangi-onboard {
  position: fixed;
  inset: 0;
  z-index: 10100;
  display: none;
  pointer-events: none;
  color: #313a45;
  font-family: var(--font-body);
}

/* 첫 실행은 빈 작업실에서 시작한다. 이전 로비/캔버스가 뒤에서 먼저 보이면
 * 랑이가 공간을 만드는 장면이 무너지므로, 일반 작업면은 장면이 끝날 때까지
 * 조용히 감춘다. */
body.rangi-first-entry .office-panel {
  opacity: 0;
  pointer-events: none;
  transition: opacity .42s ease;
}
body.rangi-first-entry #office-chat.office-chat {
  visibility: hidden !important;
  pointer-events: none !important;
}
/* 첫 장면의 주인공은 무대 위 랑이 하나다. 일반 토글은 정착 전까지 보이지 않는다. */
body.rangi-first-entry .office-panel__chat { visibility: hidden !important; pointer-events: none !important; }
/* 모델은 온보딩의 별도 목록으로 만들지 않는다. 같은 채팅 선택기를 잠깐 쓸 때만
 * 실제 패널을 허용하고, 선택이 끝나면 다시 랑이 장면으로 돌아온다. */
body.rangi-first-entry.is-choosing-model #office-chat.office-chat {
  visibility: visible !important;
  pointer-events: auto !important;
}

.rangi-onboard.is-open { display: block; }
.rangi-onboard__canvas {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 72% 76%, rgba(196, 166, 121, .13), transparent 24%),
    linear-gradient(135deg, #f8f5ed, #efeee8);
}
.rangi-onboard__canvas::before {
  content: "";
  position: absolute;
  inset: clamp(18px, 3vw, 48px);
  border: 1px solid rgba(85, 94, 104, .12);
  border-radius: 28px;
  pointer-events: none;
}
.rangi-onboard__stage {
  position: absolute;
  right: clamp(52px, 13vw, 220px);
  bottom: clamp(38px, 11vh, 118px);
  display: flex;
  align-items: flex-end;
  gap: 14px;
  width: min(590px, calc(100vw - 64px));
  pointer-events: auto;
}
.rangi-onboard__stage > div,
.ob-capture { display: flex; align-items: flex-end; gap: 14px; width: 100%; }

.ob-actor {
  position: relative;
  flex: 0 0 auto;
  width: 124px;
  height: 124px;
  margin-bottom: -8px;
  overflow: visible;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, .28));
  transition: transform .38s cubic-bezier(.2,.85,.25,1), opacity .28s ease;
}
.rangi-onboard.is-settling .ob-actor { transform: scale(.38); opacity: 0; }
.rangi-onboard.is-settling .ob-bubble { opacity: 0; transform: translateX(-10px); transition: opacity .18s ease, transform .18s ease; }
.ob-actor img {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 124px;
  height: 124px;
  max-width: none;
  transform-origin: center bottom;
  animation: ob-actor-breathe 4.8s ease-in-out infinite;
}
/* enter-house 원본은 256×192지만 첫 프레임 고양이는 왼쪽 절반만 차지한다.
 * 실측 알파 경계 기준 220×165 렌더가 rise 마지막 몸집·중심·발선을 맞춘다.
 * 이를 작은 전체 캔버스 박스로 줄이면 퇴장 중 랑이가 과도하게 축소돼 보인다. */
.ob-actor[data-actor-clip="enter"] img { left: 4px; bottom: -3px; width: 220px; height: 165px; }

.ob-bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.ob-bubble::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 10px;
  bottom: -8px;
  width: 16px;
  height: 16px;
  background: #f4f2ed;
  border-right: 1px solid rgba(76, 86, 97, .22);
  border-bottom: 1px solid rgba(76, 86, 97, .22);
  transform: rotate(45deg);
  pointer-events: none;
}
.ob-bubble__content {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  max-height: none;
  padding: clamp(30px, 3.4vw, 52px) clamp(34px, 4.2vw, 64px);
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,254,250,.94), rgba(244,242,236,.86));
  border: 1px solid rgba(76, 86, 97, .17);
  border-radius: 26px 26px 26px 9px;
  box-shadow: 0 14px 38px rgba(77, 67, 51, .1), inset 0 1px rgba(255,255,255,.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: opacity .14s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.ob-bubble__content.is-changing {
  opacity: 0;
  transform: translateY(-5px);
  pointer-events: none;
}
.ob-bubble__content > * { position: relative; }
.ob-bubble__message {
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: 17.5px;
  line-height: 1.56;
  font-weight: 610;
  letter-spacing: -.018em;
  word-break: keep-all;
  overflow-wrap: normal;
}
.ob-bubble__note {
  width: 100%;
  max-width: none;
  margin: 12px 0 0;
  color: rgba(49,58,69,.64);
  font-size: clamp(14px, 1.18vw, 16px);
  line-height: 1.62;
  letter-spacing: -.01em;
  word-break: keep-all;
  overflow-wrap: normal;
}
.ob-capture__field { display: none; gap: 10px; align-items: flex-end; margin-top: auto; padding-top: 24px; }
.ob-capture__field.is-visible { display: flex; }
.ob-capture__input {
  flex: 1 1 auto; min-height: 54px; max-height: 128px; padding: 15px 17px; resize: vertical;
  font: inherit; font-size: 15px; line-height: 1.45; color: #313a45;
  background: rgba(255,255,255,.58); border: 1px solid rgba(76,86,97,.22);
  border-radius: 11px;
}
.ob-capture__input::placeholder { color: rgba(49,58,69,.5); }
.ob-capture__input:focus-visible, .ob-provider__btn:focus-visible, .ob-capture__send:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ob-capture__input.is-shake { animation: ob-shake 220ms cubic-bezier(.2,.8,.2,1); border-color: var(--red,#c0603f); }
.ob-capture__send {
  flex: 0 0 auto; min-height: 54px; padding: 0 20px; font: inherit; font-weight: 650;
  color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 11px; cursor: pointer;
}
.ob-model-select {
  width: 100%;
  min-height: 42px;
  margin-top: 14px;
  padding: 0 12px;
  color: #313a45;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(76,86,97,.22);
  border-radius: 11px;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}
.ob-model-select:disabled { color: rgba(49,58,69,.5); cursor: default; }
.ob-model-select option { color: CanvasText; background: Canvas; }
.ob-model-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ob-model-retry {
  margin-top: 10px; padding: 8px 11px; color: var(--accent-ink); background: var(--accent);
  border: 0; border-radius: 10px; font: inherit; font-weight: 650; cursor: pointer;
}
.ob-capture__send:disabled { opacity: .62; cursor: default; }

.ob-provider__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: 10px; margin-top: auto; padding-top: 24px; }
.ob-provider__btn {
  display: flex; flex-direction: column; gap: 3px; min-width: 120px; padding: 10px 12px;
  text-align: left; color: #313a45; font: inherit; background: rgba(255,255,255,.54);
  border: 1px solid rgba(76,86,97,.18); border-radius: 11px; cursor: pointer;
}
.ob-provider__btn:hover { border-color: var(--accent); }
.ob-provider__btn:disabled { cursor: default; opacity: .55; }
.ob-provider__name { font-size: 14px; font-weight: 700; }
.ob-provider__sub { font-size: 12px; color: rgba(49,58,69,.62); }
.ob-note { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: rgba(49,58,69,.72); }
.ob-choice-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 26px; margin-top: auto; padding-top: 24px; border-top: 1px solid rgba(76,86,97,.1); }
.ob-choice { width: max-content; max-width: 100%; padding: 5px 0; color: #536171; background: transparent; border: 0; font: inherit; font-size: 14px; font-weight: 620; text-align: left; cursor: pointer; }
.ob-choice::before { content: "↳"; margin-right: 6px; color: #b86b38; }
.ob-choice:hover { color: #a7501d; transform: translateX(3px); }
.ob-departure { position: fixed; inset: 0; pointer-events: none; }
.ob-departure .ob-actor { position: absolute; left: 72%; bottom: 10%; width: 124px; height: 124px; margin: 0; }
.ob-toggle-target { position: absolute; right: 6%; bottom: 10%; width: 88px; height: 88px; }
.ob-connecting { display: flex; gap: 7px; padding-top: 14px; }
.ob-connecting__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: ob-pulse 1.8s ease-in-out infinite; }
.ob-connecting__dot:nth-child(2) { animation-delay: .3s; }
.ob-connecting__dot:nth-child(3) { animation-delay: .6s; }

@keyframes ob-shake { 0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)} }
@keyframes ob-pulse { 0%,100%{opacity:.35;transform:scale(.9)}50%{opacity:1;transform:scale(1)} }
@keyframes ob-actor-breathe { 0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.012)} }
/* 데스크톱 첫 장면은 랑이 옆의 알림창이 아니라, 머리 위에서 이어지는
 * 대화처럼 읽혀야 한다. 빈 캔버스의 여백도 이 한 장면을 위한 무대가 된다. */
@media (min-width: 681px) {
  .ob-toggle-target { width: 52px; height: 52px; }
  .rangi-onboard__stage {
    inset: 0;
    display: block;
    width: auto;
    height: auto;
  }
  .rangi-onboard__stage > .ob-dialog,
  .rangi-onboard__stage > .ob-capture { position: absolute; right: clamp(68px, 16vw, 280px); bottom: clamp(204px, 30vh, 316px); display: block; width: min(560px, calc(100vw - 84px)); height: auto; }
  .ob-dialog > .ob-actor,
  .ob-capture--arrival > .ob-actor { position: absolute; z-index: 1; right: 54px; bottom: -158px; width: 124px; margin: 0; overflow: visible; }
  .ob-bubble { position: relative; z-index: 2; width: auto; }
  .ob-bubble::after { left: 10px; right: auto; }
  .ob-choice-list { display: flex; margin-top: auto; border-top: 1px solid rgba(76,86,97,.1); }
  .ob-choice { width: auto; padding: 2px 0; font-size: 13.5px; font-weight: 600; }
  .ob-choice::before { content: none; }
  .ob-choice::after { content: " →"; color: rgba(184,107,56,.72); }
}
@media (max-width: 680px) { .rangi-onboard__stage { left: 18px; right: 18px; bottom: 28px; width: auto; gap: 8px; } .ob-actor { width: 84px; height: 84px; } .ob-actor img { width: 84px; height: 84px; } .ob-actor[data-actor-clip="enter"] img { left: -2px; bottom: 0; width: 90px; height: 68px; } .ob-bubble { padding: 0; } .ob-bubble::after { left: -8px; bottom: 22px; transform: rotate(135deg); } .ob-bubble__content { width: 100%; padding: 20px; } .ob-bubble__message { font-size: 19px; } .ob-choice-list, .ob-provider__list { padding-top: 18px; } }
@media (prefers-reduced-motion: reduce) { .ob-capture__input.is-shake, .ob-connecting__dot, .ob-actor img { animation: none; } }