:root {
  --text: #484d55;
  --text-light: #9ca3af;
  --text-grey: #757b8a;
  --headings: #10172a;
  --background-light: #f6f6f9;
  --background-dark: #252627;
  --border: #e1e2eb;
  --border-dark: #c7c8d1;
  --input-border: #dcdce4;
  --primary: #2f75e6;
  --primary-lighter: #c7dcff;
  --primary-darker: #2e6cd2;
  --success: #04cb58;
  --danger: #e23807;
  --tooltip: #fffbf0;
}



*{box-sizing: border-box;}
html,body{min-height:100vh;overflow:hidden}
:root {font-family: 'Inter', sans-serif;font-size:14px;}

body{height:100vh;margin:0;padding:0;background:#fff;color: var(--text);font-synthesis: none;text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;-webkit-text-size-adjust: 100%;}

h1{color:var(--headings);margin:2em 0 1em 0;font-weight:600;font-size:2em;line-height:1.2}
h2{color:var(--headings);margin:2em 0 1em 0;font-weight:500;font-size:1.40em;line-height:1.2;font-weight:bold}
h3{color:var(--headings);margin:2em 0 1em 0;font-weight:500;font-size:1.15em;line-height:1.2}
h4{color:var(--headings);margin:2em 0 1em 0;font-weight:500;font-size:1.05em;line-height:1.2}
h1:first-child, h2:first-child, h3:first-child, h4:first-child{margin-top:0em;}

p{margin:0 0 1.5em 0;}
a{color:var(--text);}

hr{border:none;border-bottom:1px solid var(--border);margin:40px 0;}

ul{margin:0 0 1.5em 0;padding:0}
ul li{margin:0 0 .5em 20px;padding:0}

.text--danger{color: var(--danger)}

button{font-family:inherit;font-size:inherit;border:none;}

.block{background:#fff;border-radius:10px;border:1px solid var(--border);padding:15px 25px}

.checklist{margin:0 0 1.5em 0;padding:0;}
.checklist li{margin:0 0 3px 0;padding:0;list-style:none;display:flex;gap:10px;align-items:center}
.checklist li span:first-child{font-size:12px;}

/*******************************************************/
/* Animation
/*******************************************************/

.fade-enter-active, .fade-leave-active {transition:opacity .15s;}
.fade-enter-from, .fade-leave-to {opacity:0;}

.fadezoom-enter-active, .fadezoom-leave-active {transition:all .20s;}
.fadezoom-enter-from, .fadezoom-leave-to {opacity:0;transform: scale(0.95);}

.fadeinup-enter-active,.fadeinup-leave-active {transition:all .15s ease-in-out;}
.fadeinup-enter-to, .fadeinup-leave{ }
.fadeinup-enter-from, .fadeinup-leave-to {opacity:0;transform: translatey(5%)}

.fadeindown-enter-active,.fadeindown-leave-active {transition:all .10s ease-in-out;}
.fadeindown-enter-to, .fadeindown-leave{ }
.fadeindown-enter-from, .fadeindown-leave-to {opacity:0;transform: translatey(-10%)}

.modal-enter-from, .modal-leave-to {opacity: 0;}
.modal-enter-from .modal__container, .modal-enter-leave-to .modal__container{transform: scale(.9);}


.site{display:flex;height:100vh;flex-direction:column}


/*******************************************************/
/* Admin Sidebar
/*******************************************************/

/* THE TWO LENGTHS EVERY FIXED REGION OF THE SHELL MEASURES ITSELF FROM.
   `--admin-sidebar-width` is the nav rail (50px, 170px pinned). `--ai-dock-*`
   is the AI chat panel's column when it is docked to a viewport edge, 0px
   otherwise — AIChat.svelte writes those two onto `:root` (see `applyDockVars`).
   .adminbar, .admin__main and .site-preview are all `position:fixed` boxes that
   used to hardcode `left:50px` and a pinned `left:170px` override each; going
   through variables means a docked panel SHRINKS the page instead of covering
   it without every one of those rules having to know the panel exists. */
.admin{--admin-sidebar-width:50px;}
.admin--sidebar-pinned{--admin-sidebar-width:170px;}

/* The usable box: the rail on one side, whatever the chat has docked on the
   other. Used by all three fixed regions below. */
.admin{--admin-shell-left:calc(var(--admin-sidebar-width) + var(--ai-dock-left, 0px));--admin-shell-right:var(--ai-dock-right, 0px);}

.admin-sidebar{position:fixed;z-index:2;top:0;bottom:0;width:50px;display:flex;flex-direction:column;background:var(--background-dark);color:#fff;transition:.15s all;padding:0 15px;overflow-x:hidden;overflow-y:auto}
.admin--sidebar-active .admin-sidebar{}
.admin:has(.modal--active) .admin-sidebar{z-index:1}
body.tox-fullscreen .admin-sidebar{z-index:1;}
/* A fullscreen TinyMCE field editor renders inside .builder (z-index:2), which sits
   below .adminbar (z-index:3) within the shared .admin__main stacking context. That
   ordering is intentional — it's what lets the adminbar's title dropdown overlay the
   preview — so the editor's own z-index (1200) can't lift it above the bar. Rather
   than invert the stack, start the editor just below the bar; the dropdown still
   opens over it because the whole adminbar subtree outranks the builder subtree. */
.tox.tox-tinymce.tox-fullscreen{top:calc(50px + (100vh - 50px) * 0.025) !important;left:2.5vw !important;right:auto !important;bottom:auto !important;width:95vw !important;height:calc((100vh - 50px) * 0.95) !important;}
/* TinyMCE's fullscreen plugin has no backdrop — it "blocks" the page only by covering
   100% of it. Now that it's inset, add our own scrim so the exposed canvas is dimmed and
   non-interactive. It lives in .builder (z-index:2) at z:1199, just under the editor
   (z:1200), so the editor stays on top while everything else in the canvas is covered.
   The adminbar (z-index:3, above .builder) stays interactive on purpose — Save/undo/etc. */
body.tox-fullscreen .builder::after{content:'';position:fixed;inset:0;background:rgba(15,23,42,0.55);z-index:1199;}

.admin-sidebar::-webkit-scrollbar{width:5px}
.admin-sidebar::-webkit-scrollbar-track{background:transparent}
.admin-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.3);border-radius:10px}

.admin-sidebar__main{flex:1;}

.admin-sidebar__logo{margin:14px 0 -21px 0;height:32px;position:relative;}
.admin-sidebar__logo img{position:absolute;}
.admin-sidebar__logo img.logo-shape{width:20px;height:20px;top:0;left:0;}
.admin-sidebar__logo img.logo-text{width:90px;opacity:0;top:0px;left:30px;transition:.2s opacity}
.admin--sidebar-active .admin-sidebar__logo img.logo{opacity:1}
.admin--sidebar-active .admin-sidebar__logo img{opacity:1;}
.admin-sidebar__logo-button{background:none;border:none;cursor:pointer;padding:0;display:flex;align-items:center;width:100%;height:32px;position:relative;}
.admin-sidebar__logo-chevron{width:16px;height:16px;color:#bcbcbc;opacity:0;position:absolute;right:-6px;top:50%;transform:translateY(-50%);transition:.2s all;}
.admin--sidebar-active .admin-sidebar__logo-chevron{opacity:.5;}
.admin-sidebar__logo-button:hover .admin-sidebar__logo-chevron{opacity:1;color:#fff;}
.sidebar-flyout--logo{anchor-name:--logo-anchor;}
.sidebar-flyout__menu--logo{position-anchor:--logo-anchor;}

.admin-sidebar__section{height:50px;position:relative;pointer-events:none;}
.admin-sidebar__section:after{z-index:1;content:'';border-top:1px solid rgba(255,255,255,0.15);position:absolute;left:0;width:100%;top:50%;}
.admin-sidebar__section span{z-index:2;opacity:0;position:absolute;left:0;top:50%;transform: translateY(-50%);white-space:nowrap;padding:0 10px 0 0;transition:.2s all;color:#bcbcbc;text-transform:uppercase;font-size:11px;}
.admin--sidebar-active .admin-sidebar__section span{opacity:1;background: var(--background-dark)}


.admin-sidebar__nav{}
.admin-sidebar__nav ul{margin:0;padding:0;list-style:none;}
.admin-sidebar__nav ul{}
.admin-sidebar__nav ul li{margin:0;padding:0;list-style:none;line-height:1;display:flex;gap:20px}
.admin-sidebar__nav ul li:not(:last-child){margin:0 0 6px 0;}
.admin-sidebar__nav ul li a{cursor:pointer}
.admin-sidebar__nav ul li a:nth-child(2){display:none;}
.admin-sidebar__nav ul li .button{color:#bcbcbc;font-size:12px;display:flex;flex:1;justify-content:flex-start;}
.admin-sidebar__nav ul li .button[aria-current="page"]{color:#fff;}
.admin-sidebar__nav ul li .button:hover{color:#fff;}
.admin-sidebar__nav ul li .button .button__icon{opacity:.4;color:#fff}
.admin-sidebar__nav ul li .button .button__icon svg{width:18px;height:18px;}
.admin-sidebar__nav ul li .button .button__label{opacity:0;transition:.2s all}
.admin--sidebar-active .admin-sidebar__nav ul li .button .button__label{opacity:1;}
.admin-sidebar__nav ul li.admin-sidebar__nav--active .button__icon{color:#fff;opacity:1}
.admin-sidebar__nav ul li.admin-sidebar__nav--active .button__label{color:#fff;}
.admin-sidebar__nav ul li.admin-sidebar__nav--disabled{pointer-events:none;}
.admin-sidebar__nav ul li.admin-sidebar__nav--disabled .button__icon{opacity:.15}
.admin--sidebar-active .admin-sidebar__nav ul li.admin-sidebar__nav--disabled .button__label{opacity:.15}
.admin-sidebar__nav ul li ul{margin:10px 0 0 20px;}
.admin-sidebar__nav ul li ul li{margin:0 0 10px 0;}

.admin-sidebar__footer{padding:10px 0 10px 0px}
.admin-sidebar__footer .admin-sidebar__nav ul li:not(:last-child){margin:0 0 10px 0;}

/* Sidebar open/hover/pinned state */
.admin--sidebar-hover .admin-sidebar{width:170px;}
.admin--sidebar-pinned .admin-sidebar{width:170px;}
.admin--sidebar-pinned .admin-sidebar__header{opacity:1}
.admin--sidebar-pinned .admin-sidebar__section span{display:block;}
.admin--sidebar-pinned .admin-sidebar__nav ul li .button .button__label{display:block;}
/* No `.admin--sidebar-pinned` overrides here any more — pinning changes
   `--admin-sidebar-width` above, and all three regions read it. */

.site-preview{position:fixed;z-index:1;top:50px;right:var(--admin-shell-right);bottom:0;left:var(--admin-shell-left);}

/*******************************************************/
/* User Menu
/*******************************************************/

.user-menu{position:relative;font-size:12px;anchor-name:--user-anchor;}
.user-menu .button{padding:10px 10px;margin:0 -10px}
.user-menu .button:hover{background:rgba(255,255,255,0.1) !important;padding:10px 10px}
.admin-sidebar__nav .user-menu .button__label{flex-direction:column;align-items:flex-start;line-height:1.3;overflow:hidden;text-align:left;}
.admin--sidebar-active .admin-sidebar__nav .user-menu .button__label{display:flex !important;}
.user-menu__name,.user-menu__email{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14ch;}
.user-menu__email{color:#9ca3af;font-size:10px;}

/*******************************************************/
/* Sidebar Flyout Menus
/*******************************************************/

.sidebar-flyout{position:relative;}
.sidebar-flyout--settings{anchor-name:--settings-anchor;}
.sidebar-flyout--tools{anchor-name:--tools-anchor;}
.sidebar-flyout--pe{anchor-name:--pe-anchor;}
.sidebar-flyout__chevron{display:flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;padding:0;width:0;height:22px;color:#bcbcbc;opacity:0;transition:.1s all;flex-shrink:0;overflow:hidden;pointer-events:none;}
.sidebar-flyout__chevron:hover{opacity:1;color:#fff}
.sidebar-flyout:hover .sidebar-flyout__chevron{opacity:1;color:#fff}
.sidebar-flyout__chevron svg{width:16px;height:16px;flex-shrink:0;}
.admin--sidebar-active .sidebar-flyout__chevron{width:22px;opacity:.5;pointer-events:auto;}
.sidebar-flyout__menu{position:fixed;top:anchor(top);left:anchor(right);margin-left:15px;background:#363636;min-width:170px;border-radius:5px;padding:6px 0;box-shadow:0 8px 30px rgba(0,0,0,0.4);z-index:1000;white-space:nowrap;position-try-fallbacks:flip-block;}
.sidebar-flyout__menu--settings{position-anchor:--settings-anchor;}
.sidebar-flyout__menu--tools{position-anchor:--tools-anchor;}
.sidebar-flyout__menu--pe{position-anchor:--pe-anchor;}
.sidebar-flyout__menu--user{position-anchor:--user-anchor;top:auto;bottom:anchor(bottom);}
.sidebar-flyout__menu::before{content:'';position:absolute;top:0;bottom:0;right:100%;width:15px;}
.sidebar-flyout__item{display:flex;align-items:center;gap:10px;padding:6px 12px;color:#d1d5db;text-decoration:none;transition:.1s all;cursor:pointer;background:none;border:none;width:100%;text-align:left;font-family:inherit;font-size:12px;}
.sidebar-flyout__item:hover{background:rgba(255,255,255,0.1);color:#fff}
.sidebar-flyout__item-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;opacity:.7;flex-shrink:0;}
.sidebar-flyout__item-icon svg{width:18px;height:18px;}
.sidebar-flyout__item:hover .sidebar-flyout__item-icon{opacity:1}
.sidebar-flyout__item-label{flex:1}
.sidebar-flyout__item-count{opacity:.45;font-weight:normal;margin-left:4px;}
.sidebar-flyout__header{display:flex;align-items:center;gap:10px;padding:8px 12px;font-size:12px}
.sidebar-flyout__header-avatar{display:flex;align-items:center;justify-content:center;width:20px;height:20px;flex-shrink:0}
.sidebar-flyout__header-avatar svg{width:20px;height:20px;opacity:.6}
.sidebar-flyout__header-info{flex:1;overflow:hidden}
.sidebar-flyout__header-name{font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-flyout__header-email{color:#9ca3af;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.sidebar-flyout__divider{height:1px;background:rgba(255,255,255,0.1);margin:8px 0}


/*******************************************************/
/* Presence
/*******************************************************/

.presence-bubble{anchor-name:--presence-anchor;position:relative;}
.presence-bubble .button__icon{position:relative;opacity:.3;transition:.2s all}
.presence-bubble--active .button__icon{opacity:.7 !important;}
.presence-bubble--alert .button__icon{opacity:1 !important;color:#4ade80;animation:presence-pulse 1.5s ease-in-out 3;}
.presence-badge{background:#facc15;color:#000;border-radius:8px;padding:1px 5px;font-size:9px;font-weight:600;position:absolute;top:-4px;right:-6px;line-height:1.2;}
.presence-badge--danger{background:var(--danger);color:#fff;}
.sidebar-flyout__menu--presence{position-anchor:--presence-anchor;top:auto;bottom:anchor(bottom);}
.presence-section-label{padding:4px 12px;font-size:10px;text-transform:uppercase;color:#9ca3af;letter-spacing:0.5px;}
.presence-user{cursor:default !important;}
.presence-user__meta{font-size:10px;color:#9ca3af;margin-top:1px;}
@keyframes presence-pulse{0%,100%{opacity:1}50%{opacity:.4}}


/*******************************************************/
/* AI Chat Popover
/*******************************************************/

/* Disable pointer events on everything during drag/resize */
body.ai-chat-dragging * {
  pointer-events: none !important;
}

body.ai-chat-dragging .ai-chat-popover,
body.ai-chat-dragging .ai-chat-popover * {
  pointer-events: auto !important;
}

/* A MODAL COVERS THE CHAT PANEL, DOCKED OR FLOATING.
   Raising the modal's own z-index cannot do this. Modals render inside
   .admin__main, which is `position:fixed; z-index:1` and therefore a stacking
   context — so `.modal{z-index:1201}` is 1201 WITHIN that context, and no value
   lifts it past a sibling of .admin__main. The panel has to come down instead,
   which is the same fix already applied to the nav rail a few rules up
   (`.admin:has(.modal--active) .admin-sidebar`).
   0, not 1: the panel is AFTER .admin__main in the DOM, so at 1 it would win the
   tie the sidebar loses. */
.admin:has(.modal--active) .ai-chat-popover,
/* And the same for a fullscreen TinyMCE, which is component mode's other
   take-over-the-screen state. Its scrim is `.builder::after` at z-index 1199,
   inside .admin__main's stacking context and therefore unable to reach a
   sibling of it — so the rail is dimmed by being sent to z-index 1 a few rules
   up, and the chat has to come down for the same reason. 0 rather than 1
   because the chat is after .admin__main in the DOM and would win the tie. */
body.tox-fullscreen .ai-chat-popover {
  z-index: 0;
}

/* Popover container */
.ai-chat-popover {
  position: fixed;
  z-index: 1200;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  transition: opacity 0.2s ease, transform 0.2s ease;
  overflow: hidden;
}

/* Header */
.ai-chat-popover__header {
  background: #f7f7f8;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e0e0;
  cursor: move;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  min-height: 48px;
}

.ai-chat-popover__header:active {
  cursor: grabbing;
}

/* About-this-chat popover. Anchored to its own button rather than spanning the
   panel like the previous-chats list: a few rows of facts, not a list to scan.
   Above the panel's own z-index so it is not clipped by the header. */
.ai-chat-info {
  position: relative;
  display: flex;
}
.ai-chat-info__menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 10;
  min-width: 280px;
  max-width: 340px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  padding: 8px 4px;
  font-size: 12px;
  cursor: default;
}
.ai-chat-info__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 12px;
}
.ai-chat-info__key {
  flex: 0 0 74px;
  color: #8b909c;
}
.ai-chat-info__value {
  flex: 1;
  min-width: 0;
  color: #1f1f1f;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  line-height: 1.45;
  word-break: break-all;
  text-align: left;
}
/* The session id is the one row anybody wants on their clipboard. */
.ai-chat-info__value--copy {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 2px;
}
.ai-chat-info__value--copy:hover {
  color: #0b5cad;
}

.ai-chat-popover__title {
  font-weight: 600;
  font-size: 14px;
  color: #1f1f1f;
}

.ai-chat-popover__close {
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: background 0.2s;
}

.ai-chat-popover__close:hover {
  background: rgba(0, 0, 0, 0.05);
}

.ai-chat-popover__close:disabled {
  opacity: 0.4;
  cursor: default;
}

.ai-chat-popover__close--active {
  background: rgba(0, 0, 0, 0.08);
  color: #1f1f1f;
}

.ai-chat-popover__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Model picker — shown in the header only while the chat is still empty.
   Anchors its menu to the trigger button rather than spanning the panel like
   the previous-chats dropdown, since the list is short. */
.ai-chat-model {
  position: relative;
  display: flex;
  align-items: center;
}

/* Chat-settings modal. Deliberately ABOVE .ai-chat-popover (z-index 1200):
   it holds three independent choices, so it stays open across clicks and only
   ✕ / Done / backdrop / Escape close it. */
.ai-chat-model-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(15, 23, 42, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  cursor: default;
}

.ai-chat-model-modal {
  width: 800px;
  max-width: 100%;
  max-height: min(85vh, 900px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ai-chat-model-modal__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  font-size: 15px;
  font-weight: 600;
  color: #1f1f1f;
}

.ai-chat-model-modal__x {
  border: none;
  background: transparent;
  font-size: 14px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 6px;
  color: #6b6b6b;
  cursor: pointer;
}

.ai-chat-model-modal__x:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #1f1f1f;
}

.ai-chat-model-modal__locknote {
  margin: 0 16px 4px;
  padding: 6px 10px;
  border-radius: 6px;
  background: #fef3c7;
  color: #92400e;
  font-size: 12px;
}

.ai-chat-model-modal__intro {
  margin: -4px 16px 10px;
  font-size: 12.5px;
  color: #6b6b6b;
}

.ai-chat-model-modal__body {
  padding: 2px 16px 12px;
  overflow-y: auto;
}

/* The model table: one row per model under a provider band, one radio
   column per role (Main, and Subagents for superadmin). Rows are the unit —
   the highlight is on the row, so "what is running where" reads across it. */
.ai-chat-model-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  overflow: hidden;
  font-size: 13.5px;
  color: #1f1f1f;
}

.ai-chat-model-table th,
.ai-chat-model-table td {
  padding: 0;
  border-top: 1px solid #ececec;
}

.ai-chat-model-table thead th {
  border-top: none;
  padding: 9px 12px;
  background: #f5f6f8;
  font-size: 12px;
  font-weight: 600;
  color: #6b6b6b;
  text-align: center;
}

.ai-chat-model-table thead th.ai-chat-model-table__model {
  text-align: left;
}

/* Provider band. Logo + name; the models beneath indent to the name. */
.ai-chat-model-table__provider th {
  padding: 8px 12px;
  background: #f5f6f8;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.ai-chat-model-table__vendor {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.ai-chat-model-table__logo {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
}

.ai-chat-model-table__logo svg {
  width: 100%;
  height: 100%;
}

/* Model name, indented to the provider name (12px pad + 18px logo + 10px gap).
   The label targets the Main radio, so clicking the name picks it. */
.ai-chat-model-table__model label {
  display: block;
  padding: 10px 12px 10px 40px;
  cursor: pointer;
}

.ai-chat-model-table__pick {
  width: 120px;
  text-align: center;
}

/* Whole cell is the hit target, not just the 18px radio. */
.ai-chat-model-table__cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  cursor: pointer;
}

.ai-chat-model-table tbody tr:hover td {
  background: #fafafa;
}

.ai-chat-model-table__row--active td {
  background: #eff4ff;
}

.ai-chat-model-table__row--active td:hover,
.ai-chat-model-table tbody tr.ai-chat-model-table__row--active:hover td {
  background: #e6eeff;
}

/* Custom radios so a LOCKED pick still reads as chosen (a native disabled
   checked radio greys out, which says "off" when it means "fixed"). */
.ai-chat-model-table input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #9ca3af;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-content: center;
  cursor: pointer;
}

.ai-chat-model-table input[type="radio"]:hover:not(:disabled) {
  border-color: #2563eb;
}

.ai-chat-model-table input[type="radio"]:checked {
  border-color: #2563eb;
}

.ai-chat-model-table input[type="radio"]:checked::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #2563eb;
}

.ai-chat-model-table input[type="radio"]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.ai-chat-model-table input[type="radio"]:disabled {
  border-color: #d1d5db;
  cursor: not-allowed;
}

.ai-chat-model-table input[type="radio"]:disabled:checked {
  border-color: #93b4f5;
}

.ai-chat-model-table input[type="radio"]:disabled:checked::before {
  background: #93b4f5;
}

.ai-chat-model-table input[type="radio"]:disabled ~ *,
.ai-chat-model-table__cell:has(input:disabled) {
  cursor: not-allowed;
}

.ai-chat-model-table tr:has(input[name="ai-chat-model-main"]:disabled) .ai-chat-model-table__model label {
  cursor: not-allowed;
  color: #6b6b6b;
}

/* Reasoning effort box, under the table: one pill row per agent. */
.ai-chat-effort {
  margin-top: 12px;
  padding: 12px 14px 8px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}

.ai-chat-effort__title {
  font-size: 14px;
  font-weight: 700;
  color: #1f1f1f;
}

.ai-chat-effort__note {
  margin: 2px 0 10px;
  font-size: 12px;
  color: #6b6b6b;
}

.ai-chat-effort__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 36px;
  margin-bottom: 4px;
}

.ai-chat-effort__label {
  flex: 0 0 96px;
  font-size: 13px;
  font-weight: 600;
  color: #1f1f1f;
}

.ai-chat-effort__none {
  font-size: 12.5px;
  color: #9ca3af;
}

.ai-chat-model-modal__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-chat-model-modal__pill {
  padding: 5px 12px;
  border: 1px solid #d7d7d7;
  border-radius: 999px;
  background: #fff;
  font-size: 12.5px;
  color: #1f1f1f;
  cursor: pointer;
}

.ai-chat-model-modal__pill:hover:not(:disabled) {
  border-color: #9ca3af;
}

.ai-chat-model-modal__pill--active {
  border-color: #2563eb;
  background: #eff4ff;
  color: #1d4ed8;
  font-weight: 600;
}

.ai-chat-model-modal__pill:disabled {
  color: #9e9e9e;
  cursor: not-allowed;
}

.ai-chat-model-modal__foot {
  display: flex;
  justify-content: flex-end;
  padding: 10px 16px 14px;
  border-top: 1px solid #ececec;
}

.ai-chat-model-modal__done {
  padding: 7px 18px;
  border: none;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.ai-chat-model-modal__done:hover {
  background: #1d4ed8;
}

/* Previous-chats dropdown — overlays the top of the content area */
.ai-chat-history {
  position: absolute;
  top: 48px;
  left: 0;
  right: 0;
  z-index: 5;
  background: #fff;
  border-bottom: 1px solid #e0e0e0;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  max-height: 60%;
}

.ai-chat-history__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #6b6b6b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #f0f0f0;
}

.ai-chat-history__close {
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: #999;
  display: flex;
  border-radius: 4px;
}

.ai-chat-history__close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #555;
}

.ai-chat-history__list {
  overflow-y: auto;
  padding: 4px;
}

.ai-chat-history__row {
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.ai-chat-history__row:hover {
  background: #f3f3f4;
}

.ai-chat-history__row--active {
  background: #ecf3ff;
}

.ai-chat-history__item {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  color: #1f1f1f;
}

.ai-chat-history__item:disabled {
  cursor: default;
  opacity: 0.6;
}

.ai-chat-history__rename,
.ai-chat-history__delete {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #b0b0b0;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}

.ai-chat-history__delete {
  margin-right: 4px;
}

.ai-chat-history__row:hover .ai-chat-history__rename,
.ai-chat-history__row:hover .ai-chat-history__delete,
.ai-chat-history__row--active .ai-chat-history__rename,
.ai-chat-history__row--active .ai-chat-history__delete {
  opacity: 1;
}

.ai-chat-history__rename:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #555;
}

.ai-chat-history__delete:hover {
  background: rgba(220, 38, 38, 0.1);
  color: #dc2626;
}

.ai-chat-history__rename:disabled,
.ai-chat-history__delete:disabled {
  cursor: default;
}

.ai-chat-history__delete-spinner {
  display: inline-block;
  font-size: 13px;
  animation: spin 1.2s linear infinite;
}

.ai-chat-history__rename-input {
  flex: 1;
  min-width: 0;
  margin: 4px;
  padding: 6px 8px;
  font-size: 13px;
  color: #1f1f1f;
  border: 1px solid #397ff1;
  border-radius: 6px;
  outline: none;
}

.ai-chat-history__retry {
  margin-left: 6px;
  padding: 2px 8px;
  font-size: 12px;
  background: transparent;
  border: 1px solid #d0d0d0;
  border-radius: 6px;
  cursor: pointer;
  color: #555;
}

.ai-chat-history__retry:hover {
  background: #f3f3f4;
}

.ai-chat-history__title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-chat-history__time {
  flex-shrink: 0;
  font-size: 11px;
  color: #9b9b9b;
}

.ai-chat-history__empty {
  padding: 16px 12px;
  font-size: 13px;
  color: #9b9b9b;
  text-align: center;
}

/* DOCKED — a full-height column at a viewport edge.
   Not merely a position: the shell's fixed regions measure themselves off
   `--ai-dock-left`/`--ai-dock-right` (top of this file), so docking takes the
   column OUT of the page rather than floating over it. That is the whole point
   on the html-mode editor, where the preview iframe owns the entire viewport
   and a floating panel necessarily covers the thing being edited.

   The docked panel's `top`/`bottom`/`height` come from here rather than the
   inline style, which emits only `width` while docked. A left dock starts
   AFTER the nav rail rather than on top of it — covering the navigation to
   make room for the chat would be a strange trade. */
.ai-chat-popover--docked {
  top: 0;
  bottom: 0;
  border-radius: 0;

  /* No shadow. The floating panel's shadow says "this is sitting ON the page";
     a docked one is part of the layout, and the border on its inner edge is
     already the only separation it needs. */
  box-shadow: none;

  /* A docked panel overlaps nothing, so it drops out of the overlay stack. At
     the floating z-index (1200) it would sit above the nav rail and its flyout
     menus — both of which expand OVER the page on hover — so docking left would
     have swallowed the navigation it sits next to.

     1, not 2, so the rail (2) wins: hovering the collapsed rail widens it from
     50px to 170px, straight across the left edge of a left-docked panel. That
     expansion is an overlay everywhere else on the screen, drawing over
     .admin__main rather than reflowing it, and there is no reason the chat
     should be the one surface it cannot cover — at 2 the labels were clipped
     mid-word. Tying with .admin__main (also 1) is harmless: the shell has
     already shrunk out of the docked column, so they never overlap, and the
     panel wins the tie on DOM order anyway. */
  z-index: 1;
}
.ai-chat-popover--dock-right {
  right: 0;
  border-right: none;
}
.ai-chat-popover--dock-left {
  left: var(--admin-sidebar-width, 50px);
  border-left: none;
}

/* Docked, only the inner edge resizes — the other three are pinned to the
   viewport and have nothing to give. */
.ai-chat-popover__dock-resize {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  z-index: 20;
  cursor: ew-resize;
  background: transparent;
  transition: background 0.15s;
}
.ai-chat-popover--dock-right .ai-chat-popover__dock-resize { left: 0; }
.ai-chat-popover--dock-left .ai-chat-popover__dock-resize { right: 0; }
.ai-chat-popover__dock-resize:hover { background: rgba(0, 0, 0, 0.08); }

/* Where a release right now would put the panel. Shown while a floating panel
   is dragged into either snap zone, so throwing it at an edge is a visible
   commitment rather than a surprise. */
.ai-chat-dock-preview {
  position: fixed;
  top: 0;
  bottom: 0;
  z-index: 1199;
  pointer-events: none;
  background: rgba(37, 99, 235, 0.12);
  border: 2px dashed rgba(37, 99, 235, 0.45);
}

/* Maximized state — dragging and resizing are disabled, hide affordances. */
.ai-chat-popover--maximized .ai-chat-popover__header,
.ai-chat-popover--maximized .ai-chat-popover__header:active {
  cursor: default;
}
.ai-chat-popover--maximized .resize-handle {
  display: none;
}

/* Content area */
.ai-chat-popover__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
}

/* Messages area */
.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Chat message bubbles */
.chat-message {
  display: flex;
  max-width: 85%;
  /* Let the bubble shrink past its content's minimum. Without this, a long
     token sets a floor the 85% cap cannot cross, and the box grows instead. */
  min-width: 0;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-message--user {
  align-self: flex-end;
}

/* Assistant responses are documents, not chat lines — headings, tables and
   lists need the room, so they run the full width of the thread with no bubble
   chrome. The 85% cap and the rounded background stay on the user side, which
   is what actually carries the "who said this" signal. */
.chat-message--ai {
  align-self: stretch;
  max-width: 100%;
}

.chat-message--ai .chat-message__inner {
  flex: 1;
}

/* Error responses carry both --ai and --error, so they'd inherit the full-bleed
   treatment above — a full-width red slab. Put them back in a bubble. Each
   --error rule ties its --ai counterpart on specificity, so both must stay
   AFTER the matching --ai rule to win on source order. */
.chat-message--error {
  align-self: flex-start;
  max-width: 85%;
}

.chat-message__text {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;

  /* `anywhere`, not `break-word`, and the difference is the whole bug.
     Both break a long word that will not fit on a line, so both LOOK right in
     a wide panel. Only `anywhere` also lowers the element's min-content width.
     Under `break-word` a pasted URL kept the bubble at least as wide as itself,
     which the 85% cap could not override — and since the user side is aligned
     to the right, the excess hung off the LEFT edge and was clipped by the
     panel. Narrow the chat until a URL no longer fits and the prompt starts
     losing its first characters. */
  overflow-wrap: anywhere;
}

.chat-message--user .chat-message__text {
  background: #0b93f6;
  color: #fff;
  border-bottom-right-radius: 4px;
  border:1px solid #fff;
}

.chat-message--ai .chat-message__text {
  background: transparent;
  color: #1f1f1f;
  border: none;
  border-radius: 0;
  padding: 0;
}

.chat-message--error .chat-message__text {
  background: #ff4444;
  color: #fff;
  padding: 10px 14px;
  border-radius: 16px;
  border-bottom-left-radius: 4px;
}

.chat-message__text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  word-break: break-word;
}

.chat-message--user .chat-message__text code {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.chat-message__codeblock {
  background: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0;
  overflow-x: auto;
  white-space: pre;
}

.chat-message__codeblock code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  word-break: normal;
  white-space: pre;
}

.chat-message__text img {
  max-width: 100%;
}

/* ── AI markdown blocks (util.js formatChatMessage) ────────────────────────
   Scoped to .chat-message rather than .chat-message__text: the playbook
   run-result transcript renders the HTML straight into the bubble with no
   inner wrapper. Several rules exist only to beat the global element styles
   at the top of this file (hr margin 40px, ul/ul li margins). */

.chat-message__h {
  font-weight: 600;
  line-height: 1.3;
  margin: 10px 0 4px;
}

.chat-message__h:first-child {
  margin-top: 0;
}

/* Capped hard: the docked chat panel is narrow, and an unclamped h1/h2 dwarfs
   the bubble it sits in. */
.chat-message__h--1 { font-size: 1.25em; }
.chat-message__h--2 { font-size: 1.15em; }
.chat-message__h--3 { font-size: 1.05em; }
.chat-message__h--4,
.chat-message__h--5,
.chat-message__h--6 { font-size: 1em; }

.chat-message .chat-message__hr {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.14);
  margin: 10px 0;
}

.chat-message--user .chat-message__hr {
  border-bottom-color: rgba(255, 255, 255, 0.35);
}

.chat-message__quote {
  margin: 6px 0;
  padding: 2px 0 2px 10px;
  border-left: 3px solid rgba(0, 0, 0, 0.18);
  opacity: 0.9;
}

.chat-message--user .chat-message__quote {
  border-left-color: rgba(255, 255, 255, 0.5);
}

.chat-message ul.chat-message__list,
.chat-message ol.chat-message__list {
  margin: 6px 0;
  padding-left: 22px;
}

.chat-message .chat-message__list li {
  margin: 0 0 2px 0;
  padding: 0;
}

/* Wide tables scroll inside this wrapper instead of blowing out the panel. */
.chat-message__tablewrap {
  margin: 8px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.chat-message__table {
  border-collapse: collapse;
  font-size: 0.92em;
  /* auto + min-width keeps a 2-column Metric/Value table filling the bubble
     while letting anything wider size to its content and scroll. */
  width: auto;
  min-width: 100%;
}

.chat-message__table th,
.chat-message__table td {
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}

.chat-message__table th {
  background: rgba(0, 0, 0, 0.05);
  font-weight: 600;
  white-space: nowrap;
}

.chat-message--user .chat-message__table th,
.chat-message--user .chat-message__table td {
  border-color: rgba(255, 255, 255, 0.35);
}

.chat-message--user .chat-message__table th {
  background: rgba(255, 255, 255, 0.15);
}

.chat-message__inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.chat-message--user .chat-message__inner {
  align-items: flex-end;
}

.chat-message__files {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.chat-message__file {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #f1f1f1;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 4px 10px;
  font-size: 12px;
  color: #1f1f1f;
  max-width: 200px;
}

.chat-message__file span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-message__file--thumb {
  padding: 0;
  width: 96px;
  height: 96px;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}

.chat-message__file--thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.chat-message--tool {
  align-self: flex-start;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  background: transparent;
  font-size: 12px;
  color: #888;
  font-style: italic;
}


.chat-message__tool-icon {
  flex-shrink: 0;
  opacity: 0.6;
}

.chat-message__tool-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
  font-size: 11px;
  color: #555;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
}

.chat-message--tool-subagent {
  margin-left: 22px;
}

.chat-message--tool-subagent .chat-message__tool-icon {
  opacity: 0.4;
}

.chat-message--tool-subagent .chat-message__tool-name {
  background: rgba(99, 102, 241, 0.08);
  color: #6366f1;
}

.chat-message__tool-badge {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-style: normal;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
  padding: 1px 5px;
  border-radius: 3px;
}

.chat-message--subagent-block {
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 4px;
  padding: 6px 10px;
  background: rgba(99, 102, 241, 0.04);
  border-left: 2px solid rgba(99, 102, 241, 0.4);
  border-radius: 3px;
}

.chat-message__subagent-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 2px;
}

.chat-message__subagent-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #6366f1;
}

.chat-message__subagent-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px;
  color: #888;
  background: rgba(0, 0, 0, 0.05);
  padding: 0 5px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
}

.chat-message__subagent-tools {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 18px;
}

.chat-message__subagent-tool {
  display: flex;
  align-items: center;
  font-size: 11px;
}

.chat-message__subagent-tool .chat-message__tool-name {
  background: rgba(99, 102, 241, 0.06);
  color: #6366f1;
}

.typing-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
  height: 1em;
}
.typing-indicator span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8a8a8a;
  display: inline-block;
  animation: typing-bounce 1.2s infinite ease-in-out;
}
.typing-indicator span:nth-child(2) { animation-delay: 0.15s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.empty-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #666;
  font-style: italic;
  text-align: center;
  padding: 20px;
}

/* File attachments preview */
.ai-chat-attachments {
  padding: 8px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #fafafa;
}

.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 6px 10px 6px 12px;
  font-size: 13px;
  max-width: 200px;
}

.attachment-chip__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #1f1f1f;
}

.attachment-chip__remove {
  background: transparent;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.attachment-chip__remove:hover {
  background: rgba(0, 0, 0, 0.05);
}

.attachment-chip__remove svg {
  width: 12px;
  height: 12px;
}

.attachment-chip--thumb {
  position: relative;
  padding: 0;
  width: 112px;
  height: 112px;
  max-width: none;
  border-radius: 8px;
  overflow: hidden;
  background: #f3f4f6;
}

.attachment-chip__thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.attachment-chip__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  color: #1f1f1f;
  font-size: 18px;
}

/* A CSS ring, not the ⟳ glyph: a rotated glyph turns about its text box, not its own centre, so it wobbled. */
.attachment-chip__overlay-spinner,
.attachment-chip__spinner {
  display: inline-block;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(31, 31, 31, 0.2);
  border-top-color: #1f1f1f;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.attachment-chip__spinner { width: 12px; height: 12px; border-width: 1.5px; border-color: currentColor; border-top-color: transparent; flex: none; }

.attachment-chip__remove--thumb {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
}

.attachment-chip__remove--thumb:hover {
  background: rgba(0, 0, 0, 0.75);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Divider between the thread and the composer. The 1px rule is always visible;
   the element itself is a taller invisible grab strip so the drag target is
   comfortable without a thick bar. */
.ai-chat-input-drag-handle {
  position: relative;
  flex-shrink: 0;
  height: 11px;
  cursor: row-resize;
  border-top: 1px solid #e0e0e0;
  transition: border-color 0.15s;
}

.ai-chat-input-drag-handle::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 5px;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: #c8c8c8;
  opacity: 0;
  transition: opacity 0.15s;
}

.ai-chat-input-drag-handle:hover {
  border-top-color: #c8c8c8;
}

.ai-chat-input-drag-handle:hover::after {
  opacity: 1;
}

/* Composer: borderless and edge-to-edge so the panel width is the input width */
.ai-chat-input-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 120px;
  padding: 0;
  background: #fff;
  flex-shrink: 0;
  box-sizing: border-box;
  transition: background 0.2s;
}

.ai-chat-input:disabled {
  background: transparent;
  color: #999;
  cursor: not-allowed;
}

.ai-chat-input-wrapper--disabled {
  background: #f7f7f8;
}

.ai-chat-input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 6px 18px 4px;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
  resize: none;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: transparent transparent; /* Firefox - hide by default */
}

/* Show scrollbar on hover/focus for Firefox */
.ai-chat-input:hover,
.ai-chat-input:focus {
  scrollbar-color: #d0d0d0 transparent; /* Firefox */
}

/* Scrollbar styling for webkit browsers */
.ai-chat-input::-webkit-scrollbar {
  width: 6px;
}

.ai-chat-input::-webkit-scrollbar-track {
  background: transparent;
}

.ai-chat-input::-webkit-scrollbar-thumb {
  background: transparent; /* Hidden by default */
  border-radius: 3px;
}

/* Show scrollbar on hover/focus for webkit */
.ai-chat-input:hover::-webkit-scrollbar-thumb,
.ai-chat-input:focus::-webkit-scrollbar-thumb {
  background: #d0d0d0;
}

.ai-chat-input:hover::-webkit-scrollbar-thumb:hover,
.ai-chat-input:focus::-webkit-scrollbar-thumb:hover {
  background: #b0b0b0;
}

.ai-chat-input:focus {
  outline: none;
  box-shadow: none;
}

.ai-chat-input::placeholder {
  color: #999;
}

/* Toolbar row below textarea */
.ai-chat-input-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 14px 12px;
  border: none;
  background: transparent;
}

/* Attach button */
.ai-chat-attach-btn {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}

.ai-chat-attach-btn:hover:not(:disabled) {
  background: #f7f7f8;
  border-color: #ccc;
}

.ai-chat-attach-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Send button */
.ai-chat-send-btn {
  background: var(--primary);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: all 0.2s;
}

.ai-chat-send-btn:hover:not(:disabled) {
  background: var(--primary-darker);
  transform: scale(1.05);
}

.ai-chat-send-btn:disabled {
  background: #e0e0e0;
  color: #999;
  cursor: not-allowed;
}

/* Stop — same button, different job. It takes Send's place rather than sitting
   beside it: the two are never both useful. Black, not red: a red square next
   to the microphone reads as "record", and this button ends a run. Disabled
   while the stop is being honoured. */
.ai-chat-send-btn--stop {
  background: #111827;
}
.ai-chat-send-btn--stop:hover:not(:disabled) {
  background: #000;
}
.ai-chat-send-btn--stop:disabled {
  background: #9ca3af;
  color: #fff;
}

/* Left-grouped controls (attach + model picker) inside the input toolbar */
.ai-chat-input-toolbar__left,
.ai-chat-input-toolbar__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Voice (dictation) button — same shape as attach, mic icon. Pulses red while recording. */
.ai-chat-voice-btn {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #666;
  transition: all 0.2s;
}
.ai-chat-voice-btn:hover:not(:disabled) {
  background: #f5f5f5;
  border-color: #ccc;
  color: #333;
}
.ai-chat-voice-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ai-chat-voice-btn--recording {
  background: #dc2626;
  border-color: #dc2626;
  color: #fff;
  animation: ai-chat-voice-pulse 1.4s ease-in-out infinite;
}
.ai-chat-voice-btn--recording:hover:not(:disabled) {
  background: #b91c1c;
  border-color: #b91c1c;
  color: #fff;
}
@keyframes ai-chat-voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
}

.ai-chat-send-btn svg {
  width: 18px;
  height: 18px;
}

/* Resize handles — invisible hit areas around all edges + corners */
.resize-handle {
  position: absolute;
  background: transparent;
  z-index: 20;
}

/* Edges — thin strips, inset to leave room for corner handles */
.resize-handle--n { top: 0;    left: 14px;  right: 14px; height: 6px; cursor: ns-resize; }
.resize-handle--s { bottom: 0; left: 14px;  right: 14px; height: 6px; cursor: ns-resize; }
.resize-handle--w { left: 0;   top: 14px;   bottom: 14px; width: 6px; cursor: ew-resize; }
.resize-handle--e { right: 0;  top: 14px;   bottom: 14px; width: 6px; cursor: ew-resize; }

/* Corners — square hit areas, sit above edges */
.resize-handle--nw,
.resize-handle--ne,
.resize-handle--sw,
.resize-handle--se {
  width: 14px;
  height: 14px;
  z-index: 21;
}

.resize-handle--nw { top: 0;    left: 0;  cursor: nwse-resize; }
.resize-handle--ne { top: 0;    right: 0; cursor: nesw-resize; }
.resize-handle--sw { bottom: 0; left: 0;  cursor: nesw-resize; }
.resize-handle--se { bottom: 0; right: 0; cursor: nwse-resize; }


/*******************************************************/
/* Top Adminbar
/*******************************************************/

/* z-index:3 keeps the bar (and its open title dropdown) above the pagebuilder
   canvas/sidebars, which sit in positioned stacking contexts (.admin__main z-index:1,
   .builder z-index:2). The dropdown is opened by click state, not hover, so a
   permanent stack is needed rather than the old :hover bump. Docked panels portal
   to <body> at a far higher z-index, so they still overlay the bar as intended. */
.adminbar{background:var(--background-dark);color:#fff;display:flex;align-items:center;height:50px;padding:0 15px;position:fixed;top:0;left:var(--admin-shell-left);right:var(--admin-shell-right);z-index:3;}
.adminbar__start{flex:1;}

.adminbar__main{padding:10px 0px;position:relative;flex:1;max-width:250px;white-space:nowrap;display:flex;align-items:center;gap:10px;}
.adminbar__main-title{cursor:pointer}
.adminbar__main-title-linked:hover{text-decoration:underline}
.adminbar__main .adminbar__main-text{}
.adminbar__main .adminbar__main-text .adminbar__main-status{font-size:11px;opacity:.7;}
.adminbar__main-title{font-weight:bold;font-size:1.2em;}
.adminbar__main-dropdown-title{}

.adminbar__middle{width:100%;text-align:center;width:200px;}

.adminbar__end{flex:1;text-align:right;display:flex;gap:10px;justify-content:flex-end}

.adminbar__dropdown{position:absolute;top:50px;z-index:3;background: var(--background-dark);width:100%;max-width:120px;transition:.1s all;border-radius:5px;padding:2px;box-shadow:0px 0px 10px rgba(0,0,0,0.2);border:1px solid #6f6f6f}
.adminbar__dropdown .button{border:none;}
.adminbar__dropdown .button:not(.active):not(:hover){opacity:.7}
.adminbar__dropdown .button.active{background:#000;}
.adminbar__dropdown .button:hover{opacity:1}
.adminbar__dropdown .button__label{flex:1;text-align:left}

.dropdown{position:relative}
.dropdown__trigger{display:flex;align-items:center;gap:8px;padding:8px 12px;background:transparent;border:1px solid #6f6f6f;border-radius:5px;color:#fff;cursor:pointer;font-size:13px;font-weight:500;min-width:140px;justify-content:space-between}
.dropdown__trigger:hover{border-color:#999}
.dropdown__icon{transition:transform .15s ease}
.dropdown--open .dropdown__icon{transform:rotate(180deg)}
.dropdown__menu{position:absolute;top:100%;left:0;right:0;padding-top:4px;background:transparent;z-index:10}
.dropdown__menu-inner{background:var(--background-dark);border:1px solid #6f6f6f;border-radius:5px;padding:4px;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.dropdown__item{display:block;width:100%;padding:8px 12px;background:none;border:none;color:#bcbcbc;text-align:left;cursor:pointer;border-radius:3px;font-size:13px}
.dropdown__item:hover{background:rgba(255,255,255,0.1);color:#fff}
.dropdown__item--active{color:#fff;background:rgba(255,255,255,0.15)}

/* Title dropdown (integrated with page title) */
.adminbar__title-dropdown{position:relative;margin:0 0 0 -15px;display:inline-block}
.adminbar__title-dropdown-trigger{display:flex;align-items:center;gap:15px;padding:0 15px 0 20px;background:transparent;border:none;border-left:1px solid #4d4d4e;border-right:1px solid #4d4d4e;color:#fff;cursor:pointer;height:50px;min-width:250px;max-width:350px}
.adminbar__title-dropdown-trigger:hover{background:rgba(255,255,255,0.05)}
.adminbar__title-dropdown-text{display:flex;flex-direction:column;text-align:left;flex:1;overflow:hidden}
.adminbar__title-dropdown-status{font-size:11px;opacity:0.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adminbar__title-dropdown-label{font-size:1.2em;font-weight:bold;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adminbar__title-dropdown-icon{opacity:0.7;transition:transform .15s ease}
.adminbar__title-dropdown--open .adminbar__title-dropdown-icon{transform:rotate(180deg)}
.adminbar__title-dropdown-menu{position:absolute;top:100%;left:0;padding-top:0;background:transparent;z-index:10;width:250px}
.adminbar__title-dropdown-menu-inner{background:var(--background-dark);border:1px solid #4d4d4e;border-top:none;padding:4px}
.adminbar__title-dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:none;color:#bcbcbc;text-align:left;cursor:pointer;font-size:13px}
.adminbar__title-dropdown-item:hover{background:rgba(255,255,255,0.1);color:#fff}
.adminbar__title-dropdown-item--active{color:#fff;background:rgba(255,255,255,0.15)}
.adminbar__title-dropdown-item svg{width:16px;height:16px;flex-shrink:0}


/*******************************************************/
/* API Working
/*******************************************************/

.api-working{position:fixed;top:-5px;left:0;right:0;z-index:1300;margin:0;transition:.2s all;opacity:0;}
.api-working--active{top:0;opacity:1}
.api-working__line {width: 100%;height:5px;position: relative;overflow: hidden;background-color: rgba(255,255,255,1)}
.api-working__line:before {content: "";position: absolute;left: -50%;height: 5px;width: 40%;background-color: #397ff1;animation: lineAnim 1s linear infinite;}
@keyframes lineAnim {0% {left: -40%;}50% {left: 20%;width: 80%;}100% {left: 100%;width: 100%;}}

/*******************************************************/
/* Content
/*******************************************************/

.admin__main{position:fixed;top:50px;left:var(--admin-shell-left);right:var(--admin-shell-right);bottom:0;overflow:auto;z-index:1}


.content{padding:30px 30px;}

.content-columns{display:flex;flex:1;gap:30px;margin:0 -30px}
.content-columns__main{flex:1;padding:0px 0 0 30px;width:100%;overflow:auto}
.content-columns__end{width:30%;max-width:300px;padding:0px 30px;min-width:275px;border-left:1px solid var(--border);}

.breadcrumb{font-size:.9em;padding:0px 30px;margin:15px 0 0 0}
.breadcrumb ul{margin:0;padding:0;list-style:none;display:flex;gap:10px}
.breadcrumb ul li{margin:0;padding:0;display:flex;gap:10px}
.breadcrumb ul li a{text-decoration: none;display:inline-flex;align-items:center;gap:5px}
.breadcrumb ul li a svg{width:16px;height:16px;}
.breadcrumb ul li:not(:last-child){font-weight:bold;cursor:pointer}
.breadcrumb ul li:first-child{font-weight:bold;cursor:pointer}
.breadcrumb ul li:not(:first-child):before{opacity:.5;content:'/';display:block;}

.page-title{border-bottom:1px solid var(--border);padding:20px 30px 20px 30px;background:#fff;position:sticky;top:0;display:flex;align-items:center;gap:15px;justify-content:space-between;}
.breadcrumb ~ .page-title{padding-top:10px;}
.page-title__start{}
.page-title__start > *{margin:0;}
.page-title__start h1{font-weight:500;font-size:2em;line-height:1.2}
.page-title__start h1 a{cursor:pointer;}
.page-title__start h1 a:hover{text-decoration:underline;}
.page-title__end{width:33.33%;text-align:right;display:flex;gap:15px;justify-content:flex-end;align-items:center;}

.subheading{display:flex;justify-content:space-between;align-items:center;margin:0 0 20px 0}
.subheading__start{}
.subheading__start h2{margin:0;}
.subheading__end{text-align:right}


.tabs__control{display:flex;gap:25px;margin:0 0 20px 0}
.tabs__control .tab__item{border-bottom:2px solid transparent;display:inline-flex;gap:10px;align-items:center;padding:5px 0px;cursor:pointer;text-decoration: none;color:var(--text);background:none}
.tabs__control .tab__item svg{width:18px;height:18px;opacity:.5;}
.tabs__control .tab__item--active{border-bottom:2px solid var(--primary);color:#000}
.tabs__control .tab__item--active svg{opacity:1;}
.tabs__control.tabs__control--vertical{display:block;margin:0}
.tabs__control.tabs__control--vertical .tab__item{display:block;margin:0 0 10px 0;padding:0 0 3px 0}
.tabs__control.tabs__control--vertical .tab__item--active{border-bottom:2px solid var(--primary);}

.list{border-collapse:collapse;width:100%}
.list__header{display:flex;;gap:15px;align-items:center;background:var(--background-light);padding:0 25px;border-radius:5px;margin:0 0 10px 0;overflow:hidden}
.list__header > .list__column{font-weight:bold;}

.list__column{padding:15px 0}

.list__body{margin:8px 0 0 0;}
.list__body.list__body--sortable{margin:0}

.list__item{position:relative;}
.list__item-selected .list__item-heading{border-color:#000}
.list__item-current .list__item-heading .list__column--title{color: var(--primary)}
.list__body:not(.list__body--sortable) .list__item{margin-bottom:8px}

.list__item-heading{display:flex;align-items:center;position:relative;background:#fff;border:1px solid var(--border);min-height:50px;gap:15px;padding:0 25px;border-radius:5px;text-decoration:none;overflow:hidden}
.list__item-heading--linked:hover{border-color:var(--border-dark);cursor:pointer}
.list__item--open > .list__item-heading{border-radius:5px 5px 0 0;border-color:var(--border-dark)}
.list__item-heading-link:hover{background: var(--background-light)}
.list__item--drag{cursor:move;}

.list__column--date{width:165px;}
.list__column--actions{width:50px;text-align:right;display:flex;justify-content:flex-end;gap:10px}
.list__column--link{color:#000;font-weight:500;text-decoration:none}
.list__column--link:hover{cursor:pointer}
.list__column--title{color:#000;position:relative;flex:1}
.list__column--title svg{width:24px;height:24px;vertical-align:middle;position:relative;top:-1px;margin:0 5px 0 0;opacity:.5}
.list__column--image{width:50px;margin:-10px 0 -10px -15px;font-size:0}
.list__column--image img{width:100%;height:100%;object-fit:fill;border-radius:5px;}
.list__column--gsp-id{width:100px}
.list__column--screenshot{width:150px;}
.list__column--screenshot .screenshot{max-height:150px;overflow:hidden;cursor:pointer;margin:-15px -25px -15px 0;font-size:0}
.list__column--screenshot .screenshot img{width:100%;;border-radius:5px}
.list__column--views{width:52px;display:flex;align-items:center;justify-content:flex-end;text-align:right;white-space:nowrap;text-align:center}
.list__column--views .views-number{font-variant-numeric:tabular-nums;font-weight:500;color:var(--primary)}
.list__column--views .views-number--zero{color:#aaa;font-weight:normal}
.list__column--metric{width:78px;display:flex;align-items:center;justify-content:flex-end;text-align:right;white-space:nowrap;text-align:center}
.list__column--metric .metric-number{font-variant-numeric:tabular-nums;font-weight:500;color:#444}
.list__column--metric .metric-number--clicks{color:var(--primary);font-weight:600}
.list__column--metric .metric-number--zero{color:#bbb;font-weight:normal}
/* Smaller header labels so the long metric names fit the narrower columns */
.list__header > .list__column--views,
.list__header > .list__column--metric{font-size:.82em}

.list__item-content{border:1px solid var(--border-dark);border-top:none;border-radius:0 0 5px 5px;padding:20px 20px}
.layout-preview{display:grid;gap:10px;}
.layout-preview__item{background:var(--background-light);border-radius:4px;padding:10px 10px;text-align:center}

.list__item-children{padding-left:20px}

.dragging{opacity:.4;}
.list__item.dragging .list__item-heading{background:rgba(255,255,255,.7);}


.drop-target{opacity:0;pointer-events:none;border:1px solid var(--primary);transition:.1s all;font-size:0;padding:0 !important;border-radius:100px;height:8px;margin:1px 0;}
.list__body > .drop-target:first-child{margin-top:-8px;}
.list__body.dragging-container-active{zzzpadding-bottom:75px;}
.dragging-container-active .drop-target{pointer-events:auto;}
.list__item.dragging + .drop-target{opacity:0;pointer-events:none}
.list__item.dragging .drop-target{opacity:0;pointer-events:none}

.post-status{display:inline-block;padding:3px 8px;border-radius:5px;border:1px solid transparent;font-weight:normal;font-size:12px;margin:-5px 0 -5px 5px}
.post-status--draft{border-color:orange;}
.post-status--schedule{border-color:blue;}
.post-status--missing{border-color:red;color:red;}
.post-status--unsubscribed{border-color:#8b5cf6;color:#8b5cf6;}


.post-tools{opacity:0;font-weight:normal;font-size:12px;position:absolute;right:10px;top:50%;transform: translateY(-50%);}
.list__item-heading:hover .post-tools{opacity:1;}
.post-tools ul{margin:0;padding:0;list-style:none;display:flex;border:1px solid var(--border);border-radius:5px}
.post-tools ul li{margin:0;display:inline-block;padding:6px 10px;background:var(--background-light);cursor:pointer}
.post-tools ul li a{text-decoration:none;}
.post-tools ul li:first-child{border-radius:5px 0 0 5px}
.post-tools ul li:last-child{border-radius:0 5px 5px 0}
.post-tools ul li:not(:last-child){border-right:1px solid var(--border);}
.post-tools ul li:hover{background:#fff}
.post-tools ul li svg{width:16px;height:16px;}

.toggle-hierarchy{cursor:pointer;background: var(--background-light);position:absolute;top:0;left:0;bottom:0;width:18px;text-align:center;border-right:1px solid var(--border);border-radius:5px 0 0 5px}
.toggle-hierarchy:hover{color:var(--primary);background:#fff}
.toggle-hierarchy svg{width:10px;height:10px;}

.drop-target--hovering{background:var(--primary);opacity:1;}

.drop-target--child{position:absolute;right:0;bottom:0;left:45px;}

.list__actions{margin:25px 0 0 0;}


.notice{background:#fff;padding:15px 25px;margin:0 0 30px 0;border:1px solid var(--primary);border-left:10px solid var(--primary);position:relative}
.notice--error{border:1px solid var(--danger);border-left:10px solid var(--danger);}
.notice--danger{border:1px solid var(--danger);border-left:10px solid var(--danger);}
.notice--success{border:1px solid var(--success);border-left:10px solid var(--success);}
.notice--muted{border:1px solid var(--border);border-left:10px solid var(--border)}
.notice > *:last-child{margin-bottom:0;}
.notice h2{font-size:1.3em;margin:0 0 1em 0;}
.notice p{margin:0 0 1em 0;}
.notice__close{position:absolute !important;top:8px;right:20px;}


.notice.global-error{position:fixed !important;top:10px;left:10px;right:10px;z-index:3;padding:25px 60px 25px 25px}
.notice.global-error .button{position:absolute;top:14px;right:20px;}

.tags{}
.tag{display:inline-block;font-size:12px;line-height:1;background: var(--background-light);padding:4px 10px;margin:0 4px 2px 0;border-radius:100px;;border:1px solid var(--border);cursor:pointer}
.tag--active{border:1px solid var(--primary);background:#fff;color:#000}


/*******************************************************/
/* Buttons
/*******************************************************/

button{font-family:inherit;font-size:inherit;background:none;border:none;margin:0;padding:0}

.buttons{display:flex;gap:15px;margin:15px 0 0 0}

.button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;padding:0 1.25em;line-height:1;white-space:nowrap;zzzvertical-align:middle;font-size:13px;margin:0;border-radius:4px;min-height:2.7em;text-decoration:none;cursor:pointer;position:relative;font-family:inherit;color:var(--text);border:1px solid var(--primary);touch-action:manipulation;transition:.2s all;font-weight:500;background:#fff;}
.button:not(.button--link):hover{color:#fff;background:var(--primary)}

.button--small{font-size:12px}
.button--small .button__icon svg{width:16px;height:16px;}

.button--pixel{border:1px solid var(--border);padding:4px;min-height:auto;border-radius:100px;margin-bottom:-2px;}
.button--pixel .button__icon{margin:0 !important;}
.button--pixel .button__icon svg{width:12px;height:12px;}

.zzzbutton--cycle-breakpoint.breakpoint-icon--base{opacity:0}
.field .button--cycle-breakpoint{opacity:0}
.field--has-value .button--cycle-breakpoint{opacity:1;}

.button__label{}
.button__label{font-weight:500}

.button__icon{vertical-align:middle;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;outline:none;cursor:pointer;}
.button__icon svg{color:inherit;width:18px;height:18px;}
.button:hover .button__icon{}
.button__icon:only-child{margin:0 -.5em;}

.button:disabled, .button.button--disabled{border-color:var(--border);cursor:default;pointer-events:none;background: var(--background-light);color:var(--text-grey);}
.button.button--primary:disabled, .button--primary.button--disabled{}

.button--full-width{width:100%;}

.button--active{background:#fff;color:#000;}
.button--inactive{border:1px solid var(--border)}
.button--inactive .button__icon{opacity:.5}

.button--cancel{border:1px solid var(--border)}

.button--primary{background:var(--primary);color:#fff;border:1px solid transparent;}
.button--primary:hover{background:var(--primary-darker);color:#fff;border:1px solid transparent}
.button--primary .button__icon img, .button--primary .button__icon{}
.button--primary:hover .button__icon img, .button--primary:hover .button__icon svg{}


.button--link,.button--link:hover{background:none !important;border:none;box-shadow:none;padding:0;min-height:auto}
.button--link > span:only-child{margin:0 !important;}
.button--link:hover .button__icon svg{}
.button--link .button__label{margin-right:0;}
.button--link .button__icon{margin-left:0;}


.button--underline{text-decoration:underline;}

.button--delete:not([disabled]){border-color:var(--danger) !important;color:var(--danger)}
.button--delete:hover{background-color:var(--danger);color:#fff;}
.button--delete.button--link:hover{background-color:none;color:var(--danger)}
.button--delete:hover .button__icon img, .button--primary-outline:hover .button__icon svg{filter:invert(100)}
.button--delete.button--link{color:var(--danger);}

.button--circle{border-radius:100px;width:2.6em;height:2.6em;aspect-ratio:1/1}

.button--new{background-color: var(--success);color:#000;border:none}
.button--new:hover{color: var(--success);}

.button--inverse{border-color:#4d4d4e;;color:#efefef;}
.button--inverse.button--active{background:#000 !important;}
.button--inverse:not(.button--primary){background:var(--background-dark);}
.button--inverse.button--disabled{border-color:#4d4d4e;}

.button-toggle{display:flex;}
.button-toggle .button:not(:only-child):first-child{border-top-right-radius:0;border-bottom-right-radius:0;border-right:none;}
.button-toggle .button:not(:only-child):not(:first-child):not(:last-child){border-radius:0;border-right:none;}
.button-toggle .button:not(:only-child):last-child{border-top-left-radius:0;border-bottom-left-radius:0;;}
.zzzzbutton-toggle .button:not(.button--active) .button__icon{opacity:.5}


.button-toggle-group{display:flex;}
.button-toggle-group .button{border-color:var(--input-border);background-color:var(--background-light);border-right:none;flex:1}
.button-toggle-group .button:hover{color:#fff;}
.button-toggle-group .button--active{background-color:#fff;}
.button-toggle-group .button .button__icon{opacity:.4}
.button-toggle-group .button.button--active .button__icon{opacity:1}
.button-toggle-group .button.button--inherited .button__icon{opacity:1}
.button-toggle-group .button:first-child{border-radius:4px 0 0 4px;}
.button-toggle-group .button:not(:first-child):not(:last-child){border-radius:0;}
.button-toggle-group .button:last-child{border-radius:0 4px 4px 0;border-right:1px solid var(--input-border);}


/*******************************************************/
/* Page Modal
/*******************************************************/

.modal{opacity:0;visibility:hidden;background: rgba(47,64,92,0.3);position:fixed;z-index:1201;top:0;right:0;bottom:0;left:0;display:flex;align-items: center;justify-content: center;padding:20px 20px;transition:.1s all;font-size:14px;color:var(--text)}
.modal--active{opacity:1;visibility:visible}
.modal__container{background:#fff;width:100%;max-height:100%;width:95vw;height:95vh;max-width:1200px;border-radius:4px;display:flex;flex-direction:column;opacity:1;transform:scale(1);box-shadow:0 0 15px rgba(47,64,92,0.1)}
.modal__header{display:flex;gap:25px;align-items:center;padding:18px 30px;border-bottom:1px solid var(--border);background: var(--background-light);border-radius:4px 4px 0 0;font-weight:bold;font-size:1.2em;position:relative;}
.modal__close{position:absolute;right:20px;cursor:pointer;background:#fff;border:1px solid var(--border);border-radius:4px;line-height:0;padding:5px}
.modal__close svg{opacity:.8;width:18px;height:18px}

.modal__body{flex:1;overflow:auto;padding:30px 30px}
.modal__body > *:last-child{margin-bottom:0;}
.modal__body .page-title{padding-top:0;padding-left:0;padding-right:0;margin:0 0 20px 0;position:relative;}
.modal__body .content{overflow-y:visible}
.modal__footer{display:flex;align-items:center;justify-content:space-between;padding:15px 30px;background: var(--background-light);border-top:1px solid var(--border);border-radius:0 0 4px 4px;min-height:66px}
.modal__footer-start{display:flex;flex-direction:row;gap:15px;}
.modal__footer-end{display:flex;flex-direction:row;gap:15px;justify-content: flex-end}

/* Start 20px below the fixed 50px adminbar instead of centering under it */
.modal--media{align-items:flex-start;padding-top:70px}
.modal--media .modal__container{height:calc(100vh - 90px);max-height:none}


/*******************************************************/
/* Form Elements
/*******************************************************/

.fields-grid{display:grid;grid-template-columns: 1fr;gap:20px;margin-bottom:20px;}
.fields-grid--2{grid-template-columns: repeat(2,1fr);}
.fields-grid--3{grid-template-columns: repeat(3,1fr);}
.fields-grid--4{grid-template-columns: repeat(4,1fr);}
.fields-grid--5{grid-template-columns: repeat(5,1fr);}
.fields-grid > .field{margin:0;}

.field{margin-bottom:20px;position:relative;flex:1}
.field:last-child{margin:0;}
.field--no-margin{margin:0;}
.field--half-margin{margin-bottom:.75em;}
.field__label{margin:0 0 5px 0;color:#000;font-weight:500;}
.field__label label{margin-right:4px;}
.field__label button{position:relative;vertical-align:text-bottom;}
.field--horizontal{display:flex;align-items:center}
.field--horizontal .field__label{margin:0 1em 0 0;width:20%;line-height:1.2}
.field--horizontal .field__input{flex:1;}

.field-editing-responsive-warning{margin:0 0 15px 0;font-size:11px;display:flex;align-items:center;gap:5px}
.field-editing-responsive-warning .button{flex:0;}

.field--nested-label{}
.field--nested-label .field__label{margin:0 0 .4em 0;font-size:.9em}


.field__required{color:red;margin:0 0 0 5px}
.field__input{position: relative;}
.field__description{font-size:.9em;margin:10px 0 0 0;}
.field__content{position:relative}
.field__required-message{font-size:.9em;color:red;margin:10px 0 0 0;}

.field__input--textfield, 
.field__input--password, 
.field__input--email,
.field__input--textarea,
.field__input--code,
.field__input--select,
.field__input--multiselect,
.field__input--date,
.field__input--number,
.field__input--telephone{width:100%;font-size:inherit;font-family:inherit;padding:.7em .75em .7em .75em;border:1px solid var(--input-border);border-radius:0;margin:0;color:#000;display:block;background:#fff;border-radius:4px;box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.01);}

textarea.field__input:focus,
select.field__input:focus,
input.field__input:focus{border-color:var(--primary);outline:3px solid var(--primary-lighter);}

.field__input--color{}
.field__input--textfield{}
.field__input--email{}
.field__input--textarea{}
.field__input--select{-webkit-appearance:none;padding-right:30px;background-color:#fff;background-image:url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='20' fill='%23000' height='20' viewBox='0 0 24 24'><path fill='%23666' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");background-position:99% 63%;background-repeat:no-repeat;}
.field__input--range{width:100%;margin: 0;padding: 0;}
.field__input--date{}
.field__input--textfield:disabled, .field__input--textarea:disabled, .field__input--select:disabled{background-color:#fff;color:#666}
.field__input--large{font-size:1.5em;}

.field__input--code{font-family:monospace;font-size:14px}

.field--type-color{}
.field--type-color .field__content{display:flex;gap:5px;}
.field--type-color .contrast-error-indicator{position:absolute;top:0;right:0;bottom:0;width:40px;padding:5px;z-index:1;font-weight:bold;border:1px solid red;display:flex;align-items:center;justify-content:center}
.field--type-color .nullability-checkbox{display:none;}
/*
.color-picker{position:absolute;top:100%;left:0;background:#fff;width:240px;padding:5px;border-radius:5px;border:1px solid var(--border);z-index:2}
.color-picker .color-picker__canvas{position:relative;font-size:0}
.color-picker .color-picker__canvas canvas{}
.color-picker .color-picker__pointer{opacity:0;border:2px solid rgba(255,255,255,0.8);width:16px;height:16px;border-radius:100px;position:absolute;z-index:2;pointer-events:none}
.color-picker .color-picker__canvas:hover .color-picker__pointer{opacity:1}
.color-picker .color-picker__presets{display:grid;grid-template-columns: repeat(5,1fr);gap:5px;margin:5px 0 0 0}
.color-picker .color-picker__presets .palette{width:100%;}
.palette{border-radius:5px;width:40px;height:35px;border:1px solid var(--border);outline:1px solid #fff}
.palette:hover{border:1px solid #999;outline:1px solid #fff}
.palette--empty{background-image: linear-gradient(45deg, #efefef 25%, transparent 25%), linear-gradient(-45deg, #efefef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #efefef 75%), linear-gradient(-45deg, transparent 75%, #efefef 75%);background-size: 20px 20px;background-position: 0 0, 0 10px, 10px -10px, -10px 0px;}
.field--type-color .field__content > .palette{height:auto}
*/
.color-picker .color{outline:1px solid #fff;box-shadow:0 0 4px rgba(0,0,0,0.3)}
.color-picker .nullability-checkbox{display:none !important;}

.field--type-color .field__content .field__input--textfield{flex:1}

.field--type-link .field__link-preview{background:#fff;border:1px solid var(--border);padding:10px 35px 10px 15px;margin:0 0 10px 0;border-radius:5px;position:relative;overflow-wrap: break-word;cursor:pointer}
.field--type-link .field__link-preview:hover{border-color:var(--primary)}
.field--type-link .field__link-preview .button{position:absolute;top:7px;right:10px;;}

.field--type-range{}
.field--type-range .field__content{display:flex;position:relative;}
.field--type-range .field__content .field__input--textfield{flex:1}
.field--type-range .field__content .field__input--select{width:60px;}
.field--type-range .field__input--range{opacity:0;border:none;margin:0;padding:0;position:absolute;bottom:-15px;left:0;right:0;outline:none !important}
.field--type-range:hover .field__input--range{opacity:1}

.field--type-box-shadow{}
.field--type-box-shadow .field__content{display:grid;grid-template-columns:1fr 1fr;gap:15px 5px}
.field--type-box-shadow .field__content > div{position:relative;display:flex;flex-wrap:wrap}
.field--type-box-shadow .field__content > div .field__sublabel{display:block;width:100%;font-size:11px;margin-bottom:2px}
.field--type-box-shadow .field__content > div .field__input--textfield{flex:1}
.field--type-box-shadow .field__content > div .field__input--select{width:60px;}
.field--type-box-shadow .field__content > div .field__input--range{opacity:0;border:none;margin:0;padding:0;outline:none;position:absolute;bottom:-15px;left:0;right:0;}
.field--type-box-shadow .field__content > div:hover{z-index:2}
.field--type-box-shadow .field__content > div:hover .field__input--range{opacity:1}

.field--type-icon{}
.field--type-icon .field__content{}

.field--type-media{max-width:400px}
.field--type-media .selected-media-preview{margin:0 0 10px 0;position:relative;border:1px solid var(--border);font-size:0;text-align:center}
.field--type-media .selected-media-preview img{width:100%;height:100%;object-fit:contain;pointer-events:none;}

.focal-point{margin:0;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);pointer-events:none;background:rgba(255,255,255,0.8);border-radius:100px}

.field--type-image-position{display:none}

.field--type-checkbox{}
.field--type-checkbox .field__content{display:flex;align-items:center;gap:5px}
.field--type-checkbox .field__sublabel{}

.icon-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px, 1fr));grid-gap:10px}

.icon-preview{display:block;padding:10px;border-radius:5px;border:1px solid var(--border);text-align:center;background:#fff;position:relative;content-visibility: auto}
.icon-preview:hover{border:1px solid var(--border-dark);}
.icon-preview svg, .icon-preview img{width:48px;height:48px}
.icon-preview .icon-delete{position:absolute;top:2px;right:2px;}

.field--type-separator{border-bottom:1px solid var(--border-dark);}

.field--type-repeater{}

.field--type-tags .svelte-tags-input-layout{min-height:41px;}
.field--type-tags .svelte-tags-input-layout .svelte-tags-input-tag{font-size:15px !important;font-family:inherit !important;border-radius:5px !important;padding:5px 10px !important;background-color: var(--primary) !important}
.field--type-tags .svelte-tags-input-layout .svelte-tags-input{font-size:15px !important;font-family:inherit !important;border-radius:5px !important}

.repeater{display:grid;grid-template-columns: 1fr;gap:5px}
.repeater__item{border-radius:5px;cursor: grab;border:1px solid var(--border-dark)}
.repeater__item-header {padding:15px 15px;position:relative;font-weight:bold;cursor:pointer;display:flex;align-items:center;gap:10px;background:#e7ecf2;border-radius:5px 5px 0 0 }
.repeater__item--condensed .repeater__item-header {padding:5px;gap:5px}
.repeater__item-header-label{flex:1}
.repeater__item-header-actions{display:flex;gap:3px}
.repeater__item-drag{cursor:move;width:20px}
.repeater__item-drag svg{width:18px;height:18px;}
.repeater__item-body{padding:15px 15px;display:flex;flex-direction:column;gap:15px;border-radius:0 0 5px 5px}
.repeater__item .settings{display:none;}
.repeater__item-active .settings{display:block}
.repeater__item .settings__heading{display:none}
.repeater__item .settings__section:last-child{border-bottom:0;}

.repeater__actions{display:flex;gap:10px}
.repeater__actions:not(:only-child){margin:20px 0 0 0;}

.search{display:flex;gap:10px;}
.search .button{display:flex;}

.pagination{display:flex;justify-content:space-between;gap:20px;margin:30px 0 0 0}


.color-palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px, 1fr));position:relative;}
.color-palette__item{display:inline-block;aspect-ratio:1/1;border:1px solid var(--border);cursor:pointer;position:relative;transition:.2s all;margin:1px}
.color-palette__item div{opacity:0;}
.color-palette__item:hover div{opacity:1;}
.color-palette__item-actions{display:flex;gap:6px;justify-content:center;position:absolute;top:15px;left:0;right:0;width:100%;}
.color-palette__item-hex{position:absolute;bottom:0;left:0;right:0;background:#000;color:#fff;text-align:center;padding:2px 1px;font-weight:bold;font-size:12px} 


/*******************************************************/
/* Page/Form Builder
/*******************************************************/

.builder{display:none;width:100%;height:100%;z-index:2;position:relative;}
.builder--active{display:flex;}

/* Where a floating sidebar will dock if released now (DockablePanel.svelte sets the width) */
.builder__dock-zone{position:absolute;top:0;bottom:0;width:50%;z-index:1000;pointer-events:none;border:2px dashed transparent;transition:background .12s, border-color .12s;}
.builder__dock-zone--left{left:0;}
.builder__dock-zone--right{right:0;}
.builder__dock-zone--active{background:rgba(47,117,230,0.1);border-color:rgba(47,117,230,0.6);}

.builder__preview{flex:1;min-width:0;display:flex;padding:12px;background:#e9eaf0;text-align:center;position:relative;z-index:1;overflow:hidden}
/* What the faux browser (PreviewStage.svelte) is measured against — the stage's
   padding is outside it, so clientWidth is the room the window has. */
.builder__stage-inner{flex:1;min-width:0;display:flex;justify-content:flex-start;align-items:stretch}

.preview-iframe{width:100%;height:100%;position:relative;}
body.is-dragging .preview-iframe{pointer-events:none}


/* Breakpoints */

.breakpoint-wrapper{}
.breakpoints--active{}

.breakpoint-wrapper .breakpoints{display:flex;justify-content:center;flex:1;gap:5px}
.breakpoint-wrapper .breakpoints button{background:none;margin:0;padding:5px;font-size:0;cursor:pointer;border-radius:100px}
.breakpoint-wrapper .breakpoints button svg{width:16px;height:16px;color:#fff;opacity:.7}
.breakpoint-wrapper .breakpoints .button--active{background: var(--primary);}
.breakpoint-wrapper .breakpoints .button--active:not(:first-child){background:var(--primary);}
.breakpoint-wrapper .breakpoints .button--active svg{opacity:1;}


.builder-settings{background: var(--background-light);border-left:1px solid var(--border);;display:flex;flex-direction: column;width:300px;flex-shrink:0;position:relative;font-size:12px}

/* Drag handle on the left edge to resize sidebar width (right edge when docked left) */
.builder-settings__resize{position:absolute;top:0;left:-3px;width:7px;height:100%;z-index:6;cursor:ew-resize;touch-action:none;background:transparent;transition:background .15s}
.builder-settings__resize:hover,.builder-settings__resize:active{background:linear-gradient(to right, transparent, rgba(47,117,230,0.35))}
.builder-settings--dock-left .builder-settings__resize{left:auto;right:-3px}
.builder-settings--dock-left .builder-settings__resize:hover,.builder-settings--dock-left .builder-settings__resize:active{background:linear-gradient(to left, transparent, rgba(47,117,230,0.35))}

/* Docked-left sidebar: border on the inner (right) edge instead of the left */
.builder-settings--dock-left{border-left:none;border-right:1px solid var(--border)}

/* Title bar — drag to dock the sidebar left or right */
.builder-settings__dragbar{display:flex;align-items:center;gap:8px;padding:4px 12px;cursor:grab;user-select:none;background:#fff;border-bottom:1px solid var(--border);color:#555;font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.04em;touch-action:none;flex-shrink:0}
.builder-settings__dragbar:active{cursor:grabbing}
.builder-settings__dragbar-grip{width:14px;height:10px;flex-shrink:0;background-image:radial-gradient(currentColor 1px, transparent 1px);background-size:4px 4px;opacity:.45}
.builder-settings__dragbar-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.builder-settings__dragbar-close{display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:-6px;padding:0;border:none;border-radius:4px;background:none;color:inherit;cursor:pointer;opacity:.6}
.builder-settings__dragbar-close:hover{opacity:1;background:rgba(0,0,0,0.06)}

/* A torn-off sidebar floating over the preview (DockablePanel.svelte sets left/top/width/height/z-index) */
.builder-settings--floating{position:absolute;border:1px solid var(--border);border-radius:6px;box-shadow:0 12px 32px rgba(15,23,42,0.22)}
.builder-settings--floating .builder-settings__dragbar{border-radius:6px 6px 0 0}
/* Its z-index makes it a stacking context, which would trap a fullscreen TinyMCE opened from one of its
   fields beneath the .builder::after scrim (z:1199). Drop it while fullscreen so the editor rejoins .builder's context. */
body.tox-fullscreen .builder-settings--floating{z-index:auto !important}
.builder-settings__float-resize{position:absolute;z-index:7;touch-action:none}
.builder-settings__float-resize--n,.builder-settings__float-resize--s{left:8px;right:8px;height:6px;cursor:ns-resize}
.builder-settings__float-resize--e,.builder-settings__float-resize--w{top:8px;bottom:8px;width:6px;cursor:ew-resize}
.builder-settings__float-resize--n{top:-3px}
.builder-settings__float-resize--s{bottom:-3px}
.builder-settings__float-resize--e{right:-3px}
.builder-settings__float-resize--w{left:-3px}
.builder-settings__float-resize--nw,.builder-settings__float-resize--ne,.builder-settings__float-resize--sw,.builder-settings__float-resize--se{width:12px;height:12px}
.builder-settings__float-resize--nw{top:-3px;left:-3px;cursor:nwse-resize}
.builder-settings__float-resize--ne{top:-3px;right:-3px;cursor:nesw-resize}
.builder-settings__float-resize--sw{bottom:-3px;left:-3px;cursor:nesw-resize}
.builder-settings__float-resize--se{bottom:-3px;right:-3px;cursor:nwse-resize}

.builder-settings__start{flex:1;overflow-y:auto;padding:0 15px}
.builder-settings--tree .builder-settings__start{padding-top:12px}
.builder-settings__start::-webkit-scrollbar{width:7px;background-color:#F5F5F5;position:relative;right:-7px}
.builder-settings__start::-webkit-scrollbar-track{border-radius:10px;background:rgba(0,0,0,0.1);}
.builder-settings__start::-webkit-scrollbar-thumb{border-radius:10px;background:#c2c2c2;}
.builder-settings__start::-webkit-scrollbar-thumb:hover{background:#7d7d7d;}
.builder-settings__end{padding:15px 15px;}

.builder-settings__table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);}
.builder-settings__table th{border-bottom:1px solid var(--border);text-align:left;padding:5px 10px;word-break:break-word;font-weight:600}
.builder-settings__table td{border-bottom:1px solid var(--border);;padding:5px 10px;word-break:break-word}


.dragging-tooltip{position:fixed;z-index:10;background:#fff;border-radius:5px;border:1px solid var(--primary);padding:10px 40px;pointer-events:none;color:#000;box-shadow:0 0 30px rgba(0,0,0,0.2)}

.add-content-columns{display:flex;gap:30px}
.add-content-columns__column{width:175px}
.add-content-columns__content{flex:1}

.add-content-columns__column{}
.add-content-columns__column ul{margin:0 0 15px 0;padding:0 0 15px 0;list-style:none;}
.add-content-columns__column ul li{margin:0 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid var(--border);list-style:none;font-weight:bold;}
.add-content-columns__column ul li:last-child{border:none}
.add-content-columns__column ul li ul{margin:10px 0 0 0}
.add-content-columns__column ul li ul li{margin:0 0 8px 0;font-weight:normal;border:none;border:none}
.add-content-columns__column ul li ul li:last-child{margin:0;}
.add-content-columns__column .tab__item button{border:none}
.add-content-columns__column .tab__item--active button{font-weight:bold}

.add-content{display:grid;;grid-template-columns:repeat(auto-fill,minmax(250px, 1fr));gap:15px;}
.add-content.add-content--sections{}

.add-content__item{background: var(--background-light);border:1px solid var(--border);border-radius:4px;text-align:center;z-index:100;user-select: none;cursor:pointer;display: flex;flex-direction: column;justify-content: center;}
.add-content__item:hover{border:1px solid #000;}
.add-content__item *{user-select: none;}
.add-content__item-image{user-select: none;text-align:center;font-size:0;background:#fff;border-bottom:1px solid var(--border);border-radius:5px 5px 0 0;max-height:300px;overflow:hidden}
.add-content__item-image img{width:100%;border-radius:5px 5px 0 0;}
.add-content__item-image.add-content__item-image--library{aspect-ratio:16/9;width:100%;height:100%;}
.add-content__item-image.add-content__item-image--library img{width:100%;height:100%;object-fit: cover;object-position: top left;transition:.5s all}
.add-content__item-image.add-content__item-image--library:hover img{object-position: bottom left}
.add-content__item-image svg{width:64px;height:64px;margin:25px 0}
.add-content__item-content{padding:10px 20px;font-size:13px;}
.add-content__item-title{font-weight:bold;display:block;font-size:15px}
.add-content__item-tags{margin:8px 0 0 0}
.add-content__item-tags .add-content__item-tag{border:1px solid var(--border-dark);background:#fff;padding: 1px 8px 2px 8px;display:inline-block;margin:0 3px 3px 0;border-radius:100px;font-size:11px;}

.filter-tag-options{margin:0 0 10px 0}
.filter-tag-options-tag{border:1px solid var(--border-dark);background:#fff;padding: 1px 8px 2px 8px;display:inline-block;margin:0 3px 3px 0;border-radius:100px;font-size:11px;cursor:pointer}
.filter-tag-options-tag:hover, .filter-tag-options-tag--active{background: var(--primary);color:#fff}



/*******************************************************/
/* File Upload List
/*******************************************************/

.file-attachment-container {
  background: var(--primary-light);
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.file-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.file-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.file-item__icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.file-item__details {
  flex: 1;
  min-width: 0;
}

.file-item__label {
  width: 100%;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.file-item__meta {
  font-size: 0.75rem;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-item__remove {
  padding: 0.25rem 0.5rem;
  background: var(--color-danger);
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.file-item__remove:hover {
  background: var(--color-danger-dark);
}

.file-item__remove:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}


/*******************************************************/
/* Component Tree
/*******************************************************/

.component-tree{}
.component-tree ul{margin:0;padding:0;list-style:none}
.component-tree ul ul{padding:0}
.component-tree ul li{margin:0;padding:0;font-size:12px;position:relative}
.component-tree ul li{margin-bottom:1px}
.component-tree ul li:last-child{margin-bottom:0}
.component-tree ul li .component-tree__header{--tree-accent:var(--primary);background:transparent;border:none;padding:4px 7px;display:flex;align-items:center;cursor:grab;border-radius:4px;transition:background .1s;scroll-margin:24px 0}
/* Color-code the accent by component type to match the editor overlay: section/hero = purple, group = orange, column = green, everything else = blue */
.component-tree ul li .component-tree__header[data-component-type*="section"],
.component-tree ul li .component-tree__header[data-component-type*="hero"]{--tree-accent:#7433e2}
.component-tree ul li .component-tree__header[data-component-type$="group"]{--tree-accent:#e36000}
.component-tree ul li .component-tree__header[data-component-type="column"]{--tree-accent:#16a34a}
.component-tree ul li .component-tree__header:active{cursor:grabbing}
.component-tree ul li .component-tree__header-editing{background:color-mix(in srgb, var(--tree-accent) 16%, transparent)}
/* Highlight the matching node while its component is hovered in the editor preview */
.component-tree ul li .component-tree__header-hover{background:color-mix(in srgb, var(--tree-accent) 8%, transparent);box-shadow:inset 2px 0 0 var(--tree-accent)}
/* Selected node stays prominent even when also hovered in the preview */
.component-tree ul li .component-tree__header-editing.component-tree__header-hover{background:color-mix(in srgb, var(--tree-accent) 16%, transparent)}
.component-tree ul li .component-tree__header-label{flex:1;min-width:0;cursor:pointer;font-weight:500;color:#333;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.component-tree ul li.component-tree__top-level > .component-tree__header > .component-tree__header-label{font-weight:700}
.component-tree ul li .component-tree__header-buttons{display:flex;gap:2px;align-items:center;opacity:0;transition:opacity 0.15s}
.component-tree ul li .component-tree__header:hover .component-tree__header-buttons{opacity:1}
.component-tree ul li .component-tree__header:hover{background:rgba(0,0,0,0.05)}
.component-tree ul li .component-tree__header-editing:hover{background:color-mix(in srgb, var(--tree-accent) 16%, transparent)}
.component-tree__children{margin-left:9px;padding-left:9px;padding-top:2px;border-left:1px solid rgba(0,0,0,0.04)}
.component-tree__icon{flex-shrink:0;margin-right:6px;color:var(--tree-accent, var(--primary))}
.component-tree__icon svg{width:14px;height:14px;display:block;}
.component-tree__thumbnail{flex-shrink:0;margin-right:8px;width:32px;height:32px;border-radius:3px;overflow:hidden;background:#eee;display:flex;align-items:center;justify-content:center}
.component-tree__thumbnail img{width:100%;height:100%;object-fit:cover;display:block}
.component-tree__drag-handle{flex-shrink:0;margin-right:6px;color:#aaa;display:flex;align-items:center;justify-content:center;cursor:grab}
.component-tree__drag-handle svg{width:16px;height:16px;display:block}
.component-tree ul li .component-tree__header:hover .component-tree__drag-handle{color:#666}
.component-tree__menu-btn{background:none;border:none;padding:4px;cursor:pointer;border-radius:3px;color:#666;display:flex;align-items:center;justify-content:center}
.component-tree__menu-btn:hover{background:rgba(0,0,0,0.08);color:#333}
.component-tree__menu-btn svg{width:16px;height:16px;display:block}
.component-tree__context-menu{position:fixed;z-index:9999999999;background:#363636;border-radius:6px;min-width:140px;padding:4px 0;box-shadow:0 8px 30px rgba(0,0,0,0.4);font-size:12px}
.component-tree__context-menu button{display:flex;align-items:center;justify-content:space-between;width:100%;padding:6px 12px;background:none;border:none;color:#e0e0e0;cursor:pointer;text-align:left;gap:12px}
.component-tree__context-menu button:hover{background:#4a90d9;color:#fff}
.component-tree__context-menu__label{flex:1}
.component-tree__context-menu__icon{color:#888;display:flex;align-items:center}
.component-tree__context-menu__icon svg{width:14px;height:14px}
.component-tree__context-menu button:hover .component-tree__context-menu__icon{color:rgba(255,255,255,0.7)}
.component-tree__context-menu__separator{height:1px;background:rgba(255,255,255,0.12);margin:4px 0}

.component-tree__root-drop-target {list-style: none;margin: 6px 0 0;min-height: 18px;position: relative;}
.component-tree__root-drop-target::after {content: '';position: absolute;left: 0;right: 0;top: 50%;transform: translateY(-50%);height: 0;border-radius: 4px;background: rgba(var(--primary-rgb, 58, 96, 254), 0.85);box-shadow: 0 0 8px rgba(var(--primary-rgb, 58, 96, 254), 0.45);opacity: 0;transition: all 0.12s ease;pointer-events: none;}
.component-tree__root-drop-target--active::after {height: 6px;opacity: 1;}
.component-tree__header {position: relative;}
li.is-dragging > .component-tree__header {opacity: 0.5;}
.component-tree__header--drop-inside {position: relative;}
.component-tree__header--drop-inside::after {content: '';position: absolute;inset: -4px;border-radius: 7px;border: 2px solid rgba(var(--primary-rgb, 58, 96, 254), 0.85);background: rgba(var(--primary-rgb, 58, 96, 254), 0.1);pointer-events: none;}
.component-tree__header--drop-before::before,.component-tree__header--drop-after::after {content: '';position: absolute;left: -4px;right: -4px;height: 6px;border-radius: 4px;background: rgba(var(--primary-rgb, 58, 96, 254), 0.85);box-shadow: 0 0 8px rgba(var(--primary-rgb, 58, 96, 254), 0.45);}
.component-tree__header--drop-before::before {top: -6px;}
.component-tree__header--drop-after::after {bottom: -6px;}
.component-tree__drop-indicator {height: 0;pointer-events: none;}
.component-tree__drop-indicator--before,.component-tree__drop-indicator--after {margin: 0;}
.component-tree__drop-indicator--inside {margin: 6px 0 0;height: 32px;border-radius: 6px;border: 2px dashed rgba(var(--primary-rgb, 58, 96, 254), 0.6);background: rgba(var(--primary-rgb, 58, 96, 254), 0.08);box-shadow: inset 0 0 10px rgba(var(--primary-rgb, 58, 96, 254), 0.15);}

/* Drag and drop styles */
.component-tree ul li.is-dragging{opacity:0.5}
.component-tree__drag-ghost{background:#fff !important;border:1px solid var(--primary, #3a60fe) !important;box-shadow:0 4px 14px rgba(0,0,0,0.18);border-radius:5px;padding:8px 6px;display:flex;align-items:center;opacity:1 !important;pointer-events:none}
.component-tree__drop-indicator{position:fixed;z-index:10000;pointer-events:none;background:var(--primary);height:3px;border-radius:2px;transition:all 0.1s ease;display:none}
.component-tree__drop-indicator.is-child{background:rgba(var(--primary-rgb),0.1);border:2px solid var(--primary);border-radius:5px;height:auto}

.component-tree__visibility-icon{display:flex;align-items:center;flex-shrink:0;color:#999;margin-left:4px}
.component-tree__visibility-icon svg{display:block}

/* Publisher (saved-component) instances in the tree */
.component-tree__publisher-icon{display:flex;align-items:center;flex-shrink:0;color:var(--tree-accent,var(--primary));margin-left:4px}
.component-tree__publisher-icon svg{display:block}
.component-tree__lock-icon{display:flex;align-items:center;flex-shrink:0;color:#b0b0b0;margin-left:4px}
.component-tree__lock-icon svg{display:block}
/* Descendants of a publisher component are read-only on this page */
.component-tree ul li .component-tree__header--locked{cursor:pointer;opacity:.55}
.component-tree ul li .component-tree__header--locked .component-tree__header-label{color:#888;font-weight:400}
.component-tree ul li .component-tree__header--locked:hover{opacity:.8;background:rgba(0,0,0,0.04)}


/*******************************************************/
/* Page Builder Settings
/*******************************************************/

.settings{font-size:12px}
.settings__heading{font-weight:bold;font-size:1.3em;margin:20px 0 20px 0;display:flex;gap:10px;align-items:center}
.settings__heading .settings__heading-text{flex:1}
.settings__heading .settings__heading-tools{display:flex;align-items:center;gap:3px;align-items:center}

.settings__description{margin:-10px 10px 20px 10px;padding:10px 10px;border:1px solid var(--border);border-radius:5px}

.settings__tabs{display:flex;gap:0px;margin:0 0 10px 0;gap:20px;border-bottom:2px solid var(--border);}
.settings__tabs:empty{display:none;}
.settings__tabs .settings__tab{padding:0 0px 10px 0px;cursor:pointer}
.settings__tabs .settings__tab--active{border-bottom:2px solid var(--primary);color:#000;margin:0 0 -2px 0;padding-bottom:9px}

.settings__sections{}
.settings__sections--hidden{display:none}
.settings__section--hidden{display:none}
.settings__section{border-bottom:1px solid var(--border)}
.settings__section--active{padding-bottom:16px}
.settings__section:not(:last-child){}
.settings__section-heading{font-size:14px;font-weight:600;padding:14px 15px 14px 0px;cursor:pointer;background-position:100% 15px;background-size:18px;background-repeat:no-repeat;background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='m10 17l5-5l-5-5v10z'/%3E%3C/svg%3E");}
.settings__section--active .settings__section-heading{color:#000;background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m7 10l5 5l5-5z'/%3E%3C/svg%3E");}
.settings__sections .settings__section:only-child .settings__section-heading{background-image:none;}
.settings__fields{display:none}
.settings__section--active > .settings__fields{display:block;}

.settings__fields{}
.settings__fields .field:not(:last-child){}
.settings__fields .settings__fields{margin-bottom:20px}

.theme-tree{margin:0 -15px}
.theme-tree ul{margin:0;padding:0;list-style:none;}
.theme-tree ul li{margin:0;padding:0;}
.theme-tree ul li.type-group{font-size:13px;margin:0 0 15px 0}
.theme-tree ul li.type-group .type-header{text-transform:capitalize;font-weight:bold;margin:0 0 5px 0;background: var(--border-dark);padding:5px 10px;color:#000}
.theme-tree ul li ul.type-styles{cursor:pointer;padding:0 5px}
.theme-tree ul li ul.type-styles li > span{display:block;border-radius:100px;padding:2px 10px;border:1px solid transparent;}
.theme-tree ul li ul.type-styles li > span:hover{border:1px solid var(--border-dark);}
.theme-tree ul li ul.type-styles > li:not(:last-child){border-bottom:1px solid var(--border);padding:5px 0 5px 0;}
.theme-tree ul li ul.type-styles ul{margin:4px 0 7px 10px;}
.theme-tree ul li ul.type-styles ul li{font-size:12px;margin:0;border:none;position:relative;}
.theme-tree ul li ul.type-styles ul li:before{content:'∙';position:absolute;top:2px;left:2px;}
.theme-tree ul li ul.type-styles li.selected {font-weight: bold;color:#000}
.theme-tree ul li ul.type-styles li.selected > span{border-color: var(--background-dark);background:#fff}
.theme-tree ul li ul.type-styles li.selected li{font-weight:normal;color:var(--text)}


/*******************************************************/
/* Media
/*******************************************************/

.media-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}

@media only screen and (max-width: 1124px) {
  .media-grid{grid-template-columns:repeat(4,1fr);}
}

.media-item{background:#fff;box-shadow:0px 0px 4px rgba(0,0,0,0.2);border-radius:4px;cursor:pointer;position:relative}
.media-item--active{outline:2px solid var(--primary);}
.media-item--selected{outline:2px solid var(--danger) !important;}
.media-grid--multiselect .media-item{user-select:none;-webkit-user-drag:none}
.media-grid--multiselect .media-item *{-webkit-user-drag:none}
.media-item:hover{outline:1px solid var(--primary);}
.media-item__checkbox{position:absolute;top:6px;right:6px;z-index:1}
.media-item__checkbox input{width:18px;height:18px;cursor:pointer}
.media-item__preview{font-size:0;aspect-ratio:3/2;background-image: linear-gradient(45deg, #EFEFEF 25%, transparent 25%), linear-gradient(-45deg, #EFEFEF 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #EFEFEF 75%), linear-gradient(-45deg, transparent 75%, #EFEFEF 75%);background-size: 20px 20px;background-position: 0 0, 0 10px, 10px -10px, -10px 0px;}
.media-item__preview img{width:100%;height:100%;object-fit:contain;border-radius:4px 4px 0 0}
.media-item__summary{padding:10px 10px;display:flex;gap:5px;flex-direction:column}
.media-item__meta-filename{font-weight:bold;overflow-wrap:anywhere;}
.media-item__meta-extension{}
.media-item__meta-missing-alt{color:red;}

.media-detail{display:flex;gap:20px;}
.media-detail__preview{text-align:center;width:60%;position:relative}
.media-detail__preview img{max-width:100%;}
.media-detail__info{flex:1}
.media-detail__stats{padding:20px;display:grid;grid-template-columns:1fr;gap:20px;background: var(--background-light);border-radius:5px;margin:0 0 20px 0}
.media-detail__stats .media-detail__stat{}
.media-detail__stats .media-detail__stat strong{display:block;}

.files-upload-label{display:block;width:100%;height:50vh;border:2px dashed var(--border);position:relative;text-align:center;display:flex;align-items:center;justify-content:center}

.spinner {width: 100%;height:100%;display: flex;align-items: center;justify-content: center;}
.spinner svg{width:100%;height:100%;max-width:100px;max-height:100px}


/*******************************************************/
/* Dynamic Tags
/*******************************************************/

.dynamic-tags{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px, 1fr));gap:10px;}
.dynamic-tag{border:1px solid var(--border);border-radius:4px;pointer-events:cursor;text-align:center;cursor:pointer;display:flex;flex-direction:column;}
.dynamic-tag:hover{border:1px solid var(--border-dark)}
.dynamic-tag__tag{background: var(--background-light);font-size:12px;padding:5px 10px;border-bottom:1px solid var(--border);border-radius:4px 4px 0 0;overflow:hidden}
.dynamic-tag__preview{font-weight:bold;background: #fff;padding:10px 10px;border-radius:0 0 4px 4px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; }
.dynamic-tag__preview p{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;line-height:1.2}
.dynamic-tag__preview p:empty{display:none;}
.dynamic-tag__preview *{margin:0;}


[data-tooltip]:before,[data-tooltip]:after {position: absolute;left: 50%;transform: translate(-50%);-webkit-font-smoothing: antialiased;margin: 0 auto;opacity: 0;visibility: hidden;z-index: 9;transition: 0.1s ease-in-out 0.1s;pointer-events:none}
[data-tooltip]:before {content: "";height: 0;width: 0;top: calc(100% + 1px);border-style: solid;border-width: 5px;border-color: transparent transparent var(--background-dark) transparent;}
[data-tooltip]:after {content: attr(data-tooltip);white-space: nowrap;background: var(--background-dark);padding: 0.5rem 1rem 0.5rem 1rem;font-size: 12px;box-sizing: border-box;top: calc(100% + 11px);color: #fff;border-radius: 2px;text-shadow: 0px 1px 1px #000;z-index: 9;}
[data-tooltip]:hover:before,[data-tooltip]:hover:after {opacity: 1;visibility: visible;transition: 0.1s ease-in-out 0.1s;transition-delay: .75s}
[data-tooltip][data-tooltip-right]:before,[data-tooltip][data-tooltip-right]:after{left:auto;right:-10px;transform:none}
[data-tooltip][data-tooltip-right]:before{right:3px;}
[data-tooltip][data-tooltip-left]:before,[data-tooltip][data-tooltip-left]:after{left:-10px;transform:none}
[data-tooltip][data-tooltip-left]:before{left:3px;}

[data-tooltip][data-tooltip-top]:before{top:unset;bottom: calc(100% + 1px)}
[data-tooltip][data-tooltip-top]:after{top:unset;bottom: calc(100% + 11px)}


/*******************************************************/
/* Layouts
/*******************************************************/

.layouts{display:grid;gap:20px;}

.datatable{width:100%;border-collapse:collapse;margin-bottom:1.5em;border:1px solid var(--border)}
.datatable th{padding:10px 10px;text-align:left;font-weight:600}
.datatable td{padding:10px 10px;text-align:left}
.datatable tr th, .datatable tr td{border-bottom:1px solid var(--border)}
.datatable td:first-child{opacity:0.7}
.datatable tbody tr:first-child td{border-top:1px solid var(--border)}
.datatable tr:nth-child(odd) td{background: var(--background-light)}
.datatable--actions tr td:last-child{width:50px;font-size:20px}


/*******************************************************/
/* Bulk Edit Table
/*******************************************************/

.bulk-update-table{width:100%;border-collapse:collapse;margin-bottom:1.5em;border-top:1px solid var(--border)}

.bulk-update-table thead{position:sticky;top:0;background:#fff;z-index:2}

.bulk-update-table th{padding:15px 15px;text-align:left;border:1px solid var(--border);height:70px}
.bulk-update-table td{padding:10px 15px;border:1px solid var(--border);vertical-align:top}
.bulk-update-table tbody tr:first-child td{}
.bulk-update-table tr{border-left:1px solid #fff}
.bulk-update-table tr:nth-child(odd) td{background: var(--background-light)}
.bulk-update-table.bulk-update-table--filter-enabled tr td:not(.bulk-update-table--checkbox){pointer-events:none;}
.bulk-update-table.bulk-update-table--filter-enabled tr:not(.selected) td:not(.bulk-update-table--checkbox){opacity:.3;}
.bulk-update-table input{margin:0;padding:0;}

.bulk-update-table--editing-field{}
.bulk-update-table--editing-field{pointer-events:none}
.bulk-update-table--editing-field td{}
.bulk-update-table--editing-field td.editable-cell--current{}


.bulk-update-table--checkbox{width:50px;text-align:center !important}
.bulk-update-table--title{min-width:250px}
.bulk-update-table--title > .bulk-update-table--title-div{position:relative;font-weight:bold}
.bulk-update-table--meta-title{min-width:250px}
.bulk-update-table--meta-description{min-width:300px}
.bulk-update-table--nofollow{width:130px;text-align:center !important;vertical-align:middle !important}
.bulk-update-table--noindex{width:130px;text-align:center !important;vertical-align:middle !important}
.bulk-update-table--status{width:120px;;vertical-align:middle !important}
.bulk-update-table--action{width:60px;text-align:center !important;vertical-align:middle !important}


tr[data-level="0"] .bulk-update-table--title .bulk-update-table--title-div{padding-left:0px;}
tr[data-level="0"] .bulk-update-table--title .bulk-update-table--title-div::before { content: "";position:absolute;left:0px;top:0px}

tr[data-level="1"] .bulk-update-table--title .bulk-update-table--title-div{padding-left:20px;}
tr[data-level="1"] .bulk-update-table--title .bulk-update-table--title-div::before { content: "— ";position:absolute;left:0px;top:0px}

tr[data-level="2"] .bulk-update-table--title .bulk-update-table--title-div{padding-left:40px;}
tr[data-level="2"] .bulk-update-table--title .bulk-update-table--title-div::before { content: "—— ";position:absolute;left:0px;top:0px}

tr[data-level="3"] .bulk-update-table--title .bulk-update-table--title-div{padding-left:60px;}
tr[data-level="3"] .bulk-update-table--title .bulk-update-table--title-div::before { content: "——— ";position:absolute;left:0px;top:0px}


.editable{position:relative;}
.editable--focused{pointer-events:initial}

.editable-actions{pointer-events:none;margin:0 0 5px 0;position:absolute;top:0;right:0}
.editable-actions button{opacity:0}
.editable--focused button{opacity:1;}

.editable--focused .editable-actions{pointer-events:initial}

.textarea{border: none;outline: none;margin:0;padding:0 65px 0 0px;min-width:100%;background:none;font-family:inherit;font-weight:inherit}
.editable:hover:not(.editable--focused) .textarea{outline: 1px dotted var(--primary);outline-offset:3px}
.editable--focused .textarea{outline: 1px solid var(--primary);outline-offset:3px}

.lettercount{background:#fff;border-radius:100px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;padding:4px 6px;line-height:1;font-weight:bold;border:1px solid var(--border)}
.lettercount--hidden{opacity:0;}
.lettercount--green{background:#4caf50;color:#fff}
.lettercount--red{background:#f44336;color:#fff}



/*******************************************************/
/* Auth
/*******************************************************/

.auth{max-width:450px;margin:0 auto 50px auto;border-radius:4px;background:#fff;padding:40px 40px 40px 40px;}

.auth .or{display:flex;align-items:center;gap:10px;margin:10px 0}
.auth .or span{border-top:1px solid var(--border);flex:1}

.auth__logo{margin:0 0 20px 0;text-align:center}
.auth__logo:only-child{margin:0;}
.auth__logo img{width:200px;}

.auth__title{margin:0 0 20px 0;text-align:center}
.auth__title h1{font-size:30px;margin:0 0 10px 0}
.auth__title > *:last-child{margin-bottom:0;}

.auth__footer{margin:20px 0 0 0}
.auth__footer > *:last-child{margin-bottom:0;}

.auth-role-admin .username{cursor:pointer;text-decoration:underline;text-decoration-color: var(--border-dark);}
.auth-role-admin .username:hover{}