/* Search inside a chat (js/find.js): the header becomes a search box, the message box becomes "3 of 12" with up and down */
.fhead,.fbar{display:none}
.chat.finding .chat-head>:not(.fhead){display:none}
.chat.finding .chat-head>.fhead{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:40px;animation:fdIn .22s cubic-bezier(.2,.8,.3,1) both}
.chat.news.finding .composer{display:block}
.chat.finding .composer>:not(.fbar){display:none!important}
.chat.finding .composer>.fbar{display:flex;animation:fdUp .24s cubic-bezier(.2,.8,.3,1) both}
@keyframes fdIn{from{opacity:0;transform:translateY(-6px)}}
@keyframes fdUp{from{opacity:0;transform:translateY(8px)}}

/* the box in the header */
.ffield{flex:1;min-width:0;height:40px;display:flex;align-items:center;gap:9px;padding:0 8px 0 14px;border-radius:20px;background:var(--raise);color:var(--muted);transition:box-shadow .2s,background .2s;cursor:text}
.ffield>svg{width:17px;height:17px;flex:none}
.ffield:focus-within{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--hush) 30%,transparent)}
.ffield input{flex:1;min-width:0;background:none;border:0;color:var(--text);font:inherit;font-size:16px;outline:none;-webkit-appearance:none;appearance:none;padding:0}
.ffield input::placeholder{color:var(--muted)}
.ffield input::-webkit-search-cancel-button{display:none}
.ffield .clr{width:24px;height:24px;border-radius:50%;background:var(--line);color:var(--text);font-size:11px;display:grid;place-items:center;flex:none;transition:transform .15s}
.ffield .clr:active{transform:scale(.85)}
.app.grad .ffield{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.app.grad .ffield:focus-within{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 0 0 1px color-mix(in srgb,var(--hush) 30%,transparent)}
.fdone{height:40px;padding:0 8px;border-radius:20px;font-weight:700;font-size:15px;color:var(--text);flex:none;transition:transform .15s,background .2s;user-select:none;-webkit-user-select:none}
.fdone:hover{background:var(--raise)}
.fdone:active{transform:scale(.92)}

/* the bar where the message box was */
.fbar{align-items:center;gap:2px;min-height:54px;padding:5px 6px 5px 18px;border-radius:27px;background:color-mix(in srgb,var(--me) 13%,#1e1e20);border:1px solid color-mix(in srgb,var(--me) 30%,#2c2c2e);user-select:none;-webkit-user-select:none}
.app.grad .fbar{background:linear-gradient(180deg,color-mix(in srgb,var(--me) 14%,rgba(40,40,44,.75)),color-mix(in srgb,var(--me2) 8%,rgba(26,26,29,.75)));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:color-mix(in srgb,var(--me) 26%,rgba(255,255,255,.06))}
.fbar.bump{animation:fdBump .34s ease-out}
@keyframes fdBump{25%{transform:translateY(-3px)}60%{transform:translateY(1.5px)}}
.fcount{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;line-height:1.25}
.fcount b{font-size:15px;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.fcount .fnum{display:inline-block}
.fcount small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fcount .hint{font-size:15px;font-weight:700;color:color-mix(in srgb,var(--text) 70%,var(--muted));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbtn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none;color:var(--hush);transition:transform .15s,background .2s,opacity .2s,color .2s}
.fbtn svg{width:20px;height:20px}
.fbtn:hover{background:rgba(255,255,255,.07)}
.fbtn:active{transform:scale(.86)}
.fbtn:disabled{opacity:.28;pointer-events:none}
.fbtn[aria-pressed="true"]{background:var(--me);color:var(--ink)}
.app.grad .fbtn[aria-pressed="true"]{background:linear-gradient(135deg,var(--me),var(--me2))}

/* matches in the bubbles: a soft light tint, stronger on the one you're on */
.msg mark.fhit{background:color-mix(in srgb,var(--hush) 20%,transparent);color:inherit;border-radius:5px;padding:0 2px;margin:0 -2px;transition:background .25s,box-shadow .25s}
.msg.fcur mark.fhit{background:color-mix(in srgb,var(--hush) 34%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--hush) 30%,transparent)}
.msg.out mark.fhit,.msg.colored mark.fhit{background:rgba(255,255,255,.42)}
.msg.out.fcur mark.fhit,.msg.colored.fcur mark.fhit{background:rgba(255,255,255,.78);box-shadow:0 0 0 1px rgba(255,255,255,.5),0 1px 6px -2px rgba(0,0,0,.18)}
.msg .bubble{transition:background .35s,box-shadow .3s}
.msg.fcur .bubble{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--hush) 75%,transparent),0 0 24px -4px color-mix(in srgb,var(--hush) 55%,transparent)}
.msg.out.fcur .bubble{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--me) 70%,#fff),0 0 24px -4px var(--me)}
.msg.colored.fcur .bubble{box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c) 70%,#fff),0 0 24px -4px var(--c)}
.msg .bubble.fglow{animation:fdGlow .9s cubic-bezier(.3,1.2,.5,1)}
@keyframes fdGlow{30%{transform:scale(1.02);filter:brightness(1.1)}}
.msg.fcur .trans.open{opacity:1}

/* every match as a list, between the header and the bar */
.flist{position:absolute;left:0;right:0;top:var(--headH,64px);bottom:0;z-index:3;overflow-y:auto;overscroll-behavior:contain;padding:8px 10px calc(var(--compH,80px) + 8px);background:color-mix(in srgb,var(--night) 93%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);animation:fdIn .2s ease-out both;scrollbar-width:none}
.flist::-webkit-scrollbar{display:none}
.fl-in{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:2px}
.frow{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:10px 12px;border-radius:16px;transition:background .15s,transform .12s,box-shadow .2s;user-select:none;-webkit-user-select:none}
.frow:hover{background:var(--raise)}
.frow:active{transform:scale(.985)}
.frow.on{background:color-mix(in srgb,var(--me) 13%,var(--raise));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--me) 32%,transparent)}
.frow .av{width:36px;height:36px;font-size:14px;margin-top:2px}
.fr-t{flex:1;min-width:0}
.fr-h{display:flex;align-items:baseline;gap:10px}
.fr-h b{font-weight:700;font-size:14.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fr-h span{margin-left:auto;font-size:12px;color:var(--muted);white-space:nowrap;flex:none}
.fr-s{margin-top:2px;font-size:14px;line-height:1.4;color:color-mix(in srgb,var(--text) 80%,var(--muted));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.fr-s svg{width:13px;height:13px;vertical-align:-2px;margin-right:5px;color:var(--muted)}
.fr-s mark{background:color-mix(in srgb,var(--me) 30%,transparent);color:var(--text);border-radius:4px;padding:0 2px;margin:0 -2px}
.fl-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:56px 28px;color:var(--muted);font-size:14px;line-height:1.45}
.fl-empty svg{width:30px;height:30px;opacity:.6;margin-bottom:6px}
.fl-empty b{color:var(--text);font-size:16px;font-weight:700}
.fl-more{text-align:center;color:var(--muted);font-size:12.5px;padding:12px}
@media (min-width:1000px){.flist{padding-left:24px;padding-right:24px}}
.chat.flisting .newpill{display:none}
@media (prefers-reduced-motion:reduce){.chat.finding .chat-head>.fhead,.chat.finding .composer>.fbar,.flist,.fbar.bump,.msg .bubble.fglow{animation:none}}
.app.notext .msg.fcur .trans:not([hidden]){display:block}
/* the photo viewer has its own "3 of 8": hide the search bar's count under it (the tablet viewer is see-through) */
body:has(#viewer:not([hidden])) .chat.finding .fbar{visibility:hidden}