.ai-brief,
.ai-brief *,
.ai-brief *::before,
.ai-brief *::after {
  box-sizing: border-box;
}

.ai-brief {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10000;
  color: #f8f7fc;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  text-align: left;
  pointer-events: none;
}

.ai-brief button,
.ai-brief input,
.ai-brief textarea {
  margin: 0;
  font: inherit;
}

.ai-brief button,
.ai-brief a,
.ai-brief input,
.ai-brief textarea {
  -webkit-tap-highlight-color: transparent;
}

.ai-brief__launcher {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 16px;
  background: #211a35;
  color: #fff;
  padding: 12px 17px;
  font-weight: 700;
  letter-spacing: -.1px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .36);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .18s ease, background .18s ease, opacity .18s ease;
}

.ai-brief__launcher:hover {
  background: #2c2247;
  transform: translateY(-2px);
}

.ai-brief.is-open .ai-brief__launcher {
  visibility: hidden;
  opacity: 0;
}

.ai-brief__dialog {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, calc(100vw - 32px));
  height: min(640px, calc(100dvh - 48px));
  max-height: calc(100dvh - 48px);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 22px;
  background: #11101c;
  color: #f7f6fb;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .58);
  pointer-events: auto;
  transform-origin: bottom right;
  animation: aiBriefOpen .2s ease-out;
}

.ai-brief__dialog[hidden],
.ai-brief__contact[hidden],
.ai-brief__new[hidden],
.ai-brief__voice[hidden] {
  display: none !important;
}

@keyframes aiBriefOpen {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.ai-brief__header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
  padding: 16px 14px 14px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background: rgba(17, 16, 28, .96);
}

.ai-brief__heading {
  min-width: 0;
}

.ai-brief__heading strong,
.ai-brief__heading span {
  display: block;
  text-align: left;
}

.ai-brief__heading strong {
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -.2px;
}

.ai-brief__heading span {
  margin-top: 4px;
  color: #aaa4ba;
  font-size: 12px;
  line-height: 1.35;
}

.ai-brief.is-unavailable .ai-brief__header {
  padding-top: 10px;
  padding-bottom: 10px;
}

.ai-brief__new {
  display: inline-flex;
  margin-top: 9px !important;
  border: 0;
  background: transparent;
  color: #bda4ff;
  padding: 0;
  font-size: 12px !important;
  font-weight: 650;
  cursor: pointer;
}

.ai-brief__close,
.ai-brief__contact-dismiss {
  flex: 0 0 44px;
  display: inline-grid;
  place-items: center;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #aaa4ba;
  padding: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.ai-brief__close:hover,
.ai-brief__contact-dismiss:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}

.ai-brief__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #403953 transparent;
  scroll-behavior: smooth;
}

.ai-brief__messages {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  /* With only a few messages, keep the conversation next to the composer.
     This is especially important when a mobile keyboard reduces the viewport. */
  justify-content: flex-end;
  gap: 11px;
  min-height: 100%;
  padding: 16px;
  text-align: left;
}

.ai-brief__message {
  max-width: 86%;
  padding: 10px 13px;
  border-radius: 16px;
  color: #f7f6fb;
  font-size: 14px;
  line-height: 1.48;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  text-align: left;
}

.ai-brief__message--assistant {
  align-self: flex-start;
  border-bottom-left-radius: 5px;
  background: #2a273b;
}

.ai-brief__message--user {
  align-self: flex-end;
  border-bottom-right-radius: 5px;
  background: linear-gradient(135deg, #7334dc, #8538ed);
}

.ai-brief__message--assistant a {
  color: #c5a9ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ai-brief__typing {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  padding: 8px 12px;
  border-radius: 15px 15px 15px 5px;
  background: #2a273b;
}

.ai-brief__typing i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b8b2cc;
  animation: aiBriefBounce .95s infinite ease-in-out;
}

.ai-brief__typing i:nth-child(2) { animation-delay: .13s; }
.ai-brief__typing i:nth-child(3) { animation-delay: .26s; }

@keyframes aiBriefBounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.ai-brief__contact {
  display: grid;
  gap: 10px;
  margin: 0 12px 14px;
  padding: 14px;
  border: 1px solid rgba(139, 92, 246, .42);
  border-radius: 16px;
  background: #1b1729;
}

.ai-brief__contact-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.ai-brief__contact-head strong,
.ai-brief__contact-head span {
  display: block;
}

.ai-brief__contact-head strong {
  font-size: 14px;
}

.ai-brief__contact-head span {
  margin-top: 3px;
  color: #aaa4ba;
  font-size: 12px;
}

.ai-brief__contact-dismiss {
  flex-basis: 34px;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 9px;
  font-size: 22px;
}

.ai-brief__contact label {
  display: grid;
  gap: 6px;
  color: #d8d3e2;
  font-size: 12px;
  font-weight: 600;
}

.ai-brief__contact label > span {
  color: #8f899d;
  font-weight: 400;
}

