From 2b6597ad00ed283b0e922983fe710d433a74ebf2 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Sat, 15 Nov 2025 22:54:00 +0000
Subject: [PATCH] prune duplicate messaging styles now sourced from scoped
 files

---
 src/styles/messaging.css | 684 ---------------------------------------
 1 file changed, 684 deletions(-)

diff --git a/src/styles/messaging.css b/src/styles/messaging.css
index 4b55bc5f..0da75ebe 100644
--- a/src/styles/messaging.css
+++ b/src/styles/messaging.css
@@ -51,92 +51,6 @@
   animation: pulse 1.5s ease-in-out infinite;
 }
 
-/* Prompt input component utilities */
-.prompt-input-container {
-  @apply flex flex-col border-t;
-  border-color: var(--border-base);
-  background-color: var(--surface-base);
-}
-
-.prompt-input-wrapper {
-  @apply flex items-end gap-2 p-3;
-}
-
-.prompt-input {
-  @apply flex-1 min-h-[96px] max-h-[200px] p-2.5 border rounded-md text-sm resize-none outline-none transition-colors;
-  font-family: inherit;
-  background-color: var(--surface-base);
-  color: inherit;
-  border-color: var(--border-base);
-  line-height: var(--line-height-normal);
-}
-
-.prompt-input:focus {
-  border-color: var(--accent-primary);
-}
-
-.prompt-input:disabled {
-  @apply opacity-60 cursor-not-allowed;
-}
-
-.prompt-input::placeholder {
-  color: var(--text-muted);
-}
-
-.send-button {
-  @apply w-10 h-10 rounded-md border-none cursor-pointer flex items-center justify-center transition-all flex-shrink-0;
-  background-color: var(--accent-primary);
-  color: var(--text-inverted);
-}
-
-.send-button:hover:not(:disabled) {
-  @apply opacity-90 scale-105;
-}
-
-.send-button:active:not(:disabled) {
-  @apply scale-95;
-}
-
-.send-button:disabled {
-  @apply opacity-40 cursor-not-allowed;
-}
-
-.send-icon {
-  @apply text-base;
-}
-
-.prompt-input-hints {
-  @apply px-4 pb-2 flex justify-between items-center;
-}
-
-.hint {
-  @apply text-xs;
-  color: var(--text-muted);
-}
-
-.hint kbd {
-  @apply inline-block px-1.5 py-0.5 text-xs font-mono rounded mx-0.5;
-  background-color: var(--surface-secondary);
-  border: 1px solid var(--border-base);
-  border-radius: 3px;
-}
-
-/* Attachment chip utilities */
-.attachment-chip {
-  @apply px-2.5 py-1 text-xs font-medium ring-1 ring-inset;
-  background-color: var(--attachment-chip-bg);
-  color: var(--attachment-chip-text);
-  ring-color: var(--attachment-chip-ring);
-}
-
-.attachment-remove {
-  @apply ml-0.5 flex h-4 w-4 items-center justify-center rounded transition-colors;
-}
-
-.attachment-remove:hover {
-  background-color: var(--attachment-chip-ring);
-}
-
 /* Message stream component utilities */
 .message-stream-container {
   @apply relative flex-1 min-h-0 flex flex-col overflow-hidden;
@@ -192,69 +106,6 @@
   color: var(--accent-primary);
 }
 
-/* Tool call message wrapper */
-.tool-call-message {
-  @apply flex flex-col gap-2 p-3 w-full;
-  background-color: var(--message-tool-bg);
-  border-left: 4px solid var(--message-tool-border);
-  color: inherit;
-}
-
-.tool-call-header-label {
-  @apply flex items-center justify-between gap-2 font-semibold text-sm;
-  color: var(--message-tool-border);
-  margin-bottom: 1px;
-}
-
-.tool-call-header-meta {
-  @apply flex items-center gap-2;
-}
-
-.tool-call-header-button {
-  background-color: transparent;
-  border: 1px solid var(--border-base);
-  color: var(--message-tool-border);
-  padding: 0.15rem 0.75rem;
-  border-radius: 0.375rem;
-  font-size: 0.75rem;
-  font-weight: var(--font-weight-semibold);
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: 1.5rem;
-  transition: all 0.2s ease;
-}
-
-.tool-call-header-button:hover:not(:disabled) {
-  background-color: var(--surface-hover);
-  border-color: var(--accent-primary);
-  color: var(--accent-primary);
-}
-
-.tool-call-header-button:active:not(:disabled) {
-  transform: scale(0.95);
-}
-
-.tool-call-header-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.tool-call-header-label .tool-call-icon {
-  @apply text-base;
-}
-
-.tool-call-header-label .tool-name {
-  font-family: var(--font-family-mono);
-  color: inherit;
-  background-color: var(--surface-secondary);
-  border: 1px solid var(--border-base);
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-size: 13px;
-}
-
 .message-text {
   font-size: var(--font-size-base);
   line-height: var(--line-height-normal);
@@ -313,538 +164,3 @@
   font-weight: var(--font-weight-medium);
 }
 
