/* MAGI Chat Widget v0_2_4 — host page appearance is untouched. */
.magi, .magi *, .magi *::before, .magi *::after { box-sizing:border-box; }
.magi button, .magi textarea, .magi select { font:inherit; }
.magi button, .magi summary { -webkit-tap-highlight-color:transparent; }
.magi button { cursor:pointer; }
.magi button:focus-visible, .magi summary:focus-visible, .magi select:focus-visible { outline:3px solid #638da1; outline-offset:4px; }
.magi [hidden] { display:none !important; }
/* Widget boundaries: all component selectors are inside the magi namespace. */
.magi { --magi-bottom:clamp(90px,18dvh,160px); --ink:#283842; --muted:#6a7b86; --line:#e1e6e8; --accent:#334e5d; font-family: "Yu Gothic UI", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo,sans-serif; color:var(--ink); font-size:19.2px; line-height:1.65; }
.magi button { color:inherit; }
.magi-launch-area { position:fixed; right:max(25px,env(safe-area-inset-right)); bottom:max(var(--magi-bottom),env(safe-area-inset-bottom)); width:76px; display:flex; flex-direction:column; align-items:center; z-index:1001; }
.magi-launch-area { animation:robot-stroll 18s linear infinite; }
.robot-foot-left { animation:robot-step-left 18s linear infinite; }
.robot-foot-right { animation:robot-step-right 18s linear infinite; }
.magi-launch-area:hover, .magi-launch-area:focus-within,
.magi-launch-area:hover .robot-foot-left, .magi-launch-area:hover .robot-foot-right,
.magi-launch-area:focus-within .robot-foot-left, .magi-launch-area:focus-within .robot-foot-right { animation-play-state:paused; }
@keyframes robot-stroll {
  0%,12%,100% {transform:translateX(0)}
  27%,44% {transform:translateX(-24px)}
  59%,76% {transform:translateX(-8px)}
  88% {transform:translateX(-30px)}
}
@keyframes robot-step-left {
  0%,12%,27%,44%,59%,76%,88%,100% {transform:translate(0,0)}
  14%,18%,22%,25%,46%,50%,54%,57%,78%,82%,86%,90%,94%,98% {transform:translate(-1px,-2px)}
  16%,20%,24%,48%,52%,56%,80%,84%,92%,96% {transform:translate(1px,0)}
}
@keyframes robot-step-right {
  0%,12%,27%,44%,59%,76%,88%,100% {transform:translate(0,0)}
  14%,18%,22%,25%,46%,50%,54%,57%,78%,82%,86%,90%,94%,98% {transform:translate(1px,0)}
  16%,20%,24%,48%,52%,56%,80%,84%,92%,96% {transform:translate(-1px,-2px)}
}
.magi-launcher { width:76px; height:78px; display:grid; place-items:center; border:0; border-radius:22px; background:transparent; padding:4px 10px; transition:background .18s; }
.magi-launcher:hover { background:#dce3e777; }
.magi-launcher:active .magi-robot { transform:translateY(-3px); }
.magi-robot { display:block; width:56px; height:64px; overflow:visible; }
.magi-invite { position:absolute; right:6px; bottom:91px; padding:12px 16px; min-width:180px; white-space:pre-line; border:1px solid #d9e1e5; border-radius:14px 14px 3px 14px; background:#fff; font-size:16.8px; line-height:1.7; box-shadow:0 5px 22px #20364109; animation:magi-appear .24s ease-out both; }
.magi-sound { position:absolute; right:69px; top:4px; font:14.4px/1.2 ui-monospace,monospace; color:#71828d; opacity:0; pointer-events:none; white-space:nowrap; }
.magi-sound.show { animation:magi-sound .8s ease-out; }
.robot-whole, .robot-head { transform-box:fill-box; transform-origin:50% 80%; }
.robot-antenna { transform-box:fill-box; transform-origin:50% 100%; }
.robot-eye-left, .robot-eye-right { transform-box:fill-box; transform-origin:center; }
/* Small, slow body movement keeps the quiet robot visibly alive. */
.robot-whole { animation:robot-wander 9.4s ease-in-out infinite; }
.robot-arms { transform-box:fill-box;transform-origin:50% 10%;animation:robot-arms-sway 7.6s ease-in-out infinite; }
@keyframes robot-wander {
  0%,10%,100% { transform:translate(0,0) rotate(0); }
  25% { transform:translate(-4px,-1px) rotate(-2deg); }
  39% { transform:translate(-2px,1px) rotate(1deg); }
  52%,58% { transform:translate(0,0) rotate(0); }
  74% { transform:translate(3.5px,-1px) rotate(2deg); }
  88% { transform:translate(1px,1px) rotate(-1deg); }
}
@keyframes robot-arms-sway { 0%,20%,52%,100% {transform:rotate(0)} 35% {transform:rotate(3deg)} 76% {transform:rotate(-3deg)} }
.robot-mouth-gap { transform-box:fill-box;transform-origin:50% 0; }
.magi-robot.speaking .robot-jaw, .magi-header-robot.speaking .robot-jaw { animation:robot-jaw-talk .52s steps(2,end) infinite; }
.magi-robot.speaking .robot-mouth-gap, .magi-header-robot.speaking .robot-mouth-gap { animation:robot-mouth-open .52s steps(2,end) infinite; }
@keyframes robot-jaw-talk { 0%,100% {transform:translateY(0)} 40%,65% {transform:translateY(3px)} }
@keyframes robot-mouth-open { 0%,100% {transform:scaleY(1)} 40%,65% {transform:scaleY(1.6)} }
.magi-robot.nudge .robot-head { animation:robot-nudge .46s steps(2,end); }
.magi-robot.blink .robot-eye-left { animation:robot-blink .18s steps(1,end); }
.magi-robot.blink .robot-eye-right { animation:robot-blink .18s .055s steps(1,end); }
.magi-robot.antenna .robot-antenna { animation:robot-antenna .55s ease-in-out; }
.magi-robot.tilt .robot-head { animation:robot-tilt 1.8s ease-in-out; }
.magi-robot.jump .robot-whole { animation:robot-jump .34s ease-out; }
.magi-robot.jump .robot-lamp { fill:#e7b25b; }
@keyframes robot-nudge { 0%,100% {transform:translate(0,0)} 25% {transform:translate(1.5px,1px)} 65% {transform:translate(-1px,0)} }
@keyframes robot-blink { 30%,65% { transform:scaleY(.07); } }
@keyframes robot-antenna { 20%,60% {transform:rotate(12deg)} 40%,80% {transform:rotate(-9deg)} }
@keyframes robot-tilt { 25%,65% {transform:rotate(-7deg)} }
@keyframes robot-jump { 40% {transform:translateY(-6px) rotate(-3deg)} 75% {transform:translateY(1px)} }
@keyframes magi-sound { 12%,60% {opacity:1;transform:translateY(-3px)} 100% {opacity:0;transform:translateY(-8px)} }
@keyframes magi-appear { from {opacity:0;transform:translateY(7px)} to {opacity:1;transform:none} }
.magi-panel { position:fixed; z-index:1002; bottom:calc(var(--magi-bottom) + 92px); right:clamp(16px,3vw,30px); width:min(400px,calc(100vw - 32px)); height:min(620px,calc(100dvh - var(--magi-bottom) - 116px)); max-height:760px; min-height:0; display:flex; flex-direction:column; background:#fff; border:1px solid #d4dce1; border-radius:20px; box-shadow:0 24px 80px #23333f21,0 4px 16px #23333f0a; overflow:hidden; transform-origin:calc(100% - 38px) 100%; }
.magi-panel.opening { animation:panel-in .28s cubic-bezier(.2,.9,.3,1.08) both; }
@keyframes panel-in { from {opacity:0;transform:translateY(15px) scale(.94)} to {opacity:1;transform:none} }
.magi-header { flex:none; padding:18px 16px 17px 20px; display:flex; align-items:center; justify-content:space-between; gap:8px; border-bottom:1px solid var(--line); background:#fff; }
.magi-title-group { display:flex; flex:1; gap:12px; align-items:center; min-width:0; }
.magi-header-robot { display:block;flex:none;width:52px;height:64px;overflow:visible; }
.magi-greeting { position:relative;margin:0;padding:9px 12px;min-width:0;border:1px solid #dce3e7;border-radius:12px;background:#fafbfb;font-size:15.6px;font-weight:400;line-height:1.65;white-space:pre-line;overflow-wrap:anywhere; }
.magi-greeting::before { content:"";position:absolute;left:-5px;top:17px;width:8px;height:8px;border-left:1px solid #dce3e7;border-bottom:1px solid #dce3e7;background:#fafbfb;transform:rotate(45deg); }
.magi-header h2 { margin:0;font-size:20.4px;font-weight:750;letter-spacing:.025em;line-height:1.4; }
.magi-subtitle { display:block;font-size:12px;color:var(--muted);line-height:1.7; margin-top:2px; }
 .magi-trial { position:fixed;top:max(16px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));z-index:1000;font-size:12px;color:#9aa4aa;letter-spacing:.08em;line-height:1.5;pointer-events:none;border:1px solid #d9dee1;border-radius:0;padding:4px 8px; }
.magi-minimize { background:transparent;border:0;width:44px;height:44px;border-radius:9px;font-size:30px;line-height:1;flex:none; }
.magi-minimize:hover { background:#edf1f3; }
.magi-site-bar { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 15px 8px 20px; border-bottom:1px solid var(--line); font-size:14.4px;flex:none;background:#fafbfb; }
.magi-site-bar > span { overflow-wrap:anywhere; }
.magi-switch { min-height:36px;flex:none;border:0;background:transparent;font-size:14.4px;color:#576c79 !important;text-decoration:underline;text-underline-offset:3px; }
.magi-scroll { flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#c9d2d7 transparent; }
.magi-picker { padding:28px 24px 24px; }
.magi-growing { width:fit-content;margin:26px auto 0;padding:7px 18px;border:1px solid #e2e6e8;border-radius:0;color:#aeb7bd;font-size:13.2px;line-height:1.6;letter-spacing:.12em; }
.magi-sites { display:grid;gap:9px; }
.magi-sites button { display:flex;align-items:center;gap:12px;text-align:left;min-height:55px;width:100%;padding:12px 14px;border:1px solid #dce3e7;background:#fff;border-radius:10px;font-size:16.8px;transition:background .15s,border-color .15s,transform .15s; }
.magi-sites button:hover { border-color:#7792a0;background:#f4f7f8;transform:translateX(2px); }
.magi-site-number { font:13.2px/1.5 ui-monospace,Consolas,monospace;color:#8d9ca4; }
.magi-site-arrow { margin-left:auto;font-size:19.2px;color:#8c9ba3; }
.magi-messages { padding:24px 20px 16px; }
.magi-message { margin:0 0 23px; animation:magi-appear .18s ease-out; }
.magi-message.user { display:flex;justify-content:flex-end; }
.magi-bubble { font-size:18px;line-height:1.85;white-space:pre-wrap;overflow-wrap:anywhere; }
.magi-message.bot .magi-bubble { padding:0 5px 0 1px; }
.magi-message.user .magi-bubble { max-width:91%;border-radius:15px 15px 3px 15px;background:#edf2f4;padding:11px 15px; }
.magi-message-label { font:12px/1.4 ui-monospace,Consolas,monospace;letter-spacing:.06em;color:#87959e;margin-bottom:6px; }
.magi-pending { display:flex;align-items:center;gap:8px;font-size:14.4px;color:#75848d;padding:4px 0 10px; }
.magi-wait-dot { width:5px;height:5px;border-radius:50%;background:#7c909b;animation:magi-wait 1.5s ease-in-out infinite; }
@keyframes magi-wait { 50% {opacity:.25} }
.magi-rating { display:flex;align-items:center;gap:3px;margin-top:8px;flex-wrap:wrap; }
.magi-rating-label { font-size:13.2px;color:#81909a;margin-right:6px; }
.magi-rating button { display:grid;place-items:center;min-width:36px;min-height:36px;border:0;border-radius:7px;background:transparent;font-size:18px;color:#7b8b95; }
.magi-rating button:hover { background:#f0f4f5; }
.magi-rating button[aria-pressed="true"] { background:#e8eff2;color:#2b566c; }
.magi-rating svg { width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; }
.magi-reasons { display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 0; }
.magi-reasons button { min-height:35px;padding:6px 9px;border:1px solid #dbe3e7;background:white;border-radius:7px;font-size:13.2px; }
.magi-reasons button[aria-pressed="true"] { border-color:#6c8998;background:#eef3f6; }
.magi-composer { flex:none;margin:0;padding:12px 15px 8px;border-top:1px solid var(--line);background:#fff; }
.magi-input-row { display:flex;gap:8px;align-items:flex-end;border:1px solid #c7d1d7;border-radius:12px;padding:6px;box-shadow:0 1px 4px #233b4a05; }
.magi-input-row:focus-within { border-color:#6c8b9c;box-shadow:0 0 0 2px #779aab18; }
.magi textarea { resize:none;display:block;width:100%;flex:1;min-width:0;min-height:40px;max-height:112px;padding:9px 6px;border:0;outline:0;background:transparent;font-size:19.2px;line-height:1.4;color:var(--ink); }
.magi textarea::placeholder { color:#8a969e;font-size:16.8px; }
.magi-send { min-width:54px;min-height:40px;padding:8px;border:0;border-radius:8px;background:var(--accent);color:white !important;font-size:15.6px; }
.magi-send:disabled { background:#e7edef;color:#99a5ad !important;cursor:default; }
.magi-usage { display:flex;justify-content:space-between;gap:12px;flex:none;padding:8px 20px 12px;color:#a1abb1;font-size:12px;line-height:1.5;font-variant-numeric:tabular-nums; }
#magi-usage-state:empty { display:none; }
.magi-usage { flex-wrap:wrap;gap:4px 12px; }
.magi-send { min-width:76px;white-space:nowrap; }
.magi-usage-period { margin-left:4px;color:#b0b8bd;font-size:10.8px; }
.magi-retry:disabled { opacity:.5;cursor:default; }
.magi-input-foot { font-size:10.8px;text-align:center;margin-top:7px;color:#8a969d; }
.magi-error[data-kind="wait"] { background:#f5f7f8;color:#81909a; }
.magi-error { flex:none;padding:10px 16px;background:#faf3ed;color:#755841;font-size:14.4px; }
.magi-retry { display:block;min-height:38px;padding:5px 0;border:0;text-decoration:underline;background:transparent;font-size:14.4px;font-weight:650; }
.magi .sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
@media(max-width:600px) and (pointer:coarse) and (hover:none) {
 .magi { --magi-bottom:max(18px,env(safe-area-inset-bottom)); }
 .magi-launch-area { right:max(15px,env(safe-area-inset-right));bottom:calc(var(--magi-v-bottom,0px) + var(--magi-bottom)); }
 .magi-launch-area { width:132px; }
 .magi-launcher { width:132px;height:144px;padding:8px 10px; }
 .magi-robot { width:112px;height:128px; }
 .magi-invite { bottom:155px; }
 .magi-sound { right:122px;top:10px; }
 .magi-panel { right:max(12px,env(safe-area-inset-right));left:auto;top:auto;bottom:calc(var(--magi-v-bottom,0px) + var(--magi-bottom) + 156px);width:min(400px,calc(100vw - 24px));height:min(620px,calc(var(--magi-v-height,100dvh) - var(--magi-bottom) - 172px));max-height:620px;min-height:0;transform-origin:calc(100% - 76px) 100%; }
 .magi-header { padding:13px 15px 13px 20px; }
 .magi-subtitle { font-size:12px; }
 .magi-picker { padding:30px 25px; }
 .magi-sites { gap:11px; }
 .magi-sites button { min-height:61px;font-size:18px; }
 .magi-messages { padding:25px 20px 10px; }
 .magi-composer { padding:10px 12px 8px; }
 .magi-typing .magi-panel { overflow-y:auto; }
 .magi-typing .magi-header { padding:6px 12px; }
 .magi-typing .magi-site-bar { padding:2px 12px; }
 .magi-typing .magi-composer { padding:6px 10px; }
 .magi-typing .magi-usage { padding:4px 12px 6px; }
 .magi-typing .magi-scroll { flex:1 0 56px; }
.magi-input-foot { font-size:10.8px; }
}
@media(max-height:650px) and (min-width:601px) { .magi-picker { padding-top:18px; } .magi-sites button { min-height:45px; } }
@media(prefers-reduced-motion:reduce) { .magi *, .magi *::before, .magi *::after { animation:none !important;transition:none !important;scroll-behavior:auto !important; } }