/* Copyright (c) Microsoft Corporation. Licensed under the MIT License. */
/* Shared chat UI styles — used by both Electron shell and Chrome extension */

/* =========================================================================
   Chat Layout
   ========================================================================= */

.chat-panel-wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 14px;
}

.chat {
  display: flex;
  flex-direction: column-reverse;
  flex: 1;
  scroll-behavior: smooth;
  overflow-y: auto;
  font-family: inherit;
  font-size: inherit;
  padding: 10px 10px 10px 10px;
}

/* =========================================================================
   Chat Input
   ========================================================================= */

.chat-input {
  display: flex;
  padding: 5px;
  background-color: white;
  align-self: flex-end;
  margin: 10px;
  width: calc(100% - 20px);
  box-sizing: border-box;
  border: solid 1px rgb(224, 224, 224);
  border-radius: 6px;
  position: relative;
  /* Show the text caret across the whole input surface (container padding,
     wrapper, ghost text) so the entire box reads as an editable area —
     not just the contenteditable .user-textarea inside it. Buttons inside
     the container override this via their own `cursor: pointer` (see
     .chat-input-button). */
  cursor: text;
}

.chat-input.listening {
  background-color: aquamarine;
}

.chat-input-disabled {
  opacity: 0.5;
  pointer-events: none;
}

.chat-reconnect-banner {
  background-color: #fff4ce;
  color: #5c3c00;
  border-bottom: 1px solid #ffc83d;
  padding: 6px 12px;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 12px;
  text-align: center;
  flex: 0 0 auto;
}

.chat-input-text-wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  width: calc(100% - 48px);
  padding: 5px 8px;
  min-height: 30px;
  line-height: 30px;
  overflow: hidden;
}

.user-textarea {
  display: inline;
  outline: 0px solid transparent;
  line-height: 30px;
  font-family: inherit;
  font-size: inherit;
  min-width: 1px;
}

/* Placeholder for contenteditable */
.user-textarea:empty::before {
  content: attr(data-placeholder);
  color: #aaa;
  pointer-events: none;
  /* Inherit the same metrics as typed text so the contentEditable line box
     (and therefore the blinking caret) sits on the same baseline as the
     placeholder. Without this, the placeholder uses the default inline
     line-height while the typed-text run uses 30px, and the caret floats
     above the placeholder text. */
  line-height: inherit;
  font-size: inherit;
  font-family: inherit;
  vertical-align: baseline;
}

.chat-input-button {
  align-self: flex-end;
  border: none;
  background-color: transparent;
  width: 24px;
  height: 24px;
  padding: 0px;
  margin: 6px 3.5px;
  cursor: pointer;
  /* Inherit the host theme's foreground so glyph buttons (e.g. stop ■)
     render in the same colour as the surrounding text instead of the
     browser default. Hosts can override --chat-input-button-color. */
  color: var(--chat-input-button-color, #e8e8f0);
}

.chat-input-button:disabled svg {
  fill: lightslategray;
}

.chat-stop-button {
  /* Match shell: no special color override, just rely on .chat-input-button
     defaults. Increase the glyph size so the ■ fills the 24x24 button. */
  font-size: 18px;
  line-height: 24px;
}

/* Ghost text for inline command completion preview */
.chat-input-ghost {
  color: #999;
  pointer-events: none;
  white-space: pre;
  line-height: 30px;
  font-family: inherit;
  font-size: inherit;
  user-select: none;
}

/* =========================================================================
   Session History
   ========================================================================= */

.chat-history-separator {
  text-align: center;
  color: #999;
  font-size: 12px;
  padding: 8px 0;
  border-top: 1px solid #e0e0e0;
  margin: 8px 20px;
}

.chat-history-message {
  opacity: 0.55;
}

/* =========================================================================
   Interactive Prompt Buttons (Yes/No, Accept/Cancel)
   ========================================================================= */

.chat-prompt-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding: 4px 0;
}

.chat-prompt-button {
  padding: 6px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
}

.chat-prompt-yes {
  background-color: #e8f5e9;
  border-color: #81c784;
  color: #2e7d32;
}

