/* ============================================================
   AskHrAI — /try Freemium Page Styles
   Aesthetic: Editorial split-screen, warm & inviting
   ============================================================ */

/* ── Reset for this standalone page ─────────────────────────── */
.try-page {
  font-family: var(--f-ui);
  background: var(--c-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── Top bar ──────────────────────────────────────────────────── */
.try-topbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1.5rem;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  flex-shrink: 0;
  z-index: 10;
}

.try-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--c-ink);
  flex-shrink: 0;
}
.try-logo strong { color: #C2410C; }

/* Counter */
.try-counter {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .8375rem;
  color: var(--c-ink-3);
  margin: 0 auto;
}
.tc-pips {
  display: flex;
  gap: 5px;
}
.tc-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: background .3s ease, transform .3s ease;
}
.tc-pip-avail { background: #C2410C; }
.tc-pip-used  { background: var(--c-border); transform: scale(.85); }

.try-topbar-right {
  display: flex;
  align-items: center;
  gap: .625rem;
  flex-shrink: 0;
}

/* ── Main layout ─────────────────────────────────────────────── */
.try-main {
  display: grid;
  grid-template-columns: 380px 1fr;
  flex: 1;
  overflow: hidden;
  height: calc(100vh - 57px);
}

/* ── Sidebar ─────────────────────────────────────────────────── */
.try-sidebar {
  background: var(--c-dark);
  overflow-y: auto;
  position: relative;
}
.try-sidebar::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,.35), transparent 70%);
  pointer-events: none;
}
.try-sidebar::after {
  content: '';
  position: absolute;
  bottom: -40px; left: -40px;
  width: 250px; height: 250px;
  background: radial-gradient(circle, rgba(14,165,233,.2), transparent 70%);
  pointer-events: none;
}

.ts-inner {
  position: relative;
  z-index: 1;
  padding: 2.5rem 2rem;
}

.ts-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .875rem;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: var(--r-pill);
  font-size: .75rem;
  font-weight: 600;
  color: #e5e5e5;
  margin-bottom: 1.5rem;
}
.ts-badge-dot {
  width: 6px; height: 6px;
  background: #34d399;
  border-radius: 50%;
  animation: pulseGreen 2s infinite;
}

.ts-inner h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1rem;
  letter-spacing: -.03em;
}
.ts-inner h2 em { font-style: italic; color: #e5e5e5; }
.ts-inner > p { color: rgba(255,255,255,.6); font-size: .9375rem; line-height: 1.7; margin-bottom: 1.5rem; }

.ts-free-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  background: rgba(52,211,153,.15);
  border: 1px solid rgba(52,211,153,.3);
  border-radius: var(--r-pill);
  font-size: .8rem;
  font-weight: 600;
  color: #34d399;
  margin-bottom: 2rem;
}

.ts-topics { margin-bottom: 2rem; }
.ts-topics-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: .875rem;
}
.ts-topic-chip {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  padding: .625rem .875rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md);
  font-size: .8125rem;
  color: rgba(255,255,255,.65);
  text-align: left;
  cursor: pointer;
  transition: all .2s ease;
  margin-bottom: .5rem;
}
.ts-topic-chip:hover {
  background: rgba(255,255,255,.25);
  border-color: rgba(255,255,255,.4);
  color: #fff;
  padding-left: 1.125rem;
}
.ts-topic-chip i { color: #d4d4d4; font-size: .875rem; flex-shrink: 0; }

.ts-trust {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.ts-trust-item {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  color: rgba(255,255,255,.35);
}
.ts-trust-item i { color: rgba(255,255,255,.6); }

/* ── Chat area ────────────────────────────────────────────────── */
.try-chat {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--c-surface);
  border-left: 1px solid var(--c-border);
}

/* Messages */
.try-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  scroll-behavior: smooth;
}

.try-msg {
  display: flex;
  align-items: flex-end;
  gap: .625rem;
  animation: fadeUp .25s ease;
}
.try-msg-user { flex-direction: row-reverse; }

.try-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem;
  flex-shrink: 0;
  background: var(--c-dark);
  color: #fff;
}
.try-avatar-user { background: var(--c-indigo); }

