/* UnioUI answer components on the current theme tokens. Overrides the old dark-only rules in legacy-ui.css. */
html[data-theme] .message.assistant .bubble .unio-ui {
  margin: 18px 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--panel); color: var(--text); box-shadow: none; overflow: hidden;
}
html[data-theme] .unio-ui h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text); }
html[data-theme] .unio-ui p { margin: 6px 0 0; font-size: 14px; line-height: 1.65; color: var(--text); }
html[data-theme] .unio-ui :is(.ui-description, .ui-subtitle) { color: var(--muted); font-size: 13px; }
html[data-theme] .unio-ui .ui-note { margin-top: 10px; color: var(--faint); font-size: 12px; }
html[data-theme] .unio-ui .ui-pill { display: inline-block; margin-bottom: 6px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel2); color: var(--muted); font-size: 11px; font-weight: 550; }
html[data-theme] .unio-ui button { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-size: 13px; padding: 8px 12px; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s; }
html[data-theme] .unio-ui button:hover:not(:disabled) { background: var(--panel2); border-color: var(--line2); }
html[data-theme] .unio-ui :is(button.ui-primary, [data-ui-option][aria-pressed="true"], [data-ui-tab][aria-selected="true"]) { background: var(--accent-soft); border-color: var(--accent); color: var(--text); }
html[data-theme] .unio-ui .ui-result { margin-top: 8px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; }
html[data-theme] .unio-ui .ui-send { display: block; width: 100%; margin-top: 14px; padding: 11px 16px; border: 0; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; }
html[data-theme] .unio-ui .ui-send:hover:not(:disabled) { background: var(--text); opacity: .88; }
html[data-theme] .unio-ui .ui-send:disabled { opacity: .45; cursor: default; }
html[data-theme] .unio-ui.ui-submitted { opacity: .72; }

/* Questions form */
html[data-theme] .unio-ui .ui-questions { display: grid; gap: 14px; margin-top: 10px; }
html[data-theme] .unio-ui .ui-question { margin: 0; padding: 0 0 12px; border: 0; border-bottom: 1px solid var(--line); }
html[data-theme] .unio-ui .ui-question:last-child { border-bottom: 0; padding-bottom: 0; }
html[data-theme] .unio-ui .ui-question legend { padding: 0; margin-bottom: 8px; color: var(--muted); font-size: 13px; }
html[data-theme] .unio-ui .ui-choice { display: flex; align-items: center; gap: 10px; padding: 6px 2px; font-size: 14px; color: var(--text); cursor: pointer; }
html[data-theme] .unio-ui .ui-choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--text); flex: none; }
html[data-theme] .unio-ui .ui-other { width: 100%; margin-top: 6px; padding: 9px 12px; border: 1px solid var(--line2); border-radius: 10px; background: var(--field, var(--panel)); color: var(--text); font: inherit; font-size: 14px; }

/* Fact / entity cards */
html[data-theme] .unio-ui .ui-info { display: flex; gap: 16px; align-items: flex-start; }
html[data-theme] .unio-ui .ui-info > .ui-media { flex: 0 0 132px; }
html[data-theme] .unio-ui .ui-info-body { min-width: 0; flex: 1; }
html[data-theme] .unio-ui .ui-fields { display: grid; gap: 6px; margin: 10px 0 0; }
html[data-theme] .unio-ui .ui-fields div { display: grid; grid-template-columns: minmax(96px, 34%) 1fr; gap: 12px; font-size: 13px; line-height: 1.5; }
html[data-theme] .unio-ui .ui-fields dt { color: var(--muted); }
html[data-theme] .unio-ui .ui-fields dd { margin: 0; color: var(--text); }
html[data-theme] .unio-ui .ui-link { display: inline-block; margin-top: 10px; color: var(--accent-strong, var(--text)); font-size: 13px; font-weight: 550; text-decoration: none; }
html[data-theme] .unio-ui .ui-link:hover { text-decoration: underline; text-underline-offset: 3px; }
html[data-theme] .unio-ui .ui-entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 10px; }
html[data-theme] .unio-ui .ui-entity { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; text-align: left; color: var(--text); }
html[data-theme] .unio-ui button.ui-entity:hover:not(:disabled) { border-color: var(--line2); transform: translateY(-1px); }
html[data-theme] .unio-ui .ui-entity .ui-media img { aspect-ratio: 16 / 10; border-radius: 0; }
html[data-theme] .unio-ui .ui-entity-body { display: flex; flex-direction: column; gap: 3px; padding: 12px; }
html[data-theme] .unio-ui .ui-entity-title { font-size: 14px; font-weight: 600; line-height: 1.4; }
html[data-theme] .unio-ui .ui-entity-subtitle { color: var(--muted); font-size: 12px; }
html[data-theme] .unio-ui .ui-entity-text { color: var(--text); font-size: 13px; line-height: 1.55; margin-top: 4px; }

