:root {
  /* Cadence design language: light cool surfaces, dark-green actions, charcoal text. */
  --bg: #f5f7f9;
  --sidebar: #e9edf1;
  --panel: #ffffff;
  --accent: #172326;
  --accent-hover: #2c3a3e;
  --text: #000000;
  --text-soft: #4d4d4d;
  --muted: #6b7478;
  --border: #d9dee3;
  --border-soft: #e3e7ea;
  --user-bg: #e9edf0;
  --hover: #e5ecee;
  --link: #046A38;
  --brand: #046A38;
}

* {
  box-sizing: border-box;
}

/* The `hidden` attribute must always win, even over later display rules like
   `.modal-backdrop { display: flex }`. Without this, a transparent modal/overlay
   stays in the layout and silently intercepts every click. */
[hidden] {
  display: none !important;
}

/* ── Scrollbars ───────────────────────────────────────────────────────
   Slim, unobtrusive scrollbars that sit flush on the right with a rounded
   thumb. The track is invisible so the bar visually floats at the edge, and
   the thumb only becomes prominent on hover. Firefox uses the `scrollbar-*`
   properties; Chromium/WebKit uses the pseudo-elements. */
* {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

*:hover,
*:focus-within {
  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: transparent;
  border: 3px solid transparent;
  border-radius: 0;
  background-clip: padding-box;
}

*:hover::-webkit-scrollbar-thumb,
*:focus-within::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.32);
  background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

html,
body {
  margin: 0;
  height: 100vh;
  height: 100dvh;
  /* Clamp the document so the page itself never scrolls. The chat area is
     the only place that scrolls; the composer stays pinned to the bottom of
     the viewport regardless of how tall the conversation gets. */
  overflow: hidden;
}

body {
  font-family: "Avenir Next", Avenir, "Segoe UI", Verdana, Geneva, sans-serif;
  background: var(--bg);
  color: var(--text);
}

.app {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.sidebar {
  width: 248px;
  flex-shrink: 0;
  background: var(--sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px 10px;
}

.side-top {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.brand {
  display: flex;
  align-items: center;
  padding: 6px 8px 12px;
}

.brand-logo {
  height: 30px;
  width: auto;
  max-width: 160px;
  display: block;
}

.brand-mark {
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: 18px;
  color: #003591;
}

.side-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  color: var(--text);
  border: 0;
  border-radius: 0;
  padding: 9px 10px;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}

.side-item:hover {
  background: var(--hover);
}

.side-ico {
  font-size: 16px;
  line-height: 1;
  width: 18px;
  text-align: center;
}

.side-bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

.side-bottom:empty {
  display: none;
}

.side-status {
  font-size: 12px;
  color: var(--muted);
}

/* ── Workspace ────────────────────────────────────────────────────── */
.workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* min-height: 0 lets the inner .chat flex item own the overflow instead of
     growing the workspace past the viewport when a chart or grid is taller
     than the available space. Without this the composer slides off-screen
     as soon as a tall data view is rendered. */
  min-height: 0;
  height: 100dvh;
  height: 100vh;
  /* Clamp the workspace so children (chat, greeting, composer) cannot push
     each other off-screen. The chat owns its own internal scroll, the
     composer is flex-shrink:0 and stays pinned at the bottom. */
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid var(--border-soft);
}

.topbar-title {
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}

.topbar-logo {
  height: 22px;
  width: auto;
  display: block;
}

.topbar-actions {
  display: flex;
  gap: 8px;
}

button {
  font-family: inherit;
}

.btn-primary {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-ghost {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 8px 16px;
  cursor: pointer;
  font-size: 14px;
}

.btn-ghost:hover {
  background: var(--hover);
}

/* ── Mode control (chips inside the composer) ─────────────────────
   Chips sit on the right of the input, between the textbox and the send
   button, the way ChatGPT / Claude show their mode/model toggles. The
   description for the active mode appears as a small line under the
   composer so users always know what the assistant can and cannot do. */
.mode-chips {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  background: var(--hover);
  border-radius: 0;
  flex-shrink: 0;
}

.mode-chip {
  background: transparent;
  color: var(--text-soft);
  border: 0;
  border-radius: 0;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  line-height: 1.2;
  transition: background 0.12s ease, color 0.12s ease;
}

.mode-chip:hover {
  color: var(--text);
}

.mode-chip.active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.mode-chip:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.mode-desc {
  width: 100%;
  max-width: 760px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  line-height: 1.4;
  padding: 0 4px;
}

.instructions-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 760px;
  padding: 4px 4px 0;
}

.instructions-label {
  font-size: 12px;
  color: var(--muted);
  user-select: none;
}

/* ── Composer status row (tools link + connection text) ───────────────
   Sits between the textbox and the AI disclaimer, right-aligned so the
   text aligns under the send button. */
.composer-status {
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
  padding: 0 4px;
}

.composer-status:empty {
  display: none;
}

.composer-status-btn {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--link);
  cursor: pointer;
  text-decoration: none;
}