.try-bubble {
  max-width: 78%;
  padding: .875rem 1.125rem;
  border-radius: var(--r-xl);
  font-size: .9375rem;
  line-height: 1.75;
}
.try-msg-ai .try-bubble {
  background: var(--c-bg-2);
  border: 1px solid var(--c-border);
  color: var(--c-ink-2);
  border-bottom-left-radius: 4px;
}
.try-msg-user .try-bubble {
  background: var(--c-dark);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.try-msg-ai .try-bubble h3  { font-size: .9375rem; margin: .625rem 0 .25rem; color: var(--c-ink); }
.try-msg-ai .try-bubble p   { margin-bottom: .5rem; }
.try-msg-ai .try-bubble p:last-child { margin-bottom: 0; }
.try-msg-ai .try-bubble ul  { padding-left: 1.25rem; margin-bottom: .5rem; }
.try-msg-ai .try-bubble li  { margin-bottom: .25rem; }
.try-msg-ai .try-bubble strong { color: var(--c-ink); font-weight: 700; }
.try-msg-ai .try-bubble code { background: rgba(79,70,229,.1); color: var(--c-indigo); padding: 2px 5px; border-radius: 4px; font-size: .875em; }

/* Typing dots */
.try-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: .875rem 1.125rem;
}
.try-typing span {
  width: 8px; height: 8px;
  background: var(--c-ink-4);
  border-radius: 50%;
  animation: typingBounce 1.2s infinite;
}
.try-typing span:nth-child(2) { animation-delay: .2s; }
.try-typing span:nth-child(3) { animation-delay: .4s; }

/* ── Input area ──────────────────────────────────────────────── */
.try-input-wrap {
  border-top: 1px solid var(--c-border);
  padding: 1rem 1.5rem 1.25rem;
  background: var(--c-surface);
  flex-shrink: 0;
}

.try-form { display: flex; flex-direction: column; gap: .5rem; }

.try-input-inner {
  background: var(--c-bg-2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-xl);
  padding: .875rem 1rem;
  transition: var(--transition);
}
.try-input-inner:focus-within {
  border-color: var(--c-indigo);
  background: var(--c-surface);
  box-shadow: 0 0 0 3px rgba(79,70,229,.08);
}

#tryInput {
  display: block;
  width: 100%;
  background: none;
  border: none;
  outline: none;
  resize: none;
  font-family: var(--f-ui);
  font-size: .9375rem;
  color: var(--c-ink);
  line-height: 1.6;
  max-height: 160px;
  overflow-y: auto;
}
#tryInput::placeholder { color: var(--c-ink-4); }

.try-input-btns {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .5rem;
  margin-top: .5rem;
}
.try-char { font-size: .72rem; color: var(--c-ink-4); }

.try-send {
  width: 34px; height: 34px;
  background: var(--c-dark);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  transition: var(--transition);
  border: none;
  cursor: pointer;
}
.try-send:hover:not(:disabled) { background: var(--c-indigo); transform: scale(1.08); }
.try-send:disabled { opacity: .4; cursor: not-allowed; }

.try-disclaimer {
  font-size: .72rem;
  color: var(--c-ink-4);
  text-align: center;
}
.try-disclaimer a { color: var(--c-indigo); text-decoration: underline; }

/* ── Limit reached inline CTA ────────────────────────────────── */
.try-limit-reached {
  animation: fadeUp .4s ease;
}
.tlr-content { text-align: center; }
.tlr-icon { font-size: 2rem; margin-bottom: .75rem; }
.tlr-content h3 { font-size: 1.125rem; margin-bottom: .5rem; color: var(--c-ink); }
.tlr-content > p { font-size: .875rem; color: var(--c-ink-3); margin-bottom: 1.25rem; }

.tlr-plans { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; margin-bottom: .875rem; }
.tlr-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  padding: 1.125rem;
  background: var(--c-bg-2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-xl);
  transition: var(--transition);
  position: relative;
}
.tlr-plan:hover { border-color: var(--c-indigo); background: var(--c-surface); transform: translateY(-2px); box-shadow: var(--sh-md); }
.tlr-plan-featured {
  background: var(--c-dark);
  border: 1.5px solid var(--orange);
}
.tlr-plan-featured:hover { background: var(--orange-dark); border-color: var(--orange); transform: translateY(-2px); box-shadow: var(--sh-md); }
.tlr-popular {
  display: inline-block;
  padding: 2px 8px;
  background: #111111;
  color: #fff;
  border-radius: var(--r-pill);
  font-size: .65rem;
  font-weight: 700;
  margin-bottom: .25rem;
  letter-spacing: .04em;
}
.tlr-plan-name { font-size: .875rem; font-weight: 700; color: var(--c-ink); }
.tlr-plan-featured .tlr-plan-name { color: #fff; }
.tlr-plan-price { font-family: var(--f-display); font-size: 1.5rem; font-weight: 700; color: var(--c-ink); line-height: 1; }
.tlr-plan-featured .tlr-plan-price { color: #fff; }
.tlr-plan-price small { font-family: var(--f-ui); font-size: .75rem; font-weight: 400; color: var(--c-ink-4); }
.tlr-plan-featured .tlr-plan-price small { color: rgba(255,255,255,.5); }
.tlr-plan-feat { font-size: .72rem; color: var(--c-ink-4); }
.tlr-plan-featured .tlr-plan-feat { color: rgba(255,255,255,.5); }
.tlr-plan-cta {
  margin-top: .375rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--c-indigo);
}
.tlr-plan-featured .tlr-plan-cta { color: #ffffff; }
.tlr-fine { font-size: .72rem; color: var(--c-ink-4); text-align: center; }

/* ── Paywall modal ────────────────────────────────────────────── */
.paywall-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,17,23,.65);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: fadeIn .25s ease;
}
.paywall-overlay[hidden] { display: none; }

