/* ===== Hut 3.1 «Бета» — стили новых элементов (значки, админка, приглашения, новости) ===== */

/* Значки ролей */
.message-head .role-badges{margin-left:2px;margin-right:2px}
.nav-item>span:not(.avatar):not(.nav-badges),.friend-row>span:not(.avatar){display:inline-flex;align-items:center;min-width:0}
.profile-view h3{display:flex;align-items:center;justify-content:center;gap:2px}
.call-person{position:relative}

/* Приглашение на экране входа */
#inviteRow input{text-transform:uppercase;letter-spacing:.08em}

/* Админка */
dialog#modal[data-kind="admin"] .modal-card{width:min(860px,calc(100vw - 32px))}
.admin-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.admin-head h3{margin:0}
.admin-head .icon-btn{font-size:18px;width:34px;height:34px;border-radius:8px;background:var(--raised)}
.admin-tabs{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none}
.admin-tabs button{flex:0 0 auto;padding:8px 14px;border-radius:999px;background:var(--raised);color:var(--muted);font-weight:650;font-size:13.5px}
.admin-tabs button.active{background:var(--accent);color:var(--on-accent,#fff)}
.admin-summary{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:13px;margin-bottom:10px}
.admin-summary b{color:var(--text)}
.admin-search{width:100%;height:40px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);padding:0 12px;margin-bottom:10px;outline:none}
.admin-search:focus{border-color:var(--accent)}
.admin-list{display:grid;gap:6px}
.admin-user,.admin-invite{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;padding:10px;border:1px solid var(--border);border-radius:10px;background:var(--raised)}
.admin-user.is-banned{opacity:.75;border-style:dashed}
.admin-user-main{position:relative;display:flex;align-items:center;gap:10px;min-width:0}
.admin-user-main>.status-dot{position:absolute;left:22px;top:22px;border:2px solid var(--raised)}
.admin-user-info{display:grid;min-width:0}
.admin-user-info b{display:flex;align-items:center;gap:2px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.admin-user-info b em{color:var(--muted);font-weight:500;font-style:normal;margin-left:4px}
.admin-user-info small,.admin-invite small{color:var(--muted);font-size:12.5px}
.admin-meta{font-size:12px!important;opacity:.9}
.admin-user-acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.admin-user-acts select{height:34px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);padding:0 8px;font:inherit;font-size:13px}
.secondary.sm,.danger.sm{min-height:34px;padding:0 12px;font-size:13px;border-radius:8px}
.danger-text{color:var(--red)!important}
.admin-invite{grid-template-columns:1fr}
.admin-invite-main{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.admin-invite code,.temp-pass code{font:600 14px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.04em;word-break:break-all}
.admin-invite .admin-user-acts{justify-content:flex-start}
.tag.danger{background:rgba(239,107,112,.15);color:var(--red)}
.admin-form{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;margin-bottom:12px}
.admin-form .field{margin-top:0}
.admin-form .field input,.admin-form .field select{height:44px}
.admin-form .primary{margin-top:0;width:auto;padding:0 18px;min-height:44px}
.admin-audit{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;padding:8px 10px;border-radius:8px;background:var(--raised);font-size:13.5px}
.admin-audit time{color:var(--muted);font-size:12.5px;white-space:nowrap}
.admin-note{font-size:13px;margin:8px 0 10px!important}
.admin-empty{color:var(--muted);text-align:center;padding:24px 8px}
.admin-radios{display:grid;gap:6px}
.admin-radio{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--raised);cursor:pointer}
.admin-radio input{margin-top:3px;accent-color:var(--accent)}
.admin-radio span{display:grid}
.admin-radio small{color:var(--muted)}
.admin-body{min-height:200px}
.temp-pass{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px;margin:4px 0 12px;border-radius:10px;border:1px dashed var(--accent);background:var(--raised)}
.temp-pass code{flex:1 1 180px}
.temp-pass.fresh{display:grid;grid-template-columns:1fr auto}
.temp-pass.fresh span{grid-column:1/-1;color:var(--muted);font-size:12.5px}
.storage-meter{margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--raised);font-size:13px}
.storage-meter div{display:flex;justify-content:space-between;gap:10px;margin-bottom:7px;color:var(--muted)}
.storage-meter b{color:var(--text);font-weight:650}
.storage-meter i{display:block;height:6px;border-radius:99px;background:var(--hover);overflow:hidden;position:relative}
.storage-meter i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p);background:var(--accent);border-radius:inherit}
.storage-meter.full i::after{background:var(--red)}

