soumyadeep/autoblogcarpperbotPublic · Bot Template

1/**#command2name: styles.css3answer: 4keyboard: 5parse_mode: markdown6aliases: 7allow_only_group: false8need_reply: false9is_web: 110#command**/11 12* {13  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;14  margin: 0;15  padding: 0;16  box-sizing: border-box;17  -webkit-tap-highlight-color: transparent;18}19 20body {21  background: #f4f7fb;22  min-height: 100vh;23  display: flex;24  justify-content: center;25  overflow: hidden;26}27 28.app-container {29  width: 100%;30  max-width: 440px;31  height: 100vh;32  display: flex;33  flex-direction: column;34  position: relative;35  background: #ffffff;36  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);37  overflow: hidden;38}39 40.sidebar-backdrop {41  position: absolute;42  inset: 0;43  background: rgba(15, 25, 40, 0.35);44  opacity: 0;45  pointer-events: none;46  transition: opacity 0.32s cubic-bezier(0.4, 0, 0.2, 1);47  z-index: 40;48  backdrop-filter: blur(2px);49  -webkit-backdrop-filter: blur(2px);50}51 52.sidebar-backdrop.open {53  opacity: 1;54  pointer-events: auto;55}56 57.sidebar {58  position: absolute;59  top: 0;60  left: 0;61  bottom: 0;62  width: 300px;63  max-width: 82%;64  background: #ffffff;65  z-index: 50;66  display: flex;67  flex-direction: column;68  transform: translateX(-102%);69  transition: transform 0.34s cubic-bezier(0.32, 0.72, 0, 1);70  box-shadow: 6px 0 30px rgba(15, 25, 40, 0.08);71  border-right: 1px solid #eef2f7;72}73 74.sidebar.open {75  transform: translateX(0);76}77 78.sidebar-header {79  display: flex;80  align-items: center;81  justify-content: space-between;82  padding: 16px 16px 14px 18px;83  flex-shrink: 0;84  gap: 10px;85}86 87.sidebar-header .brand {88  display: flex;89  align-items: center;90  gap: 10px;91  min-width: 0;92}93 94.brand-icon {95  width: 34px;96  height: 34px;97  border-radius: 11px;98  background: linear-gradient(145deg, #1a2b3c, #0d1824);99  display: flex;100  align-items: center;101  justify-content: center;102  color: #ffffff;103  font-weight: 700;104  font-size: 15px;105  letter-spacing: -0.02em;106  flex-shrink: 0;107  box-shadow: 0 3px 10px rgba(15, 25, 40, 0.18);108}109 110.brand-text {111  display: flex;112  flex-direction: column;113  min-width: 0;114}115 116.brand-name {117  font-size: 14.5px;118  font-weight: 600;119  color: #1a2b3c;120  letter-spacing: -0.01em;121  line-height: 1.2;122}123 124.brand-sub {125  font-size: 11px;126  color: #8fa1b8;127  font-weight: 400;128  margin-top: 2px;129  line-height: 1.2;130}131 132.sidebar-close {133  width: 32px;134  height: 32px;135  border-radius: 50%;136  border: none;137  background: transparent;138  display: flex;139  align-items: center;140  justify-content: center;141  cursor: pointer;142  transition: background 0.15s;143  flex-shrink: 0;144}145 146.sidebar-close:hover {147  background: #f0f4fa;148}149 150.sidebar-close svg {151  width: 16px;152  height: 16px;153  stroke: #6b7c93;154  stroke-width: 2;155  fill: none;156}157 158.sidebar-new-chat {159  margin: 4px 12px 12px 12px;160  padding: 11px 14px;161  border-radius: 12px;162  background: #1a2b3c;163  border: none;164  display: flex;165  align-items: center;166  gap: 10px;167  cursor: pointer;168  font-size: 14px;169  font-weight: 500;170  color: #ffffff;171  transition: background 0.15s, transform 0.1s;172  flex-shrink: 0;173  box-shadow: 0 4px 12px rgba(26, 43, 60, 0.15);174}175 176.sidebar-new-chat:hover {177  background: #0d1824;178}179 180.sidebar-new-chat:active {181  transform: scale(0.98);182}183 184.sidebar-new-chat .new-chat-icon {185  width: 18px;186  height: 18px;187  position: relative;188  display: flex;189  align-items: center;190  justify-content: center;191  flex-shrink: 0;192}193 194.sidebar-new-chat .new-chat-icon svg {195  width: 18px;196  height: 18px;197  stroke: #ffffff;198  stroke-width: 1.9;199  fill: none;200}201 202.sidebar-section-label {203  display: flex;204  align-items: center;205  justify-content: space-between;206  font-size: 11px;207  font-weight: 600;208  text-transform: uppercase;209  letter-spacing: 0.7px;210  color: #a3b3c9;211  padding: 10px 20px 8px 20px;212  flex-shrink: 0;213}214 215.sidebar-section-label .history-count {216  font-size: 10.5px;217  font-weight: 500;218  color: #a3b3c9;219  background: #f0f4fa;220  padding: 1px 7px;221  border-radius: 8px;222  text-transform: none;223  letter-spacing: 0;224}225 226.sidebar-history {227  flex: 1;228  overflow-y: auto;229  padding: 0 10px 10px 10px;230  -webkit-overflow-scrolling: touch;231}232 233.sidebar-history::-webkit-scrollbar {234  width: 4px;235}236 237.sidebar-history::-webkit-scrollbar-track {238  background: transparent;239}240 241.sidebar-history::-webkit-scrollbar-thumb {242  background: #d9e2ef;243  border-radius: 12px;244}245 246.history-group-label {247  font-size: 10.5px;248  font-weight: 600;249  color: #b8c5d6;250  text-transform: uppercase;251  letter-spacing: 0.6px;252  padding: 10px 10px 6px 10px;253}254 255.history-item {256  display: flex;257  align-items: center;258  gap: 10px;259  padding: 10px 12px;260  border-radius: 10px;261  cursor: pointer;262  transition: background 0.15s;263  margin-bottom: 2px;264  position: relative;265  group: history;266}267 268.history-item:hover {269  background: #f4f7fb;270}271 272.history-item.active {273  background: #eaf0f8;274}275 276.history-item .history-icon {277  width: 15px;278  height: 15px;279  stroke: #8fa1b8;280  stroke-width: 1.8;281  fill: none;282  flex-shrink: 0;283}284 285.history-item.active .history-icon {286  stroke: #1a2b3c;287}288 289.history-item .history-content {290  flex: 1;291  min-width: 0;292  display: flex;293  flex-direction: column;294  gap: 1px;295}296 297.history-item .history-title {298  font-size: 13.5px;299  color: #4a5b70;300  font-weight: 400;301  white-space: nowrap;302  overflow: hidden;303  text-overflow: ellipsis;304  line-height: 1.3;305}306 307.history-item.active .history-title {308  color: #1a2b3c;309  font-weight: 500;310}311 312.history-item .history-meta {313  font-size: 10.5px;314  color: #b8c5d6;315  font-weight: 400;316  white-space: nowrap;317  overflow: hidden;318  text-overflow: ellipsis;319}320 321.history-delete {322  width: 24px;323  height: 24px;324  border-radius: 6px;325  border: none;326  background: transparent;327  display: flex;328  align-items: center;329  justify-content: center;330  cursor: pointer;331  opacity: 0;332  transition: opacity 0.15s, background 0.15s;333  flex-shrink: 0;334}335 336.history-item:hover .history-delete,337.history-item.active .history-delete {338  opacity: 1;339}340 341.history-delete:hover {342  background: #fdeaea;343}344 345.history-delete svg {346  width: 13px;347  height: 13px;348  stroke: #8fa1b8;349  stroke-width: 2;350  fill: none;351}352 353.history-delete:hover svg {354  stroke: #e45649;355}356 357.history-empty {358  padding: 40px 20px;359  text-align: center;360  color: #a3b3c9;361  font-size: 13px;362  font-weight: 400;363  line-height: 1.6;364}365 366.history-empty svg {367  width: 32px;368  height: 32px;369  stroke: #cfd9e6;370  stroke-width: 1.5;371  fill: none;372  margin-bottom: 12px;373}374 375.sidebar-footer {376  flex-shrink: 0;377  border-top: 1px solid #f0f4fa;378  padding: 12px 16px 14px 16px;379  display: flex;380  align-items: center;381  gap: 12px;382  background: #fafbfd;383}384 385.dev-avatar {386  width: 36px;387  height: 36px;388  border-radius: 50%;389  background: linear-gradient(135deg, #6366f1, #8b5cf6);390  display: flex;391  align-items: center;392  justify-content: center;393  color: #ffffff;394  font-weight: 700;395  font-size: 14px;396  flex-shrink: 0;397  box-shadow: 0 3px 10px rgba(99, 102, 241, 0.25);398}399 400.dev-info {401  flex: 1;402  min-width: 0;403}404 405.dev-name {406  font-size: 13px;407  font-weight: 600;408  color: #1a2b3c;409  letter-spacing: -0.01em;410  line-height: 1.2;411}412 413.dev-role {414  font-size: 11px;415  color: #8fa1b8;416  font-weight: 400;417  margin-top: 2px;418  line-height: 1.2;419}420 421.header {422  display: flex;423  justify-content: space-between;424  align-items: center;425  padding: 0 16px;426  height: 56px;427  flex-shrink: 0;428  padding-top: 8px;429  gap: 12px;430}431 432.icon-btn {433  width: 40px;434  height: 40px;435  border-radius: 50%;436  background: #f0f4fa;437  display: flex;438  align-items: center;439  justify-content: center;440  border: none;441  cursor: pointer;442  transition: background 0.2s;443  flex-shrink: 0;444}445 446.icon-btn:active {447  background: #e2e8f2;448}449 450.icon-btn svg {451  width: 20px;452  height: 20px;453  stroke: #1a2b3c;454  stroke-width: 1.8;455  fill: none;456}457 458.chat-title {459  flex: 1;460  text-align: center;461  font-size: 15px;462  font-weight: 600;463  color: #1a2b3c;464  white-space: nowrap;465  overflow: hidden;466  text-overflow: ellipsis;467  padding: 0 8px;468  letter-spacing: -0.01em;469}470 471.main-content {472  flex: 1;473  overflow-y: auto;474  display: flex;475  flex-direction: column;476  padding: 0 16px;477}478 479.welcome-hero {480  flex: 1;481  display: flex;482  flex-direction: column;483  align-items: center;484  justify-content: center;485  text-align: center;486  padding: 20px;487  animation: fadeIn 0.4s ease;488}489 490.welcome-hero .hero-icon {491  width: 56px;492  height: 56px;493  border-radius: 18px;494  background: linear-gradient(145deg, #eaf0f8, #dbe6f5);495  display: flex;496  align-items: center;497  justify-content: center;498  margin-bottom: 18px;499  box-shadow: 0 4px 14px rgba(26, 43, 60, 0.06);500}501 502.welcome-hero .hero-icon svg {503  width: 28px;504  height: 28px;505  stroke: #1a2b3c;506  stroke-width: 1.8;507  fill: none;508}509 510.welcome-hero h2 {511  font-size: 22px;512  font-weight: 600;513  color: #1a2b3c;514  letter-spacing: -0.02em;515  margin-bottom: 8px;516}517 518.welcome-hero p {519  font-size: 14px;520  color: #8fa1b8;521  font-weight: 400;522  max-width: 240px;523  line-height: 1.5;524}525 526@keyframes fadeIn {527  from {528    opacity: 0;529    transform: translateY(6px);530  }531 532  to {533    opacity: 1;534    transform: translateY(0);535  }536}537 538.bottom-bar {539  padding: 8px 16px 16px 16px;540  background: #ffffff;541  flex-shrink: 0;542}543 544.input-wrapper {545  display: flex;546  align-items: center;547  background: #f2f6fc;548  border-radius: 28px;549  padding: 6px 6px 6px 16px;550  gap: 8px;551  transition: background 0.2s, box-shadow 0.2s;552  border: 1px solid transparent;553}554 555.input-wrapper:focus-within {556  background: #ffffff;557  border-color: #cbd8e8;558  box-shadow: 0 4px 12px rgba(0, 100, 255, 0.04);559}560 561.input-wrapper input {562  flex: 1;563  border: none;564  outline: none;565  background: transparent;566  font-size: 16px;567  color: #1a2b3c;568  padding: 6px 0;569  font-weight: 400;570}571 572.input-wrapper input::placeholder {573  color: #8fa1b8;574}575 576.send-btn {577  width: 36px;578  height: 36px;579  border-radius: 50%;580  background: #1a2b3c;581  border: none;582  display: flex;583  align-items: center;584  justify-content: center;585  cursor: pointer;586  transition: opacity 0.2s, transform 0.1s, background 0.2s;587  flex-shrink: 0;588}589 590.send-btn:active {591  transform: scale(0.92);592  background: #0d1824;593}594 595.send-btn svg {596  width: 18px;597  height: 18px;598  stroke: #ffffff;599  stroke-width: 2.2;600  fill: none;601}602 603.chat-messages {604  display: none;605}606 607.msg-content {608  line-height: 1.6;609  font-size: 15px;610  color: #1a2b3c;611  word-wrap: break-word;612  overflow-wrap: break-word;613}614 615.msg-content p {616  margin-bottom: 10px;617}618 619.msg-content p:last-child {620  margin-bottom: 0;621}622 623.msg-content strong {624  font-weight: 600;625  color: #0d1824;626}627 628.msg-content em {629  font-style: italic;630}631 632.msg-content a {633  color: #0066ff;634  text-decoration: none;635  border-bottom: 1px solid rgba(0, 102, 255, 0.2);636}637 638.msg-content a:hover {639  border-bottom-color: #0066ff;640}641 642.msg-content code:not(pre code) {643  background: #eef2f7;644  padding: 2px 6px;645  border-radius: 5px;646  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Fira Code', monospace;647  font-size: 13px;648  color: #d63384;649  border: 1px solid #e2e8f2;650}651 652.code-block-wrapper {653  margin: 12px 0;654  border-radius: 12px;655  overflow: hidden;656  border: 1px solid #e1e4e8;657  background: #fafbfc;658  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);659}660 661.code-header {662  display: flex;663  justify-content: space-between;664  align-items: center;665  padding: 8px 14px;666  background: #f1f3f5;667  border-bottom: 1px solid #e1e4e8;668  font-size: 12px;669  color: #6b7c93;670  font-weight: 500;671}672 673.code-header .lang-label {674  text-transform: uppercase;675  letter-spacing: 0.5px;676  font-size: 11px;677}678 679.code-header .copy-btn {680  display: flex;681  align-items: center;682  gap: 4px;683  background: transparent;684  border: none;685  color: #6b7c93;686  cursor: pointer;687  font-size: 12px;688  font-weight: 500;689  padding: 4px 8px;690  border-radius: 6px;691  transition: background 0.2s, color 0.2s;692}693 694.code-header .copy-btn:hover {695  background: #e2e8f2;696  color: #1a2b3c;697}698 699.code-header .copy-btn svg {700  width: 14px;701  height: 14px;702  stroke: currentColor;703  fill: none;704  stroke-width: 2;705}706 707.code-block-wrapper pre {708  margin: 0;709  background: #fafbfc !important;710  border: none !important;711  border-radius: 0 !important;712  overflow-x: auto;713}714 715.code-block-wrapper pre code,716.code-block-wrapper pre code[class*="language-"],717.code-block-wrapper code[class*="language-"] {718  display: block;719  background: transparent !important;720  color: #383a42;721  padding: 14px 16px !important;722  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Fira Code', 'Consolas', monospace !important;723  font-size: 13px !important;724  line-height: 1.6 !important;725  border: none !important;726  text-shadow: none !important;727  white-space: pre;728  -webkit-font-smoothing: antialiased;729}730 731.token.comment,732.token.prolog,733.token.doctype,734.token.cdata {735  color: #a0a1a7;736  font-style: italic;737}738 739.token.punctuation {740  color: #383a42;741}742 743.token.namespace {744  opacity: 0.7;745}746 747.token.property,748.token.tag,749.token.constant,750.token.symbol,751.token.deleted {752  color: #e45649;753}754 755.token.boolean,756.token.number {757  color: #986801;758}759 760.token.selector,761.token.attr-name,762.token.string,763.token.char,764.token.builtin,765.token.inserted {766  color: #50a14f;767}768 769.token.operator,770.token.entity,771.token.url,772.language-css .token.string,773.style .token.string {774  color: #383a42;775}776 777.token.atrule,778.token.attr-value,779.token.keyword {780  color: #a626a4;781}782 783.token.function,784.token.class-name {785  color: #4078f2;786}787 788.token.regex,789.token.important,790.token.variable {791  color: #e45649;792}793 794.token.important,795.token.bold {796  font-weight: bold;797}798 799.token.italic {800  font-style: italic;801}802 803.msg-content ul,804.msg-content ol {805  padding-left: 24px;806  margin: 10px 0;807}808 809.msg-content li {810  margin-bottom: 6px;811  line-height: 1.55;812}813 814.msg-content li::marker {815  color: #6b7c93;816}817 818.msg-content blockquote {819  border-left: 3px solid #cbd8e8;820  padding-left: 14px;821  margin: 10px 0;822  color: #6b7c93;823  font-style: italic;824}825 826.msg-content hr {827  border: none;828  border-top: 1px solid #e2e8f2;829  margin: 16px 0;830}831 832.msg-content .table-wrapper {833  overflow-x: auto;834  border-radius: 12px;835  margin: 12px 0;836  border: 1px solid #e2e8f2;837  background: #ffffff;838  -webkit-overflow-scrolling: touch;839}840 841.msg-content table {842  width: 100%;843  border-collapse: collapse;844  font-size: 14px;845  min-width: 100%;846}847 848.msg-content thead {849  background: #f0f4fa;850}851 852.msg-content th {853  padding: 10px 14px;854  text-align: left;855  font-weight: 600;856  color: #1a2b3c;857  border-bottom: 1px solid #e2e8f2;858  border-right: 1px solid #e2e8f2;859  white-space: nowrap;860}861 862.msg-content th:last-child {863  border-right: none;864}865 866.msg-content td {867  padding: 10px 14px;868  text-align: left;869  color: #1a2b3c;870  border-bottom: 1px solid #eef2f7;871  border-right: 1px solid #eef2f7;872}873 874.msg-content td:last-child {875  border-right: none;876}877 878.msg-content tbody tr:last-child td {879  border-bottom: none;880}881 882.msg-content tbody tr:nth-child(even) {883  background: #fafbfd;884}885 886.msg-content h1,887.msg-content h2,888.msg-content h3,889.msg-content h4,890.msg-content h5,891.msg-content h6 {892  margin: 16px 0 8px 0;893  font-weight: 600;894  line-height: 1.3;895  color: #0d1824;896}897 898.msg-content h1 {899  font-size: 1.35em;900}901 902.msg-content h2 {903  font-size: 1.2em;904}905 906.msg-content h3 {907  font-size: 1.1em;908}909 910.msg-content h4,911.msg-content h5,912.msg-content h6 {913  font-size: 1em;914}915 916.msg-content h1:first-child,917.msg-content h2:first-child,918.msg-content h3:first-child,919.msg-content h4:first-child,920.msg-content h5:first-child,921.msg-content h6:first-child {922  margin-top: 0;923}924 925.typing-indicator {926  display: flex;927  align-items: center;928  gap: 4px;929  padding: 6px 0;930}931 932.typing-indicator span {933  width: 6px;934  height: 6px;935  background: #8fa1b8;936  border-radius: 50%;937  display: inline-block;938  animation: bounce 1.4s infinite ease-in-out both;939}940 941.typing-indicator span:nth-child(1) {942  animation-delay: -0.32s;943}944 945.typing-indicator span:nth-child(2) {946  animation-delay: -0.16s;947}948 949.typing-indicator span:nth-child(3) {950  animation-delay: 0s;951}952 953@keyframes bounce {954 955  0%,956  80%,957  100% {958    transform: scale(0.6);959    opacity: 0.4;960  }961 962  40% {963    transform: scale(1);964    opacity: 1;965  }966}967 968.main-content::-webkit-scrollbar {969  width: 4px;970}971 972.main-content::-webkit-scrollbar-track {973  background: transparent;974}975 976.main-content::-webkit-scrollbar-thumb {977  background: #d9e2ef;978  border-radius: 12px;979}980 981.main-content::-webkit-scrollbar-thumb:hover {982  background: #c2cedf;983}