/* ==========================================================================
   V2 — hero chips, torn edge, telegram-style portal stage, portal themes
   ========================================================================== */

/* ---------- hero chips ---------- */
.hero__chips {
  margin-top: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.hero__chips span {
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(241,232,213,.75);
  border: 1px solid rgba(241,232,213,.25);
  border-radius: 999px;
  padding: .38em .95em;
}

/* torn paper edge переехал в v3.css (SVG-версия) */

/* ---------- portal stage: telegram-style chat ---------- */
.chat-stage {
  --stage-ink: var(--c-cream);
  --stage-accent: var(--c-amber);
  --bubble-in: rgba(0, 0, 0, .3);
  --bubble-out: rgba(244, 166, 35, .92);
  --bubble-out-ink: var(--c-dark);
  --kbtn-bg: rgba(241, 232, 213, .1);
  --kbtn-border: rgba(241, 232, 213, .22);
  color: var(--stage-ink);
  transition: background-color .6s var(--ease-soft), color .6s;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.stage-guest {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  transition: opacity .6s;
}

.chat-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1.2rem;
  background: rgba(0, 0, 0, .34);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.chat-head__ava {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chat-head__meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}
.chat-head__meta b {
  font-family: "Manrope", sans-serif;
  font-size: .92rem;
  color: #fff;
}
.chat-head__meta span {
  font-family: "JetBrains Mono", monospace;
  font-size: .64rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(241, 232, 213, .55);
}
.chat-head__portal {
  margin-left: auto;
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem;
  letter-spacing: .04em;
  color: rgba(241, 232, 213, .7);
  text-align: right;
}

.chat {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: 1.2rem 1.2rem .8rem;
  overflow-y: auto;
  max-height: 430px;
  min-height: 320px;
  scroll-behavior: smooth;
}

.msg {
  max-width: 82%;
  padding: .7em 1em;
  border-radius: 16px;
  font-size: .95rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s var(--ease-soft), transform .35s var(--ease-soft);
}
.msg.is-shown { opacity: 1; transform: translateY(0); }
.msg--in {
  background: var(--bubble-in);
  color: var(--stage-ink);
  border-bottom-left-radius: 5px;
  align-self: flex-start;
}
.msg--out {
  background: var(--bubble-out);
  color: var(--bubble-out-ink);
  border-bottom-right-radius: 5px;
  align-self: flex-end;
  font-weight: 600;
}
.msg--voice {
  font-family: "Neucha", cursive;
  font-size: 1.12rem;
  color: var(--stage-accent);
  background: transparent;
  padding-left: .2em;
}
.msg--audio {
  background: transparent;
  padding: 0;
  width: min(420px, 100%);
}
.msg--audio .audio-slot {
  margin-top: 0;
  background: var(--bubble-in);
}
.msg b { font-weight: 800; }

.kb {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 7px;
  padding: .4rem 1.2rem 1.2rem;
}
.kb__btn {
  width: 100%;
  border: 1px solid var(--kbtn-border);
  background: var(--kbtn-bg);
  color: var(--stage-ink);
  border-radius: 11px;
  padding: .78em 1em;
  font-family: "Manrope", sans-serif;
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
  transition: background .2s, transform .2s var(--ease);
}
.kb__btn:hover { background: rgba(255, 255, 255, .16); }
.kb__btn:active { transform: scale(.985); }

/* ---------- themes per portal ---------- */

/* Беззаботность и поток — синий + линовка */
.chat-stage[data-theme="carefree"] {
  background-color: var(--c-navy);
  background-image: var(--paper-navy);
  background-size: 900px;
}
.chat-stage[data-theme="carefree"] .stage-guest {
  background: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(241, 232, 213, .16) 27px 28px);
}

/* Глубина и наследие — олива + рельеф */
.chat-stage[data-theme="depth"] {
  background-color: var(--c-olive);
  background-image: var(--paper-kraft);
  background-size: 900px;
  background-blend-mode: multiply;
}
.chat-stage[data-theme="depth"] .stage-guest {
  background-image: url("../assets/patterns/topo-cream.svg");
  opacity: .22;
}

/* Авантюра и случай — терракота + компас */
.chat-stage[data-theme="adventure"] {
  background-color: var(--c-terracotta);
  background-image: var(--paper-terracotta);
  background-size: 900px;
  --bubble-out: rgba(28, 24, 20, .82);
  --bubble-out-ink: var(--c-cream);
}
.chat-stage[data-theme="adventure"] .stage-guest {
  background-image: url("../assets/compass/compass-simple-cream.svg");
  background-repeat: no-repeat;
  background-position: right -70px bottom -70px;
  background-size: 300px;
  opacity: .18;
}

/* Исцеление и отдых — беж + линованная бумага (светлая тема) */
.chat-stage[data-theme="healing"] {
  background-color: var(--c-cream);
  background-image: var(--paper-cream);
  background-size: 900px;
  --stage-ink: var(--c-dark);
  --stage-accent: var(--c-terracotta);
  --bubble-in: rgba(255, 255, 255, .72);
  --bubble-out: var(--c-terracotta);
  --bubble-out-ink: var(--c-cream);
  --kbtn-bg: rgba(28, 24, 20, .05);
  --kbtn-border: rgba(28, 24, 20, .2);
}
.chat-stage[data-theme="healing"] .stage-guest {
  background: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(28, 24, 20, .1) 27px 28px);
}
.chat-stage[data-theme="healing"] .chat-head {
  background: rgba(28, 24, 20, .78);
}
.chat-stage[data-theme="healing"] .kb__btn:hover { background: rgba(28, 24, 20, .1); }
.chat-stage[data-theme="healing"] .msg--audio .audio-slot { background: rgba(255,255,255,.72); }
.chat-stage[data-theme="healing"] .audio-slot__label { color: var(--c-dark); }

/* Магия и знаки — слива + точечки */
.chat-stage[data-theme="magic"] {
  background-color: var(--c-plum);
  background-image: var(--paper-plum);
  background-size: 900px;
}
.chat-stage[data-theme="magic"] .stage-guest {
  background-image: url("../assets/patterns/grid-dots-cream.svg");
  opacity: .28;
}

/* Открытие и мастерство — тёмный + клетка */
.chat-stage[data-theme="discovery"] {
  background-color: var(--c-dark);
  background-image: var(--paper-dark);
  background-size: 900px;
}
.chat-stage[data-theme="discovery"] .stage-guest {
  background-image: url("../assets/patterns/grid-square-cream.svg");
  opacity: .25;
}

/* активная карточка портала — заметная на тёмном */
.portal-btn.is-active {
  border-color: var(--c-amber);
  background: rgba(244, 166, 35, .08);
}

/* мобильная высота чата */
@media (max-width: 560px) {
  .chat { max-height: 56vh; min-height: 280px; padding: 1rem .8rem .6rem; }
  .kb { padding: .4rem .8rem 1rem; }
  .msg { max-width: 92%; }
  .chat-head__portal { display: none; }
  .hero__chips span { font-size: .62rem; }
}