/* Shared account controls for the browser and desktop client. */
.account-menu-anchor { position: relative; margin-top: 14px; }
.sidebar-bottom .account-block { display: flex; align-items: center; width: 100%; gap: 10px; margin: 0; padding: 11px 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; text-align: left; color: var(--ink); }
.sidebar-bottom .account-block:hover, .account-block[aria-expanded="true"] { background: var(--hover); border-color: var(--line); }
.account-avatar { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); }
.account-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-identity { min-width: 0; flex: 1; }
.account-identity #account-label { display: block; color: var(--ink); font-size: 12px; font-weight: 550; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.account-identity small { display: block; margin-top: 2px; color: var(--subtle); font-size: 10px; }
.account-more { width: 15px; height: 15px; color: var(--subtle); }
.account-menu { position: absolute; z-index: 55; bottom: calc(100% + 8px); left: 0; width: 266px; max-width: calc(100vw - 42px); max-height: min(420px, calc(100dvh - 130px)); overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: var(--surface); box-shadow: 0 14px 55px #020b3038; }
.account-menu-identity { padding: 10px 11px 13px; margin-bottom: 3px; border-bottom: 1px solid var(--line); }
.account-menu-identity strong, .account-menu-identity span { display: block; overflow-wrap: anywhere; }
.account-menu-identity strong { font-size: 12px; font-weight: 550; }
.account-menu-identity span { margin-top: 3px; color: var(--subtle); font-size: 10px; }
.account-menu button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px; border: 0; border-radius: 7px; color: var(--ink); background: transparent; text-align: left; font-size: 12px; }
.account-menu button:hover, .account-menu button:focus-visible { background: var(--hover); }
.account-menu button svg { width: 17px; height: 17px; color: var(--muted); }
.account-menu-divider { margin: 5px 6px; border-top: 1px solid var(--line); }
.account-menu .account-logout { color: var(--danger); }
.account-menu .account-logout svg { color: inherit; }
.account-settings-dialog { width: min(850px, calc(100vw - 40px)); height: min(660px, calc(100dvh - 52px)); max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; border-radius: 18px; }
.account-settings-dialog[open] { display: flex; flex-direction: column; }
.account-settings-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; flex: 0 0 auto; padding: 23px 25px 20px; border-bottom: 1px solid var(--line); }
.account-settings-header .dialog-kicker { color: var(--subtle); font-size: 8px; letter-spacing: 1.8px; }
.account-settings-header h2 { margin-top: 5px; font-size: 21px; font-weight: 600; }
.account-settings-layout { display: grid; grid-template-columns: 184px minmax(0, 1fr); flex: 1; min-height: 0; }
.account-settings-nav { display: flex; flex-direction: column; align-items: stretch; gap: 5px; padding: 20px 12px; border-right: 1px solid var(--line); background: var(--sidebar); }
.account-settings-nav button { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; font-size: 12px; text-align: left; white-space: nowrap; }
.account-settings-nav button svg { width: 17px; height: 17px; }
.account-settings-nav button:hover { background: var(--hover); color: var(--ink); }
.account-settings-nav button[aria-current="page"] { color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: 0 2px 5px #030b1608; }
.account-settings-content { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 29px 30px 32px; scrollbar-width: thin; scrollbar-color: var(--field-border) transparent; }
.account-panel-heading h3 { color: var(--ink); font-size: 20px; font-weight: 600; letter-spacing: -.3px; }
.account-panel-heading > p { margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.85; }
.account-settings-content .theme-options { gap: 10px; margin: 26px 0; }
.account-settings-content .theme-swatch { height: 84px; }
.account-settings-content .field-help { font-size: 11px; line-height: 1.85; }
.account-settings-content .button { min-height: 36px; padding: 8px 13px; font-size: 11px; }
.account-settings-content .text-button { padding: 7px 3px; }
.account-settings-content label { font-size: 12px; }
.account-settings-content input { min-height: 40px; font-size: 12px; }
.account-settings-content input[type="radio"], .account-settings-content input[type="checkbox"] { min-height: 0; }
.account-settings-content .message { margin-bottom: 0; }
.account-avatar-editor { display: flex; align-items: center; gap: 20px; margin: 28px 0 16px; }
.account-avatar-large { width: 72px; height: 72px; flex-basis: 72px; font-size: 26px; border: 1px solid var(--line); }
.account-avatar-editor strong { font-size: 12px; font-weight: 550; }
.account-avatar-editor p { margin: 5px 0 10px; color: var(--muted); font-size: 11px; }
.account-inline-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
#account-avatar-actions { margin: 0 0 14px; }
.account-section { padding-top: 25px; margin-top: 25px; border-top: 1px solid var(--line); }
.account-form-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 18px; }
.account-readonly-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-top: 25px; padding: 18px 0 10px; border-top: 1px solid var(--line); font-size: 12px; }
.account-readonly-row > span:first-child { color: var(--muted); }
[data-account-email] { overflow-wrap: anywhere; }
.account-security-summary { display: flex; align-items: center; gap: 12px; padding: 17px; margin: 23px 0; background: var(--soft); border: 1px solid var(--line); border-radius: 11px; }
.account-security-icon { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; color: var(--accent); background: var(--accent-soft); border-radius: 10px; }
.account-security-summary strong { display: block; font-size: 12px; font-weight: 550; }
.account-security-summary [data-account-email] { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.account-security-item { padding: 19px 0; border-top: 1px solid var(--line); }
.account-security-item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; list-style: none; cursor: pointer; }
.account-security-item summary::-webkit-details-marker { display: none; }
.account-security-item summary strong { display: block; font-size: 13px; font-weight: 550; }
.account-security-item summary small { display: block; margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 400; }
.account-security-item summary > span:last-child { color: var(--subtle); font-size: 20px; font-weight: 300; }
.account-security-item[open] summary > span:last-child { transform: rotate(45deg); }
.account-security-item form { padding-top: 22px; }
.account-security-item form > .field-help { margin-bottom: 18px; }
.account-help-list { margin-top: 24px; }
.account-help-list details { padding: 18px 0; border-bottom: 1px solid var(--line); }
.account-help-list summary { font-size: 12px; font-weight: 550; cursor: pointer; }
.account-help-list p { margin-top: 12px; color: var(--muted); font-size: 12px; line-height: 1.95; }
.account-about-mark { display: grid; place-items: center; width: 57px; height: 57px; margin: 3px 0 23px; border: 1px solid var(--accent-line); border-radius: 17px; color: var(--accent); background: var(--accent-soft); }
.account-about-mark svg { width: 31px; height: 31px; }
#account-panel-about .dialog-kicker { margin: 0 0 8px; color: var(--subtle); font-size: 9px; letter-spacing: 2.5px; }
.account-version { display: inline-block; margin-top: 16px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); font-size: 10px; }
.account-about-copy { margin-top: 22px; color: var(--muted); font-size: 12px; line-height: 1.95; }
.account-about-facts { margin-top: 24px; border-top: 1px solid var(--line); }
.account-about-facts > div { display: flex; justify-content: space-between; gap: 15px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 11px; }
.account-about-facts strong { font-weight: 500; }
.account-about-facts > div > span { color: var(--muted); }
.account-about-facts a { color: var(--accent); text-decoration: none; }
.account-about-facts a:hover { text-decoration: underline; }
.account-settings-dialog summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; border-radius: 3px; }
@media (max-width: 650px) {
  .account-settings-dialog { width: calc(100vw - 24px); height: min(720px, calc(100dvh - 28px)); border-radius: 14px; }
  .account-settings-header { padding: 19px 19px 16px; }
  .account-settings-header h2 { font-size: 19px; }
  .account-settings-layout { display: flex; flex-direction: column; }
  .account-settings-nav { flex: 0 0 auto; flex-direction: row; gap: 5px; overflow-x: auto; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
  .account-settings-nav button { flex: 0 0 auto; padding: 9px 10px; gap: 6px; font-size: 11px; }
  .account-settings-nav button svg { width: 15px; height: 15px; }
  .account-settings-content { flex: 1; padding: 24px 20px; }
  .account-panel-heading h3 { font-size: 19px; }
  .account-settings-content .theme-options { gap: 7px; }
  .account-settings-content .theme-swatch { height: 64px; gap: 4px; padding: 6px; }
  .account-avatar-editor { gap: 14px; }
  .account-avatar-large { width: 61px; height: 61px; flex-basis: 61px; }
}
@media (max-width: 370px) {
  .account-settings-content { padding: 22px 16px; }
  .account-avatar-editor p { display: none; }
  .account-avatar-editor strong { display: block; margin-bottom: 9px; }
  .account-inline-actions { gap: 5px 8px; }
  .account-settings-content .theme-choice-copy small { font-size: 9px; }
}
/* Personal information stays in the main workspace; sensitive forms are shared with Settings. */
.account-menu .account-menu-profile { gap: 12px; padding: 14px 12px; border-radius: 10px; }
.account-menu-profile .account-avatar { width: 38px; height: 38px; flex-basis: 38px; color: #fff; background: #b96f61; font-size: 14px; }
.account-menu-profile-copy { flex: 1; min-width: 0; }
.account-menu-profile-copy strong { display: block; font-size: 15px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu-profile-copy > span { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.account-menu .account-menu-profile > svg { width: 14px; height: 14px; }
.profile-page { max-width: 880px; margin: 0 auto; }
.profile-toolbar, .profile-toolbar-actions, .profile-private { display: flex; align-items: center; gap: 18px; }
.profile-toolbar { justify-content: space-between; min-height: 36px; }
.profile-toolbar-actions { flex-wrap: wrap; gap: 16px; }
.profile-toolbar .text-button { color: var(--muted); gap: 6px; font-size: 12px; }
.profile-private { gap: 6px; color: var(--subtle); font-size: 11px; white-space: nowrap; }
.profile-private svg { width: 14px; height: 14px; }
.profile-hero { padding: 60px 16px 30px; text-align: center; }
.profile-avatar-button { position: relative; display: block; padding: 0; margin: 0 auto 20px; background: transparent; border: 0; border-radius: 50%; }
.profile-avatar { width: 88px; height: 88px; flex-basis: 88px; font-size: 31px; border: 1px solid var(--accent-line); }
.profile-avatar-edit { display: grid; place-items: center; position: absolute; right: -2px; bottom: 1px; width: 25px; height: 25px; border-radius: 50%; border: 2px solid var(--surface); color: var(--muted); background: var(--soft); }
.profile-avatar-edit svg { width: 13px; height: 13px; }
.profile-hero h1 { font-size: 27px; letter-spacing: -.5px; overflow-wrap: anywhere; }
.profile-email { margin-top: 8px; color: var(--muted); font-size: 12px; }
.profile-avatar-hint { margin-top: 13px; color: var(--subtle); font-size: 10px; }
.profile-avatar-options { margin: 8px auto 0; width: fit-content; max-width: 100%; color: var(--subtle); font-size: 10px; }
.profile-avatar-options summary { cursor: pointer; }
.profile-avatar-options button { display: block; margin: 7px auto 0; }
.profile-hero #account-avatar-actions { justify-content: center; margin: 17px 0 0; }
.profile-hero .message { max-width: 470px; margin: 18px auto 0; text-align: left; }
.profile-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 16px 0; margin: 0 0 42px; border: 1px solid var(--line); border-radius: 14px; }
.profile-facts > div { min-width: 0; padding: 0 14px; text-align: center; }
.profile-facts > div + div { border-left: 1px solid var(--line); }
.profile-facts strong { display: block; font-weight: 500; font-size: 12px; overflow-wrap: anywhere; }
.profile-facts span { display: block; margin-top: 4px; color: var(--subtle); font-size: 10px; }
.profile-section { padding: 0 0 30px; margin-top: 31px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.profile-section:last-child { border-bottom: 0; }
.profile-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 20px; }
.profile-section-heading h2, .profile-security-section .account-panel-heading h3 { font-size: 16px; font-weight: 550; }
.profile-section-heading p { margin-top: 6px; color: var(--muted); font-size: 11px; }
.profile-page #account-profile-form { padding: 24px; background: var(--soft); border-radius: 13px; }
.profile-page #account-profile-form label { margin-bottom: 0; }
.profile-page #account-profile-form input { max-width: 470px; }
.profile-page .account-form-actions { margin-top: 14px; }
.profile-page .field-help, .profile-page label { font-size: 12px; }
.profile-page .button { min-height: 36px; font-size: 11px; }
.profile-social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profile-social-grid .collab-card { padding: 23px; background: var(--soft); border-color: transparent; }
.profile-social-grid .inline-form { flex-direction: column; align-items: stretch; }
.profile-social-grid .inline-form .button { align-self: flex-end; }
.profile-social-grid .personal-code { padding-top: 12px; color: var(--ink); font-size: 13px; }
.profile-social-grid .collab-card h2 { font-size: 13px; }
.profile-security-section .account-panel-heading > p { font-size: 11px; }
.profile-page summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 3px; }
.social-contacts { padding: 8px; }
.social-contacts .contact-column { width: 100%; border: 0; border-radius: 8px; background: var(--soft); }
.social-contacts .contact-list { display: grid; }
#page-social .page-heading { flex-wrap: wrap; }
#page-social .page-heading > div { margin-right: auto; }
/* The icon rail reveals names on hover; the menu is portalled outside its scroll container. */
.sidebar-friends { flex: 0 0 auto; min-width: 0; margin-top: 22px; padding-top: 13px; border-top: 1px solid var(--line); }
.sidebar-friends-heading { height: 31px; display: flex; align-items: center; justify-content: space-between; padding-left: 11px; }
.sidebar-friends-heading h2 { font-size: 10px; font-weight: 500; color: var(--subtle); }
.sidebar-friends-heading .icon-button { width: 27px; height: 27px; padding: 6px; }
.sidebar-friend-list { max-height: 200px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.sidebar-friend-row { position: relative; min-width: 0; }
.sidebar-friend { display: flex; align-items: center; gap: 11px; width: 100%; min-width: 0; min-height: 44px; border: 0; padding: 7px 9px; background: transparent; border-radius: 8px; color: var(--muted); text-align: left; }
.sidebar-friend:hover, .sidebar-friend.active { color: var(--ink); background: var(--hover); }
.sidebar-friend-avatar { width: 29px; height: 29px; flex: 0 0 29px; font-size: 11px; }
.sidebar-friend-name { display: block; min-width: 0; flex: 1; padding-right: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.sidebar-friend-more { position: absolute; right: 3px; top: 9px; width: 26px; height: 26px; padding: 0; border: 0; background: transparent; border-radius: 5px; color: var(--subtle); font-size: 18px; }
.sidebar-friend-more:hover, .sidebar-friend-more[aria-expanded="true"] { background: var(--surface); color: var(--ink); }
.sidebar-friends-status { padding: 7px 11px; color: var(--subtle); font-size: 10px; }
body[data-sidebar-hover="true"][data-sidebar-expanded="false"] :is(.sidebar-friends-heading h2, .sidebar-friend-name, .sidebar-friend-more, .sidebar-friends-status) { visibility: hidden; pointer-events: none; }
body[data-sidebar-hover="true"][data-sidebar-expanded="false"] .sidebar-friends-heading { padding: 0; justify-content: center; }
.friend-menu { position: fixed; z-index: 56; width: 190px; max-width: calc(100vw - 24px); padding: 6px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--surface); box-shadow: 0 12px 35px #030b3029; }
.friend-menu button { display: flex; align-items: center; width: 100%; gap: 10px; padding: 10px; border: 0; border-radius: 7px; font-size: 12px; color: var(--ink); background: transparent; text-align: left; }
.friend-menu button:hover, .friend-menu button:focus-visible { background: var(--hover); }
.friend-menu svg { width: 17px; height: 17px; color: var(--muted); }
.friend-profile-dialog { width: min(400px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 20px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--surface); }
.friend-profile-dialog::backdrop { background: #03091c66; }
.friend-profile-dialog header { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.friend-profile-content { padding: 24px 10px 22px; text-align: center; }
.friend-profile-content > .account-avatar { margin: 0 auto 20px; }
.friend-profile-content h2 { font-size: 22px; overflow-wrap: anywhere; }
.friend-profile-content p { margin: 7px 0 28px; color: var(--subtle); font-size: 12px; }
/* Full-height conversation: only messages scroll, while the composer remains at the bottom. */
body[data-page="chat"] .main-area { height: 100dvh; min-height: 0; }
body[data-page="chat"] .content { display: flex; flex-direction: column; min-height: 0; max-width: none; padding: 0 32px 20px; }
body[data-page="chat"] .topbar { flex: 0 0 auto; }
body[data-page="chat"] .app-footer { display: none; }
.direct-chat-page { flex: 1; min-height: 0; display: flex; width: 100%; max-width: 1080px; margin: 0 auto; }
.direct-chat-page .conversation { flex: 1; min-height: 0; padding: 0; }
.direct-chat-page .conversation-heading { flex: 0 0 auto; flex-direction: row; align-items: center; justify-content: space-between; gap: 15px; padding: 22px 0 16px; border-bottom: 1px solid var(--line); }
.direct-chat-page .conversation-heading h2 { font-size: 20px; font-weight: 550; }
.direct-chat-page .chat-messages { min-height: 0; max-height: none; flex: 1; gap: 23px; margin: 0; padding: 30px 4px; }
.direct-chat-page .chat-message { max-width: 78%; }
.direct-chat-page .chat-message p { padding: 13px 17px; border-radius: 14px; font-size: 14px; line-height: 1.85; }
.direct-chat-page .chat-composer { position: relative; flex: 0 0 auto; border: 1px solid var(--field-border); border-radius: 18px; padding: 13px; gap: 13px; background: var(--field); box-shadow: 0 4px 18px #030b1b05; }
.direct-chat-page .chat-composer textarea { min-height: 82px; max-height: 160px; padding: 6px; border: 0; box-shadow: none; background: transparent; resize: vertical; }
.direct-chat-page .chat-composer .button { border-radius: 10px; }
.direct-chat-page #direct-feedback { flex: 0 0 auto; max-height: 110px; overflow-y: auto; margin: 10px 0 0; }
@media (max-width: 650px) {
  .profile-toolbar { align-items: flex-start; gap: 12px; }
  .profile-toolbar-actions { gap: 10px; justify-content: flex-end; }
  .profile-toolbar .text-button { font-size: 10px; }
  .profile-toolbar .text-button svg { width: 13px; height: 13px; }
  .profile-hero { padding: 35px 5px 25px; }
  .profile-facts { margin-bottom: 30px; }
  .profile-facts > div { padding: 0 8px; }
  .profile-facts strong { font-size: 11px; }
  .profile-facts span { font-size: 9px; }
  .profile-section-heading { gap: 10px; }
  .profile-section-heading .record-action { flex-shrink: 0; font-size: 10px; }
  .profile-social-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .profile-page #account-profile-form, .profile-social-grid .collab-card { padding: 19px; }
  body[data-page="chat"] .content { padding: 0 16px 16px; }
  .direct-chat-page .conversation-heading { align-items: flex-start; padding: 17px 0 12px; }
  .direct-chat-page .conversation-heading h2 { font-size: 18px; }
  .direct-chat-page .conversation-heading .compact-actions { gap: 8px; justify-content: flex-end; }
  .direct-chat-page .chat-message { max-width: 90%; }
  .direct-chat-page .chat-message p { font-size: 13px; }
  .direct-chat-page .chat-composer { padding: 10px; gap: 5px; }
  .direct-chat-page .chat-composer textarea { min-height: 76px; }
}
/* Lightweight personal inbox shared by the web and desktop client. */
.notification-trigger { position: relative; flex: 0 0 36px; margin-left: 2px; }
.notification-trigger[aria-expanded="true"] { color: var(--ink); background: var(--hover); }
.notification-badge { position: absolute; top: -2px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border: 2px solid var(--surface); border-radius: 10px; color: #fff; background: var(--danger); font-size: 9px; font-weight: 600; line-height: 13px; text-align: center; }
.notification-panel { position: fixed; z-index: 57; width: min(390px, calc(100vw - 24px)); max-height: calc(100dvh - 92px); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 15px; color: var(--ink); background: var(--surface); box-shadow: 0 15px 50px #030b3029; overflow: hidden; }
.notification-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 16px 15px; flex: 0 0 auto; border-bottom: 1px solid var(--line); }
.notification-header h2 { font-size: 15px; }
.notification-header p { margin-top: 4px; color: var(--subtle); font-size: 10px; }
.notification-actions { display: flex; gap: 3px; }
.notification-actions .icon-button { width: 28px; height: 28px; padding: 6px; }
.notification-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 9px; }
.notification-group { padding: 14px 0 8px; }
.notification-group + .notification-group { border-top: 1px solid var(--line); }
.notification-group h3 { margin: 0 7px 5px; color: var(--muted); font-size: 10px; font-weight: 500; }
.notification-item { display: flex; align-items: center; width: 100%; gap: 12px; padding: 12px 9px; border: 0; border-radius: 9px; color: var(--ink); background: transparent; text-align: left; }
.notification-item:hover, .notification-item:focus-visible { background: var(--hover); }
.notification-item-copy { min-width: 0; flex: 1; }
.notification-item-copy strong { display: block; font-size: 12px; font-weight: 500; overflow-wrap: anywhere; }
.notification-item-copy small { display: block; margin-top: 4px; font-size: 10px; line-height: 1.7; color: var(--subtle); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-item-count { flex: 0 0 auto; border-radius: 8px; min-width: 20px; padding: 2px 5px; color: var(--accent); background: var(--accent-soft); font-size: 10px; text-align: center; }
.notification-empty { padding: 35px 20px; color: var(--muted); font-size: 12px; text-align: center; }
.notification-footnote { flex: 0 0 auto; padding: 12px 17px; border-top: 1px solid var(--line); color: var(--subtle); font-size: 10px; }
.notification-panel > .message { flex: 0 0 auto; margin: 12px 15px 0; max-height: 110px; overflow-y: auto; }
.notification-target { scroll-margin-top: 90px; }
@media (max-width: 760px) {
  .topbar-right { gap: 8px; max-width: 56%; }
  .topbar-right #company-label { min-width: 0; }
  .notification-trigger { width: 32px; height: 32px; flex-basis: 32px; margin: 0; }
  .notification-panel { max-height: calc(100dvh - 84px); }
  .notification-header { padding: 15px 13px; }
  .notification-header p { max-width: 190px; font-size: 9px; }
}