:root {
  --companion-navy: #071327;
  --companion-ink: #0a1426;
  --companion-cream: #f7f3eb;
  --companion-cyan: #28b9ee;
  --companion-lime: #c8fa2d;
  --companion-line: rgba(10, 20, 38, .12);
}

.salom-companion {
  position: fixed;
  z-index: 1200;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 88px;
  pointer-events: none;
  font-family: Manrope, system-ui, sans-serif;
  color: var(--companion-ink);
}

.salom-companion[data-surface="app"] { bottom: max(24px, env(safe-area-inset-bottom)); }
.salom-companion * { box-sizing: border-box; }

.companion-launch-row {
  position: relative;
  width: 88px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 9px;
  pointer-events: auto;
}

.companion-nudge {
  position: absolute;
  right: 97px;
  bottom: 10px;
  width: max-content;
  max-width: 205px;
  padding: 10px 32px 10px 13px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 16px 16px 4px 16px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 12px 35px rgba(7,19,39,.16);
  color: #243147;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  transition: opacity .2s ease, transform .2s ease;
}

.salom-companion[data-open="true"] .companion-nudge { opacity: 0; transform: translateY(8px); pointer-events: none; }
.salom-companion[data-nudge="hidden"] .companion-nudge { opacity: 0; transform: translateY(8px) scale(.96); visibility: hidden; pointer-events: none; }
.companion-nudge-close { position: absolute; top: 4px; right: 5px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #6e7a8d; background: transparent; cursor: pointer; font: 700 17px/1 system-ui,sans-serif; }
.companion-nudge-close:hover { color: #0a1426; background: #edf1f5; }

.companion-launcher {
  position: relative;
  width: 88px;
  height: 98px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: radial-gradient(circle at 50% 64%, rgba(40,185,238,.28), transparent 62%);
  cursor: pointer;
  user-select: none;
  filter: drop-shadow(0 14px 18px rgba(7,19,39,.25));
  transition: transform .25s cubic-bezier(.2,.8,.2,1), filter .25s ease;
  animation: companion-float 4.6s ease-in-out infinite;
}
.salom-companion[data-dragging="true"] .companion-launcher { cursor: grabbing; animation-play-state: paused; transform: scale(1.04); }

.companion-launcher:hover { transform: translateY(-4px) scale(1.04); filter: drop-shadow(0 18px 22px rgba(7,19,39,.3)); }
.companion-launcher:focus-visible { outline: 3px solid var(--companion-cyan); outline-offset: 3px; }
.companion-launcher img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; pointer-events: none; }
.companion-launcher::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 13px;
  width: 13px;
  height: 13px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #22c55e;
}

.companion-panel {
  position: fixed;
  right: auto;
  bottom: auto;
  display: grid;
  grid-template-rows: auto minmax(160px, 1fr) auto;
  width: min(400px, calc(100vw - 16px));
  max-height: min(640px, calc(100dvh - 150px));
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 28px 80px rgba(7,19,39,.24), 0 3px 12px rgba(7,19,39,.1);
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transform-origin: var(--companion-origin-x, calc(100% - 36px)) bottom;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, transform .28s cubic-bezier(.2,.85,.2,1), visibility .28s;
}

.salom-companion[data-panel-direction="down"] .companion-panel { transform: translateY(-18px) scale(.96); transform-origin: var(--companion-origin-x, 50%) top; }

.salom-companion[data-open="true"] .companion-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
}
.salom-companion[data-open="true"][data-panel-direction="down"] .companion-panel { transform: translateY(0) scale(1); }

.companion-header {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 78px;
  padding: 14px 15px;
  overflow: hidden;
  background: var(--companion-navy);
  color: #fff;
}

.companion-header::after {
  content: "";
  position: absolute;
  width: 130px;
  height: 130px;
  right: 35px;
  top: -85px;
  border: 22px solid rgba(200,250,45,.09);
  border-radius: 50%;
}

