/* UI-27 Plugins directory (public/apps-directory.js), like ChatGPT's on the
   iPhone (screenshots/references/img_4761): Installed icons, Popular, then
   categories; big rows, one short line each, + or ⋯. Rule zero: nothing
   small, few words, the same on phone and desktop. */

.apps-dir { display: flex; flex-direction: column; gap: var(--space-6); font-size: 17px; }
.apps-results { display: flex; flex-direction: column; gap: var(--space-7); }
.apps-section { display: flex; flex-direction: column; gap: var(--space-2); }
.apps-section-title { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: var(--tap-min); margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink-2); font: inherit; font-size: 20px; font-weight: 600; cursor: pointer; }
h2.apps-section-title { cursor: default; }
.apps-section-title svg { width: 20px; height: 20px; color: var(--ink-3); }
button.apps-section-title:hover { color: var(--ink); }

/* Rows: one column on the phone, a grid of the same rows on wider screens. */
.apps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 4px var(--space-4); }
.apps-row { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 8px 8px 8px 0; border-radius: 16px; cursor: pointer; }
.apps-row:hover { background: var(--panel-2); }
.apps-row-logo { position: relative; flex: none; }
.apps-row-logo .integration-logo { width: 56px; height: 56px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--panel-2); display: grid; place-items: center; overflow: hidden; }
:root:not([data-theme="light"]) .apps-row-logo .integration-logo { background: #1c1c1c; }
.apps-row-logo .integration-logo img { width: 34px; height: 34px; object-fit: contain; }
.apps-row-logo .integration-logo > svg { width: 26px; height: 26px; color: var(--ink-3); }
.apps-row-logo .integration-logo.has-logo > svg { display: none; }
.apps-row-on { position: absolute; right: -2px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); border: 2px solid var(--bg); }
.apps-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.apps-row-main strong { font-size: 17px; font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apps-row-main span { font-size: 15px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apps-row-action { width: var(--tap-min); height: var(--tap-min); flex: none; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); cursor: pointer; }
.apps-row-action svg { width: 24px; height: 24px; }
.apps-row-action:is(:hover, :focus-visible) { background: var(--panel); color: var(--ink); outline: none; }
.apps-row-action:disabled { opacity: .5; }

/* Installed: a strip of icons and +N */
.apps-installed { display: flex; gap: 12px; flex-wrap: wrap; }
.apps-installed-app, .apps-installed-more { width: 64px; height: 64px; padding: 0; border: 1px solid var(--line-2); border-radius: 16px; background: var(--panel-2); display: grid; place-items: center; cursor: pointer; overflow: hidden; }
:root:not([data-theme="light"]) :is(.apps-installed-app, .apps-installed-more) { background: #1c1c1c; }
.apps-installed-app .integration-logo { width: 40px; height: 40px; display: grid; place-items: center; border: 0; background: transparent; }
.apps-installed-app .integration-logo img { width: 38px; height: 38px; object-fit: contain; }
.apps-installed-app .integration-logo > svg { width: 26px; height: 26px; color: var(--ink-3); }
.apps-installed-app .integration-logo.has-logo > svg { display: none; }
.apps-installed-more { color: var(--ink); font: inherit; font-size: 18px; font-weight: 600; }

.apps-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); padding: 0 14px 0 8px; margin-bottom: calc(-1 * var(--space-5)); border: 0; border-radius: 999px; background: var(--panel-2); color: var(--ink); font: inherit; font-size: 16px; cursor: pointer; }
.apps-back svg { width: 20px; height: 20px; }
.apps-empty { margin: 0; color: var(--ink-3); font-size: 17px; }
.apps-notice { font-size: 16px; }

/* Rarely needed links, one tap deeper. */
.apps-group { border-radius: 18px; background: var(--panel-2); overflow: hidden; max-width: 560px; }
:root:not([data-theme="light"]) .apps-group { background: #1c1c1c; }
.apps-link { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px; padding: 0 16px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; text-align: left; cursor: pointer; }
.apps-link + .apps-link { border-top: 1px solid var(--line); }
.apps-link svg { width: 20px; height: 20px; color: var(--ink-3); }
.apps-link:hover { background: var(--hover-2, rgba(127,127,127,.08)); }

/* Search: at the top on desktop, floating at the bottom on the phone. */
.apps-dir .apps-search-dock { order: -1; }
.apps-search { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel-2); color: var(--ink-3); max-width: 560px; }
:root:not([data-theme="light"]) .apps-search { background: #1c1c1c; }
.apps-search svg { width: 22px; height: 22px; flex: none; }
.apps-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 17px; outline: none; }
.apps-search input::placeholder { color: var(--ink-3); }

@media (max-width: 760px) {
  .apps-grid { grid-template-columns: 1fr; }
  .apps-dir { padding-bottom: 96px; }
  .apps-dir .apps-search-dock { order: 0; position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 30; }
  .apps-search { max-width: none; box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  :root:not([data-theme="light"]) .apps-search { background: rgba(28,28,28,.88); }
  :root[data-theme="light"] .apps-search { background: rgba(242,242,242,.92); }
  .apps-row { min-height: 72px; }
  .apps-row-logo .integration-logo { width: 52px; height: 52px; }
}

/* Black brand marks stay visible on the dark theme. */
:root:not([data-theme="light"]) :is(.apps-row-logo, .apps-installed-app) img[src$="/github.svg"] { filter: invert(1); }