html, body { height: 100%; }
body { display: flex; flex-direction: column; background: #f6f7f9; }
main { flex: 1; min-height: 0; }

.chat-page { display: flex; gap: 1rem; height: calc(100vh - 56px - 2rem); height: calc(100dvh - 56px - 2rem); }
.chat-sidebar .list-group-item { border-radius: .375rem; border: 0; }
.chat-item { display: flex; align-items: center; gap: .25rem; }
.chat-link { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.chat-del { padding: 0 .3rem; line-height: 1.4; opacity: 0; color: inherit; border: 0; }
.chat-item:hover .chat-del, .chat-item.active .chat-del, .chat-del:focus { opacity: .7; }
.chat-del:hover { opacity: 1 !important; background: rgba(220, 53, 69, .15); }
.chat-sidebar .chat-date { font-size: .7rem; opacity: .65; }
.chat-wrap { display: flex; flex-direction: column; flex: 1; min-width: 0; max-width: 1100px; }
.chat-toolbar { display: flex; align-items: center; gap: .5rem; min-width: 0; padding-bottom: .25rem; }

/* desktop: sidebar is a column that can be collapsed */
@media (min-width: 768px) {
  .chat-sidebar { width: 250px; flex-shrink: 0; overflow-y: auto; background: #fff; border: 1px solid #e3e6ea; border-radius: .75rem; padding: .5rem; }
  .chat-page.sidebar-collapsed .chat-sidebar { display: none; }
}

/* phones: sidebar is a slide-in drawer (Bootstrap offcanvas-md), tighter layout */
@media (max-width: 767.98px) {
  .chat-sidebar { --bs-offcanvas-width: min(85vw, 320px); }
  main.container-fluid { padding: .5rem; }
  .chat-page { gap: 0; height: calc(100vh - 56px - 1rem); height: calc(100dvh - 56px - 1rem); }
  .chat-log { padding: .25rem 0; }
  .msg-user .bubble { max-width: 90%; }
  .msg-assistant { padding: .6rem .75rem; }
  .chat-del { opacity: .6; }                          /* no hover on touch screens */
  .data-grid .card-header { flex-wrap: wrap; }
  .data-grid .grid-filter { max-width: none !important; flex: 1 1 8rem; }
  .chart-box { height: 240px; }
  .navbar-collapse .nav-link { padding: .5rem 0; }
}
.chat-log { flex: 1; overflow-y: auto; padding: .5rem; }
.chat-input { padding-top: .5rem; }

.msg { margin: .5rem 0; }
.msg-user { display: flex; justify-content: flex-end; }
.msg-user .bubble { background: #0d6efd; color: #fff; border-radius: 1rem 1rem .25rem 1rem; padding: .5rem .9rem; max-width: 75%; white-space: pre-wrap; }
.msg-assistant { background: #fff; border: 1px solid #e3e6ea; border-radius: .75rem; padding: .75rem 1rem; }
.msg-assistant:empty::after { content: "…"; color: #6c757d; }

.md > :last-child { margin-bottom: 0; }
.md table { font-size: .875rem; margin: .5rem 0; border-collapse: collapse; display: block; max-width: 100%; overflow-x: auto; }
.md th, .md td { border: 1px solid #dee2e6; padding: .2rem .5rem; }
.md pre { background: #f1f3f5; padding: .5rem; border-radius: .375rem; }

.tool-call { margin: .25rem 0; }
.tool-call code { white-space: pre-wrap; }
.approval pre { white-space: pre-wrap; max-height: 16rem; }

.grid-scroll { max-height: 420px; overflow: auto; }
.data-grid td { white-space: nowrap; max-width: 420px; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; }
.data-grid th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-grid th[data-dir="asc"]::after { content: " ▲"; }
.data-grid th[data-dir="desc"]::after { content: " ▼"; }

.chart-box { position: relative; height: 320px; }
.data-grid td .cell-multiline { white-space: pre-line; min-width: 16rem; }
.md img { max-width: 100%; height: auto; border: 1px solid #e3e6ea; border-radius: .375rem; background: #fff; }
.chat-input { align-items: stretch; }
.send-btn { width: 3.5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0; }
.send-btn .spinner-border { width: 1.6rem; height: 1.6rem; border-width: .15em; }
.stop-btn { position: relative; }
.stop-btn .stop-square { position: absolute; width: .55rem; height: .55rem; background: currentColor; border-radius: 1px; }

/* Favorites dashboard: the grid/chart inside a tile drops its own card margin */
.fav-tile .data-grid, .fav-tile .card.my-2 { margin-bottom: 0 !important; }
.fav-head { margin-bottom: .35rem; }

/* Assistant: date and time under each prompt */
.msg-user { flex-wrap: wrap; }
.msg-user .msg-time { flex-basis: 100%; text-align: right; font-size: .7rem; color: #6c757d; margin-top: .15rem; }

/* HTML email preview in the assistant's Send/Cancel card */
.email-preview { display: block; width: 100%; height: 320px; border: 1px solid #dee2e6; border-radius: .375rem; background: #fff; margin-bottom: .25rem; }

/* Settings → Bots: collapsible bot cards */
details.bot-card > summary { cursor: pointer; list-style: none; }
details.bot-card > summary::-webkit-details-marker { display: none; }
details.bot-card > summary::before { content: "▸"; color: #6c757d; transition: transform .15s; }
details.bot-card[open] > summary::before { transform: rotate(90deg); }
details.bot-card:not([open]) > summary { border-bottom: 0; border-radius: var(--bs-card-inner-border-radius); }