/* Shared Sara reception treatment for the main room and Watch & Learn.
   The room desk reaches only the left viewport edge; it never spans the room. */

/* Main-room reception station: wider/thicker desk, raised above Sara's beltline. */
#experience #answer-desk-room.has-sara-concierge{
  left:0;
  bottom:max(12px,env(safe-area-inset-bottom));
  width:min(520px,calc(100vw - 340px));
}
#experience #answer-desk-room.has-sara-concierge .sara-room-concierge{
  width:100%;
  max-width:520px;
  margin:0;
}
#experience #answer-desk-room.has-sara-concierge .sara-concierge-avatar{
  width:min(205px,44%);
}
#experience #answer-desk-room.has-sara-concierge .sara-concierge-desk{
  min-height:170px;
  margin-top:-18%;
}
#experience #answer-desk-room.has-sara-concierge .sara-concierge-front{
  top:22.494%;
  height:36.889%;
}

/* Watch & Learn reuses the same Sara cutout and photoreal reception desk.
   The existing brand ticker becomes the screen immediately below the desktop. */
.wl-dialog .wl-browser.wl-guided>.wl-guide{
  display:block;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.wl-dialog .wl-guide .sara-catalog-portrait{
  position:relative;
  display:block;
  height:245px;
  min-width:0;
  margin:0 0 10px;
  overflow:visible;
  border:0;
  isolation:isolate;
}
.wl-dialog .wl-guide .sara-catalog-portrait img{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}
.wl-dialog .wl-guide .sara-catalog-portrait::before{
  content:"";
  position:absolute;
  z-index:1;
  left:50%;
  bottom:72px;
  width:122px;
  aspect-ratio:1017 / 1546;
  transform:translateX(-50%);
  background:url('/shared/sara-waist-up-v1.png') center bottom / contain no-repeat;
  pointer-events:none;
}
.wl-dialog .wl-guide .sara-catalog-portrait::after{
  content:"";
  position:absolute;
  z-index:2;
  left:-12px;
  right:-12px;
  bottom:0;
  aspect-ratio:2022 / 778;
  background:url('/scowcroft/design-led-living/concierge-desk-photoreal-v1.png') center bottom / 100% 100% no-repeat;
  pointer-events:none;
}
.wl-dialog .wl-guide .sara-catalog-conversation{
  position:relative;
  display:block;
  min-width:0;
  padding:12px 14px 14px;
  border:1px solid #c7d2d9;
  border-radius:0 0 16px 16px;
  background:linear-gradient(165deg,#fffaf1 0%,#eef3f5 58%,#e4ecf0 100%);
  box-shadow:0 6px 18px #1424340a;
  overflow:visible;
}
.wl-dialog .wl-guide .sara-catalog-conversation::before{
  content:"";
  position:absolute;
  z-index:6;
  left:-18px;
  top:-136px;
  width:calc(100% + 36px);
  height:24px;
  background:url('/scowcroft/design-led-living/concierge-desk-photoreal-v1.png') center top / 100% auto no-repeat;
  pointer-events:none;
}
.wl-dialog .wl-guide .sara-catalog-conversation>*{
  min-width:0;
}
.wl-dialog .wl-guide .sara-catalog-conversation>[data-brand-ticker]{
  position:absolute;
  z-index:4;
  left:-6px;
  top:-116px;
  width:calc(100% + 12px);
  height:70px;
  margin:0;
  border:1px solid #8a8073;
  border-radius:1px;
  background:#f3f0e9;
  box-shadow:inset 0 2px 5px #0009;
}
.wl-dialog .wl-guide .sara-catalog-conversation>[data-brand-ticker]>.sara-brand-ticker{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  margin:0;
}
.wl-dialog .wl-guide [data-brand-ticker] .sara-brand-ticker-viewport{
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
  background:#f3f0e9;
  box-shadow:inset 0 2px 4px #0003;
}
.wl-dialog .wl-guide [data-brand-ticker] .sara-brand-ticker-track,
.wl-dialog .wl-guide [data-brand-ticker] .sara-brand-ticker-group{
  height:100%;
}
.wl-dialog .wl-guide [data-brand-ticker] .sara-brand-ticker-item{
  height:100%;
  min-height:42px;
}
.wl-dialog .wl-guide [data-brand-ticker] .sara-brand-ticker-select{
  height:100%;
  min-height:42px;
  background:#f3f0e9;
}
.wl-dialog .wl-guide [data-brand-ticker] .sara-brand-ticker-select:hover{
  background:#e8e4da;
}
.wl-dialog .wl-guide [data-brand-ticker] .sara-brand-ticker-logo{
  transform:scale(.76);
}
.wl-dialog .wl-guide [data-brand-ticker] .sara-brand-ticker-toggle{
  position:absolute;
  z-index:5;
  top:calc(100% + 4px);
  right:4px;
  width:36px;
  height:36px;
  min-height:36px;
  margin:0;
  padding:0;
  border:1px solid #d9c5a77d;
  border-radius:50%;
  background:#30241bde;
  color:#fff2df;
  font-size:0;
  box-shadow:0 2px 5px #0002;
}
.wl-dialog .wl-guide [data-brand-ticker] .sara-brand-ticker-toggle::before{
  content:'\2161';
  font:700 16px/1 system-ui,sans-serif;
}
.wl-dialog .wl-guide [data-brand-ticker] .sara-brand-ticker[data-motion-enabled='false'] .sara-brand-ticker-toggle::before{
  content:'\25B6';
  font-size:13px;
}

@media(max-height:720px) and (min-width:701px){
  #experience #answer-desk-room.has-sara-concierge{
    width:min(430px,calc(100vw - 340px));
    bottom:8px;
  }
  #experience #answer-desk-room.has-sara-concierge .sara-room-concierge{max-width:430px}
  #experience #answer-desk-room.has-sara-concierge .sara-concierge-avatar{width:min(178px,44%)}
}

@media(max-width:900px){
  .wl-dialog .wl-guide .sara-catalog-portrait{
    height:220px;
  }
  .wl-dialog .wl-guide .sara-catalog-portrait::before{
    bottom:61px;
    width:106px;
  }
  .wl-dialog .wl-guide .sara-catalog-portrait::after{
    left:50%;
    right:auto;
    width:min(300px,calc(100vw - 64px));
    transform:translateX(-50%);
  }
  .wl-dialog .wl-guide .sara-catalog-conversation::before{
    left:50%;
    top:-120px;
    width:min(312px,calc(100vw - 52px));
    height:20px;
    transform:translateX(-50%);
  }
  .wl-dialog .wl-guide .sara-catalog-conversation>[data-brand-ticker]{
    left:50%;
    top:-105px;
    width:min(288px,calc(100vw - 76px));
    transform:translateX(-50%);
  }
}

@media(max-width:600px){
  .wl-dialog .wl-guide .sara-catalog-portrait{height:200px}
  .wl-dialog .wl-guide .sara-catalog-portrait::before{bottom:55px;width:94px}
  .wl-dialog .wl-guide .sara-catalog-portrait::after{width:min(270px,calc(100vw - 52px))}
  .wl-dialog .wl-guide .sara-catalog-conversation{
    padding:10px 11px 12px;
    border-radius:0 0 13px 13px;
  }
  .wl-dialog .wl-guide .sara-catalog-conversation::before{
    top:-110px;
    width:min(282px,calc(100vw - 40px));
    height:18px;
  }
  .wl-dialog .wl-guide .sara-catalog-conversation>[data-brand-ticker]{
    top:-97px;
    width:min(258px,calc(100vw - 64px));
    height:70px;
  }
  .wl-dialog .wl-guide [data-brand-ticker] .sara-brand-ticker-item{min-height:62px}
  .wl-dialog .wl-guide [data-brand-ticker] .sara-brand-ticker-select{min-height:62px}
}

@media(max-width:700px) and (pointer:fine){
  #experience #answer-desk-room.has-sara-concierge{
    left:0;
    width:min(300px,calc(100vw - 320px));
  }
}