/* ==========================================================================
   QURA TOP FADE v2 (from the Qore Air preview, Claude 2026-11-04)
   Transparent top with a deep dark tone that melts into the page, the same
   fade at the bottom behind the chat field, plus round glass buttons.
   Remove: delete this file's <link> line in index.html (backup next to it).
   ========================================================================== */
.topbar{
  background:transparent!important;
  border-bottom:0!important;
  box-shadow:none!important;
  isolation:isolate;
}
/* Top fade: starts above the bar (under the phone's status bar when the app
   draws there), stays dark through the bar and fades out far below it. */
.topbar::before{
  content:"";position:absolute;left:0;right:0;
  top:calc(-1 * env(safe-area-inset-top,0px) - 40px);
  height:calc(100% + env(safe-area-inset-top,0px) + 40px + 34px);
  z-index:-1;pointer-events:none;
  /* same light black fade as the bottom: no blur, text stays readable behind */
  background:linear-gradient(180deg,
    rgba(0,0,0,.78) 0px,
    rgba(0,0,0,.72) calc(100% - 52px),
    rgba(0,0,0,.34) calc(100% - 26px),
    rgba(0,0,0,0) 100%);
}
/* Bottom fade: full width behind the chat field, down to the very edge */
body:has(.chat-view)::after{
  content:"";position:fixed;left:0;right:0;bottom:0;
  height:calc(var(--composer-height,96px) + 80px + env(safe-area-inset-bottom,0px));
  z-index:45;pointer-events:none;
  background:linear-gradient(0deg,
    rgba(0,0,0,.78) 0%,
    rgba(0,0,0,.62) 30%,
    rgba(0,0,0,.38) 55%,
    rgba(0,0,0,.14) 78%,
    rgba(0,0,0,0) 100%);
}
.topbar :is(.notification-button,.icon-btn):not(#menuBtn){
  width:38px!important;min-width:38px!important;height:38px!important;min-height:38px!important;
  padding:0!important;border-radius:50%!important;
  background:rgba(14,24,36,.58)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  box-shadow:none!important;
}
.topbar .user-chip{
  height:38px!important;min-height:38px!important;border-radius:999px!important;
  background:rgba(14,24,36,.58)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:none!important;
}
#menuBtn{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
@media (max-width:700px){
  .topbar :is(.notification-button,.icon-btn):not(#menuBtn){
    width:34px!important;min-width:34px!important;height:34px!important;min-height:34px!important;
  }
}
.topbar :is(.notification-button,.icon-btn):not(#menuBtn) svg{width:18px!important;height:18px!important;max-width:18px!important;max-height:18px!important}

/* --------------------------------------------------------------------------
   EDGE-TO-EDGE (Android app dev63+). The app draws the page behind the
   status bar and the navigation bar and sets html.qura-edge plus the real
   bar sizes in --qura-safe-top / --qura-safe-bottom. Text scrolls up behind
   the clock/battery and down behind the nav buttons; controls stay clear.
   Browsers never get the class, so nothing changes there.
   -------------------------------------------------------------------------- */
@media (max-width:1023px){
  html.qura-edge .topbar{
    padding-top:calc(8px + var(--qura-safe-top,0px))!important;
    height:calc(56px + var(--qura-safe-top,0px))!important;
    min-height:calc(56px + var(--qura-safe-top,0px))!important;
  }
  html.qura-edge #view.view{padding-top:calc(68px + var(--qura-safe-top,0px))!important}
  html.qura-edge #view.view:not(.chat-view){padding-bottom:calc(24px + var(--qura-safe-bottom,0px))!important}
  html.qura-edge .chat-view{padding-bottom:calc(var(--composer-height,96px) + 26px + var(--qura-safe-bottom,0px) + var(--keyboard-inset,0px))!important}
  html.qura-edge .chat-view .composer-card{bottom:calc(var(--keyboard-inset,0px) + 8px + var(--qura-safe-bottom,0px))!important}
  html.qura-edge.keyboard-open .chat-view .composer-card{bottom:calc(var(--keyboard-inset,0px) + 4px)!important}
  html.qura-edge .drawer{padding-top:calc(10px + var(--qura-safe-top,0px))!important;padding-bottom:var(--qura-safe-bottom,0px)!important}
}
html.qura-edge body:has(.chat-view)::after{
  height:calc(var(--composer-height,96px) + 80px + var(--qura-safe-bottom,0px))!important;
}

/* App (edge-to-edge): the fade covers only the clock/battery strip and ends
   right where the buttons begin. Buttons and title sit on the open page. */
html.qura-edge .topbar::before{
  top:0!important;
  height:calc(var(--qura-safe-top,0px) + 8px)!important;
  background:linear-gradient(180deg,
    rgba(0,0,0,.72) 0%,
    rgba(0,0,0,.55) 55%,
    rgba(0,0,0,0) 100%)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  -webkit-mask-image:none!important;mask-image:none!important;
}

/* The Android app injects "html.qura-native-shell .topbar{background:var(--ink)!important}".
   In edge-to-edge mode the bar must stay see-through, so win over it here. */
html.qura-native-shell.qura-edge .topbar{
  background:transparent!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}

/* Dark outline + shadow so the top controls stay crisp while text runs behind */
.topbar :is(.notification-button,.icon-btn,.user-chip):not(#menuBtn){
  background:rgba(0,0,0,.5)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.65),0 4px 14px rgba(0,0,0,.55)!important;
}
#menuBtn,
.topbar #pageTitle,
.topbar h1{
  text-shadow:0 0 2px #000,0 0 3px #000,0 0 6px #000,0 1px 12px rgba(0,0,0,.9)!important;
}
#menuBtn > *,
#menuBtn svg{
  filter:drop-shadow(0 0 1px #000) drop-shadow(0 1px 4px rgba(0,0,0,.9));
}

