/* ============================================================
   GROUPING STYLES - LINEAR / VERCEL MODERN AESTHETIC
   Study groups, real-time discussions, media shares & polls
   ============================================================ */

/* ------------------------------------------------------------
   1. Grouping Home & Container
   ------------------------------------------------------------ */
.grouping-home {
  padding: var(--space-6) var(--space-4);
  max-width: 860px;
  margin: 0 auto;
  min-height: 100%;
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.grouping-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--glass-border);
}

.grouping-header h2 {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.grouping-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.grouping-actions .btn-primary,
.grouping-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 8px 16px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-lg);
  transition: all var(--duration-fast) var(--ease-out);
}

.requests-badge {
  background: var(--color-brand-primary);
  color: #ffffff;
  border-radius: var(--radius-full);
  padding: 2px 7px;
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  margin-left: var(--space-1);
  box-shadow: 0 0 10px rgba(124, 105, 216, 0.4);
}

.requests-badge.hidden {
  display: none;
}

/* ------------------------------------------------------------
   2. Search & Filter Bar
   ------------------------------------------------------------ */
.grouping-search {
  position: relative;
  margin-bottom: var(--space-6);
}

.grouping-search::before {
  content: '🔍';
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: 0.5;
  pointer-events: none;
}

.grouping-search input {
  width: 100%;
  padding: 12px 16px 12px 40px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-sans);
  background: rgba(255, 255, 255, 0.03);
  color: var(--color-text-primary);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  box-sizing: border-box;
  transition: all var(--duration-fast) var(--ease-out);
}

.grouping-search input::placeholder {
  color: var(--color-text-tertiary);
}

.grouping-search input:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 3px rgba(124, 105, 216, 0.18), 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* ------------------------------------------------------------
   3. Group List & Cards
   ------------------------------------------------------------ */
#groupList {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.group-item {
  background: linear-gradient(180deg, rgba(26, 26, 30, 0.6) 0%, rgba(16, 16, 20, 0.7) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  transition: all var(--duration-normal) var(--ease-out);
  position: relative;
  overflow: hidden;
}

.group-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  pointer-events: none;
}

.group-item:hover {
  transform: translateY(-2px);
  border-color: var(--color-border-hover);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 20px rgba(124, 105, 216, 0.08);
}

.group-item-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.group-avatar {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(124, 105, 216, 0.2) 0%, rgba(30, 30, 36, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.group-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-avatar span {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  text-transform: uppercase;
}

.group-name-section {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.group-item-header h3 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Badges */
.group-creator-badge,
.group-visibility-badge,
.member-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.group-creator-badge {
  background: rgba(124, 105, 216, 0.14);
  color: #B5A4F7;
  border: 1px solid rgba(124, 105, 216, 0.28);
}

.group-visibility-badge.public {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.group-visibility-badge.private {
  background: rgba(245, 158, 11, 0.12);
  color: #FBBF24;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.group-item-desc {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  word-break: break-word;
}

.group-item-meta {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.group-item-meta .btn-small {
  padding: 7px 16px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}

.group-code {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.group-code code {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-brand-primary);
}

/* ------------------------------------------------------------
   4. Requests View
   ------------------------------------------------------------ */
.grouping-requests {
  padding: var(--space-6) var(--space-4);
  max-width: 860px;
  margin: 0 auto;
  animation: fadeIn var(--duration-normal) var(--ease-out);
}

.requests-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--glass-border);
}

.requests-header h2 {
  margin: 0;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.requests-section {
  margin-bottom: var(--space-8);
}

.requests-section h3 {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
}

.request-item {
  background: rgba(22, 22, 26, 0.7);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  backdrop-filter: var(--glass-blur-sm);
  transition: all var(--duration-fast) var(--ease-out);
}

.request-item:hover {
  border-color: var(--color-border-hover);
  background: rgba(28, 28, 34, 0.85);
}

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

.request-group {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 2px;
  font-size: var(--font-size-base);
}

.request-from,
.request-type {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.request-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.empty-requests {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-sm);
  background: rgba(255, 255, 255, 0.02);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-lg);
}

/* ------------------------------------------------------------
   5. Group Chat View (The Session)
   ------------------------------------------------------------ */
.group-chat-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-bg);
  position: relative;
  overflow: hidden;
}

.group-chat-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px var(--space-4);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border-bottom: 1px solid var(--glass-border);
  z-index: var(--z-index-sticky);
  position: sticky;
  top: 0;
}

