/* «Універ тут?» — the desktop shell (2026-10-23): VK's layout — a top bar, the menu on the left, the app in the middle
   column, cards on the right. app.css draws everything inside #app; these rules only place it on a wide screen. */
body.desk { --desk-top: 3.25rem; --desk-left: 13.5rem; --desk-center: 35rem; --desk-right: 17rem; --desk-gap: 1rem;
  --desk-bg: #edeef0; --desk-card: #fff; --desk-line: #dce1e6; --desk-text: #000; --desk-grey: #818c99; --desk-blue: #2688eb; --desk-hover: #f0f2f5;
  height: 100vh; overflow: hidden; background: var(--desk-bg); color: var(--desk-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
:root[data-theme="dark"] body.desk { --desk-bg: #0f0f0f; --desk-card: #222; --desk-line: #2f2f2f; --desk-text: #e1e3e6; --desk-grey: #828282; --desk-blue: #529ef4; --desk-hover: #2b2b2b; }
body.desk #app { position: relative; height: 100%; width: 100%; overflow: hidden; }
/* wide screens only: the frame's menu replaces the app's footer, the walls capsule sits at the column's foot */
@media (min-width: 52.01rem) {
  body.desk #tabs { display: none !important; }
  body.desk #app { border-radius: .75rem; box-shadow: 0 0 0 .5px var(--desk-line), 0 .125rem .5rem rgba(0, 0, 0, .04); }
  body.desk .ask-bseg { left: .75rem !important; right: .75rem !important; bottom: 1rem !important; }
  body.desk .ask-compose.askw { bottom: 4.25rem !important; }
  body.desk #toast { bottom: 1.5rem; }
  body.desk .ptr-spin { display: none; }
}
body.desk ::-webkit-scrollbar { width: .5rem; height: .5rem; }
body.desk ::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, .35); border-radius: .25rem; }
body.desk ::-webkit-scrollbar-track { background: transparent; }

/* ---- sign in ---------------------------------------------------------------------------------------------------- */
#desk-login { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: linear-gradient(160deg, #2688eb 0%, #5a3fd6 100%); }
#desk-login[hidden] { display: none; }
.dl-card { width: 100%; max-width: 24rem; padding: 2rem 1.75rem 1.5rem; border-radius: 1.5rem; background: #fff; color: #000; box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .25); text-align: center; }
.dl-logo { width: 4.5rem; height: 4.5rem; border-radius: 1.25rem; box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .18); }
.dl-card h1 { margin: .875rem 0 .25rem; font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; }
.dl-sub { margin: 0 0 1.25rem; color: #707579; font-size: .9375rem; line-height: 1.35; }
.dl-field { display: block; text-align: left; margin: 0 0 .75rem; }
.dl-field span { display: block; margin: 0 0 .3125rem .25rem; font-size: .8125rem; font-weight: 600; color: #707579; }
.dl-field input { width: 100%; height: 2.75rem; padding: 0 .875rem; border-radius: .75rem; border: 1px solid #dce1e6; background: #f5f6f8; color: #000; font-size: 1rem; outline: none; }
.dl-field input:focus { border-color: #2688eb; background: #fff; box-shadow: 0 0 0 3px rgba(38, 136, 235, .15); }
.dl-field input[readonly] { color: #707579; }
#dl-code { letter-spacing: .3em; font-weight: 700; font-size: 1.25rem; text-align: center; }
.dl-err { margin: 0 0 .75rem; padding: .5rem .75rem; border-radius: .625rem; background: #fdecec; color: #c62828; font-size: .875rem; line-height: 1.3; text-align: left; }
.dl-btn { width: 100%; height: 2.75rem; border: 0; border-radius: .75rem; background: #2688eb; color: #fff; font-size: 1rem; font-weight: 700; cursor: pointer; }
.dl-btn:hover { background: #1f7ad8; } .dl-btn:disabled { opacity: .6; cursor: default; }
.dl-tg { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .25rem; background: #2aabee; }
.dl-tg:hover { background: #229ed9; }
.dl-tg svg { width: 1.25rem; height: 1.25rem; }
.dl-link { display: block; margin: .625rem auto 0; border: 0; background: none; color: #2688eb; font-size: .875rem; cursor: pointer; }
.dl-hint { margin: 1.25rem 0 0; color: #707579; font-size: .8125rem; line-height: 1.4; }
.dl-hint a { color: #2688eb; text-decoration: none; }

/* ---- the frame -------------------------------------------------------------------------------------------------- */
#desk[hidden] { display: none; }
#desk-top { position: fixed; top: 0; left: 0; right: 0; height: var(--desk-top); z-index: 50; background: var(--desk-card); box-shadow: 0 .5px 0 var(--desk-line); }
.dt-in { max-width: calc(var(--desk-left) + var(--desk-center) + var(--desk-right) + 2 * var(--desk-gap)); height: 100%; margin: 0 auto; padding: 0 .5rem; display: flex; align-items: center; gap: 1rem; }
.dt-brand { display: inline-flex; align-items: center; gap: .625rem; color: var(--desk-text); text-decoration: none; font-weight: 800; font-size: 1.1875rem; letter-spacing: -.02em; }
.dt-brand img { width: 2.375rem; height: 2.375rem; border-radius: .75rem; box-shadow: 0 .125rem .5rem rgba(0, 0, 0, .18); }
.dn-sep { height: .5px; margin: .5rem .75rem; background: var(--desk-line); }
.dt-ic { position: relative; width: 2.375rem; height: 2.375rem; border: 0; border-radius: 50%; background: transparent; color: var(--desk-text); cursor: pointer; display: grid; place-items: center; }
.dt-ic:hover { background: var(--desk-hover); }
.dt-ic svg { width: 1.5rem; height: 1.5rem; }
.dt-ic i { position: absolute; top: .125rem; right: .0625rem; min-width: 1.125rem; height: 1.125rem; padding: 0 .3rem; border-radius: .5625rem; background: #ff3b30; color: #fff; font-size: .6875rem; font-weight: 700; font-style: normal; line-height: 1.125rem; text-align: center; box-shadow: 0 0 0 2px var(--desk-card); }
.dt-ic i[hidden] { display: none; }
.ds-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem; margin: 0 0 .75rem; padding: .25rem; border-radius: .625rem; background: var(--desk-hover); }
.ds-seg button { height: 1.875rem; border: 0; border-radius: .5rem; background: transparent; color: var(--desk-text); font-size: .8125rem; font-weight: 600; cursor: pointer; }
.ds-seg button.on { background: var(--desk-card); color: var(--desk-blue); box-shadow: 0 .0625rem .25rem rgba(0, 0, 0, .12); }
#ds-logout { margin: .25rem 0 0; }
/* on a wide screen the bell, the profile and the logo live in the frame, not in the column's header */
@media (min-width: 52.01rem) { body.desk #root-hdr .hbell-wrap, body.desk #root-hdr #root-prof, body.desk #root-hdr .hlogo { display: none !important; } }
.dt-back { display: inline-flex; align-items: center; gap: .25rem; height: 2rem; padding: 0 .75rem 0 .5rem; border: 0; border-radius: 1rem; background: var(--desk-hover); color: var(--desk-blue); font-size: .875rem; font-weight: 600; cursor: pointer; }
.dt-back[hidden] { display: none; }
.dt-back svg { width: 1.125rem; height: 1.125rem; }
.dt-right { margin-left: auto; display: inline-flex; align-items: center; gap: .375rem; }
/* the account on the right: the face, the name, «Telegram підключено» — a tap opens my wall */
.dt-acc { display: inline-flex; align-items: center; gap: .5rem; height: 2.5rem; padding: 0 .75rem 0 .25rem; border: 0; border-radius: 1.25rem; background: transparent; color: var(--desk-text); cursor: pointer; text-align: left; }
.dt-acc:hover { background: var(--desk-hover); }
.dt-av { width: 2rem; height: 2rem; border-radius: 50%; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, #8b7cff, #5a3fd6); color: #fff; font-size: .875rem; font-weight: 700; overflow: hidden; }
.dt-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-who { display: flex; flex-direction: column; line-height: 1.15; }
.dt-who b { font-size: .875rem; font-weight: 600; }
.dt-who small { display: inline-flex; align-items: center; gap: .25rem; color: #2aabee; font-size: .6875rem; font-weight: 600; }
.dt-who small svg { width: .75rem; height: .75rem; }
.dt-out { width: 2.375rem; height: 2.375rem; border: 0; border-radius: 50%; background: transparent; color: var(--desk-grey); cursor: pointer; display: grid; place-items: center; }
.dt-out svg { width: 1.25rem; height: 1.25rem; }
.dt-out:hover { background: var(--desk-hover); color: var(--desk-text); }
.desk-body { position: fixed; top: var(--desk-top); bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: var(--desk-left) var(--desk-center) var(--desk-right); gap: var(--desk-gap); justify-content: center; padding: var(--desk-gap) .5rem; box-sizing: border-box; }
#desk-nav { display: flex; flex-direction: column; gap: .125rem; padding-top: .25rem; }
.dn-item { position: relative; display: flex; align-items: center; gap: .75rem; height: 2.375rem; padding: 0 .75rem; border: 0; border-radius: .625rem; background: transparent; color: var(--desk-text); font-size: .9375rem; font-weight: 500; text-align: left; cursor: pointer; }
.dn-item:hover { background: var(--desk-hover); }
.dn-item.on { color: var(--desk-blue); background: var(--desk-hover); }
.dn-item svg { width: 1.375rem; height: 1.375rem; color: var(--desk-blue); flex: none; }
.dn-item i { margin-left: auto; min-width: 1.25rem; height: 1.25rem; padding: 0 .375rem; border-radius: .625rem; background: #ff3b30; color: #fff; font-size: .6875rem; font-weight: 700; font-style: normal; line-height: 1.25rem; text-align: center; }
.dn-item i[hidden] { display: none; }
.dn-my { margin-top: .5rem; border-top: .5px solid var(--desk-line); border-radius: 0 0 .625rem .625rem; padding-top: .5rem; height: 2.875rem; }
#desk-main { min-width: 0; min-height: 0; }
#desk-side { display: flex; flex-direction: column; gap: .75rem; }
.ds-card { padding: .875rem 1rem; border-radius: .75rem; background: var(--desk-card); box-shadow: 0 0 0 .5px var(--desk-line); }
.ds-card b { display: block; margin: 0 0 .25rem; font-size: .9375rem; }
.ds-card p { margin: 0 0 .625rem; color: var(--desk-grey); font-size: .8125rem; line-height: 1.4; }
.ds-card p:last-child { margin-bottom: 0; }
.ds-card kbd { display: inline-block; padding: 0 .3rem; border-radius: .25rem; background: var(--desk-hover); color: var(--desk-text); font: inherit; font-size: .75rem; }
.ds-btn { display: block; margin: 0 0 .375rem; height: 2.125rem; line-height: 2.125rem; border-radius: .5rem; background: var(--desk-blue); color: #fff; font-size: .875rem; font-weight: 600; text-align: center; text-decoration: none; }
.ds-btn.ghost { background: var(--desk-hover); color: var(--desk-blue); }
.ds-foot { color: var(--desk-grey); font-size: .75rem; padding: 0 .25rem; }
.ds-foot a { color: var(--desk-grey); }
@media (max-width: 68rem) { .desk-body { grid-template-columns: var(--desk-left) var(--desk-center); } #desk-side { display: none; } }
/* a phone (2026-10-23, the owner: «чтоб и с телефона всё было»): no frame at all — the app fills the screen with its own
   footer and headers, exactly like the Mini App; the sign-in card stays the same */
@media (max-width: 52rem) {
  body.desk { background: var(--color-background-secondary); }
  #desk-top, #desk-nav, #desk-side { display: none !important; }
  .desk-body { position: fixed; inset: 0; display: block; padding: 0; }
  #desk-main { height: 100%; }
  body.desk #app { border-radius: 0; box-shadow: none; }
}
#desk-login .dl-card { max-height: calc(100vh - 2rem); overflow-y: auto; }

/* ---- the bridge's own popup (Telegram's showPopup/showConfirm on the desktop) ----------------------------------- */
.desk-popup { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .35); }
.dp-box { width: calc(100vw - 3rem); max-width: 22rem; padding: 1.25rem 1.25rem 1rem; border-radius: 1.25rem; background: var(--desk-card); color: var(--desk-text); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3); }
.dp-box b { display: block; margin: 0 0 .5rem; font-size: 1.0625rem; }
.dp-box p { margin: 0 0 1rem; font-size: .9375rem; line-height: 1.4; white-space: pre-wrap; }
.dp-row { display: flex; justify-content: flex-end; gap: .5rem; }
.dp-btn { height: 2.25rem; padding: 0 1rem; border: 0; border-radius: .625rem; background: var(--desk-blue); color: #fff; font-size: .9375rem; font-weight: 600; cursor: pointer; }
.dp-btn.ghost { background: var(--desk-hover); color: var(--desk-text); }
.dp-btn.danger { background: #e53935; }