/* 업무 카드: 하는 일(제목·진행 단계)이 잘 읽히게 넓게 쓰고, 맡은 비서 초상화는 오른쪽 아래에 세운다 */
.task-panel .task-card { padding:12px 12px 10px 14px; overflow:hidden; min-height:96px; }
.task-panel .task-card > .task-top { align-items:flex-start; gap:8px; }
.task-panel .task-card > .task-top .task-title { font-size:14px; line-height:1.45; -webkit-line-clamp:3; }
.task-panel .task-card > .task-clock,
.task-panel .task-card > .task-bar,
.task-panel .task-card > .task-steps { margin-left:0; }
.task-panel .task-card > .task-clock { position:relative; z-index:1; margin-top:9px; font-size:11.5px; }
.task-panel .task-card > .task-top, .task-panel .task-card > .task-steps { position:relative; z-index:1; }
.task-panel .task-card > .task-bar { margin-right:0; }
.task-panel .task-card > .task-steps { padding-right:60px; min-height:56px; font-size:12px; }
.task-panel .task-card > .task-steps .step { line-height:1.5; }
.task-panel .task-card > .task-face {
  position:absolute; right:6px; bottom:0; width:54px; height:70px; border:0; border-radius:0; background:none;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(#000 72%,transparent); mask-image:linear-gradient(#000 72%,transparent);
}
.task-panel .task-card > .task-face img,
.task-panel .task-card > .task-face .portrait-motion { height:200%; object-position:50% 2%; }
/* 맡긴 일(안쪽 카드)은 작게: 초상화와 단계 여백을 줄인다 */
.task-panel .task-children .task-card > .task-face { width:40px; height:56px; }
.task-panel .task-children .task-card > .task-steps { padding-right:44px; min-height:40px; }

/* 휴대폰: 업무 현황은 떠 있는 팝업 대신 오른쪽에서 밀려 나오는 서랍. 왼쪽에 살짝 남긴 자리를 누르면 닫힌다. */
@media (max-width:600px) {
  .app .task-panel, .app.tasks-open.today-open .task-panel, .app.tasks-open.today-open.panels-reversed .task-panel {
    position:fixed !important; inset:0 0 0 46px !important; width:auto !important; height:auto !important;
    margin:0; z-index:45; border-radius:22px 0 0 22px; border-right:0;
    padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom);
    box-shadow:-14px 0 34px #0009, 0 0 0 100vmax #0b080f8c;
  }
  .app.tasks-open .task-panel { animation:task-drawer-in .3s cubic-bezier(.22,.8,.26,1); }
  .app .task-panel.drawer-closing { display:flex !important; animation:task-drawer-out .22s ease-in forwards; }
}
@keyframes task-drawer-in { from { transform:translateX(100%); box-shadow:-14px 0 34px #0000, 0 0 0 100vmax #0b080f00; } to { transform:none; } }
@keyframes task-drawer-out { from { transform:none; } to { transform:translateX(100%); box-shadow:-14px 0 34px #0000, 0 0 0 100vmax #0b080f00; } }
@media (prefers-reduced-motion:reduce) { .app .task-panel, .app .task-panel.drawer-closing { animation-duration:1ms !important; } }
/* 휴대폰: 끝난 업무는 제목 두 줄과 걸린 시간만 남겨 짧게 접는다(과정은 눌러서 대화에서 본다) */
@media (max-width:600px) {
  .task-panel .task-card:is(.completed,.stopped,.failed,.interrupted) { min-height:0; padding:10px 64px 10px 14px; }
  .task-panel .task-card:is(.completed,.stopped,.failed,.interrupted) > .task-top .task-title { font-size:13px; -webkit-line-clamp:2; }
  .task-panel .task-card.completed > .task-top .task-badge { display:none; }
  .task-panel .task-card:is(.completed,.stopped,.failed,.interrupted) > :is(.task-steps,.task-children) { display:none; }
  .task-panel .task-card:is(.completed,.stopped,.failed,.interrupted) > .task-clock { margin-top:4px; font-size:11px; }
  .task-panel .task-card:is(.completed,.stopped,.failed,.interrupted) > .task-error { margin:4px 0 0; font-size:11px; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
  .task-panel .task-card:is(.completed,.stopped,.failed,.interrupted) > .task-face { width:44px; height:56px; }
  .task-panel .task-card:is(.completed,.stopped,.failed,.interrupted):has(> .task-approve) > .task-face { display:none; }
  .task-panel .task-card:is(.completed,.stopped,.failed,.interrupted) > .task-approve { position:absolute; right:8px; top:50%; width:44px; height:44px; margin:-22px 0 0; z-index:2; }
}