Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/improsocial/impro
An extensible Bluesky client for web impro.social
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340134113421343134413451346134713481349135013511352135313541355135613571358135913601361136213631364136513661367136813691370137113721373137413751376137713781379138013811382138313841385138613871388138913901391139213931394139513961397139813991400140114021403140414051406140714081409141014111412141314141415141614171418141914201421142214231424142514261427142814291430143114321433143414351436143714381439144014411442144314441445144614471448144914501451145214531454145514561457145814591460146114621463146414651466146714681469147014711472147314741475147614771478147914801481148214831484148514861487148814891490149114921493149414951496149714981499150015011502150315041505150615071508150915101511151215131514151515161517151815191520152115221523152415251526152715281529153015311532153315341535153615371538153915401541154215431544154515461547154815491550155115521553155415551556155715581559156015611562156315641565156615671568156915701571157215731574157515761577157815791580158115821583158415851586158715881589159015911592159315941595159615971598159916001601160216031604160516061607160816091610161116121613161416151616161716181619162016211622162316241625162616271628162916301631163216331634163516361637163816391640164116421643164416451646164716481649165016511652165316541655165616571658165916601661166216631664166516661667166816691670167116721673167416751676167716781679168016811682168316841685168616871688168916901691169216931694169516961697169816991700170117021703170417051706170717081709171017111712171317141715171617171718171917201721172217231724172517261727172817291730173117321733173417351736173717381739174017411742174317441745174617471748174917501751175217531754175517561757175817591760176117621763176417651766176717681769177017711772177317741775177617771778177917801781178217831784178517861787178817891790179117921793179417951796179717981799180018011802180318041805180618071808180918101811181218131814181518161817181818191820182118221823182418251826182718281829183018311832183318341835183618371838183918401841184218431844184518461847184818491850185118521853185418551856185718581859186018611862186318641865186618671868186918701871187218731874187518761877187818791880188118821883188418851886188718881889189018911892189318941895189618971898189919001901190219031904190519061907190819091910191119121913191419151916191719181919192019211922192319241925192619271928192919301931193219331934193519361937193819391940194119421943194419451946194719481949195019511952195319541955195619571958195919601961196219631964196519661967196819691970197119721973197419751976197719781979198019811982198319841985198619871988198919901991199219931994199519961997199819992000200120022003200420052006200720082009201020112012201320142015201620172018201920202021202220232024202520262027202820292030203120322033203420352036203720382039204020412042204320442045204620472048204920502051205220532054205520562057205820592060206120622063206420652066206720682069207020712072207320742075207620772078207920802081208220832084208520862087208820892090209120922093209420952096209720982099210021012102210321042105210621072108210921102111211221132114211521162117211821192120212121222123212421252126212721282129213021312132213321342135213621372138213921402141214221432144214521462147214821492150215121522153215421552156215721582159216021612162216321642165216621672168216921702171217221732174217521762177217821792180218121822183218421852186218721882189219021912192219321942195219621972198219922002201220222032204220522062207220822092210221122122213221422152216221722182219222022212222222322242225222622272228222922302231223222332234223522362237223822392240224122422243224422452246224722482249225022512252225322542255225622572258225922602261226222632264226522662267226822692270227122722273227422752276227722782279228022812282228322842285228622872288228922902291229222932294229522962297229822992300230123022303230423052306230723082309231023112312231323142315231623172318231923202321232223232324232523262327232823292330233123322333233423352336233723382339234023412342234323442345234623472348234923502351235223532354235523562357235823592360236123622363236423652366236723682369237023712372237323742375237623772378237923802381238223832384238523862387238823892390239123922393239423952396239723982399240024012402240324042405240624072408240924102411241224132414241524162417241824192420242124222423242424252426242724282429243024312432243324342435243624372438243924402441244224432444244524462447244824492450245124522453245424552456245724582459246024612462246324642465246624672468246924702471247224732474247524762477247824792480248124822483248424852486248724882489249024912492249324942495249624972498249925002501250225032504250525062507250825092510251125122513251425152516251725182519252025212522252325242525252625272528252925302531253225332534253525362537253825392540254125422543254425452546254725482549255025512552255325542555255625572558255925602561256225632564256525662567256825692570257125722573257425752576257725782579258025812582258325842585258625872588258925902591259225932594259525962597259825992600260126022603260426052606260726082609261026112612261326142615261626172618261926202621262226232624262526262627262826292630263126322633263426352636263726382639264026412642264326442645264626472648264926502651265226532654265526562657265826592660266126622663266426652666266726682669267026712672267326742675267626772678267926802681268226832684268526862687268826892690269126922693269426952696269726982699270027012702270327042705270627072708270927102711271227132714271527162717271827192720272127222723272427252726272727282729273027312732273327342735273627372738273927402741274227432744274527462747274827492750275127522753275427552756275727582759276027612762276327642765276627672768276927702771277227732774277527762777277827792780278127822783278427852786278727882789279027912792279327942795279627972798279928002801280228032804280528062807280828092810281128122813281428152816281728182819282028212822282328242825282628272828282928302831283228332834283528362837283828392840284128422843284428452846284728482849285028512852285328542855285628572858285928602861286228632864286528662867286828692870287128722873287428752876287728782879288028812882288328842885288628872888288928902891289228932894289528962897289828992900290129022903290429052906290729082909291029112912291329142915291629172918291929202921292229232924292529262927292829292930293129322933293429352936293729382939294029412942294329442945294629472948294929502951295229532954295529562957295829592960296129622963296429652966296729682969297029712972297329742975297629772978297929802981298229832984298529862987298829892990299129922993299429952996299729982999300030013002300330043005300630073008300930103011301230133014301530163017301830193020302130223023302430253026302730283029303030313032303330343035303630373038303930403041304230433044304530463047304830493050305130523053305430553056305730583059306030613062306330643065306630673068306930703071307230733074307530763077307830793080308130823083308430853086308730883089309030913092309330943095309630973098309931003101310231033104310531063107310831093110311131123113311431153116311731183119312031213122312331243125312631273128312931303131313231333134313531363137313831393140314131423143314431453146314731483149315031513152315331543155315631573158315931603161316231633164316531663167316831693170317131723173317431753176317731783179318031813182318331843185318631873188318931903191319231933194319531963197319831993200320132023203320432053206320732083209321032113212321332143215321632173218321932203221322232233224322532263227322832293230323132323233323432353236323732383239324032413242324332443245324632473248324932503251325232533254325532563257325832593260326132623263326432653266326732683269327032713272327332743275327632773278327932803281328232833284328532863287328832893290329132923293329432953296329732983299330033013302330333043305330633073308330933103311331233133314331533163317331833193320332133223323332433253326332733283329333033313332333333343335333633373338333933403341334233433344334533463347334833493350335133523353335433553356335733583359336033613362336333643365336633673368336933703371337233733374337533763377337833793380338133823383338433853386338733883389339033913392339333943395339633973398339934003401340234033404340534063407340834093410341134123413341434153416341734183419342034213422342334243425342634273428342934303431343234333434343534363437343834393440344134423443344434453446344734483449345034513452345334543455345634573458345934603461346234633464346534663467346834693470347134723473347434753476347734783479348034813482348334843485348634873488348934903491349234933494349534963497349834993500350135023503350435053506350735083509351035113512351335143515351635173518351935203521352235233524352535263527352835293530353135323533353435353536353735383539354035413542354335443545354635473548354935503551355235533554355535563557355835593560356135623563356435653566356735683569357035713572357335743575357635773578357935803581358235833584358535863587358835893590359135923593359435953596359735983599360036013602360336043605360636073608360936103611361236133614361536163617361836193620362136223623362436253626362736283629363036313632363336343635363636373638363936403641364236433644364536463647364836493650365136523653365436553656365736583659366036613662366336643665366636673668366936703671367236733674367536763677367836793680368136823683368436853686368736883689369036913692369336943695369636973698369937003701370237033704370537063707370837093710371137123713371437153716371737183719372037213722372337243725372637273728372937303731373237333734373537363737373837393740374137423743374437453746374737483749375037513752375337543755375637573758375937603761376237633764376537663767376837693770377137723773377437753776377737783779378037813782378337843785378637873788378937903791379237933794379537963797379837993800380138023803380438053806380738083809381038113812381338143815381638173818381938203821382238233824382538263827382838293830383138323833383438353836383738383839384038413842384338443845384638473848384938503851385238533854385538563857385838593860386138623863386438653866386738683869387038713872387338743875387638773878387938803881388238833884388538863887388838893890389138923893389438953896389738983899390039013902390339043905390639073908390939103911391239133914391539163917391839193920392139223923392439253926392739283929393039313932393339343935393639373938393939403941394239433944394539463947394839493950395139523953395439553956395739583959396039613962396339643965396639673968396939703971397239733974397539763977397839793980398139823983398439853986398739883989399039913992399339943995399639973998399940004001400240034004400540064007400840094010401140124013401440154016401740184019402040214022402340244025402640274028402940304031403240334034403540364037403840394040404140424043404440454046404740484049405040514052405340544055405640574058405940604061406240634064406540664067406840694070407140724073407440754076407740784079408040814082408340844085408640874088408940904091409240934094409540964097409840994100410141024103410441054106410741084109411041114112411341144115411641174118411941204121412241234124412541264127412841294130413141324133413441354136413741384139414041414142414341444145414641474148414941504151415241534154415541564157415841594160416141624163416441654166416741684169417041714172417341744175417641774178417941804181418241834184418541864187418841894190419141924193419441954196419741984199420042014202420342044205420642074208420942104211421242134214421542164217421842194220422142224223422442254226422742284229423042314232423342344235423642374238423942404241424242434244424542464247424842494250425142524253425442554256425742584259426042614262426342644265426642674268426942704271427242734274427542764277427842794280428142824283428442854286428742884289429042914292429342944295429642974298429943004301430243034304430543064307430843094310431143124313431443154316431743184319432043214322432343244325432643274328432943304331433243334334433543364337433843394340434143424343434443454346434743484349435043514352435343544355435643574358435943604361436243634364436543664367436843694370437143724373437443754376437743784379438043814382438343844385438643874388438943904391439243934394439543964397439843994400440144024403440444054406440744084409441044114412441344144415441644174418441944204421442244234424442544264427442844294430443144324433443444354436443744384439444044414442444344444445444644474448444944504451445244534454445544564457445844594460446144624463446444654466446744684469447044714472447344744475447644774478447944804481448244834484448544864487448844894490449144924493449444954496449744984499450045014502450345044505450645074508450945104511451245134514451545164517451845194520452145224523452445254526452745284529453045314532453345344535453645374538453945404541454245434544454545464547454845494550455145524553455445554556455745584559456045614562456345644565456645674568456945704571457245734574457545764577457845794580458145824583458445854586458745884589459045914592459345944595459645974598459946004601460246034604460546064607460846094610461146124613461446154616461746184619462046214622462346244625462646274628462946304631463246334634463546364637463846394640464146424643464446454646464746484649465046514652465346544655465646574658465946604661466246634664466546664667466846694670467146724673467446754676467746784679468046814682468346844685468646874688468946904691469246934694469546964697469846994700470147024703470447054706470747084709471047114712471347144715471647174718471947204721472247234724472547264727472847294730473147324733473447354736473747384739474047414742474347444745474647474748474947504751475247534754475547564757475847594760476147624763476447654766476747684769477047714772477347744775477647774778477947804781478247834784478547864787478847894790479147924793479447954796479747984799480048014802480348044805480648074808480948104811481248134814481548164817481848194820482148224823482448254826482748284829483048314832483348344835483648374838483948404841484248434844484548464847484848494850485148524853485448554856485748584859486048614862486348644865486648674868486948704871487248734874487548764877487848794880488148824883488448854886488748884889489048914892489348944895489648974898489949004901490249034904490549064907490849094910491149124913491449154916491749184919492049214922492349244925492649274928492949304931493249334934493549364937493849394940494149424943494449454946494749484949495049514952495349544955495649574958495949604961496249634964496549664967496849694970497149724973497449754976497749784979498049814982498349844985498649874988498949904991499249934994499549964997499849995000500150025003500450055006500750085009501050115012501350145015501650175018501950205021502250235024502550265027502850295030503150325033503450355036503750385039504050415042504350445045504650475048504950505051505250535054505550565057505850595060506150625063506450655066506750685069507050715072507350745075507650775078507950805081508250835084508550865087508850895090509150925093509450955096509750985099510051015102510351045105510651075108510951105111511251135114511551165117511851195120512151225123512451255126512751285129513051315132513351345135513651375138513951405141514251435144514551465147514851495150515151525153515451555156515751585159516051615162516351645165516651675168516951705171517251735174517551765177517851795180518151825183518451855186518751885189519051915192519351945195519651975198519952005201520252035204520552065207520852095210521152125213521452155216521752185219522052215222522352245225522652275228522952305231523252335234523552365237523852395240524152425243524452455246524752485249525052515252525352545255525652575258525952605261526252635264526552665267526852695270527152725273527452755276527752785279528052815282528352845285528652875288528952905291529252935294529552965297529852995300530153025303530453055306530753085309531053115312531353145315531653175318531953205321532253235324532553265327532853295330533153325333533453355336533753385339534053415342534353445345534653475348534953505351535253535354535553565357535853595360536153625363536453655366536753685369537053715372537353745375537653775378537953805381538253835384538553865387538853895390539153925393539453955396539753985399540054015402540354045405540654075408540954105411541254135414541554165417541854195420542154225423542454255426542754285429543054315432543354345435543654375438543954405441544254435444544554465447544854495450545154525453545454555456545754585459546054615462546354645465546654675468546954705471547254735474547554765477547854795480548154825483548454855486548754885489549054915492549354945495549654975498549955005501550255035504550555065507550855095510551155125513551455155516551755185519552055215522552355245525552655275528552955305531553255335534553555365537553855395540554155425543554455455546554755485549555055515552555355545555555655575558555955605561556255635564556555665567556855695570557155725573557455755576557755785579558055815582558355845585558655875588558955905591559255935594559555965597559855995600560156025603560456055606560756085609561056115612561356145615561656175618561956205621562256235624562556265627562856295630563156325633563456355636563756385639564056415642564356445645564656475648564956505651565256535654565556565657565856595660566156625663566456655666566756685669567056715672567356745675567656775678567956805681568256835684568556865687568856895690569156925693569456955696569756985699570057015702570357045705570657075708570957105711571257135714571557165717571857195720572157225723572457255726572757285729573057315732573357345735573657375738573957405741574257435744574557465747574857495750575157525753575457555756575757585759576057615762576357645765576657675768576957705771577257735774577557765777577857795780578157825783578457855786578757885789579057915792579357945795579657975798579958005801580258035804580558065807580858095810581158125813581458155816581758185819582058215822582358245825582658275828582958305831583258335834583558365837583858395840584158425843584458455846584758485849585058515852585358545855585658575858585958605861586258635864586558665867586858695870587158725873587458755876587758785879588058815882588358845885588658875888588958905891589258935894589558965897589858995900590159025903590459055906590759085909591059115912591359145915591659175918591959205921592259235924592559265927592859295930593159325933593459355936593759385939594059415942594359445945594659475948594959505951595259535954595559565957595859595960596159625963596459655966596759685969597059715972597359745975597659775978597959805981598259835984598559865987598859895990599159925993599459955996599759985999600060016002600360046005600660076008600960106011601260136014601560166017601860196020602160226023602460256026602760286029603060316032603360346035603660376038603960406041604260436044604560466047604860496050605160526053605460556056605760586059606060616062606360646065606660676068606960706071607260736074607560766077607860796080608160826083608460856086608760886089609060916092609360946095609660976098609961006101610261036104610561066107610861096110611161126113611461156116611761186119612061216122612361246125612661276128612961306131613261336134613561366137613861396140614161426143614461456146614761486149615061516152615361546155615661576158615961606161616261636164616561666167616861696170617161726173617461756176617761786179618061816182618361846185618661876188618961906191619261936194619561966197619861996200620162026203620462056206620762086209621062116212621362146215621662176218621962206221622262236224622562266227622862296230623162326233623462356236623762386239624062416242624362446245624662476248624962506251625262536254625562566257625862596260626162626263626462656266626762686269627062716272627362746275627662776278627962806281628262836284628562866287628862896290629162926293629462956296629762986299630063016302630363046305630663076308630963106311631263136314631563166317631863196320632163226323632463256326632763286329633063316332633363346335633663376338633963406341634263436344634563466347634863496350635163526353635463556356635763586359636063616362636363646365636663676368636963706371637263736374637563766377637863796380638163826383638463856386638763886389639063916392639363946395639663976398639964006401640264036404640564066407640864096410641164126413641464156416641764186419642064216422642364246425642664276428642964306431643264336434643564366437643864396440644164426443644464456446644764486449645064516452645364546455645664576458645964606461646264636464646564666467646864696470647164726473647464756476647764786479648064816482648364846485648664876488648964906491649264936494649564966497649864996500650165026503650465056506650765086509651065116512651365146515651665176518651965206521652265236524652565266527652865296530653165326533653465356536653765386539654065416542654365446545654665476548654965506551655265536554655565566557655865596560656165626563656465656566656765686569657065716572657365746575657665776578657965806581658265836584658565866587658865896590659165926593659465956596659765986599660066016602660366046605660666076608660966106611661266136614661566166617661866196620662166226623662466256626662766286629663066316632663366346635663666376638663966406641664266436644664566466647664866496650665166526653665466556656665766586659666066616662666366646665666666676668666966706671667266736674667566766677667866796680668166826683668466856686668766886689669066916692669366946695669666976698669967006701670267036704670567066707670867096710671167126713671467156716671767186719672067216722672367246725672667276728672967306731673267336734673567366737673867396740674167426743674467456746674767486749675067516752675367546755675667576758675967606761676267636764676567666767676867696770677167726773677467756776677767786779678067816782678367846785678667876788678967906791679267936794679567966797679867996800680168026803680468056806680768086809681068116812681368146815681668176818681968206821682268236824682568266827682868296830683168326833683468356836683768386839684068416842684368446845684668476848684968506851685268536854685568566857685868596860686168626863686468656866686768686869687068716872687368746875687668776878687968806881688268836884688568866887688868896890689168926893689468956896689768986899690069016902690369046905690669076908690969106911691269136914691569166917691869196920692169226923692469256926692769286929693069316932693369346935693669376938693969406941694269436944694569466947694869496950695169526953695469556956695769586959696069616962696369646965696669676968696969706971697269736974697569766977697869796980698169826983698469856986698769886989699069916992699369946995699669976998699970007001700270037004700570067007700870097010701170127013701470157016701770187019702070217022702370247025702670277028702970307031703270337034703570367037703870397040704170427043704470457046704770487049705070517052705370547055705670577058705970607061706270637064706570667067706870697070707170727073707470757076707770787079708070817082708370847085708670877088708970907091709270937094709570967097709870997100710171027103710471057106710771087109711071117112711371147115711671177118711971207121712271237124712571267127712871297130713171327133713471357136713771387139714071417142714371447145714671477148714971507151715271537154715571567157715871597160716171627163716471657166716771687169717071717172717371747175717671777178717971807181718271837184718571867187718871897190719171927193719471957196719771987199720072017202720372047205720672077208720972107211721272137214721572167217721872197220722172227223722472257226722772287229723072317232723372347235723672377238723972407241724272437244724572467247724872497250725172527253725472557256725772587259726072617262726372647265726672677268726972707271727272737274727572767277727872797280728172827283728472857286728772887289729072917292729372947295729672977298729973007301730273037304730573067307730873097310731173127313731473157316731773187319732073217322732373247325732673277328732973307331733273337334733573367337733873397340734173427343734473457346734773487349735073517352735373547355735673577358735973607361736273637364736573667367736873697370737173727373737473757376737773787379738073817382738373847385738673877388738973907391739273937394739573967397739873997400740174027403740474057406740774087409741074117412741374147415741674177418741974207421742274237424742574267427742874297430743174327433743474357436743774387439744074417442744374447445744674477448744974507451745274537454745574567457745874597460746174627463746474657466746774687469747074717472747374747475747674777478747974807481748274837484748574867487748874897490749174927493749474957496749774987499750075017502750375047505750675077508750975107511751275137514751575167517751875197520752175227523752475257526752775287529753075317532753375347535753675377538753975407541754275437544754575467547754875497550755175527553755475557556755775587559756075617562756375647565756675677568756975707571757275737574757575767577757875797580758175827583758475857586758775887589759075917592759375947595759675977598759976007601760276037604760576067607760876097610761176127613761476157616761776187619762076217622762376247625762676277628762976307631763276337634763576367637763876397640764176427643764476457646764776487649765076517652765376547655765676577658765976607661766276637664766576667667766876697670767176727673767476757676767776787679768076817682768376847685768676877688768976907691769276937694769576967697769876997700770177027703770477057706770777087709771077117712771377147715771677177718771977207721772277237724772577267727772877297730773177327733773477357736773777387739774077417742774377447745774677477748774977507751775277537754775577567757775877597760776177627763776477657766776777687769777077717772777377747775777677777778777977807781778277837784778577867787778877897790779177927793779477957796779777987799780078017802780378047805780678077808780978107811781278137814781578167817781878197820782178227823782478257826782778287829783078317832783378347835783678377838783978407841784278437844784578467847784878497850785178527853785478557856785778587859786078617862786378647865786678677868786978707871787278737874787578767877787878797880788178827883788478857886788778887889789078917892789378947895789678977898789979007901790279037904790579067907790879097910791179127913791479157916791779187919792079217922792379247925792679277928792979307931793279337934793579367937793879397940794179427943794479457946794779487949795079517952795379547955795679577958795979607961796279637964796579667967796879697970797179727973797479757976797779787979798079817982798379847985798679877988798979907991799279937994799579967997799879998000800180028003800480058006800780088009801080118012801380148015801680178018801980208021802280238024802580268027802880298030803180328033803480358036803780388039804080418042804380448045804680478048804980508051805280538054805580568057805880598060806180628063806480658066806780688069807080718072807380748075807680778078807980808081808280838084808580868087808880898090809180928093809480958096809780988099810081018102810381048105810681078108810981108111811281138114811581168117811881198120812181228123812481258126812781288129813081318132813381348135813681378138813981408141814281438144814581468147814881498150815181528153815481558156815781588159816081618162816381648165816681678168816981708171817281738174817581768177817881798180818181828183818481858186818781888189819081918192819381948195819681978198819982008201820282038204820582068207820882098210821182128213821482158216821782188219822082218222822382248225822682278228822982308231823282338234823582368237823882398240824182428243824482458246824782488249825082518252825382548255825682578258825982608261826282638264826582668267826882698270827182728273827482758276827782788279828082818282828382848285828682878288828982908291829282938294829582968297829882998300830183028303830483058306830783088309831083118312831383148315831683178318831983208321832283238324832583268327832883298330833183328333833483358336833783388339834083418342834383448345834683478348834983508351835283538354835583568357835883598360836183628363836483658366836783688369837083718372837383748375837683778378837983808381838283838384838583868387838883898390839183928393839483958396839783988399840084018402840384048405840684078408840984108411841284138414841584168417841884198420842184228423842484258426842784288429843084318432843384348435843684378438843984408441844284438444844584468447844884498450845184528453845484558456845784588459846084618462846384648465846684678468846984708471847284738474847584768477847884798480848184828483848484858486848784888489849084918492849384948495849684978498849985008501850285038504850585068507850885098510851185128513851485158516851785188519852085218522852385248525852685278528852985308531853285338534853585368537853885398540854185428543854485458546854785488549855085518552855385548555855685578558855985608561856285638564856585668567856885698570857185728573857485758576857785788579858085818582858385848585858685878588858985908591859285938594859585968597859885998600860186028603860486058606860786088609861086118612861386148615861686178618861986208621862286238624862586268627862886298630863186328633863486358636863786388639864086418642864386448645864686478648864986508651865286538654865586568657865886598660866186628663866486658666866786688669867086718672867386748675867686778678867986808681868286838684868586868687868886898690869186928693869486958696869786988699870087018702870387048705870687078708870987108711871287138714871587168717871887198720872187228723872487258726872787288729873087318732873387348735873687378738873987408741874287438744874587468747874887498750875187528753875487558756875787588759876087618762876387648765876687678768876987708771877287738774877587768777877887798780878187828783878487858786878787888789879087918792879387948795879687978798879988008801880288038804880588068807880888098810881188128813881488158816881788188819882088218822882388248825882688278828882988308831883288338834883588368837883888398840884188428843884488458846884788488849885088518852885388548855885688578858885988608861886288638864886588668867886888698870887188728873887488758876887788788879888088818882888388848885888688878888888988908891889288938894889588968897889888998900890189028903890489058906890789088909891089118912891389148915891689178918891989208921892289238924892589268927892889298930893189328933893489358936893789388939894089418942894389448945894689478948894989508951895289538954895589568957895889598960896189628963896489658966896789688969897089718972897389748975897689778978897989808981898289838984898589868987898889898990899189928993899489958996899789988999900090019002900390049005900690079008900990109011901290139014901590169017901890199020902190229023902490259026902790289029903090319032903390349035903690379038903990409041904290439044904590469047904890499050905190529053905490559056905790589059906090619062906390649065906690679068906990709071907290739074907590769077907890799080908190829083908490859086908790889089909090919092909390949095909690979098909991009101910291039104910591069107910891099110911191129113911491159116911791189119912091219122912391249125912691279128912991309131913291339134913591369137913891399140914191429143914491459146914791489149915091519152915391549155915691579158915991609161916291639164916591669167916891699170917191729173917491759176917791789179918091819182918391849185918691879188918991909191919291939194919591969197919891999200920192029203920492059206920792089209921092119212921392149215921692179218921992209221922292239224922592269227922892299230923192329233923492359236923792389239924092419242924392449245924692479248924992509251925292539254925592569257925892599260926192629263926492659266926792689269927092719272927392749275927692779278927992809281928292839284928592869287928892899290929192929293929492959296929792989299930093019302930393049305930693079308930993109311931293139314931593169317931893199320932193229323932493259326932793289329933093319332933393349335933693379338933993409341934293439344934593469347934893499350935193529353935493559356935793589359936093619362936393649365936693679368936993709371937293739374937593769377937893799380938193829383938493859386938793889389939093919392939393949395939693979398939994009401940294039404940594069407940894099410941194129413941494159416941794189419942094219422942394249425942694279428942994309431943294339434943594369437943894399440944194429443944494459446944794489449945094519452945394549455945694579458945994609461946294639464946594669467946894699470947194729473947494759476947794789479948094819482948394849485948694879488948994909491949294939494949594969497949894999500950195029503950495059506950795089509951095119512951395149515951695179518951995209521952295239524952595269527952895299530953195329533953495359536953795389539954095419542954395449545954695479548954995509551955295539554955595569557955895599560956195629563956495659566956795689569957095719572957395749575957695779578957995809581958295839584958595869587958895899590959195929593959495959596959795989599960096019602960396049605960696079608960996109611961296139614961596169617961896199620962196229623962496259626962796289629963096319632963396349635963696379638963996409641964296439644964596469647964896499650965196529653965496559656965796589659966096619662966396649665966696679668966996709671967296739674967596769677967896799680968196829683968496859686968796889689969096919692969396949695969696979698969997009701970297039704970597069707970897099710971197129713971497159716971797189719972097219722972397249725972697279728972997309731973297339734973597369737973897399740974197429743974497459746974797489749975097519752975397549755975697579758975997609761976297639764976597669767976897699770977197729773977497759776977797789779978097819782978397849785978697879788978997909791979297939794979597969797979897999800980198029803980498059806980798089809981098119812981398149815981698179818981998209821982298239824982598269827982898299830983198329833983498359836983798389839984098419842984398449845984698479848984998509851985298539854985598569857985898599860986198629863986498659866986798689869987098719872987398749875987698779878987998809881988298839884988598869887988898899890989198929893989498959896989798989899990099019902990399049905990699079908990999109911991299139914991599169917991899199920992199229923992499259926992799289929993099319932993399349935993699379938993999409941994299439944994599469947994899499950995199529953995499559956995799589959996099619962996399649965996699679968996999709971997299739974997599769977997899799980998199829983998499859986998799889989999099919992999399949995999699979998999910000100011000210003100041000510006100071000810009100101001110012100131001410015100161001710018100191002010021100221002310024100251002610027100281002910030100311003210033100341003510036100371003810039100401004110042100431004410045100461004710048100491005010051100521005310054100551005610057100581005910060100611006210063100641006510066100671006810069100701007110072100731007410075100761007710078100791008010081100821008310084100851008610087100881008910090100911009210093100941009510096100971009810099101001010110102101031010410105101061010710108101091011010111101121011310114101151011610117101181011910120101211012210123101241012510126101271012810129101301013110132101331013410135101361013710138101391014010141101421014310144101451014610147101481014910150101511015210153101541015510156101571015810159101601016110162101631016410165101661016710168101691017010171101721017310174101751017610177101781017910180101811018210183101841018510186101871018810189101901019110192101931019410195101961019710198101991020010201102021020310204102051020610207102081020910210102111021210213102141021510216102171021810219102201022110222102231022410225102261022710228102291023010231102321023310234102351023610237102381023910240102411024210243102441024510246102471024810249102501025110252102531025410255102561025710258102591026010261102621026310264102651026610267102681026910270102711027210273102741027510276102771027810279102801028110282102831028410285102861028710288102891029010291102921029310294102951029610297102981029910300103011030210303103041030510306103071030810309103101031110312103131031410315103161031710318103191032010321103221032310324103251032610327103281032910330103311033210333103341033510336103371033810339103401034110342103431034410345103461034710348103491035010351103521035310354103551035610357103581035910360103611036210363103641036510366103671036810369103701037110372103731037410375103761037710378103791038010381103821038310384103851038610387103881038910390103911039210393103941039510396103971039810399104001040110402104031040410405104061040710408104091041010411104121041310414104151041610417104181041910420104211042210423104241042510426104271042810429104301043110432104331043410435104361043710438104391044010441104421044310444104451044610447104481044910450104511045210453104541045510456104571045810459104601046110462104631046410465104661046710468104691047010471104721047310474104751047610477104781047910480104811048210483104841048510486104871048810489104901049110492104931049410495104961049710498104991050010501105021050310504105051050610507105081050910510105111051210513105141051510516105171051810519105201052110522105231052410525105261052710528105291053010531105321053310534105351053610537105381053910540105411054210543105441054510546105471054810549105501055110552105531055410555105561055710558105591056010561105621056310564105651056610567105681056910570105711057210573105741057510576105771057810579105801058110582105831058410585105861058710588105891059010591105921059310594105951059610597105981059910600106011060210603106041060510606106071060810609106101061110612106131061410615106161061710618106191062010621106221062310624106251062610627106281062910630106311063210633106341063510636106371063810639106401064110642106431064410645106461064710648106491065010651106521065310654106551065610657106581065910660106611066210663106641066510666106671066810669106701067110672106731067410675106761067710678106791068010681106821068310684106851068610687106881068910690106911069210693106941069510696106971069810699107001070110702107031070410705107061070710708107091071010711107121071310714107151071610717107181071910720107211072210723107241072510726107271072810729107301073110732107331073410735107361073710738107391074010741107421074310744107451074610747107481074910750107511075210753107541075510756107571075810759107601076110762107631076410765107661076710768107691077010771107721077310774107751077610777107781077910780107811078210783107841078510786107871078810789107901079110792107931079410795107961079710798107991080010801108021080310804108051080610807108081080910810108111081210813108141081510816108171081810819108201082110822108231082410825108261082710828108291083010831108321083310834108351083610837108381083910840108411084210843108441084510846108471084810849108501085110852108531085410855108561085710858108591086010861108621086310864108651086610867108681086910870108711087210873108741087510876108771087810879108801088110882108831088410885108861088710888108891089010891108921089310894108951089610897108981089910900109011090210903109041090510906109071090810909109101091110912109131091410915109161091710918109191092010921109221092310924109251092610927109281092910930109311093210933109341093510936109371093810939109401094110942109431094410945109461094710948109491095010951109521095310954109551095610957109581095910960109611096210963109641096510966109671096810969109701097110972109731097410975109761097710978109791098010981109821098310984109851098610987109881098910990109911099210993109941099510996109971099810999110001100111002110031100411005110061100711008110091101011011110121101311014110151101611017110181101911020110211102211023110241102511026110271102811029110301103111032110331103411035110361103711038110391104011041110421104311044110451104611047110481104911050110511105211053110541105511056110571105811059110601106111062110631106411065110661106711068110691107011071110721107311074110751107611077110781107911080110811108211083110841108511086110871108811089110901109111092110931109411095110961109711098110991110011101111021110311104111051110611107111081110911110111111111211113111141111511116111171111811119111201112111122111231112411125111261112711128111291113011131111321113311134111351113611137111381113911140111411114211143111441114511146111471114811149111501115111152111531115411155111561115711158111591116011161111621116311164111651116611167111681116911170111711117211173111741117511176111771117811179111801118111182111831118411185111861118711188111891119011191111921119311194111951119611197111981119911200112011120211203112041120511206112071120811209112101121111212112131121411215112161121711218112191122011221112221122311224112251122611227112281122911230112311123211233112341123511236112371123811239112401124111242112431124411245112461124711248112491125011251112521125311254112551125611257112581125911260112611126211263112641126511266112671126811269112701127111272112731127411275112761127711278112791128011281112821128311284112851128611287112881128911290112911129211293112941129511296112971129811299113001130111302113031130411305113061130711308113091131011311113121131311314113151131611317113181131911320113211132211323113241132511326113271132811329113301133111332113331133411335113361133711338113391134011341113421134311344113451134611347113481134911350113511135211353113541135511356113571135811359113601136111362113631136411365113661136711368113691137011371113721137311374113751137611377113781137911380113811138211383113841138511386113871138811389113901139111392113931139411395113961139711398113991140011401114021140311404114051140611407114081140911410114111141211413114141141511416114171141811419114201142111422114231142411425114261142711428114291143011431114321143311434114351143611437114381143911440114411144211443114441144511446114471144811449114501145111452114531145411455114561145711458114591146011461114621146311464114651146611467114681146911470114711147211473114741147511476114771147811479114801148111482114831148411485114861148711488114891149011491114921149311494114951149611497114981149911500115011150211503115041150511506115071150811509115101151111512115131151411515115161151711518115191152011521115221152311524115251152611527115281152911530115311153211533115341153511536115371153811539115401154111542115431154411545115461154711548115491155011551115521155311554115551155611557115581155911560115611156211563115641156511566115671156811569115701157111572115731157411575115761157711578115791158011581115821158311584115851158611587115881158911590115911159211593115941159511596115971159811599116001160111602116031160411605116061160711608116091161011611116121161311614116151161611617116181161911620116211162211623116241162511626116271162811629116301163111632116331163411635116361163711638116391164011641116421164311644116451164611647116481164911650116511165211653116541165511656116571165811659116601166111662116631166411665116661166711668116691167011671116721167311674116751167611677116781167911680116811168211683116841168511686116871168811689116901169111692116931169411695116961169711698116991170011701117021170311704117051170611707117081170911710117111171211713117141171511716117171171811719117201172111722117231172411725117261172711728117291173011731117321173311734117351173611737117381173911740117411174211743117441174511746117471174811749117501175111752117531175411755117561175711758117591176011761117621176311764117651176611767117681176911770117711177211773117741177511776117771177811779117801178111782117831178411785117861178711788117891179011791117921179311794117951179611797117981179911800118011180211803118041180511806118071180811809118101181111812118131181411815118161181711818118191182011821118221182311824118251182611827118281182911830118311183211833118341183511836118371183811839118401184111842118431184411845118461184711848118491185011851118521185311854118551185611857118581185911860118611186211863118641186511866118671186811869118701187111872118731187411875118761187711878118791188011881118821188311884118851188611887118881188911890118911189211893118941189511896118971189811899119001190111902119031190411905119061190711908119091191011911119121191311914119151191611917119181191911920119211192211923119241192511926119271192811929119301193111932119331193411935119361193711938119391194011941119421194311944119451194611947119481194911950119511195211953119541195511956119571195811959119601196111962119631196411965119661196711968119691197011971119721197311974119751197611977119781197911980119811198211983119841198511986119871198811989119901199111992119931199411995119961199711998119991200012001120021200312004120051200612007120081200912010120111201212013120141201512016120171201812019120201202112022120231202412025120261202712028120291203012031120321203312034120351203612037120381203912040120411204212043120441204512046120471204812049120501205112052120531205412055120561205712058120591206012061120621206312064120651206612067120681206912070120711207212073120741207512076120771207812079120801208112082120831208412085120861208712088120891209012091120921209312094120951209612097120981209912100121011210212103121041210512106121071210812109121101211112112121131211412115121161211712118121191212012121121221212312124121251212612127121281212912130121311213212133121341213512136121371213812139121401214112142121431214412145121461214712148121491215012151121521215312154121551215612157121581215912160121611216212163121641216512166121671216812169121701217112172121731217412175121761217712178121791218012181121821218312184121851218612187121881218912190121911219212193121941219512196121971219812199122001220112202122031220412205122061220712208122091221012211122121221312214122151221612217122181221912220122211222212223122241222512226122271222812229122301223112232122331223412235122361223712238122391224012241122421224312244122451224612247122481224912250122511225212253122541225512256122571225812259122601226112262122631226412265122661226712268122691227012271122721227312274122751227612277122781227912280122811228212283122841228512286122871228812289122901229112292122931229412295122961229712298122991230012301123021230312304123051230612307123081230912310123111231212313123141231512316123171231812319123201232112322123231232412325123261232712328123291233012331123321233312334123351233612337123381233912340123411234212343123441234512346123471234812349123501235112352123531235412355123561235712358123591236012361123621236312364123651236612367123681236912370123711237212373123741237512376123771237812379123801238112382123831238412385123861238712388123891239012391123921239312394123951239612397123981239912400124011240212403124041240512406124071240812409124101241112412124131241412415124161241712418124191242012421124221242312424124251242612427124281242912430124311243212433124341243512436124371243812439124401244112442124431244412445124461244712448124491245012451124521245312454124551245612457124581245912460124611246212463124641246512466124671246812469124701247112472124731247412475124761247712478124791248012481124821248312484124851248612487124881248912490124911249212493124941249512496124971249812499125001250112502125031250412505125061250712508125091251012511125121251312514125151251612517125181251912520125211252212523125241252512526125271252812529125301253112532125331253412535125361253712538125391254012541125421254312544125451254612547125481254912550125511255212553125541255512556125571255812559125601256112562125631256412565125661256712568125691257012571125721257312574125751257612577125781257912580125811258212583125841258512586125871258812589125901259112592125931259412595125961259712598125991260012601126021260312604126051260612607126081260912610126111261212613126141261512616126171261812619126201262112622126231262412625126261262712628126291263012631126321263312634126351263612637126381263912640126411264212643126441264512646126471264812649126501265112652126531265412655126561265712658126591266012661126621266312664126651266612667126681266912670126711267212673126741267512676126771267812679126801268112682126831268412685126861268712688126891269012691126921269312694126951269612697126981269912700127011270212703127041270512706127071270812709127101271112712127131271412715127161271712718127191272012721127221272312724127251272612727127281272912730127311273212733127341273512736127371273812739127401274112742127431274412745127461274712748127491275012751127521275312754127551275612757127581275912760127611276212763127641276512766127671276812769127701277112772127731277412775127761277712778127791278012781127821278312784127851278612787127881278912790127911279212793127941279512796127971279812799128001280112802128031280412805128061280712808128091281012811128121281312814128151281612817128181281912820128211282212823128241282512826128271282812829128301283112832128331283412835128361283712838128391284012841128421284312844128451284612847128481284912850128511285212853128541285512856128571285812859128601286112862128631286412865128661286712868128691287012871128721287312874128751287612877128781287912880128811288212883128841288512886128871288812889128901289112892128931289412895128961289712898128991290012901129021290312904129051290612907129081290912910129111291212913129141291512916129171291812919129201292112922129231292412925129261292712928129291293012931129321293312934129351293612937129381293912940129411294212943129441294512946129471294812949129501295112952129531295412955129561295712958129591296012961129621296312964129651296612967129681296912970129711297212973129741297512976129771297812979129801298112982129831298412985129861298712988129891299012991129921299312994129951299612997129981299913000130011300213003130041300513006130071300813009130101301113012130131301413015130161301713018130191302013021130221302313024130251302613027130281302913030130311303213033130341303513036130371303813039130401304113042130431304413045130461304713048130491305013051130521305313054130551305613057130581305913060130611306213063/* @chunk base */:root { color-scheme: light dark;}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
button { color: inherit; font-family: inherit;}
button:disabled { opacity: 0.5; cursor: default;}
html,body,#app-root { height: 100%;}
@media (min-width: 800px) { :focus-visible { outline: 2px solid var(--primary-button-color); outline-offset: 2px; }}
@media (hover: none) and (pointer: coarse) { :focus, :focus-visible { outline: none; }}
:is( textarea, input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"]):focus { outline: 1px solid var(--highlight-color); outline-offset: -1px;}
@font-face { font-family: "Geist"; font-weight: 400 800; font-display: swap; src: url("/css/fonts/geist.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
html { /* colors */ --white: #ffffff; --black: #000000; --less-white: #fcfcfc; --off-white: rgb(241, 243, 245); --dark-gray: #1a1a1a; --mid-gray: #262626; --gray: #292929; --light-gray: #404040; --mid-light-gray: #656565; --lighter-gray: #d0d0d0; --pale-gray: #e5e5e5; --charcoal: #333333; --lightest-gray: #f3f3f3; --blue: #418af7; --purple: #9054f9; --pink: #df4074; --green: #1fb46b; --red: #d81316; --red-muted: #ff4949; --yellow: #e6a817; --muted-gray-light: #666; --muted-gray-dark: #999; --disabled-gray: #464646;
/* theme colors */ --background-color: light-dark(var(--less-white), var(--dark-gray)); --background-color-secondary: light-dark( var(--lightest-gray), var(--mid-gray) ); --text-color: light-dark(var(--dark-gray), var(--off-white)); --text-color-muted: light-dark( var(--muted-gray-light), var(--muted-gray-dark) ); --text-color-secondary: light-dark(var(--gray), var(--lighter-gray)); --generic-border-color: light-dark(var(--pale-gray), var(--charcoal)); --text-input-background-color: light-dark(var(--off-white), var(--gray)); --post-hover-color: light-dark(var(--lightest-gray), var(--mid-gray)); --callout-color: light-dark(var(--lightest-gray), var(--mid-gray)); --skeleton-color: light-dark(var(--lighter-gray), var(--gray)); --image-placeholder-color: var(--background-color-secondary); --context-menu-background-color: light-dark(var(--white), var(--mid-gray)); --context-menu-item-hover-color: light-dark( var(--off-white), var(--light-gray) ); --post-action-icon-color: light-dark( var(--mid-light-gray), var(--text-color-muted) );
--highlight-color: var(--blue); --highlight-color-tint: color-mix( in srgb, var(--highlight-color) 8%, var(--background-color) ); --highlight-color-tint-hover: var(--post-hover-color);
--text-link-color: var(--highlight-color); --like-color: var(--pink); --repost-color: var(--green); --error-color: var(--red-muted); --error-subtle-color: color-mix(in srgb, var(--error-color) 12%, transparent); --error-subtle-hover-color: color-mix( in srgb, var(--error-color) 20%, transparent ); --warning-color: var(--yellow); --live-color: light-dark(#e91646, #eb2452);
/* border colors */ --header-border-color: var(--generic-border-color); --embed-border-color: var(--generic-border-color); --post-border-color: var(--generic-border-color); --avatar-border-color: var(--generic-border-color); --reply-context-line-color: light-dark(var(--lighter-gray), var(--mid-gray)); --reply-context-line-width: 2px; --thread-tree-post-padding-x: 16px; --thread-tree-avatar-center: calc( var(--thread-tree-post-padding-x) + var(--avatar-size-thread-tree) / 2 ); --thread-tree-column-width: calc( var(--thread-tree-avatar-center) + var(--reply-context-line-width) / 2 );
/* button colors */ --primary-button-color: var(--highlight-color); --primary-button-hover-color: color-mix( in srgb, var(--highlight-color) 80%, transparent ); --primary-button-text-color: var(--white); --secondary-button-color: light-dark(var(--lightest-gray), var(--gray)); --secondary-button-hover-color: light-dark( var(--lighter-gray), var(--light-gray) ); --back-button-hover-color: var(--post-hover-color); --icon-button-color: var(--text-color-muted); --tab-bar-button-active-color: var(--highlight-color);
/* avatar sizes */ --avatar-size-quoted-post: 16px; --avatar-size-footer-nav: 24px; --avatar-size-thread-tree: 24px; --avatar-size-followed-by: 24px; --avatar-size-reply-prompt: 28px; --avatar-size-message: 32px; --avatar-size-message-input: 36px; --avatar-size-post: 40px; --avatar-size-sidebar-compact: 48px; --avatar-size-convo: 50px; --avatar-size-sidebar: 52px; --avatar-size-chat-info-panel: 88px; --avatar-size-profile: 100px;
/* border radius */ --skeleton-border-radius: 4px; --tag-border-radius: 4px; --list-avatar-border-radius: 20%; --feed-avatar-border-radius: 20%; --icon-button-border-radius: 4px; --feed-feedback-inner-border-radius: 6px; --text-input-border-radius: 8px; --moderation-warning-border-radius: 8px; --blocked-post-radius: 8px; --context-menu-button-radius: 8px; --sidebar-nav-item-border-radius: 8px; --context-menu-item-group-border-radius: 8px; --report-selected-item-border-radius: 8px; --toast-border-radius: 8px; --image-preview-border-radius: 8px; --typeahead-border-radius: 8px; --card-border-radius: 8px; --image-border-radius: 14px; --video-border-radius: 14px; --embed-border-radius: 14px; --context-menu-border-radius: 10px; --dialog-border-radius: 12px; --callout-border-radius: 12px; --message-bubble-border-radius: 18px; --sheet-border-radius: 20px; --message-input-border-radius: 24px; --reaction-palette-border-radius: 30px; --avatar-border-radius: 50%; --labeler-avatar-border-radius: 20%; --circular-button-border-radius: 50%; --pill-button-border-radius: 999px; --label-badge-border-radius: 999px;
--sheet-top: 16px; --stacked-sheet-top: calc(var(--sheet-top) + 16px);
/* z-index */ --profile-header-z-index: 1; --context-menu-z-index: 2; --header-z-index: 3; --footer-z-index: 3; --floating-back-button-z-index: 3; --reply-prompt-z-index: 4; --message-input-z-index: 4; --sidebar-search-z-index: 4; --reaction-palette-z-index: 5; --toast-z-index: 5; --fab-z-index: 6; --sidebar-z-index: 8; --lightbox-container-z-index: 9; --lightbox-z-index: 10; --mention-typeahead-z-index: 10; --lightbox-close-z-index: 11;
/* sizing */ --font-size: 15px; --rich-text-emoji-scale: 1.85; --hair: 1px; --chat-detail-header-height: 56px; --footer-height: 55px; --post-thread-reply-prompt-height: 50px; --message-input-min-height: 70px; --sidebar-max-width: 300px; --safe-area-inset-bottom: 0px; /* this needs to be in px because it's used in calc */
/* overlays */ --overlay-color: rgba(0, 0, 0, 0.5); --overlay-color-medium: rgba(0, 0, 0, 0.6); --overlay-color-heavy: rgba(0, 0, 0, 0.7); --overlay-color-darker: rgba(0, 0, 0, 0.8); --overlay-color-darkest: rgba(0, 0, 0, 0.9); --overlay-text-color: white;
/* shadows */ --shadow-color-subtle: 0 1px 3px rgba(0, 0, 0, 0.2); --shadow-color-light: 0 4px 12px rgba(0, 0, 0, 0.15); --shadow-color-medium: 0 4px 20px rgba(0, 0, 0, 0.3); --shadow-color-heavy: 0 -2px 20px rgba(0, 0, 0, 0.4); --shadow-color-hover: 0 6px 16px rgba(0, 0, 0, 0.2); --shadow-color-sidebar: 5px 5px 10px 5px rgba(0, 0, 0, 0.05); --shadow-color-lightbox: 0 0 20px rgba(0, 0, 0, 0.3); --shadow-color-toast: light-dark( 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.3) );
/* skeleton gradient */ --skeleton-gradient-edge: light-dark( rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0.05) ); --skeleton-gradient-mid: light-dark( rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.1) );
/* indicator backgrounds */ --alt-indicator-background: rgba(26, 26, 26, 0.75);
/* base styles */ background: var(--background-color); font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: var(--text-color); font-size: var(--font-size); scrollbar-gutter: stable;}
/* https://stackoverflow.com/a/60054892 */@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) { html { --hair: 0.5px; }}
/* https://github.com/ionic-team/capacitor/issues/8121 */body.native { --safe-area-inset-bottom: 1.75em;}
/* Installed as a PWA (e.g. added to the iOS home screen) */@media (display-mode: standalone) { html { --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px); }}
/* Don't show backdrop for modals by default */*::backdrop { background-color: transparent;}
*[role="button"] { cursor: pointer;}
a { text-decoration: none; color: inherit;}
hr { border: none; height: var(--hair); background-color: var(--post-border-color);}
/* visually hide alt text */img { font-size: 0;}
/* Fixes display bug with moderation warning */label { cursor: inherit;}
video { display: flex; width: 100%; height: auto;}
.page { width: 100%; min-height: 100%; min-height: calc(100dvh - var(--safe-area-inset-bottom)); background-color: var(--background-color);}
.page.page-hidden { display: none;}
.page.page-visible { display: block;}
#main-layout.layout-hidden { display: none;}
.main-layout-wrapper { display: contents;}
@media (max-width: 799px) { .view-column-center .page::after { display: block; height: calc(var(--footer-height) + var(--safe-area-inset-bottom)); content: ""; }}
.container { display: flex; margin: 0 auto;}
.view-column-right { display: none;}
@media (min-width: 800px) { .view-columns { display: flex; flex-direction: row; justify-content: center; width: 100%; height: 100%; }
.view-column-left { flex: 1 1 var(--sidebar-max-width); min-width: 0; max-width: var(--sidebar-max-width); display: flex; flex-direction: row; justify-content: flex-end; }
.view-column-center { box-sizing: border-box; flex: 1; border-right: var(--hair) solid var(--post-border-color); border-left: var(--hair) solid var(--post-border-color); min-width: 600px; max-width: 600px; }
.view-column-right { display: flex; flex-direction: column; flex: 1 1 var(--sidebar-max-width); min-width: 0; max-width: var(--sidebar-max-width); position: sticky; top: 0; align-self: flex-start; min-height: 100dvh; max-height: 100dvh; overflow-y: auto; }}
trending-pane { display: none;}
@media (min-width: 1100px) { trending-pane { display: block; flex-shrink: 0; }}
.trending-pane { display: block; margin: 16px; padding: 16px; border: var(--hair) solid var(--post-border-color); border-radius: 12px;}
.trending-pane-header { display: flex; align-items: center; gap: 6px; margin-bottom: 12px; padding-bottom: 12px;}
.trending-pane-header app-icon { width: 18px; height: 18px;}
.trending-pane-title { flex: 1; margin: 0; font-size: 15px; font-weight: 600;}
.trending-hide-button { display: flex; align-items: center; padding: 2px; border: none; border-radius: 50%; background: none; cursor: pointer; color: var(--text-color-muted);}
.trending-hide-button app-icon { width: 20px; height: 20px; display: block;}
pinned-feeds-pane { display: none;}
@media (min-width: 1100px) { pinned-feeds-pane { display: block; flex: 0 1 auto; min-height: 0; overflow-y: auto; }}
.pinned-feeds-pane { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0 16px;}
.pinned-feeds-item { display: flex; align-items: center; gap: 8px; max-width: 100%; box-sizing: border-box; padding: 6px 8px; border: none; border-radius: 8px; background: none; color: var(--text-color-muted); font-family: inherit; font-size: 15px; text-align: left; text-decoration: none; cursor: pointer;}
.pinned-feeds-item app-icon { width: 15px; height: 15px;}
@media (hover: hover) { .pinned-feeds-item:hover { color: var(--text-color); }}
.pinned-feeds-item.active { background: var(--highlight-color-tint); color: var(--text-color); font-weight: 600;}
.pinned-feeds-item-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.pinned-feeds-item-avatar { flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--feed-avatar-border-radius); object-fit: cover;}
.pinned-feeds-item-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 20px; height: 20px; border-radius: var(--feed-avatar-border-radius);}
.pinned-feeds-timeline-icon { background: var(--highlight-color); color: var(--white);}
.pinned-feeds-more-icon { background: var(--post-hover-color);}
.pinned-feeds-item-skeleton { align-self: stretch; max-width: none;}
.pinned-feeds-skeleton-bar { display: inline-block; height: 14px; border-radius: 4px;}
.trending-list { display: flex; flex-direction: column; gap: 4px;}
.trending-row { display: flex; gap: 6px; padding: 2px 0; font-size: 14px; line-height: 1.4; cursor: pointer;}
.trending-row-skeleton { cursor: default;}
.trending-rank { min-width: 16px; color: var(--text-color-muted);}
.trending-label { flex: 1; min-width: 0; color: var(--text-color-muted); overflow-wrap: anywhere;}
.trending-skeleton-bar { display: inline-block; width: 70%; height: 12px; vertical-align: middle; border-radius: var(--skeleton-border-radius);}
.trending-row-skeleton:nth-child(even) .trending-skeleton-bar { width: 55%;}
@media (hover: hover) { .trending-row:not(.trending-row-skeleton):hover .trending-label { color: var(--text-color); text-decoration: underline; }
.trending-hide-button:hover { background-color: color-mix( in srgb, var(--text-color-muted) 15%, transparent ); }}
.rich-text { white-space: pre-wrap; word-wrap: break-word;}
plugin-rich-text { display: contents;}
plugin-slot:empty { display: none;}
.rich-text a { color: var(--text-link-color);}
.rich-text-block { white-space: normal;}
.rich-text-facet-pending { display: none;}
.rich-text-emoji-only { font-size: calc(1em * var(--rich-text-emoji-scale, 1.85)); line-height: 1.15;}
@media (hover: hover) { .rich-text a:hover { text-decoration: underline; }}
/* @chunk buttons */.rounded-button { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 15px; border-radius: var(--pill-button-border-radius); border: none; cursor: pointer; font-size: 14px; transition: background-color 0.2s; background-color: var(--secondary-button-color);}
.rounded-button app-icon[icon="plus-line"] { width: 14px; height: 14px;}
.rounded-button .loading-spinner { border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent;}
.rounded-button.rounded-button-primary { background-color: var(--primary-button-color); color: var(--primary-button-text-color);}
.rounded-button.rounded-button-primary .loading-spinner { border-top-color: var(--primary-button-text-color);}
.rounded-button.rounded-button-secondary-inverted { background-color: var(--text-color); color: var(--background-color);}
.rounded-button.rounded-button-secondary-inverted .loading-spinner { border-top-color: var(--background-color);}
@media (hover: hover) { .rounded-button:not(:disabled):hover { background-color: var(--secondary-button-hover-color); }
.rounded-button.rounded-button-primary:not(:disabled):hover { background-color: var(--primary-button-hover-color); }
.rounded-button.rounded-button-secondary-inverted:not(:disabled):hover { background-color: color-mix( in srgb, var(--text-color) 85%, var(--background-color) ); }}
.rounded-button.bell-button { padding: 6px 10px; display: flex; align-items: center; justify-content: center;}
.rounded-button.bell-button app-icon { width: 20px; height: 20px;}
.rounded-button.chat-button { padding: 6px 10px; display: flex; align-items: center; justify-content: center;}
.rounded-button.chat-button app-icon { width: 20px; height: 20px;}
.rounded-button.ellipsis-button { padding-left: 10px; padding-right: 10px;}
.rounded-button.ellipsis-button span { position: relative; font-weight: 600; top: -4px;}.danger-button { color: var(--error-color); font-size: 15px;}
.text-pill-button { background: none; border: none; font-size: 15px; cursor: pointer; padding: 8px 12px; transition: color 0.2s; border-radius: var(--pill-button-border-radius); color: var(--highlight-color);}
.icon-button { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: none; color: var(--icon-button-color); cursor: pointer; text-decoration: none; border-radius: var(--icon-button-border-radius); transition: background-color 0.2s;}
.icon-button app-icon { width: 24px; height: 24px;}
.image-preview-remove-button app-icon,.message-reply-preview-clear app-icon,.alt-text-dialog-close app-icon,.lightbox-close app-icon { width: 24px; height: 24px;}
.dialog-close-button { display: none; background: none; border: none; cursor: pointer; color: var(--text-color); padding: 4px 8px; opacity: 0.6;}
.dialog-close-button-floating { position: absolute; top: 12px; right: 12px;}
@media (min-width: 800px) { .dialog-close-button { display: flex; align-items: center; }}
@media (hover: hover) { .dialog-close-button:hover { opacity: 1; }}
.dialog-close-button app-icon { width: 24px; height: 24px;}
@media (hover: hover) { .icon-button:not(:disabled):hover { background-color: var(--back-button-hover-color); }}
.back-button { height: 30px; width: 30px;}
.floating-back-button { position: absolute; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; background: var(--overlay-color); color: var(--off-white); border-radius: var(--icon-button-border-radius); top: 16px; left: 16px; height: 30px; width: 30px; z-index: var(--floating-back-button-z-index);}
.back-button app-icon,.floating-back-button app-icon { width: 20px; height: 20px;}
.menu-button { font-size: 24px; height: 30px; width: 30px;}
@media (min-width: 800px) { .menu-button { display: none; }}
.inbox-button { position: relative; height: 30px; width: 30px;}
.inbox-button app-icon { width: 24px; height: 24px;}
.feeds-button { height: 30px; width: 30px;}
.feeds-button app-icon { width: 24px; height: 24px;}
.inbox-button .unread-dot { position: absolute; top: 1px; right: 2px; width: 12px; height: 12px; border-radius: 50%; background-color: var(--highlight-color); border: 1px solid var(--background-color);}
.form-group { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; width: 100%;}
.rounded-button app-icon { display: flex;}
.button-group { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%;}
.button-group button { width: fit-content;}
form input:not([type="radio"]):not([type="checkbox"]) { width: 100%; padding: 12px; border-radius: var(--text-input-border-radius); border: var(--hair) solid var(--post-border-color); background: var(--text-input-background-color); color: var(--text-color);}
form label { font-size: 14px; margin-bottom: 8px; margin-left: 2px; font-weight: 500; color: var(--text-color-muted);}
#login-form .rounded-button { padding: 10px 20px;}
#login-form .rounded-button-primary .loading-spinner { border-top-color: var(--primary-button-text-color); border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent;}
input,textarea,select { font-size: 16px;}
input::placeholder,textarea::placeholder { color: var(--text-color-muted);}
input[type="color"] { -webkit-appearance: none; appearance: none; width: 40px; height: 40px; padding: 0; border: none; background: none; cursor: pointer;}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%;}
input[type="color"]::-webkit-color-swatch { border: var(--hair) solid var(--post-border-color); border-radius: 50%; background-clip: padding-box; color-scheme: inherit;}
/* Firefox */input[type="color"]::-moz-color-swatch { border: var(--hair) solid var(--post-border-color); border-radius: 50%; background-clip: padding-box;}
.loading-spinner { display: inline-block; width: 16px; height: 16px; vertical-align: middle; border: 2px solid light-dark(var(--lighter-gray), var(--light-gray)); border-top: 2px solid var(--highlight-color); border-radius: 50%; animation: spin 1s linear infinite;}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}
.skeleton-animate { background: linear-gradient( 90deg, var(--skeleton-gradient-edge) 25%, var(--skeleton-gradient-mid) 50%, var(--skeleton-gradient-edge) 75% ); background-size: 200% 100%; animation: shimmer 1.5s infinite;}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; }}
.post-skeleton { padding: 10px 16px 0 16px; border-bottom: var(--hair) solid var(--post-border-color); display: flex; flex-direction: row; gap: 12px;}
.skeleton-left { width: 45px;}
.skeleton-right { flex: 1; display: flex; flex-direction: column; gap: 8px;}
.skeleton-avatar { width: var(--avatar-size-post); height: var(--avatar-size-post); border-radius: var(--avatar-border-radius);}
.skeleton-content { padding-top: 4px; flex: 1; display: flex; flex-direction: column; min-width: 0; gap: 10px; height: fit-content;}
.skeleton-line { width: 100%; height: 10px; border-radius: var(--skeleton-border-radius);}
.skeleton-line-short { width: 10em; height: 12px; border-radius: var(--skeleton-border-radius);}
.skeleton-line-shorter { width: 7em; height: 12px; border-radius: var(--skeleton-border-radius);}
.skeleton-actions { display: flex; flex-direction: row; align-items: center; gap: 3em; height: 28px; padding-top: 8px; margin-bottom: 8px;}
.skeleton-action { width: 30px; display: flex; align-items: center; justify-content: center;}
.skeleton-action .skeleton-action-icon { width: 18px; height: 18px; color: var(--skeleton-color); display: flex; align-items: center; justify-content: center;}
.skeleton-action .skeleton-action-icon app-icon { width: 18px; height: 18px; display: block;}
.skeleton-action .skeleton-action-icon app-icon svg { width: 100%; height: 100%; display: block;}
.avatar-image-frame { display: inline-block; line-height: 0; width: var(--avatar-size-post); height: var(--avatar-size-post); border-radius: var(--avatar-border-radius); border: var(--hair) solid var(--post-border-color); background-color: var(--image-placeholder-color); overflow: hidden; flex-shrink: 0;}
/* @chunk layout */.labeler-avatar { --avatar-border-radius: var(--labeler-avatar-border-radius);}
.avatar-image { width: 100%; height: 100%; display: block;}
.avatar-image.is-blurred { filter: blur(5px); transform: translateZ(0); will-change: filter;}
.avatar-link { display: flex; align-items: center; justify-content: center; width: fit-content;}
.avatar-live-frame { position: relative; display: inline-flex;}
.avatar-image-frame.avatar-live { border: 2px solid var(--live-color);}
.avatar-live-badge { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); background-color: var(--live-color); color: var(--white); font-size: 9.5px; font-weight: 700; letter-spacing: 0.03em; line-height: 1; padding: 2px 4px; border-radius: 4px; pointer-events: none; z-index: 1;}
.avatar-live-button { background: none; border: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; width: fit-content; color: inherit; font: inherit;}
.profile-top-row .avatar-image-frame.avatar-live { border-width: 3px; border-color: var(--live-color);}
.profile-top-row .avatar-live-badge { font-size: 12px; padding: 3px 6px; bottom: -8px; border-radius: 5px;}
header { z-index: var(--header-z-index); background-color: var(--background-color); border-bottom: var(--hair) solid var(--header-border-color); position: sticky; top: 0; margin: 0 auto; left: 0; right: 0;}
#chat-detail-view .header-row { height: var(--chat-detail-header-height);}
#chat-detail-view .header-row .avatar-group { width: var(--avatar-size-post); height: var(--avatar-size-post);}
.header > .header-row { display: flex; flex-direction: row; align-items: center; padding: 8px;}
.header > .header-bottom-row { display: flex;}
.header > .header-bottom-row .bottom-item { flex: 1; min-width: 0;}
.header .header-title-link { display: flex; align-items: center; flex: 1; min-width: 0; cursor: pointer;}
.header .header-title-container { display: flex; flex-direction: column; gap: 2px; margin-left: 8px; flex: 1; min-width: 0;}
.header .header-avatar { margin-left: 8px;}
.header .header-title { display: flex; align-items: center; min-width: 0; font-size: 18px; font-weight: 600;}
.header .header-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.header .header-title-muted-icon { display: inline-flex; flex-shrink: 0; width: 16px; height: 16px; margin-left: 6px; color: var(--text-color-muted);}
.header .header-title-muted-icon svg { width: 100%; height: 100%;}
.header .header-subtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; color: var(--text-color-muted); font-weight: 400;}
.header .header-spacer { flex: 1;}
.header > .header-row:has(.header-title-container) .header-spacer { flex: 0;}
.header .loading-spinner { margin-right: 8px;}
.header > .header-row.has-bottom-row { padding-bottom: 0;}
@media (min-width: 800px) { #home-view .header > .header-row { display: none; }}
tab-bar { display: flex; height: 46px;}
tab-bar .tab-bar-button { border: none; position: relative; background: none; cursor: pointer; color: var(--icon-button-color); font-weight: 600; font-size: 15px; padding-right: 16px; padding-left: 16px; white-space: nowrap; display: flex; align-items: flex-end; justify-content: center;}
tab-bar .tab-bar-button.active { color: var(--text-color);}
tab-bar .tab-bar-button .tab-bar-button-label { display: inline-block; min-width: 3em; border-bottom: 3px solid transparent; padding-bottom: 12px;}
tab-bar .tab-bar-button.active .tab-bar-button-label { border-bottom-color: var(--tab-bar-button-active-color);}
@media (hover: hover) { tab-bar .tab-bar-button:hover { background-color: var(--post-hover-color); }}
tab-bar:not([full-width]) { overflow-x: auto; overflow-y: hidden; scrollbar-width: none;}
tab-bar.is-scroll-frozen { overflow-x: hidden;}
.profile-card { margin-bottom: 8px;}
.profile-tab-bar,.list-detail-tab-bar,.starter-pack-detail-tab-bar { position: sticky; top: 0; background: var(--background-color); z-index: var(--header-z-index); border-bottom: var(--hair) solid var(--post-border-color);}
.feed-container { min-height: calc(100dvh - 45px);}
.scroll-lock-pinned { position: fixed;}
.sidebar::backdrop { background: var(--overlay-color); opacity: 0; transition: opacity 0.3s cubic-bezier(0.32, 0.72, 0, 1);}
.sidebar { display: flex; justify-content: flex-end; position: fixed; top: 0; left: 0; width: var(--sidebar-max-width); max-width: 80%; height: 100%; max-height: 100%; margin: 0; padding: 0; color: inherit; background: var(--background-color); border: none; border-right: var(--hair) solid var(--post-border-color); z-index: var(--sidebar-z-index); transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1); overflow-y: auto;}
@media (max-width: 799px) { .sidebar > .sidebar-content { width: var(--sidebar-max-width); max-width: 100%; flex: 0 0 auto; }}
@media (min-width: 800px) { .sidebar { position: sticky; top: 0; height: 100dvh; max-width: var(--sidebar-max-width); transform: none; border-right: none; overflow-y: auto; z-index: 1; transition: none; width: fit-content; }
.sidebar-content { padding-right: 0 !important; }
.sidebar .sidebar-profile { padding-bottom: 0 !important; }
.sidebar .sidebar-profile-avatar .avatar-image-frame { width: var(--avatar-size-sidebar-compact); height: var(--avatar-size-sidebar-compact); }
.sidebar-divider { display: none; }
.sidebar-profile-info { display: none; }
.sidebar-profile-stats { display: none !important; }
.sidebar-nav-label { display: none; }}
@media (min-width: 1200px) { .sidebar-nav-item { justify-content: flex-start; padding-right: 2em !important; }
.sidebar-nav-label { display: block; }}
.sidebar[open] { transform: translateX(0);}
.sidebar[open]::backdrop { opacity: 1;}
.sidebar[open][data-closing] { pointer-events: none; transform: translateX(-100%); transition: transform 0.2s cubic-bezier(0.32, 0.72, 0, 1);}
.sidebar[open][data-closing]::backdrop { opacity: 0; transition: opacity 0.2s cubic-bezier(0.32, 0.72, 0, 1);}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; }}
.sidebar-profile { padding: 20px 20px 16px 20px;}
.sidebar-profile-avatar { display: flex; justify-content: flex-start; margin-bottom: 10px;}
@media (min-width: 800px) { .sidebar-profile-avatar { justify-content: center; }}
@media (min-width: 1200px) { .sidebar-profile-avatar { justify-content: flex-start; }}
.sidebar-profile-avatar .avatar { display: flex;}
.sidebar-profile-avatar .avatar-image-frame { width: var(--avatar-size-sidebar); height: var(--avatar-size-sidebar);}
.sidebar-profile-avatar .avatar-image-frame { border-radius: var(--avatar-border-radius); border: var(--hair) solid var(--post-border-color);}
.sidebar-profile-info { margin-bottom: 12px;}
.sidebar-profile-name { font-size: 20px; font-weight: 700; color: var(--text-color); margin-bottom: 2px;}
.sidebar-profile-handle { font-size: 15px; color: var(--text-color-muted);}
.sidebar-profile-stats { font-size: 14px; color: var(--text-color-muted);}
.sidebar-profile-stats strong { color: var(--text-color); font-weight: 700;}
.sidebar-profile-stats a { margin-bottom: 2px; display: inline-block;}
.sidebar-profile-separator { color: var(--text-color-muted); text-align: center; padding-left: 2px; padding-right: 2px;}
.sidebar-divider { height: var(--hair); background: var(--post-border-color); margin: 0;}
.sidebar-nav { display: flex; flex-direction: column; padding: 4px 0;}
.sidebar-nav-item { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 3px 14px; margin-right: 8px; color: var(--text-color); text-decoration: none; transition: background-color 0.2s; cursor: pointer; font-size: 20px; border-radius: var(--sidebar-nav-item-border-radius);}
@media (hover: hover) { .sidebar-nav-item:hover:not(.disabled) { background: var(--post-hover-color); }}
.sidebar-nav-item.disabled { opacity: 0.5; pointer-events: none;}
.sidebar-nav-icon { position: relative; height: 38px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
app-icon { display: inline-flex; width: 1em; height: 1em; color: inherit;}
app-icon svg { width: 100%; height: 100%;}
plugin-blob-image { display: inline-block; vertical-align: middle;}
plugin-blob-image img { display: block; max-width: 100%; max-height: 128px; font-size: inherit; color: transparent;}
plugin-blob-image .blob-image-fallback { color: var(--text-color-muted);}
.sidebar-nav-icon app-icon,.sidebar-nav-icon > .plugin-icon { width: 24px; height: 24px; color: var(--text-color);}
.sidebar-nav-icon .status-badge { top: 0; left: 12px;}
.sidebar-nav-label { flex: 1; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.sidebar-compose-button { display: none; margin-top: 12px; margin-left: 10px; width: fit-content; padding: 12px 20px; font-size: 16px; font-weight: 600;}
.sidebar-compose-button app-icon { width: 20px; height: 20px;}
.sidebar-compose-button span { margin-right: 6px;}
@media (min-width: 800px) { .sidebar-compose-button { display: flex; }}
@media (min-width: 800px) and (max-width: 1199px) { .sidebar-compose-button { align-self: center; margin-left: 0; margin-right: 8px; width: 46px; height: 46px; padding: 0; border-radius: var(--circular-button-border-radius); }
.sidebar-compose-button span { display: none; }}
button.sidebar-plugin-nav-item { background: transparent; border: none; text-align: left;}
.sidebar-spacer { flex: 1;}
.sidebar-footer { margin-top: auto; padding: 16px 20px;}
.sidebar-footer .sidebar-text-link { display: block; margin-bottom: 8px;}
.sidebar-content { display: flex; flex-direction: column; min-height: 100%; height: 100%; padding: 0 20px 0 20px;}
.sidebar-header { display: flex; flex-direction: column; align-items: flex-start; gap: 20px;}
@media (min-width: 800px) { .logged-out-sidebar .sidebar-header { align-items: center; }
.logged-out-sidebar .sidebar-nav-item { justify-content: center; }}
.sidebar-text-link { font-size: 14px; color: var(--text-link-color); background: none; border: none; padding: 0; cursor: pointer;}
.logged-out-sidebar .sidebar-title { font-weight: 600; width: 100%; padding-top: 10px; padding-left: 20px; padding-bottom: 6px;}
@media (min-width: 800px) { .logged-out-sidebar .sidebar-title { padding-left: 0; text-align: center; }
.logged-out-sidebar .sidebar-title h1 { margin: 0; }}
.logged-out-sidebar .sidebar-header { gap: 10px;}
.logged-out-sidebar p { font-size: 14px; color: var(--text-color-muted); padding-bottom: 5px; min-width: 100px;}
.logged-out-sidebar .login-button,.logged-out-sidebar .sidebar-about-link { align-self: stretch; margin-top: 8px; margin-right: 20px; margin-bottom: 0px; margin-left: 20px; padding: 10px 20px; white-space: nowrap;}
.footer-nav { position: fixed; bottom: 0; height: calc(var(--footer-height) + var(--safe-area-inset-bottom)); padding-bottom: var(--safe-area-inset-bottom); width: 100%; background: var(--background-color); z-index: var(--footer-z-index); border-top: var(--hair) solid var(--post-border-color);}
@media (min-width: 800px) { .footer-nav { display: none !important; }}
.footer-nav nav { display: flex; align-items: center; height: 100%;}
.footer-nav-item { flex: 1; display: flex; align-items: center; justify-content: center; height: 100%; cursor: pointer; position: relative;}
.footer-nav-item .avatar { height: 24px; width: 24px;}
/* Long-press to open the account switcher: stop iOS link previews / text selection from hijacking the hold gesture */.sidebar-profile-avatar.long-press-enabled,.footer-nav-item.long-press-enabled { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none;}
.footer-nav.logged-out-footer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding-right: 20px; padding-left: 20px;}
.footer-nav-item .status-badge { top: 10px; left: calc(50% - 1px);}
.footer-nav-item .avatar-image-frame { width: var(--avatar-size-footer-nav); height: var(--avatar-size-footer-nav);}
.footer-nav-item[disabled] { pointer-events: none; cursor: default; opacity: 0.5;}
.footer-nav-item.active { cursor: default;}
.footer-nav-item app-icon { width: 24px; height: 24px; color: var(--text-color);}
.status-badge { position: absolute; background: var(--highlight-color); color: var(--white); border-radius: var(--context-menu-border-radius); font-size: 12px; display: flex; align-items: center; justify-content: center; padding: 1px 4px; min-width: 20px; border: 1px solid var(--background-color);}
.feed { width: 100%; max-width: 100%; overflow: hidden;}
.feed > div { width: 100%; max-width: 100%; box-sizing: border-box;}
.feed-item { width: 100%; max-width: 100%; box-sizing: border-box;}
/* workaround for iOS Safari subpixel rounding */.feed-item::after { content: ""; display: block; width: 100%; height: 1px; background-color: var(--post-border-color); transform: scaleY(0.5); transform-origin: bottom;}
/* @chunk feed */.feed-end-message { padding: 32px 16px; color: var(--text-color-muted); font-size: 14px; text-align: center;}
.notifications-load-more-error,.post-thread-load-error,.feed-load-more-error { padding: 32px 16px;}
.feed-feedback-message { font-size: 13px; color: var(--text-color-muted); padding: 8px; background: light-dark(var(--lightest-gray), var(--mid-gray));}
.feed-feedback-message-inner { padding: 12px 16px; background: var(--background-color); border-radius: var(--feed-feedback-inner-border-radius); border: var(--hair) solid var(--post-border-color);}
.feed-loading-indicator { padding-bottom: 5em; padding-top: 1em; display: flex; justify-content: center;}
container-link { display: block; color: inherit; text-decoration: none; cursor: pointer;}
.post { padding-top: 12px; padding-left: 16px; padding-right: 16px; padding-bottom: 10px; display: flex; gap: 12px; transition: background-color 0.2s;}
.post.clickable { cursor: pointer;}
@media (hover: hover) { .post.clickable:hover { background-color: var(--post-hover-color); }}
.post:has(.post-actions) { /* action bar will take up this space */ padding-bottom: 0;}
.post .top-bar { margin-bottom: 4px;}
/* .large-post moderation-warning .top-bar { margin-bottom: 0;} */
.post-content { position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0;}
.post-content-with-space { position: relative; display: flex; flex-direction: row; gap: 8px; flex: 1; min-width: 0;}
.post-content-top { display: flex; flex-direction: row; gap: 8px; min-width: 0;}
.post-content-bottom { margin-top: 14px;}
.post-content-left { display: flex; flex-direction: column; width: 45px;}
.post-content-right { flex: 1; min-width: 0;}
.post-content-right .post-body > .post-text { margin-top: 5px;}
.post-header-text { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 1px 4px; overflow: hidden;}
@media (hover: hover) { .post-header-text a:hover { text-decoration: underline; }}
.post-name { display: inline-block; flex-shrink: 0; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: bold; line-height: 1.2em;}
.post-username { flex-shrink: 10; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-color-muted);}
.post-separator { color: var(--text-color-muted);}
.post-time { color: var(--text-color-muted);}
.post-full-timestamp { color: var(--text-color-muted); padding-top: 11px; padding-bottom: 5px; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;}
/* @chunk post */.who-can-reply-body span { display: block;}.who-can-reply-body span + span { margin-top: 8px;}
.who-can-reply-badge { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; padding: 0; color: var(--text-color-muted); font-size: 13px; cursor: pointer; margin-left: 2px;}.who-can-reply-badge app-icon { width: 15px; height: 15px;}@media (hover: hover) { .who-can-reply-badge:hover { color: var(--text-color); }}@media (hover: hover) { .who-can-reply-badge:hover :not(app-icon) { text-decoration: underline; }}
.who-can-reply-badge-link { color: var(--highlight-color);}
.post-text { line-height: 1.3125; margin-top: -4px;}
.post-number-badge { display: inline-block; border-radius: var(--label-badge-border-radius); padding: 0 6px; font-size: 12px; line-height: 18px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; user-select: none; color: var(--text-color-muted); background-color: var(--callout-color); vertical-align: 1px;}
.post-number-badge-standalone { margin-bottom: 6px;}
.large-post { border-bottom: var(--hair) solid var(--post-border-color);}
.large-post .post-text { font-size: 18px;}
.large-post-header-text { min-width: 0;}
.large-post-header-text .post-header-text { flex: 1; flex-wrap: wrap;}
.large-post-header-text .post-name { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.large-post-header-text .post-username { width: 100%;}
.large-post-follow-button { margin-left: auto; align-self: center; white-space: nowrap; flex-shrink: 0;}
.label-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--text-color-muted); width: fit-content; border-radius: var(--label-badge-border-radius); border: none; background-color: inherit;}
.label-badge-image { border-radius: var(--avatar-border-radius); object-fit: cover;}
.author-badges { display: flex; flex-wrap: wrap; align-items: center;}
.author-badges .label-badges,.author-badges plugin-slot { display: contents;}
.author-badges:not(:has(.label-badge, plugin-slot:not(:empty))) { display: none;}
.large-post .label-badge { font-size: 13px; min-height: 23px; padding: 3px 8px 4px; margin-right: 4px; margin-top: 5px; background: light-dark(var(--lightest-gray), var(--gray));}
@media (hover: hover) { .large-post .label-badge:hover { background: light-dark(var(--lighter-gray), var(--light-gray)); }}
.large-post .label-badge-image { width: 16px; height: 16px;}
.large-post .author-badges { gap: 4px; margin-top: 3px; margin-bottom: 4px;}
.small-post .pinned-label { font-size: 14px; margin-bottom: 5px; color: var(--text-color-muted); display: flex; flex-direction: row; align-items: center; gap: 3px;}
.pinned-label app-icon { height: 13px; width: 13px;}
.small-post .hidden-reply-label { font-size: 14px; margin-top: 4px; color: var(--text-color-muted); display: flex; align-items: center; gap: 4px;}
.hidden-reply-label app-icon { height: 15px; width: 15px;}
.small-post .repost-label { font-size: 14px; margin-bottom: 5px; color: var(--text-color-muted); display: flex; gap: 4px;}
@media (hover: hover) { .small-post .repost-label a:hover, .reply-to-author a:hover { text-decoration: underline; }}
.small-post .repost-label app-icon { height: 17px; width: 17px; color: var(--text-color-muted);}
.small-post .missing-post-indicator { display: flex; flex-direction: row; align-items: center; gap: 6px; border-radius: var(--blocked-post-radius); padding: 14px; background: light-dark(var(--lightest-gray), var(--gray)); color: var(--text-color-muted); width: 100%;}
.small-post .missing-post-indicator app-icon { width: 18px; height: 18px; flex-shrink: 0;}
.small-post .missing-post-indicator.no-unauthenticated { margin-top: 8px;}
.missing-quote-indicator { display: flex; flex-direction: row; align-items: center; gap: 6px;}
.missing-quote-indicator app-icon { width: 18px; height: 18px; flex-shrink: 0;}
.large-post.no-unauthenticated-post { display: block;}
.no-unauthenticated-avatar { width: var(--avatar-size-post); height: var(--avatar-size-post); border-radius: var(--avatar-border-radius); background-color: var(--image-placeholder-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.no-unauthenticated-avatar app-icon { width: 20px; height: 20px; color: var(--text-color-muted);}
.no-unauthenticated-message { font-style: italic; color: var(--text-color-muted); font-size: 14px; padding-top: 4px;}
.no-unauthenticated-message app-icon { display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-right: 4px;}
.no-unauthenticated-header { display: flex; flex-direction: row; align-items: center; gap: 10px; margin-bottom: 12px;}
.no-unauthenticated-skeleton-text { display: flex; flex-direction: column; gap: 6px;}
.no-unauthenticated-skeleton-text .skeleton-line { background-color: var(--skeleton-color);}
.no-unauthenticated-message-large { font-size: 18px;}
.small-post .label-badge { font-size: 12px; padding-right: 5px; margin-top: 5px; margin-right: 2px;}
.small-post .label-badge-image { width: 12px; height: 12px;}
.quoted-post .label-badge { font-size: 12px; padding: 0; padding-right: 5px; margin-top: 5px; margin-right: 2px; background: none;}
@media (hover: hover) { .quoted-post .label-badge:hover { background: none; }}
.quoted-post .label-badge-image { width: 12px; height: 12px;}
.post-thread { min-height: calc(100dvh - 46px - var(--safe-area-inset-bottom)); padding-bottom: var(--post-thread-reply-prompt-height);}
/* Guarantees enough content below the main post to scroll it under the header, however short the thread is */.post-thread-main-section { min-height: calc(100dvh - 46px - var(--safe-area-inset-bottom));}
@media (min-width: 800px) { .post-thread { padding-bottom: 0; }}
.post-thread-reply-prompt { position: fixed; left: 0; right: 0; bottom: calc(var(--footer-height) + var(--safe-area-inset-bottom) - 2px); height: var(--post-thread-reply-prompt-height); box-sizing: border-box; color: var(--text-color-muted); cursor: pointer; padding-left: 10px; padding-right: 10px; padding-bottom: 1px; padding-top: 6px; background: var(--background-color); z-index: var(--reply-prompt-z-index);}
.post-thread-reply-prompt-inner { border-radius: var(--pill-button-border-radius); padding: 5px; overflow: hidden; display: flex; flex-direction: row; align-items: center; gap: 8px; background: var(--text-input-background-color);}
@media (min-width: 800px) { .post-thread-reply-prompt { position: static; height: auto; padding: 0; border-bottom: var(--hair) solid var(--post-border-color); z-index: 0; }}
@media (min-width: 800px) { .post-thread-reply-prompt-inner { border-radius: 0; padding: 10px; background: var(--background-color); }}
.post-thread-reply-prompt .avatar { display: flex;}
.post-thread-reply-prompt .avatar .avatar-image-frame { width: var(--avatar-size-reply-prompt); height: var(--avatar-size-reply-prompt);}
.post-thread-reply-prompt-text { padding-bottom: 3px;}
.post-thread-reply-chain { border-bottom: var(--hair) solid var(--post-border-color);}
.post-thread-extra-space { height: 100px;}
.post-thread-tree { border-bottom: var(--hair) solid var(--post-border-color);}
.post-thread-tree-row { display: flex; flex-direction: row;}
.post-thread-tree-row.is-depth-1:not(:first-child) { border-top: var(--hair) solid var(--post-border-color);}
.tree-indent-column { flex-shrink: 0; width: var(--thread-tree-column-width); border-right: var(--reply-context-line-width) solid var(--reply-context-line-color);}
.tree-indent-column.is-skipped { border-right-width: 0;}
.tree-row-content { position: relative; flex: 1; min-width: 0;}
.post-thread-tree-row .post-content-left { width: var(--avatar-size-thread-tree);}
.post-thread-tree-row .small-post .avatar-image-frame { width: var(--avatar-size-thread-tree); height: var(--avatar-size-thread-tree);}
.tree-elbow { position: absolute; left: calc(var(--reply-context-line-width) * -1); top: 0; width: calc( var(--thread-tree-post-padding-x) + var(--reply-context-line-width) - 2px ); height: calc( 12px + var(--avatar-size-thread-tree) / 2 + var(--reply-context-line-width) / 2 ); border-left: var(--reply-context-line-width) solid var(--reply-context-line-color); border-bottom: var(--reply-context-line-width) solid var(--reply-context-line-color); border-bottom-left-radius: 8px; pointer-events: none;}
.tree-child-line { position: absolute; left: calc( var(--thread-tree-avatar-center) - var(--reply-context-line-width) / 2 ); top: calc(12px + var(--avatar-size-thread-tree) + 2px); bottom: 0; width: var(--reply-context-line-width); background-color: var(--reply-context-line-color); pointer-events: none;}
.tree-read-more-elbow { flex-shrink: 0; margin-left: calc( var(--thread-tree-avatar-center) - var(--reply-context-line-width) / 2 ); width: var(--thread-tree-post-padding-x); height: 18px; border-left: var(--reply-context-line-width) solid var(--reply-context-line-color); border-bottom: var(--reply-context-line-width) solid var(--reply-context-line-color); border-bottom-left-radius: 8px;}
.tree-read-more-link { display: flex; align-items: center; gap: 4px; padding: 8px 8px 12px 4px; font-size: 14px; color: var(--text-color-muted);}
.tree-read-more-link app-icon { width: 18px; height: 18px;}
@media (hover: hover) { .tree-read-more-link:hover { text-decoration: underline; }}
.reply-to-author { font-size: 14px; color: var(--text-color-muted); margin-top: 4px;}
.reply-to-author app-icon { display: inline-block; width: 13px; height: 13px; vertical-align: -2px;}
.account-switcher-add-icon app-icon { width: 24px; height: 24px;}
.account-switcher-item.account-switcher-add { color: var(--text-color-secondary);}
.account-switcher-current-check app-icon { width: 24px; height: 24px;}
.post-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 28px; padding-top: 8px; margin-bottom: 8px;}
.large-post .post-actions { height: 32px; padding-top: 0; margin-top: 4px; margin-bottom: 4px;}
.large-post .post-action-icon { transform: scale(1.22); transform-origin: center;}
.large-post .post-action-count { font-size: 16px;}
.large-post .post-action-button { gap: 7px;}
.post-actions-skeleton .post-action-button { cursor: default; color: var(--skeleton-color);}
.post-actions-primary { display: flex; flex: 1; max-width: 320px;}
.post-actions-primary > .post-action:first-child { margin-left: -6px;}
.large-post .post-actions-primary > .post-action:first-child { margin-left: -2px;}
.post-actions-secondary { display: flex; justify-content: flex-end; align-items: center; gap: 4px;}
.large-post .post-actions-secondary { gap: 8px;}
.post-actions-secondary .post-action { flex: 0;}
.post-actions .text-button { display: flex; align-items: center; justify-content: center; border-radius: var(--pill-button-border-radius);}
.post-actions .text-button-text { position: relative; top: -6px; font-size: 22px;}
.post-action { flex: 1;}
.post-action-bookmark,.post-action-share { flex: 0;}
.post-action-button { display: flex; align-items: center; justify-content: flex-start; gap: 4px; border: none; background: none; cursor: pointer; color: var(--post-action-icon-color); transition: background-color 0.2s; min-width: 30px; padding: 5px;}
.post-action-button[disabled] { cursor: auto;}
animated-button { display: contents;}
.post-action[disabled] { pointer-events: none; color: var(--disabled-gray);}
.post-action-repost.reposted { color: var(--repost-color);}
.like-button.active { color: var(--like-color);}
.bookmark-button.active { color: var(--highlight-color);}
.post-action-icon { position: relative; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center;}
.post-action-icon app-icon { width: 18px; height: 18px; display: block;}
.animated-button .post-action-icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; border: 2px solid currentColor; background-color: currentColor; transform: translate(-50%, -50%); opacity: 0; pointer-events: none;}
.animated-button.animating .post-action-icon::after { animation: ripple-out 0.3s ease-out;}
@keyframes ripple-out { 0% { width: 0; height: 0; opacity: 1; } 100% { width: 40px; height: 40px; opacity: 0; }}
.post-action-count { font-size: 14px;}
.post-action-counts { display: flex; flex-direction: row; gap: 16px; border-top: var(--hair) solid var(--post-border-color); border-bottom: var(--hair) solid var(--post-border-color); margin-top: 8px; padding-top: 10px; padding-bottom: 12px;}
.post-action-count-num { font-size: 14px; font-weight: 600;}
.post-action-count-text { font-size: 14px; color: var(--text-color-muted);}
.large-post .post-embed > * { margin-top: 12px;}
.post-embed > * { margin-top: 8px;}
.post-image-container { position: relative;}
.post-image { width: 100%; height: auto; border: var(--hair) solid var(--post-border-color); border-radius: var(--image-border-radius); background-color: var(--background-color); object-fit: cover;}
.post-image.post-image-contain { object-fit: contain; background-color: var(--image-placeholder-color);}
.post-image-container .alt-indicator { bottom: 9px; right: 6px; top: auto; left: auto; padding: 1px 3px; color: var(--white); background: var(--alt-indicator-background);}
.post-video { position: relative; border: var(--hair) solid var(--post-border-color); border-radius: var(--video-border-radius); overflow: hidden;}
/* Reserve the media height without CSS aspect-ratio, which can flicker while * scrolling video elements in WebKit. Percentage padding is based on width. */.post-video::before { content: ""; display: block; padding-top: var(--post-video-height, 100%);}
.post-video > .alt-indicator { pointer-events: auto; transition: opacity 0.15s; top: 8px; right: 8px; left: auto; padding: 1px 3px; color: var(--white); background: var(--alt-indicator-background); border: none; cursor: pointer;}
.alt-text-dialog { padding: 0; border: none; background: transparent; color: var(--off-white); max-width: min(600px, calc(100vw - 40px)); max-height: 80vh; overflow: visible; margin: auto;}
.alt-text-dialog::backdrop { background: var(--overlay-color-darkest);}
.alt-text-dialog-text { font-size: 16px; line-height: 1.5; white-space: pre-wrap; margin: 0; max-height: 80vh; overflow-y: auto;}
.alt-text-dialog-close { position: fixed; top: 20px; right: 20px; color: var(--overlay-text-color); cursor: pointer; background: var(--overlay-color); width: 40px; height: 40px; border-radius: var(--icon-button-border-radius); display: flex; align-items: center; justify-content: center; border: none;}
.post-video streaming-video { position: absolute; inset: 0; width: 100%; height: 100%;}
.post-video video { display: block; width: 100%; height: 100%; object-fit: cover;}
.post-video video:fullscreen { object-fit: contain; background: var(--black);}
.video-time-remaining { pointer-events: none; position: absolute; left: 6px; bottom: 6px; padding: 3px 6px; border-radius: 6px; background: var(--alt-indicator-background); color: var(--white); font-size: 12px; line-height: 1.25; font-variant-numeric: tabular-nums; transition: opacity 0.15s;}
.video-time-remaining[hidden] { display: none;}
@media (hover: hover) { .post-video:hover .video-time-remaining { opacity: 0; }}
streaming-video.is-showing-controls .video-time-remaining { opacity: 0;}
.post-video:has(streaming-video.is-showing-controls) > .alt-indicator { opacity: 0; pointer-events: none;}
.post-video:has(video:fullscreen) .video-time-remaining { display: none;}
.gif-play-toggle { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0; border: none; background: none; cursor: pointer;}
.gif-play-toggle app-icon { display: none; width: 56px; height: 56px; color: var(--black); background: color-mix(in srgb, var(--white) 70%, transparent); border-radius: 50%;}
streaming-video.is-paused .gif-play-toggle app-icon { display: inline-flex;}
.post-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
.youtube-embed { display: block;}
.youtube-embed.is-playing { position: relative; border: var(--hair) solid var(--post-border-color); border-radius: var(--video-border-radius); overflow: hidden; background: var(--black); transform: translateZ(0); /* Prevents video jiggle on iPadOS scroll */}
.external-link-image-wrapper app-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; color: var(--black); background: color-mix(in srgb, var(--white) 70%, transparent); border-radius: 50%; transition: background 0.15s ease;}
@media (hover: hover) { .youtube-embed .external-link a:hover app-icon { background: color-mix(in srgb, var(--white) 85%, transparent); }}
.youtube-embed-iframe { display: block; width: 100%; height: 100%; border: none;}
.alt-indicator { pointer-events: none; position: absolute; display: flex; align-items: center; gap: 3px; top: 8px; left: 8px; background: var(--overlay-color-medium); color: var(--white); padding: 2px 6px; border-radius: var(--tag-border-radius); font-size: 11px; font-weight: 600; letter-spacing: 0.5px;}
.alt-indicator app-icon { width: 11px; height: 11px;}
.external-link { overflow: hidden;}
.embed-card { position: relative; border-radius: var(--embed-border-radius); border: var(--hair) solid var(--embed-border-color);}
.external-link hr { margin-top: 4px; margin-bottom: 2px;}
.external-link-content { display: flex; flex-direction: column; position: relative;}
.external-link-image-wrapper { position: relative;}
.external-link-image { display: block; width: 100%; aspect-ratio: 1200 / 630; border-bottom: var(--hair) solid var(--post-border-color); object-fit: cover;}
.external-link-image-wrapper app-icon { pointer-events: none;}
.external-link-video-placeholder { height: 96px; background: var(--background-color); border-bottom: var(--hair) solid var(--post-border-color);}
.external-link-uri { color: var(--text-color-muted); font-size: 12px;}
.external-link-title { font-size: 14px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
.external-link-description { word-break: break-word; font-size: 12px; overflow: hidden; width: 100%; /* https://stackoverflow.com/a/56523044 */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}
.external-link-text { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px;}
.quoted-post { padding: 10px 16px; transition: background-color 0.2s; margin-top: 8px; background: var(--background-color);}
.post-composer .quoted-post,.notification-reply-wrapper .quoted-post { background: transparent;}
.quoted-post-link { cursor: pointer;}
@media (hover: hover) { .quoted-post-link:hover .quoted-post { background-color: var(--post-hover-color); }}
.quoted-post-link .quoted-post-body { padding-right: 16px;}
.quoted-post .post-text { font-size: 14px;}
.quoted-post .avatar-image-frame { width: var(--avatar-size-quoted-post); height: var(--avatar-size-quoted-post);}
.quoted-post-header { display: flex; align-items: center; gap: 8px; min-width: 0;}
.quoted-post-header .post-header-text .post-separator,.quoted-post-header .post-header-text .post-time { flex-shrink: 0;}
.quoted-post-body > .post-text { margin-top: 5px;}
.feed-generator-embed { overflow: hidden;}
.feed-generator-embed-content { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px;}
.feed-generator-embed-title { font-size: 14px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
.feed-generator-embed-subtitle { font-size: 13px; color: var(--text-color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
.feed-generator-embed-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0;}
.feed-avatar { width: 40px; height: 40px; border-radius: var(--feed-avatar-border-radius); object-fit: cover;}
.list-embed { overflow: hidden;}
.list-embed-content { display: flex; flex-direction: row; align-items: center; gap: 12px; padding: 12px;}
.list-embed-title { font-size: 14px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
.list-embed-subtitle { font-size: 13px; color: var(--text-color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
.list-embed-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0;}
.list-avatar { width: 40px; height: 40px; border-radius: var(--embed-border-radius); object-fit: cover;}
.starter-pack-embed { overflow: hidden;}
.starter-pack-embed-content { display: flex; flex-direction: column;}
.starter-pack-embed-title { font-size: 14px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
.starter-pack-embed-description { word-break: break-word; font-size: 13px; overflow: hidden; width: 100%; /* https://stackoverflow.com/a/56523044 */ display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;}
.starter-pack-embed-text { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px;}
.starter-pack-embed-image { display: block; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: var(--hair) solid var(--post-border-color);}
.starter-pack-embed-subtitle { color: var(--text-color-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
/* Quoted-post cards carry a margin-top for the feed context; inside preview containers it would leave the close button flush with the card's top edge. */.post-composer-embed-preview .quoted-post,.message-embed-preview .quoted-post { margin-top: 0;}
.embed-preview-close-button { z-index: 1; position: absolute; right: 8px; top: 8px; border-radius: var(--circular-button-border-radius); color: var(--text-color); border: var(--hair) solid var(--post-border-color); background: light-dark(var(--lightest-gray), var(--dark-gray)); width: 33px; height: 33px; cursor: pointer; display: flex; align-items: center; justify-content: center;}
.embed-preview-close-button app-icon { width: 18px; height: 18px;}
.image-preview-item { position: relative; flex-shrink: 0; width: 120px; height: 120px; border-radius: var(--image-preview-border-radius); overflow: hidden; border: var(--hair) solid var(--post-border-color);}
.image-preview-item img { width: 100%; height: 100%; object-fit: cover;}
.image-preview-remove-button { z-index: 1; position: absolute; right: 4px; top: 4px; border-radius: var(--circular-button-border-radius); color: var(--overlay-text-color); border: none; background: var(--overlay-color-medium); width: 30px; height: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s;}
@media (hover: hover) { .image-preview-remove-button:hover { background: var(--overlay-color-darker); }}
.video-preview-item { position: relative; width: 100%; max-width: 360px; border-radius: var(--image-preview-border-radius); overflow: hidden; border: var(--hair) solid var(--post-border-color); background: black;}
.video-preview-item video,.video-preview-item img { width: 100%; display: block; max-height: 360px;}
.video-preview-item img { object-fit: contain;}
.video-preview-item .alt-indicator { pointer-events: auto; border: none; cursor: pointer; z-index: 1;}
.video-preview-overlay { position: absolute; inset: 0; background: var(--overlay-color-medium); color: var(--overlay-text-color); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 14px; pointer-events: none;}
lightbox-image-group { display: flex; flex-direction: column; overflow: hidden; gap: 4px;}
lightbox-image-group img { cursor: pointer;}
lightbox-image-group.post-images.num-images-2 { flex-direction: row;}
lightbox-image-group.post-images.num-images-2 .post-image-container { flex: 1; max-width: 50%;}
lightbox-image-group.post-images.num-images-2 .post-image { width: 100%; aspect-ratio: 1/1; object-fit: cover;}
lightbox-image-group.post-images.num-images-3 { display: flex; flex-direction: row; gap: 4px; width: 100%;}
lightbox-image-group.post-images.num-images-3 .post-image-container:first-child { flex: 1; aspect-ratio: 1/1;}
lightbox-image-group.post-images.num-images-3 .post-image-container:first-child .post-image { width: 100%; height: 100%; object-fit: cover;}
lightbox-image-group.post-images.num-images-3 .right-column { flex: 1; aspect-ratio: 1/1; display: flex; flex-direction: column; gap: 4px;}
lightbox-image-group.post-images.num-images-3 .right-column .post-image-container { flex: 1; min-height: 0;}
lightbox-image-group.post-images.num-images-3 .right-column .post-image { width: 100%; height: 100%; object-fit: cover;}
lightbox-image-group.post-images.num-images-4 { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 4px; width: 100%;}
lightbox-image-group.post-images.num-images-4 .post-image { width: 100%; height: 100%; aspect-ratio: 1.5/1; object-fit: cover;}
image-carousel { display: block;}
.image-carousel-container { position: relative;}
.carousel-scroller { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; height: 200px;}
.carousel-scroller::-webkit-scrollbar { display: none;}
.carousel-slide { position: relative; flex: 0 0 auto; height: 100%; padding: 0; margin: 0; border: none; background: none; cursor: pointer; scroll-snap-align: start; border-radius: var(--image-border-radius); overflow: hidden;}
.carousel-slide:focus-visible { outline: 2px solid var(--primary-button-color); outline-offset: 2px;}
.carousel-slide .carousel-image { display: block; width: 100%; height: 100%; object-fit: cover; border: var(--hair) solid var(--post-border-color); border-radius: var(--image-border-radius); background-color: var(--background-color); user-select: none; -webkit-user-drag: none;}
.carousel-counter { position: absolute; top: 8px; right: 8px; padding: 2px 8px; background: var(--overlay-color-medium); color: var(--white); border-radius: var(--tag-border-radius); font-size: 12px; font-weight: 600; pointer-events: none;}
.carousel-slide .alt-indicator { top: auto; left: auto; bottom: 8px; right: 8px;}
.crop-indicator { pointer-events: none; position: absolute; bottom: 8px; left: 8px; right: auto; display: inline-flex; align-items: center; justify-content: center; background: var(--overlay-color-medium); color: var(--white); padding: 4px; border-radius: var(--tag-border-radius);}
.carousel-slide:not(:has(.alt-indicator)) .crop-indicator { left: auto; right: 8px;}
.crop-indicator app-icon { width: 14px; height: 14px; display: block;}
@media (min-width: 600px) { .carousel-scroller { height: 260px; }}
@media (min-width: 900px) { .carousel-scroller { height: 300px; }}
.reply-context-line-in { position: absolute; left: 19px; top: -13px; width: var(--reply-context-line-width); height: 13px; background-color: var(--reply-context-line-color);}
.reply-context-line-out-container { position: relative; height: 100%; width: 100%;}
.reply-context-line-out { position: absolute; left: 19px; width: var(--reply-context-line-width); top: 0; bottom: -12px; background-color: var(--reply-context-line-color);}
.reply-context-line-gap { position: absolute; left: 35px; top: -10px; bottom: -12px; width: var(--reply-context-line-width); background-color: var(--reply-context-line-color);}
.load-more-link { display: flex; flex-direction: row; align-items: center; justify-content: flex-start;}
.load-more-spacer { width: 69px; height: 2em; position: relative;}
.load-more-link a { color: var(--text-link-color); font-size: 13px;}
.hidden-replies-button-icon { width: 20px; height: 20px;}
.hidden-replies-button-icon app-icon { width: 100%; height: 100%;}
.hidden-replies-button { display: flex; align-items: center; gap: 16px; padding-left: 18px; padding-top: 18px; padding-bottom: 18px; color: var(--text-color-muted); font-size: 14px; border-bottom: var(--hair) solid var(--post-border-color);}
/* i don't know why the hidden attribute isn't working, but this hides it */.hidden-replies-section.expanded .hidden-replies-button { display: none;}
.hidden-replies-section .toggle-content > .small-post,.hidden-replies-section .toggle-content > .post-thread-tree-row:last-child { border-bottom: var(--hair) solid var(--post-border-color);}
@media (hover: hover) { .hidden-replies-button:hover { background-color: var(--post-hover-color); }}
.muted-parent-toggle-button-icon { width: 20px; height: 20px;}
.muted-parent-toggle-button-icon app-icon { width: 100%; height: 100%;}
.muted-parent-toggle-button { display: flex; align-items: center; gap: 16px; padding-left: 26px; padding-right: 26px; padding-top: 18px; padding-bottom: 18px; color: var(--text-color-muted); font-size: 14px;}
/* i don't know why the hidden attribute isn't working, but this hides it */.muted-parent-toggle.expanded .muted-parent-toggle-button { display: none;}
@media (hover: hover) { .muted-parent-toggle-button:hover { background-color: var(--post-hover-color); }}
.muted-account-show-more { color: var(--text-link-color); flex: 1; text-align: right;}
.notifications-feed { padding: 0;}
.notification-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; border-bottom: var(--hair) solid var(--post-border-color); transition: background-color 0.2s;}
.notification-item-clickable { text-decoration: none; color: inherit;}
@media (hover: hover) { .notification-item:hover { background-color: var(--post-hover-color); cursor: pointer; }}
.notification-item.unread { background-color: var(--highlight-color-tint);}
@media (hover: hover) { .notification-item.unread:hover { background-color: var(--highlight-color-tint-hover); }}
.notification-icon { flex-shrink: 0; width: 32px; height: 32px; margin-top: 1px; margin-left: 6px; margin-right: 6px;}
.notification-icon > app-icon { width: 32px; height: 32px; color: var(--highlight-color);}
.notification-icon > app-icon[icon="like"] { color: var(--like-color);}
/* @chunk notifications */.notification-icon > app-icon[icon="repost"] { color: var(--repost-color);}
.notification-icon.verified-icon app-icon { color: var(--highlight-color);}
.notification-icon.unverified-icon app-icon { color: var(--text-color-muted);}
.notification-content { flex: 1; min-width: 0;}
.notification-avatars { display: flex; gap: 4px; margin-bottom: 4px; align-items: center;}
.notification-authors-toggle { width: 100%; background: none; border: none; padding: 0; font: inherit; color: var(--text-color-muted); cursor: pointer;}
.notification-authors-toggle > app-icon { width: 20px; height: 20px;}
.notification-authors-show { flex: 1; align-self: stretch; display: flex; align-items: center; gap: 4px;}
.notification-authors-hide { display: flex; align-items: center; gap: 8px; height: 36px;}
.notification-expanded-authors { padding-bottom: 4px;}
.notification-expanded-authors .profile-list-item { padding: 6px 0; border-bottom: none;}
.notification-more { width: 24px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--text-color-muted);}
.notification-text { font-size: 15px; line-height: 1.5; color: var(--text-color);}
.notification-text strong { font-weight: 600;}
.notification-time { color: var(--text-color-muted); font-weight: normal;}
.notification-via-starter-pack { font-size: 14px; color: var(--text-color-muted);}
.notification-starter-pack-link { font-weight: 600; color: var(--text-color); text-decoration: none;}
.notification-starter-pack-icon { width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 4px;}
@media (hover: hover) { .notification-starter-pack-link:hover { text-decoration: underline; }}
.notification-preview { margin-top: 5px; font-size: 14px; color: var(--text-color-muted);}
.notification-preview-text { white-space: pre-wrap; word-break: break-word; margin-bottom: 8px;}
.notification-preview-text:last-child { margin-bottom: 0;}
.notification-preview-text.unavailable-post { color: var(--text-color-muted); font-style: italic;}
.notification-preview-images { display: grid; gap: 4px; margin-top: 8px; width: fit-content;}
.notification-preview-images:first-child { margin-top: 0;}
/* Single image */.notification-preview-images:has(.notification-preview-image:only-child) { grid-template-columns: 1fr;}
/* Two images */.notification-preview-images:has( .notification-preview-image:nth-child(2):last-child) { grid-template-columns: 1fr 1fr;}
/* Three or four images */.notification-preview-images:has(.notification-preview-image:nth-child(3)) { grid-template-columns: 1fr 1fr;}
.notification-preview-image { height: 100px; aspect-ratio: 1; object-fit: cover; border-radius: var(--image-preview-border-radius); background-color: var(--generic-border-color); border: var(--hair) solid var(--post-border-color);}
.notification-preview-video { position: relative; display: inline-block; height: 100px; aspect-ratio: 1; margin-top: 8px;}
.notification-preview-video:first-child { margin-top: 0;}
.notification-preview-video img { height: 100%; width: 100%; object-fit: cover; border-radius: var(--image-preview-border-radius); background-color: var(--generic-border-color); border: var(--hair) solid var(--post-border-color);}
.video-preview-play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; background-color: var(--overlay-color-medium); border-radius: var(--circular-button-border-radius);}
.video-preview-play-button::after { content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%); border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent var(--overlay-text-color);}
.gif-preview-badge { position: absolute; left: 5px; bottom: 5px; padding: 3px 6px; border-radius: 6px; background-color: var(--overlay-color-darker); color: var(--overlay-text-color); font-size: 8px; font-weight: 600; line-height: 1;}
.notification-reply-wrapper { border-bottom: var(--hair) solid var(--post-border-color);}
.notification-reply-wrapper.unread { background-color: var(--highlight-color-tint);}
.notification-profile-link { font-weight: 600;}
@media (hover: hover) { .notification-profile-link:hover { text-decoration: underline; }}
.chat-main { padding: 0;}
.convo-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: var(--hair) solid var(--post-border-color); transition: background-color 0.2s; cursor: pointer; text-decoration: none; color: inherit; position: relative;}
@media (hover: hover) { .convo-item:hover { background-color: var(--post-hover-color); }}
.convo-item.unread { background-color: var(--highlight-color-tint);}
@media (hover: hover) { .convo-item.unread:hover { background-color: var(--highlight-color-tint-hover); }}
.convo-avatar { flex-shrink: 0;}
.convo-avatar .avatar-image-frame { width: var(--avatar-size-convo); height: var(--avatar-size-convo);}
.avatar-group { position: relative; width: var(--avatar-size-convo); height: var(--avatar-size-convo);}
.avatar-group > .avatar,.avatar-group > .avatar .avatar-image-frame { display: block; width: 100%; height: 100%;}
.avatar-group-item { position: absolute;}
.avatar-group-item .avatar,.avatar-group-item .avatar-image-frame { display: block; width: 100%; height: 100%;}
.avatar-group-2 .avatar-group-item { width: 63.3%; height: 63.3%;}
.avatar-group-2 .avatar-group-item:nth-child(1) { top: 0; left: 0; z-index: 1;}
.avatar-group-2 .avatar-group-item:nth-child(2) { top: 35%; left: 35%;}
.avatar-group-2 .avatar-group-item .avatar-image-frame { border: 2px solid var(--background-color);}
.avatar-group-3 .avatar-group-item:nth-child(1) { width: 56.7%; height: 56.7%; top: 0; left: 0;}
.avatar-group-3 .avatar-group-item:nth-child(2) { width: 46.7%; height: 46.7%; top: 51.7%; left: 31.7%;}
.avatar-group-3 .avatar-group-item:nth-child(3) { width: 38.3%; height: 38.3%; top: 15%; left: 59.2%;}
.avatar-group-4 .avatar-group-item:nth-child(1) { width: 56.7%; height: 56.7%; top: 0; left: 0;}
.avatar-group-4 .avatar-group-item:nth-child(2) { width: 46.7%; height: 46.7%; top: 40.8%; left: 50%;}
.avatar-group-4 .avatar-group-item:nth-child(3) { width: 35%; height: 35%; top: 61.7%; left: 11.7%;}
.avatar-group-4 .avatar-group-item:nth-child(4) { width: 26.7%; height: 26.7%; top: 7.5%; left: 60%;}
/* @chunk chat */.convo-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;}
.convo-header { display: flex; align-items: center; gap: 8px;}
.convo-name { font-weight: 600; font-size: 15px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.convo-time { flex-shrink: 0; font-size: 14px; color: var(--text-color-muted);}
.convo-handle { font-size: 14px; color: var(--text-color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.convo-preview { font-size: 14px; color: var(--text-color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;}
.convo-preview.unread { color: var(--text-color); font-weight: 500;}
.convo-item.skeleton { pointer-events: none;}
.convo-skeleton-avatar { width: var(--avatar-size-convo); height: var(--avatar-size-convo); border-radius: var(--avatar-border-radius);}
.convo-skeleton-name { width: 120px; height: 16px; border-radius: var(--skeleton-border-radius);}
.convo-skeleton-time { width: 40px; height: 14px; border-radius: var(--skeleton-border-radius);}
.convo-skeleton-handle { width: 90px; height: 12px; border-radius: var(--skeleton-border-radius); margin-top: 4px;}
.convo-skeleton-preview { width: 80%; height: 14px; border-radius: var(--skeleton-border-radius); margin-top: 6px;}
.chat-requests-main { padding: 0;}
.chat-request-item { display: flex; flex-direction: column; border-bottom: var(--hair) solid var(--post-border-color); background-color: var(--background-color); transition: background-color 0.2s;}
@media (hover: hover) { .chat-request-item:hover { background-color: var(--post-hover-color); }}
.chat-request-header { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; cursor: pointer; transition: background-color 0.2s;}
@media (hover: hover) { .chat-request-header:hover { background-color: var(--post-hover-color); }}
.chat-request-follow-status { color: var(--text-color-muted); font-size: 13px; margin-top: 6px;}
.chat-request-actions { display: flex; gap: 12px; padding: 0 16px 12px 16px;}
.chat-request-button { flex: 1; padding: 10px 16px; border: none; border-radius: var(--sheet-border-radius); font-size: 14px; cursor: pointer; transition: background-color 0.2s;}
.chat-request-button.accept { background-color: var(--primary-button-color); color: var(--primary-button-text-color);}
@media (hover: hover) { .chat-request-button.accept:hover { opacity: 0.9; }}
.chat-request-button.reject { background-color: var(--text-input-background-color);}
@media (hover: hover) { .chat-request-button.reject:hover { background-color: var(--generic-border-color); }}
.chat-request-item.skeleton .chat-request-header { pointer-events: none;}
.chat-request-skeleton-button { flex: 1; height: 40px; border-radius: var(--sheet-border-radius);}
.chat-detail-main { position: relative; height: calc( 100dvh - var(--chat-detail-header-height) - var(--footer-height) - var(--safe-area-inset-bottom) ); overflow: hidden; /* Gets updated via JS in chat detail view */ --input-bar-height: var(--message-input-min-height);}
.chat-detail-main > infinite-scroll-container { display: block; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--input-bar-height); box-sizing: border-box;}
.chat-detail-main .message-list { padding: 16px 16px 8px;}
@media (min-width: 800px) { .chat-detail-main { height: calc( 100dvh - var(--chat-detail-header-height) - var(--safe-area-inset-bottom) ); }}
.chat-detail-main .loading-spinner-container { display: flex; justify-content: center; align-items: center; padding: 16px;}
.chat-detail-empty { display: flex; justify-content: center; align-items: center; padding: 20px 20px; color: var(--text-color-muted); font-size: 15px;}
.chat-info-panel { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px 20px; text-align: center;}
.chat-info-panel .profile-follows-you { margin-top: 4px;}
.chat-info-panel > .avatar .avatar-image-frame,.chat-info-panel-avatars > .avatar .avatar-image-frame { width: var(--avatar-size-chat-info-panel); height: var(--avatar-size-chat-info-panel);}
.chat-info-panel-avatars { height: var(--avatar-size-chat-info-panel);}
.chat-info-panel-avatars .avatar-group { width: var(--avatar-size-chat-info-panel); height: var(--avatar-size-chat-info-panel);}
.chat-info-panel-name { display: flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 20px; font-weight: 700; color: var(--text-color);}
.chat-info-panel-handle { font-size: 14px; color: var(--text-color-muted);}
.chat-info-panel-go-to-profile-button { margin-top: 12px; color: var(--text-color); text-decoration: none;}
.chat-info-panel .author-badges { justify-content: center; gap: 4px;}
.chat-info-panel .label-badge { font-size: 13px; min-height: 23px; padding: 3px 8px 4px; background: light-dark(var(--lightest-gray), var(--gray));}
@media (hover: hover) { .chat-info-panel .label-badge:hover { background: light-dark(var(--lighter-gray), var(--light-gray)); }}
.chat-info-panel .label-badge-image { width: 16px; height: 16px;}
.group-chat-header-skeleton-avatar { width: var(--avatar-size-chat-info-panel); height: var(--avatar-size-chat-info-panel);}
.group-chat-header-skeleton-handle-line { display: inline-block;}
.group-chat-members-heading { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-weight: 600; color: var(--text-color); border-bottom: var(--hair) solid var(--post-border-color);}
.group-chat-member-count { font-weight: 400; font-size: 14px; color: var(--text-color-muted);}
.group-chat-member-added-by { align-self: center; flex-shrink: 0; font-size: 13px; text-align: right; color: var(--text-color-muted);}
.group-chat-admin-badge { align-self: center; padding: 3px 10px 4px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--highlight-color); background: color-mix(in srgb, var(--highlight-color) 12%, transparent);}
.chat-info-panel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 16px;}
.chat-info-panel-action { gap: 6px;}
.chat-info-panel-action app-icon { width: 18px; height: 18px; display: inline-flex;}
.chat-info-panel-action app-icon svg { width: 100%; height: 100%;}
.chat-info-panel-action-skeleton { width: 90px; height: 34px;}
.chat-info-panel-action.muted { color: var(--error-color); background-color: color-mix(in srgb, var(--error-color) 12%, transparent);}
@media (hover: hover) { .rounded-button.chat-info-panel-action.muted:not(:disabled):hover { background-color: color-mix(in srgb, var(--error-color) 20%, transparent); }}
.convo-item.is-muted { opacity: 0.6;}
.convo-item .convo-muted-icon { display: inline-flex; width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; color: var(--text-color-muted);}
.convo-item .convo-muted-icon svg { width: 100%; height: 100%;}
.message-day-title { font-size: 12px; color: var(--text-color-muted); margin-bottom: 12px; text-align: center;}
.message-day-title strong { font-weight: 500; color: var(--text-color);}
.message-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px;}
.message-author-name { font-size: 0.8rem; color: var(--text-color-muted); margin-left: calc(var(--avatar-size-message) + 8px); margin-bottom: 2px;}
.system-message { text-align: center; font-size: 0.85rem; color: var(--text-color-muted); margin: 12px 0;}
.chat-locked-notice { text-align: center; font-size: 0.9rem; color: var(--text-color-muted); padding: 16px;}
.message-group-sent { align-items: flex-end;}
.message-group-received { align-items: flex-start;}
.message { display: flex; gap: 8px; width: 100%; margin-bottom: 4px; position: relative;}
.message-sent { flex-direction: row-reverse;}
.message-received { flex-direction: row;}
.message-avatar { flex-shrink: 0; width: var(--avatar-size-message); height: var(--avatar-size-message); align-self: flex-start;}
.message-avatar .avatar-image-frame { width: var(--avatar-size-message); height: var(--avatar-size-message);}
.message-avatar-spacer { width: var(--avatar-size-message); height: var(--avatar-size-message); flex-shrink: 0; align-self: flex-start;}
.message-bubble { max-width: 70%; min-width: 0; padding: 10px 14px; border-radius: var(--message-bubble-border-radius); word-wrap: break-word; overflow-wrap: break-word;}
.message-sent .message-bubble { background-color: var(--highlight-color); color: var(--overlay-text-color); border-bottom-right-radius: 4px;}
.message-received .message-bubble { background-color: var(--text-input-background-color); color: var(--text-color); border-bottom-left-radius: 4px;}
.message-text .rich-text-emoji-only { --rich-text-emoji-scale: 3;}
.message-sent .message-bubble-emoji-only,.message-received .message-bubble-emoji-only { background: none; padding: 0; border-radius: 0; color: var(--text-color);}
.message-bubble a { text-decoration: underline;}
.message-reply-quote { padding: 4px 8px; margin-bottom: 6px; border-radius: 8px; font-size: 13px; opacity: 0.9; cursor: pointer;}
.message-sent .message-reply-quote { background-color: rgba(255, 255, 255, 0.15);}
.message-received .message-reply-quote { background-color: light-dark(rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.1));}
.message-reply-quote-sender { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.message-reply-quote-text { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}
.message-reply-quote-text-muted { font-style: italic; opacity: 0.7;}
.message-reply-caption { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-color-muted); margin-bottom: 2px; cursor: pointer;}
.message-reply-caption-arrow { display: flex;}
.message-reply-caption-arrow app-icon { width: 13px; height: 13px;}
.message-reply-caption-sent { justify-content: flex-end; padding-right: 4px;}
.message-reply-caption-received { justify-content: flex-start; padding-left: 44px;}
@keyframes message-highlight-flash-received { 0% { background-color: transparent; } 10%, 37% { background-color: color-mix( in srgb, var(--highlight-color) 22%, transparent ); } 67% { background-color: transparent; }}
@keyframes message-highlight-flash-sent { 0% { background-color: var(--highlight-flash-base); } 10%, 37% { background-color: color-mix( in srgb, var(--overlay-text-color) 50%, var(--highlight-flash-base) ); } 67% { background-color: var(--highlight-flash-base); }}
.message-wrapper.message-highlighted .message-received .message-bubble,.message-wrapper.message-highlighted .message-received .message-embed > .quoted-post,.message-wrapper.message-highlighted .message-received .message-embed > .quoted-post-link > .quoted-post { animation: message-highlight-flash-received 1500ms ease-out;}
.message-wrapper.message-highlighted .message-sent .message-bubble { --highlight-flash-base: var(--highlight-color); animation: message-highlight-flash-sent 1500ms ease-out;}
.message-wrapper.message-highlighted .message-sent .message-bubble-emoji-only,.message-wrapper.message-highlighted .message-received .message-bubble-emoji-only { animation: none;}
.message-wrapper.message-highlighted .message-sent .message-embed > .quoted-post,.message-wrapper.message-highlighted .message-sent .message-embed > .quoted-post-link > .quoted-post { --highlight-flash-base: var(--highlight-color-tint); animation: message-highlight-flash-sent 1500ms ease-out;}
.message-sent a { color: var(--off-white);}
.message-group-time { font-size: 11px; color: var(--text-color-muted); padding: 0 8px;}
.message-group-time-sent { text-align: right; padding-right: 4px;}
.message-group-time-received { text-align: left; padding-left: 44px;}
/* Message wrapper for reaction palette */.message-wrapper { position: relative; width: 100%;}
.message-embed .quoted-post { background: var(--text-input-background-color); border-radius: var(--message-bubble-border-radius); border: none; margin-top: 0;}
.message-sent .message-embed .quoted-post { background: var(--highlight-color-tint);}
.message-sent .message-embed a { color: inherit;}
.chat-join-link-embed { padding: 12px; display: flex; flex-direction: column; gap: 12px; min-width: 240px; max-width: 100%;}
.message-embed .chat-join-link-embed { background: var(--text-input-background-color); border-radius: var(--message-bubble-border-radius); border: none;}
.message-sent .message-embed .chat-join-link-embed { background: var(--highlight-color-tint);}
.chat-join-link-embed-header { display: flex; flex-direction: row; align-items: center; gap: 12px;}
.chat-join-link-embed-avatars { flex-shrink: 0;}
.chat-join-link-embed-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;}
.chat-join-link-embed-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.chat-join-link-embed-meta { font-size: 12px; color: var(--text-color-muted);}
.chat-join-link-embed-owner { font-size: 13px; color: var(--text-color); display: flex; align-items: center; gap: 4px; overflow: hidden; flex-wrap: wrap;}
.chat-join-link-embed-owner-name { color: inherit; font-weight: 500; text-decoration: none;}
.chat-join-link-embed-owner-handle { color: var(--text-color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;}
.chat-join-link-embed-unavailable { display: flex; align-items: center; gap: 8px; color: var(--text-color-muted); font-size: 14px; padding: 4px 0;}
.chat-join-link-embed-unavailable app-icon { width: 18px; height: 18px; flex-shrink: 0;}
.chat-join-link-action { gap: 6px; padding: 8px 14px; font-weight: 600; width: 100%;}
.chat-join-link-action[disabled] { background: var(--secondary-button-color); color: var(--text-color);}
.chat-join-link-action app-icon { width: 18px; height: 18px;}
.message-actions { display: flex; align-self: center; flex-shrink: 0;}
.message-sent .message-actions { flex-direction: row-reverse;}
.message-emoji-trigger,.message-more-trigger { background: transparent; border: none; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--text-color-muted); cursor: pointer; opacity: 0; pointer-events: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation;}
.message-emoji-trigger app-icon { width: 20px; height: 20px;}
.message-more-trigger span { font-weight: 600; position: relative; top: -4px;}
.message-wrapper-active .message-emoji-trigger,.message-wrapper-active .message-more-trigger { opacity: 1; pointer-events: auto;}
@media (hover: hover) { .message:hover .message-emoji-trigger, .message:hover .message-more-trigger { opacity: 1; pointer-events: auto; } .message-emoji-trigger:hover, .message-more-trigger:hover { color: var(--text-color); }}
/* Skeleton loader for messages */.message.skeleton { pointer-events: none;}
.message-input-wrapper { display: flex; flex-direction: column; position: absolute; bottom: 0; left: 0; right: 0;}
.message-reply-preview { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background-color: var(--background-color); border-top: 1px solid var(--generic-border-color); z-index: var(--message-input-z-index); font-size: 16px;}
.message-reply-preview-accent { width: 3px; align-self: stretch; background-color: var(--highlight-color); border-radius: 2px;}
.message-reply-preview-content { flex: 1; min-width: 0;}
.message-reply-preview-sender { font-size: 13px; color: var(--text-color-muted); font-weight: 600;}
.message-reply-preview-text { font-size: 15px; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.message-reply-preview-text-muted { font-style: italic; opacity: 0.7;}
.message-reply-preview-clear { background: none; border: none; color: var(--text-color-muted); cursor: pointer; padding: 4px 8px; display: flex; align-items: center;}
.message-embed-preview { position: relative; padding: 8px 16px; background-color: var(--background-color); border-top: 1px solid var(--generic-border-color); z-index: var(--message-input-z-index);}
.message-embed-preview-pending { display: flex; align-items: center; justify-content: center; min-height: 64px; border: var(--hair) solid var(--embed-border-color); border-radius: var(--embed-border-radius); color: var(--text-color-muted);}
.quoted-post-condensed .post-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;}
.quoted-post-media-thumbs { display: flex; gap: 4px; margin-top: 8px;}
.quoted-post-media-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: var(--image-preview-border-radius); background-color: var(--generic-border-color); border: var(--hair) solid var(--post-border-color);}
.quoted-post-media-video { position: relative;}
.message-embed-preview .embed-preview-close-button { right: 24px; top: 16px;}
.message-input-container { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background-color: var(--background-color); position: relative; min-height: var(--message-input-min-height); z-index: var(--message-input-z-index); flex: 1;}
chat-input { flex: 1;}
chat-input rich-text-input { flex: 1; min-width: 0;}
chat-input .rich-text-input { padding: 12px 16px; border: none; border-radius: var(--message-input-border-radius); background-color: var(--text-input-background-color); color: var(--text-color); font-size: 16px; font-family: inherit; outline: none; /* Cap auto-grow so a long multi-line message scrolls internally instead of pushing the whole input bar up off the top of the (short, mobile) viewport. */ max-height: min(250px, 50vh); overflow-y: auto; line-height: 1.4; scrollbar-width: thin;}
chat-input .rich-text-input[contenteditable="false"],chat-input[disabled] .rich-text-input-placeholder { opacity: 0.6;}
chat-input .rich-text-input-placeholder { padding: 12px 16px; font-size: 16px; line-height: 1.4;}
.message-input-field-wrapper { position: relative; flex: 1; min-width: 0; display: flex;}
.message-input-emoji-wrapper { position: absolute; right: 6px; bottom: 7px; display: flex; align-items: center;}
.message-input-field-wrapper .rich-text-input,.message-input-field-wrapper .rich-text-input-placeholder { padding-right: 46px;}
.message-input-emoji-button { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--circular-button-border-radius); background: transparent; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-color-muted); padding: 0; transition: background-color 0.2s, color 0.2s;}
@media (hover: hover) { .message-input-emoji-button:hover:not(:disabled) { background-color: var(--post-hover-color); color: var(--text-color); }}
.message-input-emoji-button app-icon { width: 22px; height: 22px;}
.message-input-send-button { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--circular-button-border-radius); color: var(--primary-button-text-color); background-color: var(--primary-button-color); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.2s;}
.message-input-send-button .loading-spinner { border-top-color: var(--primary-button-text-color); border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent;}
@media (hover: hover) { .message-input-send-button:hover:not(:disabled) { opacity: 0.9; }}
.message-input-send-button:active:not(:disabled) { opacity: 0.8;}
.message-input-send-button app-icon { color: var(--overlay-text-color); width: 20px; height: 20px; left: 2px;}
.reaction-palette { position: absolute; top: 100%; left: 0; background: var(--context-menu-background-color); border-radius: var(--reaction-palette-border-radius); padding: 0px 0px; display: flex; gap: 0px; box-shadow: var(--shadow-color-medium); animation: palette-appear 0.2s ease-out; border: var(--hair) solid var(--generic-border-color); z-index: var(--reaction-palette-z-index);}
@keyframes palette-appear { from { opacity: 0; transform: scale(0.9) translateY(5px); } to { opacity: 1; transform: scale(1) translateY(0); }}
.message-group-sent .reaction-palette { right: -10px; left: auto;}
.reaction-palette-button { background: transparent; border: none; color: inherit; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: var(--circular-button-border-radius); transition: background-color 0.15s, transform 0.1s; -webkit-tap-highlight-color: transparent; user-select: none; padding: 0; touch-action: manipulation;}
.reaction-palette-button-inner { font-size: 28px; line-height: 1; display: flex; align-items: center; justify-content: center; pointer-events: none;}
.reaction-palette-button-more .reaction-palette-button-inner { position: relative; bottom: 8px;}
@media (hover: hover) { .reaction-palette-button:hover { background-color: var(--secondary-button-color); }}
.message-content { display: flex; flex-direction: column; min-width: 0; max-width: 70%;}
.message-sent .message-content { align-items: flex-end;}
.message-received .message-content { align-items: flex-start;}
.message-content .message-bubble,.message-content .message-embed { max-width: 100%;}
.message-content .message-embed + .message-bubble { margin-top: 4px;}
.message-reactions { display: inline-flex; align-items: center; gap: 4px; background: var(--background-color); border: var(--hair) solid var(--generic-border-color); border-radius: 999px; padding: 2px 8px; margin-top: -8px; position: relative; user-select: none;}
.message-reactions:not(.message-reactions-static) { cursor: pointer;}
.message-reactions-own { background-color: var(--highlight-color-tint); border-color: var(--highlight-color);}
@media (hover: hover) { .message-reactions:not(.message-reactions-static):hover { background-color: var(--post-hover-color); }
.message-reactions-own:not(.message-reactions-static):hover { background-color: var(--highlight-color-tint-hover); }}
.reaction-palette-button[disabled] { cursor: not-allowed;}
.reaction-palette-button.reaction-palette-button-active { background-color: var(--secondary-button-color);}
@media (hover: hover) { .reaction-palette-button.reaction-palette-button-active:hover { background-color: var(--secondary-button-hover-color); }}
.reaction-bubble { display: inline-flex; align-items: center; gap: 2px; padding: 2px 0; font-size: 14px;}
.reaction-emoji { font-size: 16px; line-height: 1; display: flex; align-items: center;}
.reaction-count { font-size: 12px; font-weight: 600; color: var(--text-color); line-height: 1; padding: 2px 2px 2px 0;}
@media (min-width: 800px) { .bottom-sheet.live-status-dialog { max-width: 400px; }}
.live-status-card { display: flex; flex-direction: column; gap: 14px; padding: 16px;}
.live-status-dialog-content { display: flex; flex-direction: column; padding-top: 10px; overflow-y: auto;}
.live-status-thumb { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 1.91 / 1; background-color: var(--image-placeholder-color);}
.live-status-thumb-image { width: 100%; height: 100%; object-fit: cover; display: block;}
.live-status-thumb-image.is-blurred { filter: blur(20px); transform: translateZ(0);}
.live-status-thumb-badge { position: absolute; top: 10px; left: 10px; background-color: var(--live-color); color: var(--white); font-size: 13px; font-weight: 700; letter-spacing: 0.03em; line-height: 1; padding: 4px 7px; border-radius: 5px;}
.live-status-title { font-size: 17px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;}
.live-status-domain { margin-top: 4px; font-size: 14px; color: var(--text-color-muted);}
.live-status-watch-button { text-align: center; text-decoration: none;}
.live-status-divider { border-top: var(--hair) solid var(--generic-border-color);}
.live-status-profile-row { display: flex; align-items: center; gap: 10px;}
.live-status-profile-info { flex: 1; min-width: 0;}
.live-status-profile-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.live-status-profile-handle { font-size: 14px; color: var(--text-color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.live-status-footer { text-align: center; font-size: 13px; color: var(--text-color-muted); padding: 0 16px 16px;}
@media (min-width: 800px) { .go-live-dialog.bottom-sheet, .edit-live-dialog.bottom-sheet { max-width: 500px; }}
.live-dialog-content { display: flex; flex-direction: column; gap: 12px; padding: 16px;}
.live-dialog-title { margin: 0; font-size: 20px; font-weight: 600;}
.live-dialog-explainer { margin: 0; color: var(--text-color-muted); font-size: 14px;}
.live-dialog-expiry { font-size: 14px; color: var(--text-color-muted);}
.live-dialog-field { display: flex; flex-direction: column; gap: 4px;}
.live-dialog-label { font-size: 13px; color: var(--text-color-muted); font-weight: 500;}
.live-dialog-field input { font-size: 16px; padding: 10px 12px; border: 1px solid var(--generic-border-color); border-radius: 8px; background: var(--background-color); color: var(--text-color); margin-bottom: 12px;}
.live-dialog-info-box { font-size: 13px; padding: 8px 12px; border-radius: 8px; background: color-mix(in srgb, var(--text-color-muted) 12%, transparent); color: var(--text-color-muted);}
.live-dialog-info-box.is-error { background: color-mix(in srgb, var(--live-color) 15%, transparent); color: var(--live-color);}
.live-link-form-preview { display: flex; gap: 12px; border: 1px solid var(--generic-border-color); border-radius: 8px; padding: 8px; align-items: center;}
.live-link-form-preview-image { width: 114px; height: 64px; flex-shrink: 0; background: color-mix(in srgb, var(--text-color-muted) 12%, transparent); border-radius: 6px; overflow: hidden; display: flex; align-items: center; justify-content: center;}
.live-link-form-preview-image img { width: 100%; height: 100%; object-fit: cover;}
.live-link-form-preview-image-placeholder { color: var(--text-color-muted); font-size: 12px;}
.live-link-form-preview-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1;}
.live-link-form-preview-title { font-size: 14px; font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.live-link-form-preview-domain { font-size: 12px; color: var(--text-color-muted);}
.live-dialog-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px;}
.bottom-sheet.reactions-dialog { height: 28em;}
@media (min-width: 800px) { .bottom-sheet.reactions-dialog { height: auto; max-width: 420px; }}
.reactions-dialog-content { display: flex; flex-direction: column; height: 100%; max-height: 80vh; padding-top: 18px;}
.reactions-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: var(--hair) solid var(--generic-border-color);}
.reactions-dialog-title { margin: 0; font-size: 16px; font-weight: 600;}
.reactions-tabs { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 48px; overflow-x: auto; padding: 0 16px; border-bottom: var(--hair) solid var(--generic-border-color); scrollbar-width: thin;}
.reactions-tab { display: inline-flex; align-items: center; gap: 4px; background: var(--background-color); border: var(--hair) solid var(--generic-border-color); border-radius: 16px; padding: 4px 10px; font-size: 14px; cursor: pointer; white-space: nowrap; flex-shrink: 0;}
.reactions-tab-selected { background-color: var(--highlight-color-tint); border-color: var(--highlight-color);}
.reactions-tab-count { font-weight: 600; font-size: 12px;}
.reactions-list { flex: 1 1 auto; min-height: 0; list-style: none; margin: 0; padding: 8px 0; overflow-y: auto;}
.reactions-list li { padding: 0;}
.reaction-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px 16px; background: none; border: none; text-align: left; color: var(--text-color); font: inherit;}
.reaction-row:disabled { opacity: 1;}
.reaction-row-own { cursor: pointer;}
@media (hover: hover) { .reaction-row-own:hover { background-color: var(--post-hover-color); }}
.reaction-row-avatar { flex: 0 0 auto; width: 42px; height: 42px;}
.reaction-row-avatar .avatar,.reaction-row-avatar .avatar-image-frame,.reaction-row-avatar .avatar-image { width: 42px; height: 42px;}
.reaction-row-info { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0;}
.reaction-row-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.reaction-row-handle { font-size: 13px; color: var(--text-color-secondary, var(--text-color)); opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.reaction-row-emoji { font-size: 20px; flex: 0 0 auto;}
emoji-picker-dialog emoji-picker,.emoji-picker-dialog-host emoji-picker { --num-columns: 6; --category-emoji-size: 1.125rem; --input-font-size: 16px;}
.emoji-picker-dialog-host { position: fixed; margin: 0; padding: 0; border: none; background: transparent; max-width: none; max-height: none; width: fit-content; height: fit-content; overflow: visible;}
.emoji-picker-dialog-host::backdrop { background: transparent;}
.profile-container { padding: 0; min-height: 100dvh;}
.profile-banner-container { position: relative; width: 100%; height: 150px; background-color: var(--image-placeholder-color);}
.profile-banner { width: 100%; height: 100%; object-fit: cover;}
.profile-banner.is-blurred { filter: blur(100px);}
/* @chunk profile */.profile-banner-container lightbox-image-group { display: block; width: 100%; height: 100%;}
.profile-header { position: relative; z-index: var(--profile-header-z-index); padding: 16px; padding-bottom: 4px;}
.profile-header .avatar { position: absolute; top: -65px; left: 0;}
.profile-header .avatar-image-frame { width: var(--avatar-size-profile); height: var(--avatar-size-profile); border-color: var(--background-color); border-width: 2px;}
.profile-top-row { position: relative; display: flex; align-items: flex-start; justify-content: flex-end;}
.profile-top-row .rounded-button { margin-left: 4px;}
.profile-info { margin-top: 10px;}
.profile-name { font-size: 28px; font-weight: 800; margin: 0 0 4px 0; line-height: 1.2;}
.verification-badge { display: inline-flex; align-items: center; vertical-align: middle; /* margin-left: 1px; */ /* margin-bottom: -1px; */ flex-shrink: 0; color: var(--highlight-color);}
.verification-badge app-icon { width: 12px; height: 12px;}
.profile-badges { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; flex-shrink: 0; margin-left: 3px; margin-bottom: 2px;}
.post-header-text > .profile-badges,.profile-hover-card-name > .profile-badges,.chat-info-panel-name > .profile-badges,.chat-join-link-embed-owner > .profile-badges { margin: 0;}
.profile-info .profile-badges { gap: 6px; margin-left: 6px;}
.profile-name .verification-badge app-icon { width: 18px; height: 18px;}
.automated-account-badge { display: inline-flex; align-items: center; vertical-align: middle; flex-shrink: 0; color: var(--text-color-muted); background: none; border: none; padding: 0; cursor: pointer; font: inherit;}
.automated-account-badge app-icon { width: 12px; height: 12px;}
.profile-name .automated-account-badge app-icon { width: 18px; height: 18px;}
.profile-handle { color: var(--text-color-muted); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;}
.profile-handle-row { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 8px;}
.profile-card .author-badges { gap: 4px; margin-top: 12px; padding: 0 16px;}
.profile-card .label-badge { font-size: 13px; min-height: 23px; padding: 3px 8px 4px; background: light-dark(var(--lightest-gray), var(--gray));}
@media (hover: hover) { .profile-card .label-badge:hover { background: light-dark(var(--lighter-gray), var(--light-gray)); }}
.profile-card .label-badge-image { width: 16px; height: 16px;}
.profile-follows-you { font-size: 13px; background: var(--secondary-button-color); padding: 3px 8px; border-radius: var(--tag-border-radius); display: inline-block; width: fit-content; flex: none;}
.profile-reposts-hidden { display: inline-flex; align-items: center; gap: 4px;}
.profile-reposts-hidden app-icon { width: 14px; height: 14px;}
.profile-blocked-badge { font-size: 13px; background: var(--secondary-button-color); padding: 3px 8px; border-radius: var(--tag-border-radius); display: inline-block; margin-left: 1em;}
.profile-stats { padding: 0 16px 0 16px; display: flex; gap: 10px;}
.profile-stat { color: var(--text-color-muted); font-size: 15px; text-decoration: none;}
.profile-stat strong { color: var(--text-color); font-weight: 600;}
@media (hover: hover) { a.profile-stat:hover { cursor: pointer; text-decoration: underline; }}
.known-followers-summary { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 0 16px; color: var(--text-color-muted); font-size: 14px; text-decoration: none; line-height: 1.3;}
@media (hover: hover) { .known-followers-summary:hover .known-followers-text { text-decoration: underline; }}
.known-followers-summary strong { color: var(--text-color); font-weight: 600;}
.known-followers-avatars { display: flex; flex-shrink: 0;}
.known-followers-avatar { width: 30px; height: 30px; border-radius: var(--avatar-border-radius); border: 1px solid var(--background-color); overflow: hidden; margin-left: -8px;}
.known-followers-avatar:first-child { margin-left: 0;}
.chat-request-follow-status .known-followers-summary { margin-top: 0; padding: 0;}
.chat-request-follow-status .known-followers-avatar { width: 20px; height: 20px;}
.known-followers-avatar .avatar,.known-followers-avatar .avatar-image-frame,.known-followers-avatar .avatar-image { width: 100%; height: 100%; border-radius: var(--avatar-border-radius);}
.profile-description { margin-top: 12px; padding: 0 16px 0px 16px; line-height: 1.3;}
.profile-description a { color: var(--text-link-color);}
@media (hover: hover) { .profile-description a:hover { text-decoration: underline; }}
.profile-skeleton { pointer-events: none;}
.profile-skeleton .profile-list-item-body { gap: 8px;}
.profile-list-item { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; border-bottom: var(--hair) solid var(--post-border-color);}
container-link.profile-list-item,button.profile-list-item-button { cursor: pointer;}
button.profile-list-item-button { display: flex; background: none; border: none; color: inherit; font: inherit; text-align: left; width: 100%;}
button.profile-list-item-button.is-disabled { cursor: not-allowed; opacity: 0.55;}
.profile-list-item-row { display: flex; align-items: flex-start; gap: 12px; width: 100%;}
@media (hover: hover) { container-link.profile-list-item:hover, button.profile-list-item-button:not(:disabled):hover { background: var(--post-hover-color); }}
/* This element fixes a weird bug on iOS safari where the chatDetail page would render extra slowly. I don't know why it works, but it does. */.hack-x { color: transparent;}
.profile-list-item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;}
.profile-list-item-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-color); text-decoration: none;}
@media (hover: hover) { .profile-list-item-name:hover { text-decoration: underline; }}
.profile-list-item-display-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;}
.profile-list-item-handle { font-size: 14px; color: var(--text-color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;}
.profile-list-item-badges { display: contents;}
.profile-list-item .label-badge { font-size: 12px; padding-right: 5px; margin-top: 5px; margin-right: 2px;}
.profile-list-item .label-badge-image { width: 12px; height: 12px;}
.profile-list-item-follow { margin-left: auto; align-self: center; white-space: nowrap; flex-shrink: 0;}
.profile-list-item-follow.is-compact { gap: 3px; padding: 5px 10px; font-size: 12px; font-weight: 600; background-color: transparent; color: var(--text-color-muted);}
.profile-list-item-follow.is-compact app-icon { width: 12px; height: 12px;}
.profile-list-item-follow.is-compact.rounded-button-primary { background-color: color-mix( in srgb, var(--highlight-color) 15%, var(--background-color) ); color: var(--highlight-color);}
@media (hover: hover) { .profile-list-item-follow.is-compact.rounded-button-primary:not( :disabled ):hover { background-color: color-mix( in srgb, var(--highlight-color) 25%, var(--background-color) ); }}
.profile-list-item-skeleton-bio { display: flex; flex-direction: column; gap: 6px;}
.profile-list-item-description { font-size: 13px; color: var(--text-color-muted);}
.profile-list-item-description .rich-text { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical;}
.search-input-container { position: relative; display: flex; flex-direction: column; width: 100%;}
.search-input { padding-top: 12px; padding-bottom: 12px; padding-left: 42px; padding-right: 36px; margin: 14px; border: var(--hair) solid var(--post-border-color); border-radius: var(--text-input-border-radius); background: var(--text-input-background-color); color: var(--text-color); font-size: 16px; outline: none; transition: border-color 0.2s;}
@media (hover: hover) { .search-input:hover { background: var(--post-hover-color); }}
.search-input-container > app-icon { position: absolute; left: 24px; top: 24px; width: 24px; height: 24px;}
.search-clear-button { position: absolute; right: 23px; top: 23px; width: 24px; height: 24px; background: var(--background-color); color: var(--text-color-muted); cursor: pointer; border-radius: var(--circular-button-border-radius); border: none; display: flex; align-items: center; justify-content: center;}
.search-clear-button app-icon { width: 16px; height: 16px;}
.search-results-container { margin: 0 0 24px 0; padding-bottom: 48px;}
.search-tab-panels { display: flex; flex-direction: column; gap: 16px;}
.search-typeahead { display: flex; flex-direction: column;}
.search-typeahead-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: none; background: none; text-align: left; font-size: 15px; color: var(--text-color); cursor: pointer; border-bottom: var(--hair) solid var(--post-border-color);}
@media (hover: hover) { .search-typeahead-row:hover { background-color: color-mix( in srgb, var(--highlight-color) 6%, transparent ); }}
.search-typeahead-loading { display: flex; justify-content: center; padding: 16px;}
.search-typeahead-icon { width: var(--avatar-size-post); height: var(--avatar-size-post); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-color-muted);}
.search-typeahead-icon > app-icon { width: 24px; height: 24px;}
.search-typeahead-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.search-typeahead-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.search-typeahead-handle { color: var(--text-color-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.search-results-panel { overflow: hidden; display: flex; flex-direction: column;}
.search-recent-heading { padding: 8px 16px; font-size: 15px; font-weight: 600; color: var(--text-color);}
.search-recent-row { position: relative; display: flex; align-items: center;}
.search-recent-row .search-typeahead-row { border: none;}
.search-recent-row .search-typeahead-icon { display: none;}
.search-recent-row-button { flex: 1; min-width: 0; width: 100%; padding-right: 48px;}
.search-recent-remove-button { position: absolute; right: 12px; width: 32px; height: 32px; color: var(--text-color-muted);}
.search-recent-remove-button app-icon { width: 20px; height: 20px;}
.search-recent-profiles { display: flex; flex-wrap: nowrap; gap: 20px; padding-inline: 16px; padding-top: 8px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none;}
.search-recent-profiles::-webkit-scrollbar { display: none;}
.search-recent-profile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px; flex-shrink: 0;}
.search-recent-profile .avatar { height: 72px; line-height: 0;}
.search-recent-profile .avatar-image-frame { width: 72px; height: 72px;}
.search-recent-profile-name { max-width: 100%; font-size: 11px; color: var(--text-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.search-recent-profile-remove { top: 0; right: 4px; width: 18px; height: 18px;}
.search-recent-profile-skeleton-avatar { width: 72px; height: 72px;}
.search-recent-profile-skeleton-name-line { display: inline-block; width: 48px; height: 10px;}
.search-recent-profile-remove app-icon { width: 16px; height: 16px;}
.search-status-message { padding: 16px; color: var(--text-color-muted); font-size: 14px;}
.search-status-message.error { color: var(--error-color);}
.search-post-results .feed-item { border-bottom: var(--hair) solid var(--post-border-color); background: transparent;}
.search-post-results .feed-item:last-of-type { border-bottom: none;}
sidebar-search { display: none;}
@media (min-width: 1100px) { sidebar-search { display: block; flex-shrink: 0; }}
.sidebar-search { position: relative; z-index: var(--sidebar-search-z-index); margin: 16px;}
.sidebar-search-input-container { position: relative; display: flex;}
.sidebar-search-input { width: 100%; box-sizing: border-box; padding: 10px 36px 10px 42px; border: var(--hair) solid var(--post-border-color); border-radius: var(--text-input-border-radius); background: var(--text-input-background-color); color: var(--text-color); font-size: 16px; outline: none; transition: border-color 0.2s;}
.sidebar-search-input::-webkit-search-cancel-button { display: none;}
@media (hover: hover) { .sidebar-search-input:hover { background: var(--post-hover-color); }}
.sidebar-search-input-container > app-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--text-color-muted); pointer-events: none;}
.sidebar-search-clear-button { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: none;}
.sidebar-search-typeahead { position: absolute; z-index: 2; left: 0; right: 0; top: calc(100% + 4px); overflow: hidden; border: var(--hair) solid var(--post-border-color); border-radius: 12px; background: var(--background-color); box-shadow: var(--shadow-color-light);}
.sidebar-search-typeahead-row { padding-top: 10px; padding-left: 8px; padding-right: 8px; padding-bottom: 8px; border-bottom: none;}
.sidebar-search-placeholder { height: 16px;}
.feeds-list { display: flex; flex-direction: column; gap: 0;}
.feeds-list-header { padding: 16px; display: flex; align-items: center; font-size: 18px; font-weight: 600; color: var(--text-color); border-bottom: var(--hair) solid var(--post-border-color);}
.feeds-list-item { display: flex; align-items: center; padding: 12px 16px; border-bottom: var(--hair) solid var(--post-border-color); text-decoration: none; color: inherit; transition: background-color 0.2s;}
.feeds-list-item.clickable { cursor: pointer;}
@media (hover: hover) { .feeds-list-item.clickable:hover { background-color: var(--post-hover-color); }}
.feeds-list-item-avatar { flex-shrink: 0;}
.feeds-list-item-avatar .feed-avatar { width: 40px; height: 40px; border-radius: var(--list-avatar-border-radius);}
.feeds-list-item-content { flex: 1; min-width: 0; padding-left: 12px;}
.feeds-list-item-title { font-size: 16px; font-weight: 600; margin-bottom: 2px; color: var(--text-primary);}
.feeds-list-item-creator { font-size: 14px; color: var(--text-color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px;}
.feeds-list-item-description { font-size: 14px; color: var(--text-color-secondary); white-space: pre-wrap;}
.starter-pack-list-item { align-items: flex-start;}
.starter-pack-list-item-members { display: flex; align-items: center; margin-top: 8px;}
.starter-pack-list-item-member { width: 28px; height: 28px; margin-right: -6px;}
.starter-pack-list-item-member .avatar,.starter-pack-list-item-member .avatar-image-frame { display: block; width: 100%; height: 100%; /* border: 2px solid var(--background-color); */}
.starter-pack-list-item-skeleton-text { display: inline-block; width: 45%; border-radius: var(--skeleton-border-radius);}
.feeds-list-item-creator .starter-pack-list-item-skeleton-text { width: 30%;}
.starter-pack-list-item-member-skeleton { width: 100%; height: 100%; border-radius: 50%;}
.starter-pack-list-item-member-count { margin-left: 12px; font-size: 13px; font-weight: 600; color: var(--text-color-muted);}
.feeds-list-item-chevron { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--text-color-muted);}
.feeds-list-item-chevron app-icon { width: 32px; height: 32px;}
.feeds-list-item-chevron svg path { stroke-width: 1.2px;}
.feeds-list-item-drag-handle { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; color: var(--text-color-muted); cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none;}
.feeds-list-item-unpin-button { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: transparent; border: none; padding: 0; color: var(--highlight-color); cursor: pointer;}
.feeds-list-item-unpin-button app-icon { width: 20px; height: 20px;}
.feeds-list-item-drag-handle:active { cursor: grabbing;}
.feeds-list-item-drag-handle app-icon { width: 20px; height: 20px;}
.feeds-list-item.is-dragging { opacity: 0.85; z-index: 1; will-change: transform; background-color: var(--background-color); box-shadow: 0 4px 12px color-mix(in srgb, var(--text-color) 15%, transparent); user-select: none;}
.feeds-list-item.is-shifting { transition: transform 150ms ease;}
.following-avatar { width: 40px; height: 40px; border-radius: var(--list-avatar-border-radius); display: flex; align-items: center; justify-content: center; background-color: #0070ff; color: white;}
.following-avatar app-icon { width: 24px; height: 24px;}
.header-edit-button { padding: 8px;}
.header-edit-button app-icon { width: 24px; height: 24px;}
.header svg { display: block;}
.header-actions { display: flex; align-items: center; gap: 8px; margin-right: 8px; min-height: 40px;}
.feeds-list-item-actions { flex-shrink: 0; display: flex; align-items: center;}
#search-view .feeds-list-item-actions { align-self: flex-start;}
.context-menu-button { border: none; background: none; cursor: pointer; color: var(--text-color-muted); font-size: 18px; font-weight: 600; padding: 0 4px; position: relative; top: -2px; margin-right: 12px;}
.context-menu-button span { position: relative; top: -2px;}
#feed-detail-view .feed-detail-avatar-skeleton { display: inline-block;}
#feed-detail-view .feed-detail-header-skeleton-line { display: inline-block; vertical-align: middle;}
#feed-detail-view .pin-feed-button,#list-detail-view .pin-feed-button { width: 24px; height: 24px; border: none; background: none; cursor: pointer; color: var(--text-color-muted); font-size: 24px;}
#list-detail-view .pin-feed-button { margin-right: 8px;}
#feed-detail-view .pin-feed-button.pinned,#list-detail-view .pin-feed-button.pinned { color: var(--highlight-color);}
.list-detail-header { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 14px 12px;}
.list-detail-avatar { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0;}
.list-detail-header-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px;}
.list-detail-name { font-size: 22px; font-weight: 600; line-height: 1.2; word-wrap: break-word;}
.list-detail-creator { color: var(--text-color-muted); font-size: 14px; line-height: 1.3;}
.list-detail-creator a { color: inherit;}
.list-detail-description { padding: 0 12px 14px; font-size: 15px; line-height: 1.4; word-wrap: break-word;}
.list-detail-loading { display: flex; justify-content: center; padding: 32px 0;}
.starter-pack-detail-header { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; padding: 14px 12px;}
.starter-pack-detail-avatar { width: 48px; height: 48px; border-radius: 8px; flex-shrink: 0;}
.starter-pack-detail-header-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px;}
.starter-pack-detail-name { font-size: 22px; font-weight: 600; line-height: 1.2; word-wrap: break-word;}
.starter-pack-detail-creator { color: var(--text-color-muted); font-size: 14px; line-height: 1.3;}
.starter-pack-detail-creator a { color: inherit;}
.starter-pack-detail-action { display: flex; align-items: center; gap: 6px; flex-shrink: 0;}
.starter-pack-detail-action .loading-spinner { width: 16px; height: 16px;}
.starter-pack-detail-description { padding: 0 12px 14px; font-size: 15px; line-height: 1.4; word-wrap: break-word;}
.starter-pack-detail-sign-in { padding: 0 12px 14px;}
.starter-pack-detail-sign-in .rounded-button { display: inline-block; text-decoration: none;}
.starter-pack-detail-loading { display: flex; justify-content: center; padding: 32px 0;}
.list-empty-add-people-button { display: flex; align-items: center; gap: 6px; margin: 0 auto;}
.list-empty-add-people-button app-icon { width: 24px; height: 24px;}
.feeds-list-item .pin-feed-button app-icon { width: 16px; height: 16px;}
.feeds-list-item-skeleton { pointer-events: none; min-height: 75px;}
.feeds-list-item-skeleton-avatar { width: 30px; height: 30px; border-radius: var(--list-avatar-border-radius);}
.feeds-list-item-skeleton-title { height: 14px; width: 45%; border-radius: var(--skeleton-border-radius); margin-bottom: 6px; margin-top: 2px;}
.feeds-list-item-skeleton-creator { height: 12px; width: 30%; border-radius: var(--skeleton-border-radius);}
.composer-error-banner { display: flex; align-items: flex-start; gap: 8px; margin: 0 16px 16px; padding: 10px 12px; border-radius: var(--text-input-border-radius); background-color: var(--error-subtle-color);}
.composer-error-banner > app-icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--error-color);}
.composer-error-banner-message { flex: 1; font-size: 14px; line-height: 1.4;}
.composer-error-banner-dismiss { flex-shrink: 0; background: none; border: none; padding: 2px; cursor: pointer; border-radius: var(--icon-button-border-radius); color: var(--text-color-muted);}
.composer-error-banner-dismiss app-icon { width: 16px; height: 16px;}
@media (hover: hover) { .composer-error-banner-dismiss:hover { color: var(--text-color); }}
/* @chunk bottom-sheet */@keyframes fade-in { from { opacity: 0; } to { opacity: 1; }}
@keyframes slide-up { from { transform: translateY(100%); caret-color: transparent; } 99% { caret-color: transparent; } to { transform: translateY(0); caret-color: auto; }}
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; }}
@keyframes slide-down { from { transform: translateY(0); caret-color: transparent; } to { transform: translateY(100%); caret-color: transparent; }}
.bottom-sheet { border: var(--hair) solid var(--post-border-color); border-bottom: none; border-radius: var(--sheet-border-radius) var(--sheet-border-radius) 0 0; background-color: light-dark(var(--white), var(--mid-gray)); color: var(--text-color); max-width: 100%; width: 100%; position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; box-shadow: var(--shadow-color-heavy); animation: slide-up 0.3s cubic-bezier(0.32, 0.72, 0, 1); transform: none; margin: 0; overflow: hidden; padding: 0; padding-bottom: var(--safe-area-inset-bottom);
--secondary-button-color: light-dark(var(--lightest-gray), var(--light-gray)); --secondary-button-hover-color: light-dark( color-mix(in srgb, var(--lighter-gray) 80%, var(--text-color)), color-mix(in srgb, var(--light-gray) 80%, var(--white)) );}
/* Shared scroll region for a bottom sheet's flex-fill body: fills the space between a fixed header/footer and scrolls its own overflow. Requires a flex-column ancestor (the dialog or content wrapper) to give it height. */.sheet-scroll-region { flex: 1 1 auto; min-height: 0; overflow-y: auto;}
.bottom-sheet[data-closing] { pointer-events: none;}
/* Only mobile bottom sheets animate out; on desktop they close instantly. */@media (max-width: 799px) { .bottom-sheet[data-closing] { animation: slide-down 0.2s cubic-bezier(0.32, 0.72, 0, 1) forwards; }}
@media (min-width: 800px) { .bottom-sheet { padding-bottom: 0; width: 90%; top: 50%; left: 50%; right: auto; bottom: auto; height: auto; max-height: 90vh; border-bottom: var(--hair) solid var(--post-border-color); border-radius: var(--dialog-border-radius); box-shadow: none; animation: none; transform: translate(-50%, -50%); }}
.bottom-sheet::before { content: ""; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; background-color: var(--light-gray); border-radius: 2px;}
@media (min-width: 800px) { .bottom-sheet::before { display: none; }}
.bottom-sheet.no-handle::before { display: none;}
.bottom-sheet::backdrop { background-color: var(--overlay-color-medium); animation: fade-in 0.2s ease-out;}
.bottom-sheet[data-closing]::backdrop { animation: fade-out 0.15s ease-in forwards;}
@media (max-width: 799px) { .bottom-sheet::backdrop { animation-duration: 0.3s; }
.bottom-sheet[data-closing]::backdrop { animation-duration: 0.2s; }}
@media (prefers-reduced-motion: reduce) { .bottom-sheet { animation: none; }}
@media (max-width: 799px) { .bottom-sheet-fullscreen { top: var(--sheet-top); max-height: none; }}
@media (max-width: 799px) { .bottom-sheet-stacked { top: var(--stacked-sheet-top); max-height: none; }}
/* @chunk post-composer */.post-composer-embed-preview { position: relative;}
.post-composer-join-link-loading,.post-composer-join-link-error { border-radius: var(--embed-border-radius); border: var(--hair) solid var(--embed-border-color); padding: 24px 16px;}
.post-composer-join-link-loading { display: flex; align-items: center; justify-content: center; min-height: 96px;}
.post-composer-image-preview { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto;}
.post-composer-video-preview { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px;}
.post-composer-gif-preview { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px;}
.gif-preview-item { position: relative; width: 100%; max-width: 360px;}
.gif-preview-item .alt-indicator { pointer-events: auto; border: none; cursor: pointer; z-index: 1;}
.post-composer.bottom-sheet { padding-bottom: 0; overflow: visible; touch-action: pan-y; display: flex; flex-direction: column;}
@media (min-width: 800px) { .post-composer.bottom-sheet { max-width: 600px; max-height: calc(100dvh - 64px); touch-action: auto; overflow: hidden; }}
.post-composer-content { padding-top: 16px; padding-bottom: 0; display: flex; flex-direction: column; flex: 1; min-height: 0;}
.post-composer-scroll-area-content { padding: 0 16px;}
.post-composer-scroll-area { flex: 1; min-height: 0; overflow-y: auto;}
@media (min-width: 800px) { .post-composer-content { padding-top: 10px; padding-bottom: 0; }
.post-composer-scroll-area-content { padding: 0 10px; }}
.post-composer-drop-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; pointer-events: none; background: color-mix(in srgb, var(--highlight-color) 15%, transparent); border: 2px dashed var(--highlight-color);}
.post-composer-drop-overlay span { color: var(--text-color); font-size: 18px; font-weight: 600; padding: 12px 20px; border-radius: 8px; background-color: var(--background-color);}
.post-composer::backdrop { background-color: var(--overlay-color-medium); animation: fade-in 0.2s ease-out;}
.post-composer-top-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 0 16px;}
@media (min-width: 800px) { .post-composer-top-bar { padding: 0 10px; }}
.post-composer-drafts-button { margin-left: auto; margin-right: 8px;}
.post-composer-body { display: flex; gap: 13px; margin-top: 16px; margin-left: 12px;}
.post-composer .reply-to { margin-left: 12px;}
.post-composer-body-left { flex-shrink: 0;}
.post-composer-body-right { flex: 1; min-width: 0;}
.post-composer-bottom-bar { display: flex; flex-direction: column; align-items: stretch; flex-shrink: 0; margin-top: 16px; padding: 8px 0 calc(var(--safe-area-inset-bottom) + 8px); position: sticky; bottom: 0; background-color: light-dark(var(--white), var(--mid-gray));}
.post-composer-bottom-bar-main { display: flex; justify-content: space-between; align-items: center; padding-right: 16px; padding-left: 10px; position: relative; padding-top: 8px;}
.interaction-settings-section .pill-radio-group label,.interaction-settings-section .interaction-settings-row { min-height: 48px;}
.post-composer-interaction-settings-row { display: flex; padding-bottom: 8px; padding-right: 12px; padding-left: 12px;}
/* workaround for iOS Safari subpixel rounding */.post-composer-bottom-bar-main::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background-color: var(--post-border-color); transform: scaleY(0.5); transform-origin: top;}
.post-composer-bottom-bar-left { display: flex; align-items: center;}
.composer-interaction-settings-button app-icon { width: 15px; height: 15px;}
.post-composer-post { position: relative; transition: opacity 0.15s;}
.post-composer-post.is-inactive { opacity: 0.5;}
/* Threads stack several inputs, so each gets a shorter starting height */.post-composer-scroll-area-content:has( .post-composer-post + .post-composer-post ) .rich-text-input { min-height: 60px;}
.post-composer-remove-post-button { z-index: 1; position: absolute; right: 8px; top: 0; border-radius: var(--circular-button-border-radius); color: var(--text-color); border: none; background: none; width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center;}
.post-composer-remove-post-button app-icon { width: 16px; height: 16px;}
.post-composer-bottom-bar-right { display: flex; align-items: center;}
.post-composer-add-post-button { padding: 6px;}
@media (hover: hover) { .post-composer-add-post-button:not(:disabled):hover { background-color: var(--background-color-secondary); }}
.post-composer-add-post-button app-icon { width: 24px; height: 24px; color: var(--highlight-color);}
.post-composer-language-button { display: flex; align-items: center; padding: 6px 8px; margin-right: 4px; border: none; border-radius: 8px; background: none; color: var(--highlight-color); cursor: pointer;}
@media (hover: hover) { .post-composer-language-button:hover { background-color: var(--background-color-secondary); }}
.post-composer-language-button-label { max-width: 100px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: 500;}
.post-composer .rich-text-input { width: 100%; min-height: 140px; border: none; background: transparent; color: var(--text-color); font-size: 16px; font-family: inherit; resize: none; outline: none;}
.post-composer-emoji-wrapper { display: flex; align-items: center;}
.post-composer-emoji-button { padding: 6px; color: var(--highlight-color);}
@media (hover: hover) { .post-composer-emoji-button:not(:disabled):hover { background-color: var(--background-color-secondary); }}
.post-composer-emoji-button app-icon { width: 24px; height: 24px;}
/* @chunk composer-input */.rich-text-input { white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;}
.rich-text-input .facet { color: var(--text-link-color);}
.rich-text-input-placeholder { pointer-events: none; position: absolute; top: 0; left: 0; right: 0; bottom: 0; color: var(--text-color-muted); font-size: 16px; font-family: inherit; resize: none; outline: none;}
.rich-text-input-placeholder.hidden { display: none;}
.rich-text-input-container { position: relative;}
.image-picker-button { padding: 6px;}
@media (hover: hover) { .image-picker-button:not(:disabled):hover { background-color: var(--background-color-secondary); }}
.image-picker-button app-icon { width: 24px; height: 24px; color: var(--highlight-color);}
.post-composer-gif-button { padding: 6px;}
@media (hover: hover) { .post-composer-gif-button:not(:disabled):hover { background-color: var(--background-color-secondary); }}
.post-composer-gif-button app-icon { width: 24px; height: 24px; color: var(--highlight-color);}
.post-composer-gif-button:disabled app-icon,.image-picker-button:disabled app-icon { color: var(--text-color-muted);}
.word-count { display: flex; align-items: center; gap: 8px;}
.word-count-text { font-size: 13px; color: var(--text-color-muted); /* fixed width (fits "-999") so the layout doesn't shift while typing */ min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums;}
.word-count-indicator { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--highlight-color); position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;}
.word-count-indicator-bar { position: absolute; bottom: 0; left: 0; right: 0; background-color: var(--highlight-color);}
.word-count.overflow .word-count-indicator { border-color: var(--error-color);}
.word-count.overflow .word-count-indicator-bar { background-color: var(--error-color);}
.word-count.overflow .word-count-text { color: var(--error-color);}
.fab { display: flex; position: fixed; bottom: calc(70px + var(--safe-area-inset-bottom)); right: 20px; width: 60px; height: 60px; border-radius: var(--circular-button-border-radius); background-color: var(--primary-button-color); color: var(--primary-button-text-color); border: none; cursor: pointer; box-shadow: var(--shadow-color-light); z-index: var(--fab-z-index); align-items: center; justify-content: center; transition: transform 0.2s, box-shadow 0.2s;}
@media (hover: hover) { .fab:hover { transform: scale(1.05); box-shadow: var(--shadow-color-hover); }}
.fab:active { transform: scale(0.95);}
@media (min-width: 800px) { .fab { display: none; }}
.floating-compose-button app-icon { width: 24px; height: 24px;}
.load-latest-button { display: flex; position: fixed; bottom: calc(79px + var(--safe-area-inset-bottom)); left: 20px; width: 42px; height: 42px; padding: 0; border-radius: var(--circular-button-border-radius); background-color: var(--background-color); color: var(--text-color-muted); border: var(--hair) solid var(--post-border-color); box-shadow: var(--shadow-color-light); cursor: pointer; z-index: var(--fab-z-index); align-items: center; justify-content: center; transition: transform 0.2s;}
.load-latest-button.has-new { background-color: color-mix( in srgb, var(--highlight-color) 12%, var(--background-color) ); color: var(--highlight-color);}
@media (hover: hover) { .load-latest-button:hover { transform: scale(1.05); }}
.load-latest-button:active { transform: scale(0.95);}
.load-latest-button app-icon { width: 22px; height: 22px;}
@media (min-width: 800px) { .load-latest-button { bottom: 20px; left: calc(50vw - 300px + 16px); }}
.mention-typeahead-host,.mention-typeahead-host:popover-open { position: fixed; inset: unset; margin: 0; padding: 0; border: none; background: transparent; overflow: visible;}
.mention-typeahead { position: fixed; background: var(--context-menu-background-color); border: 1px solid var(--generic-border-color); border-radius: var(--typeahead-border-radius); overflow: hidden; box-shadow: var(--shadow-color-light); margin-top: 8px; max-height: 320px; overflow-y: auto; min-width: 240px; max-width: min(320px, calc(100vw - 24px)); z-index: var(--mention-typeahead-z-index);}
.mention-typeahead.mention-typeahead-above { margin-top: 0; margin-bottom: 8px;}
.mention-typeahead-empty { display: flex; align-items: center; /* Match the height of a suggestion row: its avatar plus the row padding (border-box, so the padding counts into min-height) */ min-height: calc(var(--avatar-size-post) + 20px); padding: 10px 18px; color: var(--text-color-muted); font-size: 14px;}
.profile-hover-card-anim { animation: fade-in 300ms both; will-change: transform, opacity; background: var(--context-menu-background-color); border: 1px solid var(--generic-border-color); border-radius: 12px; box-shadow: var(--shadow-color-light); overflow: hidden;}
@media (prefers-reduced-motion: reduce) { .profile-hover-card-anim { animation: none; }}
.profile-hover-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; color: var(--text-color);}
.profile-hover-card-loading { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 16px;}
.profile-hover-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;}
.profile-hover-card-avatar .avatar-image,.profile-hover-card-avatar .avatar-image-frame { width: 64px; height: 64px;}
.profile-hover-card-button-slot { display: flex; align-items: center;}
.profile-hover-card-name-link { color: inherit; text-decoration: none; display: flex; flex-direction: column; gap: 2px;}
.profile-hover-card-name { font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px;}
.profile-hover-card-handle-row { display: flex; align-items: center; gap: 6px; color: var(--text-color-muted); font-size: 14px;}
.profile-hover-card-handle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.profile-hover-card-stats { display: flex; gap: 12px; font-size: 14px; color: var(--text-color-muted);}
.profile-hover-card-stats .profile-stat { color: inherit; text-decoration: none;}
.profile-hover-card-stats .profile-stat strong { color: var(--text-color); font-weight: 700;}
.profile-hover-card-bio { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; line-height: 1.4;}
/* @chunk menus-modals */.mention-suggestion { display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer; transition: background-color 0.1s ease;}
.mention-suggestion.selected { background-color: var(--context-menu-item-hover-color);}
@media (hover: hover) { .mention-suggestion:hover { background-color: var(--context-menu-item-hover-color); }}
.mention-suggestion .avatar { flex-shrink: 0;}
.mention-suggestion-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1;}
.mention-suggestion-name { font-weight: 600; color: var(--text-color); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.mention-suggestion-handle { color: var(--text-color-muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.context-menu-container { position: relative;}
.context-menu-container.open { position: fixed; inset: 0;}
.context-menu { z-index: var(--context-menu-z-index); background-color: var(--background-color); padding: 16px 0 0; touch-action: pan-y; max-height: 90dvh; flex-direction: column;}
.context-menu[open] { display: flex;}
.context-menu-body { padding: 0 16px calc(var(--safe-area-inset-bottom) + 16px); overscroll-behavior: contain;}
.context-menu::backdrop { animation: fade-in 0.25s ease-out;}
.context-menu-label { font-size: 13px; font-weight: 500; color: var(--text-color-muted); white-space: nowrap; padding: 4px 0 8px;}
context-menu-item,context-menu-item-group { display: block; color: var(--text-color);}
context-menu-item { margin-bottom: 12px; white-space: nowrap;}
context-menu-item:last-child { margin-bottom: 0;}
context-menu-item > button { width: 100%; border: var(--hair) solid var(--post-border-color); background-color: light-dark(var(--off-white), var(--gray)); font-size: inherit; text-align: left; color: inherit; cursor: pointer; padding: 14px; border-radius: var(--context-menu-button-radius); display: flex; align-items: center; justify-content: space-between; gap: 16px;}
context-menu-item > button > app-icon,context-menu-item > button > .context-menu-item-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-color-muted);}
context-menu-item > button > .context-menu-item-icon { margin-left: 10px;}
context-menu-item > button > .context-menu-item-icon svg { width: 100%; height: 100%; display: block;}
context-menu-item > button > svg.context-menu-item-icon { display: block;}
context-menu-item > button.context-menu-item-style-danger { color: var(--error-color);}
context-menu-item > button.context-menu-item-style-danger > .context-menu-item-icon { color: var(--error-color);}
context-menu-item > a { padding: 14px 16px; width: 100%; color: inherit; display: inline-block; text-align: left;}
context-menu-item-group { border: var(--hair) solid var(--post-border-color); border-radius: var(--context-menu-item-group-border-radius); overflow: hidden; margin-bottom: 12px;}
context-menu-item-group:last-child { margin-bottom: 0;}
context-menu-item-group > context-menu-item { margin-bottom: 0;}
/* workaround for iOS Safari subpixel rounding */context-menu-item-group > context-menu-item:not(:last-child)::after { content: ""; display: block; width: 100%; height: 1px; background-color: var(--post-border-color); transform: scaleY(0.5); transform-origin: bottom;}
context-menu-item-group > context-menu-item > button { border: none; border-radius: 0;}
@media (hover: hover) { context-menu-item > a:hover, context-menu-item > button:not([disabled]):hover { background-color: var(--context-menu-item-hover-color); }}
@media (min-width: 800px) { .context-menu-container.open { position: relative; inset: auto; }
.context-menu { position: absolute; left: auto; right: auto; bottom: auto; top: auto; width: auto; max-width: none; max-height: none; transform: none; box-shadow: var(--shadow-color-sidebar); background-color: var(--context-menu-background-color); border-radius: var(--context-menu-border-radius); animation: none; padding: 4px; touch-action: auto; }
.context-menu-body { padding: 0; }
.context-menu::backdrop { background-color: transparent; animation: none; }
.context-menu-label { padding: 12px 14px 4px; font-size: inherit; font-weight: normal; }
context-menu-item { margin-bottom: 0; }
.context-menu-body > context-menu-item { padding: 4px 0; }
.context-menu-body > context-menu-item:first-child { padding-top: 0; }
.context-menu-body > context-menu-item:last-child { padding-bottom: 0; }
.context-menu-body > context-menu-item:not(:last-child) { border-bottom: var(--hair) solid var(--post-border-color); }
context-menu-item > button { background-color: transparent; padding: 10px 12px; border: none; font-size: 14px; }
context-menu-item-group > context-menu-item > button { border-radius: var(--context-menu-button-radius); }
context-menu-item-group { border: none; border-radius: 0; margin-bottom: 0; }
context-menu-item-group > context-menu-item:not(:last-child)::after { display: none; }
context-menu-item-group:not(:last-child) { border-bottom: var(--hair) solid var(--post-border-color); padding-bottom: 4px; }
context-menu-item-group:not(:first-child) { padding-top: 4px; }}
.plugin-modal { display: flex; flex-direction: column;}
.permission-prompt-intro { display: block; font-size: 15px; font-weight: 600; color: var(--text-color);}
.permission-prompt-sections { display: flex; flex-direction: column; gap: 8px; margin-top: 12px;}
.permission-prompt-section { border: 1px solid var(--generic-border-color); border-radius: 12px; background-color: var(--background-color-secondary); padding: 12px 14px;}
.permission-prompt-section-title { font-size: 13px; font-weight: 600; color: var(--text-color-muted);}
.permission-prompt-list { margin: 8px 0 0; padding-left: 20px; font-size: 13px; color: var(--text-color-secondary);}
.permission-prompt-list li + li { margin-top: 4px;}
.permission-prompt-list code { font-family: var(--monospace-font, monospace); background: var(--background-color); border: 1px solid var(--generic-border-color); color: var(--text-color); padding: 1px 5px; border-radius: 4px; word-break: break-all;}
.permission-prompt-baseline { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--generic-border-color);}
.permission-prompt-baseline summary { font-size: 13px; cursor: pointer; user-select: none; color: var(--text-color-muted);}
.permission-prompt-baseline .permission-prompt-section { margin-top: 8px;}
.fetch-permission-intro { margin: 0; font-size: 15px; color: var(--text-color-secondary);}
.fetch-permission-intro strong { color: var(--text-color);}
.fetch-permission-card { margin-top: 14px; padding: 0 14px; border: 1px solid var(--generic-border-color); border-radius: 12px; background-color: var(--background-color-secondary);}
.fetch-permission-origins { margin: 0; padding: 0; list-style: none;}
.permission-prompt-section .fetch-permission-origins { margin-top: 4px;}
.fetch-permission-origin { display: flex; align-items: center; gap: 10px; padding: 12px 0;}
.permission-prompt-section .fetch-permission-origin { padding: 8px 0;}
.permission-prompt-section .fetch-permission-origin:last-child { padding-bottom: 0;}
.fetch-permission-origin + .fetch-permission-origin { border-top: 1px solid var(--generic-border-color);}
.fetch-permission-origin-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; color: var(--highlight-color); background-color: color-mix(in srgb, var(--highlight-color) 12%, transparent);}
.fetch-permission-origin-text { display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.fetch-permission-origin-host { font-size: 13px; font-weight: 600; color: var(--text-color); overflow-wrap: anywhere;}
.fetch-permission-origin-text code { font-family: var(--monospace-font, monospace); font-size: 11px; color: var(--text-color-muted); overflow-wrap: anywhere;}
.fetch-permission-note { margin: 12px 0 0; font-size: 13px; color: var(--text-color-muted);}
/* Shared modal base styles */.modal-dialog { border: var(--hair) solid var(--post-border-color); border-radius: var(--dialog-border-radius); background-color: light-dark(var(--white), var(--mid-gray)); color: var(--text-color); padding: 0; max-width: 410px; width: 90%; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); margin: 0;}
.modal-dialog::backdrop { background-color: var(--overlay-color-medium); animation: fade-in 0.2s ease-out;}
.modal-dialog[data-closing] { pointer-events: none;}
.modal-dialog-title { font-size: 24px; font-weight: 600; margin-bottom: 12px;}
.plugin-modal .modal-dialog-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;}
.plugin-modal .modal-dialog-title > * { font-size: inherit; font-weight: inherit; margin: 0;}
.modal-dialog-title-large { font-size: 32px; text-align: center;}
.modal-dialog-content { padding: 24px;}
.modal-dialog-message { font-size: 14px; line-height: 1.5; margin-top: 1em; margin-bottom: 16px; color: var(--text-color);}
.alert-modal .modal-dialog-message { margin-bottom: 12px;}
.modal-dialog-message a { color: var(--text-link-color);}
@media (hover: hover) { .modal-dialog-message a:hover { text-decoration: underline; }}
.modal-dialog-button { padding: 12px 20px; border-radius: var(--pill-button-border-radius); border: none; font-size: 14px; line-height: 20px; cursor: pointer; transition: background-color 0.2s; text-decoration: none; display: inline-block; text-align: center; background-color: var(--secondary-button-color);}
@media (hover: hover) { .modal-dialog-button:hover { background-color: var(--secondary-button-hover-color); }}
.modal-dialog-button.primary-button { background-color: var(--primary-button-color); color: var(--primary-button-text-color);}
.modal-dialog-button.danger-button { background-color: var(--error-color); color: var(--primary-button-text-color);}
.modal-dialog-button.danger-subtle-button { background-color: var(--error-subtle-color); color: var(--error-color);}
@media (hover: hover) { .modal-dialog-button.danger-subtle-button:not(:disabled):hover { background-color: var(--error-subtle-hover-color); }}
@media (hover: hover) { .modal-dialog-button.primary-button:not(:disabled):hover { background-color: var(--primary-button-hover-color); }}
.modal-dialog-button.full-width { width: 100%;}
.modal-dialog-buttons { padding-top: 8px; display: flex; gap: 8px; justify-content: flex-end; flex-direction: column-reverse;}
.modal-dialog-button.is-pending { display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: default; opacity: 1;}
.modal-dialog-button .loading-spinner { width: 14px; height: 14px; border-width: 2px; border-left-color: transparent; border-right-color: transparent; border-bottom-color: transparent;}
.modal-dialog-button.primary-button .loading-spinner,.modal-dialog-button.danger-button .loading-spinner { border-top-color: var(--primary-button-text-color);}
.modal-dialog-button.danger-subtle-button .loading-spinner { border-top-color: var(--error-color);}
.modal-dialog-buttons-stacked { flex-direction: column;}
/* @chunk lightbox */@media (min-width: 800px) { .image-alt-text-dialog.bottom-sheet { max-width: 600px; max-height: none; }}
.image-alt-text-dialog { display: flex; flex-direction: column;}
.image-alt-text-dialog-content { padding: 20px; display: flex; flex-direction: column; gap: 16px; flex: 1 1 auto; min-height: 0;}
@media (min-width: 800px) { .image-alt-text-dialog-content { max-height: 80vh; }}
.image-alt-text-dialog-header { display: flex; justify-content: space-between; align-items: center;}
.image-alt-text-dialog-header h2 { margin: 0; font-size: 18px; font-weight: 600;}
.image-alt-text-dialog-body { display: flex; flex-direction: column; gap: 16px;}
.image-alt-text-dialog-image-container { width: 100%; max-height: 300px; border-radius: var(--image-preview-border-radius); overflow: hidden; border: var(--hair) solid var(--post-border-color); background-color: light-dark(var(--light-gray), var(--dark-gray)); display: flex; align-items: center; justify-content: center;}
.image-alt-text-dialog-image-container img { max-width: 100%; max-height: 300px; object-fit: contain;}
.image-alt-text-dialog-input-container { position: relative; display: flex; flex-direction: column; gap: 8px;}
.image-alt-text-dialog-textarea { width: 100%; min-height: 120px; padding: 12px; border: var(--hair) solid var(--post-border-color); border-radius: var(--text-input-border-radius); background-color: light-dark(var(--white), var(--mid-gray)); color: var(--text-color); font-family: inherit; font-size: 16px; resize: none; outline: none; transition: border-color 0.2s;}
.image-alt-text-dialog-footer .word-count-text { min-width: 32px; text-align: right;}
.image-alt-text-dialog-footer-buttons { display: flex; gap: 8px;}
.image-alt-text-dialog-footer-buttons .rounded-button { padding: 12px 20px;}
.image-alt-text-dialog-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px;}
.toast { position: fixed; display: flex; align-items: center; opacity: 0; touch-action: none; top: calc( env(safe-area-inset-top, 0px) + 8px + var(--toast-stack-offset, 0px) ); left: 8px; right: 8px; width: auto; margin: 0; background: light-dark(var(--white), var(--mid-gray)); border: var(--hair) solid var(--post-border-color); color: var(--text-color-muted); padding: 12px 16px; border-radius: var(--toast-border-radius); box-shadow: 0 1px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); transform: translateY(-150%); transition: top 0.3s linear, transform 0.3s linear, opacity 0.3s linear; z-index: var(--toast-z-index);}
.toast.active { transform: translateY(0); opacity: 1;}
.toast.success { background: light-dark( color-mix(in srgb, var(--highlight-color) 8%, var(--white)), color-mix(in srgb, var(--highlight-color) 8%, var(--mid-gray)) ); border-color: var(--highlight-color); color: var(--highlight-color);}
.toast.error { background: light-dark( color-mix(in srgb, var(--error-color) 12%, var(--white)), color-mix(in srgb, var(--error-color) 12%, var(--mid-gray)) ); border-color: var(--error-color); color: var(--error-color);}
.toast.warning { background: light-dark( color-mix(in srgb, var(--warning-color) 12%, var(--white)), color-mix(in srgb, var(--warning-color) 12%, var(--mid-gray)) ); border-color: var(--warning-color); color: var(--warning-color);}
.toast.warning .toast-icon { color: var(--warning-color);}
@media (min-width: 800px) { .toast { width: fit-content; padding-right: 20px; top: auto; left: 16px; right: auto; bottom: var(--toast-stack-offset, 0px); transform: translateY(150%); transition: bottom 0.3s linear, transform 0.3s linear, opacity 0.3s linear; }
.toast.active { transform: translateY(-16px); }}
.toast-icon { display: inline-block; width: 21px; height: 21px; margin-right: 8px;}
.toast-with-link { display: flex; align-items: center; gap: 6px;}
.toast-with-link a { color: inherit; text-decoration: underline; font-weight: 500; display: inline-block; margin-left: 2px;}
.lightbox { border: none; padding: 0; margin: 0; color: inherit; position: fixed; top: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none; background-color: var(--overlay-color-darkest); display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: var(--lightbox-z-index);}
.lightbox img { max-width: 90%; max-height: 90%; height: auto; width: auto; object-fit: contain; display: block; box-shadow: var(--shadow-color-lightbox); touch-action: none; will-change: transform;}
.lightbox img.lightbox-image-circle { border-radius: 50%; aspect-ratio: 1 / 1; object-fit: cover;}
.lightbox-alt-text { color: var(--off-white); font-size: 14px; padding: 1em; max-height: 20vh; overflow-y: auto;}
.lightbox-close { position: absolute; top: 20px; right: 20px; color: var(--overlay-text-color); cursor: pointer; background: var(--overlay-color); width: 40px; height: 40px; border-radius: var(--icon-button-border-radius); display: flex; align-items: center; justify-content: center; z-index: var(--lightbox-close-z-index);}
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); color: var(--overlay-text-color); background: var(--overlay-color); border: none; width: 40px; height: 40px; border-radius: var(--icon-button-border-radius); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: var(--lightbox-close-z-index); transition: background 0.2s ease;}
@media (hover: hover) { .lightbox-nav:hover:not(:disabled) { background: var(--overlay-color-heavy); }}
.lightbox-nav-prev { left: 20px;}
.lightbox-nav-next { right: 20px;}
.lightbox-nav app-icon { width: 24px; height: 24px; color: var(--white);}
/* @chunk settings */.settings-section { padding: 16px; border-bottom: var(--hair) solid var(--post-border-color); position: relative;}
.settings-section h2 { font-size: 16px; font-weight: 500; color: var(--text-color); margin-bottom: 8px;}
.settings-section p { font-size: 12px; color: var(--text-color-muted); margin-bottom: 16px;}
.settings-section p a { color: var(--text-link-color);}
.settings-color-picker { display: flex; flex-direction: column; align-items: center; overflow: hidden; flex-shrink: 0;}
.settings-color-picker-reset { font-size: 12px; color: var(--text-color-muted); margin-top: 6px; cursor: pointer; border: none; background: none;}
.settings-footer-links { padding-top: 12px; display: flex; flex-direction: row; justify-content: center; gap: 8px;}
.settings-footer-links a { font-size: 14px; color: var(--text-link-color); background: none; border: none; padding: 0; cursor: pointer;}
.settings-footer-separator { color: var(--text-color-muted); font-size: 14px;}
.muted-word-form { padding: 16px; border-bottom: var(--hair) solid var(--post-border-color);}
.muted-word-form h2 { font-size: 16px; font-weight: 600; color: var(--text-color); margin-bottom: 8px;}
.muted-word-form p { font-size: 13px; color: var(--text-color-muted); line-height: 1.4; margin-bottom: 16px;}
.muted-word-input { width: 100%; padding: 10px 12px; border-radius: var(--text-input-border-radius); border: var(--hair) solid var(--post-border-color); background: var(--text-input-background-color); color: var(--text-color); font-size: 16px; box-sizing: border-box; margin-bottom: 12px;}
.field-caption { font-size: 13px; font-weight: 600; color: var(--text-color-muted); margin-bottom: 6px;}
.pill-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;}
.pill-radio-group label { flex: 1; display: flex; align-items: center; gap: 8px; padding: 12px 12px; border-radius: var(--card-border-radius); background: var(--post-hover-color); cursor: pointer; font-size: 14px; color: var(--text-color); transition: background-color 0.15s; font-weight: 500;}
.pill-radio-group label:has(input:checked) { background: color-mix(in srgb, var(--highlight-color) 15%, transparent);}
.pill-radio-group input[type="radio"] { accent-color: var(--highlight-color); background-color: transparent; margin: 0;}
.checkbox-row { display: flex; align-items: center; gap: 8px; padding: 12px 12px; border-radius: var(--card-border-radius); background: var(--post-hover-color); cursor: pointer; font-size: 14px; color: var(--text-color); margin-bottom: 12px; font-weight: 500;}
.bottom-sheet .checkbox-row,.bottom-sheet .pill-radio-group label,.bottom-sheet .interaction-settings-quote-row { background: var(--secondary-button-color);}
.checkbox-row:has(input:checked) { background: color-mix(in srgb, var(--highlight-color) 15%, transparent);}
.checkbox-row input[type="checkbox"] { accent-color: var(--highlight-color); background-color: transparent; margin: 0;}
.settings-button { gap: 6px; width: 100%; padding: 10px; font-size: 15px;}
.settings-button app-icon[icon="plus-line"] { width: 14px; height: 14px;}
.settings-button .loading-spinner { border-color: color-mix( in srgb, var(--primary-button-text-color) 30%, transparent ); border-top-color: var(--primary-button-text-color);}
.muted-word-delete-button .loading-spinner { width: 14px; height: 14px; border-width: 2px;}
.muted-word-error { margin-top: 8px; padding: 10px 12px; border-radius: var(--card-border-radius); background: var(--error-color, #ef4444); color: white; font-size: 13px; font-style: italic;}
.muted-word-list-header { font-size: 16px; font-weight: 600; color: var(--text-color); padding: 16px 16px 12px;}
.muted-word-list { display: flex; flex-direction: column;}
.muted-word-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px;}
.muted-word-item:nth-child(odd) { background: var(--post-hover-color);}
.muted-word-item-info { flex: 1; min-width: 0;}
.muted-word-item-value { font-size: 14px; font-weight: 600; color: var(--text-color); line-height: 1.4; overflow-wrap: break-word; word-break: break-word;}
.muted-word-item-target { font-weight: 400; color: var(--text-color-muted);}
.muted-word-item-meta { font-size: 12px; color: var(--text-color-muted); line-height: 1.4; margin-top: 2px;}
.muted-word-item-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0;}
.muted-word-renew-button { padding: 4px 12px; border-radius: var(--pill-button-border-radius); border: var(--hair) solid var(--post-border-color); background: none; color: var(--text-link-color); cursor: pointer; font-size: 12px; font-weight: 600; line-height: 1.4;}
.muted-word-delete-button { flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--circular-button-border-radius); border: var(--hair) solid var(--post-border-color); background: none; color: var(--text-color-muted); cursor: pointer; display: flex; align-items: center; justify-content: center;}
.muted-word-delete-button app-icon { width: 16px; height: 16px;}
.muted-word-delete-button span { position: relative; top: -1px;}
.muted-word-empty { padding: 12px 16px; margin: 0 16px 16px; border-radius: var(--card-border-radius); background: var(--post-hover-color); color: var(--text-color); font-style: italic; font-size: 14px;}
.blocked-account-description,.muted-account-description { padding: 16px 16px 16px; margin: 0; font-size: 14px; color: var(--text-color-secondary); border-bottom: var(--hair) solid var(--post-border-color);}
.vertical-nav { display: flex; flex-direction: column;}
.vertical-nav-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; text-decoration: none; transition: background-color 0.2s; cursor: pointer; background: none; border: none; width: 100%; text-align: left; font: inherit;}
.vertical-nav-item:not(.danger-button) { color: inherit;}
.vertical-nav hr { margin: 0;}
.vertical-nav-item.active { pointer-events: none; cursor: default;}
@media (hover: hover) { .vertical-nav-item:hover { background: var(--post-hover-color); }}
.vertical-nav-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.vertical-nav-icon app-icon { width: 26px; height: 26px; color: var(--text-color);}
.vertical-nav-label { flex: 1;}
.vertical-nav-arrow app-icon { width: 20px; height: 20px; color: var(--text-color-muted);}
.settings-account-avatar-stack { display: flex; flex-direction: row-reverse; align-items: center; flex-shrink: 0;}
.settings-account-avatar-stack .avatar { width: 24px; height: 24px; margin-left: -8px;}
.settings-account-avatar-stack .avatar .avatar-image-frame { width: 24px; height: 24px; border: 2px solid var(--background-color); border-radius: var(--avatar-border-radius); overflow: hidden;}
.settings-account-avatar-stack .avatar .avatar-image { width: 100%; height: 100%; object-fit: cover;}
.settings-account-row .vertical-nav-icon .avatar { width: 26px; height: 26px;}
.settings-account-row .vertical-nav-icon .avatar .avatar-image-frame { width: 26px; height: 26px; border: none;}
/* Keep the inline context-menu host out of flex layout so it doesn't add a `gap` between the ellipsis trigger and the right edge of the row. */.settings-account-row > context-menu { position: absolute;}
.settings-account-ellipsis { background: none; border: none; cursor: pointer; color: var(--text-color-muted); width: 20px; height: 20px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 18px; line-height: 1; flex-shrink: 0;}
.settings-account-ellipsis app-icon { width: 16px; height: 16px;}
.account-spinner { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
@media (min-width: 800px) { .account-switcher-dialog { max-width: 410px; }}
/* @chunk drafts */@media (min-width: 800px) { .drafts-dialog { max-width: 500px; }}
.drafts-dialog-content { padding: 16px; display: flex; flex-direction: column; min-height: 0;}
.drafts-dialog-header { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: 12px;}
.drafts-dialog-title { font-size: 18px; font-weight: 600; margin: 0;}
.drafts-dialog-back { position: absolute; left: 0;}
.drafts-dialog-list { overflow-y: auto; min-height: 120px; max-height: 60vh;}
.drafts-dialog-message { display: flex; justify-content: center; padding: 32px 0; color: var(--text-color-muted); font-size: 15px;}
.draft-item { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border: var(--hair) solid var(--post-border-color); border-radius: 12px; cursor: pointer;}
.draft-item:not(:first-child) { margin-top: 8px;}
@media (hover: hover) { .draft-item:hover { background-color: var(--secondary-background-color); }}
.draft-item-main { flex: 1; min-width: 0;}
.draft-item-text { font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 8; line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;}
.draft-item-media { display: flex; gap: 6px; margin-top: 8px;}
.draft-item-thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; border: var(--hair) solid var(--post-border-color);}
.draft-item-video-placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-color-muted); background-color: var(--secondary-background-color);}
.draft-item-video-placeholder app-icon { width: 24px; height: 24px;}
.draft-item-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 8px;}
.draft-item-tag { font-size: 12px; padding: 2px 8px; border-radius: 999px; background-color: var(--secondary-background-color); color: var(--text-color-muted);}
.draft-item-tag-warning { background-color: color-mix(in srgb, var(--error-color) 15%, transparent); color: var(--error-color);}
.draft-item-side { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; align-self: stretch; gap: 6px;}
.draft-item-timestamp { font-size: 12px; color: var(--text-color-muted); margin-bottom: 4px;}
.draft-item-delete app-icon { width: 18px; height: 18px;}
/* @chunk views-misc */.account-switcher-content { padding: 16px; /* Extra top padding leaves room for the sheet drag handle on mobile */ padding-top: 20px;}
@media (min-width: 800px) { .account-switcher-content { padding-top: 16px; }}
.account-switcher-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;}
.account-switcher-title { font-size: 18px; font-weight: 600; margin: 0;}
.account-switcher-list { display: flex; flex-direction: column; border: var(--hair) solid var(--post-border-color); border-radius: 12px; overflow: hidden;}
.account-switcher-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; background: none; border: none; text-align: left; font-size: 15px; color: var(--text-color); cursor: pointer;}
.account-switcher-item:not(:first-child) { border-top: var(--hair) solid var(--post-border-color);}
@media (hover: hover) { .account-switcher-item:hover { background-color: var(--post-hover-color); }}
.account-switcher-item.is-pending { opacity: 1;}
@media (min-width: 800px) { .account-switcher-item.is-pending { background-color: var(--post-hover-color); }}
.account-switcher-avatar { flex-shrink: 0; display: flex;}
.account-switcher-item .avatar,.account-switcher-item .skeleton-avatar { width: 40px; height: 40px;}
.account-switcher-add-icon { width: 40px; height: 40px; align-items: center; justify-content: center; color: var(--text-color-muted);}
.account-switcher-names { display: flex; flex-direction: column; min-width: 0; flex-grow: 1; gap: 1px;}
.account-switcher-names.account-switcher-names-skeleton { gap: 6px; justify-content: center;}
.account-switcher-display-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.account-switcher-handle { font-size: 14px; color: var(--text-color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.account-switcher-reauth-hint { display: block; font-size: 13px; font-weight: 400; color: var(--highlight-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.account-switcher-current-check { color: var(--highlight-color); flex-shrink: 0;}
.account-switcher-chevron { color: var(--text-color-muted); flex-shrink: 0;}
.account-switcher-chevron app-icon { width: 24px; height: 24px;}
moderation-warning { width: 100%;}
moderation-warning .top-bar { display: flex; flex-direction: row; justify-content: space-between; gap: 8px; border-radius: var(--moderation-warning-border-radius); padding-left: 16px; padding-right: 16px; padding-top: 12px; padding-bottom: 12px; color: var(--text-color-muted); font-size: 13px; font-weight: 500; background: light-dark(var(--lightest-gray), var(--gray)); cursor: pointer;}
.post-muted-warning .top-bar { margin-top: 8px;}
.post-moderation-warning .top-bar { margin-top: 8px;}
.post-moderation-warning-description { font-size: 14px; color: var(--text-color-muted); line-height: 1.5;}
.post-moderation-warning-description a { color: var(--text-link-color);}/* .post-content-warning .post-moderation-warning-description { margin-bottom: 8px;} */
.quoted-account-muted-warning .top-bar { margin-top: 8px; margin-bottom: 8px;}
moderation-warning .show-hide-label { color: var(--text-color);}
moderation-warning .moderation-warning-label { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0;}
moderation-warning .moderation-warning-label app-icon { width: 18px; height: 18px; flex-shrink: 0;}
@media (hover: hover) { moderation-warning .top-bar:hover { background: light-dark(var(--lighter-gray), var(--mid-gray)); }}
moderation-warning .toggle-content { margin-top: 8px;}
#login-view main { margin: 0; max-width: none; display: flex; flex-direction: row; height: 100dvh;}
#login-view h1 { font-size: 55px; font-weight: 800; color: var(--highlight-color);}
#login-view .column-left { flex: 3; display: none; flex-direction: column; align-items: flex-end; justify-content: center; background: var(--background-color-secondary); padding: 0 32px;}
#login-view h2 small { font-size: 18px;}
#login-view h2 { padding-bottom: 2em;}
@media (min-width: 800px) { #login-view .column-left { display: flex; }}
#login-view .column-right { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;}
@media (min-width: 800px) { #login-view .column-right { flex: 7; justify-content: center; }}
#login-form[hidden] { display: none;}
#login-form { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 8px; width: 100%; padding: 24px 16px;}
#login-view .saved-accounts-section { width: 100%; padding: 24px 16px 0; display: flex; flex-direction: column; gap: 12px; max-width: 600px;}
#login-view .saved-accounts-heading { color: var(--text-color-secondary); font-size: 14px; font-weight: 400; margin: 0; padding-bottom: 0;}
#login-form input { font-size: 16px;}
@media (min-width: 800px) { #login-form { padding: 24px 32px; max-width: 500px; }}
.select-wrapper { position: relative; width: 100%;}
.select-wrapper::after { content: ""; position: absolute; right: 14px; top: 50%; width: 12px; height: 8px; transform: translateY(-50%); pointer-events: none; background-color: var(--text-color-muted); -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;}
.select-wrapper select { font-size: 16px; width: 100%; padding: 12px 40px 12px 12px; border-radius: var(--text-input-border-radius); border: var(--hair) solid var(--post-border-color); background-color: var(--text-input-background-color); color: var(--text-color); appearance: none; -webkit-appearance: none; cursor: pointer;}
@media (hover: hover) { .select-wrapper select:hover { border-color: var(--text-color-muted); }}
#settings-advanced-form input { font-size: 16px;}
.settings-section .form-group { margin-top: 8px;}
.settings-section .button-group { margin-top: 16px;}
.settings-section button { flex: 1;}
#login-advanced { width: 100%; padding: 4px 0;}
#login-advanced summary { font-size: 14px; cursor: pointer; user-select: none; color: var(--text-color-muted);}#login-advanced summary::marker { margin-right: 2px;}
#login-advanced .form-group { margin-top: 8px;}
.warning-area { margin-top: 12px; padding: 12px; background-color: color-mix(in srgb, var(--warning-color) 12%, transparent); color: color-mix(in srgb, var(--warning-color) 60%, var(--text-color)); font-size: 14px; line-height: 1.5; border-radius: var(--text-input-border-radius);}.warning-area h4 { color: var(--warning-color);}
.warning-area h4 { display: flex; align-items: center; gap: 6px;}
.warning-area h4 app-icon { width: 18px; height: 18px;}
.warning-area .button-group { margin-top: 12px;}
@media (min-width: 800px) { #login-form .form-title { display: none; }}
.form-title { width: 100%; text-align: left; font-size: 20px; font-weight: 600; margin-bottom: 4px;}
.error-message { padding: 12px; color: var(--error-color); font-size: 14px;}
#login-view .error-message-container { height: 2em;}
.empty-state { color: var(--text-color-muted); padding: 32px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; line-height: 1.5;}
.empty-state h3 { color: var(--text-color); margin-bottom: 4px;}
.empty-state-icon { width: 64px; height: 64px; margin-bottom: 12px; opacity: 0.3;}
.empty-state-icon > app-icon { width: 100%; height: 100%; color: var(--text-color-muted);}
.error-state { color: var(--text-color-muted); padding-top: 2em; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.5;}
.error-state h3 { color: var(--text-color); margin-bottom: 4px;}
.error-state button,.error-state a.rounded-button { margin-top: 16px;}
.error-state a { color: var(--text-link-color);}
.try-again-button app-icon { width: 18px; height: 18px;}
#profile-view .error-state { min-height: 30vh;}
.boot-state-layer { position: fixed; inset: 0; z-index: 9999; background: var(--background-color);}
.app-error-state { min-height: 100dvh; justify-content: center; padding: 16px;}
.app-error-state[hidden] { display: none;}
.app-loading-state-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100dvh;}
.app-loading-state-content .loading-spinner { width: 32px; height: 32px; border-width: 3px; border-top-color: var(--highlight-color);}
.version-info { margin-top: 20px; color: var(--text-color-muted); font-size: 12px; text-align: center;}
.dev-version-overlay { position: fixed; bottom: 4px; right: 4px; z-index: 9999; padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 10px; font-family: monospace; pointer-events: none;}
.plain-text-page { padding: 16px;}
.plain-text-page h1 { margin-top: 0.5em; margin-bottom: 0.5em;}
.plain-text-page p { margin-bottom: 1em;}
.plain-text-page a { color: var(--text-link-color);}
.labeler-settings-container { padding: 16px; padding-bottom: 80px;}
.labeler-settings-header { color: var(--text-color-muted); font-size: 14px; line-height: 1.5; margin-bottom: 16px;}
.labeler-settings-header p { margin-bottom: 12px;}
.labeler-settings-header p:last-child { margin-bottom: 0;}
.label-preference-list { background-color: var(--background-color-secondary);}
.label-preference-row { padding: 16px; border-bottom: var(--hair) solid var(--generic-border-color);}
.label-preference-row:last-child { border-bottom: none;}
.label-preference-name { font-weight: 600; margin-bottom: 4px;}
.label-preference-description { color: var(--text-color-muted); font-size: 14px; line-height: 1.4;}
.label-preference-disabled-note { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: var(--text-color-muted); font-size: 14px; font-style: italic;}
.label-preference-name + .label-preference-buttons { margin-top: 8px;}
.label-preference-buttons { display: flex; border-radius: var(--embed-border-radius); overflow: hidden; border: var(--hair) solid var(--generic-border-color); margin-top: 12px;}
.label-pref-button { flex: 1; padding: 10px 12px; font-size: 14px; border: none; border-right: var(--hair) solid var(--generic-border-color); background-color: var(--background-color); cursor: pointer; transition: all 0.15s;}
.label-pref-button:last-child { border-right: none;}
@media (hover: hover) { .label-pref-button:hover:not(:disabled):not(.active) { background: var(--post-hover-color); }}
.label-pref-button.active { background: var(--primary-button-color); color: var(--primary-button-text-color);}
.label-pref-button:disabled { cursor: not-allowed;}
@media (min-width: 800px) { .report-dialog { max-width: 480px; top: 50%; max-height: calc(100dvh - var(--sheet-top)); }}
.report-dialog-content { display: flex; flex-direction: column; height: 100%; max-height: calc(100dvh - 16px); padding-top: 16px;}
@media (min-width: 800px) { .report-dialog-content { padding-top: 0; max-height: 80vh; }}
.report-dialog-close { padding: 0; width: 32px; height: 32px; justify-content: center; border-radius: var(--icon-button-border-radius); opacity: 1;}
.report-dialog-body { padding: 16px 20px; overflow-y: auto; flex: 1;}
.report-step { margin-bottom: 16px;}
.report-step:last-child { margin-bottom: 0;}
.report-step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px;}
.report-step-indicator { width: 28px; height: 28px; border-radius: 50%; background-color: light-dark(var(--lighter-gray), var(--dark-gray)); color: var(--text-color-secondary); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0;}
.report-step-indicator.active,.report-step-indicator.completed { background-color: var(--highlight-color); color: var(--white);}
.report-step-indicator app-icon { width: 16px; height: 16px;}
.report-step-title { font-size: 15px; font-weight: 500; color: var(--text-color-secondary);}
.report-step-title.active { color: var(--text-color); font-weight: 600;}
.report-step-content { margin-left: 40px;}
.report-options { display: flex; flex-direction: column; gap: 8px;}
.report-option-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; border: var(--hair) solid var(--post-border-color); border-radius: var(--card-border-radius); background-color: transparent; cursor: pointer; transition: background-color 0.15s; text-align: left; width: 100%;}
@media (hover: hover) { .report-option-card:hover { background-color: light-dark(var(--lightest-gray), var(--dark-gray)); }}
.report-option-title { font-size: 15px; font-weight: 500; color: var(--text-color);}
.report-option-description { font-size: 13px; color: var(--text-color-secondary);}
.report-labeler-card { flex-direction: row; align-items: center; gap: 12px;}
.report-labeler-avatar { flex-shrink: 0;}
.report-labeler-info { display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.report-labeler-info .report-option-title,.report-labeler-info .report-option-description { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.report-selected-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background-color: light-dark(var(--lightest-gray), var(--dark-gray)); border-radius: var(--report-selected-item-border-radius);}
.report-selected-title { font-size: 14px; font-weight: 500; color: var(--text-color);}
.report-selected-clear { background: none; border: none; cursor: pointer; color: var(--text-color-secondary); padding: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: var(--icon-button-border-radius);}
.report-selected-clear app-icon { width: 16px; height: 16px;}
.report-submit-section { display: flex; flex-direction: column; gap: 16px;}
.report-submit-info { font-size: 14px; color: var(--text-color); margin: 0;}
.report-submit-info strong { font-weight: 600;}
.report-details-section { display: flex; flex-direction: column; gap: 8px;}
.report-details-section label { font-size: 14px; font-weight: 500; color: var(--text-color);}
.report-details-input { width: 100%; min-height: 80px; padding: 12px; border: var(--hair) solid var(--post-border-color); border-radius: var(--text-input-border-radius); background-color: light-dark(var(--white), var(--mid-gray)); color: var(--text-color); font-family: inherit; font-size: 16px; resize: none; outline: none; transition: border-color 0.2s;}
.report-details-counter { font-size: 12px; color: var(--text-color-secondary); text-align: right;}
.report-error { font-size: 14px; color: var(--error-color); padding: 8px 12px; border-radius: var(--card-border-radius);}
.report-submit-button { width: 100%; padding: 12px 20px;}
.report-submit-button:disabled { cursor: not-allowed;}
.report-no-labelers { font-size: 14px; color: var(--text-color-secondary); padding: 12px 0;}
.report-no-labelers { text-align: center;}
/* Toggle Switch */
toggle-switch { display: inline-block;}
label:has(toggle-switch) { cursor: pointer;}
label:has(toggle-switch[disabled]) { cursor: not-allowed;}
.toggle-switch-track { width: 44px; height: 26px; border-radius: var(--pill-button-border-radius); background-color: light-dark(var(--lighter-gray), var(--light-gray)); position: relative; cursor: pointer; transition: background-color 0.2s ease;}
.toggle-switch-track.checked { background-color: var(--highlight-color);}
.toggle-switch-track.disabled { opacity: 0.4; cursor: not-allowed;}
.toggle-switch-knob { width: 22px; height: 22px; border-radius: 50%; background-color: var(--white); position: absolute; top: 2px; left: 2px; transition: transform 0.2s ease; box-shadow: var(--shadow-color-subtle);}
.toggle-switch-track.checked .toggle-switch-knob { transform: translateX(18px);}
/* Post Notifications Dialog */
.post-notifications-dialog::before { z-index: 1;}
@media (min-width: 800px) { .post-notifications-dialog { max-width: 400px; }}
.post-notifications-dialog-content { padding: 24px 20px; padding-top: 28px; position: relative;}
@media (min-width: 800px) { .post-notifications-dialog-content { padding-top: 24px; }}
.post-notifications-dialog-body { display: flex; flex-direction: column; gap: 20px;}
.post-notifications-dialog-header { display: flex; flex-direction: column; gap: 4px;}
.post-notifications-dialog-title { font-size: 1.3rem; font-weight: 700; margin: 0;}
.post-notifications-dialog-subtitle { margin: 0; color: var(--text-color-secondary); font-size: 0.95rem;}
.post-notifications-dialog-options { display: flex; flex-direction: column; gap: 12px;}
.post-notifications-dialog-option { display: flex; align-items: center; justify-content: space-between; padding: 4px 0;}
.post-notifications-dialog-option-label { font-size: 1rem;}
.post-notifications-dialog-error { color: var(--error-color); font-size: 0.9rem;}
.post-notifications-dialog-save { width: 100%; padding: 12px 20px; text-align: center;}
.post-notifications-dialog-save:disabled { cursor: not-allowed;}
.add-to-lists-dialog::before { z-index: 1;}
@media (min-width: 800px) { .add-to-lists-dialog { max-width: 480px; }}
.add-to-lists-dialog-content { padding: 24px 20px; padding-top: 28px; position: relative;}
@media (min-width: 800px) { .add-to-lists-dialog-content { padding-top: 24px; }}
.add-to-lists-dialog-body { display: flex; flex-direction: column; gap: 20px;}
.add-to-lists-dialog-header { display: flex; flex-direction: column; gap: 4px;}
.add-to-lists-dialog-title { font-size: 1.3rem; font-weight: 700; margin: 0;}
.add-to-lists-dialog-subtitle { margin: 0; color: var(--text-color-secondary); font-size: 0.95rem;}
.add-to-lists-dialog-rows { max-height: 60vh; overflow-y: auto;}
.add-to-lists-dialog-rows .infinite-scroll-container { display: flex; flex-direction: column;}
.add-to-lists-row .add-to-lists-toggle { flex-shrink: 0; min-width: 80px; margin-left: 12px;}
.add-to-lists-toggle:disabled { cursor: not-allowed;}
.add-to-lists-dialog-empty,.add-to-lists-dialog-error { color: var(--text-color-secondary); text-align: center; padding: 20px 0;}
.add-to-lists-dialog-error { color: var(--error-color);}
.add-to-lists-dialog-loading { display: flex; justify-content: center; align-items: center; height: 60vh;}
.add-to-lists-dialog-loading .loading-spinner { height: 24px; width: 24px;}
.add-to-lists-dialog-loading-more { display: flex; justify-content: center; padding: 12px 0;}
.add-to-lists-dialog-loading-more .loading-spinner { height: 20px; width: 20px;}
/* Post Language Dialog */
.post-language-dialog::before { z-index: 1;}
.post-language-dialog[open] { display: flex; flex-direction: column;}
@media (min-width: 800px) { .post-language-dialog { max-width: 440px; height: min(640px, 85dvh); }}
.post-language-dialog-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding-top: 28px;}
@media (min-width: 800px) { .post-language-dialog-content { padding-top: 24px; }}
.post-language-dialog-header { display: flex; flex-direction: column; gap: 4px; padding: 0 20px 12px;}
.post-language-dialog-title { font-size: 1.3rem; font-weight: 700; margin: 0;}
.post-language-dialog-subtitle { margin: 0 0 8px; color: var(--text-color-secondary); font-size: 0.95rem;}
.post-language-dialog-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px;}
.post-language-section-title { font-size: 0.95rem; font-weight: 600; margin: 8px 0;}
.post-language-row { margin-bottom: 8px;}
.post-language-row-disabled { opacity: 0.5; cursor: not-allowed;}
.post-language-dialog-footer { display: flex; flex-direction: column; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: var(--hair) solid var(--post-border-color);}
/* Post Interaction Settings Dialog */
.post-interaction-settings-dialog::before { z-index: 1;}
.post-interaction-settings-dialog[open] { display: flex; flex-direction: column;}
@media (max-width: 799px) { .post-interaction-settings-dialog { max-height: calc(100dvh - var(--sheet-top)); }}
@media (min-width: 800px) { .post-interaction-settings-dialog { max-width: 440px; }}
.post-interaction-settings-dialog-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 24px 20px; padding-top: 28px; position: relative;}
@media (min-width: 800px) { .post-interaction-settings-dialog-content { padding-top: 24px; }}
.post-interaction-settings-dialog-body { display: flex; flex-direction: column;}
.post-interaction-settings-dialog-body > * + * { margin-top: 16px;}
.post-interaction-settings-dialog-header { display: flex; flex-direction: column; gap: 4px;}
.post-interaction-settings-dialog-title { font-size: 1.3rem; font-weight: 700; margin: 0;}
.post-interaction-settings-dialog-subtitle { margin: 0; color: var(--text-color-secondary); font-size: 0.95rem;}
.interaction-settings-section-title { font-size: 0.95rem; font-weight: 600; margin: 0 0 8px;}
.interaction-settings-rows { display: flex; flex-direction: column;}
.interaction-settings-row { margin-bottom: 8px;}
.interaction-settings-row-disabled { opacity: 0.5; cursor: not-allowed;}
.interaction-settings-section-disabled { opacity: 0.4;}
.interaction-settings-section-disabled .interaction-settings-row-disabled { opacity: 1;}
.interaction-settings-notice { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: var(--card-border-radius); background: var(--post-hover-color); color: var(--text-color-secondary); font-size: 14px;}
.interaction-settings-notice app-icon { display: flex; width: 18px; height: 18px; flex-shrink: 0;}
.interaction-settings-list-avatar { width: 24px; height: 24px; border-radius: 4px; flex-shrink: 0;}
.interaction-settings-list-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.interaction-settings-preserved-row { justify-content: space-between; color: var(--text-color-secondary);}
.interaction-settings-lists-toggle { justify-content: space-between; list-style: none;}
.interaction-settings-lists-toggle::-webkit-details-marker { display: none;}
.interaction-settings-lists-chevron { display: flex; width: 18px; height: 18px; flex-shrink: 0;}
.interaction-settings-lists-message { color: var(--text-color-secondary); font-size: 0.9rem; padding: 8px 0;}
.interaction-settings-quote-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 12px; border-radius: var(--card-border-radius); background: var(--post-hover-color); font-size: 14px; font-weight: 500; margin-top: 8px;}
.interaction-settings-quote-label { display: flex; align-items: center; gap: 8px;}
.interaction-settings-quote-label app-icon { display: flex; width: 18px; height: 18px;}
.interaction-settings-default-note { color: var(--text-color-muted); font-size: 14px;}
.interaction-settings-save-default-row { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px;}
.interaction-settings-save-default-row input[type="checkbox"] { accent-color: var(--highlight-color); margin: 0;}
.interaction-settings-error { color: var(--error-color); font-size: 0.9rem;}
.interaction-settings-save { width: 100%; padding: 12px 20px; text-align: center;}
.interaction-settings-save:disabled { cursor: not-allowed;}
.chat-header-buttons { display: flex; align-items: center; gap: 8px;}
#chat-view .feed-end-message .rounded-button { margin: 18px auto 0;}
.new-chat-button { display: none; align-items: center; justify-content: center; cursor: pointer; border: none; padding: 0; background-color: var(--primary-button-color); color: var(--primary-button-text-color); height: 33px; width: 33px; border-radius: var(--circular-button-border-radius); transition: background-color 0.2s;}
@media (min-width: 800px) { .new-chat-button { display: flex; }}
@media (hover: hover) { .new-chat-button:hover { background-color: var(--primary-button-hover-color); }}
.new-chat-button app-icon { width: 16px; height: 16px;}
.new-chat-fab app-icon { width: 28px; height: 28px;}
@media (max-width: 799px) { .search-dialog { display: flex; flex-direction: column; }
.search-dialog-content { flex: 1; min-height: 0; }
.search-dialog-results { flex: 1; height: auto; min-height: 0; }}
@media (min-width: 800px) { .search-dialog { max-width: 480px; top: 50%; max-height: calc(100dvh - var(--sheet-top)); }}
.search-dialog-content { display: flex; flex-direction: column; gap: 16px; padding: 24px 20px; padding-top: 28px; position: relative;}
@media (min-width: 800px) { .search-dialog-content { padding-top: 24px; max-height: 80vh; }}
.search-dialog-header { display: flex; align-items: center; justify-content: space-between;}
.search-dialog-title { font-size: 1.3rem; font-weight: 700; margin: 0;}
.search-dialog-input-container { position: relative; display: flex; flex-direction: column;}
.search-dialog-input-container > app-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: var(--text-color-muted); pointer-events: none;}
.search-dialog-input-container .search-clear-button { right: 8px; top: 50%; transform: translateY(-50%);}
.search-dialog-input { padding: 12px; padding-left: 42px; padding-right: 36px; border: var(--hair) solid var(--post-border-color); border-radius: var(--text-input-border-radius); background: var(--text-input-background-color); color: var(--text-color); font-size: 16px; outline: none;}
.search-dialog-results { display: flex; flex-direction: column; height: 50vh; overflow-y: auto;}
.search-dialog-message { color: var(--text-color-secondary); text-align: center; padding: 20px 0;}
.search-dialog-section-header { color: var(--text-color-secondary); font-size: 0.85rem; padding: 4px 4px 8px;}
.new-chat-not-messageable-hint { align-self: center; color: var(--text-color-muted); font-size: 0.85rem; flex-shrink: 0;}
.new-chat-dialog .search-dialog-title { flex: 1; text-align: left;}
.new-chat-dialog .profile-list-item { border: none;}
.new-group-back-button { display: flex; align-items: center; margin-left: -8px;}
.search-dialog-header-action { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; font-size: 16px; font-weight: 600; cursor: pointer; color: var(--highlight-color); padding: 4px 0;}
.search-dialog-header-action:disabled:not(.saving) { color: var(--text-color-muted); cursor: default;}
.search-dialog-header-action .loading-spinner { border-top-color: var(--highlight-color);}
.new-group-entry-button { display: flex; align-items: center; gap: 12px; padding: 12px; background: none; border: none; text-align: left; color: var(--text-color); font-size: 1rem; cursor: pointer; margin-bottom: 4px;}
.new-group-entry-button app-icon:first-child { color: var(--highlight-color);}
.new-group-entry-button .new-group-entry-label { flex: 1; font-weight: 600;}
.new-group-entry-button app-icon { color: var(--text-color-muted);}
.new-group-entry-button.is-disabled { opacity: 0.5;}
@media (hover: hover) { .new-group-entry-button:hover { background: var(--highlight-color-tint); border-radius: 8px; }}
.new-group-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; flex-shrink: 0;}
.new-group-member-chip { display: flex; align-items: center; gap: 6px; padding: 4px 6px 4px 4px; border-radius: 999px; background: var(--highlight-color-tint); flex-shrink: 0;}
.new-group-member-chip .avatar-image-frame { width: 24px; height: 24px;}
.new-group-chip-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem;}
.new-group-chip-remove { display: flex; align-items: center; background: none; border: none; padding: 0; cursor: pointer; color: var(--text-color-muted);}
.new-group-chip-remove app-icon { width: 20px; height: 20px;}
@media (hover: hover) { .new-group-chip-remove:hover { color: var(--text-color); }}
.new-group-member-toggle { align-self: center; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--post-border-color); color: transparent; flex-shrink: 0;}
.new-group-member-toggle.is-selected { background: var(--highlight-color); border-color: var(--highlight-color); color: white;}
.new-group-member-toggle app-icon { width: 14px; height: 14px;}
.new-group-name-section { display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; flex-shrink: 0;}
.new-group-name-input { padding-left: 12px;}
.new-chat-result { display: flex; align-items: center; gap: 12px; padding: 10px 4px; background: none; border: none; text-align: left; color: var(--text-color); cursor: pointer;}
.new-chat-result.is-not-messageable { cursor: not-allowed;}
/* Scoped to [open]: the picker stays mounted in the composer, so an unconditional display would override the UA's closed-dialog display:none */.gif-picker-dialog[open] { display: flex; flex-direction: column;}
@media (min-width: 800px) { .gif-picker-dialog { max-width: 480px; }}
.gif-picker-content { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px 0; flex: 1; min-height: 0;}
.gif-picker-header { display: flex; align-items: center; gap: 8px;}
.gif-picker-input-container { flex: 1;}
.gif-picker-pills { display: flex; justify-content: space-between; gap: 8px;}
.gif-picker-pill { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--pill-button-border-radius); border: var(--hair) solid var(--post-border-color); background: none; color: var(--text-color); cursor: pointer;}
@media (hover: hover) { .gif-picker-pill:not(.is-active):hover { background: var(--background-color-secondary); }}
.gif-picker-pill.is-active { background: var(--text-color); border-color: var(--text-color); color: var(--background-color);}
.gif-picker-pill app-icon { width: 24px; height: 24px;}
/* Fixed height so the sheet doesn't collapse while a category/search swap empties the grid; on mobile the fullscreen sheet already fixes it */.gif-picker-body { height: 60vh; padding-bottom: 12px;}
@media (max-width: 799px) { .gif-picker-body { height: auto; }}
.gif-picker-grid { columns: 2; column-gap: 8px;}
@media (min-width: 800px) { .gif-picker-grid { columns: 3; }}
.gif-picker-tile { display: block; width: 100%; break-inside: avoid; margin-bottom: 8px; padding: 0; border: none; border-radius: var(--image-preview-border-radius); overflow: hidden; /* Visible while the gif image is still loading (the tile is already sized by its inline aspect-ratio) */ background: var(--image-placeholder-color); cursor: pointer;}
@media (hover: hover) { .gif-picker-tile:hover { opacity: 0.85; }}
.gif-picker-tile:active { opacity: 0.85; transform: scale(0.97);}
.gif-picker-tile img { display: block; width: 100%; height: 100%; object-fit: cover;}
.gif-picker-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 40px 16px; color: var(--text-color-secondary); text-align: center;}
.gif-picker-placeholder-title { font-size: 1.1rem; font-weight: 700; color: var(--text-color);}
.gif-picker-footer-message { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; color: var(--text-color-secondary);}
/* @chunk form-dialog */.new-chat-result .avatar { flex-shrink: 0;}
.new-chat-result .avatar-image-frame,.new-chat-skeleton-avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--avatar-border-radius);}
.new-chat-result-content { display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.new-chat-result-name { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.new-chat-result-handle { color: var(--text-color-muted); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.new-chat-skeleton-name { width: 120px; height: 14px; border-radius: 4px;}
.new-chat-skeleton-handle { width: 90px; height: 12px; border-radius: 4px;}
.starter-pack-wizard-dialog .search-dialog-content { height: 100%;}
.starter-pack-wizard-header-button { display: flex; align-items: center; background: none; border: none; cursor: pointer; color: var(--text-color); padding: 4px 8px; margin-left: -8px; opacity: 0.8;}
.starter-pack-wizard-header-button app-icon { width: 24px; height: 24px;}
.starter-pack-wizard-header-spacer { width: 32px;}
.starter-pack-wizard-dialog .search-dialog-title { flex: 1; text-align: center;}
.starter-pack-wizard-details { gap: 16px;}
.starter-pack-wizard-hero { text-align: center; padding: 8px 0 12px;}
.starter-pack-wizard-hero h3 { margin: 0 0 4px; font-size: 1.4rem;}
.starter-pack-wizard-hero p { margin: 0; color: var(--text-color-secondary);}
.starter-pack-wizard-footer { display: flex; flex-direction: column; gap: 12px; padding-top: 12px; border-top: var(--hair) solid var(--post-border-color); flex-shrink: 0;}
.starter-pack-wizard-count { font-size: 13px; color: var(--text-color-muted); text-align: right;}
.starter-pack-wizard-footer-row { display: flex; align-items: center; gap: 12px;}
.starter-pack-wizard-avatars { display: flex; align-items: center; gap: 6px; flex-shrink: 0;}
.starter-pack-wizard-avatar { width: 32px; height: 32px;}
.starter-pack-wizard-avatar .avatar,.starter-pack-wizard-avatar .avatar-image-frame,.starter-pack-wizard-avatar .feed-avatar { display: block; width: 100%; height: 100%;}
.starter-pack-wizard-avatar .feed-avatar { border-radius: 8px; object-fit: cover;}
.starter-pack-wizard-avatars.is-overlapping { gap: 0;}
.starter-pack-wizard-avatars.is-overlapping .starter-pack-wizard-avatar { margin-right: -8px;}
.starter-pack-wizard-avatars.is-overlapping .avatar-image-frame { border: 2px solid var(--background-color);}
.starter-pack-wizard-summary { flex: 1; min-width: 0; font-size: 14px; color: var(--text-color-secondary);}
.starter-pack-wizard-hint { margin-top: 4px; font-size: 13px; color: var(--text-color-muted);}
.starter-pack-wizard-next { width: 100%; padding: 12px; font-size: 16px; font-weight: 600;}
.starter-pack-wizard-next .loading-spinner { width: 16px; height: 16px;}
.starter-pack-wizard-toggle,.starter-pack-review-remove { align-self: center; flex-shrink: 0; min-width: 80px;}
.starter-pack-wizard-feed-row { cursor: default;}
.starter-pack-empty-state { display: flex; flex-direction: column; align-items: center; gap: 16px;}
.starter-pack-create-footer { display: flex; justify-content: center; padding: 16px;}
.manage-list-members-toggle { align-self: center; flex-shrink: 0; min-width: 80px;}
.manage-list-members-toggle .loading-spinner { width: 14px; height: 14px;}
tab-bar[full-width] { width: 100%;}
tab-bar[full-width] .tab-bar-button { flex: 1;}
.form-dialog { background-color: var(--background-color); overflow: visible; display: flex; flex-direction: column;}
@media (min-width: 800px) { .form-dialog { max-width: 600px; max-height: none; top: 50%; }}
.form-dialog-content { padding: 0; display: flex; flex-direction: column;}
@media (min-width: 800px) { .form-dialog-content { max-height: 80vh; }}
.form-dialog-header { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 2; background-color: var(--background-color); padding: 16px; border-radius: var(--sheet-border-radius) var(--sheet-border-radius) 0 0;}
@media (min-width: 800px) { .form-dialog-header { border-radius: var(--dialog-border-radius) var(--dialog-border-radius) 0 0; }}
.form-dialog-header h2 { margin: 0; font-size: 18px; position: absolute; left: 50%; transform: translateX(-50%);}
.form-dialog-header-button { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--text-link-color); padding: 4px 0;}
.form-dialog-save-button:enabled,.form-dialog-save-button.saving { color: var(--primary-button-color);}
.form-dialog-save-button { display: inline-flex; align-items: center; gap: 8px;}
.form-dialog-save-button .loading-spinner { border-top-color: var(--primary-button-color);}
.form-dialog-body { display: flex; flex-direction: column; padding: 0 20px 20px;}
.form-dialog-body > .form-dialog-field ~ .form-dialog-field,.form-dialog-body > .form-dialog-images-section ~ .form-dialog-field,.form-dialog-body > .form-dialog-field ~ .form-dialog-error { margin-top: 12px;}
.form-dialog-body .field-caption { margin-bottom: 0;}
.form-dialog-body .pill-radio-group { margin-bottom: 0;}
.form-dialog-images-section { position: relative; padding-bottom: 40px;}
.edit-profile-banner-preview { position: relative; width: 100%; aspect-ratio: 3 / 1; border-radius: var(--image-preview-border-radius); overflow: hidden; background-color: light-dark(var(--lightest-gray), var(--gray)); cursor: pointer;}
.edit-profile-banner-preview img { width: 100%; height: 100%; object-fit: cover;}
.edit-profile-banner-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--text-color-muted); font-size: 14px;}
.form-dialog-image-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.4); color: white; font-size: 14px; font-weight: 600; opacity: 0; transition: opacity 0.15s;}
@media (hover: hover) { .edit-profile-banner-preview:hover .form-dialog-image-overlay, .form-dialog-avatar-wrapper:hover .form-dialog-image-overlay { opacity: 1; }}
.form-dialog-camera-button { position: absolute; width: 24px; height: 24px; border-radius: var(--circular-button-border-radius); background-color: light-dark(var(--lightest-gray), var(--dark-gray)); border: 1px solid light-dark(var(--lighter-gray), var(--light-gray)); display: flex; align-items: center; justify-content: center; pointer-events: none;}
.form-dialog-camera-button app-icon { width: 14px; height: 14px;}
.form-dialog-camera-button-banner { bottom: 8px; right: 8px;}
.form-dialog-camera-button-avatar { bottom: 0; right: 0;}
.form-dialog-avatar-wrapper { position: absolute; bottom: 0; left: 12px; cursor: pointer;}
.form-dialog-avatar-preview { position: relative; width: 80px; height: 80px; border-radius: var(--avatar-border-radius); overflow: hidden; background-color: light-dark(var(--light-gray), var(--dark-gray)); border: 2px solid light-dark(var(--less-white), var(--dark-gray));}
.form-dialog-avatar-preview img { width: 100%; height: 100%; object-fit: cover;}
.form-dialog-avatar-placeholder { width: 100%; height: 100%; object-fit: cover;}
.form-dialog-field { display: flex; flex-direction: column; gap: 4px;}
.form-dialog-field > label { font-size: 13px; font-weight: 600; color: var(--text-color-muted);}
.form-dialog-input,.form-dialog-textarea { padding: 10px 12px; border: var(--hair) solid var(--post-border-color); border-radius: var(--text-input-border-radius); background-color: var(--text-input-background-color); color: var(--text-color); font-size: 16px; font-family: inherit; resize: vertical;}
.form-dialog-char-count { font-size: 12px; color: var(--text-color-muted); text-align: right;}
.form-dialog-char-count.overflow { color: var(--danger-color, #dc3545); font-weight: 600;}
.form-dialog-error { color: var(--danger-color, #dc3545); font-size: 14px; padding: 8px 12px; border-radius: var(--card-border-radius); background-color: light-dark(#fef2f2, #3b1111);}
.edit-list-details-dialog .form-dialog-images-section,.create-list-dialog .form-dialog-images-section { padding: 0; display: flex; justify-content: flex-start;}
.edit-list-details-dialog .form-dialog-avatar-wrapper,.create-list-dialog .form-dialog-avatar-wrapper { position: relative; bottom: auto; left: auto;}
.edit-list-details-dialog .form-dialog-avatar-preview,.create-list-dialog .form-dialog-avatar-preview { border-radius: var(--list-avatar-border-radius);}
/* Image Cropper */
image-cropper { display: flex; flex-direction: column; width: 100%; height: 300px;}
.image-cropper-canvas { width: 100%; flex: 1; min-height: 0; cursor: grab; touch-action: none;}
.image-cropper-canvas:active { cursor: grabbing;}
.image-cropper-slider-container { display: flex; align-items: center; justify-content: center; padding: 12px 20px; background: #000;}
.image-cropper-slider { width: 100%; max-width: 300px; height: 4px; appearance: none; -webkit-appearance: none; background: rgba(255, 255, 255, 0.3); border-radius: 2px; outline: none;}
.image-cropper-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; cursor: pointer;}
.image-cropper-slider::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: none; cursor: pointer;}
.form-dialog-cropper-content { max-height: calc(100dvh - 56px);}
.form-dialog-cropper-container { border-radius: var(--image-preview-border-radius); overflow: hidden;}
.community-plugins-link { display: flex; align-items: center; gap: 14px; margin: 12px 16px; padding: 14px 16px; border-radius: var(--callout-border-radius); background: var(--callout-color); color: var(--text-color); text-decoration: none; transition: background-color 0.15s;}
@media (hover: hover) { .community-plugins-link:hover { background: color-mix(in srgb, var(--text-color) 10%, var(--callout-color)); }}
.community-plugins-link-icon,.plugins-intro-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--background-color); color: var(--primary-button-color); flex-shrink: 0;}
.community-plugins-link-icon app-icon,.plugins-intro-icon app-icon { width: 22px; height: 22px;}
.community-plugins-link-text { display: flex; flex-direction: column; flex: 1; min-width: 0;}
.community-plugins-link-title { font-weight: 600; font-size: 15px;}
.community-plugins-link-subtitle { font-size: 13px; color: var(--text-color-muted); margin-top: 2px;}
.community-plugins-link-arrow { display: flex; align-items: center; flex-shrink: 0;}
.community-plugins-link-arrow app-icon { width: 20px; height: 20px; color: var(--text-color-muted);}
.plugins-intro { margin: 12px 16px; padding: 16px; border-radius: var(--callout-border-radius); background: var(--callout-color);}
.plugins-intro-header { display: flex; align-items: center; gap: 14px;}
.plugins-intro-title { font-weight: 600; font-size: 17px;}
.plugins-intro-message { margin: 6px 0 14px; font-size: 14px; color: var(--text-color-muted);}
.plugin-list { list-style: none; padding: 0; margin: 0;}
.plugin-list-loading { padding: 24px 16px; color: var(--text-color-muted); text-align: center; font-size: 14px;}
.plugins-loading-state { display: flex; justify-content: center; padding: 32px 16px;}
/* @chunk plugins */#community-plugins-view .error-state,#installed-plugins-view .error-state { padding: 32px 20px;}
.plugin-list-item { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px; border-bottom: var(--hair) solid var(--post-border-color);}
.plugin-list-item-name { font-weight: 600;}
.plugin-local-badge { font-size: 12px; font-weight: 400; background: var(--secondary-button-color); padding: 3px 8px; border-radius: var(--tag-border-radius); display: inline-block; min-width: fit-content; margin-left: 5px; vertical-align: middle; margin-bottom: 3px;}
.plugin-list-item-description { font-size: 14px; opacity: 0.8; margin-top: 2px;}
.plugin-list-item-version,.plugin-list-item-author { font-size: 12px; opacity: 0.6; margin-top: 4px;}
a.plugin-list-item-info { color: inherit; text-decoration: none; width: 100%;}
.plugin-list-item-controls { display: flex; align-items: center; gap: 12px;}
.plugin-list-item.uninstalling { opacity: 0.5;}
.plugin-installed-badge { font-size: 12px; font-weight: 400; background: light-dark( color-mix(in srgb, var(--highlight-color) 12%, var(--white)), color-mix(in srgb, var(--highlight-color) 16%, var(--mid-gray)) ); color: var(--highlight-color); padding: 3px 8px; border-radius: var(--tag-border-radius); display: inline-block; min-width: fit-content; margin-left: 5px; vertical-align: middle; margin-bottom: 3px;}
/* Community plugin rows are whole-row navigation links */#community-plugins-view .plugin-list-item { padding: 0;}
.plugin-list-item-link { display: flex; flex: 1; min-width: 0; align-items: center; gap: 24px; padding: 16px; text-decoration: none; color: inherit;}
.plugin-list-item-link .plugin-list-item-info { flex: 1; min-width: 0;}
.plugin-list-item-arrow { display: flex; align-items: center;}
.plugin-list-item-arrow app-icon { width: 20px; height: 20px; color: var(--text-color-muted);}
@media (hover: hover) { .plugin-list-item-link:hover { background: var(--post-hover-color); }}
.plugin-listing-header { padding: 20px 16px;}
.plugin-listing-name { margin: 0 0 16px; font-size: 22px; font-weight: 700; line-height: 1.1;}
.plugin-listing-name .plugin-local-badge { font-size: 14px;}
.plugin-listing-meta { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text-color-secondary);}
.plugin-listing-meta a { color: var(--primary-button-color); text-decoration: none; word-break: break-all;}
@media (hover: hover) { .plugin-listing-meta a:hover { text-decoration: underline; }}
.plugin-listing-description { margin: 16px 0 0; font-size: 16px; line-height: 1.5;}
.plugin-listing-actions { display: flex; gap: 12px; margin-top: 16px;}
.plugin-listing-readme { border-top: var(--hair) solid var(--post-border-color); padding: 16px;}
#community-plugin-listing-view rendered-markdown { display: block; font-size: 15px; line-height: 1.6; color: var(--text-color); word-break: break-word;}
#community-plugin-listing-view rendered-markdown h1,#community-plugin-listing-view rendered-markdown h2,#community-plugin-listing-view rendered-markdown h3,#community-plugin-listing-view rendered-markdown h4 { line-height: 1.25; margin: 24px 0 12px;}
#community-plugin-listing-view rendered-markdown h1 { font-size: 24px;}
#community-plugin-listing-view rendered-markdown h2 { font-size: 20px;}
#community-plugin-listing-view rendered-markdown h3 { font-size: 17px;}
#community-plugin-listing-view rendered-markdown :is(h1, h2, h3, h4):first-child { margin-top: 0;}
#community-plugin-listing-view rendered-markdown p,#community-plugin-listing-view rendered-markdown ul,#community-plugin-listing-view rendered-markdown ol { margin: 12px 0;}
rendered-markdown ul,rendered-markdown ol { padding-left: 24px;}
rendered-markdown ul { list-style: disc;}
rendered-markdown ol { list-style: decimal;}
rendered-markdown li { margin: 4px 0;}
rendered-markdown li > ul,rendered-markdown li > ol { margin: 4px 0;}
rendered-markdown ul:has(> li > input[type="checkbox"]) { list-style: none; padding-left: 0;}
#community-plugin-listing-view rendered-markdown a { color: var(--primary-button-color);}
#community-plugin-listing-view rendered-markdown img { max-width: 100%; height: auto;}
#community-plugin-listing-view rendered-markdown code { font-family: var(--mono-font, monospace); font-size: 0.9em; background: var(--secondary-button-color); padding: 2px 5px; border-radius: var(--tag-border-radius);}
#community-plugin-listing-view rendered-markdown pre { background: var(--secondary-button-color); padding: 12px; border-radius: var(--callout-border-radius); overflow-x: auto;}
#community-plugin-listing-view rendered-markdown pre code { background: none; padding: 0;}
#community-plugin-listing-view rendered-markdown blockquote { margin: 12px 0; padding-left: 12px; border-left: 3px solid var(--post-border-color); color: var(--text-color-secondary);}
.plugin-content h1,.plugin-content h2,.plugin-content h3,.plugin-content h4 { color: var(--text-color);}
.plugin-system-settings { display: block; margin-top: 16px;}
.plugin-system-settings-bar { padding: 8px 16px; background-color: var(--background-color-secondary); border-top: 1px solid var(--generic-border-color); border-bottom: 1px solid var(--generic-border-color); color: var(--text-color-muted);}
.plugin-system-settings-body { padding: 16px;}
.plugin-network-access-title { font-size: 15px; font-weight: 600;}
.plugin-network-access-description { margin-top: 4px; font-size: 13px; color: var(--text-color-muted);}
.plugin-network-access-list { margin-top: 12px; list-style: none; display: flex; flex-direction: column; gap: 8px;}
.plugin-network-access-item { display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.plugin-network-access-item code { font-family: var(--monospace-font, monospace); font-size: 13px; word-break: break-all;}
.plugin-content { --plugin-prose-inset: 0px;}
.plugin-content.plugin-content-page { --plugin-prose-inset: 16px;}
.plugin-content :is(h1, h2, h3, h4) { padding: 16px var(--plugin-prose-inset);}
.plugin-content :is(p, pre) { padding-inline: var(--plugin-prose-inset);}
.plugin-content :is(ul, ol) { padding-inline: calc(16px + var(--plugin-prose-inset)) var(--plugin-prose-inset);}
.plugin-content h1:first-child,.plugin-content h2:first-child,.plugin-content h3:first-child,.plugin-content h4:first-child { margin-top: 0;}
.plugin-content h3 { font-size: 16px; font-weight: 600;}
.plugin-content h4 { font-size: 14px; font-weight: 600; color: var(--text-color-secondary);}
.plugin-content p,.plugin-content ul,.plugin-content ol { font-size: 14px; color: var(--text-color-secondary); margin: 8px 0;}
.plugin-content li { margin: 4px 0;}
.plugin-content pre { overflow-x: auto;}
.setting-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding: 16px; border-bottom: var(--hair) solid var(--generic-border-color);}
.setting-item-disabled .setting-item-name,.setting-item-disabled .setting-item-desc { color: var(--text-color-muted);}
.setting-item:last-child { border-bottom: none;}
.setting-item-info { flex: 1 1 200px; min-width: 0; max-width: 100%; overflow-wrap: anywhere;}
h2.setting-item-name { font-size: inherit; margin: 0;}
.setting-item-name { font-weight: 600; color: var(--text-color);}
.setting-item-desc { font-size: 14px; color: var(--text-color-secondary); margin-top: 4px;}
.setting-item-desc a { color: var(--text-link-color);}
.plugin-content .setting-item-name,.plugin-content .setting-item-desc { padding: 0;}
.plugin-content .setting-item-desc { margin: 4px 0 0;}
.setting-item-control { flex: 0 0 auto; display: flex; align-items: center; gap: 8px;}
.setting-item-dropdown,.setting-item-text-input,.setting-item-textarea,.plugin-content textarea,.plugin-content :is( input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="password"], input[type="number"] ) { font-size: 16px; font-family: inherit; padding: 10px 12px; border-radius: var(--text-input-border-radius); border: var(--hair) solid var(--post-border-color); background: var(--text-input-background-color); color: var(--text-color);}
.setting-item-textarea,.plugin-content textarea { resize: vertical;}
.installed-plugins-header { padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.installed-plugins-header h2 { font-size: 16px;}
.installed-plugins-header-actions { display: flex; align-items: center; gap: 12px;}
.plugin-check-updates-button { min-height: 37px;}
.external-link-warning-href { display: block; padding: 12px; margin-bottom: 16px; border: var(--hair) solid var(--post-border-color); border-radius: 8px; background-color: light-dark(var(--lightest-gray), var(--gray)); color: var(--text-color); font-size: 16px; text-decoration: none; word-break: break-all; overflow-wrap: anywhere;}
.external-link-warning-host { font-weight: 600; color: var(--text-color);}
.external-link-warning-path { color: var(--text-color-secondary, var(--text-color)); opacity: 0.75;}
.bottom-sheet.text-modal { color: var(--text-color);}
.bottom-sheet.text-modal .modal-dialog-content { padding-top: 32px; padding-right: 24px; padding-bottom: 16px; padding-left: 24px;}
@media (min-width: 800px) { .bottom-sheet.text-modal { width: 90%; max-width: 410px; } .bottom-sheet.text-modal.compact { max-width: 350px; } .bottom-sheet.text-modal .modal-dialog-content { padding-top: 24px; padding-right: 24px; padding-bottom: 16px; padding-left: 24px; }}
.bottom-sheet.welcome-modal { width: 90%; max-width: 410px; padding-bottom: 0; top: 50%; left: 50%; right: auto; bottom: auto; max-height: 80vh; border: var(--hair) solid var(--post-border-color); border-radius: 22px; box-shadow: none; animation: none; transform: translate(-50%, -50%);}
.bottom-sheet.welcome-modal::before { display: none;}
.bottom-sheet.welcome-modal .modal-dialog-content { padding-top: 24px;}
.sidebar-action-items { display: flex; flex-direction: column; align-items: flex-start;}
@media (min-width: 800px) and (max-width: 1199.98px) { .logged-out-sidebar .sidebar-footer, .logged-out-sidebar .sidebar-action-items, .logged-out-sidebar .sidebar-title { display: none; }
.footer-nav.logged-out-footer { display: flex !important; }}
.subscribe-list-button { margin-right: 12px;}
.plugin-preview-banner { position: fixed; left: 0; right: 0; bottom: calc(var(--footer-height) + var(--safe-area-inset-bottom)); z-index: calc(var(--footer-z-index) + 1); display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid color-mix(in srgb, var(--highlight-color) 35%, transparent); background: var(--highlight-color-tint);}
@media (min-width: 1200px) { .plugin-preview-banner { right: 24px; left: auto; bottom: 24px; max-width: min(360px, calc(100vw - 48px)); padding: 12px 14px; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon body" ". button"; align-items: center; gap: 8px 12px; border: 1px solid color-mix(in srgb, var(--highlight-color) 35%, transparent); border-radius: var(--card-border-radius); box-shadow: 0 4px 16px rgb(0 0 0 / 15%); }
.plugin-preview-banner-icon { grid-area: icon; }
.plugin-preview-banner-body { grid-area: body; }
.plugin-preview-banner-exit { grid-area: button; justify-self: end; }}
.plugin-preview-banner-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 32px; height: 32px; width: 32px; border-radius: 999px; background: color-mix(in srgb, var(--highlight-color) 20%, transparent); color: var(--highlight-color);}
.plugin-preview-banner-icon app-icon { width: 18px; height: 18px;}
.plugin-preview-banner-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;}
.plugin-preview-banner-title { font-weight: 600; font-size: 14px; color: var(--text-color); letter-spacing: 0.01em;}
.plugin-preview-banner-subtitle { font-size: 13px; color: var(--text-color-muted); line-height: 1.4;}
.plugin-preview-banner-link { color: var(--highlight-color); font-weight: 500; text-decoration: none;}
.plugin-preview-banner-exit { flex: 0 0 auto; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--highlight-color) 35%, transparent); border-radius: var(--pill-button-border-radius); background: transparent; color: var(--highlight-color); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;}
@media (hover: hover) { .plugin-preview-banner-exit:hover { background: color-mix(in srgb, var(--highlight-color) 12%, transparent); }}
@media (hover: hover) { .plugin-preview-banner-link:hover { text-decoration: underline; }}