/* Account settings inherit the studio's accessible mobile dialog behavior. */
.telegram-dialog{width:min(48rem,calc(100vw - 2rem));padding:0;overflow:auto}
.telegram-dialog .dialog-body{padding:1.2rem 1.5rem 2rem;min-width:0}
.telegram-dialog h2{font-size:clamp(1.2rem,4.5vw,1.65rem);overflow-wrap:anywhere}
.telegram-dialog h3{font-size:1rem;margin:0 0 .75rem;overflow-wrap:anywhere}
.telegram-description{color:var(--muted);font-size:.9rem;line-height:1.6}
.telegram-connection,.telegram-pending,.telegram-brands,.telegram-history{margin:1.4rem 0;min-width:0}
.telegram-connection,.telegram-pending{padding:1rem;border:1px solid var(--line-strong);border-radius:1rem;background:var(--surface-2)}
.telegram-pending{border-color:var(--lime)}
.telegram-actions{display:flex;flex-wrap:wrap;gap:.65rem}
.telegram-dialog .button{min-height:44px;white-space:normal;overflow-wrap:anywhere;text-decoration:none}
.telegram-pending .button{margin:.25rem .25rem .25rem 0}
.telegram-hint{font-size:.8rem;color:var(--muted);line-height:1.6}
.telegram-warning{color:var(--amber);font-size:.85rem;overflow-wrap:anywhere}
.telegram-message{font-size:.85rem;margin:0;flex:1;min-width:0;overflow-wrap:anywhere}
.telegram-message.is-error{color:var(--red)}
.telegram-switch{min-height:48px;cursor:pointer;font-size:.9rem;margin:.2rem 0;gap:.8rem}
.telegram-switch input{flex:0 0 22px;width:22px;height:22px;margin:0}
.telegram-switch span{min-width:0;overflow-wrap:anywhere}
.telegram-switch small{display:block;margin-top:.15rem}
.telegram-event-options{border-top:1px solid var(--line);padding-top:.4rem;margin-top:.4rem}
.telegram-dialog fieldset{min-width:0}
.telegram-dialog legend{max-width:100%;white-space:normal;overflow-wrap:anywhere;letter-spacing:.04em}
.telegram-history p{padding:.75rem 0;border-bottom:1px solid var(--line);display:grid;gap:.2rem;overflow-wrap:anywhere}
.telegram-history span,.telegram-history small{color:var(--muted);font-size:.8rem}

/* Telegram now uses the same SVG close icon as every other app dialog. */
.telegram-dialog .dialog-close{color:#fff!important;font-size:inherit!important}
.telegram-dialog .dialog-close::before,.telegram-dialog .dialog-close::after{content:none!important;display:none!important}
.telegram-dialog .dialog-close .ui-icon{width:20px!important;height:20px!important;margin:0!important}

@media(max-width:800px){
  .telegram-dialog{box-sizing:border-box!important;width:100vw!important;min-width:0!important;max-width:100vw!important;height:var(--visible-height,100dvh);max-height:var(--visible-height,100dvh);overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior-x:none!important;touch-action:pan-y!important}
  .telegram-dialog .dialog-toolbar,.telegram-dialog .dialog-body,[data-telegram-content],.telegram-dialog section,.telegram-dialog fieldset{box-sizing:border-box!important;width:100%!important;min-width:0!important;max-width:100%!important;overflow-x:hidden!important}
  .telegram-dialog .dialog-body{padding:1rem 1rem calc(1.5rem + env(safe-area-inset-bottom))}
  .telegram-dialog .dialog-close{position:static!important;flex:0 0 44px!important;width:44px!important;min-width:44px!important;max-width:44px!important;height:44px!important;min-height:44px!important;max-height:44px!important;margin-left:auto!important;padding:0!important;display:grid!important;place-items:center!important;transform:none!important}
  .telegram-actions{display:grid}
  .telegram-actions .button{width:100%}
  .telegram-pending .button{width:100%;margin:.3rem 0}
}