/* Foxcam specific styles */
.stream-header {
  max-width: 1000px;
  margin: 0 auto 15px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 25px; /* Added margin to make space for potential auth error */
}

.password-container {
  display: flex;
  align-items: center;
  gap: 5px; /* Space between input and button */
  position: relative; /* Needed for absolute positioning of error message */
}

#foxcam-password {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Style for the small reconnect button */
.control-button.small-button {
  padding: 4px; /* Smaller padding */
  line-height: 1; /* Adjust line height */
  display: inline-flex; /* Use inline-flex for alignment */
  align-items: center;
  justify-content: center;
  background-color: #eee; /* Lighter background */
  border: 1px solid #ccc;
}

.control-button.small-button:hover {
  background-color: #ddd;
}

.control-button.small-button svg {
  /* Ensure SVG size is controlled if needed, already set in HTML */
}

/* Authentication error message styling */
.auth-error-message {
  color: #d9534f; /* Red color for errors */
  font-size: 0.9em;
  margin-top: 5px; /* Space above the message */
  width: 100%; /* Take full width to force onto its own line */
  text-align: right; /* Align text to the right */
  padding-right: 5px; /* Align with password input edge */
  box-sizing: border-box; /* Include padding in width calculation */
}

.foxcam-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.foxcam-description {
  margin-bottom: 20px;
  font-size: 1.1em;
  color: #555;
}

.viewers-count {
  display: flex;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 0.9em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.viewers-count svg {
  fill: white;
  margin-right: 6px;
}

.viewers-count #viewers-number {
  font-weight: bold;
  margin-right: 4px;
}

.video-container {
  position: relative; /* Added to contain absolutely positioned children */
  width: 100%;
  background-color: #000;
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

#videoCanvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #000; /* Ensure black background */
  image-rendering: optimizeQuality; /* Improve image quality */
}

#foxcam-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #000;
  z-index: 10;
  opacity: 0.99; /* Fix for some browsers that might have rendering issues */
  visibility: visible !important; /* Ensure visibility */
}

.controls {
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 10px 0;
}

.control-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s, transform 0.2s;
}

.control-button:hover {
  background-color: #45a049;
  transform: scale(1.05);
}

.control-button:active {
  transform: scale(0.95);
}

.control-button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

.control-button.active {
  background-color: #ff5722;
}

.control-button svg {
  fill: white;
  width: 24px;
  height: 24px;
}

/* Fullscreen button styles */
.fullscreen-icon, .exit-fullscreen-icon {
  transition: display 0.3s;
}

/* Fullscreen mode styles */
.video-container:fullscreen {
  background-color: #000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-container:fullscreen #videoCanvas {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Vendor prefixed versions */
.video-container:-webkit-full-screen {
  background-color: #000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-container:-moz-full-screen {
  background-color: #000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-container:-ms-fullscreen {
  background-color: #000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.2em;
  text-align: center;
}

.error-message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.1em;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.8);
  padding: 20px 30px;
  border-radius: 8px;
  max-width: 450px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.error-message p {
  margin-bottom: 0;
  text-align: left;
}

.error-message p:first-child {
  font-size: 1.2em;
  font-weight: bold;
  color: #ff6b6b;
  text-align: center;
}

.error-message .error-details {
  font-weight: bold;
  text-align: left;
}

.error-message ul {
  margin-bottom: 0;
  padding-left: 20px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}

.error-message li {
  margin-bottom: 5px;
  opacity: 0.9;
}

#retry-button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  display: block;
  margin: 15px auto 0;
  transition: background-color 0.3s, transform 0.2s;
}

#retry-button:hover {
  background-color: #45a049;
  transform: scale(1.05);
}

#retry-button:active {
  transform: scale(0.95);
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  #foxcam-password {
    background-color: #333;
    border-color: #555;
    color: #e0e0e0;
  }

  #foxcam-password:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
  }

  .foxcam-container {
    background-color: #2a2a2a;
  }

  .foxcam-description {
    color: #e0e0e0;
  }

  .viewers-count {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }

  .video-container {
    background-color: #111;
  }
}

