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