/* browser chrome: tabs, address bar, page frame, loading states */

#proxy-content { width:100%; height:100%; display:flex; overflow:hidden; }
#proxy-app { width:100%; height:100%; display:flex; min-width:0; overflow:hidden; }
.browser-container { position:relative; isolation:isolate; width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden; }
/* the one copy of the wallpaper, behind everything (wallpapers.js sets --shell-wallpaper). mochii's own pages are
   see-through and add their own dim, so the bars and the page show the same picture lined up */
.browser-container::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; background:var(--shell-wallpaper, none) center/cover no-repeat, var(--bg-body); }
/* animated wallpapers (shaders.js) draw here, over the plain one */
.shader-wallpaper { position:absolute; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; display:none; }
/* the tab strip, address bar and sidebar are a little see-through */
.tabbar, .main-nav, .side-rail { background:color-mix(in srgb, var(--surface-0) 62%, transparent); }

.build-and-discord {
  position: fixed;
  bottom: 6px;
  right: 6px;
  font-size: 8px;
  opacity: 0.5;
}

a {
  color: inherit;
}

/* tab strip on top: plain tabs with an underline on the active one, the online count at the far end */
.tabbar {
  height:36px; flex:0 0 auto; display:flex; align-items:stretch; gap:2px; padding:0 10px 0 5px;
  border-bottom:1px solid var(--border-subtle); z-index:14;
}
.tabs-container { display:flex; align-items:stretch; gap:2px; min-width:0; overflow-x:auto; overflow-y:hidden; }
.tabs-container::-webkit-scrollbar { display:none; }
.tab {
  position:relative; flex:0 1 168px; width:168px; min-width:90px; display:flex; align-items:center; gap:8px; padding:0 7px 0 11px;
  color:var(--text-muted); cursor:pointer; user-select:none; overflow:hidden;
  transition:color var(--motion-fast), background-color var(--motion-fast);
}
.tab::after { content:""; position:absolute; left:8px; right:8px; bottom:0; height:2px; border-radius:2px 2px 0 0; background:var(--text-white); opacity:0; transform:scaleX(.4); transition:opacity var(--motion-med), transform var(--motion-med) var(--motion); }
.tab:hover { color:var(--text-primary); background:var(--accent-soft); }
.tab.active { color:var(--text-white); background:transparent; }
.tab.active::after { opacity:1; transform:none; }
.tab.drag-over { box-shadow:inset 0 0 0 1px var(--accent); }
.tab-favicon { width:14px; height:14px; flex:0 0 14px; border-radius:3px; object-fit:contain; }
.tab-mark { display:flex; flex:0 0 auto; }
.tab > svg { flex:0 0 auto; }
.tab-title { flex:1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12.5px; }
.tab-close {
  flex:0 0 18px; width:18px; height:18px; display:flex; align-items:center; justify-content:center;
  border-radius:6px; color:var(--text-muted); font-size:15px; line-height:1; opacity:0;
  transition:opacity var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast);
}
.tab:hover .tab-close, .tab.active .tab-close { opacity:.75; }
.tab-close:hover { opacity:1!important; color:var(--text-white); background:var(--accent-active); }
.tab-spinner { width:13px; height:13px; border:2px solid var(--border-faint); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; flex:0 0 13px; }
.new-tab-btn {
  align-self:center; border:0; color:var(--text-muted); background:transparent; width:28px; height:28px; flex:0 0 28px;
  border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background-color var(--motion-fast), color var(--motion-fast);
}
.new-tab-btn:hover { background:var(--accent-soft); color:var(--text-white); }

