.appear-enter {
  opacity: 0.01;
}

.appear-enter.appear-enter-active {
  opacity: 1;
  transition: opacity 300ms ease-in;
}

.appear-exit {
  opacity: 1;
}

.appear-exit.appear-exit-active {
  opacity: 0.01;
  transition: opacity 200ms ease-in;
}

.slide-enter { 
max-height: 0px;
}

.slide-enter.slide-enter-active{
 overflow: hidden;
 max-height: 300px;
 transition: max-height 300ms ease-in
}

.slide-exit{
  max-height:300px;
}

.slide-exit.slide-exit-active {
  overflow: hidden;
  max-height: 0px;
  transition: max-height 300ms ease-in-out
}

.entrance-enter{
  left: "-10%";
}
.entrance.entrance-enter-active{
  overflow:hidden;
  left:"0%";
  transition: left 500ms ease-in
}
.entrance-exit{
  left:"0%";
}
.entrance.entrance-exit-active{
  overflow:hidden;
  left: "-10%";
  transition:left 500ms ease-in
}

.shake-enter {
  animation: shake 0.5s cubic-bezier(.28,.01,.21,.98) both;
  backface-visibility: hidden;
}
.shake-exit {
  opacity: 1;
}

.shake-exit.shake-exit-active {
  opacity: 0.01;
  transition: opacity 200ms ease-in;
}

.slide {
  animation: slide-in 1s forwards
}

@keyframes shake {
  5%, 95%{
    transform: translate3d(-2px,0,0);
  }
  10%, 90% {
    transform: translate3d(2px,0,0);
  }
  
  20%, 80% {
    transform: translate3d(4px,0,0);
  }

  30%, 50%, 70% {
    transform: translate3d(-2px,0,0);
  }

  40%, 60% {
    transform: translate3d(2px,0,0);
  }
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.AgentProgressIndicator {
    display: flex;
    align-items: center;
    gap: 10px;
}

.AgentProgressIndicator .AgentProgressIndicatorMessage {
    color: var(--oe-body);
    font-size: 13px;
    font-style: italic;
    animation: AgentProgressIndicatorFade 0.32s ease both;
}

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

.datePicker button {
    display: flex;
    flex-direction: row;
}

.datePicker button p {
    margin-right: 10px;
    margin-bottom: 0;
}

.datePicker .icon {
    color: var(--oe-sky);
}

.datePicker .selected {
    background-color: var(--oe-sky-bg);
    border-color: var(--oe-hairline);
}

.popup-content {
    background-color: #FFFFFF;
}

.confirmBtn {
    background-color: var(--oe-heritage);
    color: white;
}

.confirmBtn:hover {
    background-color: var(--oe-heritage-dark);
}

.cancelBtn {
    background-color: red;
    color: white;
}

.popup-content p.error {
    margin-top: 5px;
    color: red;
}

.popup-content .datePickers {
    width: 100%;
    display: flex;
    flex-direction: row;
}

.popup-content .datePickers .pickerLeft{
    width: 49%;
    display: flex;
    flex-direction: column;
}

.popup-content .datePickers .pickerRight{
    width: 49%;
    float: right;
    display: flex;
    flex-direction: column;
}

.popup-content .datePickers input {
    width: 90%;
}

.dateSelector {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-top: 1px solid var(--oe-hairline);
    padding-top: 16px;
    margin: 16px 0;
}

.dateSelector.splitScreen {
    max-width: 100%;
}

.dateSelector .labelContainer p {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--oe-meta);
}

.dateSelector .buttonContainer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.dateSelector .buttonContainer button {
    font-family: inherit;
    font-size: 12.5px;
    border-radius: 999px;
    padding: 5px 12px;
    border: 1px solid var(--oe-hairline);
    background: #FFFFFF;
    color: var(--oe-body);
    cursor: pointer;
    transition: border-color 160ms var(--oe-ease), color 160ms var(--oe-ease);
}

.dateSelector .buttonContainer button:hover:not(:disabled) {
    border-color: var(--oe-sky);
    color: var(--oe-heritage);
}

.dateSelector .buttonContainer button:disabled {
    border: 1px solid var(--oe-sky-tint);
    background: var(--oe-sky-bg);
    color: var(--oe-heritage);
    font-weight: 600;
    cursor: default;
}

.UserMessage {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 18px 0;
}

.UserEyebrow {
    letter-spacing: 0.08em;
    text-align: right;
    margin-bottom: 6px;
}

.UserBubble {
    background: #FEFBF2;
    color: var(--oe-ink);
    border: 1px solid var(--oe-gold);
    border-radius: 14px 14px 4px 14px;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.5;
    max-width: 74%;
}

.AssistantMessage {
    display: flex;
    gap: 14px;
    margin: 22px 0;
}

.AssistantAvatar {
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--oe-sky);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
}

.AssistantBody {
    flex: 1;
    min-width: 0;
}

.ChatColumn:not(.centered) .AssistantAvatar {
    display: none;
}

.oe-eyebrow.AssistantEyebrow {
    display: block;
    color: var(--oe-sky);
    margin-bottom: 8px;
}

/* ---- markdown answer typography ---- */

.markdownContent {
    font-size: 16px;
    line-height: 1.65;
    color: var(--oe-body);
}

.markdownContent h1,
.markdownContent h2 {
    font-size: 26px;
    line-height: 1.22;
    letter-spacing: -0.015em;
    font-weight: 600;
    margin: 0 0 12px;
}

