:root {
      --ui-margin: 5px;
      --setting-panel-height: 57px;
      --section-tool-wrap-height: 72px;
      --object-list-height: 200px;
    }

    a, a:visited{
      color: #888;
    }
    body {
      margin: 0;
      overflow: hidden;
    }

    #app {
      position: relative;
      height: 100%;
      width: 100%;
    }

    #processbar {
      position: absolute;
      z-index: 98;
      top: 5px;
      left: 320px;
      width: 300px;
      height: 100vh;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 16px 0;
      box-sizing: border-box;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      height: 100vh;
      box-sizing: border-box;
    }

    .process-block {
      padding: 0 16px;
      border-bottom: 1px #ddd solid;
      margin-top: 20px;
      padding-bottom: 20px;
      position: relative;
    }

    #processList .number{
      font-size: 14px;
      margin-top: 10px;
    }

    #processInit{
      text-align: center;
      border-bottom: 1px solid #ddd;
      padding-bottom: 15px;
    }

    #process-controls .btn{
      background: rgba(0, 0, 0, 0.05);
      color: rgb(51, 51, 51);
      width: 125px;
      font-weight: normal;
    }

    #processList{
      font-size: 12px;
      flex: 1 1 auto;

      color: #333;
      overflow-x: hidden;
      overflow-y: auto;

      box-sizing: border-box;

      height: calc(100% - 230px);
      margin-top: 10px;
    }

    #processList .label{
      font-weight: bold;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    #processList .process-script .process-content{
      background: rgba(255, 255, 255, 0.1);
      resize: none;
      font-size: 12px;
      color: #333;
      white-space: pre-wrap;
      height: 60px;
      width: 250px;
      border-radius: 5px;
      border: 1px solid #ddd;
      resize: vertical;
      padding: 6px;
      overflow-y: scroll;
    }

    #processList .process-thoughts .process-content{
      background: rgba(255, 255, 255, 0.1);
      resize: none;
      font-size: 12px;
      color: #333;
      white-space: pre-wrap;
      height: 60px;
      width: 250px;
      border-radius: 5px;
      border: 1px solid #ddd;
      resize: vertical;
      padding: 6px;
      overflow-y: scroll;
    }

    #processList .process-log .process-content{
      background: rgba(255, 255, 255, 0);
      resize: none;
      font-size: 12px;
      color: #333;
      white-space: pre-wrap;
      height: 60px;
      width: 250px;
      border-radius: 5px;
      resize: vertical;
      overflow-y: scroll;
    }


    .settingSelect {
      width: 100%;
      padding: 8px 5px;
      font-size: 14px;
      background: white;
      color: #333;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-bottom: 10px;
      box-sizing: border-box;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 16px;
      padding-right: 32px;
      resize: none;
      font-family: monospace;
      border-radius: 5px;
      border: 1px solid #ddd;
    }

    .settingSelect:hover {
      border-color: #3498db;
      box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
    }

    .settingSelect:focus {
      outline: none;
      border-color: #3498db;
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }


    .settingSelectLabel{
      font-size: 12px;
    }

    .process-block.hide .process-thoughts{
      display: none;
    }
    .process-block.hide .process-script{
      display: none;
    }
    .process-block.hide .process-log{
      display: none;
    }
    .process-block.hide .process-hide{
      display: none;
    }
    .process-block.hide .process-show{
      display: block;
    }

    .process-btn{
      position: absolute;
      width: 24px;
      background: rgba(0, 0, 0, 0.05);
      text-align: center;
      border-radius: 5px;
      height: 22px;
      padding-top: 2px;
      color: #666;
      cursor: pointer;
      top: -2px;
    }

    .process-save{
      top: 10px;
      right: 10px;
    }

    .process-show{
      display: none;
      border: 1px solid #eee;
      background: none;
      right: 19px !important;
      position: absolute;
      top: 29px;
    }

    .process-hide{
      display: block;
      border: 1px solid #eee;
      background: none;
      right: 19px !important;
      position: absolute;
      top: 29px;
    }

    .process-ai-edit{
      right: 140px;
    }

    .process-play{
      right: 110px;
    }

    .process-up{
      right: 80px;
    }

    .process-down{
      right: 50px;
    }

    .process-remove{
      right: 20px;
    }

    .process-title {
      margin-top: 10px;
      font-weight: bold;
      font-size: 14px;
      width: 235px;
    }

    .process-log-hide{display:none;}

    #sidebar {
      position: absolute;
      z-index: 99;
      top: 5px;
      left: 5px;
      width: 300px;
      height: 100vh;
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #eee;
      border-radius: 5px;
      box-sizing: border-box;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      height: 100vh;
      box-sizing: border-box;

    }


    .sidebar-top {
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-sizing: border-box;
      padding: 16px;
      padding-top: 7px;
    }

    .sidebar-bottom {
      flex: 0 0 auto;
      box-sizing: border-box;
      padding: 20px 16px 20px;
      border-top: 1px solid #ddd;
    }

    #console{
      font-size: 12px;
      flex: 1 1 auto;
      color: #333;
      overflow-x: hidden;
      overflow-y: auto;
      box-sizing: border-box;
      height: calc(100% - 230px);
      padding-bottom: 55px;
    }

    .console-block{
      position: relative;
    }

    #viewer-container {
      flex: 1;
      overflow: hidden;
    }

    #loader {
      position: fixed;
      top: 50%;
      left: calc(50%);
      transform: translate(-50%, -50%);
      z-index: 9999;
    }

    #loader-spinner {
      border: 6px solid #f3f3f3;
      border-top: 6px solid #3498db;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      animation: spin 1s linear infinite;
      margin: 0 auto;
    }

    @keyframes spin {
      0%   { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    .btn:active {
      background: rgb(110, 116, 210);
    }

    .btn:disabled {
      background: #ccc;
      color: #666;
      cursor: not-allowed;
      opacity: 0.7;
    }

    .btn{
      padding: 6px 12px;
      font-size: 14px;
      border: none;
      background: rgb(80, 86, 190);
      color: white;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.2s ease;
      width: 110px;
    }

    .btn.btn-grey{
      color: rgb(51, 51, 51);
      background: rgba(0, 0, 0, 0.05);
    }


    #model {
      width: 100%;
      padding: 8px 5px;
      font-size: 14px;
      background: white;
      color: #333;
      cursor: pointer;
      transition: all 0.2s ease;
      margin-bottom: 10px;
      box-sizing: border-box;
      appearance: none;
      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 16px;
      padding-right: 32px;
      resize: none;
      font-family: monospace;
      border-radius: 5px;
      border: 1px solid #ddd;
    }

    #model:hover {
      border-color: #3498db;
      box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
    }

    #model:focus {
      outline: none;
      border-color: #3498db;
      box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
    }

    #script-send.btn{
      padding: 6px 12px;
      font-size: 14px;
      border: none;
      background: rgb(80, 86, 190);
      color: white;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.2s ease;
      width: 85px;
    }

    #prompt-bar {
      position: fixed;
      width: 70%;
      bottom: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.95);
      padding: 8px;
      display: flex;
      gap: 8px;
      border-top: 1px solid #eee;
      border-left: 1px solid #eee;
      z-index: 9999;
      border-radius: 5px 0 0 0;
      flex-wrap: wrap;

      display: none;

    }

    .prompt-input {
      flex: 1;
      height: 40px;
      resize: none;
      font-family: monospace;
      border-radius: 5px;
      border: 1px solid #ddd;
      font-size: 12px;
      margin-bottom:13px;
    }

    .btn-run-all-process{
      background: rgb(80, 86, 190) !important;
      color: white !important;
    }

    #initialPrompt{
      width: 96%;
      height: 190px;
      display:block;
      resize: vertical;
    }

    #log {
      display: none;
    }

    textarea{
      font-size: 14px;
      color: #333;
      padding:5px;
    }

    #console .number{
      font-size: 14px;
      margin-top: 10px;
    }

    #console .label{
      font-weight: bold;
      padding-top: 5px;

    }
    #console .console-content{
      background: rgba(255, 255, 255, 0);
      resize: none;
      font-size: 10px;
      color: #333;
      white-space: pre-wrap;
      width: 250px;
      border-radius: 5px;
      overflow-y: hidden;
      overflow-x: hidden;
    }

    .process-loader{
      text-align: center;
    }
    .process-loader:after {
      content: "";
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-top: 25px;
      border: 2px solid rgba(0, 0, 0, 0.2);
      border-top: 2px solid #3498db;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      vertical-align: middle;
    }

    hr{
      border-top: solid 1px #ddd;
      border-right: none;
      border-left: none;
      border-bottom: none;
      margin: 10px 0;
    }

    ul{
      padding-left: 20px;
    }

    .object-panel {
      position: absolute;
      z-index: 99;
      top: calc(var(--ui-margin) + var(--setting-panel-height) + 6px);
      right: var(--ui-margin);
      width: 250px;
      height: calc(100vh - var(--setting-panel-height) - 2 * var(--ui-margin) - 6px);
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 0;
      box-sizing: border-box;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      font-size: 12px;
      color:rgb(71, 71, 71);
    }
    .object-list-wrap {
      flex: 1 1 0;
      min-height: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      padding: 16px 0 0;
      position: relative;
    }

    .setting-panel i{
      cursor:pointer;
      color:#999;
    }
    .setting-panel {
      position: absolute;
      z-index: 99;
      top: var(--ui-margin);
      right: var(--ui-margin);
      width: 250px;
      height: var(--setting-panel-height);
      background: rgba(255, 255, 255, 0.9);
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 16px 0;
      box-sizing: border-box;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      font-size: 12px;
      color:rgb(71, 71, 71);
    }
    .setting-panel h3{
      margin-top: 0;
      padding: 0 16px;
    }
    .setting-show{
      position: absolute;
      top: 12px;
      right: 24px;
      font-size: 18px;
    }
    .fit-model-btn {
      position: absolute;
      z-index: 99;
      top: var(--ui-margin);
      right: calc(var(--ui-margin) + 250px + 8px);
      width: 60px;
      height: var(--setting-panel-height);
      background: transparent;
      border: none;
      cursor: pointer;
      font-size: 16px;
      color: #999;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }
    .fit-model-btn:hover {
      color: #555;
    }
    .section-tool-wrap {
      flex: 0 0 auto;
      padding: 10px 16px 12px;
      border-bottom: 1px solid #ddd;
      position: relative;
    }
    .section-tool-wrap h3 {
      margin: 0 0 8px;
      padding: 0;
      font-size: 12px;
      color: #999;
      font-weight: normal;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }
    .section-tool-buttons {
      display: flex;
      gap: 6px;
    }
    #section-box-btn,
    #requirement-toggle-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      flex: 1 1 0;
      padding: 5px 8px;
      font-size: 12px;
      background: rgba(0,0,0,0.04);
      border: 1px solid #e0e0e0;
      border-radius: 4px;
      cursor: pointer;
      color: #555;
      text-align: left;
      transition: background 0.15s, color 0.15s;
    }
    #section-box-btn:hover,
    #requirement-toggle-btn:hover {
      background: rgba(0,0,0,0.08);
      color: #222;
    }
    #section-box-btn.active,
    #requirement-toggle-btn.active {
      background: rgba(80,86,190,0.12);
      border-color: rgb(80,86,190);
      color: rgb(80,86,190);
    }
    #section-box-btn.active i,
    #requirement-toggle-btn.active i {
      color: rgb(80,86,190);
    }
    .requirement-toggle-hidden {
      display: none !important;
    }

    #processInit h3{
      margin-top: 0;
      padding: 0 16px;
      font-size: 14px;
      text-align: left;
      color: rgb(71, 71, 71);
    }

    .processList-show{
      display: none;
      border: 1px solid #eee;
      background: none;
      right: 19px !important;
      position: absolute;
      top: 13px !important;
      background: none !important;
      font-size: 12px !important;
    }

    .processList-hide{
      display: block;
      border: 1px solid #eee;
      background: none;
      right: 19px !important;
      position: absolute;
      top: 13px !important;
      background: none !important;
      font-size: 12px !important;
    }

    #processbar.hide{
      height: 60px;
      overflow-y: hidden;
    }
    #processbar.hide #processInit{
      border: none;
    }
    #processbar.hide .processList-show{
      display: block;
    }
    #processbar.hide .processList-hide{
      display: none;
    }

    .object-btn{
      position: absolute;
      width: 24px;
      background: rgba(0, 0, 0, 0.05);
      text-align: center;
      border-radius: 5px;
      height: 22px;
      padding-top: 2px;
      color: #666;
      cursor: pointer;
      top: -2px;
    }

    .object-search{
      display: block;
      border: 1px solid #eee;
      background: none;
      right: 19px !important;
      position: absolute;
      top: 13px;
    }
    .object-search.active {
      background: rgba(0, 0, 0, 0.12);
    }

    #object-search-bar {
      position: relative;
      padding: 4px 12px 8px;
    }
    #object-search-input {
      width: 100%;
      box-sizing: border-box;
      padding: 4px 24px 4px 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 12px;
      outline: none;
    }
    #object-search-input:focus {
      border-color: #999;
    }
    #object-search-clear {
      position: absolute;
      right: 20px;
      top: 14px;
      transform: translateY(-50%);
      cursor: pointer;
      color: #999;
      font-size: 16px;
      line-height: 1;
      user-select: none;
    }
    #object-search-clear:hover {
      color: #333;
    }

    .object-panel h3{
      margin-top: 0;
      padding:0 16px;
    }
    .accordion-group {
      border-top: 1px solid #ddd;
      min-height: 27px;
      margin: 0 12px;
    }
    .accordion-header {
      display: flex;
      justify-content: space-between;
      padding: 4px;
      cursor: pointer;
      user-select: none;
    }
    .accordion-header:hover { background: #f0f0f0; }
    .accordion-content {
      display: none;
      padding-left: 8px;
    }
    #object-list{
      overflow-y: auto;
      flex: 1 1 0;
      min-height: 0;
    }
    #detail-panel {
      flex: 0 0 calc(100vh - var(--setting-panel-height) - 2 * var(--ui-margin) - 6px - var(--section-tool-wrap-height) - var(--object-list-height));
      min-height: 120px;
      position: static;
      width: 100%;
      background: rgba(255, 255, 255, 0.95);
      border-top: 1px solid #ddd;
      border-left: none;
      border-right: none;
      border-bottom: none;
      border-radius: 0;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      font-size: 12px;
      color: rgb(71, 71, 71);
      box-sizing: border-box;
      overflow: hidden;
    }
    #detail-panel.hidden { display: none; }
    #detail-panel .object-detail-header {
      border-radius: 0;
    }
    .object-detail-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px;
      font-weight: bold;
      font-size: 13px;
      background: #f5f5f5;
      border-bottom: 1px solid #ddd;
      border-radius: 5px 5px 0 0;
      flex-shrink: 0;
    }
    .object-detail-close {
      cursor: pointer;
      opacity: 0.6;
      font-size: 14px;
    }
    .object-detail-close:hover { opacity: 1; }
    .object-detail-model {
      padding: 6px 14px;
      font-size: 11px;
      color: #555;
      background: #fafafa;
      border-bottom: 1px solid #eee;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-shrink: 0;
    }
    .object-detail-scroll {
      overflow-y: auto;
      flex: 1;
      min-height: 0;
    }
    .object-detail-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 11px;
    }
    .object-detail-table tr:nth-child(even) { background: #f9f9f9; }
    .detail-key {
      padding: 4px 10px;
      color: #666;
      white-space: nowrap;
      vertical-align: top;
      width: auto;
      max-width: 140px;
      border-right: 1px solid #eee;
    }
    .detail-val {
      padding: 4px 10px;
      word-break: break-word;
      color: #222;
      min-width: 70px;
    }
    .object-detail-loading {
      padding: 14px 14px;
      color: #999;
      font-size: 11px;
    }
    .object-detail-error {
      padding: 14px 14px;
      color: #c00;
      font-size: 11px;
    }
    /* ── IFC値整形スタイル ── */
    .dv-null    { color: #bbb; }
    .dv-prim    { color: #222; }
    .dv-measure { color: #1a6bb5; font-variant-numeric: tabular-nums; }
    .dv-unit    { color: #888; font-size: 10px; }
    .dv-label   { color: #2a7a2a; }
    .dv-ref     { color: #888; font-style: italic; }
    .dv-entity-ref { color: #999; font-style: italic; }
    .dv-eid     { color: #aaa; font-weight: normal; font-size: 11px; margin-left: 6px; }
    .dv-sep     { color: #ccc; }
    .dv-arr-inline { color: #555; }
    .dv-details { margin: 0; }
    .dv-summary {
      cursor: pointer;
      color: #777;
      font-size: 10px;
      user-select: none;
      list-style: none;
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .dv-summary::before { content: '▶'; font-size: 8px; }
    details[open] > .dv-summary::before { content: '▼'; }
    .dv-arr-list { padding-left: 8px; }
    .dv-arr-item { padding: 1px 0; border-top: 1px solid #f0f0f0; }
    .dv-subtable { margin: 2px 0; }
    .dv-subkey  { font-size: 10px; color: #888; padding-left: 14px !important; }
    .object-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 2px 0;
      cursor: pointer;
    }
    .object-item:hover { background: #eee; }
    .carry-history {
      display: inline-flex;
      gap: .5rem;
      align-items: center;
      margin-left: 8px;
      font-size: 12px;
      opacity: .85;
      margin: 10px 0px 0px 0px;
      display: block;
    }

    .carry-history input[type="checkbox"] {
      accent-color: rgb(80, 86, 190);
    }

    .reproduce-history {
      display: inline-flex;
      gap: .5rem;
      align-items: center;
      margin-left: 8px;
      font-size: 12px;
      opacity: .85;
      margin: 5px 0px 0px 0px;
      display: block;
    }

    .reproduce-history input[type="checkbox"] {
      accent-color: rgb(80, 86, 190);
    }
    .export-import{
      position: absolute;
      top: 13px;
      right: 20px;
    }
    .export-import button{
      background: none;
      border: none;
      color:rgb(101, 101, 101);
      cursor: pointer;
    }

    #reviewProcessBtn {
      cursor: pointer;
    }

    #reviewProcessBtn:disabled {
      opacity: 0.45;
      cursor: default;
    }

    #downloadAllLogs,
    #regulation-agent-btn {
      display: none;
      background: rgba(0, 0, 0, 0.05);
      border: none;
      color: rgb(51, 51, 51);
      cursor: pointer;
      padding: 10px;
      border-radius: 5px;
      margin-top: 20px;
    }

    #downloadAllLogs.show,
    #regulation-agent-btn.show {
      display: block !important;
    }

    #downloadAllLogs:hover,
    #regulation-agent-btn:hover {
      box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
      transform: translateY(-1px);
    }

    .process-play:has(.fa-spin){
      color:white;
      background:rgb(80, 86, 190);
    }

    /* モーダルの背景（半透明の黒幕） */
    .modal {
      display: none; /* デフォルトは非表示 */
      position: fixed;
      z-index: 10000; /* 前面に表示 */
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto; /* スクロール対応 */
      background-color: rgba(0, 0, 0, 0.5);
    }

    /* モーダル本体 */
    .modal-content {
      background-color: #fff;
      margin: 50px auto;
      padding: 20px;
      border-radius: 12px;
      width: 90%;
      max-width: 1600px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      animation: fadeIn 0.3s ease;
    }

    #processTable{
      width:100%;
      border-collapse: collapse;
      table-layout: fixed;
      margin-top:10px;
      font-size: 11px;
      border: 1px solid transparent;
    }

    #processTable td{
      padding: 0px;
      border: 1px solid transparent;
      overflow-x: hidden;
    }

    #processTable .processTable-num {
      text-align: left;
    }
    #processTable .processTable-script {
      white-space: pre;    /* インデント保持＋長文折り返し */
      /*word-break: break-word;   /* 長い単語も折り返す */
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      overflow-x: hidden;
    }
    #processTable .processTable-comment {
      vertical-align: top;
      font-size: 12px;
      padding-left: 10px;
      padding-right: 10px;
    }
    #processTable .processTable-comment div{
      margin-bottom: 15px;
    }

    /* 閉じるボタン */
    .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
      margin-top: -17px;
    }
    .close:hover,
    .close:focus {
      color: #000;
      text-decoration: none;
    }

    /* フェードイン効果 */
    @keyframes fadeIn {
      from {opacity: 0; transform: translateY(-20px);}
      to   {opacity: 1; transform: translateY(0);}
    }

    h1{
      padding-left: 0px;
      font-size: 14px;
      display: inline-block;
      position: absolute;
      right: 90px;
      top: 5px;
    }

    .logo{
      padding: 10px 10px 0;
    }

    .logo img {
      height: 28px;
      border: none;
    }

    #initialPrompt.expand{
      position: absolute;
      top: 0;
      height: 100Vh;
      z-index: 100;
      left: 0;
      font-size: 19px;
      width: 400px;
      padding: 23px;
      line-height: 30px;
    }

    #expandPrompt{
      font-size: 12px;
      color: #777;
      cursor: pointer;
    }
    #expandPrompt.expand{
      z-index: 100;
      position: absolute;
      bottom: 14px;
    }

    .multi-mode .logo{display: none;}
    .multi-mode h1{display: none;}
    .multi-mode .sidebar-bottom{display: none;}
    .multi-mode #processbar{display: none;}
    .multi-mode #object-panel{display: none;}
    .multi-mode #examples{display: none;}
    .multi-mode #sidebar{width: 270px !important;}
    .multi-mode #console .console-content{width: 230px !important; font-size: 9px !important;}

    #addIfcModel{
      color: #666;
      width: 10px;
      position: absolute;
      right: 21px;
      background: none;
      padding: 3px 18px 4px 4px;
      text-align: center;
      line-height: 0;
      margin: 0;
    }

    .overlay-add-btn {
      color: #666;
      width: 10px;
      position: absolute;
      right: 5px;
      top: 13px;
      background: none;
      padding: 3px 18px 4px 4px;
      text-align: center;
      line-height: 0;
      margin: 0;
    }

    #mainModelColor {
      color: #666;
      width: 10px;
      position: absolute;
      right: 90px;
      background: none;
      padding: 3px 18px 4px 4px;
      text-align: center;
      line-height: 0;
      margin: 0;
    }

    .main-model-toggle {
      color: #666;
      width: 10px;
      position: absolute;
      right: 55px;
      background: none;
      padding: 3px 18px 4px 4px;
      text-align: center;
      line-height: 0;
      margin: 0;
    }
    .main-model-toggle.transparent {
/*      color: #aaa;*/
    }

    #overlayModelsList{
      margin-bottom: 12px;
      position: relative;
      border-bottom: 1px solid #ddd;
      padding: 10px 0;
      margin: -10px 0 20px;
    }
    .overlay-model-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 6px 8px;
      margin-bottom: 4px;
      background: #f5f5f5;
      border-radius: 4px;
      font-size: 12px;
    }
    .overlay-model-item .model-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 8px;
    }
    .overlay-model-item .model-controls {
      display: flex;
      gap: 4px;
      margin-right: -4px;
    }
    .overlay-model-item .model-btn {
      background: none;
      border: none;
      cursor: pointer;
      color: #666;
      padding: 2px 6px;
      border-radius: 3px;
      margin: 0 1px;
    }
    .overlay-model-item .model-btn:hover {
      background: #ddd;
    }
    .overlay-model-item .model-btn.hidden {
      opacity: 0.5;
    }
    .overlay-model-item .model-btn.opaque {
      color: rgb(80, 86, 190);
    }
    .overlay-model-item .model-btn.original-color {
      color: rgb(80, 86, 190);
    }

    .overlay-model-select-list {
      max-height: 75vh;
      overflow-y: auto;
    }
    .overlay-model-select-item {
      padding: 10px 12px;
      margin-bottom: 4px;
      background: #f5f5f5;
      border-radius: 4px;
      font-size: 13px;
      cursor: pointer;
      transition: background 0.15s;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .overlay-model-select-item:hover {
      background: rgb(80, 86, 190);
      color: white;
    }

    #reloadIfcModel{
      color: #666;
      width: 10px;
      position: absolute;
      right: 125px;
      background: none;
      padding: 3px 18px 4px 4px;
      text-align: center;
      line-height: 0;
      margin: 0;
    }

