/* aulauniversitaria assistant.
   Same accessibility standard as the rest of the page: 48px targets,
   readable body text, visible focus, no hover-only interaction. */

.chat-launch{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:60;
  display:inline-flex; align-items:center; gap:.65rem;
  min-height:56px; padding:0 1.5rem;
  background:linear-gradient(180deg, #C2162E 0%, #9F0F23 100%); color:#fff;
  border:2px solid rgba(255,255,255,.2); border-radius:999px;
  font:inherit; font-size:1.02rem; font-weight:800; cursor:pointer;
  box-shadow:0 8px 24px rgba(184,20,42,.35), 0 2px 6px rgba(0,0,0,.12);
  transition:transform .2s ease, box-shadow .2s ease;
}
.chat-launch:hover{
  background:linear-gradient(180deg, #D41A34 0%, #8C0B1E 100%);
  transform:translateY(-2px);
  box-shadow:0 12px 30px rgba(184,20,42,.45), 0 4px 10px rgba(0,0,0,.15);
}
.chat-launch-dot{
  width:.65rem; height:.65rem; border-radius:50%;
  background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.3); flex:0 0 auto;
}

/* Kept alongside the global [hidden] rule in styles.css: the panel is the
   component that first exposed the problem, and this file is loaded even if
   the other is not. */
.chat-panel[hidden]{ display:none }

.chat-panel{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:61;
  display:flex; flex-direction:column;
  width:min(27rem, calc(100vw - 2.5rem));
  height:min(34rem, calc(100vh - 2.5rem));
  background:var(--paper); color:var(--ink);
  border:1px solid var(--line); border-radius:20px;
  box-shadow:0 16px 48px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.08);
  overflow:hidden;
}

