:root{
  --bg:#f5f5f7;--panel:#fff;--text:#171717;--muted:#707070;
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px)
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
header{position:fixed;top:0;left:0;right:0;z-index:3;display:flex;gap:12px;align-items:center;padding:calc(10px + var(--safe-top)) 14px 10px;background:#fffffff2}
header strong{flex:1}
button,input,textarea{font:inherit}
button{cursor:pointer}
aside{position:fixed;z-index:4;top:0;bottom:0;left:0;width:280px;padding:calc(70px + var(--safe-top)) 14px 20px;background:#fff}
nav{display:grid;gap:5px;margin:18px 0}
nav button,#newChat{padding:10px;border:0;border-radius:10px;text-align:left}
#chatList button{display:block;width:100%;padding:9px;border:0;background:transparent;text-align:left}
main{margin-left:280px;padding:calc(85px + var(--safe-top)) 24px calc(90px + var(--safe-bottom))}
#auth{max-width:480px;margin:12vh auto;background:white;padding:24px;border-radius:18px}
#loginForm{display:grid;gap:12px}
#loginForm input{padding:12px}
#messages{max-width:900px;margin:auto;display:grid;gap:10px;padding-bottom:90px}
.msg{padding:12px 14px;border-radius:15px;background:#fff;max-width:80%}
.msg.user{margin-left:auto;background:#222;color:#fff}
.pending{opacity:.55}
#composer{position:fixed;left:304px;right:24px;bottom:calc(12px + var(--safe-bottom));display:flex;gap:8px;background:white;padding:10px;border-radius:16px}
#composer textarea{flex:1;resize:none}
#modeSwitch{display:flex;gap:4px;align-items:center;flex:0 0 auto}
#modeSwitch button{border:1px solid #c8c8c8;background:#f4f4f4;padding:8px 10px;border-radius:9px}
#modeSwitch button.active{background:#202020;color:#fff;border-color:#202020}
.msg.task-status{font-style:italic;opacity:.8}
#notice{max-width:900px;margin:0 auto 12px;color:#8a2323}
@media(max-width:899px){
  aside{transform:translateX(-105%);transition:.2s}
  aside.open{transform:none}
  main{margin-left:0;padding-left:14px;padding-right:14px}
  #composer{left:14px;right:14px}
}

.task-owner-approval{
  max-width:900px;
  margin:10px auto;
  padding:12px;
  border:1px solid #d5d5d5;
  border-radius:12px;
  background:#fafafa
}
.task-owner-summary{margin-bottom:10px}
.task-owner-approve{
  padding:10px 14px;
  border:0;
  border-radius:10px;
  cursor:pointer
}
.task-owner-approve:disabled{cursor:default;opacity:.65}

.task-owner-start{
  margin-left:8px;
  padding:10px 14px;
  border:0;
  border-radius:10px;
  cursor:pointer
}
.task-owner-start:disabled{cursor:default;opacity:.65}

.task-plan-result{
  max-width:900px;
  margin:12px auto;
  padding:14px;
  border:1px solid #d5d5d5;
  border-radius:12px;
  background:#fff
}
.task-plan-result h3{margin-top:0}
.task-plan-result ol{padding-left:24px}
.task-plan-result ul{padding-left:22px;margin-top:6px}
.task-plan-meta{
  margin-top:12px;
  font-size:.9em;
  opacity:.7
}


/* ==========================================================
   Sophie-AI Owner Review Readability v1
   Presentation only — no governance/runtime effects
   ========================================================== */

.task-plan-meta {
  margin: 8px 0 10px;
  padding: 9px 11px;

  font-size: 13px;
  line-height: 1.45;

  /*
   * SOPHIE_TASK_NESTED_OPACITY_FIX_V1
   *
   * Never make structural task containers translucent.
   * Nested opacity compounds and made deeper governance
   * stages progressively unreadable.
   */
  opacity: 1;

  color: #374151;
  background: #f8fafc;

  border: 1px solid #e5e7eb;
  border-radius: 8px;

  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.task-plan-meta + .task-plan-meta {
  margin-top: 6px;
}

.task-owner-start {
  min-height: 38px;
  margin: 6px 6px 6px 0;
  padding: 8px 14px;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;

  border-radius: 8px;
}

.task-owner-start:disabled {
  cursor: default;

  /*
   * Previously the disabled controls became so pale that
   * completed Owner steps were difficult to read.
   */
  opacity: .82;
}

input[type="text"] {
  min-height: 36px;
  padding: 7px 9px;

  font-size: 14px;
  line-height: 1.3;

  color: #111827;
  background: #ffffff;

  border: 1px solid #cbd5e1;
  border-radius: 7px;
}

input[type="text"]:disabled {
  opacity: .85;
  color: #4b5563;
  background: #f8fafc;
}

/*
 * Long UUIDs / SHA256 digests must never force the Owner
 * panel wider than the available viewport.
 */
.task-plan-meta,
.task-plan-meta *,
.task-owner-start {
  max-width: 100%;
  box-sizing: border-box;
}

/*
 * Better separation on narrow/mobile displays.
 */
@media (max-width: 700px) {
  .task-plan-meta {
    font-size: 13px;
    line-height: 1.5;
    padding: 10px;
  }

  .task-owner-start {
    width: 100%;
    margin-right: 0;
  }

  input[type="text"] {
    width: 100%;
    box-sizing: border-box;
  }
}

/* SOPHIE_CHAT_UX_V1 */
#chatList button {
  position: relative;
}

#chatList button:hover {
  cursor: pointer;
}

/* SOPHIE_CHAT_UX_V2 */

#composer textarea{
  min-height:42px;
  max-height:240px;
  overflow-y:hidden;
  line-height:1.4;
  padding:10px 12px;
}

.chat-context-menu{
  position:fixed;
  z-index:10000;
  min-width:150px;
  padding:6px;
  border:1px solid #d5d5d5;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}

.chat-context-menu button{
  display:block;
  width:100%;
  padding:9px 12px;
  border:0;
  border-radius:7px;
  background:transparent;
  text-align:left;
}

.chat-context-menu button:hover{
  background:#f2f2f2;
}

.chat-context-menu button.danger{
  color:#a61b1b;
}

/* SOPHIE_AI_PERSONALIZATION_V1 */

.settings-page{
  max-width:900px;
  margin:0 auto;
}

.settings-lead{
  max-width:760px;
  color:var(--muted);
  line-height:1.5;
}

#personalizationForm{
  display:grid;
  gap:20px;
  margin-top:24px;
  padding-bottom:80px;
}

.settings-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  background:#fff;
  border-radius:14px;
}

.settings-toggle input{
  width:20px;
  height:20px;
}

.settings-field{
  display:grid;
  gap:8px;
  font-weight:600;
}

.settings-field textarea{
  width:100%;
  min-height:150px;
  resize:vertical;
  padding:12px 14px;
  border:1px solid #d4d4d4;
  border-radius:14px;
  background:#fff;
  line-height:1.45;
  font-weight:400;
}

.settings-field textarea:focus{
  outline:2px solid #888;
  outline-offset:2px;
}

.settings-actions{
  display:flex;
  align-items:center;
  gap:14px;
}

#personalizationSave{
  padding:10px 16px;
  border:0;
  border-radius:10px;
  background:#202020;
  color:#fff;
}

#personalizationSave:disabled{
  opacity:.55;
  cursor:default;
}

#personalizationStatus{
  color:var(--muted);
  font-size:.95rem;
}

/* SOPHIE_AI_WEB_ACCESS_V1 */

.composer-tools{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:32px;
  margin-top:4px;
}

.composer-tool-button{
  width:30px;
  height:30px;
  min-width:30px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  opacity:.62;
}

.composer-tool-button:hover:not(:disabled){
  background:rgba(127,127,127,.12);
  opacity:.9;
}

.composer-tool-button:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

.composer-tool-button:disabled{
  opacity:.28;
  cursor:default;
}

.internet-toggle{
  transition:
    background .15s ease,
    opacity .15s ease,
    transform .15s ease;
}

.internet-toggle.active{
  opacity:1;
  background:rgba(127,127,127,.18);
  font-weight:700;
}

.internet-toggle.active::after{
  content:"";
  width:5px;
  height:5px;
  position:absolute;
}

.internet-toggle.busy{
  opacity:.45;
}

.internet-toggle.unknown{
  opacity:.4;
}

.internet-toggle-hint{
  min-height:18px;
  font-size:.78rem;
  opacity:.65;
  white-space:nowrap;
  margin-left:2px;
}


/* SOPHIE_AI_COMPOSER_UI_V2 */

.composer-shell{
  border:1px solid rgba(127,127,127,.28);
  border-radius:18px;
  background:#fff;
  padding:10px 10px 8px;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}

.composer-shell:focus-within{
  border-color:rgba(127,127,127,.52);
}

.composer-shell #input{
  display:block;
  width:100%;
  min-height:44px;
  max-height:220px;
  padding:2px 4px 8px;
  margin:0;
  border:0;
  border-radius:0;
  background:transparent;
  resize:none;
  outline:none;
  box-shadow:none;
}

.composer-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:28px;
}

.composer-shell .composer-tools{
  display:flex;
  align-items:center;
  gap:2px;
  margin:0;
  min-height:26px;
}

.composer-shell .composer-tool-button{
  position:relative;
  width:26px;
  height:26px;
  min-width:26px;
  padding:0;
  border:0;
  border-radius:7px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  opacity:.52;
}

.composer-shell .composer-tool-button:hover:not(:disabled){
  background:rgba(127,127,127,.10);
  opacity:.9;
}

.composer-shell .composer-tool-button:disabled{
  opacity:.24;
  cursor:default;
}

.composer-shell .internet-toggle{
  font-size:14px;
}

.composer-shell .internet-toggle.active{
  opacity:1;
  background:rgba(127,127,127,.16);
}

.composer-shell .internet-toggle.active::before{
  content:"";
  position:absolute;
  right:3px;
  bottom:3px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
}

.composer-shell .internet-toggle-hint{
  min-height:16px;
  max-width:120px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  margin-left:3px;
  font-size:.72rem;
  opacity:.6;
}

.composer-shell #send{
  min-height:30px;
  margin:0;
  padding:5px 11px;
  border-radius:9px;
}

@media (max-width:640px){
  .composer-shell{
    border-radius:16px;
    padding:9px 8px 7px;
  }

  .composer-shell .internet-toggle-hint{
    max-width:90px;
  }
}

/* SOPHIE_AI_COMPOSER_UI_V3 */

#composer{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;
  gap:8px !important;
  width:100% !important;
}

.composer-mode-row{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  margin:0 0 2px 0;
}

.composer-mode-row #modeSwitch{
  display:inline-flex;
  align-items:center;
  gap:4px;
  width:auto;
  margin:0;
  flex:0 0 auto;
}

.composer-shell{
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:none;
  box-sizing:border-box;
  border:1px solid rgba(127,127,127,.28);
  border-radius:18px;
  background:#fff;
  padding:12px 12px 9px;
  margin:0;
}

.composer-shell #input{
  display:block;
  box-sizing:border-box;
  width:100% !important;
  min-width:0 !important;
  min-height:78px !important;
  max-height:240px !important;
  padding:2px 3px 10px !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  outline:0 !important;
  box-shadow:none !important;
  resize:none !important;
  overflow-y:auto;
  font:inherit;
  line-height:1.45;
}

.composer-bottom{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px;
  width:100%;
  margin-top:2px;
}

.composer-shell .composer-tools{
  display:flex;
  align-items:center;
  gap:3px;
  flex:0 0 auto;
  min-height:28px;
  margin:0;
}

.composer-shell .composer-tool-button{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  width:27px;
  height:27px;
  min-width:27px;
  min-height:27px;
  padding:0;
  margin:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  line-height:1;
  cursor:pointer;
  opacity:.62;
}

.composer-shell #composerAdd{
  font-size:19px;
  font-weight:300;
}

/*
 * + is intentionally not functional yet,
 * but remains visually recognizable as the future
 * attachment / vision entry point.
 */
.composer-shell #composerAdd:disabled{
  opacity:.42;
}

.internet-globe-icon{
  display:block;
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.composer-shell .internet-toggle{
  opacity:.55;
}

.composer-shell .internet-toggle:hover:not(:disabled){
  opacity:.9;
  background:rgba(127,127,127,.10);
}

.composer-shell .internet-toggle.active{
  opacity:1;
  background:rgba(127,127,127,.16);
}

.composer-shell .internet-toggle.active::before{
  content:"";
  position:absolute;
  right:2px;
  bottom:2px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
}

.composer-shell .internet-toggle-hint{
  display:inline-block;
  min-height:16px;
  max-width:120px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  margin-left:3px;
  font-size:.72rem;
  opacity:.58;
}

.composer-shell #send{
  flex:0 0 auto;
  min-width:72px;
  min-height:32px;
  margin:0 !important;
  padding:5px 12px !important;
  border-radius:9px;
}

@media (max-width:640px){
  #composer{
    gap:7px !important;
  }

  .composer-shell{
    width:100%;
    border-radius:16px;
    padding:10px 9px 8px;
  }

  .composer-shell #input{
    min-height:70px !important;
  }

  .composer-shell .internet-toggle-hint{
    max-width:85px;
  }
}

/* SOPHIE_AI_COMPOSER_UI_V3_1 */

.composer-shell .composer-bottom{
  position:relative;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
}

.composer-shell #send,
.composer-shell .composer-send-button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  visibility:visible !important;
  opacity:1 !important;

  position:static !important;
  z-index:2 !important;

  flex:0 0 auto !important;

  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  min-height:30px !important;

  padding:0 !important;
  margin:0 !important;

  border:0 !important;
  border-radius:9px !important;

  background:rgba(127,127,127,.14) !important;
  color:inherit !important;

  cursor:pointer !important;

  box-sizing:border-box !important;
}

.composer-shell #send:hover:not(:disabled),
.composer-shell .composer-send-button:hover:not(:disabled){
  background:rgba(127,127,127,.22) !important;
}

.composer-shell #send:active:not(:disabled),
.composer-shell .composer-send-button:active:not(:disabled){
  transform:scale(.95);
}

.composer-shell #send:disabled,
.composer-shell .composer-send-button:disabled{
  opacity:.35 !important;
  cursor:default !important;
}

.composer-send-icon{
  display:block;
  width:16px;
  height:16px;
  fill:currentColor;
  stroke:none;
  pointer-events:none;
}

/* SOPHIE_AI_COMPOSER_UI_V3_2 */

/*
 * The canonical composer is position:fixed and already bounded by:
 *
 *   left: 304px;
 *   right: 24px;
 *
 * A later width:100% override over-constrained the box and pushed the
 * right-hand send control beyond the viewport.
 *
 * V3.2 restores left/right as the sole horizontal authority.
 */

#composer{
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

#composer > *{
  min-width:0;
}

.composer-mode-row{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.composer-shell{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  overflow:hidden;
}

.composer-shell #input{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.composer-bottom{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
}

.composer-shell .composer-tools{
  min-width:0 !important;
}

.composer-shell #send,
.composer-shell .composer-send-button{
  display:inline-flex !important;
  visibility:visible !important;
  opacity:1 !important;
  position:static !important;
  flex:0 0 30px !important;
  width:30px !important;
  min-width:30px !important;
  max-width:30px !important;
  height:30px !important;
  min-height:30px !important;
  max-height:30px !important;
  box-sizing:border-box !important;
}

/*
 * Preserve canonical mobile horizontal bounds.
 */
@media (max-width:640px){
  #composer{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
  }
}


/* SOPHIE_AI_VISION_UPLOAD_V1 */

.vision-preview{
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
  gap:9px;
  padding:7px 8px;
  margin:0 0 7px;
  box-sizing:border-box;
  border:1px solid rgba(127,127,127,.18);
  border-radius:11px;
  background:rgba(127,127,127,.06);
}

.vision-preview[hidden]{
  display:none !important;
}

.vision-preview img{
  width:54px;
  height:54px;
  flex:0 0 54px;
  object-fit:cover;
  border-radius:8px;
}

.vision-preview-meta{
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  gap:2px;
}

#visionPreviewName{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.82rem;
}

#visionPreviewSize{
  font-size:.72rem;
  opacity:.6;
}

.vision-remove{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  min-width:28px;
  height:28px;
  padding:0;
  border-radius:8px;
  font-size:18px;
  line-height:1;
}

#composerAdd:not(:disabled){
  cursor:pointer;
}


/* SOPHIE_AI_VISION_UI_V1_1 */

:root{
  --sophie-composer-clearance:180px;
}

/*
 * The composer is fixed, so reserve its measured
 * height below the final chat message.
 */
#messages{
  padding-bottom:
    var(
      --sophie-composer-clearance
    ) !important;
  scroll-padding-bottom:
    var(
      --sophie-composer-clearance
    );
}

/*
 * Large image presentation inside a user message.
 */
.msg.user .chat-vision-image{
  display:block;
  width:min(480px,100%);
  max-width:100%;
  margin:10px 0 0;
  padding:0;
}

.msg.user .chat-vision-image img{
  display:block;
  width:100%;
  max-width:480px;
  max-height:560px;
  object-fit:contain;
  border-radius:12px;
  background:rgba(255,255,255,.08);
}

.msg.user .chat-vision-image figcaption{
  margin-top:5px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.72rem;
  opacity:.68;
}

.msg.user .chat-vision-metadata{
  margin-top:8px;
  padding-top:7px;
  border-top:1px solid rgba(255,255,255,.16);
  font-size:.76rem;
  opacity:.72;
}

