/* Mouse Party - App Styles */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: Chicago_12, Chicago, Geneva, "Helvetica Neue", sans-serif;
  font-size: 14px;
  overflow: hidden;
  height: 100vh;
  cursor: url(/cursors/default.png), auto;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}

/* Hover/clickable cursor */
a, button, [onclick], .dock-item, .finder-item, .theme-swatch, .cursor-option,
ul[role="menu-bar"] > [role="menu-item"], ul[role="menu"] > [role="menu-item"] > a,
.title-bar button, .inactive-title-bar button {
  cursor: url(/cursors/hover.png), pointer;
}

/* Menu bar */
.menu-bar-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 28px;
  border-bottom: 2px solid var(--secondary);
  display: flex;
  align-items: stretch;
  background: var(--primary);
}
.menu-bar {
  flex: 1;
  font-size: 14px;
}
.menu-bar-clock {
  display: flex;
  align-items: center;
  padding: 0 10px;
  font-size: 14px;
  cursor: default;
  white-space: nowrap;
  user-select: none;
}
.menu-bar .apple-menu {
  padding: 4px 10px;
}
.menu-bar .menu-icon {
  vertical-align: middle;
  position: relative;
  top: -2px;
  filter: none;
  image-rendering: pixelated;
}
.menu-bar .apple-menu:hover .menu-icon,
.menu-bar .apple-menu:focus .menu-icon,
.menu-bar .apple-menu:focus-within .menu-icon {
  filter: invert(1);
}
.menu-bar .menu-action-item {
  padding: 4px 10px;
}

/* Desktop */
.desktop {
  position: fixed;
  top: 28px;
  left: 0;
  right: 0;
  bottom: 52px;
  overflow: hidden;
}

#windows-container {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Window positioning */
.window {
  position: absolute;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 2px 0 var(--secondary);
  resize: both;
  overflow: hidden;
}

/* Dock */
.dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52px;
  background: var(--primary);
  border-top: 2px solid var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  z-index: 9998;
}

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 12px;
  background: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: Chicago_12, Chicago, Geneva, sans-serif;
  font-size: 10px;
  color: var(--secondary);
  position: relative;

}
.dock-item:hover {
  border-color: var(--secondary);
  background: var(--primary);
}
.dock-item:active {
  background: var(--secondary);
  color: var(--primary);
}
.dock-item:active img {
  filter: invert(1);
}
.dock-item img {
  width: 28px;
  height: 28px;
}
.dock-item span:not(.badge) {
  line-height: 1;
  padding-left: 1px;
}

/* Dock badge */
.badge {
  position: absolute;
  top: -9px;
  right: 2px;
  background: var(--secondary);
  color: var(--primary);
  font-size: 10px;
  font-weight: bold;
  line-height: 1.2;
  padding: 2px 5px;
  text-align: center;
}

/* Welcome overlay */
.welcome-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.welcome-dialog {
  max-width: 420px;
  padding: 20px;
  font-size: 14px;
}
.intro-content {
  text-align: center;
  padding: 8px 0;
}
.intro-content img {
  margin-bottom: 12px;
}
.intro-content h2 {
  margin-bottom: 8px;
  font-size: 1.3em;
}
.intro-content p {
  margin: 6px 0;
  line-height: 1.5;
}
.welcome-content {
  max-width: 340px;
  margin: 0 auto;
}

/* Finder */
.finder-toolbar {
  font-size: 12px;
  gap: 8px;
}
.finder-toolbar a {
  font-size: 12px;
}
.finder-toolbar .btn {
  padding: 1px 6px;
  min-height: 18px;
  min-width: auto;
  font-size: 11px;
}
.finder-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.finder-view-btn img {
  display: block;
}

.finder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
  padding: 8px;
}
.finder-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  cursor: default;
  font-size: 11px;
  text-align: center;
  word-break: break-word;
  border: 1px solid transparent;
}
.finder-item:hover {
  background: var(--secondary);
  color: var(--primary);
  border-color: var(--secondary);
}
.finder-item:hover img {
  filter: invert(1);
}
.finder-item img {
  image-rendering: pixelated;
}

