.of-search-launcher { display:inline-flex; align-items:center; justify-content:center; flex:0 0 36px; width:36px; height:36px; border:1px solid #596273; border-radius:10px; background:#333b49; color:#e2e8f0; cursor:pointer; }
.of-search-launcher:hover { background:#43516a; color:#fff; }
.of-search-launcher:focus-visible, .of-search-dialog button:focus-visible { outline:2px solid #60a5fa; outline-offset:3px; }
.of-search-dialog { --search-bg:#292d34; --search-soft:#20242b; --search-text:#f1f5f9; --search-muted:#abb7ca; --search-border:#46505f; padding:0; margin:12vh auto auto; width:min(680px,calc(100vw - 32px)); max-width:none; max-height:76dvh; border:1px solid var(--search-border); border-radius:18px; color:var(--search-text); background:var(--search-bg); box-shadow:0 24px 80px #0008; font-family:ui-sans-serif,system-ui,sans-serif; }
.of-search-dialog::backdrop { background:#080e1bb8; backdrop-filter:blur(5px); }
.of-search-panel { display:flex; flex-direction:column; max-height:76dvh; }
.of-search-header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 22px 16px; }
.of-search-header h2 { margin:0; font-size:22px; line-height:1.3; font-weight:800; color:var(--search-text); }
.of-search-field { display:flex; align-items:center; gap:12px; margin:0 22px; padding:0 14px; background:var(--search-soft); border:1px solid var(--search-border); border-radius:11px; color:var(--search-muted); }
.of-search-field:focus-within { border-color:#60a5fa; box-shadow:0 0 0 2px #60a5fa26; }
.of-search-field input { min-width:0; flex:1; width:100%; height:52px; padding:0; border:0; outline:0; background:transparent; color:var(--search-text); font:inherit; font-size:16px; box-shadow:none; }
.of-search-field input::placeholder { color:var(--search-muted); opacity:1; }
.of-search-field kbd { font:11px ui-sans-serif,system-ui; padding:3px 5px; border:1px solid var(--search-border); border-radius:4px; }
.of-search-status:empty { display:none; }
.of-search-status { flex-shrink:0; margin:0; padding:14px 22px; color:var(--search-muted); font-size:12px; line-height:1.6; }
.of-search-results { min-height:120px; overflow:auto; overscroll-behavior:contain; padding:0 22px 20px; }
.of-search-results h3 { margin:0 0 10px; color:var(--search-muted); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.of-search-result { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:10px; padding:16px; border:1px solid var(--search-border); border-radius:12px; background:var(--search-soft); }
.of-search-result > div { min-width:0; }
.of-search-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-shrink:0; }
.of-search-result strong { display:block; overflow-wrap:anywhere; color:var(--search-text); font-size:15px; }
.of-search-result p { margin:5px 0 0; color:var(--search-muted); font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.of-search-result button, .of-search-retry { flex-shrink:0; min-height:40px; padding:9px 12px; border:1px solid #478dff; border-radius:8px; background:#2563eb; color:#fff; font-size:12px; font-weight:700; cursor:pointer; }
.of-search-result button:hover, .of-search-retry:hover { background:#1d4ed8; }
.of-search-result button:disabled { opacity:.5; cursor:default; }
.of-search-access .of-search-back { padding:6px 0; border:0; background:transparent; color:#60a5fa; font-size:12px; cursor:pointer; }
.of-search-access h3 { margin:12px 0 6px; color:var(--search-text); text-transform:none; letter-spacing:normal; font-size:18px; }
.of-search-access p { color:var(--search-muted); font-size:12px; line-height:1.6; }
.of-search-project-filter { box-sizing:border-box; width:100%; height:44px; margin-top:12px; padding:10px 12px; border:1px solid var(--search-border); border-radius:8px; background:var(--search-soft); color:var(--search-text); font-size:16px; }
.of-search-project-filter:focus { outline:2px solid #60a5fa; outline-offset:1px; }
.of-search-access-status { min-height:20px; margin:10px 0; }
.of-search-project { display:flex; align-items:center; gap:12px; margin:8px 0; padding:12px; border:1px solid var(--search-border); border-radius:10px; background:var(--search-soft); cursor:pointer; }
.of-search-project input { width:20px; height:20px; flex:0 0 20px; accent-color:#22c55e; }
.of-search-project input:disabled { opacity:.5; }
.of-search-project strong { display:block; color:var(--search-text); font-size:14px; overflow-wrap:anywhere; }
.of-search-project small { display:block; margin-top:4px; color:var(--search-muted); font-size:11px; overflow-wrap:anywhere; }
.of-search-member form { display:grid; gap:16px; margin-top:18px; }
.of-search-member-field { display:grid; gap:7px; color:var(--search-text); font-size:12px; font-weight:600; }
.of-search-member-field input, .of-search-member-field select { box-sizing:border-box; width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--search-border); border-radius:8px; background:var(--search-soft); color:var(--search-text); font:inherit; font-size:16px; }
.of-search-member-field input:focus, .of-search-member-field select:focus { outline:2px solid #60a5fa; outline-offset:1px; }
.of-search-member fieldset { min-width:0; margin:0; padding:0; border:0; }
.of-search-member legend { margin-bottom:9px; padding:0; color:var(--search-text); font-size:12px; font-weight:600; }
.of-search-member-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.of-search-member-choice { display:flex; align-items:center; gap:9px; min-height:44px; padding:8px 10px; border:1px solid var(--search-border); border-radius:8px; background:var(--search-soft); color:var(--search-text); font-size:12px; cursor:pointer; }
.of-search-member-choice:has(input:checked) { border-color:#60a5fa; background:#2563eb20; }
.of-search-member-choice input { flex:0 0 18px; width:18px; height:18px; accent-color:#2563eb; }
.of-search-member-choice span { min-width:0; overflow-wrap:anywhere; }
.of-search-member .of-search-access-status { margin:0; min-height:0; }
.of-search-member-submit, .of-search-member-secondary { min-height:44px; padding:10px 14px; border:1px solid #478dff; border-radius:8px; background:#2563eb; color:#fff; font-size:13px; font-weight:700; cursor:pointer; }
.of-search-member-submit:hover { background:#1d4ed8; }
.of-search-member-secondary { border-color:var(--search-border); background:var(--search-soft); color:var(--search-text); }
.of-search-member button:disabled, .of-search-member input:disabled, .of-search-member select:disabled { opacity:.5; cursor:default; }
.of-search-member-actions { display:flex; flex-wrap:wrap; gap:10px; }
.of-search-member-actions button { flex:1; }
.of-search-member .of-search-member-success { margin:0; color:var(--search-text); font-size:15px; font-weight:700; overflow-wrap:anywhere; }
html[data-theme="light"] .of-search-launcher { background:#fff; border-color:#cbd5e1; color:#334155; }
html[data-theme="light"] .of-search-dialog { --search-bg:#fff; --search-soft:#f8fafc; --search-text:#0f172a; --search-muted:#526079; --search-border:#cbd5e1; }
@media (max-width:640px) {
    .of-search-dialog { margin:0; width:100%; height:100dvh; max-height:100dvh; border:0; border-radius:0; }
    .of-search-panel { height:100%; max-height:100dvh; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); box-sizing:border-box; }
    .of-search-header { padding:18px 16px; }
    .of-search-field { margin:0 16px; }
    .of-search-field kbd { display:none; }
    .of-search-status { padding:14px 16px; }
    .of-search-results { flex:1; padding:0 16px 16px; }
    .of-search-result { padding:14px; align-items:stretch; flex-direction:column; gap:12px; }
    .of-search-result button { width:100%; min-height:44px; }
    .of-search-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); width:100%; }
    .of-search-actions button { min-width:0; flex-shrink:1; }
}


/* Keep thumbnails beside the result text while actions wrap below on mobile. */
.of-search-info { position:relative; box-sizing:border-box; min-width:0; min-height:52px; padding-left:66px; }
.of-search-result > .of-search-info { flex:1; }
.of-search-project > .of-search-info { flex:1; }
.of-search-thumbnail { position:absolute; top:0; left:0; display:flex; align-items:center; justify-content:center; width:52px; height:52px; overflow:hidden; border:1px solid var(--search-border); border-radius:10px; box-sizing:border-box; background:var(--search-bg); color:var(--search-muted); }
.of-search-thumbnail.is-person { border-radius:50%; }
.of-search-initials { font-size:15px; font-weight:700; line-height:1; }
.of-search-thumbnail img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
@media (max-width:640px) {
    .of-search-info { min-height:46px; padding-left:58px; }
    .of-search-thumbnail { width:46px; height:46px; border-radius:9px; }
    .of-search-thumbnail.is-person { border-radius:50%; }
}

/* Compact, selectable keyword suggestions, like the Script editor recommendations. */
.of-search-suggestions { display:flex; flex-wrap:wrap; gap:7px; flex-shrink:0; margin:10px 22px 12px; padding:10px; max-height:136px; overflow:auto; border:1px solid var(--search-border); border-radius:10px; background:var(--search-soft); }
.of-search-suggestions[hidden] { display:none; }
.of-search-suggestions button { min-height:40px; padding:8px 13px; border:1px solid var(--search-border); border-radius:7px; background:var(--search-bg); color:var(--search-text); font-size:12px; font-weight:600; cursor:pointer; }
.of-search-suggestions button:hover, .of-search-suggestions button:focus-visible { border-color:#60a5fa; background:#2563eb20; outline:2px solid #60a5fa; outline-offset:1px; }
@media (max-width:640px) { .of-search-suggestions { margin:10px 16px 12px; max-height:112px; } }