.markdownContent h1 {
    color: var(--oe-ink);
}

.markdownContent h2 {
    padding: 5px;
    margin-top: 40px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--oe-sky);
    color: var(--oe-body);
}

.markdownContent h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--oe-body);
    margin: 20px 0 8px;
}

.markdownContent strong {
    font-weight: 600;
    color: var(--oe-body);
}

.markdownContent a {
    color: var(--oe-sky);
    text-decoration: none;
    transition: color 160ms var(--oe-ease);
}

.markdownContent a:hover {
    color: var(--oe-heritage);
    text-decoration: underline;
}

.markdownContent .SourceLinkWrap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    line-height: 1.4;
    margin: 8px 0;
}

.markdownContent a.SourceLink {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.markdownContent a.SourceLink:hover {
    text-decoration: none;
}

.markdownContent .SourceLinkIcon {
    display: inline-block;
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNiI+CiAgICA8cGF0aCBkPSJNMzIsMjE2VjU2YTgsOCwwLDAsMSw4LThIMjE2YTgsOCwwLDAsMSw4LDhWMjE2bC0zMi0xNi0zMiwxNi0zMi0xNkw5NiwyMTYsNjQsMjAwWiIvPgogICAgPGxpbmUgeDE9IjE0NCIgeDI9IjE5MiIgeTE9IjExMiIgeTI9IjExMiIvPgogICAgPGxpbmUgeDE9IjE0NCIgeDI9IjE5MiIgeTE9IjE0NCIgeTI9IjE0NCIvPgogICAgPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjY0IiB4PSI2NCIgeT0iOTYiLz4KPC9zdmc+Cg==) center / contain no-repeat;
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTYgMjU2IiBmaWxsPSJub25lIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxNiI+CiAgICA8cGF0aCBkPSJNMzIsMjE2VjU2YTgsOCwwLDAsMSw4LThIMjE2YTgsOCwwLDAsMSw4LDhWMjE2bC0zMi0xNi0zMiwxNi0zMi0xNkw5NiwyMTYsNjQsMjAwWiIvPgogICAgPGxpbmUgeDE9IjE0NCIgeDI9IjE5MiIgeTE9IjExMiIgeTI9IjExMiIvPgogICAgPGxpbmUgeDE9IjE0NCIgeDI9IjE5MiIgeTE9IjE0NCIgeTI9IjE0NCIvPgogICAgPHJlY3Qgd2lkdGg9IjQ4IiBoZWlnaHQ9IjY0IiB4PSI2NCIgeT0iOTYiLz4KPC9zdmc+Cg==) center / contain no-repeat;
}

.markdownContent .SourceLinkTitle {
    text-decoration: underline;
}

.markdownContent .SourceLinkDate {
    color: var(--oe-muted-icon);
    text-decoration: none;
}

/* ---- tables (gold header underline) ---- */

.markdownContent table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    font-size: 13.5px;
    background: #FFFFFF;
}

.markdownContent div > table {
    border: 0;
}

.markdownContent > div > div {
    background: #FFFFFF;
    margin: 12px 0;
    overflow-x: auto;
}

.markdownContent th {
    background: #E6F2F9;
    font-weight: 600;
    color: var(--oe-ink);
    padding: 6px 16px;
    text-align: left;
    border-top: 1px solid var(--oe-body);
    border-bottom: 1px solid var(--oe-body);
}

.markdownContent td {
    padding: 6px 16px;
    color: var(--oe-body);
    border-bottom: 1px solid var(--oe-sky);
}

.markdownContent tr:last-child td {
    border-bottom: 1px solid var(--oe-body);
}

.markdownContent td:first-child {
    font-weight: 600;
    color: var(--oe-ink);
}

.markdownContent td:not(:first-child),
.markdownContent th:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- attachments / generated files ---- */

