/* The AxioCHAT answer styles and Axio Live (js/engines.js): the one tap switch just under the message box (Default,
   If I were you, Axio Expert), Axio Live inside the chat window, the option line and sources on answers, and the side menu's longer
   names. Everything here is new; nothing else in the app is restyled. */

/* ---------- the switch: just under the message box. The box sits 48px higher than a plain one to make room, and the
   switch rides up with it when the keyboard opens ---------- */
.comp.eng{bottom:calc(var(--sab) + 60px + var(--kb))}
.comp.eng .engseg{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);display:flex;align-items:center;gap:2px;padding:3px;border-radius:21px;background:#F1F2F1;box-shadow:0 2px 14px rgba(0,0,0,.07),inset 0 0 0 .5px rgba(0,0,0,.05);white-space:nowrap}
.engseg .eseg{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:5px;height:34px;padding:0 14px;border-radius:17px;font-size:14.5px;line-height:1;font-weight:600;color:#6B6B6B;transition:background .15s,color .15s,box-shadow .15s,transform .12s}
.engseg .eseg svg{display:block;flex:none}
.engseg .eseg span{display:block;padding-top:1px}
.engseg .eseg.on{background:#fff;color:var(--green);box-shadow:0 1px 4px rgba(12,12,12,.14)}
.engseg .eseg.on.gold{color:var(--gold-ink)}
.engseg .eseg.lock{color:#9B9B9B}
.engseg .eseg::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.engseg .eseg:active{transform:scale(.96)}
/* never wider than the message box: a little tighter on narrower phones, and on the smallest the lock a visitor sees
   gives way to the words */
@media (max-width:380px){.engseg .eseg{padding:0 11px;font-size:14px}}
@media (max-width:330px){.engseg .eseg svg{display:none}.engseg .eseg{padding:0 9px;font-size:13.5px}}

/* ---------- the definition card: a small card just above the message box when an option is tapped (js/engines.js).
   It is the box's own child, as wide as the box (so its edges line up with the box's, whatever the phone), it rides with the box
   and the keyboard, it takes no touches, and a touch anywhere puts it away ---------- */
.engtip{position:absolute;left:50%;bottom:calc(100% + 12px);width:100%;max-width:440px;box-sizing:border-box;display:flex;align-items:center;gap:11px;padding-block:11px;padding-inline:12px 18px;border-radius:20px;background:#fff;box-shadow:0 10px 30px rgba(12,12,12,.16),0 0 0 .5px rgba(12,12,12,.07);opacity:0;transform:translate3d(-50%,8px,0) scale(.97);transition:opacity .2s var(--ease),transform .24s var(--ease);pointer-events:none;z-index:30;text-align:start}
.engtip.on{opacity:1;transform:translate3d(-50%,0,0)}
.engtip .tipface{flex:none;display:block;width:38px;height:38px}
.engtip .tiptx{display:flex;flex-direction:column;gap:2px;min-width:0}
.engtip b{display:block;font-size:15px;line-height:20px;font-weight:700;color:var(--green)}
.engtip.gold b{color:var(--gold-ink)}
.engtip .tiptx > span{display:block;font-size:14px;line-height:19px;font-weight:500;color:#4A4A4A}
.engtip em{display:block;margin-top:3px;font-style:normal;font-size:13px;line-height:18px;font-weight:600;color:var(--gold-ink)}
@media (prefers-reduced-motion:reduce){.engtip{transition:opacity .15s;transform:translate3d(-50%,0,0)}}

/* ---------- the Live key: in an empty AxioCHAT box the green wave key widens to carry Axio Live's name; typing turns
   it back into the round send key ---------- */
.comp .csend.lvkey{width:auto;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding-inline:8px 11px;border-radius:17.333px;color:#fff;font-size:14.5px;line-height:1;font-weight:700;letter-spacing:.01em;white-space:nowrap}
.comp .csend.lvkey svg{display:block;flex:none;width:18px;height:18px}
.comp .csend.lvkey span{display:block;font-family:"PJS",system-ui,sans-serif}
/* the box's own words always keep one line beside the keys: on the narrowest phones the Live key keeps its round shape */
@media (max-width:350px){.comp .csend.lvkey{width:34.667px;padding:0;border-radius:50%}.comp .csend.lvkey span{display:none}}

/* a soft white fade under the box and the switch, so the words of a long chat never show through around them
   (it sits under the box, so the box keeps its own shadow) */
.engfade{position:absolute;left:0;right:0;bottom:0;height:calc(var(--sab) + 86px + var(--kb));background:linear-gradient(rgba(255,255,255,0),#fff 30px);z-index:5;pointer-events:none}

/* the room the higher box takes: the arrow back to the end of a long chat and the last answer keep their own
   distance above it (the screens then keep this room as the box grows) */
.v-chat .down{bottom:calc(var(--sab) + 128px + var(--kb))}
.v-chat .conv{padding-bottom:calc(var(--sab) + 158px + var(--kb))}

/* ---------- Axio Live inside the chat window: the AxioraX orb in the centre (js/engines.js) ----------
   The chat and the message box step back while it is on, and come back when it ends. */
.v-chat .conv{transition:opacity .3s var(--ease)}
.v-chat .comp.eng{transition:border-radius .15s,opacity .25s var(--ease)}
.v-chat .engfade{transition:opacity .25s var(--ease)}
.v-chat.lvon .conv,.v-chat.lvon .comp.eng,.v-chat.lvon .engfade,.v-chat.lvon .down{opacity:0!important;pointer-events:none!important}
.v-chat.lvon .comp.eng{visibility:hidden;transition:border-radius .15s,opacity .25s var(--ease),visibility 0s .25s}
/* while Live is on, New chat and More step aside (End and Back close Live; the menu stays) */
.v-chat .tb .pillb.duo{transition:opacity .25s var(--ease)}
.v-chat.lvon .tb .pillb.duo{opacity:0;pointer-events:none}
.lvstage{position:absolute;left:0;right:0;top:calc(var(--sat) + 66px);bottom:0;z-index:7;display:flex;flex-direction:column;align-items:center;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.lvstage.on{opacity:1;pointer-events:auto}
.lvcenter{flex:1 1 auto;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 28px}
/* the orb: a pearl with the AxioraX colours flowing inside it, a gold light running round its edge, a light circling
   it on a faint track, and the logo in its own colours in the middle */
.lvorbw{--d:clamp(184px,60vw,260px);flex:none;width:var(--d);height:var(--d);transform:scale(.55);opacity:0;transition:transform .7s cubic-bezier(.2,1.25,.35,1),opacity .4s var(--ease)}
.lvstage.on .lvorbw{transform:none;opacity:1}
.lvorb2{position:relative;width:100%;height:100%;transform:scale(calc(1 + var(--lv,0) * .1))}
.lvorb2 > span{position:absolute;border-radius:50%}
.lvglow{inset:-36%;background:radial-gradient(circle,rgba(19,83,51,.24) 0%,rgba(19,83,51,.11) 38%,rgba(167,148,33,.07) 54%,rgba(19,83,51,0) 70%);animation:lvGlow 3.4s ease-in-out infinite}
.lvring{inset:0;border:2px solid rgba(167,148,33,.55);opacity:0}
/* the light that runs round the orb: a faint track, a green tail and a gold head */
.lvtrack{inset:-18px;border:1px solid rgba(19,83,51,.10);animation:lvSpin 8s linear infinite}
.lvtrack::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;background:conic-gradient(from 0deg,rgba(46,139,87,0) 0deg,rgba(46,139,87,0) 240deg,rgba(46,139,87,.45) 320deg,rgba(228,190,63,.95) 358deg,rgba(228,190,63,0) 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 2.5px),#000 calc(100% - 2px))}
.lvtrack i{position:absolute;left:50%;top:-1px;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:#E4BE3F;box-shadow:0 0 12px 4px rgba(228,190,63,.55)}
.lvbody{inset:0;animation:lvBreath 3.4s ease-in-out infinite}
.lvsphere{position:absolute;inset:0;border-radius:50%;overflow:hidden;isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);background:radial-gradient(circle at 50% 46%,#FFFFFF 0%,#F5FAF7 34%,#DDEDE3 70%,#C3DCCB 100%);box-shadow:0 24px 54px rgba(19,83,51,.24),0 6px 16px rgba(19,83,51,.12),inset 0 -16px 34px rgba(19,83,51,.14),inset 0 0 0 1px rgba(19,83,51,.07)}
.lvflow{position:absolute;inset:0;animation:lvSpin 11s linear infinite}
.lvflow i{position:absolute;border-radius:50%;opacity:.85;transition:opacity .5s;animation:lvBlob 6s ease-in-out infinite alternate}
.lvflow.f1 i{left:-20%;top:-14%;width:72%;height:72%;background:radial-gradient(circle,rgba(46,139,87,.78) 0%,rgba(46,139,87,.32) 42%,rgba(46,139,87,0) 70%)}
.lvflow.f2{animation-duration:14s;animation-direction:reverse}
.lvflow.f2 i{right:-22%;top:18%;width:74%;height:74%;background:radial-gradient(circle,rgba(214,186,62,.8) 0%,rgba(214,186,62,.3) 42%,rgba(214,186,62,0) 70%);animation-duration:7.5s}
.lvflow.f3{animation-duration:17s}
.lvflow.f3 i{left:8%;bottom:-28%;width:78%;height:78%;background:radial-gradient(circle,rgba(120,200,155,.82) 0%,rgba(120,200,155,.32) 42%,rgba(120,200,155,0) 70%);animation-duration:8.5s}
.lvflow.f4{animation-duration:23s;animation-direction:reverse}
.lvflow.f4 i{left:-26%;bottom:-10%;width:60%;height:60%;background:radial-gradient(circle,rgba(19,83,51,.46) 0%,rgba(19,83,51,0) 70%);animation-duration:9.5s}
.lvcore{position:absolute;inset:23%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.96) 0%,rgba(255,255,255,.78) 46%,rgba(255,255,255,0) 72%)}
.lvrim{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(228,190,63,0) 0deg,rgba(228,190,63,0) 210deg,rgba(228,190,63,.9) 300deg,rgba(255,248,214,1) 326deg,rgba(228,190,63,0) 338deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));animation:lvSpin 5.5s linear infinite}
.lvgloss{position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse 58% 42% at 33% 20%,rgba(255,255,255,.8) 0%,rgba(255,255,255,0) 72%)}
.lvmark{position:absolute;left:50%;top:50%;width:37%;transform:translate(-50%,-50%);animation:lvFloat 4.2s ease-in-out infinite;filter:drop-shadow(0 4px 8px rgba(19,83,51,.16))}
.lvmark svg{display:block;width:100%;height:auto}
/* listening breathes; speaking moves with the voice and sends gold ripples out; muted goes grey and still */
.lvstage[data-lv="speaking"] .lvbody{animation:lvTalk 1.3s ease-in-out infinite}
.lvstage[data-lv="speaking"] .lvring{animation:lvRipple 2.2s ease-out infinite}
.lvstage[data-lv="speaking"] .lvring.r2{animation-delay:1.1s}
.lvstage[data-lv="speaking"] .lvflow i{opacity:1}
.lvstage[data-lv="speaking"] .lvsphere{filter:saturate(1.15)}
.lvstage[data-lv="connecting"] .lvsphere{filter:saturate(.55)}
/* muted: the colours go grey and still; the logo keeps its own colours */
.lvstage[data-lv="muted"] .lvflow,.lvstage[data-lv="muted"] .lvrim,.lvstage[data-lv="muted"] .lvtrack,.lvstage[data-lv="muted"] .lvglow{filter:grayscale(1)}
.lvstage[data-lv="muted"] .lvflow i{opacity:.55}
.lvstage[data-lv="muted"] .lvsphere{background:radial-gradient(circle at 50% 46%,#FFFFFF 0%,#F7F7F7 36%,#E8E8E8 72%,#D8D8D8 100%)}
.lvstage[data-lv="muted"] .lvorb2 *{animation-play-state:paused}
@keyframes lvSpin{to{transform:rotate(360deg)}}
@keyframes lvBlob{0%{transform:scale(.9) translate(0,0)}50%{transform:scale(1.08) translate(5%,-4%)}100%{transform:scale(.96) translate(-4%,5%)}}
@keyframes lvBreath{0%,100%{transform:scale(.985)}50%{transform:scale(1.015)}}
@keyframes lvGlow{0%,100%{transform:scale(.93);opacity:.75}50%{transform:scale(1.07);opacity:1}}
@keyframes lvFloat{0%,100%{transform:translate(-50%,calc(-50% + 2px))}50%{transform:translate(-50%,calc(-50% - 2px))}}
@keyframes lvRipple{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.45);opacity:0}}
@keyframes lvTalk{0%,100%{transform:scale(1)}18%{transform:scale(1.035)}34%{transform:scale(.995)}52%{transform:scale(1.045)}70%{transform:scale(1.005)}86%{transform:scale(1.03)}}
/* the status line and the words of the moment, under the orb */
.lvstage .lvstat{display:flex;align-items:center;gap:8px;height:30px;margin-top:40px;padding:0 15px;border-radius:15px;background:var(--green-soft);color:var(--green);font-size:14px;line-height:1;font-weight:600;white-space:nowrap}
.lvstat .lvdot{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none;animation:lvDot 1.6s ease-in-out infinite}
.lvstage[data-lv="muted"] .lvstat{background:#F1F2F1;color:#5C5C5C}
/* a short note in the state line (about 30 seconds left, tap to hear): gold */
.lvstage.hinted .lvstat{background:var(--gold-soft);color:var(--gold-ink)}
.lvstage.hinted .lvdot{background:var(--gold)}
.lvstage[data-lv="muted"] .lvdot{background:#9B9B9B;animation:none}
@keyframes lvDot{0%,100%{opacity:1}50%{opacity:.35}}
.lvcap{margin-top:16px;width:100%;max-width:330px;min-height:75px;text-align:center;font-size:17px;line-height:25px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.lvcap.me{color:#6B6B6B}
/* Mute and End, under it all */
.lvctl{flex:none;display:flex;justify-content:center;gap:76px;padding:8px 0 calc(var(--sab) + 18px)}
.lvbtn{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:64px}
.lvb{width:60px;height:60px;border-radius:50%;background:#F1F2F1;display:grid;place-items:center;transition:transform .12s,background .15s}
.lvb svg{display:block}
.lvbtn:active .lvb{transform:scale(.93)}
.lvbtn.on .lvb{background:#0C0C0C}
.lvbtn.end .lvb{background:var(--red);box-shadow:0 8px 20px rgba(179,38,30,.28)}
.lvbl{font-size:13.5px;line-height:1;font-weight:600;color:#5C5C5C}
@media (prefers-reduced-motion:reduce){.lvstage *{animation:none!important}.lvorbw{transition:opacity .2s}}

/* ---------- on the answers ---------- */
.engline{display:flex;align-items:center;gap:6px;font-size:14px;line-height:20px;font-weight:600;color:var(--green);margin:0 0 6px}
.engline svg{display:block;flex:none}
.engline.gold{color:var(--gold-ink)}
.srcpill{display:inline-flex;align-items:center;gap:8px;height:34px;padding-inline:5px 13px;margin-top:12px;border-radius:17px;background:var(--row);font-size:14px;font-weight:600;color:#3C3C3C;transition:transform .12s}
.srcpill:active{transform:scale(.96)}
.srcpill .sfavs{display:inline-flex}
.srcpill .sfavs i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800;color:#fff;background:var(--green);box-shadow:0 0 0 2px var(--row)}
.srcpill .sfavs i:nth-child(2){background:#1E6B45;margin-inline-start:-5px}
.srcpill .sfavs i:nth-child(3){background:var(--gold-ink);margin-inline-start:-5px}
.sfav1{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:800;color:#fff;background:var(--green)}

/* ---------- the side menu: the longer name he chose, AxioraX Dashboard, stays on one line; on the dashboard side
   its Lite and Advanced switch moves to a line of its own just beneath the name, lined up with it ---------- */
.drow.dashrow{flex-wrap:wrap;height:auto;min-height:46px;row-gap:7px;padding-block:10px 11px}
.drow.dashrow > span:not(.dmode){flex:0 0 calc(100% - 36.9px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drow.dashrow .dmode{margin-inline-start:36.9px}

/* ---------- your question, as in ChatGPT (js/chat.js): Copy and Edit under it, its versions once edited, and the
   edit itself in place, with Cancel and Send ---------- */
.msg-me.qa{flex-direction:column;align-items:flex-end;margin-bottom:14px}
.qacts{display:flex;align-items:center;justify-content:flex-end;gap:2px;margin-top:3px;margin-inline-end:-6px;color:#9A9A9A}
.qacts button{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:inherit;transition:background .15s,transform .12s}
.qacts button::after{content:"";position:absolute;inset:-6px}
.qacts button:active{background:rgba(12,12,12,.06);transform:scale(.93)}
.qacts button[disabled]{opacity:.32;pointer-events:none}
.qacts button svg{display:block}
.qacts .qvn{min-width:30px;text-align:center;font-size:13.5px;line-height:1;font-weight:600;color:#6B6B6B;font-variant-numeric:tabular-nums}
.msg-me.editing{align-items:stretch}
.qedit{width:100%;border-radius:22px;padding:8px 10px 10px 18px;background:linear-gradient(180deg,var(--bub-a),var(--bub-b));box-shadow:0 0 0 1.5px rgba(19,83,51,.28)}
.qedit textarea{display:block;width:100%;min-height:52px;max-height:220px;padding:6px 6px 4px 0;border:0;outline:none;background:transparent;resize:none;font:inherit;font-size:17px;line-height:26px;color:var(--bub-ink)}
.qebar{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}
.qebar button{height:38px;padding:0 18px;border-radius:19px;font-size:15px;line-height:1;font-weight:600;transition:transform .12s,opacity .15s}
.qebar button:active{transform:scale(.96)}
.qcancel{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(12,12,12,.10)}
.qsend{background:var(--green);color:#fff}
.qsend[disabled]{opacity:.4;pointer-events:none}
/* Try again shows under the latest answer only, as in ChatGPT */
.acts .again{display:none}
.conv > .msg-ax:last-child .acts .again{display:inline-flex}
/* room for it on a phone: Slides keeps its icon and its name is said aloud to screen readers; on the narrowest phones
   Word and PDF keep their icons too */
@media (max-width:430px){.acts [data-a="slides"] span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:340px){.acts [data-a="word"] span,.acts [data-a="pdf"] span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* Axio Expert as a professional (15 Oct 2026): press and hold without the phone's own menu, a long name shortened */
.engseg .eseg{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.engseg .eseg.gold span{max-width:128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.engtip .tiptx > span.tiphold{display:block;margin-top:4px;font-size:12.5px;line-height:17px;font-weight:600;color:var(--gold-ink)}
/* My experts (js/engines.js, 17 Oct 2026): the member's experts in order, the first five shown on press and hold */
.exp .exnowc{display:flex;align-items:center;gap:12px;margin-top:18px;padding:14px 16px}
.exp .exnowc .av{flex:none}
.exp .exnt{flex:1;min-width:0;display:flex;flex-direction:column}
.exp .exnt span{font-size:13px;line-height:18px;color:var(--sub)}
.exp .exnt b{font-size:17px;line-height:23px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp .exany{flex:none;height:36px;padding:0 14px;border-radius:18px;background:#fff;color:var(--green);font-size:14px;font-weight:700;box-shadow:inset 0 0 0 1px rgba(19,83,51,.18)}
.exp .exlab{display:flex;align-items:baseline;gap:10px;margin:26px 0 8px;margin-inline-start:18.667px}
.exp .exlab span{font-size:17px;line-height:24px;color:var(--ph)}
.exp .exlab small{margin-inline-start:auto;margin-inline-end:6px;font-size:13px;color:var(--ph)}
.exl{position:relative;display:flex;flex-direction:column;gap:2px;border-radius:22px;overflow:hidden}
.exl.dragging{overflow:visible}
.exr{position:relative;display:flex;align-items:center;min-height:60px;background:var(--row);transition:background .15s,box-shadow .15s}
.exr.top{background:#F1F6F2}
.exr.on .exn{font-weight:700}
.exr.drag{z-index:5;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.18);border-radius:16px;transition:none}
.exh{flex:none;display:grid;place-items:center;width:44px;height:60px;touch-action:none;cursor:grab}
.exb{flex:1;min-width:0;display:flex;align-items:center;gap:12px;min-height:60px;text-align:start}
.exi{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff}
.exn{flex:1;min-width:0;font-size:16px;line-height:21px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exnow{flex:none;display:inline-flex;align-items:center;gap:4px;height:26px;padding:0 10px;border-radius:13px;background:var(--green);color:#fff;font-size:12.5px;font-weight:700}
.exm{flex:none;display:grid;place-items:center;width:48px;height:60px}
.exsep{padding:12px 16px 8px;background:#fff;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ph)}
.exnone{padding:18px;background:var(--row);color:var(--sub);font-size:15px;text-align:center;border-radius:22px}
.exq{margin-top:4px}
.exres{display:flex;flex-direction:column;gap:2px;margin-top:12px;border-radius:22px;overflow:hidden}
.exhint{padding:10px 16px 6px;font-size:13px;font-weight:700;color:var(--ph);background:#fff}
.exadd{display:flex;align-items:center;gap:12px;min-height:58px;padding:8px 14px;background:var(--row);text-align:start;width:100%}
.exadd:active{background:#EBEBEB}
.exat{flex:1;min-width:0;display:flex;flex-direction:column}
.exat b{font-size:15.5px;line-height:20px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exat span{font-size:13px;line-height:17px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exadd.own{background:var(--gold-soft)}
.exadd > svg{flex:none}
/* press and hold to move: no text selection or phone menu on a long press, and the expert lifts a little */
.exr{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.exr.drag{transform-origin:center;scale:1.02}

/* quoted sources: the small number in the text, the cards under the answer and the passage sheet (2026.10.18) */
.ans .cite{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;margin-inline-start:4px;border-radius:10px;background:#E3F0E8;color:var(--green);font-family:inherit;font-size:11.5px;font-weight:800;line-height:1;vertical-align:3px;transition:transform .12s}
.ans .cite+.cite{margin-inline-start:3px}
.ans .cite:active{transform:scale(.9)}
.srccards{margin:14px -17.9px 0;overflow:hidden}
.srcrow{display:flex;gap:10px;overflow-x:auto;padding:2px 17.9px 4px;scroll-padding-inline:17.9px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.srcrow::-webkit-scrollbar{display:none}
.srccard{flex:none;width:200px;min-height:84px;display:flex;flex-direction:column;gap:6px;padding:11px 12px;border-radius:14px;background:#fff;border:1px solid #E6E8E7;text-align:start;scroll-snap-align:start;transition:transform .12s}
.srccard:active{transform:scale(.97)}
.srccard .sctop{display:flex;align-items:center;gap:7px;min-width:0}
.scn{flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-size:11px;font-weight:800;line-height:1}
.scd{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px;font-weight:600;color:#6B6F6D}
.srccard .sct{font-size:14px;line-height:19px;font-weight:600;color:#1F2421;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.citesh{padding:2px 0 4px}
.citesh .citehd{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.citesh h3{margin:0 0 12px;font-size:18px;line-height:24px}
.citesh blockquote{margin:0 0 18px;padding:12px 14px;border-radius:12px;background:#F3F6F4;border-inline-start:3px solid var(--green);font-size:15px;line-height:22px;color:#2A2F2C}
.citesh .bp{width:100%}
@media (min-width:900px){.srccards{margin-inline:0}.srcrow{padding-inline:0;scroll-padding-inline:0}}
/* Update 8 (22 Oct 2026): the New Chat key in the AxioCHAT message box, beside the plus key; the three keys share the room evenly */
.comp.cnw .cplus,.comp.cnw .cmic{width:36px}
.comp.cnw .cnew{width:36px;height:52px;display:grid;place-items:center;flex:none;transition:transform .12s}
.comp.cnw .cnew svg{display:block}
.comp.cnw .cnew:active{transform:scale(.9)}
.comp.cnw.tall .cnew{order:1}
.comp.cnw.recui .cnew{display:none}
/* on phones under 380 points wide the Live key shows as its round wave key (as it already does under 350), so the hint
   keeps its whole line; the hint never wraps, so the empty box always keeps its one row */
@media (max-width:379px){.comp.cnw .csend.lvkey{width:34.667px;padding:0;border-radius:50%}.comp.cnw .csend.lvkey span{display:none}}
.comp.cnw textarea::placeholder{white-space:nowrap;overflow:hidden}
/* AxioCHAT's message box on two lines, as in his ChatGPT picture (his ask, 22 Oct 2026, 12:46, picture approved 13:29):
   the words across the whole box, and under them the plus and New Chat at the start, the microphone and Axio Live (a
   round green key with its wave) at the end. The answer styles stay under the box. */
.comp.cnw,.comp.cnw.tall{flex-wrap:wrap;align-items:center;padding:2px 8px 8px;border-radius:28px;min-height:0}
.comp.cnw textarea,.comp.cnw.tall textarea{flex:1 1 100%;order:0;padding:14px 12px 6px;min-height:48px}
.comp.cnw .cplus{order:1;width:40px;height:40px}
.comp.cnw .cnew,.comp.cnw.tall .cnew{order:2;width:40px;height:40px}
.comp.cnw .grow{display:block;order:3;flex:1 1 auto}
.comp.cnw .cmic{order:4;width:40px;height:40px}
.comp.cnw .csend{order:5;width:40px;height:40px;margin:0;margin-inline-start:6px;border-radius:50%}
.comp.cnw .csend.lvkey{width:40px;padding:0;border-radius:50%}
.comp.cnw .csend.lvkey span{display:none}
.comp.cnw .csend.lvkey svg{width:21px;height:21px}
.comp.cnw.recui{padding:2px 8px 4px}
.comp.cnw.recui .grow{display:none}
.comp.cnw.has-att{padding-top:8px}
.comp.cnw .cmore{order:2;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;flex:none}
.comp.cnw .cmore:active{transform:scale(.9)}
.comp.cnw.recui .cmore{display:none}