.group-chat-header .back-btn {
  padding: 6px 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--color-text-secondary);
  transition: all var(--duration-fast) var(--ease-out);
  flex-shrink: 0;
}

.group-chat-header .back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  border-color: var(--color-border-hover);
}

.group-chat-avatar {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(124, 105, 216, 0.25) 0%, rgba(30, 30, 36, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

.group-chat-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.group-chat-avatar span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.group-chat-header h3 {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-tight);
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.group-chat-menu {
  position: relative;
  margin-left: auto;
  flex-shrink: 0;
}

.btn-icon {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid transparent;
  font-size: 18px;
  line-height: 1;
  padding: 8px 10px;
  cursor: pointer;
  color: var(--color-text-secondary);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}

.btn-icon:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--glass-border);
  color: var(--color-text-primary);
}

.group-chat-menu-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-index-dropdown);
  background: rgba(18, 18, 22, 0.95);
  backdrop-filter: var(--glass-blur-xl);
  -webkit-backdrop-filter: var(--glass-blur-xl);
  border: 1px solid var(--glass-border-light);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 1px rgba(255, 255, 255, 0.1);
  min-width: 180px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  animation: fadeInDown var(--duration-fast) var(--ease-out);
}

.menu-item {
  background: none;
  border: none;
  text-align: left;
  padding: 8px 12px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.menu-item.danger {
  color: #F87171;
}

.menu-item.danger:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #FCA5A5;
}

/* ------------------------------------------------------------
   6. Messages Area & Bubbles
   ------------------------------------------------------------ */
.group-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  scroll-behavior: smooth;
}

.group-message {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 18px;
  line-height: var(--line-height-normal);
  font-size: var(--font-size-sm);
  word-wrap: break-word;
  animation: fadeUp var(--duration-normal) var(--ease-out);
  position: relative;
  transition: background var(--duration-fast) var(--ease-out);
}

/* User (Own) Messages */
.group-message.user {
  align-self: flex-end;
  background: linear-gradient(135deg, #7C69D8 0%, #6654C4 100%);
  color: #ffffff;
  border-bottom-right-radius: 4px;
  box-shadow: 0 4px 14px rgba(124, 105, 216, 0.28);
}

.group-message.user .msg-header {
  color: rgba(255, 255, 255, 0.75);
}

.group-message.user .msg-author {
  color: #ffffff;
}

/* Others' Messages */
.group-message.other {
  align-self: flex-start;
  background: rgba(24, 24, 28, 0.85);
  border: 1px solid var(--glass-border);
  border-bottom-left-radius: 4px;
  color: var(--color-text-primary);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.group-message.other .msg-author {
  color: #B5A4F7;
  font-weight: var(--font-weight-semibold);
}

/* System Notice Messages */
.group-message.system {
  align-self: center;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  text-align: center;
  max-width: 90%;
  backdrop-filter: var(--glass-blur-sm);
}

.msg-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.msg-author {
  font-size: 11px;
}

.msg-time {
  font-size: 10px;
  opacity: 0.7;
}

.msg-delete-btn {
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.4;
  transition: all var(--duration-fast) var(--ease-out);
}

.group-message:hover .msg-delete-btn {
  opacity: 0.8;
}

.msg-delete-btn:hover {
  opacity: 1;
  color: var(--color-danger);
}

.msg-content {
  word-wrap: break-word;
  white-space: pre-wrap;
}

.msg-content.deleted {
  color: var(--color-text-tertiary);
  font-style: italic;
  font-size: var(--font-size-xs);
}

.group-image {
  max-width: 100%;
  max-height: 320px;
  border-radius: var(--radius-lg);
  margin-top: var(--space-2);
  cursor: pointer;
  border: 1px solid var(--glass-border);
  transition: transform var(--duration-fast) var(--ease-out);
}

.group-image:hover {
  transform: scale(1.01);
}

/* ------------------------------------------------------------
   7. Shared Reel Card
   ------------------------------------------------------------ */
.reel-share-card {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--glass-border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  margin-top: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.reel-share-preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.reel-share-excerpt {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1.4;
}

.reel-share-link {
  background: var(--color-brand-primary);
  color: #ffffff;
  border: none;
  border-radius: var(--radius-md);
  padding: 6px 12px;
  cursor: pointer;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  align-self: flex-start;
  transition: all var(--duration-fast) var(--ease-out);
}

.reel-share-link:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* ------------------------------------------------------------
   8. Poll Cards in Session
   ------------------------------------------------------------ */
.poll-card {
  background: rgba(18, 18, 22, 0.6);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-top: var(--space-2);
  min-width: 240px;
}

.poll-card h4 {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-tight);
}

.poll-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.poll-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.poll-option:hover {
  border-color: var(--color-brand-primary);
  background: rgba(124, 105, 216, 0.08);
}

.poll-option input[type="checkbox"],
.poll-option input[type="radio"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-brand-primary);
}

.poll-option-label {
  flex: 1;
  font-size: var(--font-size-xs);
  color: var(--color-text-primary);
}

.poll-submit-btn {
  margin-top: var(--space-3);
  width: 100%;
  padding: 8px 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-md);
}