.composer-status-btn:hover {
  text-decoration: underline;
}

.composer-status-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 0;
}

.composer-status-text {
  line-height: 1.4;
}

/* ── Sidebar tools-list trigger (legacy) ──────────────────────────── */
.side-status-btn {
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  font-size: 12px;
  color: var(--link);
  cursor: pointer;
  text-decoration: none;
}

.side-status-btn:hover {
  text-decoration: underline;
}

.side-status-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 0;
}

/* ── Tools list inside the modal ──────────────────────────────────── */
.tools-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tool-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid var(--border-soft);
  border-radius: 0;
  background: #fff;
}

.tool-row .tool-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.tool-row .tool-title-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tool-row .tool-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.tool-row .tool-sub {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--muted);
  word-break: break-word;
}

.tool-row .tool-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 0;
  flex-shrink: 0;
  white-space: nowrap;
  height: fit-content;
}

.tool-row .tool-badge.read {
  background: #e7f1ff;
  color: #0b57d0;
}

.tool-row .tool-badge.write {
  background: #fdecea;
  color: #b3261e;
}

.tool-row .tool-badge.unknown {
  background: var(--hover);
  color: var(--text-soft);
}

.tool-row.blocked {
  opacity: 0.62;
}

.tool-row.disabled {
  opacity: 0.5;
}

