:root{
  --bg:#0f1216;
  --panel:#161a20;
  --panel-2:#1c2129;
  --muted:#93a1b2;
  --text:#e6edf3;
  --accent:#4f8cff;
  --ok:#36c48f;
  --danger:#ff6363;
  --border:#2a313c;
  --topbar-bg:var(--panel);
  --topbar-text:#ffffff;
  --chat-bg:var(--panel);
  --chat-header-bg:var(--panel-2);
  --chat-footer-bg:var(--panel-2);
  --button-primary:var(--accent);
  --button-primary-text:#ffffff;
  --chat-bubble-bg:#11151b;
  --chat-bubble-text:var(--text);
  --chat-input-bg:#0c1015;
  --chat-input-text:var(--text);
  --user-pill-bg:var(--panel-2);
  --user-pill-text:var(--muted);
  --mobile-branding-height:64px;
  --video-max-height:calc(100vh - 210px);
}
*{box-sizing:border-box}
html,body{height:100%;overflow:auto}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;background:var(--bg);color:var(--text);display:flex;flex-direction:column}

.topbar{display:flex;align-items:center;justify-content:space-between;padding:25px;background:var(--topbar-bg);color:var(--topbar-text);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.brand{font-weight:700;color:var(--topbar-text)!important}
.topnav{display:flex;gap:12px;align-items:center}
.topbar .brand span,.topbar .brand #webinarTitle{color:var(--topbar-text)!important}
.user-pill{padding:4px 10px;background:var(--user-pill-bg);border:1px solid var(--border);border-radius:999px;color:var(--user-pill-text)}
.link{color:var(--accent);text-decoration:none}

.layout{
  display:flex;
  gap:12px;
  padding:12px;
  flex:1;
  min-height:0;
}
.video-pane{
  flex:2 1 640px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:flex-start;
  min-height:0;
}
.video-wrapper{
  position:relative;
  width:min(100%, calc(var(--video-max-height) * 16 / 9));
  max-width:100%;
  height:auto;
  max-height:var(--video-max-height);
  aspect-ratio:16 / 9;
  flex:0 0 auto;
}
.video-wrapper > iframe,
.video-wrapper > .video-error,
.video-wrapper > .autoplay-overlay,
.video-wrapper > .dacast-player{
  position:absolute;
  inset:0;
}
.video-pane iframe{
  width:100%;
  height:100%;
  border:0;
  border-radius:8px;
  display:block;
}
.video-error{padding:40px;border:1px solid var(--border);border-radius:10px;background:var(--panel);text-align:center;color:var(--muted)}
.video-branding{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
}
.video-branding--desktop{margin-top:auto}
.video-branding--mobile{display:none}
.video-branding .tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.video-branding img{height:32px;max-width:160px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}

/* Autoplay overlay shown when autoplay w/ sound is blocked */
.autoplay-overlay{position:absolute;inset:0;display:grid;place-items:center;border-radius:8px;border:1px solid var(--border);background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.55));color:var(--text);cursor:pointer}
.autoplay-overlay .overlay-title{padding:10px 14px;background:var(--accent);color:white;border:1px solid var(--border);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.autoplay-overlay[hidden]{display:none}
.chat-pane{
  flex:1 1 320px;
  min-width:300px;
  max-width:460px;
  display:flex;
  flex-direction:column;
  background:var(--chat-bg);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  min-height:0;
}
.chat-header{padding:10px 12px;border-bottom:1px solid var(--border);background:var(--chat-header-bg);font-weight:600}
.messages{list-style:none;margin:0;padding:12px;gap:8px;display:flex;flex-direction:column;overflow:auto;flex:1}
.msg,.sys{display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:8px;background:var(--chat-bubble-bg);color:var(--chat-bubble-text)}
.msg .meta{font-size:12px;color:var(--chat-bubble-text)}
.msg .text{font-size:15px;line-height:1.35}
.sys{opacity:.8;background:transparent;border:1px dashed var(--border);color:var(--muted)}
.chat-footer{
  margin-top:auto;
  padding:12px;
  border-top:1px solid var(--border);
  background:var(--chat-footer-bg);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.chat-form{
  display:flex;
  gap:8px;
}
.chat-form.chat-disabled{opacity:.6}
.chat-form input{flex:1;padding:10px;border-radius:6px;border:1px solid var(--border);background:var(--chat-input-bg);color:var(--chat-input-text)}
.chat-form button{padding:10px 14px;border-radius:6px;border:1px solid var(--border);background:var(--button-primary);color:var(--button-primary-text);cursor:pointer}

.reactions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px;
  align-items:center;
}
.reactions.reactions--empty{
  margin-top:4px;
}
.reaction-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.reaction-pill{
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:4px 10px;
  font-size:0.8rem;
  cursor:pointer;
  color:var(--text);
  transition:background 0.15s ease, border-color 0.15s ease;
}
.reaction-pill:hover{
  background:rgba(79,140,255,0.18);
}
.reaction-pill--active{
  border-color:var(--accent);
  background:rgba(79,140,255,0.28);
}
.reaction-suggestions{
  display:none;
  gap:4px;
}
.msg:hover .reaction-suggestions{
  display:flex;
}
.reaction-add{
  background:var(--panel-2);
  border:1px dashed var(--border);
  border-radius:999px;
  padding:4px 8px;
  font-size:0.78rem;
  cursor:pointer;
  color:var(--muted);
  transition:border-color 0.15s ease,color 0.15s ease, background 0.15s ease;
}
.reaction-add--reply{
  font-weight:600;
}
.reaction-add:hover{
  border-color:var(--accent);
  color:var(--text);
  background:rgba(79,140,255,0.08);
}
.reply-info{
  display:none;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel);
  color:var(--muted);
  font-size:0.85rem;
}
.reply-info button{
  background:transparent;
  border:0;
  color:var(--accent);
  cursor:pointer;
  font-size:0.85rem;
}
.reply-reference{
  display:block;
  width:100%;
  text-align:left;
  border:1px solid transparent;
  background:rgba(79,140,255,0.08);
  color:var(--accent);
  padding:6px 10px;
  border-radius:6px;
  margin-bottom:6px;
  font-size:0.85rem;
  cursor:pointer;
}
.reply-reference:hover{
  background:rgba(79,140,255,0.15);
}
.msg--highlight{
  animation: msgHighlight 1.2s ease;
}
@keyframes msgHighlight{
  0%{box-shadow:0 0 0 rgba(79,140,255,0);}
  30%{box-shadow:0 0 0 4px rgba(79,140,255,0.35);}
  100%{box-shadow:0 0 0 rgba(79,140,255,0);}
}
/* legacy placeholder styles kept for reference
.video-placeholder{position:relative;width:100%;height:100%;min-height:360px;background:linear-gradient(135deg,#0c1015,#121821);border:1px solid var(--border);border-radius:8px;display:grid;place-items:center}
.video-text{opacity:.6;letter-spacing:.08em;text-transform:uppercase}
*/

