/* ==========================================================================
   BANG REDI — Chatbot layanan informasi
   Tata letak dua kolom: daftar sesi di kiri, percakapan di kanan.
   Sidebar berubah menjadi panel geser pada layar kecil.
   ========================================================================== */

.redi-shell {
    display: grid;
    grid-template-columns: 288px 1fr;
    height: calc(100vh - 72px);
    background-color: var(--claude-bg-light);
    overflow: hidden;
}

html[data-bs-theme="dark"] .redi-shell { background-color: var(--claude-bg-dark); }

/* ---------- Sidebar ---------- */
.redi-sidebar {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--claude-border-light);
    background-color: var(--claude-sidebar-light);
    min-height: 0;
}

html[data-bs-theme="dark"] .redi-sidebar {
    background-color: var(--claude-sidebar-dark);
    border-right-color: var(--claude-border-dark);
}

.redi-sidebar__head { padding: 1rem; }

.redi-sidebar__list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0 .75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.redi-sidebar__foot {
    padding: .75rem 1rem;
    border-top: 1px solid var(--claude-border-light);
}

html[data-bs-theme="dark"] .redi-sidebar__foot { border-top-color: var(--claude-border-dark); }

.redi-provider-chip {
    font-size: .72rem;
    letter-spacing: .02em;
    text-transform: uppercase;
    opacity: .65;
}

.redi-empty-hint {
    font-size: .85rem;
    opacity: .6;
    padding: 1rem .5rem;
    line-height: 1.5;
}

.redi-session {
    display: flex;
    align-items: center;
    border-radius: .5rem;
    transition: background-color .15s ease;
}

.redi-session:hover { background-color: rgba(217, 119, 6, .08); }
.redi-session.is-active { background-color: rgba(217, 119, 6, .16); }

.redi-session__main {
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    background: none;
    border: 0;
    padding: .55rem .6rem;
    color: inherit;
    border-radius: .5rem;
}

.redi-session__title {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.redi-session__meta {
    display: block;
    font-size: .7rem;
    opacity: .55;
    margin-top: .1rem;
}

.redi-session__actions {
    display: flex;
    gap: .1rem;
    padding-right: .35rem;
    opacity: 0;
    transition: opacity .15s ease;
}

.redi-session:hover .redi-session__actions,
.redi-session.is-active .redi-session__actions { opacity: 1; }

/* Aksi tetap terlihat pada perangkat sentuh yang tidak mengenal status hover. */
@media (hover: none) {
    .redi-session__actions { opacity: 1; }
}

.redi-icon-btn {
    background: none;
    border: 0;
    color: inherit;
    opacity: .6;
    padding: .3rem;
    border-radius: .35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity .15s ease, background-color .15s ease;
}

.redi-icon-btn:hover { opacity: 1; background-color: rgba(0, 0, 0, .06); }
html[data-bs-theme="dark"] .redi-icon-btn:hover { background-color: rgba(255, 255, 255, .1); }
.redi-icon-btn--danger:hover { color: #dc3545; }

/* ---------- Header ---------- */
.redi-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.redi-header {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--claude-border-light);
    flex: 0 0 auto;
}

html[data-bs-theme="dark"] .redi-header { border-bottom-color: var(--claude-border-dark); }

.redi-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--claude-accent), #b45309);
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    flex: 0 0 auto;
}

.redi-avatar--lg { width: 64px; height: 64px; font-size: 1.2rem; margin-bottom: 1rem; }

.redi-header__text { flex: 1 1 auto; min-width: 0; }
.redi-header__name { font-size: 1rem; font-weight: 600; margin: 0; }
.redi-header__role { font-size: .78rem; opacity: .6; margin: 0; }

.redi-status {
    font-size: .75rem;
    opacity: .7;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.redi-status__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background-color: #16a34a;
}

/* ---------- Percakapan ---------- */
.redi-thread {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.5rem 1.25rem;
    scroll-behavior: smooth;
}

.redi-welcome {
    max-width: 640px;
    margin: 6vh auto 0;
    text-align: center;
}

.redi-welcome h2 {
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 1.6;
    opacity: .85;
    margin-bottom: 2rem;
}

.redi-suggestions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .6rem;
}

