/* OPERATION OSPREY / R01.HF17 — CONVERSATION NAVIGATOR VISUAL SKIN
   Scoped to .osp-nav-*. Requires HF15/HF16 markup. Zero controller/data changes.
   Decorative crops are taken only from the user-approved navigator concept.
*/
.osp-nav-backdrop {
  background:rgba(0,5,12,.81);
  -webkit-backdrop-filter:blur(10px) saturate(80%);
  backdrop-filter:blur(10px) saturate(80%);
}
.osp-nav-dialog {
  --osp-line:#175471;
  --osp-text:#eaf7ff;
  position:relative;
  width:min(1220px,calc(100vw - 44px));
  max-width:1220px;
  height:min(840px,calc(100dvh - 44px));
  min-height:300px;
  border-radius:16px;
  border:1px solid #18bdf0;
  background:#03101b;
  box-shadow:0 0 0 1px rgba(0,143,196,.24),0 0 24px rgba(0,205,255,.29),0 0 70px rgba(0,153,255,.13),0 35px 100px rgba(0,0,0,.86);
  overflow:hidden;
}
/* Subtle luminous upper and lower rims from concept art; no animation or GPU filters. */
.osp-nav-dialog:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  border-radius:15px;
  box-shadow:inset 0 1px 0 rgba(110,238,255,.56),inset 0 -1px 0 rgba(11,157,226,.42);
}
.osp-nav-head {
  position:relative;
  min-height:148px;
  padding:25px 29px;
  gap:19px;
  overflow:hidden;
  background:linear-gradient(95deg,#00121f 0%,#031c2d 56%,#041a2b 100%);
  border-bottom:1px solid #1c92bc;
  box-shadow:inset 0 -1px 0 #03ccfd15;
}
.osp-nav-head:before {
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:65%;
  pointer-events:none;
  background:url('../img/raven-navigator-fortress-hf17.webp') center center/cover no-repeat;
  opacity:.96;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,#000 28%,#000 100%);
}
.osp-nav-head:after {
  content:"";
  position:absolute;
  right:0;bottom:0;
  width:60%;height:30px;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(0,11,20,.55),transparent);
}
.osp-nav-head-icon {
  width:67px;
  height:67px;
  border-radius:17px;
  border:1px solid #17c8f8;
  color:#18ddff;
  background:linear-gradient(145deg,#07364c,#001726 75%);
  box-shadow:0 0 18px rgba(0,210,255,.32),inset 0 0 15px rgba(0,187,248,.24);
}
.osp-nav-head-icon svg {width:30px;height:30px;stroke-width:1.9}
.osp-nav-head-copy {position:relative;z-index:2;text-shadow:0 1px 14px rgba(0,10,20,.8)}
.osp-nav-head-copy>span {font-size:11px;color:#1ddcff;letter-spacing:2.25px;font-weight:850}
.osp-nav-head-copy h2 {font-size:30px;line-height:1.2;margin:6px 0 6px;color:#f5fbff;letter-spacing:-.85px;font-weight:830}
.osp-nav-head-copy p {font-size:14px;color:#a6c4d8;line-height:1.4}
.osp-nav-close {
  position:relative;z-index:3;
  width:46px;height:46px;
  margin-left:auto;
  border-radius:12px;
  color:#d8ecfa;
  border:1px solid #297b9d;
  background:rgba(1,20,34,.75);
  box-shadow:inset 0 1px 0 #4aa5c229;
}
.osp-nav-close:hover {border-color:#28dbff;background:#0b3952;color:white;box-shadow:0 0 14px #00b9ed44}
.osp-nav-layout {grid-template-columns:322px minmax(0,1fr);background:#02121f}
.osp-nav-aside {
  position:relative;
  isolation:isolate;
  background:linear-gradient(180deg,#051724,#041422 42%,#031421 100%);
  border-right:1px solid #1d5776;
  overflow:hidden;
}
.osp-nav-aside:before {
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:min(52%,390px);
  z-index:-1;
  pointer-events:none;
  opacity:.62;
  background:
    linear-gradient(180deg,#051724 0%,rgba(4,20,33,.78) 27%,rgba(1,13,23,.08) 69%,rgba(0,12,22,.16) 100%),
    url('../img/raven-navigator-branches-hf17.webp') center bottom/cover no-repeat;
}
.osp-nav-aside-label {padding:23px 24px 19px;gap:11px;font-size:15px;color:#f1f9ff;letter-spacing:0}
.osp-nav-aside-label svg {color:#21d8ff;width:21px;height:21px}
.osp-nav-aside-label span {font-size:12px;min-width:34px;text-align:center;padding:7px 10px;color:#ddf6ff;background:#084260;border:1px solid #0c4f6c;border-radius:99px}
.osp-nav-branch-scroll {scrollbar-color:#1e6586 #061b2d;scrollbar-width:thin}
.osp-nav-branches {padding:0 18px 18px;gap:8px}
.osp-nav-branch {
  min-height:74px;
  padding:12px 12px;
  gap:13px;
  border-radius:12px;
  color:#d6e8f6;
  background:linear-gradient(90deg,rgba(5,28,45,.70),rgba(4,22,37,.44));
  border:1px solid transparent;
  transition:background-color .12s,border-color .12s,box-shadow .12s;
}
.osp-nav-branch:hover {border-color:#2188ae;background:linear-gradient(90deg,#103953,#082439)}
.osp-nav-branch.selected {
  background:linear-gradient(105deg,#0e415e,#082c44 95%);
  border-color:#23ceff;
  box-shadow:inset 4px 0 #21dfff,0 0 14px #00d3fa31,inset 0 1px 0 #81e9ff20;
}
.osp-nav-branch-glyph {
  width:43px;height:43px;
  border-radius:12px;
  color:#2bddff;
  border:1px solid #22a0cb;
  background:linear-gradient(135deg,#042539,#061c2b);
  box-shadow:inset 0 0 15px rgba(7,206,255,.1);
}
.osp-nav-branch-glyph svg {width:22px;height:22px}
.osp-nav-branch-dot {font-size:17px;color:#eefbff;background:linear-gradient(135deg,#15678b,#0a3653 65%);box-shadow:inset 0 1px 0 #7adfff26}
.osp-nav-branch-copy{gap:5px}
.osp-nav-branch-copy strong{font-size:14px;color:#f1f8fd;letter-spacing:-.1px}
.osp-nav-branch-copy small{font-size:11px;color:#9fbcd0;line-height:1.4}
.osp-nav-branch>b {font-size:12px;color:#a3ebff;border-radius:999px;padding:6px 9px;background:#083e57;min-width:32px;text-align:center}
.osp-nav-pagination {font-size:11px;color:#97bbcc;gap:7px}
.osp-nav-showbranches {border-color:#267394;border-radius:10px;background:#09263a}
.osp-nav-workspace {background:linear-gradient(170deg,#031723 0%,#02111d 70%,#02101b 100%)}
.osp-nav-controls {padding:21px 23px 17px;grid-template-columns:minmax(0,1fr) minmax(230px,350px);column-gap:18px;row-gap:14px;border-bottom:1px solid #15516d;background:linear-gradient(180deg,rgba(3,23,37,.9),rgba(3,19,30,.85))}
.osp-nav-tabs {gap:9px}
.osp-nav-tabs button {
  font-size:13px;
  gap:9px;
  min-height:46px;
  padding:11px 16px;
  border:1px solid #12364a;
  background:linear-gradient(180deg,#081f31,#061827);
  border-radius:11px;
  color:#c1dae9;
}
.osp-nav-tabs button svg {width:19px;height:19px}
.osp-nav-tabs button.active {
  color:#28dcff;
  border-color:#2cd9ff;
  background:linear-gradient(180deg,#105274,#07354e);
  box-shadow:inset 0 1px #94ebff40,0 0 16px #00bef547;
}
.osp-nav-tabs button:hover {background:#0d3b57;border-color:#1a8bb4;color:#fff}
.osp-nav-search {height:47px;border:1px solid #20749b;background:linear-gradient(145deg,#041a2a,#011320);padding:0 15px;gap:11px;box-shadow:inset 0 1px 0 #28b4e30c}
.osp-nav-search svg {color:#b4daf0;width:19px;height:19px}
.osp-nav-search input {font-size:13px;color:#effaff}
.osp-nav-search input::placeholder{color:#94aec0}
.osp-nav-filter-row {gap:15px;align-items:center}
.osp-nav-filter-row label{font-size:13px;color:#9fbed3;gap:10px}
.osp-nav-filter-row select {min-width:150px;min-height:43px;border:1px solid #2b89b0;border-radius:11px;background:#061d2c;color:#e7f7ff;padding:9px 12px;font-size:12px}
.osp-nav-filter-row select:hover {border-color:#35cbfc}
.osp-nav-results {padding:0 21px 21px;scrollbar-color:#1c718f #031723}
.osp-nav-results-head {padding:17px 2px 16px;background:#031725f7;border-bottom:1px solid #1d5771}
.osp-nav-results-head strong {font-size:16px;color:#f1faff;font-weight:780}
.osp-nav-results-head span{font-size:12px;color:#71c5e4}
.osp-nav-results-list {padding:10px 0 0;gap:8px}
.osp-nav-result {
  position:relative;
  overflow:hidden;
  min-height:91px;
  padding:13px 17px;
  gap:15px;
  border:1px solid #1b6283;
  border-radius:13px;
  background:linear-gradient(105deg,#082439 0%,#061f32 55%,#051a29 100%);
  box-shadow:inset 0 1px 0 rgba(51,161,193,.1);
  isolation:isolate;
}
.osp-nav-result:before {content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:transparent}
.osp-nav-result:hover {border-color:#2ae0ff;background:linear-gradient(100deg,#0e3c58,#08283f);box-shadow:0 0 15px #0aceff2b}
.osp-nav-result:hover:before,.osp-nav-result.is-current:before {background:#25e3ff;box-shadow:0 0 12px #1ad5fd}
.osp-nav-result.is-current {border-color:#1bdaff;background:linear-gradient(90deg,#0a2a43,#062034 80%);box-shadow:inset 3px 0 #12d9ff,0 0 16px #00bffb24}
.osp-nav-result.is-current:after {
  content:"";
  position:absolute;
  right:0;top:0;bottom:0;width:31%;
  z-index:-1;
  opacity:.21;
  background:linear-gradient(90deg,transparent,#02172640),url('../img/raven-sidebar.webp') center 22%/cover no-repeat;
  pointer-events:none;
}
.osp-nav-avatar {width:53px;height:53px;border:1px solid #2bd8ff;box-shadow:0 0 0 4px #051722,0 0 15px rgba(1,194,253,.2)}
.osp-nav-result-main {gap:7px}
.osp-nav-result-main strong {font-size:15px;gap:8px}
.osp-nav-result-main strong span{font-size:12px;color:#a5c8df}
.osp-nav-result-main strong em {font-size:11px;border:1px solid #0a759e;color:#30e3ff;padding:3px 9px;background:#064662}
.osp-nav-result-main small {font-size:12px;line-height:1.5;color:#a6c6db}
.osp-nav-result>svg:last-child {width:22px;height:22px;color:#26d8ff;filter:drop-shadow(0 0 6px #00b3ff64)}
.osp-nav-subline{color:#50c9ed;font-size:11px}
.osp-nav-path-marker {width:41px;height:41px;border-radius:12px;background:#0c405d}
.osp-nav-path-label{font-size:13px;color:#dcf4ff;padding:11px 6px}
.osp-nav-more{border-color:#2a8bb3;background:#072437}
.osp-nav-footer {min-height:72px;padding:14px 29px;border-top:1px solid #1a779c;background:linear-gradient(90deg,#041b2b,#031523 80%);box-shadow:inset 0 2px #1acaff0d}
.osp-nav-footer span {font-size:11px;color:#a9cfe2;gap:10px;line-height:1.45}
.osp-nav-footer span svg {width:19px;height:19px}
.osp-nav-footer button {padding:12px 20px;border-radius:11px;border:1px solid #2399c3;font-size:13px;font-weight:700;color:#dff7ff;background:linear-gradient(135deg,#07334d,#082235)}
.osp-nav-footer button:hover{border-color:#1fd6ff;background:#104a65;box-shadow:0 0 12px #00c7f733}
.osp-nav-dialog button:focus-visible,.osp-nav-dialog input:focus-visible,.osp-nav-dialog select:focus-visible {outline:2px solid #24e5ff;outline-offset:3px}
/* Tablet — keep two columns and sufficient targets; no overflow. */
@media (max-width:1040px) and (min-width:591px) {
 .osp-nav-dialog {width:min(960px,calc(100vw - 30px));max-width:none}
 .osp-nav-layout {grid-template-columns:240px minmax(0,1fr)}
 .osp-nav-head {min-height:126px;padding:20px}
 .osp-nav-head-icon {width:56px;height:56px}
 .osp-nav-head-copy h2 {font-size:25px}
 .osp-nav-aside-label {padding:16px 13px;font-size:13px}
 .osp-nav-branches {padding:0 9px 10px;gap:5px}
 .osp-nav-branch {padding:8px;gap:8px;min-height:65px}
 .osp-nav-branch-glyph {width:34px;height:34px}
 .osp-nav-branch-copy strong {font-size:12px}
 .osp-nav-branch-copy small {font-size:10px}
 .osp-nav-controls {grid-template-columns:1fr;padding:12px 14px;gap:10px}
 .osp-nav-tabs button {min-height:39px;font-size:12px;padding:9px 12px}
 .osp-nav-search {height:41px}
 .osp-nav-filter-row {justify-content:flex-end}
 .osp-nav-filter-row select {min-height:36px}
 .osp-nav-results {padding:0 12px 12px}
 .osp-nav-result {min-height:73px;padding:10px;gap:12px}
 .osp-nav-avatar {width:42px;height:42px}
 .osp-nav-result-main strong {font-size:13px}
 .osp-nav-result-main strong span {font-size:11px}
 .osp-nav-footer {min-height:59px;padding:9px 17px}
}
/* Mobile: retain HF15's bottom sheet and horizontal branch rail, adapt the visual skin. */
@media (max-width:590px){
 .osp-nav-backdrop {padding:0;background:rgba(0,6,14,.74)}
 .osp-nav-dialog {width:100%;max-width:none;min-height:300px;height:min(91dvh,900px);border-radius:19px 19px 0 0;border-bottom:0;box-shadow:0 -15px 50px #000d,0 0 22px #02c4ff38}
 .osp-nav-head {min-height:109px;padding:24px 13px 12px;gap:10px;background:linear-gradient(90deg,#021522 0%,#052235 60%,#041724 100%)}
 .osp-nav-head:before{width:74%;opacity:.6;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%,#000 100%)}
 .osp-nav-head-icon {width:40px;height:40px;border-radius:11px}
 .osp-nav-head-icon svg {width:21px;height:21px}
 .osp-nav-head-copy>span {font-size:8px;letter-spacing:1.05px}
 .osp-nav-head-copy h2 {font-size:19px;margin:4px 0 3px;letter-spacing:-.3px}
 .osp-nav-head-copy p {font-size:10px}
 .osp-nav-close {width:35px;height:35px;border-radius:9px}
 .osp-nav-aside {background:linear-gradient(180deg,#031825,#051a2a);border-bottom:1px solid #155978;overflow:visible}
 .osp-nav-aside:before{display:none}
 .osp-nav-aside-label {padding:7px 12px 7px;font-size:11px;gap:7px}
 .osp-nav-aside-label svg {width:15px;height:15px}
 .osp-nav-aside-label span {font-size:10px;padding:3px 7px;min-width:0}
 .osp-nav-branch-scroll {max-height:77px}
 .osp-nav-branches {padding:0 9px 8px;gap:7px}
 .osp-nav-branch {min-height:58px;min-width:130px;max-width:176px;padding:7px;gap:7px;border:1px solid #13445d;background:#082436;border-radius:10px}
 .osp-nav-branch.selected {border-color:#1fc9ff}
 .osp-nav-branch-glyph {width:28px;height:28px;border-radius:8px;font-size:11px}
 .osp-nav-branch-glyph svg {width:15px;height:15px}
 .osp-nav-branch-copy strong {font-size:11px}
 .osp-nav-branch-copy small {font-size:9px}
 .osp-nav-branch>b {font-size:9px;padding:3px 5px;min-width:21px}
 .osp-nav-controls {display:grid;grid-template-columns:minmax(0,1fr);gap:9px;padding:9px 11px 11px}
 .osp-nav-tabs {gap:5px;justify-content:space-between}
 .osp-nav-tabs button {flex:1;justify-content:center;font-size:11px;min-height:39px;padding:8px 6px;gap:5px;border-radius:8px}
 .osp-nav-tabs button svg {width:14px;height:14px}
 .osp-nav-search {height:41px;padding:0 11px;gap:8px}
 .osp-nav-search input {font-size:12px}
 .osp-nav-filter-row {justify-content:space-between;gap:7px}
 .osp-nav-filter-row label {gap:5px;font-size:11px;min-width:0}
 .osp-nav-filter-row select {min-width:0;max-width:132px;min-height:35px;font-size:11px;padding:6px 8px}
 .osp-nav-results {padding:0 10px 12px}
 .osp-nav-results-head{padding:11px 2px}
 .osp-nav-results-head strong {font-size:13px}
 .osp-nav-results-head span {font-size:10px}
 .osp-nav-results-list {gap:7px}
 .osp-nav-result {min-height:70px;padding:10px 9px;gap:11px;border-radius:10px}
 .osp-nav-avatar {width:39px;height:39px;box-shadow:0 0 0 2px #061926}
 .osp-nav-result-main strong {font-size:12px;gap:5px}
 .osp-nav-result-main strong span {font-size:10px}
 .osp-nav-result-main strong em {font-size:9px;padding:2px 6px}
 .osp-nav-result-main small {font-size:10px}
 .osp-nav-result>svg:last-child {width:17px;height:17px}
 .osp-nav-footer {min-height:54px;padding:9px 11px;gap:9px}
 .osp-nav-footer span {font-size:9px;gap:5px}
 .osp-nav-footer span svg {width:14px;height:14px;flex:none}
 .osp-nav-footer button {font-size:10px;padding:8px 10px;border-radius:8px;white-space:nowrap}
 .osp-nav-grip {background:#43bde2}
}
@media (max-width:375px){
 .osp-nav-head-copy h2{font-size:17px}
 .osp-nav-head-copy>span{font-size:7px}
 .osp-nav-head-icon {width:34px;height:34px}
 .osp-nav-tabs button{font-size:10px;padding:7px 5px}
 .osp-nav-result-main strong span{font-size:9px}
 .osp-nav-result-main small{font-size:9px}
 .osp-nav-footer span {max-width:57%}
}
@media(prefers-reduced-motion:reduce){.osp-nav-branch{transition:none}}