/* The companion has no idle animation or media side effects. Existing tool and
   review panels retain their own layout and interaction ownership. */
.wb-companion {
  --companion-ink: #effbff; --companion-muted: #a6c5d5;
  --companion-accent: #92edfa;
  position: absolute; z-index: 4;
  right: calc(var(--fr, 0px) + 16px); bottom: calc(var(--fb, 0px) + 16px);
  width: 256px; max-width: calc(100% - 32px);
  color: var(--companion-ink); font-size: 13px; line-height: 1.5;
  font-family: inherit; text-align: left; pointer-events: auto;
}
.wb-companion [hidden] { display: none !important; }
.wb-companion button { font: inherit; color: inherit; min-width: 44px; min-height: 44px; cursor: pointer; touch-action: manipulation; }
.wb-companion button:disabled { cursor: default; opacity: .5; }
.wb-companion button:focus-visible, .wb-companion [tabindex]:focus-visible { outline: 2px solid #b3f5ff; outline-offset: 3px; box-shadow: 0 0 0 5px #072d40; }
.wb-companion-bar {
  display: flex; align-items: center; gap: 4px; padding: 6px 9px 5px 2px;
  border: 1px solid #85d6eb45; border-radius: 24px 24px 24px 12px;
  background: linear-gradient(145deg,#16334cf5,#051624f5);
  box-shadow: 0 9px 28px #0005, inset 0 1px #b4edff15;
}
.wb-companion-avatar {
  width: 84px; height: 88px; flex: 0 0 84px; padding: 0;
  background: transparent; border: 0; border-radius: 20px;
  transition: transform .16s ease;
}
.wb-companion-avatar:not(:disabled):hover { transform: translateY(-2px); }
.wb-companion-avatar:disabled { opacity: .85; }
.wb-companion-robot { width: 100%; height: 100%; display: block; overflow: visible; }
.wb-companion-eye { transform-box: fill-box; transform-origin: center; transition: transform .18s ease; }
.wb-companion-mouth { display: none; }
.wb-companion-beacon { transition: fill .18s ease; }
.wb-companion-summary { flex: 1 1 auto; min-width: 0; }
.wb-companion-heading { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.wb-companion-heading strong { font-size: 14px; font-weight: 750; letter-spacing: -.02em; }
.wb-companion-state { font-size: 10px; color: var(--companion-accent); white-space: nowrap; }
.wb-companion-caption { min-height: 36px; margin: 3px 0 0; font-size: 12px; color: #c5dce9; line-height: 1.5; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.wb-companion-details-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0; font-size: 11px !important; color: #b7dbe9 !important; background: transparent; border: 0; text-align: left; }
.wb-companion-details-toggle span { font-size: 16px; }
.wb-companion[data-expanded] .wb-companion-details-toggle span { transform: rotate(180deg); }
.wb-companion-stop { flex: 0 0 44px; width: 44px; align-self: flex-end; display: grid; place-items: center; padding: 0; margin-bottom: 4px; background: #092233; border: 1px solid #6acbdf50; border-radius: 14px; }
.wb-companion-stop:hover { background: #174254; }
.wb-companion-panel {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: 324px; max-width: max(256px, calc(100vw - 40px));
  max-height: max(170px, calc(100dvh - var(--ft, 90px) - var(--fb, 170px) - 250px));
  overflow: auto; overscroll-behavior: contain; padding: 15px;
  border: 1px solid #8acfe663; border-radius: 18px; background: #091c2cfb;
  box-shadow: 0 16px 36px #0007; scrollbar-width: thin;
}
.wb-companion-panel-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: -6px -5px 4px 0; }
.wb-companion-panel-title strong { font-size: 14px; }
.wb-companion-close { flex: 0 0 44px; padding: 0; border: 0; background: transparent; font-size: 24px !important; border-radius: 12px; color: #b3d3e2 !important; }
.wb-companion-close:hover { background: #8ae4ff13; }
.wb-companion-reply { margin: 4px 0 14px; padding: 12px; max-height: 160px; overflow: auto; overscroll-behavior: contain; border-radius: 12px; background: #142f435c; border-left: 2px solid #66bdd4; color: #e1f0f6; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.wb-companion-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.wb-companion-controls button, .wb-companion-consent button { padding: 8px; border-radius: 10px; border: 1px solid #64b1c771; background: #17364b; font-size: 12px; font-weight: 650; }
.wb-companion-controls button:not(:disabled):hover, .wb-companion-consent button:not(:disabled):hover { background: #244b61; }
.wb-companion-question { margin-top: 10px; padding: 10px; border: 1px solid #85d6eb45; border-radius: 12px; background: #0f2a3c80; }
.wb-companion-question button { width: 100%; padding: 8px 10px; border: 1px solid #64b1c771; border-radius: 10px; background: #17364b; font-weight: 650; overflow-wrap: anywhere; }
.wb-companion-question button:not(:disabled):hover { background: #244b61; }
.wb-companion-question button[aria-pressed="true"] { background: #135046; border-color: #60d5b4; color: #c7ffee; }
.wb-companion-question p { margin: 8px 0 0; color: #c4dce7; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.wb-companion-talk[aria-pressed="true"], .wb-companion-wake[aria-pressed="true"] { background: #135046; border-color: #60d5b4; color: #c7ffee; }
.wb-companion-mode { margin: 10px 0; font-size: 12px; color: #c4dce7; line-height: 1.7; overflow-wrap: anywhere; }
.wb-companion-audio { margin: 10px 0; padding: 10px; border: 1px solid #b28c565c; border-radius: 10px; color: #f4d39f; background: #382a195c; font-size: 12px; line-height: 1.7; }
.wb-companion-privacy { margin: 0; padding-top: 10px; border-top: 1px solid #96dced25; color: var(--companion-muted); font-size: 11px; line-height: 1.8; }
.wb-companion-consent { margin-top: 12px; padding: 10px; background: #12354a; border: 1px solid #72d2ed7a; border-radius: 10px; }
.wb-companion-consent p { margin: 0 0 8px; font-size: 12px; }
.wb-companion-consent > div { display: flex; flex-wrap: wrap; gap: 6px; }
.wb-companion-consent .wb-companion-confirm { flex: 1; color: #041b29; background: #9ae5f2; border-color: #b1eff9; }
.wb-companion-footnote { margin: 12px 0 0; color: #a0bfce; font-size: 11px; }
.wb-companion[data-state="offline"] .wb-companion-eye { transform: scaleY(.74); }
.wb-companion[data-state="connecting"] .wb-companion-eyes { opacity: .7; }
.wb-companion[data-state="listening"] { --companion-accent: #94f2c7; }
.wb-companion[data-state="listening"] .wb-companion-eye { transform: scaleY(1.16); }
.wb-companion[data-state="listening"] .wb-companion-beacon { fill: #86eebe; }
.wb-companion[data-state="thinking"] .wb-companion-eyes { transform: translate(1px,-2px); }
.wb-companion[data-state="speaking"] .wb-companion-smile { display: none; }
.wb-companion[data-state="speaking"] .wb-companion-mouth { display: block; }
.wb-companion[data-state="error"] { --companion-accent: #ffd39f; }
.wb-companion[data-state="error"] .wb-companion-eye { transform: scaleY(.6); }
.wb-companion[data-state="error"] .wb-companion-beacon { fill: #ffbb79; }
@media (min-width:1100px) and (max-height:760px) {
  .wb-companion { width: 236px; }
  .wb-companion-avatar { width: 68px; height: 78px; flex-basis: 68px; }
}
@media (max-width:1099.98px) {
  .wb-companion { position: relative; inset: auto; width: min(420px,100%); max-width: 100%; margin: 0 0 0 auto; z-index: 4; }
  .wb-companion-bar { border-radius: 18px; padding: 3px 10px 3px 4px; }
  .wb-companion-avatar { width: 72px; height: 76px; flex-basis: 72px; }
  .wb-companion-caption { min-height: 18px; }
  .wb-companion-heading { gap: 8px; }
  .wb-companion-summary { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: 10px; align-items: center; }
  .wb-companion-caption { grid-column: 1; }
  .wb-companion-details-toggle { grid-column: 2; grid-row: 1 / span 2; width: auto; gap: 5px; }
  .wb-companion-stop { align-self: center; margin: 0; }
  .wb-companion-panel { position: relative; inset: auto; width: 100%; max-width: 100%; max-height: none; margin-top: 8px; }
}
@media (max-width:380px) {
  .wb-companion-avatar { width: 58px; height: 68px; flex-basis: 58px; }
  .wb-companion-summary { column-gap: 6px; }
  .wb-companion-details-toggle { font-size: 10px !important; gap: 2px; }
}
@media (prefers-reduced-motion:reduce) {
  .wb-companion *, .wb-companion *::before, .wb-companion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .wb-companion-avatar:not(:disabled):hover { transform: none; }
}
@media (forced-colors:active) {
  .wb-companion-bar, .wb-companion-panel, .wb-companion button { border: 1px solid ButtonText; }
  .wb-companion-caption, .wb-companion-state, .wb-companion-mode, .wb-companion-privacy, .wb-companion-footnote { color: CanvasText; }
}

/* Beginner flow (Claude 2026-10-12): the two ways 자비스 helps are named
   apart, and the floating card no longer covers the stage view controls. */
.wb-companion-modes { display: grid; gap: 6px; margin: 2px 0 12px; padding: 10px; border: 1px solid #85d6eb33; border-radius: 12px; background: #0f2a3c80; }
.wb-companion-mode-row { display: grid; gap: 2px; margin: 0; font-size: 12px; line-height: 1.6; color: #c4dce7; overflow-wrap: anywhere; }
.wb-companion-mode-row strong { font-size: 12.5px; color: #effbff; }
.wb-companion-guide { padding: 8px 10px; border-radius: 10px; border: 1px solid #64b1c771; background: #17364b; font-size: 12px !important; font-weight: 650; }
.wb-companion-guide:not(:disabled):hover { background: #244b61; }
@media (min-width:1100px) {
  .wb[data-workspace-ui="guided"] .wb-companion { right: calc(var(--fr, 0px) + 68px); }
}
@media (min-width:1100px) and (max-height:860px) {
  .wb[data-workspace-ui="guided"] .wb-companion { right: calc(var(--fr, 0px) + 116px); }
}
@media (min-width:1100px) {
  .wb[data-workspace-ui="guided"][data-tab="dock"] .wb-companion { right: calc(var(--fr, 0px) + 116px); }
}
@media (min-width:1100px) and (max-height:760px) {
  .wb[data-workspace-ui="guided"][data-tab] .wb-companion { right: calc(var(--fr, 0px) + 164px); }
}

/* Polish v2 (Claude 2026-10-12): a smaller 자비스 card on wide screens and a
   12px type floor. The card waits until a model is open, steps aside in
   "작품 크게 보기", and on phones/tablets stays in 대화 unless it is active
   (connecting, listening, speaking, an error, or its panel is open). */
.wb[data-workspace-ui="guided"] .wb-companion-state { font-size: 12px; }
.wb[data-workspace-ui="guided"] .wb-companion-details-toggle { font-size: 12px !important; }
.wb[data-workspace-ui="guided"] :is(.wb-companion-privacy,.wb-companion-footnote) { font-size: 12px; }
.wb[data-workspace-ui="guided"] .wb-companion-bar { border-color: rgba(150, 214, 238, .22); background: linear-gradient(160deg, rgba(16, 40, 60, .96), rgba(6, 20, 32, .96)); box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.wb[data-workspace-ui="guided"] .wb-companion-panel { border-color: rgba(150, 214, 238, .3); background: #08182A; }
.wb[data-workspace-ui="guided"]:not([data-model-ready]) .wb-companion { display: none; }
.wb[data-workspace-ui="guided"][data-focus-mode] .wb-companion[data-state="offline"]:not([data-expanded]):not(:focus-within) { display: none; }
@media (min-width:860px) {
  .wb[data-workspace-ui="guided"] .wb-companion { width: 228px; }
  .wb[data-workspace-ui="guided"] .wb-companion-avatar { width: 58px; height: 62px; flex-basis: 58px; }
  .wb[data-workspace-ui="guided"] .wb-companion-caption { min-height: 0; -webkit-line-clamp: 1; }
}
@media (min-width:860px) and (max-height:760px) {
  /* Short desktops: a slim card (no caption line) so the model keeps the stage. */
  .wb[data-workspace-ui="guided"] .wb-companion { width: 200px; }
  .wb[data-workspace-ui="guided"] .wb-companion-avatar { width: 46px; height: 50px; flex-basis: 46px; }
  /* The caption stays a live region for screen readers; it is only visually tucked away. */
  .wb[data-workspace-ui="guided"] .wb-companion-caption { position: absolute; width: 1px; height: 1px; min-height: 0; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
@media (max-width:859.98px) {
  .wb[data-workspace-ui="guided"]:not([data-tab="dock"]) .wb-companion[data-state="offline"]:not([data-expanded]):not(:focus-within) { display: none; }
}

/* Polish v3 (Claude 2026-10-13): from 860px the 자비스 card floats in the stage
   (the companion places itself there); it sits low on the right, clear of the
   view pad at the top right. 860–1099px restore the floating card's own look,
   which the base keeps for wide screens only. */
@media (min-width:860px) {
  .wb[data-workspace-ui="guided"][data-model-ready] .wb-companion[data-layout="floating"] { right: calc(var(--fr, 0px) + 16px); }
}
@media (min-width:860px) and (max-width:1099.98px) {
  .wb[data-workspace-ui="guided"] .wb-companion[data-layout="floating"] { position: absolute; inset: auto; right: calc(var(--fr, 0px) + 16px); bottom: calc(var(--fb, 0px) + 16px); max-width: calc(100% - 32px); margin: 0; z-index: 4; }
  .wb[data-workspace-ui="guided"] .wb-companion[data-layout="floating"] .wb-companion-bar { border-radius: 24px 24px 24px 12px; padding: 6px 9px 5px 2px; }
  .wb[data-workspace-ui="guided"] .wb-companion[data-layout="floating"] .wb-companion-summary { display: block; }
  .wb[data-workspace-ui="guided"] .wb-companion[data-layout="floating"] .wb-companion-heading { gap: 6px; }
  .wb[data-workspace-ui="guided"] .wb-companion[data-layout="floating"] .wb-companion-details-toggle { width: 100%; gap: 0; }
  .wb[data-workspace-ui="guided"] .wb-companion[data-layout="floating"] .wb-companion-stop { align-self: flex-end; margin: 0 0 4px; }
  .wb[data-workspace-ui="guided"] .wb-companion[data-layout="floating"] .wb-companion-panel { position: absolute; inset: auto; right: 0; bottom: calc(100% + 10px); width: 324px; max-width: max(256px, calc(100vw - 40px)); max-height: max(170px, calc(100dvh - 300px)); margin: 0; }
}
/* An open 자비스 panel sits above the stage instruments (camera guide included). */
.wb[data-workspace-ui="guided"] .wb-companion[data-layout="floating"][data-expanded] { z-index: 7; }