/* =====================================================================
   ui-extra.css — styling for two features that ship with the site but
   previously had no CSS and were not wired into the page:
     1) the command-palette style site search  (search.js)
     2) the floating AI assistant widget        (assistant.js)
   Everything below reuses the existing design tokens from style.css
   (--bg-2, --card, --accent, --font-display, …) so it inherits the
   dark/light themes automatically. Load this AFTER style.css.
   ===================================================================== */

/* =====================================================================
   1) SITE SEARCH  (overlay opened with the nav button, "/" or ⌘/Ctrl-K)
   ===================================================================== */
.search-overlay{
  position:fixed; inset:0; z-index:1200;
  display:flex; align-items:flex-start; justify-content:center;
  padding:14vh 20px 24px;
  background:rgba(4,8,20,.66);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
/* beat the UA [hidden] / .search-overlay specificity tie */
.search-overlay[hidden]{ display:none; }
body.search-open{ overflow:hidden; }

.search-box{
  width:min(640px, 100%);
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.55);
  overflow:hidden;
  animation:searchIn .22s ease;
}
@keyframes searchIn{
  from{ opacity:0; transform:translateY(-10px) scale(.985); }
  to{ opacity:1; transform:none; }
}

.search-field{
  display:flex; align-items:center; gap:10px;
  padding:14px; border-bottom:1px solid var(--border);
}
.search-field .search-ico{ width:20px; height:20px; color:var(--accent); flex:none; }
#searchInput{
  flex:1; min-width:0; background:transparent; border:none; outline:none;
  color:var(--text); font-family:var(--font-body); font-size:1.05rem;
}
#searchInput::placeholder{ color:var(--muted); }
.search-kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.68rem;
  color:var(--muted); border:1px solid var(--border); border-radius:6px;
  padding:3px 7px; background:rgba(255,255,255,.04); flex:none;
}
.search-close{
  border:none; background:transparent; color:var(--muted); cursor:pointer;
  width:32px; height:32px; border-radius:8px; font-size:1.5rem; line-height:1; flex:none;
  display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s;
}
.search-close:hover{ color:var(--text); background:rgba(255,255,255,.06); }

.search-results{ list-style:none; margin:0; padding:6px; max-height:54vh; overflow-y:auto; }
.search-result{
  display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left;
  padding:12px; border:none; background:transparent; cursor:pointer;
  border-radius:var(--radius-md); color:var(--text); font-family:var(--font-body);
  transition:background .15s ease;
}
.search-result:hover,
.search-result.active{ background:var(--card-hover); }
.sr-badge{
  flex:none; margin-top:2px; font-size:.64rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; color:var(--accent);
  background:rgba(125,211,252,.12); border:1px solid rgba(125,211,252,.2);
  padding:4px 8px; border-radius:999px;
}
.sr-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.sr-title{ font-weight:700; font-size:.96rem; line-height:1.3; }
.sr-snip{
  font-size:.84rem; color:var(--muted); line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.search-hint{ margin:0; padding:14px 16px 18px; color:var(--muted); font-size:.9rem; line-height:1.5; }

/* highlight the element we jump to after picking a result */
.search-hit{ animation:searchHit 1.8s ease; border-radius:var(--radius-md); }
@keyframes searchHit{
  0%,100%{ box-shadow:0 0 0 0 rgba(125,211,252,0); }
  18%    { box-shadow:0 0 0 3px rgba(125,211,252,.55); }
}

/* =====================================================================
   2) AI ASSISTANT WIDGET  (floating bubble, bottom-right)
   ===================================================================== */
.ai-widget{ position:fixed; right:22px; bottom:22px; z-index:1100; font-family:var(--font-body); }

.ai-fab{
  width:58px; height:58px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(125,211,252,.4);
  background:linear-gradient(135deg, var(--accent-strong), var(--accent));
  color:#04203a;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  transition:transform .2s ease, filter .2s ease;
}
.ai-fab:hover{ transform:translateY(-2px) scale(1.04); filter:brightness(1.05); }
.ai-fab-ico{ width:24px; height:24px; }
/* gentle attention pulse only while collapsed */
.ai-widget:not(.open) .ai-fab{ animation:aiPulse 3.4s ease-out infinite; }
@keyframes aiPulse{
  0%  { box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 0 rgba(125,211,252,.45); }
  70% { box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 15px rgba(125,211,252,0); }
  100%{ box-shadow:0 10px 30px rgba(0,0,0,.45), 0 0 0 0 rgba(125,211,252,0); }
}

.ai-panel{
  position:absolute; right:0; bottom:72px;
  width:min(372px, calc(100vw - 36px));
  height:min(544px, calc(100vh - 130px));
  display:flex; flex-direction:column;
  background:var(--bg-2); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:0 24px 64px rgba(0,0,0,.55);
  overflow:hidden; animation:aiPanelIn .25s cubic-bezier(.4,0,.2,1);
}
.ai-panel[hidden]{ display:none; }
@keyframes aiPanelIn{
  from{ opacity:0; transform:translateY(16px) scale(.97); }
  to{ opacity:1; transform:none; }
}

.ai-head{
  display:flex; align-items:center; gap:8px; padding:12px 10px 12px 14px;
  background:linear-gradient(135deg, rgba(43,47,119,.5), rgba(27,154,170,.32));
  border-bottom:1px solid var(--border);
}
.ai-head-title{ display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.ai-head-title strong{ font-family:var(--font-display); font-size:.98rem; line-height:1.2; display:block; }
.ai-mode{ font-size:.72rem; color:var(--muted); display:block; }
.ai-status-dot{
  width:9px; height:9px; border-radius:50%; flex:none; background:#28c840;
  box-shadow:0 0 0 3px rgba(40,200,64,.18);
}
.ai-status-dot.off{ background:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,.18); }
.ai-min, .ai-x{
  border:none; background:transparent; color:var(--muted); cursor:pointer;
  width:30px; height:30px; border-radius:8px; font-size:1.35rem; line-height:1; flex:none;
  display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s;
}
.ai-min:hover, .ai-x:hover{ color:var(--text); background:rgba(255,255,255,.1); }

.ai-log{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.ai-msg{ display:flex; }
.ai-user{ justify-content:flex-end; }
.ai-bubble{
  max-width:84%; padding:10px 13px; border-radius:14px; font-size:.92rem; line-height:1.5;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.ai-assistant .ai-bubble{
  background:var(--card-hover); border:1px solid var(--border);
  border-bottom-left-radius:5px; color:var(--text);
}
.ai-user .ai-bubble{
  background:linear-gradient(135deg, var(--accent-strong), var(--accent));
  color:#04203a; border-bottom-right-radius:5px; font-weight:500;
}
.ai-dots{ display:inline-flex; gap:4px; align-items:center; }
.ai-dots i{
  width:7px; height:7px; border-radius:50%; background:var(--muted); display:block;
  animation:aiBlink 1.2s infinite ease-in-out;
}
.ai-dots i:nth-child(2){ animation-delay:.16s; }
.ai-dots i:nth-child(3){ animation-delay:.32s; }
@keyframes aiBlink{
  0%,80%,100%{ opacity:.3; transform:translateY(0); }
  40%        { opacity:1; transform:translateY(-3px); }
}

.ai-suggest{ display:flex; flex-wrap:wrap; gap:7px; padding:2px 12px 10px; }
.ai-suggest button{
  border:1px solid var(--border); background:rgba(255,255,255,.04); color:var(--muted);
  padding:6px 11px; border-radius:999px; font-size:.8rem; font-weight:600; cursor:pointer;
  font-family:var(--font-body); transition:color .2s, border-color .2s, background .2s;
}
.ai-suggest button:hover{ color:var(--text); border-color:var(--border-strong); background:var(--card-hover); }

.ai-input{ display:flex; gap:8px; padding:10px 12px; border-top:1px solid var(--border); }
#aiText{
  flex:1; min-width:0; border:1px solid var(--border); background:rgba(255,255,255,.04);
  color:var(--text); border-radius:999px; padding:10px 15px;
  font-family:var(--font-body); font-size:.92rem; outline:none; transition:border-color .2s;
}
#aiText:focus{ border-color:var(--border-strong); }
#aiText::placeholder{ color:var(--muted); }
#aiSend{
  flex:none; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--accent-strong), var(--accent)); color:#04203a;
  display:flex; align-items:center; justify-content:center; transition:transform .15s, filter .2s;
}
#aiSend:hover{ filter:brightness(1.07); transform:scale(1.05); }
.ai-disclaimer{ margin:0; padding:0 14px 12px; font-size:.7rem; color:var(--muted); line-height:1.4; }

