/* ✨ What's next (AI assistant, mockups 01/02): the buttons, and the panel opened over the current page.
   Ported from the mockup's ai.css; everything is scoped to the .wn-* / .ai-big classes so no existing screen changes. */
:root { --ai:#6d28d9; --ai-soft:#f5f3ff; --ai-line:#ddd6fe; --ai-ink:#4c1d95; }

/* buttons */
.btn.ai-big { background:linear-gradient(135deg,#6d28d9,#1d3557); color:#fff; font-weight:700; font-size:.98rem; padding:.5rem 1rem; border-radius:8px; box-shadow:0 4px 14px rgba(109,40,217,.35); display:inline-flex; align-items:center; gap:.45rem; border:0; font-family:inherit; cursor:pointer; }
.btn.ai-big .n, .wn-top .n { background:#fff; color:var(--ai); border-radius:999px; font-size:.75rem; padding:0 .45rem; font-weight:700; }
.btn.ai-big.pressed { box-shadow:0 0 0 3px #c4b5fd, 0 4px 14px rgba(109,40,217,.35); }
.wn-top { display:inline-flex; align-items:center; gap:.35rem; background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:.12rem .7rem; font:inherit; font-size:.84rem; font-weight:600; cursor:pointer; white-space:nowrap; }
.wn-top:hover, .wn-top.pressed { background:rgba(255,255,255,.24); }
.wn-top:focus-visible, .btn.ai-big:focus-visible { outline:2px solid #c4b5fd; outline-offset:2px; }
.ai-tag { display:inline-flex; align-items:center; gap:.2rem; font-size:.68rem; font-weight:700; letter-spacing:.03em; color:var(--ai-ink); background:#ede9fe; border-radius:999px; padding:.03rem .5rem; vertical-align:middle; white-space:nowrap; }

/* host: inline under the Dashboard header, or a drawer over any other page */
.wn-host[hidden] { display:none !important; }
.wn-host.inline { margin:.9rem 0 0; }
.wn-host.inline .wn-backdrop { display:none; }
.wn-host:not(.inline) { position:fixed; inset:0; z-index:900; }
.wn-host:not(.inline) .wn-backdrop { position:absolute; inset:0; background:rgba(15,23,42,.35); }
.wn-host:not(.inline) > turbo-frame { position:absolute; top:62px; right:1rem; width:min(1140px, calc(100vw - 2rem)); max-height:calc(100vh - 78px); overflow:auto; display:block; border-radius:10px; }
.wn-host:not(.inline) .wn-panel { margin:0; }
.wn-host:not(.inline) .wn-panel::before { display:none; }
.wn-loading { padding:1.2rem 1.05rem; }
.wn-panel:focus { outline:none; }

/* panel */
.wn-panel { background:#fff; border:1px solid var(--ai-line); border-radius:10px; box-shadow:0 10px 30px rgba(76,29,149,.12); margin:0 0 1rem; position:relative; text-align:left; }
.wn-panel::before { content:""; position:absolute; top:-9px; right:70px; width:16px; height:16px; background:#fff; border-left:1px solid var(--ai-line); border-top:1px solid var(--ai-line); transform:rotate(45deg); }
.wn-head { display:flex; align-items:flex-start; gap:1rem; padding:.85rem 1.05rem .55rem; border-bottom:1px solid #eef0f3; background:linear-gradient(180deg,#faf8ff,#fff); border-radius:10px 10px 0 0; }
.wn-head h2 { margin:0; font-size:1.2rem; }
.wn-head .sub { font-size:.86rem; color:var(--muted); margin-top:.1rem; }
.wn-head .sub b { color:#1f2937; } .wn-head .sub b.red { color:#b91c1c; } .wn-head .sub b.green { color:#15803d; }
.wn-head .rt { margin-left:auto; display:flex; gap:.5rem; align-items:center; white-space:nowrap; }
.wn-head .x { font-size:1.15rem; color:var(--muted); margin-left:.3rem; background:none; border:0; cursor:pointer; padding:0 .2rem; line-height:1; }
.wn-ai { margin:.35rem 0 0; font-size:.86rem; color:#312e81; }
.wn-panel .seg { display:inline-flex; border:1px solid #cbd2da; border-radius:5px; overflow:hidden; background:#fff; }
.wn-panel .seg a { padding:.2rem .5rem; font-size:.8rem; text-decoration:none; color:#374151; border-right:1px solid #e5e7eb; white-space:nowrap; }
.wn-panel .seg a:last-child { border-right:0; } .wn-panel .seg .on { background:var(--brand); color:#fff; font-weight:600; }
.wn-panel .mini-btn { display:inline-block; font:inherit; font-size:.78rem; font-weight:600; border:1px solid #cbd2da; background:#fff; color:var(--brand); border-radius:4px; padding:.12rem .5rem; text-decoration:none; white-space:nowrap; cursor:pointer; line-height:1.5; }
.wn-panel .mini-btn.pri { background:var(--brand); color:#fff; border-color:var(--brand); }
.wn-panel .mini-btn.ai { background:var(--ai); color:#fff; border-color:var(--ai); }
.wn-panel .mini-btn.ok { color:#15803d; border-color:#86efac; }
.wn-panel .mini-btn.ghost { border-color:transparent; color:var(--muted); }
.wn-panel form.inline { display:inline; margin:0; }
.wn-filters { display:flex; gap:.35rem; flex-wrap:wrap; padding:.5rem 1.05rem; border-bottom:1px solid #eef0f3; align-items:center; }
.wn-filters button { font:inherit; font-size:.8rem; border:0; cursor:pointer; padding:.12rem .6rem; border-radius:999px; background:#f1f5f9; color:#374151; }
.wn-filters button.on { background:var(--brand); color:#fff; font-weight:600; }
.wn-filters .sp { flex:1; }
.wn-list { list-style:none; margin:0; padding:0; }
.wn-item { display:grid; grid-template-columns:1.6rem 34px minmax(0,1fr) auto 1.6rem; gap:.65rem; align-items:center; padding:.55rem 1.05rem; border-bottom:1px solid #eef0f3; position:relative; }
.wn-item[hidden] { display:none; }
.wn-item .rk { font-size:.8rem; font-weight:700; color:#94a3b8; text-align:right; }
.wn-item .ti { font-weight:600; font-size:.93rem; line-height:1.3; }
.wn-item .ti a { text-decoration:none; }
.wn-item .why { font-size:.82rem; color:#4b5563; margin-top:.05rem; display:block; }
.wn-item .why .hot { color:#b91c1c; font-weight:600; } .wn-item .why .warm { color:#b45309; font-weight:600; }
.wn-item .acts { display:flex; gap:.3rem; align-items:center; flex-wrap:nowrap; }
.wn-item .more { background:none; border:0; color:#94a3b8; font-size:1.1rem; padding:0; text-align:center; cursor:pointer; list-style:none; display:block; }
.wn-item .more::-webkit-details-marker { display:none; }
.wn-item.team { background:#fff8f8; }
.wn-item .tmeta { font-size:.72rem; color:var(--muted); margin-left:.35rem; font-weight:400; }
.wn-item .teamtag { font-size:.62rem; font-weight:700; letter-spacing:.05em; color:#9f1239; background:#ffe4e6; border-radius:3px; padding:0 .3rem; vertical-align:middle; }
.wn-panel .ty { width:34px; height:34px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:1rem; }
.wn-panel .ty.email { background:#e0f2fe; } .wn-panel .ty.task { background:#fee2e2; } .wn-panel .ty.task.today { background:#fef3c7; } .wn-panel .ty.follow { background:#ede9fe; }
.wn-panel .ty.money { background:#dcfce7; } .wn-panel .ty.inv { background:#ccfbf1; } .wn-panel .ty.team { background:#fde2e4; }
.wn-more > summary, .wn-reassign > summary { list-style:none; }
.wn-more > summary::-webkit-details-marker, .wn-reassign > summary::-webkit-details-marker { display:none; }
.wn-reassign { display:inline-block; }
.wn-menu { position:absolute; right:.6rem; top:2.4rem; z-index:5; width:280px; background:#fff; border:1px solid #cbd5e1; border-radius:8px; box-shadow:0 12px 30px rgba(15,23,42,.22); font-size:.86rem; padding:.3rem 0; text-align:left; }
.wn-menu .g { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:.3rem .8rem .1rem; display:block; }
.wn-menu form.wn-mf { margin:0; }
.wn-menu .wn-mi { display:block; width:100%; text-align:left; background:none; border:0; font:inherit; padding:.28rem .8rem; color:#1f2937; cursor:pointer; }
.wn-menu .wn-mi:hover, .wn-menu .wn-mi:focus-visible { background:#f1f5f9; }
.wn-menu small { color:var(--muted); display:block; font-size:.75rem; }
.wn-menu .wn-why { padding:.28rem .8rem; }
.wn-menu hr { border:0; border-top:1px solid #eef0f3; margin:.25rem 0; }
.wn-menu.wn-pop { display:flex; flex-direction:column; gap:.4rem; padding:.5rem .8rem; width:240px; }
.wn-menu.wn-pop .g { padding:0; }
.wn-sec { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; padding:.35rem 1.05rem .2rem; background:#f8fafc; border-bottom:1px solid #eef0f3; display:flex; gap:.5rem; }
.wn-sec.red { color:#991b1b; background:#fff1f2; }
.wn-sec .r { margin-left:auto; text-transform:none; letter-spacing:0; font-weight:400; }
.wn-empty { padding:1.2rem 1.05rem; }
.wn-empty p { margin:.2rem 0; }
.wn-foot { display:flex; gap:1rem; align-items:center; padding:.6rem 1.05rem; background:#fafbfc; border-radius:0 0 10px 10px; font-size:.84rem; flex-wrap:wrap; border-top:1px solid #eef0f3; }
.wn-foot .sp { flex:1; }
.wn-foot form { margin:0; } .wn-foot form.wn-pref { display:inline-flex; gap:.5rem; align-items:center; }
.wn-foot .button_to, .wn-foot form.inline { display:inline; }
.wn-foot .link { background:none; border:0; padding:0; color:var(--brand); text-decoration:underline; cursor:pointer; font:inherit; }
.wn-panel .toggle { width:34px; height:20px; border-radius:999px; background:#cbd2da; position:relative; display:inline-block; border:0; padding:0; cursor:pointer; flex:none; }
.wn-panel .toggle.on { background:#16a34a; }
.wn-panel .toggle span { position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; }
.wn-panel .toggle.on span { left:17px; }
.wn-body { display:grid; grid-template-columns:minmax(0,1fr) 290px; }
.wn-body > .side { border-left:1px solid #eef0f3; padding:.7rem .9rem; background:#fcfcfe; font-size:.85rem; }
.wn-body > .side h4 { margin:.1rem 0 .35rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.wn-panel .glance { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin-bottom:.7rem; }
.wn-panel .glance div { background:#fff; border:1px solid var(--line); border-radius:6px; padding:.3rem .5rem; }
.wn-panel .glance b { display:block; font-size:1.1rem; color:var(--brand); } .wn-panel .glance span { font-size:.72rem; color:var(--muted); }
.wn-panel .glance b.red { color:#b91c1c; } .wn-panel .glance b.green { color:#15803d; }
.wn-panel .side ul.plain { list-style:none; margin:0 0 .6rem; padding:0; } .wn-panel .side ul.plain li { padding:.2rem 0; border-bottom:1px dashed #eef0f3; }
.wn-panel .ruler { font-size:.76rem; color:var(--muted); line-height:1.4; }

@media (max-width:820px) {
  .wn-head { flex-wrap:wrap; }
  .wn-head .rt { margin-left:0; }
  .wn-body { grid-template-columns:1fr; }
  .wn-body > .side { border-left:0; border-top:1px solid #eef0f3; }
  .wn-item { grid-template-columns:1.4rem 34px minmax(0,1fr) 1.4rem; }
  .wn-item .acts { grid-column:3 / 4; grid-row:2; flex-wrap:wrap; }
  .wn-host:not(.inline) > turbo-frame { top:.5rem; right:.5rem; width:calc(100vw - 1rem); max-height:calc(100vh - 1rem); }
}
@media print { .wn-host, .wn-open { display:none !important; } }