/* ChatGPT-style shell. The empty state is a verse and the question box. */
#view-chat{
  --gpt-ink:#0d0d0d;
  --gpt-muted:#8f8f8f;
  --gpt-side:#fff;
  --gpt-hover:#ececec;
  --gpt-line:rgba(0,0,0,.08);
  --gpt-blue:var(--teal);
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  background:#fff;
  color:var(--gpt-ink);
}
#view-chat .chat-shell{background:#fff}
#view-chat .chat-aurora{display:none !important}
#view-chat .chat-main{background:#fff}
#view-chat .chat-sb{
  background:var(--gpt-side);
  border-right:1px solid rgba(0,0,0,.08);
}
@media(min-width:681px){
  #view-chat{--sb-w:280px}
  #view-chat .chat-tb-menu-btn{display:none}
  #view-chat .chat-shell.sb-collapsed .chat-tb-menu-btn{display:flex}
  #view-chat #btn-sb-close{display:none}
}
#view-chat .chat-sb-head{
  border-bottom:none;
  background:transparent;
  padding:12px 12px 4px 14px;
}
#view-chat .chat-brand-mark{display:none}
#view-chat .chat-brand{
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--gpt-ink);
}
#view-chat .sb-head-actions .btn-icon,
#view-chat .sb-head-actions .btn-sb-search{
  width:32px;height:32px;border:none;background:transparent;
  border-radius:8px;color:#5d5d5d;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
}
#view-chat .sb-head-actions .btn-icon svg,
#view-chat .sb-head-actions .btn-sb-search svg{width:18px;height:18px}
#view-chat .sb-head-actions .btn-icon:hover,
#view-chat .sb-head-actions .btn-sb-search:hover{background:var(--gpt-hover);color:var(--gpt-ink)}
#view-chat .chat-sb-body{padding:10px 12px 16px}
#view-chat .sb-top-row{margin:0 0 4px}
#view-chat .btn-new-chat{
  width:100%;flex:none;justify-content:flex-start;
  margin:0;padding:12px 12px;min-height:0;border:none;border-radius:10px;
  background:transparent;color:var(--gpt-ink);
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:18px;font-weight:600;
  box-shadow:none;transform:none;
}
#view-chat .btn-new-chat:hover{
  background:var(--gpt-hover);color:var(--gpt-ink);
  border-color:transparent;transform:none;box-shadow:none;
}
#view-chat .sb-sect-label{
  text-transform:none;letter-spacing:0;
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:15px;font-weight:600;color:var(--gpt-muted);
  padding:20px 12px 8px;margin:0;
}
#view-chat .sb-hist{scrollbar-width:thin;scrollbar-color:transparent transparent}
#view-chat .sb-hist:hover,#view-chat .sb-hist.is-scrolling{scrollbar-color:rgba(0,0,0,.28) transparent}
#view-chat .sb-hist::-webkit-scrollbar-thumb{background:transparent}
#view-chat .sb-hist:hover::-webkit-scrollbar-thumb,
#view-chat .sb-hist.is-scrolling::-webkit-scrollbar-thumb{background:rgba(0,0,0,.28)}
#view-chat .hist-title{padding-right:8px;text-overflow:clip}
#view-chat .hist-title.is-renaming{padding-right:0}
#view-chat .chat-rename-input{
  width:100%;box-sizing:border-box;display:block;
  border:1px solid rgba(0,0,0,.18);border-radius:8px;
  background:#fff;color:var(--gpt-ink);
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:15px;font-weight:600;line-height:1.3;
  padding:4px 8px;margin:0;outline:none;
}
#view-chat .tb-rename-input{
  flex:0 0 auto;width:calc(32ch + 18px);max-width:100%;min-width:0;
  font-size:18px;box-sizing:border-box;text-align:left;
  pointer-events:auto;
}
[data-dark="1"] #view-chat .chat-rename-input{background:#2a2a2a;color:#ececec;border-color:rgba(255,255,255,.16)}
#view-chat .hist-item{
  border:none;border-bottom:none;border-radius:10px;
  padding:12px 12px;margin:3px 0;min-height:0;
  font-size:17px;line-height:1.4;color:var(--gpt-ink);
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
}
#view-chat .hist-item svg{width:16px;height:16px;opacity:.7}
#view-chat .hist-item{position:relative}
#view-chat .hist-item:hover{background:var(--gpt-hover);color:var(--gpt-ink)}
#view-chat .hist-item.active{
  background:#e6e6e6;color:var(--gpt-ink);font-weight:500;
}
#view-chat .hist-title{padding-right:8px}
#view-chat .hist-actions{
  position:absolute;right:4px;top:0;bottom:0;margin:0;
  display:flex;align-items:center;
  opacity:0;pointer-events:none;
  padding-left:28px;
  background:linear-gradient(90deg, rgba(255,255,255,0), #fff 42%);
}
#view-chat .hist-item:hover .hist-actions{
  opacity:1;pointer-events:auto;
  background:linear-gradient(90deg, rgba(236,236,236,0), #ececec 42%);
}
#view-chat .hist-item.active:hover .hist-actions{
  opacity:1;pointer-events:auto;
  background:linear-gradient(90deg, rgba(230,230,230,0), #e6e6e6 42%);
}
#view-chat .hist-more{opacity:1;color:#5d5d5d}
#view-chat .chat-sb-foot{
  border-top:1px solid rgba(0,0,0,.08);background:transparent;
  padding:8px;gap:0;
  align-items:stretch;
}
#view-chat .sb-foot-legal{display:none}
#view-chat .sb-foot-auth{width:100%;display:flex}
#view-chat .sb-auth-signin{
  justify-content:center;width:100%;margin:0;gap:8px;
  padding:10px 12px;border:none;border-radius:10px;
  background:transparent;color:var(--gpt-ink);
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:15px;font-weight:600;
  box-shadow:none;
}
#view-chat .sb-auth-signin:hover{background:var(--gpt-hover);filter:none;box-shadow:none}
#view-chat .sb-auth-signin svg{
  width:22px;height:22px;padding:3px;border-radius:50%;
  background:#fff;color:#6b6b6b;stroke:#6b6b6b;
  border:1px solid #e6e6e6;box-sizing:border-box;opacity:1;
}
#view-chat .sb-auth-signed{width:100%;padding:2px 4px;gap:6px;justify-content:center}
#view-chat .sb-auth-who{gap:8px;padding:2px 6px;flex:0 1 auto;justify-content:center}
#view-chat .sb-auth-avatar{width:22px;height:22px;background:#fff;border:1px solid #e6e6e6}
#view-chat .sb-auth-avatar.fallback{font-size:12px;color:#5d5d5d;background:#fff}
#view-chat .sb-auth-name{
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:14px;font-weight:600;
}
#view-chat .sb-auth-out{
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:13px;padding:4px 8px;
}
#view-chat .chat-topbar{
  min-height:56px;height:56px;padding:0 12px;
  border-bottom:none;background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  z-index:20;
}
#view-chat .chat-tb-center{z-index:3}
#view-chat .chat-tb-center .mode-pill{
  background:#ececec;border:none;border-radius:999px;
  padding:3px;gap:0;box-shadow:none;
}
#view-chat .chat-tb-center .mode-opt{
  min-width:84px;padding:7px 18px;border-radius:999px;
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:17px;font-weight:600;color:#5d5d5d;
  background:transparent;box-shadow:none;
}
#view-chat .chat-tb-center .mode-opt:hover:not(.active){background:transparent;color:var(--gpt-ink)}
#view-chat .mode-opt.active,
#view-chat .chat-tb-center .mode-opt.active,
#view-chat .chat-tb-center .mode-opt.active[data-mode="muslim"],
#view-chat .chat-tb-center .mode-opt.active[data-mode="non_muslim"]{
  background:#fff;color:var(--gpt-ink);
  box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px rgba(0,0,0,.04);
}
#view-chat:not(:has(.msg-user)) .chat-tb-acts{visibility:hidden}
#view-chat:not(:has(.msg-user)) .chat-tb-title-btn{display:none !important}
#view-chat .chat-tb-left{min-width:0;flex:1;gap:8px;max-width:calc(50% - 130px);pointer-events:none}
#view-chat #btn-sb-toggle{pointer-events:auto}
#view-chat .chat-tb-title-btn{
  display:block;position:static;width:auto;height:auto;max-width:100%;
  margin:0;padding:4px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  clip:auto;border:none;background:none;cursor:pointer;pointer-events:auto;
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:18px;font-weight:600;color:var(--gpt-ink);text-align:left;
}
#view-chat .chat-tb-title-btn:hover{background:var(--gpt-hover);color:var(--gpt-ink)}
#view-chat .tb-btn{border-radius:8px;color:#5d5d5d}
#view-chat .tb-btn:hover{background:var(--gpt-hover);color:var(--gpt-ink)}
#view-chat .tb-share{width:auto;height:34px;gap:6px;padding:0 10px;font-size:16px;font-weight:600;color:var(--gpt-ink)}
#view-chat .tb-more-btn{width:34px;font-size:22px;line-height:1;letter-spacing:1px;color:#5d5d5d}
#view-chat .tb-share svg{width:16px;height:16px}
#view-chat .tb-more{position:relative}
#view-chat .tb-more-menu{
  position:absolute;right:0;top:40px;z-index:40;min-width:180px;
  padding:6px;border-radius:12px;background:#fff;
  border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 24px rgba(0,0,0,.08);
}
#view-chat .tb-more-menu .tb-btn{
  width:100%;height:auto;justify-content:flex-start;padding:8px 10px;
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:16px;font-weight:600;color:var(--gpt-ink);
}

