:root{--c:#ffb547;--c2:#ff7a59;--bg:#fff8f1;--ink:#3b2f2a;--sub:#8a7a70;--me:#3b2f2a}
*{box-sizing:border-box}html,body{margin:0;height:100%}
body{font-family:"Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;color:var(--ink);
 background:radial-gradient(1200px 600px at 50% -10%,color-mix(in srgb,var(--c) 28%,#fff) 0,var(--bg) 60%) fixed}
.app{max-width:640px;margin:0 auto;height:100dvh;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:10px;padding:12px 14px;padding-top:max(12px,env(safe-area-inset-top));
 background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border-bottom:1px solid #0000000d;position:sticky;top:0;z-index:2}
.back{font-size:28px;color:var(--sub);text-decoration:none;width:24px}
.av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:24px;flex:none;
 background:linear-gradient(135deg,var(--c),var(--c2));box-shadow:0 3px 10px color-mix(in srgb,var(--c2) 40%,transparent)}
.av.talk{animation:bob .35s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(-3px) rotate(-6deg)}}
.ttl{flex:1;min-width:0;line-height:1.25}.ttl b{display:block;font-size:16px}.ttl small{color:var(--sub);font-size:12px}
.ic{border:0;background:#fff;width:40px;height:40px;border-radius:50%;font-size:18px;cursor:pointer;box-shadow:0 1px 4px #0001}
.ic.off{opacity:.45}.ic.rec{background:var(--c2);animation:pulse 1s infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--c2) 25%,transparent)}}
#log{flex:1;overflow-y:auto;padding:18px 14px 8px;display:flex;flex-direction:column;gap:12px}
.row{display:flex;gap:8px;align-items:flex-end;animation:pop .25s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(6px)}}
.row .av{width:32px;height:32px;font-size:18px}
.msg{max-width:78%;padding:11px 14px;border-radius:18px;font-size:15px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
.bot .msg{background:#fff;border-bottom-left-radius:6px;box-shadow:0 2px 8px #0000000f}
.me{justify-content:flex-end}.me .msg{background:linear-gradient(135deg,var(--c),var(--c2));color:#fff;border-bottom-right-radius:6px}
.say{border:0;background:none;color:var(--sub);font-size:13px;cursor:pointer;padding:0 2px}
.dots span{display:inline-block;width:7px;height:7px;margin:0 2px;border-radius:50%;background:var(--c);animation:d 1s infinite}
.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}
@keyframes d{50%{transform:translateY(-5px);opacity:.5}}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 14px 8px;scrollbar-width:none}
.chips button{flex:none;border:1px solid color-mix(in srgb,var(--c) 50%,#fff);background:#fff;color:var(--ink);
 padding:8px 13px;border-radius:999px;font:inherit;font-size:13px;cursor:pointer}
.bar{display:flex;gap:8px;padding:8px 12px;background:rgba(255,255,255,.85);border-top:1px solid #0000000d}
.bar input{flex:1;min-width:0;border:1px solid #0000001a;border-radius:999px;padding:11px 16px;font:inherit;font-size:16px;outline:none;background:#fff}
.bar input:focus{border-color:var(--c2)}
.send{border:0;width:44px;height:44px;border-radius:50%;color:#fff;font-size:18px;cursor:pointer;background:linear-gradient(135deg,var(--c),var(--c2))}
.send:disabled{opacity:.5}
.foot{margin:0;text-align:center;font-size:11px;color:var(--sub);padding:4px 10px max(8px,env(safe-area-inset-bottom));background:rgba(255,255,255,.85)}
.foot span{margin-left:6px}
@media(min-width:700px){.app{height:calc(100dvh - 48px);margin:24px auto;border-radius:24px;overflow:hidden;background:#fffdfb;box-shadow:0 20px 60px #6b3a1a22}.top{position:static}}
.chips[hidden],[hidden]{display:none!important}.ttl small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.foot a.other{display:inline-block;margin:4px 6px 0;color:var(--c2);font-weight:bold;text-decoration:none}
.picker{display:grid;gap:14px;margin-top:18px}.picker a{display:flex;gap:14px;align-items:center;padding:16px;border-radius:20px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 4px 16px #6b3a1a14}.picker .av{width:54px;height:54px;font-size:30px}.picker small{display:block;color:var(--sub);font-size:12px;margin-top:2px}
.rate{display:flex;gap:6px;margin-top:8px}.rate button{border:1px solid #0000001a;background:#fff;color:var(--sub);border-radius:999px;padding:3px 10px;font:inherit;font-size:12px;cursor:pointer}.rate button.on{background:var(--c2);border-color:var(--c2);color:#fff}.rate button:disabled:not(.on){opacity:.4;cursor:default}
.zab{font-size:13px;font-weight:bold;color:var(--c);background:#fff;border-radius:999px;padding:6px 10px;box-shadow:0 1px 4px #0001;white-space:nowrap}
.zab.pop{animation:zpop .5s}@keyframes zpop{40%{transform:scale(1.3)}}
.odaibar{display:flex;gap:8px;align-items:center;padding:4px 12px 6px;flex-wrap:wrap}
.odaibtn{border:0;border-radius:999px;padding:8px 14px;font:inherit;font-size:13px;font-weight:bold;color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--c),var(--c2))}
.odaibtn:disabled{opacity:.5}.odaitag{font-size:12px;color:var(--c2);background:#fff;border:1px dashed var(--c2);border-radius:999px;padding:5px 10px;cursor:pointer}
.zabdelta{margin-top:8px;font-size:13px;font-weight:bold;color:var(--sub)}.zabdelta.plus{color:#c0392b}.zabdelta.minus{color:#555}

.rate{position:relative}
.sharebtn{margin-left:auto}
.rate .sharebtn{font-size:12px;padding:3px 10px;border-radius:999px;border:1px solid #0002;background:#fff;color:var(--sub);cursor:pointer}
.sharemenu{position:absolute;right:0;bottom:calc(100% + 6px);z-index:20;display:flex;flex-direction:column;background:#fff;border-radius:12px;box-shadow:0 8px 24px #0003;overflow:hidden;min-width:170px}
.sharemenu button{border:0;background:#fff;padding:11px 14px;text-align:left;font-size:14px;cursor:pointer}
.sharemenu button+button{border-top:1px solid #0001}
.sharemenu button:hover{background:#f4f1ec}
.rate .sharemenu button{border:0;border-radius:0;padding:11px 16px;font-size:14px;color:#333;background:#fff}
.rate .sharemenu button+button{border-top:1px solid #0000000f}
.rate .sharemenu button:hover{background:#f4f1ec}