-/* Tool call component */
-.tool-call {
-  @apply border overflow-hidden;
-  border-color: var(--border-base);
-  color: inherit;
-  --tool-call-line-unit: 1.4em;
-  --tool-call-lines-compact: 24;
-  --tool-call-lines-large: 48;
-  --tool-call-max-height-compact: calc(var(--tool-call-lines-compact) * var(--tool-call-line-unit));
-  --tool-call-max-height-large: calc(var(--tool-call-lines-large) * var(--tool-call-line-unit));
-}
-
-.tool-call-message .tool-call {
-  border: none;
-  border-radius: 0;
-  margin: 0;
-}
-
-.tool-call-header {
-  @apply flex items-center gap-2 p-2 w-full bg-transparent border-none cursor-pointer text-left;
-  font-family: var(--font-family-mono);
-  font-size: 13px;
-  border-radius: 0;
-}
-
-.tool-call-header:hover {
-  background-color: var(--surface-hover);
-}
-
-.tool-call-icon {
-  @apply text-xs;
-}
-
-.tool-call-summary {
-  @apply flex-1 text-left;
-}
-
-.tool-call-status {
-  @apply text-sm;
-}
-
-.tool-call-status-success {
-  border-left: 3px solid var(--status-success);
-}
-
-.tool-call-status-error {
-  border-left: 3px solid var(--status-error);
-}
-
-.tool-call-status-running {
-  border-left: 3px solid var(--status-warning);
-}
-
-.tool-call-status-running .tool-call-status {
-  animation: pulse 1.5s ease-in-out infinite;
-}
-
-.tool-call-status-pending {
-  border-left: 3px solid var(--accent-primary);
-}
-
-.tool-call-status-pending .tool-call-summary {
-  animation: shimmer 2s ease-in-out infinite;
-}
-
-.tool-call-preview {
-  @apply p-2 flex flex-col gap-1.5;
-  background-color: var(--surface-code);
-  border-top: 1px solid var(--border-base);
-}
-
-.tool-call-preview-label {
-  @apply text-xs font-semibold uppercase tracking-wide;
-  color: var(--text-muted);
-  letter-spacing: 0.5px;
-}
-
-.tool-call-preview-text {
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-tight);
-  color: var(--text-muted);
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  max-height: var(--tool-call-max-height-compact, calc(25 * 1.4em));
-  overflow-y: scroll;
-}
-
-.tool-call-details {
-
-  @apply flex flex-col;
-  background-color: var(--surface-code);
-  font-size: var(--font-size-xs);
-}
-
-.tool-call-markdown {
-  background-color: var(--surface-code);
-  border: none;
-  border-radius: 0;
-  padding: 0;
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-tight);
-  max-height: var(--tool-call-max-height-compact, calc(25 * 1.4em));
-  overflow-y: scroll;
-  scrollbar-width: thin;
-  scrollbar-color: var(--border-base) transparent;
-  scrollbar-gutter: stable both-edges;
-  position: relative;
-}
-
-.tool-call-markdown-large {
-  max-height: var(--tool-call-max-height-large, calc(48 * 1.4em));
-}
-
-.tool-call-diff-shell {
-  padding: 0;
-}
-
-.tool-call-diff-viewer {
-  max-height: var(--tool-call-max-height-large, calc(48 * 1.4em));
-  overflow: auto;
-  background-color: var(--surface-code);
-}
-
-.tool-call-diff-toolbar {
-  @apply flex items-center justify-between gap-3 px-3 py-2;
-  background-color: var(--surface-secondary);
-  border-bottom: 1px solid var(--border-base);
-}
-
-.tool-call-diff-toolbar-label {
-  font-size: 11px;
-  color: var(--text-muted);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.tool-call-diff-toggle {
-  @apply inline-flex items-center gap-1;
-}
-
-.tool-call-diff-mode-button {
-  @apply border text-xs font-semibold px-3 py-1 rounded transition-all duration-150;
-  border-color: var(--border-base);
-  background-color: transparent;
-  color: var(--text-muted);
-}
-
-.tool-call-diff-mode-button:hover {
-  background-color: var(--surface-hover);
-  color: var(--text-primary);
-}
-
-.tool-call-diff-mode-button.active {
-  background-color: var(--accent-primary);
-  border-color: var(--accent-primary);
-  color: var(--text-inverted);
-}
-
-.tool-call-diff-viewer .diff-tailwindcss-wrapper {
-  background-color: transparent;
-  color: inherit;
-}
-
-.tool-call-diff-viewer .diff-view-wrapper {
-  font-family: var(--font-family-mono);
-}
-
-.tool-call-diff-fallback {
-  margin: 0;
-  padding: 0.75rem;
-  background-color: var(--surface-code);
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-tight);
-}
-
-.tool-call-diff-viewer .diff-line-old-num,
-.tool-call-diff-viewer .diff-line-new-num,
-.tool-call-diff-viewer .diff-line-num {
-  width: auto !important;
-  min-width: 4ch;
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-  white-space: nowrap;
-}
-
-.tool-call-markdown .markdown-code-block {
-
-  margin: 0;
-  border: none;
-  background-color: transparent;
-}
-
-.tool-call-markdown .code-block-header {
-  position: sticky;
-  top: 0;
-  z-index: auto;
-  box-shadow: 0 1px 0 var(--border-base);
-}
-
-.tool-call-markdown .markdown-code-block pre {
-  margin: 0 !important;
-  min-height: auto;
-  max-height: none;
-  overflow-y: visible;
-}
-
-.tool-call-markdown::-webkit-scrollbar {
-  width: 8px;
-}
-
-.tool-call-markdown::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.tool-call-markdown::-webkit-scrollbar-thumb {
-  background-color: var(--border-base);
-  border-radius: 4px;
-  border: 2px solid transparent;
-  background-clip: padding-box;
-}
-
-.tool-call-section h4 {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  margin-bottom: 4px;
-  color: var(--text-muted);
-}
-
-.tool-call-section pre {
-  margin: 0;
-  padding: 8px;
-  background-color: var(--surface-base);
-  border-radius: 0px;
-  overflow-x: auto;
-  max-height: var(--tool-call-max-height-compact, calc(25 * 1.4em));
-  overflow-y: scroll;
-}
-
-.tool-call-section code {
-
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-tight);
-}
-
-.tool-call-section pre::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.tool-call-section pre::-webkit-scrollbar-track {
-  background: var(--surface-secondary);
-  border-radius: 0px;
-}
-
-.tool-call-section pre::-webkit-scrollbar-thumb {
-  background: var(--border-base);
-  border-radius: 0px;
-}
-
-.tool-call-section pre::-webkit-scrollbar-thumb:hover {
-  background: var(--text-muted);
-}
-
-.tool-call-pending-message {
-  @apply flex items-center gap-2 p-3 text-xs italic;
-  color: var(--text-muted);
-}
-
-.tool-call-emoji {
-  @apply text-base mr-1;
-}
-
-.tool-call-action-button {
-  @apply border text-xs font-semibold px-3 py-1 rounded transition-colors h-8 flex items-center;
-  border-color: var(--border-base);
-  color: var(--text-muted);
-  background-color: transparent;
-}
-
-.tool-call-action-button:hover:not(:disabled) {
-  background-color: var(--surface-hover);
-  color: var(--text-primary);
-}
-
-.tool-call-action-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.tool-call-bash,
-.tool-call-diff {
-  @apply my-2;
-}
-
-.tool-call-content {
-  background-color: var(--surface-secondary);
-  border: 1px solid var(--border-base);
-  border-radius: 0;
-  padding: 8px 12px;
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-tight);
-  overflow-x: auto;
-  margin: 0;
-}
-
-.tool-call-content code {
-  font-family: inherit;
-  background: none;
-  padding: 0;
-  font-size: inherit;
-}
-
-.tool-call-todos {
-  @apply my-2 flex flex-col gap-2;
-  list-style: none;
-  padding: 4px 0;
-}
-
-.tool-call-todo-item {
-  @apply flex items-start gap-3;
-  border: 1px solid var(--border-base);
-  border-radius: 8px;
-  padding: 10px 12px;
-  background-color: var(--surface-secondary);
-}
-
-.tool-call-todo-item-completed {
-  background-color: var(--surface-code);
-}
-
-.tool-call-todo-item-active {
-  border-color: var(--accent-primary);
-  background-color: var(--surface-hover);
-}
-
-.tool-call-todo-item-cancelled {
-  opacity: 0.75;
-}
-
-.tool-call-todo-checkbox {
-  width: 1.1rem;
-  height: 1.1rem;
-  border-radius: 9999px;
-  border: 2px solid var(--border-base);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.75rem;
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-muted);
-  background-color: transparent;
-}
-
-.tool-call-todo-checkbox::after {
-  content: "";
-  line-height: 1;
-}
-
-.tool-call-todo-checkbox[data-status="completed"] {
-  background-color: var(--accent-primary);
-  border-color: var(--accent-primary);
-  color: var(--text-inverted);
-}
-
-.tool-call-todo-checkbox[data-status="completed"]::after {
-  content: "✓";
-}
-
-.tool-call-todo-checkbox[data-status="in_progress"]::after {
-  content: "…";
-  color: var(--accent-primary);
-}
-
-.tool-call-todo-checkbox[data-status="cancelled"]::after {
-  content: "×";
-  color: var(--status-error);
-}
-
-.tool-call-todo-body {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.tool-call-todo-text {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-tight);
-  color: var(--text-primary);
-}
-
-.tool-call-todo-item-cancelled .tool-call-todo-text {
-  text-decoration: line-through;
-  color: var(--text-muted);
-}
-
-.tool-call-todo-tag {
-  font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  border-radius: 9999px;
-  padding: 2px 8px;
-  background-color: var(--surface-hover);
-  color: var(--text-muted);
-}
-
-.tool-call-todo-item-active .tool-call-todo-tag {
-  background-color: var(--accent-primary);
-  color: var(--text-inverted);
-}
-
-.tool-call-task-container {
-  padding: 12px;
-}
-
-.tool-call-task-summary {
-  @apply my-2 flex flex-col gap-1.5;
-}
-
-.tool-call-task-item {
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-normal);
-  padding-left: 8px;
-  border-left: 2px solid var(--border-base);
-}
-
-.tool-call-task-item::before {
-  content: "∟ ";
-  color: var(--text-muted);
-}
-
-.tool-call-error-content {
-  background-color: var(--message-error-bg);
-  border-left: 3px solid var(--status-error);
-  padding: 12px;
-  margin: 8px 0;
-  border-radius: 4px;
-  color: var(--status-error);
-  font-size: var(--font-size-xs);
-}
-
-.tool-call-error-content strong {
-  font-weight: var(--font-weight-semibold);
-}
-
-.dropdown-diff-added {
-  @apply text-xs;
-  color: var(--status-success);
-}
-
-.dropdown-diff-removed {
-  @apply text-xs;
-  color: var(--status-error);
-}
-
-/* Log view specific utilities */
-.log-container {
-  @apply flex flex-col h-full;
-  background-color: var(--surface-base);
-}
-
-.log-header {
-  @apply flex items-center justify-between px-4 py-3 border-b;
-  border-color: var(--border-base);
-  background-color: var(--surface-secondary);
-}
-
-.log-content {
-  @apply flex-1 overflow-y-auto p-4 font-mono text-xs leading-relaxed;
-  background-color: var(--surface-secondary);
-  color: var(--text-primary);
-}
-
-.log-entry {
-  @apply flex gap-3 py-0.5 px-2 -mx-2 rounded transition-colors;
-}
-
-.log-entry:hover {
-  background-color: var(--surface-hover);
-}
-
-.log-timestamp {
-  @apply select-none shrink-0;
-  color: var(--text-muted);
-}
-
-.log-message {
-  @apply break-all;
-}
-
-.log-level-error {
-  color: var(--log-level-error);
-}
-
-.log-level-warn {
-  color: var(--log-level-warn);
-}
-
-.log-level-debug {
-  color: var(--log-level-debug);
-}
-
-.log-level-default {
-  color: var(--log-level-default);
-}
-
-.log-empty-state {
-  @apply text-center py-8;
-  color: var(--text-muted);
-}
-
-.log-paused-state {
-  @apply flex flex-col items-center justify-center gap-3 text-center py-10 px-6;
-  border: 1px dashed var(--border-base);
-  border-radius: 12px;
-  background-color: var(--surface-base);
-}
-
-.log-paused-title {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-semibold);
-  color: var(--text-primary);
-}
-
-.log-paused-description {
-  font-size: var(--font-size-sm);
-  color: var(--text-secondary);
-  max-width: 320px;
-}
-