/* ChatDuo chat applet. Scoped to .cd; themed through CSS variables so the host site can map its own palette.
   Set the variables on the mount element or on :root. Everything below the start panel runs in a fixed layer
   ("the chat screen") so the host page's design stays untouched while a chat is on. */

.cd, .cd * { box-sizing: border-box; }
.cd {
  --cd-font: inherit;
  --cd-bg: #fff;                  /* chat screen ground */
  --cd-panel: #fff;               /* log, inputs */
  --cd-ink: #111;
  --cd-muted: #555;
  --cd-line: #ccc;
  --cd-accent: #0b74e5;           /* buttons, links (4.5:1 on white) */
  --cd-accent-ink: #fff;
  --cd-accent-2: #ff7f00;         /* secondary (great chat pill, pulse) */
  --cd-you: #1a46d8;              /* "You:" label */
  --cd-stranger: #c0262b;         /* "Stranger:" label */
  --cd-danger: #b42318;
  --cd-radius: .5em;
  --cd-top: 0px;                  /* height of a host header kept visible above the chat screen (U-089) */
  font-family: var(--cd-font);
  color: var(--cd-ink);
  font-size: 16px;
  line-height: 1.4;
}
.cd button, .cd input, .cd select, .cd textarea { font-family: inherit; font-size: 1em; color: inherit; }
.cd a { color: var(--cd-accent); }
.cd .cd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cd [hidden] { display: none !important; }
.cd :focus-visible { outline: 3px solid var(--cd-accent); outline-offset: 2px; }

