/* Agent Gateway "plg" skin: the full PLG Flow component scheme (Victor's
   style guide, 2026-11-02) on top of the shared tokens in style.css.

   The default for every host since 2026-11-02 (Henrik, after seeing it on
   agents.xios3.com): the gateway puts data-skin="plg" on <html> and links
   this file unless contexts/<org>.yaml sets branding.skin: "" (base look).
   Any page can preview the base look with ?skin= or this one with
   ?skin=plg. Every rule here is scoped to the skin. */

html[data-skin="plg"] body.app-topbar { font-size: 13.5px; line-height: 1.45; }

/* --- Top bar: 64px, translucent, brand + slash + app name, segmented nav --- */
html[data-skin="plg"] header.app-topbar { border-bottom: 1px solid var(--line); background: var(--nav); }
html[data-skin="plg"] .app-topbar .app-bar {
  max-width: none; min-height: 64px; padding: 10px 16px; gap: 12px 18px; flex-wrap: wrap;
}
html[data-skin="plg"] .app-topbar .brand { gap: 12px; margin-right: 0; }
html[data-skin="plg"] .app-topbar .nav-pill {
  border: 1px solid var(--line-2); border-radius: var(--r-md); padding: 3px; background: var(--surface); gap: 0;
}
html[data-skin="plg"] .app-topbar .nav-pill a {
  padding: 6px 12px; border-radius: 7px; color: var(--ink-2); font-size: 13.5px;
}
html[data-skin="plg"] .app-topbar .nav-pill a:hover { color: var(--blue); background: var(--tint); }
html[data-skin="plg"] .app-topbar .nav-pill a.active { background: var(--tint); color: var(--blue); font-weight: 700; }
html[data-skin="plg"] .app-topbar .nav-pill .nav-sep { margin: 4px 6px; }
html[data-skin="plg"] .app-topbar .user-email { font-size: 12.5px; }

/* --- Page title: 24px/700, muted sub-line --- */
html[data-skin="plg"] .app-topbar .page-title { max-width: none; padding: 24px 16px 14px; }
html[data-skin="plg"] .app-topbar .page-title h1 { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.005em; }
html[data-skin="plg"] .app-topbar .page-title .sub { color: var(--muted); font-size: 13px; }
html[data-skin="plg"] .app-topbar main { max-width: none; padding: 4px 16px 48px; }
html[data-skin="plg"] .view-tabs { max-width: none; padding: 0 16px; }

/* --- Buttons --- */
html[data-skin="plg"] .btn,
html[data-skin="plg"] .app-topbar .btn-primary,
html[data-skin="plg"] .app-topbar .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 13.5px; line-height: 1; padding: 10px 16px;
  border-radius: var(--r-md); border: 1px solid var(--line-2);
  background: transparent; color: var(--ink); white-space: nowrap;
  width: auto; transition: all 140ms var(--ease);
}
html[data-skin="plg"] .btn:hover,
html[data-skin="plg"] .app-topbar .btn-secondary:hover { border-color: var(--blue); color: var(--blue); background: var(--tint); }
html[data-skin="plg"] .btn-primary,
html[data-skin="plg"] .app-topbar .btn-primary { background: var(--btn); color: var(--on-brand); border-color: transparent; }
html[data-skin="plg"] .btn-primary:hover,
html[data-skin="plg"] .app-topbar .btn-primary:hover { background: var(--btn-hover); color: var(--on-brand); box-shadow: var(--glow); border-color: transparent; }
html[data-skin="plg"] .btn-small, html[data-skin="plg"] .btn-mini,
html[data-skin="plg"] .app-topbar #logout-btn,
html[data-skin="plg"] .seg-card-foot button, html[data-skin="plg"] .seg-card-foot a.btn-secondary,
html[data-skin="plg"] .rail-section-head .btn { padding: 7px 11px !important; font-size: 12.5px !important; }
html[data-skin="plg"] .btn:disabled, html[data-skin="plg"] .btn-primary:disabled { opacity: .5; cursor: default; box-shadow: none; }
html[data-skin="plg"] .login-card .btn-primary { width: 100%; }
html[data-skin="plg"] .btn-danger { color: var(--bad); }
html[data-skin="plg"] .btn-danger:hover { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }

/* --- Inputs --- */
html[data-skin="plg"] .form-group label { font-size: 12.5px; color: var(--ink-2); font-weight: 400; margin-bottom: 4px; }
html[data-skin="plg"] .form-group input, html[data-skin="plg"] .form-input,
html[data-skin="plg"] .modal select, html[data-skin="plg"] .modal textarea,
html[data-skin="plg"] .app-topbar .app-bar select, html[data-skin="plg"] .app-topbar .page-title select,
html[data-skin="plg"] .chat-pane .chat-input textarea, html[data-skin="plg"] .ch-card-body textarea {
  border: 1px solid var(--field-line); border-radius: 8px; padding: 9px 11px;
  background: var(--raised); color: var(--ink); font: inherit;
  transition: border-color 140ms var(--ease);
}
html[data-skin="plg"] .form-group input:focus, html[data-skin="plg"] .chat-pane .chat-input textarea:focus { border-color: var(--blue); }

/* --- Cards: surface, 1px line, 16px radius, no shadow; hover lifts the border --- */
html[data-skin="plg"] .seg-card, html[data-skin="plg"] .segment-card, html[data-skin="plg"] .agenda-day,
html[data-skin="plg"] .chat-layout, html[data-skin="plg"] table.tickets-tbl, html[data-skin="plg"] .ch-card,
html[data-skin="plg"] .login-card, html[data-skin="plg"] .month-grid, html[data-skin="plg"] .day-popover {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: none;
  transition: border-color 260ms var(--ease);
}
html[data-skin="plg"] .seg-card:hover, html[data-skin="plg"] .agenda-day:hover, html[data-skin="plg"] .ch-card:hover { border-color: var(--line-2); }
html[data-skin="plg"] .seg-card { border-left-width: 4px; padding: 20px 22px; }
html[data-skin="plg"] .seg-card h3 { font-size: 17px; font-weight: 700; letter-spacing: -.005em; }
html[data-skin="plg"] .seg-card p { font-size: 13.5px; color: var(--ink-2); }
html[data-skin="plg"] .seg-card-foot { border-top: 1px solid var(--line); }
html[data-skin="plg"] .month-head { background: transparent; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; }
html[data-skin="plg"] .month-grid { border-top: 0; border-radius: 0 0 var(--r-lg) var(--r-lg); }
html[data-skin="plg"] .day { border-color: var(--line); }
html[data-skin="plg"] .login-card { box-shadow: var(--shadow-2); }

/* Tiles and small cards: 10px radius on the raised surface */
html[data-skin="plg"] .card, html[data-skin="plg"] .pill {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: none; transition: border-color 140ms var(--ease), transform 140ms var(--ease);
}
html[data-skin="plg"] .card { border-left-width: 3px; }
html[data-skin="plg"] .pill { border-left-width: 3px; border-radius: 7px; }
html[data-skin="plg"] .card:hover, html[data-skin="plg"] .pill:hover { border-color: var(--line-2); transform: translateY(-1px); }
html[data-skin="plg"] .card-title { font-size: 13.5px; font-weight: 700; }
html[data-skin="plg"] .col { background: var(--bg-1); border-radius: var(--r-lg); padding: 10px; }
html[data-skin="plg"] .col-head .count { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }

/* --- Tables: mono small-caps headers, right-aligned numbers --- */
html[data-skin="plg"] table.tickets-tbl th {
  background: transparent; color: var(--muted); font-family: var(--f-mono); font-weight: 500;
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; padding: 7px 8px;
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
html[data-skin="plg"] table.tickets-tbl td { padding: 8px; border-top: 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
html[data-skin="plg"] table.tickets-tbl tr:last-child td { border-bottom: 0; }

/* --- Pills, tags, status chips: fully round, text in a status colour on its soft background --- */
html[data-skin="plg"] .ticket-status, html[data-skin="plg"] .ch-chip, html[data-skin="plg"] .segment-freq,
html[data-skin="plg"] .meta-chip, html[data-skin="plg"] .suggestions-badge, html[data-skin="plg"] .product-badge {
  display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap; font-family: var(--f-sans);
}
html[data-skin="plg"] .ch-chip, html[data-skin="plg"] .segment-freq, html[data-skin="plg"] .product-badge { background: var(--tint); color: var(--blue); }
html[data-skin="plg"] .meta-chip { background: var(--raised); color: var(--ink-2); border: 1px solid var(--line); }
html[data-skin="plg"] .ticket-status { text-transform: none; }

/* --- Section labels: the guide's eyebrow (mono capitals with a short line in front) --- */
html[data-skin="plg"] .rail-section-head, html[data-skin="plg"] .ch-section h3,
html[data-skin="plg"] .schedule-row label, html[data-skin="plg"] .day-popover h4, html[data-skin="plg"] .col-head {
  font-family: var(--f-mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--blue);
}
html[data-skin="plg"] .ch-section h3::before, html[data-skin="plg"] .day-popover h4::before {
  content: ""; display: inline-block; width: 22px; height: 1px; background: currentColor; opacity: .6; margin-right: 10px; vertical-align: middle;
}
html[data-skin="plg"] .month-head div { color: var(--muted); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .06em; font-weight: 500; }

/* --- Rows: raised on hover, tint + blue when selected (never a solid fill) --- */
html[data-skin="plg"] .rail-item, html[data-skin="plg"] .agent-item, html[data-skin="plg"] .conv-item,
html[data-skin="plg"] .agenda-row { border-radius: var(--r-md); transition: background 140ms var(--ease); }
html[data-skin="plg"] .rail-item:hover, html[data-skin="plg"] .agent-item:hover, html[data-skin="plg"] .conv-item:hover,
html[data-skin="plg"] .agenda-row:hover { background: var(--raised); }
html[data-skin="plg"] .rail-item.active, html[data-skin="plg"] .agent-item.active, html[data-skin="plg"] .conv-item.active {
  background: var(--tint); color: var(--blue); font-weight: 700;
}
html[data-skin="plg"] .rail-item.active .agent-desc, html[data-skin="plg"] .agent-item.active .agent-desc { color: var(--ink-2); font-weight: 400; }
html[data-skin="plg"] .conv-delete:hover { background: var(--bad-soft); color: var(--bad); }
html[data-skin="plg"] .chat-rail { background: var(--surface); border-right: 1px solid var(--line); }

/* --- Segmented controls for the rail tabs and the editorial view tabs --- */
html[data-skin="plg"] .rail-tabs { border-bottom: 1px solid var(--line); padding: 8px; gap: 2px; }
html[data-skin="plg"] .rail-tabs button, html[data-skin="plg"] .view-tabs button {
  border: 0; border-radius: 7px; padding: 6px 12px; margin: 0; color: var(--ink-2); font-size: 13.5px;
  transition: all 140ms var(--ease);
}
html[data-skin="plg"] .rail-tabs button.active, html[data-skin="plg"] .view-tabs button.active {
  background: var(--tint); color: var(--blue); font-weight: 700; border-bottom-color: transparent;
}
html[data-skin="plg"] .view-tabs { border-bottom: 0; gap: 2px; margin-bottom: 8px; }

/* --- Chat bubbles --- */
html[data-skin="plg"] .chat-pane .messages { background: var(--surface); }
html[data-skin="plg"] .chat-pane .msg, html[data-skin="plg"] .chat-pane .message { border-radius: var(--r-md); font-size: 13.5px; }
html[data-skin="plg"] .chat-pane .msg.assistant, html[data-skin="plg"] .chat-pane .message.agent {
  background: var(--raised); border: 1px solid var(--line); color: var(--ink);
}
html[data-skin="plg"] .chat-pane .chat-header, html[data-skin="plg"] .chat-pane .chat-input { background: var(--surface); border-color: var(--line); }

/* --- Modal: 580px, scrim, footer with the primary action on the right --- */
html[data-skin="plg"] .modal { max-width: 580px; padding: 18px 22px 20px; }
html[data-skin="plg"] .modal-header h2 { font-size: 17px; font-weight: 700; }
html[data-skin="plg"] .modal-actions { gap: 10px; }

/* --- Detail drawer --- */
html[data-skin="plg"] .detail-panel { background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-2); }
html[data-skin="plg"] .detail-head { background: var(--raised); border-bottom: 1px solid var(--line); }
html[data-skin="plg"] .detail-head h2 { font-size: 17px; font-weight: 700; }
html[data-skin="plg"] .detail-foot { background: var(--surface); border-top: 1px solid var(--line); flex-wrap: wrap; gap: 8px; }
html[data-skin="plg"] .detail-foot .btn, html[data-skin="plg"] .detail-foot .btn-primary, html[data-skin="plg"] .detail-foot .btn-secondary { padding: 8px 12px; font-size: 12.5px; }
html[data-skin="plg"] .schedule-row { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); }
html[data-skin="plg"] .recipient-list { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); }
html[data-skin="plg"] .ch-card.checked { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); }

/* --- Toast: the guide's reversed tooltip colours --- */
html[data-skin="plg"] .toast { background: var(--ink); color: var(--surface); border-radius: 8px; font-size: 13px; }