:root {
  --sky: #0593c6;
  --sky-mid: #22a9dc;
  --sky-soft: #7fd0ee;
  --white: #fcffff;
  --pink: #db3996;
  --pink-hot: #ff4fae;
  --pink-deep: #c02a80;
  --violet: #9a5cf2;
  --ink: #0b2836;          /* текст на світлих панелях */
  --muted: #4f6e7e;
  --line: rgb(11 40 54 / .10);
  --link: #0479a3;
  --mark: #ffd0ea;
  --on-sky: rgb(252 255 255 / .86);
  --glass: rgb(255 255 255 / .14);
  --glass-strong: rgb(255 255 255 / .22);
  --glass-line: rgb(255 255 255 / .34);
  --paper: rgb(252 255 255 / .9);
  --radius: 22px;
  --shadow: 0 10px 40px rgb(0 50 90 / .16);
  --font: 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Source Serif 4', Georgia, serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 90px; background: var(--sky); }
body { margin: 0; color: var(--white); font: 16px/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; background: transparent; }
a { color: var(--white); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, textarea, select { font: inherit; color: inherit; }
mark { background: var(--mark); color: inherit; border-radius: 4px; padding: 0 2px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
main { min-height: 70vh; padding-bottom: 64px; outline: none; position: relative; }

/* =========================================================
   ЖИВИЙ ФОН: градієнт + рожеві плями + рифлене скло
   ========================================================= */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(120% 70% at 50% 110%, #9fdcf3 0%, rgb(159 220 243 / 0) 60%),
    linear-gradient(180deg, #0a8fc4 0%, #1fa6da 45%, #57c1e8 100%);
  --mx: 0; --my: 0; --sy: 0;
}
.blobs { position: absolute; inset: -10%; filter: blur(46px) saturate(135%); }
.blob { position: absolute; border-radius: 50%; will-change: transform; }
/* «силует»: голова */
.b1 { width: 15vw; height: 22vw; min-width: 150px; min-height: 220px; left: 46%; top: 8%;
  background: radial-gradient(50% 50% at 50% 50%, var(--pink-hot) 0%, var(--pink) 45%, rgb(219 57 150 / 0) 100%);
  animation: wander1 16s ease-in-out infinite alternate; }
/* «тіло» */
.b2 { width: 38vw; height: 46vw; min-width: 340px; min-height: 420px; left: 33%; top: 28%;
  background: radial-gradient(50% 50% at 50% 45%, #e8459f 0%, #b84fd8 42%, rgb(154 92 242 / .55) 64%, rgb(154 92 242 / 0) 100%);
  border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%;
  animation: wander2 22s ease-in-out infinite alternate, morph 9s ease-in-out infinite alternate; }
/* фіолетова тінь */
.b3 { width: 26vw; height: 30vw; min-width: 240px; min-height: 280px; left: 20%; top: 50%;
  background: radial-gradient(circle, rgb(140 100 245 / .85), rgb(140 100 245 / 0) 70%);
  animation: wander3 26s ease-in-out infinite alternate; }
/* рожевий відблиск праворуч від силуету */
.b4 { width: 22vw; height: 26vw; min-width: 200px; min-height: 240px; left: 58%; top: 42%;
  background: radial-gradient(circle, rgb(255 79 174 / .95), rgb(255 79 174 / 0) 70%);
  animation: wander1 18s ease-in-out infinite alternate-reverse; }
/* блакитний світлий блік угорі праворуч */
.b5 { width: 34vw; height: 30vw; left: 72%; top: -6%;
  background: radial-gradient(circle, rgb(140 225 255 / .85), rgb(140 225 255 / 0) 70%);
  animation: wander3 24s ease-in-out infinite alternate-reverse; }
/* рожева пляма зліва вгорі */
.b6 { width: 24vw; height: 24vw; min-width: 220px; min-height: 220px; left: -2%; top: 4%;
  background: radial-gradient(circle, rgb(219 57 150 / .85), rgb(219 57 150 / 0) 70%);
  animation: wander4 20s ease-in-out infinite alternate; }
/* рожева пляма справа внизу */
.b7 { width: 30vw; height: 28vw; min-width: 260px; min-height: 240px; left: 78%; top: 62%;
  background: radial-gradient(circle, rgb(255 79 174 / .9), rgb(196 70 220 / .5) 45%, rgb(196 70 220 / 0) 72%);
  animation: wander2 25s ease-in-out infinite alternate-reverse; }
/* маленька яскрава рожева «іскра», що мандрує по екрану */
.b8 { width: 12vw; height: 12vw; min-width: 120px; min-height: 120px; left: 10%; top: 78%;
  background: radial-gradient(circle, var(--pink-hot), rgb(255 79 174 / 0) 70%);
  animation: roam 30s ease-in-out infinite alternate; }
@keyframes wander1 { 0% { transform: translate(0, 0) scale(1); } 33% { transform: translate(6vw, 6vh) scale(1.15); } 66% { transform: translate(-5vw, 10vh) scale(.92); } 100% { transform: translate(3vw, -4vh) scale(1.08); } }
@keyframes wander2 { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(-7vw, 5vh) rotate(18deg) scale(1.1); } 100% { transform: translate(5vw, -6vh) rotate(-10deg) scale(.95); } }
@keyframes wander3 { 0% { transform: translate(0, 0); } 50% { transform: translate(10vw, -8vh) scale(1.2); } 100% { transform: translate(-6vw, 6vh) scale(.9); } }
@keyframes wander4 { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(12vw, 14vh) scale(1.25); } 100% { transform: translate(4vw, 30vh) scale(.9); } }
@keyframes roam { 0% { transform: translate(0, 0); } 25% { transform: translate(25vw, -20vh); } 50% { transform: translate(55vw, -5vh) scale(1.3); } 75% { transform: translate(35vw, -45vh); } 100% { transform: translate(70vw, -30vh) scale(.9); } }
@keyframes morph { 0% { border-radius: 46% 54% 40% 60% / 55% 45% 55% 45%; } 100% { border-radius: 60% 40% 55% 45% / 40% 60% 40% 60%; } }

/* рифлене скло: вертикальні «ребра» з бліком зліва і тінню справа */
.ribs { position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg,
      rgb(255 255 255 / .16) 0px,
      rgb(255 255 255 / .05) 3px,
      rgb(255 255 255 / 0) 7px,
      rgb(0 40 80 / .05) 10px,
      rgb(0 40 80 / .10) 13px,
      rgb(255 255 255 / .16) 14px);
  mix-blend-mode: soft-light; opacity: .9; }
.ribs::after { /* друга, ширша хвиля — дає «лінзовий» ефект */
  content: ''; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 14px);
}
.grain { position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .blob { animation: none !important; } }

/* ---------- скло / панелі ---------- */
.glass { background: var(--glass); border: 1px solid var(--glass-line);
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); }
.paper { background: var(--paper); color: var(--ink); border: 1px solid rgb(255 255 255 / .7);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: var(--shadow); }
.paper a { color: var(--link); }

