.app{min-height:100vh;display:flex;flex-direction:column}.app.loading{justify-content:center;align-items:center}.loading-spinner{font-size:1.5rem;color:var(--primary-color)}.app-header{background-color:#fff;border-bottom:1px solid var(--gray-300);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.app-header h1{font-size:1.5rem;font-weight:600;color:var(--gray-900)}.connection-status{display:flex;gap:1rem}.status-indicator{font-size:.875rem;padding:.25rem .75rem;border-radius:12px;background-color:var(--gray-200)}.status-indicator.connected,.status-indicator.registered{background-color:#d4edda;color:var(--success-color)}.status-indicator.disconnected,.status-indicator.unregistered{background-color:#f8d7da;color:var(--danger-color)}.app-main{flex:1;display:flex;gap:1.5rem;padding:1.5rem;max-width:1400px;margin:0 auto;width:100%}.main-panel{flex:1;display:flex;flex-direction:column;gap:1.5rem}.sidebar{width:350px;background-color:#fff;border-radius:var(--border-radius);padding:1.5rem;box-shadow:0 2px 4px #0000001a}.dialer-section,.active-calls-section{background-color:#fff;border-radius:var(--border-radius);padding:1.5rem;box-shadow:0 2px 4px #0000001a}.dialer{max-width:400px;margin:0 auto}.dialer-display{display:flex;align-items:center;gap:.5rem;margin-bottom:1.5rem}.dialer-input{flex:1;font-size:1.5rem;padding:.75rem;border:2px solid var(--gray-300);border-radius:var(--border-radius);text-align:center}.dialer-input:focus{outline:none;border-color:var(--primary-color)}.backspace-button{padding:.75rem;font-size:1.5rem;color:var(--gray-600);background-color:var(--gray-200);border-radius:var(--border-radius)}.backspace-button:hover{background-color:var(--gray-300)}.dialer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem}.dialer-button{aspect-ratio:1;font-size:1.5rem;font-weight:600;background-color:var(--gray-100);border:1px solid var(--gray-300);border-radius:var(--border-radius);color:var(--gray-900)}.dialer-button:hover{background-color:var(--gray-200)}.dialer-button:active{transform:scale(.95)}.dialer-actions{display:flex;justify-content:center}.call-button{width:100%;padding:1rem;font-size:1.125rem;font-weight:600;color:#fff;background-color:var(--success-color);border-radius:var(--border-radius)}.call-button:hover:not(:disabled){background-color:#218838}.call-button.disabled{background-color:var(--gray-400)}.status-message{margin-top:1rem;text-align:center;color:var(--danger-color);font-size:.875rem}.active-calls h3,.call-history h3{font-size:1.25rem;font-weight:600;margin-bottom:1rem;color:var(--gray-800)}.active-calls.empty,.call-history.empty{text-align:center;color:var(--gray-600);padding:2rem}.active-calls-list,.call-history-list{display:flex;flex-direction:column;gap:1rem}.active-call-item{border:1px solid var(--gray-300);border-radius:var(--border-radius);padding:1rem}.incoming-call{display:flex;flex-direction:column;gap:1rem}.caller-info{display:flex;align-items:center;gap:1rem}.caller-icon{font-size:2rem}.caller-details{flex:1}.caller-number{font-size:1.125rem;font-weight:600;color:var(--gray-900)}.call-status{font-size:.875rem;color:var(--gray-600)}.incoming-call-actions{display:flex;gap:.5rem}.answer-button{flex:1;padding:.75rem;font-weight:600;color:#fff;background-color:var(--success-color);border-radius:var(--border-radius)}.answer-button:hover{background-color:#218838}.call-controls{display:flex;flex-direction:column;gap:1rem}.call-info{text-align:center}.remote-identity{font-size:1.125rem;font-weight:600;color:var(--gray-900)}.control-buttons{display:flex;justify-content:center;gap:1rem}.control-button{width:3rem;height:3rem;border-radius:50%;background-color:var(--gray-200);font-size:1.25rem;display:flex;align-items:center;justify-content:center;border:1px solid var(--gray-300)}.control-button:hover{background-color:var(--gray-300)}.control-button.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.hangup-button{background-color:var(--danger-color);color:#fff;border-color:var(--danger-color)}.hangup-button:hover{background-color:#c82333}.dtmf-pad{padding-top:1rem;border-top:1px solid var(--gray-300)}.dtmf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;max-width:250px;margin:0 auto}.dtmf-button{aspect-ratio:1;font-size:1.25rem;font-weight:600;background-color:var(--gray-100);border:1px solid var(--gray-300);border-radius:var(--border-radius)}.dtmf-button:hover{background-color:var(--gray-200)}.dtmf-button:active{transform:scale(.95)}.call-history-item{display:flex;align-items:center;gap:1rem;padding:.75rem;border:1px solid var(--gray-300);border-radius:var(--border-radius)}.call-history-item.call-failed{background-color:#f8d7da;border-color:#f5c6cb}.call-icon{font-size:1.5rem}.call-details{flex:1}.call-number{font-weight:600;color:var(--gray-900)}.call-meta{display:flex;gap:1rem;font-size:.875rem;color:var(--gray-600);margin-top:.25rem}.call-direction{font-size:.75rem;font-weight:600;padding:.125rem .5rem;border-radius:4px;text-transform:uppercase}.direction-inbound{background-color:#d1fae5;color:#065f46}.direction-outbound{background-color:#dbeafe;color:#1e40af}.call-history-item.call-inbound{border-left:3px solid #10b981}.call-history-item.call-outbound{border-left:3px solid #3b82f6}.status-badge{font-size:.75rem;padding:.25rem .5rem;border-radius:4px;text-transform:uppercase;font-weight:600}.status-ringing{background-color:#fff3cd;color:#856404}.status-answered{background-color:#d4edda;color:#155724}.status-ended{background-color:var(--gray-200);color:var(--gray-700)}.status-failed,.status-busy{background-color:#f8d7da;color:#721c24}@media (max-width: 768px){.app-main{flex-direction:column}.sidebar{width:100%}}*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #0066cc;--primary-hover: #0052a3;--success-color: #28a745;--danger-color: #dc3545;--warning-color: #ffc107;--gray-100: #f8f9fa;--gray-200: #e9ecef;--gray-300: #dee2e6;--gray-400: #ced4da;--gray-500: #adb5bd;--gray-600: #6c757d;--gray-700: #495057;--gray-800: #343a40;--gray-900: #212529;--border-radius: 8px;--transition: all .2s ease}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--gray-100);color:var(--gray-900);line-height:1.5}#root{min-height:100vh}button{font-family:inherit;cursor:pointer;border:none;background:none;transition:var(--transition)}button:disabled{cursor:not-allowed;opacity:.6}input{font-family:inherit}