/* CrewChat — спокойный UI, системный шрифт, без неона */

html.crew-v2 {
  --crew-bg: #1a1a1a;
  --crew-bg-2: #222222;
  --crew-surface: #262626;
  --crew-border: #383838;
  --crew-accent: #4a8fd4;
  --crew-accent-2: #4a8fd4;
  --wa: #4a8fd4;
  --wa-deep: #3a7bc0;
  --ink: #f2f2f2;
  --muted: #9a9a9a;
  --line: #383838;
  --panel: #222222;
  --field: #2e2e2e;
  --chat: #1e1e1e;
  --bubble: #2c2c2e;
  --out: #3d6b99;
  --chrome: #1a1a1a;
  --hover: #303030;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-lg: 14px;
  --r-md: 12px;
  --r-sm: 10px;
}

html.crew-v2[data-theme="light"] {
  --crew-bg: #f5f5f5;
  --crew-bg-2: #ffffff;
  --crew-surface: #ffffff;
  --crew-border: #e0e0e0;
  --ink: #1a1a1a;
  --muted: #6b6b6b;
  --panel: #ffffff;
  --field: #f0f0f0;
  --chat: #ececec;
  --bubble: #ffffff;
  --out: #4a8fd4;
  --chrome: #f5f5f5;
  --hover: #ebebeb;
}

html.crew-v2,
html.crew-v2 body {
  height: 100%;
  font-family: var(--sans);
}

html.crew-v2 body {
  margin: 0;
  color: var(--ink);
  background: var(--crew-bg);
}

html.crew-v2 body::before { display: none !important; }

html.crew-v2 body.hub-mode {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

html.crew-v2 #shell {
  padding: 0 !important;
  height: 100dvh;
  max-height: 100dvh;
}

html.crew-v2 #layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  height: 100%;
  min-height: 0;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
  position: relative;
}

/* Мобильный: один экран — либо список, либо чат (в одной ячейке сетки) */
html.crew-v2 #hub,
html.crew-v2 #thread {
  grid-row: 1;
  grid-column: 1;
  min-height: 0;
  min-width: 0;
  max-height: 100%;
}

html.crew-v2 #thread {
  display: none;
}

html.crew-v2 body.chat-open[data-main-tab="chats"] #hub {
  display: none !important;
}

html.crew-v2 body.chat-open[data-main-tab="chats"] #thread {
  display: grid !important;
}

@media (min-width: 900px) {
  html.crew-v2 #layout {
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    grid-template-rows: 1fr;
    max-width: 1200px;
    margin: 12px auto;
    height: calc(100dvh - 24px);
    border-radius: var(--r-lg);
    border: 1px solid var(--crew-border);
  }

  html.crew-v2 #hub {
    grid-row: 1;
    grid-column: 1;
    display: grid !important;
  }

  html.crew-v2 #thread {
    grid-row: 1;
    grid-column: 2;
    display: grid !important;
  }

  html.crew-v2 body.chat-open #hub {
    display: grid !important;
  }
}

/* Boot */
html.crew-v2 #bootSplash {
  background: var(--crew-bg);
}

html.crew-v2 .boot-mark {
  border-radius: 14px;
  background: var(--crew-accent);
  box-shadow: none;
}

html.crew-v2 .boot-title {
  color: var(--muted);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  background: none;
  -webkit-text-fill-color: var(--muted);
}

html.crew-v2 .credit-float { display: none !important; }

/* Gate */
html.crew-v2 .crew-gate {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
  position: relative;
}

html.crew-v2 .crew-gate-card {
  width: min(420px, 100%);
  padding: 28px 24px 32px;
  border-radius: var(--r-lg);
  background: var(--crew-bg-2);
  border: 1px solid var(--crew-border);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

html.crew-v2 .crew-gate-brand {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

html.crew-v2 .crew-mark {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--crew-accent);
  display: grid;
  place-items: center;
  flex: none;
}

html.crew-v2 .crew-gate-kicker,
html.crew-v2 .crew-kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted);
}

html.crew-v2 .crew-gate-brand h1,
html.crew-v2 .crew-head h1 {
  margin: 4px 0 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

html.crew-v2 .crew-gate-lead {
  margin: 0 0 20px;
  color: var(--muted);
  line-height: 1.5;
  font-size: 15px;
}

html.crew-v2 .crew-field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--muted);
}

html.crew-v2 .crew-field input {
  border: 1px solid var(--crew-border);
  border-radius: var(--r-sm);
  background: var(--field);
  padding: 14px 16px;
  font-size: 16px;
}

html.crew-v2 .crew-error {
  min-height: 1.2em;
  margin: 0 0 8px;
  color: #ff6b8a;
  font-size: 13px;
}

html.crew-v2 .crew-btn--primary {
  width: 100%;
  border: 0;
  border-radius: var(--r-sm);
  padding: 14px;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  background: var(--crew-accent);
}

/* Shell / hub */
html.crew-v2 .crew-shell {
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  background: transparent;
  border: none;
}

