/* 상단 비서 선택: 한 장의 유리 패널 안에 큰 원형 초상화와 상태를 나란히 놓는다. */
#target-picker {
  display:grid; grid-template-columns:52px repeat(4,minmax(0,1fr)); gap:0; align-items:stretch;
  padding:6px 0; border:1px solid #e9c9e03d; border-radius:16px;
  background:linear-gradient(180deg,#ffffff0c,#ffffff03); box-shadow:inset 0 1px #ffffff12,0 10px 26px -18px #0009;
}
#target-picker button.target-card, #target-picker button.target-card.target-auto {
  position:relative; display:flex; flex-direction:row; align-items:center; gap:14px; height:auto; min-width:0;
  padding:6px 16px; border:0; border-radius:12px; background:transparent; box-shadow:none; text-align:left;
}
#target-picker button.target-card + button.target-card::before {
  content:''; display:block; position:absolute; z-index:0; inset:12% auto 12% 0; width:1px; background:#e7c8e030;
}
#target-picker button.target-card:hover:not(:disabled) { background:#ffffff09; border:0; transform:none; }
#target-picker button.target-card[aria-checked='true'] { background:linear-gradient(180deg,#c4a6e01c,#c4a6e008); border:0; box-shadow:inset 0 0 0 1px #d0b4ea55; }
#target-picker .target-card.is-working { background:transparent; border:0; }

/* 자동: 왼쪽 끝의 작은 별 */
#target-picker button.target-card.target-auto { flex-direction:column; justify-content:center; gap:4px; padding:4px; }
#target-picker .target-auto .target-auto { margin:0; font-size:24px; color:#e6cdf3; }
#target-picker .target-auto .target-name { font-size:10px; }
#target-picker .target-auto .target-subtitle { display:none; }

/* 원형 초상화와 비서별 테두리 */
#target-picker .target-avatar {
  --ring:#e2bfa8; flex:none; width:68px; height:68px; border:2px solid var(--ring); border-radius:50%;
  background:#7d6478; box-shadow:0 0 0 3px #00000026,0 6px 14px -6px #000a; overflow:hidden;
}
#target-picker .target-codex .target-avatar { --ring:#c6dce2; }
#target-picker .target-gemini .target-avatar { --ring:#c6a5ea; }
#target-picker .target-beiko .target-avatar { --ring:#e4b7c4; }
#target-picker button[aria-checked='true'] .target-avatar { border-color:var(--ring); box-shadow:0 0 0 3px #c3a2e24d,0 0 18px #d2b2f28c; }
#target-picker .target-card.is-working .target-avatar { border-color:var(--ring); box-shadow:0 0 0 3px #9cd7b833,0 0 16px #9cd7b855; }