/* Toast notifications */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
}

.toast {
  padding: 12px 16px;
  border-radius: 6px;
  color: white;
  font-size: 0.9em;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.3s ease-out forwards;
  opacity: 0.95;
  transition: opacity 0.3s;
}

.toast.info {
  background-color: #2196F3;
}

.toast.success {
  background-color: #4CAF50;
}

.toast.warning {
  background-color: #FF9800;
}

.toast.error {
  background-color: #F44336;
}

.toast.fade-out {
  animation: fadeOut 0.5s ease-out forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 0.95;
  }
}

@keyframes fadeOut {
  from {
    opacity: 0.95;
  }
  to {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/* Motion Detection Styles */
.motion-detection-container {
  position: relative; /* Crucial for absolute positioning of children */
  margin-top: 20px;
  background-color: #f0f0f0;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: none; /* Hidden by default */
}

/* Show container when parent has active class */
.motion-detection-active .motion-detection-container {
  display: block;
}

/* Style the main motion detection button when active */
#motion-detection-button.active {
  background-color: #ff5722; /* Example active color */
}
#motion-detection-button.active:hover {
  background-color: #e64a19;
}

.motion-detection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  flex-wrap: wrap; /* Allow wrapping on smaller screens */
  gap: 10px; /* Add gap for wrapped items */
}

.motion-detection-header h3 {
  margin: 0;
  font-size: 1.2em;
  color: #333;
  flex-shrink: 0; /* Prevent title from shrinking */
}

.motion-settings {
  display: flex;
  align-items: center;
  gap: 15px; /* Increased gap */
  flex-wrap: wrap; /* Allow settings to wrap */
}

.motion-settings label {
  font-size: 0.9em;
  color: #555;
}

.motion-settings select {
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: white;
  font-size: 0.9em;
}

/* Sound toggle styles */
.sound-toggle-container {
  display: flex;
  align-items: center;
  /* margin: 0 10px; */ /* Removed margin, using gap in parent */
}

.sound-toggle-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.sound-toggle-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: 0.9em;
  color: #555;
  user-select: none;
}

.sound-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 6px;
  position: relative;
}

.sound-toggle-icon svg {
  fill: #555;
  transition: opacity 0.2s ease;
}

.sound-on-icon {
  position: absolute;
  top: 0; left: 0; /* Ensure icons overlap */
}

.sound-off-icon {
  position: absolute;
  top: 0; left: 0; /* Ensure icons overlap */
}

/* Icon visibility controlled by .sound-enabled class on label */
.sound-toggle-label .sound-on-icon {
  opacity: 0; /* Hidden by default */
}

.sound-toggle-label .sound-off-icon {
  opacity: 1; /* Visible by default */
}

.sound-toggle-label.sound-enabled .sound-on-icon {
  opacity: 1;
}

.sound-toggle-label.sound-enabled .sound-off-icon {
  opacity: 0;
}

.sound-toggle-checkbox:focus + .sound-toggle-label {
  outline: 2px solid rgba(33, 150, 243, 0.5);
  outline-offset: 2px;
  border-radius: 4px;
}

.clear-log-button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #ccc;
  background-color: #f0f0f0;
  color: #555;
  font-size: 0.9em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.clear-log-button:hover {
  background-color: #e0e0e0;
  border-color: #aaa;
}

.clear-log-button:active {
  transform: scale(0.95);
}

.clear-log-button svg {
  fill: #555;
}

.motion-log {
  max-height: 200px;
  overflow-y: auto;
  background-color: #fff;
  border-radius: 6px;
  padding: 10px;
  border: 1px solid #ddd;
  margin-top: 10px; /* Add margin between settings and log */
}