/* Auth page */
.auth-page{display:flex;flex-direction:column;align-items:stretch;min-height:100%;padding:0;gap:24px}
.auth-page .topbar{width:100%;box-sizing:border-box;margin:0 auto}
.auth-main{display:flex;justify-content:center;padding:80px 16px;box-sizing:border-box;width:100%}
.auth-card{width:min(640px,94vw);background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:28px;display:flex;flex-direction:column;gap:14px;margin:0 auto}
.auth-card h1{margin:4px 0 2px;font-size:1.6rem}
.auth-customer{margin:0 0 6px;color:var(--muted)}
.auth-card .home-webinar__badge{margin-bottom:6px}
.auth-card p{margin:0;color:var(--muted)}
.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-form label{display:flex;flex-direction:column;gap:8px;color:var(--muted)}
.auth-form input{padding:12px;border-radius:6px;border:1px solid var(--border);background:#0c1015;color:var(--text);font-size:1rem}
.auth-form input::placeholder{color:var(--muted)}
.auth-form input:focus{outline:none;border:1px solid #ffffff;box-shadow:none}
.auth-form input:-webkit-autofill,
.auth-form input:-webkit-autofill:hover,
.auth-form input:-webkit-autofill:focus,
.auth-form input:-webkit-autofill:active{box-shadow:0 0 0 1000px #0c1015 inset;-webkit-text-fill-color:var(--text);caret-color:var(--text)}
.auth-form button{align-self:flex-start;padding:10px 14px;border-radius:6px;border:1px solid #7342F7;background:#7342F7;color:#ffffff;cursor:pointer;transition:background-color .18s ease,border-color .18s ease,color .18s ease;font-weight:400;font-size:1rem;margin-top:8px}
.auth-form button:hover{background:#8155F8;border-color:#8155F8}
.auth-status{margin:0;padding:8px 10px;border:1px dashed var(--border);border-radius:8px;color:var(--muted);background:rgba(255,99,99,0.08)}

.home-page{min-height:100%;display:flex;flex-direction:column;background:var(--bg);color:var(--text)}
.home-content{flex:1;display:flex;flex-direction:column;gap:32px;padding:80px 16px 80px;max-width:960px;margin:0 auto;width:100%}
.home-hero{margin-bottom:0;max-width:800px}
.home-hero h1{margin:0 0 8px;font-size:2rem}
.home-hero p{margin:0;color:var(--muted);line-height:1.6}
.home-filters{display:flex;flex-direction:column;align-items:flex-start;gap:8px;margin-top:-8px}
.home-filters__controls{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.home-filter__group{display:flex;flex-direction:column;gap:6px}
.home-filter__label{font-size:0.95rem;color:var(--muted);display:none}
.home-filter__select,.home-search__input{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:12px 42px 12px 16px;font-size:0.98rem;min-width:200px;width:350px;max-width:100%}
.home-filter__select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:calc(100% - 14px) 50%;background-size:14px 14px;padding-right:42px}
.home-filter__select:focus,.home-search__input:focus{outline:none;border-color:#ffffff;box-shadow:none}
.home-search__input::placeholder{color:var(--muted)}
.home-search{position:relative}
.home-search__icon{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.home-search__input::-webkit-search-decoration,
.home-search__input::-webkit-search-cancel-button,
.home-search__input::-webkit-search-results-button,
.home-search__input::-webkit-search-results-decoration{display:none}
.home-list{flex:1;margin-top:8px}
.home-webinars{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:16px}
.home-webinar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:18px;border:1px solid var(--border);border-radius:12px;background:var(--panel)}
.home-webinar--active{border-color:#7342F7;background:#7441f717}
.home-webinar__body{display:flex;flex-direction:column;gap:16px}
.home-webinar__body h2{margin:0 0 12px;font-size:1.25rem}
.home-webinar__meta{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:1.25rem 2rem;align-items:flex-start;width:100%}
.home-webinar__badge{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:999px;background:rgba(54,196,143,0.14);color:#ffffff;font-weight:500;width:fit-content;font-size:12px;margin-bottom:8px}
.home-webinar__badge-dot{width:8px;height:8px;border-radius:50%;background:#36c48f;display:inline-block;animation:livePulse 1.4s ease-in-out infinite}
.home-webinar__badge[hidden]{display:none!important}
.home-webinar__header{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.home-webinar__header h2{margin:0;font-size:1.25rem}
.home-webinar__meta-row{display:flex;align-items:flex-start;gap:10px;color:var(--muted);padding-bottom:6px}
.home-webinar__meta-icon{display:grid;place-items:center;width:32px;height:32px;border:1px solid var(--border);border-radius:8px;background:var(--panel-2);color:#ffffff;flex:0 0 auto}
.home-webinar__meta-icon svg{width:18px;height:18px;display:block}
.home-webinar__meta-copy{display:flex;flex-direction:column;gap:4px}
.home-webinar__meta-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.home-webinar__meta-date{display:flex;align-items:center;font-weight:400;color:var(--text);line-height:1.3}
.home-webinar__meta-time{font-size:0.95rem;color:var(--muted);font-weight:400;line-height:1.3}
.home-webinar__meta-sep{display:inline-flex;align-items:center;width:2px;height:14px;background:var(--muted);margin:0 10px;vertical-align:middle}
.home-webinar__meta-time-inline{color:#ffffff;font-weight:400;line-height:1.3}
.home-webinar__notice{margin:0;color:var(--muted);font-size:0.95rem}
.home-webinar__provider{font-size:0.9rem}
.home-webinar__actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.home-cta{padding:10px 16px;border-radius:8px;background:#7342F7;color:white;text-decoration:none;font-weight:400;transition:background-color .18s ease,border-color .18s ease,color .18s ease;border:1px solid #7342F7}
.home-cta:not(.home-cta--disabled):hover{background:#8155F8;border-color:#8155F8}
.home-cta--disabled{background:var(--panel-2);color:var(--muted);cursor:not-allowed;pointer-events:none;border-color:var(--border);transition:none}
.home-cta--ghost{background:var(--panel-2);color:#ffffff;border-color:var(--border)}
.home-cta--ghost:hover,.home-cta.home-cta--ghost:hover{background:#0b0f15;color:#ffffff;border-color:var(--border)}
.home-divider{border-top:1px solid var(--border);margin:2px 0;list-style:none;height:0}
.home-list{padding-bottom:0}
.home-section-title{list-style:none;margin:12px 0 6px;font-size:0.95rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.home-loading,.home-empty,.home-error{padding:20px;border:1px dashed var(--border);border-radius:10px;text-align:center;color:var(--muted)}

@keyframes livePulse{
  0%{opacity:.95;box-shadow:0 0 0 0 rgba(54,196,143,0.6)}
  60%{opacity:.55;box-shadow:0 0 0 8px rgba(54,196,143,0)}
  100%{opacity:.95;box-shadow:0 0 0 0 rgba(54,196,143,0)}
}

@media (max-width: 980px){
  html,body{height:100%;overflow:auto}
  main.layout{
    flex:1;
    flex-direction:column;
    height:auto;
    min-height:calc(100vh - 50px);
    gap:8px;
  }
  .video-pane{
    flex:0 0 auto;
  }
  .video-wrapper{
    width:100%;
    max-width:none;
    max-height:none;
    flex:0 0 auto;
  }
  .video-branding--desktop{display:none}
  .chat-pane{
    flex:1 1 auto;
    width:100%;
    max-width:none;
    min-width:0;
    border-radius:12px 12px 0 0;
    overflow:hidden;
  }
  .messages{
    padding-bottom:calc(var(--mobile-branding-height) + 120px);
  }
  .chat-footer{
    position:sticky;
    bottom:0;
    z-index:30;
    background:rgba(28,33,41,.96);
    backdrop-filter:blur(6px);
    border-radius:12px 12px 0 0;
    padding:12px 12px 8px;
    gap:12px;
    border-top:1px solid rgba(42,49,60,.7);
  }
  .chat-footer .video-branding--mobile{
    display:flex;
    justify-content:center;
    align-items:center;
    height:var(--mobile-branding-height);
    padding:8px 16px;
    border:1px solid var(--border);
    border-radius:10px;
    background:rgba(22,26,32,.9);
  }
  .chat-form{
    padding:0;
  }
  .home-content{padding:36px 14px 40px}
  .home-webinar{flex-direction:column;align-items:flex-start}
  .home-webinar__actions{width:100%}
  .home-cta{display:inline-block;width:100%;text-align:center}
  .home-webinar__meta{grid-template-columns:1fr}
  .home-filters__controls{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .home-filter__group{width:100%}
  .home-filter__select,.home-search__input{width:100%}
}