@font-face {  font-family: "JetBrainsMono Nerd Font";  src: url("./assets/fonts/JetBrainsMonoNerdFont-Regular.ttf") format("truetype");  font-weight: 400;  font-style: normal;  font-display: swap;}:root {  --bg: #1a1c1f;  --panel: #24272b;  --panel-edge: #3a3f46;  --text: #eaf0f5;  --muted: #b7beca;  --accent: #67f3a2;  --warn: #ff7a74;  --chip: #252a31;  --chip-edge: #3f4753;  --editor-font: "JetBrainsMono Nerd Font", "JetBrains Mono", "Cascadia Mono", "Cascadia Code", "Fira Code", "Consolas", "Menlo", "Monaco", monospace;  --editor-font-size: 15px;  --token-logtype: #7cb7ff;  --token-tag: #d4b06a;  --token-keyword: #73d39e;}* {  box-sizing: border-box;}body {  margin: 0;  color: var(--text);  font-family: "Segoe UI", "Trebuchet MS", sans-serif;  background: #282828;}.shell {  max-width: 1100px;  margin: 18px auto;  padding: 10px;  display: flex;  flex-direction: column;  gap: 10px;  border: 1px solid #3a3f47;  border-radius: 12px;  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 30px rgba(0, 0, 0, 0.3);}.panel {  border: 1px solid var(--panel-edge);  border-radius: 12px;  padding: 8px;  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);}.panel.drop-active {  border-color: #5ac98d;  box-shadow: 0 0 0 1px rgba(90, 201, 141, 0.65), 0 0 24px rgba(90, 201, 141, 0.18);}header {  display: none;}#viewer-panel {  background: #282828;  border: none;  margin-bottom: 0;  position: relative;  z-index: 1;}.viewer-toolbar {  display: grid;  grid-template-columns: minmax(180px, 1fr) auto auto;  gap: 8px;  margin-bottom: 8px;}.viewer-body {  height: 340px;  background: #282828;  border: none;  border-radius: 12px;  padding: 8px;  overflow-y: scroll;  display: flex;  flex-direction: column;  gap: 8px;  scrollbar-width: thin;  scrollbar-color: #4a4a4a #323232;}.viewer-body::-webkit-scrollbar {  width: 10px;}.viewer-body::-webkit-scrollbar-track {  background: #323232;  border-radius: 999px;}.viewer-body::-webkit-scrollbar-thumb {  background: #4a4a4a;  border-radius: 999px;}.viewer-body::-webkit-scrollbar-thumb:hover {  background: #5a5a5a;}.viewer-card {  background: #282828;  border: 1px solid #3a3a3a;  border-radius: 9px;  padding: 10px;  line-height: 1.4;}.viewer-meta {  display: flex;  gap: 8px;  flex-wrap: wrap;  margin-bottom: 8px;}.viewer-pill {  background: var(--chip);  border: 1px solid var(--chip-edge);  border-radius: 999px;  padding: 3px 10px;  font-size: 0.78rem;  color: #d7deea;}.viewer-text {  white-space: pre-wrap;  word-break: break-word;}.composer-editor {  width: 100%;  height: 195px;  color: #eaf0f5;  background: #323232;  border: none;  border-radius: 12px;  padding: 14px;  font-family: var(--editor-font);  font-size: var(--editor-font-size);  line-height: 1.45;  white-space: pre-wrap;  overflow-wrap: break-word;  word-break: break-word;  overflow-y: scroll;}.composer-editor:focus,.composer-editor:focus-visible {  outline: none;  box-shadow: none;}.composer-editor:empty::before {  content: attr(data-placeholder);  color: #8a909b;  pointer-events: none;}#composer-panel {  background: #323232;  border-color: #3f3f3f;  margin-top: -22px;  padding: 0 0 8px 0;  position: relative;  z-index: 2;  overflow: visible;  box-shadow: 0 -14px 26px -12px rgba(0, 0, 0, 0.96), 0 10px 24px -16px rgba(0, 0, 0, 0.82), 0 0 0 1px rgba(34, 34, 34, 0.86), inset 0 1px 0 rgba(255, 255, 255, 0.07);}#composer-panel::before {  content: "";  position: absolute;  left: 12px;  right: 12px;  top: 0;  height: 20px;  transform: translateY(-100%);  border-radius: 10px 10px 0 0;  background: linear-gradient(180deg, rgba(34, 34, 34, 1), rgba(34, 34, 34, 0));  pointer-events: none;}#composer-panel::after {  content: "";  position: absolute;  inset: -1px;  border-radius: 12px;  box-shadow: 0 0 0 1px rgba(30, 30, 30, 0.92), 0 0 0 2px rgba(54, 54, 54, 0.35);  pointer-events: none;}.token-logtype { color: var(--token-logtype); }.token-logtype { color: var(--token-logtype); }.token-tag { color: var(--token-tag); }.token-keyword { color: var(--token-keyword); }#chip-panel,#status-panel,#action-panel,#api-config-panel {  width: calc(100% - 40px);  margin-left: auto;  margin-right: auto;}#chip-panel {  padding: 6px;  background: #323232;  border-color: #3f3f3f;}.chips {  display: flex;  gap: 8px;  flex-wrap: wrap;}.chip {  background: linear-gradient(170deg, #29303a, #242a33);  border: 1px solid #445061;  border-radius: 999px;  padding: 8px 14px;  font-size: 1rem;  display: inline-flex;  align-items: center;  gap: 6px;  line-height: 1.1;  min-height: 34px;  color: #e3ebf8;}#chip-panel .chip {  font-family: var(--editor-font);  font-size: 0.96rem;  line-height: 1;  letter-spacing: 0;}#chip-panel .chip .token-logtype,#chip-panel .chip .token-tag,#chip-panel .chip .token-keyword {  color: #eaf0f5;  display: inline-flex;  align-items: center;  line-height: 1;}#chip-panel .chip .chip-token-list > span {  display: inline-flex;  align-items: center;  line-height: 1;}#chip-log-type {  background: linear-gradient(170deg, rgba(58, 90, 128, 0.55), rgba(45, 71, 101, 0.5));  border-color: rgba(124, 183, 255, 0.45);}#chip-tags {  background: linear-gradient(170deg, rgba(112, 88, 43, 0.52), rgba(89, 70, 34, 0.48));  border-color: rgba(212, 176, 106, 0.5);}#chip-keywords {  background: linear-gradient(170deg, rgba(47, 90, 65, 0.55), rgba(39, 72, 54, 0.52));  border-color: rgba(115, 211, 158, 0.5);}#chip-attachments {  background: linear-gradient(170deg, #29303a, #242a33);  border-color: #445061;}.chip-token-list {  display: inline-flex;  align-items: center;  gap: 6px;  flex-wrap: wrap;}#status-panel,#action-panel {  padding: 6px;  background: #282828;  border-color: #3a3a3a;}#status-panel .chips {  background: #282828;  border: none;  border-radius: 12px;  padding: 8px;}#status-panel .chip {  min-height: 30px;  padding: 6px 12px;  font-size: 0.95rem;  background: #26303b;  border-color: #3f4c5d;}.chip.ok {  border-color: #4dca85;  color: #62f39f;}.chip.bad {  border-color: #d27a79;  color: #ffa09a;}.action-row {  display: flex;  justify-content: space-between;  align-items: center;  gap: 10px;  flex-wrap: wrap;  background: #282828;  border: none;  border-radius: 12px;  padding: 8px;}.left-actions,.right-actions {  display: flex;  gap: 8px;  flex-wrap: wrap;  align-items: center;}button,input,select {  border-radius: 10px;  border: 1px solid #3f3f3f;  background: #323232;  color: var(--text);  padding: 8px 12px;}button { cursor: pointer; }button:hover:not(:disabled) { background: #383838; }button:focus, button:focus-visible, input:focus, input:focus-visible, select:focus, select:focus-visible { outline: none; box-shadow: none; }button:disabled { opacity: 0.7; cursor: default; }#autostart-toggle,#hide-on-close-toggle {  background: #323232;  border-color: #3f3f3f;  color: #67f3a2;  font-weight: 600;}#toggle-api-config,#open-config-file,#add-attachment,#clear-composer,#queue-log,#close-app {  width: 36px;  height: 36px;  border-radius: 999px;  padding: 0;  font-size: 0;  position: relative;  display: inline-flex;  align-items: center;  justify-content: center;}#toggle-api-config::before,#open-config-file::before,#add-attachment::before,#clear-composer::before,#queue-log::before,#close-app::before {  font-family: var(--editor-font);  font-size: 17px;  font-weight: 500;  line-height: 1;}#toggle-api-config::before { content: "≡"; color: #84c9ff; }#open-config-file::before { content: "⎘"; color: #b8b0ff; }#add-attachment::before { content: "+"; color: #69ef9f; }#clear-composer::before { content: "⌫"; color: #f6c767; }#queue-log::before { content: "➤"; color: #8ad2ff; }#close-app::before { content: "✕"; color: #ff7a74; }#toggle-api-config { border-color: #476181; }#open-config-file { border-color: #5a5689; }#add-attachment { border-color: #3c6e58; }#clear-composer { border-color: #7a6640; }#queue-log { border-color: #3f5f7e; }#close-app { border-color: #7d4f50; }.attachment-item {  display: inline-flex;  align-items: center;  gap: 6px;  max-width: 220px;  min-width: 0;}.attachment-icon {  display: inline-flex;  align-items: center;  justify-content: center;  min-width: 28px;  height: 18px;  padding: 0 6px;  border-radius: 5px;  border: 1px solid #565656;  background: #232323;  font-size: 0.67rem;  letter-spacing: 0.03em;}.attachment-icon[data-kind="img"] { color: #95d8a2; }.attachment-icon[data-kind="vid"] { color: #98bcff; }.attachment-icon[data-kind="aud"] { color: #f0b87b; }.attachment-icon[data-kind="pdf"] { color: #ef8d8d; }.attachment-icon[data-kind="zip"] { color: #d0b6f4; }.attachment-icon[data-kind="doc"] { color: #a8dde7; }.attachment-name {  display: inline-block;  max-width: 170px;  overflow: hidden;  text-overflow: ellipsis;  white-space: nowrap;}.config-row {  display: flex;  gap: 8px;  margin-bottom: 8px;}.config-row input { flex: 1; }.muted {  color: var(--muted);  font-size: 0.85rem;}.hidden { display: none; }@media (max-width: 780px) {  .shell {    margin: 8px auto;    padding: 8px;  }  .viewer-toolbar {    grid-template-columns: 1fr;  }  .viewer-body {    height: 300px;    overflow-y: scroll;  }  .composer-editor {    min-height: 150px;  }  .action-row {    align-items: stretch;  }}
/* Composer scrollbar: modern dark theme */
.composer-editor {
  scrollbar-width: thin;
  scrollbar-color: #575757 #323232;
}

.composer-editor::-webkit-scrollbar {
  width: 10px;
}

.composer-editor::-webkit-scrollbar-track {
  background: #323232;
  border-radius: 999px;
}

.composer-editor::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5b5b5b, #4a4a4a);
  border-radius: 999px;
  border: 2px solid #323232;
}