.chat-prompt-yes:hover {
  background-color: #c8e6c9;
}

.chat-prompt-no {
  background-color: #fce4ec;
  border-color: #e57373;
  color: #c62828;
}

.chat-prompt-no:hover {
  background-color: #f8bbd0;
}

/* =========================================================================
   File Attachment / Drag-Drop
   ========================================================================= */

.chat-input-dragover {
  border-color: #4fc3f7 !important;
  background-color: #e1f5fe !important;
}

.chat-attachment-preview {
  display: flex;
  gap: 6px;
  padding: 4px 8px;
  flex-wrap: wrap;
  width: 100%;
}

.chat-attachment-item {
  position: relative;
  display: inline-block;
}

.chat-attachment-thumb {
  height: 48px;
  border-radius: 4px;
  border: 1px solid #ddd;
}

/* =========================================================================
   Follow-Up Action Buttons
   ========================================================================= */

.chat-followup-buttons {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 4px 0;
  flex-wrap: wrap;
}

.chat-followup-button {
  padding: 6px 14px;
  border: 1px solid #90caf9;
  border-radius: 16px;
  background: #e3f2fd;
  color: #1565c0;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.chat-followup-button:hover {
  background: #bbdefb;
  border-color: #42a5f5;
}

.chat-attachment-remove {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #e57373;
  color: white;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 12px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
}

/* =========================================================================
   Message Containers
   ========================================================================= */

.chat-message-container {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 2px;
  margin-top: 2px;
  width: 55%;
  transform-origin: 0 100%;
  transform: scale(0);
  animation: message 0.15s ease-out 0s forwards;
}

.chat-message-container-agent {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 2px;
  margin-top: 2px;
  width: 55%;
  transform-origin: 0 100%;
  transform: scale(0);
  animation: message 0.15s ease-out 0s forwards;
  margin-left: 10px;
}

.chat-message-container-user {
  padding-left: 10px;
  padding-right: 10px;
  margin-bottom: 2px;
  margin-top: 2px;
  width: 55%;
  transform-origin: 0 100%;
  transform: scale(0);
  animation: message 0.15s ease-out 0s forwards;
  margin-right: 10px;
  align-self: flex-end;
}

@keyframes message {
  0% {
  }
  100% {
    transform: scale(1);
    overflow: visible;
  }
}

/* =========================================================================
   Message Body
   ========================================================================= */

.chat-message-body {
  border-radius: 8px;
  margin-bottom: 4px;
}

.chat-message-user {
  border-radius: 8px;
  margin-bottom: 4px;
  position: relative;
  background-color: lavender;
  margin-right: 30px;
}

.chat-message-agent {
  left: 30px;
  position: relative;
  background-color: #d6f3ff;
  border-radius: 8px;
  margin-bottom: 4px;
}

/* =========================================================================
   Message Content
   ========================================================================= */

