.phone-view{display:flex;flex-direction:column;max-width:400px;margin:0 auto}.phone-display{padding:20px 16px;background:white}.number-display{width:100%;padding:12px;font-size:20px;text-align:center;border:2px solid #e0e0e0;border-radius:8px;background:white}.dialpad{padding:12px}.dialpad-row{display:flex;gap:10px;margin-bottom:10px}.dialpad-button{flex:1;padding:16px;font-size:20px;font-weight:500;background:white;border:2px solid #e0e0e0;border-radius:50%;cursor:pointer;transition:all .2s;aspect-ratio:1}.dialpad-button:hover{background:#f5f5f5;transform:scale(1.05)}.dialpad-button:active{transform:scale(.95)}.call-actions{display:flex;justify-content:center;gap:20px;padding:20px}.action-button{width:56px;height:56px;font-size:24px;border:none;border-radius:50%;cursor:pointer;transition:all .2s}.action-button.delete{background:#f0f0f0;color:#333}.action-button.call{background:#34a853;color:#fff}.action-button.call:disabled{background:#ccc;cursor:not-allowed}.action-button:hover:not(:disabled){transform:scale(1.1)}.action-button:active:not(:disabled){transform:scale(.9)}.contacts-view .view-header{display:flex;justify-content:space-between;align-items:center}.add-button{width:40px;height:40px;font-size:24px;background:white;border:none;border-radius:50%;cursor:pointer;color:#1a73e8}.contacts-list{background:white}.contact-item{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid #e0e0e0}.contact-avatar{width:48px;height:48px;border-radius:50%;background:#1a73e8;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:500}.contact-info{flex:1}.contact-name{font-size:16px;font-weight:500;margin-bottom:4px}.contact-phone{font-size:14px;color:#666}.contact-company{font-size:12px;color:#999;margin-top:2px}.call-button{width:40px;height:40px;font-size:20px;background:#f0f0f0;border:none;border-radius:50%;cursor:pointer}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000}.modal{background:white;padding:24px;border-radius:12px;width:90%;max-width:400px}.modal h2{margin-bottom:16px}.modal input{width:100%;padding:12px;margin-bottom:12px;border:2px solid #e0e0e0;border-radius:8px;font-size:16px}.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:16px}.modal-actions button{padding:10px 20px;border:none;border-radius:8px;cursor:pointer;font-size:16px}.modal-actions button.primary{background:#1a73e8;color:#fff}.voicemail-view{background:#f5f5f5}.voicemails-list{background:white}.voicemail-item{display:flex;align-items:flex-start;gap:12px;padding:16px;border-bottom:1px solid #e0e0e0;cursor:pointer;transition:background .2s}.voicemail-item:hover{background:#f9f9f9}.voicemail-item.unread{background:#e8f0fe}.vm-icon{font-size:24px}.vm-info{flex:1}.vm-from{font-size:16px;font-weight:500;margin-bottom:4px}.vm-transcription{font-size:14px;color:#333;margin-bottom:8px;line-height:1.4}.vm-meta{font-size:12px;color:#666}.unread-badge{background:#1a73e8;color:#fff;padding:4px 8px;border-radius:4px;font-size:12px;font-weight:500}.recent-view{background:#f5f5f5}.calls-list{background:white}.call-item{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid #e0e0e0;cursor:pointer;transition:background .2s}.call-item:hover{background:#f9f9f9}.call-item.missed{color:#d93025}.call-icon{font-size:24px}.call-info{flex:1}.call-number{font-size:16px;font-weight:500;margin-bottom:4px}.call-meta{font-size:14px;color:#666;text-transform:capitalize}.call-time{font-size:14px;color:#666}.empty-state{padding:48px 16px;text-align:center;color:#666}.settings-view{background:#f5f5f5}.settings-section{background:white;border-radius:12px;padding:24px;margin-bottom:24px}.settings-section h2{font-size:20px;margin-bottom:8px;color:#333}.section-description{color:#666;font-size:14px;line-height:1.5;margin-bottom:20px}.api-key-box{background:#f9f9f9;border:1px solid #e0e0e0;border-radius:8px;padding:16px;margin-bottom:16px}.api-key-box label{display:block;font-weight:500;margin-bottom:8px;color:#333}.key-input-group{display:flex;gap:8px;margin-bottom:12px}.key-input{flex:1;padding:10px;border:1px solid #ddd;border-radius:6px;font-family:monospace;font-size:14px}.btn-show,.btn-copy{width:40px;height:40px;border:1px solid #ddd;background:white;border-radius:6px;cursor:pointer;font-size:16px;transition:all .2s}.btn-show:hover,.btn-copy:hover{background:#f5f5f5}.btn-generate{width:100%;padding:12px;background:#1a73e8;color:#fff;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:background .2s}.btn-generate:hover{background:#1557b0}.btn-generate:disabled{background:#ccc;cursor:not-allowed}.api-docs{margin-top:16px}.api-docs h3{font-size:14px;margin-bottom:8px;color:#666}.api-docs pre{background:#2d2d2d;color:#f8f8f2;padding:16px;border-radius:6px;overflow-x:auto;font-size:13px;line-height:1.5}.setting-item{padding:12px 0;border-bottom:1px solid #f0f0f0}.setting-item:last-child{border-bottom:none}.setting-item label{display:flex;align-items:center;gap:12px;cursor:pointer;font-size:15px;color:#333}.setting-item input[type=checkbox]{width:20px;height:20px;cursor:pointer}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;background:#f5f5f5;overflow:hidden}.app{width:100%;height:100vh;background:white}.app-layout{display:flex;height:100vh}.sidebar{width:240px;background:linear-gradient(180deg,#1a73e8 0%,#1557b0 100%);color:#fff;display:flex;flex-direction:column;box-shadow:2px 0 10px #0000001a}.sidebar-header{padding:24px 20px;border-bottom:1px solid rgba(255,255,255,.1)}.app-title{font-size:24px;font-weight:600;margin:0}.sidebar-nav{flex:1;padding:16px 8px;overflow-y:auto}.nav-button{width:100%;display:flex;align-items:center;gap:12px;padding:12px 16px;background:none;border:none;color:#fffc;cursor:pointer;border-radius:8px;transition:all .2s;margin-bottom:4px;font-size:15px}.nav-button:hover{background:rgba(255,255,255,.1);color:#fff}.nav-button.active{background:rgba(255,255,255,.2);color:#fff;font-weight:500}.nav-icon{font-size:20px;width:24px;text-align:center}.nav-label{flex:1;text-align:left}.nav-divider{height:1px;background:rgba(255,255,255,.1);margin:16px 8px}.main-content{flex:1;overflow-y:auto;background:#f5f5f5}.view{display:flex;flex-direction:column;height:100%}.view-header{padding:20px 24px;background:white;border-bottom:1px solid #e0e0e0;display:flex;justify-content:space-between;align-items:center}.view-header h1{font-size:28px;font-weight:500;margin:0;color:#333}.view-content{flex:1;padding:24px;overflow-y:auto}@media (max-width: 768px){.sidebar{width:70px}.sidebar-header{padding:16px 8px}.app-title{font-size:18px;text-align:center}.nav-button{flex-direction:column;gap:4px;padding:12px 8px}.nav-label{font-size:11px;text-align:center}.nav-icon{font-size:24px}}