/* Shared Hyperbeam browser — an immersive, low-distraction co-browsing room. */

.desktop-icon--browser .desktop-icon__image svg {
  filter: drop-shadow(0 2px 2px rgba(0, 35, 90, .45));
}

body.shared-browser-open .taskbar,
body.shared-browser-open .start-menu,
body.shared-browser-open .desktop-toast {
  display: none !important;
}

/* Skype keeps the WebRTC session alive, but its standalone window must never
   cover an immersive shared experience. The video stack is re-parented into
   the right-side call stage before either mode becomes interactive. */
body.shared-browser-open #skype-window,
body.cinema-open #skype-window {
  display: none !important;
  pointer-events: none !important;
}

body.shared-browser-open .desktop-surface {
  inset: 0;
}

.shared-browser-window,
.shared-browser-window.is-active,
.shared-browser-window.is-maximized {
  position: fixed;
  inset: 0 !important;
  z-index: 120 !important;
  display: flex;
  width: 100vw;
  height: 100dvh;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  outline: 0;
  color: #172033;
  background: #e8edf5;
  box-shadow: none;
  font-family: "Segoe UI", Inter, Arial, sans-serif;
  resize: none;
}

.shared-browser-window[hidden] {
  display: none;
}

.shared-browser-shell {
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  background: #f4f7fb;
}

