/* Searching the conversation from its header: a field that opens under the companion's name, live results in a
 * panel over the conversation, and matches marked in the messages themselves. Uses the Morning tokens. */
.sunrise-app .convo-search { position: relative; flex: 1 0 100%; order: 10; }
.sunrise-app .convo-search[hidden], .sunrise-app .convo-search-panel[hidden] { display: none; }

.sunrise-app .convo-search-form { display: flex; align-items: center; gap: .5rem; padding: 0 .35rem 0 1rem; background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px; }
.sunrise-app .convo-search-form:focus-within { border-color: var(--airmail-blue); box-shadow: 0 0 0 3px rgb(42 86 184 / .18); }
.sunrise-app .convo-search-icon { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.sunrise-app .convo-search-input { flex: 1; min-width: 0; min-height: 48px; padding: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; outline: none; }
.sunrise-app .convo-search-input::placeholder { color: var(--muted); opacity: 1; }
.sunrise-app .convo-search-input::-webkit-search-cancel-button { display: none; }
.sunrise-app .convo-search-input:focus-visible { outline: none; }
.sunrise-app .convo-search-close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.sunrise-app .convo-search-close:hover { background: var(--surface-2); color: var(--ink); }
.sunrise-app .convo-search-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.sunrise-app .convo-search-panel { position: absolute; z-index: 20; top: calc(100% + .5rem); left: 0; right: 0; max-height: min(60vh, 34rem); overflow-y: auto; overscroll-behavior: contain; padding: .4rem; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 22px 44px -20px rgb(27 42 78 / .4); }
/* A thin bar runs along the top while newer results are on their way; the old ones dim meanwhile */
.sunrise-app .convo-search-panel::before { content: ""; position: sticky; top: -.4rem; display: block; height: 3px; margin: -.4rem -.4rem .1rem; background: linear-gradient(90deg, transparent, var(--airmail-blue), transparent) 0 0 / 40% 100% no-repeat; opacity: 0; }
.sunrise-app .convo-search-panel:has(#search_results[busy])::before { opacity: 1; animation: search-busy 1s linear infinite; }
.sunrise-app #search_results { display: block; }
.sunrise-app #search_results[busy] { opacity: .55; transition: opacity .15s .1s; }
.sunrise-app #search_results:empty::before { content: "Searching…"; display: block; padding: .75rem; color: var(--muted); font-size: .9rem; }
@keyframes search-busy { from { background-position: -40% 0; } to { background-position: 140% 0; } }

.sunrise-app .search-summary, .sunrise-app .search-empty { margin: 0; padding: .6rem .75rem .4rem; color: var(--muted); font-size: .85rem; }
.sunrise-app .search-empty { padding-block: .9rem; }
.sunrise-app .search-results { list-style: none; margin: 0; padding: 0; }
.sunrise-app .convo-search-panel .earlier-link { margin: .5rem 0; font-size: .85rem; }

.sunrise-app main .search-results a.search-result { display: block; padding: .65rem .8rem; border-radius: 14px; color: var(--ink); text-decoration: none; scroll-margin: .5rem; }
.sunrise-app .search-result:hover, .sunrise-app .search-result[aria-selected="true"] { background: var(--surface-2); }
.sunrise-app .search-result[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--airmail-blue); }
.sunrise-app .search-result-meta { display: flex; flex-wrap: wrap; gap: 0 .5rem; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.sunrise-app .search-result-meta strong { color: var(--ink); }
.sunrise-app .search-result .search-snippet { display: -webkit-box; margin-top: .15rem; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .95rem; line-height: 1.45; }
.sunrise-app .search-result mark, .sunrise-app .search-page-results mark { background: #ffe08a; color: var(--ink); border-radius: 3px; padding: 0 .1em; }

/* The standalone search page lists the same results without the panel */
.sunrise-app .search-page-results { margin-top: 1.5rem; }
.sunrise-app main .search-page-results a.search-result { border-bottom: 1px solid var(--line); border-radius: 0; }

/* Matches in the conversation itself, and the message a result points at */
.sunrise-app .history mark.search-hit { background: #ffe08a; color: var(--ink); border-radius: 3px; padding: 0 .1em; }
.sunrise-app .message-target .bubble, .sunrise-app .message-flash .bubble { animation: message-flash 2.6s ease-out; }
@keyframes message-flash { 0%, 35% { box-shadow: 0 0 0 4px #f2c14e; } 100% { box-shadow: 0 0 0 4px transparent; } }
@media (prefers-reduced-motion: reduce) {
  .sunrise-app .message-target .bubble, .sunrise-app .message-flash .bubble { animation: none; box-shadow: 0 0 0 3px #f2c14e; }
  .sunrise-app .convo-search-panel:has(#search_results[busy])::before { animation: none; background-size: 100% 100%; }
}

/* Reading an older stretch of the conversation: a way straight back to the newest messages */
.sunrise-app main .composer-dock a.jump-latest { position: absolute; bottom: calc(100% + .75rem); left: 50%; translate: -50% 0; display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; padding: .5rem 1.15rem; background: var(--ink); color: #fff; border-radius: 999px; box-shadow: 0 10px 24px -10px rgb(27 42 78 / .55); font-size: .9rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.sunrise-app main .composer-dock a.jump-latest:hover { background: var(--link); }

/* On phones the header scrolls away, so an open search pins itself to the top of the screen */
@media (max-width: 760px) {
  .sunrise-app .convo-search:not([hidden]) { position: fixed; z-index: 40; top: 0; left: 0; right: 0; padding: .75rem 1rem; background: var(--paper); border-bottom: 1px solid var(--line); }
  .sunrise-app .convo-search-panel { top: 100%; left: .5rem; right: .5rem; max-height: calc(100dvh - 6rem); }
}