/* Connectors (connectors.js, action-card.js; docs/work-extension-contract.md §6.3–6.5):
   Settings › Connectors (its head, the grid of cards, an app's page with its
   tools, + Add), the logos, the + menu's rows and the confirmation card in a
   reply. Every class starts with lc-, every color is a token from theme.css
   (but the logos' light chip, white like site-icon.js's); the segmented
   control is settings.css's. Dark first, with light; one column of cards
   when there's no room for two (a phone, the extension's panel). */

/* ------------------------------------------------------------ the logo tile (48 / 24 / 22 / 20) */
.lc-conn-logo {
  --lc-logo: 48px;
  position: relative; display: inline-grid; place-items: center; flex: none; width: var(--lc-logo); height: var(--lc-logo);
  border-radius: var(--r-card, 12px); overflow: hidden; background: #fff; --lc-logo-edge: #00000014; box-shadow: inset 0 0 0 1px var(--lc-logo-edge);
}
.lc-conn-logo img { display: block; width: 62%; height: 62%; object-fit: contain; }
/* An app icon with its own background (connectors' logoFill) is the tile, with the chip's hairline over it. */
.lc-conn-logo[data-fill="true"] img { width: 100%; height: 100%; object-fit: cover; }
.lc-conn-logo[data-fill="true"]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--lc-logo-edge); pointer-events: none; }
.lc-conn-logo[data-size="24"] { --lc-logo: 24px; border-radius: var(--r-tag, 6px); }
.lc-conn-logo[data-size="22"] { --lc-logo: 22px; border-radius: var(--r-tag, 6px); }
.lc-conn-logo[data-size="20"] { --lc-logo: 20px; border-radius: var(--r-tag, 6px); }
:is(.lc-conn-logo[data-size="24"], .lc-conn-logo[data-size="22"], .lc-conn-logo[data-size="20"]) img { width: 72%; height: 72%; }
/* No logo (or one that didn't load): the domain's letter on a tint of its own (--lc-hue, set through the CSSOM). */
.lc-conn-logo[data-logo="monogram"] { background: none; box-shadow: none; }
.lc-conn-mono {
  display: grid; place-items: center; width: 100%; height: 100%; user-select: none;
  background: light-dark(oklch(93% .045 var(--lc-hue, 250)), oklch(32% .065 var(--lc-hue, 250)));
  color: light-dark(oklch(42% .11 var(--lc-hue, 250)), oklch(88% .075 var(--lc-hue, 250)));
  font: 650 calc(var(--lc-logo) * .42)/1 var(--font);
}
.lc-conn-mono::before { content: attr(data-letter); }

