/* Apple-style modal */
.overlay{position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.25); z-index:9998}
.overlay[hidden]{display:none !important}

/* Fullscreen chat (only when opened from header pencil) */
.overlay.fullscreen{
  place-items:stretch;
  padding:0;
  background:rgba(0,0,0,.34);
}
.overlay.fullscreen .panel{
  width:100%;
  height:100dvh;
  max-height:none !important;
  border-radius:0;
  margin:0;
}
.overlay.fullscreen .chatPanel{
  max-height:none !important;
}
.overlay.fullscreen .chatTop{
  padding-top:env(safe-area-inset-top);
}


/* Ensure service modals appear ABOVE chat overlay */
.modalBack{ z-index: 12020 !important; }
.sheetBack{ z-index: 12010 !important; }
.modal.appleModal{
  width:min(520px, 92vw);
  border-radius:22px;
  padding:18px 18px 16px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(18,18,20,.78);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 30px 90px rgba(0,0,0,.6);
}
.modalClose{
  position:absolute; right:12px; top:12px;
  width:40px; height:40px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.9);
  font-size:22px; line-height:38px;
}
.bioHead{display:flex; gap:12px; align-items:center; margin-top:8px}
.bioAvatar{width:56px;height:56px;border-radius:999px; object-fit:cover; border:1px solid rgba(255,255,255,.16)}
.bioName{font-weight:900; font-size:18px}
.bioTag{opacity:.7; font-size:13px; margin-top:2px}
.bioCopy{margin-top:14px; font-size:15px; line-height:1.35; opacity:.92}
.bioActions{display:flex; flex-direction:column; gap:10px; margin-top:16px}
.btnPrimary{
  width:100%; border:0; border-radius:16px;
  padding:14px 14px;
  background:rgba(190,160,90,.95);
  color:#111; font-weight:900; font-size:16px;
}
.btnPrimary:active{transform:scale(.99); opacity:.92}
.btnGhost{
  width:100%; border-radius:16px;
  padding:14px 14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  font-weight:800; font-size:15px;
}
.btnGhost:active{opacity:.7}

.social{max-width:62vw; overflow-x:auto; scrollbar-width:none}
.social::-webkit-scrollbar{display:none}

#toolboxBtn{
  width:44px; height:44px; border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  font-size:22px; font-weight:900;
}

#toolboxBtn{
  width:44px;height:44px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  font-size:22px;font-weight:900;
}

/* v30: keep chat/test sheets docked to bottom (iOS) */
.overlay {
  align-items: flex-end !important;
}
.chatModal, .appleChatModal, .chatSheet, .modal.chat {
  margin: 0 auto env(safe-area-inset-bottom, 0) auto !important;
}
/* ensure modal doesn't float center */
.overlay[hidden]{display:none !important}

/* Fullscreen chat (only when opened from header pencil) */
.overlay.fullscreen{
  place-items:stretch;
  padding:0;
  background:rgba(0,0,0,.34);
}
.overlay.fullscreen .panel{
  width:100%;
  height:100dvh;
  max-height:none !important;
  border-radius:0;
  margin:0;
}
.overlay.fullscreen .chatPanel{
  max-height:none !important;
}
.overlay.fullscreen .chatTop{
  padding-top:env(safe-area-inset-top);
}


#chatOverlay, #testOverlay, #resultOverlay, #callOverlay, #bioOverlay{
  align-items:flex-end !important;
}

/* v30: chat header layout */
.chatHeader, .chatTopbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.chatHeaderRight{justify-self:end; display:flex; justify-content:flex-end; align-items:center;}

/* spacing between header icons (kawa + ?) */
.chatHeaderRight{ gap: 14px; }
.chatAvatarBtn{
  width:36px;height:36px;border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.chatAvatarBtn img{
  width:100%;height:100%;object-fit:cover;
  display:block;
}

/* v31: center chat title (overridden by flex layout above) */

.toolSection{margin-top:12px}
.toolSectionTitle{font-size:12px;opacity:.72;font-weight:900;margin-bottom:8px}
.toolHint{font-size:13px;line-height:1.35;opacity:.78;margin:0 0 10px}
.toolCoffee{border-top:0 !important;padding-top:10px}


/* ===== eBook shop modal (v31) ===== */
#shopModal .modalCard{ max-height: calc(100svh - 36px); overflow:hidden; }
#shopModal .shopGrid{
  margin-top: 10px;
  padding: 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  max-height: 46vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  display:flex;
  flex-direction:column;
  gap: 12px;
}
#shopModal .shopCard{
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  padding: 12px;
}
#shopModal .shopTitle{ font-weight: 650; font-size: 14px; line-height: 1.35; }
#shopModal .shopDesc{ margin-top: 8px; color: rgba(255,255,255,.72); font-size: 13px; line-height: 1.5; }
#shopModal .shopMetaRow{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top: 8px; }
#shopModal .shopPrice{ font-size: 13px; color: rgba(255,255,255,.78); }
#shopModal .shopBadge{
  font-size: 11px;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(183,154,90,.35);
  background: rgba(183,154,90,.10);
  color: rgba(255,255,255,.85);
  white-space: nowrap;
}
#shopModal .shopActions{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
#shopModal .shopBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(183,154,90,.16);
  color: rgba(255,255,255,.92);
  font-size: 12px;
  text-decoration:none;
}
#shopModal .shopBtn--ghost{ background: rgba(255,255,255,.06); }

