@import "tailwindcss";

:root {
  --background: #f3f6fb;
  --foreground: #131a24;
  --muted-foreground: #667287;
  --surface-primary: rgba(255, 255, 255, 0.97);
  --surface-elevated: #ffffff;
  --surface-secondary: #f2f5fa;
  --surface-tertiary: #e8eef7;
  --surface-overlay: rgba(255, 255, 255, 0.88);
  --border-subtle: rgba(148, 163, 184, 0.22);
  --border-strong: rgba(148, 163, 184, 0.32);
  --accent-primary: #1296ea;
  --accent-primary-strong: #0284c7;
  --accent-soft: rgba(14, 165, 233, 0.14);
  --accent-soft-strong: rgba(14, 165, 233, 0.24);
  --success-soft: rgba(16, 185, 129, 0.15);
  --danger-soft: rgba(239, 68, 68, 0.12);
  --warning-soft: rgba(245, 158, 11, 0.15);
  --app-shell-gradient: radial-gradient(circle at top, rgba(125, 211, 252, 0.12), transparent 32%), linear-gradient(180deg, #f5f9ff 0%, #eef3fb 46%, #f4f7fb 100%);
  --header-surface: rgba(255, 255, 255, 0.84);
  --shadow-card: 0 12px 30px -22px rgba(15, 23, 42, 0.16), 0 3px 10px -8px rgba(15, 23, 42, 0.08);
  --shadow-elevated: 0 18px 40px -24px rgba(15, 23, 42, 0.18), 0 8px 16px -12px rgba(15, 23, 42, 0.1);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

html[data-bs-theme="dark"] {
  --background: #0b0f14;
  --foreground: #eef2f7;
  --muted-foreground: #97a3b7;
  --surface-primary: rgba(18, 24, 32, 0.92);
  --surface-elevated: #10161d;
  --surface-secondary: #1b212a;
  --surface-tertiary: #232c37;
  --surface-overlay: rgba(12, 18, 25, 0.88);
  --border-subtle: rgba(119, 140, 167, 0.18);
  --border-strong: rgba(119, 140, 167, 0.28);
  --accent-primary: #1ea7ff;
  --accent-primary-strong: #0b8ee5;
  --accent-soft: rgba(30, 167, 255, 0.18);
  --accent-soft-strong: rgba(30, 167, 255, 0.28);
  --success-soft: rgba(16, 185, 129, 0.17);
  --danger-soft: rgba(239, 68, 68, 0.16);
  --warning-soft: rgba(245, 158, 11, 0.18);
  --app-shell-gradient: radial-gradient(circle at top, rgba(30, 167, 255, 0.08), transparent 24%), linear-gradient(180deg, #10161d 0%, #111922 38%, #0b1016 100%);
  --header-surface: rgba(14, 20, 28, 0.88);
  --shadow-card: 0 20px 48px -30px rgba(2, 6, 23, 0.72);
  --shadow-elevated: 0 36px 72px -40px rgba(2, 6, 23, 0.82);
}

html, body {
  overflow-x: hidden;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif;
  transition: background-color 180ms ease, color 180ms ease;
}

a,
button,
input,
select,
textarea {
  transition:
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

::selection {
  background: rgba(14, 165, 233, 0.32);
}

.app-shell {
  background: var(--app-shell-gradient);
  color: var(--foreground);
}

.app-header {
  background: var(--header-surface);
  border-color: var(--border-subtle);
  color: var(--foreground);
}

.app-surface {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.app-surface-elevated {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-elevated);
}

.app-surface-muted {
  background: var(--surface-secondary);
  border: 1px solid var(--border-subtle);
}

.app-card {
  background: var(--surface-primary);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-card);
}

.app-input,
.app-select {
  background: var(--surface-secondary);
  border: 1px solid var(--border-strong);
  color: var(--foreground);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.app-field-label {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
}

.app-choice-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--foreground);
  cursor: pointer;
}

.app-checkbox,
.app-radio {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  accent-color: var(--accent-primary);
  border: 1px solid var(--border-strong);
  background: var(--surface-secondary);
}

.app-checkbox {
  border-radius: 0.25rem;
}

.app-radio {
  border-radius: 9999px;
}

.app-color-input {
  width: 4.5rem;
  height: 2.5rem;
  padding: 0.375rem;
  border-radius: 0.875rem;
  border: 1px solid var(--border-strong);
  background: var(--surface-secondary);
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.app-color-input::-webkit-color-swatch-wrapper {
  padding: 0;
}

.app-color-input::-webkit-color-swatch {
  border: none;
  border-radius: 0.625rem;
}

.app-input::placeholder {
  color: var(--muted-foreground);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--foreground);
  caret-color: var(--foreground);
  box-shadow:
    inset 0 0 0 1000px var(--surface-secondary),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: background-color 99999s ease-in-out 0s;
}

.app-input:hover,
.app-select:hover,
.app-color-input:hover {
  background: var(--surface-tertiary);
  border-color: color-mix(in srgb, var(--accent-primary) 22%, var(--border-strong));
}

.app-input:focus,
.app-select:focus {
  background: var(--surface-elevated);
  border-color: var(--accent-primary);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

.app-color-input:focus {
  border-color: var(--accent-primary);
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-primary) 18%, transparent);
}

.app-input[type="date"],
.app-input[type="datetime-local"],
.app-input[type="time"] {
  color-scheme: light;
}

html[data-bs-theme="dark"] .app-input[type="date"],
html[data-bs-theme="dark"] .app-input[type="datetime-local"],
html[data-bs-theme="dark"] .app-input[type="time"] {
  color-scheme: dark;
}

html[data-bs-theme="dark"] .app-input::-webkit-calendar-picker-indicator {
  filter: invert(0.92) saturate(0.2) brightness(1.05);
}

.app-chip {
  background: var(--surface-secondary);
  color: var(--muted-foreground);
}

.app-chip-active {
  background: var(--accent-primary);
  color: #ffffff;
}

.app-icon-button {
  color: var(--muted-foreground);
}

.app-icon-button:hover {
  background: var(--surface-secondary);
  color: var(--foreground);
}

.app-text-muted {
  color: var(--muted-foreground);
}

.app-text-wrap {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.app-card-caption {
  color: var(--muted-foreground);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.app-divider {
  border-color: var(--border-subtle);
}

.app-menu {
  background: var(--surface-elevated);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-elevated);
}

.app-link-accent {
  color: var(--accent-primary-strong);
}

.app-link-accent:hover {
  color: var(--accent-primary);
}

.app-accent-text {
  color: var(--accent-primary-strong);
}

.app-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
  color: var(--muted-foreground);
}

.app-badge-accent {
  border-color: color-mix(in srgb, var(--accent-primary) 20%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
  color: var(--accent-primary-strong);
}

.app-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 1.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
}

.app-avatar-frame {
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

.app-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent-primary) 18%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-secondary));
  color: var(--accent-primary-strong);
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