/* the verified mark: a seal in the accent with the check knocked out */
.lc-conn-verified { display: inline-block; width: 14px; height: 14px; }
.lc-conn-verified svg { display: block; width: 14px; height: 14px; }
.lc-conn-seal { fill: var(--accent); stroke: var(--accent); stroke-width: 1.4; stroke-linejoin: round; }
.lc-conn-tick { fill: none; stroke: var(--on-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ Settings › Connectors */
/* The dialog is wider while it shows Connectors: two columns of cards with room for their two lines. */
.lc-set:has(.lc-conn) { width: min(940px, 100%); }
.lc-conn { container: lc-conn / inline-size; padding-top: 10px; }
.lc-conn [hidden] { display: none !important; }
.lc-conn-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
/* Yours | Discover: the compact segmented control (DS §6.1) */
.lc-conn-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-row, 10px); background: var(--overlay-3); }
.lc-conn-tab {
  height: 28px; padding: 0 12px; border: 0; border-radius: var(--r-control, 8px); background: none; color: var(--dim);
  font: 500 var(--fs-sm, 12.5px)/1 var(--font); cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.lc-conn-tab:hover { color: var(--text); }
.lc-conn-tab[aria-selected="true"] { background: var(--card); color: var(--text); box-shadow: var(--shadow-xs), inset 0 0 0 1px var(--line-strong); }
.lc-conn-find {
  position: relative; display: flex; align-items: center; flex: 1 1 160px; min-width: 0; height: var(--h-md, 34px);
  border-radius: var(--r-row, 10px); border: 1px solid var(--line); background: var(--field); color: var(--label);
}
.lc-conn-find > .lc-icon { position: absolute; left: 11px; pointer-events: none; }
.lc-conn-find > .lc-icon svg { width: 14px; height: 14px; }
.lc-conn-find:focus-within { border-color: var(--focus-ring); }
.lc-conn-search {
  width: 100%; height: 100%; padding: 0 12px 0 32px; border: 0; border-radius: inherit; background: none; color: var(--text);
  font-size: var(--fs-ui, 13.5px); outline: none;
}
.lc-conn-search::placeholder { color: var(--label); }
.lc-conn-search:focus-visible { outline: none; }
.lc-conn-search::-webkit-search-cancel-button { cursor: pointer; }
.lc-conn-head .lc-conn-addbtn { flex: none; height: var(--h-md, 34px); padding: 0 14px; }
/* Narrow (a phone, the extension's panel): Yours | Discover and + Add on one line, the search under them. */
@container lc-conn (max-width: 520px) {
  .lc-conn-find { order: 3; flex-basis: 100%; }
  .lc-conn-addbtn { margin-left: auto; }
}
.lc-conn-addbtn .lc-icon svg { width: 14px; height: 14px; }
.lc-conn-addbtn[aria-expanded="true"] { background: var(--overlay-4); }

/* a message at the top: a connect's return, a disconnect */
.lc-conn-note {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--r-card, 12px);
  font-size: 13px; line-height: 1.4; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  background: color-mix(in srgb, var(--ok) 10%, var(--card)); color: var(--ok-text);
}
.lc-conn-note[data-tone="err"] { border-color: color-mix(in srgb, var(--danger) 30%, transparent); background: color-mix(in srgb, var(--danger) 8%, var(--card)); color: var(--danger-text); }
.lc-conn-note .lc-icon svg { width: 15px; height: 15px; }
.lc-conn-empty { display: block; margin: 18px 0 6px; font-size: var(--fs-sm, 12.5px); line-height: 1.45; color: var(--label); }
.lc-conn-empty .lc-link { margin-left: 6px; padding: 0; font-size: inherit; }
/* Yours with nothing connected yet (DS §6.12): the apps tile, a line on what they're for, Browse Discover. */
.lc-conn-start { display: flex; flex-direction: column; align-items: center; max-width: 360px; margin: 36px auto 16px; text-align: center; }
.lc-conn-start-tile { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-card, 12px); background: var(--overlay-3); color: var(--dim); }
.lc-conn-start-tile svg { width: 20px; height: 20px; }
.lc-conn-start-title { margin: 14px 0 0; font: 600 14px/1.35 var(--font); color: var(--text); }
.lc-conn-start-text { margin: 4px 0 16px; font-size: var(--fs-sm, 12.5px); line-height: 1.5; color: var(--dim); text-wrap: balance; }

/* the grid: two columns, one when there's no room (a phone, the panel, a narrow window) */
.lc-conn-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container lc-conn (max-width: 499px) { .lc-conn-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .lc-conn-grid { grid-template-columns: minmax(0, 1fr); } }