/* ---------- шапка ---------- */
.topbar { position: fixed; inset: 0 0 auto; z-index: 30; transition: background .25s, box-shadow .25s, backdrop-filter .25s; }
.topbar.scrolled { background: rgb(8 130 185 / .35); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 1px 0 rgb(255 255 255 / .2); }
.topbar-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 72px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; color: var(--white); letter-spacing: -.01em; }
.logo:hover { text-decoration: none; }
.logo svg { width: 24px; height: 24px; }
.nav { display: flex; gap: 2px; padding: 4px; border-radius: 999px; }
.nav a { padding: 7px 16px; border-radius: 999px; color: var(--white); font-size: 14px; font-weight: 500; opacity: .92; }
.nav a:hover { text-decoration: none; background: rgb(255 255 255 / .16); opacity: 1; }
.nav a.active { background: var(--pink); opacity: 1; box-shadow: 0 4px 16px rgb(219 57 150 / .5); }
.round-btn { justify-self: end; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--white); color: var(--sky); box-shadow: 0 4px 14px rgb(0 40 60 / .15); }
.round-btn:hover { text-decoration: none; transform: translateY(-1px); }
.round-btn svg { width: 20px; height: 20px; }

/* ---------- верхні секції сторінок ---------- */
.band { position: relative; padding-top: 118px; padding-bottom: 28px; }
.band h1 { font-weight: 400; letter-spacing: -.035em; line-height: 1.05; margin: 0; text-shadow: 0 2px 30px rgb(0 60 110 / .15); }
.band p { color: var(--on-sky); }

