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