/* CSチャットの画面。形は STS の姉妹サービスに揃え、サービス色は深い青緑。赤は期限超過と危険な操作のみ。状態は色と文字の両方で示す */
:root{
  --bg:#f5f7f6;--surface:#fff;--surface2:#f0f3f2;--surface3:#e4e9e7;--fg:#1d1d1f;--fg2:#3a3a3c;--muted:#62666b;--line:#e1e5e3;--edge:#868c92;
  --pri:#0b7a6b;--pri-h:#09685b;--pri-bg:#e2f3ef;--pri-line:#b8ded5;--on-pri:#fff;
  --need:#1a5fb4;--need-bg:#e5eefa;--wait:#7a4a00;--wait-bg:#fff0cf;--none:#4f565e;--none-bg:#e9ecee;--done:#0a6b2e;--done-bg:#e0f4e6;--late:#c5221f;--late-bg:#fdeaea;
  --now:#fff8e3;--out:#e2f3ef;
  --s1c:#2a78d6;--s2c:#eb6834;--s3c:#1baf7a;--s0c:#a9b0b6;
  --font:Inter,"Noto Sans JP","Hiragino Sans","Meiryo UI",Meiryo,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--r:8px;--h:36px;--hs:28px;
  --t1:12px;--t2:14px;--t3:16px;--t4:22px;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#121516;--surface:#1a1e1f;--surface2:#242a2b;--surface3:#2f3637;--fg:#eceff0;--fg2:#d3d8da;--muted:#a3adb2;--line:#323a3c;--edge:#7f8a8f;
  --pri:#35b8a4;--pri-h:#4cc9b5;--pri-bg:#173531;--pri-line:#27544d;--on-pri:#08201c;
  --need:#8ab8f5;--need-bg:#1b2c44;--wait:#f0c674;--wait-bg:#3a2f17;--none:#b3bac2;--none-bg:#2b3036;--done:#7fd6a1;--done-bg:#1b3527;--late:#ff8f87;--late-bg:#3f2020;
  --now:#33301f;--out:#173531;
  --s1c:#3987e5;--s2c:#d95926;--s3c:#199e70;--s0c:#6b747a;
  color-scheme:dark}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:var(--t2);line-height:1.6;font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
button,select,textarea,input{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--pri);outline-offset:1px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ic{width:18px;height:18px;flex:none}
.grow{flex:1}
#app{height:100%}
.state{padding:40px var(--s4);text-align:center;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:var(--s3)}

