/* Live work: top-bar entry and right-side panel. */
.cw-ws-btn,
.cw-ws-panel,
.cw-ws-toasts {
  box-sizing: border-box;
  font-family: Pretendard, "Malgun Gothic", sans-serif;
}

.cw-ws-panel *,
.cw-ws-toasts * {
  box-sizing: border-box;
}

.cw-ws-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  margin-left: 8px;
  padding: 0 10px;
  border: 1px solid #454749;
  border-radius: 6px;
  background: #282a2c;
  color: #dedede;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.cw-ws-btn:hover,
.cw-ws-panel button:hover:not([aria-disabled="true"]):not(:disabled),
.cw-ws-tbtn:hover {
  border-color: #85917d;
}

.cw-ws-btn[aria-expanded="true"] {
  border-color: #c2cfb6;
  color: #c2cfb6;
}

.cw-ws-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #858a86;
}

.cw-ws-btn[data-busy="1"] .cw-ws-dot {
  background: #c2cfb6;
  animation: cw-ws-pulse 1.8s ease-in-out infinite;
}

.cw-ws-count {
  min-width: 18px;
  padding: 2px 5px;
  border-radius: 10px;
  background: #c2cfb6;
  color: #222426;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}

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

@keyframes cw-ws-pulse {
  50% { opacity: .45; }
}

.cw-ws-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10040;
  display: flex;
  flex-direction: column;
  width: min(440px, 100vw);
  max-height: 100dvh;
  overflow: hidden;
  border-left: 1px solid #454749;
  background: #222426;
  color: #dedede;
  font-size: 13px;
  line-height: 1.45;
}

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

.cw-ws-head {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  min-height: 64px;
  padding: 13px 16px 12px;
  border-bottom: 1px solid #454749;
  background: #222426;
}

.cw-ws-head > div:first-child { min-width: 0; }