@media(max-width:640px){
  .msg.user{
    max-width:92%;
  }

  .msg.user .chat-vision-image{
    width:100%;
  }

  .msg.user .chat-vision-image img{
    width:100%;
    max-width:100%;
    max-height:60vh;
  }
}


/* SOPHIE_AI_THINKING_V1 */

.sophie-thinking-select{
  height:27px;
  max-width:108px;
  padding:0 6px;
  border:0;
  border-radius:8px;
  background:rgba(127,127,127,.08);
  color:inherit;
  font:inherit;
  font-size:.76rem;
  cursor:pointer;
}

.sophie-thinking-select:hover{
  background:rgba(127,127,127,.14);
}

.sophie-thinking-panel{
  max-width:900px;
  margin:0 auto 12px;
  padding:10px 12px;
  border:1px solid rgba(127,127,127,.18);
  border-radius:13px;
  background:rgba(127,127,127,.055);
}

.sophie-thinking-panel[hidden]{
  display:none !important;
}

.sophie-thinking-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.sophie-thinking-header strong{
  font-size:.82rem;
  opacity:.78;
}

.sophie-thinking-toggle{
  padding:4px 7px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:inherit;
  font-size:.72rem;
  opacity:.65;
}

.sophie-thinking-toggle:hover{
  background:rgba(127,127,127,.10);
  opacity:.9;
}

.sophie-thinking-body{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(127,127,127,.16);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:.79rem;
  line-height:1.45;
  opacity:.78;
  max-height:260px;
  overflow-y:auto;
}

.sophie-thinking-panel.collapsed
.sophie-thinking-body{
  display:none;
}

@media(max-width:640px){
  .sophie-thinking-select{
    max-width:88px;
    font-size:.72rem;
  }
}


/* SOPHIE_AI_MODEL_SELECTOR_V1 */

.sophie-model-select{
  height:28px;
  max-width:154px;
  min-width:105px;
  padding:0 7px;
  border:0;
  border-radius:8px;
  background:rgba(127,127,127,.08);
  color:inherit;
  font:inherit;
  font-size:.76rem;
  cursor:pointer;
}

.sophie-model-select:hover{
  background:rgba(127,127,127,.14);
}

.sophie-model-select:focus{
  outline:1px solid rgba(127,127,127,.32);
  outline-offset:1px;
}

@media(max-width:640px){
  .sophie-model-select{
    max-width:125px;
    min-width:92px;
    font-size:.70rem;
  }
}


/* SOPHIE_RUNTIME_EVIDENCE_V1 */

.sophie-runtime-evidence{
  margin-top:8px;
  padding-top:6px;
  border-top:1px solid rgba(127,127,127,.14);
  font-size:.70rem;
  line-height:1.25;
  opacity:.55;
  user-select:text;
}

.msg.sophie .sophie-runtime-evidence{
  text-align:left;
}



/* SOPHIE_AI_SYSTEM_STATUS_V1 */

.sophie-system-status{
  margin:
    8px
    24px
    6px;
  border:
    1px solid
    rgba(127,127,127,.16);
  border-radius:
    12px;
  background:
    rgba(127,127,127,.045);
  overflow:
    hidden;
}

.sophie-system-status-summary{
  display:
    flex;
  align-items:
    center;
  gap:
    8px;
  min-height:
    34px;
  padding:
    6px 10px;
  cursor:
    pointer;
  user-select:
    none;
  list-style:
    none;
}

.sophie-system-status-summary::-webkit-details-marker{
  display:
    none;
}

.sophie-system-status-summary::before{
  content:
    "›";
  display:
    inline-block;
  font-size:
    18px;
  line-height:
    1;
  transform:
    rotate(0deg);
  transition:
    transform .12s ease;
  opacity:
    .65;
}

.sophie-system-status[open]
.sophie-system-status-summary::before{
  transform:
    rotate(90deg);
}

.sophie-system-status-title{
  font-size:
    12px;
  font-weight:
    700;
  letter-spacing:
    .04em;
  text-transform:
    uppercase;
  opacity:
    .72;
  margin-right:
    4px;
}

.sophie-system-status-pill{
  display:
    inline-flex;
  align-items:
    center;
  min-height:
    22px;
  padding:
    1px 8px;
  border-radius:
    999px;
  font-size:
    11px;
  font-weight:
    650;
  white-space:
    nowrap;
  border:
    1px solid
    rgba(127,127,127,.18);
  background:
    rgba(127,127,127,.08);
}

.sophie-system-status-pill::before{
  content:
    "";
  width:
    6px;
  height:
    6px;
  margin-right:
    5px;
  border-radius:
    50%;
  background:
    currentColor;
  opacity:
    .85;
}

.sophie-system-status-pill.ok{
  color:
    #24854f;
}

.sophie-system-status-pill.warn{
  color:
    #9a6a00;
}

.sophie-system-status-pill.error{
  color:
    #b43b3b;
}

.sophie-system-status-pill.unknown{
  color:
    #777;
}

.sophie-system-status-body{
  display:
    grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:
    8px;
  padding:
    2px 10px 10px;
}

.sophie-system-status-card{
  display:
    flex;
  flex-direction:
    column;
  gap:
    3px;
  min-width:
    0;
  padding:
    9px 10px;
  border-radius:
    9px;
  border:
    1px solid
    rgba(127,127,127,.13);
  background:
    rgba(127,127,127,.04);
}

.sophie-system-status-card > span{
  font-size:
    10px;
  font-weight:
    700;
  letter-spacing:
    .06em;
  text-transform:
    uppercase;
  opacity:
    .6;
}

.sophie-system-status-card > strong{
  font-size:
    15px;
}

.sophie-system-status-card > small{
  font-size:
    11px;
  line-height:
    1.35;
  opacity:
    .72;
  overflow-wrap:
    anywhere;
}

.sophie-system-status-timestamp{
  grid-column:
    1 / -1;
  padding:
    0 2px;
  font-size:
    10px;
  opacity:
    .55;
}

@media (max-width:760px){
  .sophie-system-status{
    margin:
      7px
      14px
      5px;
  }

  .sophie-system-status-summary{
    flex-wrap:
      wrap;
  }

  .sophie-system-status-title{
    width:
      100%;
  }

  .sophie-system-status-body{
    grid-template-columns:
      1fr;
  }
}



/* SOPHIE_AI_MOBILE_STATUS_SIDEBAR_V1 */

:root{
  --sophie-header-height:48px;
}

/*
 * Keep the application header above the mobile navigation.
 * This also guarantees that the menu / close button remains
 * reachable after the sidebar has been opened.
 */
body > header{
  position:sticky;
  top:0;
  z-index:1300;
}

/*
 * System status follows the viewport instead of disappearing
 * hundreds of lines above the current conversation.
 */
.sophie-system-status{
  position:sticky;
  top:var(--sophie-header-height);
  z-index:1050;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/*
 * The menu button itself remains unambiguously clickable.
 */
#menu{
  position:relative;
  z-index:1400;
}

@media(max-width:899px){

  body > header{
    position:sticky !important;
    top:0 !important;
    z-index:1300 !important;
  }

  #menu{
    position:relative !important;
    z-index:1400 !important;
    min-width:40px;
    min-height:32px;
    touch-action:manipulation;
  }

  /*
   * Sidebar stays below the application header in the
   * stacking order instead of covering the close control.
   */
  #side{
    z-index:1200 !important;
  }

  .sophie-system-status{
    position:sticky !important;
    top:var(--sophie-header-height) !important;
    z-index:1050 !important;

    margin:
      4px
      10px
      5px;

    background:
      rgba(250,250,251,.94);
  }

  .sophie-system-status-summary{
    min-height:30px;
    gap:5px;
    padding:
      4px
      7px;
    flex-wrap:nowrap;
    overflow:hidden;
  }

  .sophie-system-status-title{
    font-size:10px;
    margin-right:1px;
    flex:0 0 auto;
  }

  .sophie-system-status-pill{
    min-height:20px;
    padding:
      0
      6px;
    font-size:10px;
    flex:0 1 auto;
  }

  .sophie-system-status-pill::before{
    width:5px;
    height:5px;
    margin-right:4px;
  }
}

/*
 * Very narrow iPhone portrait layouts:
 * keep all three headline indicators in one compact strip.
 */
@media(max-width:430px){

  .sophie-system-status-summary{
    gap:4px;
  }

  .sophie-system-status-title{
    display:none;
  }

  .sophie-system-status-pill{
    font-size:9.5px;
    padding:
      0
      5px;
  }

  .sophie-system-status-summary::before{
    font-size:16px;
  }
}



/* SOPHIE_AI_HEADER_STATUS_MOBILE_MENU_V1 */

/*
 * The system monitor now lives in the application header.
 * The header itself never scrolls away.
 */
body > header{
  position:sticky !important;
  top:0 !important;
  z-index:9500 !important;
  overflow:visible !important;
}

body > header .sophie-system-status{
  position:relative !important;
  top:auto !important;
  z-index:1 !important;

  margin:
    0
    8px
    0
    auto;

  border:
    1px solid
    rgba(127,127,127,.16);

  border-radius:
    999px;

  background:
    rgba(127,127,127,.06);

  overflow:
    visible;
}

body > header
.sophie-system-status-summary{
  min-height:28px;
  padding:
    2px
    8px;

  gap:
    5px;

  flex-wrap:
    nowrap;

  overflow:
    visible;
}

body > header
.sophie-system-status-title{
  font-size:
    10px;

  margin-right:
    1px;
}

body > header
.sophie-system-status-pill{
  min-height:
    20px;

  padding:
    0
    6px;

  font-size:
    10px;
}

/*
 * Opening <details> must not increase the header height.
 * The detail cards float below the header instead.
 */
body > header
.sophie-system-status-body{
  position:absolute;

  top:
    calc(100% + 8px);

  right:
    0;

  width:
    min(
      680px,
      calc(100vw - 24px)
    );

  box-sizing:
    border-box;

  padding:
    10px;

  border:
    1px solid
    rgba(127,127,127,.18);

  border-radius:
    12px;

  background:
    rgba(250,250,251,.98);

  box-shadow:
    0 12px 36px
    rgba(0,0,0,.14);

  z-index:
    9800;
}

#status{
  margin-left:
    0 !important;
}


/*
 * Mobile navigation:
 * The button is attached to the viewport, not to the moving
 * sidebar layout. It therefore remains available as the
 * close button even while the sidebar is open.
 */
@media(max-width:899px){

  body > header{
    min-height:
      48px;

    box-sizing:
      border-box;

    padding-left:
      66px !important;

    z-index:
      9500 !important;
  }

  #menu{
    display:
      inline-flex !important;

    visibility:
      visible !important;

    opacity:
      1 !important;

    pointer-events:
      auto !important;

    position:
      fixed !important;

    left:
      14px !important;

    top:
      8px !important;

    width:
      42px !important;

    height:
      34px !important;

    min-width:
      42px !important;

    min-height:
      34px !important;

    align-items:
      center;

    justify-content:
      center;

    padding:
      0 !important;

    margin:
      0 !important;

    transform:
      none !important;

    z-index:
      11000 !important;

    touch-action:
      manipulation;
  }

  #side{
    z-index:
      9000 !important;
  }

  #side.open{
    z-index:
      9000 !important;
  }

  body > header
  .sophie-system-status{
    flex:
      0 0 auto;

    margin-left:
      auto;

    margin-right:
      6px;
  }

  body > header
  .sophie-system-status-summary{
    min-height:
      26px;

    padding:
      1px
      6px;

    gap:
      4px;
  }

  body > header
  .sophie-system-status-title{
    display:
      none;
  }

  /*
   * On an iPhone the three health indicators become three
   * colored dots. The full values are available by tapping.
   */
  body > header
  .sophie-system-status-pill{
    width:
      12px;

    min-width:
      12px;

    height:
      12px;

    min-height:
      12px;

    padding:
      0;

    border:
      0;

    background:
      transparent;

    font-size:
      0;

    overflow:
      hidden;
  }

  body > header
  .sophie-system-status-pill::before{
    width:
      8px;

    height:
      8px;

    margin:
      2px;

    flex:
      0 0 8px;
  }

  body > header
  .sophie-system-status-summary::before{
    font-size:
      14px;
  }

  body > header
  .sophie-system-status-body{
    position:
      fixed;

    top:
      calc(
        var(--sophie-header-height)
        + 6px
      );

    left:
      12px;

    right:
      12px;

    width:
      auto;

    max-height:
      calc(
        100vh
        - var(--sophie-header-height)
        - 30px
      );

    overflow-y:
      auto;

    grid-template-columns:
      1fr;

    z-index:
      12000;
  }
}


/*
 * Very small portrait screens:
 * preserve Sophie-AI, connection state and logout without
 * allowing the status widget to force horizontal scrolling.
 */
@media(max-width:430px){

  body > header{
    gap:
      5px;
  }

  body > header > strong{
    white-space:
      nowrap;
  }

  body > header
  .sophie-system-status{
    margin-right:
      2px;
  }

  body > header
  .sophie-system-status-summary{
    padding:
      1px
      4px;
  }

  #status{
    font-size:
      .78rem;
  }

  #logout{
    padding-left:
      9px;

    padding-right:
      9px;
  }
}



/* SOPHIE_AI_MOBILE_STATUS_DROPDOWN_V1 */

@media(max-width:899px){

  body > header
  .sophie-system-status-body{
    position:fixed !important;

    top:
      calc(
        var(--sophie-header-height)
        + 8px
      ) !important;

    left:
      12px !important;

    right:
      12px !important;

    width:
      calc(100vw - 24px) !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    box-sizing:
      border-box !important;

    grid-template-columns:
      1fr !important;

    gap:
      8px !important;

    padding:
      10px !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    z-index:
      12000 !important;
  }

  body > header
  .sophie-system-status-card{
    width:
      100% !important;

    min-width:
      0 !important;

    max-width:
      none !important;

    box-sizing:
      border-box !important;
  }

  body > header
  .sophie-system-status-card > span,
  body > header
  .sophie-system-status-card > strong,
  body > header
  .sophie-system-status-card > small{
    width:
      auto !important;

    min-width:
      0 !important;

    max-width:
      100% !important;

    white-space:
      normal !important;

    word-break:
      normal !important;

    overflow-wrap:
      anywhere !important;
  }

  body > header
  .sophie-system-status-card > strong{
    font-size:
      1rem !important;

    line-height:
      1.25 !important;
  }

  body > header
  .sophie-system-status-card > small{
    font-size:
      .78rem !important;

    line-height:
      1.4 !important;
  }

  body > header
  .sophie-system-status-timestamp{
    width:
      100% !important;

    min-width:
      0 !important;

    box-sizing:
      border-box !important;

    white-space:
      normal !important;

    overflow-wrap:
      anywhere !important;
  }
}



/* SOPHIE_CHAT_CANCEL_AGENT_SIDEBAR_V1 */

#send.sophie-cancel-active{
  font-weight:700;
}

.sophie-agent-results-panel{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid rgba(127,127,127,.22);
}

.sophie-agent-results-heading{
  margin:0 8px 8px;
  font-size:.78rem;
  font-weight:700;
  opacity:.72;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.sophie-agent-result-list{
  display:grid;
  gap:6px;
  padding:0 4px 12px;
}

.sophie-agent-result-item{
  display:grid;
  gap:4px;
  padding:8px;
  border-radius:9px;
  background:rgba(127,127,127,.08);
}

.sophie-agent-result-item strong{
  font-size:.82rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.sophie-agent-result-item code{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.72rem;
  opacity:.82;
}

.sophie-agent-result-output{
  font-size:.74rem;
  line-height:1.3;
  opacity:.86;
  overflow-wrap:anywhere;
}

.sophie-agent-result-item small{
  font-size:.68rem;
  opacity:.62;
  overflow-wrap:anywhere;
}



/* SOPHIE_AGENT_RESULT_FOLDER_V2 */

.sophie-agent-results-panel{
  margin-top:12px;
  border:0;
}

.sophie-agent-results-heading{
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  user-select:none;
  list-style:none;
  padding:9px 10px;
  border-radius:9px;
  background:rgba(127,127,127,.10);
  font-size:.84rem;
  font-weight:650;
}

.sophie-agent-results-heading::-webkit-details-marker{
  display:none;
}

.sophie-agent-folder-icon{
  width:1.25em;
  flex:0 0 auto;
}

.sophie-agent-result-count{
  margin-left:auto;
  min-width:1.3em;
  text-align:center;
  font-size:.70rem;
  opacity:.65;
}

.sophie-agent-result-list{
  display:grid;
  gap:7px;
  padding:8px 3px 12px;
}

.sophie-agent-result-item{
  display:grid;
  gap:5px;
  padding:9px;
  border-radius:9px;
  background:rgba(127,127,127,.07);
}

.sophie-agent-result-item strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.82rem;
}

.sophie-agent-result-item code{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.69rem;
  opacity:.72;
}

.sophie-agent-result-output{
  font-size:.74rem;
  line-height:1.32;
  opacity:.86;
  overflow-wrap:anywhere;
}

.sophie-agent-result-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
}

.sophie-agent-result-link,
.sophie-agent-result-delete{
  appearance:none;
  border:0;
  border-radius:7px;
  padding:5px 7px;
  font:inherit;
  font-size:.72rem;
  cursor:pointer;
  text-decoration:none;
}

.sophie-agent-result-link{
  background:rgba(127,127,127,.12);
}

