/* ══════════════════════════════════════════════════════════════════
   COGNITA SOFT INTELLIGENCE UI — bazaviy komponentlar
   Faqat tokenlardan oziqlanadi (tokens.css). Sahifalarda tasodifiy
   CSS yozilmasin — shu yerdagi klasslar ishlatilsin.
   ══════════════════════════════════════════════════════════════════ */

/* ── Ikonka ── */
.ci{flex:none;display:block}
.ci-btn .ci{margin:auto}

/* ── Tugmalar ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:38px;padding:0 var(--space-4);
  border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  background:var(--surface-1);color:var(--text-primary);
  font:inherit;font-size:var(--text-sm);font-weight:var(--weight-medium);
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),
             color var(--dur) var(--ease),transform var(--dur-fast) var(--ease);
}
.btn:hover{background:var(--surface-hover);border-color:var(--border-strong)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:default;transform:none}

.btn-primary{
  background:var(--accent-primary);border-color:transparent;color:#062822;
  font-weight:var(--weight-semibold);
}
.btn-primary:hover{background:#63e0d0;border-color:transparent}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-secondary)}
.btn-ghost:hover{background:var(--surface-hover);color:var(--text-primary);border-color:transparent}
.btn-soft{background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.btn-soft:hover{background:var(--accent-soft-strong);border-color:transparent}
.btn-danger{color:var(--danger)}
.btn-danger:hover{background:var(--danger-soft);border-color:transparent}
.btn-sm{height:32px;padding:0 var(--space-3);font-size:var(--text-micro)}
.btn-lg{height:44px;padding:0 var(--space-5);font-size:var(--text-body)}

/* Ikonka-tugma: hit area ≥36px (§34) */
.ci-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:none;
  border:1px solid transparent;border-radius:var(--radius-sm);
  background:transparent;color:var(--text-secondary);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             transform var(--dur-fast) var(--ease);
}
.ci-btn:hover{background:var(--surface-hover);color:var(--text-primary)}
.ci-btn:active{transform:scale(.96)}
.ci-btn.on{background:var(--accent-soft);color:var(--accent-text)}
.ci-btn-lg{width:40px;height:40px}

/* ── Kirish maydonlari ─────────────────────────────────────── */
.field{
  width:100%;height:40px;padding:0 var(--space-3);
  background:var(--surface-2);color:var(--text-primary);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  font:inherit;font-size:var(--text-sm);outline:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
textarea.field{height:auto;min-height:84px;padding:var(--space-3);line-height:var(--text-body-lh);resize:vertical}
.field::placeholder{color:var(--text-muted)}
.field:focus{border-color:var(--accent-primary);box-shadow:0 0 0 3px var(--accent-soft)}
.label{display:block;font-size:var(--text-micro);color:var(--text-secondary);margin-bottom:var(--space-1)}

/* ── Kartalar ──────────────────────────────────────────────── */
.card{
  background:var(--surface-1);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);padding:var(--space-5);
}
.card-title{font-size:var(--text-section);font-weight:var(--weight-semibold);
  line-height:var(--text-section-lh);margin-bottom:var(--space-2)}
.card-hover{transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.card-hover:hover{transform:translateY(-1px);border-color:var(--border-strong)}

/* ── Nishonlar ─────────────────────────────────────────────── */
.badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  height:22px;padding:0 var(--space-2);border-radius:var(--radius-pill);
  background:var(--surface-2);color:var(--text-secondary);
  font-size:var(--text-micro);font-weight:var(--weight-medium);
}
.badge-accent{background:var(--accent-soft);color:var(--accent-text)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.badge-ok{background:var(--ok-soft);color:var(--ok)}
.badge-danger{background:var(--danger-soft);color:var(--danger)}

/* ── Segmented control ─────────────────────────────────────── */
.segmented{
  display:inline-flex;gap:2px;padding:3px;
  background:var(--surface-2);border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
}
.segmented button{
  display:inline-flex;align-items:center;gap:var(--space-1);
  height:28px;padding:0 var(--space-3);border:0;border-radius:var(--radius-xs);
  background:transparent;color:var(--text-secondary);
  font:inherit;font-size:var(--text-micro);font-weight:var(--weight-medium);cursor:pointer;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease);
}
.segmented button:hover{color:var(--text-primary)}
.segmented button.on{background:var(--surface-1);color:var(--text-primary);
  box-shadow:0 1px 2px rgba(0,0,0,.16)}