/* Locked Poll View */
.poll-locked {
  background: rgba(18, 18, 22, 0.7);
  border: 1px solid var(--glass-border);
}

.poll-option-locked {
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
}

.poll-progress-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-full);
  overflow: hidden;
  margin: 6px 0 4px 0;
}

.poll-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #7C69D8 0%, #A78BFA 100%);
  border-radius: var(--radius-full);
  transition: width 0.4s var(--ease-out);
}

.poll-option-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
}

.poll-percentage {
  font-weight: var(--font-weight-bold);
  color: #B5A4F7;
}

.poll-count {
  color: var(--color-text-tertiary);
}

/* ------------------------------------------------------------
   9. Group Session Composer (Input Bar)
   ------------------------------------------------------------ */
.group-composer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 12px var(--space-4);
  background: var(--glass-bg-strong);
  backdrop-filter: var(--glass-blur-lg);
  -webkit-backdrop-filter: var(--glass-blur-lg);
  border-top: 1px solid var(--glass-border);
  position: relative;
  z-index: var(--z-index-sticky);
}

.group-composer input {
  flex: 1;
  padding: 10px 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-sans);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
  transition: all var(--duration-fast) var(--ease-out);
  box-sizing: border-box;
}

.group-composer input::placeholder {
  color: var(--color-text-tertiary);
}

.group-composer input:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: 0 0 0 3px rgba(124, 105, 216, 0.16);
}

.group-composer .btn-secondary {
  padding: 9px 12px;
  font-size: 15px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--color-text-secondary);
  transition: all var(--duration-fast) var(--ease-out);
}

.group-composer .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
  border-color: var(--color-border-hover);
}

.group-composer .btn-primary {
  padding: 10px 20px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 10px rgba(124, 105, 216, 0.3);
  transition: all var(--duration-fast) var(--ease-out);
}

.group-composer .btn-primary:hover {
  box-shadow: 0 4px 16px rgba(124, 105, 216, 0.5);
  transform: translateY(-1px);
}

/* ------------------------------------------------------------
   10. Members List & Presence
   ------------------------------------------------------------ */
#groupMembersList {
  display: flex;
  flex-direction: column;
  max-height: 380px;
  overflow-y: auto;
  margin: var(--space-2) 0;
}

.member-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px var(--space-2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background var(--duration-fast) var(--ease-out);
}

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

.member-item:hover {
  background: rgba(255, 255, 255, 0.02);
}