.app-counter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--accent-primary);
  color: #ffffff;
}

.app-action-primary {
  border: 1px solid transparent;
  background: var(--accent-primary);
  color: #ffffff;
}

.app-action-primary:hover {
  background: var(--accent-primary-strong);
}

.app-action-secondary {
  border: 1px solid var(--border-strong);
  background: var(--surface-elevated);
  color: var(--foreground);
}

.app-action-secondary:hover {
  background: var(--surface-secondary);
}

.app-action-ghost {
  border: 1px solid transparent;
  background: transparent;
  color: var(--foreground);
}

.app-action-ghost:hover {
  background: var(--surface-secondary);
}

.app-action-danger {
  border: 1px solid color-mix(in srgb, var(--danger-foreground) 18%, var(--border-strong));
  background: var(--surface-elevated);
  color: #dc2626;
}

.app-action-danger:hover {
  background: var(--danger-soft);
  border-color: color-mix(in srgb, var(--danger-foreground) 24%, var(--border-strong));
}

.app-selected {
  border: 1px solid color-mix(in srgb, var(--accent-primary) 22%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
  color: var(--foreground);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-primary) 10%, transparent);
}

.app-selected-soft {
  background: color-mix(in srgb, var(--accent-primary) 10%, var(--surface-secondary));
  color: var(--foreground);
}

.app-pill {
  border: 1px solid transparent;
  background: var(--surface-secondary);
  color: var(--foreground);
}

.app-pill:hover {
  background: var(--surface-tertiary);
}

.app-pill-active {
  border-color: color-mix(in srgb, var(--accent-primary) 22%, var(--border-subtle));
  background: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
  color: var(--foreground);
}

.app-pill-count {
  background: color-mix(in srgb, var(--foreground) 8%, var(--surface-secondary));
  color: var(--muted-foreground);
}

.app-pill-count-active {
  background: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-primary));
  color: var(--accent-primary-strong);
}

.app-unread-surface {
  background: color-mix(in srgb, var(--accent-primary) 8%, var(--surface-primary));
}

.app-dot-accent {
  background: var(--accent-primary);
}