.motion-log-entry {
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: 4px;
  background-color: #e9f5ff;
  border-left: 3px solid #2196F3;
  font-size: 0.9em;
  animation: fadeIn 0.3s ease-out;
}

.motion-log-entry:last-child {
  margin-bottom: 0;
}

.motion-log-entry .timestamp {
  font-weight: bold;
  color: #0d47a1;
  margin-right: 8px;
}

.motion-log-entry .message {
  color: #333;
}

.motion-log-placeholder {
  color: #999;
  text-align: center;
  padding: 20px 0;
  font-style: italic;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark mode support for motion detection */
@media (prefers-color-scheme: dark) {
  .motion-detection-container {
    background-color: #333;
  }

  /* Style the main motion detection button when active in dark mode */
  #motion-detection-button.active {
    background-color: #d84315; /* Darker active color */
  }
  #motion-detection-button.active:hover {
    background-color: #bf360c;
  }

  .motion-detection-header {
    border-bottom-color: #444;
  }

  .motion-detection-header h3 {
    color: #e0e0e0;
  }

  .motion-settings label {
    color: #bbb;
  }

  .motion-settings select {
    background-color: #444;
    border-color: #555;
    color: #e0e0e0;
  }

  .sound-toggle-label {
    color: #bbb;
  }

  .sound-toggle-icon svg {
    fill: #bbb;
  }

  .sound-toggle-checkbox:focus + .sound-toggle-label {
    outline-color: rgba(33, 150, 243, 0.7);
  }

  .clear-log-button {
    background-color: #3a3a3a; /* Slightly lighter than container */
    border-color: #555;
    color: #e0e0e0;
  }

  .clear-log-button:hover {
    background-color: #444;
    border-color: #666;
  }

  .clear-log-button svg {
    fill: #e0e0e0;
  }

  .motion-log {
    background-color: #2a2a2a; /* Slightly lighter */
    border-color: #444;
  }

  .motion-log-entry {
    background-color: #1a2733; /* Dark blueish background */
    border-left-color: #1976D2; /* Brighter blue border */
  }

  .motion-log-entry .timestamp {
    color: #64b5f6; /* Light blue */
  }

  .motion-log-entry .message {
    color: #e0e0e0;
  }

  .motion-log-placeholder {
    color: #777;
  }
}

/* Responsive design */
@media (max-width: 768px) {
  .stream-header {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }

  .password-container {
    justify-content: flex-start;
  }

  .foxcam-container {
    padding: 15px;
  }

  .controls {
    gap: 15px;
  }

  .control-button {
    width: 45px;
    height: 45px;
  }

  .toast-container {
    max-width: 250px;
    right: 10px;
    top: 10px;
  }

  .motion-detection-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .motion-settings {
    margin-top: 10px;
  }
}

@media (max-width: 480px) {
  .foxcam-container {
    padding: 10px;
  }

  .controls {
    gap: 10px;
  }

  .control-button {
    width: 40px;
    height: 40px;
  }

  .control-button svg {
    width: 20px;
    height: 20px;
  }

  .toast-container {
    max-width: 200px;
  }
}

/* WebRTC indicator styles */
.webrtc-indicator {
  /* Hide the indicator */
  display: none; /* Changed from block to none */
}

/* Stream mode toggle styles */
.stream-mode-toggle {
  display: flex;
  align-items: center;
  gap: 8px; /* Reduced gap */
  flex-wrap: wrap;
  /* Remove prominence */
  /* background-color: #f0f0f0; */ /* Remove background */
  /* padding: 5px 10px; */ /* Remove padding */
  /* border-radius: 6px; */ /* Remove border radius */
}

/* Remove toggle button styles if it's not used, or adjust as needed */
/*
.toggle-button {
  ... existing button styles ...
}
*/

.toggle-label {
  font-size: 0.85em; /* Slightly smaller label */
  color: #666; /* Less prominent color */
}

