/* Shared form and directory surfaces, based on the supplied Telegram panels. */
:root { --panel-bg: #f4f4f5; --field-line: #d8dce1; }
:root[data-theme="dark"] { --panel-bg: #202329; --field-line: #464c55; }
.telegram dialog::backdrop { background: #10182040; backdrop-filter: none; }
.telegram .tg-menu { background: var(--surface); backdrop-filter: none; }
.telegram .panel-theme { background: var(--panel-bg); }
.telegram .panel-theme .dialog-top { background: var(--panel-bg); }
.telegram :is(#profileDialog,#groupSettingsDialog,#recoveryDialog).panel-theme .dialog-top { background: var(--panel-bg); }
.telegram :is(#profileDialog, #groupSettingsDialog) .dialog-top { padding: 5px 0 18px; }
.telegram #profileDialog { padding: 20px; }
.telegram #profileDialog .dialog-top { top: -20px; }
.telegram #profileDialog .dialog-top h2 { font-size: 24px; }
.telegram #profileDialog .settings-block { border: 0; padding: 0; }
.telegram #profileDialog .form-grid { display: flex; flex-direction: column; gap: 22px; }
.telegram .form-card { background: var(--surface); border: 0; border-radius: 24px; padding: 16px 13px; box-shadow: 0 2px 3px #00000006; min-width: 0; margin: 0 0 18px; }
.telegram .form-card:last-child { margin-bottom: 0; }
.telegram #profileForm > .form-card { margin: 0; }
.telegram #profileForm > .form-card > div + div { margin-top: 20px; }
.telegram .form-card .form-card { box-shadow: none; padding: 0; margin: 12px 0; }
.telegram .card-title, .telegram #profileDialog .card-title { color: var(--accent); font-size: 14px; line-height: 21px; font-weight: 500; margin: 0 6px 18px; }
.telegram .panel-caption { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 8px 14px 24px; overflow-wrap: anywhere; }
.telegram .outlined-field { position: relative; margin: 7px 0 22px; min-width: 0; }
.telegram .outlined-field:last-child { margin-bottom: 3px; }
.telegram .outlined-field > label { position: absolute; z-index: 1; top: -10px; left: 15px; background: var(--surface); padding: 0 7px; margin: 0; font-size: 14px; line-height: 20px; color: var(--muted); max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.telegram :is(dialog,.auth-card) .outlined-field > :is(input:not([type=checkbox]):not([type=file]),textarea), .telegram .outlined-field > :is(input,textarea) { width: 100%; min-height: 60px; border: 1px solid var(--field-line); border-radius: 20px; background: var(--surface); padding: 16px 20px 12px; font-size: 18px; line-height: 26px; margin: 0; outline: 0; box-shadow: none; color: var(--text); }
.telegram .outlined-field:focus-within > label { color: var(--accent); }
.telegram :is(dialog,.auth-card) .outlined-field > :is(input,textarea):focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.telegram .outlined-field > input::placeholder { color: #a0abb5; }
.telegram .outlined-field:has(> input[hidden]) { display: none; }
.telegram .outlined-field textarea { resize: vertical; min-height: 82px; }
.telegram .form-card > :is(.wide,div):has(.outlined-field) { position: relative; }
.telegram .form-card .wide { grid-column: auto; }
.telegram .field-counter { display: block; text-align: right; font-size: 12px; line-height: 17px; padding: 0 8px; color: var(--muted); margin-top: -15px; }
.telegram .form-card .check { margin: 8px 4px 0; padding: 8px 2px; font-size: 14px; align-items: center; line-height: 1.5; }
.telegram .form-card input[type=checkbox] { accent-color: var(--accent); width: 19px; height: 19px; flex: none; }
.telegram .form-footer { display: flex; gap: 10px; flex-wrap: wrap; margin: 2px 0 20px; }
.telegram .form-footer > button { flex: 1; min-height: 48px; border-radius: 24px; }
.telegram .form-footer > button[type=submit] { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.telegram #profileForm > .form-footer { position: sticky; bottom: -20px; padding: 12px 0 4px; margin-bottom: 0; background: var(--panel-bg); z-index: 2; }
.telegram .profile-hero { display: flex; flex-direction: column; align-items: center; padding: 9px 0 18px; gap: 10px; }
.telegram .profile-photo-hero { position: relative; padding: 0; width: 150px; height: 150px; min-height: 150px; border: none; border-radius: 50%; background: var(--accent); color: #fff; overflow: visible; }
.telegram .profile-photo-image { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: var(--accent); }
.telegram .profile-photo-image > .tg-icon { width: 56px; height: 56px; stroke-width: 1.5; }
.telegram .profile-photo-image img { width: 100%; height: 100%; object-fit: cover; }
.telegram .profile-photo-camera { position: absolute; bottom: 0; right: 1px; width: 40px; height: 40px; display: grid; place-items: center; border: 3px solid var(--panel-bg); border-radius: 50%; background: var(--accent); }
.telegram .profile-photo-camera .tg-icon { width: 21px; height: 21px; }
.telegram .profile-photo-caption { color: var(--accent); font-size: 14px; }
.telegram .birthday-card { padding-left: 60px; position: relative; }
.telegram .card-symbol { position: absolute; left: 17px; top: 28px; width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: #9972df; }
.telegram .card-symbol .tg-icon { width: 22px; height: 22px; }
.telegram .birthday-card .check { margin-left: -43px; }
.telegram .settings-account-summary { display: flex; align-items: center; gap: 15px; padding: 10px 12px 24px; }
.telegram .settings-account-summary > div { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.telegram .settings-account-summary strong { font-size: 20px; overflow-wrap: anywhere; }
.telegram .settings-summary-avatar { display: grid; place-items: center; overflow: hidden; background: var(--accent); color: white; width: 64px; height: 64px; min-width: 64px; border-radius: 50%; }
.telegram .settings-summary-avatar img { width: 100%; height: 100%; object-fit: cover; }
.telegram .settings-summary-avatar > svg { color: #fff; }
.telegram #profileDialog .account-settings-index { padding: 8px 0; background: var(--surface); border-radius: 24px; overflow: hidden; }
.telegram #profileDialog .account-settings-index > button { padding: 15px 18px; min-height: 61px; border-radius: 0; }
.telegram #profileDialog .account-settings-index > button:not(:last-child) { border-bottom: 1px solid var(--line); }
.telegram #profileDialog .account-settings-index > button > .tg-icon { color: var(--accent); }
.telegram .photo-upload-target { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--accent); padding: 30px 10px; margin: 0 0 22px; border: 1.5px dashed var(--field-line); border-radius: 24px; cursor: pointer; background: var(--surface); }
.telegram .photo-upload-target > .tg-icon { width: 64px; height: 64px; }
.telegram .photo-upload-target:has(.avatar-selection-preview:not([hidden])) > svg { display: none; }
.telegram .avatar-selection-preview { width: 124px; height: 124px; object-fit: cover; border-radius: 50%; }
.telegram #verificationState { background: var(--surface); border-radius: 20px; padding: 18px; margin: 0 0 18px; }
.telegram .card-form input[type=file] { max-width: 100%; width: 100%; border: 0; background: transparent; padding: 6px; font-size: 13px; }
.telegram .card-form > .form-card { margin-bottom: 20px; }
.telegram .toggle-row { display: flex; justify-content: space-between; gap: 16px; }
.telegram .toggle-row > input { width: 22px; height: 22px; }
.telegram .permission-card h3 { margin-top: 0; }
.telegram .permission-card p { margin-bottom: 0; }
.telegram #groupSettingsDialog .settings-choices, .telegram .group-leave-section { padding: 8px 0; background: var(--surface); border-radius: 22px; overflow: hidden; border: none; margin-bottom: 20px; }
.telegram #groupSettingsDialog .settings-choices > button { padding: 14px; }
.telegram .group-leave-section { padding: 16px; }
.telegram #groupMembers .list-row { background: var(--surface); border-radius: 18px; margin: 6px 0; }
.telegram #groupMembers { padding: 5px 0 100px; }
.telegram .recovery-fields > .outlined-field { background: var(--surface); border-radius: 20px; }
.telegram #recoverySetup > .outlined-field { margin: 26px 0; }
.telegram #recoveryDialog .form-card { padding: 18px 12px; }
.telegram #recoverySave { border: 1px solid var(--line); }
.telegram #recoverySave code { display: block; padding: 14px; background: var(--soft); border-radius: 14px; }
.telegram .action-card { padding: 18px; }
.telegram .action-card > button { width: 100%; border: 0; color: var(--accent); }
.telegram :is(#profileDialog,#groupSettingsDialog)[aria-busy=true] { cursor: progress; }
.telegram :is(#profileStatus,#activityPrivacyStatus,#accountStatus):not(:empty) { padding: 10px 12px; margin: 0 0 16px; background: var(--surface); border-radius: 13px; overflow-wrap: anywhere; }
.telegram #profileStatus:empty { display: none; }
/* Contacts retain DOM nodes across polling to preserve focus, scroll and menus. */
.telegram .sidebar[data-pane=peoplePane] .tg-search-box { border-radius: 30px; }
.telegram .sidebar[data-pane=peoplePane] #conversationSearch { background: var(--surface); box-shadow: inset 0 0 0 2px var(--accent); }
.telegram .sidebar[data-pane=peoplePane] .tg-search-box > svg { color: var(--accent); }
.telegram #peoplePane { position: relative; padding: 0 8px 80px; overflow-y: auto; flex: 1; min-height: 0; }
.telegram #peoplePane #friendsSection { display: none; }
.telegram .contact-tabs { display: flex; padding: 3px 8px 9px; gap: 5px; background: var(--surface); position: sticky; top: 0; z-index: 2; }
.telegram .contact-tabs > button { flex: 1; padding: 9px 5px; font-size: 13px; min-height: 40px; border: 0; border-radius: 22px; white-space: nowrap; color: var(--muted); }
.telegram .contact-tabs > button[aria-pressed=true] { color: var(--accent); background: #3390ec14; }
.telegram #contactsStatus:empty { display: none; }
.telegram #contactsStatus { padding: 18px 6px; }
.telegram .contact-row { display: flex; align-items: center; min-height: 90px; border-radius: 18px; padding: 0 2px 0 12px; }
.telegram .contact-row:hover, .telegram .contact-row:focus-within { background: var(--soft); }
.telegram .contact-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 10px 0; text-align: left; border-radius: 18px; }
.telegram .contact-main:hover { background: transparent; }
.telegram .contact-info { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.telegram .contact-info strong { font-size: 18px; font-weight: 500; line-height: 25px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.telegram .contact-presence { font-size: 16px; font-weight: 400; line-height: 23px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.telegram .online { color: var(--accent) !important; }
.telegram .contact-avatar { position: relative; display: grid; place-items: center; width: 68px; height: 68px; min-width: 68px; border-radius: 50%; background: linear-gradient(#67ce78,#37ad4d); color: #fff; font-size: 26px; font-weight: 500; overflow: hidden; }
.telegram .contact-avatar[data-color="1"] { background: linear-gradient(#79baff,#409af0); }
.telegram .contact-avatar[data-color="2"] { background: linear-gradient(#b08df3,#7b5be4); }
.telegram .contact-avatar[data-color="3"] { background: linear-gradient(#f18da4,#d8527c); }
.telegram .contact-avatar[data-color="4"] { background: linear-gradient(#f6c36a,#eca442); }
.telegram .contact-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.telegram .contact-more { display: grid; place-items: center; width: 32px; min-width: 32px; height: 40px; min-height: 40px; border: 0; padding: 6px; opacity: 0; background: none; }
.telegram .contact-row:hover .contact-more, .telegram .contact-row:focus-within .contact-more, .telegram .contact-more[aria-expanded=true] { opacity: 1; }
.telegram .contact-menu { position: fixed; z-index: 20; width: 240px; }
.telegram .contacts-add { position: absolute; right: 16px; bottom: 16px; margin: 0; display: grid; place-items: center; width: 60px; min-width: 60px; height: 60px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; box-shadow: 0 2px 8px #0002; z-index: 3; }
.telegram .contacts-add > .tg-icon { width: 28px; height: 28px; }
.telegram .contact-requests > section, .telegram #blockedUsersSection { padding: 12px 8px; }
.telegram .contact-requests h3, .telegram #blockedUsersSection h3 { color: var(--accent); font-size: 15px; }
.telegram .contact-requests .list-row, .telegram #blockedUsersSection .list-row { border-radius: 18px; background: var(--soft); padding: 15px; margin: 10px 0; }
.telegram .contact-requests .list-row::before, .telegram #blockedUsersSection .list-row::before { display: none; }
.telegram #findUserSection { padding: 0 16px 22px; }
.telegram #findUserSection :is(form,details,#foundUser) { background: var(--soft); border-radius: 22px; padding: 18px; margin: 12px 0; }
.telegram #findUserSection form { display: block; }
.telegram #findUserSection form .outlined-field > label { background: var(--surface); }
.telegram #findUserSection form button[type=submit] { width: 100%; margin-top: 10px; }
.telegram .friend-request-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 21px; height: 21px; padding: 0 6px; border-radius: 12px; background: var(--accent); color: #fff; font-size: 12px; line-height: 1; margin-left: 7px; }
.telegram #menuContacts .friend-request-badge { margin-left: auto; }
.telegram #mainMenuButton { position: relative; }
.telegram .friend-request-dot { position: absolute; right: 7px; top: 6px; width: 9px; height: 9px; border: 2px solid var(--surface); border-radius: 50%; background: var(--accent); }
.telegram .friend-request-banner { display: flex; flex: none; align-items: center; gap: 12px; margin: 0 12px 10px; padding: 13px 15px; border: 0; border-radius: 18px; background: var(--soft); color: var(--text); text-align: left; }
.telegram .friend-request-banner > .tg-icon { flex: none; color: var(--accent); }
.telegram .friend-request-banner > span { flex: 1; min-width: 0; }
.telegram .friend-request-banner small { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 400; }
.telegram #friendMessage:not(:empty) { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); line-height: 1.5; overflow-wrap: anywhere; }
@media (max-width: 1499px) {
  .telegram .contact-row { min-height: 78px; padding-left: 8px; }
  .telegram .contact-avatar { width: 56px; height: 56px; min-width: 56px; font-size: 23px; }
  .telegram .contact-info strong { font-size: 16px; line-height: 23px; }
  .telegram .contact-presence { font-size: 14px; line-height: 21px; }
  .telegram .contact-main { gap: 11px; }
  .telegram #profileDialog .dialog-top h2 { font-size: 21px; }
}
@media (max-width: 700px) {
  .telegram #profileDialog { padding: 16px; }
  .telegram #profileDialog .dialog-top { top: -16px; }
  .telegram #profileForm > .form-footer { bottom: -16px; }
  .telegram .contact-more { opacity: 1; }
  .telegram .outlined-field > label { font-size: 13px; }
  .telegram :is(dialog,.auth-card) .outlined-field > :is(input,textarea) { font-size: 16px; min-height: 56px; padding: 14px 16px; }
  .telegram .profile-photo-hero { width: 130px; height: 130px; min-height: 130px; }
  .telegram .form-card { border-radius: 22px; }
}