.tool-row.blocked::after {
  content: "Not available in this mode";
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tool-row .tool-desc {
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* ── Tool toggle switch ───────────────────────────────────────────── */
.tool-toggle {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.tool-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.tool-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #ccc;
  border-radius: 0;
  transition: background 0.2s;
}

.tool-slider::before {
  content: "";
  position: absolute;
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.tool-toggle input:checked + .tool-slider {
  background: #0b57d0;
}

.tool-toggle input:checked + .tool-slider::before {
  transform: translateX(16px);
}

/* ── Tools toggle bar (Enable/Disable all) ────────────────────────── */
.tools-toggle-bar {
  display: flex;
  gap: 8px;
  padding: 0 2px 8px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 8px;
}

.btn-sm {
  font-size: 12px;
  padding: 4px 10px;
}

.tools-section-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 4px 2px 0;
}

/* ── Greeting (empty state) ───────────────────────────────────────── */
.greeting {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20px;
  /* Allow the greeting to shrink inside the workspace flex column. Without
     these the greeting can grow beyond the viewport and push the composer
     off-screen on short windows. */
  min-height: 0;
  overflow: auto;
}

.greeting-inner {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.greeting h1 {
  font-size: 30px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.greeting-sub {
  margin: 10px 0 26px;
  font-size: 15px;
  color: var(--muted);
}

.suggestions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
}

.suggestion {
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease,
    transform 0.15s ease;
}

.suggestion:hover {
  background: var(--user-bg);
  border-color: var(--brand);
  transform: translateY(-2px);
}

.suggestion-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 3px;
}

.suggestion-desc {
  display: block;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.4;
}

@media (max-width: 640px) {
  .suggestions {
    grid-template-columns: 1fr;
  }
}

/* When a conversation is active, hide the greeting and let chat fill space. */
.app.has-messages .greeting {
  display: none;
}

.app:not(.has-messages) .chat {
  flex: 0;
  padding: 0;
}

.app:not(.has-messages) .greeting {
  flex: 1;
}

/* ── Chat ─────────────────────────────────────────────────────────── */
.chat {
  flex: 1;
  /* min-height: 0 is required for overflow-y: auto to actually scroll inside
     a flex column. Without it the chat grows to fit its content and the
     composer is pushed off the viewport. */
  min-height: 0;
  overflow-y: auto;
  /* Full-width scroll container so the scrollbar sits at the screen edge, not
     in the middle of the page. Content is kept centred (max 820px) via the
     horizontal padding instead of max-width + margin auto. */
  padding: 32px max(20px, calc((100% - 820px) / 2)) 16px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  scroll-behavior: smooth;
}

.msg {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 0;
  white-space: pre-wrap;
  line-height: 1.55;
  font-size: 15px;
  /* Subtle fade-in so new messages appear cleanly instead of snapping in. */
  animation: msg-in 220ms ease-out both;
}

@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.msg.user {
  align-self: flex-end;
  background: var(--user-bg);
  color: var(--text);
  border: 1px solid var(--border-soft);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.msg.assistant {
  align-self: flex-start;
  background: transparent;
  color: var(--text);
  padding: 4px 4px 4px 16px;
  border-left: 2px solid var(--border-soft);
  border-radius: 0;
  max-width: 100%;
  width: 100%;
}

/* Rendered (markdown→HTML) assistant bubbles: block elements control spacing,
   so disable the pre-wrap used for plain text and allow more width for tables. */
.msg.assistant.rendered {
  white-space: normal;
  max-width: 100%;
}

.msg.rendered > *:first-child {
  margin-top: 0;
}

.msg.rendered > *:last-child {
  margin-bottom: 0;
}

.msg.rendered p {
  margin: 8px 0;
}

.msg.rendered h1,
.msg.rendered h2,
.msg.rendered h3,
.msg.rendered h4,
.msg.rendered h5,
.msg.rendered h6 {
  margin: 14px 0 6px;
  line-height: 1.25;
}

.msg.rendered h1 {
  font-size: 19px;
}

.msg.rendered h2 {
  font-size: 17px;
}

.msg.rendered h3 {
  font-size: 15.5px;
}

.msg.rendered h4,
.msg.rendered h5,
.msg.rendered h6 {
  font-size: 14px;
  color: var(--text-soft);
}

.msg.rendered ul,
.msg.rendered ol {
  margin: 8px 0;
  padding-left: 22px;
}

.msg.rendered li {
  margin: 3px 0;
}

.msg.rendered a {
  color: var(--link);
  text-decoration: underline;
}

.msg.rendered code {
  background: #f4f4f4;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 1px 5px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 13px;
}

.msg.rendered pre {
  background: #f7f7f8;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px 14px;
  overflow-x: auto;
  margin: 10px 0;
}

.msg.rendered pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 13px;
  white-space: pre;
}

.msg.rendered blockquote {
  margin: 8px 0;
  padding: 4px 12px;
  border-left: 3px solid var(--border);
  color: var(--text-soft);
}

.msg.rendered table {
  border-collapse: collapse;
  margin: 10px 0;
  width: 100%;
  font-size: 13.5px;
}

.msg.rendered th,
.msg.rendered td {
  border: 1px solid var(--border);
  padding: 7px 10px;
  text-align: left;
  vertical-align: top;
}

.msg.rendered thead th {
  background: #f7f7f8;
  color: var(--text);
  font-weight: 600;
}

.msg.rendered tbody tr:nth-child(even) {
  background: #fafafa;
}

/* ── Visualization block (chart + kanban) attached after a data table ── */
.viz-block {
  margin: 10px 0 14px;
}

.viz-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.viz-seg {
  display: inline-flex;
  background: #f4f4f4;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 3px;
  gap: 2px;
}

.viz-seg-btn {
  background: transparent;
  color: var(--text-soft);
  border: 0;
  border-radius: 0;
  padding: 5px 14px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.viz-seg-btn:hover {
  color: var(--text);
}

.viz-seg-btn.active {
  background: #fff;
  color: var(--brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.chart-type {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 5px 8px;
  font-size: 12.5px;
  cursor: pointer;
}

.chart-canvas {
  position: relative;
  height: 300px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 12px;
}

/* ── Additional viz canvases (Apex / ECharts / AG Grid / Mermaid / spec) ── */
.apex-canvas {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 8px 4px;
}

.echarts-canvas {
  width: 100%;
  height: 360px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 8px;
}

.ag-grid-canvas {
  width: 100%;
  min-height: 320px;
  border: 1px solid var(--border);
  border-radius: 0;
  overflow: hidden;
  --ag-font-family: inherit;
  --ag-font-size: 13px;
  --ag-header-background-color: #f7f8fa;
  --ag-odd-row-background-color: #fbfbfd;
  --ag-row-hover-color: #eef3fb;
  --ag-selected-row-background-color: #e2edff;
  --ag-border-color: var(--border);
  --ag-header-foreground-color: var(--text);
  --ag-foreground-color: var(--text);
}

.mermaid-canvas {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 16px;
  display: flex;
  justify-content: center;
  overflow-x: auto;
}

.mermaid-canvas svg {
  max-width: 100%;
  height: auto;
}

.viz-spec-block {
  margin: 10px 0;
}

.viz-spec-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}

/* ── Kanban board ─────────────────────────────────────────────────── */
.kanban {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scroll-snap-type: x proximity;
}

.kanban-col {
  flex: 0 0 240px;
  background: #f7f8fa;
  border: 1px solid var(--border);
  border-radius: 0;
  display: flex;
  flex-direction: column;
  max-height: 460px;
  scroll-snap-align: start;
}

.kanban-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-top: 3px solid var(--brand);
  border-radius: 0;
  background: #fff;
}

.kanban-col-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kanban-col-count {
  flex-shrink: 0;
  min-width: 22px;
  text-align: center;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-soft);
  background: var(--hover);
  border-radius: 0;
  padding: 1px 8px;
}

.kanban-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  overflow-y: auto;
}

.kanban-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  animation: kc-in 0.25s ease both;
}

