/* FoxOS — faqat karkas va ilovaga xos bloklar. Qiymatlar FAQAT FoxUI tokenlaridan (--fx-*):
   FoxUI'da token yoki komponent o'zgarsa, bu yer ham o'zi o'zgaradi. Yangi umumiy bloklar (ko'rsatkich, agent stoli,
   grafik, progress) — FoxUI'ga komponent nomzodi (ro'yxat: docs/foxui-nomzodlar.md). */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--fx-bg-page); color: var(--fx-text-primary); font-family: var(--fx-font-family-sans); }
body { margin: 0; min-block-size: 100dvh; }
a { color: inherit; }
code { font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono); font-size: 0.92em; }

/* ---------- karkas ---------- */
.ws { display: grid; grid-template-columns: var(--fx-nav-width) minmax(0, 1fr); min-block-size: 100dvh; }
.ws-yon { position: sticky; top: 0; block-size: 100dvh; display: flex; flex-direction: column; gap: var(--fx-space-4);
  padding-block: var(--fx-space-5); border-inline-end: var(--fx-border-width-default) solid var(--fx-border-color-default); background: var(--fx-bg-surface); }
.ws-logo { display: flex; align-items: center; gap: var(--fx-space-3); padding-inline: var(--fx-space-5); text-decoration: none;
  font-weight: var(--fx-font-weight-semibold); font-size: var(--fx-font-size-md); }
.ws-menyu { inline-size: 100%; }
.ws-yon__past { margin-block-start: auto; display: grid; gap: var(--fx-space-1); padding-inline: var(--fx-space-3); }
.ws-asosiy { padding: var(--fx-space-8) var(--fx-space-8) var(--fx-space-12); display: grid; gap: var(--fx-space-6); align-content: start; min-inline-size: 0; }

@media (max-width: 860px) {
  .ws { grid-template-columns: 1fr; }
  .ws-yon { position: sticky; z-index: 5; block-size: auto; flex-direction: row; align-items: center; padding: var(--fx-space-2) var(--fx-space-4);
    border-inline-end: 0; border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); overflow-x: auto; }
  .ws-logo { padding-inline: 0; } .ws-logo span { display: none; }
  .ws-menyu { display: flex; inline-size: auto; padding: 0; }
  .ws-yon__past { display: none; }
  .ws-asosiy { padding: var(--fx-space-5) var(--fx-space-4) var(--fx-space-10); }
}

/* ---------- matn ---------- */
.ws-h1 { margin: 0; font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); font-size: var(--fx-font-size-display-sm); font-weight: var(--fx-font-weight-semibold); }
.ws-sarlavha { display: flex; justify-content: space-between; align-items: end; gap: var(--fx-space-4); }
.ws-sarlavha p { margin: var(--fx-space-1) 0 0; }
.ws-sokin { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-sm); }
.ws-bolim-nom { margin: 0; font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-semibold); color: var(--fx-text-secondary); }
.ws-jonli::before { content: ""; display: inline-block; inline-size: 0.5em; block-size: 0.5em; margin-inline-end: 0.4em; border-radius: var(--fx-radius-circle);
  background: var(--fx-text-tertiary); vertical-align: middle; }
.ws-jonli[data-ulandi]::before { background: var(--fx-fg-success); animation: ws-puls 2s var(--fx-ease-standard) infinite; }

