/* conversation-sheet.css — Entity-scoped conversation bottom sheet.
 *
 * Viewport-anchored at the bottom of every surface page.
 * Collapsed: 48px bar. Expanded: 300px with messages + compose.
 * Uses design tokens from tokens.css.
 */

/* ---------------------------------------------------------------------------
   Mount root
   --------------------------------------------------------------------------- */

#conversation-sheet-root {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 900; /* below modals (1000+), above content */
  pointer-events: none;
}

#conversation-sheet-root > * {
  pointer-events: auto;
}

/* ---------------------------------------------------------------------------
   Sheet container
   --------------------------------------------------------------------------- */

.conversation-sheet {
  display: flex;
  flex-direction: column;
  background: var(--surface-primary, #fff);
  border-top: 1px solid var(--border-primary, #e0e0e0);
  box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
  transition: height 0.2s ease;
  overflow: hidden;
  font-family: var(--font-body, 'Rubik', sans-serif);
}

.conversation-sheet--collapsed {
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   Collapsed bar
   --------------------------------------------------------------------------- */

.convo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  min-height: 48px;
  padding: 0 16px;
  cursor: pointer;
  user-select: none;
  background: var(--surface-secondary, #f5f5f5);
  border-bottom: 1px solid var(--border-primary, #e0e0e0);
}

.convo-bar__target {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-primary, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.convo-bar__toggle {
  font-size: 0.75rem;
  color: var(--text-secondary, #666);
  flex-shrink: 0;
  margin-left: 8px;
}

/* ---------------------------------------------------------------------------
   Message area
   --------------------------------------------------------------------------- */

.convo-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 0;
}

.convo-empty {
  color: var(--text-secondary, #666);
  font-size: 0.813rem;
  text-align: center;
  padding: 24px 16px;
}

/* ---------------------------------------------------------------------------
   Message bubbles
   --------------------------------------------------------------------------- */

.convo-msg {
  max-width: 75%;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.813rem;
  line-height: 1.4;
  word-wrap: break-word;
}

.convo-msg--human {
  align-self: flex-end;
  background: var(--accent-teal, #0F766E);
  color: #fff;
  border-bottom-right-radius: 2px;
}

.convo-msg--entity {
  align-self: flex-start;
  background: var(--surface-secondary, #f0f0f0);
  color: var(--text-primary, #1a1a1a);
  border-bottom-left-radius: 2px;
}

.convo-msg__text {
  margin: 0;
}

.convo-msg__time {
  font-size: 0.688rem;
  color: inherit;
  opacity: 0.6;
  margin-top: 2px;
  text-align: right;
}

/* ---------------------------------------------------------------------------
   Autocomplete dropdown
   --------------------------------------------------------------------------- */

.convo-autocomplete {
  position: relative;
  max-height: 160px;
  overflow-y: auto;
  background: var(--surface-primary, #fff);
  border-top: 1px solid var(--border-primary, #e0e0e0);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
}

.convo-autocomplete__loading {
  padding: 8px 16px;
  font-size: 0.813rem;
  color: var(--text-secondary, #666);
}

.convo-autocomplete__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 16px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.813rem;
  text-align: left;
  color: var(--text-primary, #1a1a1a);
}

.convo-autocomplete__item:hover,
.convo-autocomplete__item:focus {
  background: var(--surface-hover, #f0f0f0);
}

.convo-autocomplete__icon {
  font-size: 1rem;
  flex-shrink: 0;
}

.convo-autocomplete__name {
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.convo-autocomplete__type {
  font-size: 0.688rem;
  color: var(--text-secondary, #666);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------------
   Compose area
   --------------------------------------------------------------------------- */

.convo-compose {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-top: 1px solid var(--border-primary, #e0e0e0);
  background: var(--surface-primary, #fff);
  min-height: 44px;
}

.convo-compose__clear {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.875rem;
  color: var(--text-secondary, #666);
  padding: 4px;
  flex-shrink: 0;
}

.convo-compose__clear:hover {
  color: var(--text-primary, #1a1a1a);
}

.convo-compose__input {
  flex: 1;
  border: 1px solid var(--border-primary, #e0e0e0);
  border-radius: 6px;
  padding: 6px 10px;
  font-family: inherit;
  font-size: 0.813rem;
  background: var(--surface-primary, #fff);
  color: var(--text-primary, #1a1a1a);
  outline: none;
}

.convo-compose__input:focus {
  border-color: var(--accent-teal, #0F766E);
  box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.15);
}

.convo-compose__input:disabled {
  opacity: 0.6;
}

.convo-compose__send {
  border: none;
  background: var(--accent-teal, #0F766E);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.convo-compose__send:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.convo-compose__send:not(:disabled):hover {
  background: var(--accent-teal-hover, #0d6660);
}

/* ---------------------------------------------------------------------------
   Error display
   --------------------------------------------------------------------------- */

.convo-error {
  padding: 4px 16px 8px;
  font-size: 0.75rem;
  color: var(--color-p0, #DC2626);
}

/* ---------------------------------------------------------------------------
   Dark mode overrides
   --------------------------------------------------------------------------- */

[data-theme="dark"] .conversation-sheet {
  background: var(--surface-primary, #0F1419);
  border-top-color: var(--border-primary, #333);
}

[data-theme="dark"] .convo-bar {
  background: var(--surface-secondary, #1a1f26);
  border-bottom-color: var(--border-primary, #333);
}

[data-theme="dark"] .convo-msg--entity {
  background: var(--surface-secondary, #1a1f26);
}

[data-theme="dark"] .convo-compose__input {
  background: var(--surface-secondary, #1a1f26);
  border-color: var(--border-primary, #333);
}

[data-theme="dark"] .convo-autocomplete {
  background: var(--surface-primary, #0F1419);
  border-top-color: var(--border-primary, #333);
}

[data-theme="dark"] .convo-autocomplete__item:hover,
[data-theme="dark"] .convo-autocomplete__item:focus {
  background: var(--surface-secondary, #1a1f26);
}

/* ---------------------------------------------------------------------------
   Push page content up when sheet is expanded
   --------------------------------------------------------------------------- */

body:has(.conversation-sheet--expanded) {
  padding-bottom: 300px;
}

body:has(.conversation-sheet--collapsed) {
  padding-bottom: 48px;
}