/* ui-fixes.css — button animations + layout fixes for tabs, games and the link generator. */
:root{--ease-out:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1);--meow-accent:#d4f36b;--meow-ok:#7ee787;--meow-warn:#f0a35e}

/* ---------- every button: smooth state changes, tactile press, clear keyboard focus ---------- */
button,.proxy-footer a,.link-result a{transition:transform .2s var(--ease-out),background-color .2s var(--ease-out),border-color .2s var(--ease-out),color .2s var(--ease-out),box-shadow .25s var(--ease-out),opacity .2s,filter .2s}
:where(button:not(:disabled)):active{transform:scale(.96)}
:where(button):disabled{cursor:not-allowed;opacity:.55}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--meow-accent);outline-offset:3px}

/* home shortcuts + middle actions: lift, icon pop */
.app-shortcut,.middle-action{transition:transform .28s var(--spring),background-color .2s,border-color .2s,color .2s}
.app-shortcut:hover,.middle-action:hover{transform:translateY(-4px)}
.app-shortcut:active,.middle-action:active{transform:translateY(-1px) scale(.95)}
.app-icon{transition:transform .35s var(--spring),box-shadow .3s var(--ease-out)}
.app-shortcut:hover .app-icon,.middle-action:hover .app-icon{transform:scale(1.14) rotate(-6deg);box-shadow:inset 0 1px #ffffff55,0 5px 10px #0008}
.add-shortcut{transition:transform .35s var(--spring),background-color .2s,border-color .2s,color .2s}
.add-shortcut:hover{transform:rotate(90deg) scale(1.1)}
.add-shortcut:active{transform:rotate(90deg) scale(.92)}

/* primary + utility buttons */
.primary:not(:disabled):hover,.composer button:not(:disabled):hover{transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 10px 26px #d4f36b30}
.primary:not(:disabled):active,.composer button:not(:disabled):active{transform:translateY(0) scale(.97);box-shadow:none}
.primary span{display:inline-block;transition:transform .25s var(--spring)}
.primary:hover span{transform:translate(3px,-3px)}
.alt-shortcuts button:hover{transform:translateY(-2px);border-color:#ffffff40;background:#1b1b1b;color:#fff}
.alt-nav button:hover{transform:translateX(4px)}
.alt-tabs-head button:hover,.proxy-footer button:hover{color:#fff}
.layout-options button:hover{transform:translateY(-3px);box-shadow:0 14px 34px #0007}
.account-control:hover{transform:translateY(-1px);border-color:#ffffff45;box-shadow:0 8px 22px #0006}
.dialog-close{transition:transform .3s var(--spring),color .2s}
.dialog-close:hover{transform:rotate(90deg);color:#fff}
.settings-actions button:hover{transform:translateY(-2px)}
.new-chat:hover{transform:translateX(3px)}
.horizontal-tab>button:hover,.new-horizontal-tab:hover{color:#fff}
.new-horizontal-tab:hover{transform:translateY(-1px)}

/* click ripple (positioned by ui-fixes.js via --rx/--ry/--rd) */
.app-shortcut,.middle-action,.primary,.alt-shortcuts button,.alt-nav button,.layout-options button,.settings-actions button,.game-card,.new-chat,.composer button,.link-copy,.conversation{position:relative;overflow:hidden;isolation:isolate}
.rippling::after{content:"";position:absolute;z-index:-1;left:var(--rx);top:var(--ry);width:var(--rd);height:var(--rd);margin:calc(var(--rd) / -2) 0 0 calc(var(--rd) / -2);border-radius:50%;background:currentColor;opacity:.22;transform:scale(0);pointer-events:none;animation:meow-ripple .6s var(--ease-out) forwards}
@keyframes meow-ripple{to{transform:scale(1);opacity:0}}

/* entrance: home shortcuts pop in one after another; new tabs slide in; dialogs ease in */
@keyframes meow-pop{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}
.app-shortcuts>*{animation:meow-pop .5s var(--ease-out) both}
.app-shortcuts>*:nth-child(1){animation-delay:.05s}.app-shortcuts>*:nth-child(2){animation-delay:.1s}.app-shortcuts>*:nth-child(3){animation-delay:.15s}.app-shortcuts>*:nth-child(4){animation-delay:.2s}.app-shortcuts>*:nth-child(5){animation-delay:.25s}.app-shortcuts>*:nth-child(6){animation-delay:.3s}.app-shortcuts>*:nth-child(n+7){animation-delay:.35s}
.alt-tab,.horizontal-tab{animation:meow-pop .28s var(--ease-out) both}
dialog[open]{animation:meow-dialog .26s var(--ease-out)}
dialog[open]::backdrop{animation:meow-fade .26s var(--ease-out)}
@keyframes meow-dialog{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes meow-fade{from{opacity:0}to{opacity:1}}

/* ---------- status pill (now a real button) ---------- */
.proxy-connected{cursor:pointer;display:inline-flex;align-items:center}
.proxy-connected:hover{color:#eee;border-color:#ffffff40;transform:translateY(-1px)}
.proxy-connected .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.proxy-connected[data-state="on"] .status-dot{background:var(--meow-ok);animation:meow-pulse 2.2s ease-out infinite}
.proxy-connected[data-state="off"] .status-dot{background:var(--meow-warn)}
.proxy-connected[data-state="checking"] .status-dot{background:#777;animation:meow-blink 1s ease-in-out infinite}
@keyframes meow-pulse{0%{box-shadow:0 0 0 0 #7ee78770}70%{box-shadow:0 0 0 8px #7ee78700}100%{box-shadow:0 0 0 0 #7ee78700}}
@keyframes meow-blink{50%{opacity:.35}}

/* ---------- tabs ---------- */
#proxyFrameHost iframe[hidden]{display:none}
body:not(.browsing) #proxyFrameHost{display:none}
.alt-tab{cursor:pointer}
.alt-tab:not(.active){background:#ffffff08;color:#aaa}
.alt-tab:not(.active):hover{background:#ffffff12;color:#fff}
.alt-tab span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.horizontal-tab>button:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
/* horizontal layout: keep the tab bar visible while other tabs are open, even on the start page */
body.layout-horizontal.has-tabs .horizontal-shell{display:flex;position:fixed;inset:0 0 auto 0;height:40px;z-index:6;flex-direction:column;background:#0b0d0eb8;border-bottom:1px solid #ffffff20;box-shadow:0 12px 36px #0005;backdrop-filter:blur(24px) saturate(125%);-webkit-backdrop-filter:blur(24px) saturate(125%)}
body.layout-horizontal.has-tabs:not(.browsing) .proxy-home{padding-top:64px}
body.layout-horizontal.has-tabs .view:not(.proxy-home){padding-top:96px}
/* vertical layout: pages other than Home sit beside the sidebar instead of under it */
body.layout-vertical main .view:not(.proxy-home){margin-left:240px;max-width:calc(100% - 240px)}
@media(max-width:800px){body.layout-vertical main .view:not(.proxy-home){margin-left:58px;max-width:calc(100% - 58px)}}

/* settings: transports that are not installed */
#settingsDialog label.is-disabled{opacity:.45;cursor:not-allowed}

/* ---------- games ---------- */
.games-search{display:flex;align-items:center;gap:10px;max-width:520px;border:1px solid #ffffff1c;background:#ffffff08;border-radius:999px;padding:10px 16px;margin:-20px 0 28px;transition:border-color .2s}
.games-search:focus-within{border-color:#ffffff55}
.games-search input{color:#eee}
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.game-card{display:flex;flex-direction:column;gap:10px;padding:10px;border:1px solid #ffffff14;border-radius:12px;background:#ffffff06;color:#ccc;text-align:left;animation:meow-pop .4s var(--ease-out) both;animation-delay:calc(var(--i,0) * 22ms);transition:transform .28s var(--spring),border-color .2s,background-color .2s,box-shadow .3s}
.game-card:hover{transform:translateY(-5px);border-color:#ffffff40;background:#ffffff0d;box-shadow:0 16px 34px #0008;color:#fff}
.game-card:active{transform:translateY(-1px) scale(.97)}
.game-cover{display:grid;place-items:center;aspect-ratio:16/10;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#1d1f1d,#121312);color:#777;font:700 28px var(--sans,system-ui)}
.game-cover img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease-out)}
.game-card:hover .game-cover img{transform:scale(1.07)}
.game-title{font-size:13px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.empty-note{color:#888;font-size:13px;margin:10px 0}

/* ---------- link generator + chat history ---------- */
.link-result{display:grid;gap:8px;padding:14px;border:1px solid #ffffff1c;border-radius:8px;background:#ffffff06;animation:meow-pop .3s var(--ease-out) both}
.link-result a{color:var(--meow-accent);overflow-wrap:anywhere;font:12px var(--mono,monospace)}
.link-result small,.link-result p{color:#999;font-size:12px;margin:0}
.link-copy{justify-self:start;border:1px solid #ffffff2a;background:#ffffff0a;color:#eee;border-radius:6px;padding:7px 12px;font-size:12px}
.link-copy:hover{transform:translateY(-1px);border-color:#ffffff55}
.chat-sidebar .conversation{display:block;width:100%;border:0;background:none;text-align:left;cursor:pointer;color:inherit;font:inherit}
.chat-sidebar .conversation:hover{transform:translateX(3px)}

/* ---------- respect reduced-motion preferences ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .app-shortcut:hover,.middle-action:hover,.game-card:hover{transform:none}
}