/* light-theme refinements for translucent fields */
html[data-theme="light"] #aiText,
html[data-theme="light"] .ai-suggest button,
html[data-theme="light"] .search-kbd{ background:rgba(15,23,42,.04); }
html[data-theme="light"] .ai-min:hover,
html[data-theme="light"] .ai-x:hover,
html[data-theme="light"] .search-close:hover{ background:rgba(15,23,42,.06); }

/* small screens: dock the chat near the bottom edge, keep clear of FAB */
@media (max-width:520px){
  .ai-widget{ right:14px; bottom:14px; }
  .ai-panel{ bottom:70px; height:min(70vh, calc(100vh - 110px)); }
  .search-overlay{ padding:9vh 14px 18px; }
}

@media (prefers-reduced-motion:reduce){
  .search-box, .ai-panel{ animation:none; }
  .ai-widget .ai-fab{ animation:none; }
  .ai-fab:hover{ transform:none; }
  .ai-dots i{ animation:none; opacity:.6; }
  .search-hit{ animation:none; box-shadow:0 0 0 2px rgba(125,211,252,.5); }
}

/* =====================================================================
   3) PRESENTATION TYPE BADGES  (paired with the All / Oral / Poster
      filter; the badge encodes whether a talk was oral or a poster)
   ===================================================================== */
.preso-badge{
  display:inline-block; margin-bottom:6px;
  font-size:.64rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:999px; border:1px solid transparent;
}
.preso-oral{
  color:var(--accent);
  background:rgba(125,211,252,.12); border-color:rgba(125,211,252,.28);
}
.preso-poster{
  color:#fbbf24;
  background:rgba(251,191,36,.12); border-color:rgba(251,191,36,.30);
}
html[data-theme="light"] .preso-poster{ color:#a16207; background:rgba(161,98,7,.1); border-color:rgba(161,98,7,.28); }

/* =====================================================================
   4) TUTORING KEYWORD CHIPS — the tutoring box has a fixed dark gradient
      background in every theme, so in light mode the accent-coloured text
      lost contrast. Keep the legible light-cyan chips regardless of theme.
   ===================================================================== */
html[data-theme="light"] #tutoring .keywords span{
  background:rgba(125,211,252,.18);
  color:#7dd3fc;
  border-color:rgba(125,211,252,.4);
}