/*
 * Drag-and-drop styling for the persona show page's "Allowed / Not Allowed"
 * assignment lists (MCP servers and skills), shared by
 * app/javascript/controllers/mcp_server_assign_controller.js and
 * app/javascript/controllers/skill_assign_controller.js (base:
 * app/javascript/controllers/assign_lists_base.js).
 *
 * SortableJS runs in forceFallback mode, so the floating clone receives
 * `dragClass` and the in-list placeholder receives
 * `sortable-fallback-placeholder`.
 */

/* Floating clone while dragging: lifted look */
.mcp-server-drag,
.skill-drag {
  opacity: 0.9;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.3);
  background-color: var(--color-base-100);
  border-radius: 0.5rem;
  position: relative;
  z-index: 10;
}

/* Drop indicator: the in-list placeholder rendered as a line */
[data-mcp-server-assign-target="allowed"] .sortable-fallback-placeholder,
[data-mcp-server-assign-target="excluded"] .sortable-fallback-placeholder,
[data-skill-assign-target="allowed"] .sortable-fallback-placeholder,
[data-skill-assign-target="excluded"] .sortable-fallback-placeholder {
  height: 4px !important;
  padding: 0 !important;
  margin: 2px 0;
  border-radius: 9999px;
  background: var(--color-primary);
  overflow: hidden;
}
/*
 * Styling for Mermaid diagram blocks in chat messages. Emitted by
 * MarkdownHelper for ```mermaid fences; rendered client-side by
 * app/javascript/controllers/mermaid_controller.js.
 *
 * <pre class="mermaid"> holds the escaped Mermaid source until the controller
 * swaps in the rendered <svg>. .mermaid-error marks a failed render so the
 * raw source stays visible with an error affordance.
 */

/* Wrapper: positioning context for the hover copy button */
.mermaid-wrapper {
  position: relative;
}

/* Diagram area: centered, never fully collapsed. overflow-x only applies in
   the error-fallback state (raw source text can overflow); rendered SVGs are
   constrained by `max-width: 100%` and never scroll horizontally. */
pre.mermaid {
  display: flex;
  justify-content: center;
  /* Safe centering (progressive): if the diagram is wider than the
     container, alignment falls back so the left edge stays reachable
     via horizontal scroll. Browsers without `safe` keep `center`. */
  justify-content: safe center;
  min-height: 3rem;
  overflow-x: auto;
}

pre.mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Failed render: subtle error affordance, raw source remains readable */
.mermaid-error {
  border-left: 4px solid var(--color-error);
  background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
}

/* Copy-source button: revealed on hover / keyboard focus. Positioning is
   single-sourced in mermaid_controller.js (Tailwind `absolute right-2 top-2`
   on the button's group wrapper) — do not re-add position/top/right here. */
