/* chat-mobile-solo.css — единый mobile CSS для всех 6 solo-чатов
   Layout A (с мозгом): tolstoy, bulgakov, lilly  → .chat-side + .brain-panel + .sky
   Layout B (без мозга): van-gogh, marilyn, libra-astro → .app + .feed + .composer

   Активируется через media="(max-width:720px)" — каскад выше десктопного. */

@media (max-width:720px){

html{background:#06122a !important}

/* ═══ ОБЩАЯ КАНВА — универсальный контейнер для обоих layout'ов ══════ */

html,body{
  height:100%;
  overscroll-behavior:none;
}
body{ overflow:hidden !important; }

/* Layout A (с .chat-side) и Layout B (плоский .app) — одинаковая колонка */
body > .app, #app{
  display:flex !important;
  flex-direction:column !important;
  position:fixed !important;
  inset:0 !important;
  width:100% !important;
  height:100dvh !important;
  max-width:none !important;
  max-height:none !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background:linear-gradient(180deg,#142a4d,#0a1f3d) !important;
  z-index:1 !important;
}

/* ═══ HEADER ═══════════════════════════════════════════════════════════ */

header{
  position:relative !important;
  flex:0 0 auto !important;
  padding:10px 70px 10px 90px !important;
  z-index:5;
}
header::before{
  content:"← Лица";
  position:absolute;
  left:14px; top:50%; transform:translateY(-50%);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-style:italic;
  color:#f4d03f;
  font-size:.95rem;
  cursor:pointer;
  z-index:1;
}

/* Кнопка 🧠/💬 — только в Layout A (JS добавляет html.no-brain если brain нет) */
body.view-chat header::after{
  content:"🧠";
  position:absolute;
  right:14px; top:50%; transform:translateY(-50%);
  font-size:1.4rem; cursor:pointer; z-index:1;
  display:block;
}
body.view-brain header::after{
  content:"💬";
  position:absolute;
  right:14px; top:50%; transform:translateY(-50%);
  font-size:1.3rem; cursor:pointer; z-index:1;
  display:block;
}
html.no-brain header::after{ display:none !important; }
html.no-brain header{ padding-right:14px !important; }
.header-text > .brain-toggle{ display:none !important; }
.avatar-wrap{ flex:0 0 44px !important; }
.avatar{ width:42px !important; height:42px !important; }
.header-text .name, .header-text #name{
  font-size:1.05rem !important;
  margin:0 !important;
}
.header-text .signature, .header-text .era,
.header-text .subtitle{ display:none !important; }

/* ═══ LAYOUT A: .workspace + .chat-side + .brain-panel ════════════════ */

.workspace{
  flex:1 1 auto !important;
  position:relative !important;
  overflow:hidden !important;
  display:block !important;
  padding:0 !important;
  gap:0 !important;
}

/* CHAT view — sky/brain прячем только в Layout A */
html:not(.no-brain) body.view-chat .brain-panel,
html:not(.no-brain) body.view-chat .sky{
  display:none !important;
}
body.view-chat .chat-side{
  position:absolute !important;
  inset:0 !important;
  width:auto !important;
  max-height:none !important;
  border:0 !important;
  border-radius:0 !important;
  display:flex !important;
  flex-direction:column !important;
  height:100% !important;
  background:transparent !important;
}

/* BRAIN view — Layout A only */
body.view-brain .chat-side{ display:none !important; }
html:not(.no-brain) body.view-brain .brain-panel,
html:not(.no-brain) body.view-brain .sky{
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  margin:0 !important;
  border:0 !important;
}

.chat-side::before{ display:none !important; }  /* убираем drag-handle полоску */

/* Layout B: sky остаётся как фон, .app затемнён градиентом — sky под ним */
html.no-brain .sky{ z-index:0 !important; }

/* ═══ FEED ═════════════════════════════════════════════════════════════ */

.feed{
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  padding:14px 14px 16px !important;
  -webkit-overflow-scrolling:touch;
}

/* ═══ Типографика бабблов ═════════════════════════════════════════════ */

.bubble{
  max-width:88% !important;
  font-size:15.5px !important;
  line-height:1.42 !important;
  letter-spacing:0.003em;
  padding:10px 13px !important;
  hyphens:auto;
  -webkit-hyphens:auto;
  word-break:break-word;
  overflow-wrap:anywhere;
  text-wrap:pretty;
  font-feature-settings:"liga" 1, "calt" 1;
}

.bubble .who,
.bubble .speaker,
.bubble .name,
.bubble strong:first-child,
.bubble > em:first-child{
  font-size:0.88rem !important;
  line-height:1.2 !important;
  margin-bottom:3px !important;
  letter-spacing:0.015em;
  display:block;
}

.bubble p{ margin:0 0 6px !important; }
.bubble p:last-child{ margin-bottom:0 !important; }
.bubble br + br{ line-height:0.5; }

.bubble .action,
.bubble .stage,
.bubble em:not(:first-child),
.bubble i:not(:first-child){
  color:#c8a380 !important;
  font-size:0.93em !important;
  opacity:0.8;
}

.row,
.message{
  margin-bottom:8px !important;
  gap:8px !important;
}
.row:last-child,
.message:last-child{ margin-bottom:0 !important; }

.row .avatar,
.row .mini-avatar{
  width:36px !important;
  height:36px !important;
  flex:0 0 36px !important;
}
.row .avatar img,
.row .mini-avatar img{
  width:36px !important;
  height:36px !important;
}

/* юзер-баббл: убрать аватар (если есть), правое выравнивание */
.row.u .mini-avatar,
.row.user .avatar,
.row.user .mini-avatar,
.row.me .avatar,
.row.me .mini-avatar{ display:none !important; }
.row.u, .row.user, .row.me{
  justify-content:flex-end !important;
}
.row.u .bubble,
.row.user .bubble,
.row.me .bubble{
  margin-left:auto !important;
  max-width:80% !important;
}

/* ═══ COMPOSER (прибит к низу через flex) ═════════════════════════════ */

.brushstrokes{ display:none !important; }

.composer{
  flex:0 0 auto !important;
  position:relative !important;
  padding:10px 12px max(10px, env(safe-area-inset-bottom)) 12px !important;
  background:rgba(10,31,61,.95) !important;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-top:1px solid rgba(244,208,63,.15) !important;
}

.composer .input-row{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-end !important;
  gap:8px !important;
}

.composer textarea, #input{
  flex:1 1 auto !important;
  font-size:16px !important;        /* iOS не зумит */
  line-height:1.4 !important;
  min-height:44px !important;
  max-height:120px !important;
  padding:10px 14px !important;
  border-radius:20px !important;
}