.sophie-agent-result-delete{
  background:rgba(127,127,127,.10);
}

.sophie-agent-result-delete:disabled{
  opacity:.45;
  cursor:default;
}

.sophie-agent-result-item small{
  font-size:.66rem;
  opacity:.58;
  overflow-wrap:anywhere;
}

.sophie-agent-result-empty{
  padding:8px 9px;
  font-size:.75rem;
  opacity:.62;
}


/* SOPHIE_AGENT_RESULTS_MENU_V3 */

#sophieAgentResultsMenuButton{
  width:100%;
}

#sophieAgentResultsMenuButton.sophie-agent-results-menu-active{
  font-weight:650;
}

.sophie-agent-results-view{
  box-sizing:border-box;
  width:100%;
  height:100%;
  min-height:0;
  overflow-y:auto;
  padding:28px clamp(18px,4vw,42px) 40px;
}

.sophie-agent-results-view[hidden]{
  display:none !important;
}

.sophie-agent-results-view-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin:0 auto 22px;
  max-width:1050px;
}

.sophie-agent-results-view-header h2{
  margin:0 0 5px;
  font-size:1.35rem;
}

.sophie-agent-results-view-header p{
  margin:0;
  opacity:.65;
  font-size:.88rem;
}

.sophie-agent-results-main-count{
  white-space:nowrap;
  font-size:.78rem;
  opacity:.6;
  padding-top:5px;
}

.sophie-agent-results-main-list{
  display:grid;
  gap:12px;
  max-width:1050px;
  margin:0 auto;
  padding-bottom:24px;
}

.sophie-agent-result-main-card{
  display:grid;
  gap:9px;
  padding:15px 16px;
  border-radius:12px;
  background:rgba(127,127,127,.07);
}

.sophie-agent-result-main-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}

.sophie-agent-result-main-head strong{
  min-width:0;
  overflow-wrap:anywhere;
}

.sophie-agent-result-main-head small{
  flex:0 0 auto;
  opacity:.55;
  font-size:.72rem;
}

.sophie-agent-result-main-path{
  display:block;
  overflow-wrap:anywhere;
  white-space:normal;
  font-size:.72rem;
  opacity:.65;
}

.sophie-agent-result-main-output{
  line-height:1.45;
  font-size:.88rem;
  overflow-wrap:anywhere;
}

.sophie-agent-result-main-meta{
  font-size:.72rem;
  opacity:.55;
}

.sophie-agent-result-main-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:2px;
}

.sophie-agent-result-main-link,
.sophie-agent-result-main-delete{
  appearance:none;
  border:0;
  border-radius:8px;
  padding:7px 10px;
  font:inherit;
  font-size:.78rem;
  cursor:pointer;
  text-decoration:none;
  background:rgba(127,127,127,.12);
}

.sophie-agent-result-main-delete:disabled{
  opacity:.45;
  cursor:default;
}

.sophie-agent-results-empty{
  padding:20px;
  border-radius:12px;
  background:rgba(127,127,127,.06);
  opacity:.65;
}

@media (max-width:700px){
  .sophie-agent-results-view{
    padding:18px 14px 30px;
  }

  .sophie-agent-results-view-header{
    display:block;
  }

  .sophie-agent-results-main-count{
    display:block;
    margin-top:8px;
  }

  .sophie-agent-result-main-head{
    display:block;
  }

  .sophie-agent-result-main-head small{
    display:block;
    margin-top:4px;
  }
}

/* SOPHIE_APPEARANCE_SETTINGS_V1 */

:root{
  color-scheme:dark;
  --sophie-theme-bg:#202020;
  --sophie-theme-surface:#292929;
  --sophie-theme-surface-2:#333333;
  --sophie-theme-text:#f2f2f2;
  --sophie-theme-muted:#a9a9a9;
  --sophie-theme-border:rgba(255,255,255,.10);
}

html[data-sophie-theme="dark"]{
  color-scheme:dark;
  --sophie-theme-bg:#202020;
  --sophie-theme-surface:#292929;
  --sophie-theme-surface-2:#333333;
  --sophie-theme-text:#f2f2f2;
  --sophie-theme-muted:#a9a9a9;
  --sophie-theme-border:rgba(255,255,255,.10);
}

html[data-sophie-theme="light"]{
  color-scheme:light;
  --sophie-theme-bg:#f6f6f6;
  --sophie-theme-surface:#ffffff;
  --sophie-theme-surface-2:#eeeeee;
  --sophie-theme-text:#202020;
  --sophie-theme-muted:#666666;
  --sophie-theme-border:rgba(0,0,0,.12);
}

html[data-sophie-theme] body{
  background:var(--sophie-theme-bg) !important;
  color:var(--sophie-theme-text) !important;
}

html[data-sophie-theme] header,
html[data-sophie-theme] #side{
  background:var(--sophie-theme-surface) !important;
  color:var(--sophie-theme-text) !important;
  border-color:var(--sophie-theme-border) !important;
}

html[data-sophie-theme] main,
html[data-sophie-theme] #chat,
html[data-sophie-theme] #auth,
html[data-sophie-theme] #personalization,
html[data-sophie-theme] #placeholder,
html[data-sophie-theme] .sophie-agent-results-view{
  background:var(--sophie-theme-bg) !important;
  color:var(--sophie-theme-text) !important;
}

html[data-sophie-theme] input,
html[data-sophie-theme] textarea,
html[data-sophie-theme] select{
  background:var(--sophie-theme-surface) !important;
  color:var(--sophie-theme-text) !important;
  border-color:var(--sophie-theme-border) !important;
}

html[data-sophie-theme] button,
html[data-sophie-theme] a{
  color:inherit;
}

html[data-sophie-theme] .msg.sophie,
html[data-sophie-theme] .sophie-agent-result-main-card,
html[data-sophie-theme] .sophie-published-website-card{
  background:var(--sophie-theme-surface) !important;
  color:var(--sophie-theme-text) !important;
}

html[data-sophie-theme] .msg.user{
  background:var(--sophie-theme-surface-2) !important;
  color:var(--sophie-theme-text) !important;
}

html[data-sophie-theme] code{
  color:var(--sophie-theme-text);
}

html[data-sophie-theme] .settings-lead,
html[data-sophie-theme] small,
html[data-sophie-theme] .sophie-appearance-description{
  color:var(--sophie-theme-muted);
}

.sophie-appearance-settings{
  margin:18px 0 24px;
  padding:16px;
  border:1px solid var(--sophie-theme-border);
  border-radius:12px;
  background:var(--sophie-theme-surface);
}

.sophie-appearance-settings h2{
  margin:0 0 5px;
  font-size:1rem;
}

.sophie-appearance-description{
  margin:0 0 12px;
  font-size:.82rem;
}

.sophie-appearance-choices{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.sophie-appearance-choice{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border:1px solid var(--sophie-theme-border);
  border-radius:9px;
  background:var(--sophie-theme-surface-2);
  cursor:pointer;
  user-select:none;
}

.sophie-appearance-choice input{
  margin:0;
}

/* SOPHIE_PUBLISHED_WEBPAGES_UI_V1 */

.sophie-published-websites{
  display:grid;
  gap:10px;
  margin-bottom:10px;
}

.sophie-published-websites h3,
.sophie-agent-results-section-title{
  margin:4px 0 2px;
  font-size:.92rem;
  opacity:.76;
}

.sophie-published-websites-grid{
  display:grid;
  gap:10px;
  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px,1fr)
    );
}

.sophie-published-website-card{
  display:grid;
  gap:7px;
  padding:14px 15px;
  border:1px solid var(--sophie-theme-border);
  border-radius:12px;
}

.sophie-published-website-card strong{
  overflow-wrap:anywhere;
}

.sophie-published-website-card code{
  font-size:.72rem;
  opacity:.66;
  overflow-wrap:anywhere;
  white-space:normal;
}

.sophie-published-website-card small{
  font-size:.69rem;
  opacity:.58;
  overflow-wrap:anywhere;
}

@media(max-width:700px){
  .sophie-appearance-choices{
    display:grid;
    grid-template-columns:1fr;
  }

  .sophie-published-websites-grid{
    grid-template-columns:1fr;
  }
}

/* SOPHIE_UI_FILE_AUTH_BLOCK_V1 */

/* darker composer in dark mode */
html[data-sophie-theme="dark"] #composer{
  background:var(--sophie-theme-bg) !important;
}

html[data-sophie-theme="dark"] .composer-shell{
  background:#242424 !important;
  border-color:var(--sophie-theme-border) !important;
}

html[data-sophie-theme="dark"] .composer-shell #input{
  background:#242424 !important;
  color:var(--sophie-theme-text) !important;
  caret-color:var(--sophie-theme-text);
}

html[data-sophie-theme="dark"] .composer-shell #input::placeholder{
  color:var(--sophie-theme-muted) !important;
}

/* remember-me */
.sophie-remember-login{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0;
  font-size:.86rem;
  cursor:pointer;
}

.sophie-remember-login input{
  width:auto;
  margin:0;
}

/* password settings */
.sophie-owner-security-settings{
  margin:18px 0 24px;
  padding:16px;
  border:1px solid var(--sophie-theme-border);
  border-radius:12px;
  background:var(--sophie-theme-surface);
}

.sophie-owner-security-settings h2{
  margin:0 0 5px;
  font-size:1rem;
}

.sophie-owner-security-description{
  margin:0 0 14px;
  color:var(--sophie-theme-muted);
  font-size:.82rem;
}

.sophie-password-change-form{
  display:grid;
  gap:12px;
  max-width:520px;
}

.sophie-password-change-form label{
  display:grid;
  gap:5px;
}

.sophie-password-change-form label > span{
  font-size:.78rem;
  color:var(--sophie-theme-muted);
}

.sophie-password-change-form input{
  min-height:38px;
  padding:7px 10px;
  border:1px solid var(--sophie-theme-border);
  border-radius:9px;
}

.sophie-password-change-form button{
  justify-self:start;
  padding:8px 13px;
}

.sophie-password-change-status{
  min-height:1.2em;
  margin:0;
  font-size:.78rem;
  color:var(--sophie-theme-muted);
}

/* publication delete */
.sophie-published-delete-button{
  cursor:pointer;
  border:1px solid var(--sophie-theme-border);
  border-radius:8px;
  padding:7px 10px;
  background:transparent;
}

/* clickable Agent result path */
.sophie-agent-result-path-link{
  display:block;
  width:100%;
  padding:0;
  border:0;
  background:transparent !important;
  text-align:left;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem;
  color:var(--sophie-theme-muted) !important;
  cursor:pointer;
  overflow-wrap:anywhere;
}

.sophie-agent-result-path-link:hover{
  text-decoration:underline;
  color:var(--sophie-theme-text) !important;
}

/* safe workspace browser */
.sophie-agent-path-dialog{
  width:min(900px,92vw);
  height:min(720px,86vh);
  padding:0;
  border:1px solid var(--sophie-theme-border);
  border-radius:14px;
  background:var(--sophie-theme-bg);
  color:var(--sophie-theme-text);
}

.sophie-agent-path-dialog::backdrop{
  background:rgba(0,0,0,.55);
}

.sophie-agent-path-dialog-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--sophie-theme-border);
  background:var(--sophie-theme-surface);
}

#sophieAgentPathBase{
  margin-top:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.7rem;
  color:var(--sophie-theme-muted);
  overflow-wrap:anywhere;
}

#sophieAgentPathClose{
  width:36px;
  height:36px;
  border:0;
  border-radius:8px;
  background:transparent;
  font-size:1.4rem;
  cursor:pointer;
}

.sophie-agent-path-toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-bottom:1px solid var(--sophie-theme-border);
}

.sophie-agent-path-content{
  height:calc(100% - 118px);
  overflow:auto;
  padding:14px 16px;
}

.sophie-agent-path-list{
  display:grid;
  gap:5px;
}

.sophie-agent-path-entry{
  width:100%;
  padding:9px 10px;
  border:1px solid var(--sophie-theme-border);
  border-radius:8px;
  background:var(--sophie-theme-surface);
  color:var(--sophie-theme-text);
  text-align:left;
  cursor:pointer;
}

.sophie-agent-path-file{
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.78rem;
  line-height:1.45;
}

@media(max-width:700px){
  .sophie-agent-path-dialog{
    width:96vw;
    height:88vh;
  }

  .sophie-agent-path-toolbar{
    align-items:flex-start;
    flex-direction:column;
  }
}

/* SOPHIE_AI_SYSTEM_STATUS_THEME_FIX_V1_BEGIN */

/*
 * Keep the expanded Systemstatus panel aligned with the active
 * Sophie-AI appearance theme.
 *
 * Scope intentionally limited to:
 *   - expanded status dropdown
 *   - status cards inside that dropdown
 */

html[data-sophie-theme]
body > header
.sophie-system-status-body{
  background:
    var(--sophie-theme-surface) !important;

  color:
    var(--sophie-theme-text) !important;

  border-color:
    var(--sophie-theme-border) !important;
}

html[data-sophie-theme]
body > header
.sophie-system-status-card{
  background:
    var(--sophie-theme-surface-2) !important;

  color:
    var(--sophie-theme-text) !important;

  border-color:
    var(--sophie-theme-border) !important;
}

html[data-sophie-theme]
body > header
.sophie-system-status-timestamp{
  color:
    var(--sophie-theme-muted) !important;
}

/* SOPHIE_AI_SYSTEM_STATUS_THEME_FIX_V1_END */


/* SOPHIE_PAPERLESS_IMPORT_UI_CSS_V1 */

.sophie-paperless-import-menu{
  width:calc(100% - 16px);
  margin:8px;
  padding:10px 12px;
  border:1px solid var(--sophie-theme-border);
  border-radius:10px;
  background:var(--sophie-theme-surface-2);
  color:var(--sophie-theme-text);
  text-align:left;
  cursor:pointer;
}

.sophie-paperless-import-menu:hover{
  filter:brightness(1.06);
}

.sophie-paperless-import-view{
  position:fixed;
  inset:var(--sophie-header-height,56px) 0 0 0;
  z-index:8500;
  overflow:auto;
  padding:24px;
  background:var(--sophie-theme-bg);
  color:var(--sophie-theme-text);
}

.sophie-paperless-import-view[hidden]{
  display:none !important;
}

.sophie-paperless-import-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  max-width:1100px;
  margin:0 auto 18px;
}

.sophie-paperless-import-head h1{
  margin:0 0 5px;
  font-size:1.55rem;
}

.sophie-paperless-import-lead{
  margin:0;
  color:var(--sophie-theme-muted);
}

.sophie-paperless-import-close{
  border:1px solid var(--sophie-theme-border);
  border-radius:9px;
  padding:8px 12px;
  background:var(--sophie-theme-surface);
  color:var(--sophie-theme-text);
  cursor:pointer;
}

.sophie-paperless-import-card{
  max-width:1100px;
  margin:0 auto 16px;
  padding:18px;
  border:1px solid var(--sophie-theme-border);
  border-radius:14px;
  background:var(--sophie-theme-surface);
  color:var(--sophie-theme-text);
}

.sophie-paperless-import-card h2{
  margin:0 0 14px;
  font-size:1.05rem;
}

.sophie-paperless-import-status-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.sophie-paperless-import-status-row strong{
  display:block;
  margin-top:3px;
  font-size:1.25rem;
}

.sophie-paperless-import-status-row strong[data-status="running"]{
  color:#48a96a;
}

.sophie-paperless-import-status-row strong[data-status="paused"]{
  color:#d6a43c;
}

.sophie-paperless-import-status-row strong[data-status="failed"]{
  color:#cf5757;
}

.sophie-paperless-import-eyebrow{
  display:block;
  color:var(--sophie-theme-muted);
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.sophie-paperless-import-progress{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:var(--sophie-theme-surface-2);
}

#sophiePaperlessImportProgressBar{
  width:0;
  height:100%;
  background:currentColor;
  opacity:.72;
  transition:width .2s ease;
}

#sophiePaperlessImportProgressText{
  margin-top:7px;
  color:var(--sophie-theme-muted);
  font-size:.88rem;
}

.sophie-paperless-import-stats{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  max-width:1100px;
  margin:0 auto 16px;
}

.sophie-paperless-import-stat{
  padding:13px;
  border:1px solid var(--sophie-theme-border);
  border-radius:12px;
  background:var(--sophie-theme-surface);
}

.sophie-paperless-import-stat span{
  display:block;
  margin-bottom:5px;
  color:var(--sophie-theme-muted);
  font-size:.78rem;
}

.sophie-paperless-import-stat strong{
  font-size:1.25rem;
}

.sophie-paperless-import-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.sophie-paperless-import-buttons button,
#sophiePaperlessScheduleSave{
  padding:9px 13px;
  border:1px solid var(--sophie-theme-border);
  border-radius:9px;
  background:var(--sophie-theme-surface-2);
  color:var(--sophie-theme-text);
  cursor:pointer;
}

.sophie-paperless-import-buttons button:disabled{
  opacity:.38;
  cursor:not-allowed;
}

.sophie-paperless-import-form-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:14px 0;
}

.sophie-paperless-import-form-grid label{
  display:flex;
  flex-direction:column;
  gap:6px;
  color:var(--sophie-theme-muted);
  font-size:.84rem;
}

.sophie-paperless-import-form-grid input{
  width:100%;
  box-sizing:border-box;
  padding:9px;
  border:1px solid var(--sophie-theme-border);
  border-radius:8px;
  background:var(--sophie-theme-surface-2);
  color:var(--sophie-theme-text);
}