.mermaid-copy-button {
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.mermaid-wrapper:hover .mermaid-copy-button,
.mermaid-wrapper:focus-within .mermaid-copy-button {
  opacity: 1;
}
/*
 * Drag-and-drop styling for the skill steps table
 * (app/javascript/controllers/skill_step_reorder_controller.js).
 *
 * SortableJS runs in forceFallback mode, so the floating clone receives
 * `dragClass` and the in-list placeholder receives
 * `sortable-fallback-placeholder`.
 */

/* Floating clone while dragging: lifted look */
.skill-step-drag {
  opacity: 0.9;
  box-shadow: 0 10px 25px -5px rgb(0 0 0 / 0.3);
  background-color: var(--color-base-100);
  border-radius: 0.5rem;
  position: relative;
  z-index: 10;
}

/* Drop indicator: the in-list placeholder rendered as a line */
tbody[data-controller="skill-step-reorder"] .sortable-fallback-placeholder {
  height: 4px !important;
  padding: 0 !important;
  margin: 2px 8px;
  border-radius: 9999px;
  background: var(--color-primary);
  overflow: hidden;
}
/*
 * Styling for inline SVG blocks in chat messages. Emitted by
 * MarkdownHelper for raw <svg>...</svg> in markdown and ```svg fences;
 * rendered client-side by app/javascript/controllers/svg_controller.js.
 *
 * <pre class="svg-source"> holds the escaped SVG source until the controller
 * swaps in the parsed <svg> element. .svg-error marks a failed parse so the
 * raw source stays visible with an error affordance.
 */

/* Wrapper: positioning context for the hover copy button */
.svg-wrapper {
  position: relative;
}

/* SVG area: centered, never fully collapsed. overflow-x only applies in
   the error-fallback state (raw source text can overflow); rendered SVGs are
   constrained by `max-width: 100%` and never scroll horizontally. */
pre.svg-source {
  display: flex;
  justify-content: center;
  /* Safe centering (progressive): if the SVG is wider than the
     container, alignment falls back so the left edge stays reachable
     via horizontal scroll. Browsers without `safe` keep `center`. */
  justify-content: safe center;
  min-height: 3rem;
  overflow-x: auto;
}

pre.svg-source svg {
  max-width: 100%;
  height: auto;
}

/* Failed parse: subtle error affordance, raw source remains readable */
.svg-error {
  border-left: 4px solid var(--color-error);
  background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
}

/* Copy-source button: revealed on hover / keyboard focus. Positioning is
   single-sourced in svg_controller.js (Tailwind `absolute right-2 top-2`
   on the button's group wrapper) — do not re-add position/top/right here. */
.svg-copy-button {
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
}

.svg-wrapper:hover .svg-copy-button,
.svg-wrapper:focus-within .svg-copy-button {
  opacity: 1;
}
@layer typography {
/* Give code blocks a distinct background from the chat bubble */
  .prose pre.highlight, 
  .prose .highlight {
    background-color: var(--color-neutral) !important;
    border-radius: var(--radius-box); /* Gives it nice rounded corners to match DaisyUI */
  }

  /* github.dark Rouge Theme */
  .highlight table td { padding: 5px; }
  .highlight table pre { margin: 0; }
  
  /* Make sure this one is also updated to match, or just left as transparent so the pre tag's background shows through */
  .highlight, .highlight .w {
    color: #c9d1d9;
    background-color: transparent; 
  }
  
  .highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
    color: #ff7b72;
  }
  .highlight .gr {
    color: #f0f6fc;
  }
  .highlight .gd {
    color: #ffdcd7;
    background-color: #67060c;
  }
  .highlight .nb {
    color: #ffa657;
  }
  .highlight .nc {
    color: #ffa657;
  }
  .highlight .no {
    color: #ffa657;
  }
  .highlight .nn {
    color: #ffa657;
  }
  .highlight .sr {
    color: #7ee787;
  }
  .highlight .na {
    color: #7ee787;
  }
  .highlight .nt {
    color: #7ee787;
  }
  .highlight .gi {
    color: #aff5b4;
    background-color: #033a16;
  }
  .highlight .ges {
    font-weight: bold;
    font-style: italic;
  }
  .highlight .kc {
    color: #79c0ff;
  }
  .highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
    color: #79c0ff;
  }
  .highlight .sb {
    color: #79c0ff;
  }
  .highlight .bp {
    color: #79c0ff;
  }
  .highlight .ne {
    color: #79c0ff;
  }
  .highlight .nl {
    color: #79c0ff;
  }
  .highlight .py {
    color: #79c0ff;
  }
  .highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
    color: #79c0ff;
  }
  .highlight .o, .highlight .ow {
    color: #79c0ff;
  }
  .highlight .gh {
    color: #1f6feb;
    font-weight: bold;
  }
  .highlight .gu {
    color: #1f6feb;
    font-weight: bold;
  }
  .highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
    color: #a5d6ff;
  }
  .highlight .nd {
    color: #d2a8ff;
  }
  .highlight .nf, .highlight .fm {
    color: #d2a8ff;
  }
  .highlight .err {
    color: #f0f6fc;
    background-color: #8e1519;
  }
  .highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
    color: #8b949e;
  }
  .highlight .gl {
    color: #8b949e;
  }
  .highlight .gt {
    color: #8b949e;
  }
  .highlight .ni {
    color: #c9d1d9;
  }
  .highlight .si {
    color: #c9d1d9;
  }
  .highlight .ge {
    color: #c9d1d9;
    font-style: italic;
  }
  .highlight .gs {
    color: #c9d1d9;
    font-weight: bold;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */