/* Lumen, the site assistant (lumen.js, templates/partials/lumen.html): a round
   button in the bottom-right corner that opens a chat panel above it. Both
   buttons follow the site rule of a white outline with no fill, and take the
   press effect from site.css. */

.lumen-trigger,.lumen-icon{
  display:grid;place-items:center;color:var(--text);cursor:pointer;
  background:transparent;border:1px solid var(--button-line);border-radius:50%;
  transition:background-color var(--t) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
/* position:fixed here outranks the position:relative the press effect sets in
   site.css, because this file loads after it. Both give the wash a box to sit in. */
.lumen-trigger{
  position:fixed;z-index:55;right:20px;bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  width:56px;height:56px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.lumen-icon{width:34px;height:34px;}
/* The phone menu fills the screen, so the round button steps aside while it is open. */
.nav:has(.nav-links.open) ~ .lumen-trigger{display:none;}
.lumen-icon[aria-pressed="true"]{background:rgba(255,255,255,.14);}
.lumen-icon[disabled]{opacity:.42;pointer-events:none;}

.lumen-panel{
  position:fixed;z-index:56;right:20px;bottom:calc(88px + env(safe-area-inset-bottom, 0px));
  width:min(380px, calc(100vw - 40px));height:min(560px, calc(100svh - 120px));
  display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--r-lg);background:var(--navy-raised);border:1px solid var(--line-strong);box-shadow:var(--shadow-card);
}
.lumen-panel[hidden]{display:none;}
.lumen-panel.is-opening{animation:lumen-open .28s var(--ease-out);}
@keyframes lumen-open{from{opacity:0;transform:translateY(12px) scale(.98);}}

.lumen-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);}
.lumen-name{font-size:14px;font-weight:600;color:var(--text);}
.lumen-role{font-size:12px;color:var(--text-muted);}
.lumen-head-actions{display:flex;gap:8px;}

.lumen-messages{flex:1;overflow-y:auto;overscroll-behavior:contain;display:grid;gap:10px;align-content:start;padding:16px;}
.lumen-msg{display:flex;}
.lumen-msg.user{justify-content:flex-end;}
.lumen-bubble{max-width:85%;padding:10px 14px;border-radius:16px;font-size:12.6px;line-height:1.55;color:var(--text-soft);background:rgba(255,255,255,.05);border:1px solid var(--line);overflow-wrap:anywhere;}
.lumen-msg.user .lumen-bubble{color:var(--text);background:rgba(91,115,245,.18);border-color:rgba(91,115,245,.4);}
.lumen-bubble a{color:var(--text);text-decoration:underline;text-underline-offset:3px;}
.lumen-typing{display:flex;gap:5px;padding:12px 14px;}
.lumen-typing span{width:6px;height:6px;border-radius:50%;background:var(--text-muted);animation:lumen-dot 1.2s infinite;}
.lumen-typing span:nth-child(2){animation-delay:.15s;}
.lumen-typing span:nth-child(3){animation-delay:.3s;}
@keyframes lumen-dot{0%,80%,100%{opacity:.3;transform:none;}40%{opacity:1;transform:translateY(-3px);}}

.lumen-input{display:flex;gap:10px;align-items:flex-end;padding:12px;border-top:1px solid var(--line);}
.lumen-input textarea{flex:1;resize:none;max-height:96px;padding:8px 12px;border-radius:12px;border:1px solid var(--line-strong);background:rgba(6,12,20,.5);color:var(--text);font:inherit;font-size:12.6px;line-height:1.5;}
.lumen-input textarea:focus{outline:none;border-color:var(--periwinkle);}
.lumen-input textarea::placeholder{color:var(--text-muted);}

/* 16px stops iPhones and iPads zooming the page in when the message box is tapped (as .form-control in site.css). */
@media (max-width:900px){
  .lumen-input textarea{font-size:16px;}
}

@media (max-width:600px){
  .lumen-trigger{right:16px;bottom:calc(16px + env(safe-area-inset-bottom, 0px));width:52px;height:52px;}
  /* The cookie card (site.css) stops short of the round button so both can be tapped:
     16px margin + 16px gap + 52px button + 16px margin = 100px. */
  #cookie-card{width:min(300px, calc(100vw - 100px));}
  /* lumen.js (fitPanel) refines this height and bottom to the visible area, above the keyboard and the cookie card. */
  .lumen-panel{left:12px;right:12px;width:auto;bottom:calc(80px + env(safe-area-inset-bottom, 0px));height:min(480px, 70svh, calc(100svh - 160px));}
}