.mira-root {
  --mira-orange: #e84a1f;
  --mira-orange-dark: #c73d17;
  --mira-navy: #1a1a2e;
  --mira-muted: #666;
  font-family: Inter, system-ui, sans-serif;
}

.mira-launcher {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 10050;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  border: 0;
  cursor: pointer;
  background: transparent;
  color: inherit;
  padding: 0;
}

.mira-launcher-label {
  background: #fff;
  color: var(--mira-navy);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.55rem 0.85rem;
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(26, 26, 46, 0.16);
  display: none;
}

.mira-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(232, 74, 31, 0.35);
  border: 3px solid #fff;
  background: #1a1a2e;
}

.mira-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

@media (min-width: 720px) {
  .mira-launcher-label { display: block; }
}

.mira-panel {
  position: fixed;
  right: 1.1rem;
  bottom: 5.4rem;
  z-index: 10051;
  width: min(380px, calc(100vw - 1.5rem));
  height: min(560px, calc(100vh - 7rem));
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 22px 60px rgba(26, 26, 46, 0.22);
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.mira-panel.open { display: flex; }

.mira-head {
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--mira-navy);
  color: #fff;
}

.mira-hero {
  display: block;
  width: 100%;
  height: 148px;
  object-fit: cover;
  object-position: 50% 42%;
  background: #13203a;
}

.mira-head-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.9rem 0.75rem;
}

.mira-head-bar img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  border: 2px solid rgba(255,255,255,0.7);
}

.mira-head h2 {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.1;
}

.mira-head p {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  opacity: 0.92;
}

.mira-close {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.35rem;
}

.mira-log {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 0.9rem;
  background: #f7f5f3;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.mira-bubble {
  max-width: 88%;
  padding: 0.7rem 0.85rem;
  border-radius: 14px;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--mira-navy);
}

.mira-bubble.mira-bot { background: #fff; border-bottom-left-radius: 4px; }
.mira-bubble.mira-user {
  background: var(--mira-navy);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.mira-links { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.55rem; }
.mira-links a {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--mira-orange);
  text-decoration: none;
  border: 1px solid rgba(232, 74, 31, 0.35);
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: #fff7f4;
}

.mira-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.55rem 0.9rem 0;
  background: #f7f5f3;
}

.mira-chips button {
  border: 1px solid #e6e1dc;
  background: #fff;
  color: var(--mira-navy);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
}

.mira-form {
  display: flex;
  gap: 0.45rem;
  padding: 0.75rem;
  border-top: 1px solid #eee;
  background: #fff;
}

.mira-form input {
  flex: 1;
  border: 1px solid #e4e4e4;
  border-radius: 999px;
  padding: 0.7rem 0.95rem;
  font: inherit;
  font-size: 0.9rem;
}

.mira-form button {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--mira-orange), var(--mira-orange-dark));
  color: #fff;
  font-weight: 700;
  padding: 0 1.05rem;
  cursor: pointer;
  font: inherit;
}

.mira-typing { font-size: 0.82rem; color: var(--mira-muted); padding: 0 0.2rem; }

@media (max-width: 640px) {
  .mira-panel {
    right: 0;
    bottom: 0;
    width: 100vw;
    height: min(78vh, 620px);
    border-radius: 20px 20px 0 0;
  }
  .mira-launcher { right: 0.85rem; bottom: 0.85rem; }
}