/* 이름 줄: 상태 점 + 이름 + 진행·대기 칩 */
#target-picker .target-info { display:grid; gap:3px; flex:1; min-width:0; }
#target-picker .target-name-row { display:flex; flex-wrap:wrap; align-items:center; gap:3px 7px; min-width:0; }
#target-picker .target-name { color:#fbeff8; font-size:16px; font-weight:600; letter-spacing:.01em; white-space:nowrap; }
.target-dot { flex:none; width:7px; height:7px; border-radius:50%; background:#8fdcb7; box-shadow:0 0 6px #8fdcb799; }
.target-card:disabled .target-dot { background:#9a8b9e; box-shadow:none; }
#target-picker .target-work-count { position:static; display:inline-flex; gap:4px; padding:0; background:none; font-size:inherit; }
#target-picker .target-card.is-working .target-work-count::before { content:none; }
.work-chip { padding:2px 8px; border:1px solid #9fd8bd66; border-radius:99px; background:#9fd8bd14; color:#b9ecd3; font-size:10px; line-height:1.4; white-space:nowrap; }
.work-chip.queued { border-color:#d8c4e055; background:#ffffff0a; color:#ddcde4; }

/* 주간 잔여: 라벨 + 큰 숫자 + 굵은 막대 */
#target-picker .target-usage { gap:5px; }
#target-picker .quota-text { display:flex; align-items:baseline; gap:8px; color:#d8c4df; font-size:11px; white-space:nowrap; }
.quota-value { color:#fbeff8; font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }
#target-picker .quota-meter, #target-picker .quota-unavailable { width:100%; max-width:190px; height:6px; border-radius:99px; }
#target-picker .quota-meter, #target-picker .quota-meter::-webkit-progress-bar { background:#ffffff14; border-radius:99px; }
#target-picker .quota-meter::-webkit-progress-value { background:linear-gradient(90deg,#c9a6ec,#dcc2f6); border-radius:99px; }
#target-picker .quota-meter::-moz-progress-bar { background:#d0b0ef; border-radius:99px; }
#target-picker .quota-meter.low::-webkit-progress-value { background:#e6b07a; }
#target-picker .quota-meter.low::-moz-progress-bar { background:#e6b07a; }
#target-picker .quota-unavailable { background:repeating-linear-gradient(135deg,#ffffff14 0 4px,transparent 4px 8px); }
#target-picker .target-salary { gap:1px; color:#d3bfdb; font-size:10px; line-height:1.5; }

/* 베이코: 역할 설명과 종합 문서 아이콘 */
#target-picker .target-beiko .target-subtitle { color:#d3bfdb; font-size:11px; }
.target-beiko-icon { display:block; margin-top:6px; color:#d9c4e4; line-height:0; }

@media (min-width:1101px) {
  .topbar { height:132px; }
  .app, .app.tasks-open, .app.today-open { padding-top:154px; }
  #target-picker { max-width:1080px; width:100%; }
}
@media (min-width:1101px) and (max-width:1599px) {
  #target-picker { grid-template-columns:44px repeat(4,minmax(0,1fr)); }
  #target-picker button.target-card { gap:10px; padding:6px 10px; }
  #target-picker .target-avatar { width:54px; height:54px; }
  #target-picker .target-name { font-size:14px; }
  #target-picker .quota-text { gap:5px; font-size:10px; }
  .quota-value { font-size:14px; }
  #target-picker .target-salary { font-size:9px; line-height:1.45; }
  .work-chip { padding:0 6px; font-size:9px; }
}
@media (min-width:1101px) and (max-width:1300px) {
  #target-picker .target-avatar { width:42px; height:42px; }
  #target-picker button.target-card { gap:8px; padding:6px 8px; }
  #target-picker .target-name { font-size:12px; }
  .quota-value { font-size:12px; }
}
@media (max-width:1100px) {
  #target-picker { display:flex; overflow-x:auto; scrollbar-width:none; }
  #target-picker button.target-card { flex:1 0 200px; }
  #target-picker button.target-card.target-auto { flex:0 0 52px; }
}
@media (max-width:600px) {
  #target-picker { padding:4px 0; border-radius:12px; }
  #target-picker button.target-card { flex:0 0 172px; gap:8px; padding:6px 10px; height:auto; }
  #target-picker button.target-card.target-auto { flex:0 0 46px; }
  #target-picker .target-avatar { width:44px; height:44px; }
  #target-picker .target-name { font-size:12px; }
  .quota-value { font-size:12px; }
  #target-picker .quota-text { font-size:9px; gap:5px; }
  #target-picker .quota-meter { height:4px; }
  #target-picker .target-salary { font-size:8px; }
  .work-chip { padding:0 5px; font-size:8px; }
  .target-beiko-icon { display:none; }
}

/* 입력창 위 모델 선택 줄: 지금 대화 중인 비서의 얼굴 */
.pick-face {
  --ring:#e2bfa8; position:relative; flex:none; width:30px; height:30px; border:1.5px solid var(--ring); border-radius:50%;
  background:#7d6478; box-shadow:0 0 0 2px #00000026,0 3px 8px -4px #000a; overflow:hidden;
}
.pick-face-codex { --ring:#c6dce2; }
.pick-face-gemini { --ring:#c6a5ea; }
.pick-face-beiko { --ring:#e4b7c4; }
.pick-face img { position:absolute; left:50%; top:-24%; width:300%; height:auto; max-width:none; transform:translateX(-50%); }

/* 큰 상반신 초상화: 원형 대신 카드 왼쪽을 세로로 꽉 채우고, 넓은 화면에서는 머리가 패널 위로 살짝 넘친다. */
#target-picker .target-avatar {
  position:relative; align-self:stretch; width:clamp(96px,42%,170px); height:auto; min-height:118px; margin:-6px 0 -6px -10px;
  border:0; border-radius:12px 0 0 12px; background:transparent; box-shadow:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent), linear-gradient(180deg,#000 80%,transparent);
  -webkit-mask-composite:source-in; mask-image:linear-gradient(90deg,#000 72%,transparent), linear-gradient(180deg,#000 80%,transparent); mask-composite:intersect;
}
#target-picker .target-avatar .target-portrait,
#target-picker .target-avatar .portrait-motion {
  position:absolute; z-index:1; left:50%; top:-1%; bottom:auto; width:165%; height:auto; max-width:none;
  transform:translateX(-50%); object-fit:contain; filter:drop-shadow(0 6px 10px #0007);
}
#target-picker button[aria-checked='true'] .target-avatar,
#target-picker .target-card.is-working .target-avatar { box-shadow:none; }
#target-picker button[aria-checked='true'] .target-avatar .target-portrait { filter:drop-shadow(0 0 12px #d2b2f2aa) drop-shadow(0 6px 10px #0007); }
#target-picker .target-card.is-working .target-avatar .target-portrait { filter:drop-shadow(0 0 12px #9cd7b888) drop-shadow(0 6px 10px #0007); }
#target-picker button.target-card { gap:10px; }

@media (min-width:1101px) {
  .topbar { height:168px; }
  .app, .app.tasks-open, .app.today-open { padding-top:190px; }
  .sidebar { max-height:calc(100dvh - 234px); }
  #target-picker { overflow:visible; margin-top:22px; }
  #target-picker button.target-card { overflow:visible; }
  /* 머리 부분이 유리 패널 위로 나오도록 위쪽만 넘치게 한다 */
  #target-picker .target-avatar { margin-top:-30px; min-height:150px; border-radius:0; -webkit-mask-image:linear-gradient(90deg,#000 72%,transparent), linear-gradient(180deg,#000 82%,transparent); }
}
@media (min-width:1101px) and (max-width:1599px) {
  #target-picker .target-avatar { width:clamp(90px,40%,140px); }
}
@media (min-width:1101px) and (max-width:1300px) {
  #target-picker .target-avatar { width:clamp(80px,38%,110px); }
}
@media (max-width:1100px) {
  #target-picker button.target-card { flex:1 0 230px; }
}
@media (max-width:600px) {
  #target-picker button.target-card { flex:0 0 196px; gap:6px; }
  #target-picker .target-avatar { width:86px; min-height:96px; margin:-4px 0 -4px -10px; }
}

/* 넓은 화면: 로고·대화 제목 칸을 없애고 그 자리를 비서 카드에 내어 준다(제목은 왼쪽 대화 목록에서 보인다). */
@media (min-width:1101px) {
  .topbar .conversation-heading { display:none; }
  .topbar { grid-template-columns:0 minmax(0,1fr) auto auto auto; column-gap:14px; }
  #target-picker { margin-left:-14px; max-width:1240px; }
}

/* 주간 잔여 | 급여일: 같은 모양(라벨·큰 숫자·게이지·작은 설명)으로 가로 두 칸 */
#target-picker .target-meters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0; max-width:300px; }
#target-picker .target-meters > span { display:grid; gap:4px; min-width:0; }
#target-picker .target-meters .quota-text { gap:6px; }
#target-picker .target-meters .quota-label { overflow:hidden; text-overflow:ellipsis; }
#target-picker .target-meters .quota-meter, #target-picker .target-meters .pay-meter, #target-picker .target-meters .quota-unavailable { width:100%; max-width:none; height:5px; margin:0; }
#target-picker .meter-sub { overflow:hidden; color:#b9a5c4; font-size:9px; line-height:1.3; white-space:nowrap; text-overflow:ellipsis; }
#target-picker .pay-meter { display:block; border:0; border-radius:99px; -webkit-appearance:none; appearance:none; }
#target-picker .pay-meter, #target-picker .pay-meter::-webkit-progress-bar { background:#ffffff14; border-radius:99px; }
#target-picker .pay-meter::-webkit-progress-value { background:linear-gradient(90deg,#8fcfb3,#b6e4cf); border-radius:99px; }
#target-picker .pay-meter::-moz-progress-bar { background:#9fd8bd; border-radius:99px; }
#target-picker .pay-meter.soon::-webkit-progress-value { background:#e6b07a; }
#target-picker .pay-meter.soon::-moz-progress-bar { background:#e6b07a; }
@media (max-width:600px) {
  #target-picker .target-meters { gap:8px; }
  #target-picker .meter-sub { display:none; }
  #target-picker .target-meters .quota-meter, #target-picker .target-meters .pay-meter, #target-picker .target-meters .quota-unavailable { height:4px; }
}