#view-chat:not(:has(.msg-user)):not(:has(.msg-asst)) .chat-body{
  flex:1 1 0;min-height:0;
  display:flex;flex-direction:column;justify-content:flex-end;
  overflow:auto;
}
#view-chat:not(:has(.msg-user)):not(:has(.msg-asst)) .msgs{
  min-height:0 !important;height:auto;flex:0 0 auto;
  width:min(720px, calc(100% - 40px));max-width:720px;margin:0 auto;
  padding:0;gap:0;
}
#view-chat .chat-welcome{
  min-height:0 !important;
  padding:0 0 22px !important;
  gap:0;justify-content:flex-end;
}
#view-chat .chat-wlc-mark{display:none !important}
#view-chat .chat-wlc-hero{max-width:none}
#view-chat .chat-wlc-tagline,
#view-chat .gpt-verse{
  margin:0;padding:0;max-width:none;
  font-weight:400;letter-spacing:normal;text-transform:none;
  color:var(--gpt-ink);line-height:1.25;
}
#view-chat .chat-wlc-tagline::after{display:none !important;content:none !important}
#view-chat .gpt-verse-en{
  display:block;
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:32px;font-weight:500;letter-spacing:-.02em;
  line-height:1.25;color:var(--gpt-ink);
}
#view-chat .gpt-verse-ar{
  display:block;margin-top:10px;
  font-family:Amiri,"Traditional Arabic","Arabic Typesetting",serif;
  font-size:28px;font-weight:400;line-height:1.7;
  color:var(--gpt-ink);direction:rtl;
}
#view-chat .gpt-verse-cite{
  display:block;margin-top:2px;
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:13px;font-weight:400;color:var(--gpt-muted);
}
/* Under each page (About, FAQ, Privacy, ...): the other pages. */
#view-chat .legal-more{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  margin-top:32px;padding-top:16px;border-top:1px solid var(--gpt-line);
  font-size:15px;
}
#view-chat .legal-more-label{color:var(--gpt-muted);flex-basis:100%}
#view-chat .legal-more a{color:var(--gpt-blue);text-decoration:none}
#view-chat .legal-more a:hover{text-decoration:underline}
#view-chat:not(:has(.msg-user)):not(:has(.msg-asst)) .chat-inp-area{
  flex:1 1 0;min-height:0;
  display:flex;flex-direction:column;justify-content:flex-start;
  padding:0 20px 28px;background:transparent;border:none;
}
#view-chat .chat-inp-form{width:min(720px, calc(100% - 8px));max-width:720px;margin-left:auto;margin-right:auto}
#view-chat:has(.msg-user) .msgs,
#view-chat:has(.msg-asst) .msgs{
  width:min(var(--chat-max-width), calc(100% - 48px));
  max-width:var(--chat-max-width);
}
#view-chat:has(.msg-user) .chat-inp-form,
#view-chat:has(.msg-asst) .chat-inp-form{
  width:min(var(--chat-max-width), calc(100% - 48px));
  max-width:var(--chat-max-width);
}
#view-chat .msg-asst-hd{display:none}
#view-chat .msg-asst-body{padding-left:0}
#view-chat .msg-user{margin-bottom:12px}
#view-chat .msg-user-bub{background:#e4eefc;color:#111}
[data-dark="1"] #view-chat .msg-user-bub{background:var(--teal);color:#fff}
#view-chat .rafiq-loading-stage{margin-left:0;width:100%;max-width:100%;box-sizing:border-box}
#view-chat .inp-box{
  display:flex;flex-direction:row;align-items:center;
  width:100%;box-sizing:border-box;
  min-height:0;
  background:#fff;
  border:1px solid rgba(0,0,0,.1);
  border-radius:26px;
  padding:8px 8px 8px 16px;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 10px 28px rgba(0,0,0,.05);
}
#view-chat .inp-box:focus-within{
  border-color:rgba(0,0,0,.14);
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 12px 32px rgba(0,0,0,.07);
}
#view-chat .inp-ta{
  flex:1;min-width:0;width:auto;box-sizing:border-box;
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  /* A fixed size: the question box does not follow the reader's text-size setting.
     Scaled with it, a larger setting fitted less of the question being typed
     (reader, 2026-10-11). 16px is also the floor below which phones zoom the
     page when the box is tapped. */
  font-size:16px;line-height:24px;color:var(--gpt-ink);
  min-height:24px;padding:0;margin:0;
}
#view-chat .inp-ta::placeholder{color:#9b9b9b;opacity:1;font-weight:400}
#view-chat .inp-send{
  align-self:center;margin-top:0;
  width:36px;height:36px;border-radius:50%;
  background:var(--gpt-blue);
  box-shadow:none;
}
#view-chat .btn-scroll-latest{
  width:36px;height:36px;padding:0;border:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--gpt-blue);color:#fff;
  box-shadow:0 2px 8px rgba(var(--teal-rgb),.28);
}
#view-chat:not(:has(.msg-user)) .btn-scroll-latest{
  opacity:0 !important;visibility:hidden;pointer-events:none !important;
}
#view-chat .btn-scroll-latest svg{width:18px;height:18px;stroke:#fff;stroke-width:2.5;fill:none}
#view-chat .btn-scroll-latest:hover{background:var(--teal-d);color:#fff;border-color:transparent}
#view-chat .inp-send:hover{background:var(--teal-d);transform:none;box-shadow:none}
#view-chat .inp-send:disabled{
  opacity:1;background:var(--gpt-blue);cursor:default;box-shadow:none;
}
#view-chat .inp-send.inp-stop{background:#c45c5c}
#view-chat:has(.msg-user) .inp-box,
#view-chat:has(.msg-asst) .inp-box{
  flex-direction:row;align-items:center;
  min-height:0;border-radius:26px;
  padding:8px 8px 8px 16px;
}
#view-chat:has(.msg-user) .inp-send,
#view-chat:has(.msg-asst) .inp-send{margin-top:0;align-self:center}
#view-chat .inp-box.inp-multiline{align-items:flex-end}
#view-chat .inp-box.inp-multiline .inp-send{align-self:flex-end}
#view-chat .inp-hint{
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:12px;color:#a3a3a3;margin-top:10px;
}
#view-chat .legal-title{display:none;margin:0}
#view-chat.legal-mode .chat-tb-center .mode-pill,
#view-chat.legal-mode .tb-share{display:none !important}
#view-chat.legal-mode .legal-title{
  display:block;
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;
  font-size:32px;font-weight:600;line-height:1.15;
  color:#0285ff;letter-spacing:-.01em;white-space:nowrap;
}
#view-chat.legal-mode .inp-box{display:none}
#view-chat.legal-mode .inp-hint a[aria-current="page"]{color:#0285ff;text-decoration:none}
[data-high-contrast="1"] #view-chat.legal-mode .legal-title{color:#000}
[data-high-contrast="1"][data-dark="1"] #view-chat.legal-mode .legal-title{color:#fff}
#view-chat.legal-mode .msg-answer-streaming .msg-answer-lead > *:last-child::after,
#view-chat.legal-mode .msg-answer-streaming .msg-answer-body > *:last-child::after{
  content:"";display:inline-block;width:2px;height:.85em;margin-left:2px;
  background:#0285ff;vertical-align:-.05em;
  animation:legal-caret 1s steps(1) infinite;
}
@keyframes legal-caret{50%{opacity:0}}
#view-chat .starters-section,#view-chat .starters{display:none !important}
#view-chat .msg-reflection,#view-chat .rfv4-reflection-close{display:none !important}
#view-chat .msg-meta{justify-content:flex-start;margin-top:6px}
#view-chat .msg-act-row{display:flex;align-items:center;gap:2px;position:relative}
#view-chat .msg-act-icon{
  width:32px;height:32px;padding:0;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:#8e8e8e;background:none;border:none;cursor:pointer;
}
#view-chat .msg-act-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
#view-chat .msg-act-icon svg circle{fill:currentColor;stroke:none}
#view-chat .msg-act-icon:hover{background:#f2f2f2;color:#0d0d0d}
#view-chat .msg-act-icon.is-on{color:#0d0d0d;background:#f2f2f2}
#view-chat .msg-act-menu{
  position:absolute;left:0;top:36px;z-index:30;min-width:180px;
  padding:6px;border-radius:12px;background:#fff;
  border:1px solid rgba(0,0,0,.08);box-shadow:0 8px 24px rgba(0,0,0,.08);
}
#view-chat .msg-act-menu button{
  display:block;width:100%;text-align:left;padding:8px 10px;border:none;
  background:none;border-radius:8px;cursor:pointer;
  font-family:"Cormorant Garamond",Garamond,Georgia,serif;font-size:16px;color:#0d0d0d;
}
#view-chat .msg-act-menu button:hover{background:#f4f4f5}

