/* Fe-Mo：暗い基調に発光する1色。常に動いているエージェントの「状態」を見せる */
:root{
  color-scheme:dark;
  --bg:#070B14; --surface:#0E1522; --raised:#141D2E; --sunk:#1A2436; --fg:#E8F0F7; --muted:#9AABBF; --line:#24324A;
  --accent:#4FE3D6; --accent-fg:#04201E; --accent-soft:#0E2C30; --accent-2:#7C9CFF;
  --ok:#4ADE9F; --ok-soft:#0F2E26; --warn:#F5C451; --warn-soft:#33280D; --crit:#FF8A80; --crit-soft:#3A1614;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif; --num:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --nav-h:calc(62px + env(safe-area-inset-bottom,0px));
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg)}
body{margin:0;min-height:100dvh;color:var(--fg);font-family:var(--body);font-size:15px;line-height:1.65;padding:0 max(16px,env(safe-area-inset-right,0px)) calc(var(--nav-h) + 24px) max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(900px 480px at 50% -160px,rgba(79,227,214,.13),transparent 70%),linear-gradient(rgba(148,178,214,.045) 1px,transparent 1px) 0 0/100% 44px,linear-gradient(90deg,rgba(148,178,214,.045) 1px,transparent 1px) 0 0/44px 100%,var(--bg);background-attachment:fixed}
button,input,select,textarea{font:inherit}
h1,h2{margin:0}
h2{font-size:15px;font-weight:700}
.wrap{width:100%;max-width:900px;min-width:0;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.wrap .wrap{max-width:none;margin:0}
.wrap>*{min-width:0}
.sub{color:var(--muted);font-size:13px}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* エージェントの状態（コア） */
.orb{position:relative;width:34px;height:34px;flex:none;border-radius:50%;background:radial-gradient(circle at 38% 32%,#E9FFFC 0,var(--accent) 34%,#0C5E63 72%,#06262B 100%);box-shadow:0 0 18px rgba(79,227,214,.55);animation:breathe 4s ease-in-out infinite}
.orb::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1.5px solid transparent;border-top-color:var(--accent);border-right-color:rgba(79,227,214,.25);animation:spin 7s linear infinite}
.orb.lg{width:52px;height:52px}
body[data-state="thinking"] .orb::after{animation-duration:.9s;border-right-color:var(--accent-2)}
body[data-state="thinking"] .orb{animation-duration:1.1s}
body[data-state="confirm"] .orb{background:radial-gradient(circle at 38% 32%,#FFF6DC 0,var(--warn) 36%,#6B4E0B 76%,#2B1F05 100%);box-shadow:0 0 18px rgba(245,196,81,.5)}
body[data-state="confirm"] .orb::after{border-top-color:var(--warn);border-right-color:rgba(245,196,81,.25)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:scale(.93);opacity:.88}}
@keyframes blink{50%{opacity:.25}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* 上部 */
header.top{position:sticky;top:0;z-index:6;display:flex;align-items:center;gap:13px;padding:calc(10px + env(safe-area-inset-top,0px)) 16px 10px;margin:0 -16px;background:rgba(7,11,20,.8);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
header.top .id{min-width:0;flex:1;display:flex;flex-direction:column;line-height:1.25}
.mark{font-family:var(--num);font-weight:600;font-size:17px;letter-spacing:.06em}
#agentState{font-size:12px;color:var(--accent)}
body[data-state="confirm"] #agentState{color:var(--warn)}
#today{white-space:nowrap}

/* 指標 */
.kpis{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:8px}
.kpi{appearance:none;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:9px 12px;color:var(--fg);cursor:pointer;display:flex;flex-direction:column;gap:3px;min-width:0;transition:border-color .15s}
.kpi:hover{border-color:var(--accent)}
.kpi small{font-size:11.5px;color:var(--muted);white-space:nowrap}
.kpi b{font-family:var(--num);font-weight:600;font-size:19px;line-height:1.2;white-space:nowrap}
.kpi b span{font-size:12px;color:var(--muted);font-weight:500}
.kpi.warn b{color:var(--warn)} .kpi.crit b{color:var(--crit)}
.kpi.warn{border-color:rgba(245,196,81,.45)} .kpi.crit{border-color:rgba(255,138,128,.5)}
.kbar{height:3px;background:var(--sunk);border-radius:2px;overflow:hidden;margin-top:2px}
.kbar i{display:block;height:100%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.kpi.warn .kbar i{background:var(--warn);box-shadow:none} .kpi.crit .kbar i{background:var(--crit);box-shadow:none}

/* 会話 */
#tab-ai{padding-top:14px;padding-bottom:128px}
#chatlog{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.msg{white-space:pre-wrap;overflow-wrap:anywhere;scroll-margin:84px 0 190px;animation:rise .22s ease-out}
.msg.user{align-self:flex-end;max-width:84%;padding:9px 13px;border-radius:14px 14px 3px 14px;background:linear-gradient(135deg,#1C2C4C,#172338);border:1px solid #2C4068}
.msg.ai{position:relative;align-self:stretch;padding:1px 0 1px 15px;border-left:2px solid var(--accent)}
.msg.tool{align-self:flex-start;font-family:var(--num);font-size:12px;color:var(--ok);padding-left:17px}
.msg.tool::before{content:"✓ "}
.msg.note{align-self:stretch;background:var(--warn-soft);color:var(--warn);font-size:13px;padding:8px 12px;border-radius:8px}
.msg.think{color:var(--muted);border-left-color:var(--accent-2)}
.dots i{display:inline-block;width:5px;height:5px;margin-left:4px;border-radius:50%;background:var(--accent-2);animation:blink 1s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
.msg.confirm{align-self:stretch;display:flex;flex-direction:column;gap:9px;padding:12px 14px;border-radius:10px;background:var(--surface);border:1px solid rgba(245,196,81,.55);box-shadow:0 0 22px rgba(245,196,81,.08)}
.msg.confirm.settled{border-color:var(--line);box-shadow:none;opacity:.8}
.cf-l{font-size:11.5px;font-weight:700;color:var(--warn)}
.settled .cf-l{color:var(--muted)}
.cf-t{font-weight:700}
.cf-i{font-family:var(--num);font-size:12.5px;color:var(--muted);display:flex;flex-direction:column;gap:1px}
.cf-i .over{color:var(--crit)}
.cf-b{display:flex;gap:8px}
.cf-b .btn{flex:1}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:30px 8px 8px;color:var(--muted)}
.empty b{color:var(--fg);font-size:17px}
.empty .orb{margin-bottom:6px}
.empty p{margin:0;font-size:13.5px;max-width:36em}

/* 入力 */
.dock{position:fixed;left:0;right:0;bottom:var(--nav-h);z-index:4;padding:8px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px));background:linear-gradient(transparent,var(--bg) 22%)}
.dock-in{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:8px}
#quick{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
#quick::-webkit-scrollbar{display:none}
#quick .chip{flex:none;background:var(--surface);min-height:30px;font-size:12.5px}
.composer{display:flex;gap:8px;align-items:flex-end;background:var(--raised);border:1px solid var(--line);border-radius:14px;padding:6px 6px 6px 12px;transition:border-color .15s,box-shadow .15s}
.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 22px rgba(79,227,214,.18)}
.composer textarea{flex:1;border:0;outline:0;background:transparent;resize:none;min-height:40px;max-height:120px;padding:8px 0;font-size:16px;line-height:1.45}
.composer textarea:focus-visible{outline:0}
#send{flex:none;width:42px;height:42px;padding:0;min-height:0;border-radius:11px;display:grid;place-items:center}
#send svg{width:20px;height:20px}
#send:disabled{background:var(--sunk);border-color:var(--sunk);color:var(--muted);opacity:1}

/* 共通部品 */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
#tab-now,#tab-ledger,#tab-log{padding-top:14px}
#logbody{display:flex;flex-direction:column;gap:16px}
.head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media(max-width:720px){.grid2{grid-template-columns:minmax(0,1fr)}}
.big{font-family:var(--num);font-size:34px;font-weight:600;line-height:1.1}
.meter{height:8px;background:var(--sunk);border-radius:4px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.meter.warn i{background:var(--warn);box-shadow:none} .meter.crit i{background:var(--crit);box-shadow:none}
.banner{border-radius:8px;padding:10px 12px;font-size:14px;font-weight:500}
.banner.warn{background:var(--warn-soft);color:var(--warn)} .banner.crit{background:var(--crit-soft);color:var(--crit)} .banner.ok{background:var(--ok-soft);color:var(--ok)}
.chart{position:relative;display:flex;align-items:flex-end;gap:4px;height:132px;padding-top:6px}
.bar{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:2px}
.bar b{font-family:var(--num);font-size:10px;font-weight:500;color:var(--muted)}
.bar i{display:block;width:100%;max-width:34px;background:var(--accent);border-radius:2px 2px 0 0;min-height:1px}
.bar.future i{background:transparent;border:1.5px dashed var(--accent)}
.bar.over i{background:var(--crit)} .bar.future.over i{background:transparent;border-color:var(--crit)}
.bar.gap b{color:var(--crit);font-weight:600} .bar.now b{color:var(--fg);font-weight:600}
.months{display:flex;gap:4px;font-family:var(--num);font-size:10px;color:var(--muted);margin-top:-6px}
.months span{flex:1 1 0;text-align:center;min-width:0}
.months .now{color:var(--fg);font-weight:600}
.capline{position:absolute;left:0;right:0;border-top:1.5px solid var(--crit);pointer-events:none}
.capline span{position:absolute;right:0;top:-16px;font-size:10px;color:var(--crit);background:var(--surface);padding:0 3px}
.list{display:flex;flex-direction:column}
.row{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line);min-width:0}
.row:first-child{border-top:0}
.row .main{min-width:0;flex:1;text-align:left;background:none;border:0;color:inherit;padding:0;cursor:pointer}
.row .name{font-weight:700;display:block;overflow-wrap:anywhere}
.row .meta{font-size:12.5px;color:var(--muted);display:block;overflow-wrap:anywhere}
.pill{display:inline-block;font-size:11.5px;font-weight:700;padding:1px 7px;border-radius:4px;white-space:nowrap}
.p-active{background:var(--ok-soft);color:var(--ok)} .p-check{background:var(--warn-soft);color:var(--warn)} .p-stopped{background:var(--sunk);color:var(--muted)} .p-transferred{background:var(--accent-soft);color:var(--accent)} .p-none{color:var(--muted);border:1px solid var(--line)} .p-crit{background:var(--crit-soft);color:var(--crit)}
.btn,button.btn{font-size:14px;font-weight:700;border-radius:8px;padding:8px 12px;border:1px solid var(--line);background:var(--raised);color:var(--fg);cursor:pointer;white-space:nowrap;min-height:40px;text-align:center;transition:box-shadow .15s,border-color .15s}
.btn:hover{border-color:var(--muted)}
.btn.primary,button.btn.primary{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.btn.primary:hover{box-shadow:0 0 16px rgba(79,227,214,.45)}
.btn.small,button.btn.small{font-size:13px;padding:4px 10px;min-height:36px}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{font-size:16px;color:var(--fg);background:var(--raised);border:1px solid var(--line);border-radius:8px;padding:8px 10px;width:100%;min-width:0;min-height:40px}
label.f{display:flex;flex-direction:column;gap:3px;font-size:12.5px;color:var(--muted);flex:1;min-width:130px}
.fields{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-size:13px;font-weight:500;padding:4px 11px;border-radius:15px;border:1px solid var(--line);background:var(--raised);color:var(--fg);cursor:pointer;min-height:32px}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
table{border-collapse:separate;border-spacing:0;font-size:13px;width:100%}
th,td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
tr:last-child td{border-bottom:0}
th{font-weight:500;color:var(--muted);font-size:11.5px;background:var(--surface)}
.st{position:sticky;left:0;background:var(--surface);text-align:left;max-width:170px;min-width:150px;white-space:normal;border-right:1px solid var(--line);z-index:1;cursor:pointer}
.st b{display:block;font-weight:700;overflow-wrap:anywhere;line-height:1.3}
td.c{font-family:var(--num);font-size:12px;min-width:30px}
td.c.hit{background:var(--ok-soft);color:var(--ok)}
td.c.miss{background:var(--crit-soft);color:var(--crit);font-weight:600}
td.c.flag{background:var(--warn-soft);color:var(--warn)}
th.now,td.now{box-shadow:inset 1px 0 var(--accent),inset -1px 0 var(--accent)}

/* 下のタブ */
nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;background:rgba(10,15,26,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--line);display:flex;justify-content:center;gap:4px;padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px))}
nav.tabs button{flex:1;max-width:200px;height:50px;background:none;border:0;color:var(--muted);font-size:11.5px;font-weight:700;border-radius:9px;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
nav.tabs svg{width:20px;height:20px}
nav.tabs button[aria-selected="true"]{color:var(--accent);background:var(--accent-soft)}
nav.tabs .dot{position:absolute;top:3px;left:calc(50% + 7px);min-width:16px;padding:0 4px;font-size:10.5px;line-height:16px;border-radius:8px;background:var(--crit);color:#2B0705;font-family:var(--num);font-weight:600}

/* シートと通知 */
#sheet{position:fixed;inset:0;background:rgba(2,5,10,.7);z-index:20;display:flex;justify-content:center;align-items:flex-end;padding-top:env(safe-area-inset-top,0px)}
#sheet .card{background:var(--surface);border:1px solid var(--line);border-bottom:0;width:100%;max-width:640px;max-height:90%;overflow-y:auto;border-radius:14px 14px 0 0;padding:18px max(16px,env(safe-area-inset-right,0px)) calc(18px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:14px}
.sec{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.dl{font-size:13px;display:flex;justify-content:space-between;gap:10px;padding:3px 0;overflow-wrap:anywhere}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 12px);background:var(--raised);color:var(--fg);border:1px solid var(--accent);padding:9px 14px;border-radius:9px;z-index:30;display:flex;gap:12px;align-items:center;font-size:14px;width:max-content;max-width:calc(100% - 32px)}
#toast button{background:none;border:0;color:var(--accent);font-weight:700;text-decoration:underline;cursor:pointer;white-space:nowrap;min-height:32px}
details summary{cursor:pointer;font-weight:700}

/* ログイン */
body.auth{display:grid;place-items:center;padding:24px 16px}
.auth-card{width:100%;max-width:380px;background:rgba(14,21,34,.88);border:1px solid var(--line);border-radius:14px;padding:30px 24px 24px;display:flex;flex-direction:column;gap:18px;box-shadow:0 0 60px rgba(79,227,214,.07)}
.brand{display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center}
.brand .mark{font-size:24px}
.brand .sub{margin-top:-11px}
.auth-lead{margin:0;text-align:center}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-form input[readonly]{background:var(--sunk);color:var(--muted)}
.auth-form .btn{width:100%;min-height:46px;margin-top:4px}
a.btn{display:inline-block;text-decoration:none}

/* 勤怠 */
body.staff{padding-bottom:32px}
#staff{padding-top:14px}
.clock{align-items:center;gap:6px;padding:22px 16px;text-align:center}
.clock .now{font-family:var(--num);font-size:44px;font-weight:600;line-height:1.1}
.clock .cst{font-size:13px;font-weight:700;color:var(--muted)}
.clock .cst.on{color:var(--accent)} .clock .cst.brk{color:var(--warn)}
.punches{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:12px}
.punches .btn{min-height:58px;font-size:16px;border-radius:12px}
.punches .wide{grid-column:1/-1}
.tot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tot div{background:var(--raised);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0}
.tot small{display:block;font-size:11.5px;color:var(--muted)}
.tot b{font-family:var(--num);font-size:17px;font-weight:600}
.tot .warn b{color:var(--warn)} .tot .crit b{color:var(--crit)}
.dayrow{display:grid;grid-template-columns:62px 1fr auto;gap:2px 8px;align-items:baseline;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.dayrow:first-child{border-top:0}
.dayrow .d{font-family:var(--num);color:var(--muted);font-size:12.5px}
.dayrow .t{font-family:var(--num);overflow-wrap:anywhere}
.dayrow .m{font-family:var(--num);font-weight:600;text-align:right}
.dayrow .x{grid-column:2/-1;font-size:12px;color:var(--muted)}
.dayrow .x.bad{color:var(--warn)}
.monthnav{display:flex;align-items:center;justify-content:space-between;gap:8px}
.monthnav b{font-family:var(--num);font-size:15px}
.linkbox{word-break:break-all;font-family:var(--num);font-size:12.5px;background:var(--raised);border:1px solid var(--accent);border-radius:8px;padding:10px}
nav.tabs button{font-size:11px}

.toolrow{display:block;padding:11px 0;border-top:1px solid var(--line);color:var(--fg);text-decoration:none}
.toolrow:first-child{border-top:0}
.toolrow .name{display:block;font-weight:700;color:var(--accent)}
.toolrow .meta{display:block;font-size:12.5px;color:var(--muted)}
.toolrow:hover .name{text-decoration:underline}