/* ============================================================ BEAM — application stylesheet (production) Contains ONLY app styles. All prototype-viewer CSS (sidebar, device frames, canvas, zoom) has been removed. Fonts (DM Sans + Syne) are loaded via the entry HTML . ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} html,body{height:100%;width:100%;overflow:hidden;background:#0d0d12;color:#f0f0ff; font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} /* Full-viewport application root. The app renders its current screen here. */ #app{position:relative;height:100vh;width:100vw;height:100dvh;overflow:hidden;} /* Inputs inherit the app font. */ input,textarea,button,select{font-family:inherit;} button,input,textarea,select,a,[onclick]{-webkit-app-region:no-drag;} /* Frameless desktop shell controls. Electron's native frame is disabled, so these are the only window controls shipped in the desktop app. */ .beam-app-shell{height:100%;display:flex;flex-direction:column;min-width:0;overflow:hidden;} .beam-content{flex:1;min-height:0;min-width:0;position:relative;overflow:hidden;isolation:isolate;} .beam-density{zoom:var(--beam-scale,1);width:100%;height:100%;position:relative;overflow:hidden;} .beam-window-bar{height:36px;flex:0 0 36px;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid;user-select:none;-webkit-app-region:drag;font-family:'DM Sans',sans-serif;} .beam-window-title{padding:0 14px;font-size:12px;font-weight:600;letter-spacing:0;} .beam-window-controls{height:auto;display:flex;flex:0 0 auto;align-self:stretch;margin-left:auto;-webkit-app-region:no-drag;} .beam-main-header,.beam-call-header{-webkit-app-region:drag;user-select:none;position:relative;z-index:3;} .beam-main-header>div,.beam-call-header>div{-webkit-app-region:no-drag;} .beam-main-header{height:56px;flex-shrink:0;display:grid;grid-template-columns:minmax(230px,1fr) minmax(180px,440px) minmax(230px,1fr);gap:16px;border-bottom:1px solid var(--header-border);} .beam-header-left{display:flex;align-items:center;gap:16px;padding-left:16px;min-width:0;overflow:hidden;} .beam-header-brand{display:flex;align-items:center;gap:9px;flex-shrink:0;font-family:'Syne',sans-serif;font-weight:700;} .beam-brand-mark{width:30px;height:30px;display:grid;place-items:center;font-size:16px;color:#fff;} .beam-brand-word{font-size:17px;} .beam-header-account{display:flex;align-items:center;gap:8px;min-width:0;border:0;border-radius:8px;padding:4px 6px;color:inherit;background:transparent;cursor:pointer;} .beam-header-account:hover{background:var(--header-surface);} .beam-header-account>svg{width:13px;height:13px;flex-shrink:0;color:var(--header-muted);} .beam-main-header .beam-header-profile{max-width:120px;min-width:0;text-align:left;display:flex;flex-direction:column;gap:2px;} .beam-main-header .beam-header-profile>*{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .beam-main-header .beam-header-profile>span{font-size:12px;font-weight:600;} .beam-main-header .beam-header-profile>small{font-size:10px;color:var(--header-muted);} .beam-header-search{height:36px;align-self:center;min-width:0;display:flex;align-items:center;gap:10px;padding:0 10px;background:var(--header-surface);border:1px solid var(--header-border);border-radius:8px;} .beam-header-search>svg{width:16px;height:16px;flex-shrink:0;color:var(--header-muted);} .beam-header-search input{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;color:inherit;font-size:13px;direction:ltr;text-align:left;} .beam-header-search input::placeholder{color:var(--header-muted);} .beam-header-search button{border:0;background:transparent;color:var(--header-muted);width:24px;height:28px;display:grid;place-items:center;cursor:pointer;} .beam-header-search button svg{width:14px;height:14px;} .beam-header-search:focus-within{border-color:var(--header-focus);} .beam-header-account:focus-visible,.beam-header-search button:focus-visible{outline:2px solid var(--header-focus);outline-offset:1px;} .beam-header-right{display:flex;justify-content:flex-end;align-self:stretch;min-width:0;} @media(max-width:1100px){.beam-main-header{grid-template-columns:minmax(150px,1fr) minmax(180px,360px) minmax(150px,1fr);gap:12px;}.beam-main-header .beam-header-profile{display:none;}.beam-header-left{gap:10px;}} @media(max-width:720px){.beam-main-header{grid-template-columns:90px minmax(100px,1fr) auto;gap:8px;}.beam-brand-word,.beam-header-account>svg{display:none;}.beam-header-left{gap:6px;padding-left:8px;}.beam-header-account{padding:3px;}.beam-window-control{width:38px;}} .beam-window-control{width:46px;height:100%;border:0;border-radius:0;background:transparent;color:inherit;display:flex;align-items:center;justify-content:center;cursor:pointer;} .beam-window-control svg{width:15px;height:15px;} .beam-window-control:hover{background:var(--beam-window-hover,rgba(128,128,128,.16));} .beam-window-control-close:hover{background:#c62828;color:#fff;} .beam-window-control:focus-visible,.beam-call-control:focus-visible,.beam-call-view-control:focus-visible{outline:2px solid #38bdf8;outline-offset:-3px;} .beam-header-profile{max-width:180px;min-width:0;text-align:right;} .beam-header-profile>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .beam-call{height:100%;min-height:0;display:grid;grid-template-rows:60px minmax(0,1fr) 92px;background:#09090b;color:#f4f4f5;font-family:'DM Sans',sans-serif;overflow:hidden;} .beam-call-header{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:16px;padding:0 0 0 20px;border-bottom:1px solid #ffffff12;background:#101012;} .beam-call-person{display:flex;align-items:center;gap:10px;min-width:0;} .beam-call-person-text{min-width:0;display:flex;flex-direction:column;gap:3px;} .beam-call-person-text strong{font-size:14px;font-weight:600;} .beam-call-person-text span{font-size:11px;color:#a1a1aa;} .beam-call-person-text>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .beam-call-status{display:flex;align-items:center;gap:8px;font-size:12px;color:#a1a1aa;white-space:nowrap;} .beam-call-status-dot{width:6px;height:6px;border-radius:50%;background:#a1a1aa;} .beam-call-status-dot.is-connected{background:#4ade80;} .beam-call-status .beam-call-clock{margin-left:6px;min-width:44px;font-variant-numeric:tabular-nums;color:#e4e4e7;} .beam-call-view-controls{display:flex;align-self:stretch;} .beam-call.is-fullscreen.is-immersive{grid-template-rows:0 minmax(0,1fr) 0;} .beam-call.is-immersive>.beam-call-header,.beam-call.is-immersive>.beam-call-toolbar{visibility:hidden;overflow:hidden;padding:0;border:0;} .beam-call.is-immersive .beam-call-previews{visibility:hidden;} .beam-call-view-control{width:36px;height:36px;border:1px solid #ffffff16;border-radius:8px;color:#e4e4e7;background:#ffffff08;cursor:pointer;display:grid;place-items:center;} .beam-call-view-control:hover{background:#ffffff18;} .beam-call-stage{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden;} .beam-desktop-voice{max-width:min(70%,480px);} .beam-voice-name{font-size:24px;font-weight:700;font-family:'Syne',sans-serif;margin-top:18px;overflow-wrap:anywhere;} .beam-call-previews{position:absolute;bottom:16px;right:16px;display:flex;align-items:flex-end;gap:10px;max-width:55%;} .beam-call-preview{width:180px;min-width:0;flex:1 1 0;aspect-ratio:16/10;border-radius:8px;overflow:hidden;border:1px solid #ffffff30;background:#08080d;position:relative;} .beam-call-preview-label{position:absolute;left:0;bottom:0;right:0;padding:6px 8px;font-size:11px;color:#fff;background:#0009;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} .beam-call-toolbar{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px 16px;border-top:1px solid #ffffff12;background:#101012;} .beam-call-control{width:68px;height:70px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;flex:0 0 auto;border:0;border-radius:8px;padding:0;background:transparent;color:#d4d4d8;font:500 11px 'DM Sans',sans-serif;cursor:pointer;} .beam-call-control-icon{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;corner-shape:squircle;background:#ffffff12;border:1px solid #ffffff10;box-sizing:border-box;} .beam-call-control:hover .beam-call-control-icon{background:#ffffff22;} .beam-call-control.is-active .beam-call-control-icon{background:#e4e4e7;color:#18181b;} .beam-call-control.is-end .beam-call-control-icon{background:#dc2626;color:#fff;border-color:#ef4444;} .beam-call-control.is-end:hover .beam-call-control-icon{background:#b91c1c;} .beam-call-control.is-end svg{transform:rotate(135deg);} @media(max-width:700px){.beam-call-header{padding:0 0 0 12px;gap:10px;grid-template-columns:minmax(0,1fr) auto auto;}.beam-call-status>span:nth-child(2){display:none;}.beam-call-toolbar{gap:6px;padding:8px;}.beam-call-control{width:58px;}.beam-call-previews{max-width:62%;right:10px;bottom:10px;gap:6px;}.beam-call-preview{width:130px;}} /* Scrollbars */ ::-webkit-scrollbar{width:3px;height:3px;}::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px;} /* Toast notifications */ .ti{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 12px;border-radius:14px;background:rgba(18,18,26,0.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.1);box-shadow:0 4px 24px rgba(0,0,0,.6);pointer-events:all;min-width:200px;max-width:320px;font-family:'DM Sans',sans-serif;} .ti-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .ti-msg{font-size:13px;font-weight:500;color:#f0f0f0;flex:1;line-height:1.3;} .ti-x{width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;cursor:pointer;} #tc{position:absolute;top:16px;left:0;right:0;display:flex;flex-direction:column;gap:8px;z-index:9999;pointer-events:none;align-items:center;padding:0 16px;} /* Animations used by the app (pulse rings, loading shimmer) */ @keyframes beamPulse{0%{transform:scale(1);opacity:.8;}100%{transform:scale(1.25);opacity:0;}} @keyframes beamShimmer{0%{background-position:-400px 0;}100%{background-position:400px 0;}} @keyframes beamVoiceRing{0%{transform:scale(.92);opacity:.38;}70%,100%{transform:scale(1.38);opacity:0;}} @keyframes beamVoiceBar{0%,100%{height:4px;opacity:.35;}50%{height:20px;opacity:.92;}} @keyframes beamVoiceIdle{0%,100%{transform:scale(1);opacity:.28;}50%{transform:scale(1.035);opacity:.44;}} .beam-voice-ring{position:absolute;inset:-10px;border:2px solid rgba(255,255,255,.25);border-radius:50%;pointer-events:none;opacity:0;} .is-speaking .beam-voice-ring-a{animation:beamVoiceRing 1.45s ease-out infinite;} .is-speaking .beam-voice-ring-b{animation:beamVoiceRing 1.45s .72s ease-out infinite;} .is-idle .beam-voice-ring-a{animation:beamVoiceIdle 3.2s ease-in-out infinite;opacity:.28;} .beam-voice-wave{height:24px;display:flex;align-items:center;justify-content:center;gap:3px;} .beam-voice-wave i{display:block;width:3px;height:4px;border-radius:3px;background:rgba(255,255,255,.76);transform-origin:center;} .beam-voice-wave.is-speaking i{animation:beamVoiceBar .72s ease-in-out infinite;} .beam-voice-wave.is-idle i{opacity:.25;height:3px;transition:height .25s,opacity .25s;}