/* the address bar row */
.main-nav {
  height:48px; flex:0 0 auto; padding:0 12px 0 8px; display:flex; align-items:center; gap:8px;
  border-bottom:1px solid var(--border-subtle); z-index:15;
}
.nav-controls, .window-controls { display:flex; align-items:center; gap:2px; flex:0 0 auto; }
.window-controls { gap:8px; }
.chrome-icon {
  width:30px; height:30px; flex:0 0 30px; border:0; border-radius:8px; background:transparent; color:var(--text-muted);
  display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; font-size:14px;
  transition:background var(--motion-fast), color var(--motion-fast);
}
.chrome-icon:hover { background:var(--accent-soft); color:var(--text-white); }
.chrome-icon:active { background:var(--accent-active); }
.chrome-icon.disabled { opacity:.25; pointer-events:none; }
.chrome-icon svg, .new-tab-btn svg { width:16px; height:16px; }
.browser-container:not([data-page=""]) #devtools-btn { display:none; }
.omnibox { flex:1; min-width:0; display:flex; align-items:center; gap:10px; }
.omnibox-input-wrap { flex:1; min-width:0; position:relative; display:flex; align-items:center; }
.omnibox input {
  width:100%; height:32px; border:1px solid var(--border-subtle); outline:none; border-radius:9px;
  background:var(--surface-2); color:var(--text-primary); padding:0 14px 0 34px; font-size:13px;
  caret-color:var(--accent); text-transform:lowercase; transition:background-color .12s, border-color .12s, box-shadow .12s;
}
.omnibox input:hover { border-color:var(--border-faint); }
.omnibox input:focus { background:var(--surface-3); border-color:var(--border-faint); box-shadow:0 0 0 3px var(--accent-soft); }
.omnibox input::placeholder { color:var(--text-faint); }
.omnibox-icon { position:absolute; left:11px; width:16px; height:16px; display:flex; align-items:center; justify-content:center; color:var(--text-muted); z-index:2; pointer-events:none; }
.omnibox-icon svg { width:15px; height:15px; }
.omnibox-icon.secure { color:var(--accent); }
.omnibox-icon.secure svg { width:13px; height:13px; }
.translate-chip {
  position:absolute; right:5px; height:22px; max-width:46%; padding:0 9px 0 7px; display:flex; align-items:center; gap:5px; z-index:2;
  border:1px solid var(--border-faint); border-radius:7px; background:var(--accent-soft); color:var(--text-secondary);
  font-size:11px; text-transform:lowercase; white-space:nowrap; cursor:pointer; transition:color var(--motion-fast), border-color var(--motion-fast);
}
.translate-chip[hidden] { display:none; }
.omnibox-input-wrap:has(.translate-chip:not([hidden])) input { padding-right:150px; }
.translate-chip span { overflow:hidden; text-overflow:ellipsis; }
.translate-chip svg { flex:0 0 auto; color:var(--accent); }
.translate-chip:hover { color:var(--text-white); border-color:var(--text-muted); }
.translate-chip.off { background:var(--surface-3); }
.translate-chip.off svg { color:var(--text-muted); }
.translate-chip.busy svg { animation:translate-pulse 1s ease-in-out infinite; }
@keyframes translate-pulse { 50% { opacity:.35; } }
.nav-account {
  width:26px; height:26px; flex:0 0 26px; padding:0; border:1px solid var(--border-faint); border-radius:50%; overflow:hidden;
  background:var(--surface-4); color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer;
  font-size:14px; line-height:1; transition:border-color var(--motion-fast), color var(--motion-fast), box-shadow var(--motion-fast);
}
.nav-account.signed-in { color:var(--text-white); }
.nav-account img { width:100%; height:100%; object-fit:cover; display:block; }
.nav-account:hover { border-color:var(--text-muted); color:var(--text-white); box-shadow:0 0 0 3px var(--accent-soft); }
.nav-account:focus-visible, .side-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* the sidebar: mochii's pages at the top, what's new, shortcuts and settings at the bottom */
.shell-body { flex:1; min-height:0; display:flex; }
.side-rail {
  width:50px; flex:0 0 50px; display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  padding:10px 0; border-right:1px solid var(--border-subtle); z-index:13;
}
.side-rail-nav, .side-rail-foot { display:flex; flex-direction:column; align-items:center; gap:6px; }
.side-btn {
  position:relative; width:36px; height:36px; border:1px solid transparent; border-radius:10px; background:transparent;
  color:var(--text-muted); display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.side-btn:hover { background:var(--accent-soft); color:var(--text-white); }
.side-btn:active { background:var(--accent-active); }
.side-btn.on { background:var(--surface-5); border-color:var(--border-faint); color:var(--text-white); }
.side-btn::after {
  content:attr(data-tip); position:absolute; left:calc(100% + 12px); top:50%; transform:translate(-4px,-50%); padding:6px 10px;
  border-radius:8px; background:var(--surface-5); border:1px solid var(--border-faint); color:var(--text-white); font-size:12px;
  line-height:1; white-space:nowrap; opacity:0; pointer-events:none; z-index:30; transition:opacity .12s, transform .12s;
}
.side-btn:hover::after, .side-btn:focus-visible::after { opacity:1; transform:translate(0,-50%); }
/* the music player next to the url bar: same height, fill and radius as the url bar */
.nav-music:not(.has-track), .browser-container[data-page="music"] .nav-music { display:none; }
.nav-music { flex:0 1 280px; min-width:190px; height:32px; display:flex; align-items:center; gap:2px; padding:0 5px 0 4px; border:1px solid var(--border-subtle); border-radius:9px; background:var(--surface-2); }
.nm-now { flex:1; min-width:0; height:26px; display:flex; align-items:center; gap:10px; padding:0 8px; border:0; border-radius:10px; background:transparent; color:var(--text-muted); font:inherit; font-size:12px; text-align:left; cursor:pointer; transition:background var(--motion-fast), color var(--motion-fast); }
.nm-now:hover { background:var(--accent-soft); color:var(--text-primary); }
.nm-now svg { flex:0 0 auto; width:16px; height:16px; }
.nav-music.playing .nm-now svg { color:var(--accent); }
.nm-now span { min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; color:var(--text-secondary); text-transform:lowercase; }
.nav-music:not(.has-track) .nm-now span { color:var(--text-muted); text-transform:lowercase; }
.nm-btn { width:26px; height:26px; flex:0 0 26px; display:flex; align-items:center; justify-content:center; border:0; border-radius:9px; background:transparent; color:var(--text-muted); cursor:pointer; transition:background var(--motion-fast), color var(--motion-fast); }
.nm-btn:hover { background:var(--accent-soft); color:var(--text-white); }
.nm-btn svg { width:15px; height:15px; }
.nm-btn > span { display:flex; }
.nm-btn .i-pause, .nav-music.playing .nm-btn .i-play { display:none; }
.nav-music.playing .nm-btn .i-pause { display:flex; }
.nav-music:not(.has-track) .nm-btn { opacity:.4; pointer-events:none; }
.nm-now:focus-visible, .nm-btn:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
@media (max-width:1000px) { .nav-music { flex-basis:170px; } }
@media (max-width:760px) { .nav-music .nm-now span { display:none; } .nav-music { flex:0 0 auto; min-width:0; } }
@media (max-width:560px) { .nav-music { display:none; } }
.iframe-container {
  position:relative;
  flex:1;
  min-width:0;
  min-height:0;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.02), transparent 55%),
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px),
    var(--bg-body);
  background-size:100% 100%,20px 20px,20px 20px,auto;
}
/* on mochii's pages the frame lets the wallpaper through. sites keep the grid behind them while they load */
.browser-container:not([data-page=""]) .iframe-container { background:transparent; }
.iframe-container iframe {
  position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:transparent;
  transition:filter .18s var(--motion), opacity .18s var(--motion);
}
.iframe-container iframe.hidden { display:none; }
.iframe-container iframe.loading { filter:blur(10px); opacity:.82; }
.iframe-container iframe:not(.hidden) { animation:page-in var(--motion-med) var(--motion) both; }