/* Новости и обратная связь */
.news-note{display:flex;align-items:center;gap:10px;justify-content:center;padding:12px 16px;margin:0 16px 14px;border:1px solid var(--border);border-radius:12px;background:var(--raised);color:var(--muted);font-size:13.5px;text-align:center}
.bug-meta{color:var(--muted);font-size:12px;margin:6px 0 0}
#bugText{width:100%;min-height:120px;border:1px solid var(--border);border-radius:9px;background:var(--bg);color:var(--text);padding:10px 12px;resize:vertical;outline:none}
#bugText:focus{border-color:var(--accent)}

@media(max-width:560px){
  .admin-user{grid-template-columns:1fr}
  .admin-user-acts{justify-content:flex-start}
  .admin-form{grid-template-columns:1fr 1fr}
  .admin-form .primary{grid-column:1/-1;width:100%}
  .admin-audit{grid-template-columns:1fr;gap:2px}
  .temp-pass.fresh{grid-template-columns:1fr}
  .news-note{margin:0 10px 10px}
}

/* G1: заявки в друзья */
.friend-requests .section-title{padding-left:2px}
.friend-requests .friend-card{margin-bottom:10px}
.request-card{border-color:color-mix(in srgb,var(--accent) 45%,var(--border))}
.request-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.friend-card .request-actions button.req-accept{background:var(--accent);color:#fff}
.friend-card .request-actions button.req-decline{background:var(--raised);border:1px solid var(--border)}
.req-nav{color:var(--text)}
.req-count{min-width:22px;height:22px;border-radius:11px;background:var(--accent);color:#fff;font-size:12px;font-weight:800;display:grid;place-items:center;padding:0 6px}
.rail-btn{position:relative}
.rail-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;box-shadow:0 0 0 2px #0b0d11}
@media(max-width:560px){.request-card{grid-template-columns:40px 1fr}.request-card .request-actions{grid-column:1/-1;justify-content:stretch}.request-card .request-actions button{flex:1}}
/* G3: удаление аккаунта */
.link-danger{display:block;margin:10px auto 0;background:transparent;color:var(--red);font-size:13px;min-height:32px;padding:4px 10px;border-radius:7px;opacity:.85}
.link-danger:hover{opacity:1;background:color-mix(in srgb,var(--red) 12%,transparent)}
.form-error{color:var(--red);font-size:13px;min-height:18px;margin-top:8px}

/* ===== 3.1: значки ролей — SVG, ровно в строку с именем ===== */
/* !important: в старых стилях есть общие правила для span (напр. .profile-strip span{display:block}) */
.role-badges{display:inline-flex!important;align-items:center;gap:3px;margin:0 0 0 5px!important;padding:0!important;vertical-align:-2px;flex:0 0 auto;overflow:visible!important;max-width:none!important;white-space:nowrap;line-height:0!important}
.role-badges .role-badge{display:inline-grid!important;place-items:center;width:15px;height:15px;max-width:none!important;overflow:visible!important;margin:0!important;padding:0!important;font-size:0!important;line-height:0!important;cursor:help}
.rb-ico{width:15px;height:15px;flex:0 0 auto;display:block;overflow:visible;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.role-badges .rb-owner,.badge-chip.rb-owner,.call-role.rb-owner{color:#f4b740}
.role-badges .rb-dev,.badge-chip.rb-dev,.call-role.rb-dev{color:#3fa9f5}
.role-badges .rb-mod,.badge-chip.rb-mod,.call-role.rb-mod{color:#36b37e}
.role-badges .rb-verified,.badge-chip.rb-verified,.call-role.rb-verified,.admin-user-acts [data-verify] .rb-ico{color:#4f8dff}
.message-head .role-badges{margin:0 3px 0 4px!important;vertical-align:-2px;align-self:center}
.message-head .role-badges .role-badge,.message-head .rb-ico{width:14px;height:14px}
h3 .role-badges .role-badge,h3 .rb-ico{width:18px;height:18px}
h3 .role-badges{gap:4px;margin-left:7px!important;vertical-align:-1px}
.call-role .rb-ico{width:15px;height:15px}
.call-role{position:absolute;left:-4px;top:-4px;width:15px;height:15px;font-style:normal;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.7))}
.profile-roles{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:2px 0 12px}
.badge-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 6px;border-radius:999px;background:color-mix(in srgb,currentColor 13%,transparent);border:1px solid color-mix(in srgb,currentColor 30%,transparent);font-size:12px;font-weight:700}
.badge-chip .rb-ico{width:15px;height:15px;filter:none}
.badge-chip>span{color:var(--text)}
.admin-user-acts [data-verify]{display:inline-flex;align-items:center;gap:6px}
.admin-user-acts [data-verify] .rb-ico{width:15px;height:15px;filter:none}
/* Своё имя внизу слева: ник обрезается многоточием, значки всегда видны */
#myName{display:flex!important;align-items:center;min-width:0;overflow:visible!important}
#myName mk-name{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#myName .role-badges{margin-left:5px!important}

/* ===== Цвет ника ===== */
mk-nick{font:inherit}
mk-nick.nick-solid{color:var(--nick)}
mk-nick.nick-g{color:transparent;-webkit-background-clip:text;background-clip:text;background-size:200% 100%;animation:nick-shift 6s linear infinite}
.nick-g-fire{background-image:linear-gradient(90deg,#ff5f45,#ffb547,#ffe27a,#ffb547,#ff5f45)}
.nick-g-aurora{background-image:linear-gradient(90deg,#4dffb5,#4dc9ff,#a77bff,#4dc9ff,#4dffb5)}
.nick-g-sunset{background-image:linear-gradient(90deg,#ff7a9e,#ffa25f,#ffd36e,#ffa25f,#ff7a9e)}
.nick-g-gold{background-image:linear-gradient(90deg,#c8902e,#ffe08a,#fff3c4,#ffe08a,#c8902e)}
.nick-g-ocean{background-image:linear-gradient(90deg,#3fd4ff,#5f8bff,#7af0e4,#5f8bff,#3fd4ff)}
.nick-g-rainbow{background-image:linear-gradient(90deg,#ff6b6b,#ffd166,#7bd88f,#5fb3ff,#d97cff,#ff6b6b)}
@keyframes nick-shift{to{background-position:200% 0}}
@media(prefers-reduced-motion:reduce){mk-nick.nick-g{animation:none}}
.nick-picker{margin:4px 0 14px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--raised)}
.nick-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;font-size:13px;color:var(--muted);font-weight:650}
.nick-picker-head b{font-size:15px;color:var(--text);max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nick-swatches{display:flex;flex-wrap:wrap;gap:7px}
.nick-swatches.grads{margin-top:8px}
.nick-sw{position:relative;width:28px;height:28px;padding:0;border-radius:50%;background:transparent;border:2px solid transparent;display:grid;place-items:center;cursor:pointer}
.nick-sw i{display:block;width:20px;height:20px;border-radius:50%}
.nick-sw:hover{border-color:var(--border)}
.nick-sw.active{border-color:var(--text)}
.nick-none{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);position:relative;overflow:hidden}
.nick-none:after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;width:2px;background:var(--red);transform:rotate(45deg)}
.nick-custom input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:0;padding:0}
.nick-sw.wide{width:auto;height:30px;border-radius:999px;padding:0 10px 0 4px;display:inline-flex;gap:6px;background:var(--surface);border:1px solid var(--border);font-size:12px;font-weight:650;color:var(--text)}
.nick-sw.wide.active{border-color:var(--text);box-shadow:0 0 0 1px var(--text)}
.nick-sw.wide i{width:20px;height:20px}
.nick-hint{display:block;margin-top:9px;color:var(--muted);font-size:12px}

/* Independent cosmetic donor coin; never replaces verified or changes permissions. */
.role-badges .rb-donor,.badge-chip.rb-donor,.call-role.rb-donor,.admin-user-acts [data-donor] .rb-ico{color:#f1bf4e}

.role-badges .rb-donor .rb-ico{transform:translateY(1px)}

/* Chat media: compact controls within the existing theme, never call audio. */
.upload-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.upload-head strong{flex:1;min-width:0;overflow-wrap:anywhere}
.upload-cancel{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-height:44px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer}
.upload-cancel svg{width:16px;height:16px}
.composer-video{display:block;width:min(100%,420px);max-height:220px;margin-top:12px;border-radius:8px;background:#080a0e}
.chat-audio{--audio-progress:0%;display:grid;grid-template-columns:44px minmax(0,1fr) 44px 44px;gap:8px;align-items:center;width:420px;max-width:100%;min-width:0;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);box-sizing:border-box}
.chat-audio-main{min-width:0}
.chat-audio-title{display:block;font-size:14px;line-height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0}
.chat-audio-play,.chat-audio-speed,.chat-audio-download{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;border:0;border-radius:8px;background:transparent;color:var(--text);cursor:pointer;text-decoration:none;padding:0;font:inherit}
.chat-audio-play{border-radius:50%;background:var(--accent,#8085ff);color:#fff}
.chat-audio-play svg{width:22px;height:22px}
.chat-audio-download svg{width:20px;height:20px}
.chat-audio-speed{font-size:14px;font-weight:650}
.chat-audio-speed:hover,.chat-audio-download:hover{background:var(--hover,rgba(128,128,128,.15))}
.chat-audio-timeline{position:relative;height:32px;display:flex;align-items:center;min-width:0}
.chat-audio-seek{width:100%;min-width:0;margin:0;accent-color:var(--accent,#8085ff);cursor:pointer;height:32px}
.chat-audio-seek:disabled{cursor:wait}
.voice-timeline .chat-audio-seek{position:absolute;inset:0;opacity:0}
.voice-timeline:focus-within{outline:2px solid var(--accent,#8085ff);outline-offset:2px;border-radius:4px}
.chat-audio-wave{height:28px;width:100%;fill:var(--muted);pointer-events:none}
.chat-audio-wave rect{fill:currentColor}
.voice-timeline{color:var(--accent,#8085ff)}
.voice-timeline::after{content:"";position:absolute;bottom:0;left:0;width:var(--audio-progress);height:2px;background:currentColor;pointer-events:none}
.chat-audio-info{display:flex;justify-content:space-between;gap:8px;font-size:14px;line-height:20px;color:var(--muted);white-space:nowrap}
.chat-audio-ready>audio{display:none}
.chat-audio>audio{grid-column:1/-1;width:100%}
.chat-audio:not(.chat-audio-ready)>.chat-audio-play,.chat-audio:not(.chat-audio-ready)>.chat-audio-speed{display:none}
.chat-audio-error,.chat-audio-transcript{grid-column:1/-1;font-size:14px;line-height:1.45;margin:0;overflow-wrap:anywhere}
.chat-audio-transcript summary{cursor:pointer;min-height:32px;padding-top:6px;color:var(--muted)}
.chat-audio-transcript p{white-space:pre-wrap;margin:8px 0 0}
.chat-video{width:480px;max-width:100%;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--surface)}
.chat-video video{display:block;width:100%;max-height:440px;aspect-ratio:16/9;object-fit:contain;background:#080a0e}
.video-caption{padding:10px 12px;min-width:0}
.video-caption strong{display:block;overflow-wrap:anywhere;font-size:14px}
.video-caption .media-download{margin:4px 0 0}
.video-help{font-size:12px;line-height:1.4;color:var(--muted);margin:0;padding:0 12px 10px}
@media(max-width:600px){.chat-audio{width:100%;grid-template-columns:44px minmax(0,1fr) 44px;gap:6px;padding:10px}.chat-audio-download{grid-column:3;width:44px;min-width:44px;height:44px}.chat-audio-speed{grid-column:3;grid-row:1;width:40px;min-width:40px}.chat-audio-main{grid-column:2;grid-row:1/3}.chat-audio-play{grid-column:1;grid-row:1/3}.chat-audio-info{flex-wrap:wrap;gap:0 8px}.chat-video video{max-height:320px}.chat-audio-title{font-size:14px}}
.device-note{display:block;color:var(--muted);font-size:14px;line-height:1.5;margin:8px 0 16px}
.downloads-path{padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--surface);overflow-wrap:anywhere;font-size:14px}
#audioInput,#audioOutput{width:100%;min-height:44px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px}
.saved-avatar{background:var(--accent);color:#fff;display:inline-flex;align-items:center;justify-content:center}
.saved-avatar svg{width:22px;height:22px}
/* Keep media hit targets intact even when compact message styles apply. */
.message .chat-audio .chat-audio-play,.message .chat-audio .chat-audio-speed,.message .chat-audio .chat-audio-download{width:44px;min-width:44px;height:44px;min-height:44px;padding:0}

/* shopfix2: compact user rows and floating action disclosure. */
.admin-user{grid-template-columns:minmax(0,1fr) auto}.admin-user-main,.admin-user-info{min-width:0}.admin-user-info .admin-meta{white-space:normal;overflow-wrap:anywhere}.admin-user-dropdown{justify-self:end;min-width:0}
.admin-actions-trigger{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:34px;padding:6px 12px;white-space:nowrap}
.admin-action-panel{position:fixed;z-index:1000;display:flex;flex-direction:column;align-items:stretch;gap:5px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:10px;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;box-shadow:0 16px 50px #0008}
.admin-action-panel[hidden]{display:none!important}.admin-action-panel.admin-user-acts{justify-content:flex-start;flex-wrap:nowrap}.admin-action-title{font-size:13px;padding:4px 7px 8px;overflow-wrap:anywhere;color:var(--muted)}
.admin-action-panel.admin-user-acts button{width:100%;min-height:40px;white-space:normal;justify-content:flex-start;text-align:left;line-height:1.3;padding:9px 10px}.admin-action-panel .rb-ico{width:16px;height:16px;flex:none}.admin-action-panel .admin-action-role{display:grid;gap:6px;font-size:12px;color:var(--muted);padding:4px 0 8px}.admin-action-panel select{width:100%;min-width:0;font:inherit;color:var(--text)}
@media(max-width:560px){.admin-user{gap:8px;grid-template-columns:minmax(0,1fr) auto}.admin-actions-trigger{font-size:12px;padding:6px 8px}.admin-user-info small{font-size:11px}}

/* Audio volume stays on its own row, including narrow message bubbles. */
.chat-audio-volume{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-width:0;width:100%}.chat-audio-mute{display:inline-flex;align-items:center;justify-content:center;width:36px;min-width:36px;height:36px;padding:7px;border:0;border-radius:8px;background:transparent;color:var(--text);cursor:pointer}.chat-audio-mute svg{width:20px;height:20px}.chat-audio-volume-range{flex:1;min-width:0;width:0;height:32px;margin:0;accent-color:var(--accent,#8085ff)}.chat-audio-volume-value{min-width:42px;text-align:right;font-size:12px;color:var(--muted)}.chat-audio:not(.chat-audio-ready)>.chat-audio-volume{display:none}.message .chat-audio .chat-audio-mute{width:36px;min-width:36px;height:36px;min-height:36px;padding:7px}

/* Avatar crop: pointer dragging and accessible sliders share the same bounded crop. */
.avatar-crop-editor{min-width:0}.avatar-crop-editor>p{color:var(--muted);line-height:1.5}.avatar-crop-editor canvas{display:block;width:min(100%,280px);height:auto;aspect-ratio:1;margin:16px auto;border-radius:50%;outline:2px solid var(--border);touch-action:none;cursor:grab;background:var(--bg)}.avatar-crop-editor canvas:active{cursor:grabbing}.avatar-crop-control{display:grid;gap:4px;margin:8px 0;font-size:14px}.avatar-crop-control>span{display:flex;justify-content:space-between;gap:12px}.avatar-crop-control input{width:100%;min-width:0;min-height:36px;accent-color:var(--accent)}.avatar-crop-note{font-size:14px}.avatar-crop-editor .modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.avatar-crop-editor .modal-actions button{flex:1;min-height:44px}.avatar-crop-editor #avatarCropReset{width:100%;min-height:44px}
@media(max-width:480px){.avatar-crop-editor canvas{width:min(100%,220px);margin:12px auto}.avatar-crop-editor>p{font-size:14px}.avatar-crop-editor .modal-actions button{flex-basis:100%}}