/* panel.css  -  the "ask this report" panel. Served at /panel.css */

/* TRAP #2: any flex element toggled with the hidden attribute needs this explicit rule,
   or display:flex wins and the panel sits on top of its own open button and eats the click. */
[hidden] { display: none !important; }

#rk-fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 9998;
  height: 52px; padding: 0 20px 0 16px; border: none; border-radius: 26px;
  background: #8a6a2f; color: #fff; font: 600 15px/1 inherit; font-family: inherit;
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  box-shadow: 0 6px 22px rgba(0,0,0,.22); transition: transform .15s, box-shadow .15s;
}
#rk-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0,0,0,.28); }
#rk-fab svg { width: 20px; height: 20px; }

#rk-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: min(420px, calc(100vw - 32px)); height: min(640px, calc(100vh - 40px));
  background: var(--paper, #fff); border: 1px solid var(--line, #e2ddd2);
  border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.28);
  display: flex; flex-direction: column; overflow: hidden;
}
.rk-head { background: #1a1a17; color: #fff; padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.rk-head b { font-size: 15px; font-weight: 600; flex: 1; }
.rk-head .rk-sub { font-size: 11px; color: #b7b1a3; font-weight: 400; display: block; margin-top: 1px; }
.rk-x { background: none; border: none; color: #b7b1a3; font-size: 22px; cursor: pointer; line-height: 1; padding: 0 2px; }
.rk-x:hover { color: #fff; }

.rk-msgs { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg, #faf9f6); }
.rk-msg { max-width: 90%; padding: 10px 13px; border-radius: 13px; font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.rk-user { align-self: flex-end; background: #8a6a2f; color: #fff; border-bottom-right-radius: 4px; }
.rk-bot { align-self: flex-start; background: var(--surface, #fff); color: var(--ink, #1a1a17); border: 1px solid var(--line, #e2ddd2); border-bottom-left-radius: 4px; }
.rk-bot.rk-thinking { color: #847f73; font-style: italic; }

.rk-src { align-self: flex-start; max-width: 100%; display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.rk-src .rk-src-lab { flex-basis: 100%; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted, #847f73); margin-bottom: 2px; }
.rk-chip { font-size: 12px; padding: 5px 10px; border: 1px solid var(--line, #e2ddd2); background: var(--surface, #fff); color: var(--ink, #1a1a17); border-radius: 14px; cursor: pointer; text-align: left; line-height: 1.3; }
.rk-chip:hover { border-color: #8a6a2f; color: #8a6a2f; }

.rk-starters { display: flex; flex-wrap: wrap; gap: 7px; }
.rk-starters button { font-size: 12.5px; padding: 6px 11px; border: 1px solid var(--line, #e2ddd2); background: var(--surface, #fff); color: var(--ink, #1a1a17); border-radius: 16px; cursor: pointer; text-align: left; }
.rk-starters button:hover { border-color: #8a6a2f; }

.rk-foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line, #e2ddd2); background: var(--paper, #fff); }
.rk-foot textarea { flex: 1; resize: none; border: 1px solid var(--line, #e2ddd2); border-radius: 12px; padding: 9px 12px; font: inherit; font-size: 14px; background: var(--bg, #faf9f6); color: var(--ink, #1a1a17); max-height: 96px; }
.rk-foot textarea:focus { outline: none; border-color: #8a6a2f; }
.rk-send { border: none; background: #8a6a2f; color: #fff; width: 40px; border-radius: 12px; font-size: 18px; cursor: pointer; flex: none; }
.rk-send:disabled { opacity: .5; cursor: default; }

/* brief highlight when a citation is clicked */
.rk-flash { animation: rk-flash 2s ease-out; }
@keyframes rk-flash {
  0% { background: rgba(138,106,47,.28); }
  100% { background: transparent; }
}

@media (max-width: 480px) {
  #rk-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: min(80vh, calc(100vh - 16px)); }
  #rk-fab { right: 12px; bottom: 12px; }
}