/* Smart Assistant の見た目（白基調・ロゴ 3 色）。キット共通の styles.css のあとに読む。インラインの style は書かない（CSP） */
body.sa {
  --bg: #ffffff; --panel: #ffffff; --tint: #faf8f6; --text: #3e3a39; --muted: #79726f; --line: #e6e2df;
  --accent: #3e3a39; --accent-text: #fff; --brand-o: #f97c0b; --brand-y: #ffe200;
  --wait: #c25e00; --wait-soft: #fff2e4; --done: #3f7a52; --done-soft: #e8f3eb; --self: #8a6d00; --self-soft: #fff8cc;
  --late: #c62f28; --late-soft: #fdecea; --consult: #2c5aa0; --consult-soft: #e9f0fa; --link: #b85a00;
  color-scheme: light;
  font-family: "Noto Sans JP", system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif; font-size: 15px;
}
body.sa a { color: var(--link); }
body.sa header.apph { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: var(--bg); position: sticky; top: 0; z-index: 10; }
body.sa .brand-img { height: 26px; width: auto; display: block; }
body.sa .brand-link { line-height: 0; }
body.sa .who-box { display: grid; text-align: right; font-size: 12px; color: var(--muted); line-height: 1.3; margin-left: auto; }
body.sa .who-box b { color: var(--text); font-size: 13px; }
body.sa main.sa-main { max-width: 720px; padding: 12px 16px 96px; display: grid; gap: 16px; }
body.sa .brand { display: grid; justify-items: center; gap: 6px; margin-bottom: 16px; }
body.sa .brand img { height: 34px; width: auto; }
body.sa .headline { background: var(--tint); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; }
body.sa .lbl { font-size: 11px; color: var(--muted); letter-spacing: .06em; font-family: ui-monospace, Menlo, Consolas, monospace; }
body.sa .headline p { margin: 0; font-size: 14px; }
body.sa .card { border-radius: 10px; margin-bottom: 0; }
body.sa .card.plain { border-left: 4px solid var(--line); }
body.sa .card.wait { border-left: 4px solid var(--wait); } body.sa .card.late { border-left: 4px solid var(--late); } body.sa .card.self { border-left: 4px solid var(--self); }
body.sa .card.consult { border-left: 4px solid var(--consult); } body.sa .card.doing { border-left: 4px solid var(--accent); } body.sa .card.done { border-left: 4px solid var(--done); opacity: .75; }
body.sa .ask textarea { min-height: 56px; background: var(--tint); }
body.sa .hint { font-size: 12px; color: var(--muted); }
body.sa .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
body.sa .chip { font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; }
body.sa .chip.on { background: var(--tint); color: var(--text); border-color: var(--text); }
body.sa .chip.consult { border-color: var(--consult); color: var(--consult); }
body.sa .summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
body.sa .summary div { display: grid; gap: 2px; padding: 10px 8px; border-radius: 8px; background: var(--tint); border: 1px solid var(--line); }
body.sa .summary .n { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; line-height: 1; }
body.sa .summary .l { font-size: 11px; color: var(--muted); letter-spacing: .04em; }
body.sa .summary .wait .n { color: var(--wait); } body.sa .summary .self .n { color: var(--self); } body.sa .summary .consult .n { color: var(--consult); }
body.sa section.sec { display: grid; gap: 10px; }
body.sa section.sec.hidden { display: none; }
body.sa h2 { font-size: 14px; font-weight: 700; letter-spacing: .04em; margin: 0; display: flex; align-items: center; gap: 8px; }
body.sa section.sec h2::before, body.sa .known h2::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: linear-gradient(135deg, var(--brand-o) 0 50%, var(--brand-y) 50% 100%); flex: 0 0 auto; }
body.sa h2 .cnt { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 500; color: var(--muted); }
body.sa h2 .more { margin-left: auto; font-size: 12px; font-weight: 400; color: var(--link); text-decoration: none; }
body.sa .list { display: grid; gap: 8px; }
body.sa .card h3 { font-size: 15px; font-weight: 700; margin: 0; }
body.sa .card .top { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
body.sa .card .top h3 { flex: 1 1 auto; min-width: 0; }
body.sa .card p { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
body.sa .card .row { margin-top: 8px; }
body.sa .pill { font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 500; white-space: nowrap; background: var(--tint); color: var(--muted); }
body.sa .pill.wait { background: var(--wait-soft); color: var(--wait); } body.sa .pill.self { background: var(--self-soft); color: var(--self); } body.sa .pill.late { background: var(--late-soft); color: var(--late); }
body.sa .pill.consult { background: var(--consult-soft); color: var(--consult); } body.sa .pill.done { background: var(--done-soft); color: var(--done); } body.sa .pill.rec { background: var(--brand-y); color: var(--text); }
body.sa .opts { display: grid; gap: 6px; margin-top: 8px; }
body.sa .opt { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--tint); cursor: pointer; text-align: left; font-weight: 400; }
body.sa .opt .k { font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 500; width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 13px; }
body.sa .opt .lb { font-size: 14px; font-weight: 600; } body.sa .opt .ds { font-size: 12px; color: var(--muted); display: block; }
body.sa .opt.on { border-color: var(--wait); background: var(--wait-soft); }
body.sa .prep { border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; display: grid; gap: 4px; font-size: 13px; }
body.sa .prep ul { margin: 0; padding-left: 18px; }
body.sa .readline { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 12px; border-top: 1px solid var(--line); padding-top: 10px; }
body.sa .readline .ok::before { content: "● "; color: var(--done); } body.sa .readline .ng::before { content: "● "; color: var(--line); }
body.sa .tabbar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); z-index: 10; }
body.sa .tabbar a { display: grid; gap: 2px; justify-items: center; font-size: 10px; color: var(--muted); padding: 4px; text-decoration: none; }
body.sa .tabbar a i { width: 22px; height: 22px; border-radius: 6px; border: 2px solid currentColor; display: block; }
body.sa .tabbar a.on { color: var(--text); } body.sa .tabbar a.on i { background: linear-gradient(135deg, var(--brand-o) 0 50%, var(--brand-y) 50% 100%); border-color: transparent; }
body.sa .bubble.me { background: var(--accent); border-color: var(--accent); }
body.sa .bubble.consultant { border-color: var(--consult); background: var(--consult-soft); }
body.sa .ticket-view { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 13px; } body.sa .ticket-view dt { color: var(--muted); } body.sa .ticket-view dd { margin: 0; }
body.sa .say-result { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--tint); display: grid; gap: 8px; font-size: 14px; margin-top: 10px; }
body.sa .say-result .ai { white-space: pre-wrap; }
body.sa .known { display: grid; gap: 16px; }
body.sa .org { display: grid; gap: 6px; }
body.sa .org .node { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--panel); font-size: 13px; flex-wrap: wrap; }
body.sa .org .node .role { color: var(--muted); } body.sa .org .node .act { margin-left: auto; display: flex; gap: 6px; }
body.sa .org .lv2 { margin-left: 18px; } body.sa .org .lv3 { margin-left: 36px; } body.sa .org .node.focus { border-left: 4px solid var(--brand-o); }
body.sa .rule { display: flex; gap: 8px; align-items: start; font-size: 13px; border-bottom: 1px solid var(--line); padding: 6px 0; } body.sa .rule:last-child { border-bottom: 0; }
body.sa .rule .fix { font-size: 11px; color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace; white-space: nowrap; margin-left: auto; }
body.sa .rule .act { margin-left: auto; }
body.sa .conn { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; background: var(--panel); }
body.sa .conn .ic { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 13px; background: var(--accent); }
body.sa .conn .ic.google { background: #4285f4; } body.sa .conn .ic.slack { background: #611f69; } body.sa .conn .ic.zoom { background: #2d8cff; }
body.sa .conn .st { font-size: 12px; color: var(--muted); } body.sa .conn .st.ok::before { content: "● "; color: var(--done); }
body.sa button.ghost { background: transparent; }
body.sa button.consult:not(.chip) { background: var(--consult); border-color: var(--consult); color: #fff; }
body.sa .center { text-align: center; } body.sa .wide { width: 100%; }
body.sa .small-note { font-size: 12px; } body.sa .sr { position: absolute; left: -9999px; }
body.sa .link { background: none; border: 0; color: var(--link); padding: 0; text-decoration: underline; font-size: 13px; }
body.sa input.code { font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .4em; text-align: center; font-size: 22px; }
body.sa ul.consent { margin: 8px 0; padding-left: 20px; font-size: 13px; } body.sa ul.consent li { margin: 4px 0; }
body.sa a.button { display: inline-block; padding: 10px 14px; border-radius: 8px; text-decoration: none; text-align: center; }
body.sa a.button.primary { background: var(--accent); color: #fff; }
body.sa .note .meta { font-size: 12px; color: var(--muted); } body.sa .note.pinned { border-left: 4px solid var(--brand-y); }
body.sa .sugg { background: var(--tint); border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-top: 8px; }
body.sa .between { justify-content: space-between; }
body.sa .login { max-width: 380px; margin: 8vh auto; }
@media (max-width: 420px) { body.sa .summary { grid-template-columns: repeat(2, 1fr); } }

/* 社内デスク（PC） */
body.desk { --brand-o: #f97c0b; --brand-y: #ffe200; }
body.desk .layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { body.desk .layout { grid-template-columns: 1fr; } }
body.desk .side { display: grid; gap: 4px; }
body.desk .side button { display: flex; justify-content: space-between; width: 100%; text-align: left; border-color: transparent; background: transparent; }
body.desk .side button.on { background: var(--panel); border-color: var(--line); }
body.desk .b { font-size: 12px; background: #fff2e4; color: #c25e00; padding: 0 6px; border-radius: 999px; }
body.desk .lane4 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
body.desk .col { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 8px; align-content: start; }
body.desk .col h3 { display: flex; gap: 6px; align-items: center; margin: 0; }
body.desk .col h3::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: linear-gradient(135deg, var(--brand-o) 0 50%, var(--brand-y) 50% 100%); }
body.desk .mini { font-size: 13px; padding: 10px 12px; margin: 0; }
body.desk .mini .t { font-weight: 600; }
body.desk .brand-img { height: 22px; width: auto; vertical-align: middle; }
body.desk .ok { color: var(--ok); } body.desk .ng { color: var(--danger); }