/* build:1755443920 */
/* static/chat/css/chat.css
   Минимум конфликтов, максимум пользы:
   — светлая тема всегда
   — липкий композер
   — аккуратные message + actions
   — typing indicator
*/

/* ==== Light theme hard override ==== */
:root { --composer-h: 76px; color-scheme: light;
  --bg: #f9fafb;      /* gray-50   */
  --text: #111827;    /* gray-900  */
  --user-msg: #4EB8FF;
  --bot-bg: #f4f8fc;
  --bot-text: #212c36;
  --radius: 16px;
  --max-width: 720px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --shadow: 0 2px 8px rgba(22,101,162,.07);
}
@media (max-width: 640px){ :root { --composer-h: 96px; } }

html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
}

/* ===== Layout ===== */
#page-wrap { min-height: 100svh; } /* для мобил */
main#chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px;
  overflow-y: auto;
  /* чтобы последние сообщения не скрывались под композером */
  padding-bottom: calc(var(--composer-h) + 24px);
}

/* липкий composer */
#chat-form {
  position: sticky;
  bottom: env(safe-area-inset-bottom, 0);
  margin-bottom: 0 !important;
  z-index: 60;
  background: #fff;
}

/* ===== Messages ===== */
.message {
  position: relative;
  display: inline-block;
  max-width: 70%;
  padding: 12px 18px;
  border-radius: 20px;
  font-size: 1rem;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: var(--shadow);
}
.message.user {
  align-self: flex-end;
  margin-left: auto;
  background: var(--user-msg);
  color: #fff;
  border-radius: 20px 20px 4px 20px;
  font-weight: 500;
  margin-right:28px !important;   /* язычок + тень */
}
.message.bot {
  align-self: flex-start;
  margin-right: auto;
  background: var(--bot-bg);
  color: var(--bot-text);
  border-radius: 20px 20px 20px 4px;
}

/* текст в сообщении отдельным блоком — удобнее для копирования */
.message .message-text { white-space: pre-wrap; }

/* Actions (копировать/повторить) */
.msg-actions {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
}
.message:hover .msg-actions,
.message:focus-within .msg-actions { opacity: 1; pointer-events: auto; }

@media (hover: none) and (pointer: coarse){
  /* на мобиле делаем видимыми всегда */
  .msg-actions { opacity: 1; pointer-events: auto; right: -6px; }
}

.msg-action {
  border: 0;
  border-radius: 8px;
  background: #e5e7eb;
  color: #111827;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.msg-action:hover { filter: brightness(0.97); }
.msg-action.ok { background: #d1fae5; color: #065f46; } /* зелёная вспышка после копирования */

/* ===== Typing indicator ===== */
.message.typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eef2ff;
  color: #1f2937;
}
.message.typing .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #64748b; display: inline-block;
  animation: typing 1s infinite ease-in-out;
}
.message.typing .dot:nth-child(2){ animation-delay: .15s; }
.message.typing .dot:nth-child(3){ animation-delay: .3s; }

@keyframes typing {
  0%, 80%, 100% { transform: translateY(0); opacity: .5; }
  40% { transform: translateY(-3px); opacity: 1; }
}

/* ===== Inputs / Buttons ===== */
#user-input {
  background-color: #fff !important;
  color: var(--text) !important;
  caret-color: var(--text);
}
#user-input::placeholder { color: #9ca3af; }

button[type="submit"].is-disabled,
button[disabled]{
  opacity: .6;
  cursor: not-allowed;
}
/* == overlay / spinner ================================================== */
.app-loading #page-wrap,
.app-loading #open-logs { pointer-events: none;                  /* блокируем всё */ }
#app-loader { transition: opacity .25s ease; }
.app-loaded  #app-loader { opacity: 0; visibility: hidden; }