/* ==========================================================================
   GUIA - AI knowledge guide styles (chat + library + add knowledge)
   Retro/classic look to match the existing DSTOffice chrome, using the full
   available width and height with no floating cards.
   ========================================================================== */

:root {
    /* Retro Office palette: sober blues/greys matching the app chrome. */
    --guia-header: #3f6fb5;            /* top app bar blue */
    --guia-header-dark: #2b2b2b;       /* dark side menu */
    --guia-primary: #3f6fb5;
    --guia-user-bubble: #3f6fb5;
    --guia-ai-bubble: #ffffff;
    --guia-border: #d9dde3;
    --guia-bg: #f1f3f6;
    --guia-panel: #ffffff;
    --guia-radius: 4px;
}

/* --------------------------------------------------------------------------
   Split layout (chat + knowledge library): fill all available space.

   The page escapes the parent MudContainer (which has max-width + margins) by
   anchoring to the content area: top below the 64px app bar, left after the
   open drawer (240px). MudBlazor sets a left padding on .mud-main-content when
   the drawer is open, so we anchor to its left edge via a wrapper offset.
   -------------------------------------------------------------------------- */
/* Neutralise the parent MudContainer paddings/margins around the GUIA page. */
.mud-main-content:has(.guia-layout) > .mud-container {
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* The chat anchors to the real content area: fixed below the 64px app bar and
   to the right of the open drawer (default 240px). This fills the available
   space exactly without overshooting or leaving gaps, and prevents horizontal
   scroll. The left offset tracks the drawer open/closed state. */
.guia-layout {
    display: flex;
    position: fixed;
    top: 64px;          /* below the MudAppBar */
    left: 240px;        /* to the right of the open MudDrawer */
    right: 0;
    bottom: 0;
    background: var(--guia-bg);
    overflow: hidden;   /* no horizontal scroll; children scroll vertically */
}

/* When the drawer is closed, span from the left edge. */
body:has(.mud-drawer.mud-drawer-pos-left:not(.mud-drawer--open)) .guia-layout,
body:not(:has(.mud-drawer-pos-left.mud-drawer--open)) .guia-layout {
    left: 0;
}

/* --------------------------------------------------------------------------
   Chat (left)
   -------------------------------------------------------------------------- */
.guia-chat {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    background: var(--guia-panel);
    border-right: 1px solid var(--guia-border);
}

.guia-chat__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--guia-header);
    color: #fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.guia-chat__header-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.guia-chat__header-icon {
    font-size: 1.5rem !important;
}

.guia-chat__title {
    color: #fff;
    font-weight: 600;
    line-height: 1.1;
}

.guia-chat__subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.guia-chat__header-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.guia-chat__header-actions .mud-icon-button,
.guia-chat__header-actions .mud-button-root {
    color: #fff;
}

/* messages scroll area */
.guia-chat__messages {
    flex: 1;
    overflow-y: auto;
    padding: 24px clamp(16px, 6vw, 120px);
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--guia-bg);
}

.guia-chat__messages::-webkit-scrollbar {
    width: 10px;
}

.guia-chat__messages::-webkit-scrollbar-thumb {
    background: #c3c9d2;
    border-radius: 6px;
}

/* empty state */
.guia-chat__empty {
    margin: auto;
    text-align: center;
    max-width: 460px;
    color: #6b6b80;
}

.guia-chat__empty-badge {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--guia-header);
    color: #fff;
}

.guia-chat__empty-text {
    color: #8a8a9e;
    margin-top: 8px;
}

/* --------------------------------------------------------------------------
   Messages / bubbles
   -------------------------------------------------------------------------- */
.guia-msg {
    display: flex;
    gap: 10px;
    max-width: 80%;
    animation: guia-fade-in 0.25s ease;
}

.guia-msg--user {
    align-self: flex-end;
    flex-direction: row;
    justify-content: flex-end;
}

.guia-msg--ai {
    align-self: flex-start;
}

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

.guia-msg__avatar {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: var(--guia-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.guia-msg__avatar--ai {
    background: var(--guia-header);
}

.guia-msg__avatar--user {
    background: #d6dde8;
    color: var(--guia-primary);
}

.guia-msg__bubble {
    padding: 10px 14px;
    border-radius: var(--guia-radius);
    line-height: 1.5;
    word-break: break-word;
    border: 1px solid var(--guia-border);
}

.guia-msg__bubble--user {
    background: var(--guia-user-bubble);
    color: #fff;
    border-color: var(--guia-user-bubble);
}

.guia-msg__bubble--user .mud-typography {
    color: #fff;
}

.guia-msg__bubble--ai {
    background: var(--guia-ai-bubble);
    color: #2b2b3a;
}

.guia-msg__bubble--error {
    background: #fdecea;
    border-color: #f5c6c2;
    color: #b23b3b;
}

.guia-msg__bubble--saved {
    background: #eaf5ea;
    border-color: #bcdcbc;
    color: #2e6b2e;
}

/* status tags */
.guia-msg__tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.78rem;
    padding: 3px 10px;
    border-radius: var(--guia-radius);
    width: fit-content;
}

.guia-msg__tag--warning {
    background: #fff4e0;
    color: #9a6a00;
    border: 1px solid #f0d9a8;
}

.guia-msg__tag--success {
    background: #eaf5ea;
    color: #2e6b2e;
    border: 1px solid #bcdcbc;
}

/* sources */
.guia-msg__sources {
    margin-top: 2px;
}

.guia-msg__sources .mud-expand-panel {
    background: transparent;
    border: 1px solid var(--guia-border);
    border-radius: var(--guia-radius);
}

.guia-source {
    padding: 10px 12px;
    margin-bottom: 6px;
    border-radius: var(--guia-radius) !important;
    background: #f7f9fc !important;
    border-color: var(--guia-border) !important;
}

.guia-source__title {
    display: flex;
    align-items: center;
    color: var(--guia-primary);
    font-weight: 600;
}

.guia-source__summary {
    color: #5a5a6e;
    margin-top: 4px;
}

/* typing indicator */
.guia-typing {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px !important;
}

.guia-typing__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--guia-primary);
    opacity: 0.4;
    animation: guia-bounce 1.2s infinite ease-in-out;
}