.composer-editor::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6a6a6a, #565656);
}

/* Chip groups for separate tags / linked keywords */
.chip-group {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip-group.hidden {
  display: none;
}

.chip-tag-item {
  background: linear-gradient(170deg, rgba(112, 88, 43, 0.52), rgba(89, 70, 34, 0.48));
  border-color: rgba(212, 176, 106, 0.5);
}

.chip-keyword-item {
  background: linear-gradient(170deg, rgba(47, 90, 65, 0.55), rgba(39, 72, 54, 0.52));
  border-color: rgba(115, 211, 158, 0.5);
}

/* Dark red selection highlight */
.composer-editor::selection,
.viewer-text::selection,
.viewer-pill::selection {
  background: #5b1f1f;
  color: #f4dede;
}

.composer-editor::-moz-selection,
.viewer-text::-moz-selection,
.viewer-pill::-moz-selection {
  background: #5b1f1f;
  color: #f4dede;
}

/* Desktop drag region */
#window-drag-handle {
  display: none;
}

body.desktop-runtime #window-drag-handle {
  display: block;
  height: 24px;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  -webkit-app-region: drag;
  background: linear-gradient(180deg, rgba(58, 58, 58, 0.55), rgba(40, 40, 40, 0.25));
  border-bottom: 1px solid rgba(70, 70, 70, 0.65);
}