.redi-suggestion {
    text-align: left;
    font-size: .85rem;
    line-height: 1.45;
    padding: .75rem .9rem;
    border-radius: .65rem;
    border: 1px solid var(--claude-border-light);
    background: none;
    color: inherit;
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

html[data-bs-theme="dark"] .redi-suggestion { border-color: var(--claude-border-dark); }
.redi-suggestion:hover { border-color: var(--claude-accent); transform: translateY(-1px); }

.redi-msg {
    display: flex;
    gap: .85rem;
    max-width: 860px;
    margin: 0 auto 1.5rem;
}

.redi-msg__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: .7rem;
    font-weight: 700;
    flex: 0 0 auto;
    background-color: var(--claude-border-light);
    color: var(--claude-text-light);
}

html[data-bs-theme="dark"] .redi-msg__avatar {
    background-color: var(--claude-border-dark);
    color: var(--claude-text-dark);
}

.redi-msg--assistant .redi-msg__avatar {
    background: linear-gradient(135deg, var(--claude-accent), #b45309);
    color: #fff;
}

.redi-msg__body { min-width: 0; flex: 1 1 auto; padding-top: .25rem; }
.redi-msg__text { white-space: pre-wrap; line-height: 1.65; }

/* ---------- Lampiran ---------- */
.redi-attachments { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

.redi-attachment-img {
    max-width: 220px;
    max-height: 220px;
    border-radius: .5rem;
    border: 1px solid var(--claude-border-light);
    object-fit: cover;
}

.redi-attachment-file {
    font-size: .8rem;
    padding: .35rem .6rem;
    border-radius: .4rem;
    border: 1px solid var(--claude-border-light);
    text-decoration: none;
    color: inherit;
}

.redi-attachment-file:hover { border-color: var(--claude-accent); }

/* ---------- Jejak pemanggilan alat ---------- */
.redi-tools { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .65rem; }

.redi-tool-chip {
    font-size: .72rem;
    padding: .2rem .55rem;
    border-radius: 999px;
    background-color: rgba(217, 119, 6, .12);
    color: var(--claude-accent);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.redi-spinner {
    width: 9px; height: 9px;
    border: 1.5px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: redi-spin .7s linear infinite;
}

@keyframes redi-spin { to { transform: rotate(360deg); } }

.redi-typing { display: inline-flex; gap: .28rem; padding: .5rem 0; }

.redi-typing span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background-color: currentColor;
    opacity: .35;
    animation: redi-bounce 1.3s infinite ease-in-out;
}

.redi-typing span:nth-child(2) { animation-delay: .18s; }
.redi-typing span:nth-child(3) { animation-delay: .36s; }

@keyframes redi-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .35; }
    30% { transform: translateY(-5px); opacity: .9; }
}

/* ---------- Komposer ---------- */
.redi-composer {
    flex: 0 0 auto;
    padding: .85rem 1.25rem 1rem;
    border-top: 1px solid var(--claude-border-light);
}

html[data-bs-theme="dark"] .redi-composer { border-top-color: var(--claude-border-dark); }

.redi-composer__row {
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    border: 1px solid var(--claude-border-light);
    border-radius: .85rem;
    padding: .45rem .55rem;
    background-color: #fff;
    transition: border-color .15s ease;
}

html[data-bs-theme="dark"] .redi-composer__row {
    background-color: #202020;
    border-color: var(--claude-border-dark);
}

.redi-composer__row:focus-within { border-color: var(--claude-accent); }

.redi-attach { cursor: pointer; flex: 0 0 auto; margin-bottom: .15rem; }

.redi-input {
    flex: 1 1 auto;
    border: 0;
    outline: none;
    background: transparent;
    color: inherit;
    resize: none;
    max-height: 180px;
    min-height: 38px;
    padding: .45rem .25rem;
    font-size: .92rem;
    line-height: 1.5;
    font-family: inherit;
}

.redi-send {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    border-radius: .55rem;
    border: 0;
    display: grid;
    place-items: center;
    background-color: var(--claude-accent);
    color: #fff;
    cursor: pointer;
    transition: opacity .15s ease;
}

