*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Text,Helvetica Neue,Arial,sans-serif;background:linear-gradient(180deg,#0b0b0f,#06060a);color:#fff;display:flex;align-items:center;justify-content:center;min-height:100dvh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;touch-action:manipulation;overscroll-behavior-y:none;overscroll-behavior-x:none;-webkit-overflow-scrolling:touch;-webkit-user-select:none;user-select:none}input,textarea,button,select,.call-action-btn,.online-user-item{-webkit-user-select:text;user-select:text;touch-action:auto}.phone-container{width:50dvw;max-width:420px;height:95dvh;max-height:720px;background:linear-gradient(180deg,#ffffff26,#ffffff1a);border-radius:44px;padding:18px;box-shadow:0 30px 80px #000000b3,inset 0 1px #ffffff05;position:relative;overflow:hidden;display:flex;flex-direction:column;overflow-y:scroll}.phone-container:after{background:none}.phone-container.call-connected{background:#00ff001a}.phone-container.calling-active{background:#ff00001a}@media(max-width:680px){.phone-container{width:100dvw;min-width:100dvw;height:100dvh;max-height:100dvh;border-radius:0;padding:12px;box-shadow:none}}.notch{position:absolute;top:8px;left:50%;transform:translate(-50%);width:100px;height:24px;background:#000000d9;border-radius:14px;box-shadow:0 6px 18px #0009;z-index:20;display:flex;align-items:center;justify-content:center;pointer-events:none}.status-bar{position:absolute;top:8px;left:16px;width:calc(100% - 16px);display:flex;justify-content:space-between;align-items:center;padding:0 18px;font-size:13px;color:#ffffffe6;z-index:10}#statusTime{font-weight:600;letter-spacing:.5px}.screen{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:32px 0;gap:6px}.dialer-screen{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:100%}.caller-info{text-align:center;width:100%;display:flex;flex-direction:column;gap:8px}.caller-name{font-size:12px;color:#ffffffa6;letter-spacing:.6px}.caller-number{font-size:36px;font-weight:700;letter-spacing:1.6px;color:#fff}.call-status{font-size:14px;color:#ffffffb3}.call-duration{font-size:15px;color:#ffffffbf;margin-top:4px}.number-input{font-size:42px;font-weight:600;text-align:center;color:#fff;min-height:64px;position:relative;display:flex;justify-content:center;align-items:center}.dial-option{font-size:21px;font-weight:600}.online-users-dropdown{position:absolute;top:100%;left:0;right:0;background:#1e1e23fa;border-radius:14px;margin-top:8px;max-height:200px;overflow-y:auto;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 24px #0009;z-index:100;border:1px solid rgba(255,255,255,.1)}.online-user-item{padding:12px 16px;cursor:pointer;transition:background .12s ease;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid rgba(255,255,255,.05)}.online-user-item:last-child{border-bottom:none}.online-user-item:hover{background:#ffffff14}.online-user-name{font-size:16px;color:#fff;font-weight:500}.online-user-number{font-size:14px;color:#fff9;letter-spacing:.5px}.online-indicator{width:8px;height:8px;border-radius:50%;background:#34c759;margin-right:8px;display:inline-block}.no-online-users{padding:16px;text-align:center;color:#ffffff80;font-size:14px}.dialpad{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:0 6px;justify-items:center}.dial-btn{width:60px;height:60px;border-radius:50%;background:#fff3;border:1px solid rgba(255,255,255,.04);color:#fff;font-size:28px;font-weight:500;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s ease,background .12s;box-shadow:0 6px 18px #0009}.dial-btn:hover{background:#ffffff17}.dial-btn:active{transform:translateY(0)}.dial-btn .letters{font-size:10px;color:#ffffff8c;margin-top:-4px}.action-buttons{display:flex;justify-content:space-around;align-items:center;margin-top:18px;gap:12px}.call-action-btn{width:60px;height:60px;border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 14px 40px #0009;transition:transform .12s ease}.call-btn{background:linear-gradient(180deg,#34c759,#16a34a);box-shadow:0 12px 36px #34c75938}.end-btn{background:linear-gradient(180deg,#ff3b30,#e53935);box-shadow:0 12px 36px #ff3b3038}.cancel-btn{background:#fff0;border:1px solid rgba(255,255,255,0)}.icon{width:34px;height:34px;fill:#fff}.home-indicator{position:absolute;bottom:10px;left:50%;transform:translate(-50%);width:134px;height:6px;border-radius:999px;background:#ffffff1f;box-shadow:0 2px 6px #0009,inset 0 1px #ffffff0f;z-index:30}.connection-status{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:12px;z-index:40}.connection-status.online{color:#ff3b30!important}.connection-status.offline{color:#34c759!important}.connection-status .network-icon,.connection-status .network-icon path{color:inherit;fill:currentColor!important}.status-dot{width:9px;height:9px;border-radius:50%}.status-dot.online{background:#34c759}.status-dot.offline{background:#ff3b30}.audio-visualizer{display:flex;align-items:flex-end;justify-content:center;gap:6px;width:100%;height:84px;min-height:56px;max-height:120px;padding:12px 0;overflow:hidden}.audio-visualizer .bar{width:4px;border-radius:2px;height:28px;min-height:6px;transition:height .16s ease,background .16s ease;opacity:.95;background:transparent}.phone-container.recording-mode .audio-visualizer .bar.recording,.audio-visualizer .bar.recording{background:linear-gradient(180deg,#ff3b30,#e53935)!important}.phone-container.playback-mode .audio-visualizer .bar.playback,.audio-visualizer .bar.playback{background:linear-gradient(180deg,#fff,#ddd)!important}.audio-visualizer.recording-mode{background:radial-gradient(ellipse at center,rgba(255,59,48,.06) 0%,transparent 70%)}.audio-visualizer.playback-mode{background:radial-gradient(ellipse at center,rgba(52,199,89,.06) 0%,transparent 70%)}.timeline-scrollable::-webkit-scrollbar,.chunk-timeline-scrollable::-webkit-scrollbar{height:6px}.timeline-scrollable::-webkit-scrollbar-track,.chunk-timeline-scrollable::-webkit-scrollbar-track{background:#0000001a;border-radius:3px}.timeline-scrollable::-webkit-scrollbar-thumb,.chunk-timeline-scrollable::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.timeline-scrollable::-webkit-scrollbar-thumb:hover,.chunk-timeline-scrollable::-webkit-scrollbar-thumb:hover{background:#ffffff80}@media(max-width:360px){.caller-number{font-size:34px}.home-indicator{width:110px}}