/* MAGI Chat Widget v0_2_30 — phone typing layout and one-tap send; 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; }


@keyframes robot-stroll { 0%,12%,100% {transform:translateX(0)} 27%,44% {transform:translateX(-24px)} 59%,76% {transform:translateX(-8px)} 88% {transform:translateX(-30px)} }
.magi-launcher { width:84px; height:88px; display:grid; place-items:center; border:0; border-radius:22px; background:transparent; padding:0; transition:background .18s; }
.magi-launcher:hover { background:#dce3e777; }
.magi-launch-area:not(.walking) .magi-launcher { transform-origin:50% 82%; animation:magi-paper-idle-sway 10s ease-in-out infinite; }
.magi-launcher:active .magi-robot { transform:translateY(-3px); }
.magi-robot { display:block; width:68px; height:82px; overflow:visible; }
.magi-invite { position:absolute;right:5px;bottom:88px;padding:7px 12px;width:max-content;white-space:nowrap;border:1px solid #d3dce2;border-radius:13px;background:#fff;color:#657784;font-size:14.4px;font-weight:400;letter-spacing:.06em;line-height:1.5;box-shadow:0 4px 15px #2036410b;pointer-events:none;animation:magi-appear .2s ease-out both; }
.magi-invite::after { content:"";position:absolute;right:16px;bottom:-5px;width:8px;height:8px;border-right:1px solid #d3dce2;border-bottom:1px solid #d3dce2;background:#fff;transform:rotate(45deg); }
.magi-invite[data-position="side"] { right:75px;bottom:32px; }
.magi-invite[data-position="side"]::after { right:-5px;bottom:11px;transform:rotate(-45deg); }
.magi-invite[data-position="diagonal"] { right:49px;bottom:83px; }
.magi-invite[data-position="diagonal"]::after { right:9px; }
/* Approved illustration split into independently clipped raster parts. */
.magi-raster .magi-antenna { animation:magi-paper-antenna 5.8s ease-in-out infinite; }
.magi-robot .magi-arm-left { animation:magi-paper-arm 6.2s ease-in-out infinite; }
.magi-robot .magi-arm-right { animation:magi-paper-arm 6.2s -3.1s ease-in-out infinite; }
.magi-header-robot .magi-face-layer { display:none; }
.magi-header-robot[data-expression="welcome"] [data-face="welcome"],
.magi-header-robot[data-expression="dazed"] [data-face="dazed"],
.magi-header-robot[data-expression="puzzled"] [data-face="puzzled"],
.magi-header-robot[data-expression="thinking"] [data-face="puzzled"],
.magi-header-robot[data-expression="surprised"] [data-face="surprised"] { display:inline; }
.magi-raster .magi-eye-left { animation:magi-paper-blink 12s infinite; }
.magi-raster .magi-eye-right { animation:magi-paper-blink 12s .065s infinite; }
.magi-header-robot.speaking .magi-jaw { animation:magi-paper-talk .46s steps(2,end) infinite; }
.magi-robot.jump .magi-jaw { animation:magi-paper-talk .46s steps(2,end) 3; }
.magi-launch-area.walking { animation:magi-paper-travel 2.8s ease-in-out; }
.magi-launch-area.walking .magi-leg-left { animation:magi-paper-step .56s steps(2,end) infinite; }
.magi-launch-area.walking .magi-leg-right { animation:magi-paper-step .56s -.28s steps(2,end) infinite; }
.magi-launch-area.walking .magi-arm-left { animation:magi-paper-swing .56s steps(2,end) infinite; }
.magi-launch-area.walking .magi-arm-right { animation:magi-paper-swing .56s -.28s steps(2,end) infinite; }
.magi-launch-area.walking .magi-body-bob { animation:magi-paper-bob .56s steps(2,end) infinite; }
.magi-robot.nudge .magi-arm-left,.magi-robot.nudge .magi-arm-right { animation:magi-paper-rattle .18s steps(2,end) 4; }
.magi-robot.nudge .magi-leg-left { animation:magi-paper-rattle .18s .045s steps(2,end) 4; }
.magi-robot.nudge .magi-antenna { animation:magi-paper-ping .6s steps(2,end); }
.magi-robot.antenna .magi-antenna { animation:magi-paper-ping .7s steps(2,end); }
.magi-robot.tilt .magi-arm-left { animation:magi-paper-wave 1.8s ease-in-out; }
.magi-robot.jump .magi-arm-right { animation:magi-paper-wave 1.8s ease-in-out; }
.magi-robot.jump .magi-arm-left { animation:magi-paper-rattle .22s steps(2,end) 4; }
.magi-robot.jump .magi-body-bob { animation:magi-paper-jump .6s ease-in-out; }
.magi-paused *, .magi-paused *::before, .magi-paused *::after { animation-play-state:paused !important; }
@keyframes magi-paper-idle-sway { 0%,15%,38%,58%,78%,100% {transform:translateY(0) rotate(0)} 22% {transform:translateY(2px) rotate(-1.8deg)} 28% {transform:translateY(0) rotate(.4deg)} 47% {transform:translateY(1px) rotate(1.5deg)} 52% {transform:translateY(0) rotate(-.4deg)} 86% {transform:translateY(2px) rotate(0)} }
@keyframes magi-paper-antenna { 0%,65%,100% {transform:rotate(0)} 73% {transform:rotate(3deg)} 79% {transform:rotate(-2.5deg)} 85% {transform:rotate(1.5deg)} }
@keyframes magi-paper-arm { 0%,60%,100% {transform:rotate(0)} 70% {transform:rotate(2deg)} 80% {transform:rotate(-1.5deg)} }
@keyframes magi-paper-blink { 0%,41%,43.1%,100% {transform:scaleY(1)} 41.8%,42.3% {transform:scaleY(.07)} }
@keyframes magi-paper-talk { 0%,100% {transform:translateY(0)} 35% {transform:translateY(22px)} 70% {transform:translateY(9px)} }
@keyframes magi-paper-question { 0%,100% {transform:translateY(0)} 50% {transform:translateY(-14px)} }
@keyframes magi-paper-dot { 0%,70%,100% {opacity:.25} 35% {opacity:1} }
@keyframes magi-paper-travel { 0%,100% {transform:translateX(0)} 50% {transform:translateX(-20px)} }
@keyframes magi-paper-step { 0%,100% {transform:rotate(-3deg) translateY(0)} 50% {transform:rotate(3deg) translateY(-12px)} }
@keyframes magi-paper-swing { 0%,100% {transform:rotate(-3deg)} 50% {transform:rotate(3deg)} }
@keyframes magi-paper-bob { 0%,50%,100% {transform:translateY(0)} 25%,75% {transform:translateY(-5px)} }
@keyframes magi-paper-rattle { 0%,100% {transform:rotate(-1.5deg)} 50% {transform:rotate(2deg)} }
@keyframes magi-paper-ping { 0%,100% {transform:rotate(0)} 20%,60% {transform:rotate(5deg)} 40%,80% {transform:rotate(-4deg)} }
@keyframes magi-paper-wave { 0%,100% {transform:rotate(0)} 25%,65% {transform:rotate(-6deg)} 45%,80% {transform:rotate(-2deg)} }
@keyframes magi-paper-jump { 0%,100% {transform:translateY(0)} 25% {transform:translateY(6px)} 55% {transform:translateY(-16px)} 80% {transform:translateY(3px)} }