/* ポップアップ本体（位置は JS で top/left を設定） */
.feedback-popup {
  position: absolute;
  z-index: 9999;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 8px 10px 10px;
  font-size: 12px;
  max-width: 260px;
}

/* 中身＋矢印 */
.feedback-popup-inner {
  position: relative;
}

/* 左側の矢印（外側） */
.feedback-popup-inner::before {
  content: "";
  position: absolute;
  left: -18px;
  top: 10px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-right: 8px solid white;
}

/* 左側の矢印（内側・白） */
.feedback-popup-inner::after {
  content: "";
  position: absolute;
  left: -7px;
  top: 10px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 7px solid #fff;
}

.feedback-popup-header {
  font-weight: 600;
  margin-bottom: 4px;
}

.feedback-popup-subtitle {
  margin-bottom: 4px;
  color: #666;
}

.feedback-comment {
  width: 100%;
  resize: vertical;
  font-size: 12px;
  padding: 4px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.feedback-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  margin-top: 6px;
}

.feedback-btn {
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
}

.feedback-btn-good {
  border-color: #0c8c3a;
  background: #11a94b;
  color: #fff;
}

.feedback-btn-bad {
  border-color: #b3261e;
  background: #d32f2f;
  color: #fff;
}

.feedback-btn-favorite {
  border-color: #e0a400;
  background: #ffecb3;
  color: #3b2a00;
}

