/* ====== ДИЗАЙН-ОБЛАСТЬ (совпадает с размерами Layout) ====== */
#ui{
  position:absolute;
  left:0; top:0;
  width:1280px;
  height:720px;
  transform-origin:0 0;
}

/* ====== PIXEL FONT ====== */
@font-face{
  font-family: 'BetterVCR';
  src: url('./fonts/Better%20VCR%206.1.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ====== ПЕРЕМЕННЫЕ ====== */
:root{
  /* Параметры телефона в дизайн-пикселях */
  --phone-left: 560px;
  --phone-top:  142px;
  --phone-width: 240px;
  --phone-height: 514px;

  --header-h: 64px;
  --footer-h: 110px;

  /* Лимит визуальной длины строки в пузыре */
  --bubble-max-line: 15ch;

  /* Палитра пузырей (заметный контраст) */
  --left-a:  #1e5a50;  /* зелёно-бирюзовый (левый) */
  --left-br: #0b1e1a;
  --left-sh: #0a1714;

  --right-a: #2b3347;  /* холодно-синий (правый) */
  --right-br:#0b0f13;
  --right-sh:#0a0e13;

  /* Кнопки ответов (однотонный тёмно-синий) */
  --choice-bg:#223146;
  --choice-br:#0e171c;
  --choice-sh:#0a1014;
}

/* ====== ГЛОБАЛЬНО ====== */
*{
  font-family: 'BetterVCR', system-ui, sans-serif;
  color:#c6d3dc;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
  letter-spacing: 0;
  box-sizing: border-box;
}

/* ====== ТЕЛЕФОН: фикс.размер + грид ====== */
#phone{
  position: absolute;
  left: var(--phone-left);
  top:  var(--phone-top);
  width: var(--phone-width);
  height: var(--phone-height);

  display: grid;
  grid-template-rows: var(--header-h) 1fr var(--footer-h);
  overflow: hidden;

  background: #0f1e25;
  border: 2px solid #0e171c;
  box-shadow: 0 3px 0 #0a1014;
}

/* ====== ШАПКА ====== */
#header{
  background: #202d36;
  display:flex; align-items:center; gap:16px;
  padding: 0 10px;
  border-bottom: 1px solid #0e171c;
  height: var(--header-h);
  width: 100%;
}
#avatar {
  width: 50px;
  aspect-ratio: 1 / 1;       /* всегда квадрат, чтобы круг не тянулся */
  border-radius: 50%;
  overflow: hidden;
  margin-left: 10px;
  flex-shrink: 0;            /* запрет уменьшения в flex-контейнере */
}

#avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;          /* без искажений */
  image-rendering: pixelated; /* чёткие пиксели */
}




/* ====== ЛЕНТА СООБЩЕНИЙ ====== */
#chatBox{
  min-height: 0;
  display:flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  padding: 8px 0;
  overscroll-behavior: contain;
}
#chatBox::-webkit-scrollbar{ width:0; height:0; }

/* Плавность и визуал во время перетаскивания */
#chatBox{ will-change: scroll-position; }
#chatBox.dragging{ cursor: grabbing; }
#chatBox.dragging, #chatBox.dragging *{ user-select: none; }

/* ====== НИЖНЯЯ ПАНЕЛЬ ====== */
#footer{
  background:#202d36;
  border-top: 2px solid #0e171c;
  box-shadow: 0 -3px 0 #0a1014;
  padding: 16px 16px 20px; /* больше «воздуха» снизу */
  height: var(--footer-h);
  display:flex; align-items:center; justify-content:center;
}

/* ====== КНОПКА «Новое» ====== */
#nextMessage{
  position:absolute;
  right:8px;
  bottom: calc(var(--footer-h) + 8px);
  z-index:5;
  cursor:pointer;
}

/* ====== ПУЗЫРИ СООБЩЕНИЙ (однотонные, БЕЗ полосок) ====== */
.bubble{
  display:inline-block;
  max-width: min(calc(100% - 20px), var(--bubble-max-line));
  background: var(--left-a);                 /* ← однотонный */
  margin:10px 10px 0 10px;
  padding:12px 12px 16px;
  border-radius:0;
  border:2px solid var(--left-br);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 3px 0 var(--left-sh);

  align-self:flex-start; /* слева по умолчанию */

  /* типографика под BetterVCR */
  line-height: 1.08;
  letter-spacing: 0;

  /* переносы только по пробелам/новым строкам — слова не рвём */
  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;

  /* «пиксельные» углы */
  clip-path: polygon(
    0 6px, 6px 6px, 6px 0,
    calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px)
  );
}
.bubble.right{
  background: var(--right-a);                /* ← однотонный */
  border-color: var(--right-br);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 3px 0 var(--right-sh);
  align-self:flex-end;
  text-align: right !important;   /* текст справа */
}

.fade-in{ animation: fadeInOpacity .2s ease-in 1; }
@keyframes fadeInOpacity{ 0%{opacity:0} 100%{opacity:1} }

/* ====== «ПЕЧАТАЕТ…» — пиксельные точки, без фона/рамки ====== */
.bubble.typing,
.bubble.right.typing{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  clip-path: none !important;

  display:inline-flex;
  gap:6px; align-items:center;

  width: fit-content;
  max-width: min(calc(100% - 20px), var(--bubble-max-line));
  padding: 6px 8px;
  margin: 10px 10px 0 10px;
}
.bubble.typing{ align-self:flex-start; }
.bubble.right.typing{ align-self:flex-end; justify-content:flex-end; }