.sophie-paperless-import-check{
  display:flex;
  align-items:center;
  gap:8px;
}

.sophie-paperless-import-note{
  margin:12px 0 0;
  color:var(--sophie-theme-muted);
  font-size:.83rem;
  line-height:1.45;
}

.sophie-paperless-import-message{
  max-width:1100px;
  min-height:22px;
  margin:0 auto;
  padding:0 4px 24px;
  color:var(--sophie-theme-muted);
}

.sophie-paperless-import-message.ok{
  color:#48a96a;
}

.sophie-paperless-import-message.error{
  color:#cf5757;
}

@media(max-width:900px){
  .sophie-paperless-import-stats{
    grid-template-columns:
      repeat(3,minmax(0,1fr));
  }

  .sophie-paperless-import-form-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media(max-width:560px){
  .sophie-paperless-import-view{
    padding:14px;
  }

  .sophie-paperless-import-head{
    flex-direction:column;
  }

  .sophie-paperless-import-status-row{
    align-items:flex-start;
    flex-direction:column;
  }

  .sophie-paperless-import-stats{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }

  .sophie-paperless-import-form-grid{
    grid-template-columns:1fr;
  }
}


/* SOPHIE_PAPERLESS_SCHEDULE_UI_CSS_V1 */

.sophie-paperless-schedule-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:26px;
  margin:0 0 14px;
  padding:3px 10px;
  border:1px solid var(--sophie-theme-border);
  border-radius:999px;
  background:var(--sophie-theme-surface-2);
  color:var(--sophie-theme-muted);
  font-size:.8rem;
  font-weight:650;
}

.sophie-paperless-schedule-status::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:currentColor;
}

.sophie-paperless-schedule-status.active{
  color:#48a96a;
}

.sophie-paperless-schedule-status.inactive{
  color:var(--sophie-theme-muted);
}

#sophiePaperlessScheduleReset{
  margin-left:9px;
  padding:9px 13px;
  border:1px solid var(--sophie-theme-border);
  border-radius:9px;
  background:transparent;
  color:var(--sophie-theme-text);
  cursor:pointer;
}

#sophiePaperlessScheduleReset:hover{
  background:var(--sophie-theme-surface-2);
}

#sophiePaperlessScheduleReset:disabled{
  opacity:.4;
  cursor:not-allowed;
}

@media(max-width:560px){
  #sophiePaperlessScheduleReset{
    display:block;
    width:100%;
    margin:
      9px
      0
      0;
  }

  #sophiePaperlessScheduleSave{
    width:100%;
  }
}


/* SOPHIE_PAPERLESS_PILOT_UI_CSS_V2 */

.sophie-paperless-pilot-label{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:15px 0 12px;
  color:var(--sophie-theme-muted);
  font-size:.85rem;
}

.sophie-paperless-pilot-label input{
  width:100%;
  box-sizing:border-box;
  padding:10px;
  border:1px solid var(--sophie-theme-border);
  border-radius:9px;
  background:var(--sophie-theme-surface-2);
  color:var(--sophie-theme-text);
}

.sophie-paperless-pilot-meta{
  margin-top:10px;
  color:var(--sophie-theme-muted);
  font-size:.82rem;
}

.sophie-paperless-pilot-documents{
  margin-top:14px;
  overflow:hidden;
  border:1px solid var(--sophie-theme-border);
  border-radius:10px;
}

.sophie-paperless-pilot-row{
  display:grid;
  grid-template-columns:
    85px
    minmax(0,1fr)
    135px
    180px;
  gap:10px;
  align-items:center;
  padding:9px 11px;
  border-bottom:1px solid var(--sophie-theme-border);
  font-size:.82rem;
}

.sophie-paperless-pilot-row:last-child{
  border-bottom:0;
}

.sophie-paperless-pilot-row span{
  min-width:0;
  overflow-wrap:anywhere;
}

.sophie-paperless-pilot-empty{
  padding:12px;
  color:var(--sophie-theme-muted);
  font-size:.82rem;
}

@media(max-width:700px){
  .sophie-paperless-pilot-row{
    grid-template-columns:
      70px
      minmax(0,1fr);
  }
}


/* SOPHIE_PAPERLESS_SEARCH_FRONTEND_V1 */

#sophiePaperlessSearchMenu.sophie-paperless-search-menu-active{
  background:var(--sophie-theme-surface-2,#e8e8e8);
  font-weight:600;
}

.sophie-paperless-search-view{
  width:min(1100px,100%);
  box-sizing:border-box;
  margin:0 auto;
  padding:28px 28px 48px;
  color:var(--sophie-theme-text,#202020);
}

.sophie-paperless-search-view[hidden]{
  display:none !important;
}

.sophie-paperless-search-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
}

.sophie-paperless-search-header h2{
  margin:4px 0 8px;
  font-size:1.7rem;
}

.sophie-paperless-search-header p{
  margin:0;
  color:var(--sophie-theme-muted,#666);
  line-height:1.5;
}

.sophie-paperless-search-eyebrow{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.09em;
  color:var(--sophie-theme-muted,#666);
}

.sophie-paperless-search-readonly{
  flex:0 0 auto;
  padding:6px 10px;
  border:1px solid var(--sophie-theme-border,rgba(0,0,0,.12));
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  background:var(--sophie-theme-surface,#fff);
}

.sophie-paperless-search-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}

.sophie-paperless-search-form input{
  width:100%;
  min-width:0;
  box-sizing:border-box;
  padding:12px 14px;
  border:1px solid var(--sophie-theme-border,rgba(0,0,0,.15));
  border-radius:12px;
  background:var(--sophie-theme-surface,#fff);
  color:var(--sophie-theme-text,#202020);
}

.sophie-paperless-search-form button{
  min-width:96px;
  padding:12px 18px;
  border:1px solid var(--sophie-theme-border,rgba(0,0,0,.15));
  border-radius:12px;
  background:var(--sophie-theme-surface-2,#e9e9e9);
  color:var(--sophie-theme-text,#202020);
  font-weight:600;
}

.sophie-paperless-search-form button:disabled{
  opacity:.55;
  cursor:default;
}

.sophie-paperless-search-hint{
  margin:9px 2px 0;
  color:var(--sophie-theme-muted,#666);
  font-size:.83rem;
}

.sophie-paperless-search-status{
  min-height:22px;
  margin:16px 0 2px;
  font-size:.9rem;
}

.sophie-paperless-search-status[data-kind="error"]{
  font-weight:600;
}

.sophie-paperless-search-status[data-kind="warning"]{
  font-weight:600;
}

.sophie-paperless-search-summary{
  margin:12px 0;
  color:var(--sophie-theme-muted,#666);
  font-size:.85rem;
}

.sophie-paperless-search-results{
  display:grid;
  gap:14px;
}

.sophie-paperless-search-card{
  box-sizing:border-box;
  padding:18px;
  border:1px solid var(--sophie-theme-border,rgba(0,0,0,.12));
  border-radius:14px;
  background:var(--sophie-theme-surface,#fff);
}

.sophie-paperless-search-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.sophie-paperless-search-card-head h3{
  margin:0;
  font-size:1.06rem;
  overflow-wrap:anywhere;
}

.sophie-paperless-search-quality{
  flex:0 0 auto;
  padding:4px 8px;
  border-radius:999px;
  background:var(--sophie-theme-surface-2,#eee);
  font-size:.72rem;
  font-weight:600;
  white-space:nowrap;
}

.sophie-paperless-search-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px 16px;
}

.sophie-paperless-search-meta-row{
  min-width:0;
}

.sophie-paperless-search-meta-label{
  display:block;
  margin-bottom:2px;
  color:var(--sophie-theme-muted,#666);
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.035em;
}

.sophie-paperless-search-meta-value{
  display:block;
  overflow-wrap:anywhere;
  font-size:.84rem;
}

.sophie-paperless-search-excerpt{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid var(--sophie-theme-border,rgba(0,0,0,.10));
  line-height:1.55;
  font-size:.92rem;
  white-space:normal;
}

.sophie-paperless-search-card-footer{
  margin-top:12px;
  color:var(--sophie-theme-muted,#666);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.72rem;
  overflow-wrap:anywhere;
}

.sophie-paperless-search-empty{
  padding:30px 20px;
  text-align:center;
  border:1px dashed var(--sophie-theme-border,rgba(0,0,0,.16));
  border-radius:14px;
  color:var(--sophie-theme-muted,#666);
}

@media (max-width:800px){
  .sophie-paperless-search-view{
    padding:20px 16px 36px;
  }

  .sophie-paperless-search-header{
    gap:12px;
  }

  .sophie-paperless-search-meta{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:560px){
  .sophie-paperless-search-header{
    flex-direction:column;
  }

  .sophie-paperless-search-form{
    grid-template-columns:1fr;
  }

  .sophie-paperless-search-form button{
    width:100%;
  }

  .sophie-paperless-search-meta{
    grid-template-columns:1fr;
  }

  .sophie-paperless-search-card-head{
    flex-direction:column;
  }

  .sophie-paperless-search-quality{
    white-space:normal;
  }
}

/* SOPHIE_PAPERLESS_LINK_V1 */

.sophie-paperless-search-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.sophie-paperless-search-open-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border:1px solid var(--sophie-theme-border,rgba(0,0,0,.14));
  border-radius:9px;
  background:var(--sophie-theme-surface-2,#eee);
  color:var(--sophie-theme-text,#202020);
  text-decoration:none;
  font-family:inherit;
  font-size:.78rem;
  font-weight:600;
}

.sophie-paperless-search-open-link:hover{
  text-decoration:none;
  filter:brightness(1.05);
}

.sophie-paperless-search-open-link:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}


/* SOPHIE_PAPERLESS_MANUAL_BATCH_UI_V1 */

.sophie-paperless-manual-batch-controls{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:12px 0;
  padding:10px 12px;
  border:1px solid rgba(127,127,127,.18);
  border-radius:10px;
  background:rgba(127,127,127,.045);
}

.sophie-paperless-manual-batch-controls label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.sophie-paperless-manual-batch-controls input{
  width:130px;
  max-width:40%;
}

.sophie-paperless-manual-batch-controls small{
  opacity:.72;
}

.sophie-paperless-manual-batch-status{
  min-height:18px;
  font-size:12px;
  line-height:1.45;
}

.sophie-paperless-manual-batch-status[data-kind="error"]{
  font-weight:650;
}


/* SOPHIE_AI_CHAT_MARKDOWN_STYLE_V1 */

.msg.sophie.sophie-markdown{
  line-height:1.55;
}

.msg.sophie.sophie-markdown > :first-child{
  margin-top:0;
}

.msg.sophie.sophie-markdown > :last-child{
  margin-bottom:0;
}

.msg.sophie.sophie-markdown p{
  margin:.55em 0;
}

.msg.sophie.sophie-markdown ul,
.msg.sophie.sophie-markdown ol{
  margin:.55em 0;
  padding-left:1.5em;
}

.msg.sophie.sophie-markdown li{
  margin:.22em 0;
}

.msg.sophie.sophie-markdown h1,
.msg.sophie.sophie-markdown h2,
.msg.sophie.sophie-markdown h3,
.msg.sophie.sophie-markdown h4{
  margin:1em 0 .45em;
  line-height:1.25;
}

.msg.sophie.sophie-markdown h1{
  font-size:1.35rem;
}

.msg.sophie.sophie-markdown h2{
  font-size:1.2rem;
}

.msg.sophie.sophie-markdown h3{
  font-size:1.08rem;
}

.msg.sophie.sophie-markdown blockquote{
  margin:.7em 0;
  padding:.2em 0 .2em .85em;
  border-left:3px solid rgba(127,127,127,.35);
  opacity:.9;
}

.msg.sophie.sophie-markdown pre{
  max-width:100%;
  overflow:auto;
}

.msg.sophie.sophie-markdown code{
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;
}

.msg.sophie.sophie-markdown a{
  text-decoration:underline;
  overflow-wrap:anywhere;
}


/* SOPHIE_AI_EMOJI_PICKER_STYLE_V1 */

#composer{
  position:fixed;
}

.sophie-emoji-picker-button{
  flex:0 0 auto;
  width:38px;
  min-width:38px;
  height:38px;
  padding:0;
  border:1px solid rgba(127,127,127,.22);
  border-radius:10px;
  background:rgba(127,127,127,.07);
  color:inherit;
  font-size:1.15rem;
  line-height:1;
  cursor:pointer;
}

.sophie-emoji-picker-button:hover{
  background:rgba(127,127,127,.14);
}

.sophie-emoji-picker-button:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}

.sophie-emoji-picker{
  position:absolute;
  right:62px;
  bottom:calc(100% + 8px);
  width:min(330px,calc(100vw - 28px));
  max-height:340px;
  overflow:auto;
  padding:10px;
  border:1px solid rgba(127,127,127,.22);
  border-radius:14px;
  background:var(
    --sophie-theme-surface,
    #fff
  );
  color:var(
    --sophie-theme-text,
    #222
  );
  box-shadow:
    0 12px 35px
    rgba(0,0,0,.18);
  z-index:1000;
}

.sophie-emoji-picker[hidden]{
  display:none !important;
}

.sophie-emoji-picker-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 8px;
  padding:1px 2px 7px;
  border-bottom:1px solid
    rgba(127,127,127,.15);
  font-size:.84rem;
}

.sophie-emoji-picker-close{
  width:28px;
  height:28px;
  padding:0;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  font-size:1.35rem;
  line-height:1;
  cursor:pointer;
}

.sophie-emoji-picker-close:hover{
  background:rgba(127,127,127,.12);
}

.sophie-emoji-picker-grid{
  display:grid;
  grid-template-columns:
    repeat(8,1fr);
  gap:4px;
}

.sophie-emoji-option{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  aspect-ratio:1;
  padding:4px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:inherit;
  font-size:1.35rem;
  cursor:pointer;
}

.sophie-emoji-option:hover,
.sophie-emoji-option:focus-visible{
  background:rgba(127,127,127,.12);
}

@media(max-width:640px){
  .sophie-emoji-picker{
    right:0;
    width:min(
      330px,
      calc(100vw - 28px)
    );
  }

  .sophie-emoji-picker-grid{
    grid-template-columns:
      repeat(7,1fr);
  }
}

/* SOPHIE_IMPORT_HUB_CANDIDATE_V1 */

.sophie-import-hub-view,
.sophie-openarchiver-import-view{
  width:min(1100px,100%);
  box-sizing:border-box;
  margin:0 auto;
  padding:28px 28px 48px;
  color:var(--sophie-theme-text,#202020);
}

.sophie-import-hub-view[hidden],
.sophie-openarchiver-import-view[hidden]{
  display:none !important;
}

.sophie-import-hub-head,
.sophie-openarchiver-import-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:24px;
}

.sophie-import-hub-head h1,
.sophie-openarchiver-import-head h1{
  margin:4px 0 8px;
}

.sophie-import-hub-head p,
.sophie-openarchiver-import-head p{
  margin:0;
  color:var(--sophie-theme-muted,#666);
}

.sophie-import-eyebrow{
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--sophie-theme-muted,#666);
}

.sophie-import-source-grid{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:16px;
}

.sophie-import-source-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
  min-height:130px;
  padding:20px;
  border:1px solid
    var(--sophie-theme-border,rgba(0,0,0,.12));
  border-radius:14px;
  background:
    var(--sophie-theme-surface,#fff);
  color:inherit;
  text-align:left;
  cursor:pointer;
}

.sophie-import-source-card strong{
  font-size:1.05rem;
}

.sophie-import-source-card span{
  color:var(--sophie-theme-muted,#666);
  line-height:1.45;
}

.sophie-openarchiver-import-card{
  margin:0 0 16px;
  padding:18px;
  border:1px solid
    var(--sophie-theme-border,rgba(0,0,0,.12));
  border-radius:14px;
  background:
    var(--sophie-theme-surface,#fff);
}

.sophie-openarchiver-status-row{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}

.sophie-openarchiver-status-row span{
  display:block;
  margin-bottom:4px;
  color:var(--sophie-theme-muted,#666);
  font-size:.75rem;
}

.sophie-openarchiver-stats{
  display:grid;
  grid-template-columns:
    repeat(3,minmax(0,1fr));
  gap:10px;
}

.sophie-openarchiver-stats > div{
  padding:12px;
  border-radius:10px;
  background:
    var(--sophie-theme-surface-2,#eee);
}

.sophie-openarchiver-stats span{
  display:block;
  margin-bottom:5px;
  color:var(--sophie-theme-muted,#666);
  font-size:.75rem;
}

.sophie-openarchiver-batch-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:12px 0;
}

.sophie-openarchiver-batch-label input{
  width:90px;
}

.sophie-openarchiver-import-buttons{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
}

.sophie-openarchiver-import-buttons button,
.sophie-openarchiver-import-head button{
  padding:9px 13px;
  border:1px solid
    var(--sophie-theme-border,rgba(0,0,0,.14));
  border-radius:9px;
  background:
    var(--sophie-theme-surface-2,#eee);
  color:inherit;
  cursor:pointer;
}

.sophie-openarchiver-note{
  margin:12px 0 0;
  color:var(--sophie-theme-muted,#666);
  font-size:.82rem;
}

.sophie-openarchiver-import-card pre{
  margin:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:.78rem;
}

@media(max-width:700px){
  .sophie-import-source-grid{
    grid-template-columns:1fr;
  }

  .sophie-openarchiver-stats{
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }
}

@media(max-width:520px){
  .sophie-import-hub-view,
  .sophie-openarchiver-import-view{
    padding:20px 16px 36px;
  }

  .sophie-openarchiver-import-head{
    flex-direction:column;
  }

  .sophie-openarchiver-stats{
    grid-template-columns:1fr;
  }

  .sophie-openarchiver-import-buttons{
    flex-direction:column;
  }

  .sophie-openarchiver-import-buttons button{
    width:100%;
  }
}

/* SOPHIE_OPENARCHIVER_PROGRESS_UI_V1_BEGIN */

.sophie-openarchiver-progress{
  margin:1rem 0 1.15rem;
  padding:1rem;
  border:1px solid var(--sophie-theme-border);
  border-radius:12px;
  background:var(--sophie-theme-surface-2);
}

.sophie-openarchiver-progress-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:.65rem;
}

.sophie-openarchiver-progress-head span{
  color:var(--sophie-theme-muted);
  font-size:.9rem;
}

.sophie-openarchiver-progress-head strong{
  font-size:.95rem;
  white-space:nowrap;
}

.sophie-openarchiver-progress-track{
  position:relative;
  width:100%;
  height:14px;
  overflow:hidden;
  border-radius:999px;
  background:var(--sophie-theme-bg);
  border:1px solid var(--sophie-theme-border);
}

.sophie-openarchiver-progress-bar{
  width:0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(
    90deg,
    #4aa3ff 0%,
    #2563eb 100%
  );
  transition:width .35s ease;
}

.sophie-openarchiver-progress-detail{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem 1.25rem;
  margin-top:.7rem;
  color:var(--sophie-theme-muted);
  font-size:.82rem;
}

.sophie-openarchiver-progress-detail strong{
  color:var(--sophie-theme-text);
}

.sophie-openarchiver-import-buttons button:disabled,
.sophie-openarchiver-batch-label input:disabled{
  opacity:.48;
  cursor:not-allowed;
}

@media (max-width:700px){

  .sophie-openarchiver-progress{
    padding:.85rem;
  }

  .sophie-openarchiver-progress-head{
    align-items:flex-start;
    flex-direction:column;
    gap:.25rem;
  }

  .sophie-openarchiver-progress-detail{
    display:grid;
    grid-template-columns:1fr;
    gap:.35rem;
  }

  .sophie-openarchiver-progress-track{
    height:16px;
  }
}

/* SOPHIE_OPENARCHIVER_PROGRESS_UI_V1_END */


/* SOPHIE_OPENARCHIVER_IMPORT_MONITOR_V1 */

.sophie-openarchiver-current {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.sophie-openarchiver-current strong,
.sophie-openarchiver-current span,
.sophie-openarchiver-current small {
  overflow-wrap: anywhere;
}

.sophie-openarchiver-current span,
.sophie-openarchiver-current small {
  opacity: .78;
}

.sophie-openarchiver-recent {
  display: grid;
  gap: .65rem;
}

.sophie-openarchiver-recent-row {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .65rem .75rem;
  border: 1px solid rgba(127,127,127,.22);
  border-radius: .65rem;
}

.sophie-openarchiver-recent-row strong,
.sophie-openarchiver-recent-row span,
.sophie-openarchiver-recent-row small {
  overflow-wrap: anywhere;
}

.sophie-openarchiver-recent-row span,
.sophie-openarchiver-recent-row small {
  opacity: .78;
}


/*
 * SOPHIE_AI_STANDARD_CHAT_VISUAL_V1
 *
 * Human-Owner authorized.
 *
 * Presentation scope:
 * - black standard-chat surface
 * - blue Sophie messages
 * - distinct user messages
 * - larger blue send button
 * - visible vertical sidebar scrollbar
 *
 * No provider / AIOP / Privacy semantics.
 */


/* ===== Chat surface ===== */

html[data-sophie-theme] #chat,
html[data-sophie-theme="dark"] #chat {
  background:#000 !important;
}

html[data-sophie-theme] #messages,
html[data-sophie-theme="dark"] #messages {
  background:transparent !important;
}


/* ===== Sophie messages ===== */

html[data-sophie-theme] .msg.sophie,
html[data-sophie-theme="dark"] .msg.sophie {
  background:#173E76 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 1px 2px rgba(0,0,0,.24);
}

html[data-sophie-theme] .msg.sophie p,
html[data-sophie-theme] .msg.sophie li,
html[data-sophie-theme] .msg.sophie h1,
html[data-sophie-theme] .msg.sophie h2,
html[data-sophie-theme] .msg.sophie h3,
html[data-sophie-theme] .msg.sophie h4,
html[data-sophie-theme="dark"] .msg.sophie p,
html[data-sophie-theme="dark"] .msg.sophie li,
html[data-sophie-theme="dark"] .msg.sophie h1,
html[data-sophie-theme="dark"] .msg.sophie h2,
html[data-sophie-theme="dark"] .msg.sophie h3,
html[data-sophie-theme="dark"] .msg.sophie h4 {
  color:inherit;
}

html[data-sophie-theme] .msg.sophie a,
html[data-sophie-theme="dark"] .msg.sophie a {
  color:#dbeafe;
}


/* ===== User messages ===== */

html[data-sophie-theme] .msg.user,
html[data-sophie-theme="dark"] .msg.user {
  background:#262626 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.08);
}


/* ===== Send button ===== */

html[data-sophie-theme] .composer-shell #send,
html[data-sophie-theme] .composer-shell .composer-send-button,
html[data-sophie-theme="dark"] .composer-shell #send,
html[data-sophie-theme="dark"] .composer-shell .composer-send-button {
  width:48px !important;
  min-width:48px !important;
  height:48px !important;
  min-height:48px !important;

  border-radius:14px !important;

  background:#173E76 !important;
  color:#fff !important;

  border:
    1px solid rgba(255,255,255,.12) !important;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  box-shadow:
    0 2px 8px rgba(0,0,0,.28);
}

html[data-sophie-theme] .composer-shell #send:hover:not(:disabled),
html[data-sophie-theme] .composer-shell .composer-send-button:hover:not(:disabled),
html[data-sophie-theme="dark"] .composer-shell #send:hover:not(:disabled),
html[data-sophie-theme="dark"] .composer-shell .composer-send-button:hover:not(:disabled) {
  background:#2563eb !important;
  transform:translateY(-1px);
}

html[data-sophie-theme] .composer-shell #send:active:not(:disabled),
html[data-sophie-theme] .composer-shell .composer-send-button:active:not(:disabled),
html[data-sophie-theme="dark"] .composer-shell #send:active:not(:disabled),
html[data-sophie-theme="dark"] .composer-shell .composer-send-button:active:not(:disabled) {
  transform:translateY(0);
}

html[data-sophie-theme] .composer-send-icon,
html[data-sophie-theme="dark"] .composer-send-icon {
  width:22px;
  height:22px;
}


/* ===== Sidebar scrollbar ===== */

html[data-sophie-theme] #side,
html[data-sophie-theme="dark"] #side {
  overflow-x:hidden !important;
  overflow-y:auto !important;

  scrollbar-width:auto;
  scrollbar-color:#6b7280 #171717;
}

html[data-sophie-theme] #side::-webkit-scrollbar,
html[data-sophie-theme="dark"] #side::-webkit-scrollbar {
  width:12px;
}

html[data-sophie-theme] #side::-webkit-scrollbar-track,
html[data-sophie-theme="dark"] #side::-webkit-scrollbar-track {
  background:#171717;
}

html[data-sophie-theme] #side::-webkit-scrollbar-thumb,
html[data-sophie-theme="dark"] #side::-webkit-scrollbar-thumb {
  background:#6b7280;
  border-radius:8px;
  border:3px solid #171717;
}

html[data-sophie-theme] #side::-webkit-scrollbar-thumb:hover,
html[data-sophie-theme="dark"] #side::-webkit-scrollbar-thumb:hover {
  background:#9ca3af;
}


/* ===== Mobile ===== */

@media (max-width:760px) {

  html[data-sophie-theme] .composer-shell #send,
  html[data-sophie-theme] .composer-shell .composer-send-button,
  html[data-sophie-theme="dark"] .composer-shell #send,
  html[data-sophie-theme="dark"] .composer-shell .composer-send-button {
    width:46px !important;
    min-width:46px !important;
    height:46px !important;
    min-height:46px !important;
  }

  html[data-sophie-theme] #side,
  html[data-sophie-theme="dark"] #side {
    -webkit-overflow-scrolling:touch;
  }
}



/*
 * SOPHIE_AI_COMPOSER_UX_V2
 *
 * Human-Owner authorized.
 * Presentation only.
 */

/* ===== Compact composer ===== */

html[data-sophie-theme] #composer,
html[data-sophie-theme="dark"] #composer {
  padding-top:6px;
  padding-bottom:6px;
}

html[data-sophie-theme] .composer-shell,
html[data-sophie-theme="dark"] .composer-shell {
  padding-top:5px;
  padding-bottom:5px;
}

html[data-sophie-theme] .composer-shell #input,
html[data-sophie-theme="dark"] .composer-shell #input {
  min-height:24px !important;
  padding-top:5px !important;
  padding-bottom:5px !important;
  line-height:1.35;
}

/*
 * Existing JS resizeComposerInput() remains authoritative
 * for growth with larger text.
 */


/* ===== Chat / Task mini control ===== */

html[data-sophie-theme] .composer-mode-row,
html[data-sophie-theme="dark"] .composer-mode-row {
  display:none !important;
}

html[data-sophie-theme] .composer-tools #modeSwitch,
html[data-sophie-theme="dark"] .composer-tools #modeSwitch {
  display:inline-flex !important;
  align-items:center;
  gap:2px;
  flex:0 0 auto;
  margin:0 2px 0 0;
  padding:2px;
  border-radius:9px;
  background:rgba(255,255,255,.06);
}

html[data-sophie-theme] .composer-tools #modeSwitch button,
html[data-sophie-theme="dark"] .composer-tools #modeSwitch button {
  min-width:0;
  min-height:28px;
  padding:3px 7px;
  border-radius:7px;
  font-size:11px;
  line-height:1;
}

html[data-sophie-theme] .composer-tools #modeSwitch button.active,
html[data-sophie-theme="dark"] .composer-tools #modeSwitch button.active {
  background:#173E76;
  color:#fff;
}


/* ===== Standalone Paperless sidebar entry ===== */

#sophiePaperlessImportMenu.sophie-paperless-standalone-hidden {
  display:none !important;
}


/* ===== Image Drag & Drop ===== */

#composer.sophie-image-drag-active .composer-shell {
  outline:2px dashed #173E76;
  outline-offset:2px;
  position:relative;
}

#composer.sophie-image-drag-active .composer-shell::after {
  content:"Bild hier ablegen";
  position:absolute;
  inset:4px;
  z-index:20;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:12px;
  background:rgba(23,62,118,.94);
  color:#fff;

  font-size:14px;
  font-weight:600;
  pointer-events:none;
}


/* ===== Mobile ===== */

@media (max-width:760px) {
  html[data-sophie-theme] .composer-tools #modeSwitch button,
  html[data-sophie-theme="dark"] .composer-tools #modeSwitch button {
    min-height:30px;
    padding:4px 7px;
  }

  html[data-sophie-theme] .composer-shell #input,
  html[data-sophie-theme="dark"] .composer-shell #input {
    min-height:24px !important;
  }
}