/* コメント未入力のときなどに使う */
.feedback-btn-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.processList-show,
#process-add-empty,
#process-controls,
.process-save.process-btn{
  display: none !important;
}

.fa-eye-low-vision{
/*color: #aaa !important;*/
}

/* Migrated inline styles */

.logo img {
  height: 28px;
  border: none;
}

.logo-version {
  font-size: 14px;
  color: gray;
  margin-left: 180px;
  vertical-align: middle;
  margin-top: 5px;
  position: absolute;
}

#console {
  display: none;
}

#initialPrompt {
  resize: vertical;
}

#magicWandLabel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  cursor: pointer;
  user-select: none;
  font-size: 11px;
  color: #777;
}

#magicWandToggle {
  width: 16px;
  height: 16px;
  accent-color: rgb(80, 86, 190);
  cursor: pointer;
}

.magic-wand-text {
  font-size: 12px;
}

.magic-wand-row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  margin-bottom: 12px;
  padding-bottom: 13px;
}

#reloadIfcModel {
  width: 10px;
}

#mainModelToggle {
  width: 10px;
}

#ifcModel {
  margin-bottom: 12px;
}

#overlayModelsContainer {
  margin-top: 4px;
}

#clear {
  background: transparent;
  color: #AAA;
  width: 10px;
}

