.web-chat{
  --text-ui-size:18px;
  --height-cta:64px;
  --text-meta-size:13px;
  --surface-task:#FFFFFF;
  --text-ui-weight:400;
  --canvas:#F6F1E6;
  --paper:var(--canvas);
  --gold:#C89A3E;
  --highlight:#faf5e3;
  --cta:#3D2F20;
  --on-cta:#F5EFE4;
  --secondary-button:#E9E4D9;
  --on-secondary-button:var(--ink);
  --radius-button:9999px;
  --surface-overlay:#fffefaf2;
  --scrim:#24231f66;
  --surface:#fffefa;
  --surface-soft:#f6f5f0;
  --ink:#1F1A14;
  --muted:#85837b;
  --accent:var(--gold);
  --accent-soft:var(--highlight);
  --line:#e9e7df;
  --success:#52654b;
  --danger:#8b4435;
  --danger-soft:#f5e9e4;
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-heading:'Cormorant Garamond',Georgia,serif;
  --font-heading-weight:600;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:40px;
  --radius-sm:12px;
  --radius-md:18px;
  --radius-lg:26px;
  --page-gutter:24px;
  --app-width:480px;
  --padre-top-offset:0px;
  font:var(--text-ui-weight) var(--text-ui-size)/1.6 var(--font-ui);
  color:var(--ink);
  background:var(--canvas);
  color-scheme:light;
  -webkit-text-size-adjust:100%;
display:flex;flex-direction:column;height:min(740px,80dvh);min-height:480px;border-radius:12px;overflow:hidden;color:var(--ink);background:var(--canvas)}
.chat-header {display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:18px var(--page-gutter);border-bottom:1px solid var(--line);background:var(--canvas);flex-shrink:0}
.chat-header h3 {font-size:28px;line-height:1.15;white-space:normal}
.chat-status {display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 10px;margin-top:5px;color:var(--muted);font:12px/1.4 var(--font-ui)}
.chat-online {display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.online-dot {width:5px;height:5px;flex-shrink:0;border-radius:50%;background:var(--success)}
.chat-quota {font-size:12px}
.chat-log {flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:12px 18px 24px;background:var(--canvas)}
.message {display:flex;align-items:flex-end;gap:8px;margin:22px 0}
.message.user {justify-content:flex-end}
.bubble {max-width:calc(100% - 38px);padding:17px 18px;border:1px solid var(--line);border-radius:22px;background:var(--surface)}
.bubble p {white-space:pre-wrap;font:var(--text-ui-weight) var(--text-ui-size)/1.65 var(--font-ui);overflow-wrap:anywhere}
.user .bubble {max-width:88%;border-color:transparent;border-radius:22px;background:var(--surface-soft)}
.quick-question-bubble {width:calc(100% - 38px)}
.quick-prompts {margin-top:12px}
.prompt-button {display:flex;align-items:center;gap:12px;width:100%;padding:14px 0;border:0;border-radius:0;background:transparent;color:var(--ink);text-align:left;font:var(--text-ui-weight) var(--text-ui-size)/1.55 var(--font-ui)}
.prompt-button+.prompt-button {border-top:1px solid var(--line)}
.prompt-icon {display:flex;align-items:center;justify-content:center;flex-shrink:0;width:24px;height:30px;color:var(--accent)}
.prompt-icon svg {width:22px;height:22px}
.composer {display:flex;align-items:flex-end;gap:10px;flex-shrink:0;padding:12px 18px 16px;background:var(--canvas)}
.composer textarea {flex:1;min-width:0;resize:none;height:50px;min-height:50px;max-height:146px;padding:12px 16px;border:1px solid var(--line);border-radius:22px;background:var(--surface);font:var(--text-ui-weight) var(--text-ui-size)/24px var(--font-ui);overflow-y:hidden;overscroll-behavior:contain;scrollbar-width:thin}
.composer .send {display:flex;align-items:center;justify-content:center;flex:0 0 48px;align-self:flex-end;width:48px;height:48px;padding:12px;border-radius:50%;background:var(--cta);color:var(--on-cta)}
.send svg {width:21px;height:21px}
.source-button {padding:8px 0;background:transparent;color:var(--accent);font-size:var(--text-ui-size);font-weight:var(--text-ui-weight)}
.typing-bubble {display:flex;align-items:center;gap:10px;color:var(--muted);font:13px/1.5 var(--font-ui)}
.typing-dots {display:inline-flex;gap:3px;color:var(--accent)}
.typing-dots span {animation:typing-opacity 1.25s ease-in-out infinite;opacity:.25}
.typing-dots span:nth-child(2) {animation-delay:.18s}
.typing-dots span:nth-child(3) {animation-delay:.36s}
@keyframes typing-opacity {0%,70%,100%{opacity:.25}35%{opacity:1}}
.ask-limit-state {margin:24px 0;padding:22px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);font:var(--text-ui-weight) var(--text-ui-size)/1.6 var(--font-ui)}
.ask-limit-state button {margin:14px 8px 0 0;padding:11px 14px;font-size:var(--text-ui-size);font-weight:var(--text-ui-weight)}
.ask-limit-close {background:transparent;color:var(--muted)}