html.crew-v2 .crew-shell-main {
  min-height: 0;
  overflow: hidden;
  display: grid;
}

html.crew-v2 .crew-panel {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  overflow: hidden;
  padding-bottom: 4px;
}

html.crew-v2 #panelYou {
  grid-template-rows: auto auto auto;
  overflow: auto;
}

html.crew-v2 .crew-head {
  padding: max(12px, env(safe-area-inset-top)) 20px 8px;
}

html.crew-v2 .crew-head--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}

html.crew-v2 .crew-scroll {
  overflow: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
  padding: 0 16px 12px;
}

html.crew-v2 .crew-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

html.crew-v2 .crew-empty {
  margin: 32px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.45;
}

html.crew-v2 .crew-search {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 16px 14px;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: var(--crew-surface);
  border: 1px solid var(--crew-border);
}

html.crew-v2 .crew-search input {
  border: 0;
  background: transparent;
  width: 100%;
  font-size: 16px;
  padding: 0;
}

html.crew-v2 .crew-icon-btn {
  width: 44px;
  height: 44px;
  border: 1px solid var(--crew-border);
  border-radius: 50%;
  background: var(--crew-surface);
  color: var(--ink);
  display: grid;
  place-items: center;
  flex: none;
}

html.crew-v2 .crew-icon-btn--accent {
  border: none;
  background: var(--crew-accent);
  color: #fff;
  font-size: 22px;
  font-weight: 400;
}

html.crew-v2 .crew-actions-row {
  display: flex;
  gap: 10px;
  padding: 0 16px 12px;
  overflow: auto;
}

html.crew-v2 .crew-pill {
  border: 1px solid var(--crew-border);
  border-radius: 999px;
  padding: 10px 16px;
  background: var(--crew-surface);
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

html.crew-v2 .crew-pill--ghost { opacity: 0.45; }

html.crew-v2 .crew-section-title {
  margin: 0 20px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* Chat list item */
html.crew-v2 .crew-chat-item {
  width: 100%;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--crew-border);
  border-radius: var(--r-md);
  background: var(--crew-surface);
  text-align: left;
  color: inherit;
  transition: transform 0.12s, box-shadow 0.2s;
}

html.crew-v2 .crew-chat-item:active { transform: scale(0.985); }

html.crew-v2 .crew-chat-item.is-active {
  border-color: var(--crew-accent);
  background: var(--hover);
}

html.crew-v2 .crew-avatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #4a4a4a;
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: none;
}

html.crew-v2 .crew-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.crew-v2 .crew-avatar--lg {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  font-size: 36px;
  margin: 0 auto;
}

html.crew-v2 .crew-chat-body { min-width: 0; }

html.crew-v2 .crew-chat-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

html.crew-v2 .crew-chat-top b {
  font-size: 17px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.crew-v2 .crew-chat-top time {
  font-size: 12px;
  color: var(--muted);
  flex: none;
}

html.crew-v2 .crew-chat-top time.is-fresh {
  color: var(--crew-accent-2);
  font-weight: 600;
}

html.crew-v2 .crew-chat-preview {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Calls */
html.crew-v2 .crew-call-item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--crew-border);
  background: var(--crew-surface);
  width: 100%;
  text-align: left;
  color: inherit;
}

html.crew-v2 .crew-call-item.is-missed .crew-call-name,
html.crew-v2 .crew-call-item.is-missed .crew-call-sub { color: #d9534f; }

html.crew-v2 .crew-call-name { font-weight: 600; font-size: 16px; }

html.crew-v2 .crew-call-sub { font-size: 13px; color: var(--muted); }

html.crew-v2 .crew-call-when { font-size: 12px; color: var(--muted); }

/* Profile */
html.crew-v2 .crew-profile {
  text-align: center;
  padding: 8px 20px 20px;
}

html.crew-v2 .crew-profile-name {
  display: block;
  margin-top: 12px;
  font-size: 22px;
  font-weight: 700;
}

html.crew-v2 .crew-profile-handle {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

html.crew-v2 .crew-link-btn {
  margin-top: 10px;
  border: 0;
  background: none;
  color: var(--crew-accent);
  font-weight: 600;
}

html.crew-v2 .crew-menu {
  margin: 10px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--crew-border);
  background: var(--crew-surface);
  overflow: hidden;
}

html.crew-v2 .crew-menu-label {
  margin: 0;
  padding: 12px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

html.crew-v2 .crew-menu-item {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
  border: 0;
  border-top: 1px solid var(--crew-border);
  background: transparent;
  padding: 14px 16px;
  text-align: left;
  font-size: 16px;
  color: var(--ink);
}

html.crew-v2 .crew-menu .crew-menu-item:first-of-type { border-top: 0; }

html.crew-v2 .crew-menu-item--danger span { color: #d9534f; }

html.crew-v2 .crew-chev { color: var(--muted); }

html.crew-v2 .crew-meta { color: var(--muted); font-size: 14px; }

html.crew-v2 .crew-theme-pick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px 12px 14px;
}

html.crew-v2 .crew-theme-pick button {
  border: 1px solid var(--crew-border);
  border-radius: var(--r-sm);
  padding: 10px;
  background: var(--field);
  display: flex;
  align-items: center;
  gap: 8px;
}

html.crew-v2 .crew-theme-pick button.is-on {
  border-color: var(--crew-accent);
  color: var(--crew-accent);
  font-weight: 600;
}

html.crew-v2 .swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--crew-border);
}

