/* Prompts page, hybrid layout (Trello waj7RaSB): platform cards, a library whose folders open in place, the ⋯ menu,
   and the compact "Vis på" in the live prompt editor. Loaded after page-styles: it uses the page's own colour tokens
   (light and dark, :is(#platform-center,#platform-overlays)), logical properties for RTL, and id + class selectors so the
   page's base button rule (border, background, 44 px) never reaches these parts. */
#platform-center .hy-platforms, #platform-center .hy-library, #platform-overlays .hy-menu {
  --hy-hover: color-mix(in srgb, var(--selected) 55%, var(--surface));
  --hy-line: color-mix(in srgb, var(--border) 60%, var(--control));
  --hy-shadow: 0 1px 4px rgba(92, 77, 67, .06);
  --hy-veil: color-mix(in srgb, var(--text) 5%, transparent);
}
#platform-center :is(.hy-platforms, .hy-library) svg, #platform-overlays .hy-menu svg { width: 20px; height: 20px; flex: none; }
/* Folders open in place, so the page grows and shrinks: the scrollbar's room stays reserved and nothing shifts sideways */
html { scrollbar-gutter: stable; }

/* Platform cards: filter the library, and take drops */
#platform-center .hy-platforms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 6px; padding: 16px; border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(115deg, var(--green) 0%, var(--canvas) 50%, var(--blue) 100%); }
#platform-center .hy-card { position: relative; min-height: 72px; margin: 0; padding: 14px 18px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: flex-start; gap: 14px; text-align: start; box-shadow: var(--hy-shadow); transition: background .15s, border-color .15s; }
#platform-center .hy-card:hover:not(:disabled), #platform-center .hy-card:focus-visible { border-color: var(--hy-line); background: var(--surface); }
#platform-center .hy-card[aria-pressed="true"] { background: var(--selected); border-color: var(--control); }
#platform-center .hy-card[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 12px; inset-inline-end: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--action); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
#platform-center .hy-card:disabled { cursor: default; opacity: .6; box-shadow: none; }
#platform-center .hy-card .ss-dir-platform-icon { display: inline-flex; align-items: center; flex: none; height: 30px; }
#platform-center .hy-card .ss-dir-platform-icon :is(img, svg) { width: 28px; height: 28px; object-fit: contain; }
#platform-center .hy-card .ss-dir-platform-browsers img + img { margin-inline-start: -8px; }
#platform-center .hy-card-text { display: grid; min-width: 0; }
#platform-center .hy-card-name { font-weight: 600; font-size: 14.5px; line-height: 1.25; }
#platform-center .hy-here { font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; }
#platform-center .hy-card-count { margin-top: 2px; font-size: 12.5px; color: var(--muted); }

/* Library head: "Vis alle" shows only while a platform filter is on */
#platform-center .hy-clear { min-height: 36px; margin: 0; padding: 0 10px; border: 0; background: none; color: var(--muted); font-size: 13.5px; font-weight: 500; }
#platform-center .hy-clear:hover, #platform-center .hy-clear:focus-visible { background: none; color: var(--text); text-decoration: underline; text-underline-offset: 4px; }
#platform-center .library-head .search { margin-inline-start: auto; background: var(--surface); }

/* Library: folders first (the app's tab-shaped folders + counts), then loose prompts */
body#prompts-app #platform-center #library.hy-library { display: block; } /* beats the phone CSS's column flex, which shrank the groups to their content */
#platform-center .hy-group + .hy-group { margin-top: 28px; }
#platform-center .hy-group-label { margin: 0 0 10px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--muted); }
#platform-center .hy-folders { display: grid; grid-template-columns: repeat(var(--hy-cols), minmax(0, 1fr)); gap: 12px; align-items: start; }
#platform-center .hy-folder-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 9px; min-width: 0; } /* the track may shrink, so a long folder name ends in … instead of widening the card over its neighbour */
#platform-center .hy-prompts { display: grid; grid-template-columns: repeat(var(--hy-cols, 1), minmax(0, 1fr)); gap: 10px 12px; }

