/* Linky — shortener linków. Ten sam język wizualny co Bandit Control:
   panele z --surface, nagłówki Barlow Condensed, telemetry z tabular-nums.
   Motyw czereśni: pixelowa czereśnia jako bohater stanu pustego i pieczęci
   "Live now". Wszystkie animacje ustępują przy prefers-reduced-motion. */

.feature-view:has(.linkly:not([hidden])) .feature-canvas{border-top:0;min-height:0}
.linkly{padding-bottom:8px;container-type:inline-size;container-name:linkly}
.linkly-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.linkly-panel{border:1px solid var(--line);border-radius:5px;background:var(--surface);overflow:hidden}
.linkly-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line-quiet)}
.linkly-panel-heading h2{font:700 22px/1.2 var(--display);letter-spacing:-.01em}
.linkly-refresh{gap:8px;padding:9px 14px;white-space:nowrap}

/* Pieczęć "Live now" — świeżo skrócony link wskakuje z podskokiem czereśni.
   Przejścia kolorów/tła trzymają oba stany (fancy / cichy) w jednej płynnej
   przemianie. */
.linkly-result{display:flex;align-items:center;gap:16px;padding:18px 24px;border-bottom:1px solid var(--line-quiet);background:linear-gradient(90deg,#3a202a,#241319 70%);transition:background .35s var(--ease),padding .35s var(--ease)}
.linkly-result.is-new{animation:linkly-pop .5s var(--ease) both}
@keyframes linkly-pop{from{opacity:0;transform:translateY(12px) scale(.96);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.linkly-result .linkly-cherry{width:36px;height:36px;flex-shrink:0;transition:width .35s var(--ease),height .35s var(--ease),opacity .35s}
.linkly-result.is-new .linkly-cherry{animation:linkly-bounce .75s var(--ease) .1s both}
@keyframes linkly-bounce{0%{opacity:0;transform:translateY(-12px) scale(.4) rotate(-8deg)}45%{opacity:1;transform:translateY(3px) scale(1.12) rotate(3deg)}72%{transform:translateY(-1px) scale(.97) rotate(-1deg)}100%{opacity:1;transform:none}}
.linkly-result-body{min-width:0}
.linkly-result-label{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.linkly-result-row{display:flex;align-items:center;gap:10px;margin-top:3px;transition:margin-top .35s var(--ease)}
.linkly-result-url{font:600 16px/1.4 ui-monospace,'Cascadia Mono',Consolas,monospace;color:var(--accent);overflow-wrap:anywhere;transition:color .35s,font-size .35s var(--ease),font-weight .35s}
/* Już skrócony — ta sama pieczęć, tylko bez rozgłosu. */
.linkly-result.is-quiet{background:transparent;padding:13px 24px}
.linkly-result.is-quiet .linkly-cherry{width:20px;height:20px;opacity:.5}
.linkly-result.is-quiet .linkly-result-label{font-size:10px}
.linkly-result.is-quiet .linkly-result-url{color:var(--muted);font-size:14px;font-weight:500}
.linkly-result.is-quiet .linkly-result-row{margin-top:1px}

/* Lista linków. Wiersz zwija się do 0fr przy usuwaniu — lista pod spodem
   zsuwa się płynnie zamiast podskakiwać. Wejście tylko dla nowych wierszy
   (klasę 'is-fresh' dodaje JS, raz na dany id). */
.linkly-list{list-style:none;margin:0;padding:0}
.linkly-row{display:grid;grid-template-rows:1fr;transition:grid-template-rows .34s var(--ease),opacity .26s ease}
.linkly-row-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:0;overflow:hidden;padding:14px 24px;border-bottom:1px solid var(--line-quiet);transition:background .16s,padding .34s var(--ease),border-bottom-color .34s}
.linkly-row:hover .linkly-row-inner{background:#2a1820}
.linkly-row-inner.is-fresh{animation:linkly-row-in .42s var(--ease) both}
@keyframes linkly-row-in{from{opacity:0;transform:translateY(10px);filter:blur(3px)}to{opacity:1;transform:none;filter:blur(0)}}
.linkly-row.is-leaving{grid-template-rows:0fr;opacity:0;pointer-events:none}
.linkly-row.is-leaving .linkly-row-inner{padding-top:0;padding-bottom:0;border-bottom-color:transparent}
.linkly-row.is-pulse .linkly-row-inner{animation:linkly-row-pulse 1.2s var(--ease)}
@keyframes linkly-row-pulse{0%,100%{background:transparent}35%{background:#3a202a}}
.linkly-row-lead{display:flex;align-items:center;gap:8px}
.linkly-code{font:600 13px/1 ui-monospace,'Cascadia Mono',Consolas,monospace;color:var(--accent);border:1px solid var(--line);border-radius:3px;padding:8px 11px;background:var(--ground);transition:border-color .16s,color .16s,transform .16s var(--ease)}
.linkly-code:hover{border-color:var(--accent);color:var(--accent-hover);transform:translateY(-1px)}
.linkly-code:active{transform:translateY(0) scale(.97)}
.linkly-copy,.linkly-delete{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid transparent;border-radius:3px;background:transparent;color:var(--muted);transition:background .15s,color .15s,border-color .15s}
.linkly-copy:hover,.linkly-delete:hover{background:var(--surface-raised);border-color:var(--line);color:var(--ink)}
.linkly-copy.is-copied{color:var(--success)}
.linkly-copy.is-copied .icon{animation:linkly-tick .32s var(--ease)}
@keyframes linkly-tick{0%{transform:scale(.5)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.linkly-delete:hover{color:var(--error)}
.linkly-row-target{min-width:0}
.linkly-target-url{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink);min-width:0}
.linkly-target-text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.linkly-target-url>.icon{flex-shrink:0;color:var(--muted);transition:color .15s,transform .15s var(--ease)}
.linkly-target-url:hover{color:var(--accent-hover)}
.linkly-target-url:hover>.icon{color:var(--accent);transform:translate(1px,-1px)}
.linkly-note{font-size:12px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.linkly-row-meta{display:flex;align-items:center;gap:16px}
.linkly-hits{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.linkly-hits strong{color:var(--ink);font-size:14px}
.linkly-date{font-size:12px;color:var(--muted);white-space:nowrap}

/* Stan pusty — czereśnia kołysze się leniwie. */
.linkly-empty{display:flex;flex-direction:column;align-items:center;gap:4px;padding:56px 24px 64px;color:var(--ink);text-align:center}
.linkly-empty .linkly-cherry{width:58px;height:58px;margin-bottom:12px;animation:linkly-sway 5.5s ease-in-out infinite}
@keyframes linkly-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
.linkly-empty p{font-size:14px}
.linkly-empty-hint{color:var(--muted);font-size:13px!important}

/* Kompozytor. */
.linkly-form{padding:20px 24px 4px}
.linkly-form .field:last-of-type{margin-bottom:16px}
.linkly-toggle{display:flex;align-items:center;gap:8px;background:transparent;border:0;padding:0 0 6px;font-size:12px;color:var(--muted);transition:color .15s}
.linkly-toggle:hover{color:var(--ink)}
.linkly-toggle-chevron{transition:transform .26s var(--ease)}
.linkly-toggle[aria-expanded='true'] .linkly-toggle-chevron{transform:rotate(180deg)}
.linkly-custom-block{display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.linkly-custom-block.is-open{grid-template-rows:1fr}
.linkly-custom-inner{overflow:hidden;min-height:0}
.linkly-custom-block.is-open .linkly-custom-inner{padding-top:10px}
.linkly-code-field{display:flex;align-items:center;border:1px solid var(--line);background:var(--ground);border-radius:3px;transition:border-color .15s}
.linkly-code-field:focus-within{border-color:#795363}
.linkly-code-prefix{padding-left:13px;font:13px/1 ui-monospace,'Cascadia Mono',Consolas,monospace;color:var(--muted);white-space:nowrap}
.linkly-code-field input{border:0;background:transparent;padding-left:2px}
.linkly-code-field input:focus-visible{outline-offset:-2px}
.linkly-optional{color:var(--muted);font-weight:400}
.linkly-form .form-message:not(:empty){margin:10px 0 0}
.linkly-form .button{margin-bottom:16px}

/* Stopka zużycia — jedna spokojna linia + pasek limitu zamiast trzech kratek. */
.linkly-usage{border-top:1px solid var(--line-quiet);padding:16px 24px 18px;display:flex;flex-direction:column;gap:11px}
.linkly-usage-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px;font-size:12px;color:var(--muted)}
.linkly-usage-head strong{color:var(--ink);font-size:14px;font-variant-numeric:tabular-nums;font-weight:700}
.linkly-usage-dot{color:var(--line)}
.linkly-usage-bar{height:3px;border-radius:2px;background:var(--line-quiet);overflow:hidden}
.linkly-usage-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--accent);transition:width .6s var(--ease),background .3s}
.linkly-usage-bar i.is-full{background:var(--accent-hover)}

@container linkly (min-width:900px){.linkly-layout{grid-template-columns:minmax(0,1fr) 380px}}
@media(max-width:700px){
  .linkly-panel-heading{padding:14px 16px}
  .linkly-panel-heading h2{font-size:22px}
  .linkly-form{padding:16px 16px 2px}
  .linkly-result{padding:15px 16px}
  .linkly-row-inner{grid-template-columns:auto minmax(0,1fr);grid-template-areas:'lead meta' 'target target';row-gap:8px;padding:13px 16px}
  .linkly-row-lead{grid-area:lead}
  .linkly-row-target{grid-area:target}
  .linkly-row-meta{grid-area:meta;justify-self:end;gap:10px}
  .linkly-date{display:none}
  .linkly-usage{padding:14px 16px 16px}
}
@media(prefers-reduced-motion:reduce){
  .linkly-result.is-new,.linkly-result.is-new .linkly-cherry,.linkly-row-inner.is-fresh,.linkly-row.is-pulse .linkly-row-inner,.linkly-copy.is-copied .icon,.linkly-empty .linkly-cherry{animation:none}
  .linkly-row,.linkly-row-inner,.linkly-result,.linkly-result .linkly-cherry,.linkly-result-url,.linkly-result-row{transition:none}
  .linkly-custom-block,.linkly-toggle-chevron,.linkly-code,.linkly-target-url>.icon,.linkly-usage-bar i{transition:none}
}

/* QR dialog — cherry card, light QR plate for scannability */
.linkly-qr-dialog{width:min(360px,calc(100vw - 40px));padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.linkly-qr-dialog::backdrop{background:rgba(10,5,8,.62)}
.linkly-qr-dialog .dialog-heading{border-radius:7px 7px 0 0}
.linkly-qr-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
.linkly-qr-frame{align-self:center;width:252px;height:252px;padding:14px;background:#f2e8e6;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(25,13,18,.08)}
.linkly-qr-frame svg{display:block;width:100%;height:100%}
.linkly-qr-url{text-align:center;font:600 13px/1.3 ui-monospace,'Cascadia Mono',Consolas,monospace;color:var(--accent);word-break:break-all;margin:0}
.linkly-qr-actions{display:flex;gap:10px}
.linkly-qr-actions .button{flex:1;justify-content:center}

/* expiry + password row, and the small state chips in link rows */
.linkly-flags{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media(max-width:560px){.linkly-flags{grid-template-columns:1fr}}
.linkly-flag{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border:1px solid var(--line-quiet);border-radius:3px;color:var(--muted);font:600 10px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.linkly-flag .icon{width:11px;height:11px}