/* style.css — единый стиль всего проекта (Apple-inspired) */
html, body {
    margin: 0;
    padding: 0;
    width: 100% !important;
    height: 100% !important; /* Только проценты для мобильныхWebView */
    max-width: 100% !important;
    max-height: 100% !important;
    overflow: hidden;
    background-color: #ffffff;
}

:root {
  /* Цвета — Apple минимализм */
  --frontboard: #ffffff;
  --color-bg: #ffffff;
  --color-text: #1d1d1f;
  --color-muted: #86868b;
  --color-text-muted: #666;
  --color-border: #d2d2d7;
  --color-card-bg: #ffffff;
  --color-beige: #f5f5f7;
  --color-sage: #f5f5f7;

  /* Основные цвета */
  --color-primary: #0071e3;    /* Apple blue */
  --color-success: #34c759;
  --color-danger: #ff3b30;
  --color-warning: #ff9500;

  /* Отступы и радиусы */
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 16px;
  --space-l: 24px;
  --space-xl: 40px;

  /* Тени — только для глубины, не для объёма */
  --shadow-card: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-btn: none;

}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  min-height: 100vh;
}

#map {
  width: 100%;
  height: 100%;
  min-height: 400px;
}

#app {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important; /* Намертво прибивает каркас к экрану */
    top: 0 !important;
    left: 0 !important;
    
    /* ИСПРАВЛЕНО: Меняем vh на жесткие проценты, чтобы сайт не лез под системные кнопки Android */
    width: 100% !important;
    height: 100% !important; 
    max-width: 100% !important;
    max-height: 100% !important;
    
    overflow: hidden !important; /* Блокирует скроллинг всего экрана */
    box-sizing: border-box !important;
}

.frontboard, .content, main, #profileContent {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 20px 80px 20px !important;
    
    background-color: #ffffff !important;
    
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    -webkit-overflow-scrolling: touch !important;
}



.card {
  background: #ffffff !important;
  border-radius: var(--radius-m);
  padding: var(--space-m);
  margin-bottom: var(--space-m);
  box-shadow: var(--shadow-card);
}

/* === Текст и заголовки — тонкие === */
h1, h2, h3, h4 {
  font-weight: 600;
  margin-bottom: var(--space-m);
  letter-spacing: -0.02em;
}

h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }

p, li {
  margin-bottom: var(--space-s);
}

/* === Кнопки — минимализм === */
.btn {
  display: inline-block;
  width: 100%;
  padding: 14px var(--space-m);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-l);
  font-size: 17px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: opacity 0.15s ease;
  letter-spacing: -0.01em;
  margin: var(--space-s) 0;
}

.btn:hover, .btn:active {
  opacity: 0.85;
}

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  box-shadow: none;
}

.btn-small {
  padding: 8px 16px;
  font-size: 14px;
  border-radius: var(--radius-s);
  width: auto;
  margin: 0 var(--space-xs);
}

.btn-success {
  background: var(--color-success);
  color: white;
}

.btn-danger {
  background: var(--color-danger);
  color: white;
}

.btn-warning {
  background: var(--color-warning);
  color: white;
}

/* === Поля ввода === */
.input-field, .textarea-field, .select-field {
  width: 100%;
  padding: 12px 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  background: transparent;
  font-size: 17px;
  margin: var(--space-s) 0 var(--space-l) 0;
  outline: none;
  caret-color: var(--color-primary);
}

.input-field:focus, .textarea-field:focus {
  border-bottom-color: var(--color-primary);
}

.textarea-field {
  min-height: 100px;
  resize: vertical;
}

.select-field {
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
}

/* === Статусы === */
.status-badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  display: inline-block;
  font-weight: 600;
}