@keyframes kc-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.kanban-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 6px;
}

.kanban-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  line-height: 1.5;
}

.kanban-card-meta .kc-key {
  color: var(--muted);
}

.kanban-card-meta .kc-val {
  color: var(--text-soft);
  text-align: right;
  word-break: break-word;
}

.composer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 20px 18px;
  /* Pin to the bottom of the workspace flex column. The chat above scrolls
     internally; the composer never moves. */
  flex-shrink: 0;
  background: var(--bg);
  border-top: 1px solid var(--border-soft);
}

.composer-inner {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  width: 100%;
  max-width: 760px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 8px 8px 8px 18px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  flex-wrap: wrap;
}

.composer-inner:focus-within {
  border-color: #b9b9c6;
}

#input {
  flex: 1;
  background: transparent;
  color: var(--text);
  border: 0;
  outline: none;
  padding: 12px 0;
  font-size: 15px;
  font-family: inherit;
  min-height: 60px;
  max-height: 200px;
  resize: vertical;
  overflow-y: auto;
  line-height: 1.4;
}

#input::placeholder {
  color: var(--muted);
}

.send-btn {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
}

.send-btn:hover {
  background: var(--accent-hover);
}

.composer-foot {
  width: 100%;
  max-width: 760px;
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  padding: 0 4px;
}

