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}
1126
1127.dark .patch-tool {
1128  background: var(--gray-800);
1129}
1130
1131.patch-tool-header {
1132  display: flex;
1133  align-items: center;
1134  justify-content: space-between;
1135  padding: 0.75rem 1rem;
1136  cursor: pointer;
1137  user-select: none;
1138}
1139
1140.patch-tool-header:hover {
1141  background: rgba(0, 0, 0, 0.02);
1142  border-radius: 0.5rem;
1143}
1144
1145.dark .patch-tool-header:hover {
1146  background: rgba(255, 255, 255, 0.02);
1147}
1148
1149.patch-tool-summary {
1150  display: flex;
1151  align-items: center;
1152  gap: 0.5rem;
1153  flex: 1;
1154  min-width: 0;
1155}
1156
1157.patch-tool-emoji {
1158  font-size: 1rem;
1159  flex-shrink: 0;
1160}
1161
1162.patch-tool-emoji.running {
1163}
1164
1165.patch-tool-filename {
1166  font-family: var(--font-mono);
1167  font-size: 0.875rem;
1168  color: var(--text-primary);
1169  overflow: hidden;
1170  text-overflow: ellipsis;
1171  white-space: nowrap;
1172  font-weight: 500;
1173}
1174
1175.patch-tool-running {
1176  font-size: 0.75rem;
1177  color: var(--text-secondary);
1178  font-style: italic;
1179  flex-shrink: 0;
1180  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1181}
1182
1183.patch-tool-success {
1184  color: var(--success-text);
1185  font-size: 0.875rem;
1186  flex-shrink: 0;
1187}
1188
1189.patch-tool-error {
1190  color: var(--text-secondary);
1191  font-size: 0.875rem;
1192  flex-shrink: 0;
1193}
1194
1195.patch-tool-header-controls {
1196  display: flex;
1197  align-items: center;
1198  gap: 0.25rem;
1199  flex-shrink: 0;
1200}
1201
1202.patch-tool-toggle {
1203  background: none;
1204  border: none;
1205  cursor: pointer;
1206  padding: 0.25rem;
1207  display: flex;
1208  align-items: center;
1209  justify-content: center;
1210  color: var(--text-secondary);
1211  flex-shrink: 0;
1212}
1213
1214.patch-tool-toggle:hover {
1215  color: var(--text-primary);
1216}
1217
1218.patch-tool-diff-mode-toggle {
1219  background: none;
1220  border: 1px solid var(--border);
1221  border-radius: 0.25rem;
1222  cursor: pointer;
1223  padding: 0.25rem;
1224  display: flex;
1225  align-items: center;
1226  justify-content: center;
1227  color: var(--text-secondary);
1228  flex-shrink: 0;
1229  transition: all 0.15s ease;
1230}
1231
1232.patch-tool-diff-mode-toggle:hover {
1233  color: var(--text-primary);
1234  background: var(--bg-secondary);
1235  border-color: var(--text-tertiary);
1236}
1237
1238.patch-tool-details {
1239  padding: 0 1rem 0.75rem 1rem;
1240  display: flex;
1241  flex-direction: column;
1242  gap: 0.75rem;
1243}
1244
1245.patch-tool-section {
1246  display: flex;
1247  flex-direction: column;
1248  gap: 0.5rem;
1249}
1250
1251.patch-tool-label {
1252  font-size: 0.75rem;
1253  font-weight: 500;
1254  color: var(--text-secondary);
1255  display: flex;
1256  align-items: center;
1257  justify-content: space-between;
1258}
1259
1260.patch-tool-time {
1261  font-size: 0.75rem;
1262  color: var(--text-tertiary);
1263  font-weight: normal;
1264}
1265
1266.patch-tool-error-message {
1267  font-family: var(--font-mono);
1268  font-size: 0.875rem;
1269  background: var(--bg-tertiary);
1270  border: 1px solid var(--border);
1271  border-radius: 0.25rem;
1272  padding: 0.75rem;
1273  margin: 0;
1274  overflow-x: auto;
1275  white-space: pre-wrap;
1276  word-break: break-word;
1277  color: var(--text-secondary);
1278}
1279
1280/* Patch Tool Simple Diff View */
1281.patch-tool-diff {
1282  font-family: var(--font-mono);
1283  font-size: 0.875rem;
1284  background: var(--bg-base);
1285  border: 1px solid var(--border);
1286  border-radius: 0.25rem;
1287  padding: 0.75rem;
1288  margin: 0;
1289  overflow-x: auto;
1290  line-height: 1.4;
1291}
1292
1293.patch-diff-line {
1294  white-space: pre;
1295  display: block;
1296}
1297
1298.patch-diff-addition {
1299  background: rgba(34, 197, 94, 0.1);
1300  color: #16a34a;
1301}
1302
1303.dark .patch-diff-addition {
1304  background: rgba(34, 197, 94, 0.15);
1305  color: #86efac;
1306}
1307
1308.patch-diff-deletion {
1309  background: rgba(239, 68, 68, 0.1);
1310  color: #dc2626;
1311}
1312
1313.dark .patch-diff-deletion {
1314  background: rgba(239, 68, 68, 0.15);
1315  color: #fca5a5;
1316}
1317
1318.patch-diff-hunk {
1319  color: var(--text-secondary);
1320  background: var(--bg-tertiary);
1321  font-weight: 500;
1322}
1323
1324.patch-diff-header {
1325  color: var(--text-tertiary);
1326  font-style: italic;
1327}
1328
1329/* Patch Tool Monaco Container */
1330.patch-tool-monaco-container {
1331  display: flex;
1332  flex-direction: column;
1333  gap: 0.25rem;
1334}
1335
1336/* Patch Tool Monaco Placeholder (for lazy loading) */
1337.patch-tool-monaco-placeholder {
1338  display: flex;
1339  align-items: center;
1340  justify-content: center;
1341  gap: 0.5rem;
1342  background: var(--bg-tertiary);
1343  border: 1px solid var(--border);
1344  border-radius: 0.25rem;
1345  color: var(--text-secondary);
1346  font-size: 0.75rem;
1347}
1348
1349.spinner-small {
1350  width: 14px;
1351  height: 14px;
1352  border: 2px solid var(--border);
1353  border-top-color: var(--primary);
1354  border-radius: 50%;
1355  animation: spin 0.8s linear infinite;
1356}
1357
1358@keyframes spin {
1359  to {
1360    transform: rotate(360deg);
1361  }
1362}
1363
1364/* Patch Tool Monaco Editor */
1365.patch-tool-monaco-editor {
1366  border: 1px solid var(--border);
1367  border-radius: 0.25rem;
1368  overflow: hidden;
1369}
1370
1371/* Monaco line hover highlighting (via decoration API) */
1372.patch-tool-monaco-editor .monaco-editor .patch-line-hover {
1373  background-color: rgba(37, 99, 235, 0.08) !important;
1374}
1375
1376.dark .patch-tool-monaco-editor .monaco-editor .patch-line-hover {
1377  background-color: rgba(96, 165, 250, 0.12) !important;
1378}
1379
1380/* Comment indicator glyph in margin */
1381.patch-tool-monaco-editor .monaco-editor .patch-comment-glyph {
1382  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");
1383  background-size: 14px 14px;
1384  background-repeat: no-repeat;
1385  background-position: center;
1386  opacity: 0.6;
1387  cursor: pointer;
1388}
1389
1390.patch-tool-monaco-editor .monaco-editor .patch-comment-glyph:hover {
1391  opacity: 1;
1392}
1393
1394.dark .patch-tool-monaco-editor .monaco-editor .patch-comment-glyph {
1395  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");
1396}
1397
1398/* Make Monaco lines clickable with pointer cursor */
1399.patch-tool-monaco-editor .monaco-editor .view-lines {
1400  cursor: pointer;
1401}
1402
1403/* Patch Tool Comment Dialog */
1404.patch-tool-comment-dialog {
1405  position: fixed;
1406  top: 50%;
1407  left: 50%;
1408  transform: translate(-50%, -50%);
1409  background: var(--bg-base);
1410  border: 1px solid var(--border);
1411  border-radius: 0.5rem;
1412  padding: 1rem;
1413  z-index: 1000;
1414  max-width: 500px;
1415  width: 90%;
1416  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
1417}
1418
1419.dark .patch-tool-comment-dialog {
1420  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
1421}
1422
1423.patch-tool-comment-dialog h4 {
1424  margin: 0 0 0.75rem 0;
1425  font-size: 0.875rem;
1426  font-weight: 600;
1427  color: var(--text-primary);
1428}
1429
1430.patch-tool-selected-text {
1431  font-family: var(--font-mono);
1432  font-size: 0.75rem;
1433  background: var(--bg-tertiary);
1434  border: 1px solid var(--border);
1435  border-radius: 0.25rem;
1436  padding: 0.5rem;
1437  margin: 0 0 0.75rem 0;
1438  overflow-x: auto;
1439  max-height: 100px;
1440  white-space: pre;
1441  color: var(--text-secondary);
1442}
1443
1444.patch-tool-comment-input {
1445  width: 100%;
1446  min-height: 80px;
1447  padding: 0.5rem;
1448  border: 1px solid var(--border);
1449  border-radius: 0.25rem;
1450  background: var(--bg-base);
1451  color: var(--text-primary);
1452  font-family: inherit;
1453  font-size: 0.875rem;
1454  resize: vertical;
1455  box-sizing: border-box;
1456}
1457
1458.patch-tool-comment-input:focus {
1459  outline: none;
1460  border-color: var(--primary);
1461  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
1462}
1463
1464.patch-tool-comment-actions {
1465  display: flex;
1466  gap: 0.5rem;
1467  justify-content: flex-end;
1468  margin-top: 0.75rem;
1469}
1470
1471.patch-tool-btn {
1472  padding: 0.5rem 1rem;
1473  border-radius: 0.25rem;
1474  font-size: 0.875rem;
1475  font-weight: 500;
1476  cursor: pointer;
1477  border: none;
1478  transition: background-color 0.15s;
1479}
1480
1481.patch-tool-btn-primary {
1482  background: var(--primary);
1483  color: white;
1484}
1485
1486.patch-tool-btn-primary:hover:not(:disabled) {
1487  background: var(--primary-dark);
1488}
1489
1490.patch-tool-btn-primary:disabled {
1491  opacity: 0.5;
1492  cursor: not-allowed;
1493}
1494
1495.patch-tool-btn-secondary {
1496  background: var(--bg-tertiary);
1497  color: var(--text-primary);
1498}
1499
1500.patch-tool-btn-secondary:hover {
1501  background: var(--bg-secondary);
1502}
1503
1504/* Screenshot Tool */
1505.screenshot-tool {
1506  background: var(--gray-100);
1507  border-radius: 0.5rem;
1508  margin: 0.5rem 0;
1509  width: 100%;
1510}
1511
1512.dark .screenshot-tool {
1513  background: var(--gray-800);
1514}
1515
1516.screenshot-tool-header {
1517  display: flex;
1518  align-items: center;
1519  justify-content: space-between;
1520  padding: 0.75rem 1rem;
1521  cursor: pointer;
1522  user-select: none;
1523}
1524
1525.screenshot-tool-header:hover {
1526  background: rgba(0, 0, 0, 0.02);
1527  border-radius: 0.5rem;
1528}
1529
1530.dark .screenshot-tool-header:hover {
1531  background: rgba(255, 255, 255, 0.02);
1532}
1533
1534.screenshot-tool-summary {
1535  display: flex;
1536  align-items: center;
1537  gap: 0.5rem;
1538  flex: 1;
1539  min-width: 0;
1540}
1541
1542.screenshot-tool-emoji {
1543  font-size: 1rem;
1544  flex-shrink: 0;
1545}
1546
1547.screenshot-tool-emoji.running {
1548}
1549
1550.screenshot-tool-filename {
1551  font-family: var(--font-mono);
1552  font-size: 0.875rem;
1553  color: var(--text-primary);
1554  overflow: hidden;
1555  text-overflow: ellipsis;
1556  white-space: nowrap;
1557  font-weight: 500;
1558}
1559
1560.screenshot-tool-running {
1561  font-size: 0.75rem;
1562  color: var(--text-secondary);
1563  font-style: italic;
1564  flex-shrink: 0;
1565  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
1566}
1567
1568.screenshot-tool-success {
1569  color: var(--success-text);
1570  font-size: 0.875rem;
1571  flex-shrink: 0;
1572}
1573
1574.screenshot-tool-error {
1575  color: var(--error-text);
1576  font-size: 0.875rem;
1577  flex-shrink: 0;
1578}
1579
1580.screenshot-tool-toggle {
1581  background: none;
1582  border: none;
1583  cursor: pointer;
1584  padding: 0.25rem;
1585  display: flex;
1586  align-items: center;
1587  justify-content: center;
1588  color: var(--text-secondary);
1589  flex-shrink: 0;
1590}
1591
1592.screenshot-tool-toggle:hover {
1593  color: var(--text-primary);
1594}
1595
1596.screenshot-tool-details {
1597  padding: 0 1rem 0.75rem 1rem;
1598  display: flex;
1599  flex-direction: column;
1600  gap: 0.75rem;
1601}
1602
1603.screenshot-tool-section {
1604  display: flex;
1605  flex-direction: column;
1606  gap: 0.5rem;
1607}
1608
1609.screenshot-tool-label {
1610  font-size: 0.75rem;
1611  font-weight: 500;
1612  color: var(--text-secondary);
1613  display: flex;
1614  align-items: center;
1615  justify-content: space-between;
1616}
1617
1618.screenshot-tool-time {
1619  font-size: 0.75rem;
1620  color: var(--text-tertiary);
1621  font-weight: normal;
1622}
1623
1624.screenshot-tool-image-container {
1625  border: 1px solid var(--border);
1626  border-radius: 0.25rem;
1627  overflow: hidden;
1628  background: var(--bg-base);
1629  width: fit-content;
1630  max-width: 100%;
1631}
1632
1633.screenshot-tool-image-container a {
1634  display: block;
1635}
1636
1637.screenshot-tool-image-container img {
1638  display: block;
1639  border-radius: 0.25rem;
1640}
1641
1642.screenshot-tool-error-message {
1643  font-family: var(--font-mono);
1644  font-size: 0.875rem;
1645  background: var(--error-bg);
1646  border: 1px solid var(--error-border);
1647  border-radius: 0.25rem;
1648  padding: 0.75rem;
1649  margin: 0;
1650  overflow-x: auto;
1651  white-space: pre-wrap;
1652  word-break: break-word;
1653  color: var(--error-text);
1654}
1655
1656/* Output Iframe Tool */
1657.output-iframe-tool {
1658  background: var(--gray-100);
1659  border-radius: 0.5rem;
1660  margin: 0.5rem 0;
1661  width: 100%;
1662}
1663
1664.dark .output-iframe-tool {
1665  background: var(--gray-800);
1666}
1667
1668.output-iframe-tool-header {
1669  display: flex;
1670  align-items: center;
1671  justify-content: space-between;
1672  padding: 0.75rem 1rem;
1673  cursor: pointer;
1674  user-select: none;
1675}
1676
1677.output-iframe-tool-header:hover {
1678  background: rgba(0, 0, 0, 0.02);
1679  border-radius: 0.5rem;
1680}
1681
1682.dark .output-iframe-tool-header:hover {
1683  background: rgba(255, 255, 255, 0.02);
1684}
1685
1686.output-iframe-tool-summary {
1687  display: flex;
1688  align-items: center;
1689  gap: 0.5rem;
1690  flex: 1;
1691  min-width: 0;
1692}
1693
1694.output-iframe-tool-emoji {
1695  font-size: 1rem;
1696  flex-shrink: 0;
1697}
1698
1699.output-iframe-tool-emoji.running {
1700}
1701
1702.output-iframe-tool-title {
1703  font-family: var(--font-mono);
1704  font-size: 0.875rem;
1705  color: var(--text-primary);
1706  overflow: hidden;
1707  text-overflow: ellipsis;
1708  white-space: nowrap;
1709  font-weight: 500;
1710}
1711
1712.output-iframe-tool-success {
1713  color: var(--success-text);
1714  font-weight: 600;
1715  margin-left: 0.5rem;
1716}
1717
1718.output-iframe-tool-error {
1719  color: var(--error-text);
1720  font-weight: 600;
1721  margin-left: 0.5rem;
1722}
1723
1724.output-iframe-tool-actions {
1725  display: flex;
1726  align-items: center;
1727  gap: 0.25rem;
1728  flex-shrink: 0;
1729}
1730
1731.output-iframe-tool-open-btn,
1732.output-iframe-tool-download-btn {
1733  background: none;
1734  border: none;
1735  padding: 0.25rem;
1736  cursor: pointer;
1737  color: var(--text-secondary);
1738  display: flex;
1739  align-items: center;
1740  justify-content: center;
1741  border-radius: 4px;
1742}
1743
1744.output-iframe-tool-open-btn:hover,
1745.output-iframe-tool-download-btn:hover {
1746  color: var(--text-primary);
1747  background: var(--gray-200);
1748}
1749
1750.dark .output-iframe-tool-open-btn:hover,
1751.dark .output-iframe-tool-download-btn:hover {
1752  background: var(--gray-700);
1753}
1754
1755.output-iframe-tool-toggle {
1756  background: none;
1757  border: none;
1758  padding: 0.25rem;
1759  cursor: pointer;
1760  color: var(--text-secondary);
1761  display: flex;
1762  align-items: center;
1763  justify-content: center;
1764  flex-shrink: 0;
1765}
1766
1767.output-iframe-tool-toggle:hover {
1768  color: var(--text-primary);
1769}
1770
1771.output-iframe-tool-details {
1772  padding: 0 1rem 1rem 1rem;
1773}
1774
1775.output-iframe-tool-section {
1776  margin-top: 0.5rem;
1777}
1778
1779.output-iframe-tool-label {
1780  font-size: 0.75rem;
1781  font-weight: 500;
1782  color: var(--text-secondary);
1783  margin-bottom: 0.5rem;
1784  display: flex;
1785  justify-content: space-between;
1786  align-items: center;
1787}
1788
1789.output-iframe-tool-time {
1790  font-family: var(--font-mono);
1791  font-size: 0.75rem;
1792  color: var(--text-tertiary);
1793}
1794
1795.output-iframe-container {
1796  width: 100%;
1797  overflow: hidden;
1798  border-radius: 0.25rem;
1799}
1800
1801.output-iframe-container iframe {
1802  display: block;
1803}
1804
1805.output-iframe-tool-error-message {
1806  font-family: var(--font-mono);
1807  font-size: 0.875rem;
1808  background: var(--error-bg);
1809  border: 1px solid var(--error-border);
1810  border-radius: 0.25rem;
1811  padding: 0.75rem;
1812  margin: 0;
1813  overflow-x: auto;
1814  white-space: pre-wrap;
1815  word-break: break-word;
1816  color: var(--error-text);
1817}
1818
1819/* Message Input */
1820.message-input-container {
1821  flex: 0 0 auto;
1822  background: var(--bg-base);
1823  border-top: 1px solid var(--border);
1824  padding: 1rem;
1825  padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
1826  padding-left: max(1rem, env(safe-area-inset-left));
1827  padding-right: max(1rem, env(safe-area-inset-right));
1828}
1829
1830.message-input-form {
1831  display: flex;
1832  align-items: flex-end;
1833  gap: 0.5rem;
1834  max-width: 800px;
1835  margin: 0 auto;
1836}
1837
1838.message-textarea {
1839  flex: 1;
1840  min-height: 46px;
1841  max-height: 200px;
1842  padding: 0.625rem 1rem;
1843  border: 1.5px solid var(--border);
1844  border-radius: 4px;
1845  resize: none;
1846  background: var(--bg-base);
1847  color: var(--text-primary);
1848  font-family: inherit;
1849  font-size: 16px; /* Must be 16px+ to prevent iOS zoom on focus */
1850  line-height: 1.5;
1851  transition:
1852    border-color 0.2s,
1853    box-shadow 0.2s;
1854}
1855
1856.message-textarea:focus {
1857  outline: none;
1858  border-color: var(--primary);
1859  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
1860}
1861
1862.message-textarea:disabled {
1863  opacity: 0.5;
1864  cursor: not-allowed;
1865}
1866
1867.message-send-btn svg {
1868  transform: rotate(-90deg);
1869}
1870
1871.message-textarea::placeholder {
1872  color: var(--text-tertiary);
1873}
1874
1875.message-send-btn {
1876  flex-shrink: 0;
1877  width: 36px;
1878  height: 36px;
1879  margin-bottom: 0.25rem;
1880  padding: 0;
1881  background: var(--primary);
1882  color: white;
1883  border: none;
1884  border-radius: 50%;
1885  display: flex;
1886  align-items: center;
1887  justify-content: center;
1888  transition:
1889    background-color 0.2s,
1890    transform 0.1s;
1891  cursor: pointer;
1892}
1893
1894.message-send-btn:hover:not(:disabled) {
1895  background: var(--primary-dark);
1896  transform: scale(1.05);
1897}
1898
1899.message-send-btn:active:not(:disabled) {
1900  transform: scale(0.95);
1901}
1902
1903.message-send-btn:disabled {
1904  background: var(--gray-300);
1905  cursor: not-allowed;
1906  opacity: 0.6;
1907}
1908
1909.dark .message-send-btn:disabled {
1910  background: var(--gray-600);
1911}
1912
1913/* Attach file button */
1914.message-attach-btn {
1915  flex-shrink: 0;
1916  width: 36px;
1917  height: 36px;
1918  margin-bottom: 0.25rem;
1919  padding: 0;
1920  background: transparent;
1921  color: var(--text-secondary);
1922  border: none;
1923  border-radius: 50%;
1924  display: flex;
1925  align-items: center;
1926  justify-content: center;
1927  transition:
1928    background-color 0.2s,
1929    color 0.2s,
1930    transform 0.1s;
1931  cursor: pointer;
1932}
1933
1934.message-attach-btn:hover:not(:disabled) {
1935  background: var(--gray-100);
1936  color: var(--text-primary);
1937}
1938
1939.dark .message-attach-btn:hover:not(:disabled) {
1940  background: var(--gray-700);
1941}
1942
1943.message-attach-btn:active:not(:disabled) {
1944  transform: scale(0.95);
1945}
1946
1947.message-attach-btn:disabled {
1948  cursor: not-allowed;
1949  opacity: 0.4;
1950}
1951
1952/* Voice input button */
1953.message-voice-btn {
1954  flex-shrink: 0;
1955  width: 36px;
1956  height: 36px;
1957  margin-bottom: 0.25rem;
1958  padding: 0;
1959  background: transparent;
1960  color: var(--text-secondary);
1961  border: none;
1962  border-radius: 50%;
1963  display: flex;
1964  align-items: center;
1965  justify-content: center;
1966  transition:
1967    background-color 0.2s,
1968    color 0.2s,
1969    transform 0.1s;
1970  cursor: pointer;
1971}
1972
1973.message-voice-btn:hover:not(:disabled):not(.listening) {
1974  background: var(--gray-100);
1975  color: var(--text-primary);
1976}
1977
1978.dark .message-voice-btn:hover:not(:disabled):not(.listening) {
1979  background: var(--gray-700);
1980}
1981
1982.message-voice-btn:active:not(:disabled):not(.listening) {
1983  transform: scale(0.95);
1984}
1985
1986.message-voice-btn:disabled {
1987  cursor: not-allowed;
1988  opacity: 0.4;
1989}
1990
1991.message-voice-btn.listening,
1992.message-voice-btn.listening:hover {
1993  background: #dc2626;
1994  color: white;
1995  animation: pulse-voice 1.5s ease-in-out infinite;
1996}
1997
1998.dark .message-voice-btn.listening,
1999.dark .message-voice-btn.listening:hover {
2000  background: #ef4444;
2001  color: white;
2002}
2003
2004@keyframes pulse-voice {
2005  0%,
2006  100% {
2007    transform: scale(1);
2008  }
2009  50% {
2010    transform: scale(1.1);
2011  }
2012}
2013
2014/* Drag and drop styles */
2015.message-input-container {
2016  position: relative;
2017}
2018
2019.message-input-container.drag-over {
2020  border-color: var(--primary);
2021}
2022
2023.message-input-container.shell-mode .message-input-form {
2024  border-color: var(--warning-border);
2025  background: var(--warning-bg);
2026}
2027
2028.message-input-container.shell-mode .message-textarea {
2029  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
2030  background: transparent;
2031  padding-left: 36px;
2032}
2033
2034.message-input-container.shell-mode .message-textarea::placeholder {
2035  font-family: inherit;
2036}
2037
2038.shell-mode-indicator {
2039  position: absolute;
2040  left: 12px;
2041  top: 50%;
2042  transform: translateY(-50%);
2043  display: flex;
2044  align-items: center;
2045  justify-content: center;
2046  color: var(--warning-text);
2047  pointer-events: none;
2048  z-index: 1;
2049}
2050
2051.drag-overlay {
2052  position: absolute;
2053  inset: 0;
2054  background: rgba(37, 99, 235, 0.1);
2055  border: 2px dashed var(--primary);
2056  border-radius: 4px;
2057  display: flex;
2058  align-items: center;
2059  justify-content: center;
2060  z-index: 10;
2061  pointer-events: none;
2062}
2063
2064.drag-overlay-content {
2065  background: var(--primary);
2066  color: white;
2067  padding: 0.5rem 1rem;
2068  border-radius: 4px;
2069  font-size: 0.875rem;
2070  font-weight: 500;
2071}
2072
2073/* Modal */
2074.modal-overlay {
2075  position: fixed;
2076  inset: 0;
2077  background: rgba(0, 0, 0, 0.5);
2078  z-index: 50;
2079  display: flex;
2080  align-items: center;
2081  justify-content: center;
2082  padding: 1rem;
2083}
2084
2085.modal {
2086  background: var(--bg-base);
2087  border-radius: 0.5rem;
2088  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
2089  max-width: 28rem;
2090  width: 100%;
2091  max-height: 80vh;
2092  overflow: hidden;
2093}
2094
2095.modal.modal-wide {
2096  max-width: 40rem;
2097}
2098
2099.modal-header {
2100  display: flex;
2101  align-items: center;
2102  justify-content: space-between;
2103  padding: 1rem;
2104  border-bottom: 1px solid var(--border);
2105}
2106
2107.modal-title {
2108  font-size: 1.125rem;
2109  font-weight: 600;
2110}
2111
2112.modal-title-right {
2113  margin-left: auto;
2114  margin-right: 1rem;
2115}
2116
2117.modal-body {
2118  padding: 1rem;
2119  overflow-y: auto;
2120  max-height: calc(80vh - 60px);
2121}
2122
2123/* Form Elements */
2124label {
2125  display: block;
2126  font-size: 0.875rem;
2127  font-weight: 500;
2128  margin-bottom: 0.5rem;
2129}
2130
2131select {
2132  width: 100%;
2133  background: var(--bg-tertiary);
2134  border: 1px solid var(--border);
2135  border-radius: 0.375rem;
2136  padding: 0.5rem 0.75rem;
2137  font-family: inherit;
2138  font-size: 1rem;
2139  color: var(--text-primary);
2140}
2141
2142select:focus {
2143  outline: none;
2144  border-color: var(--primary);
2145  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
2146}
2147
2148select:disabled {
2149  opacity: 0.5;
2150  cursor: not-allowed;
2151}
2152
2153/* Loading Spinner */
2154.spinner {
2155  width: 2rem;
2156  height: 2rem;
2157  border: 2px solid transparent;
2158  border-top-color: var(--primary);
2159  border-radius: 50%;
2160  animation: spin 0.8s linear infinite;
2161}
2162
2163.spinner-small {
2164  width: 1rem;
2165  height: 1rem;
2166  border-width: 2px;
2167  border-top-color: currentColor;
2168}
2169
2170@keyframes spin {
2171  to {
2172    transform: rotate(360deg);
2173  }
2174}
2175
2176/* Loading/Error States */
2177.loading-container,
2178.error-container {
2179  height: 100vh; /* Fallback for older browsers */
2180  height: 100dvh;
2181  display: flex;
2182  align-items: center;
2183  justify-content: center;
2184}
2185
2186.loading-content,
2187.error-content {
2188  text-align: center;
2189}
2190
2191/* Unified Status Bar */
2192.status-bar {
2193  flex: 0 0 auto;
2194  background: var(--bg-base);
2195  border-top: 1px solid var(--border);
2196  padding: 0.5rem 1rem;
2197  padding-left: max(1rem, env(safe-area-inset-left));
2198  padding-right: max(1rem, env(safe-area-inset-right));
2199  min-height: 2.5rem;
2200  display: flex;
2201  align-items: center;
2202}
2203
2204.status-bar-content {
2205  display: flex;
2206  align-items: center;
2207  justify-content: space-between;
2208  width: 100%;
2209  gap: 0.75rem;
2210}
2211
2212.status-message {
2213  color: var(--text-secondary);
2214  font-size: 0.875rem;
2215  flex: 1;
2216  min-width: 0;
2217}
2218
2219.status-message.status-ready {
2220  color: var(--text-tertiary);
2221}
2222
2223.status-message.status-warning {
2224  color: var(--blue-text);
2225  font-weight: 500;
2226}
2227
2228.status-message.status-error {
2229  color: var(--error-text);
2230  font-weight: 500;
2231}
2232
2233.animated-working {
2234  display: inline;
2235}
2236
2237.animated-working .bold-letter {
2238  font-weight: 700;
2239}
2240
2241.status-button {
2242  padding: 0.375rem 0.875rem;
2243  border-radius: 0.375rem;
2244  font-size: 0.875rem;
2245  font-weight: 500;
2246  transition: all 0.2s;
2247  display: flex;
2248  align-items: center;
2249  gap: 0.375rem;
2250  white-space: nowrap;
2251  border: none;
2252  cursor: pointer;
2253}
2254
2255.status-button svg {
2256  width: 0.875rem;
2257  height: 0.875rem;
2258}
2259
2260.status-button-primary {
2261  background: var(--primary);
2262  color: white;
2263}
2264
2265.status-button-primary:hover {
2266  background: var(--primary-dark);
2267}
2268
2269.status-button-cancel {
2270  background: var(--error-bg);
2271  color: var(--error-text);
2272  border: 1px solid var(--error-border);
2273}
2274
2275.status-button-cancel:hover:not(:disabled) {
2276  background: var(--error-text);
2277  color: white;
2278}
2279
2280.status-button-cancel:disabled {
2281  opacity: 0.6;
2282  cursor: not-allowed;
2283}
2284
2285.status-button-text {
2286  background: transparent;
2287  color: var(--text-secondary);
2288  padding: 0.25rem;
2289}
2290
2291.status-button-text:hover {
2292  background: var(--bg-tertiary);
2293  color: var(--text-primary);
2294}
2295
2296/* Legacy disconnect/error banner classes (kept for compatibility but unused) */
2297.disconnect-banner {
2298  background: var(--gray-100);
2299  border-top: 1px solid var(--border);
2300  padding: 0.5rem 1rem;
2301}
2302
2303.dark .disconnect-banner {
2304  background: var(--gray-800);
2305}
2306
2307.disconnect-banner-content {
2308  display: flex;
2309  align-items: center;
2310  justify-content: center;
2311  gap: 0.75rem;
2312}
2313
2314.disconnect-message {
2315  color: var(--text-secondary);
2316  font-size: 0.875rem;
2317  margin: 0;
2318}
2319
2320.btn-reconnect {
2321  padding: 0.25rem 0.75rem;
2322  background: var(--primary);
2323  color: white;
2324  border-radius: 0.375rem;
2325  font-size: 0.875rem;
2326  font-weight: 500;
2327  transition: background-color 0.2s;
2328}
2329
2330.btn-reconnect:hover {
2331  background: var(--primary-dark);
2332}
2333
2334.error-banner {
2335  background: var(--error-bg);
2336  border-top: 1px solid var(--error-border);
2337  padding: 0.75rem 1rem;
2338}
2339
2340.error-banner-content {
2341  display: flex;
2342  align-items: center;
2343  justify-content: space-between;
2344}
2345
2346.error-message {
2347  color: var(--error-text);
2348  font-size: 0.875rem;
2349}
2350
2351/* Empty State */
2352.empty-state {
2353  display: flex;
2354  align-items: center;
2355  justify-content: center;
2356  height: 100%;
2357  color: var(--text-secondary);
2358}
2359
2360.empty-state-content {
2361  text-align: center;
2362}
2363
2364/* Scrollbar */
2365.scrollable {
2366  scrollbar-width: thin;
2367  scrollbar-color: rgba(156, 163, 175, 0.5) transparent;
2368}
2369
2370.scrollable::-webkit-scrollbar {
2371  width: 6px;
2372}
2373
2374.scrollable::-webkit-scrollbar-track {
2375  background: transparent;
2376}
2377
2378.scrollable::-webkit-scrollbar-thumb {
2379  background-color: rgba(156, 163, 175, 0.5);
2380  border-radius: 3px;
2381}
2382
2383.scrollable::-webkit-scrollbar-thumb:hover {
2384  background-color: rgba(156, 163, 175, 0.8);
2385}
2386
2387/* SVG Icons */
2388svg {
2389  width: 1.25rem;
2390  height: 1.25rem;
2391  display: block;
2392}
2393
2394.icon-sm svg {
2395  width: 1rem;
2396  height: 1rem;
2397}
2398
2399/* Utility Classes */
2400.relative {
2401  position: relative;
2402}
2403
2404.overflow-auto {
2405  overflow: auto;
2406}
2407
2408.overflow-hidden {
2409  overflow: hidden;
2410}
2411
2412.rounded {
2413  border-radius: 0.25rem;
2414}
2415
2416.rounded-lg {
2417  border-radius: 0.5rem;
2418}
2419
2420.border {
2421  border: 1px solid var(--border);
2422}
2423
2424.min-h-0 {
2425  min-height: 0;
2426}
2427
2428/* Overflow Menu */
2429.overflow-menu {
2430  position: absolute;
2431  top: calc(100% + 0.5rem);
2432  right: 0;
2433  background: var(--bg-secondary);
2434  border: 1px solid var(--border);
2435  border-radius: 0.5rem;
2436  box-shadow:
2437    0 4px 6px -1px rgba(0, 0, 0, 0.1),
2438    0 2px 4px -1px rgba(0, 0, 0, 0.06);
2439  min-width: 10rem;
2440  z-index: 50;
2441}
2442
2443.overflow-menu-item {
2444  display: flex;
2445  align-items: center;
2446  width: 100%;
2447  padding: 0.75rem 1rem;
2448  text-align: left;
2449  background: transparent;
2450  border: none;
2451  color: var(--text-primary);
2452  font-size: 0.875rem;
2453  cursor: pointer;
2454  transition: background-color 0.2s;
2455}
2456
2457.overflow-menu-item:hover {
2458  background: var(--bg-hover);
2459}
2460
2461.overflow-menu-item:first-child {
2462  border-top-left-radius: 0.5rem;
2463  border-top-right-radius: 0.5rem;
2464}
2465
2466.overflow-menu-item:last-child {
2467  border-bottom-left-radius: 0.5rem;
2468  border-bottom-right-radius: 0.5rem;
2469}
2470
2471.overflow-menu-divider {
2472  height: 1px;
2473  background: var(--border);
2474  margin: 0.5rem 0;
2475}
2476
2477.theme-toggle-row {
2478  display: flex;
2479  gap: 0.25rem;
2480  padding: 0.5rem;
2481}
2482
2483.theme-toggle-btn {
2484  flex: 1;
2485  display: flex;
2486  align-items: center;
2487  justify-content: center;
2488  padding: 0.5rem;
2489  background: transparent;
2490  border: 1px solid var(--border);
2491  border-radius: 0.375rem;
2492  color: var(--text-secondary);
2493  cursor: pointer;
2494  transition: all 0.15s;
2495}
2496
2497.theme-toggle-btn svg {
2498  width: 1.125rem;
2499  height: 1.125rem;
2500}
2501
2502.theme-toggle-btn:hover {
2503  background: var(--bg-tertiary);
2504  color: var(--text-primary);
2505}
2506
2507.theme-toggle-btn-selected {
2508  background: var(--primary);
2509  border-color: var(--primary);
2510  color: white;
2511}
2512
2513.theme-toggle-btn-selected:hover {
2514  background: var(--primary-dark);
2515  border-color: var(--primary-dark);
2516  color: white;
2517}
2518
2519/* Diff display styling */
2520.diff-display {
2521  font-family: var(--font-mono);
2522  font-size: 0.875rem;
2523  line-height: 1.5;
2524  background: var(--bg-base);
2525  padding: 1rem;
2526  border-radius: 0.25rem;
2527  overflow-x: auto;
2528  white-space: pre;
2529  color: var(--text-primary);
2530}
2531
2532/* Responsive adjustments */
2533@media (min-width: 768px) {
2534  .drawer {
2535    position: static;
2536    transform: translateX(0) !important;
2537  }
2538
2539  .drawer.collapsed {
2540    display: none;
2541  }
2542
2543  .hide-on-desktop {
2544    display: none !important;
2545  }
2546
2547  .show-on-desktop-only {
2548    display: flex !important;
2549  }
2550
2551  .backdrop {
2552    display: none !important;
2553  }
2554}
2555
2556/* Hide desktop-only elements on mobile */
2557@media (max-width: 767px) {
2558  .show-on-desktop-only {
2559    display: none !important;
2560  }
2561}
2562
2563/* Scroll to bottom button */
2564.scroll-to-bottom-button {
2565  position: absolute;
2566  bottom: 1rem;
2567  left: 50%;
2568  transform: translateX(-50%);
2569  background: var(--bg-elevated);
2570  border: 1px solid var(--border);
2571  border-radius: 2rem;
2572  padding: 0.5rem 1rem;
2573  display: flex;
2574  align-items: center;
2575  gap: 0.5rem;
2576  cursor: pointer;
2577  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
2578  transition: all 0.2s ease;
2579  color: var(--text-primary);
2580  font-size: 0.875rem;
2581  z-index: 10;
2582}
2583
2584.scroll-to-bottom-button:hover {
2585  background: var(--bg-hover);
2586  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
2587}
2588
2589.scroll-to-bottom-button:active {
2590  transform: translateX(-50%) scale(0.95);
2591}
2592
2593/* Wrapper for messages area to position scroll-to-bottom button */
2594.messages-area-wrapper {
2595  position: relative;
2596  flex: 1 1 auto;
2597  min-height: 0; /* Important for flex children to shrink properly */
2598  overflow: hidden;
2599}
2600
2601.messages-container {
2602  height: 100%;
2603}
2604
2605/* Status bar configuration controls for empty conversations */
2606.status-bar-config {
2607  display: flex;
2608  align-items: center;
2609  gap: 0.75rem;
2610  width: 100%;
2611}
2612
2613.status-bar-new-conversation {
2614  display: flex;
2615  align-items: center;
2616  justify-content: space-between;
2617  width: 100%;
2618  flex-wrap: wrap;
2619  gap: 0.5rem;
2620}
2621
2622/* On smaller screens, allow the fields to stack vertically */
2623@media (max-width: 600px) {
2624  .status-bar-new-conversation {
2625    flex-direction: column;
2626    align-items: stretch;
2627  }
2628
2629  .status-field {
2630    width: 100%;
2631  }
2632}
2633
2634.status-bar-controls {
2635  display: flex;
2636  align-items: center;
2637  gap: 0.5rem;
2638}
2639
2640/* Flexible containers for status fields that adapt to content */
2641.status-field {
2642  display: flex;
2643  align-items: center;
2644  gap: 0.25rem;
2645  min-width: 0; /* Allow flex items to shrink below content size */
2646}
2647
2648.status-field-label {
2649  font-size: 0.7rem;
2650  color: var(--text-secondary);
2651  flex-shrink: 0;
2652}
2653
2654.status-field-model {
2655  flex: 1 1 auto;
2656  min-width: 150px;
2657  max-width: 300px;
2658}
2659
2660.status-field-cwd {
2661  flex: 1 1 auto;
2662  min-width: 180px;
2663  max-width: 400px;
2664}
2665
2666/* Compact clickable chips for model and cwd */
2667.status-chip {
2668  padding: 0.25rem 0.5rem;
2669  border: 1px solid var(--border);
2670  border-radius: 0.25rem;
2671  background: var(--bg-tertiary);
2672  color: var(--text-primary);
2673  font-size: 0.75rem;
2674  font-family: var(--font-mono);
2675  cursor: pointer;
2676  transition: all 0.2s;
2677  white-space: normal; /* Allow text to wrap */
2678  word-break: break-word; /* Break long words if needed */
2679  overflow-wrap: break-word;
2680  width: 100%;
2681  text-align: left;
2682  box-sizing: border-box;
2683  line-height: 1.3; /* Better line height for multi-line text */
2684  min-height: 1.75rem; /* Minimum height to accommodate wrapped text */
2685}
2686
2687.status-chip:hover:not(:disabled) {
2688  background: var(--bg-secondary);
2689  border-color: var(--blue-text);
2690}
2691
2692.status-chip:disabled {
2693  opacity: 0.5;
2694  cursor: not-allowed;
2695}
2696
2697.status-chip-error {
2698  border-color: var(--red-text, #dc2626);
2699  background: rgba(220, 38, 38, 0.1);
2700}
2701
2702.status-field-error {
2703  position: relative;
2704}
2705
2706.status-input-error {
2707  border-color: var(--red-text, #dc2626);
2708}
2709
2710.status-select {
2711  padding: 0.25rem 0.5rem;
2712  border: 1px solid var(--blue-text);
2713  border-radius: 0.25rem;
2714  background: var(--bg-base);
2715  color: var(--text-primary);
2716  font-size: 0.75rem;
2717  font-family: var(--font-mono);
2718  cursor: pointer;
2719  transition: border-color 0.2s;
2720  width: 100%;
2721  box-sizing: border-box;
2722}
2723
2724.status-select:hover:not(:disabled) {
2725  border-color: var(--blue-text);
2726}
2727
2728.status-select:focus {
2729  outline: none;
2730  border-color: var(--blue-text);
2731  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
2732}
2733
2734.status-select:disabled {
2735  opacity: 0.5;
2736  cursor: not-allowed;
2737}
2738
2739/* Model Picker Custom Dropdown */
2740.model-picker {
2741  position: relative;
2742  display: inline-block;
2743  width: 100%;
2744}
2745
2746.model-picker-trigger {
2747  display: flex;
2748  align-items: center;
2749  justify-content: space-between;
2750  gap: 0.5rem;
2751  padding: 0.25rem 0.5rem;
2752  border: 1px solid var(--border);
2753  border-radius: 0.25rem;
2754  background: var(--bg-tertiary);
2755  color: var(--text-primary);
2756  font-size: 0.75rem;
2757  font-family: var(--font-mono);
2758  cursor: pointer;
2759  transition: all 0.2s;
2760  width: 100%;
2761  text-align: left;
2762  box-sizing: border-box;
2763  min-height: 1.75rem;
2764}
2765
2766.model-picker-trigger:hover:not(:disabled) {
2767  background: var(--bg-secondary);
2768  border-color: var(--blue-text);
2769}
2770
2771.model-picker-trigger:disabled {
2772  opacity: 0.5;
2773  cursor: not-allowed;
2774}
2775
2776.model-picker-value {
2777  flex: 1;
2778  overflow: hidden;
2779  text-overflow: ellipsis;
2780  white-space: nowrap;
2781}
2782
2783.model-picker-chevron {
2784  flex-shrink: 0;
2785  transition: transform 0.2s;
2786  opacity: 0.6;
2787}
2788
2789.model-picker-chevron.open {
2790  transform: rotate(180deg);
2791}
2792
2793.model-picker-dropdown {
2794  position: absolute;
2795  top: 100%;
2796  left: 0;
2797  right: 0;
2798  margin-top: 2px;
2799  background: var(--bg-secondary);
2800  border: 1px solid var(--border);
2801  border-radius: 0.375rem;
2802  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
2803  z-index: 1000;
2804  max-height: 300px;
2805  overflow: hidden;
2806  display: flex;
2807  flex-direction: column;
2808}
2809
2810.model-picker-dropdown.open-upward {
2811  top: auto;
2812  bottom: 100%;
2813  margin-top: 0;
2814  margin-bottom: 2px;
2815}
2816
2817.model-picker-options {
2818  overflow-y: auto;
2819  max-height: 220px;
2820}
2821
2822.model-picker-option {
2823  display: flex;
2824  align-items: center;
2825  gap: 0.5rem;
2826  width: 100%;
2827  padding: 0.5rem 0.75rem;
2828  border: none;
2829  background: transparent;
2830  color: var(--text-primary);
2831  font-size: 0.8rem;
2832  font-family: var(--font-mono);
2833  cursor: pointer;
2834  text-align: left;
2835  transition: background 0.15s;
2836}
2837
2838.model-picker-option:hover:not(:disabled) {
2839  background: var(--bg-tertiary);
2840}
2841
2842.model-picker-option.selected {
2843  background: var(--bg-tertiary);
2844}
2845
2846.model-picker-option.disabled {
2847  opacity: 0.5;
2848  cursor: not-allowed;
2849}
2850
2851.model-picker-option-content {
2852  flex: 1;
2853  display: flex;
2854  flex-direction: column;
2855  gap: 0.125rem;
2856  min-width: 0;
2857}
2858
2859.model-picker-option-name {
2860  overflow: hidden;
2861  text-overflow: ellipsis;
2862  white-space: nowrap;
2863}
2864
2865.model-picker-option-source {
2866  font-size: 0.65rem;
2867  color: var(--text-secondary);
2868  overflow: hidden;
2869  text-overflow: ellipsis;
2870  white-space: nowrap;
2871}
2872
2873.model-picker-option-badge {
2874  font-size: 0.65rem;
2875  color: var(--text-secondary);
2876  background: var(--bg-base);
2877  padding: 0.125rem 0.375rem;
2878  border-radius: 0.25rem;
2879}
2880
2881.model-picker-option-check {
2882  flex-shrink: 0;
2883  color: var(--green-text);
2884}
2885
2886.model-picker-divider {
2887  height: 1px;
2888  background: var(--border);
2889  margin: 0.25rem 0;
2890}
2891
2892.model-picker-manage {
2893  color: var(--blue-text);
2894}
2895
2896.model-picker-manage:hover {
2897  background: var(--bg-tertiary);
2898}
2899
2900.model-picker-manage svg {
2901  flex-shrink: 0;
2902}
2903
2904.status-input {
2905  padding: 0.25rem 0.5rem;
2906  border: 1px solid var(--blue-text);
2907  border-radius: 0.25rem;
2908  background: var(--bg-base);
2909  color: var(--text-primary);
2910  font-size: 0.75rem;
2911  font-family: var(--font-mono);
2912  transition: border-color 0.2s;
2913  width: 100%;
2914  box-sizing: border-box;
2915}
2916
2917.status-input::placeholder {
2918  color: var(--text-secondary);
2919  opacity: 0.6;
2920}
2921
2922.status-input:hover:not(:disabled) {
2923  border-color: var(--blue-text);
2924}
2925
2926.status-input:focus {
2927  outline: none;
2928  border-color: var(--blue-text);
2929  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
2930}
2931
2932.status-input:disabled {
2933  opacity: 0.5;
2934  cursor: not-allowed;
2935}
2936
2937/* Responsive adjustments for status bar controls */
2938@media (max-width: 768px) {
2939  .status-bar-config {
2940    flex-wrap: wrap;
2941    gap: 0.5rem;
2942  }
2943
2944  .status-bar-controls {
2945    flex-wrap: wrap;
2946    gap: 0.5rem;
2947  }
2948
2949  .status-field-model {
2950    min-width: 120px;
2951    max-width: 200px;
2952  }
2953
2954  .status-field-cwd {
2955    min-width: 140px;
2956    max-width: 250px;
2957  }
2958}
2959
2960/* Directory Picker Modal */
2961.directory-picker-modal {
2962  max-width: 32rem;
2963  max-height: 70vh;
2964  display: flex;
2965  flex-direction: column;
2966}
2967
2968.directory-picker-body {
2969  flex: 1;
2970  display: flex;
2971  flex-direction: column;
2972  min-height: 0;
2973  overflow: hidden;
2974}
2975
2976.directory-picker-input-container {
2977  margin-bottom: 0.75rem;
2978}
2979
2980.directory-picker-input {
2981  width: 100%;
2982  padding: 0.5rem 0.75rem;
2983  border: 1px solid var(--border);
2984  border-radius: 0.25rem;
2985  background: var(--bg-base);
2986  color: var(--text-primary);
2987  font-family: var(--font-mono);
2988  font-size: 0.875rem;
2989}
2990
2991.directory-picker-input:focus {
2992  outline: none;
2993  border-color: var(--primary);
2994  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
2995}
2996
2997.directory-picker-current {
2998  display: flex;
2999  align-items: center;
3000  gap: 0.5rem;
3001  font-size: 0.75rem;
3002  color: var(--text-secondary);
3003  font-family: var(--font-mono);
3004  margin-bottom: 0.5rem;
3005  padding: 0.25rem 0;
3006}
3007
3008.directory-picker-current-path {
3009  flex-shrink: 0;
3010}
3011
3012.directory-picker-current-git .directory-picker-current-path {
3013  color: var(--accent-color, #f97316);
3014}
3015
3016.directory-picker-current-subject {
3017  flex: 1;
3018  min-width: 0;
3019  color: var(--text-tertiary);
3020  white-space: nowrap;
3021  overflow: hidden;
3022  text-overflow: ellipsis;
3023  text-align: right;
3024}
3025
3026.directory-picker-filter {
3027  color: var(--primary);
3028  font-weight: 500;
3029}
3030
3031.directory-picker-error {
3032  padding: 0.5rem 0.75rem;
3033  background: var(--error-bg);
3034  border: 1px solid var(--error-border);
3035  border-radius: 0.25rem;
3036  color: var(--error-text);
3037  font-size: 0.875rem;
3038  margin-bottom: 0.75rem;
3039}
3040
3041.directory-picker-loading {
3042  display: flex;
3043  align-items: center;
3044  gap: 0.5rem;
3045  padding: 1rem;
3046  color: var(--text-secondary);
3047  font-size: 0.875rem;
3048}
3049
3050.directory-picker-list {
3051  flex: 1;
3052  overflow-y: auto;
3053  border: 1px solid var(--border);
3054  border-radius: 0.25rem;
3055  min-height: 200px;
3056  max-height: 300px;
3057}
3058
3059.directory-picker-entry {
3060  display: flex;
3061  align-items: center;
3062  gap: 0.5rem;
3063  width: 100%;
3064  padding: 0.5rem 0.75rem;
3065  text-align: left;
3066  background: transparent;
3067  border: none;
3068  border-bottom: 1px solid var(--border);
3069  color: var(--text-primary);
3070  font-size: 0.875rem;
3071  font-family: var(--font-mono);
3072  cursor: pointer;
3073  transition: background-color 0.15s;
3074}
3075
3076.directory-picker-entry:last-child {
3077  border-bottom: none;
3078}
3079
3080.directory-picker-entry:hover {
3081  background: var(--bg-tertiary);
3082}
3083
3084.directory-picker-entry-parent {
3085  color: var(--text-secondary);
3086  font-weight: 500;
3087}
3088
3089.directory-picker-icon {
3090  width: 1rem;
3091  height: 1rem;
3092  flex-shrink: 0;
3093  color: var(--text-secondary);
3094}
3095
3096.directory-picker-entry-name {
3097  flex-shrink: 0;
3098}
3099
3100.directory-picker-entry-git .directory-picker-icon {
3101  color: var(--accent-color, #f97316);
3102}
3103
3104.directory-picker-git-subject {
3105  flex: 1;
3106  min-width: 0;
3107  color: var(--text-tertiary);
3108  font-size: 0.75rem;
3109  white-space: nowrap;
3110  overflow: hidden;
3111  text-overflow: ellipsis;
3112  text-align: right;
3113}
3114
3115.directory-picker-empty {
3116  padding: 2rem;
3117  text-align: center;
3118  color: var(--text-tertiary);
3119  font-size: 0.875rem;
3120}
3121
3122.directory-picker-footer {
3123  display: flex;
3124  align-items: center;
3125  gap: 0.5rem;
3126  padding: 1rem;
3127  border-top: 1px solid var(--border);
3128}
3129
3130.directory-picker-footer-spacer {
3131  flex: 1;
3132}
3133
3134.directory-picker-new-btn {
3135  display: flex;
3136  align-items: center;
3137  gap: 0.375rem;
3138}
3139
3140.directory-picker-new-icon {
3141  width: 1rem;
3142  height: 1rem;
3143}
3144
3145/* Create directory form inside the list */
3146.directory-picker-create-form {
3147  display: flex;
3148  align-items: center;
3149  gap: 0.5rem;
3150  padding: 0.5rem 0.75rem;
3151  background: var(--bg-tertiary);
3152  border-bottom: 1px solid var(--border);
3153}
3154
3155.directory-picker-create-input {
3156  flex: 1;
3157  padding: 0.375rem 0.5rem;
3158  border: 1px solid var(--border);
3159  border-radius: 0.25rem;
3160  background: var(--bg-base);
3161  color: var(--text-primary);
3162  font-family: var(--font-mono);
3163  font-size: 0.875rem;
3164}
3165
3166.directory-picker-create-input:focus {
3167  outline: none;
3168  border-color: var(--primary);
3169}
3170
3171.directory-picker-create-btn {
3172  display: flex;
3173  align-items: center;
3174  justify-content: center;
3175  width: 1.75rem;
3176  height: 1.75rem;
3177  padding: 0;
3178  border: none;
3179  border-radius: 0.25rem;
3180  background: var(--primary);
3181  color: white;
3182  cursor: pointer;
3183  transition: background-color 0.15s;
3184}
3185
3186.directory-picker-create-btn:hover:not(:disabled) {
3187  background: var(--primary-hover);
3188}
3189
3190.directory-picker-create-btn:disabled {
3191  opacity: 0.5;
3192  cursor: not-allowed;
3193}
3194
3195.directory-picker-create-btn svg {
3196  width: 1rem;
3197  height: 1rem;
3198}
3199
3200.directory-picker-cancel-btn {
3201  background: var(--bg-secondary);
3202  color: var(--text-secondary);
3203}
3204
3205.directory-picker-cancel-btn:hover:not(:disabled) {
3206  background: var(--bg-tertiary);
3207}
3208
3209.directory-picker-create-error {
3210  padding: 0.375rem 0.75rem;
3211  background: var(--error-bg);
3212  color: var(--error-text);
3213  font-size: 0.75rem;
3214  border-bottom: 1px solid var(--error-border);
3215}
3216
3217/* Screen reader only */
3218.sr-only {
3219  position: absolute;
3220  width: 1px;
3221  height: 1px;
3222  padding: 0;
3223  margin: -1px;
3224  overflow: hidden;
3225  clip: rect(0, 0, 0, 0);
3226  white-space: nowrap;
3227  border: 0;
3228}
3229
3230/* Context Usage Bar */
3231/* Status bar for active conversation */
3232.status-bar-active {
3233  display: flex;
3234  align-items: center;
3235  justify-content: space-between;
3236  width: 100%;
3237}
3238
3239.status-working-group {
3240  display: flex;
3241  align-items: center;
3242  gap: 0.5rem;
3243}
3244
3245.status-stop-button {
3246  display: flex;
3247  align-items: center;
3248  gap: 0.25rem;
3249  padding: 0.25rem 0.5rem;
3250  border: none;
3251  border-radius: 0.25rem;
3252  background: var(--error-bg);
3253  color: var(--error-text);
3254  cursor: pointer;
3255  transition: all 0.15s ease;
3256  font-size: 0.75rem;
3257  font-weight: 500;
3258}
3259
3260.status-stop-button:hover:not(:disabled) {
3261  background: var(--error-text);
3262  color: white;
3263}
3264
3265.status-stop-button:disabled {
3266  opacity: 0.5;
3267  cursor: not-allowed;
3268}
3269
3270.status-stop-button svg {
3271  width: 0.75rem;
3272  height: 0.75rem;
3273  flex-shrink: 0;
3274}
3275
3276.status-stop-label {
3277  white-space: nowrap;
3278}
3279
3280/* Hide stop label on small screens */
3281@media (max-width: 500px) {
3282  .status-stop-label {
3283    display: none;
3284  }
3285  .status-stop-button {
3286    padding: 0.25rem;
3287  }
3288}
3289
3290.context-usage-bar-container {
3291  display: flex;
3292  align-items: center;
3293  gap: 4px;
3294}
3295
3296.context-warning-icon {
3297  font-size: 14px;
3298  line-height: 1;
3299  cursor: help;
3300}
3301
3302.context-usage-bar {
3303  width: 60px;
3304  height: 6px;
3305  background: var(--bg-tertiary);
3306  border-radius: 3px;
3307  overflow: hidden;
3308  cursor: pointer;
3309}
3310
3311.context-usage-fill {
3312  height: 100%;
3313  border-radius: 3px;
3314  transition:
3315    width 0.3s ease,
3316    background-color 0.3s ease;
3317}
3318
3319/* Mobile optimizations for tighter spacing */
3320@media (max-width: 767px) {
3321  .header {
3322    padding: 0.375rem 0.75rem;
3323    padding-top: calc(0.375rem + env(safe-area-inset-top, 0px));
3324  }
3325
3326  .status-bar {
3327    padding: 0.375rem 0.75rem;
3328    min-height: 2rem;
3329  }
3330
3331  .message-input-container {
3332    padding: 0.5rem 0.75rem;
3333    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
3334  }
3335}
3336
3337/* Print styles - looks like the chat window, just without chrome */
3338@media print {
3339  /* Reset page layout */
3340  html,
3341  body {
3342    height: auto !important;
3343    overflow: visible !important;
3344    background: white !important;
3345  }
3346
3347  /* Hide interactive chrome but keep the header title */
3348  .status-bar,
3349  .message-input-container,
3350  .drawer,
3351  .backdrop,
3352  .scroll-to-bottom-button,
3353  .overflow-menu,
3354  .context-menu,
3355  .modal-overlay {
3356    display: none !important;
3357  }
3358
3359  /* Hide header buttons but keep the title */
3360  .header-actions,
3361  .header .btn-icon {
3362    display: none !important;
3363  }
3364
3365  /* Simplify header for print */
3366  .header {
3367    background: white !important;
3368    border-bottom: 1px solid #e5e7eb !important;
3369    padding: 0.75rem 1rem !important;
3370  }
3371
3372  .header-title {
3373    font-size: 1rem !important;
3374  }
3375
3376  /* Reset app container for print */
3377  .app-container {
3378    display: block !important;
3379    height: auto !important;
3380    background: white !important;
3381  }
3382
3383  .main-content {
3384    display: block !important;
3385    height: auto !important;
3386  }
3387
3388  /* Reset messages area to flow naturally */
3389  .messages-area-wrapper {
3390    height: auto !important;
3391    overflow: visible !important;
3392    position: static !important;
3393    background: white !important;
3394  }
3395
3396  .messages-container {
3397    height: auto !important;
3398    overflow: visible !important;
3399    position: static !important;
3400    background: white !important;
3401  }
3402
3403  .messages-list {
3404    background: white !important;
3405  }
3406
3407  /* Hide empty state in print */
3408  .empty-state {
3409    display: none !important;
3410  }
3411
3412  /* Keep message styling, just add page break hints */
3413  .message {
3414    page-break-inside: avoid;
3415  }
3416
3417  /* Tool results */
3418  .tool-result-details {
3419    page-break-inside: avoid;
3420  }
3421
3422  /* Code blocks */
3423  pre,
3424  code {
3425    page-break-inside: avoid;
3426  }
3427
3428  /* Screenshots and images - ensure they fit */
3429  .screenshot-preview,
3430  .screenshot-image,
3431  .read-image-preview {
3432    max-width: 100% !important;
3433    height: auto !important;
3434    page-break-inside: avoid;
3435  }
3436}
3437/* Diff Viewer Overlay */
3438.diff-viewer-overlay {
3439  position: fixed;
3440  top: 0;
3441  left: 0;
3442  right: 0;
3443  bottom: 0;
3444  background: rgba(0, 0, 0, 0.5);
3445  z-index: 1000;
3446  display: flex;
3447  align-items: center;
3448  justify-content: center;
3449  padding: 1rem;
3450  padding-top: max(1rem, env(safe-area-inset-top));
3451  padding-bottom: max(1rem, env(safe-area-inset-bottom));
3452}
3453
3454.diff-viewer-container {
3455  background: var(--bg-base);
3456  border-radius: 0.5rem;
3457  width: calc(100% - 2rem);
3458  max-width: none;
3459  height: calc(100% - 2rem);
3460  max-height: none;
3461  display: flex;
3462  flex-direction: column;
3463  overflow: hidden;
3464  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
3465}
3466
3467.diff-viewer-header {
3468  display: flex;
3469  flex-direction: column;
3470  gap: 0.5rem;
3471  padding: 0.5rem 0.75rem;
3472  background: var(--bg-secondary);
3473  border-bottom: 1px solid var(--border-color);
3474}
3475
3476.diff-viewer-header-row {
3477  display: flex;
3478  align-items: center;
3479  gap: 0.5rem;
3480  width: 100%;
3481}
3482
3483.diff-viewer-selectors-row {
3484  display: flex;
3485  flex: 1;
3486  gap: 0.5rem;
3487  min-width: 0;
3488}
3489
3490.diff-viewer-selectors-row .diff-viewer-select {
3491  flex: 1;
3492  min-width: 0;
3493  max-width: none;
3494}
3495
3496.diff-viewer-file-selector-wrapper {
3497  display: flex;
3498  align-items: center;
3499  gap: 0.5rem;
3500  flex: 1;
3501  min-width: 0;
3502}
3503
3504.diff-viewer-file-selector-wrapper .diff-viewer-select {
3505  flex: 1;
3506  min-width: 0;
3507}
3508
3509.diff-viewer-file-index {
3510  font-size: 0.75rem;
3511  color: var(--text-secondary);
3512  white-space: nowrap;
3513  flex-shrink: 0;
3514}
3515
3516.diff-viewer-controls-row {
3517  display: flex;
3518  align-items: center;
3519  gap: 0.5rem;
3520  flex-shrink: 0;
3521}
3522
3523.diff-viewer-header-mobile {
3524  flex-direction: row;
3525  align-items: center;
3526  gap: 0.5rem;
3527  padding: 0.375rem 0.5rem;
3528}
3529
3530.diff-viewer-mobile-selectors {
3531  display: flex;
3532  flex: 1;
3533  gap: 0.375rem;
3534  min-width: 0;
3535}
3536
3537.diff-viewer-mobile-selectors .diff-viewer-select {
3538  flex: 1;
3539  min-width: 0;
3540  font-size: 0.75rem;
3541  padding: 0.375rem;
3542}
3543
3544.diff-viewer-mode-toggle {
3545  display: flex;
3546  border: 1px solid var(--border-color);
3547  border-radius: 0.25rem;
3548  overflow: hidden;
3549}
3550
3551.diff-viewer-mode-btn {
3552  padding: 0.25rem 0.5rem;
3553  border: none;
3554  background: var(--bg-base);
3555  color: var(--text-secondary);
3556  cursor: pointer;
3557  font-size: 0.875rem;
3558}
3559
3560.diff-viewer-mode-btn:first-child {
3561  border-right: 1px solid var(--border-color);
3562}
3563
3564.diff-viewer-mode-btn.active {
3565  background: var(--blue-bg);
3566  color: var(--blue-text);
3567}
3568
3569.diff-viewer-mode-btn:hover:not(.active) {
3570  background: var(--bg-tertiary);
3571}
3572
3573.diff-viewer-nav-buttons {
3574  display: flex;
3575  gap: 0.125rem;
3576}
3577
3578.diff-viewer-nav-btn {
3579  padding: 0.25rem 0.5rem;
3580  border: 1px solid var(--border-color);
3581  background: var(--bg-base);
3582  color: var(--text-primary);
3583  cursor: pointer;
3584  border-radius: 0.25rem;
3585  font-size: 0.875rem;
3586}
3587
3588.diff-viewer-nav-btn:disabled {
3589  opacity: 0.4;
3590  cursor: not-allowed;
3591}
3592
3593.diff-viewer-nav-btn:hover:not(:disabled) {
3594  background: var(--bg-tertiary);
3595}
3596
3597.diff-viewer-select {
3598  flex: 1;
3599  min-width: 120px;
3600  max-width: 300px;
3601  padding: 0.5rem;
3602  border: 1px solid var(--border-color);
3603  border-radius: 0.25rem;
3604  background: var(--bg-base);
3605  color: var(--text-primary);
3606  font-size: 0.875rem;
3607}
3608
3609.diff-viewer-close {
3610  width: 2rem;
3611  height: 2rem;
3612  border: none;
3613  background: transparent;
3614  color: var(--text-secondary);
3615  font-size: 1.5rem;
3616  cursor: pointer;
3617  border-radius: 0.25rem;
3618  display: flex;
3619  align-items: center;
3620  justify-content: center;
3621  flex-shrink: 0;
3622}
3623
3624.diff-viewer-close:hover {
3625  background: var(--bg-tertiary);
3626  color: var(--text-primary);
3627}
3628
3629.diff-viewer-error {
3630  padding: 0.5rem 1rem;
3631  background: var(--error-bg);
3632  color: var(--error-text);
3633  font-size: 0.875rem;
3634}
3635
3636.diff-viewer-toast {
3637  position: fixed;
3638  bottom: 24px;
3639  right: 24px;
3640  padding: 12px 16px;
3641  border-radius: 8px;
3642  font-size: 14px;
3643  font-weight: 500;
3644  z-index: 9999;
3645  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
3646  animation: toast-fade-in 0.2s ease;
3647  color: #ffffff;
3648}
3649
3650.diff-viewer-toast-saving {
3651  background: #1976d2;
3652}
3653
3654.diff-viewer-toast-saved {
3655  background: #2e7d32;
3656}
3657
3658.diff-viewer-toast-error {
3659  background: #d32f2f;
3660}
3661
3662.diff-viewer-toast-hint {
3663  background: var(--bg-tertiary);
3664  color: var(--text-primary);
3665  border: 1px solid var(--border-color);
3666}
3667
3668@keyframes toast-fade-in {
3669  from {
3670    opacity: 0;
3671    transform: translateY(10px);
3672  }
3673  to {
3674    opacity: 1;
3675    transform: translateY(0);
3676  }
3677}
3678
3679.diff-viewer-content {
3680  flex: 1;
3681  overflow: hidden;
3682  position: relative;
3683}
3684
3685.diff-viewer-loading,
3686.diff-viewer-empty {
3687  display: flex;
3688  flex-direction: column;
3689  align-items: center;
3690  justify-content: center;
3691  height: 100%;
3692  color: var(--text-secondary);
3693  gap: 0.5rem;
3694}
3695
3696.diff-viewer-hint {
3697  font-size: 0.875rem;
3698  opacity: 0.7;
3699}
3700
3701.diff-viewer-editor {
3702  height: 100%;
3703  width: 100%;
3704}
3705
3706/* Diff viewer line hover highlighting (via decoration API) */
3707.diff-viewer-editor .monaco-editor .diff-viewer-line-hover {
3708  background-color: rgba(37, 99, 235, 0.08) !important;
3709}
3710
3711.dark .diff-viewer-editor .monaco-editor .diff-viewer-line-hover {
3712  background-color: rgba(96, 165, 250, 0.12) !important;
3713}
3714
3715/* Comment indicator glyph in margin for diff viewer */
3716.diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph {
3717  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");
3718  background-size: 14px 14px;
3719  background-repeat: no-repeat;
3720  background-position: center;
3721  opacity: 0.6;
3722  cursor: pointer;
3723}
3724
3725.diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph:hover {
3726  opacity: 1;
3727}
3728
3729.dark .diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph {
3730  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");
3731}
3732
3733/* Make diff viewer Monaco lines clickable with pointer cursor */
3734.diff-viewer-editor .monaco-editor .view-lines {
3735  cursor: pointer;
3736}
3737
3738.diff-viewer-comment-badge {
3739  position: absolute;
3740  bottom: 1rem;
3741  left: 1rem;
3742  padding: 0.5rem 1rem;
3743  background: var(--blue-bg);
3744  color: var(--blue-text);
3745  border-radius: 1rem;
3746  font-size: 0.875rem;
3747  font-weight: 500;
3748}
3749
3750/* Comment dialog */
3751.diff-viewer-comment-dialog {
3752  position: absolute;
3753  top: 50%;
3754  left: 50%;
3755  transform: translate(-50%, -50%);
3756  width: 90%;
3757  max-width: 500px;
3758  background: var(--bg-base);
3759  border: 1px solid var(--border-color);
3760  border-radius: 0.5rem;
3761  padding: 1rem;
3762  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
3763  z-index: 1001;
3764}
3765
3766.diff-viewer-comment-dialog h4 {
3767  margin: 0 0 0.75rem 0;
3768  color: var(--text-primary);
3769}
3770
3771.diff-viewer-selected-text {
3772  margin: 0 0 0.75rem 0;
3773  padding: 0.5rem;
3774  background: var(--bg-tertiary);
3775  border: 1px solid var(--border-color);
3776  border-radius: 0.25rem;
3777  font-size: 0.75rem;
3778  font-family: monospace;
3779  max-height: 150px;
3780  overflow: auto;
3781  white-space: pre;
3782}
3783
3784.diff-viewer-comment-input {
3785  width: 100%;
3786  min-height: 100px;
3787  padding: 0.5rem;
3788  border: 1px solid var(--border-color);
3789  border-radius: 0.25rem;
3790  background: var(--bg-base);
3791  color: var(--text-primary);
3792  font-size: 0.875rem;
3793  resize: vertical;
3794}
3795
3796.diff-viewer-comment-actions {
3797  display: flex;
3798  justify-content: flex-end;
3799  gap: 0.5rem;
3800  margin-top: 0.75rem;
3801}
3802
3803.diff-viewer-btn {
3804  padding: 0.5rem 1rem;
3805  border: none;
3806  border-radius: 0.25rem;
3807  font-size: 0.875rem;
3808  cursor: pointer;
3809}
3810
3811.diff-viewer-btn:disabled {
3812  opacity: 0.5;
3813  cursor: not-allowed;
3814}
3815
3816.diff-viewer-btn-primary {
3817  background: var(--blue-bg);
3818  color: var(--blue-text);
3819}
3820
3821.diff-viewer-btn-primary:hover:not(:disabled) {
3822  filter: brightness(0.95);
3823}
3824
3825.diff-viewer-btn-secondary {
3826  background: var(--bg-tertiary);
3827  color: var(--text-primary);
3828}
3829
3830.diff-viewer-btn-secondary:hover:not(:disabled) {
3831  background: var(--bg-secondary);
3832}
3833
3834/* Mobile floating nav buttons */
3835.diff-viewer-mobile-nav {
3836  position: absolute;
3837  bottom: 1.5rem;
3838  left: 50%;
3839  transform: translateX(-50%);
3840  display: flex;
3841  gap: 0.5rem;
3842  z-index: 100;
3843}
3844
3845.diff-viewer-mobile-nav-btn {
3846  width: 3rem;
3847  height: 3rem;
3848  border: none;
3849  border-radius: 50%;
3850  background: var(--bg-base);
3851  color: var(--text-primary);
3852  cursor: pointer;
3853  display: flex;
3854  align-items: center;
3855  justify-content: center;
3856  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
3857}
3858
3859.diff-viewer-mobile-nav-btn svg {
3860  width: 24px;
3861  height: 24px;
3862}
3863
3864.diff-viewer-mobile-nav-btn:disabled {
3865  opacity: 0.4;
3866  cursor: not-allowed;
3867}
3868
3869.diff-viewer-mobile-nav-btn:active:not(:disabled) {
3870  background: var(--bg-tertiary);
3871  transform: scale(0.95);
3872}
3873
3874.diff-viewer-mobile-mode-btn {
3875  font-size: 1.25rem;
3876}
3877
3878.diff-viewer-mobile-mode-btn.active {
3879  background: var(--blue-bg);
3880  color: var(--blue-text);
3881}
3882
3883/* Monaco comment glyph decoration */
3884/* Mobile optimizations for diff viewer */
3885@media (max-width: 767px) {
3886  .diff-viewer-overlay {
3887    padding: 0;
3888  }
3889
3890  .diff-viewer-container {
3891    border-radius: 0;
3892    width: 100%;
3893    max-width: 100%;
3894    height: 100%;
3895    max-height: 100%;
3896  }
3897
3898  .diff-viewer-close {
3899    width: 1.75rem;
3900    height: 1.75rem;
3901    font-size: 1.25rem;
3902    flex-shrink: 0;
3903  }
3904
3905  /* Monaco editor mobile styles - hide gutters completely */
3906  .diff-viewer-editor .monaco-editor .margin {
3907    display: none !important;
3908    width: 0 !important;
3909  }
3910
3911  .diff-viewer-editor .monaco-editor .margin-view-overlays {
3912    display: none !important;
3913    width: 0 !important;
3914  }
3915
3916  .diff-viewer-editor .monaco-editor .editor-scrollable {
3917    left: 0 !important;
3918  }
3919
3920  .diff-viewer-editor .monaco-editor .lines-content {
3921    margin-left: 0 !important;
3922  }
3923
3924  /* Ensure diff editor uses full width */
3925  .diff-viewer-editor .monaco-diff-editor {
3926    width: 100% !important;
3927  }
3928
3929  .diff-viewer-editor .monaco-diff-editor .editor.modified {
3930    width: 100% !important;
3931    left: 0 !important;
3932  }
3933
3934  /* Comment dialog on top half of screen for mobile (keyboard space) */
3935  .diff-viewer-comment-dialog {
3936    top: 10%;
3937    transform: translate(-50%, 0);
3938    max-height: 40vh;
3939    overflow-y: auto;
3940  }
3941
3942  .diff-viewer-comment-input {
3943    min-height: 60px;
3944  }
3945
3946  /* Patch Tool Monaco editor mobile styles - hide gutters completely */
3947  .patch-tool-monaco-editor .monaco-editor .margin {
3948    display: none !important;
3949    width: 0 !important;
3950  }
3951
3952  .patch-tool-monaco-editor .monaco-editor .margin-view-overlays {
3953    display: none !important;
3954    width: 0 !important;
3955  }
3956
3957  .patch-tool-monaco-editor .monaco-editor .editor-scrollable {
3958    left: 0 !important;
3959  }
3960
3961  .patch-tool-monaco-editor .monaco-editor .lines-content {
3962    margin-left: 0 !important;
3963  }
3964
3965  /* Ensure patch tool diff editor uses full width */
3966  .patch-tool-monaco-editor .monaco-diff-editor {
3967    width: 100% !important;
3968  }
3969
3970  .patch-tool-monaco-editor .monaco-diff-editor .editor.modified {
3971    width: 100% !important;
3972    left: 0 !important;
3973  }
3974}
3975
3976/* Injected text indicator (for diff comments) */
3977.injected-text-indicator {
3978  display: flex;
3979  align-items: center;
3980  justify-content: space-between;
3981  padding: 0.5rem 0.75rem;
3982  background: var(--blue-bg);
3983  border-bottom: 1px solid var(--border-color);
3984  gap: 0.5rem;
3985}
3986
3987.injected-text-label {
3988  font-size: 0.875rem;
3989  color: var(--blue-text);
3990  flex: 1;
3991  min-width: 0;
3992  overflow: hidden;
3993  text-overflow: ellipsis;
3994  white-space: nowrap;
3995}
3996
3997.injected-text-insert-btn {
3998  padding: 0.375rem 0.75rem;
3999  background: var(--blue-text);
4000  color: white;
4001  border: none;
4002  border-radius: 0.25rem;
4003  font-size: 0.75rem;
4004  font-weight: 500;
4005  cursor: pointer;
4006  white-space: nowrap;
4007  flex-shrink: 0;
4008}
4009
4010.injected-text-insert-btn:hover {
4011  filter: brightness(1.1);
4012}
4013
4014/* Links in message text */
4015.text-link {
4016  color: var(--blue-text);
4017  text-decoration: underline;
4018  text-underline-offset: 2px;
4019  text-decoration-color: var(--blue-border);
4020}
4021
4022.text-link:hover {
4023  text-decoration-color: var(--blue-text);
4024}
4025
4026/* Command Palette */
4027.command-palette-overlay {
4028  position: fixed;
4029  inset: 0;
4030  background: rgba(0, 0, 0, 0.5);
4031  z-index: 100;
4032  display: flex;
4033  align-items: flex-start;
4034  justify-content: center;
4035  padding-top: 15vh;
4036}
4037
4038.command-palette {
4039  background: var(--bg-base);
4040  border: 1px solid var(--border-color);
4041  border-radius: 0.75rem;
4042  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
4043  width: 100%;
4044  max-width: 32rem;
4045  max-height: 60vh;
4046  display: flex;
4047  flex-direction: column;
4048  overflow: hidden;
4049}
4050
4051.command-palette-input-wrapper {
4052  display: flex;
4053  align-items: center;
4054  padding: 0.75rem 1rem;
4055  border-bottom: 1px solid var(--border-color);
4056  gap: 0.75rem;
4057}
4058
4059.command-palette-search-icon {
4060  color: var(--text-secondary);
4061  flex-shrink: 0;
4062}
4063
4064.command-palette-input {
4065  flex: 1;
4066  border: none;
4067  background: transparent;
4068  font-size: 1rem;
4069  color: var(--text-primary);
4070  outline: none;
4071}
4072
4073.command-palette-input::placeholder {
4074  color: var(--text-secondary);
4075}
4076
4077.command-palette-shortcut {
4078  flex-shrink: 0;
4079}
4080
4081.command-palette-spinner {
4082  width: 16px;
4083  height: 16px;
4084  border: 2px solid var(--border-color);
4085  border-top-color: var(--primary);
4086  border-radius: 50%;
4087  animation: spin 0.6s linear infinite;
4088  flex-shrink: 0;
4089}
4090
4091.command-palette-list {
4092  flex: 1;
4093  overflow-y: auto;
4094  padding: 0.5rem;
4095}
4096
4097.command-palette-empty {
4098  padding: 2rem 1rem;
4099  text-align: center;
4100  color: var(--text-secondary);
4101}
4102
4103.command-palette-item {
4104  display: flex;
4105  align-items: center;
4106  padding: 0.625rem 0.75rem;
4107  border-radius: 0.5rem;
4108  cursor: pointer;
4109  gap: 0.75rem;
4110}
4111
4112.command-palette-item:hover,
4113.command-palette-item.selected {
4114  background: var(--bg-secondary);
4115}
4116
4117.command-palette-item-icon {
4118  flex-shrink: 0;
4119  color: var(--text-secondary);
4120  display: flex;
4121  align-items: center;
4122  justify-content: center;
4123}
4124
4125.command-palette-item.selected .command-palette-item-icon {
4126  color: var(--primary);
4127}
4128
4129.command-palette-item-content {
4130  flex: 1;
4131  min-width: 0;
4132}
4133
4134.command-palette-item-title {
4135  font-size: 0.875rem;
4136  color: var(--text-primary);
4137  white-space: nowrap;
4138  overflow: hidden;
4139  text-overflow: ellipsis;
4140}
4141
4142.command-palette-item-subtitle {
4143  font-size: 0.75rem;
4144  color: var(--text-secondary);
4145  white-space: nowrap;
4146  overflow: hidden;
4147  text-overflow: ellipsis;
4148  margin-top: 0.125rem;
4149}
4150
4151.command-palette-item-badge {
4152  flex-shrink: 0;
4153  font-size: 0.625rem;
4154  text-transform: uppercase;
4155  letter-spacing: 0.05em;
4156  padding: 0.125rem 0.375rem;
4157  background: var(--bg-tertiary);
4158  border-radius: 0.25rem;
4159  color: var(--text-secondary);
4160}
4161
4162.command-palette-footer {
4163  display: flex;
4164  gap: 1rem;
4165  padding: 0.5rem 1rem;
4166  border-top: 1px solid var(--border-color);
4167  font-size: 0.75rem;
4168  color: var(--text-secondary);
4169}
4170
4171.command-palette-footer span {
4172  display: flex;
4173  align-items: center;
4174  gap: 0.25rem;
4175}
4176
4177@media (max-width: 640px) {
4178  .command-palette-overlay {
4179    padding: 1rem;
4180    padding-top: 5vh;
4181  }
4182
4183  .command-palette {
4184    max-height: 80vh;
4185  }
4186
4187  .command-palette-footer {
4188    display: none;
4189  }
4190}
4191
4192/* Models Modal Styles */
4193.models-modal {
4194  padding: 0.5rem;
4195}
4196
4197.models-loading {
4198  display: flex;
4199  align-items: center;
4200  justify-content: center;
4201  gap: 0.5rem;
4202  padding: 2rem;
4203  color: var(--text-secondary);
4204}
4205
4206.models-error {
4207  display: flex;
4208  align-items: center;
4209  justify-content: space-between;
4210  padding: 0.75rem 1rem;
4211  background: var(--error-bg);
4212  border: 1px solid var(--error-border);
4213  border-radius: 0.375rem;
4214  color: var(--error-text);
4215  margin-bottom: 1rem;
4216}
4217
4218.models-error-dismiss {
4219  background: none;
4220  border: none;
4221  font-size: 1.25rem;
4222  cursor: pointer;
4223  color: inherit;
4224  padding: 0;
4225  line-height: 1;
4226}
4227
4228.models-info {
4229  padding: 0.75rem 1rem;
4230  background: var(--bg-tertiary);
4231  border-radius: 0.375rem;
4232  margin-bottom: 1rem;
4233}
4234
4235.models-info p {
4236  margin: 0 0 0.5rem 0;
4237  color: var(--text-secondary);
4238}
4239
4240.builtin-list {
4241  margin: 0;
4242  padding-left: 1.25rem;
4243  color: var(--text-primary);
4244}
4245
4246.builtin-list li {
4247  margin: 0.25rem 0;
4248}
4249
4250.models-list {
4251  display: flex;
4252  flex-direction: column;
4253  gap: 0.75rem;
4254  margin-bottom: 1rem;
4255}
4256
4257.model-card {
4258  padding: 0.75rem 1rem;
4259  background: var(--bg-base);
4260  border: 1px solid var(--border);
4261  border-radius: 0.375rem;
4262}
4263
4264.model-header {
4265  display: flex;
4266  justify-content: space-between;
4267  align-items: flex-start;
4268  gap: 0.5rem;
4269}
4270
4271.model-info {
4272  display: flex;
4273  flex-wrap: wrap;
4274  align-items: center;
4275  gap: 0.5rem;
4276}
4277
4278.model-name {
4279  font-weight: 500;
4280  color: var(--text-primary);
4281}
4282
4283.model-provider {
4284  font-size: 0.75rem;
4285  padding: 0.125rem 0.5rem;
4286  background: var(--bg-tertiary);
4287  border-radius: 0.25rem;
4288  color: var(--text-secondary);
4289}
4290
4291.model-source {
4292  font-size: 0.75rem;
4293  padding: 0.125rem 0.5rem;
4294  background: var(--bg-tertiary);
4295  border-radius: 0.25rem;
4296  color: var(--text-secondary);
4297}
4298
4299.model-card-builtin {
4300  opacity: 0.8;
4301  background: var(--bg-secondary);
4302}
4303
4304.models-empty {
4305  padding: 2rem;
4306  text-align: center;
4307  color: var(--text-secondary);
4308}
4309
4310.models-empty-hint {
4311  font-size: 0.875rem;
4312  margin-top: 0.5rem;
4313  color: var(--text-tertiary);
4314}
4315
4316.model-badge {
4317  font-size: 0.625rem;
4318  text-transform: uppercase;
4319  letter-spacing: 0.05em;
4320  padding: 0.125rem 0.375rem;
4321  background: var(--blue-bg);
4322  border: 1px solid var(--blue-border);
4323  border-radius: 0.25rem;
4324  color: var(--blue-text);
4325}
4326
4327.model-actions {
4328  display: flex;
4329  gap: 0.25rem;
4330  flex-shrink: 0;
4331}
4332
4333.model-details {
4334  margin-top: 0.5rem;
4335  display: flex;
4336  flex-direction: column;
4337  gap: 0.25rem;
4338}
4339
4340.model-api-name {
4341  font-size: 0.75rem;
4342  font-family: var(--font-mono);
4343  color: var(--text-secondary);
4344}
4345
4346.model-endpoint {
4347  font-size: 0.75rem;
4348  color: var(--text-tertiary);
4349  word-break: break-all;
4350}
4351
4352.btn-icon {
4353  padding: 0.25rem;
4354  border-radius: 0.25rem;
4355  color: var(--text-secondary);
4356  background: transparent;
4357  border: none;
4358  cursor: pointer;
4359  display: flex;
4360  align-items: center;
4361  justify-content: center;
4362}
4363
4364.btn-icon:hover {
4365  background: var(--bg-tertiary);
4366  color: var(--text-primary);
4367}
4368
4369/* Version Checker Styles */
4370.version-update-dot {
4371  position: absolute;
4372  top: 2px;
4373  right: 2px;
4374  width: 8px;
4375  height: 8px;
4376  background: #ef4444;
4377  border-radius: 50%;
4378  border: 2px solid var(--bg-base);
4379}
4380
4381.version-menu-dot {
4382  width: 8px;
4383  height: 8px;
4384  background: #ef4444;
4385  border-radius: 50%;
4386  margin-left: auto;
4387  flex-shrink: 0;
4388}
4389
4390.version-modal-overlay {
4391  position: fixed;
4392  inset: 0;
4393  background: rgba(0, 0, 0, 0.5);
4394  display: flex;
4395  align-items: center;
4396  justify-content: center;
4397  z-index: 1000;
4398  padding: 1rem;
4399}
4400
4401.version-modal {
4402  background: var(--bg-base);
4403  border-radius: 0.5rem;
4404  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
4405  max-width: 500px;
4406  width: 100%;
4407  max-height: 80vh;
4408  display: flex;
4409  flex-direction: column;
4410  overflow: hidden;
4411}
4412
4413.version-modal-header {
4414  display: flex;
4415  align-items: center;
4416  justify-content: space-between;
4417  padding: 1rem 1.25rem;
4418  border-bottom: 1px solid var(--border-color);
4419}
4420
4421.version-modal-header h2 {
4422  margin: 0;
4423  font-size: 1.125rem;
4424  font-weight: 600;
4425  color: var(--text-primary);
4426}
4427
4428.version-modal-close {
4429  background: none;
4430  border: none;
4431  padding: 0.25rem;
4432  cursor: pointer;
4433  color: var(--text-secondary);
4434  border-radius: 0.25rem;
4435}
4436
4437.version-modal-close:hover {
4438  background: var(--bg-tertiary);
4439  color: var(--text-primary);
4440}
4441
4442.version-modal-close svg {
4443  width: 1.25rem;
4444  height: 1.25rem;
4445}
4446
4447.version-modal-content {
4448  padding: 1.25rem;
4449  overflow-y: auto;
4450  display: flex;
4451  flex-direction: column;
4452  gap: 1rem;
4453}
4454
4455.version-info-row {
4456  display: flex;
4457  align-items: center;
4458  gap: 0.5rem;
4459  font-size: 0.875rem;
4460}
4461
4462.version-label {
4463  color: var(--text-secondary);
4464}
4465
4466.version-value {
4467  font-weight: 500;
4468  color: var(--text-primary);
4469  font-family: var(--font-mono);
4470}
4471
4472.version-date {
4473  color: var(--text-tertiary);
4474  font-size: 0.75rem;
4475}
4476
4477.version-error {
4478  padding: 0.75rem;
4479  background: var(--error-bg);
4480  border: 1px solid var(--error-border);
4481  border-radius: 0.375rem;
4482  font-size: 0.875rem;
4483  color: var(--error-text);
4484}
4485
4486.version-success {
4487  padding: 0.75rem;
4488  background: var(--success-bg);
4489  border: 1px solid var(--success-border);
4490  border-radius: 0.375rem;
4491  font-size: 0.875rem;
4492  color: var(--success-text);
4493}
4494
4495.version-changelog {
4496  border-top: 1px solid var(--border-color);
4497  padding-top: 1rem;
4498}
4499
4500.version-changelog h3 {
4501  margin: 0 0 0.75rem 0;
4502  font-size: 0.875rem;
4503  font-weight: 600;
4504}
4505
4506.changelog-link {
4507  color: var(--link-color);
4508  text-decoration: none;
4509}
4510
4511.changelog-link:hover {
4512  text-decoration: underline;
4513}
4514
4515.commit-list {
4516  margin: 0;
4517  padding: 0;
4518  list-style: none;
4519  max-height: 250px;
4520  overflow-y: auto;
4521  font-size: 0.8125rem;
4522}
4523
4524.commit-item {
4525  display: flex;
4526  gap: 0.5rem;
4527  padding: 0.5rem 0;
4528  border-bottom: 1px solid var(--border-color);
4529  align-items: flex-start;
4530}
4531
4532.commit-item:last-child {
4533  border-bottom: none;
4534}
4535
4536.commit-sha {
4537  font-family: var(--font-mono);
4538  color: var(--link-color);
4539  font-size: 0.75rem;
4540  flex-shrink: 0;
4541  text-decoration: none;
4542}
4543
4544.commit-sha:hover {
4545  text-decoration: underline;
4546}
4547
4548.commit-message {
4549  color: var(--text-primary);
4550  word-break: break-word;
4551  line-height: 1.4;
4552}
4553
4554.version-loading,
4555.version-no-commits {
4556  color: var(--text-secondary);
4557  font-size: 0.875rem;
4558  padding: 0.5rem 0;
4559}
4560
4561.version-actions {
4562  display: flex;
4563  flex-direction: column;
4564  gap: 0.75rem;
4565  border-top: 1px solid var(--border-color);
4566  padding-top: 1rem;
4567}
4568
4569.version-btn {
4570  padding: 0.5rem 1rem;
4571  border-radius: 0.375rem;
4572  font-size: 0.875rem;
4573  font-weight: 500;
4574  cursor: pointer;
4575  transition: background-color 0.15s;
4576}
4577
4578.version-btn:disabled {
4579  opacity: 0.6;
4580  cursor: not-allowed;
4581}
4582
4583.version-btn-primary {
4584  background: var(--primary);
4585  color: white;
4586  border: none;
4587}
4588
4589.version-btn-primary:hover:not(:disabled) {
4590  background: var(--primary-dark);
4591}
4592
4593.btn-icon.btn-danger:hover {
4594  background: var(--error-bg);
4595  color: var(--error-text);
4596}
4597
4598.add-model-btn {
4599  width: 100%;
4600}
4601
4602/* Model Form */
4603.model-form h3 {
4604  margin: 0 0 0.75rem 0;
4605  font-size: 1rem;
4606  font-weight: 600;
4607}
4608
4609.form-group {
4610  margin-bottom: 0.75rem;
4611}
4612
4613.form-group label {
4614  display: block;
4615  font-size: 0.875rem;
4616  font-weight: 500;
4617  margin-bottom: 0.25rem;
4618  color: var(--text-primary);
4619}
4620
4621.form-group label .optional {
4622  font-weight: 400;
4623  color: var(--text-secondary);
4624}
4625
4626.form-input {
4627  width: 100%;
4628  padding: 0.5rem 0.75rem;
4629  background: var(--bg-base);
4630  border: 1px solid var(--border);
4631  border-radius: 0.375rem;
4632  color: var(--text-primary);
4633  font-family: inherit;
4634  font-size: 0.875rem;
4635}
4636
4637.form-input:focus {
4638  outline: none;
4639  border-color: var(--primary);
4640  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
4641}
4642
4643.form-checkbox {
4644  display: flex;
4645  align-items: center;
4646}
4647
4648.form-checkbox label {
4649  display: flex;
4650  align-items: center;
4651  gap: 0.5rem;
4652  cursor: pointer;
4653  margin: 0;
4654}
4655
4656.form-checkbox input[type="checkbox"] {
4657  width: 1rem;
4658  height: 1rem;
4659  cursor: pointer;
4660}
4661
4662.info-icon-wrapper {
4663  position: relative;
4664  display: inline-flex;
4665  align-items: center;
4666  margin-left: 0.25rem;
4667}
4668
4669.info-icon {
4670  display: inline-flex;
4671  align-items: center;
4672  justify-content: center;
4673  color: var(--text-tertiary);
4674  cursor: pointer;
4675}
4676
4677.info-icon:hover {
4678  color: var(--text-secondary);
4679}
4680
4681.info-tooltip {
4682  position: absolute;
4683  top: 50%;
4684  left: 100%;
4685  transform: translateY(-50%);
4686  background: var(--bg-tertiary);
4687  border: 1px solid var(--border);
4688  border-radius: 0.375rem;
4689  padding: 0.5rem 0.75rem;
4690  font-size: 0.75rem;
4691  font-weight: 400;
4692  color: var(--text-primary);
4693  white-space: normal;
4694  width: 220px;
4695  margin-left: 0.375rem;
4696  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
4697  z-index: 100;
4698}
4699
4700.info-tooltip::after {
4701  content: "";
4702  position: absolute;
4703  top: 50%;
4704  right: 100%;
4705  transform: translateY(-50%);
4706  border: 6px solid transparent;
4707  border-right-color: var(--border);
4708}
4709
4710.provider-buttons {
4711  display: flex;
4712  gap: 0.5rem;
4713}
4714
4715.provider-btn {
4716  flex: 1;
4717  padding: 0.5rem;
4718  background: var(--bg-base);
4719  border: 1px solid var(--border);
4720  border-radius: 0.375rem;
4721  color: var(--text-primary);
4722  font-size: 0.875rem;
4723  cursor: pointer;
4724  transition: all 0.15s;
4725}
4726
4727.provider-btn:hover {
4728  background: var(--bg-tertiary);
4729}
4730
4731.provider-btn.selected {
4732  background: var(--primary);
4733  border-color: var(--primary);
4734  color: white;
4735}
4736
4737.endpoint-toggle {
4738  display: flex;
4739  gap: 0;
4740  margin-bottom: 0.5rem;
4741}
4742
4743.toggle-btn {
4744  flex: 1;
4745  padding: 0.375rem 0.75rem;
4746  background: var(--bg-base);
4747  border: 1px solid var(--border);
4748  color: var(--text-secondary);
4749  font-size: 0.75rem;
4750  cursor: pointer;
4751  transition: all 0.15s;
4752}
4753
4754.toggle-btn:first-child {
4755  border-radius: 0.375rem 0 0 0.375rem;
4756}
4757
4758.toggle-btn:last-child {
4759  border-radius: 0 0.375rem 0.375rem 0;
4760  border-left: none;
4761}
4762
4763.toggle-btn.selected {
4764  background: var(--bg-tertiary);
4765  color: var(--text-primary);
4766}
4767
4768.endpoint-display {
4769  padding: 0.5rem 0.75rem;
4770  background: var(--bg-tertiary);
4771  border-radius: 0.375rem;
4772  font-size: 0.75rem;
4773  color: var(--text-secondary);
4774  word-break: break-all;
4775}
4776
4777.model-presets {
4778  display: flex;
4779  flex-wrap: wrap;
4780  gap: 0.375rem;
4781  margin-bottom: 0.5rem;
4782}
4783
4784.preset-btn {
4785  padding: 0.25rem 0.625rem;
4786  background: var(--bg-base);
4787  border: 1px solid var(--border);
4788  border-radius: 0.25rem;
4789  color: var(--text-secondary);
4790  font-size: 0.75rem;
4791  cursor: pointer;
4792  transition: all 0.15s;
4793}
4794
4795.preset-btn:hover {
4796  background: var(--bg-tertiary);
4797  color: var(--text-primary);
4798}
4799
4800.preset-btn.selected {
4801  background: var(--blue-bg);
4802  border-color: var(--blue-border);
4803  color: var(--blue-text);
4804}
4805
4806.test-result {
4807  padding: 0.75rem 1rem;
4808  border-radius: 0.375rem;
4809  margin-bottom: 1rem;
4810  font-size: 0.875rem;
4811}
4812
4813.test-result.success {
4814  background: var(--success-bg);
4815  border: 1px solid var(--success-border);
4816  color: var(--success-text);
4817}
4818
4819.test-result.error {
4820  background: var(--error-bg);
4821  border: 1px solid var(--error-border);
4822  color: var(--error-text);
4823}
4824
4825.form-actions {
4826  display: flex;
4827  gap: 0.5rem;
4828  justify-content: flex-end;
4829  margin-top: 1rem;
4830  padding-bottom: 0.5rem;
4831}
4832
4833kbd {
4834  display: inline-block;
4835  padding: 0.125rem 0.375rem;
4836  font-size: 0.75rem;
4837  font-family: inherit;
4838  background: var(--bg-tertiary);
4839  border: 1px solid var(--border-color);
4840  border-radius: 0.25rem;
4841  color: var(--text-secondary);
4842}
4843
4844/* System Prompt View */
4845.system-prompt-view {
4846  background: var(--gray-100);
4847  border-radius: 0.5rem;
4848  margin: 0.5rem 0;
4849  width: 100%;
4850  border: 1px dashed var(--border);
4851}
4852
4853.dark .system-prompt-view {
4854  background: var(--gray-800);
4855}
4856
4857.system-prompt-header {
4858  display: flex;
4859  align-items: center;
4860  justify-content: space-between;
4861  padding: 0.75rem 1rem;
4862  cursor: pointer;
4863  user-select: none;
4864}
4865
4866.system-prompt-header:hover {
4867  background: rgba(0, 0, 0, 0.02);
4868  border-radius: 0.5rem;
4869}
4870
4871.dark .system-prompt-header:hover {
4872  background: rgba(255, 255, 255, 0.02);
4873}
4874
4875.system-prompt-summary {
4876  display: flex;
4877  align-items: center;
4878  gap: 0.5rem;
4879  flex: 1;
4880  min-width: 0;
4881}
4882
4883.system-prompt-icon {
4884  font-size: 1rem;
4885  flex-shrink: 0;
4886}
4887
4888.system-prompt-label {
4889  font-family: var(--font-mono);
4890  font-size: 0.875rem;
4891  color: var(--text-primary);
4892  font-weight: 500;
4893}
4894
4895.system-prompt-meta {
4896  font-size: 0.75rem;
4897  color: var(--text-secondary);
4898  flex-shrink: 0;
4899}
4900
4901.system-prompt-content {
4902  padding: 0 1rem 1rem 1rem;
4903}
4904
4905.system-prompt-text {
4906  font-family: var(--font-mono);
4907  font-size: 0.75rem;
4908  line-height: 1.5;
4909  color: var(--text-secondary);
4910  background: var(--bg-base);
4911  border: 1px solid var(--border);
4912  border-radius: 0.375rem;
4913  padding: 1rem;
4914  margin: 0;
4915  max-height: 400px;
4916  overflow: auto;
4917  white-space: pre-wrap;
4918  word-wrap: break-word;
4919}
4920
4921.dark .system-prompt-text {
4922  background: var(--gray-900);
4923}