/* assets/samjho-widget.css — styles for the shared Samjho Bhai widget (see samjho-widget.js). */
/* ══════ PORTFOLIO REVIEW (floating icon + modal) ══════ */
.pr-float{
  position:fixed; right:22px; bottom:224px; z-index:85; width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; padding:0;
  background:linear-gradient(135deg, var(--saffron), var(--gold-bright));
  box-shadow:0 8px 24px rgba(0,0,0,.4); transition:transform .3s var(--ease);
}
.pr-float:hover{transform:translateY(-3px);}
.pr-float svg{width:24px; height:24px;}
@media (max-width:600px){
  .pr-float{width:48px; height:48px; right:16px; bottom:194px;}
  .pr-float svg{width:20px; height:20px;}
}

/* ══════ SAMJHO BHAI — floating teaser bubble ══════ */
.pr-teaser{
  position:fixed; right:88px; bottom:212px; z-index:84; max-width:230px;
  background:var(--ink2); border:1px solid var(--gold); border-radius:14px;
  padding:12px 30px 12px 14px; box-shadow:0 12px 30px rgba(0,0,0,.4);
  font-family:'Manrope',sans-serif; font-size:.78rem; line-height:1.5; color:var(--cream);
  opacity:0; visibility:hidden; transform:translateY(8px) scale(.96);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s var(--ease);
  cursor:pointer; text-align:left;
}
.pr-teaser.show{opacity:1; visibility:visible; transform:translateY(0) scale(1);}
.pr-teaser strong{color:var(--gold-bright);}
.pr-teaser:after{
  content:''; position:absolute; right:-7px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:14px; height:14px; background:var(--ink2); border-right:1px solid var(--gold); border-top:1px solid var(--gold);
}
.pr-teaser__close{
  position:absolute; top:6px; right:8px; background:none; border:none; color:var(--gold);
  font-size:1rem; line-height:1; opacity:.6; cursor:pointer; padding:4px;
}
.pr-teaser__close:hover{opacity:1;}
@media (max-width:600px){
  .pr-teaser{right:16px; left:16px; max-width:none; bottom:250px;}
  .pr-teaser:after{display:none;}
}

.pr-modal-backdrop{
  position:fixed; inset:0; z-index:150; background:rgba(10,8,5,.8); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; padding:20px;
  opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility .4s var(--ease);
}
.pr-modal-backdrop.open{opacity:1; visibility:visible;}
.pr-modal{
  position:relative; max-width:680px; width:100%; max-height:88vh; overflow-y:auto;
  background:var(--ink2); border:1px solid var(--gold); border-radius:12px; padding:36px 30px;
  transform:translateY(16px) scale(.97); transition:transform .4s var(--ease);
  box-shadow:0 30px 80px rgba(0,0,0,.6); text-align:left;
}
.pr-modal-backdrop.open .pr-modal{transform:translateY(0) scale(1);}
.pr-modal__close{position:absolute; top:14px; right:16px; background:none; border:none; color:var(--gold); font-size:1.4rem; cursor:pointer; opacity:.7; z-index:2;}
.pr-modal__close:hover{opacity:1;}
.pr-modal .eyebrow{font-family:'Space Mono',monospace; letter-spacing:.25em; font-size:.65rem; color:var(--saffron);}
.pr-modal h3{font-family:'Fraunces',serif; font-size:1.5rem; margin-top:10px; color:var(--gold-bright);}
.pr-modal p.pr-sub{margin-top:10px; font-size:.85rem; opacity:.7; line-height:1.6;}

