/* Mr. Patel's Workday — Ask J.A.R.V.I.S. chat panel (chunk 3).
   Loaded AFTER css/fx.css; borrows its glass + ice language (the shared
   .panel glass comes from fx.css). Layout: the panel is a flex column —
   scrolling log, starter chips, then the input row pinned to the bottom
   with the safe-area inset in its padding, so the input is never hidden
   behind the tab bar or the home indicator. Transitions <300ms.
   On phone/tablet widths the chat becomes a true full-viewport sheet:
   its header owns the top safe-area inset so the title and Close button
   clear the iOS status bar instead of showing through it. */

.chat-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  animation: chat-slide-in 180ms ease-out;
}
@keyframes chat-slide-in {
  from { transform: translateX(16px); opacity: 0.4; }
  to { transform: translate3d(0, 0, 0); opacity: 1; }
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6px 0 10px;
  min-height: 120px;
}

.chat-msg {
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.chat-msg.bot {
  align-self: flex-start;
  background: rgba(190, 220, 255, 0.05);
  border: 1px solid rgba(150, 200, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(200, 228, 255, 0.06);
  border-bottom-left-radius: 4px;
}
.chat-msg.user {
  align-self: flex-end;
  background: linear-gradient(180deg, rgba(120, 180, 240, 0.26), rgba(90, 150, 220, 0.16));
  border: 1px solid var(--fx-line, rgba(150, 200, 255, 0.28));
  border-bottom-right-radius: 4px;
}
.chat-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

.chat-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.chat-chip {
  display: inline-block;
  padding: 6px 12px;
  min-height: 36px;
  border: 1px solid var(--fx-line, rgba(150, 200, 255, 0.28));
  border-radius: 999px;
  font-size: 13px;
  color: var(--text);
  background: var(--surface-alt);
  cursor: pointer;
  transition: border-color 150ms ease-out, box-shadow 200ms ease-out, transform 120ms ease-out;
}
.chat-chip:active { transform: translateY(1px); }

.chat-row { display: flex; gap: 8px; }
.chat-row input { flex: 1; }

/* Phone/tablet sheet geometry (<1024px): cover the physical viewport
   edge-to-edge, including the status-bar strip. Desktop keeps the
   established right-side panel presentation. */
@media (max-width: 1023.98px) {
  .chat-panel:not([hidden]) {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0 16px calc(12px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    background: var(--surface);
  }
  .chat-panel .panel-head {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    padding-top: calc(14px + env(safe-area-inset-top));
    background: var(--surface);
  }
  .chat-panel .panel-head h2 {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chat-panel .panel-head .btn {
    position: static;
    flex: 0 0 auto;
  }
  .chat-row { flex: 0 0 auto; }

  /* Same status-bar defect class for the other slide-over sheets:
     their panel padding now clears the top safe area while their
     side-sheet widths and desktop behavior stay unchanged. */
  .panel:not(.chat-panel) {
    padding-top: calc(16px + env(safe-area-inset-top));
  }
}

@media (prefers-reduced-motion: reduce) {
  .chat-panel:not([hidden]) { animation: none; }
  .chat-chip { transition: none; }
}