/* ---------- кнопки, поля ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 11px 22px; font-weight: 500; cursor: pointer; background: var(--sky); color: var(--white); white-space: nowrap; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn-pink { background: var(--pink); color: var(--white); box-shadow: 0 10px 28px rgb(219 57 150 / .45); }
.btn-pink:hover { background: var(--pink-deep); }
.btn-ghost { background: var(--glass-strong); color: var(--white); border: 1px solid var(--glass-line); backdrop-filter: blur(14px); }
.btn-ghost:hover { background: rgb(255 255 255 / .32); }
.btn-white { background: var(--white); color: var(--pink); }
.link-arrow { color: var(--white); font-weight: 500; }

.searchbar { display: flex; gap: 6px; padding: 6px; border-radius: 999px; max-width: 640px; }
.searchbar input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 10px 16px; font-size: 16px; outline: none; color: var(--white); }
.searchbar input::placeholder { color: rgb(252 255 255 / .78); }
.searchbar .btn { background: var(--white); color: var(--sky); }

.chip { display: inline-block; border: 1px solid var(--glass-line); background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 999px; padding: 7px 15px; font-size: 14px; color: var(--white); cursor: pointer; transition: background .15s, border-color .15s; }
.chip:hover { background: var(--pink); border-color: var(--pink); text-decoration: none; }
.paper .chip { background: #fde9f4; border-color: #f7c6e1; color: var(--pink); backdrop-filter: none; }

/* ---------- головна ---------- */
.hero { min-height: min(860px, 100svh); display: grid; grid-template-columns: 1fr 340px; grid-template-rows: 1fr auto auto; gap: 24px 32px; padding-bottom: 0; }
.hero-main { grid-column: 1; grid-row: 2; align-self: end; }
.hero h1 { font-size: clamp(42px, 6.6vw, 84px); margin-bottom: 18px; }
.hero-main p { max-width: 460px; font-size: 15px; margin: 0 0 22px; }
.hero-card { grid-column: 2; grid-row: 1; align-self: start; border-radius: 22px; padding: 14px; }
.hero-card .hc-title { font-size: 12px; opacity: .85; margin: 2px 4px 10px; }
.hc-item { display: block; border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; background: rgb(255 255 255 / .18); border: 1px solid rgb(255 255 255 / .28); color: var(--white); transition: background .15s; }
.hc-item:last-child { margin-bottom: 0; }
.hc-item:hover { background: rgb(255 255 255 / .3); text-decoration: none; }
.hc-item b { font-weight: 500; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.hc-item b::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); flex: none; box-shadow: 0 0 10px var(--pink-hot); }
.hc-item span { display: flex; justify-content: space-between; font-size: 13px; opacity: .85; margin-top: 4px; }
.hc-item em { font-style: normal; }
.hero-cta { grid-column: 2; grid-row: 2; align-self: end; display: flex; align-items: center; gap: 18px; justify-content: flex-end; flex-wrap: wrap; padding-bottom: 6px; }
.hero-strip span::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--pink-hot); margin-right: 8px; vertical-align: middle; box-shadow: 0 0 8px var(--pink-hot); }
.hero-strip { grid-column: 1 / -1; grid-row: 3; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgb(255 255 255 / .35); padding: 16px 0 22px; font-size: 13px; color: var(--on-sky); }