.pr-holding-row{display:grid; grid-template-columns:1.5fr 1.55fr .85fr .95fr auto; gap:8px; margin-bottom:10px; align-items:center;}
.pr-modal input[type="text"], .pr-modal input[type="number"], .pr-modal input[type="email"], .pr-modal select{
  background:var(--ink); border:1px solid var(--line); border-radius:8px; color:var(--cream);
  padding:10px 12px; font-family:'Manrope',sans-serif; font-size:.85rem; width:100%;
}
.pr-modal input:focus, .pr-modal select:focus{outline:none; border-color:var(--gold-bright);}
.pr-modal input::placeholder{color:var(--cream); opacity:.4;}
.pr-remove-row{background:none; border:1px solid var(--line); color:var(--saffron); border-radius:6px; width:34px; height:34px; cursor:pointer; font-size:16px;}
.pr-add-row{background:none; border:1px dashed var(--line); color:var(--saffron); padding:8px 14px; border-radius:6px; cursor:pointer; font-size:.78rem; margin:2px 0 18px;}

.pr-modal fieldset{border:1px solid var(--line); border-radius:8px; padding:12px 14px; margin:0 0 18px;}
.pr-modal legend{color:var(--saffron); font-size:.65rem; letter-spacing:.14em; padding:0 6px; font-family:'Space Mono',monospace;}
.pr-goal-options{display:flex; gap:16px; flex-wrap:wrap;}
.pr-goal-options label{display:flex; align-items:center; gap:6px; font-size:.8rem; color:var(--cream); cursor:pointer;}

