/* Перетаскивание и вставка файлов в чертог: подсказка над окном и окно файлов.
   Вид 01.10.2026 — по образцу окна файлов Telegram, «кругляшочки» Лираз:
   компактная карточка, круглые крестик и «Еще», плитка файла с кольцом хода,
   поле подписи пилюлей и круглая золотая кнопка отправки (синий Telegram —
   не наш цвет, у нас золото).
   Цвета только из опор; без :has() и color-mix() — старые андроиды общины
   (Chromium 99) отбросили бы правило целиком; vh стоит раньше dvh по той же
   причине. Затемнение под окном — тенью самого окна, а не ::backdrop: до
   Chromium 122 ::backdrop не видит опор :root, и на старых телефонах
   затемнения не было бы вовсе. */

/* ---------- подсказка, пока файл несут над окном ---------- */
/* Все окно тускнеет (02.10.2026, по образцу Telegram): завеса на странице
   опорой --scrim поверх плавающих полос (музыка 96, голосовое, Офан) и под
   листами и окнами. Рамка и надпись — на месте чертога (место и размер
   ставит модуль). Мимо мыши: перенос видят те же места страницы. */
.chat-drop-overlay{display:none}
.chat-drop-overlay.is-on{display:block;position:fixed;top:0;right:0;bottom:0;left:0;z-index:99;background:var(--scrim);pointer-events:none}
.chat-drop-zone{position:absolute;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
.chat-drop-zone::before{content:"";position:absolute;top:8px;right:8px;bottom:8px;left:8px;border:2px solid var(--gold);border-radius:18px;box-shadow:0 0 28px rgba(var(--gold-rgb),.32),inset 0 0 28px rgba(var(--gold-rgb),.16)}
.chat-drop-overlay-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;max-width:100%;box-sizing:border-box;padding:24px 28px;border:1px solid var(--glassborder);border-radius:24px;background:radial-gradient(120% 70% at 50% -10%,rgba(var(--gold-rgb),.14),transparent 64%),var(--bg0);color:var(--ink);text-align:center;box-shadow:0 18px 50px rgba(var(--bg0-rgb),.45)}
.chat-drop-emo{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold-text);background:radial-gradient(circle at 30% 28%,rgba(var(--gold-rgb),.22),rgba(var(--violet-rgb),.14) 72%);box-shadow:0 0 26px rgba(var(--gold-rgb),.16)}
.chat-drop-overlay svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chat-drop-emo svg{width:28px;height:28px}
.chat-drop-overlay-title{font-size:calc(19px * var(--fs,1));font-weight:700}
.chat-drop-overlay-room{font-size:calc(14px * var(--fs,1));font-weight:600;color:var(--gold-text);overflow-wrap:anywhere}