/* ── Generated document card (offer downloads) ────────────────────── */
.doc-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 12px 0;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
}

.doc-card .doc-ico {
  font-size: 24px;
  line-height: 1;
}

.doc-card .doc-meta {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.doc-card .doc-title {
  font-weight: 600;
  font-size: 14px;
  color: var(--text);
}

.doc-card .doc-sub {
  font-size: 12px;
  color: var(--muted);
}

.doc-card .doc-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.doc-card .doc-btn {
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 0;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--brand);
}

.doc-card .doc-btn.ghost {
  background: #fff;
  color: var(--brand);
}

.doc-card .doc-btn:hover {
  opacity: 0.9;
}

/* ── Interactive question form (AI-driven) ────────────────────────── */
.ask-form {
  margin: 12px 0;
  padding: 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 560px;
  animation: af-in 0.28s ease both;
}

@keyframes af-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.ask-form .af-title {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ask-form .af-title::before {
  content: "?";
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.ask-form .af-intro {
  font-size: 13.5px;
  color: var(--text-soft);
  margin-top: -6px;
  line-height: 1.45;
}

.ask-form .af-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ask-form .af-label {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}

.ask-form .af-req {
  color: #d93025;
}

.ask-form .af-control {
  width: 100%;
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ask-form .af-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(0, 53, 145, 0.12);
}

.ask-form textarea.af-control {
  resize: vertical;
  min-height: 64px;
}

.ask-form .af-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ask-form .af-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
}

.ask-form .af-opt input {
  accent-color: var(--brand);
  width: 16px;
  height: 16px;
}

/* Card-style option (AskUserQuestions parity: label + description + recommended) */
.ask-form .af-opt-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s ease, background 0.15s ease,
    box-shadow 0.15s ease;
}

.ask-form .af-opt-card:hover {
  border-color: #b9c4dc;
  background: #fbfcff;
}

.ask-form .af-opt-card > input {
  accent-color: var(--brand);
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex-shrink: 0;
}

.ask-form .af-opt-card:has(> input:checked) {
  border-color: var(--brand);
  background: #eef3fb;
  box-shadow: 0 0 0 3px rgba(0, 53, 145, 0.12);
}

.ask-form .af-opt-recommended {
  border-color: #cdddf6;
}

.ask-form .af-opt-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.ask-form .af-opt-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ask-form .af-opt-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

.ask-form .af-opt-recommended-pill {
  font-size: 11px;
  font-weight: 600;
  color: var(--brand);
  background: #eaf1ff;
  border: 1px solid #cddcf7;
  border-radius: 0;
  padding: 1px 8px;
  letter-spacing: 0.2px;
}

.ask-form .af-opt-other .af-other-input {
  margin-top: 6px;
  width: 100%;
}

.ask-form .af-field-header {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: -2px;
}

.ask-form .af-desc {
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.45;
  margin-top: -2px;
}

.ask-form .af-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2px;
}

.ask-form .af-submit {
  background: var(--brand);
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 9px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ask-form .af-submit:hover {
  background: #00276b;
}

.ask-form.submitted {
  opacity: 0.85;
  border-color: #cdeccd;
  background: #f6fbf6;
}

.ask-form .af-submit:disabled {
  background: #b6c0d4;
  cursor: default;
}

.ask-form .af-done {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #2e844a;
}

.ask-form .af-done::before {
  content: "✓";
}

/* ── Behind-the-scenes chip under an assistant reply ──────────────── */
.trace-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text-soft);
  background: #f4f4f4;
  border: 1px solid var(--border);
  border-radius: 0;
  cursor: pointer;
}

.trace-chip:hover {
  background: var(--hover);
}

.trace-chip .label {
  transition: opacity 0.22s ease;
}

