/* An extension view (the Agent desktop) opens in the settings dialog's
   frame, like the file manager and the web terminal: the section carries
   the dialog's scrim (.shell-dialog-overlay), the window in it the dialog's
   box (.shell-dialog) and head (.shell-dialog-head) - the classes come from
   shell.css, so the two never drift apart; here are only the view's own
   parts and its docked and fullscreen shapes. The same host stays mounted
   for floating, docked and fullscreen views. Never reparent a live iframe:
   browsers would reload its desktop session. */
.extension-view-window { position: relative; }
.extension-view-window > .shell-dialog-head h2 {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.extension-view-tools { display: flex; align-items: center; gap: .2rem; }
/* Pressed, the window's pin is the sidebar's: accent, and filled (shell.css). */
.extension-view-tools [aria-pressed="true"] { color: var(--accent); }
.extension-view-tools [aria-pressed="true"] .sb-ico { fill: currentColor; }
.extension-view-window > p { margin: 1rem 1.4rem; }
.extension-view-window > .ext-action-btn { align-self: flex-start; margin: 0 1.4rem 1.4rem; }
.extension-view-window > iframe { flex: 1; width: 100%; min-height: 0; border: 0; background: #111; }
/* Docked beside the chat: a column of the shell, with no scrim and no frame
   of its own beyond the line that parts it from the chat. */
.extension-view.is-pinned {
  position: relative;
  inset: auto;
  z-index: 1;
  flex: 0 0 46%;
  width: 46%;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
}
.extension-view.is-pinned > .shell-dialog {
  width: 100%;
  height: 100%;
  border-width: 0 0 0 1px;
  border-radius: 0;
  box-shadow: none;
  animation: none;
}
/* Docked, the head is a band of the shell like the sidebar: its tone, a
   shade off the chat, not the dialog's white (Mart, 2026-10-14). */
.extension-view.is-pinned > .shell-dialog > .shell-dialog-head {
  background: var(--sidebar-bg);
}
/* Fullscreen takes the section with its window: the window is the screen. */
.extension-view:fullscreen {
  padding: 0;
  background: var(--bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.extension-view:fullscreen > .shell-dialog {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
}
.extension-view-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding-top: .6rem; }
.extension-view-actions:empty { display: none; }
/* The Desktop's "Connect from elsewhere" and the MCP server's "Technical
   settings": folded under the switch; unfolded, the guides wear the connect
   card's fields (extensions.css). */
/* No rule above the fold (Mart, 2026-10-15): settings.css gives every other
   <details> a top border, which here only cut the card in two. */
details.ext-connect-fold:not(.panel-section) { margin-top: 1rem; padding-top: 0; border-top: 0; }
.ext-connect-fold > summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.ext-connect-fold > summary:hover { color: var(--text); }
.ext-connect-fold > p { margin: .6rem 0 0; }
.ext-connect-fold .ext-connect-endpoint h4 { margin-top: 1rem; }
/* The connect intros name Settings → Server access; the words are the link.
   One hairline that only darkens on hover: thickened, it ran through the
   descenders of "ligipääs" and read as a broken double line. `a.` outranks
   base.css's `a:hover` shorthand, which would reset the line's colour. */
a.ext-connect-link {
  color: var(--accent); font-weight: 600;
  text-decoration: underline 1px color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s;
}
a.ext-connect-link:hover { text-decoration-color: currentColor; }
/* A technical setting's copy button (extension_views.js → copyButton): a
   quiet outlined button with its icon, the tick and "Copied" in the accent
   for a moment after a copy. The two words share one cell, so its width
   never changes. */
button.ext-connect-copy {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem;
  border: 1px solid var(--outline-control);
  border-radius: 7px;
  background: var(--surface-subtle);
  color: var(--text);
  font-size: .76rem; font-weight: 500; letter-spacing: normal; line-height: 1.2;
  white-space: nowrap;
}
button.ext-connect-copy:hover {
  background: var(--surface-hover);
  border-color: var(--outline-hover);
  color: var(--text);
}
button.ext-connect-copy:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.ext-connect-copy-icons, .ext-connect-copy-words { display: inline-grid; }
.ext-connect-copy-icons > *, .ext-connect-copy-words > * { grid-area: 1 / 1; }
.ext-connect-copy .sb-ico { width: .95rem; height: .95rem; }
.ext-connect-copy .ext-connect-copy-done { visibility: hidden; }
button.ext-connect-copy.is-copied,
button.ext-connect-copy.is-copied:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}
.ext-connect-copy.is-copied .ext-connect-copy-idle { visibility: hidden; }
.ext-connect-copy.is-copied .ext-connect-copy-done { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  a.ext-connect-link { transition: none; }
}
/* The cards' everyday part (Mart, 2026-10-15): the guide for an agent, then
   the direct-access row, each a bordered box -- under the switch on the MCP
   card, under "Open desktop" on the Desktop card. The technical settings
   fold under them. A generic card's direct-access row is the same row,
   inside its fold. */
.ext-quick { display: flex; flex-direction: column; gap: .7rem; margin-top: .9rem; }
.ext-agent-guide {
  margin: 0;
  padding: .85rem 1rem;
  border: 1px solid var(--outline-subtle);
  border-radius: 10px;
  background: var(--surface-subtle);
}
.ext-agent-guide h4 { margin: 0 0 .2rem; font-size: .92rem; }
.ext-agent-guide > p { margin: 0; font-size: .85rem; }
/* The guide for an agent: the box's one solid button. */
.ext-agent-guide .ext-connect-copy-instructions { margin-top: .7rem; }
/* Direct access: the whole row is the switch -- a button the width of the
   card, the words on the left, the track and knob on the right, the
   base button chrome set aside. The warning sign beside the title says
   what is at stake on hover; the question itself comes in the panel's
   dialog (modal.css). */
.ext-direct { margin: 0; }
.ext-connect-fold .ext-direct { margin-top: 1rem; }
.ext-direct-row {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%;
  padding: .85rem 1rem;
  border: 1px solid var(--outline-subtle);
  border-radius: 10px;
  background: var(--surface-subtle);
  color: var(--text);
  font: inherit; font-weight: 400; letter-spacing: normal; line-height: 1.45;
  text-align: start;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ext-direct-row:hover {
  background: var(--surface-hover);
  border-color: var(--outline-control);
  color: var(--text);
}
.ext-direct-row:active { transform: none; }
.ext-direct-row:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
.ext-direct-row:disabled { opacity: .6; cursor: progress; }
.ext-direct-words { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.ext-direct-title { font-size: .92rem; font-weight: 600; }
.ext-direct-warn { font-size: .85em; cursor: help; }
.ext-direct-desc { font-size: .85rem; color: var(--muted); }
/* The track and knob, in the dress of the auto-update switches (server.css),
   driven by the row's aria-checked rather than a checkbox. */
.ext-direct-knob {
  position: relative; flex: 0 0 auto;
  width: 38px; height: 22px;
  border-radius: 22px;
  background: var(--control-track-off);
  border: 1px solid var(--control-track-off-border);
  transition: background .15s ease, border-color .15s ease;
}
.ext-direct-knob::before {
  content: "";
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
  transition: transform .15s ease;
}
.ext-direct-row[aria-checked="true"] .ext-direct-knob {
  background: var(--accent-control);
  border-color: var(--accent-control-border);
}
.ext-direct-row[aria-checked="true"] .ext-direct-knob::before {
  background: var(--accent-control-knob);
  transform: translateX(16px);
}
@media (prefers-reduced-motion: reduce) {
  .ext-direct-row, .ext-direct-knob, .ext-direct-knob::before { transition: none; }
}
/* Published, the technical settings open with the note and the public
   address (extension_views.js → publishedAddress). */
.ext-connect-fold > .ext-direct-on { margin: .8rem 0 0; font-size: .85rem; }
.ext-connect-fold .ext-direct + .ext-direct-on { margin-top: .65rem; }
/* The guide dialog's body (extension_views.js → openGuideDialog): the lead,
   the copy button with its status line, the guide text under them. */
.ext-guide-lead { margin: .25rem 0 .7rem; font-size: .9rem; line-height: 1.5; }
.ext-guide-lead[role="alert"] { color: var(--warn); }
.ext-guide-actions { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 0 .6rem; }
.ext-guide-status { font-size: .85rem; color: var(--muted); }
.ext-guide-status[role="alert"] { color: var(--warn); }
.ext-guide-text {
  margin: 0 0 .4rem;
  padding: .8rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--outline-subtle);
  background: var(--surface-control);
  font-size: .78rem; line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* The row's way to the extension's own category: a quiet outlined button at
   the card's right edge, about mid-height under the switch (.ext-side,
   extensions.css). The category's icon in the extensions' colour, the label
   in the text's, a chevron that steps onward on hover. */
.ext-open-section {
  margin-block: auto;
  display: inline-flex; align-items: center; gap: .5rem;
  max-width: 15rem;
  padding: .45rem .6rem .45rem .75rem;
  border: 1px solid var(--outline-control);
  border-radius: 8px;
  background: var(--surface-subtle);
  color: var(--text);
  font-size: .85rem; font-weight: 500; line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.ext-open-section .sb-ico { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; color: var(--extension); }
.ext-open-section-label { overflow: hidden; text-overflow: ellipsis; }
.ext-open-section .ext-open-section-onward {
  width: .9rem; height: .9rem; color: var(--muted);
  transition: transform .15s, color .15s;
}
.ext-open-section:hover {
  border-color: color-mix(in srgb, var(--extension) 45%, transparent);
  background: var(--extension-softer);
}
.ext-open-section:hover .ext-open-section-onward { color: var(--extension); transform: translateX(2px); }
.ext-open-section:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .ext-open-section, .ext-open-section .ext-open-section-onward { transition: none; }
}
/* A phone's card has no room for it beside the text: it takes a line of its
   own under the text, aligned with it, the switch staying in its corner. */
@media (max-width: 640px) {
  .ext-row-head:has(.ext-open-section) { flex-wrap: wrap; row-gap: .35rem; }
  .ext-row-head:has(.ext-open-section)::after { content: ''; order: 2; flex-basis: 100%; height: 0; }
  .ext-row-head .ext-side { display: contents; }
  .ext-open-section { order: 3; margin: 0 0 0 2.75rem; max-width: calc(100% - 2.75rem); }
}
/* mintbot Desktop, the MCP server and any extension with a category of its
   own (extension_sections.js): under each switch, what is happening and,
   once on, the ways to use it. */
#agentDesktopCard > p, #agentMcpCard > p, .extension-section-card > p { margin: .6rem 0 0; }
/* The stages of a switch-on: the finished ones ticked, the running one
   pulsing, over a bar that fills as they pass and sweeps while one runs. */
.desktop-progress { margin-top: .7rem; }
.desktop-progress-steps {
  display: flex; gap: .4rem; margin: 0 0 .5rem; padding: 0; list-style: none;
  counter-reset: step; font-size: .82rem; color: var(--muted);
}
.desktop-progress-steps li { flex: 1; display: flex; align-items: center; gap: .35rem; min-width: 0; }
.desktop-progress-steps li::before {
  counter-increment: step; content: counter(step);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 1px solid var(--border);
  font-size: .72rem; font-weight: 600;
}
.desktop-progress-steps li.is-done { color: var(--text); }
.desktop-progress-steps li.is-done::before { content: '✓'; color: #fff; background: var(--accent); border-color: var(--accent); }
.desktop-progress-steps li.is-active { color: var(--text); font-weight: 600; }
.desktop-progress-steps li.is-active::before { color: var(--accent); border-color: var(--accent); animation: desktop-progress-pulse 1.6s ease-in-out infinite; }
.desktop-progress-track { height: 6px; background: var(--bg3); border-radius: 3px; overflow: hidden; }
.desktop-progress-bar {
  position: relative; overflow: hidden; height: 100%; width: var(--progress, 0%);
  background: var(--accent); border-radius: 3px; transition: width .5s ease;
}
.desktop-progress-bar::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, #fff7, transparent);
  animation: desktop-progress-sweep 1.4s linear infinite;
}
@keyframes desktop-progress-pulse { 50% { opacity: .35; } }
@keyframes desktop-progress-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .desktop-progress-steps li.is-active::before, .desktop-progress-bar::after { animation: none; }
}
@media (max-width: 600px) {
  .desktop-progress-steps { flex-wrap: wrap; }
  .desktop-progress-steps li { flex: 1 1 45%; }
}
@media (max-width: 900px) {
  .shell.has-extension-dock { flex-wrap: wrap; }
  .extension-view.is-pinned { flex: 0 0 100%; width: 100%; height: 50dvh; border-width: 1px 0 0; }
  .shell.has-extension-dock > .main { flex-basis: 100%; height: 50dvh; }
}