.app-feedback-danger {
  border: 1px solid color-mix(in srgb, #ef4444 20%, var(--border-subtle));
  background: var(--danger-soft);
  color: #b91c1c;
}

.app-feedback-success {
  border: 1px solid color-mix(in srgb, #10b981 18%, var(--border-subtle));
  background: var(--success-soft);
  color: #047857;
}

.app-feedback-warning {
  border: 1px solid color-mix(in srgb, #f59e0b 20%, var(--border-subtle));
  background: var(--warning-soft);
  color: #b45309;
}

.reaction-picker-surface {
  border: 1px solid var(--border-subtle);
  background: var(--surface-secondary);
}

.reaction-picker-modal .EmojiPickerReact,
.reaction-picker-modal aside.EmojiPickerReact {
  --epr-bg-color: var(--surface-secondary);
  --epr-picker-border-color: var(--border-subtle);
  --epr-text-color: var(--muted-foreground);
  --epr-search-input-bg-color: var(--surface-primary);
  --epr-search-input-bg-color-active: var(--surface-primary);
  --epr-search-border-color: var(--border-strong);
  --epr-search-border-color-active: var(--accent-primary);
  --epr-search-input-text-color: var(--foreground);
  --epr-search-input-placeholder-color: var(--muted-foreground);
  --epr-hover-bg-color: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
  --epr-hover-bg-color-reduced-opacity: color-mix(in srgb, var(--accent-primary) 10%, transparent);
  --epr-focus-bg-color: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-primary));
  --epr-highlight-color: var(--accent-primary);
  --epr-category-label-bg-color: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
  --epr-category-label-text-color: var(--muted-foreground);
  --epr-category-icon-active-color: var(--accent-primary-strong);
  --epr-emoji-variation-picker-bg-color: var(--surface-secondary);
  --epr-preview-border-color: var(--border-subtle);
  --epr-dark-bg-color: var(--surface-secondary);
  --epr-dark-picker-border-color: var(--border-subtle);
  --epr-dark-text-color: var(--muted-foreground);
  --epr-dark-search-input-bg-color: var(--surface-primary);
  --epr-dark-search-input-bg-color-active: var(--surface-primary);
  --epr-dark-category-label-bg-color: color-mix(in srgb, var(--surface-secondary) 88%, transparent);
  --epr-dark-hover-bg-color: color-mix(in srgb, var(--accent-primary) 12%, var(--surface-primary));
  --epr-dark-hover-bg-color-reduced-opacity: color-mix(in srgb, var(--accent-primary) 10%, transparent);
  --epr-dark-focus-bg-color: color-mix(in srgb, var(--accent-primary) 18%, var(--surface-primary));
  --epr-dark-highlight-color: var(--accent-primary);
  --epr-dark-category-icon-active-color: var(--accent-primary-strong);
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.reaction-picker-modal .EmojiPickerReact * {
  font-family: var(--font-geist-sans), Arial, Helvetica, sans-serif !important;
}

.reaction-picker-modal .epr-search-container input {
  background: var(--surface-primary) !important;
  border: 1px solid var(--border-strong) !important;
  color: var(--foreground) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

.reaction-picker-modal .epr-search-container input::placeholder {
  color: var(--muted-foreground) !important;
}

.reaction-picker-modal .epr-category-label {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.app-overlay {
  background: rgba(2, 6, 23, 0.56);
  backdrop-filter: blur(12px);
}

html[data-bs-theme="dark"] {
  color-scheme: dark;
}

html[data-bs-theme="light"] {
  color-scheme: light;
}

html[data-bs-theme="dark"] .bg-white {
  background-color: var(--surface-primary) !important;
}

html[data-bs-theme="dark"] .bg-gray-50,
html[data-bs-theme="dark"] .bg-slate-50 {
  background-color: var(--surface-secondary) !important;
}

html[data-bs-theme="dark"] .bg-gray-100,
html[data-bs-theme="dark"] .bg-slate-100 {
  background-color: var(--surface-tertiary) !important;
}

html[data-bs-theme="dark"] .text-gray-900,
html[data-bs-theme="dark"] .text-slate-900,
html[data-bs-theme="dark"] .text-gray-800 {
  color: var(--foreground) !important;
}

html[data-bs-theme="dark"] .text-gray-700,
html[data-bs-theme="dark"] .text-gray-600,
html[data-bs-theme="dark"] .text-gray-500,
html[data-bs-theme="dark"] .text-gray-400,
html[data-bs-theme="dark"] .text-slate-600,
html[data-bs-theme="dark"] .text-slate-500,
html[data-bs-theme="dark"] .text-slate-400 {
  color: var(--muted-foreground) !important;
}

html[data-bs-theme="dark"] .border-gray-100,
html[data-bs-theme="dark"] .border-gray-200,
html[data-bs-theme="dark"] .border-gray-300,
html[data-bs-theme="dark"] .border-slate-100,
html[data-bs-theme="dark"] .border-slate-200 {
  border-color: var(--border-subtle) !important;
}

html[data-bs-theme="dark"] .ring-gray-100,
html[data-bs-theme="dark"] .ring-gray-200,
html[data-bs-theme="dark"] .ring-slate-100,
html[data-bs-theme="dark"] .ring-slate-200 {
  --tw-ring-color: var(--border-subtle) !important;
}

html[data-bs-theme="dark"] .shadow-sm,
html[data-bs-theme="dark"] .shadow-lg,
html[data-bs-theme="dark"] .shadow-xl {
  box-shadow: var(--shadow-card) !important;
}


/* Скрытые полосы прокрутки везде */
* {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}
*::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}