/* Clean ChatGPT-style Inline Plugins & Skills Directory (Matches 00.45.55.jpg) */
.ps-dialog > #ps-note,
.ps-dialog > #ps-runtime,
.ps-dialog > #ps-docker,
.ps-pane-note,
.ps-profile-row {
  display: none !important;
}

/* Left Sidebar Customize Tabs (Plugins | Skills) & Single-Line Installed List */
.ps-sections {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
  margin: 0 0 14px !important;
}
.ps-sections button {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--muted, #9fb0c3) !important;
  font-size: 13.5px !important;
  text-align: left !important;
  cursor: pointer !important;
}
.ps-sections button[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}
.ps-installed-side {
  border: 0 !important;
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
.ps-installed-side .ps-pane-head h3 {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--muted, #8fa3ba) !important;
  margin: 4px 8px 6px !important;
}
.ps-installed-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}
/* Clean ChatGPT Left Installed Row: Icon + Full Name, hover action button */
.ps-installed-item {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  min-width: 0 !important;
}
.ps-installed-item:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}
.ps-installed-item > p,
.ps-installed-item .ps-chip {
  display: none !important;
}
.ps-installed-item .ps-card-heading {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
.ps-installed-item .ps-icon {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(110, 160, 255, 0.22) !important;
  color: #d8e6ff !important;
  font-weight: 700 !important;
}
.ps-installed-item .ps-card-names {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.ps-installed-item .ps-card-names p {
  display: none !important;
}
.ps-installed-item .ps-card-names h4 {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #e4edf6 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ps-installed-item .ps-card-actions {
  margin: 0 !important;
  padding: 0 !important;
  display: none !important;
  gap: 4px !important;
}
.ps-installed-item:hover .ps-card-actions {
  display: flex !important;
}
.ps-installed-item .ps-card-actions button {
  padding: 2px 6px !important;
  font-size: 10.5px !important;
  min-height: 20px !important;
  border-radius: 5px !important;
}

/* Main Right Store Area (Matches ChatGPT Plugins page) */
.ps-main {
  max-width: 920px;
  margin: 0 auto;
  width: 100%;
}
.ps-main > .ps-pane-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 6px !important;
}
.ps-main > .ps-pane-head h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  margin: 0 !important;
}
.ps-tabs {
  display: flex !important;
  gap: 6px !important;
  margin: 12px 0 16px !important;
}
.ps-tabs button {
  padding: 6px 14px !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: var(--muted, #9fb0c3) !important;
  font-size: 13px !important;
  cursor: pointer !important;
}
.ps-tabs button[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
  font-weight: 500 !important;
}
.ps-toolbar {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}
.ps-toolbar input[type="search"] {
  max-width: 280px !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-size: 13px !important;
}
.ps-toolbar select {
  max-width: 170px !important;
  border-radius: 999px !important;
  padding: 6px 12px !important;
  font-size: 12.5px !important;
}

/* Clean 2-Column ChatGPT Store Rows (Icon + Title/Subtitle + '+' or '...' on right) */
.ps-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 32px !important;
  row-gap: 6px !important;
  margin-top: 8px !important;
}
.ps-card {
  padding: 10px 8px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-radius: 10px !important;
  background: transparent !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px !important;
}
.ps-card:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
.ps-card > p.input-note,
.ps-card > p.ps-risk,
.ps-card > p.ps-need,
.ps-card .ps-chip {
  display: none !important;
}
.ps-card-heading {
  grid-column: 1 / 2 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}