.MessageAttachments,
.MessageGeneratedFiles {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.MessageAttachmentName,
.GeneratedFileChip {
    background: #FFFFFF;
    border: 1px solid var(--oe-hairline);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-family: inherit;
    color: var(--oe-body);
}

.GeneratedFileChip {
    cursor: pointer;
    transition: border-color 160ms var(--oe-ease), color 160ms var(--oe-ease);
}

.GeneratedFileChip:hover {
    border-color: var(--oe-sky);
    color: var(--oe-heritage);
}

.GeneratedFileError {
    color: var(--oe-red);
    font-size: 12.5px;
    margin-top: 6px;
}

/* ---- answer action row ---- */

.Controls {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}

.Controls button {
    color: var(--oe-meta);
    background: none;
    border: none;
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    font-family: inherit;
    transition: background 160ms var(--oe-ease), color 160ms var(--oe-ease);
}

.Controls button:hover {
    background: var(--oe-surface-muted);
    color: var(--oe-heritage);
}

.MessageBubbleResponseTime {
    display: block;
    font-size: 11.5px;
    color: var(--oe-muted-icon);
    margin-top: 10px;
}

.markdownContent .GeneratedImage {
    width: 100%;
    border-radius: 8px;
    margin-top: 35px;
    display: block;
}

.markdownContent .GeneratedImagePlaceholder {
    min-height: 120px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    margin-top: 8px;
}

/* PersonaCard — ported from reference/jdavies-askoe-agent (lines 10610-10764).
   CSS custom properties from the source's :root inlined as literals. */

.PersonaCard {
    background: linear-gradient(135deg, var(--oe-heritage) 0%, var(--oe-ink) 100%);
    color: #FFFFFF;
    border-radius: 14px;
    padding: 24px 28px;
    margin-bottom: 16px;
    max-width: 80%;
    border-top-left-radius: 4px;
    box-shadow: 0 2px 4px rgba(9, 25, 57, 0.06), 0 4px 8px rgba(9, 25, 57, 0.06);
}

.PersonaCard .PersonaCardEyebrow {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #59B6E0;
    font-weight: 600;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.PersonaCard h3 {
    color: #FFFFFF;
    font-size: 22px;
    margin: 0 0 8px;
    font-weight: 600;
}

.PersonaCard .PersonaCardWelcome {
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 16px;
}

.PersonaCardChips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.PersonaCardChip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    color: #FFFFFF;
}

.PersonaCardChip svg {
    font-size: 14px;
    color: #59B6E0;
}

.PersonaCardChip.Action {
    background: rgba(0, 138, 200, 0.18);
    border-color: rgba(89, 182, 224, 0.5);
    cursor: pointer;
    font-family: inherit;
    transition: background 120ms cubic-bezier(0.2, 0.0, 0.0, 1.0),
                border-color 120ms cubic-bezier(0.2, 0.0, 0.0, 1.0);
}

.PersonaCardChip.Action:hover {
    background: rgba(0, 138, 200, 0.32);
    border-color: var(--oe-sky);
}

.PersonaCardEdit {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
}

.PersonaCardField {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.PersonaCardField label {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: #59B6E0;
}

.PersonaCardField input,
.PersonaCardField textarea {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    padding: 10px 12px;
    color: #FFFFFF;
    font: inherit;
    font-size: 13px;
    outline: none;
    resize: vertical;
    transition: border-color 120ms cubic-bezier(0.2, 0.0, 0.0, 1.0),
                background 120ms cubic-bezier(0.2, 0.0, 0.0, 1.0);
}

.PersonaCardField input::placeholder,
.PersonaCardField textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.PersonaCardField input:focus,
.PersonaCardField textarea:focus {
    border-color: var(--oe-sky);
    background: rgba(255, 255, 255, 0.14);
}

.PersonaCardEditActions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 4px;
}

.PersonaCardBtn {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms cubic-bezier(0.2, 0.0, 0.0, 1.0),
                border-color 120ms cubic-bezier(0.2, 0.0, 0.0, 1.0);
}

.PersonaCardBtn.Ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.85);
}

.PersonaCardBtn.Ghost:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

.PersonaCardBtn.Primary {
    background: var(--oe-sky);
    color: #FFFFFF;
}

.PersonaCardBtn.Primary:hover {
    background: #0073A8;
}

/* Modal overrides — let the gradient card fill the modal cleanly. */
.PersonaCardModalDialog {
    max-width: 640px;
    margin: 5vh auto;
}

.PersonaCardModalDialog .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}

.PersonaCardModalBody {
    padding: 0;
}

.PersonaCardModalBody .PersonaCard {
    max-width: 100%;
    margin-bottom: 0;
}

/* Dim backdrop for modals across the app (overrides Bootstrap default). */
.modal-backdrop.in {
    background: rgba(9, 25, 57, 0.5);
    opacity: 1;
}

.PersonaCardStrip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-height: 32px;
    background: var(--oe-surface-persona);
    border-bottom: 1px solid var(--oe-hairline);
    padding: 11px 28px;
}

.PersonaCardStripTitle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    padding: 4px 0;
    border: 1px solid transparent;
    color: var(--oe-body);
}

.PersonaCardStripLeadIcon {
    color: var(--oe-heritage);
    font-size: 18px;
}

.PersonaCardStripChips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.PersonaCardStripChips::before {
    content: "";
    width: 1px;
    height: 18px;
    background: var(--oe-hairline-strong);
    margin: 0 4px;
}

.PersonaCardStripChip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #FFFFFF;
    border: 1px solid var(--oe-hairline-chip);
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 12.5px;
    line-height: 20px;
    color: var(--oe-heritage);
}

.PersonaCardStripChip svg {
    color: var(--oe-sky);
    font-size: 13px;
}

.PersonaCardStripPrompt {
    font-size: 13px;
    color: var(--oe-body);
}

.PersonaCardStripAction {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    background: none;
    border: none;
    padding: 4px 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--oe-sky);
    cursor: pointer;
    transition: color 160ms var(--oe-ease);
}

.PersonaCardStripAction:hover {
    color: var(--oe-heritage);
}

.PersonaCardStripHelp {
    margin-left: auto;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--oe-hairline-strong);
    background: #FFFFFF;
    color: var(--oe-heritage);
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 160ms var(--oe-ease);
}

.PersonaCardStripAction ~ .PersonaCardStripHelp {
    margin-left: 0;
}

.PersonaCardStripHelp:hover {
    border-color: var(--oe-ink);
}

/* Edit persona modal — framed editor per design handoff §3b. */
.PersonaEditModalDialog {
    width: 900px;
    max-width: calc(100vw - 32px);
    margin: 8vh auto;
}

.PersonaEditModalDialog .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}

