/* Public landing-page chat widget (cf-lc-*). All colours via tokens.css vars
   (ds-audit R7: no raw hex outside grandfathered files; tokens.css is loaded on
   every public page so no fallbacks needed). The landing has NO [hidden] reset
   of its own (bare box-sizing reset only), so every element we give a display:
   value also gets an explicit [hidden] rule. Breakpoint 640px = the landing's
   small step (public-site convention is 860/820/640/520, not the app's 767). */

.cf-lc-fab {
  position: fixed; right: 20px; bottom: 24px; z-index: 240;
  width: 56px; height: 56px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--cf-accent); color: var(--cf-on-accent);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 28px rgba(31, 31, 31, .28);
  transition: transform .15s ease, background .15s ease;
}
.cf-lc-fab:hover { background: var(--cf-accent-hover); transform: translateY(-1px); }
.cf-lc-fab:active { transform: scale(.96); }
.cf-lc-fab[hidden] { display: none; }

.cf-lc-panel {
  position: fixed; right: 20px; bottom: 92px; z-index: 241;
  width: 372px; max-width: calc(100vw - 32px);
  height: 560px; max-height: calc(100dvh - 120px);
  background: var(--cf-bg); border: 1px solid var(--cf-border); border-radius: 18px;
  box-shadow: 0 24px 64px rgba(31, 31, 31, .22), 0 4px 16px rgba(31, 31, 31, .10);
  display: flex; flex-direction: column; overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
.cf-lc-panel[hidden] { display: none; }

.cf-lc-scrim { display: none; }
.cf-lc-scrim[hidden] { display: none; }

.cf-lc-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 14px 16px 12px; border-bottom: 1px solid var(--cf-border-subtle);
  background: var(--cf-bg-warm);
}
.cf-lc-brand { font-family: 'Newsreader', Georgia, serif; font-weight: 700; font-size: 19px; color: var(--cf-text); }
.cf-lc-brand b { color: var(--cf-accent); font-weight: 700; }
.cf-lc-sub { display: block; font-size: 12px; color: var(--cf-text-muted); margin-top: 2px; }
.cf-lc-close {
  border: none; background: none; cursor: pointer; color: var(--cf-text-muted);
  font-size: 26px; line-height: 1; padding: 0 2px; margin-top: -2px;
}
.cf-lc-close:hover { color: var(--cf-text); }

.cf-lc-messages {
  flex: 1; overflow-y: auto; padding: 14px 14px 6px;
  display: flex; flex-direction: column; gap: 10px;
  overscroll-behavior: contain;
}
.cf-lc-msg { display: flex; }
.cf-lc-msg--user { justify-content: flex-end; }
.cf-lc-msg--assistant { justify-content: flex-start; }
.cf-lc-bubble {
  max-width: 84%; padding: 9px 13px; border-radius: 14px;
  font-size: 14px; line-height: 1.45;
  white-space: pre-wrap; word-break: break-word;
}
.cf-lc-msg--user .cf-lc-bubble {
  background: var(--cf-accent); color: var(--cf-on-accent); border-bottom-right-radius: 5px;
}
.cf-lc-msg--assistant .cf-lc-bubble {
  background: var(--cf-gray-50); color: var(--cf-text); border-bottom-left-radius: 5px;
}
.cf-lc-bubble a { color: inherit; text-decoration: underline; }

.cf-lc-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.cf-lc-typing span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--cf-gray-400);
  animation: cfLcBlink 1.2s infinite ease-in-out;
}
.cf-lc-typing span:nth-child(2) { animation-delay: .18s; }
.cf-lc-typing span:nth-child(3) { animation-delay: .36s; }
@keyframes cfLcBlink { 0%, 70%, 100% { opacity: .3; } 35% { opacity: 1; } }

.cf-lc-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 14px 8px; }
.cf-lc-chips[hidden] { display: none; }
.cf-lc-chip {
  border: 1px solid var(--cf-border); background: var(--cf-bg); border-radius: 999px;
  padding: 7px 13px; font-size: 13px; color: var(--cf-gray-700); cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.cf-lc-chip:hover { border-color: var(--cf-accent); background: var(--cf-accent-tint); }

.cf-lc-input-row {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px; border-top: 1px solid var(--cf-border-subtle);
}
.cf-lc-input-row textarea {
  flex: 1; resize: none; border: 1px solid var(--cf-border); border-radius: 12px;
  padding: 9px 12px; font: inherit; font-size: 14px; line-height: 1.4;
  max-height: 108px; color: var(--cf-text); background: var(--cf-bg);
}
.cf-lc-input-row textarea:focus { outline: 2px solid var(--cf-ring-soft); border-color: var(--cf-accent); }
.cf-lc-send {
  width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--cf-accent); color: var(--cf-on-accent); flex: none;
  display: flex; align-items: center; justify-content: center;
}
.cf-lc-send:hover { background: var(--cf-accent-hover); }
.cf-lc-send:disabled { opacity: .5; cursor: default; }

.cf-lc-foot { padding: 6px 14px 10px; font-size: 11px; color: var(--cf-text-muted); }
.cf-lc-foot a { color: var(--cf-text-secondary); }

@media (max-width: 640px) {
  .cf-lc-scrim {
    display: block; position: fixed; inset: 0; z-index: 239;
    background: var(--cf-scrim);
  }
  .cf-lc-scrim[hidden] { display: none; }
  .cf-lc-panel {
    right: 0; left: 0; bottom: 0; width: 100%; max-width: 100%;
    height: 82dvh; max-height: 82dvh;
    border-radius: 18px 18px 0 0; border-left: none; border-right: none; border-bottom: none;
  }
  .cf-lc-input-row { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .cf-lc-fab { bottom: calc(20px + env(safe-area-inset-bottom)); }
}