/* static/style.css */

    html {
	 height: 100%;
	 margin: 0;
	 padding: 0;
	 font-size: 16px;
	 /* Base size */
	 font-family: "Nunito Sans", sans-serif;
	 font-weight: 400;
	 -webkit-font-smoothing: antialiased;
	 text-rendering: optimizeLegibility;
    }

    body {
	 margin: 0;
	 padding: 0;
	 padding-top: env(safe-area-inset-top);
	 padding-bottom: env(safe-area-inset-bottom);
	 font-size: 1rem;
	 line-height: 1.4;
	 /* Equivalent to 16px */
    }

    .container {
	 min-height: calc(var(--vh) * 100);
	 min-height: 100svh;
	 min-height: 100dvh;
	 /* Optional: constrain width */
	 width: 100%;
	 margin: 0 auto;
	 padding-top: calc(var(--rolodex-h)) ;
	 /*Optional side padding */
	 box-sizing: border-box;
    }

   iframe{
	width:100%;
	border:0;
	display:block;
	height: calc(var(--vh) * 60);
	 min-height: 60dvh;
   }

    h1 {
	 font-size: 2rem;
	 /* 32px */
    }

    h2 {
	 font-size: 1rem;
	 /* 16px */
    }

    p {
	 font-size: 0.875rem;
	 /* 14px */
    }

    @media (max-width: 768px) {
	 html {
	   font-size: 14px;
	   /* Smaller base on tablets */
	 }
    }

    @media (max-width: 480px) {
	 html {
	   font-size: 12px;
	   /* Smaller base on mobile */
	 }
    }

    .tooltip_container {
	 position: absolute;
	 z-index: 5;
	 top: 12px;
	 right: 12px;
	 left: auto;
	 transform: none;
	 cursor: pointer;
    }

    /* Tap-friendly */
    .tooltip_container.is-open .tooltip{
	 visibility: visible;
	 opacity: 1;
    }

    .tooltip {
	 visibility: hidden;
	 opacity: 0;
	 position: absolute;
	 top: 20%;
	 /* Position above the "i" icon */
	 left: 50%;
	 transform: translateX(-150%);
	 background-color: rgba(226, 226, 226, 1);
	 color: #979797;
	 padding: 15px;
	 /* More padding for better spacing */
	 border-radius: 8px;
	 /* Rounded corners */
	 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	 /* Subtle shadow for a modern look */
	 font-size: 14px;
	 /* Slightly larger font */
	 line-height: 1.6;
	 /* Better line spacing */
	 text-align: left;
	 width: 250px;
	 /* Fixed width for consistency */
	 z-index: 9999;
	 opacity: 0;
	 transition: opacity 0.3s ease;
    }

    .tooltip ul {
	 padding-left: 20px;
	 /* Indent the list items */
	 margin: 10px 0;
    }

    .tooltip ul li {
	 margin-bottom: 5px;
    }

    .tooltip strong {
	 color: #FF8243;
	 /* Highlighted text color */
	 font-weight: bold;
    }

    .tooltip em {
	 font-style: italic;
	 color: #000;
	 /* Subtle highlight for emphasized text */
    }

    .tooltip em.green {
	 font-weight: 400;
	 color: green;
	 /* Green */
    }

    .tooltip em.orange {
	 font-weight: 400;
	 color: #FF8243;
	 /* Green */
    }

    .tooltip_container:hover .tooltip {
	 visibility: visible;
	 opacity: 1;
    }

    @media (hover: hover) and (pointer: fine){
	 .tooltip_container:hover .tooltip{
	   visibility: visible;
	   opacity: 1;
	 }
    }

    @media (max-width: 768px){
	 .tooltip_container{
	   top: 25px;
	   left: auto;
	   right: 20px;
	   transform: none;
	 }
	 .tooltip{
	   left: auto;
	   right: 0;
	   transform: none;
	 }
    }

    .block {
	 display: flex;
	 flex-direction: column;
	 align-items: center;
	 justify-content: space-between;
	 background-color: white;
	 font-size: .875rem;
	 padding: 20px;
    }

    .block-1 {
	 background-color: rgba(52, 152, 219, 0);
	 flex: 1 1 33.33%;
	 display: flex;
	 flex-direction: column;
	 overflow: hidden;
    }

    /* ///////////////////////////////////////////// */
    /*-------------- Rolodex ------------------*/
    :root{
	 --rolodex-h: 120px; /* tune */
    }

    #rolodex_box {
	 display: flex;
	 position: fixed;
	 top: env(safe-area-inset-top);
	 align-items: center;
	 justify-content: center;
	 /*background-color: #ffffff;*/
	 flex: 1;
	 height: var(--rolodex-h);
	 width: 100%;
	 margin-bottom: 5px;
	 overflow: visible;
	 padding: 0px;
	 padding-top: env(safe-area-inset-top);
	 box-sizing: border-box;
    }

    /* Default state for tspan elements */
    #rolodex_box tspan {
	 z-index: 15;
	 fill: rgb(151, 151, 151);
	 font-weight: 400;
	 cursor: pointer;
	 pointer-events: all;
	 transition: font-size 0.3s ease, fill 0.3s ease;
    }

    /* Pill shape for hover */
    .pill-shape {
	 transition: all 0.3s ease;
	 fill: rgb(216, 216, 216);
	 opacity: 0.8;
	 pointer-events: none;
	 /* Prevent interaction with the pill */
    }

    /* Transition for selectable text */
    .selectable {
	 transition: transform 0.3s ease, fill 0.3s ease;
	 cursor: pointer;
    }

    /* Hover state for text */
    .selectable:hover {
	 fill: rgba(232, 129, 53, 1);
    }

    /* Ensure smooth scaling */
    #rolodex_box tspan:hover,
    #rolodex_box tspan:focus {
	 fill: rgba(232, 129, 53, 1);
	 font-size: 0.875rem;
	 transform-origin: center;
	 /* Scale from the center */
    }


    /* Selected state */
    #rolodex_box .selected {
	 font-weight: bold;
	 fill: black;
	 /* You can change this to any color you prefer */
    }

    /* Make the parent elements of tspan transparent and non-blocking */
    #rolodex_box ul.flip li a,
    #rolodex_box ul.flip li .up,
    #rolodex_box ul.flip li .down,
    #rolodex_box ul.flip li .shadow,
    #rolodex_box ul.flip li .inn {
	 pointer-events: none;
	 /* Prevent these elements from blocking interaction */
	 background-color: transparent;
    }

    /* Ensure tspan elements can receive pointer events */
    svg {
	 pointer-events: all;
	 /* Prevent the SVG from blocking interaction */
    }

    svg text tspan {
	 pointer-events: all;
	 /* Allow the tspan elements to receive pointer events */
    }

    #rolodex_box ul.flip {
	 position: relative;
	 width: 180px;
	 height: 108px;
	 font-family: "Nunito Sans", sans-serif;
	 font-size: 4rem;
	 font-weight: bold;
	 line-height: 87px;
	 border-radius: 6px;
	 box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
	 list-style: none;
    }

    #rolodex_box ul.flip li {
	 z-index: 1;
	 position: absolute;
	 left: 50px;
	 top: 0;
	 width: 100%;
	 height: 100%;
    }

    #rolodex_box ul.flip li.active {
	 z-index: 2;
    }

    #rolodex_box ul.flip li:first-child {
	 z-index: 2;
    }

    #rolodex_box ul.flip li a {
	 display: block;
	 height: 100%;
	 perspective: 200px;
    }

    #rolodex_box ul.flip li g#Overview text {
	 fill: rgb(216, 216, 216);
	 /* Default color */
    }

    #rolodex_box ul.flip li.active g#Overview text {
	 fill: rgba(232, 129, 53, 1);
	 /* Color when active */
    }

    #rolodex_box ul.flip li g#tab_0 use {
	 fill: rgb(216, 216, 216);
    }

    #rolodex_box ul.flip li.active g#tab_0 use {
	 fill: rgba(232, 129, 53, 1);
	 /* Color when active */
    }

    #rolodex_box ul.flip li g#tab_1 use {
	 fill: rgb(216, 216, 216);
    }

    #rolodex_box ul.flip li.active g#tab_1 use {
	 fill: rgba(232, 129, 53, 1);
	 /* Color when active */
    }

    #rolodex_box ul.flip li g#tab_2 use {
	 fill: rgb(216, 216, 216);
    }

    #rolodex_box ul.flip li.active g#tab_2 use {
	 fill: rgba(232, 129, 53, 1);
	 /* Color when active */
    }

    #rolodex_box ul.flip li g#tab_3 use {
	 fill: rgb(216, 216, 216);
    }

    #rolodex_box ul.flip li.active g#tab_3 use {
	 fill: rgba(232, 129, 53, 1);
	 /* Color when active */

    }

    #rolodex_box ul.flip li a div {
	 z-index: 1;
	 position: absolute;
	 left: -10px;
	 width: 100%;
	 height: 95%;
	 overflow: hidden;
    }

    #rolodex_box ul.flip li a div .shadow {
	 position: absolute;
	 width: 85%;
	 height: 66%;
	 z-index: 2;
    }

    #rolodex_box ul.flip li a div.up {
	 transform-origin: 0% 100%;
	 top: 0;
    }

    #rolodex_box ul.flip li a div.down {
	 transform-origin: 80% 10%;
	 bottom: 0;
    }

    /* Ensure that the shadow div doesn't block the tspan elements */
    #rolodex_box ul.flip li a div .shadow {
	 pointer-events: none;
	 /* Allows clicks to pass through */
    }


    #rolodex_box ul.flip li a div div.inn {
	 position: absolute;
	 top: 1px;
	 left: -2px;
	 z-index: 1;
	 width: 100%;
	 height: 200%;
	 color: #CE675D;
	 text-shadow: 0 1px 2px #000;
	 text-align: center;
	 background-color: rgba(204, 204, 204, 0);
	 opacity: .2;
	 border-radius: 6px;
	 cursor: pointer;
    }

    #rolodex_box ul.flip li a div.up div.inn {
	 top: 5px;
    }

    #rolodex_box ul.flip li a div.down div.inn {
	 bottom: 10px;
    }

    /* PLAY in nextTab.html it is the body now rolodex_box */
    #rolodex_box.play ul li.before {
	 z-index: 3;
    }

    #rolodex_box.play ul li.active {
	 animation: asd .5s .5s linear both;
	 z-index: 2;
    }

    @keyframes asd {
	 0% {
	   z-index: 2;
	 }

	 5% {
	   z-index: 4;
	 }

	 100% {
	   z-index: 4;
	 }
    }

    #rolodex_box.play ul li.active .down {
	 z-index: 2;
	 animation: turn .5s .5s linear both;
    }

    @keyframes turn {
	 0% {
	   transform: rotateX(90deg);
	 }

	 100% {
	   transform: rotateX(0deg);
	 }
    }

    body.play ul li.before .up {
	 z-index: 2;
	 animation: turn2 .5s linear both;
    }

    @keyframes turn2 {
	 0% {
	   transform: rotateX(0deg);
	 }

	 100% {
	   transform: rotateX(-90deg);
	 }
    }

    /* SHADOW */
    #rolodex_box.play ul li.before .up .shadow {
	 background: linear-gradient(to bottom, rgba(216, 216, 216, .1) 0%, rgba(0, 0, 0, 1) 100%);
	 animation: show .5s linear both;
    }

    #rolodex_box.play ul li.active .up .shadow {
	 background: linear-gradient(to bottom, rgba(216, 216, 216, .1) 0%, rgba(0, 0, 0, 1) 100%);
	 animation: hide .5s .3s linear both;
    }

    /* DOWN */
    #rolodex_box.play ul li.before .down .shadow {
	 background: linear-gradient(to bottom, rgba(216, 216, 216, .1) 0%, rgba(0, 0, 0, .1) 100%);
	 animation: show .5s linear both;
    }

    /* #rolodex_box > ul > li:nth-child(4) > a > div.down > div.shadow */
    #rolodex_box.play ul li.active .down .shadow {
	 background: linear-gradient(to bottom, rgba(216, 216, 216, .1)0%, rgba(0, 0, 0, .1) 100%);
	 animation: hide .5s .3s linear both;
    }

    @keyframes show {
	 0% {
	   opacity: 0;
	 }

	 100% {
	   opacity: 1;
	 }
    }

    @keyframes hide {
	 0% {
	   opacity: 1;
	 }

	 100% {
	   opacity: 0;
	 }
    }

    #rolodex_box.play ul.flip li.active .up .shadow {
	 background: linear-gradient(to bottom, rgba(216, 216, 216, 1) 0%, rgba(0, 0, 0, .5) 100%);
	 animation: show .5s linear both;
    }

    /* /////////////////////////////////////////////////////////// */
    /*-------------- RunRate Charts ------------------*/
    #runRatebox {
	 width: 100%;
	 margin-top: 0;
	 margin-bottom: 10px;
	 min-height: 16vh;
	 /* Adjust if more space is needed */
	 background-color: #f1f1f1cc;
	 position: relative;
	 display: flex;
	 flex-direction: column;
	 /* Stack by default */
	 gap: 20px;
	 /* Space between charts */
	 padding: 10px;
	 border-radius: 10px;
	 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

   #runRatebox, #chat-box{ width: 100%; box-sizing: border-box; }

   #runRatebox svg,
   #runRatebox canvas,
   #runRatebox img{
	max-width: 100%;
	height: auto;
	display: block;
   }

    #shortStatus4H svg .short-status-4h-text {
	 font-family: "Nunito Sans", sans-serif;
	 font-size: 14px;
	 font-weight: 500;
    }

    #vaOptimizerPanel svg .short-status-4h-text {
	 font-family: "Nunito Sans", sans-serif;
	 font-size: 14px;
	 font-weight: 500;
    }

    @media (min-width: 900px){
	 .container{ max-width: 960px; padding: 0 10px; margin: 0 auto; }
    }

    @media (min-width: 640px) {
	 #runRatebox {
	   flex-direction: row;
	   /* Side-by-side on sm and up */
	   justify-content: center;
	   align-items: flex-start;
	 }
    }


    /* ///////////////////////////////////////////////////////////////////   */
    /*-------------- chatGPTassistent  box ------------------*/
    /* 1. Base chat layout */
    #chat-box {
	 flex: 1;
	 position: relative;
	 width: 100%;
	 background-color: #f1f1f1cc;
	 /* Reduced margin for better layout */
	 margin-top: 10px;
	 margin-bottom: 20px;
	 padding: 10px;
	 min-height: 40svh;
	 /* Minimum height for initial content */
	 max-height: 55dvh;
	 max-height: calc(var(--vh) * 55);
	 /* Allow flexibility but limit overflow */
	 overflow-y: auto;
	 /* Enable scrolling when necessary */
	 border-radius: 10px;
	 /* Aesthetic touch */
	 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	 /* Subtle shadow for better visibility */
	 -webkit-overflow-scrolling: touch;
    }

    body.chat-open{
	 position: fixed;
	 width: 100%;
    }

    /* ---- Chat row + bubbles -------------------------------------------------- */
    /* 2. Assistant/user specific styling */
    #chat-box .message {
	 margin: 8px 0;
	 display: flex;
	 gap: .5rem;
    }

    #chat-box .message.user {
	 justify-content: flex-end;
    }

    /* Assistant rows stack: bubble first, then chips below */
    #chat-box .message.assistant {
	 flex-direction: column;
	 /* ⬅️ forces chips to be below the bubble */
	 align-items: flex-start;
	 gap: 8px;
    }

    #chat-box .message.assistant .text {
	 white-space: pre-line;
    }

    /* Bubble base */
    /* Base bubble (no animation state) */
    #chat-box .bubble {
	 padding: .6rem .8rem;
	 border-radius: 12px;
	 max-width: 80%;
	 box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
	 word-wrap: break-word;
	 overflow-wrap: anywhere;
    }

    /* Enter transition */
    #chat-box .bubble.enter {
	 opacity: 0;
	 transform: translateY(4px);
    }

    #chat-box .bubble.enter-active {
	 opacity: 1;
	 transform: translateY(0);
	 transition: opacity .25s ease, transform .25s ease;
    }

    /* Exit transition */
    #chat-box .bubble.exit-active {
	 opacity: 0 !important;
	 transform: translateY(-4px) !important;
	 transition: opacity .6s ease, transform .6s ease;
    }

    /* 3. 🎬 Fade-in animation for assistant bubbles (recommended location) */
    .message.assistant.bubble-fade-in {
	 opacity: 0;
	 transform: translateY(4px);
	 animation: omniBubbleFadeIn 0.30s ease-out forwards;
    }

    @keyframes omniBubbleFadeIn {
	 from {
	   opacity: 0;
	   transform: translateY(4px);
	 }

	 to {
	   opacity: 1;
	   transform: translateY(0);
	 }
    }

    /* Color + alignment */
    #chat-box .message {
	 display: flex;
	 margin: .35rem 0;
    }

    #chat-box .message.assistant {
	 justify-content: flex-start;
    }

    #chat-box .message.user {
	 justify-content: flex-end;
    }

    #chat-box .message.assistant .bubble {
	 background: #fbfbfb;
	 color: #0b1a2b;
    }

    #chat-box .message.assistant .bubble[data-name*="Reactive"] {
	 border-left: 4px solid #4b9;
    }

    #chat-box .message.assistant .bubble[data-name*="Hint"] {
	 border-left: 4px solid #9b4;
	 opacity: .95;
    }

    #chat-box .message.assistant .bubble[data-name*="Fallback"] {
	 border-left: 4px solid #d66;
    }

    #chat-box .message.assistant .bubble[data-name*="System"] {
	 border-left: 4px solid #888;
	 font-style: italic;
    }

    #chat-box .message.user .bubble {
	 background: #f3f4f6;
	 color: #0b1a2b;
    }

    /* use blue only for the name */
    #chat-box .message .who {
	 font-weight: 700;
	 margin-bottom: .15rem;
    }

    #chat-box .message.user .who {
	 color: #1637ff;
    }

    /* your blue */

    #chat-box .who {
	 font-weight: 400;
	 margin-bottom: 2px;
	 font-size: .9rem;
    }

    /* 4. Chips, banners, alert badges, etc. */
    /* Groups */
    #chat-box .message.assistant .quick-actions {
	 display: grid;
	 grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	 gap: 8px;
	 width: 100%;
	 margin: 8px 0;
	 overflow: visible;
	 /* allow glow outside */
    }

    /* Chips */
    #chat-box .message.assistant .quick-actions .chip {
	 position: relative;
	 isolation: isolate;
	 /* keep ::after behind content */
	 height: 44px;
	 padding: 0 12px;
	 border: 1px solid #e5e7eb;
	 border-radius: 12px;
	 background: #fbfbfb;
	 color: #0b1a2b;
	 box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
	 font: 500 14px/44px Inter, system-ui, Segoe UI, sans-serif;
	 text-align: center;
	 cursor: pointer;
	 transition: filter .15s ease, background-color .15s ease, transform .05s ease;
	 z-index: 0;
	 overflow: visible;
    }

    #chat-box .message.assistant .quick-actions .chip:hover {
	 filter: brightness(.98);
	 outline: 3px solid rgba(242, 120, 34, .5);
    }

    #chat-box .message.assistant .quick-actions .chip:active {
	 transform: translateY(1px);
    }

    #chat-box .message.assistant .quick-actions .chip:focus-visible {
	 outline-offset: 2px;
	 /* Safari-safe */
    }

    #chat-box .message.assistant .quick-actions .chip.is-selected {
	 background: rgba(240, 114, 42, .05);
	 /*border-color:rgba(107,22,76,.55);*/
    }

    #chat-box .message.assistant .quick-actions .chip[disabled] {
	 opacity: .6;
	 cursor: default;
    }

    /* Only chips with .chip-glow get the animated halo */
    #chat-box .message.assistant .qa .chip.chip-glow::after,
    #chat-box .message.assistant .quick-actions .chip.chip-glow::after {
	 content: "";
	 position: absolute;
	 inset: 0px;
	 /* -/+ halo outside/inside the chip */
	 border-radius: 9999px;
	 pointer-events: none;
	 z-index: -1;
	 box-shadow: 0 0 6px 2px rgba(107, 22, 76, .7);
	 animation:
	   chipGlowColors 1.6s linear infinite,
	   chipGlowPulse 800ms ease-in-out infinite alternate;
    }

    /* Compact row for Yes/No */
    #chat-box .message.assistant .quick-actions.compact {
	 display: flex;
	 flex-wrap: wrap;
	 gap: 6px;
	 justify-content: flex-start;
	 margin-top: 4px;
	 width: auto;
    }

    #chat-box .message.assistant .quick-actions.compact .chip {
	 min-height: 26px;
	 height: 26px;
	 padding: 4px 12px;
	 font-size: 12.5px;
	 line-height: 18px;
	 border-radius: 8px;
    }

    /* Stale state */
    #chat-box .message.assistant .qa.qa-stale .chip,
    #chat-box .message.assistant .quick-actions.qa-stale .chip {
	 background: rgba(240, 114, 42, .05);
	 border-color: rgba(107, 22, 76, 1);
    }

    /* Animations */
    @keyframes chipGlowPulse {
	 from {
	   transform: scale(1)
	 }

	 to {
	   transform: scale(1.03)
	 }
    }

    @keyframes chipGlowColors {
	 0% {
	   box-shadow: 0 0 4px 2px rgba(242, 120, 34, 1)
	 }

	 12.5% {
	   box-shadow: 0 0 4px 2px rgba(236, 97, 68, .85)
	 }

	 25% {
	   box-shadow: 0 0 4px 2px rgba(173, 57, 77, .85)
	 }

	 37.5% {
	   box-shadow: 0 0 4px 2px rgba(115, 26, 76, .95)
	 }

	 50% {
	   box-shadow: 0 0 4px 2px rgba(107, 22, 76, 1)
	 }

	 62.5% {
	   box-shadow: 0 0 4px 2px rgba(115, 26, 76, .95)
	 }

	 75% {
	   box-shadow: 0 0 4px 2px rgba(173, 57, 77, .85)
	 }

	 82.5% {
	   box-shadow: 0 0 4px 2px rgba(236, 97, 68, .85)
	 }

	 100% {
	   box-shadow: 0 0 4px 2px rgba(242, 120, 34, 1)
	 }
    }

    @media (prefers-reduced-motion: reduce) {
	 #chat-box .message.assistant .quick-actions .chip.chip-glow::after {
	   animation: none;
	 }
    }

    .input-area {
	 display: flex;
	 flex-direction: column;
	 width: 100%;
    }

    #user-input {
	 width: 100%;
	 box-sizing: border-box;
	 margin-bottom: 10px;
	 padding: 10px;
	 font-size: 1rem;
	 border-radius: 4px;
	 /* Aesthetic touch */
    }

    textarea {
	 display: block;
	 margin: 10px 0;
	 width: 100%;
	 min-height: 50px;
	 max-height: 300px;
	 /* Maximum height */
	 overflow: hidden;
	 /* Hide overflow when content exceeds max height */
	 resize: none;
	 /* Prevent manual resizing */
    }

    .transcript span {
	 font-weight: 400;
	 color: black;
    }

    .transcript span.bold {
	 font-weight: 700;
	 color: #e88135;
    }

    .button-container {
	 display: flex;
	 justify-content: space-between;
	 gap: 5px;
    }

    .message {
	 margin-bottom: 10px;
    }

    /* Make the inner wrapper the flex row */
    .message.assistant.queued-hint.is-waiting>div {
	 display: flex;
	 align-items: center;
	 gap: 6px;
    }

    /* Spinner */
    .message.assistant.queued-hint .icon.spinner {
	 width: 14px;
	 height: 14px;
	 border: 2px solid currentColor;
	 border-right-color: transparent;
	 border-radius: 50%;
	 animation: spin .9s linear infinite;
    }

    /* Text bits */
    .message.assistant.queued-hint .event {
	 font-weight: 600;
	 margin-right: 4px;
    }

    /*
	 :root {
	   /* safe default pill fill, so var() is never invalid */
    /* --pill-fill: linear-gradient(105deg, hsl(30, 100%, 55%), hsl(29, 69%, 53%), hsl(346, 100%, 72%), hsl(242, 51%, 61%));
	 }
	 */

    /* pill styling */
    .message.assistant.queued-hint .count-pill {
	 position: relative;
	 /* nodig voor ::after glow */
	 border: 1px solid hsl(220, 13%, 91%);
	 border-radius: 9999px;
	 padding: 2px 8px;
	 font-size: 11px;
	 line-height: 1.2;
	 cursor: pointer;
	 white-space: nowrap;

	 background-color: white;
	 /* fallback */
	 background-image: var(--pill-fill, var(--pill-fill-default));
	 background-size: 100% 100%;
	 background-repeat: no-repeat;

	 color: #6b164c;
	 font-weight: 600;
	 margin-left: 6px;
    }

    .message.assistant.queued-hint .count-pill:hover {
	 background: hsla(322, 66%, 25%, 0.2);
    }

    .message.assistant.queued-hint .count-pill:focus-visible {
	 outline: 2px solid hsla(322, 66%, 25%, 0.7);
	 outline-offset: 2px;
    }

    /* reuse your chip glow on the pill */
    #chat-box .message.assistant.queued-hint .count-pill.chip-glow::after {
	 content: "";
	 position: absolute;
	 inset: -4px;
	 border-radius: 9999px;
	 pointer-events: none;
	 z-index: -1;
	 box-shadow: 0 0 12px 4px hsla(322, 66%, 25%, 0.7);
	 animation:
	   chipGlowColors 1.6s linear infinite,
	   chipGlowPulse 800ms ease-in-out infinite alternate;
    }

    /* Remove any accidental parentheses coming from global styles */
    .message.assistant.queued-hint .text::before,
    .message.assistant.queued-hint .text::after {
	 content: none !important;
    }

    @keyframes spin {
	 to {
	   transform: rotate(360deg);
	 }
    }

    .typing::after {
	 content: '...';
	 display: inline-block;
	 overflow: hidden;
	 vertical-align: bottom;
	 width: 0ch;
	 animation: dots 1.2s steps(4, end) infinite;
    }

    @keyframes dots {

	 0%,
	 20% {
	   content: '';
	 }

	 40% {
	   content: '.';
	 }

	 60% {
	   content: '..';
	 }

	 80%,
	 100% {
	   content: '...';
	 }
    }

    #mic-button {
	 width: 50px;
	 height: 50px;
	 fill: grey;
	 /* Default color */
	 border: none;
	 border-radius: 50%;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 cursor: pointer;
	 /* Reactive extras */
	 --mic-level: 0;
	 /* 0..1 pushed from JS */
	 transform: scale(calc(1 + var(--mic-level) * 0.35));
	 filter: drop-shadow(0 0 calc(10px * var(--mic-level)) rgba(255, 0, 0, 0.55));
	 will-change: transform, filter;
    }

    #mic-button.recording {
	 fill: red;
    }

    #mic-button.stopped {
	 fill: rgb(151, 151, 151);
    }

    #mic-status {
	 margin-top: 20px;
	 fill: rgb(232, 129, 53);
    }

    #rec-button.listening {
	 background: #fff7ed;
	 color: #9a3412;
    }

    #rec-button.processing {
	 background: #f0f9ff;
	 color: #075985;
    }

    #rec-button.speaking {
	 background: #ecfdf5;
	 color: #065f46;
    }

    #rec-button.error {
	 background: #fef2f2;
	 color: #991b1b;
    }

    .unsupported-browser {
	 position: fixed;
	 top: 0;
	 left: 0;
	 right: 0;
	 padding: 10px 14px;
	 background: #fee2e2;
	 color: #7f1d1d;
	 text-align: center;
	 font: 600 13px system-ui, sans-serif;
	 border-bottom: 1px solid #fecaca;
    }

    #mic-button .glow {
	 filter: url(#mic-glow);
    }

    #mic-button:not(.mic-flash) .glow {
	 filter: none;
    }

    #mic-status {
	 margin-top: 20px;
	 color: red;
    }

    #mic-button.recording.mic-flash {
	 display: inline-block;
	 /* Important */
	 transform-origin: center center;
	 /* Critical */
	 animation: flash 1.5s infinite;
    }

    #mic-button.recording.mic-flash-fast {
	 display: inline-block;
	 /* Important */
	 transform-origin: center center;
	 /* Critical */
	 animation: pulse 0.5s infinite;
    }

    @keyframes pulse {
	 0% {
	   transform: scale(1);
	 }

	 50% {
	   transform: scale(.8);
	 }

	 100% {
	   transform: scale(1);
	 }
    }

    @keyframes flash {
	 0% {
	   fill: red;
	 }

	 50% {
	   fill: darkred;
	 }

	 100% {
	   fill: red;
	 }
    }

    /* /////////////////////////////////////////////////// */
    /*-------------- MCRS brain wave ------------------
	 .block-2 {
	   background-color: rgba(46, 204, 113, 0);
	   flex: 1 1 66.67%;
	   position: relative;
	 }

	 #particlesCanvas {
	   position: absolute;
	   top: 0;
	   left: 0;
	   width: 100%;
	   height: 100%;
	 }*/

    .svg-container {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 pointer-events: none;
	 /* To make sure it doesn't block interactions */
    }

    /* ////////////////////////////////////// */
    /*-------------- STARS ------------------

	   $yellow: #fc0;
	   $yellow-bright: #fd0;
	   $grey-light: #ccc;
	   $grey: #bbb;

	   */

    .row {
	 overflow: auto;
	 clear: both;
    }

    .rating {
	 float: left;
	 border: 1px solid green;
	 color: green;
	 margin: 1em;
	 padding: .75em 1em;
    }

    .rating label {
	 width: 2em;
    }

    /* :not(:checked) is a filter, so that browsers that don’t support :checked don’t
	   //   follow these rules. Every browser that supports :checked also supports :not(), so
	   //   it doesn’t make the test unnecessarily selective */
    .rating:not(:checked)>input {
	 position: absolute;
	 top: -9999px;
	 clip: rect(0, 0, 0, 0);
    }

    .rating:not(:checked)>label {
	 float: right;
	 width: 2em;
	 padding: 0 .1em;
	 overflow: hidden;
	 white-space: nowrap;
	 cursor: pointer;
	 line-height: 1.2;
    }

    .icon-star {
	 width: 2em;
	 height: 2em;
	 fill: #ccc;
	 transition: all .3s;
	 pointer-events: none;
    }

    .rating>input:checked~label .icon-star {
	 fill: #e88135;
    }

    .rating:not(:checked)>label:hover .icon-star,
    .rating:not(:checked)>label:hover~label .icon-star {
	 fill: #bbb;
    }

    .rating>input:checked+label:hover .icon-star,
    .rating>input:checked+label:hover~label .icon-star,
    .rating>input:checked~label:hover .icon-star,
    .rating>input:checked~label:hover~label .icon-star,
    .rating>label:hover~input:checked~label .icon-star {
	 fill: #e88135;
    }

    .rating>label:active {
	 position: relative;
	 top: 1px;
	 left: 1px;
    }

    table,
    tr {
	 cursor: pointer;
	 color: green
    }

    table tr:hover {
	 font-weight: bold;
    }

    /* Selected row styling */
    table tr.selected {
	 font-weight: bold;
	 color: #e88135;
    }

    table,
    ul {
	 color: black;
    }

    /* Button styling */
    .action-button {
	 width: 100%;
	 padding: 0.5rem 1rem;
	 text-align: left;
	 border: none;
	 border-radius: 0.5rem;
	 font-size: 1rem;
	 cursor: pointer;
	 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	 transition: background-color 0.2s ease;
    }

    .action-button.bg-blue {
	 background-color: #bfdbfe;
    }

    .root_cause-flag.false,
    .machine-flag.false,
    .module-flag.false {
	 color: red;
    }

    .root_cause-flag.true,
    .machine-flag.true,
    .module-flag.true {
	 color: #e88135;
    }

    /* 1) Always fit to viewport width */
    #omni-panel{
	 width: 100% !important;
	 max-width: 100% !important;
	 box-sizing: border-box !important;
	 margin: 0 !important;
	 border-radius: 0 !important;      /* optional: better edge-to-edge on mobile */
	 padding: 12px !important;         /* adjust */
    }

    /* 2) If you want constrained width on desktop only */
    @media (min-width: 900px){
	 #omni-panel{
	   max-width: 960px !important;
	   margin: 0 auto !important;
	   border-radius: 16px !important;
	 }
    }