/*
 * SOPHIE_AI_COMPOSER_UX_V2_1
 *
 * Dynamic composer clearance.
 * JS owns the actual runtime value.
 */

#messages {
  padding-bottom:
    var(
      --sophie-composer-clearance,
      180px
    ) !important;
}


/*
 * SOPHIE_AI_COMPOSER_UX_V2_2
 *
 * Real document-flow spacer below the final chat message.
 * Runtime height is owned by sophieUpdateComposerClearance().
 */

#messages {
  padding-bottom:0 !important;
}

#messages > .sophie-composer-end-spacer {
  display:block;
  width:100%;
  min-width:0;
  height:
    var(
      --sophie-composer-clearance,
      180px
    );
  margin:0;
  padding:0;
  border:0;
  pointer-events:none;
  visibility:hidden;
}


/*
 * SOPHIE_AI_COMPOSER_UX_V2_3
 *
 * Soft visual transition between chat and fixed composer.
 * Runtime bottom/height values are set from composer geometry.
 */

#sophieComposerFade {
  position:fixed;

  left:280px;
  right:0;

  height:80px;
  bottom:
    var(
      --sophie-composer-clearance,
      180px
    );

  z-index:2;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.10) 18%,
      rgba(0,0,0,.32) 42%,
      rgba(0,0,0,.68) 72%,
      rgba(0,0,0,.94) 100%
    );
}

@media (max-width:899px) {
  #sophieComposerFade {
    left:0;
  }
}


/*
 * SOPHIE_AI_COMPOSER_UX_V2_4
 *
 * Bottom-dock the existing fixed Standard Chat composer.
 *
 * Scope:
 * - vertical position only
 * - horizontal geometry unchanged
 * - dynamic V2.3 fade follows composerRect.top
 * - V2.2 end spacer remains authoritative
 */

html[data-sophie-theme] #composer,
html[data-sophie-theme="dark"] #composer {
  bottom:0 !important;
}


/*
 * SOPHIE_AI_COMPOSER_UX_V2_5
 *
 * Mobile composer layout.
 *
 * Desktop remains unchanged.
 * On narrow screens:
 * - textarea owns the first row
 * - controls use the second row
 * - send button has a protected right-side slot
 * - model selector may shrink but remains usable
 */

@media (max-width:760px) {

  html[data-sophie-theme] #composer,
  html[data-sophie-theme="dark"] #composer {
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:auto !important;
    max-width:none !important;

    padding:
      6px
      max(8px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom))
      max(8px, env(safe-area-inset-left));

    box-sizing:border-box;
  }


  /*
   * Two-row mobile shell:
   *
   *  input input input
   *  tools tools send
   */

  html[data-sophie-theme] .composer-shell,
  html[data-sophie-theme="dark"] .composer-shell {
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      auto;

    grid-template-areas:
      "input input"
      "tools send";

    column-gap:6px;
    row-gap:6px;

    width:100%;
    max-width:100%;
    min-width:0;

    box-sizing:border-box;

    padding:8px !important;
  }


  html[data-sophie-theme] .composer-shell #input,
  html[data-sophie-theme="dark"] .composer-shell #input {
    grid-area:input;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    box-sizing:border-box;

    margin:0 !important;
  }


  /*
   * Existing tool container.
   * It may shrink, but must never push Send outside.
   */

  html[data-sophie-theme] .composer-tools,
  html[data-sophie-theme="dark"] .composer-tools {
    grid-area:tools;

    display:flex !important;
    align-items:center;

    gap:4px;

    width:auto !important;
    min-width:0 !important;
    max-width:100%;

    overflow:hidden;

    margin:0 !important;
    padding:0 !important;
  }


  /*
   * Compact controls without changing their semantics.
   */

  html[data-sophie-theme] .composer-tools > *,
  html[data-sophie-theme="dark"] .composer-tools > * {
    flex:0 0 auto;
  }


  html[data-sophie-theme] .composer-tools #modeSwitch,
  html[data-sophie-theme="dark"] .composer-tools #modeSwitch {
    margin:0 !important;
  }


  html[data-sophie-theme] .composer-tools #modeSwitch button,
  html[data-sophie-theme="dark"] .composer-tools #modeSwitch button {
    min-height:34px;
    padding:4px 7px;
  }


  /*
   * Model selector is the flexible member.
   * It may contract on an iPhone instead of forcing
   * the Send button outside the viewport.
   */

  html[data-sophie-theme] .composer-tools select,
  html[data-sophie-theme="dark"] .composer-tools select {
    min-width:0 !important;
    max-width:112px !important;
  }


  /*
   * The send button is protected.
   *
   * Support both the known #send binding and a possible
   * .send-button presentation class without changing DOM.
   */

  html[data-sophie-theme] #send,
  html[data-sophie-theme="dark"] #send,
  html[data-sophie-theme] .send-button,
  html[data-sophie-theme="dark"] .send-button {
    grid-area:send;

    align-self:center;
    justify-self:end;

    flex:0 0 46px !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:46px !important;
    min-height:46px !important;

    margin:0 !important;
  }


  /*
   * If Send is inside the tools host in the current DOM,
   * keep it visible at the right edge instead of allowing
   * preceding controls to displace it.
   */

  html[data-sophie-theme] .composer-tools #send,
  html[data-sophie-theme="dark"] .composer-tools #send,
  html[data-sophie-theme] .composer-tools .send-button,
  html[data-sophie-theme="dark"] .composer-tools .send-button {
    position:sticky;
    right:0;

    margin-left:auto !important;

    flex:
      0 0 46px !important;

    z-index:3;
  }
}


/*
 * Extra-narrow phones.
 * Only spacing is tightened; touch targets remain usable.
 */

@media (max-width:390px) {

  html[data-sophie-theme] .composer-shell,
  html[data-sophie-theme="dark"] .composer-shell {
    column-gap:4px;
    row-gap:5px;
    padding:6px !important;
  }

  html[data-sophie-theme] .composer-tools,
  html[data-sophie-theme="dark"] .composer-tools {
    gap:2px;
  }

  html[data-sophie-theme] .composer-tools select,
  html[data-sophie-theme="dark"] .composer-tools select {
    max-width:92px !important;
  }
}


