/* waclip — mobile-first terminal/cyberpunk UI. Base = single-column mobile; @media (min-width:768px) = two-pane desktop. */

@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jbm-latin.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/jbm-latin-ext.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;
  --bg:#090b0f; --panel:#0d1117; --line:#1e2530;
  --accent:#00d4ff; --accent2:#7b61ff; --text:#c9d1d9; --muted:#4a5568;
  --bad:#ff4444; --ok:#00ff88; --warn:#ffb000;
  --touch:44px;
  --safe-t:env(safe-area-inset-top,0px); --safe-b:env(safe-area-inset-bottom,0px);
}

* { box-sizing:border-box; border-radius:0 }
html { height:100% }
body {
  margin:0; background:var(--bg); color:var(--text);
  font:13px 'JetBrains Mono',monospace; letter-spacing:.01em;
  display:flex; flex-direction:column;
  height:100vh; height:100dvh; /* dvh where supported; vh fallback */
  overflow:hidden;
}
body:before { content:""; position:fixed; inset:0; pointer-events:none; z-index:10;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.02),rgba(255,255,255,.02) 1px,transparent 1px,transparent 4px); }

button,input,textarea { font:inherit }
button { background:transparent; color:var(--text); border:1px solid var(--line); padding:7px 10px; cursor:pointer; text-transform:uppercase; transition:background .1s,color .1s,border-color .1s; min-height:var(--touch) }
button:hover:not(:disabled) { background:var(--accent); border-color:var(--accent); color:#001018 }
button:disabled { opacity:.35; cursor:not-allowed }
.bad:hover:not(:disabled), .armed { background:var(--bad)!important; border-color:var(--bad)!important; color:#120000!important }
.ok { color:var(--ok)!important; border-color:var(--ok)!important }
.linkBtn { border:0; min-height:34px; padding:4px 0; color:var(--muted); text-align:left }
.linkBtn:hover:not(:disabled) { background:transparent; color:var(--accent) }
input,textarea { width:100%; background:transparent; color:var(--text); border:0; border-bottom:1px solid var(--line); padding:8px 2px; outline:0; caret-color:var(--accent) }
input:focus,textarea:focus { border-bottom-color:var(--accent) }
textarea { min-height:110px; resize:vertical; line-height:1.45 }
.muted { color:var(--muted) } .err { color:var(--bad) }
.hidden { display:none!important }
.row { display:flex; gap:8px; margin:10px 0 }
.row button { flex:1; white-space:nowrap }
.desktopOnly { display:none }

/* ---- auth ---- */
#tokenBox { max-width:520px; width:calc(100% - 24px); margin:16vh auto; padding:18px; background:var(--panel); border:1px solid var(--line) }
#tokenBox h2 { margin:0 0 10px; color:var(--accent); font-size:18px; letter-spacing:.12em }

/* ---- app frame ---- */
#app { flex:1; display:flex; flex-direction:column; min-height:0 }
header { min-height:44px; padding:0 10px; padding-top:var(--safe-t); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:8px; background:var(--panel) }
header h1 { font-size:14px; margin:0; flex:1; color:var(--accent); letter-spacing:.18em; font-weight:700 }
#statsMini { color:var(--muted); font-size:11px; white-space:nowrap }
#sseDot { width:8px; height:8px; border:1px solid var(--muted); flex:none }
#sseDot[data-status="live"] { background:var(--ok); border-color:var(--ok); box-shadow:0 0 6px var(--ok) }
#sseDot[data-status="connecting"] { background:var(--warn); border-color:var(--warn) }
header button { min-height:36px; padding:5px 8px; font-size:12px }
.cursor { animation:blink 1s steps(1,end) infinite }
@keyframes blink { 50% { opacity:0 } }
#offlineBar { background:var(--warn); color:#1a1200; font-size:11px; letter-spacing:.1em; text-align:center; padding:4px 8px }

.wrap { flex:1; min-height:0; display:flex; flex-direction:column }
aside { flex:1; display:flex; flex-direction:column; min-height:0; background:var(--panel) }
.search { padding:6px 10px; border-bottom:1px solid var(--line) }
#list { flex:1; overflow-y:auto; overscroll-behavior:contain; padding-bottom:calc(84px + var(--safe-b)) /* room for FAB */ }
#stats { display:none; border-top:1px solid var(--line); padding:7px 10px; color:var(--muted); font-size:11px; white-space:nowrap }
.statWarn { color:var(--bad) }
.emptyList { padding:12px }

/* ---- clip rows ---- */
.clip { display:flex; align-items:stretch; min-height:var(--touch); border-left:3px solid transparent; border-bottom:1px solid var(--line); cursor:pointer; transition:background .1s,border-color .1s,opacity .1s;
  -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent }
.clip:hover, .clip:focus-visible { background:#111722; outline:none }
.clip.active { background:#111722; border-left-color:var(--accent2) }
.clip.pending { opacity:.5; cursor:default }
.clip.busy { opacity:.6 }
.clip.copied { background:rgba(0,255,136,.14); border-left-color:var(--ok) }
.clip.armed-burn { background:rgba(255,176,0,.1); border-left-color:var(--warn) }
.clip.armed-burn .clipLabel { color:var(--warn) }
.clipBody { flex:1; min-width:0; padding:7px 4px 7px 12px }
.clipTop { display:flex; align-items:center; gap:6px; min-width:0 }
.clipLabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 }
.tag { font-size:10px; padding:1px 4px; border:1px solid var(--line); color:var(--accent); letter-spacing:.08em; flex:none }
.tag.img { border-color:var(--accent) }
.tag.otv { color:var(--warn); border-color:var(--warn) }
.tag.sync { color:var(--muted); border-color:var(--muted); animation:blink 1s steps(1,end) infinite }
.exp { font-size:11px; color:var(--muted); margin-left:auto; flex:none }
.exp.warn { color:var(--warn) } .exp.danger { color:var(--bad) }
.exp.blink { animation:blink 1s steps(1,end) infinite }
.date { color:var(--muted); font-size:11px; margin-top:3px }
.clipMore { min-width:var(--touch); border:0; border-left:1px solid var(--line); color:var(--muted); flex:none }
.clipMore:hover:not(:disabled) { color:#001018 }

/* ---- detail: mobile full-screen push panel ---- */
#detailPanel { position:fixed; inset:0; z-index:50; background:var(--bg); display:flex; flex-direction:column;
  padding:10px; padding-top:calc(10px + var(--safe-t)); padding-bottom:calc(10px + var(--safe-b));
  transform:translateX(102%); transition:transform .2s cubic-bezier(.4,0,.2,1); overflow-y:auto }
#detailPanel.open { transform:translateX(0) }
.panelBar { display:flex; align-items:center; gap:8px }
#back { flex:none; min-width:var(--touch) }
.title { margin:0; color:var(--accent); font-size:16px; text-transform:uppercase; letter-spacing:.08em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.meta { margin:6px 0 12px; color:var(--muted); font-size:11px }
.warnBar { border:1px solid var(--warn); color:var(--warn); padding:8px; margin-bottom:10px; font-size:11px }
.warnBar button { min-height:32px; padding:4px 8px; font-size:11px; color:var(--warn); border-color:var(--warn) }
.detail { background:var(--panel); border:1px solid var(--line); flex:1; min-height:160px; padding:12px; white-space:pre-wrap; transition:opacity .1s }
.detail.loading { opacity:.55 }
.detail.empty { color:var(--muted) }
.detail img { max-width:100%; height:auto; display:block; border:1px solid var(--accent); box-shadow:0 0 8px rgba(0,212,255,.2) }
.detailText { width:100%; height:100%; min-height:150px; background:var(--panel); border:0; color:var(--text); outline:0; resize:none; caret-color:var(--accent); line-height:1.45 }

/* ---- composer: mobile bottom sheet ---- */
#backdrop { position:fixed; inset:0; z-index:55; background:rgba(5,7,10,.7) }
#composerSheet { position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--panel); border-top:1px solid var(--accent);
  padding:12px; padding-bottom:calc(12px + var(--safe-b)); box-shadow:0 -4px 24px rgba(0,212,255,.15);
  transform:translateY(105%); transition:transform .2s cubic-bezier(.4,0,.2,1); max-height:80vh; max-height:80dvh; overflow-y:auto }
#composerSheet.open { transform:translateY(0) }
.composerTitle { color:var(--accent); font-size:11px; letter-spacing:.12em; margin-bottom:7px }
.check { display:flex; gap:8px; align-items:center; color:var(--muted); font-size:11px; min-height:var(--touch) }
.check input { width:auto }
#msg { min-height:16px; font-size:11px; margin-top:6px }

/* ---- FAB / toast ---- */
#fab { position:fixed; right:16px; bottom:calc(16px + var(--safe-b)); z-index:40; width:56px; height:56px; font-size:26px; line-height:1;
  color:var(--accent); border:1px solid var(--accent); background:var(--panel); box-shadow:0 0 14px rgba(0,212,255,.3) }
#toast { position:fixed; left:50%; transform:translate(-50%,8px); bottom:calc(88px + var(--safe-b)); z-index:100;
  background:var(--panel); border:1px solid var(--accent); color:var(--accent); padding:8px 14px; font-size:12px; letter-spacing:.08em;
  opacity:0; pointer-events:none; transition:opacity .15s,transform .15s }
#toast.show { opacity:1; transform:translate(-50%,0) }

/* ---- footer (desktop shortcut hints) ---- */
#footerActions { display:none }

/* ---- keyboard legend ---- */
.kbd-legend { position:fixed; inset:0; z-index:1000; background:rgba(20,16,32,.88); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .15s }
.kbd-legend.active { opacity:1; pointer-events:auto }
.kbd-content { background:var(--panel); color:var(--accent); border:2px solid var(--accent); box-shadow:0 0 12px rgba(0,212,255,.6);
  padding:28px 32px 22px; font-size:14px; max-width:360px; max-height:80vh; overflow-y:auto }
.kbd-content h2 { font-size:18px; margin:0 0 14px; letter-spacing:.17em; color:var(--accent) }
.kbd-content ul { list-style:none; margin:0 0 10px; padding:0 }
.kbd-content li { margin:0 0 7px; color:var(--text) }
.kbd-content b { color:var(--accent) }
.kbd-hint { font-size:12px; color:var(--muted); margin-top:10px }

/* ==== desktop: two-pane grid over the same DOM ==== */
@media (min-width: 768px) {
  :root { --touch:34px }
  .desktopOnly { display:inline-block }
  .mobileOnly, #fab, #backdrop { display:none!important }
  header { height:48px; padding:0 14px }
  header h1 { font-size:15px }
  #statsMini { display:none }
  .wrap { display:grid; grid-template-columns:320px 1fr }
  aside { border-right:1px solid var(--line) }
  #list { padding-bottom:0 }
  #stats { display:block }
  #detailPanel { position:static; transform:none; transition:none; z-index:auto; padding:18px; background:var(--bg); min-width:0; overflow-y:auto }
  #composerSheet { position:static; transform:none; transition:none; max-height:none; border-top:1px solid var(--line); box-shadow:none; overflow:visible }
  #composerSheet .row button { flex:1 }
  .clip { -webkit-user-select:text; user-select:text }
  .title { font-size:18px }
  .detail { min-height:280px }
  textarea { min-height:130px }
  #toast { bottom:40px }
  #footerActions { display:flex; align-items:center; justify-content:center; gap:14px; min-height:27px;
    background:var(--panel); color:var(--accent); font-size:12px; letter-spacing:.08em; border-top:1px solid var(--line); user-select:none }
  #footerActions b { color:var(--accent) }
  #footerActions span { color:var(--muted) }
}