body.desktop-runtime .shell {
  margin-top: 8px;
}


.chip.neutral {
  border-color: #656c77;
  color: #b6bfcc;
}

.chip.pulse {
  animation: chipPulse 1.1s ease-in-out infinite;
}

@keyframes chipPulse {
  0% { box-shadow: 0 0 0 0 rgba(98, 243, 159, 0.35); }
  70% { box-shadow: 0 0 0 8px rgba(98, 243, 159, 0); }
  100% { box-shadow: 0 0 0 0 rgba(98, 243, 159, 0); }
}

/* Modern bold SVG icons for action panel buttons */
#autostart-toggle,
#hide-on-close-toggle {
  font-size: 0.96rem;
  line-height: 1;
}

#toggle-api-config::before,
#open-config-file::before,
#add-attachment::before,
#clear-composer::before,
#queue-log::before,
#close-app::before {
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

#toggle-api-config::before {
  color: #84c9ff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E");
}

#open-config-file::before {
  color: #b8b0ff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round' d='M7 3h8l4 4v14H7z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' d='M15 3v5h5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round' d='M7 3h8l4 4v14H7z'/%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.4' d='M15 3v5h5'/%3E%3C/svg%3E");
}

#add-attachment::before {
  color: #69ef9f;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' d='M8 12.5l6.5-6.5a3.5 3.5 0 1 1 5 5L11 19.5a6 6 0 0 1-8.5-8.5L11 2.5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' d='M8 12.5l6.5-6.5a3.5 3.5 0 1 1 5 5L11 19.5a6 6 0 0 1-8.5-8.5L11 2.5'/%3E%3C/svg%3E");
}

#clear-composer::before {
  color: #f6c767;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 7h16M9 7V4h6v3M8 7l1 13h6l1-13'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M4 7h16M9 7V4h6v3M8 7l1 13h6l1-13'/%3E%3C/svg%3E");
}

#queue-log::before {
  color: #8ad2ff;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M3 12h14M13 5l8 7-8 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round' d='M3 12h14M13 5l8 7-8 7'/%3E%3C/svg%3E");
}

#close-app::before {
  color: #ff7a74;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
}