/* ---------- окно ---------- */
.chat-drop-dialog{box-sizing:border-box;margin:auto;width:min(440px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:hidden;padding:12px;border:1px solid var(--glassborder);border-radius:24px;background:radial-gradient(120% 60% at 50% -14%,rgba(var(--gold-rgb),.14),transparent 62%),var(--bg0);color:var(--ink);font:inherit;font-family:var(--ui);box-shadow:0 24px 72px rgba(var(--bg0-rgb),.5),0 0 0 200vmax var(--scrim)}
.chat-drop-dialog[open]{display:flex;flex-direction:column}
.chat-drop-dialog::backdrop{background:transparent}
.chat-drop-dialog [hidden]{display:none!important}
.chat-drop-dialog svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.chat-drop-dialog.chat-drop-dialog-over{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 32px rgba(var(--gold-rgb),.32),0 24px 72px rgba(var(--bg0-rgb),.5),0 0 0 200vmax var(--scrim)}
.chat-drop-dialog p{margin:0;overflow-wrap:anywhere}

/* Шапка: крестик · число файлов и чертог · «Еще». Сетка идет по направлению
   письма — на иврите крестик сам встает справа. */
.chat-drop-head{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px;margin:0 0 10px}
.chat-drop-heading{min-width:0;text-align:center}
.chat-drop-title{margin:0;font-size:calc(17px * var(--fs,1));font-weight:700;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-drop-dialog .chat-drop-destination{margin-top:2px;font-size:calc(13px * var(--fs,1));font-weight:600;color:var(--gold-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Круглые кнопки: 44 px, стекло, золотой фокус. */
.chat-drop-round{flex:0 0 44px;width:44px;height:44px;min-height:44px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--glassborder);border-radius:50%;background:var(--glass);color:var(--ink-dim);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s ease,background-color .2s ease,color .2s ease}
.chat-drop-round svg{width:20px;height:20px}
.chat-drop-round:active{transform:scale(.9)}
.chat-drop-round:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.chat-drop-round:disabled{opacity:.45;cursor:default;transform:none}
@media (hover:hover){.chat-drop-round:not(:disabled):hover{background:var(--glass2);color:var(--ink)}}

/* Меню «Еще»: стекло, строки 48 px со значком в золотом кружке. */
.chat-drop-menu{position:absolute;top:52px;inset-inline-end:0;z-index:3;width:240px;max-width:calc(100% - 8px);box-sizing:border-box;padding:6px;border:1px solid var(--glassborder);border-radius:20px;background:var(--glassgrad),var(--bg0);box-shadow:0 18px 48px rgba(var(--bg0-rgb),.45)}
.chat-drop-menu-item{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;box-sizing:border-box;padding:4px 8px;border:0;border-radius:16px;background:none;color:var(--ink);font:inherit;font-size:calc(15px * var(--fs,1));text-align:start;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .16s ease,background-color .2s ease}
.chat-drop-menu-item:active{transform:scale(.97);background:var(--glass)}
@media (hover:hover){.chat-drop-menu-item:not(:disabled):hover{background:var(--glass)}}
.chat-drop-menu-item:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.chat-drop-menu-item:disabled{opacity:.5;cursor:default}
.chat-drop-menu-ic{flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(var(--gold-rgb),.14);color:var(--gold-text);box-shadow:inset 0 0 0 1px rgba(var(--gold-rgb),.24)}
.chat-drop-menu-ic svg{width:20px;height:20px}
.chat-drop-dialog .chat-drop-menu-note{margin:6px 8px 4px;font-size:calc(12px * var(--fs,1));color:var(--ink-dim);line-height:1.4}

/* Плитки файлов. Прокручивается только список. */
.chat-drop-list{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;overflow-x:hidden;overflow-y:auto}
.chat-drop-item{display:flex;align-items:center;gap:12px;padding:8px;border:1px solid var(--glassborder);border-radius:18px;background:var(--glass)}
.chat-drop-thumb{position:relative;flex:0 0 64px;width:64px;height:64px;border-radius:14px;overflow:hidden;background:var(--glass2);color:var(--gold-text);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.chat-drop-thumb img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block}
.chat-drop-type{width:24px;height:24px}
.chat-drop-ext{font-size:calc(10px * var(--fs,1));font-weight:700;letter-spacing:.06em;line-height:1}
.chat-drop-veil{position:absolute;top:0;right:0;bottom:0;left:0;display:none;align-items:center;justify-content:center;background:var(--scrim)}
.chat-drop-item[data-state="active"] .chat-drop-veil,.chat-drop-item[data-state="failed"] .chat-drop-veil,.chat-drop-item[data-state="uncertain"] .chat-drop-veil,.chat-drop-item[data-state="done"] .chat-drop-veil{display:flex}
/* Под кольцом или знаком значок типа не просвечивает: на плитке одно. */
.chat-drop-item:not([data-state="idle"]) .chat-drop-type,.chat-drop-item:not([data-state="idle"]) .chat-drop-ext{visibility:hidden}
/* Кружок под кольцом и значком — темный в обеих темах: золото на нем
   читается и поверх светлой плитки, и поверх фото. */
.chat-drop-disc{position:relative;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(var(--bg0-rgb),.62);color:var(--gold)}
.chat-drop-ring{position:absolute;top:0;left:0;width:44px;height:44px}
.chat-drop-ring svg{display:block;width:44px;height:44px;transform:rotate(-90deg)}
.chat-drop-ring-track{stroke:rgba(var(--gold-rgb),.2);stroke-width:3}
.chat-drop-ring-value{stroke:var(--gold);stroke-width:3;transition:stroke-dashoffset .2s linear}
.chat-drop-ring.is-busy svg{animation:chatDropSpin 1.1s linear infinite}
@keyframes chatDropSpin{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
.chat-drop-mark{display:flex;align-items:center;justify-content:center}
.chat-drop-mark svg{width:22px;height:22px}
.chat-drop-info{flex:1 1 auto;min-width:0;text-align:start}
.chat-drop-name{display:block;font-size:calc(14.5px * var(--fs,1));font-weight:600;line-height:1.3;color:var(--ink);white-space:nowrap;overflow:hidden}
.chat-drop-state{display:block;margin-top:3px;font-size:calc(12.5px * var(--fs,1));line-height:1.35;color:var(--ink-dim);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.chat-drop-state[dir="ltr"]{text-align:left}
[dir=rtl] .chat-drop-state[dir="ltr"]{text-align:right}
.chat-drop-item[data-state="failed"] .chat-drop-state,.chat-drop-item[data-state="uncertain"] .chat-drop-state{color:var(--ink)}
.chat-drop-item[data-state="done"] .chat-drop-state,.chat-drop-item.is-retrying .chat-drop-state{color:var(--gold-text)}
.chat-drop-remove{border-color:transparent;background:none}
.chat-drop-dialog.is-sending .chat-drop-remove{visibility:hidden}
.chat-drop-dialog .chat-drop-sr,.chat-drop-dialog .chat-drop-status.chat-drop-echo{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Строки под списком и поле подписи с круглой кнопкой. */
.chat-drop-dialog .chat-drop-note{margin-top:10px;font-size:calc(12.5px * var(--fs,1));color:var(--ink-dim);text-align:center}
.chat-drop-status{font-size:calc(13.5px * var(--fs,1));line-height:1.4;color:var(--ink);text-align:center}
.chat-drop-dialog .chat-drop-status:not(:empty){margin-top:8px}
.chat-drop-status:focus{outline:none}
.chat-drop-compose{display:flex;align-items:flex-end;gap:10px;margin-top:10px}
.chat-drop-caption{flex:1 1 auto;min-width:0;box-sizing:border-box;height:44px;min-height:44px;max-height:var(--composer-max-height,120px);margin:0;padding:11px 16px;resize:none;overflow-y:auto;border:1px solid var(--glassborder);border-radius:22px;background:var(--glass);color:var(--ink);-webkit-text-fill-color:var(--ink);caret-color:var(--gold);font:inherit;font-size:calc(15px * var(--fs,1));line-height:1.4}
.chat-drop-caption::placeholder{color:var(--ink-dim);opacity:1}
.chat-drop-caption:focus{outline:none;border-color:rgba(var(--gold-rgb),.7);box-shadow:0 0 0 1px rgba(var(--gold-rgb),.35)}
.chat-drop-caption:disabled{opacity:.6}
.chat-drop-send{flex:0 0 52px;width:52px;height:52px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:var(--gold-fill);color:var(--on-gold);cursor:pointer;box-shadow:0 6px 18px rgba(var(--gold-rgb),.3);-webkit-tap-highlight-color:transparent;transition:transform .16s ease,opacity .2s ease}
.chat-drop-send svg{width:24px;height:24px;stroke-width:1.8}
.chat-drop-send:active{transform:scale(.92)}
.chat-drop-send:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.chat-drop-send:disabled{opacity:.55;cursor:default;transform:none}
[dir=rtl] .chat-drop-send[data-icon="send"] svg{transform:scaleX(-1)}

/* Узкий экран — лист снизу; прокручивается только список. */
@media (max-width:480px){
  .chat-drop-dialog{width:100%;max-width:100%;margin:auto 0 0;padding:12px 12px calc(14px + var(--safe-b,0px));border-radius:24px 24px 0 0;max-height:92vh;max-height:92dvh}
  .chat-drop-thumb{flex-basis:56px;width:56px;height:56px}
}
/* Меньше движения: без вращения и без плавных переходов; дуга «работаю»
   стоит на месте. */
@media (prefers-reduced-motion:reduce){
  .chat-drop-ring.is-busy svg{animation:none}
  .chat-drop-round,.chat-drop-menu-item,.chat-drop-send,.chat-drop-ring-value{transition:none}
  .chat-drop-round:active,.chat-drop-menu-item:active,.chat-drop-send:active{transform:none}
}