:root {
  --chat-panel-width: min(420px, 40vw);
}

.app-shell {
  transition: padding-right 180ms ease;
}
.app-shell-chat-open {
  padding-right: var(--chat-panel-width);
}

.chat-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--chat-panel-width);
  background: var(--card);
  border-left: 1px solid var(--border-strong);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transform: translateX(0);
  transition: transform 180ms ease;
  z-index: 50;
}

.chat-panel-hidden {
  transform: translateX(100%);
  pointer-events: none;
}

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
}

.chat-panel-title {
  font-weight: 600;
  color: var(--text-primary);
}

.chat-panel-close {
  background: transparent;
  color: var(--text-secondary);
  border: none;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}
.chat-panel-close:hover {
  color: var(--text-primary);
}

.chat-panel-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
}

.chat-msg {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.chat-msg-mine {
  align-self: flex-end;
  background: var(--accent);
  color: #fff;
}
.chat-msg-theirs {
  align-self: flex-start;
  background: var(--utility-surface-strong);
  color: var(--text-primary);
}
.chat-msg-time {
  display: block;
  font-size: 10px;
  margin-top: 4px;
  opacity: 0.7;
}

.chat-panel-empty {
  align-self: center;
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 24px;
}

.chat-panel-composer {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--border-subtle);
}
.chat-panel-composer textarea {
  flex: 1;
  background: var(--utility-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
}
.chat-panel-composer textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.chat-panel-composer button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Daily-reflection snapshot bubble — wraps a frozen copy of the
   intentional-calendar-x day lane. Cards inside keep their original styling
   from intentional-calendar-x.css; the wrapper only handles layout in chat. */
.chat-msg-snapshot {
  align-self: stretch;
  max-width: 100%;
  background: var(--utility-surface-strong);
  color: var(--text-primary);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reflection-snapshot {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reflection-snapshot-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--text-secondary);
}
.reflection-snapshot-title {
  font-weight: 600;
  color: var(--text-primary);
}
.reflection-snapshot-date {
  opacity: 0.85;
}

.reflection-snapshot-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reflection-snapshot-section-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}

.reflection-snapshot-lane-host {
  position: relative;
}

/* The frozen lane is normally a flex grid cell; in chat we lay it out as a
   simple vertical stack so each card flows naturally. */
.reflection-snapshot-lane-host .intentional-calendar-x-day-lane {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: static;
  height: auto;
  min-height: 0;
  width: 100%;
}

/* Disable any hover/cursor affordance from the live calendar — the snapshot
   is read-only aside from collapse toggles. */
.reflection-snapshot-lane-host .intentional-calendar-x-event-card,
.reflection-snapshot-lane-host .intentional-calendar-x-goal-tray {
  cursor: default;
}
.reflection-snapshot-lane-host textarea[readonly] {
  cursor: default;
  background: transparent;
}

/* Snapshots ship the expanded panel inline so the toggle has something to
   reveal. Hide it by default; show when the card carries --expanded. */
.reflection-snapshot-lane-host .intentional-calendar-x-event-expanded-panel {
  display: none;
}
.reflection-snapshot-lane-host
  .intentional-calendar-x-event-card--expanded
  .intentional-calendar-x-event-expanded-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reflection-snapshot-lane-host
  .intentional-calendar-x-event-card--expanded
  .intentional-calendar-x-reflection {
  display: block;
}
.reflection-snapshot-lane-host
  .intentional-calendar-x-goal-tray--expanded
  .intentional-calendar-x-goal-tray-reflection {
  display: block;
}

/* Reflection-prompt wrapper sits at shell level (outside the expanded
   panel), so hide it until the card or tray is expanded. Otherwise the
   prompt question labels show through when the toggle is closed. */
.reflection-snapshot-lane-host .icx-reflection-prompt-wrap {
  display: none;
}
.reflection-snapshot-lane-host
  .intentional-calendar-x-event-card--expanded
  .icx-reflection-prompt-wrap,
.reflection-snapshot-lane-host
  .intentional-calendar-x-goal-tray--expanded
  .icx-reflection-prompt-wrap {
  display: block;
}

/* Live-only edit UI (pencil button, edit-mode rows) must never render
   inside a snapshot. Capture includes them verbatim; suppress here. */
.reflection-snapshot-lane-host .icx-prompts-actions,
.reflection-snapshot-lane-host .icx-prompts-edit-toggle,
.reflection-snapshot-lane-host .icx-prompts-accept,
.reflection-snapshot-lane-host .icx-prompts-add,
.reflection-snapshot-lane-host .icx-prompt-edit-row,
.reflection-snapshot-lane-host .icx-prompt-edit-input,
.reflection-snapshot-lane-host .icx-prompt-edit-remove,
.reflection-snapshot-lane-host .icx-prompts-edit {
  display: none !important;
}