.model-controls-row {
  margin-top: 15px;
}

.modal-content--overlay {
  max-width: 500px;
}

.modal-title {
  margin-top: 0;
  font-size: 16px;
  margin-bottom: 10px;
}

.modal-desc {
  font-size: 12px;
  color: #555;
  margin-top: 0;
  margin-bottom: 12px;
}

.modal-content--token {
  max-width: 420px;
}

.form-field {
  margin-bottom: 8px;
  font-size: 12px;
  color: #333;
}

.form-field--last {
  margin-bottom: 12px;
}

.form-field-label {
  margin-bottom: 4px;
}

#tektomeUserNameInput,
#tektomeTokenInput,
#tektomeStorageInput,
#tektomeRequirementUrlInput,
#tektomeGatewayTokenInput {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #ddd;
}

#tektomeUserNameInput {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

#tektomeTokenInput,
#tektomeStorageInput {
  font-family: monospace;
}

#saveTokenBtn {
  width: 120px;
}

.modal-content--expand {
  max-width: 720px;
}

.modal-title--accent {
  color: rgb(80, 86, 190);
}

#expandReasonBox {
  background: #f5f3ff;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #555;
  line-height: 1.4;
  margin-bottom: 12px;
}

.form-field > label.form-field-label {
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
  display: block;
  font-weight: bold;
}