[data-dark="1"] #view-chat{background:#212121;color:#ececec;--gpt-ink:#ececec;--gpt-muted:#a3a3a3;--gpt-side:#171717;--gpt-hover:#2a2a2a}
[data-dark="1"] #view-chat .chat-shell,
[data-dark="1"] #view-chat .chat-main{background:#212121}
/* A Dawah opening is a message, and the older rules then painted the thread
   --paper (#262624), which is lighter than the empty Rafiq screen. */
[data-dark="1"] #view-chat:has(.msg-user) .chat-main,
[data-dark="1"] #view-chat:has(.msg-asst) .chat-main{background:#212121}
[data-dark="1"] #view-chat:has(.msg-user) .chat-inp-area,
[data-dark="1"] #view-chat:has(.msg-asst) .chat-inp-area{background:transparent;border-top-color:transparent}
[data-high-contrast="1"] #view-chat{background:#fff;color:#000;--gpt-ink:#000;--gpt-muted:#222}
[data-high-contrast="1"] #view-chat .chat-shell,
[data-high-contrast="1"] #view-chat .chat-main{background:#fff}
[data-high-contrast="1"][data-dark="1"] #view-chat{background:#000;color:#fff;--gpt-ink:#fff;--gpt-muted:#ddd}
[data-high-contrast="1"][data-dark="1"] #view-chat .chat-shell,
[data-high-contrast="1"][data-dark="1"] #view-chat .chat-main{background:#000}
[data-font-family="dyslexic"] #view-chat .inp-ta,
[data-font-family="dyslexic"] #view-chat .msg-user-bub{
  font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
}
[data-dark="1"] #view-chat .chat-sb{background:#171717;border-right-color:rgba(255,255,255,.1)}
[data-dark="1"] #view-chat .chat-sb-foot{border-top-color:rgba(255,255,255,.1)}
[data-dark="1"] #view-chat .btn-new-chat{background:transparent;color:#ececec}
[data-dark="1"] #view-chat .msg-act-icon{color:#c8c8c8}
[data-dark="1"] #view-chat .msg-act-icon:hover,
[data-dark="1"] #view-chat .msg-act-icon.is-on{background:#2a2a2a;color:#fff}
[data-dark="1"] #view-chat .msg-act-menu{background:#2a2a2a;border-color:rgba(255,255,255,.08)}
[data-dark="1"] #view-chat .msg-act-menu button{color:#ececec}
[data-dark="1"] #view-chat .msg-act-menu button:hover{background:#3a3a3a}
[data-dark="1"] #view-chat .chat-brand,
[data-dark="1"] #view-chat .sb-foot-btn,
[data-dark="1"] #view-chat .sb-auth-signin,
[data-dark="1"] #view-chat .hist-item,
[data-dark="1"] #view-chat .gpt-verse-en,
[data-dark="1"] #view-chat .gpt-verse-ar{color:#ececec}
[data-dark="1"] #view-chat .btn-new-chat:hover,
[data-dark="1"] #view-chat .sb-foot-btn:hover,
[data-dark="1"] #view-chat .sb-auth-signin:hover,
[data-dark="1"] #view-chat .hist-item:hover,
[data-dark="1"] #view-chat .sb-head-actions .btn-icon:hover,
[data-dark="1"] #view-chat .sb-head-actions .btn-sb-search:hover{background:#2a2a2a;color:#fff}
[data-dark="1"] #view-chat .hist-item.active{background:#2f2f2f;color:#fff}
[data-dark="1"] #view-chat .sb-hist:hover,
[data-dark="1"] #view-chat .sb-hist.is-scrolling{scrollbar-color:rgba(255,255,255,.28) transparent}
[data-dark="1"] #view-chat .sb-hist:hover::-webkit-scrollbar-thumb,
[data-dark="1"] #view-chat .sb-hist.is-scrolling::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28)}
[data-dark="1"] #view-chat .hist-actions{background:linear-gradient(90deg, rgba(23,23,23,0), #171717 42%)}
[data-dark="1"] #view-chat .hist-item:hover .hist-actions{background:linear-gradient(90deg, rgba(42,42,42,0), #2a2a2a 42%)}
[data-dark="1"] #view-chat .hist-item.active .hist-actions,
[data-dark="1"] #view-chat .hist-item.active:hover .hist-actions{background:linear-gradient(90deg, rgba(47,47,47,0), #2f2f2f 42%)}
[data-dark="1"] #view-chat .sb-auth-signin svg,
[data-dark="1"] #view-chat .sb-auth-avatar,
[data-dark="1"] #view-chat .sb-auth-avatar.fallback{background:#fff;color:#5d5d5d;border-color:#e6e6e6}
[data-dark="1"] #view-chat .chat-topbar{background:transparent;border:none}
[data-dark="1"] #view-chat .chat-tb-title-btn{color:#ececec}
[data-dark="1"] #view-chat .tb-more-menu{background:#2a2a2a;border-color:rgba(255,255,255,.08)}
[data-dark="1"] #view-chat .tb-more-menu .tb-btn{color:#ececec}
[data-dark="1"] #view-chat .tb-share,
[data-dark="1"] #view-chat .chat-tb-acts .tb-btn{color:#ececec}
[data-dark="1"] #view-chat .chat-tb-center .mode-pill{background:#2f2f2f}
[data-dark="1"] #view-chat .mode-opt.active,
[data-dark="1"] #view-chat .chat-tb-center .mode-opt.active,
[data-dark="1"] #view-chat .chat-tb-center .mode-opt.active[data-mode="muslim"],
[data-dark="1"] #view-chat .chat-tb-center .mode-opt.active[data-mode="non_muslim"]{
  background:#424242;color:#fff;
  box-shadow:none;
}
[data-dark="1"] #view-chat .inp-box{
  background:#303030;border-color:rgba(255,255,255,.1);
  box-shadow:none;
}
[data-dark="1"] #view-chat .inp-ta{color:#ececec}
[data-dark="1"] #view-chat .inp-ta::placeholder{color:#9b9b9b}