/*
 * SOPHIE_AI_COMPOSER_UX_V2_5_1
 *
 * Mobile correction against verified productive DOM:
 *
 * .composer-shell
 *   #input
 *   ...
 *   .composer-bottom
 *     .composer-tools
 *     #send
 *
 * The send button therefore belongs to composer-bottom,
 * not composer-shell's top-level grid.
 */

@media (max-width:760px) {

  /*
   * Undo the V2.5 shell grid assumption.
   * Shell becomes a normal vertical container again.
   */

  html[data-sophie-theme] .composer-shell,
  html[data-sophie-theme="dark"] .composer-shell {
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    gap:6px !important;

    box-sizing:border-box;
  }


  /*
   * Text input owns the complete first row.
   */

  html[data-sophie-theme] .composer-shell #input,
  html[data-sophie-theme="dark"] .composer-shell #input {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;

    box-sizing:border-box;
  }


  /*
   * REAL second-row container.
   *
   * Flexible tool viewport on the left,
   * protected send slot on the right.
   */

  html[data-sophie-theme] .composer-shell .composer-bottom,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom {
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      46px !important;

    align-items:center !important;

    column-gap:6px !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    margin:0 !important;
    padding:0 !important;

    box-sizing:border-box;
  }


  /*
   * Tool row may scroll inside its own grid cell.
   * It cannot consume the send-button column.
   */

  html[data-sophie-theme] .composer-shell .composer-bottom .composer-tools,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-tools {
    display:flex !important;
    align-items:center !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    gap:4px !important;

    margin:0 !important;
    padding:0 2px 0 0 !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    box-sizing:border-box;
  }

  html[data-sophie-theme] .composer-shell .composer-bottom .composer-tools::-webkit-scrollbar,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-tools::-webkit-scrollbar {
    display:none;
  }


  /*
   * Controls keep their natural width.
   * Overflow belongs to the tools viewport, not the page.
   */

  html[data-sophie-theme] .composer-shell .composer-bottom .composer-tools > *,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-tools > * {
    flex:0 0 auto !important;
  }


  /*
   * Do not truncate the model selector into unusability.
   * It participates in the horizontally scrollable tools row.
   */

  html[data-sophie-theme] .composer-shell .composer-bottom .sophie-model-select,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .sophie-model-select {
    width:auto !important;
    min-width:92px !important;
    max-width:112px !important;
  }


  /*
   * Protected send column.
   * Override V2.5 grid-area/sticky assumptions.
   */

  html[data-sophie-theme] .composer-shell .composer-bottom #send,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom #send,
  html[data-sophie-theme] .composer-shell .composer-bottom .composer-send-button,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-send-button {
    grid-column:2 !important;
    grid-row:1 !important;
    grid-area:auto !important;

    position:relative !important;
    right:auto !important;

    justify-self:end !important;
    align-self:center !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;

    flex:0 0 46px !important;

    margin:0 !important;

    z-index:4 !important;
  }
}


/*
 * Extra-narrow iPhones:
 * reduce spacing, never the send touch target.
 */

@media (max-width:390px) {

  html[data-sophie-theme] .composer-shell .composer-bottom,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom {
    column-gap:4px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-bottom .composer-tools,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-tools {
    gap:2px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-bottom .sophie-model-select,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .sophie-model-select {
    min-width:84px !important;
    max-width:96px !important;
  }
}

/*
 * SOPHIE_AI_COMPOSER_UX_V2_5_2
 *
 * Mobile correction:
 *
 * - real DOM:
 *     .composer-bottom
 *       .composer-tools
 *       #send
 *
 * - tools wrap naturally instead of horizontal scrolling
 * - send keeps a dedicated protected right-side column
 * - model selector may shrink
 * - desktop unchanged
 */

@media (max-width:760px) {

  /*
   * Bottom area:
   * flexible controls + permanently reserved send column.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom {
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      46px !important;

    grid-template-rows:auto !important;

    align-items:end !important;

    column-gap:6px !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    overflow:visible !important;

    box-sizing:border-box !important;
  }


  /*
   * Tool area:
   * wrap onto additional lines when required.
   *
   * No horizontal scrolling and no page overflow.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom .composer-tools,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-tools {
    grid-column:1 !important;
    grid-row:1 !important;

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;

    align-items:center !important;
    align-content:center !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    gap:4px !important;

    overflow-x:visible !important;
    overflow-y:visible !important;

    overscroll-behavior-x:auto !important;
    -webkit-overflow-scrolling:auto !important;

    box-sizing:border-box !important;
  }


  /*
   * Normal controls keep their natural size.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom .composer-tools > *,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-tools > * {
    flex:0 0 auto !important;
    min-width:0;
  }


  /*
   * Mode switch remains one compact unit.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom #modeSwitch,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom #modeSwitch {
    flex:0 0 auto !important;
    margin:0 !important;
  }


  /*
   * Model selector is allowed to contract first.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom .sophie-model-select,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .sophie-model-select {
    flex:1 1 88px !important;

    width:auto !important;
    min-width:72px !important;
    max-width:118px !important;

    box-sizing:border-box !important;
  }


  /*
   * Send gets its own non-negotiable grid column.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom #send,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom #send,
  html[data-sophie-theme] .composer-shell .composer-bottom .composer-send-button,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-send-button {
    grid-column:2 !important;
    grid-row:1 !important;

    position:relative !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    align-self:end !important;
    justify-self:end !important;

    margin:0 !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;

    flex:0 0 46px !important;

    box-sizing:border-box !important;
  }
}


/*
 * Very narrow phones:
 * reduce gaps, not the Send touch target.
 */
@media (max-width:390px) {

  html[data-sophie-theme] .composer-shell .composer-bottom,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom {
    column-gap:4px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-bottom .composer-tools,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-tools {
    gap:3px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-bottom .sophie-model-select,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .sophie-model-select {
    flex-basis:76px !important;
    min-width:68px !important;
    max-width:96px !important;
  }
}


/*
 * SOPHIE_AI_COMPOSER_UX_V2_5_3
 *
 * Mobile compact controls.
 *
 * Goals:
 * - reduce Chat / Aufgabe footprint
 * - tighten secondary composer controls
 * - give model selector a better chance to stay on row 1
 * - keep Send at its protected 46x46 size
 * - limit textarea growth on mobile
 * - desktop remains unchanged
 */

@media (max-width:760px) {

  /*
   * Keep the composer itself compact.
   */
  html[data-sophie-theme] .composer-shell,
  html[data-sophie-theme="dark"] .composer-shell {
    gap:4px !important;
    padding:6px !important;
  }


  /*
   * Input may grow, but only to roughly four lines.
   * Beyond this point the textarea scrolls internally.
   */
  html[data-sophie-theme] .composer-shell #input,
  html[data-sophie-theme="dark"] .composer-shell #input {
    min-height:48px !important;
    max-height:112px !important;

    overflow-y:auto !important;

    padding:
      10px
      12px !important;

    box-sizing:border-box !important;

    -webkit-overflow-scrolling:touch;
  }


  /*
   * Tighten the real bottom control row.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom {
    column-gap:4px !important;
  }


  html[data-sophie-theme] .composer-shell .composer-bottom .composer-tools,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-tools {
    gap:3px !important;
  }


  /*
   * Chat / Aufgabe:
   * preserve both controls and their semantics,
   * but substantially reduce their footprint.
   */
  html[data-sophie-theme] .composer-tools #modeSwitch,
  html[data-sophie-theme="dark"] .composer-tools #modeSwitch {
    display:inline-flex !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    gap:0 !important;

    flex:0 0 auto !important;

    margin:0 !important;
    padding:0 !important;
  }


  html[data-sophie-theme] .composer-tools #modeSwitch button,
  html[data-sophie-theme="dark"] .composer-tools #modeSwitch button {
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    min-height:34px !important;
    height:34px !important;

    padding:
      3px
      6px !important;

    margin:0 !important;

    font-size:12px !important;
    line-height:1 !important;

    white-space:nowrap !important;

    flex:0 0 auto !important;
  }


  /*
   * General toolbar controls:
   * compact visually without shrinking the Send button.
   */
  html[data-sophie-theme] .composer-tools button:not(#send),
  html[data-sophie-theme="dark"] .composer-tools button:not(#send) {
    min-width:34px !important;
    min-height:34px !important;

    padding:
      4px
      6px !important;

    box-sizing:border-box !important;
  }


  /*
   * Compact selects, including Thinking.
   */
  html[data-sophie-theme] .composer-tools select:not(.sophie-model-select),
  html[data-sophie-theme="dark"] .composer-tools select:not(.sophie-model-select) {
    min-width:0 !important;
    max-width:108px !important;

    min-height:34px !important;

    padding-top:3px !important;
    padding-bottom:3px !important;

    font-size:12px !important;

    box-sizing:border-box !important;
  }


  /*
   * Model selector gets the flexible remainder.
   * It may shrink before another toolbar line is created.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom .sophie-model-select,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .sophie-model-select {
    flex:
      1 1 82px !important;

    width:auto !important;
    min-width:72px !important;
    max-width:108px !important;

    min-height:34px !important;

    padding-top:3px !important;
    padding-bottom:3px !important;

    font-size:12px !important;

    box-sizing:border-box !important;
  }


  /*
   * Send remains the protected touch target from V2.5.2.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom #send,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom #send,
  html[data-sophie-theme] .composer-shell .composer-bottom .composer-send-button,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-send-button {
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;

    flex:0 0 46px !important;
  }
}


/*
 * Extra narrow iPhones.
 */
@media (max-width:390px) {

  html[data-sophie-theme] .composer-shell,
  html[data-sophie-theme="dark"] .composer-shell {
    padding:5px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-bottom .composer-tools,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-tools {
    gap:2px !important;
  }

  html[data-sophie-theme] .composer-tools #modeSwitch button,
  html[data-sophie-theme="dark"] .composer-tools #modeSwitch button {
    padding-left:5px !important;
    padding-right:5px !important;

    font-size:11px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-bottom .sophie-model-select,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .sophie-model-select {
    flex-basis:70px !important;

    min-width:66px !important;
    max-width:92px !important;

    font-size:11px !important;
  }
}


/*
 * SOPHIE_AI_COMPOSER_UX_V2_5_4
 *
 * Mobile single-line toolbar.
 *
 * Productive DOM:
 *
 * .composer-shell
 *   #input
 *   .composer-bottom
 *     .composer-tools
 *     #send
 *
 * Goals:
 * - exactly one tools row
 * - no flex wrapping
 * - model selector consumes remaining space
 * - Send owns protected 46x46 column
 * - compact textarea at rest
 * - bounded textarea growth
 * - desktop unchanged
 */

@media (max-width:760px) {

  /*
   * Compact outer composer.
   */
  html[data-sophie-theme] .composer-shell,
  html[data-sophie-theme="dark"] .composer-shell {
    display:flex !important;
    flex-direction:column !important;

    gap:4px !important;
    padding:6px !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    box-sizing:border-box !important;
  }


  /*
   * Compact textarea at rest.
   *
   * JS may update the inline height while typing,
   * but CSS prevents growth beyond the mobile ceiling.
   */
  html[data-sophie-theme] .composer-shell #input,
  html[data-sophie-theme="dark"] .composer-shell #input {
    display:block !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:44px;
    min-height:44px !important;
    max-height:104px !important;

    margin:0 !important;

    padding:
      10px
      12px !important;

    overflow-y:auto !important;

    line-height:22px !important;

    resize:none !important;

    box-sizing:border-box !important;

    -webkit-overflow-scrolling:touch;
  }


  /*
   * Real bottom row:
   * tools receive all remaining width,
   * Send receives its own fixed column.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom {
    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      46px !important;

    grid-template-rows:
      46px !important;

    align-items:center !important;

    column-gap:4px !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    overflow:hidden !important;

    box-sizing:border-box !important;
  }


  /*
   * ONE toolbar row.
   * V2.5.2/V2.5.3 wrapping is explicitly overridden.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom .composer-tools,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-tools {
    grid-column:1 !important;
    grid-row:1 !important;

    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;

    gap:2px !important;

    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;

    height:46px !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

    box-sizing:border-box !important;
  }


  /*
   * Default tool behaviour:
   * controls stay compact and may not create a new row.
   */
  html[data-sophie-theme] .composer-shell .composer-tools > *,
  html[data-sophie-theme="dark"] .composer-shell .composer-tools > * {
    min-width:0 !important;

    margin-top:0 !important;
    margin-bottom:0 !important;

    box-sizing:border-box !important;
  }


  /*
   * Chat / Aufgabe becomes a genuinely compact segment.
   */
  html[data-sophie-theme] .composer-shell .composer-tools #modeSwitch,
  html[data-sophie-theme="dark"] .composer-shell .composer-tools #modeSwitch {
    display:inline-flex !important;
    flex:0 1 auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:112px !important;

    height:34px !important;

    gap:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;
  }


  html[data-sophie-theme] .composer-shell .composer-tools #modeSwitch button,
  html[data-sophie-theme="dark"] .composer-shell .composer-tools #modeSwitch button {
    flex:0 1 auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:56px !important;

    height:34px !important;
    min-height:34px !important;

    margin:0 !important;

    padding:
      3px
      5px !important;

    font-size:11px !important;
    line-height:1 !important;

    white-space:nowrap !important;

    overflow:hidden !important;
    text-overflow:clip !important;

    box-sizing:border-box !important;
  }


  /*
   * Compact icon buttons.
   */
  html[data-sophie-theme] .composer-shell .composer-tools button:not(#send),
  html[data-sophie-theme="dark"] .composer-shell .composer-tools button:not(#send) {
    flex:0 0 32px !important;

    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;

    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;

    padding:
      3px
      4px !important;

    box-sizing:border-box !important;
  }


  /*
   * The mode buttons need text width rather than the
   * generic 32px icon-button rule above.
   */
  html[data-sophie-theme] .composer-shell .composer-tools #modeSwitch button,
  html[data-sophie-theme="dark"] .composer-shell .composer-tools #modeSwitch button {
    flex:0 1 auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:56px !important;
  }


  /*
   * Thinking selector stays compact.
   */
  html[data-sophie-theme] .composer-shell .composer-tools select:not(.sophie-model-select),
  html[data-sophie-theme="dark"] .composer-shell .composer-tools select:not(.sophie-model-select) {
    flex:0 1 76px !important;

    width:auto !important;
    min-width:58px !important;
    max-width:76px !important;

    height:34px !important;
    min-height:34px !important;

    padding:
      2px
      3px !important;

    font-size:11px !important;

    box-sizing:border-box !important;
  }


  /*
   * Model selector owns the remaining toolbar width.
   * It is the principal flexible member.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom .sophie-model-select,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .sophie-model-select {
    flex:
      1 1 74px !important;

    width:0 !important;
    min-width:58px !important;
    max-width:none !important;

    height:34px !important;
    min-height:34px !important;

    margin:0 !important;

    padding:
      2px
      3px !important;

    font-size:11px !important;

    box-sizing:border-box !important;
  }


  /*
   * Send remains outside composer-tools and therefore
   * cannot be displaced by toolbar content.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom #send,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom #send,
  html[data-sophie-theme] .composer-shell .composer-bottom .composer-send-button,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-send-button {
    grid-column:2 !important;
    grid-row:1 !important;

    position:relative !important;

    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;

    align-self:center !important;
    justify-self:end !important;

    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;

    margin:0 !important;
    padding:0 !important;

    flex:0 0 46px !important;

    box-sizing:border-box !important;
  }
}


/*
 * Extra-narrow phones:
 * preserve the one-line contract by reducing only
 * non-Send controls.
 */
@media (max-width:390px) {

  html[data-sophie-theme] .composer-shell,
  html[data-sophie-theme="dark"] .composer-shell {
    padding:5px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-bottom,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom {
    column-gap:3px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-bottom .composer-tools,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-tools {
    gap:1px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-tools #modeSwitch,
  html[data-sophie-theme="dark"] .composer-shell .composer-tools #modeSwitch {
    max-width:100px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-tools #modeSwitch button,
  html[data-sophie-theme="dark"] .composer-shell .composer-tools #modeSwitch button {
    max-width:50px !important;

    padding-left:3px !important;
    padding-right:3px !important;

    font-size:10px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-tools button:not(#send),
  html[data-sophie-theme="dark"] .composer-shell .composer-tools button:not(#send) {
    flex-basis:30px !important;

    width:30px !important;
    min-width:30px !important;
    max-width:30px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-tools #modeSwitch button,
  html[data-sophie-theme="dark"] .composer-shell .composer-tools #modeSwitch button {
    width:auto !important;
    min-width:0 !important;
    max-width:50px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-tools select:not(.sophie-model-select),
  html[data-sophie-theme="dark"] .composer-shell .composer-tools select:not(.sophie-model-select) {
    flex-basis:66px !important;

    min-width:52px !important;
    max-width:66px !important;

    font-size:10px !important;
  }

  html[data-sophie-theme] .composer-shell .composer-bottom .sophie-model-select,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .sophie-model-select {
    flex-basis:58px !important;
    min-width:50px !important;

    font-size:10px !important;
  }
}


/*
 * SOPHIE_AI_COMPOSER_UX_V2_6
 *
 * Collapsible mobile secondary tools.
 *
 * Main row:
 *   Upload / Internet / Thinking / Emoji / Toggle / Send
 *
 * Secondary row:
 *   Chat | Aufgabe / Model
 */

.sophie-mobile-secondary-tools,
.sophie-mobile-tools-toggle {
  display:none;
}


@media (max-width:760px) {

  /*
   * Main tools row remains one line.
   * Chat/Task + model no longer consume this width.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom .composer-tools,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-tools {
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;

    align-items:center !important;

    gap:4px !important;

    overflow:hidden !important;
  }


  /*
   * Toggle is a normal compact toolbar button.
   */
  html[data-sophie-theme] .sophie-mobile-tools-toggle,
  html[data-sophie-theme="dark"] .sophie-mobile-tools-toggle {
    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    flex:0 0 34px !important;

    width:34px !important;
    min-width:34px !important;
    max-width:34px !important;

    height:34px !important;
    min-height:34px !important;
    max-height:34px !important;

    margin:0 !important;
    padding:0 !important;

    font-size:18px !important;
    line-height:1 !important;

    box-sizing:border-box !important;
  }


  /*
   * Real collapsible second row.
   */
  html[data-sophie-theme] .sophie-mobile-secondary-tools,
  html[data-sophie-theme="dark"] .sophie-mobile-secondary-tools {
    display:flex;

    align-items:center;

    gap:6px;

    width:100%;
    max-width:100%;
    min-width:0;

    min-height:38px;

    margin:0;
    padding:
      2px
      0
      0
      0;

    overflow:hidden;

    box-sizing:border-box;
  }


  html[data-sophie-theme] .sophie-mobile-secondary-tools[hidden],
  html[data-sophie-theme="dark"] .sophie-mobile-secondary-tools[hidden] {
    display:none !important;
  }


  /*
   * Chat / Aufgabe gets useful width again.
   */
  html[data-sophie-theme] .sophie-mobile-secondary-tools #modeSwitch,
  html[data-sophie-theme="dark"] .sophie-mobile-secondary-tools #modeSwitch {
    display:inline-flex !important;

    flex:0 0 auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:36px !important;

    margin:0 !important;
    padding:0 !important;

    gap:0 !important;

    overflow:visible !important;
  }


  html[data-sophie-theme] .sophie-mobile-secondary-tools #modeSwitch button,
  html[data-sophie-theme="dark"] .sophie-mobile-secondary-tools #modeSwitch button {
    flex:0 0 auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;

    padding:
      4px
      9px !important;

    font-size:12px !important;
    line-height:1 !important;

    white-space:nowrap !important;

    box-sizing:border-box !important;
  }


  /*
   * Model selector receives the rest of row 2.
   * Full model names can therefore be useful again.
   */
  html[data-sophie-theme] .sophie-mobile-secondary-tools .sophie-model-select,
  html[data-sophie-theme="dark"] .sophie-mobile-secondary-tools .sophie-model-select {
    display:block !important;

    flex:1 1 auto !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    height:36px !important;
    min-height:36px !important;
    max-height:36px !important;

    margin:0 !important;

    padding:
      3px
      7px !important;

    font-size:12px !important;

    box-sizing:border-box !important;
  }


  /*
   * Keep Send contract from V2.5.4.
   */
  html[data-sophie-theme] .composer-shell .composer-bottom #send,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom #send,
  html[data-sophie-theme] .composer-shell .composer-bottom .composer-send-button,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-send-button {
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;

    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
  }
}


@media (max-width:390px) {

  html[data-sophie-theme] .composer-shell .composer-bottom .composer-tools,
  html[data-sophie-theme="dark"] .composer-shell .composer-bottom .composer-tools {
    gap:3px !important;
  }

  html[data-sophie-theme] .sophie-mobile-secondary-tools,
  html[data-sophie-theme="dark"] .sophie-mobile-secondary-tools {
    gap:4px;
  }

  html[data-sophie-theme] .sophie-mobile-secondary-tools #modeSwitch button,
  html[data-sophie-theme="dark"] .sophie-mobile-secondary-tools #modeSwitch button {
    padding-left:7px !important;
    padding-right:7px !important;

    font-size:11px !important;
  }

  html[data-sophie-theme] .sophie-mobile-secondary-tools .sophie-model-select,
  html[data-sophie-theme="dark"] .sophie-mobile-secondary-tools .sophie-model-select {
    font-size:11px !important;
  }
}


/*
 * SOPHIE_AI_SOURCES_UX_V1
 *
 * Collapsible Internet sources.
 * Presentation only.
 */

.sophie-collapsible-sources {
  width:100%;
  max-width:100%;

  margin-top:14px;

  border-top:
    1px solid
    rgba(255,255,255,.12);

  box-sizing:border-box;
}


.sophie-collapsible-sources-summary {
  display:flex;

  align-items:center;

  min-height:38px;

  padding:
    8px
    2px;

  cursor:pointer;

  font-size:.92em;
  font-weight:600;

  opacity:.82;

  user-select:none;

  list-style:none;

  box-sizing:border-box;
}


.sophie-collapsible-sources-summary::-webkit-details-marker {
  display:none;
}


.sophie-collapsible-sources-summary::before {
  content:"›";

  display:inline-flex;

  align-items:center;
  justify-content:center;

  width:18px;
  min-width:18px;

  margin-right:4px;

  font-size:20px;
  line-height:1;

  transform:
    rotate(0deg);

  transition:
    transform .16s ease;
}


.sophie-collapsible-sources[open]
.sophie-collapsible-sources-summary::before {
  transform:
    rotate(90deg);
}


.sophie-collapsible-sources-content {
  padding:
    2px
    2px
    8px;

  overflow-wrap:anywhere;
}


.sophie-collapsible-sources-content > :first-child {
  margin-top:4px;
}


.sophie-collapsible-sources-content > :last-child {
  margin-bottom:0;
}


@media (max-width:760px) {

  .sophie-collapsible-sources {
    margin-top:10px;
  }

  .sophie-collapsible-sources-summary {
    min-height:40px;

    padding:
      8px
      0;

    font-size:.9em;
  }

  .sophie-collapsible-sources-content {
    padding:
      0
      0
      6px;
  }
}


/*
 * SOPHIE_AI_DARK_SURFACE_TUNING_V1
 *
 * Visual-only dark surface tuning.
 *
 * Protected:
 * - Chat canvas remains black
 * - Sophie answer blue remains #173E76
 * - Composer UX V2.6 geometry unchanged
 * - Sources UX V1.1 behavior unchanged
 */

/* Top application bar */
html[data-sophie-theme] .topbar,
html[data-sophie-theme="dark"] .topbar,
html[data-sophie-theme] header,
html[data-sophie-theme="dark"] header {
  background-color:#181818;
}


/* Main sidebar surface */
html[data-sophie-theme] #sidebar,
html[data-sophie-theme="dark"] #sidebar,
html[data-sophie-theme] .sidebar,
html[data-sophie-theme="dark"] .sidebar {
  background-color:#181818;
}


/* Sidebar/navigation interactive surfaces */
html[data-sophie-theme] #sidebar button,
html[data-sophie-theme="dark"] #sidebar button,
html[data-sophie-theme] .sidebar button,
html[data-sophie-theme="dark"] .sidebar button,
html[data-sophie-theme] #sidebar .nav-item,
html[data-sophie-theme="dark"] #sidebar .nav-item,
html[data-sophie-theme] .sidebar .nav-item,
html[data-sophie-theme="dark"] .sidebar .nav-item {
  background-color:#202024;
  border-color:rgba(255,255,255,.08);
}


/* User chat bubbles */
html[data-sophie-theme] #messages .user,
html[data-sophie-theme="dark"] #messages .user,
html[data-sophie-theme] #messages .message.user,
html[data-sophie-theme="dark"] #messages .message.user,
html[data-sophie-theme] #messages .msg.user,
html[data-sophie-theme="dark"] #messages .msg.user {
  background-color:#242424;
  border-color:rgba(255,255,255,.08);
}


/*
 * Composer outer surface.
 * Geometry deliberately untouched.
 */
html[data-sophie-theme] #composer,
html[data-sophie-theme="dark"] #composer {
  background-color:#1b1b1b;
  border-color:rgba(255,255,255,.08);
}


/* Composer shell/input surfaces */
html[data-sophie-theme] #composer .composer-shell,
html[data-sophie-theme="dark"] #composer .composer-shell {
  background-color:#1b1b1b;
  border-color:rgba(255,255,255,.08);
}

html[data-sophie-theme] #input,
html[data-sophie-theme="dark"] #input,
html[data-sophie-theme] #composer textarea,
html[data-sophie-theme="dark"] #composer textarea {
  background-color:#202020;
  border-color:rgba(255,255,255,.08);
}


/* Composer controls – Send is intentionally excluded. */
html[data-sophie-theme] #composer button:not(#send),
html[data-sophie-theme="dark"] #composer button:not(#send),
html[data-sophie-theme] #composer select,
html[data-sophie-theme="dark"] #composer select {
  background-color:#202020;
  border-color:rgba(255,255,255,.08);
}


