:root{--canvas:#f0f4f6;--surface:#ffffff;--surface-2:#edf2f5;--line:#dfe6eb;--ink:#17212b;--muted:#798793;--blue:#168dcc;--blue-soft:#e7f4fb;--green:#16ae66;--red:#ee3f50;--font:ui-sans-serif,system-ui,"Segoe UI","Sarabun","Noto Sans Thai",Arial,sans-serif}*{box-sizing:border-box}body,html{min-height:100%;margin:0}body{overflow-x:hidden;color:var(--ink);background:var(--canvas);font-family:var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}button{font:inherit}a,button{-webkit-tap-highlight-color:transparent}.app-shell,.dialer-screen{width:100%;min-height:100svh;min-height:100dvh}.dialer-screen{display:flex;flex-direction:column;background:var(--canvas)}.brand-bar{width:100%;min-height:70px;flex:0 0 auto;justify-content:space-between;gap:18px;padding:max(12px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) 12px max(24px,env(safe-area-inset-left));border-bottom:1px solid var(--line);background:var(--surface)}.brand-bar,.brand-lockup{display:flex;align-items:center}.brand-lockup{min-width:0;gap:11px}.brand-lockup img{width:34px;height:34px;flex:0 0 auto;border-radius:9px}.brand-lockup div{min-width:0;display:grid}.brand-lockup strong{color:var(--ink);font-size:14px;line-height:1.15;font-weight:800}.brand-lockup span{margin-top:2px;line-height:1.25}.brand-lockup span,.connection-badge{color:var(--muted);font-size:11px;white-space:nowrap}.connection-badge{min-width:0;display:inline-flex;align-items:center;gap:8px;font-weight:700}.connection-badge i{width:7px;height:7px;flex:0 0 auto;border-radius:50%;background:#a3adb6}.connection-badge.is-connecting i{background:var(--blue);box-shadow:0 0 0 4px rgba(66,165,233,.14)}.connection-badge.is-live i{background:var(--green);box-shadow:0 0 0 4px rgba(25,184,107,.14)}.dialer-stage{width:min(100%,420px);min-height:calc(100dvh - 70px);display:flex;flex:1 0 auto;flex-direction:column;align-items:center;justify-content:center;margin:0 auto;padding:24px 24px max(24px,env(safe-area-inset-bottom));background:var(--surface)}.dialer-stage.is-active{width:100%;max-width:none;justify-content:flex-start;background:var(--surface)}.dialer-stage.is-active .caller-identity{width:100vw;margin-top:-24px;padding:28px 24px 20px;border-bottom:1px solid #dce8ed;background:#eaf6fa}.caller-identity{display:grid;justify-items:center;text-align:center}.brand-avatar{position:relative;isolation:isolate;width:88px;height:88px;display:grid;place-items:center;border:1px solid #d5e0e7;border-radius:50%;background:var(--surface);box-shadow:0 16px 40px rgba(37,59,72,.11);transition:width .16s ease,height .16s ease}.brand-avatar:after{content:"";position:absolute;inset:7px;z-index:-1;border-radius:50%;background:#ffffff}.brand-avatar img{width:70px;height:70px;border-radius:50%;object-fit:cover}.avatar-pulse{position:absolute;z-index:-2;inset:-1px;border:2px solid rgba(66,165,233,.5);border-radius:50%;opacity:0}.brand-avatar.is-calling .avatar-pulse{animation:call-pulse 1.65s ease-out infinite}.brand-avatar.is-live{border-color:rgba(25,184,107,.75);box-shadow:0 18px 44px rgba(25,184,107,.13)}.dialer-stage.is-idle{width:100%;max-width:none;padding:0;background:var(--surface)}.dialer-stage.is-idle .caller-identity{width:100%;min-height:55dvh;align-content:end;padding:48px 24px 54px;background:#eaf6fa}.dialer-stage.is-idle .brand-avatar{width:104px;height:104px;border-color:#cfe1e8;box-shadow:0 16px 36px rgba(41,83,101,.12)}.dialer-stage.is-idle .brand-avatar img{width:84px;height:84px}.caller-identity h1{margin:15px 0 0;color:var(--ink);font-size:21px;line-height:1.25;font-weight:750;letter-spacing:0}.dialer-stage.is-idle .caller-identity h1{margin-top:22px;font-size:26px}.call-detail{min-height:23px;display:flex;align-items:center;gap:9px;margin-top:3px;color:var(--muted);font-size:12px;font-weight:650}.call-detail time{padding-left:9px;border-left:1px solid #cbd5dc;color:var(--ink);font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:800}.dialer-stage.is-idle .call-detail{min-height:30px;margin-top:9px;padding:5px 12px;border:1px solid #bedfcd;border-radius:15px;background:rgba(255,255,255,.76);color:#16784a;font-size:11px}.dial-display{width:100%;min-height:34px;display:grid;place-items:center;margin:15px 0 12px;color:#84919c;font-size:12px;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;font-weight:650;text-align:center}.dial-display.has-value{color:#087fba;font-size:19px;font-weight:800}.sound-unlock{min-height:34px;display:inline-flex;align-items:center;gap:8px;padding:5px 14px;border:1px solid #b9dced;border-radius:17px;background:var(--blue-soft);color:#0879b3;font-size:12px;font-weight:750;cursor:pointer}.sound-unlock svg{width:17px;height:17px;fill:currentColor}.sound-unlock .icon-line{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1.8}.keypad{width:min(100%,310px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:11px 27px;gap:11px 27px}.key{width:66px;height:66px;display:grid;place-items:center;align-content:center;justify-self:center;grid-gap:3px;gap:3px;padding:0;border:1px solid transparent;border-radius:50%;background:var(--surface-2);color:var(--ink);box-shadow:0 5px 14px rgba(39,58,70,.06);cursor:pointer;transition:transform 80ms ease,background-color 80ms ease}.key:active{background:#e8f1f5;transform:scale(.92)}.key b{font-size:23px;line-height:1;font-weight:650}.key i{min-height:8px;color:#7b8995;font-size:8px;line-height:1;font-style:normal;font-weight:700;letter-spacing:0}.call-controls{width:min(100%,310px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;grid-gap:27px;gap:27px;margin-top:22px}.start-call-panel{display:grid;justify-items:center;width:100%;min-height:calc(45dvh - 70px);align-content:start;margin-top:0;padding:42px 24px max(28px,env(safe-area-inset-bottom));border-top:1px solid #dce8ed;background:var(--surface)}.start-call-button{width:min(100%,320px);min-height:76px;display:flex;align-items:center;gap:14px;padding:10px 18px 10px 12px;border:0;border-radius:12px;background:#163847;color:#ffffff;box-shadow:0 14px 30px rgba(22,56,71,.18);cursor:pointer;text-align:left;transition:transform 80ms ease,box-shadow .12s ease}.start-call-button:active{transform:scale(.98);box-shadow:0 8px 18px rgba(22,56,71,.15)}.start-call-button:disabled{cursor:default;filter:grayscale(.4);opacity:.5}.start-call-icon{width:50px;height:50px;display:grid;flex:0 0 auto;place-items:center;border-radius:50%;background:var(--green)}.start-call-icon svg{width:25px;height:25px;fill:currentColor}.start-call-copy{min-width:0;display:grid;grid-gap:2px;gap:2px}.start-call-copy strong{font-size:15px;line-height:1.3;font-weight:800}.start-call-copy small{color:rgba(255,255,255,.82);font-size:11px;line-height:1.35;font-weight:600}.call-action,.secondary-control{min-width:0;display:grid;justify-items:center;grid-gap:7px;gap:7px;padding:0;border:0;background:transparent;color:var(--muted);cursor:pointer}.call-action>span,.secondary-control>span{width:54px;height:54px;display:grid;place-items:center;border-radius:50%;transition:transform 80ms ease}.secondary-control>span{border:1px solid #d9e2e8;background:var(--surface);color:#667580}.secondary-control.is-active>span{border-color:#b7dceb;background:var(--blue-soft);color:#087fba}.secondary-control:disabled{cursor:default;opacity:.35}.call-action:disabled{cursor:default;opacity:.45}.call-action svg,.secondary-control svg{width:24px;height:24px;fill:currentColor}.secondary-control .icon-line{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.call-action>span{width:62px;height:62px;color:#ffffff}.call-action.is-hangup>span{background:var(--red);box-shadow:0 13px 28px rgba(240,68,85,.3)}.call-action.is-call>span{background:var(--green);box-shadow:0 13px 28px rgba(25,184,107,.26)}.call-action:active>span,.secondary-control:active>span{transform:scale(.93)}.call-action small,.secondary-control small{width:100%;min-height:16px;color:#687682;font-size:11px;line-height:1.3;font-weight:650;text-align:center;white-space:nowrap}.call-error{max-width:320px;margin:12px 0 0;color:#c33241;font-size:11px;line-height:1.45;text-align:center}@keyframes call-pulse{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.42)}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (min-width:700px) and (min-height:760px){.dialer-stage{width:min(100%,500px);padding-top:34px;padding-bottom:34px}.brand-avatar{width:98px;height:98px}.brand-avatar img{width:78px;height:78px}.call-controls,.keypad{width:344px}.keypad{gap:13px 28px}.key{width:72px;height:72px}}@media (max-width:520px){.brand-bar{min-height:66px;padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left))}.dialer-stage{min-height:calc(100dvh - 66px);padding-right:max(18px,env(safe-area-inset-right));padding-left:max(18px,env(safe-area-inset-left))}.connection-badge{max-width:122px;overflow:hidden;text-overflow:ellipsis}}@media (max-height:720px){.dialer-stage{justify-content:flex-start;padding-top:14px;padding-bottom:max(11px,env(safe-area-inset-bottom))}.dialer-stage.is-active .caller-identity{margin-top:-14px;padding:12px 20px 9px}.brand-avatar{width:62px;height:62px}.brand-avatar img{width:50px;height:50px}.brand-avatar:after{inset:5px}.caller-identity h1{margin-top:7px;font-size:18px}.dial-display{min-height:25px;margin:5px 0}.keypad{width:272px;gap:5px 20px}.key{width:52px;height:52px}.key b{font-size:20px}.call-controls{width:272px;gap:20px;margin-top:9px}.secondary-control>span{width:46px;height:46px}.call-action>span{width:52px;height:52px}}@media (prefers-reduced-motion:reduce){.brand-avatar.is-calling .avatar-pulse{animation:none}.call-action>span,.key,.secondary-control>span{transition:none}}