.PersonaEditModal {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 32px 64px rgba(9, 25, 57, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.PersonaEditModalHeader {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 26px 30px 22px;
    border-bottom: 1px solid var(--oe-hairline);
}

.PersonaEditModalIconTile {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--oe-sky-bg);
    border: 1px solid var(--oe-hairline-chip);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--oe-heritage);
    font-size: 22px;
}

.PersonaEditModalHeaderText {
    flex: 1;
    min-width: 0;
}

.PersonaEditModalEyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--oe-gold);
    margin-bottom: 3px;
}

.PersonaEditModalTitle {
    font-size: 20px;
    font-weight: 600;
    color: var(--oe-ink);
    line-height: 1.2;
}

.PersonaEditModalSubtitle {
    font-size: 13.5px;
    color: var(--oe-meta);
    margin-top: 3px;
}

.PersonaEditModalClose {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--oe-muted-icon);
    font-size: 18px;
    transition: background 160ms var(--oe-ease), color 160ms var(--oe-ease);
}

.PersonaEditModalClose:hover {
    background: var(--oe-surface-head);
    color: var(--oe-ink);
}

.PersonaEditModalBody {
    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.PersonaEditModalField {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.PersonaEditModalLabel {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--oe-ink);
}

.PersonaEditModalLabel svg {
    font-size: 15px;
    color: var(--oe-sky);
}

.PersonaEditModalInputShell {
    border: 1px solid var(--oe-hairline-strong);
    border-radius: 6px;
    background: #FFFFFF;
    transition: box-shadow 160ms var(--oe-ease), border-color 160ms var(--oe-ease);
}

.PersonaEditModalInputShell:focus-within {
    border-color: var(--oe-sky);
    box-shadow: 0 0 0 3px rgba(0, 138, 200, 0.35);
}

.PersonaEditModalInputShell.HasError {
    border-color: #C0392B;
}

.PersonaEditModalInput {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: 11px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--oe-ink);
}

.PersonaEditModalError {
    font-size: 12.5px;
    color: #C0392B;
}

.PersonaEditModalFooter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 30px;
    border-top: 1px solid var(--oe-hairline);
    background: #FFFFFF;
}

.PersonaEditModalNote {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--oe-muted-icon);
    line-height: 1.4;
}

.PersonaEditModalNote svg {
    font-size: 15px;
    flex-shrink: 0;
}

.PersonaEditModalBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    padding: 11px 20px;
    cursor: pointer;
    transition: background 160ms var(--oe-ease), border-color 160ms var(--oe-ease);
}

.PersonaEditModalBtn.Ghost {
    color: var(--oe-body);
    background: #FFFFFF;
    border: 1px solid var(--oe-hairline-strong);
}

.PersonaEditModalBtn.Ghost:hover {
    background: var(--oe-surface-head);
    border-color: #B8BFC4;
}

.PersonaEditModalBtn.Primary {
    color: #FFFFFF;
    background: var(--oe-heritage);
    border: none;
    padding: 11px 22px;
}

.PersonaEditModalBtn.Primary:hover {
    background: var(--oe-heritage-dark);
}

.PersonaChangeNotice {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 4px;
    color: var(--oe-meta);
    font-size: 12px;
}

.PersonaChangeNotice .PersonaChangeNoticeRule {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(0,52,105,0), rgba(0,52,105,0.18), rgba(0,52,105,0));
}

.PersonaChangeNotice .PersonaChangeNoticeBadge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--oe-sky-bg);
    border: 1px solid var(--oe-sky-tint);
    border-radius: 999px;
    color: var(--oe-heritage);
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 1px 2px rgba(0, 52, 105, 0.05);
}

.PersonaChangeNotice .PersonaChangeNoticeIcon {
    color: var(--oe-heritage);
}

.PersonaChangeNotice .PersonaChangeNoticeChips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.PersonaChangeNotice .PersonaChangeNoticeChip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: var(--oe-sky-bg);
    border: 1px solid var(--oe-sky-tint);
    border-radius: 10px;
    color: var(--oe-heritage);
    white-space: nowrap;
}

.PersonaChangeNotice .PersonaChangeNoticeChip svg {
    color: var(--oe-meta);
    font-size: 10px;
}

