:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;background:#f7f5f1;color:#253329}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}main{max-width:1400px;margin:auto;padding:26px 36px}.site-header{display:flex;justify-content:space-between;align-items:center;color:#78847b;font-size:13px}.logo{font-size:31px;letter-spacing:-2px;font-weight:800;text-decoration:none;color:#263d32}.logo span{color:#ed9979;margin-left:3px}.landing{padding:12vh 0 14vh;max-width:730px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#9b927f}.landing h1,.join-error h1{font-size:clamp(54px,8vw,112px);letter-spacing:-.075em;line-height:1.02;margin:22px 0}.landing em{font-weight:500;color:#df8b70;font-family:Georgia,serif}.landing p{font-size:clamp(17px,2vw,23px);line-height:1.55;color:#69776b;max-width:560px;margin-bottom:35px}.primary{display:inline-flex;gap:30px;align-items:center;justify-content:center;background:#315947;color:white;padding:17px 24px;border:0;border-radius:13px;text-decoration:none;font-weight:700}.primary:hover{background:#244636}.hint{font-size:12px;color:#889187;margin-top:20px}.room-bar{display:flex;justify-content:space-between;align-items:center;padding:28px 0 20px}.room-bar #status{font-size:20px;font-weight:700;margin-top:6px}.subtle{background:white;border:1px solid #e0e3dc;color:#315947;padding:11px 16px;border-radius:10px;font-weight:650}.call-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;min-height:600px}.stage{position:relative;background:#dce4da;border-radius:20px;overflow:hidden;min-height:600px}.guest-frame{position:absolute;inset:0;background:#d7e1d8}.guest-frame video{width:100%;height:100%;object-fit:cover}.guest-label,.self-frame span{position:absolute;left:16px;bottom:16px;background:#1a2b26a6;color:white;border-radius:8px;padding:7px 11px;font-size:13px}.waiting{position:absolute;top:45%;left:0;width:100%;text-align:center;color:#6e8576;pointer-events:none}.guest-frame:has(video[srcObject]) .waiting{display:none}.self-frame{position:absolute;right:20px;top:20px;width:23%;max-width:220px;aspect-ratio:3/4;border:3px solid white;box-shadow:0 8px 30px #0002;border-radius:15px;overflow:hidden;background:#9aafa2}.self-frame video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.toolbar{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;background:#ffffffed;border-radius:18px;padding:10px;box-shadow:0 8px 28px #0002}.tool{border:0;background:#edf1eb;color:#354e3e;border-radius:12px;padding:9px 15px;min-width:68px;font-size:20px}.tool span{display:block;font-size:11px;margin-top:4px}.tool.hangup{background:#ee6b68;color:white}.chat-panel{display:flex;flex-direction:column;min-width:0;background:white;border:1px solid #e8eae3;border-radius:18px;padding:20px}.chat-head{display:flex;justify-content:space-between;align-items:center}.chat-head h2{font-size:18px;margin:0}.icon-btn{display:none;border:0;background:transparent;font-size:18px}#messages{flex:1;min-height:0;overflow:auto;overflow-wrap:anywhere;padding:15px 0}#messages p{background:#f1f4ee;border-radius:12px;padding:10px;font-size:14px}#chat-form{display:flex;gap:8px}#chat-form input{min-width:0;flex:1;background:#f7f8f5;border:1px solid #e1e6df;border-radius:10px;padding:12px}#chat-form button{border:0;border-radius:10px;background:#315947;color:white;padding:0 15px}.devices{display:flex;align-items:center;gap:12px;margin:20px 0;color:#607366;font-size:13px}.devices select{padding:10px;max-width:270px;border:1px solid #dce2d9;border-radius:9px;background:white;color:#315947}.error{color:#ad4242}.join-error{position:fixed;inset:0;z-index:20;background:#f7f5f1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px}.join-error[hidden],[hidden]{display:none!important}.join-error h1{font-size:clamp(38px,6vw,70px);max-width:850px}.join-error p{max-width:470px;color:#748176;font-size:18px;line-height:1.6}.error-icon{font-size:60px;color:#df8b70;margin-bottom:25px}.home-link{margin-top:25px}footer{text-align:center;font-size:12px;color:#a3aca3;margin:35px 0}@media(max-width:850px){main{padding:15px}.site-header>span{display:none}.call-layout{display:block;min-height:0}.stage{height:calc(100dvh - 170px);min-height:420px;border-radius:16px}.room-bar{padding:14px 3px}.chat-panel{display:none;position:fixed;z-index:10;inset:12% 12px 12px;box-shadow:0 0 0 100vmax #1b2d2b80}.chat-panel.open{display:flex}.icon-btn{display:block}.toolbar{bottom:calc(14px + env(safe-area-inset-bottom));gap:6px}.tool{min-width:59px;padding:10px 8px}.devices{flex-wrap:wrap}.landing{padding-top:16vh}.self-frame{width:28%;right:14px;top:14px}.site-header{padding:5px 3px}}
/* Clear, accessible off-state indicators for call controls */
.tool.is-off{background:#b92f42;color:#fff;box-shadow:0 0 0 3px #ffffffb3,0 4px 14px #7e152b55}
.tool.is-off span{font-weight:800}
.tool:focus-visible{outline:3px solid #315947;outline-offset:3px}

/* Call refinements: prominent guest video, discreet controls and message badges */
.chat-toggle{display:none;position:relative}
.unread-badge{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;border-radius:999px;background:#dc354b;color:white;font-size:12px;font-weight:800;display:grid;place-items:center;padding:0 5px;border:2px solid white}
.unread-badge[hidden]{display:none}
.self-frame.self-hidden{display:none}
.chat-notice{background:#e5f3e9;color:#28513a;font-size:12px;border-radius:9px;padding:8px;margin-bottom:8px}
.chat-notice[hidden]{display:none}
.stage{isolation:isolate}
.guest-frame .waiting[hidden]{display:none}
@media(min-width:851px){.chat-toggle{display:none!important}.call-layout{grid-template-columns:minmax(0,1fr) 330px}}
@media(max-width:850px){
  html,body{height:100%;overflow-x:hidden}
  main:has(#call:not([hidden])){max-width:none;padding:0}
  #call{position:fixed;inset:0;background:#101a15;z-index:3}
  #call .room-bar{position:absolute;z-index:4;top:env(safe-area-inset-top);left:0;right:0;padding:14px 16px;background:linear-gradient(#0c1814a8,transparent);color:white;pointer-events:none}
  #call .room-bar .eyebrow{display:none}
  #call .room-bar #status{font-size:13px;font-weight:600}
  #call .room-bar button{pointer-events:auto;background:#ffffffdd;border:0;padding:9px 12px;font-size:12px}
  .call-layout,.stage{width:100%;height:100%;min-height:0}
  .stage{border-radius:0}
  .guest-frame{background:#192d25}
  .guest-frame video{object-fit:cover}
  .guest-label{bottom:calc(95px + env(safe-area-inset-bottom))}
  .self-frame{top:calc(65px + env(safe-area-inset-top));right:12px;width:27%;max-width:150px;border-radius:12px}
  .toolbar{z-index:5;bottom:calc(15px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 16px);gap:5px;padding:7px;background:#ffffffd9;border-radius:16px}
  .tool{min-width:54px;padding:8px 7px;font-size:18px}
  .tool span{font-size:10px}
  .chat-toggle{display:block}
  .chat-panel{inset:8% 8px calc(12px + env(safe-area-inset-bottom));border-radius:16px}
  .devices{position:fixed;z-index:2;bottom:0;left:0;right:0;justify-content:center;margin:0;padding:10px;background:#f7f5f1;transform:translateY(100%)}
  .site-header,main:has(#call:not([hidden]))>footer{display:none}
}

/* Viewport-constrained call: messages scroll inside chat, never stretch the page. */
@media(min-width:851px){
  body:has(#call:not([hidden])){height:100dvh;overflow:hidden}
  main:has(#call:not([hidden])){height:100dvh;display:flex;flex-direction:column;overflow:hidden}
  main:has(#call:not([hidden])) .site-header{flex:0 0 auto;margin-bottom:0}
  #call{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
  #call .room-bar{flex:0 0 auto;padding:14px 0 12px}
  #call .call-layout{flex:1 1 auto;min-height:0;height:0}
  #call .stage{min-height:0;height:100%}
  #call .chat-panel{height:100%;min-height:0;overflow:hidden}
  #call #messages{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  #call .devices{flex:0 0 auto;margin:10px 0}
  main:has(#call:not([hidden]))>footer{flex:0 0 auto;margin:6px 0 10px}
  main:has(#call:not([hidden]))>#error{margin:0}
}
.self-frame{display:block;min-width:0;min-height:0}
.self-frame video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center;transform:scaleX(-1);border-radius:inherit}
.self-frame span{z-index:1}
@media(max-width:850px){
  #call .chat-panel{min-height:0;max-height:calc(92dvh - env(safe-area-inset-bottom));overflow:hidden}
  #call #messages{min-height:0;flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}
  #call .chat-head,#call #chat-form{flex-shrink:0}
}

/* Compact call controls, responsive to available stage width. */
.stage{container-type:inline-size}
.toolbar{max-width:calc(100% - 24px);box-sizing:border-box;z-index:3}
.control-icon{display:block;width:24px;height:24px;margin:0 auto 3px}
@container(max-width:680px){
  .toolbar{gap:5px;padding:7px;border-radius:14px}
  .toolbar .tool{min-width:0;padding:8px 10px;font-size:18px}
  .toolbar .tool span{font-size:10px}
  .toolbar .control-icon{width:20px;height:20px}
}
@container(max-width:400px){
  .toolbar .tool{padding:7px 8px}
  .toolbar .tool span{font-size:9px}
}
@media(min-width:851px){
  .toolbar{bottom:14px}
  .self-frame{top:14px;right:14px;width:clamp(105px,21%,180px)}
}

.capture-notice{display:inline-flex;align-items:center;max-width:210px;padding:4px 8px;border-radius:8px;background:transparent;color:#7c3949;font-size:11px;font-weight:600;line-height:1.25}.capture-notice[hidden]{display:none}

/* Desktop: fixed 4:3 guest stage, flexible chat fills remaining width. */
@media(min-width:851px){
 #call .call-layout{grid-template-columns:minmax(0,calc((100dvh - 190px) * 4 / 3)) minmax(330px,1fr)}
 #call .stage{aspect-ratio:4/3;max-width:100%;height:auto;align-self:start}
 #call .guest-frame video{object-fit:cover}
}

/* Shared homepage actions and consistent room typography. */
.landing-actions{margin-top:22px}
.landing-actions .hint{margin-top:12px}
.room-bar #group-status{font-size:20px;font-weight:700;margin-top:6px}
.group-shell .chat-head{margin-bottom:10px}
@media(max-width:850px){.room-bar #group-status{font-size:16px}}

/* Keep Quikchat wordmark visible on the mobile landing and group pages. */
@media(max-width:850px){main:not(:has(#call:not([hidden]))) .site-header{display:flex!important;align-items:center}main:not(:has(#call:not([hidden]))) .site-header .logo{display:inline-block!important;font-size:27px;line-height:1.2;white-space:nowrap}}

/* Desktop: keep the guest stage within the call area so camera selection stays visible. */
@media (min-width:851px){
  #call .stage{
    height:100%;
    width:auto;
    max-width:100%;
    aspect-ratio:4/3;
    justify-self:start;
  }
}