:root {
  --ai-navy: #071c35;
  --ai-blue: #125d98;
  --ai-cyan: #29bfd2;
  --ai-line: rgba(188, 224, 235, .24);
}

* { box-sizing: border-box; }

.mtl-ai-page {
  margin: 0;
  color: #fff;
  background: #071c35;
  font-family: Montserrat, Arial, sans-serif;
}

.mtl-ai-stage {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 78px);
  min-height: calc(100svh - 78px);
  overflow: hidden;
  padding: 32px 24px 22px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(135deg, #06192f 0%, #0a3155 52%, #0d4268 100%);
  background-size: 48px 48px, 48px 48px, auto;
}

.mtl-ai-orb {
  position: absolute;
  z-index: -1;
  width: 430px;
  height: 430px;
  border-radius: 50%;
  filter: blur(18px);
  opacity: .22;
  pointer-events: none;
}

.mtl-ai-orb--one { top: -250px; right: 7%; background: #22d5e8; }
.mtl-ai-orb--two { bottom: -320px; left: -90px; background: #167ccb; }

.mtl-ai-shell {
  width: min(1080px, 100%);
  min-height: calc(100svh - 132px);
  margin: 0 auto;
}

.mtl-ai-workspace {
  display: flex;
  min-height: inherit;
  flex-direction: column;
}

.mtl-ai-chat-header {
  display: flex;
  min-height: 76px;
  padding: 8px 4px 18px;
  align-items: center;
  gap: 13px;
  border-bottom: 1px solid var(--ai-line);
}

.mtl-ai-agent-avatar,
.mtl-ai-message-avatar {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--ai-cyan), var(--ai-blue));
  font-weight: 800;
  box-shadow: 0 8px 22px rgba(0, 13, 31, .3);
}