/* --------------------------------------------------------------------------
   CHAT TOP: no "Chat" title inside chats, and the AI dots (Glimt) only show
   while an AI is busy in this chat (qura-glimt-live.js reads the chat):
     waiting for the provider        -> ring in the AI's colour
     first thinking/text/tool output -> filled, glowing and pulsing
     done                            -> gone again
   -------------------------------------------------------------------------- */
body:has(.chat-view) .topbar #pageTitle{display:none!important}
body:has(.chat-view) .topbar .qore-glimt-dots{left:8px!important;height:30px!important}

/* room for the round glow, so it is never clipped into a square */
.qore-glimt-dot-list{height:30px!important;padding:8px 9px!important;gap:9px!important}

.qore-glimt-dot:not([data-state="working"]):not([data-qura-live]){display:none!important}
.qore-glimt-dot{
  width:12px!important;height:12px!important;min-width:12px!important;min-height:12px!important;
  padding:0!important;border-radius:50%!important;aspect-ratio:1/1;
}
.qore-glimt-dot:is([data-state="working"],[data-qura-live]){
  background:transparent!important;
  border:2px solid var(--glimt-color,#8d67ff)!important;
  outline:0!important;opacity:1!important;filter:none!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.55)!important;
  animation:glimt-in .19s ease-out!important;
}
.qore-glimt-dot[data-qura-live="writing"]{
  background:var(--glimt-color,#8d67ff)!important;border-color:var(--glimt-color,#8d67ff)!important;
  box-shadow:0 0 0 1px rgba(0,0,0,.55),0 0 6px var(--glimt-color,#8d67ff)!important;
  animation:glimt-in .19s ease-out,qura-glimt-pulse 1.1s ease-in-out .19s infinite alternate!important;
}
@keyframes qura-glimt-pulse{
  from{transform:scale(.9);filter:brightness(1)}
  to{transform:scale(1.12);filter:brightness(1.55)}
}
@media(prefers-reduced-motion:reduce){.qore-glimt-dot[data-qura-live="writing"]{animation:none!important}}

/* LIVE badge: hidden 10 s after going live (qura-glimt-live.js); offline/connecting always shown */
#chatLiveTopStatus[data-qura-faded="1"]{display:none!important}

/* App: the clock/battery shade lives on its own fixed layer, so it stays when
   Qura hides the top bar for the keyboard. (body::before is disabled by the
   app's own injected style, so .app-shell::before is used.) */
html.qura-edge .topbar::before{display:none!important}
html.qura-edge .app-shell::before{
  content:"";position:fixed;left:0;right:0;top:var(--qura-vv-top,0px);
  height:calc(var(--qura-safe-top,0px) + 8px);
  z-index:59;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,0) 100%);
}

/* App: bottom shade mirrors the top one on every page — only behind the
   Android navigation buttons, ending right above them. */
html.qura-edge body:has(.chat-view)::after{display:none!important}
html.qura-edge .app-shell::after{
  content:"";position:fixed;left:0;right:0;bottom:0;
  height:calc(var(--qura-safe-bottom,0px) + 8px);
  z-index:59;pointer-events:none;
  background:linear-gradient(0deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.55) 55%,rgba(0,0,0,0) 100%);
}