/* Images: gallery grid and horizontally scrolling carousel */
html[data-theme] .unio-ui .ui-media { margin: 0; }
html[data-theme] .unio-ui .ui-media img { display: block; width: 100%; height: auto; max-height: 360px; object-fit: cover; border-radius: 10px; background: var(--panel2); }
html[data-theme] .unio-ui .ui-media figcaption { margin-top: 6px; color: var(--muted); font-size: 12px; line-height: 1.45; }
html[data-theme] .unio-ui .ui-media figcaption .ui-link { margin-top: 0; font-size: 12px; }
html[data-theme] .unio-ui .ui-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
html[data-theme] .unio-ui .ui-gallery img { aspect-ratio: 4 / 3; }
html[data-theme] .unio-ui .ui-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 72%); gap: 12px; margin-top: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: thin; }
html[data-theme] .unio-ui .ui-carousel > * { scroll-snap-align: start; }
html[data-theme] .unio-ui .ui-carousel img { aspect-ratio: 16 / 10; }

/* Stats */
html[data-theme] .unio-ui .ui-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 10px; }
html[data-theme] .unio-ui .ui-stat { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); }
html[data-theme] .unio-ui .ui-stat b { display: block; font-size: 22px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
html[data-theme] .unio-ui .ui-stat span { color: var(--muted); font-size: 12px; }
html[data-theme] .unio-ui .ui-change { display: block; margin-top: 2px; color: var(--accent-strong, var(--muted)); font-size: 12px; }

/* Charts follow the theme instead of hard-coded dark colors */
html[data-theme] .unio-ui .ui-svg-chart { margin-top: 10px; }
html[data-theme] .unio-ui .ui-bar-chart { padding: 4px 0 0 !important; background: transparent; border: 0; border-radius: 0; }
html[data-theme] .unio-ui .ui-svg-bar:is(:hover, :focus) rect { filter: none; stroke: none; }
html[data-theme] .unio-ui .ui-svg-bar:focus .ui-bar-value { fill: var(--text); }
html[data-theme] .unio-ui .ui-chart-data { margin-top: 8px !important; }
html[data-theme] .unio-ui .ui-svg-chart svg { width: 100%; height: auto; display: block; }
html[data-theme] .unio-ui .ui-svg-chart line { stroke: var(--line); stroke-opacity: 1; }
html[data-theme] .unio-ui .ui-svg-chart text { fill: var(--muted); }
html[data-theme] .unio-ui { --ui-chart: #4f86f7; }
html[data-theme] .unio-ui .ui-svg-bar rect { fill: var(--ui-chart); }
html[data-theme] .unio-ui .ui-svg-bar:is(:hover, :focus) rect { fill: #3b6fe0; }
html[data-theme] .unio-ui .ui-svg-bar .ui-bar-value { fill: var(--text); }
html[data-theme] .unio-ui .ui-svg-chart path { stroke: var(--ui-chart); }
html[data-theme] .unio-ui .ui-svg-chart circle { fill: var(--ui-chart); stroke: var(--panel); }
html[data-theme] .unio-ui .ui-chart-data { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; color: var(--muted); font-size: 12px; }
html[data-theme] .unio-ui .ui-chart-data b { color: var(--text); font-weight: 600; }

/* Tables, checklists and inputs inherit the same surface */
html[data-theme] .unio-ui :is(th, td) { border-color: var(--line); }
html[data-theme] .unio-ui th { background: var(--panel2); color: var(--text); }
html[data-theme] .unio-ui .ui-field :is(input, select) { border: 1px solid var(--line2); border-radius: 10px; background: var(--field, var(--panel)); color: var(--text); }
html[data-theme] .unio-ui :is(.ui-task-fill, .ui-track > div) { background: var(--accent); }

/* Task list: legacy rules are !important inside @layer legacy, and a layered !important beats an unlayered one,
   so these overrides live in the same layer (later + more specific wins there). */
@layer legacy {
html[data-theme] .message.assistant .bubble .unio-ui.ui-task-list { max-width: none; margin: 18px 0 !important; padding: 16px 18px !important; background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: 14px !important; }
html[data-theme] .ui-task-list .ui-task-head h3 { font-size: 15px !important; font-weight: 600 !important; color: var(--text); }
html[data-theme] .ui-task-list .ui-task-head .ui-description { color: var(--muted) !important; }
html[data-theme] .ui-task-list .ui-task-count { color: var(--text); background: var(--panel2); border: 1px solid var(--line); }
html[data-theme] .ui-task-list .ui-task-track { height: 6px; background: var(--soft); margin: 14px 0 6px; }
html[data-theme] .ui-task-list .ui-task-fill { background: var(--accent); }
html[data-theme] .ui-task-list .ui-task-percent { color: var(--muted); margin-bottom: 8px; }
html[data-theme] .ui-task-list .ui-checks.ui-task-items { border-top: 1px solid var(--line); }
html[data-theme] .ui-task-list .ui-checks.ui-task-items label { min-height: 44px !important; border-bottom: 1px solid var(--line) !important; color: var(--text); }
html[data-theme] .ui-task-list .ui-checks.ui-task-items label:hover { background: var(--panel2) !important; }
html[data-theme] .ui-task-list .ui-checks.ui-task-items input { accent-color: var(--text) !important; }
html[data-theme] .ui-task-list .ui-checks.ui-task-items input:checked + span { color: var(--muted) !important; text-decoration-color: var(--muted); }
html[data-theme] .ui-task-list .ui-task-finish { background: var(--accent-soft); color: var(--text); }

}

/* Streaming placeholder while a component block is still arriving */
html[data-theme] .message.assistant .bubble .unio-ui.ui-pending { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
html[data-theme] .unio-ui.ui-pending span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: ui-pending 1.2s ease-in-out infinite; }
@keyframes ui-pending { 50% { opacity: .35; transform: scale(.7); } }

@media (max-width: 600px) {
  html[data-theme] .message.assistant .bubble .unio-ui { padding: 14px; }
  html[data-theme] .unio-ui .ui-info { flex-direction: column; }
  html[data-theme] .unio-ui .ui-info > .ui-media { flex-basis: auto; width: 100%; }
  html[data-theme] .unio-ui .ui-carousel { grid-auto-columns: 84%; }
}
@media (prefers-reduced-motion: reduce) { html[data-theme] .unio-ui.ui-pending span { animation: none; } }

/* Inline source chips in search answers and the live search status line. */
html[data-theme] .message.assistant .bubble a.cite-chip { display:inline-flex; align-items:center; max-width:180px; margin:0 0 0 4px; padding:1px 8px; border-radius:999px; background:var(--soft); color:var(--muted); font-size:12px; line-height:18px; font-weight:500; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; vertical-align:baseline; border:0; }
html[data-theme] .message.assistant .bubble a.cite-chip:hover { background:var(--panel2); color:var(--text); }

/* Calculator: inputs on the left, live results on the right; stacks on phones. */
html[data-theme] .message.assistant .bubble .ui-calculator .ui-calc-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:20px; align-items:start; }
.ui-calc-inputs { display:flex; flex-direction:column; gap:14px; }
.ui-calc-input { display:flex; flex-direction:column; gap:6px; margin:0; font-size:13px; color:var(--text); }
.ui-calc-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.ui-calc-label { color:var(--muted); font-weight:500; }
.ui-calc-row output { font-weight:600; font-variant-numeric:tabular-nums; color:var(--text); }
.ui-calc-row small { color:var(--muted); }
html[data-theme] .message.assistant .bubble .ui-calc-input input[type=range] { width:100%; accent-color:var(--accent,var(--text)); margin:0; }
html[data-theme] .message.assistant .bubble .ui-calc-input :is(input[type=number],select) { width:100%; min-height:36px; padding:6px 10px; border:1px solid var(--line2,var(--line)); border-radius:6px; background:var(--field,var(--bg)); color:var(--text); font:inherit; }
.ui-calc-toggle { flex-direction:row; justify-content:space-between; align-items:center; }
.ui-calc-toggle input { width:18px; height:18px; accent-color:var(--accent,var(--text)); }
.ui-calc-outputs { display:flex; flex-direction:column; gap:8px; }
.ui-calc-output { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:8px; background:var(--soft); }
.ui-calc-output span { font-size:12px; color:var(--muted); }
.ui-calc-output b { font-size:18px; font-weight:650; font-variant-numeric:tabular-nums; color:var(--text); overflow-wrap:anywhere; }
.ui-calc-primary b { font-size:26px; }
.ui-calc-chart { margin:16px 0 0; }
.ui-calc-chart figcaption { font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text); }
.ui-calc-svg { width:100%; height:auto; display:block; }
.ui-calc-grid-line { stroke:var(--line); stroke-width:1; }
.ui-calc-axis { fill:var(--muted); font-size:13px; }
.ui-calc-svg polyline { stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.ui-calc-svg polyline.ui-calc-s0 { stroke:var(--ui-chart,#4f86f7); } .ui-calc-svg rect.ui-calc-s0, .ui-calc-legend i.ui-calc-s0 { fill:var(--ui-chart,#4f86f7); background:var(--ui-chart,#4f86f7); }
.ui-calc-svg polyline.ui-calc-s1 { stroke:#e2934b; } .ui-calc-svg rect.ui-calc-s1, .ui-calc-legend i.ui-calc-s1 { fill:#e2934b; background:#e2934b; }
.ui-calc-svg polyline.ui-calc-s2 { stroke:#3fa37a; } .ui-calc-svg rect.ui-calc-s2, .ui-calc-legend i.ui-calc-s2 { fill:#3fa37a; background:#3fa37a; }
.ui-calc-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:6px; font-size:12px; color:var(--muted); }
.ui-calc-legend span { display:inline-flex; align-items:center; gap:6px; }
.ui-calc-legend i { width:10px; height:10px; border-radius:2px; display:inline-block; }
.ui-calc-xlabel { margin-left:auto; }
.ui-calc-actions { display:flex; justify-content:flex-end; align-items:center; gap:8px; margin-top:14px; }
html[data-theme] .message.assistant .bubble .ui-calc-actions .ui-send { width:auto; margin:0; }
.ui-calc-reset { border:1px solid var(--line); background:transparent; color:var(--muted); border-radius:6px; padding:7px 12px; font:inherit; font-size:13px; cursor:pointer; }
.ui-calc-reset:hover { color:var(--text); background:var(--soft); }
@media (max-width:640px) { html[data-theme] .message.assistant .bubble .ui-calculator .ui-calc-grid { grid-template-columns:1fr; } }

/* Mini-app: a sandboxed frame with a slim header. */
html[data-theme] .message.assistant .bubble .ui-app { padding:0; overflow:hidden; }
.ui-app-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; border-bottom:1px solid var(--line); font-size:13px; font-weight:600; color:var(--text); }
.ui-app-head button { border:0; background:transparent; color:var(--muted); font-size:16px; line-height:1; padding:4px 6px; border-radius:6px; cursor:pointer; }
.ui-app-head button:hover { background:var(--soft); color:var(--text); }
.ui-app-frame { display:block; width:100%; height:320px; border:0; background:transparent; }
.ui-app-pending, .ui-image-loading { padding:16px; color:var(--muted); font-size:13px; }
.ui-app-error { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.ui-app-error code { font-size:11px; overflow-wrap:anywhere; }
.ui-app-error button { flex:0 0 auto; border:1px solid var(--line); background:var(--soft); color:var(--text); border-radius:6px; padding:5px 10px; font:inherit; cursor:pointer; }

/* Thinking models: live "Thinking… Ns" preview and a collapsed "Thought for Ns" above the answer. */
html[data-theme] .message.assistant .bubble details.thought { margin:0 0 10px; border:0; padding:0; background:transparent; }
html[data-theme] .message.assistant .bubble details.thought > summary { display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none; font-size:13px; color:var(--muted); padding:2px 0; }
html[data-theme] .message.assistant .bubble details.thought > summary::-webkit-details-marker { display:none; }
html[data-theme] .message.assistant .bubble details.thought > summary::after { content:"›"; transition:transform .15s ease; }
html[data-theme] .message.assistant .bubble details.thought[open] > summary::after { transform:rotate(90deg); }
.thought-text { margin:6px 0 0; padding:8px 0 8px 12px; border-left:2px solid var(--line); font-size:13px; line-height:1.55; color:var(--muted); white-space:pre-wrap; max-height:320px; overflow:auto; }

/* Live answer status (search, thinking): one persistent line with a soft shimmer, cross-faded stages,
   staggered chips and a fading two-line preview of the model's reasoning. */
.ai-status { display:flex; flex-direction:column; gap:8px; padding:2px 0 4px; animation:ai-fade-in .3s ease both; }
.ai-status-line { display:flex; align-items:center; gap:10px; min-height:22px; }
.ai-status-dot { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:var(--text); animation:ai-dot 1.8s ease-in-out infinite; }
.ai-status-text { display:inline-flex; align-items:baseline; gap:8px; }
.ai-status-text.ai-swap { animation:ai-swap .35s cubic-bezier(.2,.7,.2,1) both; }
.ai-status-label { font-size:14px; font-weight:500; color:var(--muted); background:linear-gradient(90deg,var(--muted) 0%,var(--muted) 35%,var(--text) 50%,var(--muted) 65%,var(--muted) 100%); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:ai-shimmer 2.4s linear infinite; }
.ai-status-time { font-size:13px; color:var(--muted); opacity:.75; font-variant-numeric:tabular-nums; }
.ai-status-detail { padding-left:17px; }
.ai-status-detail:empty { display:none; }
.ai-status-detail.ai-detail-in { animation:ai-fade-up .35s ease both; }
.ai-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ai-chip { max-width:100%; padding:3px 10px; border-radius:999px; background:var(--soft); color:var(--muted); font-size:12px; line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; animation:ai-chip-in .32s ease both; animation-delay:calc(var(--i,0) * 70ms); }
.ai-chip-query { border-radius:6px; color:var(--text); }
.ai-chip-kept { animation:none; }
.ai-preview { display:flex; flex-direction:column; justify-content:flex-end; max-height:3em; overflow:hidden; font-size:13px; line-height:1.5; color:var(--muted); -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 75%); mask-image:linear-gradient(to bottom,transparent 0,#000 75%); }
.message.assistant.streaming { animation:ai-fade-in .25s ease both; }
@keyframes ai-shimmer { from { background-position:100% 0; } to { background-position:0 0; } }
@keyframes ai-dot { 0%,100% { transform:scale(.75); opacity:.3; } 50% { transform:scale(1); opacity:.75; } }
@keyframes ai-swap { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
@keyframes ai-fade-up { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes ai-chip-in { from { opacity:0; transform:translateY(4px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes ai-fade-in { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .ai-status, .ai-status *, .message.assistant.streaming { animation:none !important; } .ai-status-label { background:none; -webkit-text-fill-color:currentColor; } }
/* UnioUI Plus (unio-ui-plus.js): charts with several series, maps, live widgets, learning and structure blocks. */
.unio-ui { --ui-s0:var(--ui-chart,#4f86f7); --ui-s1:#e2934b; --ui-s2:#3fa37a; --ui-s3:#a46ad9; --ui-s4:#d65a7a; --ui-s5:#2f9fb4; }
.ui-plus-chart { margin-top:10px; }
.ui-plus-chart svg { width:100%; height:auto; display:block; }
.ui-plus-chart .ui-axis line { stroke:var(--line); }
.ui-plus-chart text { fill:var(--muted); font-size:12px; }
.ui-plus-chart .ui-axis-title { fill:var(--text); font-size:12px; font-weight:550; }
.ui-plus-chart :is(rect,circle).ui-s0 { fill:var(--ui-s0); } .ui-plus-chart :is(rect,circle).ui-s1 { fill:var(--ui-s1); } .ui-plus-chart :is(rect,circle).ui-s2 { fill:var(--ui-s2); }
.ui-plus-chart :is(rect,circle).ui-s3 { fill:var(--ui-s3); } .ui-plus-chart :is(rect,circle).ui-s4 { fill:var(--ui-s4); } .ui-plus-chart :is(rect,circle).ui-s5 { fill:var(--ui-s5); }
.ui-plus-chart .ui-line { stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.ui-plus-chart .ui-line.ui-s0 { stroke:var(--ui-s0); } .ui-plus-chart .ui-line.ui-s1 { stroke:var(--ui-s1); } .ui-plus-chart .ui-line.ui-s2 { stroke:var(--ui-s2); }
.ui-plus-chart .ui-line.ui-s3 { stroke:var(--ui-s3); } .ui-plus-chart .ui-line.ui-s4 { stroke:var(--ui-s4); } .ui-plus-chart .ui-line.ui-s5 { stroke:var(--ui-s5); }
.ui-plus-chart .ui-area { opacity:.14; stroke:none; }
.ui-plus-chart .ui-area.ui-s0 { fill:var(--ui-s0); } .ui-plus-chart .ui-area.ui-s1 { fill:var(--ui-s1); } .ui-plus-chart .ui-area.ui-s2 { fill:var(--ui-s2); }
.ui-plus-chart circle { stroke:var(--panel); stroke-width:1.5; }
.ui-plus-chart .ui-ref-line { stroke:var(--muted); stroke-dasharray:5 4; stroke-width:1.2; }
.ui-plus-chart .ui-ref-label { fill:var(--muted); font-size:11px; }
.ui-plus-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:8px; font-size:12px; color:var(--muted); }
.ui-plus-legend span { display:inline-flex; align-items:center; gap:6px; }
.ui-plus-legend i { width:10px; height:10px; border-radius:2px; display:inline-block; }
.ui-plus-legend i.ui-s0 { background:var(--ui-s0); } .ui-plus-legend i.ui-s1 { background:var(--ui-s1); } .ui-plus-legend i.ui-s2 { background:var(--ui-s2); }
.ui-plus-legend i.ui-s3 { background:var(--ui-s3); } .ui-plus-legend i.ui-s4 { background:var(--ui-s4); } .ui-plus-legend i.ui-s5 { background:var(--ui-s5); }
.ui-chart-table { margin-top:8px; font-size:13px; }
.ui-chart-table summary { cursor:pointer; color:var(--muted); font-size:12px; }
.ui-chart-table table { margin-top:6px; }
/* Tables: sticky header, marked rows, group headings. */
html[data-theme] .unio-ui .ui-table-sticky { max-height:460px; overflow:auto; }
html[data-theme] .unio-ui .ui-table-sticky thead th { position:sticky; top:0; background:var(--panel); z-index:1; }
html[data-theme] .unio-ui tr.ui-row-mark td { background:var(--accent-soft,var(--soft)); }
html[data-theme] .unio-ui tr.ui-row-group th { text-align:left; background:var(--panel2); color:var(--muted); font-size:12px; font-weight:600; }
html[data-theme] .unio-ui mark, .message.assistant .bubble mark { background:color-mix(in srgb,#f2c94c 45%,transparent); color:inherit; border-radius:3px; padding:0 2px; }
html[data-theme] .unio-ui .ui-mosaic { grid-template-columns:repeat(4,1fr); grid-auto-rows:120px; grid-auto-flow:dense; }
html[data-theme] .unio-ui .ui-mosaic .ui-media img { height:100%; aspect-ratio:auto; max-height:none; }
html[data-theme] .unio-ui .ui-mosaic > :nth-child(5n+1) { grid-column:span 2; grid-row:span 2; }
html[data-theme] .unio-ui .ui-form textarea, html[data-theme] .unio-ui .ui-form select { width:100%; font:inherit; }
/* Map */
.ui-map-canvas { position:relative; height:320px; margin-top:10px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--panel2); z-index:0; }
.ui-map-status { padding:16px; color:var(--muted); font-size:13px; }
.ui-map-pin span { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--ui-chart,#4f86f7); color:#fff; font:600 12px/1 system-ui,sans-serif; border:2px solid #fff; box-shadow:0 1px 4px #0004; }
.ui-map-summary { margin-top:8px; font-size:13px; font-weight:550; color:var(--text); }
.ui-map-list { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px; }
.ui-map-list li { display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5; }
.ui-map-list li > div { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.ui-map-list li span:not(.ui-map-num) { color:var(--muted); }
.ui-map-list li.ui-map-missing { opacity:.55; }
.ui-map-num { flex:0 0 22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--soft); color:var(--text); font-size:11px; font-weight:600; }
/* Weather, currency, clock */
.ui-weather-now { display:flex; align-items:center; gap:14px; margin-top:8px; }
.ui-weather-icon { font-size:40px; line-height:1; }
.ui-weather-now b { display:block; font-size:32px; font-weight:650; line-height:1.1; }
.ui-weather-now span:not(.ui-weather-icon) { display:block; font-size:13px; color:var(--text); }
.ui-weather-now small { display:block; font-size:12px; color:var(--muted); }
.ui-weather-days { display:grid; grid-template-columns:repeat(auto-fit,minmax(70px,1fr)); gap:6px; margin-top:12px; }
.ui-weather-days > div { display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; border-radius:10px; background:var(--panel2); font-size:12px; }
.ui-weather-days i { font-style:normal; font-size:20px; }
.ui-weather-days small { color:var(--muted); }
.ui-weather-days em { font-style:normal; font-size:11px; color:var(--ui-s0); }
.ui-fx-amount { display:flex; align-items:center; gap:8px; margin-top:10px; }
.ui-fx-amount input { width:160px; padding:8px 10px; border:1px solid var(--line2,var(--line)); border-radius:8px; background:var(--field,var(--bg)); color:var(--text); font:inherit; font-size:16px; }
.ui-fx-rows { display:grid; gap:6px; margin-top:10px; }
.ui-fx-rows > div { display:grid; grid-template-columns:56px 1fr; align-items:baseline; gap:2px 10px; padding:8px 10px; border-radius:10px; background:var(--panel2); }
.ui-fx-rows b { font-size:18px; font-variant-numeric:tabular-nums; }
.ui-fx-rows small { grid-column:2; color:var(--muted); font-size:11px; }
.ui-clock-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; margin-top:10px; }
.ui-clock-item { display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:10px; background:var(--panel2); }
.ui-clock-item span { font-size:12px; color:var(--muted); }
.ui-clock-item b { font-size:22px; font-variant-numeric:tabular-nums; font-weight:650; }
.ui-clock-item small { font-size:12px; color:var(--muted); }
/* Quiz, steps, timeline, compare */
.ui-quiz-body { display:grid; gap:12px; margin-top:10px; }
.ui-quiz-q { margin:0; padding:0 0 10px; border:0; border-bottom:1px solid var(--line); }
.ui-quiz-q legend { padding:0; margin-bottom:6px; font-size:14px; font-weight:550; color:var(--text); }
html[data-theme] .unio-ui .ui-choice.ui-correct { color:var(--ui-s2); font-weight:600; }
html[data-theme] .unio-ui .ui-choice.ui-wrong { color:var(--ui-s4); text-decoration:line-through; }
.ui-quiz-explain { font-size:13px; color:var(--muted); }
.ui-quiz-actions, .ui-steps-nav, .ui-button-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:12px; }
.ui-quiz-score { font-size:14px; font-weight:600; }
.ui-steps-track { display:flex; gap:4px; margin:10px 0; }
.ui-steps-track i { flex:1; height:4px; border-radius:2px; background:var(--line); }
.ui-steps-track i.active { background:var(--ui-s0); }
.ui-step small { color:var(--muted); font-size:12px; }
.ui-step b { display:block; margin-top:2px; font-size:15px; }
.ui-steps-nav { justify-content:space-between; }
.ui-timeline { list-style:none; margin:10px 0 0; padding:0 0 0 18px; border-left:2px solid var(--line); display:grid; gap:14px; }
.ui-timeline li { position:relative; }
.ui-timeline li::before { content:""; position:absolute; left:-25px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--ui-s0); border:2px solid var(--panel); }
.ui-timeline time { display:block; font-size:12px; color:var(--muted); }
.ui-timeline b { font-size:14px; }
.ui-compare-grid { display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)); gap:10px; margin-top:10px; }
.ui-compare-col { display:flex; flex-direction:column; gap:2px; padding:12px; border:1px solid var(--line); border-radius:12px; }
.ui-compare-col.ui-compare-best { border-color:var(--accent); background:var(--accent-soft,var(--panel2)); }
.ui-compare-col small { color:var(--muted); font-size:12px; }
.ui-compare-col ul { margin:8px 0 0; padding-left:18px; font-size:13px; line-height:1.55; }
/* Products, documents, buttons, drawings */
.ui-product { display:flex; flex-direction:column; min-width:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel); }
html[data-theme] .unio-ui .ui-product .ui-media img { aspect-ratio:1; object-fit:contain; background:#fff; border-radius:0; }
.ui-product-body { display:flex; flex-direction:column; gap:3px; padding:12px; }
.ui-price { display:flex; align-items:baseline; gap:8px; }
.ui-price b { font-size:17px; } .ui-price s { color:var(--muted); font-size:12px; }
.ui-rating { font-size:12px; color:var(--muted); }
.ui-stars { color:#e0a526; letter-spacing:1px; }
.ui-doc-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.ui-doc-head > div { display:flex; flex-wrap:wrap; gap:6px; }
.ui-doc-text { width:100%; min-height:220px; margin-top:10px; padding:12px; border:1px solid var(--line); border-radius:10px; background:var(--field,var(--bg)); color:var(--text); font:inherit; font-size:14px; line-height:1.6; resize:vertical; box-sizing:border-box; }
.ui-button-link { display:inline-flex; align-items:center; padding:8px 12px; border:1px solid var(--line); border-radius:10px; color:var(--text); font-size:13px; text-decoration:none; }
.ui-button-link:hover { background:var(--panel2); }
.ui-svg-figure { margin:10px 0 0; }
.ui-svg-figure svg { display:block; width:100%; height:auto; max-height:520px; }
.ui-svg-figure figcaption { margin-top:6px; color:var(--muted); font-size:12px; }
.ui-diagram { margin-top:10px; overflow-x:auto; }
.ui-diagram svg { display:block; max-width:100%; height:auto; margin:0 auto; }
.ui-diagram-source { margin:0; font-size:12px; color:var(--muted); white-space:pre-wrap; }
.ui-diagram-ready .ui-diagram-source { display:none; }
@media (max-width:640px) {
  .ui-compare-grid { grid-template-columns:1fr; }
  .ui-map-canvas { height:260px; }
  html[data-theme] .unio-ui .ui-mosaic { grid-template-columns:repeat(2,1fr); }
}

/* Styled text in answers (UnioRichText.sanitize): any color with a light-theme and a dark-theme variant of the same
   hue, and a translucent background tint. */
.bubble .tx-c { color:var(--tx-l); }
html[data-appearance-tone="dark"] .bubble .tx-c { color:var(--tx-d); }
.bubble .bg-c { background:var(--bg-c); border-radius:3px; padding:0 2px; }
/* Layout (dashboard), holidays, video, icons, reference bands, streaming components. */
.ui-layout { display:grid; grid-template-columns:repeat(var(--cols,2),minmax(0,1fr)); gap:10px; margin-top:10px; }
html[data-theme] .message.assistant .bubble .ui-layout > .unio-ui { margin:0; }
.ui-holiday-list { list-style:none; margin:10px 0 0; padding:0; display:grid; gap:4px; }
.ui-holiday-list li { display:grid; grid-template-columns:minmax(120px,34%) 1fr; gap:2px 12px; padding:6px 8px; border-radius:8px; font-size:13px; }
.ui-holiday-list li[data-past] { opacity:.55; }
.ui-holiday-list li.ui-holiday-next { background:var(--accent-soft,var(--panel2)); }
.ui-holiday-list time { color:var(--muted); }
.ui-holiday-list small { grid-column:2; color:var(--muted); font-size:12px; }
.ui-video { position:relative; margin-top:10px; aspect-ratio:16 / 9; border-radius:10px; overflow:hidden; background:#000; }
.ui-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.unio-ui .ui-icon { display:inline-block; width:16px; height:16px; margin-right:6px; vertical-align:-3px; color:var(--ui-s0); }
.unio-ui svg.lucide { width:16px; height:16px; margin-right:6px; vertical-align:-3px; color:var(--ui-s0); }
.ui-plus-chart .ui-ref-band { fill:var(--ui-s2); opacity:.12; }
.ui-units select { padding:8px 10px; border:1px solid var(--line2,var(--line)); border-radius:8px; background:var(--field,var(--bg)); color:var(--text); font:inherit; }
.ui-units .ui-fx-rows > div { grid-template-columns:minmax(80px,30%) 1fr; }
@media (max-width:640px) { .ui-layout { grid-template-columns:1fr; } }

/* Web links in answers: the name in bold with a dotted underline and a small arrow (index.html
   formatAssistant adds .answer-link; citation chips and component links keep their own look). */
.bubble a.answer-link { color: var(--text); font-weight: 550; text-decoration-line: underline; text-decoration-style: dotted; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--text) 45%, transparent); text-underline-offset: 4px; overflow-wrap: anywhere; transition: text-decoration-color .15s; }
.bubble a.answer-link:hover { text-decoration-style: solid; text-decoration-color: var(--text); }
.answer-link-arrow { display: inline-block; margin-left: 1px; font-size: 1.05em; font-weight: 600; line-height: 1; color: var(--text); text-decoration: none; }