/* =========================
   Extras: credits, cookies, FAQ, legal
   ========================= */

.siteCredit{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  z-index: 40;
  font-size: 11px;
  color: rgba(245,245,245,.35);
  letter-spacing: .03em;
  pointer-events: none;
  text-align: center;
  width: min(560px, calc(100% - 24px));
}

.cookieBanner{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 64px;
  z-index: 12030;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(15,15,16,.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.5);
}
.cookieText{ color: rgba(245,245,245,.80); font-size: 13px; line-height: 1.35; }
.cookieActions{ display:flex; gap:10px; margin-top: 10px; flex-wrap: wrap; }
.cookieActions .btn{ flex: 1 1 auto; }

html.page--faq, body.page--faq,
html.page--legal, body.page--legal,
html.page--blog, body.page--blog{
  height:auto;
  min-height:100%;
  overflow:auto;
}
body.page--faq, body.page--legal, body.page--blog{ overflow:auto; }

/* Page wrapper so fixed topbar never covers content */
.pageMain{
  padding: calc(var(--topbar) + 18px) var(--pad) 70px;
  max-width: var(--max);
  margin: 0 auto;
}

.pageMain .prose{ width: 100%; }

.blogWrap{ width: min(900px, calc(100% - 28px)); margin: 0 auto; padding: 22px 0 60px; }
.blogIntro h1{ margin: 0; font-size: clamp(28px, 4.6vw, 44px); letter-spacing: -0.3px; }
.blogIntro .muted{ margin-top: 10px; color: rgba(245,245,245,.62); }

/* Simple header used by FAQ/Legal pages */
.topbar__left{ display:flex; align-items:center; gap:10px; padding: 14px; }
.topbar__right{ display:flex; align-items:center; justify-content:flex-end; gap:10px; padding: 14px; }
.name{ font-weight: 850; letter-spacing: .2px; font-size: 15px; color: rgba(245,245,245,.92); text-decoration:none; }
.topbar__social{ display:flex; gap:8px; align-items:center; }
.soc{
  width: 30px; height: 30px;
  border-radius: 999px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.88);
}
.soc svg{ width: 14px; height: 14px; display:block; }

.faqWrap{ margin-top: 18px; }
.faqProlog{ border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); border-radius: 18px; padding: 14px; }
.faqLead{ margin: 0; color: rgba(245,245,245,.88); line-height: 1.55; }
.faqH{ margin: 18px 0 10px; font-size: 14px; letter-spacing: .10em; text-transform: uppercase; color: rgba(245,245,245,.55); }
.acc{ border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); border-radius: 16px; overflow:hidden; margin-bottom: 10px; }
.acc__sum{ list-style:none; cursor:pointer; padding: 14px 14px; display:flex; align-items:center; justify-content:space-between; gap: 12px; }
.acc__sum::-webkit-details-marker{ display:none; }
.acc__q{ color: rgba(245,245,245,.92); font-weight: 650; }
.acc__i{ width: 18px; height: 18px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); position: relative; opacity: .8; flex:0 0 auto; }
.acc__i::before, .acc__i::after{ content:""; position:absolute; inset: 0; margin:auto; background: rgba(245,245,245,.78); }
.acc__i::before{ width: 9px; height: 1.6px; border-radius: 999px; }
.acc__i::after{ width: 1.6px; height: 9px; border-radius: 999px; }
details[open] .acc__i::after{ opacity:0; }
.acc__a{ padding: 0 14px 14px; color: rgba(245,245,245,.78); line-height: 1.6; }
.acc__a p{ margin: 10px 0 0; }
.acc__a .muted{ color: rgba(245,245,245,.58); }

.legalWrap{ margin-top: 18px; display:grid; gap: 12px; }
.legalCard{ border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.03); border-radius: 18px; padding: 14px; }
.legalCard h2{ margin: 0; font-size: 16px; }
.legalCard p{ margin: 10px 0 0; color: rgba(245,245,245,.78); line-height: 1.6; }
.legalCard .muted{ color: rgba(245,245,245,.58); }
.legalFoot{ margin-top: 6px; font-size: 12px; color: rgba(245,245,245,.45); }


/* =========================
   Subpages: Blog / FAQ / Ważne informacje
   ========================= */
.pageMain{
  width: min(100%, 860px);
  margin: 0 auto;
  padding: calc(var(--topbar) + 22px) var(--pad) 70px;
}
.page--blog .pageMain,
.page--faq .pageMain,
.page--legal .pageMain{
  padding-top: calc(var(--topbar) + 22px + env(safe-area-inset-top));
}

.page--blog .prose, .page--faq .prose, .page--legal .prose{
  width: 100%;
  max-width: 860px;
}

/* Topbar pills */
.topPill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(244,244,244,.14);
  background: rgba(244,244,244,.05);
  color: rgba(244,244,244,.90);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.topPill:hover{ background: rgba(244,244,244,.08); border-color: rgba(244,244,244,.22); }
.topPill--info{
  width:34px;
  padding:0;
  font-weight:800;
  font-size: 14px;
}

