.dialer-mockup{--dialer-emerald: #1A4D4A;--dialer-emerald-light: rgba(26, 77, 74, .08);--dialer-border: #e5e5e5;--dialer-bg-gray: #f5f5f5;--dialer-text: #171717;--dialer-text-muted: #737373;--dialer-text-light: #a3a3a3;width:320px;height:540px;background:#fff;border-radius:12px;border:1px solid var(--dialer-border);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;overflow:hidden;flex-shrink:0;position:relative;font-family:Inter,system-ui,sans-serif}.dialer-header{background:var(--dialer-emerald);padding:10px 14px;display:flex;align-items:center;justify-content:space-between}.dialer-status{display:flex;align-items:center;gap:8px}.dialer-status-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;animation:pulse-dot 2s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1}50%{opacity:.5}}.dialer-status-text{font-size:13px;font-weight:500;color:#fff}.dialer-header-chevron{width:16px;height:16px;color:#fff9}.dialer-tabs{display:flex;background:#fff;border-bottom:1px solid var(--dialer-border)}.dialer-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;padding:10px 4px;font-size:11px;font-weight:500;color:var(--dialer-text-muted);border:none;background:none;cursor:pointer;transition:all .15s ease;position:relative}.dialer-tab:hover{color:#525252;background:#fafafa}.dialer-tab.active{color:var(--dialer-text);background:#fff}.dialer-tab.active:after{content:"";position:absolute;bottom:-1px;left:0;right:0;height:2px;background:var(--dialer-emerald)}.dialer-tab svg{width:14px;height:14px;flex-shrink:0}.dialer-body{padding:12px 12px 16px;height:458px}.dialer-tab-content{display:none;height:100%}.dialer-tab-content.active{display:flex;flex-direction:column}.dialer-search-wrapper{position:relative;flex-shrink:0;margin-bottom:10px}.dialer-search{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--dialer-bg-gray);border-radius:6px}.dialer-search svg{width:14px;height:14px;color:var(--dialer-text-light);flex-shrink:0}.dialer-search-input{flex:1;border:none;background:none;font-size:13px;color:var(--dialer-text);outline:none}.dialer-search-input::placeholder{color:var(--dialer-text-light)}.dialer-contacts-dropdown{position:absolute;top:100%;left:0;right:0;margin-top:4px;background:#fff;border:1px solid var(--dialer-border);border-radius:6px;box-shadow:0 10px 25px #0000001a;max-height:180px;overflow-y:auto;z-index:100;display:none}.dialer-contacts-dropdown.active{display:block}.dialer-contact-item{display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;transition:background .15s ease;border:none;background:none;width:100%;text-align:left}.dialer-contact-item:hover{background:var(--dialer-bg-gray)}.dialer-contact-item:not(:last-child){border-bottom:1px solid var(--dialer-bg-gray)}.dialer-contact-avatar{width:32px;height:32px;border-radius:50%;background:var(--dialer-border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:#525252;flex-shrink:0}.dialer-contact-info{flex:1;min-width:0}.dialer-contact-name{font-size:13px;font-weight:500;color:var(--dialer-text);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialer-contact-phone{font-size:11px;color:var(--dialer-text-muted);margin:0}.dialer-input{text-align:center;padding:12px 8px;margin-bottom:8px;height:48px;display:flex;align-items:center;justify-content:center;position:relative;flex-shrink:0}.dialer-input-number{font-size:22px;font-weight:600;color:var(--dialer-text);letter-spacing:.02em}.dialer-input-placeholder{font-size:14px;color:var(--dialer-text-light);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}.dialer-input-placeholder.hidden{display:none}.dialer-caller-id{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;background:var(--dialer-emerald-light);border-radius:6px;margin-bottom:12px;flex-shrink:0}.dialer-caller-id-label{font-size:10px;font-weight:600;color:var(--dialer-emerald);text-transform:uppercase;letter-spacing:.05em}.dialer-caller-id-value{font-size:12px;font-weight:600;color:var(--dialer-emerald)}.dialer-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px;flex-shrink:0}.dialer-key{display:flex;flex-direction:column;align-items:center;justify-content:center;width:52px;height:52px;margin:0 auto;background:var(--dialer-bg-gray);border-radius:50%;cursor:pointer;transition:all .1s ease;border:none;user-select:none}.dialer-key:hover{background:var(--dialer-border)}.dialer-key:active{background:#d4d4d4;transform:scale(.95)}.dialer-key-number{font-size:18px;font-weight:500;color:var(--dialer-text);line-height:1}.dialer-key-letters{font-size:8px;font-weight:500;color:var(--dialer-text-light);letter-spacing:.1em;margin-top:2px}.dialer-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-shrink:0}.dialer-action-btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;border:none;background:transparent}.dialer-action-btn svg{width:20px;height:20px;color:var(--dialer-text-muted)}.dialer-backspace:hover{background:var(--dialer-bg-gray)}.dialer-backspace:hover svg{color:var(--dialer-text)}.dialer-spacer{visibility:hidden}.dialer-call-btn{width:52px;height:52px;background:var(--dialer-emerald);border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}.dialer-call-btn:hover{background:#153d3b;transform:scale(1.05)}.dialer-call-btn:active{transform:scale(.98)}.dialer-call-btn svg{width:24px;height:24px;color:#fff;flex-shrink:0}.dialer-recent-list{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}.dialer-recent-date{font-size:10px;font-weight:600;color:var(--dialer-text-light);text-transform:uppercase;letter-spacing:.05em;padding:8px 0 6px}.dialer-recent-date:first-child{padding-top:0}.dialer-recent-item{display:flex;align-items:center;gap:10px;padding:8px;cursor:pointer;transition:background .15s ease;border:none;background:none;text-align:left;border-radius:6px;width:100%}.dialer-recent-item:hover{background:var(--dialer-bg-gray)}.dialer-recent-avatar{width:32px;height:32px;border-radius:50%;background:var(--dialer-border);display:flex;align-items:center;justify-content:center;flex-shrink:0}.dialer-recent-avatar svg{width:16px;height:16px;color:var(--dialer-text-muted)}.dialer-recent-info{flex:1;min-width:0}.dialer-recent-name{font-size:13px;font-weight:500;color:var(--dialer-text);margin:0}.dialer-recent-subtitle{font-size:11px;color:var(--dialer-emerald);margin:1px 0 0}.dialer-recent-time{font-size:11px;color:var(--dialer-text-light);flex-shrink:0}.dialer-team-list{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}.dialer-team-item{display:flex;align-items:center;gap:10px;padding:8px;cursor:pointer;transition:background .15s ease;border:none;background:none;text-align:left;border-radius:6px;width:100%}.dialer-team-item:hover{background:var(--dialer-bg-gray)}.dialer-team-avatar-wrapper{position:relative;flex-shrink:0}.dialer-team-avatar{width:32px;height:32px;border-radius:50%;background:#e5e7eb;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--dialer-emerald)}.dialer-team-status-dot{position:absolute;bottom:0;left:0;width:10px;height:10px;border-radius:50%;border:2px solid #ffffff;box-sizing:border-box}.dialer-team-status-dot.online{background:#22c55e}.dialer-team-status-dot.away{background:#f59e0b}.dialer-team-status-dot.offline{background:#a3a3a3}.dialer-team-info{flex:1;min-width:0}.dialer-team-name-row{display:flex;align-items:center;gap:6px}.dialer-team-name{font-size:13px;font-weight:500;color:var(--dialer-text);margin:0}.dialer-team-role{font-size:10px;color:var(--dialer-text-light)}.dialer-team-status{font-size:11px;color:var(--dialer-text-muted);margin:1px 0 0}.dialer-team-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.dialer-team-action-btn{width:28px;height:28px;border-radius:4px;background:var(--dialer-bg-gray);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .15s ease}.dialer-team-action-btn:hover{background:var(--dialer-border)}.dialer-team-action-btn svg{width:14px;height:14px;color:var(--dialer-text-muted)}.dialer-sms-list{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}.dialer-sms-item{display:flex;align-items:flex-start;gap:10px;padding:10px 8px;cursor:pointer;transition:background .15s ease;border:none;background:none;text-align:left;border-radius:6px;width:100%}.dialer-sms-item:hover{background:var(--dialer-bg-gray)}.dialer-sms-avatar-wrapper{position:relative;flex-shrink:0;width:36px;height:36px}.dialer-sms-avatar{width:32px;height:32px;border-radius:50%;background:#e5e7eb;display:flex;align-items:center;justify-content:center;position:absolute;top:0;right:0}.dialer-sms-avatar svg{width:16px;height:16px;color:var(--dialer-text-muted)}.dialer-sms-badge{position:absolute;bottom:0;left:0;width:14px;height:14px;border-radius:50%;background:var(--dialer-emerald);display:flex;align-items:center;justify-content:center;border:2px solid #ffffff;box-sizing:content-box}.dialer-sms-badge svg{width:8px;height:8px;color:#fff}.dialer-sms-info{flex:1;min-width:0}.dialer-sms-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:1px}.dialer-sms-name{font-size:13px;font-weight:500;color:var(--dialer-text);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialer-sms-time{font-size:10px;color:var(--dialer-text-light);white-space:nowrap;flex-shrink:0}.dialer-sms-meta{display:flex;align-items:center;gap:4px;margin-bottom:2px}.dialer-sms-phone{font-size:11px;color:var(--dialer-text-muted);margin:0}.dialer-sms-source{font-size:10px;color:var(--dialer-text-light)}.dialer-sms-preview{font-size:11px;color:var(--dialer-text-muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dialer-calling-overlay{position:absolute;inset:0;background:var(--dialer-emerald);display:none;align-items:center;justify-content:center;z-index:200}.dialer-calling-overlay.active{display:flex}.dialer-calling-content{text-align:center;padding:24px}.dialer-calling-avatar{width:64px;height:64px;border-radius:50%;background:#ffffff26;display:flex;align-items:center;justify-content:center;margin:0 auto 16px}.dialer-calling-avatar svg{width:32px;height:32px;color:#fff}.dialer-calling-avatar.has-initials{font-size:20px;font-weight:600;color:#fff}.dialer-calling-avatar.has-initials svg{display:none}.dialer-calling-name{font-size:18px;font-weight:600;color:#fff;margin:0 0 4px}.dialer-calling-number{font-size:13px;color:#ffffffb3;margin:0 0 6px}.dialer-calling-status{font-size:13px;color:#fff9;margin:0 0 6px}.dialer-calling-timer{font-family:DM Mono,SF Mono,monospace;font-size:20px;font-weight:500;color:#fff;margin-bottom:20px}.dialer-end-call-btn{width:56px;height:56px;border-radius:50%;background:#ef4444;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .15s ease;margin:0 auto}.dialer-end-call-btn:hover{background:#dc2626;transform:scale(1.05)}.dialer-end-call-btn svg{width:24px;height:24px;color:#fff;transform:rotate(135deg)}@media(max-width:968px){.dialer-mockup{margin:0 auto}}