.guest-share-trigger {
    width: 100%;
    min-height: 34px;
    margin-top: 10px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: var(--ui-text-1);
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 650;
}

.guest-share-trigger:hover {
    background: var(--ui-card-hover-bg);
    border-color: var(--accent-border-strong);
}

.guest-share-trigger__main,
.guest-share-trigger__mock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.guest-share-trigger__main svg { width: 14px; height: 14px; color: var(--accent); }
.guest-share-trigger__mock { color: var(--ui-text-3); font-size: 9px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

.gam-layer {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: grid;
    place-items: center;
    padding: 24px;
    color: var(--ui-text-1);
}

.gam-backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ui-bg) 60%, transparent);
    backdrop-filter: blur(5px);
}

.gam-dialog {
    position: relative;
    width: min(620px, 100%);
    max-height: min(760px, calc(100vh - 48px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--ui-panel-elevated-bg, var(--ui-surface-2));
    border: 1px solid var(--ui-border-strong);
    border-radius: 18px;
    box-shadow: var(--ui-shadow);
}

.gam-header {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px 14px;
}

.gam-title-block { min-width: 0; display: grid; gap: 3px; }
.gam-title-line { min-width: 0; display: flex; align-items: center; gap: 9px; }
.gam-title-line h2 {
    min-width: 0;
    overflow: hidden;
    margin: 0;
    color: var(--ui-text-1);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gam-resource-name { overflow: hidden; color: var(--ui-text-3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.gam-mock-badge {
    flex: 0 0 auto;
    padding: 3px 7px;
    color: var(--accent);
    background: var(--accent-subtle-2);
    border: 1px solid var(--accent-border-strong);
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.gam-icon-button {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding: 0;
    color: var(--ui-text-3);
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.gam-icon-button:hover { color: var(--ui-text-1); background: var(--ui-hover); }
.gam-icon-button svg { width: 16px; height: 16px; }
.gam-close { margin-top: -4px; margin-right: -6px; }

.gam-content {
    min-height: 0;
    overflow: auto;
    padding: 0 20px 2px;
}

.gam-invite {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
}

.gam-invite-field {
    min-width: 0;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 6px 0 12px;
    color: var(--ui-text-3);
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-border-strong);
    border-radius: 9px;
}

.gam-invite-field:focus-within {
    border-color: var(--accent-border-strong);
    outline: 2px solid var(--ui-focus-ring);
    outline-offset: 1px;
}
.gam-invite-field input {
    min-width: 0;
    width: 100%;
    padding: 0;
    color: var(--ui-text-1);
    background: transparent;
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 12px;
}
.gam-invite-field input::placeholder { color: var(--ui-text-3); }
.gam-invite-submit {
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    color: var(--accent-contrast);
    background: var(--accent);
    border: 0;
    border-radius: 7px;
    cursor: pointer;
    font-size: 10px;
    font-weight: 750;
}
.gam-invite-submit:hover { background: var(--accent-hover); }
.gam-invite-submit:focus-visible { outline: 2px solid var(--ui-focus-ring); outline-offset: 1px; }
.gam-invite-submit svg { width: 13px; height: 13px; }

.gam-select {
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    color: var(--ui-text-1);
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 11px;
}
.gam-select--person {
    width: 118px;
    background: transparent;
    border-color: transparent;
}
.gam-select--person:hover { background: var(--ui-hover); }
.gam-select--plain {
    width: auto;
    height: 24px;
    margin-left: -7px;
    padding: 0 24px 0 7px;
    background: transparent;
    border-color: transparent;
    font-size: 12px;
    font-weight: 700;
}
.gam-select--plain:hover { background: var(--ui-hover); }

.gam-button {
    min-height: 38px;
    padding: 0 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: var(--ui-text-1);
    background: var(--ui-card-bg);
    border: 1px solid var(--ui-border);
    border-radius: 999px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}
.gam-button:hover { background: var(--ui-card-hover-bg); }
.gam-button--primary,
.gam-button--done { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
.gam-button--primary { min-height: 44px; border-radius: 9px; }
.gam-button--primary:hover,
.gam-button--done:hover { background: var(--accent-hover); }
.gam-button--copy { color: var(--accent); background: transparent; border-color: var(--ui-border-strong); }
.gam-button--copy:hover { background: var(--accent-subtle-2); border-color: var(--accent-border-strong); }
.gam-button svg { width: 14px; height: 14px; }

.gam-section { padding: 18px 0; }
.gam-section + .gam-section { border-top: 1px solid var(--ui-border); }
.gam-section h3 { margin: 0 0 10px; color: var(--ui-text-1); font-size: 13px; font-weight: 700; }

.gam-people { display: grid; gap: 2px; }
.gam-person {
    min-height: 46px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 5px 4px;
    border-radius: 9px;
}
.gam-person:hover { background: var(--ui-hover); }
.gam-avatar {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    color: var(--ui-text-1);
    background: var(--ui-surface-3);
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
}
.gam-avatar--owner { color: var(--accent); background: var(--accent-subtle-2); }
.gam-avatar svg { width: 15px; height: 15px; }
.gam-person__identity { min-width: 0; flex: 1; display: grid; gap: 3px; }
.gam-person__identity strong { overflow: hidden; color: var(--ui-text-1); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.gam-person__identity small { color: var(--ui-text-3); font-size: 10px; }
.gam-person__remove { opacity: 0; pointer-events: none; }
.gam-person:hover .gam-person__remove,
.gam-person:focus-within .gam-person__remove { opacity: 1; pointer-events: auto; }

.gam-general-row {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 3px 4px;
}
.gam-general-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: var(--accent-subtle-2);
    border-radius: 50%;
}
.gam-general-icon svg { width: 18px; height: 18px; }
.gam-general-main { min-width: 0; display: grid; gap: 1px; }
.gam-general-main small { overflow: hidden; color: var(--ui-text-3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.gam-link-role {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    background: var(--ui-hover);
    color: var(--ui-text-2);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Общая ссылка ──
   Активное состояние подсвечивается акцентом: «ресурс открыт по ссылке» —
   это то, что владелец должен замечать без чтения. */
.gam-general-row--active .gam-general-icon { color: var(--accent); background: var(--accent-subtle-2); }
.gam-general-actions { display: flex; align-items: center; gap: 6px; }
.gam-button--link { color: var(--ui-text-1); }
.gam-button--danger { color: var(--status-error, #e5484d); border-color: var(--ui-border-strong); }
.gam-button--danger:hover { background: var(--ui-hover); border-color: currentColor; }

/* Адрес виден один раз, сразу после выпуска: в базе только хеш токена. */
.gam-link-issued {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px;
    background: var(--ui-surface-1);
    border: 1px solid var(--ui-border);
    border-radius: 9px;
}
.gam-link-url {
    min-width: 0;
    padding: 8px 10px;
    color: var(--ui-text-1);
    background: var(--ui-input-bg);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}
/* `--ui-focus-ring` — цвет, а не готовая тень: `box-shadow: var(...)` было
   невалидным правилом и отбрасывалось, а `outline: none` рядом убирал штатную
   обводку. В режиме `no-borders` фокус на поле со ссылкой становился невидим. */
.gam-link-url:focus-visible {
    outline: 2px solid var(--ui-focus-ring);
    outline-offset: 1px;
}
.gam-link-once { grid-column: 1 / -1; color: var(--ui-text-3); font-size: 10px; }

.gam-link-members { margin-top: 12px; display: grid; gap: 2px; }
.gam-link-members-title {
    margin: 0 0 4px;
    color: var(--ui-text-2);
    font-size: 11px;
    font-weight: 700;
}
.gam-person--link .gam-person__role {
    flex: 0 0 auto;
    color: var(--ui-text-3);
    font-size: 11px;
}
.gam-person--muted { color: var(--ui-text-3); font-size: 11px; padding-left: 6px; }

.gam-notice {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    padding: 9px 11px;
    color: var(--ui-text-2);
    background: var(--ui-surface-1);
    border-radius: 8px;
    font-size: 10px;
}
.gam-notice svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--accent); }
.gam-notice span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gam-footer {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px 16px;
    border-top: 1px solid var(--ui-border);
}
.gam-footer-left { min-width: 0; display: flex; align-items: center; }

.guest-share-trigger:focus-visible,
.gam-button:focus-visible,
.gam-icon-button:focus-visible,
.gam-select:focus-visible,
.gam-invite-submit:focus-visible {
    outline: 2px solid var(--ui-focus-ring);
    outline-offset: 2px;
}

html.no-borders .gam-dialog { outline: 1px solid var(--ui-border-strong); }
html.no-borders .guest-share-trigger:hover { box-shadow: inset 0 0 0 1px var(--accent-border-strong); }

@media (max-width: 650px) {
    .gam-layer { padding: 10px; }
    .gam-dialog { max-height: calc(100vh - 20px); border-radius: 14px; }
    .gam-header { padding: 18px 16px 15px; }
    .gam-content { padding-inline: 16px; }
    .gam-footer { padding: 15px 16px 18px; }
    .gam-invite { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 460px) {
    .gam-title-line { align-items: flex-start; flex-direction: column; gap: 6px; }
    .gam-title-line h2 { width: 100%; font-size: 18px; }
    .gam-person { flex-wrap: wrap; }
    .gam-person__identity { min-width: calc(100% - 50px); }
    .gam-person .gam-select { margin-left: 45px; flex: 1; }
    .gam-general-row { grid-template-columns: 36px minmax(0, 1fr); }
    .gam-link-role { grid-column: 2; justify-self: start; }
    .gam-invite-submit span { display: none; }
}