.ps-card-heading .ps-icon {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  border-radius: 10px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, rgba(95, 145, 255, 0.25), rgba(145, 95, 255, 0.22)) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}
.ps-card-names {
  min-width: 0 !important;
  flex: 1 !important;
}
.ps-card-names h3 {
  margin: 0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #f0f6fc !important;
}
.ps-card-names .ps-sub {
  display: none !important;
}
.ps-card > p.ps-desc {
  grid-column: 1 / 2 !important;
  margin: -2px 0 0 50px !important;
  font-size: 12px !important;
  color: var(--muted, #95a7bb) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
.ps-card-actions {
  grid-column: 2 / 3 !important;
  grid-row: 1 / 3 !important;
  margin: 0 !important;
}
.ps-card-actions button {
  padding: 4px 10px !important;
  min-height: 28px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.ps-card-actions button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.ps-skill-import-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
}
.ps-skill-import-bar input {
  flex: 1;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(0, 0, 0, 0.3);
  color: inherit;
  font-size: 12.5px;
}
.ps-editor { box-sizing: border-box; width: min(560px, calc(100vw - 28px)); max-height: calc(100dvh - 36px); overflow-y: auto; }
.ps-editor form { display: grid; gap: 14px; }
.ps-editor label { display: grid; gap: 6px; }
.ps-editor input, .ps-editor textarea, .ps-editor select { width: 100%; min-width: 0; box-sizing: border-box; }
.ps-dialog [hidden], .ps-editor [hidden] { display: none !important; }

/* 2 Nov: skill rows — title, one-line description, small Edit / On / Delete on the right (ChatGPT density) */
.ps-card-actions { display: flex !important; align-items: center !important; gap: 4px !important; flex-wrap: nowrap !important; }
.ps-skill-card .ps-card-names h3 { overflow: hidden !important; white-space: normal !important; line-height: 1.3 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; }
.ps-skill-card > p.ps-desc { margin-top: -4px !important; white-space: normal !important; line-height: 1.35 !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; }
.ps-skill-card .ps-card-actions button { min-height: 26px !important; padding: 3px 9px !important; font-size: 12.5px !important; }
.ps-skill-card .ps-card-actions .text-button { color: var(--ps-hot, #ff8a6b) !important; border-color: transparent !important; padding: 3px 6px !important; }
.ps-skill-toggle[data-on="true"] { color: #7de9df !important; border-color: rgba(125, 233, 223, 0.45) !important; }

/* 1 Nov: phone layout for the plugins page */
@media (max-width: 800px) {
  /* 2 Nov: one card per row on the phone; two columns left ~150 px per card, so text wrapped a word per line. */
  .ps-list { grid-template-columns: minmax(0, 1fr) !important; column-gap: 0 !important; row-gap: 2px !important; }
  .ps-card { padding: 8px 4px !important; gap: 8px !important; }
  .ps-card-heading { gap: 10px !important; }
  .ps-card-heading .ps-icon { width: 32px !important; height: 32px !important; flex: 0 0 32px !important; font-size: 13px !important; border-radius: 9px !important; }
  .ps-card-names h3 { font-size: 13.5px !important; }
  .ps-card > p.ps-desc { margin: -4px 0 0 42px !important; font-size: 12px !important; }
  .ps-card-actions button { min-height: 26px !important; padding: 3px 8px !important; font-size: 12px !important; }
  /* Two lines for the title and the description, instead of cutting them off after a few words. */
  .ps-skill-card .ps-card-names h3 { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; }
  .ps-skill-card > p.ps-desc { white-space: normal !important; display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important; line-height: 1.35 !important; margin-top: -2px !important; }
  .ps-skill-card .ps-card-actions { gap: 2px !important; }
  .ps-skill-card .ps-card-actions button { padding: 3px 7px !important; }
  /* The page itself: less side padding and a normal-sized New skill / Add button. */
  body.ps-inline-open #plugins-skills-dialog.ps-inline-workspace { padding: 10px 10px 16px !important; }
  .ps-head-actions button { flex: 0 0 auto !important; min-height: 30px !important; font-size: 13px !important; padding: 5px 12px !important; border-radius: 9px !important; }
  .ps-main > .ps-pane-head { flex-wrap: wrap !important; gap: 8px !important; }
  .ps-main > .ps-pane-head h3 { font-size: 18px !important; flex: 1 1 100%; }
  .ps-head-actions { display: flex !important; flex-direction: row !important; gap: 8px !important; flex: 1 1 100%; }
  .ps-head-actions button { flex: 1 1 0; min-height: 38px; font-size: 14px !important; padding: 6px 10px !important; }
}

/* Recommended block */
.rc-box{border:1px solid rgba(125,233,223,.28);border-radius:16px;background:linear-gradient(160deg,rgba(13,18,29,.7),rgba(24,16,44,.6));padding:10px 12px;margin:0 0 12px}
.rc-box>summary{cursor:pointer;font:600 15px "Segoe UI",system-ui,sans-serif;color:#7de9df}
.rc-note{font-size:12px;line-height:1.4;opacity:.8;margin:6px 0 8px}
.rc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.rc-card{border:1px solid rgba(122,156,184,.25);border-radius:12px;padding:8px 10px;background:rgba(5,7,13,.45)}
.rc-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.rc-top strong{font-size:14px}
.rc-badge{font-size:10.5px;padding:2px 7px;border-radius:999px;border:1px solid rgba(122,156,184,.4);white-space:nowrap}
.rc-badge.rc-official{color:#7de9df;border-color:#7de9df66}.rc-badge.rc-yours{color:#bc9cf7;border-color:#bc9cf766}.rc-badge.rc-open{color:#9fd2ff}
.rc-d{font-size:12.5px;line-height:1.35;margin:4px 0 2px}
.rc-meta{font-size:11.5px;opacity:.7;margin:2px 0 4px}
.rc-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.rc-btn{font-size:12px;padding:4px 10px;border-radius:999px;border:1px solid rgba(125,233,223,.4);background:transparent;color:#7de9df}
.rc-link{font-size:12px;color:#bc9cf7}
.rc-more{margin-top:8px;font-size:12.5px}.rc-more>summary{cursor:pointer;color:#bc9cf7}
.rc-place{margin:4px 0;font-size:12px}.rc-place span{opacity:.7}
.rc-search{display:flex;gap:8px;margin:10px 0}
.rc-search input{flex:1;min-width:0;background:rgba(255,255,255,.05);border:1px solid rgba(122,156,184,.25);border-radius:10px;color:inherit;padding:8px 12px;font:14px system-ui,sans-serif}
.rc-community{background:rgba(255,200,90,.12);color:#ffd27a}

/* 2 Nov: wide screens (body.ps.ps-wide) shrink .workspace to 0 px tall, so the inline Customize panel got a 50 px strip
   over the top bar. Pin it under the top bar, right of the docked sidebar, centred in the same 768 px column as Chat. */
body.ps.ps-wide.ps-inline-open #plugins-skills-dialog.ps-inline-workspace {
  position: fixed !important;
  top: 64px !important; bottom: 12px !important;
  left: calc(var(--ps-dockw, 0px) + 12px) !important; right: 12px !important;
  width: auto !important; height: auto !important;
  max-width: none !important;
  padding: 16px max(16px, calc((100vw - var(--ps-dockw, 0px) - 24px - 768px) / 2)) !important;
  z-index: 40 !important;
  overflow-y: auto !important;
}

/* 2 Nov: phone skill cards are one column, so Edit / On / Delete never sit on top of the text; editor textareas match the inputs */
@media (max-width: 800px) {
  .ps-card, .ps-skill-card { grid-template-columns: minmax(0, 1fr) !important; }
  .ps-card-actions { grid-column: 1 / -1 !important; grid-row: auto !important; flex-wrap: wrap !important; justify-content: flex-start !important; gap: 6px !important; }
  .ps-skill-card p.ps-desc, .ps-card p.ps-desc { margin-left: 0 !important; grid-column: 1 / -1 !important; }
  .ps-pane-head { position: relative; z-index: 1; }
}
.ps-editor textarea, .modal.ps-editor textarea { background: #101721; border: 1px solid #3d4c60; color: var(--text, #e8eef6); border-radius: 8px; padding: 8px 10px; }