/* Secondary mobile tools row */
html[data-sophie-theme] .sophie-mobile-secondary-tools,
html[data-sophie-theme="dark"] .sophie-mobile-secondary-tools {
  background-color:#1b1b1b;
  border-color:rgba(255,255,255,.08);
}


/*
 * Explicit protected colors.
 * These repeat the confirmed values intentionally so this
 * tuning cannot accidentally brighten or neutralize them.
 */
html[data-sophie-theme] #chat,
html[data-sophie-theme="dark"] #chat {
  background-color:#000;
}

html[data-sophie-theme] #messages .assistant,
html[data-sophie-theme="dark"] #messages .assistant,
html[data-sophie-theme] #messages .sophie,
html[data-sophie-theme="dark"] #messages .sophie {
  background-color:#173E76;
}

html[data-sophie-theme] #send,
html[data-sophie-theme="dark"] #send {
  background-color:#173E76;
}


/*
 * SOPHIE_AI_DARK_SURFACE_TUNING_V1_1
 *
 * Deeper neutral surfaces + restrained navy sidebar navigation.
 *
 * Protected:
 * - chat canvas #000000
 * - Sophie answer #173E76
 * - layout / geometry
 * - Composer UX V2.6
 * - Sources UX V1.1
 */

/* ---------------------------------------------------------
 * Application chrome
 * --------------------------------------------------------- */

html[data-sophie-theme] .topbar,
html[data-sophie-theme="dark"] .topbar,
html[data-sophie-theme] header,
html[data-sophie-theme="dark"] header {
  background-color:#141414;
}


/* ---------------------------------------------------------
 * Sidebar
 * --------------------------------------------------------- */

html[data-sophie-theme] #sidebar,
html[data-sophie-theme="dark"] #sidebar,
html[data-sophie-theme] .sidebar,
html[data-sophie-theme="dark"] .sidebar {
  background-color:#121212;
}


/*
 * Sidebar navigation:
 * restrained dark navy rather than medium grey.
 */

html[data-sophie-theme] #sidebar button,
html[data-sophie-theme="dark"] #sidebar button,
html[data-sophie-theme] .sidebar button,
html[data-sophie-theme="dark"] .sidebar button,
html[data-sophie-theme] #sidebar .nav-item,
html[data-sophie-theme="dark"] #sidebar .nav-item,
html[data-sophie-theme] .sidebar .nav-item,
html[data-sophie-theme="dark"] .sidebar .nav-item {
  background-color:#162b46;
  border-color:rgba(115,160,215,.14);
}


/* Hover / keyboard focus */

html[data-sophie-theme] #sidebar button:hover,
html[data-sophie-theme="dark"] #sidebar button:hover,
html[data-sophie-theme] .sidebar button:hover,
html[data-sophie-theme="dark"] .sidebar button:hover,
html[data-sophie-theme] #sidebar .nav-item:hover,
html[data-sophie-theme="dark"] #sidebar .nav-item:hover,
html[data-sophie-theme] .sidebar .nav-item:hover,
html[data-sophie-theme="dark"] .sidebar .nav-item:hover,
html[data-sophie-theme] #sidebar button:focus-visible,
html[data-sophie-theme="dark"] #sidebar button:focus-visible,
html[data-sophie-theme] .sidebar button:focus-visible,
html[data-sophie-theme="dark"] .sidebar button:focus-visible {
  background-color:#1b3658;
}


/* Existing active/selected states */

html[data-sophie-theme] #sidebar button.active,
html[data-sophie-theme="dark"] #sidebar button.active,
html[data-sophie-theme] .sidebar button.active,
html[data-sophie-theme="dark"] .sidebar button.active,
html[data-sophie-theme] #sidebar .nav-item.active,
html[data-sophie-theme="dark"] #sidebar .nav-item.active,
html[data-sophie-theme] .sidebar .nav-item.active,
html[data-sophie-theme="dark"] .sidebar .nav-item.active,
html[data-sophie-theme] #sidebar [aria-current="page"],
html[data-sophie-theme="dark"] #sidebar [aria-current="page"],
html[data-sophie-theme] .sidebar [aria-current="page"],
html[data-sophie-theme="dark"] .sidebar [aria-current="page"] {
  background-color:#20446f;
}


/* ---------------------------------------------------------
 * User messages
 * --------------------------------------------------------- */

html[data-sophie-theme] #messages .user,
html[data-sophie-theme="dark"] #messages .user,
html[data-sophie-theme] #messages .message.user,
html[data-sophie-theme="dark"] #messages .message.user,
html[data-sophie-theme] #messages .msg.user,
html[data-sophie-theme="dark"] #messages .msg.user {
  background-color:#1d1d1d;
  border-color:rgba(255,255,255,.07);
}


/* ---------------------------------------------------------
 * Composer – darker, geometry untouched
 * --------------------------------------------------------- */

html[data-sophie-theme] #composer,
html[data-sophie-theme="dark"] #composer,
html[data-sophie-theme] #composer .composer-shell,
html[data-sophie-theme="dark"] #composer .composer-shell {
  background-color:#151515;
  border-color:rgba(255,255,255,.07);
}


html[data-sophie-theme] #input,
html[data-sophie-theme="dark"] #input,
html[data-sophie-theme] #composer textarea,
html[data-sophie-theme="dark"] #composer textarea {
  background-color:#191919;
  border-color:rgba(255,255,255,.07);
}


/*
 * Neutral composer controls.
 * Send remains protected separately below.
 */

html[data-sophie-theme] #composer button:not(#send),
html[data-sophie-theme="dark"] #composer button:not(#send),
html[data-sophie-theme] #composer select,
html[data-sophie-theme="dark"] #composer select {
  background-color:#191919;
  border-color:rgba(255,255,255,.07);
}


html[data-sophie-theme] .sophie-mobile-secondary-tools,
html[data-sophie-theme="dark"] .sophie-mobile-secondary-tools {
  background-color:#151515;
  border-color:rgba(255,255,255,.07);
}


/* ---------------------------------------------------------
 * Explicitly protected confirmed colors
 * --------------------------------------------------------- */

html[data-sophie-theme] #chat,
html[data-sophie-theme="dark"] #chat {
  background-color:#000000;
}


html[data-sophie-theme] #messages .assistant,
html[data-sophie-theme="dark"] #messages .assistant,
html[data-sophie-theme] #messages .sophie,
html[data-sophie-theme="dark"] #messages .sophie {
  background-color:#173E76;
}


html[data-sophie-theme] #send,
html[data-sophie-theme="dark"] #send {
  background-color:#173E76;
}


/*
 * SOPHIE_AI_DARK_SURFACE_TUNING_V1_2
 *
 * Correct binding to the productive sidebar:
 *
 *   <aside id="side">
 *
 * Visual-only override.
 * No layout or functional behavior is changed.
 */


/* =========================================================
 * SIDEBAR BASE
 * ========================================================= */

html[data-sophie-theme] #side,
html[data-sophie-theme="dark"] #side {
  background:#101010;
  border-color:rgba(255,255,255,.06);
}


/* =========================================================
 * NEW CHAT
 * ========================================================= */

html[data-sophie-theme] #side #newChat,
html[data-sophie-theme="dark"] #side #newChat {
  background:#132a44;
  border-color:rgba(105,155,215,.16);
  color:#f1f5f9;
}

html[data-sophie-theme] #side #newChat:hover,
html[data-sophie-theme="dark"] #side #newChat:hover {
  background:#193856;
}


/* =========================================================
 * PRIMARY NAVIGATION
 *
 * Only buttons belonging to the sidebar navigation receive
 * the navy treatment. Chat history remains neutral.
 * ========================================================= */

html[data-sophie-theme] #side nav button,
html[data-sophie-theme="dark"] #side nav button {
  background:#132a44;
  border-color:rgba(105,155,215,.14);
  color:#f1f5f9;
}

html[data-sophie-theme] #side nav button:hover,
html[data-sophie-theme="dark"] #side nav button:hover,
html[data-sophie-theme] #side nav button:focus-visible,
html[data-sophie-theme="dark"] #side nav button:focus-visible {
  background:#193856;
}

html[data-sophie-theme] #side nav button.active,
html[data-sophie-theme="dark"] #side nav button.active,
html[data-sophie-theme] #side nav button[aria-current="page"],
html[data-sophie-theme="dark"] #side nav button[aria-current="page"],
html[data-sophie-theme] #side nav button[aria-pressed="true"],
html[data-sophie-theme="dark"] #side nav button[aria-pressed="true"] {
  background:#204a73;
}


/* =========================================================
 * CHAT HISTORY
 *
 * Deliberately neutral rather than navy.
 * ========================================================= */

html[data-sophie-theme] #side .chat-item,
html[data-sophie-theme="dark"] #side .chat-item,
html[data-sophie-theme] #side .chat-row,
html[data-sophie-theme="dark"] #side .chat-row,
html[data-sophie-theme] #side .conversation-item,
html[data-sophie-theme="dark"] #side .conversation-item {
  background:#151515;
  border-color:rgba(255,255,255,.05);
}