.pr-email-row{display:flex; align-items:center; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.pr-email-row input[type="email"]{flex:1; min-width:200px; display:none;}
.pr-email-row.show input[type="email"]{display:block;}

.pr-modal button.pr-submit{
  background:linear-gradient(120deg,var(--gold),var(--gold-bright)); color:#1a1305; border:none;
  border-radius:30px; padding:13px 22px; font-weight:800; font-size:.85rem; cursor:pointer; width:100%;
  transition:transform .3s var(--ease);
}
.pr-modal button.pr-submit:hover{transform:translateY(-2px);}
.pr-modal button.pr-submit:disabled{opacity:.6; cursor:not-allowed;}
.pr-status{font-size:.78rem; color:var(--cream); opacity:.7; margin-top:10px; min-height:16px;}
.pr-status.error{color:var(--bear-glow); opacity:1;}
.pr-status.success{color:var(--bull-glow); opacity:1;}

.pr-results{margin-top:22px; display:none;}
.pr-results.show{display:block;}
.pr-summary-bar{border:1px solid var(--line); background:var(--ink); border-radius:8px; padding:12px 16px; margin-bottom:16px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.78rem; color:var(--cream); opacity:.85;}
.pr-summary-bar b{opacity:1; color:var(--gold-bright);}

.pr-holding-card{border-top:1px solid var(--line); padding:14px 0;}
.pr-holding-card .pr-card-top{display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.pr-holding-card h4{margin:0 0 4px; font-size:.95rem; color:var(--cream); font-weight:700;}
.pr-hint{font-size:.74rem; line-height:1.5; color:var(--cream); opacity:.7; margin:2px 0 12px;}
.pr-hint b{color:var(--gold); font-weight:600;}
.pr-holding-card .pr-meta{font-size:.74rem; color:var(--cream); opacity:.65; margin-bottom:3px;}
.pr-holding-card .pr-view-label{color:var(--gold); font-size:.65rem; letter-spacing:.1em; font-weight:700; margin:8px 0 4px; font-family:'Space Mono',monospace;}
.pr-holding-card .pr-view-text{font-size:.82rem; line-height:1.55; color:var(--cream); opacity:.9;}
.pr-holding-card.error h4{color:var(--bear-glow);}
.pr-alert-row{margin-top:10px; display:flex; align-items:center; gap:7px; font-size:.76rem; color:var(--cream); opacity:.85;}
.pr-alert-row input[type="checkbox"]{accent-color:var(--gold);}
.pr-alerts-panel{border-top:1px solid var(--line); margin-top:6px; padding:16px 0 4px; display:none;}
.pr-alerts-panel.show{display:block;}
.pr-alerts-panel .pr-alerts-label{color:var(--gold); font-size:.7rem; letter-spacing:.08em; font-weight:700; margin-bottom:8px; font-family:'Space Mono',monospace;}
.pr-alerts-panel .pr-alerts-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.pr-alerts-panel input[type="email"]{flex:1; min-width:200px;}
.pr-alerts-panel button{white-space:nowrap;}

.pr-verdict-badge{
  flex:none; font-family:'Space Mono',monospace; font-weight:700; font-size:.72rem; letter-spacing:.06em;
  padding:5px 12px; border-radius:20px; color:#1a1305;
}
.pr-verdict-badge.BUY{background:var(--bull-glow);}
.pr-verdict-badge.HOLD{background:var(--gold-bright);}
.pr-verdict-badge.SELL{background:var(--bear-glow);}

/* ══════ SAMJHO BHAI — tabs (Portfolio Review / Watchlist) ══════ */
.pr-tabs{display:flex; gap:18px; margin-top:16px; margin-bottom:4px; border-bottom:1px solid var(--line);}
.pr-tab{background:none; border:none; color:var(--cream); opacity:.55; font-size:.82rem; font-weight:700; padding:8px 2px 10px; cursor:pointer; border-bottom:2px solid transparent; font-family:'Manrope',sans-serif;}
.pr-tab.active{opacity:1; color:var(--gold-bright); border-bottom-color:var(--gold-bright);}
.pr-tabpanel{margin-top:14px;}
.pr-tabpanel[hidden]{display:none;}

/* ══════ SAMJHO BHAI — Portfolio Health Score ══════ */
.pr-health-card{display:flex; align-items:center; gap:16px; border:1px solid var(--line); background:var(--ink); border-radius:10px; padding:14px 18px; margin-bottom:16px;}
.pr-health-score{flex:none; width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; font-family:'Space Mono',monospace; color:#1a1305;}
.pr-health-score.grade-A, .pr-health-score.grade-B{background:var(--bull-glow);}
.pr-health-score.grade-C{background:var(--gold-bright);}
.pr-health-score.grade-D, .pr-health-score.grade-F{background:var(--bear-glow);}
.pr-health-score b{font-size:1.05rem; line-height:1; font-weight:800;}
.pr-health-score span{font-size:.52rem; opacity:.85; letter-spacing:.04em;}
.pr-health-body .pr-health-label{color:var(--gold); font-size:.65rem; letter-spacing:.1em; font-weight:700; font-family:'Space Mono',monospace; margin-bottom:3px;}
.pr-health-body .pr-health-summary{font-size:.8rem; color:var(--cream); opacity:.85; line-height:1.5;}

/* ══════ SAMJHO BHAI — Watchlist ══════ */
.pr-watch-add-row{display:grid; grid-template-columns:1.4fr 1.5fr auto; gap:8px; margin-bottom:10px; align-items:center;}
.pr-watch-toolbar{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:6px 0 14px; flex-wrap:wrap;}
.pr-watch-updated{font-size:.7rem; color:var(--cream); opacity:.5;}
.pr-watch-list{margin-top:2px;}
.pr-watch-empty{font-size:.82rem; color:var(--cream); opacity:.6; padding:20px 0; text-align:center;}
.pr-watch-item{border-top:1px solid var(--line); padding:12px 0; display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.pr-watch-item h4{margin:0 0 4px; font-size:.9rem; color:var(--cream); font-weight:700;}
.pr-watch-item .pr-meta{font-size:.74rem; color:var(--cream); opacity:.65; margin-bottom:2px;}
.pr-watch-item .pr-watch-change.up{color:var(--bull-glow);}
.pr-watch-item .pr-watch-change.down{color:var(--bear-glow);}
.pr-watch-item .pr-watch-trend.Bullish{color:var(--bull-glow);}
.pr-watch-item .pr-watch-trend.Bearish{color:var(--bear-glow);}
.pr-watch-item.error h4{color:var(--bear-glow);}
.pr-watch-remove{background:none; border:1px solid var(--line); color:var(--saffron); border-radius:6px; width:30px; height:30px; cursor:pointer; font-size:15px; flex:none;}
.pr-watch-add-cta{background:none; border:1px solid var(--line); color:var(--saffron); border-radius:6px; padding:3px 9px; font-size:.68rem; cursor:pointer; margin-top:8px;}
.pr-watch-add-cta:disabled{opacity:.5; cursor:default;}
@media (max-width:600px){
  .pr-watch-add-row{grid-template-columns:1fr;}
}

.pr-card-badges{display:flex; flex-direction:column; align-items:flex-end; gap:8px; flex:none;}
.pr-share-btn{display:flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--ink2); color:var(--cream); opacity:.75; cursor:pointer; transition:all .25s var(--ease);}
.pr-share-btn:hover{opacity:1; border-color:var(--gold-bright); color:var(--gold-bright); transform:translateY(-1px);}
.pr-share-btn svg{width:12px; height:12px;}
.pr-share-overall{margin-top:12px; display:flex; justify-content:flex-end;}
.pr-share-overall button{display:inline-flex; align-items:center; gap:7px; background:transparent; border:1px solid var(--gold); color:var(--gold-bright); border-radius:20px; padding:8px 16px; font-family:'Space Mono',monospace; font-size:.72rem; letter-spacing:.03em; cursor:pointer; transition:all .25s var(--ease);}
.pr-share-overall button:hover{background:rgba(217,164,65,0.1); transform:translateY(-1px);}
.pr-share-overall svg{width:13px; height:13px;}

/* Reused for both the per-holding share button and the "Share my results"
   button above — one native/bottom-sheet share flow, same as the IPO
   card share button in ipo.html (md-share-sheet/md-toast), so a person
   who's used one Market Dekho share button already knows this one. */
.md-share-sheet{position:fixed; inset:0; z-index:9998; display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,.55);}
.md-share-sheet.open{display:flex;}
.md-share-sheet__panel{width:100%; max-width:420px; background:var(--ink2); border:1px solid var(--line); border-radius:18px 18px 0 0; padding:22px 20px 26px; box-shadow:0 -8px 30px var(--shadow-strong); position:relative;}
@media(min-width:640px){
  .md-share-sheet{align-items:center;}
  .md-share-sheet__panel{border-radius:18px;}
}
.md-share-sheet__title{font-family:'Fraunces',serif; font-size:1.02rem; margin-bottom:14px; padding-right:30px; color:var(--cream);}
.md-share-sheet__close{position:absolute; top:14px; right:16px; background:none; border:none; color:var(--cream); opacity:.6; font-size:1.3rem; line-height:1; cursor:pointer;}
.md-share-sheet__close:hover{opacity:1;}
.md-share-sheet__row{position:relative; display:flex; gap:10px; flex-wrap:wrap;}
.md-share-sheet__btn{flex:1 1 auto; min-width:110px; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--cream); font-family:'Space Mono',monospace; font-size:.76rem; letter-spacing:.03em; text-decoration:none; cursor:pointer; transition:all .25s var(--ease);}
.md-share-sheet__btn:hover{border-color:var(--gold-bright); color:var(--gold-bright); background:var(--surface-hover);}
.md-toast{position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(16px); background:var(--ink2); color:var(--cream); border:1px solid var(--gold); padding:11px 20px; border-radius:30px; font-family:'Space Mono',monospace; font-size:.76rem; letter-spacing:.02em; opacity:0; pointer-events:none; transition:all .35s var(--ease); z-index:9999; max-width:calc(100vw - 32px); overflow-wrap:anywhere; text-align:center; box-shadow:0 6px 20px var(--shadow-strong);}
.md-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

.pr-disclaimer{font-size:.68rem; color:var(--cream); opacity:.55; margin-top:20px; line-height:1.6; border-top:1px solid var(--line); padding-top:12px;}
@media (max-width:600px){
  .pr-holding-row{grid-template-columns:1fr; }
  .pr-remove-row{justify-self:end;}
  .pr-modal{padding:28px 20px;}
  .pr-holding-card .pr-card-top{flex-direction:column;}
}