.MessageCanvas {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.MessageCanvasColumn {
    max-width: 1100px;
    margin: 0 auto;
    padding: 36px 24px 120px;
}

.ChatColumn.centered .MessageCanvasColumn {
    padding-bottom: 190px;
}

.QueryRecommender {
    background: transparent;
    padding: 16px 0 4px;
    /* Tracks the input bar's own max-width (including the room it reserves
       for the help circle), so the carousel stays aligned with it and its
       edge buttons never run past the available panel width. */
    max-width: min(1052px, calc(100% - 100px));
    margin: 0 auto;
    position: relative;
}

/* Only widen past the input bar once there's comfortably enough room for
   it (accounting for an expanded side rail) — otherwise the right edge
   button gets pushed off the visible page on a narrower window. */
@media (min-width: 1500px) {
    .QueryRecommender {
        /* Widened by the input bar's gap + help circle (12 + 38 = 50px) so
           the carousel's right edge reaches as far right as the help
           circle does. Shifted right by half of that widening (25px) so
           the left edge still lines up with the input bar below it. */
        max-width: 1102px;
        transform: translateX(25px);
    }
}

.QueryRecommenderEdge {
    position: absolute;
    /* Container padding is 16px top / 4px bottom, so its 50% point sits 6px
       above the carousel row's true vertical center — compensate here. */
    top: calc(50% + 6px);
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 1px solid var(--oe-sky);
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    color: var(--oe-sky);
    transition: transform 160ms var(--oe-ease), background 160ms var(--oe-ease);
}

/* A triangle's visual centroid sits off-center in its own bounding box, so
   flex-centering the icon still reads as lopsided — nudge it back optically. */
.QueryRecommenderEdgeIcon {
    font-size: 11px;
    margin-left: 2px;
}

.QueryRecommenderEdge.left .QueryRecommenderEdgeIcon {
    margin-left: 0;
    margin-right: 2px;
    transform: scaleX(-1);
}

.QueryRecommenderEdge:hover {
    background: var(--oe-sky-bg);
}

.QueryRecommenderEdge:active {
    transform: translateY(-50%) scale(0.95);
}

/* Sit fully inside the carousel by default, so the buttons keep clear
   space from the page edge (and its scrollbar) on a narrow window. */
.QueryRecommenderEdge.left {
    left: 2px;
}

.QueryRecommenderEdge.right {
    right: 2px;
}

/* Once the carousel is wide enough to be widened (see above), there's
   room to let the buttons poke out past its edges again. */
@media (min-width: 1500px) {
    .QueryRecommenderEdge.left {
        left: -13px;
    }

    .QueryRecommenderEdge.right {
        right: -13px;
    }
}

.QueryRecommender .carousel-item-content {
    display: flex;
    gap: 10px;
    overflow-x: auto;
}

/* Mask the fixed viewport, not the moving item, so the edge fades stay pinned
   to the sides while the carousel slides between pages. */
.QueryRecommender.paged .carousel-inner {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 80px, #000 calc(100% - 80px), transparent);
}

.QueryRecommender .carousel-item-content .btn {
    flex: 1;
    min-width: 130px;
    text-align: center;
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1.25;
    color: var(--oe-body);
    background: #FFFFFF;
    border: 1px solid var(--oe-hairline);
    border-radius: 7px;
    padding: 7px 10px;
    white-space: normal;
    transition: border-color 160ms var(--oe-ease), color 160ms var(--oe-ease), box-shadow 160ms var(--oe-ease);
}

.QueryRecommender .carousel-item-content .btn:hover {
    border-color: var(--oe-body);
    color: var(--oe-body);
    box-shadow: var(--oe-shadow-card-hover);
    background: #FFFFFF;
}

.QueryRecommender .carousel-item-content .btn:active {
    transform: scale(0.98);
}

.QueryRecommender .fade-in {
    animation: oe-fade-up 360ms var(--oe-ease) both;
}

.InputBarContainer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    background: transparent;
    padding: 0 24px 20px;
}

.InputBarContainer .input-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    /* The help circle hangs 50px off the right edge (12px gap + 38px wide) and
       auto margins split any spare width evenly, so reserving 50px on each side
       keeps it beside the input bar and on-screen however narrow things get. */
    max-width: min(1052px, calc(100% - 100px));
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.InputBarContainer .input-group .form-control:first-child,
.InputBarContainer .input-group .form-control:not(:first-child):not(:last-child),
.InputBarContainer .form-control {
    flex: 1;
    height: auto;
    font-family: inherit;
    font-size: 15px;
    color: var(--oe-ink);
    border: 1px solid var(--oe-hairline-strong);
    border-radius: 12px;
    padding: 14px 120px 14px 16px;
    box-shadow: 0 10px 30px rgba(9, 25, 57, 0.14), 0 2px 6px rgba(9, 25, 57, 0.08);
    transition: box-shadow 160ms var(--oe-ease), border-color 160ms var(--oe-ease);
}

.InputBarContainer .form-control::placeholder {
    color: var(--oe-muted-icon);
}

.InputBarContainer .form-control:focus {
    border-color: var(--oe-sky);
    box-shadow: var(--oe-focus-ring), 0 10px 30px rgba(9, 25, 57, 0.14), 0 2px 6px rgba(9, 25, 57, 0.08);
    outline: none;
}

.InputBarContainer .AttachButton {
    background: none;
    border: none;
    color: var(--oe-muted-icon);
    font-size: 20px;
    padding: 6px 8px;
    border-radius: 6px;
    transition: color 160ms var(--oe-ease), background 160ms var(--oe-ease);
}

.InputBarContainer .AttachButton:hover {
    background: var(--oe-surface-muted);
    color: var(--oe-heritage);
}

.InputBarContainer .SendButton,
.InputBarContainer .CancelButton {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--oe-gold);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    transition: background 160ms var(--oe-ease), transform 100ms var(--oe-ease);
}

.InputBarContainer .SendButton:hover,
.InputBarContainer .CancelButton:hover {
    background: #8f7024;
    color: #FFFFFF;
}

.InputBarContainer .SendButton:active,
.InputBarContainer .CancelButton:active {
    transform: translateY(-50%) scale(0.98);
}

.InputBarContainer .SendButton:disabled {
    opacity: 0.55;
}

.InputBarContainer .InputBarHelp {
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 12px;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid var(--oe-hairline-strong);
    background: #FFFFFF;
    color: var(--oe-body);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 160ms var(--oe-ease), color 160ms var(--oe-ease);
}

.InputBarContainer .InputBarHelp:hover {
    border-color: var(--oe-body);
}

.AttachmentUploading,
.AttachmentChip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid var(--oe-hairline);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    color: var(--oe-body);
}

