Something went wrong. Try again.
Mirror of https://github.com/improsocial/improAn extensible Bluesky client for web
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581258225832584258525862587258825892590259125922593259425952596259725982599260026012602260326042605260626072608260926102611261226132614261526162617261826192620262126222623262426252626262726282629263026312632263326342635263626372638263926402641264226432644264526462647264826492650265126522653265426552656265726582659266026612662266326642665266626672668266926702671267226732674267526762677267826792680268126822683268426852686268726882689269026912692269326942695269626972698269927002701270227032704270527062707270827092710271127122713271427152716271727182719272027212722272327242725272627272728272927302731273227332734273527362737273827392740274127422743274427452746274727482749275027512752275327542755275627572758275927602761276227632764276527662767276827692770277127722773277427752776277727782779278027812782278327842785278627872788278927902791279227932794279527962797279827992800280128022803280428052806280728082809281028112812281328142815281628172818281928202821282228232824282528262827282828292830283128322833283428352836283728382839284028412842284328442845284628472848284928502851285228532854285528562857285828592860286128622863286428652866286728682869287028712872287328742875287628772878287928802881288228832884288528862887288828892890289128922893289428952896289728982899290029012902290329042905290629072908290929102911291229132914291529162917291829192920292129222923292429252926292729282929293029312932293329342935293629372938293929402941294229432944294529462947294829492950295129522953295429552956295729582959296029612962296329642965296629672968296929702971297229732974297529762977297829792980298129822983298429852986298729882989299029912992299329942995299629972998299930003001300230033004300530063007300830093010301130123013301430153016301730183019302030213022302330243025302630273028302930303031303230333034303530363037303830393040304130423043304430453046304730483049305030513052305330543055305630573058305930603061306230633064306530663067306830693070307130723073307430753076307730783079308030813082308330843085308630873088308930903091309230933094309530963097309830993100310131023103310431053106310731083109311031113112311331143115311631173118311931203121312231233124312531263127312831293130313131323133313431353136313731383139314031413142314331443145314631473148314931503151315231533154315531563157315831593160316131623163316431653166316731683169317031713172317331743175317631773178317931803181318231833184318531863187318831893190319131923193319431953196319731983199320032013202320332043205320632073208320932103211321232133214321532163217321832193220322132223223322432253226322732283229323032313232323332343235323632373238323932403241324232433244324532463247324832493250325132523253325432553256325732583259326032613262326332643265326632673268326932703271327232733274327532763277327832793280328132823283328432853286328732883289329032913292329332943295329632973298329933003301330233033304330533063307330833093310331133123313331433153316331733183319332033213322332333243325332633273328332933303331333233333334333533363337333833393340334133423343334433453346334733483349335033513352335333543355335633573358335933603361336233633364336533663367336833693370337133723373337433753376337733783379338033813382338333843385338633873388338933903391339233933394339533963397339833993400340134023403340434053406340734083409341034113412341334143415341634173418341934203421342234233424342534263427342834293430343134323433343434353436343734383439344034413442344334443445344634473448344934503451345234533454345534563457345834593460346134623463346434653466346734683469347034713472347334743475347634773478347934803481348234833484348534863487348834893490349134923493349434953496349734983499350035013502350335043505350635073508350935103511351235133514351535163517351835193520352135223523352435253526352735283529353035313532353335343535353635373538353935403541354235433544354535463547354835493550355135523553355435553556355735583559356035613562356335643565356635673568356935703571357235733574357535763577357835793580358135823583358435853586358735883589359035913592359335943595359635973598359936003601360236033604360536063607360836093610361136123613361436153616361736183619362036213622362336243625362636273628362936303631363236333634363536363637363836393640364136423643364436453646364736483649365036513652365336543655365636573658365936603661366236633664366536663667366836693670367136723673367436753676367736783679368036813682368336843685368636873688368936903691369236933694369536963697369836993700370137023703370437053706370737083709371037113712371337143715371637173718371937203721372237233724372537263727372837293730373137323733373437353736373737383739374037413742374337443745374637473748374937503751375237533754375537563757375837593760376137623763376437653766376737683769377037713772377337743775377637773778377937803781378237833784378537863787378837893790379137923793379437953796379737983799380038013802380338043805380638073808380938103811381238133814381538163817381838193820382138223823382438253826382738283829383038313832383338343835383638373838383938403841384238433844384538463847384838493850385138523853385438553856385738583859386038613862386338643865386638673868386938703871387238733874387538763877387838793880388138823883388438853886388738883889389038913892389338943895389638973898389939003901390239033904390539063907390839093910391139123913391439153916391739183919392039213922392339243925392639273928392939303931393239333934393539363937393839393940394139423943394439453946394739483949395039513952395339543955395639573958395939603961396239633964396539663967396839693970397139723973397439753976397739783979398039813982398339843985398639873988398939903991399239933994399539963997399839994000400140024003400440054006400740084009401040114012401340144015401640174018401940204021402240234024402540264027402840294030403140324033403440354036403740384039404040414042404340444045404640474048404940504051405240534054405540564057405840594060406140624063406440654066406740684069407040714072407340744075407640774078407940804081408240834084408540864087408840894090409140924093409440954096409740984099410041014102410341044105410641074108410941104111411241134114411541164117411841194120412141224123412441254126412741284129413041314132413341344135413641374138413941404141414241434144414541464147414841494150415141524153415441554156415741584159416041614162416341644165416641674168416941704171417241734174417541764177417841794180418141824183418441854186418741884189419041914192419341944195419641974198419942004201420242034204420542064207420842094210421142124213421442154216421742184219422042214222422342244225422642274228422942304231423242334234423542364237423842394240424142424243424442454246424742484249425042514252425342544255425642574258425942604261426242634264426542664267426842694270427142724273427442754276427742784279428042814282428342844285428642874288428942904291429242934294429542964297429842994300430143024303430443054306430743084309431043114312431343144315431643174318431943204321432243234324432543264327432843294330433143324333433443354336433743384339434043414342434343444345434643474348434943504351435243534354435543564357435843594360436143624363436443654366436743684369437043714372437343744375437643774378437943804381438243834384438543864387438843894390439143924393439443954396439743984399440044014402440344044405440644074408440944104411441244134414441544164417441844194420442144224423442444254426442744284429443044314432443344344435443644374438443944404441444244434444444544464447444844494450445144524453445444554456445744584459446044614462446344644465446644674468446944704471447244734474447544764477447844794480448144824483448444854486448744884489449044914492449344944495449644974498449945004501450245034504450545064507450845094510451145124513451445154516451745184519452045214522452345244525452645274528452945304531453245334534453545364537453845394540454145424543454445454546454745484549455045514552455345544555455645574558455945604561456245634564456545664567456845694570457145724573457445754576457745784579458045814582458345844585458645874588458945904591459245934594459545964597459845994600460146024603460446054606460746084609461046114612461346144615461646174618461946204621462246234624462546264627462846294630463146324633463446354636463746384639464046414642464346444645464646474648464946504651465246534654465546564657465846594660466146624663466446654666466746684669467046714672467346744675467646774678467946804681468246834684468546864687468846894690469146924693469446954696469746984699470047014702470347044705470647074708470947104711471247134714471547164717471847194720472147224723472447254726472747284729473047314732473347344735473647374738473947404741474247434744474547464747474847494750475147524753475447554756475747584759476047614762476347644765476647674768476947704771477247734774477547764777477847794780478147824783478447854786478747884789479047914792479347944795479647974798479948004801480248034804480548064807480848094810481148124813481448154816481748184819482048214822482348244825482648274828482948304831483248334834483548364837483848394840484148424843484448454846484748484849485048514852485348544855485648574858485948604861486248634864486548664867486848694870487148724873487448754876487748784879488048814882488348844885488648874888488948904891489248934894489548964897489848994900490149024903490449054906490749084909491049114912491349144915491649174918491949204921492249234924492549264927492849294930493149324933493449354936493749384939494049414942494349444945494649474948494949504951495249534954495549564957495849594960496149624963496449654966496749684969497049714972497349744975497649774978497949804981498249834984498549864987498849894990499149924993499449954996499749984999500050015002500350045005500650075008500950105011501250135014501550165017501850195020502150225023502450255026502750285029503050315032503350345035503650375038503950405041504250435044504550465047504850495050505150525053505450555056505750585059506050615062506350645065506650675068506950705071507250735074507550765077507850795080508150825083508450855086508750885089509050915092509350945095509650975098509951005101510251035104510551065107510851095110511151125113511451155116511751185119512051215122512351245125512651275128512951305131513251335134513551365137513851395140514151425143514451455146514751485149515051515152515351545155515651575158515951605161516251635164516551665167516851695170517151725173517451755176517751785179518051815182518351845185518651875188518951905191519251935194519551965197519851995200520152025203520452055206520752085209521052115212521352145215521652175218521952205221522252235224522552265227522852295230523152325233523452355236523752385239524052415242524352445245524652475248524952505251525252535254525552565257525852595260526152625263526452655266526752685269527052715272527352745275527652775278527952805281528252835284528552865287528852895290529152925293529452955296529752985299530053015302530353045305530653075308530953105311531253135314531553165317531853195320532153225323532453255326532753285329533053315332533353345335533653375338533953405341534253435344534553465347534853495350535153525353535453555356535753585359536053615362536353645365536653675368536953705371537253735374537553765377537853795380538153825383538453855386538753885389539053915392539353945395539653975398539954005401540254035404540554065407540854095410541154125413541454155416541754185419542054215422542354245425542654275428542954305431543254335434543554365437543854395440544154425443544454455446544754485449545054515452545354545455545654575458545954605461546254635464546554665467546854695470547154725473547454755476547754785479548054815482548354845485548654875488548954905491549254935494549554965497549854995500550155025503550455055506550755085509551055115512551355145515551655175518551955205521552255235524552555265527552855295530553155325533553455355536553755385539554055415542554355445545554655475548554955505551555255535554555555565557555855595560556155625563556455655566556755685569557055715572557355745575557655775578557955805581558255835584558555865587558855895590559155925593559455955596559755985599560056015602560356045605560656075608560956105611561256135614561556165617561856195620562156225623562456255626562756285629563056315632563356345635563656375638563956405641564256435644564556465647564856495650565156525653565456555656565756585659566056615662566356645665566656675668566956705671567256735674567556765677567856795680568156825683568456855686568756885689569056915692569356945695569656975698569957005701570257035704570557065707570857095710571157125713571457155716571757185719572057215722572357245725572657275728572957305731573257335734573557365737573857395740574157425743574457455746574757485749575057515752575357545755575657575758575957605761576257635764576557665767576857695770577157725773577457755776577757785779578057815782578357845785578657875788578957905791579257935794579557965797579857995800580158025803580458055806580758085809581058115812581358145815581658175818581958205821582258235824582558265827582858295830583158325833583458355836583758385839584058415842584358445845584658475848584958505851585258535854585558565857585858595860586158625863586458655866586758685869587058715872587358745875587658775878587958805881588258835884588558865887588858895890589158925893589458955896589758985899590059015902590359045905590659075908590959105911591259135914591559165917591859195920592159225923592459255926592759285929593059315932593359345935593659375938593959405941594259435944594559465947594859495950595159525953595459555956595759585959596059615962596359645965596659675968596959705971597259735974597559765977597859795980598159825983598459855986598759885989599059915992599359945995599659975998599960006001600260036004600560066007600860096010601160126013601460156016601760186019602060216022602360246025602660276028602960306031603260336034603560366037603860396040604160426043604460456046604760486049605060516052605360546055605660576058605960606061606260636064606560666067606860696070607160726073607460756076607760786079608060816082608360846085608660876088608960906091609260936094609560966097609860996100610161026103610461056106610761086109611061116112611361146115611661176118611961206121612261236124612561266127612861296130613161326133613461356136613761386139614061416142614361446145614661476148614961506151615261536154615561566157615861596160616161626163616461656166616761686169617061716172617361746175617661776178617961806181618261836184618561866187618861896190619161926193619461956196619761986199620062016202620362046205620662076208620962106211621262136214621562166217621862196220622162226223622462256226622762286229623062316232623362346235623662376238623962406241624262436244624562466247624862496250625162526253625462556256625762586259626062616262626362646265626662676268626962706271627262736274627562766277627862796280628162826283628462856286628762886289629062916292629362946295629662976298629963006301630263036304630563066307630863096310631163126313631463156316631763186319632063216322632363246325632663276328632963306331633263336334633563366337633863396340634163426343634463456346634763486349635063516352635363546355635663576358635963606361636263636364636563666367636863696370637163726373637463756376637763786379638063816382638363846385638663876388638963906391639263936394639563966397639863996400640164026403640464056406640764086409641064116412641364146415641664176418641964206421642264236424642564266427642864296430643164326433643464356436643764386439644064416442644364446445644664476448644964506451645264536454645564566457645864596460646164626463646464656466646764686469647064716472647364746475647664776478647964806481648264836484648564866487648864896490649164926493649464956496649764986499650065016502650365046505650665076508650965106511651265136514651565166517651865196520652165226523652465256526652765286529653065316532653365346535653665376538653965406541654265436544654565466547654865496550655165526553655465556556655765586559656065616562656365646565656665676568656965706571657265736574657565766577657865796580658165826583658465856586658765886589659065916592659365946595659665976598659966006601660266036604660566066607660866096610661166126613661466156616661766186619662066216622662366246625662666276628662966306631663266336634663566366637663866396640664166426643664466456646664766486649665066516652665366546655665666576658665966606661666266636664666566666667666866696670667166726673667466756676667766786679668066816682668366846685668666876688668966906691669266936694669566966697669866996700670167026703670467056706670767086709671067116712671367146715671667176718671967206721672267236724672567266727672867296730673167326733673467356736673767386739674067416742674367446745674667476748674967506751675267536754675567566757675867596760676167626763676467656766676767686769677067716772677367746775677667776778677967806781678267836784678567866787678867896790679167926793679467956796679767986799680068016802680368046805680668076808680968106811681268136814681568166817681868196820682168226823682468256826682768286829683068316832683368346835683668376838683968406841684268436844684568466847684868496850685168526853685468556856685768586859686068616862686368646865686668676868686968706871687268736874687568766877687868796880688168826883688468856886688768886889689068916892689368946895689668976898689969006901690269036904690569066907690869096910691169126913691469156916691769186919692069216922692369246925692669276928692969306931693269336934693569366937693869396940694169426943694469456946694769486949695069516952695369546955695669576958695969606961696269636964696569666967696869696970697169726973697469756976697769786979698069816982698369846985698669876988698969906991699269936994699569966997699869997000700170027003700470057006700770087009701070117012701370147015701670177018701970207021702270237024702570267027702870297030703170327033703470357036703770387039704070417042704370447045704670477048704970507051705270537054705570567057705870597060706170627063706470657066706770687069707070717072707370747075707670777078707970807081708270837084708570867087708870897090709170927093709470957096709770987099710071017102710371047105710671077108710971107111711271137114711571167117711871197120712171227123712471257126712771287129713071317132713371347135713671377138713971407141714271437144714571467147714871497150715171527153715471557156715771587159716071617162716371647165716671677168716971707171717271737174717571767177717871797180718171827183718471857186718771887189719071917192719371947195719671977198719972007201720272037204720572067207720872097210721172127213721472157216721772187219722072217222722372247225722672277228722972307231723272337234723572367237723872397240724172427243724472457246724772487249725072517252725372547255725672577258725972607261726272637264726572667267726872697270727172727273727472757276727772787279728072817282728372847285728672877288728972907291729272937294729572967297729872997300730173027303730473057306730773087309731073117312731373147315731673177318731973207321732273237324732573267327732873297330733173327333733473357336733773387339734073417342734373447345734673477348734973507351735273537354735573567357735873597360736173627363736473657366736773687369737073717372737373747375737673777378737973807381738273837384738573867387738873897390739173927393739473957396739773987399740074017402740374047405740674077408740974107411741274137414741574167417741874197420742174227423742474257426742774287429743074317432743374347435743674377438743974407441744274437444744574467447744874497450745174527453745474557456745774587459746074617462746374647465746674677468746974707471747274737474747574767477747874797480748174827483748474857486748774887489749074917492749374947495749674977498749975007501750275037504750575067507750875097510751175127513751475157516751775187519752075217522752375247525752675277528752975307531753275337534753575367537753875397540754175427543754475457546754775487549755075517552755375547555755675577558755975607561756275637564756575667567756875697570757175727573757475757576757775787579758075817582758375847585758675877588758975907591759275937594759575967597759875997600760176027603760476057606760776087609761076117612761376147615761676177618761976207621762276237624762576267627762876297630763176327633763476357636763776387639764076417642764376447645764676477648764976507651765276537654765576567657765876597660766176627663766476657666766776687669767076717672767376747675767676777678767976807681768276837684768576867687768876897690769176927693769476957696769776987699770077017702770377047705770677077708770977107711771277137714771577167717771877197720772177227723772477257726772777287729773077317732773377347735773677377738773977407741774277437744774577467747774877497750775177527753775477557756775777587759776077617762776377647765776677677768776977707771777277737774777577767777777877797780778177827783778477857786778777887789779077917792779377947795779677977798779978007801780278037804780578067807780878097810781178127813781478157816781778187819782078217822782378247825782678277828782978307831783278337834783578367837783878397840784178427843784478457846784778487849785078517852785378547855785678577858785978607861786278637864786578667867786878697870787178727873787478757876787778787879788078817882788378847885788678877888788978907891789278937894789578967897789878997900790179027903790479057906790779087909791079117912791379147915791679177918791979207921792279237924792579267927792879297930793179327933793479357936793779387939794079417942794379447945794679477948794979507951795279537954795579567957795879597960796179627963796479657966796779687969797079717972797379747975797679777978797979807981798279837984798579867987798879897990799179927993799479957996799779987999800080018002800380048005800680078008800980108011801280138014801580168017801880198020802180228023802480258026802780288029803080318032803380348035803680378038803980408041804280438044804580468047804880498050805180528053805480558056805780588059806080618062806380648065806680678068806980708071807280738074807580768077807880798080808180828083808480858086808780888089809080918092809380948095809680978098809981008101810281038104810581068107810881098110811181128113811481158116811781188119812081218122812381248125812681278128812981308131813281338134813581368137813881398140814181428143814481458146814781488149815081518152815381548155815681578158815981608161816281638164816581668167816881698170817181728173817481758176817781788179818081818182818381848185818681878188818981908191819281938194819581968197819881998200820182028203820482058206820782088209821082118212821382148215821682178218821982208221822282238224822582268227822882298230823182328233823482358236823782388239824082418242824382448245824682478248824982508251825282538254825582568257825882598260826182628263826482658266826782688269827082718272827382748275827682778278827982808281828282838284828582868287828882898290829182928293829482958296829782988299830083018302830383048305830683078308830983108311831283138314831583168317831883198320832183228323832483258326832783288329833083318332833383348335833683378338833983408341834283438344834583468347834883498350835183528353835483558356835783588359836083618362836383648365836683678368836983708371837283738374837583768377837883798380838183828383838483858386838783888389839083918392839383948395839683978398839984008401840284038404840584068407840884098410841184128413841484158416841784188419842084218422842384248425842684278428842984308431843284338434843584368437843884398440844184428443844484458446844784488449845084518452845384548455845684578458845984608461846284638464846584668467846884698470847184728473847484758476847784788479848084818482848384848485848684878488848984908491849284938494849584968497849884998500850185028503850485058506850785088509851085118512851385148515851685178518851985208521852285238524852585268527852885298530853185328533853485358536853785388539854085418542854385448545854685478548854985508551855285538554855585568557855885598560856185628563856485658566856785688569857085718572857385748575857685778578857985808581858285838584858585868587858885898590859185928593859485958596859785988599860086018602860386048605860686078608860986108611861286138614861586168617861886198620862186228623862486258626862786288629863086318632863386348635863686378638863986408641864286438644864586468647864886498650865186528653865486558656865786588659866086618662866386648665866686678668866986708671867286738674867586768677867886798680868186828683868486858686868786888689869086918692869386948695869686978698869987008701870287038704870587068707870887098710871187128713871487158716871787188719872087218722872387248725872687278728872987308731873287338734873587368737873887398740874187428743874487458746874787488749875087518752875387548755875687578758875987608761876287638764876587668767876887698770877187728773877487758776877787788779878087818782878387848785878687878788878987908791879287938794879587968797879887998800880188028803880488058806880788088809881088118812881388148815881688178818881988208821882288238824882588268827882888298830883188328833883488358836883788388839884088418842884388448845884688478848884988508851885288538854885588568857885888598860886188628863886488658866886788688869887088718872887388748875887688778878887988808881888288838884888588868887888888898890889188928893889488958896889788988899890089018902890389048905890689078908890989108911891289138914891589168917891889198920892189228923892489258926892789288929893089318932893389348935893689378938893989408941894289438944894589468947894889498950895189528953895489558956895789588959896089618962896389648965896689678968896989708971897289738974897589768977897889798980898189828983898489858986898789888989899089918992899389948995899689978998899990009001900290039004900590069007900890099010901190129013901490159016901790189019902090219022902390249025902690279028902990309031903290339034903590369037903890399040904190429043904490459046904790489049905090519052905390549055905690579058905990609061906290639064906590669067906890699070907190729073907490759076907790789079908090819082908390849085908690879088908990909091909290939094909590969097909890999100910191029103910491059106910791089109911091119112911391149115911691179118911991209121912291239124912591269127912891299130913191329133913491359136913791389139914091419142914391449145914691479148914991509151915291539154915591569157915891599160916191629163916491659166916791689169917091719172917391749175917691779178917991809181918291839184918591869187918891899190919191929193919491959196919791989199920092019202920392049205920692079208920992109211921292139214921592169217921892199220922192229223922492259226922792289229923092319232923392349235923692379238923992409241924292439244924592469247924892499250925192529253925492559256925792589259926092619262926392649265926692679268926992709271927292739274927592769277927892799280928192829283928492859286928792889289929092919292929392949295929692979298929993009301930293039304930593069307930893099310931193129313931493159316931793189319932093219322932393249325932693279328932993309331933293339334933593369337933893399340934193429343934493459346934793489349935093519352935393549355935693579358935993609361936293639364936593669367936893699370937193729373937493759376937793789379938093819382938393849385938693879388938993909391939293939394939593969397939893999400940194029403940494059406940794089409941094119412941394149415941694179418941994209421942294239424942594269427942894299430943194329433943494359436943794389439944094419442944394449445944694479448944994509451945294539454945594569457945894599460946194629463946494659466946794689469947094719472947394749475947694779478947994809481948294839484948594869487948894899490949194929493949494959496949794989499950095019502950395049505950695079508950995109511951295139514951595169517951895199520952195229523952495259526952795289529953095319532953395349535953695379538953995409541954295439544954595469547954895499550955195529553955495559556955795589559956095619562956395649565956695679568956995709571957295739574957595769577957895799580958195829583958495859586958795889589959095919592959395949595959695979598959996009601960296039604960596069607960896099610961196129613961496159616961796189619962096219622962396249625962696279628962996309631963296339634963596369637963896399640964196429643964496459646964796489649965096519652965396549655965696579658965996609661966296639664966596669667966896699670967196729673967496759676967796789679968096819682968396849685968696879688968996909691969296939694969596969697969896999700970197029703970497059706970797089709971097119712971397149715971697179718971997209721972297239724972597269727972897299730973197329733973497359736973797389739974097419742974397449745974697479748974997509751975297539754975597569757975897599760976197629763976497659766976797689769977097719772977397749775977697779778977997809781978297839784978597869787978897899790979197929793979497959796979797989799980098019802980398049805980698079808980998109811981298139814981598169817981898199820982198229823982498259826982798289829983098319832983398349835983698379838983998409841984298439844984598469847984898499850985198529853985498559856985798589859986098619862986398649865986698679868986998709871987298739874987598769877987898799880988198829883988498859886988798889889989098919892989398949895989698979898989999009901990299039904990599069907990899099910991199129913991499159916991799189919992099219922992399249925992699279928992999309931993299339934993599369937993899399940994199429943994499459946994799489949995099519952995399549955995699579958995999609961996299639964996599669967996899699970997199729973997499759976997799789979998099819982998399849985998699879988998999909991999299939994999599969997999899991000010001100021000310004100051000610007100081000910010100111001210013100141001510016100171001810019100201002110022100231002410025100261002710028100291003010031100321003310034100351003610037100381003910040100411004210043100441004510046100471004810049100501005110052100531005410055100561005710058100591006010061100621006310064100651006610067100681006910070100711007210073100741007510076100771007810079100801008110082100831008410085100861008710088100891009010091100921009310094100951009610097100981009910100101011010210103101041010510106101071010810109101101011110112101131011410115101161011710118101191012010121101221012310124101251012610127101281012910130101311013210133101341013510136101371013810139101401014110142101431014410145101461014710148101491015010151101521015310154101551015610157101581015910160101611016210163101641016510166101671016810169101701017110172101731017410175101761017710178101791018010181101821018310184101851018610187101881018910190101911019210193101941019510196101971019810199102001020110202102031020410205102061020710208102091021010211102121021310214102151021610217102181021910220102211022210223102241022510226102271022810229102301023110232102331023410235102361023710238102391024010241102421024310244102451024610247102481024910250102511025210253102541025510256102571025810259102601026110262102631026410265102661026710268102691027010271102721027310274102751027610277102781027910280102811028210283102841028510286102871028810289102901029110292102931029410295102961029710298102991030010301103021030310304103051030610307103081030910310103111031210313103141031510316103171031810319103201032110322103231032410325103261032710328103291033010331103321033310334103351033610337103381033910340103411034210343103441034510346103471034810349103501035110352103531035410355103561035710358103591036010361103621036310364:root { color-scheme: light dark;}
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent;}
button { color: inherit; font-family: inherit;}
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; }}
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; --lightest-gray: #f3f3f3; --blue: #418af7; --purple: #9054f9; --pink: #df4074; --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(--lighter-gray), var(--light-gray)); --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)); --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); --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);
/* 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;
/* 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-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: 4px; --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: 10px; --video-border-radius: 10px; --embed-border-radius: 10px; --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; --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; --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-swatch: 0 2px 4px rgba(0, 0, 0, 0.2); --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: -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;}
@media (max-width: 799px) { .view-column-center main { padding-bottom: calc(var(--footer-height) + var(--safe-area-inset-bottom)); }
.view-column-center main.chat-detail-main { padding-bottom: 0; }}
.container { display: flex; margin: 0 auto;}
@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: 700px; }
.view-column-right { flex: 1 1 var(--sidebar-max-width); min-width: 0; max-width: var(--sidebar-max-width); }}
.rich-text { white-space: pre-wrap; word-wrap: break-word;}
plugin-rich-text { display: contents;}
.rich-text a { color: var(--text-link-color);}
.rich-text-block { white-space: normal;}
.rich-text-facet-pending { display: none;}
@media (hover: hover) { .rich-text a:hover { text-decoration: underline; }}
.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[disabled] { opacity: 0.5; cursor: default;}
.rounded-button .plus-icon { 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);}
@media (hover: hover) { .rounded-button:hover { background-color: var(--secondary-button-hover-color); }
.rounded-button.rounded-button-primary:hover { background-color: var(--primary-button-hover-color); }}
.rounded-button.bell-button { padding: 6px 10px; display: flex; align-items: center; justify-content: center;}
.rounded-button.bell-button .notifications-icon { width: 20px; height: 20px;}
.rounded-button.chat-button { padding: 6px 10px; display: flex; align-items: center; justify-content: center;}
.rounded-button.chat-button .chat-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);}
.text-pill-button:disabled { opacity: 0.5; cursor: default;}
.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:disabled { opacity: 0.5; cursor: default;}
.icon-button .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 .icon,.floating-back-button .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 .icon { width: 24px; height: 24px;}
.feeds-button { height: 30px; width: 30px;}
.feeds-button .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 .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; border: none; border-radius: 50%; cursor: pointer; overflow: hidden;}
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%; box-shadow: var(--shadow-color-swatch);}
/* Firefox */input[type="color"]::-moz-color-swatch { border: var(--hair) solid var(--post-border-color); border-radius: 50%; box-shadow: var(--shadow-color-swatch);}
.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); background-color: var(--skeleton-color);}
.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); background-color: var(--skeleton-color);}
.skeleton-line-short { width: 10em; height: 12px; border-radius: var(--skeleton-border-radius); background-color: var(--skeleton-color);}
.skeleton-line-shorter { width: 7em; height: 12px; border-radius: var(--skeleton-border-radius); background-color: var(--skeleton-color);}
.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(--post-action-icon-color); opacity: 0.4; display: flex; align-items: center; justify-content: center;}
.skeleton-action .skeleton-action-icon .icon { width: 18px; height: 18px; display: block;}
.skeleton-action .skeleton-action-icon .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(--skeleton-color); overflow: hidden; flex-shrink: 0;}
.avatar-image-frame.labeler-avatar { border-radius: var(--labeler-avatar-border-radius);}
.avatar-image { width: 100%; height: 100%; display: block;}
.avatar-image--blurred { filter: blur(5px); transform: translateZ(0); will-change: filter;}
.avatar-link { display: flex; align-items: center; justify-content: center; width: fit-content;}
.avatar-placeholder { width: var(--avatar-size-post); height: var(--avatar-size-post); border-radius: var(--avatar-border-radius); background-color: var(--generic-border-color);}
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 { font-size: 18px; font-weight: 600;}
.header .header-subtitle { 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;}
.profile-card { margin-bottom: 8px;}
.profile-tab-bar,.list-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(100vh - 45px); 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: block; 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 (min-width: 800px) { .sidebar { position: sticky; top: 0; height: 100vh; 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, .sidebar .sidebar-profile-avatar .avatar-placeholder { 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-item { justify-content: flex-end; }
.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: 12px;}
@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-image-frame,.sidebar-profile-avatar .avatar-placeholder { 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-avatar .avatar-placeholder { border-radius: var(--avatar-border-radius); background-color: var(--skeleton-color); 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: 3px 6px; 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;}
.sidebar-nav-icon .icon { width: 25px; height: 25px;}
.sidebar-nav-icon .icon path { stroke: var(--text-color);}
plugin-icon { display: inline-flex; width: 1em; height: 1em; color: inherit;}
plugin-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 plugin-icon { width: 25px; height: 25px; 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: 18px; margin-left: 10px; width: fit-content; padding: 12px 20px; font-size: 16px; font-weight: 600;}
.sidebar-compose-button .icon { width: 20px; height: 20px;}
.sidebar-compose-button span { margin-right: 6px;}
@media (min-width: 1200px) { .sidebar-compose-button { display: flex; }}
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 { width: fit-content; margin-left: 16px; margin-top: 8px; padding: 10px 20px; white-space: nowrap;}
@media (min-width: 800px) { .logged-out-sidebar .login-button, .logged-out-sidebar .sidebar-about-link { margin-left: auto; margin-right: auto; }}
.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 .avatar-image-placeholder { width: var(--avatar-size-footer-nav); height: var(--avatar-size-footer-nav); border-radius: var(--avatar-border-radius); background-color: var(--skeleton-color); border: var(--hair) solid var(--post-border-color);}
.footer-nav-item[disabled] { pointer-events: none; cursor: default; opacity: 0.5;}
.footer-nav-item.active { cursor: default;}
.footer-nav-item .icon { width: 24px; height: 24px;}
.footer-nav-item .icon path { stroke: 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;}
.feed-end-message { padding: 32px 16px 0; color: var(--text-color-muted); font-size: 14px; text-align: center;}
.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;}
.post { padding-top: 10px; 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: 8px;}
.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;}
.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 .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(.icon) { text-decoration: underline; }}
.post-text { line-height: 1.3125; margin-top: -4px;}
.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%;}
.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);}
.label-badge-image { border-radius: var(--avatar-border-radius); object-fit: cover;}
.large-post .label-badge { font-size: 13px; 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 .label-badges { 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 .icon { height: 13px; width: 13px;}
.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 .icon { height: 17px; width: 17px;}
.small-post .repost-label .icon path { fill: 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 .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 .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(--skeleton-color); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.no-unauthenticated-avatar .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 .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-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);}
@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 (hover: hover) { .post-thread-reply-prompt:hover { background-color: var(--post-hover-color); }}
@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;}
.reply-to-author { font-size: 14px; color: var(--text-color-muted); margin-top: 4px;}
.reply-to-author .icon { display: inline-block; width: 13px; height: 13px; vertical-align: -2px;}
.icon { position: relative;}
.close-icon { width: 24px; height: 24px;}
.account-switcher-add-icon .icon { width: 24px; height: 24px;}
.account-switcher-item.account-switcher-add { color: var(--text-color-secondary);}
.account-switcher-current-check .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-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: -2px;}
.post-action { flex: 1;}
.post-action-bookmark { 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] { opacity: 0.5; cursor: auto;}
animated-button { display: contents;}
.post-action[disabled] { pointer-events: none; color: var(--disabled-gray);}
.post-action-repost.reposted { color: var(--highlight-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 .icon { width: 18px; height: 18px; display: block;}
.post-action-icon .icon svg { width: 100%; height: 100%; 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);}
.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-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; transform: translateZ(0); /* Prevents video jiggle on iPadOS scroll */}
.post-video > .alt-indicator { pointer-events: auto; 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 { display: block; width: 100%; height: 100%;}
.post-video video { display: block; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); /* Prevents video jiggle on iPadOS scroll */}
.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 .play-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 .play-icon { background: color-mix(in srgb, var(--white) 85%, transparent); }}
.external-link-image-wrapper .play-icon svg { width: 100%; height: 100%; display: block;}
.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 .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 .play-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(--embed-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 { max-width: 100%; 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%;}
.post-composer-embed-preview { position: relative;}
/* 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 .close-icon { width: 18px; height: 18px;}
.post-composer-image-preview { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px;}
.image-preview-item { position: relative; 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); }}
.image-preview-remove-button span { font-size: 18px; line-height: 1; position: relative; top: -1px;}
.post-composer-video-preview { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px;}
.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 { width: 100%; display: block; max-height: 360px;}
.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 svg { 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-ellipsis { position: absolute; left: 36px; top: 2px; bottom: 2px; right: 32px; 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 { 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 .small-post { 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 { 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 .user-icon,.notification-icon .user-plus-icon { color: var(--highlight-color) !important;}
.notification-icon .user-icon path,.notification-icon .user-plus-icon path { fill: var(--highlight-color) !important; stroke: var(--highlight-color) !important;}
.notification-icon .notifications-icon { color: var(--highlight-color) !important;}
.notification-icon .heart-icon path { fill: var(--like-color); stroke: var(--like-color);}
.notification-icon .repost-icon path { fill: var(--highlight-color);}
.notification-icon.verified-icon svg { color: var(--highlight-color);}
.notification-icon.unverified-icon svg { color: var(--text-color-muted);}
.notification-icon .contacts-icon { color: var(--highlight-color);}
.notification-content { flex: 1; min-width: 0;}
.notification-avatars { display: flex; gap: 4px; margin-bottom: 4px; align-items: center;}
.notification-text .automated-account-badge { margin-left: 4px;}
.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-others-button { background: none; border: none; padding: 0; margin: 0; font: inherit; font-weight: 600; cursor: pointer;}
@media (hover: hover) { .notification-others-button:hover { text-decoration: underline; }}
.notification-time { color: var(--text-color-muted); font-weight: normal;}
.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);}
.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;}
.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-item { position: absolute;}
.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%;}
.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( 100vh - var(--chat-detail-header-height) - var(--footer-height) - var(--safe-area-inset-bottom) ); 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 > .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 .label-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;}
.chat-info-panel .label-badge { font-size: 13px; 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);}
.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-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 .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-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 .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 .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 .emoji-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:disabled { opacity: 0.5; cursor: default;}
.message-input-emoji-button .emoji-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:disabled { opacity: 0.5; cursor: default;}
.message-input-send-button .send-icon { color: var(--overlay-text-color); width: 20px; height: 20px; left: 2px;}
.message-input-send-button .send-icon svg { width: 20px; height: 20px;}
.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] { opacity: 0.4; 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;}
.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-dialog-close { display: none; background: none; border: none; cursor: pointer; color: var(--text-color); padding: 0 8px;}
@media (min-width: 800px) { .reactions-dialog-close { display: inline-flex; align-items: center; }}
.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-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;}
.chat-icon.filled circle { fill: var(--background-color);}
.profile-container { padding: 0; min-height: 100vh;}
.profile-banner-container { position: relative; width: 100%; height: 150px; background-color: light-dark(var(--lightest-gray), var(--gray));}
.profile-banner { width: 100%; height: 100%; object-fit: cover;}
.profile-banner--blurred { filter: blur(100px);}
.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 svg { width: 12px; height: 12px;}
.profile-info .verification-badge { margin-left: 6px; margin-bottom: 2px;}
.profile-list-item .verification-badge { margin-left: 3px; margin-bottom: 2px;}
.notification-text .verification-badge { margin-left: 4px; margin-bottom: 2px;}
.profile-name .verification-badge svg { 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 svg { width: 12px; height: 12px;}
.profile-info .automated-account-badge { margin-left: 6px; margin-bottom: 2px;}
.profile-list-item .automated-account-badge { margin-left: 3px; margin-bottom: 2px;}
.profile-name .automated-account-badge svg { 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 .label-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; padding: 0 16px;}
.profile-card .label-badge { font-size: 13px; 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;}
.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: 50%; 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: 50%;}
.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: 16px; border-bottom: var(--hair) solid var(--post-border-color); cursor: pointer;}
.profile-list-item-row { display: flex; align-items: flex-start; gap: 12px;}
@media (hover: hover) { .profile-list-item: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-follow { margin-left: auto; align-self: center; white-space: nowrap; flex-shrink: 0;}
.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 .search-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 .close-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 .search-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-placeholder { padding: 48px 24px; color: var(--text-color-muted); font-size: 15px; text-align: center; line-height: 1.5; display: flex; flex-direction: column; align-items: center; gap: 12px;}
.search-placeholder-icon { width: 64px; height: 64px; opacity: 0.3;}
.search-placeholder-icon path { stroke: var(--text-color-muted);}
.search-placeholder-text { max-width: 345px;}
.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;}
.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 .loading-spinner { margin-left: auto; margin-right: auto; margin-top: 16px;}
.feeds-list-item { display: flex; align-items: flex-start; padding: 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;}
.feeds-list-item-description { font-size: 14px; color: var(--text-color-secondary); white-space: pre-wrap;}
.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:disabled { cursor: default; opacity: 0.5;}
.feeds-list-item-unpin-button svg { width: 20px; height: 20px;}
.feeds-list-item-drag-handle:active { cursor: grabbing;}
.feeds-list-item-drag-handle svg { 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: var(--highlight-color); color: var(--background-color);}
.following-avatar .icon svg { width: 24px; height: 24px;}
.header-edit-button { padding: 8px;}
.header-edit-button svg { width: 24px; height: 24px;}
.new-chat-button:disabled { opacity: 0.5; cursor: default;}
.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;}
.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 .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-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;}
.feeds-list-item .pin-feed-button svg { 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); background-color: var(--skeleton-color);}
.feeds-list-item-skeleton-title { height: 14px; width: 45%; border-radius: var(--skeleton-border-radius); background-color: var(--skeleton-color); margin-bottom: 6px; margin-top: 2px;}
.feeds-list-item-skeleton-creator { height: 12px; width: 30%; border-radius: var(--skeleton-border-radius); background-color: var(--skeleton-color);}
.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(100vh - 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;}
.composer-error-banner { display: flex; align-items: flex-start; gap: 8px; margin: 0 16px 8px; padding: 10px 12px; border-radius: var(--text-input-border-radius); background-color: var(--error-subtle-color);}
.composer-error-banner .alert-icon { flex-shrink: 0; width: 20px; height: 20px; color: var(--error-color);}
.composer-error-banner-message { flex: 1; align-self: center; 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 .icon { width: 16px; height: 16px;}
@media (hover: hover) { .composer-error-banner-dismiss:hover { color: var(--text-color); }}
.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::backdrop { background-color: var(--overlay-color-medium); animation: fade-in 0.2s ease-out;}
@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);}
/* 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: 80vh; 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; }}
.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; justify-content: space-between; align-items: center; flex-shrink: 0; margin-top: 16px; padding: 8px 16px calc(var(--safe-area-inset-bottom) + 8px); position: sticky; bottom: 0; background-color: light-dark(var(--white), var(--mid-gray));}
/* workaround for iOS Safari subpixel rounding */.post-composer-bottom-bar::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;}
@media (min-width: 800px) { .post-composer-bottom-bar { padding: 8px 10px; position: relative; }}
.post-composer-bottom-bar-left { display: flex; align-items: center;}
.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 .close-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 .icon { width: 24px; height: 24px; color: var(--highlight-color);}
.post-composer .rich-text-input { width: 100%; min-height: 120px; border: none; background: transparent; color: var(--text-color); font-size: 16px; font-family: inherit; resize: none; outline: none;}
.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 .icon { width: 24px; height: 24px; color: var(--highlight-color);}
.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 .emoji-icon { width: 24px; height: 24px;}
.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);}
.floating-compose-button .icon { width: 24px; height: 24px;}
@media (min-width: 800px) { .floating-compose-button { right: 50px; }
.floating-compose-button .icon { width: 30px; height: 30px; }}
@media (min-width: 1200px) { .floating-compose-button { display: none; }}
.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;}
.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;}
@media (min-width: 800px) { .context-menu-container.open { position: relative; inset: auto; }}
.context-menu { z-index: var(--context-menu-z-index); background-color: var(--background-color); padding-top: 16px; padding-left: 16px; padding-right: 16px; padding-bottom: calc(var(--safe-area-inset-bottom) + 16px); touch-action: pan-y; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain;}
.context-menu::backdrop { animation: fade-in 0.25s ease-out;}
@media (min-width: 800px) { .context-menu::backdrop { background-color: transparent; animation: none; }}
context-menu-item:last-child { margin-bottom: 0;}
context-menu-item:last-child .context-menu-item { margin-bottom: 0;}
.context-menu-label { font-size: 13px; font-weight: 500; color: var(--text-color-muted); white-space: nowrap; padding-bottom: 8px; padding-top: 4px;}
@media (min-width: 800px) { .context-menu-label { padding: 12px 14px 4px; font-size: inherit; font-weight: normal; color: var(--text-color-muted); }}
.context-menu-item { margin-bottom: 12px; white-space: nowrap; color: var(--text-color); width: 100%;}
.context-menu-item-group { border: var(--hair) solid var(--post-border-color); border-radius: var(--context-menu-item-group-border-radius); overflow: hidden;}
context-menu-item-group:not(:last-child) .context-menu-item-group { margin-bottom: 12px;}
.context-menu-item-group .context-menu-item { margin-bottom: 0;}
.context-menu-item-group context-menu-item:not(:last-child) .context-menu-item { border-bottom: var(--hair) solid var(--post-border-color);}
.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; flex: 1; padding: 14px; border-radius: var(--context-menu-button-radius);}
.context-menu-item-group .context-menu-item button { border-radius: 0; border: none;}
.context-menu-item button[disabled] { opacity: 0.5; cursor: default;}
@media (min-width: 800px) { .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: 0; touch-action: auto; }
.context-menu-item { margin-bottom: 0; }
.context-menu-item-group context-menu-item:not(:last-child) .context-menu-item { border-bottom: none; }
.context-menu-item button { background-color: transparent; padding: 14px 16px; border: none; border-bottom: var(--hair) solid var(--post-border-color); border-radius: 0; }}
.context-menu-item a { padding: 14px 16px; width: 100%; color: inherit; display: inline-block; text-align: left;}
@media (hover: hover) { .context-menu-item a:hover { background-color: var(--context-menu-item-hover-color); }
.context-menu-item button:not([disabled]):hover { background-color: var(--context-menu-item-hover-color); }}
@media (min-width: 800px) { .context-menu-item-group { border: none; border-radius: 0; margin-bottom: 0; }
context-menu-item-group:not(:last-child) .context-menu-item-group { border-bottom: var(--hair) solid var(--post-border-color); margin-bottom: 0; }}
/* 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;}
.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-bottom: 16px; color: var(--text-color);}
.alert-modal .modal-dialog-message { margin-bottom: 12px;}
.modal-dialog-message a { color: var(--text-link-color);}
.permission-prompt-list { margin: 12px 0 0; padding-left: 20px; font-size: 13px;}
.permission-prompt-list code { font-family: var(--monospace-font, monospace); background: var(--secondary-background-color); padding: 1px 4px; border-radius: 4px; word-break: break-all;}
@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;}
.modal-dialog-button.cancel-button { background-color: var(--secondary-button-color);}
@media (hover: hover) { .modal-dialog-button.cancel-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:hover { background-color: var(--error-subtle-hover-color); }}
@media (hover: hover) { .modal-dialog-button.primary-button: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;}
@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-close { display: none; background: none; border: none; cursor: pointer; color: var(--text-color); padding: 0 8px; opacity: 0.6;}
@media (min-width: 800px) { .image-alt-text-dialog-close { display: inline-flex; align-items: center; }}
@media (hover: hover) { .image-alt-text-dialog-close:hover { opacity: 1; }}
.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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 16px; resize: none; outline: none; transition: border-color 0.2s;}
.image-alt-text-dialog-textarea:focus { border-color: var(--highlight-color);}
.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; 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 { position: fixed; top: 0; left: 0; width: 100%; height: 100%; 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);}
.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:disabled { opacity: 0.3; cursor: default;}
.lightbox-nav-prev { left: 20px;}
.lightbox-nav-next { right: 20px;}
.lightbox-nav .icon { width: 24px; height: 24px;}
.lightbox-nav .icon path { stroke: var(--white); stroke-width: 3;}
.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-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;}
.muted-word-field-label { font-size: 13px; font-weight: 600; color: var(--text-color-muted); margin-bottom: 6px;}
.muted-word-radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px;}
.muted-word-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;}
.muted-word-radio-group label:has(input:checked) { background: color-mix(in srgb, var(--highlight-color) 15%, transparent);}
.muted-word-radio-group input[type="radio"] { accent-color: var(--highlight-color); background-color: transparent; margin: 0;}
.muted-word-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;}
.muted-word-checkbox-row:has(input:checked) { background: color-mix(in srgb, var(--highlight-color) 15%, transparent);}
.muted-word-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 .plus-icon { 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-renew-button:disabled { opacity: 0.5; cursor: default;}
.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 .close-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:not(.disabled) { background: var(--post-hover-color); }}
.vertical-nav-item.disabled { opacity: 0.5; pointer-events: none;}
.vertical-nav-icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
.vertical-nav-icon .icon { width: 26px; height: 26px;}
.vertical-nav-icon .icon path { stroke: var(--text-color);}
.vertical-nav-label { flex: 1;}
.vertical-nav-arrow .icon { width: 20px; height: 20px;}
.vertical-nav-arrow .icon path { stroke: 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:first-child { margin-left: 0;}
.settings-account-avatar-stack .avatar .avatar-image-frame { width: 24px; height: 24px; border: 2px solid var(--background-color); border-radius: 50%; 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 .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; }}
.modal-dialog-buttons-stacked { flex-direction: column;}
@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-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 .icon { width: 18px; height: 18px;}
.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-close { display: none; background: none; border: none; padding: 0; color: var(--text-color-muted); cursor: pointer;}
@media (min-width: 800px) { .account-switcher-close { display: flex; align-items: center; }}
.account-switcher-close[disabled] { opacity: 0.5; cursor: default;}
.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[disabled] { opacity: 0.6; cursor: default;}
.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 .avatar-image-placeholder,.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;}
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 .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: 100vh;}
#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;}
#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 .icon { width: 18px; height: 18px;}
@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;}
#not-found-view main { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(100vh - 45px); min-height: calc(100dvh - 45px);}
@media (max-width: 799px) { #not-found-view main { min-height: calc( 100dvh - 45px - var(--footer-height) - var(--safe-area-inset-bottom) ); }}
#not-found-view h1 { font-size: 24px; font-weight: 600; margin-bottom: 16px;}
#not-found-view a { color: var(--text-link-color);}
.error-message { padding: 12px; color: var(--error-color); font-size: 14px;}
#login-view .error-message-container { height: 2em;}
.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 { margin-top: 16px;}
.error-state a { color: var(--text-link-color);}
#profile-view .error-state { min-height: 30vh;}
.app-error-state { min-height: 100vh; 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: 100vh;}
.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; margin-bottom: 12px;}
.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);}
.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 { opacity: 0.5; cursor: not-allowed;}
@media (min-width: 800px) { .report-dialog { max-width: 480px; top: 50%; max-height: calc(100vh - var(--sheet-top)); }}
.report-dialog-content { display: flex; flex-direction: column; height: 100%; max-height: calc(100vh - 16px); padding-top: 16px;}
@media (min-width: 800px) { .report-dialog-content { padding-top: 0; max-height: 80vh; }}
.report-dialog-close { display: none; background: none; border: none; cursor: pointer; color: var(--text-color); padding: 0; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: var(--icon-button-border-radius); position: absolute; top: 12px; right: 12px;}
@media (min-width: 800px) { .report-dialog-close { display: flex; }}
.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 .check-icon { width: 16px; height: 16px;}
.check-icon path { stroke-width: 3.2;}
.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 .close-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: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 16px; resize: none; outline: none; transition: border-color 0.2s;}
.report-details-input:focus { border-color: var(--highlight-color);}
.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 { opacity: 0.6; 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;}
.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-close { display: none; position: absolute; top: 12px; right: 12px; background: none; border: none; cursor: pointer; color: var(--text-color); padding: 4px 8px; opacity: 0.6;}
@media (min-width: 800px) { .post-notifications-dialog-close { display: flex; align-items: center; }}
@media (hover: hover) { .post-notifications-dialog-close:hover { opacity: 1; }}
.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 { opacity: 0.5; 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-close { display: none; position: absolute; top: 12px; right: 12px; background: none; border: none; cursor: pointer; color: var(--text-color); padding: 4px 8px; opacity: 0.6;}
@media (min-width: 800px) { .add-to-lists-dialog-close { display: flex; align-items: center; }}
@media (hover: hover) { .add-to-lists-dialog-close:hover { opacity: 1; }}
.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 { opacity: 0.5; 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;}
.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 .icon { width: 16px; height: 16px;}
.new-chat-fab .icon { width: 28px; height: 28px;}
@media (min-width: 800px) { .new-chat-fab { display: none; }}
@media (max-width: 799px) { .new-chat-dialog { display: flex; flex-direction: column; }
.new-chat-dialog-content { flex: 1; min-height: 0; }
.new-chat-results { flex: 1; height: auto; min-height: 0; }}
@media (min-width: 800px) { .new-chat-dialog { max-width: 480px; }}
.new-chat-dialog-content { display: flex; flex-direction: column; gap: 16px; padding: 24px 20px; padding-top: 28px; position: relative;}
@media (min-width: 800px) { .new-chat-dialog-content { padding-top: 24px; }}
.new-chat-dialog-header { display: flex; align-items: center; justify-content: space-between;}
.new-chat-dialog-title { font-size: 1.3rem; font-weight: 700; margin: 0;}
.new-chat-dialog-close { display: none; background: none; border: none; cursor: pointer; color: var(--text-color); padding: 4px 8px; opacity: 0.6;}
@media (min-width: 800px) { .new-chat-dialog-close { display: flex; align-items: center; }}
@media (hover: hover) { .new-chat-dialog-close:hover { opacity: 1; }}
.new-chat-search-container { position: relative; display: flex; flex-direction: column;}
.new-chat-search-container .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; color: var(--text-color-muted); pointer-events: none;}
.new-chat-search-container .search-clear-button { right: 8px; top: 50%; transform: translateY(-50%);}
.new-chat-search-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;}
.new-chat-results { display: flex; flex-direction: column; height: 50vh; overflow-y: auto;}
.new-chat-message-row { color: var(--text-color-secondary); text-align: center; padding: 20px 0;}
.new-chat-section-header { color: var(--text-color-secondary); font-size: 0.85rem; padding: 4px 4px 8px;}
.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 { opacity: 0.5; cursor: not-allowed;}
.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: 50%;}
.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;}
tab-bar[full-width] { width: 100%;}
tab-bar[full-width] .tab-bar-button { flex: 1;}
.edit-profile-dialog { background-color: var(--background-color); overflow: visible; display: flex; flex-direction: column;}
@media (min-width: 800px) { .edit-profile-dialog { max-width: 600px; max-height: none; top: 50%; }}
.edit-profile-dialog-content { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px;}
@media (min-width: 800px) { .edit-profile-dialog-content { max-height: 80vh; }}
.edit-profile-dialog-header { display: flex; align-items: center; justify-content: space-between;}
.edit-profile-dialog-header h2 { margin: 0; font-size: 18px; position: absolute; left: 50%; transform: translateX(-50%);}
.edit-profile-dialog-header-button { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--text-link-color); padding: 4px 0;}
.edit-profile-dialog-header-button:disabled { opacity: 0.5; cursor: default;}
.edit-profile-dialog-save-button:enabled,.edit-profile-dialog-save-button.saving { color: var(--primary-button-color);}
.edit-profile-dialog-save-button { display: inline-flex; align-items: center; gap: 8px;}
.edit-profile-dialog-save-button .loading-spinner { border-top-color: var(--primary-button-color);}
.edit-profile-dialog-body { display: flex; flex-direction: column;}
.edit-profile-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;}
.edit-profile-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 .edit-profile-image-overlay, .edit-profile-avatar-wrapper:hover .edit-profile-image-overlay { opacity: 1; }}
.edit-profile-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;}
.edit-profile-camera-button .icon { width: 14px; height: 14px; display: flex;}
.edit-profile-camera-button-banner { bottom: 8px; right: 8px;}
.edit-profile-camera-button-avatar { bottom: 0; right: 0;}
.edit-profile-avatar-wrapper { position: absolute; bottom: 0; left: 12px; cursor: pointer;}
.edit-profile-avatar-preview { position: relative; width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background-color: light-dark(var(--light-gray), var(--dark-gray)); border: 2px solid light-dark(var(--less-white), var(--dark-gray));}
.edit-profile-avatar-preview img { width: 100%; height: 100%; object-fit: cover;}
.edit-profile-avatar-placeholder { width: 100%; height: 100%; object-fit: cover;}
.edit-profile-field { display: flex; flex-direction: column; gap: 4px; margin-top: 16px;}
.edit-profile-field label { font-size: 14px; font-weight: 600;}
.edit-profile-input,.edit-profile-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;}
.edit-profile-input:focus,.edit-profile-textarea:focus { outline: 2px solid var(--highlight-color); outline-offset: -1px;}
.edit-profile-char-count { font-size: 12px; color: var(--text-color-muted); text-align: right;}
.edit-profile-char-count.overflow { color: var(--danger-color, #dc3545); font-weight: 600;}
.edit-profile-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 .edit-list-details-images-section { padding: 8px 0; display: flex; justify-content: flex-start;}
.edit-list-details-dialog .edit-profile-avatar-wrapper { position: relative; bottom: auto; left: auto;}
.edit-list-details-dialog .edit-profile-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;}
.edit-profile-cropper-content { max-height: calc(100vh - 56px);}
.edit-profile-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 { 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 .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 .icon { width: 20px; height: 20px;}
.community-plugins-link-arrow .icon path { stroke: 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;}
.plugins-empty-state { margin: 16px; padding: 24px 20px; border-radius: var(--callout-border-radius); background: var(--callout-color); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px;}
.plugins-empty-state-title { font-weight: 600; font-size: 16px;}
.plugins-empty-state-message { margin: 0; color: var(--text-color-muted); font-size: 14px; line-height: 1.5; max-width: 32em;}
#community-plugins-view .error-state,#settings-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;}
.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 .icon { width: 20px; height: 20px;}
.plugin-list-item-arrow .icon path { stroke: 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-settings-tab h1,.plugin-settings-tab h2,.plugin-settings-tab h3,.plugin-settings-tab h4 { color: var(--text-color); padding: 16px;}
.plugin-settings-tab h1:first-child,.plugin-settings-tab h2:first-child,.plugin-settings-tab h3:first-child,.plugin-settings-tab h4:first-child { margin-top: 0;}
.plugin-settings-tab h3 { font-size: 16px; font-weight: 600;}
.plugin-settings-tab h4 { font-size: 14px; font-weight: 600; color: var(--text-color-secondary);}
.plugin-settings-tab p { font-size: 14px; color: var(--text-color-secondary); margin: 8px 0;}
.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: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; padding: 0;}
.setting-item-name { font-weight: 600; color: var(--text-color);}
p.setting-item-desc { margin: 4px 0 0;}
.setting-item-desc { font-size: 14px; color: var(--text-color-secondary); margin-top: 4px;}
.setting-item-control { flex: 0 0 auto; display: flex; align-items: center; gap: 8px;}
.setting-item-dropdown,.plugin-settings-tab textarea { font-size: 16px; padding: 8px 10px; border-radius: var(--text-input-border-radius); border: var(--hair) solid var(--generic-border-color); background: var(--text-input-background-color); color: var(--text-color);}
.plugin-settings-tab textarea { font-family: inherit; 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: 320px; } .bottom-sheet.text-modal .modal-dialog-content { padding-top: 24px; padding-right: 24px; padding-bottom: 16px; padding-left: 24px; }}
.bottom-sheet.profile-list-modal .profile-list-modal-body { max-height: 60vh; overflow-y: auto; margin: 0 -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 .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; }}