#expandOriginal {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: #333;
  max-height: 80px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

#expandEditable {
  width: 100%;
  min-height: 350px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  resize: vertical;
  font-family: inherit;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

#expandSkipBtn {
  padding: 8px 20px;
  border-radius: 8px;
  background: #e5e7eb;
  color: #333;
  border: none;
  cursor: pointer;
  font-size: 13px;
}

#expandConfirmBtn {
  padding: 8px 20px;
  border-radius: 8px;
  background: rgb(80, 86, 190);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}

.expand-label-hint {
  font-weight: normal;
  color: #999;
}

#export-processes {
  display: none;
}

#import-processes {
  display: none;
}

.btn-model-reset {
  margin-right: 4px;
}

#processTable colgroup col:nth-child(1) { width: 30px; }
#processTable colgroup col:nth-child(2) { width: auto; }
#processTable colgroup col:nth-child(3) { width: 45%; }

#hover-tooltip {
  position: fixed; pointer-events: none; z-index: 201;
  background: rgba(255,255,255,0.92); border: 1px solid #ddd;
  border-radius: 4px; padding: 4px 10px; font-size: 11px; color: #333;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12); display: none;
}

/* ── Advanced Setting toggle in Settings Modal ── */
.advanced-setting-toggle {
  padding: 0 0 13px 0;
  font-size: 12px;
  color: #666;
  cursor: pointer;
  user-select: none;
}
.advanced-setting-toggle:hover { color: #333; }
.advanced-setting-chevron {
  font-size: 10px;
  margin-right: 4px;
  transition: transform 0.15s;
}
.advanced-setting-fields { padding-bottom: 8px; }

.advanced-setting-wrapper{
  border-bottom: 1px solid #eee;
  margin-bottom: 18px;
}

/* ── Requirement Panel ── */
.requirement-panel {
  position: absolute;
  z-index: 98;
  top: calc(var(--ui-margin) + var(--setting-panel-height) + 6px);
  right: calc(var(--ui-margin) + 250px + 6px);
  width: 280px;
  max-height: calc(100vh - var(--setting-panel-height) - 2 * var(--ui-margin) - 6px);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid #eee;
  border-radius: 5px;
  box-sizing: border-box;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-size: 12px;
  color: rgb(71, 71, 71);
}
.requirement-panel-header {
  flex: 0 0 auto;
  padding: 12px 16px 8px;
  border-bottom: 1px solid #ddd;
  position: relative;
}
.requirement-panel-header h3 { margin: 0; font-size: 14px; }
.requirement-close {
  position: absolute;
  top: 10px; right: 12px;
  cursor: pointer; color: #999; font-size: 14px;
}
.requirement-close:hover { color: #333; }
.requirement-list {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 8px 0;
}
.requirement-item {
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  cursor: default;
}
.requirement-item:last-child { border-bottom: none; }
.requirement-item-header {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}
.requirement-item-name {
  font-weight: bold; font-size: 13px;
  margin-bottom: 4px; color: #333;
  flex: 1 1 auto;
}
.requirement-check-btn {
  flex: 0 0 auto;
  background: none; border: 1px solid #ccc;
  border-radius: 4px; cursor: pointer;
  color: #888; font-size: 12px;
  padding: 2px 6px; line-height: 1;
  transition: all 0.15s;
}
.requirement-check-btn:hover {
  background: rgba(80,86,190,0.1);
  border-color: rgb(80,86,190);
  color: rgb(80,86,190);
}
.requirement-check-btn.requirement-check-done {
  background: rgb(80,86,190);
  border-color: rgb(80,86,190);
  color: #fff;
}
.requirement-item-summary {
  font-size: 11px; color: #555; line-height: 1.5;
  margin-bottom: 4px;
}
.requirement-item-recommendation {
  font-size: 11px; color: #2a6e2a; line-height: 1.5;
  margin-top: 2px;
}
.requirement-item-meta {
  font-size: 11px; color: #888; line-height: 1.5;
}
.requirement-loading,
.requirement-error {
  padding: 16px; text-align: center;
  font-size: 12px; color: #888;
}
.requirement-error { color: #c33; }
.requirement-filter-header {
  padding: 8px 16px;
  font-size: 12px; font-weight: bold; color: #4456aa;
  background: #f0f2ff;
  border-bottom: 1px solid #d8dcf0;
  display: flex; align-items: center; gap: 6px;
}
.requirement-filter-count {
  font-weight: normal; color: #888; font-size: 11px;
}
.requirement-filter-clear {
  margin-left: auto;
  cursor: pointer; color: #999; font-size: 16px; line-height: 1;
}
.requirement-filter-clear:hover { color: #333; }

/* ── Skills row & modal ── */
.skills-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 3px;
  margin-bottom: 12px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
}
.skills-row-label {
  font-size: 12px;
  color: #777;
  font-weight: 600;
  flex: 1;
}
.skills-row-btn {
  background: transparent;
  border: 1px solid #ddd;
  color: #777;
  width: 79px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  font-size: 12px;
}
.skills-row-btn:hover {
  background: #f0f2ff;
}
.skills-spinner {
  color: rgb(80, 86, 190);
  font-size: 12px;
  display: inline-block;
}
.modal-title .skills-spinner {
  font-size: 13px;
  margin-left: 6px;
}

.modal-content--skills {
  max-width: 560px;
  width: 92vw;
}
.skills-message {
  font-size: 12px;
  color: #c33;
  margin-bottom: 8px;
  min-height: 0;
}
.skills-message:empty {
  display: none;
}
.skills-actions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.btn-skill-new {
  padding: 6px 12px;
  background: rgb(80, 86, 190);
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
}
.skills-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid #eee;
  border-radius: 6px;
}
.skills-list:empty::after {
  display: block;
  padding: 16px;
  font-size: 12px;
  color: #999;
  text-align: center;
}
.skills-list:empty[data-state="loaded"]::after {
  content: "No skills yet. Click + New Skill to create one.";
}
.skills-list:empty:not([data-state])::after,
.skills-list:empty[data-state="idle"]::after,
.skills-list:empty[data-state="loading"]::after {
  content: "";
  padding: 0;
}
.skills-list-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  font-size: 12px;
  color: #888;
  list-style: none;
}
.skills-list-placeholder .fa-spinner {
  color: rgb(80, 86, 190);
}
.skills-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
}
.skills-list-item:last-child {
  border-bottom: none;
}
.skills-list-item:hover {
  background: #f5f3ff;
}
.skills-list-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.skills-list-name {
  font-size: 12px;
  font-weight: 600;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skills-list-desc {
  font-size: 11px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.skills-list-action {
  background: transparent;
  border: none;
  color: #777;
  cursor: pointer;
  font-size: 13px;
  padding: 4px 6px;
  border-radius: 4px;
}
.skills-list-action:hover {
  background: #e5e7eb;
  color: #333;
}
.skills-list-action.danger:hover {
  color: #c33;
}
.skills-edit-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}
#skillsEditName {
  width: 100%;
  box-sizing: border-box;
  padding: 8px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #ddd;
}
#skillsEditContent {
  width: 100%;
  min-height: 180px;
  box-sizing: border-box;
  padding: 10px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 6px;
  border: 1px solid #ddd;
  resize: vertical;
  font-family: inherit;
}
#skillsEditCancelBtn {
  padding: 8px 16px;
  border-radius: 8px;
  background: #e5e7eb;
  color: #333;
  border: none;
  cursor: pointer;
  font-size: 13px;
}
#skillsEditSaveBtn {
  padding: 8px 16px;
  border-radius: 8px;
  background: rgb(80, 86, 190);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}