@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

.paywall-modal {
  background: var(--c-surface);
  border-radius: var(--r-2xl);
  padding: 2.5rem;
  max-width: 520px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  animation: slideUp .3s ease;
  position: relative;
}
@keyframes slideUp { from{transform:translateY(20px);opacity:0;} to{transform:translateY(0);opacity:1;} }

.pm-confetti { font-size: 2.5rem; margin-bottom: 1rem; display: block; }
.paywall-modal h2 { font-size: 1.5rem; margin-bottom: .625rem; }
.pm-sub { color: var(--c-ink-3); font-size: .9375rem; margin-bottom: 1.5rem; }

.pm-value {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  text-align: left;
  margin-bottom: 1.75rem;
  padding: 1.25rem;
  background: var(--c-bg-2);
  border-radius: var(--r-lg);
}
.pm-value-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8375rem;
  color: var(--c-ink-2);
}
.pm-value-item i { color: var(--c-success); font-size: 1rem; flex-shrink: 0; }

.pm-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.pm-plan {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .375rem;
  padding: 1.25rem;
  background: var(--c-bg-2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-xl);
  transition: var(--transition);
  position: relative;
}
.pm-plan:hover { border-color: var(--c-indigo); background: var(--c-surface); }
.pm-plan-hero {
  background: var(--c-dark);
  border: 1.5px solid var(--orange);
}
.pm-plan-hero:hover { background: var(--orange-dark); border-color: var(--orange); }
.pm-badge {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  padding: .2rem .875rem;
  background: var(--c-indigo);
  color: #fff;
  border-radius: var(--r-pill);
  font-size: .68rem;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .04em;
}
.pm-plan-top { display: flex; align-items: baseline; justify-content: space-between; width: 100%; }
.pm-plan-name { font-size: .8375rem; font-weight: 700; color: var(--c-ink); }
.pm-plan-hero .pm-plan-name { color: #fff; }
.pm-plan-price { font-family: var(--f-display); font-size: 1.375rem; font-weight: 700; color: var(--c-ink); }
.pm-plan-hero .pm-plan-price { color: #fff; }
.pm-plan-price small { font-family: var(--f-ui); font-size: .72rem; font-weight: 400; color: var(--c-ink-4); }
.pm-plan-hero .pm-plan-price small { color: rgba(255,255,255,.45); }
.pm-plan-note { font-size: .72rem; color: var(--c-ink-4); }
.pm-plan-hero .pm-plan-note { color: rgba(255,255,255,.45); }
.pm-plan-btn { font-size: .8rem; font-weight: 700; color: var(--c-indigo); margin-top: .25rem; }
.pm-plan-hero .pm-plan-btn { color: #ffffff; }
.pm-fine { font-size: .75rem; color: var(--c-ink-4); margin-bottom: 1rem; }
.pm-dismiss {
  font-size: .8125rem;
  color: var(--c-ink-4);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  transition: var(--transition);
}
.pm-dismiss:hover { color: var(--c-ink); }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .try-main { grid-template-columns: 1fr; }
  .try-sidebar { display: none; }
  .pm-plans { grid-template-columns: 1fr; }
  .pm-value  { grid-template-columns: 1fr; }
  .tlr-plans { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .try-topbar { padding: .625rem 1rem; gap: .5rem; }
  .try-counter { display: none; }
  .try-topbar-right .btn-ghost-sm { display: none; }
  .try-messages { padding: 1.25rem 1rem; }
  .try-input-wrap { padding: .875rem 1rem 1rem; }
  .try-bubble { max-width: 90%; }
  .paywall-modal { padding: 1.75rem 1.25rem; }
}