.status-pending { background: #fff3cd; color: #856404; }
.status-approved { background: #d4edda; color: #155724; }
.status-rejected { background: #f8d7da; color: #721c24; }

/* === Индикаторы === */
.status-indicator {
  font-size: 16px;
  margin-right: var(--space-s);
}

/* === Шапка — минимализм === */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 0.5px solid #d2d2d7;
  min-height: 44px;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.org-name {
  font-weight: 600;
  font-size: 17px;
  text-align: center;
  flex: 1;
  letter-spacing: -0.01em;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.back-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  color: var(--color-primary);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

/* === Нижняя панель — iOS style === */
.bottom-bar {
    flex-shrink: 0 !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 1000 !important;
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid #d2d2d7 !important;

    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 40px !important;

    padding: 0 !important;
    height: 50px !important;
    box-sizing: border-box !important;
}

.bottom-bar a,
.bottom-bar .bar-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    color: var(--color-muted) !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.bottom-bar .bar-icon {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
    margin-bottom: 2px !important;
    padding: 0 !important;
}

.bottom-bar .bar-btn span:last-child {
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.bottom-bar a.bar-btn-active,
.bottom-bar a.bar-btn-active .bar-icon,
.bottom-bar .bar-btn-active,
.bottom-bar .bar-btn-active .bar-icon {
    color: var(--color-primary) !important;
    stroke: var(--color-primary) !important;
}

.bottom-bar .bar-btn:not(.bar-btn-active) .bar-icon {
    stroke: var(--color-muted) !important;
    fill: none;
}


/*
.bottom-bar {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  background: white;
  border-top: 1px solid var(--color-border);
  padding: var(--space-s) 0;
}
*/

.bar-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--color-muted);
  font-size: 12px;
  padding: var(--space-xs) var(--space-s);
}

.bar-btn.active, .bar-btn:hover {
  color: var(--color-primary);
}

/* === Модальные окна === */
.modal {
  position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    height: 100vh !important;
    background: #ffffff; /* Белый фон, чтобы не было видно задний сайт */
    display: flex;
    justify-content: flex-start; /* Прижимаем контент к самому верху экрана */
    align-items: flex-start;     /* Прижимаем контент к самому верху экрана */
    z-index: 100000;             /* Поверх абсолютно всего на сайте */
    margin: 0 !important;
    padding: 0 !important;
}

.modal-content {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 85vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    position: relative;
    overflow: hidden;
	overflow-y: auto !important;
}

/* === Состояния === */
.loading, .empty-state, .error-state {
  padding: var(--space-l);
  text-align: center;
  color: var(--color-muted);
}

/* Skeleton loader — тонкий, Apple-стиль */
.skeleton-loader {
  display: inline-block;
  width: 180px;
  height: 36px;
  border-radius: 18px;
  background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.error-state {
  color: var(--color-danger);
}

/* === Списки заявок === */
.applications-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.application-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--color-border);
}

.application-item:last-child {
  border-bottom: none;
}

/* Accordion styles for applications */
.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid #f0f0f2;
}

.accordion-arrow {
  transition: transform 0.3s ease;
  font-size: 12px;
  color: var(--color-muted, #888);
}

.accordion-arrow.expanded {
  transform: rotate(90deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.accordion-content.expanded {
  max-height: 500px;
}

.accordion-content-inner {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f2;
}

/* === Карточки групп === */
.group-card {
  display: flex;
  gap: var(--space-m);
  cursor: pointer;
  transition: opacity 0.2s;
}

.group-card:hover {
  opacity: 0.95;
}

.group-status {
  font-size: 20px;
  flex-shrink: 0;
}

.group-info {
  flex: 1;
}

.group-title {
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 var(--space-s);
}

.group-desc, .group-meta {
  font-size: 14px;
  color: var(--color-muted);
}

/* === Главная страница — Apple минимализм === */
.welcome-card {
  text-align: center;
  padding: var(--space-xl) 0 0;
}

.sacred-symbol {
  font-size: 36px;
  margin-bottom: var(--space-m);
  opacity: 0.5;
}

.welcome-title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-s);
  line-height: 1.2;
}

.welcome-subtitle {
  font-size: 16px;
  font-weight: 400;
  color: var(--color-muted);
  margin-bottom: var(--space-xl);
  line-height: 1.5;
}

.path-selection {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0;
  background: var(--color-border);
  border-radius: var(--radius-l);
  overflow: hidden;
}

.path-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  color: var(--color-text);
  padding: 18px 20px;
  background: #ffffff;
  transition: background 0.15s ease;
}

.path-btn:first-child {
  border-radius: var(--radius-l) var(--radius-l) 0 0;
}

.path-btn:last-child {
  border-radius: 0 0 var(--radius-l) var(--radius-l);
}

.path-btn:hover {
  background: var(--color-beige);
}

.path-btn:active {
  background: #e8e8ed;
  transition: background 0.05s ease;
}

.path-icon-svg {
  flex-shrink: 0;
  opacity: 0.85;
}

.path-content {
  text-align: left;
  flex: 1;
}

.path-name {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}

.path-desc {
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.4;
}

.user-location {
  margin-top: var(--space-l);
  color: var(--color-muted);
  font-size: 14px;
}

/* === Фильтры === */
.filters {
  display: flex;
  justify-content: center;
  gap: var(--space-s);
  padding: 0 var(--space-m) 12px;
  max-width: 360px;
  margin: 0 auto;
  background: var(--color-bg);
}

.filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-bg);
  border: none;
  border-radius: 20px;
  color: var(--color-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

.filter-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: currentColor;
}

