/* ==========================================================================
   Виджет заметок наблюдателя (баги/идеи с витрины).
   Подключается на всех публичных страницах. Показывается только вошедшему
   наблюдателю/разработчику (управляется notes-widget.js). Намеренно ЯРКИЙ
   (градиент индиго→фуксия), чтобы контрастировать со сдержанным брендом.
   ========================================================================== */
:root{
  --nw-grad:linear-gradient(135deg,#6d5efc 0%,#e94ec2 100%);
  --nw-a1:#6d5efc; --nw-a2:#e94ec2;
}
.nw-hidden{display:none !important}

/* ── Плашка (свёрнута) ──
   Опущена на 15% высоты экрана (15vh), чтобы не перекрывать шапку витрины:
   логотип, меню, бургер (#fullmenu top:54px) и переключатель языка RU|EN. */
.nw-badge{position:fixed;top:15vh;right:18px;z-index:99998;
  display:flex;align-items:center;gap:9px;padding:7px 13px 7px 7px;
  background:var(--nw-grad);color:#fff;border:none;border-radius:999px;cursor:pointer;
  box-shadow:0 8px 24px rgba(109,94,252,.45);
  font-family:"Inter",system-ui,sans-serif;
  transition:transform .15s ease,box-shadow .15s ease}
.nw-badge:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(233,78,194,.5)}
.nw-badge .nw-ava{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.25);
  display:grid;place-items:center;font-weight:700;font-size:14px}
.nw-badge .nw-who{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.nw-badge .nw-who b{font-size:14px;font-weight:600}
.nw-badge .nw-who span{font-size:10px;opacity:.85;letter-spacing:.04em;text-transform:uppercase}
.nw-badge .nw-plus{margin-left:2px;width:24px;height:24px;border-radius:50%;
  background:rgba(255,255,255,.2);display:grid;place-items:center;font-size:17px}
.nw-badge .nw-dot{position:absolute;top:-3px;right:-3px;width:11px;height:11px;border-radius:50%;
  background:#ffd23f;border:2px solid #fff;animation:nw-pulse 2s infinite}
@keyframes nw-pulse{0%{box-shadow:0 0 0 0 rgba(255,210,63,.6)}70%{box-shadow:0 0 0 9px rgba(255,210,63,0)}100%{box-shadow:0 0 0 0 rgba(255,210,63,0)}}

/* ── Затемнение + редактор ── */
.nw-overlay{position:fixed;inset:0;z-index:99999;background:rgba(20,18,30,.45);
  display:flex;align-items:flex-start;justify-content:flex-end;padding:14px}
.nw-pop{width:390px;max-width:100%;background:#fff;border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.28);overflow:hidden;
  font-family:"Inter",system-ui,sans-serif;color:#1a1a1a;
  animation:nw-in .18s ease}
@keyframes nw-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.nw-pop__head{background:var(--nw-grad);color:#fff;padding:15px 18px;position:relative}
.nw-pop__head h3{font-size:15px;font-weight:600;margin:0;padding-right:24px}
.nw-pop__head .nw-close{position:absolute;top:12px;right:14px;background:none;border:none;
  color:#fff;font-size:20px;cursor:pointer;line-height:1;opacity:.9}
.nw-pop__head .nw-page{margin-top:7px;font-size:11px;opacity:.92;
  background:rgba(255,255,255,.16);padding:4px 8px;border-radius:6px;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nw-pop__body{padding:15px 18px}
.nw-fld{margin-bottom:13px}
.nw-fld label{display:block;font-size:12px;font-weight:600;margin-bottom:5px;color:#333}
.nw-fld label i{color:var(--nw-a2);font-style:normal}
.nw-fld label .nw-opt{font-weight:500;color:#9a9a9a;font-size:11px}
.nw-fld input[type=text],.nw-fld textarea{width:100%;border:1px solid #dfe0e4;border-radius:10px;
  padding:10px 12px;font-family:inherit;font-size:14px;color:#1a1a1a;background:#fbfbfc;
  transition:border-color .15s,box-shadow .15s}
.nw-fld input[type=text]:focus,.nw-fld textarea:focus{outline:none;border-color:var(--nw-a1);
  box-shadow:0 0 0 3px rgba(109,94,252,.15);background:#fff}
.nw-fld textarea{resize:vertical;min-height:80px}
.nw-drop{border:1.5px dashed #cfd0d6;border-radius:12px;padding:16px;text-align:center;
  color:#8a8a92;cursor:pointer;background:#fbfbfc;font-size:13px;transition:.15s}
.nw-drop:hover,.nw-drop.nw-over{border-color:var(--nw-a2);color:var(--nw-a2);background:#fff}
.nw-drop b{display:block;font-size:20px;margin-bottom:4px}
.nw-thumb-wrap{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.nw-thumb{display:flex;align-items:center;gap:10px;background:#f6f6f8;
  border-radius:10px;padding:8px 10px}
.nw-thumb img{width:44px;height:44px;object-fit:cover;border-radius:8px}
.nw-thumb .nw-nm{font-size:12px;color:#555;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nw-thumb .nw-rm{color:#c33;cursor:pointer;font-size:16px;background:none;border:none}
.nw-hint{font-size:11px;color:#9a9a9a;margin-top:2px}
.nw-err{background:#fdecec;color:#b42318;border-radius:8px;padding:8px 10px;font-size:12px;margin-top:10px}
.nw-foot{padding:12px 18px 16px;display:flex;gap:10px}
.nw-btn{border:none;border-radius:10px;padding:11px 16px;font-family:inherit;font-size:14px;
  font-weight:600;cursor:pointer}
.nw-btn-send{flex:1;background:var(--nw-grad);color:#fff;box-shadow:0 6px 18px rgba(109,94,252,.35)}
.nw-btn-send:disabled{opacity:.6;cursor:default}
.nw-btn-ghost{background:transparent;color:#777}
.nw-logout{display:block;text-align:center;font-size:11px;color:#9a9a9a;
  text-decoration:none;padding:0 0 12px}

/* ── Тост ── */
.nw-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);
  z-index:100000;background:#111;color:#fff;padding:12px 20px;border-radius:12px;
  font-family:"Inter",system-ui,sans-serif;font-size:14px;opacity:0;
  transition:opacity .25s,transform .25s;box-shadow:0 12px 30px rgba(0,0,0,.3)}
.nw-toast.nw-show{opacity:1;transform:translateX(-50%) translateY(0)}
.nw-toast.nw-ok{background:linear-gradient(135deg,#12b76a,#059669)}
.nw-toast.nw-bad{background:linear-gradient(135deg,#e94ec2,#b42318)}

@media(max-width:480px){
  .nw-overlay{padding:10px}
  .nw-pop{width:100%}
  .nw-badge .nw-who span{display:none}
}
