/* 넓은 화면 끝맞춤: 상단 줄의 좌우 끝을 아래 사이드바·본문·오른쪽 패널의 끝과 같은 선에 맞춘다 */
@media (min-width:1101px) {
  .topbar {
    --edge:22px;
    grid-template-columns:minmax(0,1fr) auto auto auto; column-gap:14px; align-items:center;
    padding:27px var(--edge) 1px;
  }
  /* 비서 카드 줄은 사이드바 왼쪽 끝에서 시작해 버튼 앞까지 꽉 채운다 */
  #target-picker { grid-column:1; grid-row:1; justify-self:stretch; max-width:none; width:auto; margin:0; }
  #history-toggle { grid-column:2; grid-row:1; }
  #tasks-toggle { grid-column:3; grid-row:1; }
  #today-toggle { grid-column:4; grid-row:1; }
  /* 사이드바도 본문과 같은 아래 끝까지 내려온다 */
  .sidebar { align-self:stretch; max-height:none; }
}
@media (min-width:1600px) {
  .topbar { --edge:28px; }
}

/* 업무 현황 숫자 배지가 버튼 글자를 가리지 않게 모서리 바깥으로 뺀다 */
.tasks-toggle.busy::after { top:-10px; right:-8px; }

/* 넓은 화면 상단을 납작하게: 168px → 104px. 카드 내용은 그대로 두고 줄 수와 여백만 줄인다 */
@media (min-width:1101px) {
  .topbar { height:104px; padding-top:14px; padding-bottom:6px; }
  .app, .app.tasks-open, .app.today-open { padding-top:122px; }
  #target-picker { height:84px; padding:0; }
  #target-picker button.target-card, #target-picker button.target-card.target-auto { height:84px; padding-top:0; padding-bottom:0; }
  /* 초상화는 카드 높이에 맞추고 머리만 위로 살짝 넘긴다 */
  #target-picker .target-avatar { min-height:0; height:auto; margin-top:-14px; margin-bottom:0; width:clamp(70px,30%,112px); }
  #target-picker .target-info { gap:2px; }
  #target-picker .target-usage { gap:3px; }
  #target-picker .quota-meter, #target-picker .quota-unavailable { height:5px; }
  /* 급여 두 줄을 한 줄로 */
  #target-picker .target-salary { display:flex; flex-wrap:nowrap; gap:0 8px; min-width:0; }
  #target-picker .target-salary span { min-width:0; }
}
@media (min-width:1101px) and (max-width:1599px) {
  #target-picker .target-avatar { width:clamp(64px,30%,96px); }
}
@media (min-width:1101px) and (max-width:1300px) {
  #target-picker .target-avatar { width:clamp(56px,28%,80px); }
}

/* 휴대폰·접는 폰·태블릿(1100px 이하): 상단 비서 카드 줄을 없애고, 비서 고르기는 입력창의 모델 선택 줄로 옮긴다.
   상단에는 제목과 버튼만 남기고, 오피스 장면이 남는 높이를 다 쓴다. */
.pick-target-group { display:none; }
@media (max-width:1100px) {
  .topbar { flex-shrink:0; grid-template-rows:auto; }
  .topbar #target-picker { display:none; }
  .office-scene, .messages { flex:1 1 0; min-height:0; }
  .composer { flex-shrink:0; row-gap:8px; }

  /* 입력창 위 한 줄: [비서 ▾] [모델 ▾] [추론 ▾] */
  .picker { gap:6px; }
  .pick-target-group { display:inline-flex; }
  .picker.single-agent .pick-group:not(.pick-target-group) > .pick-face,
  .picker.single-agent .pick-group:not(.pick-target-group) > .pick-name { display:none; }
  .pick-target-group .pick-select { display:inline-flex; align-items:center; gap:6px; padding-left:4px; font-weight:600; }
  .pick-select .pick-face, .pick-option .pick-face { width:24px; height:24px; }
  .pick-face-auto { display:grid; place-items:center; border-color:#d9bde9; color:#ecd7f7; font-size:13px; line-height:1; }
  .pick-option:disabled { opacity:.45; cursor:default; }
  .pick-option-meta { display:block; margin-top:1px; font-size:10px; font-weight:400; opacity:.75; }
  /* 단축 기능이 하나도 없으면 '만들기' 버튼 줄은 빼서 높이를 아낀다(메뉴 › 단축 기능에서 만들 수 있다) */
  .shortcut-bar:has(> .shortcut-manage:only-child) { display:none; }
}
/* 태블릿 폭에서는 보내기 버튼을 입력칸 옆에 둔다 */
@media (min-width:601px) and (max-width:1100px) {
  .composer-actions { width:auto; align-self:flex-end; }
}
@media (max-width:600px) {
  .composer { padding:9px 12px calc(10px + env(safe-area-inset-bottom)); }
  .pick-select { font-size:12px; padding:4px 22px 4px 9px; background-position:right 8px center; }
  .pick-hint { display:none; }
  .composer-actions { width:100%; }
  .composer-actions button { flex:1; padding-top:9px; padding-bottom:9px; white-space:nowrap; }
}