.filter-btn:active {
  opacity: 0.7;
  transform: scale(0.96);
}

.filter-btn.active {
  background: var(--color-primary);
  color: white;
  font-weight: 600;
}

.theme-color {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background-clip: padding-box;
  cursor: pointer;
  margin: 4px;
  display: inline-block;
}

.theme-color.selected {
  border-color: var(--color-primary);
  transform: scale(1.1);
}

/* === Страницы входа и регистрации === */
.auth-page {
  padding: 20px;
  background: var(--color-bg);
}

.auth-card {
  max-width: 400px;
  margin: 40px auto;
  background: var(--color-card-bg);
  padding: 24px;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
}

.auth-card h2 {
  margin-top: 0;
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
}

.auth-input {
  width: 100%;
  padding: 10px;
  margin: 8px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  font-family: inherit;
  font-size: 16px;
}

.auth-btn {
  width: 100%;
  padding: 12px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-m);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
}

.auth-btn:hover {
  opacity: 0.9;
}

.auth-error {
  color: var(--color-danger);
  margin-top: 8px;
  font-size: 14px;
}

.auth-link {
  display: block;
  margin-top: 16px;
  color: var(--color-primary);
  text-decoration: none;
  text-align: center;
}

#closeMap {
    position: absolute;
    top: 60px;              /* Кардинально опустили кнопку вниз, чтобы обойти системную строку телефона */
    right: 24px;            /* Слегка увеличили отступ справа для баланса */
    z-index: 10000;
    width: auto !important;
    min-width: 100px;
    background: #ffffff;
    color: #1d1d1f;
    border: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 24px;
    cursor: pointer;
    text-align: center;
}

#closeMap:active {
    background: #f5f5f7;
    transform: scale(0.95); /* Эффект нажатия пальцем */
}

/* Опускаем блок управления зумом Leaflet (+ и -) чуть ниже, чтобы он не залезал под кнопку */
.leaflet-top.leaflet-left {
    top: 62px !important;    /* Сдвигаем весь блок вниз на 75 пикселей от верхнего края */
    left: 16px !important;   /* Слегка отодвигаем от левого края для красоты */
}

/* Делаем кнопки зума аккуратнее на смартфонах */
.leaflet-bar {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important; /* Мягкая тень под + и - вместо жесткой черной */
    border: none !important;
}