html[data-sophie-theme] #side .chat-item:hover,
html[data-sophie-theme="dark"] #side .chat-item:hover,
html[data-sophie-theme] #side .chat-row:hover,
html[data-sophie-theme="dark"] #side .chat-row:hover,
html[data-sophie-theme] #side .conversation-item:hover,
html[data-sophie-theme="dark"] #side .conversation-item:hover {
  background:#1b1b1b;
}


/* =========================================================
 * DEEPER NEUTRAL COMPOSER
 *
 * Geometry from Composer UX V2.6 is deliberately untouched.
 * ========================================================= */

html[data-sophie-theme] #composer,
html[data-sophie-theme="dark"] #composer,
html[data-sophie-theme] #composer .composer-shell,
html[data-sophie-theme="dark"] #composer .composer-shell {
  background-color:#111111;
  border-color:rgba(255,255,255,.06);
}

html[data-sophie-theme] #input,
html[data-sophie-theme="dark"] #input,
html[data-sophie-theme] #composer textarea,
html[data-sophie-theme="dark"] #composer textarea {
  background-color:#161616;
  border-color:rgba(255,255,255,.06);
}

html[data-sophie-theme] #composer button:not(#send),
html[data-sophie-theme="dark"] #composer button:not(#send),
html[data-sophie-theme] #composer select,
html[data-sophie-theme="dark"] #composer select {
  background-color:#161616;
  border-color:rgba(255,255,255,.06);
}

html[data-sophie-theme] .sophie-mobile-secondary-tools,
html[data-sophie-theme="dark"] .sophie-mobile-secondary-tools {
  background-color:#111111;
  border-color:rgba(255,255,255,.06);
}


/* =========================================================
 * PROTECTED CONFIRMED COLORS
 * ========================================================= */

html[data-sophie-theme] #chat,
html[data-sophie-theme="dark"] #chat {
  background-color:#000000;
}

html[data-sophie-theme] #messages .assistant,
html[data-sophie-theme="dark"] #messages .assistant,
html[data-sophie-theme] #messages .sophie,
html[data-sophie-theme="dark"] #messages .sophie {
  background-color:#173E76;
}

html[data-sophie-theme] #send,
html[data-sophie-theme="dark"] #send {
  background-color:#173E76;
}


/*
 * SOPHIE_AI_DARK_SURFACE_TUNING_V1_3
 *
 * Deep Dark Finish.
 *
 * Final visual refinement of the confirmed V1.2 design:
 * - deeper neutral surfaces
 * - subdued sidebar/history typography
 * - existing navy navigation retained
 * - Sophie blue remains #173E76
 *
 * Presentation only. No geometry or functional behavior.
 */


/* =========================================================
 * APPLICATION CHROME
 * ========================================================= */

html[data-sophie-theme] .topbar,
html[data-sophie-theme="dark"] .topbar,
html[data-sophie-theme] header,
html[data-sophie-theme="dark"] header {
  background-color:#0b0b0b;
}


/* =========================================================
 * SIDEBAR BASE
 * ========================================================= */

html[data-sophie-theme] #side,
html[data-sophie-theme="dark"] #side {
  background:#080808;
  border-color:rgba(255,255,255,.045);
}


/* =========================================================
 * PRIMARY NAVIGATION
 *
 * Navy is retained from V1.2.
 * Typography is slightly quieter.
 * ========================================================= */

html[data-sophie-theme] #side #newChat,
html[data-sophie-theme="dark"] #side #newChat,
html[data-sophie-theme] #side nav button,
html[data-sophie-theme="dark"] #side nav button {
  background:#132a44;
  border-color:rgba(105,155,215,.12);
  color:#d4d9e0;
}


/* Hover remains clearly visible but restrained. */

html[data-sophie-theme] #side #newChat:hover,
html[data-sophie-theme="dark"] #side #newChat:hover,
html[data-sophie-theme] #side nav button:hover,
html[data-sophie-theme="dark"] #side nav button:hover,
html[data-sophie-theme] #side nav button:focus-visible,
html[data-sophie-theme="dark"] #side nav button:focus-visible {
  background:#193856;
  color:#e1e5ea;
}


/* Active navigation remains the strongest sidebar state. */

html[data-sophie-theme] #side nav button.active,
html[data-sophie-theme="dark"] #side nav button.active,
html[data-sophie-theme] #side nav button[aria-current="page"],
html[data-sophie-theme="dark"] #side nav button[aria-current="page"],
html[data-sophie-theme] #side nav button[aria-pressed="true"],
html[data-sophie-theme="dark"] #side nav button[aria-pressed="true"] {
  background:#204a73;
  color:#e4e8ed;
}


/* =========================================================
 * CHAT HISTORY
 *
 * Keep it neutral and deliberately less prominent than
 * the primary navigation.
 * ========================================================= */

html[data-sophie-theme] #side .chat-item,
html[data-sophie-theme="dark"] #side .chat-item,
html[data-sophie-theme] #side .chat-row,
html[data-sophie-theme="dark"] #side .chat-row,
html[data-sophie-theme] #side .conversation-item,
html[data-sophie-theme="dark"] #side .conversation-item {
  background:#0d0d0d;
  border-color:rgba(255,255,255,.035);
  color:#a8adb5;
}

html[data-sophie-theme] #side .chat-item *,
html[data-sophie-theme="dark"] #side .chat-item *,
html[data-sophie-theme] #side .chat-row *,
html[data-sophie-theme="dark"] #side .chat-row *,
html[data-sophie-theme] #side .conversation-item *,
html[data-sophie-theme="dark"] #side .conversation-item * {
  color:inherit;
}

html[data-sophie-theme] #side .chat-item:hover,
html[data-sophie-theme="dark"] #side .chat-item:hover,
html[data-sophie-theme] #side .chat-row:hover,
html[data-sophie-theme="dark"] #side .chat-row:hover,
html[data-sophie-theme] #side .conversation-item:hover,
html[data-sophie-theme="dark"] #side .conversation-item:hover {
  background:#131313;
  color:#bcc1c8;
}


/* Generic history/list text below navigation.
 * This intentionally does NOT affect nav button text.
 */

html[data-sophie-theme] #side .history,
html[data-sophie-theme="dark"] #side .history,
html[data-sophie-theme] #side .chat-history,
html[data-sophie-theme="dark"] #side .chat-history,
html[data-sophie-theme] #side .conversation-list,
html[data-sophie-theme="dark"] #side .conversation-list {
  color:#a8adb5;
}


/* =========================================================
 * USER MESSAGE SURFACE
 * ========================================================= */

html[data-sophie-theme] #messages .user,
html[data-sophie-theme="dark"] #messages .user,
html[data-sophie-theme] #messages .message.user,
html[data-sophie-theme="dark"] #messages .message.user,
html[data-sophie-theme] #messages .msg.user,
html[data-sophie-theme="dark"] #messages .msg.user {
  background-color:#151515;
  border-color:rgba(255,255,255,.055);
}


/* =========================================================
 * COMPOSER
 *
 * Slightly deeper than V1.2.
 * Composer UX V2.6 geometry remains untouched.
 * ========================================================= */

html[data-sophie-theme] #composer,
html[data-sophie-theme="dark"] #composer,
html[data-sophie-theme] #composer .composer-shell,
html[data-sophie-theme="dark"] #composer .composer-shell {
  background-color:#0d0d0d;
  border-color:rgba(255,255,255,.055);
}

html[data-sophie-theme] #input,
html[data-sophie-theme="dark"] #input,
html[data-sophie-theme] #composer textarea,
html[data-sophie-theme="dark"] #composer textarea {
  background-color:#121212;
  border-color:rgba(255,255,255,.055);
}

html[data-sophie-theme] #composer button:not(#send),
html[data-sophie-theme="dark"] #composer button:not(#send),
html[data-sophie-theme] #composer select,
html[data-sophie-theme="dark"] #composer select {
  background-color:#121212;
  border-color:rgba(255,255,255,.055);
}

html[data-sophie-theme] .sophie-mobile-secondary-tools,
html[data-sophie-theme="dark"] .sophie-mobile-secondary-tools {
  background-color:#0d0d0d;
  border-color:rgba(255,255,255,.055);
}


/* =========================================================
 * PROTECTED CONFIRMED COLORS
 * ========================================================= */

html[data-sophie-theme] #chat,
html[data-sophie-theme="dark"] #chat {
  background-color:#000000;
}

html[data-sophie-theme] #messages .assistant,
html[data-sophie-theme="dark"] #messages .assistant,
html[data-sophie-theme] #messages .sophie,
html[data-sophie-theme="dark"] #messages .sophie {
  background-color:#173E76;
}

html[data-sophie-theme] #send,
html[data-sophie-theme="dark"] #send {
  background-color:#173E76;
}


/*
 * SOPHIE_AI_DARK_SURFACE_TUNING_V1_4
 *
 * Effective Binding Fix.
 *
 * Uses the productive DOM bindings and only raises CSS priority
 * for visual color properties that were losing against existing
 * theme / Composer UX rules.
 */


/* =========================================================
 * SIDEBAR BASE
 * ========================================================= */

html[data-sophie-theme] #side,
html[data-sophie-theme="dark"] #side {
  background:#080808 !important;
  background-color:#080808 !important;
  border-color:rgba(255,255,255,.04) !important;
}


/* =========================================================
 * PRIMARY NAVIGATION
 *
 * Preserve the confirmed navy design.
 * ========================================================= */

html[data-sophie-theme] #side #newChat,
html[data-sophie-theme="dark"] #side #newChat,
html[data-sophie-theme] #side nav button,
html[data-sophie-theme="dark"] #side nav button {
  background:#132a44 !important;
  background-color:#132a44 !important;
  border-color:rgba(105,155,215,.12) !important;
  color:#d4d9e0 !important;
}

html[data-sophie-theme] #side #newChat:hover,
html[data-sophie-theme="dark"] #side #newChat:hover,
html[data-sophie-theme] #side nav button:hover,
html[data-sophie-theme="dark"] #side nav button:hover,
html[data-sophie-theme] #side nav button:focus-visible,
html[data-sophie-theme="dark"] #side nav button:focus-visible {
  background:#193856 !important;
  background-color:#193856 !important;
  color:#e1e5ea !important;
}

html[data-sophie-theme] #side nav button.active,
html[data-sophie-theme="dark"] #side nav button.active,
html[data-sophie-theme] #side nav button[aria-current="page"],
html[data-sophie-theme="dark"] #side nav button[aria-current="page"],
html[data-sophie-theme] #side nav button[aria-pressed="true"],
html[data-sophie-theme="dark"] #side nav button[aria-pressed="true"] {
  background:#204a73 !important;
  background-color:#204a73 !important;
  color:#e4e8ed !important;
}


/* =========================================================
 * PRODUCTIVE CHAT HISTORY BINDING
 *
 * Actual DOM: #chatList button
 * ========================================================= */

html[data-sophie-theme] #side #chatList,
html[data-sophie-theme="dark"] #side #chatList {
  background:transparent !important;
  background-color:transparent !important;
  color:#a8adb5 !important;
}

html[data-sophie-theme] #side #chatList button,
html[data-sophie-theme="dark"] #side #chatList button {
  background:#0d0d0d !important;
  background-color:#0d0d0d !important;
  border-color:transparent !important;
  color:#a8adb5 !important;
}

html[data-sophie-theme] #side #chatList button *,
html[data-sophie-theme="dark"] #side #chatList button * {
  color:inherit !important;
}

html[data-sophie-theme] #side #chatList button:hover,
html[data-sophie-theme="dark"] #side #chatList button:hover,
html[data-sophie-theme] #side #chatList button:focus-visible,
html[data-sophie-theme="dark"] #side #chatList button:focus-visible {
  background:#131313 !important;
  background-color:#131313 !important;
  color:#bcc1c8 !important;
}


/* =========================================================
 * COMPOSER SURFACE
 *
 * Geometry remains entirely under Composer UX V2.6.
 * Only visual surface properties are overridden.
 * ========================================================= */

html[data-sophie-theme] #composer,
html[data-sophie-theme="dark"] #composer,
html[data-sophie-theme] #composer .composer-shell,
html[data-sophie-theme="dark"] #composer .composer-shell {
  background:#0d0d0d !important;
  background-color:#0d0d0d !important;
  border-color:rgba(255,255,255,.055) !important;
}

html[data-sophie-theme] #composer #input,
html[data-sophie-theme="dark"] #composer #input,
html[data-sophie-theme] #composer textarea,
html[data-sophie-theme="dark"] #composer textarea {
  background:#121212 !important;
  background-color:#121212 !important;
  border-color:rgba(255,255,255,.055) !important;
}

html[data-sophie-theme] #composer button:not(#send),
html[data-sophie-theme="dark"] #composer button:not(#send),
html[data-sophie-theme] #composer select,
html[data-sophie-theme="dark"] #composer select {
  background:#121212 !important;
  background-color:#121212 !important;
  border-color:rgba(255,255,255,.055) !important;
}

html[data-sophie-theme] .sophie-mobile-secondary-tools,
html[data-sophie-theme="dark"] .sophie-mobile-secondary-tools {
  background:#0d0d0d !important;
  background-color:#0d0d0d !important;
  border-color:rgba(255,255,255,.055) !important;
}


/* =========================================================
 * PROTECTED COLORS
 * ========================================================= */

html[data-sophie-theme] #chat,
html[data-sophie-theme="dark"] #chat {
  background:#000000 !important;
  background-color:#000000 !important;
}

html[data-sophie-theme] #messages .assistant,
html[data-sophie-theme="dark"] #messages .assistant,
html[data-sophie-theme] #messages .sophie,
html[data-sophie-theme="dark"] #messages .sophie {
  background:#173E76 !important;
  background-color:#173E76 !important;
}

html[data-sophie-theme] #send,
html[data-sophie-theme="dark"] #send {
  background:#173E76 !important;
  background-color:#173E76 !important;
}


/*
 * SOPHIE_AI_DARK_SURFACE_TUNING_V1_5
 *
 * Black Chat Surroundings.
 *
 * Removes the remaining neutral-grey strips surrounding the
 * message canvas and composer without changing message bubbles,
 * composer contents, navigation or governed UX behavior.
 */


/* Main application/chat surroundings */

html[data-sophie-theme] body,
html[data-sophie-theme="dark"] body,
html[data-sophie-theme] main,
html[data-sophie-theme="dark"] main,
html[data-sophie-theme] #main,
html[data-sophie-theme="dark"] #main,
html[data-sophie-theme] #chat,
html[data-sophie-theme="dark"] #chat,
html[data-sophie-theme] #messages,
html[data-sophie-theme="dark"] #messages {
  background-color:#000000 !important;
}


/* Message-area structural surroundings */

html[data-sophie-theme] .chat,
html[data-sophie-theme="dark"] .chat,
html[data-sophie-theme] .chat-wrap,
html[data-sophie-theme="dark"] .chat-wrap,
html[data-sophie-theme] .chat-container,
html[data-sophie-theme="dark"] .chat-container,
html[data-sophie-theme] .messages,
html[data-sophie-theme="dark"] .messages {
  background-color:#000000 !important;
}


/*
 * Composer OUTER surroundings only.
 *
 * Do not recolor #composer, .composer-shell, #input or controls:
 * their V1.4 surfaces remain unchanged.
 */

html[data-sophie-theme] .composer-wrap,
html[data-sophie-theme="dark"] .composer-wrap,
html[data-sophie-theme] .composer-container,
html[data-sophie-theme="dark"] .composer-container,
html[data-sophie-theme] .composer-area,
html[data-sophie-theme="dark"] .composer-area {
  background-color:#000000 !important;
}


/*
 * Preserve confirmed message/control colors explicitly.
 */

html[data-sophie-theme] #messages .assistant,
html[data-sophie-theme="dark"] #messages .assistant,
html[data-sophie-theme] #messages .sophie,
html[data-sophie-theme="dark"] #messages .sophie {
  background-color:#173E76 !important;
}

html[data-sophie-theme] #send,
html[data-sophie-theme="dark"] #send {
  background-color:#173E76 !important;
}


/*
 * SOPHIE_OPENARCHIVER_IMPORT_CONTROLS_VISIBLE_V1
 *
 * Explicit layout for Batchgröße + Import-Reihenfolge.
 */
.sophie-openarchiver-control-grid{
  display:grid;
  grid-template-columns:
    minmax(150px,220px)
    minmax(190px,280px);
  gap:14px;
  align-items:end;
  margin:14px 0 16px;
}

.sophie-openarchiver-control{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
  color:inherit;
}

.sophie-openarchiver-control > span{
  display:block;
  font-size:.82rem;
  font-weight:600;
  color:var(--sophie-theme-muted,#666);
}

.sophie-openarchiver-control input,
.sophie-openarchiver-control select{
  display:block !important;
  box-sizing:border-box;
  width:100% !important;
  min-width:0;
  height:42px;
  padding:8px 11px;
  border:1px solid
    var(--sophie-theme-border,rgba(0,0,0,.18));
  border-radius:9px;
  background:
    var(--sophie-theme-surface,#fff) !important;
  color:
    var(--sophie-theme-text,#111) !important;
  font:inherit;
  opacity:1 !important;
  visibility:visible !important;
}

.sophie-openarchiver-control select{
  cursor:pointer;
  appearance:auto;
}

@media(max-width:600px){
  .sophie-openarchiver-control-grid{
    grid-template-columns:1fr;
  }
}