.member-avatar {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(124, 105, 216, 0.2) 0%, rgba(30, 30, 36, 0.9) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.member-avatar span {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

.presence-dot {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #121212;
}

.presence-dot.online {
  background: var(--color-success);
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.7);
}

.presence-dot.offline {
  background: var(--color-text-tertiary);
}

.member-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.member-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-badge.creator {
  background: rgba(124, 105, 216, 0.14);
  color: #B5A4F7;
  border: 1px solid rgba(124, 105, 216, 0.3);
}

.member-badge.self {
  background: rgba(16, 185, 129, 0.12);
  color: #34D399;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.remove-member-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: var(--font-weight-medium);
}

/* ------------------------------------------------------------
   11. Visibility Options & Forms
   ------------------------------------------------------------ */
.visibility-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.visibility-option {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-out);
}

.visibility-option:hover {
  border-color: var(--color-border-hover);
  background: rgba(255, 255, 255, 0.04);
}

.visibility-option:has(input[type="radio"]:checked) {
  border-color: var(--color-brand-primary);
  background: rgba(124, 105, 216, 0.08);
  box-shadow: 0 0 0 1px var(--color-brand-primary);
}

.visibility-option input[type="radio"] {
  margin-bottom: 4px;
  accent-color: var(--color-brand-primary);
}

.visibility-option span {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.visibility-option small {
  font-size: 11px;
  color: var(--color-text-tertiary);
  line-height: 1.3;
}

/* Avatar Upload Field */
.avatar-upload {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.avatar-preview {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-full);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.04);
  border: 2px dashed var(--glass-border);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.avatar-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  font-size: 22px;
  opacity: 0.6;
}

.avatar-hint {
  color: var(--color-text-tertiary);
  font-size: 11px;
}

/* Handle Input / Display Styles */
.handle-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.handle-input-wrapper input {
  flex: 1;
  padding-right: var(--space-8);
}

.handle-status {
  position: absolute;
  right: var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.handle-status.available {
  color: var(--color-success);
}

.handle-status.taken {
  color: var(--color-danger);
}

.handle-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  min-height: 40px;
}

.handle-value {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

.edit-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: var(--font-size-xs);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  transition: all var(--duration-fast) var(--ease-out);
}

.edit-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--color-text-primary);
}

.handle-edit.hidden,
.handle-display.hidden,
#visibilityField.hidden,
.invite-preview.hidden {
  display: none;
}

.invite-preview {
  margin-top: var(--space-3);
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
}

.user-preview {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.user-preview strong {
  color: var(--color-text-primary);
}

.user-preview small {
  color: var(--color-text-tertiary);
}

.user-preview.error {
  color: var(--color-danger);
  font-size: var(--font-size-xs);
}

/* Poll Modal Controls */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-brand-primary);
}

#pollOptionsList {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.poll-option-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-sans);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
  box-sizing: border-box;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.poll-option-input:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  box-shadow: 0 0 0 3px rgba(124, 105, 216, 0.16);
}

/* Form Fields & Modals */
.form-field {
  margin-bottom: var(--space-4);
}

.form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

.form-field input,
.form-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-family-sans);
  background: rgba(255, 255, 255, 0.04);
  color: var(--color-text-primary);
  box-sizing: border-box;
  transition: all var(--duration-fast) var(--ease-out);
}

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

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-brand-primary);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(124, 105, 216, 0.16);
}

.modal-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.btn-small {
  padding: 6px 12px;
  font-size: var(--font-size-xs);
}

.btn-danger {
  background: rgba(239, 68, 68, 0.15);
  color: #F87171;
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  transition: all var(--duration-fast) var(--ease-out);
}

.btn-danger:hover {
  background: #EF4444;
  color: #ffffff;
  border-color: #EF4444;
  box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}