.shared-browser-header {
  position: fixed;
  z-index: 130;
  top: max(10px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  display: block;
  width: 40px;
  height: 40px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

.shared-browser-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.shared-browser-logo {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  color: #0878d1;
}

.shared-browser-logo svg {
  width: 40px;
  height: 40px;
  filter: drop-shadow(0 2px 4px rgba(8, 90, 168, .2));
}

.shared-browser-brand h2,
.shared-browser-brand p {
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-browser-brand h2 {
  color: #172033;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
}

.shared-browser-brand p {
  margin-top: 3px;
  color: #738096;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .03em;
}

.shared-browser-presence {
  display: flex;
  min-width: 0;
  padding: 7px 13px 7px 9px;
  align-items: center;
  justify-self: center;
  gap: 9px;
  border: 1px solid #e0e6ef;
  border-radius: 999px;
  color: #4c596e;
  background: #f8fafc;
  font-size: 10px;
  font-weight: 600;
}

.shared-browser-presence__avatars {
  display: flex;
  padding-left: 8px;
}

.shared-browser-presence__avatars i {
  display: grid;
  width: 23px;
  height: 23px;
  margin-left: -8px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, #0878d1, #36a7ec);
  box-shadow: 0 1px 3px rgba(20, 48, 85, .22);
  font-size: 8px;
  font-style: normal;
  font-weight: 800;
}

.shared-browser-presence__avatars i + i {
  background: linear-gradient(135deg, #9c5ad7, #e06fa7);
}

.shared-browser-close {
  display: grid;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 1px solid rgba(205, 215, 227, .9);
  border-radius: 11px;
  color: #59677a;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 5px 16px rgba(10, 25, 45, .16);
  font: 300 27px/1 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(8px);
  transition: color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.shared-browser-close:hover {
  color: #fff;
  background: #e5484d;
}

.shared-browser-close:active {
  transform: scale(.94);
}

.shared-browser-layout {
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1;
  grid-template-columns: minmax(0, 1fr) clamp(280px, 22vw, 340px);
}

.shared-browser-workspace {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  border-right: 1px solid #d6deea;
  background: #edf2f8;
}

/* Hyperbeam owns the browsing surface. The duplicated navigation and legacy
   status strips are retained in the DOM for SDK state/control hooks, but do
   not consume any visual space. */
.shared-browser-toolbar,
.shared-browser-statusbar {
  display: none !important;
}

.shared-browser-toolbar {
  position: relative;
  z-index: 4;
  display: flex;
  height: 54px;
  min-height: 54px;
  padding: 6px 12px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #d8e0eb;
  background: #fff;
  box-shadow: 0 2px 8px rgba(25, 45, 76, .045);
}

.shared-browser-nav-buttons {
  display: flex;
  align-items: center;
  gap: 3px;
}

.shared-browser-toolbar button {
  color: #3c4a60;
  cursor: pointer;
}

.shared-browser-nav-buttons button,
.shared-browser-shortcut {
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  transition: color 130ms ease, background-color 130ms ease, transform 130ms ease;
}

.shared-browser-nav-buttons button:hover:not(:disabled),
.shared-browser-shortcut:hover:not(:disabled) {
  color: #076bbb;
  background: #eaf4fc;
}

.shared-browser-nav-buttons button:active:not(:disabled),
.shared-browser-shortcut:active:not(:disabled) {
  transform: scale(.93);
}

.shared-browser-nav-buttons svg,
.shared-browser-shortcut svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shared-browser-address {
  display: flex;
  height: 42px;
  min-width: 180px;
  flex: 1;
  align-items: center;
  border: 1px solid #ccd7e5;
  border-radius: 12px;
  background: #f5f8fb;
  box-shadow: inset 0 1px 2px rgba(20, 42, 72, .035);
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.shared-browser-address:focus-within {
  border-color: #4b9dd8;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(38, 139, 207, .13);
}

.shared-browser-address__lock {
  display: grid;
  width: 38px;
  flex: 0 0 38px;
  place-items: center;
  color: #28a166;
}

.shared-browser-address__lock svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shared-browser-address input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 4px;
  border: 0;
  outline: 0;
  color: #1d293b;
  background: transparent;
  font: 500 12px/1.2 "Segoe UI", Arial, sans-serif;
}

.shared-browser-address input::placeholder {
  color: #909bad;
}

.shared-browser-address button {
  display: grid;
  width: 40px;
  height: 34px;
  margin-right: 3px;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 9px;
  color: #fff;
  background: #0878d1;
}

.shared-browser-address button:hover:not(:disabled) {
  background: #0667b5;
}

.shared-browser-address button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shared-browser-shortcut {
  display: flex;
  width: auto;
  padding: 0 10px;
  gap: 6px;
  color: #da3131 !important;
  font-size: 10px;
  font-weight: 700;
}

.shared-browser-shortcut svg {
  width: 21px;
  fill: currentColor;
  stroke-width: 1.6;
}

.shared-browser-volume {
  display: flex;
  width: 104px;
  align-items: center;
  gap: 7px;
  color: #647187;
}

.shared-browser-volume svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shared-browser-volume input {
  width: 76px;
  accent-color: #0878d1;
}

.shared-browser-toolbar button:disabled,
.shared-browser-toolbar input:disabled {
  cursor: default;
  opacity: .42;
}

.shared-browser-viewport {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  flex: 1;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.hyperbeam-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
}

.shared-browser-gate {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  padding: 28px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #314056;
  background:
    radial-gradient(circle at 50% 34%, rgba(88, 178, 233, .12), transparent 28%),
    linear-gradient(145deg, #f9fbfe, #eef4fa);
  text-align: center;
}

.shared-browser-gate[hidden] {
  display: none;
}

.shared-browser-loader {
  display: flex;
  height: 18px;
  margin-bottom: 20px;
  align-items: center;
  gap: 5px;
}

.shared-browser-loader span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1688d3;
  animation: shared-browser-pulse 1s ease-in-out infinite;
}

.shared-browser-loader span:nth-child(2) { animation-delay: 120ms; }
.shared-browser-loader span:nth-child(3) { animation-delay: 240ms; }

.shared-browser-gate__icon {
  display: none;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  color: #0a7acb;
}

.shared-browser-gate__icon svg {
  width: 100%;
  height: 100%;
}

.shared-browser-gate.is-error .shared-browser-loader {
  display: none;
}

.shared-browser-gate.is-error .shared-browser-gate__icon {
  display: block;
}

.shared-browser-gate h3,
.shared-browser-gate p {
  margin: 0;
}

.shared-browser-gate h3 {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -.025em;
}

.shared-browser-gate p {
  max-width: 490px;
  margin-top: 9px;
  color: #748197;
  font-size: 12px;
  line-height: 1.55;
}

.shared-browser-gate button {
  margin-top: 20px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: #0878d1;
  box-shadow: 0 7px 18px rgba(8, 120, 209, .25);
  font: 700 11px/1 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}

.shared-browser-gate button:hover {
  background: #0667b5;
}

.shared-browser-gate .shared-browser-direct {
  display: inline-flex;
  min-height: 32px;
  margin-top: 9px;
  padding: 0 15px;
  align-items: center;
  justify-content: center;
  border: 1px solid #9bafc5;
  border-radius: 999px;
  color: #27425f;
  background: #fff;
  font: 700 11px/1 "Segoe UI", Arial, sans-serif;
  text-decoration: none;
}

.shared-browser-gate .shared-browser-direct[hidden] {
  display: none;
}

.shared-browser-statusbar {
  display: flex;
  height: 29px;
  min-height: 29px;
  padding: 0 14px;
  align-items: center;
  justify-content: space-between;
  color: #7b8799;
  background: #edf2f8;
  font-size: 9px;
}

.shared-browser-statusbar span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.shared-browser-statusbar strong {
  color: #536176;
  font-weight: 600;
}

.shared-browser-statusbar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e2a827;
  box-shadow: 0 0 0 3px rgba(226, 168, 39, .12);
}

.shared-browser-statusbar i.is-online {
  background: #2dae67;
  box-shadow: 0 0 0 3px rgba(45, 174, 103, .12);
}

.shared-browser-statusbar i.is-error {
  background: #d94b54;
  box-shadow: 0 0 0 3px rgba(217, 75, 84, .12);
}

.shared-browser-call-sidebar {
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 18px 16px 14px;
  flex-direction: column;
  color: #ecf3fb;
  background:
    radial-gradient(circle at 50% 0, rgba(35, 105, 162, .18), transparent 34%),
    linear-gradient(180deg, #121a27, #0b111b);
}

.shared-browser-call-heading {
  display: flex;
  height: 50px;
  min-height: 50px;
  padding: 0 48px 0 3px;
  align-items: flex-start;
  justify-content: space-between;
}

.shared-browser-call-heading > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 5px;
}

.shared-browser-call-heading__live {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #7d8ca1;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .15em;
}

.shared-browser-call-heading__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #43d883;
  box-shadow: 0 0 10px rgba(67, 216, 131, .7);
}

.shared-browser-call-heading strong {
  overflow: hidden;
  color: #f2f6fb;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-browser-call-heading__quality {
  padding: 5px 8px;
  border: 1px solid rgba(104, 165, 213, .18);
  border-radius: 999px;
  color: #89afd0;
  background: rgba(62, 126, 177, .09);
  font-size: 8px;
  font-weight: 700;
}

.shared-browser-call-stage {
  min-width: 0;
  min-height: 0;
  flex: 1;
}

.shared-browser-call-stage .skype-video-stack {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  gap: 8px;
  overflow: hidden;
  background: transparent;
}

.shared-browser-call-stage .skype-video-stack > video,
.shared-browser-call-stage .skype-video-stack > #remote-video,
.shared-browser-call-stage .skype-video-stack > .skype-local-video,
.shared-browser-call-stage .skype-video-stack > .skype-local-video:not(.has-stream) {
  position: static;
  inset: auto;
  z-index: auto;
  display: block;
  width: 100%;
  height: 0;
  min-height: 0;
  flex: 1 1 0;
  aspect-ratio: auto;
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 14px;
  object-fit: cover;
  background: #1a2432;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .26);
}

.shared-browser-call-stage .skype-video-stack > .skype-local-video,
.shared-browser-call-stage .skype-video-stack > .skype-local-video:not(.has-stream) {
  transform: scaleX(-1);
}

.shared-browser-call-stage .skype-video-placeholder {
  inset: 0 0 calc(50% + 4px);
  border: 1px solid rgba(255, 255, 255, .075);
  border-radius: 14px;
  color: #9cacbf;
  background: #1a2432;
}

.shared-browser-call-stage .skype-connect {
  display: none !important;
}

.shared-browser-call-controls {
  display: flex;
  height: 78px;
  min-height: 78px;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.shared-browser-call-controls button {
  display: flex;
  width: 76px;
  height: 48px;
  padding: 0 10px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  color: #e7eef7;
  background: rgba(255, 255, 255, .065);
  font: 600 9px/1 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
  transition: border-color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.shared-browser-call-controls button:hover {
  border-color: rgba(91, 173, 232, .4);
  background: rgba(43, 131, 196, .18);
  transform: translateY(-2px);
}

.shared-browser-call-controls button.is-off {
  border-color: rgba(226, 76, 84, .35);
  background: rgba(174, 45, 54, .55);
}

.shared-browser-call-controls svg {
  width: 21px;
  height: 21px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.shared-browser-call-note {
  min-height: 12px;
  margin: -5px 0 0;
  overflow: hidden;
  color: #7d8da2;
  font-size: 8px;
  line-height: 1.35;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shared-browser-enable-media {
  min-height: 34px;
  margin: -4px auto 9px;
  padding: 0 15px;
  border: 1px solid rgba(87, 174, 235, .38);
  border-radius: 999px;
  color: #fff;
  background: #0878d1;
  box-shadow: 0 7px 18px rgba(0, 73, 136, .26);
  font: 700 9px/1 "Segoe UI", Arial, sans-serif;
  cursor: pointer;
}

.shared-browser-enable-media:hover {
  background: #1590e4;
}

.shared-browser-enable-media[hidden] {
  display: none;
}

@keyframes shared-browser-pulse {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

@media (max-width: 1080px) {
  .shared-browser-presence {
    justify-self: end;
  }

  .shared-browser-presence > span:last-child,
  .shared-browser-shortcut span {
    display: none;
  }

  .shared-browser-shortcut {
    width: 38px;
    padding: 0;
  }

  .shared-browser-volume {
    width: 84px;
  }

  .shared-browser-volume input {
    width: 56px;
  }
}

@media (max-width: 820px) {
  .shared-browser-header {
    width: 40px;
    height: 40px;
    min-height: 0;
  }

  .shared-browser-logo,
  .shared-browser-logo svg {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .shared-browser-brand p,
  .shared-browser-presence {
    display: none;
  }

  .shared-browser-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 210px;
  }

  .shared-browser-workspace {
    border-right: 0;
    border-bottom: 1px solid #1d2938;
  }

  .shared-browser-toolbar {
    height: 54px;
    min-height: 54px;
    padding: 7px 58px 7px 8px;
    gap: 5px;
  }

  .shared-browser-nav-buttons button {
    width: 34px;
    height: 36px;
  }

  #shared-browser-home,
  .shared-browser-shortcut,
  .shared-browser-volume {
    display: none;
  }

  .shared-browser-viewport {
    margin: 6px 6px 0;
  }

  .shared-browser-call-sidebar {
    display: grid;
    padding: 10px 12px max(9px, env(safe-area-inset-bottom));
    grid-template-columns: 125px minmax(0, 1fr) 166px;
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
  }

  .shared-browser-call-heading {
    height: auto;
    min-height: 0;
    padding: 0;
  }

  .shared-browser-call-heading__quality,
  .shared-browser-call-note {
    display: none;
  }

  .shared-browser-enable-media {
    display: block;
    grid-column: 1 / -1;
    min-height: 28px;
    margin: -3px auto 0;
  }

  .shared-browser-enable-media[hidden] {
    display: none;
  }

  .shared-browser-call-stage {
    height: 100%;
  }

  .shared-browser-call-stage .skype-video-stack {
    flex-direction: row;
  }

  .shared-browser-call-stage .skype-video-stack > video,
  .shared-browser-call-stage .skype-video-stack > #remote-video,
  .shared-browser-call-stage .skype-video-stack > .skype-local-video,
  .shared-browser-call-stage .skype-video-stack > .skype-local-video:not(.has-stream) {
    width: 0;
    height: 100%;
  }

  .shared-browser-call-stage .skype-video-placeholder {
    inset: 0 calc(50% + 4px) 0 0;
  }

  .shared-browser-call-controls {
    height: auto;
    min-height: 0;
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .shared-browser-header {
    padding: 0;
  }

  .shared-browser-brand h2 {
    font-size: 14px;
  }

  .shared-browser-nav-buttons button:nth-child(2),
  .shared-browser-address__lock {
    display: none;
  }

  .shared-browser-address {
    min-width: 0;
  }

  .shared-browser-layout {
    grid-template-rows: minmax(0, 1fr) 164px;
  }

  .shared-browser-call-sidebar {
    padding: 8px;
    grid-template-columns: minmax(0, 1fr) 104px;
    gap: 8px;
  }

  .shared-browser-call-heading {
    display: none;
  }

  .shared-browser-call-stage .skype-video-stack {
    gap: 5px;
  }

  .shared-browser-call-stage .skype-video-stack > video,
  .shared-browser-call-stage .skype-video-stack > #remote-video,
  .shared-browser-call-stage .skype-video-stack > .skype-local-video,
  .shared-browser-call-stage .skype-video-stack > .skype-local-video:not(.has-stream) {
    border-radius: 10px;
  }

  .shared-browser-call-controls {
    flex-direction: column;
  }

  .shared-browser-call-controls button {
    width: 96px;
    height: 48px;
  }

  .shared-browser-statusbar > span:last-child {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shared-browser-loader span {
    animation: none;
    opacity: .7;
  }

  .shared-browser-window * {
    scroll-behavior: auto !important;
  }
}