.web-chat .avatar{display:block;flex-shrink:0;width:var(--size,30px);height:var(--size,30px);border-radius:50%;background:url('https://app.pdrpdr.com/shared/assets/father-peter-userpic.png?v=avatar-fix-20261005') center/cover}.web-chat p{margin:0}.web-chat button{cursor:pointer;border:0}.web-chat button:disabled{opacity:.45;cursor:default}.web-chat .telegram-continue{margin:24px 0;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:22px}.web-chat .telegram-continue h3{margin:0 0 12px}.web-chat .telegram-continue a{display:inline-block;margin-top:16px;border-radius:99px;padding:12px 18px;background:var(--cta);color:var(--on-cta)}.web-chat .chat-error{font:14px var(--font-ui);padding:8px 18px;color:var(--danger)}@media(prefers-reduced-motion:reduce){.web-chat .typing-dots span{animation:none;opacity:1}}
/* The public conversation is a viewport, not a portal card. */
html:has(body.web-chat-mode){height:100%;overflow:hidden}
body.portal-page.web-chat-mode{height:100dvh;min-height:0;margin:0;overflow:hidden;display:flex;flex-direction:column;background:#F7F1E5}
.web-chat-mode .chat-topbar{display:flex;align-items:center;justify-content:space-between;flex:0 0 auto;padding:22px 36px}
.web-chat-mode .chat-brand{display:inline-flex;align-items:center}
.web-chat-mode .chat-brand img{display:block;width:auto;height:52px;max-width:240px;object-fit:contain}
.web-chat-mode .chat-close{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#3D2F20;font:36px/1 system-ui;cursor:pointer}
.web-chat-mode .chat-close:hover{background:#e9e4d9}
.web-chat-mode .chat-close:focus-visible{outline:2px solid #C89A3E;outline-offset:3px}
.web-chat-mode .chat-column{display:flex;flex:1;min-height:0;width:min(100%,780px);margin:0 auto}
.web-chat-mode .web-chat{--canvas:#F7F1E5;width:100%;height:100%;min-height:0;border:0;border-radius:0}
.web-chat-mode .chat-header h3{margin:0;font-family:var(--font-heading);font-weight:var(--font-heading-weight)}
.web-chat-mode .chat-log{scrollbar-width:thin}
.web-chat-mode .telegram-continue{margin:24px 0 24px 38px;padding:0;border:0;border-radius:0;background:transparent;font:var(--text-ui-weight) var(--text-ui-size)/1.65 var(--font-ui);color:var(--ink)}
.web-chat-mode .telegram-continue a{display:inline;margin:0;padding:0;border-radius:0;background:transparent;color:#795723;text-decoration:underline;text-underline-offset:3px}
.web-chat-mode .composer{padding-bottom:max(24px,env(safe-area-inset-bottom))}
@media(max-width:700px){
 .web-chat-mode .chat-topbar{padding:12px 18px}
 .web-chat-mode .chat-brand img{height:38px;max-width:190px}
 .web-chat-mode .chat-column{max-width:480px}
 .web-chat-mode .composer{padding-bottom:max(16px,env(safe-area-inset-bottom))}
}