.trace-chip .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #19c37d;
  flex-shrink: 0;
}

.trace-chip.thinking {
  color: var(--brand);
  background: #eef3fb;
  border-color: #d7e3f7;
}

.trace-chip.thinking .dot {
  background: var(--brand);
  animation: chip-pulse 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes chip-pulse {
  0% {
    transform: scale(0.85);
    box-shadow: 0 0 0 0 rgba(0, 53, 145, 0.35);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(0, 53, 145, 0);
  }

  100% {
    transform: scale(0.85);
    box-shadow: 0 0 0 0 rgba(0, 53, 145, 0);
  }
}

/* ── Shared right-sliding panel ───────────────────────────────────── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 40;
}

.overlay.show {
  opacity: 1;
}

.rpanel {
  position: fixed;
  top: 0;
  height: 100dvh;
  right: 0;
  height: 100vh;
  width: 380px;
  max-width: 92vw;
  background: #fff;
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 50;
}

.rpanel.open {
  transform: translateX(0);
}

.rpanel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border-soft);
}

.rpanel-head h2 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.rpanel-close {
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}

.rpanel-close:hover {
  color: var(--text);
}

.rpanel-sub {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 10px;
}

.rpanel-sub-text {
  flex: 1;
  font-size: 12px;
  color: var(--muted);
}

.btn-sm {
  padding: 3px 10px;
  font-size: 12px;
  border-radius: 0;
}

.rpanel-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 18px;
}

/* ── Trace steps ──────────────────────────────────────────────────── */
.trace-step {
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 13px;
}

.trace-step.expanded {
  background: rgba(0, 0, 0, 0.02);
}

.trace-step .t-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}