@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:96px;height:96px;overflow:visible; }
/* Waiting belongs to the character; it starts and ends with the actual request. */
.magi-face-wrap { position:relative;flex:none;width:96px;height:96px; }
.magi-thought-orbit { display:none;position:absolute;right:1px;top:-3px;width:30px;height:30px;color:#7797a8;pointer-events:none; }
.magi-thought-orbit svg { display:block;width:100%;height:100%; }
.magi-thought-spin { transform-origin:20px 20px;animation:magi-thinking-orbit 2s linear infinite; }
.magi-sweat-face { display:none;position:absolute;inset:0;width:96px;height:96px;overflow:visible;pointer-events:none; }
.magi-thinking[data-wait-stage="sweat"] .magi-header-robot,.magi-thinking[data-wait-stage="heavy"] .magi-header-robot { display:none; }
.magi-thinking[data-wait-stage="sweat"] .magi-sweat-first,.magi-thinking[data-wait-stage="heavy"] .magi-sweat-flying { display:block; }
.magi-thinking .magi-sweat-face .magi-jaw { animation:magi-sweat-mumble 6s steps(2,end) infinite; }
@keyframes magi-sweat-mumble { 0%,68%,100% {transform:translateY(0)} 72%,79% {transform:translateY(22px)} 83% {transform:translateY(9px)} }
.magi-thinking .magi-thought-orbit { display:block; }
.magi-thinking .magi-header-robot,.magi-thinking .magi-sweat-face { transform-origin:50% 78%;animation:magi-thinking-tilt 5s ease-in-out infinite; }
.magi-thinking .magi-header-robot .magi-eye { animation:magi-thinking-eye 5s ease-in-out infinite; }
.magi-thinking .magi-header-robot .magi-antenna { animation:magi-paper-antenna 3s ease-in-out infinite; }
.magi-thinking .magi-identity { border-color:#cbdbe3;background:#f4f8fa; }
.magi-thinking .magi-identity::before { border-color:#cbdbe3;background:#f4f8fa; }
@keyframes magi-thinking-orbit { to {transform:rotate(360deg)} }
@keyframes magi-thinking-tilt { 0%,100% {transform:rotate(-3deg)} 50% {transform:rotate(3deg)} }
@keyframes magi-thinking-eye { 0%,100% {transform:scaleY(.78)} 45%,55% {transform:scaleY(.58)} 76%,79% {transform:scaleY(.08)} }
.magi-identity { position:relative;margin:0;min-width:0;padding:8px 10px;border:1px solid #d9e1e5;border-radius:12px;background:#fafbfb;color:#586b77;font-size:13.2px;font-weight:400;line-height:1.65;overflow-wrap:anywhere; }
.magi-identity span { display:block; }
.magi-identity::before { content:"";position:absolute;left:-5px;top:calc(50% - 4px);width:8px;height:8px;border-left:1px solid #d9e1e5;border-bottom:1px solid #d9e1e5;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-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 { right:22px;bottom:154px; }
 .magi-invite[data-position="side"] { right:125px;bottom:65px; }
 .magi-invite[data-position="diagonal"] { right:88px;bottom:143px; }
 .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-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; }
 /* While typing, the robot steps aside so the window reaches the keyboard; the composer is never clipped. */
 .magi-typing .magi-launch-area { display:none; }
 .magi-typing .magi-panel { bottom:calc(var(--magi-v-bottom,0px) + max(8px,env(safe-area-inset-bottom)));height:calc(var(--magi-v-height,100dvh) - max(8px,env(safe-area-inset-top)) - max(8px,env(safe-area-inset-bottom))); }
 .magi-typing .magi-face-wrap, .magi-typing .magi-header-robot { width:56px;height:56px; }
 .magi-typing .magi-scroll { flex:1 1 0; }
}
@media(max-height:650px) and (min-width:601px) { .magi-picker { padding-top:18px; } .magi-sites button { min-height:45px; } }
.magi-launch-area.walking .magi-arm-left,.magi-launch-area.walking .magi-arm-right { animation-name:magi-approved-arm; }
@keyframes magi-approved-arm { 0%,100% {transform:rotate(-1.2deg)} 50% {transform:rotate(1.2deg)} }
@media(prefers-reduced-motion:reduce) { .magi *, .magi *::before, .magi *::after { animation:none !important;transition:none !important;scroll-behavior:auto !important; } }