* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     Oxygen, Ubuntu, Cantarell, sans-serif;
 }

 body {
   margin: 0;
   padding: 0;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   background-color: #f0f2f5;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .softphone-container {
   width: 280px;
   background: #1a1b1e;
   border-radius: 16px;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
   overflow: hidden;
 }

 .status-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 20px;
   border-bottom: 1px solid #2a2b2e;
 }

 .status-indicator {
   display: flex;
   align-items: center;
   gap: 8px;
   color: #9ca3af;
   font-size: 14px;
 }

 .status-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #ef4444;
 }

 .status-dot.connected {
   background: #22c55e;
 }

 .extension {
   color: #9ca3af;
   font-size: 14px;
 }

 .number-display {
   /*padding: 24px 20px;*/
 }

 .phone-input {
   width: 100%;
   background: transparent;
   border: none;
   color: #ffffff;
   font-size: 32px;
   text-align: center;
   padding: 8px;
   outline: none;
 }

 .keypad {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 2px;
   padding: 12px;
   background: #1a1b1e;
 }

 .key {
   background: #2a2b2e;
   border: none;
   color: #ffffff;
   font-size: 24px;
   padding: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: background-color 0.2s;
   /*aspect-ratio: 1;*/
   aspect-ratio: 0;
 }

 .key:hover {
   background: #3a3b3e;
 }

 .key span {
   font-size: 12px;
   color: #9ca3af;
   margin-top: 4px;
 }

 .controls {
   display: flex;
   flex-direction: column;
   gap: 8px;
   padding: 12px;
 }

 .control-row {
   display: flex;
   gap: 8px;
   width: 100%;
 }

 .control-btn {
   flex: 1;
   padding: 10px;
   border: none;
   border-radius: 8px;
   color: white;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 36px;
   transition: all 0.2s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .control-btn i {
   font-size: 16px;
 }

 /* Button colors */
 .btn-hangup {
   background: #ef4444;
 }

 .btn-call {
   background: #22c55e;
 }

 .btn-hold,
 .btn-transfer {
   background: #3b82f6;
 }

 .btn-conference {
   background: #6366f1;
 }

 .btn-resume {
   background: #22c55e;
 }

 /* Button hover and active states */
 .control-btn:hover {
   opacity: 0.9;
   transform: translateY(-1px);
 }

 .control-btn:active {
   transform: translateY(0);
 }

 /* Transfer and conference button styling */
 .transfer-controls {
   display: flex;
   flex-direction: column;
   gap: 8px;
   margin-top: 8px;
 }

 .incoming-call {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: rgba(0, 0, 0, 0.95);
   padding: 24px;
   border-radius: 16px;
   text-align: center;
   color: white;
   width: 300px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
 }

 .incoming-call h3 {
   margin-bottom: 20px;
   font-size: 20px;
 }

 .incoming-buttons {
   display: flex;
   justify-content: center;
   gap: 16px;
 }

 /* Hidden audio elements */
 #remoteAudio,
 #remoteVideo {
   display: none;
 }

 .red {
   background: red;
 }

 .green {
   background: green;
 }

 .yellow {
   background: yellow;
 }

 .config-overlay {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   display: none;
   /* Hide by default */
   justify-content: center;
   align-items: center;
   z-index: 1000;
 }

 .config-popup {
   background-color: #1a1b1e;
   border-radius: 10px;
   width: 100%;
   max-width: 380px;
   max-height: 90vh;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
   overflow-y: auto;
   position: relative;
   color: #ffffff;
   padding: 12px;
 }

 .config-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
 }

 .config-title {
   font-size: 24px;
   font-weight: bold;
   color: #ffffff;
 }

 .config-close {
   background: none;
   border: none;
   color: #9ca3af;
   font-size: 24px;
   cursor: pointer;
 }

 .config-form {
   padding: 0 20px 20px;
   overflow-y: auto;
   max-height: calc(90vh - 120px);
   /* Allow scrolling in form area */
 }

 .form-group {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }

 .form-group label {
   display: block;
   font-size: 16px;
   margin-bottom: 8px;
   color: #e0e0e0;
 }

 .form-group input {
   width: 100%;
   padding: 12px;
   background-color: #2a2b2e;
   border: 1px solid #3a3b3f;
   border-radius: 8px;
   font-size: 16px;
   color: #ffffff;
 }

 .config-actions {
   position: sticky;
   bottom: 0;
   background: #1a1b1e;
   padding: 15px 0;
   border-top: 1px solid #2a2b2e;
   z-index: 10;
 }

 .btn {
   padding: 8px 16px;
   border: none;
   border-radius: 8px;
   font-size: 14px;
   cursor: pointer;
   transition: background-color 0.2s;
 }

 .btn-save {
   background: #22c55e;
   color: white;
 }

 .btn-save:hover {
   background: #16a34a;
 }

 .btn-cancel {
   background: #ef4444;
   color: white;
 }

 .btn-cancel:hover {
   background: #dc2626;
 }

 .config-trigger {
   /*position: fixed;
        bottom: 20px;
        right: 20px;*/
   background: none;
   color: #9ca3af;
   border: none;
   cursor: pointer;
   padding: 4px;
   border-radius: 6px;
   transition: all 0.2s ease;
 }

 .config-trigger:hover {
   background: #2a2b2e;
   color: white;
 }

 .transfer-status {
   padding: 8px;
   margin: 8px 0;
   border-radius: 4px;
   text-align: center;
 }

 .transfer-status.error {
   background: #fee2e2;
   color: #dc2626;
 }

 .transfer-status.success {
   background: #dcfce7;
   color: #16a34a;
 }

 .transfer-status.progress {
   background: #dbeafe;
   color: #2563eb;
 }

 .transfer-status.info {
   background: #f3f4f6;
   color: #4b5563;
 }

 .transfer-container {
   position: fixed;
   bottom: 20px;
   right: 20px;
   z-index: 1000;
   width: 300px;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
 }

 .transfer-status {
   padding: 12px;
   margin-bottom: 10px;
   border-radius: 8px;
   font-size: 14px;
   text-align: center;
   opacity: 0;
   transition: opacity 0.3s ease;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }

 .transfer-status.visible {
   opacity: 1;
 }

 .transfer-status.error {
   background-color: #fee2e2;
   color: #dc2626;
   border: 1px solid #fecaca;
 }

 .transfer-status.success {
   background-color: #dcfce7;
   color: #16a34a;
   border: 1px solid #bbf7d0;
 }

 .transfer-status.warning {
   background-color: #fef9c3;
   color: #ca8a04;
   border: 1px solid #fef08a;
 }

 .transfer-status.info {
   background-color: #dbeafe;
   color: #2563eb;
   border: 1px solid #bfdbfe;
 }

 .transfer-status.progress {
   background-color: #f3f4f6;
   color: #4b5563;
   border: 1px solid #e5e7eb;
 }

 .transfer-controls {
   display: flex;
   gap: 8px;
   justify-content: center;
   margin-top: 10px;
 }

 .transfer-button {
   padding: 8px 16px;
   border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   border: none;
   transition: background-color 0.2s ease;
 }

 #btn-complete-transfer {
   background-color: #22c55e;
   color: white;
 }

 #btn-complete-transfer:hover {
   background-color: #1d4ed8;
 }

 #btn-cancel-transfer {
   background-color: #ef4444;
   color: white;
 }

 #btn-cancel-transfer:hover {
   background-color: #b91c1c;
 }

 /* Animation for status updates */
 @keyframes statusFadeIn {
   from {
     opacity: 0;
     transform: translateY(10px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .transfer-status.animate {
   animation: statusFadeIn 0.3s ease forwards;
 }

 .conference-container {
   position: fixed;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;
   border-radius: 12px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
   width: 350px;
   max-width: 90vw;
   padding: 20px;
   z-index: 1000;
   max-height: 80vh;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   animation: slideIn 0.3s ease-out;
 }

 .conference-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-bottom: 15px;
   border-bottom: 1px solid #eee;
   margin-bottom: 15px;
 }

 .conference-header h3 {
   margin: 0;
   color: #333;
   font-size: 18px;
   font-weight: 600;
 }

 .participants-list {
   margin-bottom: 15px;
   flex: 1;
   overflow-y: auto;
   max-height: 200px;
 }

 .participant {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px;
   background: #f5f7fa;
   border-radius: 8px;
   margin-bottom: 8px;
   animation: fadeIn 0.2s ease-out;
 }

 .participant span {
   font-size: 16px;
   color: #555;
 }

 .remove-participant {
   background-color: #ff4757;
   color: white;
   border: none;
   border-radius: 6px;
   padding: 6px 12px;
   font-size: 14px;
   cursor: pointer;
   transition: background-color 0.2s;
 }

 .remove-participant:hover {
   background-color: #ff6b81;
 }

 .conference-btn {
   background-color: #4b7bec;
   color: white;
   border: none;
   border-radius: 8px;
   padding: 10px 16px;
   font-size: 14px;
   cursor: pointer;
   transition: background-color 0.2s;
   font-weight: 500;
 }

 .conference-btn:hover {
   background-color: #3867d6;
 }

 .conference-end {
   background-color: #ff4757;
 }

 .conference-end:hover {
   background-color: #ff6b81;
 }

 .conference-controls {
   display: flex;
   justify-content: flex-end;
   margin-top: 15px;
   border-top: 1px solid #eee;
   padding-top: 15px;
 }

 .conference-state {
   background-color: #f5f7fa;
   color: #555;
   padding: 10px;
   border-radius: 8px;
   margin-bottom: 15px;
   text-align: center;
   font-size: 14px;
   font-weight: 500;
 }

 @keyframes slideIn {
   from {
     opacity: 0;
     transform: translate(-50%, -60%);
   }

   to {
     opacity: 1;
     transform: translate(-50%, -50%);
   }
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
   }

   to {
     opacity: 1;
   }
 }

 /* Make sure the conference button is styled properly */
 .btn-conference {
   background-color: #6366f1;
   color: white;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .btn-conference i {
   margin-right: 4px;
 }

 .btn-conference:hover {
   background-color: #3867d6;
 }

 .btn-parked {
   background: #4f46e5;
   /* Indigo color */
 }

 .btn-parked:hover {
   background: #4338ca;
 }

 .parked-count {
   background: rgba(255, 255, 255, 0.2);
   padding: 2px 6px;
   border-radius: 10px;
   font-size: 12px;
   margin-left: 5px;
 }

 .parked-calls-panel {
   /*display: none;*/
   position: absolute;
   /*bottom: 100%;
   left: 0;
   right: 0;*/
   width: 300px;
   color: white;
   background: #1a1b1e;
   border-top: 1px solid #2a2b2e;
   padding: 12px;
   border-radius: 12px 12px 0 0;
   box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
 }

 .parked-calls-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   color: #ffffff;
   font-size: 14px;
   margin-bottom: 8px;
 }

 .parked-calls-close {
   background: none;
   border: none;
   color: #9ca3af;
   cursor: pointer;
   padding: 4px 8px;
   border-radius: 4px;
   transition: all 0.2s;
 }

 .parked-calls-close:hover {
   background: #2a2b2e;
   color: #ffffff;
 }

 .parked-calls-close i {
   font-size: 16px;
 }

 .parked-call {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 8px 0;
   border-bottom: 1px solid #2a2b2e;
   cursor: pointer;
 }

 .btn-park,
 .btn-unpark {
   background: #8b5cf6;
   /* Purple color to distinguish from hold */
 }

 .btn-park:hover,
 .btn-unpark:hover {
   background: #7c3aed;
 }

 /* Transfer Dialog Styles */
 .transfer-dialog {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
   animation: fadeIn 0.3s ease-out;
 }

 .transfer-dialog-content {
   background-color: #fff;
   border-radius: 12px;
   width: 350px;
   max-width: 90%;
   overflow: hidden;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
   animation: slideIn 0.3s ease-out;
 }

 .transfer-dialog-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   background-color: #f5f7fa;
   padding: 15px 20px;
   border-bottom: 1px solid #e5e7eb;
 }

 .transfer-dialog-header h3 {
   margin: 0;
   color: #333;
   font-size: 18px;
   font-weight: 600;
 }

 .transfer-close {
   background: none;
   border: none;
   font-size: 24px;
   color: #9ca3af;
   cursor: pointer;
   padding: 0;
   margin: 0;
   line-height: 1;
 }

 .transfer-close:hover {
   color: #6b7280;
 }

 .transfer-dialog-body {
   padding: 20px;
 }

 .transfer-type-selection {
   margin-top: 15px;
 }

 .transfer-type-selection .form-group {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
 }

 .transfer-type-selection input[type="radio"] {
   margin-right: 10px;
 }

 .transfer-dialog-footer {
   display: flex;
   justify-content: flex-end;
   padding: 15px 20px;
   background-color: #f5f7fa;
   border-top: 1px solid #e5e7eb;
 }

 .transfer-dialog-footer button {
   margin-left: 10px;
 }

 /* Transfer dialog status styles */
 .transfer-dialog-status {
   margin: 0 20px 15px;
   padding: 10px;
   border-radius: 6px;
   font-size: 14px;
   font-weight: 500;
   text-align: center;
 }

 .transfer-dialog-status.progress {
   background-color: #e5edff;
   color: #3867d6;
 }

 .transfer-dialog-status.success {
   background-color: #e6f7ed;
   color: #27ae60;
 }

 .transfer-dialog-status.error {
   background-color: #ffe5e5;
   color: #e74c3c;
 }

 .transfer-dialog-status.warning {
   background-color: #fff5e5;
   color: #f39c12;
 }

 .transfer-dialog-status.info {
   background-color: #e5f2ff;
   color: #2980b9;
 }

 /* Responsive Design for Smaller Screens */
 @media (max-height: 700px) {
   .softphone-container {
     width: 100%;
     height: 100%;
     max-height: 100%;
     max-width: 100%;
     border-radius: 0;
   }

   .key {
     padding: 10px;
     font-size: 20px;
   }

   .key span {
     font-size: 10px;
   }

   .phone-input {
     font-size: 24px;
     padding: 4px;
   }

   .control-btn {
     padding: 10px 14px;
     min-height: 40px;
     font-size: 14px;
   }

   .controls {
     padding: 10px;
     gap: 6px;
   }

   .keypad {
     gap: 8px;
     padding: 10px;
   }

   .number-display {
     padding: 15px 10px;
   }

   .status-bar {
     padding: 10px 15px;
   }
 }

 /* For very small screens */
 @media (max-height: 600px) {
   .softphone-container {
     width: 100%;
     height: 100%;
     max-height: 100%;
     max-width: 100%;
   }

   .keypad {
     gap: 5px;
     padding: 5px;
   }

   .key {
     border-radius: 8px;
   }
 }

 /* Remove floating toggle feature */
 .float-toggle {
   display: none;
   /* Permanently hide the float toggle */
 }

 /* Display the toggle button on small screens */
 /* This comment is now redundant since we're hiding the toggle */

 /* ICE Servers Configuration Styles */
 .ice-servers-section {
   margin-top: 16px;
   border-top: 1px solid #2a2b2e;
   padding-top: 16px;
 }

 .ice-servers-section>label {
   display: block;
   font-size: 16px;
   font-weight: bold;
   margin-bottom: 12px;
   color: #ffffff;
 }

 .ice-servers-container {
   max-height: 200px;
   overflow-y: auto;
   padding-right: 4px;
 }

 .ice-servers-container::-webkit-scrollbar {
   width: 4px;
 }

 .ice-servers-container::-webkit-scrollbar-thumb {
   background-color: #3a3b3e;
   border-radius: 4px;
 }

 .ice-servers-container::-webkit-scrollbar-track {
   background-color: #1a1b1e;
 }

 .ice-server-entry {
   background: #2a2b2e;
   border-radius: 8px;
   padding: 12px;
   margin-bottom: 8px;
   position: relative;
 }

 .ice-server-type {
   font-weight: bold;
   margin-bottom: 8px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .ice-server-type span {
   background: #3b82f6;
   padding: 2px 8px;
   border-radius: 4px;
   font-size: 12px;
   position: relative;
   z-index: 1;
 }

 .ice-server-type .turn {
   background: #6366f1;
 }

 .ice-server-remove {
   position: absolute;
   top: 12px;
   right: 12px;
   background: none;
   border: none;
   color: #ef4444;
   cursor: pointer;
   font-size: 16px;
   z-index: 2;
 }

 .ice-server-url {
   margin-bottom: 8px;
 }

 .ice-server-credentials {
   padding-top: 8px;
   border-top: 1px solid #3a3b3e;
 }

 .ice-server-actions {
   display: flex;
   gap: 8px;
   margin-top: 12px;
 }

 .btn-add {
   background: #3b82f6;
   flex: 1;
 }

 .btn-add:hover {
   background: #2563eb;
 }

 .ice-server-url input,
 .ice-server-credentials input {
   width: 100%;
   background: #3a3b3e;
   border: none;
   border-radius: 4px;
   padding: 8px 10px;
   color: #ffffff;
   font-size: 14px;
   outline: none;
 }

 .ice-server-url input:focus,
 .ice-server-credentials input:focus {
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
 }

 .ice-server-credentials .form-group {
   margin-bottom: 8px;
 }

 .ice-server-credentials .form-group:last-child {
   margin-bottom: 0;
 }

 /* Custom WebSocket URL Styles */
 .websocket-url-section {
   margin-bottom: 16px;
   border-bottom: 1px solid #2a2b2e;
   padding-bottom: 16px;
 }

 .custom-checkbox {
   display: flex;
   align-items: center;
   margin: 10px 0;
 }

 .custom-checkbox input[type="checkbox"] {
   margin-right: 8px;
   width: 16px;
   height: 16px;
   cursor: pointer;
 }

 .custom-checkbox label {
   color: #3b82f6;
   font-weight: 500;
 }

 .custom-ws-url input {
   width: 100%;
   background: #3a3b3e;
   border: none;
   border-radius: 4px;
   padding: 8px 10px;
   color: #ffffff;
   font-size: 14px;
   outline: none;
   margin-bottom: 4px;
 }

 .custom-ws-url input:focus {
   box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5);
 }

 .hint {
   font-size: 14px;
   color: #a0a0a0;
   margin-top: 5px;
   font-style: italic;
 }

 /* Animation for custom WebSocket URL container */
 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(-5px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .custom-ws-url.fade-in {
   animation: fadeIn 0.3s ease-out;
 }

 /* Active state for custom WebSocket URL checkbox */
 .custom-checkbox input[type="checkbox"]:checked+label {
   color: #3b82f6;
   font-weight: bold;
 }

 .custom-checkbox input[type="checkbox"]:checked+label::after {
   content: " (Enabled)";
   font-size: 12px;
   color: #22c55e;
   margin-left: 5px;
 }

 /* Fix SIP Configuration font color issues */
 .config-popup {
   color: #ffffff;
 }

 .config-title {
   color: #ffffff;
 }

 .form-group label {
   color: #e0e0e0;
 }

 .form-group input {
   color: #ffffff;
 }

 /* Custom WebSocket URL checkbox */
 .custom-checkbox label {
   color: #3b82f6;
   font-weight: 500;
 }

 /* WebSocket URL hint text */
 .hint {
   color: #a0a0a0;
 }

 /* ICE Servers section title */
 .ice-servers-section>label {
   color: #ffffff;
 }

 /* Fix for enabled text */
 .custom-checkbox label span {
   color: #22c55e;
   margin-left: 5px;
 }

 /* For very small screens */
 @media (max-width: 300px),
 (max-height: 500px) {
   .softphone-container {
     width: 100%;
     height: 100%;
     max-height: 100%;
     max-width: 100%;
     border-radius: 0;
     overflow: auto;
   }

   .keypad {
     grid-template-columns: repeat(3, 1fr);
     gap: 5px;
     padding: 5px;
   }

   .key {
     padding: 8px 5px;
     font-size: 18px;
   }

   .controls {
     padding: 5px;
   }

   .control-btn {
     padding: 8px;
   }
 }