.astra-root {
  position: fixed;
  right: 18px;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 2147483000;
  font: 15px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e7edf5;
}

.astra-root *, .astra-root *::before, .astra-root *::after { box-sizing: border-box; }
.astra-root button, .astra-root textarea { font: inherit; }

.astra-toggle {
  display: block;
  margin-left: auto;
  min-height: 52px;
  padding: 0 21px;
  border: 1px solid #89552f;
  border-radius: 999px;
  background: #814d28;
  color: #fff9eb;
  box-shadow: 0 5px 18px #00000066;
  cursor: pointer;
  font-weight: 700;
}

.astra-toggle:hover, .astra-send:hover { background: #693d20; }
.astra-toggle:focus-visible, .astra-root button:focus-visible, .astra-input:focus-visible { outline: 3px solid #e5a64d; outline-offset: 2px; }

.astra-panel {
  width: min(380px, calc(100vw - 28px));
  height: min(530px, calc(100dvh - 115px));
  min-height: 300px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #455b73;
  border-radius: 20px;
  background: #111923;
  box-shadow: 0 12px 38px #00000066;
}

.astra-panel[hidden] { display: none; }

.astra-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 12px 15px;
  background: #1b2838;
  border-bottom: 1px solid #36495e;
}

.astra-title { font-size: 19px; margin-right: auto; }
.astra-presence { display: inline-flex; align-items: center; gap: 6px; color: #b7c4d4; font-size: 12px; }
.astra-status { width: 9px; height: 9px; border-radius: 50%; background: #b64e3c; }
.astra-status.astra-online { background: #2c9b61; }
.astra-close { width: 34px; height: 34px; padding: 0; border: 0; background: transparent; color: #d4dfeb; cursor: pointer; font-size: 26px; line-height: 1; }

.astra-log {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.astra-message { max-width: 92%; padding: 10px 12px; border-radius: 15px; background: #223145; overflow-wrap: anywhere; white-space: pre-wrap; }
.astra-message.astra-kenny { align-self: flex-end; background: #30445a; }
.astra-message.astra-astra { align-self: flex-start; }
.astra-message strong { display: block; margin-bottom: 3px; font-size: 12px; color: #f1bd79; }
.astra-message p { margin: 0; }

.astra-form { display: flex; gap: 8px; align-items: end; padding: 12px; border-top: 1px solid #36495e; background: #172230; }
.astra-input { flex: 1; min-width: 0; min-height: 58px; max-height: 120px; resize: vertical; padding: 9px 11px; border: 1px solid #455b73; border-radius: 11px; color: #e7edf5; background: #0e1722; }
.astra-send { min-height: 42px; padding: 0 14px; border: 0; border-radius: 10px; background: #814d28; color: white; font-weight: 700; cursor: pointer; }
.astra-send:disabled { opacity: .55; cursor: wait; }

@media (max-width: 480px) {
  .astra-root { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); }
  .astra-panel { height: min(65dvh, 560px); }
  .astra-toggle { min-height: 48px; }
}
.astra-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  align-items: end;
  padding: 12px;
  border-top: 1px solid #36495e;
  background: #172230;
}
.astra-input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 76px;
  max-height: 160px;
  resize: vertical;
  padding: 9px 11px;
  border: 1px solid #455b73;
  border-radius: 11px;
  color: #e7edf5;
  background: #0e1722;
}
.astra-send {
  justify-self: end;
  width: auto;
  min-width: 84px;
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: #814d28;
  color: white;
  font-weight: 700;
  cursor: pointer;
}

@media (min-width: 760px) {
  body.astra-docked { margin-right: 380px !important; }
}

.astra-root.astra-open {
  top: 0;
  right: 0;
  bottom: 0;
  width: 380px;
}
.astra-root.astra-open .astra-toggle { display: none; }
.astra-root.astra-open .astra-panel {
  width: 100%;
  height: 100dvh;
  min-height: 0;
  margin: 0;
  border-radius: 0;
}

@media (max-width: 759px) {
  .astra-root.astra-open { left: 0; width: 100vw; }
  .astra-root.astra-open .astra-panel { border: 0; }
}

.astra-model, .astra-effort { width:100%; padding:7px 9px; border:1px solid #455b73; border-radius:8px; background:#0e1722; color:#e7edf5; } .astra-look { justify-self:start; min-height:38px; padding:0 12px; border:1px solid #814d28; border-radius:10px; background:#172230; color:#814d28; font-weight:700; cursor:pointer; } .astra-look:disabled { opacity:.55; cursor:wait; }

.astra-voice-controls { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.astra-voice-button { min-height:34px; padding:5px 10px; border:1px solid #455b73; border-radius:8px; background:#0e1722; color:#e7edf5; cursor:pointer; }
.astra-voice-button[aria-pressed="true"] { background:#30445a; }
.astra-voice-button:disabled { opacity:.5; cursor:default; }
.astra-voice-note { flex-basis:100%; font-size:12px; color:#b7c4d4; }

.astra-activity { min-height:32px; padding:6px 9px; border:1px solid #36495e; border-radius:8px; background:#202e40; color:#b7c4d4; font-size:12px; line-height:18px; overflow-wrap:anywhere; }
.astra-activity[data-busy="true"] { color:#f1bd79; background:#1b2838; }
.astra-page-button { font-weight:600; }

/* Classroom-matched dark theme, including native menus and scrollbars. */
.astra-root { color-scheme: dark; }
.astra-log { scrollbar-color: #455b73 #111923; }
.astra-input::placeholder { color: #9bacc0; opacity: 1; }
.astra-root select option { background: #0e1722; color: #e7edf5; }
.astra-close:hover { background: #30445a; border-radius: 8px; }