/* ========== THEME ========== */
:root {
  --font-family-main: "Source Sans 3", system-ui, sans-serif;
  --font-size-base: 13px;

  --wrap-max-width: 820px;

  --color-bg-main: #14151b;
  --color-bg-main-2: #1f2129;

  --color-panel-bg: #1e202a;
  --color-text-main: #ffffff;
  --color-text-muted: #bfc2ce;

  /* Изумрудный акцент для submit-кнопок и стрелки */
  --color-accent: #00c853;        /* emerald */
  --color-accent-soft: #2eea7a;   /* hover */
  --color-accent-strong: #00a846; /* active */

  --btn-radius: 16px;
  --btn-padding-y: 12px;
  --btn-padding-x: 12px;

  --input-bg: #202233;
  --input-bg-focus: #1b1d2b;
  --input-border: 1px solid rgba(255,255,255,0.14);
  --input-border-focus: 1px solid rgba(0, 200, 83, 0.9);

  --textarea-min-height: 64px;
}

/* ========== BASE / NO BODY SCROLL ========== */
html, body { height: 100%; }

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-family-main);
  font-size: var(--font-size-base);
  color: var(--color-text-main);

  background:
    radial-gradient(circle at top, rgba(0, 200, 83, 0.10) 0, transparent 45%),
    radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.04) 0, transparent 55%),
    linear-gradient(135deg, var(--color-bg-main), var(--color-bg-main-2));

  overflow: hidden;
  display: block;
}

/* Wrapper: full height */
.wrap {
  width: 100%;
  max-width: var(--wrap-max-width);
  margin: 0 auto;

  height: 100vh;
  height: 100dvh;

  padding: 10px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
}

/* ========== SCREENS (scroll inside) ========== */
.screen {
  display: none;

  width: 100%;
  box-sizing: border-box;

  background: rgba(30, 32, 42, 0.96);
  border-radius: 16px;
  padding: 14px;

  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.02);

  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.screen--active { display: block; }

/* Headings */
h2, h3 { margin: 4px 0 10px; letter-spacing: 0.2px; }

.intro { margin: 0 0 12px; color: var(--color-text-muted); }
.note  { color: var(--color-text-muted); font-size: 11px; margin-top: 8px; }

/* ========== BUTTONS (3D) ========== */
.btn {
  width: 100%;
  border-radius: var(--btn-radius);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border: 1px solid rgba(255,255,255,0.12);

  background: linear-gradient(180deg, #343851 0%, #24273a 100%);
  color: white;

  margin: 8px 0;
  font-weight: 650;
  letter-spacing: 0.2px;

  cursor: pointer;
  user-select: none;

  box-shadow:
    0 10px 0 rgba(0,0,0,0.55),
    0 18px 35px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.10);

  transition: transform .08s ease, box-shadow .12s ease, filter .12s ease;
}

.btn:hover { filter: brightness(1.06); }

.btn:active {
  transform: translateY(6px);
  box-shadow:
    0 4px 0 rgba(0,0,0,0.55),
    0 10px 18px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Accent = emerald */
.btn--accent {
  background: linear-gradient(180deg, var(--color-accent-soft) 0%, var(--color-accent) 55%, var(--color-accent-strong) 100%);
  border-color: rgba(46, 234, 122, 0.55);

  box-shadow:
    0 10px 0 rgba(0, 90, 40, 0.70),
    0 18px 35px rgba(0, 200, 83, 0.22),
    0 18px 35px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.16);
}

/* Ghost buttons */
.btn--ghost {
  width: auto;
  padding: 8px 12px;
  margin: 0 0 12px;

  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.22);

  box-shadow:
    0 6px 0 rgba(0,0,0,0.45),
    0 12px 20px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.btn--ghost:active {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.45),
    0 8px 14px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ========== FORMS ========== */
.form-group { margin: 10px 0 12px; }

label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  color: rgba(255,255,255,0.85);
}

textarea, input, select {
  width: 100%;
  box-sizing: border-box;

  padding: 9px 10px;
  background: var(--input-bg);
  border-radius: 10px;
  border: var(--input-border);
  color: white;
  outline: none;
  font-size: 16px;   /* критично для отключения автозума */
}

textarea { min-height: var(--textarea-min-height); }

textarea:focus, input:focus, select:focus {
  background: var(--input-bg-focus);
  border: var(--input-border-focus);
}

/* Inner module buttons grid */
.subbuttons {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}

/* ========== CHAT (input pinned) ========== */
#screen-chat { display: none; height: 100%; }

#screen-chat.screen--active {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#chat-window {
  background: rgba(10, 11, 16, 0.45);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);

  padding: 10px;
  margin: 10px 0;

  flex: 1;
  min-height: 0;
  overflow-y: auto;

  -webkit-overflow-scrolling: touch;
}

.chat-msg {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 10px;
  max-width: 88%;
  line-height: 1.35;
  white-space: pre-wrap;
}

.chat-user {
  background: #2f3345;
  margin-left: auto;
  border: 1px solid rgba(255,255,255,0.08);
}

.chat-bot {
  background: #252839;
  border-left: 4px solid var(--color-accent);
  border: 1px solid rgba(255,255,255,0.08);
}

#chat-input-wrap {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-top: 6px;
  padding-bottom: env(safe-area-inset-bottom);
}

#chat-input {
  flex: 1;
  min-height: 46px;
  resize: none;
}

#chat-send { width: 72px; }

/* Status line */
#status {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.95;
}

/* ========== CHAT META PANEL ========== */
#chat-meta-panel {
  margin-top: 4px;
}

.chat-meta {
  background: rgba(15,16,24,0.8);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  padding: 10px 10px 6px;
  margin-top: 6px;
}

.form-group-inline {
  display: flex;
  gap: 8px;
}

.form-group--small {
  flex: 1;
}

@media (max-width: 480px) {
  .form-group-inline {
    flex-direction: column;
  }
}