.multi-select {
  width: 100%;
  height: 120px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px;
  background-color: white;
  font-size: 16px;
}

/* Всплывающие уведомления (Toast) для Web, Android и iOS */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: rgba(30, 30, 32, 0.95);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease;
    opacity: 0;
    pointer-events: none;
    text-align: center;
    max-width: 85%;
    width: max-content;
}

.toast-notification.toast-show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Стили для раскрывающегося списка участников группы */
.members-accordion {
    margin-top: 12px;
}
.members-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 4px 0;
}
.members-arrow {
    transition: transform 0.2s ease;
    font-size: 14px;
}
.members-accordion.open .members-arrow {
    transform: rotate(180deg);
}
.members-list-wrapper {
    display: none;
    margin-top: 15px;
    border-top: 1px solid #f0f0f2;
    padding-top: 10px;
}
.members-accordion.open .members-list-wrapper {
    display: block;
}
.member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid #f8f8fa;
}
.member-item:last-child {
    border-bottom: none;
}
.member-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #eee;
}
.member-name {
    font-size: 14px;
    font-weight: 600;
}
.member-role-badge {
    font-size: 11px;
    background: #eef2ff;
    color: #4a90e2;
    padding: 2px 8px;
    border-radius: 12px;
    margin-left: auto;
}

/* Стили для встроенного группового чата Нама-Хатта */
.chat-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    z-index: 2000;
    display: flex;
    flex-direction: column;
}
.chat-history {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    background: #f4f4f7;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chat-msg-row {
    display: flex;
    gap: 8px;
    max-width: 80%;
}
.chat-msg-row.my-msg {
    align-self: flex-end;
    flex-direction: row-reverse;
}
.chat-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    background: #e0e0e0;
    flex-shrink: 0;
}
.chat-msg-bubble {
    background: #ffffff;
    padding: 10px 14px;
    border-radius: 4px 16px 16px 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.chat-msg-row.my-msg .chat-msg-bubble {
    background: #eef2ff;
    border-radius: 16px 4px 16px 16px;
}

/* Контекстное меню (Telegram-style) */
.context-menu-item:active {
    background: #f4f4f7;
}

.context-menu-item:active {
    opacity: 0.7;
}

/* Предотвращаем выделение текста на пунктах меню */
.context-menu-item {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent !important;
    pointer-events: auto !important;
}

/* Глобально запрещаем выделение на меню и backdrop */
#messageContextMenu,
#messageMenuBackdrop {
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* Затемнение фона */
#messageMenuBackdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 10001;
}

/* Убираем подсветку и движение при наведении */
.chat-msg-row:hover {
    background: transparent;
    padding: 0;
    margin: 0;
}

/* Убираем синюю подсветку при тапе на мобильных */
.chat-msg-row {
    -webkit-tap-highlight-color: transparent;
}

/* Свайп для ответа */
.chat-msg-row {
    transition: transform 0.25s ease-out;
}
.chat-msg-row.swiping {
    transition: none;
    touch-action: none;
}
.chat-msg-author {
    font-size: 11px;
    font-weight: 700;
    color: #4a90e2;
    margin-bottom: 3px;
}
.chat-msg-text {
    font-size: 14px;
    color: #1e1e20;
    word-break: break-word;
}
.chat-msg-time {
    font-size: 10px;
    color: #88888b;
    text-align: right;
    margin-top: 4px;
}
.chat-msg-time .edited-indicator {
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.7;
}

/* Блок цитаты ответа (как в Telegram) */
.chat-msg-reply-quote {
    background: #f0f4ff;
    padding: 8px 10px;
    border-radius: 8px;
    border-left: 3px solid #4a90e2;
    margin-bottom: 8px;
}

.chat-msg-reply-quote .reply-author {
    font-size: 11px;
    font-weight: 700;
    color: #4a90e2;
    margin-bottom: 2px;
}

.chat-msg-reply-quote .reply-text {
    font-size: 13px;
    color: #1e1e20;
    word-break: break-word;
}