.companion-avatar {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 17px;
  background: linear-gradient(145deg, #18355b, #0d203b);
}
.companion-avatar img { width: 100%; height: 64px; object-fit: contain; object-position: center top; transform: translateY(1px); }
.companion-heading { position: relative; z-index: 1; min-width: 0; }
.companion-heading strong { display: block; font-size: 15px; letter-spacing: -.02em; }
.companion-heading span { display: flex; align-items: center; gap: 6px; margin-top: 3px; color: #b9c4d4; font-size: 11px; }
.companion-heading span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #47d77a; }
.companion-close {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  margin-left: auto;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
}

.companion-messages {
  min-height: 235px;
  padding: 17px 15px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #f7f3eb 0%, #fff 35%);
  scrollbar-width: thin;
}

.companion-message { display: flex; margin: 0 0 10px; animation: companion-message-in .2s ease both; }
.companion-message.user { justify-content: flex-end; }
.companion-bubble {
  max-width: 86%;
  padding: 10px 12px;
  border: 1px solid var(--companion-line);
  border-radius: 5px 16px 16px 16px;
  background: #fff;
  color: #263249;
  font-size: 13px;
  line-height: 1.52;
  white-space: normal;
  overflow-wrap: anywhere;
}
.companion-bubble p { margin: 0 0 8px; }
.companion-bubble p:last-child { margin-bottom: 0; }
.companion-bubble ul, .companion-bubble ol { margin: 7px 0; padding-left: 20px; }
.companion-bubble li { margin: 4px 0; padding-left: 2px; }
.companion-bubble li::marker { color: #1592ca; font-weight: 800; }
.companion-message.user .companion-bubble { border-color: var(--companion-navy); border-radius: 16px 5px 16px 16px; background: var(--companion-navy); color: #fff; }
.companion-bubble a { color: #0876aa; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.companion-message.user .companion-bubble a { color: #9fe6ff; }
.companion-welcome { margin-bottom: 13px; color: #516077; font-size: 12px; line-height: 1.5; }
.companion-presets { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 16px; }
.companion-preset {
  padding: 8px 10px;
  border: 1px solid #d8dee7;
  border-radius: 999px;
  background: #fff;
  color: #263249;
  cursor: pointer;
  font: 700 11px/1.3 Manrope, sans-serif;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.companion-preset:hover { border-color: var(--companion-cyan); background: #eefaff; transform: translateY(-1px); }
.companion-typing .companion-bubble { display: flex; align-items: center; gap: 4px; min-height: 36px; }
.companion-typing i { width: 6px; height: 6px; border-radius: 50%; background: #718198; animation: companion-dot 1.1s infinite; }
.companion-typing i:nth-child(2) { animation-delay: .14s; }
.companion-typing i:nth-child(3) { animation-delay: .28s; }

.companion-form { padding: 12px; border-top: 1px solid var(--companion-line); background: #fff; }
.companion-input-row { display: flex; align-items: flex-end; gap: 8px; }
.companion-input {
  width: 100%;
  min-height: 44px;
  max-height: 108px;
  resize: none;
  padding: 11px 12px;
  border: 1px solid #d6dce5;
  border-radius: 14px;
  outline: none;
  color: var(--companion-ink);
  background: #fbfcfd;
  font: 500 13px/1.45 Manrope, sans-serif;
}
.companion-input:focus { border-color: var(--companion-cyan); box-shadow: 0 0 0 3px rgba(40,185,238,.12); }
.companion-send {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 0;
  border-radius: 14px;
  background: var(--companion-navy);
  color: #fff;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease;
}
.companion-send:hover { transform: translateY(-1px); }
.companion-send:disabled { opacity: .45; cursor: wait; transform: none; }
.companion-send svg { width: 19px; height: 19px; fill: currentColor; }
.companion-disclaimer { margin: 7px 2px 0; color: #8a96a8; font-size: 9.5px; line-height: 1.4; }

@keyframes companion-float { 0%,100% { translate: 0 0; rotate: 0deg; } 48% { translate: 0 -5px; rotate: -1.3deg; } }
@keyframes companion-message-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes companion-dot { 0%,65%,100% { transform: translateY(0); opacity: .5; } 32% { transform: translateY(-4px); opacity: 1; } }

@media (max-width: 640px) {
  .salom-companion { right: 8px; bottom: max(9px, env(safe-area-inset-bottom)); width: 72px; }
  .salom-companion[data-surface="app"] { bottom: calc(72px + env(safe-area-inset-bottom)); }
  .companion-launcher { width: 72px; height: 81px; border-radius: 24px; }
  .companion-nudge { max-width: 178px; font-size: 11px; }
  .companion-launch-row { width: 72px; }
  .companion-nudge { right: 78px; bottom: 7px; max-width: min(205px, calc(100vw - 100px)); }
  .companion-panel { border-radius: 23px; }
  .companion-header { min-height: 72px; }
  .companion-messages { min-height: 220px; }
}

@media (max-height: 650px) and (min-width: 641px) {
  .companion-messages { min-height: 150px; }
}

@media (prefers-reduced-motion: reduce) {
  .companion-launcher, .companion-typing i { animation: none; }
  .companion-panel, .companion-nudge, .companion-message { transition-duration: .01ms; animation-duration: .01ms; }
}