/* v72.13: glass look for the team app. The silver background from the landing's Our Works section sits behind the
   app, and the navigation (side menu, phone dock, search, Ask JJS, bell) is frosted glass. Cards are see-through white
   (no blur of their own, so long pages stay smooth). Only the signed-in team app; the client page and sign-in are unchanged.
   Loaded last; remove this file's <link> in index.html to go back to the plain look. */
.jjs-root:has(> .jjs-shell.jjs-v2:not(.jjs-shell-locked)) { background: transparent; }
html:has(.jjs-shell.jjs-v2:not(.jjs-shell-locked)) { background: #e6e6e4; }
html:has(.jjs-shell.jjs-v2:not(.jjs-shell-locked)) body { background: transparent; }
body:has(.jjs-shell.jjs-v2:not(.jjs-shell-locked))::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  /* v72.14: the silver waves at about half strength (a soft veil of the same grey on top), so the page reads calmer */
  background: linear-gradient(rgba(234, 234, 232, .55), rgba(234, 234, 232, .55)), #e6e6e4 url("../assets/app-bg-silver.webp") center / cover no-repeat;
}

/* Side menu: smoked glass, a light edge on top like iOS */
.jjs-shell.jjs-v2:not(.jjs-shell-locked) .jjs-side {
  background: linear-gradient(165deg, rgba(44, 44, 48, .7) 0%, rgba(14, 14, 16, .82) 50%, rgba(6, 6, 8, .88) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(255, 255, 255, .05), 0 24px 60px rgba(0, 0, 0, .22);
}
.jjs-shell.jjs-v2:not(.jjs-shell-locked) .jjs-side .jjs-navitem:not(.on):hover { background: rgba(255, 255, 255, .1); }
.jjs-shell.jjs-v2:not(.jjs-shell-locked) .jjs-side .jjs-navitem.on {
  background: rgba(255, 255, 255, .88); box-shadow: inset 0 1px 0 #fff, 0 4px 14px rgba(0, 0, 0, .18);
}

/* Phone dock: the same smoked glass */
.jjs-shell.jjs-v2:not(.jjs-shell-locked) .v2-dock {
  background: linear-gradient(165deg, rgba(48, 48, 52, .6), rgba(10, 10, 12, .78));
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 16px 40px rgba(0, 0, 0, .25);
}
.jjs-shell.jjs-v2:not(.jjs-shell-locked) .v2-dock-it.on { background: rgba(255, 255, 255, .9); }

/* Top: search, Ask JJS and the bell as clear glass */
.jjs-shell.jjs-v2:not(.jjs-shell-locked) .jjs-topsearch,
.jjs-shell.jjs-v2:not(.jjs-shell-locked) .v2-bell,
.jjs-shell.jjs-v2:not(.jjs-shell-locked) .jjs-topbar .ai-btn {
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 6px 18px rgba(0, 0, 0, .07);
}
.jjs-shell.jjs-v2:not(.jjs-shell-locked) .jjs-topsearch input { background: transparent; }

/* Cards: see-through white with a bright edge */
.jjs-shell.jjs-v2:not(.jjs-shell-locked) .jjs-proto .card {
  background: rgba(255, 255, 255, .64);
  border-color: rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 10px 30px rgba(0, 0, 0, .05);
}

/* Browsers without backdrop blur: keep the glass readable */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .jjs-shell.jjs-v2:not(.jjs-shell-locked) .jjs-side, .jjs-shell.jjs-v2:not(.jjs-shell-locked) .v2-dock { background: rgba(14, 14, 16, .94); }
  .jjs-shell.jjs-v2:not(.jjs-shell-locked) .jjs-topsearch, .jjs-shell.jjs-v2:not(.jjs-shell-locked) .v2-bell,
  .jjs-shell.jjs-v2:not(.jjs-shell-locked) .jjs-topbar .ai-btn { background: rgba(255, 255, 255, .88); }
}
.jjs-shell.jjs-v2:not(.jjs-shell-locked) .jjs-side .jjs-brand { background: transparent; }
/* Phone top bar: smoked glass over the page as it scrolls */
.jjs-shell.jjs-v2:not(.jjs-shell-locked) .jjs-mobilebar {
  background: rgba(12, 12, 14, .72);
  -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1);
}

/* v72.17: the tutorial guide (only while the tutorial client exists) */
.jjs-tut { margin: 0 0 16px; padding: 18px 20px; border-radius: 18px; color: #111;
  background: rgba(255, 255, 255, .92); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 10px 30px rgba(0, 0, 0, .08); }