.toggle-switch {
  position: relative;
  display: inline-block;
  /* Make it even smaller */
  width: 70px; /* Further reduced width */
  height: 24px; /* Further reduced height */
  cursor: pointer;
  z-index: 1;
  /* Remove shadow for less prominence */
  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
  border-radius: 24px; /* Adjusted border radius */
  transition: all 0.3s ease;
}

/* Remove hover effect */
/*
.toggle-switch:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
}
*/

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  cursor: pointer;
  z-index: 2;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d1d1; /* Lighter grey for off state */
  transition: .4s;
  border-radius: 24px; /* Adjusted border radius */
  z-index: 1;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  /* Adjusted size and position */
  height: 18px; /* Reduced height */
  width: 18px; /* Reduced width */
  left: 3px; /* Adjusted left */
  bottom: 3px; /* Adjusted bottom */
  background-color: white;
  transition: .4s;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* Subtle shadow for circle */
}

input:checked + .toggle-slider {
  background-color: #a5d6a7; /* More muted green */
}

/* Remove focus style for less prominence */
/*
input:focus + .toggle-slider {
  box-shadow: 0 0 1px #4CAF50;
}
*/

input:checked + .toggle-slider:before {
  transform: translateX(45px); /* Adjusted transform distance */
}

.toggle-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* Adjusted font size */
  font-size: 0.75em; /* Slightly smaller text */
  font-weight: bold;
  color: #555; /* Dark grey text for contrast */
  transition: opacity 0.3s;
  z-index: 3;
  /* Removed text shadow */
  /* text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4); */
  pointer-events: none;
}

.toggle-text.webrtc {
  left: 7px; /* Adjusted position */
  opacity: 0;
}

.toggle-text.jpeg {
  right: 7px; /* Adjusted position */
  opacity: 1;
}

input:checked + .toggle-slider + .toggle-text.webrtc {
  opacity: 1;
}

input:checked + .toggle-slider + .toggle-text.webrtc + .toggle-text.jpeg {
  opacity: 0;
}

/* Dark mode support for toggle */
@media (prefers-color-scheme: dark) {
  .toggle-label {
    color: #aaa; /* Adjusted dark mode label color */
  }

  .toggle-slider {
    background-color: #4a4a4a; /* Darker grey background */
  }

  input:checked + .toggle-slider {
    background-color: #388e3c; /* Darker, less saturated green */
  }

  .toggle-text {
     color: #ddd; /* Light grey text in dark mode */
  }
}

/* Options Menu Styles */
.options-container {
  position: relative; /* Context for the absolute panel */
  margin-left: auto; /* Push options button to the right */
}

.icon-button {
  /* Style for the gear icon button */
  background-color: transparent;
  border: none;
  padding: 5px;
  cursor: pointer;
}

.icon-button svg {
  fill: #555; /* Default icon color */
}

.icon-button:hover svg {
  fill: #000;
}

/* Dark mode icon button */
@media (prefers-color-scheme: dark) {
  .icon-button svg {
    fill: #bbb;
  }
  .icon-button:hover svg {
    fill: #fff;
  }
}

.options-panel {
  position: absolute; /* Position relative to options-container */
  right: 0; /* Align with the right edge of the button container */
  top: 100%; /* Position below the button */
  margin-top: 5px; /* Small gap between button and panel */
  width: 250px; /* Adjust width as needed */
  background-color: #ffffff;
  border: 1px solid #ccc;
  border-radius: 6px; /* Standard border radius */
  box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.1);
  padding: 15px;
  z-index: 100; /* Ensure it's above the video */
  /* Dropdown animation */
  visibility: hidden;
  opacity: 0;
  transform: scaleY(0.95) translateY(-10px);
  transform-origin: top right;
  transition: visibility 0.2s ease-out, opacity 0.2s ease-out, transform 0.2s ease-out;
}

