/* ═══════════════════════════════════════════════════════
   wireframe-app.css — ResearchMate Wireframe App Pages
   Shared CSS for project pages (10, 11, 12, 13).
   Requires: wireframe-base.css
   ═══════════════════════════════════════════════════════ */

/* ── Base ── */
html{height:100%;background:var(--page)}
body{
  height:100%;font-family:'Plus Jakarta Sans',sans-serif;color:var(--bd);
  /* Light gray with a premium finish: top-left sheen, warm + cool brand
     washes, and a fine dot grid. Content cards stay on clean white. */
  background:
    linear-gradient(115deg, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 34%),
    radial-gradient(1200px 640px at 92% -10%, rgba(235,93,47,.17), transparent 65%),
    radial-gradient(880px 520px at -10% 106%, rgba(62,177,200,.10), transparent 60%),
    radial-gradient(rgba(88,68,70,.075) 1.05px, transparent 1.45px),
    var(--page);
  background-size:auto, auto, auto, 21px 21px, auto;
  background-attachment:fixed;
}

/* ══════════════════════════════════════
   TOP BAR
   ══════════════════════════════════════ */
.topbar{background:var(--card);border-bottom:1px solid var(--border);height:54px;display:flex;align-items:center;gap:12px;flex-shrink:0}
.tb-back{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--bm);cursor:pointer;transition:.15s;text-decoration:none;white-space:nowrap;flex-shrink:0}
.tb-back:hover{color:var(--orange)}
.tb-sep{color:var(--border);font-size:14px;flex-shrink:0}
.tb-spacer{flex:1}
.tb-btn{display:flex;align-items:center;gap:6px;padding:7px 13px;border-radius:var(--r-sm);font-size:12px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:var(--card);color:var(--bm);font-family:'Plus Jakarta Sans',sans-serif;transition:.15s;white-space:nowrap;text-decoration:none}
.tb-btn:hover{border-color:var(--orange);color:var(--orange);background:var(--ol)}
.tb-btn.primary{background:var(--orange);color:#fff;border-color:var(--orange)}
.tb-btn.primary:hover{background:var(--od)}
.tb-btn.ai,.tb-btn.ai-btn{background:linear-gradient(135deg,var(--ink),#473537);color:#fff;border-color:transparent}
.tb-btn.ai:hover,.tb-btn.ai-btn:hover{opacity:.9}
.tb-av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;color:#fff;flex-shrink:0;cursor:pointer}
.tb-av:not(:first-of-type){margin-left:-7px}

/* ══════════════════════════════════════
   TAB BAR
   ══════════════════════════════════════ */
.tabbar{background:var(--card);border-bottom:1px solid var(--border);padding:0 20px;display:flex;align-items:center;gap:0;flex-shrink:0;overflow-x:auto;scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tab{padding:12px 16px;font-size:13px;font-weight:600;color:var(--bm);cursor:pointer;border-bottom:2.5px solid transparent;transition:.15s;white-space:nowrap;display:flex;align-items:center;gap:6px;text-decoration:none}
.tab:hover{color:var(--bd)}
.tab.on{color:var(--orange);border-bottom-color:var(--orange)}
.tab-badge{background:var(--ol);color:var(--orange);font-size:10px;font-weight:800;padding:1px 6px;border-radius:20px}

/* ══════════════════════════════════════
   AI FLOATING PANEL
   ══════════════════════════════════════ */
.ai-fab{position:fixed;bottom:20px;right:20px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.ai-fab-btn{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--ink),#473537);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.25);transition:all .2s}
.ai-fab-btn:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.ai-fab-label{background:var(--ink);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;pointer-events:none}
.ai-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);width:320px;box-shadow:0 8px 32px rgba(88,68,70,.15);overflow:hidden;display:none;flex-direction:column;max-height:480px}
.ai-panel.open{display:flex}
.ai-panel-head{padding:12px 14px;background:linear-gradient(135deg,var(--ink),#473537);display:flex;align-items:center;justify-content:space-between}
.ai-panel-title{font-size:13px;font-weight:700;color:#fff;display:flex;align-items:center;gap:7px}
.ai-panel-close{background:rgba(255,255,255,.15);border:none;cursor:pointer;color:#fff;width:22px;height:22px;border-radius:5px;display:flex;align-items:center;justify-content:center;font-size:14px}
.ai-panel-close:hover{background:rgba(255,255,255,.25)}
.ai-panel-body{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.ai-panel-foot{padding:10px 12px;border-top:1px solid var(--border)}
.ai-msg{display:flex;gap:7px;align-items:flex-start}
.ai-msg.user{flex-direction:row-reverse}
.ai-bubble{padding:8px 11px;border-radius:10px;font-size:12px;line-height:1.5;max-width:88%}
.ai-msg.ai .ai-bubble{background:var(--sl);color:var(--bd);border-radius:3px 10px 10px 10px}
.ai-msg.user .ai-bubble{background:var(--orange);color:#fff;border-radius:10px 3px 10px 10px}
.ai-av-sm{width:24px;height:24px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;overflow:hidden}
.ai-av-sm img{width:100%;height:100%;object-fit:cover}
.ai-av-sm.bot{background:var(--ol2);color:#fff}
.ai-av-sm.bot .rm-ai{width:100%;height:100%}
.ai-av-sm.user{background:var(--teal);color:#fff}
.ai-input-row{display:flex;gap:7px;align-items:flex-end}
.ai-input{flex:1;border:1.5px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;font-family:'Plus Jakarta Sans',sans-serif;color:var(--bd);outline:none;resize:none;transition:.15s;line-height:1.4;max-height:80px}
.ai-input:focus{border-color:var(--orange)}
.ai-send-btn{width:32px;height:32px;border-radius:8px;background:var(--orange);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.15s}
.ai-send-btn:hover{background:var(--od)}
.ai-quick{display:flex;flex-wrap:wrap;gap:5px;padding-bottom:4px}
.ai-quick-chip{padding:4px 9px;border-radius:20px;font-size:10px;font-weight:600;background:var(--sl);color:var(--bm);border:1px solid var(--border);cursor:pointer;transition:.15s}
.ai-quick-chip:hover{border-color:var(--orange);color:var(--orange);background:var(--ol)}

/* ── AI assistant: typing dots, spinners, applied-action chips ── */
.ai-typing{display:flex;gap:3px;padding:10px 13px;background:var(--sl);border-radius:3px 10px 10px 10px;width:fit-content}
.ai-typing span{width:6px;height:6px;background:var(--bm);border-radius:50%;animation:rmTyping .8s infinite}
.ai-typing span:nth-child(2){animation-delay:.2s}
.ai-typing span:nth-child(3){animation-delay:.4s}
@keyframes rmTyping{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
.rm-spin{display:inline-block;width:11px;height:11px;border:2px solid rgba(255,255,255,.35);border-top-color:var(--card);border-radius:50%;animation:rmSpin .7s linear infinite;flex-shrink:0}
@keyframes rmSpin{to{transform:rotate(360deg)}}
.ai-actions-done{display:flex;flex-direction:column;gap:4px;margin:2px 0 2px 31px}
.ai-action-chip{font-size:11px;font-weight:600;color:var(--okd);background:var(--okl);border:1px solid var(--okb);border-radius:8px;padding:4px 9px;width:fit-content;display:flex;align-items:center;gap:6px}
.ai-action-note{font-size:10px;color:var(--bm);padding-left:2px}

/* ── Shared modal + small buttons (used by board, meetings, ...) ── */
.modal-overlay{position:fixed;inset:0;background:rgba(38,29,30,.5);z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .2s}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal-box{background:var(--card);border-radius:var(--r-xl);width:100%;max-width:520px;max-height:86%;display:flex;flex-direction:column;overflow:hidden}
/* A form wrapping head/body/foot must carry the flex chain, or the body
   can't shrink+scroll and tall modals get clipped past max-height. */
.modal-box>form{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}
.modal-head{padding:18px 22px 14px;border-bottom:1px solid var(--border);display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.modal-close{width:28px;height:28px;border-radius:7px;border:none;background:var(--sl);cursor:pointer;font-size:16px;color:var(--bm);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.modal-body{padding:18px 22px;overflow-y:auto;flex:1}
.modal-foot{padding:14px 22px;border-top:1px solid var(--border);display:flex;gap:9px;justify-content:flex-end}
.btn-sm{padding:8px 16px;border-radius:var(--r-sm);font-size:12px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;border:1.5px solid var(--border);background:var(--card);color:var(--bm);transition:.15s}
.btn-sm.primary{background:var(--orange);color:#fff;border-color:var(--orange)}
@media(max-width:640px){
  .modal-overlay{align-items:flex-end;padding:0}
  .modal-box{border-radius:16px 16px 0 0;max-width:100%;max-height:94%}
}

/* ── Linked categories: a task links to the other sections of the paper it feeds into ── */
.cat-links{display:flex;flex-wrap:wrap;gap:7px}
.cat-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);font-size:12px;font-weight:600;color:var(--bm);cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif;transition:.15s}
.cat-chip:hover{border-color:var(--om);color:var(--od)}
.cat-chip.on{border-color:var(--orange);background:var(--ol);color:var(--od)}
.cat-chip.on::before{content:'\2713';font-weight:800}
.cat-chip:disabled{cursor:default;border-style:dashed;background:transparent;color:var(--muted)}
.cat-chip:disabled:hover{border-color:var(--border);color:var(--muted)}
.cat-chip:disabled::after{content:'\00b7  its category';font-weight:500}

/* ── Value-tier colors: match badges and progress fills ── */
.pct-hi{background:var(--okl) !important;color:var(--okd) !important}
.pct-mid{background:var(--ol) !important;color:var(--od) !important}
.pct-lo{background:var(--sl) !important;color:var(--bm) !important}
.fill-hi{background:linear-gradient(90deg,#22c55e,#16a34a) !important}
.pct-txt-hi{color:#16a34a !important;color:light-dark(#16a34a,#4ade80) !important}
/* ── Searchable select (rmComboify) ── */
.rm-combo-dd{display:none;position:absolute;left:0;right:0;top:100%;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(88,68,70,.12);max-height:210px;overflow-y:auto;z-index:80}
.rm-combo-dd.open{display:block}
.rm-combo-opt{padding:9px 14px;font-size:12.5px;font-weight:600;color:var(--bd);cursor:pointer}
.rm-combo-opt:hover{background:var(--sl)}

/* Linkified URLs inside user-written text (activity, chat, tasks, notes) */
.rm-link{color:var(--orange);font-weight:600;text-decoration:underline;word-break:break-all}
.rm-link:hover{color:var(--od)}

/* Button loading state (rmBtnLoading) — reuses the shared .rm-spin spinner */
.rm-loading{opacity:.85;cursor:progress !important}

/* Info tip — guidance behind a small "i" button (rmInfoToggle) */
.info-tip{position:relative;display:inline-flex;vertical-align:-2px;margin-left:6px}
.info-btn{width:17px;height:17px;border-radius:50%;border:1.5px solid var(--border);background:var(--card);color:var(--bm);font-size:10.5px;font-weight:800;font-family:Georgia,'Times New Roman',serif;font-style:italic;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;line-height:1;padding:0;transition:.15s;flex-shrink:0}
.info-btn:hover,.info-tip.open .info-btn{border-color:var(--orange);color:var(--orange);background:var(--ol)}
.info-pop{display:none;position:absolute;top:calc(100% + 8px);left:-6px;width:min(300px,78vw);background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 10px 32px rgba(88,68,70,.18);padding:12px 14px;font-size:12px;font-weight:500;color:var(--brown);line-height:1.65;z-index:120;text-align:left;text-transform:none;letter-spacing:0;white-space:normal}
.info-tip.open .info-pop{display:block}
@media(max-width:640px){.info-pop{left:auto;right:-10px}}

/* ── Invitation share panel (fragments/share-panel.html) ── */
.share-panel{max-width:460px;margin:16px auto 0;text-align:left}
.share-panel .copy-box{display:flex;gap:8px}
.share-panel .copy-input{flex:1;min-width:0;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;font-size:12px;font-family:monospace;color:var(--bd);background:var(--sl);outline:none}
.share-panel .ic-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.share-panel .share-wrap{position:relative}
.share-panel .share-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:30;min-width:220px;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(38,29,30,.14);padding:6px}
.share-panel .share-menu.open{display:block}
.share-panel .share-opt{display:flex;align-items:center;gap:10px;width:100%;border:none;background:none;padding:9px 10px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--bd);cursor:pointer;text-align:left;font-family:inherit}
.share-panel .share-opt:hover{background:var(--sl)}
.share-panel .share-opt .soc{width:18px;height:18px;flex-shrink:0;background:var(--c);-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.share-panel .share-sep{height:1px;background:var(--border);margin:5px 4px}
.share-panel .share-lbl{display:block;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--bm);margin:14px 0 6px}
.share-panel .share-msg{width:100%;box-sizing:border-box;border:1.5px solid var(--border);border-radius:10px;padding:10px 12px;font-size:13px;font-family:inherit;color:var(--bd);resize:vertical;min-height:62px;outline:none;line-height:1.5}
.share-panel .share-msg:focus{border-color:var(--om)}
.share-panel .qr-card{display:flex;gap:18px;align-items:center;margin-top:16px;padding:14px;border:1.5px solid var(--border);border-radius:14px;background:var(--sl)}
.share-panel .qr-box{background:#fff;padding:8px;border-radius:10px;border:1px solid var(--border);line-height:0;flex-shrink:0}
.share-panel .qr-box img,.share-panel .qr-box canvas{width:140px;height:140px}
.share-panel .qr-actions{display:flex;flex-direction:column;gap:8px;flex:1}
.share-panel .qr-actions .btn-nav{justify-content:center;padding:9px 14px}
.share-panel .qr-title{font-size:13px;font-weight:800;color:var(--bd)}
.share-panel .qr-sub{font-size:11.5px;color:var(--bm);margin-bottom:4px}
@media(max-width:640px){
  .share-panel .qr-card{flex-direction:column}
  .share-panel .qr-actions{width:100%}
  .share-panel .copy-box{flex-wrap:wrap}
  .share-panel .copy-input{flex-basis:100%}
  .share-panel .copy-box>.btn-nav,.share-panel .share-wrap{flex:1}
  .share-panel .share-wrap .btn-nav{width:100%;justify-content:center}
  .share-panel .copy-box>.btn-nav{justify-content:center}
}