1/* CSS Reset and Base Styles */
   2* {
   3  box-sizing: border-box;
   4}
   5
   6html {
   7  height: 100%;
   8  height: 100dvh;
   9  overflow: hidden;
  10}
  11
  12body {
  13  margin: 0;
  14  height: 100%;
  15  overflow: hidden;
  16  font-family:
  17    "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  18  line-height: 1.6;
  19  -webkit-font-smoothing: antialiased;
  20  letter-spacing: -0.01em;
  21  color: var(--text-primary);
  22  background: var(--bg-secondary);
  23}
  24
  25/* CSS Variables */
  26:root {
  27  --font-mono:
  28    "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  29  --primary: #2563eb;
  30  --primary-dark: #1d4ed8;
  31  --bg-base: #ffffff;
  32  --bg-secondary: #f9fafb;
  33  --bg-tertiary: #f3f4f6;
  34  --border: #e5e7eb;
  35  --text-primary: #111827;
  36  --text-secondary: #6b7280;
  37  --text-tertiary: #9ca3af;
  38  --success-bg: #f0fdf4;
  39  --success-border: #bbf7d0;
  40  --success-text: #166534;
  41  --error-bg: #fef2f2;
  42  --error-border: #fecaca;
  43  --error-text: #991b1b;
  44  --warning-bg: #fffbeb;
  45  --warning-border: #fcd34d;
  46  --warning-text: #92400e;
  47  --blue-bg: #eff6ff;
  48  --blue-border: #bfdbfe;
  49  --blue-text: #1e40af;
  50  --user-message-text: #2563eb;
  51  --link-color: #2563eb;
  52  --green-600: #16a34a;
  53  --green-700: #15803d;
  54  --gray-50: #f9fafb;
  55  --gray-100: #f3f4f6;
  56  --gray-200: #e5e7eb;
  57  --gray-300: #d1d5db;
  58  --gray-400: #9ca3af;
  59  --gray-500: #6b7280;
  60  --gray-600: #4b5563;
  61  --gray-700: #374151;
  62  --gray-800: #1f2937;
  63  --gray-900: #111827;
  64}
  65
  66.dark {
  67  --bg-base: #1f2937;
  68  --bg-secondary: #111827;
  69  --bg-tertiary: #374151;
  70  --border: #374151;
  71  --text-primary: #f9fafb;
  72  --text-secondary: #9ca3af;
  73  --text-tertiary: #6b7280;
  74  --success-bg: rgba(34, 197, 94, 0.1);
  75  --success-border: rgba(34, 197, 94, 0.3);
  76  --success-text: #86efac;
  77  --error-bg: rgba(239, 68, 68, 0.1);
  78  --error-border: rgba(239, 68, 68, 0.3);
  79  --error-text: #fca5a5;
  80  --warning-bg: rgba(251, 191, 36, 0.15);
  81  --warning-border: #fbbf24;
  82  --warning-text: #fcd34d;
  83  --blue-bg: rgba(59, 130, 246, 0.1);
  84  --blue-border: rgba(59, 130, 246, 0.3);
  85  --blue-text: #93c5fd;
  86  --user-message-text: #60a5fa;
  87  --link-color: #60a5fa;
  88}
  89
  90/* Layout */
  91.app-container {
  92  display: flex;
  93  height: 100vh; /* Fallback for older browsers */
  94  height: 100dvh; /* Dynamic viewport height - adjusts when mobile browser chrome appears/hides */
  95  background: var(--bg-secondary);
  96  position: relative;
  97  overflow: hidden;
  98}
  99
 100.main-content {
 101  flex: 1;
 102  display: flex;
 103  flex-direction: column;
 104  min-width: 0;
 105}
 106
 107.screen-height {
 108  height: 100vh; /* Fallback for older browsers */
 109  height: 100dvh;
 110}
 111
 112.full-height {
 113  height: 100%;
 114}
 115
 116/* Flexbox utilities */
 117.flex {
 118  display: flex;
 119}
 120
 121.flex-col {
 122  flex-direction: column;
 123}
 124
 125.flex-1 {
 126  flex: 1;
 127}
 128
 129.items-center {
 130  align-items: center;
 131}
 132
 133.justify-center {
 134  justify-content: center;
 135}
 136
 137.justify-between {
 138  justify-content: space-between;
 139}
 140
 141.space-x-2 > * + * {
 142  margin-left: 0.5rem;
 143}
 144
 145.space-x-3 > * + * {
 146  margin-left: 0.75rem;
 147}
 148
 149.space-y-2 > * + * {
 150  margin-top: 0.5rem;
 151}
 152
 153.space-y-3 > * + * {
 154  margin-top: 0.75rem;
 155}
 156
 157.space-y-4 > * + * {
 158  margin-top: 1rem;
 159}
 160
 161/* Text */
 162.text-center {
 163  text-align: center;
 164}
 165
 166.text-sm {
 167  font-size: 0.875rem;
 168  line-height: 1.5;
 169}
 170
 171.text-xs {
 172  font-size: 0.75rem;
 173  line-height: 1.4;
 174}
 175
 176.text-lg {
 177  font-size: 1.125rem;
 178  line-height: 1.6;
 179}
 180
 181.font-medium {
 182  font-weight: 500;
 183}
 184
 185.font-semibold {
 186  font-weight: 600;
 187}
 188
 189.italic {
 190  font-style: italic;
 191}
 192
 193.truncate {
 194  overflow: hidden;
 195  text-overflow: ellipsis;
 196  white-space: nowrap;
 197}
 198
 199.break-words {
 200  word-break: break-word;
 201}
 202
 203.break-all {
 204  word-break: break-all;
 205}
 206
 207.whitespace-pre-wrap {
 208  white-space: pre-wrap;
 209}
 210
 211/* Colors */
 212.text-primary {
 213  color: var(--text-primary);
 214}
 215
 216.text-secondary {
 217  color: var(--text-secondary);
 218}
 219
 220.text-tertiary {
 221  color: var(--text-tertiary);
 222}
 223
 224.text-white {
 225  color: white;
 226}
 227
 228.text-error {
 229  color: var(--error-text);
 230}
 231
 232.text-success {
 233  color: var(--success-text);
 234}
 235
 236.text-blue {
 237  color: var(--blue-text);
 238}
 239
 240.bg-primary {
 241  background: var(--primary);
 242}
 243
 244.bg-base {
 245  background: var(--bg-base);
 246}
 247
 248.bg-secondary {
 249  background: var(--bg-secondary);
 250}
 251
 252/* Buttons */
 253button {
 254  font-family: inherit;
 255  cursor: pointer;
 256  border: none;
 257  background: none;
 258  padding: 0;
 259  color: inherit;
 260}
 261
 262.btn {
 263  padding: 0.5rem 0.75rem;
 264  border-radius: 0.25rem;
 265  transition: background-color 0.2s;
 266}
 267
 268.btn:hover {
 269  background: var(--bg-tertiary);
 270}
 271
 272.btn:disabled {
 273  opacity: 0.5;
 274  cursor: not-allowed;
 275}
 276
 277.btn-primary {
 278  padding: 0.5rem 1rem;
 279  background: var(--primary);
 280  color: white;
 281  border-radius: 0.25rem;
 282  font-weight: 500;
 283  transition: background-color 0.2s;
 284  letter-spacing: -0.01em;
 285}
 286
 287.btn-primary:hover:not(:disabled) {
 288  background: var(--primary-dark);
 289}
 290
 291.btn-primary:disabled {
 292  background: var(--gray-300);
 293  cursor: not-allowed;
 294}
 295
 296.dark .btn-primary:disabled {
 297  background: var(--gray-600);
 298}
 299
 300.btn-secondary {
 301  padding: 0.5rem 1rem;
 302  background: var(--bg-secondary);
 303  color: var(--text-primary);
 304  border: 1px solid var(--border);
 305  border-radius: 0.25rem;
 306  font-weight: 500;
 307  transition: background-color 0.2s;
 308  letter-spacing: -0.01em;
 309}
 310
 311.btn-secondary:hover {
 312  background: var(--bg-tertiary);
 313}
 314
 315.btn-sm {
 316  padding: 0.375rem 0.75rem;
 317  font-size: 0.8125rem;
 318}
 319
 320.btn-icon {
 321  padding: 0.5rem;
 322  border-radius: 0.375rem;
 323  display: flex;
 324  align-items: center;
 325  justify-content: center;
 326  transition: background-color 0.2s;
 327}
 328
 329.btn-icon:hover {
 330  background: var(--bg-tertiary);
 331}
 332
 333.btn-icon-sm {
 334  padding: 0.25rem;
 335  border-radius: 0.25rem;
 336  display: flex;
 337  align-items: center;
 338  justify-content: center;
 339  transition:
 340    background-color 0.2s,
 341    opacity 0.2s;
 342  opacity: 0.4;
 343  color: var(--text-secondary);
 344}
 345
 346.btn-icon-sm:hover {
 347  background: var(--gray-200);
 348  opacity: 1;
 349}
 350
 351.dark .btn-icon-sm:hover {
 352  background: var(--gray-600);
 353}
 354
 355.conversation-item:hover .btn-icon-sm {
 356  opacity: 0.7;
 357}
 358
 359.conversation-item.active .btn-icon-sm {
 360  color: rgba(255, 255, 255, 0.8);
 361  opacity: 0.7;
 362}
 363
 364.conversation-item.active .btn-icon-sm:hover {
 365  background: rgba(255, 255, 255, 0.2);
 366  color: white;
 367  opacity: 1;
 368}
 369
 370.btn-icon-sm.btn-danger:hover {
 371  background: var(--red-600);
 372  color: white;
 373  opacity: 1;
 374}
 375
 376.btn-new {
 377  width: 2rem;
 378  height: 2rem;
 379  background: var(--text-primary);
 380  color: var(--bg-base);
 381  border-radius: 50%;
 382  display: flex;
 383  align-items: center;
 384  justify-content: center;
 385  transition: background-color 0.2s;
 386}
 387
 388.btn-new:hover {
 389  background: var(--text-secondary);
 390}
 391
 392/* Header */
 393.header {
 394  flex: 0 0 auto;
 395  background: var(--bg-base);
 396  border-bottom: 1px solid var(--border);
 397  padding: 0.5rem 1rem;
 398  padding-top: calc(0.5rem + env(safe-area-inset-top, 0px));
 399  padding-left: max(1rem, env(safe-area-inset-left));
 400  padding-right: max(1rem, env(safe-area-inset-right));
 401  display: flex;
 402  align-items: center;
 403  justify-content: space-between;
 404  gap: 0.5rem;
 405}
 406
 407.header-left {
 408  display: flex;
 409  align-items: center;
 410  gap: 0.75rem;
 411  min-width: 0; /* Allow shrinking below content size */
 412  flex: 1 1 auto;
 413  overflow: hidden;
 414}
 415
 416.header-title {
 417  font-size: 1rem;
 418  font-weight: 600;
 419  overflow: hidden;
 420  text-overflow: ellipsis;
 421  white-space: nowrap;
 422  letter-spacing: -0.02em;
 423  min-width: 0; /* Allow shrinking */
 424}
 425
 426.header-actions {
 427  display: flex;
 428  align-items: center;
 429  gap: 0.5rem;
 430  flex-shrink: 0; /* Never shrink the actions */
 431}
 432
 433/* Drawer/Sidebar */
 434.drawer {
 435  position: fixed;
 436  inset: 0 auto 0 0;
 437  z-index: 50;
 438  width: 20rem;
 439  max-width: calc(100vw - 3rem); /* Ensure drawer doesn't fill entire screen on mobile */
 440  background: var(--bg-base);
 441  border-right: 1px solid var(--border);
 442  color: var(--text-primary);
 443  display: flex;
 444  flex-direction: column;
 445  height: 100%;
 446  height: 100dvh;
 447  transform: translateX(-100%);
 448  transition: transform 0.3s ease;
 449  padding-top: env(safe-area-inset-top);
 450  padding-left: env(safe-area-inset-left);
 451  padding-bottom: env(safe-area-inset-bottom);
 452}
 453
 454.drawer.open {
 455  transform: translateX(0);
 456}
 457
 458.drawer-header {
 459  display: flex;
 460  align-items: center;
 461  justify-content: space-between;
 462  padding: 1rem;
 463}
 464
 465.drawer-header-actions {
 466  display: flex;
 467  align-items: center;
 468  gap: 0.25rem;
 469}
 470
 471.drawer-title {
 472  font-size: 1.125rem;
 473  font-weight: 600;
 474}
 475
 476.drawer-body {
 477  flex: 1;
 478  overflow-y: auto;
 479  min-height: 0;
 480}
 481
 482.drawer-section {
 483  padding: 1rem;
 484  border-bottom: 1px solid var(--border);
 485}
 486
 487.drawer-footer {
 488  padding: 1rem;
 489}
 490
 491/* Backdrop */
 492.backdrop {
 493  position: fixed;
 494  inset: 0;
 495  background: rgba(0, 0, 0, 0.5);
 496  z-index: 40;
 497}
 498
 499/* Conversation List */
 500.conversation-list {
 501  padding: 0.5rem;
 502}
 503
 504.conversation-item {
 505  width: 100%;
 506  text-align: left;
 507  padding: 0.75rem;
 508  border-radius: 0.5rem;
 509  margin-bottom: 0.25rem;
 510  transition: background-color 0.2s;
 511  display: flex;
 512  flex-direction: row;
 513  align-items: center;
 514  gap: 0.25rem;
 515}
 516
 517.conversation-item:hover {
 518  background: var(--bg-tertiary);
 519}
 520
 521.conversation-item.active {
 522  background: var(--primary);
 523  color: white;
 524}
 525
 526.conversation-item .conversation-title {
 527  font-weight: 500;
 528  font-size: 0.875rem;
 529  word-break: break-all;
 530}
 531
 532.conversation-item .conversation-meta {
 533  display: flex;
 534  align-items: center;
 535  gap: 0.5rem;
 536  font-size: 0.75rem;
 537  color: var(--text-tertiary);
 538  min-width: 0;
 539}
 540
 541.conversation-item .conversation-date {
 542  flex-shrink: 0;
 543}
 544
 545.conversation-item.active .conversation-meta {
 546  color: rgba(255, 255, 255, 0.8);
 547}
 548
 549.conversation-item .conversation-cwd {
 550  font-family: var(--font-mono);
 551  font-size: 0.7rem;
 552  opacity: 0.8;
 553  overflow: hidden;
 554  text-overflow: ellipsis;
 555  white-space: nowrap;
 556  text-align: left;
 557  min-width: 0;
 558}
 559
 560/* Messages */
 561.messages-container {
 562  flex: 1 1 auto;
 563  overflow-y: auto;
 564  overflow-x: hidden;
 565  -webkit-overflow-scrolling: touch;
 566  overscroll-behavior: contain;
 567  padding: 1rem;
 568  padding-left: max(1rem, env(safe-area-inset-left));
 569  padding-right: max(1rem, env(safe-area-inset-right));
 570}
 571
 572.messages-list {
 573  display: flex;
 574  flex-direction: column;
 575  gap: 0.5rem;
 576}
 577
 578.message {
 579  display: flex;
 580  flex-direction: column;
 581}
 582
 583.message-content {
 584  padding: 1rem;
 585  border-radius: 0.5rem;
 586  overflow-wrap: break-word;
 587  word-wrap: break-word;
 588  min-width: 0;
 589}
 590
 591.message-user .message-content {
 592  margin-left: auto;
 593  max-width: 80%;
 594  color: var(--user-message-text);
 595}
 596
 597.message-agent .message-content,
 598.message-tool .message-content {
 599  margin-right: auto;
 600  max-width: 100%;
 601  color: var(--text-primary);
 602}
 603
 604.thinking-indicator {
 605  display: inline-flex;
 606  align-items: center;
 607  gap: 0.25rem;
 608  color: var(--text-secondary);
 609  font-size: 0.875rem;
 610  margin: 0.25rem 0 0.75rem 0;
 611  padding-left: 0.5rem;
 612}
 613
 614.thinking-dots {
 615  display: inline-flex;
 616  gap: 0.2rem;
 617  font-size: 1.25rem;
 618  letter-spacing: 0.15rem;
 619  color: var(--blue-text);
 620}
 621
 622.thinking-dots span {
 623  animation: thinking-dot 1.2s infinite ease-in-out;
 624  opacity: 0.25;
 625}
 626
 627.thinking-dots span:nth-child(2) {
 628  animation-delay: 0.2s;
 629}
 630
 631.thinking-dots span:nth-child(3) {
 632  animation-delay: 0.4s;
 633}
 634
 635@keyframes thinking-dot {
 636  0%,
 637  80%,
 638  100% {
 639    opacity: 0.25;
 640    transform: translateY(0);
 641  }
 642  40% {
 643    opacity: 1;
 644    transform: translateY(-0.2rem);
 645  }
 646}
 647
 648.message-error .message-content {
 649  margin-right: auto;
 650  max-width: 100%;
 651  background: var(--error-bg);
 652  border: 2px solid var(--error-border);
 653  color: var(--error-text);
 654}
 655
 656/* Tool Display */
 657.tool-use {
 658  background: var(--blue-bg);
 659  border: 1px solid var(--blue-border);
 660  border-radius: 0.5rem;
 661  padding: 0.75rem;
 662  margin: 0.5rem 0;
 663}
 664
 665.tool-header {
 666  display: flex;
 667  align-items: center;
 668  gap: 0.5rem;
 669  margin-bottom: 0.5rem;
 670}
 671
 672.tool-name {
 673  font-weight: 500;
 674  color: var(--blue-text);
 675}
 676
 677.tool-input {
 678  font-size: 0.875rem;
 679  font-family: monospace;
 680  background: var(--gray-100);
 681  border-radius: 0.25rem;
 682  padding: 0.5rem;
 683  overflow-wrap: break-word;
 684  word-break: break-all;
 685  white-space: pre-wrap;
 686}
 687
 688.dark .tool-input {
 689  background: var(--gray-800);
 690}
 691
 692.tool-result-details {
 693  border: 1px solid var(--border);
 694  border-radius: 0.5rem;
 695  margin: 0.5rem 0;
 696}
 697
 698.tool-result-details.error {
 699  border-color: var(--error-border);
 700}
 701
 702.tool-result-summary {
 703  cursor: pointer;
 704  padding: 0.5rem 0.75rem;
 705  border-radius: 0.5rem;
 706  transition: background-color 0.2s;
 707  background: var(--bg-tertiary);
 708}
 709
 710.tool-result-summary:hover {
 711  background: var(--bg-secondary);
 712}
 713
 714.tool-result-details.error .tool-result-summary {
 715  background: var(--error-bg);
 716  color: var(--error-text);
 717}
 718
 719.tool-result-content {
 720  padding: 0.75rem;
 721  padding-top: 0;
 722}
 723
 724.tool-result-section {
 725  background: var(--blue-bg);
 726  border: 1px solid var(--blue-border);
 727  border-radius: 0.25rem;
 728  padding: 0.5rem;
 729  margin-top: 0.75rem;
 730}
 731
 732.tool-result-section.output {
 733  background: var(--success-bg);
 734  border-color: var(--success-border);
 735}
 736
 737.tool-result-section.error.output {
 738  background: var(--error-bg);
 739  border-color: var(--error-border);
 740}
 741
 742.tool-result-label {
 743  font-size: 0.75rem;
 744  font-weight: 500;
 745  margin-bottom: 0.25rem;
 746  color: var(--blue-text);
 747}
 748
 749.tool-result-section.output .tool-result-label {
 750  color: var(--success-text);
 751}
 752
 753.tool-result-section.error.output .tool-result-label {
 754  color: var(--error-text);
 755}
 756
 757.tool-result-data {
 758  font-size: 0.875rem;
 759  font-family: monospace;
 760  overflow-wrap: break-word;
 761  word-break: break-all;
 762  white-space: pre-wrap;
 763}
 764
 765.tool-result-meta {
 766  display: flex;
 767  align-items: center;
 768  justify-content: space-between;
 769}
 770
 771.tool-result-status {
 772  font-size: 0.75rem;
 773}
 774
 775.tool-result-status.success {
 776  color: var(--success-text);
 777}
 778
 779.tool-result-status.error {
 780  color: var(--error-text);
 781}
 782
 783.tool-result-time {
 784  font-size: 0.75rem;
 785  color: var(--text-tertiary);
 786}
 787
 788/* Tool running state */
 789.tool-running {
 790  background: var(--blue-bg);
 791  border: 1px solid var(--blue-border);
 792  border-radius: 0.5rem;
 793  padding: 0.75rem;
 794  margin: 0.5rem 0;
 795}
 796
 797.tool-running-header {
 798  display: flex;
 799  align-items: center;
 800  gap: 0.5rem;
 801  margin-bottom: 0.5rem;
 802}
 803
 804.tool-status-running {
 805  font-size: 0.875rem;
 806  color: var(--text-secondary);
 807  font-style: italic;
 808  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 809}
 810
 811@keyframes pulse {
 812  0%,
 813  100% {
 814    opacity: 1;
 815  }
 816  50% {
 817    opacity: 0.5;
 818  }
 819}
 820
 821/* Tool Component (shared styles for all tools) */
 822.tool {
 823  background: var(--gray-100);
 824  border-radius: 0.5rem;
 825  margin: 0.5rem 0;
 826  width: 100%;
 827}
 828
 829.dark .tool {
 830  background: var(--gray-800);
 831}
 832
 833.tool-header {
 834  display: flex;
 835  align-items: center;
 836  justify-content: space-between;
 837  padding: 0.75rem 1rem;
 838  cursor: pointer;
 839  user-select: none;
 840}
 841
 842.tool-header:hover {
 843  background: rgba(0, 0, 0, 0.02);
 844  border-radius: 0.5rem;
 845}
 846
 847.dark .tool-header:hover {
 848  background: rgba(255, 255, 255, 0.02);
 849}
 850
 851.tool-summary {
 852  display: flex;
 853  align-items: center;
 854  gap: 0.5rem;
 855  flex: 1;
 856  min-width: 0;
 857}
 858
 859.tool-emoji {
 860  font-size: 1rem;
 861  flex-shrink: 0;
 862}
 863
 864.tool-emoji.running {
 865}
 866
 867.tool-command {
 868  font-family: var(--font-mono);
 869  font-size: 0.875rem;
 870  color: var(--text-primary);
 871  overflow: hidden;
 872  text-overflow: ellipsis;
 873  white-space: nowrap;
 874}
 875
 876.tool-running {
 877  font-size: 0.75rem;
 878  color: var(--text-secondary);
 879  font-style: italic;
 880  flex-shrink: 0;
 881  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 882}
 883
 884.tool-success {
 885  color: var(--success-text);
 886  font-size: 0.875rem;
 887  flex-shrink: 0;
 888}
 889
 890.tool-error {
 891  color: var(--error-text);
 892  font-size: 0.875rem;
 893  flex-shrink: 0;
 894}
 895
 896.tool-toggle {
 897  background: none;
 898  border: none;
 899  cursor: pointer;
 900  padding: 0.25rem;
 901  display: flex;
 902  align-items: center;
 903  justify-content: center;
 904  color: var(--text-secondary);
 905  flex-shrink: 0;
 906}
 907
 908.tool-toggle:hover {
 909  color: var(--text-primary);
 910}
 911
 912.tool-details {
 913  padding: 0 1rem 0.75rem 1rem;
 914  display: flex;
 915  flex-direction: column;
 916  gap: 0.75rem;
 917}
 918
 919.tool-section {
 920  display: flex;
 921  flex-direction: column;
 922  gap: 0.5rem;
 923}
 924
 925.tool-label {
 926  font-size: 0.75rem;
 927  font-weight: 500;
 928  color: var(--text-secondary);
 929  display: flex;
 930  align-items: center;
 931  gap: 0.5rem;
 932}
 933
 934.tool-time {
 935  font-size: 0.75rem;
 936  color: var(--text-tertiary);
 937  font-weight: normal;
 938}
 939
 940.tool-code {
 941  font-family: var(--font-mono);
 942  font-size: 0.875rem;
 943  background: var(--bg-base);
 944  border: 1px solid var(--border);
 945  border-radius: 0.25rem;
 946  padding: 0.75rem;
 947  margin: 0;
 948  overflow-x: auto;
 949  white-space: pre-wrap;
 950  word-break: break-word;
 951  color: var(--text-primary);
 952}
 953
 954.tool-code.error {
 955  background: var(--error-bg);
 956  border-color: var(--error-border);
 957  color: var(--error-text);
 958}
 959
 960/* Bash Tool Component - uses shared tool styles */
 961.bash-tool {
 962  /* Alias for backwards compatibility */
 963  background: var(--gray-100);
 964  border-radius: 0.5rem;
 965  margin: 0.5rem 0;
 966  width: 100%;
 967}
 968
 969.dark .bash-tool {
 970  background: var(--gray-800);
 971}
 972
 973.bash-tool-header {
 974  display: flex;
 975  align-items: center;
 976  justify-content: space-between;
 977  padding: 0.75rem 1rem;
 978  cursor: pointer;
 979  user-select: none;
 980}
 981
 982.bash-tool-header:hover {
 983  background: rgba(0, 0, 0, 0.02);
 984  border-radius: 0.5rem;
 985}
 986
 987.dark .bash-tool-header:hover {
 988  background: rgba(255, 255, 255, 0.02);
 989}
 990
 991.bash-tool-summary {
 992  display: flex;
 993  align-items: center;
 994  gap: 0.5rem;
 995  flex: 1;
 996  min-width: 0;
 997}
 998
 999.bash-tool-emoji {
1000  font-size: 1rem;
1001  flex-shrink: 0;
1002}
1003
1004.bash-tool-emoji.running {
1005}
1006
1007.bash-tool-command {
1008  font-family: var(--font-mono);
1009  font-size: 0.875rem;
1010  color: var(--text-primary);
1011  overflow: hidden;
1012  text-overflow: ellipsis;
1013  white-space: nowrap;
1014  flex-shrink: 1;
1015  min-width: 0;
1016}
1017
1018.bash-tool-cwd {
1019  font-family: var(--font-mono);
1020  font-size: 0.75rem;
1021  color: var(--text-tertiary);
1022  white-space: nowrap;
1023  overflow: hidden;
1024  text-overflow: ellipsis;
1025  flex-shrink: 0;
1026  max-width: 30%;
1027}
1028
1029.bash-tool-running {
1030  font-size: 0.75rem;
1031  color: var(--text-secondary);
1032  font-style: italic;
1033  flex-shrink: 0;
1034  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1035}
1036
1037.bash-tool-success {
1038  color: var(--success-text);
1039  font-size: 0.875rem;
1040  flex-shrink: 0;
1041}
1042
1043.bash-tool-error {
1044  color: var(--error-text);
1045  font-size: 0.875rem;
1046  flex-shrink: 0;
1047}
1048
1049.bash-tool-cancelled {
1050  color: var(--error-text);
1051  font-size: 0.875rem;
1052  flex-shrink: 0;
1053}
1054
1055.bash-tool-toggle {
1056  background: none;
1057  border: none;
1058  cursor: pointer;
1059  padding: 0.25rem;
1060  display: flex;
1061  align-items: center;
1062  justify-content: center;
1063  color: var(--text-secondary);
1064  flex-shrink: 0;
1065}
1066
1067.bash-tool-toggle:hover {
1068  color: var(--text-primary);
1069}
1070
1071.bash-tool-details {
1072  padding: 0 1rem 0.75rem 1rem;
1073  display: flex;
1074  flex-direction: column;
1075  gap: 0.75rem;
1076}
1077
1078.bash-tool-section {
1079  display: flex;
1080  flex-direction: column;
1081  gap: 0.5rem;
1082}
1083
1084.bash-tool-label {
1085  font-size: 0.75rem;
1086  font-weight: 500;
1087  color: var(--text-secondary);
1088  display: flex;
1089  align-items: center;
1090  gap: 0.5rem;
1091}
1092
1093.bash-tool-time {
1094  font-size: 0.75rem;
1095  color: var(--text-tertiary);
1096  font-weight: normal;
1097}
1098
1099.bash-tool-code {
1100  font-family: var(--font-mono);
1101  font-size: 0.875rem;
1102  background: var(--bg-base);
1103  border: 1px solid var(--border);
1104  border-radius: 0.25rem;
1105  padding: 0.75rem;
1106  margin: 0;
1107  overflow-x: auto;
1108  white-space: pre-wrap;
1109  word-break: break-word;
1110  color: var(--text-primary);
1111}
1112
1113.bash-tool-code.error {
1114  background: var(--error-bg);
1115  border-color: var(--error-border);
1116  color: var(--error-text);
1117}
1118
1119/* Patch Tool */
1120.patch-tool {
1121  background: var(--gray-100);
1122  border-radius: 0.5rem;
1123  margin: 0.5rem 0;
1124  width: 100%;
1125  /* Performance: isolate layout/paint for each patch tool */
1126  contain: layout style;
1127}
1128
1129.dark .patch-tool {
1130  background: var(--gray-800);
1131}
1132
1133.patch-tool-header {
1134  display: flex;
1135  align-items: center;
1136  justify-content: space-between;
1137  padding: 0.75rem 1rem;
1138  cursor: pointer;
1139  user-select: none;
1140}
1141
1142.patch-tool-header:hover {
1143  background: rgba(0, 0, 0, 0.02);
1144  border-radius: 0.5rem;
1145}
1146
1147.dark .patch-tool-header:hover {
1148  background: rgba(255, 255, 255, 0.02);
1149}
1150
1151.patch-tool-summary {
1152  display: flex;
1153  align-items: center;
1154  gap: 0.5rem;
1155  flex: 1;
1156  min-width: 0;
1157}
1158
1159.patch-tool-emoji {
1160  font-size: 1rem;
1161  flex-shrink: 0;
1162}
1163
1164.patch-tool-emoji.running {
1165}
1166
1167.patch-tool-filename {
1168  font-family: var(--font-mono);
1169  font-size: 0.875rem;
1170  color: var(--text-primary);
1171  overflow: hidden;
1172  text-overflow: ellipsis;
1173  white-space: nowrap;
1174  font-weight: 500;
1175}
1176
1177.patch-tool-running {
1178  font-size: 0.75rem;
1179  color: var(--text-secondary);
1180  font-style: italic;
1181  flex-shrink: 0;
1182  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1183}
1184
1185.patch-tool-success {
1186  color: var(--success-text);
1187  font-size: 0.875rem;
1188  flex-shrink: 0;
1189}
1190
1191.patch-tool-error {
1192  color: var(--text-secondary);
1193  font-size: 0.875rem;
1194  flex-shrink: 0;
1195}
1196
1197.patch-tool-header-controls {
1198  display: flex;
1199  align-items: center;
1200  gap: 0.25rem;
1201  flex-shrink: 0;
1202}
1203
1204.patch-tool-toggle {
1205  background: none;
1206  border: none;
1207  cursor: pointer;
1208  padding: 0.25rem;
1209  display: flex;
1210  align-items: center;
1211  justify-content: center;
1212  color: var(--text-secondary);
1213  flex-shrink: 0;
1214}
1215
1216.patch-tool-toggle:hover {
1217  color: var(--text-primary);
1218}
1219
1220.patch-tool-diff-mode-toggle {
1221  background: none;
1222  border: 1px solid var(--border);
1223  border-radius: 0.25rem;
1224  cursor: pointer;
1225  padding: 0.25rem;
1226  display: flex;
1227  align-items: center;
1228  justify-content: center;
1229  color: var(--text-secondary);
1230  flex-shrink: 0;
1231  transition: all 0.15s ease;
1232}
1233
1234.patch-tool-diff-mode-toggle:hover {
1235  color: var(--text-primary);
1236  background: var(--bg-secondary);
1237  border-color: var(--text-tertiary);
1238}
1239
1240.patch-tool-details {
1241  padding: 0 1rem 0.75rem 1rem;
1242  display: flex;
1243  flex-direction: column;
1244  gap: 0.75rem;
1245}
1246
1247.patch-tool-section {
1248  display: flex;
1249  flex-direction: column;
1250  gap: 0.5rem;
1251}
1252
1253.patch-tool-label {
1254  font-size: 0.75rem;
1255  font-weight: 500;
1256  color: var(--text-secondary);
1257  display: flex;
1258  align-items: center;
1259  justify-content: space-between;
1260}
1261
1262.patch-tool-time {
1263  font-size: 0.75rem;
1264  color: var(--text-tertiary);
1265  font-weight: normal;
1266}
1267
1268.patch-tool-error-message {
1269  font-family: var(--font-mono);
1270  font-size: 0.875rem;
1271  background: var(--bg-tertiary);
1272  border: 1px solid var(--border);
1273  border-radius: 0.25rem;
1274  padding: 0.75rem;
1275  margin: 0;
1276  overflow-x: auto;
1277  white-space: pre-wrap;
1278  word-break: break-word;
1279  color: var(--text-secondary);
1280}
1281
1282/* Patch Tool Simple Diff View */
1283.patch-tool-diff {
1284  font-family: var(--font-mono);
1285  font-size: 0.875rem;
1286  background: var(--bg-base);
1287  border: 1px solid var(--border);
1288  border-radius: 0.25rem;
1289  padding: 0.75rem;
1290  margin: 0;
1291  overflow-x: auto;
1292  line-height: 1.4;
1293}
1294
1295.patch-diff-line {
1296  white-space: pre;
1297  display: block;
1298}
1299
1300.patch-diff-addition {
1301  background: rgba(34, 197, 94, 0.1);
1302  color: #16a34a;
1303}
1304
1305.dark .patch-diff-addition {
1306  background: rgba(34, 197, 94, 0.15);
1307  color: #86efac;
1308}
1309
1310.patch-diff-deletion {
1311  background: rgba(239, 68, 68, 0.1);
1312  color: #dc2626;
1313}
1314
1315.dark .patch-diff-deletion {
1316  background: rgba(239, 68, 68, 0.15);
1317  color: #fca5a5;
1318}
1319
1320.patch-diff-hunk {
1321  color: var(--text-secondary);
1322  background: var(--bg-tertiary);
1323  font-weight: 500;
1324}
1325
1326.patch-diff-header {
1327  color: var(--text-tertiary);
1328  font-style: italic;
1329}
1330
1331/* Patch Tool Diffs Container */
1332.patch-tool-diffs-container {
1333  border-radius: 0.25rem;
1334  overflow: hidden;
1335  font-size: 0.8125rem;
1336  /* Performance: allow browser to skip rendering off-screen diffs */
1337  content-visibility: auto;
1338  contain-intrinsic-size: auto 200px;
1339}
1340
1341/* Target the diffs-container custom element from @pierre/diffs */
1342.patch-tool-diffs-container diffs-container {
1343  display: block;
1344  contain: content;
1345}
1346
1347/* Screenshot Tool */
1348.screenshot-tool {
1349  background: var(--gray-100);
1350  border-radius: 0.5rem;
1351  margin: 0.5rem 0;
1352  width: 100%;
1353}
1354
1355.dark .screenshot-tool {
1356  background: var(--gray-800);
1357}
1358
1359.screenshot-tool-header {
1360  display: flex;
1361  align-items: center;
1362  justify-content: space-between;
1363  padding: 0.75rem 1rem;
1364  cursor: pointer;
1365  user-select: none;
1366}
1367
1368.screenshot-tool-header:hover {
1369  background: rgba(0, 0, 0, 0.02);
1370  border-radius: 0.5rem;
1371}
1372
1373.dark .screenshot-tool-header:hover {
1374  background: rgba(255, 255, 255, 0.02);
1375}
1376
1377.screenshot-tool-summary {
1378  display: flex;
1379  align-items: center;
1380  gap: 0.5rem;
1381  flex: 1;
1382  min-width: 0;
1383}
1384
1385.screenshot-tool-emoji {
1386  font-size: 1rem;
1387  flex-shrink: 0;
1388}
1389
1390.screenshot-tool-emoji.running {
1391}
1392
1393.screenshot-tool-filename {
1394  font-family: var(--font-mono);
1395  font-size: 0.875rem;
1396  color: var(--text-primary);
1397  overflow: hidden;
1398  text-overflow: ellipsis;
1399  white-space: nowrap;
1400  font-weight: 500;
1401}
1402
1403.screenshot-tool-running {
1404  font-size: 0.75rem;
1405  color: var(--text-secondary);
1406  font-style: italic;
1407  flex-shrink: 0;
1408  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1409}
1410
1411.screenshot-tool-success {
1412  color: var(--success-text);
1413  font-size: 0.875rem;
1414  flex-shrink: 0;
1415}
1416
1417.screenshot-tool-error {
1418  color: var(--error-text);
1419  font-size: 0.875rem;
1420  flex-shrink: 0;
1421}
1422
1423.screenshot-tool-toggle {
1424  background: none;
1425  border: none;
1426  cursor: pointer;
1427  padding: 0.25rem;
1428  display: flex;
1429  align-items: center;
1430  justify-content: center;
1431  color: var(--text-secondary);
1432  flex-shrink: 0;
1433}
1434
1435.screenshot-tool-toggle:hover {
1436  color: var(--text-primary);
1437}
1438
1439.screenshot-tool-details {
1440  padding: 0 1rem 0.75rem 1rem;
1441  display: flex;
1442  flex-direction: column;
1443  gap: 0.75rem;
1444}
1445
1446.screenshot-tool-section {
1447  display: flex;
1448  flex-direction: column;
1449  gap: 0.5rem;
1450}
1451
1452.screenshot-tool-label {
1453  font-size: 0.75rem;
1454  font-weight: 500;
1455  color: var(--text-secondary);
1456  display: flex;
1457  align-items: center;
1458  justify-content: space-between;
1459}
1460
1461.screenshot-tool-time {
1462  font-size: 0.75rem;
1463  color: var(--text-tertiary);
1464  font-weight: normal;
1465}
1466
1467.screenshot-tool-image-container {
1468  border: 1px solid var(--border);
1469  border-radius: 0.25rem;
1470  overflow: hidden;
1471  background: var(--bg-base);
1472  width: fit-content;
1473  max-width: 100%;
1474}
1475
1476.screenshot-tool-image-container a {
1477  display: block;
1478}
1479
1480.screenshot-tool-image-container img {
1481  display: block;
1482  border-radius: 0.25rem;
1483}
1484
1485.screenshot-tool-error-message {
1486  font-family: var(--font-mono);
1487  font-size: 0.875rem;
1488  background: var(--error-bg);
1489  border: 1px solid var(--error-border);
1490  border-radius: 0.25rem;
1491  padding: 0.75rem;
1492  margin: 0;
1493  overflow-x: auto;
1494  white-space: pre-wrap;
1495  word-break: break-word;
1496  color: var(--error-text);
1497}
1498
1499/* Output Iframe Tool */
1500.output-iframe-tool {
1501  background: var(--gray-100);
1502  border-radius: 0.5rem;
1503  margin: 0.5rem 0;
1504  width: 100%;
1505}
1506
1507.dark .output-iframe-tool {
1508  background: var(--gray-800);
1509}
1510
1511.output-iframe-tool-header {
1512  display: flex;
1513  align-items: center;
1514  justify-content: space-between;
1515  padding: 0.75rem 1rem;
1516  cursor: pointer;
1517  user-select: none;
1518}
1519
1520.output-iframe-tool-header:hover {
1521  background: rgba(0, 0, 0, 0.02);
1522  border-radius: 0.5rem;
1523}
1524
1525.dark .output-iframe-tool-header:hover {
1526  background: rgba(255, 255, 255, 0.02);
1527}
1528
1529.output-iframe-tool-summary {
1530  display: flex;
1531  align-items: center;
1532  gap: 0.5rem;
1533  flex: 1;
1534  min-width: 0;
1535}
1536
1537.output-iframe-tool-emoji {
1538  font-size: 1rem;
1539  flex-shrink: 0;
1540}
1541
1542.output-iframe-tool-emoji.running {
1543}
1544
1545.output-iframe-tool-title {
1546  font-family: var(--font-mono);
1547  font-size: 0.875rem;
1548  color: var(--text-primary);
1549  overflow: hidden;
1550  text-overflow: ellipsis;
1551  white-space: nowrap;
1552  font-weight: 500;
1553}
1554
1555.output-iframe-tool-success {
1556  color: var(--success-text);
1557  font-weight: 600;
1558  margin-left: 0.5rem;
1559}
1560
1561.output-iframe-tool-error {
1562  color: var(--error-text);
1563  font-weight: 600;
1564  margin-left: 0.5rem;
1565}
1566
1567.output-iframe-tool-actions {
1568  display: flex;
1569  align-items: center;
1570  gap: 0.25rem;
1571  flex-shrink: 0;
1572}
1573
1574.output-iframe-tool-open-btn,
1575.output-iframe-tool-download-btn {
1576  background: none;
1577  border: none;
1578  padding: 0.25rem;
1579  cursor: pointer;
1580  color: var(--text-secondary);
1581  display: flex;
1582  align-items: center;
1583  justify-content: center;
1584  border-radius: 4px;
1585}
1586
1587.output-iframe-tool-open-btn:hover,
1588.output-iframe-tool-download-btn:hover {
1589  color: var(--text-primary);
1590  background: var(--gray-200);
1591}
1592
1593.dark .output-iframe-tool-open-btn:hover,
1594.dark .output-iframe-tool-download-btn:hover {
1595  background: var(--gray-700);
1596}
1597
1598.output-iframe-tool-toggle {
1599  background: none;
1600  border: none;
1601  padding: 0.25rem;
1602  cursor: pointer;
1603  color: var(--text-secondary);
1604  display: flex;
1605  align-items: center;
1606  justify-content: center;
1607  flex-shrink: 0;
1608}
1609
1610.output-iframe-tool-toggle:hover {
1611  color: var(--text-primary);
1612}
1613
1614.output-iframe-tool-details {
1615  padding: 0 1rem 1rem 1rem;
1616}
1617
1618.output-iframe-tool-section {
1619  margin-top: 0.5rem;
1620}
1621
1622.output-iframe-tool-label {
1623  font-size: 0.75rem;
1624  font-weight: 500;
1625  color: var(--text-secondary);
1626  margin-bottom: 0.5rem;
1627  display: flex;
1628  justify-content: space-between;
1629  align-items: center;
1630}
1631
1632.output-iframe-tool-time {
1633  font-family: var(--font-mono);
1634  font-size: 0.75rem;
1635  color: var(--text-tertiary);
1636}
1637
1638.output-iframe-container {
1639  width: 100%;
1640  overflow: hidden;
1641  border-radius: 0.25rem;
1642}
1643
1644.output-iframe-container iframe {
1645  display: block;
1646}
1647
1648.output-iframe-tool-error-message {
1649  font-family: var(--font-mono);
1650  font-size: 0.875rem;
1651  background: var(--error-bg);
1652  border: 1px solid var(--error-border);
1653  border-radius: 0.25rem;
1654  padding: 0.75rem;
1655  margin: 0;
1656  overflow-x: auto;
1657  white-space: pre-wrap;
1658  word-break: break-word;
1659  color: var(--error-text);
1660}
1661
1662/* Message Input */
1663.message-input-container {
1664  flex: 0 0 auto;
1665  background: var(--bg-base);
1666  border-top: 1px solid var(--border);
1667  padding: 1rem;
1668  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
1669  padding-left: max(1rem, env(safe-area-inset-left));
1670  padding-right: max(1rem, env(safe-area-inset-right));
1671}
1672
1673.message-input-form {
1674  display: flex;
1675  align-items: flex-end;
1676  gap: 0.5rem;
1677  max-width: 800px;
1678  margin: 0 auto;
1679}
1680
1681.message-textarea {
1682  flex: 1;
1683  min-height: 46px;
1684  max-height: 200px;
1685  padding: 0.625rem 1rem;
1686  border: 1.5px solid var(--border);
1687  border-radius: 4px;
1688  resize: none;
1689  background: var(--bg-base);
1690  color: var(--text-primary);
1691  font-family: inherit;
1692  font-size: 16px; /* Must be 16px+ to prevent iOS zoom on focus */
1693  line-height: 1.5;
1694  transition:
1695    border-color 0.2s,
1696    box-shadow 0.2s;
1697}
1698
1699.message-textarea:focus {
1700  outline: none;
1701  border-color: var(--primary);
1702  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
1703}
1704
1705.message-textarea:disabled {
1706  opacity: 0.5;
1707  cursor: not-allowed;
1708}
1709
1710.message-send-btn svg {
1711  transform: rotate(-90deg);
1712}
1713
1714.message-textarea::placeholder {
1715  color: var(--text-tertiary);
1716}
1717
1718.message-send-btn {
1719  flex-shrink: 0;
1720  width: 36px;
1721  height: 36px;
1722  margin-bottom: 0.25rem;
1723  padding: 0;
1724  background: var(--primary);
1725  color: white;
1726  border: none;
1727  border-radius: 50%;
1728  display: flex;
1729  align-items: center;
1730  justify-content: center;
1731  transition:
1732    background-color 0.2s,
1733    transform 0.1s;
1734  cursor: pointer;
1735}
1736
1737.message-send-btn:hover:not(:disabled) {
1738  background: var(--primary-dark);
1739  transform: scale(1.05);
1740}
1741
1742.message-send-btn:active:not(:disabled) {
1743  transform: scale(0.95);
1744}
1745
1746.message-send-btn:disabled {
1747  background: var(--gray-300);
1748  cursor: not-allowed;
1749  opacity: 0.6;
1750}
1751
1752.dark .message-send-btn:disabled {
1753  background: var(--gray-600);
1754}
1755
1756/* Attach file button */
1757.message-attach-btn {
1758  flex-shrink: 0;
1759  width: 36px;
1760  height: 36px;
1761  margin-bottom: 0.25rem;
1762  padding: 0;
1763  background: transparent;
1764  color: var(--text-secondary);
1765  border: none;
1766  border-radius: 50%;
1767  display: flex;
1768  align-items: center;
1769  justify-content: center;
1770  transition:
1771    background-color 0.2s,
1772    color 0.2s,
1773    transform 0.1s;
1774  cursor: pointer;
1775}
1776
1777.message-attach-btn:hover:not(:disabled) {
1778  background: var(--gray-100);
1779  color: var(--text-primary);
1780}
1781
1782.dark .message-attach-btn:hover:not(:disabled) {
1783  background: var(--gray-700);
1784}
1785
1786.message-attach-btn:active:not(:disabled) {
1787  transform: scale(0.95);
1788}
1789
1790.message-attach-btn:disabled {
1791  cursor: not-allowed;
1792  opacity: 0.4;
1793}
1794
1795/* Voice input button */
1796.message-voice-btn {
1797  flex-shrink: 0;
1798  width: 36px;
1799  height: 36px;
1800  margin-bottom: 0.25rem;
1801  padding: 0;
1802  background: transparent;
1803  color: var(--text-secondary);
1804  border: none;
1805  border-radius: 50%;
1806  display: flex;
1807  align-items: center;
1808  justify-content: center;
1809  transition:
1810    background-color 0.2s,
1811    color 0.2s,
1812    transform 0.1s;
1813  cursor: pointer;
1814}
1815
1816.message-voice-btn:hover:not(:disabled):not(.listening) {
1817  background: var(--gray-100);
1818  color: var(--text-primary);
1819}
1820
1821.dark .message-voice-btn:hover:not(:disabled):not(.listening) {
1822  background: var(--gray-700);
1823}
1824
1825.message-voice-btn:active:not(:disabled):not(.listening) {
1826  transform: scale(0.95);
1827}
1828
1829.message-voice-btn:disabled {
1830  cursor: not-allowed;
1831  opacity: 0.4;
1832}
1833
1834.message-voice-btn.listening,
1835.message-voice-btn.listening:hover {
1836  background: #dc2626;
1837  color: white;
1838  animation: pulse-voice 1.5s ease-in-out infinite;
1839}
1840
1841.dark .message-voice-btn.listening,
1842.dark .message-voice-btn.listening:hover {
1843  background: #ef4444;
1844  color: white;
1845}
1846
1847@keyframes pulse-voice {
1848  0%,
1849  100% {
1850    transform: scale(1);
1851  }
1852  50% {
1853    transform: scale(1.1);
1854  }
1855}
1856
1857/* Drag and drop styles */
1858.message-input-container {
1859  position: relative;
1860}
1861
1862.message-input-container.drag-over {
1863  border-color: var(--primary);
1864}
1865
1866.message-input-container.shell-mode .message-input-form {
1867  border-color: var(--warning-border);
1868  background: var(--warning-bg);
1869}
1870
1871.message-input-container.shell-mode .message-textarea {
1872  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
1873  background: transparent;
1874  padding-left: 36px;
1875}
1876
1877.message-input-container.shell-mode .message-textarea::placeholder {
1878  font-family: inherit;
1879}
1880
1881.shell-mode-indicator {
1882  position: absolute;
1883  left: 12px;
1884  top: 50%;
1885  transform: translateY(-50%);
1886  display: flex;
1887  align-items: center;
1888  justify-content: center;
1889  color: var(--warning-text);
1890  pointer-events: none;
1891  z-index: 1;
1892}
1893
1894.drag-overlay {
1895  position: absolute;
1896  inset: 0;
1897  background: rgba(37, 99, 235, 0.1);
1898  border: 2px dashed var(--primary);
1899  border-radius: 4px;
1900  display: flex;
1901  align-items: center;
1902  justify-content: center;
1903  z-index: 10;
1904  pointer-events: none;
1905}
1906
1907.drag-overlay-content {
1908  background: var(--primary);
1909  color: white;
1910  padding: 0.5rem 1rem;
1911  border-radius: 4px;
1912  font-size: 0.875rem;
1913  font-weight: 500;
1914}
1915
1916/* Modal */
1917.modal-overlay {
1918  position: fixed;
1919  inset: 0;
1920  background: rgba(0, 0, 0, 0.5);
1921  z-index: 50;
1922  display: flex;
1923  align-items: center;
1924  justify-content: center;
1925  padding: 1rem;
1926}
1927
1928.modal {
1929  background: var(--bg-base);
1930  border-radius: 0.5rem;
1931  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
1932  max-width: 28rem;
1933  width: 100%;
1934  max-height: 80vh;
1935  overflow: hidden;
1936}
1937
1938.modal.modal-wide {
1939  max-width: 40rem;
1940}
1941
1942.modal-header {
1943  display: flex;
1944  align-items: center;
1945  justify-content: space-between;
1946  padding: 1rem;
1947  border-bottom: 1px solid var(--border);
1948}
1949
1950.modal-title {
1951  font-size: 1.125rem;
1952  font-weight: 600;
1953}
1954
1955.modal-title-right {
1956  margin-left: auto;
1957  margin-right: 1rem;
1958}
1959
1960.modal-body {
1961  padding: 1rem;
1962  overflow-y: auto;
1963  max-height: calc(80vh - 60px);
1964}
1965
1966/* Form Elements */
1967label {
1968  display: block;
1969  font-size: 0.875rem;
1970  font-weight: 500;
1971  margin-bottom: 0.5rem;
1972}
1973
1974select {
1975  width: 100%;
1976  background: var(--bg-tertiary);
1977  border: 1px solid var(--border);
1978  border-radius: 0.375rem;
1979  padding: 0.5rem 0.75rem;
1980  font-family: inherit;
1981  font-size: 1rem;
1982  color: var(--text-primary);
1983}
1984
1985select:focus {
1986  outline: none;
1987  border-color: var(--primary);
1988  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
1989}
1990
1991select:disabled {
1992  opacity: 0.5;
1993  cursor: not-allowed;
1994}
1995
1996/* Loading Spinner */
1997.spinner {
1998  width: 2rem;
1999  height: 2rem;
2000  border: 2px solid transparent;
2001  border-top-color: var(--primary);
2002  border-radius: 50%;
2003  animation: spin 0.8s linear infinite;
2004}
2005
2006.spinner-small {
2007  width: 1rem;
2008  height: 1rem;
2009  border-width: 2px;
2010  border-top-color: currentColor;
2011}
2012
2013@keyframes spin {
2014  to {
2015    transform: rotate(360deg);
2016  }
2017}
2018
2019/* Loading/Error States */
2020.loading-container,
2021.error-container {
2022  height: 100vh; /* Fallback for older browsers */
2023  height: 100dvh;
2024  display: flex;
2025  align-items: center;
2026  justify-content: center;
2027}
2028
2029.loading-content,
2030.error-content {
2031  text-align: center;
2032}
2033
2034/* Unified Status Bar */
2035.status-bar {
2036  flex: 0 0 auto;
2037  background: var(--bg-base);
2038  border-top: 1px solid var(--border);
2039  padding: 0.5rem 1rem;
2040  padding-left: max(1rem, env(safe-area-inset-left));
2041  padding-right: max(1rem, env(safe-area-inset-right));
2042  min-height: 2.5rem;
2043  display: flex;
2044  align-items: center;
2045}
2046
2047.status-bar-content {
2048  display: flex;
2049  align-items: center;
2050  justify-content: space-between;
2051  width: 100%;
2052  gap: 0.75rem;
2053}
2054
2055.status-message {
2056  color: var(--text-secondary);
2057  font-size: 0.875rem;
2058  flex: 1;
2059  min-width: 0;
2060}
2061
2062.status-message.status-ready {
2063  color: var(--text-tertiary);
2064}
2065
2066.status-message.status-warning {
2067  color: var(--blue-text);
2068  font-weight: 500;
2069}
2070
2071.status-message.status-error {
2072  color: var(--error-text);
2073  font-weight: 500;
2074}
2075
2076.status-message.status-reconnecting {
2077  color: var(--blue-text);
2078  font-weight: 500;
2079}
2080
2081.reconnecting-dots {
2082  display: inline-block;
2083  animation: reconnecting-pulse 1.5s ease-in-out infinite;
2084}
2085
2086@keyframes reconnecting-pulse {
2087  0%,
2088  100% {
2089    opacity: 0.3;
2090  }
2091  50% {
2092    opacity: 1;
2093  }
2094}
2095
2096.animated-working {
2097  display: inline;
2098}
2099
2100.animated-working .bold-letter {
2101  font-weight: 700;
2102}
2103
2104.status-button {
2105  padding: 0.375rem 0.875rem;
2106  border-radius: 0.375rem;
2107  font-size: 0.875rem;
2108  font-weight: 500;
2109  transition: all 0.2s;
2110  display: flex;
2111  align-items: center;
2112  gap: 0.375rem;
2113  white-space: nowrap;
2114  border: none;
2115  cursor: pointer;
2116}
2117
2118.status-button svg {
2119  width: 0.875rem;
2120  height: 0.875rem;
2121}
2122
2123.status-button-primary {
2124  background: var(--primary);
2125  color: white;
2126}
2127
2128.status-button-primary:hover {
2129  background: var(--primary-dark);
2130}
2131
2132.status-button-cancel {
2133  background: var(--error-bg);
2134  color: var(--error-text);
2135  border: 1px solid var(--error-border);
2136}
2137
2138.status-button-cancel:hover:not(:disabled) {
2139  background: var(--error-text);
2140  color: white;
2141}
2142
2143.status-button-cancel:disabled {
2144  opacity: 0.6;
2145  cursor: not-allowed;
2146}
2147
2148.status-button-text {
2149  background: transparent;
2150  color: var(--text-secondary);
2151  padding: 0.25rem;
2152}
2153
2154.status-button-text:hover {
2155  background: var(--bg-tertiary);
2156  color: var(--text-primary);
2157}
2158
2159/* Legacy disconnect/error banner classes (kept for compatibility but unused) */
2160.disconnect-banner {
2161  background: var(--gray-100);
2162  border-top: 1px solid var(--border);
2163  padding: 0.5rem 1rem;
2164}
2165
2166.dark .disconnect-banner {
2167  background: var(--gray-800);
2168}
2169
2170.disconnect-banner-content {
2171  display: flex;
2172  align-items: center;
2173  justify-content: center;
2174  gap: 0.75rem;
2175}
2176
2177.disconnect-message {
2178  color: var(--text-secondary);
2179  font-size: 0.875rem;
2180  margin: 0;
2181}
2182
2183.btn-reconnect {
2184  padding: 0.25rem 0.75rem;
2185  background: var(--primary);
2186  color: white;
2187  border-radius: 0.375rem;
2188  font-size: 0.875rem;
2189  font-weight: 500;
2190  transition: background-color 0.2s;
2191}
2192
2193.btn-reconnect:hover {
2194  background: var(--primary-dark);
2195}
2196
2197.error-banner {
2198  background: var(--error-bg);
2199  border-top: 1px solid var(--error-border);
2200  padding: 0.75rem 1rem;
2201}
2202
2203.error-banner-content {
2204  display: flex;
2205  align-items: center;
2206  justify-content: space-between;
2207}
2208
2209.error-message {
2210  color: var(--error-text);
2211  font-size: 0.875rem;
2212}
2213
2214/* Empty State */
2215.empty-state {
2216  display: flex;
2217  align-items: center;
2218  justify-content: center;
2219  height: 100%;
2220  color: var(--text-secondary);
2221}
2222
2223.empty-state-content {
2224  text-align: center;
2225}
2226
2227/* Scrollbar */
2228.scrollable {
2229  scrollbar-width: thin;
2230  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
2231}
2232
2233.scrollable::-webkit-scrollbar {
2234  width: 6px;
2235}
2236
2237.scrollable::-webkit-scrollbar-track {
2238  background: transparent;
2239}
2240
2241.scrollable::-webkit-scrollbar-thumb {
2242  background-color: rgba(156, 163, 175, 0.5);
2243  border-radius: 3px;
2244}
2245
2246.scrollable::-webkit-scrollbar-thumb:hover {
2247  background-color: rgba(156, 163, 175, 0.8);
2248}
2249
2250/* SVG Icons */
2251svg {
2252  width: 1.25rem;
2253  height: 1.25rem;
2254  display: block;
2255}
2256
2257.icon-sm svg {
2258  width: 1rem;
2259  height: 1rem;
2260}
2261
2262/* Utility Classes */
2263.relative {
2264  position: relative;
2265}
2266
2267.overflow-auto {
2268  overflow: auto;
2269}
2270
2271.overflow-hidden {
2272  overflow: hidden;
2273}
2274
2275.rounded {
2276  border-radius: 0.25rem;
2277}
2278
2279.rounded-lg {
2280  border-radius: 0.5rem;
2281}
2282
2283.border {
2284  border: 1px solid var(--border);
2285}
2286
2287.min-h-0 {
2288  min-height: 0;
2289}
2290
2291/* Overflow Menu */
2292.overflow-menu {
2293  position: absolute;
2294  top: calc(100% + 0.5rem);
2295  right: 0;
2296  background: var(--bg-secondary);
2297  border: 1px solid var(--border);
2298  border-radius: 0.5rem;
2299  box-shadow:
2300    0 4px 6px -1px rgba(0, 0, 0, 0.1),
2301    0 2px 4px -1px rgba(0, 0, 0, 0.06);
2302  min-width: 10rem;
2303  z-index: 50;
2304}
2305
2306.overflow-menu-item {
2307  display: flex;
2308  align-items: center;
2309  width: 100%;
2310  padding: 0.75rem 1rem;
2311  text-align: left;
2312  background: transparent;
2313  border: none;
2314  color: var(--text-primary);
2315  font-size: 0.875rem;
2316  cursor: pointer;
2317  transition: background-color 0.2s;
2318}
2319
2320.overflow-menu-item:hover {
2321  background: var(--bg-hover);
2322}
2323
2324.overflow-menu-item:first-child {
2325  border-top-left-radius: 0.5rem;
2326  border-top-right-radius: 0.5rem;
2327}
2328
2329.overflow-menu-item:last-child {
2330  border-bottom-left-radius: 0.5rem;
2331  border-bottom-right-radius: 0.5rem;
2332}
2333
2334.overflow-menu-divider {
2335  height: 1px;
2336  background: var(--border);
2337  margin: 0.5rem 0;
2338}
2339
2340.theme-toggle-row {
2341  display: flex;
2342  gap: 0.25rem;
2343  padding: 0.5rem;
2344}
2345
2346.theme-toggle-btn {
2347  flex: 1;
2348  display: flex;
2349  align-items: center;
2350  justify-content: center;
2351  padding: 0.5rem;
2352  background: transparent;
2353  border: 1px solid var(--border);
2354  border-radius: 0.375rem;
2355  color: var(--text-secondary);
2356  cursor: pointer;
2357  transition: all 0.15s;
2358}
2359
2360.theme-toggle-btn svg {
2361  width: 1.125rem;
2362  height: 1.125rem;
2363}
2364
2365.theme-toggle-btn:hover {
2366  background: var(--bg-tertiary);
2367  color: var(--text-primary);
2368}
2369
2370.theme-toggle-btn-selected {
2371  background: var(--primary);
2372  border-color: var(--primary);
2373  color: white;
2374}
2375
2376.theme-toggle-btn-selected:hover {
2377  background: var(--primary-dark);
2378  border-color: var(--primary-dark);
2379  color: white;
2380}
2381
2382/* Diff display styling */
2383.diff-display {
2384  font-family: var(--font-mono);
2385  font-size: 0.875rem;
2386  line-height: 1.5;
2387  background: var(--bg-base);
2388  padding: 1rem;
2389  border-radius: 0.25rem;
2390  overflow-x: auto;
2391  white-space: pre;
2392  color: var(--text-primary);
2393}
2394
2395/* Responsive adjustments */
2396@media (min-width: 768px) {
2397  .drawer {
2398    position: static;
2399    transform: translateX(0) !important;
2400  }
2401
2402  .drawer.collapsed {
2403    display: none;
2404  }
2405
2406  .hide-on-desktop {
2407    display: none !important;
2408  }
2409
2410  .show-on-desktop-only {
2411    display: flex !important;
2412  }
2413
2414  .backdrop {
2415    display: none !important;
2416  }
2417}
2418
2419/* Hide desktop-only elements on mobile */
2420@media (max-width: 767px) {
2421  .show-on-desktop-only {
2422    display: none !important;
2423  }
2424}
2425
2426/* Scroll to bottom button */
2427.scroll-to-bottom-button {
2428  position: absolute;
2429  bottom: 1rem;
2430  left: 50%;
2431  transform: translateX(-50%);
2432  background: var(--bg-elevated);
2433  border: 1px solid var(--border);
2434  border-radius: 2rem;
2435  padding: 0.5rem 1rem;
2436  display: flex;
2437  align-items: center;
2438  gap: 0.5rem;
2439  cursor: pointer;
2440  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2441  transition: all 0.2s ease;
2442  color: var(--text-primary);
2443  font-size: 0.875rem;
2444  z-index: 10;
2445}
2446
2447.scroll-to-bottom-button:hover {
2448  background: var(--bg-hover);
2449  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
2450}
2451
2452.scroll-to-bottom-button:active {
2453  transform: translateX(-50%) scale(0.95);
2454}
2455
2456/* Wrapper for messages area to position scroll-to-bottom button */
2457.messages-area-wrapper {
2458  position: relative;
2459  flex: 1 1 auto;
2460  min-height: 0; /* Important for flex children to shrink properly */
2461  overflow: hidden;
2462}
2463
2464.messages-container {
2465  height: 100%;
2466}
2467
2468/* Status bar configuration controls for empty conversations */
2469.status-bar-config {
2470  display: flex;
2471  align-items: center;
2472  gap: 0.75rem;
2473  width: 100%;
2474}
2475
2476.status-bar-new-conversation {
2477  display: flex;
2478  align-items: center;
2479  justify-content: space-between;
2480  width: 100%;
2481  flex-wrap: wrap;
2482  gap: 0.5rem;
2483}
2484
2485/* On smaller screens, allow the fields to stack vertically */
2486@media (max-width: 600px) {
2487  .status-bar-new-conversation {
2488    flex-direction: column;
2489    align-items: stretch;
2490  }
2491
2492  .status-field {
2493    width: 100%;
2494  }
2495}
2496
2497.status-bar-controls {
2498  display: flex;
2499  align-items: center;
2500  gap: 0.5rem;
2501}
2502
2503/* Flexible containers for status fields that adapt to content */
2504.status-field {
2505  display: flex;
2506  align-items: center;
2507  gap: 0.25rem;
2508  min-width: 0; /* Allow flex items to shrink below content size */
2509}
2510
2511.status-field-label {
2512  font-size: 0.7rem;
2513  color: var(--text-secondary);
2514  flex-shrink: 0;
2515}
2516
2517.status-field-model {
2518  flex: 1 1 auto;
2519  min-width: 150px;
2520  max-width: 300px;
2521}
2522
2523.status-field-cwd {
2524  flex: 1 1 auto;
2525  min-width: 180px;
2526  max-width: 400px;
2527}
2528
2529/* Compact clickable chips for model and cwd */
2530.status-chip {
2531  padding: 0.25rem 0.5rem;
2532  border: 1px solid var(--border);
2533  border-radius: 0.25rem;
2534  background: var(--bg-tertiary);
2535  color: var(--text-primary);
2536  font-size: 0.75rem;
2537  font-family: var(--font-mono);
2538  cursor: pointer;
2539  transition: all 0.2s;
2540  white-space: normal; /* Allow text to wrap */
2541  word-break: break-word; /* Break long words if needed */
2542  overflow-wrap: break-word;
2543  width: 100%;
2544  text-align: left;
2545  box-sizing: border-box;
2546  line-height: 1.3; /* Better line height for multi-line text */
2547  min-height: 1.75rem; /* Minimum height to accommodate wrapped text */
2548}
2549
2550.status-chip:hover:not(:disabled) {
2551  background: var(--bg-secondary);
2552  border-color: var(--blue-text);
2553}
2554
2555.status-chip:disabled {
2556  opacity: 0.5;
2557  cursor: not-allowed;
2558}
2559
2560.status-chip-error {
2561  border-color: var(--red-text, #dc2626);
2562  background: rgba(220, 38, 38, 0.1);
2563}
2564
2565.status-field-error {
2566  position: relative;
2567}
2568
2569.status-input-error {
2570  border-color: var(--red-text, #dc2626);
2571}
2572
2573.status-select {
2574  padding: 0.25rem 0.5rem;
2575  border: 1px solid var(--blue-text);
2576  border-radius: 0.25rem;
2577  background: var(--bg-base);
2578  color: var(--text-primary);
2579  font-size: 0.75rem;
2580  font-family: var(--font-mono);
2581  cursor: pointer;
2582  transition: border-color 0.2s;
2583  width: 100%;
2584  box-sizing: border-box;
2585}
2586
2587.status-select:hover:not(:disabled) {
2588  border-color: var(--blue-text);
2589}
2590
2591.status-select:focus {
2592  outline: none;
2593  border-color: var(--blue-text);
2594  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
2595}
2596
2597.status-select:disabled {
2598  opacity: 0.5;
2599  cursor: not-allowed;
2600}
2601
2602/* Model Picker Custom Dropdown */
2603.model-picker {
2604  position: relative;
2605  display: inline-block;
2606  width: 100%;
2607}
2608
2609.model-picker-trigger {
2610  display: flex;
2611  align-items: center;
2612  justify-content: space-between;
2613  gap: 0.5rem;
2614  padding: 0.25rem 0.5rem;
2615  border: 1px solid var(--border);
2616  border-radius: 0.25rem;
2617  background: var(--bg-tertiary);
2618  color: var(--text-primary);
2619  font-size: 0.75rem;
2620  font-family: var(--font-mono);
2621  cursor: pointer;
2622  transition: all 0.2s;
2623  width: 100%;
2624  text-align: left;
2625  box-sizing: border-box;
2626  min-height: 1.75rem;
2627}
2628
2629.model-picker-trigger:hover:not(:disabled) {
2630  background: var(--bg-secondary);
2631  border-color: var(--blue-text);
2632}
2633
2634.model-picker-trigger:disabled {
2635  opacity: 0.5;
2636  cursor: not-allowed;
2637}
2638
2639.model-picker-value {
2640  flex: 1;
2641  overflow: hidden;
2642  text-overflow: ellipsis;
2643  white-space: nowrap;
2644}
2645
2646.model-picker-chevron {
2647  flex-shrink: 0;
2648  transition: transform 0.2s;
2649  opacity: 0.6;
2650}
2651
2652.model-picker-chevron.open {
2653  transform: rotate(180deg);
2654}
2655
2656.model-picker-dropdown {
2657  position: absolute;
2658  top: 100%;
2659  left: 0;
2660  right: 0;
2661  margin-top: 2px;
2662  background: var(--bg-secondary);
2663  border: 1px solid var(--border);
2664  border-radius: 0.375rem;
2665  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
2666  z-index: 1000;
2667  max-height: 300px;
2668  overflow: hidden;
2669  display: flex;
2670  flex-direction: column;
2671}
2672
2673.model-picker-dropdown.open-upward {
2674  top: auto;
2675  bottom: 100%;
2676  margin-top: 0;
2677  margin-bottom: 2px;
2678}
2679
2680.model-picker-options {
2681  overflow-y: auto;
2682  max-height: 220px;
2683}
2684
2685.model-picker-option {
2686  display: flex;
2687  align-items: center;
2688  gap: 0.5rem;
2689  width: 100%;
2690  padding: 0.5rem 0.75rem;
2691  border: none;
2692  background: transparent;
2693  color: var(--text-primary);
2694  font-size: 0.8rem;
2695  font-family: var(--font-mono);
2696  cursor: pointer;
2697  text-align: left;
2698  transition: background 0.15s;
2699}
2700
2701.model-picker-option:hover:not(:disabled) {
2702  background: var(--bg-tertiary);
2703}
2704
2705.model-picker-option.selected {
2706  background: var(--bg-tertiary);
2707}
2708
2709.model-picker-option.disabled {
2710  opacity: 0.5;
2711  cursor: not-allowed;
2712}
2713
2714.model-picker-option-content {
2715  flex: 1;
2716  display: flex;
2717  flex-direction: column;
2718  gap: 0.125rem;
2719  min-width: 0;
2720}
2721
2722.model-picker-option-name {
2723  overflow: hidden;
2724  text-overflow: ellipsis;
2725  white-space: nowrap;
2726}
2727
2728.model-picker-option-source {
2729  font-size: 0.65rem;
2730  color: var(--text-secondary);
2731  overflow: hidden;
2732  text-overflow: ellipsis;
2733  white-space: nowrap;
2734}
2735
2736.model-picker-option-badge {
2737  font-size: 0.65rem;
2738  color: var(--text-secondary);
2739  background: var(--bg-base);
2740  padding: 0.125rem 0.375rem;
2741  border-radius: 0.25rem;
2742}
2743
2744.model-picker-option-check {
2745  flex-shrink: 0;
2746  color: var(--green-text);
2747}
2748
2749.model-picker-divider {
2750  height: 1px;
2751  background: var(--border);
2752  margin: 0.25rem 0;
2753}
2754
2755.model-picker-manage {
2756  color: var(--blue-text);
2757}
2758
2759.model-picker-manage:hover {
2760  background: var(--bg-tertiary);
2761}
2762
2763.model-picker-manage svg {
2764  flex-shrink: 0;
2765}
2766
2767.status-input {
2768  padding: 0.25rem 0.5rem;
2769  border: 1px solid var(--blue-text);
2770  border-radius: 0.25rem;
2771  background: var(--bg-base);
2772  color: var(--text-primary);
2773  font-size: 0.75rem;
2774  font-family: var(--font-mono);
2775  transition: border-color 0.2s;
2776  width: 100%;
2777  box-sizing: border-box;
2778}
2779
2780.status-input::placeholder {
2781  color: var(--text-secondary);
2782  opacity: 0.6;
2783}
2784
2785.status-input:hover:not(:disabled) {
2786  border-color: var(--blue-text);
2787}
2788
2789.status-input:focus {
2790  outline: none;
2791  border-color: var(--blue-text);
2792  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
2793}
2794
2795.status-input:disabled {
2796  opacity: 0.5;
2797  cursor: not-allowed;
2798}
2799
2800/* Responsive adjustments for status bar controls */
2801@media (max-width: 768px) {
2802  .status-bar-config {
2803    flex-wrap: wrap;
2804    gap: 0.5rem;
2805  }
2806
2807  .status-bar-controls {
2808    flex-wrap: wrap;
2809    gap: 0.5rem;
2810  }
2811
2812  .status-field-model {
2813    min-width: 120px;
2814    max-width: 200px;
2815  }
2816
2817  .status-field-cwd {
2818    min-width: 140px;
2819    max-width: 250px;
2820  }
2821}
2822
2823/* Directory Picker Modal */
2824.directory-picker-modal {
2825  max-width: 32rem;
2826  max-height: 70vh;
2827  display: flex;
2828  flex-direction: column;
2829}
2830
2831.directory-picker-body {
2832  flex: 1;
2833  display: flex;
2834  flex-direction: column;
2835  min-height: 0;
2836  overflow: hidden;
2837}
2838
2839.directory-picker-input-container {
2840  margin-bottom: 0.75rem;
2841}
2842
2843.directory-picker-input {
2844  width: 100%;
2845  padding: 0.5rem 0.75rem;
2846  border: 1px solid var(--border);
2847  border-radius: 0.25rem;
2848  background: var(--bg-base);
2849  color: var(--text-primary);
2850  font-family: var(--font-mono);
2851  font-size: 0.875rem;
2852}
2853
2854.directory-picker-input:focus {
2855  outline: none;
2856  border-color: var(--primary);
2857  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
2858}
2859
2860.directory-picker-current {
2861  display: flex;
2862  align-items: center;
2863  gap: 0.5rem;
2864  font-size: 0.75rem;
2865  color: var(--text-secondary);
2866  font-family: var(--font-mono);
2867  margin-bottom: 0.5rem;
2868  padding: 0.25rem 0;
2869}
2870
2871.directory-picker-current-path {
2872  flex-shrink: 0;
2873}
2874
2875.directory-picker-current-git .directory-picker-current-path {
2876  color: var(--accent-color, #f97316);
2877}
2878
2879.directory-picker-current-subject {
2880  flex: 1;
2881  min-width: 0;
2882  color: var(--text-tertiary);
2883  white-space: nowrap;
2884  overflow: hidden;
2885  text-overflow: ellipsis;
2886  text-align: right;
2887}
2888
2889.directory-picker-filter {
2890  color: var(--primary);
2891  font-weight: 500;
2892}
2893
2894.directory-picker-git-root-btn {
2895  display: flex;
2896  align-items: center;
2897  gap: 0.5rem;
2898  width: 100%;
2899  padding: 0.375rem 0.75rem;
2900  margin-bottom: 0.5rem;
2901  background: var(--bg-secondary);
2902  border: 1px solid var(--border-color);
2903  border-radius: 0.375rem;
2904  color: var(--accent-color, #f97316);
2905  font-size: 0.8125rem;
2906  cursor: pointer;
2907  text-align: left;
2908}
2909
2910.directory-picker-git-root-btn:hover {
2911  background: var(--bg-tertiary);
2912  border-color: var(--accent-color, #f97316);
2913}
2914
2915.directory-picker-git-root-btn .directory-picker-icon {
2916  flex-shrink: 0;
2917}
2918
2919.directory-picker-git-root-path {
2920  color: var(--text-tertiary);
2921  overflow: hidden;
2922  text-overflow: ellipsis;
2923  white-space: nowrap;
2924  margin-left: auto;
2925}
2926
2927.directory-picker-error {
2928  padding: 0.5rem 0.75rem;
2929  background: var(--error-bg);
2930  border: 1px solid var(--error-border);
2931  border-radius: 0.25rem;
2932  color: var(--error-text);
2933  font-size: 0.875rem;
2934  margin-bottom: 0.75rem;
2935}
2936
2937.directory-picker-loading {
2938  display: flex;
2939  align-items: center;
2940  gap: 0.5rem;
2941  padding: 1rem;
2942  color: var(--text-secondary);
2943  font-size: 0.875rem;
2944}
2945
2946.directory-picker-list {
2947  flex: 1;
2948  overflow-y: auto;
2949  border: 1px solid var(--border);
2950  border-radius: 0.25rem;
2951  min-height: 200px;
2952  max-height: 300px;
2953}
2954
2955.directory-picker-entry {
2956  display: flex;
2957  align-items: center;
2958  gap: 0.5rem;
2959  width: 100%;
2960  padding: 0.5rem 0.75rem;
2961  text-align: left;
2962  background: transparent;
2963  border: none;
2964  border-bottom: 1px solid var(--border);
2965  color: var(--text-primary);
2966  font-size: 0.875rem;
2967  font-family: var(--font-mono);
2968  cursor: pointer;
2969  transition: background-color 0.15s;
2970}
2971
2972.directory-picker-entry:last-child {
2973  border-bottom: none;
2974}
2975
2976.directory-picker-entry:hover {
2977  background: var(--bg-tertiary);
2978}
2979
2980.directory-picker-entry-parent {
2981  color: var(--text-secondary);
2982  font-weight: 500;
2983}
2984
2985.directory-picker-icon {
2986  width: 1rem;
2987  height: 1rem;
2988  flex-shrink: 0;
2989  color: var(--text-secondary);
2990}
2991
2992.directory-picker-entry-name {
2993  flex-shrink: 0;
2994}
2995
2996.directory-picker-entry-git .directory-picker-icon {
2997  color: var(--accent-color, #f97316);
2998}
2999
3000.directory-picker-git-subject {
3001  flex: 1;
3002  min-width: 0;
3003  color: var(--text-tertiary);
3004  font-size: 0.75rem;
3005  white-space: nowrap;
3006  overflow: hidden;
3007  text-overflow: ellipsis;
3008  text-align: right;
3009}
3010
3011.directory-picker-empty {
3012  padding: 2rem;
3013  text-align: center;
3014  color: var(--text-tertiary);
3015  font-size: 0.875rem;
3016}
3017
3018.directory-picker-footer {
3019  display: flex;
3020  align-items: center;
3021  gap: 0.5rem;
3022  padding: 1rem;
3023  border-top: 1px solid var(--border);
3024}
3025
3026.directory-picker-footer-spacer {
3027  flex: 1;
3028}
3029
3030.directory-picker-new-btn {
3031  display: flex;
3032  align-items: center;
3033  gap: 0.375rem;
3034}
3035
3036.directory-picker-new-icon {
3037  width: 1rem;
3038  height: 1rem;
3039}
3040
3041/* Create directory form inside the list */
3042.directory-picker-create-form {
3043  display: flex;
3044  align-items: center;
3045  gap: 0.5rem;
3046  padding: 0.5rem 0.75rem;
3047  background: var(--bg-tertiary);
3048  border-bottom: 1px solid var(--border);
3049}
3050
3051.directory-picker-create-input {
3052  flex: 1;
3053  padding: 0.375rem 0.5rem;
3054  border: 1px solid var(--border);
3055  border-radius: 0.25rem;
3056  background: var(--bg-base);
3057  color: var(--text-primary);
3058  font-family: var(--font-mono);
3059  font-size: 0.875rem;
3060}
3061
3062.directory-picker-create-input:focus {
3063  outline: none;
3064  border-color: var(--primary);
3065}
3066
3067.directory-picker-create-btn {
3068  display: flex;
3069  align-items: center;
3070  justify-content: center;
3071  width: 1.75rem;
3072  height: 1.75rem;
3073  padding: 0;
3074  border: none;
3075  border-radius: 0.25rem;
3076  background: var(--primary);
3077  color: white;
3078  cursor: pointer;
3079  transition: background-color 0.15s;
3080}
3081
3082.directory-picker-create-btn:hover:not(:disabled) {
3083  background: var(--primary-hover);
3084}
3085
3086.directory-picker-create-btn:disabled {
3087  opacity: 0.5;
3088  cursor: not-allowed;
3089}
3090
3091.directory-picker-create-btn svg {
3092  width: 1rem;
3093  height: 1rem;
3094}
3095
3096.directory-picker-cancel-btn {
3097  background: var(--bg-secondary);
3098  color: var(--text-secondary);
3099}
3100
3101.directory-picker-cancel-btn:hover:not(:disabled) {
3102  background: var(--bg-tertiary);
3103}
3104
3105.directory-picker-create-error {
3106  padding: 0.375rem 0.75rem;
3107  background: var(--error-bg);
3108  color: var(--error-text);
3109  font-size: 0.75rem;
3110  border-bottom: 1px solid var(--error-border);
3111}
3112
3113/* Screen reader only */
3114.sr-only {
3115  position: absolute;
3116  width: 1px;
3117  height: 1px;
3118  padding: 0;
3119  margin: -1px;
3120  overflow: hidden;
3121  clip: rect(0, 0, 0, 0);
3122  white-space: nowrap;
3123  border: 0;
3124}
3125
3126/* Context Usage Bar */
3127/* Status bar for active conversation */
3128.status-bar-active {
3129  display: flex;
3130  align-items: center;
3131  justify-content: space-between;
3132  width: 100%;
3133}
3134
3135.status-working-group {
3136  display: flex;
3137  align-items: center;
3138  gap: 0.5rem;
3139}
3140
3141.status-stop-button {
3142  display: flex;
3143  align-items: center;
3144  gap: 0.25rem;
3145  padding: 0.25rem 0.5rem;
3146  border: none;
3147  border-radius: 0.25rem;
3148  background: var(--error-bg);
3149  color: var(--error-text);
3150  cursor: pointer;
3151  transition: all 0.15s ease;
3152  font-size: 0.75rem;
3153  font-weight: 500;
3154}
3155
3156.status-stop-button:hover:not(:disabled) {
3157  background: var(--error-text);
3158  color: white;
3159}
3160
3161.status-stop-button:disabled {
3162  opacity: 0.5;
3163  cursor: not-allowed;
3164}
3165
3166.status-stop-button svg {
3167  width: 0.75rem;
3168  height: 0.75rem;
3169  flex-shrink: 0;
3170}
3171
3172.status-stop-label {
3173  white-space: nowrap;
3174}
3175
3176/* Hide stop label on small screens */
3177@media (max-width: 500px) {
3178  .status-stop-label {
3179    display: none;
3180  }
3181  .status-stop-button {
3182    padding: 0.25rem;
3183  }
3184}
3185
3186.context-usage-bar-container {
3187  display: flex;
3188  align-items: center;
3189  gap: 4px;
3190}
3191
3192.context-warning-icon {
3193  font-size: 14px;
3194  line-height: 1;
3195  cursor: help;
3196}
3197
3198.context-usage-bar {
3199  width: 60px;
3200  height: 6px;
3201  background: var(--bg-tertiary);
3202  border-radius: 3px;
3203  overflow: hidden;
3204  cursor: pointer;
3205}
3206
3207.context-usage-fill {
3208  height: 100%;
3209  border-radius: 3px;
3210  transition:
3211    width 0.3s ease,
3212    background-color 0.3s ease;
3213}
3214
3215/* Mobile optimizations for tighter spacing */
3216@media (max-width: 767px) {
3217  .header {
3218    padding: 0.375rem 0.75rem;
3219    padding-top: calc(0.375rem + env(safe-area-inset-top, 0px));
3220  }
3221
3222  .status-bar {
3223    padding: 0.375rem 0.75rem;
3224    min-height: 2rem;
3225  }
3226
3227  .message-input-container {
3228    padding: 0.5rem 0.75rem;
3229    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
3230  }
3231}
3232
3233/* Print styles - looks like the chat window, just without chrome */
3234@media print {
3235  /* Reset page layout */
3236  html,
3237  body {
3238    height: auto !important;
3239    overflow: visible !important;
3240    background: white !important;
3241  }
3242
3243  /* Hide interactive chrome but keep the header title */
3244  .status-bar,
3245  .message-input-container,
3246  .drawer,
3247  .backdrop,
3248  .scroll-to-bottom-button,
3249  .overflow-menu,
3250  .context-menu,
3251  .modal-overlay {
3252    display: none !important;
3253  }
3254
3255  /* Hide header buttons but keep the title */
3256  .header-actions,
3257  .header .btn-icon {
3258    display: none !important;
3259  }
3260
3261  /* Simplify header for print */
3262  .header {
3263    background: white !important;
3264    border-bottom: 1px solid #e5e7eb !important;
3265    padding: 0.75rem 1rem !important;
3266  }
3267
3268  .header-title {
3269    font-size: 1rem !important;
3270  }
3271
3272  /* Reset app container for print */
3273  .app-container {
3274    display: block !important;
3275    height: auto !important;
3276    background: white !important;
3277  }
3278
3279  .main-content {
3280    display: block !important;
3281    height: auto !important;
3282  }
3283
3284  /* Reset messages area to flow naturally */
3285  .messages-area-wrapper {
3286    height: auto !important;
3287    overflow: visible !important;
3288    position: static !important;
3289    background: white !important;
3290  }
3291
3292  .messages-container {
3293    height: auto !important;
3294    overflow: visible !important;
3295    position: static !important;
3296    background: white !important;
3297  }
3298
3299  .messages-list {
3300    background: white !important;
3301  }
3302
3303  /* Hide empty state in print */
3304  .empty-state {
3305    display: none !important;
3306  }
3307
3308  /* Keep message styling, just add page break hints */
3309  .message {
3310    page-break-inside: avoid;
3311  }
3312
3313  /* Tool results */
3314  .tool-result-details {
3315    page-break-inside: avoid;
3316  }
3317
3318  /* Code blocks */
3319  pre,
3320  code {
3321    page-break-inside: avoid;
3322  }
3323
3324  /* Screenshots and images - ensure they fit */
3325  .screenshot-preview,
3326  .screenshot-image,
3327  .read-image-preview {
3328    max-width: 100% !important;
3329    height: auto !important;
3330    page-break-inside: avoid;
3331  }
3332}
3333/* Diff Viewer Overlay */
3334.diff-viewer-overlay {
3335  position: fixed;
3336  top: 0;
3337  left: 0;
3338  right: 0;
3339  bottom: 0;
3340  background: rgba(0, 0, 0, 0.5);
3341  z-index: 1000;
3342  display: flex;
3343  align-items: center;
3344  justify-content: center;
3345  padding: 1rem;
3346  padding-top: max(1rem, env(safe-area-inset-top));
3347  padding-bottom: max(1rem, env(safe-area-inset-bottom));
3348}
3349
3350.diff-viewer-container {
3351  background: var(--bg-base);
3352  border-radius: 0.5rem;
3353  width: calc(100% - 2rem);
3354  max-width: none;
3355  height: calc(100% - 2rem);
3356  max-height: none;
3357  display: flex;
3358  flex-direction: column;
3359  overflow: hidden;
3360  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
3361}
3362
3363.diff-viewer-header {
3364  display: flex;
3365  flex-direction: column;
3366  gap: 0.5rem;
3367  padding: 0.5rem 0.75rem;
3368  background: var(--bg-secondary);
3369  border-bottom: 1px solid var(--border-color);
3370}
3371
3372.diff-viewer-header-row {
3373  display: flex;
3374  align-items: center;
3375  gap: 0.5rem;
3376  width: 100%;
3377}
3378
3379.diff-viewer-selectors-row {
3380  display: flex;
3381  flex: 1;
3382  gap: 0.5rem;
3383  min-width: 0;
3384}
3385
3386.diff-viewer-selectors-row .diff-viewer-select {
3387  flex: 1;
3388  min-width: 0;
3389  max-width: none;
3390}
3391
3392.diff-viewer-file-selector-wrapper {
3393  display: flex;
3394  align-items: center;
3395  gap: 0.5rem;
3396  flex: 1;
3397  min-width: 0;
3398}
3399
3400.diff-viewer-file-selector-wrapper .diff-viewer-select {
3401  flex: 1;
3402  min-width: 0;
3403}
3404
3405.diff-viewer-file-index {
3406  font-size: 0.75rem;
3407  color: var(--text-secondary);
3408  white-space: nowrap;
3409  flex-shrink: 0;
3410}
3411
3412.diff-viewer-controls-row {
3413  display: flex;
3414  align-items: center;
3415  gap: 0.5rem;
3416  flex-shrink: 0;
3417}
3418
3419.diff-viewer-header-mobile {
3420  flex-direction: row;
3421  align-items: center;
3422  gap: 0.5rem;
3423  padding: 0.375rem 0.5rem;
3424}
3425
3426.diff-viewer-mobile-selectors {
3427  display: flex;
3428  flex: 1;
3429  gap: 0.375rem;
3430  min-width: 0;
3431}
3432
3433.diff-viewer-mobile-selectors .diff-viewer-select {
3434  flex: 1;
3435  min-width: 0;
3436  font-size: 0.75rem;
3437  padding: 0.375rem;
3438}
3439
3440.diff-viewer-mode-toggle {
3441  display: flex;
3442  border: 1px solid var(--border-color);
3443  border-radius: 0.25rem;
3444  overflow: hidden;
3445}
3446
3447.diff-viewer-mode-btn {
3448  padding: 0.25rem 0.5rem;
3449  border: none;
3450  background: var(--bg-base);
3451  color: var(--text-secondary);
3452  cursor: pointer;
3453  font-size: 0.875rem;
3454}
3455
3456.diff-viewer-mode-btn:first-child {
3457  border-right: 1px solid var(--border-color);
3458}
3459
3460.diff-viewer-mode-btn.active {
3461  background: var(--blue-bg);
3462  color: var(--blue-text);
3463}
3464
3465.diff-viewer-mode-btn:hover:not(.active) {
3466  background: var(--bg-tertiary);
3467}
3468
3469.diff-viewer-nav-buttons {
3470  display: flex;
3471  gap: 0.125rem;
3472}
3473
3474.diff-viewer-nav-btn {
3475  padding: 0.25rem 0.5rem;
3476  border: 1px solid var(--border-color);
3477  background: var(--bg-base);
3478  color: var(--text-primary);
3479  cursor: pointer;
3480  border-radius: 0.25rem;
3481  font-size: 0.875rem;
3482}
3483
3484.diff-viewer-nav-btn:disabled {
3485  opacity: 0.4;
3486  cursor: not-allowed;
3487}
3488
3489.diff-viewer-nav-btn:hover:not(:disabled) {
3490  background: var(--bg-tertiary);
3491}
3492
3493.diff-viewer-select {
3494  flex: 1;
3495  min-width: 120px;
3496  max-width: 300px;
3497  padding: 0.5rem;
3498  border: 1px solid var(--border-color);
3499  border-radius: 0.25rem;
3500  background: var(--bg-base);
3501  color: var(--text-primary);
3502  font-size: 0.875rem;
3503}
3504
3505.diff-viewer-dir-btn {
3506  width: 2rem;
3507  height: 2rem;
3508  border: none;
3509  background: transparent;
3510  color: var(--text-secondary);
3511  cursor: pointer;
3512  border-radius: 0.25rem;
3513  display: flex;
3514  align-items: center;
3515  justify-content: center;
3516  flex-shrink: 0;
3517  padding: 0;
3518}
3519
3520.diff-viewer-dir-btn:hover {
3521  background: var(--bg-tertiary);
3522  color: var(--text-primary);
3523}
3524
3525.diff-viewer-close {
3526  width: 2rem;
3527  height: 2rem;
3528  border: none;
3529  background: transparent;
3530  color: var(--text-secondary);
3531  font-size: 1.5rem;
3532  cursor: pointer;
3533  border-radius: 0.25rem;
3534  display: flex;
3535  align-items: center;
3536  justify-content: center;
3537  flex-shrink: 0;
3538}
3539
3540.diff-viewer-close:hover {
3541  background: var(--bg-tertiary);
3542  color: var(--text-primary);
3543}
3544
3545.diff-viewer-error {
3546  padding: 0.5rem 1rem;
3547  background: var(--error-bg);
3548  color: var(--error-text);
3549  font-size: 0.875rem;
3550}
3551
3552.diff-viewer-toast {
3553  position: fixed;
3554  bottom: 24px;
3555  right: 24px;
3556  padding: 12px 16px;
3557  border-radius: 8px;
3558  font-size: 14px;
3559  font-weight: 500;
3560  z-index: 9999;
3561  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
3562  animation: toast-fade-in 0.2s ease;
3563  color: #ffffff;
3564}
3565
3566.diff-viewer-toast-saving {
3567  background: #1976d2;
3568}
3569
3570.diff-viewer-toast-saved {
3571  background: #2e7d32;
3572}
3573
3574.diff-viewer-toast-error {
3575  background: #d32f2f;
3576}
3577
3578.diff-viewer-toast-hint {
3579  background: var(--bg-tertiary);
3580  color: var(--text-primary);
3581  border: 1px solid var(--border-color);
3582}
3583
3584@keyframes toast-fade-in {
3585  from {
3586    opacity: 0;
3587    transform: translateY(10px);
3588  }
3589  to {
3590    opacity: 1;
3591    transform: translateY(0);
3592  }
3593}
3594
3595.diff-viewer-content {
3596  flex: 1;
3597  overflow: hidden;
3598  position: relative;
3599}
3600
3601.diff-viewer-loading,
3602.diff-viewer-empty {
3603  display: flex;
3604  flex-direction: column;
3605  align-items: center;
3606  justify-content: center;
3607  height: 100%;
3608  color: var(--text-secondary);
3609  gap: 0.5rem;
3610}
3611
3612.diff-viewer-hint {
3613  font-size: 0.875rem;
3614  opacity: 0.7;
3615}
3616
3617.diff-viewer-editor {
3618  height: 100%;
3619  width: 100%;
3620}
3621
3622/* Diff viewer line hover highlighting (via decoration API) */
3623.diff-viewer-editor .monaco-editor .diff-viewer-line-hover {
3624  background-color: rgba(37, 99, 235, 0.08) !important;
3625}
3626
3627.dark .diff-viewer-editor .monaco-editor .diff-viewer-line-hover {
3628  background-color: rgba(96, 165, 250, 0.12) !important;
3629}
3630
3631/* Comment indicator glyph in margin for diff viewer */
3632.diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph {
3633  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Cline x1='9' y1='10' x2='15' y2='10'%3E%3C/line%3E%3C/svg%3E");
3634  background-size: 14px 14px;
3635  background-repeat: no-repeat;
3636  background-position: center;
3637  opacity: 0.6;
3638  cursor: pointer;
3639}
3640
3641.diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph:hover {
3642  opacity: 1;
3643}
3644
3645.dark .diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph {
3646  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Cline x1='9' y1='10' x2='15' y2='10'%3E%3C/line%3E%3C/svg%3E");
3647}
3648
3649/* Make diff viewer Monaco lines clickable with pointer cursor */
3650.diff-viewer-editor .monaco-editor .view-lines {
3651  cursor: pointer;
3652}
3653
3654.diff-viewer-comment-badge {
3655  position: absolute;
3656  bottom: 1rem;
3657  left: 1rem;
3658  padding: 0.5rem 1rem;
3659  background: var(--blue-bg);
3660  color: var(--blue-text);
3661  border-radius: 1rem;
3662  font-size: 0.875rem;
3663  font-weight: 500;
3664}
3665
3666/* Comment dialog */
3667.diff-viewer-comment-dialog {
3668  position: absolute;
3669  top: 50%;
3670  left: 50%;
3671  transform: translate(-50%, -50%);
3672  width: 90%;
3673  max-width: 500px;
3674  background: var(--bg-base);
3675  border: 1px solid var(--border-color);
3676  border-radius: 0.5rem;
3677  padding: 1rem;
3678  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
3679  z-index: 1001;
3680}
3681
3682.diff-viewer-comment-dialog h4 {
3683  margin: 0 0 0.75rem 0;
3684  color: var(--text-primary);
3685}
3686
3687.diff-viewer-selected-text {
3688  margin: 0 0 0.75rem 0;
3689  padding: 0.5rem;
3690  background: var(--bg-tertiary);
3691  border: 1px solid var(--border-color);
3692  border-radius: 0.25rem;
3693  font-size: 0.75rem;
3694  font-family: monospace;
3695  max-height: 150px;
3696  overflow: auto;
3697  white-space: pre;
3698}
3699
3700.diff-viewer-comment-input {
3701  width: 100%;
3702  min-height: 100px;
3703  padding: 0.5rem;
3704  border: 1px solid var(--border-color);
3705  border-radius: 0.25rem;
3706  background: var(--bg-base);
3707  color: var(--text-primary);
3708  font-size: 0.875rem;
3709  resize: vertical;
3710}
3711
3712.diff-viewer-comment-actions {
3713  display: flex;
3714  justify-content: flex-end;
3715  gap: 0.5rem;
3716  margin-top: 0.75rem;
3717}
3718
3719.diff-viewer-btn {
3720  padding: 0.5rem 1rem;
3721  border: none;
3722  border-radius: 0.25rem;
3723  font-size: 0.875rem;
3724  cursor: pointer;
3725}
3726
3727.diff-viewer-btn:disabled {
3728  opacity: 0.5;
3729  cursor: not-allowed;
3730}
3731
3732.diff-viewer-btn-primary {
3733  background: var(--blue-bg);
3734  color: var(--blue-text);
3735}
3736
3737.diff-viewer-btn-primary:hover:not(:disabled) {
3738  filter: brightness(0.95);
3739}
3740
3741.diff-viewer-btn-secondary {
3742  background: var(--bg-tertiary);
3743  color: var(--text-primary);
3744}
3745
3746.diff-viewer-btn-secondary:hover:not(:disabled) {
3747  background: var(--bg-secondary);
3748}
3749
3750/* Mobile floating nav buttons */
3751.diff-viewer-mobile-nav {
3752  position: absolute;
3753  bottom: 1.5rem;
3754  left: 50%;
3755  transform: translateX(-50%);
3756  display: flex;
3757  gap: 0.5rem;
3758  z-index: 100;
3759}
3760
3761.diff-viewer-mobile-nav-btn {
3762  width: 3rem;
3763  height: 3rem;
3764  border: none;
3765  border-radius: 50%;
3766  background: var(--bg-base);
3767  color: var(--text-primary);
3768  cursor: pointer;
3769  display: flex;
3770  align-items: center;
3771  justify-content: center;
3772  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
3773}
3774
3775.diff-viewer-mobile-nav-btn svg {
3776  width: 24px;
3777  height: 24px;
3778}
3779
3780.diff-viewer-mobile-nav-btn:disabled {
3781  opacity: 0.4;
3782  cursor: not-allowed;
3783}
3784
3785.diff-viewer-mobile-nav-btn:active:not(:disabled) {
3786  background: var(--bg-tertiary);
3787  transform: scale(0.95);
3788}
3789
3790.diff-viewer-mobile-mode-btn {
3791  font-size: 1.25rem;
3792}
3793
3794.diff-viewer-mobile-mode-btn.active {
3795  background: var(--blue-bg);
3796  color: var(--blue-text);
3797}
3798
3799/* Monaco comment glyph decoration */
3800/* Mobile optimizations for diff viewer */
3801@media (max-width: 767px) {
3802  .diff-viewer-overlay {
3803    padding: 0;
3804  }
3805
3806  .diff-viewer-container {
3807    border-radius: 0;
3808    width: 100%;
3809    max-width: 100%;
3810    height: 100%;
3811    max-height: 100%;
3812  }
3813
3814  .diff-viewer-close {
3815    width: 1.75rem;
3816    height: 1.75rem;
3817    font-size: 1.25rem;
3818    flex-shrink: 0;
3819  }
3820
3821  /* Monaco editor mobile styles - hide gutters completely */
3822  .diff-viewer-editor .monaco-editor .margin {
3823    display: none !important;
3824    width: 0 !important;
3825  }
3826
3827  .diff-viewer-editor .monaco-editor .margin-view-overlays {
3828    display: none !important;
3829    width: 0 !important;
3830  }
3831
3832  .diff-viewer-editor .monaco-editor .editor-scrollable {
3833    left: 0 !important;
3834  }
3835
3836  .diff-viewer-editor .monaco-editor .lines-content {
3837    margin-left: 0 !important;
3838  }
3839
3840  /* Ensure diff editor uses full width */
3841  .diff-viewer-editor .monaco-diff-editor {
3842    width: 100% !important;
3843  }
3844
3845  .diff-viewer-editor .monaco-diff-editor .editor.modified {
3846    width: 100% !important;
3847    left: 0 !important;
3848  }
3849
3850  /* Comment dialog on top half of screen for mobile (keyboard space) */
3851  .diff-viewer-comment-dialog {
3852    top: 10%;
3853    transform: translate(-50%, 0);
3854    max-height: 40vh;
3855    overflow-y: auto;
3856  }
3857
3858  .diff-viewer-comment-input {
3859    min-height: 60px;
3860  }
3861}
3862
3863/* Injected text indicator (for diff comments) */
3864.injected-text-indicator {
3865  display: flex;
3866  align-items: center;
3867  justify-content: space-between;
3868  padding: 0.5rem 0.75rem;
3869  background: var(--blue-bg);
3870  border-bottom: 1px solid var(--border-color);
3871  gap: 0.5rem;
3872}
3873
3874.injected-text-label {
3875  font-size: 0.875rem;
3876  color: var(--blue-text);
3877  flex: 1;
3878  min-width: 0;
3879  overflow: hidden;
3880  text-overflow: ellipsis;
3881  white-space: nowrap;
3882}
3883
3884.injected-text-insert-btn {
3885  padding: 0.375rem 0.75rem;
3886  background: var(--blue-text);
3887  color: white;
3888  border: none;
3889  border-radius: 0.25rem;
3890  font-size: 0.75rem;
3891  font-weight: 500;
3892  cursor: pointer;
3893  white-space: nowrap;
3894  flex-shrink: 0;
3895}
3896
3897.injected-text-insert-btn:hover {
3898  filter: brightness(1.1);
3899}
3900
3901/* Links in message text */
3902.text-link {
3903  color: var(--blue-text);
3904  text-decoration: underline;
3905  text-underline-offset: 2px;
3906  text-decoration-color: var(--blue-border);
3907}
3908
3909.text-link:hover {
3910  text-decoration-color: var(--blue-text);
3911}
3912
3913/* Command Palette */
3914.command-palette-overlay {
3915  position: fixed;
3916  inset: 0;
3917  background: rgba(0, 0, 0, 0.5);
3918  z-index: 100;
3919  display: flex;
3920  align-items: flex-start;
3921  justify-content: center;
3922  padding-top: 15vh;
3923}
3924
3925.command-palette {
3926  background: var(--bg-base);
3927  border: 1px solid var(--border-color);
3928  border-radius: 0.75rem;
3929  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
3930  width: 100%;
3931  max-width: 32rem;
3932  max-height: 60vh;
3933  display: flex;
3934  flex-direction: column;
3935  overflow: hidden;
3936}
3937
3938.command-palette-input-wrapper {
3939  display: flex;
3940  align-items: center;
3941  padding: 0.75rem 1rem;
3942  border-bottom: 1px solid var(--border-color);
3943  gap: 0.75rem;
3944}
3945
3946.command-palette-search-icon {
3947  color: var(--text-secondary);
3948  flex-shrink: 0;
3949}
3950
3951.command-palette-input {
3952  flex: 1;
3953  border: none;
3954  background: transparent;
3955  font-size: 1rem;
3956  color: var(--text-primary);
3957  outline: none;
3958}
3959
3960.command-palette-input::placeholder {
3961  color: var(--text-secondary);
3962}
3963
3964.command-palette-shortcut {
3965  flex-shrink: 0;
3966}
3967
3968.command-palette-spinner {
3969  width: 16px;
3970  height: 16px;
3971  border: 2px solid var(--border-color);
3972  border-top-color: var(--primary);
3973  border-radius: 50%;
3974  animation: spin 0.6s linear infinite;
3975  flex-shrink: 0;
3976}
3977
3978.command-palette-list {
3979  flex: 1;
3980  overflow-y: auto;
3981  padding: 0.5rem;
3982}
3983
3984.command-palette-empty {
3985  padding: 2rem 1rem;
3986  text-align: center;
3987  color: var(--text-secondary);
3988}
3989
3990.command-palette-item {
3991  display: flex;
3992  align-items: center;
3993  padding: 0.625rem 0.75rem;
3994  border-radius: 0.5rem;
3995  cursor: pointer;
3996  gap: 0.75rem;
3997}
3998
3999.command-palette-item:hover,
4000.command-palette-item.selected {
4001  background: var(--bg-secondary);
4002}
4003
4004.command-palette-item-icon {
4005  flex-shrink: 0;
4006  color: var(--text-secondary);
4007  display: flex;
4008  align-items: center;
4009  justify-content: center;
4010}
4011
4012.command-palette-item.selected .command-palette-item-icon {
4013  color: var(--primary);
4014}
4015
4016.command-palette-item-content {
4017  flex: 1;
4018  min-width: 0;
4019}
4020
4021.command-palette-item-title {
4022  font-size: 0.875rem;
4023  color: var(--text-primary);
4024  white-space: nowrap;
4025  overflow: hidden;
4026  text-overflow: ellipsis;
4027}
4028
4029.command-palette-item-subtitle {
4030  font-size: 0.75rem;
4031  color: var(--text-secondary);
4032  white-space: nowrap;
4033  overflow: hidden;
4034  text-overflow: ellipsis;
4035  margin-top: 0.125rem;
4036}
4037
4038.command-palette-item-badge {
4039  flex-shrink: 0;
4040  font-size: 0.625rem;
4041  text-transform: uppercase;
4042  letter-spacing: 0.05em;
4043  padding: 0.125rem 0.375rem;
4044  background: var(--bg-tertiary);
4045  border-radius: 0.25rem;
4046  color: var(--text-secondary);
4047}
4048
4049.command-palette-footer {
4050  display: flex;
4051  gap: 1rem;
4052  padding: 0.5rem 1rem;
4053  border-top: 1px solid var(--border-color);
4054  font-size: 0.75rem;
4055  color: var(--text-secondary);
4056}
4057
4058.command-palette-footer span {
4059  display: flex;
4060  align-items: center;
4061  gap: 0.25rem;
4062}
4063
4064@media (max-width: 640px) {
4065  .command-palette-overlay {
4066    padding: 1rem;
4067    padding-top: 5vh;
4068  }
4069
4070  .command-palette {
4071    max-height: 80vh;
4072  }
4073
4074  .command-palette-footer {
4075    display: none;
4076  }
4077}
4078
4079/* Models Modal Styles */
4080.models-modal {
4081  padding: 0.5rem;
4082}
4083
4084.models-loading {
4085  display: flex;
4086  align-items: center;
4087  justify-content: center;
4088  gap: 0.5rem;
4089  padding: 2rem;
4090  color: var(--text-secondary);
4091}
4092
4093.models-error {
4094  display: flex;
4095  align-items: center;
4096  justify-content: space-between;
4097  padding: 0.75rem 1rem;
4098  background: var(--error-bg);
4099  border: 1px solid var(--error-border);
4100  border-radius: 0.375rem;
4101  color: var(--error-text);
4102  margin-bottom: 1rem;
4103}
4104
4105.models-error-dismiss {
4106  background: none;
4107  border: none;
4108  font-size: 1.25rem;
4109  cursor: pointer;
4110  color: inherit;
4111  padding: 0;
4112  line-height: 1;
4113}
4114
4115.models-info {
4116  padding: 0.75rem 1rem;
4117  background: var(--bg-tertiary);
4118  border-radius: 0.375rem;
4119  margin-bottom: 1rem;
4120}
4121
4122.models-info p {
4123  margin: 0 0 0.5rem 0;
4124  color: var(--text-secondary);
4125}
4126
4127.builtin-list {
4128  margin: 0;
4129  padding-left: 1.25rem;
4130  color: var(--text-primary);
4131}
4132
4133.builtin-list li {
4134  margin: 0.25rem 0;
4135}
4136
4137.models-list {
4138  display: flex;
4139  flex-direction: column;
4140  gap: 0.75rem;
4141  margin-bottom: 1rem;
4142}
4143
4144.model-card {
4145  padding: 0.75rem 1rem;
4146  background: var(--bg-base);
4147  border: 1px solid var(--border);
4148  border-radius: 0.375rem;
4149}
4150
4151.model-header {
4152  display: flex;
4153  justify-content: space-between;
4154  align-items: flex-start;
4155  gap: 0.5rem;
4156}
4157
4158.model-info {
4159  display: flex;
4160  flex-wrap: wrap;
4161  align-items: center;
4162  gap: 0.5rem;
4163}
4164
4165.model-name {
4166  font-weight: 500;
4167  color: var(--text-primary);
4168}
4169
4170.model-provider {
4171  font-size: 0.75rem;
4172  padding: 0.125rem 0.5rem;
4173  background: var(--bg-tertiary);
4174  border-radius: 0.25rem;
4175  color: var(--text-secondary);
4176}
4177
4178.model-source {
4179  font-size: 0.75rem;
4180  padding: 0.125rem 0.5rem;
4181  background: var(--bg-tertiary);
4182  border-radius: 0.25rem;
4183  color: var(--text-secondary);
4184}
4185
4186.model-card-builtin {
4187  opacity: 0.8;
4188  background: var(--bg-secondary);
4189}
4190
4191.models-empty {
4192  padding: 2rem;
4193  text-align: center;
4194  color: var(--text-secondary);
4195}
4196
4197.models-empty-hint {
4198  font-size: 0.875rem;
4199  margin-top: 0.5rem;
4200  color: var(--text-tertiary);
4201}
4202
4203.model-badge {
4204  font-size: 0.625rem;
4205  text-transform: uppercase;
4206  letter-spacing: 0.05em;
4207  padding: 0.125rem 0.375rem;
4208  background: var(--blue-bg);
4209  border: 1px solid var(--blue-border);
4210  border-radius: 0.25rem;
4211  color: var(--blue-text);
4212}
4213
4214.model-actions {
4215  display: flex;
4216  gap: 0.25rem;
4217  flex-shrink: 0;
4218}
4219
4220.model-details {
4221  margin-top: 0.5rem;
4222  display: flex;
4223  flex-direction: column;
4224  gap: 0.25rem;
4225}
4226
4227.model-api-name {
4228  font-size: 0.75rem;
4229  font-family: var(--font-mono);
4230  color: var(--text-secondary);
4231}
4232
4233.model-endpoint {
4234  font-size: 0.75rem;
4235  color: var(--text-tertiary);
4236  word-break: break-all;
4237}
4238
4239.btn-icon {
4240  padding: 0.25rem;
4241  border-radius: 0.25rem;
4242  color: var(--text-secondary);
4243  background: transparent;
4244  border: none;
4245  cursor: pointer;
4246  display: flex;
4247  align-items: center;
4248  justify-content: center;
4249}
4250
4251.btn-icon:hover {
4252  background: var(--bg-tertiary);
4253  color: var(--text-primary);
4254}
4255
4256/* Version Checker Styles */
4257.version-update-dot {
4258  position: absolute;
4259  top: 2px;
4260  right: 2px;
4261  width: 8px;
4262  height: 8px;
4263  background: #ef4444;
4264  border-radius: 50%;
4265  border: 2px solid var(--bg-base);
4266}
4267
4268.version-menu-dot {
4269  width: 8px;
4270  height: 8px;
4271  background: #ef4444;
4272  border-radius: 50%;
4273  margin-left: auto;
4274  flex-shrink: 0;
4275}
4276
4277.version-modal-overlay {
4278  position: fixed;
4279  inset: 0;
4280  background: rgba(0, 0, 0, 0.5);
4281  display: flex;
4282  align-items: center;
4283  justify-content: center;
4284  z-index: 1000;
4285  padding: 1rem;
4286}
4287
4288.version-modal {
4289  background: var(--bg-base);
4290  border-radius: 0.5rem;
4291  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
4292  max-width: 500px;
4293  width: 100%;
4294  max-height: 80vh;
4295  display: flex;
4296  flex-direction: column;
4297  overflow: hidden;
4298}
4299
4300.version-modal-header {
4301  display: flex;
4302  align-items: center;
4303  justify-content: space-between;
4304  padding: 1rem 1.25rem;
4305  border-bottom: 1px solid var(--border-color);
4306}
4307
4308.version-modal-header h2 {
4309  margin: 0;
4310  font-size: 1.125rem;
4311  font-weight: 600;
4312  color: var(--text-primary);
4313}
4314
4315.version-modal-close {
4316  background: none;
4317  border: none;
4318  padding: 0.25rem;
4319  cursor: pointer;
4320  color: var(--text-secondary);
4321  border-radius: 0.25rem;
4322}
4323
4324.version-modal-close:hover {
4325  background: var(--bg-tertiary);
4326  color: var(--text-primary);
4327}
4328
4329.version-modal-close svg {
4330  width: 1.25rem;
4331  height: 1.25rem;
4332}
4333
4334.version-modal-content {
4335  padding: 1.25rem;
4336  overflow-y: auto;
4337  display: flex;
4338  flex-direction: column;
4339  gap: 1rem;
4340}
4341
4342.version-info-row {
4343  display: flex;
4344  align-items: center;
4345  gap: 0.5rem;
4346  font-size: 0.875rem;
4347}
4348
4349.version-label {
4350  color: var(--text-secondary);
4351}
4352
4353.version-value {
4354  font-weight: 500;
4355  color: var(--text-primary);
4356  font-family: var(--font-mono);
4357}
4358
4359.version-date {
4360  color: var(--text-tertiary);
4361  font-size: 0.75rem;
4362}
4363
4364.version-error {
4365  padding: 0.75rem;
4366  background: var(--error-bg);
4367  border: 1px solid var(--error-border);
4368  border-radius: 0.375rem;
4369  font-size: 0.875rem;
4370  color: var(--error-text);
4371}
4372
4373.version-success {
4374  padding: 0.75rem;
4375  background: var(--success-bg);
4376  border: 1px solid var(--success-border);
4377  border-radius: 0.375rem;
4378  font-size: 0.875rem;
4379  color: var(--success-text);
4380}
4381
4382.version-changelog {
4383  border-top: 1px solid var(--border-color);
4384  padding-top: 1rem;
4385}
4386
4387.version-changelog h3 {
4388  margin: 0 0 0.75rem 0;
4389  font-size: 0.875rem;
4390  font-weight: 600;
4391}
4392
4393.changelog-link {
4394  color: var(--link-color);
4395  text-decoration: none;
4396}
4397
4398.changelog-link:hover {
4399  text-decoration: underline;
4400}
4401
4402.commit-list {
4403  margin: 0;
4404  padding: 0;
4405  list-style: none;
4406  max-height: 250px;
4407  overflow-y: auto;
4408  font-size: 0.8125rem;
4409}
4410
4411.commit-item {
4412  display: flex;
4413  gap: 0.5rem;
4414  padding: 0.5rem 0;
4415  border-bottom: 1px solid var(--border-color);
4416  align-items: flex-start;
4417}
4418
4419.commit-item:last-child {
4420  border-bottom: none;
4421}
4422
4423.commit-sha {
4424  font-family: var(--font-mono);
4425  color: var(--link-color);
4426  font-size: 0.75rem;
4427  flex-shrink: 0;
4428  text-decoration: none;
4429}
4430
4431.commit-sha:hover {
4432  text-decoration: underline;
4433}
4434
4435.commit-message {
4436  color: var(--text-primary);
4437  word-break: break-word;
4438  line-height: 1.4;
4439}
4440
4441.version-loading,
4442.version-no-commits {
4443  color: var(--text-secondary);
4444  font-size: 0.875rem;
4445  padding: 0.5rem 0;
4446}
4447
4448.version-actions {
4449  display: flex;
4450  flex-direction: column;
4451  gap: 0.75rem;
4452  border-top: 1px solid var(--border-color);
4453  padding-top: 1rem;
4454}
4455
4456.version-btn {
4457  padding: 0.5rem 1rem;
4458  border-radius: 0.375rem;
4459  font-size: 0.875rem;
4460  font-weight: 500;
4461  cursor: pointer;
4462  transition: background-color 0.15s;
4463}
4464
4465.version-btn:disabled {
4466  opacity: 0.6;
4467  cursor: not-allowed;
4468}
4469
4470.version-btn-primary {
4471  background: var(--primary);
4472  color: white;
4473  border: none;
4474}
4475
4476.version-btn-primary:hover:not(:disabled) {
4477  background: var(--primary-dark);
4478}
4479
4480.btn-icon.btn-danger:hover {
4481  background: var(--error-bg);
4482  color: var(--error-text);
4483}
4484
4485.add-model-btn {
4486  width: 100%;
4487}
4488
4489/* Model Form */
4490.model-form h3 {
4491  margin: 0 0 0.75rem 0;
4492  font-size: 1rem;
4493  font-weight: 600;
4494}
4495
4496.form-group {
4497  margin-bottom: 0.75rem;
4498}
4499
4500.form-group label {
4501  display: block;
4502  font-size: 0.875rem;
4503  font-weight: 500;
4504  margin-bottom: 0.25rem;
4505  color: var(--text-primary);
4506}
4507
4508.form-group label .optional {
4509  font-weight: 400;
4510  color: var(--text-secondary);
4511}
4512
4513.form-input {
4514  width: 100%;
4515  padding: 0.5rem 0.75rem;
4516  background: var(--bg-base);
4517  border: 1px solid var(--border);
4518  border-radius: 0.375rem;
4519  color: var(--text-primary);
4520  font-family: inherit;
4521  font-size: 0.875rem;
4522}
4523
4524.form-input:focus {
4525  outline: none;
4526  border-color: var(--primary);
4527  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
4528}
4529
4530.form-checkbox {
4531  display: flex;
4532  align-items: center;
4533}
4534
4535.form-checkbox label {
4536  display: flex;
4537  align-items: center;
4538  gap: 0.5rem;
4539  cursor: pointer;
4540  margin: 0;
4541}
4542
4543.form-checkbox input[type="checkbox"] {
4544  width: 1rem;
4545  height: 1rem;
4546  cursor: pointer;
4547}
4548
4549.info-icon-wrapper {
4550  position: relative;
4551  display: inline-flex;
4552  align-items: center;
4553  margin-left: 0.25rem;
4554}
4555
4556.info-icon {
4557  display: inline-flex;
4558  align-items: center;
4559  justify-content: center;
4560  color: var(--text-tertiary);
4561  cursor: pointer;
4562}
4563
4564.info-icon:hover {
4565  color: var(--text-secondary);
4566}
4567
4568.info-tooltip {
4569  position: absolute;
4570  top: 50%;
4571  left: 100%;
4572  transform: translateY(-50%);
4573  background: var(--bg-tertiary);
4574  border: 1px solid var(--border);
4575  border-radius: 0.375rem;
4576  padding: 0.5rem 0.75rem;
4577  font-size: 0.75rem;
4578  font-weight: 400;
4579  color: var(--text-primary);
4580  white-space: normal;
4581  width: 220px;
4582  margin-left: 0.375rem;
4583  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
4584  z-index: 100;
4585}
4586
4587.info-tooltip::after {
4588  content: "";
4589  position: absolute;
4590  top: 50%;
4591  right: 100%;
4592  transform: translateY(-50%);
4593  border: 6px solid transparent;
4594  border-right-color: var(--border);
4595}
4596
4597.provider-buttons {
4598  display: flex;
4599  gap: 0.5rem;
4600}
4601
4602.provider-btn {
4603  flex: 1;
4604  padding: 0.5rem;
4605  background: var(--bg-base);
4606  border: 1px solid var(--border);
4607  border-radius: 0.375rem;
4608  color: var(--text-primary);
4609  font-size: 0.875rem;
4610  cursor: pointer;
4611  transition: all 0.15s;
4612}
4613
4614.provider-btn:hover {
4615  background: var(--bg-tertiary);
4616}
4617
4618.provider-btn.selected {
4619  background: var(--primary);
4620  border-color: var(--primary);
4621  color: white;
4622}
4623
4624.endpoint-toggle {
4625  display: flex;
4626  gap: 0;
4627  margin-bottom: 0.5rem;
4628}
4629
4630.toggle-btn {
4631  flex: 1;
4632  padding: 0.375rem 0.75rem;
4633  background: var(--bg-base);
4634  border: 1px solid var(--border);
4635  color: var(--text-secondary);
4636  font-size: 0.75rem;
4637  cursor: pointer;
4638  transition: all 0.15s;
4639}
4640
4641.toggle-btn:first-child {
4642  border-radius: 0.375rem 0 0 0.375rem;
4643}
4644
4645.toggle-btn:last-child {
4646  border-radius: 0 0.375rem 0.375rem 0;
4647  border-left: none;
4648}
4649
4650.toggle-btn.selected {
4651  background: var(--bg-tertiary);
4652  color: var(--text-primary);
4653}
4654
4655.endpoint-display {
4656  padding: 0.5rem 0.75rem;
4657  background: var(--bg-tertiary);
4658  border-radius: 0.375rem;
4659  font-size: 0.75rem;
4660  color: var(--text-secondary);
4661  word-break: break-all;
4662}
4663
4664.model-presets {
4665  display: flex;
4666  flex-wrap: wrap;
4667  gap: 0.375rem;
4668  margin-bottom: 0.5rem;
4669}
4670
4671.preset-btn {
4672  padding: 0.25rem 0.625rem;
4673  background: var(--bg-base);
4674  border: 1px solid var(--border);
4675  border-radius: 0.25rem;
4676  color: var(--text-secondary);
4677  font-size: 0.75rem;
4678  cursor: pointer;
4679  transition: all 0.15s;
4680}
4681
4682.preset-btn:hover {
4683  background: var(--bg-tertiary);
4684  color: var(--text-primary);
4685}
4686
4687.preset-btn.selected {
4688  background: var(--blue-bg);
4689  border-color: var(--blue-border);
4690  color: var(--blue-text);
4691}
4692
4693.test-result {
4694  padding: 0.75rem 1rem;
4695  border-radius: 0.375rem;
4696  margin-bottom: 1rem;
4697  font-size: 0.875rem;
4698}
4699
4700.test-result.success {
4701  background: var(--success-bg);
4702  border: 1px solid var(--success-border);
4703  color: var(--success-text);
4704}
4705
4706.test-result.error {
4707  background: var(--error-bg);
4708  border: 1px solid var(--error-border);
4709  color: var(--error-text);
4710}
4711
4712.form-actions {
4713  display: flex;
4714  gap: 0.5rem;
4715  justify-content: flex-end;
4716  margin-top: 1rem;
4717  padding-bottom: 0.5rem;
4718}
4719
4720kbd {
4721  display: inline-block;
4722  padding: 0.125rem 0.375rem;
4723  font-size: 0.75rem;
4724  font-family: inherit;
4725  background: var(--bg-tertiary);
4726  border: 1px solid var(--border-color);
4727  border-radius: 0.25rem;
4728  color: var(--text-secondary);
4729}
4730
4731/* System Prompt View */
4732.system-prompt-view {
4733  background: var(--gray-100);
4734  border-radius: 0.5rem;
4735  margin: 0.5rem 0;
4736  width: 100%;
4737  border: 1px dashed var(--border);
4738}
4739
4740.dark .system-prompt-view {
4741  background: var(--gray-800);
4742}
4743
4744.system-prompt-header {
4745  display: flex;
4746  align-items: center;
4747  justify-content: space-between;
4748  padding: 0.75rem 1rem;
4749  cursor: pointer;
4750  user-select: none;
4751}
4752
4753.system-prompt-header:hover {
4754  background: rgba(0, 0, 0, 0.02);
4755  border-radius: 0.5rem;
4756}
4757
4758.dark .system-prompt-header:hover {
4759  background: rgba(255, 255, 255, 0.02);
4760}
4761
4762.system-prompt-summary {
4763  display: flex;
4764  align-items: center;
4765  gap: 0.5rem;
4766  flex: 1;
4767  min-width: 0;
4768}
4769
4770.system-prompt-icon {
4771  font-size: 1rem;
4772  flex-shrink: 0;
4773}
4774
4775.system-prompt-label {
4776  font-family: var(--font-mono);
4777  font-size: 0.875rem;
4778  color: var(--text-primary);
4779  font-weight: 500;
4780}
4781
4782.system-prompt-meta {
4783  font-size: 0.75rem;
4784  color: var(--text-secondary);
4785  flex-shrink: 0;
4786}
4787
4788.system-prompt-content {
4789  padding: 0 1rem 1rem 1rem;
4790}
4791
4792.system-prompt-text {
4793  font-family: var(--font-mono);
4794  font-size: 0.75rem;
4795  line-height: 1.5;
4796  color: var(--text-secondary);
4797  background: var(--bg-base);
4798  border: 1px solid var(--border);
4799  border-radius: 0.375rem;
4800  padding: 1rem;
4801  margin: 0;
4802  max-height: 400px;
4803  overflow: auto;
4804  white-space: pre-wrap;
4805  word-wrap: break-word;
4806}
4807
4808.dark .system-prompt-text {
4809  background: var(--gray-900);
4810}