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    max-width: none;
2502  }
2503
2504  .status-field-label {
2505    width: 2.5rem;
2506    text-align: right;
2507  }
2508}
2509
2510.status-bar-controls {
2511  display: flex;
2512  align-items: center;
2513  gap: 0.5rem;
2514}
2515
2516/* Flexible containers for status fields that adapt to content */
2517.status-field {
2518  display: flex;
2519  align-items: center;
2520  gap: 0.25rem;
2521  min-width: 0; /* Allow flex items to shrink below content size */
2522}
2523
2524.status-field-label {
2525  font-size: 0.7rem;
2526  color: var(--text-secondary);
2527  flex-shrink: 0;
2528}
2529
2530.status-field-model {
2531  flex: 1 1 auto;
2532  min-width: 150px;
2533  max-width: 300px;
2534}
2535
2536.status-field-cwd {
2537  flex: 1 1 auto;
2538  min-width: 180px;
2539  max-width: 400px;
2540}
2541
2542/* Compact clickable chips for model and cwd */
2543.status-chip {
2544  padding: 0.25rem 0.5rem;
2545  border: 1px solid var(--border);
2546  border-radius: 0.25rem;
2547  background: var(--bg-tertiary);
2548  color: var(--text-primary);
2549  font-size: 0.75rem;
2550  font-family: var(--font-mono);
2551  cursor: pointer;
2552  transition: all 0.2s;
2553  white-space: normal; /* Allow text to wrap */
2554  word-break: break-word; /* Break long words if needed */
2555  overflow-wrap: break-word;
2556  width: 100%;
2557  text-align: left;
2558  box-sizing: border-box;
2559  line-height: 1.3; /* Better line height for multi-line text */
2560  min-height: 1.75rem; /* Minimum height to accommodate wrapped text */
2561}
2562
2563.status-chip:hover:not(:disabled) {
2564  background: var(--bg-secondary);
2565  border-color: var(--blue-text);
2566}
2567
2568.status-chip:disabled {
2569  opacity: 0.5;
2570  cursor: not-allowed;
2571}
2572
2573.status-chip-error {
2574  border-color: var(--red-text, #dc2626);
2575  background: rgba(220, 38, 38, 0.1);
2576}
2577
2578.status-field-error {
2579  position: relative;
2580}
2581
2582.status-input-error {
2583  border-color: var(--red-text, #dc2626);
2584}
2585
2586.status-select {
2587  padding: 0.25rem 0.5rem;
2588  border: 1px solid var(--blue-text);
2589  border-radius: 0.25rem;
2590  background: var(--bg-base);
2591  color: var(--text-primary);
2592  font-size: 0.75rem;
2593  font-family: var(--font-mono);
2594  cursor: pointer;
2595  transition: border-color 0.2s;
2596  width: 100%;
2597  box-sizing: border-box;
2598}
2599
2600.status-select:hover:not(:disabled) {
2601  border-color: var(--blue-text);
2602}
2603
2604.status-select:focus {
2605  outline: none;
2606  border-color: var(--blue-text);
2607  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
2608}
2609
2610.status-select:disabled {
2611  opacity: 0.5;
2612  cursor: not-allowed;
2613}
2614
2615/* Model Picker Custom Dropdown */
2616.model-picker {
2617  position: relative;
2618  display: inline-block;
2619  width: 100%;
2620}
2621
2622.model-picker-trigger {
2623  display: flex;
2624  align-items: center;
2625  justify-content: space-between;
2626  gap: 0.5rem;
2627  padding: 0.25rem 0.5rem;
2628  border: 1px solid var(--border);
2629  border-radius: 0.25rem;
2630  background: var(--bg-tertiary);
2631  color: var(--text-primary);
2632  font-size: 0.75rem;
2633  font-family: var(--font-mono);
2634  cursor: pointer;
2635  transition: all 0.2s;
2636  width: 100%;
2637  text-align: left;
2638  box-sizing: border-box;
2639  min-height: 1.75rem;
2640}
2641
2642.model-picker-trigger:hover:not(:disabled) {
2643  background: var(--bg-secondary);
2644  border-color: var(--blue-text);
2645}
2646
2647.model-picker-trigger:disabled {
2648  opacity: 0.5;
2649  cursor: not-allowed;
2650}
2651
2652.model-picker-value {
2653  flex: 1;
2654  overflow: hidden;
2655  text-overflow: ellipsis;
2656  white-space: nowrap;
2657}
2658
2659.model-picker-chevron {
2660  flex-shrink: 0;
2661  transition: transform 0.2s;
2662  opacity: 0.6;
2663}
2664
2665.model-picker-chevron.open {
2666  transform: rotate(180deg);
2667}
2668
2669.model-picker-dropdown {
2670  position: absolute;
2671  top: 100%;
2672  left: 0;
2673  right: 0;
2674  margin-top: 2px;
2675  background: var(--bg-secondary);
2676  border: 1px solid var(--border);
2677  border-radius: 0.375rem;
2678  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
2679  z-index: 1000;
2680  max-height: 300px;
2681  overflow: hidden;
2682  display: flex;
2683  flex-direction: column;
2684}
2685
2686.model-picker-dropdown.open-upward {
2687  top: auto;
2688  bottom: 100%;
2689  margin-top: 0;
2690  margin-bottom: 2px;
2691}
2692
2693.model-picker-options {
2694  overflow-y: auto;
2695  max-height: 220px;
2696}
2697
2698.model-picker-option {
2699  display: flex;
2700  align-items: center;
2701  gap: 0.5rem;
2702  width: 100%;
2703  padding: 0.5rem 0.75rem;
2704  border: none;
2705  background: transparent;
2706  color: var(--text-primary);
2707  font-size: 0.8rem;
2708  font-family: var(--font-mono);
2709  cursor: pointer;
2710  text-align: left;
2711  transition: background 0.15s;
2712}
2713
2714.model-picker-option:hover:not(:disabled) {
2715  background: var(--bg-tertiary);
2716}
2717
2718.model-picker-option.selected {
2719  background: var(--bg-tertiary);
2720}
2721
2722.model-picker-option.disabled {
2723  opacity: 0.5;
2724  cursor: not-allowed;
2725}
2726
2727.model-picker-option-content {
2728  flex: 1;
2729  display: flex;
2730  flex-direction: column;
2731  gap: 0.125rem;
2732  min-width: 0;
2733}
2734
2735.model-picker-option-name {
2736  overflow: hidden;
2737  text-overflow: ellipsis;
2738  white-space: nowrap;
2739}
2740
2741.model-picker-option-source {
2742  font-size: 0.65rem;
2743  color: var(--text-secondary);
2744  overflow: hidden;
2745  text-overflow: ellipsis;
2746  white-space: nowrap;
2747}
2748
2749.model-picker-option-badge {
2750  font-size: 0.65rem;
2751  color: var(--text-secondary);
2752  background: var(--bg-base);
2753  padding: 0.125rem 0.375rem;
2754  border-radius: 0.25rem;
2755}
2756
2757.model-picker-option-check {
2758  flex-shrink: 0;
2759  color: var(--green-text);
2760}
2761
2762.model-picker-divider {
2763  height: 1px;
2764  background: var(--border);
2765  margin: 0.25rem 0;
2766}
2767
2768.model-picker-manage {
2769  color: var(--blue-text);
2770}
2771
2772.model-picker-manage:hover {
2773  background: var(--bg-tertiary);
2774}
2775
2776.model-picker-manage svg {
2777  flex-shrink: 0;
2778}
2779
2780.status-input {
2781  padding: 0.25rem 0.5rem;
2782  border: 1px solid var(--blue-text);
2783  border-radius: 0.25rem;
2784  background: var(--bg-base);
2785  color: var(--text-primary);
2786  font-size: 0.75rem;
2787  font-family: var(--font-mono);
2788  transition: border-color 0.2s;
2789  width: 100%;
2790  box-sizing: border-box;
2791}
2792
2793.status-input::placeholder {
2794  color: var(--text-secondary);
2795  opacity: 0.6;
2796}
2797
2798.status-input:hover:not(:disabled) {
2799  border-color: var(--blue-text);
2800}
2801
2802.status-input:focus {
2803  outline: none;
2804  border-color: var(--blue-text);
2805  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
2806}
2807
2808.status-input:disabled {
2809  opacity: 0.5;
2810  cursor: not-allowed;
2811}
2812
2813/* Responsive adjustments for status bar controls */
2814@media (max-width: 768px) {
2815  .status-bar-config {
2816    flex-wrap: wrap;
2817    gap: 0.5rem;
2818  }
2819
2820  .status-bar-controls {
2821    flex-wrap: wrap;
2822    gap: 0.5rem;
2823  }
2824
2825  .status-field-model {
2826    min-width: 120px;
2827    max-width: none;
2828  }
2829
2830  .status-field-cwd {
2831    min-width: 140px;
2832    max-width: none;
2833  }
2834}
2835
2836/* Directory Picker Modal */
2837.directory-picker-modal {
2838  max-width: 32rem;
2839  max-height: 70vh;
2840  display: flex;
2841  flex-direction: column;
2842}
2843
2844.directory-picker-body {
2845  flex: 1;
2846  display: flex;
2847  flex-direction: column;
2848  min-height: 0;
2849  overflow: hidden;
2850}
2851
2852.directory-picker-input-container {
2853  margin-bottom: 0.75rem;
2854}
2855
2856.directory-picker-input {
2857  width: 100%;
2858  padding: 0.5rem 0.75rem;
2859  border: 1px solid var(--border);
2860  border-radius: 0.25rem;
2861  background: var(--bg-base);
2862  color: var(--text-primary);
2863  font-family: var(--font-mono);
2864  font-size: 0.875rem;
2865}
2866
2867.directory-picker-input:focus {
2868  outline: none;
2869  border-color: var(--primary);
2870  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
2871}
2872
2873.directory-picker-current {
2874  display: flex;
2875  align-items: center;
2876  gap: 0.5rem;
2877  font-size: 0.75rem;
2878  color: var(--text-secondary);
2879  font-family: var(--font-mono);
2880  margin-bottom: 0.5rem;
2881  padding: 0.25rem 0;
2882}
2883
2884.directory-picker-current-path {
2885  flex-shrink: 0;
2886}
2887
2888.directory-picker-current-git .directory-picker-current-path {
2889  color: var(--accent-color, #f97316);
2890}
2891
2892.directory-picker-current-subject {
2893  flex: 1;
2894  min-width: 0;
2895  color: var(--text-tertiary);
2896  white-space: nowrap;
2897  overflow: hidden;
2898  text-overflow: ellipsis;
2899  text-align: right;
2900}
2901
2902.directory-picker-filter {
2903  color: var(--primary);
2904  font-weight: 500;
2905}
2906
2907.directory-picker-git-root-btn {
2908  display: flex;
2909  align-items: center;
2910  gap: 0.5rem;
2911  width: 100%;
2912  padding: 0.375rem 0.75rem;
2913  margin-bottom: 0.5rem;
2914  background: var(--bg-secondary);
2915  border: 1px solid var(--border-color);
2916  border-radius: 0.375rem;
2917  color: var(--accent-color, #f97316);
2918  font-size: 0.8125rem;
2919  cursor: pointer;
2920  text-align: left;
2921}
2922
2923.directory-picker-git-root-btn:hover {
2924  background: var(--bg-tertiary);
2925  border-color: var(--accent-color, #f97316);
2926}
2927
2928.directory-picker-git-root-btn .directory-picker-icon {
2929  flex-shrink: 0;
2930}
2931
2932.directory-picker-git-root-path {
2933  color: var(--text-tertiary);
2934  overflow: hidden;
2935  text-overflow: ellipsis;
2936  white-space: nowrap;
2937  margin-left: auto;
2938}
2939
2940.directory-picker-error {
2941  padding: 0.5rem 0.75rem;
2942  background: var(--error-bg);
2943  border: 1px solid var(--error-border);
2944  border-radius: 0.25rem;
2945  color: var(--error-text);
2946  font-size: 0.875rem;
2947  margin-bottom: 0.75rem;
2948}
2949
2950.directory-picker-loading {
2951  display: flex;
2952  align-items: center;
2953  gap: 0.5rem;
2954  padding: 1rem;
2955  color: var(--text-secondary);
2956  font-size: 0.875rem;
2957}
2958
2959.directory-picker-list {
2960  flex: 1;
2961  overflow-y: auto;
2962  border: 1px solid var(--border);
2963  border-radius: 0.25rem;
2964  min-height: 200px;
2965  max-height: 300px;
2966}
2967
2968.directory-picker-entry {
2969  display: flex;
2970  align-items: center;
2971  gap: 0.5rem;
2972  width: 100%;
2973  padding: 0.5rem 0.75rem;
2974  text-align: left;
2975  background: transparent;
2976  border: none;
2977  border-bottom: 1px solid var(--border);
2978  color: var(--text-primary);
2979  font-size: 0.875rem;
2980  font-family: var(--font-mono);
2981  cursor: pointer;
2982  transition: background-color 0.15s;
2983}
2984
2985.directory-picker-entry:last-child {
2986  border-bottom: none;
2987}
2988
2989.directory-picker-entry:hover {
2990  background: var(--bg-tertiary);
2991}
2992
2993.directory-picker-entry-parent {
2994  color: var(--text-secondary);
2995  font-weight: 500;
2996}
2997
2998.directory-picker-icon {
2999  width: 1rem;
3000  height: 1rem;
3001  flex-shrink: 0;
3002  color: var(--text-secondary);
3003}
3004
3005.directory-picker-entry-name {
3006  flex-shrink: 0;
3007}
3008
3009.directory-picker-entry-git .directory-picker-icon {
3010  color: var(--accent-color, #f97316);
3011}
3012
3013.directory-picker-git-subject {
3014  flex: 1;
3015  min-width: 0;
3016  color: var(--text-tertiary);
3017  font-size: 0.75rem;
3018  white-space: nowrap;
3019  overflow: hidden;
3020  text-overflow: ellipsis;
3021  text-align: right;
3022}
3023
3024.directory-picker-empty {
3025  padding: 2rem;
3026  text-align: center;
3027  color: var(--text-tertiary);
3028  font-size: 0.875rem;
3029}
3030
3031.directory-picker-footer {
3032  display: flex;
3033  align-items: center;
3034  gap: 0.5rem;
3035  padding: 1rem;
3036  border-top: 1px solid var(--border);
3037}
3038
3039.directory-picker-footer-spacer {
3040  flex: 1;
3041}
3042
3043.directory-picker-new-btn {
3044  display: flex;
3045  align-items: center;
3046  gap: 0.375rem;
3047}
3048
3049.directory-picker-new-icon {
3050  width: 1rem;
3051  height: 1rem;
3052}
3053
3054/* Create directory form inside the list */
3055.directory-picker-create-form {
3056  display: flex;
3057  align-items: center;
3058  gap: 0.5rem;
3059  padding: 0.5rem 0.75rem;
3060  background: var(--bg-tertiary);
3061  border-bottom: 1px solid var(--border);
3062}
3063
3064.directory-picker-create-input {
3065  flex: 1;
3066  padding: 0.375rem 0.5rem;
3067  border: 1px solid var(--border);
3068  border-radius: 0.25rem;
3069  background: var(--bg-base);
3070  color: var(--text-primary);
3071  font-family: var(--font-mono);
3072  font-size: 0.875rem;
3073}
3074
3075.directory-picker-create-input:focus {
3076  outline: none;
3077  border-color: var(--primary);
3078}
3079
3080.directory-picker-create-btn {
3081  display: flex;
3082  align-items: center;
3083  justify-content: center;
3084  width: 1.75rem;
3085  height: 1.75rem;
3086  padding: 0;
3087  border: none;
3088  border-radius: 0.25rem;
3089  background: var(--primary);
3090  color: white;
3091  cursor: pointer;
3092  transition: background-color 0.15s;
3093}
3094
3095.directory-picker-create-btn:hover:not(:disabled) {
3096  background: var(--primary-hover);
3097}
3098
3099.directory-picker-create-btn:disabled {
3100  opacity: 0.5;
3101  cursor: not-allowed;
3102}
3103
3104.directory-picker-create-btn svg {
3105  width: 1rem;
3106  height: 1rem;
3107}
3108
3109.directory-picker-cancel-btn {
3110  background: var(--bg-secondary);
3111  color: var(--text-secondary);
3112}
3113
3114.directory-picker-cancel-btn:hover:not(:disabled) {
3115  background: var(--bg-tertiary);
3116}
3117
3118.directory-picker-create-error {
3119  padding: 0.375rem 0.75rem;
3120  background: var(--error-bg);
3121  color: var(--error-text);
3122  font-size: 0.75rem;
3123  border-bottom: 1px solid var(--error-border);
3124}
3125
3126/* Screen reader only */
3127.sr-only {
3128  position: absolute;
3129  width: 1px;
3130  height: 1px;
3131  padding: 0;
3132  margin: -1px;
3133  overflow: hidden;
3134  clip: rect(0, 0, 0, 0);
3135  white-space: nowrap;
3136  border: 0;
3137}
3138
3139/* Context Usage Bar */
3140/* Status bar for active conversation */
3141.status-bar-active {
3142  display: flex;
3143  align-items: center;
3144  justify-content: space-between;
3145  width: 100%;
3146}
3147
3148.status-working-group {
3149  display: flex;
3150  align-items: center;
3151  gap: 0.5rem;
3152}
3153
3154.status-stop-button {
3155  display: flex;
3156  align-items: center;
3157  gap: 0.25rem;
3158  padding: 0.25rem 0.5rem;
3159  border: none;
3160  border-radius: 0.25rem;
3161  background: var(--error-bg);
3162  color: var(--error-text);
3163  cursor: pointer;
3164  transition: all 0.15s ease;
3165  font-size: 0.75rem;
3166  font-weight: 500;
3167}
3168
3169.status-stop-button:hover:not(:disabled) {
3170  background: var(--error-text);
3171  color: white;
3172}
3173
3174.status-stop-button:disabled {
3175  opacity: 0.5;
3176  cursor: not-allowed;
3177}
3178
3179.status-stop-button svg {
3180  width: 0.75rem;
3181  height: 0.75rem;
3182  flex-shrink: 0;
3183}
3184
3185.status-stop-label {
3186  white-space: nowrap;
3187}
3188
3189/* Hide stop label on small screens */
3190@media (max-width: 500px) {
3191  .status-stop-label {
3192    display: none;
3193  }
3194  .status-stop-button {
3195    padding: 0.25rem;
3196  }
3197}
3198
3199.context-usage-bar-container {
3200  display: flex;
3201  align-items: center;
3202  gap: 4px;
3203}
3204
3205.context-warning-icon {
3206  font-size: 14px;
3207  line-height: 1;
3208  cursor: help;
3209}
3210
3211.context-usage-bar {
3212  width: 60px;
3213  height: 6px;
3214  background: var(--bg-tertiary);
3215  border-radius: 3px;
3216  overflow: hidden;
3217  cursor: pointer;
3218}
3219
3220.context-usage-fill {
3221  height: 100%;
3222  border-radius: 3px;
3223  transition:
3224    width 0.3s ease,
3225    background-color 0.3s ease;
3226}
3227
3228/* Mobile optimizations for tighter spacing */
3229@media (max-width: 767px) {
3230  .header {
3231    padding: 0.375rem 0.75rem;
3232    padding-top: calc(0.375rem + env(safe-area-inset-top, 0px));
3233  }
3234
3235  .status-bar {
3236    padding: 0.375rem 0.75rem;
3237    min-height: 2rem;
3238  }
3239
3240  .message-input-container {
3241    padding: 0.5rem 0.75rem;
3242    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
3243  }
3244}
3245
3246/* Print styles - looks like the chat window, just without chrome */
3247@media print {
3248  /* Reset page layout */
3249  html,
3250  body {
3251    height: auto !important;
3252    overflow: visible !important;
3253    background: white !important;
3254  }
3255
3256  /* Hide interactive chrome but keep the header title */
3257  .status-bar,
3258  .message-input-container,
3259  .drawer,
3260  .backdrop,
3261  .scroll-to-bottom-button,
3262  .overflow-menu,
3263  .context-menu,
3264  .modal-overlay {
3265    display: none !important;
3266  }
3267
3268  /* Hide header buttons but keep the title */
3269  .header-actions,
3270  .header .btn-icon {
3271    display: none !important;
3272  }
3273
3274  /* Simplify header for print */
3275  .header {
3276    background: white !important;
3277    border-bottom: 1px solid #e5e7eb !important;
3278    padding: 0.75rem 1rem !important;
3279  }
3280
3281  .header-title {
3282    font-size: 1rem !important;
3283  }
3284
3285  /* Reset app container for print */
3286  .app-container {
3287    display: block !important;
3288    height: auto !important;
3289    background: white !important;
3290  }
3291
3292  .main-content {
3293    display: block !important;
3294    height: auto !important;
3295  }
3296
3297  /* Reset messages area to flow naturally */
3298  .messages-area-wrapper {
3299    height: auto !important;
3300    overflow: visible !important;
3301    position: static !important;
3302    background: white !important;
3303  }
3304
3305  .messages-container {
3306    height: auto !important;
3307    overflow: visible !important;
3308    position: static !important;
3309    background: white !important;
3310  }
3311
3312  .messages-list {
3313    background: white !important;
3314  }
3315
3316  /* Hide empty state in print */
3317  .empty-state {
3318    display: none !important;
3319  }
3320
3321  /* Keep message styling, just add page break hints */
3322  .message {
3323    page-break-inside: avoid;
3324  }
3325
3326  /* Tool results */
3327  .tool-result-details {
3328    page-break-inside: avoid;
3329  }
3330
3331  /* Code blocks */
3332  pre,
3333  code {
3334    page-break-inside: avoid;
3335  }
3336
3337  /* Screenshots and images - ensure they fit */
3338  .screenshot-preview,
3339  .screenshot-image,
3340  .read-image-preview {
3341    max-width: 100% !important;
3342    height: auto !important;
3343    page-break-inside: avoid;
3344  }
3345}
3346/* Diff Viewer Overlay */
3347.diff-viewer-overlay {
3348  position: fixed;
3349  top: 0;
3350  left: 0;
3351  right: 0;
3352  bottom: 0;
3353  background: rgba(0, 0, 0, 0.5);
3354  z-index: 1000;
3355  display: flex;
3356  align-items: center;
3357  justify-content: center;
3358  padding: 1rem;
3359  padding-top: max(1rem, env(safe-area-inset-top));
3360  padding-bottom: max(1rem, env(safe-area-inset-bottom));
3361}
3362
3363.diff-viewer-container {
3364  background: var(--bg-base);
3365  border-radius: 0.5rem;
3366  width: calc(100% - 2rem);
3367  max-width: none;
3368  height: calc(100% - 2rem);
3369  max-height: none;
3370  display: flex;
3371  flex-direction: column;
3372  overflow: hidden;
3373  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
3374}
3375
3376.diff-viewer-header {
3377  display: flex;
3378  flex-direction: column;
3379  gap: 0.5rem;
3380  padding: 0.5rem 0.75rem;
3381  background: var(--bg-secondary);
3382  border-bottom: 1px solid var(--border-color);
3383}
3384
3385.diff-viewer-header-row {
3386  display: flex;
3387  align-items: center;
3388  gap: 0.5rem;
3389  width: 100%;
3390}
3391
3392.diff-viewer-selectors-row {
3393  display: flex;
3394  flex: 1;
3395  gap: 0.5rem;
3396  min-width: 0;
3397}
3398
3399.diff-viewer-selectors-row .diff-viewer-select {
3400  flex: 1;
3401  min-width: 0;
3402  max-width: none;
3403}
3404
3405.diff-viewer-file-selector-wrapper {
3406  display: flex;
3407  align-items: center;
3408  gap: 0.5rem;
3409  flex: 1;
3410  min-width: 0;
3411}
3412
3413.diff-viewer-file-selector-wrapper .diff-viewer-select {
3414  flex: 1;
3415  min-width: 0;
3416}
3417
3418.diff-viewer-file-index {
3419  font-size: 0.75rem;
3420  color: var(--text-secondary);
3421  white-space: nowrap;
3422  flex-shrink: 0;
3423}
3424
3425.diff-viewer-controls-row {
3426  display: flex;
3427  align-items: center;
3428  gap: 0.5rem;
3429  flex-shrink: 0;
3430}
3431
3432.diff-viewer-header-mobile {
3433  flex-direction: row;
3434  align-items: center;
3435  gap: 0.5rem;
3436  padding: 0.375rem 0.5rem;
3437}
3438
3439.diff-viewer-mobile-selectors {
3440  display: flex;
3441  flex: 1;
3442  gap: 0.375rem;
3443  min-width: 0;
3444}
3445
3446.diff-viewer-mobile-selectors .diff-viewer-select {
3447  flex: 1;
3448  min-width: 0;
3449  font-size: 0.75rem;
3450  padding: 0.375rem;
3451}
3452
3453.diff-viewer-mode-toggle {
3454  display: flex;
3455  border: 1px solid var(--border-color);
3456  border-radius: 0.25rem;
3457  overflow: hidden;
3458}
3459
3460.diff-viewer-mode-btn {
3461  padding: 0.25rem 0.5rem;
3462  border: none;
3463  background: var(--bg-base);
3464  color: var(--text-secondary);
3465  cursor: pointer;
3466  font-size: 0.875rem;
3467}
3468
3469.diff-viewer-mode-btn:first-child {
3470  border-right: 1px solid var(--border-color);
3471}
3472
3473.diff-viewer-mode-btn.active {
3474  background: var(--blue-bg);
3475  color: var(--blue-text);
3476}
3477
3478.diff-viewer-mode-btn:hover:not(.active) {
3479  background: var(--bg-tertiary);
3480}
3481
3482.diff-viewer-nav-buttons {
3483  display: flex;
3484  gap: 0.125rem;
3485}
3486
3487.diff-viewer-nav-btn {
3488  padding: 0.25rem 0.5rem;
3489  border: 1px solid var(--border-color);
3490  background: var(--bg-base);
3491  color: var(--text-primary);
3492  cursor: pointer;
3493  border-radius: 0.25rem;
3494  font-size: 0.875rem;
3495}
3496
3497.diff-viewer-nav-btn:disabled {
3498  opacity: 0.4;
3499  cursor: not-allowed;
3500}
3501
3502.diff-viewer-nav-btn:hover:not(:disabled) {
3503  background: var(--bg-tertiary);
3504}
3505
3506.diff-viewer-select {
3507  flex: 1;
3508  min-width: 120px;
3509  max-width: 300px;
3510  padding: 0.5rem;
3511  border: 1px solid var(--border-color);
3512  border-radius: 0.25rem;
3513  background: var(--bg-base);
3514  color: var(--text-primary);
3515  font-size: 0.875rem;
3516}
3517
3518.diff-viewer-dir-btn {
3519  width: 2rem;
3520  height: 2rem;
3521  border: none;
3522  background: transparent;
3523  color: var(--text-secondary);
3524  cursor: pointer;
3525  border-radius: 0.25rem;
3526  display: flex;
3527  align-items: center;
3528  justify-content: center;
3529  flex-shrink: 0;
3530  padding: 0;
3531}
3532
3533.diff-viewer-dir-btn:hover {
3534  background: var(--bg-tertiary);
3535  color: var(--text-primary);
3536}
3537
3538.diff-viewer-close {
3539  width: 2rem;
3540  height: 2rem;
3541  border: none;
3542  background: transparent;
3543  color: var(--text-secondary);
3544  font-size: 1.5rem;
3545  cursor: pointer;
3546  border-radius: 0.25rem;
3547  display: flex;
3548  align-items: center;
3549  justify-content: center;
3550  flex-shrink: 0;
3551}
3552
3553.diff-viewer-close:hover {
3554  background: var(--bg-tertiary);
3555  color: var(--text-primary);
3556}
3557
3558.diff-viewer-error {
3559  padding: 0.5rem 1rem;
3560  background: var(--error-bg);
3561  color: var(--error-text);
3562  font-size: 0.875rem;
3563}
3564
3565.diff-viewer-toast {
3566  position: fixed;
3567  bottom: 24px;
3568  right: 24px;
3569  padding: 12px 16px;
3570  border-radius: 8px;
3571  font-size: 14px;
3572  font-weight: 500;
3573  z-index: 9999;
3574  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
3575  animation: toast-fade-in 0.2s ease;
3576  color: #ffffff;
3577}
3578
3579.diff-viewer-toast-saving {
3580  background: #1976d2;
3581}
3582
3583.diff-viewer-toast-saved {
3584  background: #2e7d32;
3585}
3586
3587.diff-viewer-toast-error {
3588  background: #d32f2f;
3589}
3590
3591.diff-viewer-toast-hint {
3592  background: var(--bg-tertiary);
3593  color: var(--text-primary);
3594  border: 1px solid var(--border-color);
3595}
3596
3597@keyframes toast-fade-in {
3598  from {
3599    opacity: 0;
3600    transform: translateY(10px);
3601  }
3602  to {
3603    opacity: 1;
3604    transform: translateY(0);
3605  }
3606}
3607
3608.diff-viewer-content {
3609  flex: 1;
3610  overflow: hidden;
3611  position: relative;
3612}
3613
3614.diff-viewer-loading,
3615.diff-viewer-empty {
3616  display: flex;
3617  flex-direction: column;
3618  align-items: center;
3619  justify-content: center;
3620  height: 100%;
3621  color: var(--text-secondary);
3622  gap: 0.5rem;
3623}
3624
3625.diff-viewer-hint {
3626  font-size: 0.875rem;
3627  opacity: 0.7;
3628}
3629
3630.diff-viewer-editor {
3631  height: 100%;
3632  width: 100%;
3633}
3634
3635/* Diff viewer line hover highlighting (via decoration API) */
3636.diff-viewer-editor .monaco-editor .diff-viewer-line-hover {
3637  background-color: rgba(37, 99, 235, 0.08) !important;
3638}
3639
3640.dark .diff-viewer-editor .monaco-editor .diff-viewer-line-hover {
3641  background-color: rgba(96, 165, 250, 0.12) !important;
3642}
3643
3644/* Comment indicator glyph in margin for diff viewer */
3645.diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph {
3646  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%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");
3647  background-size: 14px 14px;
3648  background-repeat: no-repeat;
3649  background-position: center;
3650  opacity: 0.6;
3651  cursor: pointer;
3652}
3653
3654.diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph:hover {
3655  opacity: 1;
3656}
3657
3658.dark .diff-viewer-editor .monaco-editor .diff-viewer-comment-glyph {
3659  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");
3660}
3661
3662/* Make diff viewer Monaco lines clickable with pointer cursor */
3663.diff-viewer-editor .monaco-editor .view-lines {
3664  cursor: pointer;
3665}
3666
3667.diff-viewer-comment-badge {
3668  position: absolute;
3669  bottom: 1rem;
3670  left: 1rem;
3671  padding: 0.5rem 1rem;
3672  background: var(--blue-bg);
3673  color: var(--blue-text);
3674  border-radius: 1rem;
3675  font-size: 0.875rem;
3676  font-weight: 500;
3677}
3678
3679/* Comment dialog */
3680.diff-viewer-comment-dialog {
3681  position: absolute;
3682  top: 50%;
3683  left: 50%;
3684  transform: translate(-50%, -50%);
3685  width: 90%;
3686  max-width: 500px;
3687  background: var(--bg-base);
3688  border: 1px solid var(--border-color);
3689  border-radius: 0.5rem;
3690  padding: 1rem;
3691  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
3692  z-index: 1001;
3693}
3694
3695.diff-viewer-comment-dialog h4 {
3696  margin: 0 0 0.75rem 0;
3697  color: var(--text-primary);
3698}
3699
3700.diff-viewer-selected-text {
3701  margin: 0 0 0.75rem 0;
3702  padding: 0.5rem;
3703  background: var(--bg-tertiary);
3704  border: 1px solid var(--border-color);
3705  border-radius: 0.25rem;
3706  font-size: 0.75rem;
3707  font-family: monospace;
3708  max-height: 150px;
3709  overflow: auto;
3710  white-space: pre;
3711}
3712
3713.diff-viewer-comment-input {
3714  width: 100%;
3715  min-height: 100px;
3716  padding: 0.5rem;
3717  border: 1px solid var(--border-color);
3718  border-radius: 0.25rem;
3719  background: var(--bg-base);
3720  color: var(--text-primary);
3721  font-size: 0.875rem;
3722  resize: vertical;
3723}
3724
3725.diff-viewer-comment-actions {
3726  display: flex;
3727  justify-content: flex-end;
3728  gap: 0.5rem;
3729  margin-top: 0.75rem;
3730}
3731
3732.diff-viewer-btn {
3733  padding: 0.5rem 1rem;
3734  border: none;
3735  border-radius: 0.25rem;
3736  font-size: 0.875rem;
3737  cursor: pointer;
3738}
3739
3740.diff-viewer-btn:disabled {
3741  opacity: 0.5;
3742  cursor: not-allowed;
3743}
3744
3745.diff-viewer-btn-primary {
3746  background: var(--blue-bg);
3747  color: var(--blue-text);
3748}
3749
3750.diff-viewer-btn-primary:hover:not(:disabled) {
3751  filter: brightness(0.95);
3752}
3753
3754.diff-viewer-btn-secondary {
3755  background: var(--bg-tertiary);
3756  color: var(--text-primary);
3757}
3758
3759.diff-viewer-btn-secondary:hover:not(:disabled) {
3760  background: var(--bg-secondary);
3761}
3762
3763/* Mobile floating nav buttons */
3764.diff-viewer-mobile-nav {
3765  position: absolute;
3766  bottom: 1.5rem;
3767  left: 50%;
3768  transform: translateX(-50%);
3769  display: flex;
3770  gap: 0.5rem;
3771  z-index: 100;
3772}
3773
3774.diff-viewer-mobile-nav-btn {
3775  width: 3rem;
3776  height: 3rem;
3777  border: none;
3778  border-radius: 50%;
3779  background: var(--bg-base);
3780  color: var(--text-primary);
3781  cursor: pointer;
3782  display: flex;
3783  align-items: center;
3784  justify-content: center;
3785  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
3786}
3787
3788.diff-viewer-mobile-nav-btn svg {
3789  width: 24px;
3790  height: 24px;
3791}
3792
3793.diff-viewer-mobile-nav-btn:disabled {
3794  opacity: 0.4;
3795  cursor: not-allowed;
3796}
3797
3798.diff-viewer-mobile-nav-btn:active:not(:disabled) {
3799  background: var(--bg-tertiary);
3800  transform: scale(0.95);
3801}
3802
3803.diff-viewer-mobile-mode-btn {
3804  font-size: 1.25rem;
3805}
3806
3807.diff-viewer-mobile-mode-btn.active {
3808  background: var(--blue-bg);
3809  color: var(--blue-text);
3810}
3811
3812/* Monaco comment glyph decoration */
3813/* Mobile optimizations for diff viewer */
3814@media (max-width: 767px) {
3815  .diff-viewer-overlay {
3816    padding: 0;
3817  }
3818
3819  .diff-viewer-container {
3820    border-radius: 0;
3821    width: 100%;
3822    max-width: 100%;
3823    height: 100%;
3824    max-height: 100%;
3825  }
3826
3827  .diff-viewer-close {
3828    width: 1.75rem;
3829    height: 1.75rem;
3830    font-size: 1.25rem;
3831    flex-shrink: 0;
3832  }
3833
3834  /* Monaco editor mobile styles - hide gutters completely */
3835  .diff-viewer-editor .monaco-editor .margin {
3836    display: none !important;
3837    width: 0 !important;
3838  }
3839
3840  .diff-viewer-editor .monaco-editor .margin-view-overlays {
3841    display: none !important;
3842    width: 0 !important;
3843  }
3844
3845  .diff-viewer-editor .monaco-editor .editor-scrollable {
3846    left: 0 !important;
3847  }
3848
3849  .diff-viewer-editor .monaco-editor .lines-content {
3850    margin-left: 0 !important;
3851  }
3852
3853  /* Ensure diff editor uses full width */
3854  .diff-viewer-editor .monaco-diff-editor {
3855    width: 100% !important;
3856  }
3857
3858  .diff-viewer-editor .monaco-diff-editor .editor.modified {
3859    width: 100% !important;
3860    left: 0 !important;
3861  }
3862
3863  /* Comment dialog on top half of screen for mobile (keyboard space) */
3864  .diff-viewer-comment-dialog {
3865    top: 10%;
3866    transform: translate(-50%, 0);
3867    max-height: 40vh;
3868    overflow-y: auto;
3869  }
3870
3871  .diff-viewer-comment-input {
3872    min-height: 60px;
3873  }
3874}
3875
3876/* Injected text indicator (for diff comments) */
3877.injected-text-indicator {
3878  display: flex;
3879  align-items: center;
3880  justify-content: space-between;
3881  padding: 0.5rem 0.75rem;
3882  background: var(--blue-bg);
3883  border-bottom: 1px solid var(--border-color);
3884  gap: 0.5rem;
3885}
3886
3887.injected-text-label {
3888  font-size: 0.875rem;
3889  color: var(--blue-text);
3890  flex: 1;
3891  min-width: 0;
3892  overflow: hidden;
3893  text-overflow: ellipsis;
3894  white-space: nowrap;
3895}
3896
3897.injected-text-insert-btn {
3898  padding: 0.375rem 0.75rem;
3899  background: var(--blue-text);
3900  color: white;
3901  border: none;
3902  border-radius: 0.25rem;
3903  font-size: 0.75rem;
3904  font-weight: 500;
3905  cursor: pointer;
3906  white-space: nowrap;
3907  flex-shrink: 0;
3908}
3909
3910.injected-text-insert-btn:hover {
3911  filter: brightness(1.1);
3912}
3913
3914/* Links in message text */
3915.text-link {
3916  color: var(--blue-text);
3917  text-decoration: underline;
3918  text-underline-offset: 2px;
3919  text-decoration-color: var(--blue-border);
3920}
3921
3922.text-link:hover {
3923  text-decoration-color: var(--blue-text);
3924}
3925
3926/* Command Palette */
3927.command-palette-overlay {
3928  position: fixed;
3929  inset: 0;
3930  background: rgba(0, 0, 0, 0.5);
3931  z-index: 100;
3932  display: flex;
3933  align-items: flex-start;
3934  justify-content: center;
3935  padding-top: 15vh;
3936}
3937
3938.command-palette {
3939  background: var(--bg-base);
3940  border: 1px solid var(--border-color);
3941  border-radius: 0.75rem;
3942  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
3943  width: 100%;
3944  max-width: 32rem;
3945  max-height: 60vh;
3946  display: flex;
3947  flex-direction: column;
3948  overflow: hidden;
3949}
3950
3951.command-palette-input-wrapper {
3952  display: flex;
3953  align-items: center;
3954  padding: 0.75rem 1rem;
3955  border-bottom: 1px solid var(--border-color);
3956  gap: 0.75rem;
3957}
3958
3959.command-palette-search-icon {
3960  color: var(--text-secondary);
3961  flex-shrink: 0;
3962}
3963
3964.command-palette-input {
3965  flex: 1;
3966  border: none;
3967  background: transparent;
3968  font-size: 1rem;
3969  color: var(--text-primary);
3970  outline: none;
3971}
3972
3973.command-palette-input::placeholder {
3974  color: var(--text-secondary);
3975}
3976
3977.command-palette-shortcut {
3978  flex-shrink: 0;
3979}
3980
3981.command-palette-spinner {
3982  width: 16px;
3983  height: 16px;
3984  border: 2px solid var(--border-color);
3985  border-top-color: var(--primary);
3986  border-radius: 50%;
3987  animation: spin 0.6s linear infinite;
3988  flex-shrink: 0;
3989}
3990
3991.command-palette-list {
3992  flex: 1;
3993  overflow-y: auto;
3994  padding: 0.5rem;
3995}
3996
3997.command-palette-empty {
3998  padding: 2rem 1rem;
3999  text-align: center;
4000  color: var(--text-secondary);
4001}
4002
4003.command-palette-item {
4004  display: flex;
4005  align-items: center;
4006  padding: 0.625rem 0.75rem;
4007  border-radius: 0.5rem;
4008  cursor: pointer;
4009  gap: 0.75rem;
4010}
4011
4012.command-palette-item:hover,
4013.command-palette-item.selected {
4014  background: var(--bg-secondary);
4015}
4016
4017.command-palette-item-icon {
4018  flex-shrink: 0;
4019  color: var(--text-secondary);
4020  display: flex;
4021  align-items: center;
4022  justify-content: center;
4023}
4024
4025.command-palette-item.selected .command-palette-item-icon {
4026  color: var(--primary);
4027}
4028
4029.command-palette-item-content {
4030  flex: 1;
4031  min-width: 0;
4032}
4033
4034.command-palette-item-title {
4035  font-size: 0.875rem;
4036  color: var(--text-primary);
4037  white-space: nowrap;
4038  overflow: hidden;
4039  text-overflow: ellipsis;
4040}
4041
4042.command-palette-item-subtitle {
4043  font-size: 0.75rem;
4044  color: var(--text-secondary);
4045  white-space: nowrap;
4046  overflow: hidden;
4047  text-overflow: ellipsis;
4048  margin-top: 0.125rem;
4049}
4050
4051.command-palette-item-badge {
4052  flex-shrink: 0;
4053  font-size: 0.625rem;
4054  text-transform: uppercase;
4055  letter-spacing: 0.05em;
4056  padding: 0.125rem 0.375rem;
4057  background: var(--bg-tertiary);
4058  border-radius: 0.25rem;
4059  color: var(--text-secondary);
4060}
4061
4062.command-palette-footer {
4063  display: flex;
4064  gap: 1rem;
4065  padding: 0.5rem 1rem;
4066  border-top: 1px solid var(--border-color);
4067  font-size: 0.75rem;
4068  color: var(--text-secondary);
4069}
4070
4071.command-palette-footer span {
4072  display: flex;
4073  align-items: center;
4074  gap: 0.25rem;
4075}
4076
4077@media (max-width: 640px) {
4078  .command-palette-overlay {
4079    padding: 1rem;
4080    padding-top: 5vh;
4081  }
4082
4083  .command-palette {
4084    max-height: 80vh;
4085  }
4086
4087  .command-palette-footer {
4088    display: none;
4089  }
4090}
4091
4092/* Models Modal Styles */
4093.models-modal {
4094  padding: 0.5rem;
4095}
4096
4097.models-loading {
4098  display: flex;
4099  align-items: center;
4100  justify-content: center;
4101  gap: 0.5rem;
4102  padding: 2rem;
4103  color: var(--text-secondary);
4104}
4105
4106.models-error {
4107  display: flex;
4108  align-items: center;
4109  justify-content: space-between;
4110  padding: 0.75rem 1rem;
4111  background: var(--error-bg);
4112  border: 1px solid var(--error-border);
4113  border-radius: 0.375rem;
4114  color: var(--error-text);
4115  margin-bottom: 1rem;
4116}
4117
4118.models-error-dismiss {
4119  background: none;
4120  border: none;
4121  font-size: 1.25rem;
4122  cursor: pointer;
4123  color: inherit;
4124  padding: 0;
4125  line-height: 1;
4126}
4127
4128.models-info {
4129  padding: 0.75rem 1rem;
4130  background: var(--bg-tertiary);
4131  border-radius: 0.375rem;
4132  margin-bottom: 1rem;
4133}
4134
4135.models-info p {
4136  margin: 0 0 0.5rem 0;
4137  color: var(--text-secondary);
4138}
4139
4140.builtin-list {
4141  margin: 0;
4142  padding-left: 1.25rem;
4143  color: var(--text-primary);
4144}
4145
4146.builtin-list li {
4147  margin: 0.25rem 0;
4148}
4149
4150.models-list {
4151  display: flex;
4152  flex-direction: column;
4153  gap: 0.75rem;
4154  margin-bottom: 1rem;
4155}
4156
4157.model-card {
4158  padding: 0.75rem 1rem;
4159  background: var(--bg-base);
4160  border: 1px solid var(--border);
4161  border-radius: 0.375rem;
4162}
4163
4164.model-header {
4165  display: flex;
4166  justify-content: space-between;
4167  align-items: flex-start;
4168  gap: 0.5rem;
4169}
4170
4171.model-info {
4172  display: flex;
4173  flex-wrap: wrap;
4174  align-items: center;
4175  gap: 0.5rem;
4176}
4177
4178.model-name {
4179  font-weight: 500;
4180  color: var(--text-primary);
4181}
4182
4183.model-provider {
4184  font-size: 0.75rem;
4185  padding: 0.125rem 0.5rem;
4186  background: var(--bg-tertiary);
4187  border-radius: 0.25rem;
4188  color: var(--text-secondary);
4189}
4190
4191.model-source {
4192  font-size: 0.75rem;
4193  padding: 0.125rem 0.5rem;
4194  background: var(--bg-tertiary);
4195  border-radius: 0.25rem;
4196  color: var(--text-secondary);
4197}
4198
4199.model-card-builtin {
4200  opacity: 0.8;
4201  background: var(--bg-secondary);
4202}
4203
4204.models-empty {
4205  padding: 2rem;
4206  text-align: center;
4207  color: var(--text-secondary);
4208}
4209
4210.models-empty-hint {
4211  font-size: 0.875rem;
4212  margin-top: 0.5rem;
4213  color: var(--text-tertiary);
4214}
4215
4216.model-badge {
4217  font-size: 0.625rem;
4218  text-transform: uppercase;
4219  letter-spacing: 0.05em;
4220  padding: 0.125rem 0.375rem;
4221  background: var(--blue-bg);
4222  border: 1px solid var(--blue-border);
4223  border-radius: 0.25rem;
4224  color: var(--blue-text);
4225}
4226
4227.model-actions {
4228  display: flex;
4229  gap: 0.25rem;
4230  flex-shrink: 0;
4231}
4232
4233.model-details {
4234  margin-top: 0.5rem;
4235  display: flex;
4236  flex-direction: column;
4237  gap: 0.25rem;
4238}
4239
4240.model-api-name {
4241  font-size: 0.75rem;
4242  font-family: var(--font-mono);
4243  color: var(--text-secondary);
4244}
4245
4246.model-endpoint {
4247  font-size: 0.75rem;
4248  color: var(--text-tertiary);
4249  word-break: break-all;
4250}
4251
4252.btn-icon {
4253  padding: 0.25rem;
4254  border-radius: 0.25rem;
4255  color: var(--text-secondary);
4256  background: transparent;
4257  border: none;
4258  cursor: pointer;
4259  display: flex;
4260  align-items: center;
4261  justify-content: center;
4262}
4263
4264.btn-icon:hover {
4265  background: var(--bg-tertiary);
4266  color: var(--text-primary);
4267}
4268
4269/* Version Checker Styles */
4270.version-update-dot {
4271  position: absolute;
4272  top: 2px;
4273  right: 2px;
4274  width: 8px;
4275  height: 8px;
4276  background: #ef4444;
4277  border-radius: 50%;
4278  border: 2px solid var(--bg-base);
4279}
4280
4281.version-menu-dot {
4282  width: 8px;
4283  height: 8px;
4284  background: #ef4444;
4285  border-radius: 50%;
4286  margin-left: auto;
4287  flex-shrink: 0;
4288}
4289
4290.version-modal-overlay {
4291  position: fixed;
4292  inset: 0;
4293  background: rgba(0, 0, 0, 0.5);
4294  display: flex;
4295  align-items: center;
4296  justify-content: center;
4297  z-index: 1000;
4298  padding: 1rem;
4299}
4300
4301.version-modal {
4302  background: var(--bg-base);
4303  border-radius: 0.5rem;
4304  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
4305  max-width: 500px;
4306  width: 100%;
4307  max-height: 80vh;
4308  display: flex;
4309  flex-direction: column;
4310  overflow: hidden;
4311}
4312
4313.version-modal-header {
4314  display: flex;
4315  align-items: center;
4316  justify-content: space-between;
4317  padding: 1rem 1.25rem;
4318  border-bottom: 1px solid var(--border-color);
4319}
4320
4321.version-modal-header h2 {
4322  margin: 0;
4323  font-size: 1.125rem;
4324  font-weight: 600;
4325  color: var(--text-primary);
4326}
4327
4328.version-modal-close {
4329  background: none;
4330  border: none;
4331  padding: 0.25rem;
4332  cursor: pointer;
4333  color: var(--text-secondary);
4334  border-radius: 0.25rem;
4335}
4336
4337.version-modal-close:hover {
4338  background: var(--bg-tertiary);
4339  color: var(--text-primary);
4340}
4341
4342.version-modal-close svg {
4343  width: 1.25rem;
4344  height: 1.25rem;
4345}
4346
4347.version-modal-content {
4348  padding: 1.25rem;
4349  overflow-y: auto;
4350  display: flex;
4351  flex-direction: column;
4352  gap: 1rem;
4353}
4354
4355.version-info-row {
4356  display: flex;
4357  align-items: center;
4358  gap: 0.5rem;
4359  font-size: 0.875rem;
4360}
4361
4362.version-label {
4363  color: var(--text-secondary);
4364}
4365
4366.version-value {
4367  font-weight: 500;
4368  color: var(--text-primary);
4369  font-family: var(--font-mono);
4370}
4371
4372.version-date {
4373  color: var(--text-tertiary);
4374  font-size: 0.75rem;
4375}
4376
4377.version-error {
4378  padding: 0.75rem;
4379  background: var(--error-bg);
4380  border: 1px solid var(--error-border);
4381  border-radius: 0.375rem;
4382  font-size: 0.875rem;
4383  color: var(--error-text);
4384}
4385
4386.version-success {
4387  padding: 0.75rem;
4388  background: var(--success-bg);
4389  border: 1px solid var(--success-border);
4390  border-radius: 0.375rem;
4391  font-size: 0.875rem;
4392  color: var(--success-text);
4393}
4394
4395.version-changelog {
4396  border-top: 1px solid var(--border-color);
4397  padding-top: 1rem;
4398}
4399
4400.version-changelog h3 {
4401  margin: 0 0 0.75rem 0;
4402  font-size: 0.875rem;
4403  font-weight: 600;
4404}
4405
4406.changelog-link {
4407  color: var(--link-color);
4408  text-decoration: none;
4409}
4410
4411.changelog-link:hover {
4412  text-decoration: underline;
4413}
4414
4415.commit-list {
4416  margin: 0;
4417  padding: 0;
4418  list-style: none;
4419  max-height: 250px;
4420  overflow-y: auto;
4421  font-size: 0.8125rem;
4422}
4423
4424.commit-item {
4425  display: flex;
4426  gap: 0.5rem;
4427  padding: 0.5rem 0;
4428  border-bottom: 1px solid var(--border-color);
4429  align-items: flex-start;
4430}
4431
4432.commit-item:last-child {
4433  border-bottom: none;
4434}
4435
4436.commit-sha {
4437  font-family: var(--font-mono);
4438  color: var(--link-color);
4439  font-size: 0.75rem;
4440  flex-shrink: 0;
4441  text-decoration: none;
4442}
4443
4444.commit-sha:hover {
4445  text-decoration: underline;
4446}
4447
4448.commit-message {
4449  color: var(--text-primary);
4450  word-break: break-word;
4451  line-height: 1.4;
4452}
4453
4454.version-loading,
4455.version-no-commits {
4456  color: var(--text-secondary);
4457  font-size: 0.875rem;
4458  padding: 0.5rem 0;
4459}
4460
4461.version-actions {
4462  display: flex;
4463  flex-direction: column;
4464  gap: 0.75rem;
4465  border-top: 1px solid var(--border-color);
4466  padding-top: 1rem;
4467}
4468
4469.version-btn {
4470  padding: 0.5rem 1rem;
4471  border-radius: 0.375rem;
4472  font-size: 0.875rem;
4473  font-weight: 500;
4474  cursor: pointer;
4475  transition: background-color 0.15s;
4476}
4477
4478.version-btn:disabled {
4479  opacity: 0.6;
4480  cursor: not-allowed;
4481}
4482
4483.version-btn-primary {
4484  background: var(--primary);
4485  color: white;
4486  border: none;
4487}
4488
4489.version-btn-primary:hover:not(:disabled) {
4490  background: var(--primary-dark);
4491}
4492
4493.btn-icon.btn-danger:hover {
4494  background: var(--error-bg);
4495  color: var(--error-text);
4496}
4497
4498.add-model-btn {
4499  width: 100%;
4500}
4501
4502/* Model Form */
4503.model-form h3 {
4504  margin: 0 0 0.75rem 0;
4505  font-size: 1rem;
4506  font-weight: 600;
4507}
4508
4509.form-group {
4510  margin-bottom: 0.75rem;
4511}
4512
4513.form-group label {
4514  display: block;
4515  font-size: 0.875rem;
4516  font-weight: 500;
4517  margin-bottom: 0.25rem;
4518  color: var(--text-primary);
4519}
4520
4521.form-group label .optional {
4522  font-weight: 400;
4523  color: var(--text-secondary);
4524}
4525
4526.form-input {
4527  width: 100%;
4528  padding: 0.5rem 0.75rem;
4529  background: var(--bg-base);
4530  border: 1px solid var(--border);
4531  border-radius: 0.375rem;
4532  color: var(--text-primary);
4533  font-family: inherit;
4534  font-size: 0.875rem;
4535}
4536
4537.form-input:focus {
4538  outline: none;
4539  border-color: var(--primary);
4540  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
4541}
4542
4543.form-checkbox {
4544  display: flex;
4545  align-items: center;
4546}
4547
4548.form-checkbox label {
4549  display: flex;
4550  align-items: center;
4551  gap: 0.5rem;
4552  cursor: pointer;
4553  margin: 0;
4554}
4555
4556.form-checkbox input[type="checkbox"] {
4557  width: 1rem;
4558  height: 1rem;
4559  cursor: pointer;
4560}
4561
4562.info-icon-wrapper {
4563  position: relative;
4564  display: inline-flex;
4565  align-items: center;
4566  margin-left: 0.25rem;
4567}
4568
4569.info-icon {
4570  display: inline-flex;
4571  align-items: center;
4572  justify-content: center;
4573  color: var(--text-tertiary);
4574  cursor: pointer;
4575}
4576
4577.info-icon:hover {
4578  color: var(--text-secondary);
4579}
4580
4581.info-tooltip {
4582  position: absolute;
4583  top: 50%;
4584  left: 100%;
4585  transform: translateY(-50%);
4586  background: var(--bg-tertiary);
4587  border: 1px solid var(--border);
4588  border-radius: 0.375rem;
4589  padding: 0.5rem 0.75rem;
4590  font-size: 0.75rem;
4591  font-weight: 400;
4592  color: var(--text-primary);
4593  white-space: normal;
4594  width: 220px;
4595  margin-left: 0.375rem;
4596  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
4597  z-index: 100;
4598}
4599
4600.info-tooltip::after {
4601  content: "";
4602  position: absolute;
4603  top: 50%;
4604  right: 100%;
4605  transform: translateY(-50%);
4606  border: 6px solid transparent;
4607  border-right-color: var(--border);
4608}
4609
4610.provider-buttons {
4611  display: flex;
4612  gap: 0.5rem;
4613}
4614
4615.provider-btn {
4616  flex: 1;
4617  padding: 0.5rem;
4618  background: var(--bg-base);
4619  border: 1px solid var(--border);
4620  border-radius: 0.375rem;
4621  color: var(--text-primary);
4622  font-size: 0.875rem;
4623  cursor: pointer;
4624  transition: all 0.15s;
4625}
4626
4627.provider-btn:hover {
4628  background: var(--bg-tertiary);
4629}
4630
4631.provider-btn.selected {
4632  background: var(--primary);
4633  border-color: var(--primary);
4634  color: white;
4635}
4636
4637.endpoint-toggle {
4638  display: flex;
4639  gap: 0;
4640  margin-bottom: 0.5rem;
4641}
4642
4643.toggle-btn {
4644  flex: 1;
4645  padding: 0.375rem 0.75rem;
4646  background: var(--bg-base);
4647  border: 1px solid var(--border);
4648  color: var(--text-secondary);
4649  font-size: 0.75rem;
4650  cursor: pointer;
4651  transition: all 0.15s;
4652}
4653
4654.toggle-btn:first-child {
4655  border-radius: 0.375rem 0 0 0.375rem;
4656}
4657
4658.toggle-btn:last-child {
4659  border-radius: 0 0.375rem 0.375rem 0;
4660  border-left: none;
4661}
4662
4663.toggle-btn.selected {
4664  background: var(--bg-tertiary);
4665  color: var(--text-primary);
4666}
4667
4668.endpoint-display {
4669  padding: 0.5rem 0.75rem;
4670  background: var(--bg-tertiary);
4671  border-radius: 0.375rem;
4672  font-size: 0.75rem;
4673  color: var(--text-secondary);
4674  word-break: break-all;
4675}
4676
4677.model-presets {
4678  display: flex;
4679  flex-wrap: wrap;
4680  gap: 0.375rem;
4681  margin-bottom: 0.5rem;
4682}
4683
4684.preset-btn {
4685  padding: 0.25rem 0.625rem;
4686  background: var(--bg-base);
4687  border: 1px solid var(--border);
4688  border-radius: 0.25rem;
4689  color: var(--text-secondary);
4690  font-size: 0.75rem;
4691  cursor: pointer;
4692  transition: all 0.15s;
4693}
4694
4695.preset-btn:hover {
4696  background: var(--bg-tertiary);
4697  color: var(--text-primary);
4698}
4699
4700.preset-btn.selected {
4701  background: var(--blue-bg);
4702  border-color: var(--blue-border);
4703  color: var(--blue-text);
4704}
4705
4706.test-result {
4707  padding: 0.75rem 1rem;
4708  border-radius: 0.375rem;
4709  margin-bottom: 1rem;
4710  font-size: 0.875rem;
4711}
4712
4713.test-result.success {
4714  background: var(--success-bg);
4715  border: 1px solid var(--success-border);
4716  color: var(--success-text);
4717}
4718
4719.test-result.error {
4720  background: var(--error-bg);
4721  border: 1px solid var(--error-border);
4722  color: var(--error-text);
4723}
4724
4725.form-actions {
4726  display: flex;
4727  gap: 0.5rem;
4728  justify-content: flex-end;
4729  margin-top: 1rem;
4730  padding-bottom: 0.5rem;
4731}
4732
4733kbd {
4734  display: inline-block;
4735  padding: 0.125rem 0.375rem;
4736  font-size: 0.75rem;
4737  font-family: inherit;
4738  background: var(--bg-tertiary);
4739  border: 1px solid var(--border-color);
4740  border-radius: 0.25rem;
4741  color: var(--text-secondary);
4742}
4743
4744/* System Prompt View */
4745.system-prompt-view {
4746  background: var(--gray-100);
4747  border-radius: 0.5rem;
4748  margin: 0.5rem 0;
4749  width: 100%;
4750  border: 1px dashed var(--border);
4751}
4752
4753.dark .system-prompt-view {
4754  background: var(--gray-800);
4755}
4756
4757.system-prompt-header {
4758  display: flex;
4759  align-items: center;
4760  justify-content: space-between;
4761  padding: 0.75rem 1rem;
4762  cursor: pointer;
4763  user-select: none;
4764}
4765
4766.system-prompt-header:hover {
4767  background: rgba(0, 0, 0, 0.02);
4768  border-radius: 0.5rem;
4769}
4770
4771.dark .system-prompt-header:hover {
4772  background: rgba(255, 255, 255, 0.02);
4773}
4774
4775.system-prompt-summary {
4776  display: flex;
4777  align-items: center;
4778  gap: 0.5rem;
4779  flex: 1;
4780  min-width: 0;
4781}
4782
4783.system-prompt-icon {
4784  font-size: 1rem;
4785  flex-shrink: 0;
4786}
4787
4788.system-prompt-label {
4789  font-family: var(--font-mono);
4790  font-size: 0.875rem;
4791  color: var(--text-primary);
4792  font-weight: 500;
4793}
4794
4795.system-prompt-meta {
4796  font-size: 0.75rem;
4797  color: var(--text-secondary);
4798  flex-shrink: 0;
4799}
4800
4801.system-prompt-content {
4802  padding: 0 1rem 1rem 1rem;
4803}
4804
4805.system-prompt-text {
4806  font-family: var(--font-mono);
4807  font-size: 0.75rem;
4808  line-height: 1.5;
4809  color: var(--text-secondary);
4810  background: var(--bg-base);
4811  border: 1px solid var(--border);
4812  border-radius: 0.375rem;
4813  padding: 1rem;
4814  margin: 0;
4815  max-height: 400px;
4816  overflow: auto;
4817  white-space: pre-wrap;
4818  word-wrap: break-word;
4819}
4820
4821.dark .system-prompt-text {
4822  background: var(--gray-900);
4823}
4824
4825/* ===== Terminal Panel ===== */
4826.terminal-panel {
4827  display: flex;
4828  flex-direction: column;
4829  border-top: 1px solid var(--border);
4830  background: var(--bg-secondary);
4831  min-height: 80px;
4832  max-height: 800px;
4833  overflow: hidden;
4834}
4835
4836.terminal-panel-resize-handle {
4837  height: 6px;
4838  cursor: ns-resize;
4839  display: flex;
4840  align-items: center;
4841  justify-content: center;
4842  flex-shrink: 0;
4843  background: var(--bg-secondary);
4844  border-bottom: 1px solid var(--border);
4845  user-select: none;
4846}
4847
4848.terminal-panel-resize-handle:hover {
4849  background: var(--bg-tertiary);
4850}
4851
4852.terminal-panel-resize-grip {
4853  width: 40px;
4854  height: 3px;
4855  background: var(--text-tertiary);
4856  border-radius: 2px;
4857}
4858
4859.terminal-panel-header {
4860  display: flex;
4861  align-items: center;
4862  justify-content: space-between;
4863  padding: 0 8px;
4864  height: 34px;
4865  flex-shrink: 0;
4866  background: var(--bg-secondary);
4867  border-bottom: 1px solid var(--border);
4868  gap: 8px;
4869}
4870
4871.terminal-panel-tabs {
4872  display: flex;
4873  align-items: center;
4874  gap: 2px;
4875  overflow-x: auto;
4876  flex: 1;
4877  min-width: 0;
4878  scrollbar-width: none;
4879}
4880
4881.terminal-panel-tabs::-webkit-scrollbar {
4882  display: none;
4883}
4884
4885.terminal-panel-tab {
4886  display: flex;
4887  align-items: center;
4888  gap: 4px;
4889  padding: 4px 8px;
4890  border-radius: 4px;
4891  cursor: pointer;
4892  font-size: 12px;
4893  font-family: Consolas, "Liberation Mono", Menlo, monospace;
4894  color: var(--text-secondary);
4895  white-space: nowrap;
4896  user-select: none;
4897  border: 1px solid transparent;
4898  transition:
4899    background-color 0.1s,
4900    color 0.1s;
4901}
4902
4903.terminal-panel-tab:hover {
4904  background: var(--bg-tertiary);
4905  color: var(--text-primary);
4906}
4907
4908.terminal-panel-tab-active {
4909  background: var(--bg-base);
4910  color: var(--text-primary);
4911  border-color: var(--border);
4912}
4913
4914.terminal-panel-tab-indicator {
4915  font-size: 10px;
4916  line-height: 1;
4917}
4918
4919.terminal-panel-tab-running {
4920  color: var(--success-text);
4921}
4922
4923.terminal-panel-tab-success {
4924  color: var(--success-text);
4925}
4926
4927.terminal-panel-tab-error {
4928  color: var(--error-text);
4929}
4930
4931.terminal-panel-tab-label {
4932  max-width: 120px;
4933  overflow: hidden;
4934  text-overflow: ellipsis;
4935}
4936
4937.terminal-panel-tab-close {
4938  display: flex;
4939  align-items: center;
4940  justify-content: center;
4941  width: 16px;
4942  height: 16px;
4943  border: none;
4944  background: none;
4945  cursor: pointer;
4946  color: var(--text-tertiary);
4947  font-size: 14px;
4948  line-height: 1;
4949  border-radius: 3px;
4950  padding: 0;
4951}
4952
4953.terminal-panel-tab-close:hover {
4954  background: var(--bg-tertiary);
4955  color: var(--error-text);
4956}
4957
4958.terminal-panel-actions {
4959  display: flex;
4960  align-items: center;
4961  gap: 2px;
4962  background: var(--bg-base);
4963  border: 1px solid var(--border);
4964  border-radius: 4px;
4965  padding: 2px;
4966  flex-shrink: 0;
4967}
4968
4969.terminal-panel-actions-divider {
4970  width: 1px;
4971  height: 16px;
4972  background: var(--border);
4973  margin: 0 2px;
4974}
4975
4976.terminal-panel-action-btn {
4977  display: flex;
4978  align-items: center;
4979  justify-content: center;
4980  width: 24px;
4981  height: 24px;
4982  border-radius: 4px;
4983  border: none;
4984  background: transparent;
4985  cursor: pointer;
4986  color: var(--text-secondary);
4987  transition:
4988    background-color 0.15s,
4989    color 0.15s;
4990}
4991
4992.terminal-panel-action-btn:hover {
4993  background: var(--bg-tertiary);
4994}
4995
4996.terminal-panel-action-btn-feedback {
4997  background: var(--success-bg);
4998  color: var(--success-text);
4999}
5000
5001.terminal-panel-content {
5002  flex: 1;
5003  min-height: 0;
5004  overflow: hidden;
5005  position: relative;
5006}
5007
5008.terminal-panel-content > div {
5009  position: absolute;
5010  inset: 0;
5011  padding: 8px 12px;
5012}