.chat-input-bar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 12px;
    background: #ffffff;
    border-top: 1px solid #e5e5e7;
}
.chat-textarea {
    flex: 1;
    min-height: 44px;
    max-height: 150px;
    padding: 10px 14px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: #f4f4f7;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.4;
    resize: none;
    outline: none;
    overflow-y: auto;
    transition: border-color 0.2s ease;
    margin-bottom: 0 !important;
}
.chat-textarea:focus {
    border-color: var(--color-primary);
    background: #ffffff;
}
.chat-textarea::placeholder {
    color: #8e8e93;
}
.btn-send {
    flex-shrink: 0;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}
.btn-send:active {
    opacity: 0.8;
    transform: scale(0.95);
}
.chat-input-bar input {
    margin-bottom: 0 !important;
}

/* Анимация для индикатора непрочитанных сообщений */
@keyframes pulseUnread {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); box-shadow: 0 1px 6px rgba(255, 59, 48, 0.4); }
    100% { transform: scale(1); }
}

/* Делаем маску Кроппера круглой для аватарок */
.cropper-view-box,
.cropper-face {
    border-radius: 50%;
}
.cropper-view-box {
    outline: 2px solid #4a90e2;
    outline-color: rgba(74, 144, 226, 0.75);
}

/* ==========================================================
   [ОБНОВЛЕНО] СОВРЕМЕННЫЙ 3D-ДИЗАЙН ПАРЯЩИХ КАРТОЧЕК ГРУПП
   ========================================================== */