/* Blog */
.blogHead{ margin-top: 6px; padding: 18px 0 14px; border-bottom: 1px solid rgba(244,244,244,.10); }
.blogKicker{ color: rgba(244,244,244,.58); font-size: 13px; margin-top: 6px; line-height:1.6; }
.postList{ display:grid; gap: 12px; margin-top: 16px; }
.postCard{ border-radius: 18px; border: 1px solid rgba(244,244,244,.12); background: rgba(244,244,244,.03); padding: 14px 14px; transition: transform .18s ease, background .18s ease; text-decoration:none; }
.postCard:hover{ background: rgba(244,244,244,.05); transform: translateY(-1px); }
.postCard__top{ display:flex; justify-content:space-between; gap: 12px; align-items:flex-start; }
.postTitleLink{ color: rgba(244,244,244,.94); font-weight: 650; font-size: 16px; line-height: 1.28; text-decoration:none; }
.postExcerpt{ color: rgba(244,244,244,.68); margin-top: 8px; line-height:1.55; }
.postMeta--plain{ margin-top: 10px; color: rgba(244,244,244,.56); font-size: 12px; display:flex; gap:8px; flex-wrap:wrap; }
.metaSep{ opacity:.6; }

/* FAQ */
.faq{ margin-top: 14px; display:grid; gap: 12px; }
.faqItem{
  border-radius: 18px;
  border: 1px solid rgba(244,244,244,.12);
  background: rgba(244,244,244,.03);
  padding: 12px 14px;
}
.faqItem summary{
  cursor:pointer;
  list-style:none;
  font-weight:650;
  color: rgba(244,244,244,.92);
}
.faqItem summary::-webkit-details-marker{ display:none; }
.faqItem summary::after{
  content:"›";
  float:right;
  opacity:.7;
  transform: rotate(90deg);
  transition: transform .18s ease;
}
.faqItem[open] summary::after{ transform: rotate(-90deg); }
.faqItem p{ margin: 10px 0 0; color: rgba(244,244,244,.72); line-height:1.6; font-size: 15px; }

/* Legal */
.legalDoc{ margin-top: 10px; display:grid; gap: 12px; }
.legalSection{
  border-radius: 18px;
  border: 1px solid rgba(244,244,244,.12);
  background: rgba(244,244,244,.03);
  padding: 14px 14px;
}
.legalSection h2{ margin:0 0 10px 0; font-size: 18px; }
.legalSection p, .legalSection li{ color: rgba(244,244,244,.72); line-height:1.6; font-size: 15px; }
.legalSection ul{ margin: 8px 0 0 18px; }

/* Center credit */
.siteCredit{ text-align:center; }

/* Chat: online dot */
.onlineDot{
  display:inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  margin-left: 8px;
  background: rgba(63, 240, 140, .95);
  box-shadow: 0 0 0 3px rgba(63,240,140,.12);
  animation: onlinePulse 1.6s ease-in-out infinite;
  vertical-align: middle;
}
@keyframes onlinePulse{
  0%,100%{ transform: scale(1); opacity: .9; }
  50%{ transform: scale(1.25); opacity: 1; }
}

/* Simple cards list (Legal) */
.listCards{ display:grid; gap: 12px; }
.linkCard--static{
  border-radius: 18px;
  border: 1px solid rgba(244,244,244,.12);
  background: rgba(244,244,244,.03);
  padding: 14px 14px;
}
.linkCard__t{ font-weight:650; color: rgba(244,244,244,.92); }
.linkCard__s{ margin-top: 8px; color: rgba(244,244,244,.72); line-height:1.6; font-size: 15px; }

/* One-time subtle shimmer for header CTA */
.topPill--shimmer{ position: relative; overflow:hidden; }
.topPill--shimmer::after{
  content:"";
  position:absolute;
  inset:-10px;
  background: linear-gradient(120deg, transparent 0%, rgba(183,154,90,.35) 45%, transparent 65%);
  transform: translateX(-140%);
  opacity:0;
  animation: topPillShimmer 1.25s ease-out .35s 1;
}
@keyframes topPillShimmer{
  0%{ transform: translateX(-140%); opacity:0; }
  10%{ opacity:.95; }
  100%{ transform: translateX(140%); opacity:0; }
}

.siteCredit{ text-align:center; }



/* ===== v15: FAQ/LEGAL polish + header actions ===== */
body.page{ overflow:auto !important; height:auto !important; min-height:100vh !important; }
html,body{ scroll-padding-top: calc(var(--topbar) + env(safe-area-inset-top)); }

.faqList{ margin-top:16px; display:grid; gap:14px; }
.faqItem{ border-radius:22px; }
.faqItem summary{ padding:16px 16px; font-size:17px; }
.faqItem .faqBody{ padding: 0 16px 16px 16px; font-size:15px; }
.faqItem summary::after{
  content:"";
  width:18px;height:18px;flex:0 0 18px;
  background: radial-gradient(circle at 30% 30%, rgba(245,245,245,.95), rgba(245,245,245,.55));
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>') center/18px 18px no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"/></svg>') center/18px 18px no-repeat;
  opacity:.75;
}
.faqItem[open] summary::after{
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="m7.41 15.41 4.59-4.58 4.59 4.58L18 14l-6-6-6 6z"/></svg>') center/18px 18px no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="m7.41 15.41 4.59-4.58 4.59 4.58L18 14l-6-6-6 6z"/></svg>') center/18px 18px no-repeat;
}

.pageCard{ border-radius:22px; padding:16px 16px; }
.pageCard h2{ font-size:18px; }
.pageCard p{ font-size:15px; }

