/* Web chat shell from Figma 26789:103663; the shared call state stays in app.js. */
.web-sidebar,.web-messages,.web-chat-surface,.web-chat-fade,.web-header-tabs,.web-plan,.web-kiki-profile,.web-call-icon,.web-attach-icon,.web-composer-tools,.web-composer-right,.web-send-icon{display:none}
body[data-platform=web] .phone{width:1600px;height:1040px;border-radius:0;background:#fafafa;box-shadow:0 20px 60px -35px #26362935;--web-call-center:922px}
body[data-platform=web] .statusbar,body[data-platform=web] .home-indicator,body[data-platform=web] .top-fade,body[data-platform=web] #messages,body[data-platform=web] .mobile-call-icon,body[data-platform=web] .mobile-attach-icon{display:none}
body[data-platform=web] .web-sidebar{display:flex;flex-direction:column;position:absolute;z-index:15;inset:12px auto 12px 0;width:256px;padding:16px 14px;background:#fafafa}
.web-brand{display:flex;align-items:center;gap:8px;height:32px;font-size:18px;font-weight:500;margin-bottom:16px}
.web-team-logo{width:32px;height:32px;display:grid;place-items:center;background:white;border-radius:8px;margin-right:4px}
.web-search{height:40px;padding:12px;display:flex;align-items:center;gap:10px;border:1px solid #00000014;border-radius:10px;background:white;margin-bottom:16px}
.web-search input{width:100%;min-width:0;background:none;border:0;font-size:14px;outline:none}
.web-search input::placeholder{color:#686868b8}
.web-menu{display:flex;flex-direction:column;gap:8px;padding-bottom:16px;border-bottom:1px solid #00000014}
.web-menu-row{height:36px;display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:14px;border-radius:10px}
.web-menu-row.selected{background:#0000000a}
.web-assistant-icon{width:20px;height:20px;object-fit:contain}
.web-menu-icon{width:20px;height:20px;display:grid;place-items:center}
.web-badge{margin-left:auto;border-radius:50px;background:#2b7fff;color:white;font-size:11px;min-width:15px;text-align:center;line-height:15px}
.web-threads{padding:16px 0 12px}.web-thread-heading,.web-threads button{display:flex;align-items:center;gap:6px;padding:8px 0;font-size:16px;height:40px}
.web-threads button{font-size:14px;gap:8px}
.web-section-label{font-size:14px;line-height:20px;color:#686868b8;padding:8px;margin:8px 0 0}
.web-scheduled{display:flex;gap:4px;padding:8px;align-items:center;height:64px}
.web-clock{width:32px;height:32px;border-radius:9px;background:#00bc7d;display:grid;place-items:center;flex-shrink:0}
.web-scheduled strong,.web-recent strong{display:block;font-size:14px;line-height:20px;font-weight:500}
.web-scheduled small{display:flex;align-items:center;font-size:12px;color:#686868b8;line-height:16px;gap:4px}
.web-apps{display:flex;align-items:center;gap:2px;padding:2px 4px;background:#e5e5e5;border-radius:16px}
.web-outlook{width:12px;height:12px;display:grid;place-items:center;mask:url('assets/web/9ea18.svg') center / 12px 12px no-repeat}
.web-outlook img{width:10.435px;height:9.88px;object-fit:contain}
.web-recent{display:flex;justify-content:space-between;align-items:center;padding:8px;height:48px;margin-bottom:6px}
.web-recent small{display:flex;align-items:center;gap:6px;color:#68686885;font-size:12px;line-height:16px}
.web-sidebar-bottom{margin-top:auto;padding:16px 4px 8px;border-top:1px solid #00000014;display:flex;align-items:center;gap:8px}
.web-account-photo{width:36px;height:36px;border-radius:50%;object-fit:cover}
.web-sidebar-bottom strong{display:block;font-size:14px;line-height:20px;font-weight:500}.web-sidebar-bottom small{display:block;font-size:12px;line-height:16px;color:#686868b8}
.web-account-layout{margin-left:auto;opacity:.65}
body[data-platform=web] .web-chat-surface{display:block;position:absolute;inset:12px 12px 12px 256px;border:1px solid #00000014;background:white;border-radius:16px;box-shadow:0 1px 3px #0000000d;pointer-events:none}
body[data-platform=web] .web-messages{display:block;position:absolute;left:544px;top:12px;width:756px;bottom:160px;overflow:auto;scrollbar-width:none;overscroll-behavior:contain}
.web-conversation{display:flex;flex-direction:column;align-items:flex-start;position:relative;padding-bottom:24px;padding-top:48px}
.web-bubble{padding:12px;font-size:16px;line-height:24px;background:rgba(229,229,229,.72);border-radius:24px;width:fit-content;max-width:596px}
.web-user{align-self:flex-end;background:#dbeafe;padding:12px 16px}
.web-history-request{position:absolute;top:-40px;right:0;height:72px;overflow:hidden}
.web-history{width:596px;height:72px;overflow:hidden;margin-bottom:8px}
.web-room{display:inline-flex;align-items:center;gap:4px;color:#2b7fff;text-decoration:underline dotted;white-space:nowrap}
.web-project{display:flex;gap:10px;align-items:center;padding:12px;background:rgba(229,229,229,.72);border-radius:24px;height:64px;text-align:left}
.web-file{width:36px;height:36px;display:grid;place-items:center;background:#fff;border-radius:10px}
.web-project strong{display:block;font-size:16px;line-height:24px;font-weight:500}.web-project small{display:block;font-size:14px;line-height:20px;color:#686868}
.web-date{align-self:center;font-size:12px;line-height:16px;color:#929292;margin:36px 0}
.web-draft-intro{margin-top:16px;margin-bottom:8px}
.web-message-card{display:flex;flex-direction:column;gap:8px;width:596px;background:rgba(229,229,229,.72);padding:12px;border-radius:24px;font-size:16px;line-height:24px}
.web-message-body{padding:12px;border-radius:12px;background:white;font-size:14px;line-height:20px}
.web-confirmed,.web-edit-history{height:38px;border:1px solid #262626;border-radius:10px;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;font-size:14px;line-height:20px}
.web-edit-history{border:1px dashed #a1a1a1;color:#686868}
.web-sent-choice{margin:16px 0}.web-sent{display:flex;gap:6px;align-items:center}
.web-sent button{color:#2b7fff;font-size:16px;padding:0}
body[data-platform=web] #newMessages{width:756px}
body[data-platform=web] #newMessages .user{margin-left:auto;max-width:596px;width:fit-content}
body[data-platform=web] #newMessages .assistant{max-width:596px;width:fit-content}
body[data-platform=web] #newMessages .call-ended{margin:18px 0}
body[data-platform=web] .web-chat-fade{display:block;position:absolute;left:544px;top:13px;width:756px;height:132px;background:linear-gradient(174.6deg,#fff 18.65%,#ffffff00 85.5%);pointer-events:none}
body[data-platform=web] .web-header-tabs{display:flex;position:absolute;left:280px;top:24px;gap:2px;align-items:center;height:36px}
.web-header-tabs span{display:flex;gap:6px;align-items:center;padding:8px 16px;color:#686868b8;font-size:14px;line-height:20px}.web-header-tabs img{opacity:.72}
body[data-platform=web] .web-plan{display:flex;gap:8px;align-items:center;position:absolute;right:72px;top:24px;height:36px;border:1px solid #00000014;border-radius:10px;padding:8px;background:#fff;font-size:14px}
.web-plan>span{display:flex;align-items:center;gap:4px}.web-plan .web-update{padding:0 7px;height:24px;background:#262626;border-radius:10px;font-size:12px;color:#fafafa;box-shadow:inset 0 2px #ffffff29}
body[data-platform=web] .chat-nav{left:auto;right:28px;top:24px;width:36px;height:36px;padding:0}
body[data-platform=web] #closeChat{display:none}
body[data-platform=web] #startCall{width:36px;height:36px;border:1px solid #0000001a;border-radius:10px;background:#fff;box-shadow:0 1px 1px #0000000d;backdrop-filter:none}
body[data-platform=web] .web-call-icon{display:block;opacity:.8}
body[data-platform=web] .web-kiki-profile{display:block;position:absolute;left:888px;top:27px;width:68px;height:68px;background:#fff;border-radius:50%;border:1.063px solid #00000014;filter:drop-shadow(0 3.778px 7.556px #26262614)}
.web-kiki-crop{position:absolute;left:7.5px;top:0;width:54px;height:68px;mask:url('assets/web/08f3d.svg') -7.5px 0 / 68px 68px no-repeat;overflow:hidden}
.web-kiki-crop img{position:absolute;left:-16.67%;top:-2.94%;width:133.33%;height:105.88%;object-fit:fill}
body[data-platform=web] .avatar-label{display:flex;left:875.5px;top:89px;width:93px;height:54px;justify-content:center;padding:6px 12px;border:0;box-shadow:0 -1px 8px #0000000a,0 8px 20px #0000000d}
body[data-platform=web] .avatar-label span{color:#686868b8}
body[data-platform=web] .phone[data-state=chat] .avatar{opacity:0}
body[data-platform=web] .phone[data-collapsed=true] .avatar-label{left:922px;top:40px;width:auto;height:auto}
body[data-platform=web] .phone[data-collapsed=true] .web-kiki-profile{display:none}
body[data-platform=web] .composer{left:544px;bottom:28px;width:756px;height:120px;border:1px solid #00000014;border-radius:24px;padding:16px;display:block;background:white;box-shadow:0 2px 10px #2d679714;backdrop-filter:none}
body[data-platform=web] .composer input:not([type]){position:absolute;top:16px;left:16px;right:16px;width:calc(100% - 32px);height:24px;font-size:16px}
body[data-platform=web] .composer input::placeholder{color:#686868b8}
body[data-platform=web] #attach{position:absolute;left:16px;bottom:16px;width:36px;height:36px;padding:0}
body[data-platform=web] .web-attach-icon{display:block}
body[data-platform=web] .web-composer-tools{display:flex;align-items:center;position:absolute;left:56px;bottom:16px;height:36px;gap:4px}
.web-composer-tools button{display:flex;align-items:center;gap:6px;padding:8px;height:36px;font-size:14px}
.web-composer-tools button>span{display:grid;place-items:center;width:18px;height:18px;opacity:.8}
.web-select{position:relative;display:flex;align-items:center;gap:4px;height:36px;font-size:14px;padding:0 8px}
.web-select select{appearance:none;border:0;background:none;color:#262626;font:inherit;padding:0 20px 0 0;outline-offset:4px;cursor:pointer;height:36px}
.web-select>img:last-child{position:absolute;right:8px;pointer-events:none}
body[data-platform=web] .web-composer-right{display:flex;align-items:center;position:absolute;right:60px;bottom:16px;gap:8px;height:36px}
#webVoice{width:36px;height:36px;display:grid;place-items:center}
body[data-platform=web] #composeAction{position:absolute;right:16px;bottom:16px;width:36px;height:36px;background:#262626;border:1px solid #262626;border-radius:50%;padding:0}
body[data-platform=web] #composeAction:disabled{opacity:.64}
body[data-platform=web] #composeAction>img,body[data-platform=web] #composeAction>span{display:none}
body[data-platform=web] .web-send-icon{display:block;position:absolute;right:25px;bottom:25px;z-index:1;pointer-events:none}
/* Figma 26880:165171: non-modal call window above the chat. */
.web-calling-ripples,.web-avatar-base{display:none}
body[data-platform=web] .phone:not([data-state=chat]):not([data-collapsed=true]) .chat-layer{opacity:1;transform:none;pointer-events:auto}
body[data-platform=web] .phone:not([data-state=chat]) .web-kiki-profile{display:none}
body[data-platform=web] .phone:not([data-state=chat]) .avatar-label{left:922px;top:24px;width:auto;height:36px;padding:6px 12px;transform:translateX(-50%);border-radius:24px}
body[data-platform=web] .phone:not([data-state=chat]) .avatar-label strong{font-size:16px;line-height:24px}
body[data-platform=web] .phone:not([data-state=chat]) .avatar-label span{display:none}
body[data-platform=web] .phone:not([data-state=chat]) #startCall{opacity:.4}
body[data-platform=web] .call-layer{inset:76px 28px auto auto;width:375px;height:348px;z-index:20;border:0;border-radius:40px;background:#fff;overflow:hidden;box-shadow:0 8px 10px #0000001f;transform:translateY(-6px);transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out),height 300ms var(--ease-out)}
body[data-platform=web] .phone:not([data-state=chat]):not([data-collapsed=true]) .call-layer{transform:translateY(0)}
body[data-platform=web] .avatar{left:1312.5px;top:148px;z-index:21;transform:scale(.611111);filter:none}
body[data-platform=web] .phone:not([data-state=chat]):not([data-collapsed=true]) .avatar{transform:scale(.611111)}
/* Updated Figma avatar base: 88px circle with an unclipped 128px shadow asset. */
body[data-platform=web] .web-avatar-base{display:block;position:absolute;left:123.5px;top:58px;pointer-events:none}
body[data-platform=web] .phone:not([data-state=chat]):not([data-collapsed=true]) .avatar{filter:drop-shadow(0 8px 16px #26262614)}
body[data-platform=web] .call-nav{top:0;height:56px;padding:8px 16px;z-index:6}
body[data-platform=web] .call-nav .round{width:40px;height:40px;background:transparent;border:0;box-shadow:none;backdrop-filter:none}
body[data-platform=web] .call-nav img{opacity:.64;width:auto;height:auto}
body[data-platform=web] .call-title{top:180px;left:0;width:100%;transform:none}
body[data-platform=web] .call-title h2{font-size:20px;line-height:28px;letter-spacing:-.2px;font-weight:500}
body[data-platform=web] .call-status{height:24px;margin-top:4px}
body[data-platform=web] .call-title .call-status p{font-size:16px;line-height:24px;color:#686868;letter-spacing:0}
body[data-platform=web] .calling-dots{display:none}
body[data-platform=web] .call-actions{bottom:24px;gap:32px;transform:none}
body[data-platform=web] .call-actions .round{width:56px;height:56px;border:0;background:#0000000a;box-shadow:none;backdrop-filter:none}
body[data-platform=web] .call-actions .hangup{background:#fb2c36;box-shadow:0 5.091px 10.182px #0000000d}
body[data-platform=web] .call-actions img{width:auto;height:auto}
body[data-platform=web] .call-atmosphere,body[data-platform=web] .rings,body[data-platform=web] .arrival-ring,body[data-platform=web] .voice-field{display:none}
/* White mobile ripples sit on color; Web uses gray ripples on white. */
body[data-platform=web] .phone[data-state=calling] .web-calling-ripples{display:block;position:absolute;left:126px;top:54.5px;width:123px;height:123px;pointer-events:none}
body[data-platform=web] .web-calling-ring{position:absolute;left:0;top:0;transform-origin:center;animation:web-outward-ripple 2.4s linear infinite;will-change:transform,opacity}
body[data-platform=web] .web-calling-ring:nth-child(2){animation-delay:-1.2s}
@keyframes web-outward-ripple{0%{transform:scale(.86);opacity:0}16%{opacity:.85}64%{opacity:.55}100%{transform:scale(1.14);opacity:0}}
body[data-platform=web] .phone[data-captions=true][data-state=connected] .call-layer{height:600px}
body[data-platform=web] .phone[data-captions=true][data-state=connected]:not([data-collapsed=true]) .avatar{transform:scale(.611111)}
body[data-platform=web] .phone[data-captions=true][data-state=connected] .call-title{transform:none}
body[data-platform=web] .phone[data-captions=true][data-state=connected] .call-title h2{font-size:20px;line-height:28px}
body[data-platform=web] .phone[data-captions=true][data-state=connected] .call-title .call-status p{font-size:16px;line-height:24px;color:#686868}
body[data-platform=web] .phone .subtitle{left:24px;right:24px;top:256px;width:auto;height:248px;transform:none;padding:0}
body[data-platform=web] .caption-history{height:100%;padding:0 0 16px;font-size:16px;line-height:24px}
body[data-platform=web] .caption-row{padding-left:0;padding-right:20px}
body[data-platform=web] .caption-row.from-user{padding-left:20px;padding-right:0}
@media(prefers-reduced-motion:reduce){body[data-platform=web] .call-layer{transition:opacity 150ms ease;transform:none}body[data-platform=web] .web-calling-ring{animation:none;opacity:.6;transform:scale(.95)}body[data-platform=web] .web-calling-ring:nth-child(2){transform:scale(1.1);opacity:.35}}
body[data-platform=web] .call-panel{left:auto;right:28px;top:82px;width:377px}
body[data-platform=web] .home-view{inset:12px 12px 12px 256px}
body[data-platform=web] .toast{left:922px}

.web-sidebar-bottom{position:relative;border-top:0}
.web-account-divider{position:absolute;left:0;top:0}
.web-main-divider{position:absolute;left:-.5px;top:0}
body[data-platform=web] .phone[data-call-ended=true][data-state=chat] .avatar-label{left:922px;transform:translateX(-50%)}