:root {
      --bg: #0f1115;
      --panel: #1b1f27;
      --panel-alt: #252b36;
      --accent: #4d7cff;
      --danger: #ff4d61;
      --text: #eef1f5;
      --text-dim: #9aa4b1;
      --radius: 18px;
      --trans: 160ms ease;

      height:100%;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;
      background: radial-gradient(circle at 30% 30%, #18202b, #0f1115 70%);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;

      height:100%;
    }
    header {
      padding: .75rem 1.25rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      background: linear-gradient(to right,#161b22,#1f2630);
      border-bottom: 1px solid #262f3b;
      box-shadow: 0 2px 6px -2px rgba(0,0,0,.4);
    }

    header .logo { margin-left: auto; display: inline-flex; align-items: center; }

    header h1 {
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: .5px;
      margin: 0;
      color: var(--text-dim);
    }
    main {
      flex: 1;
      display: flex;
      align-items: stretch;
      justify-content: center;
      padding: clamp(.75rem,1.5vw,1.5rem);
      gap: clamp(.75rem,2vw,2rem);
      height:100%;
    }
    .participant {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: linear-gradient(145deg,var(--panel),var(--panel-alt));
      border: 1px solid #2c3542;
      border-radius: var(--radius);
      position: relative;
      overflow: hidden;
      min-height: 300px;
    }
    .participant::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 70% 30%, rgba(255,255,255,0.05), transparent 60%);
      pointer-events: none;
    }
    .avatar-wrapper {
      width: clamp(160px, 30vw, 260px);
      aspect-ratio: 1;
      border-radius: 50%;
      background: linear-gradient(135deg,#334355,#1f2a36);
      border: 4px solid #3a4a5c;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      box-shadow: 0 8px 22px -10px rgba(0,0,0,.7), 0 0 0 4px rgba(77,124,255,.08);
      /* Allow halo to render OUTSIDE the circle */
      overflow: visible; /* changed from hidden */
      transition: border-color var(--trans), transform var(--trans);
    }
    /* New inner clip container keeps image circular while outer allows halo */
    .avatar-clip { width:100%; height:100%; border-radius:50%; overflow:hidden; position:relative; }
    .avatar-clip img { width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05); }
    .avatar-wrapper.active-speaker {
      border-color: var(--accent);
      transform: scale(1.03);
    }
    /* Pulsating halo via pseudo element */
    .avatar-wrapper.active-speaker::after {
      content: "";
      position: absolute;
      /* Make the halo extend well OUTSIDE the avatar */
      inset: -28px; /* increase or decrease for larger/smaller halo */
      border-radius: 50%;
      pointer-events: none;
      /* Transparent center, glow builds outward */
      background: radial-gradient(circle,
        rgba(77,124,255,0) 0%,
        rgba(77,124,255,0.18) 38%,
        rgba(77,124,255,0.30) 52%,
        rgba(77,124,255,0.12) 70%,
        rgba(77,124,255,0) 78%);
      /* Multiple outer ambient glows */
      box-shadow:
        0 0 6px 2px rgba(77,124,255,.55),
        0 0 18px 8px rgba(77,124,255,.35),
        0 0 36px 14px rgba(77,124,255,.25),
        0 0 54px 20px rgba(77,124,255,.15);
      animation: outwardHalo 2.6s ease-in-out infinite;
      mix-blend-mode: screen;
    }
    @keyframes outwardHalo {
      0% { transform: scale(.85); opacity:.9; filter: blur(2px); }
      35% { transform: scale(1); opacity:1; filter: blur(3px); }
      65% { transform: scale(1.05); opacity:.85; filter: blur(3.5px); }
      100% { transform: scale(.85); opacity:.9; filter: blur(2px); }
    }
    .avatar-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: saturate(1.05);
    }
    .name-tag {
      margin-top: 1rem;
      padding: .4rem .9rem;
      background: rgba(0,0,0,.35);
      backdrop-filter: blur(4px);
      border: 1px solid #2d3744;
      border-radius: 999px;
      font-size: .85rem;
      letter-spacing: .3px;
      display: flex;
      align-items: center;
      gap: .5rem;
      position: relative;
    }
    .name-tag .mic-status {
      width: .6rem;
      height: .6rem;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 3px rgba(77,124,255,.2);
      transition: background var(--trans), box-shadow var(--trans);
    }
    .name-tag.muted .mic-status { background: var(--danger); box-shadow: 0 0 0 3px rgba(255,77,97,.25);}    
    footer {
      position: sticky;
      bottom: 0;
      padding: .75rem 1.5rem 1.4rem;
      display: flex;
      justify-content: center;
      background: linear-gradient(to top, rgba(8,10,12,.85), rgba(8,10,12,.4));
      backdrop-filter: blur(10px);
    }
    .controls {
      display: flex;
      gap: 1rem;
      align-items: center;
      background: rgba(255,255,255,.06);
      border: 1px solid #2d3744;
      padding: .75rem 1rem;
      border-radius: 999px;
      box-shadow: 0 6px 18px -8px rgba(0,0,0,.6);
    }
    button.control-btn {
      --size: 52px;
      width: var(--size);
      height: var(--size);
      border-radius: 50%;
      border: 0;
      display: grid;
      place-items: center;
      font-size: 1.15rem;
      cursor: pointer;
      background: var(--panel-alt);
      color: var(--text);
      transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
      position: relative;
    }
    button.control-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    button.control-btn:hover { background: #2d3744; }
    button.control-btn:active { transform: scale(.92); }

    button#disconnectBtn {
      background: var(--danger);
      color: #fff;
      padding: 0;
      width: 55px;
      height: 55px;
      font-size: 1.25rem;
      box-shadow: 0 0 0 0 rgba(255,77,97,.4);
      animation: pulse 2.8s infinite;
    }
    button#disconnectBtn:hover { background: #ff3a51; }
    button#disconnectBtn:active { background: #e02238; }

    @keyframes pulse {
      0% { box-shadow: 0 0 0 0 rgba(255,77,97,.4); }
      70% { box-shadow: 0 0 0 18px rgba(255,77,97,0); }
      100% { box-shadow: 0 0 0 0 rgba(255,77,97,0); }
    }

    .control-btn[data-active="true"] {
      background: var(--danger);
      color: #fff;
    }
    .control-btn[data-active="true"]::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: 0 0 0 3px rgba(255,77,97,.4);
      pointer-events: none;
    }
    .sr-only {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0;
    }
    @media (max-width: 840px) {
      main { flex-direction: column; }
      .participant { min-height: 240px; }
      .avatar-wrapper { width: clamp(120px, 50vw, 200px); }
    }
    /* Pulsating halo animation */
  @keyframes haloPulse {
    0% { transform: scale(.98); opacity:.9; box-shadow: 0 0 0 0 rgba(77,124,255,.55); }
    40% { transform: scale(1); opacity:1; box-shadow: 0 0 0 10px rgba(77,124,255,0); }
    70% { transform: scale(.985); opacity:.85; box-shadow: 0 0 0 18px rgba(77,124,255,0); }
    100% { transform: scale(.98); opacity:.9; box-shadow: 0 0 0 0 rgba(77,124,255,0); }
  }

  .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: left;
      background: linear-gradient(145deg,var(--panel),var(--panel-alt));
      border: 1px solid #2c3542;
      border-radius: var(--radius);
      position: relative;
      overflow: hidden;
      min-height: 300px;
      padding: 0px;
      max-width: 1000px;
      line-height: 1.5;

      height:100%;
    }

  #main-section {
  /* .main already applies styles; just override the overflow */
  overflow-y: auto;           /* was hidden */
  -webkit-overflow-scrolling: touch;
}

  .main-wrappers {
    display: flex;
    flex-direction: column;
    justify-content: center;  /* vertical centering */
    align-items: center;      /* horizontal centering */
    gap: 1rem;
    width: 50%;
    min-height: 100%;        /* or height: 100vh; */
    margin: 0 auto;           /* center the 50%-wide container in the page */
    text-align: center;
    font-size: 1.15rem;
    letter-spacing: 0.5px;
    /* height:100%; */
    height: auto;               /* allow to grow if content is taller */
    min-height: 100%;           /* still fills the viewport when content is short */
    width: min(700px, 100%);    /* nicer on phones */
    padding: 1rem;              /* optional: breathing room */
  }

  .spinner-wrapper {
    justify-content: center;
    height: 100%;   /* or whatever makes sense */
    display: flex;
    flex-direction: column;  /* stack spinner and text */
    align-items: center;

    height:100%;
  }

  .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(0,0,0,0.1);
    border-top-color: #3498db;
    border-radius: 50%;
    animation: spin 1s ease-in-out infinite;
  }

  .spinner-text {
    margin-top: 0.5em;  /* space between spinner and text */
    font-size: 0.9rem;
    color: #555;
  }

  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .button {
    width: 150px;
    height: 30px;
    border-radius: 15px;
    cursor: pointer;
  }

#report-wrapper {
    width:100%;
    height: 100%;
}

  iframe {
    width: 100%;
    height: 100%;
    border: 0px;
    border-radius: 8px;
}

.codehilite {
    background: radial-gradient(circle at 30% 30%, #18202b, #0f1115 70%);
		padding: 15px;
		margin: 25px;
		border-radius: 15px;
		max-width: 900px;
	}

  .codeblock {
    white-space: pre-wrap;
    font-size: 10px;
  }

.captions {
  font-size: 12px;
  color: #ddd;
}

.errors {
  color:rgb(201, 67, 67) !important;
  font-size: 12px;
}

.links {
  color: deepskyblue !important;
  background: transparent;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
  font: inherit;
}