.frontboard .card, 
.content .card {
    background: #ffffff !important;
    border-radius: 16px !important; /* Красивые скругленные мобильные углы */
    padding: 16px 18px !important;  /* Внутренние отступы, чтобы текст дышал */
    margin-bottom: 16px !important; /* Увеличиваем зазор между карточками */
    
    /* ТРЁХМЕРНЫЙ ЭФФЕКТ: Сложная мягкая тень (парение блока над серым фоном) */
    box-shadow: 0 6px 16px rgba(160, 150, 140, 0.15) !important;
    
    /* Полностью убираем плоские рамки, тень сама сделает объём */
    border: none !important; 
    
    box-sizing: border-box !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* Реалистичный эффект продавливания 3D-карточки при нажатии пальцем */
.frontboard .card:active, 
.content .card:active {
    transform: translateY(2px) scale(0.985) !important; /* Карточка слегка опускается */
    box-shadow: 0 2px 6px rgba(160, 150, 140, 0.1) !important; /* Тень становится ближе */
    background-color: #fafafa !important;
}

/* Тактильный фидбек для групповых карточек на тач-устройствах */
.frontboard .card:active, 
.content .card:active {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Заголовки групп делаем крупнее, жирнее и солиднее */
.frontboard .card h4, 
.content .card h4 {
    color: #1d1d1f !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
}

/* Описание программы (Киртан, лекция, прасад...) */
.frontboard .card p, 
.content .card p {
    color: #48484a !important;
    font-size: 13.5px !important;
    margin-bottom: 10px !important;
    line-height: 1.45 !important;
}

/* Оформление нижней информационной строчки (иконки) */
.frontboard .card small, 
.content .card small,
.frontboard .card p:last-child {
    font-size: 12px !important;
    color: #8e8e93 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
}

/* ==========================================================
   [НОВОЕ] ЭФФЕКТ ВЫДЕЛЕНИЯ И ПРИПОДНИМАНИЯ КАРТОЧЕК ГРУПП
   ========================================================== */

/* Эффект при наведении курсора мыши (для ПК) */
.frontboard .card:hover, 
.content .card:hover {
    transform: translateY(-4px) !important; /* Карточка плавно приподнимается вверх на 4 пикселя */
    box-shadow: 0 10px 24px rgba(140, 130, 120, 0.22) !important; /* Тень становится глубже и мягче, усиливая 3D-эффект */
    background-color: #ffffff !important;
}

/* === Уведомления === */
.notif-item {
    display: flex;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f0f0f2;
    cursor: pointer;
    transition: background 0.2s;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item.unread {
    background: rgba(0, 122, 255, 0.04);
    border-radius: 8px;
    padding: 14px 8px;
    margin: 0 -8px;
}

.notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.notif-icon.approved {
    background: #d4edda;
}

.notif-icon.rejected {
    background: #f8d7da;
}

.notif-icon.chat {
    background: #eef2ff;
}

.notif-icon.removed {
    background: #fff3cd;
}

.notif-content {
    flex: 1;
    min-width: 0;
}

.notif-title {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 4px 0;
}

.notif-item.unread .notif-title {
    font-weight: 700;
}

.notif-text {
    font-size: 13px;
    color: var(--color-muted);
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.notif-time {
    font-size: 11px;
    color: #8e8e93;
    margin: 0;
}

.notif-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--color-muted);
}

.notif-empty-icon {
    font-size: 48px;
    margin-bottom: 12px;
}

/* === Группировка уведомлений === */
.notif-group {
    border-bottom: 1px solid #f0f0f2;
}

.notif-group:last-child {
    border-bottom: none;
}

.notif-group.unread {
    background: rgba(0, 122, 255, 0.04);
    border-radius: 8px;
    padding: 14px 8px;
    margin: 0 -8px;
}

.notif-group-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 0;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
}

.notif-group-header:active {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 8px;
}

.notif-group-count {
    background: var(--color-primary, #007aff);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    flex-shrink: 0;
    min-width: 24px;
    text-align: center;
}

.notif-group-arrow {
    transition: transform 0.2s ease;
    font-size: 12px;
    color: var(--color-muted, #8e8e93);
    flex-shrink: 0;
    margin-top: 4px;
}

.notif-group.expanded .notif-group-arrow {
    transform: rotate(90deg);
}

.notif-group-items {
    display: none;
    padding: 0 0 0 52px;
    background: rgba(0, 0, 0, 0.01);
    border-radius: 0 0 8px 8px;
    margin-top: -4px;
}

.notif-group.expanded .notif-group-items {
    display: block;
}

.notif-item-single {
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f7;
    cursor: pointer;
    transition: background 0.2s;
}

.notif-item-single:last-child {
    border-bottom: none;
}

.notif-item-single:active {
    background: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
}

.notif-item-single.unread {
    background: rgba(0, 122, 255, 0.03);
    border-radius: 6px;
    padding: 10px 6px;
    margin: 0 -6px;
}

.notif-item-single .notif-text {
    font-size: 13px;
    color: var(--color-muted, #8e8e93);
    margin: 0 0 4px 0;
    line-height: 1.4;
}

.notif-item-single .notif-time {
    font-size: 11px;
    color: #c7c7cc;
    margin: 0;
}

/* === APK Download Card — минимализм === */
.android-download-card {
    text-align: center;
    margin: 24px 0;
    padding: 24px 20px;
    background: var(--color-beige);
    border-radius: var(--radius-l);
    box-sizing: border-box;
}

.android-download-card__title {
    margin: 0 0 8px;
    color: var(--color-text);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.android-download-card__desc {
    font-size: 14px;
    color: var(--color-muted);
    margin: 0 0 16px;
    line-height: 1.5;
}

.android-download-card__btn {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-weight: 500;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 15px;
    text-align: center;
    transition: opacity 0.15s ease;
}

.android-download-card__btn:active {
    opacity: 0.7;
}

.android-download-card__qr {
    margin: 16px auto 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    display: inline-block;
}

.android-download-card__qr-img {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 0;
    opacity: 0.7;
}

/* Бейдж непрочитанных сообщений */
.unread-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ff3b30;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    animation: pulseUnread 2s infinite;
}

.bottom-bar .bar-btn {
    position: relative;
}

/* === Чаты === */
.chat-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 16px 0 8px;
}

.chat-list {
    display: flex;
    flex-direction: column;
    background: var(--color-border);
    border-radius: var(--radius-l);
    overflow: hidden;
    margin-bottom: 20px;
}

.chat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease;
}

.chat-item:active {
    background: var(--color-beige);
}

.chat-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--color-beige);
}

