.calls-app { height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #000; }
.calls-panel { min-height: 0; flex: 1; overflow-y: auto; }
.call-history { padding-top: 5px; }
.call-row { width: calc(100% - 17px); min-height: 65px; display: flex; align-items: center; gap: 12px; margin-left: 17px; padding: 8px 17px 8px 0; border-bottom: 1px solid #38383a; text-align: left; }
.call-direction { width: 17px; height: 17px; color: #8e8e93; }
.call-row.missed .call-number { color: #ff453a; }
.call-row-main { min-width: 0; flex: 1; }
.call-number { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.15px; }
.call-meta { display: block; margin-top: 2px; color: #8e8e93; font-size: 12px; text-transform: capitalize; }
.call-time { color: #8e8e93; font-size: 11px; }
.calls-tabs { flex: 0 0 63px; display: flex; align-items: center; justify-content: space-around; padding: 5px 65px 8px; border-top: 1px solid #2c2c2e; background: #0b0b0ceF; backdrop-filter: blur(25px); }
.calls-tabs button { min-width: 58px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #8e8e93; font-size: 10px; }
.calls-tabs button.active { color: #0a84ff; }
.calls-tabs svg { width: 24px; height: 24px; fill: currentColor; }
.keypad-panel { text-align: center; padding: 0 49px 4px; }
.keypad-panel input { width: 100%; height: 61px; background: transparent; text-align: center; font-size: 29px; font-weight: 350; letter-spacing: .7px; }
.keypad-panel input::placeholder { color: #38383a; }
.dial-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px 15px; }
.dial-key { aspect-ratio: 1; border-radius: 50%; background: #242426; font-size: 23px; transition: transform .28s cubic-bezier(.18, 1.7, .3, 1), background .15s ease; }
.dial-key:active { transform: scale(.82); background: #505054; }
.dial-call { width: 58px; height: 58px; margin-top: 13px; padding: 17px; border-radius: 50%; background: #30d158; }
.dial-delete { display: block; margin: 5px auto 0; color: #0a84ff; font-size: 11px; }
@media (max-height: 850px) { .calls-tabs { flex-basis: 55px; } .calls-tabs svg { width: 21px; height: 21px; } .dial-pad { gap: 5px 14px; } .dial-call { width: 49px; height: 49px; margin-top: 7px; padding: 14px; } .keypad-panel input { height: 48px; } }