#pfm-chat {
  --pfm-bg: #ffffff;
  --pfm-surface: #ffffff;
  --pfm-hover: #f7f7f5;
  --pfm-border: rgba(0, 0, 0, .1);
  --pfm-border-m: rgba(0, 0, 0, .15);
  --pfm-t1: #1a1a1a;
  --pfm-t2: #555;
  --pfm-t3: #999;
  --pfm-accent: #012c53;
  --pfm-accent-d: #00101d;
  --pfm-r-sm: 8px;
  --pfm-r-md: 12px;
  --pfm-r-lg: 16px;
  --pfm-font: 'Inter', system-ui, sans-serif;

  display: flex;
  flex-direction: column;
  height: 80dvh;
  overflow: hidden;
  background: var(--pfm-bg);
  font-family: var(--pfm-font);
  color: var(--pfm-t1);
  -webkit-font-smoothing: antialiased;
}

 #pfm-chat * {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }

 /* Messages */
 #pfm-chat .pfm-messages {
   flex: 1;
   overflow-y: auto;
   padding: 28px 0 12px;
   scroll-behavior: smooth;
 }

 #pfm-chat .pfm-messages::-webkit-scrollbar {
   width: 4px;
 }

 #pfm-chat .pfm-messages::-webkit-scrollbar-thumb {
   background: var(--pfm-border-m);
   border-radius: 4px;
 }

 /* Empty state */
 #pfm-chat .pfm-empty {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   gap: 12px;
   padding-bottom: 60px;
 }

 #pfm-chat .pfm-empty-icon {
   width: 48px;
   height: 48px;
   border-radius: 13px;
   background: var(--pfm-accent);
   display: flex;
   align-items: center;
   justify-content: center;
 }

 #pfm-chat .pfm-empty-icon svg {
   width: 24px;
   height: 24px;
   stroke: #fff;
   fill: none;
   stroke-width: 1.75;
   stroke-linecap: round;
   stroke-linejoin: round;
 }

 #pfm-chat .pfm-empty-title {
   font-size: 20px;
   font-weight: 600;
   color: var(--pfm-t1);
 }

 #pfm-chat .pfm-empty-sub {
   font-size: 14px;
   color: var(--pfm-t2);
   text-align: center;
   max-width: 340px;
   line-height: 1.6;
 }

 #pfm-chat .pfm-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   justify-content: center;
   max-width: 480px;
   margin-top: 6px;
 }

 #pfm-chat .pfm-chip {
   padding: 7px 13px;
   border-radius: 999px;
   border: 1px solid var(--pfm-border-m);
   background: var(--pfm-surface);
   font-size: 13px;
   color: var(--pfm-t2);
   cursor: pointer;
   font-family: var(--pfm-font);
   transition: background .15s, color .15s;
 }

 #pfm-chat .pfm-chip:hover {
   background: var(--pfm-hover);
   color: var(--pfm-t1);
 }

 /* Message row */
 #pfm-chat .pfm-row {
   display: flex;
   gap: 12px;
   padding: 10px 20px;
   max-width: 720px;
   margin: 0 auto;
   width: 100%;
   animation: pfmFadeUp .2s ease;
   border-radius: var(--pfm-r-lg);
 }

 @keyframes pfmFadeUp {
   from {
     opacity: 0;
     transform: translateY(5px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 #pfm-chat .pfm-row:hover {
   background: var(--pfm-hover);
 }

 #pfm-chat .pfm-av {
   width: 28px;
   height: 28px;
   border-radius: 7px;
   font-size: 11px;
   font-weight: 600;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   margin-top: 2px;
   letter-spacing: .02em;
 }

 #pfm-chat .pfm-av-bot {
   background: #dbeafe;
   color: #1d4ed8;
 }

 #pfm-chat .pfm-av-user {
   background: #f0fdf4;
   color: #166534;
 }

 #pfm-chat .pfm-body {
   flex: 1;
   min-width: 0;
 }

 #pfm-chat .pfm-sender {
   font-size: 12px;
   font-weight: 600;
   color: var(--pfm-t1);
   margin-bottom: 3px;
 }

 #pfm-chat .pfm-text {
   font-size: 14px;
   line-height: 1.7;
   color: var(--pfm-t1);
   word-wrap: break-word;
 }

 #pfm-chat .pfm-text p {
   margin: 0 0 8px;
 }

 #pfm-chat .pfm-text p:last-child {
   margin-bottom: 0;
 }

 #pfm-chat .pfm-text ul,
 #pfm-chat .pfm-text ol {
   margin: 5px 0 8px;
   padding-left: 18px;
 }

 #pfm-chat .pfm-text li {
   margin-bottom: 3px;
 }

 #pfm-chat .pfm-text strong {
   font-weight: 600;
 }

 #pfm-chat .pfm-text em {
   font-style: italic;
 }

 #pfm-chat .pfm-text code {
   background: #f1f5f9;
   padding: 2px 5px;
   border-radius: 4px;
   font-size: 13px;
 }

 #pfm-chat .pfm-text pre {
   background: #f1f5f9;
   padding: 12px 14px;
   border-radius: var(--pfm-r-md);
   overflow-x: auto;
   margin: 8px 0;
 }

 #pfm-chat .pfm-text pre code {
   background: none;
   padding: 0;
 }

 #pfm-chat .pfm-text a {
   color: var(--pfm-accent);
   text-decoration: underline;
 }

 #pfm-chat .pfm-text blockquote {
   border-left: 3px solid var(--pfm-border-m);
   padding-left: 10px;
   color: var(--pfm-t2);
   margin: 6px 0;
 }

 /* Typing */
 #pfm-chat .pfm-dots {
   display: inline-flex;
   gap: 4px;
   align-items: center;
   padding: 3px 0;
 }

 #pfm-chat .pfm-dots span {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--pfm-t3);
   animation: pfmBounce 1.2s infinite both;
 }

 #pfm-chat .pfm-dots span:nth-child(2) {
   animation-delay: .2s;
 }

 #pfm-chat .pfm-dots span:nth-child(3) {
   animation-delay: .4s;
 }

 @keyframes pfmBounce {

   0%,
   80%,
   100% {
     transform: scale(.7);
     opacity: .4;
   }

   40% {
     transform: scale(1);
     opacity: 1;
   }
 }

 /* Input */
 #pfm-chat .pfm-footer {
   padding: 12px 20px 16px;
   max-width: 720px;
   margin: 0 auto 50px;
   width: 100%;
 }

 #pfm-chat .pfm-input-box {
   display: flex;
   align-items: flex-end;
   gap: 8px;
   background: var(--pfm-surface);
   border: 1px solid var(--pfm-border-m);
   border-radius: var(--pfm-r-lg);
   padding: 10px 12px;
   transition: border-color .2s, box-shadow .2s;
 }

 #pfm-chat .pfm-input-box:focus-within {
   border-color: #93b4d4;
   box-shadow: 0 0 0 3px rgba(1, 44, 83, .07);
 }

 #pfm-chat textarea.pfm-input {
   flex: 1;
   border: none;
   background: none;
   outline: none;
   font-family: var(--pfm-font);
   font-size: 14px;
   color: var(--pfm-t1);
   resize: none;
   max-height: 140px;
   line-height: 1.55;
 }

 #pfm-chat textarea.pfm-input::placeholder {
   color: var(--pfm-t3);
 }

 #pfm-chat .pfm-send {
   width: 32px;
   height: 32px;
   border-radius: var(--pfm-r-sm);
   border: none;
   background: var(--pfm-accent);
   cursor: pointer;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background .15s, transform .1s;
 }

 #pfm-chat .pfm-send:hover {
   background: var(--pfm-accent-d);
 }

 #pfm-chat .pfm-send:active {
   transform: scale(.94);
 }

 #pfm-chat .pfm-send:disabled {
   background: #ccc;
   cursor: not-allowed;
 }

 #pfm-chat .pfm-send svg {
   width: 15px;
   height: 15px;
   stroke: #fff;
   fill: none;
   stroke-width: 2;
   stroke-linecap: round;
   stroke-linejoin: round;
 }

 #pfm-chat .pfm-hint {
   font-size: 11px;
   color: var(--pfm-t3);
   text-align: center;
   margin-top: 6px;
 }

 @media (max-width: 600px) {
   #pfm-chat .pfm-row {
     padding: 8px 12px;
   }

   #pfm-chat .pfm-footer {
     padding: 10px 12px 14px;
   }
 }