.AttachmentChipRemove {
    background: none;
    border: none;
    color: var(--oe-muted-icon);
    cursor: pointer;
    padding: 0 2px;
}

.AttachmentChipRemove:hover {
    color: var(--oe-red);
}

.AttachmentError {
    color: var(--oe-red);
    font-size: 12.5px;
}

.ModeSideRail {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 70px;
    background: var(--oe-surface-rail);
    border-right: 1px solid var(--oe-hairline);
    transition: width 200ms var(--oe-ease);
}

.ModeSideRail.expanded {
    width: 262px;
}

.ModeSideRailBody {
    flex: 1;
    padding: 18px 14px;
    min-height: 0;
    overflow-y: auto;
}

.ModeSideRailEyebrow {
    display: block;
    margin: 4px 8px 14px;
}

.ModeSideRailList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ModeSideRailList li {
    border-top: 1px solid var(--oe-hairline);
    border-bottom: 1px solid var(--oe-hairline);
}

.ModeSideRailList li + li {
    border-top: none;
}

.ModeSideRailItem {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 13px;
    margin: 0;
    border: none;
    border-radius: 8px;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--oe-body);
    text-align: left;
    cursor: pointer;
    transition: background 160ms var(--oe-ease);
}

.ModeSideRailItem .ModeSideRailIcon {
    color: var(--oe-muted-icon);
    font-size: 16px;
    flex-shrink: 0;
}

.ModeSideRailItem:hover {
    background: var(--oe-surface-head);
}

.ModeSideRailItem.active {
    border-radius: 0;
    background: #E8F3FB;
    font-weight: 600;
    color: var(--oe-body);
}

.ModeSideRailItem.active .ModeSideRailIcon {
    color: var(--oe-sky);
}

.ModeSideRailLabel {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

.ModeSideRailPlayIcon {
    color: var(--oe-muted-icon);
    font-size: 18px;
    flex-shrink: 0;
}

.ModeSideRailItem.active .ModeSideRailPlayIcon {
    color: var(--oe-sky);
}

.ModeSideRailFooter {
    padding: 16px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
}

.ModeSideRail.expanded .ModeSideRailFooter {
    justify-content: flex-start;
}

.ModeSideRailToggle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--oe-hairline-strong);
    background: #FFFFFF;
    color: var(--oe-body);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 160ms var(--oe-ease);
}

.ModeSideRailToggle:hover {
    background: var(--oe-surface-muted);
}

.ModeSideRailToggle:active {
    transform: scale(0.98);
}

/* Shared framed-modal chrome for chatbot dialogs, per design handoff §3b.
   Mirrors the persona editor's header/body/footer vocabulary so disclaimer,
   help, and future popups read as one system. */

.OeModalDialog {
    width: 720px;
    max-width: calc(100vw - 32px);
    margin: 8vh auto;
}

.OeModalDialog .modal-content {
    background: transparent;
    border: none;
    box-shadow: none;
}

.OeModal {
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 32px 64px rgba(9, 25, 57, 0.28);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 86vh;
}

.OeModalHeader {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 26px 30px 22px;
    border-bottom: 1px solid var(--oe-hairline);
    flex-shrink: 0;
}

.OeModalIconTile {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--oe-sky-bg);
    border: 1px solid var(--oe-hairline-chip);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--oe-heritage);
    font-size: 22px;
}

.OeModalIconTile.Warning {
    background: #FEF6E7;
    border-color: #F3E0B5;
    color: var(--oe-gold);
}

.OeModalHeaderText {
    flex: 1;
    min-width: 0;
}

.OeModalEyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--oe-gold);
    margin-bottom: 3px;
}

.OeModalTitle {
    font-size: 20px;
    font-weight: 600;
    color: var(--oe-ink);
    line-height: 1.2;
}

.OeModalSubtitle {
    font-size: 13.5px;
    color: var(--oe-meta);
    margin-top: 3px;
}

.OeModalClose {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 8px;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--oe-muted-icon);
    font-size: 18px;
    transition: background 160ms var(--oe-ease), color 160ms var(--oe-ease);
}

.OeModalClose:hover {
    background: var(--oe-surface-head);
    color: var(--oe-ink);
}

.OeModalBody {
    padding: 26px 30px;
    overflow-y: auto;
    color: var(--oe-body);
    line-height: 1.6;
}

.OeModalQuote {
    border-left: 3px solid var(--oe-gold);
    background: #FCFCFD;
    padding: 18px 22px;
    margin: 0 0 18px;
}

.OeModalQuote p,
.OeModalBodyText {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--oe-body);
}

.OeModalBrand {
    color: var(--oe-ink);
    font-weight: 700;
}

.OeModalNote {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    color: var(--oe-muted-icon);
    line-height: 1.4;
}

.OeModalNote svg {
    font-size: 15px;
    flex-shrink: 0;
}

.OeModalFooter {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 18px 30px;
    border-top: 1px solid var(--oe-hairline);
    background: var(--oe-surface-soft);
    flex-shrink: 0;
}

.OeModalFooterLink {
    flex: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--oe-sky);
    text-decoration: none;
}

.OeModalFooterLink span {
    text-decoration: underline;
}

.OeModalFooterLink:hover {
    color: var(--oe-heritage);
}

/* Help guide body — editorial content styling per design handoff §5a. */
.OeGuide {
    font-family: inherit;
    color: var(--oe-body);
}

