/**
 * جست‌وجوی زندهٔ هدر — phs-*  (۳.۷.۲۷)
 * نتایجِ گروه‌بندی‌شده زیرِ کادرِ جست‌وجو (دوره‌ها / مدرسان / مقالات / دسته‌ها)، اسکلتِ بارگذاری،
 * برجسته‌سازیِ عبارت، جست‌وجوهای اخیر و راهنمای کیبورد. رنگ‌ها از --ph-* (هدر) → روز/شب.
 */
.ph-search-panel.has-live { z-index: 1000; } /* بالاتر از نوارِ پایینِ موبایل */
.ph-search-panel.has-live .ph-search-box { width: min(640px, 100%); padding: 14px; }
.ph-search-panel.has-live .ph-search-input { font-size: 14px; padding-left: 44px; }
.ph-search-panel.has-live .ph-search-input::-webkit-search-cancel-button { display: none; }
.ph-search-panel.has-live .ph-search-input-wrap { display: block; }
.ph-search-panel .ph-search-hints[hidden] { display: none; }

/* پاک‌کردن + لودر داخلِ کادر */
.phs-clear {
  position: absolute;
  top: 50%;
  left: 10px;
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  place-items: center;
  color: var(--ph-muted);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transform: translateY(-50%);
}
.phs-clear:hover { color: var(--ph-text); background: var(--ph-surface); }
.phs-clear[hidden] { display: none; }
.ph-search-panel .phs-clear svg { position: static; width: 16px; height: 16px; transform: none; }
.phs-spinner {
  position: absolute;
  top: 50%;
  left: 44px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border: 2px solid color-mix(in srgb, var(--ph-primary) 25%, transparent);
  border-top-color: var(--ph-primary);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.ph-search-panel.is-loading .phs-spinner { opacity: 1; animation: phs-spin .7s linear infinite; }
@keyframes phs-spin { to { transform: rotate(360deg); } }

.phs-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- جست‌وجوهای اخیر ---------- */
.phs-recent { margin-top: 12px; }
.phs-recent[hidden] { display: none; }
.phs-recent-list { display: flex; flex-wrap: wrap; gap: 6px; }
.phs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 10px;
  color: var(--ph-text);
  background: var(--ph-surface-2);
  border: 1px solid var(--ph-border);
  border-radius: 999px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.phs-chip:hover { border-color: color-mix(in srgb, var(--ph-primary) 45%, var(--ph-border)); }
.phs-chip-ico { display: inline-grid; color: var(--ph-muted); }
.phs-chip-ico svg { width: 13px; height: 13px; }
.phs-recent-clear { padding: 0; color: var(--ph-muted); background: none; border: 0; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.phs-recent-clear:hover { color: var(--ph-primary); }

/* ---------- نتایج ---------- */
.phs-results {
  max-height: min(52vh, 480px);
  margin: 10px -6px 0;
  padding: 0 6px 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--ph-border) transparent;
}
.phs-results[hidden] { display: none; }
.phs-group + .phs-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--ph-border); }
.phs-group-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px 4px;
  color: var(--ph-muted);
  font-size: 11.5px;
  font-weight: 800;
}
.phs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  color: var(--ph-text);
  border-radius: 12px;
  text-decoration: none;
  outline: none;
  transition: background-color .12s ease;
}
.phs-item.is-active,
.phs-item:focus-visible { background: color-mix(in srgb, var(--ph-primary) 9%, var(--ph-surface-2)); }
.phs-thumb {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 52px;
  height: 40px;
  overflow: hidden;
  color: var(--ph-primary);
  background: var(--ph-surface-2);
  border: 1px solid var(--ph-border);
  border-radius: 10px;
  font-size: 15px;
  font-weight: 900;
}
.phs-thumb img { width: 100%; height: 100% !important; max-width: none !important; object-fit: cover; }
.phs-thumb.is-letter { width: 40px; background: color-mix(in srgb, var(--ph-primary) 10%, var(--ph-surface)); }
.phs-thumb.is-round { width: 40px; border-radius: 50%; }
.phs-text { display: grid; flex: 1; gap: 2px; min-width: 0; }
.phs-title { overflow: hidden; font-size: 14px; font-weight: 800; line-height: 1.6; white-space: nowrap; text-overflow: ellipsis; }
.phs-title mark { padding: 0; color: var(--ph-primary); background: none; }  /* بدونِ padding تا اتصالِ حروفِ فارسی نشکند */
.phs-sub { overflow: hidden; color: var(--ph-muted); font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; }
.phs-aside { flex: none; color: var(--ph-muted); font-size: 12px; font-weight: 800; white-space: nowrap; }
.phs-group--courses .phs-aside { color: var(--ph-primary); }
.phs-aside.is-free { color: var(--ph-green, #159b70); }
.phs-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 11px;
  color: var(--ph-primary);
  border-top: 1px solid var(--ph-border);
  border-radius: 0 0 12px 12px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  outline: none;
}
.phs-all.is-active, .phs-all:hover { background: color-mix(in srgb, var(--ph-primary) 8%, transparent); }
.phs-all-count { color: var(--ph-muted); font-weight: 700; }

/* اسکلتِ بارگذاری */
.phs-skel { display: flex; align-items: center; gap: 12px; padding: 8px; }
.phs-skel-thumb, .phs-skel-lines span {
  display: block;
  background: linear-gradient(90deg, var(--ph-surface-2) 0%, color-mix(in srgb, var(--ph-border) 70%, var(--ph-surface-2)) 50%, var(--ph-surface-2) 100%);
  background-size: 200% 100%;
  border-radius: 8px;
  animation: phs-shimmer 1.1s linear infinite;
}
.phs-skel-thumb { flex: none; width: 52px; height: 40px; border-radius: 10px; }
.phs-skel-lines { display: grid; flex: 1; gap: 7px; }
.phs-skel-lines span { height: 10px; }
.phs-skel-lines span:first-child { width: 70%; }
.phs-skel-lines span:last-child { width: 40%; }
@keyframes phs-shimmer { to { background-position: -200% 0; } }

.phs-empty { display: grid; gap: 4px; padding: 22px 10px; text-align: center; }
.phs-empty strong { color: var(--ph-text); font-size: 14px; font-weight: 800; }
.phs-empty span { color: var(--ph-muted); font-size: 12.5px; }

/* راهنمای کیبورد (فقط دستگاه‌های با ماوس) */
.phs-keys { display: none; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; padding-top: 10px; color: var(--ph-muted); border-top: 1px solid var(--ph-border); font-size: 11px; font-weight: 600; }
.phs-keys kbd {
  display: inline-block;
  min-width: 20px;
  margin: 0 2px;
  padding: 1px 5px;
  color: var(--ph-text);
  background: var(--ph-surface-2);
  border: 1px solid var(--ph-border);
  border-bottom-width: 2px;
  border-radius: 6px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
}
@media (hover: hover) and (pointer: fine) { .phs-keys { display: flex; } }
.phs-keys-open { margin-inline-start: auto; }

@media (max-width: 560px) {
  .ph-search-panel.has-live .ph-search-box { padding: 12px; border-radius: 18px; }
  .phs-results { max-height: 56vh; }
  .phs-thumb { width: 46px; height: 36px; }
  .phs-thumb.is-letter, .phs-thumb.is-round { width: 36px; }
  .phs-title { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-search-panel.is-loading .phs-spinner, .phs-skel-thumb, .phs-skel-lines span { animation: none; }
}