#platform-center .hy-row { position: relative; display: flex; align-items: center; min-height: 56px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--hy-shadow); }
#platform-center .hy-row-main { flex: 1; min-width: 0; min-height: 54px; margin: 0; display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 8px 6px; padding-inline-start: 16px; border: 0; border-radius: inherit; background: none; color: var(--text); text-align: start; }
#platform-center .hy-row-main:is(:hover, :focus-visible) { background: none; } /* not the page's base button tint: the whole row lights up (below) */
#platform-center .hy-row-main > svg { width: 18px; height: 18px; color: var(--muted); }
#platform-center .hy-row-text { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
#platform-center :is(.hy-row-title, .hy-row-sub) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#platform-center .hy-row-title { flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px; }
/* Search results: a second line with the prompt's folder and, for a match only in its text, the words around it */
#platform-center .hy-row-text:has(.hy-row-where) { flex-wrap: wrap; row-gap: 2px; }
#platform-center .hy-row-where { flex-basis: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--muted); }
#platform-center .hy-found { overflow-wrap: anywhere; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 16px; font-size: 13.5px; color: var(--muted); }
#platform-center :is(.hy-row-title, .hy-row-where) mark { padding: 0 1px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; }
#platform-center .hy-row-sub { flex: none; font-size: 12.5px; color: var(--muted); }
#platform-center .hy-row-main:focus-visible .hy-row-title { color: var(--accent); }
#platform-center .hy-row-meta { flex: none; display: flex; align-items: center; gap: 10px; }#platform-center .hy-badges { display: flex; align-items: center; gap: 8px; flex: none; }
#platform-center .hy-badge, #platform-center .hy-badge .ss-dir-platform-icon { display: inline-flex; align-items: center; }
#platform-center .hy-badge :is(img, svg) { width: 16px; height: 16px; object-fit: contain; }
#platform-center .hy-badge .ss-dir-platform-browsers img + img { margin-inline-start: -5px; }
#platform-center .hy-more { width: 44px; height: 44px; min-height: 44px; margin: 0; margin-inline-end: 6px; padding: 0; border: 0; border-radius: 12px; background: none; color: var(--muted); display: grid; place-items: center; flex: none; }
#platform-center .hy-more svg { fill: currentColor; }
#platform-center .hy-more:hover, #platform-center .hy-more:focus-visible, #platform-center .hy-more[aria-expanded="true"] { background: color-mix(in srgb, var(--action) 12%, transparent); color: var(--text); }

/* Folder and prompt colours are the live ones (ChatFolderCreator.colorStyle → --prompt-tint / --prompt-border) */
#platform-center .hy-folder { --hy-tint: var(--prompt-tint, var(--surface)); --hy-edge: var(--prompt-border, var(--hy-line)); position: relative; border: 1px solid var(--hy-edge); border-radius: 14px; border-start-start-radius: 5px; background: var(--hy-tint); box-shadow: var(--hy-shadow); }
html[data-theme=dark] #platform-center .hy-folder { --hy-tint: var(--prompt-dark-tint, var(--surface)); --hy-edge: var(--prompt-dark-border, var(--hy-line)); }
#platform-center .hy-folder::before { content: ""; position: absolute; inset-inline-start: -1px; top: -10px; width: 36px; height: 10px; border: 1px solid var(--hy-edge); border-bottom: 0; border-radius: 7px 7px 0 0; background: var(--hy-tint); }
#platform-center .hy-row[data-native-prompt] { background: var(--prompt-tint); border-color: var(--prompt-border); }
html[data-theme=dark] #platform-center .hy-row[data-native-prompt] { background: var(--prompt-dark-tint); border-color: var(--prompt-dark-border); }
#platform-center .hy-folder-head { display: flex; align-items: center; min-height: 54px; border-radius: 13px; border-start-start-radius: 4px; }
#platform-center .hy-folder.is-open .hy-folder-head { border-end-start-radius: 0; border-end-end-radius: 0; }
#platform-center .hy-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--muted); }
#platform-center .hy-chev { display: inline-flex; flex: none; }
#platform-center .hy-folder.is-open .hy-chev { transform: rotate(90deg); } /* the turn itself is animated in center-hybrid */
[dir="rtl"] #platform-center .hy-chev { scale: -1 1; }
#platform-center .hy-folder-body { padding: 2px 12px 6px; border-top: 1px solid var(--border); border-radius: 0 0 13px 13px; background: var(--surface); }
#platform-center .hy-folder-body .hy-row { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, var(--surface)); border-radius: 0; background: none; box-shadow: none; }
#platform-center .hy-folder-body .hy-row-main { padding-inline-start: 4px; }
#platform-center .hy-folder-body .hy-row-main > svg { display: none; }
#platform-center .hy-folder-empty { margin: 12px 4px 4px; font-size: 13.5px; color: var(--muted); }
#platform-center .hy-add { width: 100%; min-height: 44px; margin: 4px 0 0; padding: 0 4px; border: 0; border-radius: 10px; background: none; color: var(--accent); font-weight: 600; display: flex; align-items: center; justify-content: flex-start; gap: 8px; }
#platform-center .hy-add svg { width: 18px; height: 18px; }
#platform-center .hy-add:hover, #platform-center .hy-add:focus-visible { background: var(--hy-hover); color: var(--accent); }
/* Hover and keyboard focus light up the whole row or folder head (with the folder's tab): a veil over its own colour */
@media (hover: hover) {
  #platform-center :is(.hy-row, .hy-folder-head):hover, #platform-center .hy-folder:has(> .hy-folder-head:hover)::before { background-image: linear-gradient(var(--hy-veil), var(--hy-veil)); }
  #platform-center .hy-row-main:hover .hy-row-title { color: var(--accent); }
}
#platform-center :is(.hy-row, .hy-folder-head):has(> .hy-row-main:focus-visible) { background-image: linear-gradient(var(--hy-veil), var(--hy-veil)); }
#platform-center .hy-flash { animation: hy-flash 1.8s ease-out; }
@keyframes hy-flash { from { background: color-mix(in srgb, var(--accent) 22%, var(--surface)); } }