/* ── Tooltip (§34) ─────────────────────────────────────────── */
.tip{position:relative}
.tip::after{
  content:attr(data-tip);position:absolute;z-index:var(--z-sticky);
  left:50%;top:calc(100% + 8px);transform:translateX(-50%) translateY(-3px);
  padding:5px var(--space-2);border-radius:var(--radius-xs);
  background:var(--surface-2);border:1px solid var(--border-strong);
  color:var(--text-primary);font-size:var(--text-micro);white-space:nowrap;
  opacity:0;pointer-events:none;
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
  box-shadow:var(--shadow-float);
}
.tip:hover::after,.tip:focus-visible::after{opacity:1;transform:translateX(-50%) translateY(0)}
.tip-right::after{left:calc(100% + 8px);top:50%;transform:translateY(-50%) translateX(-3px)}
.tip-right:hover::after{transform:translateY(-50%) translateX(0)}

/* ── Modal va Drawer (§33) ─────────────────────────────────── */
/* Qorong'ilatgich drawer'dan past, modal'dan yuqori turadi —
   shuning uchun u ikkalasi bilan ham ishlaydi. */
.scrim{
  position:fixed;inset:0;background:var(--overlay);z-index:calc(var(--z-drawer) + 4);
  opacity:0;pointer-events:none;transition:opacity var(--dur-slow) var(--ease);
}
.scrim.open{opacity:1;pointer-events:auto}
.modal{
  position:fixed;left:50%;top:50%;z-index:calc(var(--z-modal) + 1);
  width:min(560px,calc(100vw - 32px));max-height:86vh;overflow:auto;
  transform:translate(-50%,-48%) scale(.98);opacity:0;pointer-events:none;
  background:var(--surface-1);border:1px solid var(--border-subtle);
  border-radius:var(--radius-2xl);box-shadow:var(--shadow-modal);
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease-out);
}
.modal.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:calc(var(--z-drawer) + 5);
  width:min(360px,92vw);display:flex;flex-direction:column;
  background:var(--surface-1);border-left:1px solid var(--border-subtle);
  box-shadow:var(--shadow-modal);
  transform:translateX(100%);transition:transform var(--dur-slow) var(--ease-out);
}
.drawer.open{transform:translateX(0)}
.drawer-head,.modal-head{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle);
}
.drawer-head b,.modal-head b{flex:1;font-size:var(--text-section);font-weight:var(--weight-semibold)}
.drawer-body,.modal-body{padding:var(--space-5);overflow:auto}

/* ── Toast (§32) ───────────────────────────────────────────── */
.toasts{
  position:fixed;right:var(--space-5);bottom:var(--space-5);z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:var(--space-2);pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);min-width:220px;max-width:360px;
  background:var(--surface-1);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);box-shadow:var(--shadow-float);
  color:var(--text-primary);font-size:var(--text-sm);
  opacity:0;transform:translateY(6px);pointer-events:auto;
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease-out);
}
.toast.in{opacity:1;transform:translateY(0)}
.toast.ok .ci{color:var(--ok)}
.toast.err .ci{color:var(--danger)}

/* ── Skeleton (§31) ────────────────────────────────────────── */
.skel{
  position:relative;overflow:hidden;border-radius:var(--radius-xs);
  background:var(--surface-2);min-height:12px;
}
.skel::after{
  content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--surface-hover),transparent);
  animation:cg-shimmer 1.4s infinite;
}
@keyframes cg-shimmer{100%{transform:translateX(100%)}}