.guia-typing__dot:nth-child(2) {
    animation-delay: 0.2s;
}

.guia-typing__dot:nth-child(3) {
    animation-delay: 0.4s;
}

/* --------------------------------------------------------------------------
   Composer (input area)
   -------------------------------------------------------------------------- */
.guia-chat__composer {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px clamp(16px, 6vw, 120px) 4px;
    border-top: 1px solid var(--guia-border);
    background: var(--guia-panel);
}

.guia-chat__add-btn {
    flex: 0 0 auto;
}

.guia-chat__input {
    flex: 1;
}

.guia-chat__send {
    border-radius: var(--guia-radius) !important;
    min-width: 48px !important;
    width: 48px;
    height: 48px;
    padding: 0 !important;
}

.guia-chat__hint {
    text-align: center;
    color: #a0a0b4;
    padding: 4px 0 10px;
    background: var(--guia-panel);
}

.guia-chat__attach-btn {
    flex: 0 0 auto;
}

/* Attached-image previews shown above the composer before sending. */
.guia-chat__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px clamp(16px, 6vw, 120px) 0;
    background: var(--guia-panel);
}

.guia-attachment {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 4px;
    border: 1px solid var(--guia-border);
    border-radius: var(--guia-radius);
    background: rgba(0, 0, 0, 0.03);
    max-width: 240px;
}

.guia-attachment__thumb {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 6px;
    flex: 0 0 auto;
}

.guia-attachment__name {
    font-size: 0.8rem;
    color: #6b6b80;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.guia-attachment__remove {
    flex: 0 0 auto;
}

/* Image thumbnails rendered inside a sent user message bubble. */
.guia-msg__images {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 6px;
}

.guia-msg__image {
    max-width: 160px;
    max-height: 160px;
    object-fit: cover;
    border-radius: 8px;
}

/* --------------------------------------------------------------------------
   Knowledge library (right panel)
   -------------------------------------------------------------------------- */
.guia-library {
    display: flex;
    flex-direction: column;
    /* ~40% of the available width so editing entries is comfortable, bounded so it
       never gets too narrow or eats the whole chat on very wide/narrow screens. */
    flex: 0 0 40%;
    width: 40%;
    min-width: 360px;
    max-width: 640px;
    height: 100%;
    background: var(--guia-panel);
    border-left: 1px solid var(--guia-border);
    animation: guia-slide-in 0.25s ease;
}

.guia-library__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--guia-header-dark);
    color: #fff;
}

.guia-library__header-title {
    display: flex;
    align-items: center;
}

.guia-library__title {
    color: #fff;
    font-weight: 600;
}

.guia-library__count {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    border-radius: var(--guia-radius) !important;
}

.guia-library__header .mud-icon-button {
    color: #fff;
}

.guia-library__search {
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--guia-border);
}

.guia-library__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
    max-height: 92px;
    overflow-y: auto;
}

/* Custom tag filter chips: fully controlled here (no MudChip selection state),
   so the color is always correct and clicking an active tag toggles it off. */
.guia-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    border-radius: 14px;
    border: 1px solid var(--guia-primary);
    color: var(--guia-primary);
    background: #fff;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, color 0.12s;
}

.guia-tag:hover {
    background: #eef2f9;
}

.guia-tag--active {
    background: var(--guia-primary);
    color: #fff;
}

.guia-tag--active:hover {
    background: #345d99;
}

.guia-library__list {
    flex: 1;
    overflow-y: auto;
    padding: 8px 12px 16px;
}

.guia-library__list::-webkit-scrollbar {
    width: 10px;
}

.guia-library__list::-webkit-scrollbar-thumb {
    background: #c3c9d2;
    border-radius: 6px;
}

.guia-library__loading,
.guia-library__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #9a9ab0;
    padding: 40px 16px;
}

.guia-library__panels {
    margin-bottom: 6px;
}

.guia-library__entry {
    border: 1px solid var(--guia-border);
    border-radius: var(--guia-radius) !important;
    background: #fff;
}

