/* === Chatto Corp Call UI Improvements === */

/* Full-width call panel when maximized */
[data-testid="call-participant-panel"],
[data-testid="call-observer-panel"] {
  min-height: 100%;
}

/* Better control buttons in call */
[data-testid="call-controls-bar"] .grid {
  gap: 0.75rem !important;
}

[data-testid="call-controls-bar"] button {
  border-radius: 12px !important;
  font-size: 0.8rem !important;
  min-height: 44px !important;
  transition: all 150ms ease !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

[data-testid="call-controls-bar"] button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Participant cards improvement */
[data-testid="call-participant-card"],
[data-testid="call-screen-share-card"] {
  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,0.06) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
  transition: all 200ms ease !important;
}

[data-testid="call-participant-card"]:hover,
[data-testid="call-screen-share-card"]:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important;
  transform: translateY(-2px) !important;
}

/* Speaking indicator - green glow */
[data-call-speaking="true"] {
  border-color: #22c55e !important;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2), 0 0 20px rgba(34, 197, 94, 0.15) !important;
}

/* Join call button */
[data-testid="call-join-button"] {
  border-radius: 12px !important;
  min-height: 44px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  transition: all 200ms ease !important;
}

[data-testid="call-join-button"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
}

/* Participant name styling */
[data-testid="call-participant-card"] .text-sm.font-medium {
  font-weight: 600 !important;
}

/* Muted indicator */
[data-testid="call-muted-indicator"] {
  font-size: 0.75rem !important;
}

/* Better sidebar header for call */
[data-testid="call-controls-bar"] {
  border-bottom: 2px solid rgba(0,0,0,0.05) !important;
  padding: 1rem !important;
}

/* Grid layout improvements */
[data-testid="call-participants-list"] {
  gap: 1rem !important;
}

/* Responsive grid for many participants */
@media (min-width: 640px) {
  [data-testid="call-participants-list"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (min-width: 1024px) {
  [data-testid="call-participants-list"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Call sidebar maximize button */
[data-testid="call-controls-bar"] + section {
  padding: 0.75rem !important;
}

/* Dark theme support */
[data-theme="dark"] [data-testid="call-participant-card"],
[data-theme="dark"] [data-testid="call-screen-share-card"] {
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

[data-theme="dark"] [data-testid="call-participant-card"]:hover,
[data-theme="dark"] [data-testid="call-screen-share-card"]:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.3) !important;
}

[data-theme="dark"] [data-testid="call-controls-bar"] button {
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}