/* SEND-кнопка как иконка ➤ */
.composer .btn-primary,
.composer button[type=submit],
.composer .send,
.composer #send,
button#sendBtn{
  flex:0 0 44px !important;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  border-radius:50% !important;
  background:#f4d03f !important;
  color:#0a1f3d !important;
  padding:0 !important;
  font-size:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  box-shadow:0 2px 8px rgba(244,208,63,0.30);
}
.composer .btn-primary::before,
.composer button[type=submit]::before,
.composer .send::before,
.composer #send::before,
button#sendBtn::before{
  content:"➤" !important;
  font-size:18px !important;
  line-height:1 !important;
  color:#0a1f3d !important;
}

/* Вторичные действия — спрятать в ⋯ */
.composer .ghost-row,
.composer .actions-row,
.composer .secondary-actions,
.composer .extra-actions{
  display:none !important;
}
body.show-extras .composer .ghost-row,
body.show-extras .composer .actions-row,
body.show-extras .composer .secondary-actions,
body.show-extras .composer .extra-actions{
  display:flex !important;
  margin-top:8px !important;
  gap:6px !important;
  flex-wrap:wrap !important;
}
body.show-extras .composer .ghost-row .btn{
  font-size:.78rem !important;
  padding:5px 10px !important;
}

/* ⋯ в правом верхнем углу композера */
.composer::before{
  content:"⋯";
  position:absolute;
  right:64px;
  top:14px;
  width:32px; height:32px;
  display:flex;
  align-items:center; justify-content:center;
  color:#9aa3b2;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  z-index:2;
}
body.show-extras .composer::before{
  color:#f4d03f;
}

/* ═══ TTS / voice picker — спрятать на мобиле (Мэрилин и др.) ═════════ */

.voice-picker,
.voices,
.voice-list,
.tts-controls,
.voice-select,
.voice-row,
select[name*="voice" i],
select[id*="voice" i],
[class*="voice-" i],
[aria-label*="голос" i],
[aria-label*="voice" i]{
  display:none !important;
}

/* ═══ BIO modal — поверх всего ════════════════════════════════════════ */
.bio[hidden]{ display:none !important; }
.bio:not([hidden]){
  position:fixed !important;
  inset:0 !important;
  z-index:100 !important;
  margin:0 !important;
  border-radius:0 !important;
  padding:18px 18px max(18px, env(safe-area-inset-bottom)) !important;
  overflow-y:auto;
}

}  /* /@media */