/* --------------------------------------------------------------------------
   MENU › CHATS: each chat is a card like the log entries, with a coloured
   left edge that follows the rounded corners. The edge uses the chat's own AI
   colours (one colour, or all of them in a group chat).
   -------------------------------------------------------------------------- */
.drawer .drawer-chat-entry{margin:0 0 8px!important;position:relative}
.drawer .drawer-chat-entry>.ai-chat-item{
  position:relative!important;
  background:var(--surface-2,#122033)!important;
  box-shadow:inset 0 0 0 1px var(--hairline,#1C2B3D)!important;
  border:0!important;border-radius:12px!important;
  padding:10px 44px 10px 14px!important;margin:0!important;
  overflow:hidden;
}
.drawer .drawer-chat-entry>.ai-chat-item.active{background:color-mix(in srgb,var(--surface-2,#122033) 70%,#ffffff 6%)!important}
.drawer .drawer-chat-entry>.ai-chat-item::before{
  content:""!important;display:block!important;position:absolute!important;
  inset:0!important;width:auto!important;height:auto!important;transform:none!important;
  border-radius:inherit!important;opacity:1!important;
  padding-left:3px!important;box-sizing:border-box!important;
  background:var(--chat-edge-gradient,var(--chat-edge,var(--copper,#C47A18)))!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  pointer-events:none;
}
.drawer .drawer-chat-entry>.drawer-chat-more{
  position:absolute!important;right:6px;top:50%;transform:translateY(-50%);z-index:2;
}

/* MENU tab (and the AI list): same card + rounded coloured edge as Logs/Chats */
.drawer .nav-group>.nav-item:not(.ai-chat-item){
  position:relative!important;
  background:var(--surface-2,#122033)!important;
  box-shadow:inset 0 0 0 1px var(--hairline,#1C2B3D)!important;
  border:0!important;border-radius:12px!important;
  margin:0 0 7px!important;padding:10px 12px 10px 14px!important;
  overflow:hidden;
}
.drawer .nav-group>.nav-item:not(.ai-chat-item)::before{
  content:""!important;display:block!important;position:absolute!important;
  inset:0!important;width:auto!important;height:auto!important;transform:none!important;
  border-radius:inherit!important;opacity:.55!important;
  padding-left:3px!important;box-sizing:border-box!important;
  background:var(--copper,#C47A18)!important;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  pointer-events:none;
}
.drawer .nav-group>.nav-item:not(.ai-chat-item).active{background:color-mix(in srgb,var(--surface-2,#122033) 70%,#ffffff 6%)!important}
.drawer .nav-group>.nav-item:not(.ai-chat-item).active::before{opacity:1!important;background:var(--copper-hot,#E0942A)!important}

/* --------------------------------------------------------------------------
   CHAT FIELD
   Motor button sits above the file button, so the text gets the full width.
   Not in use:  [motor]                           [send]
                [  +  ]  text (one line)
   In use:      [motor]  Til …                   [send]
                [  +  ]  text (grows, then scrolls)
   -------------------------------------------------------------------------- */
.chat-view .composer-card{
  grid-template-columns:34px minmax(0,1fr) 44px!important;
  grid-template-areas:"banner banner banner" "chips chips chips" "motor text send" "attach text send"!important;
  align-items:center!important;row-gap:0!important;
}
.chat-view .composer-card .composer-actions #motorPickerBtn{grid-area:motor!important;transform:none!important;align-self:end!important}
.chat-view .composer-card .composer-actions #attachBtn{grid-area:attach!important;transform:none!important;align-self:start!important}
.chat-view .composer-card .composer-actions :is(#attachBtn,#motorPickerBtn){
  width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;justify-self:center!important;
}
.chat-view .composer-card>#composer,.chat-view #composer{grid-area:text!important;align-self:center!important}
.chat-view .composer-card .composer-actions #sendBtn,
.chat-view .composer-card .composer-actions #quraStopBtn{grid-area:send!important;align-self:center!important;justify-self:center!important}
.chat-view .composer-card:not(:focus-within) .composer-actions #composerAis{display:none!important}

html.keyboard-open .chat-view .composer-card,
.chat-view .composer-card:focus-within{
  grid-template-columns:32px minmax(0,1fr) 42px!important;
  grid-template-areas:"banner banner banner" "chips chips chips" "motor ais send" "attach text send"!important;
  align-items:end!important;
}
html.keyboard-open .chat-view .composer-actions #composerAis,
.chat-view .composer-card:focus-within .composer-actions #composerAis{
  display:block!important;grid-area:ais!important;align-self:center!important;margin:0 0 0 6px!important;
}
html.keyboard-open .chat-view .composer-card .composer-actions #motorPickerBtn,
.chat-view .composer-card:focus-within .composer-actions #motorPickerBtn{align-self:center!important}
html.keyboard-open .chat-view .composer-card .composer-actions #attachBtn,
.chat-view .composer-card:focus-within .composer-actions #attachBtn{align-self:end!important}
html.keyboard-open .chat-view .composer-card .composer-actions :is(#sendBtn,#quraStopBtn),
.chat-view .composer-card:focus-within .composer-actions :is(#sendBtn,#quraStopBtn){align-self:end!important}

/* Text: one line when empty, grows with the text up to a limit, then scrolls */
.chat-view #composer{
  field-sizing:content!important;
  min-height:30px!important;line-height:1.45!important;
  padding:4px 6px!important;resize:none!important;
}
html:not(.keyboard-open) .chat-view .composer-card:not(:focus-within) #composer{
  height:30px!important;max-height:30px!important;overflow-y:hidden!important;white-space:nowrap;text-overflow:ellipsis;
}
html.keyboard-open .chat-view #composer,
html:not(.keyboard-open) .chat-view .composer-card:focus-within #composer,
.chat-view .composer-card:focus-within #composer{
  height:auto!important;min-height:30px!important;
  max-height:min(200px,38vh)!important;overflow-y:auto!important;
  overscroll-behavior-y:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;white-space:pre-wrap;
}

/* Send -> stop while an AI is working and the field is empty */
#quraStopBtn{
  display:none;width:40px;height:40px;min-width:40px;min-height:40px;margin:0;padding:0;
  border:0;border-radius:50%;background:transparent;color:#ff7a7a;
  place-items:center;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
#quraStopBtn::before{content:"";width:15px;height:15px;border-radius:3px;background:currentColor;box-shadow:0 0 10px rgba(255,90,90,.45)}
html.qura-send-stop #quraStopBtn{display:grid}
html.qura-send-stop .chat-view .composer-actions #sendBtn{display:none!important}
#quraStopConfirm{
  position:fixed;z-index:96;right:16px;
  bottom:calc(var(--keyboard-inset,0px) + var(--composer-height,96px) + 22px + var(--qura-safe-bottom,0px));
  width:min(300px,calc(100vw - 32px));padding:14px;border-radius:16px;
  background:rgba(14,20,28,.96);border:1px solid rgba(255,255,255,.10);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 14px 40px rgba(0,0,0,.6);color:#ECF1F6;
}
#quraStopConfirm[hidden]{display:none}
#quraStopConfirm .qsc-text{font-size:14px;font-weight:600;margin:0 2px 12px}
#quraStopConfirm .qsc-actions{display:flex;gap:8px;justify-content:flex-end}
#quraStopConfirm .qsc-actions button{min-height:38px;padding:0 16px;border-radius:11px;border:1px solid rgba(255,255,255,.12);background:transparent;color:#ECF1F6;font-weight:600}
#quraStopConfirm .qsc-actions [data-qsc="yes"]{background:#c84141;border-color:#c84141;color:#fff}

/* Slide-out: empty, unused and no AI working -> the field goes, a pencil tab stays (no animation) */
html.qura-composer-docked .chat-view .composer-card{display:none!important}
html.qura-composer-docked .chat-view{padding-bottom:calc(76px + var(--qura-safe-bottom,0px) + env(safe-area-inset-bottom,0px))!important}
#quraComposerTab{
  position:fixed;right:0;z-index:55;
  bottom:calc(16px + var(--qura-safe-bottom,0px) + env(safe-area-inset-bottom,0px));
  width:56px;height:48px;padding:0 0 0 4px;
  display:none;place-items:center;
  border-radius:24px 0 0 24px;border:1px solid rgba(255,255,255,.10);border-right:0;
  background:rgba(0,0,0,.55);color:var(--copper-hot,#E0942A);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.55);
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
#quraComposerTab svg{width:21px;height:21px}
html.qura-composer-docked body:has(.chat-view) #quraComposerTab{display:grid}
@media(min-width:1024px){#quraComposerTab{bottom:24px}}

/* The "Til …" line names who you write to, so the field itself needs no placeholder */
.chat-view #composer::placeholder{color:transparent!important;opacity:0!important}

/* Arrow to the bottom of the chat: only when you are not at the bottom */
#quraToBottom{
  position:fixed;z-index:54;left:50%;transform:translateX(-50%);
  bottom:calc(var(--keyboard-inset,0px) + var(--composer-height,96px) + 22px + var(--qura-safe-bottom,0px) + env(safe-area-inset-bottom,0px));
  width:40px;height:40px;padding:0;display:none;place-items:center;
  border-radius:50%;border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.6);color:#ECF1F6;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 6px 18px rgba(0,0,0,.55);
  cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
}
#quraToBottom svg{width:19px;height:19px}
html.qura-show-tobottom body:has(.chat-view) #quraToBottom{display:grid}
html.qura-composer-docked #quraToBottom{bottom:calc(78px + var(--qura-safe-bottom,0px) + env(safe-area-inset-bottom,0px))}
@media(min-width:1024px){#quraToBottom{left:calc(272px + (100vw - 272px) / 2)}}

/* In use: the motor button is locked right above the + button at the bottom,
   also when the text grows (the "Til …" line keeps room for it when empty). */
html.keyboard-open .chat-view .composer-card,
.chat-view .composer-card:focus-within{
  grid-template-areas:"banner banner banner" "chips chips chips" ". ais send" "attach text send"!important;
}
html.keyboard-open .chat-view .composer-actions #composerAis,
.chat-view .composer-card:focus-within .composer-actions #composerAis{
  min-height:34px!important;display:flex!important;align-items:center!important;
}
html.keyboard-open .chat-view .composer-card .composer-actions #motorPickerBtn,
.chat-view .composer-card:focus-within .composer-actions #motorPickerBtn{
  grid-area:attach!important;align-self:end!important;transform:translateY(-34px)!important;z-index:2;
}

/* While an AI is working (stop button shown) the "Til …" line stays visible,
   also with the keyboard down — same layout as when the field is in use. */
html.qura-send-stop .chat-view .composer-card{
  grid-template-areas:"banner banner banner" "chips chips chips" ". ais send" "attach text send"!important;
}
html.qura-send-stop .chat-view .composer-card .composer-actions #composerAis{
  display:flex!important;align-items:center!important;min-height:34px!important;
  grid-area:ais!important;margin:0 0 0 6px!important;
}
html.qura-send-stop .chat-view .composer-card .composer-actions #motorPickerBtn{
  grid-area:attach!important;align-self:end!important;transform:translateY(-34px)!important;z-index:2;
}
html.qura-send-stop .chat-view .composer-card .composer-actions #attachBtn{align-self:end!important}
html.qura-send-stop .chat-view .composer-card .composer-actions :is(#sendBtn,#quraStopBtn){align-self:end!important}

/* Arrow: far right, just above the send button (or above the pencil tab) */
#quraToBottom{left:auto!important;right:14px!important;transform:none!important}
html.qura-composer-docked #quraToBottom{right:8px!important;bottom:calc(76px + var(--qura-safe-bottom,0px) + env(safe-area-inset-bottom,0px))!important}
@media(min-width:1024px){
  #quraToBottom{left:auto!important;right:calc((100vw - 272px - min(100vw - 320px, 732px)) / 2 + 2px)!important}
}

/* Side menu: no bottom bar (version / Log ud — Log ud lives in Indstillinger);
   the connection dot sits next to "OMNiAi", orange like the logo. */
#drawer .drawer-footer{display:none!important}
html.qura-edge .drawer{padding-bottom:var(--qura-safe-bottom,0px)!important}
#drawer .brand-copy strong{display:inline-flex!important;align-items:center;gap:8px}
#drawer .brand-copy strong #connectionDot{
  width:8px;height:8px;min-width:8px;border-radius:50%;display:inline-block;flex:none;
  background:#6B7A8C;box-shadow:none;
}
#drawer .brand-copy strong #connectionDot.online{background:#E0942A;box-shadow:0 0 8px rgba(224,148,42,.75)}
#drawer .brand-copy strong #connectionDot:not(.online):not(.offline){background:#6B7A8C}
#drawer .brand-copy strong #connectionDot.offline{background:#ff667d;box-shadow:0 0 8px rgba(255,102,125,.6)}

/* Side menu runs all the way down behind the Android buttons, with only a
   faint fade there — just enough to see the buttons. */
html.qura-edge .drawer{padding-bottom:0!important}
html.qura-edge .drawer .drawer-content{padding-bottom:calc(var(--qura-safe-bottom,0px) + 18px)!important}
html.qura-edge .drawer::after{
  content:""!important;display:block!important;position:absolute!important;
  left:0;right:0;bottom:0;top:auto!important;width:auto!important;
  height:calc(var(--qura-safe-bottom,0px) + 10px)!important;
  z-index:5;pointer-events:none;opacity:1!important;
  background:linear-gradient(0deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,.28) 55%,rgba(0,0,0,0) 100%)!important;
}