.guia-library__entry:hover {
    background: #f7f9fc;
}

.guia-library__entry-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.guia-library__entry-title {
    color: #2b2b3a;
    font-weight: 600;
}

.guia-library__entry-summary {
    color: #8a8a9e;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.guia-library__entry-content {
    color: #4a4a5e;
    background: #f7f9fc;
    border-radius: var(--guia-radius);
    padding: 10px 12px;
    border: 1px solid var(--guia-border);
}

.guia-library__entry-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--guia-border);
}

.guia-library__entry-date {
    color: #a0a0b4;
}

/* responsive: stack on small screens */
@media (max-width: 1100px) {
    .guia-layout {
        flex-direction: column;
        height: auto;
        min-height: calc(100vh - 64px);
    }

    .guia-chat {
        border-right: none;
        border-bottom: 1px solid var(--guia-border);
        height: 70vh;
    }

    .guia-library {
        flex: 1 1 auto;
        width: 100%;
        border-left: none;
        height: 60vh;
    }

    .guia-chat__messages,
    .guia-chat__composer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* --------------------------------------------------------------------------
   Add knowledge page (kept as a standalone classic form)
   -------------------------------------------------------------------------- */
.guia-add {
    max-width: 820px;
    margin: 20px auto;
    padding: 0 16px;
}

.guia-add__hero {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--guia-radius) var(--guia-radius) 0 0;
    background: var(--guia-header);
    color: #fff;
}

.guia-add__hero-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--guia-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
}

.guia-add__hero-title {
    color: #fff;
    font-weight: 600;
}

.guia-add__hero-subtitle {
    color: rgba(255, 255, 255, 0.85);
}

.guia-add__card {
    border-radius: 0 0 var(--guia-radius) var(--guia-radius) !important;
    border: 1px solid var(--guia-border);
    border-top: none;
}

.guia-add__result {
    margin-top: 16px;
    border-radius: var(--guia-radius) !important;
    border: 1px solid var(--guia-border);
    animation: guia-fade-in 0.3s ease;
}

.guia-add__result-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: #eaf5ea;
    color: #2e6b2e;
    font-weight: 600;
    border-bottom: 1px solid #bcdcbc;
}

.guia-add__tag {
    margin: 4px 4px 0 0 !important;
    border-radius: var(--guia-radius) !important;
}

/* --------------------------------------------------------------------------
   Markdown rendering inside AI bubbles (code, bold, lists, etc.)
   -------------------------------------------------------------------------- */
.guia-markdown {
    line-height: 1.55;
    word-break: break-word;
}

.guia-markdown p {
    margin: 0 0 8px;
}

.guia-markdown p:last-child {
    margin-bottom: 0;
}

.guia-markdown strong {
    font-weight: 700;
    color: #1f2430;
}

.guia-markdown h1,
.guia-markdown h2,
.guia-markdown h3,
.guia-markdown h4 {
    margin: 10px 0 6px;
    font-weight: 700;
    line-height: 1.2;
}

.guia-markdown h1 { font-size: 1.25rem; }
.guia-markdown h2 { font-size: 1.15rem; }
.guia-markdown h3 { font-size: 1.05rem; }

.guia-markdown ul,
.guia-markdown ol {
    margin: 4px 0 8px;
    padding-left: 22px;
}

.guia-markdown li {
    margin: 2px 0;
}

/* inline code */
.guia-markdown code {
    background: #eef0f4;
    color: #b5316b;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: "Cascadia Code", "Consolas", "Courier New", monospace;
    font-size: 0.88em;
}

/* fenced code blocks */
.guia-markdown pre {
    background: #1e2430;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 14px 16px;
    margin: 8px 0;
    overflow-x: auto;
    position: relative;
    border: 1px solid #2c3444;
}

/* copy button on code blocks */
.guia-copy-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 3px 10px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #cfd6e4;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s;
}

.guia-markdown pre:hover .guia-copy-btn {
    opacity: 1;
}

.guia-copy-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

.guia-copy-btn--done {
    color: #b6f0c0;
    border-color: rgba(120, 220, 140, 0.5);
    opacity: 1 !important;
}

.guia-markdown pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: 0.86rem;
    line-height: 1.5;
}

.guia-markdown a {
    color: var(--guia-primary);
    text-decoration: underline;
}

.guia-markdown blockquote {
    margin: 8px 0;
    padding: 6px 14px;
    border-left: 3px solid var(--guia-primary);
    background: #f4f6fa;
    color: #4a4a5e;
}

.guia-markdown table {
    border-collapse: collapse;
    margin: 8px 0;
    width: 100%;
}

.guia-markdown th,
.guia-markdown td {
    border: 1px solid var(--guia-border);
    padding: 6px 10px;
    text-align: left;
}

.guia-markdown th {
    background: #f1f3f6;
}

/* --------------------------------------------------------------------------
   Animations
   -------------------------------------------------------------------------- */
@keyframes guia-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes guia-bounce {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-6px);
        opacity: 1;
    }
}

@keyframes guia-slide-in {
    from {
        opacity: 0;
        transform: translateX(16px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}