/* ------------------------------------------------------------
   12. Responsive Breakpoints
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  .grouping-home,
  .grouping-requests {
    padding: var(--space-4) var(--space-3);
  }

  .grouping-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .grouping-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
  }

  .grouping-actions .btn-primary,
  .grouping-actions .btn-secondary {
    justify-content: center;
  }

  .visibility-options {
    grid-template-columns: 1fr;
  }

  .group-message {
    max-width: 88%;
  }

  .group-chat-header {
    padding: 10px var(--space-3);
    gap: var(--space-2);
  }

  .group-composer {
    padding: 10px var(--space-3);
  }

  .group-composer .btn-primary {
    padding: 9px 14px;
  }
}

/* Groups community refinements */
.grouping-home { width: min(100%, 1280px); margin: 0 auto; padding: clamp(22px, 4vw, 46px); }
.grouping-header { align-items: flex-start; margin-bottom: 22px; }
.grouping-header h2 { margin: 0; font-size: clamp(27px, 3vw, 36px); letter-spacing: -.035em; }
.grouping-subtitle { margin: 7px 0 0; color: var(--fg-dim, #737b73); font-size: 14px; }
.grouping-primary-nav { display: flex; gap: 6px; border-bottom: 1px solid var(--color-border, #e4e9e3); margin-bottom: 20px; }
.group-tab { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #68716a; font: inherit; font-weight: 600; cursor: pointer; }
.group-tab:hover, .group-tab:focus-visible { color: var(--color-brand-primary, #47734c); }
.group-tab.active { border-bottom-color: var(--color-brand-primary, #47734c); color: var(--color-brand-primary, #47734c); }
.grouping-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.grouping-search { position: relative; flex: 1; min-width: 180px; }
.grouping-search input { padding-right: 42px; }
.group-search-clear { position: absolute; top: 50%; right: 10px; width: 30px; height: 30px; transform: translateY(-50%); border: 0; border-radius: 50%; background: #edf1ec; color: #49564a; font-size: 20px; cursor: pointer; }
.group-sort-label { color: #6d766e; font-size: 13px; }
#groupSortSelect { min-height: 42px; max-width: 190px; padding: 0 30px 0 11px; border: 1px solid #dce4dc; border-radius: 10px; background: #fff; color: #39433b; }
.group-list-status { min-height: 22px; margin: 0 0 10px; color: #778078; font-size: 12px; }
#groupList { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); align-items: stretch; gap: 15px; }
.group-item { min-height: 0; padding: 19px; border: 1px solid #e3e9e3; border-radius: 15px; background: #fff; box-shadow: 0 2px 9px rgba(29, 51, 31, .04); }
.group-item::before { display: none; }
.group-item:hover { border-color: #cbd9cb; box-shadow: 0 8px 22px rgba(29, 51, 31, .08); transform: translateY(-1px); }
.group-item-header { gap: 12px; }
.group-avatar { flex: 0 0 auto; }
.group-name-section h3 { margin: 0; overflow-wrap: anywhere; }
.group-card-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 7px; }
.group-card-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; padding-top: 12px; color: #778078; font-size: 12px; }
.group-card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.group-card-tags span { padding: 4px 8px; border-radius: 999px; background: #f0f4ef; color: #4d6350; font-size: 11px; }
.group-card-preview { margin: 8px 0 0; overflow: hidden; color: #535f55; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.group-card-preview.muted { color: #9aa19b; }
.group-item-meta { justify-content: flex-end; margin-top: 13px; }
.group-item-meta button { min-height: 40px; }
.group-item-meta .group-favorite-btn { min-width: 42px; border: 1px solid #dfe7dd; border-radius: 10px; background: #fff; color: #69845f; font-size: 19px; }
.group-item-meta .group-favorite-btn[aria-pressed="true"] { border-color: #d8e6d1; background: #f0f6eb; color: #48764a; }
.group-unread-badge { padding: 3px 8px; border-radius: 999px; background: #e7f2e4; color: #3d7043; font-size: 11px; font-weight: 650; }
.group-card-skeleton { min-height: 220px; border: 1px solid #e8ede8; border-radius: 15px; background: linear-gradient(100deg,#f3f5f2 30%,#fafbfa 50%,#f3f5f2 70%); background-size: 220% 100%; animation: group-skeleton 1.4s ease-in-out infinite; }
@keyframes group-skeleton { to { background-position-x: -220%; } }
.group-empty-state, .group-view-error { grid-column: 1/-1; display: grid; justify-items: center; gap: 8px; padding: 42px 18px; border: 1px dashed #d8e2d8; border-radius: 14px; background: #fbfcfa; color: #59655a; text-align: center; }
.group-empty-state p { margin: 0; color: #7a847b; }
.group-subview { width: min(100%, 1080px); min-height: 100%; margin: 0 auto; padding: clamp(18px, 4vw, 40px); }
.group-subview-header { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.group-subview-header h2 { margin: 0; font-size: 24px; }
.group-details-content { max-width: 820px; margin: auto; }
.group-detail-card { padding: clamp(18px, 3vw, 30px); border: 1px solid #e2e9e2; border-radius: 16px; background: white; box-shadow: 0 3px 14px rgba(29, 51, 31, .05); }
.group-detail-hero { display: flex; align-items: center; gap: 16px; }
.group-detail-hero .group-avatar { width: 72px; height: 72px; }
.group-detail-hero h3 { margin: 0 0 5px; font-size: 23px; }
.group-detail-hero p { margin: 0; color: #68736a; }
.group-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0; }
.group-overview-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; padding: 16px 0; border-top: 1px solid #edf0ed; border-bottom: 1px solid #edf0ed; }
.group-overview-grid div { display: grid; gap: 4px; }
.group-overview-grid dt { color: #7a837b; font-size: 12px; }
.group-overview-grid dd { margin: 0; color: #39443a; font-weight: 600; text-transform: capitalize; }
.group-detail-card section { margin-top: 19px; }
.group-detail-card h4 { margin: 0 0 7px; }
.group-detail-card section p { margin: 0; color: #68736a; white-space: pre-wrap; }
.group-member-search-label { display: block; margin: 0 0 6px; color: #68736a; font-size: 13px; }
.group-member-search { width: min(100%, 460px); min-height: 44px; margin-bottom: 14px; padding: 0 12px; border: 1px solid #dce4dc; border-radius: 10px; }
.group-members-page-list { display: grid; gap: 8px; }
.member-role-select { min-height: 36px; padding: 0 8px; border: 1px solid #dce4dc; border-radius: 8px; background: #fff; text-transform: capitalize; }
.group-approval-option { display: flex; gap: 8px; align-items: center; margin-top: 12px; color: #536054; font-size: 13px; }
.group-form-error { margin: 12px 0; padding: 10px 12px; border-radius: 8px; background: #fff0ee; color: #a63e34; font-size: 13px; }
.group-upload-status { min-height: 20px; color: #68736a; font-size: 12px; }
.group-date-divider { align-self: center; display: flex; align-items: center; gap: 12px; width: 100%; color: #7e887f; font-size: 11px; }
.group-date-divider::before, .group-date-divider::after { content: ""; flex: 1; height: 1px; background: rgba(136, 151, 136, .25); }
.group-message.grouped { margin-top: -12px; }
.group-message.grouped .msg-header { margin-bottom: 0; }
.msg-copy-btn { padding: 2px 5px; border: 0; border-radius: 5px; background: transparent; color: inherit; font-size: 10px; opacity: .5; cursor: pointer; }
.msg-copy-btn:hover, .msg-copy-btn:focus-visible { opacity: 1; background: rgba(0,0,0,.08); }
.msg-avatar { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.group-chat-empty-state { align-self: center; margin: auto; padding: 24px; color: #5f6d61; text-align: center; }
.group-chat-empty-state p { margin: 6px 0 0; color: #89928a; }
.group-chat-status { min-height: 18px; padding: 0 16px 8px; color: #8a554e; font-size: 12px; }
.group-reply-composer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 14px; border-top: 1px solid #e7ece6; background: #f7f9f6; color: #5b685d; font-size: 12px; }
.group-reply-composer button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: #e8eee7; color: #526054; font-size: 18px; }
.msg-reply-preview { display: grid; gap: 2px; margin: 2px 0 7px; padding: 6px 8px; border-left: 3px solid #7b9a7b; border-radius: 2px 7px 7px 2px; background: rgba(0,0,0,.04); font-size: 11px; }
.msg-reply-preview span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
.msg-actions, .msg-reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; }
.msg-action, .msg-reaction-pick, .msg-reaction { min-height: 26px; padding: 2px 6px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: inherit; font: inherit; font-size: 10px; opacity: .65; cursor: pointer; }
.msg-action:hover, .msg-reaction-pick:hover, .msg-reaction:hover { border-color: rgba(104,133,104,.25); background: rgba(255,255,255,.55); opacity: 1; }
.msg-reaction { border-color: #dfe7de; background: #fff; font-size: 11px; opacity: 1; }
.msg-reaction.mine { border-color: #82a680; background: #eaf3e7; }
.pinned-message-list { display: grid; gap: 7px; }
.pinned-message-list button { display: grid; justify-items: start; gap: 3px; padding: 9px 11px; border: 1px solid #e4eae3; border-radius: 9px; background: #f9fbf8; color: #475348; text-align: left; cursor: pointer; }
.pinned-message-list button span { max-width: 100%; overflow: hidden; color: #758076; text-overflow: ellipsis; white-space: nowrap; }
.group-shared-images { display: grid; grid-template-columns: repeat(auto-fill,minmax(92px,1fr)); gap: 8px; }
.group-shared-images img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 9px; cursor: pointer; }
.group-new-messages { position: sticky; bottom: 12px; z-index: 2; align-self: center; min-height: 36px; margin: -52px auto 16px; padding: 0 14px; border: 1px solid #dce8d9; border-radius: 999px; background: #fff; color: #426d47; box-shadow: 0 4px 14px rgba(29, 51, 31, .12); cursor: pointer; }
.request-date { display: block; margin-top: 4px; color: #8b948c; font-size: 11px; }
.group-message.user { background: #4f8055; box-shadow: 0 3px 9px rgba(63, 109, 68, .15); }
.group-message.other { background: #f0f4ef; color: #354238; border: 1px solid #e3e9e2; box-shadow: 0 2px 6px rgba(29, 51, 31, .04); backdrop-filter: none; }
.group-message.other .msg-author { color: #547858; }
.group-message.other .msg-header { color: #707a71; }
.group-message.user .msg-header { color: rgba(255,255,255,.78); }
.group-chat-menu-dropdown { z-index: 30; }
.requests-header { margin-bottom: 18px; }
.requests-section { margin-bottom: 17px; padding: 16px; border: 1px solid #e6ebe5; border-radius: 13px; background: #fff; }
.requests-section h3 { margin: 0 0 10px; }
.group-composer input { min-height: 44px; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(74, 132, 80, .3); outline-offset: 2px; }
@media (max-width: 640px) {
  .grouping-home { padding: 17px 14px 28px; }
  .grouping-header { gap: 12px; }
  .grouping-header h2 { font-size: 27px; }
  .grouping-subtitle { max-width: 250px; font-size: 12px; }
  .grouping-actions .btn-primary { min-height: 42px; padding: 0 12px; white-space: nowrap; }
  .grouping-primary-nav { margin-right: -14px; margin-left: -14px; padding: 0 14px; }
  .group-tab { padding: 0 11px; font-size: 13px; }
  .grouping-controls { align-items: stretch; flex-wrap: wrap; gap: 8px; }
  .grouping-search { flex-basis: 100%; }
  .group-sort-label { align-self: center; margin-left: auto; }
  #groupSortSelect { min-height: 40px; }
  #groupList { grid-template-columns: 1fr; gap: 10px; }
  .group-item { padding: 15px; }
  .group-subview { padding: 16px 14px 26px; }
  .group-subview-header { align-items: flex-start; gap: 10px; }
  .group-subview-header .btn-secondary { min-height: 40px; white-space: nowrap; }
  .group-subview-header h2 { padding-top: 8px; font-size: 20px; }
  .group-overview-grid { grid-template-columns: repeat(2,1fr); }
}