.redi-send:disabled { opacity: .35; cursor: not-allowed; }
.redi-send--stop { background-color: #dc3545; }

.redi-pending {
    max-width: 860px;
    margin: 0 auto .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.redi-pending__item {
    font-size: .78rem;
    padding: .25rem .5rem;
    border-radius: .4rem;
    border: 1px solid var(--claude-border-light);
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.redi-pending__remove {
    border: 0;
    background: none;
    color: inherit;
    opacity: .6;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
}

.redi-pending__remove:hover { opacity: 1; color: #dc3545; }

.redi-error {
    max-width: 860px;
    margin: 0 auto .5rem;
    font-size: .82rem;
    color: #dc3545;
    background-color: rgba(220, 53, 69, .08);
    border-radius: .4rem;
    padding: .45rem .7rem;
}

.redi-disclaimer {
    max-width: 860px;
    margin: .5rem auto 0;
    font-size: .72rem;
    opacity: .5;
    text-align: center;
    line-height: 1.45;
}

/* ==========================================================================
   Rendering Markdown jawaban chatbot
   ========================================================================== */

.redi-markdown { line-height: 1.7; font-size: .93rem; }
.redi-markdown > *:first-child { margin-top: 0; }
.redi-markdown > *:last-child { margin-bottom: 0; }

.redi-markdown h1, .redi-markdown h2, .redi-markdown h3,
.redi-markdown h4, .redi-markdown h5, .redi-markdown h6 {
    font-weight: 600;
    margin: 1.25rem 0 .6rem;
    line-height: 1.35;
}

.redi-markdown h1 { font-size: 1.3rem; }
.redi-markdown h2 { font-size: 1.15rem; }
.redi-markdown h3 { font-size: 1.02rem; }
.redi-markdown h4, .redi-markdown h5, .redi-markdown h6 { font-size: .95rem; }

.redi-markdown p { margin: 0 0 .8rem; }
.redi-markdown ul, .redi-markdown ol { margin: 0 0 .8rem; padding-left: 1.35rem; }
.redi-markdown li { margin-bottom: .3rem; }
.redi-markdown li > ul, .redi-markdown li > ol { margin-top: .3rem; }

.redi-markdown a { color: var(--claude-accent); text-decoration: underline; text-underline-offset: 2px; }

.redi-markdown blockquote {
    margin: 0 0 .8rem;
    padding: .3rem 0 .3rem .9rem;
    border-left: 3px solid var(--claude-accent);
    opacity: .85;
}

.redi-markdown code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
    padding: .12em .38em;
    border-radius: .3rem;
    background-color: rgba(0, 0, 0, .06);
}

html[data-bs-theme="dark"] .redi-markdown code { background-color: rgba(255, 255, 255, .1); }

.redi-markdown pre {
    margin: 0 0 .9rem;
    padding: .85rem 1rem;
    border-radius: .55rem;
    overflow-x: auto;
    background-color: #1e1e1e;
    color: #e6e6e6;
}

.redi-markdown pre code { background: none; padding: 0; font-size: .84rem; line-height: 1.55; }

/* Tabel dibungkus agar dapat digulir mendatar tanpa merusak lebar halaman. */
.redi-markdown .md-table-wrap { overflow-x: auto; margin-bottom: .9rem; }

.redi-markdown table { border-collapse: collapse; width: 100%; font-size: .86rem; }

.redi-markdown th, .redi-markdown td {
    border: 1px solid var(--claude-border-light);
    padding: .45rem .65rem;
    text-align: left;
    vertical-align: top;
}

html[data-bs-theme="dark"] .redi-markdown th,
html[data-bs-theme="dark"] .redi-markdown td { border-color: var(--claude-border-dark); }

.redi-markdown th { background-color: rgba(217, 119, 6, .1); font-weight: 600; white-space: nowrap; }

.redi-markdown img, .redi-markdown video, .redi-markdown iframe {
    max-width: 100%;
    height: auto;
    border-radius: .5rem;
    margin: .3rem 0 .8rem;
}

.redi-markdown audio { width: 100%; margin: .3rem 0 .8rem; }
.redi-markdown hr { border: 0; border-top: 1px solid var(--claude-border-light); margin: 1.2rem 0; }

/* ==========================================================================
   Responsif
   ========================================================================== */

@media (max-width: 991.98px) {
    .redi-shell { grid-template-columns: 1fr; }

    .redi-sidebar {
        position: fixed;
        inset: 72px auto 0 0;
        width: 280px;
        z-index: 1040;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 4px 0 18px rgba(0, 0, 0, .12);
    }

    .redi-sidebar.is-open { transform: translateX(0); }

    .redi-thread { padding: 1rem .85rem; }
    .redi-msg { gap: .6rem; margin-bottom: 1.15rem; }
    .redi-composer { padding: .65rem .85rem .8rem; }
    .redi-welcome { margin-top: 3vh; }
}

/* Hormati preferensi pengguna yang membatasi animasi. */
@media (prefers-reduced-motion: reduce) {
    .redi-thread { scroll-behavior: auto; }
    .redi-spinner, .redi-typing span { animation: none; }
    .redi-sidebar { transition: none; }
    .redi-suggestion:hover { transform: none; }
}