/* ---------- panjaralar ---------- */
.ws-korsatkichlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--fx-space-4); }
.ws-ikki { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--fx-space-6); align-items: start; }
.ws-ustun { display: grid; gap: var(--fx-space-6); }
.ws-panjara { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--fx-space-6); align-items: start; }
@media (max-width: 1100px) { .ws-ikki { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .ws-panjara { grid-template-columns: 1fr; } }

.ws-blok { align-content: start; }
.ws-blok__bosh { display: flex; justify-content: space-between; align-items: center; gap: var(--fx-space-3); }

/* ko'rsatkich — FoxUI .fx-stat (0.2.0) */

/* ro'yxat, tafsilot, jadval */
.ws-royxat { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--fx-space-3); font-size: var(--fx-font-size-sm); }
.ws-royxat > li { padding-block-end: var(--fx-space-3); border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); overflow-wrap: anywhere; }
.ws-royxat > li:last-child { border-block-end: 0; padding-block-end: 0; }
.ws-royxat--mayda { gap: var(--fx-space-2); font-size: var(--fx-font-size-xs); }
.ws-royxat--mayda > li { padding-block-end: var(--fx-space-2); }
.ws-tafsil { margin: 0; display: grid; gap: var(--fx-space-1); font-size: var(--fx-font-size-sm); }
.ws-tafsil dt { color: var(--fx-text-tertiary); font-size: var(--fx-font-size-xs); margin-block-start: var(--fx-space-2); }
.ws-tafsil dd { margin: 0; overflow-wrap: anywhere; }
.ws-tafsil--qator { grid-template-columns: max-content 1fr; column-gap: var(--fx-space-4); align-items: baseline; }
.ws-tafsil--qator dt { margin: 0; }
/* jadval — FoxUI .fx-table (0.3.0) */
.ws-ochma summary { cursor: pointer; font-size: var(--fx-font-size-sm); font-weight: var(--fx-font-weight-medium); padding-block: var(--fx-space-2); }
.ws-discord { font-size: var(--fx-font-size-sm); color: var(--fx-text-secondary); line-height: 1.55; padding: var(--fx-space-3); background: var(--fx-bg-subtle); border-radius: var(--fx-radius-control); }

/* progress — FoxUI .fx-progress (0.2.0) */

/* grafiklar (FoxUI nomzodi: chart) */
.ws-grafik { display: block; inline-size: 100%; block-size: 88px; }
.ws-grafik rect { fill: var(--fx-bg-brand-solid); opacity: 0.85; }
.ws-grafik rect:hover { opacity: 1; }
.ws-grafik--chiziq polyline { fill: none; stroke: var(--fx-bg-brand-solid); stroke-width: 2; stroke-linejoin: round; }

/* ---------- agentlar xonasi (FoxUI nomzodi: agent desk) ---------- */
.ws-xona { display: grid; gap: var(--fx-space-6); }
.ws-xona__bolim { display: grid; gap: var(--fx-space-3); }
.ws-stollar { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--fx-space-4); }
.ws-xona--ixcham .ws-stollar { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--fx-space-3); }

.ws-stol { position: relative; display: grid; gap: var(--fx-space-3); padding: var(--fx-space-4); border-radius: var(--fx-radius-surface);
  background: var(--fx-bg-surface); border: var(--fx-border-width-default) solid var(--fx-border-color-default); box-shadow: var(--fx-shadow-sm);
  outline: none; transition: box-shadow var(--fx-motion-base) var(--fx-ease-standard), border-color var(--fx-motion-fast) var(--fx-ease-standard); }
