/* MOMIKA presentation only; original components and operation bindings are unchanged. */
:root {
  --bg:#f8f4f1;--text:#242326;--text-2:#626168;--text-3:#7b7980;
  --bg-hover:rgba(70,65,60,.055);--bg-active:#eeece9;
  --radius-surface:30px;--radius:22px;--radius-sm:14px;
  --glass-border:rgba(91,76,61,.07);
  --glass-control:linear-gradient(160deg,#ffffff,#fdfcfb);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.9);
  --recessed-edge:inset 0 0 0 1px rgba(77,64,53,.08);
  --warm-shadow:0 6px 24px rgba(108,87,68,.045);
  --warm-shadow-strong:0 14px 40px rgba(108,87,68,.09);
  --card-fill:rgba(255,255,255,.82);--card-shadow:0 2px 8px rgba(108,87,68,.025);
  --control-shadow:inset 0 1px 0 rgba(255,255,255,.8);--input-surface:rgba(252,250,248,.9);
}
[data-theme='dark'] {
  --bg:#191919;--text:#eeedef;--text-2:#b8b5bc;--text-3:#99969e;
  --bg-hover:rgba(255,255,255,.055);--bg-active:#363435;
  --glass-border:rgba(255,255,255,.065);--glass-control:linear-gradient(160deg,#292829,#262526);
  --glass-highlight:inset 0 1px 0 rgba(255,255,255,.035);
  --recessed-edge:inset 0 0 0 1px rgba(255,255,255,.09);
  --warm-shadow:0 6px 24px rgba(0,0,0,.12);--warm-shadow-strong:0 14px 40px rgba(0,0,0,.22);
  --card-fill:#252425;--card-shadow:0 2px 8px rgba(0,0,0,.045);
  --control-shadow:inset 0 1px 0 rgba(255,255,255,.035);--input-surface:#202021;
}
body {line-height:1.65;}
.shell {padding:22px 24px 12px;gap:12px;}
.shell-body {gap:26px;}
.sidebar {padding:24px 14px 18px;border-width:1px;box-shadow:var(--glass-highlight),var(--warm-shadow);}
.brand {padding:6px 14px 24px;}
.brand .logo {gap:12px;}
.brand .logo::after {content:'QueryHub';font-size:21px;font-weight:600;letter-spacing:-.6px;color:var(--text);}
.brand .logo .mark {width:36px;height:36px;}
.brand .slogan {margin-top:14px;font-size:11px;line-height:1.75;color:var(--text-2);}
.nav {gap:5px;}
.nav-item {min-height:44px;padding:10px 14px;gap:12px;border-radius:16px;font-size:14px;}
.nav-item.active {font-weight:500;box-shadow:none;}
.nav-item .ico {width:18px;font-size:18px;line-height:1;}
.nav-item .ico img {display:block;width:18px;height:18px;opacity:.64;}
.nav-item.active .ico img {opacity:.9;}
[data-theme='dark'] .nav-item .ico img {filter:invert(1);}
.sidebar-foot {padding:18px 14px 0;font-size:11px;color:var(--text-3);}
.main-panel {background:transparent;border:0;box-shadow:none;border-radius:0;}
.topbar {border:0;padding:8px 8px 20px;gap:12px;min-height:74px;}
.topbar .title {font-size:27px;line-height:1.25;font-weight:600;letter-spacing:-.6px;}
.topbar .btn {border:0;background:transparent;box-shadow:none;color:var(--text-2);}
.topbar .btn:hover {background:var(--bg-hover);box-shadow:none;}
.topbar .conn {background:transparent;border-color:var(--border);}
.topbar .conn .led {box-shadow:none;}
.top-username {font-size:12px;color:var(--text-2);}
.topbar .avatar {width:26px;height:26px;font-weight:500;}
.content {padding:4px 8px 28px;}
.content-narrow {max-width:1120px;}
.page-new .content-narrow,.page-search .content-narrow {max-width:960px;}
.statusbar {min-height:26px;flex-basis:26px;padding:0 8px;border:0;border-radius:0;background:transparent;box-shadow:none;font-size:11px;color:var(--text-3);}
.statusbar .led {box-shadow:none;width:6px;height:6px;}
.filterbar {gap:10px;margin-bottom:20px;align-items:center;}
.page-home .filterbar {padding-bottom:16px;border-bottom:1px solid var(--border);}
.page-home .filterbar .grow {min-width:8px;}
/* Retain duplicate headings for assistive technology, without repeating the visible page title. */
:is(.page-new,.page-drafts,.page-notifications) .filterbar > h3,.page-settings .content-narrow > h3 {
  position:absolute;width:1px;height:1px;padding:0;margin:-1px!important;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.panel,.qcard {background:var(--card-fill);border:1px solid var(--glass-border);box-shadow:var(--card-shadow);border-radius:var(--radius);}
.panel {padding:28px;}
.panel h3 {margin:0 0 20px;font-size:16px;font-weight:600;}
.qcard {padding:20px 24px;margin-bottom:10px;}
.qcard:hover {transform:none;background:var(--glass-control);border-color:var(--border-strong);box-shadow:var(--card-shadow);}
.qcard .head {gap:10px;}
.qcard .head > .title {order:0;}
.qcard .head > .dot,.qcard .head > .answered-pill {order:1;}
.qcard .head > .unread-dot {order:3;}
.qcard .unanswered-label {order:2;font-size:11px;color:var(--text-2);white-space:nowrap;flex-shrink:0;}
.qcard .title {font-size:17px;font-weight:600;line-height:1.5;letter-spacing:-.15px;}
.qcard .preview {font-size:14px;line-height:1.65;margin:8px 0 0;}
.qcard .meta {margin-top:14px;gap:14px;color:var(--text-2);font-size:12px;}
.qcard .stats {color:var(--text-2);font-size:12px;}
.qcard .stats b {color:var(--text);font-weight:500;font-size:12px;margin:0;}
.qcard .stats > span {display:inline-flex;align-items:center;gap:5px;font-size:0;}
.qcard .stats > span::before {content:'';display:block;width:14px;height:14px;background:url('../momika/img/bootcss-icons/chat-dots.svg') center/contain no-repeat;opacity:.65;}
.qcard .stats > span:nth-child(2)::before {background-image:url('../momika/img/bootcss-icons/file-earmark-text.svg');}
[data-theme='dark'] .qcard .stats > span::before {filter:invert(1);}
.answered-pill {font-size:11px;padding:3px 9px;background:rgba(26,143,74,.075);white-space:nowrap;flex-shrink:0;}
.dot {width:8px;height:8px;}
.page-settings .content-narrow {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start;}
.page-settings .panel {margin:0;min-width:0;}
.info-list {font-size:12px;}
.info-list .row2 {padding:9px 0;border-bottom-style:solid;border-bottom-color:var(--glass-border);}
.info-list .k {color:var(--text-2);}
.info-list .v {max-width:68%;overflow-wrap:anywhere;}
.detail-grid {grid-template-columns:minmax(0,1fr) 250px;gap:22px;}
.q-title {font-size:25px;line-height:1.4;font-weight:600;letter-spacing:-.5px;overflow-wrap:anywhere;}
.q-byline {gap:8px 12px;margin:16px 0 24px;padding-bottom:18px;border-bottom:1px solid var(--glass-border);line-height:1.7;color:var(--text-2);}
.page-question .md-body {font-size:15px;line-height:1.85;}
.md-body {overflow-wrap:anywhere;}
.md-body > :first-child {margin-top:0;}
.md-body > :last-child {margin-bottom:0;}
.md-body pre {padding:16px;border-radius:12px;}
.detail-grid > aside {position:sticky;top:4px;padding:22px;background:rgba(255,255,255,.45);box-shadow:none;}
[data-theme='dark'] .detail-grid > aside {background:rgba(255,255,255,.025);}
.detail-grid > aside h3 {font-size:13px;margin-bottom:12px;}
.timeline-title {margin:28px 2px 16px;font-size:15px;font-weight:600;}
.entry {margin:0 0 14px 8px;padding:20px 24px;border:1px solid var(--glass-border);border-radius:18px;background:var(--card-fill);box-shadow:none;}
.entry:last-child {border-left-color:var(--glass-border);}
.entry .tdot {width:6px;height:6px;left:-12px;top:27px;}
.entry .e-head {gap:8px 10px;margin-bottom:14px;color:var(--text-2);font-size:11px;}
.entry .e-author {font-size:13px;font-weight:500;}
.entry .e-type {padding:1px 6px;border-radius:6px;border-color:var(--border);}
.entry.followUp {margin-left:28px;}
.btn {min-height:36px;padding:7px 15px;border:1px solid var(--border);box-shadow:none;font-size:13px;font-weight:500;}
.btn:hover {box-shadow:inset 0 0 0 100px rgba(128,128,128,.075);}
.btn.primary {background:var(--brand);border-color:transparent;font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.15);}
.btn.primary:hover {filter:none;box-shadow:inset 0 0 0 100px rgba(128,128,128,.18);}
.btn.sm {min-height:30px;padding:5px 11px;font-size:12px;}
.btn.danger {border-color:rgba(229,72,77,.2);}
.seg {padding:3px;gap:3px;background:transparent;border:0;border-radius:14px;box-shadow:none;}
.seg button {min-height:32px;padding:5px 12px;border-radius:11px;font-size:12px;}
.seg button.on {background:var(--bg-active);color:var(--text);font-weight:500;box-shadow:none;}
.seg button:hover {background:var(--bg-hover);}
.seg button.on:hover {background:var(--bg-active);}
input[type='text'],input[type='password'],input[type='search'],input[type='number'],
input[type='url'],input[type='date'],select,textarea {padding:10px 14px;background:var(--input-surface);border:1px solid var(--border);box-shadow:none;font-size:13px;}
input:focus,select:focus,textarea:focus {box-shadow:none;border-color:rgba(10,132,255,.55);}
:is(button,input,textarea,select,a):focus-visible {outline:2px solid var(--brand);outline-offset:3px;}
textarea {border-radius:14px;line-height:1.75;}
label.field {margin-bottom:24px;}
label.field > span {margin-bottom:8px;font-size:12px;font-weight:500;color:var(--text-2);}
.field + .field {margin-top:20px;}
.page-new textarea {min-height:240px;}
.form-actions {gap:8px;margin-top:24px;padding-top:18px;border-top:1px solid var(--glass-border);}
.toolbar {gap:4px;margin-bottom:10px;}
.toolbar .btn {min-height:28px;padding:3px 9px;border-color:transparent;background:transparent;box-shadow:none;}
.toolbar .btn:hover {background:var(--bg-hover);}
.dropzone {padding:22px;background:var(--input-surface);border-color:var(--border-strong);color:var(--text-2);}
.att-item {border-color:var(--border);border-radius:12px;background:var(--input-surface);}
.att-item .size {color:var(--text-2);}
.empty,.loading {color:var(--text-2);}
.page-search .filterbar:first-child {display:grid;grid-template-columns:minmax(0,1fr) auto auto;}
.page-search .row-center {flex-wrap:wrap;}
.page-search .row-center input[type='date'] {flex:1 1 120px;min-width:0;}
.hero {min-height:100%;height:auto;padding:48px 8vw;}
.hero-right {padding:36px;border:1px solid var(--glass-border);border-radius:var(--radius-surface);background:var(--glass-control);box-shadow:var(--warm-shadow);gap:18px;}
.hero-left .halo {max-width:100%;animation:none;opacity:.65;}
.hero-logo {width:144px;height:144px;}
.hero-note {color:var(--text-2);overflow-wrap:anywhere;}
.hero-field > span {font-weight:500;}
.hero-link {color:var(--text-2);}
.recovery-box {overflow-wrap:anywhere;}
.preview-shell,.modal-box {box-shadow:var(--warm-shadow-strong);}
.preview-tools button,.tool-download,.tool-close {box-shadow:none;border-color:var(--border);}
@media (min-width:1101px) {:root {--sidebar-w:224px;}}
@media (min-width:768px) and (max-width:1100px) {
  :root {--sidebar-w:190px;}
  .shell {padding:16px 16px 10px;}.shell-body {gap:18px;}.sidebar {padding:20px 10px;}
  .brand {padding-left:12px;padding-right:12px;}.topbar {gap:8px;}
}
@media (max-width:1000px) {.detail-grid {grid-template-columns:minmax(0,1fr);}.detail-grid > aside {position:static;}}
@media (max-width:767px) {
  .shell {padding:0;gap:0;}.shell-body {gap:0;padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  .sidebar {padding:8px 10px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -1px 0 var(--border);}
  .nav {gap:2px;}.nav-item {min-height:46px;padding:5px 3px;gap:4px;}
  .topbar {padding:12px 20px;gap:8px;min-height:64px;}.topbar .title {font-size:23px;}
  .content {padding:12px 20px 24px;}.panel,.qcard {padding:20px;border-radius:20px;}
  .qcard .title {font-size:16px;}.qcard .meta {gap:8px 12px;}
  .page-settings .content-narrow {grid-template-columns:minmax(0,1fr);gap:16px;}
  .filterbar {gap:8px;}.page-home .filterbar .grow {display:none;}
  .page-search .filterbar:first-child {grid-template-columns:minmax(0,1fr) auto;}
  .page-search .filterbar:first-child > input {grid-column:1 / -1;}
  .page-search .filterbar:first-child > button {justify-content:center;}
  .q-title {font-size:23px;}.q-byline {margin:14px 0 18px;}
  .entry {margin-left:8px;padding:18px;}.entry.followUp {margin-left:20px;}
  .hero {grid-template-columns:minmax(0,1fr);gap:20px;padding:32px 20px;}
  .hero-left {min-height:160px;}.hero-logo {width:100px;height:100px;}.hero-left .halo {height:220px;}
  .hero-right {padding:26px;}
}
@media (max-width:360px),(max-height:320px) {
  .topbar {padding:8px 12px;min-height:48px;}.topbar .title {font-size:18px;}
  .content {padding:8px 12px 18px;}.panel,.qcard {padding:16px;}
}

/* Progressive viewport sizing keeps browser chrome and the on-screen keyboard usable. */
#app {overflow:auto;}
@supports (height:100dvh) {#app {height:100dvh;}.preview-mask {height:100dvh;bottom:auto;}}
.main-panel,.content-narrow,.detail-grid > *,.md-body {min-width:0;}
.qcard .title,.qcard .preview,.qcard .meta,.entry .e-head,.att-item {overflow-wrap:break-word;overflow-wrap:anywhere;}
.att-item {max-width:100%;flex-wrap:wrap;}
.attachments li {flex-wrap:wrap;}
.attachments li > .grow {min-width:0;overflow-wrap:anywhere;flex:1 1 160px;}
.md-body table {display:block;max-width:100%;overflow-x:auto;}
.topbar {flex-wrap:wrap;}
.topbar .title {min-width:0;}
.top-username {max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.preview-mask {-webkit-backdrop-filter:blur(6px) saturate(120%);}
.text-host {background:var(--bg-panel);color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere;}
.preview-tools,.tool-download,.tool-close {flex-shrink:0;}
@media (pointer:coarse) {
  .btn,.btn.sm,.toolbar .btn,.seg button,.nav-item,.hero-link {min-height:44px;}
  .preview-tools button,.tool-download,.tool-close {min-width:44px;height:44px;}
  input[type='text'],input[type='password'],input[type='search'],input[type='number'],
  input[type='url'],input[type='date'],select,textarea,.hero-field input {font-size:16px;min-height:44px;}
  .toolbar {gap:6px;}
}
@media (max-width:1100px) {.top-conn {display:none;}}
@media (max-width:767px) {
  .topbar {padding-top:calc(12px + env(safe-area-inset-top));padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right));}
  .content {padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right));}
  .sidebar {padding-left:calc(10px + env(safe-area-inset-left));padding-right:calc(10px + env(safe-area-inset-right));}
  .hero {padding-top:calc(32px + env(safe-area-inset-top));padding-bottom:calc(32px + env(safe-area-inset-bottom));}
}
@media (max-width:600px) {
  .preview-mask {padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom);}
  .preview-header {flex:0 0 auto;min-height:60px;padding:8px 12px;flex-wrap:wrap;}
  .file-heading {flex:1 1 calc(100% - 120px);}
  .preview-tools {order:2;flex:1 1 100%;justify-content:center;}
  .tool-download,.tool-close {order:1;}
}
/* A landscape phone has too little height for a full sidebar. Keep all six entries visible. */
@media (min-width:768px) and (max-width:950px) and (max-height:500px) {
  .shell {padding:0;gap:0;}.shell-body {gap:0;padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  .sidebar {position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;flex-direction:row;overflow:visible;
    padding:8px calc(10px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left));border-radius:0;border:0;box-shadow:0 -1px 0 var(--border);}
  .sidebar .brand,.sidebar-foot,.statusbar {display:none;}
  .sidebar .nav {flex:1 1 auto;flex-direction:row;gap:2px;margin:0;}
  .nav-item {flex:1 1 0;min-width:0;min-height:46px;flex-direction:column;justify-content:center;padding:5px 3px;gap:4px;font-size:11px;}
  .nav-item .ico {width:auto;}.nav-item .n-badge {position:absolute;top:2px;right:22%;}
  .nav-item {position:relative;}
  .topbar {min-height:48px;flex-basis:auto;padding:8px 20px;}
  .top-username,.top-theme-text,.top-logout-text {display:none;}.top-logout-icon {display:inline;}
  .content {padding:8px calc(20px + env(safe-area-inset-right)) 20px calc(20px + env(safe-area-inset-left));}
}