.chat-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    background: var(--color-beige);
    border: 1px solid var(--color-border);
}

.chat-item-info {
    flex: 1;
    min-width: 0;
}

.chat-item-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chat-item-meta {
    font-size: 13px;
    color: var(--color-muted);
    margin-top: 2px;
}

.chat-empty {
    padding: 16px;
    text-align: center;
    color: var(--color-muted);
    font-size: 14px;
    background: #ffffff;
}

/* === Инфо-центр === */
.info-search-wrap {
    padding: 0 16px 12px;
    background: #ffffff;
    position: sticky;
    top: 44px;
    z-index: 50;
}

.info-search {
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 12px !important;
    background: var(--color-beige) !important;
    font-size: 15px !important;
}

.info-card {
    position: relative;
    cursor: pointer;
    margin-bottom: 8px;
}

.info-card:last-child {
    margin-bottom: 0;
}

.info-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.info-card-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.info-card-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
}

.info-card-desc {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--color-muted);
}

.info-card-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-card-actions {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    gap: 8px;
}

.info-card-action-btn {
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    padding: 2px;
    opacity: 0.6;
}

/* === Auth страницы === */
.auth-card {
    max-width: 400px;
    margin: 20px auto;
    padding: 24px 20px;
    text-align: left;
}

.auth-subtitle {
    font-size: 15px;
    color: var(--color-muted);
    margin: 0 0 20px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

.form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.form-actions .btn {
    flex: 1;
    margin: 0;
}

.auth-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
    font-size: 14px;
    color: var(--color-muted);
}

.auth-footer a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

/* === Социальные кнопки входа === */
.social-login {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.btn-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    border: none;
    border-radius: var(--radius-m);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
    font-family: inherit;
}

.btn-social:active {
    transform: scale(0.98);
    opacity: 0.9;
}

.btn-social:hover {
    opacity: 0.9;
}

.social-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* VK кнопка */
.btn-vk {
    background: #0077FF;
    color: white;
}

.btn-vk:hover {
    background: #0066DD;
}

/* Google кнопка */
.btn-google {
    background: white;
    color: #1d1d1f;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}

.btn-google:hover {
    background: #f8f8fa;
}

/* Разделитель */
.divider {
    display: flex;
    align-items: center;
    margin: 20px 0;
    color: var(--color-muted);
    font-size: 13px;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

.divider span {
    padding: 0 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* === Профиль === */
.profile-header {
    text-align: center;
    padding: 24px 20px;
}

.application-item-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 0.5px solid var(--color-border);
}

.application-item-content small {
    color: var(--color-muted);
    font-size: 13px;
}

.application-item-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 0.5px solid var(--color-border);
}

.avatar-container {
    position: relative;
    display: inline-block;
    margin-bottom: 16px;
    width: 100px;
    height: 100px;
}

.avatar-edit-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ffffff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    cursor: pointer;
    z-index: 10;
    transition: opacity 0.15s ease;
}

.avatar-edit-btn:active {
    opacity: 0.7;
}

.profile-name {
    margin: 0 0 16px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.profile-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.profile-actions .btn {
    width: auto;
}

.profile-info {
    padding: 0;
    overflow: hidden;
}

.profile-info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 0.5px solid var(--color-border);
}

.profile-info-item:last-child {
    border-bottom: none;
}

.profile-info-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text);
    text-align: right;
    order: 2;
}

.profile-info-label {
    font-size: 15px;
    color: var(--color-muted);
    order: 1;
}