.ws-stol:hover, .ws-stol:focus-within { box-shadow: var(--fx-shadow-md); border-color: var(--fx-border-color-strong); }
.ws-stol:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); }
.ws-stol[data-holat="ishlayapti"] { border-color: var(--fx-fg-success); }
.ws-stol__yuz { display: flex; align-items: center; gap: var(--fx-space-3); min-inline-size: 0; }
.ws-stol__nom { display: grid; min-inline-size: 0; }
.ws-stol__nom b { font-size: var(--fx-font-size-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-stol__rol { font-size: var(--fx-font-size-xs); color: var(--fx-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-stol__jonli { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fx-space-2); }
.ws-stol__ish { flex-basis: 100%; margin: 0; font-size: var(--fx-font-size-xs); color: var(--fx-text-secondary); font-family: var(--fx-font-family-mono); font-size-adjust: var(--fx-font-adjust-mono);
  line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; block-size: 2.9em; overflow-wrap: anywhere; }

/* avatar — FoxUI .fx-avatar */

/* Tafsilot paneli — FoxUI .fx-popover (0.3.0), stol bosilganda ochiladi (klaviatura bilan ham) */
.ws-stol__och { position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; background: transparent; border-radius: inherit; cursor: pointer; }
.ws-stol__och:focus-visible { outline: var(--fx-border-width-focus) solid var(--fx-border-color-focus); outline-offset: 2px; }
.ws-stol__panel { inline-size: min(92vw, 380px); max-block-size: 70vh; overflow: auto; }
.ws-stol__panel .ws-vazifa { margin-block-start: var(--fx-space-3); }
.ws-vazifa { display: grid; gap: var(--fx-space-2); justify-items: start; }
.ws-vazifa .fx-field { inline-size: 100%; }

/* xabar — FoxUI .fx-toast (0.3.0) */

/* ---------- kirish ---------- */
.ws-kirish { display: grid; place-items: center; min-block-size: 100dvh; padding: var(--fx-space-4); }
.ws-kirish__karta { inline-size: min(100%, 360px); justify-items: start; }
.ws-kirish__karta .fx-field, .ws-kirish__karta .fx-btn { inline-size: 100%; }

@keyframes ws-puls { 50% { opacity: 0.35; } }
@keyframes ws-nafas { 50% { scale: 1.06; } }
@media (prefers-reduced-motion: reduce) { .ws-jonli::before { animation: none !important; } }

/* ---------- vazifalar (Todoist o'rniga) ---------- */
.ws-vazifa-karkas { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--fx-space-6); align-items: start; }
.ws-vazifa-menyu { inline-size: auto; padding: 0; position: sticky; top: var(--fx-space-6); }
.ws-vazifa-menyu__sar { margin: var(--fx-space-4) var(--fx-space-3) var(--fx-space-1); }
.ws-loyiha-qosh .fx-input { inline-size: 100%; }
.ws-vazifa-asosiy { display: grid; gap: var(--fx-space-5); min-inline-size: 0; }
.ws-qator { display: flex; flex-wrap: wrap; gap: var(--fx-space-3); align-items: end; }
.ws-qator .fx-field { min-inline-size: 140px; flex: 1 1 140px; }
.ws-tez-qosh { gap: var(--fx-space-3); }
.ws-vazifalar { margin: 0; padding: 0; list-style: none; display: grid; }
.ws-vazifa-q { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--fx-space-3); align-items: start; padding-block: var(--fx-space-3);
  border-block-end: var(--fx-border-width-default) solid var(--fx-border-color-default); }
.ws-vazifa-q[data-ichki] { padding-inline-start: var(--fx-space-8); }
.ws-vazifa-q__ich summary { list-style: none; cursor: pointer; display: grid; gap: var(--fx-space-1); }
.ws-vazifa-q__ich summary::-webkit-details-marker { display: none; }
.ws-vazifa-q__matn { font-size: var(--fx-font-size-sm); overflow-wrap: anywhere; }
.ws-vazifa-q__meta { display: flex; flex-wrap: wrap; gap: var(--fx-space-2); align-items: center; font-size: var(--fx-font-size-xs); color: var(--fx-text-tertiary); }
.ws-vazifa-q__meta:empty { display: none; }
.ws-otgan { color: var(--fx-fg-error); }
.ws-vazifa-tahrir { display: grid; gap: var(--fx-space-3); padding-block: var(--fx-space-3); }
.ws-bajar { inline-size: var(--fx-size-checkbox); block-size: var(--fx-size-checkbox); margin-block-start: 2px; padding: 0; cursor: pointer;
  border-radius: var(--fx-radius-circle); border: var(--fx-border-width-focus) solid var(--fx-border-color-strong); background: transparent;
  transition: background-color var(--fx-motion-fast) var(--fx-ease-standard); }
.ws-vazifa-q[data-u="1"] .ws-bajar { border-color: var(--fx-fg-error); }
.ws-vazifa-q[data-u="2"] .ws-bajar { border-color: var(--fx-fg-warning); }
.ws-bajar:hover, .ws-bajar[aria-pressed="true"] { background: var(--fx-bg-muted); }
.ws-bajar[aria-pressed="true"] { background: var(--fx-bg-brand-solid); }
.ws-vazifa-q.ketyapti { opacity: 0.4; transition: opacity var(--fx-motion-base) var(--fx-ease-exit); }
@media (max-width: 860px) {
  .ws-vazifa-karkas { grid-template-columns: 1fr; }
  .ws-vazifa-menyu { position: static; display: flex; overflow-x: auto; gap: var(--fx-space-1); }
  .ws-vazifa-menyu__sar, .ws-loyiha-qosh { display: none; }
}

/* ---------- suhbat ---------- */
.ws-chat-karkas { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--fx-space-6); align-items: start; }
.ws-chat__agent { gap: var(--fx-space-2); }
.ws-avatar--kichik { inline-size: var(--fx-size-control-sm); block-size: var(--fx-size-control-sm); font-size: 10px; animation: none !important; }
.ws-chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; block-size: calc(100dvh - var(--fx-space-8) * 2); gap: var(--fx-space-4); }
.ws-chat__log { overflow-y: auto; display: grid; align-content: start; gap: var(--fx-space-4); padding-inline-end: var(--fx-space-2); }
.ws-chat__x { display: grid; gap: var(--fx-space-1); max-inline-size: min(92%, 760px); }
.ws-chat__x[data-kim="ustoz"] { justify-self: end; justify-items: end; }
.ws-chat__pufak { padding: var(--fx-space-3) var(--fx-space-4); border-radius: var(--fx-radius-surface); font-size: var(--fx-font-size-sm); line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; background: var(--fx-bg-subtle); }
.ws-chat__x[data-kim="ustoz"] .ws-chat__pufak { background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand); }
.ws-chat__x[data-kim="agent"] .ws-chat__pufak { background: var(--fx-bg-warning-subtle); }
.ws-chat__vosita { justify-self: start; font-size: var(--fx-font-size-xs); color: var(--fx-text-tertiary); }
.ws-chat__yoz { grid-template-columns: minmax(0, 1fr) auto; align-items: end; justify-items: stretch; }
.ws-kod { white-space: pre; overflow-x: auto; padding: var(--fx-space-3); border-radius: var(--fx-radius-control); background: var(--fx-bg-muted); font-size: var(--fx-font-size-xs); }
.ws-md-h { font-size: var(--fx-font-size-md); }
@media (max-width: 860px) { .ws-chat-karkas { grid-template-columns: 1fr; } .ws-chat { block-size: 75dvh; } }
.ws-mavzu-qosh .fx-input { inline-size: 100%; }
.ws-tez-qosh > .fx-btn { justify-self: start; }

