/* ============================================================
   AI智能客服 — auth pages tech skin (injected via nginx sub_filter)
   Scope: only the auth layout (<main class="... bg-n-brand/5 ...">),
   the agent dashboard is left untouched.
   ============================================================ */

main[class*="bg-n-brand"] {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(1100px 560px at 75% -10%, rgba(34, 211, 238, 0.16), transparent 60%),
    radial-gradient(900px 520px at 8% 112%, rgba(99, 102, 241, 0.22), transparent 62%),
    linear-gradient(180deg, #050914 0%, #081226 55%, #0a1428 100%) !important;
}

/* holo grid */
main[class*="bg-n-brand"]::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(56, 189, 248, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, 0.08) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 38%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse at 50% 38%, #000 25%, transparent 78%);
}

/* sweeping light beam */
main[class*="bg-n-brand"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  width: 55%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(56, 189, 248, 0.07), transparent);
  animation: aik-sweep 8s linear infinite;
}
@keyframes aik-sweep {
  to { transform: translateX(280%); }
}

main[class*="bg-n-brand"] > section {
  position: relative;
  z-index: 1;
}

/* always use the light-on-dark logo on the auth page */
main[class*="bg-n-brand"] img[class*="dark:hidden"] { display: none !important; }
main[class*="bg-n-brand"] img[class*="dark:block"] { display: block !important; }
main[class*="bg-n-brand"] section img {
  height: 2.6rem !important;
  filter: drop-shadow(0 0 18px rgba(34, 211, 238, 0.35));
}

/* heading */
main[class*="bg-n-brand"] h2 {
  color: #eaf6ff !important;
  letter-spacing: 0.06em;
  text-shadow: 0 0 26px rgba(56, 189, 248, 0.4);
}

/* glass card */
main[class*="bg-n-brand"] section[class*="bg-white"] {
  background: rgba(11, 20, 41, 0.78) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(56, 189, 248, 0.28) !important;
  border-radius: 16px !important;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.06),
    0 26px 80px rgba(2, 8, 23, 0.65),
    0 0 46px rgba(56, 189, 248, 0.14) !important;
  animation: aik-rise 0.6s ease-out both;
}
@keyframes aik-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

/* neon top edge on the card */
main[class*="bg-n-brand"] section[class*="bg-white"]::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 12%;
  right: 12%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, #22d3ee, #6366f1, transparent);
  filter: blur(0.4px);
}

/* text inside the card */
main[class*="bg-n-brand"] label,
main[class*="bg-n-brand"] section[class*="bg-white"] span,
main[class*="bg-n-brand"] section[class*="bg-white"] p {
  color: #a9c1e4 !important;
}
main[class*="bg-n-brand"] > section > p {
  color: #7e95bb !important;
}

/* links (forgot password / sign-up) */
main[class*="bg-n-brand"] a {
  color: #38bdf8 !important;
}
main[class*="bg-n-brand"] a:hover {
  color: #7dd3fc !important;
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.5);
}

/* inputs */
main[class*="bg-n-brand"] input {
  background: rgba(6, 12, 28, 0.88) !important;
  border: 1px solid rgba(56, 189, 248, 0.24) !important;
  border-radius: 10px !important;
  color: #eaf6ff !important;
  caret-color: #22d3ee;
  transition: border-color 0.2s, box-shadow 0.2s;
}
main[class*="bg-n-brand"] input::placeholder {
  color: #55688c !important;
}
main[class*="bg-n-brand"] input:focus {
  border-color: rgba(34, 211, 238, 0.75) !important;
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16), 0 0 18px rgba(34, 211, 238, 0.25) !important;
  outline: none !important;
}
/* autofill on dark */
main[class*="bg-n-brand"] input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #060c1c inset !important;
  -webkit-text-fill-color: #eaf6ff !important;
}

/* submit button */
main[class*="bg-n-brand"] button[type="submit"] {
  background: linear-gradient(92deg, #0ea5e9 0%, #6366f1 100%) !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #fff !important;
  letter-spacing: 0.2em;
  box-shadow: 0 10px 30px rgba(14, 165, 233, 0.35), 0 0 0 1px rgba(125, 211, 252, 0.25) inset;
  transition: transform 0.15s, box-shadow 0.2s, filter 0.2s;
}
main[class*="bg-n-brand"] button[type="submit"] span {
  color: #fff !important;
}
main[class*="bg-n-brand"] button[type="submit"]:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 14px 36px rgba(14, 165, 233, 0.5), 0 0 22px rgba(99, 102, 241, 0.4);
}
main[class*="bg-n-brand"] button[type="submit"]:active {
  transform: translateY(0);
}

/* ------------------------------------------------------------------------- */
/* Agent dashboard: conversation contact panel (the right-hand sidebar).     */
/* Scoped to the panel's own hardcoded width classes, so nothing else in the */
/* dashboard — and nothing on the auth pages — can match.                    */

/* 2026-08-21: the panel text runs large for the amount of metadata it holds.
   zoom shrinks the whole panel uniformly (text, paddings, icons) which reads
   better than shrinking fonts alone; supported by Chrome/Edge and Firefox 126+. */
div[class*="bg-n-surface-2"][class*="md:w-[320px]"][class*="md:min-w-[320px]"] {
  zoom: 0.85;
}

/* ── 2026-08-22: contacts list, compact cards (take 3) ───────────────────────
   Take 1 scoped through a layout wrapper this route does not render; take 2
   matched, but `> div` also padded the card's collapse wrapper (the expandable
   edit form), leaving a dead 16px strip under every collapsed card — and the
   user still found the rows too tall. Take 3 pads only the content row
   (`> div.flex`; the collapse wrapper is `grid`, not `flex`) and shrinks the
   avatar with `zoom`, which scales its inline px sizes and the presence badge
   together (per-element overrides would misplace the badge). */
[class*="group/cardLayout"] > div.flex {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}
/* the list that stacks the cards: 16px gaps become 6px */
div:has(> .relative > [class*="group/cardLayout"]) {
  gap: 6px !important;
}
/* name line a step down so the two text lines settle around 40px */
[class*="group/cardLayout"] .text-base {
  font-size: 14px !important;
  line-height: 1.3 !important;
}
[class*="group/cardLayout"] .flex.items-center.justify-start.flex-1.gap-4 {
  gap: 12px !important;
}
/* 42px avatar → ~34px, badge and initials scale along */
[class*="group/cardLayout"] [class*="group/avatar"] {
  zoom: 0.8;
}

/* ── 2026-08-22: automation editor, roomier condition/action rows ────────────
   The rows pack selects, value pickers and the delete button at a 8px gap
   with 8px row padding, which reads cramped once a value chip is present.
   The ul signature (grid + p-3 + list-none + rounded-xl) exists only on the
   automation editor's condition/action blocks. */
ul.grid.p-3.list-none.rounded-xl {
  padding: 16px !important;
}
ul.grid.p-3.list-none.rounded-xl li.list-none {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
ul.grid.p-3.list-none.rounded-xl li .flex.items-center.gap-2 {
  gap: 10px !important;
}

/* Mobile mis-tap fix: the resolve split-button used to sit directly under the back button,
   square in thumb territory, and agents kept resolving conversations by accident. Push the
   whole action row to the right edge and order the resolve group last, so reaching it is a
   deliberate stretch. Width-gated: desktop layouts are untouched. */
@media (max-width: 768px) {
  .actions--container {
    width: 100%;
    justify-content: flex-end !important;
  }
  .actions--container > div:first-child {
    order: 99;
    margin-inline-start: 10px;
  }
}