/* 部品 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:var(--h);padding:0 14px;border:1px solid var(--edge);background:var(--surface);border-radius:var(--r);font-weight:600;white-space:nowrap;text-decoration:none}
.btn .ic{width:15px;height:15px}
.btn:hover{background:var(--surface2)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--pri);color:var(--on-pri);border-color:var(--pri)}
.btn.primary:hover{background:var(--pri-h)}
.btn.danger{background:var(--late);color:var(--surface);border-color:var(--late)}
.btn.ghost{border-color:transparent;background:none;color:var(--muted)}
.btn.ghost:hover{background:var(--surface2)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{height:var(--hs);padding:0 10px;font-size:var(--t1)}
.ib{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;background:none;border-radius:var(--r);color:var(--muted);flex:none}
.ib:hover:not(:disabled){background:var(--surface2);color:var(--fg)}
.ib:disabled{opacity:.35;cursor:not-allowed}
.lk{border:0;background:none;padding:0;color:var(--pri);text-decoration:underline;text-underline-offset:2px}
input,select,textarea{background:var(--surface);border:1px solid var(--edge);border-radius:var(--r)}
select,input:not([type=checkbox]){height:var(--h);padding:0 var(--s2)}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--pri);margin:0}
textarea{padding:var(--s2);line-height:1.6}
.pill{display:inline-flex;align-items:center;font-size:var(--t1);line-height:20px;padding:0 7px;border-radius:5px;white-space:nowrap;font-weight:500;background:var(--surface3);color:var(--fg2)}
.pill.need{background:var(--need-bg);color:var(--need)}
.pill.wait{background:var(--wait-bg);color:var(--wait)}
.pill.none{background:var(--none-bg);color:var(--none)}
.pill.done{background:var(--done-bg);color:var(--done)}
.pill.late{background:var(--late-bg);color:var(--late);font-weight:700}
.pill.plain{background:none;padding:0;color:var(--muted)}
.pill.line{background:none;box-shadow:inset 0 0 0 1px var(--edge);color:var(--fg2)}
.chip{flex:none;height:var(--hs);padding:0 var(--s2);border:1px solid var(--line);background:var(--surface);border-radius:14px;font-size:var(--t1);white-space:nowrap;color:var(--fg2);display:inline-flex;align-items:center;gap:4px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.chip .ic{width:12px;height:12px}
.chip:hover{background:var(--surface2)}
.chip[aria-pressed="true"]{background:var(--pri-bg);border-color:var(--pri);color:var(--pri);font-weight:600}
.ct{color:var(--muted);font-size:var(--t1);white-space:nowrap}
.ct.end{margin-left:auto}
.ck{display:flex;align-items:center;justify-content:center;min-width:24px;min-height:24px;cursor:pointer}
.find{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.find .ic{position:absolute;left:8px;width:15px;height:15px;color:var(--muted);pointer-events:none}
.find input{width:100%;min-width:0;padding-left:28px}
.skel{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s4);animation:show .2s .2s both}
.skel i{display:block;height:44px;border-radius:var(--r);background:linear-gradient(90deg,var(--surface2),var(--surface3),var(--surface2));background-size:200% 100%;animation:shine 1.4s linear infinite}
@keyframes show{from{opacity:0}to{opacity:1}}
@keyframes shine{to{background-position:-200% 0}}
.err{color:var(--late);font-size:var(--t1);min-height:0}
.err:empty{display:none}
dialog.ask{border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);padding:var(--s5);width:min(400px,calc(100vw - 32px))}
dialog.ask::backdrop{background:rgb(0 0 0/.4)}
dialog.ask h2{font-size:var(--t3);margin-bottom:var(--s4)}
dialog.ask dl{margin-bottom:var(--s4)}
kbd{font:inherit;font-size:var(--t1);padding:1px 6px;border:1px solid var(--edge);border-radius:4px;background:var(--surface2)}
.actions{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
.actions.end{justify-content:flex-end}
.right{margin-left:auto}

/* 外枠 */
.shell{height:100%;display:grid;grid-template-columns:176px minmax(0,1fr)}
.sb{display:flex;flex-direction:column;min-height:0;background:var(--surface);border-right:1px solid var(--line);padding:var(--s3) var(--s2)}
.brand{display:flex;align-items:center;gap:var(--s2);text-decoration:none;font-weight:700;padding:0 var(--s2) var(--s3);flex:none;white-space:nowrap}
.brand .mk{height:22px;width:auto;display:block}
.brand .dk{display:none}
.brand picture{display:block;min-width:0}
.brand .svc{display:block;width:100%;height:auto}
.brand i{width:1px;height:22px;background:var(--line);flex:none}
@media (prefers-color-scheme:dark){.brand .lt{display:none}.brand .dk{display:block}}
.nav{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.nav a{flex:none;display:flex;align-items:center;gap:10px;height:38px;padding:0 10px;border-radius:var(--r);text-decoration:none;color:var(--fg2);font-weight:500}
.nav a:hover{background:var(--surface2)}
.nav a[aria-current="page"]{background:var(--pri-bg);color:var(--pri);font-weight:700}
.nav a span{flex:1;white-space:nowrap}
.nav b{font-size:var(--t1);min-width:20px;line-height:20px;padding:0 5px;text-align:center;border-radius:10px;background:var(--surface3);color:var(--fg2)}
.nav b.late{background:var(--late);color:var(--surface)}
.foot{flex:none;display:flex;align-items:center;gap:2px;padding-top:var(--s2);border-top:1px solid var(--line)}
.who{flex:1;min-width:0;padding-left:var(--s2);font-size:var(--t1);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.body{min-width:0;min-height:0;display:flex}

/* 受信箱 */
.inbox{flex:1;min-width:0;min-height:0;display:grid;grid-template-columns:320px minmax(0,1fr) 264px;background:var(--surface)}
.list{display:flex;flex-direction:column;min-height:0;min-width:0;border-right:1px solid var(--line)}
.tabs{display:flex;gap:2px;padding:var(--s2) var(--s2) 0;overflow-x:auto;flex:none;scrollbar-width:none}
.tabs button{position:relative;border:0;background:none;height:32px;padding:0 var(--s2);border-radius:6px;white-space:nowrap;color:var(--muted)}
.tabs button:hover{background:var(--surface2)}
.tabs button[aria-pressed="true"]{background:var(--surface3);color:var(--fg);font-weight:700}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--late);margin-left:4px;vertical-align:2px}
.filter{display:flex;gap:var(--s2);padding:var(--s2);flex:none}
.filter select{width:118px;flex:none}
.quick{display:flex;align-items:center;gap:var(--s1);padding:0 var(--s2) var(--s2);border-bottom:1px solid var(--line);flex:none;min-height:37px;overflow-x:auto;scrollbar-width:none}
.rows{overflow-y:auto;flex:1;min-height:0}
.row{display:flex;align-items:stretch;border-bottom:1px solid var(--line);border-left:3px solid transparent}
.row.late{border-left-color:var(--late)}
.row:hover,.row[aria-current="true"]{background:var(--surface2)}
.row[aria-current="true"]{box-shadow:inset 2px 0 0 var(--pri)}
.row>.ck{padding:12px 0 0 var(--s2);align-items:flex-start}
.rowbtn{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--s2);text-align:left;border:0;background:none;padding:10px var(--s3) 10px var(--s2)}
.co{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tm{font-size:var(--t1);color:var(--muted);white-space:nowrap}
.pv{grid-column:1/-1;font-size:var(--t1);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{grid-column:1/-1;display:flex;gap:var(--s1);align-items:center;flex-wrap:wrap;margin-top:2px}
.thread{display:flex;flex-direction:column;min-height:0;min-width:0}
.thead{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3) var(--s2) var(--s4);border-bottom:1px solid var(--line);flex:none;min-height:52px}
.ttl{min-width:0}
.ttl h2{font-size:var(--t3);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sub{font-size:var(--t1);color:var(--muted);display:block}
.back,.judge,.kback{display:none}
.msgs{flex:1;min-height:80px;overflow-y:auto;padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s3);background:var(--bg)}
.daysep{display:flex;justify-content:center}
.daysep span{font-size:var(--t1);color:var(--muted);background:var(--surface3);padding:0 var(--s3);border-radius:10px}
.msg{max-width:78%;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:flex-start;flex:none}
.msg.out{align-self:flex-end;align-items:flex-end}
.bubble{padding:var(--s2) var(--s3);border-radius:12px 12px 12px 4px;background:var(--surface);box-shadow:0 0 0 1px var(--line);white-space:pre-wrap;overflow-wrap:anywhere}
.msg.out .bubble{background:var(--out);border-radius:12px 12px 4px 12px;box-shadow:none}
.msg.now .bubble{background:var(--now);box-shadow:0 0 0 1.5px var(--wait)}
.msg.flash .bubble{animation:flash 1.4s}
@keyframes flash{0%,60%{box-shadow:0 0 0 3px var(--pri)}}
.by{font-size:var(--t1);color:var(--muted);display:flex;align-items:center;gap:6px}
.compose{border-top:1px solid var(--line);padding:var(--s2) var(--s4) var(--s3);display:flex;flex-direction:column;gap:6px;flex:none}
.clabel{display:flex;justify-content:space-between;align-items:center;font-size:var(--t1);color:var(--muted)}
.compose textarea{width:100%;height:92px;resize:vertical}
.side{border-left:1px solid var(--line);padding:var(--s3) var(--s4);overflow-y:auto;min-width:0;display:flex;flex-direction:column;gap:var(--s4);background:var(--surface)}
.shead{display:flex;align-items:center;justify-content:space-between}
.shead h2{font-size:var(--t2)}
#sideclose{display:none}
.side h3{font-size:var(--t1);color:var(--muted);margin:0 0 var(--s1);font-weight:600}
dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s1) 10px}
dt{color:var(--muted);white-space:nowrap}
dd{margin:0;overflow-wrap:anywhere}
.ev{margin:0;padding-left:18px}
.stack{display:flex;flex-direction:column;gap:var(--s1);align-items:flex-start}
.stack .btn{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s2)}
.hist li{display:flex;flex-direction:column;line-height:1.4}
.hist small{font-size:var(--t1);color:var(--muted)}
.fld{display:flex;flex-direction:column;gap:var(--s1);font-size:var(--t1);color:var(--muted);font-weight:600}
.fld input,.fld select,.fld textarea{font-size:var(--t2);font-weight:400;color:var(--fg);width:100%}