.mtl-ai-agent-avatar { width: 50px; height: 50px; border-radius: 15px; font-size: 19px; }
.mtl-ai-chat-header h2 { margin: 0 0 4px; color: #fff; font-size: 18px; }
.mtl-ai-chat-header p { display: flex; margin: 0; align-items: center; gap: 7px; color: #a9c5d7; font-size: 11px; }
.mtl-ai-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #2ce28b; box-shadow: 0 0 0 4px rgba(44,226,139,.12); }

.mtl-ai-clear {
  display: grid;
  width: 44px;
  height: 44px;
  margin-left: auto;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 13px;
  color: #b8d1df;
  background: rgba(255,255,255,.06);
  cursor: pointer;
  transition: .2s ease;
}

.mtl-ai-clear:hover { border-color: #5bd2e2; color: #fff; background: rgba(41,191,210,.14); }
.mtl-ai-clear svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.mtl-ai-transcript {
  display: flex;
  min-height: 360px;
  max-height: calc(100svh - 360px);
  padding: 34px 4px 22px;
  overflow-y: auto;
  scroll-behavior: smooth;
  flex: 1;
  flex-direction: column;
  scrollbar-color: rgba(93,194,215,.55) transparent;
  scrollbar-width: thin;
}

.mtl-ai-day-label { margin: 0 0 28px; color: #7ea4b9; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-align: center; text-transform: uppercase; }
.mtl-ai-message { display: flex; width: 100%; margin: 0 0 24px; align-items: flex-end; gap: 11px; }
.mtl-ai-message--user { justify-content: flex-end; }
.mtl-ai-message-avatar { width: 32px; height: 32px; border-radius: 10px; font-size: 11px; }
.mtl-ai-message--user .mtl-ai-message-avatar { color: #07223c; background: #71e1ed; }

.mtl-ai-bubble {
  max-width: min(72%, 670px);
  padding: 17px 19px;
  border: 1px solid rgba(115, 218, 231, .28);
  border-radius: 7px 20px 20px;
  color: #102f49;
  background: #e9f7fa;
  box-shadow: 0 10px 28px rgba(0, 9, 25, .12);
}

.mtl-ai-message--user .mtl-ai-bubble {
  order: -1;
  border-color: #2386bd;
  border-radius: 20px 7px 20px 20px;
  color: #fff;
  background: linear-gradient(135deg, #176da5, #0b4679);
}

.mtl-ai-bubble span { display: block; margin-bottom: 7px; color: #35849a; font-size: 9px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.mtl-ai-message--user .mtl-ai-bubble span { color: #9ce9f2; }
.mtl-ai-bubble p { margin: 0 0 10px; font-size: 13px; line-height: 1.7; overflow-wrap: anywhere; }
.mtl-ai-bubble p:last-child { margin-bottom: 0; }
.mtl-ai-bubble h3 { margin: 18px 0 8px; color: #0c4663; font-size: 15px; line-height: 1.35; }
.mtl-ai-bubble span + h3 { margin-top: 4px; }
.mtl-ai-bubble strong { color: #082f49; font-weight: 800; }
.mtl-ai-bubble ul { display: grid; gap: 7px; margin: 8px 0 13px; padding-left: 20px; }
.mtl-ai-bubble li { padding-left: 2px; font-size: 13px; line-height: 1.65; }
.mtl-ai-bubble li::marker { color: #168fac; }
.mtl-ai-bubble hr { height: 1px; margin: 16px 0; border: 0; background: #c8e1e7; }
.mtl-ai-message--user .mtl-ai-bubble strong,
.mtl-ai-message--user .mtl-ai-bubble h3 { color: #fff; }

.mtl-ai-typing .mtl-ai-bubble { display: flex; min-width: 75px; gap: 5px; }
.mtl-ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: #318fa6; animation: mtl-ai-pulse 1.1s infinite ease-in-out; }
.mtl-ai-typing i:nth-child(2) { animation-delay: .16s; }
.mtl-ai-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes mtl-ai-pulse { 0%, 70%, 100% { opacity: .35; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }

.mtl-ai-quick-prompts { display: flex; gap: 8px; padding: 4px 4px 14px; overflow-x: auto; }
.mtl-ai-quick-prompts button { flex: 0 0 auto; min-height: 40px; padding: 10px 15px; border: 1px solid rgba(143,207,222,.32); border-radius: 999px; color: #d5ecf4; background: rgba(255,255,255,.07); font: 600 10px/1.2 Montserrat, Arial, sans-serif; cursor: pointer; transition: .2s ease; }
.mtl-ai-quick-prompts button:hover { border-color: #5bd2e2; color: #fff; background: rgba(41,191,210,.15); transform: translateY(-1px); }

.mtl-ai-attachment { display: flex; width: fit-content; max-width: 100%; margin: 0 4px 9px; padding: 8px 9px 8px 12px; align-items: center; gap: 8px; border: 1px solid rgba(102,210,226,.4); border-radius: 10px; color: #cce9f1; background: rgba(255,255,255,.08); font-size: 10px; }
.mtl-ai-attachment[hidden] { display: none; }
.mtl-ai-attachment svg { width: 14px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-width: 1.7; }
.mtl-ai-attachment-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtl-ai-remove-file { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; border: 0; border-radius: 7px; color: #d7edf3; background: rgba(255,255,255,.1); font-size: 16px; cursor: pointer; }

.mtl-ai-status { min-height: 0; margin: 0 4px; color: #b8d6df; font-size: 11px; }
.mtl-ai-status:not(:empty) { min-height: 22px; padding-bottom: 8px; }
.mtl-ai-status.is-error { color: #ffb8c0; }

.mtl-ai-composer {
  display: flex;
  margin: 0 4px;
  padding: 8px;
  align-items: flex-end;
  gap: 7px;
  border: 1px solid rgba(122,211,224,.62);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 14px 38px rgba(0, 9, 27, .28);
  transition: border-color .2s, box-shadow .2s;
}

.mtl-ai-composer:focus-within { border-color: #5ee0ee; box-shadow: 0 0 0 4px rgba(44,205,224,.13), 0 14px 38px rgba(0,9,27,.28); }
.mtl-ai-composer textarea { width: 100%; min-width: 0; min-height: 46px; max-height: 130px; padding: 12px 9px; resize: none; border: 0; outline: 0; color: #102f49; background: transparent; font: 500 12px/1.55 Montserrat, Arial, sans-serif; }
.mtl-ai-composer textarea::placeholder { color: #8297a5; }
.mtl-ai-upload, .mtl-ai-send { display: inline-flex; height: 46px; flex: 0 0 auto; align-items: center; justify-content: center; border: 0; cursor: pointer; }
.mtl-ai-upload { position: relative; width: 46px; border-radius: 13px; color: #507387; background: #eef4f6; }
.mtl-ai-upload:hover { color: var(--ai-blue); background: #e3f1f4; }
.mtl-ai-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mtl-ai-upload svg, .mtl-ai-send svg { width: 19px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.mtl-ai-send { min-width: 94px; padding: 0 17px; gap: 9px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #1773aa, #0b416f); font: 700 11px Montserrat, Arial, sans-serif; }
.mtl-ai-send:hover { background: linear-gradient(135deg, #1687b4, #0c527f); }
.mtl-ai-send:disabled, .mtl-ai-upload:has(input:disabled) { opacity: .55; cursor: wait; }
.mtl-ai-note { margin: 9px 4px 0; color: #86aabc; font-size: 9px; line-height: 1.5; text-align: center; }

.mtl-ai-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mtl-ai-clear:focus-visible, .mtl-ai-quick-prompts button:focus-visible, .mtl-ai-upload:focus-within, .mtl-ai-send:focus-visible, .mtl-ai-remove-file:focus-visible { outline: 3px solid rgba(82,224,238,.5); outline-offset: 2px; }

@media (max-width: 700px) {
  .mtl-ai-stage { min-height: calc(100svh - 70px); padding: 20px 14px 14px; }
  .mtl-ai-shell { min-height: calc(100svh - 104px); }
  .mtl-ai-transcript { min-height: 350px; max-height: calc(100svh - 340px); padding: 25px 0 18px; }
  .mtl-ai-bubble { max-width: 84%; }
  .mtl-ai-quick-prompts { padding-left: 0; padding-right: 0; }
  .mtl-ai-composer { margin: 0; }
  .mtl-ai-attachment, .mtl-ai-status { margin-left: 0; margin-right: 0; }
}

@media (max-width: 480px) {
  .mtl-ai-message-avatar { display: none; }
  .mtl-ai-bubble { max-width: 90%; padding: 14px 16px; }
  .mtl-ai-send { width: 46px; min-width: 46px; padding: 0; }
  .mtl-ai-send span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .mtl-ai-transcript { scroll-behavior: auto; }
  .mtl-ai-typing i { animation: none; }
  .mtl-ai-quick-prompts button { transition: none; }
}