.options-panel.visible {
  /* Show state */
  visibility: visible;
  opacity: 1;
  transform: scaleY(1) translateY(0);
}

.options-panel h4 {
  margin-top: 0;
  margin-bottom: 10px; /* Add some spacing below */
  font-size: 1.1em;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

/* Adjust stream toggle margin when inside panel */
.options-panel .stream-mode-toggle {
  margin-bottom: 10px; /* Add some spacing below */
}

/* Styles for password input inside options */
.options-password-container {
  display: flex;
  flex-direction: row; /* Align items horizontally */
  align-items: center; /* Vertically align items */
  gap: 5px;
  margin-bottom: 15px;
}

.options-password-container label {
  font-size: 0.9em;
  color: #555;
  margin-bottom: 0; /* Remove bottom margin as it's now inline */
  flex-shrink: 0; /* Prevent label from shrinking */
}

.options-password-container input[type="password"] {
  flex-grow: 1; /* Allow input to take available space */
  min-width: 0; /* Allow input to shrink below default min-width */
  padding: 6px 8px; /* Slightly smaller padding */
}

.options-password-container .small-button {
  /* Ensure button aligns well */
  flex-shrink: 0;
}

/* Dark mode options panel */
@media (prefers-color-scheme: dark) {
  .options-panel {
    background-color: #333;
    border-color: #444;
    box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
  }

  .options-password-container label {
    color: #bbb;
  }

  .options-password-container input[type="password"] {
      background-color: #444;
      border-color: #555;
      color: #eee;
  }

  .options-panel h4 {
    color: #eee;
    border-bottom-color: #444;
  }
}

/* Styles for motion sensitivity inputs in options panel */
.options-thresholds-container {
  margin-top: 15px; /* Space above the threshold settings */
  padding-top: 10px; /* Space below the heading/divider */
  border-top: 1px solid #eee; /* Separator line */
}

.options-thresholds-container h5 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1em;
  color: #444;
}

.threshold-setting {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Align label and input */
  margin-bottom: 8px; /* Space between settings */
}

.threshold-setting label {
  font-size: 0.9em;
  color: #555;
  margin-right: 10px; /* Space between label and input */
  flex-basis: 60px; /* Give labels a consistent width */
  flex-shrink: 0;
}

.threshold-setting input[type="number"] {
  width: 60px; /* Fixed width for number inputs */
  padding: 4px 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 0.9em;
  text-align: right;
}

/* Dark mode threshold inputs */
@media (prefers-color-scheme: dark) {
  .options-thresholds-container {
    border-top-color: #444;
  }

  .options-thresholds-container h5 {
    color: #ccc;
  }

  .threshold-setting label {
    color: #bbb;
  }

  .threshold-setting input[type="number"] {
    background-color: #444;
    border-color: #555;
    color: #eee;
  }
}

/* Style for motion status display */
.motion-status-display {
  font-size: 0.85em;
  color: #777;
  flex-grow: 1; /* Allow it to take remaining space */
  text-align: left; /* Align text left now */
  min-width: 150px; /* Ensure it has some minimum width */
  margin-right: 5px; /* Space between text and button */
}

/* Container for status text and toggle button */
.motion-status-container {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: flex-end; /* Push content to the right */
  gap: 8px; /* Add space between status text, eye, and gear icons */
  margin-left: 15px;
}

/* Hide the status text when class is applied */
#motion-status-text.status-hidden {
  display: none;
}

/* Base icon visibility */
#toggle-motion-status .eye-icon {
  display: inline-block; /* Show eye by default */
}

#toggle-motion-status .eye-slash-icon {
  display: none; /* Hide slash by default */
}

/* Icon visibility when container has .status-text-hidden class */
.motion-status-container.status-text-hidden #toggle-motion-status .eye-icon {
  display: none; /* Hide eye */
}

.motion-status-container.status-text-hidden #toggle-motion-status .eye-slash-icon {
  display: inline-block; /* Show slash */
  /* Ensure the path inside is also visible */
  path {
    display: block; /* Or initial, try block first */
  }
}