/* 管理画面 */
.panel{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;background:var(--surface)}
.ph{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);min-height:60px;flex:none;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ph h1{font-size:var(--t4);line-height:1.3}
.tool{display:flex;gap:var(--s2);padding:var(--s3) var(--s5);flex:none;align-items:center;flex-wrap:wrap}
.tool .find{flex:0 1 280px}
.tool select{width:150px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.bulk{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s5);background:var(--pri-bg);flex:none}
.bulk select{height:var(--hs);width:160px;font-size:var(--t1)}
.tablebox{overflow:auto;min-width:0}
.panel>.tablebox{flex:1;min-height:0}
table{border-collapse:separate;border-spacing:0;width:100%}
.panel>.cards table:not(.plain){min-width:900px}
th,td{text-align:left;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{padding-left:var(--s5)}
th:last-child,td:last-child{padding-right:var(--s5)}
td.wrap{white-space:normal;min-width:220px;overflow-wrap:anywhere}
td.main a{font-weight:600;text-decoration:none}
td.main a:hover{text-decoration:underline}
td.c,th.c{width:48px;padding-right:0}
input[type=checkbox]{vertical-align:middle}
th{font-size:var(--t1);color:var(--muted);font-weight:600;position:sticky;top:0;background:var(--surface);z-index:1}
th.r,td.r{text-align:right}
.thb{border:0;background:none;padding:0;font-weight:600;color:inherit}
.thb:hover{color:var(--fg)}
td select{max-width:190px;height:32px}
td input[data-f="client"]{width:220px;height:32px}
td .btn.sm{margin-left:var(--s1);max-width:200px;overflow:hidden;text-overflow:ellipsis}
.rulet{max-width:760px}
.unit{display:inline-flex;align-items:center;gap:6px}
.unit i{font-style:normal;color:var(--muted);font-weight:400}
.unit input{width:88px;text-align:right}
.pad{padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.pad.wide{gap:var(--s4);max-width:1320px}
.padh{padding:0 var(--s5) var(--s2)}
.panel h2{font-size:var(--t3)}
.tablebox.fill{flex:1;min-height:0;overflow:auto}
.row2{display:flex;gap:var(--s5);flex-wrap:wrap;align-items:flex-start}
.fld.short{max-width:240px}

/* ナレッジ */
.kpanes{flex:1;min-height:0;display:grid;grid-template-columns:320px minmax(0,1fr)}
.klist{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.klist .filter{border-bottom:1px solid var(--line)}
.kitem{display:flex;flex-direction:column;gap:var(--s1);width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:none;padding:10px var(--s3)}
.kitem:hover,.kitem[aria-current="true"]{background:var(--surface2)}
.kitem[aria-current="true"]{box-shadow:inset 3px 0 0 var(--pri)}
.kedit{overflow-y:auto;min-height:0;padding:var(--s4) var(--s5)}
#kform{display:flex;flex-direction:column;gap:var(--s4);max-width:720px}
#kform textarea{min-height:220px;resize:vertical}
.switch{display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer;align-self:flex-start;font-weight:600}
.switch input{position:absolute;opacity:0}
.switch span{width:36px;height:20px;border-radius:10px;background:var(--edge);position:relative;transition:background .15s}
.switch span::after{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background:var(--surface);transition:transform .15s}
.switch input:checked+span{background:var(--pri)}
.switch input:checked+span::after{transform:translateX(16px)}
.switch input:focus-visible+span{outline:2px solid var(--pri);outline-offset:2px}

/* 分析 */
.seg{display:inline-flex;background:var(--surface2);border-radius:var(--r);padding:2px}
.seg button{border:0;background:none;height:28px;padding:0 var(--s3);border-radius:6px;color:var(--muted);font-size:var(--t1);font-weight:600}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--fg);box-shadow:0 0 0 1px var(--line)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.tile{border:1px solid var(--line);border-radius:10px;padding:var(--s3) var(--s4);display:flex;flex-direction:column;min-width:0;text-decoration:none;background:var(--surface)}
a.tile:hover{border-color:var(--pri)}
.tile span{font-size:var(--t1);color:var(--muted);font-weight:600}
.tile strong{font-size:var(--t4);line-height:1.4}
.tile small{font-size:var(--t1);color:var(--muted)}
.card{border:1px solid var(--line);border-radius:10px;padding:var(--s3) var(--s4)}
.ch{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2);min-height:32px}
.card table th:first-child,.card table td:first-child{padding-left:0}
.card table th:last-child,.card table td:last-child{padding-right:0}
.card .tablebox{max-height:320px}
.legend{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:var(--t1);color:var(--fg2);margin-bottom:var(--s2)}
.legend span,.tip span{display:inline-flex;align-items:center;gap:6px}
.legend i,.tip i{width:10px;height:10px;border-radius:3px;display:inline-block}
.s0{background:var(--s0c)}.s1{background:var(--s1c)}.s2{background:var(--s2c)}.s3{background:var(--s3c)}
.chart{position:relative;height:200px;padding:var(--s2) 0 22px 32px}
.ygrid{position:absolute;inset:var(--s2) 0 22px 32px;pointer-events:none}
.ygrid span{position:absolute;left:-32px;right:0;font-size:var(--t1);color:var(--muted);line-height:0;border-bottom:1px dashed var(--line)}
.bars{position:relative;height:100%;display:flex;gap:2px;align-items:stretch}
.bar{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:flex-end;border-radius:4px 4px 0 0;cursor:default}
.bar:hover{background:var(--surface2)}
.bar .stack{display:flex;flex-direction:column;gap:2px;max-width:28px;width:100%;margin:0 auto;align-items:stretch;border-radius:4px 4px 0 0;overflow:hidden}
.bar .stack i{display:block;min-height:2px}
.bar .x{position:absolute;top:100%;left:50%;transform:translateX(-50%);font-size:var(--t1);color:var(--muted);white-space:nowrap;margin-top:4px}
.bar:last-child .x{left:auto;right:0;transform:none}
.tip{position:absolute;top:0;z-index:3;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s2) var(--s3);box-shadow:0 4px 16px rgb(0 0 0/.14);font-size:var(--t1);display:flex;flex-direction:column;gap:2px;min-width:132px;pointer-events:none}
.tip em{font-style:normal;font-weight:700;margin-left:auto}
.hbars{display:flex;flex-direction:column;gap:6px}
.hb{display:grid;grid-template-columns:170px minmax(0,1fr) 52px 44px;gap:var(--s2);align-items:center}
.hb .t{height:12px;background:var(--surface2);border-radius:0 4px 4px 0}
.hb .t i{display:block;height:100%;background:var(--s1c);border-radius:0 4px 4px 0}
.hb .v{text-align:right;font-size:var(--t1);color:var(--fg2)}
.hb .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ログイン */
.lg{min-height:100%;display:flex;align-items:center;justify-content:center;padding:var(--s5) var(--s4)}
.lg-box{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.lg-box .brand{justify-content:center;gap:var(--s3);padding:0 0 var(--s4)}
.lg-box .brand .mk{height:28px}
.lg-box .brand i{height:28px}
.lg-box .brand .svc{width:auto;height:36px}
.lg-box label{font-size:var(--t1);font-weight:600;color:var(--fg2);margin-top:var(--s1)}
.lg-box input{width:100%;height:44px}
.lg-box .btn{height:44px;margin-top:var(--s3)}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--surface);padding:var(--s2) var(--s4);border-radius:var(--r);z-index:30;display:flex;align-items:center;gap:var(--s3);max-width:calc(100vw - 32px);box-shadow:0 6px 20px rgb(0 0 0/.22)}
#toast span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#toast button{border:0;background:none;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;padding:var(--s1) 0;white-space:nowrap}