.chat-message-content {
  padding: 6px 15px 6px 15px;
  word-wrap: break-word;
  overflow-x: auto;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chat-message-kind-status {
  font-style: italic;
  color: grey;
}

/* =========================================================================
   Status (transient) Bubble
   ========================================================================= */

/* Used for transient indicators emitted via `appendDisplay(..., "temporary")`
   such as the dispatcher's "Executing action ..." line and reasoning's
   streaming "Thinking…" chunks. We strip the agent-bubble chrome so the
   user can't mistake the status indicator for a duplicate of the real
   reply bubble that follows. */
.chat-message-status-bubble .chat-timestamp-agent,
.chat-message-status-bubble .agent-icon,
.chat-message-status-bubble .chat-message-metrics {
  display: none;
}
.chat-message-status-bubble .chat-message-agent {
  background-color: transparent;
  box-shadow: none;
  font-style: italic;
  color: grey;
}
.chat-message-status-bubble .chat-message-content {
  box-shadow: none;
  padding: 2px 15px 2px 15px;
}

.chat-message-kind-warning {
  font-style: italic;
  color: rgb(146, 146, 0);
}

.chat-message-kind-error {
  font-style: italic;
  color: red;
}

.chat-message-kind-success {
  font-style: italic;
  color: green;
}

.chat-message-agent-text {
  white-space: break-spaces;
}

.chat-message-user-text {
  white-space: break-spaces;
}

.chat-message-hidden {
  display: none;
  visibility: hidden;
}

.chat-message-action-data {
  white-space: nowrap;
  font-size: 80%;
}

/* =========================================================================
   Tables
   ========================================================================= */

table.table-message {
  table-layout: fixed;
  text-overflow: ellipsis;
  text-wrap: pretty;
  width: 100%;
}

table.table-message th,
table.table-message td {
  border: solid 1px black;
  padding: 0px 10px 0px 10px;
}

/* =========================================================================
   Metrics (hover-reveal)
   ========================================================================= */

.chat-message-metrics {
  margin: 0px;
  border-radius: 0px 0px 8px 8px;
  font-size: 10px;
  font-style: normal;
  z-index: 50;
  text-align: right;
}

.chat-message-metrics-agent {
  margin: 0px;
  border-radius: 0px 0px 8px 8px;
  font-size: 10px;
  font-style: normal;
  z-index: 50;
  text-align: right;
  background-color: #c2edff;
}

.chat-message-metrics-user {
  margin: 0px;
  border-radius: 0px 0px 8px 8px;
  font-size: 10px;
  font-style: normal;
  z-index: 50;
  text-align: right;
  background-color: #e2e0ec;
}

/* Two-column layout used inside the metrics tooltip:
   left = phase marks, middle = reserved (tts), right = main totals. */
.metrics-details {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  box-sizing: border-box;
  /* Allow long lines (e.g. token totals) to wrap inside their column
     rather than overflow the tooltip in narrow webview sidebars. */
  word-break: normal;
  overflow-wrap: anywhere;
}
.metrics-details > div {
  margin-left: 5px;
  margin-right: 5px;
  min-width: 0;
}
.metrics-details > div:first-child {
  text-align: left;
}
.metrics-details > div:last-child {
  text-align: right;
}

/* When the agent name is clicked, the message body is replaced with a
   pretty-printed JSON view of the action payload. */
.chat-message-action-data {
  font-family: var(
    --vscode-editor-font-family,
    Consolas,
    "Courier New",
    monospace
  );
  font-size: 12px;
  padding: 4px 0;
}
.chat-message-action-data pre {
  margin: 0;
  padding: 8px;
  background: rgba(127, 127, 127, 0.1);
  border-radius: 6px;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.4;
}

/* Hide-by-default metrics; only react to hover (and only show the
   tooltip if there's actual metrics content). The `:has()` guard
   keeps non-metric bubbles (system messages, history without
   timings) from triggering an empty hover strip. */
.chat-message-body-hide-metrics .chat-message-metrics {
  display: none;
}

.chat-message-body-hide-metrics:has(.chat-message-metrics:not(:empty)):hover {
  border-radius: 8px 8px 0px 0px;
}

.chat-message-body-hide-metrics:has(.chat-message-metrics:not(:empty)):hover
  .chat-message-metrics {
  display: block;
  /* Absolute positioning below the bubble so the bubble itself does NOT
     change size on hover. With the surrounding chat using
     `flex-direction: column-reverse`, growing the bubble would shift its
     contents (links, buttons) upward — making them hard to click while
     hovering. Anchoring the metrics overlay to the bubble's bottom edge
     keeps the bubble (and any link the user is aiming for) perfectly
     still. To avoid the overlay covering the next bubble, the
     `:has(~ *:hover)` rule below translates visually-lower bubbles
     (= DOM-earlier siblings in column-reverse) down to make room. */
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  transform-origin: 0 0;
  transform: scaleY(0);
  animation: metrics 0.15s ease-out 0s forwards;
}

/* (No CSS push-down rule here — handled in JS via mouseenter/mouseleave
   on each agent bubble, which translates DOM-earlier siblings down by
   the actual measured overlay height. CSS-only `:has(~ ...:hover)`
   proved unreliable against the column-reverse layout.) */

@keyframes metrics {
  0% {
  }
  100% {
    transform: scaleY(1);
    overflow: visible;
  }
}

/* =========================================================================
   Timestamps & Icons
   ========================================================================= */

.chat-timestamp {
  font-size: 10px;
  font-style: normal;
  color: darkgray;
  position: relative;
  margin: 4px;
}

.chat-timestamp-agent {
  font-size: 10px;
  font-style: normal;
  color: darkgray;
  position: relative;
  margin: 4px;
  margin-left: 34px;
}

.chat-timestamp-user {
  font-size: 10px;
  font-style: normal;
  color: darkgray;
  position: relative;
  margin: 4px;
  text-align: end;
  margin-right: 35px;
}

.user-icon {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  position: absolute;
  right: 0px;
  font-size: 20px;
  font-style: normal;
  /* Use flex so the glyph is perfectly centered horizontally and
     vertically inside the circle. */
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background: plum;
  color: purple;
  font-family: sans-serif;
  font-weight: 300;
}

.agent-icon {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  position: absolute;
  left: 0px;
  font-size: 20px;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.agent-name {
  font-style: normal;
  font-weight: bold;
  margin-right: 8px;
}

.timestring {
  font-style: normal;
}

/* Clickable timestamp to toggle action details */
.chat-timestamp-toggle {
  cursor: pointer;
  user-select: none;
}

.chat-timestamp-toggle:hover {
  color: #555;
}

/* Collapsible action details — hidden by default */
.chat-message-details {
  display: none;
  font-size: 12px;
  padding: 4px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Pretty-printed JSON inside the collapsible details area. */
.chat-message-details pre {
  margin: 0;
  padding: 8px;
  background: rgba(127, 127, 127, 0.1);
  border-radius: 6px;
  white-space: pre;
  overflow-x: auto;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.4;
  color: inherit;
}

/* JSON syntax highlighting tokens (set by highlightJson()).
   `!important` because the host theme (e.g. vscode-shell's overlay)
   applies `color: ... !important` to the parent bubble; without it
   inheritance makes the spans render as the bubble's foreground color. */
.chat-message-details pre.chat-json .json-key {
  color: #9c27b0 !important;
  font-weight: 600;
}
.chat-message-details pre.chat-json .json-string {
  color: #0a8043 !important;
}
.chat-message-details pre.chat-json .json-number {
  color: #1976d2 !important;
}
.chat-message-details pre.chat-json .json-bool {
  color: #b85c00 !important;
  font-weight: 600;
}
.chat-message-details pre.chat-json .json-null {
  color: #888 !important;
  font-style: italic;
}

.chat-message-details.chat-details-visible {
  display: block;
}

/* =========================================================================
   Choice Panel
   ========================================================================= */

.choice-panel {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 40px;
  font-family: inherit;
  font-size: inherit;
}

.choice-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 8px;
  width: 100%;
}

.choice-button:hover {
  background-color: #c6e3ef;
}

.choice-button:focus {
  box-shadow:
    inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2),
    0px 0.5px 1px rgba(0, 0, 0, 0.1),
    0px 0px 0px 3.5px rgba(58, 108, 217, 0.5);
  outline: 0;
}

/* =========================================================================
   Explained tooltips
   ========================================================================= */

.chat-message-explained {
  position: relative;
}

.chat-message-explained-icon {
  align-self: flex-end;
  border: none;
  background-color: transparent;
  margin-right: 5px;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 0;
}

.chat-message-explained[data-expl]:has(
    .chat-message-explained-icon:hover
  )::after {
  content: attr(data-expl);
  position: absolute;
  text-align: right;
  top: 0px;
  right: 30px;
  white-space: nowrap;
  color: gray;
  background-color: lightyellow;
  border: 1px solid black;
  padding: 1px 5px;
  font-size: 70%;
  z-index: 10;
}

/* =========================================================================
   ANSI color classes (from ansi_up)
   ========================================================================= */

span.ansi-black-fg {
  color: black;
}
span.ansi-red-fg {
  color: rgb(128, 0, 0);
}
span.ansi-green-fg {
  color: rgb(0, 128, 0);
}
span.ansi-yellow-fg {
  color: rgb(128, 128, 0);
}
span.ansi-blue-fg {
  color: rgb(0, 0, 128);
}
span.ansi-magenta-fg {
  color: rgb(128, 0, 128);
}
span.ansi-cyan-fg {
  color: rgb(0, 128, 128);
}
span.ansi-white-fg {
  color: rgb(192, 192, 192);
}
span.ansi-gray-fg,
span.ansi-bright-black-fg {
  color: rgb(128, 128, 128);
}
span.ansi-bright-red-fg {
  color: rgb(192, 0, 0);
}
span.ansi-bright-green-fg {
  color: rgb(0, 192, 0);
}
span.ansi-bright-yellow-fg {
  color: rgb(192, 192, 0);
}
span.ansi-bright-blue-fg {
  color: rgb(0, 0, 192);
}
span.ansi-bright-magenta-fg {
  color: rgb(192, 0, 192);
}
span.ansi-bright-cyan-fg {
  color: rgb(0, 192, 192);
}
span.ansi-bright-white-fg {
  color: rgb(255, 255, 255);
}

/* =========================================================================
   Scrollbar styling
   ========================================================================= */

.chat::-webkit-scrollbar {
  width: 10px;
}

.chat::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0);
}

