/* Chaqar UI/UX refoundation — Phase 2
   Shared interaction and layout primitives for blog, student, AI and admin. */

[data-product-surface="auth"] {
  --cq-domain-accent: #2563eb;
  --cq-domain-accent-strong: #1d4ed8;
}

.cq-eyebrow { color: var(--cq-domain-accent-strong); }
.cq-eyebrow::before { background: var(--cq-domain-accent); }
[data-product-surface="ai"] .cq-btn-primary { background: var(--cq-color-ai); }
[data-product-surface="ai"] .cq-btn-primary:hover { background: #6d28d9; }
[data-product-surface="auth"] .cq-btn-primary,
[data-product-surface="student"] .cq-btn-primary { background: var(--cq-color-student); }
[data-product-surface="auth"] .cq-btn-primary:hover,
[data-product-surface="student"] .cq-btn-primary:hover { background: #1d4ed8; }

.cq-product-switcher {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .25rem;
  border: 1px solid rgb(226 232 240 / .9);
  border-radius: 999px;
  background: rgb(248 250 252 / .88);
}

.cq-product-link {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  gap: .42rem;
  padding: .45rem .72rem;
  border-radius: 999px;
  color: #64748b;
  font-size: .75rem;
  font-weight: 750;
  line-height: 1;
  transition: color var(--cq-motion-fast), background var(--cq-motion-fast), box-shadow var(--cq-motion-fast);
}

.cq-product-link:hover { color: #0f172a; background: #fff; }
.cq-product-link.is-active { color: #0f172a; background: #fff; box-shadow: 0 2px 9px rgb(15 23 42 / .08); }
.cq-product-dot { width: .45rem; height: .45rem; border-radius: 999px; background: #94a3b8; }
.cq-product-dot-blog { background: var(--cq-color-editorial); }
.cq-product-dot-student { background: var(--cq-color-student); }
.cq-product-dot-ai { background: var(--cq-color-ai); }

.cq-app-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgb(226 232 240 / .86);
  background: rgb(255 255 255 / .92);
  backdrop-filter: blur(18px);
}

.cq-app-header-primary { min-height: 4.5rem; }
.cq-app-nav { scrollbar-width: none; }
.cq-app-nav::-webkit-scrollbar { display: none; }
.cq-app-nav-link {
  display: inline-flex;
  min-height: 2.5rem;
  flex: 0 0 auto;
  align-items: center;
  border-radius: .75rem;
  padding: .55rem .75rem;
  color: #475569;
  font-size: .84rem;
  font-weight: 700;
  transition: color var(--cq-motion-fast), background var(--cq-motion-fast);
}
.cq-app-nav-link:hover { color: #0f172a; background: #f1f5f9; }
.cq-app-nav-link.is-accent { color: var(--cq-domain-accent-strong); background: color-mix(in srgb, var(--cq-domain-accent) 8%, white); }

.cq-page-hero {
  position: relative;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 1.75rem;
  background:
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--cq-domain-accent) 16%, transparent), transparent 32%),
    linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  box-shadow: var(--cq-shadow-md);
}
.cq-page-hero::after {
  position: absolute;
  right: -4rem;
  bottom: -5rem;
  width: 13rem;
  height: 13rem;
  border: 1px solid color-mix(in srgb, var(--cq-domain-accent) 18%, transparent);
  border-radius: 999px;
  content: "";
}

.cq-stat-card { position: relative; overflow: hidden; padding: 1.3rem; }
.cq-stat-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--cq-domain-accent);
  content: "";
}
.cq-stat-label { color: #64748b; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.cq-stat-value { margin-top: .55rem; color: #0f172a; font-size: clamp(1.8rem, 3vw, 2.35rem); font-weight: 800; line-height: 1; }

.cq-panel-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cq-panel-title { color: #0f172a; font-family: var(--cq-font-editorial); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.cq-text-link { color: var(--cq-domain-accent-strong); font-size: .83rem; font-weight: 750; }
.cq-text-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.cq-auth-layout {
  display: grid;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 2rem;
  background: #fff;
  box-shadow: var(--cq-shadow-lg);
}
.cq-auth-aside {
  position: relative;
  overflow: hidden;
  min-height: 18rem;
  padding: clamp(2rem, 5vw, 4rem);
  color: #fff;
  background:
    radial-gradient(circle at 85% 18%, rgb(96 165 250 / .32), transparent 30%),
    radial-gradient(circle at 10% 90%, rgb(245 158 11 / .22), transparent 28%),
    #0f172a;
}
.cq-auth-aside::after {
  position: absolute;
  right: -5rem;
  bottom: -5rem;
  width: 15rem;
  height: 15rem;
  border: 1px solid rgb(255 255 255 / .14);
  border-radius: 999px;
  content: "";
}
.cq-auth-form { padding: clamp(1.6rem, 5vw, 3.5rem); }
.cq-benefit-list { margin-top: 2rem; display: grid; gap: .85rem; }
.cq-benefit-item { display: flex; align-items: flex-start; gap: .75rem; color: #cbd5e1; font-size: .86rem; line-height: 1.5; }
.cq-benefit-icon { display: grid; width: 1.6rem; height: 1.6rem; flex: 0 0 auto; place-items: center; border-radius: .5rem; color: #bfdbfe; background: rgb(255 255 255 / .1); }

.cq-ai-layout { display: grid; gap: 1.25rem; }
.cq-ai-history { overflow: hidden; }
.cq-ai-history-list { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-width: thin; }
.cq-ai-history-link { display: block; min-width: 12rem; max-width: 15rem; flex: 0 0 auto; overflow: hidden; border-radius: .8rem; padding: .7rem .8rem; color: #64748b; font-size: .78rem; text-overflow: ellipsis; white-space: nowrap; }
.cq-ai-history-link:hover { background: #f8fafc; }
.cq-ai-history-link.is-active { color: #5b21b6; background: #f5f3ff; font-weight: 750; }
.cq-ai-workspace { overflow: hidden; border-color: #ddd6fe; box-shadow: 0 22px 60px rgb(91 33 182 / .08); }
.cq-ai-thread { min-height: min(34rem, 60vh); background: linear-gradient(180deg, #fafafa 0%, #f8fafc 100%); }
.cq-ai-avatar { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: .7rem; color: #6d28d9; background: #ede9fe; font-size: .8rem; font-weight: 850; }
.cq-ai-composer { position: sticky; bottom: 0; background: rgb(255 255 255 / .96); backdrop-filter: blur(12px); }

.cq-admin-metric { position: relative; transition: transform var(--cq-motion-normal), border-color var(--cq-motion-normal), box-shadow var(--cq-motion-normal); }
.cq-admin-metric:hover { transform: translateY(-2px); border-color: #bfdbfe; box-shadow: var(--cq-shadow-md); }
.cq-admin-metric::after { position: absolute; inset: auto 1.2rem 1rem auto; color: #cbd5e1; content: "→"; font-weight: 800; }

.cq-surface-badge { display: inline-flex; align-items: center; gap: .45rem; color: #64748b; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.cq-surface-badge::before { width: .55rem; height: .55rem; border-radius: 999px; background: var(--cq-domain-accent); content: ""; }

@media (min-width: 768px) {
  .cq-auth-layout { grid-template-columns: minmax(0, .9fr) minmax(25rem, 1.1fr); }
  .cq-auth-aside { min-height: 100%; }
}

@media (min-width: 1024px) {
  .cq-ai-layout { grid-template-columns: 17rem minmax(0, 1fr); align-items: start; }
  .cq-ai-history { position: sticky; top: 6rem; max-height: calc(100vh - 7rem); overflow-y: auto; }
  .cq-ai-history-list { display: grid; overflow-x: visible; }
  .cq-ai-history-link { min-width: 0; max-width: none; }
}

@media (max-width: 767px) {
  .cq-product-link { padding-inline: .62rem; }
  .cq-page-hero { border-radius: 1.35rem; }
  .cq-auth-layout { border-radius: 1.5rem; }
}