.topbarRight{ display:flex; gap:10px; align-items:center; }
.actionIcon{
  width:40px;height:40px;border-radius:12px;
  border:1px solid rgba(245,245,245,.12);
  background: rgba(245,245,245,.04);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  line-height:1;
  color: rgba(245,245,245,.9);
}
.actionIcon svg{ width:18px;height:18px; opacity:.92; display:block; }
.actionIcon:active{ transform: translateY(1px); }


.siteCredit a, .siteCredit .creditLink{
  pointer-events:auto;
  color: rgba(245,245,245,.48);
  text-decoration:none;
  border-bottom: 1px solid rgba(245,245,245,.16);
}
.siteCredit a:hover{ opacity:.9; }


/* About (naffy-like) */
.aboutNaffy{
  width:min(860px, calc(100% - 24px));
  margin: 18px auto 0;
  display:grid;
  grid-template-columns: 120px 1fr;
  gap:16px;
  align-items:center;
  padding:16px;
  border-radius:24px;
  border:1px solid rgba(245,245,245,.12);
  background: rgba(12,12,13,.52);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
}
.aboutNaffyAvatar{
  width:120px;height:120px;
  border-radius:28px;
  object-fit:cover;
  border:1px solid rgba(245,245,245,.14);
}
.aboutNaffyName{
  font-size:22px;
  font-weight:850;
  letter-spacing:-.01em;
}
.aboutNaffyProject{
  margin-top:2px;
  font-size:14px;
  color: rgba(245,245,245,.70);
}
.aboutNaffySocial{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:12px;
}
.socialIconBtn{
  width:42px;height:42px;
  border-radius:14px;
  border:1px solid rgba(245,245,245,.12);
  background: rgba(245,245,245,.04);
  display:grid;
  place-items:center;
  color: rgba(245,245,245,.90);
  text-decoration:none;
}
.socialIconBtn svg{ width:18px; height:18px; opacity:.95; }
.socialIconBtn:hover{ background: rgba(245,245,245,.06); }
.aboutNaffyPills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
@media (max-width:520px){
  .aboutNaffy{ grid-template-columns: 1fr; }
  .aboutNaffyAvatar{ width:96px; height:96px; border-radius:24px; }
}


/* ===== Modals: FAQ & Legal (step2a) ===== */

.modalCard.modalWide{ max-width: 860px; width: min(860px, calc(100vw - 28px)); }
.faqList{ display:block; }
.faqItem{ border: 1px solid rgba(255,255,255,.10); border-radius: 14px; padding: 10px 12px; margin: 10px 0; background: rgba(255,255,255,.04); }
.faqItem > summary{ cursor:pointer; font-weight: 650; list-style:none; }
.faqItem > summary::-webkit-details-marker{ display:none; }
.faqA{ margin-top:8px; opacity:.92; line-height:1.5; }
.legalBody h3{ margin: 14px 0 6px; font-size: 14px; letter-spacing:.2px; }
.legalBody p{ margin: 0 0 10px; opacity:.92; line-height:1.6; }
.legalBody a{ text-decoration: underline; }


/* ===== About modal (v32) ===== */

.aboutGrid{ display:grid; grid-template-columns: 220px 1fr; gap:22px; align-items:start; }
@media (max-width:720px){ .aboutGrid{ grid-template-columns:1fr; } .aboutLeft{ display:flex; justify-content:center; } }
.aboutAvatar{ width:220px; height:220px; object-fit:cover; border-radius:24px; box-shadow:0 12px 40px rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.12); }
.aboutKicker{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; opacity:.75; margin-bottom:6px; }
.aboutName{ font-size:22px; font-weight:700; line-height:1.15; }
.aboutNick{ opacity:.75; font-weight:600; }
.aboutSocial{ display:flex; gap:10px; margin:12px 0 16px; }
.iconBtn{ width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:14px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); box-shadow: 0 10px 24px rgba(0,0,0,.18); }
.iconBtn svg{ width:20px; height:20px; }
.aboutText p{ margin:10px 0; }
.aboutList{ margin:10px 0 6px 18px; }
.aboutList li{ margin:6px 0; }
.aboutCtaRow{ margin-top:14px; display:flex; gap:10px; flex-wrap:wrap; }
.muted{ opacity:.8; }



/* ===== $100k Polish: motion, hit areas, micro-interactions ===== */
:root{
  --ease-apple: cubic-bezier(.2,.8,.2,1);
}