.OeGuideWelcome {
    border-left: 3px solid var(--oe-gold);
    padding: 2px 0 2px 18px;
    margin-bottom: 22px;
}

.OeGuide .OeGuideWelcome h3 {
    font-size: 19px;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    color: var(--oe-heritage);
    line-height: 1.3;
    margin: 0 0 10px;
}

.OeGuideWelcome p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--oe-body);
    margin: 0;
}

.OeGuide h3 {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--oe-meta);
    margin: 28px 0 14px;
}

.OeGuide h4 {
    font-size: 15px;
    font-weight: 600;
    color: var(--oe-ink);
    margin: 0 0 5px;
}

.OeGuide p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--oe-body);
    margin: 0 0 4px;
}

.OeGuide a {
    color: var(--oe-sky);
    font-weight: 600;
    text-decoration: none;
}

.OeGuide a:hover {
    text-decoration: underline;
}

.OeGuideItems {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.OeGuideItems > li {
    display: flex;
    gap: 14px;
}

.OeGuideIcon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 8px;
    background: var(--oe-sky-bg);
    color: var(--oe-heritage);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    font-size: 15px;
}

.OeGuideItemBody {
    flex: 1;
    min-width: 0;
}

.OeGuideCmdHead {
    display: flex;
    align-items: center;
    gap: 10px;
}

.OeGuideCmdHead .OeGuideIcon {
    margin-top: 0;
}

.OeGuideExamples {
    margin: 6px 0 14px;
    padding-left: 20px;
}

.OeGuideCmdHead + .OeGuideExamples {
    margin-left: 38px;
}

.OeGuideExamples li {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--oe-body);
}

.OeModalBtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    padding: 11px 20px;
    cursor: pointer;
    transition: background 160ms var(--oe-ease), border-color 160ms var(--oe-ease);
}

.OeModalBtn.Ghost {
    color: var(--oe-body);
    background: #FFFFFF;
    border: 1px solid var(--oe-hairline-strong);
}

.OeModalBtn.Ghost:hover {
    background: var(--oe-surface-head);
    border-color: #B8BFC4;
}

.OeModalBtn.Primary {
    color: #FFFFFF;
    background: var(--oe-heritage);
    border: none;
    padding: 11px 22px;
}

.OeModalBtn.Primary:hover {
    background: var(--oe-heritage-dark);
}

.VisualisationPane {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-left: 0;
    padding-right: 0;
}

.DataPaneToolbar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    border-bottom: 1px solid var(--oe-hairline);
    padding: 8px 20px;
}

.DataPaneToolbar__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--oe-ink);
}

.DataPaneToolbar__label .svg-inline--fa {
    font-size: 18px;
    color: var(--oe-heritage);
}

.DataPaneToolbar__controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.DataPanePill {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms var(--oe-ease),
        border-color 160ms var(--oe-ease),
        color 160ms var(--oe-ease);
}

.DataPanePill:active {
    transform: scale(0.98);
}

.DataPanePill--expand {
    background: var(--oe-sky-bg);
    border: 1px solid var(--oe-hairline-chip);
    color: var(--oe-heritage);
}

.DataPanePill--expand:hover {
    background: #E1ECF5;
}

.DataPanePill--close {
    background: #fff;
    border: 1px solid var(--oe-hairline);
    color: var(--oe-body);
}

.DataPanePill--close:hover {
    background: var(--oe-surface-head);
    color: var(--oe-ink);
}

.DataPaneContent {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.DataPaneChartCard {
    height: 60%;
    margin: 16px 20px 0;
    padding: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--oe-hairline);
    border-radius: 12px;
    box-shadow: var(--oe-shadow-composer);
    box-sizing: border-box;
}

.DataPaneLower {
    height: 40%;
    display: flex;
    flex-direction: column;
    padding: 0 20px 16px;
}

/*
 * The chart is the databank ChartContainer, reused as-is. Its shared wrappers
 * (Box grey background, .box-content padding, Row margin, Col padding) draw a
 * grey inset frame around the SVG. Scoped to .DataPaneChartCard, strip that
 * chrome so the SVG sits flush inside the pane's rounded card. Databank view
 * keeps its own framing.
 */
.DataPaneChartCard > div,
.DataPaneChartCard .box-content {
    background: transparent !important;
    padding: 0 !important;
}

.DataPaneChartCard .row {
    margin: 0 !important;
}

.DataPaneChartCard [class*="col-"] {
    padding: 0 !important;
}

/*
 * Lower pane (actions bar + table). Both the ButtonGroup and the Table are the
 * databank components reused as-is, each wrapped in the shared grey Box. Scoped
 * to .DataPaneLower, strip that chrome and restyle to the §6 look. Databank view
 * is untouched.
 */
.DataPaneLower .box-content {
    padding: 0 !important;
    background: transparent !important;
}

.DataPaneLower .DataPaneActions > div {
    background: transparent !important;
    border-bottom: 0 !important;
}

/* Actions bar: sit on white, single row, tidy the oversized button gutters. */
.DataPaneActions {
    flex-shrink: 0;
}

.DataPaneActions .row {
    display: flex;
    align-items: center;
    margin: 0 !important;
    padding: 6px 0 !important;
}

.DataPaneActions .input-group-btn {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    margin-right: 20px !important;
}

