*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } 
.c3-container { background: #ffffff; padding: 40px 24px; } 
.c3-section { width: 100%; max-width: 1440px; margin: 0 auto; } 
/* gradient border: white fill on padding-box, gradient shows through the transparent border */
.c3-search-wrap {  position: relative;
  border: 2px solid transparent;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.6); display: flex; align-items: center; gap: 12px; padding: 9px 14px; margin: 15px 0px 25px; cursor: text;} 
.c3-search-wrap::before {
  content: "";
  position: absolute;
  inset: -2px;
  padding: 2px;                 /* border thickness */
  border-radius: inherit;       /* follows the 24px above */
  background: linear-gradient(90deg, #35C7C7 0%, #A6DDB6 28%, #F5EBAA 55%, #E9D5D8 78%, #D9B9F7 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

  .c3-search-wrap svg { flex-shrink: 0; width: 20px; height: 20px; } 
.c3-search-wrap input[type=text] , .c3-search-wrap input[type=text]:focus-visible { outline:none !important; border: none !important; flex: 1; outline: none; font-family: "TT Common Light", Sans-serif !important; font-size: 18px; line-height: 22px; font-weight: 400; color: #000000; background: transparent; padding: 0px;} 
.c3-search-wrap input[type=text]::placeholder { color: #999999; } 
.c3-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0px 0px 0px; overflow: hidden; }
.c3-item { border: 1px solid #EBEBEB;  transition: background-color 0.3s ease, transform 0.3s ease; border-radius: 8px; margin: 5px; padding: 15px; background: rgba(255, 255, 255, 0.6); font-family: "TT Common Regular", Sans-serif !important; font-size: 18px; font-weight: 400; color: #000000; line-height: 22px; min-height: 70px; display: flex; align-items: center; cursor: pointer; text-align: left; } 
.c3-item:hover { background-color: #1111120a;  transform: scale(1.02);} 
.c3-item:first-child, .c3-item:nth-child(4){margin-left:0px;}
.c3-item:last-child, .c3-item:nth-child(3){margin-right:0px;}
.c3-section  .answer-content ul {padding: 0px 0px 0px 45px;}
.c3-section .answer-content ul li ul li {list-style: none;}
.c3-section .answer-content li ,.c3-section  .answer-content p , .c3-section .answer-content span , .c3-section  .answer-content p span {font-family: "TT Common Light", Sans-serif !important; font-size: 20px; font-weight: 400; color: #000000; line-height: 24px;}
.c3-section .answer-content .heading,.c3-section .answer-content h2, .c3-section .answer-content h4, .c3-section .answer-content h5, .c3-section .answer-content h3, .c3-section .answer-content .heading span {font-family: "TT Common Regular", Sans-serif !important; font-size: 24px;  color: #000000; line-height: 28px;}
.c3-section .question-for-answer { margin: 0px 0px 20px; font-family: "TT Common Regular", Sans-serif !important; font-size: 24px;  color: #000000; line-height: 28px;}
.c3-section .ai-summary-heading { margin: 0px 0px 20px; font-family: "TT Common Bold", Sans-serif !important; font-size: 22px; font-weight: 600; color: #000000; line-height: 26px;}
.c3-section .answer-content li{margin:0px 0px 14px;}
.c3-button{ display: none; align-items: center; padding: 10px 11px; border: none; border-radius: 50%; background: linear-gradient(180deg, rgba(34, 102, 240, 0.95) 0%, rgba(38, 191, 201, 0.95) 80%);}
.c3-button svg{fill:#ffffff;}
.new-chat-section{width: 100%; display: flex; justify-content: flex-end;}
.c3-new-chat{background:transparent !important;display: flex; flex-direction: row; gap: 5px; padding: 6px 9px; margin: 6px 0px 0px; border: none; color: #000000; font-family: "TT Common Medium", Sans-serif !important; font-size: 18px; font-weight: 400; line-height: 22px;}
.c3-new-chat:hover{color: #333333;}
.c3-section .chat-typing{margin:0px 0px 15px;}
.c3-section .answer-message{margin:0px 0px 0px;}
.c3-search-wrap:has(input[type="text"]:focus-visible),
.c3-search-wrap:has(input[type="text"]:focus) {  border-color: transparent; box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.35);}
.skeleton-bar { height: 20px; background: #e8e8e8; overflow: hidden; position: relative; margin: 0px 0px 10px;}
.skeleton-bar::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100% ); animation: sweep 1.5s ease-in-out infinite; transform: translateX(-100%); }
@keyframes sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.skeleton-bar.full   { width: 100%; }
.skeleton-bar.medium { width: 70%; }
.skeleton-bar.small  { width: 42%; }
.c3-search-wrap input:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none;}
.c3-button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none;}
.c3-search-wrap:has(input:disabled) { opacity: 0.6; cursor: not-allowed;}
.c3-section .message-container{transition: height 0.5s ease}
.question-for-answer {position: relative !important;padding-right: 90px !important;}
.zifo-action-btns {position: absolute !important;top: 50% !important;right: 0 !important;transform: translateY(-50%) !important;display: flex !important;align-items: center !important;z-index: 10;visibility: hidden;opacity: 0;transition: opacity 0.3s ease;}
.chatbot-heading{color:#1C2046;font-family:"TT Common Bold", Sans-serif;font-size:40px;line-height:46px;margin:0px;text-align: center;}
.chatbot-subheading{color:#00051F;font-family:"TT Common Bold", Sans-serif;font-size:30px;line-height:36px;margin:10px 0px;text-align: center;}
.ai-chatbot-container { background-image: url("https://cdn.zifo.com/2026/10/ai-chatbot-home-page-bg-image.webp");background-size: cover;background-position: center center;background-repeat: no-repeat;background-attachment: scroll;}


/* ← THIS WAS MISSING */
.zifo-action-btns--visible {
  visibility: visible !important;
  opacity: 1 !important;
}
.zifo-icon-btn{border:unset!important;padding: 0px 8px !important;}
.c3-section .answer-content, .c3-section .answer-message { white-space: normal; word-spacing: normal; overflow-wrap: anywhere; overflow-x: hidden; max-width: 100%; } 
.c3-section .answer-content a { word-break: break-word; } 
.c3-section .answer-content pre, .c3-section .answer-content code { white-space: pre-wrap; word-break: break-word; } 
.c3-section .answer-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; } 
.c3-section .zifo-line-hidden { display: none !important; } 
/* answer box border/background only once a response is shown (empty by default and after "New chat") */
#c3-answer { background-color: transparent; border: 0; padding: 0; }
#c3-answer:has(.conversation-history:not(:empty)) { background-color: rgba(255, 255, 255, 0.6); border: 1px solid #EBEBEB; border-radius: 8px; padding: 20px;margin:30px 0px 30px; }
.c3-section .zifo-line-in { animation: zifoLineIn .3s ease-out; } 
@keyframes zifoLineIn { from { opacity: 0; transform: translateY(4px); } to   { opacity: 1; transform: none; } }  
.c3-section.zifo-revealing .c3-follow-up-grid, .c3-section.zifo-revealing .c3-lead-form-wrap, .c3-section.zifo-revealing .zifo-action-btns { display: none !important; }


@media screen and (min-width: 1500px) {
    .c3-section {padding: 0px 60px; }
}
@media screen and (max-width: 1024px) {
.chatbot-heading{font-size:30px;line-height:36px;}
}

@media screen and (max-width: 768px) {
    .c3-grid { grid-template-columns: repeat(2, 1fr); } 
    /* .c3-section{ width: 80%;} */
    .c3-item:first-child, .c3-item:nth-child(4){margin-left:5px;}
    .c3-item:last-child, .c3-item:nth-child(3){margin-right:5px;}
    .c3-search-wrap input {font-size: 16px; line-height: 20px;}
    .c3-item {font-size: 16px; line-height: 18px;}
    .c3-container{padding: 30px 14px;}
    .chatbot-heading{font-size:28px;line-height:24px;}
    .c3-section .answer-content .heading , .c3-section .answer-content .heading span {font-size: 22px; line-height: 26px;}
    .c3-section .question-for-answer {font-size: 22px; line-height: 26px;}
    .c3-section .ai-summary-heading { font-size: 20px; line-height: 24px;}
    .c3-section .answer-content li ,.c3-section  .answer-content p , .c3-section .answer-content span , .c3-section  .answer-content p span {font-size: 18px; line-height: 22px;}
}
@media screen and (max-width: 767px) {
      .c3-button {display: flex;display: block!important;background: unset;}
}
@media screen and (max-width: 480px) {
    .c3-section{ width: 100%;}
    .c3-grid { grid-template-columns: 1fr; } 
    .c3-search-wrap input {font-size: 15px; line-height: 18px;}
    .c3-section .answer-content .heading , .c3-section .answer-content .heading span {font-size: 16px; line-height: 20px;}
    .c3-section .question-for-answer {font-size: 20px; line-height: 24px;}
    .c3-section .ai-summary-heading { font-size: 18px; line-height: 22px;}
    .c3-section .answer-content li ,.c3-section  .answer-content p , .c3-section .answer-content span , .c3-section  .answer-content p span {font-size: 16px; line-height: 20px;}
    .elementor-shortcode .c3-section { padding: 0 !important; } 
    .c3-search-wrap input[type="text"]{padding: 5px !important;}
}