.chat::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px;
}

.chat::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.chat::-webkit-scrollbar-track {
  background-color: rgba(0, 0, 0, 0);
  margin-right: 4px;
}

/* =========================================================================
   Misc
   ========================================================================= */

.clickable {
  cursor: pointer;
}

.notification {
  font-size: 10px;
}

.notification-error {
  color: red;
}
.notification-warning {
  color: orange;
}
.notification-info {
  color: blue;
}

.references {
  font-size: small;
  font-weight: 400;
}

.references a {
  font-size: small;
  font-weight: 200;
}

/* =========================================================================
   Separator (between sessions)
   ========================================================================= */

.chat-separator {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  text-align: center;
  font-size: 10px;
  margin: 20px 20px;
}

.chat-separator-line {
  flex-grow: 1;
  width: 40px;
  background-color: darkgray;
  height: 2px;
}

.chat-separator-text {
  margin: 0px 10px;
  color: darkgray;
  height: 20px;
}

/* =========================================================================
   System messages (host notices: @config confirmations, session lifecycle)
   ========================================================================= */
.chat-message-system {
  align-self: center;
  font-size: 12px;
  color: rgb(120, 120, 120);
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  padding: 4px 10px;
  margin: 6px 0;
  font-style: italic;
}

/* =========================================================================
   Input state classes (added by setSwitching / setHistoryLoading)
   ========================================================================= */
