.settings-gear-btn{background:none;border:none;cursor:pointer;color:rgba(0,33,33,0.45);padding:0;border-radius:0;display:inline;vertical-align:baseline;margin-right:0;transition:color 0.2s ease;font-size:inherit;font-family:inherit;line-height:inherit;transform:none !important;}
.settings-gear-btn:hover{color:rgba(0,33,33,0.65);background:none;transform:none !important;}
.settings-gear-btn:active{transform:none !important;}
.settings-gear-btn svg{vertical-align:-1px;margin-right:1px;}

/* Settings overlay */
.settings-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.35);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);}
.settings-overlay.show{opacity:1;visibility:visible;}

/* Settings popup */
.settings-popup{position:relative;background:rgba(255,255,255,0.75);backdrop-filter:blur(50px) saturate(200%);-webkit-backdrop-filter:blur(50px) saturate(200%);border:1px solid rgba(255,255,255,0.6);box-shadow:0 12px 48px rgba(0,33,33,0.18),inset 0 1px 0 rgba(255,255,255,0.8);border-radius:20px;padding:28px;width:90%;max-width:420px;transform:translateY(12px) scale(0.96);transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1);}
.settings-overlay.show .settings-popup{transform:translateY(0) scale(1);}

.settings-desc{font-size:11px;color:rgba(0,33,33,0.5);font-family:'Cooper',Georgia,serif;line-height:1.5;margin-bottom:16px;}
.settings-section-title{font-size:11px;color:rgba(0,33,33,0.45);font-family:'Cooper',Georgia,serif;margin-bottom:10px;letter-spacing:0.3px;}

/* Font cards row */
.settings-cards-row{display:flex;gap:8px;}
.settings-card{flex:1;background:none;border:1px solid rgba(0,33,33,0.1);border-radius:12px;padding:0;cursor:pointer;transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1);overflow:hidden;text-align:center;}
.settings-card:hover{border-color:rgba(0,33,33,0.25);transform:none;box-shadow:0 4px 12px rgba(0,33,33,0.08);}
.settings-card.active{border-color:rgba(0,33,33,0.6);box-shadow:0 0 0 1px rgba(0,33,33,0.15);}