.trace-step .t-expand {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.trace-step .t-expand:hover {
  background: rgba(0, 0, 0, 0.08);
}

.trace-step .t-ico {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

.trace-step.info .t-ico {
  background: #8e8ea0;
}

.trace-step.think .t-ico {
  background: #0b57d0;
}

.trace-step.tool .t-ico {
  background: #19c37d;
}

.trace-step.blocked .t-ico {
  background: #d39e00;
}

.trace-step.error .t-ico {
  background: #d93025;
}

.trace-step .t-ms {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
  font-weight: 400;
}

.trace-step .t-detail {
  margin-top: 8px;
  margin-left: 30px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  color: var(--text-soft);
  white-space: pre-wrap;
  word-break: break-word;
  background: #f7f7f8;
  border-radius: 0;
  padding: 8px 10px;
  border-left: 2px solid var(--border);
  animation: slideDown 0.2s ease-out;
}

.trace-step .t-detail[hidden] {
  display: none !important;
}

@keyframes slideDown {
  from {
    opacity: 0;
    margin-top: 0;
  }
  to {
    opacity: 1;
    margin-top: 8px;
  }
}

.trace-empty {
  color: var(--muted);
  font-size: 13px;
}

/* ── Chats list ───────────────────────────────────────────────────── */
.chat-item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0;
  padding: 10px 12px;
  margin-bottom: 4px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}

.chat-item:hover {
  background: var(--hover);
}

.chat-item.active {
  background: #eef2ff;
  border-color: #d6e0ff;
}

.chat-item .c-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-item .c-time {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

/* ── Conversation popup modal ─────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.25s ease;
  z-index: 60;
}

.modal-backdrop.show {
  opacity: 1;
}

.modal {
  width: 760px;
  max-width: 100%;
  max-height: 86vh;
  background: var(--bg);
  border-radius: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(18px) scale(0.96);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.3s ease;
}

.modal-backdrop.show .modal {
  transform: none;
  opacity: 1;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft);
  background: #fff;
}

.modal-head .m-title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 4px;
}

.modal-head .m-meta {
  font-size: 12.5px;
  color: var(--muted);
}

.modal-close {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: var(--muted);
  cursor: pointer;
  padding: 0 4px;
}

.modal-close:hover {
  color: var(--text);
}

.modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 22px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal-empty {
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  padding: 30px 0;
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--border-soft);
  background: #fff;
}

/* ── Memory panel ─────────────────────────────────────────────────── */
.memory-section {
  margin-bottom: 20px;
}

.memory-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 4px 0 8px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 8px;
}

.memory-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 0;
  border: 1px solid var(--border-soft);
  margin-bottom: 6px;
  background: var(--bg-alt, #f9f9fb);
}

.memory-text {
  flex: 1;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
}

.memory-del {
  flex-shrink: 0;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 0;
  transition: color 0.15s;
}

.memory-del:hover {
  color: var(--danger, #ba0517);
}

/* ── Follow-up suggestion chips ───────────────────────────────────── */
.suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.suggestion-chip {
  background: var(--bg-alt, #f0f4ff);
  border: 1px solid var(--border, #d0d8e8);
  border-radius: 0;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--accent, #003591);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.suggestion-chip:hover {
  background: var(--accent, #003591);
  border-color: var(--accent, #003591);
  color: #fff;
}

/* ── Streaming cursor ─────────────────────────────────────────────── */
.msg.streaming > *:last-child::after,
.msg.streaming::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: text-bottom;
  opacity: 0.7;
  animation: stream-blink 0.7s step-end infinite;
}

@keyframes stream-blink {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 0; }
}

/* ── MCP connection + tools bar ──────────────────────────────────────────── */
.mcp-bar {
  flex: 0 0 auto;
  background: #f2f5fa;
  border-bottom: 1px solid var(--border);
}

.mcp-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
}

.mcp-conn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.mcp-conn .conn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff8a3d;
  box-shadow: 0 0 0 3px rgba(255, 138, 61, 0.22);
}

.mcp-conn .conn-dot.is-on {
  background: #33d17a;
  box-shadow: 0 0 0 3px rgba(51, 209, 122, 0.22);
}

.mcp-btn {
  border: 1px solid var(--link);
  background: var(--link);
  color: #ffffff;
  border-radius: 0;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.mcp-btn:hover {
  opacity: 0.85;
}

.mcp-btn.is-disconnect {
  background: #ffffff;
  color: #c0392b;
  border-color: #e2c4c0;
}

.mcp-btn.is-disconnect:hover {
  background: #fdf2f1;
}

.mcp-btn-ghost {
  margin-left: auto;
  background: #ffffff;
  color: var(--link);
  border-color: var(--border);
}

.mcp-btn-ghost:hover {
  border-color: var(--link);
}

.mcp-caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -2px;
  transition: transform 0.2s;
}

.mcp-btn-ghost[aria-expanded="true"] .mcp-caret {
  transform: rotate(-135deg);
  margin-top: 2px;
}

.mcp-detail {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 18px 16px;
  display: grid;
  gap: 12px;
  border-top: 1px solid var(--border);
}

.mcp-empty {
  font-size: 13px;
  color: var(--muted);
  padding: 10px 0;
}

.mcp-card {
  border: 1px solid var(--border);
  border-radius: 0;
  background: #ffffff;
  padding: 14px 16px;
}

.mcp-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.mcp-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}

.mcp-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 0;
}

.mcp-pill-on {
  background: rgba(51, 209, 122, 0.15);
  color: #1e8e4e;
}

.mcp-pill-off {
  background: rgba(192, 57, 43, 0.12);
  color: #c0392b;
}

.mcp-desc {
  font-size: 13px;
  color: var(--text-soft);
  margin-bottom: 6px;
}

.mcp-endpoint {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--muted);
  background: var(--user-bg);
  padding: 4px 8px;
  border-radius: 0;
  margin-bottom: 12px;
  word-break: break-all;
}

.mcp-tools-head {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--link);
  margin-bottom: 6px;
}

.mcp-tools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.mcp-tool {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--user-bg);
  border-radius: 0;
  font-size: 13px;
}

