:root{
  --bg:#0f1216;
  --panel:#161a20;
  --panel-2:#1c2129;
  --muted:#93a1b2;
  --text:#e6edf3;
  --accent:#ffffff;
  --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:'Inter',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;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:16px;background:var(--topbar-bg);color:var(--topbar-text);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10;gap:12px}
.topbar__left{display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;width:100%}
.topbar__actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.brand{font-weight:700;color:var(--topbar-text)!important}
.topnav{
  display:flex;
  gap:22px;
  align-items:center;
  justify-content:space-between;
  width:100%;
  padding:16px 16px 0 16px;
  margin:0;
  box-sizing:border-box;
}
.topnav__divider{height:36px;width:2px;background:rgba(255,255,255,0.18);flex:0 0 auto}
.topbar .brand span,.topbar .brand #webinarTitle{color:var(--topbar-text)!important}
.webinar-brand{display:flex;flex-direction:row;align-items:center;gap:10px}
.webinar-brand img{padding-bottom:6px}
.webinar-brand__divider{display:block;width:2px;height:32px;background:rgba(255,255,255,0.18)}
.webinar-brand__text{display:flex;flex-direction:column;gap:2px}
.webinar-brand__title{font-size:1.1rem;font-weight:700;color:var(--topbar-text)}
.webinar-brand__client{font-size:0.95rem;color:var(--muted);font-weight:400}
.video-stats{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
.video-stat{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:600;font-size:.95rem}
.video-stat__icon{font-size:18px;height:18px;width:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.video-stat__value{font-variant-numeric:tabular-nums}
.user-pill{padding:4px 10px;background:var(--user-pill-bg);border:1px solid var(--border);border-radius:999px;color:var(--user-pill-text)}
.user-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0;
  border:none;
  border-radius:0;
  background:transparent;
  width:100%;
  box-sizing:border-box;
  overflow:hidden;
}
.user-avatar{width:50px;height:50px;border-radius:50%;background:var(--panel);border:1px solid var(--border);display:grid;place-items:center;font-weight:700;color:var(--topbar-text);text-transform:uppercase;flex:0 0 auto;font-size:1.05rem}
.user-details{display:flex;flex-direction:column;gap:2px}
.user-details{align-items:flex-end}
.user-name{color:var(--topbar-text);font-weight:600;font-size:0.95rem}
.user-email{color:var(--muted);font-size:0.85rem}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--panel-2);color:var(--topbar-text);text-decoration:none;font-weight:500;transition:background-color .18s ease,border-color .18s ease;font-size:14px}
.chip--ghost:hover{background:#0b0f15;border-color:var(--border)}
.chip--logout{border-radius:8px;font-weight:400}
.link{color:var(--accent);text-decoration:none}

.layout{
  display:flex;
  gap:12px;
  padding:16px;
  flex:1;
  min-height:0;
  align-items:flex-start;
  height:100%;
}
.video-pane{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  align-items:stretch;
  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-meta-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  max-width:min(100%, calc(var(--video-max-height) * 16 / 9));
  margin:0;
  gap:20px;
  box-sizing:border-box;
}
.layout.chat-closed .video-wrapper,
.layout.chat-closed .video-meta-row{
  width:min(100%, calc(var(--video-max-height) * 16 / 9));
  max-width:min(100%, calc(var(--video-max-height) * 16 / 9));
  margin-left:auto;
  margin-right:auto;
}
.video-branding{display:flex;align-items:center;gap:10px;padding:0;background:transparent;border:none;border-radius:8px;margin-top:0}
.video-branding--desktop{margin-top:0}
.video-branding--mobile{display:none}
.video-branding .tag{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.video-branding img{height:24px;max-width:140px;object-fit:contain;filter:drop-shadow(0 2px 6px rgba(0,0,0,.35))}
.video-stats{display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--text);font-weight:400;justify-content:flex-end;padding:0;border:none;background:transparent}
.video-stat{display:inline-flex;align-items:center;gap:6px;color:var(--text);font-weight:400;font-size:.95rem;padding:0;border:none;background:transparent}
.video-stat__icon{font-size:18px;height:18px;width:18px;display:inline-flex;align-items:center;justify-content:center;color:var(--muted)}
.video-stat__value{font-variant-numeric:tabular-nums}
/* Mobile video meta row no longer used */

/* 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:var(--bg);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:0 0 40%;
  min-width:320px;
  max-width:480px;
  display:flex;
  flex-direction:column;
  background:var(--chat-bg);
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden;
  min-height:0;
  height:100%;
  box-sizing:border-box;
  max-height:none;
  margin-bottom:12px;
}
.chat-header{padding:10px 12px;border-bottom:1px solid var(--border);background:var(--chat-header-bg);font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}
.chat-title{display:flex;align-items:center;gap:8px;font-size:14px}
.chat-title .material-symbols-outlined{font-size:20px}
.chat-toggle .material-symbols-outlined{font-size:20px}
.chat-toggle{border:none;background:transparent;color:var(--text);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;border-radius:6px;transition:transform .18s ease}
.chat-pane.chat-collapsed .chat-toggle span{transform:rotate(180deg)}
.chat-pane.chat-collapsed{
  flex:0 0 auto;
  width:auto;
  min-width:fit-content;
  max-width:fit-content;
  overflow:hidden;
  align-items:center;
  height:auto;
  min-height:auto;
  max-height:none;
}
.chat-pane.chat-collapsed > *:not(.chat-header){display:none!important}
.chat-pane.chat-collapsed .chat-header{justify-content:center;height:auto;writing-mode:horizontal-tb;transform:none;cursor:pointer}
.chat-pane.chat-collapsed .chat-header .chat-title{display:flex;justify-content:center;align-items:center;gap:6px}
.chat-pane.chat-collapsed .chat-header .chat-title span{display:inline}
.pinned-message{
  display:none;
  flex-direction:column;
  gap:8px;
  margin:12px;
  padding:10px 12px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:8px;
}

.chat-header{padding:10px 12px;border-bottom:1px solid var(--border);background:var(--chat-header-bg);font-weight:600}
.pinned-message{
  display:none;
  flex-direction:column;
  gap:8px;
  margin:12px 12px 0;
  padding:10px 12px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:8px;
}
.pinned-message.pinned-message--visible{display:flex}
.pinned-message__header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pinned-message__label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  font-weight:600;
  font-weight:400;
  color:var(--text);
  background:#161a20;
  border:1px solid #2a313c;
  border-radius:999px;
  padding:4px 10px;
  line-height:1;
}
.pinned-message__icon{font-size:18px;line-height:1;color:#7342F7}
.pinned-message__unpin{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:12px}
.pinned-message__unpin:hover{color:var(--text)}
.pinned-message__body{display:flex;flex-direction:column;gap:8px}
.pinned-message__text{font-size:14px;color:var(--text);line-height:1.4}
.pinned-message__meta{
  font-size:12px;
  color:var(--muted);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
}
.pinned-message__author{font-weight:400;color:var(--text)}
.pinned-message__time{white-space:nowrap}
.messages{list-style:none;margin:0;padding:12px;gap:8px;row-gap:8px;display:flex;flex-direction:column;overflow:auto;flex:1}
.messages::-webkit-scrollbar{width:10px}
.messages::-webkit-scrollbar-track{background:var(--panel-2)}
.messages::-webkit-scrollbar-thumb{background:#0b0f15;border:2px solid var(--panel-2);border-radius:999px}
.messages::-webkit-scrollbar-thumb:hover{background:#11151b}
.msg,.sys{display:flex;flex-direction:column;gap:14px;padding:12px 10px;border-radius:8px;background:var(--chat-bubble-bg);color:var(--chat-bubble-text)}
.msg{border:1px solid #2a313c}
.msg.msg--self{background:#2a313c;border:1px solid transparent}
.msg .meta{
  font-size:12px;
  color:var(--chat-bubble-text);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
  flex-wrap:wrap;
}
.meta-host{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid #7342F7;
  background:#7342F7;
  color:#ffffff;
  font-size:11px;
  font-weight:400;
  line-height:1;
  width:-moz-fit-content;
  width:fit-content;
}
.meta-host--topbar{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #7342F7;
  background:#7342F7;
  color:#ffffff;
  font-size:14px;
  font-weight:400;
  gap:6px;
}
.msg .meta-name-group{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.msg .meta-time{color:var(--muted)}
.msg .meta-host{order:0}
.user-details .meta-host{margin-bottom:6px}
.msg .text{font-size:14px;line-height:1.4}
.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;
  align-items:center;
  position:relative;
}
.chat-form.chat-disabled{opacity:.6}
.chat-form input{
  flex:1;
  padding:12px;
  border-radius:8px;
  border:1px solid var(--border);
  background:#0c1015;
  color:#e6edf3;
  font-size:1rem;
  caret-color:var(--text);
}
.chat-form input::placeholder{color:#2a313c}
.chat-form input:focus{
  outline:none;
  border:1px solid #ffffff;
  box-shadow:none;
}
.chat-emoji-wrapper{position:relative;display:flex;align-items:center}
.chat-emoji{
  background:var(--panel);
  border:1px solid var(--border);
  color:var(--muted);
  border-radius:8px;
  padding:8px;
  cursor:pointer;
  font-size:0.95rem;
  transition:color .15s ease, transform .15s ease, border-color .15s ease, background-color .15s ease;
  display:grid;
  place-items:center;
}
.chat-emoji:hover{color:#ffffff;transform:translateY(-1px);border-color:#7342F7;background:var(--panel-2)}
.chat-emoji:focus{outline:none;border-color:#ffffff}
.chat-emoji-menu{
  position:fixed;
  top:0;
  left:0;
  display:none;
  grid-template-columns:repeat(6,minmax(28px,1fr));
  gap:4px;
  padding:8px;
  background:var(--panel-2);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,0.4);
  z-index:200;
  min-width:220px;
  width:max-content;
  max-width:320px;
  overflow:hidden;
  box-sizing:border-box;
  color:var(--text);
}
.chat-emoji-menu.open{display:grid}
.chat-emoji-option{
  background:transparent!important;
  border:1px solid transparent!important;
  border-radius:8px;
  padding:6px;
  font-size:20px!important;
  cursor:pointer;
  transition:border-color .15s ease, color .15s ease, transform .15s ease, background-color .15s ease;
  display:flex;
  align-items:center;
  justify-content:center;
  -webkit-appearance:none;
  appearance:none;
}
.chat-emoji-option:hover,
.chat-emoji-option:focus{
  border-color:transparent!important;
  outline:none;
  color:#ffffff;
  transform:none;
  background:#161a20!important;
}
.chat-form .chat-send{
  padding:10px 16px;
  border-radius:8px;
  border:1px solid #7342F7;
  background:#7342F7;
  color:#ffffff;
  cursor:pointer;
  font-size:1rem;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
}
.chat-form .chat-send:hover{
  background:#8155F8;
  border-color:#8155F8;
}
.chat-form button.chat-emoji{
  padding:12px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--muted);
  font-size:18px!important;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease;
  height:100%;
  min-height:44px;
  display:flex;
  align-items:center;
}
.chat-form button.chat-emoji:hover{
  background:#0b0f15;
  border-color:var(--border);
  color:#ffffff;
  transform:none;
}
.chat-form button.chat-emoji.chat-emoji--active{
  background:#0b0f15;
  border-color:var(--border);
  color:#ffffff;
  transform:none;
}

.reactions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:0;
  align-items:center;
  justify-content:flex-start;
  min-height:0;
}
.reactions.reactions--visible{display:none;gap:6px}
.msg:hover .reactions.reactions--visible{display:flex;opacity:1}
.reactions.reactions--empty{
  margin-top:0;
  height:0;
  padding:0;
  display:none;
}
.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;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1.2;
  min-height:28px;
}
.reaction-pill:hover{
  background:rgba(255,255,255,0.18);
}
.reaction-pill--active{
  border-color:var(--accent);
  background:rgba(255,255,255,0.28);
}
.reaction-suggestions{
  display:none;
  gap:6px;
}
.msg:hover .reaction-suggestions,
.reaction-suggestions.reaction-suggestions--active{
  display:flex;
}
.reaction-list:not(:empty)+.reaction-suggestions{margin-left:0}
.reaction-list:empty{display:none}
.msg:hover .reaction-suggestions{
  display:flex;
}
.reaction-add{
  background:var(--panel-2);
  border:1px dashed transparent;
  border-radius:999px;
  padding:4px 10px;
  font-size:0.8rem;
  cursor:pointer;
  color:var(--muted);
  transition:border-color 0.15s ease,color 0.15s ease, background 0.15s ease;
  line-height:1.2;
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.reaction-add.reaction-add--active{
  border-color:var(--accent);
  color:var(--text);
  background:rgba(255,255,255,0.08);
}
.reaction-add--reply{
  font-weight:400;
}
.reaction-add--remove{
  font-weight:400;
}
.reaction-add:hover{
  border-color:var(--accent);
  color:var(--text);
  background:rgba(255,255,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;
}
.chat-error{
  display:none;
  margin-top:6px;
  padding:8px 10px;
  border:1px solid #f97070;
  border-radius:8px;
  background:rgba(249,112,112,0.12);
  color:#ffb3b3;
  font-size:0.9rem;
  line-height:1.4;
}
.reply-reference{
  display:block;
  width:100%;
  text-align:left;
  border:1px solid transparent;
  background:rgba(255,255,255,0.08);
  color:var(--accent);
  padding:6px 10px;
  border-radius:6px;
  margin:0;
  margin-bottom:6px;
  font-size:0.85rem;
  cursor:pointer;
  transition:background-color 0.18s ease, color 0.18s ease;
}
.reply-reference:hover{
  background:rgba(255,255,255,0.18);
}
.msg--highlight{
  animation: msgHighlight 1.2s ease;
}
@keyframes msgHighlight{
  0%{box-shadow:0 0 0 rgba(255,255,255,0);}
  30%{box-shadow:0 0 0 4px rgba(255,255,255,0.35);}
  100%{box-shadow:0 0 0 rgba(255,255,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-customer{padding-bottom:1rem}
.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{border-top:1px solid var(--border);padding-top:16px;margin-top:8px}
.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-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.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){
  .topbar{flex-direction:column;align-items:flex-start;gap:2rem;padding:16px;position:relative}
  .topnav{width:100%;justify-content:space-between;flex-wrap:wrap;gap:12px}
  .topnav__divider{display:none}
  .brand.webinar-brand{gap:10px;flex-direction:column;align-items:flex-start}
  .webinar-brand__text{border-left:0;padding-left:0}
  .webinar-brand__divider{display:block;width:100%;height:2px;background:rgba(255,255,255,0.18)}
  .user-card{width:100%;flex-wrap:wrap}
  .topbar__actions{width:100%;flex-wrap:wrap}
  #logoutLink{align-self:flex-start}
  html,body{height:100%;overflow:auto}
  main.layout{
    flex:1;
    flex-direction:column;
    height:auto;
    min-height:calc(100vh - 50px);
    padding:16px;
    gap:8px;
  }
  .video-pane{
    flex:0 0 auto;
    width:100%;
    max-width:100%;
    height:auto;
  }
  .video-wrapper{
    width:100%;
    max-width:100%;
    max-height:none;
    flex:0 0 auto;
    margin:0;
  }
  .video-meta-row{
    width:100%;
    max-width:100%;
    margin:8px 0 0;
  }
  .video-branding--desktop{display:flex}
  .chat-pane{
    flex:1 1 auto;
    width:100%;
    max-width:none;
    min-width:0;
    height:auto;
    max-height:none;
    border-radius:8px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-height:320px;
  }
  .chat-pane .chat-header,
  .chat-pane .chat-body,
  .chat-pane .chat-footer{
    display:flex;
  }
  .chat-footer{
    position:relative;
    bottom:0;
    z-index:30;
    background:rgba(28,33,41,.96);
    backdrop-filter:blur(6px);
    border-radius:8px;
    padding:12px;
    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%}
}