/* ---------- .md ko'rish ---------- */
.ws-md { display: block; max-inline-size: 860px; line-height: 1.65; font-size: var(--fx-font-size-md); overflow-wrap: anywhere; }
.ws-md > * { margin-block: 0 var(--fx-space-4); }
.ws-md h2, .ws-md h3, .ws-md h4 { margin-block: var(--fx-space-6) var(--fx-space-3); font-family: var(--fx-font-family-display); font-size-adjust: var(--fx-font-adjust-display); line-height: 1.25; }
.ws-md .ws-md-h1 { font-size: var(--fx-font-size-xl); } .ws-md .ws-md-h2 { font-size: var(--fx-font-size-lg); } .ws-md .ws-md-h3 { font-size: var(--fx-font-size-md); }
.ws-md a { color: inherit; text-decoration-color: var(--fx-border-color-strong); text-underline-offset: 3px; }
.ws-md hr { border: 0; border-block-start: var(--fx-border-width-default) solid var(--fx-border-color-default); }
.ws-md-royxat { padding: 0; list-style: none; display: grid; gap: var(--fx-space-1); }
.ws-md-royxat li { padding-inline-start: calc(var(--d) * var(--fx-space-5) + var(--fx-space-4)); position: relative; }
.ws-md-royxat li:not([data-check])::before { content: "•"; position: absolute; inset-inline-start: calc(var(--d) * var(--fx-space-5)); color: var(--fx-text-tertiary); }
.ws-md-royxat li[data-check] { padding-inline-start: calc(var(--d) * var(--fx-space-5) + var(--fx-space-6)); }
.ws-md-check { position: absolute; inset-inline-start: calc(var(--d) * var(--fx-space-5)); inset-block-start: 0.35em; inline-size: 0.95em; block-size: 0.95em;
  border: var(--fx-border-width-focus) solid var(--fx-border-color-strong); border-radius: calc(var(--fx-radius-control) / 2); }
.ws-md-royxat li[data-check="yopiq"] { color: var(--fx-text-tertiary); text-decoration: line-through; }
.ws-md-royxat li[data-check="yopiq"] .ws-md-check { background: var(--fx-bg-brand-solid); border-color: var(--fx-bg-brand-solid); }
.ws-md-iqtibos { margin-inline: 0; padding: var(--fx-space-3) var(--fx-space-4); border-inline-start: 3px solid var(--fx-border-color-strong); background: var(--fx-bg-subtle); border-radius: var(--fx-radius-control); color: var(--fx-text-secondary); }
.ws-md-iqtibos[data-callout="warning"], .ws-md-iqtibos[data-callout="caution"] { border-color: var(--fx-fg-warning); }
.ws-md-jadval { overflow-x: auto; }
.ws-md mark { background: var(--fx-bg-warning-subtle); color: inherit; }
.ws-wiki-yoq { color: var(--fx-text-tertiary); text-decoration: underline dotted; }
.ws-md-fm { font-size: var(--fx-font-size-xs); }
.ws-fayl-qidir { max-inline-size: 420px; }