.chat-input-switching .user-textarea,
.chat-input-history-loading .user-textarea {
  opacity: 0.6;
}

/* =========================================================================
   Feedback widget — mirrors packages/shell/src/renderer/assets/styles.less.
   Keep both in sync when changing class names or layout.
   ========================================================================= */

.chat-message-container-agent.chat-message-trashed > .chat-timestamp-agent,
.chat-message-container-agent.chat-message-trashed > .agent-icon,
.chat-message-container-agent.chat-message-trashed > .chat-message-body,
.chat-message-container-agent.chat-message-trashed
  > .chat-message-body-hide-metrics,
.chat-message-container-agent.chat-message-trashed > .chat-message-actions,
.chat-message-container-user.chat-message-trashed > .chat-timestamp-user,
.chat-message-container-user.chat-message-trashed > .user-icon,
.chat-message-container-user.chat-message-trashed > .chat-message-body,
.chat-message-container-user.chat-message-trashed
  > .chat-message-body-hide-metrics {
  display: none;
}
.chat-message-container-agent.chat-message-trashed,
.chat-message-container-user.chat-message-trashed {
  animation: chat-trashed-collapse 6s linear forwards;
}
.chat-message-container-agent.chat-message-trashed::after,
.chat-message-container-user.chat-message-trashed::after {
  content: "🗑  message hidden";
  display: block;
  font-size: 11px;
  color: #888;
  font-style: italic;
  padding: 4px 0;
  animation: chat-trashed-fade 6s linear forwards;
}
.chat-message-container-agent.chat-message-trashed::after {
  margin-left: 40px;
}
.chat-message-container-user.chat-message-trashed::after {
  text-align: right;
  margin-right: 40px;
}
@keyframes chat-trashed-fade {
  0%,
  66.67% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes chat-trashed-collapse {
  0%,
  99.99% {
  }
  100% {
    display: none;
  }
}

.chat-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 6px;
  color: #8a8a8a;
  cursor: pointer;
  transition:
    background 0.12s ease,
    color 0.12s ease,
    opacity 0.12s ease;
}
.chat-action-button i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.chat-action-button i svg {
  width: 16px;
  height: 16px;
}
.chat-action-button:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #333;
}
.chat-action-button:focus-visible {
  outline: 2px solid #1f6feb;
  outline-offset: 1px;
}
.chat-action-button.feedback-selected {
  color: #1f6feb;
}
.chat-action-button[data-action="thumbs-down"].feedback-selected {
  color: #c83e3e;
}
.chat-action-button.feedback-copied {
  color: #2e8b57;
}

