/* ClipSync clipboard.css — бейдж обмена, чип превью, dual-overlay,
   контекстные блоки (.ctx) и панель ручного ввода (.manual). */

/* ── Бейдж обмена ── */
.swap-badge {
  position: absolute; top: -6px; right: -6px;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  color: var(--text); cursor: pointer;
  opacity: 0; transform: scale(.6); pointer-events: none;
  transition: opacity .25s, transform .25s, border-color .2s, box-shadow .2s;
  z-index: 5;
}
.swap-badge.visible { opacity: 1; transform: scale(1); pointer-events: auto; animation: badge-pulse 2.2s infinite; }
.swap-badge:hover { border-color: var(--accent); box-shadow: 0 0 18px rgba(91,156,246,.5); }
.swap-badge:active { transform: scale(.92); }
.swap-badge .num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; font-weight: 800;
  color: rgba(255,255,255,.3);
  pointer-events: none; z-index: 0;
  line-height: 1;
  text-shadow: 0 0 10px rgba(255,255,255,.05);
}
.swap-badge svg { position: relative; z-index: 1; }
.swap-badge.swap-anim { animation: swap-flash .65s ease; }
.swap-badge.swap-anim svg { animation: swap-spin .65s cubic-bezier(.34,1.56,.64,1); }
@keyframes badge-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(91,156,246,.45); } 50% { box-shadow: 0 0 0 8px rgba(91,156,246,0); } }
@keyframes swap-spin  { from{transform:rotate(0);} to{transform:rotate(360deg);} }
@keyframes swap-flash { 0% { box-shadow: 0 0 0 0 rgba(91,156,246,.75); border-color: var(--accent); } 100% { box-shadow: 0 0 0 16px rgba(91,156,246,0); border-color: var(--border2); } }

/* ── Чип превью ── */
.preview-chip {
  position: absolute; top: 50px; right: -10px;
  min-width: 96px; max-width: 170px;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 8px;
  padding: 5px 10px; font-size: 11px; color: var(--text);
  overflow: hidden; z-index: 6;
  opacity: 0; transform: translateX(16px) scale(.92);
  transition: opacity .25s, transform .25s, max-width .4s, max-height .4s, top .4s, right .4s, width .4s;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  cursor: pointer; pointer-events: auto;
  max-height: 72px;
}
.preview-chip.visible { opacity: 1; transform: translateX(0) scale(1); }
.preview-chip .chip-label { display: block; font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-bottom: 1px; }
.preview-chip .chip-content {
  overflow: hidden; flex: 1; transition: max-height .3s;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  max-height: 40px; line-height: 1.4;
}
.preview-chip .chip-empty { color: var(--muted); font-style: italic; }
/* Баг аудита v2.0.7 п.7: раньше анимация целилась в несуществующий .chip-inner
   (остаток от prototype.html) и никогда не воспроизводилась. Исправлено —
   цель .chip-content, как в prototype_v2.html. */
.preview-chip.slide-out .chip-content { animation: slide-out .18s forwards; }
.preview-chip.slide-in  .chip-content { animation: slide-in  .22s forwards; }
@keyframes slide-out { to { transform: translateX(-115%); opacity: 0; } }
@keyframes slide-in  { from { transform: translateX(115%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Dual-expand overlay (Резерв + Сервер, во время активного обмена) ── */
.chip-dual-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,8,10,.82);
  display: none;
  flex-direction: column;
  padding: 24px; gap: 16px;
  opacity: 0; transition: opacity .22s;
}
.chip-dual-overlay.visible { display: flex; opacity: 1; }
.chip-dual-panel {
  flex: 1; min-height: 0;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 10px;
  display: flex; flex-direction: column;
  padding: 14px 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.chip-dual-panel .chip-panel-label {
  flex: none; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.chip-dual-panel .chip-panel-label svg { width: 14px; height: 14px; }
.chip-dual-panel .chip-panel-content {
  flex: 1; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
  font-size: 13px; line-height: 1.5; color: var(--text);
}
.chip-dual-panel .chip-panel-content.chip-empty { color: var(--muted); font-style: italic; }

/* ── Контекстные блоки ── */
.ctx { width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 10px; }
.ctx.hidden { display: none; }

.manual { width: 100%; max-width: 520px; background: var(--surface); border: 1px dashed var(--border2); border-radius: 10px; overflow: hidden; }
.manual-head { padding: 8px 12px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--border); }
.manual textarea { width: 100%; min-height: 70px; background: #0a0a0c; border: none; color: var(--text); font-family: var(--font); font-size: 13px; padding: 12px; resize: vertical; outline: none; border-bottom: 1px solid var(--border); }
.manual-foot { padding: 10px 12px; display: flex; gap: 10px; align-items: center; }
.file-label { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--border2); border-radius: 6px; font-size: 11px; text-transform: uppercase; color: var(--muted); cursor: pointer; }
.file-label:hover { border-color: var(--accent2); color: var(--accent2); }

.swap-badge { top:-8px; right:-8px; width:44px; height:44px; background:var(--surface2); z-index:8; } .swap-badge .num{position:absolute;bottom:-3px;right:-3px;inset:auto;min-width:16px;height:16px;border-radius:8px;background:var(--violet);color:#0a0b0f;font-size:9px;font-weight:700;padding:0 3px;box-shadow:0 0 0 2px var(--surface2);z-index:2}.swap-badge .num:empty{display:none}
.preview-chip { top:56px; right:-14px; min-width:100px; max-width:180px; background:var(--surface2); border:1px solid var(--border2); border-left:3px solid var(--teal); border-radius:0 10px 10px 10px; padding:6px 12px; max-height:74px; }
.preview-chip .chip-label{display:flex;align-items:center;gap:4px}.preview-chip .chip-label::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--teal);box-shadow:0 0 6px var(--teal)}

.chip-dual-overlay { background:rgba(5,6,10,0); backdrop-filter:blur(0); align-items:center; justify-content:center; padding:24px; transition:background .28s,backdrop-filter .28s; }.chip-dual-overlay.visible{display:flex;background:rgba(5,6,10,.78);backdrop-filter:blur(2px)}.chip-dual-stack{display:flex;flex-direction:column;gap:14px;width:min(560px,92vw);max-height:88vh;opacity:0;transform:scale(.92) translateY(10px);transition:opacity .26s,transform .26s}.chip-dual-overlay.visible .chip-dual-stack{opacity:1;transform:scale(1)}.chip-dual-overlay.closing .chip-dual-stack{opacity:0;transform:scale(.94) translateY(6px)}.chip-dual-panel{max-height:40vh;min-height:120px;padding:0;border-radius:12px}.chip-panel-label{padding:12px 16px 6px;margin:0}.chip-panel-content{padding:0 16px 16px}.chip-dual-panel.is-reserve .chip-panel-label{color:var(--violet)}.chip-dual-panel.is-server .chip-panel-label{color:var(--teal)}
.ctx.hidden{display:none}.manual{background:var(--surface2)}