.cw-ws-title {
  display: block;
  color: #dedede;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.cw-ws-state {
  display: block;
  margin-top: 3px;
  color: #e8b470;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cw-ws-state:empty { display: none; }

.cw-ws-acts {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.cw-ws-panel button {
  min-height: 29px;
  padding: 4px 9px;
  border: 1px solid #454749;
  border-radius: 6px;
  background: #282a2c;
  color: #dedede;
  font: inherit;
  font-size: 12px;
  line-height: 1.25;
  cursor: pointer;
}

.cw-ws-panel button[hidden] { display: none; }

.cw-ws-stopall {
  border-color: #9c6b66 !important;
  color: #e39791 !important;
}

.cw-ws-bar {
  flex: none;
  padding: 10px 16px 0;
}

.cw-ws-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.cw-ws-seg button {
  min-height: 27px;
  padding: 3px 9px;
  background: #222426;
  color: #b4b6b2;
}

.cw-ws-seg button[aria-pressed="true"] {
  border-color: #85917d;
  background: #313831;
  color: #dbe5d4;
}

.cw-ws-seg button[aria-disabled="true"] {
  border-color: #3c3f40;
  color: #818581;
  background: #242627;
  cursor: not-allowed;
}

.cw-ws-models {
  flex: none;
  margin: 10px 16px 0;
  padding: 7px 10px;
  border: 1px solid #454749;
  border-radius: 7px;
  background: #282a2c;
}

.cw-ws-models summary {
  color: #c2cfb6;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.cw-ws-models[open] summary { margin-bottom: 5px; }

.cw-ws-mbody { border-top: 1px solid #454749; }

.cw-ws-mrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 36px;
  padding: 5px 0;
  color: #dedede;
  font-size: 12px;
}

.cw-ws-mrow + .cw-ws-mrow { border-top: 1px solid #3b3e3f; }

.cw-ws-mrow > span:first-child { min-width: 0; }

.cw-ws-mrow[data-lock] > span:first-child { color: #b4b6b2; }

.cw-ws-lockic {
  position: relative;
  display: inline-block;
  width: 8px;
  height: 7px;
  margin-right: 5px;
  border: 1px solid currentColor;
  border-radius: 1px;
  vertical-align: -1px;
}

.cw-ws-lockic::before {
  position: absolute;
  top: -5px;
  left: 1px;
  width: 4px;
  height: 4px;
  border: 1px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  content: "";
}

.cw-ws-why {
  min-height: 0;
  margin: 4px 0 0;
  color: #e8b470;
  font-size: 11px;
  line-height: 1.4;
}

.cw-ws-why:empty { display: none; }

.cw-ws-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 16px 13px;
  scrollbar-color: #666a68 #222426;
  scrollbar-width: thin;
}

.cw-ws-sec {
  margin: 13px 0 7px;
  color: #b4b6b2;
  font-size: 12px;
  font-weight: 700;
}

.cw-ws-empty {
  margin: 16px 0;
  color: #b4b6b2;
  font-size: 12px;
}

.cw-ws-card {
  display: block;
  margin: 0 0 7px;
  padding: 10px 11px;
  border: 1px solid #454749;
  border-left: 3px solid #565b59;
  border-radius: 7px;
  background: #282a2c;
  color: #dedede;
  cursor: pointer;
}

.cw-ws-card:hover { border-color: #6b746b; }

.cw-ws-card[aria-selected="true"] {
  border-color: #c2cfb6;
  background: #2d322e;
}

.cw-ws-card[data-st="run"] { border-left-color: #c2cfb6; }
.cw-ws-card[data-st="wait"] { border-left-color: #e8b470; }
.cw-ws-card[data-st="done"] { border-left-color: #82947b; }
.cw-ws-card[data-st="fail"] { border-left-color: #e39791; }
.cw-ws-card[data-st="stop"] { border-left-color: #686d6a; }

.cw-ws-ct {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  min-width: 0;
}

.cw-ws-name {
  margin-right: 2px;
  color: #dedede;
  font-size: 13px;
  font-weight: 700;
}

.cw-ws-eng,
.cw-ws-run {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid #565b59;
  border-radius: 4px;
  color: #b4b6b2;
  font-size: 10px;
  line-height: 1.3;
  white-space: nowrap;
}

.cw-ws-eng[data-e="claude"] {
  border-color: #806e63;
  background: #38312f;
  color: #dbc0ad;
}

.cw-ws-eng[data-e="codex"] {
  border-color: #617a78;
  background: #2d3938;
  color: #b8d0ca;
}

.cw-ws-eng[data-e="any"] {
  border-color: #626a61;
  background: #30352f;
  color: #c2cfb6;
}

.cw-ws-cs,
.cw-ws-msg,
.cw-ws-err {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cw-ws-cs { color: #b4b6b2; }
.cw-ws-msg { color: #dedede; }
.cw-ws-err { color: #e39791; }

.cw-ws-steps {
  display: flex;
  gap: 5px;
  list-style: none;
  margin: 9px 0 0;
  padding: 0;
  color: #898d89;
  font-size: 11px;
  line-height: 1.3;
}

.cw-ws-steps li {
  flex: 1 1 0;
  min-width: 0;
  padding-top: 5px;
  border-top: 2px solid #535755;
  white-space: nowrap;
}

.cw-ws-steps li[data-past] {
  border-top-color: #819079;
  color: #b4b6b2;
}

.cw-ws-steps li[data-now] {
  border-top-color: #c2cfb6;
  color: #dedede;
  font-weight: 600;
}

.cw-ws-card[data-st="wait"] .cw-ws-steps li[data-now] {
  border-top-color: #e8b470;
  color: #e8b470;
}

.cw-ws-card[data-st="fail"] .cw-ws-steps li[data-now] {
  border-top-color: #e39791;
  color: #e39791;
}

.cw-ws-card[data-st="stop"] .cw-ws-steps li[data-now] {
  border-top-color: #808581;
  color: #b4b6b2;
}

.cw-ws-cf {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 20px;
  margin-top: 8px;
  color: #b4b6b2;
  font-size: 11px;
}

.cw-ws-time { margin-right: auto; }

.cw-ws-panel .cw-ws-stop {
  min-height: 22px;
  padding: 2px 7px;
  background: transparent;
  font-size: 11px;
}

.cw-ws-view {
  color: #c2cfb6;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cw-ws-where { color: #b4b6b2; }

.cw-ws-panel .cw-ws-old {
  width: 100%;
  margin-top: 6px;
  background: transparent;
  color: #b4b6b2;
}

.cw-ws-chat {
  flex: none;
  padding: 10px 16px 12px;
  border-top: 1px solid #454749;
  background: #222426;
}

.cw-ws-to {
  margin-bottom: 6px;
  color: #b4b6b2;
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.cw-ws-crow {
  display: flex;
  align-items: stretch;
  gap: 7px;
}

.cw-ws-crow textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 54px;
  max-height: 140px;
  padding: 7px 9px;
  border: 1px solid #565a5b;
  border-radius: 6px;
  background: #282a2c;
  color: #dedede;
  font: inherit;
  font-size: 12px;
  line-height: 1.4;
  resize: vertical;
}

.cw-ws-crow textarea::placeholder { color: #919591; }

.cw-ws-panel .cw-ws-send {
  align-self: stretch;
  min-width: 58px;
  border-color: #c2cfb6;
  background: #c2cfb6;
  color: #222426;
  font-weight: 700;
}

.cw-ws-panel .cw-ws-send:hover { background: #d4ddcb; }

.cw-ws-hint {
  min-height: 0;
  margin: 6px 0 0;
  color: #e8b470;
  font-size: 11px;
}

.cw-ws-hint:empty { display: none; }

.cw-ws-toasts {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 10060;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(360px, calc(100vw - 32px));
}

.cw-ws-toast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid #6c7967;
  border-radius: 7px;
  background: #282a2c;
  color: #dedede;
  font-size: 12px;
  line-height: 1.4;
}

.cw-ws-toast span { min-width: 0; overflow-wrap: anywhere; }
.cw-ws-toast[data-st="fail"] { border-color: #e39791; }
.cw-ws-toast[data-st="stop"] { border-color: #686d6a; }

.cw-ws-tbtn {
  flex: none;
  padding: 3px 8px;
  border: 1px solid #565b59;
  border-radius: 5px;
  background: transparent;
  color: #c2cfb6;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}

.cw-ws-btn:focus-visible,
.cw-ws-panel button:focus-visible,
.cw-ws-panel summary:focus-visible,
.cw-ws-card:focus-visible,
.cw-ws-view:focus-visible,
.cw-ws-crow textarea:focus-visible,
.cw-ws-tbtn:focus-visible {
  outline: 2px solid #c2cfb6;
  outline-offset: 2px;
}

@media (max-width: 400px) {
  .cw-ws-head { padding: 12px; }
  .cw-ws-bar { padding: 9px 12px 0; }
  .cw-ws-models { margin: 9px 12px 0; }
  .cw-ws-list { padding: 4px 12px 12px; }
  .cw-ws-chat { padding: 9px 12px 11px; }
  .cw-ws-acts { gap: 4px; }
  .cw-ws-panel .cw-ws-acts button { padding: 4px 7px; }
  .cw-ws-mrow { flex-wrap: wrap; }
  .cw-ws-mrow .cw-ws-seg { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cw-ws-btn[data-busy="1"] .cw-ws-dot { animation: none; }
}

/* 10/8 사장님: AI 고르기 단추 폭을 모두 같게, 잠긴 줄은 쓸 수 있는 쪽에 열린 자물쇠 */
.cw-ws-mrow .cw-ws-seg{flex-wrap:nowrap}
.cw-ws-mrow .cw-ws-seg button{display:inline-flex;align-items:center;justify-content:center;width:84px;padding-left:6px;padding-right:6px}
.cw-ws-lockic[data-open]::before{left:4px;top:-5px;border-right:0;border-radius:4px 0 0 0;width:3px}
.cw-ws-cs{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.cw-ws-card[aria-selected="true"] .cw-ws-cs{-webkit-line-clamp:unset;display:block}
.cw-ws-old{margin:6px 0 4px}
.cw-ws-act{margin-left:0}
.cw-ws-undo{border-color:#8a6a4d !important;color:#e8b470 !important}
/* 10/8 사장님: 목록이 AI 고르기 상자 밑으로 파고들어 보이던 것·폭이 안 맞던 것 — 목록 위 구분선과 틈, 스크롤바 자리만큼 오른쪽 여백을 줄여 위 상자와 같은 폭 */
.cw-ws-list{margin-top:10px;border-top:1px solid #454749;padding:8px 6px 13px 16px;scrollbar-gutter:stable}
.cw-ws-models{margin-bottom:0}
.cw-ws-new{font-size:11px;font-weight:700;color:#222426;background:#e8b470;border-radius:10px;padding:2px 6px}
.cw-ws-new[hidden]{display:none}
.cw-ws-bar{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.cw-ws-who[hidden]{display:none}

/* 10/8 사장님 "연결됨 크기에 맞춰야": 작업실 윗줄에서는 [PC 연결됨]과 같은 높이·여백·모서리(4px 10px, 1px 테두리, 5px) */
body.workspace-open #original-generator .cw-shell-topbar .cw-ws-btn{min-height:0;margin-left:0;padding:4px 10px;border-radius:5px;font-weight:400;line-height:normal;gap:7px}
body.workspace-open #original-generator .cw-shell-topbar .cw-ws-dot{width:8px;height:8px}
body.workspace-open #original-generator .cw-shell-topbar .cw-ws-count,
body.workspace-open #original-generator .cw-shell-topbar .cw-ws-new{min-width:0;padding:0 5px;font-size:10px;line-height:14px} /* 숫자 배지가 높이를 키우지 않게 */
/* 10/9 편집 화면: 실시간 작업은 [최종 렌더] 왼쪽, 같은 높이 */
#cem-view .cem-head-meta .cw-ws-btn{margin:0;height:35.5px;min-height:0;box-sizing:border-box;padding:7px 11px;border-radius:4px}

/* 10/12 긴 결과는 4줄까지 보이고 아래 줄 [펼치기]로 펼침 */
.cw-ws-res[data-clamp]{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}

/* 10/12 카드 오른쪽 위 작업 시간 */
.cw-ws-dur{margin-left:auto;padding-left:6px;color:#b4b6b2;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap}