a {
  text-decoration: none;
  outline: none;
  color: #06c;
}
a:focus-visible,
a:hover {
  text-decoration: underline;
}
.ui-spin {
  animation: 2s linear 0s infinite ui-spin;
}
@keyframes ui-spin {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ui-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: scroll;
}
button.ui,
.ui-btn,
.meet .buttons button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 0.25em;
  height: 2em;
  padding: 0 1.5em;
  text-decoration: none;
  outline: none;
  transition: backdrop-filter 0.2s, opacity 0.2s, scale 0.2s;
}
button.ui.icon,
.ui-btn.icon,
.meet .buttons button.icon {
  background-color: transparent;
  color: inherit;
  vertical-align: bottom;
  padding: 0;
  width: 2em;
}
button.ui.icon > *,
.ui-btn.icon > *,
.meet .buttons button.icon > * {
  max-width: 80%;
  height: 65%;
}
button.ui.round,
.ui-btn.round,
.meet .buttons button.round,
.meet .buttons button {
  vertical-align: bottom;
  border-radius: 50%;
  padding: 0;
  width: 2em;
}
button.ui.round > *,
.ui-btn.round > *,
.meet .buttons button.round > *,
.meet .buttons button > * {
  max-width: 80%;
  height: 40%;
}
button.ui.outlined,
.ui-btn.outlined,
.meet .buttons button.outlined {
  border: 1px solid #333;
  box-sizing: border-box;
  color: #333;
  background-color: transparent;
}
button.ui:disabled,
.ui-btn:disabled,
.meet .buttons button:disabled {
  opacity: 0.5;
}
button.ui:not(:disabled),
.ui-btn:not(:disabled),
.meet .buttons button:not(:disabled) {
  cursor: pointer;
}
button.ui:not(:disabled):focus-visible,
.ui-btn:not(:disabled):focus-visible,
button.ui:not(:disabled):hover,
.ui-btn:not(:disabled):hover,
.meet .buttons button:not(:disabled):focus-visible,
.meet .buttons button:not(:disabled):hover {
  text-decoration: none;
  backdrop-filter: invert(10%);
}
button.ui:not(:disabled):focus-visible:not(.icon, .outlined),
.ui-btn:not(:disabled):focus-visible:not(.icon, .outlined),
button.ui:not(:disabled):hover:not(.icon, .outlined),
.ui-btn:not(:disabled):hover:not(.icon, .outlined),
.meet .buttons button:not(:disabled):focus-visible:not(.icon, .outlined),
.meet .buttons button:not(:disabled):hover:not(.icon, .outlined) {
  opacity: 0.85;
}
button.ui:not(:disabled):active,
.ui-btn:not(:disabled):active,
.meet .buttons button:not(:disabled):active {
  backdrop-filter: invert(20%);
  scale: 0.98;
}
.ui-dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1000;
  overflow: auto;
}
.ui-dialog > .content {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  background-color: #fff;
  margin: 5% auto;
  box-sizing: border-box;
  padding: 15px;
  width: 500px;
  min-width: calc(360px - 16px);
  max-width: calc(100vw - 16px);
  border-radius: 5px;
}
.ui-dialog > .content > button.close {
  margin: -0.25em -0.25em 0.5em 0.5em;
  float: right;
}
.ui-dialog > .content > h1 {
  font-size: 1.5em;
  margin: 0 0 0.5em;
}
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}
/*!
 * Font Awesome Pro 6.7.2 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license (Commercial License)
 * Copyright 2024 Fonticons, Inc.
 */
.ui-xmark {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='rgb(51,51,51)' d='M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z'/></svg>");
}
input:not([type=checkbox], [type=radio]),
textarea,
select {
  background-color: #fff;
  color: #000;
  font-family: inherit;
  font-size: inherit;
  width: 100%;
  padding-right: 0.5em;
  padding-left: 0.5em;
  border: 1px solid #bbb;
  border-radius: 0.25em;
  box-sizing: border-box;
  outline: none;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
input:not([type=checkbox], [type=radio]):not(textarea),
textarea:not(textarea),
select:not(textarea) {
  height: 2em;
}
input:not([type=checkbox], [type=radio]):disabled,
textarea:disabled,
select:disabled {
  background-color: #fafafa;
}
input:not([type=checkbox], [type=radio]):focus,
textarea:focus,
select:focus {
  border-color: #333;
  box-shadow: 0 0 0 1px #333;
}
input:not([type=checkbox], [type=radio]) + .ui-hint,
textarea + .ui-hint,
select + .ui-hint {
  margin-top: 0.25em;
}
textarea {
  padding-top: 0.375em;
  padding-bottom: 0.375em;
  vertical-align: top;
  resize: vertical;
}
select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 448 512'><path d='M201.4 342.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 274.7 86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/></svg>");
  background-position: calc(100% - 0.5em) 50%;
  background-attachment: scroll;
  background-repeat: no-repeat;
}
select:enabled {
  cursor: pointer;
}
input[type=checkbox],
input[type=radio] {
  cursor: pointer;
}
input[type=checkbox] + label,
input[type=radio] + label {
  cursor: pointer;
}
label {
  display: inline-block;
  -webkit-user-select: none;
  user-select: none;
  margin-top: 1em;
}
:not(input[type=checkbox], input[type=radio]) + label,
label:first-child {
  display: block;
  width: fit-content;
  margin-bottom: 0.25em;
  font-size: 0.875em;
  opacity: 0.8;
}
.ui-notify {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
  max-width: 320px;
  margin: 16px auto;
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
  background-color: #fff;
  padding: 8px 12px;
  border-radius: 5px;
}
.ui-lg {
  font-size: 1.25em;
}
table.ui {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
}
table.ui tr.clickable {
  cursor: pointer;
}
table.ui thead th {
  border-bottom: 1px solid #ccc;
  font-size: 0.875em;
  padding: calc(0.5em / 0.875);
  color: #555;
}
table.ui tfoot td {
  border-top: 1px solid #ccc;
  font-weight: bold;
}
table.ui tr:hover td {
  background-color: #f5f5f5;
}
table.ui tr:hover td button.ui.icon {
  visibility: visible;
}
table.ui td {
  border-top: 1px solid #eee;
  padding: 0.5em;
}
table.ui td.neg {
  color: #e00;
}
table.ui td:has(button.ui.icon) {
  padding-block: 0;
}
table.ui td button.ui.icon {
  width: 1.5em;
  height: 1.5em;
  visibility: hidden;
}
table.ui th,
table.ui td {
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.ui th.right,
table.ui td.right {
  text-align: right;
}
table.ui.dense {
  font-size: 0.875em;
}
table.ui.dense th {
  padding: calc(0.5em / 0.875 - 2px);
}
table.ui.dense td {
  padding: calc(0.5em - 2px);
}
table.ui.disabled {
  pointer-events: none;
}
.ui-hint {
  font-size: 0.75em;
  opacity: 0.5;
}
.rtc-media-error:has(permission:not(:granted)) .retry {
  display: none;
}
.rtc-media-error permission:granted {
  display: none;
}
.rtc-media-error a {
  display: block;
}
.icon-gear,
.meet .buttons button.settings i {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='white' d='M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z'/></svg>");
}
.icon-image-slash,
.meet .buttons button.self i {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path fill='white' d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7l-55.5-43.5c.5-3.1 .7-6.3 .7-9.6l0-320c0-35.3-28.7-64-64-64L128 32c-14.4 0-27.8 4.8-38.5 12.9L38.8 5.1zm120 94.1c5.3-2 11.1-3.2 17.2-3.2c26.5 0 48 21.5 48 48c0 2-.1 4-.4 6L158.8 99.2zM328.1 231.9l20-29.4c4.5-6.6 11.9-10.5 19.8-10.5s15.4 3.9 19.8 10.5L499.4 366.1 328.1 231.9zM221.7 272.5c.3-.4 .6-.7 1-1.1L64 146.4 64 416c0 35.3 28.7 64 64 64l359.4 0-81.2-64L320 416l-72 0-96 0c-9.3 0-17.8-5.4-21.8-13.9s-2.6-18.5 3.5-25.6l88-104z'/></svg>");
}
.icon-microphone,
.meet .videos > div .label .mic {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='white' d='M192 0C139 0 96 43 96 96l0 160c0 53 43 96 96 96s96-43 96-96l0-160c0-53-43-96-96-96zM64 216c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 89.1 66.2 162.7 152 174.4l0 33.6-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l72 0 72 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-33.6c85.8-11.7 152-85.3 152-174.4l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 70.7-57.3 128-128 128s-128-57.3-128-128l0-40z'/></svg>");
}
.icon-microphone-slash,
.meet .videos > div .label .mic.muted {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path fill='white' d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L472.1 344.7c15.2-26 23.9-56.3 23.9-88.7l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 21.2-5.1 41.1-14.2 58.7L416 300.8 416 96c0-53-43-96-96-96s-96 43-96 96l0 54.3L38.8 5.1zM344 430.4c20.4-2.8 39.7-9.1 57.3-18.2l-43.1-33.9C346.1 382 333.3 384 320 384c-70.7 0-128-57.3-128-128l0-8.7L144.7 210c-.5 1.9-.7 3.9-.7 6l0 40c0 89.1 66.2 162.7 152 174.4l0 33.6-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l72 0 72 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-33.6z'/></svg>");
}
.icon-person-chalkboard,
.meet .buttons button.share i {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path fill='white' d='M192 96a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm-8 384l0-128 16 0 0 128c0 17.7 14.3 32 32 32s32-14.3 32-32l0-288 56 0 64 0 16 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-16 0 0-64 192 0 0 192-192 0 0-32-64 0 0 48c0 26.5 21.5 48 48 48l224 0c26.5 0 48-21.5 48-48l0-224c0-26.5-21.5-48-48-48L368 0c-26.5 0-48 21.5-48 48l0 80-76.9 0-65.9 0c-33.7 0-64.9 17.7-82.3 46.6l-58.3 97c-9.1 15.1-4.2 34.8 10.9 43.9s34.8 4.2 43.9-10.9L120 256.9 120 480c0 17.7 14.3 32 32 32s32-14.3 32-32z'/></svg>");
}
.icon-phone {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path fill='white' d='M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z'/></svg>");
}
.icon-phone-hangup {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path fill='white' d='M11.7 266.3l41.9 94.3c6.1 13.7 20.8 21.3 35.5 18.4l109.2-21.8c15-3 25.7-16.1 25.7-31.4V240c62.3-20.8 129.7-20.8 192 0v85.8c0 15.3 10.8 28.4 25.7 31.4L550.9 379c14.7 2.9 29.4-4.7 35.5-18.4l41.9-94.3c7.2-16.2 5.1-35.1-7.4-47.7C570.8 168.1 464.2 96 320 96S69.2 168.1 19.1 218.6c-12.5 12.6-14.6 31.5-7.4 47.7z'/></svg>");
}
.icon-video-slash,
.meet .videos > div .video-muted i {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path fill='white' d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7l-86.4-67.7 13.8 9.2c9.8 6.5 22.4 7.2 32.9 1.6s16.9-16.4 16.9-28.2l0-256c0-11.8-6.5-22.6-16.9-28.2s-23-5-32.9 1.6l-96 64L448 174.9l0 17.1 0 128 0 5.8-32-25.1L416 128c0-35.3-28.7-64-64-64L113.9 64 38.8 5.1zM407 416.7L32.3 121.5c-.2 2.1-.3 4.3-.3 6.5l0 256c0 35.3 28.7 64 64 64l256 0c23.4 0 43.9-12.6 55-31.3z'/></svg>");
}

/* Logo in alto a sinistra nella room */
.meet-logo {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 50;
  /* opacity: 0.9; */
  /* filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); */
  line-height: 1;

  /* background: rgba(0, 0, 0, 0.15); */
  padding: 10px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
}

.meet-logo svg {
  color: white;
}

/* Overlay attesa partecipante */
.meet-waiting-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 5;
  pointer-events: none;
}

.meet-waiting-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ui-spin 1s linear infinite;
  margin-bottom: 20px;
}

.meet-waiting-text {
  color: #fff;
  font-size: 1.1em;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  padding: 0 20px;
}

/* Prompt consenso permessi fotocamera/microfono */
.meet-permission-prompt {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 200;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.92);
}

/* Nascondi bottoni e altri overlay quando il prompt permessi è visibile */
.meet:has(.meet-permission-prompt) .buttons,
.meet:has(.meet-permission-prompt) .meet-waiting-overlay,
.meet:has(.meet-permission-prompt) .meet-logo {
  display: none;
}

.meet-permission-prompt-icon {
  display: flex;
  gap: 18px;
  margin-bottom: 24px;
  opacity: 0.85;
}

.meet-permission-prompt-title {
  color: #fff;
  font-size: 1.4em;
  font-weight: 600;
  margin-bottom: 12px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.meet-permission-prompt-text {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95em;
  max-width: 440px;
  line-height: 1.5;
  margin-bottom: 24px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

.meet-permission-prompt-btn {
  font-size: 1.1em !important;
  padding: 0 2em !important;
  height: 2.6em !important;
  background-color: #2563eb !important;
  border-radius: 8px !important;
}

.meet-permission-prompt-btn:hover {
  background-color: #1d4ed8 !important;
}

/* Fallback browser non supportato / JS disabilitato */
.meet-browser-fallback {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 300;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
  background-color: #111;
}

.meet-browser-fallback-icon {
  font-size: 3em;
  margin-bottom: 16px;
}

.meet-browser-fallback-title {
  color: #fff;
  font-size: 1.4em;
  font-weight: 600;
  margin-bottom: 12px;
}

.meet-browser-fallback-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.95em;
  max-width: 440px;
  line-height: 1.5;
}

/* Container principale */
.meet {
  position: relative;
  width: 100vw;
  height: 100vh;        /* fallback browsers vecchi */
  height: 100dvh;       /* fix iOS Safari: 100vh include la barra browser */
  overflow: hidden;
  background-color: #000;
}

/* Container video */
.meet .videos.user {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Video dell'altro utente - grande a tutta pagina (secondo video) */
.meet .videos.user > div:nth-child(2) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  /* Fix iOS Safari: isolation:isolate crea un nuovo stacking context
     che forza WebKit a comporre il .label SOPRA il <video> nativo */
  isolation: isolate;
}

.meet .videos.user > div:nth-child(2) video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

/* Video con condivisione schermo remota - mostra tutto senza tagliare */
.meet .videos.user > div.screen-sharing video {
  object-fit: contain;
}

/* Video dell'utente corrente - piccolo in basso a destra (primo video) */
.meet .videos.user > div:first-child {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 240px;
  height: 180px;
  z-index: 10;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.meet .videos.user > div:first-child video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.meet .videos {
  display: grid;
  grid-auto-flow: column;
  gap: 8px;
}

.meet .videos > div {
  display: flex;
  position: relative;
}

.meet .videos > div video {
  flex-grow: 1;
  /* Fix iOS Safari: translateZ(0) porta il <video> dal layer nativo di iOS
     al layer GPU di WebKit, permettendo al z-index CSS di funzionare
     e al .label di apparire sopra il video. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

/* Label con nome e microfono */
.meet .videos > div .label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
  /* Fix iOS Safari: promuove il label su layer GPU proprio,
     necessario perché i <video> su iOS sono resi a livello OS */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}

.meet .videos > div .label .name {
  color: white;
  font-size: 14px;
  font-weight: 500;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.meet .videos > div .label .mic {
  width: 16px;
  height: 16px;
  display: inline-block;
  flex-shrink: 0;
}

.meet .videos > div .video-muted {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 3;
  /* Fix iOS Safari: promuove l'overlay su layer GPU proprio,
     necessario perché i <video> su iOS sono resi a livello OS */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
.meet .videos > div .video-muted i {
  height: 2em;
}

/* Badge condivisione schermo in corso */
.screen-sharing-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(37, 99, 235, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  z-index: 15;
  pointer-events: none;
}

.meet .videos video {
  display: block;
  max-width: 100%;
  /* border-radius: 8px; */
}
.meet .videos.user.sharing video {
  max-height: calc(16vh);
}
.meet .videos.display video {
  max-height: calc(84vh - 92px);
  border: 1px solid #ddd;
  box-sizing: border-box;
}
.meet .videos.user.sharing .label {
  font-size: 12px;
}

/* Bottoni fissi in basso */
.meet .buttons {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.5);
  /* padding: 15px 25px; */
  padding: 10px;
  border-radius: 50px;
  backdrop-filter: blur(10px);
}

/* Supporto per safe area iOS (notch e home indicator) */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .meet .buttons {
    bottom: max(10px, env(safe-area-inset-bottom));
  }
}

.meet .buttons button {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.meet .buttons button:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.meet .buttons button i {
  display: block;
  width: 24px;
  height: 24px;
  background-color: white;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Icona microfono acceso */
.meet .buttons button.mic i {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E");
}

/* Icona microfono spento (silenziato) */
.meet .buttons button.mic.active i {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='2' x2='22' y1='2' y2='22'/%3E%3Cpath d='M18.89 13.23A7.12 7.12 0 0 0 19 12v-2'/%3E%3Cpath d='M5 10v2a7 7 0 0 0 12 5'/%3E%3Cpath d='M15 9.34V5a3 3 0 0 0-5.68-1.33'/%3E%3Cpath d='M9 9v3a3 3 0 0 0 5.12 2.12'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E");
}

/* Bottone microfono silenziato - sfondo rosso */
.meet .buttons button.mic.active {
  background-color: rgba(229, 57, 53, 0.8);
}

.meet .buttons button.mic.active:hover {
  background-color: rgba(198, 40, 40, 0.9);
}

/* Icona camera accesa */
.meet .buttons button.cam i {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E");
}

/* Icona camera spenta */
.meet .buttons button.cam.active i {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.66 6H14a2 2 0 0 1 2 2v2.34l1 1L22 8v8'/%3E%3Cpath d='M16 16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h2l10 10Z'/%3E%3Cline x1='2' x2='22' y1='2' y2='22'/%3E%3C/svg%3E");
}

/* Bottone camera spenta - sfondo rosso */
.meet .buttons button.cam.active {
  background-color: rgba(229, 57, 53, 0.8);
}

.meet .buttons button.cam.active:hover {
  background-color: rgba(198, 40, 40, 0.9);
}

/* Icona condivisione schermo */
.meet .buttons button.share i {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='m17 8 5-5'/%3E%3Cpath d='M17 3h5v5'/%3E%3C/svg%3E");
}

/* Icona stop condivisione schermo */
.meet .buttons button.share.active i {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3H4a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-3'/%3E%3Cpath d='M8 21h8'/%3E%3Cpath d='M12 17v4'/%3E%3Cpath d='m22 3-5 5'/%3E%3Cpath d='M17 3h5v5'/%3E%3C/svg%3E");
}

/* Bottone condivisione attiva - sfondo blu */
.meet .buttons button.share.active {
  background-color: rgba(37, 99, 235, 0.8);
}

.meet .buttons button.share.active:hover {
  background-color: rgba(30, 64, 175, 0.9);
}

/* Icona impostazioni */
.meet .buttons button.settings i {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Icona entra in chiamata */
.meet .buttons button.join i {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}

/* Bottone entra in chiamata - sfondo verde */
.meet .buttons button.join {
  background-color: rgba(67, 160, 71, 0.8);
}

.meet .buttons button.join:hover {
  background-color: rgba(56, 142, 60, 0.9);
}

/* Icona termina chiamata (telefono ruotato) */
.meet .buttons button.join.joined i {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
  transform: rotate(135deg);
}

/* Bottone termina chiamata - sfondo rosso */
.meet .buttons button.join.joined {
  background-color: #e53935;
}

.meet .buttons button.join.joined:hover {
  background-color: #c62828;
}

header {
  display: grid;
  grid-auto-flow: column;
  justify-items: start;
  align-items: center;
  background-color: #fff;
  position: sticky;
  top: 0;
  margin: -8px -8px 24px;
  padding: 16px 4%;
  box-shadow: rgba(32, 33, 37, 0.1) 0px 0px 16px 0px;
}
header img {
  display: block;
  height: 32px;
}
header a.create {
  justify-self: end;
}
main {
  background-color: #f4f7fb;
  border-radius: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
main > :first-child {
  margin-top: 0;
}
main > :last-child {
  margin-bottom: 0;
}
main.center {
  display: grid;
  justify-items: center;
  gap: 32px;
}
main.center > * {
  margin: 0;
}
main.center h1,
main.center h2,
main.center p,
main.center i {
  text-align: center;
}
main.center ul {
  padding-inline-start: 16px;
}
main.faq p {
  margin-left: 1.5em;
}
main.h2-count {
  counter-reset: h2c;
}
main.h2-count h2:not(.no-count)::before {
  content: counter(h2c) ". ";
  counter-increment: h2c;
}
main code {
  color: green;
}
main ul.fancy {
  line-height: 1.6;
}
main ul.fancy li::marker {
  color: #1BB632;
}
main img.e2ee {
  display: block;
  max-width: 400px;
  width: 100%;
  margin-bottom: 8px;
}
main img.vmr {
  width: 100%;
}
main .copy-clipboard {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5em;
  width: 100%;
  max-width: 400px;
}
main .copy-clipboard button i {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='rgb(51,51,51)' d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM112 192l160 0c8.8 0 16 7.2 16 16s-7.2 16-16 16l-160 0c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/></svg>");
  pointer-events: none;
}
main .copy-clipboard button.copied i {
  content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path fill='rgb(51,51,51)' d='M192 0c-41.8 0-77.4 26.7-90.5 64L64 64C28.7 64 0 92.7 0 128L0 448c0 35.3 28.7 64 64 64l256 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64l-37.5 0C269.4 26.7 233.8 0 192 0zm0 64a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM305 273L177 401c-9.4 9.4-24.6 9.4-33.9 0L79 337c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L271 239c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/></svg>");
}
footer {
  display: grid;
  justify-content: center;
  grid-auto-flow: column;
  margin: 32px 0;
  gap: 12px;
}
footer a {
  font-size: 0.875em;
  color: inherit;
}
html, 
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  margin: 0;
  padding: 0;
  background-color: #f1eeea;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

body.home {
  overflow: auto;
}

.home-section {
  text-align: center;
  max-width: 60ch;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
  padding-inline: 20px;

  & .box1 {
    flex: 1; 
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  & p {
    text-wrap: auto;
    font-size: 1.25rem;
    line-height: 1.35;
  }

  & p.copy {
    font-size: 0.875rem;
    color: #666;
  }
}

/* Media Query per Mobile */
@media screen and (max-width: 768px) {
  .meet .videos.user > div:first-child {
    width: 120px;
    height: 90px;
  }

  .meet .buttons button i {
    width: 26px;
    height: 26px;
  }

  .meet .videos > div .video-muted i {
    height: 1.25em;
    margin-top: -0.85em;
  }

  /* Assicura che la label sul video grande sia visibile */
  .meet .videos.user > div:nth-child(2) .label {
    padding: 10px 12px;
    z-index: 9999;
  }
}

/* Media Query per schermi molto piccoli (smartphone) */
@media screen and (max-width: 480px) {
  .meet .videos.user > div:first-child {
    width: 100px;
    height: 75px;
    /* Con 100dvh il viewport è già quello visibile (senza chrome browser).
       115px = pulsanti (~70px) + bottom (10px) + safe area iPhone (~34px) + margine. */
    bottom: calc(80px + env(safe-area-inset-bottom, 34px));
    right: 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  .meet .buttons {
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
  }

  .meet .buttons button i {
    width: 24px;
    height: 24px;
  }

  .meet .videos > div .video-muted i {
    height: 1em;
  }

  /* Assicura che la label con il nome sia visibile su mobile */
  .meet .videos > div .label {
    padding: 6px 10px;
  }

  .meet .videos > div .label .name {
    font-size: 13px;
  }

  .meet .videos > div .label .mic {
    width: 14px;
    height: 14px;
  }
}