/* JBO Chat (js/chat.js): a full-screen layer of its own, sized for the screen it's on (TV, iPad, browser, iPhone). */
#chat { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 200; display: -webkit-box; display: flex;
  background: #0b0d12; color: #f2f4f8; font: 16px/1.35 -apple-system, "SamsungOne", "Helvetica Neue", Arial, sans-serif;
  -webkit-user-select: none; user-select: none; overflow: hidden; }
#chat.hidden { display: none !important; }
#chat.ch-tv { font-size: 26px; }
@media (min-width: 1200px) { #chat { font-size: 17px; } #chat.ch-tv { font-size: 26px; } }
#chat .hidden { display: none !important; }
#chat input, #chat .ch-tx, #chat .ch-link { -webkit-user-select: text; user-select: text; }
.ch-side { width: 34%; max-width: 30em; min-width: 18em; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.08); background: #0e1118; }
.ch-main { flex: 1; display: flex; flex-direction: column; min-width: 0; position: relative; }
.ch-head, .ch-thead { display: flex; align-items: center; padding: .7em .9em; border-bottom: 1px solid rgba(255,255,255,.07); min-height: 2.6em; }
.ch-h { flex: 1; font-size: 1.5em; font-weight: 700; letter-spacing: .02em; }
.ch-ib { width: 2.3em; height: 2.3em; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-left: .35em;
  background: rgba(255,255,255,.07); cursor: pointer; font-size: 1em; flex: none; color: #dfe6f2; }
.ch-ib svg { width: 1.15em; height: 1.15em; }
.ch-ib:hover { background: rgba(255,255,255,.14); }
.ch-ib.on { background: #d33; color: #fff; }
.ch-list { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.ch-row { display: flex; align-items: center; padding: .65em .9em; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.04); }
.ch-row:hover { background: rgba(255,255,255,.04); }
.ch-row.cur { background: rgba(143,216,255,.10); }
.ch-rt { flex: 1; min-width: 0; margin-left: .75em; }
.ch-rn { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-rl { font-size: .85em; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .15em; }
.ch-row.unread .ch-rl { color: #fff; }
.ch-rm { text-align: right; margin-left: .5em; flex: none; }
.ch-rtime { font-size: .72em; color: rgba(255,255,255,.4); }
.ch-rm b, #chatbtn b { display: inline-block; min-width: 1.5em; padding: .1em .4em; margin-top: .3em; border-radius: 1em; background: #ff3b30; color: #fff;
  font-size: .75em; font-weight: 700; text-align: center; box-sizing: border-box; }
.ch-mute { opacity: .5; font-size: .8em; }
.ch-none, .ch-hello, .ch-empty { padding: 2em 1em; text-align: center; color: rgba(255,255,255,.45); }
.ch-empty { position: absolute; left: 0; right: 0; top: 40%; }
.ch-has .ch-empty { display: none; }
.ch-av { position: relative; width: 2.6em; height: 2.6em; border-radius: 50%; overflow: hidden; flex: none; background: #2a3242;
  display: flex; align-items: center; justify-content: center; font-weight: 700; color: rgba(255,255,255,.75); }
.ch-av i { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: center 12% / 190% auto no-repeat; }
.ch-av.ch-poster { border-radius: .35em; background: #222 center / cover no-repeat; width: 2.1em; height: 3em; }
.ch-av.ch-home { background: #23324a; font-size: 1.25em; }
/* the thread */
.ch-thead .ch-back { margin: 0 .5em 0 0; display: none; font-size: 1.4em; }
.ch-tt { flex: 1; min-width: 0; margin-left: .7em; }
.ch-tn { font-weight: 700; font-size: 1.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-ts { font-size: .78em; color: rgba(255,255,255,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-msgs { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: .6em .9em 0; }
.ch-day { text-align: center; font-size: .75em; color: rgba(255,255,255,.4); margin: 1em 0 .4em; text-transform: uppercase; letter-spacing: .08em; }
.ch-m { display: flex; align-items: flex-end; margin-top: .18em; }
.ch-m.first { margin-top: .7em; }
.ch-m.mine { justify-content: flex-end; }
.ch-mav { width: 2em; height: 2em; margin-right: .5em; font-size: .9em; }
.ch-sp { visibility: hidden; }
.ch-bw { max-width: 74%; display: flex; flex-direction: column; }
.ch-m.mine .ch-bw { align-items: flex-end; }
.ch-who { font-size: .75em; color: #8fd8ff; margin: 0 0 .2em .6em; }
.ch-b { background: #1f2533; border-radius: 1.1em; padding: .5em .8em .35em; cursor: pointer; word-wrap: break-word; overflow-wrap: break-word; }
.ch-m.mine .ch-b { background: #2160d6; }
.ch-b.gone { background: transparent; border: 1px dashed rgba(255,255,255,.2); }
.ch-b.pic { padding: .25em; }
.ch-tx { white-space: pre-wrap; }
.ch-del { color: rgba(255,255,255,.45); font-style: italic; }
.ch-meta { font-size: .66em; color: rgba(255,255,255,.5); text-align: right; margin-top: .15em; }
.ch-quote { border-left: 3px solid rgba(255,255,255,.45); padding: .1em .5em; margin: .1em 0 .35em; font-size: .85em; color: rgba(255,255,255,.75);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 22em; }
.ch-img img { display: block; max-width: 100%; max-height: 22em; border-radius: .9em; }
.ch-rxs { margin-top: -.25em; padding: 0 .4em; position: relative; z-index: 1; }
.ch-rx { display: inline-block; background: #2a3142; border: 1px solid #0b0d12; border-radius: 1em; padding: .05em .45em; font-size: .85em; margin-right: .2em; cursor: pointer; }
.ch-rx.me { background: #2c4a7e; }
.ch-sys { text-align: center; font-size: .82em; color: rgba(255,255,255,.55); margin: .8em 0; cursor: pointer; }
.ch-sys b { color: #fff; }
.ch-seen { text-align: right; font-size: .7em; color: rgba(255,255,255,.45); padding: .2em 0 .6em; min-height: .5em; }
.ch-typing { font-size: .78em; color: #8fd8ff; padding: 0 1.2em; height: 0; overflow: hidden; }
.ch-typing.on { height: auto; padding-bottom: .3em; }
.ch-older { text-align: center; margin: .5em auto; padding: .4em 1em; border-radius: 1em; background: rgba(255,255,255,.07); width: 10em; cursor: pointer; font-size: .85em; }
/* title cards */
.ch-card { display: flex; background: rgba(0,0,0,.28); border-radius: .8em; overflow: hidden; margin: .15em 0 .3em; min-width: 15em; max-width: 26em; }
.ch-cp { width: 5.4em; min-height: 8em; flex: none; background: #222 center / cover no-repeat; font-size: .8em; padding: .3em; box-sizing: border-box; color: rgba(255,255,255,.6); }
.ch-ci { padding: .55em .7em; min-width: 0; }
.ch-ct { font-weight: 700; font-size: 1.05em; }
.ch-cy { font-size: .72em; color: rgba(255,255,255,.6); margin-top: .15em; text-transform: uppercase; letter-spacing: .04em; }
.ch-co { font-size: .8em; color: rgba(255,255,255,.7); margin-top: .35em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ch-cb { margin-top: .5em; }
.ch-pill { display: inline-block; padding: .35em .85em; border-radius: 1.2em; background: #fff; color: #000; font-weight: 700; font-size: .85em; cursor: pointer; margin: .2em .3em .1em 0; }
.ch-pill.ghost { background: rgba(255,255,255,.14); color: #fff; }
.ch-thead .ch-pill { margin: 0 .2em 0 .5em; flex: none; }
.ch-tcard { display: flex; justify-content: center; margin: .6em 0 .2em; }
/* compose */
.ch-replybar { display: flex; align-items: center; padding: .4em .9em; background: #141924; border-top: 1px solid rgba(255,255,255,.06); font-size: .85em; }
.ch-rb { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255,255,255,.75); }
.ch-quick { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x; padding: .45em .7em .1em; }
.ch-chip { display: inline-block; padding: .35em .8em; margin-right: .4em; border-radius: 1.2em; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); cursor: pointer; font-size: .9em; }
.ch-chip:hover { background: rgba(255,255,255,.15); }
.ch-compose { display: flex; align-items: center; padding: .5em .7em calc(.6em + env(safe-area-inset-bottom)); }
.ch-compose .ch-ib { margin: 0 .35em 0 0; }
#chinput { flex: 1; min-width: 0; font: inherit; font-size: 1em; color: #fff; background: #1a2030; border: 1px solid rgba(255,255,255,.12); border-radius: 1.3em;
  padding: .55em .9em; outline: none; -webkit-appearance: none; }
#chinput:focus { border-color: #8fd8ff; }
.ch-send { margin-left: .45em; padding: .55em 1em; border-radius: 1.3em; background: #2160d6; font-weight: 700; cursor: pointer; flex: none; }
.ch-emoji { padding: .3em .6em .6em; max-height: 9.5em; overflow-y: auto; touch-action: pan-y; border-top: 1px solid rgba(255,255,255,.06); }
.ch-em { display: inline-block; width: 2.1em; height: 2.1em; line-height: 2.1em; text-align: center; font-size: 1.15em; border-radius: .5em; cursor: pointer; }
.ch-em:hover, .ch-em.on { background: rgba(255,255,255,.12); }
/* sheets / settings */
.ch-modal { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 5; }
.ch-mbox { width: 26em; max-width: 92%; max-height: 88%; overflow-y: auto; touch-action: pan-y; background: #151a25; border-radius: 1em; padding: 1em; box-sizing: border-box;
  box-shadow: 0 1em 3em rgba(0,0,0,.6); }
.ch-mt { font-weight: 700; font-size: 1.05em; margin-bottom: .6em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.ch-srx { margin-bottom: .6em; }
.ch-sl { margin-top: .3em; }
.ch-si { padding: .65em .8em; border-radius: .6em; background: rgba(255,255,255,.06); margin-top: .35em; cursor: pointer; }
.ch-si:hover { background: rgba(255,255,255,.12); }
.ch-si.danger { color: #ff7b72; }
.ch-si.ch-big { background: #2160d6; font-weight: 700; text-align: center; }
.ch-sec { margin-top: 1em; font-size: .75em; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.ch-note { font-size: .88em; color: rgba(255,255,255,.75); margin-top: .3em; }
.ch-tog { position: relative; padding-right: 3.6em; }
.ch-tog i { position: absolute; right: .7em; top: 50%; margin-top: -.6em; width: 2.2em; height: 1.2em; border-radius: .6em; background: rgba(255,255,255,.2); }
.ch-tog i:after { content: ''; position: absolute; left: .1em; top: .1em; width: 1em; height: 1em; border-radius: 50%; background: #fff; transition: left .15s; }
.ch-tog.on i { background: #34c759; } .ch-tog.on i:after { left: 1.1em; }
.ch-link { display: block; margin-top: .5em; color: #8fd8ff; word-break: break-all; font-size: .85em; }
.ch-qr { background: #fff; width: 11em; height: 11em; margin: .7em auto 0; padding: .4em; border-radius: .5em; }
.ch-qr svg { width: 100%; height: 100%; }
.ch-people { display: flex; flex-wrap: wrap; }
.ch-person { width: 33.3%; text-align: center; padding: .5em 0; border-radius: .6em; cursor: pointer; font-size: .9em; }
.ch-person .ch-av { margin: 0 auto .3em; width: 3.2em; height: 3.2em; }
.ch-person:hover { background: rgba(255,255,255,.08); }
/* remote focus: only once a key has been pressed */
#chat.ch-keys .chf.sel { box-shadow: 0 0 0 .14em #8fd8ff; outline: none; }
#chat.ch-keys .ch-row.chf.sel, #chat.ch-keys .ch-si.chf.sel { background: rgba(143,216,255,.18); box-shadow: inset 0 0 0 .12em #8fd8ff; }
#chat.ch-tv .chf.sel { box-shadow: 0 0 0 .14em #8fd8ff; }
#chat.ch-tv .ch-row.chf.sel { background: rgba(143,216,255,.18); box-shadow: inset 0 0 0 .12em #8fd8ff; }
#chat.ch-tv .ch-photo { display: none; }
/* phones: one pane at a time */
#chat.ch-narrow .ch-side { width: 100%; max-width: none; min-width: 0; border-right: 0; }
#chat.ch-narrow .ch-main { display: none; }
#chat.ch-narrow.ch-thread .ch-side { display: none; }
#chat.ch-narrow.ch-thread .ch-main { display: flex; }
#chat.ch-narrow .ch-thead .ch-back { display: flex; }
#chat.ch-narrow .ch-bw { max-width: 82%; }
#chat.ch-narrow .ch-head { padding-top: calc(.7em + env(safe-area-inset-top)); }
#chat.ch-narrow .ch-thead { padding-top: calc(.7em + env(safe-area-inset-top)); }
#chat.ch-narrow .ch-card { min-width: 0; }
/* the corner note while watching / browsing, and the chat button with its unread badge */
#chtoast { position: fixed; right: 1.2em; top: 1.2em; z-index: 210; display: flex; align-items: center; max-width: 26em; padding: .6em .8em; border-radius: 1em;
  background: rgba(14,18,26,.9); border: 1px solid rgba(143,216,255,.25); color: #fff; font: 16px/1.3 -apple-system, "SamsungOne", Arial, sans-serif;
  box-shadow: 0 .5em 2em rgba(0,0,0,.5); cursor: pointer; }
html.tv #chtoast { font-size: 24px; }
#chtoast.hidden { display: none; }
#chtoast.film { opacity: .85; transform: scale(.85); transform-origin: top right; }
#chtoast .ch-av { width: 2.2em; height: 2.2em; }
#chtoast .ch-tb { margin: 0 .7em; min-width: 0; }
#chtoast .ch-tw { font-size: .8em; color: #8fd8ff; font-weight: 600; }
#chtoast .ch-tm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18em; }
#chtoast .ch-tx { opacity: .5; padding: .2em .3em; }
#chatbtn { position: fixed; right: 18px; bottom: 18px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 24px; background: rgba(20,30,50,.72); border: 1px solid rgba(143,216,255,.3); cursor: pointer; opacity: .55; }
#chatbtn.has { opacity: 1; }
#chatbtn:hover { opacity: 1; }
#chatbtn b { position: absolute; right: -4px; top: -4px; margin: 0; font: 700 12px/1.4 Arial, sans-serif; }
#chatbtn b:empty { display: none; }
#chatbtn.hidden { display: none; }
html.tv #chatbtn { width: 64px; height: 64px; font-size: 30px; right: 28px; bottom: 28px; }
html.tv #chatbtn:not(.has) { display: none; }
/* the rail's unread count beside "CHAT" */
.rail .r em.chn { font-style: normal; display: inline-block; margin-left: 10px; padding: 1px 8px; border-radius: 12px; background: #ff3b30; font-size: 15px; font-weight: 700; letter-spacing: 0; }
.rail.asleep .r em.chn { opacity: 1; }
.face.chconv { display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(160deg, #1b2436, #0c1018); }
.face.chconv .chfig { width: 70%; height: 62%; background: center bottom / contain no-repeat; }
.face.chconv .chic { font-size: 150px; line-height: 1; }
.face.chconv .chnm { margin-top: 18px; font-size: 34px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; text-align: center; padding: 0 20px; }
.face .chbadge { position: absolute; right: 16px; top: 16px; min-width: 52px; padding: 6px 12px; border-radius: 30px; background: #ff3b30; font: 700 30px/1.2 Arial, sans-serif; text-align: center; box-sizing: border-box; }

/* Chat over a playing film: frosted glass down the right, the film visible (and playing) behind it */
#chat.ch-film { background: transparent; pointer-events: none; }
#chat.ch-film .ch-side { display: none; }
#chat.ch-film .ch-main { position: absolute; right: 0; top: 0; bottom: 0; width: 36%; min-width: 340px; pointer-events: auto;
  background: rgba(14,18,28,.55); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4);
  border-left: 1px solid rgba(255,255,255,.14); box-shadow: -1em 0 3em rgba(0,0,0,.35); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #chat.ch-film .ch-main { background: rgba(14,18,28,.84); } }
#chat.ch-film .ch-thead, #chat.ch-film .ch-compose, #chat.ch-film .ch-quick { background: transparent; }
#chat.ch-film .ch-b { background: rgba(40,48,66,.7); } #chat.ch-film .ch-m.mine .ch-b { background: rgba(33,96,214,.85); }
#chat.ch-film #chinput { background: rgba(255,255,255,.08); }
#chat.ch-film .ch-modal { pointer-events: auto; background: rgba(0,0,0,.35); }
#chat.ch-film .ch-thead .ch-back { display: none; }
#chat.ch-narrow.ch-film .ch-main { width: 100%; min-width: 0; display: flex; }
#chat:not(.ch-film) .ch-swbtn { display: none; }
#chtoast { -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); background: rgba(14,18,28,.62); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #chtoast { background: rgba(14,18,28,.9); } }
#chtoast.film { opacity: 1; }
#chtoast.film:after { content: 'OK to reply'; display: block; position: absolute; right: 1em; bottom: -1.5em; font-size: .7em; color: rgba(255,255,255,.6); }
html:not(.tv) #chtoast.film:after { content: 'Tap to reply'; }
/* the 💬 in the film's controls, with the unread count */
.osd .osdchat { position: absolute; right: 64px; top: -56px; padding: 8px 12px; font-size: 22px; line-height: 1; border-radius: 22px; cursor: pointer; opacity: .75; }
.osd .osdchat b { font: 700 13px/1 Arial, sans-serif; background: #ff3b30; border-radius: 10px; padding: 2px 6px; margin-left: 4px; vertical-align: 4px; }
.osd .osdchat b:empty { display: none; }
.osd .osdchat.sel, .osd .osdchat:hover { opacity: 1; background: rgba(143,216,255,.25); box-shadow: 0 0 0 2px #8fd8ff; }

/* Chat over a film, compact (Chris, 7 Oct): a small frosted-glass card floating bottom-right, not a full-height strip */
#chat.ch-film .ch-main { top: auto; right: 48px; bottom: 48px; width: 30%; min-width: 360px; height: 58%; border-radius: 30px; overflow: hidden;
  background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.03)), rgba(14,18,28,.34);
  -webkit-backdrop-filter: blur(26px) saturate(140%); backdrop-filter: blur(26px) saturate(140%);
  border: 1px solid rgba(255,255,255,.22); box-shadow: 0 20px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.25); }
#chat.ch-film .ch-b { background: rgba(255,255,255,.12); } #chat.ch-film .ch-m.mine .ch-b { background: rgba(33,96,214,.7); }
#chat.ch-film .ch-modal .ch-people { display: flex; flex-wrap: wrap; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { #chat.ch-film .ch-main { background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(14,18,28,.8); } }   /* the 2020 Samsung: no blur, so darker glass */

/* Quick send over a film (9 Oct 2026): who, then one press. Big targets for a remote; line-height 1.7 */
.ch-qsbox { display: none; }
.ch.ch-qs .ch-side, .ch.ch-qs .ch-main { display: none; }
.ch.ch-qs .ch-qsbox { display: block; position: absolute; inset: 0; padding: 40px 44px; overflow: hidden; line-height: 1.7; }
.ch-qh { font-size: 34px; margin-bottom: 22px; color: rgba(255,255,255,.75); }
.ch-qh b { color: #fff; }
.ch-qwho { display: flex; flex-wrap: wrap; gap: 18px; margin-bottom: 30px; }
.ch-qp { width: 128px; text-align: center; border-radius: 18px; padding: 10px 4px; opacity: .7; }
.ch-qp.on { opacity: 1; background: rgba(255,214,90,.16); }
.ch-qp.sel { opacity: 1; outline: 4px solid #fff; }
.ch-qav { width: 96px; height: 96px; margin: 0 auto; border-radius: 50%; background: #2a2a30 center / cover no-repeat; display: flex; align-items: center; justify-content: center; font-size: 44px; }
.ch-qav span { opacity: 0; }
.ch-qav.all { font-size: 52px; }
.ch-qn { margin-top: 6px; font-size: 22px; font-weight: 700; }
.ch-qmsgs { display: flex; flex-wrap: wrap; gap: 14px; }
.ch-qm { padding: 14px 26px; border-radius: 40px; background: rgba(255,255,255,.1); font-size: 26px; font-weight: 600; }
.ch-qm.sel { background: #fff; color: #000; }
.ch-qm.ch-qspeak.on { background: #ff5a5a; color: #fff; }
.ch-qrecent { margin-top: 34px; font-size: 22px; color: rgba(255,255,255,.7); }
.ch-qr { padding: 4px 0; }
.ch-qr span { margin-left: 14px; font-size: 18px; color: rgba(255,255,255,.4); }
.ch-qr.none { color: rgba(255,255,255,.4); }