:root {
  --esmi-blue: #087ea4;
  --esmi-blue-dark: #075985;
  --esmi-aqua: #dff7fb;
  --esmi-ink: #12303b;
  --esmi-border: #c9e4ea;
  --esmi-white: #ffffff;
}

#esmi-agent-launcher {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 9998;
  border: 0;
  border-radius: 999px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--esmi-blue), var(--esmi-blue-dark));
  color: var(--esmi-white);
  font: 700 15px/1.2 system-ui, sans-serif;
  box-shadow: 0 12px 30px rgba(8, 126, 164, .28);
  cursor: pointer;
}

#esmi-agent-panel {
  position: fixed;
  right: 22px;
  bottom: 82px;
  z-index: 9999;
  width: min(390px, calc(100vw - 28px));
  height: min(620px, calc(100vh - 110px));
  display: none;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  border: 1px solid var(--esmi-border);
  border-radius: 20px;
  background: var(--esmi-white);
  box-shadow: 0 22px 60px rgba(18, 48, 59, .22);
  font-family: system-ui, sans-serif;
}

#esmi-agent-panel.is-open { display: grid; }

.esmi-agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 16px;
  color: var(--esmi-white);
  background: linear-gradient(135deg, var(--esmi-blue), var(--esmi-blue-dark));
}

.esmi-agent-header strong { display: block; font-size: 16px; }
.esmi-agent-header small { opacity: .88; }
.esmi-agent-close { border: 0; background: transparent; color: white; font-size: 24px; cursor: pointer; }

.esmi-agent-messages {
  padding: 16px;
  overflow-y: auto;
  background: #f7fbfc;
}

.esmi-agent-message {
  max-width: 86%;
  margin: 0 0 11px;
  padding: 11px 13px;
  border-radius: 15px;
  color: var(--esmi-ink);
  background: var(--esmi-aqua);
  white-space: pre-wrap;
  line-height: 1.42;
}

.esmi-agent-message.user {
  margin-left: auto;
  color: white;
  background: var(--esmi-blue);
}

.esmi-agent-status { padding: 0 16px 8px; color: #5f7780; font-size: 12px; }

.esmi-agent-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--esmi-border);
  background: white;
}

.esmi-agent-input {
  min-width: 0;
  border: 1px solid var(--esmi-border);
  border-radius: 12px;
  padding: 11px 12px;
  font: 15px system-ui, sans-serif;
}

.esmi-agent-send {
  border: 0;
  border-radius: 12px;
  padding: 0 15px;
  background: var(--esmi-blue);
  color: white;
  font-weight: 700;
  cursor: pointer;
}

.esmi-agent-send:disabled { opacity: .55; cursor: wait; }

@media (max-width: 520px) {
  #esmi-agent-launcher { right: 14px; bottom: 14px; }
  #esmi-agent-panel { right: 14px; bottom: 72px; height: calc(100vh - 92px); }
}