.asl, .asl * { box-sizing: border-box; }
.asl { font: 400 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: #14171f; }
.asl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.asl-open {
  position: fixed; bottom: 1rem; z-index: 99990; display: inline-flex; align-items: center; gap: .55rem;
  min-height: 3.25rem; padding: .6rem 1.2rem; font: 700 1rem/1.2 inherit; cursor: pointer;
  background: var(--asl-accent, #1f47a8); color: var(--asl-on-accent, #fff);
  border: 2px solid #14171f; border-radius: 6px; box-shadow: 3px 3px 0 rgba(20, 23, 31, .35);
}
.asl-left .asl-open { left: 1rem; }
.asl-right .asl-open { right: 1rem; }
.asl-open svg { width: 1.4rem; height: 1.4rem; flex: none; }
.asl-open:hover { filter: brightness(1.12); }
.asl-open:focus-visible, .asl-close:focus-visible, .asl-form button:focus-visible, .asl-sugg button:focus-visible, .asl-link:focus-visible, .asl-form input:focus-visible {
  outline: 3px solid #f4c20d; outline-offset: 2px; box-shadow: 0 0 0 5px #14171f;
}
.asl.is-open .asl-open { display: none; }

.asl-panel {
  position: fixed; bottom: 1rem; z-index: 99991; width: min(25rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100vh - 2rem));
  display: flex; flex-direction: column; background: #fff; color: #14171f;
  border: 2px solid #14171f; border-radius: 6px; box-shadow: 6px 6px 0 rgba(20, 23, 31, .3);
}
.asl-panel[hidden] { display: none; }
.asl-left .asl-panel { left: 1rem; }
.asl-right .asl-panel { right: 1rem; }

.asl-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 1rem; background: var(--asl-accent, #1f47a8); color: var(--asl-on-accent, #fff); border-radius: 4px 4px 0 0; }
.asl-head h2 { margin: 0; font: 700 1.05rem/1.3 inherit; color: inherit; }
.asl-close { width: 2.4rem; height: 2.4rem; font-size: 1.6rem; line-height: 1; color: inherit; background: transparent; border: 0; cursor: pointer; }
.asl-note { margin: 0; padding: .7rem 1rem; font-size: .9rem; background: #eef1f7; border-bottom: 1px solid rgba(20, 23, 31, .2); }
.asl-log { flex: 1 1 auto; min-height: 5rem; overflow-y: auto; padding: .8rem 1rem; display: grid; gap: .6rem; align-content: start; }
.asl-msg { max-width: 92%; padding: .55rem .8rem; border-radius: 6px; font-size: .97rem; border: 1px solid rgba(20, 23, 31, .25); }
.asl-msg p { margin: 0; white-space: pre-line; }
.asl-msg .asl-src { margin-top: .4rem; font-size: .82rem; opacity: .75; }
.asl-msg-user { justify-self: end; background: var(--asl-accent, #1f47a8); color: var(--asl-on-accent, #fff); border-color: var(--asl-accent, #1f47a8); }
.asl-msg-bot { justify-self: start; background: #fff; }
.asl-msg.is-wait { opacity: .7; font-style: italic; }
.asl-link {
  display: inline-block; margin-top: .5rem; padding: .35rem .8rem; font-weight: 700; font-size: .92rem; text-decoration: none;
  color: #14171f; background: #f4c20d; border: 2px solid #14171f; border-radius: 4px;
}
.asl-link:hover { background: #14171f; color: #fff; }
.asl-sugg { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1rem .7rem; }
.asl-sugg p { flex-basis: 100%; margin: 0; font-size: .88rem; }
.asl-sugg button { padding: .35rem .75rem; text-align: left; font: 400 .9rem/1.3 inherit; color: #14171f; background: #fff; border: 1.5px solid #14171f; border-radius: 999px; cursor: pointer; }
.asl-sugg button:hover { background: #eef1f7; }
.asl-form { display: flex; gap: .5rem; padding: .7rem 1rem 1rem; border-top: 1px solid rgba(20, 23, 31, .2); }
.asl-form input { flex: 1; min-width: 0; min-height: 2.6rem; padding: .4rem .7rem; font: 400 1rem inherit; color: #14171f; background: #fff; border: 2px solid #14171f; border-radius: 4px; }
.asl-form button { min-height: 2.6rem; padding: .4rem 1rem; font: 700 .95rem inherit; color: #14171f; background: #f4c20d; border: 2px solid #14171f; border-radius: 4px; cursor: pointer; }
.asl-form button:hover { background: #14171f; color: #fff; }

@media (max-width: 600px) {
  .asl-open span { display: none; }
  .asl-open { padding: .6rem .8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .asl * { transition: none !important; animation: none !important; }
}