/* Base Styles */
body {
    font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: #201e1e;
    color: #ffffff;
    margin: 0;
    padding: 60px 20px;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Container */
.container {
    width: 100%;
    max-width: 320px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Logo */
.logo h1 {
    margin: 0 0 20px;
    font-size: 24px;
}

/* Controls */
.controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Input, Button, Select Unified Style */
input,
button,
select {
    width: 100%;
    height: 60px;
    padding: 0 16px;
    background-color: transparent;
    color: #f7f3f3;
    border: 1px solid #fdfcfc;
    font-family: inherit;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
    box-sizing: border-box;
    border-radius: 8px;

}

/* Read-only input style */
input[readonly] {
    background-color: #222;
    cursor: default;
}

/* Hover Effects */
button:hover,
select:hover {
    border-width: 2px;
    transform: scale(1.04);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}

/* Disabled Effects */
button:disabled,
input:disabled,
select:disabled {
  background-color: transparent;       /* Light gray background */
  color: #666;                  /* Dimmed text */
  cursor: not-allowed;          /* "No entry" cursor */
  opacity: 0.6;                 /* Slight transparency */
  border: 1px solid #999;       /* Muted border */
}

.disabled {
  color: #666 !important;
  cursor: not-allowed !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
  border: 1px solid #999 !important;
}

/* Active Effects */
button:active {
  background-color: transparent; /* Change to your highlight color */
  color: white;
  transform: scale(0.98);    /* Optional: subtle press effect */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

select {
    appearance: none;
    text-align: center;
    text-align-last: center;
    padding: 0;
}

select option {
    color: #ffffff;
    background-color: #201e1e;
}

select optgroup {
  font-weight: bold;
  color: #ffffff;
  background-color: #201e1e;
}

.agent-container {
  height: 60px;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.agent-id-container {
  display: flex;
  flex: 7;
  flex-direction: row;
  gap: 0;
  align-items: center;
}

#agent-id-button {
    width: 35%;
    height: 100%;
    padding: 0px;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0 8px 0 0; /* top-left, top-right, bottom-right, bottom-left */
}

#agent-id-input {
    text-align: center;
    width: 65%;
    height: 100%;
    cursor: text;
    border-bottom: 0;
    border-radius: 8px 0 0 0; /* top-left, top-right, bottom-right, bottom-left */
}

#agent-name {
    width: 100%;
    height: 100%;
    flex: 3;
    gap: 0;
    background-color: transparent;
    color: #f7f3f3;
    border: 1px solid #fdfcfc;
    font-family: inherit;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: default;
    border-radius: 0 0 8px 8px; /* top-left, top-right, bottom-right, bottom-left */
    justify-content: center; /* horizontal centering */
    align-items: center;     /* vertical centering */
    display: flex;
}


/* Speaker Button */
#speaker-button {
    font-size: 24px;
    border: none;
    background: none;
    cursor: pointer;
    height: auto;
}

/* Speaker Icon */
.speaker-icon::before {
    content: "";
    display: inline-block;
    width: 32px;
    height: 32px;
    background-image: url("data:image/png;base64,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");
    background-size: contain;
    background-repeat: no-repeat;
}

.muted .speaker-icon::before {
    background-image: url("data:image/png;base64,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");
}

/* Toast Notifications */
.toast {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 16px 24px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 1000;
    display: none;
    box-shadow: 0 3px 5px rgba(42, 42, 42, 0.3);
    background-color: rgb(69, 164, 69);
    color: black;
}

.toast.error {
    background-color: #a1241b;
    color: white;
}

.toast.warning {
    background-color: #ffd700;
    color: black;
}


/*.corner-id {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 12px;
    color: #aaa;
    background-color: #222;
    padding: 4px 8px;
    border-radius: 6px;
    pointer-events: none;
}*/

#rtcid {
    position: fixed;
    bottom: 16px;
    left: 16px;
    font-size: 12px;
    color: #aaa;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    pointer-events: none;
}

#choose-avatar-button {
    width: 100%;
    height: 60px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}