/* Component-specific styles */

/* Call Box */
#call-box {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  text-align: center;
}

/* Buttons */
#start-call-button {
  padding: 0.75rem 1.5rem;
  background-color: #4f46e5;
  color: white;
  font-weight: 500;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

#start-call-button:hover {
  background-color: #4338ca;
}

#start-call-button:focus {
  outline: none;
  ring: 2px;
  ring-color: #4f46e5;
}

#end-call-button {
  padding: 0.75rem 1.5rem;
  border: 1px solid #dc2626;
  color: #dc2626;
  font-weight: 500;
  border-radius: 0.375rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

#end-call-button:hover {
  background-color: #fef2f2;
}

#end-call-button:focus {
  outline: none;
  ring: 2px;
  ring-color: #dc2626;
}

/* Suggestions Box */
.suggestions-box {
  background-color: white;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Scenario List */
#scenario-list {
  background-color: white;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.scenario-item {
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: left;
  font-size: 0.875rem;
  color: #374151;
}

.scenario-item:hover {
  background-color: #f9fafb;
}

.scenario-item:focus {
  outline: none;
  background-color: #f9fafb;
}

.scenario-item.active {
  background-color: #f3f4f6;
}