/* SPDX-License-Identifier: LicenseRef-genai-craft-proprietary — Copyright (c) 2026 genai-craft (生成AI工房). Kotohako OS — ブラウザで触るデモ (try) */
:root { --bar:#14122e; --ink:#171a33; --ink2:#3b3f5c; --muted:#616a7d; --line:#e6e0d3; --paper:#f6f4ef; --accent:#4f46e5; --cta:#f43f5e; --ok:#15803d; --ng:#b91c1c }
* { box-sizing:border-box }
html, body { margin:0; height:100%; overflow:hidden; background:var(--paper); color:var(--ink); font-family:"Noto Sans JP","Hiragino Sans",system-ui,sans-serif; font-size:14px }
button { font:inherit; cursor:pointer }
#top { height:48px; display:flex; align-items:center; gap:10px; padding:0 12px; background:var(--bar); color:#fff }
#top .brand { display:flex; align-items:center; gap:8px; font-weight:900; font-size:15px; white-space:nowrap } #top .brand img { width:26px; height:26px; border-radius:7px } #top .brand small { font-weight:700; opacity:.75; font-size:12px }
#top .note { font-size:12px; background:rgba(251,191,36,.16); color:#fde68a; border:1px solid rgba(251,191,36,.35); border-radius:999px; padding:3px 10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0 }
#top .pill { font-size:12px; border:1px solid rgba(255,255,255,.28); border-radius:999px; padding:3px 10px; white-space:nowrap; color:#fff; background:transparent }
#top .pill.ok::before { content:"● "; color:#34d399 } #top .pill.busy::before { content:"● "; color:#fbbf24 } #top .pill.off::before { content:"● "; color:#9ca3af }
#top .btn.on { background:#fff; color:var(--bar) }
#top .cta { margin-left:auto; background:var(--cta); color:#fff; text-decoration:none; font-weight:700; border-radius:999px; padding:7px 14px; white-space:nowrap; font-size:13px }
#main { position:absolute; top:48px; left:0; right:0; bottom:0; display:flex }
#dock { width:76px; background:#1e1b4b; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0; overflow-y:auto; flex:none }
#dock .sep { width:44px; height:1px; background:rgba(255,255,255,.15); margin:6px 0 }
#dock button { width:66px; border:0; background:transparent; color:#fff; border-radius:12px; padding:6px 2px; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10.5px; line-height:1.2 }
#dock button img { width:36px; height:36px; border-radius:9px } #dock button:hover { background:rgba(255,255,255,.08) } #dock button.on { background:rgba(255,255,255,.16) }
#work { flex:1; display:flex; flex-direction:column; min-width:0 }
#tabs { display:flex; gap:4px; padding:6px 8px 0; background:#e9e5dc; min-height:36px; overflow-x:auto; flex:none }
#tabs .tab { display:flex; align-items:center; gap:6px; border:1px solid var(--line); border-bottom:0; background:#f3f0e8; border-radius:10px 10px 0 0; padding:5px 8px 5px 10px; white-space:nowrap; font-size:13px }
#tabs .tab img { width:18px; height:18px; border-radius:5px } #tabs .tab.on { background:#fff; font-weight:700 } #tabs .tab .x { border:0; background:transparent; font-size:15px; line-height:1; padding:0 2px; color:var(--muted) }
#tabs .tab.home { padding-right:10px }
#panes { flex:1; position:relative; background:#fff }
.pane { position:absolute; inset:0; display:none } .pane.on { display:block } .pane iframe { width:100%; height:100%; border:0; display:block; background:#fff }
.pane .wait { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; color:var(--muted); background:#fff }
#home { overflow-y:auto; background:linear-gradient(180deg,#f8f6f1,#fff) }
.hello { max-width:880px; margin:0 auto; padding:34px 24px 40px }
.hello h1 { font-size:26px; margin:0 0 8px; font-weight:900 } .hello p { color:var(--ink2); line-height:1.8; margin:0 }
.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px; margin:22px 0 }
.cards button { text-align:left; border:1px solid var(--line); background:#fff; border-radius:14px; padding:12px; display:grid; grid-template-columns:40px 1fr; gap:10px; align-items:start }
.cards button:hover { border-color:var(--accent) } .cards img { width:40px; height:40px; border-radius:10px } .cards b { display:block; font-size:14px } .cards small { color:var(--muted); font-size:12px; line-height:1.5; display:block }
.facts { margin:0; padding:14px 18px 14px 34px; background:#fff; border:1px solid var(--line); border-radius:14px; color:var(--ink2); line-height:1.9 }
#desk { width:390px; flex:none; border-left:1px solid var(--line); background:#fff; display:none; flex-direction:column; min-height:0 }
#desk.on { display:flex }
#desk .dh { display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line) } #desk .dh img { width:24px; height:24px } #desk .dh .dst { color:var(--muted); font-size:12px } #desk .dh .dx { margin-left:auto; border:0; background:transparent; font-size:20px; line-height:1; color:var(--muted) }
#desk .msgs { flex:1; overflow-y:auto; padding:12px; display:flex; flex-direction:column; gap:10px; background:#fafaf7 }
#desk .m { max-width:100%; line-height:1.7; font-size:13.5px } #desk .m p { margin:0 0 6px } #desk .m p:last-child { margin-bottom:0 }
#desk .m.user { align-self:flex-end; background:var(--accent); color:#fff; border-radius:14px 14px 4px 14px; padding:8px 12px; max-width:88% }
#desk .m.ai { background:#fff; border:1px solid var(--line); border-radius:4px 14px 14px 14px; padding:10px 12px }
#desk .m.ai.note { background:#fffbeb; border-color:#fde68a } #desk .m table { border-collapse:collapse; font-size:12.5px; margin:6px 0 } #desk .m th, #desk .m td { border:1px solid var(--line); padding:3px 6px; text-align:left } #desk .m th { background:#f8fafc }
#desk .m ul, #desk .m ol { margin:4px 0 6px; padding-left:20px } #desk .m img.gen { width:100%; border-radius:10px; margin-top:8px; display:block }
#desk .steps { display:flex; flex-wrap:wrap; gap:4px } #desk .steps span { font-size:11.5px; border-radius:999px; padding:2px 8px; background:#ecfdf5; color:var(--ok) } #desk .steps span.ng { background:#fef2f2; color:var(--ng) }
#desk .m.card { background:#fff; border:2px solid var(--accent); border-radius:14px; padding:10px 12px } #desk .card .ct { font-weight:700 } #desk .card .op { border-top:1px dashed var(--line); padding-top:8px; margin-top:8px } #desk .card .oh { display:flex; align-items:center; gap:6px } #desk .card .oh img { width:18px; height:18px; border-radius:5px }
#desk .card .f { display:grid; grid-template-columns:96px 1fr; gap:6px; font-size:12.5px; padding:2px 0 } #desk .card .f span { color:var(--muted) } #desk .card .f b { font-weight:500; word-break:break-word }
#desk .card .cb { display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap } #desk .card .cb button { border-radius:999px; padding:6px 14px; border:1px solid var(--line); background:#fff } #desk .card .cb .go { background:var(--accent); color:#fff; border-color:var(--accent); font-weight:700 } #desk .card .ok { color:var(--ok); font-weight:700 } #desk .card .ng { color:var(--ng) }
#desk .chips { display:flex; flex-wrap:wrap; gap:6px; padding:8px 12px; border-top:1px solid var(--line) } #desk .chips button { border:1px solid var(--line); background:#f8fafc; border-radius:999px; padding:4px 10px; font-size:12px; text-align:left }
#desk .din { display:flex; gap:6px; padding:8px 12px 4px } #desk textarea { flex:1; resize:none; border:1px solid var(--line); border-radius:10px; padding:8px; font:inherit } #desk .din button { border:0; background:var(--accent); color:#fff; border-radius:10px; padding:0 14px; font-weight:700; min-width:76px } #desk .din button:disabled { background:#a5b4fc }
.fine { color:var(--muted); font-size:11.5px; margin:0; padding:0 12px 8px }
.m .fine { padding:4px 0 0 }
.dots::after { content:"…"; animation:dots 1.2s steps(3,end) infinite } @keyframes dots { 0% { content:"" } 33% { content:"." } 66% { content:".." } 100% { content:"…" } }
#boot { position:fixed; inset:0; background:rgba(20,18,46,.92); display:flex; align-items:center; justify-content:center; z-index:50; color:#fff; text-align:center }
#boot.hide { display:none } #boot img { width:72px; height:72px; border-radius:18px } #boot p { margin:12px 0 0; font-size:15px } #boot .fine { color:rgba(255,255,255,.7); padding:0; margin-top:8px }
#boot.block p#bootmsg { font-size:16px; line-height:1.8; max-width:520px }
#toasts { position:fixed; right:16px; bottom:16px; display:flex; flex-direction:column; gap:8px; z-index:60 } #toasts div { background:#1e1b4b; color:#fff; border-radius:12px; padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:360px; font-size:13px; line-height:1.6 }
@media (max-width:900px) {
  #top .note, #top .brand small, #top #aistate { display:none } #top { gap:6px; padding:0 8px } #top .cta { padding:6px 10px; font-size:12px } #dock { width:60px } #dock button { width:54px; font-size:9.5px } #dock button img { width:30px; height:30px }
  #desk { position:absolute; inset:0; width:auto; z-index:20 }
}