/* 「こう頼むだけ」の操作画面 (AI Desk の小さな窓が、頼む → アプリを使う → 結果 → 確かめて実行 を流す) と、絵のアイコン。demo.js が組み立てる */
.ad { --ad-blue:#2563eb; --ad-blue-2:#1d4ed8; --ad-bg:#f6f7fb; --ad-line:#e3e7ef; margin-top:26px }
.ad-tabs { display:flex; gap:8px; flex-wrap:wrap } .ad-tabs button { font:inherit; font-weight:700; font-size:14px; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer; color:var(--ink) }
.ad-tabs button.on { background:var(--ad-accent, #312e81); border-color:var(--ad-accent, #312e81); color:#fff }
.ad-body { display:grid; grid-template-columns:minmax(260px, 340px) 1fr; gap:22px; margin-top:18px; align-items:start } @media (max-width:900px){ .ad-body { grid-template-columns:1fr } .ad-list { order:2 } }
.ad-list { display:grid; gap:10px }
.ad-item { position:relative; overflow:hidden; text-align:left; font:inherit; background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px 16px; cursor:pointer; display:flex; flex-direction:column; gap:8px; transition:border-color .2s, box-shadow .2s, transform .2s }
.ad-item:hover { transform:translateY(-1px) } .ad-item.on { border-color:var(--ad-accent, #312e81); box-shadow:0 10px 26px rgba(49,46,129,.14) }
.ad-item .q { font-family:"Zen Kaku Gothic New",sans-serif; font-weight:900; font-size:15.5px; line-height:1.5; color:var(--ink) } .ad-item .does { font-size:13px; color:var(--muted) }
.ad-item .apps { display:flex; gap:6px; align-items:center } .ad-item .apps img { width:20px; height:20px; border-radius:6px }
.ad-item .bar { position:absolute; left:0; bottom:0; height:3px; width:0; background:var(--ad-accent, #312e81) } .ad-item.on .bar { animation:adbar var(--ad-dur, 9s) linear forwards } @keyframes adbar { to { width:100% } }
.ad-item.done .bar { width:100%; animation:none } .ad.paused .ad-item.on .bar { animation-play-state:paused }
/* 窓 */
.ad-win { background:#fff; border-radius:16px; box-shadow:0 24px 60px rgba(23,26,51,.18), 0 0 0 1px rgba(23,26,51,.08); overflow:hidden; display:flex; flex-direction:column; height:520px } @media (max-width:640px){ .ad-win { height:480px } }
.ad-title { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid var(--ad-line); font-size:13.5px; font-weight:700; color:#1f2937; background:#fff }
.ad-title img { width:22px; height:22px; border-radius:6px } .ad-title .t { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .ad-title .wb { color:#9ca3af; letter-spacing:6px; font-weight:400 }
.ad-main { flex:1; min-height:0; display:grid; grid-template-columns:52px 1fr } @media (max-width:520px){ .ad-main { grid-template-columns:1fr } .ad-dock { display:none !important } }
.ad-dock { background:linear-gradient(180deg,#1e1b4b,#312e81); display:flex; flex-direction:column; align-items:center; gap:10px; padding:12px 0 }
.ad-dock img { width:30px; height:30px; border-radius:9px; opacity:.55; transition:opacity .25s, transform .25s, box-shadow .25s } .ad-dock img.on { opacity:1; transform:scale(1.12); box-shadow:0 0 0 3px rgba(251,191,36,.9) }
.ad-chat { overflow:hidden; background:var(--ad-bg); padding:16px; display:flex; flex-direction:column; gap:12px; font-size:13.5px; line-height:1.65; color:#1f2937; position:relative }
.ad-chat .scroll { display:flex; flex-direction:column; gap:12px; transition:transform .45s ease }
.ad-user { align-self:flex-end; max-width:86%; background:#e8eefb; border-radius:14px 14px 4px 14px; padding:10px 13px; font-weight:500; min-height:20px }
.ad-user .caret { display:inline-block; width:2px; height:1.1em; background:#1f2937; vertical-align:-2px; margin-left:1px; animation:adblink 1s steps(1) infinite } @keyframes adblink { 50% { opacity:0 } }
.ad-ai { display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:start } .ad-ai .av { width:30px; height:30px; border-radius:8px; background:var(--ad-blue); color:#fff; font-weight:800; font-size:12px; display:grid; place-items:center }
.ad-ai .bd { display:flex; flex-direction:column; gap:9px; min-width:0 }
.ad-dots { display:inline-flex; gap:4px; padding:6px 0 } .ad-dots i { width:7px; height:7px; border-radius:50%; background:#9ca3af; animation:addot 1s infinite } .ad-dots i:nth-child(2) { animation-delay:.15s } .ad-dots i:nth-child(3) { animation-delay:.3s } @keyframes addot { 50% { opacity:.3; transform:translateY(-2px) } }
.ad-tools { display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:12px; color:#6b7280 }
.ad-tool { display:inline-flex; align-items:center; gap:5px; background:#fff; border:1px solid var(--ad-line); border-radius:8px; padding:3px 8px; color:#374151; font-weight:500 }
.ad-tool img { width:15px; height:15px; border-radius:4px } .ad-tool .st { width:12px; height:12px; border-radius:50%; border:2px solid #cbd5e1; border-top-color:var(--ad-blue); animation:adspin .7s linear infinite } .ad-tool.ok .st { border:0; animation:none; background:none; color:#16a34a; width:auto; height:auto } .ad-tool.ok .st::before { content:"✓"; font-weight:900 } @keyframes adspin { to { transform:rotate(360deg) } }
.ad-card { background:#fff; border:1px solid var(--ad-line); border-radius:12px; padding:12px 14px; overflow:hidden }
.ad-card h5 { margin:0 0 8px; font-size:12.5px; color:#1d4ed8; font-family:inherit }
.ad-fade { animation:adfade .45s ease both } @keyframes adfade { from { opacity:0; transform:translateY(6px) } }
.ad-tbl { width:100%; border-collapse:collapse; font-size:12.5px } .ad-tbl th, .ad-tbl td { text-align:left; padding:6px 8px; border-bottom:1px solid #eef1f6; vertical-align:top } .ad-tbl th { color:#6b7280; font-weight:600; background:#f8fafc } .ad-tbl td.n { text-align:right; font-variant-numeric:tabular-nums } .ad-tbl tr.sum td { font-weight:800; border-bottom:0 }
.ad-cite { display:flex; flex-wrap:wrap; gap:6px; font-size:12px } .ad-cite span { background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:8px; padding:2px 8px } .ad-cite b { color:#6b7280; font-weight:600 }
.ad-file { display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--ad-line); border-radius:10px; padding:6px 10px; font-size:12.5px; align-self:flex-end } .ad-file i { width:22px; height:26px; border-radius:4px; background:linear-gradient(135deg,#ef4444,#f97316); position:relative } .ad-file i.au { background:linear-gradient(135deg,#8b5cf6,#6366f1); border-radius:50% ; width:24px; height:24px }
.ad-confirm { border:1.5px solid #bfdbfe; background:#eff6ff; border-radius:12px; padding:12px 14px } .ad-confirm p { margin:0 0 10px; font-weight:700 } .ad-confirm .btns { display:flex; gap:8px }
.ad-confirm .btns span { font-size:12.5px; font-weight:700; border-radius:8px; padding:6px 14px; border:1px solid var(--ad-line); background:#fff } .ad-confirm .btns span.go { background:var(--ad-blue); border-color:var(--ad-blue); color:#fff; transition:transform .15s, background .15s } .ad-confirm .btns span.go.press { transform:scale(.92); background:var(--ad-blue-2) }
.ad-confirm.done { border-color:#bbf7d0; background:#f0fdf4 } .ad-confirm.done p { color:#15803d; margin:0 }
.ad-foot { display:flex; gap:8px; font-size:11.5px; color:#6b7280 } .ad-foot span { background:#fff; border:1px solid var(--ad-line); border-radius:6px; padding:1px 7px }
.ad-input { display:flex; gap:8px; align-items:center; padding:10px 14px; border-top:1px solid var(--ad-line); background:#fff; font-size:13px; color:#9ca3af } .ad-input .box { flex:1; border:1px solid var(--ad-line); border-radius:10px; padding:7px 10px } .ad-input .send { background:var(--ad-blue); color:#fff; font-weight:700; border-radius:8px; padding:6px 14px; font-size:12.5px }
.ad-slots { display:grid; gap:6px; font-size:12px } .ad-slots .row { display:grid; grid-template-columns:62px 1fr; gap:8px; align-items:center } .ad-slots .tl { display:grid; grid-template-columns:repeat(8,1fr); gap:2px; height:22px }
.ad-slots .tl i { border-radius:3px; background:#e5e7eb } .ad-slots .tl i.free { background:#bbf7d0 } .ad-slots .tl i.pick { background:#22c55e; box-shadow:0 0 0 2px #15803d inset } .ad-slots .hours { display:grid; grid-template-columns:62px repeat(8,1fr); gap:2px; color:#9ca3af; font-size:10.5px }
.ad-tasks { display:grid; gap:6px; font-size:12.5px } .ad-tasks div { display:grid; grid-template-columns:16px 1fr auto auto; gap:8px; align-items:center } .ad-tasks i { width:14px; height:14px; border:1.5px solid #9ca3af; border-radius:4px } .ad-tasks small { color:#6b7280 } .ad-tasks em { font-style:normal; font-size:11px; background:#eef2ff; color:#4338ca; border-radius:6px; padding:1px 6px }
.ad-receipts { display:flex; gap:8px; margin-bottom:8px } .ad-receipts i { width:46px; height:62px; border-radius:4px; background:repeating-linear-gradient(180deg,#fff 0 6px,#f1f5f9 6px 8px); border:1px solid #e5e7eb; box-shadow:0 2px 6px rgba(0,0,0,.08); transform:rotate(-3deg) } .ad-receipts i:nth-child(2) { transform:rotate(2deg) } .ad-receipts i:nth-child(3) { transform:rotate(-1deg) }
.ad-two { display:grid; grid-template-columns:1fr 1fr; gap:10px; font-size:12.5px } .ad-two div { background:#f8fafc; border-radius:8px; padding:8px 10px } .ad-two b { display:block; font-size:11px; color:#6b7280; margin-bottom:2px }
.ad-imgs { display:grid; grid-template-columns:repeat(3,1fr); gap:8px } .ad-imgs div { aspect-ratio:4/3; border-radius:10px; display:flex; flex-direction:column; justify-content:flex-end; padding:8px; color:#fff; font-weight:900; font-size:12px; line-height:1.3; text-shadow:0 1px 3px rgba(0,0,0,.35); overflow:hidden; position:relative }
.ad-imgs div::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.45), transparent 40%) } .ad-imgs small { font-size:10px; font-weight:700; opacity:.9 }
.ad-imgs .i1 { background:linear-gradient(135deg,#0ea5e9,#6366f1) } .ad-imgs .i2 { background:linear-gradient(135deg,#f97316,#ec4899) } .ad-imgs .i3 { background:linear-gradient(135deg,#10b981,#0f766e) }
.ad-sec { font-size:12.5px } .ad-sec b { display:block; color:#1d4ed8; font-size:12px; margin:4px 0 2px } .ad-sec ul { margin:0; padding-left:1.1em } .ad-sec li { margin:1px 0 }
.ad-note { font-size:12px; color:var(--muted); margin-top:10px }
@media (prefers-reduced-motion: reduce) { .ad-item.on .bar { animation:none; width:100% } .ad-fade { animation:none } }
/* 絵のアイコン (demo.js が data-ic に入れる) */
.ic { display:grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--ic-bg, #eef2ff); color:var(--ic-fg, #4338ca); margin-bottom:12px; flex:none }
.ic svg { width:26px; height:26px } .ic.sm { width:36px; height:36px; border-radius:11px; margin-bottom:8px } .ic.sm svg { width:20px; height:20px }
.ic.teal { --ic-bg:#ccfbf1; --ic-fg:#0f766e } .ic.rose { --ic-bg:#ffe4e6; --ic-fg:#be123c } .ic.amber { --ic-bg:#fef3c7; --ic-fg:#b45309 } .ic.sky { --ic-bg:#e0f2fe; --ic-fg:#0369a1 } .ic.violet { --ic-bg:#ede9fe; --ic-fg:#6d28d9 } .ic.green { --ic-bg:#dcfce7; --ic-fg:#15803d }
.mark { display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:13px; font-weight:900; margin-right:6px; vertical-align:-5px } .mark.y { background:#ccfbf1; color:#0f766e } .mark.p { background:#fef3c7; color:#b45309 } .mark.n { background:#f1f5f9; color:#94a3b8 }