/* 右の判定は幅が足りない時に重ねて開く */
@media (max-width:1180px){
  .shell{grid-template-columns:76px minmax(0,1fr)}
  .brand{justify-content:center;padding:0 0 var(--s3)}
  .brand .svc{width:auto;height:30px}
  .who{display:none}
  .nav a{flex-direction:column;gap:2px;height:52px;padding:6px 2px;position:relative;justify-content:center}
  .nav a span{flex:none;font-size:10.5px;line-height:1.2}
  .nav b{position:absolute;top:2px;right:8px;min-width:18px;line-height:18px;padding:0 4px}
  .foot{justify-content:center}
  .inbox{grid-template-columns:300px minmax(0,1fr)}
  .judge{display:inline-flex}
  .tabs button{padding:0 6px}
  .side{position:fixed;top:0;right:0;bottom:0;width:min(340px,100vw);z-index:15;border-left:1px solid var(--line);box-shadow:-8px 0 24px rgb(0 0 0/.14);transform:translateX(100%);visibility:hidden;transition:transform .16s,visibility .16s}
  .inbox.sideopen .side{transform:none;visibility:visible}
  #sideclose{display:inline-flex}
  .hb{grid-template-columns:130px minmax(0,1fr) 44px 40px}
}

/* スマホは下のタブで移動し、会話を開いたら全面で使う */
@media (max-width:760px){
  :root{--h:44px;--hs:36px}
  .shell{display:flex;flex-direction:column-reverse}
  .sb{flex:none;border-right:0;border-top:1px solid var(--line);padding:0 0 env(safe-area-inset-bottom,0px)}
  .sb .brand,.foot{display:none}
  .lg-box .brand .mk{height:22px}
  .lg-box .brand i{height:24px}
  .lg-box .brand .svc{height:28px}
  .nav{flex-direction:row;overflow:visible;gap:0}
  .nav a{flex:1 1 0;min-width:0;height:54px;padding:4px 0;border-radius:0}
  .nav a span{font-size:10px;letter-spacing:-.02em}
  .nav b{right:calc(50% - 22px)}
  .inthread .sb{display:none}
  .body{flex:1}
  .ib{width:44px;height:44px}
  .inbox{grid-template-columns:minmax(0,1fr)}
  .list{border-right:0}
  .inbox.open .list{display:none}
  .inbox:not(.open) .thread{display:none}
  .back{display:inline-flex}
  .thead{padding:var(--s1) var(--s2)}
  .msg{max-width:90%}
  .msgs{padding:var(--s3)}
  .compose{padding:var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom,0px))}
  .compose textarea{height:84px}
  .compose .btn{flex:1}
  .compose .btn.ghost{display:none}
  .filter select{width:112px}
  .rowbtn{padding:var(--s3) var(--s3) var(--s3) var(--s2)}
  #prev,#next{display:none}
  .row>.ck{padding:0 0 0 var(--s2);min-width:40px;align-items:center}
  .ph{padding:var(--s2) var(--s4)}
  .ph h1{font-size:var(--t3)}
  .tool,.bulk{padding:var(--s2) var(--s4)}
  .tool .find{flex:1 1 100%}
  .tool select{flex:1}
  .chips{overflow-x:auto;flex-wrap:nowrap;width:100%;scrollbar-width:none}
  .pad{padding:var(--s3) var(--s4)}
  .padh{padding:0 var(--s4) var(--s2)}
  th:first-child,td:first-child{padding-left:var(--s4)}
  th:last-child,td:last-child{padding-right:var(--s4)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
  .tile{padding:var(--s2) var(--s3)}
  .kpanes{grid-template-columns:minmax(0,1fr)}
  .klist{border-right:0}
  .kpanes.open .klist{display:none}
  .kpanes:not(.open) .kedit{display:none}
  .kback{display:inline-flex}
  .kedit{padding:var(--s2) var(--s4)}
  .hb{grid-template-columns:104px minmax(0,1fr) 40px 36px}
  .chart{height:176px}
  .rulet th,.rulet td{padding:var(--s2) var(--s1)}
  .rulet th:first-child,.rulet td:first-child{padding-left:var(--s4);white-space:normal}
  .rulet th:last-child,.rulet td:last-child{padding-right:var(--s4)}
  .rulet select{width:118px;padding:0 var(--s1)}
  .rulet .unit{gap:2px}
  .rulet .unit input{width:52px;padding:0 var(--s1)}
  /* 表はカードへ */
  .cards table,.cards tbody,.cards tr,.cards td{display:block;width:100%}
  .panel>.cards table:not(.plain){min-width:0}
  .cards thead{display:none}
  .cards tr{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);position:relative}
  .cards td,.cards td:first-child,.cards td:last-child{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s1) 0;border:0;white-space:normal;text-align:left;min-width:0}
  .cards td.main{font-weight:600;padding-left:0}
  .cards td.c{position:absolute;right:var(--s4);top:var(--s3);width:auto}
  .cards td.wrap{padding-right:var(--s5)}
  .cards td[data-l]::before{content:attr(data-l);color:var(--muted);font-size:var(--t1);flex:none}
  .cards td select,.cards td input[data-f="client"]{flex:1;max-width:220px;width:auto;height:40px;min-width:0}
  .cards td .btn.sm{max-width:120px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}