#sofia-ae-root, #sofia-ae-root * { box-sizing: border-box; }
#sofia-ae-root { font-family: Arial, Helvetica, sans-serif; position: relative; z-index: 2147483000; }

.sofia-launcher {
  position: fixed; right: 24px; bottom: 24px; width: 62px; height: 62px;
  border: 0; border-radius: 50%; background: #0b5189; color: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.25); cursor: pointer;
  display: grid; place-items: center; transition: transform .2s ease, opacity .2s ease;
}
.sofia-launcher:hover { transform: translateY(-2px); }
.sofia-launcher.is-hidden { opacity: 0; pointer-events: none; }
.sofia-launcher-avatar, .sofia-avatar {
  display: grid; place-items: center; border-radius: 50%; background: #fff;
  color: #0b5189; font-weight: 700;
}
.sofia-launcher-avatar { width: 44px; height: 44px; font-size: 22px; }

.sofia-panel {
  position: fixed; right: 24px; bottom: 24px; width: min(390px, calc(100vw - 24px));
  height: min(640px, calc(100vh - 40px)); background: #fff; border-radius: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.28); overflow: hidden;
  display: flex; flex-direction: column; opacity: 0; transform: translateY(16px) scale(.98);
  pointer-events: none; transition: opacity .2s ease, transform .2s ease;
}
.sofia-panel.is-open { opacity: 1; transform: none; pointer-events: auto; }

.sofia-header {
  min-height: 74px; padding: 14px 16px; background: #0b5189; color: #fff;
  display: flex; align-items: center; gap: 12px;
}
.sofia-avatar { width: 44px; height: 44px; flex: 0 0 44px; font-size: 20px; }
.sofia-header strong { display: block; font-size: 16px; }
.sofia-header span { display: block; margin-top: 3px; font-size: 12px; opacity: .85; }
.sofia-close {
  margin-left: auto; border: 0; background: transparent; color: #fff;
  font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 8px;
}

.sofia-messages {
  flex: 1; overflow-y: auto; padding: 18px 14px; background: #f5f7f9;
  display: flex; flex-direction: column; gap: 10px;
}
.sofia-message {
  max-width: 86%; padding: 11px 13px; border-radius: 14px;
  font-size: 14px; line-height: 1.42; overflow-wrap: anywhere;
}
.sofia-assistant { align-self: flex-start; background: #fff; color: #222; border-bottom-left-radius: 4px; }
.sofia-user { align-self: flex-end; background: #0b5189; color: #fff; border-bottom-right-radius: 4px; }
.sofia-typing { opacity: .65; font-style: italic; }

.sofia-form {
  padding: 12px; display: flex; align-items: flex-end; gap: 8px;
  border-top: 1px solid #e5e7eb; background: #fff;
}
.sofia-input {
  flex: 1; resize: none; min-height: 42px; max-height: 120px; padding: 11px 12px;
  border: 1px solid #cfd6dc; border-radius: 12px; outline: none;
  font: inherit; font-size: 14px; line-height: 1.35;
}
.sofia-input:focus { border-color: #0b5189; box-shadow: 0 0 0 3px rgba(11,81,137,.12); }
.sofia-send {
  width: 42px; height: 42px; border: 0; border-radius: 12px;
  background: #0b5189; color: #fff; cursor: pointer; font-size: 17px;
}
.sofia-send:disabled { opacity: .55; cursor: wait; }
.sofia-footnote {
  padding: 0 12px 10px; background: #fff; color: #6b7280;
  font-size: 10px; text-align: center;
}

@media (max-width: 520px) {
  .sofia-launcher { right: 14px; bottom: 14px; }
  .sofia-panel {
    right: 8px; bottom: 8px; width: calc(100vw - 16px);
    height: min(720px, calc(100vh - 16px)); border-radius: 16px;
  }
}