:root{
  --ttc-border: #e7dfff;
  --ttc-primary: #6e2cf4;
  --ttc-primary-hover: #5a1fd8;
  --ttc-text: #2e2359;
  --ttc-muted: #6a5aa8;
  --ttc-success: #15B374;
  --ttc-error: #F44336;
  --ttc-warning: #FF9800;
  --ttc-bg: #ffffff;
  --ttc-bg-secondary: #f8f9fa;
  --ttc-shadow: 0 2px 8px rgba(0,0,0,0.1);
  --ttc-radius: 12px;
  --ttc-transition: all 0.2s ease;
}

/* Wrapper - 100% width */
#ttc-chat-shortcode-mount{width:100%}
.ttc-chat{
  width:100%;
  height:500px;
  display:flex;
  flex-direction:column;
  background:var(--ttc-bg);
  border:1px solid var(--ttc-border);
  border-radius:var(--ttc-radius);
  box-shadow:var(--ttc-shadow);
  overflow:hidden;
}

/* Header */
.ttc-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--ttc-border);
  background:var(--ttc-bg-secondary);
}

.ttc-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
  border:2px solid var(--ttc-primary);
}

.ttc-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ttc-title .ttc-name{
  font-weight:600;
  color:var(--ttc-text);
  font-size:16px;
  line-height:1.2;
  margin-bottom:2px;
}

.ttc-title .ttc-sub{
  color:var(--ttc-muted);
  font-size:13px;
  display:flex;
  align-items:center;
  gap:6px;
}

.ttc-title .ttc-sub::before{
  content:'';
  width:8px;
  height:8px;
  background:var(--ttc-success);
  border-radius:50%;
  animation:ttc-pulse 2s ease-in-out infinite;
}

/* Chat log */
.ttc-log{
  flex:1 1 auto;
  overflow:auto;
  padding:20px;
  background:var(--ttc-bg);
}

/* Messages */
.ttc-msg{
  display:block;
  max-width:85%;
  padding:12px 16px;
  border-radius:18px;
  margin:12px 0;
  line-height:1.5;
  font-size:14px;
  word-break:break-word;
  border:1px solid transparent;
  position:relative;
  animation:ttc-slide-in 0.3s ease-out;
}

.ttc-bot{
  border-color:var(--ttc-border);
  background:var(--ttc-bg-secondary);
  color:var(--ttc-text);
  margin-right:auto;
  border-bottom-left-radius:6px;
}

.ttc-user{
  background:var(--ttc-primary);
  color:white;
  margin-left:auto;
  border-bottom-right-radius:6px;
  text-align:right;
}

.ttc-msg img{
  max-height:200px;
  border-radius:8px;
  border:1px solid var(--ttc-border);
  display:block;
  margin-top:8px;
}

/* Typing effect */
.ttc-caret{
  border-right:2px solid var(--ttc-primary);
  animation:ttc-caret 1s steps(1,end) infinite;
}

@keyframes ttc-caret{
  50%{border-color:transparent}
}

@keyframes ttc-slide-in{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Template chips */
.ttc-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:16px 0;
}

.ttc-chip{
  padding:8px 16px;
  border:2px solid var(--ttc-border);
  border-radius:20px;
  background:var(--ttc-bg);
  color:var(--ttc-text);
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  transition:var(--ttc-transition);
  transition-property:all;
}

.ttc-chip:hover{
  background:var(--ttc-primary);
  color:white;
  border-color:var(--ttc-primary);
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(110,44,244,0.3);
}

.ttc-chip:active{
  transform:translateY(0);
}

.ttc-chip:disabled{
  opacity:0.5;
  cursor:not-allowed;
  pointer-events:none;
}

/* Status indicators */
.ttc-status{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--ttc-muted);
  margin:16px 0;
  padding:12px 16px;
  background:var(--ttc-bg-secondary);
  border-radius:var(--ttc-radius);
  border-left:4px solid var(--ttc-primary);
}

.ttc-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--ttc-primary);
  animation:ttc-pulse 1.5s ease-in-out infinite;
}

.ttc-status .t{
  font-weight:500;
}

@keyframes ttc-pulse{
  0%{opacity:0.4}
  50%{opacity:1}
  100%{opacity:0.4}
}

/* Upload progress */
.ttc-upload-progress{
  display:flex;
  align-items:center;
  gap:10px;
  margin:16px 0;
  padding:12px 16px;
  background:var(--ttc-bg-secondary);
  border-radius:var(--ttc-radius);
  border-left:4px solid var(--ttc-warning);
}