/* Bigger tap targets for header icons (iOS-friendly) */
.iconBtn, .topBtn, .chatHelpBtn, .hamburgerBtn{
  min-width:44px;
  min-height:44px;
  padding:10px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Micro-interactions */
.iconBtn, .topBtn, .btn, .topPill, .item{
  transition: transform .18s var(--ease-apple), filter .18s var(--ease-apple), opacity .18s var(--ease-apple);
}
.iconBtn:active, .topBtn:active, .btn:active, .topPill:active, .item:active{
  transform: translateY(1px) scale(.99);
  filter: brightness(.98);
}

/* Modal animations */
.modalBack{
  opacity:0;
  transition: opacity .22s var(--ease-apple);
  will-change: opacity;
}
.modalBack:not([hidden]){
  opacity:1;
}
.modalCard{
  transform: translateY(10px) scale(.985);
  opacity:0;
  transition: transform .28s var(--ease-apple), opacity .22s var(--ease-apple);
  will-change: transform, opacity;
}
.modalBack:not([hidden]) .modalCard{
  transform: translateY(0) scale(1);
  opacity:1;
}

/* Crisp typography in modals */
.modalCard{
  line-height:1.55;
  letter-spacing: .1px;
}
.modalCard h2, .modalCard .modalTitle, .shareTop{
  letter-spacing: .2px;
}
.miniTitle{
  margin-bottom:8px;
}
.miniList li{
  margin: 6px 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .modalBack, .modalCard, .iconBtn, .topBtn, .btn, .topPill, .item{
    transition: none !important;
  }
}

/* POLISH_V1: modal polish, typography, buttons, hit-areas */
:root{
  --ease-apple: cubic-bezier(.2,.9,.2,1);
  --modal-dur: 220ms;
}

/* Header icons: 44x44 hit-area */
.topBtn, .iconBtn, #menuBtn, #newChatBtn{
  width:44px !important;
  height:44px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:12px !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Unify modal backdrop + card animation */
.modalBack{
  opacity:0;
  pointer-events:none;
  transition: opacity var(--modal-dur) var(--ease-apple);
}
.modalBack[hidden]{
  display:block; /* keep for transition; JS toggles hidden, but we'll also set data-open */
}
.modalBack:not([hidden]){
  opacity:1;
  pointer-events:auto;
}
.modalCard{
  transform: translateY(10px) scale(.985);
  transition: transform var(--modal-dur) var(--ease-apple);
}
.modalBack:not([hidden]) .modalCard{
  transform: translateY(0) scale(1);
}

/* Modal typography */
.modalCard{
  font-size:16px;
  line-height:1.55;
}
.faqA, .legalBody, .aboutBody{
  line-height:1.7;
}
.aboutBody, .legalBody{
  font-size:16px;
}
/* Wider comfortable reading */
.modalWide .aboutBody, .modalWide .legalBody{
  max-width: 780px;
}

/* Modal header consistency */
.aboutTop, .modalHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 10px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.aboutTitle, .modalTitle{
  font-size:18px;
  font-weight:650;
  letter-spacing:.01em;
}

/* Buttons system */
.btn{
  border-radius:14px;
  padding:12px 14px;
  font-weight:600;
  transition: transform 120ms var(--ease-apple), opacity 120ms var(--ease-apple);
}
.btn:active{ transform: scale(.98); }
.btnGold{ /* primary */
  font-weight:650;
}
.btnGhost{ /* ghost/secondary if present */
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

/* Scroll lock when modal open */
body.modalOpen{
  overflow:hidden !important;
  touch-action:none;
}


/* Info modal copy polish */
.infoIntro{
  font-size:15.5px;
  line-height:1.65;
  color:rgba(255,255,255,0.88);
}
.infoIntro p{
  margin:0 0 14px 0;
}
.infoIntro strong{
  font-weight:650;
  color:#fff;
}
.infoOutro{
  margin-top:18px;
  font-size:16px;
  letter-spacing:.01em;
}

/* INFO_IOS_ANIM_V1: ultra-clean iOS spacing + subtle text reveal */
#chatInfoModal .aboutBody{
  padding-top: 6px;
}

#chatInfoModal .infoIntro{
  font-size: 15.75px;
  line-height: 1.72;
  color: rgba(255,255,255,.88);
  letter-spacing: .01em;
}

#chatInfoModal .infoIntro p{
  margin: 0 0 16px 0;
}

#chatInfoModal .infoOutro{
  margin-top: 20px;
  font-size: 16px;
}

#chatInfoModal .infoPills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px 0;
}

#chatInfoModal .pill{
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-size: 12.75px;
  font-weight: 650;
  color: rgba(255,255,255,.92);
}

/* Subtle stagger reveal when modal opens */
@media (prefers-reduced-motion: no-preference){
  #chatInfoModal.modalBack:not([hidden]) .infoIntro > *{
    opacity: 0;
    transform: translateY(6px);
    animation: infoFadeUp 420ms var(--ease-apple, cubic-bezier(.2,.9,.2,1)) forwards;
  }
  #chatInfoModal.modalBack:not([hidden]) .infoIntro > *:nth-child(1){ animation-delay: 20ms; }
  #chatInfoModal.modalBack:not([hidden]) .infoIntro > *:nth-child(2){ animation-delay: 80ms; }
  #chatInfoModal.modalBack:not([hidden]) .infoIntro > *:nth-child(3){ animation-delay: 140ms; }
  #chatInfoModal.modalBack:not([hidden]) .infoIntro > *:nth-child(4){ animation-delay: 200ms; }
  #chatInfoModal.modalBack:not([hidden]) .infoIntro > *:nth-child(5){ animation-delay: 260ms; }
  #chatInfoModal.modalBack:not([hidden]) .infoIntro > *:nth-child(6){ animation-delay: 320ms; }
}

/* v4: remove intro animation in chat info (requested) */
#chatInfoModal.modalBack:not([hidden]) .infoIntro > *{
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}
@keyframes infoFadeUp{
  to{ opacity: 1; transform: translateY(0); }
}