.chat-message-actions {
  display: flex;
  gap: 2px;
  margin: 2px 0 6px 40px;
  align-items: center;
  opacity: 0.65;
  transition: opacity 0.15s ease;
}
.chat-message-container-agent:hover .chat-message-actions,
.chat-message-container-agent.feedback-rated .chat-message-actions {
  opacity: 1;
}

/* Dropdown menu */
.chat-feedback-menu {
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 4px;
  min-width: 220px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
}
.chat-feedback-menu-item {
  border: none;
  background: transparent;
  text-align: left;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
  font: inherit;
  color: #222;
}
.chat-feedback-menu-item:hover {
  background: #f3f5f7;
}

/* Popover card */
.chat-feedback-popover {
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 10px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  padding: 14px 16px;
  width: 340px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #222;
}
.chat-feedback-popover-heading {
  font-weight: 600;
  font-size: 14px;
}
.chat-feedback-popover-subtitle {
  color: #555;
  font-size: 11px;
  line-height: 1.4;
}
.chat-feedback-popover-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-weight: 500;
}
.chat-feedback-popover-textarea {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  border-radius: 6px;
  border: 1px solid #d0d7de;
  padding: 6px 8px;
  font: inherit;
}
.chat-feedback-popover-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.chat-feedback-popover-fieldset legend {
  font-weight: 500;
  font-size: 12px;
  padding: 0 0 4px 0;
  color: #444;
}
.chat-feedback-popover-radio {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  cursor: pointer;
}
.chat-feedback-popover-share {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 12px;
  color: #444;
  line-height: 1.4;
}
.chat-feedback-popover-share input {
  margin-top: 2px;
}
.chat-feedback-popover-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.chat-feedback-popover-button {
  border: 1px solid #d0d7de;
  background: #fff;
  border-radius: 6px;
  padding: 6px 12px;
  cursor: pointer;
  font: inherit;
  color: #222;
}
.chat-feedback-popover-button:hover {
  background: #f3f5f7;
}
.chat-feedback-popover-button.submit {
  background: #1f6feb;
  color: #fff;
  border-color: #1f6feb;
}
.chat-feedback-popover-button.submit:hover {
  background: #1860d3;
}
.chat-feedback-popover-button.clear {
  color: #a23737;
  border-color: transparent;
}

/* =========================================================================
   Context Menu (right-click copy/paste)
   ========================================================================= */
.chat-context-menu {
  position: fixed;
  z-index: 10000;
  min-width: 140px;
  background: #fff;
  border: 1px solid #d0d7de;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  padding: 4px 0;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 13px;
  color: #1f2328;
  user-select: none;
}

.chat-context-menu-item {
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.chat-context-menu-item:hover {
  background: #f3f4f6;
}

.chat-context-menu-item-disabled {
  color: #9aa0a6;
  cursor: default;
}

.chat-context-menu-item-disabled:hover {
  background: transparent;
}