/* GridLegend uses float:right, which is inert in the flex row — push it right. */
.DataPaneActions .row > *:last-child {
    margin-left: auto;
}

/* Table: frame it like a §3 table card and strip the Box grey around it. */
.DataPaneTable {
    flex-grow: 1;
    overflow: hidden;
    box-sizing: border-box;
    background: #fff;
}

.DataPaneTable > div {
    background: transparent !important;
}

.DataPaneTable .ReactTable {
    margin: 0 !important;
    border: 0 !important;
    background: #fff !important;
}

.DataPaneTable .rt-tr.-odd {
    background: transparent !important;
}

.DataPaneTable .rt-tr:hover {
    background: transparent !important;
}

.DataPaneTable .rt-thead.-header {
    background: #E6F2F9;
    border-top: 1px solid var(--oe-body) !important;
    border-bottom: 1px solid var(--oe-body) !important;
    box-shadow: none !important;
}

.DataPaneTable .rt-th {
    color: var(--oe-ink);
    font-weight: 600;
}

.DataPaneTable .rt-td {
    color: var(--oe-body);
    font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--oe-sky);
}

.DataPaneTable .rt-tr-group:last-child .rt-td {
    border-bottom: 1px solid var(--oe-body);
}

/* Align the reused forecast/interpolated highlight to the design red. */
.DataPaneTable [data-forecast="data-forecast"],
.DataPaneTable [data-interpolated-forecast="data-interpolated-forecast"] {
    color: #C4262E !important;
}

/* Declared on :root, not .chatbot-root: react-bootstrap's <Modal> (disclaimer,
   help, persona editor) portals its content to document.body, outside the
   chatbot DOM subtree, so these custom properties must be globally inherited
   to reach it. */
:root {
    --oe-heritage: #003466;
    --oe-heritage-dark: #002B57;
    --oe-ink: #091939;
    --oe-body: #3E515A;
    --oe-meta: #7C8891;
    --oe-muted-icon: #8F9699;
    --oe-sky: #008AC8;
    --oe-sky-tint: #B7DBF1;
    --oe-sky-bg: #EEF3F8;
    --oe-gold: #B38D2F;
    --oe-gold-soft: #F3EEDD;
    --oe-green: #8BA612;
    --oe-green-soft: #F1F4E4;
    --oe-red: #EF4130;
    --oe-surface-soft: #F7F8FA;
    --oe-surface-rail: #F7F8FA;
    --oe-surface-muted: #EEF1F4;
    --oe-surface-head: #F2F5F8;
    --oe-surface-persona: #EEF2F6;
    --oe-hairline: #E4E7EA;
    --oe-hairline-soft: #EEF1F4;
    --oe-hairline-strong: #D8DCDE;
    --oe-hairline-chip: #D8E3EC;
    --oe-shadow-composer: 0 1px 2px rgba(9, 25, 57, 0.05);
    --oe-shadow-card-hover: 0 2px 8px rgba(9, 25, 57, 0.06);
    --oe-focus-ring: 0 0 0 3px rgba(0, 138, 200, 0.35);
    --oe-ease: cubic-bezier(0.2, 0, 0, 1);
}

.chatbot-root {
    font-family: "Poppins", "Open Sans", sans-serif;
    color: var(--oe-body);
}

.chatbot-root button:focus-visible,
.chatbot-root a:focus-visible,
.chatbot-root input:focus-visible {
    outline: none;
    box-shadow: var(--oe-focus-ring);
}

.oe-eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--oe-meta);
}

@keyframes oe-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.oe-fade-up {
    animation: oe-fade-up 360ms var(--oe-ease) both;
}

.chatbot-root.ChatWindowOuter {
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
}

.ChatWindowRow {
    height: 100%;
    margin-left: 0;
    margin-right: 0;
}

.ChatWindowRow.withTopBar {
    padding-top: 45px;
}

.ChatColumn {
    height: 100%;
    padding-left: 0;
    padding-right: 0;
    display: flex;
    flex-direction: column;
}

.ChatColumn.centered {
    align-items: center;
}

.ChatAndRail {
    width: 100%;
    flex: 1;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.ChatWindowMain {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
}

.ChatWindowCanvasSlot {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
}

.ChatWindowCanvasSlot::before {
    content: "";
    position: absolute;
    left: 0;
    right: 14px;
    bottom: 0;
    height: 220px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF 70px);
}

.ChatColumn:not(.centered) .ChatWindowCanvasSlot::before {
    height: 120px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #FFFFFF 38px);
}

.ChatWindowCanvasSlot::after {
    content: "";
    position: absolute;
    left: 0;
    right: 14px;
    bottom: 0;
    height: 150px;
    z-index: 1;
    pointer-events: none;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 45%);
    mask-image: linear-gradient(to bottom, transparent, #000 45%);
}

.PersonaSlot {
    width: 100%;
    flex: 0 0 auto;
}

.AgentLoadError {
    margin: auto;
    text-align: center;
    padding: 24px;
}

.outerContainerStyles {
    height: 100vh;
    width: 100vw;
    box-sizing: border-box;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.outerContainerStyles .astrato-container {
    padding-top: 45px;
    margin: 0px;
    height: 100%;
    line-height: 0;
}

.outerContainerStyles .astrato-container .astrato-iframe {
    width: 100%;
    height: 100%;
    min-width: 1260px;
    min-height: 640px;
    border: none;
}

.outerContainerStyles .astrato-container .message-container {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}