/* Matrix assistant mascot (robot-heads, MIT) with orbit rings, magnifier, binoculars and state effects; suggestions panel; alert bell. */
.mascot { position: relative; display: inline-block; flex: none; --ring: #22b8cf; --glow: rgba(34,184,207,.55); }
:root[data-theme="dark"] .mascot { --ring: #5ee6ff; --glow: rgba(94,230,255,.6); }
.mascot.big { width: 170px; height: 200px; margin: 0 auto 6px; display: block; }
.mascot.small { width: 70px; height: 90px; }
.mascot .mc-bot { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; z-index: 2; overflow: visible; }   /* the robot's canvas is taller than wide and rises above its box: never clamp it, or it is squished */
.mascot .mc-rings { position: absolute; left: 50%; top: 50%; width: 150%; height: 150%; transform: translate(-50%, -50%); pointer-events: none; overflow: visible; }
.mascot .mc-rings.back { z-index: 1; } .mascot .mc-rings.front { z-index: 3; }
.mascot .mc-rings ellipse { fill: none; stroke: var(--ring); stroke-width: 1.1; opacity: .5; }
.mascot .mc-rings ellipse.dash { stroke-dasharray: 2 6; opacity: .7; }
.mascot .mc-rings circle { fill: var(--ring); filter: drop-shadow(0 0 4px var(--glow)); }
.mascot[data-state="sleeping"] .mc-rings { opacity: .25; transition: opacity .6s; }
.mascot[data-state="error"] { --ring: #ef4444; --glow: rgba(239,68,68,.6); }
.mascot[data-alert="1"] { --ring: #f59e0b; --glow: rgba(245,158,11,.7); }
/* other effects */
.mascot .mc-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.mascot .fx { position: absolute; opacity: 0; transition: opacity .25s; }
.mascot .fx.gear { left: 4%; top: 8%; width: 24%; animation: mc-spin 3s linear infinite; } .mascot .fx.gear path { fill: none; stroke: var(--ring); stroke-width: 3; }
.mascot[data-fx~="gear"] .fx.gear { opacity: .95; } @keyframes mc-spin { to { transform: rotate(360deg); } }
.mascot .fx.wave { top: 36%; width: 14%; height: 26%; border: 2px solid var(--ring); border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; }
.mascot .fx.wave.l { left: 2%; transform: rotate(-135deg); } .mascot .fx.wave.r { right: 2%; transform: rotate(45deg); }
.mascot[data-fx~="wave"] .fx.wave { animation: mc-wave 1.3s ease-out infinite; } .mascot[data-fx~="wave"] .fx.wave.r { animation-delay: .25s; }
@keyframes mc-wave { 0% { opacity: .9; margin: 0; } 100% { opacity: 0; margin: 0 -14px 0 -14px; } }
.mascot .fx.spark { width: 7px; height: 7px; background: #fbbf24; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.mascot[data-fx~="spark"] .fx.spark { animation: mc-spark 1.6s ease-out infinite; }
.mascot .fx.spark:nth-of-type(1) { left: 14%; top: 18%; } .mascot .fx.spark:nth-of-type(2) { right: 12%; top: 14%; animation-delay: .3s !important; } .mascot .fx.spark:nth-of-type(3) { left: 8%; bottom: 26%; animation-delay: .6s !important; } .mascot .fx.spark:nth-of-type(4) { right: 8%; bottom: 30%; animation-delay: .9s !important; }
@keyframes mc-spark { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1.5); } 100% { opacity: 0; transform: scale(.4) translateY(-14px); } }
.mascot .fx.pulse { inset: 8%; border-radius: 50%; border: 2px solid #ef4444; } .mascot[data-fx~="pulse"] .fx.pulse { animation: mc-pulse 1s ease-out infinite; } @keyframes mc-pulse { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.25); } }
/* the strip above the composer: mascot, what it is doing, likely next questions */
.assist-row { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; min-height: 40px; }
.assist-row .say { font-size: 12.5px; color: var(--text-2); max-width: 190px; flex: none; line-height: 1.3; }
.assist-row .say b { display: block; color: var(--text); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; }
.next { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; }
.next button { border: 1px solid var(--border); background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; line-height: 1.35; max-width: 100%; text-align: left; transition: background .15s, border-color .15s, color .15s; }
.next button:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
.next button:disabled { opacity: .5; cursor: default; }
.next .lbl { font-size: 11.5px; color: var(--text-3); align-self: center; margin-right: 2px; }
.main:has(#welcome:not([hidden])) .floatbot { display: none; }
.main:has(#welcome:not([hidden])) .assist-row .say { display: none; }
/* suggestions panel */
.sugpanel { position: absolute; left: 12px; right: 12px; bottom: calc(100% + 8px); max-width: 760px; margin: 0 auto; max-height: min(calc(100vh - 230px), 540px); overflow: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 14px 14px; z-index: 30; }
.sugpanel[hidden] { display: none; }
.sugpanel .sg-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; position: sticky; top: -12px; background: var(--surface); padding: 6px 0; z-index: 1; }
.sugpanel .sg-top input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; background: var(--bg-subtle); color: var(--text); font: inherit; font-size: 13.5px; }
.sugpanel h4 { margin: 12px 0 6px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); display: flex; align-items: center; gap: 6px; }
.sugpanel .sg-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.sugpanel .sg { text-align: left; border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--bg); transition: background .15s, border-color .15s; }
.sugpanel .sg:hover, .sugpanel .sg:focus-visible { background: var(--accent-soft); border-color: var(--accent); }
.sugpanel .sg b { display: block; font-size: 13.5px; font-weight: 600; } .sugpanel .sg span { display: block; font-size: 12px; color: var(--text-3); line-height: 1.35; }
.sugpanel .sg.nx { border-style: dashed; }
/* alert bell */
.bell { position: relative; } .bell .badge { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: #dc2626; color: #fff; font-size: 10.5px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.bell .badge[hidden] { display: none; } .bell.ring .ic { animation: mc-ring 1.2s ease-in-out 3; transform-origin: 50% 20%; } @keyframes mc-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(14deg); } 40% { transform: rotate(-12deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-5deg); } }
.alertpanel { position: absolute; right: 12px; top: 52px; width: min(420px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow); z-index: 50; }
.alertpanel[hidden] { display: none; }
.alertpanel .ap-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-weight: 600; }
.alertpanel .al { padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; line-height: 1.45; }
.alertpanel .al.new { background: var(--accent-soft); } .alertpanel .al b { display: block; }
.alertpanel .al .lv { display: inline-block; padding: 0 7px; border-radius: 99px; font-size: 11px; font-weight: 700; color: #fff; margin-right: 6px; }
.alertpanel .al .lv.High { background: #c62828; } .alertpanel .al .lv.Medium { background: #ef8f00; } .alertpanel .al .lv.Low { background: #5b9e5b; }
.alertpanel .al small { color: var(--text-3); } .alertpanel .al button { color: var(--accent); font-size: 12px; margin-right: 10px; }
.alertpanel .empty { padding: 18px 14px; color: var(--text-3); font-size: 13px; }
.composer-in { position: relative; }
@media (max-width: 820px) { .assist-row .say { display: none; } .floatbot { right: 10px; bottom: 150px; } }
@media (prefers-reduced-motion: reduce) {
  .mascot .fx, .floatbot .dockbot { animation: none !important; }
}

/* floating bot: always at hand, starts a chat by text or voice */
.floatbot { position: fixed; right: 26px; bottom: 132px; z-index: 25; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.floatbot .dockbot { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 50%; animation: mc-float 4.2s ease-in-out infinite; filter: drop-shadow(0 10px 10px rgba(16,24,40,.18)); }
.floatbot .dockbot:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@keyframes mc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.fb-pill, .fb-form { position: absolute; bottom: 100%; right: 0; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 999px; box-shadow: var(--shadow); }
.fb-pill { display: flex; align-items: center; padding: 4px; gap: 2px; right: 50%; transform: translateX(50%); }
.fb-pill[hidden], .fb-form[hidden] { display: none; }
.fb-pill button { width: 46px; height: 44px; border-radius: 999px; display: grid; place-items: center; color: var(--text); transition: background .15s; }
.fb-pill button:hover, .fb-pill button:focus-visible { background: var(--bg-hover); }
.fb-pill .sep { width: 1px; height: 22px; background: var(--border); }
.fb-form { display: flex; align-items: center; gap: 6px; padding: 5px; width: min(340px, calc(100vw - 32px)); }
.fb-form input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; padding: 8px 4px; outline: none; }
.fb-form button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }

.floatbot.dragging .dockbot { cursor: grabbing; animation: none; filter: drop-shadow(0 16px 14px rgba(16,24,40,.28)); }
.floatbot.below .fb-pill, .floatbot.below .fb-form { bottom: auto; top: 100%; margin: 8px 0 0; }
.floatbot.left-side .fb-form { right: auto; left: 0; }
.floatbot { transition: none !important; }   /* it follows the pointer exactly; the page-wide reduced-motion rule would otherwise turn every move into a (tiny) transition */