/* Inline links inside chat bubbles (trust-first onboarding) */
.inline-link{
  color:#3b82f6;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* v4: onboarding line breaks inside first message */
.onbLine{ display:block; margin-top:2px; }
.inline-link:active{ opacity:.85; }

/* Embedded legal documents */
.legalFrame{
  width:100%;
  height:70vh;
  border:0;
  border-radius:14px;
  background:transparent;
}

.modalWide{ max-width: 920px; }

/* ===== Support Modal (Premium) ===== */
.supportModal{ max-width: 520px; }
.supportModal__top{ margin-bottom: 14px; }
.supportModal__kicker{
  font-size: 12px;
  opacity: .75;
  letter-spacing: .2px;
  font-weight: 700;
}
.supportModal__title{
  margin-top: 6px;
  font-size: 18px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: .1px;
}
.supportModal__lead{
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  opacity: .8;
}
.supportModal__card{
  margin-top: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  padding: 14px;
}
.supportModal__cardTitle{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .1px;
  opacity: .9;
}
.supportModal__list{
  margin: 10px 0 0 0;
  padding-left: 18px;
  font-size: 12px;
  line-height: 1.55;
  opacity: .78;
}
.supportModal__note{
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.45;
  opacity: .72;
}
.supportModal__cta{ width: 100%; }
.supportModal__micro{
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  opacity: .62;
}
.supportModal__micro2{ display:block; margin-top: 6px; opacity: .75; }

/* ===== Form fields (modals) ===== */
.grid2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 700px){
  .grid2{ grid-template-columns: 1fr; }
}

.textField{
  width:100%;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.92);
  padding: 12px 12px;
  outline:none;
  font-size: 13px;
}
.textField:focus{ border-color: rgba(255,255,255,.22); }

/* ===== Sheets: section titles + primary items ===== */
.sheetSectionTitle{
  margin: 10px 0 6px 0;
  font-size: 11px;
  letter-spacing: .2px;
  opacity: .65;
  font-weight: 800;
  text-transform: uppercase;
}
.item.primary{
  font-weight: 900;
}

/* Reply generator output cards */
.replyCards{ display:grid; gap: 10px; margin-top: 12px; }
.replyCard{
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  padding: 12px;
}
.replyCardT{ font-weight: 900; font-size: 12px; opacity: .9; }
.replyCardB{ margin-top: 8px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.replyCardRow{ display:flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

/* ===== Chat info: support block ===== */
.chatInfoSupport{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
}
.chatInfoSupport__title{
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .1px;
}
.chatInfoSupport__text{
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  opacity: .78;
}
.chatInfoSupport .btn{ width:100%; margin-top:10px; }

/* ===== Chat header coffee icon ===== */
.chatTop__icon{
  margin-left: 10px;
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .18s ease;
}
.chatTop__icon:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.20);
}

/* Ensure coffee icon is clickable */
.chatTitle .chatTop__icon{ pointer-events:auto; }

/* ===== HYBRID ULTRA PATCH (composer legal + growth tools) ===== */
.composerLegal{padding:6px 14px 10px;font-size:11.5px;line-height:1.2;color:rgba(245,245,245,.55); text-align:center; width:100%; }
/* Override legacy "link blue" styling to keep on-brand (gold) */
.inlineLink{
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  color: rgba(183,154,90,.95);
  font-weight:650;
  cursor:pointer;
  text-decoration:none;
  font: inherit;
}
.inlineLink:hover{ opacity:0.85; }
.inlineLink:active{opacity:.75; transform:translateY(1px);}

.replyBox{
  width:100%;
  resize:vertical;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:inherit;
  border-radius:14px;
  padding:12px 12px;
  outline:none;
}

.replyOut{
  margin-top:12px;
  white-space:pre-wrap;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
  font-size:14px;
  line-height:1.45;
}

.diagSummary{
  white-space:pre-wrap;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
  font-size:13.5px;
  line-height:1.45;
  margin-top:10px;
}


.diagResult{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
  font-size:13.5px;
  line-height:1.45;
  margin-top:10px;
}

/* ===== HUMAN V2 – Offer tiles + Chat Info cards ===== */
#chatInfoModal .infoFine{font-size:12.8px;line-height:1.55;color:var(--muted)}
#chatInfoModal .infoLead{margin:0 0 10px 0;opacity:.95}
#chatInfoModal .infoCards{display:grid;gap:10px;margin:10px 0 10px}
#chatInfoModal .infoCard{padding:12px 12px;border-radius:14px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04)}
#chatInfoModal .infoCardT{font-size:12px;font-weight:750;letter-spacing:.2px;color:rgba(255,255,255,.88);margin-bottom:6px}
#chatInfoModal .infoCardD{font-size:12.6px;line-height:1.55;color:rgba(245,245,245,.78)}
#chatInfoModal .infoMicro{margin:10px 0 0;font-size:12px;opacity:.82}

/* Chat header coffee icon (round, like "?") */
#chatCoffeeBtn{width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.04);display:grid;place-items:center;font-size:16px}
#chatCoffeeBtn svg{width:18px;height:18px;opacity:.95}