.ai-brief__contact input,
.ai-brief__form textarea {
  width: 100%;
  border: 1px solid #443d58;
  border-radius: 12px;
  background: #211e2f;
  color: #fff;
  outline: none;
}

.ai-brief__contact input {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
}

.ai-brief__form {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .08);
  background: #151321;
}

.ai-brief__form textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  max-height: 110px;
  padding: 10px 12px;
  resize: none;
  overflow: hidden;
  font-size: 14px !important;
  line-height: 22px !important;
}

.ai-brief__contact input:focus,
.ai-brief__form textarea:focus {
  border-color: #9465f6;
  box-shadow: none;
}

.ai-brief__send,
.ai-brief__voice,
.ai-brief__submit {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.ai-brief__send {
  flex: 0 0 auto;
  padding: 10px 14px;
  background: #7c3aed;
}

.ai-brief__voice {
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  padding: 0;
  border: 1px solid #4d4562;
  background: #2b263d;
  font-size: 17px;
}

.ai-brief__submit {
  width: 100%;
  padding: 10px 13px;
  background: #7c3aed;
  font-size: 13px;
}

.ai-brief__send:hover,
.ai-brief__submit:hover {
  background: #8d49ef;
}

.ai-brief__voice:hover {
  background: #39324e;
}

.ai-brief__voice.is-recording {
  border-color: #f56980;
  background: #cf3b57;
  animation: aiBriefRecord 1s infinite;
}

@keyframes aiBriefRecord { 50% { transform: scale(.92); } }

.ai-brief button:disabled {
  cursor: wait;
  opacity: .58;
}

.ai-brief__consent {
  margin: 0;
  color: #8f899d;
  font-size: 10px;
  line-height: 1.4;
}

.ai-brief__consent a {
  color: #bda4ff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ai-brief button:focus-visible,
.ai-brief a:focus-visible,
.ai-brief input:focus-visible,
.ai-brief textarea:focus-visible {
  outline: 1px solid #b692ff;
  outline-offset: 1px;
}

/* Keep form controls to a single thin focus treatment; avoid a second
   browser outline around the existing highlighted border. */
.ai-brief input:focus-visible,
.ai-brief textarea:focus-visible {
  outline: none;
}

@media (max-width: 600px) {
  .ai-brief {
    inset: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    /* Keep an opaque layer across the full page while the iOS keyboard is
       open. The dialog itself uses the visual viewport below, but that
       viewport ends above Safari's translucent keyboard controls. */
    height: 100vh;
    height: 100lvh;
    top: 0;
  }

  .ai-brief.is-open {
    background: #11101c;
  }

  /* Safari's keyboard controls are translucent and can show the page behind
     them. While the chat is open, leave only the chat layer painted. */
  html.ai-brief-open,
  html.ai-brief-open body {
    background: #11101c;
  }

  html.ai-brief-open main {
    visibility: hidden;
  }

  .ai-brief__launcher {
    position: fixed;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    min-height: 46px;
    border-radius: 14px;
    padding: 11px 14px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(14px) scale(.96);
    pointer-events: none;
    transition: opacity .24s ease, transform .28s cubic-bezier(.22, .61, .36, 1), visibility .24s ease;
  }

  .ai-brief.is-mobile-launcher-visible:not(.is-open) .ai-brief__launcher {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }

  .ai-brief__dialog {
    position: fixed;
    top: var(--ai-brief-viewport-top, 0px);
    right: 0;
    bottom: auto;
    left: 0;
    width: 100vw !important;
    /* Use the full viewport on phones; 100dvh follows browser chrome while
       the vh fallback keeps older mobile browsers full-screen as well. */
    height: var(--ai-brief-viewport-height, 100dvh) !important;
    min-height: 0;
    max-height: none;
    border: 0;
    border-radius: 0;
  }

  .ai-brief__header {
    padding: max(13px, env(safe-area-inset-top)) 10px 12px 15px;
  }

  .ai-brief__heading strong { font-size: 15px; }
  .ai-brief__messages { min-height: 140px; padding: 13px; }
  .ai-brief__message { max-width: 89%; }
  .ai-brief__form { gap: 7px; padding-left: 10px; padding-right: 10px; }
  .ai-brief__send { padding-left: 12px; padding-right: 12px; }
}

@media (max-width: 355px) {
  .ai-brief__send { font-size: 0; width: 44px; padding: 0; }
  .ai-brief__send::after { content: "➜"; font-size: 18px; }
  .ai-brief__heading span { max-width: 220px; }
}

@media (max-height: 480px) and (min-width: 601px) {
  .ai-brief__dialog {
    height: calc(100dvh - 40px);
    max-height: calc(100dvh - 40px);
  }
  .ai-brief__messages { min-height: 100px; padding-top: 11px; padding-bottom: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai-brief__dialog,
  .ai-brief__typing i,
  .ai-brief__voice.is-recording {
    animation: none;
  }
  .ai-brief__body { scroll-behavior: auto; }
  .ai-brief__launcher { transition: none; }
}