/* a card: the logo, the name with its mark, two lines, "by <maker>"; + or a check at the right */
.lc-conn-card {
  position: relative; display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 14px;
  border-radius: var(--r-card, 12px); background: var(--card); border: 1px solid var(--line);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.lc-conn-card:hover { background: var(--card-hover); }
.lc-conn-main {
  display: flex; align-items: flex-start; gap: 12px; flex: 1; min-width: 0; margin: 0; padding: 0;
  border: 0; background: none; color: inherit; font: inherit; text-align: left;
}
button.lc-conn-main { cursor: pointer; }
/* The open button covers the whole card (its action keeps its own place above it). */
button.lc-conn-main::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
button.lc-conn-main:focus-visible { outline: none; }
.lc-conn-card:has(> button.lc-conn-main:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.lc-conn-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; padding-top: 1px; }
/* The name wraps (a long one, like Jira and Confluence, isn't cut), the mark after its last word. */
.lc-conn-name { display: block; min-width: 0; font: 600 14px/1.35 var(--font); color: var(--text); overflow-wrap: anywhere; }
.lc-conn-name .lc-conn-verified { margin-left: 5px; vertical-align: -2px; }
.lc-conn-blurb {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  font-size: var(--fs-sm, 12.5px); line-height: 1.45; color: var(--dim);
}
.lc-conn-by { margin-top: 2px; font-size: var(--fs-xs, 12px); line-height: 1.4; color: var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* at the top right, over the card's corner (the words keep the card's width under it): + (connect),
   the green check, the warning (reconnect), Soon, centered on the name's line (which leaves room for
   it) and clear of the blurb's first line */
