/* 支援デスク（画面H）。developer の主な仕事場で、管理画面のタブではない。
   左が4キュー＋一覧、右が詳細（会話の前後・回答・知識案）。
   ボタン・入力・しるしの見た目は components.css にある。 */

#desk { flex:1; min-width:0; display:flex; overflow:hidden; }

/* ============ 左: キューと一覧 ============ */

#desk .queues { width:280px; flex-shrink:0; background:var(--surface);
                border-right:1px solid var(--line); overflow-y:auto;
                padding:var(--s3) var(--s2); display:flex; flex-direction:column;
                gap:2px; }
#desk .q { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3);
           border:none; border-radius:var(--r1); font-size:var(--f-md);
           font-family:inherit; color:var(--ink); background:none; cursor:pointer;
           text-align:left; transition:background .12s ease; }
#desk .q:hover { background:var(--surface-3); }
#desk .q.active { background:var(--accent-soft); color:var(--accent); font-weight:600;
                  box-shadow:inset 3px 0 0 var(--accent); }
/* 件数は未対応・自分の担当・差し戻されただけ。**完了は数字を出さない**
   （減らない数字を見せても行動が変わらない） */
#desk .q .n { margin-left:auto; font-size:var(--f-xs); border-radius:var(--r-pill);
              padding:0 6px; background:var(--bad); color:#fff;
              font-variant-numeric:tabular-nums; }
#desk .q .n.calm { background:var(--surface-3); color:var(--ink-2); }
#desk .q .n:empty { display:none; }

#desk .qlist { margin-top:var(--s3); display:flex; flex-direction:column; gap:var(--s1); }
#desk .qcard { border:1px solid var(--line); border-radius:var(--r2);
               background:var(--surface); padding:var(--s2) var(--s3);
               font-size:var(--f-sm); line-height:1.7; cursor:pointer;
               transition:border-color .12s ease, background .12s ease; }
#desk .qcard:hover { background:var(--surface-2); border-color:var(--line-strong); }
#desk .qcard.active { border-color:var(--accent); background:var(--accent-soft); }
#desk .qcard .kind { font-size:var(--f-xs); color:var(--ink-2); }
#desk .qcard .kind b { color:var(--bad); font-weight:600; }
#desk .qcard .ttl { font-weight:600; margin:2px 0; word-break:break-word;
                    color:var(--ink); }
#desk .qcard .foot { font-size:var(--f-xs); color:var(--ink-2); }
#desk .qlist .none { font-size:var(--f-sm); color:var(--ink-2); padding:var(--s2); }

/* ============ 右: 詳細 ============ */

#desk .detail { flex:1; min-width:0; overflow-y:auto; padding:var(--s5) var(--s5) var(--s6); }
#desk .detail .empty { color:var(--ink-2); font-size:var(--f-md); }
#desk .dhead { display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); align-items:baseline;
               margin-bottom:var(--s2); }
#desk .dtitle { width:100%; font-size:var(--f-xl); font-weight:600; line-height:1.5; }
#desk .dby { font-size:var(--f-sm); color:var(--ink-2); }

#desk .dsec { padding:var(--s3) var(--s4); margin-top:var(--s3); }
#desk .dsec > h4 { font-size:var(--f-sm); color:var(--ink-2); font-weight:600;
                   letter-spacing:.04em; margin-bottom:var(--s2); }
#desk .dsec.off { opacity:.5; }
#desk .dsec label { font-size:var(--f-sm); color:var(--ink-2); display:block;
                    margin:var(--s2) 0 var(--s1); }
#desk .dsec label .req { color:var(--bad); }
#desk .dsec input, #desk .dsec textarea { width:100%; resize:vertical; }
#desk .dsec textarea { line-height:1.8; }

/* 会話の前後。**既定で畳む** — 「必要だから開いた」を残すため */
#desk details.ctx { margin-top:var(--s3); }
#desk details.ctx > summary { padding:var(--s2) var(--s3); font-size:var(--f-md);
                              color:var(--accent); cursor:pointer; }
#desk details.ctx .body { border-top:1px solid var(--line); padding:var(--s3);
                          max-height:360px; overflow-y:auto; }
#desk .cm { font-size:var(--f-md); line-height:1.8; margin-bottom:var(--s2); }
#desk .cm .who { font-size:var(--f-xs); color:var(--ink-2); display:block; }
#desk .cm.user .who { color:var(--accent); }
#desk .cm.support .who { color:var(--ok); }
#desk .cm .txt { white-space:pre-wrap; word-break:break-word; }

#desk .dacts { display:flex; gap:var(--s2); justify-content:flex-end; flex-wrap:wrap;
               margin-top:var(--s3); }
#desk .dmsg { font-size:var(--f-sm); color:var(--bad); min-height:16px;
              margin-top:var(--s2); text-align:right; }
#desk .dmsg.ok { color:var(--ok); }
/* 送信結果は詳細の先頭に出す（再描画で消えないように flash として持ち越す） */
#desk .dhead + .dmsg.ok { text-align:left; margin:var(--s2) 0 0; padding:var(--s2) var(--s3);
                          background:var(--ok-soft); border:1px solid var(--ok-line);
                          border-radius:var(--r1); }

/* ============ 画面幅への追随 ============
   狭い端末では一覧と詳細が横に並ばない。**一覧を上、詳細を下**に積む
   （逆にすると、選ぶ前に空の詳細だけが見える） */
@media (max-width:900px),
       (hover:none) and (pointer:coarse) and (max-width:1280px) {
  #desk { flex-direction:column; }
  #desk .queues { width:auto; border-right:none; border-bottom:1px solid var(--line);
                  max-height:42vh; }
  #desk .detail { padding:var(--s4) var(--s3) var(--s5); }
  #desk .dtitle { font-size:var(--f-lg); }
  #desk .dacts { justify-content:stretch; }
  #desk .dacts button { flex:1; }
}