.mcp-tool-name {
  font-weight: 600;
  color: var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
}

.mcp-tool-class {
  justify-self: start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: 0;
}

.mcp-tool-read {
  background: rgba(0, 118, 168, 0.12);
  color: var(--link);
}

.mcp-tool-write {
  background: rgba(230, 126, 34, 0.16);
  color: #b9660f;
}

.mcp-tool-unknown {
  background: rgba(142, 142, 160, 0.12);
  color: var(--muted);
}

.mcp-tool-desc {
  grid-column: 1 / -1;
  color: var(--text-soft);
  font-size: 12px;
}

.mcp-tool-empty {
  display: block;
  color: var(--muted);
  font-style: italic;
}

/* ── Responsive: tablet (<= 900px) ─────────────────────────────────── */
@media (max-width: 900px) {
  /* iOS Safari zooms when focusing inputs below 16px. */
  #input,
  .ask-form .af-control {
    font-size: 16px;
  }

  /* Sidebar collapses to a slim icon rail. Labels hide, icons remain, and
     every control keeps its accessible name via title attributes. */
  .sidebar {
    width: 64px;
    padding: 12px 8px;
    align-items: center;
  }
  .sidebar .brand {
    justify-content: center;
    padding: 6px 0 12px;
  }
  .sidebar .brand-logo {
    height: 24px;
    max-width: 44px;
    object-fit: contain;
    object-position: left;
  }
  .side-item {
    justify-content: center;
    padding: 10px 0;
    font-size: 0;
    gap: 0;
  }
  .side-item .side-ico {
    font-size: 18px;
    width: auto;
  }
  .side-bottom {
    padding: 8px 0;
    align-items: center;
  }
  .side-status {
    display: none;
  }
  .side-status-btn {
    font-size: 0;
  }
  .side-status-btn::before {
    content: "\2699";
    font-size: 16px;
    color: var(--muted);
  }

  .topbar {
    padding: 10px 12px;
    gap: 8px;
  }
  .topbar-title {
    font-size: 14px;
    min-width: 0;
  }
  .topbar-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-actions {
    flex-shrink: 0;
  }
  .btn-primary,
  .btn-ghost {
    padding: 7px 12px;
    font-size: 13px;
  }

  .chat {
    padding: 20px 14px 12px;
    gap: 20px;
  }
  .msg {
    max-width: 92%;
  }
  .greeting h1 {
    font-size: 24px;
  }
  .composer {
    padding: 8px 12px 12px;
  }
  .composer-inner {
    padding: 6px 6px 6px 14px;
  }
  #input {
    min-height: 44px;
  }

  /* Message tables scroll sideways instead of breaking the layout. */
  .msg.rendered table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .msg.rendered th,
  .msg.rendered td {
    white-space: normal;
    min-width: 120px;
  }

  .rpanel {
    width: 100vw;
    max-width: 100vw;
  }

  .modal-backdrop {
    padding: 0;
  }
  .modal {
    width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }

  .mcp-bar-row {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px;
  }
  .mcp-btn-ghost {
    margin-left: 0;
  }
}

/* ── Responsive: phones (<= 560px) ─────────────────────────────────── */
@media (max-width: 560px) {
  .topbar-title {
    font-size: 12px;
  }
  .mode-desc {
    text-align: left;
  }
  .composer-foot {
    text-align: center;
    font-size: 11px;
  }
  .chart-canvas {
    height: 240px;
  }
  .echarts-canvas {
    height: 280px;
  }
  .kanban-col {
    flex: 0 0 82vw;
  }
  .ask-form {
    max-width: 100%;
    padding: 14px;
  }
}

/* Larger tap targets on touch devices. */
@media (pointer: coarse) {
  .rpanel-close,
  .modal-close {
    min-width: 44px;
    min-height: 44px;
  }
  .suggestion {
    padding: 16px;
  }
}