/* Offer modal tiles */
.offerGrid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:6px}
.offerCard{text-align:left;padding:14px 14px 12px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);color:inherit}
.offerCard:active{transform:translateY(1px)}
.offerKicker{opacity:.72;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.offerTitle{margin-top:6px;font-weight:700;font-size:16px}
.offerDesc{margin-top:6px;opacity:.82;font-size:13px;line-height:1.4}
.offerFoot{margin-top:12px;text-align:center;opacity:.72;font-size:12.5px;line-height:1.35}

@media (min-width: 740px){
  .offerGrid{grid-template-columns:1fr 1fr}
}

/* Saved chats */
.savedChatsList{display:grid;gap:10px}
.savedChatItem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.03)}
.savedChatMeta{display:flex;flex-direction:column;gap:2px;min-width:0}
.savedChatTitle{font-weight:750;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.savedChatDate{opacity:.7;font-size:12px}
.savedChatActions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.savedChatActions .btn{padding:8px 10px;font-size:13px}

/* ===== Więcej: duże kafle (Apple/Stripe vibe) ===== */
.moreTiles{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:6px 0 14px 0;
}
@media (max-width:520px){
  .moreTiles{ grid-template-columns:1fr; }
}
.moreTile{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  border-radius:16px;
  padding:14px;
  text-align:left;
  color:inherit;
}
.moreTile:active{ transform:translateY(1px); }
.moreTileTop{ font-size:12px; opacity:.8; }
.moreTileBig{ font-size:18px; font-weight:800; margin-top:2px; }
.moreTileSub{ font-size:12px; opacity:.78; margin-top:6px; line-height:1.25; }


/* === OSCANRE_MORE_MINIFY === */
/* Hide rarely-used items in the chat "Więcej" sheet if present.
   Keep: Oferta, Jak działam, Diagnoza, Co mu odpisać, Wesprzyj projekt. */
#menuSheet .menuItem[data-kind="rare"],
#menuSheet .menuItem.is-rare{
  display:none !important;
}

/* =====================================================================
   Minimal chat UI additions (Apple/Stripe vibe)
   ===================================================================== */


