:root{--bg-1: #e8fbf3;--bg-2: #bff3e1;--card: #ffffff;--ink: #10121a;--ink-soft: #6a7285;--call: #22c55e;--hang: #ef4444;--accent: #4cc9f0;--r-lg: 22px;--r-md: 16px;--r-sm: 12px;--shadow-lg: 0 20px 40px rgba(16,18,26,.18);--shadow-md: 0 12px 24px rgba(16,18,26,.14);--shadow-key: 0 10px 20px rgba(16,18,26,.14), inset 0 1px 0 rgba(255,255,255,.9);--space: clamp(12px, 1.6vmin, 18px);--key: clamp(64px, 9.6vmin, 88px);--key-font: clamp(20px, 4.2vmin, 28px);--sub-font: clamp(10px, 1.9vmin, 12px);--display: clamp(28px, 5.2vmin, 44px)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;font:500 16px/1.4 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji;color:var(--ink);background:radial-gradient(1200px 900px at 10% 0%,var(--bg-1),var(--bg-2));-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{min-height:100dvh;padding:calc(var(--space) + env(safe-area-inset-top)) calc(var(--space) + env(safe-area-inset-right)) calc(var(--space) + env(safe-area-inset-bottom)) calc(var(--space) + env(safe-area-inset-left));display:grid;place-items:center}.app-container{width:min(1100px,96vw);display:grid;grid-template-columns:minmax(280px,420px) minmax(320px,1fr);gap:calc(var(--space) * 1.2)}@media (max-width: 960px){.app-container{grid-template-columns:1fr}}.dialpad-panel,.messenger-panel{background:color-mix(in oklab,var(--card) 92%,transparent);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:calc(var(--space) * 1.4);backdrop-filter:saturate(180%) blur(8px);-webkit-backdrop-filter:saturate(180%) blur(8px)}.dialpad{display:grid;gap:calc(var(--space) * 1.2)}.display-screen{background:linear-gradient(0deg,#fffc,#ffffffeb);border:1px solid rgba(16,18,26,.06);border-radius:var(--r-md);padding:calc(var(--space) * 1.1);text-align:center;box-shadow:0 6px 16px #10121a14,inset 0 1px #ffffffe6}#call-status{font-weight:700;letter-spacing:.2px;color:var(--ink-soft);margin-bottom:4px}#phone-number-input{width:100%;border:none;outline:none;background:transparent;color:var(--ink);text-align:center;font-weight:800;font-size:var(--display);letter-spacing:1.2px;caret-color:transparent}.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--space) * .9)}.key{display:grid;place-items:center;height:var(--key);border-radius:999px;border:0;background:var(--card);color:var(--ink);font-weight:800;font-size:var(--key-font);box-shadow:var(--shadow-key);cursor:pointer;transition:transform .06s ease,box-shadow .06s ease,background .2s ease;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}.key span{display:block;margin-top:2px;font-size:var(--sub-font);font-weight:700;color:var(--ink-soft)}.key:active{transform:translateY(1px);box-shadow:0 6px 12px #10121a24,inset 0 1px #ffffffe6}.actions{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:calc(var(--space) * 1.2);margin-top:calc(var(--space) * .5)}.action-btn{height:clamp(52px,8.6vmin,66px);width:clamp(52px,8.6vmin,66px);border-radius:999px;border:0;display:grid;place-items:center;background:var(--card);color:var(--ink);box-shadow:var(--shadow-key);cursor:pointer;transition:transform .06s ease,box-shadow .06s ease}.action-btn:active{transform:translateY(1px)}.plus-btn{justify-self:start}.call-btn,.hangup-btn{justify-self:center;height:clamp(64px,10.5vmin,80px);width:clamp(64px,10.5vmin,80px);border-radius:999px;color:#fff;font-weight:800;letter-spacing:.3px;border:none;box-shadow:0 14px 30px #22c55e59}.call-btn{background:linear-gradient(180deg,color-mix(in oklab,var(--call) 90%,#fff 10%),var(--call))}.hangup-btn{background:linear-gradient(180deg,color-mix(in oklab,var(--hang) 90%,#fff 10%),var(--hang));box-shadow:0 14px 30px #ef444459}.backspace-btn{justify-self:end}.messenger-header h2{margin:0 0 calc(var(--space) * .8);font-weight:800;letter-spacing:.2px}.received-messages{background:#ffffffd9;border:1px solid rgba(16,18,26,.06);border-radius:var(--r-md);padding:calc(var(--space) * 1);min-height:clamp(160px,30vmin,300px);max-height:48vh;overflow:auto;box-shadow:inset 0 1px #ffffffe6}.message-bubble{background:#fff;border:1px solid rgba(16,18,26,.06);border-radius:14px;padding:10px 12px;margin-bottom:10px;box-shadow:0 6px 14px #10121a0f}.message-header{color:var(--ink-soft);font-size:13px;margin-bottom:4px}.message-body{font-size:15px;font-weight:600}.message-footer{color:var(--ink-soft);font-size:12px;margin-top:4px}.send-message-form{display:grid;gap:10px;margin-top:var(--space)}.send-message-form input,.send-message-form textarea{border-radius:14px;border:1px solid rgba(16,18,26,.08);padding:12px 14px;background:#fff;box-shadow:inset 0 1px #ffffffe6;font-size:16px}.send-message-form button{justify-self:end;padding:12px 18px;border-radius:14px;border:none;color:#0b1220;background:linear-gradient(180deg,#7dd3fc,#38bdf8);font-weight:800;box-shadow:0 10px 20px #38bdf859;cursor:pointer}@media (max-width: 560px){.actions{position:sticky;bottom:calc(var(--space) + env(safe-area-inset-bottom));padding-top:8px;margin-top:2px;z-index:5}.received-messages{max-height:38vh}}button,.key,.action-btn{outline:none}button:focus-visible,.key:focus-visible,.action-btn:focus-visible{box-shadow:0 0 0 3px color-mix(in oklab,var(--accent) 60%,#fff 40%),var(--shadow-md)}@media (prefers-color-scheme: dark){:root{--bg-1: #0f1622;--bg-2: #15202b;--card: #151a23;--ink: #e7ecf5;--ink-soft: #a7b0c2}body{background:radial-gradient(1200px 900px at 10% 0%,#0f1622,#0b1320)}.display-screen,.received-messages,.message-bubble,.send-message-form input,.send-message-form textarea{background:color-mix(in oklab,var(--card) 96%,transparent);border-color:#ffffff0f;color:var(--ink)}.key{background:color-mix(in oklab,var(--card) 98%,transparent);color:var(--ink)}}