html.crew-v2 .swatch.light { background: #f8fafc; }
html.crew-v2 .swatch.dark { background: #0f172a; }

html.crew-v2 .crew-footnote,
html.crew-v2 .settings-credit {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  padding: 8px 16px 16px;
}

html.crew-v2 .settings-credit b { color: var(--ink); }

/* Dock */
html.crew-v2 .crew-dock {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 0;
  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
  border-radius: 0;
  background: var(--crew-bg-2);
  border-top: 1px solid var(--crew-border);
  box-shadow: none;
}

html.crew-v2 .crew-dock button {
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

html.crew-v2 .crew-dock button.is-on {
  background: var(--hover);
  color: var(--crew-accent);
}

html.crew-v2 .crew-dock-ico {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
}

html.crew-v2 .crew-dock-ico--pulse {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid currentColor;
}

html.crew-v2 .crew-dock-ico--ring {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  border: 2px solid currentColor;
}

html.crew-v2 .crew-dock-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 10px !important;
  font-size: 11px !important;
}

/* Thread */
html.crew-v2 #thread.crew-thread {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--chat);
  overflow: hidden;
}

html.crew-v2 .crew-thread-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px 16px;
  background: var(--crew-bg-2);
  border-bottom: 1px solid var(--crew-border);
}

html.crew-v2 .crew-thread-meta {
  flex: 1;
  min-width: 0;
}

html.crew-v2 .crew-thread-meta b {
  display: block;
  font-size: 17px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.crew-v2 .crew-thread-meta p {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--muted);
}

html.crew-v2 .crew-thread-tools {
  display: flex;
  gap: 6px;
  align-items: center;
}

html.crew-v2 .crew-chip-btn {
  border: 0;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: var(--crew-surface);
  border: 1px solid var(--crew-border);
}

html.crew-v2 .crew-thread-body {
  position: relative;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

html.crew-v2 #log {
  flex: 1;
  overflow: auto;
  padding: 16px 16px 8px;
  gap: 8px;
}

html.crew-v2 .bubble {
  max-width: min(78%, 480px);
  margin: 2px 0;
  padding: 10px 14px;
  border-radius: 14px;
  background: var(--bubble);
  border: none;
  box-shadow: none;
}

html.crew-v2 .bubble::before { display: none !important; }

html.crew-v2 .bubble.mine {
  margin-left: auto;
  border-radius: 14px;
  background: var(--out);
  color: #fff;
}

html.crew-v2 .day {
  align-self: center;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  background: var(--crew-surface);
  border: 1px solid var(--crew-border);
}

html.crew-v2 .crew-composer-bar {
  padding: 8px 12px max(10px, env(safe-area-inset-bottom));
  background: var(--crew-bg-2);
  border-top: 1px solid var(--crew-border);
}

html.crew-v2 .crew-composer {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}

html.crew-v2 .crew-composer-field {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  padding: 4px 6px;
  border-radius: 22px;
  background: var(--crew-surface);
  border: 1px solid var(--crew-border);
}

html.crew-v2 .crew-composer-field input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 8px 4px;
  font-size: 16px;
  min-width: 0;
}

html.crew-v2 .crew-composer-btn {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 0;
  border-radius: 50%;
  background: var(--crew-surface);
  border: 1px solid var(--crew-border);
  display: grid;
  place-items: center;
  flex: none;
}

html.crew-v2 .crew-composer-btn--inline {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
}

html.crew-v2 .crew-composer-send {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--crew-accent);
  color: #fff;
  display: grid;
  place-items: center;
}

html.crew-v2 .crew-thread-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  pointer-events: none;
}

html.crew-v2 body.chat-open .crew-thread-placeholder { display: none; }

/* На вкладках кроме диалогов чат справа не показываем (десктоп) */
@media (min-width: 900px) {
  html.crew-v2 body[data-main-tab="you"] #thread,
  html.crew-v2 body[data-main-tab="calls"] #thread,
  html.crew-v2 body[data-main-tab="status"] #thread,
  html.crew-v2 body[data-main-tab="communities"] #thread {
    display: none !important;
  }
}

html.crew-v2 .bubble img.photo {
  max-width: 100%;
  border-radius: 10px;
  border: none;
  box-shadow: none;
}

html.crew-v2 #composer {
  display: flex !important;
  flex-wrap: nowrap;
}

/* Group flow skin */
html.crew-v2 #groupSheet {
  background: var(--crew-bg);
}