/* Drag and drop: dashed targets, accent bars, inset ring; the ghost is the live one (.drag-ghost) */
#platform-center [data-kind] { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#platform-center .hy-dragged { opacity: .45; }
body.dragging #platform-center .hy-card:not(:disabled) { border-style: dashed; border-color: var(--hy-line); }
#platform-center .hy-card.hy-drag-over { border-style: solid; border-color: var(--accent); background: var(--selected); box-shadow: inset 0 0 0 1px var(--accent); }
#platform-center .hy-drop-inside { box-shadow: inset 0 0 0 2px var(--accent); }
#platform-center #library.hy-drag-over { border-radius: 14px; background: color-mix(in srgb, var(--action) 6%, transparent); }
#platform-center :is(.hy-drop-before, .hy-drop-after)::after { content: ""; position: absolute; z-index: 2; border-radius: 2px; background: var(--accent); pointer-events: none; }
#platform-center :is(.hy-drop-before, .hy-drop-after).hy-h::after { top: 0; bottom: 0; width: 3px; }
#platform-center .hy-drop-before.hy-h::after { inset-inline-start: -8px; }
#platform-center .hy-drop-after.hy-h::after { inset-inline-end: -8px; }
#platform-center :is(.hy-drop-before, .hy-drop-after).hy-v::after { inset-inline: 0; height: 3px; }
#platform-center .hy-drop-before.hy-v::after { top: -6px; }
#platform-center .hy-drop-after.hy-v::after { bottom: -6px; }
#platform-overlays .drag-ghost.hy-ghost { padding-inline-end: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .2); opacity: .94; }