@media(max-width:680px){
  #view-chat{--sb-w:280px}
  /* Shadow only while open: the closed sidebar is parked just off-screen, and
     its shadow spilled a grey band down the left edge of the chat. */
  #view-chat .chat-sb{box-shadow:none}
  #view-chat .chat-sb.open{box-shadow:8px 0 24px rgba(0,0,0,.12)}
  #view-chat #btn-sb-close,
  #view-chat #btn-sb-collapse{display:none}
  #view-chat .chat-sb-head{padding:18px 16px 8px 18px}
  #view-chat .chat-brand{font-size:22px}
  #view-chat .chat-sb-body{padding:10px 12px 16px}
  #view-chat .btn-new-chat{font-size:18px;padding:12px 12px}
  #view-chat .sb-sect-label{font-size:15px;padding:20px 12px 8px}
  #view-chat .hist-item{font-size:17px;line-height:1.4;padding:12px 12px;margin:3px 0}
  #view-chat .hist-title{padding-right:0}
  #view-chat .chat-topbar{flex-wrap:nowrap;height:56px;min-height:56px;padding:0 10px}
  #view-chat .chat-tb-center{
    position:absolute;left:50%;top:50%;
    transform:translate(-50%, calc(-50% + 4px));
    order:0;width:auto;flex:none;
  }
  #view-chat .chat-tb-center .mode-pill{width:auto;max-width:none;padding:4px}
  #view-chat .chat-tb-center .mode-opt{
    flex:none;min-width:84px;padding:8px 18px;font-size:17px;
  }
  #view-chat .gpt-verse-en{font-size:28px}
  #view-chat .gpt-verse-ar{font-size:24px}
  #view-chat:not(:has(.msg-user)):not(:has(.msg-asst)) .chat-body{
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    min-height:0;
  }
  #view-chat:not(:has(.msg-user)):not(:has(.msg-asst)) .msgs{
    flex:0 0 auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:0 !important;
    height:auto !important;
    width:100% !important;
    max-width:none !important;
    margin:0 auto;
    padding:0 24px !important;
  }
  #view-chat:not(:has(.msg-user)):not(:has(.msg-asst)) .chat-welcome{
    width:100%;
    flex:0 0 auto !important;
    justify-content:center !important;
    min-height:0 !important;
    padding:0 !important;
  }
  #view-chat:not(:has(.msg-user)):not(:has(.msg-asst)) .chat-inp-area{
    flex:0 0 auto !important;
    justify-content:flex-end;
    padding:8px 12px max(16px, calc(10px + env(safe-area-inset-bottom, 0px)));
  }
  #view-chat .chat-inp-form,
  #view-chat:has(.msg-user) .chat-inp-form,
  #view-chat:has(.msg-asst) .chat-inp-form{width:100%;max-width:none}
  #view-chat .inp-box,
  #view-chat:has(.msg-user) .inp-box,
  #view-chat:has(.msg-asst) .inp-box{
    flex-direction:row;align-items:center;
    min-height:0;border-radius:26px;
    padding:8px 8px 8px 16px;
  }
  #view-chat .inp-ta{flex:1;min-width:0;width:auto;font-size:17px;line-height:24px;padding:0}
  #view-chat .inp-send,
  #view-chat:has(.msg-user) .inp-send,
  #view-chat:has(.msg-asst) .inp-send{margin-top:0;align-self:center}
  #view-chat .chat-sb-foot{padding:8px 10px max(10px, env(safe-area-inset-bottom, 0px))}
  #view-chat:has(.msg-user) .chat-tb-center{display:none !important}
  #view-chat:has(.msg-user) .chat-topbar{
    display:grid;grid-template-columns:40px minmax(0,1fr) auto;
    align-items:center;column-gap:4px;
  }
  /* Share hides the menu button and the toolbar actions. Those two slots are
     what the 40px | title | auto grid is for, so with them gone the title
     landed in the 40px column and read as "Gr…". One column, title centred,
     the same way a normal thread titles itself. */
  body.share-mode #view-chat:has(.msg-user) .chat-topbar,
  body.share-mode #view-chat:has(.msg-asst) .chat-topbar{
    grid-template-columns:minmax(0,1fr);
  }
  #view-chat:has(.msg-user) .chat-tb-left{display:contents;max-width:none}
  #view-chat:has(.msg-user) .chat-tb-title-btn{
    justify-self:center;text-align:center;width:100%;max-width:100%;
    font-size:17px;padding:4px 2px;
  }
  /* 32ch is the title limit. On a phone that is wider than the bar, so cap
     it between the menu and the action buttons. */
  #view-chat:has(.msg-user) .tb-rename-input,
  #view-chat:has(.msg-asst) .tb-rename-input{
    width:calc(32ch + 18px) !important;
    max-width:calc(100vw - 176px) !important;
    min-width:0 !important;
    box-sizing:border-box;
    justify-self:start;
    font-size:17px;text-align:left;
    pointer-events:auto;
  }
  #view-chat .tb-share{width:36px;height:36px;padding:0;gap:0}
  #view-chat .tb-share span{display:none}
  #view-chat .tb-share svg{width:18px;height:18px}
  #view-chat:has(.msg-user) .msgs,
  #view-chat:has(.msg-asst) .msgs{
    width:100%;max-width:none;margin:0;
    padding:12px 18px 16px;gap:16px;box-sizing:border-box;
  }
  #view-chat .msg-user{align-self:flex-end;margin-left:auto;margin-right:0;max-width:85%;width:fit-content}
  #view-chat .msg-user-bub{
    font-family:"Cormorant Garamond",Garamond,Georgia,serif;
    font-size:calc(18px * var(--chat-font-scale));line-height:var(--chat-line-height);padding:10px 14px;
  }
  #view-chat .msg-answer-lead{
    font-family:"Cormorant Garamond",Garamond,Georgia,serif;
    font-size:calc(20px * var(--chat-font-scale));line-height:var(--answer-lead-lh);font-weight:400;color:var(--answer-text);
    margin-bottom:16px;padding-bottom:14px;
  }
  #view-chat .msg-answer-body,
  #view-chat .msg-direct,
  #view-chat .msg-expl{
    font-family:"Cormorant Garamond",Garamond,Georgia,serif;
    font-size:calc(18.5px * var(--chat-font-scale));line-height:var(--answer-lh);
  }
  #view-chat .msg-answer-main p{margin:0 0 var(--answer-para-gap)}
  #view-chat .msg-answer-body .rfmt-h2,
  #view-chat .msg-answer-lead .rfmt-h2,
  #view-chat .msg-direct .rfmt-h2{
    font-family:"Cormorant Garamond",Garamond,Georgia,serif;
    font-size:calc(21px * var(--chat-font-scale));line-height:1.35;margin:24px 0 12px;
  }
  #view-chat .msg-answer-lead .rfmt-h2:first-child{margin-top:0}
  #view-chat .msg-answer-main .rfmt-inline-verse-card,
  #view-chat .msg-answer-body .rfmt-inline-verse-card,
  #view-chat .msg-expl .rfmt-inline-verse-card{margin:14px 0 16px}
  #view-chat .msg-answer-main .rfmt-verse-matn,
  #view-chat .msg-answer-main .rfmt-hadith-matn,
  #view-chat .msg-answer-main .rfmt-quote,
  #view-chat .rfmt-verse-matn,
  #view-chat .rfmt-hadith-matn,
  #view-chat .rfmt-quote{
    font-family:"Cormorant Garamond",Garamond,Georgia,serif;
    font-size:calc(18.5px * var(--chat-font-scale));line-height:var(--answer-lh);
  }
  #view-chat .msg-answer-main .rfmt-fatwa-matn,
  #view-chat .msg-answer-main .rfmt-bible-matn,
  #view-chat .rfmt-fatwa-matn{
    font-family:"Cormorant Garamond",Garamond,Georgia,serif;
    font-size:calc(16px * var(--chat-font-scale));line-height:1.65;
  }
  [data-font-family="dyslexic"] #view-chat .inp-ta,
  [data-font-family="dyslexic"] #view-chat .msg-user-bub,
  [data-font-family="dyslexic"] #view-chat .msg-answer-lead,
  [data-font-family="dyslexic"] #view-chat .msg-answer-body,
  [data-font-family="dyslexic"] #view-chat .msg-direct,
  [data-font-family="dyslexic"] #view-chat .msg-expl,
  [data-font-family="dyslexic"] #view-chat .rfmt-h2,
  [data-font-family="dyslexic"] #view-chat .rfmt-verse-matn,
  [data-font-family="dyslexic"] #view-chat .rfmt-hadith-matn,
  [data-font-family="dyslexic"] #view-chat .rfmt-fatwa-matn,
  [data-font-family="dyslexic"] #view-chat .rfmt-bible-matn,
  [data-font-family="dyslexic"] #view-chat .rfmt-quote{
    font-family:"Atkinson Hyperlegible",system-ui,sans-serif;
  }
  #view-chat:has(.msg-user) .chat-inp-area,
  #view-chat:has(.msg-asst) .chat-inp-area{
    padding:8px 18px max(12px, calc(8px + env(safe-area-inset-bottom, 0px)));
  }
  /* The thread already fills the screen, so a column width would only
     squeeze it. The control is hidden and the column stays full width. */
  #settings-modal .field-reading-width{display:none}
  #view-chat.legal-mode .legal-title{font-size:28px}
  #view-chat.legal-mode .chat-tb-center{display:flex !important}
  #view-chat .msgs,
  #view-chat .chat-inp-form{width:100%;max-width:none}
}