.ttc-upload-progress .progress-bar{
  flex:1;
  height:8px;
  background:var(--ttc-border);
  border-radius:4px;
  overflow:hidden;
}

.ttc-upload-progress .progress-fill{
  height:100%;
  background:var(--ttc-warning);
  transition:width 0.3s ease;
}

/* Input area */
.ttc-input{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  border-top:1px solid var(--ttc-border);
  background:var(--ttc-bg-secondary);
}

.ttc-input.disabled{
  opacity:0.6;
  pointer-events:none;
}

.ttc-input input[type=text]{
  flex:1;
  padding:12px 18px;
  border-radius:24px;
  border:2px solid var(--ttc-border);
  background:var(--ttc-bg);
  font-size:15px;
  outline:none;
  color:var(--ttc-text);
  transition:var(--ttc-transition);
}

.ttc-input input[type=text]:focus{
  border-color:var(--ttc-primary);
  box-shadow:0 0 0 3px rgba(110,44,244,0.1);
}

.ttc-input input[type=text]:disabled{
  background:var(--ttc-bg-secondary);
  cursor:not-allowed;
}

.ttc-input input[type=text]::placeholder{
  color:var(--ttc-muted);
}

.ttc-input input[type=text][style*="display: none"]{
  display:none !important;
}

.ttc-attach{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--ttc-muted);
  cursor:pointer;
  transition:var(--ttc-transition);
  border:2px solid transparent;
}

.ttc-attach:hover:not(:disabled){
  color:var(--ttc-primary);
  border-color:var(--ttc-border);
  background:var(--ttc-bg);
}

.ttc-attach:disabled{
  opacity:0.5;
  cursor:not-allowed;
}

.ttc-attach[style*="display: none"]{
  display:none !important;
}

.ttc-attach input{
  display:none;
}

.ttc-send{
  width:44px;
  height:44px;
  border-radius:50%;
  border:none;
  background:var(--ttc-primary);
  color:white;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:var(--ttc-transition);
  font-weight:600;
}

.ttc-send:hover:not(:disabled){
  background:var(--ttc-primary-hover);
  transform:scale(1.05);
}

.ttc-send:active:not(:disabled){
  transform:scale(0.95);
}

.ttc-send:disabled{
  background:var(--ttc-muted);
  cursor:not-allowed;
  transform:none;
}

/* Login required message */
.ttc-chat-login-required{
  text-align:center;
  padding:40px 20px;
  background:var(--ttc-bg-secondary);
  border:2px dashed var(--ttc-border);
  border-radius:var(--ttc-radius);
  color:var(--ttc-muted);
  font-size:16px;
}

.ttc-chat-login-required .login-button{
  display:inline-block;
  margin-top:16px;
  padding:10px 20px;
  background:var(--ttc-primary);
  color:white;
  text-decoration:none;
  border-radius:20px;
  font-weight:500;
  transition:var(--ttc-transition);
}

.ttc-chat-login-required .login-button:hover{
  background:var(--ttc-primary-hover);
  transform:translateY(-1px);
}

/* Request limit info */
.ttc-request-limit{
  display:flex;
  align-items:center;
  gap:10px;
  margin:16px 0;
  padding:12px 16px;
  background:rgba(21,179,116,0.1);
  border-radius:var(--ttc-radius);
  border-left:4px solid var(--ttc-success);
  color:var(--ttc-success);
  font-weight:500;
}

/* Form summary */
.ttc-form-summary{
  margin:16px 0;
  padding:16px;
  background:var(--ttc-bg-secondary);
  border-radius:var(--ttc-radius);
  border:2px solid var(--ttc-border);
}

.ttc-form-summary .summary-header{
  font-weight:600;
  font-size:16px;
  color:var(--ttc-primary);
  margin-bottom:12px;
  text-align:center;
}

.ttc-form-summary .summary-content{
  margin-bottom:16px;
}

.ttc-form-summary .summary-item{
  padding:8px 0;
  border-bottom:1px solid var(--ttc-border);
  font-size:14px;
  line-height:1.4;
}

.ttc-form-summary .summary-item:last-child{
  border-bottom:none;
}

.ttc-form-summary .summary-item strong{
  color:var(--ttc-text);
  display:inline-block;
  min-width:80px;
}

.ttc-form-summary .summary-actions{
  display:flex;
  gap:12px;
  justify-content:center;
}

.ttc-form-summary .submit-btn,
.ttc-form-summary .edit-btn{
  padding:10px 20px;
  border:none;
  border-radius:20px;
  font-weight:500;
  cursor:pointer;
  transition:var(--ttc-transition);
  font-size:14px;
}

