.tgui-f23c0e195677169c{background:var(--tgui--bg_color);overflow:hidden}.tgui-947b927060015de8{max-height:0;transition:max-height .1s ease-in-out}
.tgui-60e7968097edfa6f{color:var(--tgui--link_color);transition:transform .15s ease-out}.tgui-c900ecbd6d8d6d5e{transform:rotate(180deg)}
.tgui-b8dfba0b5c3d054c{--tgui--cell--middle--padding:16px 0;align-items:center;display:flex;gap:24px;padding:0 24px}.tgui-7b5bccbb645b495f{gap:16px}.tgui-7edaaf0c57797623{background:var(--tgui--tertiary_bg_color)}.tgui-56b2e897ed7ccb22,.tgui-aaa795d78c356ac1{align-items:center;display:flex;justify-content:center}.tgui-8735a62be5a8b8a7{display:flex;flex-direction:column;flex-grow:1;gap:2px;max-width:100%;min-width:0;padding:var(--tgui--cell--middle--padding)}.tgui-1c6d7865a76a19bc,.tgui-8735a62be5a8b8a7>*{overflow:hidden;text-overflow:ellipsis}.tgui-b8dfba0b5c3d054c:not(.tgui-6c49dadccf648a5b) .tgui-1c6d7865a76a19bc,.tgui-b8dfba0b5c3d054c:not(.tgui-6c49dadccf648a5b) .tgui-8735a62be5a8b8a7>*{white-space:nowrap}.tgui-46dd90b57ffed25f{color:var(--tgui--subtitle_text_color)}.tgui-a894f59f4c5ad72f{align-items:center;display:inline-flex;gap:4px}.tgui-bb909928b48f948b,.tgui-d528ef65a8b76273,.tgui-fc059ed3ac5799a6{color:var(--tgui--hint_color)}.tgui-7b5bccbb645b495f{--tgui--cell--middle--padding:12px 0;padding:0 16px}@media (hover:hover) and (pointer:fine){.tgui-b8dfba0b5c3d054c:hover{background:var(--tgui--tertiary_bg_color)}}
.tgui-b5d680db78c4cc2e{cursor:pointer;isolation:isolate;position:relative;transition:opacity .15s ease-out}.tgui-b5d680db78c4cc2e[readonly]{cursor:default;pointer-events:visible}.tgui-b5d680db78c4cc2e[disabled]{cursor:default;opacity:.35}.tgui-34eb6f8b96874d40:active,.tgui-7c5d6c1f6bbe3eaf:active{opacity:.65}@media (hover:hover) and (pointer:fine){.tgui-34eb6f8b96874d40:hover,.tgui-7c5d6c1f6bbe3eaf:hover{opacity:.85}}
.tgui-8071f6e38c77bc0b{border-radius:inherit;bottom:0;left:0;overflow:hidden;position:absolute;right:0;top:0;transition:background-color .15s ease-out}.tgui-e156954daf886976{animation:tgui-81605f53eca39186 .3s cubic-bezier(.3,.3,.5,1);background:var(--tgui--outline);border-radius:50%;content:"";height:24px;margin:-12px 0;opacity:0;position:absolute;width:24px}@keyframes tgui-81605f53eca39186{0%{opacity:1;transform:scale(1)}30%{opacity:1}to{opacity:0;transform:scale(8)}}
.tgui-30064fce0d501f17{font-size:var(--tgui--subheadline1--font_size);line-height:var(--tgui--subheadline1--line_height)}.tgui-8f63cd31b2513281{font-size:var(--tgui--subheadline2--font_size);line-height:var(--tgui--subheadline2--line_height)}
.tgui-c3e2e598bd70eee6{font-family:var(--tgui--font-family)}.tgui-080a44e6ac3f4d27{margin:0}.tgui-5c92f90c2701fa17{font-weight:var(--tgui--font_weight--accent1)}.tgui-809f1f8a3f64154d{font-weight:var(--tgui--font_weight--accent2)}.tgui-5b8bdfbd2af10f59{font-weight:var(--tgui--font_weight--accent3)}.tgui-c602097b30e4ede9{text-transform:uppercase}
.tgui-2916d621b0ea5857{font-size:var(--tgui--caption1--font_size);line-height:var(--tgui--caption1--line_height)}.tgui-937d123c23df98b3{font-size:var(--tgui--caption2--font_size);line-height:var(--tgui--caption2--line_height)}
.tgui-65c206f0fd891b6b{font-size:var(--tgui--text--font_size);line-height:var(--tgui--text--line_height)}
.tgui-91c5537b51b490a7{border-radius:50%}.tgui-305551eb3f5abb68.tgui-305551eb3f5abb68{background-color:var(--tgui--secondary_fill);color:var(--tgui--link_color)}
.tgui-30d8642662534eb5{align-items:center;background-color:var(--tgui--tertiary_bg_color);box-shadow:0 0 0 1px var(--tgui--outline);display:flex;justify-content:center;position:relative}.tgui-1191c597a64dbd25{border-radius:inherit;display:block;height:100%;-o-object-fit:cover;object-fit:cover;position:absolute;visibility:hidden;width:100%}.tgui-72bd4140eca37f53 .tgui-1191c597a64dbd25{visibility:visible}.tgui-5ee2f1c6e1da49b5{align-items:center;display:flex;justify-content:center;position:absolute}
.tgui-e3bcc434a6ee9317{position:absolute;right:-12px;top:-12px}
.tgui-562f7459d74103ea{align-items:center;border-radius:20px;box-sizing:border-box;display:inline-flex;height:20px;justify-content:center;margin:0 6px;min-width:20px;padding:0 5px}.tgui-c1a5e9170826a773{height:24px;padding:0 6px}.tgui-4f69ed647e40e245{border-radius:50%;display:inline-block;height:6px;margin:7px;width:6px}.tgui-6e63faaa2b33f4ae{background:var(--tgui--button_color);color:var(--tgui--button_text_color)}.tgui-4b52474c713ffa7c{background:var(--tgui--destructive_text_color);color:var(--tgui--button_text_color)}.tgui-0278f262d68294f0{background:var(--tgui--secondary_fill);color:var(--tgui--link_color)}.tgui-0883e451f3707277{background:var(--tgui--plain_background);color:var(--tgui--plain_foreground)}.tgui-6b3dbcedd9052940{background:var(--tgui--white);color:var(--tgui--link_color)}
.tgui-e05fce4753086879{font-size:var(--tgui--headline--font_size);line-height:var(--tgui--headline--line_height)}
.tgui-c6d7432a5c12debe{font-size:var(--tgui--large_title--font_size);line-height:var(--tgui--large_title--line_height)}
.tgui-2fc52ee93e8068a6{font-size:var(--tgui--title1--font_size);line-height:var(--tgui--title1--line_height)}.tgui-72c2a480384c4fb1{font-size:var(--tgui--title2--font_size);line-height:var(--tgui--title2--line_height)}.tgui-45c5f45d3e9105f4{font-size:var(--tgui--title3--font_size);line-height:var(--tgui--title3--line_height)}
.tgui-54214e0db34f53c3{position:absolute;right:-12px;top:0}
.tgui-28e0a2576155be01{display:flex}.tgui-28e0a2576155be01>:not(:first-child){margin-left:-12px}.tgui-28e0a2576155be01>*{box-shadow:0 0 0 3px var(--tgui--bg_color)}
.tgui-c3d21871b48e0ba3{background:var(--tgui--bg_color);display:flex;gap:20px;overflow:hidden;padding:16px 20px;position:relative}.tgui-7b260d7ad33f3ba0:not(.tgui-f80265c401d577b0){box-shadow:var(--tgui--base--section--box_shadow)}.tgui-cefdf70a2d9648ea{border-radius:16px}.tgui-f80265c401d577b0{padding:20px}.tgui-f80265c401d577b0 .tgui-2646957e5c9379f3{color:var(--tgui--white)}.tgui-f80265c401d577b0 .tgui-62a759a0c54c3667{color:var(--tgui--white);opacity:.8}.tgui-d67d90bbcab86e14{background:var(--tgui--bg_color)}.tgui-7b260d7ad33f3ba0.tgui-d67d90bbcab86e14{border:1px solid var(--tgui--outline);border-radius:16px;box-shadow:none;margin:8px 20px}.tgui-cefdf70a2d9648ea.tgui-d67d90bbcab86e14{background:var(--tgui--quartenary_bg_color);margin:8px 16px}.tgui-11921b54915b369c{bottom:0;left:0;position:absolute;right:0;top:0}.tgui-a04b768cea14d789{display:flex;flex:1 1 0;flex-direction:column;gap:2px;z-index:var(--tgui--z-index--simple)}.tgui-62a759a0c54c3667{color:var(--tgui--subtitle_text_color)}.tgui-1e638bcb841cdfbc{color:var(--tgui--hint_color)}.tgui-5e0d89b3bc8342d8{display:flex;gap:4px;margin-top:10px}.tgui-fa2f2ea4a4ffc035{border-radius:50%;height:28px}
.tgui-79024fcb6d81ad79{background:var(--tgui--secondary_fill);border-left:3px solid var(--tgui--link_color);border-radius:4px;padding:6px 28px 8px 12px;position:relative}.tgui-16ed20e7a6e2daa0{color:var(--tgui--text_color)}.tgui-bd5b6cd161834705{display:block;position:absolute;right:6px;top:4px}
.tgui-6c9b3f1fd52a3108{color:var(--tgui--link_color)}
.tgui-117e77cd385a9c8d{align-items:center;border:none;border-radius:8px;box-sizing:border-box;display:inline-flex;justify-content:center;max-width:100%;min-width:80px;text-decoration:none}.tgui-726846958fe7f4a0{flex-grow:1;width:100%}.tgui-117e77cd385a9c8d:after{background:var(--tgui--bg_color);bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .15s ease-out}.tgui-06cc94d03a7c4dd7,.tgui-8310172a5320ab71{align-items:center;display:flex;justify-content:center}.tgui-5f6014c0f063b6de{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:var(--tgui--z-index--simple)}.tgui-014f2b7d196b090d.tgui-014f2b7d196b090d{align-items:center;background:inherit;border-radius:inherit;color:var(--tgui--button--spinner-color);cursor:auto;display:flex;height:100%;justify-content:center;position:absolute;width:100%}.tgui-13f23a224303ddaa{border-radius:20px;gap:6px;height:36px;min-width:34px;padding:8px 12px}.tgui-1a16a49d89076ff4{gap:8px;height:42px;min-width:42px;padding:8px 14px}.tgui-9cef742a22f195c9{gap:10px;height:50px;padding:10px 20px}.tgui-8a1ca9efa24f4809{--tgui--button--hovered-opacity:.15;--tgui--button--spinner-color:var(--tgui--button_text_color);background:var(--tgui--button_color);color:var(--tgui--button_text_color)}.tgui-91bda9a36246a33c{--tgui--button--hovered-opacity:.07;--tgui--button--spinner-color:var(--tgui--link_color);background:var(--tgui--secondary_fill);color:var(--tgui--link_color)}.tgui-48956537c34690db{--tgui--button--hovered-opacity:.03;--tgui--button--spinner-color:var(--tgui--plain_foreground);background:transparent;color:var(--tgui--link_color)}.tgui-93106efd6b6d66ee{background:var(--tgui--plain_background)}.tgui-93106efd6b6d66ee,.tgui-e884e36ff1faa596{--tgui--button--hovered-opacity:.5;--tgui--button--spinner-color:var(--tgui--plain_foreground);color:var(--tgui--plain_foreground)}.tgui-e884e36ff1faa596{background:inherit;box-shadow:0 0 0 1px var(--tgui--outline)}.tgui-ba6d30cc81e39ae5{--tgui--button--hovered-opacity:.5;--tgui--button--spinner-color:var(--tgui--surface_dark);background:var(--tgui--white)}.tgui-55e8aa7f5cea2280.tgui-1a16a49d89076ff4{border-radius:12px}.tgui-55e8aa7f5cea2280:after{content:unset}.tgui-490cb0f5ec4998f3 .tgui-06cc94d03a7c4dd7,.tgui-490cb0f5ec4998f3 .tgui-5f6014c0f063b6de,.tgui-490cb0f5ec4998f3 .tgui-8310172a5320ab71{opacity:0}@media (hover:hover) and (pointer:fine){.tgui-117e77cd385a9c8d:hover:after{opacity:var(--tgui--button--hovered-opacity)}}
.tgui-0ac8c3540e603b63{color:var(--tgui--link_color)}.tgui-562a3eae646b486d{color:var(--tgui--hint_color)}
.tgui-dbf261f4b3046bb3{background:var(--tgui--tertiary_bg_color);border-radius:20px;box-shadow:0 32px 64px 0 rgba(0,0,0,.04),0 0 2px 1px rgba(0,0,0,.02);display:inline-block;overflow:hidden;position:relative}.tgui-c6ad96fdf8ce4b28{background:var(--tgui--plain_foreground)}
.tgui-80c6a0ba7b3c11fd{--tgui--cell--middle--padding:16px 0;background:var(--tgui--card_bg_color);padding:0 20px}.tgui-814d1971a92687e3{--tgui--text_color:var(--tgui--white);--tgui--hint_color:hsla(0,0%,100%,.75);background:linear-gradient(180deg,transparent 0,var(--tgui--black) 100%);bottom:0;left:0;padding-top:48px;position:absolute;right:0}.tgui-422c21c917cc0873{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;white-space:break-spaces}.tgui-27c5a061c5f35c04{font-weight:var(--tgui--font_weight--accent2)}.tgui-814d1971a92687e3 .tgui-27c5a061c5f35c04{color:var(--tgui--white)}
.tgui-79efb12936705a6f{position:absolute;right:16px;top:16px}
.tgui-6372c64c79ad2959{align-items:center;border-radius:10px;box-sizing:border-box;display:inline-flex;gap:8px;justify-content:center;padding:8px 12px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tgui-b8b077d7e3491b30{background:var(--tgui--surface_primary);box-shadow:0 12px 24px 0 rgba(0,0,0,.05)}.tgui-ccc3e4a302799418{background:var(--tgui--plain_background)}.tgui-fdfccf8f92c11530{border-radius:10px;box-shadow:0 0 0 1px var(--tgui--outline)}.tgui-9c7ff8cd23a6ea9a{color:var(--tgui--plain_foreground);flex:1 1 0;overflow:hidden;text-overflow:ellipsis}.tgui-0d7ce20ebc0fc7aa{margin-right:2px}.tgui-67f596882eb2b6ab{align-items:center;color:var(--tgui--secondary_hint_color);display:flex;margin-top:1.5px}
.tgui-a8ce18a8594cea9b{align-items:center;background:transparent;border:none;box-sizing:border-box;color:var(--tgui--link_color);display:flex;gap:24px;height:48px;padding:10px 24px;width:100%}.tgui-6e7ca796043fe6ca{color:var(--tgui--destructive_text_color)}.tgui-f464dba82cb8b46e{gap:18px;height:44px;padding:8px 18px}
.tgui-c5be765fabc1327f{text-align:right}.tgui-437ab2028f14c95c{align-items:center;color:var(--tgui--secondary_hint_color);display:flex;gap:12px}.tgui-4af039094fb946b4{color:var(--tgui--hint_color);margin:2px 0 0}
.tgui-97dd747d03e9d3e0{align-items:center;color:var(--tgui--hint_color);display:flex;gap:8px}.tgui-64a5a0dc5509605e{flex-grow:1;overflow-wrap:anywhere}.tgui-3b026a2674eb3f4c{flex-shrink:0}
.tgui-dda0e80fdf796ba5{border:none;border-radius:12px;display:inline-flex;padding:8px}.tgui-b92d762e02762017{border-radius:50%;padding:6px}.tgui-93cba8aff2e72079{background:var(--tgui--secondary_fill);color:var(--tgui--link_color)}.tgui-08ef1486bc111162{background:transparent;color:var(--tgui--link_color)}.tgui-2250ff52f0b5cf71{background:var(--tgui--plain_background);color:var(--tgui--plain_foreground)}.tgui-53781f3cf83e8be1{background:inherit;box-shadow:0 0 0 1px var(--tgui--outline);color:var(--tgui--plain_foreground)}
.tgui-39e9f02ce4b4b950{display:flex;gap:12px}.tgui-b3d7f75461a64b76{gap:8px}
.tgui-c5545e0bc6105e48{align-items:center;background:transparent;border:none;border-radius:12px;box-sizing:border-box;color:var(--tgui--link_color);display:flex;flex:1 0 0;flex-direction:column;gap:3px;justify-content:center;max-width:100%;min-height:60px;min-width:64px;padding:0 12px}.tgui-bf32cd3c110b8729{gap:4px;min-height:64px;min-width:72px}.tgui-99a630d0096f2169{background:var(--tgui--secondary_fill)}.tgui-30bf4976f818e8bf{background:var(--tgui--plain_background);color:var(--tgui--plain_foreground)}.tgui-c0c9bf3b1a53a8a4{max-width:inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tgui-389a43acd684137a>:not(:last-child){margin-bottom:12px}.tgui-cfed40fe81d34ad5{box-sizing:border-box;padding:10px 18px}
.tgui-e5c3a5b87f8b1f46{align-items:center;display:flex;flex-direction:column;gap:24px;justify-content:center;overflow:hidden;padding:32px}.tgui-9c3dbc0ef84585d4{margin:0;overflow-wrap:anywhere;text-align:center}.tgui-87cd6af55f73428d{color:var(--tgui--hint_color)}.tgui-87cd6af55f73428d:not(:first-child){margin-top:8px}
.tgui-8e15431b81f6601e .tgui-db9be63c4fecf79b{background:var(--tgui--section_bg_color);box-shadow:0 1px 2px 0 rgba(0,0,0,.1)}.tgui-97eca24324122dbc .tgui-4b78bed6e925088e{background:var(--tgui--section_bg_color);border-radius:12px}.tgui-97eca24324122dbc .tgui-4b78bed6e925088e>:first-child{border-radius:12px 12px 0 0}.tgui-97eca24324122dbc .tgui-4b78bed6e925088e>:last-child{border-radius:0 0 12px 12px}.tgui-97eca24324122dbc .tgui-4b78bed6e925088e>:only-child{border-radius:12px}
.tgui-8af0d10d5540c6cc{border-top:none;border-color:var(--tgui--outline);border-width:var(--tgui--border--width);margin:0}
.tgui-dbb364e8ced00cc8{padding:12px 24px}.tgui-8c4c6f82ba895475{padding:8px 16px 0}.tgui-8ebba379083b615a{padding:16px 24px 20px;text-align:center}.tgui-8c4c6f82ba895475.tgui-8ebba379083b615a{padding:16px 16px 0}.tgui-67471b69da3e3062{color:var(--tgui--section_header_text_color)}
.tgui-d0251b46536ac046{color:var(--tgui--link_color);padding:20px 24px 4px 22px}.tgui-34fd1a25cc171439{color:var(--tgui--text_color);padding-left:24px}.tgui-b7217abb24e8763a{color:var(--tgui--section_header_text_color);padding:16px 16px 8px}.tgui-b7217abb24e8763a.tgui-34fd1a25cc171439{color:var(--tgui--text_color);padding:0 0 12px}
.tgui-f492b616576c67fb{display:flex;gap:9px;padding:12px}.tgui-d45985ba4cb27e5f{background:var(--tgui--tertiary_bg_color);border-radius:2px;height:3px;min-width:3px;width:100%}.tgui-352b8d247f473986{background:var(--tgui--link_color)}
.tgui-b53f1370d519b689{display:flex;flex-direction:column;gap:24px;margin:0;padding:32px 44px}.tgui-732e8859c58ffb77{flex-direction:row}
.tgui-4614301efc783534{display:flex;overflow-x:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:none}.tgui-4e145f66199825da::-webkit-scrollbar{display:none}
.tgui-caaaa27ccfa566b7{--tgui--timeline--item--thickness:4px;--tgui--timeline--item--size:12px;display:flex;gap:32px}.tgui-caaaa27ccfa566b7:last-child .tgui-3fc2f0d7045d23d8{display:none}.tgui-0f46575488c31b93{min-width:var(--tgui--timeline--item--size);position:relative}.tgui-d7ba9c56743387af{border-radius:50%;height:var(--tgui--timeline--item--size);left:0;top:4px;width:var(--tgui--timeline--item--size)}.tgui-3fc2f0d7045d23d8,.tgui-d7ba9c56743387af{background:var(--tgui--quartenary_bg_color);position:absolute}.tgui-3fc2f0d7045d23d8{border-radius:2px;bottom:0;height:calc(100% - 4px);left:50%;top:24px;transform:translateX(-50%);width:var(--tgui--timeline--item--thickness)}.tgui-bf9f87dd32ecad81{overflow:hidden}.tgui-2b850faa8f3a520a{display:inline-block;margin-bottom:4px}.tgui-b9a4d9afcd70e355{color:var(--tgui--hint_color)}.tgui-581d134185fd28b4 .tgui-d7ba9c56743387af,.tgui-dcd66bc07faad440 .tgui-3fc2f0d7045d23d8,.tgui-dcd66bc07faad440 .tgui-d7ba9c56743387af{background:var(--tgui--link_color)}.tgui-566b727e7a35e935 .tgui-0f46575488c31b93{--tgui--timeline--item--size:16px}.tgui-566b727e7a35e935 .tgui-d7ba9c56743387af{top:6px}.tgui-566b727e7a35e935 .tgui-3fc2f0d7045d23d8{height:calc(100% + 26px);top:6px}.tgui-f461f2eeb28c21d0{flex-direction:column;gap:24px}.tgui-f461f2eeb28c21d0 .tgui-0f46575488c31b93{align-items:center;display:flex;height:var(--tgui--timeline--item--size)}.tgui-f461f2eeb28c21d0 .tgui-d7ba9c56743387af{top:0}.tgui-f461f2eeb28c21d0 .tgui-3fc2f0d7045d23d8{height:var(--tgui--timeline--item--thickness);left:0;top:50%;transform:translateY(-50%);width:calc(100% + 36px)}.tgui-f461f2eeb28c21d0 .tgui-2b850faa8f3a520a{white-space:nowrap}
.tgui-81a5164cd16c05d5{stroke:var(--tgui--link_color);transform:rotate(-90deg)}
.tgui-ced47fd163a53511{border-radius:2px;height:4px;overflow:hidden;position:relative}.tgui-44060f289fdbdb84:after{bottom:0;content:"";left:0;opacity:.4;right:0;top:0}.tgui-027278a6d6708965,.tgui-44060f289fdbdb84:after{background:var(--tgui--link_color);position:absolute}.tgui-027278a6d6708965{border-radius:inherit;height:100%;transition:width .2s ease;z-index:var(--tgui--z-index--simple)}
.tgui-97f2df57786b02dc{position:relative}.tgui-3eb6091f664c15d6:after,.tgui-3eb6091f664c15d6:before{bottom:0;content:"";left:0;position:absolute;right:0;top:0;z-index:var(--tgui--z-index--simple)}.tgui-97f2df57786b02dc:before{background:var(--tgui--secondary_bg_color)}.tgui-97f2df57786b02dc:not(.tgui-ecf101b3117a96c8):after{animation:tgui-3a837cc9661e7502 1.8s linear infinite;background-color:var(--tgui--bg_color);z-index:var(--tgui--z-index--skeleton)}@keyframes tgui-3a837cc9661e7502{0%,to{opacity:.4}50%{opacity:.7}}
.tgui-bed09b0692380ce7{animation:tgui-738ce40067f9bb6e .34s cubic-bezier(.3,.3,.5,1);bottom:10px;box-sizing:border-box;left:10px;max-width:460px;position:fixed;right:10px;transition:transform .32s cubic-bezier(.3,.3,.5,1);-webkit-user-select:none;-moz-user-select:none;user-select:none}.tgui-a869502f11f22b6c{align-items:center;-webkit-backdrop-filter:blur(28px);backdrop-filter:blur(28px);background:var(--tgui--surface_dark);border-radius:10px;bottom:0;box-sizing:border-box;display:flex;gap:12px;left:0;padding:10px 16px 10px 10px;position:sticky;right:0;top:0;width:100%}.tgui-a1e25a2488982fc5{transform:translate3d(0,140%,0)}.tgui-c2ca59c94a46245e{bottom:16px}.tgui-c2ca59c94a46245e .tgui-a869502f11f22b6c{border-radius:14px}.tgui-093aea87229643ac,.tgui-229bfa1a0a8ac43f{align-items:center;color:var(--tgui--toast_accent_color);display:flex}.tgui-7d8f183ba67229e9{color:var(--tgui--white);display:flex;flex:1 1 0;flex-direction:column;gap:1px}@keyframes tgui-738ce40067f9bb6e{0%{transform:translate3d(0,140%,0)}to{transform:translateZ(0)}}
.tgui-4d26fba7185ffa9f{background:transparent;border:none;color:var(--tgui--toast_accent_color);padding:0}
.tgui-86f452d8e92a2075{display:table;position:relative}.tgui-86f452d8e92a2075:before{background-color:var(--tgui--bg_color);background-image:url(2d82b92e720462f8dd3b.svg);bottom:0;content:"";left:0;position:absolute;right:0;top:0;transition:.4s ease;z-index:var(--tgui--z-index--simple)}.tgui-aff2a6268e887037:before{opacity:0}
.tgui-abbb25a9ce45033e{cursor:pointer;position:relative}.tgui-6e9776e8c33b2626{cursor:default;opacity:.3}.tgui-21b20ecaad17ccf9{color:var(--tgui--outline);display:block}.tgui-bca5056bf34297b0{color:var(--tgui--link_color);opacity:0;position:absolute;top:0;transition:opacity .15s ease-out}.tgui-60cf4cc79ba44c4f:checked~.tgui-bca5056bf34297b0{opacity:1}
.tgui-b9fd8cdf929947df{height:1px;margin:-1px;padding:0;position:absolute;white-space:nowrap;width:1px;clip:rect(0,0,0,0);border:0;-webkit-clip-path:inset(50%);clip-path:inset(50%);opacity:0;overflow:hidden}
.tgui-a03137b1ed760aaf{display:flex;gap:10px;min-height:48px;padding:10px 12px 10px 16px}.tgui-ca1c0e2d013ae260{min-height:50px;padding:10px 16px}.tgui-f3ab78c8048cb9dc{align-items:center;background:conic-gradient(from 0deg at 50% 50%,#0c28ff 0deg,#03ffff 60deg,#24d627 120deg,#fdff22 180deg,#ff2227 240deg,#fe2df6 300deg,#7122ff 1turn);border-radius:50%;display:flex;height:24px;justify-content:center;position:relative;width:24px}.tgui-93beab8699996b1e{border-radius:50%;height:16px;width:16px}.tgui-93beab8699996b1e:after,.tgui-93beab8699996b1e:before{border-radius:inherit;content:"";position:absolute}.tgui-93beab8699996b1e:before{background:var(--tgui--bg_color);bottom:2px;left:2px;right:2px;top:2px}.tgui-93beab8699996b1e:after{background:inherit;bottom:4px;left:4px;right:4px;top:4px}.tgui-21dba5277ef0ddd7{flex:1 1 0}
.tgui-8ca550c2fc85eff5{background:var(--tgui--bg_color);padding:20px 22px 16px;position:relative}.tgui-8ca550c2fc85eff5 .tgui-9f9a52f695b85cc9{background:var(--tgui--bg_color);border-radius:5px;color:var(--tgui--secondary_hint_color);left:32px;max-width:calc(100% - 32px * 2 - 22px);overflow:hidden;padding:0 6px;position:absolute;text-overflow:ellipsis;top:6px;white-space:nowrap}.tgui-4a83fef1f04acb0e{pointer-events:none;position:relative}.tgui-7707c5d942b7b9af.tgui-4a83fef1f04acb0e{opacity:.35}.tgui-8ca550c2fc85eff5.tgui-4a83fef1f04acb0e:after{background:var(--tgui--bg_color);bottom:0;content:"";left:0;opacity:.5;position:absolute;right:0;top:0}.tgui-0f5050defacbf813{align-items:center;box-sizing:border-box;display:flex}.tgui-16b3783d394bc7db,.tgui-8f04eff653cfa5e5{display:flex}.tgui-8ca550c2fc85eff5 .tgui-0f5050defacbf813{border-radius:14px;box-shadow:0 0 0 2px var(--tgui--outline)}.tgui-8ca550c2fc85eff5.tgui-41b168516bddcf4b .tgui-9f9a52f695b85cc9{color:var(--tgui--destructive_text_color)}.tgui-8ca550c2fc85eff5.tgui-41b168516bddcf4b .tgui-0f5050defacbf813{box-shadow:0 0 0 2px var(--tgui--destructive_text_color)}.tgui-8ca550c2fc85eff5.tgui-89277928456f0e30 .tgui-9f9a52f695b85cc9{color:var(--tgui--link_color)}.tgui-8ca550c2fc85eff5.tgui-89277928456f0e30 .tgui-0f5050defacbf813{box-shadow:0 0 0 2px var(--tgui--link_color)}.tgui-7707c5d942b7b9af .tgui-0f5050defacbf813{background:var(--tgui--bg_color);border-radius:12px}.tgui-7707c5d942b7b9af.tgui-41b168516bddcf4b .tgui-0f5050defacbf813{box-shadow:0 0 0 1.5px var(--tgui--destructive_text_color)}
.tgui-d9de1f32aee12a15{gap:12px;padding:12px 16px}.tgui-9b2ad13855aef059{min-height:48px}.tgui-c4863cd4c893a047{background:transparent;border:0;box-sizing:border-box;color:var(--tgui--text_color);display:block;margin:0;outline:0;padding:0;resize:none;text-overflow:ellipsis;width:100%}.tgui-c4863cd4c893a047::-webkit-inner-spin-button,.tgui-c4863cd4c893a047::-webkit-outer-spin-button{-webkit-appearance:none}.tgui-c4863cd4c893a047::-moz-placeholder{color:var(--tgui--secondary_hint_color)}.tgui-c4863cd4c893a047::placeholder{color:var(--tgui--secondary_hint_color)}
.tgui-6cca8a28a056cc34{--tgui--multiselect--min-height:52px;min-height:var(--tgui--multiselect--min-height);position:relative;width:100%}.tgui-1ed7193796bd9fff.tgui-1ed7193796bd9fff{min-height:var(--tgui--multiselect--min-height);padding-right:48px}.tgui-e9b05eb8feaa0359{color:var(--tgui--secondary_hint_color);position:absolute;right:16px}
.tgui-c56e136f855e5144{--tgui--multiselect--gap:8px;box-sizing:border-box;display:flex;flex-grow:1;flex-shrink:1;flex-wrap:wrap;gap:var(--tgui--multiselect--gap);margin:0;max-width:100%;overflow:hidden;padding:8px;position:relative}.tgui-991d85450550abb9{max-width:calc(100% - var(--tgui--multiselect--gap));padding:6px 12px}.tgui-41e02fd2529dfbd2{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;box-shadow:none;color:var(--tgui--text_color);display:flex;flex:1;flex-direction:column;justify-content:center;outline:none;padding:0 8px;position:relative;width:100%}.tgui-41e02fd2529dfbd2::-moz-placeholder{color:var(--tgui--secondary_hint_color)}.tgui-41e02fd2529dfbd2::placeholder{color:var(--tgui--secondary_hint_color)}.tgui-41e02fd2529dfbd2[readonly]{cursor:default}.tgui-ac1d436c45aafe04 .tgui-41e02fd2529dfbd2{text-overflow:ellipsis;white-space:nowrap}.tgui-0b4134fd8d5c05ac{color:var(--tgui--hint_color);display:flex}
.tgui-70d34454bcf3c3e4{background:var(--tgui--bg_color);border-radius:12px;box-shadow:0 32px 64px 0 rgba(0,0,0,.04),0 0 2px 1px rgba(0,0,0,.02);box-sizing:border-box;margin-top:8px;max-height:168px;overflow-y:scroll;width:100%}.tgui-6a25d2bd42bb932c{color:var(--tgui--hint_color)}.tgui-15f9ec3c119467a6{height:48px;padding:0 16px}.tgui-e3f4e376df0c272c{color:var(--tgui--link_color)}
.tgui-e9c83f4f150e5513{z-index:var(--tgui--z-index--simple)}
.tgui-97a62789a70393d0{position:absolute}.tgui-6ae8c47f9448321b{content:"";display:block;transform:translateY(1px)}.tgui-6c3deae89ec68e99{transform:rotate(90deg) translate(50%,-50%);transform-origin:right}.tgui-fed67e27ad8cb75f{transform:rotate(180deg)}.tgui-b27d1c4f6222569e{transform:rotate(-90deg) translate(-50%,-50%);transform-origin:left}
.tgui-9bfdebc3fdae031b{cursor:pointer;position:relative}.tgui-55c1caaee1c1e33e{cursor:default;opacity:.25}.tgui-18734a5360b84fba{color:var(--tgui--outline);display:block}.tgui-1ec4b447aa5cf66a{color:var(--tgui--link_color);opacity:0;position:absolute;top:0}.tgui-18734a5360b84fba,.tgui-1ec4b447aa5cf66a{transition:opacity .15s ease-out}.tgui-7cd9bbef46d9194c:checked~.tgui-18734a5360b84fba{opacity:0}.tgui-7cd9bbef46d9194c:checked~.tgui-1ec4b447aa5cf66a{opacity:1}
.tgui-a641ca1e63331268{background:var(--tgui--bg_color);bottom:0;box-sizing:border-box;left:0;padding:32px 20px;position:fixed;right:0;top:0}.tgui-a40b67b8ec9e3a49,.tgui-a641ca1e63331268{align-items:center;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.tgui-a40b67b8ec9e3a49{flex:1 1 0;max-width:100%;text-overflow:ellipsis;white-space:nowrap}.tgui-bf64531d065e1bd9 .tgui-a40b67b8ec9e3a49{flex:unset}.tgui-7df9ee9d6d6586de,.tgui-a40b67b8ec9e3a49{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tgui-7df9ee9d6d6586de{max-width:100%;text-align:center}.tgui-36c453f0a9d51371{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:20px}.tgui-0e77c7f1a1b82c84{--tgui--pin_input--buttons-gap:12px;--tgui--pin_input--button-width:33.3%;display:flex;flex-direction:column;flex-wrap:wrap;gap:var(--tgui--pin_input--buttons-gap);margin-top:52px;width:100%}.tgui-bf64531d065e1bd9 .tgui-0e77c7f1a1b82c84{--tgui--pin_input--button-width:76px}.tgui-49b69c407401f76c{display:flex;gap:var(--tgui--pin_input--buttons-gap);justify-content:center}.tgui-49b69c407401f76c:last-child{justify-content:flex-end}.tgui-fa5069ea6f3c02e4:last-child{margin-left:calc(var(--tgui--pin_input--buttons-gap) * 2)}.tgui-bf64531d065e1bd9 .tgui-49b69c407401f76c:last-child{justify-content:center}.tgui-bf64531d065e1bd9 .tgui-fa5069ea6f3c02e4:last-child{margin-left:calc(var(--tgui--pin_input--button-width) + var(--tgui--pin_input--buttons-gap))}.tgui-c793c3252df33bb0{color:var(--tgui--link_color);display:block;margin:auto}
.tgui-6eaa561b38208c72{background:var(--tgui--tertiary_bg_color);border:none;border-radius:16px;color:var(--tgui--text_color);height:56px;padding:0;width:var(--tgui--pin_input--button-width)}.tgui-3bea52c968cee224{border-radius:50%;height:76px;width:76px}
.tgui-bad1e0d3a612c110{align-items:center;background:var(--tgui--bg_color);border:2.5px solid var(--tgui--divider);border-radius:12px;display:flex;height:44px;justify-content:center;padding:0;transition:border-color .15s ease-out;width:40px}.tgui-b9a1527d00258387{background:var(--tgui--link_color);border:none;border-radius:50%;height:13px;opacity:.1;width:13px}.tgui-b9a1527d00258387.tgui-1d6fb1351888c5e0{opacity:1}.tgui-bad1e0d3a612c110:focus-within{border-color:var(--tgui--link_color)}.tgui-9fa4f4531187df59{background:var(--tgui--text_color);border-radius:50%;height:8px;width:8px}
.tgui-de477a8e3910f19f{cursor:pointer;display:block;position:relative}.tgui-d5c5e7402bfd8c12{cursor:default;opacity:.25}.tgui-bfcd091645843388{color:var(--tgui--outline);display:block}.tgui-8d2d5ba97b4abd79{color:var(--tgui--link_color);opacity:0;position:absolute;top:0}.tgui-8d2d5ba97b4abd79,.tgui-bfcd091645843388{transition:opacity .15s ease-out}.tgui-743a4b0f25e5d51b:checked~.tgui-bfcd091645843388{opacity:0}.tgui-743a4b0f25e5d51b:checked~.tgui-8d2d5ba97b4abd79{opacity:1}
.tgui-0487bdb4329cd879{display:flex;gap:4px;padding:12px;position:relative}.tgui-6169bc2e9d6fdeb8{color:var(--tgui--tertiary_bg_color);position:relative}.tgui-6169bc2e9d6fdeb8:focus-visible{outline:2px solid var(--tgui--link_color)}.tgui-f0faaa15f44569ba{color:var(--tgui--link_color);position:absolute}.tgui-52ba7059852e9950{bottom:0;margin:0;opacity:0;position:absolute;top:0}
.tgui-919c5658483cae11{position:relative}.tgui-a0742fd4c73756f7{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:inherit;border:none;border-radius:inherit;color:var(--tgui--text_color);outline:none;padding:12px 58px 12px 16px;width:100%}.tgui-025a45d791e466f6{color:var(--tgui--secondary_hint_color);pointer-events:none;position:absolute;right:16px;top:50%;transform:translateY(-50%)}
.tgui-aa094d6480bfa32a{cursor:pointer;position:relative}.tgui-7d31e315f5cc4733{cursor:default;opacity:.25}.tgui-ad96577f259c5732{color:var(--tgui--link_color);display:block;opacity:0;transition:opacity .15s ease-out}.tgui-6988c618806a5171:checked~.tgui-ad96577f259c5732{opacity:1}
.tgui-717c3649db8d5af2{--tgui--slider--thumb--size:12px;align-items:center;box-sizing:border-box;display:flex;gap:24px;min-height:52px;padding:16px 24px}.tgui-35faba867393ce37{border-radius:8px;cursor:pointer;height:var(--tgui--slider--thumb--size);position:relative;width:100%}.tgui-c591a831de13ba23{cursor:default;opacity:.35}.tgui-4de4feff2dcc975c,.tgui-e11a455378c63b15{border-radius:inherit;height:3px;left:0;margin-top:-1px;position:absolute;top:50%}.tgui-e11a455378c63b15{align-items:center;background-color:var(--tgui--tertiary_bg_color);box-sizing:border-box;display:flex;justify-content:space-between;width:100%}.tgui-4de4feff2dcc975c{background:var(--tgui--button_color);width:auto}.tgui-7fe9f0fbc9771947{height:100%;isolation:isolate;margin-left:calc(var(--tgui--slider--thumb--size) / 10);margin-right:calc(var(--tgui--slider--thumb--size) / 10);position:relative;z-index:var(--tgui--z-index--simple)}.tgui-6598607160233201,.tgui-a56564bcfd4b56e5{align-items:center;display:flex;justify-content:center;margin-top:3px}.tgui-d2e2a2e28ef0f746{--tgui--slider--thumb--size:24px;gap:20px;padding:20px}.tgui-d2e2a2e28ef0f746 .tgui-4de4feff2dcc975c,.tgui-d2e2a2e28ef0f746 .tgui-e11a455378c63b15{height:4px;margin-top:-2px}
.tgui-b632646f586ff14d{background:var(--tgui--secondary_hint_color);border-radius:50%;height:2px;position:absolute;width:2px}.tgui-2b0a006b5a9ffd68{background:var(--tgui--secondary_hint_color);opacity:.35}.tgui-7951a89b824476b3{background:var(--tgui--tertiary_bg_color);border-radius:3px;height:20px;width:4px}.tgui-7951a89b824476b3.tgui-2b0a006b5a9ffd68{background:var(--tgui--button_color);opacity:1}.tgui-b632646f586ff14d:not(.tgui-7951a89b824476b3):first-child{transform:translateX(50%)}.tgui-b632646f586ff14d:last-child{transform:translateX(-150%)}.tgui-7951a89b824476b3:last-child{transform:translateX(-100%)}
.tgui-83b7253102c6addc{background:var(--tgui--button_color);border-radius:50%;height:var(--tgui--slider--thumb--size);position:absolute;top:50%;transform:translate(-50%,-50%);-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--tgui--slider--thumb--size);z-index:var(--tgui--z-index--simple)}.tgui-96f5864d281f94a8{background:var(--tgui--white);box-shadow:0 6px 6.5px rgba(0,0,0,.12),0 .5px 2px rgba(0,0,0,.12)}.tgui-abdeb837bfc726cb{height:100%;width:100%}
.tgui-a1dc55b304d32032{align-items:center;border-radius:16px;cursor:pointer;display:flex;height:32px;overflow:hidden;position:relative;width:52px}.tgui-57a00e000de7483d{cursor:default;opacity:.4}.tgui-3acc6d0262399734:before{background:var(--tgui--secondary_bg_color);bottom:0;content:"";left:0;position:absolute;right:0;top:0}.tgui-2776944549f431fc .tgui-3acc6d0262399734:before{border:3px solid var(--tgui--secondary_hint_color);border-radius:16px}.tgui-3acc6d0262399734:after{border-radius:50%;content:"";position:absolute;top:50%;transform:translateY(-50%)}.tgui-2776944549f431fc .tgui-3acc6d0262399734:after{background:var(--tgui--secondary_hint_color);height:16px;margin-left:8px;width:16px}.tgui-b70ccb0e7742541a .tgui-3acc6d0262399734:after{background:var(--tgui--white);box-shadow:0 3px 1px 0 rgba(0,0,0,.06),0 3px 8px 0 rgba(0,0,0,.15),0 0 0 1px rgba(0,0,0,.04);height:28px;margin-left:2px;width:28px}.tgui-edfaab8ff474b0de:checked+.tgui-3acc6d0262399734:before{background-color:var(--tgui--link_color);border-color:var(--tgui--link_color)}.tgui-2776944549f431fc .tgui-edfaab8ff474b0de:checked+.tgui-3acc6d0262399734:after{height:24px;width:24px}.tgui-edfaab8ff474b0de:checked+.tgui-3acc6d0262399734:after{transform:translateX(20px) translateY(-50%)}.tgui-2776944549f431fc .tgui-edfaab8ff474b0de:checked+.tgui-3acc6d0262399734:after{background:var(--tgui--white);transform:translateX(16px) translateY(-50%)}@media (prefers-reduced-motion:no-preference){.tgui-3acc6d0262399734:before{transition:background-color,border-color 67ms linear}.tgui-3acc6d0262399734:after{transition:transform .3s cubic-bezier(.175,.885,.32,1.275) 0s}.tgui-b70ccb0e7742541a .tgui-3acc6d0262399734:before{transition:background-color .2s ease}.tgui-b70ccb0e7742541a .tgui-3acc6d0262399734:after{transition:transform .2s cubic-bezier(.36,-.24,.26,1.32)}}
.tgui-d40ec83150e66029{background:inherit;border:none;border-radius:inherit;color:var(--tgui--text_color);min-height:80px;outline:none;padding:12px 16px;resize:none;width:100%}.tgui-d40ec83150e66029::-moz-placeholder{color:var(--tgui--secondary_hint_color)}.tgui-d40ec83150e66029::placeholder{color:var(--tgui--secondary_hint_color)}.tgui-2453b62de8016bfa .tgui-d40ec83150e66029{min-height:84px;padding:16px}
.tgui-7a5facec9dc28fae{left:0;position:fixed;right:0}.tgui-d83e15d73344cdc0{top:0}.tgui-01790b7e59088ea5{bottom:0;padding-bottom:var(--tgui--safe_area_inset_bottom)}
.tgui-53cb2ebed0c3b08f{background:var(--tgui--surface_primary);box-shadow:0 -1px 0 var(--tgui--divider);display:flex;justify-items:stretch;padding:0 16px}.tgui-a2b4713d67582227{padding:0}
.tgui-64cd0db020a9bacf{align-items:center;background:transparent;border:none;color:var(--tgui--secondary_hint_color);display:flex;flex:1 0 0;flex-direction:column;gap:6px;justify-content:center;margin:0;max-width:100%;min-width:0;padding:12px 16px 16px;transition:.15s ease-out}.tgui-ecbb746748ea4134{gap:4px;padding:8px 12px 4px}.tgui-e6658d0b8927f95e{color:var(--tgui--link_color)}.tgui-e6658d0b8927f95e:not(.tgui-ecbb746748ea4134) .tgui-44d48e11585af170{background:var(--tgui--secondary_fill)}.tgui-44d48e11585af170{border-radius:35px;display:flex;justify-content:center;min-width:64px;padding:2px 10px}.tgui-ecbb746748ea4134 .tgui-44d48e11585af170{padding:0}.tgui-aeab497081949a15{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tgui-0eddcd83377979c2,.tgui-68fc52f1068b8e16{align-items:center;display:flex}.tgui-0eddcd83377979c2{color:var(--tgui--divider);height:20px;justify-content:center;margin:0 -6px;width:24px}.tgui-a9c3d618b6e43d64{color:var(--tgui--link_color)}
.tgui-32fe6ce00169d72e{border-radius:8px;color:var(--tgui--hint_color);cursor:pointer;padding:8px 10px;text-decoration:none;transition:opacity .15s ease-out}.tgui-32fe6ce00169d72e:active{opacity:.5}@media (hover:hover) and (pointer:fine){.tgui-32fe6ce00169d72e:hover{background:var(--tgui--tertiary_bg_color)}}
.tgui-442a9579d6c19dc4{--tgui--compact_pagination--dot--opacity--selected:.1;--tgui--compact_pagination--dot--background--selected:var(--tgui--link_color);display:inline-flex;gap:8px;padding:4px}.tgui-15adbef8fe5efed9{backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);background:rgba(0,0,0,.25);border-radius:28px;padding:8px 9px}.tgui-15adbef8fe5efed9,.tgui-cdc228e9d92dac5b{--tgui--compact_pagination--dot--opacity--selected:.25;--tgui--compact_pagination--dot--background--selected:var(--tgui--white);gap:6px}.tgui-cdc228e9d92dac5b{padding:0}
.tgui-747563e660315b07{background:var(--tgui--compact_pagination--dot--background--selected,var(--tgui--link_color));border:none;border-radius:50%;cursor:pointer;display:block;height:8px;opacity:var(--tgui--compact_pagination--dot--opacity--selected,.25);padding:0;transition:opacity .15s ease-in-out;width:8px}.tgui-6d14364fac453a65{opacity:1}
.tgui-bfabaddd169233a9{color:var(--tgui--link_color);text-decoration:none}
.tgui-38580a5c868cecc4{display:flex;gap:8px;padding:16px}.tgui-645f8efe8c9c3cc5{opacity:.35}.tgui-8dab5cf704c88e82{align-items:center;background:transparent;border:none;border-radius:12px;box-sizing:border-box;color:var(--tgui--hint_color);cursor:pointer;display:flex;height:44px;justify-content:center;min-width:44px;padding:0 10px}.tgui-64016be270020f33{background:var(--tgui--tertiary_bg_color);color:var(--textColor)}.tgui-a43e090d3501d4ca{cursor:default;opacity:.35}.tgui-670c6b2f3c8df445{cursor:default;opacity:1}.tgui-2636b28cb21c42cc{color:var(--tgui--link_color)}
.tgui-71259e3311d7116e{background:var(--tgui--tertiary_bg_color);border-radius:44px;box-sizing:border-box;height:100%;overflow:hidden;padding:2px;width:100%}.tgui-b0a9057ab5d33005{align-content:stretch;align-items:center;border-radius:inherit;box-sizing:border-box;display:flex;height:100%;position:relative;width:100%}.tgui-31f461ccfea23ec3{background:var(--tgui--segmented_control_active_bg);border-radius:40px;bottom:0;box-sizing:border-box;left:0;position:absolute;right:0;top:0;transition:transform .15s;z-index:var(--tgui--z-index--simple)}.tgui-16c6b1986a48e2b5{background:var(--tgui--tertiary_bg_color);border-radius:9px}.tgui-16c6b1986a48e2b5 .tgui-31f461ccfea23ec3{border:var(--tgui--border--width) solid rgba(0,0,0,.04);border-radius:inherit;box-shadow:0 3px 1px 0 rgba(0,0,0,.04),0 3px 8px 0 rgba(0,0,0,.12)}
.tgui-bbfb272d22eb23e8{background:transparent;border:none;border-radius:inherit;color:var(--tgui--text_color);flex:1 1 0;max-width:100%;overflow:hidden;padding:10px 24px;text-overflow:ellipsis;white-space:nowrap;z-index:var(--tgui--z-index--simple)}.tgui-513fce1023cbbd63{padding:6px 24px}
.tgui-89d3925598b8fd68{align-content:stretch;align-items:center;display:flex;gap:12px;height:100%;overflow:hidden;position:relative;width:100%}.tgui-8e986e14448c29e6{background:var(--tgui--button_color);border-radius:4px 4px 1px 1px;bottom:0;height:3px;left:0;position:absolute;right:0;transition:transform 125ms}
.tgui-96892ceed80c1bf3{background:transparent;border:none;border-radius:inherit;color:var(--tgui--secondary_hint_color);flex:1 0 0;height:44px;max-width:100%;overflow:hidden;text-overflow:ellipsis;transition:color 125ms;white-space:nowrap}.tgui-44ea091aea23df33{color:var(--tgui--link_color)}
.tgui-cc76354712c6e8d9{background-color:var(--tgui--bg_color);border-top-left-radius:16px;border-top-right-radius:16px;bottom:0;display:flex;flex-direction:column;left:0;max-height:96%;outline:none;position:fixed;right:0;z-index:var(--tgui--z-index--overlay)}.tgui-2c53ae2ef0209d4d{align-items:center;border-bottom:1px solid var(--tgui--divider);display:flex;justify-content:space-between;padding:16px}.tgui-5dc6ad1ca3ac3ed4{overflow-y:auto;padding-bottom:var(--tgui--safe_area_inset_bottom)}
.tgui-f67c8fb3553eee55{align-items:center;box-sizing:border-box;display:flex;gap:12px;justify-content:space-between;padding:16px;position:relative}.tgui-f67c8fb3553eee55:before{background:var(--tgui--divider);border-radius:4px;content:"";height:4px;left:50%;position:absolute;top:8px;transform:translateX(-50%);width:36px}.tgui-09b5f6cfd7ba56ab,.tgui-fe1d6742d85038d7{align-items:center;display:flex;flex:1 0 0}.tgui-09b5f6cfd7ba56ab{justify-content:flex-start}.tgui-fe1d6742d85038d7{justify-content:flex-end}.tgui-7ce1022bfdcb0ae3{--tgui--text--line_height:28px;display:block;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.tgui-3197096cb603b35a{bottom:0;left:0;position:fixed;right:0;top:0;z-index:var(--tgui--z-index--overlay)}
.tgui-5638a4ef4e806d8c{background:var(--tgui--white);border-radius:12px;box-shadow:0 8px 24px 0 rgba(0,0,0,.1);color:var(--tgui--black);padding:10px}.tgui-bc60ca772e3ae3c6{background:var(--tooltip_background_dark);box-shadow:none}.tgui-5638a4ef4e806d8c .tgui-e0107e1e5ea5b9f3,.tgui-bc60ca772e3ae3c6{color:var(--tgui--white)}.tgui-bc60ca772e3ae3c6 .tgui-e0107e1e5ea5b9f3{color:var(--tooltip_background_dark)}.tgui-e37c114229ebfe85 .tgui-bc60ca772e3ae3c6{backdrop-filter:blur(50px);-webkit-backdrop-filter:blur(50px)}
.tgui-6a12827a138e8827{--tgui--font-family:system-ui,-apple-system,BlinkMacSystemFont,"Roboto","Apple Color Emoji","Helvetica Neue",sans-serif;--tgui--font_weight--accent1:700;--tgui--font_weight--accent2:600;--tgui--font_weight--accent3:400;--tgui--large_title--font_size:34px;--tgui--large_title--line_height:42px;--tgui--title1--font_size:28px;--tgui--title1--line_height:36px;--tgui--title2--font_size:24px;--tgui--title2--line_height:32px;--tgui--title3--font_size:20px;--tgui--title3--line_height:24px;--tgui--headline--font_size:19px;--tgui--headline--line_height:28px;--tgui--text--font_size:17px;--tgui--text--line_height:26px;--tgui--subheadline1--font_size:16px;--tgui--subheadline1--line_height:24px;--tgui--subheadline2--font_size:15px;--tgui--subheadline2--line_height:22px;--tgui--caption1--font_size:13px;--tgui--caption1--line_height:20px;--tgui--caption2--font_size:11px;--tgui--caption2--line_height:16px;--tgui--border--width:1px;--tgui--base--section--box_shadow:0 1px 2px 0 rgba(0,0,0,.1);--tgui--bg_color:var(--tg-theme-bg-color,#fff);--tgui--text_color:var(--tg-theme-text-color,#000);--tgui--hint_color:var(--tg-theme-hint-color,#707579);--tgui--link_color:var(--tg-theme-link-color,#007aff);--tgui--button_color:var(--tg-theme-button-color,#007aff);--tgui--button_text_color:var(--tg-theme-button-text-color,#fff);--tgui--secondary_bg_color:var(--tg-theme-secondary-bg-color,#efeff4);--tgui--header_bg_color:var(--tg-theme-header-bg-color,#fff);--tgui--accent_text_color:var(--tg-theme-accent-text-color,#007aff);--tgui--section_bg_color:var(--tg-theme-section-bg-color,#fff);--tgui--section_header_text_color:var(--tg-theme-section-header-text-color,#707579);--tgui--subtitle_text_color:var(--tg-theme-subtitle-text-color,#707579);--tgui--destructive_text_color:var(--tg-theme-destructive-text-color,#e53935);--tgui--skeleton:hsla(0,0%,100%,.03);--tgui--divider:rgba(0,0,0,.15);--tgui--outline:rgba(0,0,0,.05);--tgui--surface_primary:hsla(0,0%,100%,.95);--tgui--tertiary_bg_color:#f4f4f7;--tgui--quartenary_bg_color:#f6f6fa;--tgui--segmented_control_active_bg:#fff;--tgui--card_bg_color:#fff;--tgui--secondary_hint_color:#a2acb0;--tgui--secondary_fill:rgba(67,120,255,.1);--tgui--green:#31d158;--tgui--destructive_background:#e53935;--tgui--primary_code_highlight:#4378ff;--tgui--secondary_code_highlight:#b00fb4;--tgui--tertiary_code_highlight:#3a9f20;--tgui--plain_background:rgba(0,0,0,.04);--tgui--plain_foreground:rgba(0,0,0,.8);--tgui--toast_accent_color:#55a6ff;--tgui--surface_dark:rgba(56,56,56,.85);--tooltip_background_dark:rgba(0,0,0,.85);--tgui--white:#fff;--tgui--black:#000;--tgui--z-index--simple:1;--tgui--z-index--skeleton:2;--tgui--z-index--overlay:3;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;color:var(--tgui--text_color)}.tgui-56dbb42c1dbd5e2b{--tgui--large_title--line_height:41px;--tgui--title1--line_height:34px;--tgui--title2--line_height:28px;--tgui--title3--line_height:25px;--tgui--headline--line_height:24px;--tgui--text--line_height:22px;--tgui--subheadline1--line_height:21px;--tgui--subheadline2--line_height:20px;--tgui--caption1--line_height:16px;--tgui--caption2--line_height:13px}.tgui-865b921add8ee075{--tgui--bg_color:var(--tg-theme-bg-color,#212121);--tgui--text_color:var(--tg-theme-text-color,#fff);--tgui--hint_color:var(--tg-theme-hint-color,#aaa);--tgui--link_color:var(--tg-theme-link-color,#2990ff);--tgui--button_color:var(--tg-theme-button-color,#2990ff);--tgui--button_text_color:var(--tg-theme-button-text-color,#fff);--tgui--secondary_bg_color:var(--tg-theme-secondary-bg-color,#0f0f0f);--tgui--header_bg_color:var(--tg-theme-header-bg-color,#212121);--tgui--accent_text_color:var(--tg-theme-accent-text-color,#007aff);--tgui--section_bg_color:var(--tg-theme-section-bg-color,#212121);--tgui--section_header_text_color:var(--tg-theme-section-header-text-color,#aaa);--tgui--subtitle_text_color:var(--tg-theme-subtitle-text-color,#aaa);--tgui--destructive_text_color:var(--tg-theme-destructive-text-color,#e53935);--tgui--skeleton:hsla(0,0%,100%,.03);--tgui--divider:hsla(0,0%,100%,.05);--tgui--outline:hsla(0,0%,100%,.1);--tgui--surface_primary:hsla(0,0%,9%,.95);--tgui--tertiary_bg_color:#2a2a2a;--tgui--quartenary_bg_color:#2f2f2f;--tgui--segmented_control_active_bg:#2f2f2f;--tgui--card_bg_color:#242424;--tgui--secondary_hint_color:#78797e;--tgui--secondary_fill:rgba(41,144,255,.15);--tgui--green:#32e55e;--tgui--destructive_background:rgba(255,35,35,.02);--tgui--primary_code_highlight:#2990ff;--tgui--secondary_code_highlight:#e937ed;--tgui--tertiary_code_highlight:#5ae536;--tgui--plain_background:hsla(0,0%,100%,.08);--tgui--plain_foreground:hsla(0,0%,100%,.95)}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx){.tgui-6a12827a138e8827{--tgui--border--width:.5px}}@supports (padding-top:constant(safe-area-inset-bottom)){.tgui-6a12827a138e8827{--tgui--safe_area_inset_bottom:constant(safe-area-inset-bottom)}}@supports (padding-top:env(safe-area-inset-bottom)){.tgui-6a12827a138e8827{--tgui--safe_area_inset_bottom:env(safe-area-inset-bottom)}}@supports (color:color-mix(in srgb,var(--tgui--accent_text_color ) 10%,transparent)){.tgui-6a12827a138e8827{--tgui--secondary_fill:color-mix(in srgb,var(--tgui--accent_text_color) 10%,transparent)}.tgui-865b921add8ee075{--tgui--secondary_fill:color-mix(in srgb,var(--tgui--accent_text_color) 15%,transparent)}}


/* ==================================================================
   MaxBridge v2 — оформление по образцу Telegram для Android.
   Все цвета — из темы Telegram (--tg-theme-*), поэтому приложение само
   подстраивается под тему, выбранную у пользователя в Telegram.
   ================================================================== */

:root {
  --bg: var(--tg-theme-bg-color, #17212b);
  --bg2: var(--tg-theme-secondary-bg-color, #0e1621);
  --header: var(--tg-theme-header-bg-color, #242f3d);
  --text: var(--tg-theme-text-color, #f5f5f5);
  --hint: var(--tg-theme-hint-color, #7f91a4);
  --subtitle: var(--tg-theme-subtitle-text-color, var(--hint));
  --link: var(--tg-theme-link-color, #6ab3f3);
  --accent: var(--tg-theme-accent-text-color, #6ab2f2);
  --button: var(--tg-theme-button-color, #5288c1);
  --button-text: var(--tg-theme-button-text-color, #ffffff);
  --danger: var(--tg-theme-destructive-text-color, #ec3942);
  --section: var(--tg-theme-section-bg-color, var(--bg));
  --separator: color-mix(in srgb, var(--hint) 18%, transparent);

  /* Всё остальное — смеси цветов темы, без своих цветов. Пропорции
     подобраны по скриншотам Telegram (docs/screens/tg/) в тёмной теме. */
  --surface: color-mix(in srgb, var(--text) 6%, var(--bg)); /* поиск, таблетки в списке */
  --folders-bg: color-mix(in srgb, var(--button) 6%, color-mix(in srgb, var(--text) 3%, var(--bg)));
  --folder-active: color-mix(in srgb, var(--button) 16%, color-mix(in srgb, var(--text) 6%, var(--bg)));
  --switch-on: color-mix(in srgb, var(--button) 60%, var(--hint));
  --switch-off: color-mix(in srgb, var(--hint) 50%, var(--section));
  /* Меню и поле ввода — чуть светлее фона, с оттенком цвета кнопок. */
  --menu-bg: color-mix(in srgb, var(--button) 8%, color-mix(in srgb, var(--text) 4%, var(--bg)));
  --menu-sep: color-mix(in srgb, var(--button) 5%, var(--bg));
  --composer-bg: color-mix(in srgb, var(--text) 8%, var(--header));

  /* Переписка: входящий пузырь — цвета фона, свой — цвет кнопок,
     приглушённый серым (как в Telegram). */
  --chat-bg: var(--bg2);
  --bubble-in: var(--bg);
  --bubble-in-text: var(--text);
  --bubble-in-meta: var(--hint);
  --bubble-out: color-mix(in srgb, var(--button) 45%, color-mix(in srgb, var(--text) 18%, var(--bg)));
  --bubble-out-text: var(--text);
  --bubble-out-meta: color-mix(in srgb, var(--text) 72%, transparent);
  --bubble-out-accent: var(--text);
  --service-bg: rgba(0, 0, 0, 0.3);

  /* Отступы сверху и снизу. --top-inset — высота полосы с кнопками
     Telegram в полноэкранном режиме (fullscreen.js), иначе 0. Снизу —
     системная полоса: её даёт браузер (env) или Telegram в полноэкранном. */
  --top-inset: 0px;
  --sab: max(env(safe-area-inset-bottom, 0px), var(--tg-bottom-inset, 0px));

  /* Углы пузырей: 17 — «Углы блоков с сообщениями» в эталоне; к соседу
     по серии — маленький угол. Хвостиков нет, как на скриншотах. */
  --radius: 17px;
  --radius-small: 6px;

  color-scheme: dark;
}

:root[data-scheme="light"] {
  color-scheme: light;
  --surface: color-mix(in srgb, var(--text) 5%, var(--bg));
  --folders-bg: color-mix(in srgb, var(--button) 5%, color-mix(in srgb, var(--text) 3%, var(--bg)));
  --folder-active: color-mix(in srgb, var(--button) 14%, var(--bg));
  --switch-off: color-mix(in srgb, var(--hint) 45%, var(--section));
  --menu-bg: var(--bg);
  --menu-sep: var(--bg2);
  --composer-bg: var(--bg);
  --chat-bg: color-mix(in srgb, var(--button) 12%, var(--bg2));
  --bubble-out: color-mix(in srgb, var(--button) 16%, var(--bg));
  --bubble-out-meta: color-mix(in srgb, var(--button) 65%, var(--hint));
  --bubble-out-accent: var(--button);
  --service-bg: color-mix(in srgb, var(--text) 30%, transparent);
  --separator: color-mix(in srgb, var(--text) 8%, transparent);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body,
#root {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font: 16px/1.3 Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* AppRoot из telegram-ui задаёт свои шрифт и фон — выравниваем с нашими. */
.app {
  position: relative;
  /* Не var(--tg-viewport-height): её обновляет только Telegram, и после
     возврата из свёрнутого состояния она могла остаться почти нулевой —
     виден был один фон (аудит №14). html/body/#root и так на всю высоту. */
  height: 100%;
  overflow: hidden;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.layer {
  position: absolute;
  inset: 0;
}

.layer[hidden] {
  display: none;
}



@keyframes slide-in {
  from {
    transform: translateX(30%);
    opacity: 0.3;
  }
}

.screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
}

.center {
  display: flex;
  justify-content: center;
  padding: 48px 0;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  color: var(--text);
  opacity: 0.9;
  transition: background 0.15s;
}

.icon-btn:active {
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

/* ---------- Верхняя панель (как тулбар Telegram на Android) ---------- */

.toolbar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  height: calc(56px + var(--top-inset));
  padding: var(--top-inset) 4px 0 4px;
  background: var(--header);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  position: relative;
  z-index: 3;
}

/* Полноэкранный режим: «назад» — кнопка Telegram над шапкой, своя не нужна. */
.fullscreen .nav-back {
  display: none;
}

.fullscreen .chat-toolbar:not(.selection-toolbar) {
  padding-left: 12px;
}

/* Экраны вкладок без своей шапки — ниже полосы с кнопками Telegram. */
.tab-screen > .list:first-child {
  padding-top: var(--top-inset);
}

.toolbar-title {
  flex: 1;
  padding-left: 16px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.1px;
}

.toolbar-search {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 18px;
  caret-color: var(--accent);
}

.toolbar-search::placeholder {
  color: var(--hint);
}

/* ---------- Аватарка ---------- */

.avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  font-weight: 500;
  user-select: none;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- Список чатов ---------- */

.list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Размеры списка — по tg-chat-list.jpg (1 px CSS = 2,86 px скриншота). */
.list-top {
  padding: 2px 11px 5px;
}

.search-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  background: var(--surface);
  color: var(--hint);
}

.search-pill input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  caret-color: var(--accent);
}

.search-pill input::placeholder {
  color: var(--hint);
}

.search-clear {
  display: flex;
  color: var(--hint);
}

/* Папки: «таблетка» с вкладками, активная — подсвеченная. */
.folders {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  padding: 3px;
  border-radius: 18px;
  background: var(--folders-bg);
  overflow-x: auto;
  scrollbar-width: none;
}

.folders::-webkit-scrollbar {
  display: none;
}

.folder {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  color: var(--hint);
  font-size: 16px;
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
}

.folder.active {
  background: var(--folder-active);
  color: var(--accent);
}

/* Счётчик у папки — по tg-chat-list.jpg: у неактивной светло-серая
   капсула с тёмным числом, у активной — цвета акцента. */
.folder-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--hint) 70%, var(--text));
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
}

.folder.active .folder-count {
  background: var(--accent);
  color: var(--bg);
}

.row {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 70px;
  padding: 0 12px 0 11px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.row:active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

@media (hover: hover) {
  .row:hover {
    background: color-mix(in srgb, var(--text) 5%, transparent);
  }
}

.row-main {
  flex: 1;
  min-width: 0;
}

.row-line {
  display: flex;
  align-items: center;
  gap: 6px;
}

.row-line + .row-line {
  margin-top: 4px;
}

.row-title {
  min-width: 0;
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-muted {
  display: flex;
  flex-shrink: 0;
  color: var(--hint);
  opacity: 0.8;
}

.row-time {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 6px;
  font-size: 14px;
  color: var(--hint);
}

.row-time.accent {
  color: var(--accent);
}

.row-time.pinned {
  height: 24px;
  padding: 0 9px 0 7px;
  border-radius: 12px;
  background: var(--surface);
}

.row-time.pinned svg {
  width: 14px;
  height: 14px;
}

.row-sub {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-sender {
  color: var(--text);
}

.row-draft {
  color: var(--danger);
}

/* Вложение в превью («🖼 Фото», «Стикер», «Голосовое…») — голубое,
   как на tg-chat-list-select.jpg. */
.row-sub-text.attach {
  color: var(--accent);
}

/* Галочки у своего последнего сообщения — перед временем. */
.row-ticks {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--accent);
}

.row-ticks svg {
  width: 19px;
  height: 13px;
}

.row-ticks + .row-time {
  margin-left: 0;
}

/* ---------- Строка: свайп, выбор, перетаскивание ---------- */

.row-wrap {
  position: relative;
  overflow: hidden;
}

.row-wrap .row {
  position: relative;
  touch-action: pan-y;
}

/* Пока строка едет, под ней цветная подложка — строка непрозрачная. */
.row-wrap.swiping .row {
  background: var(--bg);
  transition: none;
}

.row-swipe-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 18px;
  color: #fff;
}

.row-swipe-bg.swipe-pin {
  background: var(--accent);
}

.row-swipe-bg.swipe-mute {
  background: #7d8b99;
}

.row-swipe-bg.swipe-read {
  background: #4fae4e;
}

.row-swipe-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 64px;
  font-size: 12px;
  font-weight: 500;
  opacity: var(--swipe-p, 0);
  transform: scale(calc(0.55 + 0.45 * var(--swipe-p, 0)));
}

.row-swipe-bg.armed .row-swipe-icon {
  animation: swipe-armed 0.32s cubic-bezier(0.3, 1.7, 0.5, 1);
}

@keyframes swipe-armed {
  40% {
    transform: scale(1.18);
  }
}

/* Галочка выбора на аватарке — tg-chat-list-select.jpg. */
.row-avatar {
  position: relative;
  display: flex;
  flex-shrink: 0;
}

.row-check {
  position: absolute;
  right: -3px;
  bottom: -3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border: 2.5px solid var(--bg);
  border-radius: 50%;
  background: #3ebc58;
  color: #fff;
  transform: scale(0);
  transition: transform 0.18s ease-in;
  pointer-events: none;
}

.row-check svg {
  width: 14px;
  height: 14px;
  stroke-width: 3.2;
}

.row-check.on {
  transform: scale(1);
  transition: transform 0.34s cubic-bezier(0.3, 1.7, 0.5, 1);
}

/* «=» у закреплённых в режиме выбора — за неё перетаскивают. */
.row-drag {
  display: flex;
  flex-shrink: 0;
  margin: -8px -6px -8px auto;
  padding: 8px 6px;
  color: var(--hint);
  touch-action: none;
  cursor: grab;
  animation: fade 0.2s ease-out;
}

.row-wrap.dragging {
  z-index: 3;
  overflow: visible;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.row-wrap.dragging .row {
  background: color-mix(in srgb, var(--text) 6%, var(--bg));
}

.row-wrap.drag-shift {
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Шапка списка: обычная и панель выбора лежат друг на друге и
   плавно сменяются. */
.chats-head {
  position: relative;
  flex-shrink: 0;
  height: calc(56px + var(--top-inset));
  overflow: hidden;
  transition: height 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Поиск открыт — шапка с именем уезжает вверх, поле поиска поднимается
   на её место (tg-search.jpg). */
.chats-head.collapsed {
  height: var(--top-inset);
}

.chats-head.collapsed > .chats-main-header {
  opacity: 0;
  transform: translateY(-18px);
  pointer-events: none;
}

.chats-head > .main-header {
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.chats-head.selecting > .chats-main-header {
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
}

.chats-head > .list-select-bar {
  position: absolute;
  inset: 0;
  justify-content: flex-start;
  padding-right: 0;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
}

.chats-head.selecting > .list-select-bar {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.list-select-bar .icon-btn:not(:first-child) {
  width: 42px;
}

.list-select-count {
  flex: 1;
  padding-left: 8px;
  font-size: 20px;
  font-weight: 500;
  animation: count-pop 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.badge {
  flex-shrink: 0;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 12px;
  background: var(--button);
  color: var(--button-text);
  font-size: 14px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
}

.badge-muted {
  background: color-mix(in srgb, var(--hint) 45%, var(--bg));
  color: var(--text);
}

/* ---------- Экран переписки ---------- */

.chat-toolbar {
  gap: 0;
}

.chat-toolbar .avatar {
  margin: 0 12px 0 0;
}

/* Шапка чата и закреп — поверх ленты (В10). Лента под ними видна сквозь
   полупрозрачную шапку; её высоту лента оставляет пустой (--chat-top-h). */
.chat {
  position: relative;
}

.chat-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

.chat-top .toolbar {
  box-shadow: none;
}

/* Размытие — только если включены анимации (settings.js, класс blur-ok):
   на слабом телефоне оно может тормозить прокрутку. Без него шапка
   непрозрачная. */
.blur-ok .chat-top .toolbar {
  background: color-mix(in srgb, var(--header) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

.chat-header-text {
  flex: 1;
  min-width: 0;
}

.chat-title {
  font-size: 18px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-status {
  margin-top: 1px;
  font-size: 14px;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-status.live {
  color: var(--accent);
}

/* Фон переписки (В6): тёмный, с мягкими размытыми пятнами цвета, как
   обои на эталоне. Только цвета темы. Не прокручивается вместе с лентой. */
/* Обои ленты — переменная --wallpaper: классические и цветовые темы
   задаются в конце файла («ТЕМЫ ЧАТОВ»). */
.messages-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  background: var(--wallpaper);
}

.messages {
  height: 100%;
  display: flex;
  flex-direction: column-reverse;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: calc(var(--chat-top-h, 56px) + 4px) 9px calc(var(--composer-h, 64px) + 8px);
  /* Отступ под строкой ввода меняется сразу, без анимации: анимация
     отступа пересчитывала бы всю ленту на каждом кадре. Плавность даёт
     ChatScreen (сдвиг ленты через transform). */
}

.history-start,
.older-loading {
  display: flex;
  justify-content: center;
  margin: 8px 0;
  font-size: 13px;
  color: var(--hint);
}

.empty-chat {
  margin: 40vh auto 0;
  width: fit-content;
  padding: 6px 14px;
  border-radius: 14px;
  background: var(--service-bg);
  color: #fff;
  font-size: 14px;
}

/* --- Дни и служебные сообщения --- */

.day {
  position: relative;
}

.date-row {
  position: sticky;
  /* Отсчёт — от края ленты под шапкой (без её поля сверху). */
  top: 6px;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 8px 0 6px;
  pointer-events: none;
}

.service-row {
  display: flex;
  justify-content: center;
  margin: 6px 0;
}

/* Плашка даты — по эталону: высота ≈24, текст 15. */
.date-pill,
.service {
  max-width: 85%;
  padding: 3px 10px 3px;
  border-radius: 12px;
  background: var(--service-bg);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.service.deleted {
  font-style: italic;
  font-weight: 400;
}

/* --- Строка сообщения --- */

/* Отступы по эталону: внутри серии 3, новая серия 7, смена стороны 11. */
.msg-row {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-top: 3px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-y;
}

.msg-row.series-first {
  margin-top: 7px;
}

.msg-row.in + .msg-row.out,
.msg-row.out + .msg-row.in {
  margin-top: 11px;
}

/* Документы подряд — один общий пузырь (см. docJoined в ChatScreen.jsx). */
.msg-row.join-prev {
  margin-top: 0;
}

.bubble.join-prev,
.bubble.join-next {
  width: min(100%, 320px);
}

/* !important — сильнее правил углов в серии (ниже). */
.bubble.join-prev {
  --r-tl: 0px !important;
  --r-tr: 0px !important;
  padding-top: 2px;
}

.bubble.join-next {
  --r-bl: 0px !important;
  --r-br: 0px !important;
  padding-bottom: 2px;
}

.msg-row.out {
  justify-content: flex-end;
  padding-left: 48px;
}

.msg-row.in {
  padding-right: 48px;
}

/* Аватарка 42, в 6 от края экрана, до пузыря 12 (В12). */
.msg-avatar {
  flex-shrink: 0;
  width: 42px;
  margin: 0 3px 0 -3px;
}

.msg-row.highlight .bubble {
  animation: flash 1.6s ease-out;
}

@keyframes flash {
  0%,
  30% {
    filter: brightness(1.45);
  }
}

/* --- Пузырь --- */

/* Высота однострочного пузыря ≈32, строка ≈21, поля 11 — по эталону. */
.bubble {
  position: relative;
  max-width: min(100%, 460px);
  min-width: 64px;
  padding: 5px 11px 6px;
  border-radius: var(--radius);
  font-size: 16px;
  line-height: 1.33;
  overflow-wrap: anywhere;
}

.bubble.in {
  background: var(--bubble-in);
  color: var(--bubble-in-text);
  margin-left: 2px;
}

.bubble.out {
  background: var(--bubble-out);
  color: var(--bubble-out-text);
  margin-right: 2px;
}

/* Углы пузыря — через переменные: их же берут фото внутри пузыря.
   В серии углы к соседу маленькие, остальные — полные. */
.bubble {
  --r-tl: var(--radius);
  --r-tr: var(--radius);
  --r-bl: var(--radius);
  --r-br: var(--radius);
  border-radius: var(--r-tl) var(--r-tr) var(--r-br) var(--r-bl);
}

.msg-row.in:not(.series-first) .bubble.in {
  --r-tl: var(--radius-small);
}

.bubble.in:not(.last) {
  --r-bl: var(--radius-small);
}

.msg-row.out:not(.series-first) .bubble.out {
  --r-tr: var(--radius-small);
}

.bubble.out:not(.last) {
  --r-br: var(--radius-small);
}

.bubble.bare {
  background: transparent;
  padding: 0;
  min-width: 0;
}

/* Фото и видео — во всю ширину пузыря с тонкой рамкой цвета пузыря
   (≈2px, как в AyuGram: tg-chat-files.jpg, tg-album-8.jpg). Рамка же
   отделяет подряд идущие альбомы друг от друга. */
.bubble.visual {
  --frame: 2px;
  padding-left: var(--frame);
  padding-right: var(--frame);
  overflow: visible;
}

.bubble.visual > .sender,
.bubble.visual > .forwarded,
.bubble.visual > .quote,
.bubble.visual > .msg-text,
.bubble.visual > .reactions,
.bubble.visual > .link-card,
.bubble.visual > .meta-line {
  margin-left: 9px;
  margin-right: 9px;
}

.bubble.visual-top {
  padding-top: var(--frame);
}

.bubble.visual-bottom {
  padding-bottom: var(--frame);
}

.sender {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.forwarded {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 4px;
  font-size: 14.5px;
  line-height: 1.25;
  color: var(--accent);
}

.forwarded svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.forwarded b {
  font-weight: 500;
}

.bubble.out .forwarded {
  color: var(--bubble-out-accent);
}

.quote {
  --quote: var(--accent);
  position: relative;
  margin: 2px 0 5px;
  padding: 4px 8px 5px 11px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--quote) 13%, transparent);
  font-size: 15px;
  line-height: 1.25;
  cursor: pointer;
  overflow: hidden;
}

.quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--quote);
}

.bubble.out .quote {
  background: color-mix(in srgb, var(--bubble-out-accent) 12%, transparent);
}

.bubble.out .quote::before {
  background: var(--bubble-out-accent);
}

.quote-sender {
  font-weight: 500;
  color: var(--quote);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bubble.out .quote-sender {
  color: var(--bubble-out-accent);
}

.quote-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-text {
  white-space: pre-wrap;
}

.msg-text.muted {
  opacity: 0.7;
}

.msg-link {
  color: var(--link);
  cursor: pointer;
}

.bubble.out .msg-link {
  color: var(--bubble-out-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.bubble.big-emoji .msg-text {
  font-size: 56px;
  line-height: 1.1;
}

/* --- Время и галочки --- */

.meta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  color: var(--bubble-in-meta);
}

.bubble.out .meta {
  color: var(--bubble-out-meta);
}

.meta-edited {
  margin-right: 2px;
}

/* Время в конце последней строки: распорка — невидимая копия времени
   (с «изм.» и галочками), поэтому места под него ровно столько, сколько
   нужно. Не помещается в последнюю строку — переносится на новую, и время
   встаёт под текстом, как в Telegram. Высота 1px — чтобы копия не
   раздвигала строку. */
.meta.meta-spacer {
  visibility: hidden;
  height: 1px;
  overflow: hidden;
  margin-left: 8px;
  vertical-align: baseline;
}

.msg-text > .meta:not(.meta-spacer) {
  position: absolute;
  right: 10px;
  bottom: 7px;
}

.meta-line {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

.bubble.visual-bottom > .meta-line {
  margin-bottom: 6px;
}

/* Время поверх фото или стикера — на тёмной «таблетке». */
.meta-over {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 1;
}

/* На фото — в ≈6px от его края (с учётом рамки), как в AyuGram. */
.bubble.visual > .meta-over {
  right: 8px;
  bottom: 8px;
}

.meta-over .meta,
.bubble.out .meta-over .meta,
.bubble.bare .meta-line .meta {
  padding: 3px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

.ticks {
  display: inline-flex;
}

/* У своих сообщений место под значок одной ширины — часы, одна и две
   галочки: пузырь не меняет ширину, когда часы сменяются галочкой. */
.bubble.out .ticks {
  width: 17px;
  justify-content: flex-end;
}

.ticks.failed svg {
  width: 14px;
  height: 14px;
}

.msg-row.failed .bubble {
  opacity: 0.85;
}

/* --- Медиа --- */

.media {
  position: relative;
  border-radius: inherit;
  overflow: hidden;
  cursor: pointer;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.bubble.visual .media {
  border-radius: 0;
}

/* Углы фото — те же, что у пузыря, за вычетом рамки (концентрично). */
.bubble.visual .media.first {
  border-top-left-radius: max(3px, calc(var(--r-tl) - var(--frame)));
  border-top-right-radius: max(3px, calc(var(--r-tr) - var(--frame)));
}

.bubble.visual .media.last {
  border-bottom-left-radius: max(3px, calc(var(--r-bl) - var(--frame)));
  border-bottom-right-radius: max(3px, calc(var(--r-br) - var(--frame)));
}

.media + .media {
  margin-top: 2px;
}

.bubble.visual > .media + .msg-text,
.bubble.visual > .media + .reactions {
  margin-top: 6px;
}

.bubble.visual > .sender,
.bubble.visual > .forwarded,
.bubble.visual > .quote {
  margin-top: 0;
}

.bubble.visual:not(.visual-top) > .media.first-media {
  margin-top: 4px;
}

/* Фото — в своих пропорциях, как в Telegram: широкие во всю ширину
   пузыря, высокие — уже, но не выше 60% экрана. */
.media img {
  display: block;
  max-width: 100%;
  width: auto;
  height: auto;
  min-width: 180px;
  min-height: 120px;
  max-height: min(460px, 60vh);
  object-fit: cover;
}

.bubble.visual .media img {
  width: 100%;
}

.media-loading {
  width: 260px;
  max-width: 100%;
  height: 200px;
  animation: pulse 1.2s ease-in-out infinite alternate;
}

@keyframes pulse {
  from {
    opacity: 0.35;
  }
  to {
    opacity: 0.85;
  }
}

.media-video {
  width: 260px;
  max-width: 100%;
  height: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2f4050, #18222c);
}

/* Видео с известными пропорциями — как фото, по своей форме. */
.media-video.sized {
  /* Без 100%: у пузыря ширина по содержимому, проценты тут не работают. */
  width: min(315px, calc(min(460px, 60vh) * var(--ratio, 1)));
  max-width: 100%;
  height: auto;
}

/* Обложка (превью MAX или первый кадр) — на всю плашку видео. */
.media-video > img,
.media.media-video > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  object-fit: cover;
}

.media-play {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  padding-left: 3px;
}

/* Длительность видео — капсула слева сверху, как в Telegram. */
.media-duration {
  position: absolute;
  z-index: 1;
  left: 6px;
  top: 6px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
}

/* --- Альбом: сетка фото и видео (tg-album-8.jpg) ---
   Высота ячеек задана пропорциями — до загрузки картинок, поэтому лента
   не прыгает. Внешние углы — по углам пузыря, внутренние прямые. */

.bubble.album {
  width: min(315px, 100%);
}

.album-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  width: 100%;
  overflow: hidden;
  border-radius: 0;
}

.bubble.visual .album-grid.first {
  border-top-left-radius: max(3px, calc(var(--r-tl) - var(--frame)));
  border-top-right-radius: max(3px, calc(var(--r-tr) - var(--frame)));
}

.bubble.visual .album-grid.last {
  border-bottom-left-radius: max(3px, calc(var(--r-bl) - var(--frame)));
  border-bottom-right-radius: max(3px, calc(var(--r-br) - var(--frame)));
}

.bubble.visual:not(.visual-top) > .album-grid.first-media {
  margin-top: 4px;
}

.bubble.visual > .album-grid + .msg-text,
.bubble.visual > .album-grid + .reactions {
  margin-top: 6px;
}

/* У каждой ячейки свои чуть скруглённые углы; зазор — цвета пузыря. */
.album-grid > .media {
  width: auto;
  height: auto;
  min-width: 0;
  margin: 0;
  aspect-ratio: 0.85;
}

.bubble .album-grid > .media {
  border-radius: 3px;
}

.album-grid > .media > img,
.album-grid > .media > video,
.album-grid > .media > .media-loading {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-height: none;
  object-fit: cover;
}

/* 2 — рядом, высота по пропорциям фото (или чуть вытянутая). */
.album-grid.n2 > .media {
  aspect-ratio: var(--pair-ratio, 0.8);
}

/* 3 — крупное сверху, два под ним. */
.album-grid.n3 > .media:first-child {
  grid-column: span 2;
  aspect-ratio: 1.6;
}

.album-grid.n3 > .media:not(:first-child) {
  aspect-ratio: 1.1;
}

/* 4 — 2×2. */
.album-grid.n4 > .media {
  aspect-ratio: 1;
}

/* 5–10 — по 2 в ряд; нечётное число — первое на всю ширину. */
.album-grid.n5.odd > .media:first-child {
  grid-column: span 2;
  aspect-ratio: 1.6;
}

.album-grid .media-play {
  width: 40px;
  height: 40px;
}

.sticker {
  width: 180px;
  height: 180px;
}

.sticker img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Голосовое --- */

.voice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 230px;
  padding: 2px 0 2px;
}

.voice-play {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--button);
  color: var(--button-text);
}

.bubble.out .voice-play {
  background: var(--bubble-out-accent);
  color: var(--bubble-out-solid, var(--bubble-out));
}

.voice-track {
  flex: 1;
  min-width: 0;
}

.voice-wave {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  cursor: pointer;
}

.voice-wave span {
  flex: 1;
  max-width: 3px;
  min-height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--accent) 38%, transparent);
}

.voice-wave span.on {
  background: var(--accent);
}

.bubble.out .voice-wave span {
  background: color-mix(in srgb, var(--bubble-out-accent) 40%, transparent);
}

.bubble.out .voice-wave span.on {
  background: var(--bubble-out-accent);
}

.voice-time {
  margin-top: 4px;
  font-size: 13px;
  color: var(--bubble-in-meta);
}

.bubble.out .voice-time {
  color: var(--bubble-out-meta);
}

/* --- Файл --- */

.file {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  padding: 3px 0 4px;
  cursor: pointer;
}

.file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--button);
  color: var(--button-text);
}

.bubble.out .file-icon {
  background: var(--bubble-out-accent);
  color: var(--bubble-out);
}

.file-main {
  min-width: 0;
}

.file-name {
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-meta {
  font-size: 14px;
  margin-top: 3px;
  color: var(--bubble-in-meta);
}

.bubble.out .file-meta {
  color: var(--bubble-out-meta);
}

/* Картинка, отправленная файлом: квадратная миниатюра слева, у края
   пузыря с небольшим полем (tg-chat-files.jpg). */
.file.with-thumb {
  align-items: flex-start;
  gap: 12px;
  padding: 0;
}

.file-thumb-box {
  position: relative;
  flex-shrink: 0;
  width: 82px;
  height: 82px;
}

.file-thumb {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.file-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-thumb .media-loading {
  width: 100%;
  height: 100%;
}

.file.with-thumb .file-main {
  flex: 1;
  padding-top: 9px;
}

.bubble.file-photo {
  width: min(315px, 100%);
  padding: 4px 11px 4px 4px;
}

/* Углы миниатюры слева повторяют углы пузыря. */
.bubble.file-photo .file-thumb {
  border-radius: max(4px, calc(var(--r-tl) - 4px)) 6px 6px max(4px, calc(var(--r-bl) - 4px));
}

.bubble.file-photo > .meta-line {
  position: absolute;
  right: 11px;
  bottom: 8px;
  margin: 0;
}

/* --- Карточка ссылки --- */

.link-card {
  position: relative;
  margin: 5px 0 2px;
  padding: 5px 10px 7px 12px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  cursor: pointer;
  overflow: hidden;
}

.link-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.bubble.out .link-card {
  background: color-mix(in srgb, var(--bubble-out-accent) 10%, transparent);
}

.bubble.out .link-card::before {
  background: var(--bubble-out-accent);
}

.link-card-site {
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
}

.bubble.out .link-card-site {
  color: var(--bubble-out-accent);
}

.link-card-title {
  font-size: 15px;
  font-weight: 500;
  margin-top: 2px;
}

.link-card-desc {
  font-size: 15px;
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.link-card-image {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: 6px;
  margin-top: 7px;
}

/* --- Реакции ---
   По ReactionsLayoutInBubble (Telegram для Android) и
   tg-chat-reactions.jpg: плашка 26 в высоту, промежутки 4; слева 8,
   эмодзи 20; дальше число (жирное 12, через 2, справа 8) или аватарки
   по 20 внахлёст с шагом 16 (через 4, справа 3). Чужая — акцентный цвет
   ≈22% поверх пузыря и белое число, своя — сплошной акцентный; в своём
   пузыре своя — почти белая. */

.reactions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 4px;
  margin-top: 6px;
}

.reaction {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 26px;
  padding: 0 8px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--button) 22%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
}

.reaction.with-users {
  gap: 4px;
  padding-right: 3px;
}

.reaction-emoji {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 18px;
  line-height: 1;
}

.reaction-count {
  min-width: 7px;
  font-variant-numeric: tabular-nums;
}

.reaction-users {
  display: flex;
  align-items: center;
}

.reaction-users .avatar {
  flex: none;
}

.reaction-users .avatar + .avatar {
  margin-left: -4px;
}

/* Под следующей аватаркой — вырез по кругу, как в AvatarsDrawable. */
.reaction-users .avatar:not(:last-child) {
  -webkit-mask: radial-gradient(circle at calc(100% + 6px) 50%, transparent 11.2px, #000 11.8px);
  mask: radial-gradient(circle at calc(100% + 6px) 50%, transparent 11.2px, #000 11.8px);
}

.reaction.mine {
  background: var(--button);
  color: var(--button-text);
}

.bubble.out .reaction {
  background: color-mix(in srgb, var(--bubble-out-accent) 16%, transparent);
  color: var(--bubble-out-accent);
}

.bubble.out .reaction.mine {
  background: color-mix(in srgb, var(--bubble-out-accent) 82%, transparent);
  color: var(--bubble-out);
}

/* --- Кто поставил реакцию (долгое нажатие на плашку) ---
   По tg-reaction-users.jpg и ReactedUsersListView: фон размыт, сообщение
   чёткое на своём месте; карточка 240–280, строка 50, аватарка 34 (слева
   10), имя 16 (с 55), подпись 13 с сердечком; видно до 6 строк. */

.ru-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  animation: fade 0.18s ease-out;
  transition: opacity 0.15s ease;
}

.ru-overlay.leaving {
  opacity: 0;
}

.ru-copy {
  position: fixed;
  pointer-events: none;
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ru-copy .msg-row {
  animation: none;
}

.ru-card {
  position: fixed;
  left: 0;
  top: 0;
  width: max-content;
  min-width: 240px;
  max-width: 280px;
  max-height: calc(50px * 6);
  overflow-y: auto;
  border-radius: 14px;
  background: var(--menu-bg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  opacity: 0;
}

.ru-card.ready {
  opacity: 1;
  animation: menu-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.15);
  transform-origin: 30px 0;
}

.ru-row {
  display: flex;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 0 12px 0 10px;
  text-align: left;
  color: var(--text);
}

button.ru-row:active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.ru-row .avatar {
  flex: none;
}

.ru-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  min-width: 0;
  margin-left: 11px;
}

.ru-name {
  overflow: hidden;
  font-size: 16px;
  line-height: 20px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ru-sub {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 1px;
  font-size: 13px;
  line-height: 16px;
  color: var(--hint);
  white-space: nowrap;
}

.ru-skeleton .ru-avatar {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

.ru-skeleton .ru-line {
  width: 120px;
  height: 12px;
  margin-left: 11px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  animation: ru-pulse 1s ease-in-out infinite alternate;
}

@keyframes ru-pulse {
  to {
    opacity: 0.4;
  }
}

.ru-empty {
  max-width: 260px;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.35;
  color: var(--hint);
}

/* --- Все реакции (раскрытая панель меню) ---
   По tg-reactions-all.jpg: ≈308×310, строка поиска 36 со значками
   разделов, сетка по 8 с шагом 36, эмодзи ≈29. */

.reaction-panel {
  display: flex;
  flex-direction: column;
  width: 308px;
  max-width: calc(100vw - 16px);
  height: 310px;
  max-height: calc(100vh - 16px);
  border-radius: 16px;
  background: var(--header);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: expand-grid 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.rp-search {
  display: flex;
  align-items: center;
  flex: none;
  gap: 6px;
  height: 36px;
  margin: 8px 8px 4px;
  padding: 0 4px 0 10px;
  border-radius: 18px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--hint);
}

.rp-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.rp-search input::placeholder {
  color: var(--hint);
}

.rp-cat {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--hint);
}

.rp-cat.active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: var(--accent);
}

.rp-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 0 10px 8px;
}

.rp-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.rp-grid .reaction-pick {
  width: 100%;
  height: 40px;
}

.rp-empty {
  padding: 24px 0;
  text-align: center;
  color: var(--hint);
}

/* Размеры эмодзи-картинок в реакциях и панелях. */
.reaction .emoji.reaction-emoji {
  width: 20px;
  height: 20px;
  vertical-align: 0;
}

.reaction-pick .emoji {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

.ep-item .emoji {
  width: 32px;
  height: 32px;
  vertical-align: middle;
}

.reactions-meta {
  margin-left: auto;
  padding: 0 0 1px 8px;
}

/* --- Кнопка «вниз» --- */

.scroll-down {
  position: absolute;
  right: 10px;
  bottom: calc(var(--composer-h, 64px) + 12px);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--header);
  color: var(--hint);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: scale(0.4) translateY(20px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.25s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.scroll-down.show {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@keyframes pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

.scroll-down-count {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border-radius: 12px;
  background: var(--button);
  color: var(--button-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 23px;
}

/* --- Строка ввода: «таблетка» и круглая кнопка, как в новом Telegram --- */

.composer {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 6px 9px 8px 8px;
  padding-bottom: calc(8px + var(--sab));
  background: transparent;
  position: relative;
  z-index: 2;
}

.chat .composer {
  margin-top: calc(-1 * var(--composer-h, 64px));
  pointer-events: none;
}

.composer > * {
  pointer-events: auto;
}

/* Одна «таблетка» ≈47 в высоту, кнопка отправки — внутри справа. */
.composer-pill {
  flex: 1;
  min-width: 0;
  border-radius: 24px;
  background: var(--composer-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.composer-row {
  display: flex;
  align-items: flex-end;
}

.composer-emoji {
  width: 50px;
  height: 47px;
  color: var(--hint);
}

.composer-emoji.active {
  color: var(--accent);
}

.composer textarea {
  flex: 1;
  min-height: 47px;
  max-height: 150px;
  padding: 12px 8px 12px 0;
  border: none;
  outline: none;
  resize: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  line-height: 1.35;
  caret-color: var(--accent);
}

.composer textarea::placeholder {
  color: var(--hint);
}

/* Поле ввода с эмодзи-картинками (EmojiInput) — как прежнее текстовое
   поле: растёт до 150, дальше прокрутка. */
.composer .emoji-input {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 47px;
  max-height: 150px;
  overflow-y: auto;
  padding: 12px 8px 12px 0;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  caret-color: var(--accent);
  -webkit-user-select: text;
  user-select: text;
}

.emoji-input[data-empty="1"]::before {
  content: attr(data-placeholder);
  position: absolute;
  color: var(--hint);
  pointer-events: none;
}

/* --- Эмодзи картинками (emoji.jsx) ---
   Картинка — фон, а сам символ внутри прозрачный: выделение и копирование
   дают обычные эмодзи. Размер — 1.2 высоты текста, как в Telegram. */
.emoji {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.24em;
  overflow: hidden;
  background-repeat: no-repeat;
  color: transparent;
  -webkit-text-fill-color: transparent;
  line-height: 1.2em;
  white-space: nowrap;
  text-align: center;
}

img.emoji {
  margin: 0 0.02em;
}

.send-round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 3.5px 3.5px 3.5px 0;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--header);
  color: var(--hint);
  transition: background 0.2s, color 0.2s, transform 0.15s;
}

.send-round.ready {
  background: var(--button);
  color: var(--button-text);
}

.send-round.ready:active {
  transform: scale(0.92);
}

.send-round svg {
  width: 22px;
  height: 22px;
  margin-left: 2px;
}

.send-round.ready {
  animation: pop 0.2s cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* Ответ / правка — полоска над полем ввода внутри «таблетки». */
.compose-context {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px 2px 16px;
}

.compose-context-icon {
  display: flex;
  color: var(--accent);
}

.compose-context-main {
  flex: 1;
  min-width: 0;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
}

.compose-context-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
}

.compose-context-text {
  font-size: 15px;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.icon-btn.small {
  width: 40px;
  height: 40px;
  color: var(--hint);
}

.emoji-panel {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  max-height: 260px;
  overflow-y: auto;
  padding: 6px 8px calc(8px + var(--sab));
  background: var(--bg);
  border-top: 1px solid var(--separator);
}

.emoji-item {
  height: 44px;
  font-size: 28px;
  line-height: 1;
  border-radius: 10px;
}

.emoji-item:active {
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

/* ---------- Меню сообщения ---------- */

/* Как в Telegram: переписка под меню почти не затемняется. */
.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.12);
  animation: fade 0.15s ease-out;
}

.menu-box {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  max-width: calc(100vw - 16px);
  opacity: 0;
}

.menu-box.ready {
  opacity: 1;
  animation: menu-in 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes menu-in {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
}

/* Полоска реакций по tg-chat-menu.jpg: высота ≈51, шаг эмодзи ≈39,
   сами эмодзи ≈30, 7 штук и стрелка «все реакции». */
.reaction-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 4px 8px;
  border-radius: 26px;
  background: var(--header);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* «Хвостик» облачка из двух кружков к сообщению (tg-chat-menu.jpg). */
.reaction-bar {
  position: relative;
}

.reaction-bar::before,
.reaction-bar::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--header);
  pointer-events: none;
}

.reaction-bar::before {
  right: 26px;
  bottom: -6px;
  width: 14px;
  height: 14px;
}

.reaction-bar::after {
  right: 21px;
  bottom: -17px;
  width: 8px;
  height: 8px;
}

.reaction-bar.expanded::before,
.reaction-bar.expanded::after {
  display: none;
}

.reaction-bar.expanded {
  display: grid;
  grid-template-columns: repeat(8, 39px);
  border-radius: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.reaction-pick {
  width: 39px;
  height: 43px;
  border-radius: 50%;
  font-size: 26px;
  line-height: 1;
  transition: transform 0.12s;
}

.reaction-pick:active {
  transform: scale(1.25);
}

.reaction-pick.chosen {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
}

.reaction-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 2px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--hint);
}

.menu-card {
  min-width: 220px;
  padding: 6px 0;
  border-radius: 16px;
  background: var(--menu-bg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  height: 48px;
  padding: 0 20px 0 18px;
  font-size: 16px;
  text-align: left;
  color: var(--text);
}

.menu-item:active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.menu-icon {
  display: flex;
  color: var(--hint);
}

.menu-item.danger,
.menu-item.danger .menu-icon {
  color: var(--danger);
}

/* Меню сообщения — по tg-chat-menu.jpg: список шириной ≈212, строки 47,
   ниже отдельная карточка со значками. */
.msg-menu-list {
  min-width: 212px;
  padding: 4px 0;
  border-radius: 14px;
}

.msg-menu-list .menu-item {
  height: 47px;
  gap: 22px;
  font-size: 17px;
}

.msg-menu-list .menu-icon {
  width: 24px;
  justify-content: center;
  color: var(--text);
}

/* «✓✓ прочитано» — строка 36 сверху карточки, под ней полоса 8. */
.msg-menu-list.with-read {
  padding-top: 0;
}

.msg-menu-read {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 16px 0 14px;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
}

.msg-menu-read svg {
  width: 20px;
  height: 13px;
}

.msg-menu-list .menu-sep {
  margin: 0 0 4px;
}

/* Значки — ровным шагом ≈52 слева (tg-chat-menu.jpg), а не по краям:
   у чужого сообщения их всего два. */
.msg-menu-row {
  display: flex;
  justify-content: flex-start;
  gap: 4px;
  min-width: 212px;
  padding: 4px 8px;
  border-radius: 14px;
}

.msg-menu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 47px;
  border-radius: 50%;
  color: var(--text);
  animation: emoji-pop 0.3s cubic-bezier(0.3, 1.5, 0.5, 1) backwards;
}

.msg-menu-icon:active {
  background: color-mix(in srgb, var(--text) 10%, transparent);
}

/* Толстый разделитель между группами пунктов, как в Telegram. */
.menu-sep {
  height: 8px;
  margin: 4px 0;
  background: var(--menu-sep);
}

/* Меню ⋮ шапки чата — по tg-chat-header-menu.jpg. */
.header-menu {
  min-width: 218px;
  padding: 0;
  overflow: hidden;
}

.header-menu .menu-item {
  height: 47px;
  font-size: 17px;
}

/* Значки — цвета текста, как в tg-chat-header-menu.jpg. */
.header-menu .menu-icon {
  color: var(--text);
}

.header-menu .menu-sep {
  margin: 0;
}

/* ---------- Выбор сообщений ---------- */

.selection-toolbar .selection-count {
  flex: 1;
  padding-left: 12px;
  font-size: 20px;
  font-weight: 500;
}

.msg-row.selecting {
  cursor: pointer;
}

/* Выбранная строка подсвечена во всю ширину экрана (tg-chat-select.jpg):
   тени продолжают фон строки влево и вправо за поля ленты. */
.msg-row.selected {
  --sel-bg: color-mix(in srgb, var(--accent) 14%, transparent);
  background: var(--sel-bg);
  /* Сдвиг на полэкрана: строка шире, поэтому щели у краёв нет. */
  box-shadow:
    -50vw 0 0 0 var(--sel-bg),
    50vw 0 0 0 var(--sel-bg);
}

/* Кружок 23 с белой рамкой; выбранный — зелёный с галочкой, как в AyuGram. */
.select-check {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  margin: 0 8px 0 0;
  border: 2px solid #fff;
  border-radius: 50%;
  color: #fff;
  animation: pop 0.15s ease-out;
}

.select-check.on {
  border-color: #5dc346;
  background: #5dc346;
}

.select-check svg {
  width: 16px;
  height: 16px;
}

.msg-row.out.selecting {
  justify-content: space-between;
}

/* Значок ответа, который проявляется при свайпе влево. */
.msg-row {
  position: relative;
  --swipe: 0;
}

.swipe-reply {
  position: absolute;
  right: 6px;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  border-radius: 50%;
  background: var(--service-bg);
  color: #fff;
  opacity: var(--swipe);
  transform: scale(calc(0.5 + var(--swipe) * 0.5));
  pointer-events: none;
}

.swipe-reply svg {
  width: 18px;
  height: 18px;
}

/* ---------- Нижняя панель (пересылка) ---------- */

.sheet-overlay,
.dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, 0.45);
  animation: fade 0.18s ease-out;
}

.sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  max-height: 88%;
  border-radius: 18px 18px 0 0;
  background: var(--bg);
  padding-bottom: var(--sab);
  animation: sheet-in 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes sheet-in {
  from {
    transform: translateY(100%);
  }
}

.sheet-handle {
  width: 36px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--hint) 50%, transparent);
}

.sheet-head {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 4px;
}

.sheet-title {
  font-size: 19px;
  font-weight: 500;
  padding-left: 8px;
}

.sheet-search {
  margin: 0 12px 8px;
}

.sheet-list {
  overflow-y: auto;
  min-height: 200px;
}

.sheet-row {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 62px;
  padding: 0 16px;
  cursor: pointer;
}

.sheet-row:active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.sheet-row-title {
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sheet-empty {
  padding: 32px;
  text-align: center;
  color: var(--hint);
}

/* ---------- Окно подтверждения ---------- */

.dialog-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.dialog {
  width: min(340px, 100%);
  padding: 22px 22px 10px;
  border-radius: 20px;
  background: var(--header);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  animation: menu-in 0.18s ease-out;
}

.dialog-title {
  font-size: 19px;
  font-weight: 500;
}

.dialog-text {
  margin-top: 12px;
  font-size: 16px;
  color: var(--text);
  opacity: 0.85;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  margin-top: 18px;
}

.dialog-actions button {
  height: 40px;
  padding: 0 14px;
  border-radius: 20px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
}

.dialog-actions button.danger {
  color: var(--danger);
}

.dialog-actions button:active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* ---------- Просмотр медиа ---------- */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  background: #000;
  animation: fade 0.18s ease-out;
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.viewer-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  height: calc(56px + var(--top-inset));
  padding: var(--top-inset) 4px 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), transparent);
  color: #fff;
  transition: opacity 0.2s;
}

.viewer-bar .icon-btn {
  color: #fff;
}

.viewer.ui-hidden .viewer-bar {
  opacity: 0;
  pointer-events: none;
}

.viewer-info {
  flex: 1;
  min-width: 0;
}

.viewer-name {
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.viewer-sub {
  font-size: 14px;
  opacity: 0.7;
}

.viewer-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.viewer-body img,
.viewer-body video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Всплывающая подсказка ---------- */

.toast {
  position: fixed;
  left: 8px;
  right: 8px;
  bottom: calc(64px + var(--sab));
  z-index: 100;
  padding: 13px 16px;
  border-radius: 8px;
  background: rgba(40, 44, 52, 0.96);
  color: #fff;
  font-size: 15px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  animation: toast-in 0.2s ease-out;
  pointer-events: none;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}


/* ==================================================================
   АНИМАЦИИ — по образцу Telegram для Android
   ================================================================== */

/* --- Переход «список ⇄ чат»: чат выезжает справа, список уходит влево
       и темнеет (параллакс), назад — обратно. --- */

.layer-list {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s;
}

.layer-list.behind {
  transform: translateX(-22%);
  filter: brightness(0.6);
  pointer-events: none;
  /* Когда чат открылся полностью, список прячем — меньше работы телефону. */
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s, visibility 0s 0.3s;
}

.layer-chat {
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
  animation: chat-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.layer-chat.leaving {
  animation: chat-out 0.26s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

@keyframes chat-in {
  from {
    transform: translateX(100%);
  }
}

@keyframes chat-out {
  to {
    transform: translateX(100%);
  }
}

/* --- Появление нового сообщения: своё «вылетает» из строки ввода,
       чужое мягко всплывает снизу. --- */

.msg-row.appear-out .bubble {
  animation: bubble-out 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.msg-row.appear-in .bubble,
.msg-row.appear-in .msg-avatar {
  transform-origin: 0 100%;
  animation: bubble-in 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

/* Своё сообщение один раз плавно поднимается снизу и больше не двигается:
   без «перелёта» за своё место и без масштаба (раньше пузырь подскакивал
   выше и возвращался — на компьютере это выглядело как рывок). */
@keyframes bubble-out {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
}

@keyframes bubble-in {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.9);
  }
}

/* Отправляется — часики крутятся. */
.ticks.pending svg .clock-hand {
  transform-origin: 8px 8px;
  animation: spin 1.2s linear infinite;
}


/* Удаление — строка схлопывается. */
.msg-row.leaving {
  overflow: hidden;
  opacity: 0;
  transform: scale(0.85);
  margin-top: 0;
  transition: height 0.26s ease, opacity 0.2s ease, transform 0.26s ease, margin 0.26s ease;
}

/* Нажатие на пузырь — лёгкое «вдавливание». */
.bubble {
  transition: transform 0.15s ease;
}

.msg-row:not(.selecting):active .bubble {
  transform: scale(0.985);
}

/* --- Реакции: появляются с «пружинкой», своя — с большим эмодзи,
       который взлетает и тает. --- */

.reaction {
  position: relative;
  animation: reaction-pop 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
  transition: background 0.2s, color 0.2s, transform 0.12s;
}

.reaction:active {
  transform: scale(0.9);
}

@keyframes reaction-pop {
  from {
    transform: scale(0.3);
    opacity: 0;
  }
}

.reaction-burst {
  position: absolute;
  left: 2px;
  top: 50%;
  font-size: 22px;
  line-height: 1;
  pointer-events: none;
  animation: reaction-burst 0.8s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes reaction-burst {
  0% {
    transform: translate(0, -50%) scale(1);
    opacity: 1;
  }
  45% {
    transform: translate(-4px, -140%) scale(2.6);
    opacity: 1;
  }
  100% {
    transform: translate(-6px, -190%) scale(3.2);
    opacity: 0;
  }
}

/* --- Меню сообщения --- */

.menu-overlay {
  transition: opacity 0.13s ease;
}

.menu-overlay.leaving {
  opacity: 0;
}

.menu-overlay.leaving .menu-box,
.menu-overlay.leaving .header-menu {
  transform: scale(0.92);
  transition: transform 0.13s ease;
}

.menu-box.ready {
  animation: menu-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}

@keyframes menu-in {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

/* Полоска реакций раскрывается слева направо, эмодзи выскакивают по очереди. */
.reaction-bar {
  animation: bar-open 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes bar-open {
  from {
    clip-path: inset(0 100% 0 0 round 26px);
  }
  to {
    clip-path: inset(0 0 0 0 round 26px);
  }
}

.reaction-pick {
  animation: emoji-pop 0.3s cubic-bezier(0.3, 1.7, 0.5, 1) backwards;
  transition: transform 0.15s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@media (hover: hover) {
  .reaction-pick:hover {
    transform: scale(1.22);
  }
}

@keyframes emoji-pop {
  from {
    transform: scale(0);
  }
}

.reaction-bar.expanded {
  animation: expand-grid 0.25s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@keyframes expand-grid {
  from {
    clip-path: inset(0 0 85% 0 round 20px);
  }
  to {
    clip-path: inset(0 0 0 0 round 20px);
  }
}

.menu-item {
  animation: item-in 0.22s ease-out backwards;
}

@keyframes item-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

/* --- Нижняя панель и окно подтверждения --- */

.sheet {
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sheet-grab {
  padding: 2px 0 6px;
  cursor: grab;
  touch-action: none;
}

/* Шапку панели тоже можно тянуть вниз (кнопки в ней нажимаются как обычно). */
.sheet-drag {
  touch-action: none;
}

.sheet-overlay.leaving,
.dialog-overlay.leaving {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sheet-overlay.leaving .sheet {
  transform: translateY(100%);
  transition: transform 0.2s ease-in;
}

.dialog-overlay.leaving .dialog {
  transform: scale(0.9);
  transition: transform 0.15s ease-in;
}

.sheet-row {
  animation: item-in 0.25s ease-out backwards;
}

.sheet-row:nth-child(2) { animation-delay: 20ms; }
.sheet-row:nth-child(3) { animation-delay: 40ms; }
.sheet-row:nth-child(4) { animation-delay: 60ms; }
.sheet-row:nth-child(5) { animation-delay: 80ms; }
.sheet-row:nth-child(n + 6) { animation-delay: 100ms; }

/* --- Строка ввода --- */

/* Полоска «в ответ / редактирование» выдвигается над полем: сама полоска
   только въезжает и проявляется, а рост «таблетки» и сдвиг ленты делает
   ChatScreen через transform/clip-path — без анимации высоты. */
.compose-context {
  animation: context-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes context-in {
  from {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
  }
}

/* Кнопка отправки: иконка «впрыгивает» при смене состояния. */
.send-icon {
  display: flex;
  animation: send-icon 0.26s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes send-icon {
  from {
    transform: scale(0.4) rotate(-30deg);
    opacity: 0;
  }
}

.send-round:not(.ready) .send-icon {
  transform: scale(0.85);
}

/* Панель эмодзи в чате выезжает снизу вместе с лентой (slidePanel.js).
   Пока едет — вне раскладки, поверх, прижата к низу. */
.ep-holder {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
}

.ep-holder.floating {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  will-change: transform;
}

/* В окне отправки файлов панель просто поднимается и проявляется. */
.attach-sheet .emoji-panel {
  animation: panel-rise 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes panel-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
}

.emoji-item {
  transition: transform 0.12s;
}

.emoji-item:active {
  transform: scale(1.3);
}

/* --- Выбор сообщений: кружки выезжают слева --- */

.select-check {
  animation: check-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: background 0.18s, border-color 0.18s, transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.select-check.on {
  transform: scale(1.08);
}

.select-check svg {
  animation: emoji-pop 0.25s cubic-bezier(0.3, 1.7, 0.5, 1);
}

@keyframes check-in {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
}

.msg-row {
  transition: background 0.2s;
}

.selection-toolbar {
  animation: fade 0.18s ease-out;
}

.selection-count {
  animation: count-pop 0.25s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes count-pop {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
}

/* --- «Печатает…» — три прыгающие точки --- */

.typing-dots {
  display: inline-flex;
  gap: 3px;
  margin-right: 6px;
  vertical-align: middle;
}

.typing-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  animation: typing 1.2s infinite ease-in-out;
}

.typing-dots i:nth-child(2) {
  animation-delay: 0.15s;
}

.typing-dots i:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes typing {
  0%,
  60%,
  100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}

.chat-status {
  transition: color 0.2s;
}

/* --- Плавающая дата: сверху видна, только пока листают --- */

.date-row .date-pill {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.messages:not(.scrolling) .date-row.stuck .date-pill {
  opacity: 0;
  transform: translateY(-6px);
}

/* --- Список чатов --- */

.folders {
  position: relative;
}

.folder {
  position: relative;
  z-index: 1;
  background: transparent !important;
}

.folder-indicator {
  position: absolute;
  top: 3px;
  left: 0;
  height: 30px;
  border-radius: 15px;
  background: var(--folder-active);
  transition: transform 0.32s cubic-bezier(0.2, 0.9, 0.3, 1), width 0.32s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.rows {
  animation: rows-in 0.25s ease-out;
}

@keyframes rows-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.badge {
  animation: badge-pop 0.3s cubic-bezier(0.3, 1.7, 0.5, 1);
}

@keyframes badge-pop {
  from {
    transform: scale(0.4);
  }
}

.scroll-down-count {
  animation: badge-pop-center 0.3s cubic-bezier(0.3, 1.7, 0.5, 1);
}

@keyframes badge-pop-center {
  from {
    transform: translateX(-50%) scale(0.4);
  }
}

/* --- «Волна» при нажатии --- */

/* Позиционирование не трогаем: у плавающих кнопок оно своё. Строкам без
   него ripple.js сам ставит position: relative. */
.has-ripple {
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.14;
  transform: scale(0);
  pointer-events: none;
  animation: ripple 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.ripple.out {
  opacity: 0;
  transition: opacity 0.35s ease;
}

@keyframes ripple {
  to {
    transform: scale(1);
  }
}

/* --- Просмотр фото --- */

.viewer {
  --bg-alpha: 1;
  background: rgba(0, 0, 0, var(--bg-alpha));
  touch-action: none;
}

.viewer.from-thumb {
  animation: viewer-bg 0.26s ease-out;
}

@keyframes viewer-bg {
  from {
    background: rgba(0, 0, 0, 0);
  }
}

.viewer-bar {
  animation: fade 0.3s ease-out;
}

.viewer-body img,
.viewer-body video {
  will-change: transform;
}

/* --- Всплывающие подсказки --- */

.toast {
  animation: toast-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

/* --- Для тех, у кого в системе отключены анимации --- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================================================================
   ПРОФИЛЬ — по скриншотам Telegram для Android
   ================================================================== */

.chat-header-open {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 100%;
  text-align: left;
}

.chat-header-open .avatar {
  margin-right: 12px;
}

.profile {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  animation: chat-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.profile.leaving {
  animation: chat-out 0.24s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

.profile-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  height: calc(56px + var(--top-inset));
  padding: var(--top-inset) 4px 0;
  transition: background 0.2s, box-shadow 0.2s;
}

.profile-bar.solid {
  background: var(--header);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.profile-bar-title {
  flex: 1;
  padding-left: 12px;
  font-size: 19px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  animation: fade 0.2s;
}

.profile-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 12px calc(24px + var(--sab));
}

.profile-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(40px + var(--top-inset)) 0 16px;
}

.profile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  font-size: 40px;
  font-weight: 500;
  animation: avatar-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes avatar-in {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

.profile-name {
  margin-top: 14px;
  font-size: 23px;
  font-weight: 500;
  text-align: center;
  animation: item-in 0.3s ease-out 0.05s backwards;
}

.profile-status {
  margin-top: 4px;
  font-size: 15px;
  color: var(--hint);
  animation: item-in 0.3s ease-out 0.1s backwards;
}

.profile-status.live {
  color: var(--accent);
}

/* Кнопки действий — плитки в ряд, как «Чат / Звонок / Видео / Звук». */
.profile-actions {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.profile-action {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 4px 9px;
  border-radius: 14px;
  background: var(--header);
  color: var(--text);
  font-size: 13px;
  animation: item-in 0.3s ease-out backwards;
}

.profile-action-icon {
  display: flex;
  color: var(--text);
}

.profile-action:active {
  transform: scale(0.96);
}

.profile-card {
  margin-bottom: 12px;
  padding: 4px 0;
  border-radius: 16px;
  background: var(--header);
  animation: item-in 0.3s ease-out 0.12s backwards;
}

.profile-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 10px 16px;
  text-align: left;
}

.profile-field-value {
  font-size: 17px;
  line-height: 1.3;
  word-break: break-word;
}

.profile-field-value.multi {
  white-space: pre-wrap;
}

.profile-field-label {
  margin-top: 2px;
  font-size: 14px;
  color: var(--hint);
}

/* Вкладки «Медиа / Файлы / Ссылки» — «таблетка» со скользящей подсветкой. */
.p-tabs-wrap {
  position: sticky;
  top: 56px;
  z-index: 1;
  margin: 0 -12px;
  padding: 6px 12px;
  background: var(--bg2);
}

.p-tabs {
  position: relative;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 22px;
  background: var(--header);
  overflow-x: auto;
  scrollbar-width: none;
}

.p-tabs::-webkit-scrollbar {
  display: none;
}

.p-tab {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  border-radius: 17px;
  color: var(--hint);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s;
}

.p-tab.active {
  color: var(--accent);
}

.p-tab-indicator {
  position: absolute;
  top: 4px;
  left: 0;
  height: 34px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--accent) 17%, transparent);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1), width 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.p-tab-content {
  padding-top: 6px;
  animation: rows-in 0.25s ease-out;
}

.pm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin: 0 -12px;
}

.pm-tile {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  animation: fade 0.3s ease-out backwards;
}

.pm-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pm-tile-ph {
  width: 100%;
  height: 100%;
}

.pm-tile-ph.video {
  background: linear-gradient(135deg, #2f4050, #18222c);
}

.pm-tile-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  padding-left: 3px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

.p-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 6px 4px;
  text-align: left;
  border-radius: 10px;
  animation: item-in 0.25s ease-out backwards;
}

.p-row-main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.p-row-title {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-row-title.link {
  color: var(--link);
}

.p-row-sub {
  margin-top: 2px;
  font-size: 14px;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-file-badge {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  padding-bottom: 7px;
  border-radius: 10px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: lowercase;
}

.p-link-icon,
.p-voice-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.p-voice-icon {
  background: var(--button);
  color: var(--button-text);
}

.p-member-role {
  font-size: 13px;
  color: var(--accent);
}

.p-empty,
.p-more {
  padding: 32px 16px;
  text-align: center;
  color: var(--hint);
  font-size: 15px;
}

.p-more {
  padding: 12px;
  font-size: 13px;
}

/* ==================================================================
   СТРОКА ВВОДА: скрепка и камера
   ================================================================== */

.composer-attach {
  width: 48px;
  height: 47px;
  color: var(--hint);
  transition: opacity 0.2s, transform 0.2s;
}

.composer-attach.hidden {
  opacity: 0;
  transform: scale(0.6) rotate(-30deg);
  pointer-events: none;
  width: 0;
  overflow: hidden;
}

/* Режим выбора: вместо ввода — «Ответить» и «Переслать». */
.selection-bar {
  gap: 8px;
}

.selection-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* tg-chat-select.jpg: высота 47, текст и значки серые. */
  height: 47px;
  border-radius: 24px;
  background: var(--header);
  color: color-mix(in srgb, var(--text) 68%, var(--header));
  font-size: 17px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  animation: item-in 0.22s ease-out;
}

.selection-btn:disabled {
  opacity: 0.45;
}

/* Меню ⋮ в шапке — карточка в правом верхнем углу. */
.header-menu-overlay {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.header-menu {
  position: absolute;
  top: calc(8px + var(--top-inset));
  right: 8px;
  transform-origin: top right;
  animation: menu-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

/* ==================================================================
   ЗАГРУЗКА ВЛОЖЕНИЙ
   ================================================================== */

.media video {
  display: block;
  width: 100%;
  max-height: min(460px, 60vh);
  object-fit: cover;
}

.upload-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
}

/* Крестик на кольце — отмена отправки. */
.upload-ring.cancelable {
  cursor: pointer;
  pointer-events: auto;
}

.file-icon .upload-ring {
  position: static;
  margin: 0;
  background: transparent;
}

.upload-ring svg {
  animation: spin 1.6s linear infinite;
}

.upload-ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 3;
}

.upload-ring-bar {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 24px 24px;
  transition: stroke-dashoffset 0.25s ease;
}

.upload-ring-x {
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  transform-origin: 24px 24px;
  animation: spin 1.6s linear infinite reverse;
}

/* ==================================================================
   ОКНО ВЛОЖЕНИЙ — «Выбраны N фотографий»
   ================================================================== */

.attach-sheet {
  max-height: 92%;
  background: var(--bg);
}

.attach-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 18px 10px;
}

.attach-title {
  flex: 1;
  font-size: 19px;
  font-weight: 500;
}

.attach-size {
  font-size: 13px;
  color: var(--hint);
}

.attach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 0 10px 10px;
  overflow-y: auto;
  min-height: 0;
}

.attach-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--header);
  animation: emoji-pop 0.3s cubic-bezier(0.3, 1.5, 0.5, 1) backwards;
}

.attach-tile img,
.attach-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.attach-video-ph {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #2f4050, #18222c);
}

/* Видео в сетке выбранного: ▶ и длительность слева снизу. */
.attach-video-badge {
  position: absolute;
  left: 6px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 1px 6px 1px 3px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.attach-video-badge svg {
  width: 14px;
  height: 14px;
}

.attach-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  padding: 8px;
  text-align: center;
}

.attach-file-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  color: #fff;
}

.attach-file-name {
  max-width: 100%;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attach-file-size {
  font-size: 12px;
  color: var(--hint);
}

.attach-num {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  border-radius: 12px;
  border: 2px solid #fff;
  background: var(--button);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.attach-remove {
  position: absolute;
  top: 6px;
  left: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.attach-remove svg {
  width: 16px;
  height: 16px;
}

.attach-add {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hint);
  border: 2px dashed color-mix(in srgb, var(--hint) 40%, transparent);
  background: transparent;
}

.attach-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 8px calc(8px + var(--sab));
}

.attach-caption {
  box-shadow: none;
  overflow: visible;
}

.attach-caption .emoji-input {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 47px;
  max-height: 120px;
  overflow-y: auto;
  padding: 12px 8px 12px 0;
  outline: none;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.attach-send {
  position: relative;
  overflow: visible;
}

.attach-send-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 22px;
  height: 22px;
  padding: 0 5px;
  border-radius: 11px;
  border: 2px solid var(--bg);
  background: var(--button);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  animation: badge-pop 0.3s cubic-bezier(0.3, 1.7, 0.5, 1);
}

/* ==================================================================
   ПАНЕЛЬ ЭМОДЗИ — как в Telegram
   ================================================================== */

.emoji-panel.ep {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 300px;
  max-height: 45vh;
  padding: 0;
  border-top: none;
  background: var(--bg);
}

.ep-top {
  flex-shrink: 0;
  border-bottom: 1px solid var(--separator);
}

.ep-cats {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ep-cats::-webkit-scrollbar {
  display: none;
}

.ep-cat {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 34px;
  border-radius: 17px;
  color: var(--hint);
  transition: background 0.2s, color 0.2s;
}

.ep-cat.active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

.ep-search {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  margin: 0 8px;
  padding: 0 4px 0 10px;
  color: var(--hint);
  animation: fade 0.2s;
}

.ep-search input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.ep-search button {
  display: flex;
  padding: 8px;
  color: var(--hint);
}

.ep-scroll {
  /* Отсчёт offsetTop разделов — от самой прокрутки (переход к разделу,
     какие разделы видны). */
  position: relative;
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 6px 60px;
}

.ep-title {
  padding: 12px 8px 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--hint);
}

.ep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
}

.ep-item {
  height: 44px;
  font-size: 30px;
  line-height: 1;
  border-radius: 10px;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform 0.12s;
}

.ep-item:active {
  transform: scale(1.25);
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.ep-item.has-skins {
  position: relative;
}

.ep-item.has-skins::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 4px;
  border: 3px solid transparent;
  border-right-color: color-mix(in srgb, var(--hint) 70%, transparent);
  border-bottom-color: color-mix(in srgb, var(--hint) 70%, transparent);
}

.ep-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--hint);
}

.ep-backspace {
  position: absolute;
  right: 12px;
  bottom: calc(10px + var(--sab));
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 40px;
  border-radius: 20px;
  background: var(--header);
  color: var(--text);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.ep-skins {
  position: fixed;
  z-index: 60;
  display: flex;
  padding: 4px;
  border-radius: 16px;
  background: var(--header);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  animation: menu-in 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.ep-skins .ep-item {
  width: 48px;
}

.ep-skins .ep-item.chosen {
  border-radius: 10px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

/* В режиме выбора кружки у всех сообщений — у левого края, как в Telegram. */
.msg-row.out.selecting {
  padding-left: 0;
}

/* ==================================================================
   ГЛАВНАЯ: шапка, вкладки, нижний «островок», кнопка «+»
   ================================================================== */

.bubble {
  font-size: var(--msg-font, 16px);
}

.no-big-emoji .bubble.big-emoji .msg-text {
  font-size: calc(var(--msg-font, 16px) * 1.4);
}

.no-anim *,
.no-anim *::before,
.no-anim *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0ms !important;
  transition-duration: 0.01ms !important;
}

.main-header {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(56px + var(--top-inset));
  padding-top: var(--top-inset);
  background: var(--bg);
}

.main-title {
  max-width: 70%;
  font-size: 20px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-more {
  position: absolute;
  right: 4px;
  top: calc(4px + var(--top-inset));
}


.tab-pages {
  position: absolute;
  inset: 0;
}

/* Вкладки «островка» живут в DOM все сразу (сохраняется прокрутка),
   неактивные просто скрыты и не ловят касания. */
.tab-page {
  position: absolute;
  inset: 0;
  z-index: 0;
  visibility: hidden;
  pointer-events: none;
}

/* У активной вкладки z-index не задаём (auto): иначе её окна и меню
   (position: fixed, z-index 45) оказывались бы под «островком» и их кнопки
   внизу не нажимались. Скрытые вкладки всё равно невидимы и без касаний. */
.tab-page.active {
  z-index: auto;
  visibility: visible;
  pointer-events: auto;
}

/* Переход: новая страница въезжает на 12% со стороны, куда ведёт
   вкладка, прежняя уезжает в другую сторону и гаснет. Только transform и
   opacity — без пересчёта раскладки. */
.tab-page.enter-fwd {
  animation: tab-enter-fwd 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.tab-page.enter-back {
  animation: tab-enter-back 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

.tab-page.leave-fwd,
.tab-page.leave-back {
  visibility: visible;
  animation: tab-leave-fwd 0.34s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.tab-page.leave-back {
  animation-name: tab-leave-back;
}

@keyframes tab-enter-fwd {
  from {
    opacity: 0;
    transform: translate3d(12%, 0, 0);
  }
}

@keyframes tab-enter-back {
  from {
    opacity: 0;
    transform: translate3d(-12%, 0, 0);
  }
}

@keyframes tab-leave-fwd {
  to {
    opacity: 0;
    transform: translate3d(-12%, 0, 0);
  }
}

@keyframes tab-leave-back {
  to {
    opacity: 0;
    transform: translate3d(12%, 0, 0);
  }
}

/* Появление экрана входа. */
@keyframes tab-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.no-smooth-tabs .tab-page {
  animation: none !important;
}

.no-smooth-tabs .tab-page:not(.active) {
  visibility: hidden;
}

/* Нижний «островок» — по photo_1/photo_3 (AyuGram 2026.03.29): ширина
   ~334dp, высота 56, полупрозрачный с размытием и едва заметной рамкой.
   Активная вкладка — одна капсула, перетекает между кнопками. */
:root {
  --tabbar-bg: rgba(27, 44, 54, 0.86); /* #1b2c36 */
  --tab-active-bg: #1c3645;
  --tab-active-fg: #18a7e2;
  --tab-w: min(80px, calc((100vw - 36px) / 4));
}

:root[data-scheme="light"] {
  --tabbar-bg: color-mix(in srgb, var(--bg) 86%, transparent);
  --tab-active-bg: color-mix(in srgb, var(--accent) 14%, var(--bg));
  --tab-active-fg: var(--accent);
}

.tabbar {
  position: absolute;
  left: 50%;
  bottom: calc(10px + var(--sab));
  z-index: 5;
  display: flex;
  padding: 4px 6px;
  border-radius: 30px;
  transform: translateX(-50%);
  background: var(--tabbar-bg);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 4px 22px rgba(0, 0, 0, 0.35);
}

/* Открыта подстраница настроек — «островок» уезжает вниз, как в AyuGram
   (на подэкранах его нет). */
.tabbar {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s;
}

.tabbar.away {
  transform: translate(-50%, calc(100% + 24px));
  opacity: 0;
  pointer-events: none;
}

.tabbar-indicator {
  position: absolute;
  top: 4px;
  left: 6px;
  width: var(--tab-w);
  height: 48px;
  border-radius: 24px;
  background: var(--tab-active-bg);
  transform: translate3d(calc(var(--tab-i, 0) * 100%), 0, 0);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  pointer-events: none;
}

.tabbar-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: var(--tab-w);
  height: 48px;
  border-radius: 24px;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.tabbar-item.active {
  color: var(--tab-active-fg);
}

.tabbar-icon {
  position: relative;
  display: flex;
  transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.tabbar-item:active .tabbar-icon {
  transform: scale(0.9);
}

/* Аватарка во вкладке «Профиль» — без кольца, как на эталоне. */
.tabbar-icon .profile-avatar {
  animation: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.tabbar-badge {
  position: absolute;
  top: -7px;
  left: 15px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  border: 2px solid var(--header);
  background: var(--button);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  animation: badge-pop 0.3s cubic-bezier(0.3, 1.7, 0.5, 1);
}

/* Место под «островок» в списках вкладок. */
.layer-list .list {
  padding-bottom: calc(96px + var(--sab));
}

.fab {
  position: absolute;
  right: 16px;
  bottom: calc(96px + var(--sab));
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--button);
  color: var(--button-text);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  animation: fab-in 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.fab:active {
  transform: scale(0.92);
}

@keyframes fab-in {
  from {
    transform: scale(0) rotate(-90deg);
  }
}

/* --- Поиск по всему --- */

.gsearch {
  animation: rows-in 0.2s ease-out;
}

.gsearch-title {
  padding: 14px 16px 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}

.gsearch-empty,
.gsearch-loading {
  display: flex;
  justify-content: center;
  padding: 14px 16px;
  font-size: 14px;
  color: var(--hint);
}

.gsearch mark {
  background: none;
  color: var(--accent);
  font-weight: 600;
}

.gsearch-channel {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px 8px 12px;
}

.join-btn {
  flex-shrink: 0;
  height: 34px;
  padding: 0 14px;
  border-radius: 17px;
  background: var(--button);
  color: var(--button-text);
  font-size: 14px;
  font-weight: 600;
  transition: background 0.2s, opacity 0.2s;
}

.join-btn:disabled {
  background: color-mix(in srgb, var(--hint) 30%, transparent);
  color: var(--text);
}

/* --- «Новый чат» --- */

.join-title {
  padding: 8px 18px 10px;
}

.join-box {
  margin: 12px;
  padding: 14px;
  border-radius: 16px;
  background: var(--header);
}

.join-box-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--hint);
}

.join-input {
  width: 100%;
  height: 46px;
  margin: 12px 0;
  padding: 0 14px;
  border: none;
  border-radius: 12px;
  outline: none;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.join-go {
  width: 100%;
  height: 46px;
  border-radius: 12px;
  background: var(--button);
  color: var(--button-text);
  font-size: 16px;
  font-weight: 600;
}

.join-go:disabled {
  opacity: 0.5;
}

.join-sheet {
  padding-bottom: calc(12px + var(--sab));
}

/* ==================================================================
   НАСТРОЙКИ, КОНТАКТЫ, МОЙ ПРОФИЛЬ
   ================================================================== */

.tab-screen {
  background: var(--bg2);
}

.tab-screen .main-header {
  background: var(--bg2);
}

.section-caption {
  padding: 12px 24px 8px;
  font-size: 14px;
  color: var(--hint);
}

/* Заголовок раздела над карточкой, как в настройках Telegram. */
.section-header {
  padding: 20px 24px 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--accent);
}

/* Карточки и строки — по tg-settings-top.jpg и tg-data-storage.jpg. */
.settings-group {
  margin: 8px 12px;
  padding: 0;
  border-radius: 18px;
  background: var(--section);
  overflow: hidden;
  animation: item-in 0.3s ease-out backwards;
}

.settings-row {
  display: flex;
  align-items: center;
  gap: 19px;
  width: 100%;
  min-height: 50px;
  padding: 6px 17px;
  text-align: left;
}

.settings-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  color: #fff;
}

.settings-icon svg {
  width: 18px;
  height: 18px;
}

.settings-label {
  flex: 1;
  min-width: 0;
  font-size: 17px;
}

.settings-value {
  font-size: 15px;
  color: var(--accent);
}

.settings-chevron {
  display: flex;
  color: var(--hint);
}

/* Переключатель Telegram для Android (tg-data-storage.jpg): толстая
   дорожка, кружок тёмный, со светлым кольцом. */
.switch {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 26px;
  border-radius: 13px;
  background: var(--switch-off);
  transition: background 0.2s;
}

.switch::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border: 3px solid color-mix(in srgb, var(--text) 85%, transparent);
  border-radius: 50%;
  background: var(--section);
  box-sizing: border-box;
  transition: transform 0.22s cubic-bezier(0.3, 1.2, 0.5, 1);
}

.switch.on {
  background: var(--switch-on);
}

.switch.on::after {
  transform: translateX(16px);
}

.settings-me {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 28px 0 12px;
}

.settings-me .profile-avatar {
  animation: avatar-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.settings-me-name {
  margin-top: 12px;
  font-size: 22px;
  font-weight: 500;
}

.settings-me-sub {
  margin-top: 2px;
  font-size: 15px;
  color: var(--hint);
}

.settings-footer {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: var(--hint);
}

.subpage {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
  animation: chat-in 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s;
}

/* Подстраница уезжает вправо, как чат (.layer-chat.leaving). */
.subpage.leaving {
  pointer-events: none;
  animation: chat-out 0.26s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}

/* Под открытой подстраницей предыдущий экран задвинут влево и затемнён
   (параллакс, как список под чатом). */
.settings-main {
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s;
}

.settings-main.behind,
.subpage.behind {
  transform: translateX(-22%);
  filter: brightness(0.6);
  pointer-events: none;
  visibility: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.3s, visibility 0s 0.3s;
}

.subpage .toolbar-title {
  padding-left: 12px;
}

.subpage-body {
  padding-bottom: 32px !important;
}

.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 60px;
  padding: 6px 14px;
  text-align: left;
  animation: item-in 0.25s ease-out backwards;
}

.p-row-sub.online {
  color: var(--accent);
}

.profile-head.my {
  padding-top: 36px;
}

.layer-list .profile-actions,
.layer-list .profile-card {
  margin-left: 12px;
  margin-right: 12px;
}

/* ==================================================================
   ЧАТ: закреплённое, поиск, меню вложений
   ================================================================== */

.pinned-bar {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  /* По tg-chat-group.jpg: высота 47, углы почти круглые, отступы 7. */
  gap: 7px;
  height: 48px;
  margin: 6px 7px 0;
  padding: 0 4px 0 13px;
  border-radius: 22px;
  background: color-mix(in srgb, var(--header) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  animation: pinned-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@keyframes pinned-in {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
}

.pinned-line {
  width: 3px;
  height: 34px;
  border-radius: 2px;
  background: var(--accent);
}

.pinned-thumb {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  object-fit: cover;
}

.pinned-line + .pinned-main {
  margin-left: 3px;
}

.pinned-main {
  flex: 1;
  min-width: 0;
}

.pinned-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--accent);
}

.pinned-text {
  font-size: 15px;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pinned-close {
  color: var(--hint);
}

.search-toolbar {
  gap: 4px;
}

.search-nav {
  justify-content: center;
}

.search-nav-pill {
  flex: 1;
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 4px 0 20px;
  border-radius: 26px;
  background: var(--header);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
  animation: item-in 0.2s ease-out;
}

.search-nav-count {
  flex: 1;
  font-size: 16px;
  color: var(--text);
}

.search-nav-pill .icon-btn:disabled {
  opacity: 0.3;
}

/* Меню скрепки — «таблетка» вкладок, как внизу меню скрепки Telegram
   (tg-attach.jpg): значок над подписью, без цветных кругов. */
.attach-menu {
  padding: 0 10px calc(10px + var(--sab));
  background: var(--bg2);
}

.attach-tabs {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  padding: 5px;
  border-radius: 34px;
  background: var(--menu-bg);
}

.attach-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 58px;
  border-radius: 29px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  animation: emoji-pop 0.35s cubic-bezier(0.3, 1.5, 0.5, 1) backwards;
  transition: background 0.15s;
}

.attach-tab svg {
  width: 26px;
  height: 26px;
}

.attach-tab:active {
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}

/* ==================================================================
   ПРОСМОТР ДОКУМЕНТОВ
   ================================================================== */

.docview {
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  animation: chat-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.docview.leaving {
  animation: chat-out 0.22s ease-in forwards;
}

.docview-title {
  flex: 1;
  min-width: 0;
  padding-left: 6px;
}

.docview-name {
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.docview-sub {
  font-size: 13px;
  color: var(--hint);
}

.docview-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.doc-pages {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 24px;
}

.doc-page {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 900px;
  min-height: 300px;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}

.doc-page img {
  display: block;
  width: 100%;
}

.doc-page-num {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 12px;
}

.doc-text {
  margin: 10px;
  padding: 18px;
  border-radius: 8px;
  background: #fff;
  color: #111;
}

.doc-text pre {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.doc-note {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 12px;
  color: #666;
}

.doc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 32px;
  text-align: center;
  color: var(--hint);
}

.doc-empty .join-go {
  max-width: 280px;
  margin-top: 8px;
}

.doc-big-badge {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 84px;
  height: 100px;
  padding-bottom: 14px;
  border-radius: 12px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.doc-empty-name {
  font-size: 17px;
  color: var(--text);
  word-break: break-word;
}

/* ==================================================================
   ПРОСМОТР ФОТО И ВИДЕО: плеер, подпись, меню
   ================================================================== */

.viewer-body img {
  touch-action: none;
  transform-origin: center center;
}

.viewer-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 28px 16px calc(16px + var(--sab));
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
  color: #fff;
  transition: opacity 0.2s;
}

.viewer.ui-hidden .viewer-bottom {
  opacity: 0;
  pointer-events: none;
}

/* У видео подпись и счётчик — над полосой плеера, и сами нажатия не
   перехватывают: раньше прозрачная плашка закрывала перемотку и звук. */
.viewer-bottom.over-player {
  padding-bottom: calc(76px + var(--sab));
  pointer-events: none;
}

.viewer-bottom.over-player .viewer-caption {
  pointer-events: auto;
}

.viewer-caption {
  max-height: 30vh;
  overflow-y: auto;
  font-size: 16px;
  line-height: 1.35;
  white-space: pre-wrap;
}

.viewer-counter {
  margin-top: 6px;
  font-size: 14px;
  opacity: 0.75;
  text-align: center;
}

.viewer-menu {
  top: 56px;
  right: 8px;
}

.vplayer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.vplayer video {
  max-width: 100%;
  max-height: 100%;
}

.vplayer-center {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: -36px 0 0 -36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  transition: opacity 0.25s, transform 0.25s;
}

.vplayer-center.hidden {
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
}

.vplayer-bar {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: calc(16px + var(--sab));
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 4px 14px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  transition: opacity 0.25s, transform 0.25s;
}

.vplayer-bar.hidden {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
}

.vplayer-time {
  min-width: 38px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.vplayer-bar input[type="range"] {
  flex: 1;
  height: 4px;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 2px;
  background: linear-gradient(to right, #fff var(--p), rgba(255, 255, 255, 0.3) var(--p));
}

.vplayer-bar input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}

.vplayer-bar input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: none;
  border-radius: 50%;
  background: #fff;
}

/* Шапка профиля: ⋮ справа. */
.profile-bar .icon-btn:last-child {
  margin-left: auto;
}

/* ==================================================================
   СБОИ И СВЯЗЬ — вместо пустого экрана (аудит №5, №6, №36)
   ================================================================== */

/* Экран ошибки: как пустые состояния Telegram — значок, заголовок,
   пояснение и кнопка. */
.crash {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 32px;
  text-align: center;
  background: var(--bg);
  color: var(--text);
}

.crash-screen {
  position: absolute;
  z-index: 1;
}

.crash-icon {
  color: var(--hint);
  margin-bottom: 16px;
}

.crash-title {
  font-size: 20px;
  font-weight: 500;
}

.crash-text {
  max-width: 300px;
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--hint);
}

.crash-button {
  min-width: 200px;
  height: 44px;
  margin-top: 24px;
  padding: 0 24px;
  border-radius: 8px;
  background: var(--button);
  color: var(--button-text);
  font-size: 15px;
  font-weight: 500;
}

.crash-button:active {
  opacity: 0.85;
}

.crash-link {
  margin-top: 12px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 500;
}

.crash-link:active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* Окна «Сессия устарела» и ошибки поверх — выше просмотрщика и меню. */
.crash-overlay,
.conn-overlay {
  z-index: 110;
}

/* Плашка «Нет связи…» под шапкой. */
.conn-banner {
  position: fixed;
  top: calc(56px + 8px + max(env(safe-area-inset-top, 0px), var(--top-inset)));
  left: 8px;
  right: 8px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 14px;
  border-radius: 8px;
  background: rgba(40, 44, 52, 0.96);
  color: #fff;
  font-size: 14px;
  line-height: 1.3;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  animation: toast-in 0.2s ease-out;
}

.conn-banner-text {
  flex: 1;
  min-width: 0;
}

.conn-banner-button {
  flex-shrink: 0;
  height: 34px;
  padding: 0 12px;
  border-radius: 17px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.conn-banner-button:active {
  background: rgba(255, 255, 255, 0.1);
}

.conn-spinner {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ==================================================================
   Вход (docs/AUTH_PLAN.md, часть 3) — по скриншотам входа AyuGram:
   tg-login-phone*.jpg, tg-login-code.jpg, tg-login-password.jpg.
   Размеры сняты с них (кнопка-стрелка 56 dp — мерка масштаба).
   ================================================================== */

.login {
  --outline: color-mix(in srgb, var(--hint) 42%, var(--bg));
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
  animation: tab-in 0.22s ease-out;
}

.no-anim .login {
  animation: none;
}

.login-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Заголовок без картинки — на высоте ~193 dp от верха экрана, как у
     Telegram; в полноэкранном режиме сверху ещё полоса кнопок Telegram. */
  padding: calc(var(--top-inset) + 108px) 0 16px;
}

/* С картинкой над заголовком — заголовок на той же высоте. */
.login-body > .login-illustration:first-child {
  margin-top: -96px;
  margin-bottom: 26px;
  color: var(--text);
  flex-shrink: 0;
}

.login-body > .login-emoji:first-child {
  margin-top: -73px;
  margin-bottom: 20px;
}

.login-emoji {
  font-size: 66px;
  line-height: 76px;
  height: 76px;
}

.login-title {
  font-size: 20px;
  font-weight: 500;
  line-height: 26px;
  text-align: center;
  padding: 0 24px;
}

.login-subtitle {
  margin-top: 8px;
  max-width: 360px;
  padding: 0 40px;
  font-size: 15px;
  line-height: 21px;
  color: var(--hint);
  text-align: center;
}

.login-phone {
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
}

.login-fields {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin: 28px 35px 0;
}

.login-fields[data-shake],
.code-cells[data-shake] {
  animation: login-shake 0.4s ease-in-out;
}

@keyframes login-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(7px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(3px);
  }
}

/* --- Рамочное поле с подписью на рамке --- */

.outline {
  position: relative;
  display: flex;
  align-items: center;
  height: 51px;
  padding: 0 16px;
  border: 1px solid var(--outline);
  border-radius: 7px;
  font-size: 17px;
  cursor: pointer;
}

.outline.focused,
.outline-input:focus-within {
  border: 2px solid var(--link);
  padding: 0 15px;
}

.outline.error,
.outline-input.error {
  border-color: var(--danger);
}

.outline-label {
  position: absolute;
  left: 10px;
  top: -9px;
  padding: 0 4px;
  font-size: 13px;
  line-height: 16px;
  color: var(--hint);
  background: var(--bg);
  pointer-events: none;
}

.outline.focused .outline-label,
.outline-input:focus-within .outline-label {
  left: 9px;
  top: -10px;
  color: var(--link);
}

.outline.error .outline-label,
.outline-input.error .outline-label {
  color: var(--danger);
}

.outline-placeholder {
  color: var(--hint);
}

.outline-chevron {
  margin-left: auto;
  display: flex;
  color: var(--hint);
}

.outline-input {
  cursor: text;
}

.outline-input input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 17px;
  caret-color: var(--link);
  letter-spacing: 0.3px;
}

.outline-input input::placeholder {
  color: var(--hint);
  opacity: 0.7;
  letter-spacing: 0;
}

.country-flag {
  font-size: 22px;
  width: 37px;
  flex-shrink: 0;
}

.country-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.phone-dial {
  display: flex;
  align-items: center;
  width: 44px;
  flex-shrink: 0;
  white-space: nowrap;
}

.phone-sep {
  width: 1px;
  height: 22px;
  margin-right: 12px;
  background: var(--outline);
  flex-shrink: 0;
}

.phone-number {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  white-space: pre;
  letter-spacing: 0.5px;
}

.phone-placeholder {
  color: var(--hint);
  opacity: 0.75;
}

.caret {
  display: inline-block;
  width: 2px;
  height: 22px;
  margin: 0 1px;
  background: var(--link);
  border-radius: 1px;
  animation: caret-blink 1s step-end infinite;
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

.login-error {
  margin: -18px 2px 0;
  font-size: 14px;
  line-height: 18px;
  color: var(--danger);
}

.code-cells + .login-error {
  margin: 14px 24px 0;
  text-align: center;
}

/* --- Низ экрана: кнопка-стрелка, ссылка, своя клавиатура --- */

.login-bottom {
  flex-shrink: 0;
}

.login-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 21px 21px 32px;
}

.login-with-fab > .login-actions {
  padding-bottom: calc(var(--sab) + 18px);
}

.login-with-fab > .login-bottom .login-actions {
  padding-bottom: calc(var(--sab) + 18px);
}

.login-fab {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--button);
  color: var(--button-text);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  flex-shrink: 0;
  transition: transform 0.12s ease;
}

.login-fab:active {
  transform: scale(0.94);
}

.login-fab-spinner {
  width: 24px;
  height: 24px;
  border: 2.5px solid color-mix(in srgb, var(--button-text) 30%, transparent);
  border-top-color: var(--button-text);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.login-link {
  color: var(--link);
  font-size: 16px;
  padding: 8px 0;
}

.login-link:active {
  opacity: 0.6;
}

.login-hint {
  color: var(--hint);
  font-size: 15px;
}

.login-link-row {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  margin-bottom: 29px;
  padding: 0 24px;
  text-align: center;
}

/* Без своей клавиатуры (компьютер) — ссылка над нижним краем. */
.login:not(.login-with-numpad) .login-link-row {
  margin-bottom: calc(var(--sab) + 29px);
}

.numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 0 10px calc(var(--sab) + 12px);
}

.numpad-key {
  position: relative;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text) 8%, var(--bg));
  font-size: 26px;
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.numpad-key:active {
  background: color-mix(in srgb, var(--text) 16%, var(--bg));
}

.numpad-key.empty {
  visibility: hidden;
}

.numpad-digit {
  position: absolute;
  left: 25%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.numpad-letters {
  position: absolute;
  left: 70%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  color: var(--hint);
  letter-spacing: 0.5px;
}

.numpad-back {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Код --- */

.code-cells {
  display: flex;
  gap: 10px;
  margin-top: 36px;
  cursor: text;
}

.code-cells.busy {
  opacity: 0.55;
}

.code-cell {
  width: 33px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--outline);
  border-radius: 6px;
  font-size: 22px;
}

.code-cell.active {
  border: 2px solid var(--link);
}

.code-cell.error {
  border-color: var(--danger);
}

/* --- Выбор страны --- */

.login-picker {
  animation: chat-in 0.25s ease-out;
}

.picker-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: var(--sab);
}

.picker-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 48px;
  padding: 0 20px;
  gap: 16px;
  text-align: left;
}

.picker-row:active {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.picker-flag {
  font-size: 22px;
  width: 28px;
  flex-shrink: 0;
}

.picker-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.picker-dial {
  color: var(--hint);
  font-size: 15px;
}

/* --- «Готово», «нет связи» --- */

.login-center {
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 24px;
}

.login-spinner {
  margin-bottom: 16px;
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
  border-top-color: var(--link);
}

.login-retry {
  margin-top: 16px;
}

/* ==================================================================
   Приглашения, «Выйти», «Удалить мои данные» (docs/AUTH_PLAN.md,
   часть 4) — по tg-devices.jpg: карточка с синей кнопкой, строки с
   круглым значком и тремя строками текста, красные строки-действия.
   ================================================================== */

.invite-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 16px;
  text-align: center;
}

.invite-hero-emoji {
  font-size: 60px;
  line-height: 76px;
}

.invite-hero-text {
  margin: 10px 6px 18px;
  font-size: 16px;
  line-height: 21px;
}

.invite-create {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  border-radius: 8px;
  background: var(--button);
  color: var(--button-text);
  font-size: 16px;
  font-weight: 500;
}

.invite-create:active {
  filter: brightness(1.1);
}

.invite-create:disabled {
  opacity: 0.6;
}

.invite-row {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  min-height: 71px;
  padding: 9px 16px;
  text-align: left;
}

.invite-row.passive {
  cursor: default;
}

.invite-row:not(.passive):active {
  background: color-mix(in srgb, var(--text) 6%, transparent);
}

.invite-row-icon,
.invite-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
}

.invite-row-icon svg {
  width: 22px;
  height: 22px;
}

.invite-avatar {
  font-size: 16px;
  font-weight: 500;
}

.invite-row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.invite-row-title {
  font-size: 17px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.invite-row-sub {
  font-size: 15px;
  line-height: 19px;
}

.invite-row-sub.dim {
  color: var(--hint);
}

.invite-row-action {
  display: flex;
  color: var(--hint);
}

.invite-key {
  margin: 2px 0 12px;
  padding: 12px 10px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: 600 18px/1.3 ui-monospace, "Roboto Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.5px;
  text-align: center;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
  cursor: pointer;
}

.action-row-icon {
  display: flex;
  justify-content: center;
  width: 28px;
  flex-shrink: 0;
  color: var(--link);
}

.action-row.danger .action-row-icon,
.action-row.danger .settings-label {
  color: var(--danger);
}

/* ==================================================================
   ЗАБЛОКИРОВАННЫЕ — по tg-blocked.jpg и tg-blocked-menu.jpg
   ================================================================== */

.blocked-caption {
  padding-top: 16px;
  font-size: 15px;
  line-height: 20px;
}

.blocked-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 62px;
  padding: 8px 4px 8px 13px;
}

/* Разделитель — от имени до края, как в Telegram. */
.blocked-row + .blocked-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 71px;
  right: 0;
  height: 1px;
  background: var(--separator);
}

.blocked-avatar {
  width: 44px;
  height: 44px;
}

.blocked-more {
  flex-shrink: 0;
  color: var(--hint);
}

/* Меню ⋮ у строки: карточка под кнопкой, у правого края экрана. */
.row-menu {
  position: absolute;
  right: 12px;
  min-width: 154px;
  padding: 0;
  overflow: hidden;
  transform-origin: top right;
  animation: menu-in 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.row-menu .menu-item {
  height: 47px;
  font-size: 17px;
}

/* ==================================================================
   НАСТРОЙКИ — разделы по tg-settings-*, tg-account, tg-chat-settings*,
   tg-storage-usage, tg-devices
   ================================================================== */

/* Цитата в пузыре растёт вместе с размером текста, как в Telegram. */
.bubble .quote {
  font-size: calc(var(--msg-font, 16px) - 1px);
}

.settings-row:disabled {
  opacity: 0.5;
}

.settings-icon {
  background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.06));
}

.settings-me .settings-me-sub {
  font-size: 16px;
}

.group-gap {
  margin-top: 20px;
}

/* --- Аккаунт (tg-account.jpg) --- */

.info-row {
  display: flex;
  align-items: center;
  gap: 26px;
  width: 100%;
  min-height: 62px;
  padding: 9px 20px;
  text-align: left;
}

.info-row-icon {
  display: flex;
  flex-shrink: 0;
  color: var(--text);
  opacity: 0.85;
}

.info-row-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.info-row-value {
  font-size: 17px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.info-row-label {
  margin-top: 2px;
  font-size: 14px;
  color: var(--hint);
}

.account-field {
  padding: 15px 20px;
  font-size: 17px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.account-field.multi {
  white-space: pre-wrap;
}

/* --- Ползунок (tg-chat-settings.jpg) --- */

.tg-slider-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 22px 14px 20px;
}

.tg-slider {
  --track: color-mix(in srgb, var(--hint) 35%, transparent);
  flex: 1;
  height: 28px;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  touch-action: pan-y;
}

.tg-slider:focus {
  outline: none;
}

.tg-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--track) var(--fill));
}

.tg-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.15s;
}

.tg-slider:active::-webkit-slider-thumb {
  transform: scale(1.2);
}

.tg-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--track) var(--fill));
}

.tg-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
}

.tg-slider-value {
  min-width: 24px;
  text-align: right;
  font-size: 17px;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Живой пример: настоящие пузыри на фоне чата. */
.bubble-preview {
  display: flex;
  flex-direction: column;
  padding: 10px 12px 14px;
  background: var(--wallpaper);
  pointer-events: none;
}

.bubble-preview .msg-row.in {
  padding-right: 24px;
}

.bubble-preview .msg-row.out {
  padding-left: 24px;
}

/* --- Список чатов: двух- или трёхстрочный (tg-chat-settings-list.jpg) --- */

.list-style-picker {
  display: flex;
  gap: 10px;
  padding: 10px 12px 14px;
}

.list-style {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.list-style-card {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--hint) 22%, transparent);
  border-radius: 10px;
  background: var(--bg2);
  transition: border-color 0.2s;
}

.list-style-rows {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.list-style-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.list-style-avatar {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hint) 45%, transparent);
}

.list-style-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.list-style-line {
  height: 3px;
  width: 90%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--hint) 45%, transparent);
}

.list-style-line.title {
  width: 60%;
}

.list-style-label {
  font-size: 16px;
}

.radio {
  flex-shrink: 0;
  position: relative;
  width: 21px;
  height: 21px;
  margin-left: 10px;
  border: 2px solid color-mix(in srgb, var(--hint) 80%, transparent);
  border-radius: 50%;
  transition: border-color 0.2s;
}

.radio::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.radio.on {
  border-color: var(--accent);
}

.radio.on::after {
  transform: scale(1);
}

/* Трёхстрочный список: текст сообщения — в две строки, имя автора в
   группе — отдельной строкой над ним, как в Telegram. */
.list-3 .row {
  height: 80px;
}

.list-3 .row-line + .row-line {
  align-items: flex-start;
  margin-top: 2px;
}

.list-3 .row-sub {
  white-space: normal;
  line-height: 20px;
}

.list-3 .row-sub-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.list-3 .row-sender {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Имя автора заняло первую строку — тексту остаётся одна. */
.list-3 .row-sender + .row-sub-text {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* --- Уведомления: строка с выключателем за чертой (tg-data-storage.jpg) --- */

.notice-card {
  margin-top: 14px;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--danger);
}

.split-row {
  display: flex;
  align-items: center;
  min-height: 62px;
}

.split-row-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 19px;
  min-width: 0;
  min-height: 62px;
  padding: 8px 12px 8px 17px;
  text-align: left;
}

.split-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.split-row-sub {
  margin-top: 1px;
  font-size: 14px;
  color: var(--hint);
}

.split-row-divider {
  width: 1px;
  height: 30px;
  background: var(--separator);
}

.split-row-switch {
  display: flex;
  align-items: center;
  align-self: stretch;
  padding: 0 18px;
}

/* --- Данные и память (tg-storage-usage.jpg) --- */

.storage-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 24px 10px;
  text-align: center;
}

.storage-donut {
  position: relative;
  width: 188px;
  height: 188px;
  animation: avatar-in 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

.storage-arc {
  transition: stroke-dasharray 0.4s ease, stroke-dashoffset 0.4s ease;
}

.storage-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.storage-donut-number {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.storage-donut-unit {
  font-size: 15px;
  color: var(--hint);
}

.storage-title {
  margin-top: 18px;
  font-size: 22px;
  font-weight: 500;
}

.storage-sub {
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.35;
  color: var(--hint);
}

.storage-bar {
  width: 170px;
  height: 4px;
  margin-top: 14px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--hint) 30%, transparent);
  overflow: hidden;
}

.storage-bar span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
  transition: width 0.4s ease;
}

.storage-row {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
  min-height: 54px;
  padding: 8px 20px 8px 18px;
  text-align: left;
}

.storage-row:disabled {
  cursor: default;
}

.storage-check {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 2px solid var(--c);
  border-radius: 50%;
  color: #fff;
  transition: background 0.15s;
}

.storage-check.on {
  background: var(--c);
}

.storage-check svg {
  width: 14px;
  height: 14px;
}

.storage-row:disabled .storage-check {
  border-color: color-mix(in srgb, var(--c) 45%, transparent);
}

.storage-row-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.storage-row-label {
  font-size: 17px;
}

.storage-row-label b {
  margin-left: 4px;
  font-size: 15px;
  font-weight: 500;
}

.storage-row-sub {
  margin-top: 1px;
  font-size: 13px;
  color: var(--hint);
}

.storage-row-size {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--accent);
}

.storage-button-wrap {
  padding: 8px 16px 16px;
}

.storage-button {
  width: 100%;
  height: 48px;
  border-radius: 24px;
  background: var(--button);
  color: var(--button-text);
  font-size: 16px;
  font-weight: 500;
  transition: opacity 0.2s, transform 0.1s;
}

.storage-button:active {
  transform: scale(0.98);
}

.storage-button:disabled {
  opacity: 0.45;
}

/* --- Устройства (tg-devices.jpg) --- */

.devices-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  padding: 22px 24px 20px;
  text-align: center;
}

.devices-intro-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: color-mix(in srgb, #2fb5c9 20%, transparent);
  color: #2fb5c9;
}

.devices-intro-icon svg {
  width: 36px;
  height: 36px;
}

.devices-intro-text {
  font-size: 16px;
  line-height: 1.4;
}

.session-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px 10px 14px;
}

.session-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: #fff;
}

.session-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.session-title {
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.session-app {
  font-size: 15px;
  line-height: 1.35;
}

.session-sub {
  font-size: 15px;
  line-height: 1.35;
  color: var(--hint);
}

.session-sub .accent,
.session-sub.accent {
  color: var(--accent);
}

.action-row:disabled {
  opacity: 0.5;
}

/* --- Документы: политика и условия --- */

.legal-loading {
  width: 30px;
  height: 30px;
  margin: 48px auto;
  border: 3px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: legal-spin 0.9s linear infinite;
}

@keyframes legal-spin {
  to {
    transform: rotate(360deg);
  }
}

.legal {
  padding: 4px 0 8px;
  font-size: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.legal .date {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 24px 6px;
  font-size: 14px;
  color: var(--hint);
}

.legal .draft {
  padding: 2px 8px;
  border-radius: 10px;
  background: color-mix(in srgb, #f0963b 22%, transparent);
  color: #f0963b;
  font-size: 13px;
  font-weight: 500;
}

.legal section {
  margin: 8px 12px;
  padding: 14px 18px;
  border-radius: 18px;
  background: var(--section);
}

.legal h2 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 500;
  color: var(--accent);
}

.legal p {
  margin: 0 0 8px;
}

.legal ul {
  margin: 0 0 8px;
  padding-left: 20px;
}

.legal li {
  margin: 0 0 5px;
}

.legal p:last-child,
.legal ul:last-child,
.legal li:last-child {
  margin-bottom: 0;
}

.legal a {
  color: var(--link);
  text-decoration: none;
}

.legal .hint {
  color: var(--hint);
  font-size: 14px;
}

.legal > p.hint {
  padding: 8px 24px;
}

/* Документ поверх экранов входа — на весь экран. */
.legal-screen {
  position: fixed;
  z-index: 20;
}

/* --- Вход: строка о документах под полем (как в Telegram) --- */

.login-terms {
  margin-top: 22px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
  color: var(--hint);
}

.login-terms button {
  display: inline;
  padding: 0;
  color: var(--link);
  font: inherit;
}

/* Длинный заголовок подстраницы («Политика конфиденциальности») — в одну
   строку: чуть мельче, а если и так не влезает — с многоточием. */
.subpage .toolbar-title {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.subpage .toolbar-title.long {
  font-size: 18px;
}


/* ==================================================================
   ЧАСТЬ 2: «Мой профиль» и «Настройки» по AyuGram 2026.03.29
   (docs/screens/tg/ayugram-extra/). Цвета тёмной темы замерены по
   скриншотам: фон экрана #141f25, карточки #1a2730, плитки #243642,
   шапка #22303d, разделитель темнее карточки.
   ================================================================== */

:root {
  /* Карточки читаются, даже если Telegram не прислал section_bg. */
  --card: var(--tg-theme-section-bg-color, #1a2730);
  --settings-bg: var(--tg-theme-secondary-bg-color, #141f25);
  --card-sep: rgba(0, 0, 0, 0.3);
  --tile-bg: color-mix(in srgb, var(--text) 7%, var(--card));
  --switch-on: color-mix(in srgb, var(--accent) 78%, var(--card));
  --switch-off: color-mix(in srgb, var(--hint) 62%, var(--card));

  /* Классические обои (как были раньше). */
  --wallpaper:
    radial-gradient(70% 45% at 85% 22%, color-mix(in srgb, var(--button) 22%, transparent), transparent 70%),
    radial-gradient(60% 40% at 12% 78%, color-mix(in srgb, var(--danger) 12%, transparent), transparent 70%),
    radial-gradient(80% 50% at 40% 50%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%),
    radial-gradient(60% 35% at 90% 95%, color-mix(in srgb, var(--text) 6%, transparent), transparent 70%),
    color-mix(in srgb, var(--chat-bg) 70%, #000);
  --wall-pattern: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%20fill='none'%20stroke='rgba(255,255,255,0.075)'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='26'%20cy='28'%20r='9'/%3E%3Cpath%20d='M78%2014l4%209%209%201-7%206%202%209-8-5-8%205%202-9-7-6%209-1z'/%3E%3Cpath%20d='M140%2028c6-8%2018-2%2012%207l-12%2011-12-11c-6-9%206-15%2012-7z'/%3E%3Crect%20x='18'%20y='86'%20width='24'%20height='17'%20rx='4'/%3E%3Cpath%20d='M24%2092h12M24%2097h8'/%3E%3Cpath%20d='M76%2096c8-6%2016%206%2024%200s16%206%2024%200'/%3E%3Ccircle%20cx='156'%20cy='108'%20r='5'/%3E%3Cpath%20d='M44%20150l10-10%2010%2010M110%20140h20M120%20130v20'/%3E%3Cpath%20d='M150%20160l6-6M150%20154l6%206'/%3E%3Ccircle%20cx='92'%20cy='58'%20r='2'/%3E%3Ccircle%20cx='52'%20cy='122'%20r='2'/%3E%3Ccircle%20cx='168'%20cy='62'%20r='2'/%3E%3C/svg%3E");
}

:root[data-scheme="light"] {
  --card: var(--tg-theme-section-bg-color, var(--bg));
  --settings-bg: var(--tg-theme-secondary-bg-color, var(--bg2));
  --card-sep: color-mix(in srgb, var(--text) 9%, transparent);
  --tile-bg: var(--card);
  --switch-on: var(--accent);
  --switch-off: color-mix(in srgb, var(--hint) 45%, var(--card));
  --wallpaper:
    radial-gradient(70% 45% at 85% 22%, color-mix(in srgb, var(--button) 18%, transparent), transparent 70%),
    radial-gradient(60% 40% at 12% 78%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--chat-bg);
  --wall-pattern: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%20fill='none'%20stroke='rgba(0,0,0,0.075)'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='26'%20cy='28'%20r='9'/%3E%3Cpath%20d='M78%2014l4%209%209%201-7%206%202%209-8-5-8%205%202-9-7-6%209-1z'/%3E%3Cpath%20d='M140%2028c6-8%2018-2%2012%207l-12%2011-12-11c-6-9%206-15%2012-7z'/%3E%3Crect%20x='18'%20y='86'%20width='24'%20height='17'%20rx='4'/%3E%3Cpath%20d='M24%2092h12M24%2097h8'/%3E%3Cpath%20d='M76%2096c8-6%2016%206%2024%200s16%206%2024%200'/%3E%3Ccircle%20cx='156'%20cy='108'%20r='5'/%3E%3Cpath%20d='M44%20150l10-10%2010%2010M110%20140h20M120%20130v20'/%3E%3Cpath%20d='M150%20160l6-6M150%20154l6%206'/%3E%3Ccircle%20cx='92'%20cy='58'%20r='2'/%3E%3Ccircle%20cx='52'%20cy='122'%20r='2'/%3E%3Ccircle%20cx='168'%20cy='62'%20r='2'/%3E%3C/svg%3E");
}

/* --- Своя дневная/тёмная схема против темы Telegram («Переключить на
       дневную тему»): цвета Telegram не подходят, берём свои. --- */

:root[data-force="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg2: #f0f2f5;
  --header: #ffffff;
  --text: #000000;
  --hint: #8a9099;
  --subtitle: #8a9099;
  --link: #2481cc;
  --accent: #2481cc;
  --button: #3390ec;
  --button-text: #ffffff;
  --danger: #e53935;
  --section: #ffffff;
  --card: #ffffff;
  --settings-bg: #f0f2f5;
}

:root[data-force="dark"] {
  color-scheme: dark;
  --bg: #18222b;
  --bg2: #141f25;
  --header: #1d2a33;
  --text: #f5f5f5;
  --hint: #7f91a4;
  --subtitle: #7f91a4;
  --link: #6ab3f3;
  --accent: #6ab2f2;
  --button: #5288c1;
  --button-text: #ffffff;
  --danger: #ec3942;
  --section: #1a2730;
  --card: #1a2730;
  --settings-bg: #141f25;
}

/* ==================================================================
   ТЕМЫ ЧАТОВ (themes.js): обои, свои пузыри, акцент приложения
   ================================================================== */

:root[data-chat-theme="emerald"] {
  --accent: #4fc38a;
  --link: #4fc38a;
  --button: #2f9a63;
  --theme-base: #0b130e;
  --theme-tint: #2f8a5f;
  --bubble-out: linear-gradient(135deg, #2f8a5f, #4fae74);
  --bubble-out-solid: #3a9c6a;
  --bubble-in: #1b2620;
}

:root[data-chat-theme="purple"] {
  --accent: #a98af2;
  --link: #a98af2;
  --button: #7a5ad8;
  --theme-base: #0f0b17;
  --theme-tint: #6c4fd6;
  --bubble-out: linear-gradient(135deg, #6c4fd6, #a05fdc);
  --bubble-out-solid: #8657d8;
  --bubble-in: #221c2d;
}

:root[data-chat-theme="sunset"] {
  --accent: #f2a15a;
  --link: #f2a15a;
  --button: #d9733d;
  --theme-base: #150d10;
  --theme-tint: #d2546c;
  --bubble-out: linear-gradient(135deg, #e3893c, #d2546c);
  --bubble-out-solid: #db6f55;
  --bubble-in: #2a1f23;
}

:root[data-chat-theme="cyber"] {
  --accent: #d77bf5;
  --link: #d77bf5;
  --button: #8b48f0;
  --theme-base: #0a0a12;
  --theme-tint: #8b48f0;
  --bubble-out: linear-gradient(135deg, #8b48f0, #f08a3c);
  --bubble-out-solid: #b06aa0;
  --bubble-in: #1f1d2b;
}

:root[data-chat-theme="night"] {
  --accent: #64a8f0;
  --link: #64a8f0;
  --button: #3a78c9;
  --theme-base: #000000;
  --theme-tint: #1e2c3a;
  --bubble-out: #2b5278;
  --bubble-out-solid: #2b5278;
  --bubble-in: #1c1c1e;
}

/* «Ночная чёрная» в тёмной схеме — чёрное всё приложение. */
:root[data-chat-theme="night"]:not([data-scheme="light"]) {
  --bg: #000000;
  --bg2: #000000;
  --header: #0e0e10;
  --section: #121214;
  --card: #121214;
  --settings-bg: #000000;
  --tile-bg: #1c1c1f;
}

:root:not([data-chat-theme="classic"]) {
  --bubble-out-text: #ffffff;
  --bubble-out-meta: rgba(255, 255, 255, 0.78);
  --bubble-out-accent: #ffffff;
  --wallpaper:
    var(--wall-pattern),
    radial-gradient(65% 45% at 85% 18%, color-mix(in srgb, var(--theme-tint) 38%, transparent), transparent 70%),
    radial-gradient(60% 40% at 12% 82%, color-mix(in srgb, var(--theme-tint) 24%, transparent), transparent 70%),
    var(--theme-base);
}

:root[data-scheme="light"]:not([data-chat-theme="classic"]) {
  --bubble-in: #ffffff;
  --wallpaper:
    var(--wall-pattern),
    radial-gradient(65% 45% at 85% 18%, color-mix(in srgb, var(--theme-tint) 26%, transparent), transparent 70%),
    radial-gradient(60% 40% at 12% 82%, color-mix(in srgb, var(--theme-tint) 16%, transparent), transparent 70%),
    color-mix(in srgb, var(--theme-tint) 12%, #eef1f4);
}

/* --- Выбор темы: карточки в ряд с мини-пузырями и эмодзи --- */

.theme-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 14px 6px;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.theme-strip::-webkit-scrollbar {
  display: none;
}

.theme-card {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
}

.theme-card-wall {
  position: relative;
  display: block;
  width: 72px;
  height: 98px;
  border-radius: 12px;
  overflow: hidden;
  background:
    var(--wall-pattern),
    radial-gradient(80% 50% at 80% 15%, color-mix(in srgb, var(--tc-tint) 45%, transparent), transparent 70%),
    var(--tc-base);
  background-size: 120px 120px, auto, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  transition: box-shadow 0.25s, transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.theme-card:active .theme-card-wall {
  transform: scale(0.95);
}

.theme-card.on .theme-card-wall {
  box-shadow: inset 0 0 0 2px var(--card), 0 0 0 2px var(--accent);
}

.theme-card-out,
.theme-card-in {
  position: absolute;
  height: 17px;
  border-radius: 9px;
}

.theme-card-out {
  top: 14px;
  right: 8px;
  width: 40px;
}

.theme-card-in {
  top: 37px;
  left: 8px;
  width: 36px;
  background: rgba(255, 255, 255, 0.12);
}

.theme-card-emoji {
  position: absolute;
  left: 50%;
  bottom: 9px;
  transform: translateX(-50%);
  font-size: 24px;
  line-height: 1;
}

.theme-card-name {
  max-width: 76px;
  font-size: 12px;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-card.on .theme-card-name {
  color: var(--accent);
}

/* --- Акцентные цвета — кружки (photo_3_…31) --- */

.accent-strip {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 10px 16px 12px;
  scrollbar-width: none;
}

.accent-strip::-webkit-scrollbar {
  display: none;
}

.accent-dot {
  position: relative;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--dot);
  transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.5, 1);
}

/* «Цвет темы» — кружок с цветом акцента самой темы. */
.accent-dot.theme {
  background: conic-gradient(from 200deg, #e5534b, #f0a13a, #4fc38a, #4fb3e8, #7b72f0, #e5534b);
}

.accent-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 0 0 var(--card);
  transition: box-shadow 0.22s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.accent-dot.on::after {
  box-shadow: inset 0 0 0 3px var(--card);
}

.accent-dot.on {
  box-shadow: 0 0 0 2px var(--dot, var(--accent));
}

.accent-dot:active {
  transform: scale(0.9);
}

/* ==================================================================
   Карточки, строки, разделители
   ================================================================== */

.tab-screen,
.subpage {
  background: var(--settings-bg);
}

.settings-group,
.profile-card {
  background: var(--card);
  border-radius: 16px;
}

/* Между карточками — 12px, как на photo_3; под заголовком раздела — вплотную. */
.settings-group {
  margin: 12px 12px;
}

.section-header + .settings-group {
  margin-top: 0;
}

/* Главный экран и «Контакты»: круглые цветные значки 30×30 (photo_3). */
.settings-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
}

.settings-row {
  gap: 18px;
  min-height: 50px;
}

.settings-label.accent {
  color: var(--accent);
}

/* Строка подраздела: серый контурный значок (photo_9/16). */
.option-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 19px;
  width: 100%;
  min-height: 50px;
  padding: 8px 18px 8px 20px;
  text-align: left;
  --sep-left: 20px;
}

.option-row.with-icon {
  --sep-left: 65px;
}

.option-row.split {
  padding: 0;
}

.option-main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 19px;
  min-width: 0;
  min-height: 58px;
  padding: 8px 12px 8px 20px;
  text-align: left;
}

.option-icon {
  display: flex;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  color: var(--hint);
}

.option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.option-sub {
  margin-top: 1px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--hint);
}

.option-row.disabled,
.settings-group.dimmed > .option-row {
  opacity: 0.5;
}

.option-row:active:not(:disabled),
.option-main:active:not(:disabled) {
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

/* Вертикальная черта перед выключателем. */
.split-row-divider {
  width: 1px;
  height: 26px;
  background: var(--card-sep);
}

.split-row-switch {
  padding: 0 18px 0 16px;
}

/* Тонкие разделители между строками — от начала текста до правого края
   карточки, под значок не заходят (photo_1, photo_9, photo_7…31). На
   главном экране настроек их нет, как и на эталоне (photo_3). */
.subpage .settings-group > :is(.option-row, .settings-row, .storage-row, .storage-chat-row) + :is(.option-row, .settings-row, .storage-row, .storage-chat-row),
.profile-card > .profile-field + .profile-field {
  position: relative;
}

.subpage .settings-group > :is(.option-row, .settings-row, .storage-row, .storage-chat-row) + :is(.option-row, .settings-row, .storage-row, .storage-chat-row)::before,
.profile-card > .profile-field + .profile-field::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--sep-left, 20px);
  right: 0;
  height: 1px;
  background: var(--card-sep);
  pointer-events: none;
}

.subpage .settings-row {
  --sep-left: 65px;
}

.storage-row {
  --sep-left: 60px;
}

.profile-field {
  --sep-left: 18px;
  padding: 11px 18px;
}

/* --- Выключатель и радиокнопка (photo_9/10_…22, photo_17_…31) --- */

.switch {
  width: 42px;
  height: 26px;
  border-radius: 13px;
  transition: background-color 0.25s ease;
}

.switch::after {
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-width: 3px;
  border-color: color-mix(in srgb, var(--text) 88%, transparent);
  background: var(--card);
  transition: transform 0.3s cubic-bezier(0.3, 1.35, 0.5, 1), width 0.18s ease;
}

.switch.on::after {
  transform: translateX(16px);
}

/* Нажатие — кружок чуть вытягивается, как в Telegram. */
:is(.option-row, .split-row-switch, .settings-row):active .switch::after {
  width: 24px;
}

:is(.option-row, .split-row-switch, .settings-row):active .switch.on::after {
  transform: translateX(12px);
}

.radio {
  width: 20px;
  height: 20px;
  border-width: 2px;
  transition: border-color 0.22s ease;
}

.radio::after {
  inset: 3px;
  transition: transform 0.28s cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* ==================================================================
   Главный экран «Настроек»
   ================================================================== */

.settings-screen {
  position: relative;
}

/* Шапка: поиск и ⋮ всегда, фон и «Настройки» проявляются при прокрутке
   (photo_3 → photo_4). */
.settings-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 4px;
  height: calc(56px + var(--top-inset));
  padding: var(--top-inset) 4px 0 4px;
  background: transparent;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.settings-top.solid {
  background: var(--header);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.blur-ok .settings-top.solid {
  background: color-mix(in srgb, var(--header) 86%, transparent);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
}

.settings-top-title {
  position: absolute;
  left: 96px;
  right: 96px;
  bottom: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 500;
  opacity: 0;
  transform: translate3d(0, 6px, 0);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.settings-top.solid .settings-top-title {
  opacity: 1;
  transform: none;
}

.settings-top > .icon-btn:first-of-type {
  margin-left: auto;
}

.settings-top.searching > .icon-btn:first-of-type {
  margin-left: 0;
}

.settings-top .toolbar-search {
  padding-left: 8px;
}

.settings-main {
  padding-top: var(--top-inset);
}

.settings-me {
  padding: 60px 0 14px;
}

.settings-search {
  padding-top: 56px;
}

.settings-footer {
  padding: 14px 16px 18px;
  font-size: 14px;
}

/* ==================================================================
   «Мой профиль» (photo_1/photo_2)
   ================================================================== */

.my-profile {
  position: relative;
}

.my-profile > .list {
  padding-top: var(--top-inset);
}

.my-profile-bar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  height: calc(56px + var(--top-inset));
  padding: var(--top-inset) 4px 0;
}

.profile-actions.my {
  gap: 6px;
  margin: 4px 12px 14px;
}

.profile-actions.my .profile-action {
  gap: 6px;
  min-height: 54px;
  padding: 10px 4px 9px;
  border-radius: 16px;
  background: var(--tile-bg);
  font-size: 14px;
  font-weight: 500;
}

.layer-list .profile-actions.my,
.layer-list .profile-card {
  margin-left: 12px;
  margin-right: 12px;
}

.profile-card {
  padding: 2px 0;
}

/* Меню ⋮ вырастает из правого верхнего угла. */
.header-menu {
  background: color-mix(in srgb, var(--text) 9%, var(--card));
  transform-origin: top right;
  animation: menu-corner-in 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}

@keyframes menu-corner-in {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
}

/* ==================================================================
   Энергосбережение (photo_16_…31)
   ================================================================== */

.energy-card {
  padding: 16px 20px 12px;
}

.energy-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 500;
  color: var(--accent);
}

.energy-badge {
  padding: 1px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
}

.energy-badge.on {
  background: var(--accent);
  color: var(--card);
}

.energy-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0 2px;
  font-size: 15px;
  color: var(--hint);
}

.energy-labels button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}

.energy-labels button.on {
  color: var(--accent);
}

.energy-labels svg {
  width: 20px;
  height: 20px;
}

.energy-card .tg-slider-row {
  padding: 0;
}

/* ==================================================================
   Использование памяти: список по чатам (photo_13_…31)
   ================================================================== */

.storage-chats {
  margin-top: 16px;
}

.storage-tabs {
  display: flex;
  border-bottom: 1px solid var(--card-sep);
}

.storage-tab {
  position: relative;
  flex: 1;
  height: 48px;
  font-size: 15px;
  font-weight: 500;
  color: var(--hint);
  transition: color 0.2s;
}

.storage-tab::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.storage-tab.on {
  color: var(--accent);
}

.storage-tab.on::after {
  transform: scaleX(1);
}

.storage-chat-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 7px 18px 7px 14px;
  --sep-left: 70px;
  animation: item-in 0.25s ease-out backwards;
}

.storage-chat-other {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--hint) 30%, var(--card));
  color: #fff;
}

.storage-chat-title {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.storage-chat-size {
  flex-shrink: 0;
  font-size: 16px;
  color: var(--accent);
}

.storage-chats-empty {
  padding: 20px;
  text-align: center;
  color: var(--hint);
}

/* ==================================================================
   Энергосбережение: что выключают выключатели
   ================================================================== */

/* «Эффекты размытия» выключены — «островок» непрозрачный. */
html:not(.blur-ok) .tabbar {
  background: color-mix(in srgb, var(--header) 97%, var(--text) 3%);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* «Анимация эмодзи и реакций». */
.no-emoji-anim :is(.reaction, .reaction-pick, .emoji-item, .tabbar-badge, .ep-item) {
  animation: none !important;
}

.no-emoji-anim .reaction-burst {
  display: none;
}

/* «Анимации в чатах»: появление сообщений, меню, панели. */
.no-chat-anim :is(
    .msg-row.appear-out .bubble,
    .msg-row.appear-in .bubble,
    .msg-row.appear-in .msg-avatar,
    .menu-box.ready,
    .menu-item,
    .reaction-bar,
    .compose-context,
    .send-icon,
    .select-check,
    .sheet,
    .sheet-row,
    .attach-tile,
    .attach-tab
  ) {
  animation: none !important;
}

/* Окно выбора варианта («Свайп по чату влево») — кружки, как в Telegram. */
.choice-list {
  display: flex;
  flex-direction: column;
  margin: 10px -22px 0;
}

.choice-row {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 48px;
  padding: 0 22px;
  font-size: 16px;
  text-align: left;
}

.choice-row .radio {
  margin-left: 0;
}

.choice-row:active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* ---------- Экран поиска (tg-search.jpg) ---------- */

.search-tabs {
  animation: stabs-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes stabs-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

/* Ряд кружков — люди, с кем переписывались последними. */
.speople {
  display: flex;
  gap: 6px;
  padding: 6px 6px 10px;
  overflow-x: auto;
  scrollbar-width: none;
}

.speople::-webkit-scrollbar {
  display: none;
}

.speople-item {
  display: flex;
  flex: 0 0 72px;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 0;
  animation: speople-in 0.34s cubic-bezier(0.3, 1.4, 0.5, 1) backwards;
}

.speople-item:active .avatar {
  transform: scale(0.94);
}

.speople-name {
  max-width: 100%;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@keyframes speople-in {
  from {
    opacity: 0;
    transform: scale(0.7);
  }
}

/* Полоса «Недавние — Очистить». */
.srecent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 32px;
  padding: 0 4px 0 16px;
  background: color-mix(in srgb, #000 22%, var(--bg));
  font-size: 15px;
  color: var(--hint);
}

.srecent-clear {
  height: 32px;
  padding: 0 12px;
  color: var(--hint);
  font-size: 15px;
}

.srecent-clear:active {
  color: var(--text);
}

/* Строка чата в «Недавних» и «Каналах» — с тонкой линией от текста до края. */
.srow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 60px;
  padding: 0 14px 0 11px;
  text-align: left;
  animation: item-in 0.25s ease-out backwards;
  transition: background 0.15s;
}

.srow::after {
  content: "";
  position: absolute;
  left: 71px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--separator);
}

.srow:last-child::after {
  display: none;
}

.srow:active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

.srow-main {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.srow-title {
  font-size: 17px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.srow-sub {
  margin-top: 2px;
  font-size: 15px;
  color: var(--hint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Вкладки вложений: сетка медиа и строки — во всю ширину. */
.gsearch .pm-grid {
  margin: 4px 0 0;
}

.gsearch .p-row {
  padding: 6px 14px;
  border-radius: 0;
}

.gsearch-note {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--hint);
  text-align: center;
}

/* ---------- «Контакты» (tg-contacts.jpg) ---------- */

/* Кнопка сортировки — левее «⋮». */
.contacts-sort {
  position: absolute;
  right: 50px;
  top: calc(4px + var(--top-inset));
}

.contacts-sort-icon {
  display: flex;
  animation: sort-flip 0.3s cubic-bezier(0.3, 1.5, 0.5, 1);
}

@keyframes sort-flip {
  from {
    opacity: 0;
    transform: rotate(-90deg) scale(0.6);
  }
}

.contacts-caption {
  animation: fade 0.2s ease-out;
}

.contact-row:active {
  background: color-mix(in srgb, var(--text) 8%, transparent);
}

/* «⇄» справа у каждого контакта. */
.contact-mutual {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--hint);
  opacity: 0.85;
}

.contacts-screen .fab svg {
  width: 26px;
  height: 26px;
}

.new-contact-error {
  margin-top: 8px;
  font-size: 14px;
  color: var(--danger);
  animation: fade 0.2s ease-out;
}

/* ---------- «Новый контакт» (tg-new-contact.jpg) ---------- */

.nc-sheet {
  --outline: color-mix(in srgb, var(--hint) 42%, var(--bg));
  padding: 0 20px calc(16px + var(--sab));
}

.nc-title {
  padding: 20px 1px 16px;
  font-size: 22px;
  font-weight: 500;
}

.nc-fields {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
}

.nc-sheet .outline {
  height: 50px;
  border-radius: 9px;
}

.nc-sheet .outline-input input::placeholder {
  opacity: 1;
}

/* Подпись на рамке плавно «выпрыгивает» из поля. */
.nc-sheet .outline-label {
  animation: nc-label-up 0.18s ease-out;
}

@keyframes nc-label-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

.nc-phone .country-flag {
  width: 34px;
}

.nc-dial {
  display: flex;
  align-items: center;
  width: 62px;
  flex-shrink: 0;
}

.outline-input .nc-dial input {
  flex: 1;
  width: 100%;
}

.nc-create {
  width: 100%;
  height: 47px;
  margin-top: 26px;
  border-radius: 8px;
  background: var(--button);
  color: var(--button-text);
  font-size: 17px;
  font-weight: 500;
  transition: opacity 0.2s;
}

.nc-create:disabled {
  opacity: 0.55;
}

.nc-create:not(:disabled):active {
  filter: brightness(0.92);
}