.finder-list {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.finder-list th {
  text-align: left;
  border-bottom: 1px solid var(--secondary);
  padding: 4px 8px;
  font-weight: bold;
}
.finder-list td {
  padding: 4px 8px;
  border-bottom: 1px dotted var(--tertiary);
}
.finder-list tr {
  cursor: default;
}
.finder-list tr:hover td {
  background: var(--secondary);
  color: var(--primary);
}

/* Reader */
.reader-toolbar {
  font-size: 12px;
}
.reader-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.reader-image-controls {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.reader-toolbar .btn {
  padding: 1px 8px;
  min-height: 18px;
  font-size: 11px;
}
.reader-zoom-btn {
  min-width: 24px;
  padding: 1px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.reader-zoom-btn img {
  display: block;
}
.reader-zoom-label {
  min-width: 42px;
  text-align: center;
  font-size: 11px;
}
.reader-body {
  line-height: 1.6;
  font-size: 15px;
}
.reader-body-image-mode {
  height: 100%;
  padding: 12px;
}
.reader-image-viewer {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.reader-image-stage {
  width: 100%;
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.reader-image {
  image-rendering: pixelated;
  border: 1px solid var(--tertiary);
  flex: none;
}
.reader-image-caption {
  color: var(--tertiary);
  font-size: 12px;
  text-align: center;
}
.reader-body h1 { font-size: 1.5em; margin: 0.5em 0; }
.reader-body h2 { font-size: 1.3em; margin: 0.5em 0; }
.reader-body h3 { font-size: 1.1em; margin: 0.5em 0; }
.reader-body p { margin: 0.5em 0; }
.reader-body ul, .reader-body ol { margin: 0.5em 0; padding-left: 1.5em; }
.reader-body li { margin: 0.25em 0; }
.reader-body code {
  background: var(--secondary);
  color: var(--primary);
  padding: 1px 4px;
  font-family: "Inconsolata", Menlo, Monaco, monospace;
  font-size: 13px;
}
.reader-body pre {
  background: var(--secondary);
  color: var(--primary);
  padding: 12px;
  overflow-x: auto;
  margin: 0.5em 0;
}
.reader-body pre code {
  padding: 0;
  background: none;
}
.reader-body blockquote {
  border-left: 3px solid var(--secondary);
  padding-left: 12px;
  margin: 0.5em 0;
  color: var(--tertiary);
}
.reader-body hr {
  margin: 1em 0;
}
.doc-link {
  text-decoration: underline;
  cursor: pointer;
}
.doc-link-broken {
  color: var(--tertiary);
  text-decoration: line-through;
  cursor: default;
}
.doc-image {
  image-rendering: pixelated;
  max-width: 100%;
  height: auto;
}
.doc-image-broken {
  display: inline-block;
  padding: 4px 8px;
  background: var(--secondary);
  color: var(--tertiary);
  font-size: 12px;
  border: 1px dashed var(--tertiary);
}

/* Chat */
#window-chat-content {
  display: flex;
  flex-direction: column;
  padding: 0;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  font-size: 14px;
}
.chat-message {
  padding: 3px 0;
  line-height: 1.4;
}
.chat-message-self strong {
  color: var(--tertiary);
}
.chat-time {
  color: var(--tertiary);
  font-size: 11px;
  margin-left: 6px;
}
.chat-admin-name {
  background: var(--secondary);
  color: var(--primary);
  padding: 1px 5px;
}
.chat-input-row {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-top: 1px solid var(--secondary);
}
.chat-input-row input {
  flex: 1;
  min-width: 0;
}
.chat-input-row .btn {
  min-width: 50px;
}
.chat-attach-btn {
  min-width: 28px !important;
  width: 28px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Chat toolbar */
.chat-toolbar {
  justify-content: space-between;
}
.chat-mute-btn {
  min-width: 24px !important;
  width: 24px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Settings */
.settings-form {
  font-size: 13px;
}
.settings-section {
  margin-bottom: 16px;
}
.settings-section-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-section-inline label {
  margin-bottom: 0;
}
.settings-form label {
  font-weight: bold;
  font-size: 12px;
  display: inline-block;
  margin-bottom: 6px;
}

/* Settings choices */
.theme-swatches,
.cursor-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.theme-swatch,
.cursor-option {
  display: grid;
  grid-template-rows: 28px 20px;
  justify-items: center;
  align-content: center;
  row-gap: 4px;
  width: 64px;
  height: 64px;
  border: 2px solid var(--secondary);
  background: var(--primary);
  color: var(--secondary);
  cursor: url(/cursors/hover.png), pointer;
  font-family: Chicago_12, Chicago, Geneva, sans-serif;
  font-size: 10px;
  font-weight: normal;
  padding: 4px;
  text-align: center;
}
.theme-swatch:hover,
.cursor-option:hover {
  transform: translate(-1px, -1px);
  box-shadow: 2px 2px 0 var(--secondary);
}
.theme-swatch.active,
.cursor-option.active {
  background: var(--secondary);
  color: var(--primary);
}
.settings-choice-sample {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.settings-choice-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1.1;
  min-height: 20px;
  width: 100%;
}
.theme-swatch-sample {
  border: 2px solid var(--secondary);
}
.theme-swatch.active .theme-swatch-sample {
  border-color: var(--primary);
}
.cursor-option-sample {
  border: 2px solid transparent;
}
.cursor-option-sample img {
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
  transform: translateX(var(--cursor-preview-offset-x, 0px));
}
.cursor-option.active .cursor-option-sample img {
  filter: invert(1);
}
.cursor-option input { display: none; }

/* Multiplayer cursors */
#ghost-layer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
}
#cursors-layer {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 1;
}
.remote-cursor {
  position: absolute;
  pointer-events: none;
  transition: left 1s linear, top 1s linear;
  display: flex;
  align-items: flex-start;
  gap: 4px;
}
.remote-cursor img {
  filter: drop-shadow(1px 1px 0 var(--primary));
}
.cursor-label {
  background: var(--secondary);
  color: var(--primary);
  font-size: 10px;
  padding: 1px 4px;
  white-space: nowrap;
  font-family: Chicago_12, Chicago, Geneva, sans-serif;
  margin-top: 14px;
}
.ghost-cursor {
  opacity: 0;
}
.ghost-cursor.ghost-visible {
  opacity: 0.25;
}
.ghost-cursor.ghost-enter {
  animation: ghost-enter 300ms ease-out forwards;
}
.ghost-cursor.ghost-exit {
  animation: ghost-exit 350ms ease-in forwards;
}
@keyframes ghost-enter {
  0%   { transform: scale(0);   opacity: 0; }
  50%  { transform: scale(1.25); opacity: 0.35; }
  100% { transform: scale(1);   opacity: 0.25; }
}
@keyframes ghost-exit {
  0%   { transform: scale(1);   opacity: 0.25; }
  40%  { transform: scale(1.25); opacity: 0.35; }
  100% { transform: scale(0);   opacity: 0; }
}
.ghost-label {
  font-style: italic;
}
.remote-cursor.cursor-enter {
  animation: cursor-enter 300ms ease-out forwards;
}
.remote-cursor.cursor-exit {
  animation: cursor-exit 350ms ease-in forwards;
}
@keyframes cursor-enter {
  0%   { transform: scale(0);    opacity: 0; }
  50%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1);    opacity: 1; }
}
@keyframes cursor-exit {
  0%   { transform: scale(1);    opacity: 1; }
  40%  { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(0);    opacity: 0; }
}

/* Context menu */
.context-menu {
  position: fixed;
  min-width: 180px;
  background: var(--primary);
  border: 1px solid var(--secondary);
  box-shadow: 2px 2px 0 var(--secondary);
  z-index: 10001;
  list-style: none;
  padding: 2px 0;
  margin: 0;
  font-family: Chicago_12, Chicago, Geneva, sans-serif;
  font-size: 13px;
}
.context-menu li { cursor: pointer; }
.context-menu li a {
  display: block;
  padding: 4px 16px;
  text-decoration: none;
  color: var(--secondary);
}
.context-menu li a:hover {
  background: var(--secondary);
  color: var(--primary);
}
.context-menu li.divider {
  border-top: 1px dotted var(--secondary);
  margin: 2px 0;
}

/* System Dialogs */
.system-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.system-dialog {
  width: min(420px, calc(100vw - 32px));
  box-shadow: 2px 2px 0 var(--secondary);
}
.system-dialog-contents {
  padding: 10px 20px 10px 24px;
}
.system-dialog-main {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 10px;
}
.system-dialog-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border: 2px solid var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.system-dialog-icon img {
  image-rendering: pixelated;
}
.system-dialog-title-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.system-dialog-message {
  white-space: pre-wrap;
  line-height: 1.45;
  font-size: 1.2em;
}
.system-dialog-input-row {
  margin-top: 10px;
}
.system-dialog-input {
  width: 100%;
}
.system-dialog-error {
  min-height: 1.2em;
  margin-top: 6px;
  font-size: 11px;
}
.system-dialog-actions {
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* Save Dialog */
.save-dialog-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
}
.save-dialog {
  box-shadow: 2px 2px 0 var(--secondary);
}

/* About window */
.about-content {
  padding: 20px;
}

.about-button-wrap {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

.about-button-image {
  display: block;
  width: 88px;
  height: 31px;
  image-rendering: pixelated;
}

/* Address Book */
.addressbook-grid {
  display: grid;
  grid-template-columns: repeat(3, 88px);
  grid-template-rows: repeat(3, 31px);
  gap: 8px;
  justify-content: center;
  justify-items: center;
  align-content: start;
}
.addressbook-slot {
  position: relative;
  width: 88px;
  height: 31px;
  border: 1px solid var(--secondary);
  background:
    repeating-conic-gradient(
      var(--tertiary) 0% 25%,
      var(--primary) 0% 50%
    ) 0 0 / 4px 4px;
}
.addressbook-slot-label {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 11px;
  color: var(--secondary);
  background: var(--primary);
  padding: 0 2px;
  line-height: 1;
  pointer-events: none;
}
.addressbook-slot-filled {
  border: none;
  background: var(--primary);
}
.addressbook-link {
  display: block;
  width: 88px;
  height: 31px;
}
.addressbook-link img {
  display: block;
  width: 88px;
  height: 31px;
  image-rendering: pixelated;
}

/* Full-height window panes (no padding) */
#window-terminal-content,
#window-pixel-editor-content,
#window-md-editor-content {
  padding: 0;
  overflow: hidden;
}

/* Markdown Editor */
.md-editor-toolbar {
  font-size: 12px;
}
.md-editor-toolbar .btn {
  padding: 1px 8px;
  min-height: 18px;
  font-size: 11px;
}
.md-editor-textarea {
  width: 100%;
  flex: 1;
  resize: none;
  border: none;
  padding: 12px;
  font-family: "Inconsolata", Menlo, Monaco, monospace;
  font-size: 13px;
  line-height: 1.5;
  background: var(--primary);
  color: var(--secondary);
  outline: none;
}
.md-editor-preview {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
}

/* Pixel Editor */
.pixel-editor-wrap {
  display: flex;
  height: 100%;
  gap: 0;
}
.pixel-editor-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  overflow: hidden;
  min-width: 0;
}
.pixel-canvas-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
}
#pixel-canvas {
  image-rendering: pixelated;
  width: 384px;
  height: 384px;
  border: 1px solid var(--secondary);
  cursor: crosshair;
}
.pixel-sidebar {
  width: 144px;
  min-width: 144px;
  border-left: 1px solid var(--secondary);
  padding: 8px;
  overflow-y: auto;
  font-size: 12px;
}
.pixel-tools {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.pixel-tool {
  min-width: auto;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pixel-tool svg {
  width: 16px;
  height: 16px;
  display: block;
}
.pixel-tool.active {
  background: var(--secondary);
  color: var(--primary);
}
.pixel-size-selector {
  margin-bottom: 6px;
}
.pixel-size-selector label {
  font-size: 12px;
}
.pixel-size-selector select {
  width: 100%;
  font-family: Chicago_12, Chicago, Geneva, sans-serif;
  font-size: 13px;
  padding: 2px 8px;
}
.pixel-palette-selector {
  margin-bottom: 6px;
}
.pixel-palette-selector label {
  font-size: 12px;
}
.pixel-palette-selector select {
  width: 100%;
  font-family: Chicago_12, Chicago, Geneva, sans-serif;
  font-size: 13px;
  padding: 2px 8px;
}
.pixel-grid-toggle {
  margin-bottom: 8px;
}
.pixel-grid-toggle label {
  font-size: 12px;
  font-family: Chicago_12, Chicago, Geneva, sans-serif;
}
.pixel-palette {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.pixel-swatch {
  width: 100%;
  aspect-ratio: 1;
  border: 2px solid var(--secondary);
  cursor: pointer;
  padding: 0;
}
.pixel-swatch.active {
  outline: 2px solid var(--secondary);
  outline-offset: 1px;
}
.pixel-swatch:hover {
  transform: scale(1.1);
}
.pixel-toolbar {
  font-size: 12px;
}
.pixel-toolbar .btn {
  padding: 1px 8px;
  min-height: 18px;
  font-size: 11px;
}

/* Terminal */
.terminal-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--secondary);
  color: var(--primary);
  font-family: "Inconsolata", Menlo, Monaco, monospace;
  font-size: 13px;
  padding: 0;
}
.terminal-output {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  white-space: pre-wrap;
  word-break: break-all;
}
.terminal-line {
  line-height: 1.4;
  min-height: 1.4em;
}
.terminal-input-line {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.terminal-prompt {
  white-space: nowrap;
  opacity: 0.7;
}
.terminal-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--primary);
  font-family: "Inconsolata", Menlo, Monaco, monospace;
  font-size: 13px;
  outline: none;
  caret-color: var(--primary);
  padding: 0;
  min-width: 0;
}

