+menu of checkboxes. */
.right-rail .upload-department-dropdown {
position: relative;
}
.right-rail .upload-department-summary {
list-style: none;
min-height: 38px;
display: inline-flex;
align-items: center;
width: 100%;
border: 1px solid var(--line);
border-radius: 10px;
background: rgba(10, 18, 36, 0.92);
color: #eaf3ff;
padding: 0.45rem 0.62rem;
cursor: pointer;
font-size: 0.84rem;
}
.right-rail .upload-department-summary::-webkit-details-marker { display: none; }
.right-rail .upload-department-dropdown[open] .upload-department-summary {
border-color: rgba(120, 196, 255, 0.75);
}
.right-rail .upload-department-menu {
position: absolute;
right: 0;
z-index: 60;
margin-top: 0.3rem;
width: 100%;
max-height: 220px;
overflow: auto;
border: 1px solid var(--line);
border-radius: 10px;
background: rgba(10, 18, 36, 0.98);
color: #eaf3ff;
padding: 0.4rem 0.5rem;
display: grid;
gap: 0.32rem;
}
.right-rail .upload-department-menu label {
display: inline-flex;
align-items: center;
gap: 0.45rem;
font-size: 0.84rem;
}
/* Yükle button (admin/brain upload card uses ``.uc-submit``, chat
uses ``#file-add-btn`` — both styled the same gradient send-btn). */
.right-rail .send-btn {
width: 100%;
border-radius: 10px;
background: linear-gradient(135deg, #7cf2ff 0%, #12caff 52%, #3a8dff 100%);
border: none;
color: #06192f;
font-weight: 700;
padding: 0.55rem 0.9rem;
cursor: pointer;
font-size: 0.9rem;
}
.right-rail .send-btn:disabled {
opacity: 0.55;
cursor: wait;
}
/* ---------- Bağlı Kaynaklar — unified connector list ----------
One card, one list. Every provider (Google Drive, Gmail, and the
"Yakında geliyor" placeholders) renders as the SAME uniform row.
Google Drive additionally gets an expandable detail section (its file
browser) directly below its row when connected — see .connector-detail
below. Row-only providers have no detail section. */
.right-rail .connector-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.right-rail .connector-loading,
.right-rail .connector-error {
font-size: 0.82rem;
color: rgba(234, 243, 255, 0.6);
margin: 0;
}
.right-rail .connector-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.right-rail .connector-row {
/* margin:0 defeats admin.css's bare `li { margin: 0.35rem 0 }` rule
(admin.css:1829) which would otherwise add extra vertical space
between rows on the admin page only. */
margin: 0;
display: flex;
align-items: center;
gap: 0.55rem;
padding: 0.45rem 0.55rem;
border: 1px solid var(--line);
border-radius: 8px;
background: rgba(255, 255, 255, 0.02);
min-width: 0;
}
.right-rail .connector-row.is-connected {
background: rgba(46, 182, 125, 0.08);
border-color: rgba(46, 182, 125, 0.35);
}
.right-rail .connector-row.is-coming-soon {
opacity: 0.7;
}
/* Drive's row becomes a clickable toggle for its detail section once
connected (is-toggle is set by drive.js refresh()). */
.right-rail .connector-row.is-toggle {
cursor: pointer;
}
/* Caret only shows on a row that can toggle a detail section (Drive,
connected). Hidden for every other row so they stay plain. */
.right-rail .connector-row-caret {
display: none;
flex: 0 0 auto;
width: 18px;
color: #9ce6ff;
font-size: 1.2rem;
line-height: 1;
transition: transform 140ms ease;
}
.right-rail .connector-row.is-toggle .connector-row-caret {
display: inline-flex;
align-items: center;
justify-content: center;
}
.right-rail .connector-row.is-open .connector-row-caret {
transform: rotate(90deg);
}
.right-rail .connector-row-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex: 0 0 auto;
}
.right-rail .connector-row-label {
flex: 1 1 auto;
font-size: 0.88rem;
color: #eaf3ff;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.right-rail .connector-row-action {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: flex-end;
min-width: 90px;
}
.right-rail .connector-soon,
.right-rail .connector-row-status {
font-size: 0.75rem;
color: rgba(234, 243, 255, 0.55);
}
.right-rail .connector-soon { font-style: italic; }
.right-rail .connector-row-connect-btn,
.right-rail .connector-row-disconnect-btn {
padding: 0.25rem 0.65rem;
font-size: 0.78rem;
line-height: 1.1;
white-space: nowrap;
border: 1px solid var(--line);
border-radius: 8px;
background: rgba(10, 18, 36, 0.92);
color: #eaf3ff;
cursor: pointer;
}
.right-rail .connector-row-connect-btn {
border-color: rgba(116, 170, 255, 0.5);
background: linear-gradient(135deg, rgba(124, 242, 255, 0.18) 0%, rgba(18, 202, 255, 0.14) 52%, rgba(58, 141, 255, 0.2) 100%);
}
.right-rail .connector-row-disconnect-btn {
color: rgba(234, 243, 255, 0.8);
}
/* Connected Gmail stacks two buttons (disconnect + purge) in the action
slot. Stretch them so both share the slot's width and read as a pair. */
.right-rail .connector-row-actions-stack {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.3rem;
width: 100%;
}
.right-rail .connector-row-actions-stack .connector-row-disconnect-btn {
width: 100%;
text-align: center;
}
.right-rail .connector-row-purge-btn {
width: 100%;
padding: 0.25rem 0.65rem;
font-size: 0.78rem;
line-height: 1.1;
white-space: nowrap;
text-align: center;
border: 1px solid rgba(255, 90, 90, 0.7);
border-radius: 8px;
background: rgba(40, 10, 12, 0.85);
color: #ff8d8d;
font-weight: 600;
cursor: pointer;
}
.right-rail .connector-row-purge-btn:hover {
border-color: rgba(255, 120, 120, 0.95);
background: rgba(70, 14, 16, 0.95);
color: #ffb3b3;
}
/* ---------- Drive detail section (file browser, connected only) ----------
The expandable region that hangs off the Drive row. Holds the whole
Drive file browser (.drive-header, .drive-root-picker, .drive-search,
.drive-breadcrumbs, .drive-list, .drive-footer — all styled further
below). Visually set apart from the flat rows so it reads as Drive's
"own section". */
.right-rail .connector-detail {
margin: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 0.6rem;
border: 1px solid rgba(116, 170, 255, 0.22);
border-radius: 10px;
background: rgba(10, 18, 36, 0.55);
min-width: 0;
}
/* display:flex above would otherwise beat the [hidden] UA rule. */
.right-rail .connector-detail[hidden] {
display: none;
}
/* ---------- Connector empty state (e.g. Google Drive "Bağlan") ----------
Ported from chat's styles.css so the same centered, weighted text
renders on admin & brain (which don't load styles.css). */
.right-rail .connector-empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 0.45rem;
padding: 0.6rem 0.4rem 0.4rem;
}
.right-rail .connector-empty-icon {
width: 38px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.06);
border-radius: 10px;
}
.right-rail .connector-empty-title {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
color: #eaf3ff;
}
.right-rail .connector-empty-sub {
margin: 0;
font-size: 0.82rem;
color: rgba(234, 243, 255, 0.62);
line-height: 1.35;
}
.right-rail .connector-connect-btn {
margin-top: 0.4rem;
width: 100%;
}
/* =====================================================================
FULL DRIVE / CONNECTOR VIEW
Ported from styles.css so admin & brain (which don't load styles.css)
render the exact same Drive connected view as chat. Every selector is
scoped under .right-rail so it wins over any legacy bare rule on chat.
===================================================================== */
/* ---------- Ghost button base (needed by .drive-disconnect-btn,
.drive-load-more; admin/brain pages have no .ghost-btn rule). ---- */
.right-rail .ghost-btn {
border-radius: 10px;
border: 1px solid var(--line);
background: rgba(14, 28, 52, 0.88);
color: var(--text, #eaf3ff);
padding: 0.45rem 0.75rem;
font: inherit;
cursor: pointer;
transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease, filter 150ms ease;
}
.right-rail .ghost-btn:not(:disabled):hover {
filter: var(--button-hover-filter, brightness(1.1));
border-color: var(--button-hover-border, rgba(120, 196, 255, 0.55));
}
/* ---------- Connector card header / tabs / slot ---------- */
.right-rail .connector-card-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.right-rail .connector-tabs {
display: flex;
gap: 0.3rem;
border-bottom: 1px solid var(--line);
padding-bottom: 0.35rem;
margin-bottom: 0.25rem;
}
.right-rail .connector-tab {
background: transparent;
border: none;
color: rgba(234, 243, 255, 0.62);
padding: 0.25rem 0.5rem;
font-size: 0.82rem;
cursor: pointer;
border-radius: 6px;
}
.right-rail .connector-tab.is-active {
background: rgba(96, 165, 250, 0.2);
color: #eaf3ff;
}
.right-rail .connector-slot {
display: flex;
flex-direction: column;
gap: 0.5rem;
min-width: 0;
}
/* ---------- Connector error block ---------- */
.right-rail .connector-error {
font-size: 0.82rem;
color: rgba(255, 200, 200, 0.92);
display: flex;
flex-direction: column;
gap: 0.4rem;
margin: 0;
}
.right-rail .connector-error p { margin: 0; }
/* ---------- Drive header (account email + disconnect) ---------- */
.right-rail .drive-header {
display: flex;
align-items: center;
/* Only the account row lives here now (disconnect moved to toolbar);
letting it stretch end-to-end matches the visual the user asked
for: email reads all the way to the card border. */
justify-content: flex-start;
gap: 0.4rem;
font-size: 0.8rem;
min-width: 0;
}
.right-rail .drive-account {
display: flex;
align-items: center;
gap: 0.4rem;
min-width: 0;
/* The disconnect button moved up into the connector-card-toolbar,
so the account row now has the entire card width to itself.
flex:1 lets the email span to the card's right edge before
ellipsis kicks in. */
flex: 1 1 auto;
}
.right-rail .drive-account-icon {
display: inline-flex;
flex: 0 0 auto;
}
.right-rail .drive-account-email {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
color: rgba(234, 243, 255, 0.82);
/* Two things kept clipping this short even after the disconnect
button moved out of the row:
1. styles.css (chat-only) has a bare ``.drive-account-email
{ max-width: 160px }`` rule that survives because this
override didn't declare max-width — bumped to ``none``
here so the cascade can't reach back to it.
2. .drive-account was display:inline-flex (from styles.css);
``flex:1 1 auto`` only works once the row above is a real
flex container — see the .right-rail .drive-account rule. */
flex: 1 1 auto;
min-width: 0;
max-width: none;
}
.right-rail .drive-disconnect-btn {
font-size: 0.72rem;
padding: 0.2rem 0.45rem;
color: rgba(234, 243, 255, 0.7);
}
/* ---------- Gmail connected actions (disconnect + purge) ----------
Two equal-size, stacked buttons. Both share .gmail-action-btn so they
line up identically; .gmail-disconnect-btn is the quiet ghost variant
and .gmail-purge-btn is the red destructive one (mirrors the brain
panel's "Beyni Sıfırla"). */
.right-rail .connector-actions {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.4rem;
margin-top: 0.25rem;
}
.right-rail .gmail-action-btn {
width: 100%;
box-sizing: border-box;
font: inherit;
font-size: 0.72rem;
padding: 0.32rem 0.5rem;
border-radius: 10px;
text-align: center;
cursor: pointer;
transition: background-color 150ms ease, border-color 150ms ease,
color 150ms ease, filter 150ms ease;
}
.right-rail .gmail-disconnect-btn {
/* Override the compact .drive-disconnect-btn padding so it matches the
purge button's footprint exactly. */
padding: 0.32rem 0.5rem;
color: rgba(234, 243, 255, 0.7);
}
.right-rail .gmail-purge-btn {
border: 1px solid rgba(255, 90, 90, 0.7);
background: linear-gradient(135deg, #ff8888 0%, #ff5252 50%, #d63838 100%);
color: #1a0606;
box-shadow: 0 6px 18px rgba(214, 56, 56, 0.32);
font-weight: 600;
}
.right-rail .gmail-purge-btn:not(:disabled):hover {
filter: brightness(1.06);
border-color: rgba(255, 90, 90, 0.85);
}
/* ---------- Drive root picker (Drive scope selector) ---------- */
.right-rail .drive-root-picker {
width: 100%;
border: 1px solid var(--line);
background: rgba(10, 18, 36, 0.92);
color: #eaf3ff;
border-radius: 8px;
padding: 0.35rem 0.45rem;
font-size: 0.82rem;
outline: none;
box-sizing: border-box;
margin-bottom: 0.4rem;
cursor: pointer;
}
.right-rail .drive-root-picker:focus {
border-color: rgba(96, 165, 250, 0.55);
}
/* ---------- Drive search input ---------- */
.right-rail .drive-search {
width: 100%;
border: 1px solid var(--line);
background: rgba(10, 18, 36, 0.92);
color: #eaf3ff;
border-radius: 8px;
padding: 0.4rem 0.55rem;
font-size: 0.82rem;
outline: none;
box-sizing: border-box;
}
.right-rail .drive-search:focus {
border-color: rgba(96, 165, 250, 0.55);
}
/* ---------- Drive breadcrumbs ---------- */
.right-rail .drive-breadcrumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.2rem;
font-size: 0.78rem;
color: rgba(234, 243, 255, 0.65);
min-height: 18px;
}
.right-rail .drive-crumb {
background: transparent;
border: none;
padding: 0.1rem 0.25rem;
color: rgba(96, 165, 250, 0.95);
cursor: pointer;
font-size: 0.78rem;
border-radius: 4px;
max-width: 140px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.right-rail .drive-crumb:hover:not(.is-current) {
background: rgba(96, 165, 250, 0.12);
}
.right-rail .drive-crumb.is-current {
color: rgba(234, 243, 255, 0.85);
cursor: default;
}
.right-rail .drive-crumb-sep {
color: rgba(234, 243, 255, 0.4);
padding: 0 0.05rem;
}
/* ---------- Drive list (THE BIG ONE: file rows + Sisteme ekle) ----------
The card itself is laid out as a flex column (see .connector-card +
.connector-host + .connector-slot rules below), so making this list
grow with flex:1 lets it eat all the leftover height in the card.
That kills the dead band at the bottom of the card the user pointed
out — files now run all the way down to the border, and any overflow
scrolls inside this list rather than being clipped mid-row. */
.right-rail .drive-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.15rem;
/* Short, internally scrollable — the user explicitly wants this
behaviour (the rail's other cards stay visible while files
scroll inside this box). Matches chat's styles.css cap. */
max-height: 340px;
overflow-y: auto;
border-top: 1px solid var(--line);
padding-top: 0.35rem;
}
.right-rail .drive-row {
display: grid;
grid-template-columns: 22px 1fr auto;
align-items: center;
gap: 0.45rem;
padding: 0.32rem 0.2rem;
border-radius: 6px;
/* Defeat admin.css's bare `li { margin: 0.35rem 0 }` rule that would
otherwise add extra vertical space between rows on admin only. */
margin: 0;
}
.right-rail .drive-row:hover {
background: rgba(96, 165, 250, 0.07);
}
.right-rail .drive-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.right-rail .drive-row-title {
background: transparent;
border: none;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
cursor: pointer;
min-width: 0;
}
.right-rail .drive-row-title[disabled] {
cursor: default;
}
.right-rail .drive-row-name {
color: #eaf3ff;
font-size: 0.84rem;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.right-rail .drive-row-sub {
font-size: 0.7rem;
color: rgba(234, 243, 255, 0.55);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* "Sisteme ekle" button — small inline send-btn on each Drive row. */
.right-rail .drive-row-import {
width: auto;
font-size: 0.74rem;
padding: 0.25rem 0.55rem;
white-space: nowrap;
}
.right-rail .drive-row-status {
font-size: 0.72rem;
white-space: nowrap;
padding: 0.2rem 0.4rem;
border-radius: 999px;
}
.right-rail .drive-row-status.is-loading {
color: rgba(234, 243, 255, 0.78);
background: rgba(96, 165, 250, 0.18);
}
.right-rail .drive-row-status.is-ok {
color: #bbf7d0;
background: rgba(34, 197, 94, 0.18);
}
.right-rail .drive-row-status.is-error {
color: #fecaca;
background: rgba(239, 68, 68, 0.18);
cursor: help;
}
.right-rail .drive-row-status.is-muted {
color: rgba(234, 243, 255, 0.45);
}
/* ---------- Drive empty / footer / load-more ---------- */
.right-rail .drive-empty {
text-align: center;
font-size: 0.82rem;
color: rgba(234, 243, 255, 0.55);
padding: 0.6rem 0.4rem;
}
.right-rail .drive-footer {
font-size: 0.78rem;
color: rgba(234, 243, 255, 0.55);
display: flex;
justify-content: center;
padding: 0.2rem 0;
min-height: 22px;
}
/* Drive's first page usually fits — no "Load more" button means the
footer renders as an empty that previously reserved ~22px +
slot gap below the scrollable list, producing the dead band the
user pointed out between the file list and the card's bottom
border. Collapsing the empty footer (and the .connector-slot gap
that surrounds it) puts the list flush against the card edge while
keeping the footer healthy on subsequent pages when it actually
holds a button. */
.right-rail .drive-footer:empty {
display: none;
}
.right-rail .drive-load-more {
font-size: 0.78rem;
padding: 0.2rem 0.55rem;
}
/* ---------- Collapsible cards (Doküman Ekle, Bağlı Kaynaklar,
Diğer Bağlayıcılar). The section-title is the click target. ---------- */
.right-rail .context-card.is-collapsible > .section-title {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
}
.right-rail .context-card.is-collapsible > .section-title::after {
content: "\25BE"; /* ▾ */
display: inline-block;
margin-left: auto;
font-size: 1.2rem;
line-height: 1;
opacity: 0.8;
color: var(--text-muted, #94a3c4);
transition: transform 0.18s ease;
}
.right-rail .context-card.is-collapsed > .section-title::after {
transform: rotate(-90deg);
}
.right-rail .context-card.is-collapsible > .section-title:hover::after {
opacity: 1;
}
.right-rail .context-card.is-collapsed > *:not(.section-title) {
display: none !important;
}
.right-rail .context-card.is-collapsed {
padding-bottom: 0.6rem;
}
/* Hide the refresh button while the connector is disconnected — matches
chat's behavior (nothing to refresh before OAuth). */
.right-rail .connector-card.is-disconnected .connector-card-toolbar {
display: none;
}
/* =====================================================================
UPLOADED DOCS LIST
Ported from chat's styles.css so admin & brain show the same docs
list inside the upload card (per the user's "the docs can be shown
as well" request).
===================================================================== */
/* ---- Action row above the list (refresh button) ---- */
.right-rail .upload-actions {
margin-top: 0.55rem;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.76rem;
color: var(--muted, rgba(234, 243, 255, 0.62));
}
.right-rail .upload-actions label {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-right: auto;
}
.right-rail .refresh-files-btn {
width: 30px;
height: 30px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1rem;
line-height: 1;
padding: 0;
margin-left: auto;
}
.right-rail .refresh-files-btn.is-loading {
pointer-events: none;
opacity: 0.75;
}
.right-rail .refresh-files-btn.is-loading .refresh-icon {
display: inline-block;
animation: spin-refresh 0.9s linear infinite;
}
@keyframes spin-refresh {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ---- The list itself ---- */
/* ---------- Resizable documents box ----------
"Yüklenen Dokümanlar" carries a CUSTOM resize handle: a small pill centered
on its bottom border showing stacked ▲▼. Dragging it (wireDocumentsResize)
sets the box height. We use flex-column so the title + actions stay pinned and
the inner .documents-scroll absorbs the remaining height and scrolls its own
overflow. overflow is visible on the card so the handle straddling the bottom
border isn't clipped. The list keeps its normal `display: grid` layout — it is
a plain block child of .documents-scroll, NOT a flex item, because turning a
grid into a flex item distorts the row tracks. */
.right-rail .documents-card {
position: relative;
display: flex;
flex-direction: column;
height: 320px;
min-height: 140px;
max-height: 85vh;
overflow: visible;
}
.right-rail .documents-card .documents-scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
}
/* Inside the scroller the list flows naturally — drop its own height cap. */
.right-rail .documents-card .uploaded-file-list {
max-height: none;
overflow: visible;
}
/* The centered drag affordance straddling the bottom border. */
.right-rail .documents-resize-handle {
position: absolute;
left: 50%;
bottom: -10px;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0;
width: 40px;
height: 20px;
padding: 0;
border: 1px solid var(--line);
border-radius: 7px;
background: var(--panel, rgba(10, 18, 36, 0.95));
color: var(--muted, #8aa0c6);
cursor: ns-resize;
z-index: 5;
line-height: 0.6;
font-size: 9px;
touch-action: none;
user-select: none;
transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.right-rail .documents-resize-handle:hover {
color: var(--text, #e6edff);
border-color: var(--accent, #4f7cff);
background: rgba(79, 124, 255, 0.12);
}
.right-rail .documents-resize-handle span {
display: block;
pointer-events: none;
}
/* When collapsed, drop back to title-only height and hide the handle. */
.right-rail .documents-card.is-collapsed {
height: auto !important;
min-height: 0;
overflow: hidden;
}
.right-rail .documents-card.is-collapsed .documents-resize-handle {
display: none;
}
.right-rail .uploaded-file-list {
list-style: none;
padding: 0;
margin: 0.6rem 0 0;
display: grid;
/* Single column, constrained to container width — without minmax(0, 1fr)
a long filename would push the column past the sidebar. */
grid-template-columns: minmax(0, 1fr);
gap: 0.45rem;
max-height: 180px;
overflow-y: auto;
overflow-x: hidden;
}
.right-rail .uploaded-file-list li {
padding: 0.46rem 0.58rem;
border-radius: 9px;
border: 1px solid var(--line);
background: rgba(10, 18, 36, 0.8);
font-size: 0.82rem;
color: #d8ebff;
min-width: 0;
max-width: 100%;
overflow: hidden;
/* Defeat admin.css's bare `li { margin: 0.35rem 0 }` rule (admin.css:1829);
gap on the parent grid already handles vertical spacing. */
margin: 0;
}
/* Department folder grouping — ported from chat's styles.css so admin
and brain group docs into the same folders as chat. The outer
is the folder container; the