* {
    box-sizing: border-box;
}
body.ai-body {
    margin: 0;
    background: var(--ai-bg);
    color: var(--ai-ink);
    font-family: "Jost", Arial, sans-serif;
    min-height: 100vh;
}

a {
    color: inherit;
    text-decoration: none;
}
button,
input,
textarea,
select {
    font: inherit;
}

/* ── Custom scrollbars — design system palette ─────────────────────────────
   All scrollable elements inside ai-body use the brand color scheme instead
   of the native OS/browser default scrollbar. */
.ai-body ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.ai-body ::-webkit-scrollbar-track {
    background: var(--ai-soft);
    border-radius: 3px;
}
.ai-body ::-webkit-scrollbar-thumb {
    background: var(--ai-muted);
    border-radius: 3px;
}
.ai-body ::-webkit-scrollbar-thumb:hover {
    background: var(--ai-main);
}
.ai-body ::-webkit-scrollbar-corner {
    background: var(--ai-soft);
}
/* Firefox */
.ai-body * {
    scrollbar-width: thin;
    scrollbar-color: var(--ai-muted) var(--ai-soft);
}

/* Native date/month/datetime controls are shared by Career Forge and
   Back office. Chromium injects a calendar-picker icon that can become
   invisible on our dark input surfaces, so replace only that icon while
   leaving the native picker popup unchanged. */
.ai-body input[type="month"],
.ai-body input[type="date"],
.ai-body input[type="datetime-local"] {
    color-scheme: light;
    accent-color: var(--ai-main);
}

html[data-ai-theme="dark"] .ai-body input[type="month"],
html[data-ai-theme="dark"] .ai-body input[type="date"],
html[data-ai-theme="dark"] .ai-body input[type="datetime-local"] {
    color-scheme: dark;
}

.ai-body input[type="month"]::-webkit-calendar-picker-indicator,
.ai-body input[type="date"]::-webkit-calendar-picker-indicator,
.ai-body input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background: transparent
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230d1857'><path d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z'/><path d='M6.5 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-6 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-6 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/></svg>")
        no-repeat center / 16px 16px;
    width: 18px;
    height: 18px;
    padding: 0;
    margin-left: 0.25rem;
    opacity: 0.85;
    cursor: pointer;
    filter: none;
}

html[data-ai-theme="dark"]
    .ai-body
    input[type="month"]::-webkit-calendar-picker-indicator,
html[data-ai-theme="dark"]
    .ai-body
    input[type="date"]::-webkit-calendar-picker-indicator,
html[data-ai-theme="dark"]
    .ai-body
    input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23e6edf3'><path d='M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z'/><path d='M6.5 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-6 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-6 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z'/></svg>");
}

.ai-body input[type="month"]::-webkit-calendar-picker-indicator:hover,
.ai-body input[type="date"]::-webkit-calendar-picker-indicator:hover,
.ai-body input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}