.page-loading { position:absolute; inset:0; z-index:20; display:none; flex-direction:column; align-items:center; justify-content:center; gap:12px; color:var(--text-muted); font-size:12px; }
.page-loading .spinner { margin:0; }
#online-count { position:absolute; left:18px; bottom:14px; z-index:5; font-size:15.6px; color:var(--text-faint); pointer-events:none; user-select:none; }
#online-count[hidden] { display:none; }
.loading-bar-container { position:absolute; top:0; left:0; right:0; height:2px; z-index:25; pointer-events:none; }
.loading-bar { width:0; height:100%; background:var(--accent); opacity:0; transition:width .2s, opacity .15s; }

.message-container {
  position:absolute; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.78); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.message-content {
  width:min(410px, calc(100% - 32px)); padding:26px 28px; border:1px solid var(--border-faint);
  border-radius:var(--radius-dialog); background:var(--surface-2); text-align:center; animation:fade-in .18s ease;
}
.message-content h1 { color:var(--text-primary); font-size:16px; font-weight:500; margin-bottom:8px; }
.message-content p { color:var(--text-muted); font-size:12px; line-height:1.7; word-break:break-word; }
.spinner { width:26px; height:26px; margin:0 auto 16px; border:2px solid var(--border-faint); border-top-color:var(--accent); border-radius:50%; animation:spin .8s linear infinite; }
.message-button {
  margin-top:16px; padding:9px 14px; border:0; border-radius:var(--radius-control); background:var(--surface-4);
  color:var(--text-secondary); cursor:pointer; font-size:12px; transition:.1s;
}
.message-button:hover { background:var(--surface-hover); color:var(--text-white); transform:scale(1.03); }
/* phones: the sidebar becomes a bar along the bottom */
@media (max-width:640px) {
  .main-nav { gap:6px; padding:0 10px 0 6px; }
  .nav-controls #fwd-btn { display:none; }
  .shell-body { flex-direction:column-reverse; }
  .side-rail { width:auto; flex:0 0 auto; flex-direction:row; justify-content:space-between; padding:6px 8px; border-right:0; border-top:1px solid var(--border-subtle); }
  .side-rail-nav, .side-rail-foot { display:contents; }
  .side-btn { width:34px; }
  .side-btn::after { display:none; }
  .tab { flex-basis:150px; }
}