.jjs-tut-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.jjs-tut-eyebrow { margin: 0 0 2px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #6b6b6b; }
.jjs-tut-title { margin: 0; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: 0; text-transform: none; font-family: inherit; }
.jjs-tut.is-hidden { padding: 12px 18px; }
.jjs-tut.is-hidden .jjs-tut-title { font-size: 15px; }
.jjs-tut-list { margin: 14px 0 0; padding: 0; list-style: none; counter-reset: tut; display: grid; gap: 10px; }
.jjs-tut-list li { counter-increment: tut; position: relative; padding: 0 0 0 36px; font-size: 14.5px; line-height: 1.55; color: #222; }
.jjs-tut-list li::before { content: counter(tut); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%;
  background: #111; color: #fff; font-size: 12px; font-weight: 600; display: grid; place-items: center; }
.jjs-tut-list li b { display: block; font-weight: 600; color: #111; }
.jjs-tut-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0, 0, 0, .08); }
.jjs-tut-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.jjs-emptystate-action { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* v72.21: Ask JJS with Claude */
.ai-form textarea#aiIn { flex: 1; min-width: 0; border: 1.5px solid #0b0b0b; border-radius: 20px; padding: 10px 14px; font: inherit; font-size: 14px; line-height: 1.35; outline: none; resize: none; max-height: 180px; background: #fff; }
.ai-form { align-items: flex-end; }
.aix-txt { font-weight: 500; line-height: 1.45; }
.aix-txt a { text-decoration: underline; overflow-wrap: anywhere; }
.aix-busy .ai-txt { color: #6a6a66; font-weight: 500; animation: aixPulse 1.2s ease-in-out infinite; }
@keyframes aixPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .aix-busy .ai-txt { animation: none; } }
.aix-err .ai-txt { color: #cf2a1f; }
.aix-row { cursor: pointer; flex-wrap: nowrap; align-items: flex-start; }
.aix-row input { margin: 3px 0 0; flex: none; accent-color: #0b0b0b; }
.aix-row.bad { cursor: default; }
.aix-attach { flex: none; align-self: center; }
.aix-dropzone { display: none; }
.ai-panel.aix-drop .aix-dropzone { display: flex; position: absolute; inset: 8px; z-index: 5; align-items: center; justify-content: center; text-align: center; border: 2px dashed #111; border-radius: 18px; background: rgba(255,255,255,.92); pointer-events: none; font-family: Inter, system-ui, sans-serif; }
.aix-dropzone > div { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #111; }
.aix-dropzone svg { width: 28px !important; height: 28px !important; }
.aix-dropzone small { color: #666; font-size: 12px; }
.aix-files { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 12px 6px; }
.aix-file { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: #f1f1f1; border-radius: 8px; padding: 3px 4px 3px 8px; font-size: 12px; }
.aix-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.aix-file small { color: #777; }
.aix-file button { border: 0; background: none; padding: 2px; cursor: pointer; display: inline-flex; color: #555; }
.aix-file svg { width: 12px; height: 12px; }
.aix-row.aix-del .aix-tag { background: #c62828; }
.aix-row.aix-del:not(.good) b { color: #b71c1c; }
.aix-tag { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #0b0b0b; color: #fff; border-radius: 6px; padding: 2px 6px; margin-top: 1px; }

/* v72.23: Canva jobs panel, lower right (like Google Drive's upload panel) */
.cvt { position: fixed; right: 16px; bottom: 16px; z-index: 95; width: 340px; max-width: calc(100vw - 32px); background: var(--card, #fff); color: var(--ink, #111); border: 1px solid var(--line, #e3e3e3); border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.14); overflow: hidden; font: 400 13px/1.4 'Inter', system-ui, sans-serif; }
.cvt button { font-family: inherit; }
.cvt .jjs-spinner { border: 2px solid #ddd; border-top-color: #111; }
.cvt-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-weight: 600; background: var(--soft, #f6f6f6); }
.cvt-hbtns { display: flex; gap: 2px; }
.cvt-ib { border: 0; background: transparent; color: inherit; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-size: 16px; line-height: 1; }
.cvt-ib:hover, .cvt-lb:hover { background: rgba(0,0,0,.06); }
.cvt-list { list-style: none; margin: 0; padding: 4px 0; max-height: 240px; overflow: auto; }
.cvt-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.cvt-ic { width: 18px; display: flex; justify-content: center; flex-shrink: 0; }
.cvt-ic .jjs-ico { width: 16px; height: 16px; color: #1a7f37; }
.cvt-failed .cvt-ic { color: #b42318; font-weight: 700; }
.cvt-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cvt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; font-size: 12.5px; }
.cvt-sub { color: var(--muted, #666); font-size: 12px; }
.cvt-failed .cvt-sub { color: #b42318; }
.cvt-acts { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.cvt-lb { border: 0; background: transparent; color: var(--accent, #111); font-weight: 600; font-size: 12px; padding: 4px 8px; border-radius: 8px; cursor: pointer; }
@media (max-width: 760px) { .cvt { right: 16px; left: 16px; width: auto; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); } }

/* v72.25: a doc written in the system (Ask JJS), read on the Docs page */
.dc-body { white-space: pre-wrap; font-size: 14px; line-height: 1.6; max-height: 55vh; overflow: auto; padding: 14px 16px; border: 1px solid var(--line, #e5e5e5); border-radius: 12px; background: var(--soft, #fafafa); }

/* v72.29: Google Drive dialog */
.gd-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; margin: 0 0 12px; border: 2px dashed #c8c8c8; border-radius: 14px; text-align: center; cursor: pointer; color: #111; font-family: Inter, system-ui, sans-serif; }
.gd-drop:hover, .gd-drop:focus-visible, .gd-drop.over { border-color: #111; background: #f6f6f6; }
.gd-drop svg { width: 22px !important; height: 22px !important; }
.gd-drop small { color: #777; font-size: 12px; }
.gd-files { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; }
.gd-file { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 10px; background: #f3f3f3; font-size: 13px; overflow: hidden; }
.gd-file::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--gd-pct, 0); background: rgba(0,0,0,.06); }
.gd-file .gd-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; }
.gd-file small { color: #666; position: relative; }
.gd-file.done small { color: #1b7f3b; }
.gd-file.err small { color: #b71c1c; }
.gd-or { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; color: #888; font-size: 12px; }
.gd-or::before, .gd-or::after { content: ''; flex: 1; height: 1px; background: #e2e2e2; }

/* v72.30: Ask JJS opens with a slide, and shows a short animation while it connects to Claude */
.ai-panel.ai-enter { animation: aixIn .34s cubic-bezier(.2,.8,.2,1) both; }
@keyframes aixIn { from { opacity: 0; transform: translateX(28px) scale(.98); } to { opacity: 1; transform: none; } }
.aix-connecting .ai-form { opacity: .45; }
.aix-wait { height: 100%; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; font-family: Inter, system-ui, sans-serif; color: #111; animation: aixFade .3s ease both; }
.aix-wait small { color: #777; font-size: 12px; }
.aix-orb { position: relative; width: 58px; height: 58px; margin-bottom: 10px; }
.aix-orb i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent; border-top-color: #111; animation: aixSpin 1.1s linear infinite; }
.aix-orb i:nth-child(2) { inset: 9px; border-top-color: #777; animation-duration: 1.6s; animation-direction: reverse; }
.aix-orb i:nth-child(3) { inset: 21px; border: 0; background: #111; animation: aixPulse 1.1s ease-in-out infinite; }
@keyframes aixSpin { to { transform: rotate(360deg); } }
@keyframes aixPulse { 0%, 100% { transform: scale(.7); opacity: .5; } 50% { transform: scale(1); opacity: 1; } }
@keyframes aixFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ai-panel.ai-enter, .aix-wait { animation: none; } .aix-orb i { animation-duration: 3s; } }

/* v72.35: done tasks stay in the list, crossed out */
.jjs-task.s-done .jjs-tasktitle { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: .55; }
.jjs-task.s-done .jjs-taskmeta, .jjs-task.s-done .jjs-itemnote { opacity: .55; }
.sx-stage.tk-done { opacity: .75; }
/* v72.37: status menu on tasks */
.tk-menu { position: fixed; z-index: 2000; display: flex; flex-direction: column; min-width: 140px; padding: 4px; background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); }
.tk-menu button { all: unset; cursor: pointer; padding: 8px 12px; border-radius: 8px; font: 500 13px/1.2 Inter, system-ui, sans-serif; color: #111; }
.tk-menu button:hover, .tk-menu button:focus-visible { background: rgba(0,0,0,.06); }
.tk-menu button.on { font-weight: 700; }
.tk-menu button.on::after { content: ' ✓'; }
/* v72.38: fold the sidebar's Clients list */
.sf-toggle { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.sf-toggle:hover, .sf-toggle:focus-visible { color: #fff; background: rgba(255,255,255,.08); }
.sf-chev { transition: transform .18s ease; }
.sf-folded .sf-chev { transform: rotate(-90deg); }