.chat-head{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.85rem 1rem; background:var(--ink); color:#fff; flex:0 0 auto;
}
.chat-title{ margin:0; font-size:1rem; font-weight:700; color:#fff }
.chat-close{
  min-width:44px; min-height:44px; border:0; border-radius:8px;
  background:transparent; color:#fff; font-size:1.6rem; line-height:1; cursor:pointer;
}
.chat-close:hover{ background:rgba(255,255,255,.16) }

.chat-log{
  flex:1 1 auto; overflow-y:auto; padding:1rem;
  display:flex; flex-direction:column; gap:.9rem;
}

.chat-msg{ display:flex; flex-direction:column; gap:.2rem; max-width:92% }
.chat-who{ font-size:.72rem; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em }
.chat-body{
  padding:.75rem .95rem; border-radius:12px;
  background:var(--paper-alt); border:1px solid var(--line);
  font-size:1rem; line-height:1.55;
}
.chat-body p{ margin:0 0 .6rem; max-width:none }
.chat-body p:last-child{ margin-bottom:0 }
.chat-body ul{ margin:.2rem 0 .4rem; padding-left:1.1rem }
.chat-body li{ margin-bottom:.25rem }

.chat-user{ align-self:flex-end; align-items:flex-end }
.chat-user .chat-body{ background:var(--red); border-color:var(--red); color:#fff }
.chat-user .chat-body a{ color:#fff }

.chat-disclosure .chat-body{ border-left:4px solid var(--red) }
.chat-thinking{ color:var(--ink-soft); font-style:italic }

.chat-suggest{ display:flex; flex-wrap:wrap; gap:.5rem }
.chat-chip{
  min-height:44px; padding:0 .9rem;
  border:2px solid var(--line); border-radius:999px;
  background:var(--paper); color:var(--ink);
  font:inherit; font-size:.88rem; font-weight:600; cursor:pointer; text-align:left;
}
.chat-chip:hover{ border-color:var(--red); color:var(--red-dark) }

.chat-handoff{ display:flex; gap:.5rem; flex-wrap:wrap; margin:0 }
.chat-handoff .btn{ min-height:48px; font-size:.9rem; padding:0 1rem; flex:1 1 auto }

.chat-form{
  display:flex; gap:.5rem; padding:.75rem 1rem; flex:0 0 auto;
  border-top:1px solid var(--line); background:var(--paper);
}
.chat-input{
  /* min-width:0 is what stops a flex item refusing to shrink below its
     content width, which pushed the send button off screen at 375px. */
  flex:1 1 auto; min-width:0; width:100%;
  min-height:48px; padding:0 .8rem;
  border:2px solid var(--line); border-radius:10px;
  background:var(--paper); color:var(--ink); font:inherit; font-size:1rem;
}
.chat-send{
  flex:0 0 auto; white-space:nowrap;
  min-height:48px; padding:0 1.1rem; border:2px solid var(--red); border-radius:10px;
  background:var(--red); color:#fff; font:inherit; font-size:.95rem; font-weight:700; cursor:pointer;
}
.chat-send:hover{ background:var(--red-dark); border-color:var(--red-dark) }
.chat-send:disabled{ opacity:.55; cursor:default }

/* ---------- dictation ----------
   Same 48px target as the input and the send button (criterion 8). The
   [hidden] rules are not decoration: this file sets display on both
   elements, and an author display rule beats the hidden attribute unless
   it is answered explicitly. That has caught us three times already. */
.chat-mic{
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; min-height:48px; padding:0;
  border:2px solid var(--line); border-radius:10px;
  background:var(--paper); color:var(--ink-soft); cursor:pointer;
}
.chat-mic[hidden]{ display:none }
.chat-mic svg{ width:22px; height:22px; display:block }
.chat-mic:hover{ border-color:var(--red); color:var(--red-dark) }
.chat-mic.is-listening{
  background:var(--red); border-color:var(--red); color:#fff;
  animation:chat-mic-pulse 1.5s ease-out infinite;
}
/* The global reduced-motion rule in styles.css already kills this. The
   button stays filled and the status line still says what is happening,
   so the state survives without the animation. */
@keyframes chat-mic-pulse{
  0%{ box-shadow:0 0 0 0 rgba(176,14,40,.5) }
  70%,100%{ box-shadow:0 0 0 8px rgba(176,14,40,0) }
}

.chat-mic-status{
  margin:0; padding:.5rem 1rem 0; flex:0 0 auto;
  font-size:.84rem; line-height:1.45; font-weight:600;
  color:var(--red-dark); background:var(--paper);
}
.chat-mic-status[hidden]{ display:none }

:root[data-theme="dark"] .chat-mic.is-listening{ color:#17110F }
:root[data-theme="dark"] .chat-mic.is-listening{ animation-name:chat-mic-pulse-dark }
@keyframes chat-mic-pulse-dark{
  0%{ box-shadow:0 0 0 0 rgba(255,96,118,.5) }
  70%,100%{ box-shadow:0 0 0 8px rgba(255,96,118,0) }
}

.chat-privacy{
  margin:0; padding:.6rem 1rem .85rem; flex:0 0 auto;
  font-size:.75rem; line-height:1.4; color:var(--ink-soft);
  background:var(--paper-alt); border-top:1px solid var(--line);
}

@media (max-width:760px){
  .chat-launch{ right:.75rem; bottom:.75rem; min-height:52px; padding:0 1.1rem; font-size:.92rem }
  .chat-panel{
    right:.5rem; left:.5rem; bottom:.5rem;
    width:auto; height:min(30rem, calc(100vh - 1rem));
  }
  .chat-form{ padding:.65rem .7rem; gap:.4rem }
  .chat-send{ padding:0 .85rem; font-size:.9rem }
  /* 44px is the floor, not a preference. At 375px the input, the mic and
     Enviar have to share 337px of content box. */
  .chat-mic{ width:44px }
  .chat-mic-status{ padding:.45rem .7rem 0; font-size:.82rem }
  .chat-log{ padding:.85rem .7rem }
  .chat-msg{ max-width:100% }
  .chat-handoff .btn{ width:auto }
}

@media print{ .chat-launch, .chat-panel{ display:none } }

/* ---------- course cards inside the chat ----------
   Same visual language as the cards on the page, sized for a narrow panel.
   Every value shown here is read from the sheet by the server, not written
   by the model. */
.chat-cards{ display:flex; flex-direction:column; gap:.7rem }

.chat-card{
  background:var(--paper); border:1px solid var(--line);
  border-left:5px solid var(--red); border-radius:12px;
  padding:.8rem .9rem;
}
.chat-card.is-workshop{ border-left-color:#1F6F4A }

.chat-card h3{
  margin:0 0 .5rem; font-size:.98rem; line-height:1.3; color:var(--ink);
}

.chat-card-chips{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.5rem }
.chat-chip-tag{
  display:inline-block; padding:.18rem .55rem; border-radius:999px;
  font-size:.74rem; font-weight:700; line-height:1.5;
  background:var(--paper-alt); color:var(--ink-soft); border:1px solid var(--line);
}
.chat-chip-tag.when{ background:#FBE9EC; color:var(--red-dark); border-color:#F3C9D0 }
.chat-chip-tag.online{ background:#E7F1FB; color:#0B4E96; border-color:#C6DDF4 }

.chat-card-line{ margin:0 0 .18rem; font-size:.82rem; line-height:1.45; color:var(--ink-soft) }
.chat-card-line span{ font-weight:600 }
.chat-card-line strong{ color:var(--ink); font-weight:700 }

.chat-card-ask{
  display:flex; align-items:center; justify-content:center;
  min-height:44px; margin-top:.6rem; padding:0 .8rem;
  border:2px solid var(--red); border-radius:9px;
  color:var(--red-dark); font-size:.85rem; font-weight:700; text-decoration:none;
}
.chat-card-ask:hover{ background:var(--red); color:#fff }

/* Compact form, used at five results or more. The detail rows are dropped
   in the markup, so this only tightens what is left. The enquiry link is
   deliberately not shrunk: it is the handoff to a person. */
.chat-cards-count{
  margin:0 0 -.25rem; font-size:.78rem; font-weight:700;
  color:var(--ink-soft); text-transform:uppercase; letter-spacing:.04em;
}
.chat-cards.is-compact{ gap:.5rem }
.chat-cards.is-compact .chat-card{ padding:.6rem .75rem }
.chat-cards.is-compact .chat-card h3{ margin-bottom:.4rem; font-size:.93rem }
.chat-cards.is-compact .chat-card-chips{ margin-bottom:.15rem }
.chat-cards.is-compact .chat-card-ask{ margin-top:.5rem }

/* ---------- dark theme corrections ----------
   Six places in this file paired a hardcoded #fff with a variable that
   inverts between themes. In dark, --ink becomes near-white and --red
   becomes a light pink, so every one of them was white on white or white
   on pale. Measured before this block: the panel title was white on #F2F0EE
   at 1.14, and the launcher, Send button and user bubble were white on
   #FF6076 at 2.92. All four fail AA; the header is simply unreadable.
   After: 13.06 for the header, 6.4 for the three red surfaces.
   The rule the rest of the site already follows is the one applied here:
   where a surface goes light in dark mode, the text on it goes dark. */
:root[data-theme="dark"] .chat-head{ background:#2A2724; color:var(--ink) }
:root[data-theme="dark"] .chat-title{ color:var(--ink) }
:root[data-theme="dark"] .chat-close{ color:var(--ink) }
:root[data-theme="dark"] .chat-launch{ color:#17110F }
:root[data-theme="dark"] .chat-launch-dot{ background:#17110F }
:root[data-theme="dark"] .chat-send{ color:#17110F }
:root[data-theme="dark"] .chat-user .chat-body,
:root[data-theme="dark"] .chat-user .chat-body a{ color:#17110F }
:root[data-theme="dark"] .chat-card-ask:hover{ color:#17110F }

:root[data-theme="dark"] .chat-card{ background:#201E1C }
:root[data-theme="dark"] .chat-chip-tag{ background:#2A2724 }
:root[data-theme="dark"] .chat-chip-tag.when{ background:#3A1D22; color:#FFB3BE; border-color:#5A2B33 }
:root[data-theme="dark"] .chat-chip-tag.online{ background:#152A3E; color:#9CC9F5; border-color:#25415C }