.ttc-form-summary .submit-btn{
  background:var(--ttc-primary);
  color:white;
}

.ttc-form-summary .submit-btn:hover{
  background:var(--ttc-primary-hover);
  transform:translateY(-1px);
}

.ttc-form-summary .edit-btn{
  background:var(--ttc-bg);
  color:var(--ttc-text);
  border:2px solid var(--ttc-border);
}

.ttc-form-summary .edit-btn:hover{
  background:var(--ttc-border);
  color:var(--ttc-text);
}

/* Dashboard redirect */
.ttc-dashboard-redirect{
  margin:16px 0;
  padding:16px;
  background:rgba(21,179,116,0.1);
  border-radius:var(--ttc-radius);
  border-left:4px solid var(--ttc-success);
  text-align:center;
}

.ttc-dashboard-redirect .dashboard-info{
  margin-bottom:12px;
  color:var(--ttc-success);
  font-size:14px;
  line-height:1.4;
}

.ttc-dashboard-redirect .dashboard-link{
  color:var(--ttc-success);
  text-decoration:underline;
  font-weight:500;
  word-break:break-all;
}

.ttc-dashboard-redirect .dashboard-button{
  display:inline-block;
  padding:12px 24px;
  background:var(--ttc-success);
  color:white;
  text-decoration:none;
  border-radius:24px;
  font-weight:600;
  transition:var(--ttc-transition);
  font-size:15px;
}

.ttc-dashboard-redirect .dashboard-button:hover{
  background:var(--ttc-success);
  opacity:0.9;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(21,179,116,0.3);
}

/* Skip notification option */
.ttc-skip-notification{
  display:flex;
  align-items:center;
  gap:10px;
  margin:16px 0;
  padding:12px 16px;
  background:rgba(255,152,0,0.1);
  border-radius:var(--ttc-radius);
  border-left:4px solid var(--ttc-warning);
  color:var(--ttc-warning);
}

.ttc-skip-notification button{
  background:var(--ttc-warning);
  color:white;
  border:none;
  padding:6px 12px;
  border-radius:16px;
  cursor:pointer;
  font-size:12px;
  font-weight:500;
  transition:var(--ttc-transition);
}

.ttc-skip-notification button:hover{
  background:var(--ttc-warning);
  opacity:0.8;
}

/* Responsive design */
@media (max-width:768px){
  .ttc-chat{
    height:450px;
    border-radius:0;
    border-left:none;
    border-right:none;
  }
  
  .ttc-header{
    padding:12px 16px;
  }
  
  .ttc-log{
    padding:16px;
  }
  
  .ttc-input{
    padding:12px 16px;
  }
  
  .ttc-msg{
    max-width:90%;
    font-size:13px;
    padding:10px 14px;
  }
  
  .ttc-chip{
    padding:6px 12px;
    font-size:12px;
  }
}

@media (max-width:480px){
  .ttc-chat{
    height:400px;
  }
  
  .ttc-avatar{
    width:36px;
    height:36px;
  }
  
  .ttc-title .ttc-name{
    font-size:15px;
  }
  
  .ttc-title .ttc-sub{
    font-size:12px;
  }
  
  .ttc-input input[type=text]{
    font-size:14px;
    padding:10px 16px;
  }
  
  .ttc-attach,
  .ttc-send{
    width:40px;
    height:40px;
  }
}

/* Scrollbar styling */
.ttc-log::-webkit-scrollbar{
  width:6px;
}

.ttc-log::-webkit-scrollbar-track{
  background:var(--ttc-bg-secondary);
}

.ttc-log::-webkit-scrollbar-thumb{
  background:var(--ttc-border);
  border-radius:3px;
}

.ttc-log::-webkit-scrollbar-thumb:hover{
  background:var(--ttc-muted);
}

/* Loading states */
.ttc-loading{
  opacity:0.6;
  pointer-events:none;
}

.ttc-loading::after{
  content:'...';
  animation:ttc-dots 1.5s infinite;
}

@keyframes ttc-dots{
  0%, 20%{content:'.'}
  40%{content:'..'}
  60%, 100%{content:'...'}
}

/* Success and error states */
.ttc-msg.ttc-success{
  background:rgba(21,179,116,0.1);
  border-color:var(--ttc-success);
  color:var(--ttc-success);
}

.ttc-msg.ttc-error{
  background:rgba(244,67,54,0.1);
  border-color:var(--ttc-error);
  color:var(--ttc-error);
}

.ttc-msg.ttc-warning{
  background:rgba(255,152,0,0.1);
  border-color:var(--ttc-warning);
  color:var(--ttc-warning);
}