/* ⋯ menu: platforms, folder and position are set here instead of by dragging */
#platform-overlays .hy-menu { position: fixed; z-index: 30; width: 288px; max-height: calc(100dvh - 24px); overflow: auto; padding: 8px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 12px 32px rgba(38, 36, 31, .14); font: 15px/1.5 Inter, system-ui, sans-serif; }
#platform-overlays .hy-menu-label { margin: 6px 10px 2px; font-size: 12px; font-weight: 600; color: var(--muted); }
#platform-overlays .hy-menu :is(button, label) { width: 100%; min-height: 42px; margin: 0; padding: 0 10px; border: 0; border-radius: 10px; background: none; color: var(--text); display: flex; align-items: center; justify-content: flex-start; gap: 10px; font: inherit; font-size: 14.5px; text-align: start; cursor: pointer; }
#platform-overlays .hy-menu :is(button:hover, button:focus-visible, label:hover, label:focus-within) { background: var(--hy-hover); color: var(--text); }
#platform-overlays .hy-menu input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--action); }
#platform-overlays .hy-menu-icon, #platform-overlays .hy-menu-icon .ss-dir-platform-icon { display: inline-flex; align-items: center; flex: none; }
#platform-overlays .hy-menu-icon :is(img, svg) { width: 18px; height: 18px; object-fit: contain; }
#platform-overlays .hy-menu-icon .ss-dir-platform-browsers img + img { margin-inline-start: -5px; }
#platform-overlays .hy-menu .danger { color: #a23b2c; }
html[data-theme=dark] #platform-overlays .hy-menu .danger { color: #f0a597; }
#platform-overlays .hy-menu hr { border: 0; border-top: 1px solid var(--border); margin: 6px 4px; }
#platform-overlays .hy-menu select { margin-inline-start: auto; width: 164px; height: 34px; padding: 0 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; text-overflow: ellipsis; }
#platform-overlays .hy-menu select:focus-visible { border-color: var(--hy-line); }
/* Selects: the app's own dropdown (appearance: base-select, as on Mine tekster) with a soft open and close.
   Browsers without base-select keep their native list. */
@supports (appearance: base-select) {
  #platform-overlays .hy-menu select { appearance: base-select; display: flex; align-items: center; gap: 8px; white-space: nowrap; overflow: hidden; cursor: pointer; }
  #platform-overlays .hy-menu select::picker-icon { content: ""; width: 7px; height: 7px; margin-inline-end: 4px; margin-block: auto; border-right: 1.75px solid; border-bottom: 1.75px solid; color: var(--muted); transform: rotate(45deg); transition: transform .18s cubic-bezier(.2, .8, .2, 1); }
  #platform-overlays .hy-menu select:open::picker-icon { transform: rotate(225deg); }
  #platform-overlays .hy-menu select::picker(select) { appearance: base-select; margin-top: 4px; padding: 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: 0 12px 32px rgba(38, 36, 31, .14); opacity: 0; translate: 0 -4px; transition: opacity .15s, translate .15s cubic-bezier(.2, .8, .2, 1), overlay .15s allow-discrete, display .15s allow-discrete; }
  #platform-overlays .hy-menu select:open::picker(select) { opacity: 1; translate: 0 0; }
  @starting-style { #platform-overlays .hy-menu select:open::picker(select) { opacity: 0; translate: 0 -4px; } }
  #platform-overlays .hy-menu select option { min-height: 40px; padding: 0 12px; border-radius: 8px; display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--text); }
  #platform-overlays .hy-menu select option:hover, #platform-overlays .hy-menu select option:focus-visible { background: var(--hy-hover); }
  #platform-overlays .hy-menu select option:checked { background: var(--selected); color: var(--accent); font-weight: 600; }
  #platform-overlays .hy-menu select option::checkmark { order: 1; margin-inline-start: auto; color: var(--accent); }
}

/* "Vis på" in the prompt editor: prompt-builder-b-20261029/editor-platforms.css, shared with Chat and Skrivebord */

/* Tablet and small laptop (the sidebar takes its share): two cards per row keep every name on one line */
@media (max-width: 1099px) {
  #platform-center .hy-platforms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Phones */
@media (max-width: 767px) {
  #platform-center .hy-platforms { gap: 10px; padding: 12px; border-radius: 18px; }
  #platform-center .hy-card { min-height: 0; padding: 12px; flex-direction: column; align-items: flex-start; gap: 10px; }
  #platform-center .hy-row-text:has(.hy-row-meta) { flex-wrap: wrap; row-gap: 4px; }
  #platform-center .hy-row-meta { flex-basis: 100%; }
  body#prompts-app #platform-center .library-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; } /* "Vis alle" beside the heading, not alone on a line */
  #platform-center .library-head .search { grid-column: 1 / -1; margin-inline-start: 0; }

}

/* Reduced motion: these parts' own transitions and animations switch off */
@media (prefers-reduced-motion: reduce) {
  #platform-center :is(.hy-platforms, .hy-library), #platform-center :is(.hy-platforms, .hy-library) *, #platform-overlays :is(.hy-menu, .hy-menu *) { transition: none !important; animation: none !important; }
  #platform-overlays .hy-menu select::picker(select), #platform-overlays .hy-menu select::picker-icon { transition: none; }
}