/* Dark mode motion status */
@media (prefers-color-scheme: dark) {
  .motion-status-display {
    color: #aaa;
  }
}

/* Ensure small icon button styles apply */
#toggle-motion-status svg {
  fill: #555;
}

/* Dark mode icon button styles */
@media (prefers-color-scheme: dark) {
  #toggle-motion-status svg {
    fill: #bbb;
  }
}

/* Space between eye and gear icon */
.motion-settings-button {
  /* Spacing is handled by parent flex gap now */
}

/* Styling for icons in the header (eye, sound, gear) */
#motion-status-container .header-icon-button,
#motion-status-container .small-button {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #f0f0f0;
  display: inline-flex; /* Ensure they align */
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}

#motion-status-container .header-icon-button:hover,
#motion-status-container .small-button:hover {
  background-color: #e0e0e0;
}

/* Specific styling for the sound toggle label when in header */
.header-icon-button .sound-toggle-label {
  padding: 0;
  margin: 0;
  width: auto; /* Override block label */
  line-height: 1; /* Prevent extra height */
}

.header-icon-button .sound-toggle-icon {
  margin-right: 0; /* Remove text spacing */
  width: 16px; /* Match other icons */
  height: 16px;
}

/* Dark mode for header icons */
@media (prefers-color-scheme: dark) {
  #motion-status-container .header-icon-button,
  #motion-status-container .small-button {
    background-color: #444;
    border-color: #555;
  }
  #motion-status-container .header-icon-button:hover,
  #motion-status-container .small-button:hover {
    background-color: #555;
  }
}

/* Injected styles might override this, this is a fallback */
.motion-options {
  position: fixed !important; /* Position relative to viewport */
  top: 50% !important; /* Align with top of video-container, FORCE override */
  left: 50% !important;
  transform: translate(-50%, -50%); /* Center the panel */
  z-index: 1100;
  background-color: #444;
  border: 1px solid #555; /* Standard border */
  border-radius: 4px;
  padding: 15px;
  display: none;
  min-width: 220px;
  max-width: 300px; /* Prevent excessive width */
  overflow: auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.motion-options.visible {
  display: block !important;
}

/* Styles from JS injection (will override the above if ID matches) */
/* It's generally better to have styles defined here */

/* Ensure option items stack vertically */
.motion-options .option-item {
  margin-bottom: 10px; /* Increased spacing */
}

.motion-options .option-item label {
  display: block;
  margin-bottom: 4px; /* Space between label and control */
  font-size: 0.9em;
  color: #bbb; /* Dark mode color */
}

.motion-options .option-item input[type=number],
.motion-options .option-item select {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid #555;
  background-color: #555; /* Dark mode background */
  color: #eee; /* Dark mode text */
  font-size: 0.9em;
}

/* Specific adjustment for sound toggle label alignment */
.motion-options .sound-toggle-container label {
  display: inline-flex;
  align-items: center;
  width: auto;
  position: relative;
  z-index: 2;
  cursor: pointer;
}

.motion-options .clear-log-item {
  text-align: center;
  margin-top: 15px; /* More space above clear button */
}

/* Dark mode styles for panel items */
@media (prefers-color-scheme: light) {
  .motion-options {
    background-color: #ffffff;
    border: 1px solid #ccc;
  }
  .motion-options .option-item label {
    color: #555;
  }
  .motion-options .option-item input[type=number],
  .motion-options .option-item select {
    border: 1px solid #ccc;
    background-color: #ffffff;
    color: #333;
  }
}

/* Close button for panels */
.close-panel-button {
  position: absolute;
  top: 5px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.8em;
  font-weight: bold;
  color: #aaa;
  cursor: pointer;
  padding: 0 5px;
  line-height: 1;
}
.close-panel-button:hover {
  color: #fff;
}