/* ---------- Auth screen ---------- */
.auth {
  min-height: 100%; display: grid; place-items: center;
  padding: calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.auth-card { width: 100%; max-width: 400px; }
.auth-card .brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 32px; text-align: center; }
.auth-logo {
  width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--md-shape-lg); background: var(--md-primary); color: var(--md-on-primary);
}

/* ---------- App shell: top bar + nav ---------- */
.shell { min-height: 100%; display: grid; grid-template-columns: calc(80px + env(safe-area-inset-left)) 1fr; grid-template-rows: auto 1fr; grid-template-areas: "rail bar" "rail main"; }

.top-bar {
  grid-area: bar; display: flex; align-items: center; gap: 4px;
  height: calc(64px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) calc(12px + env(safe-area-inset-right)) 0 calc(24px + env(safe-area-inset-left));
  background: color-mix(in srgb, var(--md-surface) 88%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 10;
}
.top-bar .spacer { flex: 1; }
.top-bar-user { margin-right: 8px; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-bar .title-lg { white-space: nowrap; }

/* Navigation rail (desktop) / navigation bar (mobile) */
.nav {
  grid-area: rail; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0 12px env(safe-area-inset-left);
  background: var(--md-surface); position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; scrollbar-width: none;
}
.nav::-webkit-scrollbar { display: none; }
.nav-brand { width: 56px; height: 56px; display: grid; place-items: center; color: var(--md-primary); margin-bottom: 8px; }
.nav-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80px;
  color: var(--md-on-surface-variant); text-decoration: none; font-size: 12px; line-height: 16px; font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.nav-pill {
  width: 56px; height: 32px; display: grid; place-items: center; border-radius: var(--md-shape-full);
  transition: background var(--md-dur) var(--md-ease);
}
.nav-item:focus-visible { outline: none; }
.nav-item:focus-visible .nav-pill { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.nav-item.active { color: var(--md-on-surface); font-weight: 600; }
.nav-item.active .nav-pill { background: var(--md-secondary-container); color: var(--md-on-secondary-container); }

.content { grid-area: main; padding: 8px calc(32px + env(safe-area-inset-right)) 48px; max-width: 1440px; width: 100%; min-width: 0; margin-inline: auto; }
.page { display: flex; flex-direction: column; gap: 32px; }
.page-head { margin-top: 8px; }
.page-head p::first-letter { text-transform: uppercase; }

/* ---------- Общие блоки ---------- */
.group { display: flex; flex-direction: column; gap: 12px; }
.page-head-row { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; }
.section-title { margin: 0 0 16px; color: var(--md-on-surface-variant); }

/* ---------- Главная: сервисы ---------- */
.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.service { flex-direction: row; align-items: center; gap: 16px; padding: 16px; }
.service-text { flex: 1; min-width: 0; }
.service-arrow { color: var(--md-on-surface-variant); display: grid; }
.rows { display: flex; flex-direction: column; gap: 12px; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.setting-row > :first-child { min-width: 0; }
.setting-row > span:last-child:not(:first-child) { max-width: 60%; min-width: 0; overflow-wrap: anywhere; text-align: right; }

.action-bar { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Профиль ---------- */
.profile { display: flex; align-items: center; gap: 16px; min-width: 0; }
.profile > :last-child { min-width: 0; }
.profile-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 440px)); gap: 16px; align-items: start; }
.form-card { max-width: 440px; width: 100%; }

/* Состояния «пусто», «загрузка», «ошибка» */
.fm-empty { padding: 24px 16px; text-align: center; }
.fm-empty.card { text-align: left; }
.is-pending { opacity: .6; pointer-events: none; }

/* ---------- Смартфон ---------- */
@media (max-width: 720px) {
  .shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; grid-template-areas: "bar" "main"; }
  .top-bar { padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(8px + env(safe-area-inset-right)); }
  .top-bar-user { display: none; }
  .nav {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto; height: auto; z-index: 10;
    flex-direction: row; justify-content: space-around; align-items: center;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
    background: var(--md-surface-container); gap: 0;
  }
  .nav-brand { display: none; }
  .nav-item { flex: 1; width: auto; min-width: 0; }
  .nav { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); overflow: visible; }
  .content { padding: 4px 16px calc(104px + env(safe-area-inset-bottom)); }
  .page { gap: 24px; }

  .service-grid, .profile-cards{ grid-template-columns: minmax(0, 1fr); }
  .form-card .btn[type="submit"] { width: 100%; }
  .segmented span { min-width: 44px; padding: 0 10px; }
  .action-bar .btn { flex: 1 1 calc(50% - 4px); }
  .setting-row > span:last-child:not(:first-child) { max-width: 55%; }
  .snackbar { bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (min-width: 721px) and (max-width: 1100px) {
  .content { padding: 8px 20px 40px; }
}

/* ---------- Диалог «Поделиться» ---------- */
.share-file { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--md-shape-lg); background: var(--md-surface-container); min-width: 0; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg-item {
  min-height: 36px; padding: 0 14px; border-radius: var(--md-shape-full); cursor: pointer; font: inherit; font-size: 14px; font-weight: 500;
  border: 1px solid var(--md-outline); background: transparent; color: var(--md-on-surface-variant);
  transition: background var(--md-dur) var(--md-ease);
}
.seg-item.is-on { background: var(--md-secondary-container); color: var(--md-on-secondary-container); border-color: transparent; }
.share-list { display: flex; flex-direction: column; gap: 8px; }
.share-item { display: flex; align-items: center; gap: 0; padding: 8px 4px 8px 16px; border-radius: var(--md-shape-lg); border: 1px solid var(--md-outline-variant); }
.share-item-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; }
.share-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (hover: hover) {
  .nav-item:hover .nav-pill { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
  .seg-item:hover { background: color-mix(in srgb, var(--md-on-surface) 8%, transparent); }
  .fm-menu-item:hover { background: var(--md-surface-container-highest); }
  .fm-row.is-link:hover { background: var(--md-surface-container); }
}

/* ---------- Файлы: люди ---------- */
.user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 16px; }
.user-card { gap: 8px; }
.user-name { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.row-actions { display: flex; gap: 4px; flex: none; }
.secret { font-family: ui-monospace, monospace; font-size: 14px; overflow-wrap: anywhere; user-select: all; }
@media (max-width: 600px) { .user-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Модальное окно: диалог на десктопе, нижний лист на телефоне ---------- */
.modal {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 0; border-radius: var(--md-shape-xl);
  background: var(--md-surface-container-high); color: var(--md-on-surface); box-shadow: var(--md-elev-3);
}
.modal::backdrop { background: var(--md-scrim); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 20px 12px 8px 24px; }
.modal-head h2 { min-width: 0; overflow-wrap: anywhere; }
.modal-body { padding: 8px 24px 24px; }
.modal-body .btn-danger { align-self: flex-start; }
@media (max-width: 720px) {
  .modal { margin: auto auto 0; width: 100%; max-width: none; border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0; padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- Файлы: менеджер, ссылки ---------- */
.fm-tabs { margin: 16px 0; }
.fm-list { display: flex; flex-direction: column; gap: 8px; }
.fm-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 8px 0; }
.fm-row { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 8px 8px 8px 16px; min-height: 56px; border-radius: var(--md-shape-lg); }
.fm-row.is-link { cursor: pointer; }
.fm-row:focus-visible { outline: 2px solid var(--md-primary); outline-offset: 2px; }
.fm-row > svg:first-child { flex: none; width: 24px; height: 24px; fill: var(--md-on-surface-variant); }
.fm-row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.fm-row-main > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fm-row .icon-btn { flex: none; }
.fm-drop { position: relative; border-radius: var(--md-shape-lg); transition: box-shadow var(--md-dur) var(--md-ease); min-width: 0; }
.fm-drop.is-over { box-shadow: 0 0 0 2px var(--md-primary); background: var(--md-surface-container-low); }
.fm-upload { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; min-width: 0; }
.fm-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fm-menu { display: flex; flex-direction: column; margin: 0 -24px; }
.fm-menu-item { display: flex; align-items: center; gap: 16px; min-height: 52px; padding: 0 24px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fm-menu-item svg { width: 24px; height: 24px; fill: currentColor; }
.fm-menu-item:focus-visible { outline-offset: -2px; }
.fm-menu-item.is-danger { color: var(--md-error); }
.fm-inline { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.fm-inline .field { flex: 1 1 240px; }
.fm-inline .btn { margin-top: 8px; }
.file-name { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-card.is-off { opacity: .6; }

/* Файлы: подсказка вкладки, домашний диск, вкладки на телефоне */
.fm-hint { margin: -4px 0 12px; }
.home-folder { gap: 8px; }
.home-folder .user-name .icon { color: var(--md-primary); flex: none; }
.home-folder-error { color: var(--md-error); }
.chip-error { gap: 4px; background: var(--md-error-container); color: var(--md-on-error-container); }
.chip-error .icon { width: 14px; height: 14px; fill: currentColor; }
@media (max-width: 600px) {
  .fm-tabs { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .fm-tabs label { flex: 1 0 auto; }
  .fm-tabs .icon { display: none; }
}

/* ---------- Чат ---------- */
.chat-connect { margin-top: 16px; }
.chat-connect-value { display: flex; align-items: center; gap: 4px; min-width: 0; text-align: right; }
.chip .icon { width: 14px; height: 14px; fill: currentColor; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips .chip { padding-right: 0; gap: 2px; }
.chips .chip .icon-btn { width: 24px; height: 24px; }