.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 56px 0 18px; }
.section-head h2 { font-size: clamp(28px, 3.6vw, 42px); font-weight: 400; letter-spacing: -.03em; margin: 0; }
.section-head h2::after { content: '.'; color: var(--pink-hot); }
.hints { display: flex; flex-wrap: wrap; gap: 8px; }

.ai-banner { background: linear-gradient(110deg, rgb(219 57 150 / .55), rgb(155 92 240 / .35) 50%, rgb(255 255 255 / .12)) !important; }
.ai-banner { display: flex; align-items: center; gap: 20px; border-radius: 28px; padding: 32px 34px; margin: 56px 0 8px; }
.ai-banner h2 { margin: 0 0 6px; font-size: clamp(22px, 2.6vw, 30px); font-weight: 400; letter-spacing: -.02em; }
.ai-banner p { margin: 0; color: var(--on-sky); max-width: 560px; }
.ai-banner .btn { margin-left: auto; }

.cat-title { font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: var(--on-sky); margin: 30px 0 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.cat-title::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink-hot); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 14px; }
.card { display: flex; flex-direction: column; border-radius: var(--radius); padding: 18px 20px; color: var(--white); transition: transform .18s, background .18s; }
.card:hover { text-decoration: none; transform: translateY(-3px); background: var(--glass-strong); border-color: rgb(255 120 190 / .8); box-shadow: 0 12px 34px rgb(219 57 150 / .28); }
.card .meta i { color: #ffd0ea !important; }
.card .abbr { align-self: flex-start; font-size: 12px; font-weight: 600; color: var(--white); background: var(--pink); padding: 2px 10px; border-radius: 999px; min-height: 22px; }
.card .abbr:empty { visibility: hidden; }
.card h3 { margin: 12px 0 8px; font-size: 17px; font-weight: 500; line-height: 1.35; }
.card .meta { margin-top: auto; font-size: 13px; color: var(--on-sky); display: flex; justify-content: space-between; }
.card .meta i { font-style: normal; color: var(--white); }

/* ---------- читалка закону ---------- */
.law-band h1 { font-size: clamp(30px, 4.6vw, 54px); margin: 8px 0 12px; max-width: 900px; }
.crumbs { font-size: 14px; color: var(--on-sky); }
.law-band .meta { font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--on-sky); }
.law-tools { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; max-width: 760px; }
.law-tools input { flex: 1; min-width: 180px; border-radius: 999px; padding: 10px 18px; outline: none; color: var(--white); }
.law-tools input::placeholder { color: rgb(252 255 255 / .78); }
.law { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; padding-top: 12px; }
.toc { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 104px); overflow: auto; font-size: 14px; border-radius: var(--radius); padding: 12px; }
.toc input { width: 100%; border: 1px solid var(--glass-line); background: rgb(255 255 255 / .15); border-radius: 999px; padding: 8px 14px; margin-bottom: 10px; outline: none; color: var(--white); }
.toc input::placeholder { color: rgb(252 255 255 / .75); }
.toc a { display: block; padding: 5px 10px; border-radius: 10px; color: var(--on-sky); line-height: 1.35; }
.toc a:hover { background: rgb(219 57 150 / .45); color: var(--white); text-decoration: none; }
.toc .l1, .toc .l2 { font-weight: 600; color: var(--white); margin-top: 6px; }
.toc .l3 { padding-left: 16px; color: var(--white); font-weight: 500; }
.toc .l4 { padding-left: 26px; font-size: 13px; }
.law-body { border-radius: var(--radius); padding: 18px clamp(16px, 4vw, 52px) 34px; font-family: var(--serif); font-size: 18px; line-height: 1.72; }
.law-body > * { max-width: 780px; }
.law-body .h { font-family: var(--font); margin: 34px 0 14px; padding-top: 18px; border-top: 1px solid var(--line); }
.law-body .h:first-child { border-top: 0; }
.law-body .h b { display: block; text-shadow: none; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--pink); font-weight: 600; }
.law-body .h span { display: block; font-weight: 500; font-size: 20px; line-height: 1.35; color: var(--ink); }
.law-body .h.l1 span { font-size: 24px; }
.art { padding: 12px 16px; margin: 0 -16px 6px; border-radius: 16px; scroll-margin-top: 90px; position: relative; transition: background .3s; }
.art.flash { background: #e4f5fc; box-shadow: inset 3px 0 0 var(--pink); }
.art h3 { font-family: var(--font); font-size: 17px; font-weight: 600; margin: 6px 0 8px; line-height: 1.4; padding-right: 120px; }
.law-body .art h3 a, .law-body .art .art-n { color: var(--sky); margin-right: 4px; font-family: var(--font); font-weight: 600; }
.art p { margin: 0 0 8px; }
.art .x { color: var(--muted); font-style: italic; font-size: 15px; }
.art .ask { position: absolute; top: 14px; right: 12px; font-family: var(--font); font-size: 12px; padding: 4px 12px; opacity: 0; transition: opacity .15s; }
.art:hover .ask { opacity: 1; }
.loading { color: var(--on-sky); padding: 40px 0; text-align: center; }

/* ---------- пошук ---------- */
.search-band h1, .chat-band h1 { font-size: clamp(36px, 5.4vw, 64px); margin-bottom: 20px; }
.search-band .searchbar { max-width: 760px; }
.filters { margin-top: 14px; }
.filters select { border-radius: 999px; padding: 9px 16px; color: var(--white); outline: none; max-width: 100%; }
.filters select option { color: var(--ink); }
.results-head { color: var(--on-sky); margin: 8px 0 14px; }
.result { display: block; border-radius: var(--radius); padding: 16px 20px; margin-bottom: 12px; transition: transform .15s; }
.result:hover { text-decoration: none; transform: translateY(-2px); }
.paper.result, .paper.result:hover { color: var(--ink); }
.result .src { display: inline-block; font-size: 12px; font-weight: 600; color: var(--white); background: var(--pink); padding: 1px 10px; border-radius: 999px; }
.result h3 { margin: 8px 0 6px; font-size: 17px; font-weight: 500; }
.result p { margin: 0; color: var(--muted); font-family: var(--serif); font-size: 16px; }
.empty { color: var(--on-sky); padding: 16px 0; }
.empty a, .results-head a { color: var(--white); text-decoration: underline; }

/* ---------- чат ---------- */
.chat-band p { max-width: 560px; margin: 0 0 18px; }
.chat { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; min-height: 40vh; padding-top: 8px; }
.msgs { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 6px 0 20px; }
.msg { max-width: 90%; padding: 13px 18px; border-radius: 22px; line-height: 1.6; overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: var(--pink); color: var(--white); border-bottom-right-radius: 6px; white-space: pre-wrap; box-shadow: 0 10px 26px rgb(219 57 150 / .35); }
.msg.bot { align-self: flex-start; border-bottom-left-radius: 6px; }
.msg.bot p { margin: 0 0 10px; }
.msg.bot p:last-child { margin-bottom: 0; }
.msg.bot ul, .msg.bot ol { margin: 0 0 10px; padding-left: 22px; }
.msg.bot h4 { margin: 12px 0 6px; font-size: 16px; font-weight: 600; }
.msg.bot a { color: var(--pink); font-weight: 500; }
.msg.err { border-color: #f3b5cf; }
.sources { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; }
.sources span { color: var(--muted); margin-right: 2px; }
.msg.bot .sources a { background: #e3f5fc; padding: 3px 11px; border-radius: 999px; color: var(--link); font-weight: 400; }
.typing::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--pink); animation: blink 1s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .2; } }
.composer { position: sticky; bottom: 0; padding: 10px 0 16px; }
.composer form { display: flex; gap: 8px; align-items: flex-end; border-radius: 28px; padding: 8px; }
.composer textarea { flex: 1; border: 0; background: transparent; resize: none; outline: none; padding: 9px 12px; max-height: 200px; min-height: 42px; color: var(--white); }
.composer textarea::placeholder { color: rgb(252 255 255 / .78); }
.composer .btn { background: var(--pink); box-shadow: 0 8px 22px rgb(219 57 150 / .4); }
.composer small { display: block; text-align: center; color: var(--on-sky); margin-top: 8px; font-size: 12px; }
.composer small a { color: var(--white); text-decoration: underline; }