/* Fortune */
.fortune-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
.fortune-dialog {
  box-shadow: 2px 2px 0 var(--secondary);
}
.fortune-content {
  text-align: center;
}
.fortune-icon {
  margin-bottom: 8px;
}
.fortune-text {
  font-size: 15px;
  line-height: 1.5;
  margin: 12px 0;
  font-style: italic;
}
.fortune-author {
  font-size: 12px;
  color: var(--tertiary);
  margin-bottom: 12px;
}
.fortune-prompt-text {
  font-size: 14px;
  margin-bottom: 8px;
}
.fortune-prompt-note {
  font-size: 11px;
  color: var(--tertiary);
  margin-bottom: 12px;
  line-height: 1.4;
}
.fortune-input {
  width: 100%;
  resize: none;
  padding: 8px;
  font-family: Chicago_12, Chicago, Geneva, sans-serif;
  font-size: 13px;
  border: 1px solid var(--secondary);
  background: var(--primary);
  color: var(--secondary);
}
.fortune-input:focus {
  outline: none;
}
.fortune-char-count {
  text-align: right;
  font-size: 10px;
  color: var(--tertiary);
  margin-top: 2px;
}
.fortune-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Sticky Notes Layer */
#sticky-notes-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 2;
}

/* Sticky Note */
.sticky-note {
  position: absolute;
  width: 200px;
  pointer-events: auto;
  font-size: 12px;
  background: var(--note-bg);
  border: 1px solid var(--note-border);
  box-shadow: 2px 2px 0 var(--note-shadow);
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
.sticky-note::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 12px;
  height: 12px;
  background: var(--note-border);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  z-index: 1;
  opacity: 0.4;
}
.sticky-note-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 3px 3px 6px;
  font-size: 10px;
  cursor: grab;
  user-select: none;
  background: var(--note-header);
  border-bottom: 1px solid var(--note-border);
}
.sticky-note-header:active {
  cursor: grabbing;
}
.sticky-note-header-actions {
  display: flex;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
}
.sticky-note-creator {
  font-weight: bold;
  opacity: 0.7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticky-note-delete {
  width: 18px;
  height: 18px;
  border: 1px solid var(--note-close);
  background: var(--note-header);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url(/cursors/hover.png), pointer;
  color: var(--note-close);
  padding: 0;
  line-height: 1;
}
.sticky-note-delete-icon {
  width: 12px;
  height: 12px;
  background: currentColor;
  -webkit-mask: url(/icons/close.svg) center / contain no-repeat;
  mask: url(/icons/close.svg) center / contain no-repeat;
}
.sticky-note-delete:hover {
  background: var(--note-close);
  color: var(--note-bg);
}
.sticky-note-attach {
  width: 18px;
  height: 18px;
  border: 1px solid var(--note-close);
  background: var(--note-header);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: url(/cursors/hover.png), pointer;
  padding: 0;
}
.sticky-note-attach:hover {
  background: var(--note-close);
}
.sticky-note-attach:hover img {
  filter: brightness(2);
}
.sticky-note-body {
  padding: 4px 6px;
  min-height: 60px;
  flex: 1;
}
.sticky-note-textarea {
  width: 100%;
  min-height: 60px;
  border: none;
  background: transparent;
  color: #333;
  font-family: Chicago_12, Chicago, Geneva, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  resize: none;
  outline: none;
  padding: 0;
  overflow: hidden;
}
.sticky-note-content {
  white-space: pre-wrap;
  word-break: break-word;
  color: #333;
  line-height: 1.4;
}
.sticky-note-attachments {
  padding: 4px 6px 4px;
  border-top: 1px dotted var(--note-border);
}
.sticky-note-attachments .chat-attachment-tray {
  padding: 0;
  border-top: none;
}
.sticky-note-attachments .chat-attachment-chips {
  margin-top: 0;
}
.sticky-note-attachments .attachment-chip {
  font-size: 12px;
  padding: 2px 6px;
}

/* Sticky Note Color Tokens */
.sticky-note-yellow {
  --note-bg: #FFFFA5;
  --note-header: #F5F576;
  --note-border: #C8C840;
  --note-shadow: #C8C840;
  --note-close: #8B8B00;
}
.sticky-note-pink {
  --note-bg: #FFCCE5;
  --note-header: #FFB3D1;
  --note-border: #D98AAF;
  --note-shadow: #D98AAF;
  --note-close: #B3607F;
}
.sticky-note-blue {
  --note-bg: #CCE5FF;
  --note-header: #B3D1FF;
  --note-border: #80AADB;
  --note-shadow: #80AADB;
  --note-close: #5580AA;
}
.sticky-note-green {
  --note-bg: #CCFFCC;
  --note-header: #B3FFB3;
  --note-border: #80CC80;
  --note-shadow: #80CC80;
  --note-close: #559955;
}
.sticky-note-lavender {
  --note-bg: #E5CCFF;
  --note-header: #D1B3FF;
  --note-border: #AA80DB;
  --note-shadow: #AA80DB;
  --note-close: #7F55AA;
}
.sticky-note-mint {
  --note-bg: #CCFFEE;
  --note-header: #B3FFDD;
  --note-border: #80CCAA;
  --note-shadow: #80CCAA;
  --note-close: #559980;
}

/* Color Picker */
.sticky-note-color-picker {
  position: fixed;
  background: var(--primary);
  border: 1px solid var(--secondary);
  box-shadow: 2px 2px 0 var(--secondary);
  padding: 8px;
  z-index: 10003;
  font-size: 11px;
}
.color-picker-label {
  margin-bottom: 6px;
  font-weight: bold;
  font-size: 11px;
}
.color-picker-swatches {
  display: flex;
  gap: 4px;
}
.color-picker-swatch {
  width: 24px;
  height: 24px;
  border: 1px solid var(--secondary);
  cursor: url(/cursors/hover.png), pointer;
  padding: 0;
}
.color-picker-swatch:hover {
  transform: scale(1.15);
}
.sticky-note-swatch-yellow { background: #FFFFA5; }
.sticky-note-swatch-pink { background: #FFCCE5; }
.sticky-note-swatch-blue { background: #CCE5FF; }
.sticky-note-swatch-green { background: #CCFFCC; }
.sticky-note-swatch-lavender { background: #E5CCFF; }
.sticky-note-swatch-mint { background: #CCFFEE; }

/* Drag Ghost */
.drag-ghost {
  position: fixed;
  z-index: 10003;
  pointer-events: none;
  background: var(--secondary);
  color: var(--primary);
  padding: 3px 8px;
  font-size: 11px;
  font-family: Chicago_12, Chicago, Geneva, sans-serif;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
  opacity: 0.85;
  white-space: nowrap;
  transform: translate(8px, 8px);
}

/* Drop Highlight */
.drop-highlight {
  outline: 2px dashed var(--secondary);
  outline-offset: -2px;
}

/* Attachment Tray (compose mode) */
.chat-attachment-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 8px;
  font-size: 12px;
  border-top: 1px dotted var(--tertiary);
}
.attachment-tray-item {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--secondary);
  color: var(--primary);
  padding: 2px 6px;
  font-size: 12px;
  cursor: url(/cursors/hover.png), pointer;
}
.attachment-tray-item img {
  filter: invert(1);
}
.attachment-tray-remove {
  background: none;
  border: none;
  color: var(--primary);
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: url(/cursors/hover.png), pointer;
  opacity: 0.7;
}
.attachment-tray-remove-icon {
  width: 10px;
  height: 10px;
  background: currentColor;
  -webkit-mask: url(/icons/close.svg) center / contain no-repeat;
  mask: url(/icons/close.svg) center / contain no-repeat;
}
.attachment-tray-remove:hover {
  opacity: 1;
}
.attachment-tray-item:hover {
  opacity: 0.8;
}

/* Attachment Chips (display mode) */
.chat-attachment-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 2px;
}
.attachment-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--secondary);
  color: var(--primary);
  padding: 1px 6px 1px 2px;
  font-size: 11px;
  cursor: url(/cursors/hover.png), pointer;
}
.attachment-chip:hover {
  opacity: 0.8;
}
.attachment-chip img {
  filter: invert(1);
}

/* File Picker */
.file-picker-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10002;
}
.file-picker-dialog {
  box-shadow: 2px 2px 0 var(--secondary);
}
.file-picker-item {
  cursor: default;
}
.file-picker-item:hover {
  background: var(--secondary);
  color: var(--primary);
}
.file-picker-item.selected {
  background: var(--secondary);
  color: var(--primary);
}

/* Mobile */
@media (max-width: 768px) {
  .desktop {
    bottom: 52px;
  }

  .window {
    position: fixed !important;
    inset: 28px 0 52px 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0;
    resize: none;
  }

  .dock {
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .dock-item {
    min-width: 60px;
    padding: 4px 8px;
  }

  .finder-grid {
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 8px;
  }

  .menu-bar {
    font-size: 12px;
  }

  .welcome-dialog {
    margin: 12px;
    max-width: calc(100vw - 24px);
  }
}

/* Moderation window */
.moderation-form { padding: 12px; }
.moderation-desc { margin-bottom: 12px; font-size: 12px; line-height: 1.5; }
.moderation-desc p { margin-bottom: 6px; }
.moderation-note { color: var(--tertiary); }
.moderation-section { margin-bottom: 12px; }
.moderation-section label { display: block; font-size: 12px; margin-bottom: 4px; }
.moderation-inline { display: flex; gap: 4px; }
.moderation-inline input { flex: 1; }
.moderation-list { margin-top: 4px; max-height: 140px; overflow-y: auto; border: 1px solid var(--secondary); padding: 4px; }
.moderation-banned-row { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px; }
.moderation-banned-row:nth-child(even) { background: var(--primary); }
.moderation-banned-name { font-size: 12px; }
.moderation-unban-btn { font-size: 11px; padding: 1px 6px; }