/* ---------- Start panel ---------- */
.cd-start { max-width: 720px; margin: 0 auto; padding: .5em 0; text-align: center; }
.cd-notice { margin: 0 0 .75em; font-weight: 700; }
.cd-online { margin: 0 0 .75em; color: var(--cd-muted); font-size: .95em; }
.cd-online strong { color: var(--cd-accent); }
.cd-modes { display: flex; justify-content: center; align-items: center; gap: .5em; flex-wrap: wrap; }
.cd-modes .cd-or { color: var(--cd-muted); }
.cd-btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; min-width: 124px; padding: 0 1.25em; border: 1px solid var(--cd-accent); border-radius: var(--cd-radius); background: var(--cd-accent); color: var(--cd-accent-ink); font-size: 1.35em; font-weight: 700; cursor: pointer; }
.cd-btn.cd-text { min-width: 200px; }
.cd-btn:hover { filter: brightness(1.06); }
.cd-btn:active { filter: brightness(.94); }
.cd-btn:disabled, .cd-btn[aria-disabled=true] { opacity: .5; cursor: default; filter: none; }
.cd-free { margin: .6em 0 0; font-weight: 700; color: var(--cd-muted); font-size: .9em; }
.cd-videostatus { margin: .5em 0 0; color: var(--cd-muted); font-size: .9em; }
.cd-adult { margin: .6em 0 0; color: var(--cd-muted); font-size: .9em; }
.cd-interests { margin-top: 1.25em; text-align: left; }
.cd-interests h2 { font-size: 1.15em; font-weight: 600; margin: 0 0 .4em; text-align: center; }
.cd-tageditor { display: flex; flex-wrap: wrap; gap: .25em; align-items: center; min-height: 2.6em; padding: .35em .5em; border: 1px solid var(--cd-line); border-radius: var(--cd-radius); background: var(--cd-panel); cursor: text; }
.cd-tag { display: inline-flex; align-items: center; gap: .25em; padding: .15em .25em .15em .6em; border-radius: 1em; background: var(--cd-accent); color: var(--cd-accent-ink); font-size: .95em; }
.cd-tag button { border: 0; background: transparent; color: inherit; width: 1.6em; height: 1.6em; border-radius: 50%; cursor: pointer; line-height: 1; padding: 0; }
.cd-tag button:hover { background: rgba(255,255,255,.2); }
.cd-taginput { flex: 1 1 10em; min-width: 8em; border: 0; outline: 0; background: transparent; padding: .25em 0; }
.cd-chips { display: flex; flex-wrap: wrap; gap: .4em; margin-top: .5em; justify-content: center; }
.cd-chip { border: 1px solid var(--cd-line); background: var(--cd-panel); border-radius: 1em; padding: .3em .8em; font-size: .9em; cursor: pointer; }
.cd-chip:hover { border-color: var(--cd-accent); color: var(--cd-accent); }
.cd-uselikes { display: block; margin-top: .6em; font-size: .95em; text-align: center; }
.cd-uselikes input { margin-right: .35em; }
.cd-langrow { display: flex; justify-content: center; align-items: center; gap: .5em; margin-top: 1em; flex-wrap: wrap; }
.cd-langrow select { padding: .35em .5em; border: 1px solid var(--cd-line); border-radius: .35em; background: var(--cd-panel); }
.cd-ban { margin: 0 0 1em; padding: .75em 1em; border: 2px solid var(--cd-danger); border-radius: var(--cd-radius); background: #fff1f0; color: #111; text-align: left; }
.cd-ban h2 { margin: 0 0 .4em; font-size: 1.1em; color: var(--cd-danger); }
.cd-ban p { margin: .3em 0; }

/* ---------- Private-testing gate (password panel) ---------- */
.cd-lock { max-width: 420px; margin: 0 auto 1em; padding: 1em 1.25em; border: 1px solid var(--cd-line); border-radius: var(--cd-radius); background: var(--cd-panel); text-align: left; }
.cd-lock h2 { margin: 0 0 .35em; font-size: 1.15em; }
.cd-lock p { margin: 0 0 .75em; color: var(--cd-muted); }
.cd-lockrow { display: flex; gap: .5em; flex-wrap: wrap; }
.cd-lockinput { flex: 1 1 10em; min-width: 0; height: 44px; padding: 0 .75em; border: 1px solid var(--cd-line); border-radius: .35em; background: var(--cd-panel); }
.cd-lock .cd-btn.cd-lockbtn { font-size: 1em; height: 44px; min-width: 0; padding: 0 1.25em; }
.cd-lockerr { margin: .5em 0 0; color: var(--cd-danger); font-weight: 700; min-height: 1.4em; }
.cd.cd-locked .cd-start > :not(.cd-lock) { display: none !important; } /* the public sees the panel and nothing else */

/* ---------- Age and terms gate (U-011, U-024, U-048, U-074) ---------- */
.cd-overlay { position: fixed; inset: 0; z-index: 9500; background: rgba(0,0,0,.45); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 16px 16px; overflow: auto; }
.cd-dialog { position: relative; width: min(560px, 100%); background: var(--cd-panel); color: var(--cd-ink); border-radius: var(--cd-radius); padding: 1.25em 1.25em 1em; box-shadow: 0 10px 30px rgba(0,0,0,.3); text-align: left; }
.cd-dialog h2 { margin: 0 2em .6em 0; font-size: 1.15em; }
.cd-close { position: absolute; top: .5em; right: .5em; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; font-size: 28px; line-height: 44px; cursor: pointer; color: var(--cd-muted); border-radius: 50%; }
.cd-close:hover { background: rgba(0,0,0,.06); }
.cd-gatebox { display: flex; gap: .6em; align-items: flex-start; padding: .5em; border: 2px solid transparent; border-radius: .4em; cursor: pointer; }
.cd-gatebox.cd-invalid { border-color: var(--cd-danger); background: #fff6f5; }
.cd-gatebox input { width: 22px; height: 22px; margin: .1em 0 0; flex: none; }
.cd-gatebtn { display: block; width: 100%; margin-top: .6em; }
.cd-gateerr { margin: .5em 0 0; color: var(--cd-danger); font-weight: 700; min-height: 1.4em; }
.cd-gatelinks { margin: .75em 0 0; text-align: center; font-size: .9em; color: var(--cd-muted); }
.cd-dialog .cd-reasons { list-style: none; margin: .5em 0; padding: 0; }
.cd-dialog .cd-reasons li { margin: 0; }
.cd-dialog .cd-reasons label { display: flex; gap: .5em; align-items: center; padding: .45em .25em; cursor: pointer; }
.cd-dialog .cd-row { display: flex; gap: .5em; justify-content: flex-end; margin-top: .75em; flex-wrap: wrap; }
.cd-dialog .cd-btn { font-size: 1em; height: 44px; min-width: 0; }
.cd-dialog .cd-btn.cd-secondary { background: var(--cd-panel); color: var(--cd-ink); border-color: var(--cd-line); }
.cd-dialog .cd-btn.cd-dangerbtn { background: var(--cd-danger); border-color: var(--cd-danger); }
.cd-dialog p { margin: .4em 0; }

/* ---------- Chat screen ---------- */
.cd-chat { position: fixed; top: var(--cd-top); left: 0; right: 0; bottom: 0; z-index: 9000; background: var(--cd-bg); color: var(--cd-ink); }
html.cd-in-chat, html.cd-in-chat body { overflow: hidden; }
.cd-logwrap { position: absolute; left: .5em; right: .5em; top: .5em; bottom: calc(5em + 2.4em); border: 1px solid var(--cd-line); border-radius: var(--cd-radius) var(--cd-radius) 0 0; background: var(--cd-panel); }
.cd-log { position: absolute; top: .5em; bottom: 0; left: .5em; right: 0; overflow: auto; padding-right: .5em; }
.cd-tools { position: absolute; left: .5em; right: .5em; bottom: 5em; height: 2.4em; display: flex; align-items: center; justify-content: flex-end; gap: 1.25em; padding: 0 .75em; border: 1px solid var(--cd-line); border-top: 0; background: var(--cd-panel); }
.cd-tools a { color: var(--cd-accent); font-size: 1em; text-decoration: none; padding: .35em .25em; }
.cd-tools a:hover { text-decoration: underline; }
.cd-tools a[aria-disabled=true] { color: var(--cd-muted); pointer-events: none; text-decoration: none; }
.cd-bar { position: absolute; left: .5em; right: .5em; bottom: .5em; height: 5em; display: flex; align-items: stretch; }
.cd-stopwrap, .cd-sendwrap { flex: none; border: 1px solid var(--cd-line); background: var(--cd-panel); overflow: hidden; }
.cd-stopwrap { border-bottom-left-radius: var(--cd-radius); margin-right: .5em; }
.cd-sendwrap { border-bottom-right-radius: var(--cd-radius); margin-left: .5em; }
.cd-stop, .cd-send { width: 7em; height: 100%; border: 0; background: transparent; cursor: pointer; padding: 0; color: var(--cd-ink); font-size: 1em; }
.cd-stop:disabled, .cd-send:disabled { color: var(--cd-muted); cursor: default; }
.cd-stop:hover:enabled, .cd-send:hover:enabled { background: rgba(0,0,0,.04); }
.cd-stopwrap.cd-new { background: var(--cd-accent); }
.cd-stopwrap.cd-new .cd-stop { color: var(--cd-accent-ink); font-weight: 700; }
.cd-stopwrap.cd-really .cd-stop { font-weight: 700; }
.cd-hint { display: block; font-size: .8em; color: var(--cd-accent); font-weight: 700; margin-top: .25em; height: 0; overflow: visible; opacity: .8; }
.cd-stopwrap.cd-new .cd-hint { color: var(--cd-accent-ink); }
:disabled .cd-hint { opacity: .5; }
.cd-msgwrap { flex: 1 1 auto; border: 1px solid var(--cd-line); background: var(--cd-panel); padding: .25em; min-width: 0; }
.cd-msg { display: block; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; resize: none; padding: 0; margin: 0; font-family: inherit; }
.cd-msg:disabled { background: transparent; }

.cd-exit { position: absolute; top: 6px; right: 10px; z-index: 20; height: 32px; padding: 0 .8em; border: 1px solid var(--cd-line); border-radius: 1em; background: var(--cd-panel); color: var(--cd-muted); font-size: .9em; cursor: pointer; }
.cd-exit:hover { color: var(--cd-ink); border-color: var(--cd-muted); }
.cd.cd-mobile .cd-exit { top: 6px; right: 6px; height: 36px; }

/* log items */
@keyframes cd-fade { from { opacity: 0; } to { opacity: 1; } }
.cd-item { padding-bottom: .5em; }
.cd-status { color: var(--cd-muted); font-size: .9em; font-weight: 700; margin: 0; padding: 0; animation: cd-fade .25s ease-out; }
.cd-status small { display: block; font-weight: 400; font-size: .85em; padding-top: .4em; }
.cd-line { margin: 0; padding: 0; animation: cd-fade .25s ease-out; overflow-wrap: anywhere; }
.cd-line .cd-who { font-weight: 700; }
.cd-line.cd-you .cd-who { color: var(--cd-you); }
.cd-line.cd-stranger .cd-who { color: var(--cd-stranger); }
.cd-typing { color: var(--cd-muted); font-size: .9em; font-weight: 700; margin: 0; }
.cd-rows { font-size: .95em; font-weight: 400; color: var(--cd-ink); }
.cd-rows .cd-r { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-bottom: .5em; }
.cd-rows .cd-btn { font-size: 1em; height: 44px; min-width: 0; padding: 0 1em; }
.cd-great { display: inline-block; padding: .25em .6em; border-radius: var(--cd-radius); background: var(--cd-accent-2); color: #000; font-size: .9em; }
.cd-rows label { font-weight: 400; }
.cd-rows .cd-pill { border: 1px solid var(--cd-accent); color: var(--cd-accent); background: var(--cd-panel); border-radius: 1em; padding: .3em .8em; cursor: pointer; }
.cd-rows .cd-pill[aria-pressed=true] { background: var(--cd-accent); color: var(--cd-accent-ink); }
.cd-next { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.cd-next .cd-btn { font-size: .95em; height: 36px; }
.cd-errbtns { display: flex; flex-wrap: wrap; gap: .5em; margin: .5em 0; }
.cd-errbtns .cd-btn { font-size: 1em; height: 44px; min-width: 0; }
.cd-captcha { margin: .5em 0; }
.cd-logedit { margin-top: .5em; text-align: left; }

/* U-138: motion on the Stop -> Really? -> New sequence (off under reduced motion) */
@keyframes cd-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes cd-slideout { to { transform: translateX(-30px); opacity: 0; } }
@keyframes cd-slidein { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.cd-stopwrap.cd-really.cd-anim { animation: cd-shake .12s ease-in-out; background: var(--cd-ink); }
.cd-stopwrap.cd-really.cd-anim .cd-stop { color: var(--cd-bg); }
.cd-log.cd-out { animation: cd-slideout .15s ease-in forwards; }
.cd-log.cd-in { animation: cd-slidein .15s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .cd *, .cd *::before, .cd *::after { animation: none !important; transition: none !important; }
}

/* ---------- Video ---------- */
.cd-videos { position: absolute; left: 8px; bottom: 8px; width: 500px; display: none; }
.cd-chat.cd-video .cd-videos { display: block; }
.cd-other { position: absolute; left: 0; top: 0; border-top-left-radius: var(--cd-radius); object-fit: cover; }
.cd-self { position: absolute; left: 0; bottom: 0; border-bottom-left-radius: var(--cd-radius); object-fit: cover; z-index: 100; transform: scaleX(-1); }
.cd-self, .cd-other { display: block; background: #2b2b2b; }
.cd-self.cd-camoff { filter: brightness(0); }
.cd-selfctl { position: absolute; left: 8px; z-index: 120; display: flex; gap: 6px; }
.cd-selfctl button { min-width: 44px; height: 44px; padding: 0 .75em; border: 0; border-radius: .4em; background: rgba(0,0,0,.55); color: #fff; font-size: .9em; cursor: pointer; display: inline-flex; align-items: center; gap: .35em; }
.cd-selfctl button[aria-pressed=true] { background: var(--cd-accent-2); color: #000; }
.cd-selfctl .cd-dot { width: 8px; height: 8px; border-radius: 50%; background: #2bd47a; }
.cd-selfctl button[aria-pressed=true] .cd-dot { background: #000; }
.cd-camofflabel { position: absolute; z-index: 110; color: #fff; font-weight: 700; font-size: .9em; pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
/* U-135: two-dot pulse while the stranger's video loads */
@keyframes cd-pulse { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }
.cd-pulse { position: absolute; z-index: 3; display: none; align-items: center; justify-content: center; gap: 10px; }
.cd-pulse i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--cd-accent); animation: cd-pulse 1.4s ease-in-out infinite; }
.cd-pulse i + i { background: var(--cd-accent-2); animation-delay: .2s; }
.cd-pulse.cd-on { display: flex; }
.cd-swipehint { position: absolute; z-index: 4; left: 0; right: 0; text-align: center; color: #fff; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.8); pointer-events: none; animation: cd-fade .3s; }
.cd-watermark { position: absolute; left: 8px; z-index: 4; pointer-events: none; color: #fff; font-weight: 800; opacity: .7; text-shadow: 0 1px 3px rgba(0,0,0,.6); font-size: 20px; }
.cd-chat.cd-video .cd-logwrap, .cd-chat.cd-video .cd-tools, .cd-chat.cd-video .cd-bar { left: calc(var(--cd-vw, 500px) + 16px); }
.cd-chat.cd-video .cd-logwrap { border-top-left-radius: 0; }
.cd-chat.cd-video .cd-stopwrap, .cd-chat.cd-video .cd-stop { border-bottom-left-radius: 0; }

/* ---------- Phone layout ---------- */
.cd.cd-mobile .cd-chat { display: flex; flex-direction: column; }
.cd.cd-mobile .cd-videos { position: relative; left: 0; bottom: auto; width: 100% !important; flex: none; background: #000; display: none; }
.cd.cd-mobile .cd-chat.cd-video .cd-videos { display: block; }
.cd.cd-mobile .cd-other { border-radius: 0; object-position: center 30%; }
.cd.cd-mobile .cd-self { left: auto; right: 0; top: 0; bottom: auto; border-radius: 0 0 0 .25em; }
.cd.cd-mobile .cd-selfctl { right: 8px; left: auto; }
.cd.cd-mobile .cd-selfctl button { padding: 0 .6em; }
.cd.cd-mobile .cd-logwrap { position: relative; flex: 1 1 auto; inset: auto; top: auto; left: 0; right: 0; bottom: auto; border: 0; border-radius: 0; background: var(--cd-bg); min-height: 0; margin: 0; }
.cd.cd-mobile .cd-log { position: absolute; inset: 0; padding: .5em .5em 0; }
.cd.cd-mobile .cd-tools { position: relative; inset: auto; height: auto; min-height: 44px; justify-content: center; gap: 2em; border: 0; border-top: 1px solid var(--cd-line); background: var(--cd-panel); }
.cd.cd-mobile .cd-tools a { padding: .6em .75em; }
.cd.cd-mobile .cd-bar { position: relative; inset: auto; height: 3.2em; flex: none; border-top: 1px solid var(--cd-line); background: var(--cd-panel); }
@media (min-height: 500px) { .cd.cd-mobile .cd-bar { height: 4em; } }
.cd.cd-mobile .cd-stopwrap, .cd.cd-mobile .cd-sendwrap, .cd.cd-mobile .cd-msgwrap { border: 0; border-radius: 0; margin: 0; background: var(--cd-panel); }
.cd.cd-mobile .cd-stopwrap { border-right: 1px solid var(--cd-line); }
.cd.cd-mobile .cd-stopwrap.cd-new { background: var(--cd-accent); } /* the New state stays accent-coloured on phones too */
.cd.cd-mobile .cd-sendwrap { border-left: 1px solid var(--cd-line); }
.cd.cd-mobile .cd-stop, .cd.cd-mobile .cd-send { width: 5.5em; -webkit-tap-highlight-color: transparent; }
.cd.cd-mobile .cd-hint { display: none; }
.cd.cd-mobile .cd-msgwrap { display: flex; align-items: center; padding: 0 .5em; }
.cd.cd-mobile .cd-msg { height: 2.2em; }
.cd.cd-mobile .cd-chat.cd-video .cd-logwrap, .cd.cd-mobile .cd-chat.cd-video .cd-tools, .cd.cd-mobile .cd-chat.cd-video .cd-bar { left: 0; }
.cd.cd-mobile .cd-status, .cd.cd-mobile .cd-typing { text-align: center; }
.cd.cd-mobile .cd-rows .cd-r { justify-content: center; }
/* bubbles */
.cd-group { clear: both; max-width: 90%; margin-bottom: .4em; position: relative; }
.cd-group .cd-glabel { font-weight: 700; font-size: .85em; padding: 0 .6em .25em; }
.cd-group .cd-bubble { border: 1px solid var(--cd-line); background: var(--cd-panel); padding: .5em .7em; margin-bottom: -1px; overflow-wrap: anywhere; animation: cd-fade .25s ease-out; }
.cd-group .cd-bubble:first-of-type { border-top-left-radius: .7em; border-top-right-radius: .7em; }
.cd-group .cd-bubble:last-of-type { border-bottom-left-radius: .7em; border-bottom-right-radius: .7em; }
.cd-group.cd-stranger { margin-right: auto; }
.cd-group.cd-stranger .cd-glabel { color: var(--cd-stranger); }
.cd-group.cd-stranger .cd-bubble { border-color: var(--cd-stranger); }
.cd-group.cd-you { margin-left: auto; text-align: right; }
.cd-group.cd-you .cd-glabel { color: var(--cd-you); }
.cd-group.cd-you .cd-bubble { border-color: var(--cd-you); text-align: left; }
.cd.cd-mobile .cd-item { overflow: hidden; }