/*
  Loopryx Site Agent — standalone widget styles.
  Ported 1:1 from design-handoff/site-agent/claude-design/templates/site-agent/SiteAgent.dc.html.
  Do not change colors, spacing, radii, or motion timing without a corresponding design update.
*/
#lx-agent-root, #lx-agent-root * { box-sizing: border-box; }
#lx-agent-root {
  position: fixed; inset: 0; pointer-events: none; z-index: 2147483000;
  font: 400 16px/1.6 var(--font-sans, system-ui, sans-serif);
  color: #C6CCDB; -webkit-font-smoothing: antialiased;
}
#lx-agent-root button, #lx-agent-root input, #lx-agent-root textarea { font-family: inherit; }
#lx-agent-root [hidden] { display: none !important; }

@keyframes lx-dot { 0%, 60%, 100% { opacity: .28; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes lx-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes lx-panel { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #lx-agent-root * { animation: none !important; transition: none !important; } }

/* ---------- Launcher ---------- */
.lx-launcher {
  position: absolute; right: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px;
  animation: lx-rise 260ms cubic-bezier(.16,1,.3,1) both; pointer-events: auto;
}
.lx-teaser {
  max-width: 250px; padding: 12px 15px; border-radius: 14px 14px 4px 14px;
  border: 1px solid rgba(255,255,255,.09); background: #0B0E19; box-shadow: 0 20px 44px -24px rgba(0,0,0,.9);
  display: flex; align-items: flex-start; gap: 10px;
}
.lx-teaser p { margin: 0; font-size: 14px; line-height: 1.5; color: #C6CCDB; }
.lx-teaser-dismiss {
  flex: 0 0 auto; width: 22px; height: 22px; margin: -2px -4px 0 0; border: none; border-radius: 6px;
  background: transparent; color: #6F7889; font-size: 13px; line-height: 1; cursor: pointer;
}
.lx-teaser-dismiss:hover { background: rgba(255,255,255,.07); color: #fff; }
.lx-launcher-btn {
  position: relative; width: 60px; height: 60px; border-radius: 20px; border: 1px solid rgba(143,184,255,.28);
  background: linear-gradient(160deg,#3B76F6 0%,#2E5AD8 62%,#7C42F0 100%); box-shadow: 0 18px 40px -16px rgba(59,118,246,.6);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 180ms cubic-bezier(.16,1,.3,1), box-shadow 180ms;
}
.lx-launcher-btn:hover { transform: translateY(-2px); box-shadow: 0 24px 52px -16px rgba(59,118,246,.75); }
.lx-launcher-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59,118,246,.35); }
.lx-unread-dot { position: absolute; top: -3px; right: -3px; width: 12px; height: 12px; border-radius: 50%; background: #3FD8F5; border: 2px solid #05060C; }

/* ---------- Panel ---------- */
.lx-panel {
  position: absolute; z-index: 20; right: 20px; bottom: 20px; width: min(400px, calc(100% - 40px));
  max-height: min(680px, calc(100dvh - 40px)); display: flex; flex-direction: column;
  border: 1px solid rgba(255,255,255,.09); border-radius: 20px; background: #080A13;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.02);
  overflow: hidden; animation: lx-panel 260ms cubic-bezier(.16,1,.3,1) both; pointer-events: auto;
}
@media (max-width: 640px) {
  /*
    Pin the sheet directly to the viewport at this breakpoint (position: fixed, not the desktop
    absolute-within-root layout) so its box is defined purely by inset: 0 — no width/max-width
    computation, no host-container ambiguity, no leftover desktop margin. Matches HANDOFF.md §5:
    "Panel becomes a full-screen sheet: inset: 0; height: 100dvh."
  */
  .lx-panel {
    position: fixed; inset: 0; margin: 0;
    width: auto; max-width: none;
    height: 100dvh; max-height: none;
    border-radius: 0; border: none;
  }
  .lx-launcher { right: 16px; bottom: 16px; }
}

.lx-header {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.07); background: linear-gradient(180deg, rgba(59,118,246,.10), transparent);
}
.lx-avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; background: linear-gradient(160deg,#3B76F6,#7C42F0);
  display: flex; align-items: center; justify-content: center; font: 600 14px/1 var(--font-display, system-ui, sans-serif); color: #fff;
}
.lx-header-text { flex: 1; min-width: 0; }
.lx-header-text p { margin: 0; }
.lx-title { font: 600 15px/1.25 var(--font-display, system-ui, sans-serif); letter-spacing: -0.01em; color: #fff; }
.lx-status { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #9AA3B7; }
.lx-status-dot { width: 6px; height: 6px; border-radius: 50%; background: #3FD8F5; }
.lx-icon-btn {
  flex: 0 0 auto; width: 34px; height: 34px; border: none; border-radius: 10px; background: transparent;
  color: #9AA3B7; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background-color 140ms cubic-bezier(.4,0,.2,1);
}
.lx-icon-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
.lx-icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(59,118,246,.5); }

.lx-list {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.lx-list::-webkit-scrollbar { width: 8px; }
.lx-list::-webkit-scrollbar-track { background: transparent; }
.lx-list::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.18); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.lx-list::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.28); }

.lx-intro { margin: auto 0; }
.lx-intro-title { margin: 0 0 8px; font: 600 18px/1.3 var(--font-display, system-ui, sans-serif); letter-spacing: -0.02em; color: #fff; }
.lx-intro-sub { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: #9AA3B7; text-wrap: pretty; }
.lx-chips { display: flex; flex-direction: column; gap: 8px; }
.lx-chip {
  min-height: 44px; padding: 11px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04); color: #C6CCDB; font: 500 14px/1.35 var(--font-sans, system-ui, sans-serif);
  cursor: pointer; text-align: left; transition: background-color 140ms cubic-bezier(.4,0,.2,1), border-color 140ms;
}
.lx-chip:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.20); color: #fff; }
.lx-chip:focus-visible { outline: none; border-color: #5B92FF; }

.lx-turn { display: flex; flex-direction: column; animation: lx-rise 220ms cubic-bezier(.16,1,.3,1) both; }
.lx-bubble-user {
  align-self: flex-end; max-width: min(86%, 44ch); padding: 10px 14px; border-radius: 14px 14px 4px 14px;
  background: #1F2634; border: 1px solid rgba(255,255,255,.08); color: #F4F6FB; font-size: 15px; line-height: 1.55; white-space: pre-wrap;
}
.lx-assistant-wrap { align-self: flex-start; max-width: min(94%, 52ch); display: flex; flex-direction: column; gap: 10px; }
.lx-bubble-assistant {
  padding: 11px 15px; border-radius: 14px 14px 14px 4px; background: #10141F; border: 1px solid rgba(255,255,255,.07);
  color: #E6EAF3; font-size: 15px; line-height: 1.6; white-space: pre-wrap; text-wrap: pretty;
}

.lx-pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.lx-pill {
  min-height: 44px; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color: #C6CCDB; font: 500 13px/1.3 var(--font-sans, system-ui, sans-serif);
  cursor: pointer; transition: background-color 140ms cubic-bezier(.4,0,.2,1), border-color 140ms;
}
.lx-pill:hover { border-color: rgba(255,255,255,.24); color: #fff; }
.lx-pill:focus-visible { outline: none; border-color: #5B92FF; }
.lx-pill.lx-picked { border: 1px solid rgba(91,146,255,.55); background: rgba(59,118,246,.16); color: #fff; }

.lx-card { border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: #0B0E19; padding: 14px; }
.lx-card-label { margin: 0 0 4px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #6F7889; }
.lx-card-note { margin: 0 0 12px; font-size: 13px; line-height: 1.5; color: #9AA3B7; }
.lx-day { display: flex; flex-direction: column; gap: 12px; }
.lx-day-label { margin: 0 0 7px; font-size: 13px; font-weight: 500; color: #C6CCDB; }
.lx-slot-row { display: flex; flex-wrap: wrap; gap: 7px; }
.lx-slot {
  min-height: 44px; min-width: 78px; padding: 10px 12px; border-radius: 11px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04); color: #C6CCDB; font: 500 14px/1.2 var(--font-sans, system-ui, sans-serif);
  font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color 140ms cubic-bezier(.4,0,.2,1), border-color 140ms;
}
.lx-slot:hover { border-color: #5B92FF; color: #fff; }
.lx-slot:focus-visible { outline: none; border-color: #5B92FF; }
.lx-slot.lx-picked { border: 1px solid rgba(91,146,255,.55); background: rgba(59,118,246,.16); color: #fff; }
.lx-tz-note { margin: 12px 0 0; font-size: 12px; line-height: 1.5; color: #6F7889; }

.lx-email-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.lx-email-input {
  flex: 1 1 180px; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: 11px;
  border: 1px solid rgba(255,255,255,.12); background: #10141F; color: #F4F6FB;
  font: 400 14px/1.4 var(--font-sans, system-ui, sans-serif); outline: none;
}
.lx-email-input:focus-visible { border-color: #5B92FF; box-shadow: 0 0 0 3px rgba(59,118,246,.22); }
.lx-email-confirm {
  min-height: 44px; padding: 10px 15px; border-radius: 11px; border: none; background: #3B76F6; color: #fff;
  font: 500 14px/1.2 var(--font-sans, system-ui, sans-serif); cursor: pointer; transition: background-color 140ms cubic-bezier(.4,0,.2,1);
}
.lx-email-confirm:hover { background: #5B92FF; }
.lx-email-confirm:disabled { background: #2A3242; opacity: .6; cursor: default; }
.lx-email-hint { flex-basis: 100%; margin: 4px 0 0; font-size: 12px; color: #6F7889; }

.lx-booked-card { border: 1px solid rgba(63,216,245,.30); border-radius: 14px; background: linear-gradient(180deg, rgba(63,216,245,.10), rgba(59,118,246,.05)); padding: 16px; }
.lx-booked-label { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #3FD8F5; }
.lx-dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px; line-height: 1.45; }
.lx-dl dt { color: #6F7889; }
.lx-dl dd { margin: 0; color: #C6CCDB; }
.lx-dl dd.lx-strong { color: #fff; font-weight: 500; }
.lx-action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.lx-btn-ghost {
  min-height: 44px; padding: 10px 15px; border-radius: 11px; border: 1px solid rgba(255,255,255,.14);
  background: transparent; color: #C6CCDB; font: 500 14px/1.2 var(--font-sans, system-ui, sans-serif);
  cursor: pointer; transition: background-color 140ms cubic-bezier(.4,0,.2,1);
}
.lx-btn-ghost:hover { background: rgba(255,255,255,.07); color: #fff; }
.lx-btn-ghost:focus-visible { outline: none; border-color: #5B92FF; }
.lx-btn-cancel { min-height: 44px; padding: 10px 15px; border-radius: 11px; border: 1px solid rgba(255,255,255,.10); background: transparent; color: #9AA3B7; font: 500 14px/1.2 var(--font-sans, system-ui, sans-serif); cursor: pointer; transition: color 140ms cubic-bezier(.4,0,.2,1); }
.lx-btn-cancel:hover { color: #FF6B6B; border-color: rgba(255,107,107,.4); }
.lx-btn-cancel:focus-visible { outline: none; border-color: #5B92FF; }

.lx-confirm-card { border: 1px solid rgba(255,194,75,.32); border-radius: 14px; background: rgba(255,194,75,.07); padding: 15px; }
.lx-confirm-text { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: #E6EAF3; }
.lx-btn-primary {
  min-height: 44px; padding: 10px 15px; border-radius: 11px; border: none; background: #3B76F6; color: #fff;
  font: 500 14px/1.2 var(--font-sans, system-ui, sans-serif); cursor: pointer; transition: background-color 140ms cubic-bezier(.4,0,.2,1);
}
.lx-btn-primary:hover { background: #5B92FF; }
.lx-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59,118,246,.35); }
.lx-btn-primary:disabled { background: #2A3242; opacity: .6; cursor: default; }

.lx-wa-card { border: 1px solid rgba(255,255,255,.09); border-radius: 14px; background: #0B0E19; padding: 15px; }
.lx-wa-text { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: #C6CCDB; }
.lx-wa-label { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; font-size: 13px; line-height: 1.5; color: #9AA3B7; cursor: pointer; }
.lx-wa-label input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #3B76F6; cursor: pointer; }

.lx-wa-done-card { border: 1px solid rgba(63,216,245,.28); border-radius: 14px; background: rgba(63,216,245,.07); padding: 15px; display: flex; gap: 12px; align-items: flex-start; }
.lx-wa-done-title { margin: 0 0 4px; font-size: 14px; font-weight: 500; line-height: 1.45; color: #fff; }
.lx-wa-done-sub { margin: 0; font-size: 13px; line-height: 1.55; color: #9AA3B7; }

.lx-typing {
  align-self: flex-start; position: relative; display: flex; align-items: center; gap: 5px; padding: 13px 15px;
  border-radius: 14px 14px 14px 4px; background: #10141F; border: 1px solid rgba(255,255,255,.07);
}
.lx-typing-dot { width: 5px; height: 5px; border-radius: 50%; background: #8FB8FF; animation: lx-dot 1.1s ease-in-out infinite; }
.lx-typing-dot:nth-child(2) { animation-delay: .15s; }
.lx-typing-dot:nth-child(3) { animation-delay: .3s; }
.lx-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.lx-error {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255,107,107,.32); background: rgba(224,59,72,.10);
}
.lx-error-text { flex: 1 1 180px; min-width: 0; font-size: 14px; line-height: 1.5; color: #E6EAF3; }
.lx-retry-btn { min-height: 44px; padding: 9px 15px; border-radius: 11px; border: 1px solid rgba(255,255,255,.16); background: transparent; color: #fff; font: 500 14px/1.2 var(--font-sans, system-ui, sans-serif); cursor: pointer; }
.lx-retry-btn:hover { background: rgba(255,255,255,.08); }
.lx-retry-btn:focus-visible { outline: none; border-color: #5B92FF; }

.lx-composer {
  flex: 0 0 auto; border-top: 1px solid rgba(255,255,255,.07); background: #0B0E19; padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: flex-end;
}
.lx-textarea {
  flex: 1; min-width: 0; resize: none; max-height: 120px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10); background: #10141F; color: #F4F6FB;
  font: 400 15px/1.5 var(--font-sans, system-ui, sans-serif); outline: none;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent;
}
.lx-textarea::-webkit-scrollbar { width: 8px; }
.lx-textarea::-webkit-scrollbar-track { background: transparent; }
.lx-textarea::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,.18); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.lx-textarea::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,.28); }
.lx-textarea:focus-visible { border-color: #5B92FF; box-shadow: 0 0 0 3px rgba(59,118,246,.22); }
.lx-send-btn {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; border: none; background: #3B76F6; color: #fff;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 140ms cubic-bezier(.4,0,.2,1);
}
.lx-send-btn:hover:not(:disabled) { background: #5B92FF; }
.lx-send-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(59,118,246,.35); }
.lx-send-btn:disabled { opacity: .45; cursor: default; }
.lx-footnote { flex: 0 0 auto; margin: 0; padding: 10px 16px; border-top: 1px solid rgba(255,255,255,.05); background: #080A13; font-size: 12px; line-height: 1.45; color: #6F7889; }