/* ============================================================
   V128 — responsive overlays, menus and account UI hardening.
   Loaded after V127. Keeps the established design and behaviour,
   but removes width/height assumptions from profile dialogs,
   popovers, bottom menus, tooltips and compact navigation.
   ============================================================ */

/* Cross-engine box sizing and flexible text. */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
:is(.modal,.review-modal,.landing-auth-panel,.theme-popover,.appearance-popover,.legal-hub nav,
    .admin-purchase-tooltip,.purchase-auto-note,.site-top-hub,.mobile-nav,.sidebar){min-width:0}
:is(.modal,.review-modal,.landing-auth-panel,.theme-popover,.appearance-popover,.legal-hub nav) *{min-width:0}
:is(.profile-setting-copy,.profile-action>span:last-child,.telegram-profile-head>div,.profile-identity-card>div,
    .modal-head>div,.review-modal-head>div,.admin-purchase-tip-head>div){overflow-wrap:anywhere}

/* Every overlay stays inside both narrow and short viewports. */
.modal-layer,.review-layer,.landing-auth-layer{
  padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right))
          max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))!important;
  overflow:auto!important;
  overscroll-behavior:contain;
}
.modal,.review-modal,.landing-auth-panel{
  width:min(100%,620px)!important;
  max-width:calc(100vw - 20px)!important;
  max-height:calc(100vh - 20px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable;
}
@supports(height:100dvh){
  .modal,.review-modal,.landing-auth-panel{max-height:calc(100dvh - 20px)!important}
}
.modal-head,.review-modal-head,.auth-panel-head{
  min-width:0!important;
}
.modal-head h3,.review-modal-head h2,.auth-panel-head h2{
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}

/* Profile/account menu: rows can shrink and values never force the dialog wider. */
.profile-identity-card{
  width:100%!important;
  max-width:100%!important;
}
.profile-identity-card b,.profile-identity-card span:not(.profile-avatar){
  max-width:100%!important;
}
.profile-summary>div{
  min-width:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,auto)!important;
  align-items:center!important;
  gap:10px!important;
}
.profile-summary>div>span{min-width:0!important}
.profile-summary>div>b{
  min-width:0!important;
  max-width:min(52%,280px)!important;
  text-align:right!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.profile-setting-card{
  width:100%!important;
  min-width:0!important;
}
.profile-setting-copy{min-width:0!important}
.profile-setting-copy b,.profile-setting-copy small{
  display:block!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.telegram-profile-panel{width:100%!important;max-width:100%!important;overflow:hidden!important}
.telegram-profile-head{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:40px minmax(0,1fr) auto!important;
  gap:10px!important;
}
.telegram-profile-head>div{min-width:0!important}
.telegram-profile-head>div>b,.telegram-profile-head>div>span{
  display:block!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.telegram-profile-head>small{max-width:120px!important;text-align:right!important;white-space:normal!important}
.telegram-profile-actions,.telegram-profile-actions.is-linked{grid-template-columns:minmax(0,1fr)!important}
.profile-action{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:32px minmax(0,1fr) auto!important;
}
.profile-action>span:nth-child(2){min-width:0!important}
.profile-action b,.profile-action small{display:block!important;max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}
.profile-logout{width:100%!important;max-width:100%!important}
.telegram-unlink{max-width:100%!important;white-space:normal!important;overflow-wrap:anywhere!important}

/* Appearance/theme menu: it must remain usable at 1366x768, 1024x768 and landscape phones. */
.theme-popover,.appearance-popover{
  max-width:calc(100vw - 20px)!important;
  max-height:calc(100vh - 28px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable;
}
@supports(height:100dvh){
  .theme-popover,.appearance-popover{max-height:calc(100dvh - 28px)!important}
}
.theme-popover-head{min-width:0!important}
.theme-popover-head>div{min-width:0!important}
.theme-grid,.combined-shader-grid,.shader-grid{min-width:0!important}
.theme-grid>button,.shader-choice{min-width:0!important}
.theme-grid>button>span,.shader-choice>span{min-width:0!important}
.theme-grid b,.theme-grid small,.shader-choice b,.shader-choice small{overflow-wrap:anywhere!important}

/* Bottom service menu and floating notes never escape the viewport. */
.legal-hub{
  max-width:calc(100vw - 16px)!important;
}
.legal-hub nav{
  width:min(320px,calc(100vw - 16px))!important;
  max-height:calc(100vh - 92px)!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
}
@supports(height:100dvh){.legal-hub nav{max-height:calc(100dvh - 92px)!important}}
.legal-hub nav a{min-width:0!important}
.legal-hub nav a>span:last-child{min-width:0!important}
.legal-hub nav a b,.legal-hub nav a small{white-space:normal!important;overflow-wrap:anywhere!important}
.purchase-auto-note{width:min(342px,calc(100vw - 20px))!important;max-width:calc(100vw - 20px)!important}

/* Admin menus/tabs/tooltips scale down instead of clipping. */
.admin-page .admin-view-tabs{
  width:min(520px,100%)!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.admin-page .admin-view-tabs button{min-width:0!important;padding-inline:10px!important;white-space:normal!important}
.admin-purchase-tooltip{
  max-width:calc(100vw - 16px)!important;
  max-height:calc(100vh - 16px)!important;
  overflow:auto!important;
}
@supports(height:100dvh){.admin-purchase-tooltip{max-height:calc(100dvh - 16px)!important}}
.admin-purchase-key{min-width:0!important}
.admin-purchase-key b,.admin-purchase-key small{min-width:0!important;overflow-wrap:anywhere!important}

/* Medium browser widths: remove the squeezed three-column topbar before it breaks. */
@media(max-width:1180px){
  body:not(.landing-page):not(.legal-page):not(.review-page) .site-top-hub:not(.mobile-header){
    grid-template-columns:minmax(0,1fr) auto!important;
    gap:8px!important;
  }
  body:not(.landing-page):not(.legal-page):not(.review-page) .site-top-hub:not(.mobile-header)>.hub-center-nav,
  body:not(.landing-page):not(.legal-page):not(.review-page) .site-top-hub:not(.mobile-header)>.faq-hub-nav,
  body:not(.landing-page):not(.legal-page):not(.review-page) .site-top-hub:not(.mobile-header)>nav:not(.topbar-actions){
    display:none!important;
  }
  body:not(.landing-page):not(.legal-page):not(.review-page) .site-top-hub:not(.mobile-header)>.page-identity,
  body:not(.landing-page):not(.legal-page):not(.review-page) .site-top-hub:not(.mobile-header)>.mobile-brand{
    grid-column:1!important;
  }
  body:not(.landing-page):not(.legal-page):not(.review-page) .site-top-hub:not(.mobile-header)>.topbar-actions,
  body:not(.landing-page):not(.legal-page):not(.review-page) .site-top-hub:not(.mobile-header)>#accountButton{
    grid-column:2!important;
  }
}

/* Tablet widths use bottom navigation consistently; this avoids a narrow Firefox content lane. */
@media(min-width:821px) and (max-width:1080px){
  :root{--sidebar:0px!important}
  .sidebar{display:none!important}
  .app-content{margin-left:0!important}
  .page-wrap{width:min(calc(100% - 28px),var(--wrap))!important;padding-bottom:98px!important}
  .page-footer{display:none!important}
  .mobile-nav{
    position:fixed!important;
    z-index:180!important;
    left:10px!important;right:10px!important;
    bottom:calc(8px + env(safe-area-inset-bottom))!important;
    height:64px!important;
    display:flex!important;
    gap:4px!important;
    padding:5px!important;
    border-radius:20px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    scrollbar-width:none!important;
  }
  .mobile-nav::-webkit-scrollbar{display:none!important}
  .mobile-link,button.mobile-link{min-width:82px!important;flex:0 0 82px!important}
}

/* Normal phones and narrow windows. */
@media(max-width:700px){
  .modal,.review-modal,.landing-auth-panel{
    width:100%!important;
    max-width:calc(100vw - 16px)!important;
    padding:16px!important;
    border-radius:20px!important;
  }
  .modal-head,.review-modal-head,.auth-panel-head{gap:10px!important;margin-bottom:14px!important}
  .modal-head h3,.review-modal-head h2,.auth-panel-head h2{font-size:1.12rem!important}
  .close-btn,.review-close{width:36px!important;height:36px!important;flex:0 0 36px!important}

  .profile-identity-card{margin-top:8px!important;padding:10px!important;gap:10px!important}
  .profile-avatar{width:42px!important;height:42px!important;flex-basis:42px!important;border-radius:13px!important}
  .profile-summary{margin:8px 0 12px!important}
  .profile-summary>div{min-height:42px!important;padding:7px 9px!important;gap:8px!important}
  .profile-summary>div>b{max-width:55%!important;font-size:.69rem!important}
  .profile-setting-card{min-height:60px!important;grid-template-columns:36px minmax(0,1fr) 18px!important;padding:8px 9px!important;gap:8px!important}
  .profile-setting-icon{width:36px!important;height:36px!important}
  .profile-setting-copy b{font-size:.68rem!important}.profile-setting-copy small{font-size:.54rem!important;line-height:1.35!important}
  .telegram-profile-panel{padding:10px!important}
  .telegram-profile-head{grid-template-columns:36px minmax(0,1fr) auto!important;gap:8px!important}
  .telegram-profile-icon{width:36px!important;height:36px!important}
  .telegram-profile-head>small{font-size:.44rem!important;max-width:86px!important}
  .profile-action{min-height:48px!important;grid-template-columns:30px minmax(0,1fr) 12px!important;gap:8px!important;padding:7px 8px!important}
  .profile-action-icon{width:30px!important;height:30px!important}
  .profile-action b{font-size:.60rem!important}.profile-action small{font-size:.49rem!important;line-height:1.3!important}
  .profile-logout{min-height:44px!important}

  .theme-popover,.appearance-popover{
    position:fixed!important;
    left:8px!important;right:8px!important;
    top:max(68px,calc(env(safe-area-inset-top) + 60px))!important;
    width:auto!important;
    max-width:none!important;
    max-height:calc(100vh - 80px - env(safe-area-inset-bottom))!important;
  }
  @supports(height:100dvh){
    .theme-popover,.appearance-popover{max-height:calc(100dvh - 80px - env(safe-area-inset-bottom))!important}
  }
  .appearance-popover .theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  .admin-page .admin-view-tabs{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:4px!important}
  .admin-page .admin-view-tabs button{min-height:42px!important;padding:8px 5px!important;font-size:.57rem!important}
  .admin-page .admin-view-tabs button span{display:none!important}
}

@media(max-width:460px){
  .modal,.review-modal,.landing-auth-panel{padding:13px!important;border-radius:18px!important}
  .profile-summary>div{
    grid-template-columns:minmax(0,1fr)!important;
    gap:3px!important;
    align-items:start!important;
  }
  .profile-summary>div>b{max-width:100%!important;text-align:left!important;padding-left:23px!important}
  .telegram-profile-head{grid-template-columns:34px minmax(0,1fr)!important}
  .telegram-profile-head>small{grid-column:2!important;justify-self:start!important;text-align:left!important;max-width:100%!important}
  .profile-action{grid-template-columns:30px minmax(0,1fr)!important}
  .profile-action::after{display:none!important}
  .profile-setting-card{grid-template-columns:34px minmax(0,1fr) 14px!important}
  .telegram-unlink{font-size:.55rem!important}
  .appearance-popover .theme-grid{grid-template-columns:1fr!important}
  .admin-page .admin-view-tabs{grid-template-columns:1fr!important}
  .admin-page .admin-view-tabs button{min-height:38px!important}
  .legal-hub nav{width:calc(100vw - 16px)!important}
}

/* Short monitors (1366x768, 1280x720) and landscape devices. */
@media(max-height:760px){
  .modal-layer,.review-layer,.landing-auth-layer{place-items:start center!important}
  .modal,.review-modal,.landing-auth-panel{margin:auto 0!important}
  .modal-head,.review-modal-head,.auth-panel-head{margin-bottom:12px!important}
  .profile-identity-card{margin-top:6px!important}
  .profile-summary{margin-top:8px!important;margin-bottom:10px!important}
  .profile-setting-card{min-height:58px!important}
  .telegram-profile-panel{padding:10px!important}
  .telegram-profile-actions,.telegram-profile-actions.is-linked{margin-top:8px!important;gap:6px!important}
  .profile-action{min-height:46px!important}
  .profile-logout{margin-top:8px!important}
  .theme-popover,.appearance-popover{max-height:calc(100vh - 24px)!important}
  @supports(height:100dvh){.theme-popover,.appearance-popover{max-height:calc(100dvh - 24px)!important}}
}

@media(max-height:560px){
  .modal-layer,.review-layer,.landing-auth-layer{
    align-items:start!important;
    padding-top:8px!important;padding-bottom:8px!important;
  }
  .modal,.review-modal,.landing-auth-panel{
    max-height:calc(100vh - 16px)!important;
    border-radius:16px!important;
  }
  @supports(height:100dvh){.modal,.review-modal,.landing-auth-panel{max-height:calc(100dvh - 16px)!important}}
  .modal{padding:13px!important}
  .profile-identity-card{padding:8px!important}
  .profile-summary>div{min-height:38px!important}
  .profile-setting-card{min-height:52px!important}
  .telegram-profile-panel{padding:8px!important}
  .profile-action{min-height:42px!important}
  .profile-logout{min-height:40px!important}
  .legal-hub nav{max-height:calc(100vh - 72px)!important}
  @supports(height:100dvh){.legal-hub nav{max-height:calc(100dvh - 72px)!important}}
}

/* Browser fallback: keep critical popups opaque if backdrop-filter is absent. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .modal,.review-modal,.landing-auth-panel,.theme-popover,.appearance-popover,.legal-hub nav,
  .mobile-nav,.admin-purchase-tooltip{background:rgba(14,13,17,.97)!important}
}

/* Width fallbacks for engines that ignore min()/dvh: percentage constraints come first. */
.modal-layer>.modal{width:620px!important;max-width:100%!important;width:min(100%,620px)!important}
.review-layer>.review-modal{width:720px!important;max-width:100%!important;width:min(100%,720px)!important}
.landing-auth-layer>.landing-auth-panel{width:470px!important;max-width:100%!important;width:min(100%,470px)!important}
.theme-popover,.appearance-popover{width:330px;max-width:calc(100% - 16px)}

/* Other dialog/menu content uses the same shrink-safe rules. */
.modal-actions,.review-form-actions,.guide-actions{max-width:100%!important}
.modal-actions>.btn,.review-form-actions>.btn,.guide-actions>.btn{min-width:0!important}
.choice-grid,.review-form-grid{min-width:0!important}
.choice,.device-item,.credential-row,.selected-key{min-width:0!important;max-width:100%!important}
.device-item>div,.credential-row>*{min-width:0!important}
.device-item b,.device-item small,.credential-row strong,.credential-row small{overflow-wrap:anywhere!important}
.review-intro,.my-review-card-head,.my-reviews-title,.my-review-meta{min-width:0!important}
.review-intro p,.my-review-card p,.my-review-meta>*{min-width:0!important;overflow-wrap:anywhere!important}

@media(min-width:821px) and (max-width:1080px){
  body[data-page="faq"] .mobile-nav,
  body[data-page="faq"].account-pending .mobile-nav,
  body[data-page="faq"].is-guest .mobile-nav{display:flex!important}
}

@media(max-width:560px){
  .review-intro{align-items:flex-start!important;flex-direction:column!important}
  .review-intro>span{align-self:flex-start!important}
  .my-review-card-head,.my-reviews-title,.my-review-meta{flex-wrap:wrap!important}
  .device-item{align-items:flex-start!important;flex-wrap:wrap!important}
  .credential-row{grid-template-columns:minmax(0,1fr) auto!important}
  .credential-row>:first-child{grid-column:1/-1!important}
}

@media(max-width:460px){
  .modal-actions,.review-form-actions,.guide-actions{display:grid!important;grid-template-columns:1fr!important}
  .modal-actions>.btn,.review-form-actions>.btn,.guide-actions>.btn{width:100%!important}
  .choice-grid,.review-form-grid{grid-template-columns:1fr!important}
  .credential-row{grid-template-columns:1fr!important}
  .credential-row>*{grid-column:1!important}
  .credential-row button{width:100%!important}
}


/* V134 — profile summary value alignment fix. */
@media(min-width:461px){
  .profile-summary>div{
    grid-template-columns:minmax(0,1fr) fit-content(240px)!important;
    align-items:center!important;
    gap:12px!important;
  }
  .profile-summary>div>span{
    min-width:0!important;
  }
  .profile-summary>div>b{
    display:block!important;
    justify-self:end!important;
    min-width:0!important;
    max-width:240px!important;
    text-align:right!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
  .telegram-profile-head>small{
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    max-width:120px!important;
  }
}
@media(max-width:460px){
  .profile-summary>div>b{
    padding-left:23px!important;
    white-space:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
  }
}

/* ============================================================
   V135 — compact mobile profile + admin support password action.
   ============================================================ */
.admin-account-password-reset{
  justify-self:start;
  width:max-content;
  margin-top:3px;
  padding:3px 7px;
  border:1px solid rgb(var(--theme-rgb)/.18);
  border-radius:8px;
  color:rgb(var(--theme-rgb));
  background:rgb(var(--theme-rgb)/.035);
  font:inherit;
  font-size:.48rem;
  font-weight:760;
  line-height:1.2;
  cursor:pointer;
}
.admin-account-password-reset:hover{background:rgb(var(--theme-rgb)/.075);border-color:rgb(var(--theme-rgb)/.32)}
.admin-account-password-reset:disabled{opacity:.55;cursor:wait}

@media(max-width:640px){
  .modal.profile-modal{
    width:calc(100vw - 12px)!important;
    max-width:calc(100vw - 12px)!important;
    max-height:calc(100vh - 12px)!important;
    margin:auto!important;
    padding:11px 10px max(10px,env(safe-area-inset-bottom))!important;
    border-radius:18px!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    scrollbar-gutter:auto!important;
  }
  @supports(height:100dvh){
    .modal.profile-modal{max-height:calc(100dvh - 12px)!important}
  }
  .profile-modal .modal-head{margin-bottom:7px!important;gap:8px!important}
  .profile-modal .modal-head .overline{font-size:.50rem!important}
  .profile-modal .modal-head h3{margin-top:4px!important;font-size:1rem!important;line-height:1.08!important}
  .profile-modal .close-btn{width:34px!important;height:34px!important;flex:0 0 34px!important}

  .profile-modal .profile-identity-card{
    min-height:52px!important;
    margin-top:5px!important;
    padding:7px 8px!important;
    gap:8px!important;
    border-radius:14px!important;
  }
  .profile-modal .profile-avatar{width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:11px!important}
  .profile-modal .profile-identity-card b{font-size:.68rem!important;line-height:1.12!important}
  .profile-modal .profile-identity-card span:not(.profile-avatar){font-size:.52rem!important;line-height:1.2!important}

  .profile-modal .profile-summary{margin:7px 0 8px!important}
  .profile-modal .profile-summary>div{
    min-height:36px!important;
    padding:5px 8px!important;
    gap:7px!important;
  }
  .profile-modal .profile-summary>div>span{font-size:.57rem!important}
  .profile-modal .profile-summary>div>b{font-size:.59rem!important}
  .profile-modal .profile-summary>div>span .ui-icon{width:13px!important;height:13px!important}

  .profile-modal .profile-settings{margin:7px 0 0!important;gap:6px!important}
  .profile-modal .profile-setting-card{
    min-height:48px!important;
    grid-template-columns:32px minmax(0,1fr) 14px!important;
    padding:6px 8px!important;
    gap:7px!important;
    border-radius:13px!important;
  }
  .profile-modal .profile-setting-icon{width:32px!important;height:32px!important;border-radius:10px!important}
  .profile-modal .profile-setting-icon .ui-icon{width:15px!important;height:15px!important}
  .profile-modal .profile-setting-copy b{font-size:.61rem!important;line-height:1.14!important}
  .profile-modal .profile-setting-copy small{font-size:.48rem!important;line-height:1.22!important}

  .profile-modal .telegram-profile-panel{margin-top:7px!important;padding:8px!important;border-radius:14px!important}
  .profile-modal .telegram-profile-head{grid-template-columns:32px minmax(0,1fr) auto!important;gap:7px!important}
  .profile-modal .telegram-profile-icon{width:32px!important;height:32px!important;border-radius:10px!important}
  .profile-modal .telegram-profile-icon .ui-icon{width:15px!important;height:15px!important}
  .profile-modal .telegram-profile-head b{font-size:.62rem!important}
  .profile-modal .telegram-profile-head>div>span{font-size:.49rem!important}
  .profile-modal .telegram-profile-head>small{max-width:72px!important;font-size:.40rem!important}
  .profile-modal .telegram-profile-actions,.profile-modal .telegram-profile-actions.is-linked{margin-top:7px!important;gap:5px!important}
  .profile-modal .profile-action{
    min-height:42px!important;
    grid-template-columns:28px minmax(0,1fr) 10px!important;
    gap:7px!important;
    padding:5px 7px!important;
    border-radius:11px!important;
  }
  .profile-modal .profile-action-icon{width:28px!important;height:28px!important;border-radius:9px!important}
  .profile-modal .profile-action-icon .ui-icon{width:13px!important;height:13px!important}
  .profile-modal .profile-action b{font-size:.56rem!important;line-height:1.12!important}
  .profile-modal .profile-action small{font-size:.45rem!important;line-height:1.18!important}
  .profile-modal .telegram-unlink{margin-top:7px!important;font-size:.48rem!important}

  .profile-modal .profile-logout{
    position:sticky!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:6!important;
    min-height:42px!important;
    margin-top:7px!important;
    padding:0 9px!important;
    border-radius:12px!important;
    background:var(--surface-solid)!important;
    -webkit-backdrop-filter:blur(12px)!important;
    backdrop-filter:blur(12px)!important;
    box-shadow:0 -8px 24px rgba(0,0,0,.28)!important;
  }
  .profile-modal .profile-logout-icon{width:27px!important;height:27px!important}
  .profile-modal .profile-logout>span:last-child{font-size:.60rem!important}

  .admin-account-password-reset{font-size:.50rem;padding:4px 7px}
}

@media(max-width:460px){
  .profile-modal .profile-summary>div{grid-template-columns:minmax(0,1fr) auto!important;align-items:center!important;gap:7px!important}
  .profile-modal .profile-summary>div>b{justify-self:end!important;max-width:52%!important;text-align:right!important;padding-left:0!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .profile-modal .telegram-profile-head{grid-template-columns:32px minmax(0,1fr) auto!important}
  .profile-modal .telegram-profile-head>small{grid-column:auto!important;justify-self:end!important;text-align:right!important;max-width:68px!important}
  .profile-modal .profile-action{grid-template-columns:28px minmax(0,1fr) 10px!important}
  .profile-modal .profile-action::after{display:block!important}
}

@media(max-width:460px) and (max-height:700px){
  .modal.profile-modal{padding-top:8px!important}
  .profile-modal .profile-identity-card{min-height:46px!important;padding:6px 7px!important}
  .profile-modal .profile-avatar{width:34px!important;height:34px!important;flex-basis:34px!important}
  .profile-modal .profile-summary>div{min-height:33px!important;padding:4px 7px!important}
  .profile-modal .profile-setting-card{min-height:44px!important}
  .profile-modal .profile-action{min-height:39px!important}
  .profile-modal .profile-logout{min-height:39px!important}
}


/* ============================================================
   V136 — profile data layout + collapsible Telegram actions.
   ============================================================ */
.profile-modal .profile-summary-row{
  display:grid!important;
  grid-template-columns:minmax(118px,.8fr) minmax(0,1.2fr)!important;
  align-items:center!important;
  gap:12px!important;
  min-width:0!important;
}
.profile-modal .profile-summary-label{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-width:0!important;
  color:var(--muted-2)!important;
  font-size:.68rem!important;
}
.profile-modal .profile-summary-label .ui-icon{
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
  color:var(--primary)!important;
}
.profile-modal .profile-summary-value{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  justify-self:end!important;
  color:var(--text)!important;
  font-size:.76rem!important;
  font-weight:780!important;
  line-height:1.28!important;
  text-align:right!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}

.profile-modal details.telegram-profile-panel{
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
}
.profile-modal .telegram-profile-toggle{
  list-style:none!important;
  width:100%!important;
  min-width:0!important;
  min-height:58px!important;
  display:grid!important;
  grid-template-columns:40px minmax(0,1fr) auto 28px!important;
  align-items:center!important;
  gap:10px!important;
  padding:10px 11px!important;
  color:var(--text)!important;
  cursor:pointer!important;
  user-select:none!important;
  outline:0!important;
  transition:background .18s ease,border-color .18s ease!important;
}
.profile-modal .telegram-profile-toggle::-webkit-details-marker{display:none!important}
.profile-modal .telegram-profile-toggle::marker{content:""!important}
.profile-modal .telegram-profile-toggle:hover{background:rgb(var(--theme-rgb)/.035)!important}
.profile-modal .telegram-profile-toggle:focus-visible{box-shadow:inset 0 0 0 2px rgb(var(--theme-rgb)/.32)!important}
.profile-modal .telegram-profile-copy{
  display:grid!important;
  gap:2px!important;
  min-width:0!important;
}
.profile-modal .telegram-profile-copy b{
  color:var(--text)!important;
  font-size:.76rem!important;
  line-height:1.12!important;
}
.profile-modal .telegram-profile-copy>span{
  min-width:0!important;
  color:var(--muted-2)!important;
  font-size:.58rem!important;
  line-height:1.24!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.profile-modal .telegram-profile-state{
  min-width:0!important;
  max-width:none!important;
  color:var(--primary)!important;
  font-size:.45rem!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
  line-height:1.1!important;
  text-align:right!important;
  white-space:nowrap!important;
}
.profile-modal .telegram-profile-chevron{
  width:28px!important;
  height:28px!important;
  display:grid!important;
  place-items:center!important;
  justify-self:end!important;
  border:1px solid rgb(var(--theme-rgb)/.14)!important;
  border-radius:9px!important;
  color:var(--muted)!important;
  background:rgb(var(--theme-rgb)/.035)!important;
  transition:transform .24s ease,background .18s ease!important;
}
.profile-modal .telegram-profile-chevron .ui-icon{width:13px!important;height:13px!important}
.profile-modal details.telegram-profile-panel[open] .telegram-profile-chevron{
  transform:rotate(180deg)!important;
  background:rgb(var(--theme-rgb)/.075)!important;
}
.profile-modal .telegram-profile-content{
  min-width:0!important;
  padding:0 10px 10px!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
  animation:profileTelegramOpenV136 .22s ease both!important;
}
@keyframes profileTelegramOpenV136{
  from{opacity:0;transform:translateY(-5px)}
  to{opacity:1;transform:none}
}
.profile-modal .telegram-profile-content .telegram-profile-actions,
.profile-modal .telegram-profile-content .telegram-profile-actions.is-linked{
  margin-top:9px!important;
}
.profile-modal .telegram-profile-content>p{margin:9px 2px 0!important}
.profile-modal .telegram-profile-content .telegram-unlink{margin:9px 2px 0!important}

@media(max-width:700px){
  .profile-modal .profile-summary-row{
    grid-template-columns:minmax(104px,.72fr) minmax(0,1.28fr)!important;
    gap:9px!important;
  }
  .profile-modal .profile-summary-label{font-size:.59rem!important}
  .profile-modal .profile-summary-value{font-size:.63rem!important}
  .profile-modal .telegram-profile-toggle{
    min-height:52px!important;
    grid-template-columns:34px minmax(0,1fr) auto 26px!important;
    gap:8px!important;
    padding:8px!important;
  }
  .profile-modal .telegram-profile-toggle .telegram-profile-icon{width:34px!important;height:34px!important}
  .profile-modal .telegram-profile-copy b{font-size:.64rem!important}
  .profile-modal .telegram-profile-copy>span{font-size:.50rem!important}
  .profile-modal .telegram-profile-state{font-size:.40rem!important;letter-spacing:.06em!important}
  .profile-modal .telegram-profile-chevron{width:26px!important;height:26px!important}
  .profile-modal .telegram-profile-content{padding:0 8px 8px!important}
}

@media(max-width:420px){
  .profile-modal .profile-summary-row{
    grid-template-columns:minmax(92px,.68fr) minmax(0,1.32fr)!important;
    gap:7px!important;
  }
  .profile-modal .profile-summary-label{font-size:.56rem!important;gap:6px!important}
  .profile-modal .profile-summary-value{font-size:.59rem!important}
  .profile-modal .telegram-profile-toggle{
    grid-template-columns:32px minmax(0,1fr) 24px!important;
  }
  .profile-modal .telegram-profile-state{display:none!important}
  .profile-modal .telegram-profile-chevron{width:24px!important;height:24px!important}
}

@media(max-width:340px){
  .profile-modal .profile-summary-row{
    grid-template-columns:1fr!important;
    align-items:start!important;
    gap:3px!important;
  }
  .profile-modal .profile-summary-value{
    justify-self:start!important;
    padding-left:21px!important;
    text-align:left!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .profile-modal .telegram-profile-chevron,.profile-modal .telegram-profile-content{animation:none!important;transition:none!important}
}


/* ============================================================
   V137 — Telegram accordion animates on every open/close.
   The temporary helper sentence was removed from the profile.
   ============================================================ */
.profile-modal .telegram-profile-panel{
  display:block!important;
  padding:0!important;
  overflow:hidden!important;
}
.profile-modal .telegram-profile-toggle{
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  background:transparent!important;
  font:inherit!important;
  text-align:left!important;
}
.profile-modal .telegram-profile-toggle:hover{background:rgb(var(--theme-rgb)/.035)!important}
.profile-modal .telegram-profile-panel.is-expanded .telegram-profile-chevron{
  transform:rotate(180deg)!important;
  background:rgb(var(--theme-rgb)/.075)!important;
}
.profile-modal .telegram-profile-reveal{
  display:grid!important;
  grid-template-rows:0fr!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:grid-template-rows .30s cubic-bezier(.2,.78,.2,1),opacity .20s ease,visibility 0s linear .30s!important;
}
.profile-modal .telegram-profile-panel.is-expanded .telegram-profile-reveal{
  grid-template-rows:1fr!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transition:grid-template-rows .30s cubic-bezier(.2,.78,.2,1),opacity .22s ease,visibility 0s linear 0s!important;
}
.profile-modal .telegram-profile-content{
  min-height:0!important;
  overflow:hidden!important;
  padding:0 10px 10px!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
  animation:none!important;
  transform:translateY(-6px)!important;
  transition:transform .30s cubic-bezier(.2,.78,.2,1)!important;
}
.profile-modal .telegram-profile-panel.is-expanded .telegram-profile-content{transform:none!important}
@media(max-width:700px){
  .profile-modal .telegram-profile-content{padding:0 8px 8px!important}
}
@media(prefers-reduced-motion:reduce){
  .profile-modal .telegram-profile-reveal,
  .profile-modal .telegram-profile-content,
  .profile-modal .telegram-profile-chevron{transition:none!important}
}


/* ============================================================
   V138 — Telegram accordion starts closed and stays compact.
   Closed content contributes zero extra Y-height.
   ============================================================ */
.profile-modal .telegram-profile-panel{
  padding:0!important;
  overflow:hidden!important;
}
.profile-modal .telegram-profile-toggle{
  box-sizing:border-box!important;
  height:52px!important;
  min-height:52px!important;
  max-height:52px!important;
  grid-template-columns:34px minmax(0,1fr) auto 24px!important;
  gap:8px!important;
  padding:6px 9px!important;
  align-items:center!important;
  overflow:hidden!important;
}
.profile-modal .telegram-profile-toggle .telegram-profile-icon{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
}
.profile-modal .telegram-profile-copy{
  min-width:0!important;
  align-content:center!important;
}
.profile-modal .telegram-profile-copy b,
.profile-modal .telegram-profile-copy>span{
  max-width:100%!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
}
.profile-modal .telegram-profile-state{
  max-width:92px!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.profile-modal .telegram-profile-chevron{
  width:24px!important;
  height:24px!important;
}
.profile-modal .telegram-profile-reveal{
  min-height:0!important;
}
.profile-modal .telegram-profile-content{
  min-height:0!important;
  padding:0 9px 0!important;
  border-top:0 solid transparent!important;
  transition:transform .30s cubic-bezier(.2,.78,.2,1),padding-bottom .30s cubic-bezier(.2,.78,.2,1),border-color .18s ease!important;
}
.profile-modal .telegram-profile-panel.is-expanded .telegram-profile-content{
  padding:0 9px 9px!important;
  border-top:1px solid rgba(255,255,255,.055)!important;
}
@media(max-width:700px){
  .profile-modal .telegram-profile-toggle{
    height:48px!important;
    min-height:48px!important;
    max-height:48px!important;
    grid-template-columns:32px minmax(0,1fr) auto 22px!important;
    gap:7px!important;
    padding:5px 8px!important;
  }
  .profile-modal .telegram-profile-toggle .telegram-profile-icon{width:30px!important;height:30px!important;min-width:30px!important}
  .profile-modal .telegram-profile-chevron{width:22px!important;height:22px!important}
  .profile-modal .telegram-profile-content{padding-left:8px!important;padding-right:8px!important}
  .profile-modal .telegram-profile-panel.is-expanded .telegram-profile-content{padding-bottom:8px!important}
}
@media(max-width:420px){
  .profile-modal .telegram-profile-toggle{
    height:46px!important;
    min-height:46px!important;
    max-height:46px!important;
    grid-template-columns:30px minmax(0,1fr) 21px!important;
    gap:6px!important;
    padding:5px 7px!important;
  }
  .profile-modal .telegram-profile-state{display:none!important}
  .profile-modal .telegram-profile-toggle .telegram-profile-icon{width:28px!important;height:28px!important;min-width:28px!important}
  .profile-modal .telegram-profile-chevron{width:21px!important;height:21px!important}
}