.lc-conn-plus, .lc-conn-state {
  position: relative; z-index: 1; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
}
.lc-conn-card > :is(.lc-conn-plus, .lc-conn-state, .lc-conn-soon) { position: absolute; top: 9px; right: 12px; margin: 0; }
.lc-conn-card > .lc-conn-soon { top: 13px; }
.lc-conn-card .lc-conn-name { padding-right: 34px; }
.lc-conn-card[data-status="soon"] .lc-conn-name { padding-right: 52px; }
.lc-conn-card[data-status="browser"] .lc-conn-name { padding-right: 0; }
.lc-conn-plus {
  border: 1px solid var(--line); background: var(--card); color: var(--dim); cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.lc-conn-plus:hover:not(:disabled) { background: var(--card-hover); border-color: var(--line-strong); color: var(--text); }
.lc-conn-card:hover .lc-conn-plus:not(:disabled) { border-color: var(--line-strong); }
.lc-conn-plus:active:not(:disabled) { transform: scale(.94); }
.lc-conn-plus:disabled { cursor: default; opacity: .6; }
.lc-conn-plus .lc-icon svg { width: 16px; height: 16px; }
.lc-conn-ok { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); }
.lc-conn-ok .lc-icon svg { width: 15px; height: 15px; stroke-width: 2.2; }
.lc-conn-warn { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.lc-conn-warn .lc-icon svg { width: 15px; height: 15px; }
.lc-conn-pill {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px; flex: none; height: 22px; padding: 0 9px;
  border-radius: var(--r-pill, 999px); background: var(--overlay-4); color: var(--dim); font: 600 11px/1 var(--font); white-space: nowrap;
}
.lc-conn-browser { align-self: flex-start; margin-top: 6px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.lc-conn-browser .lc-icon svg { width: 12px; height: 12px; }
.lc-conn-card[data-status="soon"] .lc-conn-main { opacity: .72; }

/* touch screens: a 44 px target around +, taller tabs */
@media (pointer: coarse) {
  .lc-conn-plus::before { content: ''; position: absolute; inset: -7px; border-radius: 50%; }
  .lc-conn-tab { height: 32px; }
}

/* + Add: the server's address and a name */
.lc-conn-add {
  display: flex; flex-direction: column; margin: 0 0 14px; padding: 16px; border-radius: var(--r-card, 12px);
  background: var(--card2); border: 1px solid var(--line); animation: lc-conn-in var(--dur-3) var(--ease-out);
}
.lc-conn-add .lc-conn-h { margin-top: 0; }
.lc-conn-label { margin: 12px 0 6px; font: 500 var(--fs-ui, 13.5px)/1.3 var(--font); color: var(--text); }
.lc-conn-input {
  width: 100%; height: var(--h-md, 34px); padding: 0 12px; border-radius: var(--r-row, 10px); border: 1px solid var(--line);
  background: var(--field); color: var(--text); font-size: var(--fs-ui, 13.5px); outline: none;
}
.lc-conn-input::placeholder { color: var(--label); }
/* Fields show focus on their border, never an outline (DS §3.8); an error's border stays red. */
.lc-conn-input:focus-visible { outline: none; border-color: var(--focus-ring); }
.lc-conn-input[aria-invalid="true"], .lc-conn-input[aria-invalid="true"]:focus-visible { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.lc-conn-add .lc-conn-actions { justify-content: flex-end; margin-top: 16px; }
@keyframes lc-conn-in { from { opacity: 0; transform: translateY(-4px); } }

/* an app's page */
.lc-conn-detail { animation: lc-conn-in var(--dur-3) var(--ease-out); }
.lc-conn-back {
  display: inline-flex; align-items: center; gap: 4px; height: 28px; margin: 0 0 10px -8px; padding: 0 10px 0 4px; border: 0;
  border-radius: var(--r-control, 8px); background: none; color: var(--dim); font: 500 var(--fs-sm, 12.5px)/1 var(--font); cursor: pointer;
}
.lc-conn-back:hover { background: var(--hover); color: var(--text); }
.lc-conn-back .lc-icon svg { width: 16px; height: 16px; }
.lc-conn-hero { display: flex; align-items: center; gap: 14px; }
.lc-conn-hero-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lc-conn-title { margin: 0; font: 600 var(--fs-title, 17px)/1.3 var(--font); }
.lc-conn-title .lc-conn-name { font: inherit; }
.lc-conn-title .lc-conn-verified, .lc-conn-title .lc-conn-verified svg { width: 16px; height: 16px; }
.lc-conn-title .lc-conn-verified { margin-left: 6px; vertical-align: -1px; }
.lc-conn-about { margin: 12px 0 0; font-size: var(--fs-sm, 12.5px); line-height: 1.5; color: var(--dim); }
.lc-conn-url { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font: 400 var(--fs-xs, 12px)/1.4 var(--mono); color: var(--label); overflow-wrap: anywhere; }
.lc-conn-url .lc-icon svg { width: 13px; height: 13px; }
.lc-conn-status { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 0; font-size: 13px; line-height: 1.4; color: var(--ok-text); }
.lc-conn-status[data-tone="warn"] { color: var(--warn-text); }
.lc-conn-status .lc-icon { margin-top: 1px; }
.lc-conn-status .lc-icon svg { width: 14px; height: 14px; }
.lc-conn-status span:last-child { overflow-wrap: anywhere; }
.lc-conn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.lc-conn .lc-btn .lc-icon svg { width: 13px; height: 13px; }
.lc-conn-confirm { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-card, 12px); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); background: color-mix(in srgb, var(--danger) 6%, var(--card)); }
.lc-conn-confirm b { font: 600 14px/1.35 var(--font); }
.lc-conn-confirm p { margin: 4px 0 0; font-size: var(--fs-sm, 12.5px); color: var(--dim); }
.lc-conn-confirm .lc-conn-actions { justify-content: flex-end; margin-top: 10px; }
.lc-conn-msg { margin: 8px 0 0; font-size: var(--fs-xs, 12px); line-height: 1.4; color: var(--danger-text); }
.lc-conn-tools { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.lc-conn-h { margin: 0 0 4px; font: 600 var(--fs-ui, 13.5px)/1.35 var(--font); color: var(--text); }
.lc-conn-hint { margin: 0; font-size: var(--fs-sm, 12.5px); line-height: 1.45; color: var(--label); }
.lc-conn-group { margin-top: 14px; }
.lc-conn-group-label { margin: 0 0 2px; font: 500 var(--fs-label, 10.5px)/1.3 var(--mono); letter-spacing: var(--track-label, .12em); text-transform: uppercase; color: var(--label); }
.lc-conn-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.lc-conn-group-label + .lc-conn-tool { border-top: 0; }
.lc-conn-tool-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 200px; min-width: 0; }
.lc-conn-tool-text b { font: 500 var(--fs-ui, 13.5px)/1.35 var(--font); color: var(--text); overflow-wrap: anywhere; }
.lc-conn-tool-text small { font-size: var(--fs-sm, 12.5px); line-height: 1.45; color: var(--label); }
.lc-conn-seg { flex: none; }
.lc-conn-seg button { padding: 0 12px; font-size: 12.5px; }
.lc-conn-tool > .lc-conn-msg { flex-basis: 100%; margin: 0; }
@container lc-conn (max-width: 420px) { .lc-conn-seg { width: 100%; } .lc-conn-seg button { flex: 1; padding: 0 6px; } }

/* ------------------------------------------------------------ the + menu's Connectors group (core.js renderPlusMenu) */
.lc-conn-menu-head { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.lc-conn-row .lc-menu-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-conn-row .lc-menu-text small { color: var(--warn-text); }
.lc-conn-row .lc-link { flex: none; font-size: 12.5px; }
.lc-conn-menu-note { display: flex; align-items: flex-start; gap: 6px; margin: 0 10px 6px; font-size: 12.5px; line-height: 1.4; color: var(--ok-text); }
.lc-conn-menu-note[data-tone="err"] { color: var(--danger-text); }
.lc-conn-menu-note .lc-icon svg { width: 14px; height: 14px; }
.lc-menu-row .lc-conn-logo { margin: -2px 0; }

/* the `using` chip of a connector's tool: its logo */
.lc-using > .lc-conn-logo { flex: none; }

/* ------------------------------------------------------------ the confirmation card in a reply (§6.5, the approval card of DS §6.9) */
.lc-action {
  min-width: 0; max-width: 560px; margin: 4px 0; padding: 14px; border-radius: var(--r-pop, 16px); background: var(--card);
  border: 1px solid color-mix(in srgb, var(--accent) 33%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 6%, transparent);
  font-size: var(--fs-sm, 12.5px); line-height: 1.45; color: var(--text);
  transition: box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.lc-action:focus { outline: none; }
.lc-action > * { transition: opacity var(--dur-2) var(--ease-out); }
.lc-action-answered { border-color: var(--line); box-shadow: none; }
.lc-action-answered > :not(.lc-action-result) { opacity: .6; }
.lc-action-head { display: flex; align-items: center; gap: 10px; }
.lc-action-title { margin: 0; min-width: 0; font: 600 14px/1.35 var(--font); color: var(--text); overflow-wrap: anywhere; }
.lc-action-summary { margin: 6px 0 0; color: var(--dim); overflow-wrap: anywhere; }
.lc-action-fields { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; margin: 10px 0 0; padding: 10px 12px; border-radius: var(--r-row, 10px); background: var(--overlay-2); }
.lc-action-field { display: contents; }
.lc-action-field dt { color: var(--label); }
.lc-action-field dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.lc-action-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.lc-action-error { margin: 8px 0 0; font-size: var(--fs-xs, 12px); color: var(--danger-text); }
.lc-action-result { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 12px 0 0; color: var(--dim); }
.lc-action-result:focus { outline: none; }
.lc-action-result b { font-weight: 600; color: var(--text); }
.lc-action[data-status="done"] .lc-action-result b { color: var(--ok-text); }
.lc-action[data-status="failed"] .lc-action-result b { color: var(--danger-text); }
.lc-action-said {
  flex: 1 1 100%; min-width: 0; margin: 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.lc-action-open { color: var(--accent); font-weight: 500; text-decoration: none; }
.lc-action-open:hover { text-decoration: underline; text-underline-offset: 2px; }
.lc-action-result .lc-icon svg { width: 14px; height: 14px; }

@media (prefers-reduced-motion: reduce) { .lc-conn-add, .lc-conn-detail { animation: none; } }
html[data-motion="reduce"] :is(.lc-conn-add, .lc-conn-detail) { animation: none; }
/* iPhone Safari zooms into a text box under 16 px when it's focused (chat.css's touch block). */
@media (pointer: coarse) { .lc-conn-search, .lc-conn-input { font-size: 16px; } }