.settings-card-preview{height:72px;display:flex;align-items:center;justify-content:center;padding:10px;background:rgba(0,33,33,0.03);}
.font-preview-text{font-size:28px;color:#002121;font-weight:300;}
.settings-card-label{display:block;font-size:10px;color:rgba(0,33,33,0.5);font-family:'Cooper',Georgia,serif;padding:6px 4px;border-top:1px solid rgba(0,33,33,0.06);}
.settings-card.active .settings-card-label{color:#002121;font-weight:400;}

/* Font override classes */
body.font-sniffing .bot-msg,
body.font-sniffing .feature-btn,
body.font-sniffing #msgInput,
body.font-sniffing .chat-start-title,
body.font-sniffing .chat-start-sub{font-family:Helvetica,Arial,sans-serif !important;}

body.font-easyread .bot-msg,
body.font-easyread .feature-btn,
body.font-easyread #msgInput,
body.font-easyread .chat-start-title,
body.font-easyread .chat-start-sub{font-family:'Merriweather',Georgia,serif !important;}

/* Desktop horizontal layout */
@media(min-width:768px){
  .settings-popup{max-width:600px;display:flex;flex-wrap:wrap;gap:0 28px;}
  .settings-popup .memory-popup-close{position:absolute;right:16px;top:16px;}
  .settings-popup-left{flex:1;min-width:180px;display:flex;flex-direction:column;justify-content:center;}
  .settings-popup-right{flex:1.3;min-width:260px;border-left:1px solid rgba(0,33,33,0.08);padding-left:28px;}
}

/* Force font previews to show correct fonts */
.settings-font-card[data-font="barkvetica"] .font-preview-text{font-family:'Cooper',Georgia,serif !important;}
.settings-font-card[data-font="sniffing"] .font-preview-text{font-family:Helvetica,Arial,sans-serif !important;}
.settings-font-card[data-font="easyread"] .font-preview-text{font-family:'Merriweather','Georgia',serif !important;}

/* Theme preview mini-cards */
.stp-bar{width:60%;height:3px;border-radius:2px;margin-bottom:5px;}
.stp-line{width:80%;height:2px;border-radius:1px;margin-bottom:3px;}
.stp-line.short{width:50%;}
.stp-input{width:85%;height:10px;border-radius:5px;margin-top:4px;position:relative;}
.stp-dot{width:5px;height:5px;border-radius:50%;position:absolute;right:4px;top:50%;transform:translateY(-50%);}
.settings-card-preview{flex-direction:column;}

.theme-preview-garden{background:linear-gradient(135deg,#f5f2f3 0%,#f7f5f3 50%,#f5f3f5 100%);border-radius:10px 10px 0 0;}
.theme-preview-garden .stp-bar{background:rgba(0,33,33,0.15);}
.theme-preview-garden .stp-line{background:rgba(0,33,33,0.08);}
.theme-preview-garden .stp-input{background:rgba(0,33,33,0.06);}
.theme-preview-garden .stp-dot{background:rgba(0,33,33,0.2);}

.theme-preview-device{background:#f5f2f3;border-radius:10px 10px 0 0;}
.stp-split{display:flex;width:100%;height:48px;overflow:hidden;}
.stp-split-light{flex:1;background:linear-gradient(135deg,#f5f2f3,#f7f5f3);padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.stp-split-dark{flex:1;background:#002121;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.stp-split-light .stp-bar{background:rgba(0,33,33,0.15);width:70%;height:2px;margin-bottom:3px;}
.stp-split-light .stp-line{background:rgba(0,33,33,0.08);width:85%;height:1.5px;margin-bottom:2px;}
.stp-split-dark .stp-bar{background:rgba(255,255,255,0.3);width:70%;height:2px;margin-bottom:3px;}
.stp-split-dark .stp-line{background:rgba(255,255,255,0.15);width:85%;height:1.5px;margin-bottom:2px;}
.theme-preview-device .stp-input{background:rgba(0,33,33,0.06);}
.theme-preview-device .stp-dot{background:rgba(0,33,33,0.2);}

.theme-preview-london{background:#002121;border-radius:10px 10px 0 0;}
.theme-preview-london .stp-bar{background:rgba(255,255,255,0.3);}
.theme-preview-london .stp-line{background:rgba(255,255,255,0.12);}
.theme-preview-london .stp-input{background:rgba(255,255,255,0.08);border:1px solid rgba(255,255,255,0.1);}
.theme-preview-london .stp-dot{background:rgba(255,255,255,0.35);}

/* London Night theme */
body.theme-london,
body.theme-device.theme-dark-active{
  background:#0a1a1a !important;
}
body.theme-london .container,
body.theme-device.theme-dark-active .container{
  color:#e8e8e8;
}
body.theme-london.chat-active,
body.theme-device.theme-dark-active.chat-active{
  background:#0a1a1a !important;
}
body.theme-london .bot-msg,
body.theme-device.theme-dark-active .bot-msg{
  color:rgba(255,255,255,0.85);
}
body.theme-london .bot-msg a,
body.theme-device.theme-dark-active .bot-msg a{
  color:rgba(255,255,255,0.85);
}
body.theme-london .chat-start-title,
body.theme-device.theme-dark-active .chat-start-title{
  color:rgba(255,255,255,0.6);
}
body.theme-london .chat-start-sub,
body.theme-device.theme-dark-active .chat-start-sub{
  color:rgba(255,255,255,0.35);
}
body.theme-london .dynamic-title,
body.theme-device.theme-dark-active .dynamic-title{
  color:#e8e8e8;
}
body.theme-london .disclaimer,
body.theme-device.theme-dark-active .disclaimer{
  color:rgba(255,255,255,0.3);
}
body.theme-london .disclaimer a,
body.theme-device.theme-dark-active .disclaimer a{
  color:rgba(255,255,255,0.3);
}
body.theme-london .settings-gear-btn,
body.theme-device.theme-dark-active .settings-gear-btn{
  color:rgba(255,255,255,0.3);
}
body.theme-london .action-btn,
body.theme-device.theme-dark-active .action-btn{
  color:rgba(255,255,255,0.3);
}
body.theme-london .action-btn:hover:not(.disabled),
body.theme-device.theme-dark-active .action-btn:hover:not(.disabled){
  color:rgba(255,255,255,0.6);
  background:rgba(255,255,255,0.05);
}
body.theme-london .bot-footer img,
body.theme-device.theme-dark-active .bot-footer img{
  filter:brightness(1.5);
}
body.theme-london .sources-btn,
body.theme-device.theme-dark-active .sources-btn{
  color:rgba(255,255,255,0.4);
  border-color:rgba(255,255,255,0.15);
}

/* Force keyboard shortcut keys white text always */
.kbd{color:rgba(255,255,255,0.9) !important;}

/* Settings close pill button above popup */
.settings-close-pill{position:absolute !important;top:-44px !important;right:0 !important;background:rgba(0,33,33,0.6) !important;backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important;border:none !important;border-radius:50px !important;color:rgba(255,255,255,0.9) !important;font-size:11px !important;font-family:'Cooper',Georgia,serif !important;width:auto !important;height:auto !important;padding:8px 16px !important;display:flex !important;align-items:center !important;gap:4px !important;cursor:pointer !important;transition:all 0.2s ease !important;z-index:10 !important;}
.settings-close-pill:hover{background:rgba(0,33,33,0.8) !important;}

/* Liquid glass close pill */
.settings-close-pill{background:rgba(255,255,255,0.25) !important;backdrop-filter:blur(40px) saturate(180%) !important;-webkit-backdrop-filter:blur(40px) saturate(180%) !important;border:1px solid rgba(255,255,255,0.4) !important;box-shadow:0 4px 16px rgba(0,33,33,0.12),inset 0 1px 0 rgba(255,255,255,0.5) !important;color:rgba(0,33,33,0.7) !important;}
.settings-close-pill:hover{background:rgba(255,255,255,0.4) !important;color:#002121 !important;box-shadow:0 6px 20px rgba(0,33,33,0.16),inset 0 1px 0 rgba(255,255,255,0.6) !important;}

/* Space between settings sections */
.settings-section{margin-bottom:28px !important;}

/* Rounder settings cards */
.settings-card{border-radius:16px !important;}
.settings-card-preview{border-radius:14px 14px 0 0 !important;}
.stp-input{border-radius:8px !important;}
.stp-bar{border-radius:4px !important;}
.stp-line{border-radius:3px !important;}
.stp-split{border-radius:10px !important;overflow:hidden !important;}




/* Shine loop on hover - bottom-left to top-right */
.settings-card{position:relative !important;overflow:hidden !important;}
.settings-card::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 40%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0) 60%,rgba(255,255,255,0) 100%);background-size:300% 300%;background-position:100% 100%;pointer-events:none;opacity:0;}
.settings-card:hover::after{opacity:1;animation:cardShine 2s ease infinite;}
@keyframes cardShine{0%{background-position:100% 100%;}100%{background-position:0% 0%;}}

/* Close pill - white in dark themes */
body.theme-london .settings-close-pill,
body.theme-device.theme-dark-active .settings-close-pill{background:rgba(255,255,255,0.12) !important;border:1px solid rgba(255,255,255,0.2) !important;color:rgba(255,255,255,0.9) !important;box-shadow:0 4px 16px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.1) !important;}
body.theme-london .settings-close-pill:hover,
body.theme-device.theme-dark-active .settings-close-pill:hover{background:rgba(255,255,255,0.2) !important;}


/* High Contrast Dark - Pure Black #000000 (distinct from London Night #002121) */
.theme-preview-contrast-dark{background:#000000;border:2px solid #FFFFFF;border-radius:10px 10px 0 0;}
.theme-preview-contrast-dark .stp-bar{background:#FFFFFF;}
.theme-preview-contrast-dark .stp-line{background:#FFFFFF;}
.theme-preview-contrast-dark .stp-input{background:#FFFFFF;border:2px solid #FFFFFF;}
.theme-preview-contrast-dark .stp-dot{background:#000000;}

/* Accessible toggle button */
.settings-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.accessible-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(0,0,0,0.08);
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 6px;
  font-size: 13px;
  color: rgba(0,0,0,0.6);
  cursor: pointer;
  transition: all 0.2s;
}
.accessible-toggle:hover {
  background: rgba(0,0,0,0.12);
  color: rgba(0,0,0,0.8);
}
.accessible-toggle.active {
  background: #000000;
  color: #FFFFFF;
  border-color: #000000;
}
.accessible-toggle svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 600px) {
  .settings-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}



/* Accessibility toggle - PILL SHAPE */
.settings-section-header{display:flex;align-items:center;justify-content:space-between;}
.accessibility-toggle{background:transparent;border:1px solid rgba(0,0,0,0.2);border-radius:999px;padding:3px 8px;cursor:pointer;display:flex;align-items:center;gap:4px;font-family:var(--body-font);font-size:11px;font-weight:400;color:rgba(0,0,0,0.45);transition:all 0.2s;}
.accessibility-toggle:hover{border-color:rgba(0,0,0,0.35);color:rgba(0,0,0,0.65);background:rgba(0,0,0,0.03);}
.accessibility-toggle.active{background:#000000;color:#FFFFFF;border-color:#000000;}
.accessibility-toggle svg{width:14px;height:14px;flex-shrink:0;}
.accessibility-toggle span{white-space:nowrap;}
@media (max-width:600px){.settings-section-header{flex-direction:column;align-items:flex-start;gap:8px;}}