/* AI ishlayotganda — yumshoq "nafas" (§30) */
.thinking{animation:cg-breathe 1.9s ease-in-out infinite}
@keyframes cg-breathe{0%,100%{opacity:.55}50%{opacity:1}}

/* ── Bo'sh holat (§29) ─────────────────────────────────────── */
.empty-state{
  display:flex;flex-direction:column;align-items:center;gap:var(--space-4);
  text-align:center;padding:var(--space-10) var(--space-5);color:var(--text-secondary);
}
.empty-state h3{font-size:var(--text-section);font-weight:var(--weight-semibold);color:var(--text-primary)}
.empty-state p{font-size:var(--text-sm);max-width:420px}
.empty-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center}

/* ── Yordamchi klasslar ────────────────────────────────────── */
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.gap-1{gap:var(--space-1)} .gap-2{gap:var(--space-2)} .gap-3{gap:var(--space-3)}
.gap-4{gap:var(--space-4)} .gap-5{gap:var(--space-5)}
.grow{flex:1;min-width:0}
.muted{color:var(--text-muted)}
.secondary{color:var(--text-secondary)}
.micro{font-size:var(--text-micro);line-height:var(--text-micro-lh)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Ikonka joylashgan har qanday tugma — belgini markazlaydi.
   :has() qo'''llab-quvvatlanmasa, quyidagi aniq selektorlar ishlaydi. */
button:has(> svg.ci),a:has(> svg.ci){display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}
/* Chapga tekislangan ro'''yxat elementlari o'''z tartibini saqlaydi */
.side-q,.new-btn,.acc,.acc-menu a,.acc-menu button,.bd-lib-item{justify-content:flex-start !important}
.bd-tools button,.bd-btn,.bd-radial button,.bd-sel button,.bd-timer button,
.bd-vbar button,.icon-btn,.acc-more,.acc-av,.wallet-chip>span:first-child{
  display:inline-flex;align-items:center;justify-content:center}
.side-q i,.acc-menu i,.new-btn i{display:inline-flex;align-items:center;justify-content:center}

/* ══════════ BUYRUQ PANELI — Ctrl/Cmd + K (§22) ══════════ */
.palette{
  position:fixed;inset:0;z-index:var(--z-palette);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:12vh var(--space-4) var(--space-4);
  background:var(--overlay);
  opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease);
}
.palette.open{opacity:1;pointer-events:auto}
.palette > *{
  width:min(560px,100%);background:var(--surface-1);
  border:1px solid var(--border-subtle);
  transform:translateY(-6px);transition:transform var(--dur-slow) var(--ease-out);
}
.palette.open > *{transform:translateY(0)}
.palette-in{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-bottom:0;
  box-shadow:var(--shadow-modal);
}
.palette-in .ci{flex:none;color:var(--text-muted)}
.palette-in input{
  flex:1;min-width:0;background:none;border:none;outline:none;
  color:var(--text-primary);font:inherit;font-size:var(--text-section);padding:var(--space-1) 0;
}
.palette-in input::placeholder{color:var(--text-muted)}
.palette-list{
  border-top:1px solid var(--border-subtle);
  border-radius:0 0 var(--radius-xl) var(--radius-xl);
  max-height:min(52vh,420px);overflow-y:auto;padding:var(--space-2);
  box-shadow:var(--shadow-modal);
}
.palette-row{
  display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:left;
  padding:9px var(--space-3);border:0;border-radius:var(--radius-sm);
  background:none;color:var(--text-secondary);font:inherit;font-size:var(--text-sm);cursor:pointer;
}
.palette-row > span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.palette-row.on{background:var(--accent-soft);color:var(--text-primary)}
.palette-row.on .ci{color:var(--accent-text)}
.palette-empty{padding:var(--space-5);text-align:center;font-size:var(--text-sm);color:var(--text-muted)}
kbd{
  flex:none;font-family:var(--font-mono);font-size:var(--text-micro);
  padding:2px 6px;border-radius:6px;border:1px solid var(--border-subtle);
  background:var(--surface-2);color:var(--text-muted);
}