/* Yetisearch Full Modal UI
   Uses shared theme variables from yetisearch-pro-theme.css
*/

#ys-modal { position: fixed; inset: 0; display: none; z-index: 9999; }
#ys-modal[aria-hidden="false"] { display: block; }
.ys-backdrop { position: absolute; inset: 0; background: var(--ys-overlay-bg); backdrop-filter: var(--ys-overlay-blur); }
.ys-dialog { position: relative; margin: 8vh auto; width: min(1040px, 75vw); max-height: 75vh; display:flex; flex-direction: column; background: var(--ys-panel-bg); border-radius: 14px; box-shadow: var(--ys-dialog-shadow); color: var(--ys-text); overflow: hidden; }
.ys-input-row { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--ys-border); }
.ys-input-icon { width:24px; height:24px; display:flex; align-items:center; justify-content:center; opacity:.7; }
.ys-input-icon .icon { display:block; width:20px; height:20px; color: var(--ys-text-muted); }
#ys-input { flex:1; background: transparent; border:0; color:var(--ys-text); font-size:18px; outline:none; }
.ys-segment { position: relative; display:inline-flex; align-items:center; gap:0; padding:2px; border:1px solid var(--ys-border); border-radius:18px; margin-right:8px; background: transparent; height:36px; }
.ys-segment:focus-within { box-shadow: 0 0 0 2px var(--ys-accent-ring); }
.ys-segment button:focus, .ys-segment button:focus-visible { outline: none; box-shadow: none; }
.ys-segment__slider { position:absolute; top:2px; bottom:2px; left:0px; width:0; border-radius:16px; background: var(--ys-segment-active-bg); transition: transform .18s ease, width .18s ease, left .18s ease; pointer-events:none; }
.ys-filter { position: relative; appearance:none; border:0; background:transparent; color:var(--ys-text-muted); padding:6px 12px; border-radius:14px; cursor:pointer; font-size:12px; z-index:1; }
.ys-theme, .ys-filter { position: relative; appearance:none; border:0; background:transparent; color:var(--ys-text-muted); padding:5px 12px; border-radius:14px; cursor:pointer; font-size:12px; z-index:1; }
/* Theme segment buttons are icon-only; fix width so slider width is consistent (36px) */
.ys-theme-segment .ys-theme { width:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.ys-theme-segment .ys-theme .icon { width:18px; height:18px; }
.ys-filter[aria-pressed="false"], .ys-theme[aria-pressed="false"] { color: var(--ys-text-muted); }
.ys-filter[aria-pressed="true"], .ys-theme[aria-pressed="true"] { color: var(--ys-segment-active-text); }
.ys-segment .icon { color: currentColor; }
.ys-theme { font-size:14px; line-height:1; }
.ys-theme .icon { width:18px; height:18px; }

/* Slider color uses --ys-segment-active-bg for both segments; no per-control overrides */
.ys-filter:hover, .ys-theme:hover { text-decoration:none; }
.ys-cancel { background: transparent; color: var(--ys-text-muted); border: 0; font: inherit; cursor: pointer; padding: 6px 10px; }
.ys-cancel:hover { color: var(--ys-text); }

/* Generic pill button (for Cancel) */
.ys-btn { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; font-weight: 400;border-radius:18px; border:1px solid var(--ys-border); background: transparent; color: var(--ys-text); cursor:pointer; font-size:12px; }
.ys-btn:hover { background: var(--ys-result-hover); }
.ys-btn .icon { width:16px; height:16px; }

.ys-body { display:flex; min-height: 0; flex: 1; }
.ys-idle .ys-body { display: none; }
.ys-left { width: 47%; border-right:1px solid var(--ys-border); display:flex; flex-direction:column; }
.ys-right { width: 53%; background: var(--ys-panel-alt); display:flex; flex-direction: column; min-height: 0; }

.ys-meta { font-size: 12px; color: var(--ys-text-muted); padding: 4px 12px; border-bottom:1px solid var(--ys-border); transition: opacity 0.1s ease; }
.ys-list { list-style: none; margin: 0;overflow:auto; flex: 1; transition: opacity 0.1s ease; }
.ys-item { margin-top: 0;}
.ys-item-link { display:block; padding: 8px 12px; color: inherit; text-decoration:none; }
.ys-item[aria-selected="true"] .ys-item-link { background: var(--ys-result-selected-bg);}
.ys-item-title { font-size: 16px; color: var(--ys-text); }
.ys-item-crumbs { font-size: 14px; color: var(--ys-text-muted); margin-top: 1px; }

.ys-footer { display: flex; align-items: center;justify-content: space-between;padding: 6px 10px;border-top: 1px solid var(--ys-border);}
.ys-pagination { padding: 0; display:inline-flex; border: 1px solid var(--ys-border); border-radius: 25px; overflow: hidden;}
.ys-page { padding: 4px 12px; background: transparent; color: var(--ys-text-muted); border: 0; font-size: 12px;cursor:pointer; }
.ys-page[aria-current="true"], .ys-page:hover { color: var(--ys-segment-active-text); border-color: var(--ys-border); background: var(--ys-segment-active-bg); }
.ys-brand { margin-left: auto; font-size: 12px; color: var(--ys-text-muted); text-decoration: none; }
.ys-brand:hover { color: var(--ys-text); text-decoration: underline; }

.ys-preview-inner { padding: 14px 16px 18px; height:100%; overflow:auto; }
.ys-preview-breadcrumbs { font-size: 12px; color: var(--ys-text-muted); margin-bottom: 6px; }
.ys-preview-title { margin: 0 0 10px; font-size: 20px; line-height: 1.2; color: var(--ys-text); }
.ys-preview-excerpt { color: var(--ys-text); line-height: 1.65; }
.ys-preview-excerpt mark { background: var(--ys-highlight-bg); color: var(--ys-highlight-text); padding: 0 2px; border-radius: 3px; border-bottom:0;}
.ys-item-title mark, .ys-item-crumbs mark { background: var(--ys-highlight-bg); color: var(--ys-highlight-text); padding: 0 2px; border-radius: 3px; border-bottom: 0; }

@media (max-width: 860px) {
  .ys-dialog { margin: 0; border-radius: 0; height: 100%; width: 100%; max-height: 100vh; }
  .ys-body { flex-direction: column; }
  .ys-left, .ys-right { width: 100%; }
  .ys-right { border-top: 1px solid var(--ys-border); min-height: 180px; }
}