/* Пиксельные «три точки» */
.bubble.typing .dot{
  width:6px; height:6px;
  background:#c6d3dc;
  border-radius:1px;                    /* квадратнее → пиксельный вид */
  box-shadow: 0 0 0 1px rgba(0,0,0,.35) inset; /* лёгкий «пиксельный» обвод */
  opacity:.25;
  display:inline-block;
  animation: typing-chunk .9s steps(4, end) infinite;
}
.bubble.typing .dot:nth-child(2){ animation-delay:.12s; }
.bubble.typing .dot:nth-child(3){ animation-delay:.24s; }

@keyframes typing-chunk{
  0%   { opacity:.25; transform: translateY(0);   }
  50%  { opacity:1;    transform: translateY(-2px);}
  100% { opacity:.25; transform: translateY(0);   }
}

/* ====== ВАРИАНТЫ ОТВЕТОВ (всегда видны) ====== */
.choices{
  width:80%;
  margin:10px auto 0;
  padding-bottom: 6px; /* антиприлипание к низу */
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Кнопка ответа: однотонный фон, БЕЗ полосок */
.choice-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;

  width:100%;
  padding:12px 14px;

  color:#c6d3dc;
  background: var(--choice-bg);     /* ← однотонный */
  border:2px solid var(--choice-br);
  border-radius:0;
  font-weight:700;
  letter-spacing:0;
  position:relative;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 3px 0 var(--choice-sh);
  clip-path: polygon(
    0 6px, 6px 6px, 6px 0,
    calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px)
  );
  transition: filter .12s ease, transform .06s ease;

  white-space: pre-wrap;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
}

/* Hover/Active только для активных кнопок */
.choice-btn:not([disabled]):hover{
  filter: brightness(1.13) contrast(1.05);
  transform: translateY(-1px);
}
.choice-btn:not([disabled]):active{
  transform: translateY(0);
}

/* Фокус-кольцо */
.choice-btn:focus-visible{
  outline: 0;
  box-shadow:
    inset 0 -2px 0 rgba(0,0,0,.25),
    0 3px 0 var(--choice-sh),
    0 0 0 2px rgba(90,161,255,.28);
}

/* Выключено */
.choice-btn[disabled], .choice-btn.disabled{
  opacity:.45; filter: grayscale(40%);
  cursor: default; pointer-events:none;
  transform: none;
}

/* «подпрыгивание» по очереди */
@keyframes btn-pop {
  0% { transform: translateY(0) scale(1); }
  40%{ transform: translateY(-5px) scale(1.03); }
  100%{ transform: translateY(0) scale(1); }
}
.choice-btn.attn{ animation: btn-pop .45s ease-out both; }
.choice-btn.attn.delay2{ animation-delay: .12s; }

/* На всякий: стрелка выключена */
.choice-btn::after{ content:none; display:none; }

/* квадратные "пиксели", без теней и без смещений → не мажутся */
.bubble.typing .dot{
  width: 5px;
  height: 5px;
  background: #c6d3dc;
  border-radius: 0;               /* чистый квадрат */
  box-shadow: none;               /* без внутренней псевдо-рамки */
  opacity: .25;
  transform: none;                /* избегаем субпиксельных сдвигов */
  animation: dot-blink-px .9s steps(2, end) infinite; /* только мигаем, без движения */
}
.bubble.typing .dot:nth-child(2){ animation-delay: .12s; }
.bubble.typing .dot:nth-child(3){ animation-delay: .24s; }

@keyframes dot-blink-px {
  0%   { opacity: .25; }
  50%  { opacity: 1;   }
  100% { opacity: .25; }
}

/* для правого пузыря — текст слева от точек и выравнивание вправо */
.bubble.right.typing{
  justify-content: flex-end;
  flex-direction: row-reverse;    /* меняем порядок: точки справа, текст слева */
}
.bubble.right.typing::after{
  margin-left: 0;
  margin-right: 6px;
  text-align: right;
}

:root{
  /* было: --bubble-max-line: 15ch; */
  --bubble-line-ch: 15ch;
  --bubble-line-fallback: 280px; /* подбери под свой размер строки */
}

/* по умолчанию — безопасный px-фолбэк */
.bubble{
  max-width: min(calc(100% - 20px), var(--bubble-line-fallback));
}

/* когда шрифт готов — включаем аккуратный лимит в символах */
.font-ready .bubble{
  max-width: min(calc(100% - 20px), var(--bubble-line-ch));
}

/* === ГЛОБАЛЬНО: отключаем выделение и callout в игре === */
html.game-no-select, 
html.game-no-select body,
html.game-no-select * ,
html.game-no-select *::before,
html.game-no-select *::after{
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;

  -webkit-touch-callout: none !important; /* iOS long-press menu */
  -webkit-tap-highlight-color: transparent;
}

/* Разрешаем выделение там, где оно нужно (инпуты/редактор) */
html.game-no-select input,
html.game-no-select textarea,
html.game-no-select [contenteditable="true"],
html.game-no-select input * ,
html.game-no-select textarea * ,
html.game-no-select [contenteditable="true"] * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;

  -webkit-touch-callout: default !important;
}

/* Список вертикально скроллируемых контейнеров пометь атрибутом data-scroll-y */
[data-scroll-y]{
  touch-action: pan-y !important;
  -ms-touch-action: pan-y !important;
}

/* Картинки не тянутся drag’ом */
html.game-no-select img{
  -webkit-user-drag: none !important;
  user-drag: none !important;
}
/* Только для кнопок: отключаем long-press callout/выделение, тапы разрешены */
.choice-btn,
button,
[role="button"]{
  -webkit-touch-callout: none;   /* iOS: убрать меню по длинному тапу */
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;     /* тапы/клики разрешены, зум-gesture/двойной тап — нет */
  cursor: pointer;
}