.ai-companion-settings {
  display: grid;
  gap: 16px;
}

.ai-companion-settings > p {
  margin: 0;
  color: var(--text-muted, #607572);
  line-height: 1.55;
}

.ai-companion-settings .section-heading > strong {
  padding: 7px 10px;
  border-radius: 999px;
  color: #087a73;
  background: #e5f7f3;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-companion-setting {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 14px 16px;
  border: 1px solid rgba(13, 130, 121, 0.14);
  border-radius: 20px;
  color: var(--text-main, #143f3c);
  background: rgba(255, 255, 255, 0.82);
}

.ai-companion-setting > span:nth-child(2) {
  display: grid;
  gap: 3px;
}

.ai-companion-setting small {
  color: var(--text-muted, #657a77);
  line-height: 1.35;
}

.ai-companion-setting > svg {
  width: 24px;
  color: #0b9087;
}

.ai-companion-setting input,
.ai-companion-topics input {
  accent-color: #0a948a;
}

.ai-companion-setting input[role="switch"] {
  width: 46px;
  height: 26px;
}

.ai-companion-setting__orb,
.ai-companion-cue__orb {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  color: #f8ffff;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.86), transparent 15%),
    radial-gradient(circle at 66% 70%, #ffd96b, transparent 28%),
    linear-gradient(145deg, #0bc4b7, #087a75 72%);
  box-shadow: 0 8px 28px rgba(4, 117, 110, 0.24);
}

.ai-companion-setting__orb i,
.ai-companion-cue__orb i {
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: 48% 52% 46% 54%;
  animation: ai-companion-orbit 8s linear infinite;
}

.ai-companion-setting__orb b,
.ai-companion-cue__orb b {
  position: relative;
  z-index: 1;
  font: 800 1rem/1 var(--font-display, "Manrope", sans-serif);
}

.ai-companion-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ai-companion-topics legend {
  width: 100%;
  margin-bottom: 3px;
  color: var(--text-muted, #607572);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ai-companion-topics label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 12px;
  border: 1px solid rgba(13, 130, 121, 0.15);
  border-radius: 999px;
  color: var(--text-main, #183f3d);
  background: rgba(241, 250, 248, 0.9);
}

.ai-companion-topics:disabled {
  opacity: 0.5;
}

.ai-companion-settings__status {
  min-height: 1.4em;
  font-size: 0.8125rem;
}

.ai-companion-settings__status.is-error {
  color: #aa4e42;
}

.ai-companion-cue {
  position: fixed;
  z-index: 5400;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(82px + env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(350px, calc(100vw - 28px));
  overflow: hidden;
  border: 1px solid rgba(39, 159, 149, 0.22);
  border-radius: 24px;
  background: rgba(248, 255, 253, 0.95);
  box-shadow: 0 20px 58px rgba(5, 63, 61, 0.22);
  backdrop-filter: blur(18px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.ai-companion-cue[hidden] {
  display: none !important;
}

.ai-companion-cue__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 8px 12px 12px;
  border: 0;
  color: #123d3a;
  background: transparent;
  text-align: left;
}

.ai-companion-cue__main > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.ai-companion-cue__main strong,
.ai-companion-cue__main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ai-companion-cue__main small {
  color: #607774;
}

.ai-companion-cue__main > svg {
  width: 18px;
  color: #078d85;
}

.ai-companion-cue__dismiss {
  display: grid;
  place-items: center;
  width: 42px;
  border: 0;
  border-left: 1px solid rgba(13, 130, 121, 0.12);
  color: #6a7c79;
  background: rgba(237, 248, 245, 0.75);
}

.ai-companion-cue__dismiss svg {
  width: 17px;
}

.ai-companion-cue__orb {
  width: 42px;
  height: 42px;
}

.ai-companion-cue__orb i:nth-child(2) {
  inset: 10px 5px;
  animation-direction: reverse;
  animation-duration: 6s;
}

body.sheet-open .ai-companion-cue {
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
}

html[data-theme="dark"] .ai-companion-setting,
html[data-theme="dark"] .ai-companion-cue {
  border-color: rgba(102, 224, 213, 0.2);
  color: #e8fffb;
  background: rgba(15, 43, 42, 0.96);
}

html[data-theme="dark"] .ai-companion-cue__main,
html[data-theme="dark"] .ai-companion-setting {
  color: #e8fffb;
}

html[data-theme="dark"] .ai-companion-cue__main small,
html[data-theme="dark"] .ai-companion-setting small,
html[data-theme="dark"] .ai-companion-settings > p {
  color: #a9c8c4;
}

html[data-theme="dark"] .ai-companion-settings .section-heading > strong {
  color: #86eee5;
  background: #164946;
}

html[data-theme="dark"] .ai-companion-topics label,
html[data-theme="dark"] .ai-companion-cue__dismiss {
  color: #dff8f5;
  background: rgba(20, 63, 60, 0.92);
}

@keyframes ai-companion-orbit {
  to { transform: rotate(360deg); }
}

@media (min-width: 760px) {
  .ai-companion-cue {
    right: max(24px, calc((100vw - min(100vw, 1180px)) / 2 + 24px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-companion-setting__orb i,
  .ai-companion-cue__orb i {
    animation: none;
  }

  .ai-companion-cue {
    transition: none;
  }
}