/* Tools bar: Apple/Stripe segmented control, adapted to dark/glass */
.chatToolsBar{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;

  padding:12px 14px;
  border-bottom:1px solid rgba(245,245,245,.10);
  background:rgba(0,0,0,.06);
}
.chatToolsBar::before{
  content:"";
  display:block;
  height:0;
}
.chatToolsBar{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;

  display:flex;
  justify-content:center;
}
.chatToolsBar .toolSeg{
  width:min(520px, 100%);
  display:flex;
  gap:6px;
  padding:6px;
  border-radius:16px;
  border:1px solid rgba(245,245,245,.12);
  background:rgba(12,12,13,.55);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.toolLink{
  flex:1 1 0;
  appearance:none;
  border:0;
  background:transparent;
  color:rgba(245,245,245,.78);
  font-size:14px;
  font-weight:700;
  padding:10px 10px;
  border-radius:12px;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.toolLink:hover{ background:rgba(245,245,245,.08); color:rgba(245,245,245,.92); }
.toolLink.isActive{ background:rgba(245,245,245,.10); color:rgba(245,245,245,.98); }
.toolLink:focus-visible{ outline:2px solid rgba(255,255,255,.22); outline-offset:2px; }

.toolLink--mini{
  margin-left:auto;
  border-radius:14px;
  padding:9px 12px;
  font-weight:800;
}


/* Situation context (v2: compact pill, no bullet list) */
.situationCard{
  width:min(520px, 100%);
  margin:10px auto 0;
  border-radius:18px;
  background:rgba(12,12,13,.48);
  border:1px solid rgba(245,245,245,.12);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  overflow:hidden;
}
.situationPill{
  padding:12px 14px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.situationPill__left{min-width:0;flex:1 1 auto}
.situationTitle{font-size:12px;letter-spacing:.28px;text-transform:uppercase;color:rgba(245,245,245,.55);font-weight:800;}
.situationText{
  margin-top:6px;
  color:rgba(245,245,245,.92);
  font-size:15px;
  line-height:1.25;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.situationEdit{
  appearance:none;
  border:1px solid rgba(245,245,245,.12);
  background:rgba(0,0,0,.12);
  color:rgba(245,245,245,.90);
  font-size:14px;
  font-weight:750;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
}
.situationEdit:hover{background:rgba(245,245,245,.08);}

@media (max-width: 520px){
  .chatToolsBar{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
 padding:10px 10px; }
  .chatToolsBar .toolSeg{ border-radius:14px; padding:5px; }
  .toolLink{ font-size:13px; padding:9px 8px; }
}

/* === Confirm + Report modal helpers (minimal, themed) === */
.dangerBtn{
  background:rgba(209,26,42,.16) !important;
  border:1px solid rgba(209,26,42,.35) !important;
  color:rgba(245,245,245,.95) !important;
}
.dangerBtn:hover{ background:rgba(209,26,42,.22) !important; }

.formGrid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.formLabel{ display:flex; flex-direction:column; gap:8px; font-size:13px; color:rgba(245,245,245,.78); }
.formControl{
  width:100%;
  border-radius:14px;
  border:1px solid rgba(245,245,245,.14);
  background:rgba(0,0,0,.12);
  color:rgba(245,245,245,.92);
  padding:12px 12px;
  font-size:14px;
  outline:none;
}
.formControl:focus{ border-color:rgba(183,154,90,.40); box-shadow:0 0 0 3px rgba(183,154,90,.12); }
@media (max-width:520px){
  .formGrid{ grid-template-columns:1fr; }
}



/* === UX v1.0 additions === */
.tipWrap{ position:relative; display:inline-flex; align-items:center; margin-left:8px; }
.tipBtn{
  width:18px; height:18px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:inherit; font-size:12px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  padding:0;
}
.tipText{
  position:absolute; top:24px; left:50%; transform:translateX(-50%);
  min-width:220px; max-width:260px;
  background:rgba(10,10,12,.92);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px 12px;
  font-size:13px;
  color:rgba(245,245,245,.92);
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  display:none;
  z-index:50;
}
.tipWrap.open .tipText{ display:block; }

.quickPrompts{
  display:flex; gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:8px 14px 10px;
}
.quickPrompt{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:rgba(245,245,245,.88);
  border-radius:999px;
  padding:10px 14px;
  font-size:13px;
}
.quickPrompt:active{ transform:translateY(1px); }

.menuHeader{
  display:grid;
  grid-template-columns:48px 1fr 48px;
  align-items:center;
  padding:10px 10px;
}
.menuTitle{
  text-align:center;
  font-weight:650;
  line-height:1.2;
}

.savedChatTitle{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.fieldLabel{ display:block; margin-bottom:8px; color:rgba(245,245,245,.85); font-size:14px; }
.fieldInput{
  width:100%;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px 12px;
  color:rgba(245,245,245,.92);
  outline:none;
}
.fieldInput:focus{
  border-color:rgba(183,154,90,.55);
  box-shadow:0 0 0 3px rgba(183,154,90,.12);
}

@media (max-width: 420px){
  .tipText{ left:auto; right:0; transform:none; }
  .quickPrompts{ padding:10px 12px 12px; gap:8px; }
  .quickPrompt{ padding:9px 12px; font-size:13px; }
}

.actionIcon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.actionIcon svg{ display:block; }

/* === FINAL UX v1.0 (stable iOS) === */

/* Tools: segmented control (no tooltips inside) */
.toolTabs{
  display:flex;
  gap:8px;
  width:100%;
  max-width:100%;
  padding:10px;
  background:rgba(12,12,13,.55);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  overflow:hidden;
}
.toolTab{
  flex:1 1 0;
  min-width:0;
  border:0;
  background:transparent;
  color:rgba(245,245,245,.78);
  border-radius:14px;
  padding:12px 10px;
  font-weight:650;
  text-align:center;
  -webkit-tap-highlight-color:transparent;
}
.toolTab[aria-selected="true"],
.toolTab.isActive{
  background:rgba(255,255,255,.08);
  color:rgba(245,245,245,.92);
}

/* Quick prompts: single horizontal rail, never causes overflow */
.quickPrompts{
  display:flex;
  gap:10px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  padding:10px 14px 10px;
  max-width:100%;
}
.quickPrompts::-webkit-scrollbar{ display:none; }
.quickPrompt{ flex:0 0 auto; white-space:nowrap; }

/* Remove legacy quick label if any */
.quickLabel{ display:none !important; }


/* === UX v1.0 polish (mobile first) === */
.toolLink{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:56px;
  padding:12px 34px 12px 12px; /* room for tooltip icon */
  line-height:1.15;
  white-space:normal;
}
.tipWrap{
  position:absolute;
  top:8px;
  right:8px;
  margin-left:0;
  z-index:5;
}
.tipBtn{
  -webkit-tap-highlight-color: transparent;
}
.tipText{
  z-index:60;
}
.quickPrompts{
  flex-wrap:nowrap;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.quickPrompts::-webkit-scrollbar{ display:none; }
.quickPrompt{ flex:0 0 auto; }

/* Make sure quick prompts don't look "everywhere" */
@media (max-width: 420px){
  .quickPrompts{ padding:10px 12px 8px; gap:8px; }
}



.quickLabel{
  padding:0 14px;
  margin-top:8px;
  font-size:12px;
  color:rgba(245,245,245,.55);
  text-align:left;
}


/* === UX v1.0: tool row + tap tooltips (iOS-friendly) === */
.toolRow{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
}
.toolItem{
  position:relative;
}
.toolBtn{
  width:100%;
  min-height:46px;
  border-radius:16px;
  border:1px solid rgba(245,245,245,.12);
  background:rgba(0,0,0,.18);
  color:rgba(245,245,245,.92);
  font-weight:750;
  letter-spacing:.1px;
}
.toolBtn[aria-selected="true"]{
  background:rgba(245,245,245,.10);
  border-color:rgba(245,245,245,.18);
}
.toolTip{
  position:absolute;
  top:8px;
  right:8px;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  color:rgba(245,245,245,.90);
  font-size:12px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}
.toolTipText{
  position:absolute;
  top:46px;
  left:0;
  right:0;
  margin:0 auto;
  width: min(280px, calc(100vw - 48px));
  background:rgba(10,10,12,.94);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:10px 12px;
  font-size:13px;
  color:rgba(245,245,245,.92);
  box-shadow:0 12px 40px rgba(0,0,0,.55);
  display:none;
  z-index:80;
}
.toolTipText.open{ display:block; }

@media (max-width: 420px){
  .toolBtn{ min-height:48px; border-radius:18px; }
  .toolTipText{ width: min(300px, calc(100vw - 28px)); }
}

/* --- Switch (privacy mode) --- */
.switch{position:relative;display:inline-flex;align-items:center;}
.switch input{position:absolute;opacity:0;pointer-events:none;}
.switch__track{width:44px;height:26px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14);display:inline-block;position:relative;transition:all .18s ease;}
.switch__track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:999px;background:rgba(255,255,255,.82);transition:all .18s ease;}
.switch input:checked + .switch__track{background:rgba(193,154,79,.35);border-color:rgba(193,154,79,.45);}
.switch input:checked + .switch__track::after{left:21px;background:rgba(255,255,255,.92);}

.modalCard pre{white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;}