/* ---------- футер ---------- */
.footer { padding: 26px 0 32px; font-size: 14px; color: var(--on-sky); border-top: 1px solid var(--glass-line); background: rgb(255 255 255 / .08); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.footer a { color: var(--white); text-decoration: underline; }
.footer p { margin: 4px 0; }

/* ---------- адаптив ---------- */
@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; min-height: 0; padding-top: 104px; }
  .hero-main { grid-row: 1; }
  .hero-cta { grid-column: 1; grid-row: 2; justify-content: flex-start; }
  .hero-card { grid-column: 1; grid-row: 3; }
  .hero-strip { grid-row: 4; }
  .b1 { left: 52%; top: 4%; } .b2 { left: 30%; top: 22%; }
}
@media (max-width: 860px) {
  .law { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .law > * { min-width: 0; }
  .toc { position: static; max-height: 60vh; display: none; margin-bottom: 16px; }
  .toc.open { display: block; }
  .law-body { overflow-wrap: anywhere; }
  .ai-banner { flex-direction: column; align-items: flex-start; }
  .ai-banner .btn { margin-left: 0; }
  .art h3 { padding-right: 0; }
  .art .ask { opacity: 1; position: static; display: inline-block; margin-bottom: 6px; }
}
@media (min-width: 861px) { .toc-toggle { display: none; } }
@media (max-width: 640px) {
  .topbar-in { grid-template-columns: auto 1fr auto; gap: 10px; }
  .nav { justify-self: end; }
  .nav a { padding: 7px 11px; font-size: 13px; }
  .nav a[data-nav="home"] { display: none; }
  .logo span { display: none; }
  .hero-strip { justify-content: flex-start; gap: 6px 16px; }
  .law-body { font-size: 17px; }
  .law-tools input { flex-basis: 100%; }
  .searchbar input { padding: 10px 12px; }
  .blobs { filter: blur(36px) saturate(130%); }
}

/* ---------- режими ШІ-юриста ---------- */
.mode-switch { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; margin-bottom: 14px; }
.mode-switch button { border: 0; background: transparent; color: var(--white); padding: 8px 18px; border-radius: 999px; font-weight: 500; cursor: pointer; }
.mode-switch button:hover { background: rgb(255 255 255 / .16); }
.mode-switch button.active { background: var(--pink); box-shadow: 0 4px 16px rgb(219 57 150 / .5); }
.case-guide { border-radius: 20px; padding: 14px 18px; margin: 0 0 16px; max-width: 640px; font-size: 14px; }
.case-guide ol { margin: 6px 0 0; padding-left: 20px; color: var(--on-sky); }
.msg.user.case { max-width: 80%; background: linear-gradient(135deg, var(--pink), #b44bd0); }
.msg.user.case::before { content: 'Моя справа'; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; opacity: .8; margin-bottom: 4px; }
.msg.bot .status { color: var(--muted); font-size: 14px; }
.msg.bot h4 { color: var(--pink); margin-top: 16px; }
.msg.bot h4:first-child { margin-top: 0; }