* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  background: #141516;
  color: #f2f0ee;
  overflow: hidden;
}
/* The app (onboarding + chat) is a fixed-height, non-scrolling single
   view (see body{overflow:hidden} above) — but the SEO landing page is a
   normal, scrollable marketing page. This class (added/removed by the
   inline script in index.php) switches body back to normal document flow
   while the landing section is showing. */
body.landing-mode { overflow: auto; height: auto; min-height: 100%; }
a { color: #ff8659; text-decoration: none; }
a:hover { color: #ffa27a; }
button { font-family: inherit; border: none; background: none; }

/* ---------- shared bits ---------- */
.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #f2f0ee;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 8px;
  padding: 8px 14px; cursor: pointer; transition: background .15s, border-color .15s;
}
.btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.24); }
.btn-ghost.sm { font-size: 12px; padding: 6px 11px; }
.btn-accent {
  font-size: 13.5px; font-weight: 700; color: #141516; background: #ff7a45;
  border-radius: 9px; padding: 10px 18px; cursor: pointer; transition: filter .15s;
}
.btn-accent:hover { filter: brightness(1.08); }
.btn-accent.sm { font-size: 12px; padding: 6px 12px; border-radius: 8px; }
.btn-accent:disabled { opacity: .35; cursor: not-allowed; filter: none; }
.icon-btn {
  width: 46px; height: 46px; border-radius: 11px; border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0;
}
.icon-btn:hover { background: rgba(255,255,255,0.08); }
.section-label {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #9a999b; margin: 14px 0 8px;
}
.row-gap8 { display: flex; gap: 8px; }
.mark {
  width: 30px; height: 30px; border-radius: 8px; background: #ff7a45;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}

/* ---------- onboarding ---------- */
.onboarding {
  display: flex; flex-direction: column; align-items: center;
  height: 100%; padding: 36px 24px; position: relative; overflow-y: auto;
}
.ob-logo { position: absolute; top: 36px; left: 40px; display: flex; align-items: center; gap: 10px; }
.ob-name { font-weight: 800; font-size: 15px; letter-spacing: -0.02em; line-height: 1.2; }
.ob-sub { font-size: 10px; color: #68676a; line-height: 1.2; }
.ob-wrap { width: 100%; max-width: 560px; margin-top: 88px; }
.ob-progress { display: flex; gap: 6px; margin-bottom: 28px; }
.ob-progress .seg { height: 4px; flex: 1; border-radius: 3px; background: rgba(255,255,255,0.1); transition: background .2s; }
.ob-progress .seg.active { background: #ff7a45; }
.ob-card {
  background: #1a1b1d; border: 1px solid rgba(255,255,255,0.1); border-radius: 20px;
  padding: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.ob-step-label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #ff9d6e; margin-bottom: 10px; }
.ob-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.ob-subtitle { font-size: 13.5px; color: #9a999b; margin-bottom: 26px; line-height: 1.5; }
.ob-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.ob-stack { display: flex; flex-direction: column; gap: 12px; }
.ob-row, .ob-role-card {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 15px; border: 1px solid rgba(255,255,255,0.12); border-radius: 11px;
  background: #141516; cursor: pointer; color: #8f8e91; transition: border-color .15s;
}
.ob-row:hover, .ob-role-card:hover { border-color: rgba(255,255,255,0.22); }
.ob-row.selected, .ob-role-card.selected { border-color: #ff7a45; background: rgba(255,122,69,0.1); color: #ff7a45; }
.ob-role-card { align-items: flex-start; gap: 13px; padding: 16px; }
.ob-role-title { font-size: 14.5px; font-weight: 700; color: #f2f0ee; }
.ob-role-desc { font-size: 12.5px; color: #9a999b; margin-top: 3px; line-height: 1.4; }
.ob-row-label { font-size: 14px; font-weight: 700; }
.ob-row-sub { font-size: 11.5px; color: #8f8e91; margin-top: 2px; }
.ob-row-code { font-size: 11px; color: #68676a; font-weight: 700; letter-spacing: .03em; }
.ob-check-icon { display: none; }
.ob-row.selected .ob-check-icon, .ob-role-card.selected .ob-check-icon { display: block; }
.ob-search {
  display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; padding: 9px 13px; margin-bottom: 14px; color: #7c7b7d; font-size: 13.5px;
}
.ob-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; }
.ob-dropzone {
  border: 1.5px dashed rgba(255,255,255,0.2); border-radius: 12px; padding: 22px;
  text-align: center; margin-top: 2px; cursor: pointer;
}
.ob-dz-title { font-size: 13px; color: #9a999b; }
.ob-dz-sub { font-size: 11.5px; color: #68676a; margin-top: 4px; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.ob-chip {
  font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.14); color: #c9c8ca; cursor: pointer; transition: border-color .15s;
}
.ob-chip:hover { border-color: rgba(255,255,255,0.26); }
.ob-chip.selected { border-color: #ff7a45; background: rgba(255,122,69,0.14); color: #ff9d6e; }
.ob-field-label { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #68676a; margin-bottom: 8px; }
.ob-input {
  width: 100%; border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 11px 13px;
  font-size: 13.5px; background: #141516; color: #f2f0ee; font-family: inherit;
}
.ob-input::placeholder { color: #7c7b7d; }
.ob-center { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 10px 0 4px; }
.ob-check {
  width: 54px; height: 54px; border-radius: 50%; background: rgba(255,122,69,0.14);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.ob-finish-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; }
.ob-finish-sub { font-size: 13.5px; color: #9a999b; margin-bottom: 24px; line-height: 1.5; }
.ob-finish-btn { width: 100%; padding: 13px; border-radius: 11px; font-size: 14px; }
.ob-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.ob-nav #obBack { visibility: hidden; }
.ob-nav #obBack.show { visibility: visible; }
.ob-login { text-align: center; font-size: 12.5px; color: #68676a; margin-top: 22px; }
.ob-login.hide { display: none; }

/* ---------- plan cards (Pack 1 / Pack 2) ---------- */
.plan-card {
  position: relative; border: 1.5px solid rgba(255,255,255,0.12); border-radius: 13px;
  background: #141516; padding: 16px 16px 16px 44px; cursor: pointer; transition: border-color .15s;
}
.plan-card:hover { border-color: rgba(255,255,255,0.24); }
.plan-card.selected { border-color: #ff7a45; background: rgba(255,122,69,0.07); }
.plan-check {
  position: absolute; left: 16px; top: 18px; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.22); display: flex; align-items: center; justify-content: center;
}
.plan-card.selected .plan-check { border-color: #ff7a45; background: rgba(255,122,69,0.18); }
.plan-check svg { display: none; }
.plan-card.selected .plan-check svg { display: block; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.plan-name { font-size: 14.5px; font-weight: 700; color: #f2f0ee; }
.plan-price { font-size: 12px; font-weight: 700; color: #ff9d6e; white-space: nowrap; }
.plan-desc { font-size: 12.5px; color: #9a999b; line-height: 1.45; margin-top: 4px; }
.plan-expand { margin-top: 14px; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,0.12); cursor: default; }
.plan-key-hint { font-size: 11.5px; color: #68676a; line-height: 1.5; margin-top: 7px; }
.paypal-slot { margin-top: 14px; min-height: 44px; }
.plan-status { font-size: 12.5px; margin-top: 10px; line-height: 1.4; }
.plan-status.ok { color: #4ade80; }
.plan-status.err { color: #f87171; }

/* ---------- sidebar plan banner (upgrade CTA) ---------- */
.plan-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(255,122,69,0.1); border: 1px solid rgba(255,122,69,0.25); border-radius: 10px;
  padding: 10px 12px; margin: 6px 0 2px; font-size: 12px; color: #ff9d6e; line-height: 1.4;
}
.plan-banner-btn {
  flex-shrink: 0; background: #ff7a45; color: #141516; border: none; border-radius: 7px;
  padding: 6px 11px; font-size: 12px; font-weight: 700; cursor: pointer;
}
.plan-banner-btn:hover { filter: brightness(1.08); }

/* ---------- app shell ---------- */
.app { display: flex; height: 100%; position: relative; }
.sidebar {
  width: 272px; flex-shrink: 0; background: #0f1011; border-right: 1px solid rgba(255,255,255,0.07);
  display: flex; flex-direction: column; padding: 18px 14px; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 6px 18px; }
.brand-name { font-weight: 800; font-size: 16px; letter-spacing: -0.02em; line-height: 1.2; }
.brand-sub { font-size: 10.5px; color: #68676a; line-height: 1.2; }
.new-chat {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; color: #f2f0ee; transition: background .15s;
}
.new-chat:hover { background: rgba(255,255,255,0.07); }
.side-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #68676a; text-transform: uppercase; margin: 20px 8px 8px; }
.nav-list { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  color: #a3a2a4; font-weight: 500; cursor: pointer; transition: opacity .15s;
}
.nav-item:hover { opacity: .85; }
.nav-item.active { background: rgba(255,122,69,0.14); color: #ff9d6e; font-weight: 700; }
.hist-list { display: flex; flex-direction: column; gap: 1px; }
.hist-item {
  padding: 8px 12px; border-radius: 8px; font-size: 13px; color: #a3a2a4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.hist-item:hover { background: rgba(255,255,255,0.05); }
.hist-item.active { background: rgba(255,122,69,0.14); color: #ff9d6e; }
.hist-note { font-size: 11.5px; color: #68676a; padding: 2px 12px 8px; line-height: 1.4; }
.side-spacer { flex: 1; }
.profile-row {
  display: flex; align-items: center; gap: 10px; padding: 14px 8px 4px; border-radius: 10px;
  border-top: 1px solid rgba(255,255,255,0.07); margin-top: 8px;
}
.profile-action {
  background: none; border: 1px solid rgba(255,255,255,0.14); color: #a3a2a4;
  font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 7px; cursor: pointer;
  flex-shrink: 0; transition: opacity .15s;
}
.profile-action:hover { opacity: .8; color: #f2f0ee; }
.auth-input {
  background: #1a1b1d; border: 1px solid rgba(255,255,255,0.12); color: #f2f0ee;
  font-size: 13.5px; padding: 11px 13px; border-radius: 9px; width: 100%;
}
.auth-input:focus { outline: none; border-color: #ff8659; }
.auth-error {
  background: rgba(255,77,77,0.12); border: 1px solid rgba(255,77,77,0.3); color: #ff9d9d;
  font-size: 12.5px; padding: 9px 12px; border-radius: 8px; margin-top: 14px; line-height: 1.4;
}
.auth-switch { margin-top: 14px; font-size: 13px; color: #a3a2a4; }
.link-btn {
  background: none; border: none; color: #ff9d6e; font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 0; margin-left: 2px;
}
.link-btn:hover { text-decoration: underline; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%; background: #3a2c24; color: #ff9d6e;
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.profile-info { flex: 1; min-width: 0; }
.profile-name { font-size: 13px; font-weight: 600; color: #f2f0ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-plan { font-size: 11.5px; color: #68676a; }

.main { flex: 1; display: flex; flex-direction: column; height: 100%; min-width: 0; }
.chatarea { flex: 1; overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding: 44px 24px 24px; }
.chatarea::-webkit-scrollbar { width: 8px; }
.chatarea::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }
.chat-inner { width: 100%; max-width: 760px; }

.welcome { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 60px; }
.welcome-mark {
  width: 52px; height: 52px; border-radius: 14px; background: #ff7a45;
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.welcome-title { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.welcome-sub { font-size: 14.5px; color: #9a999b; margin-bottom: 32px; max-width: 440px; line-height: 1.5; }
.sugg-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; width: 100%; text-align: left; }
.sugg-card {
  border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px; background: #1a1b1d;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.sugg-card:hover { background: #232527; border-color: rgba(255,255,255,0.18); }
.sugg-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.sugg-ex { font-size: 12.5px; color: #8f8e91; line-height: 1.4; }

.thread { display: flex; flex-direction: column; gap: 16px; }
.thread-empty { display: flex; gap: 10px; }
.jd-source-note { margin-top: 14px; font-size: 12px; color: #7c7b7d; line-height: 1.5; }
.msg-row { display: flex; gap: 10px; align-items: flex-start; }
.msg-row.right { justify-content: flex-end; }
.bubble.user {
  max-width: 72%; background: rgba(255,122,69,0.13); border: 1px solid rgba(255,122,69,0.25);
  border-radius: 16px 16px 4px 16px; padding: 11px 15px; font-size: 14px; line-height: 1.5;
}
.ai-avatar {
  width: 26px; height: 26px; border-radius: 7px; background: #ff7a45; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.bubble.ai {
  max-width: 82%; background: #1a1b1d; border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px 16px 16px 4px; padding: 14px 16px; font-size: 14px; line-height: 1.55;
}
.file-chip {
  display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.1);
  border-radius: 8px; padding: 5px 9px; margin-top: 8px; font-size: 12px;
}
.check-line { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 7px; }
.check-line svg { flex-shrink: 0; margin-top: 2px; }
.check-line span { font-size: 13.5px; }
.rewrite-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 13px; background: #141516; margin-top: 14px; }
.q-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.q-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 13px; background: #141516; display: flex; gap: 11px; }
.q-num {
  width: 22px; height: 22px; border-radius: 50%; background: rgba(255,122,69,0.16); color: #ff9d6e;
  font-size: 11.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.q-title { font-weight: 700; font-size: 13.5px; }
.q-tip { font-size: 12.5px; color: #9a999b; margin-top: 4px; }
.letter-card {
  border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 16px; background: #141516;
  margin-top: 12px; font-size: 13.5px; line-height: 1.65; color: #dedcda;
}

.jobboard-thread { gap: 0; }
.jobboard-search-row { margin-bottom: 12px; }
.jobboard-search {
  display: flex; align-items: center; gap: 9px; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px; padding: 10px 13px; background: #1a1b1d;
}
.jobboard-search input {
  flex: 1; border: none; outline: none; background: transparent; font-family: inherit;
  font-size: 13.5px; color: #f2f0ee;
}
.jobboard-search input::placeholder { color: #7c7b7d; }
.jobboard-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.jobboard-filters .ob-chip { padding: 6px 12px; font-size: 12.5px; }
.jobboard-more { align-self: center; margin: 6px auto 0; }
.jobboard-count { font-size: 12px; color: #8f8e91; margin: 2px 0 12px; }
.jobboard-section-title {
  font-size: 13px; font-weight: 600; color: #d8d6d3; margin: 4px 0 10px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1);
}
#jbExternalSection { margin-bottom: 18px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.jobboard-ext-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin: 4px 0 10px; padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.jobboard-ext-header .jobboard-section-title { margin: 0; padding: 0; border: none; }
.jobboard-ext-filter {
  display: flex; align-items: center; gap: 7px; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px; padding: 6px 10px; background: #1a1b1d; flex-shrink: 0;
}
.jobboard-ext-filter input {
  border: none; outline: none; background: transparent; font-family: inherit;
  font-size: 12.5px; color: #f2f0ee; width: 170px; max-width: 42vw;
}
.jobboard-ext-filter input::placeholder { color: #7c7b7d; }
.jobboard-ext-empty { font-size: 12.5px; color: #8f8e91; padding: 10px 2px; }

.job-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.job-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 14px; background: #141516; transition: border-color .15s; }
.job-card:hover { border-color: rgba(255,255,255,0.2); }
.job-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.job-title { font-weight: 700; font-size: 13.5px; }
.job-company { font-size: 12.5px; color: #9a999b; margin-top: 2px; }
.match-badge { background: rgba(74,222,128,0.14); color: #4ade80; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; }
.job-tags { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.job-tag { font-size: 11px; color: #a3a2a4; border: 1px solid rgba(255,255,255,0.12); padding: 2px 8px; border-radius: 20px; }
.job-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 11px; }
.job-salary { font-size: 12.5px; color: #9a999b; }

.ad-inline {
  border: 1px dashed rgba(255,255,255,0.14); border-radius: 12px; padding: 12px 14px;
  background: #141516; position: relative;
}
.ad-inline .ad-tag { position: absolute; top: 10px; right: 12px; left: auto; }
.ad-inline .ad-inner { height: 80px; }
.ad-box { border: 1px dashed rgba(255,255,255,0.14); border-radius: 10px; background: #141516; padding: 10px; position: relative; }
.ad-tag { position: absolute; top: 8px; left: 10px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; color: #68676a; text-transform: uppercase; }
.ad-inner { height: 90px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; }
/* The flex column layout above centers children on the cross (horizontal) axis,
   which shrinks a width:auto child to its content size — for an empty <ins>
   that's 0, so AdSense's own script sees availableWidth=0 and refuses to
   serve ("No slot size for availableWidth=0"), on EVERY ad slot on the site
   (they all sit inside .ad-inner). Forcing the ins itself to full width fixes
   this without touching the centering of the "Sponsorisé" label. */
.ad-inner .adsbygoogle { width: 100%; }
.ad-title { font-size: 12.5px; font-weight: 600; color: #7c7b7d; }
.ad-sub { font-size: 11px; color: #5e5d60; }

.input-wrap { width: 100%; display: flex; justify-content: center; padding: 0 24px 20px; flex-shrink: 0; }
.input-inner { width: 100%; max-width: 760px; }
.input-box {
  display: flex; align-items: flex-end; gap: 10px; border: 1px solid rgba(255,255,255,0.16);
  border-radius: 18px; background: #1a1b1d; padding: 11px 12px 11px 16px; cursor: text;
}
.input-field {
  flex: 1; border: none; outline: none; background: transparent; resize: none;
  font-family: inherit; font-size: 14px; line-height: 1.4; color: #f2f0ee;
  padding: 0; padding-bottom: 1px; max-height: 160px;
}
.input-field::placeholder { color: #7c7b7d; }
.input-field:disabled { cursor: not-allowed; }
.input-box.disabled { opacity: .55; }
.send-btn {
  width: 30px; height: 30px; border-radius: 50%; background: #ff7a45; display: flex; align-items: center;
  justify-content: center; cursor: pointer; flex-shrink: 0; transition: filter .15s, opacity .15s;
}
.send-btn:hover { filter: brightness(1.1); }
.send-btn.busy { pointer-events: none; opacity: .5; }
.disclaimer { text-align: center; font-size: 11px; color: #5e5d60; margin-top: 9px; }
.disclaimer.locked-hint { color: #ff8659; font-weight: 600; text-decoration: underline; }

.attach-btn {
  background: none; border: none; padding: 0; margin: 0 0 1px; color: #8f8e91;
  cursor: pointer; flex-shrink: 0; display: flex; transition: color .15s;
}
.attach-btn:hover { color: #f2f0ee; }
.input-box.disabled .attach-btn { cursor: not-allowed; pointer-events: none; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 7px; background: #1a1b1d;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 9px; padding: 6px 10px;
  margin-bottom: 8px; font-size: 12.5px; color: #dedcda;
}
.attach-chip button {
  background: none; border: none; color: #8f8e91; font-size: 15px; line-height: 1; cursor: pointer;
  padding: 0 0 0 4px; margin: 0;
}
.attach-chip button:hover { color: #f2f0ee; }

.bubble.ai.typing { display: flex; align-items: center; gap: 7px; padding: 16px; }
.bubble.ai.typing .typing-label { font-size: 12.5px; color: #a3a2a4; }
.bubble.ai.typing .dot { width: 6px; height: 6px; border-radius: 50%; background: #8f8e91; animation: itDotBlink 1.2s infinite; }
.bubble.ai.typing .dot:nth-child(3) { animation-delay: .2s; }
.bubble.ai.typing .dot:nth-child(4) { animation-delay: .4s; }
@keyframes itDotBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.bubble.ai.error { border-color: rgba(248,113,113,0.3); color: #f87171; }

/* Light Markdown rendering inside AI reply bubbles (headings, bullet
   lists, bold/italic, dividers) so long answers stay readable instead of
   showing raw ##/**/-- symbols. */
.bubble.ai .msg-line { margin: 0 0 2px; }
.bubble.ai .msg-gap { height: 10px; }
.bubble.ai .msg-heading { font-weight: 700; font-size: 14.5px; margin: 12px 0 6px; }
.bubble.ai .msg-heading:first-child { margin-top: 0; }
.bubble.ai .msg-list { margin: 4px 0 8px; padding-left: 20px; }
.bubble.ai .msg-list li { margin-bottom: 4px; }
.bubble.ai .msg-hr { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 12px 0; }
[dir="rtl"] .bubble.ai .msg-list { padding-left: 0; padding-right: 20px; }

/* ---------- overlays ---------- */
.overlay {
  position: absolute; inset: 0; background: rgba(10,10,11,0.72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 32px;
}
.overlay-card {
  width: 100%; background: #1a1b1d; border: 1px solid rgba(255,255,255,0.1); border-radius: 18px;
  padding: 26px; box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.jd-card { max-width: 600px; max-height: 100%; overflow-y: auto; padding: 28px; }
.back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #a3a2a4; cursor: pointer; margin-bottom: 18px; }
.back-link:hover { color: #f2f0ee; }
.jd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.jd-title { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; }
.jd-meta { font-size: 13.5px; color: #9a999b; margin-top: 4px; }
.jd-tags { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
.jd-salary { font-size: 13.5px; color: #dedcda; font-weight: 600; margin-top: 14px; }
.jd-body { font-size: 13.5px; color: #c9c8ca; line-height: 1.6; }
.jd-list { display: flex; flex-direction: column; gap: 7px; }
.jd-list-item { display: flex; gap: 8px; align-items: flex-start; }
.jd-dot { width: 4px; height: 4px; border-radius: 50%; background: #68676a; margin-top: 7px; flex-shrink: 0; }
.jd-list-text { font-size: 13.5px; color: #c9c8ca; line-height: 1.5; }
.jd-actions { display: flex; gap: 10px; margin-top: 14px; }

.ad-card { max-width: 440px; }
.ad-gate-sub { font-size: 12.5px; color: #9a999b; margin-bottom: 16px; line-height: 1.5; margin-top: 4px; }
.progress-track { height: 4px; background: rgba(255,255,255,0.08); border-radius: 3px; margin-top: 16px; overflow: hidden; }
.progress-fill { height: 100%; background: #ff7a45; border-radius: 3px; width: 0%; transition: width 1s linear; }
.ad-wait {
  text-align: center; margin-top: 16px; background: rgba(255,255,255,0.06); color: #9a999b;
  font-weight: 700; font-size: 13.5px; border-radius: 10px; padding: 12px; cursor: not-allowed;
}
.ad-continue { display: block; width: 100%; text-align: center; margin-top: 16px; padding: 12px; border-radius: 10px; font-size: 13.5px; }

/* ---------- SEO landing page (index.php, before the onboarding quiz) ---------- */
.landing { max-width: 880px; margin: 0 auto; padding: 28px 24px 60px; }
.landing-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 48px; }
.landing-lang-nav { display: flex; gap: 4px; }
.landing-lang-nav a {
  font-size: 12.5px; font-weight: 700; color: #9a999b; padding: 6px 10px; border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.1); transition: color .15s, border-color .15s;
}
.landing-lang-nav a:hover { color: #f2f0ee; border-color: rgba(255,255,255,0.22); }
.landing-lang-nav a.active { color: #ff7a45; border-color: rgba(255,122,69,0.35); background: rgba(255,122,69,0.08); }
.landing-hero { text-align: center; padding: 20px 0 36px; }
.landing-h1 { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 16px; }
.landing-sub { font-size: 16px; color: #b7b5b3; line-height: 1.6; max-width: 620px; margin: 0 auto 28px; }
.landing-cta { font-size: 15px; padding: 13px 26px; border-radius: 11px; }
.landing-cta-sub { font-size: 12.5px; color: #68676a; margin-top: 12px; }
.landing-ad { max-width: 640px; margin: 28px auto; }
.landing-features { margin: 44px 0; }
.landing-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-top: 18px; }
.landing-feature-card { border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 20px; background: #1a1b1d; }
.landing-feature-title { font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.landing-feature-desc { font-size: 13px; color: #9a999b; line-height: 1.55; }
.landing-powered { text-align: center; margin: 48px 0; padding: 28px; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; background: #1a1b1d; }
.landing-powered-badge {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #ff9d6e; background: rgba(255,122,69,0.12); border-radius: 20px; padding: 5px 14px; margin-bottom: 10px;
}
.landing-powered-body { font-size: 13.5px; color: #9a999b; line-height: 1.6; max-width: 480px; margin: 0 auto; }
.landing-faq { margin: 44px 0; }
.landing-faq-item {
  border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 4px 18px; margin-top: 10px; background: #1a1b1d;
}
.landing-faq-item summary { padding: 14px 0; font-weight: 700; font-size: 14px; cursor: pointer; list-style: none; }
.landing-faq-item summary::-webkit-details-marker { display: none; }
.landing-faq-item summary::after { content: '+'; float: right; color: #68676a; font-weight: 400; }
.landing-faq-item[open] summary::after { content: '−'; }
.landing-faq-item p { font-size: 13.5px; color: #9a999b; line-height: 1.6; margin: 0 0 16px; }
[dir="rtl"] .landing-faq-item summary::after { float: left; }
.landing-footer { text-align: center; margin-top: 52px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.08); }
.landing-footnote { font-size: 11px; color: #5e5d60; margin-top: 16px; max-width: 480px; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
  .landing-h1 { font-size: 28px; }
  .landing-feature-grid { grid-template-columns: 1fr; }
}

/* ---------- mobile sidebar toggle ---------- */
/* Hidden on desktop (the sidebar is always visible there, see .app above).
   On mobile (see the max-width:860px block below) the sidebar is
   display:none by default and only appears once .app gets the
   "sidebar-open" class — this button (wired in script.js) is what
   actually toggles that class; without it there was no way to open the
   sidebar at all on a small screen. */
.mobile-menu-btn {
  display: none; position: absolute; top: 14px; left: 14px; z-index: 65;
  width: 38px; height: 38px; align-items: center; justify-content: center;
  background: #1a1b1d; border: 1px solid rgba(255,255,255,0.12); border-radius: 9px;
  color: #f2f0ee; cursor: pointer;
}
.mobile-menu-btn:hover { background: rgba(255,255,255,0.08); }
.sidebar-backdrop {
  display: none; position: absolute; inset: 0; z-index: 65; background: rgba(0,0,0,0.5);
}
.app.sidebar-open .sidebar-backdrop { display: block; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .sidebar { display: none; }
  .app.sidebar-open .sidebar { display: flex; position: absolute; inset: 0 auto 0 0; z-index: 70; width: 240px; }
  .mobile-menu-btn { display: flex; }
  .chatarea { padding-top: 64px; }
  .sugg-grid { grid-template-columns: 1fr; }
  .ob-wrap { margin-top: 64px; }
  .ob-card { padding: 26px; }
  .jd-card, .ad-card { padding: 20px; }
}