/* Ministry of Finance theming over the Chainlit default theme.
   Brand navy: #243469. */
:root {
  --primary: #243469;
}

/* ---- App header: white, logo, navy rule ---- */
#header, header {
  background-color: #ffffff !important;
  border-bottom: 3px solid #243469 !important;
}

/* primary buttons + user bubble in brand navy */
button[type="submit"], .MuiButton-containedPrimary {
  background-color: #243469 !important;
}
[data-step-type="user_message"] .message-content,
.user-message {
  background-color: #e8ecf5 !important;
}

/* watermark off-brand for a gov pilot */
a[href*="chainlit"] { display: none !important; }

/* single-theme pilot: dark mode half-switched around the branded header and
   sidebar, so the toggle goes away (govgr-admin.js resets a stored choice) */
#theme-toggle { display: none !important; }

/* ---- Login page (V2): elevated card left, feature panel right ----
   The DOM hooks (.gov-login-v2, .gov-card, .gov-right, ...) are added by the
   login enhancer in govgr-admin.js. */
body.gov-login-v2 #root > .grid > div:first-child { background: #f4f6f9; }

.gov-card-holder { max-width: 400px !important; width: 100%; }
form.gov-card {
  background: #fff;
  border-radius: 6px;
  border-top: 4px solid #243469;
  box-shadow: 0 10px 34px rgba(22, 32, 63, .14);
  padding: 34px 34px 26px;
  gap: 18px !important;
}
form.gov-card > div:first-child { align-items: flex-start !important; gap: 4px !important; }
form.gov-card h1 { font-size: 18.5px !important; color: #243469; font-weight: 600; }
.gov-sub { font-size: 13px; color: #505a5f; margin: 0 0 6px; }
form.gov-card label { font-size: 13px; font-weight: 600; color: #3b4650; }
form.gov-card input { padding-left: 38px !important; border-radius: 4px !important; }
form.gov-card input:focus {
  outline: none !important;
  border-color: #243469 !important;
  box-shadow: 0 0 0 3px rgba(36, 52, 105, .18) !important;
}
.gov-field { position: relative; }
.gov-ico {
  /* anchored to the wrapper bottom: the input (h-10) sits at the bottom of
     its field wrapper, which may also contain the label */
  position: absolute; left: 12px; bottom: 12px;
  width: 16px; height: 16px; color: #8a949c; pointer-events: none; z-index: 2;
}
form.gov-card button[type="submit"],
form.gov-card > div.grid > button {
  background: #243469 !important; color: #fff !important;
  border-radius: 4px !important; font-weight: 600;
}
.gov-note {
  margin: 4px 0 0; font-size: 12px; color: #6b7477; text-align: center;
  line-height: 1.6; border-top: 1px solid #eef1f3; padding-top: 14px;
}

/* right panel: brand navy with the assistant's three thematic pillars */
.gov-right {
  background: #243469 !important;
  display: flex !important; flex-direction: column; justify-content: center;
  gap: 26px; padding: 0 7%; color: #fff;
}
.gov-lockup {
  display: flex; align-items: center; gap: 13px;
  font-family: Roboto, "Segoe UI", Arial, sans-serif;
}
.gov-lockup img { width: 54px; height: 54px; flex: 0 0 54px; }
.gov-lockup b {
  display: block; font-size: 14.5px; font-weight: 700;
  letter-spacing: .08em; line-height: 1.15; margin: 0 0 4px;
}
.gov-lockup span { display: block; font-size: 12.5px; line-height: 1.3; opacity: .92; }
.gov-div { width: 52px; height: 4px; background: #ffffff; border-radius: 2px; }
.gov-right h2 { font-size: 21px; font-weight: 600; line-height: 1.4; margin: 0; color: #fff; }
.gov-feature { display: flex; gap: 14px; align-items: flex-start; }
.gov-feature .gov-dot {
  flex: 0 0 34px; height: 34px; border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  display: flex; align-items: center; justify-content: center;
}
.gov-feature .gov-dot svg { width: 17px; height: 17px; color: #fff; }
.gov-feature b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.gov-feature span { font-size: 13px; opacity: .75; line-height: 1.5; }
.gov-pilot { font-size: 12px; opacity: .65; letter-spacing: .1em; }

/* focus ring in brand navy instead of the theme default */
body.gov-login-v2 * { --ring: 220 49% 28% !important; }

/* logo inside welcome message / readme: fixed 70px, no frame, no gap */
img[src*="ionio-seal"]:not(.gov-logo) {
  height: 70px !important;
  width: auto !important;
  max-width: 90% !important;
  object-fit: contain;
}
div:not(.gov-right):has(> img[src*="ionio-seal"]:not(.gov-logo)),
div:not(.gov-right):has(> div > img[src*="ionio-seal"]:not(.gov-logo)) {
  background: transparent !important;
  height: 70px !important;
  max-height: 70px !important;
  width: auto !important;
  aspect-ratio: auto !important;
  border-radius: 0 !important;
}

/* ---- Validated answer: the one message a person signed off on ----
   It is delivered as a markdown blockquote (store.validated_block) so it can be
   told apart from the model's own text — otherwise the answer that went through
   human validation looks exactly like the one that did not. */
[data-step-type="assistant_message"] blockquote:has(> h3:first-child),
.message-content blockquote:has(> h3:first-child),
#root blockquote:has(> h3:first-child) {
  border: 1px solid #b9c3d6 !important;
  border-left: 4px solid #00703c !important;
  border-radius: 4px;
  background: #f3f8f4;
  padding: 14px 18px !important;
  margin: 6px 0 !important;
  color: inherit !important;
  font-style: normal !important;
}

/* ---- Verbatim excerpt card ----
   A model quote is a plain blockquote (no heading): italic serif excerpt on a
   tinted card; its last line, an italic-only paragraph, is the citation
   caption («Σελ. Ν του πρωτοτύπου, άρθρο Χ») rendered small and upright. */
.message-content blockquote:not(:has(> h3:first-child)),
#root blockquote:not(:has(> h3:first-child)) {
  border: none !important;
  border-left: 4px solid #243469 !important;
  border-radius: 0 8px 8px 0;
  background: #f4f6fb;
  padding: 12px 16px !important;
  margin: 10px 0 !important;
}
.message-content blockquote:not(:has(> h3:first-child)) p {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  color: #1f2a44;
  font-size: 15px;
  line-height: 1.55;
}
.message-content blockquote:not(:has(> h3:first-child)) p:last-child > em:only-child {
  font-family: -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-style: normal;
  color: #6b7590;
  font-size: 12.5px;
}

/* ---- «Συμπέρασμα» card: the :::important alert in gov colours ---- */
.message-content [class*="bg-purple-50"] {
  background: #f7f8fc !important;
  border: 1px solid #dbe1f0 !important;
  border-left: 4px solid #243469 !important;
  border-radius: 8px;
}
.message-content [class*="bg-purple-50"] [class*="text-purple-500"] { color: #243469 !important; }
.message-content [class*="bg-purple-50"] [class*="text-purple-700"] { color: #1f2937 !important; }
.message-content [class*="bg-purple-50"] .font-medium {
  color: #243469 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11.5px !important;
}
[data-step-type="assistant_message"] blockquote h3,
.message-content blockquote h3,
#root blockquote h3 {
  margin: 0 0 2px !important;
  font-size: 15px !important;
  color: #00703c !important;
}
.message-content blockquote em,
#root blockquote em { color: #505a5f; font-size: 13px; }
.message-content blockquote > :last-child,
#root blockquote > :last-child { margin-bottom: 0 !important; }

/* tool-step accordion headers («Χρησιμοποιήθηκε …»): smaller, muted */
h3.flex > button {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #6b7480 !important;
}
h3.flex > button svg { width: 14px !important; height: 14px !important; }

/* brand navy as the app-wide accent (kills the default pink):
   Chainlit/shadcn theme runs on the --primary HSL variable */
:root, .dark, [data-theme] {
  --primary: 226 49% 28% !important;
  --ring: 226 49% 40% !important;
}
a { color: #243469; }

/* PDF/element side panel: turn the ambiguous back-arrow into a clear circular ✕
   pinned top-right of the panel */
aside:has(#side-view-content) { position: relative; }
aside:has(#side-view-content) button:has(path[d^="m12 19-7-7"]) {
  position: absolute !important;
  top: 10px; right: 10px; z-index: 40;
  width: 34px; height: 34px; padding: 0 !important;
  border-radius: 9999px !important;
  background: #243469 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
aside:has(#side-view-content) button:has(path[d^="m12 19-7-7"]) svg { display: none; }
aside:has(#side-view-content) button:has(path[d^="m12 19-7-7"])::after {
  content: "✕";
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
}
aside:has(#side-view-content) button:has(path[d^="m12 19-7-7"]):hover {
  background: #00234f !important;
}

/* action rows under messages (follow-up suggestions, verdict buttons):
   outlined pill chips, matching the starter suggestions */
main div.-ml-1\.5.flex.items-center.flex-wrap { gap: 8px; row-gap: 8px; margin-top: 6px; }
main div.-ml-1\.5.flex.items-center.flex-wrap > button {
  border: 1px solid #c9d1dc !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  height: auto !important;
  font-size: 13px !important;
  color: #243469 !important;
  background: #fff !important;
}
main div.-ml-1\.5.flex.items-center.flex-wrap > button:hover {
  background: #eef2fb !important;
  border-color: #243469 !important;
}

/* external source links inside answers: link-out marker after the text
   (element previews render as "#" links and chip links carry rounded-full) */
main a[href^="http"]:not([class*="rounded-full"])::after {
  content: " \2197";
  font-size: .8em;
  opacity: .65;
}

/* destructive confirmation dialogs (thread deletion): the confirming action
   is red, per the destructive-action convention */
[role="alertdialog"] button[class*="bg-primary"] {
  background: #942514 !important;
  border-color: #942514 !important;
  color: #fff !important;
}
[role="alertdialog"] button[class*="bg-primary"]:hover {
  background: #7a1e10 !important;
}

/* retrieval trail as a station timeline: the step's left border is the rail,
   and each entry gets a station marker centred on it */
.step [role="region"] .border-l-2 {
  border-color: #b8bfd6;
}
.step [role="region"] .border-l-2 [role="article"] {
  position: relative;
}
.step [role="region"] .border-l-2 [role="article"]::before {
  content: "";
  position: absolute;
  left: calc(-1rem - 6px);
  top: 7px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid #243469;
  box-sizing: border-box;
}
/* terminus styling for the final entry */
.step [role="region"] .border-l-2 [role="article"]:last-child::before {
  background: #243469;
}


/* Πληροφορίες dialog: formal lockup styled after the login screen */
[role="dialog"] img[src*="ionio-seal"] {
  height: 54px !important;
  width: auto !important;
  margin: 0 !important;
}
[role="dialog"] div:has(> img[src*="ionio-seal"]),
[role="dialog"] p:has(> img[src*="ionio-seal"]) {
  height: auto !important;
  max-height: none !important;
  margin: 0 0 10px !important;
}
[role="dialog"] h1 {
  color: #243469 !important;
  font-size: 24px !important;
  font-weight: 700;
  letter-spacing: .01em;
  border-bottom: 3px solid #243469;
  padding-bottom: 12px;
  margin: 4px 0 14px !important;
}
[role="dialog"] h1::before {
  content: "ΙΟΝΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ";
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .18em;
  color: #505a5f;
  margin-bottom: 6px;
}
[role="dialog"] ul li::marker { color: #243469; }
[role="dialog"] hr { border-color: #b8bfd6; margin: 16px 0 10px; }
[role="dialog"] hr + p { font-size: 12.5px; color: #505a5f; }
[role="dialog"] h2 {
  color: #243469 !important;
  font-size: 16px !important;
  font-weight: 700;
  letter-spacing: .02em;
  margin: 18px 0 8px !important;
  padding-bottom: 4px;
  border-bottom: 1px solid #dbe1f0;
}
/* the readme image wrapper adds a grey aspect-ratio skeleton: strip it for the
   emblem (ancestors that hold the title are excluded so the panel keeps its bg) */
[role="dialog"] :is(div, p, span, a):has(img[src*="ionio-seal"]):not(:has(h1)) {
  background: transparent !important;
  height: auto !important;
  max-height: none !important;
  width: auto !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
[role="dialog"] img[src*="ionio-seal"] {
  position: static !important;
  display: block;
}
[role="dialog"] :is(div, p, span, a):has(> img[src*="ionio-seal"]) {
  min-height: 58px !important;
  overflow: visible !important;
}

/* narrow screens: the header pills drop their labels — icon-only keeps the
   cluster inside the viewport */
@media (max-width: 640px) {
  #gov-docs-link span,
  button[data-gov-styled] span { display: none; }
  #gov-docs-link, button[data-gov-styled] { padding: 6px 9px !important; }
}

/* stacked (mobile) login: the navy panel is content-height, so the vertical
   centering does nothing — give it real breathing room instead */
@media (max-width: 640px) {
  .gov-right { padding: 42px 7% 46px !important; }
}

/* sidebar group headers: chevron + collapsed count via pseudo-elements, so
   the React-owned label text is never touched */
[data-sidebar="group-label"][data-gov-base] { cursor: pointer; }
[data-sidebar="group-label"][data-gov-base]::before {
  content: "\25BE  ";
  color: #6b7590;
}
[data-sidebar="group-label"][data-gov-collapsed]::before { content: "\25B8  "; }
[data-sidebar="group-label"][data-gov-collapsed]::after {
  content: " (" attr(data-gov-count) ")";
  color: #6b7590;
}

/* Source gallery (SourceGallery/SourceNav custom elements + Chainlit PDF viewer
   in the side panel). The controller element renders nothing: drop its slot so
   it adds no gap between the answer and the metric bar. */
.inline-custom:has(> [data-gov-sources]) { display: none !important; }
/* nav bar keeps its natural height; the viewer takes the rest of the panel */
#side-view-content > .side-custom { flex-grow: 0 !important; flex-shrink: 0; }
#side-view-content .side-pdf { flex: 1 1 auto !important; min-height: 55vh; }
/* the viewer toolbar (page, zoom, download) is hover-revealed upstream; in the
   gallery it is the page navigation, so it stays visible */
#side-view-content .side-pdf > .sticky { opacity: 1 !important; }
/* mobile: the side panel is a right-hand sheet at 3/4 width upstream; a PDF
   needs the whole screen, and the close control matches the desktop ✕ */
@media (max-width: 767px) {
  [role="dialog"]:has(> #side-view-content) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 14px 12px 10px !important;
  }
  [role="dialog"]:has(> #side-view-content) > button[type="button"]:last-child {
    top: 8px; right: 8px;
    width: 34px; height: 34px;
    border-radius: 9999px;
    background: #243469;
    color: #ffffff;
    opacity: 1;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
  }
  [role="dialog"]:has(> #side-view-content) #side-view-title {
    font-size: 15px;
    text-align: left;
    padding-right: 44px;
  }
  #side-view-content .side-pdf { min-height: 0; }
}

/* «Ο χώρος μου» desktop overlay: /my in a large centered frame */
#gov-my-overlay {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(16, 24, 43, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 3vh 3vw;
}
#gov-my-overlay .gov-my-box {
  position: relative;
  width: min(1200px, 94vw);
  height: min(860px, 92vh);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .35);
}
#gov-my-overlay iframe { width: 100%; height: 100%; border: none; display: block; }
#gov-my-overlay .gov-my-close {
  position: absolute; top: 10px; right: 12px; z-index: 5;
  width: 34px; height: 34px;
  border: none; border-radius: 9999px; cursor: pointer;
  background: rgba(255, 255, 255, .18); color: #ffffff;
  font-size: 15px; font-weight: 600; line-height: 1;
}
#gov-my-overlay .gov-my-close:hover { background: rgba(255, 255, 255, .32); }